/* ===========================================================
   PokeToVote — sitewide styles
   Patriotic arcade carnival. Mobile-first. Bright but polished.
   Palette + type mirror the PokeAPrez brand tokens.
   =========================================================== */

:root{
  --navy900:#071A33; --navy800:#0B2545; --navy700:#12355B; --navy600:#17428A;
  --red600:#D72638; --red700:#B91C2B;
  --blue500:#2F80ED; --blue600:#1E40AF;
  --gold400:#F7C948; --gold500:#F59E0B;
  --green:#22C55E; --sky:#38BDF8;
  --white:#FFFFFF; --offWhite:#F8FAFC; --cream:#FFF7E6;
  --ink:#0F172A; --inkSoft:#475569;
  --gray100:#EEF2F7; --gray300:#CBD5E1; --gray500:#64748B; --gray800:#1E293B;

  --card:rgba(255,255,255,.06);
  --cardBorder:rgba(255,255,255,.14);

  --bg-app:radial-gradient(1200px 600px at 50% -10%, #143b7e 0%, transparent 60%),
           linear-gradient(180deg,#071A33 0%,#0B2545 45%,#020617 100%);
  --bg-gold:linear-gradient(180deg,#FBD34D 0%,#F59E0B 100%);
  --bg-red:linear-gradient(180deg,#EF4444 0%,#D72638 100%);

  --display:'Anton',Impact,sans-serif;
  --arcade:'Bungee','Anton',Impact,system-ui,sans-serif;
  --head:'Oswald',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --num:'Oswald','Barlow Condensed',sans-serif;  /* scoreboard digits — clean, unambiguous (Orbitron's slashed 0 read as a box) */

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --shadow-card:0 18px 44px rgba(2,6,23,.34);
  --shadow-gold:0 6px 0 #92580c, 0 16px 26px rgba(2,6,23,.32);
  --shadow-red:0 6px 0 #7f1010, 0 16px 26px rgba(2,6,23,.30);
  --maxw:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); color:var(--offWhite);
  background:var(--bg-app); background-attachment:fixed;
  min-height:100vh; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{margin:0 0 .4em; line-height:1.04; letter-spacing:.5px}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.center{text-align:center}
.muted{color:var(--gray300)}

/* decorative star bunting strip */
.bunting{
  height:10px;
  background:repeating-linear-gradient(90deg,var(--red600) 0 24px,var(--white) 24px 48px,var(--blue500) 48px 72px);
  opacity:.9;
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-family:var(--arcade); font-size:1rem; letter-spacing:.5px;
  padding:.85em 1.5em; border-radius:var(--r-pill); border:0; cursor:pointer;
  text-transform:uppercase; transition:transform .08s ease, filter .15s ease;
  color:var(--ink);
}
.btn:active{transform:translateY(3px)}
.btn-gold{background:var(--bg-gold); color:#3a2400; box-shadow:var(--shadow-gold)}
.btn-red{background:var(--bg-red); color:#fff; box-shadow:var(--shadow-red)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:2px solid var(--cardBorder); box-shadow:none}
.btn-ghost:hover{filter:brightness(1.15)}
.btn-sm{font-size:.82rem; padding:.6em 1.1em}
.btn[disabled]{opacity:.5; cursor:not-allowed}

.badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--head); font-weight:600; font-size:.72rem; letter-spacing:1px;
  text-transform:uppercase; padding:.3em .7em; border-radius:var(--r-pill);
}
.badge-live{background:var(--green); color:#04210f}
.badge-soon{background:rgba(255,255,255,.12); color:var(--gray300); border:1px solid var(--cardBorder)}

/* ---------------- header / nav ---------------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(7,26,51,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cardBorder);
  padding-top:env(safe-area-inset-top);
}
.nav{display:flex; align-items:center; gap:14px; height:62px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--arcade); font-size:1.15rem}
.brand .dot{color:var(--gold400)}
.brand b{color:#fff}
.brand .tv-poke{color:#fff}
.brand .tv-to{color:var(--gold400)}
.brand .tv-vote{color:var(--red600)}
.nav-links{display:flex; gap:6px; margin-left:auto; align-items:center; flex-wrap:wrap}
.nav-links a{
  font-family:var(--head); font-weight:500; font-size:.92rem; color:var(--gray300);
  padding:.4em .7em; border-radius:var(--r-sm);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff; background:rgba(255,255,255,.08)}
.nav-cta{margin-left:4px}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer}

@media (max-width:760px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--navy800); border-bottom:1px solid var(--cardBorder);
    padding:10px 16px 16px; gap:4px; display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.7em .8em}
  .nav-cta{margin:6px 0 0}
}

/* ---------------- hero ---------------- */
.hero{position:relative; overflow:hidden; padding:54px 0 30px; text-align:center}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(247,201,72,.18), transparent 70%) 20% 30%/40% 60% no-repeat,
    radial-gradient(closest-side, rgba(47,128,237,.18), transparent 70%) 85% 20%/45% 70% no-repeat;
}
.hero-kicker{font-family:var(--head); letter-spacing:3px; text-transform:uppercase; color:var(--gold400); font-size:.8rem; margin-bottom:8px}
.hero h1{font-family:var(--display); font-size:clamp(2.8rem,9vw,5.4rem); line-height:.92; text-shadow:0 4px 0 rgba(2,6,23,.4)}
.hero h1 .tv-to{color:var(--gold400)} .hero h1 .tv-vote{color:var(--red600)}
.hero-sub{max-width:620px; margin:14px auto 4px; color:var(--gray100); font-size:1.08rem}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:22px 0 12px}
.hero-fine{font-size:.82rem; color:var(--gray300); max-width:540px; margin:0 auto; font-style:italic}
.forecast-pill{
  display:inline-block; margin-top:18px; font-family:var(--head); letter-spacing:1px;
  background:rgba(255,255,255,.08); border:1px dashed var(--cardBorder);
  padding:.5em 1.1em; border-radius:var(--r-pill); color:var(--gold400); font-size:.85rem;
}

/* ---------------- section scaffolding ---------------- */
.section{padding:46px 0}
.section-head{text-align:center; margin-bottom:30px}
.section-head h2{font-family:var(--display); font-size:clamp(1.9rem,5vw,3rem)}
.section-head p{color:var(--gray300); max-width:560px; margin:0 auto}
.eyebrow{font-family:var(--head); letter-spacing:2px; text-transform:uppercase; color:var(--sky); font-size:.78rem; margin-bottom:6px}

/* ---------------- featured game ---------------- */
.featured{
  background:linear-gradient(135deg, rgba(215,38,56,.16), rgba(47,128,237,.16));
  border:1px solid var(--cardBorder); border-radius:var(--r-xl);
  padding:30px; display:grid; grid-template-columns:1.1fr 1fr; gap:26px; align-items:center;
  box-shadow:var(--shadow-card);
}
.featured h3{font-family:var(--display); font-size:clamp(2rem,5vw,3.2rem)}
.featured .featured-copy p{color:var(--gray100)}
.featured .roster{display:flex; gap:10px; margin:16px 0; flex-wrap:wrap}
.featured .roster img{
  width:84px; height:84px; object-fit:contain; object-position:bottom;
  background:radial-gradient(closest-side, rgba(255,255,255,.14), transparent);
  border-radius:var(--r-md);
}
.featured .featured-art{
  display:flex; align-items:flex-end; justify-content:center; gap:6px;
  background:var(--bg-red); border-radius:var(--r-lg); padding:18px 10px 0; min-height:230px;
  position:relative; overflow:hidden;
}
.featured .featured-art::after{content:''; position:absolute; bottom:0; left:0; right:0; height:34px; background:var(--navy900)}
.featured .featured-art img{width:33%; max-width:140px; object-fit:contain; object-position:bottom; position:relative; z-index:1}
@media (max-width:760px){.featured{grid-template-columns:1fr; padding:22px} .featured .featured-art{order:-1; min-height:180px}}

/* ---------------- game card grid ---------------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:880px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.grid{grid-template-columns:1fr}}

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--cardBorder); border-radius:var(--r-lg);
  padding:20px; overflow:hidden; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translateY(-4px); border-color:var(--gold400); box-shadow:var(--shadow-card)}
.card::before{content:''; position:absolute; inset:0 0 auto 0; height:5px; background:var(--accent,var(--gold400))}
.card .card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.card .emoji{font-size:1.9rem; line-height:1}
.card h3{font-family:var(--arcade); font-size:1.18rem; margin:6px 0 2px}
.card .card-tag{font-family:var(--head); color:var(--gold400); font-size:.82rem; letter-spacing:.5px; margin-bottom:8px}
.card p{color:var(--gray300); font-size:.92rem; flex:1}
.card .card-foot{margin-top:14px}

/* ---------------- how it works ---------------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.steps{grid-template-columns:1fr}}
.step{background:var(--card); border:1px solid var(--cardBorder); border-radius:var(--r-lg); padding:20px; text-align:center}
.step .step-n{
  width:46px; height:46px; margin:0 auto 12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1.4rem; color:#3a2400; background:var(--bg-gold); box-shadow:var(--shadow-gold);
}
.step h3{font-family:var(--head); font-size:1.05rem}
.step p{color:var(--gray300); font-size:.9rem; margin:0}

/* ---------------- coming next ---------------- */
.next-panel{
  background:var(--card); border:1px solid var(--cardBorder); border-radius:var(--r-xl); padding:30px; text-align:center;
}
.next-panel ul{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.next-panel li{font-family:var(--head); font-size:.85rem; background:rgba(255,255,255,.06); border:1px solid var(--cardBorder); padding:.4em .8em; border-radius:var(--r-pill); color:var(--gray100)}

/* ---------------- footer ---------------- */
.site-footer{border-top:1px solid var(--cardBorder); background:rgba(2,6,23,.5); margin-top:30px}
.footer-grid{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; padding:34px 0 10px}
.footer-grid .f-brand{max-width:280px}
.footer-grid .f-brand .brand{font-size:1.3rem; margin-bottom:8px}
.footer-cols{display:flex; gap:46px; flex-wrap:wrap}
.footer-cols h4{font-family:var(--head); text-transform:uppercase; letter-spacing:1px; font-size:.8rem; color:var(--gold400); margin:0 0 10px}
.footer-cols a{display:block; color:var(--gray300); font-size:.9rem; padding:3px 0}
.footer-cols a:hover{color:#fff}
.footer-disclaimer{font-size:.78rem; color:var(--gray500); border-top:1px solid var(--cardBorder); padding:16px 0 26px; line-height:1.6}
.footer-disclaimer b{color:var(--gray300)}

/* ===========================================================
   WHACK-A-MOLE GAME (reusable engine UI)
   =========================================================== */
.game-shell{max-width:640px; margin:0 auto; padding:18px 16px 60px}
.game-head{text-align:center; margin-bottom:14px}
.game-head h1{font-family:var(--display); font-size:clamp(2rem,7vw,3rem)}
.game-head .game-sub{color:var(--gray300); margin-top:-2px}

.scoreboard{
  display:flex; gap:10px; justify-content:center; margin:14px 0;
  font-family:var(--num); font-weight:700;
}
.score-chip{
  background:var(--bg-scoreboard,linear-gradient(180deg,#020617,#071A33));
  border:1px solid var(--cardBorder); border-radius:var(--r-md);
  padding:8px 16px; text-align:center; min-width:92px;
}
.score-chip .label{display:block; font-family:var(--head); font-size:.65rem; letter-spacing:1px; color:var(--gray500); text-transform:uppercase}
.score-chip .val{font-size:1.7rem; color:var(--gold400); line-height:1.1}
.score-chip.time .val{color:var(--sky)}

/* tally bars per candidate */
.tally{margin:12px 0 18px; display:flex; flex-direction:column; gap:8px}
.tally-row{display:grid; grid-template-columns:74px 1fr 38px; align-items:center; gap:10px; font-family:var(--head)}
.tally-row .t-name{font-size:.85rem; color:var(--gray100); text-align:right}
.tally-row .t-bar{height:14px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); overflow:hidden}
.tally-row .t-fill{height:100%; width:0; border-radius:var(--r-pill); transition:width .35s ease; background:var(--accent,var(--gold400))}
.tally-row .t-num{font-family:var(--num); font-size:.95rem; color:#fff; text-align:left}

/* board of holes */
.board{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  background:linear-gradient(180deg,#0c2c63,#071a33);
  border:1px solid var(--cardBorder); border-radius:var(--r-xl);
  padding:18px; box-shadow:var(--shadow-card); position:relative;
}
@media (max-width:520px){.board{gap:10px; padding:12px}}
.hole{
  position:relative; aspect-ratio:3/4; border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25));
  overflow:hidden; cursor:pointer; -webkit-tap-highlight-color:transparent;
  border:2px solid rgba(255,255,255,.06);
}
/* podium base in each hole */
.hole .podium{
  position:absolute; left:8%; right:8%; bottom:0; height:30%;
  background:linear-gradient(180deg,#15428a,#0b2545);
  border-top-left-radius:8px; border-top-right-radius:8px;
  border:2px solid rgba(247,201,72,.35); border-bottom:0;
  z-index:2;
}
.hole .podium::after{content:'★'; position:absolute; top:6px; left:50%; transform:translateX(-50%); color:var(--gold400); font-size:.8rem}
.hole .stage-light{position:absolute; inset:0; background:radial-gradient(closest-side at 50% 120%, rgba(247,201,72,.18), transparent 70%); pointer-events:none}

.candidate{
  position:absolute; left:6%; right:6%; bottom:-100%; z-index:3;
  display:flex; align-items:flex-end; justify-content:center;
  transition:bottom .22s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.candidate img{width:100%; height:auto; max-height:170px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.hole.up .candidate{bottom:18%}
.hole .name-tag{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%); z-index:4;
  font-family:var(--head); font-size:.7rem; letter-spacing:.5px; color:#fff;
  background:rgba(2,6,23,.7); padding:.1em .6em; border-radius:var(--r-pill); white-space:nowrap;
  opacity:0; transition:opacity .2s;
}
.hole.up .name-tag{opacity:1}

/* poke pop feedback */
.pop{position:absolute; z-index:6; font-family:var(--display); font-size:1.4rem; color:var(--gold400); pointer-events:none; animation:popUp .7s ease forwards; text-shadow:0 2px 0 rgba(2,6,23,.5)}
@keyframes popUp{0%{transform:translateY(0) scale(.6); opacity:0}20%{opacity:1}100%{transform:translateY(-46px) scale(1.2); opacity:0}}
.hole.poked{animation:wobble .4s ease}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

/* confetti */
.confetti{position:fixed; top:-10px; width:9px; height:14px; z-index:60; pointer-events:none; border-radius:2px; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg); opacity:.2}}

/* game controls + overlay */
.game-controls{display:flex; gap:12px; justify-content:center; margin:18px 0}
.game-overlay{
  position:absolute; inset:0; z-index:10; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:10px; padding:24px;
  background:rgba(7,26,51,.92); backdrop-filter:blur(3px); border-radius:var(--r-xl);
}
.game-overlay h2{font-family:var(--display); font-size:clamp(1.6rem,6vw,2.6rem)}
.game-overlay p{color:var(--gray100); max-width:340px}
.game-overlay .winner{font-family:var(--arcade); color:var(--gold400); font-size:1.3rem}
.board-wrap{position:relative}
.cheer-pick{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px 0}
.cheer-pick button{
  font-family:var(--head); background:rgba(255,255,255,.08); border:2px solid var(--cardBorder);
  color:#fff; border-radius:var(--r-pill); padding:.4em 1em; cursor:pointer; font-size:.85rem;
}
.cheer-pick button.sel{background:var(--bg-gold); color:#3a2400; border-color:transparent}

.game-disclaimer{font-size:.78rem; color:var(--gray500); text-align:center; margin-top:22px; font-style:italic}
.full-game-link{text-align:center; margin-top:18px}

/* ===========================================================
   COMING-SOON + CONTENT PAGES
   =========================================================== */
.coming-hero{text-align:center; padding:60px 0 30px; position:relative}
.coming-hero .emoji{font-size:4rem}
.coming-hero h1{font-family:var(--display); font-size:clamp(2.4rem,8vw,4rem)}
.coming-hero .game-tag{font-family:var(--head); color:var(--gold400); letter-spacing:1px; text-transform:uppercase}
.coming-hero p{max-width:560px; margin:14px auto; color:var(--gray100)}
.notify-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px}

.content{max-width:760px; margin:0 auto; padding:40px 20px 60px}
.content h1{font-family:var(--display); font-size:clamp(2.2rem,7vw,3.4rem)}
.content h2{font-family:var(--head); font-size:1.4rem; margin-top:1.6em; color:var(--gold400)}
.content p,.content li{color:var(--gray100)}
.content a{color:var(--sky); text-decoration:underline}
.content .callout{background:var(--card); border:1px solid var(--cardBorder); border-left:4px solid var(--gold400); border-radius:var(--r-md); padding:16px 18px; margin:18px 0}
.content ul{padding-left:1.2em}

.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:8px; top:8px; position:fixed; z-index:99; background:var(--gold400); color:#3a2400; padding:.5em 1em; border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}