:root{
    --bg-0:#05060c;
    --bg-1:#0a0d1a;
    --neon-cyan:#00f0ff;
    --neon-mag:#ff2fd6;
    --neon-yellow:#ffe600;
    --panel:#0d1120;
    --panel-line:#1c2540;
    --text-dim:#5c6a99;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;}
  html,body{
    margin:0; padding:0; height:100%;
    background:var(--bg-0);
    color:#e8ecff;
    font-family:'Courier New', ui-monospace, Menlo, monospace;
    overflow:hidden;
    touch-action:none;
  }
  #bgCanvas{
    position:fixed; inset:0;
    width:100%; height:100%;
    z-index:0;
    display:block;
  }
  #wrap{
    position:relative;
    z-index:1;
    display:flex; flex-direction:column; align-items:center;
    height:100%; height:100dvh;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    gap:8px;
  }
  #hud{
    width:100%; max-width:420px;
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px;
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:10px;
    box-shadow:0 0 18px rgba(0,240,255,0.06) inset;
  }
  .stat{display:flex; flex-direction:column; align-items:flex-start; gap:2px;}
  .stat .label{font-size:9px; letter-spacing:1px; color:var(--text-dim);}
  .stat .value{font-size:16px; color:var(--neon-cyan); text-shadow:0 0 8px rgba(0,240,255,0.6); font-weight:bold;}
  #nextBox{display:flex; flex-direction:column; align-items:center; gap:2px;}
  #nextBox .label{font-size:9px; letter-spacing:1px; color:var(--text-dim);}
  #nextCanvas{background:var(--bg-1); border:1px solid var(--panel-line); border-radius:6px;}

  #board-frame{
    position:relative;
    border:2px solid var(--panel-line);
    border-radius:8px;
    background:var(--bg-1);
    box-shadow:0 0 30px rgba(0,240,255,0.08), 0 0 0 1px rgba(0,240,255,0.03) inset;
    overflow:hidden;
  }
  #board{display:block;}
  #overlay{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:14px;
    background:rgba(5,6,12,0.86);
    backdrop-filter:blur(2px);
    text-align:center;
    padding:20px;
  }
  #overlay.hidden{display:none;}
  #overlay h1{
    margin:0; font-size:26px; letter-spacing:3px;
    color:var(--neon-cyan);
    text-shadow:0 0 14px rgba(0,240,255,0.8), 0 0 30px rgba(0,240,255,0.4);
  }
  #overlay p{margin:0; font-size:12px; color:var(--text-dim); max-width:260px; line-height:1.6;}
  .btn{
    padding:12px 26px;
    background:linear-gradient(180deg, #14183a, #0a0d1a);
    border:1px solid var(--neon-cyan);
    color:var(--neon-cyan);
    font-family:inherit; font-size:13px; letter-spacing:2px;
    border-radius:8px;
    box-shadow:0 0 14px rgba(0,240,255,0.25);
  }
  .btn:active{background:var(--neon-cyan); color:#05060c;}

  #controls{
    width:100%; max-width:420px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:8px;
  }
  .ctl{
    height:56px;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:10px;
    font-size:20px;
    color:var(--neon-mag);
    text-shadow:0 0 10px rgba(255,47,214,0.5);
  }
  .ctl:active{background:#191033; border-color:var(--neon-mag);}
  #dropBtn{color:var(--neon-yellow); text-shadow:0 0 10px rgba(255,230,0,0.5);}
  #dropBtn:active{border-color:var(--neon-yellow);}
  #muteBtn{
    width:30px; height:30px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel); border:1px solid var(--panel-line);
    border-radius:50%; color:var(--text-dim); font-size:14px;
    padding:0; line-height:1;
  }
  #muteBtn.off{color:var(--neon-mag); border-color:var(--neon-mag);}