:root {
      --bg: #28312f;
      --panel: #334347;
      --panel-2: #53665f;
      --text: #fff7e1;
      --muted: #d6dfbd;
      --accent: #ffca62;
      --danger: #ef6673;
      --ok: #81d399;
    }

    * { box-sizing: border-box; }

    html,
    body {
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      background: radial-gradient(circle at top, #758b75 0%, var(--bg) 55%, #17201f 100%);
      color: var(--text);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    #gameShell {
      width: min(100vw, 1040px);
      padding: 10px;
    }

    #hud {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 8px;
      font-size: 13px;
    }

    .hudBox {
      background: linear-gradient(180deg, var(--panel-2), var(--panel));
      border: 2px solid #829b7b;
      box-shadow: 0 3px 0 #1c2421;
      padding: 8px 10px;
      min-height: 42px;
    }

    .hudBox b { color: var(--accent); }
    .hudBox span { color: var(--text); }
    #hint {
      grid-column: span 4;
      min-height: 56px;
      color: var(--muted);
      line-height: 1.35;
      display: flex;
      align-items: center;
    }

    #canvasWrap {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 2;
      max-height: calc(100vh - 112px);
    }

    canvas {
      width: 100%;
      height: 100%;
      display: block;
      background: #cfd6ad;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      border: 4px solid #7d745c;
      box-shadow: 0 8px 0 #1c2421, 0 0 0 4px #3e4b43;
      touch-action: none;
    }

    #mobileControls {
      position: fixed;
      left: 14px;
      right: 14px;
      bottom: 14px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      pointer-events: none;
      user-select: none;
    }

    .dpad {
      width: 142px;
      height: 142px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 6px;
      pointer-events: auto;
    }

    .controlBtn {
      border: 2px solid #e1c574;
      background: linear-gradient(180deg, #61795f, #3d554f);
      color: #fff;
      font: 700 18px ui-monospace, monospace;
      box-shadow: 0 4px 0 #1a2420;
      border-radius: 10px;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
    }

    .controlBtn:active,
    .controlBtn.down {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #090b12;
      background: linear-gradient(180deg, #799574, #4d6a5e);
    }

    .blank { visibility: hidden; }
    #actionBtn {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      pointer-events: auto;
      font-size: 14px;
      color: #1b1b1b;
      background: linear-gradient(180deg, #ffe38b, #dfaa2a);
      border-color: #fff1ad;
    }

    #miniGameOverlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(7, 9, 16, 0.78);
      z-index: 10;
      padding: 18px;
    }

    #miniGameCard {
      width: min(520px, 100%);
      background: linear-gradient(180deg, #303a58, #1b2133);
      border: 4px solid #8792bd;
      box-shadow: 0 8px 0 #05070d;
      padding: 18px;
      text-align: center;
    }

    #miniGameCard h2 {
      margin: 0 0 8px;
      color: var(--accent);
      font-size: 20px;
    }

    #numberRow {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: 16px 0;
      font-size: 24px;
    }

    .numTile {
      min-width: 54px;
      padding: 10px 8px;
      background: #111522;
      border: 2px solid #59627f;
      box-shadow: inset 0 -3px 0 #0a0d16;
    }

    #answerButtons {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-top: 12px;
    }

    .answerBtn {
      min-height: 48px;
      border: 2px solid #fff0aa;
      background: linear-gradient(180deg, #ffe083, #d9a227);
      color: #1a1820;
      font: 700 20px ui-monospace, monospace;
      box-shadow: 0 4px 0 #0a0d16;
      cursor: pointer;
    }

    .answerBtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0a0d16; }
    #miniHelp { color: var(--muted); font-size: 12px; line-height: 1.35; }

    #startScreen {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(21, 30, 28, 0.72);
    }

    #startScreen.is-hidden { display: none; }

    #startCard {
      width: min(480px, 100%);
      padding: 30px 26px 28px;
      text-align: center;
      background: linear-gradient(180deg, #4c635e, #2b3937);
      border: 4px solid #f2cd70;
      box-shadow: 0 8px 0 #17201f, 0 0 0 4px #819977;
    }

    #startKicker {
      margin: 0 0 12px;
      color: #c6ddb5;
      font-size: 11px;
      letter-spacing: 1px;
    }

    #startTitle {
      margin: 0 0 24px;
      color: #fff1bd;
      font-size: clamp(34px, 9vw, 58px);
      line-height: 0.9;
      letter-spacing: -3px;
      text-shadow: 4px 4px 0 #9b5153, 7px 7px 0 #1d2826;
    }

    #startTitle span { color: #f18771; }

    #startGameButton {
      min-width: 220px;
      padding: 14px 20px;
      border: 3px solid #fff1ad;
      background: linear-gradient(180deg, #f4c960, #ce8041);
      color: #202520;
      font: 700 20px ui-monospace, monospace;
      letter-spacing: 1px;
      box-shadow: 0 5px 0 #17201f;
      cursor: pointer;
    }

    #startGameButton:hover,
    #startGameButton:focus-visible {
      background: linear-gradient(180deg, #ffe38b, #e99b4f);
      outline: 3px solid #c9e4b8;
      outline-offset: 4px;
    }

    #startGameButton:active {
      transform: translateY(4px);
      box-shadow: 0 1px 0 #17201f;
    }

    #introOverlay {
      position: fixed;
      inset: 0;
      z-index: 25;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(21, 30, 28, 0.78);
    }

    #introOverlay.is-visible { display: flex; }

    #introCard {
      width: min(540px, 100%);
      min-height: 292px;
      padding: 26px;
      background: linear-gradient(180deg, #4b605b, #2b3937);
      border: 4px solid #f2cd70;
      box-shadow: 0 8px 0 #17201f, 0 0 0 4px #819977;
    }

    #introProgress {
      margin: 0 0 16px;
      color: #c6ddb5;
      font-size: 12px;
      letter-spacing: 1px;
    }

    #introTitle {
      margin: 0 0 14px;
      color: #fff1bd;
      font-size: 26px;
      text-shadow: 3px 3px 0 #9b5153;
    }

    #introText {
      min-height: 82px;
      margin: 0;
      color: #fff7e1;
      font-size: 15px;
      line-height: 1.5;
    }

    #introActions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 28px;
    }

    .introButton {
      padding: 11px 16px;
      border: 3px solid #fff1ad;
      background: linear-gradient(180deg, #f4c960, #ce8041);
      color: #202520;
      font: 700 15px ui-monospace, monospace;
      box-shadow: 0 4px 0 #17201f;
      cursor: pointer;
    }

    .introButton:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #17201f;
    }

    #skipIntroButton {
      border-color: #a8c5b2;
      background: #3a4d49;
      color: #e5f0d7;
    }

    @media (hover: hover) and (pointer: fine) {
      #mobileControls { opacity: 0.28; }
      #mobileControls:hover { opacity: 0.9; }
    }

    @media (max-width: 720px) {
      body { align-items: flex-start; }
      #gameShell { align-self: flex-start; padding: 6px; }
      #hud { grid-template-columns: repeat(2, 1fr); font-size: 11px; gap: 5px; }
      #hint { grid-column: span 2; }
      .hudBox { padding: 6px 7px; min-height: 34px; }
      #hint { min-height: 46px; }
      #canvasWrap { max-height: calc(100vh - 138px); }
      .dpad { width: 122px; height: 122px; gap: 5px; }
      #actionBtn { width: 82px; height: 82px; }
      #startCard { padding: 24px 18px 22px; }
      #introCard { min-height: 272px; padding: 22px 18px; }
      #introTitle { font-size: 22px; }
      #introText { font-size: 13px; }
      #mobileControls {
        bottom: max(12px, env(safe-area-inset-bottom));
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }
    }