:root {
      --bg: #0f1220; --panel: #171a2b; --accent: #66d9ef; --text: #e9ecf1; --muted: #99a2b2;
      --danger: #ff6b6b; --ok: #9be564; --board-bg: #1b2144; --board-wall: #12162e; --aim: #66d9ef88;
    }
    :root[data-theme="light"] {
      --bg: #f2f5fb; --panel: #ffffff; --accent: #0b74ff; --text: #1d2330; --muted: #6a7280;
      --danger: #d44b4b; --ok: #4caf50; --board-bg: #f4f7ff; --board-wall: #d9dff0; --aim: #0b74ff66;
    }

    * { box-sizing: border-box; }
    html, body { width:100%; height:100dvh; margin:0; overflow:hidden; overscroll-behavior:none; touch-action:pan-x pan-y; }
    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
      background: radial-gradient(1200px 800px at 70% -10%, #1a1f39 0%, var(--bg) 55%);
      color: var(--text); display:grid; place-items:center;
    }
    body.light-bg { background: radial-gradient(1200px 800px at 70% -10%, #dfe6ff 0%, var(--bg) 55%); }

    .wrap {
      display:grid; grid-template-columns:auto; gap:12px; padding:10px;
      width:min(1100px,100vw); max-height:calc(100dvh - 20px); align-items:start; transform-origin:top center;
    }
    .panel {
      background:var(--panel); border:1px solid #24284233; border-radius:14px; padding:10px;
      box-shadow:0 10px 30px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.03);
    }
    .hud { 
      display:grid; gap:10px; position:static; margin:0 auto; 
      width: min(92vw, 520px);
    }
    .row { display:flex; gap:10px; align-items:center; justify-content:space-between; }

    .stat {
      background: color-mix(in oklab, var(--panel), #000 10%);
      border:1px solid #2a305733; border-radius:12px; padding:8px 10px; text-align:center;
    }
    .stat h3 { margin:0; font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
    .stat p { margin:6px 0 0; font-size:18px; font-weight:700; }

    .next { display:grid; justify-items:center; gap:6px; }
    .next-title { font-weight:700; }
    .fruit-preview { border-radius:50%; display:block; border:2px solid #00000014; box-shadow: inset 0 6px 10px #0004, 0 6px 14px #0002; background:transparent; }
    .nextCanvasBox { width: clamp(96px, 28vw, 160px); }
    #nextCanvas { width:100%; height:auto; display:block; }

    .toolbar .row { justify-content:stretch; }
    button {
      appearance:none; border:1px solid #2a305733; color:var(--text);
      background:linear-gradient(color-mix(in oklab, var(--panel), #000 6%), color-mix(in oklab, var(--panel), #000 12%));
      padding:8px 12px; border-radius:10px; font-weight:700; cursor:pointer;
      box-shadow:0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05); line-height:1;
    }
    button:hover { filter:brightness(1.05); }
    button:active { transform:translateY(1px); }
    #toggleThemeMain { width:100%; font-size:130%; touch-action: manipulation; }
    #restart { width:100%; font-size:130%; touch-action: manipulation; }
    .hint { color:var(--muted); font-size:12px; line-height:1.35; text-align:center; }

    .score-next { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
    .scores { display:grid; gap:10px; }

    #game {
      display:block; margin: 0 auto;
      background:linear-gradient(#0d0f1b, #0a0c16); border-radius:14px; border:1px solid #24284233;
      box-shadow:0 12px 40px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.03);
      width:100%; height:auto; user-select:none; -webkit-user-select:none;
      touch-action:none;
      max-width: 100%;
    }

    @media (min-width: 981px) {
      .wrap { grid-template-columns:max-content 360px; justify-content:center; }
      .panel:has(#game) { width:max-content; padding:12px; }
      #game { 
        width: auto;
        height: auto;
        max-height: 800px;      /* keep game within 800px height on laptop/desktop */
        max-width: 640px;       /* don't let it grow too wide */
      }
      .nextCanvasBox { width:140px; }
      .hud { width:360px !important; }
    }

    /* Overlays */
    .overlay {
      position:absolute; inset:0;
      display:none; place-items:center;
      pointer-events:none;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(1px);
      border-radius: 14px;
    }
    .overlay.show { display:grid; pointer-events:auto; }
    .overlay .card {
      padding:16px 18px;
      border-radius:14px;
      border:1px solid #ffffff22;
      background: color-mix(in oklab, var(--panel), #000 5%);
      box-shadow:0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
      display:grid; gap:10px; text-align:center;
      min-width: 220px;
    }
    .overlay .title { font-weight:800; }
    .overlay .subtle { color:var(--muted); font-size:12px; }

    .gameover { position:absolute; inset:0; display:none; place-items:center; pointer-events:none; }
    .gameover.show { display:grid; pointer-events:auto; cursor:pointer; }
    .badge { padding:10px 14px; border-radius:999px; border:1px solid #00000022; background:#00000066; backdrop-filter:blur(6px); font-weight:800; color:var(--danger); display:grid; gap:8px; text-align:center; }
    .badge small { color:#fff; font-weight:700; }

    @media (max-width:980px){ .wrap{ grid-template-columns:1fr; gap:10px; padding:8px; width:100vw; max-height:100dvh } .panel{ padding:8px } }
    @media (max-width:420px){ .stat p{ font-size:16px } .stat h3{ font-size:11px } .next-title{ font-size:14px } .row{ gap:8px } }