/* ============================================================
   topoflol — HEXTECH DESIGN SYSTEM (shared with lol-team-splitter)
   Official Riot client palette:
   Gold  #F0E6D2 #CDBE91 #C8AA6E #C89B3C #785A28 #463714 #32281E
   Blue  #CDFAFA #0AC8B9 #0397AB #005A82 #0A323C #091428 #0A1428
   Grey  #A09B8C #5B5A56 #3C3C41 #1E2328 #1E282D   Black #010A13
   High-contrast dark: body text is gold-100 (#F0E6D2) on abyss (#010A13..#0A1428).
   ============================================================ */
:root {
  --gold-100: #f0e6d2; --gold-200: #cdbe91; --gold-300: #c8aa6e; --gold-400: #c89b3c;
  --gold-600: #785a28; --gold-700: #463714; --gold-800: #32281e;
  --magic-100: #cdfafa; --magic-300: #0ac8b9; --magic-500: #0397ab; --magic-700: #005a82; --magic-900: #0a323c;
  --abyss-800: #0a1428; --abyss-900: #091428; --abyss-950: #010a13;
  --steel-100: #a09b8c; --steel-300: #5b5a56; --steel-500: #3c3c41; --steel-700: #1e2328; --steel-800: #1e282d;
  --blood-300: #ff7a8a; --blood-400: #e84057; --blood-600: #96222e;
  --win: #0ac8b9; --loss: #e84057;
  --tier-master: #a35fd4; --tier-grandmaster: #cd4545; --tier-challenger: #f4c874;

  --fg: var(--gold-100); --fg-2: var(--steel-100); --fg-3: #7d7b73;
  --font-display: "Cinzel", "Cormorant", Georgia, serif;
  --font-heading: "Cormorant", Georgia, serif;
  --font-sans: "Inter", "Be Vietnam Pro", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--gold-700) var(--abyss-950); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--abyss-950); }
*::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--gold-600), var(--gold-700)); border: 2px solid var(--abyss-950); }
html { color-scheme: dark; font-size: 16px; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-sans); font-size: 15.5px; line-height: 1.55; color: var(--fg);
  background-color: #061224;
  background-image:
    radial-gradient(1100px 560px at 50% -120px, rgba(0,108,155,.42), transparent 70%),
    radial-gradient(800px 480px at 88% 108%, rgba(130,98,45,.2), transparent 65%),
    radial-gradient(640px 420px at 6% 102%, rgba(3,151,171,.16), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(200,170,110,.35); color: var(--gold-100); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold-100); }
button, select, input { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---- atmosphere layers ---- */
.hex-gridlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16zM28 60 52 74v28L28 116 4 102V74z' fill='none' stroke='%23c8aa6e' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 97px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 0%, black 20%, transparent 75%);
}
.hex-dust { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hex-dust span {
  position: absolute; bottom: -8px; width: 3px; height: 3px; border-radius: 999px;
  background: var(--magic-300); box-shadow: 0 0 6px 1px rgba(10,200,185,.7); opacity: 0;
  animation: hex-rise linear infinite;
}
.hex-dust span:nth-child(3n) { background: var(--gold-300); box-shadow: 0 0 6px 1px rgba(200,170,110,.7); }
@keyframes hex-rise { 0% { transform: translateY(0); opacity: 0 } 8% { opacity: .9 } 90% { opacity: .15 } 100% { transform: translateY(-105vh) translateX(24px); opacity: 0 } }
.hex-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, transparent 65%, rgba(1,10,19,.35) 100%); }

/* ---- header ---- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(to bottom, rgba(9,20,40,.95), rgba(1,10,19,.88));
  backdrop-filter: blur(10px);
}
.top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, var(--gold-600) 15%, var(--gold-300) 50%, var(--gold-600) 85%, transparent); }
.hex-header-edge { position: relative; height: 1px; background: linear-gradient(to right, transparent, var(--gold-600) 12%, var(--gold-300) 50%, var(--gold-600) 88%, transparent); }
.hex-header-edge::after { content: ""; position: absolute; left: 50%; top: -3.5px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: linear-gradient(135deg, var(--gold-100), var(--gold-400)); box-shadow: 0 0 8px 1px rgba(200,170,110,.8); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 32px; height: 32px; filter: drop-shadow(0 0 6px rgba(10,200,185,.55)); transition: filter .3s; }
.brand:hover .brand-mark { filter: drop-shadow(0 0 10px rgba(10,200,185,.95)); }
.brand-mark .glyph-core { animation: hex-core-pulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes hex-core-pulse { 0%,100% { opacity: .75; transform: scale(1) } 50% { opacity: 1; transform: scale(1.12) } }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--gold-100); }
.brand-text small { font-family: var(--font-display); font-size: 8.5px; font-weight: 700; letter-spacing: .42em; color: var(--magic-300); text-transform: uppercase; }
.top-nav { display: flex; align-items: center; gap: 8px; }
.nav-link {
  position: relative; padding: 8px 14px; font-family: var(--font-display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--steel-100); transition: color .2s, text-shadow .2s;
}
.nav-link::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: 2px; background: linear-gradient(to right, transparent, var(--gold-300), transparent); transform: scaleX(0); transition: transform .25s cubic-bezier(.16,1,.3,1); }
.nav-link:hover { color: var(--gold-100); text-shadow: 0 0 10px rgba(240,230,210,.35); }
.nav-link:hover::after { transform: scaleX(1); }

select, .input, .lang-btn {
  background: rgba(1,10,19,.85); border: 1px solid var(--gold-600); color: var(--gold-100); padding: 8px 12px;
  transition: border-color .2s, box-shadow .2s; caret-color: var(--magic-300);
}
select:hover, .input:hover, .lang-btn:hover { border-color: #a1823f; }
select:focus, .input:focus { outline: none; border-color: var(--gold-300); box-shadow: 0 0 0 1px rgba(200,170,110,.35), 0 0 12px rgba(200,170,110,.22), inset 0 0 8px rgba(1,10,19,.9); }
.input::placeholder { color: var(--steel-300); }
select { padding-right: 30px; appearance: none; font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-300) 50%), linear-gradient(135deg, var(--gold-300) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--abyss-950); color: var(--gold-100); text-transform: none; font-family: var(--font-sans); }
.lang-btn { cursor: pointer; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; min-width: 48px; color: var(--gold-200); background: rgba(30,35,40,.4); }
.lang-btn:hover { color: var(--gold-100); border-color: var(--gold-300); box-shadow: 0 0 8px rgba(200,170,110,.3); }

/* ---- generic ---- */
main { position: relative; z-index: 10; min-height: 60vh; padding: 34px 16px 70px; }
h1 {
  margin: 0 0 8px; font-family: var(--font-heading); font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 700; line-height: 1.12;
  background: linear-gradient(to bottom, var(--gold-100) 20%, var(--gold-300) 75%, #a17b33);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(200,170,110,.18));
}
h1 .dim { -webkit-text-fill-color: var(--steel-100); }
h2 { display: flex; align-items: center; gap: 12px; margin: 34px 0 14px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-200); }
h2::before { content: ""; width: 7px; height: 7px; rotate: 45deg; background: linear-gradient(135deg, var(--gold-100), var(--gold-400)); box-shadow: 0 0 6px rgba(200,170,110,.8); flex-shrink: 0; }
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--gold-600), rgba(70,55,20,.25), transparent); }
.kicker { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--magic-300); text-shadow: 0 0 12px rgba(10,200,185,.5); margin-bottom: 10px; }
.muted { color: var(--steel-100); }
.dim { color: var(--fg-3); }
.small { font-size: 12.5px; color: var(--steel-100); }
.notice { border-left: 2px solid var(--gold-300); background: rgba(1,10,19,.6); padding: 10px 14px; color: var(--gold-200); font-size: 14px; margin: 14px 0; }
.empty { padding: 44px 20px; text-align: center; color: var(--steel-100); border: 1px solid var(--gold-700); background: linear-gradient(160deg, rgba(10,20,40,.7), rgba(1,10,19,.85)); }
.empty strong { color: var(--gold-100); }
.empty code { font-family: var(--mono); font-size: 12.5px; color: var(--magic-100); background: rgba(1,10,19,.9); border: 1px solid rgba(70,55,20,.8); padding: 2px 8px; }
.loading { color: var(--steel-100); padding: 60px 0; text-align: center; display: flex; justify-content: center; }
.loading::before { content: ""; width: 26px; aspect-ratio: 1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: conic-gradient(from 0deg, transparent 15%, var(--magic-500) 60%, var(--magic-300) 85%, var(--magic-100) 100%); -webkit-mask: radial-gradient(circle, transparent 52%, black 54%); mask: radial-gradient(circle, transparent 52%, black 54%); animation: hex-spin .9s linear infinite; }
@keyframes hex-spin { to { rotate: 360deg } }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--font-display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-300); margin-bottom: 16px; }
.crumbs a { color: var(--steel-100); }
.crumbs a:hover { color: var(--gold-100); }

/* ---- panel (hex-panel + 4 metal corners) ---- */
.panel { position: relative; background: linear-gradient(160deg, rgba(10,20,40,.9), rgba(1,10,19,.94)); border: 1px solid var(--gold-700); box-shadow: inset 0 0 26px rgba(1,10,19,.85), 0 6px 20px rgba(0,0,0,.45); }
.panel::before, .panel::after, .panel > .hc::before, .panel > .hc::after {
  content: ""; position: absolute; width: 11px; height: 11px; border: 0 solid var(--gold-300); pointer-events: none; z-index: 2;
  filter: drop-shadow(0 0 3px rgba(200,170,110,.55));
}
.panel::before { top: -2px; left: -2px; border-top-width: 2px; border-left-width: 2px; }
.panel::after { top: -2px; right: -2px; border-top-width: 2px; border-right-width: 2px; }
.panel > .hc { position: absolute; inset: 0; pointer-events: none; }
.panel > .hc::before { bottom: -2px; left: -2px; border-bottom-width: 2px; border-left-width: 2px; }
.panel > .hc::after { bottom: -2px; right: -2px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---- badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 14px; white-space: nowrap;
  font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tier-color, var(--gold-200)); background: color-mix(in srgb, var(--tier-color, var(--gold-600)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color, var(--gold-600)) 45%, transparent);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
}
.badge.num { font-family: var(--mono); letter-spacing: 0; font-size: 12px; text-transform: none; }
.tier.CHALLENGER { --tier-color: var(--tier-challenger); }
.tier.GRANDMASTER { --tier-color: var(--tier-grandmaster); }
.tier.MASTER { --tier-color: var(--tier-master); }

/* ---- hero ---- */
.hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: end; margin-bottom: 26px; }
.hero p.lead { color: var(--steel-100); font-size: 16.5px; margin: 0; max-width: 58ch; line-height: 1.6; }
.formula { display: inline-block; margin-top: 14px; padding: 10px 16px; font-family: var(--mono); font-size: 14px; color: var(--magic-100); background: rgba(1,10,19,.9); border: 1px solid rgba(70,55,20,.9); box-shadow: inset 0 0 12px rgba(10,200,185,.08); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { background: linear-gradient(160deg, rgba(10,20,40,.9), rgba(1,10,19,.94)); border: 1px solid var(--gold-700); padding: 12px 14px; position: relative; }
.stat::before { content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: linear-gradient(to right, transparent, var(--gold-300), transparent); }
.stat .v { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.1; color: var(--gold-100); text-shadow: 0 0 10px rgba(200,170,110,.35); }
.stat .l { color: var(--steel-100); font-size: 11.5px; margin-top: 5px; letter-spacing: .02em; }

/* ---- toolbar ---- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 22px 0 16px; }
.input { flex: 1 1 260px; min-width: 200px; width: auto; }
.seg { display: inline-flex; border: 1px solid var(--gold-700); background: rgba(1,10,19,.6); }
.seg button { background: transparent; border: 0; padding: 9px 14px; cursor: pointer; color: var(--steel-100); font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; position: relative; transition: color .2s; }
.seg button + button { border-left: 1px solid var(--gold-700); }
.seg button:hover { color: var(--gold-200); }
.seg button.on { color: var(--gold-100); text-shadow: 0 0 12px rgba(240,230,210,.4); background: rgba(200,170,110,.08); }
.seg button.on::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 2px; background: linear-gradient(to right, transparent, var(--gold-300) 30%, var(--gold-100) 50%, var(--gold-300) 70%, transparent); box-shadow: 0 0 10px rgba(200,170,110,.7); }

/* ---- champion grid ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.card {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px;
  background: linear-gradient(160deg, rgba(10,20,40,.9), rgba(1,10,19,.94)); border: 1px solid var(--gold-700);
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-3px); border-color: var(--gold-300); box-shadow: inset 0 0 26px rgba(1,10,19,.85), 0 0 20px rgba(200,170,110,.22), 0 10px 26px rgba(0,0,0,.55); color: inherit; }
.card img { width: 50px; height: 50px; flex: none; border: 1px solid var(--gold-600); background: var(--abyss-950); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.card .t { font-family: var(--font-heading); font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--gold-100); }
.card .s { font-size: 12px; color: var(--steel-100); margin-top: 3px; }
.card .s b { color: var(--gold-200); font-weight: 600; }
.card .n { margin-left: auto; text-align: right; }
.card .n .v { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--gold-100); }
.card .n .l { font-size: 10px; color: var(--steel-300); letter-spacing: .08em; text-transform: uppercase; }

/* ---- champion header ---- */
.champ-head { position: relative; overflow: hidden; padding: 24px; margin-bottom: 20px; min-height: 160px; display: flex; align-items: flex-end; gap: 20px; }
.champ-head .splash { position: absolute; inset: 0; background-size: cover; background-position: center 20%; opacity: .38; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,1) 60%); mask-image: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,1) 60%); }
.champ-head .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,10,19,.1), rgba(1,10,19,.88)); }
.champ-head > *:not(.splash):not(.shade):not(.hc) { position: relative; z-index: 1; }
.champ-head img { width: 76px; height: 76px; border: 2px solid var(--gold-300); box-shadow: 0 0 14px rgba(200,170,110,.45); }
.champ-head .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ---- table ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 11px 13px; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(30,35,40,.9); }
tbody tr:last-child td { border-bottom: 0; }
th { background: rgba(1,10,19,.6); border-bottom: 1px solid var(--gold-700); color: var(--gold-200); font-family: var(--font-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; cursor: pointer; user-select: none; transition: color .2s; }
th:hover { color: var(--gold-100); }
th.on { color: var(--gold-100); text-shadow: 0 0 10px rgba(240,230,210,.4); }
th .arr { font-size: 9px; margin-left: 4px; color: var(--magic-300); }
tbody tr { transition: background-color .18s; }
tbody tr:hover { background: rgba(200,170,110,.07); }
td.r, th.r { text-align: right; }
.rank { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--steel-100); width: 48px; }
tr.top1 .rank { color: var(--gold-100); text-shadow: 0 0 10px rgba(200,170,110,.8); }
tr.top2 .rank { color: var(--gold-200); }
tr.top3 .rank { color: var(--gold-300); }
.who { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.who img { width: 34px; height: 34px; flex: none; border: 1px solid var(--gold-600); background: var(--abyss-950); }
.who .nm { font-weight: 600; color: var(--gold-100); }
.who:hover .nm { text-shadow: 0 0 8px rgba(240,230,210,.4); }
.who .tg { color: var(--steel-300); font-size: 12px; font-weight: 400; }
.wr { display: flex; align-items: center; gap: 9px; }
.bar { width: 84px; height: 5px; background: rgba(30,35,40,.9); border: 1px solid rgba(70,55,20,.7); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(to right, var(--magic-500), var(--magic-300) 55%, var(--gold-300)); box-shadow: 0 0 8px rgba(10,200,185,.55); }
.wr.lo .bar i { background: linear-gradient(to right, var(--blood-600), var(--blood-400)); box-shadow: 0 0 8px rgba(232,64,87,.5); }
.wr .num { color: var(--gold-100); }
.score { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--gold-100); text-shadow: 0 0 10px rgba(200,170,110,.5); }
.wl b { color: var(--magic-300); font-weight: 600; } .wl span { color: var(--blood-300); }

/* ---- player page ---- */
.player-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.player-head img { width: 68px; height: 68px; border: 2px solid var(--gold-300); box-shadow: 0 0 14px rgba(200,170,110,.4); }

/* ---- about ---- */
.prose { max-width: 78ch; }
.prose p, .prose li { color: var(--gold-100); }
.prose li { margin: 7px 0; }
.prose li::marker { color: var(--gold-300); }
.prose code { font-family: var(--mono); font-size: 13px; color: var(--magic-100); background: rgba(1,10,19,.9); border: 1px solid rgba(70,55,20,.8); padding: 1px 7px; }
.prose table { font-size: 14.5px; border: 1px solid var(--gold-700); }
.prose td:first-child { color: var(--steel-100); }
.prose th { cursor: default; }

/* ---- search results ---- */
.results { display: grid; gap: 8px; margin-top: 12px; }
.res { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: linear-gradient(160deg, rgba(10,20,40,.9), rgba(1,10,19,.94)); border: 1px solid var(--gold-700); transition: border-color .2s, box-shadow .2s; }
.res:hover { border-color: var(--gold-300); box-shadow: 0 0 14px rgba(200,170,110,.2); }
.res img { width: 38px; height: 38px; border: 1px solid var(--gold-600); }
.res b { color: var(--gold-100); }
.res .n { margin-left: auto; color: var(--steel-100); font-size: 12px; text-align: right; }

/* ---- footer ---- */
.foot { position: relative; z-index: 10; color: var(--steel-100); font-size: 12.5px; padding: 10px 0 44px; }
.hex-divider { position: relative; height: 1px; margin: 22px 0; background: linear-gradient(to right, transparent, var(--gold-600) 18%, var(--gold-300) 50%, var(--gold-600) 82%, transparent); }
.hex-divider::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%,-50%) rotate(45deg); background: var(--abyss-950); border: 1px solid var(--gold-300); box-shadow: 0 0 8px rgba(200,170,110,.7); }
.foot p { margin: 0 0 8px; line-height: 1.55; }
.foot a { color: var(--gold-200); }
.foot a:hover { color: var(--gold-100); }
.foot-tag { text-align: center; font-family: var(--font-display); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--steel-300); margin-top: 18px; }

/* ---- reveal ---- */
.hex-reveal { animation: hex-fade-up .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes hex-fade-up { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .hex-dust span, .brand-mark .glyph-core { animation: none !important } .hex-reveal { animation-duration: .01s !important } }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .top-row { height: 58px; }
  .brand-text { display: none; }
  .top-nav { gap: 6px; min-width: 0; }
  #regionSelect { max-width: 170px; text-overflow: ellipsis; font-size: 10.5px; }
  .nav-link { padding: 6px 8px; white-space: nowrap; }
  .champ-head { padding: 16px; }
  .bar { width: 56px; }
  .grid { grid-template-columns: 1fr; }
}

/* ---- pre-rendered SEO blocks (visible content, same look as the app) ---- */
.seo-lead { margin: 0 0 18px; font-size: 15.5px; }
.seo-intro { margin-top: 44px; max-width: 80ch; }
.seo-intro p { color: var(--gold-100); }
.faq dt { font-weight: 600; color: var(--gold-200); margin-top: 12px; }
.faq dd { margin: 4px 0 0; color: var(--gold-100); }