/* kicker.css — Captain Vector's Kicking Tower (Bank It or Boot It).
   Self-contained press-your-luck place-kicking game. Mobile-first 390px.
   Palette + polish bar matched to oak.css (spring easing, layered shadow +
   inset highlight + glow, hard ink offset). Canvas does pitch/physics/shatter;
   this CSS owns HUD / choice / overlays / temptation pulse / ash-miss. */

:root{
  --electric:#3CE2A5;
  --electric-d:#1FB985;
  --crimson:#E63946;
  --gold-cup:#FFC93C;
  --gold-d:#F59E0B;
  --midnight:#1A2B4A;
  --midnight-2:#22386A;
  --ink:#0B0F1A;
  --paper:#EAF2FF;
  --muted:#8FA4C7;
  --line:rgba(96,140,200,.28);
  --spring:cubic-bezier(.2,1.4,.4,1);
  --pulse-amp:0;        /* JS writes 0..1 — drives BANK button temptation */
  --pulse-speed:1.6s;   /* JS shortens as pot climbs */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;}
[hidden]{display:none!important;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--paper);background:var(--ink);
  -webkit-font-smoothing:antialiased;touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
:focus-visible{outline:3px solid var(--electric);outline-offset:2px;}

/* ===================== APP SHELL (screen-shake target) ===================== */
.kicker-app{position:fixed;inset:0;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0E1424,var(--ink));overflow:hidden;
  will-change:transform,filter;transition:filter .22s ease;}
.kicker-app.frozen{filter:saturate(0) brightness(.86);}          /* post-rattle freeze */
.kicker-app.ash{filter:saturate(.05) brightness(.5) contrast(.9);transition:filter .9s ease;}
.kicker-app.chroma{animation:chroma .32s ease;}
@keyframes chroma{0%{filter:hue-rotate(28deg) saturate(2);}100%{filter:none;}}

#stage{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7;}

/* ===================== HUD (top) ===================== */
.hud{position:relative;z-index:4;display:flex;align-items:center;gap:8px;padding:10px 11px;
  background:linear-gradient(180deg,rgba(11,15,26,.82),rgba(11,15,26,0));pointer-events:none;}
.hud .stat{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:12px;
  background:rgba(26,43,74,.78);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font-family:'Bungee',sans-serif;font-size:13px;white-space:nowrap;backdrop-filter:blur(3px);}
.hud .stat .ico{font-size:15px;line-height:1;}
.hud .stat.banked{color:var(--gold-cup);}
.hud .stat.banked .num{transition:transform .4s var(--spring);}
.hud .stat.banked.bump .num{transform:scale(1.35);}
.hud .stat.best{color:var(--electric);font-size:11px;padding:6px 9px;}
.hud .spacer{flex:1;}
.backlink{pointer-events:auto;display:inline-flex;align-items:center;gap:5px;color:var(--muted);text-decoration:none;
  font-family:'Bungee',sans-serif;font-size:10.5px;letter-spacing:.3px;padding:8px 11px;border-radius:11px;
  border:2px solid var(--ink);background:rgba(26,43,74,.78);box-shadow:3px 3px 0 var(--ink);min-height:40px;}
.mutebtn{pointer-events:auto;width:42px;height:42px;border:2px solid var(--ink);border-radius:12px;cursor:pointer;
  background:rgba(26,43,74,.78);color:var(--paper);font-size:19px;display:grid;place-items:center;
  box-shadow:3px 3px 0 var(--ink);}
.mutebtn.muted{color:var(--gold-cup);background:rgba(255,201,60,.16);}

/* ===================== POT METER (centre top) ===================== */
.potmeter{position:relative;z-index:4;margin:2px auto 0;text-align:center;pointer-events:none;
  transition:transform .35s var(--spring);}
.potmeter .mult{font-family:'Bungee',sans-serif;font-size:54px;line-height:.92;letter-spacing:1px;
  color:var(--gold-cup);text-shadow:0 0 18px rgba(255,201,60,.6),4px 4px 0 var(--ink);}
.potmeter .mult.pop{animation:multpop .5s var(--spring);}
@keyframes multpop{0%{transform:scale(1);}45%{transform:scale(1.32) rotate(-3deg);}100%{transform:scale(1) rotate(0);}}
.potmeter .pot{font-family:'Bungee',sans-serif;font-size:16px;color:var(--paper);margin-top:1px;
  text-shadow:2px 2px 0 var(--ink);}
.potmeter .pot .coin{color:var(--gold-cup);}
.potmeter .rung{font-size:10.5px;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase;
  font-family:'Bungee',sans-serif;margin-top:3px;}

/* ===================== CONTROL DECK (bottom) ===================== */
.deck{position:relative;z-index:4;margin-top:auto;padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(11,15,26,.92),rgba(11,15,26,0));pointer-events:none;}
.deck .coach{display:flex;align-items:center;gap:9px;margin-bottom:11px;min-height:48px;}
.deck .coach .who{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(26,43,74,.85);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);overflow:hidden;}
.deck .coach .who img{width:38px;height:38px;}
.deck .coach .bubble{flex:1;font-size:13.5px;line-height:1.32;color:var(--paper);font-weight:600;font-style:italic;
  background:rgba(26,43,74,.7);border:2px solid var(--ink);border-radius:13px;padding:9px 13px;box-shadow:3px 3px 0 var(--ink);}
.deck .coach .bubble b{font-style:normal;color:var(--electric);}

.actionbtn{pointer-events:auto;width:100%;min-height:74px;border:2.5px solid var(--ink);border-radius:18px;cursor:pointer;
  font-family:'Bungee',sans-serif;font-size:21px;letter-spacing:.5px;color:#04130E;
  background:linear-gradient(135deg,var(--electric),var(--electric-d));
  box-shadow:5px 6px 0 var(--ink),0 0 22px rgba(60,226,165,.45);
  transition:transform .09s,box-shadow .09s;display:flex;align-items:center;justify-content:center;gap:10px;}
.actionbtn:active{transform:translate(2px,3px);box-shadow:3px 3px 0 var(--ink);}
.actionbtn .sub{display:block;font-size:11px;letter-spacing:.4px;opacity:.8;}
.actionbtn.aim{background:linear-gradient(135deg,#7FB2FF,#3E6DD6);color:#04101F;box-shadow:5px 6px 0 var(--ink),0 0 22px rgba(96,140,200,.45);}
.actionbtn.power{background:linear-gradient(135deg,var(--gold-cup),var(--gold-d));color:#241600;box-shadow:5px 6px 0 var(--ink),0 0 22px rgba(255,201,60,.5);}

/* ===================== CHOICE (BANK / BOOT) ===================== */
.choice{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;justify-content:flex-end;
  gap:0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(11,15,26,.88) 30%,rgba(11,15,26,.15));}
.choice.show{display:flex;animation:choiceFade .25s ease;}
@keyframes choiceFade{from{opacity:0;}to{opacity:1;}}
.choice .lines{text-align:center;margin-bottom:16px;}
.choice .vline,.choice .bline{font-size:14px;line-height:1.4;margin:5px 0;font-weight:700;font-style:italic;
  animation:lineIn .4s var(--spring) both;}
.choice .vline{color:var(--crimson);}                 /* Vector: "send it." */
.choice .vline::before{content:'⚡ ';}
.choice .bline{color:var(--electric);animation-delay:.12s;}   /* Boots: "bank it, genius." */
.choice .bline::before{content:'🏉 ';}
@keyframes lineIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.bankbtn{pointer-events:auto;width:100%;min-height:84px;border:3px solid var(--ink);border-radius:20px;cursor:pointer;
  font-family:'Bungee',sans-serif;font-size:26px;letter-spacing:.5px;color:#241600;position:relative;
  background:linear-gradient(135deg,var(--gold-cup),var(--gold-d));
  /* base size + temptation: scale & glow read --pulse-amp (0..1) */
  transform:scale(calc(1 + .14 * var(--pulse-amp)));
  box-shadow:5px 6px 0 var(--ink),0 0 calc(18px + 34px * var(--pulse-amp)) rgba(255,201,60,calc(.4 + .55 * var(--pulse-amp)));
  animation:pulseGold var(--pulse-speed) ease-in-out infinite;
  transition:transform .3s var(--spring);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transform-origin:center bottom;margin-bottom:12px;}
.bankbtn .amt{font-size:15px;letter-spacing:.3px;color:#3a2600;}
.bankbtn:active{transform:scale(calc(1 + .14 * var(--pulse-amp))) translateY(3px);}
@keyframes pulseGold{
  0%,100%{box-shadow:5px 6px 0 var(--ink),0 0 calc(18px + 30px * var(--pulse-amp)) rgba(255,201,60,calc(.38 + .5 * var(--pulse-amp)));}
  50%{box-shadow:5px 6px 0 var(--ink),0 0 calc(26px + 52px * var(--pulse-amp)) rgba(255,201,60,calc(.6 + .4 * var(--pulse-amp)));
    filter:brightness(calc(1 + .12 * var(--pulse-amp)));}
}
.bootbtn{pointer-events:auto;width:100%;min-height:62px;border:3px solid var(--ink);border-radius:18px;cursor:pointer;
  font-family:'Bungee',sans-serif;font-size:19px;letter-spacing:.5px;color:#fff;
  background:linear-gradient(135deg,var(--crimson),#FF6B3D);
  box-shadow:5px 6px 0 var(--ink),0 0 18px rgba(230,57,70,.5);transition:transform .09s,box-shadow .09s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;}
.bootbtn .sub{font-size:10.5px;letter-spacing:.3px;opacity:.85;}
.bootbtn:active{transform:translate(2px,3px);box-shadow:3px 3px 0 var(--ink);}

/* ===================== END SCREENS (miss / bank) ===================== */
.endscreen{position:absolute;inset:0;z-index:8;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:26px;text-align:center;background:rgba(6,9,16,.78);backdrop-filter:blur(5px);}
.endscreen.show{display:flex;animation:choiceFade .3s ease;}
.endscreen .spr{width:96px;height:96px;}
.endscreen.miss .spr{animation:ashTumble 1s var(--spring) both;filter:grayscale(1) brightness(.7);}
@keyframes ashTumble{0%{transform:translateY(-16px) rotate(0);opacity:1;}100%{transform:translateY(10px) rotate(-12deg);opacity:.55;}}
.endscreen h2{font-family:'Bungee',sans-serif;font-size:30px;line-height:1.1;}
.endscreen.miss h2{color:var(--muted);text-shadow:3px 3px 0 var(--ink);}
.endscreen.bank h2{color:var(--gold-cup);text-shadow:0 0 18px rgba(255,201,60,.6),3px 3px 0 var(--ink);animation:multpop .5s var(--spring);}
.endscreen p{font-size:15px;color:var(--paper);line-height:1.45;max-width:320px;opacity:.94;font-style:italic;}
.endscreen .big{font-family:'Bungee',sans-serif;font-size:40px;color:var(--gold-cup);text-shadow:0 0 20px rgba(255,201,60,.7),3px 3px 0 var(--ink);}
.endscreen .recs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:2px;}
.endscreen .rec{font-family:'Bungee',sans-serif;font-size:11px;padding:7px 12px;border-radius:11px;
  background:rgba(26,43,74,.8);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--electric);}
.endscreen .rec.gold{color:var(--gold-cup);}
.againbtn{pointer-events:auto;min-width:240px;min-height:66px;border:3px solid var(--ink);border-radius:18px;cursor:pointer;
  font-family:'Bungee',sans-serif;font-size:20px;letter-spacing:.5px;color:#04130E;margin-top:6px;
  background:linear-gradient(135deg,var(--electric),var(--electric-d));
  box-shadow:5px 6px 0 var(--ink),0 0 20px rgba(60,226,165,.5);transition:transform .09s,box-shadow .09s;
  display:flex;align-items:center;justify-content:center;gap:9px;}
.againbtn:active{transform:translate(2px,3px);box-shadow:3px 3px 0 var(--ink);}

/* intro toast */
.intro{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:28px;text-align:center;background:radial-gradient(circle at 50% 38%,#16335c,#060910 72%);}
.intro.hide{display:none;}
.intro .crest{font-size:74px;filter:drop-shadow(0 0 22px rgba(255,201,60,.6));animation:multpop .6s var(--spring);}
.intro h1{font-family:'Bungee',sans-serif;font-size:30px;line-height:1.08;color:var(--gold-cup);
  text-shadow:0 0 18px rgba(255,201,60,.5),3px 3px 0 var(--ink);max-width:330px;}
.intro p{font-size:14.5px;color:var(--paper);line-height:1.5;max-width:330px;opacity:.92;}
.intro p b{color:var(--electric);font-style:normal;}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  .kicker-app.chroma{animation:none;}
  .bankbtn{animation:none;}
  .potmeter .mult.pop,.endscreen.bank h2,.intro .crest{animation:none;}
  .kicker-app.frozen{transition-duration:.1s;}
  .endscreen.miss .spr{animation:none;}
}
/* JS-forced reduced motion (Playwright / toggle) mirrors the media query */
.kicker-app.reduced .bankbtn{animation:none;}
.kicker-app.reduced.chroma{animation:none;}

@media (max-width:360px){
  .potmeter .mult{font-size:46px;}
  .actionbtn{font-size:18px;min-height:66px;}
  .bankbtn{font-size:22px;min-height:76px;}
}