:root { --ui: #f5e6c8; }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html,body { margin:0; height:100%; background:#0a0a12; color:#eee;
    font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; overflow:hidden; }
  #wrap { position:fixed; inset:0 0 64px 0; display:flex; align-items:center; justify-content:center; }
  #stage { position:relative; width:min(100%, calc((100vh - 80px) * 16 / 9), 1000px); aspect-ratio:16/9; }
  canvas { width:100%; height:100%; display:block; image-rendering:pixelated;
    background:#0a0a12; border-radius:6px; box-shadow:0 0 0 2px #222, 0 20px 60px #000; }

  /* ---------- start screen ---------- */
  #menu { position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px; padding:4% 6%;
    background: radial-gradient(120% 120% at 50% 0%, rgba(12,16,30,0.55) 0%, rgba(6,6,12,0.80) 72%);
    backdrop-filter: blur(3px); border-radius:6px; text-align:center; overflow:auto; }
  #menu h1 { margin:0; font-size:clamp(22px,4.4vw,44px); letter-spacing:2px;
    color:#ffd457; text-shadow:0 3px 0 #7a4a00, 0 0 22px #ffb30055; }
  #menu h1 span { color:#7fd4ff; text-shadow:0 3px 0 #004a7a, 0 0 22px #00a2ff55; }
  #menu .logo { display:block; width:min(64%,300px); height:auto; margin:0 auto;
    filter:drop-shadow(0 3px 0 #6a3f00) drop-shadow(0 0 24px #ffb30059); }
  #menu p.sub { margin:-4px 0 6px; color:#9fb0d0; font-size:clamp(11px,1.6vw,15px); }
  .row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; }
  .card { background:#141a2e; border:2px solid #2b3660; border-radius:10px;
    padding:10px 14px; display:flex; flex-direction:column; gap:8px; align-items:center; min-width:150px; }
  .card .tag { font-size:12px; letter-spacing:1px; color:#9fb0d0; }
  .card.p1 { border-color:#3b6fd4; } .card.p2 { border-color:#d43b3b; }
  .card input { width:110px; text-align:center; font-size:20px; padding:6px;
    background:#0a0f1e; color:#fff; border:2px solid #33406e; border-radius:8px; }
  .card input:focus { outline:none; border-color:#ffd457; }
  .btn { cursor:pointer; border:none; border-radius:8px; padding:10px 18px;
    font-size:15px; font-weight:bold; letter-spacing:1px; color:#1a1200;
    background:linear-gradient(#ffd457,#f0a800); box-shadow:0 3px 0 #8a5c00; }
  .btn:active { transform:translateY(2px); box-shadow:0 1px 0 #8a5c00; }
  .btn.big { font-size:20px; padding:14px 42px; }
  .btn.ghost { background:#1c2540; color:#cfe0ff; box-shadow:0 3px 0 #0c1224; }
  a.btn { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
  a.btn.ghost:hover { background:#26314f; }
  label.chk { font-size:13px; color:#cfe0ff; display:flex; gap:6px; align-items:center; }
  .hint { font-size:11px; color:#7c8bb0; max-width:640px; line-height:1.5; }
  .hint b { color:#cfe0ff; }
  #err { color:#ff8080; font-size:12px; min-height:14px; }

  /* ---------- footer: support line under the game ---------- */
  #foot { position:fixed; left:0; right:0; bottom:0; z-index:9; display:flex; gap:12px;
    align-items:center; justify-content:center; flex-wrap:wrap; padding:8px 12px;
    background:linear-gradient(180deg, rgba(10,10,18,0), rgba(10,10,18,0.9) 38%, #0a0a12);
    text-align:center; }
  #foot .pledge { margin:0; max-width:860px; color:#9fb0d0; font-size:12px; line-height:1.4; }
  #foot .pledge b { color:#cfe0ff; }
  #foot a.donate { color:#1a1200; background:linear-gradient(#ffd457,#f0a800); text-decoration:none;
    font-weight:bold; font-size:12px; letter-spacing:.5px; padding:6px 13px; border-radius:8px;
    box-shadow:0 2px 0 #8a5c00; white-space:nowrap; }
  #foot a.donate:active { transform:translateY(2px); box-shadow:0 0 0 #8a5c00; }
  @media (max-width:560px){ #foot .pledge { font-size:11px; } }

  /* ---------- touch controls ---------- */
  #touch { position:absolute; left:0; right:0; bottom:0; height:34%;
    display:none; justify-content:space-between; align-items:flex-end;
    padding:8px 10px; pointer-events:none; }
  #touch .pad { display:grid; gap:6px; pointer-events:auto; }
  #touch .pad.left  { grid-template-columns:repeat(3,52px); grid-template-rows:repeat(2,52px); }
  #touch .pad.right { grid-template-columns:repeat(3,56px); grid-template-rows:repeat(1,60px); }
  #touch button { border:2px solid #ffffff33; background:#00000088; color:#fff;
    border-radius:12px; font-size:16px; font-weight:bold; backdrop-filter:blur(2px); }
  #touch button:active, #touch button.on { background:#ffd457cc; color:#1a1200; }
  .p1c { color:#7fd4ff; } .p2c { color:#ff9a9a; }
  body.touch #touch { display:flex; }

  /* ---------- live tuner ---------- */
  #tuner { position:absolute; left:10px; bottom:10px; z-index:6; display:flex; flex-direction:column; gap:6px;
    background:#0b0f1ccc; border:1px solid #3a4a7a; border-radius:8px; padding:10px 12px; font-size:12px;
    color:#cfe0ff; backdrop-filter:blur(3px); }
  #tuner[hidden] { display:none; }
  #tuner .trow { display:flex; align-items:center; gap:8px; }
  #tuner label { width:88px; text-align:left; }
  #tuner input[type=range] { width:150px; }
  #tuner .tval { min-width:46px; text-align:right; color:#ffd457; font-weight:bold; }
  #tuner button { background:#1c2540; color:#cfe0ff; border:1px solid #33406e; border-radius:6px; padding:4px 8px; cursor:pointer; }
  #tuner .thint { color:#7c8bb0; }