/* Shared shell of every Tree Kids game: title screen, HUD, pause card,
   rotate notice. Identity A of the hub: light, Nunito, blue buttons, coral call to action. */
[hidden]{display:none!important}
:root{
  --bg:#f4f6fb; --ink:#141a33; --mute:#5b6480; --line:#e3e7f0;
  --blue:#0a6cff; --blue-deep:#0655d1; --coral:#f0625c; --coral-deep:#d9453f; --green:#1f4a2e;
  --glass:rgba(255,255,255,.88); --shadow:0 10px 30px rgba(20,26,51,.14);
  --font:Nunito,system-ui,sans-serif;
  color-scheme:light;
}
@media (min-width:1800px){html{font-size:17px}}
@media (min-width:2400px){html{font-size:18px}}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.4;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
canvas.stage{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
html.big-cursor,html.big-cursor *{cursor:none!important}   /* the drawn hand from kit/cursor.js replaces the system cursor */

/* ---------- overlays (title, pause, rotate) ---------- */
.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px 16px;box-sizing:border-box;overflow:auto}
.back{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:14px;z-index:11;color:var(--ink);text-decoration:none;font-weight:800;font-size:1rem;
  padding:10px 18px;border-radius:999px;background:var(--glass);box-shadow:var(--shadow)}
.stack{display:grid;gap:18px;justify-items:center;text-align:center;width:100%;max-width:46rem}
.logo{margin:0;font-weight:900;font-size:clamp(3rem,9vw,6.5rem);line-height:.95;letter-spacing:-.02em;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.4);text-wrap:balance}
.logo em{display:block;font-style:normal;font-weight:800;font-size:clamp(1rem,2vw,1.375rem);letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:#fff;margin-top:12px}
.tagline{margin:0;color:#fff;font-weight:700;font-size:clamp(1.0625rem,1.6vw,1.25rem);max-width:44ch;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.cta{display:inline-flex;align-items:center;gap:.5em;font-weight:900;font-size:clamp(1.5rem,2.4vw,2.25rem);padding:.55em 1.3em;border-radius:999px;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,#f6746e,var(--coral));box-shadow:0 8px 0 var(--coral-deep),0 20px 40px rgba(240,98,92,.35);touch-action:manipulation;transition:transform .12s,box-shadow .12s}
.cta:active{transform:translateY(5px);box-shadow:0 3px 0 var(--coral-deep)}
.cta:disabled{opacity:.6;cursor:wait}
.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;list-style:none;padding:0;margin:0;color:#fff;font-weight:700;font-size:1rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}
kbd{font:800 1rem var(--font);color:var(--ink);background:#fff;border-radius:8px;padding:3px 9px;margin-right:6px;box-shadow:0 3px 0 #c9d2e4}
body.touch .controls{display:none}
.note{margin:0;color:#fff;font-weight:700;font-size:1rem;max-width:44ch;text-shadow:0 2px 8px rgba(0,0,0,.5);opacity:.9}
.hi{margin:0;color:#fff;font-weight:800;font-size:1rem;letter-spacing:.14em;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.hi b{font-size:1.25rem;font-weight:900}
.devby{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:1rem;padding:8px 18px 8px 10px;border-radius:999px;background:var(--glass);box-shadow:var(--shadow)}
.devby .tree{display:inline-block;width:1.6rem;height:2.2rem;background:var(--green);-webkit-mask:url(/assets/tree-symbol.svg) center/contain no-repeat;mask:url(/assets/tree-symbol.svg) center/contain no-repeat}

/* ---------- HUD ---------- */
.hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.hud-btns{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;display:flex;gap:8px;pointer-events:auto}
.hud-btns button{position:relative;overflow:hidden;height:3rem;padding:0 18px;border-radius:999px;border:0;background:var(--glass);color:var(--ink);font-weight:800;font-size:1.0625rem;cursor:pointer;box-shadow:var(--shadow);touch-action:none}
.hud-btns .primary{background:linear-gradient(180deg,#1a7cff,var(--blue));color:#fff}
.hud-btns button.hold::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.45)}
.hud-btns button.hold.holding::after{width:100%;transition:width var(--hold,2s) linear}
/* round picture buttons for the youngest players: one tap, a drawing instead of a word */
.icon-btn{display:grid;place-items:center;width:4.25rem;height:4.25rem;padding:0;border:0;border-radius:50%;background:var(--glass);box-shadow:var(--shadow);cursor:pointer;touch-action:manipulation;text-decoration:none}
.icon-btn img{width:2.9rem;height:2.9rem;display:block;object-fit:contain}
.icon-btn:active{transform:scale(.94)}
.icon-btn.corner{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:11}
.cta .play-ico{width:.9em;height:.9em;fill:currentColor}
.hud-stat{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:12px;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--glass);box-shadow:var(--shadow);font-weight:900;font-size:1.25rem}
.toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 76px);transform:translateX(-50%);padding:10px 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:800;font-size:1rem;opacity:0;transition:opacity .2s;white-space:nowrap}
.toast.on{opacity:1}

/* ---------- cards (pause, rotate) ---------- */
.card{background:#fff;border-radius:28px;padding:28px;text-align:center;max-width:30rem;width:100%;box-sizing:border-box;display:grid;gap:14px;justify-items:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.card h2{margin:0;font-weight:900;font-size:clamp(1.75rem,4vw,2.5rem);letter-spacing:-.01em}
.card p{margin:0;color:var(--mute);font-weight:700;font-size:1.0625rem}
.card .btns{display:grid;gap:10px;width:min(20rem,100%)}
.btn{font-weight:900;font-size:1.125rem;padding:12px 24px;border-radius:999px;border:0;cursor:pointer;color:#fff;text-decoration:none;display:block;
  background:linear-gradient(180deg,#1a7cff,var(--blue));box-shadow:0 4px 0 var(--blue-deep);touch-action:manipulation}
.btn.ghost{background:#eef1f7;color:var(--ink);box-shadow:none}
.overlay.dim{background:rgba(10,20,15,.45)}
.unsupported{position:fixed;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--mute);font-weight:700;font-size:1.125rem}

/* ---------- chooser: pick a character (princess, driver...) with big pictures ---------- */
.chooser{background:rgba(20,26,51,.35)}
.chooser .card{max-width:min(68rem,96vw)}
.whos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2vw,24px);width:100%}
@media (max-aspect-ratio:1/1){.whos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.who{display:grid;gap:6px;justify-items:center;padding:8px 8px 12px;border:4px solid #fff;border-radius:24px;background:linear-gradient(180deg,#fff0f8,#eaf2ff);box-shadow:0 8px 20px rgba(20,26,51,.18);cursor:pointer;touch-action:manipulation;transition:transform .12s;font:900 1.375rem var(--font);color:var(--ink)}
.who img{width:100%;aspect-ratio:var(--who-ratio,3/4);object-fit:contain;border-radius:18px;display:block}
.who:hover{transform:scale(1.04)}
.who:active{transform:scale(.96)}
.icon-btn.face{overflow:hidden}
.icon-btn.face img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:50%}