:root{
    --bg:#0d0a16;
    --panel:#1a1430;
    --panel-edge:#2e2450;
    --ink:#e9e4f7;
    --dim:#8c81b3;
    --cyan:#2de2e6;
    --amber:#f9c80e;
    --pink:#ff2e97;
    --green:#3ef2a4;
    --red:#ff4d5e;
    --blue:#4d79ff;
    --orange:#ff8c42;
  }
  *{box-sizing:border-box;}
  html{ height:100%; }
  body{
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    background:radial-gradient(ellipse at 50% 0%, #1b1330 0%, #0a0712 70%);
    font-family:'Courier New', Courier, monospace;
    color:var(--ink);
    -webkit-user-select:none;
    user-select:none;
    overflow-x:hidden;
  }

  /* ---------- mobile-first base layout ---------- */
  .cabinet{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    padding:10px 10px calc(150px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,#241b3d,#150f26);
  }
  .title{
    text-align:center;
    letter-spacing:5px;
    font-size:18px;
    font-weight:bold;
    color:var(--cyan);
    text-shadow:0 0 6px var(--cyan), 0 0 16px rgba(45,226,230,0.6);
    margin:2px 0 8px;
  }
  .title span{color:var(--pink); text-shadow:0 0 6px var(--pink), 0 0 16px rgba(255,46,151,0.6);}

  .cabinet.shake{ animation:shake 0.18s ease-out; }
  @keyframes shake{
    0%{transform:translate(0,0);}
    25%{transform:translate(-3px,2px);}
    50%{transform:translate(3px,-1px);}
    75%{transform:translate(-2px,1px);}
    100%{transform:translate(0,0);}
  }

  .stage{
    flex:1;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
    width:100%;
  }

  .board-wrap{
    position:relative;
    border:3px solid var(--panel-edge);
    border-radius:6px;
    background:#070510;
    box-shadow:inset 0 0 24px rgba(0,0,0,0.9), 0 0 20px rgba(45,226,230,0.08);
    width:150px;
    height:300px;
    flex-shrink:0;
  }
  canvas#board{ display:block; width:100%; height:100%; image-rendering:pixelated; }
  .scanlines{
    position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.0) 0px,
      rgba(0,0,0,0.0) 2px,
      rgba(0,0,0,0.18) 3px,
      rgba(0,0,0,0.18) 4px
    );
    mix-blend-mode:multiply;
    border-radius:4px;
  }
  .overlay-msg{
    position:absolute; inset:0;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:rgba(7,5,16,0.9);
    text-align:center;
    padding:12px;
    border-radius:4px;
  }
  .overlay-msg.show{display:flex;}
  .overlay-msg h2{
    margin:0; font-size:17px; letter-spacing:2px;
    color:var(--pink); text-shadow:0 0 8px var(--pink);
  }
  .overlay-msg p{margin:0; color:var(--dim); font-size:11px; letter-spacing:0.5px; white-space:pre-line;}
  .mode-buttons, .result-buttons{
    display:flex; flex-direction:column; gap:8px; margin-top:4px; width:140px;
  }
  .btn{
    padding:9px 16px;
    background:var(--cyan);
    color:#0a0712;
    border:none;
    border-radius:4px;
    font-family:inherit;
    font-weight:bold;
    letter-spacing:2px;
    font-size:12px;
    cursor:pointer;
    box-shadow:0 0 14px rgba(45,226,230,0.5);
  }
  .btn.ghost{
    background:transparent;
    color:var(--dim);
    border:1px solid var(--panel-edge);
    box-shadow:none;
  }
  .btn:active{transform:translateY(1px);}

  .side{
    width:92px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .panel{
    background:var(--panel);
    border:2px solid var(--panel-edge);
    border-radius:6px;
    padding:5px 7px;
  }
  .stats-panel{
    display:block;
  }
  .stats-panel h3{ grid-column:auto; }
  .panel h3{
    margin:0 0 4px;
    font-size:8px;
    letter-spacing:1.5px;
    color:var(--dim);
  }
  .stat-row{
    display:flex;justify-content:space-between;
    font-size:9.5px; margin:2px 0;
    gap:4px;
  }
  .stat-row span{white-space:nowrap;}
  .stat-row b{color:var(--amber); text-shadow:0 0 6px rgba(249,200,14,0.5); text-align:right;}
  #next-canvas, #hold-canvas{ display:block; margin:0 auto; image-rendering:pixelated; }
  .hint{ display:none; }

  /* touch controls docked to the bottom of the screen, always reachable.
     Movement (left/down/right) is grouped on the left for the left thumb;
     actions (hold/rotate/pause/drop) are grouped on the right for the
     right thumb — mirrors the layout most mobile games use. */
  .touch-controls{
    position:fixed;
    left:0; right:0; bottom:0;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg, rgba(10,7,18,0) 0%, #0a0712 45%);
    z-index:20;
  }
  .tc-group{ display:grid; gap:7px; }
  .tc-move{
    grid-template-columns:repeat(2, 1fr);
    grid-template-areas:
      "l r"
      "d d";
    justify-items:center;
  }
  #t-left{ grid-area:l; }
  #t-right{ grid-area:r; }
  #t-down{ grid-area:d; }
  .tc-action{
    grid-template-columns:repeat(2, 1fr);
    justify-items:end;
  }
  .tbtn{
    width:54px;height:54px;
    border-radius:12px;
    border:2px solid var(--panel-edge);
    background:#221a3d;
    color:var(--cyan);
    font-family:inherit;
    font-size:20px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 8px rgba(45,226,230,0.15);
    user-select:none;
    touch-action:none;
    -webkit-touch-callout:none;
    cursor:pointer;
  }
  .tbtn:active{background:#33285c;}
  .tbtn:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
  .tbtn.wide{width:66px; font-size:10px; letter-spacing:0.5px; text-align:center;}
  .tc-move #t-down{ font-size:22px; }

  /* ---------- desktop enhancement ---------- */
  @media (min-width:641px){
    body{ display:flex; align-items:center; justify-content:center; }
    .cabinet{
      width:min(820px, 97vw);
      min-height:0;
      border-radius:18px;
      border:2px solid #3a2c63;
      box-shadow:0 0 0 4px #0a0712, 0 20px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(45,226,230,0.04);
      padding:18px 18px 22px;
    }
    .title{ font-size:clamp(20px,4vw,28px); letter-spacing:6px; margin:2px 0 14px; }
    .stage{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:16px; }
    .board-wrap{ height:480px; width:240px; max-width:none; max-height:none; order:0; }
    .side{ width:150px; flex-direction:column; }
    .panel{ padding:10px 12px; }
    .stats-panel{ display:block; }
    .panel h3{ font-size:11px; letter-spacing:3px; margin-bottom:8px; }
    .stat-row{ font-size:13px; }
    .hint{
      display:block;
      font-size:10.5px; line-height:1.6; color:var(--dim); letter-spacing:0.5px;
    }
    .hint b{color:var(--ink);}
    .touch-controls{ display:none; }
    .mode-buttons, .result-buttons{ width:150px; }
    .btn{ padding:10px 18px; font-size:13px; }
  }