.play-page {
  width: min(100% - 32px, 980px);
  margin: 0 auto;
  padding: 28px 0 72px;
}

.play-breadcrumb {
  margin: 0 0 18px;
  color: var(--gray-600, #5f6368);
  font-size: 14px;
}

.play-breadcrumb a { color: inherit; }

.play-hero {
  max-width: 760px;
  margin: 0 auto 26px;
  text-align: center;
}

.play-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: #5b3ec8;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

.play-hero h1 {
  margin: 0;
  font-size: clamp(30px, 7vw, 50px);
  line-height: 1.1;
  letter-spacing: -.04em;
}

.play-hero p {
  max-width: 660px;
  margin: 14px auto 0;
  color: var(--gray-700, #43464b);
  line-height: 1.7;
}

.play-hero-actions,
.play-toolbar,
.play-preset-row,
.play-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.play-button,
.play-chip,
.play-choice,
.play-card-link {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.play-button,
.play-chip {
  min-height: 44px;
  border: 1px solid #dadce0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink, #171717);
  cursor: pointer;
  font-weight: 800;
}

.play-button { padding: 11px 17px; }
.play-chip { padding: 9px 13px; font-size: 14px; }

.play-button-primary {
  border-color: #5b3ec8;
  background: #5b3ec8;
  color: #fff;
}

.play-button:hover,
.play-chip:hover,
.play-chip.is-active { border-color: #5b3ec8; background: #f2efff; }
.play-button-primary:hover { background: #4a2fb5; color: #fff; }

.play-button:focus-visible,
.play-chip:focus-visible,
.play-choice:focus-visible,
.play-card-link:focus-visible,
.play-input:focus-visible,
.play-textarea:focus-visible,
.play-select:focus-visible,
.reaction-stage:focus-visible,
.color-choice:focus-visible,
.click-speed-stage:focus-visible,
.memory-card:focus-visible,
.number-search-cell:focus-visible,
.bingo-cell:focus-visible,
.rps-choice-grid button:focus-visible,
.ladder-start-button:focus-visible,
.nickname-style-grid button:focus-visible,
.nickname-result-card:focus-visible,
.certificate-theme-grid button:focus-visible,
.name-compatibility-mode-grid button:focus-visible,
.name-compatibility-result:focus,
.zodiac-result:focus,
.emoji-quiz-card:focus,
.drawing-option-grid button:focus-visible,
.drawing-prompt-card:focus,
.truth-option-grid button:focus-visible,
.truth-game:focus,
.writing-genre-grid button:focus-visible,
.writing-prompt-card:focus,
.challenge-category-grid button:focus-visible,
.challenge-card:focus,
.story-genre-grid button:focus-visible,
.story-relay-game:focus,
.tarot-category-grid button:focus-visible,
.tarot-spread-grid button:focus-visible,
.tarot-reading:focus,
.detective-case-grid button:focus-visible,
.detective-suspect-grid button:focus-visible,
.detective-game:focus,
.detective-result:focus,
.mafia-mode-grid button:focus-visible,
.mafia-pass-stage:focus,
.escape-episode-grid button:focus-visible,
.escape-game:focus {
  outline: 3px solid #ffd93d;
  outline-offset: 3px;
}

.charades-category-grid button:focus-visible,
.charades-time-grid button:focus-visible,
.charades-game-stage:focus,
.charades-summary:focus,
.charades-actions button:focus-visible,
.adventure-story-grid button:focus-visible,
.adventure-game:focus,
.adventure-choices button:focus-visible,
.adventure-ending:focus,
.adventure-back:focus-visible,
.pixel-size-grid button:focus-visible,
.pixel-tool-grid button:focus-visible,
.pixel-palette button:focus-visible,
.pixel-canvas button:focus-visible,
.pixel-art-options button:focus-visible,
.sound-preset-row button:focus-visible,
.sound-timer-grid button:focus-visible,
.sound-track-grid input:focus-visible,
.sound-master-field input:focus-visible,
.baseball-length-grid button:focus-visible,
.baseball-keypad button:focus-visible,
.baseball-stage:focus,
.baseball-result:focus,
.word-guess-category-grid button:focus-visible,
.word-guess-stage:focus,
.word-guess-result:focus,
.falling-speed-grid button:focus-visible,
.falling-board:focus,
.falling-controls button:focus-visible,
.falling-stage:focus,
.falling-result:focus,
.word-chain-difficulty-grid button:focus-visible,
.word-chain-stage:focus,
.word-chain-result:focus,
.water-sort-level-grid button:focus-visible,
.water-sort-tube:focus-visible,
.water-sort-stage:focus,
.water-sort-result:focus,
.proverb-mode-grid button:focus-visible,
.proverb-options button:focus-visible,
.proverb-stage:focus,
.proverb-result:focus,
.lights-out-size-grid button:focus-visible,
.lights-out-cell:focus-visible,
.lights-out-stage:focus,
.lights-out-result:focus,
.fortune-category-grid button:focus-visible,
.fortune-cookie-button:focus-visible,
.fortune-cookie-stage:focus,
.fortune-cookie-result:focus,
.crossword-board input:focus-visible,
.crossword-clues button:focus-visible,
.crossword-stage:focus,
.crossword-result:focus,
.odd-emoji-difficulty-grid button:focus-visible,
.odd-emoji-board button:focus-visible,
.odd-emoji-stage:focus,
.odd-emoji-result:focus,
.spot-difference-difficulty-grid button:focus-visible,
.spot-difference-board button:focus-visible,
.spot-difference-stage:focus,
.spot-difference-result:focus,
.pattern-difficulty-grid button:focus-visible,
.pattern-memory-board button:focus-visible,
.pattern-memory-stage:focus,
.pattern-memory-result:focus,
.daily-riddle-stage:focus,
.daily-riddle-result:focus,
.one-stroke-difficulty-grid button:focus-visible,
.one-stroke-cell:focus-visible,
.one-stroke-stage:focus,
.one-stroke-result:focus,
.color-order-difficulty-grid button:focus-visible,
.color-order-tile:focus-visible,
.color-order-stage:focus,
.color-order-result:focus,
.perfect-pitch-difficulty-grid button:focus-visible,
.perfect-pitch-listener button:focus-visible,
.perfect-pitch-answers button:focus-visible,
.perfect-pitch-stage:focus,
.perfect-pitch-result:focus,
.rhythm-tap-difficulty-grid button:focus-visible,
.rhythm-listen-button:focus-visible,
.rhythm-tap-pad:focus-visible,
.rhythm-tap-stage:focus,
.rhythm-tap-result:focus,
.pipe-connect-difficulty-grid button:focus-visible,
.pipe-connect-cell:focus-visible,
.pipe-connect-stage:focus,
.pipe-connect-result:focus,
.mole-difficulty-grid button:focus-visible,
.mole-duration-grid button:focus-visible,
.mole-hole:focus-visible,
.mole-actions button:focus-visible,
.mole-stage:focus,
.mole-result:focus,
.brick-difficulty-grid button:focus-visible,
.brick-canvas:focus,
.brick-controls button:focus-visible,
.brick-actions button:focus-visible,
.brick-stage:focus,
.brick-result:focus,
.nonogram-size-grid button:focus-visible,
.nonogram-cell:focus-visible,
.nonogram-tools button:focus-visible,
.nonogram-stage:focus,
.nonogram-result:focus,
.sliding-size-grid button:focus-visible,
.sliding-board:focus,
.sliding-tile:focus-visible,
.sliding-direction-pad button:focus-visible,
.sliding-actions button:focus-visible,
.sliding-stage:focus,
.sliding-result:focus,
.minesweeper-level-grid button:focus-visible,
.minesweeper-cell:focus-visible,
.minesweeper-tools button:focus-visible,
.minesweeper-stage:focus,
.minesweeper-result:focus,
.snake-mode-grid button:focus-visible,
.snake-speed-grid button:focus-visible,
.snake-board:focus,
.snake-direction-pad button:focus-visible,
.snake-actions button:focus-visible,
.snake-stage:focus,
.snake-result:focus,
.game-2048-board:focus,
.game-2048-direction-pad button:focus-visible,
.game-2048-actions button:focus-visible,
.game-2048-result:focus,
.gomoku-option-grid button:focus-visible,
.gomoku-difficulty-grid button:focus-visible,
.gomoku-cell:focus-visible,
.gomoku-stage:focus,
.gomoku-result:focus,
.piano-instrument-grid button:focus-visible,
.piano-settings button:focus-visible,
.piano-settings input:focus-visible,
.piano-keyboard button:focus-visible,
.piano-actions button:focus-visible,
.maze-size-grid button:focus-visible,
.maze-board:focus,
.maze-direction-pad button:focus-visible,
.maze-tools button:focus-visible,
.maze-stage:focus,
.maze-complete:focus,
.bubble-option-grid button:focus-visible,
.bubble-board button:focus-visible,
.bubble-actions button:focus-visible,
.word-search-option-grid button:focus-visible,
.word-search-board button:focus-visible,
.word-search-tools button:focus-visible,
.word-search-stage:focus,
.word-search-complete:focus,
.plant-species-grid button:focus-visible,
.plant-care-grid button:focus-visible,
.plant-profile button:focus-visible,
.plant-garden:focus,
.sudoku-option-grid button:focus-visible,
.sudoku-board button:focus-visible,
.sudoku-number-pad button:focus-visible,
.sudoku-tools button:focus-visible,
.sudoku-board-stage:focus,
.sudoku-complete:focus {
  outline: 3px solid #ffd93d;
  outline-offset: 3px;
}

.play-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 26px 0;
}

.play-card-link {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #e1e3e8;
  border-radius: 18px;
  background: #fff;
  color: var(--ink, #171717);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}

.play-card-link:hover { transform: translateY(-3px); border-color: #8d7be0; }
.play-card-icon { font-size: 38px; }
.play-card-link h2 { margin: 16px 0 8px; font-size: 22px; }
.play-card-link p { margin: 0; color: #555a62; line-height: 1.6; }
.play-card-meta { margin-top: auto; padding-top: 18px; color: #5b3ec8; font-size: 13px; font-weight: 900; }

.play-panel,
.play-copy-section,
.play-faq,
.play-related {
  margin: 26px 0;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid #e1e3e8;
  border-radius: 20px;
  background: #fff;
}

.play-panel { min-height: 380px; }
.play-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.play-panel-head h2 { margin: 0; font-size: 18px; }
.play-progress { color: #686d76; font-size: 13px; font-weight: 800; }

.play-status {
  min-height: 24px;
  margin: 14px 0 0;
  color: #5b3ec8;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.balance-prompt { margin: 22px auto; font-size: clamp(18px, 4vw, 25px); font-weight: 900; text-align: center; }
.balance-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.play-choice {
  min-height: 150px;
  padding: 24px 18px;
  border: 0;
  border-radius: 18px;
  background: #eef5ff;
  color: #17375f;
  cursor: pointer;
  font-size: clamp(17px, 4vw, 23px);
  font-weight: 900;
  line-height: 1.4;
}
.play-choice:last-child { background: #fff0f2; color: #70273a; }
.play-choice:hover { filter: brightness(.97); }

.question-card {
  display: grid;
  min-height: 250px;
  place-items: center;
  padding: 34px;
  border-radius: 22px;
  background: linear-gradient(145deg, #f3efff, #fff7d6);
  text-align: center;
}
.question-card p { margin: 0; font-size: clamp(22px, 5vw, 34px); font-weight: 900; line-height: 1.45; }
.question-card small { align-self: end; color: #5b3ec8; font-weight: 800; }

.initial-card { text-align: center; }
.initial-category { color: #5b3ec8; font-size: 14px; font-weight: 900; }
.initial-letters { margin: 22px 0 10px; font-size: clamp(42px, 13vw, 76px); font-weight: 950; letter-spacing: .12em; }
.initial-hint { min-height: 24px; color: #666b73; }
.play-form { display: flex; gap: 10px; max-width: 560px; margin: 22px auto 0; }
.play-input,
.play-textarea,
.play-select {
  width: 100%;
  border: 1px solid #cfd2d8;
  border-radius: 12px;
  background: #fff;
  color: var(--ink, #171717);
  font: inherit;
}
.play-input { min-height: 48px; padding: 11px 14px; }
.play-textarea { min-height: 100px; padding: 13px 14px; resize: vertical; line-height: 1.55; }
.play-select { min-height: 48px; padding: 11px 38px 11px 14px; }

.roulette-wrap { display: grid; place-items: center; margin: 26px 0; }
.roulette-stage { position: relative; width: min(76vw, 360px); aspect-ratio: 1; }
.roulette-pointer {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-top: 30px solid #222;
  transform: translateX(-50%);
}
.roulette-wheel {
  width: 100%;
  height: 100%;
  border: 8px solid #222;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgb(0 0 0 / 12%);
  transition: transform 4.2s cubic-bezier(.12,.7,.12,1);
}
.roulette-result { min-height: 42px; margin: 18px 0 0; font-size: clamp(22px, 5vw, 32px); font-weight: 950; text-align: center; }

.reaction-stage {
  display: grid;
  width: 100%;
  min-height: 300px;
  place-content: center;
  gap: 10px;
  padding: 28px;
  border: 0;
  border-radius: 20px;
  background: #eceef2;
  color: #2f3338;
  cursor: pointer;
  text-align: center;
  transition: background-color .16s ease, color .16s ease;
}
.reaction-stage strong { font-size: clamp(25px, 6vw, 40px); line-height: 1.2; }
.reaction-stage span { font-size: 15px; font-weight: 750; }
.reaction-stage[data-state="waiting"] { background: #fff1cd; color: #624a0f; }
.reaction-stage[data-state="ready"] { background: #20ad68; color: #fff; }
.reaction-stage[data-state="early"] { background: #ffdce1; color: #75283a; }
.reaction-stage[data-state="complete"] { background: #eee9ff; color: #4a319f; }

.typing-sample {
  min-height: 122px;
  margin: 0 0 14px;
  padding: 22px;
  border-radius: 16px;
  background: #f5f3ff;
  color: #32285b;
  font-size: clamp(17px, 3.6vw, 21px);
  font-weight: 800;
  line-height: 1.75;
  word-break: keep-all;
}
.typing-input { min-height: 138px; }
.typing-input:disabled { background: #f1f2f4; color: #858991; }
.typing-live {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  color: #60656d;
  font-size: 14px;
  font-weight: 750;
}
.typing-live strong { color: #5b3ec8; font-size: 18px; }

.memory-display {
  display: grid;
  min-height: 250px;
  place-content: center;
  gap: 10px;
  padding: 26px;
  border-radius: 20px;
  background: #f1f3f6;
  color: #343940;
  text-align: center;
}
.memory-display strong {
  font-size: clamp(30px, 10vw, 64px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.memory-display span { color: #626870; font-size: 14px; font-weight: 750; }
.memory-display[data-state="showing"] { background: #292f3a; color: #fff; }
.memory-display[data-state="showing"] span { color: #d9dce2; }
.memory-display[data-state="answer"] { background: #fff2ce; color: #60490d; }
.memory-display[data-state="correct"] { background: #dcf8e9; color: #17643c; }
.memory-display[data-state="complete"] { background: #eee9ff; color: #4a319f; }
.memory-form { margin-top: 18px; }
.memory-input { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: .06em; text-align: center; }

.color-word-stage {
  display: grid;
  min-height: 220px;
  place-content: center;
  gap: 8px;
  padding: 24px;
  border-radius: 20px;
  background: #f5f6f8;
  text-align: center;
}
.color-word-stage strong { font-size: clamp(46px, 14vw, 82px); font-weight: 950; line-height: 1.1; }
.color-word-stage span { color: #6b7078; font-size: 14px; font-weight: 750; }
.color-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.color-choice {
  min-height: 56px;
  padding: 12px;
  border: 1px solid #d7dae0;
  border-radius: 13px;
  background: #fff;
  color: #2b2f35;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}
.color-choice:hover:not(:disabled) { border-color: #6d4aff; background: #f3f0ff; }
.color-choice:disabled { cursor: default; opacity: .48; }
.color-live {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 13px;
  color: #626870;
  font-size: 14px;
  font-weight: 750;
}
.color-live strong { color: #5b3ec8; font-size: 18px; }

.click-speed-stage {
  display: grid;
  width: 100%;
  min-height: 300px;
  place-content: center;
  gap: 8px;
  padding: 26px;
  border: 0;
  border-radius: 20px;
  background: #eceef2;
  color: #343940;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.click-speed-stage strong { font-size: clamp(64px, 20vw, 112px); font-variant-numeric: tabular-nums; line-height: 1; }
.click-speed-stage span { font-size: 15px; font-weight: 800; }
.click-speed-stage[data-state="running"] { background: #6d4aff; color: #fff; }
.click-speed-stage[data-state="running"]:active { background: #5d3de5; transform: scale(.995); }
.click-speed-stage[data-state="complete"] { background: #dcf8e9; color: #17643c; }
.click-speed-stage:disabled { cursor: default; opacity: 1; }
.click-speed-live,
.memory-card-live {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 13px;
  color: #626870;
  font-size: 14px;
  font-weight: 750;
}
.click-speed-live strong,
.memory-card-live strong { color: #5b3ec8; font-size: 18px; }

.memory-card-grid {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto;
}
.memory-card {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #d5d9e0;
  border-radius: 16px;
  background: #6d4aff;
  color: #fff;
  cursor: pointer;
  font-size: clamp(24px, 7vw, 42px);
  font-weight: 950;
  line-height: 1;
  transition: transform .16s ease, background-color .16s ease;
}
.memory-card:hover:not(:disabled) { transform: translateY(-2px); }
.memory-card.is-revealed { background: #fff; color: #25282d; transform: rotateY(0); }
.memory-card.is-matched { border-color: #62c995; background: #dcf8e9; color: #17643c; }
.memory-card:disabled { cursor: default; opacity: 1; }

.play-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 190px);
  gap: 14px;
  align-items: end;
}
.play-field { display: grid; gap: 7px; color: #343940; }
.play-field strong { font-size: 15px; }
.play-field small { color: #727780; font-size: 12px; }
.play-field-wide { min-width: 0; }
.utility-name-input { min-height: 150px; }
.utility-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.utility-result-card {
  padding: 18px;
  border: 1px solid #e0e2e7;
  border-radius: 16px;
  background: #f7f6ff;
}
.utility-result-card h3 { margin: 0 0 11px; color: #5b3ec8; font-size: 18px; }
.utility-result-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.utility-result-card li { padding: 8px 10px; border-radius: 9px; background: #fff; font-weight: 800; overflow-wrap: anywhere; }
.lots-result {
  margin-top: 22px;
  padding: 24px;
  border-radius: 18px;
  background: #f7f6ff;
  text-align: center;
}
.lots-result.is-drawing { color: #5b3ec8; font-size: 22px; font-weight: 900; }
.lots-result h3 { margin: 0 0 16px; font-size: 22px; }
.lots-result h4 { margin: 22px 0 8px; color: #626870; font-size: 14px; }
.lots-result p { margin: 0; color: #626870; line-height: 1.7; overflow-wrap: anywhere; }
.lots-winner-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.lots-winner-list span { padding: 10px 14px; border-radius: 999px; background: #6d4aff; color: #fff; font-weight: 900; overflow-wrap: anywhere; }

.number-search-grid {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto;
}
.number-search-cell {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #d5d9e0;
  border-radius: 14px;
  background: #fff;
  color: #282c33;
  cursor: pointer;
  font: inherit;
  font-size: clamp(18px, 4vw, 25px);
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.number-search-cell:hover:not(:disabled) { border-color: #6d4aff; background: #f3f0ff; transform: translateY(-2px); }
.number-search-cell.is-found { border-color: #b9ead1; background: #dcf8e9; color: #23724a; }
.number-search-cell.is-wrong { border-color: #ef8da1; background: #ffdce3; color: #8c2940; transform: scale(.96); }
.number-search-cell:disabled { cursor: default; opacity: .72; }
.number-search-live,
.mental-math-live {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  color: #626870;
  font-size: 14px;
  font-weight: 750;
}
.number-search-live strong,
.mental-math-live strong { color: #5b3ec8; font-size: 18px; font-variant-numeric: tabular-nums; }

.mental-math-stage {
  display: grid;
  min-height: 220px;
  place-content: center;
  gap: 10px;
  padding: 28px;
  border-radius: 20px;
  background: #f3f0ff;
  color: #392975;
  text-align: center;
}
.mental-math-stage span { color: #726790; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.mental-math-stage strong { font-size: clamp(40px, 11vw, 68px); font-variant-numeric: tabular-nums; line-height: 1.15; }
.mental-math-form { max-width: 470px; }
.mental-math-input { font-size: 22px; font-variant-numeric: tabular-nums; text-align: center; }

.up-down-stage {
  display: grid;
  min-height: 230px;
  place-content: center;
  gap: 9px;
  padding: 28px;
  border-radius: 20px;
  background: #eef5ff;
  color: #214f84;
  text-align: center;
  transition: background-color .16s ease, color .16s ease;
}
.up-down-label { font-size: 15px; font-weight: 850; }
.up-down-stage strong { font-size: clamp(50px, 14vw, 82px); font-variant-numeric: tabular-nums; line-height: 1; }
.up-down-bounds { display: flex; width: min(70vw, 360px); justify-content: space-between; margin-top: 10px; font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 900; }
.up-down-stage[data-up-down-state="playing"] { background: #fff4d7; color: #70500c; }
.up-down-stage[data-up-down-state="win"] { background: #dcf8e9; color: #17643c; }
.up-down-stage[data-up-down-state="lose"] { background: #ffdfe5; color: #812d43; }
.up-down-form { max-width: 460px; }
.up-down-input { font-size: 22px; font-variant-numeric: tabular-nums; text-align: center; }

.five-second-card {
  display: grid;
  min-height: 220px;
  place-content: center;
  gap: 14px;
  padding: 30px;
  border-radius: 20px;
  background: linear-gradient(145deg, #f3efff, #fff5d4);
  text-align: center;
  transition: transform .16s ease, box-shadow .16s ease;
}
.five-second-card span { color: #5b3ec8; font-size: 13px; font-weight: 950; letter-spacing: .1em; }
.five-second-card strong { max-width: 680px; font-size: clamp(23px, 5vw, 35px); line-height: 1.45; word-break: keep-all; }
.five-second-card.is-running { box-shadow: 0 0 0 4px #ffd93d; transform: scale(1.01); }
.five-second-timer {
  display: flex;
  width: 104px;
  height: 104px;
  align-items: baseline;
  justify-content: center;
  margin: 18px auto 0;
  padding-top: 27px;
  border: 4px solid #ded9f5;
  border-radius: 50%;
  background: #fff;
  color: #5b3ec8;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}
.five-second-timer strong { font-size: 31px; line-height: 1; }
.five-second-timer span { margin-left: 2px; font-size: 13px; }
.five-second-timer[data-state="running"] { border-color: #ffd93d; background: #fff8d8; color: #6c5200; }
.five-second-timer[data-state="complete"] { border-color: #f29cb5; background: #fff0f3; color: #872c44; }
.five-second-live { display: flex; justify-content: space-between; gap: 14px; margin-top: 15px; color: #626870; font-size: 14px; font-weight: 750; }
.five-second-live strong { color: #5b3ec8; font-size: 18px; font-variant-numeric: tabular-nums; }
.five-second-success { border-color: #16834b; background: #16834b; color: #fff; }
.five-second-success:hover { border-color: #116c3d; background: #116c3d; color: #fff; }

.bingo-item-input { min-height: 190px; }
.bingo-grid {
  display: grid;
  width: min(100%, 620px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 24px auto 0;
}
.bingo-cell {
  position: relative;
  display: grid;
  min-height: 104px;
  place-items: center;
  padding: 11px 7px;
  border: 1px solid #d8dbe2;
  border-radius: 13px;
  background: #fff;
  color: #30343a;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
  touch-action: manipulation;
  transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}
.bingo-cell:hover { border-color: #6d4aff; background: #f5f2ff; transform: translateY(-1px); }
.bingo-cell.is-checked { border-color: #5b3ec8; background: #6d4aff; color: #fff; }
.bingo-cell.is-checked::after {
  position: absolute;
  top: 5px;
  right: 7px;
  content: '✓';
  font-size: 15px;
  font-weight: 950;
}
.bingo-live { display: flex; justify-content: center; gap: 28px; margin-top: 15px; color: #626870; font-size: 14px; font-weight: 800; }
.bingo-live strong { color: #5b3ec8; font-size: 19px; font-variant-numeric: tabular-nums; }

.seat-chart {
  margin-top: 24px;
  padding: 22px;
  border-radius: 18px;
  background: #f5f6f8;
  overflow-x: auto;
}
.seat-front {
  width: min(70%, 420px);
  margin: 0 auto 24px;
  padding: 9px 18px;
  border-radius: 8px;
  background: #3f4650;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}
.seat-grid { display: grid; grid-template-columns: repeat(var(--seat-columns, 4), minmax(86px, 1fr)); gap: 10px; }
.seat-card {
  display: grid;
  min-height: 82px;
  place-content: center;
  gap: 5px;
  padding: 11px 8px;
  border: 1px solid #d8dbe2;
  border-radius: 13px;
  background: #fff;
  text-align: center;
}
.seat-card span { color: #7a7f88; font-size: 11px; font-weight: 800; }
.seat-card strong { color: #333740; font-size: 15px; overflow-wrap: anywhere; }

.rps-arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.rps-player {
  display: grid;
  min-height: 210px;
  place-content: center;
  gap: 14px;
  border-radius: 20px;
  background: #f3f0ff;
  text-align: center;
}
.rps-player:last-child { background: #fff1e3; }
.rps-player span { color: #6d667e; font-size: 14px; font-weight: 900; }
.rps-player strong { font-size: clamp(54px, 15vw, 88px); line-height: 1; }
.rps-versus { color: #858a92; font-size: 15px; font-weight: 950; }
.rps-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 18px auto 0; }
.rps-choice-grid button {
  display: grid;
  min-height: 104px;
  place-content: center;
  gap: 6px;
  border: 1px solid #d7dae0;
  border-radius: 15px;
  background: #fff;
  color: #30343a;
  cursor: pointer;
  font: inherit;
  transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}
.rps-choice-grid button span { font-size: 36px; line-height: 1; }
.rps-choice-grid button strong { font-size: 14px; }
.rps-choice-grid button:hover:not(:disabled),
.rps-choice-grid button.is-selected { border-color: #6d4aff; background: #f2efff; transform: translateY(-2px); }
.rps-choice-grid button:disabled { cursor: default; opacity: .62; }
.rps-live { display: flex; justify-content: center; gap: 26px; margin-top: 15px; color: #626870; font-size: 14px; font-weight: 800; }
.rps-live strong { color: #5b3ec8; font-size: 19px; font-variant-numeric: tabular-nums; }

.ladder-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ladder-chart { margin-top: 24px; padding: 18px 12px; border-radius: 18px; background: #f6f7f9; overflow-x: auto; }
.ladder-label-grid {
  display: grid;
  min-width: var(--ladder-min-width, 300px);
  grid-template-columns: repeat(var(--ladder-count, 2), minmax(64px, 1fr));
  gap: 8px;
}
.ladder-start-button,
.ladder-end-label {
  display: grid;
  min-height: 48px;
  place-items: center;
  padding: 8px 5px;
  border: 1px solid #d6d9df;
  border-radius: 10px;
  background: #fff;
  color: #34383f;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-align: center;
}
.ladder-start-button { cursor: pointer; }
.ladder-start-button:hover,
.ladder-start-button.is-active { border-color: #6d4aff; background: #eee9ff; color: #4a319f; }
.ladder-start-button.is-revealed { box-shadow: inset 0 -3px 0 #6d4aff; }
.ladder-end-label.is-revealed { border-color: #62c995; background: #dcf8e9; color: #17643c; }
.ladder-canvas { display: block; width: 100%; min-width: var(--ladder-min-width, 300px); margin: 8px 0; border-radius: 12px; background: #fff; }
.ladder-revealed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.ladder-result-item { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 7px; align-items: center; padding: 12px; border-radius: 12px; background: #f3f0ff; text-align: center; }
.ladder-result-item strong { overflow-wrap: anywhere; }
.ladder-result-item span { color: #6d4aff; font-weight: 950; }

.emoji-quiz-categories { margin-top: 0; }
.emoji-quiz-card {
  display: grid;
  min-height: 265px;
  place-content: center;
  gap: 17px;
  padding: 28px;
  border-radius: 20px;
  background: #f5f3ff;
  text-align: center;
  scroll-margin-top: 20px;
  transition: background-color .15s ease, transform .15s ease;
}
.emoji-quiz-card > span { color: #5b3ec8; font-size: 13px; font-weight: 900; letter-spacing: .04em; }
.emoji-quiz-card > strong { font-size: clamp(50px, 14vw, 82px); font-variant-numeric: tabular-nums; line-height: 1.15; word-break: keep-all; }
.emoji-quiz-card > p { max-width: 600px; margin: 0; color: #555a62; font-size: 15px; font-weight: 800; line-height: 1.6; }
.emoji-quiz-card[data-state="correct"] { background: #dcf8e9; color: #17643c; transform: scale(1.01); }
.emoji-quiz-card[data-state="wrong"] { background: #fff0f3; color: #872c44; }
.emoji-quiz-card[data-state="skip"] { background: #fff4d7; color: #70500c; }
.emoji-quiz-card[data-state="complete"] { background: linear-gradient(145deg, #eee9ff, #fff3d1); color: #4a319f; }
.emoji-answer-form {
  display: grid;
  max-width: 650px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 18px auto 0;
}
.emoji-answer-form[hidden] { display: none; }
.emoji-answer-form > .play-button { min-height: 48px; }

.drawing-prompt-options { display: grid; gap: 22px; }
.drawing-option-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.drawing-option-field legend { margin-bottom: 9px; color: #343940; font-size: 15px; font-weight: 900; }
.drawing-option-grid { display: grid; gap: 9px; }
.drawing-category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.drawing-difficulty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drawing-option-grid button {
  display: grid;
  min-height: 82px;
  place-content: center;
  gap: 6px;
  padding: 11px 8px;
  border: 1px solid #d7dae0;
  border-radius: 14px;
  background: #fff;
  color: #34383f;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.drawing-option-grid button span { font-size: 24px; line-height: 1; }
.drawing-option-grid button strong { font-size: 14px; }
.drawing-option-grid button small { color: #777c84; font-size: 11px; font-weight: 750; }
.drawing-option-grid button:hover,
.drawing-option-grid button.is-active { border-color: #6d4aff; background: #f2efff; color: #4a319f; }
.drawing-option-grid button.is-active small { color: #6956ab; }
.drawing-prompt-options > .play-button { justify-self: center; }
.drawing-prompt-card {
  margin-top: 25px;
  padding: clamp(24px, 5vw, 38px);
  border-radius: 20px;
  background: linear-gradient(145deg, #f3efff, #fff5d7);
  text-align: center;
  scroll-margin-top: 20px;
}
.drawing-prompt-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.drawing-prompt-meta span { padding: 7px 10px; border-radius: 999px; background: #fff; color: #5b3ec8; font-size: 12px; font-weight: 900; }
.drawing-prompt-card h3 { max-width: 760px; margin: 18px auto 10px; font-size: clamp(23px, 5vw, 35px); line-height: 1.45; word-break: keep-all; }
.drawing-prompt-card > p { margin: 0; color: #626870; line-height: 1.6; }
.drawing-timer-panel { margin-top: 18px; padding: 22px; border: 1px solid #e0e2e7; border-radius: 17px; background: #fff; text-align: center; }
.drawing-timer-head { display: grid; gap: 5px; }
.drawing-timer-head strong { font-size: 18px; }
.drawing-timer-head span { color: #6c7179; font-size: 13px; }
.drawing-timer-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 15px; }
.drawing-timer {
  margin: 18px auto 0;
  color: #5b3ec8;
  font-size: clamp(48px, 14vw, 76px);
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1;
}
.drawing-timer[data-state="running"] { color: #16835f; }
.drawing-timer[data-state="complete"] { color: #dc5278; }

.truth-setup,
.writing-prompt-options { display: grid; gap: 22px; }
.truth-player-input { min-height: 112px; }
.truth-option-field,
.writing-option-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.truth-option-field legend,
.writing-option-field legend { margin-bottom: 9px; color: #343940; font-size: 15px; font-weight: 900; }
.truth-option-grid,
.writing-genre-grid { display: grid; gap: 10px; }
.truth-mode-grid,
.truth-level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.writing-genre-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.truth-option-grid button,
.writing-genre-grid button {
  display: grid;
  min-height: 88px;
  place-content: center;
  gap: 7px;
  padding: 12px 8px;
  border: 1px solid #d7dae0;
  border-radius: 14px;
  background: #fff;
  color: #34383f;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.truth-option-grid button span,
.writing-genre-grid button span { font-size: 25px; line-height: 1; }
.truth-option-grid button strong,
.writing-genre-grid button strong { font-size: 14px; }
.truth-option-grid button small { color: #777c84; font-size: 11px; font-weight: 750; line-height: 1.45; }
.truth-option-grid button:hover,
.truth-option-grid button.is-active,
.writing-genre-grid button:hover,
.writing-genre-grid button.is-active { border-color: #6d4aff; background: #f2efff; color: #4a319f; }
.truth-option-grid button.is-active small { color: #6956ab; }
.truth-setup > .play-button,
.writing-prompt-options > .play-button { justify-self: center; }
.truth-game { margin-top: 28px; scroll-margin-top: 20px; }
.truth-game[hidden] { display: none; }
.truth-player { display: grid; justify-items: center; gap: 5px; margin-bottom: 12px; }
.truth-player span { color: #777c84; font-size: 13px; font-weight: 850; }
.truth-player strong { color: #4a319f; font-size: clamp(24px, 5vw, 34px); }
.truth-card {
  min-height: 250px;
  padding: clamp(25px, 6vw, 45px);
  border-radius: 20px;
  background: linear-gradient(145deg, #f3efff, #e8f5ff);
  text-align: center;
}
.truth-card[data-type="dare"] { background: linear-gradient(145deg, #fff0f4, #fff7dc); }
.truth-card-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.truth-card-meta span { padding: 7px 11px; border-radius: 999px; background: #fff; color: #5b3ec8; font-size: 13px; font-weight: 950; }
.truth-card[data-type="dare"] .truth-card-meta span { color: #b4325d; }
.truth-card-meta small { color: #747982; font-size: 12px; font-weight: 800; }
.truth-card > p { max-width: 720px; margin: 26px auto 0; font-size: clamp(23px, 5vw, 35px); font-weight: 950; line-height: 1.45; word-break: keep-all; }
.truth-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 18px; }
.truth-stats span { min-width: 104px; padding: 10px 13px; border-radius: 11px; background: #f5f6f8; color: #656a72; font-size: 13px; text-align: center; }
.truth-stats strong { color: #4a319f; font-size: 17px; font-variant-numeric: tabular-nums; }

.writing-prompt-card {
  margin-top: 26px;
  padding: clamp(24px, 5vw, 38px);
  border-radius: 20px;
  background: linear-gradient(145deg, #f0efff, #fff6dc);
  scroll-margin-top: 20px;
}
.writing-prompt-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.writing-prompt-meta span { padding: 7px 10px; border-radius: 999px; background: #fff; color: #5b3ec8; font-size: 12px; font-weight: 900; }
.writing-prompt-card h3 { max-width: 800px; margin: 20px 0 0; font-size: clamp(22px, 4vw, 32px); line-height: 1.55; word-break: keep-all; }
.writing-first-line { margin-top: 20px; padding: 17px 19px; border-radius: 14px; background: rgb(255 255 255 / 82%); }
.writing-first-line strong { color: #6d4aff; font-size: 13px; }
.writing-first-line p { margin: 7px 0 0; color: #34383f; font-size: 17px; font-weight: 850; line-height: 1.65; }
.writing-keywords { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.writing-keywords span { padding: 7px 10px; border-radius: 999px; background: #fff; color: #4a319f; font-size: 12px; font-weight: 850; }
.writing-workspace { margin-top: 20px; padding: 22px; border: 1px solid #e0e2e7; border-radius: 17px; background: #fff; }
.writing-draft { min-height: 320px; resize: vertical; font-size: 16px; line-height: 1.8; }
.writing-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; color: #6c7179; font-size: 12px; font-weight: 800; }
.writing-stats strong { color: #4a319f; font-size: 14px; font-variant-numeric: tabular-nums; }
.writing-timer-panel { margin-top: 18px; padding: 22px; border: 1px solid #e0e2e7; border-radius: 17px; background: #fff; text-align: center; }
.writing-timer-head { display: grid; gap: 5px; }
.writing-timer-head strong { font-size: 18px; }
.writing-timer-head span { color: #6c7179; font-size: 13px; line-height: 1.5; }
.writing-timer-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 15px; }
.writing-timer {
  margin: 18px auto 0;
  color: #5b3ec8;
  font-size: clamp(48px, 14vw, 76px);
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1;
}
.writing-timer[data-state="running"] { color: #16835f; }
.writing-timer[data-state="complete"] { color: #dc5278; }

.challenge-category-grid,
.story-genre-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}
.challenge-category-grid button,
.story-genre-grid button {
  display: grid;
  min-height: 82px;
  place-content: center;
  gap: 6px;
  padding: 11px 7px;
  border: 1px solid #d7dae0;
  border-radius: 14px;
  background: #fff;
  color: #34383f;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.challenge-category-grid button span,
.story-genre-grid button span { font-size: 24px; line-height: 1; }
.challenge-category-grid button strong,
.story-genre-grid button strong { font-size: 13px; }
.challenge-category-grid button:hover,
.challenge-category-grid button.is-active,
.story-genre-grid button:hover,
.story-genre-grid button.is-active { border-color: #6d4aff; background: #f2efff; color: #4a319f; }
.challenge-card {
  margin-top: 20px;
  padding: clamp(26px, 6vw, 48px);
  border-radius: 21px;
  background: linear-gradient(145deg, #edf9f3, #fff4d9);
  text-align: center;
  scroll-margin-top: 20px;
}
.challenge-card[data-state="complete"] { background: linear-gradient(145deg, #dcf8e9, #edf9f3); }
.challenge-card-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.challenge-card-meta span,
.challenge-card-meta small { padding: 7px 10px; border-radius: 999px; background: #fff; color: #347356; font-size: 12px; font-weight: 900; }
.challenge-card h3 { max-width: 720px; margin: 22px auto 12px; font-size: clamp(24px, 5vw, 36px); line-height: 1.5; word-break: keep-all; }
.challenge-card > p { margin: 0; color: #626870; line-height: 1.65; }
.challenge-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }
.challenge-summary > div { display: grid; justify-items: center; gap: 4px; padding: 17px; border: 1px solid #e0e2e7; border-radius: 15px; background: #fff; }
.challenge-summary span { color: #71767d; font-size: 12px; font-weight: 800; }
.challenge-summary strong { color: #347356; font-size: 18px; }
.challenge-summary b { font-size: 28px; font-variant-numeric: tabular-nums; }
.challenge-week { margin-top: 17px; padding: 20px; border: 1px solid #e0e2e7; border-radius: 17px; background: #fff; }
.challenge-week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.challenge-week-head h3 { margin: 0; font-size: 17px; }
.challenge-week-head span { color: #747982; font-size: 12px; }
.challenge-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.challenge-week-grid > div { display: grid; min-width: 0; justify-items: center; gap: 5px; padding: 10px 3px; border: 1px solid #e4e6eb; border-radius: 11px; color: #858991; }
.challenge-week-grid > div.is-today { border-color: #6d4aff; }
.challenge-week-grid > div.is-complete { border-color: #79c5a1; background: #eaf8f1; color: #17643c; }
.challenge-week-grid span,
.challenge-week-grid small { font-size: 11px; font-weight: 800; }
.challenge-week-grid strong { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #f2f3f5; font-size: 17px; }
.challenge-week-grid .is-complete strong { background: #16835f; color: #fff; }

.story-relay-setup { display: grid; gap: 22px; }
.story-player-input { min-height: 105px; }
.story-option-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.story-option-field legend { margin-bottom: 9px; color: #343940; font-size: 15px; font-weight: 900; }
.story-setting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.story-relay-setup > .play-button { justify-self: center; }
.story-relay-game { margin-top: 28px; scroll-margin-top: 20px; }
.story-relay-game[hidden] { display: none; }
.story-turn-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.story-turn-head > div { display: grid; justify-items: center; gap: 4px; padding: 15px; border-radius: 14px; background: #f6f4ff; }
.story-turn-head span { color: #777c84; font-size: 12px; font-weight: 800; }
.story-turn-head strong { color: #4a319f; font-size: 21px; }
.story-premise { margin-top: 14px; padding: 22px; border-radius: 18px; background: linear-gradient(145deg, #f0efff, #fff6dc); }
.story-premise > span { display: inline-block; padding: 7px 10px; border-radius: 999px; background: #fff; color: #5b3ec8; font-size: 12px; font-weight: 900; }
.story-premise h3 { margin: 15px 0 0; font-size: clamp(19px, 4vw, 27px); line-height: 1.55; }
.story-premise p { margin: 15px 0 0; padding: 15px 17px; border-radius: 12px; background: rgb(255 255 255 / 82%); color: #4f545c; line-height: 1.65; }
.story-premise p strong { color: #6d4aff; font-size: 12px; }
.story-event-card { display: grid; justify-items: center; gap: 12px; margin-top: 14px; padding: 24px; border: 1px solid #e1d9ff; border-radius: 18px; background: #f8f6ff; text-align: center; }
.story-event-card > span { padding: 7px 10px; border-radius: 999px; background: #6d4aff; color: #fff; font-size: 12px; font-weight: 900; }
.story-event-card h3 { max-width: 700px; margin: 0; font-size: clamp(19px, 4vw, 26px); line-height: 1.5; word-break: keep-all; }
.story-turn-timer { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0; }
.story-turn-timer > span { color: #5b3ec8; font-size: 35px; font-variant-numeric: tabular-nums; font-weight: 950; letter-spacing: .03em; }
.story-turn-timer > span[data-state="running"] { color: #16835f; }
.story-turn-timer > span[data-state="complete"] { color: #dc5278; }
.story-passage { min-height: 150px; resize: vertical; font-size: 16px; line-height: 1.75; }
.story-output { margin-top: 20px; padding: 22px; border: 1px solid #e0e2e7; border-radius: 17px; background: #fff; }
.story-output-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #eceef2; }
.story-output-head h3 { margin: 0; font-size: 18px; }
.story-output-head span { color: #777c84; font-size: 11px; }
.story-output [data-story-paragraphs] { margin-top: 16px; }
.story-opening-line { padding-left: 13px; border-left: 3px solid #6d4aff; color: #4a319f; font-weight: 850; }
.story-output [data-story-paragraphs] > div { padding: 13px 0; border-top: 1px solid #f0f1f3; }
.story-output [data-story-paragraphs] > div:first-of-type { border-top: 0; }
.story-output [data-story-paragraphs] > div > strong { display: block; margin-bottom: 5px; color: #6d4aff; font-size: 12px; }
.story-output [data-story-paragraphs] p { margin: 0; color: #3d4147; line-height: 1.8; white-space: pre-wrap; }
.story-relay-game[data-state="saved"] .story-passage,
.story-relay-game[data-state="saved"] .story-turn-timer { opacity: .65; }

.name-compatibility-form { display: grid; gap: 22px; }
.name-compatibility-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.name-compatibility-mode-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.name-compatibility-mode-field legend {
  margin-bottom: 9px;
  color: #343940;
  font-size: 15px;
  font-weight: 900;
}
.name-compatibility-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.name-compatibility-mode-grid button {
  display: grid;
  min-height: 88px;
  place-content: center;
  gap: 7px;
  padding: 12px 8px;
  border: 1px solid #d7dae0;
  border-radius: 14px;
  background: #fff;
  color: #34383f;
  cursor: pointer;
  font: inherit;
}
.name-compatibility-mode-grid button span { font-size: 25px; line-height: 1; }
.name-compatibility-mode-grid button strong { font-size: 14px; }
.name-compatibility-mode-grid button:hover,
.name-compatibility-mode-grid button.is-active {
  border-color: #6d4aff;
  background: #f2efff;
  color: #4a319f;
}
.name-compatibility-result {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-top: 26px;
  padding: 24px;
  border-radius: 18px;
  background: #f7f5ff;
  scroll-margin-top: 20px;
}
.name-compatibility-result[hidden] { display: none; }
.name-compatibility-score {
  --compat-score: 0;
  position: relative;
  display: grid;
  width: 170px;
  height: 170px;
  place-content: center;
  gap: 3px;
  border-radius: 50%;
  background: conic-gradient(#6d4aff calc(var(--compat-score) * 1%), #dedbe8 0);
  text-align: center;
}
.name-compatibility-score::before {
  position: absolute;
  inset: 13px;
  border-radius: inherit;
  background: #fff;
  content: '';
}
.name-compatibility-score span,
.name-compatibility-score strong { position: relative; z-index: 1; }
.name-compatibility-score span { color: #6b6577; font-size: 13px; font-weight: 850; }
.name-compatibility-score strong { color: #4a319f; font-size: 22px; }
.name-compatibility-score b { font-size: 48px; font-variant-numeric: tabular-nums; line-height: 1; }
.name-compatibility-kicker { color: #6d4aff; font-size: 13px; font-weight: 900; }
.name-compatibility-summary h3 { margin: 7px 0 9px; font-size: clamp(23px, 4vw, 31px); }
.name-compatibility-summary > p { margin: 0; color: #555a62; line-height: 1.7; }
.name-compatibility-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
.name-compatibility-metrics div { padding: 11px 9px; border-radius: 11px; background: #fff; text-align: center; }
.name-compatibility-metrics span { display: block; color: #777c84; font-size: 12px; font-weight: 800; }
.name-compatibility-metrics strong { display: block; margin-top: 3px; color: #4a319f; font-size: 18px; font-variant-numeric: tabular-nums; }
.name-compatibility-prompt { grid-column: 1 / -1; padding: 17px 19px; border-radius: 13px; background: #fff; }
.name-compatibility-prompt strong { color: #6d4aff; font-size: 13px; }
.name-compatibility-prompt p { margin: 6px 0 0; color: #34383f; font-size: 17px; font-weight: 850; line-height: 1.5; }

.zodiac-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.zodiac-form > .play-button { min-height: 48px; white-space: nowrap; }
.zodiac-result {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-top: 26px;
  padding: 25px;
  border-radius: 18px;
  background: linear-gradient(145deg, #f3efff, #fff7df);
  scroll-margin-top: 20px;
}
.zodiac-result[hidden] { display: none; }
.zodiac-result-symbol {
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #5b3ec8;
  font-size: 68px;
  line-height: 1;
  box-shadow: 0 8px 24px rgb(91 62 200 / 12%);
}
.zodiac-result-copy > span { color: #6d4aff; font-size: 13px; font-weight: 900; }
.zodiac-result-copy h3 { margin: 7px 0 9px; font-size: clamp(28px, 5vw, 38px); }
.zodiac-result-copy > p { margin: 0; color: #555a62; line-height: 1.7; }
.zodiac-keywords { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.zodiac-keywords span { padding: 7px 10px; border-radius: 999px; background: #fff; color: #4a319f; font-size: 12px; font-weight: 850; }
.zodiac-tip { grid-column: 1 / -1; padding: 17px 19px; border-radius: 13px; background: #fff; }
.zodiac-tip strong { color: #6d4aff; font-size: 13px; }
.zodiac-tip p { margin: 6px 0 0; color: #34383f; font-size: 17px; font-weight: 850; line-height: 1.5; }
.zodiac-result > .play-result-actions { grid-column: 1 / -1; margin-top: 0; }

.nickname-form { display: grid; gap: 22px; }
.nickname-style-field,
.certificate-theme-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.nickname-style-field legend,
.certificate-theme-field legend {
  margin-bottom: 9px;
  color: #343940;
  font-size: 15px;
  font-weight: 900;
}
.nickname-style-grid,
.certificate-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.nickname-style-grid button,
.certificate-theme-grid button {
  display: grid;
  min-height: 92px;
  place-content: center;
  gap: 7px;
  padding: 13px 8px;
  border: 1px solid #d7dae0;
  border-radius: 14px;
  background: #fff;
  color: #34383f;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.nickname-style-grid button span,
.certificate-theme-grid button span { font-size: 26px; line-height: 1; }
.nickname-style-grid button strong,
.certificate-theme-grid button strong { font-size: 14px; }
.nickname-style-grid button:hover,
.nickname-style-grid button.is-active,
.certificate-theme-grid button:hover,
.certificate-theme-grid button.is-active {
  border-color: #6d4aff;
  background: #f2efff;
  color: #4a319f;
}
.nickname-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.nickname-result-grid[hidden] { display: none; }
.nickname-result-card {
  display: flex;
  min-width: 0;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid #dedfe5;
  border-radius: 14px;
  background: #f8f7ff;
  color: #292d33;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}
.nickname-result-card:hover { border-color: #6d4aff; transform: translateY(-1px); }
.nickname-result-card.is-copied { border-color: #16834b; background: #dcf8e9; color: #17643c; }
.nickname-result-card span { min-width: 0; font-size: 18px; font-weight: 950; overflow-wrap: anywhere; }
.nickname-result-card small { flex: 0 0 auto; color: #777c84; font-size: 11px; font-weight: 800; }

.certificate-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.certificate-reason-field { grid-column: 1 / -1; }
.certificate-preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 22px; }
.certificate-theme-field { margin-top: 4px; }
.certificate-preview {
  width: min(100%, 540px);
  margin: 26px auto 0;
  padding: 10px;
  border: 1px solid #e0e2e7;
  border-radius: 16px;
  background: #f4f3f8;
}
.certificate-preview[hidden] { display: none; }
.certificate-preview canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: #fff;
}

.tarot-setup { display: grid; gap: 22px; }
.tarot-option-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.tarot-option-field legend { margin-bottom: 9px; color: #343940; font-size: 15px; font-weight: 900; }
.tarot-category-grid,
.tarot-spread-grid { display: grid; gap: 9px; }
.tarot-category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tarot-spread-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarot-category-grid button,
.tarot-spread-grid button {
  display: grid;
  min-width: 0;
  min-height: 88px;
  place-content: center;
  gap: 6px;
  padding: 13px 9px;
  border: 1px solid #d9d6e5;
  border-radius: 15px;
  background: #fff;
  color: #35333f;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.tarot-spread-grid button { min-height: 105px; }
.tarot-category-grid button > span { font-size: 25px; }
.tarot-spread-grid button > span { font-size: 22px; letter-spacing: .06em; }
.tarot-category-grid button strong,
.tarot-spread-grid button strong { font-size: 14px; }
.tarot-spread-grid button small { color: #727079; font-size: 12px; line-height: 1.45; }
.tarot-category-grid button:hover,
.tarot-category-grid button.is-active,
.tarot-spread-grid button:hover,
.tarot-spread-grid button.is-active {
  border-color: #7456bc;
  background: #f4f0ff;
  color: #4c3292;
}
.tarot-reading {
  margin-top: 26px;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid #cfc5e7;
  border-radius: 22px;
  background: linear-gradient(155deg, #17132b, #33235e 58%, #4b2d68);
  color: #fff;
}
.tarot-reading[hidden] { display: none; }
.tarot-reading-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.tarot-reading-head small { color: #cfc4eb; font-weight: 800; }
.tarot-reading-head h3 { margin: 4px 0 0; font-size: clamp(23px, 5vw, 32px); }
.tarot-reading-head > span { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 900; }
.tarot-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-top: 22px; }
.tarot-card-result { display: grid; align-content: start; gap: 12px; padding: 15px; border: 1px solid rgba(255,255,255,.17); border-radius: 18px; background: rgba(255,255,255,.09); }
.tarot-card-position { color: #e4d8ff; font-size: 12px; font-weight: 900; text-align: center; }
.tarot-card-face { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 5px; padding: 18px; border: 1px solid #c9a863; border-radius: 16px; background: linear-gradient(160deg, #fff9e6, #eee4ff); color: #251b3b; text-align: center; }
.tarot-card-result.is-reversed .tarot-card-face { background: linear-gradient(160deg, #ece7ff, #ffe9df); }
.tarot-card-symbol { font-size: 60px; line-height: 1; }
.tarot-card-face small { color: #765fa8; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.tarot-card-face h4 { margin: 2px 0; font-size: 25px; }
.tarot-card-face b { padding: 5px 8px; border-radius: 99px; background: rgba(83,54,139,.11); color: #563a8e; font-size: 11px; }
.tarot-card-result.is-reversed .tarot-card-symbol { transform: rotate(180deg); }
.tarot-keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tarot-keywords span { padding: 5px 8px; border-radius: 99px; background: rgba(255,255,255,.13); color: #f2ecff; font-size: 11px; font-weight: 800; }
.tarot-card-meaning,
.tarot-card-action { margin: 0; line-height: 1.65; }
.tarot-card-meaning { color: #f1edf9; }
.tarot-card-action { padding: 11px 12px; border-radius: 11px; background: rgba(255,217,61,.12); color: #ffeaa1; font-size: 13px; }
.tarot-reading-summary { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.09); }
.tarot-reading-summary strong { color: #ffe38a; font-size: 13px; }
.tarot-reading-summary p { margin: 5px 0 0; color: #f3effa; line-height: 1.65; }
.tarot-history { margin-top: 22px; padding: 18px; border: 1px solid #e0e1e7; border-radius: 17px; background: #faf9fd; }
.tarot-history > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tarot-history h3 { margin: 0; font-size: 16px; }
.tarot-history > div:first-child > span { color: #6549ad; font-size: 12px; font-weight: 900; }
.tarot-history-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
.tarot-history-grid > div { display: grid; min-width: 0; min-height: 82px; place-items: center; align-content: center; gap: 3px; padding: 7px 2px; border-radius: 11px; background: #f0f1f4; color: #858991; text-align: center; }
.tarot-history-grid > div.is-drawn { background: #eee8ff; color: #52368f; }
.tarot-history-grid small { font-size: 10px; }
.tarot-history-grid span { font-size: 22px; line-height: 1; }
.tarot-history-grid strong { width: 100%; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tarot-disclaimer { margin: 16px auto 0; color: #6a6e76; font-size: 12px; line-height: 1.65; text-align: center; }

.detective-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.detective-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.detective-case-grid button {
  display: grid;
  min-width: 0;
  min-height: 185px;
  align-content: start;
  gap: 9px;
  padding: 17px;
  border: 1px solid #dcdfe5;
  border-radius: 16px;
  background: #fff;
  color: #292d33;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.detective-case-grid button:hover { border-color: #6952a8; background: #f8f5ff; }
.detective-case-grid button.is-complete { border-color: #9bd0b5; background: #f2fbf6; }
.detective-case-meta { color: #6549ad; font-size: 11px; font-weight: 900; }
.detective-case-icon { margin-top: 3px; font-size: 34px; line-height: 1; }
.detective-case-grid button strong { font-size: 16px; line-height: 1.35; }
.detective-case-grid button small { margin-top: auto; color: #70757d; font-size: 11px; line-height: 1.45; }
.detective-game { margin-top: 24px; border: 1px solid #dcdfe5; border-radius: 20px; overflow: hidden; background: #f5f6f8; }
.detective-game[hidden],
.detective-result[hidden] { display: none; }
.detective-game-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; background: #18212e; color: #fff; }
.detective-game-head > div:first-child { display: flex; min-width: 0; align-items: center; gap: 13px; }
.detective-game-head > div:first-child > span { font-size: 38px; }
.detective-game-head small { color: #bfcbd8; font-weight: 800; }
.detective-game-head h3 { margin: 3px 0 0; font-size: 20px; line-height: 1.3; }
.detective-game-head > div:last-child { flex: 0 0 auto; text-align: right; }
.detective-game-head > div:last-child span { display: block; color: #bfcbd8; font-size: 11px; }
.detective-game-head > div:last-child strong { color: #ffd93d; font-size: 27px; }
.detective-scene { margin: 18px 20px 0; padding: 19px; border-left: 5px solid #6b55aa; border-radius: 5px 14px 14px 5px; background: #fff; }
.detective-scene > span { color: #6549ad; font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.detective-scene p { margin: 7px 0 0; color: #41464e; line-height: 1.7; }
.detective-suspects,
.detective-clues { margin: 18px 20px 0; }
.detective-suspects h3,
.detective-clues h3 { margin: 0; font-size: 17px; }
.detective-suspect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.detective-suspect-grid button { min-width: 0; min-height: 118px; padding: 14px; border: 1px solid #d7dae1; border-radius: 13px; background: #fff; color: #343940; cursor: pointer; font: inherit; text-align: left; }
.detective-suspect-grid button:hover,
.detective-suspect-grid button.is-selected { border-color: #6d4aff; background: #f0ecff; }
.detective-suspect-grid button.is-selected { box-shadow: inset 0 0 0 1px #6d4aff; }
.detective-suspect-grid button.is-wrong { border-color: #e8b8c0; background: #fff3f5; color: #925064; cursor: not-allowed; opacity: .78; }
.detective-suspect-grid strong { display: block; color: inherit; font-size: 14px; }
.detective-suspect-grid p { margin: 7px 0 0; color: #5e636b; font-size: 13px; line-height: 1.55; }
.detective-clues > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detective-clues > div:first-child span { color: #6549ad; font-size: 12px; font-weight: 900; }
.detective-clues ol { display: grid; gap: 8px; margin: 11px 0 0; padding: 0; list-style: none; }
.detective-clues li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px 13px; border-radius: 12px; background: #fff; }
.detective-clues li > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #6549ad; color: #fff; font-size: 12px; font-weight: 900; }
.detective-clues li p { margin: 2px 0 0; color: #464b53; line-height: 1.55; }
.detective-game > .play-result-actions { padding: 0 20px 20px; }
.detective-result { margin: 0 20px 20px; padding: clamp(22px, 5vw, 36px); border-radius: 17px; background: linear-gradient(145deg, #e8fff2, #f2eeff); text-align: center; }
.detective-result > span { font-size: 48px; }
.detective-result h3 { margin: 9px 0 7px; font-size: clamp(21px, 5vw, 29px); }
.detective-result > p { margin: 0 auto; max-width: 680px; color: #4c5159; line-height: 1.68; }
.detective-result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px auto 12px; }
.detective-result-stats > div { padding: 12px 8px; border-radius: 11px; background: rgba(255,255,255,.82); }
.detective-result-stats span { display: block; color: #6e737b; font-size: 11px; }
.detective-result-stats strong { display: block; margin-top: 4px; font-size: 18px; }

.mafia-setup { display: grid; gap: 22px; }
.mafia-mode-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.mafia-mode-field legend { margin-bottom: 9px; color: #343940; font-size: 15px; font-weight: 900; }
.mafia-mode-grid,
.escape-episode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.mafia-mode-grid button,
.escape-episode-grid button {
  display: grid;
  min-width: 0;
  min-height: 118px;
  place-content: center;
  gap: 7px;
  padding: 16px 12px;
  border: 1px solid #d7dae0;
  border-radius: 16px;
  background: #fff;
  color: #34383f;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.mafia-mode-grid button > span,
.escape-episode-grid button > span { font-size: 28px; line-height: 1; }
.mafia-mode-grid button strong,
.escape-episode-grid button strong { font-size: 15px; line-height: 1.3; }
.mafia-mode-grid button small,
.escape-episode-grid button small { color: #6b7078; font-size: 12px; line-height: 1.4; }
.mafia-mode-grid button:hover,
.mafia-mode-grid button.is-active,
.escape-episode-grid button:hover,
.escape-episode-grid button.is-active {
  border-color: #6d4aff;
  background: #f2efff;
  color: #4a319f;
}
.mafia-pass-stage,
.mafia-ready,
.escape-game {
  margin-top: 24px;
  border: 1px solid #dedfe5;
  border-radius: 20px;
  overflow: hidden;
}
.mafia-pass-stage[hidden],
.mafia-ready[hidden],
.escape-game[hidden],
.mafia-pass-cover[hidden],
.mafia-role-card[hidden],
.escape-scene[hidden],
.escape-answer-form[hidden],
.escape-hint-box[hidden],
.escape-result[hidden] { display: none; }
.mafia-pass-cover,
.mafia-role-card {
  display: grid;
  min-height: 390px;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: clamp(28px, 7vw, 58px) clamp(20px, 6vw, 48px);
  text-align: center;
}
.mafia-pass-cover { background: linear-gradient(145deg, #17132d, #35256f); color: #fff; }
.mafia-pass-cover > span { color: #d9ceff; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.mafia-pass-cover h3 { margin: 0; font-size: clamp(24px, 5vw, 34px); }
.mafia-pass-cover p { margin: 0 0 6px; color: #e4def8; line-height: 1.6; }
.mafia-role-card { background: linear-gradient(160deg, #f8f6ff, #fff9e9); }
.mafia-role-icon { font-size: 60px; line-height: 1; }
.mafia-role-team { padding: 6px 10px; border-radius: 99px; background: #e6f5ee; color: #17643c; font-size: 12px; font-weight: 900; }
.mafia-role-team[data-team="mafia"] { background: #ffe6eb; color: #9b263f; }
.mafia-role-team[data-team="neutral"] { background: #fff1c8; color: #7a5000; }
.mafia-role-card h3 { margin: 0; font-size: clamp(28px, 6vw, 40px); }
.mafia-role-card > p { max-width: 560px; margin: 0; color: #555a62; line-height: 1.65; }
.mafia-role-card > div { display: grid; max-width: 560px; gap: 5px; padding: 14px 16px; border-radius: 13px; background: rgba(255,255,255,.78); line-height: 1.55; }
.mafia-role-card > div strong { color: #5b3ec8; font-size: 12px; }
.mafia-ready { padding: clamp(20px, 5vw, 34px); background: #f8f7ff; }
.mafia-ready-head { display: flex; align-items: center; gap: 14px; }
.mafia-ready-head > span { font-size: 42px; }
.mafia-ready-head h3 { margin: 0 0 4px; font-size: 21px; }
.mafia-ready-head p { margin: 0; color: #626770; line-height: 1.5; }
.mafia-composition { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.mafia-composition span { padding: 8px 11px; border: 1px solid #ddd8f4; border-radius: 99px; background: #fff; font-size: 13px; font-weight: 850; }
.mafia-timer-panel { margin-top: 20px; padding: 22px 16px; border-radius: 17px; background: #17132d; color: #fff; text-align: center; }
.mafia-timer-presets { display: flex; justify-content: center; gap: 8px; }
.mafia-timer-presets .play-chip { min-height: 38px; padding: 7px 12px; }
.mafia-timer { margin: 15px 0 2px; font-size: clamp(48px, 12vw, 76px); font-weight: 950; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.mafia-timer[data-state="running"] { color: #ffd93d; }
.mafia-timer[data-state="complete"] { color: #ff8297; }

.escape-start-actions { margin-bottom: 0; }
.escape-game { background: #f7f8fb; }
.escape-game-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  background: #17132d;
  color: #fff;
}
.escape-game-head > div:first-child { display: flex; min-width: 0; align-items: center; gap: 12px; }
.escape-game-head > div:first-child > span { font-size: 36px; }
.escape-game-head small { color: #cfc6f6; font-weight: 800; }
.escape-game-head h3 { margin: 3px 0 0; font-size: 19px; line-height: 1.3; }
.escape-game-head > div:last-child { flex: 0 0 auto; text-align: right; }
.escape-game-head > div:last-child span { display: block; color: #cfc6f6; font-size: 11px; }
.escape-game-head > div:last-child strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.escape-stage-progress { display: flex; align-items: center; gap: 12px; padding: 15px 22px 0; color: #5b3ec8; font-size: 12px; font-weight: 900; }
.escape-stage-progress > div { height: 8px; flex: 1; overflow: hidden; border-radius: 99px; background: #e2e4e9; }
.escape-stage-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #6d4aff; transition: width .2s ease; }
.escape-scene { margin: 15px 20px 0; padding: clamp(20px, 4vw, 30px); border-radius: 17px; background: #fff; }
.escape-scene h3 { margin: 0 0 10px; font-size: clamp(21px, 4vw, 27px); }
.escape-scene > p { margin: 0; color: #4f545c; line-height: 1.7; }
.escape-scene ul { display: grid; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.escape-scene li { padding: 11px 13px; border-left: 4px solid #8d7be0; border-radius: 4px 11px 11px 4px; background: #f4f2ff; color: #3f4248; line-height: 1.55; }
.escape-inventory { display: flex; align-items: flex-start; gap: 12px; padding-top: 15px; border-top: 1px solid #eceef2; }
.escape-inventory > strong { flex: 0 0 auto; color: #5b3ec8; font-size: 13px; }
.escape-inventory > div { display: flex; flex-wrap: wrap; gap: 6px; }
.escape-inventory > div span { padding: 5px 8px; border-radius: 8px; background: #edf7f1; color: #17643c; font-size: 12px; font-weight: 800; }
.escape-inventory > div .is-empty { background: #f1f2f4; color: #777c84; }
.escape-answer-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 16px 20px 0; }
.escape-answer-form .play-field { min-width: 0; }
.escape-answer-form .play-button { min-height: 48px; }
.escape-hint-box { margin: 14px 20px 0; padding: 13px 15px; border: 1px solid #eed285; border-radius: 13px; background: #fff8dc; color: #6c5206; }
.escape-hint-box p { margin: 0; line-height: 1.55; }
.escape-hint-box p + p { margin-top: 8px; }
.escape-game > .play-result-actions { margin-bottom: 20px; padding: 0 20px; }
.escape-result { margin: 20px; padding: clamp(24px, 5vw, 38px); border-radius: 18px; background: linear-gradient(145deg, #e9fff3, #f4f0ff); text-align: center; }
.escape-result > span { font-size: 54px; }
.escape-result h3 { margin: 10px 0 8px; font-size: clamp(23px, 5vw, 32px); }
.escape-result > p { max-width: 600px; margin: 0 auto; color: #50545b; line-height: 1.65; }
.escape-result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px auto 0; }
.escape-result-stats > div { padding: 13px 8px; border-radius: 12px; background: rgba(255,255,255,.82); }
.escape-result-stats span { display: block; color: #696e76; font-size: 11px; }
.escape-result-stats strong { display: block; margin-top: 4px; font-size: 18px; }

.pixel-size-field,
.pixel-tool-field,
.sound-timer-field { margin: 0; padding: 0; border: 0; }
.pixel-size-field legend,
.pixel-tool-field legend,
.sound-timer-field legend { margin-bottom: 9px; font-size: 12px; font-weight: 900; }
.pixel-art-toolbar { display: grid; grid-template-columns: .7fr 1.3fr; gap: 16px; padding: 18px; border-bottom: 1px solid #ebecf0; }
.pixel-size-grid,
.pixel-tool-grid { display: grid; gap: 7px; }
.pixel-size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pixel-tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pixel-size-grid button,
.pixel-tool-grid button { min-height: 48px; padding: 7px; border: 1px solid #dcdde2; border-radius: 11px; background: #fff; color: #303238; cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; }
.pixel-tool-grid button { display: flex; align-items: center; justify-content: center; gap: 5px; }
.pixel-size-grid button:hover,
.pixel-size-grid button.is-active,
.pixel-tool-grid button:hover,
.pixel-tool-grid button.is-active { border-color: #6952a8; background: #f4f0ff; color: #593ea3; }
.pixel-art-workspace { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 20px; padding: 20px; background: #f7f7fa; }
.pixel-palette-wrap { padding: 15px; border: 1px solid #e1e2e7; border-radius: 15px; background: #fff; }
.pixel-palette-wrap > strong { display: block; margin-bottom: 10px; font-size: 12px; }
.pixel-palette { display: grid; grid-template-columns: repeat(3, 32px); justify-content: center; gap: 8px; }
.pixel-palette button { position: relative; width: 32px; height: 32px; padding: 0; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 0 0 1px #ced0d7; cursor: pointer; }
.pixel-palette button.is-active::after { position: absolute; inset: -5px; border: 2px solid #5b3ec8; border-radius: 11px; content: ''; }
.pixel-custom-color { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ececf0; font-size: 11px; font-weight: 800; }
.pixel-custom-color input { width: 42px; height: 32px; padding: 2px; border: 1px solid #d3d5db; border-radius: 8px; background: #fff; cursor: pointer; }
.pixel-canvas-wrap { display: grid; min-width: 0; place-items: center; }
.pixel-canvas { display: grid; width: min(100%, 610px); aspect-ratio: 1; grid-template-columns: repeat(var(--pixel-size), minmax(0, 1fr)); overflow: hidden; border: 2px solid #2d2938; border-radius: 8px; background-color: #fff; background-image: linear-gradient(45deg, #e7e8eb 25%, transparent 25%), linear-gradient(-45deg, #e7e8eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e7e8eb 75%), linear-gradient(-45deg, transparent 75%, #e7e8eb 75%); background-position: 0 0, 0 5px, 5px -5px, -5px 0; background-size: 10px 10px; box-shadow: 0 12px 34px rgba(39, 34, 56, .12); touch-action: none; user-select: none; }
.pixel-canvas button { min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0; border: 0; border-right: 1px solid rgba(40, 40, 45, .13); border-bottom: 1px solid rgba(40, 40, 45, .13); background: transparent; cursor: crosshair; }
.pixel-canvas[data-tool="eraser"] button { cursor: cell; }
.pixel-canvas[data-tool="fill"] button { cursor: copy; }
.pixel-canvas[data-tool="picker"] button { cursor: context-menu; }
.pixel-art-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 16px 18px 0; }
.pixel-art-options label,
.pixel-art-options button { min-height: 40px; padding: 9px 12px; border: 1px solid #dcdde2; border-radius: 10px; background: #fff; color: #383a3f; font: inherit; font-size: 12px; font-weight: 800; }
.pixel-art-options label { display: inline-flex; align-items: center; gap: 6px; }
.pixel-art-options button { cursor: pointer; }
.pixel-art-options button:disabled { cursor: not-allowed; opacity: .45; }

.sound-preset-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 18px; border-bottom: 1px solid #eaebee; }
.sound-preset-row button { display: flex; min-height: 94px; align-items: center; justify-content: center; flex-direction: column; gap: 3px; padding: 11px 7px; border: 1px solid #dedfe4; border-radius: 14px; background: #fff; color: #292b30; cursor: pointer; font: inherit; }
.sound-preset-row button:hover { border-color: #6952a8; background: #f6f3ff; }
.sound-preset-row button > span { font-size: 24px; }
.sound-preset-row button strong { font-size: 13px; }
.sound-preset-row button small { color: #747880; font-size: 10px; }
.sound-track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 18px; background: #f8f8fb; }
.sound-track-grid > label { display: block; padding: 15px; border: 1px solid #e0e2e7; border-radius: 15px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.sound-track-grid > label.is-active { border-color: #8f79e5; box-shadow: 0 7px 20px rgba(88, 63, 164, .09); }
.sound-track-grid label > span { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; }
.sound-track-grid label b { font-size: 27px; }
.sound-track-grid label span span { display: flex; min-width: 0; flex-direction: column; }
.sound-track-grid label strong { font-size: 13px; }
.sound-track-grid label small { overflow: hidden; color: #7a7e85; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sound-track-grid label em { color: #6046a5; font-size: 11px; font-style: normal; font-weight: 900; }
.sound-track-grid input,
.sound-master-field input { width: 100%; accent-color: #5b3ec8; cursor: pointer; }
.sound-track-grid input { margin-top: 13px; }
.sound-mixer-controls { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; padding: 18px; border-top: 1px solid #ececf0; }
.sound-master-field { display: flex; justify-content: center; flex-direction: column; }
.sound-master-field > span { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; }
.sound-master-field b { color: #6046a5; }
.sound-timer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sound-timer-grid button { min-height: 40px; padding: 7px 5px; border: 1px solid #dcdde2; border-radius: 10px; background: #fff; color: #383a40; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.sound-timer-grid button:hover,
.sound-timer-grid button.is-active { border-color: #6952a8; background: #f2efff; color: #563c9f; }
.sound-now-playing { display: flex; max-width: 650px; align-items: center; gap: 15px; margin: 4px auto 0; padding: 17px 20px; border-radius: 17px; background: #29243b; color: #fff; }
.sound-now-playing > span { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #50456e; font-size: 27px; }
.sound-now-playing > span.is-playing { animation: sound-orb-pulse 2.4s ease-in-out infinite; }
.sound-now-playing div { min-width: 0; }
.sound-now-playing small { color: #cfc7eb; font-size: 10px; }
.sound-now-playing strong { display: block; overflow: hidden; margin-top: 3px; text-overflow: ellipsis; white-space: nowrap; }
.sound-now-playing p { margin: 5px 0 0; color: #d7d1e9; font-size: 11px; }
@keyframes sound-orb-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 217, 61, .2); } 50% { transform: scale(1.06); box-shadow: 0 0 0 9px rgba(255, 217, 61, 0); } }

.charades-category-field,
.charades-time-field { margin: 0; padding: 0; border: 0; }
.charades-category-field legend,
.charades-time-field legend { margin-bottom: 10px; font-weight: 900; }
.charades-setup { padding: 18px; }
.charades-category-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.charades-category-grid button,
.charades-time-grid button {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  padding: 10px 6px;
  border: 1px solid #dedfe5;
  border-radius: 13px;
  background: #fff;
  color: #26272b;
  cursor: pointer;
  font: inherit;
}
.charades-category-grid button:hover,
.charades-category-grid button.is-active,
.charades-time-grid button:hover,
.charades-time-grid button.is-active { border-color: #6952a8; background: #f5f1ff; }
.charades-category-grid button span { font-size: 22px; }
.charades-category-grid button strong,
.charades-time-grid button strong { font-size: 13px; }
.charades-category-grid button small,
.charades-time-grid button small { color: #71757d; font-size: 10px; }
.charades-setup-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: 18px; }
.charades-setup-grid textarea { min-height: 118px; }
.charades-time-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.charades-time-grid button { min-height: 78px; }
.charades-setup > .play-button { display: block; min-width: 210px; margin: 18px auto 0; }
.charades-game-stage { overflow: hidden; border-top: 1px solid #ececf0; }
.charades-scoreboard { display: flex; overflow-x: auto; gap: 8px; padding: 14px 18px; background: #f7f6fb; }
.charades-scoreboard > div { display: flex; min-width: 116px; flex: 1 0 auto; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: #fff; }
.charades-scoreboard > div.is-current { border-color: #6952a8; color: #593ea3; }
.charades-scoreboard span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; }
.charades-ready,
.charades-summary { min-height: 330px; padding: 54px 24px; text-align: center; }
.charades-ready > span,
.charades-summary > span { color: #6549ad; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.charades-ready h3,
.charades-summary h3 { margin: 9px 0; font-size: clamp(28px, 7vw, 42px); }
.charades-ready p,
.charades-summary p { margin: 0 auto 22px; max-width: 540px; color: #656970; line-height: 1.65; }
.charades-live { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 16px 20px 8px; font-size: 13px; font-weight: 900; }
.charades-live span:last-child { text-align: right; }
.charades-live strong { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 50%; background: #2f2352; color: #fff; font-size: 27px; }
.charades-live strong.is-urgent { background: #c73550; }
.charades-card { display: flex; min-height: 310px; align-items: center; justify-content: center; flex-direction: column; margin: 8px 18px 16px; padding: 30px 20px; border-radius: 24px; background: linear-gradient(145deg, #f1edff, #fff8e5); text-align: center; }
.charades-card > span { color: #6549ad; font-size: 13px; font-weight: 900; }
.charades-card h3 { margin: 18px 0; font-size: clamp(34px, 8vw, 58px); line-height: 1.18; letter-spacing: -.04em; }
.charades-card small { color: #72767d; }
.charades-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 0 18px 22px; }
.charades-actions button { min-height: 70px; border: 0; border-radius: 15px; background: #eceef2; color: #34363a; cursor: pointer; font: inherit; font-size: 18px; font-weight: 900; }
.charades-actions button:last-child { background: #5b3ec8; color: #fff; }

.adventure-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 18px; }
.adventure-story-grid button { display: flex; min-height: 260px; flex-direction: column; align-items: flex-start; padding: 19px; border: 1px solid #dfe1e5; border-radius: 17px; background: #fff; color: #25262a; cursor: pointer; text-align: left; font: inherit; }
.adventure-story-grid button:hover { border-color: #6952a8; background: #faf8ff; }
.adventure-story-grid button > span { color: #6549ad; font-size: 11px; font-weight: 900; }
.adventure-story-grid button > b { margin: 13px 0 7px; font-size: 38px; }
.adventure-story-grid button > strong { font-size: 19px; }
.adventure-story-grid button p { margin: 9px 0; color: #666a72; font-size: 13px; line-height: 1.6; }
.adventure-story-grid button small { margin-top: auto; color: #6549ad; font-weight: 900; }
.adventure-game { overflow: hidden; border-top: 1px solid #e5e5ea; }
.adventure-game-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; background: #272238; color: #fff; }
.adventure-game-head span,
.adventure-game-head small { color: #d8d0f6; font-size: 11px; font-weight: 800; }
.adventure-game-head h3 { margin: 5px 0 0; font-size: 22px; }
.adventure-game-head > div:last-child { text-align: right; }
.adventure-game-head > div:last-child strong { display: block; margin-top: 4px; font-size: 22px; }
.adventure-inventory { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 12px 20px; border-bottom: 1px solid #ececf0; background: #f8f7fb; }
.adventure-inventory strong { margin-right: 4px; font-size: 11px; }
.adventure-inventory span { padding: 5px 9px; border-radius: 999px; background: #ede8ff; color: #594198; font-size: 11px; font-weight: 800; }
.adventure-inventory span.is-empty { background: #eceef1; color: #777b82; }
.adventure-scene { display: grid; min-height: 250px; place-items: center; align-content: center; gap: 18px; margin: 20px; padding: 28px; border-radius: 19px; background: linear-gradient(145deg, #f6f3ff, #fffaf0); text-align: center; }
.adventure-scene > span { font-size: 54px; }
.adventure-scene p { max-width: 650px; margin: 0; color: #3e4147; font-size: 17px; line-height: 1.85; }
.adventure-choices { display: grid; gap: 10px; padding: 0 20px 18px; }
.adventure-choices button { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 11px; min-height: 62px; padding: 10px 16px; border: 1px solid #dcdde2; border-radius: 14px; background: #fff; color: #292a2e; cursor: pointer; text-align: left; font: inherit; }
.adventure-choices button:hover { border-color: #6952a8; background: #f7f4ff; }
.adventure-choices button span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #5b3ec8; color: #fff; font-size: 12px; font-weight: 900; }
.adventure-ending { margin: 20px; padding: 34px 25px; border: 1px solid #d8cefa; border-radius: 20px; background: #f7f4ff; text-align: center; }
.adventure-ending > span { color: #6549ad; font-size: 12px; font-weight: 900; }
.adventure-ending h3 { margin: 9px 0 12px; font-size: clamp(27px, 6vw, 40px); }
.adventure-ending p { max-width: 620px; margin: 0 auto; color: #555961; line-height: 1.75; }
.adventure-ending-progress { margin: 18px auto 0; font-size: 13px; font-weight: 900; }
.adventure-back { margin: 0 20px 20px; padding: 8px 0; border: 0; background: transparent; color: #625187; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; }

.water-sort-setup,
.proverb-setup { display: grid; gap: 20px; padding: 22px; }
.water-sort-setup fieldset,
.proverb-setup fieldset { margin: 0; padding: 0; border: 0; }
.water-sort-setup legend,
.proverb-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.water-sort-level-grid,
.proverb-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.water-sort-level-grid button,
.proverb-mode-grid button { display: flex; min-width: 0; min-height: 78px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d9dce1; border-radius: 12px; background: #fff; color: #343940; cursor: pointer; font: inherit; }
.water-sort-level-grid button:hover,
.water-sort-level-grid button.is-active { border-color: #33818a; background: #edfafa; color: #24656c; }
.proverb-mode-grid button:hover,
.proverb-mode-grid button.is-active { border-color: #9b6726; background: #fff8e7; color: #76501e; }
.water-sort-level-grid strong,
.proverb-mode-grid strong { font-size: 15px; }
.water-sort-level-grid small,
.proverb-mode-grid small { color: #747981; font-size: 10px; }
.water-sort-stage,
.proverb-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.water-sort-stage[hidden],
.water-sort-result[hidden],
.proverb-stage[hidden],
.proverb-feedback[hidden],
.proverb-result[hidden] { display: none; }
.water-sort-live,
.proverb-live { display: grid; max-width: 760px; margin: 0 auto; padding: 15px 18px; }
.water-sort-live { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proverb-live { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.water-sort-live > div,
.proverb-live > div { min-width: 0; text-align: center; }
.water-sort-live > div + div,
.proverb-live > div + div { border-left: 1px solid #dfe2e6; }
.water-sort-live span,
.proverb-live span { display: block; color: #747a82; font-size: 9px; }
.water-sort-live strong,
.proverb-live strong { display: block; overflow: hidden; margin-top: 3px; color: #33414d; font-size: 17px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.water-sort-board { display: flex; max-width: 760px; min-height: 300px; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 26px 18px; margin: 0 auto; padding: 38px 26px 26px; border: 1px solid #dce6e8; border-radius: 20px; background: linear-gradient(180deg, #f4fbfc 0%, #eef7f8 68%, #e4eff0 68%, #e4eff0 70%, #f9fcfc 70%); }
.water-sort-tube { display: flex; overflow: hidden; width: 62px; height: 190px; flex-direction: column; padding: 7px 5px 5px; border: 4px solid #aab9c3; border-top: 0; border-radius: 5px 5px 22px 22px; background: rgb(255 255 255 / 72%); cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.water-sort-tube:hover { border-color: #668d96; }
.water-sort-tube.is-selected { border-color: #257884; box-shadow: 0 10px 18px rgb(25 93 103 / 20%); transform: translateY(-17px); }
.water-sort-layer { flex: 1; border-radius: 5px; background: transparent; }
.water-sort-layer.is-filled { background: var(--water-color); box-shadow: inset 0 5px 0 rgb(255 255 255 / 17%); }
.water-sort-actions,
.proverb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 14px auto 0; padding: 0 14px; }
.water-sort-result,
.proverb-result { max-width: 720px; margin: 20px auto; padding: 27px 20px; border: 1px solid #d8dce7; border-radius: 18px; background: #f7f8fb; text-align: center; }
.water-sort-result > span,
.proverb-result > span { color: #5c6470; font-size: 11px; font-weight: 900; }
.water-sort-result h3,
.proverb-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.water-sort-result p,
.proverb-result p { margin: 0 0 16px; color: #5c626a; line-height: 1.65; }
.proverb-arena { max-width: 720px; min-height: 390px; margin: 0 auto; padding: 24px; border: 1px solid #e7dfcf; border-radius: 18px; background: #fffdf7; }
.proverb-prompt { display: grid; min-height: 150px; place-items: center; align-content: center; gap: 12px; padding: 22px 16px; border-radius: 15px; background: #4f3b27; color: #fff; text-align: center; }
.proverb-prompt span { font-size: clamp(24px, 6vw, 38px); font-weight: 950; line-height: 1.3; }
.proverb-prompt strong { padding: 6px 13px; border-radius: 999px; background: #fff3ce; color: #745322; font-size: 11px; }
.proverb-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.proverb-options button { display: grid; min-width: 0; min-height: 68px; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #e2d8c7; border-radius: 12px; background: #fff; color: #41382f; cursor: pointer; text-align: left; font: inherit; }
.proverb-options button:hover:not(:disabled) { border-color: #a67433; background: #fff8e9; }
.proverb-options button > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #eee6d8; font-size: 10px; font-weight: 900; }
.proverb-options button > strong { overflow-wrap: anywhere; font-size: 14px; }
.proverb-options button.is-correct { border-color: #318164; background: #e8f7f0; color: #205f49; }
.proverb-options button.is-wrong { border-color: #c75b5d; background: #fff0f0; color: #983b3d; }
.proverb-feedback { margin-top: 14px; padding: 17px; border-radius: 13px; background: #f1f4f2; text-align: center; }
.proverb-feedback[data-state="correct"] { background: #e8f7f0; }
.proverb-feedback[data-state="wrong"] { background: #fff3e8; }
.proverb-feedback h3 { margin: 0; font-size: 18px; }
.proverb-feedback p { margin: 7px 0 13px; color: #5e625f; font-size: 12px; line-height: 1.65; }

.lights-out-setup,
.fortune-cookie-setup { display: grid; gap: 19px; padding: 22px; }
.lights-out-setup fieldset,
.fortune-cookie-setup fieldset { margin: 0; padding: 0; border: 0; }
.lights-out-setup legend,
.fortune-cookie-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.lights-out-size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lights-out-size-grid button { display: flex; min-width: 0; min-height: 80px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d9dce1; border-radius: 13px; background: #fff; color: #303944; cursor: pointer; font: inherit; }
.lights-out-size-grid button:hover,
.lights-out-size-grid button.is-active { border-color: #5f65ac; background: #f1f2ff; color: #454b91; }
.lights-out-size-grid strong { font-size: 16px; }
.lights-out-size-grid small { color: #767b84; font-size: 10px; }
.lights-out-rule { margin: -4px 0 0; color: #626873; font-size: 12px; line-height: 1.6; text-align: center; }
.lights-out-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.lights-out-stage[hidden],
.lights-out-result[hidden],
.fortune-cookie-stage[hidden],
.fortune-cookie-result[hidden] { display: none; }
.lights-out-live { display: grid; max-width: 620px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 12px; }
.lights-out-live > div { min-width: 0; text-align: center; }
.lights-out-live > div + div { border-left: 1px solid #dfe2e6; }
.lights-out-live span { display: block; color: #747a82; font-size: 9px; }
.lights-out-live strong { display: block; overflow: hidden; margin-top: 3px; color: #313b48; font-size: 16px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.lights-out-board { display: grid; width: min(560px, calc(100% - 28px)); grid-template-columns: repeat(var(--lights-size), minmax(0, 1fr)); gap: clamp(3px, .8vw, 7px); margin: 0 auto; padding: clamp(10px, 2vw, 17px); border: 1px solid #253044; border-radius: 19px; background: #141b27; box-shadow: inset 0 0 28px rgb(0 0 0 / 30%); }
.lights-out-cell { position: relative; min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid #3d485b; border-radius: 19%; background: #222b39; box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%); cursor: pointer; transition: transform .12s ease, background .16s ease, box-shadow .16s ease; }
.lights-out-cell:hover { transform: translateY(-1px); }
.lights-out-cell.is-on { border-color: #f3d257; background: radial-gradient(circle at 42% 35%, #fffce2 0 11%, #ffe769 35%, #edb929 72%, #c88f11 100%); box-shadow: 0 0 13px rgb(255 217 70 / 64%), inset 0 1px 0 rgb(255 255 255 / 78%); }
.lights-out-cell.is-hint::after { position: absolute; inset: 15%; border: 3px solid #ff646d; border-radius: 50%; content: ''; box-shadow: 0 0 0 3px rgb(255 255 255 / 74%); animation: lightsHint 1s ease-in-out infinite alternate; }
@keyframes lightsHint { to { transform: scale(.78); opacity: .6; } }
.lights-out-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 700px; margin: 15px auto 0; padding: 0 12px; }
.lights-out-result { max-width: 620px; margin: 20px auto; padding: 27px 20px; border: 1px solid #d9dcef; border-radius: 18px; background: #f5f6ff; text-align: center; }
.lights-out-result > span { color: #565e90; font-size: 11px; font-weight: 900; }
.lights-out-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.lights-out-result p { margin: 0 0 16px; color: #5d626d; line-height: 1.65; }

.fortune-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fortune-category-grid button { display: flex; min-width: 0; min-height: 88px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 10px 6px; border: 1px solid #e4d7c4; border-radius: 14px; background: #fffdf8; color: #4c4034; cursor: pointer; font: inherit; }
.fortune-category-grid button:hover,
.fortune-category-grid button.is-active { border-color: #bf7f38; background: #fff4dc; color: #7b4d1e; }
.fortune-category-grid button span { font-size: 26px; }
.fortune-category-grid button strong { font-size: 13px; }
.fortune-cookie-stage { display: grid; min-height: 470px; place-items: center; align-content: center; gap: 20px; padding: 30px 18px; border-top: 1px solid #ede2d2; background: radial-gradient(circle at 50% 20%, #fffdf6, #fff8e8 60%, #f8ead2); }
.fortune-cookie-button { display: grid; min-width: min(390px, 90%); place-items: center; gap: 9px; padding: 28px 24px; border: 0; border-radius: 24px; background: transparent; color: #6f4b25; cursor: pointer; font: inherit; }
.fortune-cookie-button span { display: block; font-size: clamp(100px, 24vw, 150px); filter: drop-shadow(0 15px 12px rgb(94 59 22 / 18%)); transition: transform .2s ease; }
.fortune-cookie-button:hover span { transform: translateY(-5px) rotate(-3deg); }
.fortune-cookie-button strong { font-size: 15px; }
.fortune-cookie-button.is-open { display: none; }
.fortune-cookie-result { width: min(650px, 100%); padding: clamp(23px, 5vw, 38px); border: 1px solid #e1c28f; border-radius: 22px; background: rgb(255 255 255 / 92%); box-shadow: 0 16px 35px rgb(107 70 26 / 13%); text-align: center; }
.fortune-category-label { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: #fff1cf; color: #80531f; font-size: 11px; font-weight: 900; }
.fortune-cookie-result blockquote { margin: 22px auto; color: #30261e; font-size: clamp(22px, 5vw, 32px); font-weight: 900; line-height: 1.5; word-break: keep-all; }
.fortune-action { display: grid; gap: 5px; max-width: 480px; margin: 0 auto 18px; padding: 14px; border-radius: 13px; background: #fff8e9; }
.fortune-action span { color: #8a6c49; font-size: 10px; font-weight: 800; }
.fortune-action strong { color: #513b25; font-size: 15px; }
.fortune-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 20px; }
.fortune-details > div { min-width: 0; padding: 8px; }
.fortune-details > div + div { border-left: 1px solid #eadfcf; }
.fortune-details span { display: block; color: #817568; font-size: 9px; }
.fortune-details strong { display: block; overflow: hidden; margin-top: 4px; color: #4d4136; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.fortune-disclaimer { margin: 0; padding: 13px 18px; border-top: 1px solid #eee6db; background: #fbfaf8; color: #777169; font-size: 10px; line-height: 1.55; text-align: center; }

.crossword-setup,
.odd-emoji-setup { display: grid; gap: 20px; padding: 22px; }
.crossword-setup-copy { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 650px; margin: 0 auto; padding: 20px; border-radius: 18px; background: #f5f1ff; }
.crossword-setup-copy > span { display: grid; width: 92px; min-width: 92px; height: 92px; place-items: center; border: 5px solid #5b4e8a; border-radius: 12px; background: #fff; color: #504474; font-size: 20px; font-weight: 950; line-height: 1.45; text-align: center; }
.crossword-setup-copy strong { color: #3f365d; font-size: 19px; }
.crossword-setup-copy p { margin: 7px 0 0; color: #696477; font-size: 12px; line-height: 1.65; }
.crossword-stage,
.odd-emoji-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.crossword-stage[hidden],
.crossword-result[hidden],
.odd-emoji-stage[hidden],
.odd-emoji-result[hidden] { display: none; }
.crossword-live,
.odd-emoji-live { display: grid; max-width: 820px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.crossword-live > div,
.odd-emoji-live > div { min-width: 0; text-align: center; }
.crossword-live > div + div,
.odd-emoji-live > div + div { border-left: 1px solid #dfe2e6; }
.crossword-live span,
.odd-emoji-live span { display: block; color: #747a82; font-size: 9px; }
.crossword-live strong,
.odd-emoji-live strong { display: block; overflow: hidden; margin-top: 3px; color: #333b47; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.crossword-layout { display: grid; max-width: 950px; grid-template-columns: minmax(300px, 520px) minmax(260px, 1fr); align-items: start; gap: 18px; margin: 0 auto; padding: 0 18px; }
.crossword-board { display: grid; width: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 7px; border: 4px solid #423a58; border-radius: 13px; background: #423a58; }
.crossword-block,
.crossword-cell { position: relative; min-width: 0; aspect-ratio: 1; border-radius: 4px; }
.crossword-block { background: #423a58; }
.crossword-cell { overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #d9d5e1; }
.crossword-cell.is-related { background: #f1edff; box-shadow: inset 0 0 0 2px #9380d3; }
.crossword-cell small { position: absolute; z-index: 1; top: 3px; left: 5px; color: #6f6685; font-size: 9px; font-weight: 900; pointer-events: none; }
.crossword-cell input { width: 100%; height: 100%; padding: 8px 2px 2px; border: 0; outline: 0; background: transparent; color: #292438; font: inherit; font-size: clamp(20px, 4.3vw, 34px); font-weight: 900; text-align: center; }
.crossword-cell input.is-correct { color: #245f4b; }
.crossword-cell input.is-wrong { background: #fff0f0; color: #a33d43; }
.crossword-clues { display: grid; gap: 12px; }
.crossword-clues section { overflow: hidden; border: 1px solid #e0dce7; border-radius: 13px; background: #fff; }
.crossword-clues h3 { margin: 0; padding: 10px 13px; background: #f4f1f8; color: #4c4559; font-size: 12px; }
.crossword-clues section > div { display: grid; }
.crossword-clues button { display: grid; min-height: 43px; grid-template-columns: 26px 1fr; align-items: center; gap: 6px; padding: 7px 11px; border: 0; border-top: 1px solid #eeebf1; background: #fff; color: #4b4850; cursor: pointer; text-align: left; font: inherit; }
.crossword-clues button:hover,
.crossword-clues button.is-active { background: #f3efff; color: #493b7f; }
.crossword-clues button b { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: #ece7fa; font-size: 10px; }
.crossword-clues button span { font-size: 11px; line-height: 1.45; }
.crossword-actions,
.odd-emoji-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 15px auto 0; padding: 0 12px; }
.crossword-result,
.odd-emoji-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #d8dce7; border-radius: 18px; background: #f7f8fb; text-align: center; }
.crossword-result > span,
.odd-emoji-result > span { color: #5c6470; font-size: 11px; font-weight: 900; }
.crossword-result h3,
.odd-emoji-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.crossword-result p,
.odd-emoji-result p { margin: 0 0 16px; color: #5c626a; line-height: 1.65; }
.odd-emoji-setup fieldset { margin: 0; padding: 0; border: 0; }
.odd-emoji-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.odd-emoji-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.odd-emoji-difficulty-grid button { display: flex; min-width: 0; min-height: 80px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d9dce1; border-radius: 13px; background: #fff; color: #343940; cursor: pointer; font: inherit; }
.odd-emoji-difficulty-grid button:hover,
.odd-emoji-difficulty-grid button.is-active { border-color: #31817a; background: #edfaf7; color: #24675f; }
.odd-emoji-difficulty-grid strong { font-size: 15px; }
.odd-emoji-difficulty-grid small { color: #747981; font-size: 10px; }
.odd-emoji-board { display: grid; width: min(620px, calc(100% - 24px)); grid-template-columns: repeat(var(--odd-grid), minmax(0, 1fr)); gap: clamp(2px, .55vw, 5px); margin: 0 auto; padding: clamp(8px, 1.5vw, 14px); border: 1px solid #d7e3e2; border-radius: 18px; background: #f0f8f7; }
.odd-emoji-board button { display: grid; min-width: 0; aspect-ratio: 1; place-items: center; padding: 0; border: 1px solid rgb(69 110 106 / 12%); border-radius: 20%; background: #fff; cursor: pointer; font: inherit; font-size: clamp(15px, 4.3vw, 31px); line-height: 1; transition: transform .1s ease, background .1s ease; }
.odd-emoji-board button:hover { background: #e8f6f3; transform: scale(1.04); }
.odd-emoji-board button.is-wrong { background: #ffeaea; box-shadow: inset 0 0 0 2px #d85b63; }

.spot-difference-setup { display: grid; gap: 20px; padding: 22px; }
.spot-difference-setup fieldset { margin: 0; padding: 0; border: 0; }
.spot-difference-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.spot-difference-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.spot-difference-difficulty-grid button { display: flex; min-width: 0; min-height: 80px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d9dce1; border-radius: 13px; background: #fff; color: #343940; cursor: pointer; font: inherit; }
.spot-difference-difficulty-grid button:hover,
.spot-difference-difficulty-grid button.is-active { border-color: #ad6b33; background: #fff7e9; color: #7c4a20; }
.spot-difference-difficulty-grid strong { font-size: 15px; }
.spot-difference-difficulty-grid small { color: #747981; font-size: 10px; }
.spot-difference-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.spot-difference-stage[hidden],
.spot-difference-result[hidden] { display: none; }
.spot-difference-live { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.spot-difference-live > div { min-width: 0; text-align: center; }
.spot-difference-live > div + div { border-left: 1px solid #dfe2e6; }
.spot-difference-live span { display: block; color: #747a82; font-size: 9px; }
.spot-difference-live strong { display: block; overflow: hidden; margin-top: 3px; color: #333b47; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.spot-difference-theme { width: fit-content; margin: 0 auto 10px; padding: 6px 12px; border-radius: 999px; background: #fff1cf; color: #79521f; font-size: 11px; font-weight: 900; }
.spot-difference-pair { display: grid; max-width: 900px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 auto; padding: 0 12px; }
.spot-difference-pair > section { min-width: 0; }
.spot-difference-pair h3 { margin: 0 0 7px; color: #68635b; font-size: 11px; text-align: center; }
.spot-difference-board { display: grid; width: 100%; grid-template-columns: repeat(var(--spot-columns), minmax(0, 1fr)); gap: clamp(3px, .7vw, 7px); padding: clamp(7px, 1.4vw, 13px); border: 1px solid #ded5c7; border-radius: 18px; background: #faf5eb; }
.spot-difference-board button { position: relative; display: grid; min-width: 0; aspect-ratio: 1; place-items: center; padding: 0; border: 1px solid rgb(123 95 51 / 11%); border-radius: 18%; background: #fff; cursor: pointer; font: inherit; font-size: clamp(15px, 4vw, 30px); line-height: 1; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.spot-difference-board button:hover { background: #fff9ed; transform: scale(1.03); }
.spot-difference-board button.is-found { background: #e9f7f1; box-shadow: inset 0 0 0 3px #43a27d; }
.spot-difference-board button.is-found::after { position: absolute; display: grid; right: 3px; bottom: 3px; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: #278766; color: #fff; content: '✓'; font-size: 9px; font-weight: 950; }
.spot-difference-board button.is-hint { animation: spotDifferenceHint .7s ease-in-out infinite alternate; }
.spot-difference-feedback { min-height: 24px; margin: 11px auto 0; padding: 0 14px; color: #636973; font-size: 11px; font-weight: 700; text-align: center; }
.spot-difference-actions { display: flex; max-width: 800px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.spot-difference-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #dfd4c2; border-radius: 18px; background: #fffaf1; text-align: center; }
.spot-difference-result > span { color: #755b39; font-size: 11px; font-weight: 900; }
.spot-difference-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.spot-difference-result p { margin: 0 0 16px; color: #625d55; line-height: 1.65; }
@keyframes spotDifferenceHint { to { border-color: #e49b29; box-shadow: 0 0 0 5px rgb(230 158 45 / 30%); transform: scale(.92); } }

.flag-quiz-setup { display: grid; gap: 20px; padding: 22px; }
.flag-quiz-setup fieldset { margin: 0; padding: 0; border: 0; }
.flag-quiz-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.flag-quiz-region-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.flag-quiz-region-grid button,
.flag-quiz-difficulty-grid button { display: flex; min-width: 0; min-height: 76px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 9px 6px; border: 1px solid #d9dde3; border-radius: 13px; background: #fff; color: #343a43; cursor: pointer; font: inherit; }
.flag-quiz-region-grid button:hover,
.flag-quiz-region-grid button.is-active,
.flag-quiz-difficulty-grid button:hover,
.flag-quiz-difficulty-grid button.is-active { border-color: #3d7d73; background: #eff8f6; color: #28685f; }
.flag-quiz-region-grid span { font-size: 23px; line-height: 1; }
.flag-quiz-region-grid strong,
.flag-quiz-difficulty-grid strong { font-size: 13px; }
.flag-quiz-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.flag-quiz-difficulty-grid small { color: #747981; font-size: 10px; }
.flag-quiz-rule { margin: -4px 0 0; color: #6e747c; font-size: 11px; line-height: 1.6; text-align: center; }
.flag-quiz-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.flag-quiz-stage[hidden],
.flag-quiz-result[hidden] { display: none; }
.flag-quiz-live { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.flag-quiz-live > div { min-width: 0; text-align: center; }
.flag-quiz-live > div + div { border-left: 1px solid #dfe2e6; }
.flag-quiz-live span { display: block; color: #747a82; font-size: 9px; }
.flag-quiz-live strong { display: block; overflow: hidden; margin-top: 3px; color: #333b47; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.flag-quiz-arena { max-width: 740px; margin: 0 auto; padding: clamp(20px, 4vw, 34px); border: 1px solid #dce4e2; border-radius: 20px; background: #f8fbfa; text-align: center; }
.flag-quiz-direction { margin: 0; color: #58645f; font-size: 12px; font-weight: 900; }
.flag-quiz-question { display: grid; min-height: 122px; place-items: center; margin: 7px 0 18px; color: #24302c; font-size: clamp(68px, 14vw, 104px); font-weight: 950; line-height: 1; text-wrap: balance; }
.flag-quiz-question[data-direction="country-to-flag"] { font-size: clamp(30px, 7vw, 48px); line-height: 1.3; word-break: keep-all; }
.flag-quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.flag-quiz-question[data-direction="country-to-flag"] + .flag-quiz-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flag-quiz-options button { display: flex; min-width: 0; min-height: 72px; align-items: center; justify-content: center; gap: 10px; padding: 10px; border: 1px solid #d6dcd9; border-radius: 13px; background: #fff; color: #303833; cursor: pointer; font: inherit; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.flag-quiz-options button:not(:disabled):hover { border-color: #559488; background: #f0faf7; transform: translateY(-1px); }
.flag-quiz-option-flag { font-size: 29px; line-height: 1; }
.flag-quiz-option-big-flag { font-size: clamp(39px, 7vw, 58px); line-height: 1; }
.flag-quiz-options strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
.flag-quiz-options button.is-eliminated { opacity: .18; }
.flag-quiz-options button.is-correct { border-color: #2d8c6d; background: #e8f7f1; box-shadow: inset 0 0 0 1px #2d8c6d; }
.flag-quiz-options button.is-wrong { border-color: #c65a62; background: #fff0f1; box-shadow: inset 0 0 0 1px #c65a62; }
.flag-quiz-hint-copy { max-width: 740px; min-height: 22px; margin: 11px auto 0; padding: 10px 14px; border-radius: 11px; background: #f5f2ea; color: #655e50; font-size: 11px; line-height: 1.5; text-align: center; }
.flag-quiz-feedback { max-width: 740px; min-height: 23px; margin: 8px auto 0; padding: 0 12px; color: #3f655b; font-size: 12px; font-weight: 800; line-height: 1.55; text-align: center; }
.flag-quiz-actions { display: flex; max-width: 800px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 13px auto 0; padding: 0 12px; }
.flag-quiz-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #cfe0dc; border-radius: 18px; background: #f3faf8; text-align: center; }
.flag-quiz-result > span { color: #3c7166; font-size: 11px; font-weight: 900; }
.flag-quiz-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.flag-quiz-result p { margin: 0 0 16px; color: #58645f; line-height: 1.65; }

.korean-spelling-setup { display: grid; gap: 20px; padding: 22px; }
.korean-spelling-setup fieldset { margin: 0; padding: 0; border: 0; }
.korean-spelling-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.korean-spelling-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.korean-spelling-category-grid button,
.korean-spelling-difficulty-grid button { display: flex; min-width: 0; min-height: 82px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 9px 7px; border: 1px solid #d9dde3; border-radius: 13px; background: #fff; color: #373b42; cursor: pointer; font: inherit; }
.korean-spelling-category-grid button:hover,
.korean-spelling-category-grid button.is-active,
.korean-spelling-difficulty-grid button:hover,
.korean-spelling-difficulty-grid button.is-active { border-color: #7867a8; background: #f5f1fc; color: #59488a; }
.korean-spelling-category-grid span { display: grid; min-height: 25px; place-items: center; color: #6a579f; font-size: 21px; font-weight: 950; line-height: 1; }
.korean-spelling-category-grid strong,
.korean-spelling-difficulty-grid strong { font-size: 14px; }
.korean-spelling-category-grid small,
.korean-spelling-difficulty-grid small { color: #747981; font-size: 10px; }
.korean-spelling-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.korean-spelling-rule { margin: -4px 0 0; color: #6e747c; font-size: 11px; line-height: 1.6; text-align: center; }
.korean-spelling-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.korean-spelling-stage[hidden],
.korean-spelling-result[hidden],
.korean-spelling-feedback[hidden] { display: none; }
.korean-spelling-live { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.korean-spelling-live > div { min-width: 0; text-align: center; }
.korean-spelling-live > div + div { border-left: 1px solid #dfe2e6; }
.korean-spelling-live span { display: block; color: #747a82; font-size: 9px; }
.korean-spelling-live strong { display: block; overflow: hidden; margin-top: 3px; color: #333b47; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.korean-spelling-arena { max-width: 760px; min-height: 360px; margin: 0 auto; padding: clamp(25px, 5vw, 42px); border: 1px solid #e0dce8; border-radius: 20px; background: #fbf9fd; text-align: center; }
.korean-spelling-category-label { display: inline-flex; padding: 6px 11px; border-radius: 999px; background: #eee8f8; color: #604d92; font-size: 10px; font-weight: 900; }
.korean-spelling-arena > h3 { min-height: 64px; margin: 18px auto 24px; color: #2f2c35; font-size: clamp(22px, 4.8vw, 32px); line-height: 1.45; word-break: keep-all; text-wrap: balance; }
.korean-spelling-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.korean-spelling-options button { min-width: 0; min-height: 76px; padding: 13px; border: 1px solid #d9d4e1; border-radius: 14px; background: #fff; color: #37323f; cursor: pointer; font: inherit; font-size: clamp(16px, 3vw, 20px); font-weight: 900; line-height: 1.4; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.korean-spelling-options button:not(:disabled):hover { border-color: #826fb4; background: #f6f2fc; transform: translateY(-1px); }
.korean-spelling-options button.is-correct { border-color: #348267; background: #eaf7f2; color: #276b55; box-shadow: inset 0 0 0 1px #348267; }
.korean-spelling-options button.is-wrong { border-color: #c65f67; background: #fff0f1; color: #9a3c44; box-shadow: inset 0 0 0 1px #c65f67; }
.korean-spelling-feedback { margin-top: 18px; padding: 17px; border-radius: 14px; background: #f0f6f4; text-align: left; }
.korean-spelling-feedback[data-state="wrong"] { background: #faf2f2; }
.korean-spelling-feedback strong { display: block; color: #306956; font-size: 15px; }
.korean-spelling-feedback[data-state="wrong"] strong { color: #93454c; }
.korean-spelling-feedback p { margin: 7px 0 14px; color: #5d6461; font-size: 12px; line-height: 1.65; }
.korean-spelling-feedback .play-button { width: 100%; }
.korean-spelling-actions { display: flex; max-width: 800px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.korean-spelling-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #d8d1e6; border-radius: 18px; background: #f8f5fc; text-align: center; }
.korean-spelling-result > span { color: #66528f; font-size: 11px; font-weight: 900; }
.korean-spelling-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.korean-spelling-result p { margin: 0 0 16px; color: #625d6c; line-height: 1.65; }

.clock-reading-setup { display: grid; gap: 20px; padding: 22px; }
.clock-reading-setup fieldset { margin: 0; padding: 0; border: 0; }
.clock-reading-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.clock-reading-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.clock-reading-difficulty-grid button { display: flex; min-width: 0; min-height: 88px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 10px 7px; border: 1px solid #d8dde3; border-radius: 13px; background: #fff; color: #333a43; cursor: pointer; font: inherit; }
.clock-reading-difficulty-grid button:hover,
.clock-reading-difficulty-grid button.is-active { border-color: #3e7690; background: #eef7fb; color: #285d76; }
.clock-reading-difficulty-grid span { font-size: 25px; line-height: 1; }
.clock-reading-difficulty-grid strong { font-size: 14px; }
.clock-reading-difficulty-grid small { color: #747981; font-size: 10px; }
.clock-reading-rule { margin: -4px 0 0; color: #69717a; font-size: 11px; line-height: 1.65; text-align: center; }
.clock-reading-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.clock-reading-stage[hidden],
.clock-reading-result[hidden],
.clock-reading-feedback[hidden],
.clock-reading-tip-copy[hidden] { display: none; }
.clock-reading-live { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.clock-reading-live > div { min-width: 0; text-align: center; }
.clock-reading-live > div + div { border-left: 1px solid #dfe2e6; }
.clock-reading-live span { display: block; color: #747a82; font-size: 9px; }
.clock-reading-live strong { display: block; overflow: hidden; margin-top: 3px; color: #333b47; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.clock-reading-arena { max-width: 760px; margin: 0 auto; padding: clamp(22px, 4vw, 34px); border: 1px solid #d9e2e7; border-radius: 20px; background: #f8fbfc; text-align: center; }
.clock-reading-arena > h3 { margin: 0 0 18px; color: #34434b; font-size: clamp(19px, 4vw, 25px); text-wrap: balance; }
.clock-reading-face { --clock-radius: clamp(98px, 27vw, 126px); position: relative; width: min(300px, 82vw); aspect-ratio: 1; margin: 0 auto 22px; border: 8px solid #334b58; border-radius: 50%; background: #fffefa; box-shadow: 0 8px 24px rgb(42 64 76 / 12%), inset 0 0 0 2px #d8e0e3; }
.clock-reading-ticks { position: absolute; z-index: 0; inset: 8px; border-radius: 50%; background: repeating-conic-gradient(from -1deg, #738590 0 1.4deg, transparent 1.4deg 6deg); -webkit-mask: radial-gradient(circle, transparent 0 86%, #000 86% 100%); mask: radial-gradient(circle, transparent 0 86%, #000 86% 100%); }
.clock-reading-number { position: absolute; z-index: 1; top: 50%; left: 50%; color: #34434b; font-size: clamp(15px, 4vw, 19px); font-weight: 900; line-height: 1; transform: translate(-50%, -50%) rotate(calc(var(--clock-index) * 30deg)) translateY(calc(var(--clock-radius) * -1)) rotate(calc(var(--clock-index) * -30deg)); }
.clock-reading-hand { position: absolute; z-index: 3; bottom: 50%; left: 50%; border-radius: 999px 999px 4px 4px; transform-origin: 50% 100%; }
.clock-reading-hour-hand { width: 8px; height: 26%; background: #314957; transform: translateX(-50%) rotate(var(--clock-hour-angle)); }
.clock-reading-minute-hand { width: 4px; height: 37%; background: #d45f49; transform: translateX(-50%) rotate(var(--clock-minute-angle)); }
.clock-reading-center { position: absolute; z-index: 4; top: 50%; left: 50%; width: 17px; height: 17px; border: 4px solid #fffefa; border-radius: 50%; background: #d45f49; box-shadow: 0 0 0 2px #314957; transform: translate(-50%, -50%); }
.clock-reading-a11y { position: absolute !important; overflow: hidden; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.clock-reading-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.clock-reading-options button { min-width: 0; min-height: 64px; padding: 11px 8px; border: 1px solid #d6dee2; border-radius: 13px; background: #fff; color: #33434b; cursor: pointer; font: inherit; font-size: clamp(14px, 3vw, 18px); font-weight: 900; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.clock-reading-options button:not(:disabled):hover { border-color: #4f859d; background: #eef8fb; transform: translateY(-1px); }
.clock-reading-options button.is-correct { border-color: #328268; background: #e9f7f1; color: #246a53; box-shadow: inset 0 0 0 1px #328268; }
.clock-reading-options button.is-wrong { border-color: #c76067; background: #fff0f1; color: #963e46; box-shadow: inset 0 0 0 1px #c76067; }
.clock-reading-tip-copy { margin: 13px 0 0; padding: 11px 13px; border-radius: 12px; background: #edf4f7; color: #46606d; font-size: 11px; font-weight: 750; line-height: 1.6; }
.clock-reading-feedback { margin-top: 17px; padding: 17px; border-radius: 14px; background: #eef7f3; text-align: left; }
.clock-reading-feedback[data-state="wrong"] { background: #faf1f2; }
.clock-reading-feedback strong { display: block; color: #2f6d58; font-size: 15px; }
.clock-reading-feedback[data-state="wrong"] strong { color: #92464c; }
.clock-reading-feedback p { margin: 7px 0 14px; color: #59645f; font-size: 12px; line-height: 1.65; }
.clock-reading-feedback .play-button { width: 100%; }
.clock-reading-actions { display: flex; max-width: 800px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.clock-reading-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #cfdde3; border-radius: 18px; background: #f1f8fa; text-align: center; }
.clock-reading-result > span { color: #436a7d; font-size: 11px; font-weight: 900; }
.clock-reading-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.clock-reading-result p { margin: 0 0 16px; color: #58676e; line-height: 1.65; }

.make-24-setup { display: grid; gap: 20px; padding: 22px; }
.make-24-setup fieldset { margin: 0; padding: 0; border: 0; }
.make-24-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.make-24-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.make-24-difficulty-grid button { display: flex; min-width: 0; min-height: 88px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 10px 7px; border: 1px solid #d9dde2; border-radius: 13px; background: #fff; color: #343a42; cursor: pointer; font: inherit; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.make-24-difficulty-grid button:hover,
.make-24-difficulty-grid button.is-active { border-color: #587582; background: #f1f6f7; color: #3d5d6b; }
.make-24-difficulty-grid button:not(:disabled):hover { transform: translateY(-1px); }
.make-24-difficulty-grid span { font-size: 24px; line-height: 1; }
.make-24-difficulty-grid strong { font-size: 14px; }
.make-24-difficulty-grid small { color: #747981; font-size: 10px; }
.make-24-rule { margin: -4px 0 0; color: #697078; font-size: 11px; line-height: 1.65; text-align: center; }
.make-24-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.make-24-stage[hidden],
.make-24-result[hidden],
.make-24-round-result[hidden],
.make-24-hint-copy[hidden],
.make-24-feedback[hidden] { display: none; }
.make-24-live { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.make-24-live > div { min-width: 0; text-align: center; }
.make-24-live > div + div { border-left: 1px solid #dfe2e6; }
.make-24-live span { display: block; color: #747a82; font-size: 9px; }
.make-24-live strong { display: block; overflow: hidden; margin-top: 3px; color: #333b47; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.make-24-arena { max-width: 760px; margin: 0 auto; padding: clamp(24px, 4.5vw, 38px); border: 1px solid #dbe1e3; border-radius: 20px; background: #fafbfb; text-align: center; }
.make-24-target { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 21px; padding: 7px 13px; border-radius: 999px; background: #e8eff1; color: #45616d; font-size: 10px; font-weight: 900; letter-spacing: .05em; }
.make-24-target strong { color: #263b44; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.make-24-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 650px; margin: 0 auto; }
.make-24-cards button { position: relative; display: grid; width: clamp(112px, 20vw, 145px); min-height: 112px; place-content: center; gap: 7px; padding: 15px 10px; border: 1px solid #d4dadd; border-radius: 15px; background: #fff; color: #293238; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; box-shadow: 0 3px 12px rgb(44 56 61 / 6%); transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, transform .12s ease; }
.make-24-cards button:not(:disabled):hover { border-color: #698794; background: #f8fbfc; transform: translateY(-2px); }
.make-24-cards button.is-selected { border-color: #4e7383; background: #eef5f7; box-shadow: inset 0 0 0 1px #4e7383; transform: translateY(-2px); }
.make-24-cards button:disabled { cursor: default; opacity: .62; }
.make-24-cards button[data-order]:not([data-order=""])::after { position: absolute; top: 7px; right: 7px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #4e7383; color: #fff; content: attr(data-order); font-size: 10px; font-weight: 900; line-height: 1; }
.make-24-card-value,
.make-24-cards button > strong { display: block; color: inherit; font-size: clamp(27px, 5vw, 37px); font-weight: 950; line-height: 1; overflow-wrap: anywhere; }
.make-24-card-expression,
.make-24-cards button > small { display: block; overflow: hidden; max-width: 100%; color: #6d7478; font-size: 10px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.make-24-selection { min-height: 43px; margin: 17px auto 0; color: #5c666b; font-size: 12px; font-weight: 750; line-height: 1.55; }
.make-24-operators { display: grid; max-width: 410px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 auto; }
.make-24-operators button { min-width: 0; min-height: 54px; padding: 7px; border: 1px solid #d3dade; border-radius: 12px; background: #fff; color: #354750; cursor: pointer; font: inherit; font-size: 23px; font-weight: 900; line-height: 1; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.make-24-operators button:not(:disabled):hover { border-color: #597b89; background: #edf5f7; transform: translateY(-1px); }
.make-24-operators button:disabled { cursor: default; opacity: .36; }
.make-24-feedback { min-height: 24px; margin: 14px auto 0; color: #47636d; font-size: 12px; font-weight: 800; line-height: 1.55; }
.make-24-feedback[data-state="dead"],
.make-24-feedback[data-state="dead-end"],
.make-24-feedback[data-state="wrong"] { color: #8d4a4f; }
.make-24-feedback[data-state="success"],
.make-24-feedback[data-state="correct"] { color: #316c58; }
.make-24-hint-copy { max-width: 760px; margin: 11px auto 0; padding: 11px 13px; border-radius: 12px; background: #f1f3ed; color: #596151; font-size: 11px; font-weight: 750; line-height: 1.6; }
.make-24-round-result { max-width: 760px; margin: 17px auto 0; padding: 18px; border-radius: 14px; background: #edf5f2; text-align: left; }
.make-24-round-result[data-state="revealed"] { background: #f4f2ec; }
.make-24-round-result strong { display: block; color: #326452; font-size: 15px; }
.make-24-round-result[data-state="revealed"] strong { color: #665f50; }
.make-24-round-result p { margin: 7px 0; color: #59645f; font-size: 12px; line-height: 1.65; }
.make-24-solution { padding: 10px 12px; border-radius: 10px; background: rgb(255 255 255 / 70%); color: #34433e; font-size: 13px; font-weight: 900; line-height: 1.55; overflow-wrap: anywhere; }
.make-24-round-result .play-button { width: 100%; margin-top: 13px; }
.make-24-actions { display: flex; max-width: 820px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.make-24-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #d3dddf; border-radius: 18px; background: #f5f8f8; text-align: center; }
.make-24-result > span { color: #516d78; font-size: 11px; font-weight: 900; }
.make-24-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.make-24-result p { margin: 0 0 16px; color: #5d676b; line-height: 1.65; }
.make-24-difficulty-grid button:focus-visible,
.make-24-cards button:focus-visible,
.make-24-operators button:focus-visible { outline: 3px solid rgb(78 115 131 / 32%); outline-offset: 2px; }

.date-calculator-tabs { display: flex; max-width: 800px; gap: 5px; margin: 0 auto; padding: 6px; border: 1px solid #dce2e1; border-radius: 14px; background: #f3f6f5; }
.date-calculator-tabs button { min-width: 0; min-height: 46px; flex: 1 1 0; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #616b69; cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; line-height: 1.35; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.date-calculator-tabs button:hover { color: #304b48; }
.date-calculator-tabs button.is-active,
.date-calculator-tabs button[aria-selected="true"] { border-color: #c9d8d5; background: #fff; color: #315d56; box-shadow: 0 1px 3px rgb(37 67 62 / 7%); }
.date-calculator-panel { max-width: 800px; margin: 18px auto 0; padding: clamp(21px, 4vw, 32px); border: 1px solid #dce3e1; border-radius: 18px; background: #fbfcfc; }
.date-calculator-panel[hidden],
.date-calculator-panel[aria-hidden="true"],
.date-calculator-result[hidden] { display: none; }
.date-calculator-panel > h3 { margin: 0 0 6px; color: #303b39; font-size: clamp(19px, 3vw, 24px); }
.date-calculator-panel > h3 + p { margin: 0 0 20px; color: #69716f; font-size: 12px; line-height: 1.65; }
.date-calculator-panel-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.date-calculator-panel-head > span { display: grid; width: 46px; min-width: 46px; height: 46px; place-items: center; border-radius: 13px; background: #eaf2f0; font-size: 22px; }
.date-calculator-panel-head h3 { margin: 0; color: #303b39; font-size: clamp(18px, 3vw, 23px); }
.date-calculator-panel-head p { margin: 4px 0 0; color: #69716f; font-size: 11px; line-height: 1.55; }
.date-calculator-form { display: grid; grid-template-columns: 1fr; align-items: end; gap: 14px; }
.date-calculator-form label,
.date-calculator-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.date-calculator-form label { display: grid; gap: 7px; color: #48514f; font-size: 12px; font-weight: 850; }
.date-calculator-form legend { margin-bottom: 7px; color: #48514f; font-size: 12px; font-weight: 850; }
.date-calculator-form input,
.date-calculator-form select { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid #cfd8d6; border-radius: 10px; background: #fff; color: #2f3635; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; }
.date-calculator-form input:hover,
.date-calculator-form select:hover { border-color: #9fb5b0; }
.date-calculator-form input:focus,
.date-calculator-form select:focus { border-color: #4e7c73; outline: 3px solid rgb(78 124 115 / 18%); outline-offset: 1px; }
.date-calculator-form input[aria-invalid="true"],
.date-calculator-form select[aria-invalid="true"] { border-color: #bb6267; background: #fffafa; }
.date-calculator-form .play-button { min-height: 48px; }
.date-calculator-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.date-calculator-date-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.date-calculator-date-pair > .play-button { min-width: 92px; }
.date-calculator-add-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .65fr); gap: 10px; }
.date-calculator-preset:not(button),
.date-calculator-presets { display: flex; flex-wrap: wrap; gap: 7px; }
button.date-calculator-preset,
.date-calculator-preset button,
.date-calculator-presets button { min-height: 40px; padding: 7px 12px; border: 1px solid #d6dddb; border-radius: 999px; background: #fff; color: #53605d; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; transition: border-color .12s ease, background .12s ease, color .12s ease; }
button.date-calculator-preset:hover,
.date-calculator-preset button:hover,
.date-calculator-presets button:hover { border-color: #8eaaa4; background: #f0f6f4; color: #315d56; }
.date-calculator-result { margin-top: 20px; padding: clamp(20px, 4vw, 29px); border: 1px solid #cadbd7; border-radius: 16px; background: #f0f7f5; text-align: center; }
.date-calculator-result[data-state="error"] { border-color: #ead4d5; background: #fcf5f5; }
.date-calculator-result > span,
.date-calculator-result > small { display: block; color: #58736d; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.date-calculator-result h3,
.date-calculator-result output { display: block; margin: 7px 0; color: #284e48; font-size: clamp(25px, 5vw, 38px); font-weight: 950; line-height: 1.2; overflow-wrap: anywhere; }
.date-calculator-result > strong { display: block; color: #3f5f58; font-size: 15px; }
.date-calculator-result p { margin: 7px auto 0; color: #596763; font-size: 12px; line-height: 1.7; }
.date-calculator-metrics,
.date-calculator-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 18px; text-align: left; }
.date-calculator-metrics > div,
.date-calculator-result-grid > div { min-width: 0; padding: 13px; border: 1px solid rgb(85 124 116 / 13%); border-radius: 11px; background: rgb(255 255 255 / 72%); }
.date-calculator-metrics span,
.date-calculator-metrics small,
.date-calculator-result-grid span { display: block; color: #6d7976; font-size: 9px; font-weight: 800; }
.date-calculator-metrics strong,
.date-calculator-result-grid strong { display: block; overflow: hidden; margin-top: 4px; color: #354641; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.4; text-overflow: ellipsis; }
.date-calculator-result > .play-button { margin-top: 16px; }
.date-calculator-result .play-result-actions { margin-bottom: 0; }
.date-calculator-tabs button:focus-visible,
button.date-calculator-preset:focus-visible,
.date-calculator-preset button:focus-visible,
.date-calculator-presets button:focus-visible { outline: 3px solid rgb(78 124 115 / 28%); outline-offset: 2px; }

.weekday-quiz-setup { display: grid; gap: 20px; padding: 22px; }
.date-quiz-setup { display: grid; gap: 20px; }
.weekday-quiz-setup fieldset,
.date-quiz-setup fieldset { margin: 0; padding: 0; border: 0; }
.weekday-quiz-setup legend,
.date-quiz-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.weekday-quiz-difficulty-grid,
.date-quiz-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.weekday-quiz-difficulty-grid button,
.date-quiz-difficulty-grid button { display: flex; min-width: 0; min-height: 86px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 10px 7px; border: 1px solid #d8dfdd; border-radius: 13px; background: #fff; color: #37413f; cursor: pointer; font: inherit; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.weekday-quiz-difficulty-grid button:not(:disabled):hover,
.date-quiz-difficulty-grid button:not(:disabled):hover { border-color: #72948d; background: #f2f7f6; transform: translateY(-1px); }
.weekday-quiz-difficulty-grid button.is-active,
.weekday-quiz-difficulty-grid button[aria-pressed="true"],
.date-quiz-difficulty-grid button.is-active,
.date-quiz-difficulty-grid button[aria-pressed="true"] { border-color: #527d74; background: #edf5f3; color: #315d55; box-shadow: inset 0 0 0 1px #527d74; }
.weekday-quiz-difficulty-grid strong,
.date-quiz-difficulty-grid strong { font-size: 14px; }
.weekday-quiz-difficulty-grid small,
.date-quiz-difficulty-grid small { color: #747d7b; font-size: 10px; }
.weekday-quiz-stage,
.date-quiz-stage { padding-bottom: 20px; border-top: 1px solid #e2e6e5; }
.weekday-quiz-stage[hidden],
.weekday-quiz-feedback[hidden],
.weekday-quiz-result[hidden],
.date-quiz-stage[hidden],
.date-quiz-feedback[hidden],
.date-quiz-result[hidden] { display: none; }
.weekday-quiz-live,
.date-quiz-live { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.weekday-quiz-live > div,
.date-quiz-live > div { min-width: 0; text-align: center; }
.weekday-quiz-live > div + div,
.date-quiz-live > div + div { border-left: 1px solid #dfe3e2; }
.weekday-quiz-live span,
.date-quiz-live span { display: block; color: #747c7a; font-size: 9px; }
.weekday-quiz-live strong,
.date-quiz-live strong { display: block; overflow: hidden; margin-top: 3px; color: #34413e; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.weekday-quiz-question,
.date-quiz-arena { max-width: 760px; min-height: 175px; margin: 0 auto; padding: clamp(25px, 5vw, 40px); border: 1px solid #d9e2df; border-radius: 19px; background: #fafcfb; text-align: center; }
.weekday-quiz-question > span,
.weekday-quiz-question > small,
.date-quiz-arena > span,
.date-quiz-arena > small { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: #eaf2f0; color: #527169; font-size: 10px; font-weight: 900; }
.weekday-quiz-question h3,
.weekday-quiz-question > strong,
.date-quiz-arena > h3,
.date-quiz-arena > strong { display: block; margin: 17px auto 0; color: #2d3836; font-size: clamp(22px, 4.6vw, 31px); font-weight: 950; font-variant-numeric: tabular-nums; line-height: 1.45; text-wrap: balance; }
.weekday-quiz-options,
.date-quiz-options { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 20px auto 0; }
.weekday-quiz-options button,
.date-quiz-options button { min-width: 0; min-height: 58px; padding: 10px 7px; border: 1px solid #d5dddb; border-radius: 12px; background: #fff; color: #36413f; cursor: pointer; font: inherit; font-size: 14px; font-weight: 900; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.weekday-quiz-options button:not(:disabled):hover,
.date-quiz-options button:not(:disabled):hover { border-color: #6f928a; background: #f1f7f5; transform: translateY(-1px); }
.weekday-quiz-options button.is-correct,
.date-quiz-options button.is-correct { border-color: #368068; background: #eaf6f1; color: #286750; box-shadow: inset 0 0 0 1px #368068; }
.weekday-quiz-options button.is-wrong,
.date-quiz-options button.is-wrong { border-color: #be6268; background: #fff1f2; color: #934249; box-shadow: inset 0 0 0 1px #be6268; }
.weekday-quiz-options button:disabled,
.date-quiz-options button:disabled { cursor: default; }
.weekday-quiz-feedback,
.date-quiz-feedback { max-width: 760px; margin: 13px auto 0; padding: 15px 17px; border-radius: 13px; background: #edf6f2; color: #315f50; font-size: 12px; font-weight: 750; line-height: 1.65; text-align: left; }
.weekday-quiz-feedback[data-state="wrong"],
.date-quiz-feedback[data-state="wrong"] { background: #faf1f2; color: #88464c; }
.weekday-quiz-feedback strong,
.date-quiz-feedback strong { display: block; margin-bottom: 3px; font-size: 14px; }
.weekday-quiz-feedback p,
.date-quiz-feedback p { margin: 4px 0 13px; }
.weekday-quiz-feedback .play-button,
.date-quiz-feedback .play-button { width: 100%; }
.weekday-quiz-actions,
.date-quiz-actions { display: flex; max-width: 800px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.weekday-quiz-result,
.date-quiz-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #cfddd9; border-radius: 18px; background: #f2f8f6; text-align: center; }
.weekday-quiz-result > span,
.date-quiz-result > span { color: #52736b; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.weekday-quiz-result h3,
.date-quiz-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.weekday-quiz-result p,
.date-quiz-result p { margin: 0 0 16px; color: #5e6b68; line-height: 1.65; }
.weekday-quiz-difficulty-grid button:focus-visible,
.weekday-quiz-options button:focus-visible,
.date-quiz-difficulty-grid button:focus-visible,
.date-quiz-options button:focus-visible { outline: 3px solid rgb(82 125 116 / 30%); outline-offset: 2px; }

.shape-rotation-setup { display: grid; gap: 18px; padding: 22px; }
.shape-rotation-setup fieldset { margin: 0; padding: 0; border: 0; }
.shape-rotation-setup legend { margin-bottom: 10px; color: #353d47; font-size: 13px; font-weight: 900; }
.shape-rotation-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shape-rotation-difficulty-grid button { display: flex; min-width: 0; min-height: 86px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px 7px; border: 1px solid #d8dce7; border-radius: 13px; background: #fff; color: #343c48; cursor: pointer; font: inherit; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.shape-rotation-difficulty-grid button:not(:disabled):hover { border-color: #737fba; background: #f4f5fb; transform: translateY(-1px); }
.shape-rotation-difficulty-grid button.is-active,
.shape-rotation-difficulty-grid button[aria-pressed="true"] { border-color: #5968aa; background: #eef0fa; color: #3d4c93; box-shadow: inset 0 0 0 1px #5968aa; }
.shape-rotation-difficulty-grid strong { font-size: 14px; }
.shape-rotation-difficulty-grid small { color: #747a86; font-size: 10px; line-height: 1.45; }
.shape-rotation-rule { margin: 0; padding: 13px 15px; border-radius: 11px; background: #f5f6f9; color: #626975; font-size: 11px; line-height: 1.65; }
.shape-rotation-stage { padding-bottom: 20px; border-top: 1px solid #e1e3e9; }
.shape-rotation-stage[hidden],
.shape-rotation-arena[hidden],
.shape-rotation-feedback[hidden],
.shape-rotation-result[hidden] { display: none; }
.shape-rotation-live { display: grid; max-width: 800px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.shape-rotation-live > div { min-width: 0; text-align: center; }
.shape-rotation-live > div + div { border-left: 1px solid #dfe1e7; }
.shape-rotation-live span { display: block; color: #747984; font-size: 9px; }
.shape-rotation-live strong { display: block; overflow: hidden; margin-top: 3px; color: #343b48; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.shape-rotation-arena { max-width: 800px; margin: 0 auto; padding: clamp(20px, 4vw, 31px); border: 1px solid #dcdfea; border-radius: 20px; background: #fafafe; }
.shape-rotation-question { display: grid; justify-items: center; gap: 10px; text-align: center; }
.shape-rotation-question > span { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: #eceef8; color: #58659d; font-size: 10px; font-weight: 900; }
.shape-rotation-question h3 { margin: 2px 0 0; color: #303743; font-size: clamp(19px, 3.6vw, 25px); line-height: 1.35; text-wrap: balance; }
.shape-rotation-target { width: min(210px, 54vw); padding: 14px; border: 1px solid #d8dceb; border-radius: 17px; background: #fff; box-shadow: 0 6px 18px rgb(47 56 92 / 7%); }
.shape-rotation-board { display: grid; width: 100%; grid-template-columns: repeat(var(--shape-grid, 6), minmax(0, 1fr)); gap: clamp(2px, .7vw, 5px); aspect-ratio: 1; }
.shape-rotation-target.shape-rotation-board { width: min(210px, 54vw); }
.shape-rotation-cell { min-width: 0; aspect-ratio: 1; border-radius: 20%; background: transparent; }
.shape-rotation-cell.is-filled { border: 1px solid #45579f; background: linear-gradient(145deg, #7184d5, #4d5fae); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), 0 2px 4px rgb(54 67 127 / 18%); }
.shape-rotation-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 9px; margin-top: 22px; }
.shape-rotation-options > button { display: grid; min-width: 0; min-height: 142px; justify-items: center; gap: 7px; padding: 10px; border: 1px solid #d7dbe6; border-radius: 14px; background: #fff; color: #48505e; cursor: pointer; font: inherit; font-weight: 900; transition: border-color .12s ease, background .12s ease, transform .12s ease, box-shadow .12s ease; }
.shape-rotation-options > button:not(:disabled):hover { border-color: #6d79b7; background: #f7f8fc; box-shadow: 0 5px 14px rgb(57 68 120 / 8%); transform: translateY(-2px); }
.shape-rotation-options > button > span:first-child { color: #6b7280; font-size: 10px; }
.shape-rotation-options .shape-rotation-board { width: min(112px, 100%); }
.shape-rotation-options > button.is-correct { border-color: #3d826b; background: #edf8f3; box-shadow: inset 0 0 0 1px #3d826b; }
.shape-rotation-options > button.is-wrong { border-color: #bd646a; background: #fff2f3; box-shadow: inset 0 0 0 1px #bd646a; }
.shape-rotation-options > button:disabled { cursor: default; }
.shape-rotation-feedback { margin-top: 14px; padding: 15px 17px; border-radius: 13px; background: #edf7f2; color: #315f50; font-size: 12px; line-height: 1.65; }
.shape-rotation-feedback[data-state="wrong"] { background: #faf1f2; color: #88464c; }
.shape-rotation-feedback strong { display: block; font-size: 14px; }
.shape-rotation-feedback p { margin: 4px 0 13px; }
.shape-rotation-feedback .play-button { width: 100%; }
.shape-rotation-actions { display: flex; max-width: 800px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.shape-rotation-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #d4d9e8; border-radius: 18px; background: #f4f5fb; text-align: center; }
.shape-rotation-result > span { color: #59669d; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.shape-rotation-result h3 { margin: 8px 0; color: #31394b; font-size: clamp(25px, 5vw, 35px); }
.shape-rotation-result p { margin: 0 0 16px; color: #606875; line-height: 1.65; }
.shape-rotation-difficulty-grid button:focus-visible,
.shape-rotation-options > button:focus-visible { outline: 3px solid rgb(89 104 170 / 28%); outline-offset: 2px; }

.number-sequence-setup { display: grid; gap: 18px; padding: 22px; }
.number-sequence-setup fieldset { margin: 0; padding: 0; border: 0; }
.number-sequence-setup legend { margin-bottom: 10px; color: #3c4038; font-size: 13px; font-weight: 900; }
.number-sequence-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.number-sequence-difficulty-grid button { display: flex; min-width: 0; min-height: 86px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px 7px; border: 1px solid #dedfcf; border-radius: 13px; background: #fff; color: #3b4035; cursor: pointer; font: inherit; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.number-sequence-difficulty-grid button:not(:disabled):hover { border-color: #8b9860; background: #f8f9f1; transform: translateY(-1px); }
.number-sequence-difficulty-grid button.is-active,
.number-sequence-difficulty-grid button[aria-pressed="true"] { border-color: #768548; background: #f2f5e7; color: #52612b; box-shadow: inset 0 0 0 1px #768548; }
.number-sequence-difficulty-grid strong { font-size: 14px; }
.number-sequence-difficulty-grid small { color: #777d6f; font-size: 10px; line-height: 1.45; }
.number-sequence-rule { margin: 0; padding: 13px 15px; border-radius: 11px; background: #f6f7f2; color: #656b5d; font-size: 11px; line-height: 1.65; }
.number-sequence-stage { padding-bottom: 20px; border-top: 1px solid #e4e5dd; }
.number-sequence-stage[hidden],
.number-sequence-arena[hidden],
.number-sequence-hint [hidden],
.number-sequence-feedback[hidden],
.number-sequence-result[hidden] { display: none; }
.number-sequence-live { display: grid; max-width: 800px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.number-sequence-live > div { min-width: 0; text-align: center; }
.number-sequence-live > div + div { border-left: 1px solid #e1e2da; }
.number-sequence-live span { display: block; color: #777c70; font-size: 9px; }
.number-sequence-live strong { display: block; overflow: hidden; margin-top: 3px; color: #373d32; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.number-sequence-arena { max-width: 800px; margin: 0 auto; padding: clamp(23px, 4.5vw, 36px); border: 1px solid #dfe2d4; border-radius: 20px; background: #fbfcf8; }
.number-sequence-question { display: grid; justify-items: center; gap: 18px; text-align: center; }
.number-sequence-question > span { display: inline-flex; padding: 5px 10px; border-radius: 999px; background: #eef2df; color: #63733c; font-size: 10px; font-weight: 900; }
.number-sequence-values { display: flex; width: 100%; min-height: 82px; align-items: center; justify-content: center; gap: clamp(5px, 1vw, 11px); overflow-x: auto; padding: 6px 3px 12px; scrollbar-width: thin; }
.number-sequence-term { display: grid; min-width: clamp(52px, 9vw, 74px); min-height: 58px; place-items: center; padding: 9px 8px; border: 1px solid #d7dcc7; border-radius: 13px; background: #fff; color: #354025; box-shadow: 0 4px 12px rgb(79 91 44 / 7%); font-size: clamp(18px, 3.2vw, 25px); font-weight: 950; font-variant-numeric: tabular-nums; }
.number-sequence-term.is-missing { border-color: #7f9145; background: #eff4df; color: #53642a; box-shadow: inset 0 0 0 1px #7f9145; }
.number-sequence-arrow { flex: 0 0 auto; color: #a2a78f; font-size: 16px; font-weight: 900; }
.number-sequence-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.number-sequence-options button { min-width: 0; min-height: 60px; padding: 10px 7px; border: 1px solid #d9ddcf; border-radius: 12px; background: #fff; color: #38402f; cursor: pointer; font: inherit; font-size: clamp(15px, 2.7vw, 19px); font-weight: 900; font-variant-numeric: tabular-nums; transition: border-color .12s ease, background .12s ease, transform .12s ease; }
.number-sequence-options button:not(:disabled):hover { border-color: #849358; background: #f5f8ec; transform: translateY(-1px); }
.number-sequence-options button.is-correct { border-color: #3c8067; background: #edf8f3; color: #2d694f; box-shadow: inset 0 0 0 1px #3c8067; }
.number-sequence-options button.is-wrong { border-color: #bd656b; background: #fff2f3; color: #91444a; box-shadow: inset 0 0 0 1px #bd656b; }
.number-sequence-options button:disabled { cursor: default; }
.number-sequence-hint { display: grid; justify-items: center; gap: 8px; margin-top: 14px; }
.number-sequence-hint .play-button { min-height: 42px; padding-top: 7px; padding-bottom: 7px; }
.number-sequence-hint p { width: 100%; margin: 0; padding: 12px 14px; border-radius: 11px; background: #f0f2e8; color: #5d654d; font-size: 11px; font-weight: 750; line-height: 1.6; text-align: center; }
.number-sequence-feedback { margin-top: 14px; padding: 15px 17px; border-radius: 13px; background: #edf7f2; color: #315f50; font-size: 12px; line-height: 1.65; }
.number-sequence-feedback[data-state="wrong"] { background: #faf1f2; color: #88464c; }
.number-sequence-feedback strong { display: block; font-size: 14px; }
.number-sequence-feedback p { margin: 4px 0 13px; }
.number-sequence-feedback .play-button { width: 100%; }
.number-sequence-actions { display: flex; max-width: 800px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.number-sequence-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #dce0cf; border-radius: 18px; background: #f6f8ef; text-align: center; }
.number-sequence-result > span { color: #68763f; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.number-sequence-result h3 { margin: 8px 0; color: #373f2e; font-size: clamp(25px, 5vw, 35px); }
.number-sequence-result p { margin: 0 0 16px; color: #636a59; line-height: 1.65; }
.number-sequence-difficulty-grid button:focus-visible,
.number-sequence-options button:focus-visible,
.number-sequence-hint button:focus-visible { outline: 3px solid rgb(118 133 72 / 28%); outline-offset: 2px; }

.word-group-setup { display: grid; gap: 18px; padding: 22px; }
.word-group-rule { margin: 0; padding: 15px 17px; border: 1px solid #d9e1de; border-radius: 13px; background: #f4f8f6; color: #52615c; font-size: 12px; line-height: 1.65; }
.word-group-stage[hidden],
.word-group-arena[hidden],
.word-group-hint [hidden],
.word-group-feedback[hidden],
.word-group-result[hidden] { display: none; }
.word-group-live { display: grid; max-width: 800px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 18px auto 13px; padding: 0 12px; }
.word-group-live > div { min-width: 0; padding: 11px 7px; border: 1px solid #dce2df; border-radius: 11px; background: #fff; text-align: center; }
.word-group-live span { display: block; margin-bottom: 4px; color: #7a8581; font-size: 10px; font-weight: 850; }
.word-group-live strong { color: #34453f; font-size: 15px; font-variant-numeric: tabular-nums; }
.word-group-arena { max-width: 800px; margin: 0 auto; padding: 21px; border: 1px solid #d8e0dd; border-radius: 17px; background: #f8faf9; }
.word-group-arena > h3 { margin: 0 0 15px; color: #384b45; font-size: 13px; text-align: center; }
.word-group-solved { display: grid; gap: 8px; margin-bottom: 10px; }
.word-group-solved:empty { display: none; }
.word-group-solved-card { padding: 13px 15px; border: 1px solid #bfd2cc; border-radius: 12px; background: #eaf3f0; color: #334a43; text-align: center; }
.word-group-solved-card strong { display: block; margin-bottom: 4px; font-size: 13px; }
.word-group-solved-card span { color: #536a63; font-size: 11px; line-height: 1.55; word-break: keep-all; }
.word-group-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.word-group-board button { min-width: 0; min-height: 72px; padding: 10px 6px; border: 1px solid #d6ddda; border-radius: 12px; background: #fff; color: #35433f; cursor: pointer; font: inherit; font-size: clamp(13px, 2vw, 16px); font-weight: 900; line-height: 1.35; word-break: keep-all; transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease; }
.word-group-board button:not(:disabled):hover { border-color: #7e9f95; background: #f0f6f4; transform: translateY(-1px); }
.word-group-board button.is-hinted:not(.is-selected) { border-color: #5f877c; border-style: dashed; background: #eef5f3; }
.word-group-board button.is-selected { border-color: #396f64; background: #396f64; color: #fff; box-shadow: inset 0 0 0 1px #2f5e55; }
.word-group-board button:disabled { cursor: default; opacity: .58; }
.word-group-selection { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 24px; margin: 13px 0 8px; color: #65736e; font-size: 11px; font-weight: 800; }
.word-group-selection strong { color: #34665c; font-size: 13px; font-variant-numeric: tabular-nums; }
.word-group-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.word-group-controls .play-button { min-height: 43px; }
.word-group-hint { display: grid; gap: 8px; margin-top: 12px; }
.word-group-hint p { margin: 0; padding: 12px 14px; border-radius: 11px; background: #eef2f0; color: #596762; font-size: 11px; font-weight: 750; line-height: 1.6; text-align: center; }
.word-group-feedback { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: #edf5f2; color: #315e54; text-align: center; }
.word-group-feedback[data-state="wrong"] { background: #f8efef; color: #854b4d; }
.word-group-feedback[data-state="near"] { background: #f7f1e8; color: #765c38; }
.word-group-feedback strong { display: block; font-size: 13px; }
.word-group-feedback p { margin: 4px 0 0; font-size: 11px; line-height: 1.6; }
.word-group-actions { display: flex; max-width: 800px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.word-group-actions[hidden] { display: none; }
.word-group-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #d8e0dd; border-radius: 18px; background: #f4f8f6; text-align: center; }
.word-group-result > span { color: #51766c; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.word-group-result h3 { margin: 8px 0; color: #30443e; font-size: clamp(25px, 5vw, 35px); }
.word-group-result p { margin: 0 0 16px; color: #5f6d68; line-height: 1.65; }
.word-group-board button:focus-visible,
.word-group-controls button:focus-visible,
.word-group-hint button:focus-visible { outline: 3px solid rgb(57 111 100 / 24%); outline-offset: 2px; }

.matchstick-setup { display: grid; gap: 18px; padding: 22px; }
.matchstick-setup fieldset { margin: 0; padding: 0; border: 0; }
.matchstick-setup legend { margin-bottom: 10px; color: #4c433c; font-size: 13px; font-weight: 900; }
.matchstick-rule { margin: 0; padding: 15px 17px; border: 1px solid #e2d9ce; border-radius: 13px; background: #faf6f0; color: #62584f; font-size: 12px; line-height: 1.65; }
.matchstick-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.matchstick-difficulty-grid button { display: grid; min-width: 0; min-height: 78px; place-content: center; gap: 4px; padding: 11px 8px; border: 1px solid #ded5cc; border-radius: 13px; background: #fff; color: #4b443e; cursor: pointer; font: inherit; text-align: center; }
.matchstick-difficulty-grid button:hover,
.matchstick-difficulty-grid button.is-active { border-color: #9b7558; background: #f8efe6; color: #6e4c35; }
.matchstick-difficulty-grid strong { font-size: 14px; }
.matchstick-difficulty-grid small { color: #7b7169; font-size: 10px; line-height: 1.4; }
.matchstick-stage[hidden],
.matchstick-arena[hidden],
.matchstick-hint-copy[hidden],
.matchstick-feedback[hidden],
.matchstick-result[hidden] { display: none; }
.matchstick-stage { padding-bottom: 20px; border-top: 1px solid #e6ded5; }
.matchstick-live { display: grid; max-width: 800px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 18px auto 13px; padding: 0 12px; }
.matchstick-live > div { min-width: 0; padding: 11px 7px; border: 1px solid #e1d9d0; border-radius: 11px; background: #fff; text-align: center; }
.matchstick-live span { display: block; margin-bottom: 4px; color: #82786f; font-size: 10px; font-weight: 850; }
.matchstick-live strong { color: #4b433d; font-size: 15px; font-variant-numeric: tabular-nums; }
.matchstick-arena { max-width: 800px; margin: 0 auto; padding: 21px; border: 1px solid #ded5cb; border-radius: 17px; background: #fbf8f4; }
.matchstick-instruction { margin: 0 0 14px; color: #493f38; font-size: 13px; font-weight: 850; line-height: 1.6; text-align: center; }
.matchstick-equation { display: flex; overflow-x: auto; min-height: 126px; align-items: center; justify-content: center; gap: clamp(2px, .8vw, 7px); padding: 18px 12px; border: 1px solid #342e2a; border-radius: 17px; background: #24211f; box-shadow: inset 0 0 24px rgb(0 0 0 / 20%); scrollbar-width: thin; }
.matchstick-symbol { position: relative; flex: 0 0 clamp(37px, 8vw, 49px); width: clamp(37px, 8vw, 49px); height: clamp(66px, 14vw, 86px); }
.matchstick-symbol.is-operator { flex-basis: clamp(33px, 7vw, 43px); width: clamp(33px, 7vw, 43px); }
.matchstick-symbol.is-equals { flex-basis: clamp(30px, 6vw, 38px); width: clamp(30px, 6vw, 38px); }
.matchstick-segment { position: absolute; z-index: 1; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.matchstick-segment::before,
.matchstick-static-segment { position: absolute; border-radius: 999px; background: #5f5852; content: ""; transition: background .12s ease, box-shadow .12s ease, opacity .12s ease, transform .12s ease; }
.matchstick-segment.is-horizontal { left: 9%; width: 82%; height: 22%; }
.matchstick-segment.is-horizontal::before { top: 34%; left: 7%; width: 86%; height: 32%; }
.matchstick-segment.is-vertical { width: 30%; height: 46%; }
.matchstick-segment.is-vertical::before { top: 7%; left: 36%; width: 28%; height: 86%; }
.matchstick-segment.segment-a { top: -2%; }
.matchstick-segment.segment-g { top: 39%; }
.matchstick-segment.segment-d { bottom: -2%; }
.matchstick-segment.segment-f { top: 3%; left: -3%; }
.matchstick-segment.segment-b { top: 3%; right: -3%; }
.matchstick-segment.segment-e { bottom: 3%; left: -3%; }
.matchstick-segment.segment-c { right: -3%; bottom: 3%; }
.matchstick-segment.segment-v { top: 27%; left: 35%; }
.matchstick-segment.is-lit::before,
.matchstick-static-segment { background: #d8a16a; box-shadow: 0 0 5px rgb(225 157 91 / 35%), inset 0 0 0 1px rgb(255 255 255 / 15%); }
.matchstick-segment.is-lit::after { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #773d32; box-shadow: 0 0 0 2px rgb(119 61 50 / 15%); content: ""; }
.matchstick-segment.is-horizontal.is-lit::after { top: calc(50% - 4px); right: 4%; }
.matchstick-segment.is-vertical.is-lit::after { right: calc(50% - 4px); bottom: 3%; }
.matchstick-segment:not(.is-lit)::before { background: transparent; box-shadow: inset 0 0 0 1px rgb(220 203 186 / 18%); opacity: .34; }
.matchstick-segment:not(:disabled):hover::before,
.matchstick-segment:not(:disabled):focus-visible::before { background: rgb(227 180 132 / 28%); box-shadow: inset 0 0 0 1px rgb(239 200 161 / 65%); opacity: 1; transform: scale(1.04); }
.matchstick-segment.is-selected::before { background: #f2c58e; box-shadow: 0 0 0 3px rgb(242 197 142 / 25%), 0 0 9px rgb(242 197 142 / 45%); }
.matchstick-segment.is-hinted::before { animation: matchstick-hint-pulse 1.2s ease-in-out infinite; box-shadow: 0 0 0 3px rgb(109 188 172 / 25%), 0 0 11px #6dbcac; }
.matchstick-segment:disabled { cursor: default; }
.matchstick-segment:disabled:not(.is-lit)::before { opacity: .08; }
.matchstick-equals-line { position: absolute; left: 8%; width: 84%; height: 8%; border-radius: 999px; background: #d8a16a; box-shadow: 0 0 5px rgb(225 157 91 / 35%); }
.matchstick-equals-line:first-child { top: 38%; }
.matchstick-equals-line:last-child { top: 55%; }
.matchstick-selection { min-height: 24px; margin: 13px 0 8px; color: #70665e; font-size: 11px; font-weight: 800; line-height: 1.55; text-align: center; }
.matchstick-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.matchstick-controls .play-button { min-height: 43px; }
.matchstick-hint-copy { margin: 12px 0 0; padding: 12px 14px; border-radius: 11px; background: #f3eee8; color: #655b53; font-size: 11px; font-weight: 750; line-height: 1.6; text-align: center; }
.matchstick-feedback { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: #edf5f1; color: #315f50; text-align: center; }
.matchstick-feedback[data-state="wrong"] { background: #f9eeee; color: #854b4d; }
.matchstick-feedback strong { display: block; font-size: 13px; }
.matchstick-feedback p { margin: 4px 0 12px; font-size: 11px; line-height: 1.6; }
.matchstick-feedback .play-button { width: 100%; }
.matchstick-actions { display: flex; max-width: 800px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.matchstick-actions[hidden] { display: none; }
.matchstick-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #ded5cb; border-radius: 18px; background: #faf6f0; text-align: center; }
.matchstick-result > span { color: #8a684f; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.matchstick-result h3 { margin: 8px 0; color: #443b35; font-size: clamp(25px, 5vw, 35px); }
.matchstick-result p { margin: 0 0 16px; color: #6c625b; line-height: 1.65; }
.matchstick-difficulty-grid button:focus-visible,
.matchstick-segment:focus-visible,
.matchstick-controls button:focus-visible,
.matchstick-actions button:focus-visible { outline: 3px solid rgb(155 117 88 / 30%); outline-offset: 2px; }
@keyframes matchstick-hint-pulse { 50% { filter: brightness(1.25); transform: scale(1.08); } }

.pattern-memory-setup,
.daily-riddle-setup { display: grid; gap: 20px; padding: 22px; }
.pattern-memory-setup fieldset { margin: 0; padding: 0; border: 0; }
.pattern-memory-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.pattern-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pattern-difficulty-grid button { display: flex; min-width: 0; min-height: 82px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d7dce7; border-radius: 13px; background: #fff; color: #323b49; cursor: pointer; font: inherit; }
.pattern-difficulty-grid button:hover,
.pattern-difficulty-grid button.is-active { border-color: #5472c4; background: #eef3ff; color: #3c579f; }
.pattern-difficulty-grid strong { font-size: 15px; }
.pattern-difficulty-grid small { color: #747981; font-size: 10px; }
.pattern-memory-stage,
.daily-riddle-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.pattern-memory-stage[hidden],
.pattern-memory-result[hidden],
.daily-riddle-stage[hidden],
.daily-riddle-result[hidden] { display: none; }
.pattern-memory-live { display: grid; max-width: 780px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.pattern-memory-live > div { min-width: 0; text-align: center; }
.pattern-memory-live > div + div { border-left: 1px solid #dfe2e6; }
.pattern-memory-live span { display: block; color: #747a82; font-size: 9px; }
.pattern-memory-live strong { display: block; overflow: hidden; margin-top: 3px; color: #333b47; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.pattern-memory-board { display: grid; width: min(570px, calc(100% - 24px)); grid-template-columns: repeat(var(--pattern-grid), minmax(0, 1fr)); gap: clamp(7px, 1.5vw, 13px); margin: 0 auto; padding: clamp(13px, 2vw, 20px); border-radius: 22px; background: #172135; box-shadow: inset 0 0 30px rgb(0 0 0 / 25%); }
.pattern-memory-board button { min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid #44516a; border-radius: 19%; background: #2c3850; box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%); cursor: pointer; transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.pattern-memory-board button:not(:disabled):hover { transform: scale(1.03); }
.pattern-memory-board button.is-lit { border-color: #8eeaff; background: #4fc6e9; box-shadow: 0 0 24px rgb(88 218 249 / 80%), inset 0 0 12px #dffaff; transform: scale(1.04); }
.pattern-memory-board button.is-correct { background: #65d6a0; box-shadow: 0 0 16px rgb(101 214 160 / 55%); }
.pattern-memory-board button.is-wrong { background: #ef6971; box-shadow: 0 0 16px rgb(239 105 113 / 55%); }
.pattern-memory-actions,
.daily-riddle-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 15px auto 0; padding: 0 12px; }
.pattern-memory-result,
.daily-riddle-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #d8dce7; border-radius: 18px; background: #f7f8fb; text-align: center; }
.pattern-memory-result > span,
.daily-riddle-result > span { color: #5c6470; font-size: 11px; font-weight: 900; }
.pattern-memory-result h3,
.daily-riddle-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.pattern-memory-result p,
.daily-riddle-result p { margin: 0 0 16px; color: #5c626a; line-height: 1.65; }
.riddle-intro { display: flex; align-items: center; justify-content: center; gap: 17px; max-width: 620px; margin: 0 auto; padding: 20px; border-radius: 18px; background: #fff6df; }
.riddle-intro > span { display: grid; width: 74px; min-width: 74px; height: 74px; place-items: center; border-radius: 50%; background: #f4b93e; color: #fff; font-size: 44px; font-weight: 950; }
.riddle-intro strong { color: #5f431c; font-size: 18px; }
.riddle-intro p { margin: 6px 0 0; color: #756345; font-size: 12px; line-height: 1.6; }
.riddle-card { max-width: 720px; margin: 20px auto 0; padding: clamp(22px, 5vw, 38px); border: 1px solid #ead9b8; border-radius: 20px; background: #fffdf8; }
.riddle-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.riddle-meta span { padding: 5px 10px; border-radius: 999px; background: #fff0ca; color: #77521d; font-size: 10px; font-weight: 900; }
.riddle-meta strong { color: #777065; font-size: 10px; }
.riddle-card blockquote { margin: 24px auto 28px; color: #302a22; font-size: clamp(23px, 5vw, 33px); font-weight: 900; line-height: 1.5; text-align: center; word-break: keep-all; }
.riddle-card form label { display: block; margin-bottom: 7px; color: #55504a; font-size: 11px; font-weight: 900; }
.riddle-card form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.riddle-hint { margin-top: 14px; padding: 13px 15px; border-radius: 12px; background: #f8f4ec; }
.riddle-hint strong { color: #74613f; font-size: 10px; }
.riddle-hint p { margin: 4px 0 0; color: #6f685d; font-size: 11px; line-height: 1.55; }
.riddle-feedback { min-height: 22px; margin: 12px 0 0; color: #8b4d28; font-size: 12px; font-weight: 800; text-align: center; }
.daily-riddle-result[data-state="solved"] { border-color: #b9ddcf; background: #effaf5; }

.one-stroke-setup,
.color-order-setup { display: grid; gap: 20px; padding: 22px; }
.one-stroke-setup fieldset,
.color-order-setup fieldset { margin: 0; padding: 0; border: 0; }
.one-stroke-setup legend,
.color-order-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.one-stroke-difficulty-grid,
.color-order-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.one-stroke-difficulty-grid button,
.color-order-difficulty-grid button { display: flex; min-width: 0; min-height: 82px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d8dce3; border-radius: 13px; background: #fff; color: #343b45; cursor: pointer; font: inherit; }
.one-stroke-difficulty-grid button:hover,
.one-stroke-difficulty-grid button.is-active { border-color: #357568; background: #edf8f4; color: #285f55; }
.color-order-difficulty-grid button:hover,
.color-order-difficulty-grid button.is-active { border-color: #6c60a8; background: #f4f1ff; color: #55498f; }
.one-stroke-difficulty-grid strong,
.color-order-difficulty-grid strong { font-size: 15px; }
.one-stroke-difficulty-grid small,
.color-order-difficulty-grid small { color: #757a82; font-size: 10px; }
.one-stroke-stage,
.color-order-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.one-stroke-stage[hidden],
.one-stroke-result[hidden],
.color-order-stage[hidden],
.color-order-result[hidden] { display: none; }
.one-stroke-live,
.color-order-live { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.one-stroke-live > div,
.color-order-live > div { min-width: 0; text-align: center; }
.one-stroke-live > div + div,
.color-order-live > div + div { border-left: 1px solid #dfe2e6; }
.one-stroke-live span,
.color-order-live span { display: block; color: #747a82; font-size: 9px; }
.one-stroke-live strong,
.color-order-live strong { display: block; overflow: hidden; margin-top: 3px; color: #333b47; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.one-stroke-board { display: grid; width: min(580px, calc(100% - 24px)); grid-template-columns: repeat(var(--one-stroke-columns), minmax(0, 1fr)); gap: clamp(5px, 1.2vw, 10px); margin: 0 auto; padding: clamp(12px, 2.5vw, 22px); border: 1px solid #cfded9; border-radius: 22px; background: #f1f7f5; }
.one-stroke-cell { position: relative; display: grid; min-width: 0; aspect-ratio: 1; place-items: center; padding: 0; border: 2px solid #a9c6bd; border-radius: 22%; background: #fff; color: #51736a; cursor: pointer; font: inherit; transition: transform .12s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.one-stroke-cell:not(:disabled):hover { border-color: #378274; transform: translateY(-1px); }
.one-stroke-cell.is-blocked { border-color: transparent; background: #dfe8e5; cursor: default; opacity: .48; }
.one-stroke-cell.is-filled { border-color: #337a6d; background: #4b9c8d; color: #fff; box-shadow: 0 5px 12px rgb(39 112 98 / 18%); }
.one-stroke-cell.is-start { box-shadow: inset 0 0 0 3px #ffe7a2; }
.one-stroke-cell.is-end { border-style: dashed; }
.one-stroke-cell.is-current { border-color: #164f45; box-shadow: 0 0 0 4px rgb(64 145 130 / 22%), inset 0 0 0 3px rgb(255 255 255 / 35%); }
.one-stroke-cell.is-hint { animation: oneStrokeHint .75s ease-in-out infinite alternate; }
.one-stroke-cell span { font-size: clamp(10px, 2.8vw, 16px); font-weight: 950; }
@keyframes oneStrokeHint { to { border-color: #e69d24; box-shadow: 0 0 0 5px rgb(239 176 65 / 28%); transform: scale(.92); } }
.one-stroke-actions,
.color-order-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 800px; margin: 15px auto 0; padding: 0 12px; }
.one-stroke-result,
.color-order-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #d8dce7; border-radius: 18px; background: #f7f8fb; text-align: center; }
.one-stroke-result > span,
.color-order-result > span { color: #5c6470; font-size: 11px; font-weight: 900; }
.one-stroke-result h3,
.color-order-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.one-stroke-result p,
.color-order-result p { margin: 0 0 16px; color: #5c626a; line-height: 1.65; }
.color-order-preview { display: grid; overflow: hidden; max-width: 430px; height: 24px; grid-template-columns: repeat(5, 1fr); margin: -3px auto 0; border-radius: 999px; }
.color-order-preview span:nth-child(1) { background: #3855a0; }
.color-order-preview span:nth-child(2) { background: #5274b8; }
.color-order-preview span:nth-child(3) { background: #7697c8; }
.color-order-preview span:nth-child(4) { background: #9bb9d2; }
.color-order-preview span:nth-child(5) { background: #bed7dc; }
.color-order-board { display: grid; overflow: hidden; width: min(760px, calc(100% - 24px)); min-height: clamp(180px, 29vw, 245px); grid-template-columns: repeat(var(--color-order-count), minmax(0, 1fr)); margin: 0 auto; border: 7px solid #f0f1f4; border-radius: 20px; background: #f0f1f4; box-shadow: 0 10px 28px rgb(38 45 61 / 10%); }
.color-order-tile { position: relative; min-width: 0; padding: 0; border: 0; border-right: 1px solid rgb(255 255 255 / 25%); background: var(--tile-color); cursor: pointer; transition: transform .14s ease, filter .14s ease, box-shadow .14s ease; }
.color-order-tile:not(:disabled):hover { z-index: 1; filter: saturate(1.12) brightness(1.05); transform: translateY(-5px); }
.color-order-tile.is-selected { z-index: 2; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 7px #272b33; transform: translateY(-7px); }
.color-order-tile.is-hint { animation: colorOrderHint .75s ease-in-out infinite alternate; }
.color-order-tile.is-locked { cursor: default; }
.color-order-tile span { position: absolute; right: 2px; bottom: 7px; left: 2px; color: #fff; font-size: 9px; font-weight: 950; text-shadow: 0 1px 3px rgb(0 0 0 / 65%); writing-mode: vertical-rl; }
@keyframes colorOrderHint { to { box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 9px #e69d24; filter: brightness(1.13); } }
.color-order-feedback { min-height: 24px; margin: 11px auto 0; padding: 0 14px; color: #636973; font-size: 11px; font-weight: 700; text-align: center; }

.perfect-pitch-setup,
.pipe-connect-setup { display: grid; gap: 20px; padding: 22px; }
.perfect-pitch-setup fieldset,
.pipe-connect-setup fieldset { margin: 0; padding: 0; border: 0; }
.perfect-pitch-setup legend,
.pipe-connect-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.perfect-pitch-difficulty-grid,
.pipe-connect-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.perfect-pitch-difficulty-grid button,
.pipe-connect-difficulty-grid button { display: flex; min-width: 0; min-height: 82px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d8dce3; border-radius: 13px; background: #fff; color: #343b45; cursor: pointer; font: inherit; }
.perfect-pitch-difficulty-grid button:hover,
.perfect-pitch-difficulty-grid button.is-active { border-color: #6a5ca7; background: #f4f1ff; color: #51458c; }
.pipe-connect-difficulty-grid button:hover,
.pipe-connect-difficulty-grid button.is-active { border-color: #39758a; background: #eef8fb; color: #285e71; }
.perfect-pitch-difficulty-grid strong,
.pipe-connect-difficulty-grid strong { font-size: 15px; }
.perfect-pitch-difficulty-grid small,
.pipe-connect-difficulty-grid small { color: #757a82; font-size: 10px; }
.perfect-pitch-audio-note { max-width: 650px; margin: -3px auto 0; padding: 12px 16px; border-radius: 12px; background: #f6f4fb; color: #666071; font-size: 11px; line-height: 1.6; text-align: center; }
.perfect-pitch-stage,
.pipe-connect-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.perfect-pitch-stage[hidden],
.perfect-pitch-result[hidden],
.pipe-connect-stage[hidden],
.pipe-connect-result[hidden] { display: none; }
.perfect-pitch-live,
.pipe-connect-live { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.perfect-pitch-live > div,
.pipe-connect-live > div { min-width: 0; text-align: center; }
.perfect-pitch-live > div + div,
.pipe-connect-live > div + div { border-left: 1px solid #dfe2e6; }
.perfect-pitch-live span,
.pipe-connect-live span { display: block; color: #747a82; font-size: 9px; }
.perfect-pitch-live strong,
.pipe-connect-live strong { display: block; overflow: hidden; margin-top: 3px; color: #333b47; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.perfect-pitch-listener { display: grid; max-width: 600px; min-height: 210px; place-items: center; align-content: center; gap: 17px; margin: 0 auto; padding: 24px; border: 1px solid #ddd8ed; border-radius: 22px; background: radial-gradient(circle at 50% 20%, #faf8ff, #f1eef9); }
.perfect-pitch-listener > button { display: grid; min-width: min(330px, 90%); min-height: 128px; place-items: center; align-content: center; gap: 5px; padding: 18px; border: 1px solid #8c7abe; border-radius: 20px; background: #fff; color: #53457f; box-shadow: 0 10px 25px rgb(76 61 119 / 12%); cursor: pointer; font: inherit; }
.perfect-pitch-listener > button:hover { background: #f9f6ff; transform: translateY(-1px); }
.perfect-pitch-speaker { font-size: 42px; font-weight: 900; line-height: 1; }
.perfect-pitch-listener strong { font-size: 18px; }
.perfect-pitch-listener small { color: #7a718d; font-size: 10px; }
.perfect-pitch-wave { display: flex; height: 30px; align-items: center; justify-content: center; gap: 4px; }
.perfect-pitch-wave i { width: 4px; height: 8px; border-radius: 99px; background: #8877b8; }
.perfect-pitch-wave.is-playing i { animation: pitchWave .48s ease-in-out infinite alternate; }
.perfect-pitch-wave.is-playing i:nth-child(2),
.perfect-pitch-wave.is-playing i:nth-child(6) { animation-delay: -.28s; }
.perfect-pitch-wave.is-playing i:nth-child(3),
.perfect-pitch-wave.is-playing i:nth-child(5) { animation-delay: -.14s; }
.perfect-pitch-wave.is-playing i:nth-child(4) { animation-delay: -.36s; }
@keyframes pitchWave { to { height: 28px; background: #57458f; } }
.perfect-pitch-answers { display: grid; max-width: 760px; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 7px; margin: 14px auto 0; padding: 0 12px; }
.perfect-pitch-answers button { display: flex; min-width: 0; min-height: 58px; align-items: center; justify-content: center; flex-direction: column; gap: 2px; padding: 8px 4px; border: 1px solid #d8d9e0; border-radius: 11px; background: #fff; color: #373a42; cursor: pointer; font: inherit; }
.perfect-pitch-answers button:hover:not(:disabled) { border-color: #7d6bad; background: #f6f2ff; }
.perfect-pitch-answers button strong { font-size: 15px; }
.perfect-pitch-answers button small { color: #7a7d84; font-size: 8px; }
.perfect-pitch-answers button.is-correct { border-color: #3a9271; background: #e9f8f1; color: #246c52; }
.perfect-pitch-answers button.is-wrong { border-color: #ca5d65; background: #fff0f1; color: #9f3f47; }
.perfect-pitch-feedback,
.pipe-connect-feedback { min-height: 24px; margin: 11px auto 0; padding: 0 14px; color: #636973; font-size: 11px; font-weight: 700; text-align: center; }
.perfect-pitch-actions,
.pipe-connect-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 820px; margin: 13px auto 0; padding: 0 12px; }
.perfect-pitch-result,
.pipe-connect-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #d8dce7; border-radius: 18px; background: #f7f8fb; text-align: center; }
.perfect-pitch-result > span,
.pipe-connect-result > span { color: #5c6470; font-size: 11px; font-weight: 900; }
.perfect-pitch-result h3,
.pipe-connect-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.perfect-pitch-result p,
.pipe-connect-result p { margin: 0 0 16px; color: #5c626a; line-height: 1.65; }
.rhythm-tap-setup { display: grid; gap: 20px; padding: 22px; }
.rhythm-tap-setup fieldset { margin: 0; padding: 0; border: 0; }
.rhythm-tap-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.rhythm-tap-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rhythm-tap-difficulty-grid button { display: flex; min-width: 0; min-height: 82px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d8dce3; border-radius: 13px; background: #fff; color: #343b45; cursor: pointer; font: inherit; }
.rhythm-tap-difficulty-grid button:hover,
.rhythm-tap-difficulty-grid button.is-active { border-color: #b9633d; background: #fff4ee; color: #8e4529; }
.rhythm-tap-difficulty-grid strong { font-size: 15px; }
.rhythm-tap-difficulty-grid small { color: #757a82; font-size: 10px; }
.rhythm-tap-audio-note { max-width: 650px; margin: -3px auto 0; padding: 12px 16px; border-radius: 12px; background: #fff4ee; color: #725f56; font-size: 11px; line-height: 1.6; text-align: center; }
.rhythm-tap-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.rhythm-tap-stage[hidden],
.rhythm-tap-result[hidden] { display: none; }
.rhythm-tap-live { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 10px; }
.rhythm-tap-live > div { min-width: 0; text-align: center; }
.rhythm-tap-live > div + div { border-left: 1px solid #dfe2e6; }
.rhythm-tap-live span { display: block; color: #747a82; font-size: 9px; }
.rhythm-tap-live strong { display: block; overflow: hidden; margin-top: 3px; color: #333b47; font-size: 15px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.rhythm-tap-arena { display: grid; max-width: 660px; place-items: center; gap: 17px; margin: 0 auto; padding: 22px; border: 1px solid #ead9d0; border-radius: 22px; background: radial-gradient(circle at 50% 18%, #fff9f5, #f8eee9); }
.rhythm-listen-button { display: grid; min-width: min(330px, 90%); min-height: 102px; place-items: center; align-content: center; gap: 3px; padding: 14px; border: 1px solid #be7959; border-radius: 18px; background: #fff; color: #8a492e; box-shadow: 0 8px 20px rgb(115 67 44 / 10%); cursor: pointer; font: inherit; }
.rhythm-listen-button:hover:not(:disabled) { background: #fff8f3; transform: translateY(-1px); }
.rhythm-listen-button > span { font-size: 30px; line-height: 1; }
.rhythm-listen-button strong { font-size: 17px; }
.rhythm-listen-button small { color: #8a756b; font-size: 10px; }
.rhythm-beat-dots { display: flex; min-height: 32px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; }
.rhythm-beat-dots span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #d4b7a8; border-radius: 50%; background: #fff; color: #8b6b5d; font-size: 9px; font-weight: 900; transition: transform .12s ease, background .12s ease, color .12s ease; }
.rhythm-beat-dots span.is-active { background: #c85d34; color: #fff; animation: rhythmPulse .16s ease-out; }
.rhythm-beat-dots span.is-tapped { border-color: #3e8b70; background: #e7f6f0; color: #286c55; }
.rhythm-tap-pad { display: grid; width: min(100%, 410px); min-height: 145px; place-items: center; align-content: center; gap: 4px; padding: 18px; border: 3px solid #d9cbc4; border-radius: 28px; background: #eee9e6; color: #817873; cursor: not-allowed; font: inherit; touch-action: manipulation; user-select: none; }
.rhythm-tap-pad.is-ready { border-color: #a94d2c; background: linear-gradient(150deg, #db7249, #b74e2e); color: #fff; box-shadow: 0 12px 28px rgb(150 68 38 / 22%); cursor: pointer; }
.rhythm-tap-pad.is-hit { animation: rhythmTapHit .15s ease-out; }
.rhythm-tap-pad > span { font-size: 13px; font-weight: 900; }
.rhythm-tap-pad strong { font-size: clamp(25px, 6vw, 38px); }
.rhythm-tap-pad small { font-size: 10px; opacity: .8; }
.rhythm-tap-feedback { min-height: 24px; margin: 11px auto 0; padding: 0 14px; color: #636973; font-size: 11px; font-weight: 700; text-align: center; }
.rhythm-tap-actions { display: flex; max-width: 820px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 13px auto 0; padding: 0 12px; }
.rhythm-tap-result { max-width: 680px; margin: 20px auto; padding: 27px 20px; border: 1px solid #e2d2cb; border-radius: 18px; background: #fff8f4; text-align: center; }
.rhythm-tap-result > span { color: #836052; font-size: 11px; font-weight: 900; }
.rhythm-tap-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.rhythm-tap-result p { margin: 0 0 16px; color: #665f5b; line-height: 1.65; }
@keyframes rhythmPulse { from { transform: scale(.75); } to { transform: scale(1.14); } }
@keyframes rhythmTapHit { 50% { transform: scale(.96); filter: brightness(1.12); } }
.pipe-connect-board { display: grid; width: min(620px, calc(100% - 24px)); grid-template-columns: repeat(var(--pipe-columns), minmax(0, 1fr)); gap: clamp(4px, 1vw, 8px); margin: 0 auto; padding: clamp(10px, 2vw, 18px); border: 1px solid #cadce2; border-radius: 22px; background: #edf5f7; }
.pipe-connect-cell { position: relative; min-width: 0; aspect-ratio: 1; overflow: hidden; padding: 0; border: 1px solid #b9cbd1; border-radius: 18%; background: #fff; cursor: pointer; transition: transform .12s ease, border-color .14s ease, box-shadow .14s ease; }
.pipe-connect-cell:not(:disabled):hover { border-color: #4f8292; transform: translateY(-1px); }
.pipe-connect-cell.is-blocked { border-color: transparent; background: #dfeaec; cursor: default; opacity: .45; }
.pipe-connect-cell.is-selected { z-index: 2; border-color: #1e657a; box-shadow: 0 0 0 4px rgb(45 118 141 / 22%); }
.pipe-connect-cell.is-aligned { background: #f2fbf7; }
.pipe-connect-cell.is-hint { animation: pipeHint .75s ease-in-out infinite alternate; }
.pipe-segment { position: absolute; z-index: 1; display: block; background: #4e8292; pointer-events: none; }
.pipe-segment.is-up { top: -1px; left: 38%; width: 24%; height: 52%; }
.pipe-segment.is-right { top: 38%; right: -1px; width: 52%; height: 24%; }
.pipe-segment.is-down { bottom: -1px; left: 38%; width: 24%; height: 52%; }
.pipe-segment.is-left { top: 38%; left: -1px; width: 52%; height: 24%; }
.pipe-connect-cell > i { position: absolute; z-index: 2; top: 35%; left: 35%; width: 30%; height: 30%; border: 2px solid #406f7e; border-radius: 50%; background: #6da0ae; pointer-events: none; }
.pipe-connect-cell > strong { position: absolute; z-index: 3; top: 50%; left: 50%; color: #fff; font-size: clamp(9px, 2.4vw, 13px); line-height: 1; pointer-events: none; transform: translate(-50%, -50%); }
.pipe-connect-cell.is-start > i { border-color: #2f7355; background: #52a879; }
.pipe-connect-cell.is-end > i { border-color: #a35d29; background: #d98749; }
@keyframes pipeHint { to { border-color: #e49a26; box-shadow: 0 0 0 5px rgb(230 159 47 / 28%); transform: scale(.93); } }

.falling-setup,
.word-chain-setup { display: grid; gap: 20px; padding: 22px; }
.falling-setup fieldset,
.word-chain-setup fieldset { margin: 0; padding: 0; border: 0; }
.falling-setup legend,
.word-chain-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.falling-speed-grid,
.word-chain-difficulty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.falling-speed-grid button,
.word-chain-difficulty-grid button { display: flex; min-width: 0; min-height: 78px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d9dce1; border-radius: 12px; background: #fff; color: #343940; cursor: pointer; font: inherit; }
.falling-speed-grid button:hover,
.falling-speed-grid button.is-active { border-color: #5964c5; background: #f0f1ff; color: #39439d; }
.word-chain-difficulty-grid button:hover,
.word-chain-difficulty-grid button.is-active { border-color: #16826f; background: #ecfbf6; color: #116452; }
.falling-speed-grid strong,
.word-chain-difficulty-grid strong { font-size: 15px; }
.falling-speed-grid small,
.word-chain-difficulty-grid small { color: #747981; font-size: 10px; }
.falling-stage,
.word-chain-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.falling-stage[hidden],
.falling-result[hidden],
.word-chain-stage[hidden],
.word-chain-result[hidden] { display: none; }
.falling-live,
.word-chain-live { display: grid; max-width: 760px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 15px 18px; }
.falling-live > div,
.word-chain-live > div { min-width: 0; text-align: center; }
.falling-live > div + div,
.word-chain-live > div + div { border-left: 1px solid #dfe2e6; }
.falling-live span,
.word-chain-live span { display: block; color: #747a82; font-size: 9px; }
.falling-live strong,
.word-chain-live strong { display: block; overflow: hidden; margin-top: 3px; color: #33414d; font-size: 17px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.falling-layout { display: grid; width: min(100% - 28px, 590px); grid-template-columns: 92px minmax(220px, 360px) 92px; align-items: start; justify-content: center; gap: 10px; margin: 0 auto; }
.falling-board { display: grid; width: 100%; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(20, minmax(0, 1fr)); gap: 1px; aspect-ratio: 1 / 2; padding: 5px; border: 5px solid #2a2e3f; border-radius: 14px; background: #171a26; box-shadow: 0 13px 30px rgb(29 34 58 / 18%); touch-action: none; }
.falling-board > span,
.falling-preview > span { min-width: 0; min-height: 0; border-radius: 2px; background: rgb(255 255 255 / 5%); }
.falling-board > span.is-filled,
.falling-preview > span.is-filled { border: 1px solid rgb(255 255 255 / 30%); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 16%); }
.falling-board > span.is-ghost { border: 1px dashed rgb(255 255 255 / 42%); background: rgb(255 255 255 / 8%); }
.falling-board > span.type-i,
.falling-preview > span.type-i { background: #31c9d8; }
.falling-board > span.type-j,
.falling-preview > span.type-j { background: #4c72dd; }
.falling-board > span.type-l,
.falling-preview > span.type-l { background: #ef9340; }
.falling-board > span.type-o,
.falling-preview > span.type-o { background: #e9cb35; }
.falling-board > span.type-s,
.falling-preview > span.type-s { background: #57b968; }
.falling-board > span.type-t,
.falling-preview > span.type-t { background: #9b63cd; }
.falling-board > span.type-z,
.falling-preview > span.type-z { background: #e45c64; }
.falling-preview-panel { display: grid; gap: 14px; color: #5c626d; font-size: 10px; line-height: 1.65; text-align: center; }
.falling-preview-panel > div { padding: 10px 7px; border: 1px solid #dfe2e9; border-radius: 12px; background: #f8f9fc; }
.falling-preview-panel span { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 900; }
.falling-preview-panel small { font-size: 9px; }
.falling-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 1px; aspect-ratio: 1; padding: 3px; border-radius: 7px; background: #252a39; }
.falling-controls { display: grid; width: min(100% - 28px, 440px); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 14px auto 0; }
.falling-controls button { min-height: 44px; padding: 7px 3px; border: 1px solid #d6dbe4; border-radius: 10px; background: #fff; color: #3d4657; cursor: pointer; font: inherit; font-size: 14px; font-weight: 900; }
.falling-controls button:hover { border-color: #5964c5; background: #f0f1ff; color: #39439d; }
.falling-controls .is-drop { grid-column: 1 / -1; background: #343b65; color: #fff; }
.falling-actions,
.word-chain-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 14px auto 0; padding: 0 14px; }
.falling-result,
.word-chain-result { max-width: 720px; margin: 20px auto 0; padding: 27px 20px; border: 1px solid #d8dce7; border-radius: 18px; background: #f7f8fb; text-align: center; }
.falling-result > span,
.word-chain-result > span { color: #5c6470; font-size: 11px; font-weight: 900; }
.falling-result h3,
.word-chain-result h3 { margin: 8px 0; font-size: clamp(25px, 5vw, 35px); }
.falling-result p,
.word-chain-result p { margin: 0 0 16px; color: #5c626a; line-height: 1.65; }
.word-chain-arena { max-width: 720px; margin: 0 auto; padding: 24px; border: 1px solid #dce5e1; border-radius: 18px; background: #f7fcfa; }
.word-chain-prompt { padding: 22px 16px; border-radius: 15px; background: #164d45; color: #fff; text-align: center; }
.word-chain-prompt > span { color: #b9ddd5; font-size: 10px; font-weight: 900; }
.word-chain-prompt > strong { display: block; margin: 8px 0 12px; font-size: clamp(32px, 8vw, 50px); }
.word-chain-prompt p { margin: 0; color: #e4f4f0; font-size: 13px; }
.word-chain-prompt b { display: inline-grid; min-width: 30px; min-height: 30px; place-items: center; margin-right: 3px; padding: 0 6px; border-radius: 8px; background: #fff; color: #165f52; }
.word-chain-form { margin-top: 17px; }
.word-chain-form label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 900; }
.word-chain-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.word-chain-form input { font-size: 17px; font-weight: 850; }
.word-chain-hint { margin-top: 12px; padding: 11px 13px; border-radius: 11px; background: #e8f5f1; color: #315e55; }
.word-chain-hint strong { font-size: 10px; }
.word-chain-hint p { margin: 4px 0 0; font-size: 11px; line-height: 1.55; }
.word-chain-history { display: flex; overflow-y: auto; min-height: 92px; max-height: 210px; flex-direction: column; gap: 7px; margin: 14px 0 0; padding: 12px; border: 1px solid #e1e6e4; border-radius: 12px; background: #fff; list-style: none; }
.word-chain-history li { display: flex; align-items: center; gap: 6px; max-width: 80%; padding: 7px 10px; border-radius: 12px; background: #eef1f3; }
.word-chain-history li.is-player { align-self: flex-end; background: #ddf4ec; color: #185f50; }
.word-chain-history li.is-computer { align-self: flex-start; color: #4a515a; }
.word-chain-history span { font-size: 9px; font-weight: 900; }
.word-chain-history strong { font-size: 14px; }

.baseball-setup,
.word-guess-setup { display: grid; gap: 20px; padding: 22px; }
.baseball-setup fieldset,
.word-guess-setup fieldset { margin: 0; padding: 0; border: 0; }
.baseball-setup legend,
.word-guess-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.baseball-length-grid,
.word-guess-category-grid { display: grid; gap: 8px; }
.baseball-length-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.word-guess-category-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.baseball-length-grid button,
.word-guess-category-grid button { display: flex; min-width: 0; min-height: 78px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d9dce1; border-radius: 12px; background: #fff; color: #343940; cursor: pointer; font: inherit; }
.baseball-length-grid button:hover,
.baseball-length-grid button.is-active { border-color: #316da6; background: #edf6ff; color: #21577f; }
.word-guess-category-grid button:hover,
.word-guess-category-grid button.is-active { border-color: #a0692a; background: #fff8e7; color: #80501d; }
.baseball-length-grid strong,
.word-guess-category-grid strong { font-size: 15px; }
.baseball-length-grid small { color: #747981; font-size: 10px; }
.word-guess-category-grid span { font-size: 22px; line-height: 1; }
.baseball-stage,
.word-guess-stage { padding-bottom: 20px; border-top: 1px solid #e3e5e8; }
.baseball-stage[hidden],
.baseball-result[hidden],
.word-guess-stage[hidden],
.word-guess-result[hidden] { display: none; }
.baseball-live,
.word-guess-live { display: grid; max-width: 760px; margin: 0 auto; padding: 15px 18px; }
.baseball-live { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.word-guess-live { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.baseball-live > div,
.word-guess-live > div { min-width: 0; text-align: center; }
.baseball-live > div + div,
.word-guess-live > div + div { border-left: 1px solid #dfe2e6; }
.baseball-live span,
.word-guess-live span { display: block; color: #747a82; font-size: 9px; }
.baseball-live strong,
.word-guess-live strong { display: block; overflow: hidden; margin-top: 3px; color: #33414d; font-size: 17px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.baseball-layout { display: grid; max-width: 780px; grid-template-columns: minmax(0, 1.08fr) minmax(270px, .92fr); gap: 14px; margin: 0 auto; padding: 0 14px; }
.baseball-input-panel,
.baseball-history-wrap { min-width: 0; padding: 18px; border: 1px solid #dce2e8; border-radius: 16px; background: #f8fbfe; }
.baseball-rule { margin: 0 0 13px; color: #5b626b; font-size: 12px; text-align: center; }
.baseball-rule b { display: inline-grid; width: 23px; height: 23px; place-items: center; margin: 0 3px 0 8px; border-radius: 50%; background: #326ca3; color: #fff; font-size: 11px; }
.baseball-clue { display: flex; justify-content: center; gap: 8px; margin: 5px 0 16px; }
.baseball-clue span { display: grid; width: 48px; height: 56px; place-items: center; border: 2px dashed #aac0d4; border-radius: 12px; background: #fff; color: #7a8d9e; font-size: 24px; font-weight: 950; }
.baseball-clue span.is-revealed { border-style: solid; border-color: #3274aa; background: #e8f4ff; color: #205c89; }
.baseball-form label,
.word-guess-form label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 900; }
.baseball-form > div,
.word-guess-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.baseball-form input { font-size: 22px; font-weight: 950; letter-spacing: .2em; text-align: center; }
.baseball-form small { display: block; margin-top: 6px; color: #747b83; font-size: 10px; }
.baseball-keypad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 13px; }
.baseball-keypad button { min-height: 40px; border: 1px solid #d9e1e8; border-radius: 9px; background: #fff; color: #31536f; cursor: pointer; font: inherit; font-weight: 900; }
.baseball-keypad button:hover { border-color: #4d80a8; background: #ebf5fc; }
.baseball-keypad .is-delete { grid-column: span 2; background: #edf1f4; }
.baseball-history-wrap { overflow: auto; background: #fff; }
.baseball-history { width: 100%; border-collapse: collapse; text-align: center; }
.baseball-history caption { margin-bottom: 10px; color: #343c45; font-size: 13px; font-weight: 900; text-align: left; }
.baseball-history th { padding: 8px 5px; border-bottom: 2px solid #dfe4e9; color: #68717a; font-size: 10px; }
.baseball-history td { padding: 9px 5px; border-bottom: 1px solid #edf0f3; color: #454e56; font-size: 13px; font-weight: 800; }
.baseball-history td:nth-child(2) { color: #263b4d; font-size: 16px; letter-spacing: .12em; }
.baseball-history .is-strike { color: #be3a47; }
.baseball-history .is-ball { color: #2872ac; }
.baseball-history .is-empty td { padding: 26px 5px; color: #899098; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.baseball-actions,
.word-guess-actions { display: flex; max-width: 760px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 14px; }
.baseball-actions .play-button,
.word-guess-actions .play-button { flex: 1 1 135px; }
.baseball-result,
.word-guess-result { max-width: 730px; margin: 18px auto 0; padding: 25px 20px; border-radius: 17px; background: linear-gradient(145deg, #eaf5ff, #f2f7ec); text-align: center; }
.word-guess-result { background: linear-gradient(145deg, #fff5dc, #f4efff); }
.baseball-result > span,
.word-guess-result > span { color: #466985; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.baseball-result h3,
.word-guess-result h3 { margin: 7px 0; font-size: 27px; }
.baseball-result p,
.word-guess-result p { margin: 0 0 16px; color: #606970; font-size: 13px; }

.word-guess-card { max-width: 720px; margin: 0 auto; padding: clamp(20px, 4vw, 34px); border: 1px solid #eadfca; border-radius: 20px; background: linear-gradient(155deg, #fffbef, #fff 52%, #f8f2e7); box-shadow: 0 10px 25px rgba(92, 72, 36, .1); }
.word-guess-lights { display: flex; justify-content: center; gap: 9px; min-height: 24px; }
.word-guess-lights span { font-size: 21px; line-height: 1; }
.word-guess-lights .is-on { color: #f5ac2a; filter: drop-shadow(0 0 6px rgba(245, 172, 42, .65)); }
.word-guess-lights .is-off { color: #c8c3bb; }
.word-guess-word { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(5px, 1.5vw, 10px); margin: 25px 0; }
.word-guess-word span { display: grid; width: clamp(44px, 10vw, 67px); height: clamp(54px, 12vw, 78px); place-items: center; border-bottom: 4px solid #5f5a52; color: #7d776d; font-size: clamp(25px, 7vw, 42px); font-weight: 950; }
.word-guess-word span.is-found { border-color: #c27a24; color: #613f18; animation: word-guess-open .18s ease-out; }
.word-guess-form { max-width: 520px; margin: 0 auto; }
.word-guess-form input { font-size: 17px; font-weight: 800; text-align: center; }
.word-guess-hint,
.word-guess-used { margin-top: 15px; padding: 13px 15px; border-radius: 12px; background: rgba(255, 255, 255, .8); }
.word-guess-hint strong,
.word-guess-used > strong { color: #936221; font-size: 11px; }
.word-guess-hint p { margin: 5px 0 0; color: #5f5a53; font-size: 12px; line-height: 1.6; }
.word-guess-used > div { display: flex; min-height: 29px; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; color: #7b7770; font-size: 11px; }
.word-guess-used span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 900; }
.word-guess-used span.is-correct { background: #e4f3e8; color: #287444; }
.word-guess-used span.is-wrong { background: #fae8e8; color: #a43d47; text-decoration: line-through; }
@keyframes word-guess-open { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.mole-setup,
.brick-setup { display: grid; gap: 20px; padding: 22px; }
.mole-setup fieldset,
.brick-setup fieldset { margin: 0; padding: 0; border: 0; }
.mole-setup legend,
.brick-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.mole-difficulty-grid,
.brick-difficulty-grid,
.mole-duration-grid { display: grid; gap: 8px; }
.mole-difficulty-grid,
.brick-difficulty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mole-duration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mole-difficulty-grid button,
.brick-difficulty-grid button { display: flex; min-height: 78px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d9d8d1; border-radius: 12px; background: #fff; color: #343733; cursor: pointer; font: inherit; }
.mole-duration-grid button { min-height: 46px; padding: 8px; border: 1px solid #d9d8d1; border-radius: 11px; background: #fff; color: #343733; cursor: pointer; font: inherit; font-weight: 900; }
.mole-difficulty-grid button:hover,
.mole-difficulty-grid button.is-active,
.mole-duration-grid button:hover,
.mole-duration-grid button.is-active { border-color: #8a6335; background: #fff5de; color: #704716; }
.brick-difficulty-grid button:hover,
.brick-difficulty-grid button.is-active { border-color: #6658a6; background: #f1effb; color: #4c3b89; }
.mole-difficulty-grid strong,
.brick-difficulty-grid strong { font-size: 15px; }
.mole-difficulty-grid small,
.brick-difficulty-grid small { color: #77766f; font-size: 10px; }
.mole-stage,
.brick-stage { padding-bottom: 20px; border-top: 1px solid #e2e3de; }
.mole-stage[hidden],
.mole-result[hidden],
.brick-stage[hidden],
.brick-result[hidden] { display: none; }
.mole-live,
.brick-live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; padding: 15px 18px; }
.mole-live > div,
.brick-live > div { min-width: 0; text-align: center; }
.mole-live > div + div,
.brick-live > div + div { border-left: 1px solid #dfe1dc; }
.mole-live span,
.brick-live span { display: block; color: #747a74; font-size: 9px; }
.mole-live strong,
.brick-live strong { display: block; overflow: hidden; margin-top: 3px; color: #334138; font-size: 17px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.mole-board { display: grid; width: min(100% - 24px, 540px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 14px); margin: 0 auto; padding: clamp(12px, 3vw, 22px); border: 4px solid #5d744b; border-radius: 24px; background: linear-gradient(145deg, #dce9c4, #bcd09e); box-shadow: 0 12px 25px rgba(66, 88, 51, .2); user-select: none; }
.mole-hole { position: relative; display: grid; overflow: hidden; aspect-ratio: 1.08; place-items: end center; padding: 0; border: 0; border-radius: 50% 50% 42% 42%; background: radial-gradient(ellipse at 50% 78%, #2c281f 0 42%, #4b4638 43% 51%, transparent 52%); color: inherit; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.mole-hole span { position: relative; z-index: 1; display: grid; width: 72%; height: 80%; place-items: center; padding-top: 12%; transform: translateY(100%); font-size: clamp(32px, 10vw, 68px); line-height: 1; transition: transform .12s ease-out; }
.mole-hole.is-active span { transform: translateY(8%); animation: mole-rise .18s ease-out; }
.mole-hole.is-golden { filter: drop-shadow(0 0 9px rgba(255, 210, 57, .7)); }
.mole-hole.is-bomb span { filter: drop-shadow(0 0 6px rgba(176, 48, 48, .5)); }
.mole-legend { display: flex; justify-content: center; gap: 14px; margin: 10px auto 0; color: #65685f; font-size: 11px; font-weight: 800; }
.mole-actions,
.brick-actions { display: flex; max-width: 680px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.mole-actions .play-button,
.brick-actions .play-button { flex: 1 1 135px; }
.mole-result,
.brick-result { max-width: 660px; margin: 18px auto 0; padding: 25px 20px; border-radius: 17px; text-align: center; }
.mole-result { background: linear-gradient(145deg, #fff0cc, #eef7dc); }
.brick-result { background: linear-gradient(145deg, #eeecff, #eaf7ff); }
.mole-result > span,
.brick-result > span { color: #6b5a37; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.mole-result h3,
.brick-result h3 { margin: 7px 0; font-size: 27px; }
.mole-result p,
.brick-result p { margin: 0 0 16px; color: #606861; font-size: 13px; }
@keyframes mole-rise { from { opacity: .35; transform: translateY(95%); } to { opacity: 1; transform: translateY(8%); } }

.brick-canvas-wrap { width: min(100% - 24px, 720px); overflow: hidden; margin: 0 auto; border: 5px solid #393550; border-radius: 18px; background: #171a32; box-shadow: 0 12px 28px rgba(45, 40, 75, .24); }
.brick-canvas { display: block; width: 100%; height: auto; aspect-ratio: 9 / 7; touch-action: none; }
.brick-controls { display: grid; width: min(100% - 24px, 430px); grid-template-columns: 86px 1fr 86px; gap: 8px; margin: 13px auto 0; }
.brick-controls button { min-height: 48px; border: 1px solid #d8d4e9; border-radius: 12px; background: #f4f1fc; color: #514479; cursor: pointer; font: inherit; font-size: 24px; font-weight: 900; touch-action: manipulation; }
.brick-controls button:hover { border-color: #6b59a7; background: #ebe5fa; }
.brick-controls .brick-launch { background: #5b49a0; color: #fff; font-size: 13px; }
.brick-controls button:disabled { opacity: .48; cursor: not-allowed; }

.nonogram-setup,
.sliding-setup { display: grid; gap: 20px; padding: 22px; }
.nonogram-setup fieldset,
.sliding-setup fieldset { margin: 0; padding: 0; border: 0; }
.nonogram-setup legend,
.sliding-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.nonogram-size-grid,
.sliding-size-grid { display: grid; gap: 8px; }
.nonogram-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sliding-size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nonogram-size-grid button,
.sliding-size-grid button { display: flex; min-height: 78px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid #d8d9d4; border-radius: 12px; background: #fff; color: #343834; cursor: pointer; font: inherit; }
.nonogram-size-grid button:hover,
.nonogram-size-grid button.is-active { border-color: #3e7655; background: #edf7ef; color: #275b3b; }
.sliding-size-grid button:hover,
.sliding-size-grid button.is-active { border-color: #7556aa; background: #f3effa; color: #573b88; }
.nonogram-size-grid strong,
.sliding-size-grid strong { font-size: 16px; }
.nonogram-size-grid small,
.sliding-size-grid small { color: #747972; font-size: 10px; }
.nonogram-stage,
.sliding-stage { padding-bottom: 20px; border-top: 1px solid #e2e3de; }
.nonogram-stage[hidden],
.nonogram-result[hidden],
.sliding-stage[hidden],
.sliding-result[hidden] { display: none; }
.nonogram-live,
.sliding-live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; padding: 15px 18px; }
.nonogram-live > div,
.sliding-live > div { min-width: 0; text-align: center; }
.nonogram-live > div + div,
.sliding-live > div + div { border-left: 1px solid #dfe1dc; }
.nonogram-live span,
.sliding-live span { display: block; color: #747a74; font-size: 9px; }
.nonogram-live strong,
.sliding-live strong { display: block; overflow: hidden; margin-top: 3px; color: #334138; font-size: 16px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.nonogram-scroll { overflow: auto; max-width: 100%; padding: 3px 10px 10px; overscroll-behavior: contain; }
.nonogram-puzzle { display: grid; width: max-content; grid-template-columns: 88px max-content; grid-template-rows: 84px max-content; overflow: hidden; margin: 0 auto; border: 4px solid #33443a; border-radius: 10px; background: #f4f2e9; box-shadow: 0 10px 24px rgba(47, 65, 53, .16); user-select: none; }
.nonogram-corner { display: grid; place-items: center; border-right: 2px solid #657069; border-bottom: 2px solid #657069; color: #9ba19c; font-size: 18px; }
.nonogram-column-clues { display: grid; grid-template-columns: repeat(var(--nonogram-size), var(--nonogram-cell)); border-bottom: 2px solid #657069; }
.nonogram-row-clues { display: grid; grid-template-rows: repeat(var(--nonogram-size), var(--nonogram-cell)); border-right: 2px solid #657069; }
.nonogram-column-clue,
.nonogram-row-clue { display: flex; align-items: center; justify-content: center; gap: 2px; color: #414843; font-size: 10px; font-weight: 900; font-variant-numeric: tabular-nums; }
.nonogram-column-clue { width: var(--nonogram-cell); flex-direction: column; border-right: 1px solid #d2d4ce; }
.nonogram-row-clue { height: var(--nonogram-cell); justify-content: flex-end; padding: 0 8px; border-bottom: 1px solid #d2d4ce; }
.nonogram-column-clue.is-complete,
.nonogram-row-clue.is-complete { background: #dff0e4; color: #2a7043; text-decoration: line-through; }
.nonogram-board { display: grid; width: max-content; grid-template-columns: repeat(var(--nonogram-size), var(--nonogram-cell)); touch-action: manipulation; }
.nonogram-cell { display: grid; width: var(--nonogram-cell); height: var(--nonogram-cell); place-items: center; padding: 0; border: 0; border-right: 1px solid #bfc4bd; border-bottom: 1px solid #bfc4bd; background: #fff; color: #626a64; cursor: pointer; font: inherit; font-size: calc(var(--nonogram-cell) * .58); font-weight: 800; line-height: 1; }
.nonogram-cell:hover:not(:disabled) { background: #eef5ef; }
.nonogram-cell.is-filled { background: #34463a; color: #fff; box-shadow: inset 0 0 0 1px #26372d; }
.nonogram-cell.is-crossed { background: #faf9f5; color: #a1a6a1; }
.nonogram-cell.is-changed { animation: nonogram-pop .16s ease-out; }
.nonogram-tools { display: flex; max-width: 720px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.nonogram-tools button { min-height: 42px; flex: 1 1 130px; padding: 8px 11px; border: 1px solid #d8dcd8; border-radius: 10px; background: #f7f8f6; color: #46524a; cursor: pointer; font: inherit; font-size: 11px; font-weight: 850; }
.nonogram-tools button:hover,
.nonogram-tools button.is-active { border-color: #4f7d5e; background: #e9f4ec; color: #2d6540; }
.nonogram-tools button:disabled { opacity: .48; cursor: not-allowed; }
.nonogram-result,
.sliding-result { max-width: 660px; margin: 18px auto 0; padding: 25px 20px; border-radius: 17px; text-align: center; }
.nonogram-result { background: linear-gradient(145deg, #e8f6ec, #fff7dc); }
.sliding-result { background: linear-gradient(145deg, #f1ecfb, #eaf5fb); }
.nonogram-result > span,
.sliding-result > span { color: #4b6e57; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.nonogram-result h3,
.sliding-result h3 { margin: 7px 0; font-size: 27px; }
.nonogram-result p,
.sliding-result p { margin: 0 0 16px; color: #606861; font-size: 13px; }
@keyframes nonogram-pop { from { opacity: .45; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

.sliding-board-wrap { padding: 2px 14px 0; }
.sliding-board { display: grid; width: min(100%, 540px); aspect-ratio: 1; grid-template-columns: repeat(var(--sliding-size), minmax(0, 1fr)); gap: clamp(6px, 1.6vw, 11px); margin: 0 auto; padding: clamp(8px, 2vw, 14px); border: 5px solid #403553; border-radius: 18px; background: #594a70; box-shadow: 0 12px 28px rgba(57, 43, 79, .2); touch-action: none; user-select: none; }
.sliding-tile { display: grid; min-width: 0; aspect-ratio: 1; place-items: center; padding: 0; border: 0; border-radius: 14px; background: linear-gradient(145deg, #fffdf7, #eee8dc); color: #3f364b; box-shadow: 0 3px 0 #cfc5b5; cursor: default; font: inherit; font-size: clamp(17px, calc(11vw / var(--sliding-size) * 4), 42px); font-weight: 950; font-variant-numeric: tabular-nums; }
.sliding-tile.is-movable { cursor: pointer; }
.sliding-tile.is-movable:hover { background: #fff6ca; }
.sliding-tile.is-correct { color: #286b47; background: linear-gradient(145deg, #f5fff6, #d9eedf); }
.sliding-tile.is-blank { background: rgba(28, 19, 40, .22); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .05); }
.sliding-tile.is-changed { animation: sliding-shift .16s ease-out; }
.sliding-direction-pad { display: grid; width: 168px; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 50px); gap: 6px; margin: 14px auto 0; }
.sliding-direction-pad button { border: 1px solid #ddd6e7; border-radius: 12px; background: #f5f1fa; color: #57436f; cursor: pointer; font: inherit; font-size: 22px; font-weight: 900; }
.sliding-direction-pad button:hover { border-color: #7556aa; background: #ede5f8; }
.sliding-direction-pad [data-sliding-direction="up"] { grid-column: 2; }
.sliding-direction-pad [data-sliding-direction="left"] { grid-column: 1; grid-row: 2; }
.sliding-direction-pad [data-sliding-direction="down"] { grid-column: 2; grid-row: 2; }
.sliding-direction-pad [data-sliding-direction="right"] { grid-column: 3; grid-row: 2; }
.sliding-actions { display: flex; max-width: 660px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.sliding-actions .play-button { flex: 1 1 135px; }
@keyframes sliding-shift { from { opacity: .55; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }

.minesweeper-setup { display: grid; gap: 20px; padding: 22px; }
.minesweeper-setup fieldset { margin: 0; padding: 0; border: 0; }
.minesweeper-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.minesweeper-level-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.minesweeper-level-grid button { display: flex; min-height: 82px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 11px; border: 1px solid #d5d8dc; border-radius: 12px; background: #fff; color: #34383d; cursor: pointer; font: inherit; }
.minesweeper-level-grid button:hover,
.minesweeper-level-grid button.is-active { border-color: #4c6d8b; background: #eef5fa; color: #2d587a; }
.minesweeper-level-grid strong { font-size: 15px; }
.minesweeper-level-grid small { color: #747a80; font-size: 10px; }
.minesweeper-stage { padding-bottom: 20px; border-top: 1px solid #e2e5e8; }
.minesweeper-stage[hidden],
.minesweeper-result[hidden] { display: none; }
.minesweeper-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; padding: 15px 18px; }
.minesweeper-live > div { text-align: center; }
.minesweeper-live > div + div { border-left: 1px solid #dfe3e6; }
.minesweeper-live span { display: block; color: #737980; font-size: 9px; }
.minesweeper-live strong { display: block; margin-top: 3px; color: #33424e; font-size: 18px; font-variant-numeric: tabular-nums; }
.minesweeper-board-scroll { overflow-x: auto; max-width: 100%; padding: 2px 12px 10px; overscroll-behavior-x: contain; }
.minesweeper-board { display: grid; width: max-content; grid-template-columns: repeat(var(--mine-columns), var(--mine-cell-size)); overflow: hidden; margin: 0 auto; border: 7px solid #4c5963; border-radius: 10px; background: #9aa5ad; box-shadow: 0 9px 22px rgba(52, 66, 76, .22); touch-action: manipulation; user-select: none; }
.minesweeper-cell { display: grid; width: var(--mine-cell-size); height: var(--mine-cell-size); place-items: center; padding: 0; border: 1px solid #74818a; border-top-color: #d9e0e4; border-left-color: #d9e0e4; background: #aeb8bf; color: #26333d; cursor: pointer; font: inherit; font-size: calc(var(--mine-cell-size) * .48); font-weight: 950; line-height: 1; }
.minesweeper-cell:hover:not(:disabled):not(.is-revealed) { background: #c2cbd1; }
.minesweeper-cell.is-revealed { border-color: #9ba4aa; background: #e4e7e8; cursor: default; }
.minesweeper-cell.is-flagged { font-size: calc(var(--mine-cell-size) * .48); }
.minesweeper-cell.is-mine { background: #e2d8d6; }
.minesweeper-cell.is-exploded { background: #e65c5c; }
.minesweeper-cell[data-count="1"] { color: #2260c4; }
.minesweeper-cell[data-count="2"] { color: #2a8548; }
.minesweeper-cell[data-count="3"] { color: #cf3d3d; }
.minesweeper-cell[data-count="4"] { color: #673aa4; }
.minesweeper-cell[data-count="5"] { color: #8b3a2b; }
.minesweeper-cell[data-count="6"] { color: #15808d; }
.minesweeper-cell[data-count="7"] { color: #292929; }
.minesweeper-cell[data-count="8"] { color: #666; }
.minesweeper-cell.is-changed { animation: minesweeper-open .17s ease-out; }
.minesweeper-tools { display: flex; max-width: 760px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 14px; }
.minesweeper-tools button { min-height: 42px; flex: 1 1 128px; padding: 8px 11px; border: 1px solid #d7dce0; border-radius: 10px; background: #f6f8f9; color: #44515a; cursor: pointer; font: inherit; font-size: 11px; font-weight: 850; }
.minesweeper-tools button:hover,
.minesweeper-tools button.is-active { border-color: #4c6d8b; background: #eaf3f9; color: #2d587a; }
.minesweeper-result { max-width: 760px; margin: 18px auto 0; padding: 25px 20px; border-radius: 17px; background: linear-gradient(145deg, #eaf5fb, #f2eeff); text-align: center; }
.minesweeper-result > span { color: #3c6889; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.minesweeper-result h3 { margin: 7px 0; font-size: 27px; }
.minesweeper-result p { margin: 0 0 16px; color: #606970; font-size: 13px; }
@keyframes minesweeper-open { from { opacity: .45; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }

.snake-setup { display: grid; gap: 20px; padding: 22px; }
.snake-setup fieldset { margin: 0; padding: 0; border: 0; }
.snake-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.snake-mode-grid,
.snake-speed-grid { display: grid; gap: 8px; }
.snake-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.snake-speed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.snake-mode-grid button,
.snake-speed-grid button { min-height: 48px; padding: 10px; border: 1px solid #d9ddd8; border-radius: 12px; background: #fff; color: #344039; cursor: pointer; font: inherit; font-weight: 850; }
.snake-mode-grid button { display: flex; min-height: 82px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.snake-mode-grid button small { color: #747d77; font-size: 10px; }
.snake-mode-grid button:hover,
.snake-mode-grid button.is-active,
.snake-speed-grid button:hover,
.snake-speed-grid button.is-active { border-color: #42825a; background: #edf8f0; color: #27683e; }
.snake-stage { padding-bottom: 20px; border-top: 1px solid #e1e6e2; }
.snake-stage[hidden],
.snake-setup[hidden],
.snake-result[hidden] { display: none; }
.snake-live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 650px; margin: 0 auto; padding: 15px 18px; }
.snake-live > div { text-align: center; }
.snake-live > div + div { border-left: 1px solid #dde4df; }
.snake-live span { display: block; color: #737c76; font-size: 9px; }
.snake-live strong { display: block; margin-top: 3px; color: #2f4537; font-size: 17px; }
.snake-board-wrap { padding: 0 10px; }
.snake-board { display: grid; width: min(100%, 620px); aspect-ratio: 1; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0 auto; padding: 7px; border: 6px solid #24362a; border-radius: 15px; background: #304a39; box-shadow: 0 10px 25px rgba(32, 59, 41, .22); touch-action: none; user-select: none; }
.snake-board > span { position: relative; min-width: 0; aspect-ratio: 1; border-radius: 22%; background: #dcebdc; }
.snake-board > span.is-body { background: #5ab86f; box-shadow: inset 0 0 0 1px rgba(27, 99, 47, .23); }
.snake-board > span.is-head { z-index: 2; border-radius: 35%; background: #287a45; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 0 1px 3px rgba(15, 68, 31, .4); }
.snake-board > span.is-head::before,
.snake-board > span.is-head::after { position: absolute; top: 21%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #fff; content: ""; }
.snake-board > span.is-head::before { left: 18%; }
.snake-board > span.is-head::after { right: 18%; }
.snake-board > span.is-food::after { position: absolute; inset: 12%; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 35% 28%, #ffae9e, #e24343 68%); box-shadow: 0 0 6px rgba(222, 61, 61, .55); content: ""; animation: snake-food-pulse .65s ease-in-out infinite alternate; }
.snake-direction-pad { display: grid; width: 168px; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 50px); gap: 6px; margin: 14px auto 0; }
.snake-direction-pad button { border: 1px solid #d5ded8; border-radius: 12px; background: #f1f7f3; color: #365443; cursor: pointer; font: inherit; font-size: 22px; font-weight: 900; }
.snake-direction-pad button:hover { border-color: #42825a; background: #e4f2e8; }
.snake-direction-pad [data-snake-direction="up"] { grid-column: 2; }
.snake-direction-pad [data-snake-direction="left"] { grid-column: 1; grid-row: 2; }
.snake-direction-pad [data-snake-direction="down"] { grid-column: 2; grid-row: 2; }
.snake-direction-pad [data-snake-direction="right"] { grid-column: 3; grid-row: 2; }
.snake-actions { display: flex; max-width: 650px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 12px; }
.snake-actions .play-button { flex: 1 1 138px; }
.snake-result { max-width: 620px; margin: 18px auto 0; padding: 25px 20px; border-radius: 17px; background: linear-gradient(145deg, #e9f8ed, #f2eeff); text-align: center; }
.snake-result > span { color: #34714a; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.snake-result h3 { margin: 7px 0; font-size: 27px; }
.snake-result p { margin: 0 0 16px; color: #606a63; font-size: 13px; }
@keyframes snake-food-pulse { to { transform: scale(.72); } }

.game-2048-live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 630px; margin: 0 auto; padding: 16px 18px; }
.game-2048-live > div { text-align: center; }
.game-2048-live > div + div { border-left: 1px solid #e2ddd5; }
.game-2048-live span { display: block; color: #77716a; font-size: 9px; font-weight: 800; }
.game-2048-live strong { display: block; margin-top: 3px; color: #493d32; font-size: 18px; font-variant-numeric: tabular-nums; }
.game-2048-board-wrap { padding: 2px 18px 0; }
.game-2048-board { display: grid; width: min(100%, 590px); aspect-ratio: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(7px, 1.6vw, 13px); margin: 0 auto; padding: clamp(8px, 1.8vw, 14px); border-radius: 18px; background: #51483f; box-shadow: 0 12px 28px rgba(60, 48, 37, .2); touch-action: none; user-select: none; }
.game-2048-cell { display: grid; min-width: 0; aspect-ratio: 1; place-items: center; border-radius: 13px; background: #6a6057; color: #fff; font-size: clamp(22px, 7vw, 52px); font-weight: 950; font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
.game-2048-cell[data-value="0"] { background: #6a6057; color: transparent; }
.game-2048-cell[data-value="2"] { background: #f7efe3; color: #544a40; }
.game-2048-cell[data-value="4"] { background: #efe0c6; color: #544a40; }
.game-2048-cell[data-value="8"] { background: #efa65f; }
.game-2048-cell[data-value="16"] { background: #e8894f; }
.game-2048-cell[data-value="32"] { background: #db6950; }
.game-2048-cell[data-value="64"] { background: #ca4f3c; }
.game-2048-cell[data-value="128"] { background: #d9b747; font-size: clamp(19px, 6vw, 44px); }
.game-2048-cell[data-value="256"] { background: #cfa735; font-size: clamp(19px, 6vw, 44px); }
.game-2048-cell[data-value="512"] { background: #bd942a; font-size: clamp(19px, 6vw, 44px); }
.game-2048-cell[data-value="1024"] { background: #8e70c7; font-size: clamp(16px, 5vw, 36px); }
.game-2048-cell[data-value="2048"],
.game-2048-cell[data-value="large"] { background: linear-gradient(145deg, #6642ad, #342064); font-size: clamp(15px, 4.7vw, 34px); box-shadow: inset 0 0 0 3px rgba(255, 228, 126, .5), 0 0 20px rgba(91, 62, 200, .35); }
.game-2048-cell.is-new { animation: game-2048-pop .18s ease-out; }
.game-2048-direction-pad { display: grid; width: 168px; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 50px); gap: 6px; margin: 15px auto 0; }
.game-2048-direction-pad button { border: 1px solid #ddd7cf; border-radius: 12px; background: #f5f1eb; color: #554a40; cursor: pointer; font: inherit; font-size: 22px; font-weight: 900; }
.game-2048-direction-pad button:hover { border-color: #81654c; background: #eee5d9; }
.game-2048-direction-pad [data-2048-move="up"] { grid-column: 2; }
.game-2048-direction-pad [data-2048-move="left"] { grid-column: 1; grid-row: 2; }
.game-2048-direction-pad [data-2048-move="down"] { grid-column: 2; grid-row: 2; }
.game-2048-direction-pad [data-2048-move="right"] { grid-column: 3; grid-row: 2; }
.game-2048-actions { display: flex; max-width: 630px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 15px auto 0; padding: 0 18px; }
.game-2048-actions .play-button { flex: 1 1 145px; }
.game-2048-result { max-width: 590px; margin: 18px auto 0; padding: 25px 20px; border-radius: 17px; background: linear-gradient(145deg, #fff0d7, #f2edff); text-align: center; }
.game-2048-result[hidden] { display: none; }
.game-2048-result > span { color: #8d5c27; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.game-2048-result h3 { margin: 7px 0; font-size: 27px; }
.game-2048-result p { margin: 0 0 16px; color: #655e57; font-size: 13px; }
@keyframes game-2048-pop { 0% { opacity: .4; transform: scale(.45); } 100% { opacity: 1; transform: scale(1); } }

.gomoku-setup { display: grid; gap: 20px; padding: 22px; }
.gomoku-setup fieldset { margin: 0; padding: 0; border: 0; }
.gomoku-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.gomoku-option-grid,
.gomoku-difficulty-grid { display: grid; gap: 8px; }
.gomoku-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gomoku-difficulty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gomoku-option-grid button,
.gomoku-difficulty-grid button { min-height: 48px; padding: 10px; border: 1px solid #d9d5ce; border-radius: 12px; background: #fff; color: #37332e; cursor: pointer; font: inherit; font-weight: 850; }
.gomoku-option-grid button { display: flex; min-height: 82px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.gomoku-option-grid button small { color: #78726b; font-size: 10px; }
.gomoku-option-grid button:hover,
.gomoku-option-grid button.is-active,
.gomoku-difficulty-grid button:hover,
.gomoku-difficulty-grid button.is-active { border-color: #75562e; background: #f6eee1; color: #65451f; }
.gomoku-stage { padding-bottom: 20px; border-top: 1px solid #e5e0d9; }
.gomoku-stage[hidden],
.gomoku-setup[hidden],
.gomoku-result[hidden] { display: none; }
.gomoku-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; margin: 0 auto; padding: 15px 18px; }
.gomoku-live > div { text-align: center; }
.gomoku-live > div + div { border-left: 1px solid #e3dfd8; }
.gomoku-live span { display: block; color: #79736d; font-size: 9px; }
.gomoku-live strong { display: block; margin-top: 3px; color: #423a32; font-size: 16px; }
.gomoku-board-wrap { padding: 0 12px; }
.gomoku-board { display: grid; width: min(100%, 680px); aspect-ratio: 1; grid-template-columns: repeat(15, minmax(0, 1fr)); overflow: hidden; margin: 0 auto; border: 7px solid #704c25; border-radius: 11px; background: #d8aa65; box-shadow: 0 10px 24px rgba(70, 47, 24, .22); touch-action: manipulation; }
.gomoku-cell { position: relative; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; border-right: 1px solid rgba(83, 57, 29, .62); border-bottom: 1px solid rgba(83, 57, 29, .62); background: transparent; cursor: pointer; }
.gomoku-cell:not(:disabled):hover { background: rgba(255, 243, 205, .38); }
.gomoku-cell:disabled { cursor: default; }
.gomoku-cell::before { position: absolute; z-index: 1; inset: 10%; border-radius: 50%; content: ""; opacity: 0; transform: scale(.65); }
.gomoku-cell.has-black::before { background: radial-gradient(circle at 35% 28%, #5b5b5b, #161616 48%, #000); box-shadow: 0 2px 3px rgba(49, 31, 17, .4); opacity: 1; transform: scale(1); }
.gomoku-cell.has-white::before { border: 1px solid #d5d2ca; background: radial-gradient(circle at 35% 28%, #fff, #eee 57%, #c7c3bb); box-shadow: 0 2px 3px rgba(49, 31, 17, .28); opacity: 1; transform: scale(1); }
.gomoku-cell.is-last::after { position: absolute; z-index: 2; top: 50%; left: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ef5b5b; content: ""; transform: translate(-50%, -50%); }
.gomoku-cell.is-winning::before { box-shadow: 0 0 0 3px #ffda55, 0 0 12px rgba(255, 217, 61, .85); }
.gomoku-actions { display: flex; max-width: 680px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 15px auto 0; padding: 0 14px; }
.gomoku-actions .play-button { flex: 1 1 150px; }
.gomoku-result { max-width: 680px; margin: 18px auto 0; padding: 25px 20px; border-radius: 17px; background: linear-gradient(145deg, #f5e6cc, #f4f0ff); text-align: center; }
.gomoku-result > span { color: #79562f; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.gomoku-result h3 { margin: 7px 0; font-size: 27px; }
.gomoku-result p { margin: 0 0 16px; color: #686057; font-size: 13px; }

.piano-toolbar { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; padding: 20px; border-bottom: 1px solid #e6e5e8; }
.piano-toolbar fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.piano-toolbar legend { margin-bottom: 9px; font-size: 12px; font-weight: 900; }
.piano-instrument-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.piano-instrument-grid button { display: flex; min-height: 75px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 9px 5px; border: 1px solid #dddce2; border-radius: 11px; background: #fff; color: #38373d; cursor: pointer; font: inherit; }
.piano-instrument-grid button:hover,
.piano-instrument-grid button.is-active { border-color: #7253b8; background: #f4f0ff; color: #553397; }
.piano-instrument-grid button span { font-size: 21px; }
.piano-instrument-grid button strong { font-size: 11px; }
.piano-settings { display: grid; gap: 12px; }
.piano-octave > span,
.piano-volume > span { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 900; }
.piano-octave > div { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; overflow: hidden; border: 1px solid #dddce2; border-radius: 10px; }
.piano-octave button { min-height: 37px; border: 0; background: #f4f3f6; color: #4e4d53; cursor: pointer; font: inherit; font-size: 18px; font-weight: 900; }
.piano-octave button:disabled { cursor: not-allowed; opacity: .35; }
.piano-octave strong { text-align: center; }
.piano-volume input { width: 100%; accent-color: #7253b8; }
.piano-volume b { color: #6545ad; }
.piano-now { display: grid; min-height: 100px; place-items: center; align-content: center; gap: 3px; padding: 14px; background: #282530; color: #fff; text-align: center; }
.piano-now > span { color: #bdb7ca; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.piano-now strong { font-size: clamp(22px, 5vw, 32px); }
.piano-now small { color: #cbc6d5; font-size: 10px; }
.piano-keyboard-wrap { overflow-x: auto; padding: 20px 18px 12px; background: #eceaf0; }
.piano-keyboard { position: relative; display: grid; width: min(100%, 840px); min-width: 560px; height: clamp(210px, 32vw, 300px); grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0 auto; border: 6px solid #242229; border-radius: 10px; background: #242229; box-shadow: 0 10px 22px rgba(35, 31, 43, .2); }
.piano-key { cursor: pointer; font: inherit; user-select: none; -webkit-user-select: none; }
.piano-key-white { position: relative; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; gap: 5px; padding: 12px 3px 16px; border: 1px solid #c7c5cb; border-width: 0 1px 1px 0; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #fff, #f3f1ed 84%, #d8d5d0); color: #37353b; }
.piano-key-white span { padding: 3px 6px; border-radius: 5px; background: #ebe8ef; color: #6f6a76; font-size: 9px; font-weight: 900; }
.piano-key-white strong { font-size: 11px; }
.piano-key-white.is-active { background: linear-gradient(180deg, #e9e1ff, #cfc1ff); box-shadow: inset 0 7px 12px rgba(73, 44, 140, .18); transform: translateY(3px); }
.piano-key-black { position: absolute; z-index: 2; top: 0; width: 8%; height: 62%; transform: translateX(-50%); display: flex; align-items: center; justify-content: flex-end; flex-direction: column; gap: 3px; padding: 7px 2px 12px; border: 0; border-radius: 0 0 7px 7px; background: linear-gradient(115deg, #38363e, #111014 68%, #48454d); box-shadow: 0 6px 7px rgba(24, 20, 28, .45), inset 0 -5px 5px rgba(255, 255, 255, .08); color: #fff; }
.piano-key-black span { color: #bfbac6; font-size: 8px; font-weight: 900; }
.piano-key-black strong { font-size: 9px; }
.piano-key-black.is-active { background: linear-gradient(180deg, #7757c4, #422c78); box-shadow: 0 2px 3px rgba(24, 20, 28, .35); transform: translate(-50%, 3px); }
.piano-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 0 18px 4px; background: #eceaf0; }
.piano-shortcuts span { display: grid; min-width: 25px; height: 25px; place-items: center; border: 1px solid #cbc8d0; border-radius: 5px; background: #fff; color: #68636f; font-size: 9px; font-weight: 900; }
.piano-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 16px 18px 4px; }
.piano-actions .play-button { min-width: 145px; }
.piano-actions [data-piano-record].is-active { border-color: #c63752; background: #c63752; color: #fff; }

.maze-setup { display: grid; gap: 20px; padding: 22px; }
.maze-setup fieldset { margin: 0; padding: 0; border: 0; }
.maze-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.maze-size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.maze-size-grid button { display: flex; min-height: 84px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 11px; border: 1px solid #dce1de; border-radius: 12px; background: #fff; color: #303633; cursor: pointer; font: inherit; }
.maze-size-grid button:hover,
.maze-size-grid button.is-active { border-color: #477c63; background: #eff8f3; color: #286047; }
.maze-size-grid strong { font-size: 15px; }
.maze-size-grid small { color: #747b77; font-size: 9px; }
.maze-stage { padding-bottom: 20px; border-top: 1px solid #e5e8e6; }
.maze-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; margin: 0 auto; padding: 15px 18px; }
.maze-live > div { text-align: center; }
.maze-live > div + div { border-left: 1px solid #e3e6e4; }
.maze-live span { display: block; color: #777c79; font-size: 9px; }
.maze-live strong { display: block; margin-top: 3px; font-size: 17px; }
.maze-board-wrap { padding: 0 18px; }
.maze-board { display: grid; width: min(100%, 680px); aspect-ratio: 1; grid-template-columns: repeat(var(--maze-size), minmax(0, 1fr)); overflow: hidden; margin: 0 auto; border: 8px solid #28352f; border-radius: 15px; background: #28352f; box-shadow: 0 8px 20px rgba(41, 58, 50, .18); touch-action: none; user-select: none; }
.maze-board > span { position: relative; min-width: 0; aspect-ratio: 1; }
.maze-board > span.is-wall { background: #28352f; }
.maze-board > span.is-path { background: #f8f4e8; }
.maze-board > span.is-start { background: #c7ddf6; }
.maze-board > span.is-exit { background: #74c995; }
.maze-board > span.is-exit::before { position: absolute; inset: 17%; border: 2px solid rgba(21, 91, 50, .72); border-radius: 3px; content: ""; }
.maze-board > span.is-trail { background: #eee1a7; }
.maze-board > span.is-hint { z-index: 1; background: #ffc86a; animation: maze-hint-pulse .65s ease-in-out infinite alternate; }
.maze-board > span.is-player::after { position: absolute; z-index: 2; inset: 12%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; background: #7652c6; box-shadow: 0 1px 4px rgba(50, 28, 100, .45); content: ""; }
.maze-direction-pad { display: grid; width: 168px; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 50px); gap: 6px; margin: 14px auto 0; }
.maze-direction-pad button { border: 1px solid #d9ddda; border-radius: 12px; background: #f5f7f5; color: #3f4b45; cursor: pointer; font: inherit; font-size: 22px; font-weight: 900; }
.maze-direction-pad button:hover { border-color: #477c63; background: #eaf5ef; }
.maze-direction-pad [data-maze-move="up"] { grid-column: 2; }
.maze-direction-pad [data-maze-move="left"] { grid-column: 1; grid-row: 2; }
.maze-direction-pad [data-maze-move="down"] { grid-column: 2; grid-row: 2; }
.maze-direction-pad [data-maze-move="right"] { grid-column: 3; grid-row: 2; }
.maze-tools { display: flex; max-width: 680px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 13px auto 0; padding: 0 18px; }
.maze-tools button { min-height: 40px; flex: 1 1 140px; padding: 8px 11px; border: 1px solid #dde1de; border-radius: 10px; background: #f7f8f7; color: #4e5551; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.maze-tools button:hover:not(:disabled),
.maze-tools button.is-active { border-color: #477c63; background: #eaf5ef; color: #286047; }
.maze-tools button:disabled { cursor: not-allowed; opacity: .45; }
.maze-complete { max-width: 680px; margin: 18px auto 0; padding: 24px 20px; border-radius: 16px; background: #ecf7f0; text-align: center; }
.maze-complete > span { color: #347052; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.maze-complete h3 { margin: 7px 0; font-size: 26px; }
.maze-complete p { margin: 0; color: #626965; font-size: 13px; }
.maze-complete .play-result-actions { margin-bottom: 0; }
@keyframes maze-hint-pulse { to { background: #ff9f43; transform: scale(.75); } }

.bubble-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 20px; border-bottom: 1px solid #e8e8ee; }
.bubble-controls fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.bubble-controls legend { margin-bottom: 9px; font-size: 12px; font-weight: 900; }
.bubble-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.bubble-size-options,
.bubble-theme-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bubble-option-grid button { display: flex; min-height: 64px; align-items: center; justify-content: center; flex-direction: column; gap: 3px; padding: 8px 5px; border: 1px solid #dedfe5; border-radius: 11px; background: #fff; color: #35363c; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.bubble-option-grid button:hover,
.bubble-option-grid button.is-active { border-color: #6a55b5; background: #f4f1ff; color: #50369f; }
.bubble-option-grid button strong { font-size: 12px; }
.bubble-option-grid button small { color: #777a82; font-size: 9px; }
.bubble-live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 650px; margin: 0 auto; padding: 16px 18px; }
.bubble-live > div { text-align: center; }
.bubble-live > div + div { border-left: 1px solid #e3e4e8; }
.bubble-live span { display: block; color: #787b82; font-size: 9px; }
.bubble-live strong { display: block; overflow: hidden; margin-top: 3px; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.bubble-board-wrap { padding: 0 18px; }
.bubble-board { display: grid; width: min(100%, 650px); grid-template-columns: repeat(var(--bubble-size), minmax(0, 1fr)); gap: 6px; margin: 0 auto; padding: 16px; border-radius: 25px; background: #f7d8e5; box-shadow: inset 0 0 0 1px rgba(46, 35, 62, .08), inset 0 -7px 12px rgba(74, 42, 76, .08); touch-action: none; user-select: none; }
.bubble-board[data-theme="ocean"] { background: #caeaf1; }
.bubble-board[data-theme="neon"] { background: #292341; }
.bubble-board button { --bubble-color: #ff8db6; position: relative; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .96) 0 7%, rgba(255, 255, 255, .46) 8% 18%, var(--bubble-color) 52%, color-mix(in srgb, var(--bubble-color), #392449 24%) 100%); box-shadow: inset -4px -6px 8px rgba(54, 27, 55, .2), inset 3px 4px 7px rgba(255, 255, 255, .7), 0 3px 5px rgba(64, 37, 68, .18); cursor: pointer; transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease; }
.bubble-board button.tone-1 { --bubble-color: #ffbd62; }
.bubble-board button.tone-2 { --bubble-color: #8fdbbd; }
.bubble-board button.tone-3 { --bubble-color: #aa9cff; }
.bubble-board[data-theme="ocean"] button.tone-0 { --bubble-color: #70d4ec; }
.bubble-board[data-theme="ocean"] button.tone-1 { --bubble-color: #72acd9; }
.bubble-board[data-theme="ocean"] button.tone-2 { --bubble-color: #78ddc9; }
.bubble-board[data-theme="ocean"] button.tone-3 { --bubble-color: #9ec7f1; }
.bubble-board[data-theme="neon"] button.tone-0 { --bubble-color: #ff4ba8; }
.bubble-board[data-theme="neon"] button.tone-1 { --bubble-color: #ffcc3f; }
.bubble-board[data-theme="neon"] button.tone-2 { --bubble-color: #35f0c0; }
.bubble-board[data-theme="neon"] button.tone-3 { --bubble-color: #8b70ff; }
.bubble-board button.is-golden { --bubble-color: #ffd23f !important; }
.bubble-board button.is-golden::after { position: absolute; inset: 0; display: grid; place-items: center; color: #8a5c00; content: "★"; font-size: clamp(7px, 1.6vw, 15px); text-shadow: 0 1px rgba(255, 255, 255, .7); }
.bubble-board button.is-popped { opacity: .48; background: radial-gradient(circle, rgba(76, 61, 90, .15) 0 35%, rgba(255, 255, 255, .2) 38% 50%, transparent 53%); box-shadow: inset 2px 3px 5px rgba(49, 32, 57, .18); transform: scale(.76); }
.bubble-board button.is-popped::after { display: none; }
.bubble-board[data-size="14"] { gap: 4px; padding: 12px; }
.bubble-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 16px 18px 4px; }
.bubble-actions .play-button { min-width: 140px; }

.word-search-setup { display: grid; gap: 21px; padding: 22px; }
.word-search-setup fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.word-search-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.word-search-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.word-search-category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.word-search-option-grid button { display: flex; min-height: 78px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 10px 7px; border: 1px solid #dfe1e5; border-radius: 12px; background: #fff; color: #303238; cursor: pointer; font: inherit; }
.word-search-option-grid button:hover,
.word-search-option-grid button.is-active { border-color: #26785e; background: #eff9f5; color: #176047; }
.word-search-option-grid button > span { font-size: 21px; }
.word-search-option-grid strong { font-size: 13px; }
.word-search-option-grid small { color: #757981; font-size: 9px; }
.word-search-stage { padding-bottom: 20px; border-top: 1px solid #e7e9e8; }
.word-search-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 800px; margin: 0 auto; padding: 15px 18px; }
.word-search-live > div { text-align: center; }
.word-search-live > div + div { border-left: 1px solid #e4e6e5; }
.word-search-live span { display: block; color: #777c79; font-size: 9px; }
.word-search-live strong { display: block; margin-top: 3px; font-size: 17px; }
.word-search-layout { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: start; gap: 16px; max-width: 820px; margin: 0 auto; padding: 0 18px; }
.word-search-board { display: grid; width: 100%; grid-template-columns: repeat(var(--word-search-size), minmax(0, 1fr)); gap: 4px; padding: 8px; border-radius: 17px; background: #e8eeeb; touch-action: none; user-select: none; }
.word-search-board button { min-width: 0; aspect-ratio: 1; padding: 0; border: 0; border-radius: 8px; background: #fff; color: #2f3532; cursor: pointer; font: inherit; font-size: clamp(15px, 4.5vw, 28px); font-weight: 900; transition: background .13s ease, color .13s ease, transform .13s ease; }
.word-search-board[data-size="10"] button { border-radius: 6px; font-size: clamp(12px, 3.6vw, 22px); }
.word-search-board button:hover { background: #f4faf7; }
.word-search-board button.is-found { background: #ccecdc; color: #176047; }
.word-search-board button.is-preview { background: #ffe273; color: #4a3b00; transform: scale(.94); }
.word-search-board button.is-hint { background: #ffb85c; color: #5c3300; animation: word-search-hint .65s ease-in-out infinite alternate; }
.word-search-list { padding: 15px; border: 1px solid #e0e5e2; border-radius: 14px; background: #fafcfb; }
.word-search-list h3 { margin: 0 0 10px; font-size: 13px; }
.word-search-list > div { display: grid; gap: 5px; }
.word-search-list span { padding: 7px 9px; border-radius: 8px; background: #fff; color: #4d5551; font-size: 11px; font-weight: 800; }
.word-search-list span.is-found { background: #dff2e8; color: #26785e; text-decoration: line-through; }
.word-search-tools { display: flex; max-width: 820px; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0 18px; }
.word-search-tools button { min-height: 40px; flex: 1 1 145px; padding: 8px 12px; border: 1px solid #dfe2e0; border-radius: 10px; background: #f7f8f7; color: #4f5552; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.word-search-tools button:hover:not(:disabled) { border-color: #26785e; background: #eff9f5; color: #176047; }
.word-search-tools button:disabled { cursor: not-allowed; opacity: .45; }
.word-search-complete { max-width: 820px; margin: 18px auto 0; padding: 24px 20px; border-radius: 16px; background: #edf8f3; text-align: center; }
.word-search-complete > span { color: #26785e; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.word-search-complete h3 { margin: 7px 0; font-size: 26px; }
.word-search-complete p { margin: 0; color: #626965; font-size: 13px; }
.word-search-complete .play-result-actions { margin-bottom: 0; }
@keyframes word-search-hint { to { transform: scale(.9); box-shadow: 0 0 0 4px rgba(255, 184, 92, .22); } }

.plant-picker { padding: 20px; }
.plant-picker > p { margin: 0 0 16px; color: #60656b; font-size: 14px; line-height: 1.65; }
.plant-species-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.plant-species-grid button { display: flex; min-height: 190px; flex-direction: column; align-items: flex-start; padding: 17px; border: 1px solid #dfe4e1; border-top: 4px solid var(--plant-accent, #63a774); border-radius: 15px; background: #fff; color: #28312b; cursor: pointer; text-align: left; font: inherit; }
.plant-species-grid button:hover { border-color: var(--plant-accent, #63a774); background: #fbfdfb; transform: translateY(-2px); }
.plant-species-grid button > span { color: #68716b; font-size: 10px; font-weight: 800; }
.plant-species-grid button > b { margin: auto 0 8px; font-size: 43px; line-height: 1; }
.plant-species-grid button > strong { font-size: 16px; }
.plant-species-grid button > small { margin-top: 5px; color: #39794a; font-weight: 800; }
.plant-garden { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr); border-top: 1px solid #e8ece9; }
.plant-scene { position: relative; display: flex; min-height: 540px; align-items: center; justify-content: flex-end; flex-direction: column; overflow: hidden; padding: 26px 22px 45px; background: linear-gradient(180deg, #dff3ef 0 58%, #d6c39c 58% 100%); }
.plant-scene::after { position: absolute; right: -14%; bottom: 19%; left: -14%; height: 25%; border-radius: 50%; background: rgba(107, 139, 91, .2); content: ""; }
.plant-scene-sky { position: absolute; top: 20px; right: 20px; left: 20px; display: flex; align-items: center; justify-content: space-between; color: #44615c; font-size: 25px; font-weight: 900; }
.plant-scene-sky small { padding: 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, .66); font-size: 10px; }
.plant-visual { position: relative; z-index: 2; display: grid; min-height: 145px; place-items: end center; font-size: clamp(78px, 13vw, 130px); line-height: 1; filter: drop-shadow(0 12px 7px rgba(47, 71, 51, .17)); }
.plant-visual.is-cared { animation: plant-care-bounce .5s ease; }
.plant-pot { position: relative; z-index: 3; display: grid; width: 145px; height: 105px; place-items: center; margin-top: -8px; clip-path: polygon(5% 0, 95% 0, 82% 100%, 18% 100%); background: var(--plant-accent, #b47050); color: rgba(255, 255, 255, .88); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.plant-profile { padding: 22px; }
.plant-profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.plant-profile-head span { color: #4c7f59; font-size: 11px; font-weight: 900; }
.plant-profile-head h3 { margin: 5px 0 0; font-size: 28px; letter-spacing: -.04em; }
.plant-profile-head button,
.plant-name-form button { min-height: 36px; padding: 7px 11px; border: 1px solid #dce1dd; border-radius: 9px; background: #fff; color: #545b56; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.plant-name-form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 18px 0; padding: 11px; border-radius: 12px; background: #f5f7f5; }
.plant-name-form label { font-size: 11px; font-weight: 900; }
.plant-name-form .play-input { min-height: 38px; padding: 8px 10px; }
.plant-growth { padding: 15px; border: 1px solid #e0e5e1; border-radius: 13px; }
.plant-growth > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 900; }
.plant-growth-track { height: 8px; overflow: hidden; margin: 10px 0 7px; border-radius: 999px; background: #e5ebe6; }
.plant-growth-track span { display: block; height: 100%; border-radius: inherit; background: #55a96a; transition: width .35s ease; }
.plant-growth small { color: #747b76; font-size: 10px; }
.plant-mood { margin: 13px 0; padding: 13px 15px; border: 0; border-radius: 12px; background: #fff8df; color: #5c5235; font-size: 13px; font-weight: 700; line-height: 1.55; }
.plant-care-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plant-care-grid button { display: flex; min-height: 105px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 10px 5px; border: 1px solid #dce2dd; border-radius: 12px; background: #fff; color: #323934; cursor: pointer; font: inherit; }
.plant-care-grid button:hover:not(:disabled) { border-color: #5a9e6a; background: #f4fbf6; }
.plant-care-grid button:disabled { cursor: default; }
.plant-care-grid button.is-done { border-color: #cfe5d4; background: #eef8f0; color: #397848; }
.plant-care-grid button span { font-size: 25px; }
.plant-care-grid button strong { font-size: 12px; }
.plant-care-grid button small { color: #747b76; font-size: 9px; }
.plant-today { margin-top: 13px; padding: 13px 14px; border-radius: 12px; background: #f5f6f7; }
.plant-today > div:first-child { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; }
.plant-today-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.plant-today-checks span { padding: 5px 8px; border-radius: 999px; background: #e6e8ea; color: #777d79; font-size: 9px; font-weight: 800; }
.plant-today-checks span.is-done { background: #dcefe1; color: #367647; }
.plant-record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.plant-record-grid > div { padding: 11px; border: 1px solid #e2e5e3; border-radius: 11px; text-align: center; }
.plant-record-grid span { display: block; color: #777d79; font-size: 9px; }
.plant-record-grid strong { display: block; margin-top: 4px; font-size: 17px; }
.plant-profile > .play-result-actions { margin-bottom: 0; }
.plant-collection { padding: 20px; border-top: 1px solid #e8ece9; }
.plant-collection-head { display: flex; align-items: center; justify-content: space-between; }
.plant-collection-head h3 { margin: 0; font-size: 15px; }
.plant-collection-head span { color: #4c7f59; font-size: 12px; font-weight: 900; }
.plant-collection-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.plant-collection-grid > div { display: grid; min-height: 78px; place-items: center; align-content: center; gap: 5px; padding: 7px; border-radius: 10px; background: #f3f5f3; text-align: center; }
.plant-collection-grid > div.is-complete { background: #e8f5eb; }
.plant-collection-grid span { font-size: 25px; }
.plant-collection-grid strong { color: #777d79; font-size: 9px; }
@keyframes plant-care-bounce { 50% { transform: translateY(-13px) scale(1.06); } }

.sudoku-setup { display: grid; gap: 22px; padding: 22px; }
.sudoku-setup fieldset { margin: 0; padding: 0; border: 0; }
.sudoku-setup legend { margin-bottom: 10px; font-size: 13px; font-weight: 900; }
.sudoku-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.sudoku-option-grid button { display: flex; min-height: 86px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 12px; border: 1px solid #dfe1e5; border-radius: 13px; background: #fff; color: #303238; cursor: pointer; font: inherit; }
.sudoku-option-grid button:hover,
.sudoku-option-grid button.is-active { border-color: #6550b1; background: #f5f2ff; color: #503798; }
.sudoku-option-grid strong { font-size: 15px; }
.sudoku-option-grid small { color: #747780; font-size: 10px; }
.sudoku-board-stage { padding-bottom: 20px; border-top: 1px solid #e7e8ec; }
.sudoku-live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 610px; margin: 0 auto; padding: 15px 18px; }
.sudoku-live > div { text-align: center; }
.sudoku-live > div + div { border-left: 1px solid #e4e5e8; }
.sudoku-live span { display: block; color: #787b82; font-size: 9px; }
.sudoku-live strong { display: block; margin-top: 3px; font-size: 17px; }
.sudoku-board-wrap { padding: 0 18px; }
.sudoku-board { display: grid; width: min(100%, 610px); overflow: hidden; grid-template-columns: repeat(var(--sudoku-size), 1fr); margin: 0 auto; border: 3px solid #302b3d; background: #302b3d; gap: 1px; touch-action: manipulation; }
.sudoku-board button { position: relative; display: grid; min-width: 0; aspect-ratio: 1; place-items: center; padding: 0; border: 0; background: #fff; color: #3f2fa0; cursor: pointer; font: inherit; font-size: clamp(16px, 4.8vw, 31px); font-weight: 800; }
.sudoku-board[data-size="9"] button { font-size: clamp(14px, 4vw, 27px); }
.sudoku-board button.is-box-right { box-shadow: inset -2px 0 #302b3d; }
.sudoku-board button.is-box-bottom { box-shadow: inset 0 -2px #302b3d; }
.sudoku-board button.is-box-right.is-box-bottom { box-shadow: inset -2px -2px #302b3d; }
.sudoku-board button.is-given { background: #f2f2f5; color: #27272b; font-weight: 900; }
.sudoku-board button.is-peer { background: #f3f0ff; }
.sudoku-board button.is-same-value { background: #e8e1ff; color: #4c2db3; }
.sudoku-board button.is-selected { z-index: 1; background: #d9ceff; box-shadow: inset 0 0 0 3px #684dca; }
.sudoku-board button.is-wrong { background: #fff0f1; color: #c12742; }
.sudoku-notes { display: grid; width: 100%; height: 100%; grid-template-columns: repeat(var(--sudoku-size), 1fr); align-items: center; }
.sudoku-notes i { color: #6f7280; font-size: clamp(5px, 1.2vw, 9px); font-style: normal; font-weight: 700; }
.sudoku-number-pad { display: grid; max-width: 610px; grid-template-columns: repeat(var(--sudoku-size), minmax(0, 1fr)); gap: 7px; margin: 14px auto 0; padding: 0 18px; }
.sudoku-number-pad button { min-height: 45px; padding: 6px 2px; border: 1px solid #dcdde2; border-radius: 10px; background: #fff; color: #4d38a4; cursor: pointer; font: inherit; font-size: 16px; font-weight: 900; }
.sudoku-number-pad button:hover { border-color: #6550b1; background: #f3efff; }
.sudoku-tools { display: flex; max-width: 610px; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 11px auto 0; padding: 0 18px; }
.sudoku-tools button { min-height: 38px; flex: 1 1 105px; padding: 7px 10px; border: 1px solid #e0e1e5; border-radius: 9px; background: #f6f6f8; color: #50525a; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.sudoku-tools button.is-active { border-color: #6550b1; background: #ece7ff; color: #503798; }
.sudoku-complete { max-width: 610px; margin: 18px auto 0; padding: 24px 20px; border-radius: 16px; background: #f4f1ff; text-align: center; }
.sudoku-complete > span { color: #6249b4; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.sudoku-complete h3 { margin: 7px 0; font-size: 26px; }
.sudoku-complete p { margin: 0; color: #62656c; font-size: 13px; }
.sudoku-complete .play-result-actions { margin-bottom: 0; }

.play-copy-section h2,
.play-faq h2,
.play-related h2 { margin-top: 0; }
.play-copy-section p,
.play-faq p { color: #50545b; line-height: 1.75; }
.play-copy-section ul { padding-left: 20px; color: #50545b; line-height: 1.8; }
.play-faq details { padding: 15px 0; border-top: 1px solid #eceef2; }
.play-faq summary { cursor: pointer; font-weight: 900; }

.play-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.play-related-grid > a { padding: 14px; border-radius: 12px; background: #f5f6f8; color: inherit; text-align: center; text-decoration: none; font-weight: 800; }
.play-related-grid > a:hover { background: #ece8ff; }

.play-ad-disclosure { margin: 8px auto 0; color: #777c84; font-size: 11px; line-height: 1.5; text-align: center; }

@media (max-width: 720px) {
  .play-page { width: min(100% - 24px, 980px); padding-top: 18px; }
  .play-card-grid { grid-template-columns: 1fr; }
  .play-card-link { min-height: 170px; }
  .balance-choices { grid-template-columns: 1fr; }
  .play-choice { min-height: 112px; }
  .play-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .play-form { flex-direction: column; }
  .reaction-stage { min-height: 250px; }
  .typing-live { align-items: flex-start; flex-direction: column; gap: 4px; }
  .memory-display { min-height: 220px; }
  .color-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .color-live { flex-wrap: wrap; }
  .click-speed-stage { min-height: 250px; }
  .click-speed-live,
  .memory-card-live { flex-wrap: wrap; }
  .memory-card-grid { gap: 8px; }
  .memory-card { border-radius: 12px; }
  .play-field-grid { grid-template-columns: 1fr; align-items: stretch; }
  .utility-result-grid { grid-template-columns: 1fr; }
  .number-search-grid { gap: 7px; }
  .number-search-cell { border-radius: 10px; }
  .number-search-live,
  .mental-math-live { flex-wrap: wrap; }
  .mental-math-stage { min-height: 190px; }
  .up-down-stage { min-height: 200px; }
  .five-second-card { min-height: 190px; padding: 24px 18px; }
  .five-second-live { flex-wrap: wrap; }
  .bingo-grid { gap: 5px; }
  .bingo-cell { min-height: 70px; padding: 8px 4px; border-radius: 8px; font-size: 10px; }
  .bingo-cell.is-checked::after { top: 2px; right: 4px; font-size: 11px; }
  .bingo-live { gap: 18px; }
  .seat-chart { margin-right: -4px; margin-left: -4px; padding: 16px 12px; }
  .seat-grid { gap: 7px; }
  .rps-player { min-height: 165px; }
  .rps-choice-grid button { min-height: 88px; }
  .rps-live { flex-wrap: wrap; gap: 10px 18px; }
  .ladder-input-grid { grid-template-columns: 1fr; }
  .ladder-chart { margin-right: -4px; margin-left: -4px; padding: 14px 10px; }
  .ladder-revealed { grid-template-columns: 1fr; }
  .emoji-answer-form { grid-template-columns: 1fr; }
  .emoji-answer-form > .play-button { width: 100%; }
  .drawing-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawing-difficulty-grid { grid-template-columns: 1fr; }
  .drawing-prompt-options > .play-button { width: 100%; }
  .truth-mode-grid,
  .truth-level-grid { grid-template-columns: 1fr; }
  .truth-setup > .play-button,
  .writing-prompt-options > .play-button { width: 100%; }
  .truth-card { min-height: 210px; }
  .writing-genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .writing-workspace,
  .writing-timer-panel { padding: 18px 14px; }
  .writing-draft { min-height: 280px; }
  .challenge-category-grid,
  .story-genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .challenge-week { padding: 17px 10px; }
  .challenge-week-head,
  .story-output-head { align-items: flex-start; flex-direction: column; }
  .challenge-week-grid { gap: 4px; }
  .challenge-week-grid > div { padding: 8px 1px; }
  .challenge-week-grid strong { width: 23px; height: 23px; font-size: 14px; }
  .story-setting-grid { grid-template-columns: 1fr; }
  .story-relay-setup > .play-button { width: 100%; }
  .story-turn-head { grid-template-columns: 1fr; }
  .story-turn-timer { align-items: stretch; flex-direction: column; text-align: center; }
  .story-output { padding: 18px 15px; }
  .name-compatibility-input-grid,
  .zodiac-form { grid-template-columns: 1fr; }
  .name-compatibility-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .name-compatibility-result,
  .zodiac-result { grid-template-columns: 1fr; padding: 21px 18px; text-align: center; }
  .name-compatibility-score,
  .zodiac-result-symbol { margin: 0 auto; }
  .name-compatibility-metrics { text-align: center; }
  .name-compatibility-prompt,
  .zodiac-tip,
  .zodiac-result > .play-result-actions { grid-column: auto; }
  .zodiac-keywords { justify-content: center; }
  .nickname-style-grid,
  .certificate-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nickname-result-grid,
  .certificate-input-grid { grid-template-columns: 1fr; }
  .certificate-reason-field { grid-column: auto; }
  .tarot-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarot-category-grid button:first-child { grid-column: 1 / -1; }
  .tarot-spread-grid { grid-template-columns: 1fr; }
  .tarot-reading-head { align-items: flex-start; flex-direction: column; }
  .tarot-card-face { min-height: 200px; }
  .tarot-history { padding: 15px 9px; }
  .tarot-history-grid { gap: 3px; }
  .tarot-history-grid > div { min-height: 72px; }
  .tarot-history-grid span { font-size: 18px; }
  .detective-case-grid,
  .detective-suspect-grid { grid-template-columns: 1fr; }
  .detective-case-grid button { min-height: 145px; }
  .detective-game-head { align-items: flex-start; padding: 17px 16px; }
  .detective-game-head > div:last-child strong { font-size: 22px; }
  .detective-scene,
  .detective-suspects,
  .detective-clues,
  .detective-result { margin-right: 12px; margin-left: 12px; }
  .detective-game > .play-result-actions { padding-right: 12px; padding-left: 12px; }
  .detective-result-stats { grid-template-columns: 1fr; }
  .mafia-mode-grid,
  .escape-episode-grid { grid-template-columns: 1fr; }
  .mafia-mode-grid button,
  .escape-episode-grid button { min-height: 92px; }
  .mafia-pass-cover,
  .mafia-role-card { min-height: 340px; }
  .mafia-ready-head { align-items: flex-start; }
  .escape-game-head { align-items: flex-start; padding: 17px 16px; }
  .escape-game-head > div:last-child strong { font-size: 22px; }
  .escape-stage-progress { padding-right: 16px; padding-left: 16px; }
  .escape-scene,
  .escape-result { margin-right: 12px; margin-left: 12px; }
  .escape-answer-form { grid-template-columns: 1fr; margin-right: 12px; margin-left: 12px; }
  .escape-answer-form .play-button { width: 100%; }
  .escape-hint-box { margin-right: 12px; margin-left: 12px; }
  .escape-result-stats { grid-template-columns: 1fr; }
  .pixel-art-toolbar,
  .pixel-art-workspace,
  .sound-mixer-controls { grid-template-columns: 1fr; }
  .pixel-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pixel-art-workspace { gap: 14px; padding: 14px; }
  .pixel-palette-wrap { display: block; padding: 12px; }
  .pixel-palette-wrap > strong { margin: 0 0 9px; }
  .pixel-palette { grid-template-columns: repeat(7, minmax(24px, 1fr)); gap: 6px; }
  .pixel-palette button { width: 100%; height: auto; aspect-ratio: 1; }
  .pixel-custom-color { margin-top: 10px; padding-top: 9px; }
  .pixel-canvas { width: 100%; }
  .sound-preset-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .sound-track-grid { grid-template-columns: 1fr; padding: 14px; }
  .sound-track-grid > label { padding: 13px 15px; }
  .sound-now-playing { margin-right: 12px; margin-left: 12px; }
  .charades-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .charades-category-grid button:first-child { grid-column: 1 / -1; min-height: 64px; }
  .charades-setup-grid { grid-template-columns: 1fr; }
  .charades-ready,
  .charades-summary { min-height: 290px; padding: 42px 18px; }
  .charades-card { min-height: 260px; margin-right: 12px; margin-left: 12px; }
  .charades-live { padding-right: 14px; padding-left: 14px; }
  .charades-actions { padding-right: 12px; padding-left: 12px; }
  .adventure-story-grid { grid-template-columns: 1fr; padding: 14px; }
  .adventure-story-grid button { min-height: 220px; }
  .adventure-game-head { align-items: flex-start; padding: 17px 16px; }
  .adventure-scene,
  .adventure-ending { margin-right: 12px; margin-left: 12px; }
  .adventure-scene { min-height: 230px; padding: 24px 18px; }
  .adventure-choices { padding-right: 12px; padding-left: 12px; }
  .water-sort-setup,
  .proverb-setup { padding: 18px 14px; }
  .water-sort-level-grid,
  .proverb-mode-grid { gap: 5px; }
  .water-sort-level-grid button,
  .proverb-mode-grid button { min-height: 72px; padding: 8px 4px; }
  .water-sort-live,
  .proverb-live { padding-right: 5px; padding-left: 5px; }
  .water-sort-live strong,
  .proverb-live strong { font-size: 13px; }
  .water-sort-board { min-height: 260px; gap: 21px 10px; margin-right: 6px; margin-left: 6px; padding: 34px 10px 22px; }
  .water-sort-tube { width: 48px; height: 154px; padding: 6px 4px 4px; border-width: 3px; border-radius: 4px 4px 17px 17px; }
  .water-sort-actions,
  .proverb-actions { padding-right: 8px; padding-left: 8px; }
  .proverb-arena { min-height: 360px; margin-right: 8px; margin-left: 8px; padding: 16px 12px; }
  .proverb-prompt { min-height: 138px; }
  .proverb-options { grid-template-columns: 1fr; }
  .water-sort-result,
  .proverb-result { margin-right: 8px; margin-left: 8px; }
  .lights-out-setup,
  .fortune-cookie-setup { padding: 18px 14px; }
  .lights-out-size-grid { gap: 5px; }
  .lights-out-size-grid button { min-height: 74px; padding: 8px 4px; }
  .lights-out-live { padding-right: 4px; padding-left: 4px; }
  .lights-out-live strong { font-size: 13px; }
  .lights-out-board { width: calc(100% - 16px); padding: 9px; border-radius: 14px; }
  .lights-out-actions { padding-right: 8px; padding-left: 8px; }
  .lights-out-result { margin-right: 8px; margin-left: 8px; }
  .fortune-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .fortune-category-grid button { min-height: 76px; }
  .fortune-cookie-stage { min-height: 430px; padding: 24px 12px; }
  .fortune-cookie-result { padding: 24px 14px; }
  .fortune-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fortune-details > div:nth-child(3) { border-left: 0; }
  .fortune-details > div:nth-child(n + 3) { border-top: 1px solid #eadfcf; }
  .crossword-setup,
  .odd-emoji-setup { padding: 18px 14px; }
  .crossword-setup-copy { align-items: flex-start; padding: 16px 13px; }
  .crossword-setup-copy > span { width: 72px; min-width: 72px; height: 72px; border-width: 4px; font-size: 16px; }
  .crossword-layout { grid-template-columns: 1fr; gap: 12px; padding: 0 8px; }
  .crossword-board { max-width: 520px; margin: 0 auto; padding: 5px; border-width: 3px; }
  .crossword-cell input { font-size: clamp(19px, 8vw, 31px); }
  .crossword-live,
  .odd-emoji-live { padding-right: 3px; padding-left: 3px; }
  .crossword-live strong,
  .odd-emoji-live strong { font-size: 11px; }
  .crossword-actions,
  .odd-emoji-actions { padding-right: 8px; padding-left: 8px; }
  .crossword-result,
  .odd-emoji-result { margin-right: 8px; margin-left: 8px; }
  .odd-emoji-difficulty-grid { gap: 5px; }
  .odd-emoji-difficulty-grid button { min-height: 75px; padding: 8px 4px; }
  .odd-emoji-board { width: calc(100% - 12px); padding: 7px; border-radius: 13px; }
  .spot-difference-setup { padding: 18px 14px; }
  .spot-difference-difficulty-grid { gap: 5px; }
  .spot-difference-difficulty-grid button { min-height: 74px; padding: 8px 4px; }
  .spot-difference-live { padding-right: 3px; padding-left: 3px; }
  .spot-difference-live strong { font-size: 11px; }
  .spot-difference-pair { gap: 6px; padding: 0 5px; }
  .spot-difference-board { gap: 2px; padding: 5px; border-radius: 12px; }
  .spot-difference-board button.is-found { box-shadow: inset 0 0 0 2px #43a27d; }
  .spot-difference-board button.is-found::after { right: 1px; bottom: 1px; width: 12px; height: 12px; font-size: 7px; }
  .spot-difference-actions { padding-right: 8px; padding-left: 8px; }
  .spot-difference-result { margin-right: 8px; margin-left: 8px; }
  .flag-quiz-setup { padding: 18px 14px; }
  .flag-quiz-region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .flag-quiz-region-grid button { min-height: 70px; padding: 7px 3px; }
  .flag-quiz-difficulty-grid { gap: 5px; }
  .flag-quiz-difficulty-grid button { min-height: 73px; padding: 7px 3px; }
  .flag-quiz-live { padding-right: 3px; padding-left: 3px; }
  .flag-quiz-live strong { font-size: 11px; }
  .flag-quiz-arena { margin-right: 6px; margin-left: 6px; padding: 20px 10px; border-radius: 14px; }
  .flag-quiz-question { min-height: 100px; margin-bottom: 13px; }
  .flag-quiz-question[data-direction="country-to-flag"] + .flag-quiz-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flag-quiz-options { gap: 6px; }
  .flag-quiz-options button { min-height: 64px; gap: 6px; padding: 7px 5px; }
  .flag-quiz-option-flag { font-size: 24px; }
  .flag-quiz-options strong { font-size: 12px; }
  .flag-quiz-hint-copy,
  .flag-quiz-feedback { margin-right: 8px; margin-left: 8px; }
  .flag-quiz-actions { padding-right: 8px; padding-left: 8px; }
  .flag-quiz-result { margin-right: 8px; margin-left: 8px; }
  .korean-spelling-setup { padding: 18px 14px; }
  .korean-spelling-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .korean-spelling-category-grid button { min-height: 74px; padding: 7px 4px; }
  .korean-spelling-difficulty-grid { gap: 5px; }
  .korean-spelling-difficulty-grid button { min-height: 74px; padding: 7px 4px; }
  .korean-spelling-live { padding-right: 3px; padding-left: 3px; }
  .korean-spelling-live strong { font-size: 11px; }
  .korean-spelling-arena { min-height: 330px; margin-right: 6px; margin-left: 6px; padding: 24px 12px; border-radius: 14px; }
  .korean-spelling-arena > h3 { min-height: 58px; margin: 15px auto 20px; }
  .korean-spelling-options { gap: 7px; }
  .korean-spelling-options button { min-height: 68px; padding: 9px 6px; font-size: 15px; }
  .korean-spelling-feedback { padding: 14px; }
  .korean-spelling-actions { padding-right: 8px; padding-left: 8px; }
  .korean-spelling-result { margin-right: 8px; margin-left: 8px; }
  .clock-reading-setup { padding: 18px 14px; }
  .clock-reading-difficulty-grid { gap: 5px; }
  .clock-reading-difficulty-grid button { min-height: 79px; padding: 7px 3px; }
  .clock-reading-live { padding-right: 3px; padding-left: 3px; }
  .clock-reading-live strong { font-size: 11px; }
  .clock-reading-arena { margin-right: 6px; margin-left: 6px; padding: 21px 10px; border-radius: 14px; }
  .clock-reading-face { --clock-radius: clamp(91px, 28vw, 111px); width: min(270px, 82vw); border-width: 7px; }
  .clock-reading-options { gap: 6px; }
  .clock-reading-options button { min-height: 60px; padding: 8px 4px; font-size: 14px; }
  .clock-reading-feedback { padding: 14px; }
  .clock-reading-actions { padding-right: 8px; padding-left: 8px; }
  .clock-reading-result { margin-right: 8px; margin-left: 8px; }
  .make-24-setup { padding: 18px 14px; }
  .make-24-difficulty-grid { gap: 5px; }
  .make-24-difficulty-grid button { min-height: 79px; padding: 7px 3px; }
  .make-24-live { padding-right: 3px; padding-left: 3px; }
  .make-24-live strong { font-size: 11px; }
  .make-24-arena { margin-right: 6px; margin-left: 6px; padding: 22px 10px; border-radius: 14px; }
  .make-24-target { margin-bottom: 17px; }
  .make-24-cards { gap: 7px; }
  .make-24-cards button { flex: 1 1 112px; width: auto; max-width: 145px; min-height: 101px; padding: 12px 7px; }
  .make-24-selection { margin-top: 14px; }
  .make-24-operators { gap: 6px; }
  .make-24-operators button { min-height: 51px; padding: 5px; font-size: 21px; }
  .make-24-round-result { padding: 14px; }
  .make-24-actions { padding-right: 8px; padding-left: 8px; }
  .make-24-actions .play-button { flex: 1 1 126px; }
  .make-24-result { margin-right: 8px; margin-left: 8px; }
  .date-calculator-tabs { overflow-x: auto; justify-content: flex-start; margin-right: 6px; margin-left: 6px; padding: 5px; scrollbar-width: thin; }
  .date-calculator-tabs button { min-height: 44px; flex: 1 0 108px; padding: 8px 7px; font-size: 11px; }
  .date-calculator-panel { margin: 14px 6px 0; padding: 19px 13px; border-radius: 15px; }
  .date-calculator-panel > h3 + p { margin-bottom: 16px; }
  .date-calculator-panel-head { align-items: flex-start; gap: 10px; margin-bottom: 17px; }
  .date-calculator-panel-head > span { width: 40px; min-width: 40px; height: 40px; border-radius: 11px; font-size: 19px; }
  .date-calculator-form { grid-template-columns: 1fr; gap: 13px; }
  .date-calculator-form .play-button { width: 100%; }
  .date-calculator-input-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .date-calculator-input-row > .play-button-primary { grid-column: 1 / -1; }
  .date-calculator-date-pair { grid-template-columns: 1fr; gap: 9px; }
  .date-calculator-date-pair > .play-button { width: 100%; }
  .date-calculator-add-row { gap: 7px; }
  .date-calculator-preset:not(button),
  .date-calculator-presets { gap: 6px; }
  button.date-calculator-preset,
  .date-calculator-preset button,
  .date-calculator-presets button { min-height: 42px; flex: 1 1 72px; padding-right: 8px; padding-left: 8px; }
  .date-calculator-result { padding: 21px 13px; }
  .date-calculator-metrics,
  .date-calculator-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .date-calculator-metrics > div,
  .date-calculator-result-grid > div { padding: 11px 9px; }
  .weekday-quiz-setup { padding: 18px 14px; }
  .date-quiz-setup { gap: 17px; }
  .weekday-quiz-difficulty-grid,
  .date-quiz-difficulty-grid { gap: 5px; }
  .weekday-quiz-difficulty-grid button,
  .date-quiz-difficulty-grid button { min-height: 76px; padding: 8px 4px; }
  .weekday-quiz-live,
  .date-quiz-live { padding-right: 3px; padding-left: 3px; }
  .weekday-quiz-live strong,
  .date-quiz-live strong { font-size: 11px; }
  .weekday-quiz-question,
  .date-quiz-arena { min-height: 150px; margin-right: 0; margin-left: 0; padding: 23px 10px; border-radius: 14px; }
  .weekday-quiz-options,
  .date-quiz-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-right: 0; padding-left: 0; }
  .weekday-quiz-options button,
  .date-quiz-options button { min-height: 56px; padding: 8px 5px; font-size: 13px; }
  .weekday-quiz-feedback,
  .date-quiz-feedback { margin-right: 0; margin-left: 0; padding: 14px; }
  .weekday-quiz-actions,
  .date-quiz-actions { padding-right: 0; padding-left: 0; }
  .weekday-quiz-actions .play-button,
  .date-quiz-actions .play-button { flex: 1 1 126px; }
  .weekday-quiz-result,
  .date-quiz-result { margin-right: 0; margin-left: 0; }
  .shape-rotation-setup { gap: 16px; padding: 18px 14px; }
  .shape-rotation-difficulty-grid { gap: 5px; }
  .shape-rotation-difficulty-grid button { min-height: 78px; padding: 8px 4px; }
  .shape-rotation-rule { padding: 12px; }
  .shape-rotation-live { padding-right: 3px; padding-left: 3px; }
  .shape-rotation-live strong { font-size: 11px; }
  .shape-rotation-arena { margin-right: 0; margin-left: 0; padding: 20px 9px; border-radius: 15px; }
  .shape-rotation-target.shape-rotation-board { width: min(184px, 58vw); padding: 11px; }
  .shape-rotation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
  .shape-rotation-options > button { min-height: 126px; padding: 8px 5px; }
  .shape-rotation-options .shape-rotation-board { width: min(102px, 100%); }
  .shape-rotation-feedback { padding: 14px; }
  .shape-rotation-actions { padding-right: 0; padding-left: 0; }
  .shape-rotation-actions .play-button { flex: 1 1 126px; }
  .shape-rotation-result { margin-right: 0; margin-left: 0; }
  .number-sequence-setup { gap: 16px; padding: 18px 14px; }
  .number-sequence-difficulty-grid { gap: 5px; }
  .number-sequence-difficulty-grid button { min-height: 78px; padding: 8px 4px; }
  .number-sequence-rule { padding: 12px; }
  .number-sequence-live { padding-right: 3px; padding-left: 3px; }
  .number-sequence-live strong { font-size: 11px; }
  .number-sequence-arena { margin-right: 0; margin-left: 0; padding: 20px 9px; border-radius: 15px; }
  .number-sequence-values { justify-content: flex-start; }
  .number-sequence-term { min-width: 50px; min-height: 54px; padding: 8px 6px; }
  .number-sequence-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
  .number-sequence-options button { min-height: 56px; padding: 8px 5px; }
  .number-sequence-hint p,
  .number-sequence-feedback { padding: 14px; }
  .number-sequence-actions { padding-right: 0; padding-left: 0; }
  .number-sequence-actions .play-button { flex: 1 1 126px; }
  .number-sequence-result { margin-right: 0; margin-left: 0; }
  .word-group-setup { gap: 16px; padding: 18px 14px; }
  .word-group-rule { padding: 12px; }
  .word-group-live { padding-right: 3px; padding-left: 3px; }
  .word-group-live strong { font-size: 12px; }
  .word-group-arena { margin-right: 0; margin-left: 0; padding: 14px 8px 17px; border-radius: 15px; }
  .word-group-solved-card { padding: 11px 9px; }
  .word-group-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .word-group-board button { min-height: 57px; padding: 8px 5px; font-size: 13px; }
  .word-group-controls .play-button { flex: 1 1 116px; }
  .word-group-hint p,
  .word-group-feedback { padding: 13px 11px; }
  .word-group-actions { padding-right: 0; padding-left: 0; }
  .word-group-actions .play-button { flex: 1 1 126px; }
  .word-group-result { margin-right: 0; margin-left: 0; }
  .matchstick-setup { gap: 16px; padding: 18px 14px; }
  .matchstick-rule { padding: 12px; }
  .matchstick-difficulty-grid { gap: 5px; }
  .matchstick-difficulty-grid button { min-height: 76px; padding: 8px 4px; }
  .matchstick-live { padding-right: 3px; padding-left: 3px; }
  .matchstick-live strong { font-size: 12px; }
  .matchstick-arena { margin-right: 0; margin-left: 0; padding: 15px 7px 17px; border-radius: 15px; }
  .matchstick-equation { min-height: 105px; justify-content: flex-start; padding: 14px 8px; }
  .matchstick-controls .play-button { flex: 1 1 116px; }
  .matchstick-hint p,
  .matchstick-feedback { padding: 13px 11px; }
  .matchstick-actions { padding-right: 0; padding-left: 0; }
  .matchstick-actions .play-button { flex: 1 1 126px; }
  .matchstick-result { margin-right: 0; margin-left: 0; }
  .pattern-memory-setup,
  .daily-riddle-setup { padding: 18px 14px; }
  .pattern-difficulty-grid { gap: 5px; }
  .pattern-difficulty-grid button { min-height: 76px; padding: 8px 4px; }
  .pattern-memory-live { padding-right: 3px; padding-left: 3px; }
  .pattern-memory-live strong { font-size: 11px; }
  .pattern-memory-board { width: calc(100% - 14px); gap: 7px; padding: 10px; border-radius: 15px; }
  .pattern-memory-actions,
  .daily-riddle-actions { padding-right: 8px; padding-left: 8px; }
  .pattern-memory-result,
  .daily-riddle-result { margin-right: 8px; margin-left: 8px; }
  .riddle-intro { align-items: flex-start; padding: 16px 13px; }
  .riddle-intro > span { width: 60px; min-width: 60px; height: 60px; font-size: 34px; }
  .riddle-card { margin-right: 8px; margin-left: 8px; padding: 24px 14px; }
  .riddle-card form > div { grid-template-columns: 1fr; }
  .one-stroke-setup,
  .color-order-setup { padding: 18px 14px; }
  .one-stroke-difficulty-grid,
  .color-order-difficulty-grid { gap: 5px; }
  .one-stroke-difficulty-grid button,
  .color-order-difficulty-grid button { min-height: 76px; padding: 8px 4px; }
  .one-stroke-live,
  .color-order-live { padding-right: 3px; padding-left: 3px; }
  .one-stroke-live strong,
  .color-order-live strong { font-size: 11px; }
  .one-stroke-board { width: calc(100% - 14px); gap: 5px; padding: 9px; border-radius: 15px; }
  .one-stroke-actions,
  .color-order-actions { padding-right: 8px; padding-left: 8px; }
  .one-stroke-result,
  .color-order-result { margin-right: 8px; margin-left: 8px; }
  .color-order-board { width: calc(100% - 14px); min-height: 180px; border-width: 4px; border-radius: 14px; }
  .color-order-tile.is-selected { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #272b33; }
  .perfect-pitch-setup,
  .pipe-connect-setup { padding: 18px 14px; }
  .perfect-pitch-difficulty-grid,
  .pipe-connect-difficulty-grid { gap: 5px; }
  .perfect-pitch-difficulty-grid button,
  .pipe-connect-difficulty-grid button { min-height: 76px; padding: 8px 4px; }
  .perfect-pitch-live,
  .pipe-connect-live { padding-right: 3px; padding-left: 3px; }
  .perfect-pitch-live strong,
  .pipe-connect-live strong { font-size: 11px; }
  .perfect-pitch-listener { min-height: 190px; margin-right: 8px; margin-left: 8px; padding: 18px 12px; border-radius: 16px; }
  .perfect-pitch-listener > button { min-height: 112px; }
  .perfect-pitch-answers { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 5px; padding-right: 8px; padding-left: 8px; }
  .perfect-pitch-answers button { min-height: 54px; }
  .perfect-pitch-actions,
  .pipe-connect-actions { padding-right: 8px; padding-left: 8px; }
  .perfect-pitch-result,
  .pipe-connect-result { margin-right: 8px; margin-left: 8px; }
  .rhythm-tap-setup { padding: 18px 14px; }
  .rhythm-tap-difficulty-grid { gap: 5px; }
  .rhythm-tap-difficulty-grid button { min-height: 76px; padding: 8px 4px; }
  .rhythm-tap-live { padding-right: 3px; padding-left: 3px; }
  .rhythm-tap-live strong { font-size: 11px; }
  .rhythm-tap-arena { gap: 14px; margin-right: 8px; margin-left: 8px; padding: 16px 10px; border-radius: 16px; }
  .rhythm-listen-button { min-height: 92px; }
  .rhythm-tap-pad { min-height: 132px; border-radius: 21px; }
  .rhythm-tap-actions { padding-right: 8px; padding-left: 8px; }
  .rhythm-tap-result { margin-right: 8px; margin-left: 8px; }
  .pipe-connect-board { width: calc(100% - 14px); gap: 4px; padding: 8px; border-radius: 14px; }
  .falling-setup,
  .word-chain-setup { padding: 18px 14px; }
  .falling-speed-grid,
  .word-chain-difficulty-grid { gap: 5px; }
  .falling-speed-grid button,
  .word-chain-difficulty-grid button { min-height: 72px; padding: 8px 4px; }
  .falling-live,
  .word-chain-live { padding-right: 5px; padding-left: 5px; }
  .falling-live strong,
  .word-chain-live strong { font-size: 13px; }
  .falling-layout { width: calc(100% - 8px); grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 4px; }
  .falling-board { padding: 3px; border-width: 3px; border-radius: 9px; }
  .falling-preview-panel { gap: 7px; }
  .falling-preview-panel > div { padding: 6px 4px; border-radius: 8px; }
  .falling-preview-panel small { display: none; }
  .falling-controls { width: calc(100% - 16px); gap: 4px; }
  .falling-controls button { min-height: 41px; font-size: 13px; }
  .falling-actions,
  .word-chain-actions { padding-right: 8px; padding-left: 8px; }
  .word-chain-arena { margin-right: 8px; margin-left: 8px; padding: 18px 12px; }
  .word-chain-form > div { grid-template-columns: 1fr; }
  .word-chain-form .play-button { width: 100%; }
  .falling-result,
  .word-chain-result { margin-right: 8px; margin-left: 8px; }
  .baseball-setup,
  .word-guess-setup { padding: 18px 14px; }
  .word-guess-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .word-guess-category-grid button { min-height: 70px; padding: 8px 4px; }
  .baseball-live,
  .word-guess-live { padding-right: 5px; padding-left: 5px; }
  .baseball-live strong,
  .word-guess-live strong { font-size: 13px; }
  .baseball-layout { grid-template-columns: 1fr; padding-right: 8px; padding-left: 8px; }
  .baseball-input-panel,
  .baseball-history-wrap { padding: 15px 12px; }
  .baseball-keypad { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .baseball-actions,
  .word-guess-actions { padding-right: 8px; padding-left: 8px; }
  .word-guess-card { margin-right: 8px; margin-left: 8px; padding: 22px 13px; border-radius: 15px; }
  .word-guess-lights { gap: 6px; }
  .word-guess-form > div { grid-template-columns: 1fr; }
  .word-guess-form .play-button { width: 100%; }
  .mole-setup,
  .brick-setup,
  .nonogram-setup,
  .sliding-setup,
  .minesweeper-setup,
  .snake-setup { padding: 18px 14px; }
  .mole-difficulty-grid,
  .brick-difficulty-grid { gap: 5px; }
  .mole-difficulty-grid button,
  .brick-difficulty-grid button { min-height: 72px; padding: 8px 4px; }
  .mole-live,
  .brick-live { padding-right: 5px; padding-left: 5px; }
  .mole-live strong,
  .brick-live strong { font-size: 13px; }
  .mole-board { width: calc(100% - 10px); gap: 6px; padding: 9px; border-width: 4px; border-radius: 16px; }
  .mole-hole span { font-size: clamp(30px, 14vw, 56px); }
  .mole-actions,
  .brick-actions { padding-right: 7px; padding-left: 7px; }
  .brick-canvas-wrap { width: calc(100% - 8px); border-width: 4px; border-radius: 12px; }
  .brick-controls { width: calc(100% - 16px); grid-template-columns: 70px 1fr 70px; }
  .nonogram-size-grid,
  .sliding-size-grid { gap: 5px; }
  .nonogram-size-grid button,
  .sliding-size-grid button { min-height: 72px; padding: 8px 4px; }
  .nonogram-live,
  .sliding-live { padding-right: 5px; padding-left: 5px; }
  .nonogram-live strong,
  .sliding-live strong { font-size: 13px; }
  .nonogram-scroll { padding-right: 3px; padding-left: 3px; }
  .nonogram-puzzle { grid-template-columns: 70px max-content; border-width: 4px; border-radius: 8px; }
  .nonogram-row-clue { padding-right: 5px; padding-left: 5px; }
  .nonogram-tools,
  .sliding-actions { padding-right: 7px; padding-left: 7px; }
  .sliding-board-wrap { padding-right: 5px; padding-left: 5px; }
  .sliding-board { gap: 5px; padding: 7px; border-width: 4px; border-radius: 12px; }
  .sliding-tile { border-radius: 8px; }
  .minesweeper-level-grid { gap: 5px; }
  .minesweeper-level-grid button { min-height: 74px; padding: 8px 4px; }
  .minesweeper-board-scroll { padding-right: 5px; padding-left: 5px; }
  .minesweeper-board { margin-right: auto; margin-left: auto; border-width: 5px; }
  .minesweeper-tools { padding-right: 7px; padding-left: 7px; }
  .snake-live { padding-right: 5px; padding-left: 5px; }
  .snake-live strong { font-size: 14px; }
  .snake-board-wrap { padding-right: 3px; padding-left: 3px; }
  .snake-board { gap: 1px; padding: 4px; border-width: 4px; border-radius: 10px; }
  .snake-actions { padding-right: 7px; padding-left: 7px; }
  .game-2048-live { padding-right: 8px; padding-left: 8px; }
  .game-2048-live strong { font-size: 15px; }
  .game-2048-board-wrap { padding-right: 5px; padding-left: 5px; }
  .game-2048-board { gap: 6px; padding: 7px; border-radius: 12px; }
  .game-2048-cell { border-radius: 8px; }
  .game-2048-actions { padding-right: 8px; padding-left: 8px; }
  .gomoku-setup { padding: 18px 14px; }
  .gomoku-board-wrap { padding-right: 3px; padding-left: 3px; }
  .gomoku-board { border-width: 4px; border-radius: 7px; }
  .gomoku-live { padding-right: 6px; padding-left: 6px; }
  .gomoku-live strong { font-size: 13px; }
  .gomoku-actions { padding-right: 8px; padding-left: 8px; }
  .piano-toolbar { grid-template-columns: 1fr; padding: 16px 14px; }
  .piano-instrument-grid { gap: 5px; }
  .piano-instrument-grid button { min-height: 68px; }
  .piano-keyboard-wrap { padding-right: 10px; padding-left: 10px; }
  .piano-keyboard { height: 215px; }
  .piano-actions { padding-right: 10px; padding-left: 10px; }
  .piano-actions .play-button { flex: 1 1 135px; min-width: 0; }
  .maze-setup { padding: 18px 14px; }
  .maze-size-grid { gap: 6px; }
  .maze-size-grid button { min-height: 76px; padding: 9px 5px; }
  .maze-board-wrap { padding: 0 7px; }
  .maze-board { border-width: 5px; border-radius: 10px; }
  .maze-tools { padding-right: 8px; padding-left: 8px; }
  .maze-complete { margin-right: 8px; margin-left: 8px; }
  .bubble-controls { grid-template-columns: 1fr; padding: 16px 14px; }
  .bubble-board-wrap { padding: 0 8px; }
  .bubble-board { gap: 4px; padding: 10px; border-radius: 18px; }
  .bubble-board[data-size="14"] { gap: 2px; padding: 7px; }
  .bubble-actions { padding-right: 10px; padding-left: 10px; }
  .bubble-actions .play-button { flex: 1 1 130px; min-width: 0; }
  .word-search-setup { padding: 18px 14px; }
  .word-search-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .word-search-category-grid button:first-child { grid-column: 1 / -1; min-height: 58px; }
  .word-search-layout { grid-template-columns: 1fr; gap: 11px; padding: 0 8px; }
  .word-search-board { gap: 3px; padding: 6px; border-radius: 13px; }
  .word-search-list { padding: 12px; }
  .word-search-list > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .word-search-tools { padding-right: 8px; padding-left: 8px; }
  .word-search-complete { margin-right: 8px; margin-left: 8px; }
  .plant-species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plant-species-grid button { min-height: 165px; }
  .plant-garden { grid-template-columns: 1fr; }
  .plant-scene { min-height: 390px; }
  .plant-profile { padding: 18px 14px; }
  .plant-name-form { grid-template-columns: 1fr auto; }
  .plant-name-form label { grid-column: 1 / -1; }
  .plant-collection { padding: 18px 12px; }
  .plant-collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sudoku-setup { padding: 18px 14px; }
  .sudoku-option-grid { gap: 6px; }
  .sudoku-option-grid button { min-height: 78px; padding: 9px 5px; }
  .sudoku-board-wrap { padding: 0 10px; }
  .sudoku-number-pad,
  .sudoku-tools { padding-right: 10px; padding-left: 10px; }
  .sudoku-board button.is-selected { box-shadow: inset 0 0 0 2px #684dca; }
  .sudoku-complete { margin-right: 10px; margin-left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .play-card-link,
  .roulette-wheel,
  .reaction-stage,
  .memory-card,
  .number-search-cell,
  .up-down-stage,
  .five-second-card,
  .bingo-cell,
  .rps-choice-grid button,
  .nickname-result-card,
  .emoji-quiz-card,
  .tarot-card-result,
  .detective-case-grid button,
  .charades-category-grid button,
  .charades-actions button,
  .adventure-story-grid button,
  .adventure-choices button,
  .sound-track-grid > label,
  .baseball-length-grid button,
  .baseball-keypad button,
  .word-guess-category-grid button,
  .word-guess-word span,
  .falling-speed-grid button,
  .falling-controls button,
  .word-chain-difficulty-grid button,
  .water-sort-level-grid button,
  .water-sort-tube,
  .proverb-mode-grid button,
  .proverb-options button,
  .lights-out-size-grid button,
  .lights-out-cell,
  .fortune-category-grid button,
  .fortune-cookie-button,
  .crossword-setup-copy,
  .crossword-cell,
  .crossword-clues button,
  .odd-emoji-difficulty-grid button,
  .odd-emoji-board button,
  .spot-difference-difficulty-grid button,
  .spot-difference-board button,
  .flag-quiz-region-grid button,
  .flag-quiz-difficulty-grid button,
  .flag-quiz-options button,
  .korean-spelling-category-grid button,
  .korean-spelling-difficulty-grid button,
  .korean-spelling-options button,
  .clock-reading-difficulty-grid button,
  .clock-reading-options button,
  .make-24-difficulty-grid button,
  .make-24-cards button,
  .make-24-operators button,
  .date-calculator-tabs button,
  button.date-calculator-preset,
  .date-calculator-preset button,
  .date-calculator-presets button,
  .weekday-quiz-difficulty-grid button,
  .weekday-quiz-options button,
  .date-quiz-difficulty-grid button,
  .date-quiz-options button,
  .shape-rotation-difficulty-grid button,
  .shape-rotation-options > button,
  .number-sequence-difficulty-grid button,
  .number-sequence-options button,
  .word-group-board button,
  .word-group-controls button,
  .word-group-hint button,
  .matchstick-difficulty-grid button,
  .matchstick-segment,
  .matchstick-controls button,
  .matchstick-hint button,
  .pattern-difficulty-grid button,
  .pattern-memory-board button,
  .riddle-intro,
  .one-stroke-difficulty-grid button,
  .one-stroke-cell,
  .color-order-difficulty-grid button,
  .color-order-tile,
  .perfect-pitch-difficulty-grid button,
  .perfect-pitch-listener > button,
  .perfect-pitch-answers button,
  .rhythm-tap-difficulty-grid button,
  .rhythm-listen-button,
  .rhythm-beat-dots span,
  .rhythm-tap-pad,
  .pipe-connect-difficulty-grid button,
  .pipe-connect-cell,
  .mole-difficulty-grid button,
  .mole-duration-grid button,
  .mole-hole span,
  .brick-difficulty-grid button,
  .brick-controls button,
  .nonogram-size-grid button,
  .nonogram-cell,
  .sliding-size-grid button,
  .sliding-tile,
  .sliding-direction-pad button,
  .minesweeper-level-grid button,
  .minesweeper-cell,
  .snake-mode-grid button,
  .snake-speed-grid button,
  .snake-direction-pad button,
  .game-2048-cell,
  .game-2048-direction-pad button,
  .gomoku-option-grid button,
  .gomoku-difficulty-grid button,
  .gomoku-cell,
  .piano-instrument-grid button,
  .piano-key,
  .maze-size-grid button,
  .maze-direction-pad button,
  .bubble-option-grid button,
  .bubble-board button,
  .word-search-option-grid button,
  .word-search-board button,
  .plant-species-grid button,
  .sudoku-option-grid button { transition-duration: .01ms; }
  .sound-now-playing > span.is-playing { animation: none; }
  .word-guess-word span.is-found { animation: none; }
  .spot-difference-board button.is-hint { animation: none; }
  .lights-out-cell.is-hint::after { animation: none; }
  .one-stroke-cell.is-hint,
  .color-order-tile.is-hint,
  .pipe-connect-cell.is-hint { animation: none; }
  .perfect-pitch-wave.is-playing i { animation: none; }
  .rhythm-beat-dots span.is-active,
  .rhythm-tap-pad.is-hit { animation: none; }
  .mole-hole.is-active span { animation: none; }
  .nonogram-cell.is-changed,
  .sliding-tile.is-changed,
  .minesweeper-cell.is-changed,
  .snake-board > span.is-food::after { animation: none; }
  .game-2048-cell.is-new { animation: none; }
  .plant-visual.is-cared { animation: none; }
  .maze-board > span.is-hint { animation: none; }
  .word-search-board button.is-hint { animation: none; }
  .matchstick-segment.is-hinted::before { animation: none; }
}

/* Calm hub layer: the first eight varied choices scan quickly, while the full
   directory remains available through the shared progressive disclosure. */
.play-card-grid {
  gap: 12px;
}

.play-card-link {
  min-height: 172px;
  padding: 20px;
  border-color: var(--line, #e4e4df);
  border-radius: 16px;
  box-shadow: none;
}

.play-card-link:hover,
.play-card-link:focus-visible {
  transform: translateY(-1px);
  border-color: #c9c9c2;
}

.play-card-icon {
  font-size: 31px;
}

.play-card-link h2 {
  margin: 12px 0 6px;
  font-size: 18px;
}

.play-card-link p {
  color: var(--ink-soft, #686a70);
  font-size: 13px;
  line-height: 1.5;
}

.play-card-meta {
  padding-top: 12px;
  color: var(--ink-soft, #686a70);
  font-size: 12px;
}

.play-copy-section,
.play-faq,
.play-related {
  border-color: var(--line, #e4e4df);
  box-shadow: none;
}

@media (max-width: 720px) {
  .play-card-link {
    min-height: 0;
    padding: 17px;
  }
}

/* Klondike solitaire */
.solitaire-panel {
  overflow: hidden;
}

.solitaire-setup {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 30px 24px 34px;
}

.solitaire-rule {
  max-width: 720px;
  margin: 0;
  color: var(--gray-700, #43464b);
  line-height: 1.7;
  text-align: center;
}

.solitaire-live {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid #e8e8e3;
  border-bottom: 1px solid #e8e8e3;
  background: #e8e8e3;
}

.solitaire-live > div {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 12px 8px;
  background: #fff;
}

.solitaire-live span {
  color: var(--gray-600, #5f6368);
  font-size: 12px;
  font-weight: 800;
}

.solitaire-live strong {
  font-size: 16px;
}

.solitaire-board {
  --sol-card-width: clamp(62px, 8vw, 82px);
  --sol-card-height: calc(var(--sol-card-width) * 1.42);
  --sol-card-gap: clamp(7px, 1.2vw, 12px);
  --sol-overlap: clamp(24px, 3.5vw, 34px);
  min-height: 540px;
  padding: 22px clamp(14px, 3vw, 30px) 32px;
  overflow-x: auto;
  border: 5px solid #174f3b;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .08) 0 2px, transparent 3px),
    linear-gradient(145deg, #147052, #0c5943 60%, #0a4b39);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.solitaire-top-row,
.solitaire-tableau {
  display: grid;
  grid-template-columns: repeat(7, var(--sol-card-width));
  justify-content: center;
  gap: var(--sol-card-gap);
  min-width: max-content;
}

.solitaire-top-row {
  align-items: start;
  margin-bottom: 24px;
}

.solitaire-pile,
.solitaire-card,
.solitaire-empty-target {
  width: var(--sol-card-width);
  height: var(--sol-card-height);
  box-sizing: border-box;
  border-radius: clamp(5px, .9vw, 9px);
}

.solitaire-pile,
.solitaire-empty-target {
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .34);
  background: rgba(0, 45, 31, .2);
  color: rgba(255, 255, 255, .55);
}

button.solitaire-pile,
.solitaire-card,
.solitaire-empty-target {
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.solitaire-top-spacer {
  width: var(--sol-card-width);
  height: 1px;
}

.solitaire-stock {
  position: relative;
  overflow: hidden;
  font-size: 24px;
  font-weight: 900;
}

.solitaire-stock.has-cards {
  border-color: #eef0ff;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, .13) 25%, transparent 25% 75%, rgba(255, 255, 255, .13) 75%),
    linear-gradient(-45deg, rgba(255, 255, 255, .1) 25%, transparent 25% 75%, rgba(255, 255, 255, .1) 75%),
    #49399b;
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #49399b;
}

.solitaire-stock.has-cards span {
  opacity: 0;
}

.solitaire-waste {
  position: relative;
  border-style: dashed;
}

.solitaire-waste .solitaire-card {
  position: absolute;
  inset: -2px;
}

.solitaire-foundation {
  position: relative;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 4vw, 40px);
  font-weight: 900;
}

.solitaire-foundation.is-red {
  color: rgba(255, 213, 213, .62);
}

.solitaire-foundation.is-black {
  color: rgba(232, 244, 240, .58);
}

.solitaire-foundation.has-card {
  border-color: #ececf0;
  background: #fffefa;
  box-shadow: 0 3px 8px rgba(0, 25, 18, .25);
}

.solitaire-foundation.has-card.is-red {
  color: #cf3047;
}

.solitaire-foundation.has-card.is-black {
  color: #20252a;
}

.solitaire-tableau {
  align-items: start;
}

.solitaire-column {
  position: relative;
  min-height: 405px;
}

.solitaire-card {
  position: absolute;
  top: calc(var(--sol-index, 0) * var(--sol-overlap));
  left: 0;
  display: block;
  overflow: hidden;
  border: 1px solid #d8d8dc;
  background: #fffefa;
  color: #20252a;
  box-shadow: 0 2px 5px rgba(0, 27, 19, .25);
  text-align: left;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.solitaire-card.is-red {
  color: #cf3047;
}

.solitaire-card.is-face-down {
  border-color: #f4f4ff;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, .14) 25%, transparent 25% 75%, rgba(255, 255, 255, .14) 75%),
    linear-gradient(-45deg, rgba(255, 255, 255, .1) 25%, transparent 25% 75%, rgba(255, 255, 255, .1) 75%),
    #49399b;
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #49399b, 0 2px 5px rgba(0, 27, 19, .25);
  cursor: default;
}

.solitaire-card-corner {
  position: absolute;
  top: 5px;
  left: 6px;
  display: grid;
  justify-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 900;
  line-height: .92;
}

.solitaire-card-corner b {
  font-size: clamp(16px, 2.4vw, 22px);
}

.solitaire-card-corner i {
  margin-top: 3px;
  font-size: clamp(13px, 2vw, 18px);
  font-style: normal;
}

.solitaire-card-suit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4.6vw, 46px);
}

.solitaire-card.is-selected,
.solitaire-card.is-hinted,
.solitaire-pile.is-selected,
.solitaire-pile.is-hinted {
  z-index: 90 !important;
  transform: translateY(-5px);
  outline: 4px solid #ffd93d;
  outline-offset: 1px;
  box-shadow: 0 8px 18px rgba(0, 24, 17, .42);
}

.solitaire-card.is-hinted,
.solitaire-pile.is-hinted {
  filter: brightness(1.06);
  animation: solitaireHint 1s ease-in-out infinite alternate;
}

.solitaire-empty-target {
  position: absolute;
  inset: 0 auto auto 0;
  color: rgba(255, 255, 255, .7);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 900;
}

.solitaire-pile:focus-visible,
.solitaire-card:focus-visible,
.solitaire-empty-target:focus-visible {
  outline: 4px solid #ffd93d;
  outline-offset: 2px;
}

.solitaire-selection {
  min-height: 26px;
  margin: 14px 18px 0;
  color: var(--gray-700, #43464b);
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}

.solitaire-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px 22px;
}

.solitaire-result {
  margin: 0 18px 24px;
  padding: 25px 20px;
  border: 1px solid #dad6fb;
  border-radius: 16px;
  background: #f7f5ff;
  text-align: center;
}

.solitaire-result > span {
  color: #5b3ec8;
  font-size: 13px;
  font-weight: 900;
}

.solitaire-result h3 {
  margin: 8px 0;
  font-size: 24px;
}

.solitaire-result p {
  margin: 0;
  color: var(--gray-700, #43464b);
}

@keyframes solitaireHint {
  from { outline-color: #ffd93d; }
  to { outline-color: #fff4a3; }
}

@media (max-width: 720px) {
  .solitaire-setup { padding: 22px 14px 26px; }
  .solitaire-live > div { padding: 10px 3px; }
  .solitaire-live strong { font-size: 13px; }
  .solitaire-board {
    --sol-card-width: clamp(34px, 10.3vw, 54px);
    --sol-card-gap: clamp(3px, 1vw, 6px);
    --sol-overlap: clamp(20px, 6.3vw, 28px);
    min-height: 410px;
    padding: 14px 7px 22px;
    border-width: 4px;
    border-radius: 12px;
  }
  .solitaire-top-row { margin-bottom: 16px; }
  .solitaire-column { min-height: 310px; }
  .solitaire-card-corner { top: 3px; left: 4px; }
  .solitaire-card-corner b { font-size: clamp(12px, 3.8vw, 16px); }
  .solitaire-card-corner i { margin-top: 1px; font-size: clamp(10px, 3.2vw, 14px); }
  .solitaire-card-suit { padding-top: 8px; font-size: clamp(20px, 6.5vw, 29px); }
  .solitaire-foundation { font-size: clamp(20px, 6.4vw, 28px); }
  .solitaire-actions { padding-right: 8px; padding-left: 8px; }
  .solitaire-actions .play-button { flex: 1 1 126px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .solitaire-card { transition-duration: .01ms; }
  .solitaire-card.is-hinted,
  .solitaire-pile.is-hinted { animation: none; }
}

/* Daily Korean word position puzzle */
.korean-word-guess-panel {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

.daily-word-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 18px auto 14px;
}

.daily-word-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px 8px;
  border: 1px solid #e3e0ec;
  border-radius: 12px;
  background: #faf9fd;
  text-align: center;
}

.daily-word-summary span {
  color: var(--gray-600, #5f6368);
  font-size: 12px;
  font-weight: 750;
}

.daily-word-summary strong { font-size: 17px; }

.daily-word-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 10px 0 16px;
  color: var(--gray-700, #43464b);
  font-size: 13px;
  font-weight: 750;
}

.daily-word-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.daily-word-legend i {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  font-size: 11px;
  font-style: normal;
}

.daily-word-legend .is-correct,
.daily-word-cell.is-correct { background: #257a52; }
.daily-word-legend .is-present,
.daily-word-cell.is-present { background: #9a6800; }
.daily-word-legend .is-absent,
.daily-word-cell.is-absent { background: #666b72; }

.daily-word-board {
  display: grid;
  gap: 7px;
  width: min(100%, 330px);
  margin: 0 auto 20px;
}

.daily-word-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.daily-word-cell {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #d7d4df;
  border-radius: 12px;
  background: #fff;
  color: var(--ink, #171717);
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 900;
  line-height: 1;
}

.daily-word-cell.is-correct,
.daily-word-cell.is-present,
.daily-word-cell.is-absent {
  border-color: transparent;
  color: #fff;
  animation: dailyWordReveal .28s ease-out both;
}

.daily-word-cell small {
  position: absolute;
  right: 6px;
  bottom: 5px;
  color: currentColor;
  font-size: 11px;
  line-height: 1;
}

.daily-word-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  width: min(100%, 470px);
  margin: 0 auto;
}

.daily-word-form .play-field { margin: 0; }
.daily-word-form .play-button { min-height: 50px; }
.daily-word-input {
  text-align: center;
  font-size: 20px;
  font-weight: 850;
  letter-spacing: .18em;
}

.daily-word-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 470px);
  margin: 14px auto 0;
  padding: 13px 15px;
  border: 1px solid #e0dafa;
  border-radius: 12px;
  background: #f7f5ff;
}

.daily-word-hint[hidden] { display: none; }
.daily-word-hint strong { color: #5135bd; }
.daily-word-hint span { font-size: 20px; font-weight: 900; letter-spacing: .18em; }

.daily-word-result {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px auto 0;
  padding: 18px;
  border: 1px solid #dcd7f2;
  border-radius: 15px;
  background: #f8f6ff;
}

.daily-word-result[hidden] { display: none; }
.daily-word-result > span { font-size: 36px; }
.daily-word-result strong { font-size: 19px; }
.daily-word-result p { margin: 5px 0 0; color: var(--gray-700, #43464b); line-height: 1.55; }

.daily-word-cell:focus-visible,
.daily-word-hint:focus,
.daily-word-result:focus {
  outline: 3px solid #ffd93d;
  outline-offset: 3px;
}

@keyframes dailyWordReveal {
  from { opacity: .35; transform: scale(.88); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 520px) {
  .daily-word-summary { gap: 6px; }
  .daily-word-summary > div { padding: 10px 4px; }
  .daily-word-form { grid-template-columns: 1fr; }
  .daily-word-form .play-button { width: 100%; }
  .daily-word-board { width: min(100%, 286px); }
  .daily-word-result { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-word-cell.is-correct,
  .daily-word-cell.is-present,
  .daily-word-cell.is-absent { animation: none; }
}

/* Daily fruit match-3 */
.match3-panel {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

.match3-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0 10px;
  overflow: hidden;
  border: 1px solid #e2dfeb;
  border-radius: 14px;
  background: #faf9fd;
}

.match3-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 13px 8px;
  text-align: center;
}

.match3-summary > div + div { border-left: 1px solid #e2dfeb; }
.match3-summary span { color: var(--gray-600, #5f6368); font-size: 12px; font-weight: 750; }
.match3-summary strong { font-size: clamp(14px, 3.5vw, 18px); }

.match3-objective {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 14px;
  width: min(100%, 510px);
  margin: 0 auto 10px;
  color: var(--gray-700, #43464b);
  font-size: 13px;
}

.match3-objective strong { color: #5135bd; }

.match3-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, 1vw, 7px);
  width: min(100%, 510px);
  margin: 0 auto;
  padding: clamp(5px, 1.5vw, 10px);
  border: 1px solid #ddd8f1;
  border-radius: 18px;
  background: #f4f1ff;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.match3-cell {
  position: relative;
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(44, 38, 65, .08);
  border-radius: 15%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(44, 38, 65, .08);
  cursor: pointer;
  font: inherit;
  font-size: clamp(22px, 6.5vw, 42px);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, outline-color .14s ease, box-shadow .14s ease;
}

.match3-cell[data-tile="0"] { background: #fff0f3; }
.match3-cell[data-tile="1"] { background: #fff9d9; }
.match3-cell[data-tile="2"] { background: #f4edff; }
.match3-cell[data-tile="3"] { background: #ebf8e7; }
.match3-cell[data-tile="4"] { background: #fff1df; }
.match3-cell[data-tile="5"] { background: #edf2ff; }

.match3-cell:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(44, 38, 65, .13); }
.match3-cell:disabled {
  cursor: default;
  opacity: .78;
}
.match3-cell:disabled:hover {
  transform: none;
  box-shadow: 0 2px 7px rgba(44, 38, 65, .08);
}
.match3-cell.is-selected {
  z-index: 1;
  outline: 4px solid #6d4aff;
  outline-offset: -2px;
  transform: scale(.92);
}
.match3-cell.is-hinted {
  outline: 4px solid #e6a900;
  outline-offset: -2px;
  animation: match3Hint 600ms ease-in-out 2 alternate;
}
.match3-hint-order {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #805b00;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}
.match3-cell.is-settled { animation: match3Settle .2s ease-out both; }

.match3-instruction {
  width: min(100%, 510px);
  margin: 11px auto 0;
  color: var(--gray-600, #5f6368);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.match3-combo {
  width: fit-content;
  margin: 10px auto 0;
  padding: 6px 11px;
  border-radius: 999px;
  background: #5b3ec8;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}
.match3-combo[hidden] { display: none; }

.match3-result {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px auto 0;
  padding: 18px;
  border: 1px solid #ddd7f3;
  border-radius: 15px;
  background: #f8f6ff;
}
.match3-result[hidden] { display: none; }
.match3-result > span { font-size: 38px; }
.match3-result strong { font-size: 19px; }
.match3-result p { margin: 5px 0 0; color: var(--gray-700, #43464b); line-height: 1.55; }

.match3-cell:focus-visible,
.match3-result:focus {
  outline: 3px solid #ffd93d;
  outline-offset: 3px;
}

@keyframes match3Hint {
  from { transform: scale(.93); }
  to { transform: scale(1.03); }
}

@keyframes match3Settle {
  from { opacity: .55; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .match3-summary > div { padding: 11px 4px; }
  .match3-board {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    margin-right: -20px;
    margin-left: -20px;
    gap: 3px;
    padding: 4px;
    border-radius: 13px;
  }
  .match3-cell { font-size: clamp(21px, 8.5vw, 34px); }
  .match3-hint-order { top: 2px; left: 2px; width: 18px; height: 18px; font-size: 10px; }
  .match3-result { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .match3-cell { transition: none; }
  .match3-cell.is-hinted,
  .match3-cell.is-settled { animation: none; }
}

/* Mahjong solitaire: three overlapping layers on a 6 × 6 coordinate board */
.mahjong-panel {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
}

.mahjong-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 18px 0 12px;
  overflow: hidden;
  border: 1px solid #dddcd4;
  border-radius: 14px;
  background: #fbfaf5;
}

.mahjong-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 13px 8px;
  text-align: center;
}

.mahjong-summary > div + div { border-left: 1px solid #dddcd4; }
.mahjong-summary span { color: var(--gray-600, #5f6368); font-size: 12px; font-weight: 750; }
.mahjong-summary strong { font-size: clamp(14px, 3.5vw, 18px); }

.mahjong-instruction {
  width: min(100%, 620px);
  margin: 0 auto 12px;
  color: var(--gray-700, #43464b);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.mahjong-instruction > span {
  display: inline-grid;
  width: 19px;
  height: 19px;
  margin-right: 2px;
  place-items: center;
  border-radius: 50%;
  background: #226b49;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  vertical-align: -2px;
}

.mahjong-board-wrap {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 3px 0 10px;
}

/* Fixed recommendation rails must never cover controls on focused game pages. */
body[data-play-mode]:not([data-play-mode="hub"]) .smart-next-rail {
  display: none !important;
}

.mahjong-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1.08;
  overflow: visible;
  border: 1px solid #d8d4c7;
  border-radius: 20px;
  background: #f0eee6;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .42);
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.mahjong-tile {
  position: absolute;
  z-index: var(--tile-z, 1);
  top: calc(3.7% + (var(--tile-y, 0) * 14.5%) - (var(--tile-layer, 0) * 1.1%));
  left: calc(4.3% + (var(--tile-x, 0) * 15.25%) + (var(--tile-layer, 0) * .9%));
  display: grid;
  width: 14.35%;
  aspect-ratio: .78;
  place-items: center;
  padding: 4px 3px;
  border: 1px solid #c8c1ae;
  border-radius: 10px;
  background: #fffdf4;
  box-shadow: 3px 4px 0 #b7ae98, 4px 6px 9px rgba(52, 45, 31, .18);
  color: #29261f;
  cursor: pointer;
  font: inherit;
  font-size: clamp(24px, 5.2vw, 42px);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
  transition: border-color .14s ease, box-shadow .14s ease, filter .14s ease, opacity .14s ease, transform .14s ease;
}

.mahjong-tile:hover:not(.is-blocked):not(:disabled) {
  border-color: #7c9b86;
  box-shadow: 3px 4px 0 #a79d86, 5px 8px 13px rgba(52, 45, 31, .22);
  transform: translateY(-2px);
}

.mahjong-tile-face {
  display: grid;
  gap: 3px;
  min-width: 0;
  place-items: center;
  pointer-events: none;
}

.mahjong-tile-face strong,
.mahjong-tile-symbol {
  font-size: 1em;
  font-weight: 850;
  line-height: 1;
}

.mahjong-tile-face small,
.mahjong-tile-name {
  max-width: 100%;
  overflow: hidden;
  color: #676052;
  font-size: clamp(8px, 1.5vw, 11px);
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mahjong-tile[data-family="characters"] .mahjong-tile-face strong,
.mahjong-tile[data-family="characters"] .mahjong-tile-symbol,
.mahjong-tile[data-family="red"] .mahjong-tile-face strong,
.mahjong-tile[data-family="red"] .mahjong-tile-symbol { color: #a43b35; }

.mahjong-tile[data-family="bamboo"] .mahjong-tile-face strong,
.mahjong-tile[data-family="bamboo"] .mahjong-tile-symbol,
.mahjong-tile[data-family="green"] .mahjong-tile-face strong,
.mahjong-tile[data-family="green"] .mahjong-tile-symbol { color: #267052; }

.mahjong-free-mark,
.mahjong-hint-order {
  position: absolute;
  display: none;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 2px solid #fffdf4;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

.mahjong-free-mark {
  top: 4px;
  right: 4px;
  background: #226b49;
}

.mahjong-tile.is-free .mahjong-free-mark { display: grid; }

.mahjong-hint-order {
  bottom: 4px;
  left: 4px;
  background: #7a5700;
}

.mahjong-tile.is-hinted .mahjong-hint-order { display: grid; }

.mahjong-tile.is-free {
  border-color: #76a489;
  background: #fffef8;
}

.mahjong-tile.is-blocked,
.mahjong-tile:disabled:not(.is-free) {
  border-color: #c6c3b9;
  background: #e7e4da;
  box-shadow: 2px 3px 0 #aaa596, 3px 5px 7px rgba(52, 45, 31, .13);
  color: #777268;
  cursor: not-allowed;
  filter: grayscale(.45) saturate(.55);
  opacity: .68;
}

.mahjong-tile.is-selected {
  border-color: #5b3ec8;
  box-shadow: 0 0 0 4px #6d4aff, 3px 5px 0 #a79d86, 5px 8px 14px rgba(52, 45, 31, .22);
  transform: translateY(-2px) scale(.95);
}

.mahjong-tile.is-hinted {
  border-color: #b17d00;
  box-shadow: 0 0 0 4px #e8b229, 3px 5px 0 #a79d86, 5px 8px 14px rgba(52, 45, 31, .22);
  animation: mahjongHint 600ms ease-in-out 2 alternate;
}

.mahjong-tile.is-removing {
  z-index: 999;
  pointer-events: none;
  animation: mahjongRemove 180ms ease-in both;
}

.mahjong-tile.is-restored { animation: mahjongRestore 180ms ease-out both; }
.mahjong-tile.is-removed,
.mahjong-tile[hidden] { display: none; }

.mahjong-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
}

.mahjong-actions .play-button { padding-right: 14px; padding-left: 14px; }
.mahjong-actions .play-button:disabled { cursor: default; opacity: .5; }

.mahjong-result {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px auto 0;
  padding: 18px;
  border: 1px solid #d8d4c7;
  border-radius: 15px;
  background: #fbfaf5;
}

.mahjong-result[hidden] { display: none; }
.mahjong-result > span { font-size: 38px; }
.mahjong-result strong { font-size: 19px; }
.mahjong-result p { margin: 5px 0 0; color: var(--gray-700, #43464b); line-height: 1.55; }

.mahjong-tile:focus-visible,
.mahjong-result:focus {
  outline: 3px solid #ffd93d;
  outline-offset: 4px;
}

@keyframes mahjongHint {
  from { transform: translateY(-1px) scale(.96); }
  to { transform: translateY(-3px) scale(1.02); }
}

@keyframes mahjongRemove {
  from { opacity: 1; transform: translateY(-2px) scale(1); }
  to { opacity: 0; transform: translateY(-10px) scale(.78); }
}

@keyframes mahjongRestore {
  from { opacity: 0; transform: translateY(-8px) scale(.82); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
  .mahjong-summary > div { padding: 11px 4px; }
  .mahjong-instruction { text-align: left; }
  .mahjong-board-wrap {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    margin-right: -20px;
    margin-left: -20px;
  }
  .mahjong-board { border-radius: 13px; }
  .mahjong-tile {
    padding: 2px;
    border-radius: 7px;
    box-shadow: 2px 3px 0 #b7ae98, 3px 5px 7px rgba(52, 45, 31, .18);
    font-size: clamp(22px, 7vw, 31px);
  }
  .mahjong-tile-face { gap: 1px; }
  .mahjong-free-mark,
  .mahjong-hint-order { width: 18px; height: 18px; border-width: 1px; font-size: 10px; }
  .mahjong-free-mark { top: 2px; right: 2px; }
  .mahjong-hint-order { bottom: 2px; left: 2px; }
  .mahjong-actions .play-button { flex: 1 1 calc(50% - 9px); padding-right: 8px; padding-left: 8px; }
  .mahjong-result { align-items: flex-start; }
}

@media (max-width: 340px) {
  .mahjong-board-wrap {
    width: calc(100% + 56px);
    max-width: calc(100% + 56px);
    margin-right: -28px;
    margin-left: -28px;
  }

  .mahjong-board { aspect-ratio: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mahjong-tile { transition: none; }
  .mahjong-tile.is-hinted,
  .mahjong-tile.is-removing,
  .mahjong-tile.is-restored { animation: none; }
}

/* 8 × 8 block placement puzzle */
body[data-play-mode="blockpuzzle"] .play-hero {
  margin-bottom: 16px;
}

body[data-play-mode="blockpuzzle"] .play-hero p {
  max-width: 610px;
}

.block-puzzle-panel {
  max-width: 660px;
  min-height: 0;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  border-color: #ddd9eb;
  box-shadow: none;
}

.block-puzzle-panel .play-panel-head {
  max-width: 520px;
  margin-right: auto;
  margin-bottom: 12px;
  margin-left: auto;
}

.block-puzzle-summary {
  display: grid;
  width: min(100%, 480px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid #e2dfeb;
  border-radius: 13px;
  background: #faf9fd;
}

.block-puzzle-summary > div {
  min-width: 0;
  padding: 10px 6px;
  text-align: center;
}

.block-puzzle-summary > div + div {
  border-left: 1px solid #e2dfeb;
}

.block-puzzle-summary span,
.block-puzzle-summary strong {
  display: block;
}

.block-puzzle-summary span {
  color: #6b6d76;
  font-size: 11px;
  font-weight: 800;
}

.block-puzzle-summary strong {
  margin-top: 3px;
  color: #2d2550;
  font-size: 18px;
  line-height: 1.1;
}

.block-puzzle-instruction {
  max-width: 520px;
  margin: 0 auto 11px;
  color: #555861;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.block-puzzle-board-wrap {
  display: grid;
  width: 100%;
  place-items: center;
}

.block-puzzle-board {
  display: grid;
  width: min(100%, 480px);
  aspect-ratio: 1;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: 2px;
  box-sizing: border-box;
  padding: 0;
  touch-action: none;
  user-select: none;
  border: 1px solid #cfd3dc;
  border-radius: 12px;
  background: #dfe3eb;
  box-shadow: inset 0 0 0 2px #f4f5f8;
  -webkit-user-select: none;
}

.block-puzzle-cell,
.block-puzzle-board [role="gridcell"] {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  appearance: none;
  border: 1px solid #eef0f4;
  border-radius: 5px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(76, 80, 91, .03);
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.block-puzzle-cell.is-filled,
.block-puzzle-board [role="gridcell"].is-filled,
.block-puzzle-cell[data-filled="true"] {
  border-color: #433791;
  border-color: color-mix(in srgb, var(--block-fill, #6550c8) 78%, #25203c);
  background: var(--block-fill, #6550c8);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(23, 20, 43, .14);
}

.block-puzzle-panel .is-color-0,
.block-puzzle-piece.is-color-0,
.block-puzzle-panel [data-block-color-index="0"] { --block-fill: #6655c7; }
.block-puzzle-panel .is-color-1,
.block-puzzle-piece.is-color-1,
.block-puzzle-panel [data-block-color-index="1"] { --block-fill: #2478b8; }
.block-puzzle-panel .is-color-2,
.block-puzzle-piece.is-color-2,
.block-puzzle-panel [data-block-color-index="2"] { --block-fill: #16846f; }
.block-puzzle-panel .is-color-3,
.block-puzzle-piece.is-color-3,
.block-puzzle-panel [data-block-color-index="3"] { --block-fill: #d27031; }
.block-puzzle-panel .is-color-4,
.block-puzzle-piece.is-color-4,
.block-puzzle-panel [data-block-color-index="4"] { --block-fill: #c14970; }
.block-puzzle-panel .is-color-5,
.block-puzzle-piece.is-color-5,
.block-puzzle-panel [data-block-color-index="5"] { --block-fill: #a45a22; }

.block-puzzle-cell.is-preview:not(.is-invalid),
.block-puzzle-cell.is-valid-preview,
.block-puzzle-board [role="gridcell"].is-preview:not(.is-invalid) {
  border-color: #5940bd;
  background: #d8d0fb;
  box-shadow: inset 0 0 0 2px #6a52cd;
}

.block-puzzle-cell.is-invalid,
.block-puzzle-cell.is-invalid-preview,
.block-puzzle-board [role="gridcell"].is-invalid {
  border-color: #b93048;
  background: repeating-linear-gradient(135deg, #fff2f4 0 5px, #f1c9d0 5px 9px);
  box-shadow: inset 0 0 0 2px #c33a52;
}

.block-puzzle-cell.is-invalid::after,
.block-puzzle-cell.is-invalid-preview::after,
.block-puzzle-board [role="gridcell"].is-invalid::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8f1f34;
  font-size: clamp(13px, 4vw, 20px);
  font-weight: 900;
  line-height: 1;
}

.block-puzzle-cell.is-cursor,
.block-puzzle-cell.is-active,
.block-puzzle-board [role="gridcell"][aria-selected="true"] {
  z-index: 1;
  outline: 3px solid #ffd93d;
  outline-offset: -1px;
}

.block-puzzle-cell.is-hinted,
.block-puzzle-board [role="gridcell"].is-hinted {
  z-index: 1;
  outline: 3px solid #ffd93d;
  outline-offset: -2px;
  animation: blockPuzzleHint .55s ease-in-out 2 alternate;
}

.block-puzzle-cell.is-clearing,
.block-puzzle-cell.is-line-clear,
.block-puzzle-board [role="gridcell"].is-clearing {
  animation: blockPuzzleClear .3s ease both;
}

.block-puzzle-tray-head {
  display: flex;
  width: min(100%, 480px);
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 13px auto 7px;
}

.block-puzzle-tray-head strong {
  color: #2d2550;
  font-size: 14px;
}

.block-puzzle-tray-head span {
  color: #737680;
  font-size: 11px;
  text-align: right;
}

.block-puzzle-tray {
  display: grid;
  width: min(100%, 480px);
  min-height: 76px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto;
  touch-action: none;
}

.block-puzzle-piece,
.block-puzzle-tray [data-block-puzzle-piece] {
  display: grid;
  min-width: 0;
  min-height: 72px;
  place-items: center;
  padding: 7px;
  touch-action: none;
  appearance: none;
  border: 1px solid #ddd9e9;
  border-radius: 12px;
  background: #faf9fd;
  color: #29243c;
  cursor: grab;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.block-puzzle-piece:hover,
.block-puzzle-tray [data-block-puzzle-piece]:hover {
  border-color: #8b78d9;
  background: #f4f1ff;
}

.block-puzzle-piece.is-selected,
.block-puzzle-tray [data-block-puzzle-piece][aria-pressed="true"] {
  border-color: #5b3ec8;
  background: #eeeaff;
  box-shadow: inset 0 0 0 2px #6d55cd;
}

.block-puzzle-panel.is-dragging .block-puzzle-board,
.block-puzzle-piece.is-dragging,
.block-puzzle-tray [data-block-puzzle-piece].is-dragging {
  cursor: grabbing;
}

.block-puzzle-piece.is-dragging,
.block-puzzle-tray [data-block-puzzle-piece].is-dragging {
  border-color: #5b3ec8;
  opacity: .62;
  transform: scale(.96);
}

.block-puzzle-piece.is-unavailable,
.block-puzzle-piece:disabled,
.block-puzzle-tray [data-block-puzzle-piece][aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .42;
}

.block-puzzle-piece.is-used,
.block-puzzle-tray [data-block-puzzle-piece][hidden] {
  visibility: hidden;
}

.block-puzzle-piece-shape,
[data-block-puzzle-piece-shape] {
  display: grid;
  grid-template-columns: repeat(var(--piece-columns, 5), 11px);
  grid-template-rows: repeat(var(--piece-rows, 1), 11px);
  gap: 2px;
  pointer-events: none;
}

.block-puzzle-piece-cell,
.block-puzzle-mini-cell,
[data-block-puzzle-piece-shape] > span {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: transparent;
}

.block-puzzle-piece-cell.is-filled,
.block-puzzle-mini-cell.is-filled,
[data-block-puzzle-piece-shape] > span.is-filled,
[data-block-puzzle-piece-shape] > span[data-filled="true"] {
  background: var(--block-fill, #6550c8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.block-puzzle-actions {
  display: grid;
  width: min(100%, 480px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px auto 0;
}

.block-puzzle-actions .play-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 7px;
  font-size: 12px;
}

.block-puzzle-result {
  display: flex;
  width: min(100%, 480px);
  align-items: center;
  gap: 13px;
  margin: 16px auto 0;
  padding: 16px;
  border: 1px solid #dcd7f2;
  border-radius: 14px;
  background: #f8f6ff;
}

.block-puzzle-result[hidden] { display: none; }
.block-puzzle-result > span { font-size: 34px; }
.block-puzzle-result strong { font-size: 18px; }
.block-puzzle-result p { margin: 4px 0 0; color: #555861; line-height: 1.5; }

.block-puzzle-drag-ghost,
[data-block-puzzle-drag-ghost] {
  position: fixed;
  z-index: 1000;
  padding: 7px;
  pointer-events: none;
  border: 2px solid #5b3ec8;
  border-radius: 10px;
  background: rgba(248, 246, 255, .94);
  box-shadow: 0 8px 24px rgba(40, 30, 79, .24);
  opacity: .92;
}

.block-puzzle-drag-ghost.is-invalid,
[data-block-puzzle-drag-ghost].is-invalid {
  border-color: #b93048;
  background: rgba(255, 239, 242, .95);
  filter: grayscale(.35);
}

.block-puzzle-board:focus-visible,
.block-puzzle-cell:focus-visible,
.block-puzzle-piece:focus-visible,
.block-puzzle-tray [data-block-puzzle-piece]:focus-visible,
.block-puzzle-result:focus {
  outline: 3px solid #ffd93d;
  outline-offset: 4px;
}

@keyframes blockPuzzleHint {
  from { transform: scale(.94); }
  to { transform: scale(1.04); }
}

@keyframes blockPuzzleClear {
  0% { opacity: 1; transform: scale(1); }
  55% { opacity: .35; transform: scale(.72); }
  100% { opacity: 0; transform: scale(.45); }
}

@media (max-width: 520px) {
  body[data-play-mode="blockpuzzle"] .play-page {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  body[data-play-mode="blockpuzzle"] .play-breadcrumb {
    display: none;
  }

  body[data-play-mode="blockpuzzle"] .play-hero {
    margin-bottom: 10px;
  }

  body[data-play-mode="blockpuzzle"] .play-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body[data-play-mode="blockpuzzle"] .play-hero h1 {
    font-size: 28px;
  }

  body[data-play-mode="blockpuzzle"] .play-hero p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .block-puzzle-panel {
    padding: 14px 7px 18px;
    border-radius: 16px;
  }

  .block-puzzle-panel .play-panel-head,
  .block-puzzle-summary,
  .block-puzzle-instruction,
  .block-puzzle-tray-head,
  .block-puzzle-tray,
  .block-puzzle-actions,
  .block-puzzle-result,
  .block-puzzle-panel .play-status {
    width: calc(100% - 10px);
  }

  .block-puzzle-panel .play-panel-head {
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .block-puzzle-panel .play-panel-head h2 {
    font-size: 15px;
    line-height: 1.3;
  }

  .block-puzzle-panel .play-progress {
    padding-top: 2px;
    white-space: nowrap;
  }

  .block-puzzle-summary {
    margin-bottom: 7px;
  }

  .block-puzzle-summary > div {
    padding: 7px 3px;
  }

  .block-puzzle-summary strong {
    font-size: 16px;
  }

  .block-puzzle-instruction {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
  }

  .block-puzzle-board {
    width: 100%;
    border-radius: 10px;
  }

  .block-puzzle-tray-head {
    margin-top: 9px;
    margin-bottom: 5px;
  }

  .block-puzzle-tray-head span {
    font-size: 10px;
  }

  .block-puzzle-tray {
    min-height: 72px;
  }

  .block-puzzle-piece,
  .block-puzzle-tray [data-block-puzzle-piece] {
    min-height: 68px;
    padding: 5px;
  }

  .block-puzzle-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .block-puzzle-result {
    align-items: flex-start;
  }
}

@media (max-width: 340px) {
  .block-puzzle-panel {
    padding-right: 7px;
    padding-left: 7px;
  }

  .block-puzzle-piece-shape,
  [data-block-puzzle-piece-shape] {
    grid-template-columns: repeat(var(--piece-columns, 5), 10px);
    grid-template-rows: repeat(var(--piece-rows, 1), 10px);
  }

  .block-puzzle-piece-cell,
  .block-puzzle-mini-cell,
  [data-block-puzzle-piece-shape] > span {
    width: 10px;
    height: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-puzzle-cell,
  .block-puzzle-board [role="gridcell"],
  .block-puzzle-piece,
  .block-puzzle-tray [data-block-puzzle-piece] {
    transition: none;
  }

  .block-puzzle-cell.is-hinted,
  .block-puzzle-cell.is-clearing,
  .block-puzzle-cell.is-line-clear,
  .block-puzzle-board [role="gridcell"].is-hinted,
  .block-puzzle-board [role="gridcell"].is-clearing {
    animation: none;
  }
}

/* Triple tile matching puzzle */
body[data-play-mode="tripletile"] .play-hero {
  margin-bottom: 16px;
}

body[data-play-mode="tripletile"] .play-hero p {
  max-width: 610px;
}

.triple-tile-panel {
  max-width: 700px;
  min-height: 0;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  border-color: #e2dcca;
  box-shadow: none;
}

.triple-tile-panel .play-panel-head {
  max-width: 620px;
  margin-right: auto;
  margin-bottom: 12px;
  margin-left: auto;
}

.triple-level-picker {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 10px;
}

.triple-level-picker button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 5px;
  appearance: none;
  border: 1px solid #ded8c8;
  border-radius: 11px;
  background: #fffdf8;
  color: #3b3528;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.triple-level-picker button:hover,
.triple-level-picker button.is-active,
.triple-level-picker button[aria-pressed="true"] {
  border-color: #7b5b23;
  background: #fff4d9;
  box-shadow: inset 0 0 0 1px #7b5b23;
}

.triple-level-picker strong,
.triple-level-picker small {
  display: block;
}

.triple-level-picker strong {
  font-size: 13px;
}

.triple-level-picker small {
  margin-top: 2px;
  color: #756b58;
  font-size: 10px;
  font-weight: 700;
}

.triple-summary {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid #e5dfd1;
  border-radius: 13px;
  background: #fbfaf6;
}

.triple-summary > div {
  min-width: 0;
  padding: 9px 5px;
  text-align: center;
}

.triple-summary > div + div {
  border-left: 1px solid #e5dfd1;
}

.triple-summary span,
.triple-summary strong {
  display: block;
}

.triple-summary span {
  color: #746f65;
  font-size: 10px;
  font-weight: 800;
}

.triple-summary strong {
  margin-top: 3px;
  color: #3c3325;
  font-size: 16px;
  line-height: 1.15;
}

.triple-instruction {
  max-width: 600px;
  margin: 0 auto 10px;
  color: #59564f;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.triple-board-wrap {
  display: grid;
  width: 100%;
  place-items: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.triple-board {
  --triple-origin-x: 3%;
  --triple-origin-y: 5%;
  --triple-step-x: 5.7%;
  --triple-step-y: 6.7%;
  --triple-tile-width: 11.4%;
  --triple-tile-height: 13.4%;
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #ded7c5;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .88), transparent 48%),
    linear-gradient(145deg, #f8f2e4, #eee5d0);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .35);
  isolation: isolate;
}

.triple-tile-panel[data-triple-difficulty="normal"] .triple-board {
  --triple-origin-x: 4%;
  --triple-origin-y: 5%;
  --triple-step-x: 7.8%;
  --triple-step-y: 8.7%;
  --triple-tile-width: 15.6%;
  --triple-tile-height: 17.4%;
  min-width: 0;
  aspect-ratio: 6 / 5;
}

.triple-tile-panel[data-triple-difficulty="easy"] .triple-board {
  --triple-origin-x: 4%;
  --triple-origin-y: 6%;
  --triple-step-x: 7.8%;
  --triple-step-y: 11%;
  --triple-tile-width: 15.6%;
  --triple-tile-height: 22%;
  min-width: 0;
  aspect-ratio: 3 / 2;
}

.triple-tile {
  position: absolute;
  z-index: calc(var(--triple-layer, 0) + 1);
  left: calc(var(--triple-origin-x) + var(--triple-x, 0) * var(--triple-step-x));
  top: calc(var(--triple-origin-y) + var(--triple-y, 0) * var(--triple-step-y));
  display: grid;
  width: max(44px, var(--triple-tile-width));
  height: max(44px, var(--triple-tile-height));
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 2px;
  appearance: none;
  border: 1px solid #a99774;
  border-radius: 10px;
  background: linear-gradient(145deg, #fffef9, #f2ead8);
  box-shadow: 2px 3px 0 #ad9e82, 3px 5px 8px rgba(62, 50, 29, .19);
  color: #282319;
  cursor: default;
  font: inherit;
  font-size: clamp(21px, 5.4vw, 34px);
  line-height: 1;
  transition: filter .14s ease, opacity .14s ease, transform .14s ease, box-shadow .14s ease;
  -webkit-tap-highlight-color: transparent;
}

.triple-tile.is-free {
  border-color: #73531f;
  cursor: pointer;
  box-shadow: 2px 3px 0 #987b48, 3px 6px 10px rgba(62, 50, 29, .23);
}

.triple-tile.is-free:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.triple-tile.is-blocked,
.triple-tile:disabled,
.triple-tile[aria-disabled="true"] {
  cursor: default;
  filter: grayscale(.55) brightness(.9);
  opacity: .48;
}

.triple-tile.is-hint {
  border-color: #b75517;
  box-shadow: 0 0 0 3px #ffd166, 2px 4px 0 #987b48, 3px 7px 12px rgba(91, 57, 13, .3);
  animation: tripleTileHint .62s ease-in-out infinite alternate;
}

.triple-tile.is-restored {
  animation: tripleTileRestore .42s ease-out both;
}

.triple-tray-head {
  display: flex;
  width: min(100%, 560px);
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 13px auto 6px;
}

.triple-tray-head strong {
  font-size: 14px;
}

.triple-tray-head span {
  color: #747067;
  font-size: 11px;
  text-align: right;
}

.triple-tray {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(7, minmax(44px, 1fr));
  gap: 5px;
  margin: 0 auto;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid #d9d1be;
  border-radius: 13px;
  background: #eee6d4;
  scrollbar-width: thin;
}

.triple-tray-slot {
  display: grid;
  min-width: 44px;
  min-height: 52px;
  place-items: center;
  border: 1px dashed #b9ae97;
  border-radius: 8px;
  background: rgba(255, 255, 255, .42);
  color: #2d281f;
  font-size: 25px;
  line-height: 1;
}

.triple-tray-slot.is-filled {
  border-style: solid;
  border-color: #9d8960;
  background: #fffdf7;
  box-shadow: 0 2px 0 #b5a581;
}

.triple-actions {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px auto 0;
}

.triple-actions .play-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
  font-size: 12px;
}

.triple-result {
  display: flex;
  width: min(100%, 560px);
  align-items: center;
  gap: 14px;
  margin: 16px auto 0;
  padding: 16px;
  border: 1px solid #d8c9a6;
  border-radius: 14px;
  background: #fff8e8;
}

.triple-result[hidden] {
  display: none;
}

.triple-result > span {
  font-size: 36px;
}

.triple-result h3 {
  margin: 0;
  font-size: 18px;
}

.triple-result p {
  margin: 4px 0 10px;
  color: #5d574c;
  line-height: 1.5;
}

.triple-level-picker button:focus-visible,
.triple-tile:focus-visible,
.triple-result:focus {
  outline: 3px solid #ffd93d;
  outline-offset: 4px;
}

@keyframes tripleTileHint {
  from { transform: translateY(0) scale(.97); }
  to { transform: translateY(-3px) scale(1.03); }
}

@keyframes tripleTileRestore {
  from { opacity: .35; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 520px) {
  body[data-play-mode="tripletile"] .play-page {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  body[data-play-mode="tripletile"] .play-breadcrumb {
    display: none;
  }

  body[data-play-mode="tripletile"] .play-hero {
    margin-bottom: 10px;
  }

  body[data-play-mode="tripletile"] .play-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body[data-play-mode="tripletile"] .play-hero h1 {
    font-size: 28px;
  }

  body[data-play-mode="tripletile"] .play-hero p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .triple-tile-panel {
    padding: 14px 7px 18px;
    border-radius: 16px;
  }

  .triple-tile-panel .play-panel-head,
  .triple-level-picker,
  .triple-summary,
  .triple-instruction,
  .triple-tray-head,
  .triple-tray,
  .triple-actions,
  .triple-result,
  .triple-tile-panel .play-status {
    width: calc(100% - 10px);
  }

  .triple-tile-panel .play-panel-head {
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .triple-tile-panel .play-panel-head h2 {
    font-size: 15px;
    line-height: 1.3;
  }

  .triple-tile-panel .play-progress {
    padding-top: 2px;
    white-space: nowrap;
  }

  .triple-level-picker {
    gap: 5px;
    margin-bottom: 7px;
  }

  .triple-level-picker button {
    min-height: 44px;
    padding: 5px 3px;
  }

  .triple-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 7px;
  }

  .triple-summary > div {
    padding: 6px 3px;
  }

  .triple-summary > div:nth-child(3) {
    border-left: 0;
  }

  .triple-summary > div:nth-child(n + 3) {
    border-top: 1px solid #e5dfd1;
  }

  .triple-summary strong {
    font-size: 15px;
  }

  .triple-instruction {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
  }

  .triple-board {
    border-radius: 11px;
  }

  .triple-tile {
    width: var(--triple-tile-width);
    height: var(--triple-tile-height);
    min-width: 0;
    min-height: 0;
    border-radius: 8px;
    font-size: clamp(21px, 8vw, 28px);
  }

  .triple-tray {
    grid-template-columns: repeat(7, minmax(34px, 1fr));
    gap: 3px;
    padding: 5px;
  }

  .triple-tray-slot {
    min-width: 34px;
    min-height: 42px;
  }

  .triple-tray-head {
    margin-top: 9px;
    margin-bottom: 5px;
  }

  .triple-tray-head span {
    max-width: 190px;
    font-size: 10px;
  }

  .triple-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .triple-result {
    align-items: flex-start;
  }
}

@media (max-width: 340px) {
  .triple-tile-panel {
    padding-right: 5px;
    padding-left: 5px;
  }

  .triple-tray-head span {
    max-width: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .triple-tile {
    transition: none;
  }

  .triple-tile.is-hint {
    animation: none;
  }

  .triple-tile.is-restored {
    animation: none;
  }
}

/* Parking escape: the puzzle stays ahead of every ad and fits a 320px viewport. */
body[data-play-mode="parkingescape"] .play-hero {
  margin-bottom: 16px;
}

body[data-play-mode="parkingescape"] .play-hero p {
  max-width: 620px;
}

.parking-escape-panel {
  max-width: 700px;
  min-height: 0;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  border-color: #cfd9da;
  box-shadow: none;
}

.parking-escape-panel .play-panel-head {
  max-width: 600px;
  margin-right: auto;
  margin-bottom: 12px;
  margin-left: auto;
}

.parking-level-picker {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 10px;
}

.parking-level-picker button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 5px;
  appearance: none;
  border: 1px solid #cad5d7;
  border-radius: 11px;
  background: #f8fbfb;
  color: #26383b;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.parking-level-picker button:hover,
.parking-level-picker button.is-active,
.parking-level-picker button[aria-pressed="true"] {
  border-color: #176f78;
  background: #e5f6f4;
  box-shadow: inset 0 0 0 1px #176f78;
}

.parking-level-picker strong,
.parking-level-picker small {
  display: block;
}

.parking-level-picker strong {
  font-size: 13px;
}

.parking-level-picker small {
  margin-top: 2px;
  color: #637376;
  font-size: 10px;
  font-weight: 700;
}

.parking-summary {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid #d4dfe0;
  border-radius: 13px;
  background: #f7faf9;
}

.parking-summary > div {
  min-width: 0;
  padding: 9px 5px;
  text-align: center;
}

.parking-summary > div + div {
  border-left: 1px solid #d4dfe0;
}

.parking-summary span,
.parking-summary strong {
  display: block;
}

.parking-summary span {
  color: #687477;
  font-size: 10px;
  font-weight: 800;
}

.parking-summary strong {
  margin-top: 3px;
  color: #24383b;
  font-size: 16px;
  line-height: 1.15;
}

.parking-instruction {
  max-width: 600px;
  margin: 0 auto 10px;
  color: #505d60;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.parking-board-wrap {
  display: grid;
  width: 100%;
  place-items: center;
  overflow: hidden;
}

.parking-board {
  --parking-gap: 8px;
  display: grid;
  width: min(100%, 550px);
  aspect-ratio: 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: var(--parking-gap);
  overflow: hidden;
  border: 7px solid #526468;
  border-radius: 18px;
  background-color: #dce4e4;
  background-image:
    linear-gradient(rgba(255, 255, 255, .38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .38) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: calc((100% + var(--parking-gap)) / 6) calc((100% + var(--parking-gap)) / 6);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
  isolation: isolate;
}

.parking-car,
.parking-vehicle,
.parking-board [data-parking-car-id] {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  min-height: 44px;
  place-items: center;
  padding: 4px;
  appearance: none;
  border: 2px solid #3d5559;
  border-radius: 12px;
  background: linear-gradient(145deg, #78cbd0, #31939d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 #315f65;
  color: #102f34;
  cursor: pointer;
  font: inherit;
  font-size: clamp(19px, 4.8vw, 30px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px rgba(255, 255, 255, .55);
  transition: filter .15s ease, opacity .15s ease, transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.parking-car[data-parking-direction="L"],
.parking-car[data-parking-direction="R"],
.parking-vehicle[data-parking-direction="L"],
.parking-vehicle[data-parking-direction="R"] {
  grid-row: calc(var(--parking-row, 0) + 1);
  grid-column: calc(var(--parking-col, 0) + 1) / span var(--parking-length, 2);
}

.parking-car[data-parking-direction="U"],
.parking-car[data-parking-direction="D"],
.parking-vehicle[data-parking-direction="U"],
.parking-vehicle[data-parking-direction="D"] {
  grid-row: calc(var(--parking-row, 0) + 1) / span var(--parking-length, 2);
  grid-column: calc(var(--parking-col, 0) + 1);
}

.parking-car[data-parking-direction="U"]::after,
.parking-vehicle[data-parking-direction="U"]::after { content: "↑"; }
.parking-car[data-parking-direction="D"]::after,
.parking-vehicle[data-parking-direction="D"]::after { content: "↓"; }
.parking-car[data-parking-direction="L"]::after,
.parking-vehicle[data-parking-direction="L"]::after { content: "←"; }
.parking-car[data-parking-direction="R"]::after,
.parking-vehicle[data-parking-direction="R"]::after { content: "→"; }

.parking-car:hover,
.parking-vehicle:hover,
.parking-board [data-parking-car-id]:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.parking-car.is-hint,
.parking-vehicle.is-hint,
.parking-board [data-parking-car-id].is-hint {
  border-color: #9b5600;
  box-shadow: 0 0 0 4px #ffd45c, 0 4px 0 #8b5d1e;
  animation: parkingHint .62s ease-in-out infinite alternate;
}

.parking-car.is-restored,
.parking-vehicle.is-restored {
  animation: parkingRestore .42s ease-out both;
}

.parking-board.is-won,
.parking-escape-panel.is-won .parking-board {
  border-color: #197a62;
  box-shadow: 0 0 0 4px #bcebd9, inset 0 0 0 2px rgba(255, 255, 255, .62);
}

.parking-legend {
  display: flex;
  width: min(100%, 560px);
  justify-content: center;
  gap: 18px;
  margin: 9px auto 0;
  color: #697477;
  font-size: 11px;
  font-weight: 800;
}

.parking-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.parking-legend i {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #46595d;
  border-radius: 4px;
  background: #62b8c0;
  color: #163c41;
  font-style: normal;
  font-size: 13px;
  line-height: 1;
}

.parking-legend i.is-hint {
  border: 3px solid #d69b13;
  background: #fff8dd;
}

.parking-actions {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px auto 0;
}

.parking-actions .play-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
  font-size: 12px;
}

.parking-result {
  display: flex;
  width: min(100%, 560px);
  align-items: center;
  gap: 14px;
  margin: 16px auto 0;
  padding: 16px;
  border: 1px solid #bad8cf;
  border-radius: 14px;
  background: #effbf6;
}

.parking-result[hidden] {
  display: none;
}

.parking-result > span {
  font-size: 36px;
}

.parking-result h3 {
  margin: 0;
  font-size: 18px;
}

.parking-result p {
  margin: 4px 0 10px;
  color: #50615e;
  line-height: 1.5;
}

.parking-level-picker button:focus-visible,
.parking-car:focus-visible,
.parking-vehicle:focus-visible,
.parking-result:focus {
  outline: 3px solid #ffd93d;
  outline-offset: 4px;
}

@keyframes parkingHint {
  from { transform: scale(.97); }
  to { transform: scale(1.03); }
}

@keyframes parkingRestore {
  from { opacity: .35; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 520px) {
  body[data-play-mode="parkingescape"] .play-page {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  body[data-play-mode="parkingescape"] .play-breadcrumb {
    display: none;
  }

  body[data-play-mode="parkingescape"] .play-hero {
    margin-bottom: 10px;
  }

  body[data-play-mode="parkingescape"] .play-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body[data-play-mode="parkingescape"] .play-hero h1 {
    font-size: 28px;
  }

  body[data-play-mode="parkingescape"] .play-hero p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .parking-escape-panel {
    padding: 14px 7px 18px;
    border-radius: 16px;
  }

  .parking-escape-panel .play-panel-head,
  .parking-level-picker,
  .parking-summary,
  .parking-instruction,
  .parking-legend,
  .parking-actions,
  .parking-result,
  .parking-escape-panel .play-status {
    width: calc(100% - 10px);
  }

  .parking-board-wrap {
    width: 100%;
  }

  .parking-escape-panel .play-panel-head {
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .parking-escape-panel .play-panel-head h2 {
    font-size: 15px;
    line-height: 1.3;
  }

  .parking-escape-panel .play-progress {
    padding-top: 2px;
    white-space: nowrap;
  }

  .parking-level-picker {
    gap: 5px;
    margin-bottom: 7px;
  }

  .parking-level-picker button {
    min-height: 44px;
    padding: 5px 3px;
  }

  .parking-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 7px;
  }

  .parking-summary > div {
    padding: 6px 3px;
  }

  .parking-summary > div:nth-child(3) {
    border-left: 0;
  }

  .parking-summary > div:nth-child(n + 3) {
    border-top: 1px solid #d4dfe0;
  }

  .parking-summary strong {
    font-size: 15px;
  }

  .parking-instruction {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
  }

  .parking-board {
    --parking-gap: 3px;
    border-width: 4px;
    border-radius: 12px;
  }

  .parking-car,
  .parking-vehicle,
  .parking-board [data-parking-car-id] {
    min-height: 44px;
    padding: 2px;
    border-radius: 8px;
    font-size: clamp(19px, 7vw, 26px);
  }

  .parking-legend {
    margin-top: 7px;
  }

  .parking-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parking-result {
    align-items: flex-start;
  }
}

@media (max-width: 340px) {
  .parking-escape-panel {
    padding-right: 5px;
    padding-left: 5px;
  }

  .parking-level-picker small {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parking-car,
  .parking-vehicle {
    transition: none;
  }

  .parking-car.is-hint,
  .parking-vehicle.is-hint,
  .parking-car.is-restored,
  .parking-vehicle.is-restored {
    animation: none;
  }
}

/* Color link: numbered endpoints keep every pair identifiable without color alone. */
body[data-play-mode="colorlink"] .play-hero {
  margin-bottom: 16px;
}

body[data-play-mode="colorlink"] .play-hero p {
  max-width: 650px;
}

.color-link-panel {
  max-width: 700px;
  min-height: 0;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  border-color: #d9d2e8;
  box-shadow: none;
}

.color-link-panel .play-panel-head {
  max-width: 600px;
  margin-right: auto;
  margin-bottom: 12px;
  margin-left: auto;
}

.color-link-level-picker {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 10px;
}

.color-link-level-picker button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 5px;
  appearance: none;
  border: 1px solid #d5cce5;
  border-radius: 11px;
  background: #fbf9ff;
  color: #342c45;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.color-link-level-picker button:hover,
.color-link-level-picker button.is-active,
.color-link-level-picker button[aria-pressed="true"] {
  border-color: #6d4bb3;
  background: #f0eaff;
  box-shadow: inset 0 0 0 1px #6d4bb3;
}

.color-link-level-picker strong,
.color-link-level-picker small {
  display: block;
}

.color-link-level-picker strong {
  font-size: 13px;
}

.color-link-level-picker small {
  margin-top: 2px;
  color: #6d647b;
  font-size: 10px;
  font-weight: 700;
}

.color-link-summary {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid #ddd7e7;
  border-radius: 13px;
  background: #faf9fc;
}

.color-link-summary > div {
  min-width: 0;
  padding: 9px 5px;
  text-align: center;
}

.color-link-summary > div + div {
  border-left: 1px solid #ddd7e7;
}

.color-link-summary span,
.color-link-summary strong {
  display: block;
}

.color-link-summary span {
  color: #716a7a;
  font-size: 10px;
  font-weight: 800;
}

.color-link-summary strong {
  margin-top: 3px;
  color: #352f3d;
  font-size: 16px;
  line-height: 1.15;
}

.color-link-instruction {
  max-width: 600px;
  margin: 0 auto 10px;
  color: #56505f;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.color-link-board-wrap {
  display: grid;
  width: 100%;
  place-items: center;
  overflow: hidden;
}

.color-link-board {
  --color-link-size: 6;
  display: grid;
  width: min(100%, 536px);
  aspect-ratio: 1;
  grid-template-columns: repeat(var(--color-link-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--color-link-size), minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  overflow: hidden;
  border: 2px solid #625776;
  border-radius: 18px;
  background: #ddd8e7;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
  touch-action: none;
  user-select: none;
}

.color-link-board[data-color-link-size="5"] {
  --color-link-size: 5;
}

.color-link-board[data-color-link-size="6"] {
  --color-link-size: 6;
}

.color-link-cell {
  --color-link-color: #7969a3;
  --color-link-up: transparent;
  --color-link-right: transparent;
  --color-link-down: transparent;
  --color-link-left: transparent;
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 44px;
  place-items: center;
  padding: 0;
  appearance: none;
  border: 1px solid #c9c3d2;
  border-radius: 9px;
  background-color: #fff;
  background-image:
    linear-gradient(var(--color-link-up), var(--color-link-up)),
    linear-gradient(var(--color-link-right), var(--color-link-right)),
    linear-gradient(var(--color-link-down), var(--color-link-down)),
    linear-gradient(var(--color-link-left), var(--color-link-left));
  background-position: center top, right center, center bottom, left center;
  background-repeat: no-repeat;
  background-size: 12px 52%, 52% 12px, 12px 52%, 52% 12px;
  color: #1f1b26;
  cursor: pointer;
  font: inherit;
  font-size: clamp(14px, 4.8vw, 23px);
  font-weight: 900;
  line-height: 1;
  isolation: isolate;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.color-link-cell.has-link-up { --color-link-up: var(--color-link-color); }
.color-link-cell.has-link-right { --color-link-right: var(--color-link-color); }
.color-link-cell.has-link-down { --color-link-down: var(--color-link-color); }
.color-link-cell.has-link-left { --color-link-left: var(--color-link-color); }

.color-link-cell[data-color-link-state="path"]::before,
.color-link-cell[data-color-link-state="endpoint"]::before {
  position: absolute;
  z-index: -1;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--color-link-color);
  content: "";
}

.color-link-cell[data-color-link-state="endpoint"] {
  border-color: #5b5363;
  box-shadow: inset 0 0 0 2px #fff;
  color: #17131b;
}

.color-link-cell[data-color-link-state="endpoint"]::before {
  width: 70%;
  height: 70%;
  border: 5px solid var(--color-link-color);
  background: #fff;
  box-shadow: 0 0 0 1px #5b5363;
}

.color-link-cell[data-color-link-state="path"]::after {
  position: relative;
  z-index: 1;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #19151f;
  content: attr(data-color-link-symbol);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.color-link-cell:hover {
  border-color: #736584;
  transform: translateY(-1px);
}

.color-link-cell.is-selected {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #54416f;
}

.color-link-cell.is-hint {
  border-color: #8a5700;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px #ffd45c;
  animation: colorLinkHint .62s ease-in-out infinite alternate;
}

.color-link-cell.is-complete {
  border-color: #356d5c;
}

.color-link-board.is-complete,
.color-link-board.is-won,
.color-link-panel.is-won .color-link-board {
  border-color: #22765f;
  box-shadow: 0 0 0 4px #bdebdc, inset 0 0 0 2px rgba(255, 255, 255, .65);
}

.color-link-cell.is-restored {
  animation: colorLinkRestore .42s ease-out both;
}

.color-link-legend {
  display: flex;
  width: min(100%, 560px);
  justify-content: center;
  gap: 18px;
  margin: 9px auto 0;
  color: #6d6774;
  font-size: 11px;
  font-weight: 800;
}

.color-link-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.color-link-legend i {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 2px solid #4a785f;
  border-radius: 50%;
  background: #9be0b8;
  color: #18251e;
  font-style: normal;
  font-size: 12px;
  line-height: 1;
}

.color-link-legend i.is-path {
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 0 20%, #9b79df 20% 80%, transparent 80%);
}

.color-link-actions {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px auto 0;
}

.color-link-actions .play-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px;
  font-size: 12px;
}

.color-link-result {
  display: flex;
  width: min(100%, 560px);
  align-items: center;
  gap: 14px;
  margin: 16px auto 0;
  padding: 16px;
  border: 1px solid #c9bce3;
  border-radius: 14px;
  background: #f7f2ff;
}

.color-link-result[hidden] {
  display: none;
}

.color-link-result > span {
  font-size: 36px;
}

.color-link-result h3 {
  margin: 0;
  font-size: 18px;
}

.color-link-result p {
  margin: 4px 0 10px;
  color: #5e566b;
  line-height: 1.5;
}

.color-link-level-picker button:focus-visible,
.color-link-cell:focus-visible,
.color-link-result:focus {
  outline: 3px solid #ffd93d;
  outline-offset: 4px;
}

@keyframes colorLinkHint {
  from { transform: scale(.97); }
  to { transform: scale(1.03); }
}

@keyframes colorLinkRestore {
  from { opacity: .35; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 520px) {
  body[data-play-mode="colorlink"] .play-page {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  body[data-play-mode="colorlink"] .play-breadcrumb {
    display: none;
  }

  body[data-play-mode="colorlink"] .play-hero {
    margin-bottom: 10px;
  }

  body[data-play-mode="colorlink"] .play-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body[data-play-mode="colorlink"] .play-hero h1 {
    font-size: 28px;
  }

  body[data-play-mode="colorlink"] .play-hero p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .color-link-panel {
    padding: 14px 7px 18px;
    border-radius: 16px;
  }

  .color-link-panel .play-panel-head,
  .color-link-level-picker,
  .color-link-summary,
  .color-link-instruction,
  .color-link-legend,
  .color-link-actions,
  .color-link-result,
  .color-link-panel .play-status {
    width: calc(100% - 10px);
  }

  .color-link-panel .play-panel-head {
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .color-link-panel .play-panel-head h2 {
    font-size: 15px;
    line-height: 1.3;
  }

  .color-link-panel .play-progress {
    padding-top: 2px;
    white-space: nowrap;
  }

  .color-link-level-picker {
    gap: 5px;
    margin-bottom: 7px;
  }

  .color-link-level-picker button {
    min-height: 44px;
    padding: 5px 3px;
  }

  .color-link-summary {
    margin-bottom: 7px;
  }

  .color-link-summary > div {
    padding: 7px 3px;
  }

  .color-link-summary strong {
    font-size: 15px;
  }

  .color-link-instruction {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
  }

  .color-link-board {
    gap: 2px;
    padding: 4px;
    border-width: 2px;
    border-radius: 12px;
  }

  .color-link-cell {
    min-height: 44px;
    border-radius: 7px;
    background-size: 10px 52%, 52% 10px, 10px 52%, 52% 10px;
  }

  .color-link-legend {
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 7px;
  }

  .color-link-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .color-link-result {
    align-items: flex-start;
  }
}

@media (max-width: 340px) {
  .color-link-panel {
    padding-right: 5px;
    padding-left: 5px;
  }

  .color-link-level-picker small {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .color-link-cell {
    transition: none;
  }

  .color-link-cell.is-hint,
  .color-link-cell.is-restored {
    animation: none;
  }
}

/* Number pair: a fixed six-column board keeps scanning rules easy to follow. */
body[data-play-mode="numberpair"] .play-hero {
  margin-bottom: 16px;
}

body[data-play-mode="numberpair"] .play-hero p {
  max-width: 670px;
}

.number-pair-panel {
  max-width: 700px;
  min-height: 0;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  border-color: #d9d2e8;
  box-shadow: none;
}

.number-pair-panel .play-panel-head {
  max-width: 600px;
  margin-right: auto;
  margin-bottom: 12px;
  margin-left: auto;
}

.number-pair-level-picker {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 10px;
}

.number-pair-level-picker button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 5px;
  appearance: none;
  border: 1px solid #d5cce5;
  border-radius: 11px;
  background: #fbf9ff;
  color: #342c45;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.number-pair-level-picker button:hover,
.number-pair-level-picker button.is-active,
.number-pair-level-picker button[aria-pressed="true"] {
  border-color: #6d4bb3;
  background: #f0eaff;
  box-shadow: inset 0 0 0 1px #6d4bb3;
}

.number-pair-level-picker strong,
.number-pair-level-picker small {
  display: block;
}

.number-pair-level-picker strong {
  font-size: 13px;
}

.number-pair-level-picker small {
  margin-top: 2px;
  color: #6d647b;
  font-size: 10px;
  font-weight: 700;
}

.number-pair-summary {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid #ddd7e7;
  border-radius: 13px;
  background: #faf9fc;
}

.number-pair-summary > div {
  min-width: 0;
  padding: 8px 4px;
  border-right: 1px solid #e6e1eb;
  text-align: center;
}

.number-pair-summary > div:last-child {
  border-right: 0;
}

.number-pair-summary span,
.number-pair-summary strong {
  display: block;
}

.number-pair-summary span {
  color: #77717e;
  font-size: 10px;
  font-weight: 800;
}

.number-pair-summary strong {
  margin-top: 2px;
  overflow: hidden;
  color: #2d2639;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.number-pair-instruction {
  width: min(100%, 560px);
  margin: 0 auto 10px;
  color: #625b69;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.number-pair-board-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.number-pair-board {
  --number-pair-columns: 6;
  display: grid;
  width: min(100%, 536px);
  grid-template-columns: repeat(var(--number-pair-columns), minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border: 2px solid #cfc5dd;
  border-radius: 15px;
  background: #eeeaf3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.number-pair-cell {
  display: grid;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  appearance: none;
  border: 1px solid #c9bfd8;
  border-radius: 10px;
  background: #fff;
  color: #2d2340;
  cursor: pointer;
  font: inherit;
  font-size: clamp(18px, 5.5vw, 25px);
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(48, 34, 68, .08);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease, opacity .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.number-pair-cell:hover:not([data-number-pair-state="removed"]):not(.is-removed) {
  border-color: #76638f;
  background: #fcfaff;
  transform: translateY(-1px);
}

.number-pair-cell.is-selected {
  border-color: #7a5600;
  background: #fff8d7;
  box-shadow: inset 0 0 0 2px #ffd85d, 0 0 0 2px #fff;
}

.number-pair-cell.is-hint {
  border-color: #765000;
  background: #fff3bb;
  box-shadow: inset 0 0 0 2px #ffd24a, 0 0 0 3px rgba(255, 199, 35, .5);
  animation: numberPairHint .62s ease-in-out infinite alternate;
}

.number-pair-cell.is-matched {
  border-color: #23705c;
  background: #d7f4e9;
  color: #155444;
  animation: numberPairMatched .34s ease-out both;
}

.number-pair-cell[data-number-pair-state="removed"],
.number-pair-cell.is-removed {
  border-color: transparent;
  background: rgba(255, 255, 255, .2);
  color: transparent;
  cursor: default;
  box-shadow: none;
  opacity: .35;
  pointer-events: none;
}

.number-pair-board.is-stuck {
  border-color: #b76531;
  box-shadow: 0 0 0 4px #ffe0c8, inset 0 0 0 1px rgba(255, 255, 255, .75);
}

.number-pair-board.is-won,
.number-pair-panel.is-won .number-pair-board {
  border-color: #22765f;
  box-shadow: 0 0 0 4px #bdebdc, inset 0 0 0 1px rgba(255, 255, 255, .75);
}

.number-pair-legend {
  display: flex;
  width: min(100%, 560px);
  justify-content: center;
  gap: 16px;
  margin: 9px auto 0;
  color: #6d6774;
  font-size: 11px;
  font-weight: 800;
}

.number-pair-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.number-pair-legend i {
  display: inline-grid;
  min-width: 30px;
  height: 23px;
  place-items: center;
  padding: 0 4px;
  border: 1px solid #8b78a7;
  border-radius: 7px;
  background: #f5f0ff;
  color: #362a4b;
  font-style: normal;
  font-size: 10px;
  line-height: 1;
}

.number-pair-legend i.is-gap {
  min-width: 28px;
  background: repeating-linear-gradient(135deg, #eeeaf3 0 4px, #faf8fc 4px 8px);
}

.number-pair-actions {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 12px auto 0;
}

.number-pair-actions .play-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 5px;
  font-size: 11px;
  line-height: 1.25;
}

.number-pair-level-picker button:focus-visible,
.number-pair-cell:focus-visible {
  outline: 3px solid #ffd93d;
  outline-offset: 3px;
}

@keyframes numberPairHint {
  from { transform: scale(.97); }
  to { transform: scale(1.03); }
}

@keyframes numberPairMatched {
  0% { background-color: #d7f4e9; opacity: 1; outline: 3px solid #4eb99a; outline-offset: -3px; transform: scale(1); }
  55% { background-color: #d7f4e9; opacity: .75; outline-color: #4eb99a; transform: scale(.82); }
  100% { background-color: rgba(255, 255, 255, .2); opacity: .35; outline-color: transparent; outline-offset: -3px; transform: scale(1); }
}

@media (max-width: 520px) {
  body[data-play-mode="numberpair"] .play-page {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  body[data-play-mode="numberpair"] .play-breadcrumb {
    display: none;
  }

  body[data-play-mode="numberpair"] .play-hero {
    margin-bottom: 10px;
  }

  body[data-play-mode="numberpair"] .play-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body[data-play-mode="numberpair"] .play-hero h1 {
    font-size: 28px;
  }

  body[data-play-mode="numberpair"] .play-hero p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .number-pair-panel {
    padding: 14px 7px 18px;
    border-radius: 16px;
  }

  .number-pair-panel .play-panel-head,
  .number-pair-level-picker,
  .number-pair-summary,
  .number-pair-instruction,
  .number-pair-legend,
  .number-pair-actions,
  .number-pair-panel .play-status {
    width: calc(100% - 10px);
  }

  .number-pair-panel .play-panel-head {
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .number-pair-panel .play-panel-head h2 {
    font-size: 15px;
    line-height: 1.3;
  }

  .number-pair-panel .play-progress {
    padding-top: 2px;
    white-space: nowrap;
  }

  .number-pair-level-picker {
    gap: 5px;
    margin-bottom: 7px;
  }

  .number-pair-level-picker button {
    min-height: 44px;
    padding: 5px 3px;
  }

  .number-pair-summary {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 7px;
  }

  .number-pair-summary > div {
    grid-column: span 2;
    padding: 7px 3px;
  }

  .number-pair-summary > div:nth-child(3) {
    border-right: 0;
  }

  .number-pair-summary > div:nth-child(4),
  .number-pair-summary > div:nth-child(5) {
    grid-column: span 3;
    border-top: 1px solid #e6e1eb;
  }

  .number-pair-summary > div:nth-child(4) {
    border-right: 1px solid #e6e1eb;
  }

  .number-pair-summary strong {
    font-size: 14px;
  }

  .number-pair-instruction {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
  }

  .number-pair-board {
    gap: 2px;
    padding: 4px;
    border-radius: 12px;
  }

  .number-pair-cell {
    min-height: 44px;
    border-radius: 7px;
    font-size: clamp(17px, 7vw, 22px);
  }

  .number-pair-legend {
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 7px;
  }

  .number-pair-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .number-pair-actions .play-button:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 340px) {
  .number-pair-panel {
    padding-right: 5px;
    padding-left: 5px;
  }

  .number-pair-level-picker small {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .number-pair-cell,
  .number-pair-board {
    transition: none;
  }

  .number-pair-cell.is-hint,
  .number-pair-cell.is-matched {
    animation: none;
  }
}

/* Picture path: one focused six-column board for matching through up to two turns. */
body[data-play-mode="picturepath"] .play-hero {
  margin-bottom: 16px;
}

body[data-play-mode="picturepath"] .play-hero p {
  max-width: 680px;
}

.picture-path-panel {
  max-width: 700px;
  min-height: 0;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  border-color: #cfdedb;
  box-shadow: none;
}

.picture-path-panel .play-panel-head {
  max-width: 600px;
  margin-right: auto;
  margin-bottom: 12px;
  margin-left: auto;
}

.picture-path-level-picker {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 10px;
}

.picture-path-level-picker button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 5px;
  appearance: none;
  border: 1px solid #c9dbd7;
  border-radius: 11px;
  background: #f8fcfb;
  color: #263d38;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.picture-path-level-picker button:hover,
.picture-path-level-picker button.is-active,
.picture-path-level-picker button[aria-pressed="true"] {
  border-color: #277661;
  background: #e6f5f0;
  box-shadow: inset 0 0 0 1px #277661;
}

.picture-path-level-picker strong,
.picture-path-level-picker small {
  display: block;
}

.picture-path-level-picker strong {
  font-size: 13px;
}

.picture-path-level-picker small {
  margin-top: 2px;
  color: #62736f;
  font-size: 10px;
  font-weight: 700;
}

.picture-path-summary {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid #d5e0de;
  border-radius: 13px;
  background: #f9fbfb;
}

.picture-path-summary > div {
  min-width: 0;
  padding: 8px 4px;
  border-right: 1px solid #e1e8e6;
  text-align: center;
}

.picture-path-summary > div:last-child {
  border-right: 0;
}

.picture-path-summary span,
.picture-path-summary strong {
  display: block;
}

.picture-path-summary span {
  color: #6e7a77;
  font-size: 10px;
  font-weight: 800;
}

.picture-path-summary strong {
  margin-top: 2px;
  overflow: hidden;
  color: #253a35;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picture-path-instruction {
  width: min(100%, 560px);
  margin: 0 auto 10px;
  color: #596864;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.picture-path-board-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.picture-path-board {
  --picture-path-columns: 6;
  display: grid;
  width: min(100%, 536px);
  grid-template-columns: repeat(var(--picture-path-columns), minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border: 2px solid #bfd4cf;
  border-radius: 15px;
  background: #e7efed;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.picture-path-cell {
  display: grid;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  appearance: none;
  border: 1px solid #b8cec8;
  border-radius: 10px;
  background: #fff;
  color: #263d38;
  cursor: pointer;
  font: inherit;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: clamp(20px, 6vw, 28px);
  line-height: 1;
  box-shadow: 0 1px 2px rgba(31, 67, 58, .08);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.picture-path-cell:hover:not([data-picture-path-state="removed"]):not(.is-removed) {
  border-color: #4e8175;
  background: #fbfefd;
  transform: translateY(-1px);
}

.picture-path-cell.is-selected {
  border-color: #7c5800;
  background: #fff8d7;
  box-shadow: inset 0 0 0 2px #ffd85d, 0 0 0 2px #fff;
}

.picture-path-cell.is-hint {
  border-color: #765000;
  background: #fff3bb;
  box-shadow: inset 0 0 0 2px #ffd24a, 0 0 0 3px rgba(255, 199, 35, .46);
  animation: picturePathHint .62s ease-in-out infinite alternate;
}

.picture-path-cell.is-matched {
  border-color: #23705c;
  background: #d7f4e9;
  animation: picturePathMatched .34s ease-out both;
}

.picture-path-cell[data-picture-path-state="removed"],
.picture-path-cell.is-removed {
  border-color: transparent;
  background: rgba(255, 255, 255, .2);
  color: transparent;
  cursor: default;
  box-shadow: none;
  opacity: .32;
  pointer-events: none;
}

.picture-path-board.is-stuck {
  border-color: #b76531;
  box-shadow: 0 0 0 4px #ffe0c8, inset 0 0 0 1px rgba(255, 255, 255, .8);
}

.picture-path-board.is-won,
.picture-path-panel.is-won .picture-path-board {
  border-color: #22765f;
  box-shadow: 0 0 0 4px #bdebdc, inset 0 0 0 1px rgba(255, 255, 255, .8);
}

.picture-path-legend {
  display: flex;
  width: min(100%, 560px);
  justify-content: center;
  gap: 16px;
  margin: 9px auto 0;
  color: #64736f;
  font-size: 11px;
  font-weight: 800;
}

.picture-path-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.picture-path-legend i {
  position: relative;
  display: inline-grid;
  width: 28px;
  height: 23px;
  place-items: center;
  border: 1px solid #72a095;
  border-radius: 7px;
  background: #edf8f5;
  color: #284c43;
  font-style: normal;
  font-size: 13px;
}

.picture-path-legend i.is-turn::before {
  width: 14px;
  height: 10px;
  border-right: 3px solid #317d69;
  border-bottom: 3px solid #317d69;
  content: "";
}

.picture-path-legend i.is-outside::before {
  width: 14px;
  height: 11px;
  border: 2px dashed #317d69;
  border-bottom: 0;
  content: "";
}

.picture-path-actions {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 12px auto 0;
}

.picture-path-actions .play-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 5px;
  font-size: 11px;
  line-height: 1.25;
}

.picture-path-level-picker button:focus-visible,
.picture-path-cell:focus-visible,
.picture-path-actions .play-button:focus-visible {
  outline: 3px solid #ffd93d;
  outline-offset: 3px;
}

@keyframes picturePathHint {
  from { transform: scale(.97); }
  to { transform: scale(1.03); }
}

@keyframes picturePathMatched {
  0% { background-color: #d7f4e9; opacity: 1; outline: 3px solid #4eb99a; outline-offset: -3px; transform: scale(1); }
  55% { background-color: #d7f4e9; opacity: .75; outline-color: #4eb99a; transform: scale(.82); }
  100% { background-color: rgba(255, 255, 255, .2); opacity: .32; outline-color: transparent; outline-offset: -3px; transform: scale(1); }
}

@media (max-width: 520px) {
  body[data-play-mode="picturepath"] .play-page {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  body[data-play-mode="picturepath"] .play-breadcrumb {
    display: none;
  }

  body[data-play-mode="picturepath"] .play-hero {
    margin-bottom: 10px;
  }

  body[data-play-mode="picturepath"] .play-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body[data-play-mode="picturepath"] .play-hero h1 {
    font-size: 28px;
  }

  body[data-play-mode="picturepath"] .play-hero p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .picture-path-panel {
    padding: 14px 7px 18px;
    border-radius: 16px;
  }

  .picture-path-panel .play-panel-head,
  .picture-path-level-picker,
  .picture-path-summary,
  .picture-path-instruction,
  .picture-path-legend,
  .picture-path-actions,
  .picture-path-panel .play-status {
    width: calc(100% - 10px);
  }

  .picture-path-panel .play-panel-head {
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .picture-path-panel .play-panel-head h2 {
    font-size: 15px;
    line-height: 1.3;
  }

  .picture-path-panel .play-progress {
    padding-top: 2px;
    white-space: nowrap;
  }

  .picture-path-level-picker {
    gap: 5px;
    margin-bottom: 7px;
  }

  .picture-path-level-picker button {
    min-height: 44px;
    padding: 5px 3px;
  }

  .picture-path-summary {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 7px;
  }

  .picture-path-summary > div {
    grid-column: span 2;
    padding: 7px 3px;
  }

  .picture-path-summary > div:nth-child(3) {
    border-right: 0;
  }

  .picture-path-summary > div:nth-child(4),
  .picture-path-summary > div:nth-child(5) {
    grid-column: span 3;
    border-top: 1px solid #e1e8e6;
  }

  .picture-path-summary > div:nth-child(4) {
    border-right: 1px solid #e1e8e6;
  }

  .picture-path-summary strong {
    font-size: 14px;
  }

  .picture-path-instruction {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
  }

  .picture-path-board {
    gap: 2px;
    padding: 4px;
    border-width: 2px;
    border-radius: 12px;
  }

  .picture-path-cell {
    min-height: 44px;
    border-radius: 7px;
    font-size: clamp(19px, 7.5vw, 25px);
  }

  .picture-path-legend {
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 7px;
  }

  .picture-path-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .picture-path-actions .play-button:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 340px) {
  .picture-path-panel {
    padding-right: 5px;
    padding-left: 5px;
  }

  .picture-path-level-picker small {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .picture-path-cell,
  .picture-path-board {
    transition: none;
  }

  .picture-path-cell.is-hint,
  .picture-path-cell.is-matched {
    animation: none;
  }
}

/* Jigsaw: a calm picture workbench for click, drag, and keyboard swaps. */
body[data-play-mode="jigsaw"] .play-hero {
  margin-bottom: 16px;
}

body[data-play-mode="jigsaw"] .play-hero p {
  max-width: 680px;
}

.jigsaw-panel {
  max-width: 700px;
  min-height: 0;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  border-color: #d8d3c9;
  background: #fffdfa;
  box-shadow: none;
}

.jigsaw-panel .play-panel-head {
  max-width: 600px;
  margin-right: auto;
  margin-bottom: 12px;
  margin-left: auto;
}

.jigsaw-level-picker {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 10px;
}

.jigsaw-level-picker button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 5px;
  appearance: none;
  border: 1px solid #d7d0c2;
  border-radius: 11px;
  background: #fffaf1;
  color: #3f3a32;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.jigsaw-level-picker button:hover,
.jigsaw-level-picker button.is-active,
.jigsaw-level-picker button[aria-pressed="true"] {
  border-color: #91642e;
  background: #fff0d5;
  box-shadow: inset 0 0 0 1px #91642e;
}

.jigsaw-level-picker strong,
.jigsaw-level-picker small {
  display: block;
}

.jigsaw-level-picker strong {
  font-size: 13px;
}

.jigsaw-level-picker small {
  margin-top: 2px;
  color: #756b5d;
  font-size: 10px;
  font-weight: 700;
}

.jigsaw-summary {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid #dfd8cc;
  border-radius: 13px;
  background: #faf8f4;
}

.jigsaw-summary > div {
  min-width: 0;
  padding: 8px 4px;
  border-right: 1px solid #e8e2d8;
  text-align: center;
}

.jigsaw-summary > div:last-child {
  border-right: 0;
}

.jigsaw-summary span,
.jigsaw-summary strong {
  display: block;
}

.jigsaw-summary span {
  color: #756f66;
  font-size: 10px;
  font-weight: 800;
}

.jigsaw-summary strong {
  margin-top: 2px;
  overflow: hidden;
  color: #38342f;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jigsaw-instruction {
  width: min(100%, 560px);
  margin: 0 auto 9px;
  color: #655f56;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.jigsaw-preview-row {
  display: flex;
  width: min(100%, 560px);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 auto 9px;
}

.jigsaw-preview-row span {
  color: #797168;
  font-size: 11px;
  font-weight: 700;
}

.jigsaw-preview-button {
  min-height: 44px;
  flex: 0 0 auto;
}

.jigsaw-preview-button.is-open,
.jigsaw-preview-button[aria-pressed="true"] {
  border-color: #825520;
  background: #fff0cf;
  color: #4e3519;
}

.jigsaw-workbench {
  position: relative;
  display: grid;
  width: 100%;
  place-items: center;
}

.jigsaw-board {
  --jigsaw-size: 4;
  display: grid;
  width: min(100%, 536px);
  aspect-ratio: 1;
  grid-template-columns: repeat(var(--jigsaw-size), minmax(0, 1fr));
  gap: 3px;
  padding: 5px;
  overflow: hidden;
  border: 4px solid #4d4439;
  border-radius: 16px;
  background: #4d4439;
  box-shadow: 0 7px 18px rgba(70, 55, 37, .15), inset 0 0 0 1px rgba(255, 255, 255, .18);
  isolation: isolate;
}

.jigsaw-piece {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: 1;
  padding: 0;
  appearance: none;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 7px;
  background-color: #e8e2d8;
  background-repeat: no-repeat;
  color: transparent;
  cursor: grab;
  font: inherit;
  box-shadow: inset 0 0 0 1px rgba(65, 51, 35, .18);
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.jigsaw-piece-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.jigsaw-piece[data-jigsaw-state="misplaced"] {
  border-color: rgba(255, 255, 255, .72);
}

.jigsaw-piece:disabled {
  opacity: 1;
  cursor: default;
}

.jigsaw-piece:hover {
  z-index: 2;
  border-color: #fff;
  box-shadow: 0 0 0 2px #7b6041, inset 0 0 0 1px rgba(65, 51, 35, .18);
  transform: translateY(-1px);
}

.jigsaw-piece:active,
.jigsaw-piece.is-dragging {
  cursor: grabbing;
}

.jigsaw-piece.is-selected {
  z-index: 3;
  border-color: #3f2e18;
  box-shadow: 0 0 0 4px #ffd85d, inset 0 0 0 1px rgba(65, 51, 35, .18);
  transform: scale(.96);
}

.jigsaw-piece.is-hint {
  z-index: 2;
  border-color: #6f4600;
  box-shadow: 0 0 0 4px #ffcf4b, inset 0 0 0 1px rgba(65, 51, 35, .18);
  animation: jigsawHint .62s ease-in-out infinite alternate;
}

.jigsaw-piece.is-drop-target {
  z-index: 4;
  border-color: #173f35;
  box-shadow: 0 0 0 4px #72d6bb, inset 0 0 0 1px rgba(65, 51, 35, .18);
}

.jigsaw-piece.is-correct,
.jigsaw-piece[data-jigsaw-state="correct"] {
  border-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 2px rgba(35, 121, 88, .72);
}

.jigsaw-piece.is-correct::after,
.jigsaw-piece[data-jigsaw-state="correct"]::after {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: #237958;
  color: #fff;
  content: "✓";
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.jigsaw-piece.is-swapped {
  animation: jigsawSwap .3s ease-out both;
}

.jigsaw-board.is-won,
.jigsaw-panel.is-won .jigsaw-board {
  border-color: #237958;
  box-shadow: 0 0 0 4px #bcebd8, 0 7px 18px rgba(70, 55, 37, .15);
}

.jigsaw-reference {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  width: min(100%, 536px);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  margin: auto;
  border: 4px solid #fff;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(50, 38, 24, .28);
}

.jigsaw-reference[hidden] {
  display: none;
}

.jigsaw-reference canvas,
.jigsaw-preview-button canvas {
  display: block;
  width: 100%;
  height: auto;
}

.jigsaw-reference > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(34, 30, 26, .78);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.jigsaw-legend {
  display: flex;
  width: min(100%, 560px);
  justify-content: center;
  gap: 18px;
  margin: 9px auto 0;
  color: #716a61;
  font-size: 11px;
  font-weight: 800;
}

.jigsaw-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.jigsaw-legend i {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #c7bcae;
  border-radius: 5px;
  background: #f3eee6;
}

.jigsaw-legend i.is-correct { box-shadow: inset 0 0 0 3px #237958; }
.jigsaw-legend i.is-selected { border-color: #3f2e18; box-shadow: 0 0 0 3px #ffd85d; }
.jigsaw-legend i.is-hint { border-color: #6f4600; box-shadow: 0 0 0 3px #ffcf4b; }

.jigsaw-actions {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 12px auto 0;
}

.jigsaw-actions .play-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 5px;
  font-size: 11px;
  line-height: 1.25;
}

.jigsaw-level-picker button:focus-visible,
.jigsaw-preview-button:focus-visible,
.jigsaw-piece:focus-visible,
.jigsaw-actions .play-button:focus-visible {
  z-index: 5;
  outline: 3px solid #ffd93d;
  outline-offset: 3px;
}

@keyframes jigsawHint {
  from { transform: scale(.97); }
  to { transform: scale(1.03); }
}

@keyframes jigsawSwap {
  0% { opacity: .55; transform: scale(.86); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 520px) {
  body[data-play-mode="jigsaw"] .play-page {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  body[data-play-mode="jigsaw"] .play-breadcrumb {
    display: none;
  }

  body[data-play-mode="jigsaw"] .play-hero {
    margin-bottom: 10px;
  }

  body[data-play-mode="jigsaw"] .play-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body[data-play-mode="jigsaw"] .play-hero h1 {
    font-size: 28px;
  }

  body[data-play-mode="jigsaw"] .play-hero p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .jigsaw-panel {
    padding: 14px 7px 18px;
    border-radius: 16px;
  }

  .jigsaw-panel .play-panel-head,
  .jigsaw-level-picker,
  .jigsaw-summary,
  .jigsaw-instruction,
  .jigsaw-preview-row,
  .jigsaw-legend,
  .jigsaw-actions,
  .jigsaw-panel .play-status {
    width: calc(100% - 10px);
  }

  .jigsaw-panel .play-panel-head {
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .jigsaw-panel .play-panel-head h2 {
    font-size: 15px;
    line-height: 1.3;
  }

  .jigsaw-panel .play-progress {
    padding-top: 2px;
    white-space: nowrap;
  }

  .jigsaw-level-picker {
    gap: 5px;
    margin-bottom: 7px;
  }

  .jigsaw-level-picker button {
    min-height: 44px;
    padding: 5px 3px;
  }

  .jigsaw-summary {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 7px;
  }

  .jigsaw-summary > div {
    grid-column: span 2;
    padding: 7px 3px;
  }

  .jigsaw-summary > div:nth-child(3) {
    border-right: 0;
  }

  .jigsaw-summary > div:nth-child(4),
  .jigsaw-summary > div:nth-child(5) {
    grid-column: span 3;
    border-top: 1px solid #e8e2d8;
  }

  .jigsaw-summary > div:nth-child(4) {
    border-right: 1px solid #e8e2d8;
  }

  .jigsaw-summary strong {
    font-size: 14px;
  }

  .jigsaw-instruction {
    margin-bottom: 7px;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
  }

  .jigsaw-preview-row {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }

  .jigsaw-preview-row span {
    text-align: center;
  }

  .jigsaw-board {
    gap: 2px;
    padding: 4px;
    border-width: 4px;
    border-radius: 12px;
  }

  .jigsaw-piece {
    min-height: 44px;
    border-width: 1px;
    border-radius: 5px;
  }

  .jigsaw-piece.is-correct::after,
  .jigsaw-piece[data-jigsaw-state="correct"]::after {
    right: 2px;
    bottom: 2px;
    width: 15px;
    height: 15px;
    font-size: 9px;
  }

  .jigsaw-reference {
    border-width: 4px;
    border-radius: 12px;
  }

  .jigsaw-legend {
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 7px;
  }

  .jigsaw-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jigsaw-actions .play-button:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 340px) {
  .jigsaw-panel {
    padding-right: 5px;
    padding-left: 5px;
  }

  .jigsaw-level-picker small {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jigsaw-piece,
  .jigsaw-board {
    transition: none;
  }

  .jigsaw-piece.is-hint,
  .jigsaw-piece.is-swapped,
  .jigsaw-piece.is-drop-target {
    animation: none;
  }
}

/* Bubble shooter: a focused aiming board with redundant color, number, and pattern cues. */
body[data-play-mode="bubbleshooter"] .play-hero {
  margin-bottom: 16px;
}

body[data-play-mode="bubbleshooter"] .play-hero p {
  max-width: 680px;
}

.bubble-shooter-panel {
  max-width: 680px;
  min-height: 0;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  border-color: #ccd9de;
  background: #fafdff;
  box-shadow: none;
}

.bubble-shooter-panel .play-panel-head {
  max-width: 560px;
  margin-right: auto;
  margin-bottom: 12px;
  margin-left: auto;
}

.bubble-shooter-level-picker {
  display: grid;
  width: min(100%, 520px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 10px;
}

.bubble-shooter-level-picker button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 5px;
  appearance: none;
  border: 1px solid #c6d6dc;
  border-radius: 11px;
  background: #f4fbfd;
  color: #283d46;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.bubble-shooter-level-picker button:hover,
.bubble-shooter-level-picker button.is-active,
.bubble-shooter-level-picker button[aria-pressed="true"] {
  border-color: #26758a;
  background: #e1f6fb;
  box-shadow: inset 0 0 0 1px #26758a;
}

.bubble-shooter-level-picker strong,
.bubble-shooter-level-picker small {
  display: block;
}

.bubble-shooter-level-picker strong {
  font-size: 13px;
}

.bubble-shooter-level-picker small {
  margin-top: 2px;
  color: #58717b;
  font-size: 10px;
  font-weight: 700;
}

.bubble-shooter-summary {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid #d4e0e4;
  border-radius: 13px;
  background: #f3f8fa;
}

.bubble-shooter-summary > div {
  min-width: 0;
  padding: 8px 3px;
  border-right: 1px solid #dfe8eb;
  text-align: center;
}

.bubble-shooter-summary > div:last-child {
  border-right: 0;
}

.bubble-shooter-summary span,
.bubble-shooter-summary strong {
  display: block;
}

.bubble-shooter-summary span {
  color: #607780;
  font-size: 10px;
  font-weight: 800;
}

.bubble-shooter-summary strong {
  margin-top: 2px;
  overflow: hidden;
  color: #203740;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bubble-shooter-summary small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: #6b7f86;
  font-size: 8px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bubble-shooter-instruction {
  width: min(100%, 560px);
  margin: 0 auto 9px;
  color: #526970;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.bubble-shooter-stage {
  display: grid;
  width: min(100%, 520px);
  gap: 8px;
  margin: 0 auto;
}

.bubble-shooter-stage canvas,
canvas[data-bubble-shooter-canvas] {
  display: block;
  width: min(100%, 480px);
  height: auto;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  border: 4px solid #253e49;
  border-radius: 17px;
  background: #edf7fa;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
  touch-action: none;
}

.bubble-shooter-stage canvas:focus-visible,
canvas[data-bubble-shooter-canvas]:focus-visible {
  outline: 4px solid #ffd93d;
  outline-offset: 3px;
}

.bubble-shooter-panel.is-won canvas[data-bubble-shooter-canvas] {
  border-color: #237958;
  box-shadow: 0 0 0 4px #bcebd8;
}

.bubble-shooter-panel.is-lost canvas[data-bubble-shooter-canvas] {
  border-color: #a33a45;
  box-shadow: 0 0 0 4px #f5c9ce;
}

.bubble-shooter-ammo {
  display: grid;
  width: min(100%, 400px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0 auto;
}

.bubble-shooter-ammo > div {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid #d4e0e4;
  border-radius: 12px;
  background: #fff;
}

.bubble-shooter-ammo > div > span {
  color: #5d727a;
  font-size: 11px;
  font-weight: 800;
}

.bubble-shooter-ammo strong {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #2b4149;
  font-size: 11px;
}

.bubble-shooter-aim {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: 50px minmax(0, 1fr) 50px 118px;
  grid-template-rows: auto 44px;
  gap: 6px 8px;
  margin: 12px auto 0;
}

.bubble-shooter-aim label {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  grid-column: 2;
  color: #4a626b;
  font-size: 11px;
  font-weight: 800;
}

.bubble-shooter-aim output {
  color: #173b48;
  font-variant-numeric: tabular-nums;
}

.bubble-shooter-aim input[type="range"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  accent-color: #176c83;
  cursor: pointer;
}

.bubble-shooter-aim-button {
  min-width: 0;
  min-height: 44px;
  padding: 7px;
  grid-row: 2;
  font-size: 20px;
  line-height: 1;
}

.bubble-shooter-aim-button[data-bubble-shooter-aim-left] {
  grid-column: 1;
}

.bubble-shooter-aim-button[data-bubble-shooter-aim-right] {
  grid-column: 3;
}

.bubble-shooter-fire {
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  grid-column: 4;
  grid-row: 2;
}

.bubble-shooter-legend {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  margin: 10px auto 0;
}

.bubble-shooter-legend > span {
  display: grid;
  min-width: 0;
  place-items: center;
  gap: 3px;
  color: #536970;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.bubble-swatch {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid #233b45;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

.bubble-swatch.is-one {
  background-color: #c93658;
  background-image: radial-gradient(rgba(255, 255, 255, .72) 19%, transparent 21%);
  background-size: 8px 8px;
}

.bubble-swatch.is-two {
  background-color: #2868c7;
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, .62) 5px 7px);
}

.bubble-swatch.is-three {
  background-color: #16845b;
  background-image: linear-gradient(45deg, transparent 42%, rgba(255, 255, 255, .65) 43% 57%, transparent 58%), linear-gradient(-45deg, transparent 42%, rgba(255, 255, 255, .65) 43% 57%, transparent 58%);
  background-size: 12px 12px;
}

.bubble-swatch.is-four {
  background-color: #7b49b6;
  background-image: radial-gradient(circle, transparent 24%, rgba(255, 255, 255, .7) 26% 42%, transparent 44%);
  background-size: 13px 13px;
}

.bubble-swatch.is-five {
  background-color: #b85a13;
  background-image: linear-gradient(30deg, transparent 45%, rgba(255, 255, 255, .68) 46% 54%, transparent 55%), linear-gradient(-30deg, transparent 45%, rgba(255, 255, 255, .68) 46% 54%, transparent 55%);
  background-size: 13px 11px;
}

.bubble-swatch.is-six {
  background-color: #087c89;
  background-image: linear-gradient(45deg, transparent 37%, rgba(255, 255, 255, .7) 38% 45%, transparent 46% 54%, rgba(255, 255, 255, .7) 55% 62%, transparent 63%), linear-gradient(-45deg, transparent 37%, rgba(255, 255, 255, .7) 38% 45%, transparent 46% 54%, rgba(255, 255, 255, .7) 55% 62%, transparent 63%);
  background-size: 15px 15px;
}

.bubble-shooter-actions {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 12px auto 0;
}

.bubble-shooter-actions .play-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 5px;
  font-size: 11px;
  line-height: 1.25;
}

.bubble-shooter-level-picker button:focus-visible,
.bubble-shooter-aim input[type="range"]:focus-visible,
.bubble-shooter-aim .play-button:focus-visible,
.bubble-shooter-actions .play-button:focus-visible {
  z-index: 5;
  outline: 3px solid #ffd93d;
  outline-offset: 3px;
}

@media (max-width: 520px) {
  body[data-play-mode="bubbleshooter"] .play-page {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  body[data-play-mode="bubbleshooter"] .play-breadcrumb {
    display: none;
  }

  body[data-play-mode="bubbleshooter"] .play-hero {
    margin-bottom: 10px;
  }

  body[data-play-mode="bubbleshooter"] .play-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body[data-play-mode="bubbleshooter"] .play-hero h1 {
    font-size: 28px;
  }

  body[data-play-mode="bubbleshooter"] .play-hero p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .bubble-shooter-panel {
    padding: 14px 7px 18px;
    border-radius: 16px;
  }

  .bubble-shooter-panel .play-panel-head,
  .bubble-shooter-level-picker,
  .bubble-shooter-summary,
  .bubble-shooter-instruction,
  .bubble-shooter-stage,
  .bubble-shooter-aim,
  .bubble-shooter-legend,
  .bubble-shooter-actions,
  .bubble-shooter-panel .play-status {
    width: calc(100% - 10px);
  }

  .bubble-shooter-panel .play-panel-head {
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .bubble-shooter-panel .play-panel-head h2 {
    font-size: 15px;
    line-height: 1.3;
  }

  .bubble-shooter-panel .play-progress {
    padding-top: 2px;
    white-space: nowrap;
  }

  .bubble-shooter-level-picker {
    gap: 5px;
    margin-bottom: 7px;
  }

  .bubble-shooter-level-picker button {
    min-height: 44px;
    padding: 5px 3px;
  }

  .bubble-shooter-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 7px;
  }

  .bubble-shooter-summary > div {
    padding: 7px 3px;
    border-bottom: 1px solid #dfe8eb;
  }

  .bubble-shooter-summary > div:nth-child(even) {
    border-right: 0;
  }

  .bubble-shooter-summary > div:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
    border-right: 0;
  }

  .bubble-shooter-summary strong {
    font-size: 13px;
  }

  .bubble-shooter-instruction {
    margin-bottom: 7px;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
  }

  .bubble-shooter-stage canvas,
  canvas[data-bubble-shooter-canvas] {
    width: 100%;
    border-width: 3px;
    border-radius: 13px;
  }

  .bubble-shooter-ammo {
    width: 100%;
    gap: 5px;
  }

  .bubble-shooter-ammo > div {
    min-height: 44px;
    padding: 5px 7px;
  }

  .bubble-shooter-ammo strong > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bubble-shooter-aim {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    grid-template-rows: auto 44px 44px;
    gap: 5px 6px;
    margin-top: 9px;
  }

  .bubble-shooter-fire {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .bubble-shooter-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 7px;
  }

  .bubble-shooter-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bubble-shooter-actions .play-button:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 340px) {
  .bubble-shooter-panel {
    padding-right: 5px;
    padding-left: 5px;
  }

  .bubble-shooter-level-picker small {
    font-size: 9px;
  }

  .bubble-shooter-ammo strong > span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble-shooter-panel canvas,
  .bubble-shooter-panel button {
    scroll-behavior: auto;
    transition: none;
  }
}

/* Fruit slice: focused 60-second game surface */
body[data-play-mode="fruitslice"] .play-hero {
  max-width: 680px;
  margin-bottom: 18px;
}

body[data-play-mode="fruitslice"] .play-kicker {
  color: #126a48;
}

.fruit-slice-panel {
  width: min(100%, 680px);
  margin-right: auto;
  margin-left: auto;
  padding: 22px 18px 24px;
  overflow: hidden;
  border: 1px solid #cfe3d7;
  background: linear-gradient(180deg, #fbfff9 0%, #f2faf4 100%);
  box-shadow: 0 18px 48px rgba(22, 88, 61, .1);
}

.fruit-slice-panel .play-panel-head,
.fruit-slice-level-picker,
.fruit-slice-summary,
.fruit-slice-instruction,
.fruit-slice-stage,
.fruit-slice-keyboard,
.fruit-slice-aim,
.fruit-slice-legend,
.fruit-slice-actions,
.fruit-slice-panel .play-status {
  width: min(100%, 600px);
  margin-right: auto;
  margin-left: auto;
}

.fruit-slice-panel .play-panel-head {
  margin-bottom: 12px;
}

.fruit-slice-panel .play-panel-head h2 {
  font-size: 19px;
  line-height: 1.35;
}

.fruit-slice-head-meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: #52685e;
  font-size: 11px;
  white-space: nowrap;
}

.fruit-slice-head-meta strong,
.fruit-slice-head-meta .play-progress {
  color: #315847;
  font-size: inherit;
  font-style: normal;
  font-weight: 800;
}

.fruit-slice-head-meta i {
  color: #92a39a;
  font-style: normal;
}

.fruit-slice-level-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.fruit-slice-level-picker button {
  min-width: 0;
  min-height: 54px;
  padding: 7px 6px;
  border: 1px solid #bfd7c8;
  border-radius: 12px;
  background: #fff;
  color: #173b2c;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
}

.fruit-slice-level-picker strong,
.fruit-slice-level-picker small {
  display: block;
}

.fruit-slice-level-picker strong {
  font-size: 13px;
}

.fruit-slice-level-picker small {
  margin-top: 3px;
  color: #567064;
  font-size: 10px;
}

.fruit-slice-level-picker button.is-active,
.fruit-slice-level-picker button[aria-pressed="true"] {
  border-color: #15764f;
  background: #e7f7ed;
  box-shadow: inset 0 0 0 1px #15764f;
}

.fruit-slice-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #d6e5db;
  border-radius: 12px;
  background: #fff;
}

.fruit-slice-summary > div {
  min-width: 0;
  padding: 8px 4px;
  border-right: 1px solid #dfeae2;
  text-align: center;
}

.fruit-slice-summary > div:last-child {
  border-right: 0;
}

.fruit-slice-summary span,
.fruit-slice-summary strong {
  display: block;
  overflow-wrap: anywhere;
}

.fruit-slice-summary span {
  color: #60736a;
  font-size: 10px;
}

.fruit-slice-summary strong {
  margin-top: 2px;
  color: #163e2d;
  font-size: 13px;
  line-height: 1.25;
}

.fruit-slice-instruction {
  margin-top: 0;
  margin-bottom: 9px;
  color: #40574d;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.fruit-slice-stage {
  overflow: hidden;
  border: 4px solid #173d30;
  border-radius: 18px;
  background: #0d2b22;
  box-shadow: 0 12px 28px rgba(13, 43, 34, .18);
}

.fruit-slice-stage canvas,
canvas[data-fruit-slice-canvas] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background: #102f26;
  touch-action: none;
  user-select: none;
}

.fruit-slice-keyboard {
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid #cfe0d5;
  border-radius: 12px;
  background: #fff;
}

.fruit-slice-keyboard > summary {
  display: list-item;
  min-height: 44px;
  padding: 8px 12px;
  color: #294b3c;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 28px;
  list-style-position: inside;
}

.fruit-slice-keyboard > summary::marker {
  color: #15764f;
}

.fruit-slice-keyboard[open] > summary {
  border-bottom: 1px solid #dce9e0;
  background: #f5fbf7;
}

.fruit-slice-keyboard .fruit-slice-aim {
  width: 100%;
  margin-top: 0;
  padding: 8px;
}

.fruit-slice-aim {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(142px, .7fr);
  gap: 8px;
  align-items: stretch;
  margin-top: 10px;
}

.fruit-slice-aim-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  min-width: 0;
  min-height: 52px;
  padding: 5px 9px;
  border: 1px solid #cfe0d5;
  border-radius: 12px;
  background: #fff;
  color: #294b3c;
  font-size: 11px;
  font-weight: 800;
}

.fruit-slice-aim-control output {
  color: #126a48;
  font-variant-numeric: tabular-nums;
}

.fruit-slice-aim-control input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: #15764f;
}

.fruit-slice-slice {
  min-height: 52px;
  padding: 8px 10px;
  border-color: #126a48;
  background: #126a48;
}

.fruit-slice-slice:hover {
  border-color: #0d583b;
  background: #0d583b;
}

.fruit-slice-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.fruit-slice-legend > span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 3px 5px;
  border: 1px solid #d5e3da;
  border-radius: 12px;
  background: #fff;
}

.fruit-slice-legend b,
.fruit-slice-legend small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fruit-slice-legend b {
  align-self: end;
  color: #203e32;
  font-size: 11px;
}

.fruit-slice-legend small {
  align-self: start;
  color: #62736b;
  font-size: 8px;
  line-height: 1.2;
}

.fruit-slice-legend-mark {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(22, 51, 39, .34);
  border-radius: 50%;
  font-style: normal;
  font-size: 17px;
  text-shadow: 0 1px 1px #fff;
}

.fruit-slice-legend-mark.is-watermelon {
  background: repeating-linear-gradient(90deg, #b9ef86 0 5px, #4ba95c 5px 9px);
}

.fruit-slice-legend-mark.is-orange {
  background-color: #ffc56c;
  background-image: radial-gradient(#bd6614 1px, transparent 1.5px);
  background-size: 7px 7px;
}

.fruit-slice-legend-mark.is-pineapple {
  border-radius: 45% 45% 38% 38%;
  background-color: #ffcf55;
  background-image: linear-gradient(45deg, transparent 44%, #aa751b 45% 52%, transparent 53%), linear-gradient(-45deg, transparent 44%, #aa751b 45% 52%, transparent 53%);
  background-size: 10px 10px;
}

.fruit-slice-legend-mark.is-kiwi {
  background: radial-gradient(circle, #f5f0bb 0 22%, #252b25 24% 29%, #8fb94a 31% 66%, #6f8d35 68%);
}

.fruit-slice-legend-mark.is-strawberry {
  border-radius: 52% 52% 62% 62% / 42% 42% 72% 72%;
  background-color: #ef6363;
  background-image: radial-gradient(#fff2a0 1px, transparent 1.5px);
  background-size: 8px 8px;
}

.fruit-slice-legend-mark.is-bomb {
  border-color: #111;
  background: repeating-conic-gradient(#111 0 12deg, #626262 12deg 24deg);
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.fruit-slice-legend > span.is-bomb {
  border-color: #d7c6c6;
  background: #fff8f8;
}

.fruit-slice-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.fruit-slice-actions .play-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 5px;
  font-size: 11px;
  line-height: 1.25;
}

.fruit-slice-panel button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.fruit-slice-panel .play-status {
  margin-top: 10px;
}

.fruit-slice-level-picker button:focus-visible,
.fruit-slice-keyboard > summary:focus-visible,
.fruit-slice-aim-control input[type="range"]:focus-visible,
.fruit-slice-aim .play-button:focus-visible,
.fruit-slice-actions .play-button:focus-visible {
  z-index: 5;
  outline: 3px solid #ffd93d;
  outline-offset: 3px;
}

@media (max-width: 520px) {
  body[data-play-mode="fruitslice"] .play-page {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  body[data-play-mode="fruitslice"] .play-breadcrumb {
    display: none;
  }

  body[data-play-mode="fruitslice"] .play-hero {
    margin-bottom: 10px;
  }

  body[data-play-mode="fruitslice"] .play-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body[data-play-mode="fruitslice"] .play-hero h1 {
    font-size: 28px;
  }

  body[data-play-mode="fruitslice"] .play-hero p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .fruit-slice-panel {
    padding: 14px 7px 18px;
    border-radius: 16px;
  }

  .fruit-slice-panel .play-panel-head,
  .fruit-slice-level-picker,
  .fruit-slice-summary,
  .fruit-slice-instruction,
  .fruit-slice-stage,
  .fruit-slice-keyboard,
  .fruit-slice-aim,
  .fruit-slice-legend,
  .fruit-slice-actions,
  .fruit-slice-panel .play-status {
    width: calc(100% - 10px);
  }

  .fruit-slice-panel .play-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
  }

  .fruit-slice-panel .play-panel-head h2 {
    font-size: 15px;
    line-height: 1.3;
  }

  .fruit-slice-head-meta {
    font-size: 10px;
  }

  .fruit-slice-level-picker {
    gap: 5px;
    margin-bottom: 7px;
  }

  .fruit-slice-level-picker button {
    min-height: 44px;
    padding: 5px 3px;
  }

  .fruit-slice-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 7px;
  }

  .fruit-slice-summary > div {
    padding: 7px 3px;
    border-bottom: 1px solid #dfeae2;
  }

  .fruit-slice-summary > div:nth-child(even) {
    border-right: 0;
  }

  .fruit-slice-summary > div:nth-child(n + 3) {
    border-bottom: 0;
  }

  .fruit-slice-summary strong {
    font-size: 12px;
  }

  .fruit-slice-instruction {
    margin-bottom: 7px;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
  }

  .fruit-slice-stage {
    border-width: 3px;
    border-radius: 13px;
  }

  .fruit-slice-keyboard {
    margin-top: 7px;
  }

  .fruit-slice-keyboard > summary {
    min-height: 44px;
    padding: 7px 10px;
  }

  .fruit-slice-aim {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }

  .fruit-slice-aim-control {
    min-height: 48px;
    padding: 3px 7px;
  }

  .fruit-slice-slice {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .fruit-slice-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 8px;
  }

  .fruit-slice-legend > span {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 44px;
    padding: 3px 4px;
  }

  .fruit-slice-legend > span.is-bomb {
    grid-column: 1 / -1;
  }

  .fruit-slice-legend-mark {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .fruit-slice-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fruit-slice-actions .play-button:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 340px) {
  .fruit-slice-panel {
    padding-right: 5px;
    padding-left: 5px;
  }

  .fruit-slice-level-picker small {
    font-size: 9px;
  }

  .fruit-slice-legend b {
    font-size: 11px;
  }

  .fruit-slice-legend small {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fruit-slice-panel canvas,
  .fruit-slice-panel button {
    scroll-behavior: auto;
    transition: none;
  }
}

/* Screw removal: compact layered-board puzzle surface */
body[data-play-mode="screwremoval"] .play-hero {
  max-width: 680px;
  margin-bottom: 18px;
}

body[data-play-mode="screwremoval"] .play-kicker {
  color: #7b4718;
}

.screw-removal-panel {
  width: min(100%, 680px);
  margin-right: auto;
  margin-left: auto;
  padding: 22px 18px 24px;
  overflow: hidden;
  border: 1px solid #dbc9ad;
  background: linear-gradient(180deg, #fffdf8 0%, #f8f2e8 100%);
  box-shadow: 0 18px 48px rgba(85, 57, 25, .11);
}

.screw-removal-panel .play-panel-head,
.screw-removal-level-picker,
.screw-removal-summary,
.screw-removal-box-section,
.screw-removal-instruction,
.screw-removal-board,
.screw-removal-rack-section,
.screw-removal-actions,
.screw-removal-panel .play-status,
.screw-removal-result {
  width: min(100%, 600px);
  margin-right: auto;
  margin-left: auto;
}

.screw-removal-panel .play-panel-head {
  margin-bottom: 12px;
}

.screw-removal-panel .play-panel-head h2 {
  font-size: 19px;
  line-height: 1.35;
}

.screw-removal-head-meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: #716252;
  font-size: 11px;
  white-space: nowrap;
}

.screw-removal-head-meta strong,
.screw-removal-head-meta .play-progress {
  color: #5e452b;
  font-size: inherit;
  font-style: normal;
  font-weight: 800;
}

.screw-removal-head-meta i {
  color: #a69889;
  font-style: normal;
}

.screw-removal-level-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.screw-removal-level-picker button {
  min-width: 0;
  min-height: 54px;
  padding: 7px 6px;
  border: 1px solid #d6c3a7;
  border-radius: 12px;
  background: #fff;
  color: #4a321d;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
}

.screw-removal-level-picker strong,
.screw-removal-level-picker small {
  display: block;
}

.screw-removal-level-picker strong {
  font-size: 13px;
}

.screw-removal-level-picker small {
  margin-top: 3px;
  color: #786550;
  font-size: 10px;
}

.screw-removal-level-picker button.is-active,
.screw-removal-level-picker button[aria-pressed="true"] {
  border-color: #9b622f;
  background: #fff3df;
  box-shadow: inset 0 0 0 1px #9b622f;
}

.screw-removal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #e0d3c0;
  border-radius: 12px;
  background: #fff;
}

.screw-removal-summary > div {
  min-width: 0;
  padding: 8px 4px;
  border-right: 1px solid #ebe1d4;
  text-align: center;
}

.screw-removal-summary > div:last-child {
  border-right: 0;
}

.screw-removal-summary span,
.screw-removal-summary strong {
  display: block;
  overflow-wrap: anywhere;
}

.screw-removal-summary span {
  color: #756656;
  font-size: 10px;
}

.screw-removal-summary strong {
  margin-top: 2px;
  color: #49321f;
  font-size: 13px;
  line-height: 1.25;
}

.screw-removal-box-section,
.screw-removal-rack-section {
  margin-bottom: 9px;
}

.screw-removal-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}

.screw-removal-row-head h3 {
  margin: 0;
  color: #48331f;
  font-size: 12px;
}

.screw-removal-row-head > span {
  color: #786a5c;
  font-size: 10px;
}

.screw-removal-row-head strong {
  color: #5a3e24;
  font-variant-numeric: tabular-nums;
}

.screw-removal-boxes {
  display: grid;
  grid-auto-columns: minmax(132px, 1fr);
  grid-auto-flow: column;
  gap: 6px;
  margin: 0;
  padding: 0 0 2px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.screw-removal-boxes > li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  min-width: 0;
  min-height: 50px;
  padding: 5px 7px;
  border: 1px solid #dfd4c5;
  border-radius: 11px;
  background: rgba(255, 255, 255, .86);
}

.screw-removal-boxes > li.is-active,
.screw-removal-boxes > .screw-removal-box,
.screw-removal-boxes > li[data-screw-removal-state="active"] {
  border-color: #a56a35;
  background: #fff9ee;
  box-shadow: inset 0 0 0 1px rgba(165, 106, 53, .28);
}

.screw-removal-boxes > li.is-complete,
.screw-removal-boxes > li[data-screw-removal-state="complete"] {
  opacity: .55;
}

.screw-removal-boxes b,
.screw-removal-boxes small,
.screw-removal-boxes strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.screw-removal-boxes b {
  align-self: end;
  color: #3d2e20;
  font-size: 11px;
}

.screw-removal-boxes small {
  align-self: start;
  color: #76695d;
  font-size: 8px;
  line-height: 1.2;
}

.screw-removal-boxes strong {
  grid-column: 3;
  grid-row: 1 / 3;
  padding-left: 5px;
  color: #594532;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.screw-removal-box-copy {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  min-width: 0;
  color: #493a2c;
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.screw-removal-swatch {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(29, 32, 36, .38);
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.screw-removal-swatch.is-a,
.screw-removal-screw.is-a,
.screw-removal-screw[data-screw-removal-symbol="A"],
.screw-removal-screw[data-symbol="A"],
.screw-removal-screw[data-screw-removal-pattern="dot"],
.screw-removal-screw[data-screw-pattern="dot"] {
  --screw-removal-color: #c93658;
  background-color: var(--screw-removal-color);
  background-image: radial-gradient(rgba(255, 255, 255, .85) 1.5px, transparent 2px);
  background-size: 8px 8px;
}

.screw-removal-swatch.is-b,
.screw-removal-screw.is-b,
.screw-removal-screw[data-screw-removal-symbol="B"],
.screw-removal-screw[data-symbol="B"],
.screw-removal-screw[data-screw-removal-pattern="stripe"],
.screw-removal-screw[data-screw-pattern="stripe"] {
  --screw-removal-color: #2868c7;
  background-color: var(--screw-removal-color);
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, .55) 5px 8px);
}

.screw-removal-swatch.is-c,
.screw-removal-screw.is-c,
.screw-removal-screw[data-screw-removal-symbol="C"],
.screw-removal-screw[data-symbol="C"],
.screw-removal-screw[data-screw-removal-pattern="cross"],
.screw-removal-screw[data-screw-pattern="cross"] {
  --screw-removal-color: #16845b;
  background-color: var(--screw-removal-color);
  background-image: linear-gradient(rgba(255, 255, 255, .46) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .46) 1px, transparent 1px);
  background-size: 8px 8px;
}

.screw-removal-swatch.is-d,
.screw-removal-screw.is-d,
.screw-removal-screw[data-screw-removal-symbol="D"],
.screw-removal-screw[data-symbol="D"],
.screw-removal-screw[data-screw-removal-pattern="ring"],
.screw-removal-screw[data-screw-pattern="ring"] {
  --screw-removal-color: #7b49b6;
  background-color: var(--screw-removal-color);
  background-image: radial-gradient(circle, transparent 0 3px, rgba(255, 255, 255, .65) 3px 5px, transparent 5px);
  background-size: 12px 12px;
}

.screw-removal-swatch.is-e,
.screw-removal-screw.is-e,
.screw-removal-screw[data-screw-removal-symbol="E"],
.screw-removal-screw[data-symbol="E"],
.screw-removal-screw[data-screw-removal-pattern="diamond"],
.screw-removal-screw[data-screw-pattern="diamond"] {
  --screw-removal-color: #b85a13;
  background-color: var(--screw-removal-color);
  background-image: linear-gradient(45deg, transparent 38%, rgba(255, 255, 255, .62) 39% 51%, transparent 52%), linear-gradient(-45deg, transparent 38%, rgba(255, 255, 255, .62) 39% 51%, transparent 52%);
  background-size: 11px 11px;
}

.screw-removal-instruction {
  margin-top: 0;
  margin-bottom: 8px;
  color: #655747;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.screw-removal-board {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(var(--screw-removal-grid-size, 12), minmax(0, 1fr));
  grid-template-rows: repeat(var(--screw-removal-grid-size, 12), minmax(0, 1fr));
  aspect-ratio: 1;
  margin-bottom: 10px;
  overflow: hidden;
  border: 4px solid #413526;
  border-radius: 18px;
  background-color: #d9c6a3;
  background-image: linear-gradient(rgba(68, 49, 28, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(68, 49, 28, .055) 1px, transparent 1px), linear-gradient(145deg, #eadcbe 0%, #ccb58e 100%);
  background-size: calc(100% / var(--screw-removal-grid-size, 12)) calc(100% / var(--screw-removal-grid-size, 12)), calc(100% / var(--screw-removal-grid-size, 12)) calc(100% / var(--screw-removal-grid-size, 12)), 100% 100%;
  box-shadow: inset 0 0 24px rgba(69, 46, 21, .2), 0 10px 24px rgba(73, 50, 26, .16);
}

.screw-removal-board > p {
  z-index: 2;
  grid-column: 2 / -2;
  grid-row: 6 / span 2;
  align-self: center;
  margin: 0;
  color: #5e4b36;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.screw-removal-loading {
  z-index: 1;
  display: contents;
}

.screw-removal-loading > span,
.screw-removal-plate,
[data-screw-removal-plate] {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 2px solid #624b31;
  border-radius: 10px;
  background-color: #b47c42;
  background-image: repeating-linear-gradient(3deg, transparent 0 8px, rgba(73, 43, 17, .1) 8px 10px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 4px 8px rgba(48, 31, 14, .2);
}

.screw-removal-loading > span:nth-child(1) {
  grid-column: 2 / span 8;
  grid-row: 2 / span 3;
  transform: rotate(-3deg);
}

.screw-removal-loading > span:nth-child(2) {
  grid-column: 4 / span 7;
  grid-row: 4 / span 3;
  background-color: #8f9d86;
  transform: rotate(4deg);
}

.screw-removal-loading > span:nth-child(3) {
  grid-column: 2 / span 7;
  grid-row: 7 / span 3;
  background-color: #c18566;
  transform: rotate(2deg);
}

.screw-removal-loading > span:nth-child(4) {
  grid-column: 6 / span 5;
  grid-row: 8 / span 3;
  background-color: #8c826f;
  transform: rotate(-4deg);
}

.screw-removal-plate,
[data-screw-removal-plate] {
  grid-column: var(--screw-column, var(--screw-removal-column, 1)) / span var(--screw-column-span, var(--screw-removal-column-span, 1));
  grid-row: var(--screw-row, var(--screw-removal-row, 1)) / span var(--screw-row-span, var(--screw-removal-row-span, 1));
  z-index: var(--screw-layer, var(--screw-removal-layer, 1));
  transition: opacity .24s ease, transform .24s ease;
}

.screw-removal-plate.is-removed,
.screw-removal-plate.is-cleared,
[data-screw-removal-plate][data-screw-removal-state="removed"] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20%) rotate(5deg);
}

.screw-removal-screw {
  z-index: calc(50 + var(--screw-layer, var(--screw-removal-layer, 1)));
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 3px solid #2e3135;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font: 900 14px/1 system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
  box-shadow: inset 0 2px rgba(255, 255, 255, .46), inset 0 -3px rgba(0, 0, 0, .18), 0 3px 6px rgba(42, 30, 18, .3);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
  touch-action: manipulation;
}

.screw-removal-board > .screw-removal-screw {
  grid-column: var(--screw-column, var(--screw-removal-column, 1));
  grid-row: var(--screw-row, var(--screw-removal-row, 1));
  align-self: center;
  justify-self: center;
}

.screw-removal-plate > .screw-removal-screw,
[data-screw-removal-plate] > .screw-removal-screw {
  position: absolute;
  top: var(--screw-y, var(--screw-removal-y, 50%));
  left: var(--screw-x, var(--screw-removal-x, 50%));
  transform: translate(-50%, -50%);
}

.screw-removal-screw.is-open,
.screw-removal-screw[data-screw-removal-state="open"] {
  filter: saturate(1.08);
}

.screw-removal-screw.is-open:hover,
.screw-removal-screw[data-screw-removal-state="open"]:hover {
  transform: translateY(-1px) scale(1.04);
}

.screw-removal-plate > .screw-removal-screw.is-open:hover,
[data-screw-removal-plate] > .screw-removal-screw.is-open:hover {
  transform: translate(-50%, calc(-50% - 1px)) scale(1.04);
}

.screw-removal-screw.is-blocked,
.screw-removal-screw:disabled,
.screw-removal-screw[aria-disabled="true"],
.screw-removal-screw[data-screw-removal-state="blocked"] {
  cursor: not-allowed;
  filter: grayscale(.55) brightness(.78);
  opacity: .58;
}

.screw-removal-screw.is-removed,
.screw-removal-screw[data-screw-removal-state="removed"] {
  opacity: 0;
  pointer-events: none;
  transform: scale(.3) rotate(90deg);
}

.screw-removal-screw.is-hint,
.screw-removal-screw[data-screw-removal-state="hint"] {
  outline: 4px solid #ffe05d;
  outline-offset: 3px;
  animation: screw-removal-hint 1s ease-in-out infinite alternate;
}

.screw-removal-screw:focus-visible,
.screw-removal-level-picker button:focus-visible,
.screw-removal-actions .play-button:focus-visible {
  z-index: 100;
  outline: 3px solid #ffd93d;
  outline-offset: 3px;
}

.screw-removal-rack-section {
  padding: 7px 9px 9px;
  border: 1px solid #ddcfbb;
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
}

.screw-removal-rack {
  display: grid;
  grid-template-columns: repeat(var(--screw-removal-rack-size, 5), minmax(44px, 1fr));
  gap: 7px;
}

.screw-removal-rack > * {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px dashed #b7a58d;
  border-radius: 10px;
  background: #f4eee4;
  color: #67533d;
  font-size: 12px;
  font-weight: 900;
}

.screw-removal-rack > .screw-removal-screw {
  width: 44px;
  border-style: solid;
}

.screw-removal-rack.is-full,
.screw-removal-rack[data-screw-removal-state="full"] {
  border-radius: 10px;
  outline: 3px solid #c73636;
  outline-offset: 2px;
}

.screw-removal-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.screw-removal-actions .play-button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 5px;
  font-size: 11px;
  line-height: 1.25;
}

.screw-removal-actions [hidden] {
  display: none !important;
}

.screw-removal-panel button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.screw-removal-panel .play-status {
  margin-top: 9px;
}

.screw-removal-result {
  margin-top: 9px;
  padding: 11px 12px;
  border: 1px solid #d6c4a9;
  border-radius: 12px;
  background: #fff8e9;
  color: #4b3824;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.screw-removal-result[hidden] {
  display: none;
}

@keyframes screw-removal-hint {
  from { filter: brightness(1); }
  to { filter: brightness(1.2); }
}

@media (max-width: 520px) {
  body[data-play-mode="screwremoval"] .play-page {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  body[data-play-mode="screwremoval"] .play-breadcrumb {
    display: none;
  }

  body[data-play-mode="screwremoval"] .play-hero {
    margin-bottom: 10px;
  }

  body[data-play-mode="screwremoval"] .play-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  body[data-play-mode="screwremoval"] .play-hero h1 {
    font-size: 28px;
  }

  body[data-play-mode="screwremoval"] .play-hero p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
  }

  .screw-removal-panel {
    padding: 14px 7px 18px;
    border-radius: 16px;
  }

  .screw-removal-panel .play-panel-head,
  .screw-removal-level-picker,
  .screw-removal-summary,
  .screw-removal-box-section,
  .screw-removal-instruction,
  .screw-removal-board,
  .screw-removal-rack-section,
  .screw-removal-actions,
  .screw-removal-panel .play-status,
  .screw-removal-result {
    width: calc(100% - 10px);
  }

  .screw-removal-panel .play-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
  }

  .screw-removal-panel .play-panel-head h2 {
    font-size: 15px;
    line-height: 1.3;
  }

  .screw-removal-head-meta {
    font-size: 10px;
  }

  .screw-removal-level-picker {
    gap: 5px;
    margin-bottom: 7px;
  }

  .screw-removal-level-picker button {
    min-height: 44px;
    padding: 5px 3px;
  }

  .screw-removal-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 7px;
  }

  .screw-removal-summary > div {
    padding: 7px 3px;
    border-bottom: 1px solid #ebe1d4;
  }

  .screw-removal-summary > div:nth-child(even) {
    border-right: 0;
  }

  .screw-removal-summary > div:nth-child(n + 3) {
    border-bottom: 0;
  }

  .screw-removal-summary strong {
    font-size: 12px;
  }

  .screw-removal-boxes {
    grid-auto-columns: minmax(126px, 1fr);
  }

  .screw-removal-instruction {
    margin-bottom: 7px;
    font-size: 10px;
    line-height: 1.4;
    text-align: left;
  }

  .screw-removal-board {
    border-width: 3px;
    border-radius: 13px;
  }

  .screw-removal-screw {
    width: 44px;
    height: 44px;
    transform: scale(.88);
  }

  .screw-removal-plate > .screw-removal-screw,
  [data-screw-removal-plate] > .screw-removal-screw {
    transform: translate(-50%, -50%) scale(.88);
  }

  .screw-removal-rack-section {
    padding: 6px 7px 8px;
  }

  .screw-removal-rack {
    gap: 4px;
  }

  .screw-removal-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 340px) {
  .screw-removal-panel {
    padding-right: 5px;
    padding-left: 5px;
  }

  .screw-removal-level-picker small {
    font-size: 9px;
  }

  .screw-removal-boxes {
    grid-auto-columns: minmax(118px, 1fr);
  }

  .screw-removal-rack {
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screw-removal-plate,
  [data-screw-removal-plate],
  .screw-removal-screw,
  .screw-removal-panel button {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}

/* Tower stack game: isolated code-native stage and compact controls. */
body[data-play-mode="towerstack"] .play-hero {
  max-width: 700px;
  margin-bottom: 18px;
}

body[data-play-mode="towerstack"] .play-kicker {
  color: #17635f;
}

.tower-stack-panel {
  --tower-stack-ink: #11263f;
  --tower-stack-sky-top: #8fd5ed;
  --tower-stack-sky-bottom: #edf8f3;
  --tower-stack-floor-a: #ffb52e;
  --tower-stack-floor-b: #f4734d;
  --tower-stack-floor-c: #e94d74;
  width: min(100%, 700px);
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid #c7d9df;
  background: #f7fbf8;
  color: var(--tower-stack-ink);
}

.tower-stack-panel .play-panel-head,
.tower-stack-level-picker,
.tower-stack-summary,
.tower-stack-instruction,
.tower-stack-controls,
.tower-stack-panel .play-status,
.tower-stack-result {
  margin-right: 18px;
  margin-left: 18px;
}

.tower-stack-panel .play-panel-head {
  align-items: flex-start;
  padding-top: 18px;
}

.tower-stack-panel .play-panel-head h2 {
  max-width: 560px;
  margin: 0;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.25;
}

.tower-stack-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #466073;
  font-size: 12px;
  white-space: nowrap;
}

.tower-stack-head-meta strong,
.tower-stack-head-meta .play-progress {
  color: var(--tower-stack-ink);
  font-style: normal;
  font-weight: 800;
}

.tower-stack-head-meta i {
  color: #89a0ad;
  font-style: normal;
}

.tower-stack-level-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.tower-stack-level-picker button {
  min-height: 58px;
  padding: 9px 8px;
  border: 1px solid #b9cdd5;
  border-radius: 12px;
  background: #fff;
  color: var(--tower-stack-ink);
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.tower-stack-level-picker strong,
.tower-stack-level-picker small {
  display: block;
}

.tower-stack-level-picker strong {
  font-size: 14px;
  line-height: 1.2;
}

.tower-stack-level-picker small {
  margin-top: 4px;
  color: #607788;
  font-size: 11px;
  line-height: 1.3;
}

.tower-stack-level-picker button.is-active,
.tower-stack-level-picker button[aria-pressed="true"] {
  border-color: #137b72;
  background: #e7f7ef;
  box-shadow: inset 0 0 0 1px #137b72;
}

.tower-stack-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #c5d6dc;
  border-radius: 13px;
  background: #fff;
}

.tower-stack-summary > div {
  min-width: 0;
  padding: 10px 8px;
  border-right: 1px solid #dce7e9;
  text-align: center;
}

.tower-stack-summary > div:last-child {
  border-right: 0;
}

.tower-stack-summary span,
.tower-stack-summary strong,
.tower-stack-summary b,
.tower-stack-summary small {
  display: block;
  min-width: 0;
}

.tower-stack-summary span {
  margin-bottom: 3px;
  color: #607685;
  font-size: 11px;
  font-weight: 700;
}

.tower-stack-summary strong {
  color: var(--tower-stack-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.tower-stack-summary strong b,
.tower-stack-summary strong small {
  display: inline;
  font: inherit;
}

.tower-stack-summary strong small {
  color: #657b87;
}

.tower-stack-instruction {
  margin-top: 12px;
  margin-bottom: 9px;
  color: #3f596a;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.tower-stack-stage {
  position: relative;
  width: 100%;
  min-height: clamp(360px, 69vw, 560px);
  overflow: hidden;
  border-top: 1px solid #bdd7df;
  border-bottom: 1px solid #9cb7bb;
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.88) 0 5%, transparent 5.5%),
    linear-gradient(180deg, var(--tower-stack-sky-top) 0%, var(--tower-stack-sky-bottom) 69%, #cdddbd 69%, #a9bf92 100%);
  isolation: isolate;
  touch-action: manipulation;
}

.tower-stack-stage::before {
  position: absolute;
  z-index: 0;
  right: 8%;
  top: 8%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 232, 126, .92);
  box-shadow: 0 0 0 12px rgba(255, 239, 153, .2);
  content: "";
}

.tower-stack-stage::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 11%;
  left: 0;
  height: 25%;
  background: rgba(70, 98, 113, .34);
  clip-path: polygon(0 100%, 0 56%, 7% 56%, 7% 34%, 16% 34%, 16% 68%, 23% 68%, 23% 18%, 34% 18%, 34% 49%, 42% 49%, 42% 28%, 52% 28%, 52% 63%, 61% 63%, 61% 9%, 70% 9%, 70% 43%, 79% 43%, 79% 24%, 88% 24%, 88% 58%, 95% 58%, 95% 38%, 100% 38%, 100% 100%);
  content: "";
  pointer-events: none;
}

.tower-stack-stage canvas {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: 0;
}

.tower-stack-skyline {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 11%;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 26%;
  padding: 0 3%;
  opacity: .44;
  pointer-events: none;
}

.tower-stack-skyline span {
  position: relative;
  width: 12%;
  height: 42%;
  border-radius: 4px 4px 0 0;
  background: #587485;
  box-shadow: inset 8px 0 rgba(255,255,255,.08);
}

.tower-stack-skyline span:nth-child(2) { height: 72%; }
.tower-stack-skyline span:nth-child(3) { height: 54%; }
.tower-stack-skyline span:nth-child(4) { height: 86%; }
.tower-stack-skyline span:nth-child(5) { height: 64%; }
.tower-stack-skyline span:nth-child(6) { height: 48%; }

.tower-stack-skyline span::after {
  position: absolute;
  inset: 9px 22%;
  background: repeating-linear-gradient(180deg, rgba(255,244,176,.8) 0 4px, transparent 4px 10px);
  content: "";
}

.tower-stack-ground {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 9%;
  left: 0;
  height: 4%;
  background: #536c55;
  box-shadow: 0 7px 0 #354a3d;
}

.tower-stack-tower {
  position: absolute;
  z-index: 3;
  bottom: 13%;
  left: 50%;
  width: min(50%, 300px);
  height: 72%;
  transform: translateX(-50%);
  pointer-events: none;
}

.tower-stack-floor,
[data-tower-stack-floor] {
  position: absolute;
  z-index: 3;
  bottom: calc(13% + var(--tower-level, var(--tower-stack-level, 0)) * 21px);
  left: calc(var(--tower-left, 0) * .1%);
  width: calc(var(--tower-width, 1000) * .1%);
  min-width: 2px;
  height: 20px;
  border: 1px solid rgba(75, 45, 50, .42);
  border-radius: 4px;
  background: linear-gradient(180deg, hsl(var(--tower-hue, 34) 96% 67%), hsl(var(--tower-hue, 14) 82% 57%));
  box-shadow: inset 0 3px rgba(255,255,255,.28), 0 3px 4px rgba(33,48,58,.2);
  transform: translateX(var(--tower-stack-offset, 0));
  transition: left .1s linear, width .16s ease, transform .1s linear;
}

.tower-stack-tower .tower-stack-floor,
.tower-stack-tower [data-tower-stack-floor] {
  bottom: calc(var(--tower-level, var(--tower-stack-level, 0)) * 21px);
}

.tower-stack-tower .tower-stack-floor:nth-child(3n + 1),
.tower-stack-tower [data-tower-stack-floor]:nth-child(3n + 1) {
  background: linear-gradient(180deg, #ffd05c, var(--tower-stack-floor-a));
}

.tower-stack-tower .tower-stack-floor:nth-child(3n + 2),
.tower-stack-tower [data-tower-stack-floor]:nth-child(3n + 2) {
  background: linear-gradient(180deg, #ff9161, var(--tower-stack-floor-b));
}

.tower-stack-tower .tower-stack-floor:nth-child(3n),
.tower-stack-tower [data-tower-stack-floor]:nth-child(3n) {
  background: linear-gradient(180deg, #fa6d95, var(--tower-stack-floor-c));
}

.tower-stack-floor.is-base,
[data-tower-stack-floor][data-tower-stack-state="base"] {
  bottom: 13%;
  height: 22px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #3c6f86, #244c63);
}


.tower-stack-tower .tower-stack-floor.is-base,
.tower-stack-tower [data-tower-stack-floor][data-tower-stack-state="base"] {
  bottom: 0;
  left: 0;
}

.tower-stack-floor.is-fixed,
[data-tower-stack-floor][data-tower-stack-state="fixed"] {
  filter: saturate(.96);
}

.tower-stack-floor.is-moving,
[data-tower-stack-floor][data-tower-stack-state="moving"] {
  background: linear-gradient(180deg, #ffe06e, #f5a524);
  animation: tower-stack-preview 2.2s ease-in-out infinite alternate;
}

.tower-stack-tower .tower-stack-floor.is-moving,
.tower-stack-tower [data-tower-stack-floor][data-tower-stack-state="moving"] {
  bottom: 34px;
}

.tower-stack-stage.is-playing .tower-stack-floor.is-moving,
.tower-stack-stage[data-tower-stack-state="playing"] .tower-stack-floor.is-moving,
.tower-stack-floor.is-moving[style],
[data-tower-stack-floor][data-tower-stack-state="moving"][style] {
  animation: none;
}

.tower-stack-floor.is-perfect,
[data-tower-stack-floor][data-tower-stack-state="perfect"] {
  filter: saturate(1.12) brightness(1.08);
  box-shadow: inset 0 3px rgba(255,255,255,.35), 0 0 0 3px rgba(255,220,74,.34), 0 4px 6px rgba(33,48,58,.24);
}

.tower-stack-controls {
  margin-top: 14px;
  margin-bottom: 10px;
}

.tower-stack-drop {
  width: 100%;
  min-height: 50px;
  font-size: 16px;
  font-weight: 900;
}

.tower-stack-secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.tower-stack-secondary-actions .play-button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 7px;
  font-size: 12px;
}

.tower-stack-secondary-actions [hidden] {
  display: none !important;
}

.tower-stack-panel button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.tower-stack-level-picker button:focus-visible,
.tower-stack-controls .play-button:focus-visible {
  outline: 3px solid #0b637c;
  outline-offset: 3px;
}

.tower-stack-panel .play-status {
  min-height: 1.5em;
  margin-top: 0;
  margin-bottom: 16px;
  color: #385467;
  text-align: center;
}

.tower-stack-result {
  padding: 13px 15px;
  border: 1px solid #b7d7c9;
  border-radius: 12px;
  background: #e9f8ef;
  color: #153d37;
  text-align: center;
}

.tower-stack-result[hidden] {
  display: none;
}

@keyframes tower-stack-preview {
  from { transform: translateX(-38%); }
  to { transform: translateX(38%); }
}

@media (max-width: 640px) {
  .tower-stack-panel .play-panel-head,
  .tower-stack-level-picker,
  .tower-stack-summary,
  .tower-stack-instruction,
  .tower-stack-controls,
  .tower-stack-panel .play-status,
  .tower-stack-result {
    margin-right: 10px;
    margin-left: 10px;
  }

  .tower-stack-panel .play-panel-head {
    display: block;
    padding-top: 14px;
  }

  .tower-stack-head-meta {
    justify-content: flex-start;
    margin-top: 7px;
  }

  .tower-stack-level-picker {
    gap: 5px;
    margin-top: 10px;
  }

  .tower-stack-level-picker button {
    min-height: 54px;
    padding: 8px 4px;
  }

  .tower-stack-level-picker small {
    font-size: 10px;
  }

  .tower-stack-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tower-stack-summary > div:nth-child(2) {
    border-right: 0;
  }

  .tower-stack-summary > div:nth-child(-n + 2) {
    border-bottom: 1px solid #dce7e9;
  }

  .tower-stack-stage {
    min-height: clamp(370px, 112vw, 520px);
  }

  .tower-stack-tower {
    width: min(62%, 270px);
  }

  .tower-stack-secondary-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .tower-stack-level-picker strong {
    font-size: 12px;
  }

  .tower-stack-level-picker small {
    font-size: 9px;
  }

  .tower-stack-summary strong {
    font-size: 13px;
  }

  .tower-stack-instruction {
    font-size: 12px;
    text-align: left;
  }

  .tower-stack-secondary-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tower-stack-floor,
  [data-tower-stack-floor],
  .tower-stack-level-picker button,
  .tower-stack-panel button {
    transition: none;
    animation: none;
  }
}

/* Idle factory isolated surface */
.idle-factory-panel {
  --idle-factory-ink: #173f46;
  --idle-factory-muted: #5b6f73;
  --idle-factory-line: #c9d9d5;
  --idle-factory-soft: #eef7f3;
  --idle-factory-accent: #176b61;
  --idle-factory-warm: #f5b942;
  overflow: hidden;
  border-color: #bed4ce;
  background: linear-gradient(180deg, #fbfffd 0%, #f1f8f5 100%);
  color: var(--idle-factory-ink);
}

.idle-factory-panel .play-panel-head {
  align-items: flex-start;
}

.idle-factory-head-meta {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid #b7d6ce;
  border-radius: 999px;
  background: #e7f5f0;
  color: #15584f;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.idle-factory-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 18px 0;
  border: 1px solid var(--idle-factory-line);
  border-radius: 14px;
  background: #fff;
}

.idle-factory-summary > div {
  min-width: 0;
  padding: 13px 10px;
  text-align: center;
}

.idle-factory-summary > div + div {
  border-left: 1px solid #dde8e5;
}

.idle-factory-summary span,
.idle-factory-summary strong {
  display: block;
}

.idle-factory-summary span {
  margin-bottom: 4px;
  color: var(--idle-factory-muted);
  font-size: 11px;
  font-weight: 700;
}

.idle-factory-summary strong {
  overflow-wrap: anywhere;
  color: var(--idle-factory-ink);
  font-size: 15px;
  font-weight: 900;
}

.idle-factory-offline {
  margin: 10px 18px 0;
  padding: 10px 12px;
  border: 1px solid #d3c17f;
  border-radius: 11px;
  background: #fff8dc;
  color: #5f4b0d;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.idle-factory-offline[hidden],
.idle-factory-actions [hidden] {
  display: none !important;
}

.idle-factory-instruction {
  max-width: 760px;
  margin: 15px auto 11px;
  padding: 0 18px;
  color: #405d62;
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}

.idle-factory-conveyor {
  position: relative;
  margin: 0 18px;
  padding: 20px 18px 42px;
  overflow: hidden;
  border: 1px solid #b9cec8;
  border-radius: 16px;
  background:
    repeating-linear-gradient(0deg, rgba(24,83,76,.04) 0 1px, transparent 1px 22px),
    #e8f2ef;
}

.idle-factory-conveyor::before {
  position: absolute;
  right: 6%;
  bottom: 22px;
  left: 6%;
  height: 10px;
  border-top: 3px solid #527069;
  border-bottom: 3px solid #527069;
  background: repeating-linear-gradient(90deg, #76928b 0 12px, #d8e4e0 12px 24px);
  content: "";
}

.idle-factory-conveyor ol {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.idle-factory-conveyor li {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 94px;
  padding: 12px 7px 10px;
  border: 2px solid #496b67;
  border-radius: 13px 13px 6px 6px;
  box-shadow: inset 0 4px rgba(255,255,255,.42), 0 5px 0 rgba(44,77,72,.14);
  color: #173b3d;
}

.idle-factory-conveyor li::after {
  position: absolute;
  right: -11px;
  bottom: -31px;
  width: 22px;
  height: 18px;
  border-right: 4px solid #405f5a;
  border-bottom: 4px solid #405f5a;
  transform: rotate(-45deg);
  content: "";
}

.idle-factory-conveyor li:last-child::after {
  display: none;
}

.idle-factory-conveyor li.is-collector {
  background: radial-gradient(circle at 5px 5px, rgba(17,68,76,.18) 0 2px, transparent 2.5px) 0 0 / 12px 12px, #bfe0dc;
}

.idle-factory-conveyor li.is-processor {
  background: repeating-linear-gradient(135deg, rgba(79,61,20,.14) 0 6px, transparent 6px 13px), #f2d98c;
}

.idle-factory-conveyor li.is-assembler {
  background: repeating-linear-gradient(0deg, rgba(51,65,96,.14) 0 3px, transparent 3px 10px), #c9d5ee;
}

.idle-factory-conveyor li.is-shipping {
  background: repeating-linear-gradient(90deg, rgba(90,50,49,.13) 0 5px, transparent 5px 12px), #e9c4ba;
}

.idle-factory-conveyor i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.idle-factory-conveyor li span {
  font-size: 13px;
  font-weight: 900;
}

.idle-factory-package {
  position: absolute;
  z-index: 3;
  bottom: 17px;
  left: 7%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 29px;
  border: 2px solid #704a1e;
  border-radius: 5px;
  background: #f1bd62;
  color: #50310e;
  font-size: 10px;
  font-weight: 900;
}

.idle-factory-panel[data-idle-factory-state="running"] .idle-factory-package {
  animation: idle-factory-package-flow 5s linear infinite;
}

.idle-factory-stations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 18px 0;
}

.idle-factory-stations > button {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  min-width: 0;
  min-height: 137px;
  padding: 12px;
  border: 2px solid #b9ccc7;
  border-radius: 13px;
  background: #fff;
  color: var(--idle-factory-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.idle-factory-stations > button:hover:not(:disabled) {
  border-color: #40887d;
  background: #f5fcf9;
  transform: translateY(-1px);
}

.idle-factory-stations > button.is-bottleneck,
.idle-factory-stations > button[data-idle-factory-bottleneck="true"] {
  border-color: #9b6714;
  box-shadow: inset 0 0 0 2px #ffe29b;
}

.idle-factory-stations > button.is-bottleneck::after,
.idle-factory-stations > button[data-idle-factory-bottleneck="true"]::after {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 2px 5px;
  border: 1px solid #8a5e13;
  border-radius: 5px;
  background: #fff2bd;
  color: #65450c;
  content: "병목";
  font-size: 9px;
  font-weight: 900;
}

.idle-factory-stations > button:disabled {
  cursor: not-allowed;
  opacity: .56;
}

.idle-factory-station-mark {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid #355d59;
  border-radius: 9px;
  color: #173f46;
  font-size: 13px;
  font-weight: 900;
}

.idle-factory-station-mark.is-collector { background: radial-gradient(circle at 4px 4px, #5e8c86 0 1px, transparent 1.5px) 0 0 / 8px 8px, #c9e8e2; }
.idle-factory-station-mark.is-processor { background: repeating-linear-gradient(135deg, #e0c36e 0 4px, #f6e5aa 4px 8px); }
.idle-factory-station-mark.is-assembler { background: repeating-linear-gradient(0deg, #aab9d8 0 3px, #dce4f3 3px 7px); }
.idle-factory-station-mark.is-shipping { background: repeating-linear-gradient(90deg, #d9a99f 0 4px, #f0d1cb 4px 8px); }

.idle-factory-stations > button > strong {
  align-self: center;
  padding-right: 34px;
  font-size: 14px;
  font-weight: 900;
}

.idle-factory-stations > button > span:not(.idle-factory-station-mark) {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding-top: 5px;
  border-top: 1px solid #e3ece9;
  color: var(--idle-factory-muted);
  font-size: 11px;
}

.idle-factory-stations > button b {
  color: #244c4d;
  font-weight: 900;
  text-align: right;
}

.idle-factory-manual-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 18px 0;
  padding: 10px;
  border: 1px solid #ceddd9;
  border-radius: 12px;
  background: #fff;
}

.idle-factory-manual-row .play-button {
  flex: 0 0 auto;
  min-height: 44px;
}

.idle-factory-manual-row small {
  color: var(--idle-factory-muted);
  font-size: 11px;
  line-height: 1.45;
}

.idle-factory-daily {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 18px 0;
  padding: 13px 14px;
  border: 2px solid #d9c478;
  border-radius: 13px;
  background: #fff9df;
}

.idle-factory-daily > div {
  display: grid;
  gap: 2px;
}

.idle-factory-daily span,
.idle-factory-daily small {
  color: #6d5b1c;
  font-size: 11px;
  font-weight: 800;
}

.idle-factory-daily strong {
  color: #4c3d0d;
  font-size: 14px;
}

.idle-factory-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 18px 10px;
}

.idle-factory-actions .play-button {
  min-width: 0;
  min-height: 43px;
}

.idle-factory-panel button:focus-visible {
  outline: 3px solid #125f78;
  outline-offset: 3px;
}

.idle-factory-panel .play-status {
  min-height: 1.5em;
  margin: 0 18px 16px;
  color: #355b60;
  text-align: center;
}

@keyframes idle-factory-package-flow {
  from { left: 7%; }
  to { left: calc(93% - 54px); }
}

@media (max-width: 760px) {
  .idle-factory-summary,
  .idle-factory-stations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .idle-factory-summary > div + div {
    border-left: 0;
  }

  .idle-factory-summary > div:nth-child(even) {
    border-left: 1px solid #dde8e5;
  }

  .idle-factory-summary > div:nth-child(n + 3) {
    border-top: 1px solid #dde8e5;
  }

  .idle-factory-conveyor {
    padding-right: 12px;
    padding-left: 12px;
  }

  .idle-factory-conveyor ol {
    gap: 6px;
  }

  .idle-factory-conveyor li {
    min-height: 80px;
    padding-right: 3px;
    padding-left: 3px;
  }

  .idle-factory-conveyor li span {
    font-size: 11px;
  }
}

@media (max-width: 520px) {
  .idle-factory-panel .play-panel-head,
  .idle-factory-summary,
  .idle-factory-offline,
  .idle-factory-conveyor,
  .idle-factory-stations,
  .idle-factory-manual-row,
  .idle-factory-daily,
  .idle-factory-actions,
  .idle-factory-panel .play-status {
    margin-right: 10px;
    margin-left: 10px;
  }

  .idle-factory-panel .play-panel-head {
    display: block;
    padding-top: 14px;
  }

  .idle-factory-head-meta {
    margin-top: 7px;
  }

  .idle-factory-instruction {
    padding-right: 10px;
    padding-left: 10px;
    text-align: left;
  }

  .idle-factory-conveyor li::after {
    display: none;
  }

  .idle-factory-manual-row,
  .idle-factory-daily {
    align-items: stretch;
    flex-direction: column;
  }

  .idle-factory-manual-row .play-button,
  .idle-factory-daily .play-button {
    width: 100%;
  }
}

@media (max-width: 350px) {
  .idle-factory-stations {
    grid-template-columns: 1fr;
  }

  .idle-factory-conveyor li span {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .idle-factory-panel *,
  .idle-factory-panel *::before,
  .idle-factory-panel *::after {
    scroll-behavior: auto;
    transition: none !important;
    animation: none !important;
  }
}