:root {
      --pine: #b5683a;
      --pine-dark: #8a4a24;
      --pine-ink: #3a1f10;
      --enamel: #2a7a72;
      --enamel-deep: #1c534e;
      --plate: #f7f3ea;
      --apple: #c63c32;
      --apple-hi: #e07a6a;
      --leaf: #3f7a3a;
      --board: #1e463c;
      --chalk: #e8f0c8;
      --honey: #e8b84a;
      --honey-edge: #b47a1a;
      --mess: #c45c26;
      --ink: #2c2416;
      --paper: #efe4c8;
      --safe-t: env(safe-area-inset-top);
      --safe-b: env(safe-area-inset-bottom);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      font-family: "Noto Sans SC", sans-serif;
      color: var(--ink);
      background: #6e3f22;
      min-height: 100dvh;
      touch-action: manipulation;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: 0;
      color: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    button:focus-visible {
      outline: 3px solid var(--honey);
      outline-offset: 3px;
    }

    .room {
      min-height: 100dvh;
      padding: calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b));
      display: flex;
      justify-content: center;
    }

    .desk {
      width: min(860px, 100%);
      min-height: calc(100dvh - 24px - var(--safe-t) - var(--safe-b));
      display: grid;
      grid-template-columns: 1fr 128px;
      grid-template-rows: auto minmax(280px, 1fr) auto auto;
      gap: 12px;
      background:
        repeating-linear-gradient(
          90deg,
          #c4844a 0 18px,
          #be7c42 18px 20px,
          #c98a50 20px 38px,
          #b5683a 38px 40px
        );
      border-radius: 22px;
      padding: 14px 14px 16px;
      box-shadow:
        inset 0 1px 0 rgba(255, 230, 180, .35),
        0 18px 0 var(--pine-dark),
        0 28px 40px rgba(30, 10, 0, .35);
    }
    .board { grid-column: 1 / -1; }
    .stage { grid-column: 1; grid-row: 2; align-self: stretch; }
    .eq-board { grid-column: 1; grid-row: 3; }
    .palette { grid-column: 2; grid-row: 2 / 4; }
    .controls { grid-column: 1 / -1; }

    .board {
      background: var(--board);
      border-radius: 16px;
      padding: 12px 16px 14px;
      box-shadow:
        inset 0 0 0 3px #16352e,
        inset 0 0 40px rgba(0, 0, 0, .25);
      min-height: 92px;
    }
    .board-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }
    .board-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .board-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 64px;
      min-height: 64px;
      padding: 0 12px;
      border-radius: 12px;
      background: rgba(232, 240, 200, .12);
      color: #c5d9b8;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }
    .board-back:active {
      background: rgba(232, 240, 200, .22);
    }
    .board-back:focus-visible {
      outline: 3px solid var(--honey);
      outline-offset: 3px;
    }
    .board-kicker {
      margin: 0;
      font-size: 13px;
      letter-spacing: .18em;
      color: #9bb89a;
      font-weight: 700;
    }
    .modes {
      display: flex;
      gap: 6px;
    }
    .mode {
      min-height: 44px;
      padding: 0 12px;
      border-radius: 12px;
      background: rgba(232, 240, 200, .12);
      color: #c5d9b8;
      font-size: 15px;
      font-weight: 700;
    }
    .mode.is-on {
      background: var(--chalk);
      color: var(--board);
    }
    .problem {
      margin: 8px 0 6px;
      font-family: "Fredoka", "Noto Sans SC", sans-serif;
      font-size: clamp(56px, 14vw, 96px);
      font-weight: 700;
      line-height: 1.05;
      color: #fff6c2;
      letter-spacing: .08em;
      text-align: center;
    }
    .problem[hidden] { display: none !important; }
    .board-stats {
      display: none;
      margin: 8px 0 0;
      gap: 8px;
      grid-template-columns: 1fr 1fr 1.35fr;
    }
    .desk.is-oral .board-stats {
      display: grid;
    }
    .stat {
      position: relative;
      background: rgba(232, 240, 200, .16);
      border-radius: 14px;
      padding: 8px 8px 10px;
      text-align: center;
      box-shadow: inset 0 0 0 2px rgba(232, 240, 200, .12);
    }
    .stat-minus {
      position: absolute;
      left: 50%;
      top: 6px;
      z-index: 2;
      font-family: "Fredoka", sans-serif;
      font-size: 28px;
      font-weight: 700;
      color: #f4c1b0;
      text-shadow: 0 2px 0 #1e463c;
      pointer-events: none;
    }
    .stat-label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .16em;
      color: #9bb89a;
      margin-bottom: 2px;
    }
    .board-stats strong {
      display: block;
      font-family: "Fredoka", sans-serif;
      font-size: clamp(36px, 9vw, 56px);
      line-height: 1.05;
      color: #fff6c2;
      font-weight: 700;
      transform-origin: 50% 50%;
    }
    .stat-title {
      font: inherit;
      width: 100%;
      color: inherit;
    }
    .stat-title strong {
      font-family: "ZCOOL QingKe HuangYou", "Noto Sans SC", sans-serif;
      font-size: clamp(22px, 5.6vw, 34px);
      color: var(--honey);
      padding-top: 6px;
    }
    .desk.is-oral .stat-title:active {
      transform: scale(0.98);
    }
    .title-gallery {
      position: fixed;
      inset: 0;
      z-index: 15000;
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b));
    }
    .title-gallery[hidden] { display: none !important; }
    .title-gallery-mask {
      position: absolute;
      inset: 0;
      background: rgba(30, 10, 0, .55);
    }
    .title-gallery-board {
      position: relative;
      z-index: 1;
      width: min(920px, 100%);
      overflow: auto;
      padding: 16px 16px 20px;
      border-radius: 18px;
      background: var(--board);
      box-shadow:
        inset 0 0 0 3px #16352e,
        inset 0 0 40px rgba(0, 0, 0, .25),
        0 18px 40px rgba(30, 10, 0, .4);
    }
    .title-gallery-close {
      position: absolute;
      top: 10px;
      right: 10px;
      min-width: 64px;
      min-height: 64px;
      border-radius: 16px;
      background: var(--chalk);
      color: var(--board);
      font-size: 24px;
      font-weight: 700;
    }
    .title-gallery-kicker {
      margin: 0 72px 4px 0;
      font-size: 13px;
      letter-spacing: .18em;
      color: #9bb89a;
      font-weight: 700;
    }
    .title-gallery-now {
      margin: 0 72px 14px 0;
      font-family: "ZCOOL QingKe HuangYou", "Noto Sans SC", sans-serif;
      font-size: clamp(32px, 7vw, 48px);
      line-height: 1.15;
      color: var(--honey);
    }
    .title-gallery-chapter {
      margin: 14px 0 8px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .16em;
      color: #9bb89a;
    }
    .title-gallery-chapter:first-child { margin-top: 0; }
    .title-gallery-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
    }
    .title-chip {
      margin: 0;
      padding: 8px 4px;
      border-radius: 10px;
      text-align: center;
      font-family: "ZCOOL QingKe HuangYou", "Noto Sans SC", sans-serif;
      font-size: clamp(13px, 2.8vw, 18px);
      line-height: 1.2;
      color: #6d8f6c;
      background: rgba(0, 0, 0, .22);
      box-shadow: inset 0 0 0 1px rgba(155, 184, 154, .12);
    }
    .title-chip.is-got {
      color: #fff6c2;
      background: rgba(232, 184, 74, .22);
      box-shadow: inset 0 0 0 1px rgba(232, 184, 74, .4);
    }
    .title-chip.is-now {
      color: #3a1f10;
      background: linear-gradient(#fff6c2, #e8b84a);
      box-shadow: 0 0 0 3px rgba(232, 184, 74, .7);
    }
    .wrong-list {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .wrong-empty {
      margin: 24px 8px 8px;
      font-size: 20px;
      font-weight: 700;
      color: #9bb89a;
    }
    .wrong-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin: 0;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(232, 240, 200, .12);
      box-shadow: inset 0 0 0 2px rgba(232, 240, 200, .1);
    }
    .wrong-sum {
      font-family: "Fredoka", "Noto Sans SC", sans-serif;
      font-size: clamp(28px, 6vw, 36px);
      font-weight: 700;
      color: #fff6c2;
      letter-spacing: .06em;
    }
    .wrong-times {
      font-size: 16px;
      font-weight: 700;
      color: #f4c1b0;
      white-space: nowrap;
    }
    @media (max-width: 520px) {
      .title-gallery-grid { grid-template-columns: repeat(2, 1fr); }
      .title-chip { font-size: 18px; padding: 10px 6px; }
    }
    .gain-bar {
      display: none;
      margin: 10px 0 0;
    }
    .desk.is-oral .gain-bar { display: block; }
    .gain-bar .stat-label { margin-bottom: 6px; }
    .gain-row {
      display: flex;
      align-items: stretch;
      gap: 8px;
    }
    .gain-stocks {
      display: flex;
      align-items: stretch;
      gap: 5px;
      flex: 0 0 auto;
    }
    .gain-stocks:empty { display: none; }
    .gain-stock {
      width: 12px;
      border-radius: 4px;
      background: linear-gradient(180deg, #fff6c2 0%, #e8b84a 42%, #b47a1a 100%);
      box-shadow: inset 0 0 6px rgba(255, 246, 194, .45), 0 2px 0 #8a4a24;
    }
    .gain-stock-count {
      align-self: center;
      margin: 0 2px 0 2px;
      font-family: "Fredoka", sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: #fff6c2;
      text-shadow: 0 2px 0 #1e463c;
    }
    .gain-row .gain-track { flex: 1; min-width: 0; }
    .gain-track {
      position: relative;
      height: 48px;
      border-radius: 16px;
      overflow: hidden;
      background: rgba(0, 0, 0, .28);
      box-shadow: inset 0 0 0 2px rgba(232, 240, 200, .16);
    }
    .gain-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0%;
      border-radius: 16px;
      background: linear-gradient(90deg, #b47a1a 0%, #e8b84a 55%, #fff6c2 100%);
      box-shadow: inset 0 0 12px rgba(255, 246, 194, .35);
      transition: background 0.35s ease, box-shadow 0.35s ease;
    }
    .gain-fill.is-cold {
      background: linear-gradient(90deg, #3d5c68 0%, #6a8f9a 55%, #c5dde0 100%);
      box-shadow: inset 0 0 12px rgba(197, 221, 224, .28);
    }
    .gain-value {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      margin: 0;
      font-family: "Fredoka", sans-serif;
      font-size: clamp(26px, 6.4vw, 36px);
      font-weight: 700;
      color: #fff6c2;
      text-shadow: 0 2px 0 #1e463c;
    }
    .caption {
      margin: 0;
      font-family: "ZCOOL QingKe HuangYou", "Noto Sans SC", sans-serif;
      font-size: clamp(28px, 7vw, 40px);
      line-height: 1.25;
      color: var(--chalk);
      min-height: 1.25em;
    }

    .stage {
      --plate-size: 92px;
      --plate-gap: 12px;
      min-width: 0;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      contain: strict;
      background:
        radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .12), transparent 55%),
        #d9a066;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 8px 16px;
      box-shadow: inset 0 8px 18px rgba(90, 40, 10, .18);
      position: relative;
    }
    .stage.is-drop {
      box-shadow:
        inset 0 8px 18px rgba(90, 40, 10, .18),
        inset 0 0 0 4px var(--chalk);
    }
    .drop-hint {
      position: absolute;
      margin: 0;
      font-weight: 700;
      font-size: 18px;
      color: rgba(58, 31, 16, .55);
      pointer-events: none;
    }
    .drop-hint.is-hidden { display: none; }
    .plates {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      gap: var(--plate-gap);
      width: calc(3 * var(--plate-size) + 2 * var(--plate-gap));
      height: calc(3 * var(--plate-size) + 2 * var(--plate-gap));
      max-width: 100%;
      max-height: 100%;
      flex: 0 0 auto;
    }

    .plate {
      position: relative;
      width: var(--plate-size);
      height: var(--plate-size);
      flex: 0 0 auto;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }
    .plate.is-dragging { opacity: .35; }
    .plate.is-drop .plate-rim { fill: var(--honey); }
    .plate.is-drop .plate-rim-mid { fill: #f3d27a; }
    .plate.is-drop .plate-lip { fill: var(--honey-edge); }
    .plate.is-drop .plate-rim-glint { stroke: #fff8d2; }
    .plate:focus-visible {
      outline: 3px solid var(--honey);
      outline-offset: 4px;
      border-radius: 50%;
    }
    .plate-face {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: var(--plate);
      box-shadow: 0 8px 0 rgba(80, 40, 10, .18);
      position: relative;
      overflow: hidden;
    }
    .plate-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      z-index: 0;
    }
    .plate-rim { fill: var(--enamel); }
    .plate-rim-mid { fill: #3d9d93; }
    .plate-lip { fill: var(--enamel-deep); }
    .plate-well { fill: var(--plate); }
    .plate-well-lit { fill: #fffdf8; opacity: .72; }
    .plate-shade { fill: #c4b394; opacity: .3; }
    .plate-shine { fill: #fff; opacity: .48; }
    .plate-well-ring {
      fill: none;
      stroke: #fff8ee;
      stroke-width: 1.2;
    }
    .plate-rim-glint {
      fill: none;
      stroke: #e8fff8;
      stroke-width: 2.6;
      stroke-linecap: round;
      opacity: .55;
    }
    .plate-hint {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: rgba(42, 122, 114, .55);
      pointer-events: none;
      padding: 18px;
      text-align: center;
      line-height: 1.2;
    }
    .plate.is-full .plate-hint { display: none; }
    .plate:not(.is-empty) .plate-hint { display: none; }
    .ring {
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      border: 3px dashed var(--chalk);
      pointer-events: none;
      opacity: 0;
      transform: scale(.7);
      filter: drop-shadow(0 0 4px rgba(30, 70, 50, .4));
    }
    .plate.is-messy .plate-rim { fill: var(--mess); }
    .plate.is-messy .plate-rim-mid { fill: #d97848; }
    .plate.is-messy .plate-lip { fill: #8a3a14; }
    .plate.is-messy .plate-rim-glint { stroke: #ffd8c4; }

    .apple {
      position: absolute;
      width: 34%;
      height: 34%;
      transform: translate(-50%, -50%);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      appearance: none;
      background: transparent;
      padding: 0;
      border-radius: 50%;
      touch-action: none;
      user-select: none;
    }
    .apple.is-dragging { opacity: .25; }
    .apple svg { width: 72%; height: 80%; display: block; pointer-events: none; }
    .plate.is-packed .apple { width: 28%; height: 28%; }

    .eq-board {
      background:
        linear-gradient(180deg, rgba(255, 248, 230, .55), transparent 28%),
        var(--paper);
      border-radius: 16px;
      padding: 12px 14px 14px;
      box-shadow:
        inset 0 0 0 2px rgba(90, 50, 20, .14),
        inset 0 1px 0 rgba(255, 250, 235, .7);
    }
    .eq {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 2px 4px;
      min-height: 32px;
      font-family: "Fredoka", "Noto Sans SC", sans-serif;
      font-weight: 700;
      font-size: clamp(20px, 4.6vw, 26px);
      letter-spacing: .02em;
      line-height: 1;
      color: rgba(58, 31, 16, .62);
    }
    .eq .num, .eq .op {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: .7em;
    }
    .eq .plus {
      color: var(--pine-ink);
      width: 26px;
      height: 26px;
      border-radius: 7px;
      background: linear-gradient(#f3d27a, var(--honey));
      box-shadow: 0 2px 0 var(--honey-edge);
      font-size: 18px;
    }
    .eq .sum { color: rgba(58, 31, 16, .82); }
    .eq.is-long {
      font-size: clamp(16px, 3.6vw, 22px);
      gap: 2px 3px;
    }
    .eq.is-long .plus {
      width: 22px;
      height: 22px;
      font-size: 14px;
    }
    .eq-mul {
      color: var(--enamel-deep);
      min-height: 74px;
      margin-top: 8px;
      padding-top: 10px;
      gap: 10px 12px;
      font-size: clamp(30px, 6.6vw, 42px);
      border-top: 1px dashed rgba(90, 50, 20, .28);
    }
    .eq-mul .cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 2.2em;
    }
    .eq-mul .cell small {
      font-family: "Noto Sans SC", sans-serif;
      font-size: clamp(12px, 2.8vw, 14px);
      font-weight: 700;
      white-space: nowrap;
      letter-spacing: .08em;
      color: #8a5a28;
      line-height: 1.2;
    }
    .eq-mul .times {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: linear-gradient(#4aa79e, var(--enamel));
      color: #f4fff8;
      box-shadow: 0 4px 0 var(--enamel-deep);
      font-size: 24px;
    }
    .eq-mul .cell:last-child .num {
      color: var(--honey-edge);
    }
    .eq-labels {
      display: none;
    }

    .palette {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .palette-bin {
      flex: 1;
      background: rgba(255, 236, 200, .62);
      border-radius: 16px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: inset 0 0 0 2px rgba(90, 50, 20, .12);
    }
    .palette-bin.is-drop {
      box-shadow: inset 0 0 0 3px var(--enamel);
      background: rgba(232, 240, 200, .75);
    }
    .palette-bin p {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--pine-ink);
    }
    .source {
      touch-action: none;
      user-select: none;
      cursor: grab;
      background: transparent;
      padding: 0;
    }
    .source:active, .plate:active, .apple:active { cursor: grabbing; }
    .source-plate {
      width: 84px;
      height: 84px;
    }
    .source-plate .plate-face {
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .source-apple {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .source-apple svg { width: 40px; height: 44px; pointer-events: none; }

    .drag-ghost {
      position: fixed;
      left: 0;
      top: 0;
      pointer-events: none;
      z-index: 10000;
      margin: 0;
      filter: drop-shadow(0 10px 12px rgba(40, 20, 0, .28));
    }
    .drag-ghost.ghost-plate {
      width: 92px;
      height: 92px;
    }
    .drag-ghost.ghost-plate .plate-face {
      width: 100%;
      height: 100%;
    }
    .drag-ghost.ghost-apple {
      width: 40px;
      height: 44px;
    }
    .drag-ghost.ghost-apple svg { width: 100%; height: 100%; display: block; }
    body.is-dragging { cursor: grabbing; user-select: none; }

    .controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .stepper {
      background: rgba(255, 236, 200, .55);
      border-radius: 16px;
      padding: 8px;
      display: grid;
      grid-template-columns: 64px 1fr 64px;
      align-items: center;
      gap: 4px;
    }
    .stepper span {
      text-align: center;
      font-weight: 700;
      line-height: 1.15;
    }
    .stepper .label {
      display: block;
      font-size: 12px;
      color: var(--pine-ink);
    }
    .stepper .value {
      font-family: "Fredoka", sans-serif;
      font-size: 28px;
    }
    .wood {
      width: 64px;
      height: 64px;
      border-radius: 14px;
      background: linear-gradient(#f3d27a, #e0a83a);
      box-shadow: 0 5px 0 var(--honey-edge), 0 8px 12px rgba(80, 40, 0, .22);
      font-family: "Fredoka", sans-serif;
      font-size: 32px;
      font-weight: 700;
      color: var(--pine-ink);
    }
    .wood:active {
      transform: translateY(4px);
      box-shadow: 0 1px 0 var(--honey-edge);
    }
    .wood:disabled {
      opacity: .38;
      cursor: not-allowed;
      transform: none;
    }

    .actions {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .desk.is-quiz .lab-only { display: none; }
    .desk:not(.is-quiz) .quiz-only { display: none; }
    .desk.is-quiz {
      grid-template-rows: auto minmax(280px, 1fr) auto;
    }
    .desk.is-quiz .eq-board { display: none; }
    .desk.is-quiz .palette { grid-row: 2; }
    .desk.is-quiz .controls { grid-row: 3; }
    .desk.is-quiz .stage { align-self: stretch; height: auto; }
    .desk.is-oral .stage,
    .desk.is-oral .palette,
    .desk.is-oral .eq-board,
    .desk.is-oral .controls { display: none; }
    .oral-only { display: none; }

    body.is-oral-page .room {
      align-items: stretch;
      padding: calc(8px + var(--safe-t)) 8px calc(8px + var(--safe-b));
    }
    .desk.is-oral {
      width: 100%;
      min-height: calc(100dvh - 16px - var(--safe-t) - var(--safe-b));
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 10px;
      padding: 12px;
    }
    .desk.is-oral .oral-only {
      display: flex;
    }
    .desk.is-oral .problem {
      font-size: clamp(64px, 16vw, 120px);
      margin: 10px 0 8px;
    }
    .desk.is-oral .caption {
      display: none;
    }
    .oral-panel {
      grid-column: 1;
      grid-row: 2;
      min-height: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 14px 14px 16px;
      border-radius: 18px;
      background:
        radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .12), transparent 55%),
        #d9a066;
      box-shadow: inset 0 8px 18px rgba(90, 40, 10, .18);
    }
    .oral-answer {
      position: relative;
      margin: 0;
      width: 100%;
      min-height: clamp(64px, 12vh, 96px);
      padding: 8px 20px;
      border-radius: 16px;
      background: var(--board);
      box-shadow:
        inset 0 0 0 3px #16352e,
        inset 0 0 24px rgba(0, 0, 0, .22);
      font-family: "Fredoka", "Noto Sans SC", sans-serif;
      font-size: clamp(44px, 10vw, 72px);
      font-weight: 700;
      line-height: 1.15;
      color: #fff6c2;
      text-align: center;
      letter-spacing: .08em;
    }
    .oral-digits { display: block; min-height: 1.15em; }
    .oral-digits:empty::after {
      content: "？";
      color: #9bb89a;
    }
    .oral-answer.is-ok {
      box-shadow:
        inset 0 0 0 3px #3d9d93,
        inset 0 0 24px rgba(0, 0, 0, .22);
    }
    .oral-answer.is-bad {
      box-shadow:
        inset 0 0 0 3px #c63c32,
        inset 0 0 24px rgba(0, 0, 0, .22);
    }
    .oral-mark {
      position: fixed;
      z-index: 20001;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transform-origin: 50% 50%;
    }
    .oral-mark svg {
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(0 3px 0 rgba(30, 10, 0, .28));
    }
    .keypad {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(4, minmax(0, 1fr));
      gap: 12px;
      width: 100%;
    }
    .key {
      width: 100%;
      height: 100%;
      min-height: 64px;
      border-radius: 18px;
      background: linear-gradient(#f3d27a, #e0a83a);
      box-shadow: 0 6px 0 var(--honey-edge), 0 10px 14px rgba(80, 40, 0, .22);
      font-family: "Fredoka", sans-serif;
      font-size: clamp(28px, 6.5vw, 52px);
      font-weight: 700;
      color: var(--pine-ink);
    }
    .key:active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 var(--honey-edge);
    }
    .key:disabled {
      opacity: .38;
      cursor: not-allowed;
      transform: none;
    }
    .key-mute {
      background: linear-gradient(#efe4c8, #d9c49a);
      font-size: clamp(22px, 5vw, 36px);
    }
    .key-ok {
      background: linear-gradient(#3d9d93, var(--enamel));
      color: #f4fff8;
      box-shadow: 0 6px 0 var(--enamel-deep), 0 10px 14px rgba(80, 40, 0, .22);
    }
    .key-ok:active {
      box-shadow: 0 2px 0 var(--enamel-deep);
    }
    .oral-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-shrink: 0;
    }
    .oral-meta-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }
    .oral-done {
      margin: 0;
      font-family: "Fredoka", "Noto Sans SC", sans-serif;
      font-size: clamp(18px, 4vw, 24px);
      font-weight: 700;
      letter-spacing: .08em;
      color: #3a1f10;
    }
    .oral-reset-btn {
      min-width: 64px;
      min-height: 64px;
      padding: 0 18px;
      border-radius: 16px;
      background: linear-gradient(#efe4c8, #d9c49a);
      box-shadow: 0 5px 0 #b49a6a;
      font-family: "Noto Sans SC", sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--pine-ink);
    }
    .oral-reset-btn:active {
      transform: translateY(3px);
      box-shadow: 0 2px 0 #b49a6a;
    }
    .oral-reset {
      position: fixed;
      inset: 0;
      z-index: 15000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: calc(10px + var(--safe-t)) 16px calc(10px + var(--safe-b));
    }
    .oral-reset[hidden] { display: none !important; }
    .oral-reset-mask {
      position: absolute;
      inset: 0;
      background: rgba(30, 10, 0, .55);
    }
    .oral-reset-board {
      position: relative;
      z-index: 1;
      width: min(420px, 100%);
      padding: 28px 22px 22px;
      border-radius: 20px;
      background: var(--board);
      box-shadow:
        inset 0 0 0 3px #16352e,
        inset 0 0 40px rgba(0, 0, 0, .25),
        0 18px 40px rgba(30, 10, 0, .4);
      text-align: center;
    }
    .oral-reset-title {
      margin: 0 0 10px;
      font-family: "ZCOOL QingKe HuangYou", "Noto Sans SC", sans-serif;
      font-size: clamp(32px, 7vw, 42px);
      color: #fff6c2;
    }
    .oral-reset-copy {
      margin: 0 0 22px;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.45;
      color: #c5d9b8;
    }
    .oral-reset-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .oral-reset-cancel,
    .oral-reset-ok {
      min-height: 64px;
      border-radius: 16px;
      font-family: "Noto Sans SC", sans-serif;
      font-size: 20px;
      font-weight: 700;
    }
    .oral-reset-cancel {
      background: var(--chalk);
      color: var(--board);
    }
    .oral-reset-ok {
      background: linear-gradient(#c63c32, #a32e26);
      color: #fff6c2;
    }
    .quiz-only { grid-template-columns: 1fr; }
    .quiz-only.has-next { grid-template-columns: 1.4fr 1fr; }
    .btn-play {
      height: 64px;
      border-radius: 18px;
      background: linear-gradient(#3d9d93, var(--enamel));
      color: #f4fff8;
      font-size: 22px;
      font-weight: 700;
      box-shadow: 0 6px 0 var(--enamel-deep);
    }
    .btn-play:active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 var(--enamel-deep);
    }
    .btn-play:disabled {
      opacity: .38;
      cursor: not-allowed;
      transform: none;
    }
    .btn-play.is-ready {
      animation: nudge 1.6s ease-in-out 2;
    }

    @keyframes nudge {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    @media (max-width: 520px) {
      .desk { grid-template-columns: 1fr 96px; }
      .source-plate { width: 68px; height: 68px; }
      .palette-bin p { font-size: 12px; }
      .stepper { grid-template-columns: 56px 1fr 56px; }
      .wood, .btn-play { height: 56px; }
      .wood { width: 56px; font-size: 28px; }
      .btn-play { font-size: 20px; }
      .mode { padding: 0 8px; font-size: 13px; min-height: 40px; }
      .eq-mul {
        font-size: clamp(26px, 7.4vw, 32px);
        gap: 6px 8px;
      }
      .eq-mul .times { width: 32px; height: 32px; font-size: 18px; }
      .eq-mul .cell { min-width: 1.8em; gap: 2px; }
      .eq-mul .cell small { font-size: 11px; letter-spacing: .04em; }
    }

    .celebrate,
    .celebrate *,
    .smash,
    .smash * {
      pointer-events: none;
    }
    .celebrate {
      position: fixed;
      inset: 0;
      z-index: 20000;
      overflow: hidden;
    }
    .celebrate-copy {
      position: absolute;
      left: 50%;
      top: 36%;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
    }
    .celebrate-banner {
      position: absolute;
      left: 50%;
      top: 38%;
      margin: 0;
      z-index: 5;
      font-family: "ZCOOL QingKe HuangYou", "Noto Sans SC", sans-serif;
      font-size: clamp(48px, 12vw, 88px);
      color: #fff6c2;
      text-shadow: 0 4px 0 #1e463c, 0 10px 18px rgba(30, 10, 0, .35);
      white-space: nowrap;
    }
    .celebrate-copy .celebrate-banner {
      position: static;
      left: auto;
      top: auto;
    }
    .celebrate-eq {
      margin: 0;
      font-family: "Fredoka", "Noto Sans SC", sans-serif;
      font-size: clamp(44px, 11vw, 80px);
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--honey);
      text-shadow: 0 3px 0 #1e463c, 0 8px 14px rgba(30, 10, 0, .35);
      white-space: nowrap;
    }
    .celebrate-bloom {
      position: absolute;
      display: block;
      line-height: 0;
      z-index: 1;
    }
    .celebrate-bloom svg { width: 100%; height: auto; display: block; overflow: visible; }
    .celebrate-bloom.is-gold {
      filter:
        drop-shadow(0 0 2px #fff8d2)
        drop-shadow(0 0 8px #e8b84a)
        drop-shadow(0 0 16px rgba(232, 184, 74, .7));
    }
    .celebrate-bloom.is-gold svg *,
    .celebrate-gold-apple svg * {
      paint-order: stroke fill;
      stroke: #e8b84a;
      stroke-width: 2.6;
      stroke-linejoin: round;
      stroke-linecap: round;
    }
    .celebrate-cannon {
      position: absolute;
      width: min(150px, 26vw);
      z-index: 4;
      filter: drop-shadow(0 10px 10px rgba(40, 20, 0, .3));
    }
    .celebrate-cannon svg { width: 100%; height: auto; display: block; }
    .celebrate-feitian {
      position: absolute;
      left: 0;
      top: 0;
      width: min(300px, 50vw);
      z-index: 4;
      will-change: transform;
      filter: drop-shadow(0 14px 16px rgba(40, 20, 0, .32));
    }
    .celebrate-feitian img { width: 100%; height: auto; display: block; }

    .celebrate-gold-apple {
      position: absolute;
      display: block;
      line-height: 0;
      z-index: 2;
      filter:
        drop-shadow(0 0 2px #fff8d2)
        drop-shadow(0 0 8px #e8b84a)
        drop-shadow(0 0 16px rgba(232, 184, 74, .75))
        drop-shadow(0 10px 10px rgba(40, 20, 0, .28));
      opacity: 0;
      visibility: hidden;
    }
    .celebrate-gold-apple svg { width: 100%; height: auto; display: block; overflow: visible; }
    .celebrate-gold-flash {
      position: absolute;
      left: 50%;
      top: 42%;
      width: min(70vmin, 520px);
      height: min(70vmin, 520px);
      border-radius: 50%;
      z-index: 3;
      background: radial-gradient(circle, #fffef0 0%, #fff6c2 18%, #e8b84a 46%, transparent 72%);
      opacity: 0;
      pointer-events: none;
    }
    .celebrate-gold-spark {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff6c2;
      box-shadow: 0 0 10px #e8b84a;
      z-index: 3;
      opacity: 0;
    }

    .smash {
      position: fixed;
      inset: 0;
      z-index: 20000;
      overflow: hidden;
    }
    .smash-rock,
    .smash-bomb,
    .smash-shard,
    .smash-dust,
    .smash-spark,
    .smash-flash,
    .smash-fire,
    .smash-smoke {
      position: absolute;
      display: block;
      line-height: 0;
      margin: 0;
    }
    .smash-rock {
      width: min(82vmin, 720px);
      left: 50%;
      top: 42%;
      transform: translate(-50%, calc(-50% - 100vh));
      filter: drop-shadow(0 28px 22px rgba(40, 20, 0, .38));
    }
    .smash-bomb {
      width: min(42vmin, 340px);
      left: 50%;
      top: 42%;
      z-index: 3;
      transform: translate(-50%, calc(-50% - 100vh));
      filter: drop-shadow(0 22px 16px rgba(40, 20, 0, .35));
    }
    .smash-spark {
      width: 42px;
      z-index: 4;
      filter: drop-shadow(0 0 8px #ff6b2c);
    }
    .smash-flash {
      width: min(42vmin, 280px);
      height: min(42vmin, 280px);
      border-radius: 50%;
      background: radial-gradient(circle, #fffef0 0%, #fff6c2 18%, #ff6b2c 48%, transparent 72%);
      z-index: 2;
    }
    .smash-fire,
    .smash-smoke {
      left: 50%;
      top: 42%;
      opacity: 0;
      visibility: hidden;
      z-index: 2;
    }
    .smash-shard,
    .smash-dust {
      left: 50%;
      top: 42%;
      opacity: 0;
      visibility: hidden;
    }
    .smash-rock svg,
    .smash-bomb svg,
    .smash-shard svg,
    .smash-dust svg,
    .smash-spark svg,
    .smash-fire svg,
    .smash-smoke svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .smash-dust { opacity: .7; }

    @media (prefers-reduced-motion: reduce) {
      .btn-play.is-ready { animation: none; }
      .wood:active, .btn-play:active { transform: none; }
    }