/* ============================================================================
   MiNiGAME site stylesheet · direction 01 GOLD MINE, unscoped for the real site

   A mine shaft lit by torches. Near black cut stone, one warm light source per
   section, and gold used only where something is worth looking at.

   What this file is
     The board stylesheet assets/css/01-gold-mine.css, ported to a real
     multi page site. Three things changed and nothing else:
       1. .dir-01 is gone. Tokens live on :root, the page ground lives on
          html, body.
       2. Every @container page (min-width: N) became @media (min-width: N) at
          375, 768, 1024 and 1440. Mobile first: the unprefixed rules ARE the
          phone layout. No container-type, no container-name, no cqi.
       3. Board chrome is gone: .board, .board-head, .board-nav, .board-label,
          .board-note, the swatch and spec table shells, the .phone handset
          frame and the .mock wrappers.

   Texture recipe
     raised block  dark base + grain + 1px gold hairline on the TOP edge +
                   black line under the bottom edge + a hard drop shadow
     cut block     darker base + hard inner shadow, no hairline
   Light recipe
     one radial torch per section, a page vignette carried as an inset shadow
     so it never covers text or eats a click, a gold rim on whatever sits
     closest to the light, and a vertical falloff so the bottom of a section is
     darker than its top.

   Money stays #2eb510 and tokens stay #2BE3E8, and neither ever picks up the
   gold glow, so both keep reading as currency.

   ----------------------------------------------------------------------------
   THE HEAD BLOCK. Every page is at the ROOT, so no path has a ../ prefix.
   Title pattern: "<Page> · MiNiGAME". The home page uses
   "MiNiGAME · Mine it, sell it, rank up to Z".

   <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Leaderboards · MiNiGAME</title>
   <meta name="description" content="One line about this page, in the server voice. No marketing words.">
   <link rel="icon" href="favicon.png">
   <link rel="apple-touch-icon" href="favicon.png">
   <link rel="stylesheet" href="assets/fonts/fonts.css">
   <link rel="stylesheet" href="site/css/minigame.css">
   </head>
   <body>
   ... skip link, header, ticker, main, footer ...
   <script src="site/js/icons.js"></script>
   <script src="site/js/stats.js"></script>
   <script src="site/js/site.js"></script>
   </body>
   </html>

   fonts.css uses bare file names inside itself, so one link resolves from
   anywhere. Never restate an @font-face rule. Families: 'Changa One' for
   display, 'Rubik' for body.

   ----------------------------------------------------------------------------
   THE SHELL MARKUP. Copy this verbatim on every page. Change only the one
   nav link that carries aria-current="page" and .is-current, and the
   data-search input id so two ids never collide on one page.

   <a class="mg-skip" href="#main">Skip to the content</a>

   <header class="mg-nav" id="top">
     <div class="mg-nav-inner">
       <a class="mg-logo" href="index.html">
         <img src="1000257777.png" width="2580" height="557" alt="MiNiGAME home" fetchpriority="high" decoding="async">
       </a>
       <button class="mg-nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="mg-nav-links" aria-label="Menu">
         <span class="mg-burger" aria-hidden="true"></span>
         <span class="mg-nav-toggle-text">Menu</span>
       </button>
       <nav class="mg-nav-links od-rail" id="mg-nav-links" aria-label="Main">
         <a class="mg-nav-link is-current" href="index.html" aria-current="page">Home</a>
         <a class="mg-nav-link" href="leaderboards.html">Leaderboards</a>
         <a class="mg-nav-link" href="https://wiki.minigame.gg/">Wiki</a>
         <a class="mg-nav-link" href="https://store.minigame.gg"><svg class="mg-icon" width="20" height="20" aria-hidden="true" focusable="false"><use href="#mg-store"></use></svg>Store</a>
         <a class="mg-nav-link" href="vote.html"><svg class="mg-icon" width="20" height="20" aria-hidden="true" focusable="false"><use href="#mg-vote"></use></svg>Vote</a>
         <a class="mg-nav-link" href="https://discord.gg/minigamegg"><svg class="mg-icon" width="20" height="20" aria-hidden="true" focusable="false"><use href="#mg-discord"></use></svg>Discord</a>
       </nav>
       <div class="mg-search" data-search>
         <label class="sr-only" for="find-home">Find a player</label>
         <div class="mg-search-field">
           <svg class="mg-icon" width="20" height="20" aria-hidden="true" focusable="false"><use href="#mg-search"></use></svg>
           <input id="find-home" type="search" data-search-input placeholder="Find a player" autocomplete="off">
         </div>
         <ul class="mg-search-list" data-search-list hidden></ul>
       </div>
     </div>
   </header>

   <div class="mg-ticker" data-ticker>
     <span class="mg-ticker-tag od-nowrap">Live</span>
     <div class="mg-ticker-win">
       <div class="mg-ticker-track" data-ticker-track>
         <span class="mg-ticker-item od-nowrap"><svg class="mg-icon" width="12" height="12" aria-hidden="true" focusable="false"><use href="#mg-dot"></use></svg>PickaxePete hit Prestige 4</span>
         <span class="mg-ticker-item od-nowrap"><svg class="mg-icon" width="12" height="12" aria-hidden="true" focusable="false"><use href="#mg-dot"></use></svg>DiamondDana hatched Rocket Panda</span>
         <span class="mg-ticker-item od-nowrap"><svg class="mg-icon" width="12" height="12" aria-hidden="true" focusable="false"><use href="#mg-dot"></use></svg>LuckyLuna passed $8.4T</span>
         <span class="mg-ticker-item od-nowrap"><svg class="mg-icon" width="12" height="12" aria-hidden="true" focusable="false"><use href="#mg-dot"></use></svg>TokenTia banked 100M tokens</span>
         <span class="mg-ticker-item od-nowrap"><svg class="mg-icon" width="12" height="12" aria-hidden="true" focusable="false"><use href="#mg-dot"></use></svg>GrindGus cleared a dungeon</span>
         <span class="mg-ticker-item od-nowrap"><svg class="mg-icon" width="12" height="12" aria-hidden="true" focusable="false"><use href="#mg-dot"></use></svg>OreOlly ranked up to Rank Q</span>
         <span class="mg-ticker-item od-nowrap"><svg class="mg-icon" width="12" height="12" aria-hidden="true" focusable="false"><use href="#mg-dot"></use></svg>.BedrockBen opened a Jackpot Key</span>
         <span class="mg-ticker-item od-nowrap"><svg class="mg-icon" width="12" height="12" aria-hidden="true" focusable="false"><use href="#mg-dot"></use></svg>MinerMax joined Ore Lords</span>
         <span class="mg-ticker-item od-nowrap"><svg class="mg-icon" width="12" height="12" aria-hidden="true" focusable="false"><use href="#mg-dot"></use></svg>SkyeShovel placed a generator</span>
         <span class="mg-ticker-item od-nowrap"><svg class="mg-icon" width="12" height="12" aria-hidden="true" focusable="false"><use href="#mg-dot"></use></svg>RankRiley unlocked Meteor Shower</span>
       </div>
     </div>
   </div>

   <main id="main">
     ... the page ...
   </main>

   <footer class="mg-foot">
     <div class="mg-wrap mg-foot-inner">
       <div class="od-row mg-foot-brand">
         <img class="mg-foot-logo" src="1000257777.png" width="2580" height="557" alt="MiNiGAME" decoding="async" loading="lazy">
         <span class="mg-foot-ip od-nowrap">play.minigame.gg</span>
       </div>
       <nav class="mg-foot-links od-cluster" aria-label="Footer">
         <a href="index.html">Home</a>
         <a href="leaderboards.html">Leaderboards</a>
         <a href="past-months.html">Past months</a>
         <a href="rules.html">Rules</a>
         <a href="guides.html">Guides</a>
         <a href="https://wiki.minigame.gg/">Wiki</a>
         <a href="https://store.minigame.gg">Store</a>
         <a href="vote.html">Vote</a>
         <a href="https://discord.gg/minigamegg">Discord</a>
       </nav>
       <div class="mg-foot-note od-stack mg-stack-8">
         <p class="mg-foot-line">This site reads its numbers from <code class="mg-cmd">/stats/*</code>. <span class="mg-sample" data-stat-sample>Sample data</span></p>
         <p class="mg-foot-line">Not affiliated with Mojang or Microsoft.</p>
       </div>
     </div>
   </footer>

   ----------------------------------------------------------------------------
   COMPONENT INVENTORY. These are the class names that exist. Build from this
   list. Anything missing here does not exist yet, so ask instead of inventing.

   PAGE AND SECTION
     .mg-page            optional passthrough wrapper, position relative only
     .mg-sec             page section, 32px block padding and the side gutter
     .mg-sec-tight       same section with its top padding removed
     .mg-sec-lit         adds one radial torch glow plus a vertical falloff
     .mg-wrap            content container, max-width 1240px, centred
     .mg-sec-head        section heading row, title left and a note right
     .mg-eyebrow         small uppercase gold label above a heading
     .mg-h1 .mg-h2 .mg-h3 .mg-h4   Changa One display sizes, h1 uses clamp()
     .mg-lede            one size up body line under an h1
     .mg-copy            running copy, 16px, max 68ch
     .mg-sec-sub .mg-sub secondary line under a heading or inside a row
     .mg-label           small caps-ish label above a value
     .mg-stack-4 .mg-stack-8 .mg-stack-12 .mg-stack-16 .mg-stack-24 .mg-stack-32
                         gap presets for .od-stack
     .mg-link            in-page link, gold with an underline
     .mg-cmd             a chat command such as /sell, in #2ba0ff
     .sr-only            visually hidden, still read out loud

   STONE
     .mg-panel           raised block: grain, gold top hairline, hard shadow
     .mg-pad             the standard panel padding, grows by breakpoint
     .mg-cut             cut block: darker, hard inner shadow, no hairline

   BUTTONS
     .btn3d              gold face, 5px #8A6300 bottom edge, collapses on press
     .btn3d-lg           the hero size of the same button
     .btn-ghost          stone face, same geometry, for the secondary action
     .mg-spin            the 18px spinner that goes inside .btn3d.is-loading
     .btn3d.is-loading   cursor progress, keep the label, add .mg-spin
     .btn3d[disabled]    flat stone face, no edge, not-allowed

   HEADER AND FOOTER
     .mg-skip            skip to content link, visible on focus
     .mg-nav             the sticky site header
     .mg-nav-inner       its grid: logo, toggle, links, search
     .mg-logo            the wordmark link, aspect-ratio 2580 / 557
     .mg-nav-links       the nav rail, collapsed under 768px
     .mg-nav-link        one nav link
     .mg-nav-link.is-current   the current page, paired with aria-current="page"
     .mg-nav-toggle      the menu button, visible under 768px only
     .mg-burger          its three-line glyph
     .mg-foot            the footer
     .mg-foot-inner .mg-foot-brand .mg-foot-logo .mg-foot-ip
     .mg-foot-links      the footer link cluster
     .mg-foot-note .mg-foot-line

   SEARCH AND TICKER
     .mg-search          the search box wrapper, carries data-search
     .mg-search-field    the cut input socket
     .mg-search-list     the result list, absolute under the field
     .search-row .search-head .search-name .search-empty   one result row
     .mg-ticker .mg-ticker-tag .mg-ticker-win .mg-ticker-track .mg-ticker-item

   HERO AND IP BAR
     .mg-hero .mg-hero-inner .mg-hero-logo .mg-tagline .mg-hero-cta
     .mg-ipbar           the IP panel
     .mg-ipbar-top       its top row: IP block, online count, copy button
     .mg-ip-block .mg-ip .mg-online
     .mg-connect .mg-connect-line .mg-connect-tag .mg-connect-val

   CARDS AND ROWS
     .mg-features .mg-feature .mg-socket .mg-feature-title .mg-feature-blurb
     .mg-updates .mg-update .mg-update-date .mg-update-title
     .mg-cta .mg-cta-card
     .mg-races .mg-trio .mg-past   board grids, 1 up to 2 or 3 by breakpoint
     .mg-board-panel .mg-board-head

   BOARDS
     .mg-lb-top .mg-lb-head .mg-lb-meta .mg-lb-intro   the leaderboard header
     .mg-meta-tile       a small raised tile for time left or board status
     .mg-updated         the clock plus the updated-ago label
     .mg-countdown       the countdown value, carries data-countdown
     .mg-podium          the three plinths, 1 2 3 in the DOM, 2 1 3 on screen
     .mg-plinth .mg-plinth-1 .mg-plinth-2 .mg-plinth-3
     .mg-plinth-open     a dashed empty plinth for an unclaimed place
     .mg-place           1st 2nd 3rd
     .mg-head3d          the 128x136 cube head on a plinth
     .mg-plinth-empty .mg-plinth-name .mg-plinth-sub
     .mg-prize           the prize chip beside a place
     .mg-list            the ranked list, zebra striped
     .mg-row             one row, min-height 52px
     .mg-rank .mg-head .mg-head-lg .mg-row-name .mg-row-val
     .mg-row-gang        a gang row, name over leader and members
     .mg-row-pet         a pet row, wraps its meta cluster
     .mg-row-muted .mg-notranked
     .mg-rankletter      the A to Z mine rank letter on the prestige board
     .mg-tailnote        the muted note row under a truncated board
     .mg-tabs .mg-tablist .mg-tab .mg-tabpanel   the board switcher

   VALUES
     .mg-num             a number, ore yellow with a faint glow
     .mg-money           money, #2eb510, never glows
     .mg-tokens          tokens, #2BE3E8, never glows
     .mg-tile            number tile
     .mg-tile-big        the money and tokens pair on a profile
     .mg-tile-label .mg-tile-val
     .mg-currency .mg-stats .mg-monthstrip   the three tile groups
     .mg-rarity          rarity chip, the word is always on screen
     .mg-rarity-common .mg-rarity-rare .mg-rarity-epic .mg-rarity-legendary
     .mg-rarity-secret .mg-gem .mg-rarityrail
     .mg-stars .mg-pet-meta
     .mg-badge           a leaderboard badge, place plus board name
     .mg-badges .mg-badge-place .mg-badge-board
     .mg-sample          the sample data marker, put data-stat-sample on it

   PROFILE AND GANG
     .mg-profile .mg-pf-card .mg-pf-ident .mg-body .mg-pf-nameline
     .mg-pf-name .mg-pf-joined .mg-pf-ranks .mg-pf-pair .mg-pf-main
     .mg-rankchip        Rank Z or Prestige 4
     .mg-rolechip        Leader or Member
     .mg-pf-role .mg-pf-pets .mg-month

   STATES
     .mg-empty .mg-empty-line    the empty state block
     [hidden]                    display none, always

   LIVE DATA HOOKS, all owned by site/js/stats.js and site/js/site.js
     data-stat="path.to.value"   text is overwritten by the payload
     data-stat-updated           gets the updated-ago label
     data-stat-sample            shown only while the payload is sample
     data-copy-ip data-copy-label data-countdown data-tabs data-tablist
     data-tab data-tab-default data-panel data-search data-search-input
     data-search-list data-ticker data-ticker-track data-nav-toggle data-press
   ========================================================================= */


/* ===========================================================================
   1. OD-LAYOUT-PRIMITIVES v1, verbatim from assets/shared/base.css.
   Do not edit anything between the two marker comments. Everything below the
   layer sits outside it, so product CSS always wins.
   ========================================================================= */

/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */


/* ===========================================================================
   2. Reset and accessibility floor
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; max-width: 100%; }

/* Minecraft renders are square pixel art. Keep them crisp when scaled up. */
img[src*="/renders/"] { image-rendering: pixelated; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
a { color: inherit; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus:not(:focus-visible) { outline: none; }

/* Global motion guard. site.js checks the same query in JS. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===========================================================================
   3. Tokens
   ========================================================================= */

:root {

  /* Fonts. The font lab (playground only) swaps these two at runtime, so
     every heading, number and paragraph on the site follows one switch.
     Keep the generic fallback so nothing can land on Times. */
  --font-display: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --ground: #0D0B09;
  --panel:  #16130F;
  --stone:  #241E17;
  --line:   #3A2F22;

  --gold:  #fcba03;
  --torch: #FF9A1F;
  --ore:   #FFD52B;
  --edge:  #8A6300;

  --money:  #2eb510;
  --tokens: #2BE3E8;
  --blue:   #2ba0ff;

  --ink:  #F3EADA;   /* headings and names */
  --body: #AAAAAA;   /* running copy, 7:1 on panel and on stone */
  --dim:  #8F877C;   /* placeholders only, never running copy */

  --r: 6px;
  --dur: 180ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Height of the sticky header, so anchors never land under it. */
  --head-h: 112px;

  /* Fine stone grain. One inline SVG so there is no network request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* ===========================================================================
   4. The page. Ground, vignette, type defaults.
   ========================================================================= */

html {
  background-color: var(--ground);
  /* The sticky header is this tall, so an anchor stops below it. */
  scroll-padding-top: calc(var(--head-h) + 8px);
}

html, body {
  background-color: var(--ground);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  line-height: 1.5;
  background-image: linear-gradient(180deg, #16120D 0%, var(--ground) 420px);
  background-repeat: no-repeat;
  /* The vignette. An inset shadow paints over the ground but under content,
     so it never dims the text and never eats a click. */
  box-shadow: inset 0 0 190px 46px rgba(0, 0, 0, 0.78);
}

/* Optional passthrough wrapper. The ground lives on body now, so this only
   gives a page its own stacking context. */
.mg-page { position: relative; isolation: isolate; }

/* Focus ring. Ore yellow is louder than currentColor on near black. */
:focus-visible { outline: 3px solid var(--ore); outline-offset: 3px; }

/* Anything with an id can be a jump target, so keep it clear of the header. */
[id] { scroll-margin-top: calc(var(--head-h) + 8px); }

.mg-skip {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r);
  background: var(--gold);
  color: #16130F;
  font-family: var(--font-display);
  font-size: 18px;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.mg-skip:focus { top: 8px; }


/* ===========================================================================
   5. Section rhythm. Every step is a multiple of 8.
   ========================================================================= */

.mg-sec { position: relative; padding: 32px 16px; }
.mg-sec-tight { padding-block: 0 32px; }
.mg-wrap { max-width: 1240px; margin-inline: auto; }

/* One radial torch per section, plus the vertical falloff that makes the
   bottom of a section darker than its top. Opt in with .mg-sec-lit. */
.mg-sec-lit { isolation: isolate; overflow: hidden; }
.mg-sec-lit::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 56% at 50% 0%, rgba(255, 154, 31, 0.16) 0%, rgba(252, 186, 3, 0.05) 42%, rgba(0, 0, 0, 0) 74%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%);
}

.mg-stack-4  { --od-gap: 4px; }
.mg-stack-8  { --od-gap: 8px; }
.mg-stack-12 { --od-gap: 12px; }
.mg-stack-16 { --od-gap: 16px; }
.mg-stack-24 { --od-gap: 24px; }
.mg-stack-32 { --od-gap: 32px; }


/* ===========================================================================
   6. Type
   ========================================================================= */

.mg-h1,
.mg-h2,
.mg-h3,
.mg-h4,
.mg-feature-title,
.mg-update-title,
.mg-pf-name,
.mg-place,
.mg-tile-val {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.12;
}

.mg-h1 { font-size: clamp(30px, 7vw, 50px); }
.mg-h2 { font-size: clamp(23px, 4vw, 32px); }
.mg-h3 { font-size: clamp(19px, 2.6vw, 23px); }
.mg-h4 { font-size: 18px; }

.mg-eyebrow {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.mg-lede { font-size: clamp(17px, 2.4vw, 20px); color: #CFC6B8; }
.mg-copy { font-size: 16px; line-height: 1.55; color: var(--body); max-width: 68ch; }
.mg-sec-sub { font-size: 16px; color: var(--body); }
.mg-sub { font-size: 16px; color: var(--body); }

.mg-label {
  --od-gap: 8px;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #BDB3A4;
}

.mg-cmd {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.95em;
  color: var(--blue);
}

/* In-page links. A browser default never reaches product UI. */
.mg-link,
.mg-copy a,
.mg-foot-line a,
.mg-empty-line a,
.mg-sub a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 3px;
  transition: color var(--dur) var(--ease);
}
.mg-link:hover,
.mg-copy a:hover,
.mg-foot-line a:hover,
.mg-empty-line a:hover,
.mg-sub a:hover { color: var(--ore); }

/* Numbers glow faintly. Money and tokens deliberately do not. */
.mg-num {
  color: var(--ore);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 213, 43, 0.28);
}
.mg-money  { color: var(--money);  text-shadow: none; }
.mg-tokens { color: var(--tokens); text-shadow: none; }
.mg-tokens .mg-icon,
.mg-row-val .mg-icon { display: inline-block; vertical-align: -3px; margin-right: 6px; }

.mg-sample {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #1B1711;
  color: #BDB3A4;
  font-size: 16px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mg-icon { flex: none; }


/* ===========================================================================
   7. Stone. Raised blocks and cut blocks.
   ========================================================================= */

.mg-panel {
  position: relative;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: var(--panel);
  background-image:
    linear-gradient(180deg, rgba(255, 154, 31, 0.055) 0%, rgba(0, 0, 0, 0) 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0.42) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 186, 3, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.65),
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 16px 30px -20px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}

/* Grain. Low opacity so it reads as cut rock, not as a filter. */
.mg-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.055;
  pointer-events: none;
}

.mg-pad { padding: 16px; }

/* A cut block: recessed, inner shadow, no hairline. */
.mg-cut,
.mg-search-field,
.mg-socket,
.mg-ticker-win {
  border-radius: var(--r);
  border: 1px solid #0A0806;
  background-color: #0E0B08;
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.85),
    inset 0 -1px 0 rgba(252, 186, 3, 0.07);
}


/* ===========================================================================
   8. Buttons. Flat gold face, 5px bottom edge, pressed collapses it.
   ========================================================================= */

.btn3d,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 9px 22px;
  border-radius: var(--r);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.btn3d {
  border: 1px solid #9B7103;
  background-color: var(--gold);
  background-image: linear-gradient(180deg, #FFD52B 0%, #fcba03 55%, #EDA800 100%);
  color: #16130F;
  box-shadow:
    0 5px 0 var(--edge),
    0 9px 16px -7px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn3d-lg { font-size: 21px; padding: 13px 30px; min-height: 52px; }

.btn3d:hover,
.btn3d.is-hover {
  background-image: linear-gradient(180deg, #FFE473 0%, #FFD52B 55%, #F5B600 100%);
}
.btn3d:focus-visible,
.btn3d.is-focus {
  outline: 3px solid var(--ore);
  outline-offset: 3px;
}
.btn3d:active,
.btn3d.is-pressed {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--edge),
    0 2px 4px -2px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn3d.is-loading { cursor: progress; }
.btn3d[disabled],
.btn3d[aria-disabled="true"] {
  background-image: none;
  background-color: #3A2F22;
  border-color: #2A2219;
  color: #A39A8E;
  box-shadow: 0 5px 0 #231C14;
  cursor: not-allowed;
  transform: none;
}

.mg-spin {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(22, 19, 15, 0.28);
  border-top-color: #16130F;
  animation: mg-spin 800ms linear infinite;
}
@keyframes mg-spin { to { transform: rotate(360deg); } }

.btn-ghost {
  border: 1px solid var(--line);
  background-color: var(--stone);
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.09), rgba(0, 0, 0, 0.28));
  color: var(--ink);
  box-shadow: 0 4px 0 #100D0A, inset 0 1px 0 rgba(252, 186, 3, 0.2);
}
.btn-ghost:hover { background-color: #2C2419; }
.btn-ghost:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #100D0A, inset 0 1px 0 rgba(252, 186, 3, 0.2);
}

/* Two buttons side by side keep 8px of clear air between their hit areas. */
.od-cluster > .btn3d + .btn3d,
.od-cluster > .btn3d + .btn-ghost,
.od-cluster > .btn-ghost + .btn3d { margin-left: 0; }


/* ===========================================================================
   9. The sticky site header
   ========================================================================= */

.mg-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background-color: #120F0B;
  background-image: linear-gradient(180deg, #1D1812 0%, #100D0A 100%);
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.14), 0 3px 14px rgba(0, 0, 0, 0.65);
}

.mg-nav-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "logo menu"
    "find find"
    "links links";
  gap: 10px 12px;
  align-items: center;
  padding: 10px 16px;
}
.mg-logo { grid-area: logo; display: inline-flex; align-items: center; min-height: 44px; }
.mg-nav-toggle { grid-area: menu; }
.mg-search { grid-area: find; position: relative; }
.mg-nav-links { grid-area: links; }

.mg-logo img { width: auto; height: 30px; aspect-ratio: 2580 / 557; }

/* Collapsed under 768px. site.js flips aria-expanded and .is-open. */
.mg-nav-links { display: none; }
.mg-nav.is-open .mg-nav-links {
  --od-gap: 8px;
  --od-rail-pad: 0px;
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
  padding-block: 4px 8px;
}

.mg-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: var(--stone);
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.09), rgba(0, 0, 0, 0.28));
  color: var(--ink);
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.2), 0 2px 0 #100D0A;
}
.mg-nav-toggle:hover { background-color: #2C2419; }
.mg-nav-toggle[aria-expanded="true"] {
  border-color: #6B5014;
  color: var(--gold);
}
.mg-burger {
  flex: none;
  width: 18px;
  height: 2px;
  background-color: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.mg-nav-toggle-text { font-family: var(--font-display); font-size: 17px; }

.mg-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r);
  color: var(--body);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.mg-nav-link:hover { color: var(--ink); background-color: #241E17; }
.mg-nav-link.is-current,
.mg-nav-link[aria-current="page"] {
  color: var(--gold);
  background-color: #1F1A12;
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.22), inset 0 -2px 0 var(--gold);
}


/* ===========================================================================
   10. Player search
   ========================================================================= */

.mg-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--body);
}
.mg-search input {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 16px;
}
.mg-search input::placeholder { color: var(--dim); }
.mg-search input:focus { outline: none; }
.mg-search:focus-within .mg-search-field {
  border-color: var(--gold);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.85), 0 0 0 3px rgba(252, 186, 3, 0.32);
}

.mg-search-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: #17130E;
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.16), 0 20px 44px -14px rgba(0, 0, 0, 0.95);
}
.search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}
.search-row:hover,
.search-row.is-active {
  background-color: var(--stone);
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.2);
}
.search-head { flex: none; width: 28px; height: 28px; border-radius: 3px; }
.search-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 12px 10px; color: var(--body); font-size: 16px; }


/* ===========================================================================
   11. Activity ticker. A lit strip cut into the stone under the header.
   ========================================================================= */

.mg-ticker {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background-color: #0F0C09;
  background-image: linear-gradient(180deg, rgba(255, 154, 31, 0.12), rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.2);
  overflow: hidden;
}
.mg-ticker-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background-image: linear-gradient(180deg, var(--ore), var(--gold));
  color: #16130F;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 10px 0 24px -6px rgba(255, 154, 31, 0.45);
}
.mg-ticker-win {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  border-radius: 0;
  border: 0;
  border-left: 1px solid #0A0806;
  overflow: hidden;
}
.mg-ticker-track {
  flex: none;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 11px 15px;
  white-space: nowrap;
  animation: mg-ticker-run 52s linear infinite;
}
@keyframes mg-ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.mg-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  color: #D6CDBF;
}
.mg-ticker-item .mg-icon { color: var(--torch); }

/* The two states site.js drives. Both the original track and its clone. */
[data-ticker].is-paused [data-ticker-track],
[data-ticker].is-paused .mg-ticker-track { animation-play-state: paused; }
[data-ticker].is-static [data-ticker-track],
[data-ticker].is-static .mg-ticker-track { animation: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mg-ticker-track { animation: none; transform: none; }
  .mg-ticker-win { overflow-x: auto; }
}


/* ===========================================================================
   12. Hero. Promo art, dimmed and warmed, with the torch behind the wordmark.
   ========================================================================= */

.mg-hero {
  position: relative;
  padding: 32px 16px 40px;
  text-align: center;
  background-color: var(--ground);
  overflow: hidden;
}
/* The promo art, pushed back into the dark. */
.mg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../minigame_1.png") center 38% / cover no-repeat;
  filter: grayscale(0.78) sepia(0.4) brightness(0.42) contrast(1.08);
  pointer-events: none;
}
/* The torch, plus the falloff that makes the bottom darker than the top. */
.mg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 56% at 50% 36%, rgba(255, 154, 31, 0.34) 0%, rgba(252, 186, 3, 0.11) 40%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(13, 11, 9, 0.5) 0%, rgba(13, 11, 9, 0.8) 58%, var(--ground) 100%);
}
.mg-hero-inner {
  position: relative;
  z-index: 1;
  --od-gap: 20px;
  align-items: center;
  max-width: 980px;
  margin-inline: auto;
}
.mg-hero-logo {
  width: 100%;
  max-width: 820px;
  margin: 0;
  aspect-ratio: 2802 / 724;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 44px rgba(255, 154, 31, 0.3));
}
.mg-hero-logo img { width: 100%; height: auto; }
.mg-tagline {
  /* Long two-sentence line. The measure stays inside the readable range
     at both ends (about 40 characters on a 375px phone, 60 on desktop)
     and pretty wrapping keeps a single word off the last line. */
  max-width: 52ch;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.5;
  color: #DCD3C4;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .mg-tagline { max-width: 60ch; }
}
.mg-hero-cta { justify-content: center; --od-gap: 12px; }
/* On a short phone the long tagline pushes the buttons down, so the hero
   stack closes up below 768px. */
@media (max-width: 767px) {
  .mg-hero-inner { --od-gap: 14px; }
}


/* ===========================================================================
   13. IP bar and connection lines
   ========================================================================= */

.mg-ipbar { padding: 16px; }
.mg-ipbar-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.mg-ip-block { --od-gap: 2px; }
.mg-ip {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 30px);
  color: var(--ore);
  text-shadow: 0 0 16px rgba(255, 213, 43, 0.3);
}
.mg-online {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #CFC6B8;
}
.mg-online .mg-icon { color: var(--money); filter: drop-shadow(0 0 6px rgba(46, 181, 16, 0.7)); }

.mg-connect { --od-gap: 8px; margin-top: 16px; }
.mg-connect-line {
  --od-gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid #0A0806;
  background-color: #0E0B08;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.8);
}
.mg-connect-tag {
  flex: none;
  padding: 2px 9px;
  border-radius: 4px;
  background-color: var(--stone);
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.2);
}
.mg-connect-val { min-width: 0; font-size: 16px; color: #CFC6B8; overflow-wrap: anywhere; }


/* ===========================================================================
   14. Section heads, feature cards, updates, calls to action
   ========================================================================= */

.mg-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 0;
}

.mg-features { --od-cols: 1; --od-gap: 12px; }

.mg-feature {
  --od-gap: 12px;
  position: relative;
  padding: 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: var(--stone);
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.07) 0%, rgba(0, 0, 0, 0.3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 186, 3, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 2px 0 rgba(0, 0, 0, 0.5);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mg-feature:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(252, 186, 3, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 4px 0 rgba(0, 0, 0, 0.5),
    0 0 36px -10px rgba(255, 154, 31, 0.45);
}

/* The icon sits in a socket cut into the stone. */
.mg-socket {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background-image: radial-gradient(74% 74% at 50% 118%, rgba(255, 154, 31, 0.26) 0%, rgba(0, 0, 0, 0) 70%);
}
.mg-feature-title { font-size: 20px; }
.mg-feature-blurb { font-size: 16px; line-height: 1.5; color: var(--body); }

.mg-updates { --od-cols: 1; --od-gap: 12px; }
.mg-update {
  --od-gap: 8px;
  padding: 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background-color: var(--panel);
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.05), rgba(0, 0, 0, 0.3));
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.14), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.mg-update-date {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 4px;
  background-color: #1F1A12;
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 16px;
}
.mg-update-title { font-size: 19px; }

.mg-race-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.mg-race-timer { --od-gap: 4px; }
.mg-countdown { font-family: var(--font-display); font-size: clamp(20px, 3vw, 26px); }
.mg-race-note { flex: 1 1 240px; }

.mg-cta { --od-cols: 1; --od-gap: 12px; }
.mg-cta-card { --od-gap: 12px; align-items: flex-start; }


/* ===========================================================================
   15. Footer
   ========================================================================= */

.mg-foot {
  position: relative;
  padding: 32px 16px 40px;
  border-top: 1px solid var(--line);
  background-color: #0A0806;
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.04) 0%, rgba(0, 0, 0, 0) 40%);
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.1);
}
.mg-foot-inner { display: grid; gap: 16px; }
.mg-foot-brand { --od-gap: 12px; }
.mg-foot-logo { width: auto; height: 22px; aspect-ratio: 2580 / 557; }
.mg-pfp { flex: none; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); }
.mg-foot-name {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
}
.mg-foot-ip { font-size: 16px; color: var(--body); }
.mg-foot-links { --od-gap: 4px; }
.mg-foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r);
  color: var(--body);
  font-size: 16px;
  text-decoration: none;
}
.mg-foot-links a:hover { color: var(--gold); background-color: #1A160F; }
.mg-foot-note { font-size: 16px; color: var(--body); }
.mg-foot-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--body);
}


/* ===========================================================================
   16. Leaderboard head
   ========================================================================= */

.mg-lb-top { padding-bottom: 8px; }
.mg-lb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.mg-lb-meta { --od-gap: 10px; }
.mg-meta-tile {
  --od-gap: 2px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: var(--stone);
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.07), rgba(0, 0, 0, 0.3));
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.18), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.mg-updated {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  color: #CFC6B8;
}
.mg-updated .mg-icon { color: var(--gold); }
.mg-lb-intro { margin-top: 16px; }


/* ===========================================================================
   17. Boards: panels, podium, rows
   ========================================================================= */

.mg-races { --od-cols: 1; --od-gap: 16px; }
.mg-trio  { --od-cols: 1; --od-gap: 16px; }
.mg-past  { --od-cols: 1; --od-gap: 16px; }

.mg-board-panel { padding: 16px; }
.mg-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 16px;
}

/* Podium. Three plinths, tallest in the middle, the gold one lit hardest.
   DOM order is 1, 2, 3 so a screen reader reads the ranking in order; the
   visual swap to 2, 1, 3 happens with `order` once there is room. */
.mg-podium {
  position: relative;
  isolation: isolate;   /* keeps each plinth glow above the panel face */
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.mg-plinth {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 10px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: var(--stone);
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.1) 0%, rgba(0, 0, 0, 0.45) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 186, 3, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.7),
    0 3px 0 rgba(0, 0, 0, 0.6),
    0 18px 30px -22px rgba(0, 0, 0, 0.95);
  text-align: center;
}
.mg-plinth > * { max-width: 100%; }
/* The torch behind each plinth. */
.mg-plinth::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -26px;
  width: 200px;
  height: 150px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 154, 31, 0.22) 0%, rgba(0, 0, 0, 0) 68%);
  pointer-events: none;
}
/* First place sits nearest the light, so it gets the gold rim. */
.mg-plinth-1 {
  border-color: #7A5C14;
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.2) 0%, rgba(0, 0, 0, 0.45) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 213, 43, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.7),
    0 3px 0 rgba(0, 0, 0, 0.6),
    0 0 48px -8px rgba(255, 154, 31, 0.4),
    0 18px 30px -22px rgba(0, 0, 0, 0.95);
}
.mg-plinth-1::before { background: radial-gradient(circle, rgba(255, 154, 31, 0.42) 0%, rgba(0, 0, 0, 0) 68%); }
.mg-plinth-open { border-style: dashed; background-image: none; }

.mg-place {
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mg-plinth-1 .mg-place { color: var(--ore); text-shadow: 0 0 14px rgba(255, 213, 43, 0.5); }

.mg-head3d { width: 76px; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8)); }
.mg-plinth-1 .mg-head3d { width: 92px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 16px rgba(255, 154, 31, 0.45)); }
.mg-plinth-empty {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: var(--r);
  border: 1px dashed var(--line);
  opacity: 0.7;
}

.mg-plinth-name {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
}
.mg-plinth-sub { max-width: 100%; font-size: 16px; color: var(--body); }
.mg-prize {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #6B5014;
  background-color: #1F1A12;
  color: var(--ore);
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.22);
}

/* Ranked list */
.mg-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mg-row {
  --od-gap: 10px;
  min-height: 52px;
  padding: 7px 10px;
  border-radius: 4px;
  background-color: rgba(36, 30, 23, 0.42);
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.07);
}
.mg-list > .mg-row:nth-child(odd) { background-color: rgba(36, 30, 23, 0.72); }
.mg-rank {
  flex: none;
  min-width: 26px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gold);
  text-align: right;
}
.mg-head {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(252, 186, 3, 0.1);
}
.mg-head-lg { width: 48px; height: 48px; }
.mg-row-name { font-size: 16px; font-weight: 500; color: var(--ink); }
.mg-row-val { flex: none; font-size: 16px; text-align: right; }
.mg-row-val.od-cell { --od-gap: 0px; }
.mg-rankletter { font-size: 16px; color: var(--body); }
.mg-row-gang .mg-sub { font-size: 16px; }
.mg-row-muted { opacity: 0.8; }
.mg-notranked { color: var(--body); font-style: normal; }

/* A row that is a link to a player or a gang page. */
a.mg-row { text-decoration: none; transition: background-color var(--dur) var(--ease); }
a.mg-row:hover { background-color: rgba(58, 47, 34, 0.9); }

.mg-row-pet { flex-wrap: wrap; }
.mg-pet-meta { --od-gap: 8px; }
.mg-stars { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--ore); }
.mg-stars .mg-icon { color: var(--ore); }

.mg-tailnote {
  margin-top: 8px;
  padding: 12px 10px;
  border-radius: 4px;
  border: 1px dashed var(--line);
  background-color: rgba(10, 8, 6, 0.6);
  color: var(--body);
  font-size: 16px;
}


/* ===========================================================================
   18. Tabs
   ========================================================================= */

.mg-tabs { display: flex; flex-direction: column; gap: 16px; }
.mg-tablist { --od-gap: 8px; --od-rail-pad: 16px; margin-inline: -16px; padding-block: 4px; }
.mg-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: #1B1711;
  color: var(--body);
  font-family: var(--font-display);
  font-size: 17px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.1), 0 3px 0 rgba(0, 0, 0, 0.55);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.mg-tab:hover { color: var(--ink); background-color: #241E17; }
.mg-tab[aria-selected="true"],
.mg-tab.is-selected {
  border-color: #9B7103;
  background-color: var(--gold);
  background-image: linear-gradient(180deg, var(--ore), var(--gold));
  color: #16130F;
  box-shadow: 0 3px 0 var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* With JS off every panel is visible and stacked. site.js hides the rest. */
.mg-tabpanel + .mg-tabpanel { margin-top: 16px; }


/* ===========================================================================
   19. Rarity chips. The word is always on screen, never colour alone.
   ========================================================================= */

.mg-rarity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid currentColor;
  background-color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  line-height: 1.35;
}
.mg-gem {
  flex: none;
  width: 9px;
  height: 9px;
  background-color: currentColor;
  box-shadow: 0 0 8px currentColor;
  transform: rotate(45deg);
}
.mg-rarity-common    { color: #D9D9D9; }
.mg-rarity-rare      { color: #2ba0ff; }
.mg-rarity-epic      { color: #FF55FF; }
.mg-rarity-legendary { color: #fcba03; }
.mg-rarity-secret    { color: #ff5e1f; }
.mg-rarityrail { --od-gap: 10px; --od-rail-pad: 0px; }


/* ===========================================================================
   20. Number tiles
   ========================================================================= */

.mg-tile {
  --od-gap: 6px;
  padding: 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background-color: var(--stone);
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.08) 0%, rgba(0, 0, 0, 0.32) 100%);
  box-shadow:
    inset 0 1px 0 rgba(252, 186, 3, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 2px 0 rgba(0, 0, 0, 0.5);
}
.mg-tile-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--body);
}
.mg-tile-val {
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.1;
  color: var(--ore);
  text-shadow: 0 0 14px rgba(255, 213, 43, 0.28);
}
.mg-tile-big { padding: 20px; }
.mg-tile-big .mg-tile-val { font-size: clamp(30px, 7vw, 44px); }
.mg-tile-val.mg-money  { color: var(--money);  text-shadow: none; }
.mg-tile-val.mg-tokens { color: var(--tokens); text-shadow: none; }


/* ===========================================================================
   21. Profile
   ========================================================================= */

.mg-profile { --od-cols: 1; --od-gap: 16px; }
.mg-pf-card { align-self: start; }
.mg-pf-ident { align-items: center; text-align: center; }
.mg-body {
  width: 160px;
  height: auto;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 30px rgba(255, 154, 31, 0.22));
}
.mg-pf-nameline { --od-gap: 12px; width: 100%; text-align: left; }
.mg-pf-name { font-size: clamp(22px, 4vw, 28px); }
.mg-pf-joined { font-size: 16px; color: var(--body); }
.mg-pf-ranks { --od-gap: 8px; justify-content: center; }
.mg-rankchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: var(--r);
  border: 1px solid #6B5014;
  background-color: #1F1A12;
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.14), rgba(0, 0, 0, 0.3));
  color: var(--ore);
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.26), 0 2px 0 rgba(0, 0, 0, 0.55);
}
.mg-currency { --od-cols: 1; --od-gap: 12px; }
.mg-stats    { --od-cols: 2; --od-gap: 12px; }
.mg-pf-pair  { --od-cols: 1; --od-gap: 12px; }
.mg-rolechip {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 4px;
  border: 1px solid #6B5014;
  background-color: #1F1A12;
  color: var(--gold);
  font-size: 16px;
}
.mg-pf-role { --od-gap: 10px; }
.mg-pf-pets { --od-gap: 10px; }
.mg-monthstrip { --od-gap: 12px; --od-rail-pad: 0px; }
.mg-monthstrip > li { min-width: 150px; }
.mg-badges { --od-gap: 10px; }
.mg-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: var(--r);
  border: 1px solid #6B5014;
  background-color: #1E1810;
  background-image: linear-gradient(180deg, rgba(252, 186, 3, 0.14), rgba(0, 0, 0, 0.3));
  box-shadow: inset 0 1px 0 rgba(252, 186, 3, 0.26), 0 2px 0 rgba(0, 0, 0, 0.55);
  color: var(--ink);
  font-size: 16px;
}
.mg-badge-place {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ore);
  text-shadow: 0 0 12px rgba(255, 213, 43, 0.4);
}


/* ===========================================================================
   22. Empty states
   ========================================================================= */

.mg-empty {
  --od-gap: 10px;
  align-items: center;
  padding: 24px 16px;
  border-radius: var(--r);
  border: 1px dashed var(--line);
  background-color: rgba(10, 8, 6, 0.6);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.mg-empty-line { font-size: 17px; color: #CFC6B8; }


/* ===========================================================================
   23. Breakpoints. @media only. Mobile first, so everything above is the
   phone layout. 375 large phone · 768 tablet · 1024 desktop · 1440 wide.
   ========================================================================= */

@media (min-width: 375px) {
  .mg-features { --od-cols: 2; }
  .mg-currency { --od-cols: 2; }
  .mg-monthstrip > li { min-width: 160px; }
}

@media (min-width: 768px) {
  :root { --head-h: 72px; }

  .mg-sec { padding: 48px 24px; }
  .mg-sec-tight { padding-block: 0 48px; }
  .mg-hero { padding: 48px 24px 56px; }
  .mg-foot { padding: 40px 24px 48px; }
  .mg-pad { padding: 20px; }
  .mg-board-panel { padding: 20px; }
  .mg-ipbar { padding: 20px; }

  /* The menu button is gone, the links are a rail again. */
  .mg-nav-inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "logo find"
      "links links";
  }
  .mg-nav-toggle { display: none; }
  .mg-nav-links,
  .mg-nav.is-open .mg-nav-links {
    --od-gap: 2px;
    --od-rail-pad: 0px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block: 0;
  }

  .mg-ipbar-top { grid-template-columns: minmax(0, 1fr) auto auto; }

  .mg-features { --od-cols: 3; }
  .mg-updates  { --od-cols: 3; }
  .mg-stats    { --od-cols: 3; }
  .mg-pf-pair  { --od-cols: 2; }
  .mg-cta      { --od-cols: 2; }
  .mg-past     { --od-cols: 2; }
  .mg-trio     { --od-cols: 2; }

  /* Three plinths side by side, tallest in the middle. DOM order stays
     1, 2, 3 so the ranking still reads in order out loud. */
  .mg-podium { flex-direction: row; align-items: flex-end; gap: 10px; }
  .mg-podium > li { flex: 1 1 0; min-width: 0; }
  .mg-podium > li:nth-child(1) { order: 2; }
  .mg-podium > li:nth-child(2) { order: 1; }
  .mg-podium > li:nth-child(3) { order: 3; }
  .mg-plinth-1 { padding-block: 28px 24px; }
  .mg-plinth-2 { padding-block: 18px 16px; }
  .mg-plinth-3 { padding-block: 12px; }
  .mg-podium-one > li { flex: 0 1 260px; }

  .mg-head3d { width: 88px; }
  .mg-plinth-1 .mg-head3d { width: 108px; }
  .mg-body { width: 200px; }
  .mg-tablist { --od-rail-pad: 24px; margin-inline: -24px; }
}

@media (min-width: 1024px) {
  :root { --head-h: 76px; }

  .mg-sec { padding: 56px 32px; }
  .mg-sec-tight { padding-block: 0 56px; }
  .mg-hero { padding: 64px 32px 72px; }
  .mg-foot { padding: 48px 32px 56px; }
  .mg-pad { padding: 24px; }
  .mg-board-panel { padding: 24px; }
  .mg-ipbar { padding: 24px; }

  /* One header row: logo, links, search. */
  .mg-nav-inner {
    grid-template-columns: auto minmax(0, 1fr) 280px;
    grid-template-areas: "logo links find";
    padding: 12px 32px;
  }
  .mg-nav-links,
  .mg-nav.is-open .mg-nav-links { overflow: visible; }
  .mg-logo img { height: 36px; }

  .mg-races { --od-cols: 2; --od-gap: 24px; }
  .mg-trio  { --od-cols: 3; }
  .mg-features { --od-cols: 4; }
  .mg-stats    { --od-cols: 5; }

  .mg-profile { --od-cols: 1; grid-template-columns: 320px minmax(0, 1fr); --od-gap: 24px; }
  .mg-foot-inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; }
  .mg-foot-links { justify-content: center; }

  .mg-tablist { --od-rail-pad: 32px; margin-inline: -32px; }
}

@media (min-width: 1440px) {
  .mg-sec { padding: 56px 40px; }
  .mg-sec-tight { padding-block: 0 56px; }
  .mg-hero { padding: 76px 40px 84px; }
  .mg-nav-inner { padding: 14px 40px; }
  .mg-foot { padding: 56px 40px 64px; }
  .mg-head3d { width: 96px; }
  .mg-plinth-1 .mg-head3d { width: 120px; }
  .mg-body { width: 224px; }
  .mg-tablist { --od-rail-pad: 40px; margin-inline: -40px; }
}