:root {
      --ink: #3a2a3a;
      --glass: rgba(255, 255, 255, 0.42);
      --glass-border: rgba(255, 255, 255, 0.7);
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body {
      margin: 0; height: 100%; overflow: hidden;
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      color: var(--ink);
      background: #cfe8f8;
      user-select: none;
    }
    #wrap { position: relative; width: 100%; height: 100%; }
    canvas { display: block; width: 100%; height: 100%; touch-action: none; }
    .overlay {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      pointer-events: none; padding: 24px;
    }
    .panel {
      pointer-events: auto;
      width: min(420px, 92vw);
      padding: 28px 26px 22px;
      border-radius: 28px;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      box-shadow: 0 18px 50px rgba(80, 50, 90, 0.18);
      backdrop-filter: blur(18px);
      text-align: center;
    }
    h1 { margin: 0 0 6px; font-size: clamp(28px, 6vw, 40px); letter-spacing: 2px; }
    .sub { margin: 0 0 18px; opacity: 0.7; font-size: 14px; }
    .hint { font-size: 13px; line-height: 1.6; opacity: 0.78; margin: 0 0 20px; }
    .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    button {
      appearance: none; border: 0; cursor: pointer;
      padding: 12px 22px; border-radius: 999px;
      font-size: 16px; font-weight: 700; color: #fff;
      background: linear-gradient(180deg, #ff8fb8, #ff6aa0);
      box-shadow: 0 8px 18px rgba(255, 106, 160, 0.35);
    }
    button.alt { background: linear-gradient(180deg, #7ad7ff, #4db7f0); box-shadow: 0 8px 18px rgba(77, 183, 240, 0.35); }
    button.rush { background: linear-gradient(180deg, #ffd43b, #f59f00); color: #4a2c00; box-shadow: 0 8px 18px rgba(245, 159, 0, 0.4); }
    button.ghost { background: rgba(255,255,255,0.7); color: var(--ink); box-shadow: none; }
    #hud {
      position: absolute; top: 0; left: 0; right: 0;
      pointer-events: none; padding: 10px 14px 0;
      display: none;
    }
    .hud-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; }
    .hud-card {
      background: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.7);
      backdrop-filter: blur(10px); border-radius: 14px; padding: 8px 12px;
      white-space: nowrap; width: max-content;
    }
    .hud-card.right { justify-self: end; }
    .label { font-size: 11px; opacity: 0.65; }
    .value { font-size: 22px; font-weight: 800; line-height: 1.2; }
    .tiny { font-size: 13px; font-weight: 700; }
    #hudCombo.hot { color: #d9480f; transform: scale(1.12); }
    #hudCombo.blaze { color: #c2255c; transform: scale(1.22); text-shadow: 0 0 18px rgba(255, 107, 160, 0.8); }
    .hud-card { transition: transform 0.08s ease; }
    #feverBar {
      margin-top: 8px; height: 10px; border-radius: 99px;
      background: rgba(255,255,255,0.35); overflow: hidden; display: none;
      box-shadow: 0 0 16px rgba(255, 191, 36, 0.55);
    }
    #feverBar.climax { box-shadow: 0 0 22px rgba(255, 80, 140, 0.9); height: 12px; }
    #comboBanner.climax {
      color: #ffe066;
      font-size: clamp(42px, 14vw, 78px);
      text-shadow: 0 0 24px #ff4d6d, 0 8px 30px rgba(255, 80, 140, 0.8);
    }
    #comboBanner {
      position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
      pointer-events: none; font-weight: 900; letter-spacing: 2px;
      text-shadow: 0 8px 24px rgba(255, 80, 140, 0.45);
      opacity: 0; font-size: 64px; color: #ff4d6d;
      -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
    }
    #tutorial {
      position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
      text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.6s;
      font-size: 15px; text-shadow: 0 1px 8px rgba(255,255,255,0.8);
    }
    #toasts {
      position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
      pointer-events: none; display: flex; flex-direction: column; gap: 8px; align-items: center;
    }
    .toast {
      background: rgba(255,255,255,0.85); border-radius: 999px; padding: 8px 16px;
      font-weight: 700; box-shadow: 0 8px 20px rgba(0,0,0,0.08); animation: popin 0.35s ease;
    }
    @keyframes popin { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    #debug {
      position: absolute; right: 10px; bottom: 10px; width: min(280px, 92vw);
      background: rgba(20, 16, 28, 0.78); color: #f4eef6; border-radius: 12px;
      font-size: 12px; pointer-events: auto; overflow: hidden;
    }
    #debug header { padding: 8px 10px; cursor: pointer; font-weight: 700; }
    #debug .body { padding: 0 10px 10px; display: none; }
    #debug.open .body { display: block; }
    #debug label { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0; align-items: center; }
    #debug input { width: 88px; }
    #log {
      max-height: 110px; overflow: auto; background: rgba(0,0,0,0.25);
      padding: 6px; border-radius: 8px; margin-top: 8px; font-family: ui-monospace, Consolas, monospace;
    }
    .hidden { display: none !important; }
    #resultStats { text-align: left; margin: 12px 0 18px; font-size: 14px; line-height: 1.7; }
    .ach-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
    .ach { font-size: 11px; padding: 4px 8px; border-radius: 99px; background: rgba(255,255,255,0.55); }
    .ach.on { background: #ffe082; }
    #audioDock {
      position: absolute; left: 10px; bottom: 10px; z-index: 6;
      display: flex; gap: 8px; pointer-events: auto;
    }
    #audioDock button {
      padding: 8px 12px; font-size: 13px; box-shadow: 0 6px 14px rgba(80,40,70,0.18);
    }
    #audioDock button.off { background: rgba(255,255,255,0.72); color: #6b5a66; }
  
html, body { height: 100%; height: 100dvh; }
#hud { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
#audioDock { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: calc(10px + env(safe-area-inset-left, 0px)); }
#comboBanner { font-size: clamp(36px, 12vw, 64px); }
button { min-height: 44px; }
#debug { display: none !important; }