/* Mini games — list page and shared game stage */

.game-list {
  width: min(880px, 100%);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

@keyframes gameCardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 18px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  animation: gameCardIn var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 8) * 90ms);
  animation-play-state: paused;
}

body.app-ready .game-card {
  animation-play-state: running;
}

/* Each game tints itself by shifting the site hue */
.game-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: hsla(calc(var(--theme-h) + var(--accent-shift, 0)), var(--theme-s), var(--theme-l), 0.16);
  transition: transform var(--dur-slow) var(--ease-out), background var(--dur-base) ease;
  pointer-events: none;
}

.game-card:hover {
  transform: translateY(-5px);
  border-color: hsla(calc(var(--theme-h) + var(--accent-shift, 0)), var(--theme-s), var(--theme-l), 0.45);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14);
}

.game-card:hover::after {
  transform: scale(1.5);
}

.game-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: hsl(calc(var(--theme-h) + var(--accent-shift, 0)), var(--theme-s), var(--theme-l));
  background: hsla(calc(var(--theme-h) + var(--accent-shift, 0)), var(--theme-s), var(--theme-l), 0.14);
  border: 1px solid hsla(calc(var(--theme-h) + var(--accent-shift, 0)), var(--theme-s), var(--theme-l), 0.24);
}

.game-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.game-name {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.game-en {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--faint);
}

.game-desc {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-soft);
}

.game-controls {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--chip-bg);
  display: inline-block;
}

.game-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: hsl(calc(var(--theme-h) + var(--accent-shift, 0)), 45%, 42%);
}

:root[data-scheme="dark"] .game-play {
  color: hsl(calc(var(--theme-h) + var(--accent-shift, 0)), 60%, 72%);
}

.game-play svg {
  width: 15px;
  height: 15px;
  display: block;
  transition: transform var(--dur-base) var(--ease-spring);
}

.game-card:hover .game-play svg {
  transform: translateX(5px);
}

/* ----------------------------------------
   Game stage
   ---------------------------------------- */

.game-stage {
  position: relative;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.game-hud {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.hud-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 62px;
}

.hud-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}

.hud-value {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: hsl(calc(var(--theme-h) + var(--accent-shift, 0)), 45%, 42%);
  line-height: 1.1;
}

:root[data-scheme="dark"] .hud-value {
  color: hsl(calc(var(--theme-h) + var(--accent-shift, 0)), 60%, 74%);
}

.hud-actions {
  margin-left: auto;
}

.game-btn {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text-soft);
  background: var(--chip-bg);
  border: 1px solid var(--line);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.game-btn:hover {
  transform: translateY(-2px);
  color: hsl(var(--theme-h), 45%, 38%);
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.14);
  border-color: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.35);
}

:root[data-scheme="dark"] .game-btn:hover {
  color: hsl(var(--theme-h), 60%, 74%);
}

.game-btn.primary {
  color: #fff;
  background: var(--theme-color);
  border-color: transparent;
  padding: 10px 24px;
  font-weight: 600;
}

.game-btn.primary:hover {
  color: #fff;
  background: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 6%));
}

.game-viewport {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  touch-action: none;
}

.game-loading {
  color: var(--muted);
  font-size: 13px;
}

.game-canvas {
  display: block;
  border-radius: 10px;
}

/* Overlay shown on win / game over */
.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: var(--radius-lg);
  animation: fadeIn var(--dur-base) ease;
}

.game-overlay[hidden] {
  display: none;
}

.overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 32px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.overlay-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}

.overlay-text {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ----------------------------------------
   2048
   ---------------------------------------- */

.g2048-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: var(--chip-bg);
}

.g2048-tile {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--chip-bg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background var(--dur-fast) ease;
}

.g2048-tile.filled {
  animation: tilePop 0.18s var(--ease-spring);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

@keyframes tilePop {
  from {
    transform: scale(0.82);
  }

  to {
    transform: scale(1);
  }
}

/* ----------------------------------------
   Memory
   ---------------------------------------- */

.memory-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 9px;
}

.memory-card {
  position: relative;
  border: none;
  padding: 0;
  background: none;
  border-radius: 10px;
  perspective: 700px;
  font-family: inherit;
}

.memory-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  backface-visibility: hidden;
  transition: transform 0.4s var(--ease-out);
  font-size: clamp(18px, 6vw, 30px);
}

.memory-face.cover {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.18);
  border: 1px solid hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.3);
}

.memory-face.cover::after {
  content: "?";
  font-size: 20px;
  font-weight: 700;
  color: hsla(var(--theme-h), var(--theme-s), 45%, 0.5);
}

.memory-face.front {
  transform: rotateY(180deg);
  color: #fff;
  background: hsl(calc(var(--theme-h) + var(--card-hue-shift, 0)), var(--theme-s), var(--theme-l));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.memory-card.is-flipped .memory-face.cover,
.memory-card.is-matched .memory-face.cover {
  transform: rotateY(-180deg);
}

.memory-card.is-flipped .memory-face.front,
.memory-card.is-matched .memory-face.front {
  transform: rotateY(0);
}

.memory-card.is-matched {
  animation: matchPulse 0.45s var(--ease-out);
}

.memory-card.is-matched .memory-face.front {
  opacity: 0.55;
}

@keyframes matchPulse {
  50% {
    transform: scale(1.08);
  }
}

/* ----------------------------------------
   Games index: filters + category sections
   ---------------------------------------- */

.games-content {
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.game-filters {
  width: min(880px, 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 13px;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.game-filter span {
  font-size: 11px;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

.game-filter:hover {
  transform: translateY(-2px);
}

.game-filter.active {
  color: #fff;
  background: var(--theme-color);
  border-color: transparent;
  font-weight: 600;
}

.game-filter.active span {
  opacity: 0.85;
}

.game-sections {
  width: min(880px, 100%);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.game-section[hidden] {
  display: none;
}

.game-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.game-section-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.game-section-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  color: hsl(var(--theme-h), 45%, 40%);
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.16);
}

:root[data-scheme="dark"] .game-section-count {
  color: hsl(var(--theme-h), 60%, 74%);
}

.game-section-desc {
  font-size: 12px;
  color: var(--muted);
}

/* ----------------------------------------
   Tic-tac-toe
   ---------------------------------------- */

.ttt-board {
  width: min(100%, 100%);
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ttt-cell {
  border: none;
  border-radius: 14px;
  background: var(--chip-bg);
  font-size: clamp(30px, 12vmin, 62px);
  font-family: inherit;
  line-height: 1;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) ease;
}

.ttt-cell.open:hover {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.2);
  transform: scale(1.03);
}

.ttt-cell.x {
  color: var(--theme-color);
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.14);
}

.ttt-cell.o {
  color: var(--text);
  background: var(--chip-bg-strong);
}

.ttt-cell.win {
  animation: tttWin 0.5s var(--ease-out) both;
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.4);
  color: #fff;
}

@keyframes tttWin {
  50% {
    transform: scale(1.12);
  }
}

/* ----------------------------------------
   Lights Out
   ---------------------------------------- */

.lo-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.lo-cell {
  border: none;
  border-radius: 12px;
  background: var(--chip-bg-strong);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.08);
  transition: background var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-fast) var(--ease-spring);
}

.lo-cell:hover {
  transform: scale(1.05);
}

.lo-cell.on {
  background: var(--theme-color);
  box-shadow: 0 0 22px hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.6), inset 0 -3px 0 hsla(var(--theme-h), var(--theme-s), 35%, 0.5);
}

/* ----------------------------------------
   Hanoi
   ---------------------------------------- */

.hn-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: end;
}

.hn-peg {
  position: relative;
  height: 100%;
  border-radius: 12px;
  background: transparent;
  transition: background var(--dur-fast) ease;
  cursor: pointer;
}

.hn-peg.selected {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.1);
}

.hn-peg.deny {
  animation: hnDeny 0.3s ease;
}

@keyframes hnDeny {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.hn-rod {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8%;
  width: 6px;
  height: 74%;
  border-radius: 3px;
  background: var(--chip-bg-strong);
}

.hn-base {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4%;
  height: 5%;
  border-radius: 4px;
  background: var(--chip-bg-strong);
}

.hn-disc {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 9.5%;
  border-radius: 999px;
  background: hsl(calc(var(--theme-h) + var(--disc-shift, 0)), var(--theme-s), var(--theme-l));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
  font-size: clamp(10px, 2.4vmin, 14px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  transition: bottom var(--dur-base) var(--ease-out), width var(--dur-base) ease;
}

.hn-disc.lifted {
  transform: translateX(-50%) translateY(-14%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ----------------------------------------
   Schulte
   ---------------------------------------- */

.sc-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.sc-cell {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(14px, 4vmin, 24px);
  font-weight: 700;
  color: var(--text);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease, color var(--dur-fast) ease;
}

.sc-cell:hover {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.12);
}

.sc-cell.done {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.4);
  color: #fff;
  border-color: transparent;
}

.sc-cell.wrong {
  animation: scWrong 0.26s ease;
  background: hsla(4, 75%, 55%, 0.55);
  color: #fff;
}

@keyframes scWrong {
  50% { transform: scale(0.9); }
}

/* ----------------------------------------
   Memory Matrix
   ---------------------------------------- */

.mm-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mm-board {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--mm-size, 3), 1fr);
  grid-template-rows: repeat(var(--mm-size, 3), 1fr);
  gap: 8px;
}

.mm-cell {
  border: none;
  border-radius: 12px;
  background: var(--chip-bg-strong);
  transition: background var(--dur-base) ease, transform var(--dur-fast) var(--ease-spring);
}

.mm-cell.lit {
  background: var(--theme-color);
  box-shadow: 0 0 20px hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.55);
}

.mm-cell.hit {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.75);
  transform: scale(0.94);
}

.mm-cell.miss {
  background: hsla(4, 70%, 55%, 0.7);
}

.mm-hint {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}

/* ----------------------------------------
   Color Match
   ---------------------------------------- */

.cm-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.cm-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cm-size, 2), 1fr);
  grid-template-rows: repeat(var(--cm-size, 2), 1fr);
  gap: 6px;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.cm-board.right {
  transform: scale(1.03);
}

.cm-cell {
  border: none;
  border-radius: 10px;
  transition: transform var(--dur-fast) ease;
}

.cm-cell:hover {
  transform: scale(1.04);
}

.cm-cell.wrong {
  animation: scWrong 0.26s ease;
  outline: 3px solid hsla(4, 80%, 55%, 0.8);
  outline-offset: -3px;
}

/* ----------------------------------------
   24 Game
   ---------------------------------------- */

.g24-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.g24-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.g24-card {
  width: clamp(48px, 15vmin, 74px);
  aspect-ratio: 3/4;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-family: inherit;
  font-size: clamp(17px, 5vmin, 27px);
  font-weight: 800;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.g24-card:hover {
  transform: translateY(-3px);
}

.g24-card.active {
  border-color: var(--theme-color);
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.16);
  transform: translateY(-5px);
}

.g24-ops {
  display: flex;
  gap: 8px;
}

.g24-op {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--chip-bg);
  font-size: 20px;
  font-family: inherit;
  color: var(--text-soft);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring);
}

.g24-op:hover {
  transform: translateY(-2px);
}

.g24-op.active {
  background: var(--theme-color);
  color: #fff;
  border-color: transparent;
}

.g24-actions {
  display: flex;
  gap: 8px;
}

.g24-hint {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  min-height: 18px;
}

/* ----------------------------------------
   Bulls & Cows (1A2B)
   ---------------------------------------- */

.bc-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bc-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  min-height: 0;
}

.bc-tip {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  text-align: center;
  padding: 4px 8px;
}

.bc-tip.warn {
  color: hsl(4, 65%, 52%);
}

.bc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--chip-bg);
}

.bc-row.win {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.28);
}

.bc-guess {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text);
}

.bc-result {
  font-size: 13px;
  color: var(--muted);
}

.bc-result b {
  color: var(--theme-color);
  font-size: 15px;
}

.bc-input {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.bc-input.shake {
  animation: hnDeny 0.3s ease;
}

.bc-slot {
  width: 40px;
  height: 46px;
  border-radius: 10px;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  background: var(--panel);
}

.bc-slot.filled {
  border-color: var(--theme-color);
}

.bc-keys {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.bc-key {
  padding: 11px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--chip-bg);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.bc-key:hover {
  background: var(--chip-bg-strong);
  transform: translateY(-1px);
}

.bc-key.wide {
  grid-column: span 2.5;
  font-size: 13px;
}

.bc-key.primary {
  background: var(--theme-color);
  color: #fff;
  border-color: transparent;
}

/* ----------------------------------------
   Aim trainer
   ---------------------------------------- */

.aim-field {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: var(--chip-bg);
  overflow: hidden;
  cursor: crosshair;
}

.aim-target {
  position: absolute;
  border: none;
  border-radius: 50%;
  padding: 0;
  background:
    radial-gradient(circle at 50% 50%,
      #fff 0 14%,
      var(--theme-color) 14% 42%,
      #fff 42% 56%,
      var(--theme-color) 56% 100%);
  box-shadow: 0 4px 14px hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.5);
  animation: aimPop 0.16s var(--ease-spring);
  cursor: crosshair;
}

@keyframes aimPop {
  from { transform: scale(0.4); }
}

/* ----------------------------------------
   Typing
   ---------------------------------------- */

.tp-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 8px;
}

.tp-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(15px, 3.4vmin, 21px);
  line-height: 2;
  letter-spacing: 0.5px;
  word-break: break-word;
  color: var(--faint);
  outline: none;
}

.tp-text span.ok {
  color: var(--theme-color);
}

.tp-text span.bad {
  color: #fff;
  background: hsla(4, 75%, 55%, 0.85);
  border-radius: 3px;
}

.tp-text span.cursor {
  border-bottom: 3px solid var(--theme-color);
  animation: tpBlink 1s step-end infinite;
}

@keyframes tpBlink {
  50% { border-color: transparent; }
}

.tp-hint {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* ----------------------------------------
   Math sprint
   ---------------------------------------- */

.ms2-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ms2-question {
  font-size: clamp(24px, 7vmin, 40px);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) ease;
}

.ms2-question.right {
  transform: scale(1.08);
  color: var(--theme-color);
}

.ms2-answer {
  min-width: 120px;
  min-height: 46px;
  padding: 6px 18px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--panel);
  display: grid;
  place-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.ms2-answer.wrong {
  animation: hnDeny 0.3s ease;
  border-color: hsl(4, 70%, 55%);
  color: hsl(4, 70%, 55%);
}

.ms2-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: min(240px, 90%);
}

.ms2-key {
  padding: 12px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--chip-bg);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.ms2-key:hover {
  background: var(--chip-bg-strong);
  transform: translateY(-1px);
}

.ms2-key.primary {
  background: var(--theme-color);
  color: #fff;
  border-color: transparent;
}

/* ----------------------------------------
   Rock Paper Scissors
   ---------------------------------------- */

.rps-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.rps-arena {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rps-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.rps-hand {
  width: clamp(64px, 20vmin, 96px);
  height: clamp(64px, 20vmin, 96px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(30px, 10vmin, 46px);
  background: var(--chip-bg);
  border: 2px solid var(--line);
}

.rps-verdict {
  min-width: 76px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--muted);
}

.rps-verdict.win { color: hsl(140, 55%, 42%); }
.rps-verdict.lose { color: hsl(4, 70%, 55%); }
.rps-verdict.draw { color: var(--muted); }

:root[data-scheme="dark"] .rps-verdict.win { color: hsl(140, 60%, 62%); }

.rps-buttons {
  display: flex;
  gap: 10px;
}

.rps-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-family: inherit;
  font-size: 12px;
  color: var(--text-soft);
  box-shadow: var(--shadow);
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) ease;
}

.rps-btn span {
  font-size: 26px;
}

.rps-btn:hover {
  transform: translateY(-3px);
  border-color: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.5);
}

.rps-note {
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
}

/* ----------------------------------------
   Slot machine
   ---------------------------------------- */

.sl-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.sl-machine {
  position: relative;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(160deg,
      hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.35),
      hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.12));
  border: 2px solid hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.4);
  box-shadow: var(--shadow);
}

.sl-window {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: var(--surface);
}

.sl-reel {
  width: clamp(52px, 16vmin, 76px);
  height: clamp(60px, 18vmin, 88px);
  overflow: hidden;
  border-radius: 8px;
  background: var(--chip-bg);
}

.sl-strip {
  display: flex;
  flex-direction: column;
}

.sl-sym {
  height: clamp(60px, 18vmin, 88px);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: clamp(28px, 9vmin, 44px);
  line-height: 1;
}

.sl-payline {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  background: hsla(var(--theme-h), 80%, 55%, 0.55);
  pointer-events: none;
}

.sl-result {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  min-height: 20px;
  text-align: center;
}

.sl-result.win { color: hsl(45, 85%, 45%); }
.sl-result.lose { color: var(--faint); }

:root[data-scheme="dark"] .sl-result.win { color: hsl(45, 90%, 66%); }

.sl-bets {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.sl-bet {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--chip-bg);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-soft);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.sl-bet.active {
  background: var(--theme-color);
  color: #fff;
  border-color: transparent;
}

.sl-lever {
  padding: 10px 26px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, hsl(4, 70%, 55%), hsl(20, 80%, 55%));
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 18px hsla(10, 75%, 50%, 0.4);
  transition: transform var(--dur-fast) var(--ease-spring);
}

.sl-lever:hover {
  transform: translateY(-2px);
}

/* ----------------------------------------
   Hex guess
   ---------------------------------------- */

.hx-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.hx-swatch {
  width: min(62%, 220px);
  aspect-ratio: 2.2;
  border-radius: 16px;
  border: 3px solid var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.hx-question {
  font-size: 14px;
  color: var(--muted);
}

.hx-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: min(100%, 320px);
}

.hx-option {
  position: relative;
  padding: 12px 6px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) ease;
}

.hx-option:hover {
  transform: translateY(-2px);
  border-color: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.5);
}

.hx-option.revealed::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 6px;
  width: 16px;
  height: 5px;
  border-radius: 3px;
  background: var(--opt-color);
}

.hx-option.right {
  border-color: hsl(140, 60%, 45%);
  background: hsla(140, 60%, 45%, 0.14);
}

.hx-option.wrong {
  border-color: hsl(4, 70%, 55%);
  background: hsla(4, 70%, 55%, 0.12);
}

.hx-feedback {
  font-size: 13px;
  min-height: 18px;
  color: var(--muted);
}

.hx-feedback.ok { color: hsl(140, 55%, 42%); }
.hx-feedback.bad { color: hsl(4, 70%, 55%); }

:root[data-scheme="dark"] .hx-feedback.ok { color: hsl(140, 60%, 62%); }

/* ----------------------------------------
   Wordle
   ---------------------------------------- */

.wd-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wd-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wd-row {
  display: flex;
  gap: 5px;
}

.wd-tile {
  width: clamp(30px, 9vmin, 46px);
  height: clamp(30px, 9vmin, 46px);
  border: 2px solid var(--line);
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: clamp(15px, 4.6vmin, 23px);
  font-weight: 800;
  color: var(--text);
  transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

.wd-tile.typed {
  border-color: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.7);
  transform: scale(1.05);
}

.wd-tile.filled {
  color: #fff;
  border-color: transparent;
}

.wd-tile.correct { background: hsl(140, 55%, 42%); }
.wd-tile.present { background: hsl(42, 78%, 50%); }
.wd-tile.absent { background: var(--faint); }

.wd-msg {
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.wd-msg.show {
  opacity: 1;
}

.wd-keyboard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.wd-krow {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.wd-key {
  flex: 1;
  max-width: 38px;
  padding: 10px 0;
  border: none;
  border-radius: 6px;
  background: var(--chip-bg-strong);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.wd-key.wide {
  max-width: 54px;
  font-size: 11px;
}

.wd-key.correct { background: hsl(140, 55%, 42%); color: #fff; }
.wd-key.present { background: hsl(42, 78%, 50%); color: #fff; }
.wd-key.absent { background: var(--chip-bg); color: var(--faint); }

/* ----------------------------------------
   Idiom chain
   ---------------------------------------- */

.id-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.id-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-height: 30%;
  overflow-y: auto;
}

.id-word {
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--chip-bg);
  font-size: 13px;
  color: var(--muted);
}

.id-word.current {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.28);
  color: var(--text);
  font-weight: 700;
}

.id-arrow {
  color: var(--faint);
  font-size: 12px;
}

.id-prompt {
  font-size: 14px;
  color: var(--muted);
}

.id-prompt b {
  color: var(--theme-color);
  font-size: 19px;
  padding: 0 2px;
}

.id-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: min(100%, 340px);
}

.id-option {
  padding: 13px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) ease;
}

.id-option:hover {
  transform: translateY(-2px);
  border-color: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.5);
}

.id-option.wrong {
  animation: hnDeny 0.3s ease;
  border-color: hsl(4, 70%, 55%);
}

/* ----------------------------------------
   Sudoku
   ---------------------------------------- */

.su-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.su-loading {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-size: 13px;
}

.su-board {
  flex: 1;
  min-height: 0;
  aspect-ratio: 1;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 1px;
  padding: 3px;
  border-radius: 8px;
  background: var(--line);
  border: 2px solid var(--text-soft);
}

.su-cell {
  border: none;
  background: var(--panel);
  font-family: inherit;
  font-size: clamp(11px, 3.1vmin, 19px);
  font-weight: 600;
  color: var(--theme-color);
  display: grid;
  place-items: center;
  padding: 0;
  transition: background var(--dur-fast) ease;
}

.su-cell.given {
  color: var(--text);
  font-weight: 800;
}

.su-cell.br { box-shadow: 2px 0 0 var(--text-soft); z-index: 1; }
.su-cell.bb { box-shadow: 0 2px 0 var(--text-soft); z-index: 1; }
.su-cell.br.bb { box-shadow: 2px 0 0 var(--text-soft), 0 2px 0 var(--text-soft); }

.su-cell.peer { background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.08); }
.su-cell.same { background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.22); }
.su-cell.sel { background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.38); }
.su-cell.bad { color: hsl(4, 75%, 55%); background: hsla(4, 75%, 55%, 0.16); }

.su-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  font-size: 0.42em;
  color: var(--faint);
  font-style: normal;
}

.su-notes i {
  display: grid;
  place-items: center;
  font-style: normal;
}

.su-pad {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 4px;
}

.su-key {
  padding: 10px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chip-bg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: background var(--dur-fast) ease;
}

.su-key:hover { background: var(--chip-bg-strong); }

.su-key.toggle { font-size: 11px; }

.su-key.toggle.on {
  background: var(--theme-color);
  color: #fff;
  border-color: transparent;
}

/* ----------------------------------------
   Sokoban
   ---------------------------------------- */

.sk-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--sk-cols, 8), 1fr);
  grid-template-rows: repeat(var(--sk-rows, 8), 1fr);
  gap: 2px;
  place-content: center;
  aspect-ratio: auto;
}

.sk-cell {
  border-radius: 4px;
  position: relative;
}

.sk-cell.wall {
  background: var(--text-soft);
  border-radius: 3px;
}

.sk-cell.floor {
  background: var(--chip-bg);
}

.sk-cell.goal::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  border: 2px solid hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.8);
}

.sk-cell.box,
.sk-cell.box-done {
  background: hsl(28, 55%, 52%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18);
  border-radius: 5px;
}

.sk-cell.box-done {
  background: var(--theme-color);
}

.sk-cell.player::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: hsl(calc(var(--theme-h) + 40), 75%, 55%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* ----------------------------------------
   Klotski
   ---------------------------------------- */

.kl-board {
  position: relative;
  width: min(100%, 78%);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  border-radius: 10px;
  background: var(--chip-bg-strong);
  padding: 0;
  overflow: visible;
}

.kl-piece {
  position: absolute;
  border: none;
  padding: 3px;
  font-family: inherit;
  font-size: clamp(11px, 3vmin, 17px);
  font-weight: 700;
  color: #fff;
  background: transparent;
  transition: left 0.16s var(--ease-out), top 0.16s var(--ease-out);
}

.kl-piece::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  background: hsl(var(--theme-h), 45%, 52%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  z-index: -1;
}

.kl-piece.boss::before { background: hsl(var(--theme-h), 70%, 48%); }
.kl-piece.tall::before { background: hsl(calc(var(--theme-h) + 150), 40%, 48%); }
.kl-piece.wide::before { background: hsl(calc(var(--theme-h) + 60), 45%, 46%); }
.kl-piece.small::before { background: hsl(calc(var(--theme-h) + 210), 30%, 52%); }

.kl-piece.sel::before {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.kl-exit {
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: -6px;
  height: 5px;
  border-radius: 3px;
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.9);
}

/* ----------------------------------------
   Nonogram
   ---------------------------------------- */

.ng-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: auto;
}

.ng-grid {
  display: grid;
  grid-template-columns: repeat(var(--ng-rc, 3), minmax(0, 0.8fr)) repeat(var(--ng-n, 10), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ng-cc, 3), minmax(0, 0.8fr)) repeat(var(--ng-n, 10), minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  aspect-ratio: 1;
  touch-action: none;
}

.ng-corner { background: transparent; }

.ng-clue {
  display: flex;
  font-size: clamp(7px, 1.5vmin, 11px);
  color: var(--text-soft);
  font-weight: 700;
  font-style: normal;
}

.ng-clue i {
  flex: 1;
  display: grid;
  place-items: center;
  font-style: normal;
}

.ng-clue.col {
  flex-direction: column;
  justify-content: flex-end;
}

.ng-clue.row {
  flex-direction: row;
  justify-content: flex-end;
}

.ng-cell {
  border: none;
  padding: 0;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
  transition: background var(--dur-fast) ease;
}

.ng-cell.br { box-shadow: inset 0 0 0 1px var(--line), 2px 0 0 var(--text-soft); }
.ng-cell.bb { box-shadow: inset 0 0 0 1px var(--line), 0 2px 0 var(--text-soft); }

.ng-cell.fill {
  background: var(--text);
}

.ng-cell.cross::after {
  content: "";
  position: absolute;
  inset: 28%;
  background:
    linear-gradient(45deg, transparent 44%, var(--faint) 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--faint) 44% 56%, transparent 56%);
}

/* ----------------------------------------
   Number Link
   ---------------------------------------- */

.nl-board {
  width: min(100%, 100%);
  aspect-ratio: 1;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(var(--nl-n, 5), 1fr);
  grid-template-rows: repeat(var(--nl-n, 5), 1fr);
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
  background: var(--chip-bg);
  touch-action: none;
}

.nl-cell {
  position: relative;
  border-radius: 4px;
  background: var(--panel);
}

.nl-cell.used::before {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 2px;
  background: hsl(var(--nl-hue, 0), 70%, 55%);
}

/* Path connectors reach toward the neighbouring cells */
.nl-cell.c-n::after,
.nl-cell.c-s::after,
.nl-cell.c-e::after,
.nl-cell.c-w::after {
  content: "";
  position: absolute;
  background: hsl(var(--nl-hue, 0), 70%, 55%);
}

.nl-cell.c-n::after { left: 34%; right: 34%; top: -3px; bottom: 50%; }
.nl-cell.c-s::after { left: 34%; right: 34%; top: 50%; bottom: -3px; }
.nl-cell.c-w::after { top: 34%; bottom: 34%; left: -3px; right: 50%; }
.nl-cell.c-e::after { top: 34%; bottom: 34%; left: 50%; right: -3px; }

/* A cell can carry two connectors; stack them with extra elements */
.nl-cell.c-n.c-s::after { left: 34%; right: 34%; top: -3px; bottom: -3px; }
.nl-cell.c-w.c-e::after { top: 34%; bottom: 34%; left: -3px; right: -3px; }

.nl-cell.endpoint::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: hsl(var(--nl-hue, 0), 72%, 52%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.nl-cell.endpoint.done::before {
  box-shadow: 0 0 0 3px hsla(var(--nl-hue, 0), 72%, 52%, 0.35);
}

/* ----------------------------------------
   Match 3
   ---------------------------------------- */

.m3-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 3px;
}

.m3-board.shake {
  animation: hnDeny 0.3s ease;
}

.m3-gem {
  border: none;
  padding: 0;
  border-radius: 50%;
  background: hsl(calc(var(--theme-h) + var(--gem-hue, 0)), 65%, 58%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), inset 0 3px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--dur-fast) var(--ease-spring), opacity 0.18s ease;
}

.m3-gem.empty {
  background: transparent;
  box-shadow: none;
}

.m3-gem.sel {
  transform: scale(1.16);
  outline: 3px solid #fff;
  outline-offset: -3px;
  z-index: 1;
}

.m3-gem.pop {
  animation: m3Pop 0.19s ease-out forwards;
}

@keyframes m3Pop {
  to {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* ----------------------------------------
   Onet (link-link-kan)
   ---------------------------------------- */

.on-board {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--on-cols, 8), 1fr);
  grid-template-rows: repeat(var(--on-rows, 7), 1fr);
  gap: 3px;
}

.on-lines {
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
  z-index: 3;
}

.on-lines polyline {
  fill: none;
  stroke: hsl(var(--theme-h), 85%, 55%);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.on-tile {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  font-size: clamp(15px, 4vmin, 26px);
  line-height: 1;
  padding: 0;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease;
}

.on-tile.gone {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.on-tile.sel {
  transform: scale(1.1);
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.35);
  border-color: var(--theme-color);
}

.on-tile.hint {
  animation: onHint 0.5s ease-in-out 2;
}

@keyframes onHint {
  50% {
    background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.5);
    transform: scale(1.08);
  }
}

/* ----------------------------------------
   Mahjong solitaire
   ---------------------------------------- */

.mj-board {
  position: relative;
  width: 100%;
  height: 100%;
}

.mj-tile {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 5px;
  background: linear-gradient(170deg, #fdfcf8, #e6e2d6);
  color: #2b2b2b;
  font-size: clamp(13px, 3.6vmin, 24px);
  line-height: 1;
  padding: 0;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.22);
  transition: transform var(--dur-fast) var(--ease-spring);
}

:root[data-scheme="dark"] .mj-tile {
  background: linear-gradient(170deg, #d8d4c8, #b6b2a6);
}

.mj-tile.locked {
  filter: brightness(0.72) saturate(0.6);
  cursor: not-allowed;
}

.mj-tile.sel {
  transform: translateY(-4px) scale(1.05);
  outline: 3px solid var(--theme-color);
  outline-offset: -3px;
  z-index: 99 !important;
}

.mj-tile.hint {
  animation: onHint 0.5s ease-in-out 2;
}

/* ----------------------------------------
   Checkers
   ---------------------------------------- */

.ck-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--text-soft);
}

.ck-cell {
  border: none;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
}

.ck-cell.light { background: hsl(var(--theme-h), 22%, 84%); }
.ck-cell.dark { background: hsl(var(--theme-h), 26%, 46%); }

:root[data-scheme="dark"] .ck-cell.light { background: hsl(var(--theme-h), 14%, 42%); }
:root[data-scheme="dark"] .ck-cell.dark { background: hsl(var(--theme-h), 20%, 24%); }

.ck-cell.sel::after,
.ck-cell.target::after {
  content: "";
  position: absolute;
  inset: 0;
  background: hsla(var(--theme-h), 90%, 60%, 0.4);
}

.ck-cell.target::after {
  inset: 34%;
  border-radius: 50%;
  background: hsla(var(--theme-h), 90%, 60%, 0.75);
}

.ck-piece {
  width: 74%;
  height: 74%;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  position: relative;
}

.ck-piece.me {
  background: radial-gradient(circle at 34% 30%,
      hsl(var(--theme-h), 80%, 68%), hsl(var(--theme-h), 70%, 44%));
}

.ck-piece.ai {
  background: radial-gradient(circle at 34% 30%, #4c4f59, #1d1f26);
}

:root[data-scheme="dark"] .ck-piece.ai {
  background: radial-gradient(circle at 34% 30%, #f2f3f6, #b6bac5);
}

.ck-piece.king::after {
  content: "♛";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.62em;
  color: rgba(255, 255, 255, 0.9);
}

:root[data-scheme="dark"] .ck-piece.ai.king::after {
  color: rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------
   Xiangqi
   ---------------------------------------- */

.xq-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(10, 1fr);
  background:
    linear-gradient(hsl(38, 45%, 82%), hsl(38, 45%, 78%));
  border-radius: 8px;
  border: 2px solid hsl(30, 35%, 45%);
  overflow: hidden;
}

:root[data-scheme="dark"] .xq-board {
  background: linear-gradient(hsl(35, 18%, 32%), hsl(35, 18%, 27%));
  border-color: hsl(30, 20%, 20%);
}

.xq-point {
  border: none;
  background: none;
  padding: 0;
  position: relative;
  display: grid;
  place-items: center;
}

/* grid lines drawn per point */
.xq-point::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(hsla(30, 40%, 30%, 0.45), hsla(30, 40%, 30%, 0.45)) center/100% 1px no-repeat,
    linear-gradient(hsla(30, 40%, 30%, 0.45), hsla(30, 40%, 30%, 0.45)) center/1px 100% no-repeat;
}

.xq-point.river-top::before,
.xq-point.river-bottom::before {
  background:
    linear-gradient(hsla(30, 40%, 30%, 0.45), hsla(30, 40%, 30%, 0.45)) center/100% 1px no-repeat;
}

.xq-point.target::after {
  content: "";
  position: absolute;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: hsla(var(--theme-h), 90%, 55%, 0.7);
}

.xq-point.last::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px solid hsla(var(--theme-h), 90%, 50%, 0.6);
  border-radius: 4px;
}

.xq-piece {
  position: relative;
  z-index: 1;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(10px, 2.6vmin, 17px);
  font-weight: 800;
  background: linear-gradient(170deg, #fdf6e3, #e8dcc0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(0, 0, 0, 0.12);
}

.xq-piece.red { color: hsl(4, 72%, 42%); }
.xq-piece.black { color: #22242b; }

.xq-piece.sel {
  outline: 3px solid hsl(var(--theme-h), 90%, 50%);
  outline-offset: -1px;
  transform: scale(1.06);
}

/* ----------------------------------------
   Blackjack
   ---------------------------------------- */

.bj-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.bj-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22%;
}

.bj-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.bj-label b {
  display: block;
  font-size: 20px;
  color: var(--text);
}

.bj-hand {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.bj-card {
  width: clamp(34px, 10vmin, 50px);
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #24262d;
  font-weight: 700;
  font-size: clamp(11px, 3vmin, 15px);
  animation: tilePop 0.2s var(--ease-spring);
}

.bj-card.red { color: hsl(4, 72%, 48%); }

.bj-card.facedown {
  background: repeating-linear-gradient(45deg,
      hsl(var(--theme-h), 45%, 52%) 0 5px,
      hsl(var(--theme-h), 45%, 44%) 5px 10px);
}

.bj-message {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  min-height: 20px;
  color: var(--muted);
}

.bj-message.win { color: hsl(140, 55%, 42%); }
.bj-message.lose { color: hsl(4, 70%, 55%); }

:root[data-scheme="dark"] .bj-message.win { color: hsl(140, 60%, 62%); }

.bj-actions,
.bj-bets {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.bj-actions .game-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.bj-bet {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--chip-bg);
  font-family: inherit;
  font-size: 12px;
  color: var(--text-soft);
}

.bj-bet.active {
  background: var(--theme-color);
  color: #fff;
  border-color: transparent;
}

.bj-bet:disabled { opacity: 0.4; }

/* ----------------------------------------
   Yahtzee
   ---------------------------------------- */

.yz-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yz-dice {
  display: flex;
  gap: 7px;
  justify-content: center;
}

.yz-die {
  position: relative;
  width: clamp(34px, 11vmin, 52px);
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) ease;
}

.yz-die i {
  position: absolute;
  width: 17%;
  height: 17%;
  border-radius: 50%;
  background: var(--text);
  transform: translate(-50%, -50%);
}

.yz-die.held {
  border-color: var(--theme-color);
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.16);
  transform: translateY(4px) scale(0.94);
}

.yz-roll {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.yz-rolls {
  font-size: 12px;
  color: var(--muted);
}

.yz-sheet {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 4px;
  align-content: start;
}

.yz-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-family: inherit;
  font-size: 12px;
  color: var(--text-soft);
  transition: background var(--dur-fast) ease;
}

.yz-slot.can {
  border-color: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.5);
}

.yz-slot.can:hover {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.16);
}

.yz-slot.done {
  background: var(--chip-bg);
  color: var(--faint);
}

.yz-val {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.yz-slot.done .yz-val { color: var(--theme-color); }
.yz-slot:disabled { opacity: 0.75; }

/* ----------------------------------------
   Solitaire / FreeCell (shared card look)
   ---------------------------------------- */

.sol-wrap,
.fc-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sol-top,
.fc-top {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.sol-spacer,
.fc-spacer { grid-column: span 1; }

.sol-tableau,
.fc-tableau {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 4px;
}

.sol-tableau { grid-template-columns: repeat(7, 1fr); }
.fc-tableau { grid-template-columns: repeat(8, 1fr); }

.sol-pile,
.fc-pile {
  position: relative;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
}

:root[data-scheme="dark"] .sol-pile,
:root[data-scheme="dark"] .fc-pile {
  background: rgba(255, 255, 255, 0.04);
}

.sol-slot,
.fc-slot {
  position: absolute;
  left: 0;
  right: 0;
}

.sol-card,
.fc-card,
.sol-empty,
.fc-empty {
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(9px, 2.3vmin, 14px);
  line-height: 1.1;
  user-select: none;
}

.sol-card,
.fc-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  color: #24262d;
}

.sol-card.red,
.fc-card.red { color: hsl(4, 72%, 48%); }

.sol-card.facedown {
  background: repeating-linear-gradient(45deg,
      hsl(var(--theme-h), 45%, 54%) 0 5px,
      hsl(var(--theme-h), 45%, 46%) 5px 10px);
  border-color: rgba(0, 0, 0, 0.25);
}

.sol-card.sel,
.fc-card.sel {
  outline: 3px solid var(--theme-color);
  outline-offset: -2px;
  transform: translateY(-3px);
}

.sol-empty,
.fc-empty {
  border: 1px dashed var(--line);
  color: var(--faint);
  background: transparent;
}

.sol-stock,
.sol-waste,
.sol-foundation,
.fc-free,
.fc-foundation {
  cursor: pointer;
}

/* ----------------------------------------
   Minesweeper
   ---------------------------------------- */

.ms-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--ms-w, 9), 1fr);
  gap: 4px;
}

.ms-board.large {
  gap: 2px;
}

.ms-cell {
  border: none;
  padding: 0;
  border-radius: 6px;
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.22);
  box-shadow: inset 0 -2px 0 hsla(var(--theme-h), var(--theme-s), 30%, 0.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  font-size: clamp(11px, 2.6vmin, 17px);
  display: grid;
  place-items: center;
  transition: background 0.12s ease, transform 0.12s ease;
  color: var(--text);
}

.ms-board.large .ms-cell {
  border-radius: 4px;
}

.ms-cell:not(.open):hover {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.36);
  transform: scale(1.04);
}

.ms-cell.open {
  background: var(--chip-bg);
  box-shadow: none;
}

.ms-cell.flag {
  color: hsl(var(--theme-h), 70%, 45%);
}

:root[data-scheme="dark"] .ms-cell.flag {
  color: hsl(var(--theme-h), 75%, 70%);
}

.ms-cell.mine {
  background: var(--chip-bg-strong);
  color: var(--text-soft);
}

.ms-cell.boom {
  background: hsl(4, 75%, 55%);
  color: #fff;
}

.ms-cell[data-n="1"] { color: hsl(210, 70%, 50%); }
.ms-cell[data-n="2"] { color: hsl(140, 60%, 40%); }
.ms-cell[data-n="3"] { color: hsl(4, 70%, 52%); }
.ms-cell[data-n="4"] { color: hsl(260, 55%, 52%); }
.ms-cell[data-n="5"] { color: hsl(25, 75%, 45%); }
.ms-cell[data-n="6"] { color: hsl(180, 55%, 38%); }
.ms-cell[data-n="7"], .ms-cell[data-n="8"] { color: var(--text); }

:root[data-scheme="dark"] .ms-cell[data-n="1"] { color: hsl(210, 80%, 70%); }
:root[data-scheme="dark"] .ms-cell[data-n="2"] { color: hsl(140, 60%, 62%); }
:root[data-scheme="dark"] .ms-cell[data-n="3"] { color: hsl(4, 80%, 68%); }
:root[data-scheme="dark"] .ms-cell[data-n="4"] { color: hsl(260, 70%, 75%); }
:root[data-scheme="dark"] .ms-cell[data-n="5"] { color: hsl(25, 80%, 65%); }
:root[data-scheme="dark"] .ms-cell[data-n="6"] { color: hsl(180, 60%, 60%); }

/* ----------------------------------------
   15 Puzzle
   ---------------------------------------- */

.p15-board {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: var(--chip-bg);
  padding: 6px;
}

.p15-tile {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc((100% - 12px) / 4);
  height: calc((100% - 12px) / 4);
  padding: 4px;
  border: none;
  background: none;
  transition: transform 0.16s var(--ease-out, ease);
  font-family: inherit;
}

.p15-tile::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 10px;
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.24);
  box-shadow: inset 0 -3px 0 hsla(var(--theme-h), var(--theme-s), 30%, 0.16);
  transition: background 0.2s ease;
}

.p15-tile.correct::before {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.55);
}

.p15-tile span,
.p15-tile {
  display: grid;
  place-items: center;
  font-size: clamp(18px, 5.6vmin, 30px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  z-index: 1;
}

.p15-tile.correct {
  color: #fff;
}

/* ----------------------------------------
   Reversi
   ---------------------------------------- */

.rv-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 3px;
  padding: 6px;
  border-radius: 12px;
  background: hsla(var(--theme-h), 30%, 40%, 0.25);
}

.rv-cell {
  position: relative;
  border: none;
  padding: 0;
  border-radius: 6px;
  background: hsla(var(--theme-h), 35%, 50%, 0.22);
  display: grid;
  place-items: center;
}

.rv-cell.hint::after {
  content: "";
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.55);
  animation: hintPulse 1.4s ease-in-out infinite;
}

@keyframes hintPulse {
  50% {
    transform: scale(1.35);
    opacity: 0.6;
  }
}

.rv-disc {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.rv-disc.player {
  background: radial-gradient(circle at 32% 30%,
      hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 12%)),
      hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 10%)));
}

.rv-disc.ai {
  background: radial-gradient(circle at 32% 30%, #5b5e6a, #23252d);
}

:root[data-scheme="dark"] .rv-disc.ai {
  background: radial-gradient(circle at 32% 30%, #ffffff, #b9bcc8);
}

.rv-disc.flipping {
  animation: discFlip 0.42s var(--ease-out, ease);
}

.rv-disc.placed {
  animation: tilePop 0.22s var(--ease-spring, ease);
}

@keyframes discFlip {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(0.08);
  }

  100% {
    transform: scaleX(1);
  }
}

/* ----------------------------------------
   Simon
   ---------------------------------------- */

.simon-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.simon-board {
  position: relative;
  width: min(100%, 100%);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 4px;
}

.simon-pad {
  border: none;
  border-radius: 18px;
  background: hsla(calc(var(--theme-h) + var(--pad) * 90), 70%, var(--theme-l), 0.35);
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.simon-pad:nth-child(1) { border-top-left-radius: 46%; }
.simon-pad:nth-child(2) { border-top-right-radius: 46%; }
.simon-pad:nth-child(3) { border-bottom-left-radius: 46%; }
.simon-pad:nth-child(4) { border-bottom-right-radius: 46%; }

.simon-pad.lit {
  background: hsl(calc(var(--theme-h) + var(--pad) * 90), 80%, 60%);
  box-shadow: 0 0 26px hsla(calc(var(--theme-h) + var(--pad) * 90), 80%, 60%, 0.7);
  transform: scale(1.03);
}

.simon-board.locked .simon-pad {
  pointer-events: none;
}

.simon-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.simon-status {
  font-size: clamp(13px, 3vmin, 18px);
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

/* ----------------------------------------
   Whac-a-Mole
   ---------------------------------------- */

.wk-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.wk-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.wk-hole {
  position: relative;
  border-radius: 16px;
  background: var(--chip-bg);
  overflow: hidden;
}

.wk-hole::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 8%;
  height: 18%;
  border-radius: 50%;
  background: hsla(var(--theme-h), 30%, 25%, 0.35);
}

.wk-mole {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%) translateY(120%);
  border: none;
  background: none;
  font-size: clamp(30px, 9vmin, 54px);
  line-height: 1;
  transition: transform 0.14s var(--ease-out, ease);
  z-index: 1;
  padding: 4px 10px;
}

.wk-hole.up .wk-mole {
  transform: translateX(-50%) translateY(0);
}

.wk-hole.up .wk-mole:active {
  transform: translateX(-50%) translateY(12%) scale(0.86);
}

.wk-pop {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 800;
  color: hsl(var(--theme-h), 70%, 48%);
  animation: popRise 0.6s ease-out both;
  pointer-events: none;
  z-index: 2;
}

:root[data-scheme="dark"] .wk-pop {
  color: hsl(var(--theme-h), 80%, 72%);
}

@keyframes popRise {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-26px);
  }
}

/* ----------------------------------------
   Reaction test
   ---------------------------------------- */

.rx-area {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--chip-bg);
  transition: background 0.12s ease;
  font-family: inherit;
  padding: 20px;
}

.rx-title {
  font-size: clamp(22px, 6vmin, 38px);
  font-weight: 800;
  color: var(--text);
}

.rx-sub {
  font-size: 13px;
  color: var(--muted);
  word-break: break-all;
}

.rx-area.waiting {
  background: hsla(4, 75%, 55%, 0.75);
}

.rx-area.waiting .rx-title,
.rx-area.waiting .rx-sub,
.rx-area.go .rx-title,
.rx-area.go .rx-sub {
  color: #fff;
}

.rx-area.go {
  background: hsl(140, 65%, 45%);
}

.rx-area.early {
  background: hsla(35, 90%, 55%, 0.8);
}

.rx-area.result {
  background: hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.28);
}

@media (max-width: 768px) {
  .game-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .game-stage {
    width: 100%;
  }

  .game-hud {
    padding: 10px 12px;
  }

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

  .game-btn {
    padding: 8px 14px;
    font-size: 12px;
  }

  .game-viewport {
    padding: 8px;
  }
}