:root {
      color-scheme: dark;
      --bg: #101018;
      --panel: #171722;
      --panel-2: #222232;
      --ink: #f7f4df;
      --muted: #b9b38e;
      --accent: #ffd24a;
      --danger: #ff4f5f;
      --good: #4cff9b;
      --blue: #55c8ff;
      --dock-h: 142px;
      --hud-h: 98px;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      user-select: none;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      position: fixed;
      touch-action: none;
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 210, 74, 0.12), transparent 28rem),
        linear-gradient(180deg, #101018 0%, #08080d 100%);
      color: var(--ink);
      font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    }

    button {
      font: inherit;
      color: inherit;
    }

    #app {
      width: min(100vw, 560px);
      height: 100dvh;
      min-height: 540px;
      margin: 0 auto;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      background: #0d0d15;
      position: relative;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 60px rgba(0, 0, 0, 0.55);
    }

    .hud {
      min-height: var(--hud-h);
      padding: max(8px, env(safe-area-inset-top)) 10px 8px;
      background: linear-gradient(180deg, #191927 0%, #11111a 100%);
      border-bottom: 2px solid #333342;
      display: grid;
      gap: 7px;
      z-index: 4;
    }

    .hud-top,
    .hud-bottom {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      align-items: stretch;
    }

    .hud-tile {
      min-width: 0;
      min-height: 35px;
      border: 1px solid #3a394b;
      background: #141420;
      padding: 4px 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1px;
    }

    .hud-label {
      color: var(--muted);
      font-size: 9px;
      letter-spacing: 0;
      text-transform: uppercase;
      line-height: 1;
      white-space: nowrap;
    }

    .hud-value {
      color: var(--ink);
      font-weight: 800;
      font-size: clamp(12px, 3.2vw, 17px);
      line-height: 1.05;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .meter {
      height: 12px;
      border: 1px solid #4f4b34;
      background: #08080d;
      overflow: hidden;
      margin-top: 2px;
    }

    .meter > span {
      display: block;
      height: 100%;
      width: 100%;
      transform-origin: left center;
      background: linear-gradient(90deg, #ff4f5f 0%, #ffd24a 48%, #4cff9b 100%);
    }

    .progress > span {
      background: linear-gradient(90deg, #55c8ff, #ffd24a);
    }

    .hud-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }

    .mini-btn {
      min-height: 30px;
      border: 1px solid #4d4b63;
      background: #202032;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
      line-height: 1;
      border-radius: 4px;
      cursor: pointer;
    }

    .mini-btn:active,
    .mini-btn.is-active {
      background: #ffd24a;
      color: #151214;
      transform: translateY(1px);
    }

    .stage-line {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .stage-line strong {
      color: var(--accent);
    }

    .game-area {
      position: relative;
      min-height: 0;
      overflow: hidden;
      background: #08080d;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
      touch-action: none;
      background: #111116;
    }

    .toast-layer {
      pointer-events: none;
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 2;
    }

    .toast {
      position: absolute;
      left: 50%;
      top: 44%;
      transform: translate(-50%, -50%);
      padding: 7px 10px;
      background: rgba(17, 17, 26, 0.86);
      border: 1px solid rgba(255, 210, 74, 0.85);
      color: var(--accent);
      font-weight: 900;
      font-size: 15px;
      text-shadow: 0 2px 0 #000;
      animation: toast-pop 900ms ease-out forwards;
      white-space: nowrap;
    }

    @keyframes toast-pop {
      0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); }
      18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -95%) scale(0.96); }
    }

    .controls {
      min-height: calc(var(--dock-h) + env(safe-area-inset-bottom));
      padding: 10px 10px max(10px, env(safe-area-inset-bottom));
      background: linear-gradient(180deg, #171722 0%, #0f0f18 100%);
      border-top: 2px solid #333342;
      display: grid;
      grid-template-columns: 1fr 1fr 1.12fr 54px;
      gap: 8px;
      align-items: stretch;
      z-index: 5;
    }

    .control-btn {
      min-height: 76px;
      border: 2px solid #4a4860;
      border-radius: 8px;
      background: linear-gradient(180deg, #2a2a3d 0%, #191927 100%);
      color: var(--ink);
      box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.28), 0 4px 0 #07070c;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      touch-action: none;
    }

    .control-btn strong {
      font-size: clamp(18px, 4.8vw, 24px);
      line-height: 1;
    }

    .control-btn span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .control-btn.is-held,
    .control-btn:active {
      border-color: var(--accent);
      background: linear-gradient(180deg, #ffd24a 0%, #b96d2c 100%);
      color: #16100d;
      box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.18), 0 2px 0 #07070c;
      transform: translateY(2px);
    }

    .control-btn.is-held span,
    .control-btn:active span {
      color: #3e2616;
    }

    .turbo-btn {
      border-color: #3f6a7d;
    }

    .turbo-btn.is-held,
    .turbo-btn:active {
      background: linear-gradient(180deg, #55c8ff 0%, #2867f0 100%);
      border-color: #9de9ff;
    }

    .dock-pause {
      min-width: 0;
      border-radius: 8px;
      border: 2px solid #4a4860;
      background: #202032;
      color: var(--ink);
      font-weight: 900;
      font-size: 18px;
      cursor: pointer;
    }

    .dock-pause:active {
      transform: translateY(2px);
      background: var(--accent);
      color: #151214;
    }

    .overlay {
      position: absolute;
      inset: 0;
      z-index: 10;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(8, 8, 13, 0.76);
      backdrop-filter: blur(3px);
    }

    .overlay.is-visible {
      display: flex;
    }

    .dialog {
      width: min(100%, 430px);
      max-height: calc(100dvh - 34px);
      overflow: auto;
      border: 2px solid #55536f;
      background: #151520;
      box-shadow: 0 14px 44px rgba(0, 0, 0, 0.58);
      padding: 16px;
    }

    .dialog h1,
    .dialog h2 {
      margin: 0 0 10px;
      line-height: 1;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .dialog h1 {
      font-size: clamp(30px, 10vw, 52px);
      text-shadow: 0 4px 0 #000;
    }

    .dialog h2 {
      font-size: clamp(22px, 6vw, 32px);
    }

    .dialog p {
      margin: 8px 0;
      color: #ded9b5;
      line-height: 1.35;
      font-size: 14px;
    }

    .menu-grid {
      display: grid;
      gap: 9px;
      margin-top: 14px;
    }

    .primary-btn,
    .secondary-btn {
      min-height: 48px;
      border-radius: 5px;
      border: 2px solid #675f3a;
      background: #ffd24a;
      color: #17110e;
      font-weight: 900;
      text-transform: uppercase;
      cursor: pointer;
    }

    .secondary-btn {
      background: #222232;
      color: var(--ink);
      border-color: #4d4b63;
    }

    .primary-btn:active,
    .secondary-btn:active {
      transform: translateY(1px);
      filter: brightness(1.08);
    }

    .info-list {
      display: grid;
      gap: 7px;
      margin: 10px 0;
    }

    .info-row {
      padding: 8px;
      background: #202032;
      border-left: 4px solid var(--blue);
      color: #eee9c7;
      font-size: 13px;
      line-height: 1.32;
    }

    .shop-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 11px;
    }

    .shop-btn {
      min-height: 50px;
      border: 1px solid #4d4b63;
      background: #202032;
      color: var(--ink);
      border-radius: 5px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .shop-btn:active {
      background: #2b2b40;
      border-color: var(--accent);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 380px) {
      :root {
        --dock-h: 132px;
        --hud-h: 94px;
      }

      .controls {
        gap: 6px;
        padding-left: 7px;
        padding-right: 7px;
        grid-template-columns: 1fr 1fr 1.05fr 48px;
      }

      .control-btn {
        min-height: 68px;
      }

      .hud {
        padding-left: 7px;
        padding-right: 7px;
      }

      .hud-value {
        font-size: 12px;
      }
    }

    @media (min-width: 760px) {
      #app {
        height: min(100dvh, 920px);
      }
    }