/* ===========================================================
   PokeAPrez — design system + screens (PWA build of RN spec)
   =========================================================== */
:root{
  --navy900:#071A33; --navy800:#0B2545; --navy700:#12355B;
  --red600:#D72638; --red700:#B91C2B;
  --blue500:#2F80ED; --blue600:#1D5FBF;
  --gold400:#F7C948; --gold500:#F2B705;
  --white:#fff; --offWhite:#F8FAFC;
  --gray100:#EEF2F7; --gray300:#CBD5E1; --gray500:#64748B; --gray800:#1E293B;
  --success:#22C55E; --warning:#F59E0B; --danger:#EF4444;
  --card:rgba(255,255,255,.06); --cardBorder:rgba(255,255,255,.12);

  --display:'Anton',Impact,sans-serif;
  --head:'Oswald',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --num:'Barlow Condensed','Oswald',sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --maxw:520px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--body); color:var(--white);
  background:var(--navy900);
  -webkit-font-smoothing:antialiased;
  overflow:hidden; overscroll-behavior:none;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none;
}
#app{position:fixed; inset:0; display:flex; justify-content:center;}
img{display:block; max-width:100%;}

/* ---- screen system ---- */
.screen{
  position:absolute; inset:0; display:none; flex-direction:column;
  width:100%; max-width:var(--maxw); margin:0 auto;
  background:radial-gradient(130% 90% at 50% -10%, var(--navy700) 0%, var(--navy900) 60%);
}
.screen.is-active{display:flex;}
.scroll{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:max(env(safe-area-inset-top),14px) 18px calc(env(safe-area-inset-bottom) + 24px);}

/* ---- buttons ---- */
.btn{font-family:var(--head); font-weight:700; font-size:1rem; letter-spacing:.03em;
  border:none; border-radius:var(--r-pill); padding:15px 26px; cursor:pointer; color:#fff;
  text-transform:uppercase; transition:transform .12s, box-shadow .12s, background .2s; width:100%;}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--red600); box-shadow:0 6px 0 var(--red700);}
.btn-primary:active{box-shadow:0 2px 0 var(--red700);}
.btn-navy{background:var(--navy700); box-shadow:0 6px 0 #061427;}
.btn-secondary{background:#fff; color:var(--navy800); }
.btn-gold{background:var(--gold400); color:var(--navy900); box-shadow:0 6px 0 var(--gold500);}
.btn-ghost{background:rgba(255,255,255,.08); border:1px solid var(--cardBorder); color:#fff;}
.btn-text{background:none; color:var(--gray300); text-transform:none; font-weight:600;}
.btn-sm{padding:10px 16px; font-size:.85rem; width:auto;}
.btn[disabled]{opacity:.45;}

/* ---- disclaimer banner ---- */
.disclaimer{display:flex; gap:8px; align-items:center; justify-content:center; text-align:center;
  font-size:.7rem; color:var(--gray300); line-height:1.45; padding:10px 14px;
  background:rgba(0,0,0,.25); border-radius:var(--r-md); border:1px solid var(--cardBorder);}
.disclaimer.bare{display:block; background:none; border:none; padding:6px 0;}
.disclaimer strong{color:var(--gold400);}

/* ---- brand logo (wordmark) ---- */
.brand{font-family:var(--display); text-transform:uppercase; line-height:.9; letter-spacing:.01em; color:#fff;}
.brand .a{color:var(--red600);}
.brand .star{color:var(--gold400);}
.brand-lg{font-size:clamp(2.6rem,13vw,4rem); text-shadow:0 4px 0 rgba(0,0,0,.3);}
.brand-md{font-size:1.5rem;}
.kicker{font-family:var(--head); color:var(--gold400); letter-spacing:.22em; text-transform:uppercase; font-size:.72rem; font-weight:600;}

/* =========================================================== WELCOME (arcade stage) */
.welcome-inner{flex:1; display:flex; flex-direction:column; width:100%; gap:10px;
  padding:max(env(safe-area-inset-top),12px) 16px calc(env(safe-area-inset-bottom) + 16px);}
.welcome-logo{width:100%; max-width:212px; height:auto; margin:0 auto;}

/* the stage / arcade cabinet */
.stage{position:relative; flex:1; min-height:0; border-radius:24px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(180deg,#103159 0%, #0b1d3c 55%, #081428 100%);
  border:1px solid rgba(247,201,72,.4);
  box-shadow:inset 0 2px 44px rgba(0,0,0,.55), 0 14px 34px rgba(0,0,0,.5);}
.stage-bunting{position:absolute; top:0; left:0; right:0; height:15px; z-index:1; opacity:.92;
  background:repeating-linear-gradient(90deg,#c8102e 0 16px,#f4f4f4 16px 32px,#2a5db0 32px 48px);
  border-bottom:2px solid rgba(247,201,72,.55);}
.stage-glow{position:absolute; inset:0; z-index:0; pointer-events:none; background:
  radial-gradient(46% 40% at 24% 26%, rgba(43,93,176,.5), transparent 70%),
  radial-gradient(46% 40% at 76% 26%, rgba(200,16,46,.42), transparent 70%),
  radial-gradient(62% 36% at 50% 4%, rgba(247,201,72,.22), transparent 72%);}
.stage-stars{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:
   radial-gradient(2px 2px at 18% 22%, rgba(247,201,72,.8), transparent 60%),
   radial-gradient(1.5px 1.5px at 72% 18%, rgba(255,255,255,.6), transparent 60%),
   radial-gradient(2px 2px at 50% 30%, rgba(247,201,72,.5), transparent 60%),
   radial-gradient(1.5px 1.5px at 86% 40%, rgba(255,255,255,.5), transparent 60%),
   radial-gradient(1.5px 1.5px at 28% 46%, rgba(255,255,255,.45), transparent 60%),
   radial-gradient(2px 2px at 64% 52%, rgba(247,201,72,.45), transparent 60%),
   radial-gradient(1.5px 1.5px at 40% 14%, rgba(255,255,255,.4), transparent 60%);}
.stage-floor{position:absolute; bottom:0; left:0; right:0; height:32%; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(43,93,176,.28));}
.stage-title{position:relative; z-index:2; text-align:center; margin:0 8px 10px;
  font-family:var(--display); font-size:1.4rem; color:var(--gold400); letter-spacing:.03em;
  text-shadow:0 2px 8px rgba(0,0,0,.55);}

/* candidate slots / podiums */
.slots{position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:center; gap:2px; padding:0 6px 16px;}
.slot{position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;}
.slot.center{z-index:3; transform:translateY(-8px);}
.slot .spotlight{position:absolute; top:0; left:50%; transform:translateX(-50%); width:130%; height:80%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 32%, rgba(247,201,72,.22), transparent 66%);}
.slot .cand{position:relative; z-index:1; width:126%; margin-bottom:-24%; filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));}
.slot.center .cand{width:144%; margin-bottom:-28%;}
.slot .cand img, .slot .cand svg{display:block; width:100%; height:auto;}
.podium{position:relative; z-index:2; width:100%; padding:9px 4px 8px; text-align:center;
  border-radius:9px 9px 6px 6px; background:linear-gradient(180deg,#1f3e72,#0f2347);
  border:1px solid rgba(247,201,72,.5); box-shadow:0 6px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);}
.slot.center .podium{background:linear-gradient(180deg,#d8344a,#a50f26); border-color:rgba(247,201,72,.85);}
.pname{font-family:var(--display); font-size:.8rem; letter-spacing:.05em; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55);}

/* arcade CTA */
.welcome-cta{display:flex; flex-direction:column; align-items:center; gap:2px;}
.btn-arcade{width:100%; max-width:360px; font-family:var(--display); font-size:1.5rem; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; border:2px solid var(--gold400); border-radius:16px; padding:15px;
  background:linear-gradient(180deg,#e43a4e,#c8102e); box-shadow:0 6px 0 #8d0b1f, 0 12px 22px rgba(0,0,0,.45);}
.btn-arcade:active{transform:translateY(3px); box-shadow:0 3px 0 #8d0b1f, 0 6px 12px rgba(0,0,0,.4);}
.auth-logo{width:170px; height:auto; margin:0 auto 18px; display:block;}

/* =========================================================== AUTH */
.auth-tabs{display:flex; gap:6px; background:rgba(0,0,0,.25); border-radius:var(--r-pill); padding:4px; margin-bottom:18px;}
.auth-tab{flex:1; text-align:center; padding:10px; border-radius:var(--r-pill); font-family:var(--head);
  font-weight:600; text-transform:uppercase; font-size:.85rem; color:var(--gray300); cursor:pointer;}
.auth-tab.active{background:var(--red600); color:#fff;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field>span{font-size:.78rem; font-weight:700; color:var(--gray300); font-family:var(--head); letter-spacing:.04em; text-transform:uppercase;}
.field input,.field select{font-family:var(--body); font-size:1rem; color:#fff; padding:13px 14px;
  background:rgba(255,255,255,.06); border:1.5px solid var(--cardBorder); border-radius:var(--r-md); width:100%;}
.field input::placeholder{color:var(--gray500);}
.field input:focus,.field select:focus{outline:none; border-color:var(--blue500);}
.field select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23CBD5E1' stroke-width='2'><path d='M2 5l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position:right 14px center;}
.field select option{color:#000;}
.divider{display:flex; align-items:center; gap:10px; color:var(--gray500); font-size:.78rem; margin:16px 0;}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--cardBorder);}
.socials{display:flex; gap:10px; justify-content:center;}
.social{flex:1; height:50px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; color:var(--navy900); border-radius:var(--r-md); font-weight:700; font-size:1.3rem;}
.social.apple{background:#000; color:#fff;} .social.fb{background:#1877F2; color:#fff;}
.link{color:var(--blue500); font-weight:600; font-size:.85rem; text-align:right; cursor:pointer;}
/* collapsed, clearly-demo login section — keeps "Continue as Guest" the primary path */
.demo-auth{margin-top:6px; border-top:1px solid var(--cardBorder); padding-top:10px;}
.demo-auth>summary{list-style:none; cursor:pointer; text-align:center; color:var(--gray300);
  font-family:var(--head); font-weight:600; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; padding:8px;}
.demo-auth>summary::-webkit-details-marker{display:none;}
.demo-auth>summary::after{content:" ▾"; color:var(--gold400);}
.demo-auth[open]>summary::after{content:" ▴";}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--gray100); line-height:1.45; margin:10px 0;}
.check input{width:22px; height:22px; flex:0 0 auto; margin-top:1px; accent-color:var(--red600);}
.form-error{color:var(--red600); font-weight:700; font-size:.82rem; margin:6px 0;}
h2.screen-title{font-family:var(--display); font-size:1.9rem; text-transform:uppercase; line-height:1; margin-bottom:6px;}
p.screen-sub{color:var(--gray300); font-size:.9rem; line-height:1.5; margin-bottom:16px;}

/* consent bullets */
.consent-list{list-style:none; display:flex; flex-direction:column; gap:12px; margin:8px 0 18px;}
.consent-list li{display:flex; gap:10px; background:var(--card); border:1px solid var(--cardBorder); border-radius:var(--r-md); padding:12px 14px; font-size:.9rem; line-height:1.4;}
.consent-list li::before{content:"⬤"; color:var(--gold400); font-size:.5rem; margin-top:6px;}

/* toggles */
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--cardBorder);}
.toggle-row span{font-size:.9rem; line-height:1.35;}
.toggle-row small{display:block; color:var(--gray500); font-size:.76rem; margin-top:2px;}
.switch{position:relative; width:48px; height:28px; flex:0 0 auto;}
.switch input{opacity:0; width:100%; height:100%;}
.switch .slider{position:absolute; inset:0; background:rgba(255,255,255,.18); border-radius:var(--r-pill); transition:.2s;}
.switch .slider::before{content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
.switch input:checked + .slider{background:var(--success);}
.switch input:checked + .slider::before{transform:translateX(20px);}

/* =========================================================== MAIN (tabs) */
.app-header{display:flex; align-items:center; justify-content:space-between; padding:max(env(safe-area-inset-top),12px) 16px 10px;}
.streak-pill{display:flex; align-items:center; gap:5px; background:rgba(247,201,72,.16); border:1px solid var(--gold400);
  color:var(--gold400); border-radius:var(--r-pill); padding:5px 11px; font-family:var(--num); font-weight:700; font-size:1rem;}
.streak-pill svg{width:15px; height:15px;}
.icon-btn{width:40px; height:40px; border-radius:50%; background:var(--card); border:1px solid var(--cardBorder);
  display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;}
.icon-btn svg{width:20px; height:20px;}
.tab-view{display:none; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 16px 90px;}
.tab-view.active{display:block;}

/* bottom tab bar */
.tabbar{position:absolute; bottom:0; left:0; right:0; display:flex; z-index:30;
  background:rgba(7,26,51,.96); border-top:1px solid var(--cardBorder); backdrop-filter:blur(8px);
  padding-bottom:env(safe-area-inset-bottom);}
.tab-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 0 8px; color:var(--gray500); cursor:pointer;}
.tab-item svg{width:24px; height:24px;}
.tab-item span{font-size:.66rem; font-weight:600; font-family:var(--head); text-transform:uppercase; letter-spacing:.05em;}
.tab-item.active{color:var(--gold400);}

/* cards */
.card{background:var(--card); border:1px solid var(--cardBorder); border-radius:var(--r-lg); padding:16px;}
.section-label{font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:var(--gray300); margin:18px 2px 10px;}

/* home hero */
.hero-card{background:linear-gradient(135deg,var(--red700),var(--red600)); border:none; position:relative; overflow:hidden;}
.hero-card .label{font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; opacity:.85;}
.hero-card h2{font-family:var(--display); font-size:1.8rem; text-transform:uppercase; line-height:1; margin:4px 0 4px;}
.hero-card p{font-size:.82rem; opacity:.9; margin-bottom:14px;}
.hero-card .btn{background:#fff; color:var(--red700); box-shadow:0 5px 0 rgba(0,0,0,.25);}

/* daily matchup card */
.daily-card{display:flex; align-items:center; gap:12px;}
.daily-faces{display:flex;}
.daily-faces .mini{width:46px; height:46px; border-radius:50%; overflow:hidden; background:var(--navy700); border:2px solid var(--navy900); margin-left:-12px;}
.daily-faces .mini:first-child{margin-left:0;}
.daily-faces .mini svg,.daily-faces .mini img{width:100%; height:auto; transform:translateY(4px) scale(1.15);}
.daily-card .info{flex:1;}
.daily-card .info .t{font-family:var(--head); font-weight:600; font-size:.95rem;}
.daily-card .info .s{color:var(--gray300); font-size:.78rem;}

/* mode grid */
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.mode-card{position:relative; background:var(--card); border:1px solid var(--cardBorder); border-radius:var(--r-lg);
  padding:16px 14px; cursor:pointer; overflow:hidden; transition:transform .12s, border-color .2s;}
.mode-card:active{transform:scale(.97);}
.mode-card .ic{width:34px; height:34px; color:var(--gold400); margin-bottom:10px;}
.mode-card .ic svg{width:100%; height:100%;}
.mode-card h3{font-family:var(--head); font-weight:700; font-size:1rem; text-transform:uppercase;}
.mode-card p{color:var(--gray300); font-size:.74rem; margin-top:2px;}
.mode-card.locked{opacity:.6;}
.mode-card .soon{position:absolute; top:10px; right:10px; font-size:.6rem; font-family:var(--head); text-transform:uppercase;
  letter-spacing:.06em; background:rgba(0,0,0,.4); border:1px solid var(--cardBorder); border-radius:var(--r-pill); padding:2px 7px; color:var(--gray300); display:flex; gap:3px; align-items:center;}
.mode-card .soon svg{width:10px; height:10px;}

/* stat strip / cards */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.stat-card{background:var(--card); border:1px solid var(--cardBorder); border-radius:var(--r-md); padding:12px 10px; text-align:center;}
.stat-card .v{font-family:var(--num); font-weight:800; font-size:1.7rem; color:#fff; line-height:1;}
.stat-card.gold .v{color:var(--gold400);}
.stat-card .l{font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gray500); margin-top:4px;}

/* chaos meter */
.meter{height:12px; background:rgba(255,255,255,.1); border-radius:var(--r-pill); overflow:hidden; margin-top:8px; display:flex;}
.meter i{height:100%;}

/* =========================================================== GAME (arcade stage) */
.game{background:linear-gradient(180deg,#103159 0%, #0b1d3c 55%, #081428 100%);}

/* HUD: clean score / timer / combo cards */
.hud{display:flex; gap:8px; justify-content:center; align-items:stretch;
  padding:max(env(safe-area-inset-top),10px) 12px 10px 56px; background:rgba(7,26,51,.96);
  border-bottom:2px solid rgba(247,201,72,.4); color:#fff;}
.hud .it{flex:1; max-width:128px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px;
  background:rgba(255,255,255,.05); border:1px solid rgba(247,201,72,.3); border-radius:12px;}
.hud .lab{font-size:.58rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gray300); font-family:var(--head);}
.hud .val{font-family:var(--num); font-weight:800; font-size:1.7rem; line-height:1;}
.hud .it.score{border-color:rgba(247,201,72,.7);}
.hud .it.score .val{color:var(--gold400);}

/* live tally */
.tally{display:flex; gap:8px; padding:8px 12px; background:rgba(7,26,51,.96);}
.tally-row{flex:1;}
.tally-top{display:flex; justify-content:space-between; font-size:.66rem; font-weight:700; color:#fff; margin-bottom:3px; font-family:var(--head); text-transform:uppercase;}
.tally-bar{height:8px; background:rgba(255,255,255,.16); border-radius:var(--r-pill); overflow:hidden;}
.tally-fill{height:100%; width:0; border-radius:var(--r-pill); transition:width .25s;}

/* the play stage: bunting + spotlight glow + star field behind the podiums */
.arena{flex:1; position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr;
  gap:clamp(6px,2vw,16px); padding:22px clamp(8px,3vw,18px) clamp(10px,3vw,20px);
  background:
    radial-gradient(46% 36% at 24% 22%, rgba(43,93,176,.42), transparent 70%),
    radial-gradient(46% 36% at 76% 22%, rgba(200,16,46,.34), transparent 70%),
    radial-gradient(2px 2px at 16% 30%, rgba(247,201,72,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 24%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(2px 2px at 48% 42%, rgba(247,201,72,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 46%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 32% 54%, rgba(255,255,255,.35), transparent 60%);}
.arena::before{content:""; position:absolute; top:0; left:0; right:0; height:10px; z-index:1; opacity:.9;
  background:repeating-linear-gradient(90deg,#c8102e 0 14px,#f4f4f4 14px 28px,#2a5db0 28px 42px);
  border-bottom:2px solid rgba(247,201,72,.5);}

.spot{position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; --lm-h:clamp(64px,14vw,108px);}
/* podium matches the Welcome stage podiums */
.podium-stage{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:92%; height:var(--lm-h); z-index:3;
  background:linear-gradient(180deg,#1f3e72,#0f2347); border-radius:10px 10px 6px 6px;
  border:1px solid rgba(247,201,72,.5); box-shadow:0 6px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  pointer-events:none; display:flex; align-items:flex-end; justify-content:center;}
.podium-stage .seal{width:26%; max-width:30px; margin-bottom:18px; opacity:.85;}
/* integrated name plate */
.lm-label{position:absolute; bottom:8px; font-size:.55rem; font-weight:700; color:var(--gold400); z-index:4;
  text-shadow:0 1px 2px rgba(0,0,0,.6); font-family:var(--head); text-transform:uppercase; letter-spacing:.05em;}
/* big, obvious poke zones */
.head{position:absolute; bottom:calc(var(--lm-h)*0.72); left:50%; width:clamp(76px,21vw,128px); height:clamp(76px,21vw,128px);
  transform:translate(-50%,150%) scale(.9); z-index:2; transition:transform .16s cubic-bezier(.34,1.56,.64,1); cursor:pointer; will-change:transform;}
.head.up{transform:translate(-50%,0) scale(1);}
/* playful "boing" pop — no rotation/recoil so it never reads as impact */
.head.poked{transform:translate(-50%,-6px) scale(1.16);}
.head svg,.head img{width:100%; height:auto; pointer-events:none; filter:drop-shadow(0 6px 6px rgba(0,0,0,.4));}
.cand-img{width:100%; height:auto; display:block;}
.confetti{position:absolute; width:8px; height:8px; border-radius:2px; z-index:8; pointer-events:none; animation:confettiFly .8s ease-out forwards;}
@keyframes confettiFly{0%{opacity:1; transform:translate(-50%,-50%) rotate(0)}100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot))}}
.pop{position:absolute; z-index:6; font-family:var(--display); font-size:1.5rem; color:#fff; text-shadow:0 2px 5px rgba(0,0,0,.5); pointer-events:none; animation:popUp .7s ease-out forwards;}
@keyframes popUp{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1;transform:translate(-50%,-12px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-58px) scale(1)}}
.countdown{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(7,26,51,.55); z-index:20;}
.countdown[hidden]{display:none !important;}
.countdown span{font-family:var(--display); font-size:30vw; color:#fff; text-shadow:0 6px 0 rgba(0,0,0,.25); animation:cd .7s ease-in-out;}
@keyframes cd{0%{transform:scale(.4);opacity:0}30%{opacity:1}100%{transform:scale(1.3);opacity:0}}
.game-quit{position:absolute; top:max(env(safe-area-inset-top),12px); left:12px; z-index:25; width:36px; height:36px; border-radius:50%; background:rgba(7,26,51,.7); border:1px solid rgba(247,201,72,.5); color:#fff; font-size:1.05rem; line-height:1; cursor:pointer;}

/* =========================================================== COMING SOON */
.soon-inner{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px;}
.soon-ic{width:60px; height:60px; color:var(--gold400);}
.soon-ic svg{width:100%; height:100%;}
.soon .btn{max-width:300px;}

/* =========================================================== HEAD TO HEAD */
.h2h{align-items:center;}
.h2h .scroll{display:flex; flex-direction:column; gap:14px;}
.h2h-cards{display:flex; gap:12px; align-items:stretch; position:relative;}
.cand-card{flex:1; min-width:0; background:var(--card); border:2px solid var(--cardBorder); border-radius:var(--r-lg); padding:16px 10px; text-align:center; cursor:pointer; transition:transform .12s, border-color .2s, background .2s;}
.cand-card .art svg, .cand-card .art img{display:block; width:100%; height:auto;}
.cand-card:active{transform:scale(.97);}
.cand-card.sel{border-color:var(--gold400); background:rgba(247,201,72,.1);}
.cand-card .art{width:78%; margin:0 auto 8px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));}
.cand-card .nm{font-family:var(--head); font-weight:700; font-size:1.05rem;}
.cand-card .meta{font-size:.72rem; color:var(--gray300);}
.cand-card .pct{font-family:var(--num); font-weight:800; font-size:1.8rem; margin-top:6px; display:none;}
.h2h.revealed .cand-card .pct{display:block;}
.vs-badge{align-self:center; font-family:var(--display); color:var(--gold400); font-size:1.4rem; padding:0 2px;}

/* =========================================================== ROUND RESULTS */
.results .scroll{display:flex; flex-direction:column; gap:8px; text-align:center;}
.winner-name{font-family:var(--display); font-size:2.1rem; text-transform:uppercase; line-height:1;}
.winner-art{width:130px; margin:6px auto; filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));}
.rb{ text-align:left; margin:5px 0;}
.rb-top{display:flex; justify-content:space-between; font-size:.85rem; font-weight:700; margin-bottom:4px; font-family:var(--head);}
.rb-bar{height:14px; background:rgba(255,255,255,.12); border-radius:var(--r-pill); overflow:hidden;}
.rb-fill{height:100%; width:0; border-radius:var(--r-pill); transition:width .6s cubic-bezier(.22,1,.36,1);}
.rr-stats{display:flex; justify-content:space-around; margin:10px 0;}
.rr-stats div{display:flex; flex-direction:column;}
.rr-stats .v{font-family:var(--num); font-weight:800; font-size:1.7rem; color:var(--gold400);}
.rr-stats .l{font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gray500);}
.rr-actions{display:flex; gap:10px; margin-top:6px;}

/* =========================================================== RESULTS TAB */
.seg-tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
.seg-tab{flex:0 0 auto; padding:7px 14px; border-radius:var(--r-pill); background:var(--card); border:1px solid var(--cardBorder); font-size:.78rem; font-weight:600; color:var(--gray300); cursor:pointer; white-space:nowrap; font-family:var(--head); text-transform:uppercase; letter-spacing:.03em;}
.seg-tab.active{background:var(--gold400); color:var(--navy900); border-color:var(--gold400);}
.lb-row{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--cardBorder); border-radius:var(--r-md); padding:10px 12px; margin-bottom:8px;}
.lb-rank{font-family:var(--display); font-size:1.3rem; color:var(--gold400); width:24px; text-align:center;}
.lb-face{width:42px; height:42px; border-radius:50%; overflow:hidden; background:var(--navy700); flex:0 0 auto;}
.lb-face svg,.lb-face img{width:100%; height:auto; transform:translateY(3px) scale(1.15);}
.lb-info{flex:1;}
.lb-info .nm{font-family:var(--head); font-weight:700; font-size:.95rem;}
.lb-bar{height:6px; background:rgba(255,255,255,.12); border-radius:var(--r-pill); margin-top:4px; overflow:hidden;}
.lb-bar i{display:block; height:100%; border-radius:var(--r-pill);}
.lb-pct{font-family:var(--num); font-weight:800; font-size:1.3rem;}
.total-pokes{text-align:center; padding:14px;}
.total-pokes .v{font-family:var(--num); font-weight:800; font-size:2.4rem; color:var(--gold400);}
.total-pokes .l{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gray500);}

/* state results */
.state-pick{display:flex; gap:10px; align-items:center; margin-bottom:14px;}
.state-pick select{flex:1;}

/* =========================================================== PROFILE */
.prof-head{display:flex; align-items:center; gap:14px; margin:6px 0 16px;}
.prof-avatar{width:64px; height:64px; border-radius:50%; background:var(--navy700); border:2px solid var(--gold400); display:flex; align-items:center; justify-content:center; color:var(--gold400);}
.prof-avatar svg{width:34px; height:34px;}
.prof-head .lvl{font-family:var(--head); font-weight:700; font-size:1.2rem;}
.prof-head .lvlnum{color:var(--gold400); font-size:.8rem; font-family:var(--num); font-weight:700;}
.level-bar{height:8px; background:rgba(255,255,255,.12); border-radius:var(--r-pill); overflow:hidden; margin-top:6px;}
.level-bar i{display:block; height:100%; background:var(--gold400); border-radius:var(--r-pill);}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat-grid .stat-card{text-align:left;}
.ach-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.ach{background:var(--card); border:1px solid var(--cardBorder); border-radius:var(--r-md); padding:12px 8px; text-align:center; opacity:.4;}
.ach.earned{opacity:1; border-color:var(--gold400);}
.ach .badge{width:40px; height:40px; margin:0 auto 6px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(247,201,72,.16); color:var(--gold400);}
.ach .badge svg{width:22px; height:22px;}
.ach .t{font-size:.66rem; font-weight:700; line-height:1.2;}
.ach-badge{width:48px; height:48px; margin:0 auto 6px; display:block;}
.ach:not(.earned) .ach-badge{filter:grayscale(1);}

/* =========================================================== RESPONSIVE */
@media(min-width:720px){
  .screen{max-width:560px;}
  .arena{max-width:560px; margin:0 auto; width:100%;}
  .hud .val{font-size:2.1rem;}
}

/* =========================================================== ABOUT / DISCLAIMER modal */
.modal{position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(7,26,51,.78); backdrop-filter:blur(3px);}
.modal[hidden]{display:none;}
.modal-card{position:relative; width:100%; max-width:420px; max-height:86%; overflow-y:auto;
  background:linear-gradient(180deg,#15294e,#0c1c38); border:1px solid rgba(247,201,72,.5); border-radius:20px;
  padding:24px 20px 20px; box-shadow:0 20px 50px rgba(0,0,0,.55);}
.modal-close{position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--cardBorder); color:#fff; cursor:pointer; font-size:.95rem; line-height:1;}
.modal-title{font-family:var(--display); font-size:1.7rem; color:#fff; text-transform:uppercase; line-height:1; margin-bottom:6px;}
.modal-tag{color:var(--gold400); font-family:var(--head); font-weight:600; letter-spacing:.04em; font-size:.9rem; margin-bottom:16px;}
.modal-list{list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:18px;}
.modal-list li{position:relative; padding-left:22px; font-size:.9rem; line-height:1.5; color:var(--gray100);}
.modal-list li::before{content:"★"; position:absolute; left:0; top:2px; color:var(--gold400); font-size:.72rem;}
.modal-list strong{color:#fff;}