:root{
    --bg:#142218;
    --bg-2:#1c3324;
    --fence:#8a5a2f;
    --fence-dark:#5c3a1e;
    --cream:#f4ecd8;
    --leaf:#6fbf5e;
    --leaf-dark:#3f7a34;
    --apple:#e6483f;
    --apple-dark:#a02620;
    --gold:#ffd35f;
    --text:#f4ecd8;
    --dim:#9db894;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{
    width:100%; height:100%; overflow:hidden;
    background:radial-gradient(ellipse at 50% 0%, var(--bg-2), var(--bg) 75%);
    font-family:'Baloo 2', sans-serif;
    color:var(--text);
    -webkit-user-select:none; user-select:none;
    touch-action:none;
  }
  .mono{ font-family:'Space Mono', monospace; }

  #stage{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
  #frame{ display:flex; flex-direction:column; align-items:center; gap:12px; width:460px; max-width:94vw; }

  #title{ font-size:30px; font-weight:800; letter-spacing:1px; color:var(--gold); text-shadow:0 0 18px rgba(255,211,95,0.3); text-align:center; }
  #subtitle{ font-size:12px; color:var(--dim); letter-spacing:3px; text-transform:uppercase; font-family:'Space Mono',monospace; text-align:center; margin-top:-6px; }

  #hud{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:0 4px; }
  .stat-label{ font-size:10px; letter-spacing:2px; color:var(--dim); font-family:'Space Mono',monospace; text-transform:uppercase; }
  .stat-value{ font-size:22px; font-family:'Space Mono',monospace; font-weight:700; }
  #pauseBtn{
    background:rgba(244,236,216,0.08); border:1.5px solid rgba(244,236,216,0.25); color:var(--text);
    font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1px; padding:8px 14px;
    border-radius:8px; cursor:pointer;
  }
  #pauseBtn:hover{ border-color:var(--gold); }
  #muteBtn{
    background:rgba(244,236,216,0.08); border:1.5px solid rgba(244,236,216,0.25); color:var(--text);
    font-size:15px; padding:8px 10px; border-radius:8px; cursor:pointer; line-height:1;
  }
  #muteBtn:hover{ border-color:var(--gold); }

  #boardWrap{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
  #boardCanvas{ display:block; cursor:pointer; }

  .overlay{
    position:absolute; inset:0; background:rgba(10,16,10,0.9);
    display:flex; align-items:center; justify-content:center;
    z-index:5;
  }
  .overlay.hidden{ display:none; }
  .panel{ text-align:center; padding:20px; display:flex; flex-direction:column; align-items:center; gap:12px; }
  .panel h2{ font-size:28px; color:var(--gold); font-weight:800; }
  .panel p{ color:var(--dim); font-size:14px; max-width:280px; line-height:1.55; font-family:'Space Mono',monospace; }
  .big-score{ font-family:'Space Mono',monospace; font-size:32px; font-weight:700; }
  .best-line{ font-family:'Space Mono',monospace; font-size:12px; color:var(--gold); letter-spacing:1px; }
  button{
    font-family:'Baloo 2', sans-serif; font-weight:700; font-size:17px; letter-spacing:0.5px;
    padding:11px 32px; border-radius:24px; border:2px solid var(--gold);
    background:transparent; color:var(--gold); cursor:pointer;
    transition:all .15s ease;
  }
  button:hover{ background:var(--gold); color:#241b06; box-shadow:0 0 20px rgba(255,211,95,0.4); }

  #footNote{ font-size:11.5px; color:var(--dim); font-family:'Space Mono',monospace; letter-spacing:0.5px; text-align:center; }

  .diff-btn{
    font-family:'Space Mono',monospace !important; font-weight:700 !important;
    padding:8px 16px; border-radius:16px; border:1.5px solid rgba(244,236,216,0.3) !important;
    background:transparent; color:var(--dim) !important; cursor:pointer;
  }
  .diff-btn.active{ border-color:var(--gold) !important; color:var(--gold) !important; background:rgba(255,211,95,0.1); }
  .diff-btn:hover{ background:rgba(255,211,95,0.08); box-shadow:none; }