:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f6f7f8;background:#080a0d}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#1e2530 0,#0a0d11 34%,#06080a 100%);min-height:100vh}button{font:inherit}.app{max-width:520px;margin:0 auto;min-height:100vh;padding-bottom:86px;background:linear-gradient(180deg,rgba(15,18,23,.93),rgba(7,9,12,.98));box-shadow:0 0 80px #000}header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:rgba(8,10,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid #252a31}.brand{background:none;border:0;color:#fff;font-weight:900;letter-spacing:.6px}.wallet{font-size:11px;color:#a9b0ba}.wallet b{color:#f2b84b}main{padding:18px}.hero{text-align:center;padding:22px 12px 18px}.goat{font-size:74px;filter:grayscale(1) sepia(.35)}.hero h1{font-size:44px;line-height:.9;margin:0;font-style:italic;letter-spacing:-2px}.hero h1 span{color:#f1b546}.hero p{color:#aeb5bf;max-width:360px;margin:18px auto 4px}.primary,.secondary,.grid button,.battleCard{border-radius:16px;border:1px solid #333942;cursor:pointer}.primary{width:100%;padding:17px;background:linear-gradient(180deg,#f8c964,#e7a92e);color:#17130b;font-weight:1000;letter-spacing:.5px}.giant{font-size:18px}.secondary{padding:15px;background:#171b21;color:#fff;border-color:#353b44;font-weight:800}.secondary:disabled{opacity:.35}.full{width:100%;margin-top:10px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.grid button{background:#11151a;color:#fff;padding:18px 10px;font-weight:900}.grid small{display:block;color:#8f98a4;font-weight:500;margin-top:5px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.stats div{background:#0e1216;border:1px solid #252b32;border-radius:13px;padding:12px;text-align:center}.stats span,.stats b{display:block}.stats span{font-size:9px;color:#8d96a1}.stats b{font-size:18px;margin-top:4px;color:#f2bd54}.topline{display:flex;justify-content:space-between;color:#9da5b0;font-size:11px;font-weight:800;margin-bottom:10px}.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.slot{height:74px;border-radius:11px;border:1px solid #29303a;background:#0d1116;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:4px;overflow:hidden}.slot.active{border-color:#e8ad39;box-shadow:inset 0 0 0 1px #e8ad39}.slot b{font-size:9px;line-height:1.1}.slot span{font-size:13px;color:#eeb94f;margin-top:5px}.playerCard{text-align:center;background:linear-gradient(180deg,#151a21,#0e1217);border:1px solid #323945;border-radius:24px;padding:24px;margin:18px 0;position:relative;overflow:hidden}.badge{display:inline-block;border:1px solid #493c20;color:#efbb53;background:#19160e;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:900}.silhouette{font-size:72px;margin:16px 0 4px}.playerCard h2{font-size:28px;margin:0}.playerCard p{margin:5px 0;color:#9da6b1}.score{font-size:62px;font-weight:1000;color:#f1b648;line-height:1;margin-top:15px}.playerCard small{font-size:10px;color:#858e99}.actions{display:grid;grid-template-columns:2fr 1fr;gap:10px}.running{text-align:center;color:#8f98a3}.resultHero{text-align:center;padding:10px}.resultHero div{font-size:48px}.resultHero h1{font-size:74px;color:#f0b344;margin:0;line-height:1}.resultHero p{font-size:11px;color:#9ca4af;font-weight:900}.teamList{border:1px solid #2b3139;border-radius:17px;overflow:hidden}.teamList>div{display:flex;justify-content:space-between;padding:13px 15px;background:#101419;border-bottom:1px solid #242a31}.teamList>div:last-child{border-bottom:0}.teamList span{font-weight:800}.teamList small{display:block;color:#7f8995;font-weight:500}.teamList b{color:#f0b64d}.earned{margin:14px 0;background:#16150f;border:1px solid #4a3a18;color:#d5c18f;border-radius:14px;padding:14px;text-align:center;font-size:13px}.earned b{color:#f3bd52}.voteHead{text-align:center;margin:6px 0 17px}.voteHead h1{margin:0;font-size:34px}.voteHead p{color:#9aa3ae}.pill{display:inline-block;background:#1c1710;color:#f2b94c;border:1px solid #4b3a18;border-radius:999px;padding:7px 12px;font-weight:900;font-size:12px}.battle{display:grid;grid-template-columns:1fr 34px 1fr;gap:8px;align-items:center}.battleCard{background:#11161c;color:#fff;padding:14px 10px;min-height:330px;position:relative}.battleCard:disabled{opacity:.55}.rank{position:absolute;top:10px;right:10px;background:#252b33;border-radius:999px;padding:5px 7px;font-size:11px}.ball{font-size:58px}.battleCard h2{font-size:20px;margin:10px 0 4px}.battleCard p{color:#88929d;margin:0}.battleCard>b{display:block;color:#f0b54b;font-size:35px;margin-top:18px}.battleCard small{font-size:9px;color:#777f8a}.choose{display:block;margin-top:18px;background:#e9ad37;color:#19140a;border-radius:11px;padding:10px;font-weight:1000}.vs{text-align:center;font-weight:1000;color:#8d96a0}.empty{text-align:center;color:#c7a86c;padding:15px}.ranking{border:1px solid #2b3139;border-radius:16px;overflow:hidden}.ranking>div{display:grid;grid-template-columns:40px 1fr 62px;align-items:center;padding:11px 13px;background:#101419;border-bottom:1px solid #252a31}.ranking>div:last-child{border:0}.ranking .top{background:linear-gradient(90deg,#211b10,#101419)}.num{font-size:18px;color:#89929d;font-weight:900}.name{font-weight:800}.name small{display:block;color:#7e8792;font-weight:500}.ranking b{text-align:right;color:#efb548;font-size:18px}nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:520px;width:100%;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(8,10,13,.96);backdrop-filter:blur(12px);border-top:1px solid #2a3037;padding:9px 4px 14px;z-index:10}nav button{background:none;border:0;color:#9ba4af;font-size:19px}nav span{display:block;font-size:9px;margin-top:2px;font-weight:800}@media(max-width:380px){.hero h1{font-size:38px}.battleCard{min-height:300px}.battleCard h2{font-size:17px}.score{font-size:54px}}

.levelTitle{font-size:2rem;margin:.2rem 0;color:#f5c451;letter-spacing:.08em}
.resultHero small{display:block;margin-top:.35rem;color:#c8cdd4;font-weight:700}
.stats small{display:block;font-size:.65rem;color:#f5c451;margin-top:.2rem;letter-spacing:.06em}

.resumeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:16px 0 10px}
.resumeGrid span{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:8px 4px;text-align:center}
.resumeGrid b{display:block;font-size:1rem;color:#f5c451}.resumeGrid small{font-size:.58rem;letter-spacing:.06em;color:#9fa6b2}
.careerLine{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding:9px;border-radius:9px;background:rgba(245,196,81,.08);font-size:.72rem}
.careerLine b{color:#fff}.battleCard .resumeGrid{margin:12px 0 8px}.battleCard .careerLine{gap:7px;font-size:.62rem}
.ranking details{border-bottom:1px solid rgba(255,255,255,.08)}
.ranking details summary{display:flex;align-items:center;padding:14px 12px;cursor:pointer;list-style:none}
.ranking details summary::-webkit-details-marker{display:none}
.rankDetails{padding:0 12px 14px 55px}.rankDetails .resumeGrid{max-width:390px}
.rankMeta{font-size:.72rem;color:#aeb4be;margin-top:8px}
@media(max-width:520px){.battle{gap:8px}.battleCard{padding:14px 8px}.battleCard .resumeGrid{grid-template-columns:repeat(2,1fr)}.rankDetails{padding-left:12px}}

/* V4 Rankings */
.rankHeader{display:grid;grid-template-columns:46px minmax(0,1fr) 62px;gap:10px;padding:10px 14px 7px;margin-top:18px;color:#7f8793;font-size:.61rem;font-weight:900;letter-spacing:.08em}
.rankHeader span:last-child{text-align:right}
.rankingV4{border:1px solid rgba(255,255,255,.11);border-radius:18px;overflow:hidden;background:#0d1117}
.rankCard{border-bottom:1px solid rgba(255,255,255,.09);margin:0}
.rankCard:last-child{border-bottom:0}
.rankCard.top{background:linear-gradient(90deg,rgba(245,196,81,.08),rgba(245,196,81,.018))}
.rankCard summary{display:grid;grid-template-columns:46px minmax(0,1fr) 62px;gap:10px;align-items:center;padding:15px 14px;cursor:pointer;list-style:none}
.rankCard summary::-webkit-details-marker{display:none}
.rankNum{font-size:1.1rem;font-weight:900;color:#aab2bd;text-align:center}
.rankCard.top .rankNum{color:#f5c451}
.rankPlayer{min-width:0}
.rankName{font-size:1rem;font-weight:950;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankCareer{font-size:.68rem;color:#aab2bd;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankAwards{font-size:.64rem;color:#d7b963;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankScore{text-align:right}
.rankScore b{display:block;color:#f5c451;font-size:1.15rem}
.rankScore small{display:block;color:#7f8793;font-size:.55rem;font-weight:900;letter-spacing:.08em;margin-top:2px}
.rankExpanded{padding:0 14px 15px 70px}
.expandedGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.expandedGrid span{padding:8px 3px;text-align:center;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.035)}
.expandedGrid b{display:block;color:#f5c451;font-size:.9rem}
.expandedGrid small{display:block;color:#8f97a3;font-size:.5rem;margin-top:2px}
.expandedScores{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;color:#aeb5bf;font-size:.68rem}
.expandedScores b{color:#fff}
.expandedScores .building{color:#a98be8}
.legendNote{margin:14px 4px 18px;color:#7f8793;font-size:.68rem;line-height:1.45}
@media(max-width:560px){
 .rankHeader,.rankCard summary{grid-template-columns:38px minmax(0,1fr) 54px;gap:7px;padding-left:8px;padding-right:8px}
 .rankName{font-size:.92rem}
 .rankCareer{font-size:.61rem}
 .rankAwards{font-size:.58rem}
 .rankExpanded{padding-left:53px;padding-right:8px}
 .expandedGrid{grid-template-columns:repeat(3,1fr)}
}

/* V5 Neon GOAT Chase */
:root{--neon:#39ff88;--neon2:#00e86f;--neonSoft:rgba(57,255,136,.15)}
.logo,.brandMark{filter:drop-shadow(0 0 10px rgba(57,255,136,.28))}
.primary{background:linear-gradient(135deg,var(--neon),var(--neon2))!important;color:#06120b!important;box-shadow:0 0 22px rgba(57,255,136,.25);font-weight:950}
.primary:hover{box-shadow:0 0 30px rgba(57,255,136,.42)}
.goatProgress{margin:15px 0 20px;padding:14px;border:1px solid rgba(57,255,136,.35);border-radius:14px;background:linear-gradient(180deg,rgba(57,255,136,.10),rgba(57,255,136,.025));box-shadow:inset 0 0 20px rgba(57,255,136,.035)}
.goatProgressTop,.goatProgressBottom{display:flex;justify-content:space-between;align-items:center;gap:8px}
.goatProgressTop{font-size:.68rem;font-weight:950;letter-spacing:.11em;color:var(--neon)}
.goatProgressTop b{font-size:.9rem}
.goatTrack{height:13px;border-radius:999px;background:#171e1b;margin:10px 0;overflow:hidden;border:1px solid rgba(57,255,136,.18)}
.goatFill{height:100%;border-radius:999px;background:linear-gradient(90deg,#00c95e,var(--neon));box-shadow:0 0 15px rgba(57,255,136,.7);transition:width .35s ease}
.goatProgressBottom{font-size:.65rem;color:#929b96}
.goatProgressBottom strong{color:var(--neon);font-size:.72rem}
.levelTitle{color:var(--neon)!important;text-shadow:0 0 14px rgba(57,255,136,.28)}
.resultHero h1{color:#fff;text-shadow:0 0 18px rgba(57,255,136,.16)}

/* V6 Live Fan Rankings */
.battleModel{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:10px 0 2px}
.battleModel span{padding:7px 3px;border:1px solid rgba(57,255,136,.18);border-radius:8px;background:rgba(57,255,136,.055);font-size:.56rem;color:#9fa8a3;text-align:center}
.battleModel b{display:block;color:#39ff88;font-size:.72rem;margin-top:2px}
.expandedScores{align-items:center}
.expandedScores span{padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.035)}
.expandedScores span:nth-child(3) b,.expandedScores span:nth-child(4) b{color:#39ff88}

/* V7 production-data notes */
.dataFlag{margin-top:10px;padding:8px 10px;border-radius:8px;border:1px solid rgba(245,196,81,.2);background:rgba(245,196,81,.06);font-size:.61rem;color:#d8bd73;line-height:1.35}
.methodology{margin:12px 0 20px;border:1px solid rgba(57,255,136,.18);border-radius:12px;padding:10px 12px;background:rgba(57,255,136,.035)}
.methodology summary{cursor:pointer;color:#39ff88;font-size:.68rem;font-weight:900;letter-spacing:.08em}
.methodology p{font-size:.65rem;line-height:1.45;color:#9da6a1;margin:8px 0}
.methodology b{color:#fff}

/* V8 Shared App */
.cloudBadge{display:inline-block;padding:3px 7px;border-radius:999px;font-size:.52rem;font-weight:950;letter-spacing:.08em;border:1px solid rgba(255,255,255,.12)}
.cloudBadge.cloud{color:#39ff88;border-color:rgba(57,255,136,.4);background:rgba(57,255,136,.08);box-shadow:0 0 10px rgba(57,255,136,.12)}
.cloudBadge.local{color:#f5c451;border-color:rgba(245,196,81,.35);background:rgba(245,196,81,.07)}

/* V8.2 — compact no-scroll gameplay + stable ranking details */
@media (max-width: 600px), (max-height: 900px) {
  .app main{padding-bottom:76px}
  .playCompact,.voteCompact{padding-top:4px}

  /* PLAY: compress vertical spacing without removing useful decision data */
  .playCompact .topline{margin:2px 0 6px;font-size:.62rem}
  .playCompact .slots{gap:4px;margin:5px 0 7px}
  .playCompact .slot{min-height:42px;padding:5px 3px;border-radius:8px}
  .playCompact .slot b{font-size:.58rem;line-height:1.05}
  .playCompact .slot span{font-size:.72rem;margin-top:2px}
  .playCompact .playerCard{padding:10px 12px;margin:6px 0;border-radius:14px}
  .playCompact .playerCard .badge{font-size:.52rem;margin-bottom:2px}
  .playCompact .silhouette{display:none}
  .playCompact .playerCard h2{font-size:1.35rem;margin:2px 0}
  .playCompact .playerCard p{font-size:.72rem;margin:0 0 2px}
  .playCompact .playerCard .score{font-size:2.65rem;line-height:1;margin:4px 0}
  .playCompact .playerCard>small{font-size:.57rem}
  .playCompact .resumeGrid{grid-template-columns:repeat(6,1fr);gap:3px;margin:7px 0 5px}
  .playCompact .resumeGrid span{padding:5px 1px;border-radius:6px}
  .playCompact .resumeGrid b{font-size:.76rem}
  .playCompact .resumeGrid small{font-size:.43rem}
  .playCompact .careerLine{padding:5px;gap:9px;font-size:.58rem}
  .playCompact .actions{gap:8px;margin:7px 0}
  .playCompact .actions button{min-height:44px;padding:9px 12px;font-size:.86rem}
  .playCompact .running{font-size:.62rem;margin:5px 0;text-align:center}
  .playCompact .goatProgress{margin:5px 0 4px;padding:8px 10px;border-radius:10px}
  .playCompact .goatProgressTop{font-size:.56rem}
  .playCompact .goatTrack{height:8px;margin:5px 0}
  .playCompact .goatProgressBottom{font-size:.53rem}

  /* VOTE: two complete comparison cards visible at once */
  .voteCompact .voteHead{margin-bottom:5px}
  .voteCompact .voteHead h1{font-size:1.45rem;margin:2px 0}
  .voteCompact .voteHead p{font-size:.7rem;margin:2px 0}
  .voteCompact .pill{font-size:.58rem;padding:4px 8px;margin:4px auto}
  .voteCompact .battle{gap:6px;align-items:stretch;margin-top:5px}
  .voteCompact .vs{font-size:.75rem;min-width:22px}
  .voteCompact .battleCard{padding:8px 6px;border-radius:12px;min-width:0}
  .voteCompact .battleCard .rank{font-size:.6rem}
  .voteCompact .battleCard .ball{display:none}
  .voteCompact .battleCard h2{font-size:.95rem;line-height:1.02;margin:4px 0}
  .voteCompact .battleCard p{font-size:.58rem;margin:0}
  .voteCompact .battleCard>b{font-size:1.45rem;margin-top:3px}
  .voteCompact .battleCard>small{font-size:.48rem}
  .voteCompact .resumeGrid{grid-template-columns:repeat(3,1fr);gap:3px;margin:6px 0 4px}
  .voteCompact .resumeGrid span{padding:4px 1px;border-radius:6px}
  .voteCompact .resumeGrid b{font-size:.68rem}
  .voteCompact .resumeGrid small{font-size:.39rem}
  .voteCompact .careerLine{padding:4px 2px;gap:5px;font-size:.49rem}
  .voteCompact .battleModel{gap:3px;margin:5px 0 2px}
  .voteCompact .battleModel span{padding:4px 1px;font-size:.43rem}
  .voteCompact .battleModel b{font-size:.55rem}
  .voteCompact .choose{font-size:.66rem;padding:7px 4px;margin-top:5px}
  .voteCompact .secondary.full{margin-top:6px;padding:8px}
}

/* Extra tightening for iPhone-height viewports */
@media (max-width: 480px) and (max-height: 780px) {
  .playCompact .playerCard h2{font-size:1.18rem}
  .playCompact .playerCard .score{font-size:2.3rem}
  .playCompact .resumeGrid small{font-size:.38rem}
  .voteCompact .battleCard h2{font-size:.82rem}
  .voteCompact .resumeGrid small{font-size:.35rem}
}

/* Ranking expansion should visually remain open during cloud refreshes */
.rankCard[open] .rankExpanded{display:block}
.rankCard[open]{background:rgba(57,255,136,.035)}

/* V8.3 Tester-ready polish */
.helpBtn{margin-left:5px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#cbd2ce;font-weight:900;font-size:.7rem;padding:0}
.onboardOverlay{position:fixed;inset:0;z-index:9999;background:rgba(3,7,6,.88);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:18px}
.onboardCard{width:min(430px,100%);border:1px solid rgba(57,255,136,.32);border-radius:22px;padding:22px;background:linear-gradient(180deg,#111815,#090d0b);box-shadow:0 0 45px rgba(57,255,136,.12);text-align:center}
.onboardGoat{font-size:3rem;filter:drop-shadow(0 0 12px rgba(57,255,136,.35))}
.onboardCard h2{margin:6px 0 8px;font-size:1.35rem;color:#fff}
.onboardCard>p{font-size:.78rem;line-height:1.5;color:#aab3ae;margin:0 0 14px}
.onboardSteps{display:grid;gap:7px;text-align:left;margin:12px 0 16px}
.onboardSteps div{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.035)}
.onboardSteps b{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#39ff88;color:#05110a;font-size:.72rem}
.onboardSteps span{font-size:.72rem;color:#d3d8d5}
.voteToast{margin:5px auto 8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(57,255,136,.35);background:rgba(57,255,136,.09);text-align:center;animation:votePop .3s ease}
.voteToast b{display:block;color:#39ff88;font-size:.66rem;letter-spacing:.1em}
.voteToast span{display:block;margin-top:3px;color:#dfe7e2;font-size:.62rem}
@keyframes votePop{from{transform:translateY(-5px);opacity:0}to{transform:translateY(0);opacity:1}}
.resultActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.resultActions button{min-height:48px}
.goatWin{animation:goatGlow .7s ease}
@keyframes goatGlow{0%{filter:brightness(1)}50%{filter:brightness(1.22) drop-shadow(0 0 20px rgba(57,255,136,.35))}100%{filter:brightness(1)}}
.playerCard,.battleCard,.rankCard{transition:transform .15s ease,border-color .15s ease,background .15s ease}
@media (hover:hover){
  .battleCard:hover,.rankCard:hover{transform:translateY(-1px);border-color:rgba(57,255,136,.25)}
}
@media(max-width:480px){
  .onboardCard{padding:18px 16px}
  .resultActions{grid-template-columns:1fr 1fr;gap:7px}
  .resultActions button{font-size:.72rem;padding:9px 5px}
}

/* V8.4 — compact Results screen so CTAs stay visible on phone */
@media (max-width: 600px), (max-height: 900px) {
  .resultHero{padding:10px 12px 8px;margin-bottom:7px}
  .resultHero>div:first-child{font-size:1.55rem}
  .resultHero h1{font-size:2.35rem;line-height:1;margin:2px 0}
  .resultHero p{font-size:.58rem;margin:2px 0}
  .resultHero .levelTitle{font-size:1.05rem;margin:2px 0}
  .resultHero small{font-size:.55rem;margin-top:2px}

  .teamList{margin:6px 0}
  .teamList>div{padding:7px 10px;min-height:0}
  .teamList>div span{font-size:.72rem;line-height:1.1}
  .teamList>div span small{font-size:.52rem;margin-top:2px}
  .teamList>div>b{font-size:.9rem}

  .earned{font-size:.62rem;line-height:1.35;padding:8px 10px;margin:7px 0 8px;border-radius:10px}

  .resultActions{
    position:sticky;
    bottom:66px;
    z-index:20;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:6px;
    padding:7px;
    border-radius:12px;
    background:rgba(10,14,12,.96);
    border:1px solid rgba(57,255,136,.18);
    backdrop-filter:blur(7px)
  }
  .resultActions button{min-height:44px;padding:8px 6px;font-size:.7rem}
}

@media (max-width: 480px) and (max-height: 780px) {
  .resultHero{padding:7px 10px 5px}
  .resultHero>div:first-child{font-size:1.25rem}
  .resultHero h1{font-size:2rem}
  .resultHero .levelTitle{font-size:.92rem}
  .teamList>div{padding:5px 8px}
  .teamList>div span{font-size:.66rem}
  .teamList>div span small{font-size:.47rem}
  .teamList>div>b{font-size:.82rem}
  .earned{font-size:.56rem;padding:6px 8px}
  .resultActions{bottom:62px;padding:5px}
}

/* V8.5 — elongated GOAT mark */
.goatLogo{width:min(320px,82vw);height:190px;margin:0 auto 2px;overflow:hidden;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 18px rgba(57,255,136,.28))}
.goatLogo img{width:370px;max-width:none;height:auto;transform:scale(1.18);mix-blend-mode:screen}
.brandGoat{width:31px;height:31px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:3px}
.brandGoat img{width:58px;max-width:none;height:auto;transform:scale(1.35);mix-blend-mode:screen}
@media(max-width:600px){
  .goatLogo{height:148px;width:min(285px,84vw)}
  .goatLogo img{width:325px;transform:scale(1.20)}
  .brandGoat{width:27px;height:27px}
  .brandGoat img{width:52px}
}


/* =========================================================
   GOAT CHASER V8.6 — NEON ARENA + ELONGATED GOAT
   Visual-only layer. Game/cloud logic unchanged.
   ========================================================= */

:root{
  --gc-neon:#39ff88;
  --gc-neon2:#19e56f;
  --gc-bg:#020504;
  --gc-panel:rgba(6,13,9,.94);
  --gc-line:rgba(57,255,136,.28);
  --gc-soft:rgba(57,255,136,.08);
  --gc-text:#f5f7f6;
  --gc-muted:#89948e;
}

html,body{
  background:
    radial-gradient(circle at 50% 8%, rgba(57,255,136,.12), transparent 28%),
    radial-gradient(circle at 50% 88%, rgba(57,255,136,.07), transparent 30%),
    linear-gradient(180deg,#020504 0%,#050807 48%,#010302 100%) !important;
}

body{
  color:var(--gc-text);
  min-height:100dvh;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 95%, rgba(57,255,136,.05), transparent 36%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.01) 0 1px,transparent 1px 5px);
}

header{
  background:linear-gradient(180deg,rgba(2,6,4,.98),rgba(2,6,4,.92)) !important;
  border-bottom:1px solid rgba(57,255,136,.18) !important;
  box-shadow:0 10px 35px rgba(0,0,0,.48);
  backdrop-filter:blur(12px);
}

.brand{
  letter-spacing:.08em;
  font-weight:950 !important;
  color:#fff !important;
  text-shadow:0 0 16px rgba(57,255,136,.12);
}

.brandGoat img,
.goatLogo img{
  filter:saturate(1.5) brightness(1.25) drop-shadow(0 0 18px rgba(57,255,136,.38));
}

.hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(57,255,136,.18);
  background:
    radial-gradient(circle at 50% 32%,rgba(57,255,136,.10),transparent 40%),
    linear-gradient(180deg,rgba(8,17,12,.80),rgba(2,7,4,.90)) !important;
  box-shadow:inset 0 0 46px rgba(57,255,136,.03),0 18px 54px rgba(0,0,0,.36);
}

.hero:after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-42px;
  height:92px;
  border:1px solid rgba(57,255,136,.11);
  border-radius:50%;
  pointer-events:none;
}

.hero h1{
  text-shadow:0 4px 28px rgba(0,0,0,.65);
}

.hero h1 span,
.levelTitle,
.goatProgressTop,
.goatProgressBottom strong{
  color:var(--gc-neon) !important;
  text-shadow:0 0 15px rgba(57,255,136,.24);
}

button{
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease,border-color .14s ease;
}
button:active{transform:scale(.985)}

.primary{
  background:linear-gradient(180deg,#42ff90 0%,#17c862 100%) !important;
  color:#00190a !important;
  border:1px solid #64ffa4 !important;
  box-shadow:
    0 0 0 1px rgba(57,255,136,.15),
    0 0 22px rgba(57,255,136,.27),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.primary:hover{
  filter:brightness(1.08);
  box-shadow:0 0 30px rgba(57,255,136,.38) !important;
}

.secondary,
.grid button,
.stats>div,
.playerCard,
.battleCard,
.rankCard,
.resultHero,
.teamList,
.earned{
  background:linear-gradient(180deg,rgba(10,18,14,.95),rgba(3,8,5,.95)) !important;
  border-color:rgba(57,255,136,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 12px 30px rgba(0,0,0,.28) !important;
}

.playerCard{
  border:1px solid rgba(57,255,136,.23) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.35),0 0 22px rgba(57,255,136,.05) !important;
}

.playerCard .score,
.rankScore b,
.expandedGrid b,
.resumeGrid b{
  color:var(--gc-neon) !important;
}

.goatTrack{
  border-color:rgba(57,255,136,.23) !important;
  background:#06120b !important;
}
.goatFill{
  background:linear-gradient(90deg,#11b85a,var(--gc-neon)) !important;
  box-shadow:0 0 14px rgba(57,255,136,.42) !important;
}

nav{
  background:rgba(1,5,3,.97) !important;
  border-top:1px solid rgba(57,255,136,.18) !important;
  box-shadow:0 -10px 34px rgba(0,0,0,.44);
  backdrop-filter:blur(14px);
}

nav button:hover,
nav button:focus{
  color:var(--gc-neon) !important;
}

.cloudBadge.cloud{
  color:var(--gc-neon) !important;
  border-color:rgba(57,255,136,.40) !important;
  background:rgba(57,255,136,.08) !important;
}

.onboardCard{
  background:linear-gradient(180deg,#0d1711,#030705) !important;
  border-color:rgba(57,255,136,.32) !important;
  box-shadow:0 0 45px rgba(57,255,136,.11),0 28px 80px rgba(0,0,0,.65) !important;
}

@media(max-width:600px){
  .hero{padding-top:10px !important;padding-bottom:10px !important}
  .goatLogo{height:145px !important}
  .playerCard,.battleCard,.rankCard,.resultHero,.earned{border-radius:18px !important}
  button{border-radius:15px !important}
}

/* =========================================================
   V8.7 — FULL NEON ARENA REDESIGN
   ========================================================= */

:root{
  --neon:#39ff88;
  --neon2:#00e86f;
  --neonGlow:rgba(57,255,136,.35);
  --bg0:#010302;
  --bg1:#05100a;
  --panel:rgba(5,13,9,.92);
  --line:rgba(57,255,136,.24);
  --muted:#8f9a94;
}

/* arena atmosphere */
body{
  background:
    radial-gradient(circle at 50% 5%,rgba(57,255,136,.10),transparent 24%),
    radial-gradient(circle at 10% 18%,rgba(255,255,255,.05),transparent 10%),
    radial-gradient(circle at 90% 18%,rgba(255,255,255,.05),transparent 10%),
    linear-gradient(180deg,#010302 0%,#031009 45%,#010302 100%) !important;
}
body:after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    linear-gradient(180deg,transparent 0 74%,rgba(57,255,136,.035) 75% 76%,transparent 77%),
    repeating-linear-gradient(90deg,transparent 0 9.8%,rgba(255,255,255,.012) 10%,transparent 10.2%);
}

/* HOME */
.homeNeon{padding-top:6px}
.heroNeon{
  min-height:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:18px 16px 26px !important;
  border-radius:0 0 28px 28px !important;
  border:0 !important;
  background:
    radial-gradient(circle at 50% 28%,rgba(57,255,136,.16),transparent 34%),
    radial-gradient(circle at 50% 70%,rgba(57,255,136,.07),transparent 28%),
    linear-gradient(180deg,rgba(2,7,4,.15),rgba(1,4,2,.88)) !important;
  box-shadow:none !important;
}
.heroBrandLine{
  font-size:.62rem;font-weight:900;letter-spacing:.32em;color:#cfd5d1;
  margin:2px 0 6px;text-align:center
}
.heroBrandLine i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--neon);margin:0 10px;box-shadow:0 0 10px var(--neonGlow)}
.heroGoat{
  width:min(430px,90vw)!important;
  height:260px!important;
  margin:0 auto!important;
  filter:drop-shadow(0 0 28px rgba(57,255,136,.42))
}
.heroGoat img{
  width:470px!important;
  transform:scale(1.06)!important;
  filter:saturate(2) hue-rotate(-7deg) brightness(1.5) contrast(1.1) drop-shadow(0 0 18px rgba(57,255,136,.58))!important;
}
.heroWordmark{
  display:flex;flex-direction:column;align-items:center;line-height:.82;margin-top:-4px
}
.heroWordmark .goatWord{
  font-size:4.6rem;font-weight:1000;font-style:italic;letter-spacing:-.06em;
  color:#fff;text-shadow:0 0 2px #fff,0 0 22px rgba(57,255,136,.38)
}
.heroWordmark .chaserWord{
  margin-top:8px;font-size:1.65rem;font-weight:1000;letter-spacing:.22em;
  color:var(--neon);text-shadow:0 0 20px var(--neonGlow)
}
.heroSub{
  max-width:420px;text-align:center;color:#aeb8b2!important;font-size:.8rem!important;line-height:1.45;margin:16px 0!important
}
.neonPlay{
  width:min(360px,88vw)!important;min-height:76px!important;border-radius:999px!important;
  display:flex!important;align-items:center;justify-content:center;gap:14px;
  font-size:1.35rem!important;letter-spacing:.08em!important;
  background:linear-gradient(180deg,#4cff9a 0%,#0fd762 100%)!important;
  box-shadow:0 0 0 2px rgba(57,255,136,.14),0 0 34px rgba(57,255,136,.42),inset 0 1px 0 rgba(255,255,255,.42)!important;
}
.playIcon{
  width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#04150b;color:var(--neon);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15),0 0 15px rgba(0,0,0,.4)
}
.homeMenu{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 12px
}
.homeTile{
  min-height:104px;padding:12px 8px!important;border-radius:18px!important;
  background:linear-gradient(180deg,rgba(7,16,11,.96),rgba(2,7,4,.96))!important;
  border:1px solid rgba(57,255,136,.28)!important;box-shadow:0 12px 28px rgba(0,0,0,.28)!important;
  color:#fff!important
}
.tileIcon{display:block;font-size:1.6rem;color:var(--neon);filter:drop-shadow(0 0 9px rgba(57,255,136,.35))}
.homeTile b{display:block;margin-top:6px;font-size:.72rem;letter-spacing:.06em}
.homeTile small{display:block;margin-top:4px;color:#86938c;font-size:.53rem}
.neonStats{
  border:1px solid rgba(57,255,136,.15);border-radius:16px;padding:4px;background:rgba(1,6,3,.55)
}

/* shared screen title */
.screenTitle{
  display:flex;align-items:center;justify-content:space-between;margin:2px 2px 8px;
  font-size:.64rem;letter-spacing:.10em;color:#9aa49e;font-weight:900
}
.screenTitle b{color:var(--neon);font-size:.64rem;text-shadow:0 0 10px var(--neonGlow)}

/* PLAY */
.playNeon .slots{margin:7px 0 10px}
.playNeon .slot{
  background:linear-gradient(180deg,rgba(8,18,12,.94),rgba(2,7,4,.94))!important;
  border:1px solid rgba(57,255,136,.16)!important
}
.playNeon .slot.active{
  border-color:rgba(57,255,136,.55)!important;
  box-shadow:0 0 16px rgba(57,255,136,.14)
}
.neonPlayerCard{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 50% 20%,rgba(57,255,136,.10),transparent 32%),
    linear-gradient(180deg,#091811 0%,#020604 100%)!important;
  border:1px solid rgba(57,255,136,.30)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.38),0 0 26px rgba(57,255,136,.07)!important
}
.neonPlayerCard:before{
  content:"";position:absolute;inset:auto 8% -34px 8%;height:70px;border:1px solid rgba(57,255,136,.10);border-radius:50%
}
.neonPlayerCard h2{font-size:1.9rem!important;text-shadow:0 0 20px rgba(255,255,255,.08)}
.neonPlayerCard .score{
  font-size:4.2rem!important;color:var(--neon)!important;text-shadow:0 0 24px rgba(57,255,136,.25)
}
.neonActions .secondary{
  border-color:rgba(57,255,136,.28)!important;color:#d8dfdb!important;
  background:linear-gradient(180deg,#0a140f,#030705)!important
}

/* VOTE */
.neonVoteHead,.neonRankHead{text-align:center;margin-bottom:10px}
.battleKicker{font-size:.55rem;letter-spacing:.22em;color:var(--neon);font-weight:900;margin-bottom:3px}
.neonVoteHead h1,.neonRankHead h1{
  font-size:2rem!important;margin:0!important;letter-spacing:.02em;text-shadow:0 0 24px rgba(57,255,136,.14)
}
.neonBattleCard{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 50% 16%,rgba(57,255,136,.08),transparent 28%),
    linear-gradient(180deg,#091811,#020604)!important;
  border:1px solid rgba(57,255,136,.25)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.34)!important
}
.neonBattleCard h2{font-size:1.25rem!important}
.neonBattleCard .choose{
  background:linear-gradient(180deg,#35ff8a,#11c85e)!important;color:#001a0b!important;
  border-radius:999px!important;box-shadow:0 0 18px rgba(57,255,136,.20)
}

/* RESULTS */
.resultsNeon{padding-top:3px}
.neonResult{
  background:
    radial-gradient(circle at 50% 12%,rgba(57,255,136,.14),transparent 36%),
    linear-gradient(180deg,#091811,#020604)!important;
  border:1px solid rgba(57,255,136,.25)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.36),0 0 24px rgba(57,255,136,.06)!important
}
.neonResult h1{font-size:4rem!important;color:#fff!important;text-shadow:0 0 22px rgba(57,255,136,.12)}
.resultActions{
  background:rgba(1,6,3,.95)!important;border-color:rgba(57,255,136,.20)!important;
  box-shadow:0 -8px 30px rgba(0,0,0,.34)
}

/* RANKINGS */
.rankingsNeon .rankHeader{
  color:#78837d;border-bottom:1px solid rgba(57,255,136,.12)
}
.neonRankCard{
  background:linear-gradient(180deg,rgba(8,17,12,.94),rgba(2,7,4,.94))!important;
  border-bottom:1px solid rgba(57,255,136,.10)!important
}
.neonRankCard.top{
  background:linear-gradient(90deg,rgba(57,255,136,.08),rgba(3,8,5,.96))!important
}
.neonRankCard[open]{
  border:1px solid rgba(57,255,136,.24)!important;
  box-shadow:0 0 24px rgba(57,255,136,.05)!important
}
.rankScore b{color:var(--neon)!important;text-shadow:0 0 12px rgba(57,255,136,.15)}

/* mobile fit */
@media(max-width:600px){
  .heroNeon{min-height:500px;padding-top:8px!important}
  .heroGoat{height:205px!important}
  .heroGoat img{width:390px!important}
  .heroWordmark .goatWord{font-size:3.55rem}
  .heroWordmark .chaserWord{font-size:1.25rem}
  .heroSub{font-size:.68rem!important;margin:10px 0!important}
  .neonPlay{min-height:62px!important;font-size:1.05rem!important}
  .playIcon{width:34px;height:34px}
  .homeMenu{gap:7px;margin-top:12px}
  .homeTile{min-height:88px!important;padding:9px 4px!important}
  .tileIcon{font-size:1.25rem}
  .homeTile b{font-size:.62rem}
  .homeTile small{font-size:.46rem}
  .neonPlayerCard h2{font-size:1.42rem!important}
  .neonPlayerCard .score{font-size:3.05rem!important}
  .neonVoteHead h1,.neonRankHead h1{font-size:1.55rem!important}
}

/* =========================================================
   V8.8 — FULL MOBILE NEON PASS
   - Home fits iPhone without scroll
   - Play / Vote / Results / Rankings get the same arena treatment
   ========================================================= */

:root{
  --gc-neon:#39ff88;
  --gc-neon-deep:#0bbf57;
  --gc-panel:#06100b;
  --gc-panel2:#020604;
  --gc-line:rgba(57,255,136,.24);
  --gc-muted:#89948e;
}

/* ---------- GLOBAL SCREEN ATMOSPHERE ---------- */
main section{
  position:relative;
}
main section:before{
  content:"";
  position:absolute;
  inset:-6px -6px auto -6px;
  height:190px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 0%,rgba(57,255,136,.11),transparent 60%);
}
.voteHead h1,
.screenTitle,
.resultHero,
.rankingsNeon .voteHead{
  text-shadow:0 0 18px rgba(57,255,136,.10);
}

/* ---------- HOME: FORCE ONE-SCREEN IPHONE FIT ---------- */
@media(max-width:600px){
  .homeNeon{
    min-height:calc(100dvh - 120px);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
  }
  .heroNeon{
    min-height:0 !important;
    height:auto !important;
    padding:4px 10px 10px !important;
    border-radius:0 0 22px 22px !important;
    flex:0 0 auto;
  }
  .heroBrandLine{
    margin:0 0 2px !important;
    font-size:.48rem !important;
    letter-spacing:.22em !important;
  }
  .heroBrandLine i{
    width:4px;height:4px;margin:0 6px
  }
  .heroGoat{
    height:128px !important;
    width:min(250px,72vw)!important;
    margin:-5px auto -3px !important;
  }
  .heroGoat img{
    width:280px!important;
    transform:scale(1.03)!important;
  }
  .heroWordmark{
    margin-top:-7px!important;
  }
  .heroWordmark .goatWord{
    font-size:2.9rem!important;
  }
  .heroWordmark .chaserWord{
    font-size:.98rem!important;
    margin-top:5px!important;
    letter-spacing:.18em!important;
  }
  .heroSub{
    font-size:.58rem!important;
    line-height:1.28!important;
    margin:7px auto 8px!important;
    max-width:310px!important;
  }
  .neonPlay{
    min-height:50px!important;
    width:min(300px,84vw)!important;
    font-size:.86rem!important;
    gap:8px!important;
  }
  .playIcon{
    width:28px!important;
    height:28px!important;
    font-size:.72rem!important;
  }
  .homeMenu{
    margin:8px 0 7px!important;
    gap:6px!important;
  }
  .homeTile{
    min-height:68px!important;
    padding:6px 3px!important;
    border-radius:13px!important;
  }
  .tileIcon{
    font-size:.98rem!important;
  }
  .homeTile b{
    font-size:.52rem!important;
    margin-top:3px!important;
  }
  .homeTile small{
    font-size:.39rem!important;
    margin-top:2px!important;
  }
  .neonStats{
    margin:0!important;
    padding:2px!important;
  }
  .neonStats>div{
    min-height:45px!important;
    padding:5px 3px!important;
  }
  .neonStats span{
    font-size:.43rem!important;
  }
  .neonStats b{
    font-size:.92rem!important;
  }
  .neonStats small{
    font-size:.38rem!important;
  }
  .legalLinks{
    margin:6px 0 0!important;
    gap:8px!important;
  }
  .legalLinks a{
    font-size:.45rem!important;
  }
}

/* ---------- PLAY: FULL NEON GAME CARD ---------- */
.playNeon{
  background:
    radial-gradient(circle at 50% 12%,rgba(57,255,136,.075),transparent 32%);
}
.playNeon .screenTitle{
  border:1px solid rgba(57,255,136,.17);
  border-radius:12px;
  padding:8px 10px;
  background:linear-gradient(180deg,rgba(8,18,12,.86),rgba(2,7,4,.86));
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}
.playNeon .topline{
  padding:0 4px;
}
.playNeon .slot{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(9,21,14,.96),rgba(2,7,4,.96))!important;
  border:1px solid rgba(57,255,136,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 18px rgba(0,0,0,.20);
}
.playNeon .slot.active:after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 18px rgba(57,255,136,.08);
}
.neonPlayerCard{
  border-radius:24px!important;
  background:
    radial-gradient(circle at 50% 18%,rgba(57,255,136,.13),transparent 30%),
    linear-gradient(180deg,#0a1a12 0%,#020604 100%)!important;
}
.neonPlayerCard .badge{
  color:var(--gc-neon)!important;
  letter-spacing:.13em!important;
}
.neonPlayerCard h2{
  color:#fff!important;
}
.neonPlayerCard p{
  color:#8d9992!important;
}
.neonPlayerCard .resumeGrid span{
  background:linear-gradient(180deg,rgba(14,27,19,.78),rgba(4,10,7,.80))!important;
  border-color:rgba(57,255,136,.14)!important;
}
.neonPlayerCard .careerLine{
  background:rgba(57,255,136,.045)!important;
  border:1px solid rgba(57,255,136,.10)!important;
}
.neonActions .primary,
.neonActions .neonSecondary{
  min-height:48px;
  border-radius:15px!important;
}
.neonActions .neonSecondary{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 20px rgba(0,0,0,.20)!important;
}
.goatProgress{
  background:
    linear-gradient(180deg,rgba(8,19,12,.92),rgba(2,7,4,.92))!important;
  border:1px solid rgba(57,255,136,.23)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18)!important;
}

/* ---------- VOTE: PREMIUM VERSUS ARENA ---------- */
.voteNeon{
  background:
    radial-gradient(circle at 50% 14%,rgba(57,255,136,.08),transparent 34%);
}
.neonVoteHead{
  padding:8px 0 4px;
}
.neonVoteHead h1{
  color:#fff!important;
  text-shadow:0 0 22px rgba(57,255,136,.12);
}
.neonVoteHead .pill{
  border:1px solid rgba(57,255,136,.26)!important;
  background:rgba(57,255,136,.075)!important;
  color:var(--gc-neon)!important;
}
.voteNeon .battle{
  position:relative;
}
.voteNeon .vs{
  position:relative;
  color:#fff!important;
  font-weight:1000!important;
  text-shadow:0 0 16px rgba(57,255,136,.20);
}
.voteNeon .vs:before,
.voteNeon .vs:after{
  content:"";
  position:absolute;
  left:50%;
  width:1px;
  background:linear-gradient(transparent,rgba(57,255,136,.45),transparent);
  transform:translateX(-50%);
}
.voteNeon .vs:before{top:-34px;height:28px}
.voteNeon .vs:after{bottom:-34px;height:28px}
.neonBattleCard{
  border-radius:22px!important;
  background:
    radial-gradient(circle at 50% 16%,rgba(57,255,136,.11),transparent 28%),
    linear-gradient(180deg,#0a1a12 0%,#020604 100%)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 22px rgba(57,255,136,.045)!important;
}
.neonBattleCard .rank{
  display:inline-flex;
  border:1px solid rgba(57,255,136,.18);
  border-radius:999px;
  padding:4px 7px;
  background:rgba(57,255,136,.055);
  color:var(--gc-neon)!important;
}
.neonBattleCard h2{
  color:#fff!important;
}
.neonBattleCard>b{
  color:var(--gc-neon)!important;
  text-shadow:0 0 18px rgba(57,255,136,.18);
}
.neonBattleCard .resumeGrid span,
.neonBattleCard .battleModel span{
  background:rgba(57,255,136,.035)!important;
  border-color:rgba(57,255,136,.12)!important;
}
.voteToast{
  box-shadow:0 0 22px rgba(57,255,136,.08)!important;
}

/* ---------- RESULTS: SCOREBOARD / TROPHY FEEL ---------- */
.resultsNeon{
  background:
    radial-gradient(circle at 50% 8%,rgba(57,255,136,.08),transparent 32%);
}
.neonResult{
  position:relative;
  overflow:hidden;
  border-radius:24px!important;
}
.neonResult:before{
  content:"";
  position:absolute;
  inset:auto 8% -40px 8%;
  height:85px;
  border:1px solid rgba(57,255,136,.12);
  border-radius:50%;
}
.neonResult h1{
  text-shadow:0 0 26px rgba(57,255,136,.16)!important;
}
.neonResult .levelTitle{
  letter-spacing:.11em!important;
}
.resultsNeon .teamList{
  border:1px solid rgba(57,255,136,.14)!important;
  background:linear-gradient(180deg,rgba(8,17,12,.93),rgba(2,7,4,.93))!important;
  overflow:hidden;
}
.resultsNeon .teamList>div{
  border-bottom:1px solid rgba(57,255,136,.09)!important;
}
.resultsNeon .teamList>div:last-child{
  border-bottom:0!important;
}
.resultsNeon .earned{
  background:rgba(57,255,136,.045)!important;
  border:1px solid rgba(57,255,136,.14)!important;
}
.resultsNeon .resultActions{
  border-radius:15px!important;
}
.resultsNeon .resultActions .secondary{
  border-color:rgba(57,255,136,.22)!important;
}

/* ---------- RANKINGS: LIVE LEADERBOARD ---------- */
.rankingsNeon{
  background:
    radial-gradient(circle at 50% 8%,rgba(57,255,136,.07),transparent 28%);
}
.neonRankHead{
  padding-top:6px;
}
.neonRankHead h1{
  color:#fff!important;
}
.rankingsNeon .rankHeader{
  background:rgba(57,255,136,.025);
  border:1px solid rgba(57,255,136,.10);
  border-bottom:0;
  border-radius:12px 12px 0 0;
}
.rankingsNeon .rankingV4{
  border:1px solid rgba(57,255,136,.13)!important;
  border-radius:0 0 16px 16px!important;
  overflow:hidden;
  background:rgba(1,5,3,.58);
}
.neonRankCard{
  background:
    linear-gradient(180deg,rgba(8,18,12,.96),rgba(2,7,4,.96))!important;
}
.neonRankCard.top{
  position:relative;
  background:
    linear-gradient(90deg,rgba(57,255,136,.10),rgba(2,7,4,.96) 50%)!important;
}
.neonRankCard.top:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:var(--gc-neon);
  box-shadow:0 0 12px rgba(57,255,136,.45);
}
.neonRankCard summary{
  min-height:64px;
}
.neonRankCard .rankNum{
  color:#718078!important;
}
.neonRankCard.top .rankNum{
  color:var(--gc-neon)!important;
}
.neonRankCard .rankAwards{
  color:#69d994!important;
}
.neonRankCard[open]{
  background:
    radial-gradient(circle at 20% 0%,rgba(57,255,136,.06),transparent 30%),
    linear-gradient(180deg,#08150e,#020604)!important;
}
.neonRankCard .rankExpanded{
  border-top:1px solid rgba(57,255,136,.10);
}
.neonRankCard .expandedGrid span{
  background:rgba(57,255,136,.035)!important;
  border-color:rgba(57,255,136,.11)!important;
}
.neonRankCard .expandedScores span{
  background:rgba(57,255,136,.035)!important;
  border:1px solid rgba(57,255,136,.08)!important;
}

/* ---------- MOBILE TIGHTEN ALL SCREENS ---------- */
@media(max-width:600px){
  .playNeon,.voteNeon,.resultsNeon,.rankingsNeon{
    padding-top:2px!important;
  }
  .screenTitle{
    padding:6px 8px!important;
    margin-bottom:5px!important;
  }
  .neonPlayerCard{
    padding:8px 10px!important;
  }
  .neonPlayerCard .resumeGrid{
    margin:5px 0!important;
  }
  .neonBattleCard{
    padding:7px 5px!important;
  }
  .neonVoteHead{
    margin-bottom:2px!important;
  }
  .neonVoteHead h1{
    font-size:1.35rem!important;
  }
  .battleKicker{
    font-size:.42rem!important;
  }
  .neonResult{
    padding-top:6px!important;
    padding-bottom:5px!important;
  }
  .neonResult h1{
    font-size:2.2rem!important;
  }
  .rankingsNeon .rankHeader{
    padding-top:7px!important;
    padding-bottom:5px!important;
  }
}

/* Extra-short iPhones */
@media(max-width:430px) and (max-height:760px){
  .heroGoat{height:105px!important}
  .heroGoat img{width:245px!important}
  .heroWordmark .goatWord{font-size:2.5rem!important}
  .heroWordmark .chaserWord{font-size:.82rem!important}
  .heroSub{margin:5px auto 6px!important;font-size:.52rem!important}
  .neonPlay{min-height:44px!important}
  .homeTile{min-height:60px!important}
  .neonStats>div{min-height:40px!important}
}

/* =========================================================
   V8.9 — iPHONE FIT + MATCHED NEON HEADER GOAT
   Visual-only. Logic unchanged.
   ========================================================= */

/* Match the header goat to the main neon goat */
.brandGoat{
  width:34px!important;
  height:34px!important;
  overflow:visible!important;
  margin-right:6px!important;
}
.brandGoat img{
  width:64px!important;
  max-width:none!important;
  transform:scale(1.22)!important;
  mix-blend-mode:screen!important;
  filter:
    saturate(2.2)
    hue-rotate(-5deg)
    brightness(1.9)
    contrast(1.18)
    drop-shadow(0 0 5px rgba(57,255,136,.85))
    drop-shadow(0 0 12px rgba(57,255,136,.55))!important;
}

/* Give the header a bit more breathing room for the larger mark */
header{
  min-height:70px!important;
}
.brand{
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
}

/* Home should use the available viewport instead of leaving dead space */
@media(max-width:600px){
  .homeNeon{
    height:calc(100dvh - 122px)!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto auto auto auto!important;
    align-content:space-between!important;
    overflow:hidden!important;
    padding-bottom:4px!important;
  }

  .heroNeon{
    min-height:0!important;
    padding-top:6px!important;
    padding-bottom:8px!important;
  }

  .heroGoat{
    height:138px!important;
    width:min(272px,76vw)!important;
    margin:-3px auto -2px!important;
  }
  .heroGoat img{
    width:302px!important;
  }

  .heroWordmark .goatWord{
    font-size:3.05rem!important;
  }
  .heroWordmark .chaserWord{
    font-size:1.02rem!important;
  }

  .heroSub{
    margin:7px auto 8px!important;
  }

  .neonPlay{
    min-height:54px!important;
  }

  .homeMenu{
    margin:7px 0!important;
  }
  .homeTile{
    min-height:72px!important;
  }

  .neonStats{
    margin:0!important;
  }
  .neonStats>div{
    min-height:48px!important;
  }

  .legalLinks{
    margin:4px 0 0!important;
    padding-bottom:2px!important;
  }
}

/* Taller iPhones: intentionally expand the visual stack to fill space */
@media(max-width:600px) and (min-height:800px){
  .heroGoat{
    height:150px!important;
    width:min(290px,80vw)!important;
  }
  .heroGoat img{
    width:325px!important;
  }
  .heroWordmark .goatWord{
    font-size:3.25rem!important;
  }
  .heroWordmark .chaserWord{
    font-size:1.08rem!important;
  }
  .heroSub{
    font-size:.61rem!important;
    margin:8px auto 9px!important;
  }
  .neonPlay{
    min-height:58px!important;
  }
  .homeTile{
    min-height:78px!important;
  }
  .neonStats>div{
    min-height:52px!important;
  }
}

/* Very tall phones: spread sections rather than creating blank space */
@media(max-width:600px) and (min-height:880px){
  .heroNeon{
    padding-top:9px!important;
    padding-bottom:11px!important;
  }
  .homeMenu{
    margin:9px 0!important;
  }
  .legalLinks{
    margin-top:7px!important;
  }
}

/* Shorter iPhones still fit without scrolling */
@media(max-width:430px) and (max-height:760px){
  header{min-height:64px!important}
  .brandGoat{width:30px!important;height:30px!important}
  .brandGoat img{width:56px!important}
  .heroGoat{height:108px!important}
  .heroGoat img{width:250px!important}
  .heroWordmark .goatWord{font-size:2.55rem!important}
  .heroWordmark .chaserWord{font-size:.84rem!important}
  .neonPlay{min-height:44px!important}
  .homeTile{min-height:60px!important}
  .neonStats>div{min-height:40px!important}
}

/* =========================================================
   V8.10 — ALL-SCREEN RESPONSIVE HEIGHT LOGIC
   Visual-only. Game/cloud logic unchanged.
   ========================================================= */

@media(max-width:600px){

  /* Shared viewport behavior */
  .playNeon,
  .voteNeon,
  .resultsNeon,
  .rankingsNeon{
    min-height:calc(100dvh - 122px);
    box-sizing:border-box;
  }

  /* PLAY */
  .playNeon{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
  }
  .playNeon .screenTitle{flex:0 0 auto}
  .playNeon .topline{flex:0 0 auto}
  .playNeon .slots{flex:0 0 auto}
  .playNeon .neonPlayerCard{flex:0 0 auto}
  .playNeon .neonActions{flex:0 0 auto}
  .playNeon .running{flex:0 0 auto}
  .playNeon .goatProgress{flex:0 0 auto;margin-top:auto!important}

  /* VOTE */
  .voteNeon{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
  }
  .voteNeon .neonVoteHead{flex:0 0 auto}
  .voteNeon .voteToast{flex:0 0 auto}
  .voteNeon .battle{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    align-items:stretch;
  }
  .voteNeon .empty{flex:0 0 auto}
  .voteNeon .secondary.full{flex:0 0 auto}

  /* RESULTS */
  .resultsNeon{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
  }
  .resultsNeon .neonResult{flex:0 0 auto}
  .resultsNeon .teamList{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
  }
  .resultsNeon .earned{flex:0 0 auto}
  .resultsNeon .resultActions{
    flex:0 0 auto;
    margin-top:auto!important;
  }

  /* RANKINGS */
  .rankingsNeon{
    display:flex;
    flex-direction:column;
    min-height:calc(100dvh - 122px);
  }
  .rankingsNeon .neonRankHead{flex:0 0 auto}
  .rankingsNeon .rankHeader{flex:0 0 auto}
  .rankingsNeon .rankingV4{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .rankingsNeon .legendNote,
  .rankingsNeon .methodology{
    flex:0 0 auto;
  }
}

/* ---------- TALLER PHONES: SPREAD CONTENT TO FILL HEIGHT ---------- */
@media(max-width:600px) and (min-height:800px){

  .playNeon .screenTitle{margin-bottom:7px!important}
  .playNeon .slots{margin-bottom:9px!important}
  .playNeon .neonPlayerCard{margin-bottom:8px!important}
  .playNeon .neonActions{margin-bottom:7px!important}
  .playNeon .goatProgress{padding-top:9px!important;padding-bottom:9px!important}

  .voteNeon .neonVoteHead{padding-top:8px!important;padding-bottom:6px!important}
  .voteNeon .battle{margin-top:7px!important;margin-bottom:7px!important}
  .voteNeon .neonBattleCard{padding-top:9px!important;padding-bottom:9px!important}

  .resultsNeon .neonResult{padding-top:10px!important;padding-bottom:8px!important}
  .resultsNeon .teamList>div{padding-top:7px!important;padding-bottom:7px!important}
  .resultsNeon .earned{margin-top:8px!important;margin-bottom:8px!important}
  .resultsNeon .resultActions{padding-top:7px!important;padding-bottom:7px!important}

  .rankingsNeon .neonRankHead{padding-top:8px!important;padding-bottom:7px!important}
  .rankingsNeon .rankHeader{padding-top:8px!important;padding-bottom:7px!important}
  .rankingsNeon .neonRankCard summary{min-height:66px!important}
}

/* ---------- VERY TALL PHONES: USE EXTRA ROOM, DON'T LEAVE DEAD SPACE ---------- */
@media(max-width:600px) and (min-height:880px){

  .playNeon .neonPlayerCard{padding-top:12px!important;padding-bottom:12px!important}
  .playNeon .neonActions button{min-height:52px!important}
  .playNeon .goatProgress{margin-bottom:6px!important}

  .voteNeon .neonBattleCard{padding-top:11px!important;padding-bottom:11px!important}
  .voteNeon .battle{gap:8px!important}

  .resultsNeon .teamList>div{padding-top:8px!important;padding-bottom:8px!important}
  .resultsNeon .resultActions button{min-height:48px!important}

  .rankingsNeon .neonRankCard summary{min-height:70px!important}
}

/* ---------- SHORTER PHONES: COMPRESS WITHOUT BREAKING FIT ---------- */
@media(max-width:430px) and (max-height:760px){

  .playNeon .screenTitle{
    padding:4px 7px!important;
    margin-bottom:3px!important;
    font-size:.53rem!important;
  }
  .playNeon .topline{
    font-size:.54rem!important;
    margin-bottom:3px!important;
  }
  .playNeon .slots{
    gap:3px!important;
    margin:3px 0 5px!important;
  }
  .playNeon .slot{
    min-height:36px!important;
    padding:4px 2px!important;
  }
  .playNeon .neonPlayerCard{
    padding:6px 8px!important;
    margin:4px 0!important;
  }
  .playNeon .neonPlayerCard h2{font-size:1.12rem!important}
  .playNeon .neonPlayerCard .score{font-size:2.35rem!important}
  .playNeon .resumeGrid{margin:4px 0 3px!important}
  .playNeon .careerLine{padding:3px!important}
  .playNeon .neonActions{margin:4px 0!important}
  .playNeon .neonActions button{min-height:40px!important;padding:7px!important}
  .playNeon .running{margin:3px 0!important;font-size:.54rem!important}
  .playNeon .goatProgress{padding:6px 8px!important;margin:3px 0!important}

  .voteNeon .neonVoteHead{padding:2px 0!important}
  .voteNeon .neonVoteHead h1{font-size:1.16rem!important}
  .voteNeon .pill{margin:2px auto!important}
  .voteNeon .battle{gap:4px!important;margin-top:3px!important}
  .voteNeon .neonBattleCard{padding:5px 4px!important}
  .voteNeon .neonBattleCard h2{font-size:.76rem!important}
  .voteNeon .resumeGrid{margin:4px 0 3px!important}
  .voteNeon .careerLine{padding:3px!important}
  .voteNeon .battleModel{margin:3px 0!important}
  .voteNeon .choose{padding:5px 3px!important;margin-top:3px!important}
  .voteNeon .secondary.full{padding:6px!important;margin-top:4px!important}

  .resultsNeon .neonResult{padding:5px 8px!important}
  .resultsNeon .neonResult h1{font-size:1.85rem!important}
  .resultsNeon .levelTitle{font-size:.84rem!important}
  .resultsNeon .teamList>div{padding:4px 7px!important}
  .resultsNeon .earned{padding:5px 7px!important;margin:4px 0!important}
  .resultsNeon .resultActions{padding:4px!important;margin-top:4px!important}
  .resultsNeon .resultActions button{min-height:40px!important;font-size:.64rem!important}

  .rankingsNeon .neonRankHead{padding:2px 0!important}
  .rankingsNeon .neonRankHead h1{font-size:1.18rem!important}
  .rankingsNeon .rankHeader{padding:5px 7px!important}
  .rankingsNeon .neonRankCard summary{min-height:54px!important;padding:9px 7px!important}
  .rankingsNeon .rankName{font-size:.82rem!important}
  .rankingsNeon .rankCareer{font-size:.54rem!important}
  .rankingsNeon .rankAwards{font-size:.50rem!important}
}

/* Rankings can scroll internally while keeping header/nav fixed.
   Other screens are intended to fit without page scrolling. */
@media(max-width:600px){
  body:has(.playNeon),
  body:has(.voteNeon),
  body:has(.resultsNeon){
    overflow:hidden;
  }
}