/* Shared look for Free Kids Arcade games: full-screen stage, chunky buttons, toy-box panels. */
:root{
  --ink:#1f2a44;
  --sun:#ffcf3f;
  --slime:#5fd35a;
  --sky:#4aa3ff;
  --berry:#ff5d8f;
  --paper:#fffaf0;
  --muted:#5b6782;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{color:var(--ink);font-family:var(--body);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#stage{position:relative;height:100%;width:100%;overflow:hidden}
canvas.play{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.hud{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));pointer-events:none;align-items:center;z-index:2}
.pill{background:rgba(31,42,68,.82);color:#fff;border-radius:999px;padding:6px 14px;font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.pill b{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.02em}
.pill small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.spacer{flex:1}
.hudbtn{pointer-events:auto;background:rgba(31,42,68,.82);color:#fff;border:0;border-radius:999px;min-width:44px;height:44px;padding:0 12px;font:400 18px var(--display);cursor:pointer}
.hudbtn:focus-visible{outline:3px solid var(--sun)}

.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(31,42,68,.45);padding:16px;z-index:5}
.panel{background:var(--paper);border:4px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink);padding:24px;width:min(520px,100%);max-height:calc(100% - 16px);overflow:auto;display:flex;flex-direction:column;gap:16px;text-align:left}
.panel h1,.panel h2{font-family:var(--display);font-weight:400;margin:0;line-height:1;text-wrap:balance}
.panel h1{font-size:clamp(42px,10vw,64px);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.panel h2{font-size:clamp(30px,7vw,40px)}
.panel p{margin:0;line-height:1.5;color:var(--muted);font-size:17px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{font:400 24px var(--display);letter-spacing:.03em;background:var(--sun);color:var(--ink);border:4px solid var(--ink);border-radius:16px;padding:12px 24px;box-shadow:0 5px 0 var(--ink);cursor:pointer;touch-action:manipulation}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn:focus-visible{outline:4px solid var(--sky);outline-offset:3px}
.btn.big{font-size:30px;padding:14px 30px}
.btn.go{background:var(--slime)}
.hint{display:flex;gap:10px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:10px 12px;font-weight:800;line-height:1.35}
.hint .ico{font-size:30px;line-height:1}
.stars{display:flex;gap:6px;font-size:44px;line-height:1}
.stars span{filter:grayscale(1) opacity(.3)}
.stars span.on{filter:none}
.toast{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);font:400 clamp(34px,8vw,64px) var(--display);color:#fff;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;pointer-events:none;white-space:nowrap;z-index:3}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}