/* Local fonts (Latin subsets from Google Fonts; Nunito is one variable file covering 700-900). */
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/lilita-one-400.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700 900;font-display:swap;src:url(../assets/fonts/nunito-700-900.woff2) format('woff2')}

/* Layout: one full-bleed 3D yard; thin HUD along the top; cards float over the lawn. Single look, so no dark theme. */
:root{
  --ink:#23304a; --paper:#fff8e8; --glass:#bfe9ff; --brick:#d9503f; --gold:#ffc53a; --lawn:#5da845; --you:#3f8fe0; --bot:#e2513f;
  --display:"Lilita One","Trebuchet MS",sans-serif; --body:"Nunito","Trebuchet MS",sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden;background:#8fd0ee;font-family:var(--body);color:var(--ink);-webkit-user-select:none;user-select:none}
#stage{position:fixed;inset:0;overflow:hidden}
#gl,#fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#gl{touch-action:none;cursor:default}
#fx{pointer-events:none}
/* Neon-green arrow cursor with a black outline over the game (js/cursor.js), one fixed look; its tip is the pointer spot (hence the -3px margin). The system cursor is hidden only while it shows */
#gl.nocur{cursor:none}
#cursor svg{display:block}
#cursor{position:absolute;left:0;top:0;width:24px;height:32px;margin:-3px 0 0 -3px;pointer-events:none;z-index:11;will-change:transform}
.ctrail{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;box-sizing:border-box;border-radius:50%;background:#39ff14;border:2px solid #23304a;pointer-events:none;z-index:10}
.hud{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:10px;pointer-events:none}
.spacer{flex:1}
/* VS scores, centred at the top: blue = you, red = the bot (the same colours as the kick spots, ball trails and frames) */
#score{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none}
#score b{min-width:44px;box-sizing:border-box;text-align:center;font:400 22px/1 var(--display);color:#fff;padding:8px 10px;border-radius:10px;font-variant-numeric:tabular-nums;-webkit-text-stroke:1px rgba(35,48,74,.35)}
#score .you{background:var(--you);box-shadow:0 3px 0 #2a64a3}
#score .bot{background:var(--bot);box-shadow:0 3px 0 #a33427}
#score b.bump{animation:bump .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes bump{0%{transform:scale(1.45)}100%{transform:scale(1)}}
/* Player buttons, top right: Retry, Skip, Sound */
.ib{pointer-events:auto;width:40px;height:40px;padding:8px;border:0;border-radius:10px;background:var(--ink);color:var(--paper);cursor:pointer;display:grid;place-items:center}
.ib svg{width:100%;height:100%;display:block}
.ib:active{transform:scale(.92)}
#soundBtn .off{display:none}#soundBtn.muted .off{display:inline}#soundBtn.muted .on{display:none}
/* Dev-only tuning: small, low-contrast, bottom left */
#gear{position:absolute;left:max(8px,env(safe-area-inset-left,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));width:28px;height:28px;padding:0;border:0;border-radius:8px;background:rgba(35,48,74,.18);color:rgba(255,248,232,.55);font-size:15px;cursor:pointer}
#gear:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#panel{position:absolute;bottom:calc(44px + env(safe-area-inset-bottom,0px));left:max(8px,env(safe-area-inset-left,0px));width:min(290px,calc(100vw - 24px));max-height:calc(100% - 80px);overflow:auto;background:var(--paper);border-radius:12px;padding:12px 14px;box-shadow:0 8px 0 rgba(35,48,74,.25);font-size:13px;display:grid;gap:8px}
#panel h4{margin:0;font-family:var(--display);font-weight:400;font-size:16px}
#panel label{display:grid;grid-template-columns:1fr 44px;gap:0 6px;font-weight:700;align-items:center}
#panel label input{grid-column:1/3;width:100%;accent-color:var(--brick)}
#panel output{text-align:right;font-variant-numeric:tabular-nums}
.row{display:flex;gap:6px;flex-wrap:wrap}
.chip{flex:1;border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:8px;padding:5px 6px;font:900 12px var(--body);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--ink);color:var(--paper)}
#copyBox{width:100%;box-sizing:border-box;height:58px;font:11px monospace}
.pop{position:absolute;font-family:var(--display);color:#fff;font-size:clamp(38px,8vw,84px);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);pointer-events:none;transform:translate(-50%,-50%);animation:pop .95s cubic-bezier(.2,1.5,.4,1) forwards;white-space:nowrap}
.pop.small{font-size:clamp(24px,4.6vw,46px);color:var(--gold);-webkit-text-stroke:2px var(--ink);text-shadow:0 3px 0 var(--ink)}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.2) rotate(-14deg);opacity:0}16%{transform:translate(-50%,-50%) scale(1.15) rotate(-6deg);opacity:1}70%{transform:translate(-50%,-70%) scale(1) rotate(-5deg);opacity:1}100%{transform:translate(-50%,-105%) scale(.92) rotate(-5deg);opacity:0}}
/* Round over: one big word in the upper third (YOU WIN! in gold, BOT WINS in red), then Play again (or tap anywhere) */
#win{position:absolute;left:0;right:0;top:17%;padding:0 16px;text-align:center;pointer-events:none;z-index:12}
#win h2{margin:0;font:400 clamp(54px,13vw,120px) var(--display);color:var(--gold);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink);letter-spacing:1px;animation:winIn .5s cubic-bezier(.2,1.6,.4,1) both}
#win.lose h2{color:var(--bot)}
@keyframes winIn{0%{transform:scale(.2) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(-4deg);opacity:1}}
#again{pointer-events:auto;margin-top:18px;border:0;background:var(--brick);color:#fff;font:400 24px var(--display);padding:12px 30px;border-radius:12px;cursor:pointer;box-shadow:0 5px 0 #9d3226;animation:tapMe 1s ease-in-out infinite alternate}
@keyframes tapMe{to{transform:scale(1.07)}}
#wipe{position:absolute;inset:0;z-index:15;background:#0e1426;opacity:0;pointer-events:none;transition:opacity .25s ease}
#wipe.on{opacity:1;transition-duration:.18s}
@media (prefers-reduced-motion:reduce){#again{animation-duration:2s}#score b.bump{animation:none}#win h2{animation-duration:.01s}}
/* Tutorial hand: index finger tilted to point north-west (as a hand holding a phone); the fingertip (12,8 in the SVG) is the anchor point. The swipe itself stays vertical. */
#hint{position:absolute;left:0;top:0;width:72px;height:78px;margin:-8px 0 0 -12px;transform-origin:12px 8px;pointer-events:none;filter:drop-shadow(0 4px 0 rgba(35,48,74,.3));animation:swipe 1.6s ease-in-out infinite}
#hint svg{display:block}
@keyframes swipe{0%{transform:translate(var(--x0),var(--y0)) scale(1.15);opacity:0}14%{transform:translate(var(--x0),var(--y0)) scale(1.15);opacity:1}24%{transform:translate(var(--x0),var(--y0)) scale(.9);opacity:1}70%{transform:translate(var(--x1),var(--y1)) scale(.9);opacity:1}86%,100%{transform:translate(var(--x1),var(--y1)) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){#hint{animation-duration:3s}}

/* Loading screen: sky backdrop, a ball smashing through a pane on a loop, title and an indeterminate bar. */
#loader{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;background:linear-gradient(#3f9fdf,#9bd6ef 60%,#ffe9bf);transition:opacity .45s ease}
#loader.done{opacity:0;pointer-events:none}
.ld-pic{width:min(160px,44vw);height:auto;filter:drop-shadow(0 6px 0 rgba(35,48,74,.25))}
.ld-bar{width:min(240px,70vw);height:12px;border-radius:6px;background:rgba(35,48,74,.3);overflow:hidden}
.ld-bar b{display:block;width:0;height:100%;border-radius:6px;background:var(--gold)}
.ld-pct{margin-top:-8px;font:900 16px var(--body);color:var(--ink);font-variant-numeric:tabular-nums}