/* UI v2: a light refresh layered over the original styles. Same layout and navigation;
   rounder corners, softer surfaces with a top highlight, glassier bars, pill controls, a fuller footer. */
:root{--r:12px;--edge:color-mix(in srgb,var(--line) 82%,var(--t));--lift:0 14px 30px -18px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--t) 35%,transparent)}
html{scrollbar-color:#2a3550 var(--bg)}
::selection{background:color-mix(in srgb,var(--t) 45%,transparent);color:#fff}
body{
  background-image:
    radial-gradient(ellipse 70% 60% at 50% -8%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 70%),
    linear-gradient(color-mix(in srgb,var(--line) 18%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--line) 18%,transparent) 1px,transparent 1px);
  background-size:100% 900px,48px 48px,48px 48px;background-repeat:no-repeat,repeat,repeat}

/* surfaces: one shared edge colour and a faint top highlight */
:is(.panel,.card,.trophy,.match,.tile,.cat,.threads,.event,.clip,.admin-item,.compose,.signin,.trade-card,.streak,.hud-strip,.tablewrap,.logo-tile,.post,.nolt){
  border-color:var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px -20px rgba(0,0,0,.9)}
:is(.cat,.event,.clip,.trade-card,.match){transition:transform .18s,border-color .18s,box-shadow .18s}
.cat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--t) 70%,var(--line));box-shadow:var(--lift)}
.trow{transition:background .15s}
.trow:hover{background:color-mix(in srgb,var(--t) 7%,var(--panel))}
.feed-row{border-radius:10px;border-color:var(--edge)}

/* nav: glassier bar, gradient hairline, pill links */
.nav{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:transparent}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--t) 70%,transparent) 25%,var(--ct) 50%,color-mix(in srgb,var(--t) 70%,transparent) 75%,transparent)}
.navlinks a{border-radius:999px;transition:color .15s,background .15s}
.navlinks a:hover{background:color-mix(in srgb,var(--t) 12%,var(--panel))}
.navlinks a[aria-current="page"]{background:linear-gradient(135deg,var(--brand),#5b8cff);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px -8px var(--brand)}
.acct,.xlink{transition:border-color .15s,color .15s,background .15s}

/* buttons and chips */
.btn{border-radius:10px;transition:transform .15s,border-color .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--t) 80%,transparent)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--brand),#4f80ff);border-color:color-mix(in srgb,var(--brand) 70%,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 20px -10px var(--brand)}
.chip,.est{border-radius:999px}
.chip{padding:2px 10px;border-color:var(--edge)}
select,.compose :is(input,textarea,select),.predict input{border-radius:10px}
:is(input,textarea,select):not([type=range],[type=checkbox],[type=radio]):focus-visible{outline:0;border-color:var(--t);box-shadow:0 0 0 3px color-mix(in srgb,var(--t) 30%,transparent)}

/* section heads: eyebrow gets a lead-in bar, the laser underline gets shorter */
.section-head .eyebrow{display:inline-flex;align-items:center;gap:8px}
.section-head .eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--t),var(--ct))}
.section-head h2::after{right:auto;width:min(100%,72px)}

/* bottom bars */
.deck{background:color-mix(in srgb,var(--panel) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-top-color:transparent;
  box-shadow:0 -1px 0 color-mix(in srgb,var(--t) 35%,transparent),0 -16px 30px -20px rgba(0,0,0,.9)}
.ticker{background:linear-gradient(90deg,#1b43cf,var(--brand) 30%,#4f80ff 50%,var(--brand) 70%,#1b43cf)}

/* footer */
footer{border-top:0;padding-block:44px 30px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--panel) 70%,transparent));box-shadow:0 -1px 0 var(--edge)}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:28px 40px;justify-content:stretch}
footer a{color:var(--muted);text-decoration:none;transition:color .15s}
footer a:hover{color:var(--fg)}
.fbrand{display:flex;gap:14px;align-items:center;align-self:start}
.fbrand img{width:46px;height:46px;flex:none;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--t) 50%,transparent))}
.fbrand b{display:block;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.03em;color:var(--fg)}
.fbrand kbd{font-family:inherit;color:var(--t);border:1px solid var(--edge);border-radius:6px;padding:0 5px}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fcols div{display:grid;gap:6px;align-content:start}
.fcols h4{margin:0 0 4px;font-family:var(--hud);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--t)}
.fbottom{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:18px;border-top:1px solid var(--edge)}
@media (max-width:760px){footer .wrap{grid-template-columns:minmax(0,1fr)}.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- v2.1: cleaner type scale, home layout, grouped nav ---------- */
/* section heads: label on its own line above a calmer heading, actions bottom-aligned */
.section-head{align-items:flex-end}
.section-head .eyebrow{display:flex;margin-bottom:8px}
.section-head h2{display:block;padding-bottom:0;font-size:clamp(30px,3.4vw,42px)}
.section-head h2::after{display:none}
.section-head p{font-size:15.5px;margin-top:8px}
.section-head>.btn{padding:8px 14px;font-size:12.5px}

/* home: hero with the stat strip tucked under it */
.hero{gap:28px 48px;padding-top:12px}
.hero h1{max-width:440px;margin-top:14px}
.hero .tag{font-size:18px;max-width:46ch;margin-top:18px}
.radar-box{max-width:400px;justify-self:end}
.hero .hud-strip{grid-column:1/-1}
.hud-strip .v{font-size:34px}
@media (max-width:820px){.radar-box{justify-self:center;max-width:340px}}
.home-split aside.panel h3{font-size:24px;margin-top:6px}
.trophy p{font-size:15px;line-height:1.45}

/* nav: less-used pages live under "More" */
.nav-more{position:relative;display:flex}
.nav-more-btn{display:inline-flex;align-items:center;gap:4px;border:0;background:none;cursor:pointer;font-family:var(--hud);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 9px;border-radius:999px;transition:color .15s,background .15s}
.nav-more-btn svg{width:12px;height:12px;transition:transform .2s}
.nav-more-btn:hover{color:var(--fg);background:color-mix(in srgb,var(--t) 12%,var(--panel))}
.nav-more:has([aria-current]) .nav-more-btn{color:#fff;background:linear-gradient(135deg,var(--brand),#5b8cff)}
.nav-more-menu{position:absolute;top:100%;right:0;margin-top:8px;z-index:5;display:none;flex-direction:column;gap:2px;min-width:170px;padding:6px;
  border:1px solid var(--edge);border-radius:14px;background:color-mix(in srgb,var(--panel) 96%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
.nav-more-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* hover bridge over the gap */
.nav-more:is(:hover,:focus-within) .nav-more-menu{display:flex}
.nav-more:is(:hover,:focus-within) .nav-more-btn svg{transform:rotate(180deg)}
@media (min-width:1001px){.nav-more-menu a{padding:9px 12px}}
@media (min-width:1001px){.navlinks{overflow:visible}}
@media (max-width:1000px){.nav-more,.nav-more-menu{display:contents}.nav-more-btn{display:none}}