/* Web Games Portal ? scalable static site */

:root {
  --bg: #0c0e14;
  --bg-card: #151922;
  --bg-elevated: #1c2130;
  --border: rgba(255, 255, 255, 0.08);
  --text: #eef0f6;
  --text-muted: #8b93a8;
  --accent: #7c6cff;
  --accent-glow: rgba(124, 108, 255, 0.35);
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 64px;
  --ad-h: 90px;
  --font: 'Pretendard Variable', 'Noto Sans KR', system-ui, sans-serif;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(124, 108, 255, 0.18), transparent),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(236, 72, 153, 0.12), transparent),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(34, 197, 94, 0.08), transparent);
  pointer-events: none;
  z-index: -1;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

.wrap {
  width: min(1200px, calc(100% - 32px));
  margin-inline: auto;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(12, 14, 20, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #ec4899);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 16px var(--accent-glow);
}

.header-search {
  flex: 1;
  max-width: 360px;
  margin-left: auto;
}

.header-search input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.header-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-wrap {
  position: relative;
}

.search-wrap::before {
  content: '??';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  opacity: 0.6;
  pointer-events: none;
}

.game-count-badge {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.game-count-badge strong {
  color: var(--accent);
}

/* Ad slots / Coupang Partners */
.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  min-height: 140px;
}

.ad-top {
  margin: 16px auto;
  width: min(700px, 100%);
  min-height: 140px;
}

.ad-sidebar {
  min-height: 140px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

.ad-bottom {
  margin: 24px auto;
  width: min(700px, 100%);
  min-height: 140px;
}

.coupang-banner {
  width: 100%;
  max-width: 680px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.coupang-banner-note {
  margin: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.8;
  line-height: 1.4;
}

/* Hero */
.hero {
  padding: 48px 0 32px;
  text-align: center;
}

.hero h1 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.hero h1 span {
  background: linear-gradient(135deg, var(--accent), #ec4899, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p {
  margin: 0 auto;
  max-width: 520px;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 28px;
}

.hero-stat {
  text-align: center;
}

.hero-stat .num {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
}

.hero-stat .label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Filters */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.filter-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow);
}

/* Game grid */
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  overflow: hidden;
}

.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--card-accent, var(--accent)) 0%, transparent 60%);
  opacity: 0.08;
  pointer-events: none;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(255, 255, 255, 0.15);
}

.game-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.game-emoji {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.game-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-featured {
  background: rgba(124, 108, 255, 0.2);
  color: #a99bff;
}

.badge-new {
  background: rgba(52, 211, 153, 0.2);
  color: var(--success);
}

.badge-cat {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.game-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}

.game-card p {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.difficulty {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.play-btn {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--card-accent, var(--accent));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  transition: filter 0.2s, transform 0.15s;
}

.play-btn:hover {
  filter: brightness(1.1);
  transform: scale(1.03);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}

.empty-state span {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
}

/* Play page */
.play-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px 0 48px;
}

@media (min-width: 1024px) {
  .play-layout {
    grid-template-columns: 1fr 300px;
    align-items: start;
  }
}

.play-main {
  min-width: 0;
}

.play-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color 0.2s, border-color 0.2s;
}

.back-link:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
}

.play-title-wrap h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
}

.play-title-wrap p {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.game-stage {
  position: relative;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.game-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.game-scoreboard {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.score-item {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.score-item strong {
  color: var(--text);
  font-weight: 700;
}

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

.btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  transition: filter 0.2s;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn:hover {
  filter: brightness(1.08);
}

.game-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 360px;
}

.game-canvas-wrap canvas {
  border-radius: var(--radius-sm);
  max-width: 100%;
  touch-action: none;
}

.play-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-panel {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.info-panel h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.info-panel p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.info-panel ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.info-panel li {
  margin-bottom: 4px;
}

.more-games {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.more-game-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  transition: border-color 0.2s;
}

.more-game-link:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.more-game-link span:first-child {
  font-size: 1.2rem;
}

/* Footer */
.site-footer {
  padding: 32px 0;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.site-footer p {
  margin: 0 0 4px;
}

/* Game-specific shared */
.game-message {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(12, 14, 20, 0.88);
  backdrop-filter: blur(8px);
  z-index: 10;
  padding: 24px;
  text-align: center;
}

.game-message h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.game-message p {
  margin: 0 0 20px;
  color: var(--text-muted);
}

.hidden {
  display: none !important;
}

/* Tic Tac Toe */
.ttt-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.ttt-hud {
  width: min(380px, 92vw);
}

.ttt-turn-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0 auto;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color 0.25s, box-shadow 0.25s, color 0.25s;
}

.ttt-turn-badge--player {
  color: #f9a8d4;
  border-color: rgba(236, 72, 153, 0.45);
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.15),
    0 4px 18px rgba(236, 72, 153, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: ttt-turn-pulse 1.6s ease-in-out infinite;
}

.ttt-turn-badge--thinking {
  color: #a5b4fc;
  border-color: rgba(129, 140, 248, 0.4);
  animation: ttt-thinking-pulse 1.1s ease-in-out infinite;
}

.ttt-turn-badge--win {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.5);
  animation: ttt-turn-pop 0.5s ease;
}

.ttt-turn-badge--lose {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
}

.ttt-turn-badge--draw {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
}

.ttt-turn-badge--ai {
  color: #a5b4fc;
}

.ttt-turn-mark {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  position: relative;
}

.ttt-turn-mark--o::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #ec4899;
  box-shadow:
    0 0 8px rgba(236, 72, 153, 0.5),
    inset 0 -2px 4px rgba(236, 72, 153, 0.25);
}

.ttt-turn-mark--x::before,
.ttt-turn-mark--x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6%;
  width: 3px;
  height: 88%;
  border-radius: 2px;
  background: linear-gradient(180deg, #c7d2fe, #6366f1);
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.55);
}

.ttt-turn-mark--x::before { transform: translateX(-50%) rotate(45deg); }
.ttt-turn-mark--x::after { transform: translateX(-50%) rotate(-45deg); }

.ttt-board-wrap {
  position: relative;
  width: min(380px, 92vw);
  padding: 14px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(99, 102, 241, 0.22), rgba(236, 72, 153, 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 60%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 24px
    );
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.ttt-board-wrap--win {
  animation: ttt-glow 0.65s ease;
}

.ttt-board-wrap--shake {
  animation: ttt-shake 0.5s ease;
}

.ttt-board-wrap--lose {
  filter: saturate(0.85);
}

.ttt-board-wrap--draw {
  animation: ttt-draw-board 0.7s ease;
}

.ttt-board-wrap--reject {
  animation: ttt-shake 0.35s ease;
}

.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  z-index: 1;
}

.ttt-cell {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 0;
  min-width: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 12%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.1), transparent 50%),
    var(--bg-elevated, #1e2433);
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 16px;
  cursor: pointer;
  aspect-ratio: 1;
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 6px rgba(0, 0, 0, 0.15);
  transition:
    background 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ttt-cell:hover:not(.taken):not(:disabled) {
  background:
    radial-gradient(ellipse 80% 55% at 50% 12%, rgba(167, 139, 250, 0.28), transparent 70%),
    linear-gradient(165deg, rgba(124, 108, 255, 0.22), transparent 50%),
    var(--bg-elevated, #1e2433);
  border-color: rgba(129, 140, 248, 0.6);
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 10px 22px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.ttt-cell:active:not(.taken):not(:disabled) {
  transform: translateY(0) scale(0.96);
}

.ttt-cell.taken,
.ttt-cell:disabled {
  cursor: default;
}

.ttt-cell--reject {
  animation: ttt-cell-reject 0.4s ease;
}

.ttt-cell--win {
  border-color: rgba(52, 211, 153, 0.75);
  box-shadow:
    0 0 0 2px rgba(52, 211, 153, 0.4),
    0 0 24px rgba(52, 211, 153, 0.4);
  animation: ttt-win-pulse 0.7s ease infinite alternate;
}

.ttt-cell--draw-fill {
  animation: ttt-draw-cell 0.65s ease;
}

.ttt-mark {
  display: block;
  width: 62%;
  height: 62%;
  position: relative;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.ttt-mark--pop {
  animation: ttt-pop 0.42s cubic-bezier(0.22, 1.5, 0.36, 1) both;
}

.ttt-mark--o::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid transparent;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(145deg, #f472b6, #db2777 55%, #be185d);
  background-clip: padding-box;
  border-color: rgba(251, 113, 133, 0.9);
  box-shadow:
    0 0 14px rgba(236, 72, 153, 0.5),
    inset 0 -3px 8px rgba(190, 24, 93, 0.35),
    inset 0 2px 6px rgba(255, 255, 255, 0.25);
}

.ttt-mark--o::after {
  content: '';
  position: absolute;
  top: 14%;
  left: 22%;
  width: 28%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(1px);
  transform: rotate(-18deg);
}

.ttt-mark--x::before,
.ttt-mark--x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6%;
  width: 6px;
  height: 88%;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    #e0e7ff 0%,
    #818cf8 35%,
    #4f46e5 70%,
    #3730a3 100%
  );
  box-shadow:
    0 0 12px rgba(99, 102, 241, 0.55),
    inset 1px 0 2px rgba(255, 255, 255, 0.35);
}

.ttt-mark--x::before { transform: translateX(-50%) rotate(45deg); }
.ttt-mark--x::after { transform: translateX(-50%) rotate(-45deg); }

.ttt-particles {
  position: absolute;
  inset: 14px;
  pointer-events: none;
  overflow: hidden;
  border-radius: 12px;
  z-index: 3;
}

.ttt-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  opacity: 0.95;
  animation: ttt-particle-burst 0.52s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.ttt-flash {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}

.ttt-flash--active.ttt-flash--win {
  animation: ttt-flash-win 0.55s ease forwards;
}

.ttt-flash--active.ttt-flash--lose {
  animation: ttt-flash-lose 0.55s ease forwards;
}

.ttt-win-line {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  overflow: visible;
}

.ttt-win-line--visible {
  opacity: 1;
}

.ttt-win-stroke {
  stroke: #34d399;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.9));
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}

.ttt-win-line--visible .ttt-win-stroke {
  animation: ttt-draw-line 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ttt-pop {
  0% { transform: scale(0.15); opacity: 0; }
  65% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes ttt-draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes ttt-win-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.2); }
}

@keyframes ttt-glow {
  0%, 100% {
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  50% {
    box-shadow:
      0 0 32px rgba(52, 211, 153, 0.5),
      0 14px 36px rgba(0, 0, 0, 0.32);
  }
}

@keyframes ttt-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes ttt-turn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes ttt-turn-pop {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes ttt-thinking-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@keyframes ttt-particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.15);
  }
}

@keyframes ttt-cell-reject {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes ttt-flash-win {
  0% { opacity: 0; background: transparent; }
  30% { opacity: 0.45; background: radial-gradient(circle, rgba(52, 211, 153, 0.35), transparent 70%); }
  100% { opacity: 0; background: transparent; }
}

@keyframes ttt-flash-lose {
  0% { opacity: 0; background: transparent; }
  30% { opacity: 0.4; background: radial-gradient(circle, rgba(248, 113, 113, 0.3), transparent 70%); }
  100% { opacity: 0; background: transparent; }
}

@keyframes ttt-draw-board {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(0.88) saturate(0.9); }
}

@keyframes ttt-draw-cell {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.96); opacity: 0.85; }
}

/* Memory */
.memory-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 12px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245, 158, 11, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(99, 102, 241, 0.1), transparent 50%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.02), transparent 40%);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.35s ease;
}

.memory-root--streak-hot {
  box-shadow: inset 0 0 40px rgba(249, 115, 22, 0.12);
}

.memory-root--won {
  animation: memory-root-win-glow 0.9s ease;
}

.memory-hint {
  margin: 0 0 10px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(99, 102, 241, 0.28));
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.memory-hint--hide {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 2.5vw, 14px);
  width: min(400px, 94vw);
  perspective: 900px;
}

.memory-grid--cleared .memory-card.matched .memory-card-inner {
  animation: memory-clear-pulse 0.55s ease-out;
}

.memory-card {
  aspect-ratio: 1;
  min-height: 72px;
  perspective: 800px;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.memory-card:not(.flipped):not(.matched):hover .memory-card-inner {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.memory-card:not(.flipped):not(.matched):active .memory-card-inner {
  transform: translateY(0) scale(0.97);
}

.memory-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1), box-shadow 0.25s ease;
  transform-style: preserve-3d;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.memory-card.flipped .memory-card-inner,
.memory-card.matched .memory-card-inner {
  transform: rotateY(180deg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.memory-card.memory-card--flip-pulse .memory-card-inner {
  animation: memory-flip-glow 0.38s ease-out;
}

.memory-card.matched.memory-card--pop .memory-card-inner {
  animation: memory-match-pop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.memory-card.memory-card--shake .memory-card-inner {
  animation: memory-mismatch-shake 0.55s ease-in-out;
}

.memory-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.85rem;
  border: 2px solid transparent;
  overflow: hidden;
}

.memory-front {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28) 0%, transparent 42%),
    linear-gradient(135deg, #f59e0b 0%, #ea580c 48%, #6366f1 100%);
  font-size: 1.35rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 8px rgba(0, 0, 0, 0.12);
}

.memory-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.35) 48%,
    rgba(255, 255, 255, 0.08) 52%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: memory-shine-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}

.memory-front::after {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 10px;
  border: 1.5px dashed rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.memory-back {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, transparent 45%),
    linear-gradient(220deg, rgba(245, 158, 11, 0.12), transparent 55%),
    var(--bg-elevated);
  transform: rotateY(180deg);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 6px rgba(0, 0, 0, 0.08);
}

.memory-back::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 60%
  );
  transform: translateX(-130%);
  animation: memory-shine-sweep 2.8s ease-in-out infinite 0.6s;
  pointer-events: none;
}

.memory-card.matched .memory-back {
  border-color: var(--success);
  background:
    linear-gradient(160deg, rgba(52, 211, 153, 0.28), transparent 55%),
    rgba(52, 211, 153, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(52, 211, 153, 0.35),
    0 0 16px rgba(52, 211, 153, 0.25);
}

.memory-sparkle-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.memory-sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: var(--sc, #fbbf24);
  box-shadow: 0 0 6px var(--sc, #fbbf24);
  animation: memory-sparkle 0.55s ease-out forwards;
}

@keyframes memory-sparkle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--sx), var(--sy)) scale(0.2);
  }
}

@keyframes memory-match-pop {
  0% { transform: rotateY(180deg) scale(1); }
  45% { transform: rotateY(180deg) scale(1.12); }
  100% { transform: rotateY(180deg) scale(1); }
}

@keyframes memory-mismatch-shake {
  0%, 100% { transform: rotateY(180deg) translateX(0); }
  20% { transform: rotateY(180deg) translateX(-7px) rotateZ(-2deg); }
  40% { transform: rotateY(180deg) translateX(7px) rotateZ(2deg); }
  60% { transform: rotateY(180deg) translateX(-5px) rotateZ(-1deg); }
  80% { transform: rotateY(180deg) translateX(4px); }
}

@keyframes memory-clear-pulse {
  0% { transform: rotateY(180deg) scale(1); filter: brightness(1); }
  50% { transform: rotateY(180deg) scale(1.06); filter: brightness(1.15); }
  100% { transform: rotateY(180deg) scale(1); filter: brightness(1); }
}

/* 2048 */
.g2048-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.g2048-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(360px, 92vw);
}

.g2048-score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(160deg, #b8a48a, #9a8870);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 3px 8px rgba(0, 0, 0, 0.18);
}

.g2048-hud-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(249, 246, 242, 0.75);
}

.g2048-hud-value {
  font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #f9f6f2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.g2048-score-val.g2048-hud-pop {
  animation: g2048-hud-pop 0.32s cubic-bezier(0.2, 1.2, 0.35, 1);
}

.g2048-goal-box.g2048-goal-reached {
  background: linear-gradient(160deg, #f5d268, #edc850);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 14px rgba(237, 200, 80, 0.45);
}

.g2048-goal-box.g2048-goal-reached .g2048-hud-value {
  color: #3d3428;
  text-shadow: none;
}

@keyframes g2048-hud-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); color: #ffe066; }
  100% { transform: scale(1); }
}

.g2048-board {
  position: relative;
  width: min(360px, 92vw);
}

.grid-2048 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  aspect-ratio: 1;
  background:
    linear-gradient(145deg, #b8a48a 0%, #9a8870 45%, #8a7660 100%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      rgba(0, 0, 0, 0.03) 6px,
      rgba(0, 0, 0, 0.03) 7px
    );
  padding: 12px;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.28);
  transition: filter 0.45s ease, opacity 0.45s ease;
}

.g2048-board-over .grid-2048 {
  filter: saturate(0.55) brightness(0.82);
  opacity: 0.88;
}

.g2048-grid-bump {
  animation: g2048-grid-bump 0.28s ease;
}

@keyframes g2048-grid-bump {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.g2048-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}

.g2048-flash {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

.g2048-flash--active {
  animation: g2048-flash 0.42s ease-out forwards;
}

.g2048-flash--merge {
  background: radial-gradient(circle at 50% 50%, rgba(255, 224, 102, 0.35), transparent 68%);
}

.g2048-flash--milestone {
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 80, 0.55), transparent 72%);
}

.g2048-flash--over {
  background: radial-gradient(circle at 50% 50%, rgba(180, 60, 60, 0.38), transparent 70%);
}

@keyframes g2048-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

.g2048-milestone {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(255, 224, 102, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  letter-spacing: -0.02em;
}

.g2048-milestone--show {
  animation: g2048-milestone-pop 1.1s cubic-bezier(0.2, 1.1, 0.35, 1) forwards;
}

.g2048-milestone--512 { color: #fff8e7; }
.g2048-milestone--1024 { color: #ffe066; }
.g2048-milestone--2048 {
  color: #fff;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 0 32px rgba(255, 214, 80, 1);
}

@keyframes g2048-milestone-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  22% { opacity: 1; transform: translate(-50%, -58%) scale(1.15); }
  55% { opacity: 1; transform: translate(-50%, -62%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(0.9); }
}

.g2048-particle-burst {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.g2048-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc, #fcd34d);
  box-shadow: 0 0 6px var(--pc, #fcd34d);
  animation: g2048-particle 0.55s ease-out forwards;
}

@keyframes g2048-particle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

.g2048-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--pc, #fcd34d);
  animation: g2048-confetti 0.85s ease-out forwards;
}

@keyframes g2048-confetti {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) rotate(280deg) scale(0.2);
    opacity: 0;
  }
}

.g2048-score-pop {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffe066;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: g2048-score-pop 0.7s ease-out forwards;
  z-index: 6;
}

@keyframes g2048-score-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.6); }
  20% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-32px) scale(0.85); }
}

.tile-2048 {
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 800;
  font-size: clamp(0.95rem, 4.2vw, 1.55rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  position: relative;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.18),
    0 6px 12px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease;
}

.tile-2048::before {
  content: '';
  position: absolute;
  inset: 3px 3px auto 3px;
  height: 38%;
  border-radius: 7px 7px 50% 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, transparent 100%);
  pointer-events: none;
}

.tile-2048::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 48%);
  pointer-events: none;
}

.tile-2048.empty {
  background: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.tile-2048.empty::before,
.tile-2048.empty::after {
  display: none;
}

.tile-2048.n2 {
  background: linear-gradient(160deg, #faf5ee, #eee4da 60%, #e0d5c8);
  color: #776e65;
}
.tile-2048.n4 {
  background: linear-gradient(160deg, #f5ead8, #ede0c8 60%, #dfd0b8);
  color: #776e65;
}
.tile-2048.n8 {
  background: linear-gradient(160deg, #fac898, #f2b179 55%, #e89d62);
  color: #f9f6f2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.tile-2048.n16 {
  background: linear-gradient(160deg, #fab080, #f59563 55%, #e88048);
  color: #f9f6f2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.tile-2048.n32 {
  background: linear-gradient(160deg, #fa9878, #f67c5f 55%, #e86848);
  color: #f9f6f2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.tile-2048.n64 {
  background: linear-gradient(160deg, #f88058, #f65e3b 55%, #e04828);
  color: #f9f6f2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.tile-2048.n128 {
  background: linear-gradient(160deg, #f8e498, #edcf72 55%, #e0b850);
  color: #f9f6f2;
  font-size: clamp(0.8rem, 3.5vw, 1.15rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.16),
    0 0 16px rgba(237, 207, 114, 0.42);
}
.tile-2048.n256 {
  background: linear-gradient(160deg, #f8dc88, #edcc61 55%, #e0b840);
  color: #f9f6f2;
  font-size: clamp(0.8rem, 3.5vw, 1.15rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.16),
    0 0 18px rgba(237, 204, 97, 0.48);
}
.tile-2048.n512 {
  background: linear-gradient(160deg, #f8d878, #edc850 55%, #e0b030);
  color: #f9f6f2;
  font-size: clamp(0.8rem, 3.5vw, 1.15rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.16),
    0 0 20px rgba(237, 200, 80, 0.52);
}
.tile-2048.n1024 {
  background: linear-gradient(160deg, #f8d060, #edc53f 55%, #e0a820);
  color: #f9f6f2;
  font-size: clamp(0.65rem, 3vw, 0.95rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.16),
    0 0 22px rgba(237, 197, 63, 0.58);
}
.tile-2048.n2048 {
  background: linear-gradient(160deg, #ffe880, #edc22e 50%, #d4a010);
  color: #f9f6f2;
  font-size: clamp(0.65rem, 3vw, 0.95rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.18),
    0 0 28px rgba(237, 194, 46, 0.72);
  animation: g2048-tile-glow 2.2s ease-in-out infinite;
}
.tile-2048.n4096,
.tile-2048.n8192,
.tile-2048.n16384,
.tile-2048.n32768,
.tile-2048.n65536 {
  background: linear-gradient(160deg, #7a9cff, #3c5ce8 55%, #2a3fc7);
  color: #f9f6f2;
  font-size: clamp(0.55rem, 2.6vw, 0.85rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.2),
    0 0 24px rgba(80, 110, 255, 0.6);
}

@keyframes g2048-tile-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

.tile-2048.tile-new {
  animation: g2048-spawn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}

.tile-2048.tile-merged {
  animation: g2048-merge-pop 0.32s cubic-bezier(0.12, 1.5, 0.3, 1);
  z-index: 2;
}

@keyframes g2048-spawn {
  from { transform: scale(0); opacity: 0.35; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes g2048-merge-pop {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.24); filter: brightness(1.18); }
  65% { transform: scale(0.94); }
  100% { transform: scale(1); filter: brightness(1); }
}

.g2048-shake {
  animation: g2048-shake 0.52s ease;
}

@keyframes g2048-shake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-8px) rotate(-0.4deg); }
  28% { transform: translateX(8px) rotate(0.4deg); }
  44% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  76% { transform: translateX(-3px); }
}

.g2048-pad {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 50px);
  gap: 8px;
  justify-content: center;
  margin-top: 2px;
}

.g2048-pad-up { grid-column: 2; grid-row: 1; }
.g2048-pad-left { grid-column: 1; grid-row: 2; }
.g2048-pad-down { grid-column: 2; grid-row: 2; }
.g2048-pad-right { grid-column: 3; grid-row: 2; }

.g2048-pad-btn {
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #d0c0a8, #a89478);
  color: #3d3428;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.08s ease, filter 0.08s ease;
}

.g2048-pad-btn:hover {
  filter: brightness(1.06);
}

.g2048-pad-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}

@media (min-width: 720px) {
  .g2048-pad {
    display: none;
  }
}

/* Reaction */
.reaction-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 4px 0;
}

.reaction-hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(460px, 96vw);
}

.reaction-round-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.reaction-round-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 2px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.2s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.reaction-round-dot--active {
  color: #fff;
  border-color: rgba(248, 113, 113, 0.65);
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.35), rgba(220, 38, 38, 0.2));
  transform: scale(1.12);
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.35);
  animation: reaction-dot-pulse 1.2s ease-in-out infinite;
}

.reaction-round-dot--done {
  color: #fff;
  border-color: rgba(74, 222, 128, 0.55);
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.4), rgba(22, 163, 74, 0.25));
}

.reaction-phase-bar {
  display: flex;
  gap: 6px;
  width: 100%;
}

.reaction-phase-step {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}

.reaction-phase-step--lit {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
}

.reaction-phase-step--current {
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.12);
}

.reaction-phase-bar .reaction-phase-step:nth-child(1).reaction-phase-step--current {
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.45), rgba(185, 28, 28, 0.3));
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.35);
}

.reaction-phase-bar .reaction-phase-step:nth-child(2).reaction-phase-step--current {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.5), rgba(202, 138, 4, 0.32));
  border-color: rgba(250, 204, 21, 0.55);
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.35);
  color: #1c1917;
}

.reaction-phase-bar .reaction-phase-step:nth-child(3).reaction-phase-step--current {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.55), rgba(22, 163, 74, 0.38));
  border-color: rgba(74, 222, 128, 0.6);
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.45);
  animation: reaction-phase-go-glow 0.6s ease-in-out infinite alternate;
}

.reaction-hint {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.4rem;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}

.reaction-zone {
  position: relative;
  width: min(460px, 96vw);
  height: min(380px, 62vw);
  min-height: 300px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  overflow: hidden;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -14px 32px rgba(0, 0, 0, 0.2);
  transition:
    background 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s ease,
    transform 0.12s ease,
    filter 0.3s ease;
}

.reaction-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 18%, rgba(255, 255, 255, 0.32), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1), transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.reaction-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.reaction-zone:active {
  transform: scale(0.985);
}

.reaction-zone.idle {
  background: linear-gradient(160deg, #0e7490 0%, #155e75 45%, #164e63 100%);
}

.reaction-zone.waiting {
  background: linear-gradient(160deg, #f87171 0%, #dc2626 42%, #991b1b 100%);
  box-shadow:
    0 18px 40px rgba(185, 28, 28, 0.45),
    0 0 0 0 rgba(248, 113, 113, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -12px 28px rgba(0, 0, 0, 0.2);
  animation: reaction-wait-glow 1.8s ease-in-out infinite;
}

.reaction-zone.ready {
  background: linear-gradient(160deg, #facc15 0%, #ca8a04 48%, #a16207 100%);
  box-shadow:
    0 18px 40px rgba(161, 98, 7, 0.45),
    0 0 36px rgba(250, 204, 21, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -12px 28px rgba(0, 0, 0, 0.18);
  animation: reaction-ready-flash 0.45s ease;
}

.reaction-zone.go {
  background: linear-gradient(160deg, #86efac 0%, #22c55e 38%, #15803d 72%, #14532d 100%);
  box-shadow:
    0 22px 56px rgba(22, 163, 74, 0.55),
    0 0 64px rgba(74, 222, 128, 0.55),
    0 0 120px rgba(34, 197, 94, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -14px 32px rgba(0, 0, 0, 0.18);
  animation: reaction-go-burst 0.65s cubic-bezier(0.15, 0.95, 0.25, 1.3);
}

.reaction-zone--go-electric {
  animation: reaction-go-burst 0.65s cubic-bezier(0.15, 0.95, 0.25, 1.3), reaction-go-electric 0.55s ease-out;
}

.reaction-zone.result {
  background: linear-gradient(160deg, #34d399 0%, #059669 50%, #065f46 100%);
}

.reaction-zone.done {
  background: linear-gradient(160deg, #67e8f9 0%, #06b6d4 48%, #0e7490 100%);
  box-shadow:
    0 18px 48px rgba(6, 182, 212, 0.45),
    0 0 40px rgba(103, 232, 249, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -12px 28px rgba(0, 0, 0, 0.18);
}

.reaction-zone.too-early {
  background: linear-gradient(160deg, #a16207 0%, #7f1d1d 40%, #450a0a 100%);
  box-shadow:
    0 18px 40px rgba(69, 10, 10, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -12px 28px rgba(0, 0, 0, 0.28);
}

.reaction-zone--shake {
  animation: reaction-shake 0.55s ease;
}

.reaction-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
  padding: 0 20px;
  line-height: 1.25;
  pointer-events: none;
}

.reaction-label--go {
  font-size: clamp(2.4rem, 12vw, 3.8rem);
  letter-spacing: 0.06em;
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.55),
    0 4px 20px rgba(0, 0, 0, 0.45);
  animation: reaction-label-go 0.5s cubic-bezier(0.15, 0.95, 0.3, 1.35);
}

.reaction-label--pop {
  animation: reaction-label-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

.reaction-ms {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.6rem, 10vw, 3.6rem);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.reaction-ms small {
  font-size: 0.38em;
  margin-left: 4px;
  font-weight: 700;
  opacity: 0.85;
}

.reaction-ms--show {
  opacity: 1;
  transform: scale(1);
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.reaction-ms--land {
  animation: reaction-ms-land 0.4s cubic-bezier(0.2, 0.9, 0.25, 1.35);
}

.reaction-ms--with-label {
  align-items: flex-end;
  padding-bottom: 28%;
}

.reaction-zone.done .reaction-label {
  align-items: flex-start;
  padding-top: 26%;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.reaction-go-burst {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.7) 0%, rgba(134, 239, 172, 0.45) 22%, transparent 58%),
    conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.35) 18deg, transparent 36deg, rgba(255, 255, 255, 0.25) 72deg, transparent 90deg, rgba(255, 255, 255, 0.3) 126deg, transparent 144deg);
}

.reaction-go-burst--on {
  animation: reaction-go-burst-flash 0.75s ease-out forwards;
}

.reaction-perfect-pop,
.reaction-pb-pop {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  z-index: 5;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.reaction-perfect-pop {
  background: linear-gradient(180deg, #fde047, #eab308);
  color: #422006;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 24px rgba(250, 204, 21, 0.55);
}

.reaction-pb-pop {
  top: 10%;
  font-size: 1.15rem;
  background: linear-gradient(180deg, #67e8f9, #06b6d4);
  color: #083344;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 28px rgba(6, 182, 212, 0.55);
}

.reaction-perfect-pop--on {
  animation: reaction-pop-badge 0.85s cubic-bezier(0.2, 0.9, 0.25, 1.3) forwards;
}

.reaction-pb-pop--on {
  animation: reaction-pop-badge 1.1s cubic-bezier(0.2, 0.9, 0.25, 1.3) forwards;
}

.reaction-pulse-ring {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.reaction-pulse-ring--beat {
  animation: reaction-ring-beat 0.85s ease-out;
}

.reaction-pulse-ring--ready {
  inset: 12%;
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.55);
  animation: reaction-ring-ready 0.5s ease-out infinite;
}

.reaction-pulse-ring--go {
  inset: 8%;
  opacity: 1;
  border-width: 3px;
  border-color: rgba(255, 255, 255, 0.75);
  animation: reaction-ring-go 0.7s cubic-bezier(0.15, 0.85, 0.3, 1) infinite;
}

.reaction-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.55), transparent 60%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.reaction-flash--on {
  animation: reaction-flash 0.4s ease-out;
}

.reaction-flash--go {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0%, rgba(134, 239, 172, 0.55) 35%, transparent 65%);
  animation: reaction-flash-go 0.55s ease-out;
}

.reaction-flash--perfect {
  background:
    radial-gradient(circle at center, rgba(253, 224, 71, 0.75) 0%, rgba(250, 204, 21, 0.35) 40%, transparent 68%);
  animation: reaction-flash 0.45s ease-out;
}

.reaction-flash--fail {
  background:
    radial-gradient(circle at center, rgba(248, 113, 113, 0.65) 0%, rgba(127, 29, 29, 0.35) 45%, transparent 70%);
  animation: reaction-flash-fail 0.4s ease-out;
}

.reaction-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.reaction-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: hsl(var(--hue, 140) 85% 65%);
  box-shadow: 0 0 10px hsl(var(--hue, 140) 90% 60% / 0.7);
  animation: reaction-particle 0.65s ease-out forwards;
}

.reaction-particle--go {
  width: 10px;
  height: 10px;
  margin: -5px;
  animation: reaction-particle-go 0.8s cubic-bezier(0.15, 0.85, 0.3, 1) forwards;
}

.reaction-particle--perfect {
  width: 9px;
  height: 9px;
  margin: -4.5px;
  background: hsl(var(--hue, 50) 95% 62%);
  box-shadow: 0 0 14px hsl(var(--hue, 50) 100% 55% / 0.85);
  animation: reaction-particle 0.75s ease-out forwards;
}

.reaction-particle--done {
  width: 9px;
  height: 9px;
  margin: -4.5px;
  animation: reaction-particle-go 0.9s ease-out forwards;
}

.reaction-results {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  min-height: 2.5rem;
}

.reaction-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.reaction-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.18), rgba(6, 182, 212, 0.08));
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: reaction-chip-in 0.35s ease backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.reaction-chip--perfect {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.28), rgba(234, 179, 8, 0.12));
  border-color: rgba(250, 204, 21, 0.55);
  color: #fde047;
}

.reaction-chip small {
  font-size: 0.7em;
  opacity: 0.7;
  font-weight: 600;
}

.reaction-avg strong {
  color: var(--text);
  font-size: 1.15rem;
}

@keyframes reaction-dot-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(248, 113, 113, 0.25); }
  50% { box-shadow: 0 0 20px rgba(248, 113, 113, 0.5); }
}

@keyframes reaction-phase-go-glow {
  from { box-shadow: 0 0 16px rgba(74, 222, 128, 0.35); }
  to { box-shadow: 0 0 28px rgba(74, 222, 128, 0.65); }
}

@keyframes reaction-go-electric {
  0% { filter: brightness(1.8) saturate(1.4); }
  40% { filter: brightness(1.35) saturate(1.2); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes reaction-go-burst-flash {
  0% { opacity: 1; transform: scale(0.7); }
  35% { opacity: 0.85; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.45); }
}

@keyframes reaction-label-go {
  0% { transform: scale(0.5); opacity: 0.3; }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes reaction-pop-badge {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5) translateY(8px); }
  35% { opacity: 1; transform: translateX(-50%) scale(1.15) translateY(0); }
  70% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(-12px); }
}

@keyframes reaction-flash-go {
  0% { opacity: 1; }
  30% { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes reaction-flash-fail {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes reaction-particle-go {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.1);
  }
}

@keyframes reaction-wait-glow {
  0%, 100% {
    box-shadow:
      0 18px 40px rgba(185, 28, 28, 0.4),
      0 0 0 0 rgba(248, 113, 113, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -12px 28px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow:
      0 18px 44px rgba(185, 28, 28, 0.55),
      0 0 28px 4px rgba(248, 113, 113, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 -12px 28px rgba(0, 0, 0, 0.2);
  }
}

@keyframes reaction-ready-flash {
  0% { filter: brightness(1.35); transform: scale(1.02); }
  100% { filter: brightness(1); transform: scale(1); }
}

@keyframes reaction-go-burst {
  0% { transform: scale(0.92); filter: brightness(1.7); }
  45% { transform: scale(1.05); filter: brightness(1.25); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes reaction-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-14px) rotate(-1.2deg); }
  30% { transform: translateX(12px) rotate(1deg); }
  45% { transform: translateX(-10px) rotate(-0.8deg); }
  60% { transform: translateX(8px) rotate(0.6deg); }
  75% { transform: translateX(-5px) rotate(-0.3deg); }
}

@keyframes reaction-label-pop {
  0% { transform: scale(0.82); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes reaction-ms-land {
  0% { transform: scale(1.18); }
  60% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@keyframes reaction-ring-beat {
  0% { opacity: 0.55; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes reaction-ring-ready {
  0%, 100% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes reaction-ring-go {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.25); opacity: 0; }
}

@keyframes reaction-flash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes reaction-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

@keyframes reaction-chip-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Number Baseball ? consolidated styles below (Schulte section) */

/* Simon */
.simon-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(360px, 94vw);
  padding: 12px 0 8px;
}

.simon-root--fail {
  animation: simon-root-fail-flash 0.52s ease;
}

.simon-hud {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.simon-phase-bar {
  display: flex;
  gap: 6px;
  width: 100%;
}

.simon-phase-step {
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}

.simon-phase-step--lit {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
}

.simon-phase-step--current {
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.12);
}

.simon-phase-bar .simon-phase-step:nth-child(1).simon-phase-step--current {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.45), rgba(71, 85, 105, 0.32));
  border-color: rgba(148, 163, 184, 0.5);
  box-shadow: 0 0 16px rgba(148, 163, 184, 0.28);
}

.simon-phase-bar .simon-phase-step:nth-child(2).simon-phase-step--current {
  background: linear-gradient(180deg, rgba(192, 38, 211, 0.5), rgba(126, 34, 206, 0.35));
  border-color: rgba(192, 38, 211, 0.55);
  box-shadow: 0 0 20px rgba(192, 38, 211, 0.38);
  animation: simon-phase-watch-glow 0.8s ease-in-out infinite alternate;
}

.simon-phase-bar .simon-phase-step:nth-child(3).simon-phase-step--current {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.55), rgba(22, 163, 74, 0.38));
  border-color: rgba(74, 222, 128, 0.6);
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.45);
  animation: simon-phase-input-glow 0.6s ease-in-out infinite alternate;
}

.simon-progress {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  opacity: 0;
  transform: scaleX(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.simon-progress--active {
  opacity: 1;
  transform: scaleX(1);
}

.simon-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4ade80, #22d3ee, #a78bfa);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.45);
  transition: width 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.simon-status {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.4em;
  letter-spacing: 0.02em;
  transition: color 0.25s ease, transform 0.25s ease;
}

.simon-status--watch {
  color: #d8b4fe;
  transform: scale(1.02);
}

.simon-status--input {
  color: #6ee7b7;
}

.simon-status--success {
  color: #4ade80;
  animation: simon-status-success-pop 0.45s ease;
}

.simon-status--fail {
  color: #f87171;
}

.simon-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
  padding: 16px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(192, 38, 211, 0.08), transparent 50%),
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(160deg, #1e1b2e 0%, #12101a 55%, #0c0a12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.simon-board--watching {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(192, 38, 211, 0.35),
    0 0 28px rgba(192, 38, 211, 0.18),
    0 12px 32px rgba(0, 0, 0, 0.35);
}

.simon-board--input {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(74, 222, 128, 0.35),
    0 0 24px rgba(74, 222, 128, 0.15),
    0 12px 32px rgba(0, 0, 0, 0.35);
}

.simon-board--success {
  animation: simon-success-pulse 0.55s ease;
}

.simon-board--shake {
  animation: simon-shake 0.52s ease;
}

.simon-btn {
  position: relative;
  aspect-ratio: 1;
  min-height: 112px;
  border-radius: 24px;
  border: 2px solid rgba(0, 0, 0, 0.38);
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, 0.32) 0%, transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.22) 0%, transparent 38%),
    linear-gradient(168deg, color-mix(in srgb, var(--simon-color) 90%, #fff) 0%, var(--simon-color) 46%, color-mix(in srgb, var(--simon-color) 68%, #000) 100%);
  opacity: 0.55;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.26),
    inset 0 -4px 10px rgba(0, 0, 0, 0.32),
    0 5px 14px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transition:
    opacity 0.14s ease,
    transform 0.12s cubic-bezier(0.34, 1.4, 0.64, 1),
    filter 0.14s ease,
    box-shadow 0.14s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.simon-btn-gloss {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 42%,
    transparent 58%,
    rgba(255, 255, 255, 0.06) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.simon-btn-shine {
  position: absolute;
  inset: 8% 10% auto;
  height: 32%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
  filter: blur(0.5px);
}

.simon-btn-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 transparent;
  pointer-events: none;
  z-index: 2;
  transition: box-shadow 0.15s ease;
}

.simon-btn:hover:not(:disabled) {
  opacity: 0.8;
  transform: scale(1.03);
  filter: brightness(1.1);
}

.simon-btn:active:not(:disabled) {
  transform: scale(0.93);
  filter: brightness(1.22);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.35),
    0 0 24px color-mix(in srgb, var(--simon-glow) 50%, transparent);
}

.simon-btn.lit {
  opacity: 1;
  filter: brightness(1.32) saturate(1.18);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18),
    0 0 22px color-mix(in srgb, var(--simon-glow) 62%, transparent),
    0 0 44px color-mix(in srgb, var(--simon-color) 45%, transparent),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.simon-btn.lit .simon-btn-shine {
  opacity: 0.95;
}

.simon-btn.lit .simon-btn-ring {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.simon-btn--seq.lit {
  animation: simon-seq-flash 0.35s ease;
}

.simon-btn--press.lit {
  animation: simon-press-pop 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.simon-btn--correct {
  animation: simon-correct-nudge 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.simon-btn--wrong {
  animation: simon-btn-wrong 0.42s ease;
}

.simon-btn:disabled {
  cursor: default;
}

.simon-btn:disabled:not(.lit) {
  opacity: 0.48;
}

.simon-pad-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.simon-pad-sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: var(--sc);
  box-shadow: 0 0 8px var(--sc);
  animation: simon-pad-sparkle 0.38s ease-out forwards;
}

.simon-streak-pop {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.7);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.9), rgba(34, 197, 94, 0.75));
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 28px rgba(74, 222, 128, 0.45);
  pointer-events: none;
  z-index: 20;
  animation: simon-streak-pop-in 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.simon-streak-pop--hot {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.85));
  box-shadow: 0 0 32px rgba(251, 191, 36, 0.5);
}

.simon-streak-pop--out {
  animation: simon-streak-pop-out 0.28s ease forwards;
}

.simon-level-flash {
  position: absolute;
  inset: -8px;
  border-radius: 32px;
  background: radial-gradient(ellipse at 50% 50%, rgba(74, 222, 128, 0.35), transparent 68%);
  pointer-events: none;
  z-index: 8;
  opacity: 0;
}

.simon-level-flash.is-active {
  animation: simon-level-flash 0.68s ease-out forwards;
}

.simon-start {
  min-width: 140px;
}

@keyframes simon-phase-watch-glow {
  from { box-shadow: 0 0 16px rgba(192, 38, 211, 0.3); }
  to { box-shadow: 0 0 26px rgba(192, 38, 211, 0.5); }
}

@keyframes simon-phase-input-glow {
  from { box-shadow: 0 0 18px rgba(74, 222, 128, 0.35); }
  to { box-shadow: 0 0 28px rgba(74, 222, 128, 0.55); }
}

@keyframes simon-seq-flash {
  0% {
    transform: scale(0.94);
    filter: brightness(1.05);
  }
  35% {
    transform: scale(1.08);
    filter: brightness(1.5) saturate(1.25);
  }
  100% {
    transform: scale(1);
    filter: brightness(1.32) saturate(1.18);
  }
}

@keyframes simon-press-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.88);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes simon-correct-nudge {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); filter: brightness(1.2); }
  100% { transform: scale(1); }
}

@keyframes simon-shake {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  12% {
    transform: translateX(-12px) rotate(-1.2deg);
  }
  24% {
    transform: translateX(12px) rotate(1.2deg);
  }
  36% {
    transform: translateX(-10px) rotate(-0.8deg);
  }
  48% {
    transform: translateX(10px) rotate(0.8deg);
  }
  60% {
    transform: translateX(-6px);
  }
  72% {
    transform: translateX(6px);
  }
  84% {
    transform: translateX(-3px);
  }
}

@keyframes simon-root-fail-flash {
  0%, 100% { filter: none; }
  25% { filter: brightness(0.92) saturate(0.85); }
  50% { filter: brightness(1.05); }
}

@keyframes simon-btn-wrong {
  0%,
  100% {
    filter: brightness(1);
  }
  25% {
    filter: brightness(0.65) saturate(0.5);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.65);
  }
  50% {
    filter: brightness(0.8);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  }
}

@keyframes simon-success-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 12px 32px rgba(0, 0, 0, 0.35);
  }
  40% {
    transform: scale(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 0 2px rgba(74, 222, 128, 0.45),
      0 0 32px rgba(34, 197, 94, 0.32),
      0 12px 36px rgba(34, 197, 94, 0.25);
  }
}

@keyframes simon-pad-sparkle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--sx), var(--sy)) scale(0.2);
  }
}

@keyframes simon-streak-pop-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes simon-streak-pop-out {
  to {
    opacity: 0;
    transform: translate(-50%, -70%) scale(0.85);
  }
}

@keyframes simon-level-flash {
  0% { opacity: 0.75; }
  100% { opacity: 0; }
}

@keyframes simon-status-success-pop {
  0% { transform: scale(0.96); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Loading */
.game-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- pong --- */
.pong-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.pong-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(45, 212, 191, 0.28),
    0 16px 40px rgba(8, 16, 24, 0.62);
  background: #081018;
}

.pong-controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
  touch-action: none;
}

.pong-btn {
  flex: 1;
  max-width: 120px;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 10px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.32);
}

.pong-btn-serve {
  max-width: 100px;
}

.pong-btn-ready {
  box-shadow:
    0 0 0 2px rgba(45, 212, 191, 0.5),
    0 4px 14px rgba(15, 23, 42, 0.32);
}

.pong-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.pong-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
}

.pong-btn:disabled {
  opacity: 0.45;
}

@media (min-width: 769px) {
  .pong-controls {
    display: none;
  }
}

/* --- air-hockey --- */
.air-hockey-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  touch-action: none;
}

.air-hockey-canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.28),
    0 16px 40px rgba(8, 16, 24, 0.62);
  background: #082f49;
  cursor: grab;
}

.air-hockey-canvas:active {
  cursor: grabbing;
}

.air-hockey-controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
  touch-action: none;
}

.air-hockey-btn {
  flex: 1;
  max-width: 140px;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 10px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.32);
}

.air-hockey-btn-ready {
  box-shadow:
    0 0 0 2px rgba(129, 140, 248, 0.5),
    0 4px 14px rgba(15, 23, 42, 0.32);
}

.air-hockey-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.air-hockey-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
}

.air-hockey-btn:disabled {
  opacity: 0.45;
}

@media (min-width: 769px) {
  .air-hockey-controls {
    display: none;
  }
}

/* Dino Run */
/* (canvas ?? ??? ??) */

/* Falling Dodge */
/* (canvas ?? ??? ??) */

@media (max-width: 640px) {
  .header-search {
    display: none;
  }

  .hero-stats {
    gap: 20px;
  }

  .game-grid {
    grid-template-columns: 1fr;
  }
}

/* Slide 15 */
.slide-15-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.slide-15-board {
  position: relative;
  width: min(320px, 92vw);
  aspect-ratio: 1;
  background:
    linear-gradient(160deg, rgba(139, 92, 246, 0.12), transparent 55%),
    linear-gradient(145deg, #1a1f2e 0%, #12161f 100%);
  border-radius: 14px;
  padding: 8px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 12px 28px rgba(0, 0, 0, 0.35);
  touch-action: none;
  overflow: hidden;
}

.slide-15-board::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: calc((100% - 24px) / 4 + 8px) calc((100% - 24px) / 4 + 8px);
  pointer-events: none;
  z-index: 0;
}

.slide-15-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.55), rgba(167, 139, 250, 0.2) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.slide-15-flash-on {
  animation: slide-15-flash 0.55s ease-out forwards;
}

@keyframes slide-15-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.slide-15-board.slide-15-clearing {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px rgba(196, 181, 253, 0.55),
    0 0 32px rgba(139, 92, 246, 0.45);
}

.slide-15-tile {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: calc((100% - 16px - 24px) / 4);
  height: calc((100% - 16px - 24px) / 4);
  margin: 0;
  display: grid;
  place-items: center;
  font-size: clamp(1rem, 5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    linear-gradient(145deg, #a78bfa 0%, #7c3aed 55%, #6d28d9 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(55, 20, 120, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 -2px 0 rgba(55, 20, 120, 0.35) inset,
    0 6px 14px rgba(76, 29, 149, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s cubic-bezier(0.22, 0.9, 0.28, 1),
    filter 0.15s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
  touch-action: manipulation;
  will-change: transform;
}

.slide-15-tile:hover {
  filter: brightness(1.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32) inset,
    0 -2px 0 rgba(55, 20, 120, 0.35) inset,
    0 8px 18px rgba(76, 29, 149, 0.55),
    0 3px 6px rgba(0, 0, 0, 0.28);
}

.slide-15-tile:active {
  filter: brightness(0.94);
}

.slide-15-tile-nudge {
  animation: slide-15-nudge 0.22s ease;
}

@keyframes slide-15-nudge {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.18); }
  100% { filter: brightness(1); }
}

.slide-15-tile-win {
  animation: slide-15-win-pop 0.45s cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

@keyframes slide-15-win-pop {
  0% { transform: scale(1); }
  45% { filter: brightness(1.25); }
  100% { filter: brightness(1.08); }
}

/* Lights Out */
.lights-out-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.lights-out-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: min(400px, 96vw);
}

.lights-out-hud-item {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #0f172a 28%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.lights-out-hud-level {
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

.lights-out-hud-moves {
  color: #e2e8f0;
}

.lights-out-hud-moves.lights-out-hud-pop {
  animation: lights-out-hud-pop 0.32s ease;
}

.lights-out-hud-remain {
  color: #94a3b8;
}

.lights-out-hud-remain--hot {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 14px rgba(251, 191, 36, 0.2);
}

.lights-out-hud-remain--done {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
}

.lights-out-progress {
  flex: 1 1 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.lights-out-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #86efac, #fbbf24);
  box-shadow: 0 0 12px rgba(134, 239, 172, 0.45);
  transition: width 0.28s ease;
}

.lights-out-goal {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(148, 163, 184, 0.25);
}

.lights-out-frame {
  position: relative;
  padding: 10px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, #2a3144 0%, #1a2030 45%, #121826 100%);
  border: 2px solid rgba(148, 163, 184, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 8px rgba(0, 0, 0, 0.45),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.lights-out-frame::before,
.lights-out-frame::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #64748b, #1e293b 70%);
  border: 1px solid rgba(15, 23, 42, 0.8);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.lights-out-frame::before {
  top: 8px;
  left: 8px;
}

.lights-out-frame::after {
  top: 8px;
  right: 8px;
}

.lights-out-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.lights-out-flash {
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.lights-out-flash--toggle {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22), transparent 68%);
}

.lights-out-flash--clear {
  background: radial-gradient(circle at 50% 50%, rgba(253, 224, 71, 0.42), transparent 72%);
}

.lights-out-flash--win {
  background: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.55), rgba(52, 211, 153, 0.2) 55%, transparent 78%);
}

.lights-out-flash--active {
  animation: lights-out-screen-flash 0.45s ease-out forwards;
}

.lights-out-clear-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fffbeb;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.92), rgba(217, 119, 6, 0.88));
  border: 2px solid #fde68a;
  box-shadow:
    0 0 28px rgba(251, 191, 36, 0.65),
    0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
}

.lights-out-clear-banner--show {
  animation: lights-out-banner-pop 0.78s cubic-bezier(0.22, 1.12, 0.36, 1) forwards;
}

.lights-out-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: min(400px, 94vw);
  aspect-ratio: 1;
  padding: 16px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 19px,
      rgba(148, 163, 184, 0.04) 19px,
      rgba(148, 163, 184, 0.04) 20px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 19px,
      rgba(148, 163, 184, 0.04) 19px,
      rgba(148, 163, 184, 0.04) 20px
    ),
    radial-gradient(ellipse at 50% 18%, rgba(251, 191, 36, 0.1), transparent 58%),
    linear-gradient(160deg, #151a28 0%, #0d111b 55%, #121826 100%);
  border-radius: 16px;
  border: 1px solid rgba(71, 85, 105, 0.45);
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.35s ease;
  overflow: visible;
}

.lights-out-board.lights-out-board--enter {
  animation: lights-out-board-enter 0.4s ease;
}

.lights-out-board.lights-out-clearing {
  animation: lights-out-clear-flash 0.9s ease;
}

.lights-out-board.lights-out-board--victory {
  animation: lights-out-victory-glow 1.1s ease-in-out;
}

.lights-out-cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 56px;
  border-radius: 50%;
  padding: 0;
  overflow: visible;
  background:
    radial-gradient(circle at 40% 32%, #2a3144 0%, #141824 62%, #0a0d14 100%);
  border: 2px solid rgba(71, 85, 105, 0.65);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.3);
  transition:
    background 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    transform 0.12s ease,
    filter 0.22s ease;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.lights-out-cell-halo,
.lights-out-cell-glow,
.lights-out-cell-core,
.lights-out-cell-filament {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.lights-out-cell-halo {
  inset: -18%;
  opacity: 0;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.42) 0%, transparent 68%);
  filter: blur(4px);
  transition: opacity 0.25s ease;
}

.lights-out-cell-glow {
  inset: 0;
  opacity: 0.35;
  background: radial-gradient(circle at 50% 55%, transparent 42%, rgba(0, 0, 0, 0.45) 100%);
}

.lights-out-cell-core {
  inset: 28%;
  background: radial-gradient(circle at 35% 30%, rgba(148, 163, 184, 0.14), transparent 70%);
  opacity: 0.55;
}

.lights-out-cell-filament {
  inset: 38%;
  opacity: 0;
  background: linear-gradient(
    160deg,
    transparent 42%,
    rgba(148, 163, 184, 0.35) 48%,
    rgba(148, 163, 184, 0.35) 52%,
    transparent 58%
  );
  transform: rotate(-18deg);
}

.lights-out-cell.on {
  background:
    radial-gradient(circle at 32% 28%, #fffceb 0%, #fde68a 28%, #fbbf24 58%, #d97706 100%);
  border-color: #fcd34d;
  box-shadow:
    0 0 12px rgba(251, 191, 36, 0.65),
    0 0 32px rgba(245, 158, 11, 0.5),
    0 0 56px rgba(217, 119, 6, 0.28),
    inset 0 -3px 8px rgba(180, 83, 9, 0.45),
    inset 0 2px 6px rgba(255, 255, 255, 0.55);
  filter: saturate(1.12);
}

.lights-out-cell.on .lights-out-cell-halo {
  opacity: 1;
  animation: lights-out-halo-pulse 2.4s ease-in-out infinite;
}

.lights-out-cell.on .lights-out-cell-glow {
  opacity: 1;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.78) 0%, transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.38), transparent 70%);
  animation: lights-out-lit-breathe 2.2s ease-in-out infinite;
}

.lights-out-cell.on .lights-out-cell-core {
  inset: 22%;
  opacity: 1;
  background: radial-gradient(circle at 35% 30%, #fffef5, #fde68a 55%, transparent 75%);
}

.lights-out-cell.on .lights-out-cell-filament {
  opacity: 0.85;
  background: linear-gradient(
    160deg,
    transparent 40%,
    rgba(255, 251, 235, 0.95) 47%,
    rgba(253, 224, 71, 0.9) 53%,
    transparent 60%
  );
  filter: drop-shadow(0 0 4px rgba(253, 224, 71, 0.8));
}

.lights-out-cell:hover {
  transform: scale(1.07);
}

.lights-out-cell:active,
.lights-out-cell.lights-out-cell--press {
  transform: scale(0.88);
}

.lights-out-cell.lights-out-cell--pulse {
  animation: lights-out-pulse 0.28s ease;
}

.lights-out-cell.lights-out-cell--cascade {
  animation: lights-out-cascade 0.32s ease;
}

.lights-out-cell.lights-out-cell--flash {
  animation: lights-out-cell-flash 0.22s ease;
}

.lights-out-cell.lights-out-cell--celebrate {
  animation: lights-out-celebrate 0.55s ease forwards;
}

.lights-out-ripple {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, 0.55);
  background: rgba(148, 163, 184, 0.12);
  pointer-events: none;
  animation: lights-out-ripple 0.45s ease-out forwards;
  z-index: 2;
}

.lights-out-ripple.on {
  border-color: rgba(253, 224, 71, 0.9);
  background: rgba(251, 191, 36, 0.32);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.55);
}

.lights-out-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--pc, #fbbf24);
  box-shadow: 0 0 12px var(--pc, #fbbf24);
  animation: lights-out-particle 0.75s ease-out forwards;
}

@keyframes lights-out-hud-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.14);
    color: #fff;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lights-out-screen-flash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes lights-out-banner-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -58%) scale(0.92);
  }
}

@keyframes lights-out-halo-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes lights-out-lit-breathe {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

@keyframes lights-out-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lights-out-cascade {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(251, 191, 36, 0);
  }
  35% {
    transform: scale(1.1);
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.45);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(251, 191, 36, 0);
  }
}

@keyframes lights-out-cell-flash {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.65);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes lights-out-ripple {
  0% {
    transform: scale(0.35);
    opacity: 0.95;
  }
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

@keyframes lights-out-clear-flash {
  0% {
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
  25% {
    filter: brightness(1.65) saturate(1.3);
    transform: scale(1.04);
  }
  55% {
    filter: brightness(1.25);
    transform: scale(1.01);
  }
  100% {
    filter: brightness(1.05);
    opacity: 0.55;
    transform: scale(0.98);
  }
}

@keyframes lights-out-celebrate {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 10px rgba(251, 191, 36, 0.4),
      inset 0 0 0 transparent;
  }
  45% {
    transform: scale(1.2);
    background: radial-gradient(circle at 35% 30%, #fff, #fde68a 40%, #fbbf24 70%);
    box-shadow:
      0 0 28px rgba(253, 224, 71, 0.95),
      0 0 52px rgba(251, 191, 36, 0.6);
  }
  100% {
    transform: scale(0.85);
    opacity: 0.35;
    filter: brightness(1.45);
  }
}

@keyframes lights-out-particle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0.15);
    opacity: 0;
  }
}

@keyframes lights-out-board-enter {
  0% {
    opacity: 0.4;
    transform: scale(0.94);
    filter: brightness(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

@keyframes lights-out-victory-glow {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.55);
  }
  50% {
    filter: brightness(1.35) saturate(1.2);
    box-shadow:
      inset 0 2px 12px rgba(0, 0, 0, 0.35),
      0 0 36px rgba(251, 191, 36, 0.45);
  }
}

/* Odd Color */
.odd-color-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 0 4px;
  transition: opacity 0.5s ease, filter 0.5s ease;
}

.odd-color-wrap.odd-color-wrap--gameover {
  animation: odd-color-wrap-gameover 0.65s ease;
}

.odd-color-board-shell {
  position: relative;
  width: min(380px, 94vw);
}

.odd-color-board {
  display: grid;
  gap: 7px;
  width: 100%;
  aspect-ratio: 1;
  padding: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.1), transparent 58%),
    linear-gradient(165deg, #1a1f2e 0%, #12151f 52%, #0f1219 100%);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 36px rgba(0, 0, 0, 0.38);
  transition: transform 0.15s ease, border-color 0.2s ease, filter 0.35s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.odd-color-board.odd-color-board--enter {
  animation: odd-color-board-enter 0.38s ease;
}

.odd-color-board.odd-color-penalty {
  animation: odd-color-shake 0.38s ease;
  border-color: rgba(248, 113, 113, 0.65);
}

.odd-color-board.odd-color-board--gameover {
  animation: odd-color-board-gameover 0.65s ease;
  filter: saturate(0.75) brightness(0.88);
}

.odd-color-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}

.odd-color-flash {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

.odd-color-flash.is-correct {
  animation: odd-color-flash-correct 0.32s ease;
}

.odd-color-flash.is-wrong {
  animation: odd-color-flash-wrong 0.34s ease;
}

.odd-color-flash.is-gameover {
  animation: odd-color-flash-gameover 0.68s ease;
}

.odd-color-cell {
  position: relative;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.14s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.14s ease,
    filter 0.14s ease;
}

.odd-color-cell-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.08) 28%,
    transparent 52%
  );
}

.odd-color-cell:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.16),
    0 0 0 2px rgba(255, 255, 255, 0.18),
    0 5px 14px rgba(0, 0, 0, 0.28);
}

.odd-color-cell:active {
  transform: scale(0.94);
}

.odd-color-cell.odd-color-wrong {
  animation: odd-color-wrong-pulse 0.36s ease;
  box-shadow:
    inset 0 0 0 3px #f87171,
    0 0 18px rgba(248, 113, 113, 0.45);
}

.odd-color-cell.odd-color-correct {
  animation: odd-color-correct-pop 0.34s cubic-bezier(0.34, 1.5, 0.64, 1);
  box-shadow:
    inset 0 0 0 3px #4ade80,
    0 0 22px rgba(74, 222, 128, 0.5);
  filter: brightness(1.12);
}

.odd-color-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pc, #fff);
  box-shadow: 0 0 8px var(--pc, #fff);
  opacity: 0.95;
  animation: odd-color-particle 0.72s ease-out forwards;
}

.odd-color-score-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  font-weight: 700;
  color: #4ade80;
  text-shadow: 0 0 12px rgba(74, 222, 128, 0.7);
  pointer-events: none;
  animation: odd-color-score-pop 0.62s ease-out forwards;
}

.odd-color-hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.02em;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.odd-color-hint.odd-color-hint--urgent {
  color: #fca5a5;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.35);
  animation: odd-color-hint-pulse 1s ease-in-out infinite;
}

@keyframes odd-color-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@keyframes odd-color-board-enter {
  0% {
    opacity: 0.55;
    transform: scale(0.96);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

@keyframes odd-color-board-gameover {
  0%, 100% { transform: translateX(0) scale(1); }
  15% { transform: translateX(-8px) scale(0.98); }
  30% { transform: translateX(8px) scale(0.98); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: scale(0.97); }
}

@keyframes odd-color-wrap-gameover {
  0% { opacity: 1; }
  40% { opacity: 0.82; }
  100% { opacity: 0.92; }
}

@keyframes odd-color-flash-correct {
  0% { opacity: 0; background: transparent; }
  35% { opacity: 0.55; background: rgba(74, 222, 128, 0.28); }
  100% { opacity: 0; background: transparent; }
}

@keyframes odd-color-flash-wrong {
  0% { opacity: 0; background: transparent; }
  40% { opacity: 0.65; background: rgba(248, 113, 113, 0.32); }
  100% { opacity: 0; background: transparent; }
}

@keyframes odd-color-flash-gameover {
  0% { opacity: 0; background: transparent; }
  25% { opacity: 0.75; background: rgba(251, 191, 36, 0.22); }
  55% { opacity: 0.5; background: rgba(99, 102, 241, 0.18); }
  100% { opacity: 0; background: transparent; }
}

@keyframes odd-color-correct-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1.04); }
}

@keyframes odd-color-wrong-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(0.94); filter: brightness(0.82); }
}

@keyframes odd-color-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.2);
  }
}

@keyframes odd-color-score-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -110%) scale(0.85);
  }
}

@keyframes odd-color-hint-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* Pattern Memory */
.pm-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 10px 0 6px;
}

.pm-hud {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.pm-phase-bar {
  display: flex;
  gap: 8px;
  width: 100%;
}

.pm-phase-step {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}

.pm-phase-step--lit {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.1);
}

.pm-phase-step--current {
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.12);
}

.pm-phase-bar .pm-phase-step:nth-child(1).pm-phase-step--current {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.55), rgba(109, 40, 217, 0.35));
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.42);
  animation: pm-phase-watch-glow 0.8s ease-in-out infinite alternate;
}

.pm-phase-bar .pm-phase-step:nth-child(2).pm-phase-step--current {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.55), rgba(22, 163, 74, 0.38));
  border-color: rgba(74, 222, 128, 0.6);
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.45);
  animation: pm-phase-input-glow 0.6s ease-in-out infinite alternate;
}

@keyframes pm-phase-watch-glow {
  0% { box-shadow: 0 0 14px rgba(139, 92, 246, 0.3); }
  100% { box-shadow: 0 0 28px rgba(139, 92, 246, 0.55); }
}

@keyframes pm-phase-input-glow {
  0% { box-shadow: 0 0 14px rgba(74, 222, 128, 0.3); }
  100% { box-shadow: 0 0 28px rgba(74, 222, 128, 0.55); }
}

.pm-progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  opacity: 0;
  transform: scaleX(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pm-progress--active {
  opacity: 1;
  transform: scaleX(1);
}

.pm-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34d399, #22d3ee, #a78bfa);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.45);
  transition: width 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.pm-progress-label {
  align-self: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6ee7b7;
  min-height: 1.1em;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pm-progress-label--active {
  opacity: 1;
  transform: translateY(0);
}

.pm-status {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.4em;
  letter-spacing: 0.02em;
  transition: color 0.2s, transform 0.2s;
}

.pm-status--flash {
  color: #c4b5fd;
  transform: scale(1.02);
  animation: pm-status-pulse 0.6s ease;
}

.pm-status--input {
  color: #6ee7b7;
}

.pm-status--success {
  color: #34d399;
  animation: pm-status-pop 0.45s ease;
}

.pm-status--fail {
  color: var(--danger);
  animation: pm-status-shake 0.4s ease;
}

@keyframes pm-status-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.85; }
}

@keyframes pm-status-pop {
  0% { transform: scale(0.95); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes pm-status-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.pm-lives {
  display: flex;
  gap: 8px;
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pm-life {
  display: inline-block;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.pm-life--full {
  filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.35));
}

.pm-life--empty {
  opacity: 0.45;
  transform: scale(0.88);
}

.pm-life--lost {
  animation: pm-life-lost 0.55s ease;
}

@keyframes pm-life-lost {
  0% { transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6)); }
  40% { transform: scale(0.7) rotate(-12deg); opacity: 0.6; }
  100% { transform: scale(0.88); opacity: 0.45; }
}

.pm-board {
  position: relative;
  display: grid;
  gap: 9px;
  width: min(420px, 96vw);
  aspect-ratio: 1;
  padding: 16px;
  touch-action: none;
  border-radius: 22px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 25% 15%, rgba(139, 92, 246, 0.14), transparent 50%),
    linear-gradient(155deg, #1a1628 0%, #12101c 50%, #0d0b14 100%);
  background-size: 18px 18px, 18px 18px, auto, auto;
  border: 1px solid color-mix(in srgb, #8b5cf6 28%, var(--border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.25s ease, transform 0.3s ease;
}

.pm-board--large {
  gap: 11px;
  width: min(440px, 96vw);
}

.pm-board--compact {
  gap: 7px;
  padding: 14px;
}

.pm-board--watching {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 2px rgba(139, 92, 246, 0.4),
    0 0 36px rgba(139, 92, 246, 0.22),
    0 16px 40px rgba(0, 0, 0, 0.4);
  animation: pm-board-watch-pulse 1.2s ease-in-out infinite alternate;
}

.pm-board--input {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 2px rgba(52, 211, 153, 0.35),
    0 0 28px rgba(52, 211, 153, 0.14),
    0 16px 40px rgba(0, 0, 0, 0.4);
}

@keyframes pm-board-watch-pulse {
  0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 2px rgba(139, 92, 246, 0.35), 0 0 28px rgba(139, 92, 246, 0.16), 0 16px 40px rgba(0, 0, 0, 0.4); }
  100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 2px rgba(139, 92, 246, 0.5), 0 0 44px rgba(139, 92, 246, 0.28), 0 16px 40px rgba(0, 0, 0, 0.4); }
}

.pm-board--success {
  animation: pm-board-success 0.65s ease;
}

.pm-board--celebrate {
  animation: pm-board-celebrate 0.65s ease;
}

.pm-board--shake {
  animation: pm-board-shake 0.5s ease;
}

@keyframes pm-board-celebrate {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.03); }
  65% { transform: scale(0.99); }
}

@keyframes pm-board-success {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 36px rgba(0, 0, 0, 0.38); }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 0 2px rgba(52, 211, 153, 0.4),
      0 0 32px rgba(52, 211, 153, 0.2),
      0 14px 36px rgba(0, 0, 0, 0.38);
  }
}

@keyframes pm-board-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-0.4deg); }
  35% { transform: translateX(6px) rotate(0.4deg); }
  55% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.pm-cell {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, transparent 45%),
    linear-gradient(180deg, #2a2640 0%, #1e1b30 55%, #161328 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
  min-width: 0;
}

.pm-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.12), transparent 55%);
  pointer-events: none;
  opacity: 0.7;
}

.pm-cell:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 2px rgba(255, 255, 255, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.28);
}

.pm-cell:active:not(:disabled) {
  transform: scale(0.94);
}

.pm-cell:disabled {
  cursor: default;
}

.pm-cell--lit {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.38) 0%, transparent 40%),
    linear-gradient(180deg, #a78bfa 0%, #8b5cf6 45%, #6d28d9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 24px rgba(139, 92, 246, 0.7),
    0 0 48px rgba(139, 92, 246, 0.3);
  transform: scale(1.06);
  animation: pm-cell-glow 0.7s ease-in-out infinite alternate;
}

.pm-cell--reveal {
  animation: pm-cell-reveal 0.5s ease;
}

@keyframes pm-cell-reveal {
  0% { transform: scale(0.92); filter: brightness(0.8); }
  50% { transform: scale(1.08); filter: brightness(1.2); }
  100% { transform: scale(1.04); filter: brightness(1); }
}

@keyframes pm-cell-glow {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.12); }
}

.pm-cell--correct,
.pm-cell--picked {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.25) 0%, transparent 40%),
    linear-gradient(180deg, #6ee7b7 0%, #34d399 50%, #059669 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.25),
    inset 0 0 0 4px var(--success),
    0 0 14px rgba(52, 211, 153, 0.45);
}

.pm-cell--pop {
  animation: pm-cell-pop 0.32s ease;
}

.pm-cell--tick {
  animation: pm-cell-tick 0.3s ease;
}

@keyframes pm-cell-tick {
  0% { transform: scale(0.9); }
  45% { transform: scale(1.14); filter: brightness(1.2); }
  100% { transform: scale(1); }
}

@keyframes pm-cell-pop {
  0% { transform: scale(0.82); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1.06); }
}

.pm-cell--wrong {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
    linear-gradient(180deg, #f87171 0%, #ef4444 55%, #b91c1c 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.2),
    inset 0 0 0 4px var(--danger),
    0 0 16px rgba(239, 68, 68, 0.45);
  animation: pm-cell-wrong 0.38s ease;
}

@keyframes pm-cell-wrong {
  0%, 100% { transform: translateX(0) scale(1); }
  20% { transform: translateX(-5px) scale(0.97); }
  40% { transform: translateX(5px) scale(0.97); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.pm-particle-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.pm-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--pc, #34d399);
  box-shadow: 0 0 6px var(--pc, #34d399);
  animation: pm-particle-fly 0.5s ease-out forwards;
}

@keyframes pm-particle-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.2);
  }
}

.pm-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  z-index: 5;
}

.pm-flash--success {
  background: radial-gradient(circle at center, rgba(52, 211, 153, 0.45), transparent 68%);
}

.pm-flash--fail {
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.38), transparent 68%);
}

.pm-flash--active {
  animation: pm-flash-in 0.55s ease-out;
}

@keyframes pm-flash-in {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

.pm-start-overlay {
  border-radius: 16px;
}

.pm-start {
  margin-top: 4px;
}

/* Chimp Memory */
.cm-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 16px 14px 20px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245, 158, 11, 0.1), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-elevated) 92%, #1c1917), var(--bg-elevated));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.22);
  transition: opacity 0.35s ease, filter 0.35s ease, box-shadow 0.35s ease;
}

.cm-wrap--recall {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(20, 184, 166, 0.18),
    0 12px 32px rgba(0, 0, 0, 0.22);
}

.cm-wrap--clear {
  animation: cm-wrap-clear 0.65s ease;
}

@keyframes cm-wrap-clear {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.08); }
}

.cm-wrap--over {
  opacity: 0.88;
  filter: saturate(0.75);
}

.cm-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 16px;
  width: 100%;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.cm-phase-bar {
  display: flex;
  gap: 6px;
  flex: 1 1 100%;
  width: 100%;
}

.cm-phase-step {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-elevated) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.2s ease;
}

.cm-phase-step--lit {
  color: rgba(255, 255, 255, 0.82);
  background: color-mix(in srgb, #14b8a6 18%, var(--bg-elevated));
  border-color: color-mix(in srgb, #14b8a6 35%, var(--border));
}

.cm-phase-step--current {
  color: #fff;
  transform: scale(1.03);
}

.cm-phase-bar .cm-phase-step:nth-child(1).cm-phase-step--current {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.55), rgba(217, 119, 6, 0.38));
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.38);
}

.cm-phase-bar .cm-phase-step:nth-child(2).cm-phase-step--current {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.5), rgba(37, 99, 235, 0.35));
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
}

.cm-phase-bar .cm-phase-step:nth-child(3).cm-phase-step--current {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.55), rgba(13, 148, 136, 0.38));
  border-color: rgba(45, 212, 191, 0.6);
  box-shadow: 0 0 22px rgba(20, 184, 166, 0.42);
}

.cm-hud-item {
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, #f59e0b 20%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cm-level {
  color: #fbbf24;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}

.cm-fails {
  color: var(--text-muted);
}

.cm-best {
  color: var(--success);
}

.cm-fail-dots {
  display: flex;
  gap: 8px;
  padding: 2px 0;
}

.cm-fail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--border) 50%, var(--bg-elevated));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.cm-fail-dot--used {
  background: linear-gradient(145deg, #f87171, #ef4444);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
  transform: scale(1.1);
  animation: cm-fail-dot-pop 0.35s ease;
}

@keyframes cm-fail-dot-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1.1); }
}

.cm-recall-prog {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 40%, var(--bg-elevated));
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.cm-recall-prog--active {
  opacity: 1;
  transform: translateY(0);
}

.cm-recall-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #5eead4, #fbbf24);
  box-shadow: 0 0 10px rgba(20, 184, 166, 0.45);
  transition: width 0.22s ease-out;
}

.cm-recall-label {
  position: absolute;
  right: 0;
  top: -1.35em;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #5eead4;
  text-shadow: 0 0 8px rgba(20, 184, 166, 0.35);
}

.cm-status {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.4em;
  transition: color 0.2s ease, transform 0.2s ease;
}

.cm-status--success {
  color: var(--success);
  animation: cm-status-pop 0.38s ease;
}

.cm-status--fail {
  color: var(--danger);
  animation: cm-status-shake 0.4s ease;
}

.cm-status--flash {
  animation: cm-status-pulse 0.45s ease;
}

@keyframes cm-status-pop {
  0% { transform: scale(0.95); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes cm-status-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes cm-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.cm-board {
  position: relative;
  margin: 0 auto;
  touch-action: none;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 20%, rgba(245, 158, 11, 0.12), transparent 50%),
    linear-gradient(155deg, #1c1917 0%, #171412 50%, #0f0e0c 100%);
  background-size: 16px 16px, 16px 16px, auto, auto;
  border: 1px solid color-mix(in srgb, #f59e0b 22%, var(--border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 2px 12px rgba(0, 0, 0, 0.2),
    0 10px 28px rgba(0, 0, 0, 0.32);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cm-board--memorize {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(251, 191, 36, 0.3),
    0 0 24px rgba(245, 158, 11, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.32);
}

.cm-board--recall {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(20, 184, 166, 0.25),
    0 0 20px rgba(20, 184, 166, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.32);
}

.cm-board--success {
  animation: cm-board-success 0.5s ease;
}

.cm-board--shake {
  animation: cm-board-shake 0.45s ease;
}

.cm-board--over {
  filter: grayscale(0.35) brightness(0.85);
}

.cm-board--reveal {
  animation: cm-board-reveal 0.52s ease;
}

@keyframes cm-board-reveal {
  0%, 100% { filter: brightness(1); }
  30% { filter: brightness(1.15); }
}

@keyframes cm-board-success {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 28px rgba(0, 0, 0, 0.32); }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 0 2px rgba(52, 211, 153, 0.4),
      0 0 32px rgba(52, 211, 153, 0.2),
      0 10px 28px rgba(0, 0, 0, 0.32);
  }
}

@keyframes cm-board-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-0.3deg); }
  35% { transform: translateX(6px) rotate(0.3deg); }
  55% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.cm-tile {
  position: absolute;
  overflow: hidden;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-size: clamp(1.15rem, 5vw, 1.6rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  min-width: 56px;
  min-height: 56px;
}

.cm-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.28), transparent 55%);
  pointer-events: none;
  opacity: 0.75;
}

.cm-tile--show {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, transparent 42%),
    linear-gradient(180deg, #fcd34d 0%, #f59e0b 48%, #d97706 100%);
  color: #1c1917;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(180, 83, 9, 0.25),
    0 4px 12px rgba(245, 158, 11, 0.4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.cm-tile--hidden {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, transparent 45%),
    linear-gradient(180deg, #3f3f46 0%, #27272a 55%, #1f1f23 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 5px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.cm-tile--hidden:hover:not(:disabled) {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, #14b8a6 35%, #3f3f46) 0%, #27272a 100%);
  transform: scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px rgba(20, 184, 166, 0.25),
    0 4px 10px rgba(0, 0, 0, 0.25);
}

.cm-tile--done {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.3) 0%, transparent 42%),
    linear-gradient(180deg, #5eead4 0%, #14b8a6 50%, #0d9488 100%);
  color: #042f2e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 14px rgba(20, 184, 166, 0.45);
  cursor: default;
}

.cm-tile--show:hover:not(:disabled) {
  transform: scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 2px rgba(251, 191, 36, 0.35),
    0 6px 16px rgba(245, 158, 11, 0.45);
}

.cm-tile:active:not(:disabled) {
  transform: scale(0.94);
}

.cm-tile:disabled {
  cursor: default;
}

.cm-tile--pop {
  animation: cm-tile-pop 0.32s ease;
}

.cm-tile--tick {
  animation: cm-tile-tick 0.34s ease;
  z-index: 2;
}

@keyframes cm-tile-tick {
  0% { transform: scale(0.92); filter: brightness(1); }
  45% { transform: scale(1.14); filter: brightness(1.2); box-shadow: 0 0 18px rgba(20, 184, 166, 0.55); }
  100% { transform: scale(1); filter: brightness(1); }
}

.cm-tile--reveal {
  animation: cm-tile-reveal 0.48s ease;
}

@keyframes cm-tile-reveal {
  0% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes cm-tile-pop {
  0% { transform: scale(0.88); }
  55% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.cm-tile--wrong {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
    linear-gradient(180deg, #f87171 0%, #ef4444 55%, #b91c1c 100%) !important;
  color: #fff;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.2),
    inset 0 0 0 4px var(--danger),
    0 0 16px rgba(239, 68, 68, 0.45);
  animation: cm-tile-wrong 0.38s ease;
}

@keyframes cm-tile-wrong {
  0%, 100% { transform: translateX(0) scale(1); }
  20% { transform: translateX(-5px) scale(0.97); }
  40% { transform: translateX(5px) scale(0.97); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.cm-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  z-index: 5;
}

.cm-flash--success {
  background: radial-gradient(circle at 50% 50%, rgba(52, 211, 153, 0.35), transparent 70%);
}

.cm-flash--fail {
  background: radial-gradient(circle at 50% 50%, rgba(239, 68, 68, 0.35), transparent 70%);
}

.cm-flash--active {
  animation: cm-flash-in 0.42s ease-out;
}

@keyframes cm-flash-in {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.cm-particle-burst,
.cm-clear-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.cm-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--pc, #fbbf24);
  box-shadow: 0 0 6px var(--pc, #fbbf24);
  animation: cm-particle-fly 0.5s ease-out forwards;
}

.cm-particle--clear {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  animation: cm-particle-fly-clear 0.72s ease-out forwards;
}

@keyframes cm-particle-fly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

@keyframes cm-particle-fly-clear {
  0% {
    transform: translate(0, 0) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

.cm-start-overlay {
  border-radius: 18px;
}

.cm-start {
  margin-top: 4px;
}

.cm-tick-pop {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #5eead4;
  text-shadow: 0 0 10px rgba(20, 184, 166, 0.6);
  pointer-events: none;
  z-index: 8;
  animation: cm-tick-rise 0.58s ease-out forwards;
}

.cm-tick-pop--combo {
  font-size: 1.35rem;
  color: #fcd34d;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.7);
}

@keyframes cm-tick-rise {
  0% { opacity: 1; transform: translate(-50%, -80%) scale(0.7); }
  55% { opacity: 1; transform: translate(-50%, -150%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -200%) scale(0.85); }
}

.cm-level-clear {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.7);
  padding: 12px 22px;
  border-radius: 14px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #042f2e;
  background: linear-gradient(145deg, #6ee7b7, #14b8a6 55%, #0d9488);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 28px rgba(20, 184, 166, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}

.cm-level-clear--active {
  animation: cm-level-clear-in 0.82s ease forwards;
}

@keyframes cm-level-clear-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  25% { opacity: 1; transform: translate(-50%, -58%) scale(1.12); }
  70% { opacity: 1; transform: translate(-50%, -62%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(0.95); }
}

/* Speed Math */
.speed-math-root {
  position: relative;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 16px 22px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(16, 185, 129, 0.16), transparent 55%),
    linear-gradient(165deg, rgba(148, 163, 184, 0.07), transparent 42%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.speed-math-root--shake {
  animation: sm-shake 0.5s ease;
}

.speed-math-root--over {
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.3),
    0 12px 32px rgba(239, 68, 68, 0.14);
}

.speed-math-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.speed-math-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.speed-math-flash.is-ok {
  background: radial-gradient(circle at 50% 45%, rgba(52, 211, 153, 0.28), transparent 65%);
  opacity: 1;
}

.speed-math-flash.is-bad {
  background: radial-gradient(circle at 50% 45%, rgba(239, 68, 68, 0.22), transparent 65%);
  opacity: 1;
}

.speed-math-flash.is-over {
  background: radial-gradient(circle at 50% 40%, rgba(239, 68, 68, 0.35), transparent 70%);
  opacity: 1;
}

.speed-math-timer {
  position: relative;
  z-index: 2;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 800;
  color: #10b981;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent),
    linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow:
    0 4px 14px rgba(16, 185, 129, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.speed-math-timer--urgent {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
  box-shadow:
    0 4px 16px rgba(239, 68, 68, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: sm-timer-pulse 0.85s ease-in-out infinite;
}

.speed-math-combo {
  position: relative;
  z-index: 2;
  min-height: 1.4rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #f59e0b;
  text-align: center;
  letter-spacing: 0.02em;
}

.speed-math-combo.is-hot {
  font-size: 0.95rem;
  color: #f97316;
  text-shadow: 0 0 12px rgba(249, 115, 22, 0.45);
}

.speed-math-tier {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.speed-math-problem-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 18px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    var(--bg-card);
  border: 1px solid var(--border);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.speed-math-problem {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  min-height: 2.5rem;
  background: linear-gradient(135deg, var(--text), rgba(148, 163, 184, 0.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.speed-math-choices {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

.speed-math-choice {
  min-height: 52px;
  padding: 18px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--bg-card);
  border: 2px solid var(--border);
  font-size: clamp(1.1rem, 4.5vw, 1.35rem);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  touch-action: manipulation;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
  -webkit-tap-highlight-color: transparent;
}

.speed-math-choice:hover:not(:disabled) {
  border-color: rgba(16, 185, 129, 0.55);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04)),
    var(--bg-card);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.16);
}

.speed-math-choice:active:not(:disabled) {
  transform: scale(0.96);
}

.speed-math-choice:disabled {
  cursor: default;
  opacity: 0.88;
}

.speed-math-choice.correct {
  border-color: var(--success);
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.28), rgba(16, 185, 129, 0.12));
  color: var(--success);
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.35),
    0 6px 18px rgba(52, 211, 153, 0.22);
}

.speed-math-choice.wrong {
  border-color: var(--danger);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.08));
  color: var(--danger);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.3),
    0 6px 16px rgba(239, 68, 68, 0.16);
}

.speed-math-feedback {
  position: relative;
  z-index: 2;
  min-height: 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.speed-math-feedback.ok {
  color: var(--success);
}

.speed-math-feedback.bad {
  color: var(--danger);
}

.speed-math-pop {
  animation: sm-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.speed-math-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  pointer-events: none;
  animation: sm-particle 0.55s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

.speed-math-particle--ok {
  opacity: 0.95;
}

.speed-math-particle--bad {
  opacity: 0.85;
}

@keyframes sm-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
}

@keyframes sm-pop {
  0% { transform: scale(0.92); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes sm-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

@keyframes sm-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* Schulte Table */
.schulte-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 6px 0 4px;
}

.schulte-wrap.schulte-wrap--penalty {
  animation: schulte-penalty-shake 0.42s ease;
}

.schulte-wrap.schulte-wrap--celebrate {
  animation: schulte-celebrate-glow 1.15s ease;
}

.schulte-hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(440px, 96vw);
  transition: transform 0.25s ease, filter 0.25s ease;
}

.schulte-hud.schulte-hud--combo {
  animation: schulte-hud-combo 0.48s ease;
}

.schulte-hud.schulte-hud--milestone {
  animation: schulte-hud-milestone 0.52s ease;
}

.schulte-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}

.schulte-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  border-radius: inherit;
}

.schulte-flash--hit {
  animation: schulte-flash-hit 0.38s ease;
}

.schulte-flash--penalty {
  animation: schulte-flash-penalty 0.42s ease;
}

.schulte-flash--win {
  animation: schulte-flash-win 0.9s ease;
}

.schulte-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 12px 24px 14px;
  border-radius: calc(var(--radius) + 2px);
  background:
    linear-gradient(155deg, rgba(16, 185, 129, 0.28), rgba(5, 150, 105, 0.12)),
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(110, 231, 183, 0.18), transparent 70%);
  border: 2px solid rgba(52, 211, 153, 0.45);
  box-shadow:
    0 6px 24px rgba(16, 185, 129, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.schulte-target-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(167, 243, 208, 0.95);
}

.schulte-target-num {
  font-size: clamp(2.4rem, 11vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 24px rgba(52, 211, 153, 0.65),
    0 3px 14px rgba(0, 0, 0, 0.35);
}

.schulte-target.schulte-target--pulse {
  animation: schulte-target-pop 0.34s ease;
}

.schulte-target.schulte-target--complete .schulte-target-num {
  color: #fde68a;
  text-shadow: 0 0 22px rgba(251, 191, 36, 0.8);
}

.schulte-progress {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(52, 211, 153, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.schulte-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.55);
  transition: width 0.22s ease-out;
}

.schulte-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.schulte-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(7px, 2vw, 10px);
  width: min(440px, 96vw);
  padding: 16px;
  border-radius: calc(var(--radius) + 4px);
  background:
    linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(6, 78, 59, 0.35)),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 27px,
      rgba(52, 211, 153, 0.05) 27px,
      rgba(52, 211, 153, 0.05) 28px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 27px,
      rgba(52, 211, 153, 0.05) 27px,
      rgba(52, 211, 153, 0.05) 28px
    );
  border: 1px solid rgba(52, 211, 153, 0.28);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 2px 0 rgba(255, 255, 255, 0.07) inset;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.schulte-board.schulte-board--penalty {
  animation: schulte-board-penalty-shake 0.42s ease;
}

.schulte-board.schulte-board--win {
  animation: schulte-board-win-flash 1.15s ease;
}

.schulte-cell {
  position: relative;
  aspect-ratio: 1;
  min-height: clamp(56px, 14vw, 68px);
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(var(--radius-sm) + 3px);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.3) 0%, transparent 42%),
    linear-gradient(155deg, #34d399 0%, #10b981 48%, #059669 100%);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 5px 14px rgba(5, 150, 105, 0.38),
    inset 0 -3px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.schulte-cell-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.24) 0%,
    transparent 38%,
    transparent 100%
  );
  pointer-events: none;
}

.schulte-cell-num {
  position: relative;
  z-index: 1;
  font-size: clamp(1.05rem, 5vw, 1.35rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.schulte-cell--next {
  border-color: rgba(253, 230, 138, 0.75);
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, 0.35),
    0 0 22px rgba(251, 191, 36, 0.45),
    0 5px 14px rgba(5, 150, 105, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: schulte-cell-next-pulse 1.6s ease-in-out infinite;
}

.schulte-cell:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.12);
  box-shadow:
    0 7px 18px rgba(5, 150, 105, 0.48),
    inset 0 -3px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.schulte-cell:active:not(:disabled) {
  transform: scale(0.9);
}

.schulte-cell--hit {
  animation: schulte-cell-pop 0.3s ease;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 0 24px rgba(52, 211, 153, 0.8);
}

.schulte-cell--done {
  opacity: 0.34;
  transform: scale(0.9);
  pointer-events: none;
  background:
    linear-gradient(155deg, rgba(52, 211, 153, 0.5) 0%, rgba(5, 150, 105, 0.4) 100%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18);
  animation: none;
}

.schulte-cell--miss {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    linear-gradient(155deg, #f87171 0%, #ef4444 55%, #dc2626 100%);
  border-color: rgba(254, 202, 202, 0.5);
  box-shadow:
    0 0 22px rgba(239, 68, 68, 0.65),
    inset 0 -3px 6px rgba(0, 0, 0, 0.15);
  animation: schulte-cell-shake 0.42s ease;
}

.schulte-cell--celebrate {
  animation: schulte-cell-celebrate 0.6s ease forwards;
}

.schulte-float {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, 0);
  font-size: clamp(0.95rem, 4.5vw, 1.15rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  animation: schulte-float-rise 0.8s ease-out forwards;
  z-index: 5;
}

.schulte-float--penalty {
  color: #fca5a5;
  text-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
}

.schulte-float--combo {
  color: #fde68a;
  font-size: clamp(1.1rem, 5vw, 1.35rem);
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.75);
}

.schulte-float--milestone {
  color: #a7f3d0;
  font-size: clamp(1rem, 4.8vw, 1.25rem);
  text-shadow: 0 0 16px rgba(52, 211, 153, 0.7);
}

.schulte-clear-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  padding: 14px 32px;
  border-radius: 999px;
  font-size: clamp(1.2rem, 5.5vw, 1.55rem);
  font-weight: 900;
  color: #fff;
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.88));
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 32px rgba(16, 185, 129, 0.55),
    0 0 40px rgba(52, 211, 153, 0.4);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
}

.schulte-clear-banner--show {
  animation: schulte-clear-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.schulte-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pc, #6ee7b7);
  box-shadow: 0 0 10px var(--pc, #6ee7b7);
  animation: schulte-particle 0.54s ease-out forwards;
}

.schulte-particle--win {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  animation: schulte-particle-win 0.92s ease-out forwards;
}

@keyframes schulte-target-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes schulte-hud-combo {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(1.04); filter: brightness(1.25); }
}

@keyframes schulte-hud-milestone {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes schulte-cell-next-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(251, 191, 36, 0.3),
      0 0 18px rgba(251, 191, 36, 0.35),
      0 5px 14px rgba(5, 150, 105, 0.38);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(251, 191, 36, 0.55),
      0 0 28px rgba(251, 191, 36, 0.55),
      0 5px 14px rgba(5, 150, 105, 0.38);
  }
}

@keyframes schulte-cell-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.16); }
  100% { transform: scale(0.9); }
}

@keyframes schulte-cell-shake {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
  15% { transform: translateX(-7px) rotate(-2deg) scale(1.03); }
  30% { transform: translateX(7px) rotate(2deg) scale(1.03); }
  45% { transform: translateX(-6px) rotate(-1.5deg) scale(1.02); }
  60% { transform: translateX(6px) rotate(1.5deg) scale(1.02); }
  75% { transform: translateX(-3px) rotate(-0.5deg) scale(1); }
}

@keyframes schulte-penalty-shake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-8px); }
  24% { transform: translateX(8px); }
  36% { transform: translateX(-6px); }
  48% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
  84% { transform: translateX(-2px); }
}

@keyframes schulte-board-penalty-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-4px) rotate(-0.4deg); }
  40% { transform: translateX(4px) rotate(0.4deg); }
  60% { transform: translateX(-3px) rotate(-0.3deg); }
  80% { transform: translateX(3px) rotate(0.3deg); }
}

@keyframes schulte-flash-hit {
  0% { opacity: 0; background: transparent; }
  25% { opacity: 0.35; background: rgba(52, 211, 153, 0.25); }
  100% { opacity: 0; background: transparent; }
}

@keyframes schulte-flash-penalty {
  0% { opacity: 0; background: transparent; }
  20% { opacity: 0.55; background: rgba(239, 68, 68, 0.28); }
  100% { opacity: 0; background: transparent; }
}

@keyframes schulte-flash-win {
  0% { opacity: 0; background: transparent; }
  20% { opacity: 0.5; background: rgba(251, 191, 36, 0.22); }
  45% { opacity: 0.35; background: rgba(52, 211, 153, 0.2); }
  100% { opacity: 0; background: transparent; }
}

@keyframes schulte-float-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.85);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -42px) scale(0.95);
  }
}

@keyframes schulte-clear-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes schulte-board-win-flash {
  0% {
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
  22% {
    filter: brightness(1.4) saturate(1.25);
    transform: scale(1.04);
  }
  50% {
    filter: brightness(1.2) saturate(1.12);
    transform: scale(1.02);
  }
  100% {
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
}

@keyframes schulte-celebrate-glow {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.25); }
  70% { filter: brightness(1.1); }
}

@keyframes schulte-cell-celebrate {
  0% {
    transform: scale(0.9);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
  }
  45% {
    transform: scale(1.1);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.65),
      0 0 26px rgba(52, 211, 153, 0.75);
  }
  100% {
    transform: scale(0.9);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
  }
}

@keyframes schulte-particle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

@keyframes schulte-particle-win {
  0% {
    transform: translate(0, 0) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

/* Number Baseball */
.nb-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 16px 14px 20px;
  border-radius: 20px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(ellipse 120% 70% at 50% -15%, rgba(14, 165, 233, 0.16), transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(52, 211, 153, 0.1), transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-elevated) 90%, #0ea5e9 10%), var(--bg));
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nb-root--win {
  animation: nb-root-win-glow 1.1s ease forwards;
}

.nb-root--shake {
  animation: nb-root-shake 0.48s ease;
}

.nb-root--shake-hard {
  animation: nb-root-shake-hard 0.62s ease;
}

.nb-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 4;
}

.nb-toast {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.92);
  z-index: 6;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
  white-space: nowrap;
}

.nb-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.nb-toast--near {
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.55);
}

.nb-toast--out {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.5);
}

.nb-toast--good {
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.45);
}

.nb-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.nb-hud-goal {
  flex: 1 1 100%;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.nb-hud-pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #e0f2fe;
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.35), rgba(2, 132, 199, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.nb-hud-best {
  color: #fef3c7;
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.25));
  border-color: rgba(251, 191, 36, 0.4);
}

.nb-options {
  width: 100%;
  display: flex;
  justify-content: center;
}

.nb-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.nb-option input {
  accent-color: #0ea5e9;
}

.nb-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2px;
}

.nb-input-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nb-digit-count {
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transition: color 0.2s, transform 0.2s;
}

.nb-digit-count--full {
  color: #34d399;
  transform: scale(1.06);
}

.nb-slots {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  transition: box-shadow 0.25s ease;
}

.nb-slots--flash-good {
  animation: nb-slots-flash-good 0.48s ease;
}

.nb-slots--flash-miss {
  animation: nb-slots-flash-miss 0.48s ease;
}

.nb-slots--flash-near {
  animation: nb-slots-flash-near 0.52s ease;
}

.nb-slots--incomplete {
  animation: nb-slots-incomplete 0.42s ease;
}

.nb-slot {
  width: 56px;
  height: 64px;
  display: grid;
  place-items: center;
  font-size: 1.85rem;
  font-weight: 800;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 45%),
    linear-gradient(160deg, var(--bg-elevated), color-mix(in srgb, var(--bg) 70%, #0ea5e9 30%));
  border: 2px solid rgba(56, 189, 248, 0.35);
  color: var(--text);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}

.nb-slot.filled {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.2),
    0 6px 16px rgba(14, 165, 233, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.nb-slot.empty {
  color: var(--text-muted);
  opacity: 0.35;
  font-size: 1.4rem;
}

.nb-slot--pop {
  animation: nb-slot-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.nb-status {
  min-height: 1.25em;
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s;
}

.nb-status--warn {
  color: #fbbf24;
}

.nb-status--miss {
  color: #f87171;
}

.nb-status--good {
  color: #34d399;
}

.nb-status--near {
  color: #fb923c;
  font-weight: 800;
}

.nb-status--win {
  color: #fbbf24;
  font-weight: 800;
}

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

.nb-key {
  min-height: 52px;
  aspect-ratio: 1.05;
  font-size: 1.3rem;
  font-weight: 800;
  border-radius: 12px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.35) 0%, transparent 42%),
    linear-gradient(155deg, #38bdf8 0%, #0ea5e9 55%, #0284c7 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    0 4px 0 rgba(2, 132, 199, 0.55),
    0 6px 14px rgba(14, 165, 233, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.1s ease, filter 0.15s, box-shadow 0.1s;
}

.nb-key:hover:not(:disabled) {
  filter: brightness(1.08);
}

.nb-key:active:not(:disabled) {
  transform: scale(0.94) translateY(2px);
  box-shadow:
    0 2px 0 rgba(2, 132, 199, 0.55),
    0 3px 8px rgba(14, 165, 233, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nb-key:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.35);
  box-shadow: none;
}

.nb-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.nb-actions .btn {
  flex: 1;
  min-height: 48px;
  touch-action: manipulation;
}

.nb-btn-submit {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.nb-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2px;
}

.nb-history-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nb-history-count {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #38bdf8;
}

.nb-log {
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}

.nb-log-empty {
  margin: 0;
  padding: 18px 8px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  opacity: 0.7;
}

.nb-log-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.92rem;
}

.nb-log-row--enter {
  animation: nb-log-row-in 0.38s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.nb-log-row--out {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), var(--bg-elevated));
  border-color: rgba(239, 68, 68, 0.25);
  animation: nb-log-row-out 0.45s ease;
}

.nb-log-row--strike {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.1), var(--bg-elevated));
  border-color: rgba(52, 211, 153, 0.22);
}

.nb-log-row--ball {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.1), var(--bg-elevated));
  border-color: rgba(56, 189, 248, 0.22);
}

.nb-log-row--near {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.16), var(--bg-elevated));
  border-color: rgba(249, 115, 22, 0.35);
  animation: nb-log-row-near 0.5s ease;
}

.nb-log-row--win {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.2), rgba(52, 211, 153, 0.15));
  border-color: rgba(251, 191, 36, 0.45);
  animation: nb-log-row-win 0.55s ease;
}

.nb-log-guess {
  font-weight: 800;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.nb-log-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nb-badge {
  display: inline-grid;
  place-items: center;
  min-width: 2.4em;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.nb-badge--pop {
  animation: nb-badge-pop 0.36s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.nb-badge--strike {
  color: #ecfdf5;
  background: linear-gradient(145deg, #34d399, #059669);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.45);
}

.nb-badge--ball {
  color: #e0f2fe;
  background: linear-gradient(145deg, #38bdf8, #0284c7);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.nb-badge--out {
  color: #fff;
  background: linear-gradient(145deg, #f87171, #dc2626);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
}

.nb-badge--win {
  color: #fff;
  background: linear-gradient(145deg, #fbbf24, #d97706);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.55);
}

.nb-win-banner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(251, 191, 36, 0.28), transparent 65%);
  transition: opacity 0.35s ease;
}

.nb-win-banner--show {
  opacity: 1;
  animation: nb-win-banner-in 0.85s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

.nb-win-banner__icon {
  font-size: 3rem;
  animation: nb-win-icon-bounce 0.7s ease infinite alternate;
}

.nb-win-banner__text {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fef3c7;
  text-shadow:
    0 0 20px rgba(251, 191, 36, 0.8),
    0 2px 8px rgba(0, 0, 0, 0.35);
}

.nb-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pc, #6ee7b7);
  box-shadow: 0 0 10px var(--pc, #6ee7b7);
  animation: nb-particle 0.65s ease-out forwards;
}

.nb-particle--near {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  animation: nb-particle-near 0.78s ease-out forwards;
}

.nb-particle--win {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  animation: nb-particle-win 0.95s ease-out forwards;
}

@keyframes nb-root-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes nb-root-shake-hard {
  0%, 100% { transform: translateX(0) rotate(0); }
  12% { transform: translateX(-8px) rotate(-0.5deg); }
  28% { transform: translateX(8px) rotate(0.5deg); }
  44% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  76% { transform: translateX(-3px); }
}

@keyframes nb-root-win-glow {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.25) saturate(1.15); }
  100% { filter: brightness(1.05); }
}

@keyframes nb-slot-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes nb-slots-flash-good {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.2); box-shadow: 0 0 24px rgba(52, 211, 153, 0.35); }
}

@keyframes nb-slots-flash-miss {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(0.85); box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); }
}

@keyframes nb-slots-flash-near {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.25); box-shadow: 0 0 28px rgba(249, 115, 22, 0.5); }
}

@keyframes nb-slots-incomplete {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes nb-log-row-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nb-log-row-out {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px); }
  36% { transform: translateX(5px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
}

@keyframes nb-log-row-near {
  0% { transform: scale(1); }
  35% { transform: scale(1.03); box-shadow: 0 0 16px rgba(249, 115, 22, 0.35); }
  100% { transform: scale(1); }
}

@keyframes nb-log-row-win {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); box-shadow: 0 0 22px rgba(251, 191, 36, 0.45); }
  100% { transform: scale(1); }
}

@keyframes nb-badge-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes nb-win-banner-in {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes nb-win-icon-bounce {
  from { transform: translateY(0) rotate(-8deg); }
  to { transform: translateY(-6px) rotate(8deg); }
}

@keyframes nb-particle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

@keyframes nb-particle-near {
  0% {
    transform: translate(0, 0) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

@keyframes nb-particle-win {
  0% {
    transform: translate(0, 0) scale(1.3);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

/* Stroop Test */
.stroop-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 18px 14px 22px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(244, 63, 94, 0.14), transparent 55%),
    radial-gradient(ellipse 90% 60% at 100% 100%, rgba(59, 130, 246, 0.1), transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-elevated) 92%, #6366f1 8%), var(--bg));
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.stroop-wrap--shake {
  animation: stroop-shake 0.42s ease;
}

.stroop-wrap--gameover {
  opacity: 0.88;
  transition: opacity 0.35s ease;
}

@keyframes stroop-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-0.4deg); }
  30% { transform: translateX(7px) rotate(0.4deg); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.stroop-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.stroop-timer {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s, transform 0.2s;
}

.stroop-timer--urgent {
  color: #f43f5e;
  animation: stroop-timer-pulse 0.85s ease-in-out infinite;
}

@keyframes stroop-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.stroop-combo {
  min-height: 1.4em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: transparent;
  transition: color 0.15s, transform 0.2s;
}

.stroop-combo-num {
  font-size: 1.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stroop-combo-text {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.stroop-combo--active {
  color: #f59e0b;
  transform: scale(1.04);
}

.stroop-combo--hot {
  color: #ef4444;
  animation: stroop-combo-glow 0.6s ease-in-out infinite alternate;
}

.stroop-combo--blazing {
  color: #f43f5e;
  animation: stroop-combo-blaze 0.45s ease-in-out infinite alternate;
}

@keyframes stroop-combo-glow {
  from { text-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
  to { text-shadow: 0 0 16px rgba(239, 68, 68, 0.7); }
}

@keyframes stroop-combo-blaze {
  from { transform: scale(1.04); text-shadow: 0 0 10px rgba(244, 63, 94, 0.6); }
  to { transform: scale(1.1); text-shadow: 0 0 20px rgba(250, 204, 21, 0.8); }
}

.stroop-wrap--streak-3 {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 24px rgba(245, 158, 11, 0.12);
}

.stroop-wrap--streak-5 {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 32px rgba(239, 68, 68, 0.18);
}

.stroop-wrap--streak-10 {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 40px rgba(244, 63, 94, 0.28);
  animation: stroop-streak-pulse 1.2s ease-in-out infinite;
}

@keyframes stroop-streak-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}

.stroop-timer-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.stroop-timer-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.45);
}

.stroop-wrap:has(.stroop-timer--urgent) .stroop-timer-fill {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.stroop-options {
  width: 100%;
  display: flex;
  justify-content: center;
}

.stroop-mixed-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  border: 1px solid var(--border);
  transition: border-color 0.15s, background 0.15s;
}

.stroop-mixed-label:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.stroop-mixed-label input {
  accent-color: #f43f5e;
  width: 18px;
  height: 18px;
}

.stroop-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.stroop-flash {
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

.stroop-flash--on {
  animation: stroop-flash 0.38s ease forwards;
}

.stroop-flash--ok {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.35), transparent 70%);
}

.stroop-flash--bad {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.32), transparent 70%);
}

.stroop-flash--over {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.28), transparent 75%);
}

@keyframes stroop-flash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

.stroop-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stroop-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.stroop-confetti-piece {
  position: absolute;
  width: 7px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: stroop-confetti 0.95s ease-out forwards;
}

@keyframes stroop-confetti {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.4);
  }
}

.stroop-milestone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #f59e0b;
  text-shadow:
    0 2px 12px rgba(245, 158, 11, 0.55),
    0 0 24px rgba(239, 68, 68, 0.35);
  pointer-events: none;
  opacity: 0;
  z-index: 7;
  white-space: nowrap;
}

.stroop-milestone--show.stroop-milestone--pop {
  animation: stroop-milestone-pop 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes stroop-milestone-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1.15);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -62%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -78%) scale(0.85);
  }
}

.stroop-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  animation: stroop-particle 0.55s ease-out forwards;
}

@keyframes stroop-particle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.2);
    opacity: 0;
  }
}

.stroop-score-pop {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  font-size: 1.35rem;
  font-weight: 900;
  color: #22c55e;
  text-shadow: 0 2px 8px rgba(34, 197, 94, 0.45);
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.stroop-score-pop--show {
  animation: stroop-score-pop 0.55s ease forwards;
}

.stroop-score-pop--big {
  font-size: 1.65rem;
  color: #f59e0b;
  text-shadow: 0 2px 12px rgba(245, 158, 11, 0.55);
}

@keyframes stroop-score-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.7);
  }
  25% {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-28px) scale(0.9);
  }
}

.stroop-hint {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  transition: color 0.2s, background 0.2s;
}

.stroop-hint--word-mode {
  color: #818cf8;
  background: color-mix(in srgb, #6366f1 12%, var(--bg));
}

.stroop-word-card {
  --card-accent: #6366f1;
  position: relative;
  width: 100%;
  padding: 28px 20px;
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-elevated) 88%, #fff 12%),
    var(--bg-elevated)
  );
  border: 2px solid color-mix(in srgb, var(--card-accent) 35%, var(--border));
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 8%, transparent);
}

.stroop-word-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--card-accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}

.stroop-word {
  position: relative;
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  min-height: 1.2em;
  text-align: center;
  user-select: none;
  transition: color 0.15s;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ink-glow, #888) 40%, transparent));
}

.stroop-word--pop {
  animation: stroop-word-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes stroop-word-pop {
  0% { transform: scale(0.88); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.stroop-word--light {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.stroop-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

.stroop-choice {
  --choice-color: var(--accent);
  --choice-glow: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 12px;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 14px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--bg-elevated) 90%, #fff 10%),
    var(--bg-elevated)
  );
  border: 2px solid color-mix(in srgb, var(--choice-color) 28%, var(--border));
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.12s ease, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.stroop-choice-swatch {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.25);
}

.stroop-choice-label {
  color: var(--choice-color);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.stroop-choice:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--choice-color) 55%, var(--border));
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--choice-glow) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stroop-choice:active:not(:disabled) {
  transform: scale(0.96) translateY(0);
}

.stroop-choice.correct {
  border-color: #22c55e;
  background: linear-gradient(160deg, color-mix(in srgb, #22c55e 22%, var(--bg-elevated)), var(--bg-elevated));
  animation: stroop-choice-correct 0.35s ease;
}

.stroop-choice.wrong {
  border-color: var(--danger);
  background: linear-gradient(160deg, color-mix(in srgb, var(--danger) 18%, var(--bg-elevated)), var(--bg-elevated));
  animation: stroop-choice-wrong 0.35s ease;
}

.stroop-choice--reveal {
  border-color: #22c55e !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, #22c55e 35%, transparent),
    0 6px 20px rgba(34, 197, 94, 0.35) !important;
  animation: stroop-choice-reveal 0.55s ease;
}

@keyframes stroop-choice-reveal {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.05); }
}

@keyframes stroop-choice-correct {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.06); }
}

@keyframes stroop-choice-wrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.stroop-feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
  transition: color 0.15s, transform 0.15s;
}

.stroop-feedback.ok {
  color: #22c55e;
  animation: stroop-feedback-pop 0.3s ease;
}

.stroop-feedback.bad {
  color: var(--danger);
  animation: stroop-feedback-pop 0.3s ease;
}

@keyframes stroop-feedback-pop {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 420px) {
  .stroop-wrap {
    padding: 14px 10px 18px;
    border-radius: 16px;
  }

  .stroop-choice {
    min-height: 48px;
    padding: 12px 10px;
    font-size: 1rem;
  }

  .stroop-word-card {
    padding: 22px 16px;
  }
}

/* ?? Anagram ?? */
.anagram-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 16px 20px;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(34, 197, 94, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 55% at 100% 100%, rgba(99, 102, 241, 0.1), transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-elevated) 92%, #22c55e 8%), var(--bg));
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.anagram-wrap--shake {
  animation: anagram-shake 0.42s ease;
}

.anagram-wrap--gameover {
  opacity: 0.88;
  transition: opacity 0.35s ease;
}

@keyframes anagram-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-0.4deg); }
  30% { transform: translateX(7px) rotate(0.4deg); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.anagram-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.anagram-timer {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s, transform 0.2s;
}

.anagram-timer--urgent {
  color: #f43f5e;
  animation: anagram-timer-pulse 0.85s ease-in-out infinite;
}

@keyframes anagram-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.anagram-combo {
  min-height: 1.2em;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: transparent;
  transition: color 0.15s, transform 0.2s;
}

.anagram-combo--active {
  color: #f59e0b;
  transform: scale(1.02);
}

.anagram-combo--hot {
  color: #ef4444;
  animation: anagram-combo-glow 0.6s ease-in-out infinite alternate;
}

@keyframes anagram-combo-glow {
  from { text-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
  to { text-shadow: 0 0 16px rgba(239, 68, 68, 0.7); }
}

.anagram-timer-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.anagram-timer-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #6366f1);
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
}

.anagram-wrap:has(.anagram-timer--urgent) .anagram-timer-fill {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.anagram-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.anagram-flash {
  pointer-events: none;
  position: absolute;
  inset: -8px;
  border-radius: 16px;
  opacity: 0;
  z-index: 4;
}

.anagram-flash--on {
  animation: anagram-flash 0.38s ease forwards;
}

.anagram-flash--ok {
  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.35), transparent 70%);
}

.anagram-flash--bad {
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.3), transparent 70%);
}

.anagram-flash--over {
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.35), transparent 70%);
}

@keyframes anagram-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.anagram-particles {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 5;
}

.anagram-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  animation: anagram-particle 0.55s ease-out forwards;
}

@keyframes anagram-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

.anagram-score-pop {
  pointer-events: none;
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 6;
  font-size: 1.1rem;
  font-weight: 800;
  color: #22c55e;
  opacity: 0;
  transform: translateY(8px) scale(0.8);
  text-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.anagram-score-pop--show {
  animation: anagram-score-pop 0.55s ease forwards;
}

@keyframes anagram-score-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.8); }
  30% { opacity: 1; transform: translateY(-4px) scale(1.12); }
  100% { opacity: 0; transform: translateY(-18px) scale(1); }
}

.anagram-meaning {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  line-height: 1.4;
  padding: 10px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elevated) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.anagram-hint-line {
  min-height: 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #f59e0b;
  text-align: center;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.anagram-hint-line--active {
  transform: scale(1.03);
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}

.anagram-answer-label,
.anagram-pool-label {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.anagram-answer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2, rgba(255, 255, 255, 0.06)) 90%, transparent);
  border: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.anagram-answer--ok {
  border-color: #22c55e;
  border-style: solid;
  background: color-mix(in srgb, #22c55e 12%, var(--surface-2, rgba(255, 255, 255, 0.06)));
  box-shadow:
    inset 0 0 18px rgba(34, 197, 94, 0.18),
    0 0 20px rgba(34, 197, 94, 0.25);
  animation: anagram-answer-ok 0.48s ease;
}

.anagram-answer--wrong {
  border-color: var(--danger, #ef4444);
  border-style: solid;
  background: color-mix(in srgb, #ef4444 10%, var(--surface-2, rgba(255, 255, 255, 0.06)));
  box-shadow:
    inset 0 0 14px rgba(239, 68, 68, 0.15),
    0 0 16px rgba(239, 68, 68, 0.2);
  animation: anagram-answer-wrong 0.5s ease;
}

@keyframes anagram-answer-ok {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.03); }
}

@keyframes anagram-answer-wrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.anagram-answer-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 46px;
  border-radius: 12px;
  border: 2px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
}

.anagram-answer-placeholder {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.anagram-answer-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 46px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 1.25rem;
  font-weight: 800;
  background: linear-gradient(145deg, #6366f1, #4f46e5);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 4px 0 #3730a3,
    0 6px 14px rgba(99, 102, 241, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.anagram-answer-letter:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 #3730a3,
    0 8px 18px rgba(99, 102, 241, 0.4);
}

.anagram-answer-letter:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #3730a3,
    0 3px 8px rgba(99, 102, 241, 0.3);
}

.anagram-pool {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.anagram-tile {
  min-width: 46px;
  height: 50px;
  padding: 0 12px;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--surface) 95%, #fff 5%), var(--surface, rgba(255, 255, 255, 0.08)));
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  box-shadow:
    0 3px 0 color-mix(in srgb, var(--border) 60%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.anagram-tile:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow:
    0 5px 0 color-mix(in srgb, var(--accent) 40%, transparent),
    0 6px 16px rgba(99, 102, 241, 0.2);
}

.anagram-tile:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--border) 60%, transparent),
    0 3px 6px rgba(0, 0, 0, 0.06);
}

.anagram-tile:disabled,
.anagram-tile.used {
  opacity: 0.22;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.anagram-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.anagram-btn {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--surface) 95%, #fff 5%), var(--surface, rgba(255, 255, 255, 0.08)));
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--border) 50%, transparent);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.anagram-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 35%, transparent);
}

.anagram-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--border) 50%, transparent);
}

.anagram-btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.anagram-btn-submit {
  border-color: transparent;
  min-width: 100px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #000);
}

.anagram-btn-submit:hover:not(:disabled) {
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 60%, #000);
}

.anagram-btn-back {
  font-size: 1.2rem;
  min-width: 52px;
}

.anagram-btn-hint {
  color: #f59e0b;
  border-color: color-mix(in srgb, #f59e0b 40%, var(--border));
}

.anagram-feedback {
  min-height: 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.anagram-feedback.ok {
  color: #22c55e;
  animation: anagram-feedback-pop 0.35s ease;
}

.anagram-feedback.bad {
  color: var(--danger);
  animation: anagram-feedback-pop 0.35s ease;
}

@keyframes anagram-feedback-pop {
  0% { transform: scale(0.92); opacity: 0.6; }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 420px) {
  .anagram-wrap {
    padding: 14px 10px 18px;
    border-radius: 16px;
    gap: 12px;
  }

  .anagram-hud {
    gap: 6px;
  }

  .anagram-hud-pill {
    min-height: 36px;
    font-size: 0.8rem;
    padding: 4px 6px;
  }

  .anagram-hud-timer {
    font-size: 0.9rem;
  }

  .anagram-tile {
    min-width: 44px;
    height: 48px;
    font-size: 1.15rem;
  }

  .anagram-answer-letter,
  .anagram-answer-slot {
    min-width: 38px;
    height: 42px;
  }

  .anagram-answer-letter {
    font-size: 1.15rem;
  }

  .anagram-btn {
    min-height: 44px;
    padding: 0 14px;
  }

  .anagram-meaning {
    font-size: 1rem;
    padding: 8px 12px;
  }
}

/* ?? Chosung Quiz ?? */
.cq-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 18px;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(45, 212, 191, 0.14), transparent 55%),
    linear-gradient(165deg,
      color-mix(in srgb, #0d9488 7%, var(--bg-elevated)) 0%,
      var(--bg-card) 45%,
      color-mix(in srgb, #115e59 5%, var(--bg-elevated)) 100%);
  border: 1px solid color-mix(in srgb, #0d9488 20%, var(--border));
  box-shadow:
    0 8px 28px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
}

.cq-root--shake {
  animation: cq-shake 0.42s ease-out;
}

.cq-root--complete {
  animation: cq-complete-glow 0.7s ease-out;
}

.cq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
}

.cq-progress {
  font-size: 0.85rem;
  font-weight: 700;
  color: #2dd4bf;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, #0d9488 12%, transparent);
  border: 1px solid color-mix(in srgb, #2dd4bf 25%, transparent);
}

.cq-score {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: color 0.2s, transform 0.2s;
}

.cq-score--pop {
  animation: cq-score-pop 0.38s ease-out;
}

.cq-streak {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

.cq-streak--hot {
  color: #fbbf24;
  background: color-mix(in srgb, #fbbf24 14%, var(--bg-elevated));
  border-color: color-mix(in srgb, #fbbf24 35%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, #fbbf24 30%, transparent);
}

.cq-streak--pop {
  animation: cq-streak-pop 0.38s ease-out;
}

.cq-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.cq-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d9488, #14b8a6, #2dd4bf);
  box-shadow: 0 0 10px color-mix(in srgb, #2dd4bf 50%, transparent);
  transition: width 0.35s ease-out;
}

.cq-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.cq-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  border: 1px solid var(--border);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.cq-dot--current {
  background: #2dd4bf;
  border-color: #0d9488;
  box-shadow: 0 0 8px color-mix(in srgb, #2dd4bf 45%, transparent);
  transform: scale(1.15);
}

.cq-dot--done,
.cq-dot--correct {
  background: #22c55e;
  border-color: #16a34a;
}

.cq-dot--miss {
  background: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 70%, transparent);
}

.cq-cue {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  border: 1px dashed color-mix(in srgb, #0d9488 25%, var(--border));
}

.cq-category {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: linear-gradient(135deg,
    color-mix(in srgb, #0d9488 18%, transparent),
    color-mix(in srgb, #2dd4bf 10%, transparent));
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.35);
  box-shadow: 0 2px 8px color-mix(in srgb, #0d9488 15%, transparent);
}

.cq-chosung {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--text);
  padding: 22px 28px;
  border-radius: 16px;
  background: linear-gradient(145deg,
    color-mix(in srgb, #fff 8%, var(--bg-elevated)),
    var(--bg-card));
  border: 2px solid color-mix(in srgb, #0d9488 25%, var(--border));
  min-width: 200px;
  text-align: center;
  box-shadow:
    0 6px 20px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cq-chosung--enter {
  animation: cq-chosung-enter 0.38s ease-out;
}

.cq-chosung--pop {
  animation: cq-chosung-pop 0.34s ease-out;
}

.cq-hint-box {
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 14px;
  border-radius: 12px;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

.cq-hint-box.visible {
  color: #fbbf24;
  font-weight: 600;
  background: color-mix(in srgb, #fbbf24 10%, transparent);
  border: 1px solid color-mix(in srgb, #fbbf24 25%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, #fbbf24 15%, transparent);
  animation: cq-hint-reveal 0.35s ease-out;
}

.cq-form {
  display: flex;
  gap: 8px;
  width: 100%;
}

.cq-input {
  flex: 1;
  padding: 14px 16px;
  min-height: 48px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: linear-gradient(160deg, var(--bg-card), var(--bg-elevated));
  color: var(--text);
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
}

.cq-input:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow:
    0 0 0 3px color-mix(in srgb, #0d9488 22%, transparent),
    0 4px 14px color-mix(in srgb, #0d9488 12%, transparent);
}

.cq-input--bad {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.cq-input--shake {
  animation: cq-input-shake 0.42s ease-out;
}

.cq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.cq-btn {
  min-width: 120px;
  min-height: 48px;
  border-radius: 14px;
  touch-action: manipulation;
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

.cq-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.1);
}

.cq-btn:active:not(:disabled) {
  transform: scale(0.97) translateY(0);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.cq-submit-btn {
  box-shadow: 0 4px 14px color-mix(in srgb, #0d9488 25%, transparent);
}

.cq-hint-btn {
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
  background: linear-gradient(160deg,
    color-mix(in srgb, #fbbf24 8%, var(--bg-card)),
    var(--bg-elevated));
}

.cq-hint-btn:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 5px 16px color-mix(in srgb, #fbbf24 18%, transparent);
}

.cq-reveal-btn {
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--danger);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--danger) 6%, var(--bg-card)),
    var(--bg-elevated));
}

.cq-reveal-btn:hover:not(:disabled) {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--danger) 15%, transparent);
}

.cq-feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
}

.cq-feedback.ok {
  color: #22c55e;
  animation: cq-feedback-pop 0.32s ease-out;
}

.cq-feedback.bad {
  color: var(--danger);
  animation: cq-feedback-pop 0.32s ease-out;
}

.cq-feedback.reveal {
  color: #fbbf24;
  animation: cq-feedback-pop 0.32s ease-out;
}

.cq-drama {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 6;
  pointer-events: none;
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 800;
  color: #fbbf24;
  text-shadow:
    0 2px 12px rgba(251, 191, 36, 0.5),
    0 0 24px rgba(251, 191, 36, 0.35);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.cq-drama--show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: cq-drama-pop 0.68s ease-out;
}

.cq-celebration {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease-out;
}

.cq-celebration--show {
  opacity: 1;
  animation: cq-celebration-in 0.5s ease-out;
}

.cq-celebration-title {
  font-size: clamp(1.3rem, 5.5vw, 1.8rem);
  font-weight: 800;
  color: #2dd4bf;
  text-align: center;
  text-shadow: 0 2px 14px color-mix(in srgb, #2dd4bf 35%, transparent);
}

.cq-celebration-score {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.5;
}

.cq-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  z-index: 4;
}

.cq-flash.is-ok {
  background: radial-gradient(circle at 50% 55%, rgba(34, 197, 94, 0.22), transparent 65%);
  animation: cq-flash 0.28s ease-out;
}

.cq-flash.is-bad {
  background: radial-gradient(circle at 50% 55%, rgba(239, 68, 68, 0.2), transparent 65%);
  animation: cq-flash 0.28s ease-out;
}

.cq-flash.is-win {
  background: radial-gradient(circle at 50% 45%, rgba(45, 212, 191, 0.28), transparent 70%);
  animation: cq-flash-win 0.65s ease-out;
}

.cq-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 5;
}

.cq-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--cq-pc, #22c55e);
  box-shadow: 0 0 6px var(--cq-pc, #22c55e);
  animation: cq-particle 0.5s ease-out forwards;
}

.cq-confetti {
  position: absolute;
  width: 8px;
  height: 12px;
  margin-left: -4px;
  margin-top: -6px;
  border-radius: 2px;
  background: var(--cq-cc, #2dd4bf);
  animation: cq-confetti 0.9s ease-out forwards;
}

@keyframes cq-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
}

@keyframes cq-complete-glow {
  0% { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12); }
  40% { box-shadow: 0 8px 32px color-mix(in srgb, #2dd4bf 35%, transparent); }
  100% { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12); }
}

@keyframes cq-streak-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes cq-chosung-enter {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cq-chosung-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes cq-hint-reveal {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes cq-feedback-pop {
  0% { opacity: 0; transform: scale(0.92); }
  60% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes cq-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cq-flash-win {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes cq-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--cq-px), var(--cq-py)) scale(0.3); }
}

@keyframes cq-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% {
    opacity: 0;
    transform: translate(var(--cq-cx), var(--cq-cy)) rotate(var(--cq-cr)) scale(0.5);
  }
}

@media (max-width: 420px) {
  .cq-header {
    justify-content: center;
  }

  .cq-progress,
  .cq-score,
  .cq-streak {
    font-size: 0.78rem;
    padding: 4px 10px;
  }

  .cq-form {
    flex-direction: column;
  }

  .cq-submit-btn {
    width: 100%;
  }

  .cq-actions {
    flex-direction: column;
  }

  .cq-btn {
    width: 100%;
  }
}

/* ?? OX Quiz ?? */
.ox-quiz-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 16px 22px;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(99, 102, 241, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(148, 163, 184, 0.07), transparent 42%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
}

.ox-quiz-wrap--shake {
  animation: ox-quiz-shake 0.48s ease;
}

.ox-quiz-wrap--finish {
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.3),
    0 14px 36px rgba(34, 197, 94, 0.16);
}

.ox-quiz-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  border-radius: inherit;
}

.ox-quiz-flash--ok {
  background: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.28), transparent 65%);
  animation: ox-quiz-flash-in 0.32s ease;
}

.ox-quiz-flash--bad {
  background: radial-gradient(circle at 50% 40%, rgba(239, 68, 68, 0.26), transparent 65%);
  animation: ox-quiz-flash-in 0.32s ease;
}

.ox-quiz-flash--warn {
  background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.24), transparent 65%);
  animation: ox-quiz-flash-in 0.32s ease;
}

.ox-quiz-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.ox-quiz-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  animation: ox-quiz-particle 0.6s ease-out forwards;
}

.ox-quiz-progress {
  position: relative;
  z-index: 2;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent), var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.ox-quiz-progress--pop {
  animation: ox-quiz-pop 0.36s ease;
}

.ox-quiz-timer-bar {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 8px;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.12);
}

.ox-quiz-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8, #a5b4fc);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.35);
  transition: width 0.1s linear, background 0.2s, box-shadow 0.2s;
}

.ox-quiz-timer-fill--warn {
  background: linear-gradient(90deg, #ef4444, #f97316, #fbbf24);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
  animation: ox-quiz-timer-pulse 0.6s ease infinite;
}

.ox-quiz-timer {
  position: relative;
  z-index: 2;
  font-size: 1.1rem;
  font-weight: 800;
  color: #818cf8;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s, transform 0.2s;
}

.ox-quiz-timer--warn {
  color: #ef4444;
  animation: ox-quiz-timer-blink 0.5s ease infinite;
}

.ox-quiz-statement {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 88px;
  padding: 22px 20px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 50%),
    var(--bg-card);
  border: 2px solid var(--border);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.25s;
}

.ox-quiz-statement--ok {
  border-color: #22c55e;
  background:
    linear-gradient(145deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.04)),
    var(--bg-card);
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.25),
    0 8px 24px rgba(34, 197, 94, 0.14);
  animation: ox-quiz-statement-pop 0.35s ease;
}

.ox-quiz-statement--bad {
  border-color: var(--danger);
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04)),
    var(--bg-card);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.22),
    0 8px 24px rgba(239, 68, 68, 0.12);
}

.ox-quiz-explain {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 2.5em;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
  color: var(--text-muted);
  padding: 0 4px;
}

.ox-quiz-explain.ok {
  color: #22c55e;
  font-weight: 600;
}

.ox-quiz-explain.bad {
  color: var(--danger);
  font-weight: 600;
}

.ox-quiz-buttons {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 20px;
  width: 100%;
  justify-content: center;
  padding: 4px 0;
}

.ox-quiz-btn {
  flex: 1;
  max-width: 148px;
  min-height: 88px;
  aspect-ratio: 1;
  border-radius: 20px;
  border: 3px solid var(--border);
  font-size: 2.6rem;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.ox-quiz-btn--o {
  color: #16a34a;
  background:
    linear-gradient(160deg, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.06)),
    var(--bg-card);
  box-shadow:
    0 4px 0 rgba(22, 163, 74, 0.25),
    0 8px 20px rgba(34, 197, 94, 0.12);
}

.ox-quiz-btn--x {
  color: #dc2626;
  background:
    linear-gradient(160deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.06)),
    var(--bg-card);
  box-shadow:
    0 4px 0 rgba(220, 38, 38, 0.25),
    0 8px 20px rgba(239, 68, 68, 0.12);
}

.ox-quiz-btn:hover:not(:disabled) {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.ox-quiz-btn:active:not(:disabled) {
  transform: scale(0.96) translateY(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ox-quiz-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.ox-quiz-btn.picked-ok {
  border-color: #22c55e;
  box-shadow:
    0 0 0 4px rgba(34, 197, 94, 0.35),
    0 8px 24px rgba(34, 197, 94, 0.2);
  animation: ox-pulse 0.5s ease;
}

.ox-quiz-btn.picked-bad {
  border-color: var(--danger);
  box-shadow:
    0 0 0 4px rgba(239, 68, 68, 0.35),
    0 8px 24px rgba(239, 68, 68, 0.18);
}

.ox-quiz-btn.reveal-ok {
  border-color: #22c55e;
  animation: ox-pulse 0.5s ease;
}

@keyframes ox-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes ox-quiz-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
}

@keyframes ox-quiz-flash-in {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes ox-quiz-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--ox-px), var(--ox-py)) scale(0.2);
  }
}

@keyframes ox-quiz-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.12); color: #22c55e; }
}

@keyframes ox-quiz-statement-pop {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.02); }
}

@keyframes ox-quiz-timer-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

@keyframes ox-quiz-timer-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

@media (max-width: 480px) {
  .ox-quiz-wrap {
    padding: 16px 12px 18px;
    gap: 14px;
  }

  .ox-quiz-btn {
    max-width: none;
    min-height: 96px;
    font-size: 2.8rem;
  }

  .ox-quiz-buttons {
    gap: 14px;
  }

  .ox-quiz-statement {
    font-size: 1.05rem;
    padding: 18px 14px;
  }
}

/* ?? Proverb quiz ?? */
.proverb-quiz-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 18px;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 18px;
  background: linear-gradient(165deg,
    color-mix(in srgb, #d97706 6%, var(--bg-elevated)) 0%,
    var(--bg-card) 45%,
    color-mix(in srgb, #92400e 4%, var(--bg-elevated)) 100%);
  border: 1px solid color-mix(in srgb, #d97706 18%, var(--border));
  box-shadow:
    0 8px 28px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
}

.proverb-quiz-wrap--shake {
  animation: pq-shake 0.42s ease-out;
}

.proverb-quiz-wrap--complete {
  animation: pq-complete-glow 0.7s ease-out;
}

.proverb-quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.proverb-quiz-progress {
  font-size: 0.85rem;
  font-weight: 700;
  color: #d97706;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, #d97706 10%, transparent);
  border: 1px solid color-mix(in srgb, #d97706 22%, transparent);
}

.proverb-quiz-streak {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

.proverb-quiz-streak--hot {
  color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 14%, var(--bg-elevated));
  border-color: color-mix(in srgb, #f59e0b 35%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, #f59e0b 30%, transparent);
}

.proverb-quiz-streak--pop {
  animation: pq-streak-pop 0.38s ease-out;
}

.proverb-quiz-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.proverb-quiz-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
  box-shadow: 0 0 10px color-mix(in srgb, #f59e0b 50%, transparent);
  transition: width 0.35s ease-out;
}

.proverb-quiz-hint {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.proverb-quiz-front {
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.55;
  padding: 22px 18px;
  border-radius: 16px;
  width: 100%;
  color: var(--text);
  background: linear-gradient(145deg,
    color-mix(in srgb, #fff 8%, var(--bg-elevated)),
    var(--bg-card));
  border: 1px solid color-mix(in srgb, #d97706 20%, var(--border));
  box-shadow:
    0 6px 20px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.proverb-quiz-front--enter {
  animation: pq-front-enter 0.38s ease-out;
}

.proverb-quiz-front--reveal {
  border-color: color-mix(in srgb, #22c55e 35%, var(--border));
  background: linear-gradient(145deg,
    color-mix(in srgb, #22c55e 10%, var(--bg-elevated)),
    var(--bg-card));
  box-shadow:
    0 6px 20px color-mix(in srgb, #22c55e 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: pq-front-reveal 0.45s ease-out;
}

.proverb-quiz-drama {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 6;
  pointer-events: none;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 16px;
  opacity: 0;
  white-space: nowrap;
}

.proverb-quiz-drama.is-visible {
  animation: pq-drama-pop 0.88s ease-out forwards;
}

.proverb-quiz-drama--gold {
  color: #fef3c7;
  background: linear-gradient(135deg, #d97706, #f59e0b, #fbbf24);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 32px color-mix(in srgb, #f59e0b 45%, transparent);
}

.proverb-quiz-drama--good {
  color: #ecfdf5;
  background: linear-gradient(135deg, #059669, #22c55e);
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 28px color-mix(in srgb, #22c55e 35%, transparent);
}

.proverb-quiz-drama--ok {
  color: var(--text);
  background: linear-gradient(135deg,
    color-mix(in srgb, #d97706 18%, var(--bg-elevated)),
    var(--bg-card));
  border: 2px solid color-mix(in srgb, #d97706 35%, var(--border));
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}

.proverb-quiz-drama--low {
  color: #fecaca;
  background: linear-gradient(135deg, #991b1b, #dc2626);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--danger) 35%, transparent);
}

.proverb-quiz-streak-float {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  z-index: 7;
  font-size: 1.1rem;
  font-weight: 900;
  padding: 8px 18px;
  border-radius: 999px;
  pointer-events: none;
  animation: pq-streak-float 0.7s ease-out forwards;
}

.proverb-quiz-streak-float--ok {
  color: #166534;
  background: linear-gradient(135deg, #bbf7d0, #86efac);
  border: 2px solid #22c55e;
  box-shadow: 0 4px 16px color-mix(in srgb, #22c55e 30%, transparent);
}

.proverb-quiz-streak-float--hot {
  color: #92400e;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 18px color-mix(in srgb, #f59e0b 40%, transparent);
}

.proverb-quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.proverb-quiz-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 52px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: linear-gradient(160deg, var(--bg-card), var(--bg-elevated));
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s, opacity 0.2s;
}

.proverb-quiz-choice-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #d97706;
  background: color-mix(in srgb, #d97706 12%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, #d97706 28%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.proverb-quiz-choice-text {
  flex: 1;
  line-height: 1.45;
}

.proverb-quiz-choice--dim {
  opacity: 0.42;
  pointer-events: none;
}

.proverb-quiz-choice:disabled {
  cursor: default;
}

.proverb-quiz-choice--enter {
  animation: pq-choice-enter 0.32s ease-out both;
}

.proverb-quiz-choice:hover:not(:disabled) {
  border-color: rgba(217, 119, 6, 0.55);
  background: linear-gradient(160deg,
    color-mix(in srgb, #d97706 10%, var(--bg-card)),
    color-mix(in srgb, #d97706 6%, var(--bg-elevated)));
  box-shadow: 0 5px 16px rgba(217, 119, 6, 0.14);
  transform: translateY(-1px);
}

.proverb-quiz-choice:active:not(:disabled) {
  transform: scale(0.98) translateY(0);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.proverb-quiz-choice.correct {
  border-color: #22c55e;
  background: linear-gradient(160deg,
    color-mix(in srgb, #22c55e 22%, var(--bg-elevated)),
    color-mix(in srgb, #22c55e 12%, var(--bg-card)));
  box-shadow: 0 0 18px color-mix(in srgb, #22c55e 28%, transparent);
}

.proverb-quiz-choice.wrong {
  border-color: var(--danger);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--danger) 18%, var(--bg-elevated)),
    color-mix(in srgb, var(--danger) 10%, var(--bg-card)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--danger) 22%, transparent);
}

.proverb-quiz-choice--pop {
  animation: pq-choice-pop 0.34s ease-out;
}

.proverb-quiz-feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
}

.proverb-quiz-feedback.ok {
  color: #22c55e;
  animation: pq-feedback-pop 0.32s ease-out;
}

.proverb-quiz-feedback.bad {
  color: var(--danger);
  animation: pq-feedback-pop 0.32s ease-out;
}

.proverb-quiz-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  z-index: 4;
}

.proverb-quiz-flash.is-ok {
  background: radial-gradient(circle at 50% 60%, rgba(34, 197, 94, 0.22), transparent 65%);
  animation: pq-flash 0.28s ease-out;
}

.proverb-quiz-flash.is-bad {
  background: radial-gradient(circle at 50% 60%, rgba(239, 68, 68, 0.2), transparent 65%);
  animation: pq-flash 0.28s ease-out;
}

.proverb-quiz-flash.is-win {
  background: radial-gradient(circle at 50% 45%, rgba(245, 158, 11, 0.28), transparent 70%);
  animation: pq-flash-win 0.65s ease-out;
}

.proverb-quiz-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 5;
}

.proverb-quiz-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pc, #22c55e);
  box-shadow: 0 0 6px var(--pc, #22c55e);
  animation: pq-particle 0.5s ease-out forwards;
}

.proverb-quiz-confetti {
  position: absolute;
  width: 8px;
  height: 12px;
  margin-left: -4px;
  margin-top: -6px;
  border-radius: 2px;
  background: var(--cc, #f59e0b);
  animation: pq-confetti 0.9s ease-out forwards;
}

@keyframes pq-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
}

@keyframes pq-complete-glow {
  0% { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12); }
  50% { box-shadow: 0 8px 32px color-mix(in srgb, #f59e0b 35%, transparent); }
  100% { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12); }
}

@keyframes pq-streak-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes pq-front-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pq-choice-enter {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pq-choice-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes pq-feedback-pop {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pq-flash {
  0% { opacity: 0.75; }
  100% { opacity: 0; }
}

@keyframes pq-flash-win {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes pq-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.2); }
}

@keyframes pq-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(0.4); }
}

@media (max-width: 480px) {
  .proverb-quiz-wrap {
    padding: 10px 10px 16px;
    gap: 12px;
  }

  .proverb-quiz-header {
    gap: 6px;
  }

  .proverb-quiz-progress,
  .proverb-quiz-score,
  .proverb-quiz-streak {
    font-size: 0.78rem;
    padding: 5px 10px;
  }

  .proverb-quiz-front {
    font-size: 1.15rem;
    padding: 18px 14px;
  }

  .proverb-quiz-choice {
    min-height: 56px;
    padding: 12px 14px;
    gap: 10px;
  }

  .proverb-quiz-choice-label {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.92rem;
  }

  .proverb-quiz-drama {
    font-size: 1.1rem;
    padding: 12px 20px;
    white-space: normal;
    text-align: center;
    max-width: 85%;
  }
}

/* ?? Capital Quiz ?? */
.capq-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 10px 18px;
  max-width: 520px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.08), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.04), transparent 40%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.capq-root--shake {
  animation: capq-shake 0.48s ease;
}

.capq-root--finish .capq-prompt-card {
  opacity: 0.5;
  transform: scale(0.98);
  transition: opacity 0.4s, transform 0.4s;
}

.capq-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  z-index: 4;
}

.capq-flash--ok {
  background: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.28), transparent 65%);
  animation: capq-flash-in 0.32s ease;
}

.capq-flash--bad {
  background: radial-gradient(circle at 50% 40%, rgba(239, 68, 68, 0.26), transparent 65%);
  animation: capq-flash-in 0.32s ease;
}

.capq-flash--win {
  background: radial-gradient(circle at 50% 45%, rgba(37, 99, 235, 0.3), transparent 70%);
  animation: capq-flash-win 0.65s ease-out;
}

.capq-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 5;
}

.capq-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  animation: capq-particle 0.6s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

.capq-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--capq-cc, #fff);
  animation: capq-confetti 0.9s ease-out forwards;
}

.capq-setup-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.capq-setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.capq-setup-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 14px;
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(145deg, var(--surface), rgba(255, 255, 255, 0.02));
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.12s, box-shadow 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.capq-setup-btn--famous {
  border-color: rgba(245, 158, 11, 0.35);
  background:
    linear-gradient(145deg, rgba(245, 158, 11, 0.1), var(--surface));
}

.capq-setup-btn--all {
  border-color: rgba(37, 99, 235, 0.35);
  background:
    linear-gradient(145deg, rgba(37, 99, 235, 0.1), var(--surface));
}

.capq-setup-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 22px rgba(37, 99, 235, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.capq-setup-btn--famous:hover {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.18);
}

.capq-setup-btn--all:hover {
  border-color: var(--accent);
}

.capq-setup-btn:active {
  transform: scale(0.97) translateY(0);
}

.capq-setup-icon {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

.capq-setup-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.capq-setup-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.35;
}

.capq-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.capq-progress {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: transform 0.2s, color 0.2s;
  justify-self: start;
}

.capq-progress--pop {
  transform: scale(1.12);
  color: var(--accent);
}

.capq-score {
  font-size: 0.95rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(37, 99, 235, 0.1));
  color: #16a34a;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.15);
  transition: transform 0.2s;
  justify-self: center;
}

.capq-score--pop {
  transform: scale(1.18);
  animation: capq-score-pop 0.36s ease;
}

.capq-streak {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
  transition: transform 0.2s, background 0.2s, color 0.2s;
  justify-self: end;
}

.capq-streak--pop {
  transform: scale(1.15);
}

.capq-streak--hot {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(239, 68, 68, 0.2));
  color: #d97706;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

.capq-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.capq-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  transition: width 0.35s ease;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

.capq-mode-hint {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.capq-prompt-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border-radius: 16px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent),
    var(--surface);
  border: 1px solid rgba(37, 99, 235, 0.15);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.capq-prompt-card--enter {
  animation: capq-card-enter 0.35s ease;
}

.capq-flag {
  font-size: 3rem;
  line-height: 1;
  min-height: 3rem;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
}

.capq-prompt {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  color: var(--text);
  line-height: 1.35;
  padding: 0 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.capq-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.capq-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  min-height: 52px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent),
    var(--surface);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s, opacity 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.capq-choice-label {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
  background: rgba(37, 99, 235, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.capq-choice-text {
  flex: 1;
  min-width: 0;
}

.capq-choice:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.14);
}

.capq-choice:active:not(:disabled) {
  transform: scale(0.97);
}

.capq-choice--picked {
  transform: scale(1.03);
}

.capq-choice--tap {
  transform: scale(0.96);
}

.capq-choice--dim {
  opacity: 0.42;
  transform: scale(0.98);
}

.capq-choice:disabled {
  cursor: default;
}

.capq-choice.correct {
  border-color: #22c55e;
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.06));
  color: #16a34a;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.3);
}

.capq-choice.wrong {
  border-color: var(--danger);
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.05));
  color: var(--danger);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

.capq-feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  transition: transform 0.2s;
}

.capq-feedback.ok {
  color: #22c55e;
  animation: capq-feedback-pop 0.3s ease;
}

.capq-feedback.bad {
  color: var(--danger);
  animation: capq-feedback-pop 0.3s ease;
}

.capq-streak-float {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, 0) scale(0.6);
  font-size: 1.35rem;
  font-weight: 900;
  color: #d97706;
  text-shadow:
    0 0 14px rgba(245, 158, 11, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 6;
  animation: capq-streak-float 0.78s ease forwards;
}

.capq-celebration {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.capq-celebration--show {
  opacity: 1;
  animation: capq-celebration-in 0.5s ease;
}

.capq-celebration-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  text-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.capq-celebration-score {
  font-size: 1.6rem;
  font-weight: 900;
  color: #22c55e;
  text-shadow: 0 0 16px rgba(34, 197, 94, 0.35);
}

@keyframes capq-score-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes capq-streak-float {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(0.55); }
  28% { opacity: 1; transform: translate(-50%, -6px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -32px) scale(1); }
}

@keyframes capq-celebration-in {
  0% { transform: scale(0.9); opacity: 0; }
  55% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes capq-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes capq-flash-in {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes capq-flash-win {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes capq-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--capq-px), var(--capq-py)) scale(0.3);
  }
}

@keyframes capq-confetti {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--capq-cx), var(--capq-cy)) rotate(var(--capq-cr)) scale(0.4);
  }
}

@keyframes capq-card-enter {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes capq-feedback-pop {
  0% { transform: scale(0.9); opacity: 0.5; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 420px) {
  .capq-root {
    padding: 10px 6px 16px;
    border-radius: 14px;
  }

  .capq-setup-grid {
    grid-template-columns: 1fr;
  }

  .capq-header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
  }

  .capq-progress,
  .capq-score,
  .capq-streak {
    justify-self: center;
  }

  .capq-choices {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .capq-prompt {
    font-size: 1.25rem;
  }

  .capq-choice {
    min-height: 48px;
    padding: 12px 10px;
  }

  .capq-prompt-card {
    padding: 16px 12px;
  }
}

/* ?? Flag Quiz ?? */
.flag-quiz-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 10px 18px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.08), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.04), transparent 40%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.flag-quiz-wrap--shake {
  animation: fq-shake 0.48s ease;
}

.flag-quiz-wrap--finish .flag-quiz-flag-card {
  opacity: 0.5;
  transform: scale(0.98);
  transition: opacity 0.4s, transform 0.4s;
}

.flag-quiz-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  z-index: 4;
}

.flag-quiz-flash--ok {
  background: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.28), transparent 65%);
  animation: fq-flash-in 0.32s ease;
}

.flag-quiz-flash--bad {
  background: radial-gradient(circle at 50% 40%, rgba(239, 68, 68, 0.26), transparent 65%);
  animation: fq-flash-in 0.32s ease;
}

.flag-quiz-flash--win {
  background: radial-gradient(circle at 50% 45%, rgba(37, 99, 235, 0.3), transparent 70%);
  animation: fq-flash-win 0.65s ease-out;
}

.flag-quiz-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 5;
}

.flag-quiz-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  animation: fq-particle 0.6s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

.flag-quiz-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--fq-cc, #fff);
  animation: fq-confetti 0.9s ease-out forwards;
}

.flag-quiz-filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.flag-quiz-filter-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.flag-quiz-filter-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.flag-quiz-filter-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent),
    var(--bg-card);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.flag-quiz-filter-btn:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.45);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
}

.flag-quiz-filter-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.flag-quiz-filter-btn.active {
  border-color: #2563eb;
  background: linear-gradient(160deg, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.06));
  color: #60a5fa;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.2);
}

.flag-quiz-filter-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.flag-quiz-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 0;
}

.flag-quiz-start-hint {
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.flag-quiz-start-btn {
  min-width: 160px;
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.flag-quiz-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  position: relative;
}

.flag-quiz-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.flag-quiz-progress {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: transform 0.2s, color 0.2s;
  justify-self: start;
}

.flag-quiz-progress--pop {
  transform: scale(1.12);
  color: #2563eb;
}

.flag-quiz-score {
  font-size: 0.95rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(37, 99, 235, 0.1));
  color: #16a34a;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.15);
  transition: transform 0.2s;
  justify-self: center;
}

.flag-quiz-score--pop {
  transform: scale(1.18);
  animation: fq-score-pop 0.36s ease;
}

.flag-quiz-streak {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  transition: transform 0.2s, background 0.2s, color 0.2s;
  justify-self: end;
}

.flag-quiz-streak--pop {
  transform: scale(1.15);
}

.flag-quiz-streak--hot {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(239, 68, 68, 0.2));
  color: #d97706;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

.flag-quiz-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.flag-quiz-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  transition: width 0.35s ease;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

.flag-quiz-flag-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 16px 20px;
  border-radius: 16px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), transparent),
    var(--bg-card);
  border: 1px solid rgba(37, 99, 235, 0.15);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.flag-quiz-flag-card--enter {
  animation: fq-card-enter 0.35s ease;
}

.flag-quiz-flag {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flag-quiz-flag--emoji {
  font-size: clamp(4rem, 18vw, 6rem);
  line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
}

.flag-quiz-flag--svg svg {
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.flag-quiz-prompt {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.flag-quiz-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.flag-quiz-choice {
  padding: 14px 12px;
  min-height: 52px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent),
    var(--bg-card);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.flag-quiz-choice:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.14);
}

.flag-quiz-choice:active:not(:disabled) {
  transform: scale(0.97);
}

.flag-quiz-choice--tap {
  transform: scale(0.96);
}

.flag-quiz-choice--picked {
  transform: scale(1.03);
}

.flag-quiz-choice--dim {
  opacity: 0.45;
}

.flag-quiz-choice.correct {
  border-color: #22c55e;
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.06));
  color: #16a34a;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.3);
}

.flag-quiz-choice.wrong {
  border-color: var(--danger);
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.05));
  color: var(--danger);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}

.flag-quiz-feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.flag-quiz-feedback.ok {
  color: #22c55e;
  animation: fq-feedback-pop 0.3s ease;
}

.flag-quiz-feedback.bad {
  color: var(--danger);
  animation: fq-feedback-pop 0.3s ease;
}

@keyframes fq-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes fq-flash-in {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fq-flash-win {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fq-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--fq-px), var(--fq-py)) scale(0.3);
  }
}

@keyframes fq-confetti {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--fq-cx), var(--fq-cy)) rotate(var(--fq-cr)) scale(0.4);
  }
}

@keyframes fq-card-enter {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fq-feedback-pop {
  0% { transform: scale(0.9); opacity: 0.5; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 420px) {
  .flag-quiz-wrap {
    padding: 10px 6px 16px;
    border-radius: 14px;
  }

  .flag-quiz-choices {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .flag-quiz-choice {
    min-height: 48px;
    padding: 12px 10px;
  }

  .flag-quiz-flag-card {
    padding: 14px 12px;
    min-height: 100px;
  }
}

/* ?? Whack-a-Mole ?? */
.whack-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0 16px;
  max-width: 400px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s ease;
}

.whack-wrap--ending {
  opacity: 0.65;
  filter: saturate(0.85);
  transform: scale(0.97);
  pointer-events: none;
}

.whack-hint {
  font-size: 0.92rem;
  font-weight: 700;
  color: #4ade80;
  text-align: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.whack-hint--hide {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.whack-screen-flash {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 45%, rgba(248, 113, 113, 0.45), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.whack-screen-flash--bomb {
  animation: whack-screen-flash 0.42s ease-out;
}

.whack-screen-flash--win {
  background: radial-gradient(circle at 50% 40%, rgba(250, 204, 21, 0.55), rgba(34, 197, 94, 0.25) 45%, transparent 72%);
  animation: whack-screen-win 0.65s ease-out;
}

@keyframes whack-screen-flash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes whack-screen-win {
  0% { opacity: 0.9; transform: scale(0.95); }
  100% { opacity: 0; transform: scale(1.05); }
}

.whack-timer {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease, transform 0.2s ease;
}

.whack-timer--urgent {
  color: #ef4444;
  animation: whack-timer-pulse 0.55s ease-in-out infinite alternate;
}

@keyframes whack-timer-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.whack-combo {
  min-height: 1.4em;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #f59e0b;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.45);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.whack-combo--pop {
  opacity: 0.5;
  transform: scale(0.75);
}

.whack-combo--show {
  opacity: 1;
  transform: scale(1.15);
  animation: whack-combo-bounce 0.38s ease-out forwards;
}

.whack-combo--hot {
  color: #ef4444;
  text-shadow: 0 0 18px rgba(239, 68, 68, 0.55);
  animation: whack-combo-hot 0.38s ease-out forwards, whack-combo-glow 0.5s ease-in-out infinite alternate;
}

@keyframes whack-combo-bounce {
  0% { transform: scale(0.7); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1.08); }
}

@keyframes whack-combo-hot {
  0% { transform: scale(0.8) rotate(-3deg); }
  60% { transform: scale(1.28) rotate(2deg); }
  100% { transform: scale(1.1) rotate(0deg); }
}

@keyframes whack-combo-glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.25); }
}

.whack-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: min(100%, 380px);
  padding: 20px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(120, 180, 70, 0.28), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(60, 40, 20, 0.38), transparent 50%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 18px,
      rgba(0, 0, 0, 0.03) 18px,
      rgba(0, 0, 0, 0.03) 19px
    ),
    linear-gradient(165deg, #4a7a2e 0%, #3d5c24 28%, #3d2914 55%, #2a1c0e 100%);
  border: 3px solid #5c3d1e;
  box-shadow:
    inset 0 2px 0 rgba(160, 200, 90, 0.28),
    inset 0 -6px 16px rgba(0, 0, 0, 0.45),
    0 12px 32px rgba(0, 0, 0, 0.3);
}

.whack-board--shake {
  animation: whack-board-shake 0.42s ease-out;
}

.whack-board--miss {
  animation: whack-board-miss 0.26s ease-out;
}

@keyframes whack-board-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-1.2deg); }
  40% { transform: translateX(8px) rotate(1.2deg); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}

@keyframes whack-board-miss {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

.whack-hole {
  position: relative;
  aspect-ratio: 1;
  min-height: 88px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  border-radius: 50%;
  touch-action: none;
  transition: transform 0.1s ease;
}

.whack-hole::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  z-index: 0;
}

.whack-hole:hover .whack-dirt {
  filter: brightness(1.08);
}

.whack-hole:active:not(:disabled) {
  transform: scale(0.94);
}

.whack-hole--miss {
  animation: whack-hole-miss 0.28s ease-out;
}

@keyframes whack-hole-miss {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(0.92) rotate(-2deg); }
  65% { transform: scale(0.96) rotate(2deg); }
}

.whack-dirt {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 22%, #9a6535 0%, #6b4220 38%, #3d2410 72%, #1a0c04 100%);
  box-shadow:
    inset 0 10px 16px rgba(0, 0, 0, 0.6),
    inset 0 -4px 8px rgba(120, 80, 40, 0.28),
    0 3px 0 rgba(90, 60, 30, 0.45);
  overflow: hidden;
  z-index: 1;
}

.whack-rim {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  border: 2px solid rgba(30, 16, 6, 0.6);
  box-shadow:
    inset 0 0 0 3px rgba(110, 70, 35, 0.38),
    inset 0 -6px 10px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 1;
}

.whack-grass {
  position: absolute;
  inset: -2% -4% auto;
  height: 28%;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 20% 100%, #5a9e32 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, #4a8a28 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, #5a9e32 0%, transparent 55%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 5;
}

.whack-target {
  position: absolute;
  left: 50%;
  bottom: -78%;
  transform: translateX(-50%) scale(0.82);
  width: 72%;
  height: 72%;
  transition:
    bottom 0.24s cubic-bezier(0.22, 1.4, 0.36, 1),
    transform 0.24s cubic-bezier(0.22, 1.4, 0.36, 1);
  pointer-events: none;
  z-index: 2;
}

.whack-hole--up .whack-target {
  bottom: 8%;
  transform: translateX(-50%) scale(1);
}

.whack-mole {
  position: relative;
  width: 100%;
  height: 100%;
}

.whack-mole-fur {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(ellipse at 50% 28%, #c49a6c 0%, #a67c52 35%, #7a5535 70%, #5c3d22 100%);
  box-shadow:
    inset 0 -6px 12px rgba(0, 0, 0, 0.25),
    inset 0 4px 8px rgba(255, 220, 180, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.35);
}

.whack-mole-face {
  position: absolute;
  inset: 18% 12% 22%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whack-mole-eye {
  position: absolute;
  top: 18%;
  width: 22%;
  height: 26%;
  border-radius: 50%;
  background: #1a1208;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.15);
}

.whack-mole-eye::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 22%;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.whack-mole-eye--l { left: 18%; }
.whack-mole-eye--r { right: 18%; }

.whack-mole-nose {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 18%;
  border-radius: 50%;
  background: #3d2510;
  box-shadow: inset 0 1px 2px rgba(255, 200, 160, 0.3);
}

.whack-mole-cheek {
  position: absolute;
  top: 52%;
  width: 18%;
  height: 14%;
  border-radius: 50%;
  background: rgba(248, 113, 113, 0.35);
}

.whack-mole-cheek--l { left: 8%; }
.whack-mole-cheek--r { right: 8%; }

.whack-mole-bomb {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.8rem, 9vw, 2.5rem);
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

.whack-target--bomb .whack-mole {
  display: none;
}

.whack-target--bomb .whack-mole-bomb {
  display: flex;
}

.whack-target--pop {
  animation: whack-mole-bob 0.55s ease-in-out;
}

@keyframes whack-mole-bob {
  0% { transform: translateX(-50%) scale(0.65) translateY(10px); }
  55% { transform: translateX(-50%) scale(1.14) translateY(-5px); }
  100% { transform: translateX(-50%) scale(1) translateY(0); }
}

.whack-hole--bomb.whack-hole--up .whack-target {
  animation: whack-bomb-wiggle 0.32s ease-in-out infinite alternate;
}

@keyframes whack-bomb-wiggle {
  from { transform: translateX(-50%) rotate(-8deg) scale(1.04); }
  to { transform: translateX(-50%) rotate(8deg) scale(1.04); }
}

.whack-hole--hit .whack-target {
  animation: whack-hit-squash 0.3s ease-out;
}

@keyframes whack-hit-squash {
  0% { transform: translateX(-50%) scale(1.18, 0.72); opacity: 1; }
  100% { transform: translateX(-50%) scale(0.35); opacity: 0; }
}

.whack-hole--bomb-hit .whack-target {
  animation: whack-bomb-burst 0.34s ease-out;
}

@keyframes whack-bomb-burst {
  0% { transform: translateX(-50%) scale(1.25); filter: brightness(1.5); }
  100% { transform: translateX(-50%) scale(1.9); opacity: 0; filter: brightness(2.2); }
}

.whack-hit-flash {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(250, 250, 210, 0.8) 0%, transparent 65%);
}

.whack-hit-flash--on {
  animation: whack-flash-pop 0.3s ease-out;
}

.whack-hit-flash--bomb {
  background: radial-gradient(circle, rgba(248, 113, 113, 0.9) 0%, rgba(251, 146, 60, 0.45) 40%, transparent 70%);
  animation: whack-flash-pop 0.4s ease-out;
}

@keyframes whack-flash-pop {
  0% { opacity: 1; transform: scale(0.55); }
  100% { opacity: 0; transform: scale(1.4); }
}

.whack-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.whack-particle {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 2px;
  background: linear-gradient(135deg, #d4b896, #8b5a2b);
  box-shadow: 0 0 0 1px rgba(60, 30, 10, 0.25);
  animation: whack-particle-fly 0.58s ease-out forwards;
}

.whack-particle--bomb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #ef4444 60%, #7f1d1d);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

@keyframes whack-particle-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 40deg)) scale(0.3);
  }
}

.whack-hole:active:not(:disabled) .whack-target {
  transform: translateX(-50%) scale(0.86);
}

.whack-feedback {
  min-height: 1.5em;
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.whack-feedback--pop {
  transform: scale(0.65);
  opacity: 0.35;
}

.whack-feedback--show {
  transform: scale(1.15);
  opacity: 1;
  animation: whack-feedback-settle 0.35s ease-out forwards;
}

@keyframes whack-feedback-settle {
  to { transform: scale(1); }
}

.whack-feedback.ok {
  color: #16a34a;
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.4);
}

.whack-feedback.bad {
  color: var(--danger);
  text-shadow: 0 0 14px rgba(239, 68, 68, 0.45);
}

.whack-end-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.whack-confetti {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 9px;
  height: 9px;
  margin: -4px;
  border-radius: 2px;
  opacity: 1;
  animation: whack-confetti-burst 0.9s ease-out forwards;
}

@keyframes whack-confetti-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 60deg)) scale(0.4);
  }
}

/* ?? Balloon Pop ?? */
.balloon-pop-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0 16px;
  max-width: 420px;
  margin: 0 auto;
}

.balloon-pop-wrap--shake {
  animation: balloon-pop-shake 0.4s ease-out;
}

.balloon-pop-wrap--celebrate {
  animation: balloon-pop-celebrate 0.55s ease-out;
}

@keyframes balloon-pop-celebrate {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.03); }
  65% { transform: scale(0.99); }
}

@keyframes balloon-pop-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.balloon-pop-hud {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.balloon-pop-misses {
  display: flex;
  gap: 8px;
}

.balloon-pop-miss-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.35);
  border: 2px solid #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.balloon-pop-miss-dot--lost {
  background: var(--danger);
  border-color: #b91c1c;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
  transform: scale(0.92);
}

.balloon-pop-miss-dot--pulse {
  animation: balloon-pop-miss-pulse 0.45s ease-out;
}

@keyframes balloon-pop-miss-pulse {
  0% { transform: scale(1.35); box-shadow: 0 0 14px rgba(239, 68, 68, 0.7); }
  100% { transform: scale(0.92); }
}

.balloon-pop-combo {
  min-height: 1.35em;
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: transparent;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
}

.balloon-pop-combo:not(:empty) {
  opacity: 1;
  background: linear-gradient(90deg, #fbbf24, #f472b6, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.balloon-pop-combo--pop {
  animation: balloon-pop-combo-pop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.balloon-pop-combo--3,
.balloon-pop-combo--4 { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45)); }
.balloon-pop-combo--5,
.balloon-pop-combo--6 { filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.5)); }
.balloon-pop-combo--7,
.balloon-pop-combo--8 { filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.55)); }

@keyframes balloon-pop-combo-pop {
  0% { transform: scale(0.55) rotate(-4deg); }
  55% { transform: scale(1.22) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.balloon-pop-feedback {
  min-height: 1.4em;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.balloon-pop-feedback.ok {
  color: #16a34a;
}

.balloon-pop-feedback.bad {
  color: var(--danger);
}

.balloon-pop-feedback--pop {
  animation: balloon-pop-feedback-pop 0.35s ease-out;
}

@keyframes balloon-pop-feedback-pop {
  0% { transform: scale(0.7); opacity: 0.4; }
  55% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

.balloon-pop-arena {
  position: relative;
  width: 100%;
  height: min(62vh, 420px);
  min-height: 320px;
  overflow: hidden;
  border-radius: 18px;
  touch-action: none;
  background:
    radial-gradient(ellipse 80px 36px at 18% 22%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 110px 42px at 72% 16%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(ellipse 90px 38px at 48% 30%, rgba(255, 255, 255, 0.35), transparent 70%),
    linear-gradient(180deg, #7dd3fc 0%, #bae6fd 28%, #e0f2fe 58%, #bbf7d0 82%, #86efac 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.4),
    inset 0 -28px 40px rgba(34, 197, 94, 0.12),
    0 10px 28px rgba(14, 116, 144, 0.18);
  transition: box-shadow 0.2s ease-out;
}

.balloon-pop-arena--miss {
  box-shadow:
    inset 0 0 0 2px rgba(239, 68, 68, 0.55),
    inset 0 0 28px rgba(239, 68, 68, 0.18),
    0 10px 28px rgba(14, 116, 144, 0.18);
}

.balloon-pop-arena--tap-miss {
  animation: balloon-pop-arena-wobble 0.18s ease-out;
}

@keyframes balloon-pop-arena-wobble {
  0%, 100% { transform: translateX(0); }
  33% { transform: translateX(-3px); }
  66% { transform: translateX(3px); }
}

.balloon-pop-hint {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
  pointer-events: none;
  animation: balloon-pop-hint-bob 1.6s ease-in-out infinite;
  transition: opacity 0.35s, transform 0.35s;
}

.balloon-pop-hint--hide {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

@keyframes balloon-pop-hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

.balloon-pop-item {
  position: absolute;
  padding: 12px;
  margin: -12px;
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  z-index: 1;
  will-change: bottom;
  filter: drop-shadow(0 6px 8px rgba(15, 23, 42, 0.18));
  animation: balloon-pop-float 2.4s ease-in-out infinite;
  animation-delay: calc(var(--float-delay, 0) * 1ms);
}

.balloon-pop-item--hidden {
  display: none;
  pointer-events: none;
}

.balloon-pop-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 86%;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  box-shadow:
    inset -8px -12px 18px rgba(0, 0, 0, 0.16),
    inset 5px 6px 12px rgba(255, 255, 255, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.14);
  line-height: 1;
  pointer-events: none;
  overflow: hidden;
  transition: transform 0.08s ease-out;
}

.balloon-pop-shine {
  position: absolute;
  top: 14%;
  left: 18%;
  width: 28%;
  height: 22%;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.15));
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.balloon-pop-gleam {
  position: absolute;
  right: 22%;
  bottom: 28%;
  width: 14%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75), transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}

.balloon-pop-emoji {
  position: relative;
  z-index: 1;
  font-size: 1.25rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.balloon-pop-string {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 1.5px;
  height: 14%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(100, 116, 139, 0.55), rgba(100, 116, 139, 0.15));
  border-radius: 1px;
  pointer-events: none;
}

.balloon-pop-tail {
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 12px solid #ef4444;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
  pointer-events: none;
}

.balloon-pop-item--gold .balloon-pop-body {
  box-shadow:
    inset -4px -8px 12px rgba(180, 83, 9, 0.28),
    inset 4px 5px 10px rgba(255, 255, 255, 0.35),
    0 0 16px rgba(251, 191, 36, 0.65),
    0 4px 12px rgba(180, 83, 9, 0.25);
  animation: balloon-pop-gold-pulse 1.1s ease-in-out infinite alternate;
}

.balloon-pop-item--gold .balloon-pop-shine {
  animation: balloon-pop-shine-glint 1.1s ease-in-out infinite alternate;
}

.balloon-pop-item--skull .balloon-pop-body {
  box-shadow:
    inset -6px -10px 16px rgba(0, 0, 0, 0.32),
    inset 3px 4px 8px rgba(255, 255, 255, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.22);
}

@keyframes balloon-pop-gold-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.14); }
}

@keyframes balloon-pop-shine-glint {
  from { opacity: 0.75; transform: scale(1); }
  to { opacity: 1; transform: scale(1.12); }
}

.balloon-pop-item:active:not(:disabled) .balloon-pop-body {
  transform: scale(0.92);
}

.balloon-pop-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.balloon-pop-flash {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, currentColor 45%, transparent 70%);
  opacity: 0;
  transform: scale(0.4);
}

.balloon-pop-particle {
  position: absolute;
  left: 50%;
  top: 42%;
  width: var(--size, 8px);
  height: var(--size, 8px);
  margin: calc(var(--size, 8px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, currentColor 55%, color-mix(in srgb, currentColor 70%, #000));
  box-shadow: 0 0 4px currentColor;
  opacity: 0;
}

.balloon-pop-particle--shard {
  border-radius: 2px 40% 2px 40%;
  background: linear-gradient(135deg, #fff8, currentColor);
}

.balloon-pop-item--popping .balloon-pop-body,
.balloon-pop-item--popping .balloon-pop-tail,
.balloon-pop-item--popping .balloon-pop-string {
  opacity: 0;
  transform: scale(0.15);
  transition: opacity 0.12s, transform 0.14s ease-in;
}

.balloon-pop-item--popping .balloon-pop-burst {
  opacity: 1;
}

.balloon-pop-item--popping .balloon-pop-flash {
  animation: balloon-pop-flash 0.28s ease-out forwards;
}

.balloon-pop-item--mega-pop .balloon-pop-flash {
  animation: balloon-pop-flash-mega 0.42s ease-out forwards;
}

.balloon-pop-item--mega-pop .balloon-pop-particle {
  animation-duration: 0.58s;
}

.balloon-pop-item--popping .balloon-pop-particle {
  animation: balloon-pop-burst 0.45s cubic-bezier(0.15, 0.75, 0.35, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.balloon-pop-item--red.balloon-pop-item--popping { color: #ef4444; }
.balloon-pop-item--blue.balloon-pop-item--popping { color: #3b82f6; }
.balloon-pop-item--green.balloon-pop-item--popping { color: #22c55e; }
.balloon-pop-item--purple.balloon-pop-item--popping { color: #a855f7; }
.balloon-pop-item--gold.balloon-pop-item--popping { color: #fbbf24; }
.balloon-pop-item--skull.balloon-pop-item--popping { color: #6b7280; }

@keyframes balloon-pop-flash {
  0% {
    opacity: 1;
    transform: scale(0.35);
  }
  60% {
    opacity: 0.85;
    transform: scale(1.35);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes balloon-pop-flash-mega {
  0% {
    opacity: 1;
    transform: scale(0.4);
  }
  45% {
    opacity: 1;
    transform: scale(1.75);
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

@keyframes balloon-pop-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0.25) rotate(140deg);
  }
}

.balloon-pop-confetti {
  position: absolute;
  left: var(--cx);
  top: -8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  animation: balloon-pop-confetti-fall 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes balloon-pop-confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(110%) rotate(var(--rot, 90deg)) scale(0.6);
  }
}

/* ?? Speed Snap ?? */
.speed-snap-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 14px 20px;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(30, 34, 48, 0.95), rgba(18, 20, 30, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  touch-action: manipulation;
  transition: opacity 0.4s ease;
}

.speed-snap-root--gameover {
  opacity: 0.82;
}

.speed-snap-root--shake {
  animation: speed-snap-shake 0.42s ease;
}

.speed-snap-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.speed-snap-timer {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
  transition: color 0.2s, transform 0.2s;
}

.speed-snap-timer--urgent {
  color: #f87171;
  animation: speed-snap-timer-pulse 0.8s ease-in-out infinite;
}

.speed-snap-streak {
  min-height: 1.3em;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: color 0.2s, transform 0.2s;
}

.speed-snap-streak--active {
  color: #fbbf24;
  animation: speed-snap-streak-pop 0.3s ease;
}

.speed-snap-streak--hot {
  color: #f97316;
  text-shadow: 0 0 12px rgba(249, 115, 22, 0.5);
}

.speed-snap-streak--blazing {
  color: #ef4444;
  text-shadow: 0 0 16px rgba(239, 68, 68, 0.65);
  animation: speed-snap-streak-pop 0.3s ease, speed-snap-streak-glow 0.6s ease-in-out infinite;
}

.speed-snap-combo-meter {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.speed-snap-combo-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #f97316);
  transition: width 0.25s ease-out, background 0.25s;
}

.speed-snap-combo-meter--warm .speed-snap-combo-meter-fill {
  background: linear-gradient(90deg, #fbbf24, #fb923c);
}

.speed-snap-combo-meter--hot .speed-snap-combo-meter-fill {
  background: linear-gradient(90deg, #f97316, #ef4444);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

.speed-snap-combo-meter--pulse {
  animation: speed-snap-combo-pulse 0.45s ease;
}

.speed-snap-timer-bar {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.speed-snap-timer-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  transition: width 0.1s linear, background 0.3s;
}

.speed-snap-timer--urgent ~ .speed-snap-timer-bar .speed-snap-timer-fill,
.speed-snap-header:has(.speed-snap-timer--urgent) .speed-snap-timer-fill {
  background: linear-gradient(90deg, #ef4444, #f97316);
}

.speed-snap-mode {
  width: 100%;
  display: flex;
  justify-content: center;
}

.speed-snap-mode-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s, border-color 0.15s;
}

.speed-snap-mode-label:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.speed-snap-mode-label input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

.speed-snap-arena {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 200px;
  padding: 24px 10px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.12), transparent 60%),
    linear-gradient(160deg, #1a3d2e 0%, #143528 40%, #0f2a20 100%);
  border: 2px solid rgba(34, 197, 94, 0.15);
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.4),
    0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.speed-snap-arena--match-pulse {
  animation: speed-snap-arena-match 0.55s ease;
}

.speed-snap-arena--finale {
  animation: speed-snap-arena-finale 0.9s ease forwards;
}

.speed-snap-match-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  min-width: 64px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.speed-snap-match-badge--match {
  opacity: 1;
  color: #052e16;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.55);
  animation: speed-snap-badge-pulse 0.7s ease-in-out infinite;
}

.speed-snap-match-badge--nomatch {
  opacity: 0.75;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.speed-snap-match-badge--snap {
  opacity: 1;
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  animation: speed-snap-badge-pop 0.35s ease;
}

.speed-snap-match-badge--wrong,
.speed-snap-match-badge--missed {
  opacity: 1;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  animation: speed-snap-badge-pop 0.35s ease;
}

.speed-snap-combo-pop {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  z-index: 8;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fbbf24;
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.7);
  pointer-events: none;
  opacity: 0;
}

.speed-snap-combo-pop--show {
  animation: speed-snap-combo-pop 0.75s ease-out forwards;
}

.speed-snap-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.speed-snap-flash--ok {
  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.35), transparent 70%);
}

.speed-snap-flash--bad {
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.3), transparent 70%);
}

.speed-snap-flash--over {
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.4), transparent 75%);
}

.speed-snap-flash--on {
  animation: speed-snap-flash 0.35s ease-out forwards;
}

.speed-snap-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 5;
}

.speed-snap-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  box-shadow: 0 0 6px currentColor;
  animation: speed-snap-particle 0.6s ease-out forwards;
}

.speed-snap-score-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 1.6rem;
  font-weight: 800;
  color: #4ade80;
  text-shadow: 0 2px 8px rgba(74, 222, 128, 0.5);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}

.speed-snap-score-pop--show {
  animation: speed-snap-score-pop 0.55s ease-out forwards;
}

.speed-snap-score-pop--hot {
  color: #fbbf24;
  font-size: 1.85rem;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.65);
}

.speed-snap-prev,
.speed-snap-current {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.speed-snap-prev .speed-snap-card {
  transform: scale(0.72);
  opacity: 0.55;
  filter: brightness(0.85);
}

.speed-snap-prev--matchable .speed-snap-card {
  opacity: 0.85;
  filter: brightness(1);
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.5),
    0 0 18px rgba(34, 197, 94, 0.25),
    0 10px 28px rgba(0, 0, 0, 0.4);
}

.speed-snap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 150px;
  border-radius: 14px;
  background: linear-gradient(155deg, #fafafa 0%, #f0f0f0 45%, #e8e8e8 100%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.speed-snap-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 48%,
    transparent 62%
  );
  pointer-events: none;
}

.speed-snap-card-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  pointer-events: none;
}

.speed-snap-card-corner--tl {
  top: 8px;
  left: 10px;
}

.speed-snap-card-corner--br {
  bottom: 8px;
  right: 10px;
  transform: rotate(180deg);
}

.speed-snap-card-corner-val {
  font-size: 0.85rem;
  font-weight: 800;
}

.speed-snap-card-corner-suit {
  font-size: 0.75rem;
  margin-top: 1px;
}

.speed-snap-card--empty {
  opacity: 0.35;
  background: linear-gradient(155deg, #2a2e3a, #1e2230);
  border-color: var(--border);
}

.speed-snap-card--pop {
  animation: speed-snap-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.speed-snap-card--hit {
  animation: speed-snap-hit 0.35s ease;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.65),
    0 0 24px rgba(34, 197, 94, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.4);
}

.speed-snap-card--matchable {
  animation: speed-snap-match-glow 0.9s ease-in-out infinite;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.55),
    0 0 28px rgba(34, 197, 94, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.4);
}

.speed-snap-card--wrong {
  animation: speed-snap-card-wrong 0.38s ease;
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.6),
    0 0 20px rgba(239, 68, 68, 0.3),
    0 10px 28px rgba(0, 0, 0, 0.4);
}

.speed-snap-card--missed {
  animation: speed-snap-card-missed 0.45s ease;
  filter: saturate(0.4) brightness(0.75);
}

.speed-snap-card-value {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.speed-snap-card-suit {
  font-size: 2.1rem;
  line-height: 1;
  margin-top: 4px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.speed-snap-card-empty {
  font-size: 2rem;
  color: var(--text-muted);
}

.speed-snap-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  transition: color 0.2s, background 0.2s, transform 0.2s;
}

.speed-snap-hint--alert {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  animation: speed-snap-hint-pulse 0.8s ease-in-out infinite;
}

.speed-snap-btn {
  width: 100%;
  max-width: 100%;
  padding: 22px 28px;
  min-height: 68px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #a855f7 100%);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow:
    0 6px 20px rgba(124, 58, 237, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.speed-snap-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(124, 58, 237, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.speed-snap-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.35);
}

.speed-snap-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.speed-snap-btn--wrong {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
  animation: speed-snap-btn-wrong 0.3s ease;
}

.speed-snap-btn--ready {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);
  box-shadow:
    0 8px 28px rgba(34, 197, 94, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: speed-snap-btn-ready 0.75s ease-in-out infinite;
}

.speed-snap-btn--hit {
  animation: speed-snap-btn-hit 0.32s ease;
}

.speed-snap-feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  transition: color 0.15s, transform 0.15s;
}

.speed-snap-feedback.ok {
  color: #22c55e;
  animation: speed-snap-feedback-pop 0.3s ease;
}

.speed-snap-feedback.bad {
  color: var(--danger);
  animation: speed-snap-feedback-pop 0.3s ease;
}

.speed-snap-stats {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.2em;
}

@keyframes speed-snap-pop {
  0% { transform: scale(0.8) rotateY(-20deg); opacity: 0.4; }
  55% { transform: scale(1.06) rotateY(4deg); }
  100% { transform: scale(1) rotateY(0); opacity: 1; }
}

@keyframes speed-snap-hit {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); }
}

@keyframes speed-snap-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-0.5deg); }
  30% { transform: translateX(6px) rotate(0.5deg); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes speed-snap-flash {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}

@keyframes speed-snap-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

@keyframes speed-snap-score-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(0.9); }
}

@keyframes speed-snap-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes speed-snap-streak-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes speed-snap-btn-wrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes speed-snap-feedback-pop {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes speed-snap-streak-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@keyframes speed-snap-combo-pulse {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(1.8); }
  100% { transform: scaleY(1); }
}

@keyframes speed-snap-arena-match {
  0%, 100% { border-color: rgba(34, 197, 94, 0.15); }
  50% { border-color: rgba(74, 222, 128, 0.65); box-shadow: inset 0 0 24px rgba(34, 197, 94, 0.15); }
}

@keyframes speed-snap-arena-finale {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.35); }
  100% { filter: brightness(0.9); }
}

@keyframes speed-snap-badge-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
}

@keyframes speed-snap-badge-pop {
  0% { transform: translateX(-50%) scale(0.7); opacity: 0.4; }
  60% { transform: translateX(-50%) scale(1.12); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes speed-snap-combo-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6) translateY(8px); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.15) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-18px); }
}

@keyframes speed-snap-match-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.45), 0 0 22px rgba(34, 197, 94, 0.25), 0 10px 28px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.7), 0 0 32px rgba(74, 222, 128, 0.4), 0 10px 28px rgba(0, 0, 0, 0.4); }
}

@keyframes speed-snap-card-wrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes speed-snap-card-missed {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.94); opacity: 0.55; }
}

@keyframes speed-snap-hint-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes speed-snap-btn-ready {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 28px rgba(34, 197, 94, 0.45); }
  50% { transform: scale(1.03); box-shadow: 0 10px 36px rgba(74, 222, 128, 0.6); }
}

@keyframes speed-snap-btn-hit {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(0.94); }
  70% { transform: scale(1.04); }
}

/* Aim Trainer */
.aim-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  touch-action: none;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.aim-wrap--shake {
  animation: aim-wrap-shake 0.42s ease;
}

.aim-wrap--celebrate {
  filter: saturate(1.15);
}

.aim-wrap--gameover {
  opacity: 0.82;
  filter: saturate(0.85);
}

.aim-hud {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0 4px;
}

.aim-hud-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.aim-hint {
  width: 100%;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fbbf24;
  padding: 6px 12px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 10px;
  animation: aim-hint-pulse 1.6s ease-in-out infinite;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.aim-hint--hide {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.aim-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.aim-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.aim-stat--hits {
  border-color: rgba(74, 222, 128, 0.2);
}

.aim-stat--acc.aim-stat--good {
  border-color: rgba(74, 222, 128, 0.45);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.15);
}

.aim-stat--acc.aim-stat--warn {
  border-color: rgba(239, 68, 68, 0.35);
}

.aim-stat--acc.aim-stat--flash {
  animation: aim-stat-flash 0.4s ease;
}

.aim-stat--miss {
  border-color: rgba(239, 68, 68, 0.15);
}

.aim-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aim-stat-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.aim-stat--hits .aim-stat-value {
  color: #4ade80;
}

.aim-stat--acc .aim-stat-value {
  color: #fbbf24;
}

.aim-stat--miss .aim-stat-value {
  color: #f87171;
}

.aim-stat-value--pop {
  animation: aim-stat-pop 0.35s ease;
}

.aim-progress {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.aim-streak {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fbbf24;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.aim-streak--active {
  opacity: 1;
  transform: scale(1);
  animation: aim-streak-pop 0.35s ease;
}

.aim-streak--hot {
  color: #f97316;
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

.aim-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.aim-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #e11d48, #f97316, #facc15);
  border-radius: 3px;
  transition: width 0.25s ease;
  box-shadow: 0 0 8px rgba(225, 29, 72, 0.4);
}

.aim-stats {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.aim-arena {
  position: relative;
  width: 100%;
  height: min(420px, 58vh);
  min-height: 280px;
  background:
    linear-gradient(160deg, rgba(26, 31, 46, 0.97) 0%, rgba(18, 21, 28, 0.98) 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 23px,
      rgba(255, 255, 255, 0.03) 23px,
      rgba(255, 255, 255, 0.03) 24px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 23px,
      rgba(255, 255, 255, 0.03) 23px,
      rgba(255, 255, 255, 0.03) 24px
    );
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.aim-arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(225, 29, 72, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.aim-arena--miss {
  animation: aim-miss-flash 0.18s ease;
}

.aim-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.aim-flash--ok {
  background: radial-gradient(circle at center, rgba(74, 222, 128, 0.35), transparent 70%);
}

.aim-flash--bad {
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.32), transparent 70%);
}

.aim-flash--expire {
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.25), transparent 70%);
}

.aim-flash--over {
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.42), transparent 75%);
}

.aim-flash--on {
  animation: aim-flash 0.35s ease-out forwards;
}

.aim-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 5;
}

.aim-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  box-shadow: 0 0 6px currentColor;
  animation: aim-particle 0.55s ease-out forwards;
}

.aim-hit-pop {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 0.95rem;
  font-weight: 800;
  color: #4ade80;
  text-shadow: 0 2px 8px rgba(74, 222, 128, 0.55);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  font-variant-numeric: tabular-nums;
}

.aim-hit-pop--show {
  animation: aim-hit-pop 0.55s ease-out forwards;
}

.aim-hit-pop--fast {
  color: #22d3ee;
  font-size: 1.05rem;
  text-shadow: 0 2px 10px rgba(34, 211, 238, 0.6);
}

.aim-hit-pop--combo {
  color: #fbbf24;
  font-size: 1.1rem;
  text-shadow: 0 2px 12px rgba(251, 191, 36, 0.65);
}

.aim-hit-pop--miss {
  color: #f87171;
  font-size: 1rem;
  text-shadow: 0 2px 8px rgba(248, 113, 113, 0.55);
}

.aim-combo-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 1.5rem;
  font-weight: 900;
  color: #fbbf24;
  text-shadow:
    0 0 20px rgba(251, 191, 36, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  z-index: 7;
  letter-spacing: 0.02em;
}

.aim-combo-burst--show {
  animation: aim-combo-burst 0.75s ease-out forwards;
}

.aim-miss-ripple {
  position: absolute;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 3px solid rgba(239, 68, 68, 0.7);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

.aim-miss-ripple--show {
  animation: aim-miss-ripple 0.45s ease-out forwards;
}

.aim-end-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 8;
}

.aim-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin: -4px 0 0 -4px;
  opacity: 1;
  animation: aim-confetti 0.9s ease-out forwards;
}

.aim-target {
  position: absolute;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fb7185, #e11d48 55%, #9f1239);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.3),
    0 0 0 6px rgba(225, 29, 72, 0.2),
    0 6px 18px rgba(225, 29, 72, 0.5);
  cursor: pointer;
  animation: aim-target-pulse 2s linear forwards;
  z-index: 2;
  transition: box-shadow 0.1s ease;
}

.aim-target::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2);
}

.aim-target::after {
  content: '';
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1));
}

.aim-target--hot {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.35),
    0 0 0 6px rgba(251, 191, 36, 0.35),
    0 0 24px rgba(251, 191, 36, 0.45),
    0 6px 18px rgba(225, 29, 72, 0.5);
  animation: aim-target-pulse-hot 2s linear forwards;
}

.aim-target:active {
  transform: scale(0.92);
}

.aim-target--hit {
  animation: aim-target-hit 0.2s ease-out forwards !important;
  pointer-events: none;
}

.aim-chart-wrap {
  width: 100%;
  padding: 12px 8px 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.aim-chart-wrap.hidden {
  display: none;
}

.aim-chart-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-muted);
  text-align: center;
}

.aim-chart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}

.aim-chart-row {
  display: grid;
  grid-template-columns: 28px 1fr 48px;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.aim-chart-label {
  color: var(--text-muted);
  text-align: right;
}

.aim-chart-bar-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.aim-chart-bar {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #facc15, #ef4444);
  border-radius: 5px;
  transition: width 0.3s ease;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.3);
}

.aim-chart-bar--fast {
  background: linear-gradient(90deg, #4ade80, #22c55e);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.45);
}

.aim-chart-bar--slow {
  background: linear-gradient(90deg, #facc15, #ef4444);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
}

.aim-chart-ms {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

@keyframes aim-wrap-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes aim-streak-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes aim-miss-flash {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  50% { box-shadow: inset 0 0 0 4px rgba(239, 68, 68, 0.6); }
}

@keyframes aim-flash {
  0% { opacity: 0.75; }
  100% { opacity: 0; }
}

@keyframes aim-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

@keyframes aim-hit-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -65%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(0.9); }
}

@keyframes aim-target-pulse {
  0% { transform: scale(0.45); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.45); opacity: 0.65; }
}

@keyframes aim-target-hit {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

/* Hangman */
.hm-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 18px 14px 20px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(14, 165, 233, 0.16), transparent 55%),
    linear-gradient(165deg, rgba(148, 163, 184, 0.1), transparent 42%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
}

.hm-root--miss {
  animation: hm-miss-flash 0.3s ease;
}

.hm-root--shake {
  animation: hm-shake 0.55s ease;
}

.hm-root--win {
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.4),
    0 0 28px rgba(34, 197, 94, 0.2),
    0 12px 32px rgba(34, 197, 94, 0.18);
}

.hm-root--lose {
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.4),
    0 0 24px rgba(239, 68, 68, 0.14),
    0 12px 32px rgba(239, 68, 68, 0.16);
}

.hm-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.hm-hints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.hm-cat,
.hm-meaning {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent), var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.hm-cat {
  color: #0ea5e9;
}

.hm-meaning {
  color: var(--text);
}

.hm-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent), var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hm-lives {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.hm-lives-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

.hm-lives-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hm-life-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}

.hm-life-dot--full {
  background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.45);
}

.hm-life-dot--spent {
  background: radial-gradient(circle at 35% 30%, rgba(148, 163, 184, 0.5), rgba(100, 116, 139, 0.35));
  opacity: 0.55;
  transform: scale(0.82);
}

.hm-streak-badge {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ea580c;
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.25), rgba(234, 88, 12, 0.12));
  border: 1px solid rgba(234, 88, 12, 0.35);
  white-space: nowrap;
}

.hm-gallows-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.08), rgba(15, 23, 42, 0.04));
  border: 1px solid var(--border);
  box-shadow: inset 0 2px 12px rgba(15, 23, 42, 0.06);
}

.hm-gallows-wrap--thud {
  animation: hm-gallows-thud 0.32s ease;
}

.hm-gallows-wrap--shake {
  animation: hm-gallows-shake 0.55s ease;
}

.hm-gallows {
  width: 100%;
  height: auto;
  display: block;
}

.hm-scaffold-base {
  filter: drop-shadow(0 2px 4px rgba(113, 63, 18, 0.35));
}

.hm-scaffold-pole,
.hm-scaffold-beam {
  filter: drop-shadow(0 2px 3px rgba(113, 63, 18, 0.3));
}

.hm-part {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.hm-part--visible {
  opacity: 1;
}

.hm-part--step {
  animation: hm-part-step 0.4s cubic-bezier(0.34, 1.35, 0.64, 1);
}

.hm-gallows--full .hm-figure {
  animation: hm-figure-sway 2.4s ease-in-out infinite;
}

.hm-gallows--dead .hm-figure {
  animation: hm-figure-dead 0.6s ease forwards;
}

.hm-gallows--dead .hm-part line,
.hm-gallows--dead .hm-part circle {
  stroke: #dc2626;
}

.hm-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 6px 4px;
  transition: transform 0.2s ease;
}

.hm-word--ok {
  animation: hm-word-ok 0.38s ease;
}

.hm-word--bad {
  animation: hm-word-bad 0.38s ease;
}

.hm-word--win .hm-slot.revealed {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.55);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.06));
  text-shadow: 0 0 14px rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.22);
}

.hm-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 54px;
  padding: 0 8px;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 2px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(14, 165, 233, 0.05), rgba(14, 165, 233, 0.02));
  box-shadow:
    inset 0 -3px 0 rgba(15, 23, 42, 0.08),
    0 2px 6px rgba(15, 23, 42, 0.06);
}

.hm-slot.blank::after {
  content: '';
  display: block;
  width: 60%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  opacity: 0.85;
}

.hm-slot.revealed {
  color: var(--text);
  border-color: rgba(14, 165, 233, 0.55);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.04));
}

.hm-slot--pop {
  animation: hm-slot-pop 0.38s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.hm-slot.missed {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.6);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.05));
  animation: hm-slot-miss 0.45s ease;
}

.hm-slot.punct {
  min-width: 14px;
  border: none;
  box-shadow: none;
  background: none;
  font-size: 1.5rem;
}

.hm-status {
  width: 100%;
  text-align: center;
  min-height: 2.4em;
}

.hm-used {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 1.8em;
}

.hm-used-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.1);
}

.hm-used-chip--ok {
  color: #15803d;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.12));
  border-color: rgba(34, 197, 94, 0.5);
}

.hm-used-chip--bad {
  color: #b91c1c;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.28), rgba(239, 68, 68, 0.1));
  border-color: rgba(239, 68, 68, 0.45);
  opacity: 0.88;
}

.hm-status-hint {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.hm-keyboard {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  width: 100%;
}

.hm-key {
  min-height: 48px;
  padding: 12px 4px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 55%),
    var(--bg-card);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.14);
  transition: background 0.15s, transform 0.12s, box-shadow 0.12s, border-color 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hm-key:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(14, 165, 233, 0.14), transparent 55%),
    var(--bg-card);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(15, 23, 42, 0.16);
  border-color: rgba(14, 165, 233, 0.5);
}

.hm-key:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(15, 23, 42, 0.12);
}

.hm-key:disabled {
  cursor: not-allowed;
  opacity: 0.92;
  box-shadow: none;
  transform: none;
}

.hm-key.correct {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.38), rgba(34, 197, 94, 0.18));
  border-color: #22c55e;
  color: #15803d;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.28);
}

.hm-key.wrong {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.12));
  border-color: #ef4444;
  color: #b91c1c;
  opacity: 0.78;
}

.hm-key--hit-ok {
  animation: hm-key-ok 0.34s ease;
}

.hm-key--hit-bad {
  animation: hm-key-bad 0.34s ease;
}

.hm-letter-burst {
  position: absolute;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
}

.hm-letter-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
  animation: hm-letter-spark 0.42s ease-out forwards;
}

.hm-letter-flash {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.55), transparent 72%);
  animation: hm-letter-flash 0.32s ease-out forwards;
}

.hm-win-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(34, 197, 94, 0.28), transparent 70%);
  animation: hm-win-flash 0.6s ease-out forwards;
}

.hm-lose-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(239, 68, 68, 0.22));
  animation: hm-lose-vignette 0.62s ease-out forwards;
}

.hm-confetti {
  position: absolute;
  width: 9px;
  height: 13px;
  border-radius: 2px;
  background: var(--sc, #22c55e);
  animation: hm-confetti 0.9s ease-out forwards;
  transform: translate(-50%, -50%);
}

@keyframes hm-gallows-thud {
  0% { transform: translateY(0); }
  25% { transform: translateY(4px); }
  55% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes hm-gallows-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes hm-part-step {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(-8px);
  }
  60% {
    opacity: 1;
    transform: scale(1.08) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes hm-figure-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.2deg); }
}

@keyframes hm-figure-dead {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(4deg) translateY(3px); }
}

@keyframes hm-letter-spark {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--sx), var(--sy)) scale(0.2);
    opacity: 0;
  }
}

@keyframes hm-letter-flash {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes hm-win-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hm-lose-vignette {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0.35; }
}

@keyframes hm-slot-pop {
  0% {
    transform: scale(0.55) translateY(6px);
    opacity: 0.35;
  }
  55% {
    transform: scale(1.1) translateY(-2px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes hm-slot-miss {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes hm-word-ok {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes hm-word-bad {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes hm-key-ok {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  45% {
    transform: scale(1.14);
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% { transform: scale(1); }
}

@keyframes hm-key-bad {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) scale(0.95); }
  75% { transform: translateX(5px) scale(0.95); }
}

@keyframes hm-miss-flash {
  0% { background-color: rgba(239, 68, 68, 0.14); }
  100% { background-color: transparent; }
}

@keyframes hm-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px) rotate(-0.6deg); }
  30% { transform: translateX(9px) rotate(0.6deg); }
  45% { transform: translateX(-7px); }
  60% { transform: translateX(7px); }
  75% { transform: translateX(-4px); }
}

@keyframes hm-confetti {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) rotate(var(--rot, 360deg)) scale(0.35);
    opacity: 0;
  }
}

@media (max-width: 400px) {
  .hm-keyboard {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }

  .hm-key {
    min-height: 44px;
    padding: 10px 2px;
    font-size: 0.95rem;
  }

  .hm-slot {
    min-width: 32px;
    height: 46px;
    font-size: 1.4rem;
  }

  .hm-root {
    padding: 14px 10px 16px;
  }

  .hm-hud {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ?? High-Low ?? */
@keyframes hl-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-0.4deg); }
  30% { transform: translateX(5px) rotate(0.3deg); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes hl-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hl-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

@keyframes hl-score-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.7);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -36px) scale(0.9);
  }
}

@keyframes hl-stat-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes hl-streak-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.35); }
  50% { box-shadow: 0 0 14px 2px rgba(234, 179, 8, 0.45); }
}

.hl-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 10px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(34, 197, 94, 0.08) 0%, transparent 55%),
    linear-gradient(165deg, rgba(15, 23, 42, 0.04) 0%, transparent 40%),
    var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hl-wrap--shake {
  animation: hl-shake 0.45s ease;
}

.hl-wrap--gameover {
  filter: saturate(0.65) brightness(0.92);
  transition: filter 0.5s ease;
}

.hl-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.hl-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.hl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  min-width: 72px;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.hl-stat--pot .hl-stat-value {
  color: #22c55e;
}

.hl-stat--streak-hot {
  border-color: rgba(234, 179, 8, 0.55);
  animation: hl-streak-glow 1.4s ease-in-out infinite;
}

.hl-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hl-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.hl-stat-value--pop {
  animation: hl-stat-pop 0.42s ease;
}

.hl-arena {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 14px 8px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(22, 163, 74, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #0d3320 0%, #0a2818 45%, #061a10 100%);
  border: 1px solid rgba(34, 197, 94, 0.2);
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.hl-arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.5;
}

.hl-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  border-radius: inherit;
}

.hl-flash--ok {
  background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.35) 0%, transparent 70%);
}

.hl-flash--bad {
  background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.38) 0%, transparent 70%);
}

.hl-flash--neutral {
  background: radial-gradient(ellipse at center, rgba(234, 179, 8, 0.28) 0%, transparent 70%);
}

.hl-flash--over {
  background: radial-gradient(ellipse at center, rgba(120, 40, 40, 0.5) 0%, transparent 75%);
}

.hl-flash--on {
  animation: hl-flash 0.38s ease-out forwards;
}

.hl-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.hl-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  box-shadow: 0 0 6px currentColor;
  animation: hl-particle 0.65s ease-out forwards;
}

.hl-score-pop {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, 0);
  font-size: 1.35rem;
  font-weight: 900;
  color: #22c55e;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 6;
  opacity: 0;
}

.hl-score-pop--show {
  animation: hl-score-pop 0.58s ease-out forwards;
}

.hl-table {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  perspective: 800px;
}

.hl-card-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hl-slot-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hl-vs {
  font-size: 1.25rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.hl-card {
  position: relative;
  width: clamp(88px, 22vw, 110px);
  height: clamp(124px, 31vw, 154px);
  border-radius: 12px;
  background: linear-gradient(160deg, #ffffff 0%, #f3f4f6 55%, #e5e7eb 100%);
  border: 2px solid #d1d5db;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 18px rgba(0, 0, 0, 0.32),
    0 2px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.38s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
  overflow: hidden;
}

.hl-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.55) 0%,
    transparent 42%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

.hl-card--flip {
  transform: rotateY(180deg);
}

.hl-card--win {
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.6),
    0 6px 22px rgba(34, 197, 94, 0.35);
}

.hl-card--lose {
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.55),
    0 6px 22px rgba(239, 68, 68, 0.3);
}

.hl-card--back {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 2px,
      transparent 2px,
      transparent 8px
    ),
    linear-gradient(135deg, #1e4a7a 0%, #152a4a 40%, #0c1929 100%);
  border-color: #3b5a7a;
}

.hl-card--back::after {
  content: '?';
  font-size: 2.6rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.18);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hl-card--empty {
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

.hl-card--red .hl-corner,
.hl-card--red .hl-suit-center {
  color: #dc2626;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.hl-card--black .hl-corner,
.hl-card--black .hl-suit-center {
  color: #1f2937;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hl-corner {
  position: absolute;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.hl-corner--tl {
  top: 6px;
  left: 8px;
}

.hl-corner--br {
  bottom: 6px;
  right: 8px;
  transform: rotate(180deg);
}

.hl-suit-center {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
}

.hl-bet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.hl-bet-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.hl-bet-input {
  width: 88px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hl-bet-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}

.hl-bet-btns {
  display: flex;
  gap: 6px;
}

.hl-bet-preset {
  min-width: 44px;
  min-height: 40px;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hl-bet-preset:active:not(:disabled) {
  transform: scale(0.94);
}

.hl-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.hl-btn {
  min-width: 110px;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.hl-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.hl-btn:active:not(:disabled) {
  transform: scale(0.96) translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.hl-btn--high {
  background: linear-gradient(135deg, #34d399 0%, #22c55e 45%, #16a34a 100%);
  border-color: #16a34a;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hl-btn--low {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%);
  border-color: #2563eb;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hl-btn-cash {
  min-width: 120px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
}

.hl-feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
  margin: 0;
  transition: color 0.2s ease;
}

.hl-feedback.ok {
  color: #22c55e;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

.hl-feedback.bad {
  color: var(--danger);
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.hl-feedback.neutral {
  color: #eab308;
}

.hl-deck-info {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .hl-wrap {
    padding: 10px 6px 16px;
    gap: 12px;
  }

  .hl-arena {
    padding: 12px 4px;
  }

  .hl-table {
    gap: 10px;
  }

  .hl-btn {
    min-width: 100px;
    flex: 1 1 42%;
    min-height: 52px;
    font-size: 1.05rem;
  }

  .hl-btn-cash {
    flex: 1 1 100%;
    min-height: 50px;
  }

  .hl-bet-preset {
    min-width: 48px;
    min-height: 44px;
  }
}

/* ?? Blackjack ?? */
.bj-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0 16px;
  user-select: none;
  -webkit-user-select: none;
}

.bj-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.bj-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.bj-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  min-width: 72px;
}

.bj-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bj-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
}

.bj-table {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 520px;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #14532d 0%, #052e16 100%);
  border: 2px solid #166534;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25);
}

.bj-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bj-zone-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bj-zone-score {
  font-size: 1rem;
  font-weight: 800;
  color: #fef08a;
  min-height: 1.2em;
}

.bj-hand {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  min-height: clamp(124px, 31vw, 154px);
}

.bj-card {
  margin-left: -18px;
  flex-shrink: 0;
}

.bj-hand .bj-card:first-child {
  margin-left: 0;
}

.bj-bet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.bj-bet-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.bj-bet-input {
  width: 88px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.bj-bet-btns {
  display: flex;
  gap: 6px;
}

.bj-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.bj-btn {
  min-width: 96px;
  font-size: 1rem;
  font-weight: 800;
  padding: 12px 18px;
}

.bj-btn--hit {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #16a34a;
  color: #fff;
}

.bj-btn--stand {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #dc2626;
  color: #fff;
}

.bj-btn--double {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  border-color: #ca8a04;
  color: #1f2937;
}

.bj-btn-deal {
  min-width: 120px;
}

.bj-feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
  margin: 0;
}

.bj-feedback.ok {
  color: #22c55e;
}

.bj-feedback.bad {
  color: var(--danger);
}

.bj-shoe-info {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ?? Video Poker ?? */
@keyframes vp-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-0.4deg); }
  30% { transform: translateX(5px) rotate(0.3deg); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes vp-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes vp-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

@keyframes vp-score-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.7);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -36px) scale(0.9);
  }
}

@keyframes vp-stat-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes vp-pay-glow {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(167, 139, 250, 0.35); }
  50% { box-shadow: inset 0 0 12px 2px rgba(167, 139, 250, 0.45); }
}

@keyframes vp-card-flip {
  0% { transform: perspective(400px) rotateY(90deg) scale(0.92); opacity: 0.4; }
  100% { transform: perspective(400px) rotateY(0) scale(1); opacity: 1; }
}

@keyframes vp-hold-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.08) translateY(-3px); }
  100% { transform: scale(1); }
}

@keyframes vp-hand-banner-in {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.82);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1.08);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -22px) scale(0.94);
  }
}

@keyframes vp-miss-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7);
    filter: blur(2px);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.12);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.88);
    filter: blur(1px);
  }
}

@keyframes vp-phase-nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes vp-pay-row-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes vp-win-stagger {
  0% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28); }
  40% { transform: scale(1.06) translateY(-4px); }
  100% { transform: scale(1); }
}

@keyframes vp-lose-stagger {
  0% { opacity: 1; filter: saturate(1) brightness(1); }
  100% { opacity: 0.72; filter: saturate(0.55) brightness(0.82); }
}

@keyframes vp-btn-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35); }
  50% { box-shadow: 0 4px 22px rgba(124, 58, 237, 0.55), 0 0 0 3px rgba(167, 139, 250, 0.25); }
}

@keyframes vp-table-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}

@keyframes vp-feedback-pop {
  0% { transform: scale(0.92); opacity: 0.65; }
  40% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes vp-bet-warn {
  0%, 100% { border-color: var(--border); }
  25%, 75% { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
}

.vp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 10px 18px;
  max-width: 640px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(124, 58, 237, 0.1) 0%, transparent 55%),
    linear-gradient(165deg, rgba(15, 23, 42, 0.04) 0%, transparent 40%),
    var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.vp-wrap--shake {
  animation: vp-shake 0.45s ease;
}

.vp-wrap--gameover {
  filter: saturate(0.65) brightness(0.92);
  transition: filter 0.5s ease;
}

.vp-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.vp-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.vp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 72px;
  padding: 8px 14px;
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.vp-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vp-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.vp-stat-value--pop {
  animation: vp-stat-pop 0.42s ease;
}

.vp-phase-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.08) 0%, rgba(15, 23, 42, 0.04) 100%);
  border: 1px solid rgba(124, 58, 237, 0.18);
}

.vp-phase-hint {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #c4b5fd;
  text-align: center;
  line-height: 1.35;
  transition: color 0.2s;
}

.vp-phase-hint--nudge {
  animation: vp-phase-nudge 0.4s ease;
  color: #fbbf24;
}

.vp-hold-count {
  display: inline-block;
  min-height: 1.2em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.vp-hold-count--on {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.35);
  transform: scale(1.02);
}

.vp-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.vp-step {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.vp-step--done {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.25);
}

.vp-step--active {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  border-color: #8b5cf6;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

.vp-paytable {
  width: 100%;
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.vp-paytable-title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.vp-paytable-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vp-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.vp-pay-row--active {
  background: rgba(124, 58, 237, 0.22);
  color: #a78bfa;
  font-weight: 700;
  animation: vp-pay-glow 1.2s ease-in-out infinite;
}

.vp-pay-row--pop {
  animation: vp-pay-row-pop 0.45s ease, vp-pay-glow 1.2s ease-in-out infinite;
}

.vp-pay-mult {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.vp-arena {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 16px 8px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(109, 40, 217, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #1a0f33 0%, #120a24 45%, #0a0618 100%);
  border: 1px solid rgba(124, 58, 237, 0.25);
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.vp-arena::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.5;
}

.vp-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  border-radius: inherit;
}

.vp-flash--ok {
  background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.35) 0%, transparent 70%);
}

.vp-flash--bad {
  background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.38) 0%, transparent 70%);
}

.vp-flash--neutral {
  background: radial-gradient(ellipse at center, rgba(167, 139, 250, 0.28) 0%, transparent 70%);
}

.vp-flash--over {
  background: radial-gradient(ellipse at center, rgba(120, 40, 40, 0.5) 0%, transparent 75%);
}

.vp-flash--on {
  animation: vp-flash 0.38s ease-out forwards;
}

.vp-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.vp-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  box-shadow: 0 0 6px currentColor;
  animation: vp-particle 0.65s ease-out forwards;
}

.vp-score-pop {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, 0);
  font-size: 1.35rem;
  font-weight: 900;
  color: #22c55e;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 6;
  opacity: 0;
}

.vp-score-pop--show {
  animation: vp-score-pop 0.58s ease-out forwards;
}

.vp-hand-banner {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translate(-50%, 0);
  z-index: 7;
  pointer-events: none;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}

.vp-hand-banner--tier-0 {
  font-size: 1rem;
  color: #86efac;
}

.vp-hand-banner--tier-1 {
  font-size: 1.15rem;
  color: #4ade80;
}

.vp-hand-banner--tier-2 {
  font-size: 1.35rem;
  color: #fbbf24;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.45), 0 2px 10px rgba(0, 0, 0, 0.45);
}

.vp-hand-banner--tier-3 {
  font-size: 1.55rem;
  color: #fde047;
  text-shadow: 0 0 24px rgba(253, 224, 71, 0.55), 0 0 40px rgba(234, 179, 8, 0.35);
}

.vp-hand-banner--show {
  animation: vp-hand-banner-in 0.95s ease-out forwards;
}

.vp-hand-banner--tier-2.vp-hand-banner--show,
.vp-hand-banner--tier-3.vp-hand-banner--show {
  animation-duration: 1.15s;
}

.vp-miss-pop {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translate(-50%, 0);
  z-index: 7;
  pointer-events: none;
  font-size: 1.5rem;
  font-weight: 900;
  color: #f87171;
  text-shadow: 0 0 16px rgba(239, 68, 68, 0.4), 0 2px 8px rgba(0, 0, 0, 0.45);
  opacity: 0;
}

.vp-miss-pop--show {
  animation: vp-miss-pop 0.68s ease-out forwards;
}

.vp-table {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  perspective: 800px;
  transition: filter 0.25s ease;
}

.vp-table--hold-ready {
  animation: vp-table-glow 2s ease-in-out infinite;
}

.vp-card-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.vp-card-col--held .vp-card {
  box-shadow:
    0 0 0 3px #7c3aed,
    0 0 16px rgba(124, 58, 237, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.25);
}

.vp-card {
  position: relative;
  width: 72px;
  height: 100px;
  border-radius: 10px;
  background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 55%, #e2e8f0 100%);
  border: 2px solid #cbd5e1;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.vp-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.55) 0%, transparent 42%);
  pointer-events: none;
  border-radius: inherit;
}

.vp-card--flip {
  animation: vp-card-flip 0.36s ease-out forwards;
}

.vp-card--hold-pop {
  animation: vp-hold-pop 0.26s ease-out;
}

.vp-card--win-stagger {
  animation: vp-win-stagger 0.36s ease-out;
}

.vp-card--lose-stagger {
  animation: vp-lose-stagger 0.42s ease-out forwards;
}

.vp-card:hover:not(.vp-card--empty):not(.vp-card--back) {
  transform: translateY(-4px);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.vp-card:active:not(.vp-card--empty):not(.vp-card--back) {
  transform: translateY(-1px) scale(0.98);
}

.vp-card--win {
  box-shadow:
    0 0 0 3px #22c55e,
    0 0 18px rgba(34, 197, 94, 0.45),
    0 4px 12px rgba(34, 197, 94, 0.35);
}

.vp-card--lose {
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.5),
    0 4px 12px rgba(239, 68, 68, 0.2);
  filter: saturate(0.75) brightness(0.92);
}

.vp-card--back {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 2px,
      transparent 2px,
      transparent 8px
    ),
    linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #5b21b6 100%);
  border-color: #6d28d9;
  cursor: default;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(76, 29, 149, 0.35);
}

.vp-card--back::after {
  content: '??';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.vp-card--empty {
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(167, 139, 250, 0.25);
  cursor: default;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
}

.vp-card--red .vp-corner,
.vp-card--red .vp-suit-center {
  color: #ef4444;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.vp-card--black .vp-corner,
.vp-card--black .vp-suit-center {
  color: #1e293b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.vp-corner {
  position: absolute;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.vp-corner--tl {
  top: 4px;
  left: 5px;
}

.vp-corner--br {
  bottom: 4px;
  right: 5px;
  transform: rotate(180deg);
}

.vp-suit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.vp-hold-btn {
  min-width: 72px;
  min-height: 36px;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  -webkit-tap-highlight-color: transparent;
}

.vp-hold-btn--on {
  background: linear-gradient(145deg, #8b5cf6 0%, #7c3aed 100%);
  border-color: #6d28d9;
  color: #fff;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

.vp-hold-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.vp-hold-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.vp-bet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.vp-bet-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.vp-bet-input {
  width: 80px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.vp-bet-input:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.vp-bet-btns {
  display: flex;
  gap: 6px;
}

.vp-bet-preset {
  min-height: 36px;
  transition: transform 0.12s, box-shadow 0.15s;
}

.vp-bet-preset:active:not(:disabled) {
  transform: scale(0.95);
}

.vp-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.vp-btn-action {
  min-width: 140px;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 800;
  padding: 12px 28px;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  transition: transform 0.12s, box-shadow 0.15s;
}

.vp-btn-action--pulse:not(:disabled) {
  animation: vp-btn-pulse 1.4s ease-in-out infinite;
}

.vp-btn-action:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.vp-feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
  margin: 0;
  transition: color 0.2s;
}

.vp-feedback.ok {
  color: #22c55e;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
}

.vp-feedback.bad {
  color: var(--danger);
}

.vp-feedback.neutral {
  color: #a78bfa;
}

@media (max-width: 420px) {
  .vp-wrap {
    padding: 10px 6px 14px;
    gap: 12px;
  }

  .vp-arena {
    padding: 12px 4px;
  }

  .vp-card {
    width: 58px;
    height: 82px;
    border-radius: 8px;
  }

  .vp-hold-btn {
    min-width: 58px;
    min-height: 34px;
    font-size: 0.65rem;
  }

  .vp-suit-center {
    font-size: 1.2rem;
  }

  .vp-btn-action {
    min-width: 120px;
    min-height: 44px;
    padding: 10px 20px;
  }

  .vp-bet-preset {
    min-height: 34px;
  }

  .vp-phase-hint {
    font-size: 0.8rem;
  }

  .vp-hand-banner--tier-3 {
    font-size: 1.25rem;
  }

  .vp-miss-pop {
    font-size: 1.25rem;
  }
}

/* ?? Slot Machine ?? */
@keyframes sm-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px) rotate(-0.3deg); }
  30% { transform: translateX(4px) rotate(0.25deg); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

@keyframes sm-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sm-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.15);
  }
}

@keyframes sm-score-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.75);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -40px) scale(0.9);
  }
}

@keyframes sm-stat-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes sm-feedback-pop {
  0% { transform: scale(0.9); opacity: 0.6; }
  35% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes sm-payline-glow {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(234, 179, 8, 0.35),
      inset 0 0 8px rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.65);
  }
  50% {
    box-shadow:
      0 0 22px rgba(251, 191, 36, 0.65),
      inset 0 0 14px rgba(251, 191, 36, 0.25);
    border-color: rgba(251, 191, 36, 0.95);
  }
}

@keyframes sm-jackpot-glow {
  0%, 100% {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 0 0 0 rgba(251, 191, 36, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 0 28px 4px rgba(251, 191, 36, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

@keyframes sm-symbol-win {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  50% {
    transform: scale(1.14);
    filter: brightness(1.3) drop-shadow(0 0 12px rgba(251, 191, 36, 0.55));
  }
}

@keyframes sm-spin-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25); }
  50% { box-shadow: 0 4px 24px rgba(234, 179, 8, 0.5); }
}

@keyframes sm-spin-glow {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(234, 179, 8, 0.3),
      0 0 0 0 rgba(251, 191, 36, 0.35);
  }
  50% {
    box-shadow:
      0 6px 26px rgba(251, 191, 36, 0.55),
      0 0 22px rgba(251, 191, 36, 0.45);
  }
}

@keyframes sm-reel-landing {
  0% { transform: translateY(0); }
  35% { transform: translateY(4px); }
  65% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes sm-feedback-tick {
  0% { opacity: 0.45; transform: scale(0.96); }
  40% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.85; transform: scale(1); }
}

@keyframes sm-jackpot-banner {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.7);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.15);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -28px) scale(0.95);
  }
}

@keyframes sm-confetti-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--sm-cx), var(--sm-cy)) rotate(var(--sm-cr)) scale(0.2);
  }
}

@keyframes sm-bankrupt-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes sm-bet-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.sm-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 10px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(234, 179, 8, 0.07) 0%, transparent 55%),
    linear-gradient(165deg, rgba(30, 27, 75, 0.06) 0%, transparent 40%),
    var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sm-wrap--shake {
  animation: sm-shake 0.45s ease;
}

.sm-wrap--gameover {
  filter: saturate(0.6) brightness(0.9);
  transition: filter 0.5s ease;
}

.sm-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.sm-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.sm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  min-width: 90px;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.sm-stat--peak .sm-stat-value {
  color: #eab308;
}

.sm-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sm-stat-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.sm-stat-value--pop {
  animation: sm-stat-pop 0.42s ease;
}

.sm-cabinet {
  position: relative;
  width: 100%;
  padding: 20px 16px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(139, 92, 246, 0.25) 0%, transparent 55%),
    linear-gradient(160deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
  border-radius: 18px;
  border: 3px solid #eab308;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.sm-cabinet::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  opacity: 0.45;
}

.sm-cabinet--spinning .sm-reel-window {
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 -2px 6px rgba(255, 255, 255, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 0 14px rgba(139, 92, 246, 0.25);
}

.sm-cabinet--jackpot {
  animation: sm-jackpot-glow 1.2s ease-in-out infinite;
}

.sm-jackpot-banner {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translate(-50%, 0);
  z-index: 7;
  pointer-events: none;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fbbf24;
  text-shadow:
    0 0 18px rgba(251, 191, 36, 0.75),
    0 2px 8px rgba(0, 0, 0, 0.55);
  opacity: 0;
}

.sm-jackpot-banner--show {
  animation: sm-jackpot-banner 1.35s ease-out forwards;
}

.sm-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.sm-confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--sm-cc);
  margin: -4px 0 0 -4px;
  animation: sm-confetti-burst 0.95s ease-out forwards;
}

.sm-bankrupt-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  pointer-events: none;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fecaca;
  background: rgba(40, 10, 10, 0.82);
  border: 2px solid rgba(239, 68, 68, 0.55);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
}

.sm-bankrupt-overlay--show {
  animation: sm-bankrupt-pop 0.92s ease-out forwards;
}

.sm-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  border-radius: inherit;
}

.sm-flash--ok {
  background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.38) 0%, transparent 70%);
}

.sm-flash--bad {
  background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.35) 0%, transparent 70%);
}

.sm-flash--neutral {
  background: radial-gradient(ellipse at center, rgba(234, 179, 8, 0.28) 0%, transparent 70%);
}

.sm-flash--over {
  background: radial-gradient(ellipse at center, rgba(120, 40, 40, 0.5) 0%, transparent 75%);
}

.sm-flash--on {
  animation: sm-flash 0.38s ease-out forwards;
}

.sm-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.sm-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  animation: sm-particle 0.65s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

.sm-score-pop {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, 0);
  z-index: 6;
  pointer-events: none;
  font-size: 1.35rem;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.sm-score-pop--show {
  animation: sm-score-pop 0.85s ease-out forwards;
}

.sm-reels {
  display: flex;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.sm-reel {
  flex: 1;
  max-width: 100px;
  transition: transform 0.25s ease;
}

.sm-reel--win {
  transform: scale(1.03);
}

.sm-reel--landing {
  animation: sm-reel-landing 0.36s ease-out;
}

.sm-reel-window {
  height: calc(72px * 3);
  overflow: hidden;
  background:
    linear-gradient(180deg, #0a0a14 0%, #12121f 50%, #0a0a14 100%);
  border-radius: 10px;
  border: 2px solid #4c1d95;
  position: relative;
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 -2px 6px rgba(255, 255, 255, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.25);
}

.sm-reel-window::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.14) 0%,
    transparent 32%,
    transparent 68%,
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
  z-index: 3;
}

.sm-reel-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    transparent 22%,
    transparent 78%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.sm-reel-strip {
  will-change: transform;
}

.sm-symbol {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  line-height: 1;
  user-select: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 38%, rgba(0, 0, 0, 0.1) 100%);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 6px rgba(0, 0, 0, 0.4);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.sm-symbol--win {
  animation: sm-symbol-win 0.8s ease-in-out infinite;
}

.sm-payline-marker {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 72px;
  border: 2px solid rgba(234, 179, 8, 0.6);
  border-radius: 8px;
  pointer-events: none;
  box-shadow:
    0 0 12px rgba(234, 179, 8, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-size: 0;
  z-index: 3;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sm-payline-marker::before,
.sm-payline-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fbbf24 0%, #eab308 70%, transparent 100%);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sm-payline-marker::before { left: -5px; }
.sm-payline-marker::after { right: -5px; }

.sm-payline-marker--win::before,
.sm-payline-marker--win::after {
  opacity: 1;
  animation: sm-payline-glow 1s ease-in-out infinite;
}

.sm-payline-marker--win {
  animation: sm-payline-glow 1s ease-in-out infinite;
}

.sm-bet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.sm-bet-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sm-bet-input {
  width: 80px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sm-bet-input:focus {
  outline: none;
  border-color: rgba(234, 179, 8, 0.55);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
}

.sm-bet-input--shake {
  animation: sm-bet-shake 0.38s ease;
  border-color: rgba(239, 68, 68, 0.55);
}

.sm-bet-btns {
  display: flex;
  gap: 6px;
}

.sm-bet-preset {
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.sm-bet-preset:not(:disabled):active {
  transform: scale(0.94);
}

.sm-spin-btn {
  min-width: 180px;
  min-height: 52px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 12px 32px;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.sm-spin-btn--ready {
  animation: sm-spin-glow 1.5s ease-in-out infinite;
}

.sm-spin-btn:not(:disabled):hover {
  box-shadow: 0 6px 22px rgba(234, 179, 8, 0.38);
  filter: brightness(1.06);
}

.sm-spin-btn:not(:disabled):active {
  transform: scale(0.96);
}

.sm-spin-btn--active {
  animation: sm-spin-pulse 0.8s ease-in-out infinite;
  pointer-events: none;
}

.sm-feedback {
  margin: 0;
  min-height: 1.4em;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.sm-feedback.ok {
  color: #22c55e;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

.sm-feedback.bad {
  color: #f87171;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.25);
}

.sm-feedback.neutral {
  color: var(--text-muted);
}

.sm-feedback--tick {
  animation: sm-feedback-tick 0.42s ease;
}

.sm-feedback--pop {
  animation: sm-feedback-pop 0.45s ease;
}

.sm-paytable {
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sm-paytable-title {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.03em;
}

.sm-paytable-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sm-pay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  transition: background 0.15s ease;
}

.sm-pay-row:hover {
  background: rgba(234, 179, 8, 0.06);
}

.sm-pay-row--pair {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
}

.sm-pay-sym {
  font-size: 1.2rem;
  width: 32px;
  text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.sm-pay-mult {
  color: var(--text-muted);
}

@media (max-width: 400px) {
  .sm-wrap {
    gap: 12px;
    padding: 10px 6px 14px;
  }

  .sm-cabinet {
    padding: 16px 10px;
  }

  .sm-reels {
    gap: 5px;
  }

  .sm-symbol {
    font-size: 2rem;
  }

  .sm-spin-btn {
    min-width: 100%;
    width: 100%;
  }

  .sm-bet-preset {
    min-width: 48px;
    min-height: 48px;
  }
}

/* ?? Header nav, lang, share ?? */
.header-nav {
  display: flex;
  gap: 4px;
}

.header-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.header-nav a:hover,
.header-nav a.active {
  color: var(--text);
  background: var(--bg-card);
  border-color: var(--border);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.lang-switch a {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s;
}

.lang-switch a:hover {
  color: var(--text);
  background: var(--bg-card);
}

.lang-switch .lang-active {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
}

.header-share {
  flex-shrink: 0;
}

.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.share-bar--compact .share-btn {
  padding: 6px 10px;
  font-size: 0.75rem;
}

.share-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  transition: filter 0.2s, border-color 0.2s;
  text-decoration: none;
}

.share-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  filter: brightness(1.08);
}

.share-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.play-header {
  flex-wrap: wrap;
}

.play-share {
  margin-left: auto;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.8rem;
}

/* ?? Rankings page ?? */
.rankings-main {
  padding: 32px 0 64px;
}

.rankings-hero {
  margin-bottom: 24px;
}

.rankings-hero h1 {
  margin: 0 0 8px;
  font-size: 1.75rem;
  font-weight: 800;
}

.rankings-hero p {
  margin: 0;
  color: var(--text-muted);
}

.rankings-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.nickname-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.nickname-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.nickname-form input {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
  min-width: 140px;
}

.rankings-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 20px;
}

.rankings-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.rankings-table th,
.rankings-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.rankings-table th {
  background: var(--bg-elevated);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rankings-table tr:last-child td {
  border-bottom: none;
}

.rankings-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.rank-num {
  font-weight: 800;
  color: var(--accent);
  width: 48px;
}

.rank-game {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.rank-emoji {
  font-size: 1.4rem;
}

.rank-record {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.rankings-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.rankings-empty span {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
}

/* Word Search */
.ws-wrap {
  position: relative;
  width: min(520px, 96vw);
  margin: 0 auto;
  padding: 16px 14px 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124, 108, 255, 0.14), transparent 52%),
    radial-gradient(ellipse at 80% 100%, rgba(52, 211, 153, 0.08), transparent 45%),
    linear-gradient(165deg, rgba(28, 32, 46, 0.96) 0%, rgba(16, 18, 28, 0.98) 100%);
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 36px rgba(0, 0, 0, 0.34);
  transition: transform 0.35s ease, filter 0.35s ease;
}

.ws-wrap.ws-wrap--clear {
  animation: ws-wrap-clear 0.88s ease;
}

.ws-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

.ws-topic {
  text-align: center;
  font-weight: 800;
  margin-bottom: 12px;
  padding: 6px 14px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  color: #e8e4ff;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, rgba(124, 108, 255, 0.22), rgba(124, 108, 255, 0.08));
  border-radius: 999px;
  border: 1px solid rgba(124, 108, 255, 0.35);
  box-shadow: 0 4px 14px rgba(124, 108, 255, 0.15);
}

.ws-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

.ws-word {
  position: relative;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(38, 42, 58, 0.95), rgba(24, 27, 38, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.22s ease,
    opacity 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.ws-word-check {
  display: inline-block;
  margin-right: 4px;
  font-size: 0.72rem;
  color: #34d399;
  font-weight: 800;
}

.ws-word.found {
  text-decoration: line-through;
  opacity: 0.72;
  border-color: rgba(52, 211, 153, 0.65);
  background: linear-gradient(145deg, rgba(16, 72, 52, 0.85), rgba(12, 48, 36, 0.92));
  box-shadow:
    0 0 16px rgba(52, 211, 153, 0.35),
    inset 0 0 8px rgba(52, 211, 153, 0.12);
  color: #a7f3d0;
}

.ws-word.ws-word--pop {
  animation: ws-word-pop 0.5s ease;
}

.ws-board {
  position: relative;
  display: block;
  padding: 10px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(124, 108, 255, 0.06), transparent 55%),
    linear-gradient(160deg, #1a1f2e 0%, #12151f 55%, #161b28 100%);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -2px 8px rgba(0, 0, 0, 0.25),
    0 10px 28px rgba(0, 0, 0, 0.3);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: filter 0.35s ease, transform 0.35s ease;
}

.ws-lines {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.ws-found-line {
  stroke: rgba(52, 211, 153, 0.92);
  stroke-width: 14;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.55));
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.28s ease;
}

.ws-found-line.ws-found-line--show {
  opacity: 0.78;
  animation: ws-line-draw 0.38s ease forwards;
}

.ws-board-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.ws-board.ws-board--enter {
  animation: ws-board-enter 0.45s ease;
}

.ws-board.ws-board--flash {
  animation: ws-board-flash 0.42s ease;
}

.ws-board.ws-board--clear {
  animation: ws-board-clear 0.88s ease;
}

.ws-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: clamp(0.65rem, 2.8vw, 0.9rem);
  font-weight: 700;
  color: #e8ecf4;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.08) 0%, transparent 45%),
    linear-gradient(155deg, #2a3042 0%, #1c2130 55%, #151a26 100%);
  border-radius: 8px;
  border: 1px solid rgba(100, 116, 139, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.ws-cell:active {
  transform: scale(0.94);
}

.ws-cell.selecting {
  color: #fff;
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
    linear-gradient(155deg, rgba(124, 108, 255, 0.75) 0%, rgba(99, 82, 230, 0.65) 100%);
  border-color: rgba(167, 155, 255, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 14px rgba(124, 108, 255, 0.45);
  animation: ws-cell-pulse 0.55s ease-in-out infinite;
}

.ws-cell.found {
  color: #ecfdf5;
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.16) 0%, transparent 50%),
    linear-gradient(155deg, rgba(16, 140, 92, 0.72) 0%, rgba(6, 95, 70, 0.62) 100%);
  border-color: rgba(52, 211, 153, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 16px rgba(52, 211, 153, 0.42);
}

.ws-cell.ws-cell--just-found {
  animation: ws-cell-just-found 0.62s ease;
}

.ws-cell.ws-cell--celebrate {
  animation: ws-cell-celebrate 0.55s ease forwards;
}

.ws-toast {
  position: absolute;
  transform: translate(-50%, 0) scale(0.85);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #ecfdf5;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.95), rgba(16, 185, 129, 0.88));
  border: 1px solid rgba(167, 243, 208, 0.55);
  box-shadow: 0 6px 20px rgba(52, 211, 153, 0.45);
  z-index: 6;
}

.ws-toast.ws-toast--show {
  animation: ws-toast-rise 0.88s ease forwards;
}

.ws-clear-banner {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.6);
  padding: 10px 22px;
  border-radius: 14px;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(124, 108, 255, 0.95), rgba(52, 211, 153, 0.92));
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 40px rgba(124, 108, 255, 0.55),
    0 12px 32px rgba(0, 0, 0, 0.35);
  z-index: 7;
}

.ws-clear-banner.ws-clear-banner--show {
  animation: ws-clear-banner 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ws-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pc, #34d399);
  box-shadow: 0 0 8px var(--pc, #34d399);
  animation: ws-particle 0.7s ease-out forwards;
  pointer-events: none;
}

.ws-particle.ws-particle--win {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  animation: ws-particle-win 0.9s ease-out forwards;
}

@keyframes ws-board-enter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes ws-board-flash {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

@keyframes ws-board-clear {
  0%, 100% { transform: translateX(0); filter: brightness(1); }
  12% { transform: translateX(-4px); filter: brightness(1.2); }
  24% { transform: translateX(4px); }
  36% { transform: translateX(-3px); filter: brightness(1.35); }
  48% { transform: translateX(3px); }
  60% { transform: translateX(0); filter: brightness(1.15); }
}

@keyframes ws-wrap-clear {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.12); }
  70% { filter: brightness(1.05); }
}

@keyframes ws-cell-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes ws-cell-celebrate {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.12); filter: brightness(1.4); }
  100% { transform: scale(1); filter: brightness(1.1); }
}

@keyframes ws-word-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  65% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes ws-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.2);
  }
}

@keyframes ws-particle-win {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.15);
  }
}

html[lang="en"] body {
  font-family: 'Pretendard Variable', system-ui, -apple-system, sans-serif;
}

.rank-result-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.rank-result {
  margin: 16px 0 20px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(124, 108, 255, 0.2), rgba(236, 72, 153, 0.15));
  border: 1px solid rgba(124, 108, 255, 0.35);
  text-align: center;
}

.rank-result-icon {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 6px;
}

.rank-result-text {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a99bff, #f9a8d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.result-message {
  margin: 0 0 8px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .header-search {
    order: 10;
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0;
  }

  .header-share {
    display: none;
  }

  .play-share {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }

  .rankings-table th:nth-child(3),
  .rankings-table td:nth-child(3) {
    display: none;
  }
}

/* Maze Escape */
.maze-escape-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  touch-action: manipulation;
}

.maze-escape-hint {
  margin: 0;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  max-width: 100%;
}

.maze-escape-canvas-wrap {
  width: 100%;
  padding: 12px;
  position: relative;
}

.maze-escape-canvas-wrap::after {
  content: '????';
  position: absolute;
  right: 22px;
  bottom: 20px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(148, 163, 184, 0.75);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  pointer-events: none;
}

.maze-escape-canvas {
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  max-width: 100%;
  touch-action: none;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(148, 163, 184, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.maze-escape-wrap--complete {
  animation: maze-escape-shake 0.72s ease-out;
}

.maze-escape-wrap--bump {
  animation: maze-escape-bump 0.2s ease-out;
}

@keyframes maze-escape-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes maze-escape-bump {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.maze-escape-pad {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 50px);
  gap: 8px;
  justify-content: center;
  padding: 4px 0 8px;
}

.maze-escape-pad-up { grid-column: 2; grid-row: 1; }
.maze-escape-pad-left { grid-column: 1; grid-row: 2; }
.maze-escape-pad-down { grid-column: 2; grid-row: 2; }
.maze-escape-pad-right { grid-column: 3; grid-row: 2; }

.maze-escape-pad-btn {
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #475569, #1e293b);
  color: #f1f5f9;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(148, 163, 184, 0.15);
  transition: transform 0.08s ease, filter 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.maze-escape-pad-btn.maze-escape-pad-up {
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  color: #0c4a6e;
}

.maze-escape-pad-btn.maze-escape-pad-down {
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  color: #0c4a6e;
}

.maze-escape-pad-btn.maze-escape-pad-left,
.maze-escape-pad-btn.maze-escape-pad-right {
  background: linear-gradient(180deg, #64748b, #334155);
}

.maze-escape-pad-btn:hover {
  filter: brightness(1.1);
}

.maze-escape-pad-btn:active,
.maze-escape-pad-btn--active {
  transform: translateY(3px) scale(0.96);
  box-shadow:
    0 0 0 rgba(0, 0, 0, 0.35),
    inset 0 2px 6px rgba(0, 0, 0, 0.25);
  filter: brightness(1.15);
}

.maze-escape-pad-btn--bump {
  animation: maze-escape-pad-bump 0.2s ease-out;
  background: linear-gradient(180deg, #f87171, #dc2626) !important;
  color: #fff !important;
}

@keyframes maze-escape-pad-bump {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(2px) scale(0.94); }
}

@media (min-width: 720px) {
  .maze-escape-pad {
    display: none;
  }

  .maze-escape-canvas-wrap::after {
    display: none;
  }
}

/* ?? Sokoban ?? */
.sokoban-hint {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(253, 230, 138, 0.85);
  text-align: center;
  line-height: 1.35;
  transition: color 0.2s ease, transform 0.2s ease;
}

.sokoban-hint--done {
  color: rgba(134, 239, 172, 0.9);
}

.sokoban-hint--warn {
  color: #fca5a5;
  animation: sokoban-hint-warn 0.35s ease;
}

@keyframes sokoban-hint-warn {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.sokoban-progress {
  font-size: 0.88rem;
  font-weight: 700;
  color: #86efac;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sokoban-progress-done {
  background: rgba(74, 222, 128, 0.22);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.35);
}

.sokoban-progress-pop {
  animation: sokoban-progress-pop 0.45s cubic-bezier(0.2, 1.3, 0.35, 1) both;
}

@keyframes sokoban-progress-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.sokoban-toast {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fef9c3;
  background: rgba(42, 31, 20, 0.92);
  border: 1px solid rgba(253, 224, 71, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 1.2, 0.35, 1);
}

.sokoban-toast-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.sokoban-toast-clear {
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.5);
}

.sokoban-toast-perfect {
  color: #fde047;
  border-color: rgba(253, 224, 71, 0.65);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(253, 224, 71, 0.25);
}

.sokoban-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  user-select: none;
  -webkit-user-select: none;
}

.sokoban-toolbar {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sokoban-undo {
  font-size: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.sokoban-undo:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.sokoban-undo:not(:disabled):active {
  transform: translateY(0);
}

.sokoban-board {
  position: relative;
  display: grid;
  gap: 2px;
  width: min(420px, 96vw);
  padding: 8px;
  background: linear-gradient(165deg, #3d2c1e 0%, #2a1f14 45%, #1a1209 100%);
  border-radius: 14px;
  border: 1px solid rgba(180, 130, 70, 0.35);
  box-shadow:
    0 10px 36px rgba(20, 12, 6, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  touch-action: none;
  overflow: hidden;
  transition: box-shadow 0.4s ease, filter 0.4s ease;
}

.sokoban-board::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 12%, rgba(255, 220, 160, 0.05) 0%, transparent 45%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 11px,
      rgba(255, 255, 255, 0.02) 11px,
      rgba(255, 255, 255, 0.02) 12px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 11px,
      rgba(255, 255, 255, 0.02) 11px,
      rgba(255, 255, 255, 0.02) 12px
    );
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.sokoban-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.5), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.sokoban-flash-on {
  animation: sokoban-flash 0.55s ease-out forwards;
}

@keyframes sokoban-flash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

.sokoban-board.sokoban-shake {
  animation: sokoban-shake 0.35s ease;
}

@keyframes sokoban-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.sokoban-board.sokoban-clearing {
  filter: brightness(1.2);
  box-shadow:
    0 0 28px rgba(74, 222, 128, 0.45),
    0 10px 36px rgba(20, 12, 6, 0.55);
}

.sokoban-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  position: relative;
  min-width: 0;
  min-height: 0;
  z-index: 1;
}

.sokoban-cell.wall {
  background: linear-gradient(155deg, #5c4a3a 0%, #3d2f24 50%, #2a1f18 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.25);
}

.sokoban-cell.floor {
  background: linear-gradient(145deg, #4a3f35 0%, #3a322a 100%);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15);
}

.sokoban-cell.goal {
  background: linear-gradient(145deg, #3a322a 0%, #2e2720 100%);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.12);
}

.sokoban-cell.goal.sokoban-goal-hit {
  animation: sokoban-goal-hit 0.5s ease-out;
  box-shadow:
    inset 0 0 16px rgba(74, 222, 128, 0.55),
    0 0 12px rgba(34, 197, 94, 0.4);
}

@keyframes sokoban-goal-hit {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1.05); }
}

.sokoban-cell.player {
  background: linear-gradient(145deg, #4a4038 0%, #3a322a 100%);
}

.sokoban-cell.player.on-goal {
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.25), #3a322a 100%);
}

.sokoban-cell.box {
  background: linear-gradient(145deg, #4a4038 0%, #3a322a 100%);
}

.sokoban-cell.box.on-goal {
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.2), #3a322a 100%);
}

.sokoban-goal-icon {
  font-size: 0.5em;
  color: #86efac;
  opacity: 0.9;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.5));
  animation: sokoban-goal-pulse 1.6s ease-in-out infinite;
}

@keyframes sokoban-goal-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.sokoban-player {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fef9c3, #fbbf24 55%, #d97706);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 3px 10px rgba(245, 158, 11, 0.5),
    inset 0 -2px 5px rgba(180, 83, 9, 0.25),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  position: relative;
}

.sokoban-player::after {
  content: '';
  position: absolute;
  top: 16%;
  left: 20%;
  width: 38%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
  pointer-events: none;
}

.sokoban-player-eye {
  position: absolute;
  top: 34%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: #1e293b;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.sokoban-player-eye-l { left: 26%; }
.sokoban-player-eye-r { right: 26%; }

.sokoban-cell.player.sokoban-move-up .sokoban-player {
  animation: sokoban-nudge-up 0.18s ease-out;
}

.sokoban-cell.player.sokoban-move-down .sokoban-player {
  animation: sokoban-nudge-down 0.18s ease-out;
}

.sokoban-cell.player.sokoban-move-left .sokoban-player {
  animation: sokoban-nudge-left 0.18s ease-out;
}

.sokoban-cell.player.sokoban-move-right .sokoban-player {
  animation: sokoban-nudge-right 0.18s ease-out;
}

.sokoban-cell.player.sokoban-push .sokoban-player {
  animation: sokoban-push-squash 0.22s cubic-bezier(0.2, 1.3, 0.35, 1) both;
}

@keyframes sokoban-push-squash {
  0% { transform: scale(1); }
  35% { transform: scale(1.14, 0.92); }
  100% { transform: scale(1); }
}

@keyframes sokoban-nudge-up {
  0% { transform: translateY(18%); }
  100% { transform: translateY(0); }
}

@keyframes sokoban-nudge-down {
  0% { transform: translateY(-18%); }
  100% { transform: translateY(0); }
}

@keyframes sokoban-nudge-left {
  0% { transform: translateX(18%); }
  100% { transform: translateX(0); }
}

@keyframes sokoban-nudge-right {
  0% { transform: translateX(-18%); }
  100% { transform: translateX(0); }
}

.sokoban-box-shape {
  width: 78%;
  height: 78%;
  border-radius: 5px;
  background: linear-gradient(145deg, #d4a574 0%, #b8864a 40%, #8b5e2a 100%);
  border: 2px solid rgba(255, 230, 180, 0.35);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.35),
    inset 0 2px 4px rgba(255, 230, 180, 0.25),
    inset 0 -3px 5px rgba(80, 50, 20, 0.3);
  position: relative;
}

.sokoban-box-shape.on-goal {
  box-shadow:
    0 0 12px rgba(74, 222, 128, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.35),
    inset 0 2px 4px rgba(255, 230, 180, 0.25);
}

.sokoban-box-tape {
  position: absolute;
  top: 42%;
  left: 8%;
  right: 8%;
  height: 14%;
  background: rgba(255, 240, 200, 0.45);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.sokoban-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  transform: translate(-50%, -50%);
  animation: sokoban-particle-burst 0.6s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

@keyframes sokoban-particle-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0.2);
  }
}

.sokoban-pad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(2, 52px);
  gap: 6px;
  margin-top: 4px;
}

.sokoban-pad-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(180, 130, 70, 0.4);
  border-radius: 12px;
  background: linear-gradient(165deg, #4a3f35, #2a1f18);
  color: #fde68a;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  touch-action: manipulation;
}

.sokoban-pad-btn:active {
  transform: scale(0.94);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  background: linear-gradient(165deg, #5c4a3a, #3a2f24);
}

.sokoban-pad-up { grid-column: 2; grid-row: 1; }
.sokoban-pad-left { grid-column: 1; grid-row: 2; }
.sokoban-pad-down { grid-column: 2; grid-row: 2; }
.sokoban-pad-right { grid-column: 3; grid-row: 2; }

@media (min-width: 720px) {
  .sokoban-pad {
    display: none;
  }
}

/* ?? Unblock (Rush Hour) ?? */
.unblock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
}

.unblock-toolbar {
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.unblock-board-wrap {
  position: relative;
  width: min(360px, 92vw);
  padding-right: 28px;
  transition: transform 0.35s ease, filter 0.35s ease;
  overflow: visible;
}

.unblock-board-wrap.unblock-clearing {
  transform: scale(1.02);
  filter: brightness(1.08);
}

.unblock-board {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  aspect-ratio: 1;
  padding: 6px;
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border-radius: var(--radius);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.35);
  overflow: visible;
}

.unblock-cell {
  border-radius: 4px;
  background: rgba(30, 41, 59, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.unblock-cell.exit-lane {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.35));
}

.unblock-exit {
  position: absolute;
  right: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
  pointer-events: none;
}

.unblock-vehicle {
  position: absolute;
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.15s ease;
  z-index: 2;
}

.unblock-vehicle.horizontal {
  background: linear-gradient(180deg, #64748b, #475569);
}

.unblock-vehicle.vertical {
  background: linear-gradient(90deg, #64748b, #475569);
}

.unblock-vehicle.truck {
  background: linear-gradient(180deg, #78716c, #57534e);
}

.unblock-vehicle.target {
  background: linear-gradient(180deg, #f87171, #dc2626);
  box-shadow:
    0 3px 10px rgba(220, 38, 38, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.unblock-vehicle.target.vertical {
  background: linear-gradient(90deg, #f87171, #dc2626);
}

.unblock-vehicle.dragging {
  cursor: grabbing;
  z-index: 5;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.unblock-vehicle::after {
  content: '';
  position: absolute;
  inset: 22% 12%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.unblock-board::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 11px,
      rgba(148, 163, 184, 0.035) 11px,
      rgba(148, 163, 184, 0.035) 12px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 11px,
      rgba(148, 163, 184, 0.035) 11px,
      rgba(148, 163, 184, 0.035) 12px
    );
  pointer-events: none;
  z-index: 0;
}

.unblock-board.unblock-board-dragging {
  cursor: grabbing;
}

.unblock-board.unblock-board-dragging .unblock-cell {
  opacity: 0.72;
}

.unblock-board.unblock-board-dragging .unblock-cell.unblock-axis-lane {
  opacity: 1;
  background: rgba(56, 189, 248, 0.14);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.28);
}

.unblock-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 85% 50%, rgba(74, 222, 128, 0.55), rgba(253, 224, 71, 0.25) 45%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}

.unblock-flash-on {
  animation: unblock-flash 0.6s ease-out forwards;
}

@keyframes unblock-flash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

.unblock-board-wrap.unblock-shake {
  animation: unblock-shake 0.38s ease;
}

@keyframes unblock-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.unblock-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9;
  transform: translate(-50%, -50%);
  animation: unblock-particle 0.65s ease-out forwards;
  box-shadow: 0 0 8px currentColor;
}

@keyframes unblock-particle {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0.15);
  }
}

.unblock-confetti {
  position: absolute;
  width: 8px;
  height: 5px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  animation: unblock-confetti 1.1s ease-out forwards;
}

@keyframes unblock-confetti {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) rotate(calc(var(--rot, 0deg) + 180deg)) scale(0.4);
  }
}

.unblock-vehicle.selected {
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.65),
    0 4px 14px rgba(56, 189, 248, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.25);
  z-index: 3;
}

.unblock-vehicle.target.selected {
  box-shadow:
    0 0 0 3px rgba(253, 224, 71, 0.75),
    0 4px 16px rgba(220, 38, 38, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
  animation: unblock-target-pulse 1.6s ease-in-out infinite;
}

@keyframes unblock-target-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

.unblock-vehicle.dragging {
  transform: scale(1.06);
  filter: brightness(1.08);
  z-index: 6;
}

.unblock-vehicle.unblock-vehicle-moved {
  animation: unblock-vehicle-pop 0.22s cubic-bezier(0.2, 1.35, 0.35, 1) both;
}

@keyframes unblock-vehicle-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.unblock-vehicle.unblock-vehicle-bump {
  animation: unblock-vehicle-bump 0.28s ease;
}

@keyframes unblock-vehicle-bump {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(var(--bump-x, -4px)); }
  70% { transform: translateX(calc(var(--bump-x, -4px) * -0.4)); }
}

.unblock-vehicle.vertical.unblock-vehicle-bump {
  animation-name: unblock-vehicle-bump-v;
}

@keyframes unblock-vehicle-bump-v {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(var(--bump-y, -4px)); }
  70% { transform: translateY(calc(var(--bump-y, -4px) * -0.4)); }
}

.unblock-vehicle.unblock-escaping {
  z-index: 7;
  filter: brightness(1.15) drop-shadow(0 0 12px rgba(253, 224, 71, 0.55));
}

.unblock-vehicle-glass {
  position: absolute;
  top: 18%;
  left: 14%;
  right: 14%;
  height: 32%;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, rgba(186, 230, 253, 0.55), rgba(125, 211, 252, 0.25));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.unblock-vehicle-headlight {
  position: absolute;
  top: 38%;
  width: 14%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, #fef9c3, #fde047 60%, transparent 70%);
  box-shadow: 0 0 8px rgba(253, 224, 71, 0.65);
  pointer-events: none;
}

.unblock-vehicle-headlight-l { left: 6%; }
.unblock-vehicle-headlight-r { right: 6%; }

.unblock-vehicle-wheel {
  position: absolute;
  bottom: 8%;
  width: 18%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #94a3b8, #1e293b 70%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.unblock-vehicle-wheel-l { left: 12%; }
.unblock-vehicle-wheel-r { right: 12%; }

.unblock-exit.unblock-exit-burst {
  animation: unblock-exit-burst 0.65s ease-out;
  color: #fde047;
}

@keyframes unblock-exit-burst {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); text-shadow: 0 0 18px rgba(253, 224, 71, 0.9); }
  100% { transform: scale(1); }
}

.unblock-exit {
  animation: unblock-exit-pulse 2.2s ease-in-out infinite;
}

@keyframes unblock-exit-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; text-shadow: 0 0 14px rgba(74, 222, 128, 0.75); }
}

.unblock-clear-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.55);
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fffbeb;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.92), rgba(22, 163, 74, 0.88));
  border: 2px solid #86efac;
  box-shadow:
    0 0 24px rgba(74, 222, 128, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 11;
}

.unblock-clear-banner--show {
  animation: unblock-banner-pop 0.72s cubic-bezier(0.22, 1.15, 0.36, 1) forwards;
}

@keyframes unblock-banner-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.unblock-win-banner {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.5);
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fffbeb;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.9));
  border: 2px solid #fde68a;
  box-shadow:
    0 0 32px rgba(251, 191, 36, 0.7),
    0 10px 28px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 12;
}

.unblock-win-banner--show {
  animation: unblock-win-banner 0.85s cubic-bezier(0.18, 1.2, 0.32, 1) forwards;
}

@keyframes unblock-win-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.unblock-stars {
  font-size: 1.55rem;
  letter-spacing: 0.18em;
  color: #475569;
  min-height: 1.85rem;
  transition: color 0.3s ease;
}

.unblock-stars-earned {
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.5);
}

.unblock-stars-pop {
  animation: unblock-stars-pop 0.48s cubic-bezier(0.2, 1.35, 0.35, 1) both;
}

@keyframes unblock-stars-pop {
  0% { transform: scale(0.55); opacity: 0.35; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.unblock-hint {
  font-size: 0.88rem;
  color: var(--text-muted, #94a3b8);
  text-align: center;
  min-height: 1.25rem;
  transition: opacity 0.3s ease;
}

.unblock-hint.unblock-hint-hide {
  opacity: 0;
}

.unblock-pad {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 50px);
  gap: 8px;
  justify-content: center;
  margin-top: 2px;
  padding: 4px;
}

.unblock-pad-up { grid-column: 2; grid-row: 1; }
.unblock-pad-left { grid-column: 1; grid-row: 2; }
.unblock-pad-down { grid-column: 2; grid-row: 2; }
.unblock-pad-right { grid-column: 3; grid-row: 2; }

.unblock-pad-btn {
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.35), rgba(71, 85, 105, 0.55));
  color: #e2e8f0;
  font-size: 1.15rem;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease;
}

.unblock-pad-btn:hover {
  filter: brightness(1.1);
}

.unblock-pad-btn:active {
  transform: scale(0.92);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

.unblock-undo {
  min-width: 120px;
  touch-action: manipulation;
}

/* ?? Ice Slide ?? */
.ice-slide-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  user-select: none;
  -webkit-user-select: none;
}

.ice-slide-board {
  position: relative;
  display: grid;
  gap: 2px;
  width: min(420px, 96vw);
  padding: 8px;
  background: linear-gradient(165deg, #0e7490 0%, #0c4a6e 45%, #082f49 100%);
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow:
    0 10px 36px rgba(8, 47, 73, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  touch-action: none;
  overflow: hidden;
}

.ice-slide-board::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.06) 0%, transparent 45%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 11px,
      rgba(255, 255, 255, 0.025) 11px,
      rgba(255, 255, 255, 0.025) 12px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 11px,
      rgba(255, 255, 255, 0.025) 11px,
      rgba(255, 255, 255, 0.025) 12px
    );
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.ice-slide-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(186, 230, 253, 0.55), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.ice-slide-flash-on {
  animation: ice-slide-flash 0.55s ease-out forwards;
}

@keyframes ice-slide-flash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

.ice-slide-board.ice-slide-shake {
  animation: ice-slide-shake 0.35s ease;
}

@keyframes ice-slide-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.ice-slide-board.ice-slide-clearing {
  box-shadow:
    0 0 28px rgba(74, 222, 128, 0.45),
    0 10px 36px rgba(8, 47, 73, 0.6);
}

.ice-slide-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.ice-slide-cell.wall {
  background: linear-gradient(155deg, #475569 0%, #334155 50%, #1e293b 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

.ice-slide-cell.ice {
  background: linear-gradient(145deg, rgba(224, 242, 254, 0.55), rgba(125, 211, 252, 0.28));
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(14, 116, 144, 0.15);
  animation: ice-slide-shimmer 3.5s ease-in-out infinite;
}

@keyframes ice-slide-shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

.ice-slide-cell.goal {
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.65), rgba(22, 163, 74, 0.4));
  box-shadow:
    inset 0 0 14px rgba(74, 222, 128, 0.5),
    0 0 10px rgba(34, 197, 94, 0.35);
  animation: ice-slide-goal-pulse 1.6s ease-in-out infinite;
}

.ice-slide-cell.goal.ice-slide-goal-hit {
  animation: ice-slide-goal-hit 0.5s ease-out;
  box-shadow:
    inset 0 0 20px rgba(253, 224, 71, 0.7),
    0 0 18px rgba(74, 222, 128, 0.65);
}

@keyframes ice-slide-goal-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.18); transform: scale(1.02); }
}

@keyframes ice-slide-goal-hit {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1.1); }
}

.ice-slide-player {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fef9c3, #fbbf24 55%, #d97706);
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 4px 12px rgba(245, 158, 11, 0.55),
    inset 0 -3px 6px rgba(180, 83, 9, 0.25),
    inset 0 2px 4px rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 3;
  will-change: left, top;
}

.ice-slide-player::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 22%;
  width: 35%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 70%);
  pointer-events: none;
}

.ice-slide-player-eye {
  position: absolute;
  top: 32%;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: #1e293b;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.ice-slide-player-eye-l { left: 24%; }
.ice-slide-player-eye-r { right: 24%; }

.ice-slide-player.ice-slide-sliding {
  box-shadow:
    0 6px 16px rgba(245, 158, 11, 0.65),
    inset 0 -3px 6px rgba(180, 83, 9, 0.25);
}

.ice-slide-player.ice-slide-slide-h {
  transform: scaleX(1.14) scaleY(0.9);
}

.ice-slide-player.ice-slide-slide-v {
  transform: scaleX(0.9) scaleY(1.14);
}

.ice-slide-player.ice-slide-landing {
  animation: ice-slide-landing-pop 0.22s cubic-bezier(0.2, 1.4, 0.35, 1) both;
}

@keyframes ice-slide-landing-pop {
  0% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.ice-slide-player.ice-slide-bump-up {
  animation: ice-slide-bump-up 0.28s ease-out;
}

.ice-slide-player.ice-slide-bump-down {
  animation: ice-slide-bump-down 0.28s ease-out;
}

.ice-slide-player.ice-slide-bump-left {
  animation: ice-slide-bump-left 0.28s ease-out;
}

.ice-slide-player.ice-slide-bump-right {
  animation: ice-slide-bump-right 0.28s ease-out;
}

@keyframes ice-slide-bump-up {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}

@keyframes ice-slide-bump-down {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(5px); }
}

@keyframes ice-slide-bump-left {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(-5px); }
}

@keyframes ice-slide-bump-right {
  0%, 100% { transform: translateX(0); }
  40% { transform: translateX(5px); }
}

.ice-slide-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  transform: translate(-50%, -50%);
  animation: ice-slide-particle 0.6s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

@keyframes ice-slide-particle {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0.2);
  }
}

.ice-slide-stars {
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  color: #475569;
  min-height: 1.75rem;
  transition: color 0.3s ease;
}

.ice-slide-stars-earned {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
}

.ice-slide-stars-pop {
  animation: ice-slide-stars-pop 0.45s cubic-bezier(0.2, 1.3, 0.35, 1) both;
}

@keyframes ice-slide-stars-pop {
  0% { transform: scale(0.6); opacity: 0.4; }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); opacity: 1; }
}

.ice-slide-pad {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 50px);
  gap: 8px;
  justify-content: center;
  margin-top: 2px;
  padding: 4px;
}

.ice-slide-pad-up { grid-column: 2; grid-row: 1; }
.ice-slide-pad-left { grid-column: 1; grid-row: 2; }
.ice-slide-pad-down { grid-column: 2; grid-row: 2; }
.ice-slide-pad-right { grid-column: 3; grid-row: 2; }

.ice-slide-pad-btn {
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(186, 230, 253, 0.95), rgba(56, 189, 248, 0.75));
  color: #0c4a6e;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 3px 0 rgba(8, 47, 73, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.08s ease, filter 0.08s ease, box-shadow 0.08s ease;
  touch-action: manipulation;
}

.ice-slide-pad-btn:hover {
  filter: brightness(1.06);
}

.ice-slide-pad-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(8, 47, 73, 0.35);
}

@media (min-width: 720px) {
  .ice-slide-pad {
    display: none;
  }
}

/* ?? Morse Code ?? */
.morse-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 18px;
  max-width: 640px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 16px;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--accent) 6%, var(--surface-1)) 0%,
    var(--surface-1) 45%,
    color-mix(in srgb, var(--accent) 4%, var(--surface-2)) 100%
  );
  box-shadow:
    0 4px 24px color-mix(in srgb, var(--accent) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

.morse-root--shake {
  animation: morse-shake 0.42s ease;
}

@keyframes morse-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

.morse-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
  z-index: 2;
}

.morse-flash-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: 16px;
}

.morse-flash-overlay--on {
  animation: morse-flash-fade 0.38s ease forwards;
}

.morse-flash-overlay--ok {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.32), transparent 72%);
}

.morse-flash-overlay--bad {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.3), transparent 72%);
}

.morse-flash-overlay--over {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.28), transparent 75%);
}

@keyframes morse-flash-fade {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

.morse-particles {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.morse-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  animation: morse-particle-burst 0.55s ease-out forwards;
}

@keyframes morse-particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

.morse-score-pop {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, 0) scale(0.6);
  font-size: 1.6rem;
  font-weight: 800;
  color: #22c55e;
  text-shadow: 0 2px 12px rgba(34, 197, 94, 0.5);
  opacity: 0;
  pointer-events: none;
}

.morse-score-pop--show {
  animation: morse-score-pop 0.55s ease forwards;
}

.morse-combo-pop {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, 0) scale(0.5);
  font-size: 1.35rem;
  font-weight: 900;
  color: #eab308;
  opacity: 0;
  pointer-events: none;
  text-shadow:
    0 0 14px color-mix(in srgb, #eab308 50%, transparent),
    0 2px 4px color-mix(in srgb, #000 20%, transparent);
  z-index: 3;
}

.morse-combo-pop--show {
  animation: morse-combo-pop 0.65s ease forwards;
}

@keyframes morse-combo-pop {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -4px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(1); }
}

.morse-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.morse-confetti-piece {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
  animation: morse-confetti-fall 0.9s ease-out forwards;
}

@keyframes morse-confetti-fall {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  }
}

.morse-celebration {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-1) 82%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.35s ease;
}

.morse-celebration--show {
  opacity: 1;
  animation: morse-celebration-in 0.5s ease;
}

@keyframes morse-celebration-in {
  0% { transform: scale(0.92); opacity: 0; }
  60% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.morse-celebration-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
}

.morse-celebration-score {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.morse-root--finish .morse-main {
  opacity: 0.35;
  pointer-events: none;
}

.morse-tx-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.morse-tx-label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.morse-tx-pad {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 14%, var(--surface-2)),
    var(--surface-2)
  );
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 3px 12px color-mix(in srgb, var(--accent) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
  transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.morse-tx-pad:hover {
  border-color: var(--accent);
}

.morse-tx-pad:active,
.morse-tx-pad--held {
  transform: scale(0.97);
  border-color: var(--accent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 32%, var(--surface-2)),
    color-mix(in srgb, var(--accent) 18%, var(--surface-2))
  );
  box-shadow:
    0 0 20px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 2px 8px color-mix(in srgb, var(--accent) 20%, transparent);
}

@keyframes morse-score-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.5);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -12px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -36px) scale(0.9);
  }
}

.morse-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 85%, var(--border)));
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px color-mix(in srgb, #000 6%, transparent);
}

.morse-speed-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.morse-speed {
  width: 120px;
  accent-color: var(--accent);
  cursor: pointer;
}

.morse-speed-val {
  min-width: 2.5rem;
  font-weight: 700;
  color: var(--accent);
}

.morse-flash-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.morse-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 10%, var(--surface-2)),
    color-mix(in srgb, var(--accent) 4%, var(--surface-2))
  );
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 10%, transparent);
}

.morse-hud-progress {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent);
}

.morse-hud-correct {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.morse-hud-streak {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}

.morse-hud-streak--hot {
  color: #eab308;
  text-shadow: 0 0 10px color-mix(in srgb, #eab308 35%, transparent);
}

.morse-flash {
  position: relative;
  width: 100%;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 90%, var(--border)),
    var(--surface-2)
  );
  border: 2px solid var(--border);
  box-shadow:
    inset 0 2px 6px color-mix(in srgb, #000 8%, transparent),
    0 2px 10px color-mix(in srgb, #000 5%, transparent);
  transition: background 0.05s, box-shadow 0.05s, border-color 0.15s;
}

.morse-flash--active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow:
    inset 0 2px 6px color-mix(in srgb, #000 8%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 20%, transparent);
}

.morse-flash--on {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 50%, var(--surface-2)),
    color-mix(in srgb, var(--accent) 30%, var(--surface-2))
  );
  box-shadow:
    0 0 32px color-mix(in srgb, var(--accent) 55%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--accent) 25%, transparent);
}

.morse-flash-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.morse-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.morse-status {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: var(--text);
}

.morse-mode-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.morse-mode-btn {
  min-width: 148px;
  min-height: 48px;
  border-radius: 12px;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.morse-mode-btn:active {
  transform: scale(0.96);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 12%, transparent);
}

.morse-nav-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.morse-back-btn {
  font-size: 0.9rem;
  border-radius: 10px;
  transition: transform 0.12s ease;
}

.morse-back-btn:active {
  transform: scale(0.97);
}

.morse-chart {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 7px;
  width: 100%;
}

.morse-chart-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 88%, var(--border)));
  box-shadow: 0 2px 6px color-mix(in srgb, #000 5%, transparent);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s ease, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.morse-chart-cell:hover:not(:disabled) {
  border-color: var(--accent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 12%, var(--surface-2)),
    color-mix(in srgb, var(--accent) 6%, var(--surface-2))
  );
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 15%, transparent);
}

.morse-chart-cell:active:not(:disabled) {
  transform: scale(0.94);
}

.morse-chart-cell--active {
  border-color: var(--accent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 22%, var(--surface-2)),
    color-mix(in srgb, var(--accent) 12%, var(--surface-2))
  );
  box-shadow:
    0 0 14px color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

.morse-chart-char {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

.morse-chart-code {
  font-size: 0.7rem;
  font-family: ui-monospace, monospace;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.morse-quiz-progress-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.morse-quiz-progress {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

.morse-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 60%, var(--surface-2));
  overflow: hidden;
  box-shadow: inset 0 1px 3px color-mix(in srgb, #000 8%, transparent);
}

.morse-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #22c55e));
  transition: width 0.35s ease;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
}

.morse-replay-btn {
  margin-top: 4px;
  min-height: 44px;
  border-radius: 12px;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: transform 0.12s ease;
}

.morse-replay-btn:active {
  transform: scale(0.96);
}

.morse-keyboard {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  width: 100%;
}

.morse-key {
  padding: 12px 4px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 90%, var(--border)));
  box-shadow: 0 2px 5px color-mix(in srgb, #000 5%, transparent);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.1s ease, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.morse-key:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 12%, transparent);
}

.morse-key:active:not(:disabled) {
  transform: scale(0.93);
}

.morse-key:disabled {
  opacity: 0.55;
  cursor: default;
}

.morse-key--correct {
  border-color: #22c55e;
  background: linear-gradient(180deg, color-mix(in srgb, #22c55e 28%, var(--surface-2)), color-mix(in srgb, #22c55e 14%, var(--surface-2)));
  box-shadow: 0 0 12px color-mix(in srgb, #22c55e 35%, transparent);
  animation: morse-key-pop 0.3s ease;
}

.morse-key--wrong {
  border-color: var(--danger);
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 24%, var(--surface-2)), color-mix(in srgb, var(--danger) 12%, var(--surface-2)));
  box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 30%, transparent);
  animation: morse-key-wrong 0.38s ease;
}

@keyframes morse-key-wrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@keyframes morse-key-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.morse-feedback {
  margin: 0;
  min-height: 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  transition: color 0.2s ease;
}

.morse-feedback.ok {
  color: #22c55e;
  text-shadow: 0 0 12px color-mix(in srgb, #22c55e 30%, transparent);
}

.morse-feedback.bad {
  color: var(--danger);
  text-shadow: 0 0 10px color-mix(in srgb, var(--danger) 25%, transparent);
}

@media (max-width: 480px) {
  .morse-root {
    padding: 10px 10px 14px;
    gap: 10px;
  }

  .morse-flash {
    height: 56px;
  }

  .morse-keyboard {
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
  }

  .morse-key {
    padding: 14px 2px;
    min-height: 48px;
    font-size: 1rem;
  }

  .morse-chart {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .morse-chart-cell {
    padding: 12px 2px;
    min-height: 52px;
  }

  .morse-mode-btn {
    min-width: 100%;
    min-height: 52px;
  }
}

/* Mastermind */
.mm-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 16px 14px 20px;
  border-radius: 20px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(ellipse 120% 70% at 50% -15%, rgba(147, 51, 234, 0.18), transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(225, 29, 72, 0.1), transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-elevated) 90%, #7c3aed 10%), var(--bg));
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mm-root--win {
  animation: mm-root-win-glow 1.1s ease forwards;
}

.mm-root--lose {
  animation: mm-root-lose-fade 0.9s ease forwards;
}

.mm-root--shake {
  animation: mm-root-shake 0.48s ease;
}

.mm-root--shake-hard {
  animation: mm-root-shake-hard 0.62s ease;
}

.mm-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 4;
}

.mm-toast {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.92);
  z-index: 6;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
  white-space: nowrap;
}

.mm-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.mm-toast--good {
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.45);
}

.mm-toast--near {
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.55);
}

.mm-toast--miss,
.mm-toast--cold {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.5);
}

.mm-win-banner,
.mm-lose-banner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mm-win-banner {
  background: radial-gradient(circle at 50% 45%, rgba(251, 191, 36, 0.28), transparent 65%);
}

.mm-lose-banner {
  background: radial-gradient(circle at 50% 45%, rgba(100, 116, 139, 0.35), transparent 65%);
}

.mm-win-banner--show {
  opacity: 1;
  animation: mm-win-banner-in 0.85s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

.mm-lose-banner--show {
  opacity: 1;
  animation: mm-lose-banner-in 0.75s ease forwards;
}

.mm-win-banner__icon,
.mm-lose-banner__icon {
  font-size: 3rem;
}

.mm-win-banner__icon {
  animation: mm-win-icon-bounce 0.7s ease infinite alternate;
}

.mm-win-banner__text {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fef3c7;
  text-shadow:
    0 0 20px rgba(251, 191, 36, 0.8),
    0 2px 8px rgba(0, 0, 0, 0.35);
}

.mm-lose-banner__text {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #e2e8f0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.mm-options {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mm-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.mm-option input {
  accent-color: #7c3aed;
}

.mm-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.mm-hud-pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #ede9fe;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.35), rgba(109, 40, 217, 0.25));
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.mm-hud-best {
  color: #fef3c7;
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.35), rgba(217, 119, 6, 0.25));
  border-color: rgba(251, 191, 36, 0.4);
}

.mm-tries-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border: 1px solid rgba(167, 139, 250, 0.2);
  overflow: hidden;
}

.mm-tries-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
  transition: width 0.35s ease, background 0.3s ease;
}

.mm-tries-bar--low .mm-tries-fill {
  background: linear-gradient(90deg, #f87171, #ef4444);
  animation: mm-tries-pulse 0.9s ease-in-out infinite;
}

.mm-input-head,
.mm-palette-head,
.mm-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2px;
}

.mm-input-label,
.mm-palette-label,
.mm-history-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mm-slot-count,
.mm-palette-hint,
.mm-history-count {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #a78bfa;
}

.mm-slot-count--full {
  color: #34d399;
  transform: scale(1.06);
  transition: color 0.2s, transform 0.2s;
}

.mm-palette-hint {
  font-size: 0.72rem;
  opacity: 0.75;
}

.mm-status {
  min-height: 1.25em;
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s;
}

.mm-status--warn {
  color: #fbbf24;
}

.mm-status--miss {
  color: #f87171;
}

.mm-status--good {
  color: #34d399;
}

.mm-status--near {
  color: #fb923c;
  font-weight: 800;
}

.mm-status--win {
  color: #fbbf24;
  font-weight: 800;
}

.mm-slots {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  transition: box-shadow 0.25s ease;
}

.mm-slots--flash-good {
  animation: mm-slots-flash-good 0.48s ease;
}

.mm-slots--flash-miss {
  animation: mm-slots-flash-miss 0.48s ease;
}

.mm-slots--flash-near {
  animation: mm-slots-flash-near 0.52s ease;
}

.mm-slots--incomplete {
  animation: mm-slots-incomplete 0.42s ease;
}

.mm-slot,
.mm-peg,
.mm-color-btn {
  position: relative;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.45) 0%, transparent 42%),
    radial-gradient(circle at 70% 78%, rgba(0, 0, 0, 0.18) 0%, transparent 50%),
    linear-gradient(155deg, var(--mm-color, #64748b), var(--mm-dark, #475569));
  border: 3px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.22),
    0 0 14px color-mix(in srgb, var(--mm-glow, #94a3b8) 55%, transparent),
    inset 0 -3px 6px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.mm-slot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transition: transform 0.15s, box-shadow 0.2s;
}

.mm-slot.empty {
  background: var(--bg-elevated);
  border: 2px dashed rgba(167, 139, 250, 0.35);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}

.mm-slot--pop {
  animation: mm-slot-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.mm-slot-shine,
.mm-peg-shine,
.mm-color-shine {
  position: absolute;
  top: 14%;
  left: 18%;
  width: 38%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.65), transparent 70%);
  pointer-events: none;
}

.mm-palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  width: 100%;
}

.mm-color-btn {
  min-height: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
}

.mm-color-btn:hover:not(:disabled) {
  transform: scale(1.1);
  filter: brightness(1.08);
}

.mm-color-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.mm-color-btn--last:not(:disabled) {
  outline: 3px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
  transform: scale(1.06);
}

.mm-color-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.4);
  box-shadow: none;
}

.mm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.mm-actions .btn {
  flex: 1;
  min-height: 48px;
  touch-action: manipulation;
}

.mm-btn-submit {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mm-log {
  width: 100%;
  max-height: 210px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}

.mm-log-empty {
  margin: 0;
  padding: 18px 8px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  opacity: 0.7;
}

.mm-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.mm-log-row--enter {
  animation: mm-log-row-in 0.38s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.mm-log-row--cold {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), var(--bg-elevated));
  border-color: rgba(239, 68, 68, 0.25);
  animation: mm-log-row-cold 0.45s ease;
}

.mm-log-row--warm {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.1), var(--bg-elevated));
  border-color: rgba(56, 189, 248, 0.22);
}

.mm-log-row--exact {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.1), var(--bg-elevated));
  border-color: rgba(52, 211, 153, 0.22);
}

.mm-log-row--hot {
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.16), var(--bg-elevated));
  border-color: rgba(249, 115, 22, 0.35);
  animation: mm-log-row-hot 0.5s ease;
}

.mm-log-row--win {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.2), rgba(52, 211, 153, 0.15));
  border-color: rgba(251, 191, 36, 0.45);
  animation: mm-log-row-win 0.55s ease;
}

.mm-log-attempt {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 1.6em;
}

.mm-peg-row {
  display: flex;
  gap: 6px;
  flex: 1;
}

.mm-peg {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border-width: 2px;
}

.mm-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.mm-hint-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mm-hint-pins {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: flex-end;
  max-width: 72px;
}

.mm-badge {
  display: inline-grid;
  place-items: center;
  min-width: 2.2em;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.mm-badge--pop {
  animation: mm-badge-pop 0.36s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.mm-badge--exact {
  color: #ecfdf5;
  background: linear-gradient(145deg, #34d399, #059669);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.45);
}

.mm-badge--near {
  color: #e0f2fe;
  background: linear-gradient(145deg, #38bdf8, #0284c7);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.mm-badge--cold {
  color: #fff;
  background: linear-gradient(145deg, #f87171, #dc2626);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
}

.mm-badge--perfect {
  color: #fff;
  background: linear-gradient(145deg, #fbbf24, #d97706);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.55);
}

.mm-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.mm-pin-black {
  background: radial-gradient(circle at 35% 30%, #3f3f46, #18181b);
}

.mm-pin-white {
  background: radial-gradient(circle at 35% 30%, #fff, #d4d4d8);
}

.mm-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pc, #6ee7b7);
  box-shadow: 0 0 10px var(--pc, #6ee7b7);
  animation: mm-particle 0.65s ease-out forwards;
}

.mm-particle--exact {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  animation: mm-particle-exact 0.72s ease-out forwards;
}

.mm-particle--near {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  animation: mm-particle-near 0.78s ease-out forwards;
}

.mm-particle--win {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  animation: mm-particle-win 0.95s ease-out forwards;
}

.mm-particle--lose {
  animation: mm-particle-lose 0.78s ease-out forwards;
}

@keyframes mm-root-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes mm-root-shake-hard {
  0%, 100% { transform: translateX(0) rotate(0); }
  12% { transform: translateX(-8px) rotate(-0.5deg); }
  28% { transform: translateX(8px) rotate(0.5deg); }
  44% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  76% { transform: translateX(-3px); }
}

@keyframes mm-root-win-glow {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.25) saturate(1.15); }
  100% { filter: brightness(1.05); }
}

@keyframes mm-root-lose-fade {
  0% { filter: brightness(1); }
  40% { filter: brightness(0.82) saturate(0.85); }
  100% { filter: brightness(0.9); }
}

@keyframes mm-tries-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

@keyframes mm-slot-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

@keyframes mm-slots-flash-good {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.2); box-shadow: 0 0 24px rgba(52, 211, 153, 0.35); }
}

@keyframes mm-slots-flash-miss {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(0.85); box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); }
}

@keyframes mm-slots-flash-near {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.25); box-shadow: 0 0 28px rgba(249, 115, 22, 0.5); }
}

@keyframes mm-slots-incomplete {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes mm-log-row-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mm-log-row-cold {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px); }
  36% { transform: translateX(5px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
}

@keyframes mm-log-row-hot {
  0% { transform: scale(1); }
  35% { transform: scale(1.03); box-shadow: 0 0 16px rgba(249, 115, 22, 0.35); }
  100% { transform: scale(1); }
}

@keyframes mm-log-row-win {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); box-shadow: 0 0 22px rgba(251, 191, 36, 0.45); }
  100% { transform: scale(1); }
}

@keyframes mm-badge-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes mm-win-banner-in {
  0% { opacity: 0; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes mm-lose-banner-in {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes mm-win-icon-bounce {
  from { transform: translateY(0) rotate(-8deg); }
  to { transform: translateY(-6px) rotate(8deg); }
}

@keyframes mm-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

@keyframes mm-particle-exact {
  0% { transform: translate(0, 0) scale(1.1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

@keyframes mm-particle-near {
  0% { transform: translate(0, 0) scale(1.1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

@keyframes mm-particle-win {
  0% { transform: translate(0, 0) scale(1.3); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

@keyframes mm-particle-lose {
  0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

@media (max-width: 400px) {
  .mm-palette {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .mm-color-btn {
    min-height: 52px;
  }

  .mm-slot {
    width: 50px;
    height: 50px;
  }

  .mm-peg {
    width: 26px;
    height: 26px;
  }
}

/* Minesweeper */
.minesweeper-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 8px 18px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(148, 163, 184, 0.22), transparent 55%),
    linear-gradient(165deg, #e8eef5 0%, #d5dee9 45%, #c5d0de 100%);
  overflow: hidden;
}

.minesweeper-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  z-index: 4;
}

.minesweeper-flash.is-lose-flash {
  background: radial-gradient(circle at 50% 45%, rgba(239, 68, 68, 0.45), transparent 65%);
  animation: minesweeper-flash-pulse 0.4s ease-out;
}

.minesweeper-flash.is-win-flash {
  background: radial-gradient(circle at 50% 40%, rgba(250, 204, 21, 0.4), transparent 60%);
  animation: minesweeper-flash-pulse 0.5s ease-out;
}

@keyframes minesweeper-flash-pulse {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

.minesweeper-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: min(520px, 100%);
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(241, 245, 249, 0.9));
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(51, 65, 85, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  z-index: 1;
}

.minesweeper-diff-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.minesweeper-diff-btn.active {
  background: linear-gradient(180deg, #78879a, #556274);
  border-color: #475569;
  color: #fff;
  box-shadow: 0 2px 6px rgba(71, 85, 105, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.minesweeper-stats {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #334155;
  font-variant-numeric: tabular-nums;
}

.minesweeper-hud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.minesweeper-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0);
  border: 1px solid rgba(100, 116, 139, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(51, 65, 85, 0.08);
  font-variant-numeric: tabular-nums;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.minesweeper-stat-pill.is-low {
  background: linear-gradient(180deg, #fef2f2, #fecaca);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 10px rgba(239, 68, 68, 0.25);
  animation: minesweeper-stat-pulse 0.9s ease-in-out infinite;
}

@keyframes minesweeper-stat-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.minesweeper-stat-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #4b5563 0%, #1f2937 55%, #0f172a 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.minesweeper-stat-icon--flag {
  width: 10px;
  height: 14px;
  border-radius: 1px;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 1px 2px rgba(185, 28, 28, 0.35);
  position: relative;
}

.minesweeper-stat-icon--flag::after {
  content: '';
  position: absolute;
  left: -2px;
  bottom: 0;
  width: 2px;
  height: 100%;
  background: #64748b;
  border-radius: 1px;
}

.minesweeper-stat-icon--clock {
  border-radius: 50%;
  background: conic-gradient(from 200deg, #3b82f6 0 75%, #e2e8f0 75% 100%);
  box-shadow: inset 0 0 0 2px #f8fafc;
}

.minesweeper-stat-val {
  font-size: 1rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
}

.minesweeper-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.minesweeper-mode-bar {
  display: flex;
  gap: 8px;
  width: min(520px, 100%);
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(100, 116, 139, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.minesweeper-mode-bar:not(.is-touch) {
  opacity: 0.92;
}

.minesweeper-mode-btn {
  flex: 1;
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.minesweeper-mode-btn:hover {
  background: rgba(241, 245, 249, 0.9);
}

.minesweeper-mode-btn.active {
  background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
  border-color: #94a3b8;
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(51, 65, 85, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.minesweeper-mode-bar.is-flag-mode .minesweeper-mode-btn[data-mode="flag"].active {
  background: linear-gradient(180deg, #fecaca, #f87171);
  border-color: #ef4444;
  color: #7f1d1d;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.minesweeper-board-shell.is-hint-shake {
  animation: minesweeper-hint-shake 0.32s ease-out;
}

@keyframes minesweeper-hint-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.minesweeper-board-shell.is-cascading {
  filter: saturate(1.05);
}

.minesweeper-board-shell {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  padding: 3px;
  background: linear-gradient(145deg, #a8b6c8, #6b7c90);
  box-shadow:
    0 10px 28px rgba(51, 65, 85, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: box-shadow 0.35s ease, filter 0.35s ease;
}

.minesweeper-board-shell.is-win {
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.55),
    0 12px 32px rgba(234, 179, 8, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: saturate(1.08);
}

.minesweeper-board-shell.is-lose {
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.45),
    0 10px 28px rgba(185, 28, 28, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.minesweeper-board-shell.is-shake {
  animation: minesweeper-shake 0.45s ease-out;
}

@keyframes minesweeper-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-0.6deg); }
  40% { transform: translateX(6px) rotate(0.6deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.minesweeper-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  z-index: 3;
}

.minesweeper-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 2px;
  background: #fbbf24;
  animation: minesweeper-particle-fly 0.65s ease-out forwards;
}

.minesweeper-particle--flag {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
}

.minesweeper-particle--boom {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f97316;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.7);
}

.minesweeper-particle--ember {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fca5a5;
}

.minesweeper-particle--confetti {
  width: 6px;
  height: 9px;
  border-radius: 1px;
  background: #38bdf8;
}

.minesweeper-particle--confetti:nth-child(3n) { background: #fbbf24; }
.minesweeper-particle--confetti:nth-child(3n+1) { background: #34d399; }
.minesweeper-particle--confetti:nth-child(3n+2) { background: #f472b6; }

.minesweeper-particle--spark {
  background: #fde68a;
  box-shadow: 0 0 6px rgba(253, 230, 138, 0.8);
}

.minesweeper-particle--dust {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
  opacity: 0.8;
}

.minesweeper-particle--smoke {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(71, 85, 105, 0.45);
  animation-duration: 0.85s;
}

.minesweeper-cascade-ring,
.minesweeper-blast-ring {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  pointer-events: none;
}

.minesweeper-cascade-ring {
  border: 2px solid rgba(96, 165, 250, 0.65);
  animation: minesweeper-cascade-ring 0.5s ease-out forwards;
}

.minesweeper-blast-ring {
  border: 3px solid rgba(249, 115, 22, 0.85);
  background: radial-gradient(circle, rgba(251, 146, 60, 0.45), transparent 70%);
  animation: minesweeper-blast-ring 0.55s ease-out forwards;
}

@keyframes minesweeper-cascade-ring {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(5.5); opacity: 0; }
}

@keyframes minesweeper-blast-ring {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(7); opacity: 0; }
}

@keyframes minesweeper-particle-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 20px), var(--dy, -20px)) rotate(var(--rot, 40deg)) scale(0.3);
  }
}

.minesweeper-board {
  display: grid;
  gap: 3px;
  padding: 10px;
  background:
    linear-gradient(180deg, #7d8fa3 0%, #64748b 100%);
  border-radius: 12px;
  border: 1px solid #4b5c70;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.22);
  touch-action: none;
  user-select: none;
}

.minesweeper-board.size-9 {
  width: min(360px, 96vw);
}

.minesweeper-board.size-16 {
  width: min(480px, 98vw);
}

.minesweeper-cell {
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  font-size: clamp(0.65rem, 2.8vw, 0.95rem);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  position: relative;
  transition: filter 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}

.minesweeper-cell.hidden {
  background: linear-gradient(160deg, #e2e8f0 0%, #b8c4d4 42%, #8fa0b5 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(51, 65, 85, 0.28),
    inset 2px 0 0 rgba(255, 255, 255, 0.2),
    inset -2px 0 0 rgba(51, 65, 85, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.18);
}

.minesweeper-cell.hidden::after {
  content: '';
  position: absolute;
  inset: 2px 2px auto 2px;
  height: 38%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent);
  pointer-events: none;
}

.minesweeper-cell.hidden:hover {
  filter: brightness(1.07);
}

.minesweeper-cell.hidden:active {
  transform: translateY(1px) scale(0.94);
  box-shadow:
    inset 0 2px 4px rgba(51, 65, 85, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

.minesweeper-cell.flag {
  background: linear-gradient(160deg, #e8edf4, #c5d0de);
  font-size: clamp(0.75rem, 3vw, 1rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(51, 65, 85, 0.15),
    0 1px 2px rgba(15, 23, 42, 0.12);
}

.minesweeper-cell.flag-pop {
  animation: minesweeper-flag-pop 0.3s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes minesweeper-flag-pop {
  0% { transform: scale(0.55) rotate(-12deg); }
  55% { transform: scale(1.18) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.minesweeper-cell.open {
  background: linear-gradient(180deg, #e8edf4 0%, #d5dee9 55%, #c8d3e2 100%);
  cursor: default;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(71, 85, 105, 0.12),
    inset 0 0 0 1px rgba(71, 85, 105, 0.1);
}

.minesweeper-cell.reveal-pop {
  animation: minesweeper-reveal-pop 0.26s cubic-bezier(0.22, 1.2, 0.36, 1);
}

@keyframes minesweeper-reveal-pop {
  0% { transform: scale(0.7); filter: brightness(1.25); }
  55% { transform: scale(1.08); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}

.minesweeper-cell.mine {
  background: linear-gradient(160deg, #fecaca, #f87171);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(185, 28, 28, 0.2);
}

.minesweeper-cell.mine-reveal {
  animation: minesweeper-mine-reveal 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes minesweeper-mine-reveal {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.minesweeper-cell.exploded {
  background: linear-gradient(160deg, #f87171, #dc2626 55%, #991b1b);
  color: #fff;
  box-shadow:
    0 0 16px rgba(239, 68, 68, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: minesweeper-boom 0.4s ease;
  z-index: 2;
}

@keyframes minesweeper-boom {
  0% { transform: scale(1); }
  30% { transform: scale(1.28); }
  55% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.minesweeper-cell.n1 { color: #1d4ed8; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.minesweeper-cell.n2 { color: #15803d; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.minesweeper-cell.n3 { color: #b91c1c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.minesweeper-cell.n4 { color: #6d28d9; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.minesweeper-cell.n5 { color: #92400e; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.minesweeper-cell.n6 { color: #0f766e; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.minesweeper-cell.n7 { color: #1f2937; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.minesweeper-cell.n8 { color: #4b5563; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }

/* ?? Nonogram ?? */
.nonogram-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 12px 10px 16px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(124, 58, 237, 0.14), transparent 55%),
    linear-gradient(165deg, #ede9fe 0%, #e2e8f0 48%, #dbe4ef 100%);
  overflow: hidden;
  user-select: none;
}

.nonogram-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  z-index: 4;
}

.nonogram-flash.is-win-flash {
  background: radial-gradient(circle at 50% 42%, rgba(250, 204, 21, 0.42), transparent 62%);
  animation: nonogram-flash-pulse 0.5s ease-out;
}

@keyframes nonogram-flash-pulse {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

.nonogram-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.75rem;
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(241, 245, 249, 0.92));
  border: 1px solid rgba(100, 116, 139, 0.24);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(51, 65, 85, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  z-index: 1;
}

.nonogram-pattern {
  font-weight: 700;
  color: #334155;
}

.nonogram-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #64748b;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
}

.nonogram-mode-group {
  display: flex;
  gap: 0.35rem;
}

.nonogram-mode-btn {
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}

.nonogram-mode-btn:hover {
  transform: translateY(-1px);
}

.nonogram-mode-btn.active {
  background: linear-gradient(145deg, #7c3aed, #5b21b6);
  color: #fff;
  border-color: #4c1d95;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.nonogram-mode-hint {
  flex: 1 1 100%;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  padding: 0.1rem 0.35rem;
}

.nonogram-wrap--fill-mode .nonogram-mode-hint {
  color: #5b21b6;
}

.nonogram-wrap--mark-mode .nonogram-mode-hint {
  color: #475569;
}

.nonogram-progress {
  flex: 1 1 120px;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.nonogram-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a78bfa, #7c3aed 55%, #5b21b6);
  transition: width 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.45);
}

.nonogram-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 5;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  box-shadow: 0 6px 20px rgba(91, 33, 182, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.nonogram-toast.is-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.nonogram-celebrate {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 45%, rgba(124, 58, 237, 0.22), transparent 68%);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.nonogram-celebrate.is-show {
  opacity: 1;
  transform: scale(1);
}

.nonogram-celebrate-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(91, 33, 182, 0.65);
  letter-spacing: 0.02em;
}

.nonogram-celebrate-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fde68a;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.nonogram-new-btn {
  transition: transform 0.12s ease, box-shadow 0.16s ease;
}

.nonogram-new-btn:active {
  transform: scale(0.96);
}

.nonogram-board-shell {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  padding: 3px;
  background: linear-gradient(145deg, #a78bfa, #6d28d9 55%, #5b21b6);
  box-shadow:
    0 10px 28px rgba(91, 33, 182, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: box-shadow 0.35s ease, filter 0.35s ease;
}

.nonogram-board-shell--win {
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.55),
    0 12px 32px rgba(234, 179, 8, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: saturate(1.1);
}

.nonogram-board-shell--shake {
  animation: nonogram-shake 0.45s ease-out;
}

@keyframes nonogram-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-0.5deg); }
  40% { transform: translateX(5px) rotate(0.5deg); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.nonogram-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  z-index: 3;
}

.nonogram-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  animation: nonogram-particle-fly 0.62s ease-out forwards;
}

.nonogram-particle--fill {
  background: #a78bfa;
  box-shadow: 0 0 5px rgba(167, 139, 250, 0.7);
}

.nonogram-particle--mark {
  width: 4px;
  height: 4px;
  background: #94a3b8;
}

.nonogram-particle--confetti {
  width: 6px;
  height: 9px;
  border-radius: 1px;
  background: #38bdf8;
}

.nonogram-particle--confetti:nth-child(3n) { background: #fbbf24; }
.nonogram-particle--confetti:nth-child(3n+1) { background: #34d399; }
.nonogram-particle--confetti:nth-child(3n+2) { background: #f472b6; }

.nonogram-particle--line {
  width: 5px;
  height: 5px;
  background: #fde68a;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.75);
}

@keyframes nonogram-particle-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 18px), var(--dy, -18px)) rotate(var(--rot, 35deg)) scale(0.25);
  }
}

.nonogram-board-wrap {
  overflow-x: auto;
  max-width: 100%;
  border-radius: 12px;
}

.nonogram-grid {
  display: grid;
  gap: 2px;
  background: linear-gradient(180deg, #64748b, #475569);
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 2px;
  touch-action: none;
}

.nonogram-corner {
  background: linear-gradient(160deg, #f8fafc, #e2e8f0);
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 4px 0 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nonogram-col-hint,
.nonogram-row-hint {
  display: flex;
  background: linear-gradient(160deg, #f8fafc, #e8edf4);
  font-size: 0.7rem;
  font-weight: 700;
  color: #334155;
  line-height: 1.1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.nonogram-col-hint {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1px;
  padding: 2px;
  min-height: 2.5rem;
}

.nonogram-row-hint {
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  min-width: 2.5rem;
}

.nonogram-hint-num {
  min-width: 0.65rem;
  text-align: center;
}

.nonogram-row-hint.is-complete,
.nonogram-col-hint.is-complete {
  color: #5b21b6;
  background: linear-gradient(160deg, #ede9fe, #ddd6fe);
}

.nonogram-row-hint.is-complete-flash,
.nonogram-col-hint.is-complete-flash {
  animation: nonogram-hint-flash 0.5s ease-out;
}

@keyframes nonogram-hint-flash {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.04); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

.nonogram-wrap--fill-mode .nonogram-cell:not(.filled):not(.marked) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(167, 139, 250, 0.25),
    0 1px 2px rgba(91, 33, 182, 0.1);
}

.nonogram-wrap--mark-mode .nonogram-cell:not(.filled):not(.marked) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(148, 163, 184, 0.28),
    0 1px 2px rgba(71, 85, 105, 0.1);
}

.nonogram-cell {
  width: 100%;
  height: 100%;
  min-width: 1.6rem;
  min-height: 1.6rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 55%, #e2e8f0 100%);
  cursor: pointer;
  touch-action: none;
  transition: filter 0.1s ease, transform 0.08s ease, box-shadow 0.12s ease;
  font-size: 0.85rem;
  font-weight: 700;
  color: #94a3b8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(148, 163, 184, 0.2),
    0 1px 2px rgba(15, 23, 42, 0.08);
  position: relative;
}

.nonogram-cell::after {
  content: '';
  position: absolute;
  inset: 2px 2px auto 2px;
  height: 35%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}

.nonogram-cell:hover {
  filter: brightness(1.06);
}

.nonogram-cell:active {
  transform: scale(0.94);
}

.nonogram-cell.filled {
  background: linear-gradient(160deg, #334155 0%, #1e293b 55%, #0f172a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(15, 23, 42, 0.25);
}

.nonogram-cell.filled.revealed,
.nonogram-cell.filled.answer {
  background: linear-gradient(160deg, #a78bfa 0%, #7c3aed 50%, #5b21b6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 8px rgba(124, 58, 237, 0.45),
    0 1px 3px rgba(91, 33, 182, 0.3);
}

.nonogram-cell.marked {
  color: #64748b;
  background: linear-gradient(160deg, #f8fafc, #e2e8f0);
}

.nonogram-cell--bump-fill {
  animation: nonogram-bump-fill 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.nonogram-cell--bump-mark {
  animation: nonogram-bump-mark 0.24s ease-out;
}

@keyframes nonogram-bump-fill {
  0% { transform: scale(0.82); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes nonogram-bump-mark {
  0% { transform: scale(1.12); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.nonogram-grid.nonogram-winning .nonogram-cell.filled {
  animation: nonogram-pop 0.38s ease backwards;
}

.nonogram-grid.nonogram-winning .nonogram-cell.filled:nth-child(odd) {
  animation-delay: 0.025s;
}

@keyframes nonogram-pop {
  0% { transform: scale(0.8); opacity: 0.45; filter: brightness(1.3); }
  60% { transform: scale(1.08); filter: brightness(1.15); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}

/* ?? Sudoku ?? */
.sudoku-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0.35rem 0.25rem 0.5rem;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(37, 99, 235, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.04), transparent 40%);
  border-radius: 18px;
}

.sudoku-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.sudoku-diff-group,
.sudoku-tools {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.sudoku-diff-btn,
.sudoku-pencil-btn {
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.sudoku-diff-btn:hover,
.sudoku-pencil-btn:hover {
  transform: translateY(-1px);
}

.sudoku-diff-btn.active,
.sudoku-pencil-btn.active {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  color: #fff;
  border-color: #1e40af;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.sudoku-stats {
  display: flex;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
}

.sudoku-progress {
  color: #2563eb;
}

.sudoku-board-shell {
  position: relative;
  width: min(92vw, 400px);
  aspect-ratio: 1;
  border-radius: 14px;
  padding: 6px;
  background:
    linear-gradient(145deg, #475569 0%, #0f172a 50%, #1e293b 100%);
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.32),
    0 2px 0 rgba(255, 255, 255, 0.1) inset,
    0 -1px 0 rgba(0, 0, 0, 0.3) inset;
  overflow: visible;
}

.sudoku-board-shell--cleared {
  animation: sudoku-board-glow 0.85s ease;
}

.sudoku-clear-flash {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.85), rgba(96, 165, 250, 0.45) 38%, transparent 72%);
  z-index: 3;
}

.sudoku-clear-flash.on {
  animation: sudoku-clear-flash 0.75s ease-out forwards;
}

.sudoku-confetti {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 4;
  animation: sudoku-confetti-burst 0.9s cubic-bezier(0.22, 0.68, 0.2, 1) forwards;
}

.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
  gap: 1px;
  box-shadow:
    inset 0 0 0 2px rgba(15, 23, 42, 0.85),
    inset 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.sudoku-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  font-size: clamp(1rem, 4.5vw, 1.5rem);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  color: #1d4ed8;
  min-height: 0;
  position: relative;
  transition: background 0.15s ease, box-shadow 0.18s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sudoku-cell.block-a {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.sudoku-cell.block-b {
  background: linear-gradient(180deg, #eef2f7 0%, #e2e8f0 100%);
}

.sudoku-cell.box-left {
  box-shadow: inset 3px 0 0 rgba(15, 23, 42, 0.78);
}

.sudoku-cell.box-top {
  box-shadow: inset 0 3px 0 rgba(15, 23, 42, 0.78);
}

.sudoku-cell.box-left.box-top {
  box-shadow:
    inset 3px 0 0 rgba(15, 23, 42, 0.78),
    inset 0 3px 0 rgba(15, 23, 42, 0.78);
}

.sudoku-cell.box-right {
  box-shadow: inset -3px 0 0 rgba(15, 23, 42, 0.78);
}

.sudoku-cell.box-bottom {
  box-shadow: inset 0 -3px 0 rgba(15, 23, 42, 0.78);
}

.sudoku-cell.box-left.box-bottom {
  box-shadow:
    inset 3px 0 0 rgba(15, 23, 42, 0.78),
    inset 0 -3px 0 rgba(15, 23, 42, 0.78);
}

.sudoku-cell.box-right.box-top {
  box-shadow:
    inset -3px 0 0 rgba(15, 23, 42, 0.78),
    inset 0 3px 0 rgba(15, 23, 42, 0.78);
}

.sudoku-cell.box-right.box-bottom {
  box-shadow:
    inset -3px 0 0 rgba(15, 23, 42, 0.78),
    inset 0 -3px 0 rgba(15, 23, 42, 0.78);
}

.sudoku-cell.box-right-inner {
  box-shadow: inset -2px 0 0 rgba(15, 23, 42, 0.55);
}

.sudoku-cell.box-bottom-inner {
  box-shadow: inset 0 -2px 0 rgba(15, 23, 42, 0.55);
}

.sudoku-cell.box-right-inner.box-bottom-inner {
  box-shadow:
    inset -2px 0 0 rgba(15, 23, 42, 0.55),
    inset 0 -2px 0 rgba(15, 23, 42, 0.55);
}

.sudoku-cell.box-left.box-bottom-inner {
  box-shadow:
    inset 3px 0 0 rgba(15, 23, 42, 0.78),
    inset 0 -2px 0 rgba(15, 23, 42, 0.55);
}

.sudoku-cell.box-top.box-right-inner {
  box-shadow:
    inset 0 3px 0 rgba(15, 23, 42, 0.78),
    inset -2px 0 0 rgba(15, 23, 42, 0.55);
}

.sudoku-cell.box-left.box-top.box-right-inner {
  box-shadow:
    inset 3px 0 0 rgba(15, 23, 42, 0.78),
    inset 0 3px 0 rgba(15, 23, 42, 0.78),
    inset -2px 0 0 rgba(15, 23, 42, 0.55);
}

.sudoku-cell.box-left.box-top.box-bottom-inner {
  box-shadow:
    inset 3px 0 0 rgba(15, 23, 42, 0.78),
    inset 0 3px 0 rgba(15, 23, 42, 0.78),
    inset 0 -2px 0 rgba(15, 23, 42, 0.55);
}

.sudoku-cell:not(.given):hover {
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
}

.sudoku-cell:not(.given):active {
  transform: scale(0.96);
}

.sudoku-cell.given {
  background: linear-gradient(180deg, #d8e0ea 0%, #b8c5d6 100%);
  color: #0f172a;
  font-weight: 800;
  cursor: default;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sudoku-cell.given.block-b {
  background: linear-gradient(180deg, #cdd6e3 0%, #a8b8cc 100%);
}

.sudoku-cell.related {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}

.sudoku-cell.same-num {
  background: linear-gradient(180deg, #bae6fd 0%, #7dd3fc 100%);
  color: #0c4a6e;
  font-weight: 800;
}

.sudoku-cell.selected {
  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 100%);
  color: #1e3a8a;
  z-index: 1;
  box-shadow:
    inset 0 0 0 2px rgba(37, 99, 235, 0.95),
    0 0 16px rgba(59, 130, 246, 0.55),
    0 0 32px rgba(96, 165, 250, 0.35);
  animation: sudoku-select-glow 1.4s ease-in-out infinite;
}

.sudoku-cell.selected.given {
  background: linear-gradient(180deg, #94a3b8, #64748b);
  color: #f8fafc;
}

.sudoku-cell.error {
  background: linear-gradient(180deg, #fecaca 0%, #fca5a5 100%);
  color: #b91c1c;
  z-index: 2;
}

.sudoku-cell.conflict {
  box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.75);
}

.sudoku-cell.error.selected {
  animation: sudoku-error-shake 0.45s ease;
  box-shadow:
    inset 0 0 0 2px rgba(239, 68, 68, 0.95),
    0 0 16px rgba(239, 68, 68, 0.45);
}

.sudoku-cell.sudoku-cell--shake {
  animation: sudoku-error-shake 0.45s ease;
}

.sudoku-cell.sudoku-cell--pop {
  animation: sudoku-place-pop 0.3s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.sudoku-cell.sudoku-cell--unit-flash {
  animation: sudoku-unit-flash 0.58s ease-out;
  z-index: 2;
}

.sudoku-cell.has-notes {
  font-size: 0;
}

.sudoku-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 2px;
  box-sizing: border-box;
}

.sudoku-note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.45rem, 2vw, 0.65rem);
  color: transparent;
  line-height: 1;
}

.sudoku-note.on {
  color: #64748b;
  font-weight: 600;
}

.sudoku-note.on.match {
  color: #1d4ed8;
  font-weight: 800;
  transform: scale(1.08);
}

.sudoku-numpad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.45rem;
  width: min(92vw, 400px);
  transition: filter 0.2s ease;
}

.sudoku-numpad.pencil-mode .sudoku-num-btn:not(.sudoku-erase-btn) {
  background: linear-gradient(180deg, #fef9c3, #fde68a);
  border-color: rgba(202, 138, 4, 0.25);
}

.sudoku-num-btn {
  position: relative;
  padding: 0.7rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.98));
  color: var(--text);
  cursor: pointer;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sudoku-num-face {
  display: block;
  line-height: 1;
}

.sudoku-num-badge {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 0.58rem;
  font-weight: 700;
  color: transparent;
  line-height: 1;
}

.sudoku-num-badge.on {
  color: #2563eb;
}

.sudoku-num-btn:hover {
  background: linear-gradient(180deg, #eff6ff, #dbeafe);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
}

.sudoku-num-btn:active {
  transform: scale(0.94);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.sudoku-num-btn.active-num {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  border-color: #1d4ed8;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.38);
}

.sudoku-num-btn.hint-num {
  box-shadow:
    0 0 0 2px rgba(234, 179, 8, 0.65),
    0 2px 6px rgba(15, 23, 42, 0.08);
}

.sudoku-num-btn.complete {
  opacity: 0.38;
  pointer-events: none;
}

.sudoku-erase-btn {
  grid-column: span 1;
  font-size: 1.25rem;
}

@keyframes sudoku-select-glow {
  0%, 100% {
    box-shadow:
      inset 0 0 0 2px rgba(59, 130, 246, 0.95),
      0 0 12px rgba(59, 130, 246, 0.45),
      0 0 22px rgba(96, 165, 250, 0.25);
  }
  50% {
    box-shadow:
      inset 0 0 0 2px rgba(37, 99, 235, 1),
      0 0 20px rgba(59, 130, 246, 0.75),
      0 0 36px rgba(96, 165, 250, 0.5);
  }
}

@keyframes sudoku-error-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px) rotate(-1.5deg); }
  36% { transform: translateX(5px) rotate(1.5deg); }
  54% { transform: translateX(-4px) rotate(-1deg); }
  72% { transform: translateX(3px); }
}

@keyframes sudoku-place-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

@keyframes sudoku-unit-flash {
  0% {
    background: inherit;
    box-shadow: none;
  }
  30% {
    background: linear-gradient(180deg, #bbf7d0, #4ade80);
    color: #14532d;
    box-shadow: inset 0 0 14px rgba(34, 197, 94, 0.55);
  }
  100% {
    background: inherit;
    box-shadow: none;
  }
}

@keyframes sudoku-clear-flash {
  0% { opacity: 0; transform: scale(0.9); }
  35% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes sudoku-board-glow {
  0%, 100% {
    box-shadow:
      0 14px 32px rgba(15, 23, 42, 0.32),
      0 2px 0 rgba(255, 255, 255, 0.1) inset;
  }
  40% {
    box-shadow:
      0 0 0 4px rgba(96, 165, 250, 0.6),
      0 0 42px rgba(59, 130, 246, 0.6),
      0 14px 32px rgba(15, 23, 42, 0.32);
  }
}

@keyframes sudoku-confetti-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--spin)) scale(0.4);
  }
}

/* ?? Yacht Dice (Yahtzee) ?? */
.yd-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0.85rem 0.65rem 1.1rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 110% 70% at 50% -10%, rgba(56, 189, 248, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(167, 139, 250, 0.06) 0%, transparent 50%),
    linear-gradient(168deg, rgba(15, 23, 42, 0.05) 0%, transparent 45%),
    var(--bg-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 28px rgba(15, 23, 42, 0.14);
}

.yd-mode-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.yd-mode-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.yd-mode-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.yd-mode-btn.active {
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #0f172a));
  color: #fff;
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}

.yd-status {
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.yd-dice-row {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  flex-wrap: wrap;
  perspective: 600px;
  min-height: 72px;
  padding: 0.35rem 0;
}

.yd-die {
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.15s ease, filter 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.yd-die:active:not(.yd-die--disabled) {
  transform: scale(0.94);
}

.yd-die--tap {
  animation: yd-die-tap 0.22s ease-out;
}

@keyframes yd-die-tap {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.yd-die--disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.72;
}

.yd-die--held .yd-die-face {
  box-shadow:
    0 0 0 3px var(--accent),
    0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 2px 4px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

.yd-die--rolling {
  animation: yd-die-roll 0.48s ease-out;
}

@keyframes yd-die-roll {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  25% { transform: rotateX(180deg) rotateY(90deg) rotateZ(45deg) scale(1.08); }
  50% { transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg); }
  75% { transform: rotateX(540deg) rotateY(270deg) rotateZ(135deg) scale(0.95); }
  100% { transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg); }
}

.yd-die-face {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: linear-gradient(148deg, #ffffff 0%, #f1f5f9 42%, #e2e8f0 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 0 rgba(15, 23, 42, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.yd-pip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 78%;
  height: 78%;
  gap: 2px;
}

.yd-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #475569, #0f172a 72%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.35);
  justify-self: center;
  align-self: center;
}

.yd-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.yd-actions .btn-primary {
  min-width: 140px;
  min-height: 44px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

.yd-actions .btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}

.yd-hold-hint {
  flex: 1 1 100%;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.yd-boards {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.yd-boards--dual {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.yd-sheet {
  background: linear-gradient(165deg, var(--surface-2) 0%, color-mix(in srgb, var(--surface-2) 88%, #0f172a) 100%);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 14px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 18px rgba(15, 23, 42, 0.1);
}

.yd-sheet-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  text-align: center;
  font-weight: 700;
}

.yd-section-head {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.25rem 0.35rem 0;
  border-top: 1px solid var(--line);
  margin-top: 0.25rem;
}

.yd-section-head:first-of-type {
  border-top: none;
  margin-top: 0;
}

.yd-cat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.42rem 0.55rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.yd-cat-row--pickable {
  cursor: pointer;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 12%, transparent);
}

.yd-cat-row--pickable:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateX(2px);
}

.yd-cat-row--pickable:active {
  transform: scale(0.98);
}

.yd-cat-row--filled {
  opacity: 0.88;
}

.yd-cat-label {
  font-size: 0.88rem;
}

.yd-cat-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
  text-align: right;
}

.yd-bonus-row,
.yd-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
}

.yd-bonus-row {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 0.85rem;
  transition: box-shadow 0.25s ease, background 0.25s ease;
}

.yd-bonus-active {
  color: #22c55e;
  font-weight: 700;
}

.yd-bonus-pending {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.yd-total-row {
  margin-top: 0.35rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.yd-total-val {
  font-size: 1.1rem;
  color: var(--accent);
}

.yd-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.yd-flow-step {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  color: var(--text-muted);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.yd-flow-step--done {
  color: color-mix(in srgb, var(--accent) 70%, var(--text-muted));
}

.yd-flow-step--active {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #0f172a));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent);
  transform: scale(1.04);
}

.yd-flow-arrow {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.65;
}

.yd-status--player {
  color: var(--accent);
  font-weight: 700;
}

.yd-status--ai {
  color: #a78bfa;
  font-weight: 700;
}

.yd-status--over {
  color: var(--text-muted);
}

.yd-reroll-dots {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.yd-reroll-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #38bdf8, #0284c7 75%);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.yd-reroll-dot--spent {
  opacity: 0.28;
  transform: scale(0.82);
  box-shadow: none;
  background: var(--line);
}

.yd-roll-btn--pulse {
  animation: yd-roll-pulse 1.35s ease-in-out infinite;
}

@keyframes yd-roll-pulse {
  0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 20px color-mix(in srgb, var(--accent) 38%, transparent); }
}

.yd-hold-hint--warn {
  color: #f87171;
  animation: yd-hint-warn 0.45s ease;
}

@keyframes yd-hint-warn {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.yd-cat-row--best {
  border-color: #fbbf24 !important;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.35),
    0 3px 12px rgba(251, 191, 36, 0.18) !important;
}

.yd-best-badge {
  margin-left: 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #422006;
  vertical-align: middle;
}

.yd-die--land {
  animation: yd-die-land 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes yd-die-land {
  0% { transform: translateY(-10px) scale(1.08) rotateX(8deg); }
  55% { transform: translateY(2px) scale(0.96); }
  100% { transform: translateY(0) scale(1); }
}

.yd-dice-row--impact {
  animation: yd-dice-impact 0.28s ease-out;
}

@keyframes yd-dice-impact {
  0% { transform: translateY(0); }
  40% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

/* One Card */
.oc-wrap {
  width: min(640px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  border-radius: var(--radius-md);
  padding: 4px;
}

.oc-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.oc-hud--your-turn {
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.15);
}

.oc-hud--ai-turn {
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
}

.oc-turn-pill {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.oc-turn-pill--player {
  color: #166534;
  background: linear-gradient(145deg, #bbf7d0 0%, #86efac 100%);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
  animation: oc-turn-glow-player 1.6s ease-in-out infinite;
}

.oc-turn-pill--ai {
  color: #991b1b;
  background: linear-gradient(145deg, #fecaca 0%, #fca5a5 100%);
}

@keyframes oc-turn-glow-player {
  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.25); }
  50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.45); }
}

.oc-hud-stats {
  display: flex;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.oc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
}

.oc-stat-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.oc-stat-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.oc-penalty-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  color: #92400e;
  background: linear-gradient(145deg, #fde68a 0%, #fbbf24 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
  animation: oc-penalty-pop 0.35s ease;
}

.oc-penalty-badge--hidden {
  display: none;
}

.oc-penalty-badge--show {
  display: inline-block;
  animation: oc-penalty-pop 0.35s ease, oc-warn-pulse 1.2s ease-in-out infinite;
}

@keyframes oc-penalty-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

.oc-wrap--shake {
  animation: oc-shake 0.45s ease;
}

.oc-wrap--gameover {
  filter: saturate(0.6) brightness(0.9);
  transition: filter 0.5s ease;
}

@keyframes oc-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-0.4deg); }
  30% { transform: translateX(5px) rotate(0.3deg); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.oc-status {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.oc-status--warn {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
  animation: oc-warn-pulse 1.4s ease-in-out infinite;
}

@keyframes oc-warn-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.15); }
  50% { box-shadow: 0 0 16px rgba(245, 158, 11, 0.35); }
}

.oc-status--pick {
  color: var(--accent);
  border-color: rgba(139, 92, 246, 0.45);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}

.oc-status--invalid {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
  animation: oc-shake 0.35s ease;
}

.oc-table {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 12px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(22, 101, 52, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #14532d 0%, #0f3d22 45%, #0a2818 100%);
  border: 1px solid rgba(34, 197, 94, 0.22);
  box-shadow:
    inset 0 2px 14px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.22);
}

.oc-table::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  opacity: 0.45;
  border-radius: inherit;
}

.oc-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  border-radius: inherit;
}

.oc-flash--ok {
  background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.38) 0%, transparent 70%);
}

.oc-flash--bad {
  background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
}

.oc-flash--play {
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.28) 0%, transparent 70%);
}

.oc-flash--warn {
  background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.32) 0%, transparent 70%);
}

.oc-flash--on {
  animation: oc-flash 0.38s ease-out forwards;
}

@keyframes oc-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.oc-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.oc-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  box-shadow: 0 0 6px currentColor;
  animation: oc-particle 0.65s ease-out forwards;
}

@keyframes oc-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

.oc-score-pop {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 6;
  pointer-events: none;
  font-size: 2rem;
  font-weight: 900;
  opacity: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.oc-score-pop--show {
  animation: oc-score-pop 0.7s ease-out forwards;
}

@keyframes oc-score-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -90%) scale(0.9);
  }
}

.oc-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}

.oc-confetti-piece {
  position: absolute;
  top: -8px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: oc-confetti-fall 1.1s ease-out forwards;
  animation-delay: var(--delay);
}

@keyframes oc-confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(280px) translateX(var(--drift)) rotate(var(--spin)) scale(0.6);
  }
}

.oc-drama {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  z-index: 8;
  pointer-events: none;
  font-size: clamp(2rem, 10vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  opacity: 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.oc-drama--win {
  color: #4ade80;
  text-shadow: 0 0 24px rgba(34, 197, 94, 0.6), 0 4px 20px rgba(0, 0, 0, 0.5);
}

.oc-drama--lose {
  color: #f87171;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5), 0 4px 20px rgba(0, 0, 0, 0.5);
}

.oc-drama--show {
  animation: oc-drama-pop 0.85s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

@keyframes oc-drama-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  25% { opacity: 1; transform: translate(-50%, -58%) scale(1.2); }
  70% { opacity: 1; transform: translate(-50%, -62%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.85); }
}

.oc-table--victory {
  box-shadow:
    inset 0 2px 14px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 0 40px rgba(34, 197, 94, 0.25);
}

.oc-table--defeat {
  filter: saturate(0.7) brightness(0.85);
  transition: filter 0.4s ease;
}

.oc-card-fly {
  position: absolute;
  z-index: 9;
  margin: -38px 0 0 -26px;
  pointer-events: none;
  animation: oc-card-fly 0.48s cubic-bezier(0.22, 0.9, 0.3, 1.1) forwards;
}

@keyframes oc-card-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0.85;
    transform: translate(var(--fx), var(--fy)) scale(0.75) rotate(8deg);
  }
}

.oc-card--bump {
  animation: oc-deck-bump 0.38s ease;
}

@keyframes oc-deck-bump {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(0.92) translateY(4px); }
  70% { transform: scale(1.06) translateY(-3px); }
}

.oc-hand--bump {
  animation: oc-hand-bump 0.38s ease;
}

@keyframes oc-hand-bump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.oc-ai-row,
.oc-player-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.oc-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  min-width: 28px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.oc-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.oc-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-items: center;
  min-height: 72px;
}

.oc-hand--player {
  justify-content: center;
}

.oc-more {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.oc-center {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 0;
}

.oc-pile-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.oc-pile-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.oc-pile-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}

.oc-suit-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.oc-suit-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

.oc-suit-val {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.oc-card {
  position: relative;
  width: clamp(52px, 14vw, 72px);
  height: clamp(76px, 20vw, 104px);
  border-radius: 10px;
  background: linear-gradient(155deg, #ffffff 0%, #f1f5f9 55%, #e2e8f0 100%);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.oc-card--pop {
  animation: oc-card-pop 0.35s ease;
}

@keyframes oc-card-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.oc-card--mini {
  width: 36px;
  height: 52px;
  border-radius: 6px;
}

.oc-card--pile {
  cursor: default;
}

.oc-card--back {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 2px,
      transparent 2px,
      transparent 8px
    ),
    linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%);
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.oc-card--back::after {
  content: '??';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.oc-card--empty {
  background: rgba(0, 0, 0, 0.15);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

.oc-card--red .oc-corner,
.oc-card--red .oc-suit-center {
  color: #dc2626;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.oc-card--black .oc-corner,
.oc-card--black .oc-suit-center {
  color: #1e293b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.oc-card--special {
  box-shadow:
    0 0 0 2px #f59e0b,
    0 0 12px rgba(245, 158, 11, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.3);
}

.oc-corner {
  position: absolute;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.oc-corner--tl {
  top: 4px;
  left: 5px;
}

.oc-corner--br {
  bottom: 4px;
  right: 5px;
  transform: rotate(180deg);
}

.oc-suit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
}

.oc-card-btn {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.oc-card-btn--playable {
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: oc-playable-ring 1.8s ease-in-out infinite;
}

.oc-card-btn--playable:hover {
  transform: translateY(-10px);
  filter: brightness(1.08);
  animation: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.55), 0 8px 20px rgba(0, 0, 0, 0.25);
}

@keyframes oc-playable-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.oc-card-btn--special-hint .oc-card {
  box-shadow:
    0 0 0 2px #f59e0b,
    0 0 14px rgba(245, 158, 11, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.3);
}

.oc-card-btn--invalid {
  animation: oc-card-invalid 0.38s ease;
}

@keyframes oc-card-invalid {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.oc-card-btn--disabled {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.45) brightness(0.9);
}

.oc-card-btn--playable:active {
  transform: translateY(-2px) scale(0.97);
}

.oc-card-btn--playable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.oc-actions {
  display: flex;
  justify-content: center;
}

.oc-actions .btn {
  min-height: 44px;
  min-width: 120px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.oc-actions .btn:active:not(:disabled) {
  transform: scale(0.96);
}

.oc-btn-draw--pulse {
  animation: oc-pulse 1.2s ease infinite;
}

@keyframes oc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
}

.oc-suit-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border: 2px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.2);
}

.oc-suit-picker--hidden {
  display: none;
}

.oc-suit-picker-title {
  margin: 0;
  font-weight: 700;
  color: var(--accent);
}

.oc-suit-btns {
  display: flex;
  gap: 12px;
}

.oc-suit-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  font-size: 1.6rem;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.oc-suit-btn:hover {
  transform: scale(1.1);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
}

.oc-suit-btn:active {
  transform: scale(0.95);
}

.oc-suit-btn--spades,
.oc-suit-btn--clubs {
  color: #1e293b;
}

.oc-suit-btn--hearts,
.oc-suit-btn--diamonds {
  color: #dc2626;
}

@media (max-width: 480px) {
  .oc-hud {
    padding: 8px 10px;
    gap: 8px;
  }

  .oc-hud-stats {
    gap: 8px;
  }

  .oc-stat-val {
    font-size: 1rem;
  }

  .oc-center {
    gap: 12px;
  }

  .oc-hand--player {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .oc-card-btn {
    scroll-snap-align: center;
    flex-shrink: 0;
  }

  .oc-suit-btn {
    width: 52px;
    height: 52px;
  }

  .oc-table {
    padding: 12px 8px;
  }
}

/* Reversi / Othello */
.reversi-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0 12px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(180, 120, 60, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(40, 28, 16, 0.05), transparent 42%);
  border-radius: calc(var(--radius) + 4px);
}

.reversi-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: min(420px, 94vw);
}

.reversi-score-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.reversi-score-pill--black {
  color: #e5e7eb;
}

.reversi-score-pill--white {
  color: #1f2937;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(230, 235, 242, 0.88));
}

.reversi-score-pill--active {
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.22), 0 3px 10px rgba(0, 0, 0, 0.14);
}

.reversi-score-pill--lead .reversi-score-val {
  color: #fbbf24;
}

.reversi-score-pill--white.reversi-score-pill--lead .reversi-score-val {
  color: #b45309;
}

.reversi-score-pill--pop {
  animation: reversi-pill-pop 0.38s cubic-bezier(0.22, 1.2, 0.36, 1);
}

.reversi-score-disc {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.reversi-score-disc--black {
  background: radial-gradient(circle at 32% 28%, #5b6574, #0b0f16 75%);
}

.reversi-score-disc--white {
  background: radial-gradient(circle at 32% 28%, #fff, #c8ced6 78%);
}

.reversi-score-val {
  min-width: 1.2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.reversi-score-val--pop {
  animation: reversi-val-pop 0.32s ease-out;
}

.reversi-score-vs {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0.7;
  letter-spacing: 0.04em;
}

.reversi-record {
  width: 100%;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.reversi-status {
  font-size: 0.92rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.4em;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.reversi-status--player {
  color: #374151;
}

.reversi-status--ai {
  color: #6b7280;
  font-style: italic;
}

.reversi-status--warn {
  color: #dc2626;
  animation: reversi-status-warn 0.42s ease-out;
}

.reversi-frame {
  position: relative;
  width: min(420px, 94vw);
  padding: 14px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(
      92deg,
      transparent 0 3px,
      rgba(0, 0, 0, 0.04) 3px 4px
    ),
    linear-gradient(145deg, #d4b07a 0%, #9a6b3f 22%, #6b4226 48%, #7a4f2c 72%, #b8895c 100%);
  box-shadow:
    0 10px 28px rgba(40, 24, 10, 0.38),
    0 2px 0 rgba(255, 230, 180, 0.28) inset,
    0 -2px 0 rgba(0, 0, 0, 0.22) inset;
  perspective: 900px;
  touch-action: manipulation;
}

.reversi-frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 220, 160, 0.26);
  pointer-events: none;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2);
}

.reversi-frame--shake {
  animation: reversi-frame-shake 0.38s ease-out;
}

.reversi-particles,
.reversi-flash {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}

.reversi-flash {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.reversi-flash--on {
  opacity: 1;
}

.reversi-flash--win {
  background: radial-gradient(circle at 50% 45%, rgba(251, 191, 36, 0.35), transparent 62%);
}

.reversi-flash--lose {
  background: radial-gradient(circle at 50% 45%, rgba(239, 68, 68, 0.22), transparent 58%);
}

.reversi-flash--draw {
  background: radial-gradient(circle at 50% 45%, rgba(148, 163, 184, 0.2), transparent 58%);
}

.reversi-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: reversi-particle-burst 0.62s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

.reversi-flip-pop {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.4);
  z-index: 6;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fef3c7;
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.88));
  border: 2px solid rgba(251, 191, 36, 0.65);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 18px rgba(251, 191, 36, 0.35);
  pointer-events: none;
  animation: reversi-flip-pop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}

.reversi-flip-pop--big {
  font-size: 1.65rem;
  border-color: rgba(52, 211, 153, 0.7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38), 0 0 24px rgba(52, 211, 153, 0.4);
}

.reversi-flip-pop--player {
  color: #fde68a;
}

.reversi-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: 100%;
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 7px,
      rgba(0, 0, 0, 0.03) 7px 8px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 7px,
      rgba(0, 0, 0, 0.03) 7px 8px
    ),
    linear-gradient(160deg, #1f7a42 0%, #0f5132 38%, #14532d 68%, #0a3520 100%);
  box-shadow:
    inset 0 0 0 2px rgba(20, 60, 30, 0.6),
    inset 0 2px 10px rgba(0, 0, 0, 0.28);
}

.reversi-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  min-height: 36px;
  background:
    linear-gradient(160deg, #24ad52 0%, #168a3f 42%, #127a38 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  cursor: default;
  padding: 0;
  aspect-ratio: 1;
  touch-action: manipulation;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.reversi-cell.valid {
  cursor: pointer;
}

.reversi-cell.valid:hover {
  background:
    linear-gradient(160deg, #32c96a 0%, #1ea34a 48%, #178a3e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 0 1px rgba(255, 255, 200, 0.2),
    0 0 10px rgba(52, 211, 153, 0.18);
}

.reversi-cell.valid:active {
  transform: scale(0.96);
}

.reversi-cell--invalid {
  animation: reversi-cell-invalid 0.38s ease-out;
}

.reversi-cell.reversi-cell-place {
  animation: reversi-cell-pulse 0.4s ease-out;
}

.reversi-cell.reversi-cell-flash {
  animation: reversi-cell-flash 0.5s ease-out;
}

.reversi-ghost {
  position: relative;
  width: 52%;
  height: 52%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(90, 100, 116, 0.55), rgba(15, 23, 42, 0.42) 72%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: reversi-ghost-pulse 1.8s ease-in-out infinite;
}

.reversi-ghost-gloss {
  position: absolute;
  top: 14%;
  left: 20%;
  width: 40%;
  height: 26%;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent);
}

.reversi-disc {
  position: relative;
  width: 86%;
  height: 86%;
  border-radius: 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.38),
    inset 0 3px 5px rgba(255, 255, 255, 0.14),
    0 4px 7px rgba(0, 0, 0, 0.32),
    0 1px 1px rgba(0, 0, 0, 0.18);
}

.reversi-disc-gloss {
  position: absolute;
  top: 12%;
  left: 18%;
  width: 42%;
  height: 28%;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.reversi-disc-rim {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.reversi-disc.black {
  background:
    radial-gradient(circle at 32% 28%, #5b6574 0%, #1f2937 42%, #0b0f16 78%, #000 100%);
}

.reversi-disc.white {
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, #f3f4f6 40%, #c8ced6 78%, #9ca3af 100%);
}

.reversi-disc.reversi-place {
  animation: reversi-place 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);
}

.reversi-disc.reversi-flip {
  animation: reversi-flip 0.5s cubic-bezier(0.34, 0.05, 0.2, 1);
}

.reversi-disc.reversi-flip-mid {
  filter: brightness(1.15);
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 6px 12px rgba(0, 0, 0, 0.35);
}

.reversi-frame.reversi-end-win {
  animation: reversi-board-win 0.72s ease-out;
}

.reversi-frame.reversi-end-lose {
  animation: reversi-board-shake 0.55s ease-out;
}

.reversi-frame.reversi-end-draw {
  animation: reversi-board-fade 0.55s ease-out;
}

@keyframes reversi-flip {
  0% {
    transform: rotateY(0deg) scale(1);
    filter: brightness(1);
  }
  35% {
    transform: rotateY(88deg) scale(1.1, 0.86);
    filter: brightness(1.08);
  }
  50% {
    transform: rotateY(90deg) scale(1.12, 0.84);
    filter: brightness(1.2);
  }
  65% {
    transform: rotateY(92deg) scale(1.08, 0.88);
    filter: brightness(1.1);
  }
  100% {
    transform: rotateY(180deg) scale(1);
    filter: brightness(1);
  }
}

@keyframes reversi-place {
  0% {
    transform: scale(0.15) translateY(-8%);
    opacity: 0.35;
  }
  55% {
    transform: scale(1.14);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes reversi-cell-pulse {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 240, 160, 0.55);
  }
  50% {
    box-shadow: inset 0 0 14px 3px rgba(255, 230, 120, 0.4);
  }
  100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  }
}

@keyframes reversi-cell-flash {
  0%,
  100% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.32);
  }
}

@keyframes reversi-ghost-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.06);
  }
}

@keyframes reversi-pill-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes reversi-val-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes reversi-flip-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -78%) scale(1.05);
  }
}

@keyframes reversi-particle-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0.2);
  }
}

@keyframes reversi-frame-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(-4px);
  }
  36% {
    transform: translateX(4px);
  }
  54% {
    transform: translateX(-3px);
  }
  72% {
    transform: translateX(2px);
  }
}

@keyframes reversi-cell-invalid {
  0%,
  100% {
    background: linear-gradient(160deg, #24ad52 0%, #168a3f 42%, #127a38 100%);
  }
  30%,
  70% {
    background: linear-gradient(160deg, #ef4444 0%, #dc2626 48%, #b91c1c 100%);
  }
}

@keyframes reversi-status-warn {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

@keyframes reversi-board-win {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    transform: scale(1.03);
    filter: brightness(1.18) saturate(1.1);
  }
  60% {
    transform: scale(1.015);
    filter: brightness(1.1);
  }
}

@keyframes reversi-board-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(-6px);
  }
  36% {
    transform: translateX(6px);
  }
  54% {
    transform: translateX(-4px);
  }
  72% {
    transform: translateX(3px);
  }
}

@keyframes reversi-board-fade {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(0.86);
  }
}

/* Connect 4 */
.c4-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 8px 0 16px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.04), transparent);
  border-radius: var(--radius-md);
}

.c4-mode-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.c4-mode-btn {
  min-width: 96px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.c4-mode-btn:hover {
  transform: translateY(-1px);
}

.c4-mode-btn:active {
  transform: translateY(1px) scale(0.98);
}

.c4-status {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  min-height: 1.4em;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.c4-status--p1 { color: #ef4444; text-shadow: 0 0 18px rgba(239, 68, 68, 0.35); }
.c4-status--p2 { color: #facc15; text-shadow: 0 0 18px rgba(250, 204, 21, 0.35); }
.c4-status--win { color: #34d399; text-shadow: 0 0 18px rgba(52, 211, 153, 0.4); }
.c4-status--lose { color: #f87171; text-shadow: 0 0 18px rgba(248, 113, 113, 0.35); }
.c4-status--draw { color: #fbbf24; text-shadow: 0 0 18px rgba(251, 191, 36, 0.35); }

.c4-board-wrap {
  position: relative;
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 42%),
    linear-gradient(180deg, #2563eb 0%, #1d4ed8 48%, #1e3a8a 100%);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px rgba(29, 78, 216, 0.4);
  transition: box-shadow 0.35s ease, filter 0.35s ease;
}

.c4-board-wrap--thud {
  animation: c4-thud 0.28s ease;
}

.c4-board-wrap--win {
  box-shadow:
    0 0 0 1px rgba(253, 224, 71, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 28px rgba(250, 204, 21, 0.45),
    0 12px 28px rgba(29, 78, 216, 0.4);
  animation: c4-board-glow 0.9s ease-in-out infinite alternate;
}

.c4-board-wrap--shake {
  animation: c4-shake 0.48s ease;
}

.c4-board-wrap--draw {
  filter: saturate(0.72) brightness(0.92);
}

.c4-board-wrap--lose-drama {
  animation: c4-lose-dim 0.65s ease forwards;
}

.c4-board-wrap--draw-drama {
  animation: c4-draw-pulse 0.75s ease-in-out 2;
}

.c4-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  width: min(364px, 92vw);
}

.c4-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 44px;
  padding: 2px 1px 0;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.c4-col::before {
  content: '';
  position: absolute;
  inset: -6px -3px;
  z-index: 0;
}

.c4-col:hover:not(.c4-col--disabled),
.c4-col--hover:not(.c4-col--disabled) {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.c4-col--full:not(.c4-col--disabled) {
  cursor: not-allowed;
}

.c4-col--invalid {
  animation: c4-col-shake 0.38s ease;
}

.c4-col--disabled {
  cursor: default;
  pointer-events: none;
}

.c4-cell {
  position: relative;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 40% 32%, rgba(148, 163, 184, 0.18), transparent 45%),
    radial-gradient(circle at 50% 55%, #1e293b 0%, #0f172a 70%);
  border-radius: 50%;
  overflow: visible;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.c4-cell--win {
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    0 0 14px rgba(250, 204, 21, 0.45);
}

.c4-disc {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow:
    inset 0 -5px 10px rgba(0, 0, 0, 0.34),
    inset 0 3px 6px rgba(255, 255, 255, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.32);
  will-change: transform;
}

.c4-disc::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.c4-disc::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 16%;
  width: 42%;
  height: 30%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.c4-disc--preview {
  opacity: 0.48;
  animation: c4-preview-float 0.85s ease-in-out infinite alternate;
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.22),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    0 0 12px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.c4-disc--p1 {
  background: radial-gradient(circle at 35% 28%, #fecaca, #ef4444 48%, #b91c1c 78%, #7f1d1d);
}

.c4-disc--p2 {
  background: radial-gradient(circle at 35% 28%, #fef9c3, #facc15 48%, #ca8a04 78%, #854d0e);
}

.c4-disc--drop {
  top: 8%;
  left: 8%;
  right: 8%;
  bottom: auto;
  height: 84%;
  transform: translateY(calc(-1 * var(--c4-drop, 1) * (100% + 6px)));
  animation: none;
}

.c4-disc--drop.c4-disc--falling {
  animation: c4-disc-drop var(--c4-drop-ms, 520ms) cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
}

.c4-disc--landed {
  position: absolute;
  inset: 8%;
}

.c4-disc--bounce {
  animation: c4-disc-bounce 0.28s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.c4-disc--win {
  z-index: 2;
  animation: c4-win-pulse 0.55s ease-in-out infinite alternate;
  animation-delay: calc(var(--win-i, 0) * 70ms);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 0 16px rgba(255, 255, 255, 0.75),
    0 0 28px rgba(250, 204, 21, 0.55),
    inset 0 -4px 8px rgba(0, 0, 0, 0.28),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.c4-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.c4-burst-speck {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  animation: c4-burst-out 0.4s ease-out forwards;
  transform: rotate(calc(var(--a, 0) * 1deg)) translateY(0);
}

.c4-burst--p1 .c4-burst-speck {
  background: #fca5a5;
}

.c4-burst--p2 .c4-burst-speck {
  background: #fde047;
}

@keyframes c4-disc-drop {
  0% {
    transform: translateY(calc(-1 * var(--c4-drop, 1) * (100% + 6px)));
  }
  72% {
    transform: translateY(0);
  }
  84% {
    transform: translateY(-11%);
  }
  92% {
    transform: translateY(0);
  }
  96% {
    transform: translateY(-4%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes c4-disc-bounce {
  0% { transform: scale(1, 1); }
  28% { transform: scale(1.16, 0.84); }
  52% { transform: scale(0.92, 1.1); }
  76% { transform: scale(1.05, 0.96); }
  100% { transform: scale(1, 1); }
}

@keyframes c4-win-pulse {
  from {
    transform: scale(1);
    filter: brightness(1);
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.7),
      0 0 12px rgba(255, 255, 255, 0.55),
      inset 0 -4px 8px rgba(0, 0, 0, 0.28);
  }
  to {
    transform: scale(1.14);
    filter: brightness(1.22);
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.95),
      0 0 24px rgba(255, 255, 255, 0.85),
      0 0 32px rgba(250, 204, 21, 0.65),
      inset 0 -4px 8px rgba(0, 0, 0, 0.22);
  }
}

@keyframes c4-board-glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.08); }
}

@keyframes c4-thud {
  0% { transform: translateY(0); }
  40% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@keyframes c4-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes c4-burst-out {
  to {
    opacity: 0;
    transform: rotate(calc(var(--a, 0) * 1deg)) translateY(-18px) scale(0.4);
  }
}

@media (max-width: 400px) {
  .c4-board {
    gap: 4px;
    width: min(320px, 94vw);
  }

  .c4-col {
    gap: 4px;
  }

  .c4-board-wrap {
    padding: 10px;
  }
}

/* Gomoku */
.gomoku-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0 18px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(180, 120, 60, 0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(90, 60, 30, 0.08), transparent 55%);
  border-radius: var(--radius);
}

.gomoku-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.gomoku-mode-btn {
  min-width: 88px;
}

.gomoku-undo {
  min-width: 120px;
}

.gomoku-status {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
  min-height: 1.4em;
  text-align: center;
  letter-spacing: 0.02em;
  transition: color 0.2s ease, transform 0.2s ease;
}

.gomoku-status--p1 { color: #1a1a1a; }
.gomoku-status--p2 { color: #8a8a8a; }
.gomoku-status--win { color: #c9a227; }
.gomoku-status--lose { color: #c45c4a; }
.gomoku-status--draw { color: #8b7355; }

.gomoku-board-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;
  padding: 6px 0;
}

.gomoku-board-wrap--win {
  animation: gomoku-glow 0.55s ease;
}

.gomoku-board-wrap--shake {
  animation: gomoku-shake 0.45s ease;
}

.gomoku-board {
  position: relative;
  width: min(480px, 96vw);
  aspect-ratio: 1;
  padding: 12px;
  border-radius: 14px;
  border: 4px solid #6b4423;
  box-shadow:
    0 10px 28px rgba(40, 24, 10, 0.35),
    inset 0 1px 0 rgba(255, 230, 180, 0.35),
    inset 0 -2px 6px rgba(60, 30, 10, 0.25);
  background-color: #c9955a;
  background-image:
    linear-gradient(
      to right,
      transparent calc(50% - 0.65px),
      rgba(70, 42, 22, 0.62) calc(50% - 0.65px),
      rgba(70, 42, 22, 0.62) calc(50% + 0.65px),
      transparent calc(50% + 0.65px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.65px),
      rgba(70, 42, 22, 0.62) calc(50% - 0.65px),
      rgba(70, 42, 22, 0.62) calc(50% + 0.65px),
      transparent calc(50% + 0.65px)
    ),
    repeating-linear-gradient(
      88deg,
      transparent 0,
      transparent 5px,
      rgba(100, 60, 25, 0.05) 5px,
      rgba(100, 60, 25, 0.05) 6px
    ),
    repeating-linear-gradient(
      2deg,
      transparent 0,
      transparent 18px,
      rgba(160, 100, 50, 0.04) 18px,
      rgba(140, 85, 40, 0.07) 19px,
      transparent 20px
    ),
    radial-gradient(ellipse 120% 80% at 20% 15%, rgba(255, 220, 160, 0.18), transparent 55%),
    radial-gradient(ellipse 90% 70% at 85% 90%, rgba(80, 45, 20, 0.12), transparent 50%),
    linear-gradient(155deg, #e8b878 0%, #c9955a 38%, #b07a42 72%, #966030 100%);
  background-size:
    calc((100% - 24px) / 15) calc((100% - 24px) / 15),
    calc((100% - 24px) / 15) calc((100% - 24px) / 15),
    auto,
    auto,
    0 0,
    0 0,
    0 0;
  background-position:
    12px 12px,
    12px 12px,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  touch-action: manipulation;
}

.gomoku-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  width: 100%;
  height: 100%;
}

.gomoku-win-line {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  overflow: visible;
}

.gomoku-win-line--visible {
  opacity: 1;
}

.gomoku-win-stroke {
  stroke: #e8b84a;
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(232, 184, 74, 0.9));
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
}

.gomoku-win-line--visible .gomoku-win-stroke {
  animation: gomoku-draw-line 0.5s ease forwards;
}

.gomoku-cell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  aspect-ratio: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  transition: background 0.15s ease, transform 0.12s ease;
}

.gomoku-cell::after {
  content: '';
  position: absolute;
  inset: -42%;
  border-radius: 50%;
  z-index: 0;
}

.gomoku-cell--hoshi::before {
  content: '';
  position: absolute;
  width: 18%;
  height: 18%;
  min-width: 4px;
  min-height: 4px;
  border-radius: 50%;
  background: #4a3020;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.gomoku-cell:disabled {
  cursor: default;
}

.gomoku-cell:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.25);
}

.gomoku-cell:not(:disabled):active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.28);
}

.gomoku-cell--place-flash {
  animation: gomoku-cell-flash 0.32s ease;
}

.gomoku-cell--invalid {
  animation: gomoku-cell-shake 0.34s ease;
}

.gomoku-cell--win {
  z-index: 2;
}

.gomoku-stone {
  position: relative;
  z-index: 1;
  width: 86%;
  height: 86%;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.38),
    0 1px 2px rgba(0, 0, 0, 0.22),
    inset 0 -4px 8px rgba(0, 0, 0, 0.38),
    inset 0 3px 5px rgba(255, 255, 255, 0.18);
}

.gomoku-stone-gloss {
  position: absolute;
  top: 12%;
  left: 18%;
  width: 38%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55), transparent 70%);
  pointer-events: none;
}

.gomoku-stone--p1 {
  background:
    radial-gradient(circle at 32% 26%, #5a5a5a 0%, #2a2a2a 38%, #0a0a0a 72%, #000 100%);
}

.gomoku-stone--p1 .gomoku-stone-gloss {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4), transparent 70%);
}

.gomoku-stone--p2 {
  background:
    radial-gradient(circle at 32% 26%, #ffffff 0%, #f0f0f0 40%, #c8c8c8 78%, #a8a8a8 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.28),
    0 1px 1px rgba(0, 0, 0, 0.15),
    inset 0 -3px 5px rgba(0, 0, 0, 0.12),
    inset 0 2px 4px rgba(255, 255, 255, 0.85);
}

.gomoku-stone--pop {
  animation: gomoku-pop 0.38s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

.gomoku-cell--last .gomoku-stone::after {
  content: '';
  position: absolute;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, #ef4444 40%, #b91c1c 100%);
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.7);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.gomoku-stone--win {
  animation: gomoku-win-pulse 0.55s ease-in-out infinite alternate;
  box-shadow:
    0 0 12px rgba(232, 184, 74, 0.95),
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3);
}

@keyframes gomoku-pop {
  0% { transform: scale(0.15); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes gomoku-draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes gomoku-win-pulse {
  from { filter: brightness(1); transform: scale(1); }
  to { filter: brightness(1.12); transform: scale(1.05); }
}

@keyframes gomoku-glow {
  0%, 100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(232, 184, 74, 0.55));
  }
}

@keyframes gomoku-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@media (max-width: 400px) {
  .gomoku-board {
    width: min(340px, 98vw);
    padding: 8px;
    background-size:
      calc((100% - 16px) / 15) calc((100% - 16px) / 15),
      calc((100% - 16px) / 15) calc((100% - 16px) / 15),
      auto,
      auto,
      0 0,
      0 0,
      0 0;
    background-position:
      8px 8px,
      8px 8px,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }

  .gomoku-cell::after {
    inset: -55%;
  }

  .gomoku-win-line {
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
  }
}

/* Checkers */
.checkers-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0 12px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(180, 100, 50, 0.1), transparent 55%),
    linear-gradient(180deg, rgba(40, 24, 12, 0.04), transparent 40%);
  border-radius: calc(var(--radius) + 4px);
}

.checkers-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: min(400px, 94vw);
}

.checkers-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.06));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.checkers-pill--red {
  color: #fecaca;
}

.checkers-pill--black {
  color: #d1d5db;
}

.checkers-pill.active {
  transform: scale(1.04);
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.2),
    0 4px 14px rgba(0, 0, 0, 0.18);
}

.checkers-pill--red.active {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.35), rgba(127, 29, 29, 0.25));
}

.checkers-pill--black.active {
  background: linear-gradient(160deg, rgba(75, 85, 99, 0.45), rgba(17, 24, 39, 0.35));
}

.checkers-pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.checkers-pill--red .checkers-pill-dot {
  background: radial-gradient(circle at 35% 30%, #fecaca, #dc2626 70%);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

.checkers-pill--black .checkers-pill-dot {
  background: radial-gradient(circle at 35% 30%, #9ca3af, #1f2937 70%);
  box-shadow: 0 0 6px rgba(55, 65, 81, 0.45);
}

.checkers-pill-count {
  min-width: 1.2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.checkers-vs {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0.7;
}

.checkers-capture-badge {
  display: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #92400e;
  background: linear-gradient(160deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
  animation: checkers-badge-pulse 1.1s ease-in-out infinite;
}

.checkers-capture-badge.visible {
  display: block;
}

.checkers-hud.capture-mode .checkers-pill--red.active {
  animation: checkers-turn-glow 1.2s ease-in-out infinite;
}

.checkers-status {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  min-height: 1.4em;
  letter-spacing: 0.01em;
  text-align: center;
  transition: color 0.15s ease;
}

.checkers-status.checkers-shake {
  animation: checkers-status-shake 0.38s ease-out;
}

.checkers-frame {
  position: relative;
  width: min(380px, 94vw);
  padding: 12px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, #c4a574 0%, #8b5e34 28%, #6b4226 55%, #8b5e34 78%, #a67c52 100%);
  box-shadow:
    0 10px 28px rgba(40, 24, 10, 0.35),
    0 2px 0 rgba(255, 230, 180, 0.25) inset,
    0 -2px 0 rgba(0, 0, 0, 0.2) inset;
  touch-action: none;
}

.checkers-frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 220, 160, 0.22);
  pointer-events: none;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.18);
}

.checkers-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 2px rgba(60, 30, 10, 0.45),
    inset 0 2px 8px rgba(0, 0, 0, 0.22);
}

.checkers-particles {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  overflow: hidden;
  border-radius: 8px;
  z-index: 4;
}

.checkers-floats {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  overflow: hidden;
  border-radius: 8px;
  z-index: 5;
}

.checkers-flash {
  position: absolute;
  inset: 12px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

.checkers-flash.checkers-flash-promote {
  animation: checkers-flash-promote 0.5s ease-out forwards;
}

.checkers-flash.checkers-flash-win {
  animation: checkers-flash-win 0.55s ease-out forwards;
}

.checkers-flash.checkers-flash-lose {
  animation: checkers-flash-lose 0.48s ease-out forwards;
}

.checkers-float-text {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  pointer-events: none;
  animation: checkers-float-rise 0.78s cubic-bezier(0.22, 1.1, 0.36, 1) forwards;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.checkers-float-promote {
  color: #fef08a;
  font-size: 1.05rem;
  text-shadow:
    0 0 10px rgba(251, 191, 36, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.55);
}

.checkers-float-combo {
  color: #fbbf24;
  font-size: 1.15rem;
}

.checkers-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  opacity: 0.95;
  animation: checkers-particle-burst 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
}

.checkers-status.capture-required {
  color: #d97706;
  font-weight: 700;
}

.checkers-piece.can-capture {
  animation: checkers-capture-pulse 1.15s ease-in-out infinite;
}

.checkers-piece.red.can-capture {
  box-shadow:
    0 0 0 2px #fbbf24,
    0 0 14px rgba(251, 191, 36, 0.65),
    inset 0 2px 4px rgba(255, 255, 255, 0.35);
}

@keyframes checkers-capture-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.12);
  }
}

.checkers-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  cursor: default;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.checkers-cell.light {
  background:
    linear-gradient(160deg, #f8edd4 0%, #ead9b8 45%, #dcc8a0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.checkers-cell.dark {
  background:
    linear-gradient(160deg, #a0522d 0%, #8b4513 45%, #6b3410 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 140, 0.12),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.checkers-cell.dark:hover:not(:disabled) {
  background:
    linear-gradient(160deg, #b8653a 0%, #9a4f1a 45%, #7a4012 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.18),
    0 0 0 1px rgba(255, 230, 180, 0.12);
}

.checkers-cell.dark:active:not(:disabled) {
  transform: scale(0.97);
}

.checkers-cell.selected {
  box-shadow:
    inset 0 0 0 3px #fbbf24,
    inset 0 0 12px rgba(251, 191, 36, 0.35);
  z-index: 1;
}

.checkers-cell.valid-move {
  box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.75);
}

.checkers-cell.valid-move-capture {
  box-shadow:
    inset 0 0 0 2px rgba(245, 158, 11, 0.9),
    inset 0 0 14px rgba(251, 191, 36, 0.25);
}

.checkers-cell.valid-move::after {
  content: '';
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.85), rgba(34, 197, 94, 0.45));
  pointer-events: none;
  animation: checkers-hint-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}

.checkers-cell.checkers-cell-flash {
  animation: checkers-cell-flash 0.48s ease-out;
}

.checkers-piece {
  width: 74%;
  height: 74%;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 4px 8px rgba(255, 255, 255, 0.38),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    0 3px 6px rgba(0, 0, 0, 0.35);
  position: relative;
  pointer-events: none;
  z-index: 2;
}

.checkers-piece-gloss {
  position: absolute;
  top: 10%;
  left: 18%;
  width: 38%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.55), transparent 70%);
  pointer-events: none;
}

.checkers-piece.red {
  background:
    radial-gradient(circle at 35% 28%, #fecaca 0%, #ef4444 38%, #dc2626 62%, #991b1b 100%);
}

.checkers-piece.black {
  background:
    radial-gradient(circle at 35% 28%, #9ca3af 0%, #374151 38%, #1f2937 62%, #030712 100%);
}

.checkers-piece.king {
  box-shadow:
    inset 0 4px 8px rgba(255, 255, 255, 0.42),
    inset 0 -3px 6px rgba(0, 0, 0, 0.2),
    0 0 0 2px #fbbf24,
    0 0 10px rgba(251, 191, 36, 0.45),
    0 3px 6px rgba(0, 0, 0, 0.35);
}

.checkers-piece.checkers-piece-hop {
  animation: checkers-piece-hop 0.22s cubic-bezier(0.22, 1.2, 0.36, 1);
}

.checkers-piece.checkers-piece-promote {
  animation: checkers-piece-promote 0.42s cubic-bezier(0.22, 1.3, 0.36, 1);
}

.checkers-crown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 900;
  color: #fef08a;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 0 6px rgba(251, 191, 36, 0.5);
  z-index: 1;
}

.checkers-frame.checkers-end-win {
  animation: checkers-board-win 0.5s ease-out;
}

.checkers-frame.checkers-end-lose {
  animation: checkers-board-shake 0.48s ease-out;
}

.checkers-frame.checkers-end-draw {
  animation: checkers-board-fade 0.5s ease-out;
}

@keyframes checkers-particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.2);
  }
}

@keyframes checkers-hint-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes checkers-cell-flash {
  0% {
    background: linear-gradient(160deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%);
    box-shadow: inset 0 0 14px rgba(255, 255, 200, 0.6);
  }
  100% {
    box-shadow: none;
  }
}

@keyframes checkers-piece-hop {
  0% {
    transform: scale(0.82) translateY(4px);
    opacity: 0.7;
  }
  60% {
    transform: scale(1.08) translateY(-3px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes checkers-piece-promote {
  0% {
    transform: scale(0.75);
    filter: brightness(1.4);
  }
  45% {
    transform: scale(1.18);
    filter: brightness(1.6);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes checkers-board-win {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.025);
    filter: brightness(1.15);
    box-shadow:
      0 10px 28px rgba(40, 24, 10, 0.35),
      0 0 32px rgba(251, 191, 36, 0.45);
  }
  55% {
    transform: scale(1.015);
    filter: brightness(1.08);
  }
}

@keyframes checkers-board-shake {
  0%, 100% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(-6px) rotate(-0.4deg);
  }
  36% {
    transform: translateX(6px) rotate(0.4deg);
  }
  54% {
    transform: translateX(-4px);
  }
  72% {
    transform: translateX(4px);
  }
}

@keyframes checkers-board-fade {
  0%, 100% {
    opacity: 1;
    filter: saturate(1);
  }
  50% {
    opacity: 0.82;
    filter: saturate(0.65);
  }
}

@keyframes checkers-badge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.55);
  }
}

@keyframes checkers-turn-glow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(251, 191, 36, 0.2),
      0 4px 14px rgba(0, 0, 0, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(251, 191, 36, 0.45),
      0 0 20px rgba(251, 191, 36, 0.3);
  }
}

@keyframes checkers-status-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes checkers-float-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.6);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%) scale(0.9);
  }
}

@keyframes checkers-capture-hint-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes checkers-flash-promote {
  0% {
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.55), transparent 65%);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.15), transparent 70%);
  }
}

@keyframes checkers-flash-win {
  0% {
    opacity: 0;
    background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.5), transparent 60%);
  }
  30% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}

@keyframes checkers-flash-lose {
  0% {
    opacity: 0;
    background: rgba(30, 10, 10, 0.45);
  }
  40% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 480px) {
  .checkers-frame {
    width: min(360px, 96vw);
    padding: 10px;
  }

  .checkers-hud {
    gap: 6px 8px;
  }

  .checkers-pill {
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  .checkers-piece {
    width: 78%;
    height: 78%;
  }
}

/* Rock Paper Scissors AI */
@keyframes rps-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes rps-flash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes rps-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

@keyframes rps-score-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.6);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -28px) scale(0.9);
  }
}

@keyframes rps-pick-pop {
  0% { transform: scale(0.85); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1.05); }
}

@keyframes rps-streak-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.35); }
  50% { box-shadow: 0 0 14px 3px rgba(249, 115, 22, 0.45); }
}

.rps-root {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 420px;
  margin: 0 auto;
  padding: 0.5rem 0;
  user-select: none;
  -webkit-user-select: none;
}

.rps-root--shake {
  animation: rps-shake 0.45s ease;
}

.rps-root--gameover {
  opacity: 0.92;
  transition: opacity 0.35s ease;
}

.rps-note {
  margin: 0;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.14), rgba(251, 146, 60, 0.08));
  border: 1px solid rgba(249, 115, 22, 0.2);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.08);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.rps-hud {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.rps-hud-item {
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.rps-hud-item strong {
  color: var(--text);
  font-weight: 700;
}

.rps-hud-streak strong {
  color: #f97316;
}

.rps-hud-streak--hot {
  border-color: rgba(249, 115, 22, 0.45);
  animation: rps-streak-glow 1.4s ease-in-out infinite;
}

.rps-hud-streak--pulse {
  animation: rps-streak-pulse 0.52s ease-out;
}

.rps-arena {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.35rem 0.75rem;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 15%, rgba(249, 115, 22, 0.08), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(59, 130, 246, 0.07), transparent 40%),
    linear-gradient(165deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.22));
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 20px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.rps-arena--clash {
  animation: rps-arena-clash 0.48s ease-out;
}

.rps-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
}

.rps-flash--ok {
  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.35), transparent 70%);
}

.rps-flash--bad {
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.35), transparent 70%);
}

.rps-flash--neutral {
  background: radial-gradient(circle at center, rgba(148, 163, 184, 0.25), transparent 70%);
}

.rps-flash--over {
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.45), transparent 65%);
}

.rps-flash--on {
  animation: rps-flash 0.38s ease-out forwards;
}

.rps-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.rps-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  animation: rps-particle 0.65s ease-out forwards;
}

.rps-score-pop {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, 0);
  font-size: 1.1rem;
  font-weight: 800;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.rps-score-pop--show {
  animation: rps-score-pop 0.58s ease-out forwards;
}

.rps-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  z-index: 1;
}

.rps-side-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rps-pick {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  border: 2px solid var(--border);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.rps-pick.revealed {
  transform: scale(1.05);
  border-color: #f97316;
}

.rps-pick--pop {
  animation: rps-pick-pop 0.32s ease-out;
}

.rps-pick--player.revealed {
  border-color: #22c55e;
  box-shadow:
    0 0 18px rgba(34, 197, 94, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.1);
}

.rps-pick--ai.revealed {
  border-color: #ef4444;
  box-shadow:
    0 0 18px rgba(239, 68, 68, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.1);
}

.rps-vs {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-muted);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.rps-feedback {
  min-height: 1.5rem;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.rps-feedback.ok {
  color: #22c55e;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
  animation: rps-streak-pulse 0.45s ease-out;
}

.rps-feedback.bad {
  color: #ef4444;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}

.rps-feedback.neutral {
  color: var(--text-muted);
}

.rps-stats-wrap {
  padding: 0.85rem;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rps-stats-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.rps-stats {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.rps-stat-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2rem;
  align-items: center;
  gap: 0.5rem;
}

.rps-stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.rps-bar-track {
  height: 0.7rem;
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.rps-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.35s ease;
  min-width: 0;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.08);
}

.rps-bar-fill--win {
  background: linear-gradient(90deg, #16a34a, #22c55e, #4ade80);
}

.rps-bar-fill--lose {
  background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
}

.rps-bar-fill--lose {
  background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
}

.rps-bar-fill--draw {
  background: linear-gradient(90deg, #64748b, #94a3b8, #cbd5e1);
}

.rps-stat-value {
  font-size: 0.85rem;
  font-weight: 700;
  text-align: right;
}

.rps-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.rps-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem 0.45rem;
  min-height: 5.5rem;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(165deg, var(--surface), var(--surface-2));
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.rps-choice:hover:not(:disabled) {
  border-color: #f97316;
  background: linear-gradient(165deg, rgba(249, 115, 22, 0.1), var(--surface));
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.15);
}

.rps-choice:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.rps-choice:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rps-choice-emoji {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.rps-choice-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .rps-root {
    max-width: 100%;
    gap: 0.85rem;
  }

  .rps-pick {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2.4rem;
  }

  .rps-choice {
    padding: 1rem 0.4rem;
    min-height: 5rem;
  }

  .rps-choice-emoji {
    font-size: 2.25rem;
  }

  .rps-arena {
    padding: 1rem 0.5rem;
    gap: 0.65rem;
  }
}

/* ?? Roulette ?? */
.rl-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 0 18px;
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  touch-action: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 83, 45, 0.18), transparent 55%);
  border-radius: var(--radius);
  transition: opacity 0.35s ease;
}

.rl-wrap--shake {
  animation: rl-wrap-shake 0.45s ease;
}

.rl-wrap--gameover {
  opacity: 0.78;
}

.rl-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.rl-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.rl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-width: 76px;
}

.rl-stat--chips {
  border-color: rgba(251, 191, 36, 0.35);
}

.rl-stat--pulse {
  animation: rl-stat-pulse 0.5s ease;
}

.rl-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rl-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  transition: transform 0.2s ease, color 0.2s ease;
}

.rl-stat-value--pop {
  animation: rl-chips-pop 0.45s ease;
}

.rl-color--red { color: #ef4444; }
.rl-color--black { color: #e8eaed; }
.rl-color--green { color: #22c55e; }

.rl-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 720px;
}

.rl-wheel-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rl-wheel-wrap {
  position: relative;
  width: min(280px, 72vw);
  height: min(280px, 72vw);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.rl-wheel-wrap--spinning {
  filter: brightness(1.06);
  animation: rl-wheel-spin-pulse 0.6s ease-in-out infinite;
}

.rl-wheel-wrap--landed {
  animation: rl-wheel-land-pop 0.55s ease;
}

.rl-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  touch-action: none;
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(212, 175, 55, 0.35),
    inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.rl-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 20px solid #fbbf24;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  z-index: 3;
  transition: filter 0.2s ease;
}

.rl-pointer--bounce {
  animation: rl-pointer-bounce 0.52s ease;
}

.rl-flash {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.rl-flash--win {
  background: radial-gradient(circle at center, rgba(74, 222, 128, 0.38), transparent 72%);
}

.rl-flash--lose {
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.3), transparent 72%);
}

.rl-flash--over {
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.42), transparent 75%);
}

.rl-flash--on {
  animation: rl-flash 0.38s ease-out forwards;
}

.rl-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
  z-index: 5;
}

.rl-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: -4px 0 0 -4px;
  box-shadow: 0 0 6px currentColor;
  animation: rl-particle 0.58s ease-out forwards;
}

.rl-board-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 260px;
  max-width: 420px;
}

.rl-bet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.rl-bet-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.rl-bet-panel--shake {
  animation: rl-bet-shake 0.42s ease;
}

.rl-bet-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rl-bet-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.1rem;
  color: #1f2937;
  background: linear-gradient(145deg, #fde68a, #fbbf24 50%, #d97706);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rl-bet-amount {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.02em;
}

.rl-bet-unit {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.rl-bet-step-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rl-bet-step {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.2rem;
  font-weight: 800;
  border-radius: var(--radius-sm);
  transition: transform 0.12s ease;
}

.rl-bet-step:active:not(:disabled) {
  transform: scale(0.92);
}

.rl-stake-bar {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.rl-bet-hint {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.rl-bet-hint--ready {
  color: #86efac;
}

.rl-bet-hint--spin {
  color: #7dd3fc;
  animation: rl-hint-pulse 0.9s ease-in-out infinite;
}

.rl-bet-hint--warn {
  color: var(--danger);
}

.rl-bet-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.rl-bet-input {
  width: 88px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

.rl-bet-btns {
  display: flex;
  gap: 6px;
}

.rl-bet-preset {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.rl-bet-preset:active:not(:disabled) {
  transform: scale(0.94);
}

.rl-bet-preset--active {
  box-shadow: 0 0 0 2px #fbbf24, 0 4px 12px rgba(251, 191, 36, 0.35);
  transform: scale(1.04);
}

.rl-board {
  display: flex;
  gap: 4px;
  padding: 10px;
  background: linear-gradient(160deg, #166534 0%, #14532d 45%, #052e16 100%);
  border-radius: var(--radius);
  border: 2px solid rgba(212, 175, 55, 0.35);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.rl-num-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.rl-num-row {
  display: flex;
  gap: 3px;
}

.rl-cell {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 1.6;
  border: none;
  border-radius: 6px;
  font-size: clamp(0.65rem, 2.5vw, 0.8rem);
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.rl-cell:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 0 0 2px #fbbf24, 0 4px 10px rgba(0, 0, 0, 0.35);
}

.rl-cell:active:not(:disabled) {
  transform: scale(0.96);
}

.rl-cell--red {
  background: linear-gradient(145deg, #ef4444, #b91c1c 55%, #7f1d1d);
}

.rl-cell--black {
  background: linear-gradient(145deg, #4b5563, #1f2937 55%, #111827);
}

.rl-cell--green {
  background: linear-gradient(145deg, #22c55e, #16a34a 55%, #14532d);
}

.rl-cell--zero {
  flex: 0 0 36px;
  writing-mode: vertical-rl;
  aspect-ratio: auto;
  min-height: 100%;
}

.rl-cell.rl-has-bet {
  box-shadow: inset 0 0 0 2px #fbbf24, 0 0 12px rgba(251, 191, 36, 0.35);
}

.rl-cell--pop {
  animation: rl-cell-pop 0.28s ease;
}

.rl-chip-marker {
  position: absolute;
  bottom: 2px;
  right: 2px;
  padding: 2px 5px;
  border-radius: 999px;
  background: linear-gradient(145deg, #fde68a, #fbbf24 50%, #d97706);
  color: #1f2937;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.rl-outside {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.rl-outside-btn {
  position: relative;
  padding: 12px 6px;
  min-height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.rl-outside-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(212, 175, 55, 0.4);
}

.rl-outside-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.rl-outside--red { background: linear-gradient(145deg, rgba(220, 38, 38, 0.35), rgba(127, 29, 29, 0.5)); color: #fca5a5; }
.rl-outside--black { background: linear-gradient(145deg, rgba(55, 65, 81, 0.6), rgba(17, 24, 39, 0.8)); }

.rl-outside-btn.rl-has-bet {
  box-shadow: inset 0 0 0 2px #fbbf24, 0 0 10px rgba(251, 191, 36, 0.3);
}

.rl-payouts {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.rl-payouts-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}

.rl-payout-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rl-payout-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.rl-payout-item strong {
  color: #fbbf24;
  font-weight: 800;
}

.rl-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.rl-btn-clear {
  min-height: 44px;
  padding: 10px 20px;
}

.rl-btn-spin {
  min-width: 150px;
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 12px 32px;
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.rl-btn-spin--ready {
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
  animation: rl-spin-glow 1.6s ease-in-out infinite;
}

.rl-btn-spin:active:not(:disabled) {
  transform: scale(0.96);
}

.rl-feedback {
  margin: 0;
  min-height: 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
}

.rl-feedback.ok { color: #22c55e; }
.rl-feedback.bad { color: var(--danger); }

.rl-feedback--pop {
  animation: rl-feedback-pop 0.4s ease;
}

.rl-feedback--big {
  font-size: 1.05rem;
  text-shadow: 0 0 12px rgba(74, 222, 128, 0.45);
}

.rl-float {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translateX(-50%) translateY(0);
  font-size: 1.35rem;
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}

.rl-float--win { color: #4ade80; text-shadow: 0 0 14px rgba(74, 222, 128, 0.5); }
.rl-float--lose { color: #f87171; text-shadow: 0 0 10px rgba(248, 113, 113, 0.4); }

.rl-float--on {
  animation: rl-float-rise 0.9s ease-out forwards;
}

.rl-streak {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #1f2937;
  background: linear-gradient(145deg, #fde68a, #fbbf24);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.45);
  pointer-events: none;
  opacity: 0;
  z-index: 7;
}

.rl-streak--on {
  animation: rl-streak-pop 1.1s ease forwards;
}

.rl-stat-value--drain {
  animation: rl-chips-drain 0.85s ease forwards;
}

@keyframes rl-bet-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes rl-hint-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes rl-wheel-spin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  50% { box-shadow: 0 0 28px 4px rgba(251, 191, 36, 0.22); }
}

@keyframes rl-wheel-land-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes rl-pointer-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
  30% { transform: translateX(-50%) translateY(6px); filter: drop-shadow(0 4px 10px rgba(251, 191, 36, 0.6)); }
  55% { transform: translateX(-50%) translateY(-3px); }
  75% { transform: translateX(-50%) translateY(2px); }
}

@keyframes rl-chip-drop {
  0% { transform: scale(0.4) translateY(-8px); opacity: 0; }
  60% { transform: scale(1.12) translateY(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes rl-float-rise {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.85); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-48px) scale(1); }
}

@keyframes rl-streak-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.12); }
  75% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.95) translateY(-12px); }
}

@keyframes rl-chips-drain {
  0% { transform: scale(1); color: var(--accent); }
  40% { transform: scale(0.88); color: #ef4444; }
  100% { transform: scale(1); color: #ef4444; opacity: 0.55; }
}

@keyframes rl-wrap-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes rl-stat-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes rl-chips-pop {
  0% { transform: scale(1); color: var(--accent); }
  35% { transform: scale(1.22); color: #4ade80; }
  100% { transform: scale(1); color: var(--accent); }
}

@keyframes rl-cell-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes rl-flash {
  0% { opacity: 0.8; }
  100% { opacity: 0; }
}

@keyframes rl-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

@keyframes rl-spin-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(56, 189, 248, 0.35); }
  50% { box-shadow: 0 0 22px rgba(56, 189, 248, 0.55); }
}

@keyframes rl-feedback-pop {
  0% { transform: scale(0.92); opacity: 0.5; }
  50% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Knife Throw */
.knife-throw-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.08), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(34, 197, 94, 0.05), transparent 45%);
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
}

.knife-throw-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(251, 191, 36, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.18);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.knife-throw-canvas:active {
  transform: scale(0.985);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 6px 24px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(251, 191, 36, 0.12);
}

.knife-throw-btn {
  display: none;
  min-width: 160px;
  min-height: 48px;
  padding: 12px 32px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fef3c7;
  background: linear-gradient(180deg, #57534e 0%, #292524 100%);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(251, 191, 36, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.knife-throw-btn:hover {
  background: linear-gradient(180deg, #78716c 0%, #44403c 100%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(251, 191, 36, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.knife-throw-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 640px), (hover: none) {
  .knife-throw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Archery */
.archery-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(34, 197, 94, 0.1), transparent 45%);
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
}

.archery-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  touch-action: none;
  cursor: crosshair;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.1),
    0 12px 40px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.archery-wrap--shake {
  animation: archery-shake 0.48s ease;
}

@keyframes archery-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px) rotate(-0.4deg); }
  30% { transform: translateX(5px) rotate(0.4deg); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* Bowling */
.bowling-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
}

.bowling-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(148, 163, 184, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.bowling-canvas:active {
  cursor: grabbing;
}

.bowling-pad {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(280px, 100%);
}

.bowling-pad-btn {
  min-height: 48px;
  padding: 10px 16px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f8fafc;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.bowling-pad-btn:hover {
  background: linear-gradient(180deg, #475569 0%, #334155 100%);
}

.bowling-pad-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.4);
}

@media (max-width: 640px), (hover: none) {
  .bowling-pad {
    display: grid;
  }
}

/* Fishing */
.fishing-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  user-select: none;
  -webkit-user-select: none;
}

.fishing-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  border: 2px solid rgba(56, 189, 248, 0.25);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    0 12px 40px rgba(2, 132, 199, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.2s ease, transform 0.12s ease, border-color 0.2s ease;
}

.fishing-canvas:active {
  transform: scale(0.985);
  border-color: rgba(74, 222, 128, 0.45);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.3),
    0 6px 24px rgba(2, 132, 199, 0.22);
}

.fishing-canvas.fishing-canvas--bite {
  border-color: rgba(251, 191, 36, 0.75);
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, 0.25),
    0 4px 20px rgba(251, 191, 36, 0.35),
    0 12px 40px rgba(2, 132, 199, 0.18);
  animation: fishing-bite-pulse 0.45s ease-in-out infinite alternate;
}

@keyframes fishing-bite-pulse {
  from { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2), 0 4px 20px rgba(251, 191, 36, 0.3); }
  to { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.45), 0 6px 28px rgba(251, 191, 36, 0.5); }
}

.fishing-tap-hint {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  animation: fishing-hint-bob 1.1s ease-in-out infinite;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.fishing-tap-hint--hide {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

@keyframes fishing-hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

.fishing-reel-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  min-width: 168px;
  min-height: 52px;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
  color: #052e16;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 4px 0 #14532d,
    0 8px 24px rgba(74, 222, 128, 0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}

.fishing-reel-btn:active,
.fishing-reel-btn.fishing-reel-btn--active {
  transform: translateX(-50%) translateY(3px);
  box-shadow:
    0 1px 0 #14532d,
    0 4px 16px rgba(74, 222, 128, 0.45);
  filter: brightness(1.08);
}

.fishing-reel-btn[hidden] {
  display: none;
}

/* Cannon Shot */
.cannon-shot-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

.cannon-shot-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  touch-action: none;
  cursor: crosshair;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.cannon-shot-wrap--shake {
  animation: cannon-shot-shake 0.48s ease;
}

@keyframes cannon-shot-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-7px); }
  36% { transform: translateX(7px); }
  54% { transform: translateX(-5px); }
  72% { transform: translateX(5px); }
  90% { transform: translateX(-2px); }
}

/* Tank Duel */
.tank-duel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  gap: 8px;
}

.tank-duel-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  touch-action: none;
  cursor: crosshair;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.12);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.tank-duel-wrap--shake {
  animation: tank-duel-shake 0.48s ease;
}

@keyframes tank-duel-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-7px); }
  36% { transform: translateX(7px); }
  54% { transform: translateX(-5px); }
  72% { transform: translateX(5px); }
  90% { transform: translateX(-2px); }
}

.tank-duel-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  padding: 0 8px;
}

.tank-duel-btn {
  flex: 1;
  min-width: 64px;
  height: 48px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, #4ade80, #16a34a);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.1s, filter 0.1s, box-shadow 0.15s;
  touch-action: manipulation;
}

.tank-duel-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow:
    0 6px 16px rgba(74, 222, 128, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.tank-duel-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.tank-duel-btn--disabled,
.tank-duel-btn:disabled {
  opacity: 0.42;
  filter: grayscale(0.45);
  cursor: not-allowed;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

@media (max-width: 480px) {
  .tank-duel-btn {
    min-width: 72px;
    height: 54px;
    font-size: 1.45rem;
  }

  .tank-duel-controls {
    gap: 16px;
    padding: 0 12px;
  }
}

/* Darts */
.darts-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
}

.darts-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.15);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.darts-canvas:active {
  transform: scale(0.985);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 6px 24px rgba(0, 0, 0, 0.3);
}

.darts-throw-btn {
  display: none;
  min-width: 140px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  color: #f8fafc;
  background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 14px rgba(124, 58, 237, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.darts-throw-btn:hover {
  background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 100%);
}

.darts-throw-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
}

@media (max-width: 640px), (hover: none) {
  .darts-throw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Basketball */
.basketball-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

.basketball-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(251, 191, 36, 0.08);
  transition: transform 0.08s ease, box-shadow 0.2s ease;
}

.basketball-canvas:active {
  transform: scale(0.985);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(251, 191, 36, 0.22);
}

/* Mini Golf */
.mini-golf-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

.mini-golf-wrap--shake {
  animation: mini-golf-shake 0.45s ease-out;
}

@keyframes mini-golf-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-4px, 2px); }
  30% { transform: translate(4px, -2px); }
  45% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 2px); }
  75% { transform: translate(-2px, 1px); }
}

.mini-golf-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: crosshair;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.mini-golf-canvas:active {
  transform: scale(0.985);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 6px 24px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px), (hover: none) {
  .mini-golf-canvas {
    cursor: pointer;
  }
}

.missile-defense-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: crosshair;
  border: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.1),
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background: #010409;
}

@media (max-width: 520px) {
  .rl-outside {
    grid-template-columns: repeat(2, 1fr);
  }

  .rl-cell--zero {
    flex: 0 0 28px;
  }

  .rl-cell {
    min-height: 36px;
  }

  .rl-btn-spin {
    min-width: 100%;
    flex: 1 1 100%;
  }

  .rl-bet-preset {
    min-width: 48px;
    min-height: 48px;
  }
}

/* typing-fall */
.tf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.tf-wrap--shake {
  animation: tf-wrap-shake 0.45s ease;
}

@keyframes tf-wrap-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.tf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.tf-mode-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.5);
  background: linear-gradient(180deg, rgba(8, 145, 178, 0.35) 0%, rgba(8, 47, 73, 0.55) 100%);
  color: #e0f2fe;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.tf-mode-btn:hover {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.45) 0%, rgba(8, 47, 73, 0.65) 100%);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2);
}

.tf-mode-btn:active {
  transform: scale(0.96);
}

.tf-lives {
  font-size: 1.15rem;
  letter-spacing: 2px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.tf-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 14px;
  border: 2px solid rgba(56, 189, 248, 0.3);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(56, 189, 248, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  touch-action: none;
}

.tf-input-row {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: stretch;
}

.tf-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font-size: 1.15rem;
  border-radius: 12px;
  border: 2px solid rgba(56, 189, 248, 0.4);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(8, 47, 73, 0.85) 100%);
  color: #f0f9ff;
  outline: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tf-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tf-input--bad {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
  animation: tf-shake 0.22s ease;
}

.tf-submit-btn {
  flex-shrink: 0;
  padding: 12px 18px;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.55);
  background: linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%);
  color: #f0f9ff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(14, 165, 233, 0.35);
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
}

.tf-submit-btn:hover:not(:disabled) {
  box-shadow: 0 5px 14px rgba(14, 165, 233, 0.45);
}

.tf-submit-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.tf-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@keyframes tf-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.tf-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

/* Dice Race */
.dr-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 0 16px;
  touch-action: manipulation;
}

.dr-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.dr-setup-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}

.dr-count-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.dr-count-btn {
  min-width: 64px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dr-count-btn:active {
  transform: scale(0.96);
}

.dr-seats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

.dr-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--bg-elevated) 0%, rgba(15, 23, 42, 0.35) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dr-seat:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dr-seat--hidden {
  display: none;
}

.dr-seat-label {
  font-size: 0.95rem;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dr-seat-toggle {
  display: flex;
  gap: 6px;
}

.dr-seat-btn {
  padding: 6px 12px;
  font-size: 0.8rem;
  transition: transform 0.12s ease;
}

.dr-seat-btn:active {
  transform: scale(0.95);
}

.dr-start-btn {
  min-width: 160px;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dr-start-btn:active {
  transform: scale(0.97);
}

.dr-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.dr-hud {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dr-hud-goal {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dr-hud-goal-label {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fde68a;
  letter-spacing: 0.04em;
}

.dr-hud-goal-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.dr-hud-goal-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.22s ease, background 0.2s ease;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

.dr-hud-goal-text {
  flex-shrink: 0;
  min-width: 5.5em;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-align: right;
}

.dr-hud-leader {
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}

.dr-hud-leader--pop {
  animation: dr-leader-pop 0.48s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes dr-leader-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.dr-hud-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dr-progress-row {
  display: grid;
  grid-template-columns: 10px 2.2em 1fr 1.8em;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 6px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.dr-progress-row--hidden {
  display: none;
}

.dr-progress-row--active {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.dr-progress-row--leader .dr-progress-pos {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
}

.dr-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

.dr-progress-name {
  font-size: 0.72rem;
  font-weight: 800;
}

.dr-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.dr-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.22s ease;
  opacity: 0.92;
}

.dr-progress-pos {
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dr-status {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  transition: color 0.2s ease;
}

.dr-status--pulse {
  animation: dr-status-pulse 0.42s ease-out;
}

@keyframes dr-status-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.dr-track-wrap {
  position: relative;
  width: min(420px, 96vw);
  padding: 10px;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #1e3a5f 0%, #0f172a 55%, #172554 100%);
  border: 2px solid #334155;
  box-shadow:
    0 8px 28px rgba(15, 23, 42, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  touch-action: none;
}

.dr-track-wrap::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--radius-md) - 4px);
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 0;
}

.dr-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
}

.dr-flash--on {
  animation: dr-flash-pop 0.32s ease-out forwards;
}

@keyframes dr-flash-pop {
  0% { opacity: 0; }
  25% { opacity: 0.75; }
  100% { opacity: 0; }
}

.dr-particles {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.dr-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.dr-confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: dr-confetti-fall 0.95s cubic-bezier(0.25, 0.8, 0.35, 1) forwards;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
}

@keyframes dr-confetti-fall {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(0.4);
  }
}

.dr-end-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, 0);
  transition: opacity 0.25s ease, background 0.3s ease;
}

.dr-end-overlay--on {
  opacity: 1;
}

.dr-end-overlay--win {
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.28) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.dr-end-overlay--lose {
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.22) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.dr-end-banner {
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(255, 255, 255, 0.35);
  transform: scale(0.6);
  opacity: 0;
}

.dr-end-overlay--on .dr-end-banner {
  animation: dr-end-banner-pop 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}

@keyframes dr-end-banner-pop {
  0% { transform: scale(0.5); opacity: 0; }
  55% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.dr-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  animation: dr-particle-burst 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

@keyframes dr-particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.2);
  }
}

.dr-track {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dr-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.dr-cell {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dr-cell--flash {
  animation: dr-cell-flash 0.48s ease-out;
}

@keyframes dr-cell-flash {
  0% {
    box-shadow: inset 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);
    transform: scale(1);
  }
  35% {
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.5), 0 0 14px rgba(255, 255, 255, 0.35);
    transform: scale(1.06);
  }
  100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: scale(1);
  }
}

.dr-cell--empty {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.dr-cell--start {
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.28) 0%, rgba(34, 197, 94, 0.1) 100%);
  border-color: rgba(34, 197, 94, 0.45);
}

.dr-cell--finish {
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.32) 0%, rgba(251, 191, 36, 0.12) 100%);
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 12px rgba(251, 191, 36, 0.2);
}

.dr-cell--forward {
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.28) 0%, rgba(59, 130, 246, 0.1) 100%);
  border-color: rgba(59, 130, 246, 0.45);
}

.dr-cell--back {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.1) 100%);
  border-color: rgba(239, 68, 68, 0.4);
}

.dr-cell--skip {
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.25) 0%, rgba(168, 85, 247, 0.1) 100%);
  border-color: rgba(168, 85, 247, 0.4);
}

.dr-cell-num {
  font-size: clamp(0.65rem, 2.2vw, 0.8rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dr-cell-badge {
  font-size: 0.55rem;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.dr-cell-tag {
  position: absolute;
  bottom: 2px;
  font-size: 0.45rem;
  font-weight: 700;
  color: #86efac;
  letter-spacing: 0.02em;
}

.dr-cell-tag--goal {
  color: #fde68a;
}

.dr-tokens {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 2;
}

.dr-token {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.45),
    inset 0 -3px 6px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.35);
  transition: left 0.12s ease, top 0.12s ease, transform 0.2s ease;
  z-index: 2;
}

.dr-token::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 7px 0 0 rgba(255, 255, 255, 0.85);
}

.dr-token::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 8px;
  width: 10px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.dr-token--active {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.55),
    0 0 16px rgba(255, 255, 255, 0.35),
    0 3px 10px rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
  animation: dr-token-pulse 1.2s ease-in-out infinite;
}

@keyframes dr-token-pulse {
  0%, 100% { transform: scale(1.1); }
  50% { transform: scale(1.16); }
}

.dr-track-wrap.dr-track--special {
  animation: dr-track-pop 0.42s ease-out;
}

@keyframes dr-track-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.dr-track-wrap.dr-end-win {
  animation: dr-end-win 0.62s ease-out;
}

.dr-track-wrap.dr-end-lose {
  animation: dr-end-shake 0.52s ease-out;
}

@keyframes dr-end-win {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(1.03); filter: brightness(1.15); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes dr-end-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.dr-dice-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.dr-dice-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.dr-dice-panel--shake {
  animation: dr-dice-shake 0.38s ease-out;
}

@keyframes dr-dice-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.dr-roll-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 16px;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.dr-roll-zone--ready {
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.35),
    0 0 20px rgba(59, 130, 246, 0.25);
  animation: dr-roll-glow 1.4s ease-in-out infinite;
}

@keyframes dr-roll-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 0 16px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5), 0 0 28px rgba(59, 130, 246, 0.35); }
}

.dr-roll-pop {
  position: absolute;
  top: -4px;
  right: -8px;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4) translateY(8px);
  z-index: 2;
}

.dr-roll-pop--on {
  animation: dr-roll-pop-fly 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.dr-roll-pop--max {
  color: #f472b6;
  font-size: 1.5rem;
  text-shadow: 0 0 12px rgba(244, 114, 182, 0.6), 0 2px 6px rgba(0, 0, 0, 0.45);
}

@keyframes dr-roll-pop-fly {
  0% { opacity: 0; transform: scale(0.4) translateY(10px); }
  35% { opacity: 1; transform: scale(1.2) translateY(-14px); }
  100% { opacity: 0; transform: scale(0.9) translateY(-32px); }
}

.dr-roll-hint {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  transition: color 0.2s ease;
}

.dr-roll-hint--ready {
  color: #93c5fd;
  animation: dr-hint-pulse 1.4s ease-in-out infinite;
}

@keyframes dr-hint-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.dr-die {
  width: 68px;
  height: 68px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dr-die:disabled {
  cursor: default;
  opacity: 0.65;
}

.dr-die-face {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8fafc 0%, #cbd5e1 55%, #94a3b8 100%);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.38),
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.dr-die:active:not(:disabled) .dr-die-face {
  transform: scale(0.94);
}

.dr-die--rolling .dr-die-face {
  animation: dr-roll 0.12s ease-in-out;
}

.dr-die--landed .dr-die-face {
  animation: dr-die-land 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes dr-roll {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(8deg) scale(0.94); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes dr-die-land {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.dr-pip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 70%;
  height: 70%;
  gap: 2px;
}

.dr-pip {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #334155, #0f172a);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.dr-roll-btn {
  min-width: 132px;
  min-height: 48px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dr-roll-btn:active:not(:disabled) {
  transform: scale(0.96);
}

@media (max-width: 400px) {
  .dr-seats {
    grid-template-columns: 1fr;
  }

  .dr-token {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
  }

  .dr-token::before {
    top: 3px;
    left: 4px;
    width: 5px;
    height: 5px;
    box-shadow: 6px 0 0 rgba(255, 255, 255, 0.85);
  }

  .dr-die {
    width: 60px;
    height: 60px;
  }

  .dr-roll-btn {
    min-width: 120px;
    min-height: 44px;
  }

  .dr-hud-goal-text {
    min-width: 4.8em;
    font-size: 0.65rem;
  }

  .dr-progress-row {
    grid-template-columns: 8px 2em 1fr 1.5em;
    gap: 4px;
  }
}

/* Pipe Connect */
.pipes-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 4px 0 8px;
}

.pipes-wrap--shake {
  animation: pipes-shake 0.52s ease;
}

.pipes-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.pipes-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
  border-radius: var(--radius);
}

.pipes-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.08s ease-out;
}

.pipes-flash--connect {
  background: radial-gradient(circle at 50% 45%, rgba(56, 189, 248, 0.35), transparent 68%);
}

.pipes-flash--clear {
  background: radial-gradient(circle at 50% 50%, rgba(52, 211, 153, 0.38), transparent 72%);
}

.pipes-flash--victory {
  background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.42), rgba(56, 189, 248, 0.2) 55%, transparent 75%);
}

.pipes-flash--on {
  opacity: 1;
  animation: pipes-flash-fade 0.45s ease forwards;
}

.pipes-particles {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pipes-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc, #38bdf8);
  box-shadow: 0 0 8px var(--pc, #38bdf8);
  animation: pipes-particle-burst 0.62s ease-out forwards;
}

.pipes-particle--big {
  width: 9px;
  height: 9px;
  animation-duration: 0.82s;
}

.pipes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(420px, 96vw);
  gap: 12px;
  padding: 0 2px;
}

.pipes-level {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.25s ease, color 0.2s;
}

.pipes-level--pop {
  animation: pipes-level-pop 0.4s ease;
  color: #38bdf8;
}

.pipes-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.25s, transform 0.2s;
}

.pipes-hint-ok {
  color: #34d399;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.45);
}

.pipes-board {
  position: relative;
  display: grid;
  gap: 7px;
  width: min(420px, 96vw);
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.45s ease, transform 0.35s ease;
}

.pipes-board::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 18px,
      rgba(148, 163, 184, 0.04) 18px,
      rgba(148, 163, 184, 0.04) 19px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 18px,
      rgba(148, 163, 184, 0.04) 18px,
      rgba(148, 163, 184, 0.04) 19px
    );
  pointer-events: none;
}

.pipes-board.pipes-solved {
  box-shadow:
    0 0 36px rgba(14, 165, 233, 0.42),
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pipes-board.pipes-board--level-in {
  animation: pipes-board-in 0.48s ease;
}

.pipes-board.pipes-board--victory {
  box-shadow:
    0 0 48px rgba(251, 191, 36, 0.45),
    0 0 36px rgba(14, 165, 233, 0.35),
    0 8px 32px rgba(0, 0, 0, 0.35);
  animation: pipes-board-victory 1.2s ease infinite alternate;
}

.pipes-cell {
  position: relative;
  aspect-ratio: 1;
  border: none;
  border-radius: 10px;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  cursor: pointer;
  padding: 5px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s, transform 0.12s, box-shadow 0.22s;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.25);
}

.pipes-cell::before {
  content: '?';
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(148, 163, 184, 0.55);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.pipes-cell:hover::before,
.pipes-cell:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.pipes-cell.pipes-start::before,
.pipes-cell.pipes-end::before {
  display: none;
}

.pipes-cell:hover {
  background: linear-gradient(160deg, #243044 0%, #141c2e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 10px rgba(0, 0, 0, 0.3);
}

.pipes-cell:active {
  transform: scale(0.93);
}

.pipes-cell.pipes-reachable {
  background: linear-gradient(160deg, #1a3044 0%, #122030 100%);
  box-shadow:
    inset 0 0 0 1px rgba(56, 189, 248, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(14, 165, 233, 0.12);
}

.pipes-cell--spin .pipes-svg {
  animation: pipes-spin 0.22s ease;
}

.pipes-cell--pop {
  animation: pipes-cell-pop 0.28s ease;
}

.pipes-cell.pipes-start::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 3px solid #34d399;
  box-shadow:
    0 0 14px rgba(52, 211, 153, 0.55),
    inset 0 0 8px rgba(52, 211, 153, 0.2);
  pointer-events: none;
  animation: pipes-glow-green 1.6s ease infinite alternate;
}

.pipes-cell.pipes-end::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 3px solid #60a5fa;
  box-shadow:
    0 0 14px rgba(96, 165, 250, 0.55),
    inset 0 0 8px rgba(96, 165, 250, 0.2);
  pointer-events: none;
  animation: pipes-glow-blue 1.6s ease infinite alternate;
}

.pipes-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.pipes-seg {
  fill: url(#pipes-seg-grad);
  transition: fill 0.35s ease, filter 0.35s ease;
}

.pipes-hub {
  fill: url(#pipes-hub-grad);
  transition: fill 0.35s ease, filter 0.35s ease;
}

.pipes-hub-shine {
  fill: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.pipes-cell.pipes-water .pipes-seg {
  fill: url(#pipes-water-grad);
  animation: pipes-pulse 0.75s ease infinite alternate;
}

.pipes-cell.pipes-water .pipes-hub {
  fill: #0ea5e9;
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.6));
}

.pipes-cell.pipes-water .pipes-hub-shine {
  fill: rgba(255, 255, 255, 0.35);
}

.pipes-cell.pipes-water .pipes-svg {
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.55));
}

@keyframes pipes-tap-hint-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -52%) scale(1.04); opacity: 0.88; }
}

@keyframes pipes-toast-pop {
  0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
  55% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes pipes-hint-warn {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes pipes-rotate-float {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.85); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1.15); }
}

@keyframes pipes-ripple {
  0% { transform: scale(0.5); opacity: 0.85; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes pipes-board-victory {
  from { transform: scale(1); }
  to { transform: scale(1.015); }
}

@keyframes pipes-pulse {
  from { filter: brightness(1) drop-shadow(0 0 2px rgba(56, 189, 248, 0.4)); }
  to { filter: brightness(1.3) drop-shadow(0 0 6px rgba(56, 189, 248, 0.7)); }
}

@keyframes pipes-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(90deg); }
}

@keyframes pipes-cell-pop {
  0% { transform: scale(1); }
  40% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

@keyframes pipes-level-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes pipes-board-in {
  from { opacity: 0.4; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pipes-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px) rotate(-0.4deg); }
  36% { transform: translateX(5px) rotate(0.4deg); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
}

@keyframes pipes-flash-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pipes-particle-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0.2);
    opacity: 0;
  }
}

@keyframes pipes-glow-green {
  from { box-shadow: 0 0 10px rgba(52, 211, 153, 0.4), inset 0 0 6px rgba(52, 211, 153, 0.15); }
  to { box-shadow: 0 0 18px rgba(52, 211, 153, 0.65), inset 0 0 10px rgba(52, 211, 153, 0.25); }
}

@keyframes pipes-glow-blue {
  from { box-shadow: 0 0 10px rgba(96, 165, 250, 0.4), inset 0 0 6px rgba(96, 165, 250, 0.15); }
  to { box-shadow: 0 0 18px rgba(96, 165, 250, 0.65), inset 0 0 10px rgba(96, 165, 250, 0.25); }
}

@media (max-width: 480px) {
  .pipes-board {
    gap: 5px;
    padding: 10px;
    border-radius: 14px;
  }

  .pipes-cell {
    border-radius: 8px;
    padding: 4px;
  }

  .pipes-level {
    font-size: 0.95rem;
  }

  .pipes-hint {
    font-size: 0.82rem;
  }
}

/* Memory Path */
.mp-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.mp-wrap--over .mp-board {
  filter: saturate(0.65) brightness(0.88);
  transition: filter 0.35s ease;
}

.mp-status {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.4em;
  transition: color 0.2s ease, transform 0.2s ease;
}

.mp-status--success {
  color: #34d399;
  transform: scale(1.03);
}

.mp-status--fail {
  color: #f87171;
}

.mp-status--flash {
  color: #5eead4;
}

.mp-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}

.mp-lives {
  display: flex;
  gap: 8px;
  font-size: 1.3rem;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 80%, #0f766e 20%);
  box-shadow: 0 2px 10px rgba(15, 118, 110, 0.18);
}

.mp-life {
  display: inline-block;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: grayscale(0.85) brightness(0.7);
}

.mp-life--on {
  filter: none;
  animation: mp-life-pulse 1.6s ease-in-out infinite;
}

@keyframes mp-life-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.mp-hint {
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 999px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 3px 10px rgba(15, 118, 110, 0.2);
}

.mp-hint:hover:not(:disabled) {
  transform: translateY(-1px);
}

.mp-hint:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.mp-board {
  position: relative;
  display: grid;
  gap: 7px;
  width: min(380px, 94vw);
  aspect-ratio: 1;
  padding: 12px;
  touch-action: none;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(15, 118, 110, 0.14) 0%, transparent 42%),
    linear-gradient(180deg, #0c4a44 0%, #134e4a 38%, #115e59 100%);
  border-radius: 16px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  box-shadow:
    0 0 0 1px rgba(20, 184, 166, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 40px rgba(6, 78, 59, 0.42);
}

.mp-board::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  border-radius: inherit;
}

.mp-board--reveal {
  animation: mp-board-reveal 0.7s ease;
}

.mp-board--watching {
  box-shadow:
    0 0 0 2px rgba(45, 212, 191, 0.28),
    0 0 32px rgba(45, 212, 191, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 40px rgba(6, 78, 59, 0.42);
}

.mp-board--input {
  box-shadow:
    0 0 0 2px rgba(94, 234, 212, 0.32),
    0 0 24px rgba(94, 234, 212, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 40px rgba(6, 78, 59, 0.42);
}

.mp-board--clear {
  animation: mp-board-clear 0.52s ease;
}

.mp-board--shake {
  animation: mp-board-shake 0.45s ease;
}

.mp-board--over {
  opacity: 0.92;
}

@keyframes mp-board-reveal {
  0% { box-shadow: 0 16px 40px rgba(6, 78, 59, 0.42); }
  40% {
    box-shadow:
      0 0 28px rgba(45, 212, 191, 0.35),
      0 16px 40px rgba(6, 78, 59, 0.42);
  }
  100% { box-shadow: 0 16px 40px rgba(6, 78, 59, 0.42); }
}

@keyframes mp-board-clear {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.03); }
  65% { transform: scale(0.99); }
}

@keyframes mp-board-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-7px) rotate(-0.4deg); }
  36% { transform: translateX(7px) rotate(0.4deg); }
  54% { transform: translateX(-5px); }
  72% { transform: translateX(5px); }
}

.mp-cell {
  position: relative;
  z-index: 1;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, transparent 48%),
    linear-gradient(180deg, #1e3a38 0%, #163330 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 8px rgba(0, 0, 0, 0.28);
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
  min-height: 0;
  min-width: 0;
}

.mp-cell:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px rgba(94, 234, 212, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.32);
}

.mp-cell:active:not(:disabled) {
  transform: scale(0.96);
}

.mp-cell:disabled {
  cursor: default;
}

.mp-cell--path {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, transparent 45%),
    linear-gradient(180deg, #2dd4bf 0%, #0d9488 55%, #0f766e 100%);
  box-shadow:
    0 0 18px rgba(45, 212, 191, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: mp-path-glow 0.9s ease-in-out infinite alternate;
}

.mp-cell--reveal {
  animation: mp-path-reveal-pop 0.38s ease;
  z-index: 2;
}

.mp-cell--path-trail {
  opacity: 0.55;
  filter: brightness(0.92);
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.3);
}

.mp-step-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: mp-step-badge-pop 0.42s ease forwards;
}

@keyframes mp-path-reveal-pop {
  0% { transform: scale(0.82); filter: brightness(1.4); }
  55% { transform: scale(1.16); filter: brightness(1.25); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes mp-step-badge-pop {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes mp-path-glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.12); }
}

.mp-cell--current {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    linear-gradient(180deg, #5eead4 0%, #14b8a6 100%);
  box-shadow:
    inset 0 0 0 3px #99f6e4,
    0 0 16px rgba(94, 234, 212, 0.45);
  transform: scale(1.06);
}

.mp-cell--visited {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, transparent 40%),
    linear-gradient(180deg, #34d399 0%, #059669 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.mp-cell--adjacent:not(.mp-cell--current):not(.mp-cell--visited) {
  box-shadow:
    0 0 0 2px rgba(94, 234, 212, 0.5),
    0 0 12px rgba(45, 212, 191, 0.22);
  animation: mp-adjacent-pulse 1.2s ease-in-out infinite;
}

@keyframes mp-adjacent-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.45), 0 0 8px rgba(45, 212, 191, 0.15); }
  50% { box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.7), 0 0 14px rgba(45, 212, 191, 0.32); }
}

.mp-cell--wrong {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, #f87171 0%, #dc2626 100%);
  box-shadow:
    inset 0 0 0 3px #fecaca,
    0 0 20px rgba(248, 113, 113, 0.55);
  animation: mp-cell-shake 0.38s ease;
}

.mp-cell--pop {
  animation: mp-cell-pop 0.3s ease;
}

@keyframes mp-cell-shake {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-6px) scale(1.02); }
  75% { transform: translateX(6px) scale(1.02); }
}

@keyframes mp-cell-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1.06); }
}

.mp-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  border-radius: inherit;
}

.mp-flash--success {
  background: radial-gradient(circle at center, rgba(52, 211, 153, 0.35) 0%, transparent 68%);
}

.mp-flash--fail {
  background: radial-gradient(circle at center, rgba(248, 113, 113, 0.38) 0%, transparent 68%);
}

.mp-flash--clear {
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.42) 0%, transparent 72%);
}

.mp-clear-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.92), rgba(217, 119, 6, 0.88));
  box-shadow: 0 0 28px rgba(251, 191, 36, 0.55), 0 4px 16px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  animation: mp-clear-label-pop 0.82s ease forwards;
}

@keyframes mp-clear-label-pop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -58%) scale(0.95); opacity: 0; }
}

.mp-flash--active {
  animation: mp-flash-in 0.42s ease-out;
}

@keyframes mp-flash-in {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.mp-particle-burst,
.mp-clear-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc, #5eead4);
  box-shadow: 0 0 6px var(--pc, #5eead4);
  animation: mp-particle-fly 0.5s ease-out forwards;
}

.mp-particle--clear {
  width: 9px;
  height: 9px;
  animation: mp-particle-fly-clear 0.72s ease-out forwards;
}

@keyframes mp-particle-fly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

@keyframes mp-particle-fly-clear {
  0% {
    transform: translate(0, 0) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

.mp-start {
  margin-top: 4px;
}

@media (max-width: 420px) {
  .mp-board {
    gap: 5px;
    padding: 10px;
    width: min(360px, 96vw);
  }

  .mp-cell {
    border-radius: 8px;
    min-height: 36px;
  }

  .mp-hint {
    padding: 10px 18px;
    min-height: 44px;
  }
}

/* Penalty Kick */
.pk-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.pk-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
  z-index: 8;
}

.pk-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: inherit;
}

.pk-flash--good {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(56, 189, 248, 0.28), transparent 70%);
}

.pk-flash--goal {
  background: radial-gradient(ellipse 85% 65% at 50% 35%, rgba(74, 222, 128, 0.42), transparent 72%);
}

.pk-flash--save {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(96, 165, 250, 0.38), transparent 70%);
}

.pk-flash--bad {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(248, 113, 113, 0.36), transparent 72%);
}

.pk-flash--on {
  animation: pk-flash 0.4s ease-out forwards;
}

.pk-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pk-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  animation: pk-particle 0.55s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

.pk-score-pop {
  position: absolute;
  transform: translate(-50%, 0);
  font-size: 1.1rem;
  font-weight: 800;
  color: #4ade80;
  text-shadow: 0 2px 10px rgba(15, 23, 42, 0.45);
  pointer-events: none;
  opacity: 0;
  z-index: 10;
}

.pk-score-pop--on {
  animation: pk-score-pop 0.72s ease-out forwards;
}

.pk-streak-float {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: 1.35rem;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 2px 14px rgba(15, 23, 42, 0.5), 0 0 20px rgba(251, 191, 36, 0.45);
  pointer-events: none;
  opacity: 0;
  z-index: 12;
}

.pk-streak-float--on {
  animation: pk-streak-float 0.9s ease-out forwards;
}

.pk-end-banner {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 14px 28px;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  z-index: 14;
  text-shadow: 0 3px 16px rgba(15, 23, 42, 0.55);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.pk-end-banner--win {
  color: #4ade80;
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.92), rgba(21, 128, 61, 0.78));
  border: 2px solid rgba(74, 222, 128, 0.55);
}

.pk-end-banner--lose {
  color: #fca5a5;
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.88), rgba(153, 27, 27, 0.72));
  border: 2px solid rgba(248, 113, 113, 0.45);
}

.pk-end-banner--draw {
  color: #c4b5fd;
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.88), rgba(91, 33, 182, 0.72));
  border: 2px solid rgba(167, 139, 250, 0.45);
}

.pk-end-banner--on {
  animation: pk-end-banner 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.pk-confetti {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  pointer-events: none;
  animation: pk-confetti 0.85s ease-out forwards;
}

.pk-streak {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.pk-streak--hot {
  color: #fbbf24;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(245, 158, 11, 0.12));
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

.pk-streak--pop {
  animation: pk-streak-pop 0.38s ease-out;
}

.pk-wrap--shake {
  animation: pk-shake 0.48s ease;
}

.pk-wrap--gameover {
  filter: saturate(0.82) brightness(0.94);
  transition: filter 0.45s ease;
}

.pk-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, #166534), var(--surface));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pk-round {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
}

.pk-score {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.pk-mode {
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.pk-mode--kick {
  background: linear-gradient(135deg, color-mix(in srgb, #16a34a 32%, transparent), color-mix(in srgb, #15803d 18%, transparent));
  color: #4ade80;
  border: 1px solid color-mix(in srgb, #4ade80 35%, transparent);
}

.pk-mode--save {
  background: linear-gradient(135deg, color-mix(in srgb, #2563eb 32%, transparent), color-mix(in srgb, #1d4ed8 18%, transparent));
  color: #60a5fa;
  border: 1px solid color-mix(in srgb, #60a5fa 35%, transparent);
}

.pk-pitch {
  position: relative;
  width: 100%;
  height: 340px;
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(34, 197, 94, 0.18), transparent 55%),
    linear-gradient(180deg, #0f3d22 0%, #14532d 28%, #166534 58%, #15803d 100%);
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pk-pitch-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 38px,
    rgba(255, 255, 255, 0.035) 38px,
    rgba(255, 255, 255, 0.035) 76px
  );
  pointer-events: none;
}

.pk-aim {
  position: absolute;
  bottom: 52px;
  left: 50%;
  width: 4px;
  height: 0;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--aim-angle, 0deg));
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.12s ease;
}

.pk-aim::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: var(--aim-len, 0px);
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.85), rgba(250, 250, 250, 0.15));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.pk-aim--on {
  opacity: 1;
}

.pk-aim--over::before {
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.9), rgba(248, 113, 113, 0.2));
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.45);
}

.pk-aim--on::after {
  content: '';
  position: absolute;
  bottom: var(--aim-len, 0px);
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.pk-aim--over::after {
  border-color: rgba(248, 113, 113, 0.85);
  background: rgba(248, 113, 113, 0.35);
}

.pk-power {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: min(72%, 200px);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.15s ease;
}

.pk-power--on {
  opacity: 1;
}

.pk-power-fill {
  height: 8px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ade80, #fbbf24);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.35);
  transition: width 0.06s linear, background 0.15s ease, box-shadow 0.15s ease;
}

.pk-power--low .pk-power-fill {
  background: linear-gradient(90deg, #4ade80, #86efac);
}

.pk-power--mid .pk-power-fill {
  background: linear-gradient(90deg, #4ade80, #fbbf24);
}

.pk-power--high .pk-power-fill {
  background: linear-gradient(90deg, #fbbf24, #f97316);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
}

.pk-power--over .pk-power-fill,
.pk-power--warn .pk-power-fill {
  background: linear-gradient(90deg, #f97316, #ef4444);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.45);
  animation: pk-power-warn 0.35s ease-in-out infinite alternate;
}

.pk-power-label {
  margin-top: 4px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.pk-power--over .pk-power-label,
.pk-power--warn .pk-power-label {
  color: #fca5a5;
}

.pk-goal {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 110px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
  padding: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.2));
  border: 3px solid #f8fafc;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.pk-goal-net {
  position: absolute;
  inset: 7px 7px 0;
  border-radius: 6px 6px 0 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(255, 255, 255, 0.07) 10px, rgba(255, 255, 255, 0.07) 11px),
    repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 255, 255, 0.07) 10px, rgba(255, 255, 255, 0.07) 11px);
  pointer-events: none;
  z-index: 0;
}

.pk-zone {
  position: relative;
  z-index: 1;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.04));
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.pk-zone:not(:disabled):hover {
  background: linear-gradient(145deg, rgba(96, 165, 250, 0.35), rgba(59, 130, 246, 0.2));
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5);
}

.pk-zone:not(:disabled):active {
  transform: scale(0.96);
}

.pk-zone--active {
  background: linear-gradient(145deg, rgba(96, 165, 250, 0.55), rgba(37, 99, 235, 0.35));
  box-shadow: inset 0 0 0 2px #60a5fa, 0 0 12px rgba(96, 165, 250, 0.35);
}

.pk-zone--target {
  background: linear-gradient(145deg, rgba(74, 222, 128, 0.5), rgba(34, 197, 94, 0.3));
  box-shadow: inset 0 0 0 2px #4ade80, 0 0 14px rgba(74, 222, 128, 0.4);
  animation: pk-zone-hit 0.5s ease-out;
}

.pk-zone--preview {
  background: linear-gradient(145deg, rgba(250, 250, 250, 0.28), rgba(74, 222, 128, 0.22));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 10px rgba(74, 222, 128, 0.25);
  animation: pk-zone-preview 0.6s ease-in-out infinite alternate;
}

.pk-goal--celebrate {
  animation: pk-goal-celebrate 0.55s ease-out;
}

.pk-goal--save {
  animation: pk-goal-save 0.5s ease-out;
}

.pk-keeper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.pk-keeper--dive {
  animation: pk-keeper-pulse 0.55s ease-out;
}

.pk-keeper--save {
  animation: pk-keeper-save 0.45s ease-out;
}

@keyframes pk-keeper-pulse {
  0% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
  40% { filter: drop-shadow(0 6px 14px rgba(96, 165, 250, 0.55)) brightness(1.08); }
  100% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
}

.pk-ball {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 2.2rem;
  line-height: 1;
  transition: transform 0.55s cubic-bezier(0.25, 0.9, 0.35, 1);
  z-index: 2;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

.pk-ball--aim {
  transform: translate(-50%, 0) scale(1.14);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

.pk-ball--fly,
.pk-ball--over {
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.pk-hint {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.82);
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  padding: 0 12px;
}

.pk-feedback {
  min-height: 1.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
}

.pk-feedback--pop {
  animation: pk-feedback-pop 0.52s ease-out;
}

.pk-feedback--good { color: #4ade80; text-shadow: 0 0 12px rgba(74, 222, 128, 0.35); }
.pk-feedback--bad { color: var(--danger); text-shadow: 0 0 10px rgba(248, 113, 113, 0.3); }
.pk-feedback--neutral { color: var(--text-muted); }

@keyframes pk-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pk-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

@keyframes pk-score-pop {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -6px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(0.95); }
}

@keyframes pk-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes pk-feedback-pop {
  0% { transform: scale(0.85); opacity: 0.5; }
  40% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pk-zone-hit {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes pk-zone-preview {
  0% { opacity: 0.75; }
  100% { opacity: 1; }
}

@keyframes pk-goal-celebrate {
  0% { transform: translateX(-50%) scale(1); }
  30% { transform: translateX(-50%) scale(1.04); filter: brightness(1.12); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes pk-goal-save {
  0% { transform: translateX(-50%); }
  25% { transform: translateX(calc(-50% - 3px)); }
  50% { transform: translateX(calc(-50% + 3px)); }
  75% { transform: translateX(calc(-50% - 2px)); }
  100% { transform: translateX(-50%); }
}

@keyframes pk-keeper-save {
  0% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
  35% { filter: drop-shadow(0 8px 20px rgba(96, 165, 250, 0.6)) brightness(1.22) saturate(1.15); }
  100% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
}

@keyframes pk-streak-float {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -58%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}

@keyframes pk-streak-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes pk-end-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes pk-confetti {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.6); opacity: 0; }
}

@keyframes pk-power-warn {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.25); }
}

@media (max-width: 480px) {
  .pk-pitch {
    height: min(72vw, 320px);
  }

  .pk-goal {
    width: min(62vw, 240px);
    height: min(28vw, 110px);
  }

  .pk-zone {
    min-height: 40px;
    border-radius: 6px;
  }

  .pk-ball {
    font-size: 2rem;
    bottom: 28px;
  }

  .pk-hint {
    font-size: 0.75rem;
    bottom: 6px;
  }

  .pk-hud {
    padding: 8px 10px;
  }

  .pk-power {
    bottom: 62px;
    width: min(78%, 180px);
  }

  .pk-streak {
    font-size: 0.75rem;
  }
}

/* Match 3 */
.m3-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.m3-wrap--over {
  animation: m3-wrap-fade 0.45s ease forwards;
}

@keyframes m3-wrap-fade {
  to { filter: saturate(0.85) brightness(0.92); }
}

.m3-hint {
  margin: 0;
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  color: #c4b5fd;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 999px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.m3-hint--hide {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.m3-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.85), rgba(49, 46, 129, 0.65));
  border: 1px solid rgba(167, 139, 250, 0.2);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.m3-timer {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
  min-width: 4rem;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s, transform 0.2s;
}

.m3-timer--urgent {
  color: #f87171;
  animation: m3-timer-pulse 0.65s ease-in-out infinite;
}

@keyframes m3-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.m3-combo {
  flex: 1;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fbbf24;
  min-height: 1.25rem;
  transition: transform 0.2s, color 0.2s, text-shadow 0.2s;
}

.m3-combo--hot {
  color: #fde047;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.65);
  animation: m3-combo-glow 0.35s ease;
}

@keyframes m3-combo-glow {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.m3-board-shell {
  position: relative;
  width: min(100%, 360px);
  touch-action: none;
  border-radius: 16px;
  padding: 4px;
  background: linear-gradient(160deg, #4338ca 0%, #312e81 45%, #1e1b4b 100%);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.45),
    0 0 0 1px rgba(167, 139, 250, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.m3-board-shell--pulse {
  animation: m3-board-pulse 0.28s ease;
}

.m3-board-shell--cascade {
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.45),
    0 0 24px rgba(251, 191, 36, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.m3-board-shell--shuffle {
  animation: m3-board-shuffle 0.38s ease;
}

.m3-board-shell--over {
  animation: m3-board-over 0.55s ease forwards;
}

@keyframes m3-board-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

@keyframes m3-board-shuffle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1.5deg) scale(0.98); }
  75% { transform: rotate(1.5deg) scale(0.98); }
}

@keyframes m3-board-over {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(1.04); filter: brightness(1.15); }
  100% { transform: scale(0.98); filter: brightness(0.85); }
}

.m3-fx {
  position: absolute;
  inset: 4px;
  pointer-events: none;
  overflow: hidden;
  border-radius: 12px;
  z-index: 10;
}

.m3-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: 100%;
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 20%, rgba(167, 139, 250, 0.12), transparent 50%),
    linear-gradient(145deg, #1e1b4b, #312e81);
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.4);
}

.m3-board--locked {
  pointer-events: none;
  opacity: 0.92;
}

.m3-board--fall .m3-gem {
  animation: m3-gem-fall 0.28s cubic-bezier(0.34, 1.25, 0.64, 1);
}

@keyframes m3-gem-fall {
  0% { transform: translateY(-18px) scale(0.92); opacity: 0.5; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.m3-cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  border: none;
  border-radius: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  overflow: visible;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.m3-cell:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.m3-cell:active:not(:disabled) {
  transform: scale(0.96);
}

.m3-cell--selected {
  box-shadow: inset 0 0 0 2px #fbbf24, 0 0 14px rgba(251, 191, 36, 0.55);
  transform: scale(1.06);
  z-index: 2;
  background: rgba(251, 191, 36, 0.08);
}

.m3-cell--selected .m3-gem {
  animation: m3-gem-wiggle 0.55s ease-in-out infinite;
}

@keyframes m3-gem-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-3deg) scale(1.04); }
  75% { transform: rotate(3deg) scale(1.04); }
}

.m3-cell--drag-target {
  box-shadow: inset 0 0 0 2px #a78bfa, 0 0 12px rgba(167, 139, 250, 0.5);
  transform: scale(1.05);
  z-index: 2;
}

.m3-cell--swap {
  transform: scale(1.1);
  z-index: 3;
}

.m3-cell--invalid {
  animation: m3-shake 0.18s ease-in-out 2;
}

@keyframes m3-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.m3-cell--empty {
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.m3-gem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(0.9rem, 3.2vw, 1.35rem);
  border-radius: 7px;
  transition: transform 0.18s, opacity 0.18s;
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.m3-gem-facet {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, transparent 45%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
}

.m3-gem-shine {
  position: absolute;
  top: 8%;
  left: 12%;
  width: 38%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.75), transparent 70%);
  pointer-events: none;
  filter: blur(0.5px);
}

.m3-gem-core {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  line-height: 1;
}

.m3-gem--0 { background: linear-gradient(145deg, #fda4af 0%, #e11d48 55%, #be123c 100%); }
.m3-gem--1 { background: linear-gradient(145deg, #93c5fd 0%, #2563eb 55%, #1d4ed8 100%); }
.m3-gem--2 { background: linear-gradient(145deg, #86efac 0%, #16a34a 55%, #15803d 100%); }
.m3-gem--3 { background: linear-gradient(145deg, #fde047 0%, #ca8a04 55%, #a16207 100%); }
.m3-gem--4 { background: linear-gradient(145deg, #d8b4fe 0%, #9333ea 55%, #7e22ce 100%); }
.m3-gem--5 { background: linear-gradient(145deg, #fdba74 0%, #ea580c 55%, #c2410c 100%); }

.m3-gem--pop {
  animation: m3-gem-pop 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes m3-gem-pop {
  0% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

.m3-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pc, #fbbf24);
  box-shadow: 0 0 6px var(--pc, #fbbf24);
  animation: m3-particle-burst 0.5s ease-out forwards;
}

@keyframes m3-particle-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

.m3-score-float {
  position: absolute;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fde047;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(251, 191, 36, 0.6);
  pointer-events: none;
  animation: m3-score-float 0.68s ease-out forwards;
  z-index: 12;
}

@keyframes m3-score-float {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  20% { transform: translateY(-8px) scale(1.15); opacity: 1; }
  100% { transform: translateY(-42px) scale(1); opacity: 0; }
}

.m3-combo-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.5);
  padding: 0.5rem 1.1rem;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(234, 88, 12, 0.9));
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.45);
  pointer-events: none;
  z-index: 20;
  animation: m3-combo-burst 0.75s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes m3-combo-burst {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  35% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -70%) scale(1); opacity: 0; }
}

.m3-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 30;
  animation: m3-confetti-fall 1.1s ease-out forwards;
}

@keyframes m3-confetti-fall {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(120px) rotate(540deg) scale(0.4); opacity: 0; }
}

.m3-flash {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 70%);
  pointer-events: none;
  z-index: 15;
  animation: m3-flash 0.35s ease-out forwards;
}

@keyframes m3-flash {
  0% { opacity: 0.8; }
  100% { opacity: 0; }
}

.m3-feedback {
  min-height: 1.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
}

.m3-feedback--pop {
  animation: m3-feedback-pop 0.32s ease;
}

@keyframes m3-feedback-pop {
  0% { transform: scale(0.85); opacity: 0.5; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.m3-feedback.ok { color: #4ade80; }
.m3-feedback.bad { color: var(--danger); }

@media (max-width: 480px) {
  .m3-board-shell {
    width: min(100vw - 2rem, 360px);
  }

  .m3-cell {
    border-radius: 6px;
  }

  .m3-hint {
    font-size: 0.82rem;
  }
}

/* Piano Tiles */
.piano-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.piano-board {
  position: relative;
  width: min(100%, 400px);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(56, 189, 248, 0.08), transparent 55%),
    linear-gradient(165deg, #1a1f2e 0%, #0f1419 55%, #151a24 100%);
  border: 3px solid #334155;
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.piano-board--shake {
  animation: piano-shake 0.45s ease;
}

.piano-board--slam {
  animation: piano-slam 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.piano-board--fail {
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.4),
    inset 0 0 60px rgba(239, 68, 68, 0.22);
}

@keyframes piano-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-9px) rotate(-0.8deg);
  }
  30% {
    transform: translateX(9px) rotate(0.8deg);
  }
  45% {
    transform: translateX(-6px);
  }
  60% {
    transform: translateX(6px);
  }
  75% {
    transform: translateX(-3px);
  }
}

@keyframes piano-slam {
  0% { transform: scale(1); filter: brightness(1); }
  12% { transform: scale(0.97) translateY(4px); filter: brightness(0.75) saturate(1.4); }
  28% { transform: scale(1.02) translateY(-2px); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}

.piano-lane-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
  z-index: 1;
}

.piano-lane-grid::before {
  content: '';
  grid-column: 1 / -1;
  align-self: end;
  height: calc(76px * 1.35);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(56, 189, 248, 0.04) 50%,
    rgba(56, 189, 248, 0.1) 100%
  );
}

.piano-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
  gap: 4px;
  padding: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(25% - 2px),
      rgba(148, 163, 184, 0.14) calc(25% - 2px),
      rgba(148, 163, 184, 0.14) 25%
    ),
    linear-gradient(180deg, #243044 0%, #1a2332 100%);
  z-index: 2;
}

.piano-col {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  transition: background 0.08s ease, box-shadow 0.08s ease;
}

.piano-col--0 { box-shadow: inset -1px 0 0 rgba(244, 63, 94, 0.2); }
.piano-col--1 { box-shadow: inset -1px 0 0 rgba(168, 85, 247, 0.2); }
.piano-col--2 { box-shadow: inset -1px 0 0 rgba(34, 197, 94, 0.2); }
.piano-col--3 { box-shadow: inset 0 0 0 rgba(234, 179, 8, 0.2); }

.piano-col--tap {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.12);
}

.piano-tap-pad {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: calc(76px * 1.35);
  border-radius: 10px 10px 0 0;
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.04) 100%);
  pointer-events: none;
  z-index: 0;
}

.piano-col--0 .piano-tap-pad { border-top-color: rgba(244, 63, 94, 0.35); }
.piano-col--1 .piano-tap-pad { border-top-color: rgba(168, 85, 247, 0.35); }
.piano-col--2 .piano-tap-pad { border-top-color: rgba(34, 197, 94, 0.35); }
.piano-col--3 .piano-tap-pad { border-top-color: rgba(234, 179, 8, 0.35); }

.piano-lane-label {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 2.1rem;
  padding: 5px 10px;
  font-size: 0.85rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 5;
}

.piano-col--0 .piano-lane-label { color: rgba(251, 113, 133, 0.9); border-color: rgba(244, 63, 94, 0.25); }
.piano-col--1 .piano-lane-label { color: rgba(216, 180, 254, 0.9); border-color: rgba(168, 85, 247, 0.25); }
.piano-col--2 .piano-lane-label { color: rgba(134, 239, 172, 0.9); border-color: rgba(34, 197, 94, 0.25); }
.piano-col--3 .piano-lane-label { color: rgba(253, 224, 71, 0.9); border-color: rgba(234, 179, 8, 0.25); }

.piano-tile {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 0;
  border-radius: 10px;
  transition: background 0.08s ease, box-shadow 0.08s ease, opacity 0.08s ease;
  will-change: transform;
  overflow: hidden;
}

.piano-tile--white {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 55%, #cbd5e1 100%);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 6px rgba(15, 23, 42, 0.08);
}

.piano-tile--black {
  background: linear-gradient(180deg, #475569 0%, #1e293b 38%, #0f172a 100%);
  border: 1px solid #64748b;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.16),
    inset 0 -5px 12px rgba(0, 0, 0, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.3);
}

.piano-tile--black::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.06) 42%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.08) 58%,
    transparent 70%
  );
  background-size: 220% 100%;
  animation: piano-tile-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes piano-tile-shine {
  0%, 100% { background-position: 120% 0; opacity: 0.7; }
  45% { background-position: -20% 0; opacity: 1; }
}

.piano-tile--hit {
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 45%, #15803d 100%) !important;
  border-color: #16a34a !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    0 0 14px rgba(34, 197, 94, 0.45) !important;
  opacity: 0.9;
}

.piano-tile--flash {
  animation: piano-tile-flash 0.22s ease-out;
}

@keyframes piano-tile-flash {
  0% {
    filter: brightness(2.2);
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.9),
      0 0 22px rgba(255, 255, 255, 0.55);
  }
  100% {
    filter: brightness(1);
  }
}

.piano-tile--bad {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 40%, #b91c1c 100%) !important;
  border-color: #991b1b !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    0 0 16px rgba(239, 68, 68, 0.5) !important;
}

.piano-hit-line {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: calc(76px * 0.55);
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f43f5e, #a855f7, #22c55e, #eab308);
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.75);
}

.piano-hit-line--pulse {
  animation: piano-hit-pulse 0.24s ease-out;
}

@keyframes piano-hit-pulse {
  0% { transform: scaleY(1); box-shadow: 0 0 16px rgba(56, 189, 248, 0.75); }
  50% { transform: scaleY(2.4); box-shadow: 0 0 28px rgba(253, 224, 71, 0.95); }
  100% { transform: scaleY(1); box-shadow: 0 0 16px rgba(56, 189, 248, 0.75); }
}

.piano-hit-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(76px * 1.35);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(56, 189, 248, 0.05) 45%,
    rgba(56, 189, 248, 0.12) 100%
  );
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 -8px 24px rgba(56, 189, 248, 0.1);
}

.piano-flash-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
}

.piano-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
}

.piano-particles {
  position: absolute;
  inset: 0;
}

.piano-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--piano-hue, #38bdf8);
  box-shadow: 0 0 10px var(--piano-hue, #38bdf8);
  animation: piano-particle-burst 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.piano-particle--miss {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #f87171;
  box-shadow: 0 0 8px #f87171;
}

@keyframes piano-particle-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(1.3); }
  100% { opacity: 0; transform: translate(var(--piano-dx), var(--piano-dy)) scale(0.15); }
}

.piano-judge-flash {
  position: absolute;
  left: 50%;
  top: 28%;
  z-index: 9;
  pointer-events: none;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.75rem;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.6);
}

.piano-judge-flash--pop {
  animation: piano-judge-pop 0.42s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

.piano-judge-flash--perfect {
  color: #fde047;
  text-shadow: 0 0 22px rgba(253, 224, 71, 0.75), 0 2px 0 rgba(120, 53, 15, 0.45);
}

.piano-judge-flash--great {
  color: #4ade80;
  text-shadow: 0 0 18px rgba(74, 222, 128, 0.65), 0 2px 0 rgba(21, 128, 61, 0.4);
}

@keyframes piano-judge-pop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -6px) scale(1.22); }
  70% { opacity: 1; transform: translate(-50%, -12px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -24px) scale(0.88); }
}

.piano-combo-meter {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  z-index: 9;
  pointer-events: none;
}

.piano-combo-meter__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  transition: width 0.18s ease-out, background 0.2s ease;
}

.piano-combo-meter--warm .piano-combo-meter__fill {
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.55);
}

.piano-combo-meter--hot .piano-combo-meter__fill {
  background: linear-gradient(90deg, #fbbf24, #f97316, #ef4444);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.65);
}

.piano-combo-meter--pulse {
  animation: piano-meter-pulse 0.35s ease-out;
}

@keyframes piano-meter-pulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.35); }
}

.piano-combo-meter__label {
  position: absolute;
  top: -16px;
  left: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}

.piano-miss-slam {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  color: #fca5a5;
  text-shadow:
    0 0 30px rgba(239, 68, 68, 0.85),
    0 4px 0 rgba(127, 29, 29, 0.6);
  opacity: 0;
  transform: scale(1.6);
}

.piano-miss-slam--show {
  animation: piano-miss-slam 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes piano-miss-slam {
  0% { opacity: 0; transform: scale(2.2); }
  18% { opacity: 1; transform: scale(0.92); }
  35% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.15); }
}

.piano-press-flash {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 55%,
    rgba(125, 211, 252, 0.45) 100%
  );
  animation: piano-press-flash 0.28s ease-out forwards;
}

@keyframes piano-press-flash {
  0% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

.piano-combo {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 4;
  pointer-events: none;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: 0.06em;
  color: #f8fafc;
  text-shadow:
    0 2px 0 rgba(15, 23, 42, 0.45),
    0 0 18px rgba(56, 189, 248, 0.55);
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.7);
}

.piano-combo--show {
  animation: piano-combo-pop 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

.piano-combo--hot {
  color: #fde68a;
  text-shadow:
    0 2px 0 rgba(120, 53, 15, 0.5),
    0 0 22px rgba(251, 191, 36, 0.7);
}

@keyframes piano-combo-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.55);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1.18);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -22px) scale(0.92);
  }
}

@media (max-width: 420px) {
  .piano-board {
    width: 100%;
    border-radius: 12px;
  }

  .piano-lane-label {
    min-width: 1.9rem;
    padding: 4px 8px;
    font-size: 0.8rem;
  }

  .piano-judge-flash {
    font-size: 1.45rem;
  }

  .piano-miss-slam {
    font-size: 2rem;
  }
}

/* Klondike Solitaire */
.sol-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  user-select: none;
  touch-action: none;
  padding: 14px 10px 18px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(74, 222, 128, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(15, 23, 42, 0.35), transparent 50%),
    linear-gradient(165deg, #14532d 0%, #166534 38%, #14532d 72%, #0f3d24 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -20px 40px rgba(0, 0, 0, 0.18),
    0 12px 32px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.sol-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 28px 28px;
  border-radius: inherit;
}

.sol-wrap--won {
  animation: sol-win-flash 0.55s ease;
}

@keyframes sol-win-flash {
  0%,
  100% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.18);
  }
}

@keyframes sol-cascade-card {
  0% {
    transform: translateY(6px) scale(0.96);
  }
  55% {
    transform: translateY(-3px) scale(1.04);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.sol-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.sol-burst {
  position: absolute;
  width: 0;
  height: 0;
}

.sol-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc, #fbbf24);
  box-shadow: 0 0 6px var(--sc, #fbbf24);
  animation: sol-particle-fly 0.6s ease-out forwards;
}

@keyframes sol-particle-fly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0.2);
    opacity: 0;
  }
}

.sol-confetti {
  position: absolute;
  top: -8px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--sc, #fbbf24);
  animation: sol-confetti-fall ease-in forwards;
}

@keyframes sol-confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(var(--fall, 480px)) rotate(var(--spin, 360deg));
    opacity: 0;
  }
}

.sol-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.sol-toolbar .btn {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sol-toolbar .btn:hover {
  transform: translateY(-1px);
}

.sol-toolbar .btn:active {
  transform: translateY(1px) scale(0.98);
}

.sol-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(640px, 100%);
  padding: 0 4px;
}

.sol-spacer {
  flex: 1;
}

.sol-foundations {
  display: flex;
  gap: 8px;
}

.sol-tableau {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  width: min(640px, 100%);
  min-height: 320px;
}

.sol-pile,
.sol-column {
  position: relative;
  min-height: 88px;
}

.sol-column {
  min-height: 340px;
}

.sol-foundation-slot,
.sol-stock-slot,
.sol-waste-slot {
  border-radius: 10px;
  transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
  min-width: var(--sol-card-w);
}

.sol-stock-slot--recycle-hint .sol-card--recycle {
  animation: sol-recycle-hint 1.4s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.35),
    inset 0 2px 8px rgba(0, 0, 0, 0.15);
}

@keyframes sol-recycle-hint {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.55), 0 0 14px rgba(250, 204, 21, 0.25);
  }
}

.sol-drop--valid {
  box-shadow:
    0 0 0 2px rgba(52, 211, 153, 0.75),
    0 0 16px rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
  border-radius: 10px;
}

.sol-drop--invalid {
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.55);
  background: rgba(248, 113, 113, 0.06);
  border-radius: 10px;
}

.sol-drop--reject {
  animation: sol-reject-flash 0.34s ease;
}

@keyframes sol-reject-flash {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  35% {
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.65), 0 0 12px rgba(248, 113, 113, 0.35);
  }
}

.sol-found-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s ease;
}

.sol-found-mark--red {
  color: rgba(248, 113, 113, 0.45);
}

.sol-found-mark--black {
  color: rgba(226, 232, 240, 0.28);
}

.sol-slot--glow {
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.55),
    0 0 18px rgba(250, 204, 21, 0.35);
}

.sol-slot--tick {
  animation: sol-slot-tick 0.34s ease;
}

@keyframes sol-slot-tick {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
  45% {
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.7), 0 0 14px rgba(52, 211, 153, 0.35);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

.sol-slot--fanfare {
  animation: sol-slot-fanfare 0.48s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes sol-slot-fanfare {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.sol-slot--cascade {
  animation: sol-slot-cascade 0.22s ease;
}

@keyframes sol-slot-cascade {
  0% {
    transform: translateY(4px) scale(0.97);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.15);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

.sol-fanfare-ring {
  position: absolute;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sol-fanfare-ring::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 2px solid rgba(250, 204, 21, 0.85);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.45);
  animation: sol-ring-expand 0.58s ease-out forwards;
}

@keyframes sol-ring-expand {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.sol-slot--pulse {
  animation: sol-slot-pulse 0.28s ease;
}

@keyframes sol-slot-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}

.sol-card-wrap {
  position: absolute;
  left: 0;
  width: 100%;
  cursor: grab;
  touch-action: none;
  transition: transform 0.12s ease;
  z-index: 1;
}

.sol-card-wrap:active {
  cursor: grabbing;
}

.sol-card-wrap--empty {
  position: relative;
  min-height: 88px;
  pointer-events: none;
}

.sol-card-wrap--lifting .sol-card {
  opacity: 0.28;
  filter: saturate(0.65);
}

.sol-card-wrap--selected .sol-card {
  box-shadow:
    0 0 0 2px rgba(96, 165, 250, 0.85),
    0 0 14px rgba(96, 165, 250, 0.45),
    0 6px 14px rgba(15, 23, 42, 0.22);
  transform: translateY(-3px) scale(1.02);
}

.sol-card-wrap--selected {
  z-index: 5;
}

.sol-card-wrap--deal {
  animation: sol-deal-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sol-deal-in {
  0% {
    opacity: 0;
    transform: translateY(-28px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sol-card-wrap--draw {
  animation: sol-draw-in 0.28s ease-out;
}

@keyframes sol-draw-in {
  0% {
    transform: translateX(-18px) rotate(-6deg) scale(0.94);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0) rotate(0) scale(1);
    opacity: 1;
  }
}

.sol-card-wrap--flip {
  animation: sol-flip-reveal 0.36s ease;
}

@keyframes sol-flip-reveal {
  0% {
    transform: scaleX(0.15) rotateY(70deg);
  }
  55% {
    transform: scaleX(1.06) rotateY(0);
  }
  100% {
    transform: scaleX(1) rotateY(0);
  }
}

.sol-card-wrap--pop {
  animation: sol-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes sol-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.sol-card-wrap--shake {
  animation: sol-shake 0.32s ease;
}

@keyframes sol-shake {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  20% {
    transform: translateX(-5px) rotate(-1.5deg);
  }
  40% {
    transform: translateX(5px) rotate(1.5deg);
  }
  60% {
    transform: translateX(-4px) rotate(-1deg);
  }
  80% {
    transform: translateX(4px) rotate(1deg);
  }
}

.sol-card {
  position: relative;
  width: 100%;
  max-width: var(--sol-card-w);
  aspect-ratio: 5 / 7;
  margin: 0 auto;
  border-radius: 9px;
  background:
    linear-gradient(155deg, #ffffff 0%, #f8fafc 48%, #eef2f7 88%, #e2e8f0 100%);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 4px rgba(15, 23, 42, 0.1),
    0 7px 16px rgba(15, 23, 42, 0.2);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sol-card-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: inherit;
  z-index: 3;
}

.sol-card--pile {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sol-card--pile:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 4px 10px rgba(15, 23, 42, 0.35);
}

.sol-card--back {
  background:
    radial-gradient(circle at 28% 22%, rgba(147, 197, 253, 0.42), transparent 48%),
    radial-gradient(circle at 78% 82%, rgba(30, 64, 175, 0.35), transparent 45%),
    linear-gradient(148deg, #1e3a8a 0%, #2563eb 38%, #1d4ed8 62%, #1e40af 82%, #172554 100%);
  border-color: #1e3a8a;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 3px 10px rgba(15, 23, 42, 0.38);
}

.sol-back-pattern {
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  border: 1.5px solid rgba(191, 219, 254, 0.42);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.07) 0 2px,
      transparent 2px 7px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.06) 0 2px,
      transparent 2px 7px
    ),
    radial-gradient(circle at center, rgba(59, 130, 246, 0.12), transparent 70%);
  pointer-events: none;
}

.sol-back-pattern::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 4px;
  border: 1px solid rgba(191, 219, 254, 0.22);
  pointer-events: none;
}

.sol-back-pattern::after {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(191, 219, 254, 0.5);
  font-size: 1.15rem;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.45);
}

.sol-card--empty {
  background: rgba(15, 23, 42, 0.18);
  border: 2px dashed rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sol-card--recycle {
  cursor: pointer;
}

.sol-card--recycle::before {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sol-card--under {
  position: absolute;
  top: 0;
  left: 4px;
  opacity: 0.75;
  pointer-events: none;
  transform: scale(0.98);
}

.sol-card--red .sol-corner,
.sol-card--red .sol-pip,
.sol-card--red .sol-ace,
.sol-card--red .sol-royalty-rank,
.sol-card--red .sol-royalty-suit,
.sol-card--red .sol-mini {
  color: #dc2626;
}

.sol-card--black .sol-corner,
.sol-card--black .sol-pip,
.sol-card--black .sol-ace,
.sol-card--black .sol-royalty-rank,
.sol-card--black .sol-royalty-suit,
.sol-card--black .sol-mini {
  color: #0f172a;
}

.sol-corner {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sol-corner .sol-mini {
  font-size: 0.58rem;
  margin-top: 1px;
}

.sol-corner--tl {
  top: 4px;
  left: 5px;
}

.sol-corner--br {
  bottom: 4px;
  right: 5px;
  transform: rotate(180deg);
}

.sol-face {
  position: absolute;
  inset: 16% 10% 14% 10%;
  z-index: 1;
}

.sol-face--pips {
  inset: 18% 12% 16% 12%;
}

.sol-pip {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.78rem;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.sol-face--ace {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-ace {
  font-size: 1.85rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

.sol-face--royalty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-royalty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), transparent 55%),
    linear-gradient(160deg, rgba(248, 250, 252, 0.9), rgba(226, 232, 240, 0.55));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
  color: inherit;
}

.sol-card--red .sol-royalty {
  border-color: rgba(220, 38, 38, 0.35);
}

.sol-card--black .sol-royalty {
  border-color: rgba(15, 23, 42, 0.28);
}

.sol-royalty-rank {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

.sol-royalty-suit {
  font-size: 0.85rem;
  line-height: 1;
  margin-top: 1px;
}

.sol-pile-count {
  position: absolute;
  bottom: 3px;
  right: 5px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(239, 246, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.sol-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: var(--sol-card-w);
  filter: drop-shadow(0 12px 22px rgba(15, 23, 42, 0.5));
  transform: scale(1.06) rotate(1.5deg);
  opacity: 0.97;
}

.sol-drag-ghost .sol-card-wrap {
  position: absolute;
  left: 0;
  width: var(--sol-card-w);
}

.sol-drag-ghost .sol-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 8px 20px rgba(15, 23, 42, 0.35);
}

@media (max-width: 520px) {
  .sol-wrap {
    padding: 10px 6px 14px;
    border-radius: 12px;
    --sol-card-w: 50px;
    --sol-stack-offset: 20px;
    gap: 10px;
  }

  .sol-card {
    font-size: 0.58rem;
    border-radius: 7px;
  }

  .sol-pile,
  .sol-column {
    min-height: calc(var(--sol-card-w) * 1.4);
  }

  .sol-column {
    min-height: 280px;
  }

  .sol-toolbar .btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.88rem;
  }

  .sol-ace {
    font-size: 1.2rem;
  }

  .sol-pip {
    font-size: 0.55rem;
  }

  .sol-royalty-rank {
    font-size: 0.7rem;
  }

  .sol-royalty-suit {
    font-size: 0.62rem;
  }

  .sol-found-mark {
    font-size: 1.1rem;
  }

  .sol-corner {
    font-size: 0.48rem;
  }

  .sol-corner .sol-mini {
    font-size: 0.45rem;
  }

  .sol-tableau {
    gap: 3px;
  }

  .sol-top {
    gap: 4px;
  }
}

@media (max-width: 380px) {
  .sol-wrap {
    --sol-card-w: 44px;
    --sol-stack-offset: 17px;
  }
}

/* Korean Wordle (wordle-kr) */
.wk-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 14px 12px 18px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(34, 197, 94, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.01));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 28px rgba(15, 23, 42, 0.12);
  touch-action: manipulation;
}

.wk-options {
  width: 100%;
  display: flex;
  justify-content: center;
}

.wk-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s, border-color 0.2s;
}

.wk-option:hover {
  background: rgba(255, 255, 255, 0.07);
}

.wk-option input {
  accent-color: #16a34a;
}

.wk-status {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.02em;
}

.wk-board-wrap {
  position: relative;
  width: 100%;
  border-radius: 12px;
  padding: 8px;
  overflow: visible;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px rgba(15, 23, 42, 0.1);
}

.wk-board-wrap--shake {
  animation: wk-shake 0.45s ease;
}

.wk-board-wrap--win .wk-tile-correct {
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.35),
    0 4px 14px rgba(34, 197, 94, 0.35);
}

.wk-board-wrap--lose::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 60%, rgba(239, 68, 68, 0.18), transparent 65%);
  animation: wk-lose-fade 0.6s ease forwards;
}

.wk-board {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  perspective: 680px;
}

.wk-flash {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.45), transparent 70%);
}

.wk-flash--on {
  animation: wk-flash 0.5s ease-out forwards;
}

.wk-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.wk-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pc, #22c55e);
  box-shadow: 0 0 6px var(--pc, #22c55e);
  animation: wk-particle 0.65s ease-out forwards;
}

.wk-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  transform-style: preserve-3d;
}

.wk-row--typing .wk-tile-preview {
  border-color: rgba(59, 130, 246, 0.45);
  animation: wk-pop 0.12s ease;
}

.wk-row--hot {
  animation: wk-row-hot 0.45s ease;
}

.wk-tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  font-size: clamp(0.85rem, 3.5vw, 1.1rem);
  font-weight: 700;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(160deg, var(--bg-elevated), rgba(15, 23, 42, 0.06));
  color: var(--text);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 2px 6px rgba(15, 23, 42, 0.12);
  transition: background 0.28s, border-color 0.28s, color 0.28s, box-shadow 0.28s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.wk-tile-preview {
  border-color: rgba(59, 130, 246, 0.35);
  background:
    radial-gradient(circle at 30% 25%, rgba(147, 197, 253, 0.2), transparent 55%),
    linear-gradient(160deg, rgba(59, 130, 246, 0.12), rgba(15, 23, 42, 0.04));
  color: var(--text);
}

.wk-tile-flip-pending {
  animation: wk-flip-out 0.16s ease forwards;
}

.wk-tile-filled {
  border-color: rgba(255, 255, 255, 0.22);
  animation: wk-pop 0.14s ease;
}

.wk-tile-reveal {
  animation: wk-reveal 0.42s ease forwards;
}

.wk-tile-correct {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 55%),
    linear-gradient(155deg, #22c55e, #15803d);
  border-color: #16a34a;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 3px 10px rgba(34, 197, 94, 0.35);
}

.wk-tile-present {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.3), transparent 55%),
    linear-gradient(155deg, #eab308, #a16207);
  border-color: #ca8a04;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 3px 10px rgba(234, 179, 8, 0.3);
}

.wk-tile-absent {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.12), transparent 55%),
    linear-gradient(155deg, #64748b, #475569);
  border-color: #64748b;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 2px 6px rgba(15, 23, 42, 0.2);
}

@keyframes wk-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes wk-reveal {
  0% { transform: rotateX(0deg) scale(1); }
  45% { transform: rotateX(88deg) scale(0.92); }
  55% { transform: rotateX(88deg) scale(0.92); }
  100% { transform: rotateX(0deg) scale(1); }
}

@keyframes wk-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
}

@keyframes wk-flash {
  0% { opacity: 0; }
  25% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes wk-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.2);
  }
}

.wk-compose {
  min-height: 2.4rem;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--text);
  padding: 8px 16px;
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wk-compose-active {
  color: var(--text);
}

.wk-compose-ready {
  color: #16a34a;
  animation: wk-pop 0.2s ease;
}

.wk-compose-wrap.wk-compose--shake {
  animation: wk-compose-shake 0.4s ease;
}

.wk-compose-empty {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.2em;
}

.wk-toast {
  position: relative;
  min-height: 0;
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
  color: #16a34a;
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.wk-toast--on {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: wk-pop 0.28s ease;
}

.wk-win-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 4;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #22c55e, #15803d);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.25),
    0 8px 28px rgba(34, 197, 94, 0.45);
  animation: wk-banner-pop 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
  pointer-events: none;
}

.wk-answer-strip {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translate(-50%, 100%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
  animation: wk-answer-in 0.45s ease forwards;
}

.wk-answer-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fca5a5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wk-answer-tiles {
  display: flex;
  gap: 4px;
}

.wk-answer-tile {
  width: 1.65rem;
  height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(155deg, #64748b, #475569);
  transform: rotateX(90deg);
  opacity: 0;
}

.wk-answer-tile--show {
  background: linear-gradient(155deg, #22c55e, #15803d);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}

.wk-answer-tile--flip {
  animation: wk-reveal 0.42s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
  opacity: 1;
}

@keyframes wk-cursor-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12); }
  50% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28); }
}

@keyframes wk-banner-pop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes wk-answer-in {
  from { opacity: 0; transform: translate(-50%, 110%); }
  to { opacity: 1; transform: translate(-50%, 100%); }
}

@keyframes wk-compose-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.wk-msg {
  margin: 0;
  min-height: 1.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  color: var(--danger);
}

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

.wk-kb-hint {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  opacity: 0.85;
}

.wk-kb-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 3px 4px;
  border-radius: 8px;
  transition: background 0.2s, opacity 0.2s, box-shadow 0.2s;
}

.wk-kb-row--active {
  background: rgba(34, 197, 94, 0.08);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.2);
}

.wk-kb-row--idle {
  opacity: 0.72;
}

.wk-kb-row--active.wk-kb-row--jung {
  background: rgba(234, 179, 8, 0.08);
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.22);
}

.wk-kb-row--active.wk-kb-row--jong {
  background: rgba(99, 102, 241, 0.08);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.22);
}

.wk-key {
  min-width: 2rem;
  height: 2.65rem;
  padding: 0 0.4rem;
  border: none;
  border-radius: 7px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(165deg, var(--surface-2), rgba(15, 23, 42, 0.08));
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 2px 5px rgba(15, 23, 42, 0.15);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.wk-key:hover {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.2), transparent 55%),
    linear-gradient(165deg, var(--border), rgba(15, 23, 42, 0.06));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 3px 8px rgba(15, 23, 42, 0.18);
}

.wk-key:active {
  transform: scale(0.93);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 1px 3px rgba(15, 23, 42, 0.12);
}

.wk-key--pop {
  animation: wk-key-pop 0.18s ease;
}

.wk-kb-row--active .wk-key {
  min-height: 2.75rem;
}

@keyframes wk-key-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.wk-key-correct {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.3), transparent 55%),
    linear-gradient(165deg, #22c55e, #15803d);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}

.wk-key-present {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(165deg, #eab308, #a16207);
  color: #fff;
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.3);
}

.wk-key-absent {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(165deg, #64748b, #475569);
  color: #fff;
  opacity: 0.88;
}

.wk-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.wk-btn-back {
  min-width: 3.2rem;
  font-size: 1.15rem;
  min-height: 44px;
}

.wk-btn-submit {
  min-height: 44px;
  min-width: 7rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}

.wk-btn-submit--go {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

@media (max-width: 400px) {
  .wk-root {
    padding: 10px 8px 14px;
    gap: 10px;
  }

  .wk-key {
    min-width: 1.75rem;
    height: 2.5rem;
    font-size: 0.88rem;
  }

  .wk-row {
    gap: 4px;
  }

  .wk-tile {
    border-radius: 6px;
    font-size: clamp(0.8rem, 3.2vw, 1rem);
  }

  .wk-compose {
    font-size: 1.25rem;
    padding: 6px 12px;
  }
}

/* ?? game-24 (24 ??) ?? */
.g24-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 12px 18px;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 120% 70% at 50% -15%, rgba(190, 18, 60, 0.14), transparent 55%),
    linear-gradient(165deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.01));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 10px 32px rgba(15, 23, 42, 0.14);
  touch-action: manipulation;
  transition: opacity 0.45s ease, filter 0.45s ease;
  position: relative;
  overflow: hidden;
}

.g24-root::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(190, 18, 60, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 18, 60, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}

.g24-goal {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 6px 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(145deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.06));
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 3px 14px rgba(251, 191, 36, 0.18);
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.g24-goal-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(251, 191, 36, 0.85);
  letter-spacing: 0.02em;
}

.g24-goal-num {
  font-size: 1.55rem;
  font-weight: 900;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
}

.g24-goal--celebrate {
  animation: g24-goal-celebrate 0.52s ease;
}

.g24-root--over {
  opacity: 0.82;
  filter: saturate(0.85);
}

.g24-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.g24-timer {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 8px 16px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12), transparent 60%),
    linear-gradient(145deg, rgba(190, 18, 60, 0.18), rgba(190, 18, 60, 0.06));
  border: 1px solid rgba(190, 18, 60, 0.25);
  box-shadow: 0 3px 12px rgba(190, 18, 60, 0.15);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}

.g24-timer-num {
  font-size: 2rem;
  font-weight: 800;
  color: #be123c;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.g24-timer-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(190, 18, 60, 0.75);
}

.g24-timer--warn {
  animation: g24-timer-pulse 0.85s ease-in-out infinite;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.15), transparent 60%),
    linear-gradient(145deg, rgba(239, 68, 68, 0.28), rgba(190, 18, 60, 0.12));
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.25);
}

.g24-timer--warn .g24-timer-num {
  color: #ef4444;
}

.g24-timer--done .g24-timer-num {
  color: var(--text-muted);
}

.g24-score-badge {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 60%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
}

.g24-score-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.g24-score-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.g24-score-badge--pop {
  animation: g24-score-pop 0.32s ease;
}

.g24-play-wrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 10px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px rgba(15, 23, 42, 0.08);
}

.g24-play-wrap--shake {
  animation: g24-shake 0.45s ease;
}

.g24-flash {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

.g24-flash--ok {
  background: radial-gradient(circle at 50% 45%, rgba(34, 197, 94, 0.42), transparent 72%);
}

.g24-flash--bad {
  background: radial-gradient(circle at 50% 45%, rgba(239, 68, 68, 0.38), transparent 72%);
}

.g24-flash--over {
  background: radial-gradient(circle at 50% 45%, rgba(100, 116, 139, 0.45), transparent 75%);
}

.g24-flash--on {
  animation: g24-flash 0.52s ease-out forwards;
}

.g24-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.g24-particle {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--pc, #be123c);
  box-shadow: 0 0 8px var(--pc, #be123c);
  animation: g24-particle 0.68s ease-out forwards;
}

.g24-streak {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 4;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.g24-streak--on {
  opacity: 1;
  transform: translateY(0);
  animation: g24-streak-pop 0.35s ease;
}

.g24-streak--hot {
  color: #f97316;
  font-size: 0.88rem;
  text-shadow: 0 0 14px rgba(249, 115, 22, 0.65);
}

.g24-combo-pop {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 5;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 1.35rem;
  font-weight: 900;
  color: #fbbf24;
  text-shadow:
    0 0 18px rgba(251, 191, 36, 0.65),
    0 2px 8px rgba(15, 23, 42, 0.35);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.g24-combo-pop--on {
  animation: g24-combo-pop 0.72s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.g24-combo-pop--hot {
  color: #f97316;
  font-size: 1.55rem;
}

.g24-score-pop {
  position: absolute;
  left: 50%;
  top: 18%;
  z-index: 5;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: 800;
  color: #22c55e;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
  opacity: 0;
  pointer-events: none;
}

.g24-score-pop--on {
  animation: g24-score-float 0.62s ease-out forwards;
}

.g24-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.g24-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 94px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.55), transparent 52%),
    linear-gradient(155deg, #fff 0%, #f1f5f9 55%, #e2e8f0 100%);
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 5px 14px rgba(15, 23, 42, 0.18);
  transition: transform 0.14s ease, opacity 0.14s ease, box-shadow 0.14s ease;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  -webkit-tap-highlight-color: transparent;
}

.g24-card--deal {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.g24-card--red {
  color: #be123c;
}

.g24-card--black {
  color: #1e293b;
}

.g24-card-suit {
  position: absolute;
  top: 7px;
  left: 8px;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.85;
}

.g24-card-val {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  z-index: 1;
}

.g24-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  pointer-events: none;
}

.g24-card:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 20px rgba(190, 18, 60, 0.22);
}

.g24-card:active:not(:disabled) {
  transform: translateY(-1px) scale(0.97);
}

.g24-card--used {
  opacity: 0.32;
  cursor: default;
  transform: none;
  filter: grayscale(0.4);
}

.g24-card--picked {
  animation: g24-card-pick 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.g24-cards--pass {
  animation: g24-cards-pass 0.36s ease forwards;
}

.g24-expr {
  width: 100%;
  min-height: 54px;
  padding: 13px 16px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.08), transparent 55%),
    linear-gradient(160deg, var(--bg-elevated), rgba(15, 23, 42, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  word-break: break-word;
  line-height: 1.4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(15, 23, 42, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
  position: relative;
  z-index: 1;
}

.g24-expr-empty {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 1rem;
}

.g24-expr-filled {
  border-color: rgba(190, 18, 60, 0.25);
}

.g24-expr--pulse {
  animation: g24-expr-pulse 0.18s ease;
}

.g24-expr--success {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 2px rgba(34, 197, 94, 0.25),
    0 4px 14px rgba(34, 197, 94, 0.2);
  color: #16a34a;
}

.g24-expr--over {
  color: var(--text-muted);
  font-weight: 700;
}

.g24-feedback {
  min-height: 1.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  position: relative;
  z-index: 1;
}

.g24-feedback.ok {
  color: #16a34a;
  animation: g24-feedback-pop 0.35s ease;
}

.g24-feedback.bad {
  color: var(--danger);
  animation: g24-feedback-shake 0.4s ease;
}

.g24-feedback.neutral {
  color: var(--text-muted);
}

.g24-keypad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  width: 100%;
}

.g24-key {
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 60%),
    linear-gradient(160deg, var(--bg-elevated), rgba(15, 23, 42, 0.05));
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 6px rgba(15, 23, 42, 0.1);
  transition: background 0.14s, transform 0.1s, box-shadow 0.14s;
  -webkit-tap-highlight-color: transparent;
}

.g24-key:hover {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(15, 23, 42, 0.06));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 3px 10px rgba(15, 23, 42, 0.14);
}

.g24-key:active {
  transform: scale(0.94);
}

.g24-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.g24-btn {
  flex: 1 1 auto;
  min-width: 72px;
  min-height: 46px;
  border-radius: 10px;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  transition: transform 0.12s, filter 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.g24-btn:active {
  transform: scale(0.96);
}

.g24-btn-primary {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(155deg, #e11d48, #be123c);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 4px 14px rgba(190, 18, 60, 0.35);
}

.g24-btn-primary:hover {
  filter: brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 6px 18px rgba(190, 18, 60, 0.4);
}

.g24-btn-pass {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08), transparent 55%),
    linear-gradient(160deg, var(--bg-elevated), rgba(15, 23, 42, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.g24-btn-secondary {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(160deg, var(--bg-elevated), rgba(15, 23, 42, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

@keyframes g24-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
}

@keyframes g24-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes g24-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.2);
  }
}

@keyframes g24-score-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes g24-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes g24-streak-pop {
  0% { transform: scale(0.8) translateY(4px); opacity: 0; }
  60% { transform: scale(1.08) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes g24-expr-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

@keyframes g24-feedback-pop {
  0% { transform: scale(0.92); opacity: 0.5; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes g24-feedback-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@media (max-width: 400px) {
  .g24-root {
    padding: 12px 8px 16px;
    gap: 12px;
  }

  .g24-timer-num {
    font-size: 1.65rem;
  }

  .g24-score-num {
    font-size: 1.25rem;
  }

  .g24-card {
    width: 58px;
    height: 82px;
  }

  .g24-card-val {
    font-size: 1.4rem;
  }

  .g24-keypad {
    grid-template-columns: repeat(3, 1fr);
  }

  .g24-btn {
    min-height: 48px;
  }
}

/* Rhythm Tap */
.rt-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.rt-board {
  position: relative;
  width: min(100%, 380px);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(165deg, #0c1222 0%, #1a1040 45%, #0f172a 100%);
  border: 3px solid rgba(99, 102, 241, 0.65);
  box-shadow:
    0 12px 40px rgba(99, 102, 241, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.rt-board--shake {
  animation: rt-board-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes rt-board-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) rotate(-0.4deg); }
  30% { transform: translateX(5px) rotate(0.3deg); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.rt-board--fail {
  filter: saturate(0.75) brightness(0.88);
}

.rt-board--clear {
  box-shadow:
    0 0 48px rgba(234, 179, 8, 0.35),
    0 12px 40px rgba(99, 102, 241, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.rt-board--pattern-flash {
  animation: rt-pattern-flash 0.35s ease-out;
}

@keyframes rt-pattern-flash {
  0% { box-shadow: 0 0 0 rgba(168, 85, 247, 0); }
  40% { box-shadow: 0 0 28px rgba(168, 85, 247, 0.45); }
  100% { box-shadow: 0 12px 40px rgba(99, 102, 241, 0.28); }
}

.rt-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, transparent 85%);
}

.rt-lanes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
  gap: 4px;
  padding: 4px;
  z-index: 1;
}

.rt-lane {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background 0.08s ease, box-shadow 0.08s ease, transform 0.06s ease;
}

.rt-lane--0 { border-bottom: 2px solid rgba(244, 63, 94, 0.45); }
.rt-lane--1 { border-bottom: 2px solid rgba(168, 85, 247, 0.45); }
.rt-lane--2 { border-bottom: 2px solid rgba(34, 197, 94, 0.45); }
.rt-lane--3 { border-bottom: 2px solid rgba(234, 179, 8, 0.45); }

.rt-lane--tap {
  background: rgba(168, 85, 247, 0.28);
  box-shadow: inset 0 0 16px rgba(168, 85, 247, 0.55);
  transform: scaleY(0.985);
}

.rt-lane--miss {
  background: rgba(239, 68, 68, 0.32);
  box-shadow: inset 0 0 16px rgba(239, 68, 68, 0.55);
}

.rt-key-label {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 2rem;
  padding: 4px 8px;
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.06em;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 2;
}

.rt-hit-line {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 352px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f43f5e, #a855f7, #22c55e, #eab308);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.85);
  z-index: 3;
  pointer-events: none;
}

.rt-hit-line--pulse {
  animation: rt-hit-pulse 0.22s ease-out;
}

@keyframes rt-hit-pulse {
  0% { transform: scaleY(1); box-shadow: 0 0 16px rgba(168, 85, 247, 0.85); }
  50% { transform: scaleY(2.2); box-shadow: 0 0 28px rgba(253, 224, 71, 0.95); }
  100% { transform: scaleY(1); box-shadow: 0 0 16px rgba(168, 85, 247, 0.85); }
}

.rt-hit-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 338px;
  height: 32px;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.22) 0%, transparent 70%);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.04s linear;
}

.rt-hit-glow--pulse {
  animation: rt-hit-glow-pulse 0.22s ease-out;
}

@keyframes rt-hit-glow-pulse {
  0% { opacity: 0.18; transform: scaleY(1); }
  50% { opacity: 0.55; transform: scaleY(1.35); }
  100% { opacity: 0.18; transform: scaleY(1); }
}

.rt-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

.rt-particles {
  position: absolute;
  inset: 0;
}

.rt-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--rt-hue, #a855f7);
  box-shadow: 0 0 8px var(--rt-hue, #a855f7);
  animation: rt-particle-burst 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.rt-particle--miss {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: #f87171;
  box-shadow: 0 0 6px #f87171;
}

@keyframes rt-particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(var(--rt-dx), var(--rt-dy)) scale(0.2);
  }
}

.rt-lane-flash {
  position: absolute;
  top: 320px;
  height: 64px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
  border-radius: 12px;
  animation: rt-lane-flash 0.28s ease-out forwards;
}

@keyframes rt-lane-flash {
  0% { opacity: 0.85; transform: scaleY(0.6); }
  100% { opacity: 0; transform: scaleY(1.1); }
}

.rt-note {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 0;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, #d8b4fe 0%, #7c3aed 55%, #5b21b6 100%);
  box-shadow:
    0 3px 10px rgba(124, 58, 237, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  will-change: transform;
  pointer-events: none;
  overflow: hidden;
}

.rt-note::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 8%;
  right: 8%;
  height: 38%;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
  pointer-events: none;
}

.rt-note--lane-0 {
  background: linear-gradient(180deg, #fda4af 0%, #f43f5e 55%, #be123c 100%);
  box-shadow: 0 3px 10px rgba(244, 63, 94, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rt-note--lane-1 {
  background: linear-gradient(180deg, #d8b4fe 0%, #a855f7 55%, #7e22ce 100%);
  box-shadow: 0 3px 10px rgba(168, 85, 247, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rt-note--lane-2 {
  background: linear-gradient(180deg, #86efac 0%, #22c55e 55%, #15803d 100%);
  box-shadow: 0 3px 10px rgba(34, 197, 94, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rt-note--lane-3 {
  background: linear-gradient(180deg, #fde047 0%, #eab308 55%, #a16207 100%);
  box-shadow: 0 3px 10px rgba(234, 179, 8, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rt-note--hit {
  opacity: 0.4;
  transform: scale(0.88) !important;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.rt-note--perfect {
  background: linear-gradient(180deg, #fef08a 0%, #fde047 50%, #ca8a04 100%) !important;
  box-shadow: 0 0 18px rgba(234, 179, 8, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.rt-note--miss {
  background: linear-gradient(180deg, #fca5a5 0%, #ef4444 55%, #b91c1c 100%) !important;
  opacity: 0.65;
}

.rt-judge-flash {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 5;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: opacity 0.05s ease;
}

.rt-judge-flash--perfect,
.rt-judge-flash--good,
.rt-judge-flash--miss {
  opacity: 1;
}

.rt-judge-flash--pop {
  animation: rt-judge-pop 0.32s cubic-bezier(0.22, 1.4, 0.36, 1);
}

@keyframes rt-judge-pop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.rt-judge-flash--perfect { color: #fde047; text-shadow: 0 0 20px rgba(253, 224, 71, 0.6); }
.rt-judge-flash--good { color: #4ade80; text-shadow: 0 0 16px rgba(74, 222, 128, 0.5); }
.rt-judge-flash--miss { color: #f87171; text-shadow: 0 0 16px rgba(248, 113, 113, 0.5); }

.rt-combo {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fde047;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}

.rt-combo--show {
  animation: rt-combo-pop 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

.rt-combo--hot {
  color: #fb923c;
  text-shadow: 0 0 18px rgba(251, 146, 60, 0.7);
  font-size: 1.15rem;
}

@keyframes rt-combo-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  35% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
}

.rt-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}

.rt-countdown--active {
  opacity: 1;
}

.rt-countdown--pop {
  animation: rt-countdown-pop 0.42s cubic-bezier(0.22, 1.4, 0.36, 1);
}

@keyframes rt-countdown-pop {
  0% { transform: scale(0.4); opacity: 0.3; }
  55% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 480px) {
  .rt-board {
    width: 100%;
    border-radius: 14px;
  }

  .rt-key-label {
    bottom: 12px;
    min-width: 2.4rem;
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .rt-countdown {
    font-size: 3.6rem;
  }

  .rt-touch-zone {
    min-height: 56px;
    font-size: 0.9rem;
  }
}

/* idle-clicker */
.ic-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 0.5rem;
  touch-action: manipulation;
}

.ic-wrap--shake {
  animation: ic-wrap-shake 0.52s ease-out;
}

@keyframes ic-wrap-shake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-6px) rotate(-0.4deg); }
  28% { transform: translateX(5px) rotate(0.35deg); }
  44% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  76% { transform: translateX(-2px); }
}

.ic-screen-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  opacity: 0;
  z-index: 20;
}

.ic-screen-flash--on {
  animation: ic-screen-flash 0.32s ease-out forwards;
}

.ic-screen-flash--gold {
  background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.35), transparent 70%);
}

.ic-screen-flash--prestige {
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.42), rgba(217, 119, 6, 0.18) 55%, transparent 75%);
}

@keyframes ic-screen-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

.ic-top {
  text-align: center;
  padding: 0.85rem 0.75rem;
  background:
    linear-gradient(165deg, rgba(251, 191, 36, 0.12) 0%, rgba(217, 119, 6, 0.06) 40%, transparent 70%),
    var(--bg-elevated);
  border-radius: 14px;
  border: 1px solid rgba(217, 119, 6, 0.22);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ic-count {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 55%, #b45309 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
  text-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(217, 119, 6, 0.35));
}

.ic-count--pulse {
  animation: ic-count-pulse 0.28s ease-out;
}

@keyframes ic-count-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.ic-count-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ic-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.ic-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(217, 119, 6, 0.18);
  background: rgba(15, 23, 42, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ic-stat-pill--cps {
  border-color: rgba(251, 191, 36, 0.35);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(217, 119, 6, 0.08));
  color: #fcd34d;
}

.ic-stat-pill--click {
  color: #fde68a;
}

.ic-stat-pill--best {
  border-color: rgba(168, 85, 247, 0.28);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(124, 58, 237, 0.06));
  color: #e9d5ff;
}

.ic-stat-pill--pulse {
  animation: ic-stat-pulse 0.45s ease-out;
}

@keyframes ic-stat-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.07); box-shadow: 0 0 14px rgba(251, 191, 36, 0.35); }
  100% { transform: scale(1); }
}

.ic-stat-icon {
  font-size: 0.82rem;
  line-height: 1;
}

.ic-stat-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.ic-stat {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.14);
}

.ic-milestone-toast {
  position: absolute;
  top: 0.35rem;
  left: 50%;
  transform: translateX(-50%) translateY(-12px) scale(0.92);
  z-index: 25;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(217, 119, 6, 0.14));
  color: #fef3c7;
  box-shadow:
    0 6px 22px rgba(217, 119, 6, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ic-milestone-toast--purple {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.24), rgba(124, 58, 237, 0.12));
  color: #f3e8ff;
  box-shadow:
    0 6px 22px rgba(168, 85, 247, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ic-milestone-toast--show {
  animation: ic-milestone-pop 1.85s ease-out forwards;
}

@keyframes ic-milestone-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.88); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.06); }
  22% { transform: translateX(-50%) translateY(0) scale(1); }
  78% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.96); }
}

.ic-offline {
  text-align: center;
  padding: 0.55rem 0.85rem;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.18), rgba(251, 191, 36, 0.1));
  border: 1px solid rgba(217, 119, 6, 0.38);
  border-radius: 10px;
  color: #fbbf24;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.15);
  transform: translateY(-8px);
  opacity: 0;
}

.ic-offline--show {
  animation: ic-offline-in 0.45s ease-out forwards;
}

@keyframes ic-offline-in {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.ic-main {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .ic-main {
    grid-template-columns: 1fr;
  }

  .ic-count {
    font-size: 2.5rem;
  }

  .ic-cookie {
    font-size: 6.5rem;
  }

  .ic-cookie-glow {
    width: 9rem;
    height: 9rem;
  }

  .ic-cookie-ring {
    width: 8.5rem;
    height: 8.5rem;
  }

  .ic-click-zone {
    min-height: 260px;
    cursor: pointer;
  }

  .ic-buy-btn,
  .ic-prestige-btn {
    min-height: 2.75rem;
    min-width: 4.75rem;
    padding: 0.5rem 0.7rem;
  }

  .ic-side {
    max-height: none;
  }

  .ic-click-hint {
    font-size: 1rem;
  }
}

.ic-click-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  cursor: pointer;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(251, 191, 36, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(168, 85, 247, 0.06) 0%, transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
    var(--bg-elevated);
  border-radius: 14px;
  border: 1px solid rgba(217, 119, 6, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 22px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.ic-click-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(217, 119, 6, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 119, 6, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.5;
}

.ic-cookie-glow {
  position: absolute;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, rgba(217, 119, 6, 0.12) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.ic-cookie-glow--pulse {
  animation: ic-glow-pulse 0.32s ease-out;
}

@keyframes ic-glow-pulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.75; }
}

.ic-cookie {
  position: relative;
  z-index: 2;
  font-size: 5rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.12s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
  touch-action: none;
}

.ic-cookie:hover {
  transform: scale(1.06);
  filter:
    drop-shadow(0 10px 20px rgba(217, 119, 6, 0.42))
    drop-shadow(0 0 16px rgba(251, 191, 36, 0.3));
}

.ic-click-zone:active .ic-cookie,
.ic-cookie--pop {
  transform: scale(0.88);
}

.ic-click-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.45), transparent 65%);
  opacity: 0;
  z-index: 1;
}

.ic-click-flash--on {
  animation: ic-click-flash 0.22s ease-out forwards;
}

@keyframes ic-click-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.ic-float-layer,
.ic-particle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

.ic-float {
  position: absolute;
  font-size: 1rem;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  animation: ic-float-up 0.9s ease-out forwards;
  pointer-events: none;
}

@keyframes ic-float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  60% { opacity: 1; transform: translateY(-28px) scale(1.08); }
  100% { opacity: 0; transform: translateY(-52px) scale(0.92); }
}

.ic-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: ic-particle-burst 0.6s ease-out forwards;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.65);
}

.ic-particle--spark {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  animation-duration: 0.85s;
  box-shadow: 0 0 6px currentColor;
}

@keyframes ic-particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--ic-px), var(--ic-py)) scale(0.2);
  }
}

.ic-side {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 380px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ic-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 35%),
    linear-gradient(135deg, rgba(217, 119, 6, 0.04), transparent 55%),
    var(--bg-elevated);
  border-radius: 14px;
  border: 1px solid rgba(217, 119, 6, 0.12);
  padding: 0.55rem;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ic-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ic-upgrade-row,
.ic-building-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.35rem;
  border-bottom: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  cursor: default;
}

.ic-upgrade-row--affordable,
.ic-building-row--affordable {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.08), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(217, 119, 6, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ic-upgrade-row--affordable:hover,
.ic-building-row--affordable:hover {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.12), rgba(251, 191, 36, 0.07));
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.12);
}

.ic-row-shake {
  animation: ic-row-shake 0.38s ease-out;
}

@keyframes ic-row-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px); }
  36% { transform: translateX(4px); }
  54% { transform: translateX(-3px); }
  72% { transform: translateX(2px); }
}

.ic-buy-flash {
  animation: ic-buy-flash 0.42s ease-out;
}

@keyframes ic-buy-flash {
  0% { box-shadow: inset 0 0 0 0 rgba(251, 191, 36, 0); }
  25% { box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.65), 0 0 18px rgba(251, 191, 36, 0.25); background: rgba(251, 191, 36, 0.14); }
  100% { box-shadow: inset 0 0 0 0 rgba(251, 191, 36, 0); }
}

.ic-building-row:last-child {
  border-bottom: none;
}

.ic-pop {
  animation: ic-row-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ic-row-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.03); background: rgba(251, 191, 36, 0.12); }
  100% { transform: scale(1); }
}

.ic-building-emoji {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.ic-building-info,
.ic-upgrade-info {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
}

.ic-building-name {
  font-weight: 600;
}

.ic-building-meta {
  display: flex;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.ic-price {
  color: #fbbf24;
  font-weight: 600;
}

.ic-buy-btn {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  min-width: 4.5rem;
  border-radius: 8px;
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.ic-buy-btn--cant {
  opacity: 0.55;
  cursor: not-allowed;
}

.ic-buy-btn--cant:active {
  animation: ic-btn-deny 0.32s ease-out;
}

@keyframes ic-btn-deny {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

.ic-buy-btn:not(:disabled):active {
  transform: scale(0.94);
}

.ic-prestige-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.14), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.1);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.ic-prestige-bar--ready {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.2),
    0 6px 22px rgba(168, 85, 247, 0.22);
  animation: ic-prestige-glow 2s ease-in-out infinite;
}

@keyframes ic-prestige-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.2), 0 6px 22px rgba(168, 85, 247, 0.18); }
  50% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35), 0 8px 28px rgba(217, 119, 6, 0.25); }
}

.ic-prestige-info {
  font-size: 0.82rem;
  line-height: 1.4;
}

.ic-prestige-btn {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(168, 85, 247, 0.25);
  transition: transform 0.12s ease;
}

.ic-prestige-btn:not(:disabled):active {
  transform: scale(0.95);
}

/* invaders */
.invaders-wrap {
  display: flex;
  justify-content: center;
  padding: 0.35rem 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(88, 28, 135, 0.22), transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(14, 116, 144, 0.14), transparent 45%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(2, 6, 23, 0.15) 100%);
  border-radius: var(--radius-md);
}

.invaders-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  touch-action: none;
  cursor: crosshair;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow:
    0 0 0 1px rgba(124, 108, 255, 0.16),
    0 0 28px rgba(124, 108, 255, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.invaders-canvas:active {
  box-shadow:
    0 0 0 1px rgba(253, 224, 71, 0.22),
    0 0 36px rgba(253, 224, 71, 0.14),
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ?? idle-farm ?? */
.if-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 520px;
  margin: 0 auto;
  padding: 0.75rem;
  border-radius: 16px;
  background:
    linear-gradient(165deg, rgba(56, 189, 248, 0.12) 0%, transparent 38%),
    linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, rgba(15, 23, 42, 0.04) 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.if-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(250, 204, 21, 0.08) 0%, transparent 40%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 23px,
      rgba(132, 204, 22, 0.03) 23px,
      rgba(132, 204, 22, 0.03) 24px
    );
  pointer-events: none;
  border-radius: inherit;
}

.if-wrap--shake {
  animation: if-shake 0.4s ease-out;
}

@keyframes if-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.if-screen-flash {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
}

.if-screen-flash--gain {
  background: radial-gradient(ellipse at center, rgba(250, 204, 21, 0.35) 0%, transparent 70%);
}

.if-screen-flash--plant {
  background: radial-gradient(ellipse at center, rgba(132, 204, 22, 0.28) 0%, transparent 70%);
}

.if-screen-flash--expand {
  background: radial-gradient(ellipse at center, rgba(74, 222, 128, 0.32) 0%, transparent 70%);
}

.if-screen-flash--milestone {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(250, 204, 21, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(163, 230, 53, 0.35) 0%, transparent 55%);
}

.if-screen-flash--on {
  animation: if-screen-flash 0.32s ease-out forwards;
}

@keyframes if-screen-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.if-toast {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 30;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, rgba(15, 23, 42, 0.92) 100%);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.if-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.if-toast--gain {
  color: #a3e635;
  border-color: rgba(163, 230, 53, 0.6);
  box-shadow: 0 0 18px rgba(163, 230, 53, 0.25), 0 6px 20px rgba(0, 0, 0, 0.2);
}

.if-toast--warn {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.2);
}

.if-toast--plant {
  color: #84cc16;
  border-color: rgba(132, 204, 22, 0.5);
}

.if-milestone {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 35;
  transform: translate(-50%, -50%) scale(0.6);
  padding: 0.75rem 1.4rem;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 2px solid rgba(250, 204, 21, 0.55);
  box-shadow:
    0 0 32px rgba(250, 204, 21, 0.35),
    0 8px 28px rgba(0, 0, 0, 0.35);
}

.if-milestone--show {
  animation: if-milestone-pop 1.5s cubic-bezier(0.2, 1.15, 0.35, 1) forwards;
}

.if-milestone--unlock {
  color: #fde047;
  text-shadow: 0 0 16px rgba(250, 204, 21, 0.5);
}

.if-milestone--earned {
  color: #a3e635;
  border-color: rgba(163, 230, 53, 0.55);
  text-shadow: 0 0 14px rgba(163, 230, 53, 0.45);
}

@keyframes if-milestone-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  35% { transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -52%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -68%) scale(0.92); }
}

.if-header {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.if-stat {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.if-stat--coins {
  border-color: rgba(250, 204, 21, 0.2);
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.25) 0%, rgba(15, 23, 42, 0.75) 100%);
}

.if-stat--earned {
  border-color: rgba(163, 230, 53, 0.18);
}

.if-stat-icon {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.if-stat-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.if-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.if-stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #facc15;
  text-shadow: 0 1px 8px rgba(250, 204, 21, 0.35);
  transition: transform 0.15s ease, color 0.15s ease;
}

.if-stat-value--warn {
  animation: if-stat-warn 0.55s ease-out;
  color: #f87171 !important;
  text-shadow: 0 0 12px rgba(248, 113, 113, 0.55);
}

@keyframes if-stat-warn {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.14); }
  50% { transform: scale(0.96); }
  75% { transform: scale(1.08); }
}

.if-hud-crop {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(132, 204, 22, 0.12) 0%, rgba(30, 41, 59, 0.5) 100%);
  border: 1px solid rgba(132, 204, 22, 0.22);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.if-hud-crop-emoji {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
}

.if-hud-crop-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.if-hud-crop-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.if-hud-crop-meta {
  font-size: 0.82rem;
  font-weight: 700;
  color: #d9f99d;
}

.if-stat-value--earned {
  color: #a3e635;
  text-shadow: 0 1px 8px rgba(163, 230, 53, 0.3);
}

.if-stat-value--pop {
  animation: if-stat-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes if-stat-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.if-section-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.if-crop-bar {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 0.7rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.if-crop-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
}

@media (max-width: 420px) {
  .if-crop-btns { grid-template-columns: repeat(2, 1fr); }
}

.if-crop-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.4rem;
  min-height: 52px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.4) 0%, rgba(15, 23, 42, 0.5) 100%);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.if-crop-btn:hover:not(:disabled) {
  border-color: #84cc16;
  background: linear-gradient(180deg, rgba(132, 204, 22, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(132, 204, 22, 0.2);
}

.if-crop-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.if-crop-btn--active {
  border-color: #a3e635;
  background: linear-gradient(180deg, rgba(132, 204, 22, 0.22) 0%, rgba(74, 222, 128, 0.12) 100%);
  box-shadow: 0 0 0 2px rgba(163, 230, 53, 0.3), 0 4px 16px rgba(132, 204, 22, 0.25);
}

.if-crop-btn--locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.if-crop-emoji {
  font-size: 1.45rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.if-crop-name { font-size: 0.72rem; font-weight: 700; }
.if-crop-meta { font-size: 0.62rem; color: var(--text-muted); text-align: center; line-height: 1.2; }

.if-farm {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding: 0.65rem;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(120, 53, 15, 0.18) 0%, rgba(34, 197, 94, 0.08) 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 11px,
      rgba(120, 53, 15, 0.06) 11px,
      rgba(120, 53, 15, 0.06) 12px
    );
  border: 1px solid rgba(132, 204, 22, 0.15);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.12);
}

.if-tap-hint {
  position: absolute;
  bottom: -0.15rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fef9c3;
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.92) 0%, rgba(69, 26, 3, 0.95) 100%);
  border: 1px solid rgba(250, 204, 21, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 14px rgba(250, 204, 21, 0.2);
  white-space: nowrap;
  pointer-events: none;
  animation: if-tap-hint-pulse 1.4s ease-in-out infinite;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.if-tap-hint--hide {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  animation: none;
}

@keyframes if-tap-hint-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.04); }
}

@media (max-width: 380px) {
  .if-farm { grid-template-columns: repeat(2, 1fr); }
}

.if-plot {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  border: 2px solid #78350f;
  border-radius: 14px;
  background: linear-gradient(180deg, #a16207 0%, #78350f 55%, #5c2d0e 100%);
  cursor: pointer;
  padding: 0.45rem;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  overflow: hidden;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25);
  -webkit-tap-highlight-color: transparent;
  min-height: 52px;
  touch-action: manipulation;
}

.if-plot::before {
  content: '';
  position: absolute;
  inset: 12% 10% 18%;
  border-radius: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.12) 0,
    rgba(0, 0, 0, 0.12) 3px,
    transparent 3px,
    transparent 9px
  );
  pointer-events: none;
  opacity: 0.5;
}

.if-plot::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 8%;
  right: 8%;
  height: 28%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 100%);
  pointer-events: none;
}

.if-plot:hover { transform: scale(1.04); }
.if-plot:active { transform: scale(0.95); }

.if-plot--pop {
  animation: if-plot-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes if-plot-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.if-plot--empty {
  background: linear-gradient(180deg, #b45309 0%, #78350f 55%, #5c2d0e 100%);
}

.if-plot--hint {
  animation: if-plot-hint 1.1s ease-in-out infinite;
  z-index: 2;
}

@keyframes if-plot-hint {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(250, 204, 21, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.3),
      inset 0 2px 0 rgba(255, 255, 255, 0.12);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(250, 204, 21, 0.45),
      0 6px 18px rgba(250, 204, 21, 0.25),
      inset 0 2px 0 rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
  }
}

.if-plot--growing {
  background: linear-gradient(180deg, #65a30d 0%, #4d7c0f 55%, #365314 100%);
  border-color: #84cc16;
  box-shadow:
    0 4px 12px rgba(74, 222, 128, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -3px 6px rgba(0, 0, 0, 0.2);
}

.if-plot--growing::before {
  opacity: 0.25;
}

.if-plot--sprout .if-plot-emoji {
  font-size: 1.2rem;
  opacity: 0.85;
  animation: if-sprout-bob 1.6s ease-in-out infinite;
}

@keyframes if-sprout-bob {
  0%, 100% { transform: translateY(0) scale(0.9); }
  50% { transform: translateY(-3px) scale(1); }
}

.if-plot--ready {
  background: linear-gradient(180deg, #84cc16 0%, #65a30d 50%, #4d7c0f 100%);
  border-color: #d9f99d;
  animation: if-sparkle 1.2s ease-in-out infinite;
  box-shadow:
    0 0 20px rgba(163, 230, 53, 0.55),
    0 4px 16px rgba(250, 204, 21, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.18);
}

.if-plot--ready::before {
  opacity: 0;
}

.if-plot-glow {
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.if-plot--ready .if-plot-glow {
  opacity: 1;
  background: radial-gradient(circle at center, rgba(250, 204, 21, 0.35) 0%, transparent 70%);
  animation: if-harvest-glow 1.4s ease-in-out infinite;
}

@keyframes if-harvest-glow {
  0%, 100% { transform: scale(0.95); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes if-sparkle {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(163, 230, 53, 0.45),
      0 4px 12px rgba(250, 204, 21, 0.15),
      inset 0 2px 0 rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow:
      0 0 28px rgba(234, 179, 8, 0.75),
      0 6px 20px rgba(250, 204, 21, 0.35),
      inset 0 2px 0 rgba(255, 255, 255, 0.22);
  }
}

.if-plot-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.if-plot-flash--harvest {
  background: radial-gradient(circle at center, rgba(250, 204, 21, 0.8) 0%, rgba(163, 230, 53, 0.4) 40%, transparent 70%);
}

.if-plot-flash--plant {
  background: radial-gradient(circle at center, rgba(132, 204, 22, 0.5) 0%, transparent 65%);
}

.if-plot-flash--on {
  animation: if-plot-flash 0.28s ease-out forwards;
}

@keyframes if-plot-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.if-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.if-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  opacity: 1;
  animation: if-particle-fly 0.6s ease-out forwards;
}

.if-particle--harvest {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.6);
}

.if-particle--plant {
  border-radius: 2px;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
}

.if-particle--expand {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

@keyframes if-particle-fly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.2);
    opacity: 0;
  }
}

.if-plot-emoji {
  position: relative;
  z-index: 1;
  font-size: 1.75rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.2s ease;
}

.if-plot--ready .if-plot-emoji {
  animation: if-crop-ready-bounce 1.8s ease-in-out infinite;
}

@keyframes if-crop-ready-bounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.08) rotate(-3deg); }
  60% { transform: scale(1.05) rotate(3deg); }
}

.if-plot-label {
  position: relative;
  z-index: 1;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fef9c3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.if-plot-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.if-plot-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #a3e635, #facc15, #84cc16);
  width: 0%;
  transition: width 0.3s linear;
  box-shadow: 0 0 8px rgba(163, 230, 53, 0.5);
}

.if-coin-pop {
  position: absolute;
  z-index: 25;
  transform: translate(-50%, 0);
  font-size: 0.85rem;
  font-weight: 800;
  pointer-events: none;
  white-space: nowrap;
  animation: if-coin-pop 0.85s ease-out forwards;
}

.if-coin-pop--gain {
  color: #facc15;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.if-coin-pop--plant {
  color: #a3e635;
  text-shadow: 0 0 8px rgba(163, 230, 53, 0.5);
}

@keyframes if-coin-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -36px) scale(0.9);
  }
}

.if-shop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.if-expand-btn {
  position: relative;
  width: 100%;
  font-size: 0.92rem;
  font-weight: 700;
  min-height: 52px;
  border-radius: 12px;
  background: linear-gradient(180deg, #84cc16 0%, #4d7c0f 55%, #365314 100%);
  border: 1px solid rgba(163, 230, 53, 0.5);
  box-shadow:
    0 4px 16px rgba(74, 222, 128, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.if-expand-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
}

.if-expand-btn:hover:not(:disabled)::before {
  animation: if-expand-shine 0.7s ease-out;
}

@keyframes if-expand-shine {
  0% { left: -100%; }
  100% { left: 150%; }
}

.if-expand-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(74, 222, 128, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.if-expand-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.if-expand-btn--cant-afford {
  filter: saturate(0.55) brightness(0.85);
  cursor: pointer;
}

.if-expand-btn--flash {
  animation: if-expand-flash 0.45s ease-out;
}

@keyframes if-expand-flash {
  0% { box-shadow: 0 0 0 0 rgba(163, 230, 53, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.3); }
  40% { box-shadow: 0 0 28px 6px rgba(163, 230, 53, 0.65), inset 0 0 30px rgba(255, 255, 255, 0.4); }
  100% { box-shadow: 0 4px 16px rgba(74, 222, 128, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
}

.if-btn--deny {
  animation: if-btn-deny 0.45s ease-out;
}

@keyframes if-btn-deny {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.if-expand-btn--pop {
  animation: if-expand-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes if-expand-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.if-expand-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.if-expand-info {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- gravity-golf --- */
.gravity-golf-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.gravity-golf-wrap--shake {
  animation: gravity-golf-shake 0.45s ease-out;
}

@keyframes gravity-golf-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-5px, 2px); }
  30% { transform: translate(5px, -3px); }
  45% { transform: translate(-4px, -3px); }
  60% { transform: translate(4px, 2px); }
  75% { transform: translate(-2px, 1px); }
}

.gravity-golf-wrap--active .gravity-golf-canvas {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(250, 204, 21, 0.45),
    0 0 28px rgba(124, 58, 237, 0.28);
}

.gravity-golf-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: crosshair;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(148, 163, 184, 0.12),
    inset 0 0 40px rgba(124, 58, 237, 0.04);
  transition: box-shadow 0.15s ease;
}

@media (max-width: 640px) {
  .gravity-golf-wrap {
    padding: 4px 0;
  }

  .gravity-golf-canvas {
    cursor: grab;
    min-height: 240px;
  }

  .gravity-golf-wrap--active .gravity-golf-canvas {
    cursor: grabbing;
  }
}

/* --- drift-park --- */
.drift-park-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 0;
  touch-action: none;
}

.drift-park-wrap--shake {
  animation: drift-park-shake 0.45s ease-out;
}

@keyframes drift-park-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-4px, 2px); }
  30% { transform: translate(4px, -2px); }
  45% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 2px); }
  75% { transform: translate(-2px, 1px); }
}

.drift-park-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.2);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.drift-park-canvas:active {
  transform: scale(0.985);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 6px 24px rgba(0, 0, 0, 0.3);
}

.drift-park-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  touch-action: none;
}

.drift-park-btn {
  flex: 1;
  max-width: 160px;
  min-height: 52px;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 20px;
  border-radius: 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow:
    0 4px 14px rgba(59, 130, 246, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.drift-park-btn.dp-steer--active {
  transform: translateY(1px) scale(0.97);
  box-shadow:
    0 2px 8px rgba(59, 130, 246, 0.45),
    inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

.drift-park-btn:hover {
  transform: translateY(-1px);
}

.drift-park-btn:active,
.drift-park-btn.dp-steer--active {
  transform: translateY(1px) scale(0.97);
}

@media (min-width: 769px) {
  .drift-park-controls {
    display: none;
  }
}

@media (max-width: 640px), (hover: none) {
  .drift-park-canvas {
    cursor: pointer;
  }
}

/* Fruit Slice */
.fruit-slice-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 0;
}

.fruit-slice-timer {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.18), rgba(15, 23, 42, 0.35));
  border: 1px solid rgba(74, 222, 128, 0.35);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.fruit-slice-timer--urgent {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.55);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.22), rgba(15, 23, 42, 0.4));
  animation: fruit-slice-pulse 0.7s ease-in-out infinite alternate;
}

@keyframes fruit-slice-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.fruit-slice-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  touch-action: none;
  cursor: crosshair;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(251, 146, 60, 0.08);
}

/* Spot the Difference */
.sd-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 4px 0;
  touch-action: manipulation;
}

.sd-hud {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 640px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.55), rgba(30, 41, 59, 0.42));
  border: 1px solid rgba(56, 189, 248, 0.22);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sd-hud-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sd-stage-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e0f2fe;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
}

.sd-found-row {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.sd-found-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, 0.55);
  background: rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sd-found-dot.is-next {
  border-color: rgba(250, 204, 21, 0.85);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.45);
  animation: sd-dot-pulse 1.1s ease-in-out infinite;
}

.sd-found-dot.is-found {
  border-color: #4ade80;
  background: linear-gradient(145deg, #4ade80, #22c55e);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.55);
  transform: scale(1.08);
}

.sd-combo-badge {
  flex-shrink: 0;
  min-width: 0;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: transparent;
  transition: color 0.15s ease, transform 0.15s ease;
}

.sd-combo-badge.is-active {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
  animation: sd-combo-pop 0.28s ease;
}

.sd-combo-badge.is-hot {
  color: #f97316;
  text-shadow: 0 0 14px rgba(249, 115, 22, 0.65);
}

.sd-time-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sd-time-bar {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.sd-time-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #22d3ee);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
  transition: width 0.12s linear, background 0.25s ease, box-shadow 0.25s ease;
}

.sd-time-fill--warn {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
}

.sd-time-fill--urgent {
  background: linear-gradient(90deg, #f87171, #ef4444);
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.55);
  animation: sd-time-urgent 0.65s ease-in-out infinite;
}

.sd-time-label {
  flex-shrink: 0;
  min-width: 2.6rem;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
}

.sd-remaining {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.sd-remaining--done {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.35);
}

.sd-flash {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.sd-flash.is-correct {
  animation: sd-flash-correct 0.3s ease;
}

.sd-flash.is-wrong {
  animation: sd-flash-wrong 0.34s ease;
}

.sd-flash.is-clear {
  animation: sd-flash-clear 0.52s ease;
}

.sd-flash.is-gameover {
  animation: sd-flash-gameover 0.68s ease;
}

.sd-panels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.sd-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sd-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sd-canvas-shell {
  position: relative;
  max-width: min(100%, 300px);
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.18),
    0 10px 28px rgba(15, 23, 42, 0.38);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sd-wrap.sd-stage-clear .sd-canvas-shell {
  animation: sd-panel-pop 0.55s ease;
}

.sd-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
  background: #7ec8e8;
}

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

.sd-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pc, #4ade80);
  box-shadow: 0 0 8px var(--pc, #4ade80);
  opacity: 0.95;
  animation: sd-particle 0.7s ease-out forwards;
}

.sd-score-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  font-weight: 700;
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.65);
  animation: sd-score-pop 0.72s ease-out forwards;
  pointer-events: none;
}

.sd-score-pop--combo {
  font-size: 1.15rem;
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.7);
}

.sd-score-pop--find {
  font-size: 0.92rem;
  color: #86efac;
}

.sd-score-pop--wrong {
  font-size: 0.95rem;
  color: #f87171;
  text-shadow: 0 0 12px rgba(248, 113, 113, 0.65);
  animation: sd-score-pop-wrong 0.72s ease-out forwards;
}

.sd-ripple {
  position: absolute;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  pointer-events: none;
}

.sd-ripple--wrong {
  border: 3px solid rgba(248, 113, 113, 0.85);
  animation: sd-ripple-wrong 0.5s ease-out forwards;
}

.sd-ripple--find {
  border: 3px solid rgba(74, 222, 128, 0.9);
  animation: sd-ripple-find 0.48s ease-out forwards;
}

.sd-celebrate {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 6;
  padding: 14px 28px;
  border-radius: 16px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fef9c3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.92), rgba(14, 165, 233, 0.88));
  box-shadow:
    0 12px 36px rgba(34, 197, 94, 0.45),
    0 0 0 2px rgba(255, 255, 255, 0.25);
  pointer-events: none;
  animation: sd-celebrate-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sd-celebrate--out {
  animation: sd-celebrate-out 0.3s ease forwards;
}

.sd-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
}

.sd-status {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  transition: color 0.2s ease;
}

.sd-status.sd-status--urgent {
  color: #f87171;
  font-weight: 600;
}

.sd-status.sd-status--wrong {
  color: #f87171;
  font-weight: 700;
  animation: sd-status-wrong 0.35s ease;
}

.sd-hint-btn {
  min-width: 132px;
  min-height: 48px;
  padding: 10px 18px;
  font-size: 0.95rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
}

.sd-hint-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.sd-hint-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28);
}

.sd-wrap.sd-penalty {
  animation: sd-shake 0.35s ease;
}

.sd-wrap.sd-ending {
  animation: sd-shake 0.5s ease;
}

@keyframes sd-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes sd-flash-correct {
  0% { opacity: 0; background: transparent; }
  35% { opacity: 0.5; background: rgba(74, 222, 128, 0.24); }
  100% { opacity: 0; background: transparent; }
}

@keyframes sd-flash-wrong {
  0% { opacity: 0; background: transparent; }
  40% { opacity: 0.6; background: rgba(248, 113, 113, 0.28); }
  100% { opacity: 0; background: transparent; }
}

@keyframes sd-flash-clear {
  0% { opacity: 0; background: transparent; }
  30% { opacity: 0.55; background: rgba(74, 222, 128, 0.22); }
  60% { opacity: 0.4; background: rgba(250, 204, 21, 0.16); }
  100% { opacity: 0; background: transparent; }
}

@keyframes sd-flash-gameover {
  0% { opacity: 0; background: transparent; }
  25% { opacity: 0.7; background: rgba(248, 113, 113, 0.24); }
  55% { opacity: 0.45; background: rgba(99, 102, 241, 0.16); }
  100% { opacity: 0; background: transparent; }
}

@keyframes sd-particle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.2);
  }
}

@keyframes sd-score-pop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.6);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -110%) scale(0.85);
  }
}

@keyframes sd-panel-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes sd-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.85; }
}

@keyframes sd-combo-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes sd-combo-shell {
  0% { transform: scale(1); }
  45% { transform: scale(1.025); box-shadow: 0 0 24px rgba(251, 191, 36, 0.35); }
  100% { transform: scale(1); }
}

@keyframes sd-time-urgent {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@keyframes sd-tap-hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

@keyframes sd-tap-hint-out {
  to { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.92); }
}

@keyframes sd-ripple-wrong {
  0% { opacity: 0.95; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(2.2); }
}

@keyframes sd-ripple-find {
  0% { opacity: 0.95; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.6); }
}

@keyframes sd-celebrate-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes sd-celebrate-out {
  to { opacity: 0; transform: translate(-50%, -60%) scale(1.08); }
}

@keyframes sd-score-pop-wrong {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.7); }
  35% { opacity: 1; transform: translate(-50%, -65%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(0.9); }
}

@keyframes sd-status-wrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ?? tower-defense ?? */
.td-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 520px;
  margin: 0 auto;
}

.tower-defense-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.18),
    0 10px 36px rgba(0, 0, 0, 0.42);
  background: #052e16;
}

.td-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.td-map-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.td-map-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.td-map-btn:hover:not(:disabled) {
  border-color: #7c3aed;
  color: var(--text);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.td-map-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.td-map-btn--active {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.35), 0 4px 14px rgba(124, 58, 237, 0.2);
}

.td-map-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.td-tower-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.td-tower-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.25rem;
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.td-tower-btn:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.td-tower-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.td-tower-btn--active {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.3), 0 4px 12px rgba(124, 58, 237, 0.15);
}

.td-tower-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.td-tower-icon {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor, inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.td-tower-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
}

.td-tower-cost {
  font-size: 0.65rem;
  color: #fbbf24;
  font-weight: 700;
}

.td-action-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.td-action-btn {
  flex: 1;
  min-width: 90px;
  min-height: 44px;
  font-size: 0.78rem;
  padding: 0.45rem 0.5rem;
  transition: transform 0.1s;
}

.td-action-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.td-wave-btn {
  flex: 1.2;
  min-width: 110px;
  min-height: 44px;
  transition: transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}

.td-wave-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.td-wave-btn:disabled {
  box-shadow: none;
}

.td-tower-btn--cant-afford .td-tower-cost {
  color: #f87171;
}

.td-tower-btn--cant-afford {
  border-color: rgba(248, 113, 113, 0.35);
  opacity: 0.85;
}

.td-tower-btn--shake {
  animation: td-shake 0.32s ease;
}

.td-wrap--afford-shake {
  animation: td-shake 0.32s ease;
}

@keyframes td-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@media (max-width: 420px) {
  .td-tower-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .td-action-row {
    gap: 0.35rem;
  }

  .td-action-btn,
  .td-wave-btn {
    min-height: 48px;
    font-size: 0.82rem;
  }
}

/* --- merge-drop --- */
.merge-drop-canvas {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: crosshair;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.28),
    0 0 32px rgba(139, 92, 246, 0.12),
    0 14px 36px rgba(15, 10, 40, 0.48);
  background: #1a1638;
  transition: box-shadow 0.2s ease;
}

.merge-drop-canvas:active {
  box-shadow:
    0 0 0 1px rgba(196, 181, 253, 0.42),
    0 0 40px rgba(167, 139, 250, 0.18),
    0 14px 36px rgba(15, 10, 40, 0.52);
}

/* --- snake --- */
.snake-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  touch-action: none;
}

.snake-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.22),
    0 0 24px rgba(34, 197, 94, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.42);
  background: #060d18;
}

.snake-dpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 8px;
  max-width: 240px;
  margin: 12px auto 0;
  touch-action: none;
}

.snake-dpad-btn {
  min-height: 52px;
  font-size: 22px;
  padding: 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.32);
}

.snake-dpad-btn.sn-up {
  grid-column: 2;
}

.snake-dpad-btn.sn-left {
  grid-column: 1;
  grid-row: 2;
}

.snake-dpad-btn.sn-down {
  grid-column: 2;
  grid-row: 2;
}

.snake-dpad-btn.sn-right {
  grid-column: 3;
  grid-row: 2;
}

.snake-dpad-btn:hover {
  transform: translateY(-1px);
}

.snake-dpad-btn:active,
.snake-dpad-btn.snake-dpad-btn--pulse {
  transform: translateY(1px) scale(0.96);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.36);
}

@media (min-width: 769px) {
  .snake-dpad {
    display: none;
  }
}

/* --- tetromino --- */
.tetromino-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
  touch-action: manipulation;
}

.tetromino-canvas {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.2),
    0 4px 0 rgba(0, 0, 0, 0.35),
    0 18px 42px rgba(0, 0, 0, 0.48);
  background: #080a10;
}

.tetromino-pop {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.6);
  pointer-events: none;
  font: 800 1.35rem/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.22s cubic-bezier(0.22, 1.2, 0.36, 1);
  z-index: 2;
}

.tetromino-pop--show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.tetromino-pop--tetris {
  color: #fef08a;
  font-size: 1.65rem;
}

.tetromino-pop--combo {
  color: #67e8f9;
}

.tetromino-pop--lines {
  color: #e2e8f0;
  font-size: 1.1rem;
}

.tetromino-pad {
  display: grid;
  grid-template-columns: repeat(5, minmax(52px, 1fr));
  gap: 8px;
  width: min(100%, 320px);
  padding: 0 4px 4px;
}

.tetromino-pad-btn {
  min-height: 48px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.28), rgba(8, 145, 178, 0.42));
  color: #ecfeff;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 4px 0 rgba(8, 47, 73, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.08s ease, filter 0.08s ease, box-shadow 0.08s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tetromino-pad-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(8, 47, 73, 0.45);
  filter: brightness(1.08);
}

.tetromino-pad-hard {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.35), rgba(202, 138, 4, 0.5));
  color: #fef9c3;
}

@media (min-width: 720px) {
  .tetromino-pad {
    display: none;
  }
}

/* --- flappy --- */
.flappy-wrap {
  touch-action: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: min(72vh, 420px);
  padding: 12px 8px 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.flappy-wrap:active .flappy-canvas {
  transform: scale(0.985);
}

.flappy-canvas {
  display: block;
  max-width: 100%;
  width: min(100%, 520px);
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  transition: transform 0.08s ease-out;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.22),
    0 14px 36px rgba(14, 116, 144, 0.28);
  background: #7dd3fc;
}

/* --- dino-run --- */
.dino-run-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.dino-run-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.22),
    0 14px 36px rgba(88, 28, 135, 0.28);
  background: #bae6fd;
}

.dino-run-controls {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  justify-content: center;
  touch-action: none;
}

.dino-run-btn {
  flex: 1;
  min-height: 52px;
  font-size: 17px;
  font-weight: 600;
  padding: 12px 10px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  box-shadow: 0 4px 14px rgba(88, 28, 135, 0.22);
}

.dino-run-btn:hover {
  transform: translateY(-1px);
}

.dino-run-btn:active,
.dino-run-btn.dino-run-btn-active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 2px 6px rgba(88, 28, 135, 0.28);
}

.dino-run-btn-jump {
  background: linear-gradient(180deg, #c084fc 0%, #a855f7 55%, #7e22ce 100%);
  border-color: rgba(126, 34, 206, 0.5);
}

.dino-run-btn-duck {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

/* --- asteroids --- */
.asteroids-wrap {
  touch-action: none;
  display: flex;
  justify-content: center;
}

.asteroids-canvas {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.22),
    0 14px 36px rgba(15, 23, 42, 0.55);
  background: #03050a;
}

/* --- jump-up --- */
.jump-up-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.jump-up-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.28),
    0 14px 36px rgba(76, 29, 149, 0.35);
  background: #312e81;
}

.jump-up-controls {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  justify-content: center;
  touch-action: none;
  padding: 0 4px;
}

.jump-up-btn {
  flex: 1;
  max-width: 168px;
  min-height: 52px;
  font-size: 26px;
  padding: 16px 14px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, border-color 0.1s ease;
  box-shadow: 0 4px 14px rgba(76, 29, 149, 0.24);
  border: 2px solid rgba(167, 139, 250, 0.35);
}

.jump-up-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.32);
}

.jump-up-btn:active,
.jump-up-btn.is-active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 2px 8px rgba(76, 29, 149, 0.35);
  border-color: rgba(196, 181, 253, 0.75);
  background: rgba(109, 40, 217, 0.22);
}

/* --- stack-tower --- */
.stack-tower-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.stack-tower-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.28),
    0 14px 36px rgba(49, 46, 129, 0.4);
  background: #0b1224;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.stack-tower-canvas:active {
  transform: scale(0.985);
}

.stack-tower-controls {
  display: flex;
  margin-top: 10px;
  justify-content: center;
  touch-action: none;
}

.stack-tower-drop-btn {
  flex: 1;
  min-height: 56px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 14px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, #818cf8 0%, #6366f1 45%, #4f46e5 100%);
  border-color: rgba(79, 70, 229, 0.55);
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}

.stack-tower-drop-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.stack-tower-drop-btn:active,
.stack-tower-drop-btn--active {
  transform: translateY(2px) scale(0.97);
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.35),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.stack-tower-drop-btn--pulse {
  animation: st-drop-pulse 1.4s ease-in-out infinite;
}

@keyframes st-drop-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 4px 24px rgba(129, 140, 248, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
}

@media (max-width: 480px) {
  .stack-tower-drop-btn {
    min-height: 52px;
    font-size: 17px;
  }
}

/* --- yacht-dice upgrade (juice / FX) --- */
@keyframes yd-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes yd-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes yd-particle {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.15);
  }
}

@keyframes yd-score-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.65);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.28);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -18px) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -46px) scale(0.82);
  }
}

@keyframes yd-cat-pop {
  0% { transform: scale(1); background-color: transparent; }
  35% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes yd-bonus-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
  50% { box-shadow: 0 0 16px 3px rgba(34, 197, 94, 0.45); }
}

@keyframes yd-celebrate-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1.12);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -62%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -72%) scale(0.92);
  }
}

.yd-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 4;
}

.yd-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: inherit;
}

.yd-flash--score {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(56, 189, 248, 0.35), transparent 70%);
}

.yd-flash--bonus {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(251, 191, 36, 0.38), transparent 70%);
}

.yd-flash--win {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(34, 197, 94, 0.4), transparent 72%);
}

.yd-flash--lose {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(248, 113, 113, 0.38), transparent 72%);
}

.yd-flash--tie {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(167, 139, 250, 0.35), transparent 72%);
}

.yd-flash--solo {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(56, 189, 248, 0.32), transparent 72%);
}

.yd-flash--on {
  animation: yd-flash 0.4s ease-out forwards;
}

.yd-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.yd-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  animation: yd-particle 0.55s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

.yd-score-pop {
  position: absolute;
  transform: translate(-50%, 0);
  font-size: 1.15rem;
  font-weight: 800;
  color: #38bdf8;
  text-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}

.yd-score-pop--on {
  animation: yd-score-pop 0.82s ease-out forwards;
}

.yd-score-pop--big {
  color: #fbbf24;
  font-size: 1.45rem;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.55), 0 2px 8px rgba(15, 23, 42, 0.35);
}

.yd-score-pop--mid {
  color: #38bdf8;
  font-size: 1.25rem;
}

.yd-score-pop--zero {
  color: #94a3b8;
  font-size: 1rem;
}

.yd-celebrate {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 8;
  white-space: nowrap;
  text-shadow: 0 4px 18px rgba(15, 23, 42, 0.45);
}

.yd-celebrate--on {
  animation: yd-celebrate-pop 0.92s ease-out forwards;
}

.yd-celebrate--win {
  color: #4ade80;
}

.yd-celebrate--best {
  color: #fbbf24;
}

.yd-celebrate--solo {
  color: #38bdf8;
}

.yd-celebrate--lose {
  color: #f87171;
}

.yd-celebrate--tie {
  color: #c4b5fd;
}

.yd-root--shake {
  animation: yd-shake 0.48s ease;
}

.yd-root--gameover {
  filter: saturate(0.82) brightness(0.94);
  transition: filter 0.45s ease;
}

.yd-cat-row--just-scored {
  animation: yd-cat-pop 0.52s ease-out;
  background: color-mix(in srgb, #38bdf8 22%, transparent) !important;
}

.yd-bonus-row--earned {
  animation: yd-bonus-glow 0.8s ease-in-out 2;
  background: color-mix(in srgb, #22c55e 18%, transparent) !important;
}

@media (max-width: 480px) {
  .yd-die {
    width: 64px;
    height: 64px;
  }

  .yd-pip {
    width: 11px;
    height: 11px;
  }

  .yd-dice-row {
    gap: 0.55rem;
  }

  .yd-cat-row {
    padding: 0.5rem 0.55rem;
    min-height: 44px;
  }

  .yd-mode-btn,
  .yd-actions .btn-primary {
    min-height: 44px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  .yd-boards--dual {
    grid-template-columns: 1fr;
  }

  .yd-flow {
    font-size: 0.72rem;
  }
}

/* --- falling-dodge --- */
.falling-dodge-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.falling-dodge-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.28),
    0 14px 36px rgba(30, 27, 75, 0.45);
  background: #0c1222;
}

.falling-dodge-controls {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  justify-content: center;
  touch-action: none;
}

.falling-dodge-btn {
  flex: 1;
  max-width: 140px;
  font-size: 22px;
  padding: 14px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 4px 12px rgba(49, 46, 129, 0.25);
}

.falling-dodge-btn:hover {
  transform: translateY(-1px);
}

.falling-dodge-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 6px rgba(49, 46, 129, 0.3);
}

/* --- worm-arena --- */
.worm-arena-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  touch-action: none;
}

.worm-arena-canvas {
  display: block;
  width: 100%;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.22),
    0 14px 36px rgba(7, 16, 24, 0.55);
  background: #071018;
}

.worm-arena-boost {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  min-width: 88px;
  min-height: 44px;
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #422006;
  background: linear-gradient(180deg, #fde047 0%, #facc15 45%, #eab308 100%);
  box-shadow:
    0 4px 14px rgba(234, 179, 8, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.worm-arena-boost:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.worm-arena-boost:active,
.worm-arena-boost--active {
  transform: translateY(1px) scale(0.97);
  box-shadow:
    0 2px 8px rgba(234, 179, 8, 0.35),
    inset 0 2px 4px rgba(0, 0, 0, 0.12);
  filter: brightness(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .worm-arena-boost {
    display: none;
  }
}

@media (max-width: 480px) {
  .worm-arena-boost {
    min-width: 96px;
    min-height: 48px;
    font-size: 15px;
    left: 10px;
    bottom: 10px;
  }
}

/* --- flappy --- */
.flappy-wrap {
  touch-action: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: min(72vh, 420px);
  padding: 12px 8px 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.flappy-wrap:active .flappy-canvas {
  transform: scale(0.985);
}

.flappy-canvas {
  display: block;
  max-width: 100%;
  width: min(100%, 520px);
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  transition: transform 0.08s ease-out;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.22),
    0 14px 36px rgba(14, 116, 144, 0.28);
  background: #7dd3fc;
}

/* --- dino-run --- */
.dino-run-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.dino-run-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.22),
    0 14px 36px rgba(88, 28, 135, 0.28);
  background: #bae6fd;
}

.dino-run-controls {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  justify-content: center;
  touch-action: none;
}

.dino-run-btn {
  flex: 1;
  min-height: 52px;
  font-size: 17px;
  font-weight: 600;
  padding: 12px 10px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  box-shadow: 0 4px 14px rgba(88, 28, 135, 0.22);
}

.dino-run-btn:hover {
  transform: translateY(-1px);
}

.dino-run-btn:active,
.dino-run-btn.dino-run-btn-active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 2px 6px rgba(88, 28, 135, 0.28);
}

.dino-run-btn-jump {
  background: linear-gradient(180deg, #c084fc 0%, #a855f7 55%, #7e22ce 100%);
  border-color: rgba(126, 34, 206, 0.5);
}

.dino-run-btn-duck {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

/* --- asteroids --- */
.asteroids-wrap {
  touch-action: none;
  display: flex;
  justify-content: center;
}

.asteroids-canvas {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.22),
    0 14px 36px rgba(15, 23, 42, 0.55);
  background: #03050a;
}

/* --- jump-up --- */
.jump-up-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.jump-up-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.28),
    0 14px 36px rgba(76, 29, 149, 0.35);
  background: #312e81;
}

.jump-up-controls {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  justify-content: center;
  touch-action: none;
  padding: 0 4px;
}

.jump-up-btn {
  flex: 1;
  max-width: 168px;
  min-height: 52px;
  font-size: 26px;
  padding: 16px 14px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, border-color 0.1s ease;
  box-shadow: 0 4px 14px rgba(76, 29, 149, 0.24);
  border: 2px solid rgba(167, 139, 250, 0.35);
}

.jump-up-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.32);
}

.jump-up-btn:active,
.jump-up-btn.is-active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 2px 8px rgba(76, 29, 149, 0.35);
  border-color: rgba(196, 181, 253, 0.75);
  background: rgba(109, 40, 217, 0.22);
}

/* --- stack-tower --- */
.stack-tower-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.stack-tower-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.28),
    0 14px 36px rgba(49, 46, 129, 0.4);
  background: #0b1224;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.stack-tower-canvas:active {
  transform: scale(0.985);
}

.stack-tower-controls {
  display: flex;
  margin-top: 10px;
  justify-content: center;
  touch-action: none;
}

.stack-tower-drop-btn {
  flex: 1;
  min-height: 56px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 14px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, #818cf8 0%, #6366f1 45%, #4f46e5 100%);
  border-color: rgba(79, 70, 229, 0.55);
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}

.stack-tower-drop-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.stack-tower-drop-btn:active,
.stack-tower-drop-btn--active {
  transform: translateY(2px) scale(0.97);
  box-shadow:
    0 2px 8px rgba(99, 102, 241, 0.35),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.stack-tower-drop-btn--pulse {
  animation: st-drop-pulse 1.4s ease-in-out infinite;
}

@keyframes st-drop-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 4px 24px rgba(129, 140, 248, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
}

@media (max-width: 480px) {
  .stack-tower-drop-btn {
    min-height: 52px;
    font-size: 17px;
  }
}

/* --- yacht-dice upgrade (juice / FX) --- */
@keyframes yd-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes yd-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes yd-particle {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.15);
  }
}

@keyframes yd-score-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.65);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.28);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -18px) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -46px) scale(0.82);
  }
}

@keyframes yd-cat-pop {
  0% { transform: scale(1); background-color: transparent; }
  35% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes yd-bonus-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
  50% { box-shadow: 0 0 16px 3px rgba(34, 197, 94, 0.45); }
}

@keyframes yd-celebrate-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1.12);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -62%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -72%) scale(0.92);
  }
}

.yd-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 4;
}

.yd-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: inherit;
}

.yd-flash--score {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(56, 189, 248, 0.35), transparent 70%);
}

.yd-flash--bonus {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(251, 191, 36, 0.38), transparent 70%);
}

.yd-flash--win {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(34, 197, 94, 0.4), transparent 72%);
}

.yd-flash--lose {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(248, 113, 113, 0.38), transparent 72%);
}

.yd-flash--tie {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(167, 139, 250, 0.35), transparent 72%);
}

.yd-flash--solo {
  background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(56, 189, 248, 0.32), transparent 72%);
}

.yd-flash--on {
  animation: yd-flash 0.4s ease-out forwards;
}

.yd-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.yd-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  animation: yd-particle 0.55s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

.yd-score-pop {
  position: absolute;
  transform: translate(-50%, 0);
  font-size: 1.15rem;
  font-weight: 800;
  color: #38bdf8;
  text-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}

.yd-score-pop--on {
  animation: yd-score-pop 0.82s ease-out forwards;
}

.yd-score-pop--big {
  color: #fbbf24;
  font-size: 1.45rem;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.55), 0 2px 8px rgba(15, 23, 42, 0.35);
}

.yd-score-pop--mid {
  color: #38bdf8;
  font-size: 1.25rem;
}

.yd-score-pop--zero {
  color: #94a3b8;
  font-size: 1rem;
}

.yd-celebrate {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 8;
  white-space: nowrap;
  text-shadow: 0 4px 18px rgba(15, 23, 42, 0.45);
}

.yd-celebrate--on {
  animation: yd-celebrate-pop 0.92s ease-out forwards;
}

.yd-celebrate--win {
  color: #4ade80;
}

.yd-celebrate--best {
  color: #fbbf24;
}

.yd-celebrate--solo {
  color: #38bdf8;
}

.yd-celebrate--lose {
  color: #f87171;
}

.yd-celebrate--tie {
  color: #c4b5fd;
}

.yd-root--shake {
  animation: yd-shake 0.48s ease;
}

.yd-root--gameover {
  filter: saturate(0.82) brightness(0.94);
  transition: filter 0.45s ease;
}

.yd-cat-row--just-scored {
  animation: yd-cat-pop 0.52s ease-out;
  background: color-mix(in srgb, #38bdf8 22%, transparent) !important;
}

.yd-bonus-row--earned {
  animation: yd-bonus-glow 0.8s ease-in-out 2;
  background: color-mix(in srgb, #22c55e 18%, transparent) !important;
}

@media (max-width: 480px) {
  .yd-die {
    width: 64px;
    height: 64px;
  }

  .yd-pip {
    width: 11px;
    height: 11px;
  }

  .yd-dice-row {
    gap: 0.55rem;
  }

  .yd-cat-row {
    padding: 0.5rem 0.55rem;
    min-height: 44px;
  }

  .yd-mode-btn,
  .yd-actions .btn-primary {
    min-height: 44px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  .yd-boards--dual {
    grid-template-columns: 1fr;
  }

  .yd-flow {
    font-size: 0.72rem;
  }
}

/* --- falling-dodge --- */
.falling-dodge-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.falling-dodge-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.28),
    0 14px 36px rgba(30, 27, 75, 0.45);
  background: #0c1222;
}

.falling-dodge-controls {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  justify-content: center;
  touch-action: none;
}

.falling-dodge-btn {
  flex: 1;
  max-width: 140px;
  font-size: 22px;
  padding: 14px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 4px 12px rgba(49, 46, 129, 0.25);
}

.falling-dodge-btn:hover {
  transform: translateY(-1px);
}

.falling-dodge-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 6px rgba(49, 46, 129, 0.3);
}

/* --- bullet-dodge --- */
.bullet-dodge-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.bullet-dodge-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: crosshair;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.28),
    0 14px 36px rgba(30, 27, 75, 0.45);
  background: #0c1222;
}

.bullet-dodge-canvas:active {
  transform: scale(0.995);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.42),
    0 10px 28px rgba(30, 27, 75, 0.55),
    0 0 24px rgba(56, 189, 248, 0.12);
}

/* --- dot-muncher --- */
.dot-muncher-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  touch-action: none;
}

.dot-muncher-hud {
  display: flex;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  flex-wrap: wrap;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
}

.dot-muncher-hud span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dot-muncher-hud-score {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.12) !important;
}

.dot-muncher-hud-power {
  color: #c4b5fd;
  background: rgba(129, 140, 248, 0.18) !important;
  animation: dot-muncher-power-pulse 0.9s ease-in-out infinite;
}

.dot-muncher-hud-combo {
  color: #67e8f9;
  background: rgba(103, 232, 249, 0.12) !important;
  animation: dot-muncher-combo-pop 0.35s ease-out;
}

.dot-muncher-progress {
  width: min(100%, 342px);
  height: 6px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.65);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dot-muncher-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #fde68a, #34d399);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
  transition: width 0.18s ease-out;
}

.dot-muncher-wrap--power .dot-muncher-canvas {
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.45),
    0 0 24px rgba(129, 140, 248, 0.35),
    0 14px 36px rgba(15, 23, 42, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: dot-muncher-power-ring 1.1s ease-in-out infinite;
}

@keyframes dot-muncher-power-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

@keyframes dot-muncher-combo-pop {
  0% { transform: scale(0.88); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes dot-muncher-power-ring {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}

.dot-muncher-wrap--shake {
  animation: dot-muncher-shake 0.42s ease-out;
}

.dot-muncher-canvas-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.dot-muncher-canvas {
  display: block;
  max-width: 100%;
  border-radius: 14px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.22),
    0 14px 36px rgba(15, 23, 42, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background: #070b14;
}

.dot-muncher-pad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 48px);
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}

.dot-muncher-pad-up { grid-column: 2; grid-row: 1; }
.dot-muncher-pad-left { grid-column: 1; grid-row: 2; }
.dot-muncher-pad-down { grid-column: 2; grid-row: 2; }
.dot-muncher-pad-right { grid-column: 3; grid-row: 2; }

.dot-muncher-pad-btn {
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #334155, #1e293b);
  color: #e2e8f0;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.08s ease, filter 0.08s ease, box-shadow 0.08s ease;
  touch-action: manipulation;
  min-height: 48px;
}

.dot-muncher-pad-btn:hover {
  filter: brightness(1.08);
}

.dot-muncher-pad-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, #475569, #334155);
}

.dot-muncher-pad-btn.dot-muncher-pad-btn--press {
  transform: translateY(3px) scale(0.96);
  filter: brightness(1.15);
}

.dot-muncher-wrap--gameover {
  filter: saturate(0.78) brightness(0.9);
  transition: filter 0.45s ease;
}

@keyframes dot-muncher-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@media (min-width: 720px) {
  .dot-muncher-pad {
    display: none;
  }
}

@media (max-width: 480px) {
  .dot-muncher-hud {
    font-size: 12px;
    gap: 8px;
  }

  .dot-muncher-pad {
    grid-template-columns: repeat(3, 64px);
    grid-template-rows: repeat(2, 52px);
  }

  .dot-muncher-pad-btn {
    min-height: 52px;
    font-size: 1.2rem;
  }
}

/* --- snake-battle --- */
.snake-battle-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  touch-action: none;
}

.snake-battle-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.28),
    0 0 0 1px rgba(239, 68, 68, 0.16),
    0 0 28px rgba(34, 197, 94, 0.08),
    0 14px 40px rgba(0, 0, 0, 0.48);
  background: #0a0f18;
  transition: box-shadow 0.2s ease;
}

.snake-battle-dpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  max-width: 240px;
  margin: 14px auto 0;
  touch-action: none;
}

.snake-battle-dpad.sb-dpad-shake {
  animation: sb-dpad-shake 0.22s ease;
}

@keyframes sb-dpad-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.snake-battle-btn {
  min-height: 52px;
  font-size: 22px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  color: #e2e8f0;
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.snake-battle-btn.sb-up {
  grid-column: 2;
}

.snake-battle-btn.sb-left {
  grid-column: 1;
  grid-row: 2;
}

.snake-battle-btn.sb-down {
  grid-column: 2;
  grid-row: 2;
}

.snake-battle-btn.sb-right {
  grid-column: 3;
  grid-row: 2;
}

.snake-battle-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #334155 0%, #1e293b 100%);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.snake-battle-btn:active {
  transform: translateY(1px) scale(0.96);
  background: linear-gradient(145deg, #0f172a 0%, #020617 100%);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.45);
}

@media (max-width: 768px) {
  .snake-battle-btn {
    min-height: 56px;
    font-size: 24px;
  }
}

@media (min-width: 769px) {
  .snake-battle-dpad {
    display: none;
  }
}

/* --- seesaw-balance --- */
.seesaw-balance-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.seesaw-balance-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.28),
    0 16px 40px rgba(15, 23, 42, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background: linear-gradient(180deg, #060a14 0%, #1a2438 100%);
}

.seesaw-balance-controls {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 12px;
  max-width: 320px;
  margin: 14px auto 0;
  padding: 0 8px;
  touch-action: none;
}

.seesaw-balance-btn {
  min-height: 58px;
  min-width: 58px;
  font-size: 24px;
  padding: 12px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(180deg, #3d4f66 0%, #1e293b 100%);
  color: #e2e8f0;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.seesaw-balance-btn.sb-drop {
  background: linear-gradient(180deg, #818cf8 0%, #4f46e5 100%);
  box-shadow:
    0 6px 18px rgba(79, 70, 229, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-size: 26px;
}

.seesaw-balance-btn:hover {
  transform: translateY(-2px);
}

.seesaw-balance-btn:active,
.seesaw-balance-btn.sb-active {
  transform: translateY(2px) scale(0.96);
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.4),
    inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

.seesaw-balance-btn.sb-drop.sb-active {
  background: linear-gradient(180deg, #a5b4fc 0%, #6366f1 100%);
}

@media (min-width: 769px) {
  .seesaw-balance-controls {
    display: none;
  }
}

/* --- lunar-lander --- */
.lunar-lander-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.lunar-lander-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.22),
    0 14px 36px rgba(15, 23, 42, 0.55);
  background: #0a0e27;
}

.lunar-lander-controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
  touch-action: none;
}

.lunar-lander-btn {
  flex: 1;
  max-width: 120px;
  min-height: 56px;
  font-size: 22px;
  padding: 14px 16px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.28);
  border: 2px solid transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.lunar-lander-btn.ll-thrust {
  max-width: 148px;
  font-size: 20px;
  min-height: 60px;
}

.lunar-lander-btn.ll-active,
.lunar-lander-btn:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.32);
}

.lunar-lander-btn.ll-left.ll-active,
.lunar-lander-btn.ll-right.ll-active {
  border-color: rgba(129, 140, 248, 0.55);
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.35);
}

.lunar-lander-btn.ll-thrust.ll-active {
  border-color: rgba(251, 191, 36, 0.65);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.45);
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  color: #1e293b;
}

.lunar-lander-btn:hover {
  transform: translateY(-1px);
}

.lunar-lander-btn.ll-active:hover,
.lunar-lander-btn:active:hover {
  transform: translateY(1px) scale(0.97);
}

@media (min-width: 769px) {
  .lunar-lander-controls {
    display: none;
  }
}

/* --- lane-racer --- */
.lane-racer-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.lane-racer-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.28),
    0 16px 40px rgba(15, 23, 42, 0.6);
  background: #0f172a;
}

.lane-racer-controls {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  justify-content: center;
  touch-action: none;
  padding: 0 4px;
}

.lane-racer-btn {
  flex: 1;
  max-width: 160px;
  min-height: 56px;
  font-size: 26px;
  padding: 16px 20px;
  border-radius: 14px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lane-racer-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lane-racer-btn:active,
.lane-racer-btn.lane-racer-btn-active {
  transform: translateY(2px) scale(0.97);
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.35),
    inset 0 2px 6px rgba(15, 23, 42, 0.2);
}

@media (min-width: 769px) {
  .lane-racer-controls {
    display: none;
  }
}

/* --- cave-flight --- */
.cave-flight-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.cave-flight-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.18),
    0 14px 36px rgba(41, 37, 36, 0.55);
  background: #1a1412;
}

/* --- road-cross --- */
.road-cross-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.road-cross-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.22),
    0 14px 36px rgba(6, 78, 59, 0.42);
  background: #166534;
}

.road-cross-dpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  max-width: 240px;
  margin: 14px auto 0;
  touch-action: none;
  padding: 0 4px 8px;
}

.road-cross-btn {
  min-height: 52px;
  min-width: 52px;
  font-size: 22px;
  padding: 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 4px 14px rgba(6, 78, 59, 0.32);
  touch-action: manipulation;
}

.road-cross-btn.rc-up {
  grid-column: 2;
}

.road-cross-btn.rc-left {
  grid-column: 1;
  grid-row: 2;
}

.road-cross-btn.rc-down {
  grid-column: 2;
  grid-row: 2;
}

.road-cross-btn.rc-right {
  grid-column: 3;
  grid-row: 2;
}

.road-cross-btn:hover {
  transform: translateY(-1px);
}

.road-cross-btn:active {
  transform: translateY(1px) scale(0.96);
  box-shadow: 0 2px 6px rgba(6, 78, 59, 0.32);
}

@media (min-width: 769px) {
  .road-cross-dpad {
    display: none;
  }
}

/* --- pinball-lite --- */
.pinball-lite-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.pinball-lite-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.32),
    0 4px 24px rgba(99, 102, 241, 0.12),
    0 16px 40px rgba(15, 23, 42, 0.58);
  background: #141b38;
}

.pinball-lite-controls {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
  touch-action: none;
  padding: 0 4px 8px;
}

.pinball-lite-btn {
  flex: 1;
  max-width: 130px;
  min-height: 56px;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.32);
  touch-action: manipulation;
}

.pinball-lite-btn-left,
.pinball-lite-btn-right {
  flex: 1.2;
  max-width: 140px;
}

.pinball-lite-btn-launch {
  max-width: 100px;
}

.pinball-lite-btn-ready {
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.45),
    0 0 18px rgba(34, 197, 94, 0.25),
    0 4px 14px rgba(15, 23, 42, 0.32);
  animation: pinball-lite-launch-pulse 1.2s ease-in-out infinite;
}

@keyframes pinball-lite-launch-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.45), 0 0 12px rgba(34, 197, 94, 0.2), 0 4px 14px rgba(15, 23, 42, 0.32); }
  50% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.65), 0 0 22px rgba(34, 197, 94, 0.38), 0 4px 14px rgba(15, 23, 42, 0.32); }
}

.pinball-lite-btn-active {
  transform: translateY(2px) scale(0.96);
  box-shadow:
    0 0 0 2px rgba(249, 115, 22, 0.55),
    0 0 16px rgba(249, 115, 22, 0.35),
    inset 0 2px 6px rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.35), rgba(234, 88, 12, 0.2));
}

.pinball-lite-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.pinball-lite-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
}

.pinball-lite-btn:disabled {
  opacity: 0.45;
}

@media (min-width: 769px) {
  .pinball-lite-controls {
    display: none;
  }
}

/* --- parachute --- */
.parachute-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.parachute-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.22),
    0 14px 36px rgba(12, 74, 110, 0.45);
  background: #0284c7;
}

.parachute-steer-pad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  touch-action: none;
}

.parachute-steer-btn {
  min-height: 52px;
  padding: 12px 16px;
  font-size: 1.45rem;
  font-weight: 700;
  color: #f0f9ff;
  background: linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%);
  border: 1px solid rgba(186, 230, 253, 0.35);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 14px rgba(12, 74, 110, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.parachute-steer-btn:hover {
  transform: translateY(-1px);
}

.parachute-steer-btn:active,
.parachute-steer-btn.parachute-steer-btn--active {
  transform: translateY(1px) scale(0.96);
  box-shadow:
    0 2px 6px rgba(12, 74, 110, 0.42),
    inset 0 2px 8px rgba(15, 23, 42, 0.22);
  background: linear-gradient(180deg, #0284c7 0%, #075985 100%);
}

.parachute-deploy-btn {
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  touch-action: manipulation;
  border-radius: var(--radius-md);
  box-shadow:
    0 6px 18px rgba(220, 38, 38, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
  animation: parachute-deploy-pulse 2.2s ease-in-out infinite;
}

.parachute-deploy-btn:hover {
  transform: translateY(-1px);
}

.parachute-deploy-btn:active {
  transform: translateY(1px) scale(0.98);
}

.parachute-deploy-btn--used {
  opacity: 0.55;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
  animation: none;
}

@keyframes parachute-deploy-pulse {
  0%,
  100% {
    box-shadow:
      0 6px 18px rgba(220, 38, 38, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow:
      0 6px 22px rgba(248, 113, 113, 0.48),
      0 0 0 3px rgba(248, 113, 113, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

@media (max-width: 768px) {
  .parachute-steer-btn {
    min-height: 58px;
    font-size: 1.55rem;
  }

  .parachute-deploy-btn {
    padding: 16px;
    font-size: 17px;
  }
}

@media (min-width: 769px) {
  .parachute-steer-pad {
    display: none;
  }
}

/* --- color-switch --- */
.color-switch-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.color-switch-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.28),
    0 14px 36px rgba(15, 23, 42, 0.55);
  background: #0c1222;
}

.color-switch-jump {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 10px auto 0;
  min-height: 56px;
  padding: 14px 20px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  touch-action: manipulation;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
  border: 1px solid rgba(199, 210, 254, 0.35);
  box-shadow:
    0 6px 20px rgba(67, 56, 202, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}

.color-switch-jump:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.color-switch-jump:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0 2px 8px rgba(67, 56, 202, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.color-switch-jump--pulse {
  animation: color-switch-jump-pulse 1.1s ease-in-out infinite;
}

@keyframes color-switch-jump-pulse {
  0%,
  100% {
    box-shadow:
      0 6px 20px rgba(67, 56, 202, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 8px 28px rgba(129, 140, 248, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: scale(1.02);
  }
}

@media (min-width: 769px) {
  .color-switch-jump {
    display: none;
  }
}

/* --- helix-drop --- */
.helix-drop-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.helix-drop-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  box-shadow:
    0 12px 40px rgba(15, 23, 42, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #0c1222 0%, #141b33 50%, #0a0f1c 100%);
}

/* --- tower-crane --- */
.tower-crane-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tower-crane-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.28),
    0 16px 40px rgba(8, 47, 73, 0.52);
  background: #0c1445;
}

.tower-crane-drop-btn {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 12px auto 0;
  min-height: 56px;
  padding: 14px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  touch-action: manipulation;
  border-radius: var(--radius-md);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  box-shadow:
    0 6px 18px rgba(8, 47, 73, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.tower-crane-drop-btn--pulse {
  animation: tc-drop-pulse 1.35s ease-in-out infinite;
}

@keyframes tc-drop-pulse {
  0%, 100% {
    box-shadow:
      0 6px 18px rgba(8, 47, 73, 0.42),
      0 0 0 0 rgba(56, 189, 248, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  50% {
    box-shadow:
      0 8px 26px rgba(14, 165, 233, 0.45),
      0 0 0 6px rgba(56, 189, 248, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}

.tower-crane-drop-btn--active {
  transform: translateY(2px) scale(0.97);
  filter: brightness(0.95);
}

.tower-crane-drop-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.tower-crane-drop-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(8, 47, 73, 0.4);
}

@media (max-width: 480px) {
  .tower-crane-drop-btn {
    min-height: 60px;
    font-size: 1.1rem;
  }
}

@media (min-width: 769px) {
  .tower-crane-drop-btn {
    display: none;
  }
}

/* --- billiards --- */
.billiards-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.billiards-wrap--shake {
  animation: billiards-shake 0.48s ease-out;
}

.billiards-wrap--celebrate {
  animation: billiards-celebrate 1.1s ease-out;
}

@keyframes billiards-shake {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-5px, 2px); }
  28% { transform: translate(5px, -3px); }
  44% { transform: translate(-4px, -2px); }
  60% { transform: translate(4px, 2px); }
  76% { transform: translate(-2px, 1px); }
}

@keyframes billiards-celebrate {
  0% { transform: scale(1); filter: brightness(1); }
  18% { transform: scale(1.02); filter: brightness(1.12); }
  40% { transform: scale(1); filter: brightness(1.06); }
  65% { transform: scale(1.015); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}

.billiards-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: crosshair;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.38),
    0 12px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.22);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.billiards-canvas:active {
  transform: scale(0.985);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.42),
    0 6px 24px rgba(0, 0, 0, 0.32);
}

@media (max-width: 640px), (hover: none) {
  .billiards-canvas {
    cursor: pointer;
  }
}

/* laser-mirror */
.laser-mirror-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: manipulation;
}

.laser-mirror-wrap--shake {
  animation: laser-mirror-shake 0.38s ease;
}

.laser-mirror-wrap--enter {
  animation: laser-mirror-enter 0.42s ease;
}

.laser-mirror-wrap--started .laser-mirror-hud {
  opacity: 1;
}

@keyframes laser-mirror-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes laser-mirror-enter {
  from { opacity: 0.4; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.laser-mirror-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.75rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.14), rgba(15, 23, 42, 0.55));
  border: 1px solid rgba(249, 115, 22, 0.28);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.laser-mirror-hud-level,
.laser-mirror-hud-mirrors,
.laser-mirror-hud-targets {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fdba74;
  letter-spacing: 0.01em;
}

.laser-mirror-hud-mirrors {
  color: #e2e8f0;
}

.laser-mirror-hud-targets {
  color: #fb923c;
}

.laser-mirror-toast {
  min-height: 1.4rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fde68a;
  text-align: center;
  text-shadow: 0 0 12px rgba(249, 115, 22, 0.65);
  transition: opacity 0.15s ease;
}

.laser-mirror-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(249, 115, 22, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

.laser-mirror-canvas:active {
  transform: scale(0.985);
}

@media (max-width: 640px), (hover: none) {
  .laser-mirror-canvas {
    max-width: 100%;
  }
}

/* one-line-draw */
.one-line-draw-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: manipulation;
}

.one-line-draw-wrap--shake {
  animation: one-line-draw-shake 0.38s ease;
}

.one-line-draw-wrap--enter {
  animation: one-line-draw-enter 0.42s ease;
}

@keyframes one-line-draw-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes one-line-draw-enter {
  from { opacity: 0.45; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.one-line-draw-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem 0.75rem;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(15, 23, 42, 0.55));
  border: 1px solid rgba(34, 211, 238, 0.28);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.one-line-draw-hud-level,
.one-line-draw-hud-edges,
.one-line-draw-hud-hint {
  font-size: 0.88rem;
  font-weight: 600;
  color: #67e8f9;
  letter-spacing: 0.01em;
}

.one-line-draw-hud-edges {
  color: #e2e8f0;
}

.one-line-draw-hud-edges--done {
  color: #34d399;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
}

.one-line-draw-hud-hint {
  color: #94a3b8;
  font-size: 0.82rem;
}

.one-line-draw-hud-hint--active {
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
}

.one-line-draw-hud-hint--warn {
  color: #f87171;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.45);
}

.one-line-draw-progress {
  flex: 1 1 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  overflow: hidden;
}

.one-line-draw-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.55);
  transition: width 0.22s ease;
}

.one-line-draw-toast {
  min-height: 1.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fde68a;
  text-align: center;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.55);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.one-line-draw-toast--show {
  opacity: 1;
  transform: translateY(0);
}

.one-line-draw-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: crosshair;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(34, 211, 238, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

.one-line-draw-canvas:active {
  transform: scale(0.985);
}

.one-line-draw-toolbar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.one-line-draw-reset {
  min-width: 7rem;
}

@media (max-width: 640px), (hover: none) {
  .one-line-draw-canvas {
    max-width: 100%;
  }
}

/* ?? Kakuro ?? */
.kakuro-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0.35rem 0.25rem 0.5rem;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(99, 102, 241, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.04), transparent 40%);
  border-radius: 18px;
}

.kakuro-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.kakuro-puzzle-group,
.kakuro-tools {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.kakuro-puzzle-btn {
  min-width: 2.1rem;
  padding: 0.35rem 0.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.kakuro-puzzle-btn:hover {
  transform: translateY(-1px);
}

.kakuro-puzzle-btn.active {
  background: linear-gradient(145deg, #6366f1, #4f46e5);
  color: #fff;
  border-color: #4338ca;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.38);
}

.kakuro-pencil-btn {
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.kakuro-pencil-btn:hover {
  transform: translateY(-1px);
}

.kakuro-pencil-btn.active {
  background: linear-gradient(145deg, #6366f1, #4f46e5);
  color: #fff;
  border-color: #4338ca;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.kakuro-stats {
  display: flex;
  gap: 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
}

.kakuro-combo {
  color: #6366f1;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.kakuro-combo.on {
  opacity: 1;
  transform: scale(1);
}

.kakuro-progress {
  color: #4f46e5;
}

.kakuro-board-shell {
  position: relative;
  width: min(96vw, 440px);
  border-radius: 14px;
  padding: 6px;
  background: linear-gradient(145deg, #334155 0%, #0f172a 50%, #1e293b 100%);
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.32),
    0 2px 0 rgba(255, 255, 255, 0.1) inset;
  overflow: visible;
}

.kakuro-board-shell--cleared {
  animation: kakuro-board-glow 0.85s ease;
}

.kakuro-clear-flash {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.85), rgba(129, 140, 248, 0.45) 38%, transparent 72%);
  z-index: 3;
}

.kakuro-clear-flash.on {
  animation: kakuro-clear-flash 0.75s ease-out forwards;
}

.kakuro-combo-pop {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(79, 70, 229, 0.65);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
}

.kakuro-combo-pop.on {
  animation: kakuro-combo-pop 0.72s cubic-bezier(0.22, 0.68, 0.2, 1) forwards;
}

.kakuro-confetti {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 4;
  animation: kakuro-confetti-burst 0.9s cubic-bezier(0.22, 0.68, 0.2, 1) forwards;
}

.kakuro-num-rain {
  position: absolute;
  top: -8%;
  font-size: 1.1rem;
  font-weight: 800;
  color: #818cf8;
  pointer-events: none;
  z-index: 4;
  animation: kakuro-num-rain 1.1s ease-in forwards;
  text-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

.kakuro-board {
  display: grid;
  width: 100%;
  gap: 2px;
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: inset 0 0 0 2px rgba(15, 23, 42, 0.85);
}

.kakuro-cell {
  aspect-ratio: 1;
  min-height: 34px;
  min-width: 34px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.kakuro-cell--block {
  background: linear-gradient(145deg, #1e293b, #0f172a);
}

.kakuro-cell--clue {
  background:
    linear-gradient(to bottom right, transparent 49.5%, rgba(15, 23, 42, 0.55) 50%, transparent 50.5%),
    linear-gradient(145deg, #334155, #1e293b);
  overflow: hidden;
}

.kakuro-clue-down,
.kakuro-clue-across {
  position: absolute;
  font-size: clamp(0.58rem, 2.6vw, 0.78rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
}

.kakuro-clue-down {
  top: 12%;
  right: 14%;
  color: #e2e8f0;
}

.kakuro-clue-across {
  bottom: 12%;
  left: 14%;
  color: #c7d2fe;
}

.kakuro-cell--white {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: clamp(1rem, 4.8vw, 1.45rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #4338ca;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  transition: background 0.15s ease, box-shadow 0.18s ease, color 0.15s ease, transform 0.12s ease;
}

.kakuro-cell--white:hover {
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
}

.kakuro-cell--white.selected {
  background: linear-gradient(180deg, #c7d2fe 0%, #a5b4fc 100%);
  box-shadow: inset 0 0 0 2px #6366f1;
  color: #312e81;
}

.kakuro-cell--white.error {
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
  color: #b91c1c;
  box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.45);
}

.kakuro-cell--white.kakuro-cell--pop {
  animation: kakuro-cell-pop 0.32s cubic-bezier(0.22, 0.68, 0.2, 1);
}

.kakuro-cell--white.kakuro-cell--shake {
  animation: kakuro-cell-shake 0.48s ease;
}

.kakuro-cell--white.kakuro-cell--run-flash {
  animation: kakuro-run-flash 0.68s ease;
}

.kakuro-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 88%;
  height: 88%;
  gap: 0;
  pointer-events: none;
}

.kakuro-note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.45rem, 2vw, 0.58rem);
  font-weight: 600;
  color: transparent;
}

.kakuro-note.on {
  color: #6366f1;
}

.kakuro-numpad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  width: min(96vw, 400px);
}

.kakuro-num-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
  font-size: 1.15rem;
  font-weight: 700;
  color: #4338ca;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.kakuro-num-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.18);
}

.kakuro-num-btn:active {
  transform: scale(0.96);
}

.kakuro-num-btn.active-num {
  background: linear-gradient(145deg, #6366f1, #4f46e5);
  color: #fff;
  border-color: #4338ca;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.kakuro-num-btn.complete {
  opacity: 0.45;
}

.kakuro-num-badge {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 0.58rem;
  font-weight: 700;
  color: transparent;
}

.kakuro-num-badge.on {
  color: #6366f1;
}

.kakuro-numpad.pencil-mode .kakuro-num-btn {
  border-style: dashed;
}

.kakuro-erase-btn {
  grid-column: span 1;
  font-size: 1.25rem;
}

@keyframes kakuro-board-glow {
  0%, 100% { box-shadow: 0 14px 32px rgba(15, 23, 42, 0.32); }
  50% { box-shadow: 0 14px 40px rgba(99, 102, 241, 0.45), 0 0 28px rgba(129, 140, 248, 0.35); }
}

@keyframes kakuro-clear-flash {
  0% { opacity: 0; transform: scale(0.96); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.03); }
}

@keyframes kakuro-combo-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7) translateY(8px); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.08) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-18px); }
}

@keyframes kakuro-confetti-burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); }
}

@keyframes kakuro-num-rain {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  15% { opacity: 1; transform: translateY(12px) scale(1); }
  100% { opacity: 0; transform: translateY(110px) scale(0.9); }
}

@keyframes kakuro-cell-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes kakuro-cell-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes kakuro-run-flash {
  0%, 100% { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
  35% { background: linear-gradient(180deg, #bbf7d0 0%, #86efac 100%); box-shadow: inset 0 0 0 2px #22c55e; }
}

@media (max-width: 640px) {
  .kakuro-cell {
    min-height: 36px;
    min-width: 36px;
  }

  .kakuro-num-btn {
    min-height: 48px;
  }
}

/* ?? Hitori ?? */
.hitori-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  touch-action: manipulation;
}

.hitori-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(520px, 96vw);
}

.hitori-hud-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #0f172a 28%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hitori-hud-level {
  color: #e2e8f0;
  border-color: rgba(71, 85, 105, 0.55);
}

.hitori-hud-size {
  color: #94a3b8;
}

.hitori-perfect-badge {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.45);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(71, 85, 105, 0.2));
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.22);
}

.hitori-perfect-badge--pop {
  animation: hitori-badge-pop 0.45s ease;
}

@keyframes hitori-badge-pop {
  0% { transform: scale(0.85); opacity: 0.5; }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.hitori-violations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.hitori-violation {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.55);
  color: #94a3b8;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.hitori-violation--ok {
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.35);
}

.hitori-violation--bad {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.4);
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.15);
}

.hitori-progress {
  width: min(520px, 96vw);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(71, 85, 105, 0.35);
}

.hitori-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #475569, #94a3b8, #cbd5e1);
  box-shadow: 0 0 12px rgba(148, 163, 184, 0.35);
  transition: width 0.35s ease;
}

.hitori-frame {
  position: relative;
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(145deg, #334155 0%, #1e293b 50%, #0f172a 100%);
  border: 2px solid rgba(71, 85, 105, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.hitori-board {
  display: grid;
  grid-template-columns: repeat(var(--hitori-size, 5), 1fr);
  gap: 4px;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.hitori-board--dim {
  filter: brightness(0.25) saturate(0.5);
}

.hitori-board--lit .hitori-cell--white,
.hitori-board--lit .hitori-cell--circle {
  animation: hitori-cell-light 0.5s ease forwards;
}

.hitori-board--enter {
  animation: hitori-board-enter 0.42s ease;
}

@keyframes hitori-board-enter {
  from { transform: scale(0.96); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes hitori-cell-light {
  0% { filter: brightness(0.3); }
  60% { filter: brightness(1.35); box-shadow: 0 0 18px rgba(226, 232, 240, 0.55); }
  100% { filter: brightness(1); }
}

.hitori-cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 40px;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(0.95rem, 3.8vw, 1.2rem);
  transition: transform 0.14s ease, box-shadow 0.2s ease, background 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.hitori-cell--white {
  background: linear-gradient(160deg, #f8fafc 0%, #e2e8f0 55%, #cbd5e1 100%);
  color: #1e293b;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

.hitori-cell--black {
  background: linear-gradient(160deg, #334155 0%, #1e293b 60%, #0f172a 100%);
  color: transparent;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}

.hitori-cell--circle {
  background: linear-gradient(160deg, #f8fafc 0%, #e2e8f0 55%, #cbd5e1 100%);
  color: #1e293b;
  box-shadow:
    inset 0 0 0 3px #475569,
    inset 0 2px 0 rgba(255, 255, 255, 0.85);
}

.hitori-cell-ring {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid #475569;
  opacity: 0;
  pointer-events: none;
}

.hitori-cell--circle .hitori-cell-ring {
  opacity: 1;
}

.hitori-cell--dup {
  box-shadow:
    inset 0 0 0 2px rgba(248, 113, 113, 0.75),
    0 0 10px rgba(248, 113, 113, 0.25);
}

.hitori-cell--adj {
  box-shadow:
    inset 0 0 0 2px rgba(251, 191, 36, 0.8),
    0 0 10px rgba(251, 191, 36, 0.25);
}

.hitori-cell--split {
  box-shadow:
    inset 0 0 0 2px rgba(96, 165, 250, 0.8),
    0 0 10px rgba(96, 165, 250, 0.25);
}

.hitori-cell--line-flash {
  animation: hitori-line-flash 0.52s ease;
}

@keyframes hitori-line-flash {
  0%, 100% { background-color: inherit; }
  40% { background-color: #fef08a; transform: scale(1.04); }
}

.hitori-cell--bump {
  animation: hitori-cell-bump 0.24s ease;
}

@keyframes hitori-cell-bump {
  0% { transform: scale(1); }
  45% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.hitori-cell--celebrate {
  animation: hitori-cell-celebrate 0.55s ease;
}

@keyframes hitori-cell-celebrate {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); filter: brightness(1.2); }
  100% { transform: scale(1); }
}

.hitori-cell-num {
  position: relative;
  z-index: 1;
}

.hitori-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.hitori-flash--active {
  opacity: 1;
}

.hitori-flash--dup {
  background: radial-gradient(circle at center, rgba(254, 240, 138, 0.45), transparent 68%);
}

.hitori-flash--clear {
  background: radial-gradient(circle at center, rgba(226, 232, 240, 0.55), transparent 70%);
}

.hitori-clear-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: #0f172a;
  background: linear-gradient(135deg, #e2e8f0, #f8fafc);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.hitori-clear-banner--show {
  animation: hitori-clear-banner 0.86s ease forwards;
}

@keyframes hitori-clear-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

.hitori-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.hitori-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hc, #cbd5e1);
  animation: hitori-particle 0.88s ease-out forwards;
}

@keyframes hitori-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--hx), var(--hy)) scale(0.2); }
}

.hitori-rules-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 6, 23, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.hitori-rules-overlay--show {
  opacity: 1;
  pointer-events: auto;
}

.hitori-rules-card {
  width: min(400px, 94vw);
  padding: 20px 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, #334155, #1e293b);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.hitori-rules-title {
  margin: 0 0 14px;
  text-align: center;
  font-size: 1.15rem;
  color: #f1f5f9;
}

.hitori-rules-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.hitori-rule-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.45);
}

.hitori-rule-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hitori-rule-arrow {
  font-size: 0.95rem;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1;
}

.hitori-mini-grid {
  display: grid;
  grid-template-columns: repeat(var(--hitori-mini-cols, 3), 1fr);
  gap: 2px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(100, 116, 139, 0.35);
}

.hitori-mini-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.hitori-mini-cell--white {
  background: linear-gradient(160deg, #f8fafc, #cbd5e1);
  color: #1e293b;
}

.hitori-mini-cell--black {
  background: linear-gradient(160deg, #334155, #0f172a);
}

.hitori-mini-cell--dup {
  box-shadow: inset 0 0 0 1.5px #f87171;
}

.hitori-mini-cell--adj {
  box-shadow: inset 0 0 0 1.5px #fbbf24;
}

.hitori-mini-cell--split {
  box-shadow: inset 0 0 0 1.5px #60a5fa;
}

.hitori-mini-cell--ok {
  box-shadow: inset 0 0 0 1.5px #34d399;
}

.hitori-rule-text {
  margin: 0;
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.45;
  text-align: center;
}

.hitori-rules-btn {
  width: 100%;
}

/* Shikaku */
.shikaku-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.shikaku-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: min(440px, 96vw);
}

.shikaku-hud-item {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #0f172a 28%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.shikaku-hud-level {
  color: #a3e635;
  border-color: rgba(132, 204, 22, 0.4);
}

.shikaku-hud-placed {
  color: #e2e8f0;
}

.shikaku-hud-remain--hot {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
}

.shikaku-hud-remain--done {
  color: #84cc16;
  border-color: rgba(132, 204, 22, 0.5);
  box-shadow: 0 0 14px rgba(132, 204, 22, 0.25);
}

.shikaku-progress {
  flex: 1 1 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.shikaku-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #65a30d, #84cc16, #bef264);
  box-shadow: 0 0 12px rgba(132, 204, 22, 0.45);
  transition: width 0.28s ease;
}

.shikaku-goal {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #cbd5e1;
}

.shikaku-frame {
  position: relative;
  padding: 10px;
  border-radius: 22px;
  background: linear-gradient(145deg, #1a2e12 0%, #142010 45%, #0f1a0c 100%);
  border: 2px solid rgba(132, 204, 22, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.shikaku-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--shikaku-cols, 5), 1fr);
  grid-template-rows: repeat(var(--shikaku-rows, 5), 1fr);
  gap: 5px;
  width: min(420px, 94vw);
  aspect-ratio: 1;
  padding: 12px;
  touch-action: none;
  user-select: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 19px,
      rgba(132, 204, 22, 0.05) 19px,
      rgba(132, 204, 22, 0.05) 20px
    ),
    linear-gradient(160deg, #1e3318, #152612);
  border-radius: 14px;
}

.shikaku-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 36px;
  border: 1px solid rgba(132, 204, 22, 0.18);
  border-radius: 8px;
  background: linear-gradient(145deg, #243820, #1a2b14);
  color: #e2e8f0;
  font-size: clamp(0.85rem, 3.2vw, 1.15rem);
  font-weight: 800;
  cursor: crosshair;
  touch-action: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.shikaku-cell--clue {
  color: #fef9c3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.shikaku-cell--filled {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--shikaku-fill, #84cc16) 88%, #fff 12%),
    color-mix(in srgb, var(--shikaku-fill, #84cc16) 72%, #000 28%)
  );
  border-color: color-mix(in srgb, var(--shikaku-fill, #84cc16) 70%, #fff 30%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.25);
}

.shikaku-cell--pop {
  animation: shikaku-cell-pop 0.38s cubic-bezier(0.22, 1.2, 0.36, 1);
}

.shikaku-cell--mosaic {
  animation: shikaku-mosaic 0.5s ease both;
}

.shikaku-cell--shake {
  animation: shikaku-cell-shake 0.32s ease;
}

.shikaku-overlay {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  z-index: 3;
}

.shikaku-preview {
  position: absolute;
  border-radius: 8px;
  border: 2px dashed rgba(255, 255, 255, 0.65);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s ease, border-color 0.1s ease;
}

.shikaku-preview--ok {
  background: rgba(132, 204, 22, 0.28);
  border-color: #bef264;
  box-shadow: 0 0 16px rgba(132, 204, 22, 0.35);
}

.shikaku-preview--warn {
  background: rgba(251, 191, 36, 0.22);
  border-color: #fbbf24;
}

.shikaku-preview--bad {
  background: rgba(239, 68, 68, 0.24);
  border-color: #f87171;
  animation: shikaku-preview-warn 0.28s ease infinite alternate;
}

.shikaku-preview-hint {
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.shikaku-flash {
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.shikaku-flash--place {
  background: radial-gradient(circle at 50% 50%, rgba(132, 204, 22, 0.38), transparent 70%);
}

.shikaku-flash--clear,
.shikaku-flash--win {
  background: radial-gradient(circle at 50% 50%, rgba(190, 242, 100, 0.5), transparent 72%);
}

.shikaku-flash--error {
  background: radial-gradient(circle at 50% 50%, rgba(248, 113, 113, 0.35), transparent 70%);
}

.shikaku-flash--active {
  animation: shikaku-screen-flash 0.45s ease-out forwards;
}

.shikaku-clear-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  padding: 10px 22px;
  border-radius: 12px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f7fee7;
  background: linear-gradient(135deg, rgba(101, 163, 13, 0.95), rgba(77, 124, 15, 0.9));
  border: 2px solid #bef264;
  box-shadow: 0 0 28px rgba(132, 204, 22, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
}

.shikaku-clear-banner--show {
  animation: shikaku-banner-pop 0.78s cubic-bezier(0.22, 1.12, 0.36, 1) forwards;
}

.shikaku-combo {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%) scale(0.7);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  color: #fef9c3;
  background: linear-gradient(135deg, rgba(132, 204, 22, 0.9), rgba(101, 163, 13, 0.85));
  border: 2px solid #d9f99d;
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}

.shikaku-combo--show {
  animation: shikaku-combo-pop 0.88s cubic-bezier(0.22, 1.12, 0.36, 1) forwards;
}

.shikaku-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.shikaku-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  animation: shikaku-particle-fly 0.85s ease-out forwards;
}

.shikaku-board--shake {
  animation: shikaku-board-shake 0.34s ease;
}

.shikaku-board--enter {
  animation: shikaku-board-enter 0.42s cubic-bezier(0.22, 1.1, 0.36, 1);
}

.shikaku-board--clearing {
  filter: brightness(1.08);
}

.shikaku-board--victory {
  animation: shikaku-victory 1.1s ease-out;
}

@keyframes shikaku-cell-pop {
  0% { transform: scale(0.92); filter: brightness(1); }
  45% { transform: scale(1.08); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1.05); }
}

@keyframes shikaku-mosaic {
  0% { transform: scale(0.9); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.25); }
  100% { transform: scale(1); filter: brightness(1.08); }
}

@keyframes shikaku-cell-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@keyframes shikaku-preview-warn {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

@keyframes shikaku-screen-flash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes shikaku-banner-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1); }
}

@keyframes shikaku-combo-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6) translateY(8px); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.05) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-18px); }
}

@keyframes shikaku-particle-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  100% {
    opacity: 0;
    transform: translate(var(--shikaku-px, 0), var(--shikaku-py, -60px)) scale(0.2) rotate(180deg);
  }
}

@keyframes shikaku-board-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -1px); }
  80% { transform: translate(3px, 1px); }
}

@keyframes shikaku-board-enter {
  0% { opacity: 0; transform: scale(0.94) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes shikaku-victory {
  0% { transform: scale(1); filter: brightness(1); }
  25% { transform: scale(1.02); filter: brightness(1.15); }
  100% { transform: scale(1); filter: brightness(1.05); }
}

@media (max-width: 640px), (hover: none) {
  .shikaku-cell {
    min-height: 40px;
    min-width: 40px;
    cursor: pointer;
  }
}

/* ?? Block Fill ?? */
.block-fill-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
}

.block-fill-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  width: 100%;
}

.block-fill-hud-item {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.block-fill-hud-level {
  color: #c4b5fd;
}

.block-fill-hud-remain--hot {
  color: #fbbf24;
}

.block-fill-hud-remain--done {
  color: #4ade80;
}

.block-fill-progress {
  flex: 1 1 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.block-fill-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transition: width 0.35s ease;
}

.block-fill-goal {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}

.block-fill-frame {
  position: relative;
  width: 100%;
}

.block-fill-board {
  position: relative;
  width: 100%;
  max-width: min(100%, 420px);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px rgba(167, 139, 250, 0.25);
  transition: transform 0.2s ease;
}

.block-fill-grid {
  display: grid;
  width: 100%;
  height: 100%;
}

.block-fill-board--enter {
  animation: block-fill-enter 0.42s ease;
}

.block-fill-board--victory {
  animation: block-fill-victory 0.8s ease;
}

.block-fill-board--shake {
  animation: block-fill-shake 0.38s ease;
}

.block-fill-cell {
  aspect-ratio: 1;
  min-height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease;
}

.block-fill-cell--filled {
  background: rgba(255, 255, 255, 0.02);
}

.block-fill-cell--line {
  background: rgba(74, 222, 128, 0.25) !important;
  box-shadow: inset 0 0 12px rgba(74, 222, 128, 0.4);
}

.block-fill-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.block-fill-piece-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.block-fill-placed {
  position: absolute;
  border-radius: 8px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  pointer-events: auto;
  cursor: grab;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.block-fill-placed--selected {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

.block-fill-placed--pop {
  animation: block-fill-pop 0.32s ease;
}

.block-fill-placed-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, transparent 45%);
  pointer-events: none;
}

.block-fill-placed-inner {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 2px;
  padding: 3px;
  box-sizing: border-box;
}

.block-fill-placed-seg {
  border-radius: 3px;
  background: transparent;
}

.block-fill-placed-seg--on {
  background: rgba(255, 255, 255, 0.12);
}

.block-fill-preview {
  position: absolute;
  box-sizing: border-box;
  border-radius: 6px;
  opacity: 0.75;
  transition: opacity 0.1s ease;
}

.block-fill-preview--ok {
  background: rgba(74, 222, 128, 0.45);
  border: 2px solid #4ade80;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
}

.block-fill-preview--bad {
  background: rgba(248, 113, 113, 0.4);
  border: 2px solid #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}

.block-fill-flash {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.block-fill-flash--place { background: rgba(74, 222, 128, 0.25); }
.block-fill-flash--line { background: rgba(251, 191, 36, 0.2); }
.block-fill-flash--error { background: rgba(248, 113, 113, 0.25); }
.block-fill-flash--win { background: rgba(167, 139, 250, 0.35); }

.block-fill-flash--active {
  animation: block-fill-flash 0.48s ease;
}

.block-fill-clear-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.block-fill-clear-banner--show {
  animation: block-fill-banner 0.82s ease forwards;
}

.block-fill-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

.block-fill-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: block-fill-particle 0.62s ease forwards;
}

.block-fill-toolbar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.block-fill-rotate-btn {
  min-width: 48px;
  min-height: 48px;
  font-size: 1.4rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(145deg, #6d28d9, #7c3aed);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.block-fill-rotate-btn:hover:not(:disabled) {
  transform: scale(1.05);
}

.block-fill-rotate-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.block-fill-rotate-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.block-fill-palette-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.block-fill-palette-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.block-fill-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 72px;
}

.block-fill-palette-slot {
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid transparent;
  cursor: grab;
  touch-action: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.block-fill-palette-slot--active {
  border-color: #a78bfa;
  transform: scale(1.05);
}

.block-fill-mini-grid,
.block-fill-shape-grid {
  display: grid;
  gap: 2px;
}

.block-fill-shape-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
}

.block-fill-shape-cell--on {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@keyframes block-fill-enter {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes block-fill-victory {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(1.03); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1.05); }
}

@keyframes block-fill-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes block-fill-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes block-fill-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes block-fill-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes block-fill-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

@media (max-width: 640px), (hover: none) {
  .block-fill-cell {
    min-height: 36px;
  }

  .block-fill-shape-cell {
    width: 12px;
    height: 12px;
  }

  .block-fill-palette-slot {
    min-width: 52px;
    min-height: 52px;
  }
}

/* ?? N-Queens ?? */
.n-queens-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.n-queens-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: min(480px, 96vw);
}

.n-queens-hud-item {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #0f172a 28%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.n-queens-hud-size {
  color: #fde68a;
  border-color: rgba(234, 179, 8, 0.45);
}

.n-queens-hud-queens {
  color: #e2e8f0;
}

.n-queens-hud-conflict--warn {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.45);
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.18);
}

.n-queens-hud-conflict--ok {
  color: #86efac;
  border-color: rgba(52, 211, 153, 0.4);
}

.n-queens-hud-timer {
  color: #cbd5e1;
}

.n-queens-progress {
  width: min(480px, 96vw);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.n-queens-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ca8a04, #eab308, #fde047);
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.45);
  transition: width 0.35s ease;
}

.n-queens-goal {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.02em;
  text-align: center;
}

.n-queens-frame {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(145deg, #3d3520 0%, #2a2418 45%, #1a1610 100%);
  border: 2px solid rgba(234, 179, 8, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 8px rgba(0, 0, 0, 0.45),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.n-queens-frame--cleared {
  border-color: rgba(250, 204, 21, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 28px rgba(234, 179, 8, 0.35),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.n-queens-board {
  display: grid;
  gap: 2px;
  width: min(calc(var(--nq-size, 8) * 42px + 2px * (var(--nq-size, 8) - 1)), 92vw);
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.5);
  touch-action: manipulation;
}

.n-queens-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  cursor: pointer;
  background: #3f3528;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  min-width: 0;
  min-height: 0;
}

.n-queens-cell--light {
  background: #5c4f3a;
}

.n-queens-cell:hover:not(:disabled) {
  filter: brightness(1.08);
}

.n-queens-cell:active:not(:disabled) {
  transform: scale(0.94);
}

.n-queens-cell--queen {
  background: color-mix(in srgb, #5c4f3a 70%, #eab308 30%);
}

.n-queens-cell--light.n-queens-cell--queen {
  background: color-mix(in srgb, #7a6848 65%, #eab308 35%);
}

.n-queens-cell--conflict {
  background: #7f1d1d !important;
  box-shadow: inset 0 0 0 2px rgba(248, 113, 113, 0.75);
  animation: n-queens-conflict-pulse 0.55s ease;
}

.n-queens-cell--attack-line {
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.35);
}

.n-queens-cell--attack-line:not(.n-queens-cell--light) {
  background: color-mix(in srgb, #3f3528 72%, rgba(239, 68, 68, 0.28) 28%);
}

.n-queens-cell--attack-line.n-queens-cell--light {
  background: color-mix(in srgb, #5c4f3a 72%, rgba(239, 68, 68, 0.28) 28%);
}

.n-queens-cell--hint {
  animation: n-queens-hint-glow 0.9s ease;
}

.n-queens-cell--pop {
  animation: n-queens-cell-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.n-queens-piece {
  font-size: clamp(1rem, calc(42px * 0.55), 1.75rem);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  line-height: 1;
}

.n-queens-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 12px;
  opacity: 0;
  z-index: 4;
}

.n-queens-flash--safe {
  animation: n-queens-safe-flash 0.52s ease;
}

.n-queens-flash--win {
  animation: n-queens-win-flash 0.75s ease;
}

.n-queens-crown {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.2);
  font-size: clamp(2.5rem, 12vw, 4rem);
  opacity: 0;
  z-index: 6;
  filter: drop-shadow(0 4px 16px rgba(234, 179, 8, 0.65));
}

.n-queens-crown--show {
  animation: n-queens-crown-pop 0.88s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.n-queens-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 3;
}

.n-queens-spark {
  position: absolute;
  font-size: 1rem;
  opacity: 0;
  animation: n-queens-spark 0.85s ease var(--delay, 0s) forwards;
}

.n-queens-toolbar {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.n-queens-attack-toggle--on {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.55);
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.2);
}

.n-queens-hint-btn--used {
  animation: n-queens-hint-shake 0.35s ease;
}

@keyframes n-queens-cell-pop {
  0% { transform: scale(0.75); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes n-queens-conflict-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@keyframes n-queens-safe-flash {
  0% { opacity: 0; background: transparent; }
  25% { opacity: 1; background: rgba(34, 197, 94, 0.35); }
  100% { opacity: 0; background: transparent; }
}

@keyframes n-queens-win-flash {
  0% { opacity: 0; background: transparent; }
  30% { opacity: 1; background: rgba(234, 179, 8, 0.45); }
  100% { opacity: 0; background: transparent; }
}

@keyframes n-queens-crown-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-20deg); }
  35% { opacity: 1; transform: translate(-50%, -58%) scale(1.15) rotate(6deg); }
  70% { opacity: 1; transform: translate(-50%, -52%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(0.85); }
}

@keyframes n-queens-spark {
  0% { opacity: 0; transform: translateY(8px) scale(0.5); }
  25% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.6); }
}

@keyframes n-queens-hint-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes n-queens-hint-glow {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(250, 204, 21, 0); }
  40% { box-shadow: inset 0 0 0 3px rgba(250, 204, 21, 0.85); }
}

@media (max-width: 640px) {
  .n-queens-board {
    width: min(calc(var(--nq-size, 8) * 34px + 2px * (var(--nq-size, 8) - 1)), 94vw);
  }

  .n-queens-hud-item {
    font-size: 0.8rem;
    padding: 5px 10px;
  }
}

/* ?? water-sort ?? */
.water-sort-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  touch-action: manipulation;
}

.water-sort-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: min(520px, 96vw);
}

.water-sort-hud-item {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #0f172a 28%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.water-sort-hud-level {
  color: #5eead4;
  border-color: rgba(20, 184, 166, 0.4);
}

.water-sort-hud-moves {
  color: #e2e8f0;
}

.water-sort-hud-moves.water-sort-hud-pop {
  animation: water-sort-hud-pop 0.32s ease;
}

@keyframes water-sort-hud-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.water-sort-hud-remain {
  color: #94a3b8;
}

.water-sort-hud-remain--hot {
  color: #2dd4bf;
  border-color: rgba(45, 212, 191, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 14px rgba(45, 212, 191, 0.2);
}

.water-sort-hud-remain--done {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
}

.water-sort-progress {
  flex: 1 1 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.water-sort-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #5eead4, #99f6e4);
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.45);
  transition: width 0.28s ease;
}

.water-sort-goal {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(20, 184, 166, 0.2);
}

.water-sort-toolbar {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.water-sort-undo {
  min-width: 120px;
  min-height: 44px;
}

.water-sort-frame {
  position: relative;
  padding: 14px 12px 18px;
  border-radius: 22px;
  background:
    linear-gradient(160deg, #1a2e35 0%, #0f1f24 50%, #0a1518 100%);
  border: 2px solid rgba(20, 184, 166, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 8px rgba(0, 0, 0, 0.45),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.water-sort-board {
  display: grid;
  grid-template-columns: repeat(var(--tube-cols, 5), minmax(0, 1fr));
  gap: 10px 8px;
  justify-items: center;
  width: min(520px, 96vw);
  transition: transform 0.35s ease;
}

.water-sort-board--enter {
  animation: water-sort-board-enter 0.42s ease;
}

@keyframes water-sort-board-enter {
  0% { opacity: 0; transform: translateY(12px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.water-sort-tube {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  min-width: 52px;
  min-height: 130px;
  touch-action: manipulation;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.water-sort-tube:hover {
  transform: translateY(-2px);
}

.water-sort-tube--selected {
  transform: translateY(-6px) scale(1.04);
  filter: drop-shadow(0 0 14px rgba(94, 234, 212, 0.55));
}

.water-sort-tube--selected .water-sort-glass {
  border-color: rgba(94, 234, 212, 0.75);
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.12),
    0 0 18px rgba(20, 184, 166, 0.35);
}

.water-sort-tube--shake {
  animation: water-sort-shake 0.38s ease;
}

@keyframes water-sort-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.water-sort-tube--tilt-left {
  animation: water-sort-tilt-left 0.34s ease;
  transform-origin: bottom center;
}

.water-sort-tube--tilt-right {
  animation: water-sort-tilt-right 0.34s ease;
  transform-origin: bottom center;
}

@keyframes water-sort-tilt-left {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(-28deg) translateX(-4px); }
  70% { transform: rotate(-18deg); }
  100% { transform: rotate(0deg); }
}

@keyframes water-sort-tilt-right {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(28deg) translateX(4px); }
  70% { transform: rotate(18deg); }
  100% { transform: rotate(0deg); }
}

.water-sort-tube--receive {
  animation: water-sort-receive 0.34s ease;
}

@keyframes water-sort-receive {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(3px) scale(1.02); }
}

.water-sort-tube--complete .water-sort-glass {
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow:
    inset 0 2px 10px rgba(255, 255, 255, 0.14),
    0 0 20px rgba(52, 211, 153, 0.3);
}

.water-sort-tube--sparkle {
  animation: water-sort-sparkle 0.6s ease;
}

@keyframes water-sort-sparkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35) drop-shadow(0 0 12px rgba(255, 255, 255, 0.5)); }
}

.water-sort-tube--wave {
  animation: water-sort-wave 0.7s ease;
}

@keyframes water-sort-wave {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px) scale(1.03); }
  60% { transform: translateY(2px); }
}

.water-sort-glass {
  position: relative;
  width: 48px;
  height: 108px;
  border-radius: 6px 6px 14px 14px;
  border: 2px solid rgba(148, 163, 184, 0.35);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.06) 100%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.45) 100%);
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.1),
    inset 0 -4px 12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.water-sort-liquid-wrap {
  position: absolute;
  inset: 4px 3px 6px;
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
}

.water-sort-layer {
  flex: 1;
  border-radius: 3px;
  opacity: 0.15;
  background: transparent;
}

.water-sort-layer--filled {
  opacity: 1;
  background: linear-gradient(
    180deg,
    var(--layer-shine, #fff) 0%,
    var(--layer-color, #14b8a6) 35%,
    color-mix(in srgb, var(--layer-color, #14b8a6) 82%, #000) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.water-sort-cap {
  position: absolute;
  top: -6px;
  width: 38px;
  height: 14px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #94a3b8, #64748b);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.water-sort-cap--pop {
  animation: water-sort-cap-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes water-sort-cap-pop {
  0% { transform: scale(0) translateY(8px); opacity: 0; }
  70% { transform: scale(1.15) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.water-sort-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.7);
}

.water-sort-tube--complete .water-sort-label {
  color: #34d399;
}

.water-sort-flash {
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.water-sort-flash--select {
  background: radial-gradient(circle at 50% 50%, rgba(94, 234, 212, 0.22), transparent 68%);
}

.water-sort-flash--pour {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), transparent 70%);
}

.water-sort-flash--clear {
  background: radial-gradient(circle at 50% 50%, rgba(20, 184, 166, 0.42), transparent 72%);
}

.water-sort-flash--win {
  background: radial-gradient(circle at 50% 50%, rgba(94, 234, 212, 0.55), rgba(52, 211, 153, 0.2) 55%, transparent 78%);
}

.water-sort-flash--active {
  animation: water-sort-flash 0.48s ease forwards;
}

@keyframes water-sort-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.water-sort-clear-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ecfdf5;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 28px rgba(20, 184, 166, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}

.water-sort-clear-banner--show {
  animation: water-sort-banner 0.82s ease forwards;
}

@keyframes water-sort-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

.water-sort-combo {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fef08a;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.9), rgba(249, 115, 22, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}

.water-sort-combo--show {
  animation: water-sort-combo 0.9s ease forwards;
}

@keyframes water-sort-combo {
  0% { opacity: 0; transform: scale(0.6) translateY(8px); }
  25% { opacity: 1; transform: scale(1.1) translateY(0); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9) translateY(-6px); }
}

.water-sort-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.water-sort-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc, #5eead4);
  box-shadow: 0 0 8px var(--pc, #5eead4);
  animation: water-sort-particle 0.8s ease forwards;
}

@keyframes water-sort-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px, 0), var(--py, 0)) scale(0.2); }
}

.water-sort-board--clearing {
  animation: water-sort-board-clear 1.1s ease;
}

@keyframes water-sort-board-clear {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.15); }
}

@media (max-width: 640px), (hover: none) {
  .water-sort-tube {
    min-width: 46px;
    min-height: 120px;
  }

  .water-sort-glass {
    width: 42px;
    height: 96px;
  }

  .water-sort-board {
    gap: 8px 6px;
  }
}

/* --- peg-solitaire --- */
.peg-sol-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.peg-sol-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: min(420px, 96vw);
}

.peg-sol-hud-item {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #1e1033 28%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.peg-sol-hud-remain {
  color: #e9d5ff;
  border-color: rgba(168, 85, 247, 0.4);
}

.peg-sol-hud-remain--hot {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.2);
}

.peg-sol-hud-remain--perfect {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.45);
}

.peg-sol-hud-jumps {
  color: #cbd5e1;
}

.peg-sol-hud-best {
  color: #c4b5fd;
}

.peg-sol-combo {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.45);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.peg-sol-combo--show {
  opacity: 1;
  transform: scale(1);
  animation: peg-sol-combo-pop 0.35s ease;
}

@keyframes peg-sol-combo-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.peg-sol-toolbar {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.peg-sol-undo {
  min-height: 44px;
  min-width: 120px;
}

.peg-sol-goal {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #c4b5fd;
  letter-spacing: 0.02em;
}

.peg-sol-frame {
  position: relative;
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(145deg, #3b2060 0%, #2a1545 45%, #1a0f2e 100%);
  border: 2px solid rgba(168, 85, 247, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 8px rgba(0, 0, 0, 0.45),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.peg-sol-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: min(340px, 92vw);
  aspect-ratio: 1;
  touch-action: manipulation;
}

.peg-sol-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}

.peg-sol-cell--void {
  visibility: hidden;
  pointer-events: none;
}

.peg-sol-hole {
  position: absolute;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a1a3d 0%, #120a1c 70%);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.65),
    inset 0 -1px 2px rgba(168, 85, 247, 0.15);
  opacity: 0;
  transition: opacity 0.15s;
}

.peg-sol-cell--hole .peg-sol-hole,
.peg-sol-cell--peg .peg-sol-hole,
.peg-sol-cell--target .peg-sol-hole {
  opacity: 1;
}

.peg-sol-peg {
  position: absolute;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fde68a 0%, #d97706 42%, #92400e 88%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.45),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.35);
  transform: scale(0);
  transition: transform 0.18s ease;
  z-index: 2;
}

.peg-sol-peg-shine {
  position: absolute;
  width: 22%;
  height: 14%;
  top: 22%;
  left: 26%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  z-index: 3;
  pointer-events: none;
}

.peg-sol-cell--peg .peg-sol-peg,
.peg-sol-cell--peg .peg-sol-peg-shine {
  transform: scale(1);
}

.peg-sol-cell--selected .peg-sol-peg {
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(168, 85, 247, 0.7),
    0 0 18px rgba(168, 85, 247, 0.55);
  transform: scale(1.08);
}

.peg-sol-cell--target {
  animation: peg-sol-target-pulse 1.1s ease-in-out infinite;
}

.peg-sol-cell--target .peg-sol-hole {
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.55),
    0 0 0 3px rgba(52, 211, 153, 0.65),
    0 0 16px rgba(52, 211, 153, 0.45);
}

@keyframes peg-sol-target-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.peg-sol-cell--jumping .peg-sol-peg {
  animation: peg-sol-jump-out 0.28s ease forwards;
}

.peg-sol-cell--land .peg-sol-peg {
  animation: peg-sol-land-in 0.28s ease forwards;
}

.peg-sol-cell--pop .peg-sol-peg {
  animation: peg-sol-pop-remove 0.28s ease forwards;
}

@keyframes peg-sol-jump-out {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.3); opacity: 0; }
}

@keyframes peg-sol-land-in {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes peg-sol-pop-remove {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); }
  100% { transform: scale(0); opacity: 0; }
}

.peg-sol-cell--shake {
  animation: peg-sol-shake 0.36s ease;
}

@keyframes peg-sol-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.peg-sol-cell:active:not(:disabled) {
  transform: scale(0.94);
}

.peg-sol-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.peg-sol-flash--active {
  animation: peg-sol-flash 0.42s ease;
}

.peg-sol-flash--jump {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35), transparent 70%);
}

.peg-sol-flash--win {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.45), transparent 70%);
}

.peg-sol-flash--stuck {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.25), transparent 70%);
}

@keyframes peg-sol-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.peg-sol-board--victory {
  animation: peg-sol-victory-glow 1.2s ease;
}

.peg-sol-board--stuck {
  animation: peg-sol-shake 0.5s ease;
}

@keyframes peg-sol-victory-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

.peg-sol-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

.peg-sol-particle,
.peg-sol-firework {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc, #a855f7);
  box-shadow: 0 0 8px var(--pc, #a855f7);
  animation: peg-sol-particle-fly 0.7s ease-out forwards;
  pointer-events: none;
}

.peg-sol-firework {
  width: 9px;
  height: 9px;
  animation: peg-sol-firework-fly 1s ease-out forwards;
}

@keyframes peg-sol-particle-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

@keyframes peg-sol-firework-fly {
  0% { transform: translate(0, 0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0.2); opacity: 0; }
}

@media (max-width: 640px), (hover: none) {
  .peg-sol-board {
    width: min(320px, 94vw);
    gap: 3px;
  }

  .peg-sol-cell {
    min-width: 44px;
    min-height: 44px;
  }
}

/* flow-connect */
.flow-connect-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.flow-connect-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: min(520px, 96vw);
}

.flow-connect-hud-item {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #0f172a 28%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.flow-connect-hud-level {
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.45);
}

.flow-connect-hud-moves {
  color: #e2e8f0;
}

.flow-connect-hud-moves.flow-connect-hud-pop {
  animation: flow-connect-hud-pop 0.32s ease;
}

@keyframes flow-connect-hud-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.flow-connect-hud-fill {
  color: #94a3b8;
}

.flow-connect-hud-fill--done {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
}

.flow-connect-progress {
  flex: 1 1 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.flow-connect-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0284c7, #0ea5e9, #38bdf8);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.45);
  transition: width 0.28s ease;
}

.flow-connect-goal {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.02em;
  text-align: center;
}

.flow-connect-goal--shake {
  animation: flow-connect-goal-shake 0.38s ease;
}

@keyframes flow-connect-goal-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.flow-connect-frame {
  position: relative;
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 55%, #0c1222 100%);
  border: 2px solid rgba(14, 165, 233, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 8px rgba(0, 0, 0, 0.45),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.flow-connect-board {
  --fc-cell: max(44px, calc((min(92vw, 420px) - 4px * (var(--fc-cols, 5) - 1)) / var(--fc-cols, 5)));
  display: grid;
  grid-template-columns: repeat(var(--fc-cols, 5), var(--fc-cell));
  gap: 4px;
  width: calc(var(--fc-cell) * var(--fc-cols, 5) + 4px * (var(--fc-cols, 5) - 1));
  touch-action: none;
  cursor: crosshair;
}

.flow-connect-board--enter {
  animation: flow-connect-board-enter 0.42s ease;
}

.flow-connect-board--rainbow {
  animation: flow-connect-rainbow 0.9s ease;
}

@keyframes flow-connect-board-enter {
  0% { opacity: 0; transform: translateY(10px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes flow-connect-rainbow {
  0%, 100% { filter: brightness(1) hue-rotate(0deg); }
  25% { filter: brightness(1.2) hue-rotate(60deg); }
  50% { filter: brightness(1.35) hue-rotate(120deg); }
  75% { filter: brightness(1.2) hue-rotate(200deg); }
}

.flow-connect-cell {
  position: relative;
  width: var(--fc-cell);
  height: var(--fc-cell);
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  overflow: visible;
}

.flow-connect-cell-pipe {
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  background: transparent;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.flow-connect-cell--filled .flow-connect-cell-pipe {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--fc-color, #0ea5e9) 88%, #fff) 0%,
    var(--fc-color, #0ea5e9) 45%,
    color-mix(in srgb, var(--fc-color, #0ea5e9) 75%, #000) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 8px color-mix(in srgb, var(--fc-color, #0ea5e9) 45%, transparent);
}

.flow-connect-cell--link-n .flow-connect-cell-pipe {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  margin-top: -2px;
}

.flow-connect-cell--link-s .flow-connect-cell-pipe {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  margin-bottom: -2px;
}

.flow-connect-cell--link-w .flow-connect-cell-pipe {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  margin-left: -2px;
}

.flow-connect-cell--link-e .flow-connect-cell-pipe {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  margin-right: -2px;
}

.flow-connect-cell--active {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.35),
    0 0 14px color-mix(in srgb, var(--fc-color, #0ea5e9) 55%, transparent);
}

.flow-connect-cell--pipe-pop .flow-connect-cell-pipe {
  animation: flow-connect-pipe-pop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes flow-connect-pipe-pop {
  0% { transform: scale(0.82); filter: brightness(1); }
  50% { transform: scale(1.14); filter: brightness(1.35); box-shadow: 0 0 16px var(--fc-pop-color, #0ea5e9); }
  100% { transform: scale(1); filter: brightness(1); }
}

.flow-connect-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 58%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    #fff 0%,
    var(--fc-dot, #0ea5e9) 35%,
    color-mix(in srgb, var(--fc-dot, #0ea5e9) 70%, #000) 100%
  );
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 12px color-mix(in srgb, var(--fc-dot, #0ea5e9) 50%, transparent);
  z-index: 2;
  pointer-events: none;
}

.flow-connect-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 14px;
  opacity: 0;
  z-index: 4;
}

.flow-connect-flash--draw {
  background: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.2), transparent 70%);
}

.flow-connect-flash--clear {
  background: radial-gradient(circle at 50% 50%, rgba(52, 211, 153, 0.35), transparent 72%);
}

.flow-connect-flash--rainbow {
  background: conic-gradient(
    from 0deg,
    rgba(239, 68, 68, 0.35),
    rgba(249, 115, 22, 0.35),
    rgba(234, 179, 8, 0.35),
    rgba(34, 197, 94, 0.35),
    rgba(59, 130, 246, 0.35),
    rgba(168, 85, 247, 0.35),
    rgba(239, 68, 68, 0.35)
  );
}

.flow-connect-flash--active {
  animation: flow-connect-flash 0.52s ease forwards;
}

@keyframes flow-connect-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.flow-connect-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  padding: 10px 28px;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f0f9ff;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 28px rgba(14, 165, 233, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}

.flow-connect-banner--clear {
  background: linear-gradient(135deg, #7c3aed, #0ea5e9, #22c55e);
}

.flow-connect-banner--level {
  font-size: 1.1rem;
  background: linear-gradient(135deg, #0369a1, #0ea5e9);
}

.flow-connect-banner--show {
  animation: flow-connect-banner 0.88s ease forwards;
}

@keyframes flow-connect-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

.flow-connect-perfect {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%) scale(0.5);
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fef08a;
  background: linear-gradient(135deg, #ca8a04, #eab308, #fbbf24);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 24px rgba(234, 179, 8, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}

.flow-connect-perfect--show {
  animation: flow-connect-perfect 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes flow-connect-perfect {
  0% { opacity: 0; transform: translateX(-50%) scale(0.4) rotate(-8deg); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(4deg); }
  55% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(-12px); }
}

.flow-connect-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.flow-connect-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fc-pc, #0ea5e9);
  box-shadow: 0 0 10px var(--fc-pc, #0ea5e9);
  animation: flow-connect-particle 0.75s ease forwards;
}

.flow-connect-particle--rainbow {
  width: 10px;
  height: 10px;
}

@keyframes flow-connect-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--fc-px, 0), var(--fc-py, 0)) scale(0.15); }
}

.flow-connect-toolbar {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.flow-connect-reset {
  min-height: 44px;
  min-width: 130px;
}

@media (max-width: 640px), (hover: none) {
  .flow-connect-board {
    --fc-cell: max(44px, calc((min(94vw, 380px) - 4px * (var(--fc-cols, 5) - 1)) / var(--fc-cols, 5)));
  }

  .flow-connect-hud-item {
    font-size: 0.8rem;
    padding: 5px 10px;
  }
}

/* ?? Binary Puzzle (binary-puzzle) ?? */
.bp-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.bp-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: var(--radius-lg);
  z-index: 4;
  transition: opacity 0.35s ease;
}

.bp-flash--on {
  opacity: 1;
}

.bp-flash--line {
  background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.28) 0%, transparent 70%);
}

.bp-flash--win {
  background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.45) 0%, rgba(250, 204, 21, 0.15) 40%, transparent 75%);
}

.bp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: min(520px, 96vw);
}

.bp-size-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bp-size-btn.active {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: rgba(34, 197, 94, 0.6);
  color: #fff;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}

.bp-timer {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #0f172a 28%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
}

.bp-streak {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #86efac;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(20, 83, 45, 0.35);
  min-width: 4.5rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bp-streak--hot {
  color: #fde68a;
  border-color: rgba(250, 204, 21, 0.5);
  background: rgba(120, 53, 15, 0.4);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.25);
}

.bp-streak--pop {
  animation: bp-streak-pop 0.32s ease;
}

@keyframes bp-streak-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.bp-hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}

.bp-board-shell {
  position: relative;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(145deg, #14532d 0%, #0f3d22 50%, #052e16 100%);
  border: 2px solid rgba(34, 197, 94, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.38);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.bp-board-shell--enter {
  animation: bp-board-enter 0.42s ease;
}

.bp-board-shell--wave {
  border-color: rgba(74, 222, 128, 0.65);
  box-shadow:
    0 0 28px rgba(34, 197, 94, 0.4),
    0 12px 32px rgba(0, 0, 0, 0.38);
}

@keyframes bp-board-enter {
  0% { opacity: 0.4; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

.bp-board {
  display: grid;
  grid-template-columns: repeat(var(--bp-size, 6), var(--bp-cell, 42px));
  gap: 3px;
  touch-action: manipulation;
}

.bp-wave {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(74, 222, 128, 0.2), transparent 65%);
  transition: opacity 0.3s ease;
}

.bp-wave--on {
  opacity: 1;
  animation: bp-wave-pulse 1.2s ease infinite;
}

@keyframes bp-wave-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}

.bp-cell {
  position: relative;
  width: var(--bp-cell, 42px);
  height: var(--bp-cell, 42px);
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bp-cell:active {
  transform: scale(0.94);
}

.bp-cell--given {
  cursor: default;
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.2);
}

.bp-cell--empty .bp-cell-face {
  opacity: 0;
}

.bp-cell--zero {
  background: linear-gradient(145deg, #1e3a5f, #0c2340);
}

.bp-cell--zero .bp-cell-face {
  color: #93c5fd;
  text-shadow: 0 0 8px rgba(147, 197, 253, 0.5);
}

.bp-cell--one {
  background: linear-gradient(145deg, #14532d, #052e16);
}

.bp-cell--one .bp-cell-face {
  color: #86efac;
  text-shadow: 0 0 8px rgba(134, 239, 172, 0.5);
}

.bp-cell--bad {
  border-color: rgba(248, 113, 113, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(248, 113, 113, 0.35),
    0 0 10px rgba(248, 113, 113, 0.35);
  animation: bp-cell-shake 0.42s ease;
}

@keyframes bp-cell-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

.bp-cell-face {
  position: relative;
  z-index: 2;
  font-size: clamp(1.1rem, 4vw, 1.45rem);
  font-weight: 800;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  line-height: 1;
}

.bp-cell-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), transparent 55%);
  pointer-events: none;
}

.bp-cell--pop {
  animation: bp-cell-pop 0.28s ease;
}

.bp-cell--pop .bp-cell-glow {
  opacity: 1;
}

@keyframes bp-cell-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.bp-cell--line {
  animation: bp-line-flash 0.62s ease;
}

@keyframes bp-line-flash {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  35% {
    box-shadow:
      inset 0 0 0 2px rgba(74, 222, 128, 0.8),
      0 0 14px rgba(34, 197, 94, 0.55);
  }
}

.bp-cell--wave0 {
  animation: bp-wave0 0.35s ease;
}

.bp-cell--wave1 {
  animation: bp-wave1 0.35s ease;
}

@keyframes bp-wave0 {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.4); background: #1e40af; }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes bp-wave1 {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.4); background: #15803d; }
  100% { transform: scale(1); filter: brightness(1); }
}

.bp-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bp-particle {
  position: absolute;
  font-size: 1.4rem;
  color: #4ade80;
  opacity: 0;
  animation: bp-particle-rise 0.7s ease forwards;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
}

@keyframes bp-particle-rise {
  0% { opacity: 0; transform: translateY(8px) scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px) scale(1.1); }
}

@media (max-width: 640px) {
  .bp-board {
    gap: 2px;
  }
  .bp-cell {
    border-radius: 8px;
  }
}

/* ?? Akari (?? ??) ?? */
.akari-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  touch-action: manipulation;
}

.akari-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: min(520px, 96vw);
}

.akari-hud-item {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #1c1910 28%);
  border: 1px solid rgba(250, 204, 21, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.akari-hud-level {
  color: #fde68a;
  border-color: rgba(250, 204, 21, 0.45);
}

.akari-hud-status--warn {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
}

.akari-hud-status--bad {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.45);
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.15);
}

.akari-hud-status--done {
  color: #86efac;
  border-color: rgba(52, 211, 153, 0.4);
}

.akari-hud-best {
  color: #fcd34d;
}

.akari-progress {
  flex: 1 1 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(250, 204, 21, 0.18);
}

.akari-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ca8a04, #facc15, #fde047);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.45);
  transition: width 0.28s ease;
}

.akari-hint {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #cbd5e1;
  text-align: center;
}

.akari-mode-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(250, 204, 21, 0.2);
}

.akari-mode-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 700;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.akari-mode-chip--bulb {
  color: #fde047;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.25);
}

.akari-mode-chip--block {
  color: #94a3b8;
}

.akari-mode-chip--clear {
  color: #64748b;
}

.akari-mode-arrow {
  color: #64748b;
  font-size: 0.85rem;
}

.akari-frame {
  position: relative;
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(145deg, #2a2518 0%, #1a1610 45%, #0f0d08 100%);
  border: 2px solid rgba(250, 204, 21, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.akari-board {
  display: grid;
  gap: 4px;
  width: min(calc(var(--akari-cols, 5) * 44px + 4px * (var(--akari-cols, 5) - 1)), 94vw);
  transition: filter 0.35s ease;
}

.akari-board--enter {
  animation: akari-board-enter 0.42s ease;
}

.akari-board--clearing {
  filter: brightness(1.12);
}

.akari-board--victory {
  animation: akari-victory 1.1s ease-out;
}

@keyframes akari-board-enter {
  from { transform: scale(0.96); opacity: 0.45; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes akari-victory {
  0%, 100% { filter: brightness(1); }
  35% { filter: brightness(1.35); }
}

.akari-cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  font-size: clamp(0.85rem, 3vw, 1.1rem);
  transition: transform 0.14s ease, box-shadow 0.2s ease, background 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.akari-cell--white {
  background: linear-gradient(160deg, #334155 0%, #1e293b 60%, #0f172a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.akari-cell--lit {
  background: linear-gradient(160deg, #fef9c3 0%, #fde047 45%, #facc15 100%);
  color: #713f12;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 14px rgba(250, 204, 21, 0.35);
}

.akari-cell--bulb {
  background: radial-gradient(circle at 35% 30%, #fff 0%, #fde047 35%, #eab308 75%);
  box-shadow:
    0 0 18px rgba(250, 204, 21, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.akari-cell--bulb::after {
  content: '??';
  font-size: clamp(0.9rem, 3.2vw, 1.2rem);
  line-height: 1;
}

.akari-cell--block {
  background: linear-gradient(160deg, #475569, #334155);
  color: #94a3b8;
}

.akari-cell--block::after {
  content: '?';
  font-size: clamp(0.85rem, 3vw, 1.05rem);
  font-weight: 900;
}

.akari-cell--wall {
  background: linear-gradient(160deg, #1e293b, #0f172a);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
  cursor: default;
}

.akari-cell--number {
  background: linear-gradient(160deg, #292524, #1c1917);
  color: #fde68a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.akari-cell--num-ok {
  color: #86efac;
  box-shadow:
    inset 0 0 0 2px rgba(52, 211, 153, 0.5),
    0 0 12px rgba(52, 211, 153, 0.25);
}

.akari-cell--num-bad {
  color: #fca5a5;
  box-shadow:
    inset 0 0 0 2px rgba(248, 113, 113, 0.55),
    0 0 10px rgba(248, 113, 113, 0.2);
}

.akari-cell--violate {
  animation: akari-violate 0.45s ease;
  box-shadow:
    0 0 0 2px rgba(248, 113, 113, 0.8),
    0 0 16px rgba(248, 113, 113, 0.45);
}

.akari-cell--ray {
  animation: akari-ray 0.28s ease;
}

.akari-cell--celebrate {
  animation: akari-celebrate 0.55s ease;
}

@keyframes akari-violate {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.06); }
}

@keyframes akari-ray {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.45); transform: scale(1.04); }
  100% { filter: brightness(1); }
}

@keyframes akari-celebrate {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); filter: brightness(1.25); }
  100% { transform: scale(1); }
}

.akari-check-pop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #86efac;
  animation: akari-check-pop 0.65s ease forwards;
  pointer-events: none;
  z-index: 3;
}

@keyframes akari-check-pop {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1) translateY(-8px); }
}

.akari-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  z-index: 5;
}

.akari-flash--on.akari-flash--clear {
  animation: akari-flash-clear 0.52s ease;
}

.akari-flash--on.akari-flash--win {
  animation: akari-flash-win 0.75s ease;
}

@keyframes akari-flash-clear {
  0% { opacity: 0; background: transparent; }
  30% { opacity: 1; background: rgba(250, 204, 21, 0.4); }
  100% { opacity: 0; }
}

@keyframes akari-flash-win {
  0% { opacity: 0; }
  25% { opacity: 1; background: radial-gradient(circle, rgba(253, 224, 71, 0.55), transparent 70%); }
  100% { opacity: 0; }
}

.akari-clear-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: #422006;
  background: linear-gradient(135deg, #fde047, #facc15);
  box-shadow: 0 8px 28px rgba(250, 204, 21, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.akari-clear-banner--on {
  animation: akari-banner 0.9s ease forwards;
}

@keyframes akari-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.95); }
}

.akari-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}

.akari-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.9), transparent 70%);
  animation: akari-ripple 0.7s ease-out forwards;
}

@keyframes akari-ripple {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(12); opacity: 0; }
}

@media (max-width: 640px) {
  .akari-board {
    gap: clamp(2px, 0.6vw, 4px);
    width: min(calc(var(--akari-cols, 5) * 44px + 4px * (var(--akari-cols, 5) - 1)), 94vw);
    max-width: 94vw;
  }

  .akari-frame {
    max-width: 96vw;
    padding: 8px;
  }
}

/* ?? bridges (Hashi) ?? */
.bridges-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 4px 16px;
  touch-action: manipulation;
}

.bridges-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
}

.bridges-hud-item {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.bridges-hud-level {
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.25);
}

.bridges-hud-status--done {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
}

.bridges-hud-status--bad {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
}

.bridges-hud-best {
  color: var(--text-muted);
  font-weight: 500;
}

.bridges-progress {
  flex: 1 1 120px;
  min-width: 100px;
  max-width: 200px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.bridges-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  transition: width 0.35s ease;
}

.bridges-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

.bridges-frame {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(2, 132, 199, 0.14), rgba(15, 23, 42, 0.5));
  border: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow: 0 8px 32px rgba(2, 132, 199, 0.12);
}

.bridges-frame--shake {
  animation: bridges-shake 0.38s ease;
}

@keyframes bridges-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.bridges-board {
  display: grid;
  gap: clamp(2px, 0.5vw, 4px);
  position: relative;
  z-index: 2;
  width: min(calc(var(--bridges-cols, 5) * 48px + 4px * (var(--bridges-cols, 5) - 1)), 94vw);
}

.bridges-board--enter {
  animation: bridges-enter 0.42s ease;
}

.bridges-board--clearing {
  filter: brightness(1.08);
}

.bridges-board--victory {
  animation: bridges-victory 1.1s ease;
}

@keyframes bridges-enter {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bridges-victory {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25) saturate(1.2); }
}

.bridges-cell {
  width: clamp(44px, 12vw, 52px);
  height: clamp(44px, 12vw, 52px);
  min-width: 44px;
  min-height: 44px;
}

.bridges-water {
  border-radius: 6px;
  background: radial-gradient(circle at 40% 35%, rgba(56, 189, 248, 0.12), rgba(2, 132, 199, 0.04));
  box-shadow: inset 0 0 8px rgba(14, 165, 233, 0.08);
}

.bridges-island {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 800;
  color: #0c4a6e;
  background: radial-gradient(circle at 35% 30%, #fef3c7, #fde68a 55%, #f59e0b);
  box-shadow:
    0 3px 0 #b45309,
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 2px 4px rgba(255, 255, 255, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease;
  touch-action: manipulation;
}

.bridges-island:hover {
  transform: scale(1.05);
}

.bridges-island:active {
  transform: scale(0.96);
}

.bridges-island--selected {
  transform: scale(1.1);
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.8),
    0 6px 20px rgba(14, 165, 233, 0.45);
}

.bridges-island--ok {
  filter: brightness(1.1);
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.7),
    0 0 18px rgba(34, 197, 94, 0.45),
    0 3px 0 #b45309;
  animation: bridges-island-glow 1.8s ease-in-out infinite;
}

@keyframes bridges-island-glow {
  0%, 100% { filter: brightness(1.05); }
  50% { filter: brightness(1.2); }
}

.bridges-island--over {
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.65),
    0 3px 0 #b45309;
  color: #991b1b;
}

.bridges-island--under {
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.35),
    0 3px 0 #b45309;
}

.bridges-island--pop {
  animation: bridges-pop 0.55s ease;
}

@keyframes bridges-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.bridges-island--celebrate {
  animation: bridges-celebrate 0.6s ease both;
}

@keyframes bridges-celebrate {
  0% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1); }
}

.bridges-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.bridges-bridge-line {
  stroke: #92400e;
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  opacity: 0.95;
}

.bridges-bridge-line--wave {
  animation: bridges-bridge-wave 0.55s ease;
}

@keyframes bridges-bridge-wave {
  0% { stroke: #fde68a; stroke-width: 3; opacity: 0.4; }
  50% { stroke: #fbbf24; stroke-width: 8; opacity: 1; }
  100% { stroke: #92400e; stroke-width: 6; opacity: 0.95; }
}

.bridges-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.bridges-flash--on.bridges-flash--clear {
  animation: bridges-flash-clear 0.52s ease;
}

.bridges-flash--on.bridges-flash--win {
  animation: bridges-flash-win 0.8s ease;
}

@keyframes bridges-flash-clear {
  0% { opacity: 0; background: transparent; }
  30% { opacity: 0.55; background: rgba(56, 189, 248, 0.35); }
  100% { opacity: 0; }
}

@keyframes bridges-flash-win {
  0% { opacity: 0; }
  25% { opacity: 0.7; background: rgba(250, 204, 21, 0.4); }
  100% { opacity: 0; }
}

.bridges-clear-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fef08a;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 24px rgba(250, 204, 21, 0.6);
}

.bridges-clear-banner--on {
  animation: bridges-banner-pop 0.9s ease forwards;
}

@keyframes bridges-banner-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

.bridges-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

@media (max-width: 480px) {
  .bridges-board {
    width: min(calc(var(--bridges-cols, 5) * 44px + 3px * (var(--bridges-cols, 5) - 1)), 96vw);
  }

  .bridges-frame {
    padding: 8px;
  }
}

/* ?? tents-trees ?? */
.tt-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 16px;
  background: linear-gradient(165deg, #0f172a 0%, #14532d 45%, #052e16 100%);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.tt-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: 100%;
  max-width: 520px;
}

.tt-hud-item {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #d1fae5;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tt-hud-level {
  background: rgba(22, 163, 74, 0.25);
  color: #bbf7d0;
}

.tt-hud-status--bad {
  background: rgba(239, 68, 68, 0.2);
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.35);
}

.tt-hud-status--done {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
}

.tt-progress {
  flex: 1 1 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.tt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #86efac);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.tt-hint {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(209, 250, 229, 0.75);
  text-align: center;
}

.tt-mode-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.tt-mode-chip {
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.tt-mode-chip--grass { background: rgba(34, 197, 94, 0.2); }
.tt-mode-chip--tent { background: rgba(251, 191, 36, 0.2); }

.tt-mode-arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
}

.tt-frame {
  position: relative;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 83, 45, 0.6), rgba(5, 46, 22, 0.8));
  border: 1px solid rgba(134, 239, 172, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.tt-board-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 4px;
  align-items: stretch;
}

.tt-col-hints {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(var(--tt-cols, 6), 1fr);
  gap: 4px;
}

.tt-hint-corner {
  width: 28px;
  height: 28px;
}

.tt-mid-row {
  display: flex;
  gap: 4px;
}

.tt-row-hints {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tt-hint-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #a7f3d0;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.tt-hint-cell--col,
.tt-hint-cell--row {
  min-width: 28px;
  min-height: 28px;
}

.tt-hint-cell--ok {
  background: rgba(34, 197, 94, 0.35);
  color: #ecfdf5;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.tt-hint-cell--bad {
  background: rgba(239, 68, 68, 0.3);
  color: #fecaca;
}

.tt-hint-cell--flash {
  animation: tt-hint-flash 0.5s ease;
}

@keyframes tt-hint-flash {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.15); background: rgba(250, 204, 21, 0.45); }
}

.tt-board {
  display: grid;
  gap: 4px;
  width: min(calc(var(--tt-cols, 6) * 44px + 4px * (var(--tt-cols, 6) - 1)), 92vw);
}

.tt-cell {
  aspect-ratio: 1;
  min-width: 40px;
  min-height: 40px;
  border: none;
  border-radius: 8px;
  font-size: 1.35rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  background: linear-gradient(145deg, #166534, #14532d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.tt-cell--empty:hover {
  background: linear-gradient(145deg, #15803d, #166534);
  transform: scale(1.03);
}

.tt-cell--tree {
  background: linear-gradient(145deg, #052e16, #064e3b);
  cursor: default;
  box-shadow: inset 0 0 12px rgba(34, 197, 94, 0.15);
}

.tt-cell--tree-bad {
  box-shadow: 0 0 0 2px #ef4444, inset 0 0 10px rgba(239, 68, 68, 0.3);
  animation: tt-shake 0.35s ease;
}

.tt-cell--grass {
  background: linear-gradient(145deg, #22c55e, #16a34a);
}

.tt-cell--grass::after {
  content: '??';
  font-size: 1.1rem;
}

.tt-cell--tent {
  background: linear-gradient(145deg, #f59e0b, #d97706);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
}

.tt-cell--tent::after {
  content: '?';
  font-size: 1.2rem;
}

.tt-cell--violate {
  box-shadow: 0 0 0 2px #ef4444, 0 0 16px rgba(239, 68, 68, 0.5);
}

.tt-cell--pop {
  animation: tt-pop 0.35s ease;
}

@keyframes tt-pop {
  0% { transform: scale(0.85); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes tt-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.tt-cell--celebrate {
  animation: tt-celebrate 0.6s ease forwards;
}

@keyframes tt-celebrate {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}

.tt-board--enter {
  animation: tt-board-enter 0.42s ease;
}

@keyframes tt-board-enter {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.tt-board--clearing {
  filter: brightness(1.1);
}

.tt-board--victory {
  animation: tt-victory 1.1s ease;
}

@keyframes tt-victory {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25) saturate(1.2); }
}

.tt-flash {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
}

.tt-flash--on.tt-flash--clear {
  opacity: 1;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.35) 0%, transparent 70%);
}

.tt-flash--on.tt-flash--win {
  opacity: 1;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.4) 0%, transparent 70%);
}

.tt-clear-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fef08a;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.25s, transform 0.25s;
}

.tt-clear-banner--on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.tt-campfire {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  font-size: 2.5rem;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 0 20px rgba(251, 146, 60, 0.8));
  transition: transform 0.4s ease, opacity 0.4s;
}

.tt-campfire--on {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  animation: tt-fire-flicker 0.8s ease infinite alternate;
}

@keyframes tt-fire-flicker {
  from { filter: drop-shadow(0 0 16px rgba(251, 146, 60, 0.7)); }
  to { filter: drop-shadow(0 0 28px rgba(250, 204, 21, 0.9)); }
}

.tt-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}

.tt-stars--on {
  opacity: 1;
}

.tt-star {
  position: absolute;
  color: #fef08a;
  font-size: 0.7rem;
  animation: tt-twinkle 1.2s ease infinite alternate;
}

.tt-star:nth-child(1) { top: 8%; left: 12%; animation-delay: 0s; }
.tt-star:nth-child(2) { top: 15%; right: 18%; animation-delay: 0.15s; }
.tt-star:nth-child(3) { top: 22%; left: 35%; animation-delay: 0.3s; }
.tt-star:nth-child(4) { top: 10%; right: 40%; animation-delay: 0.45s; }
.tt-star:nth-child(5) { top: 30%; left: 8%; animation-delay: 0.2s; }
.tt-star:nth-child(6) { top: 28%; right: 8%; animation-delay: 0.35s; }
.tt-star:nth-child(7) { top: 5%; left: 55%; animation-delay: 0.5s; }
.tt-star:nth-child(8) { top: 18%; right: 55%; animation-delay: 0.1s; }
.tt-star:nth-child(9) { top: 35%; left: 22%; animation-delay: 0.4s; }
.tt-star:nth-child(10) { top: 12%; left: 72%; animation-delay: 0.25s; }
.tt-star:nth-child(11) { top: 25%; right: 28%; animation-delay: 0.55s; }
.tt-star:nth-child(12) { top: 8%; right: 72%; animation-delay: 0.05s; }

@keyframes tt-twinkle {
  from { opacity: 0.4; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.2); }
}

.tt-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.tt-particle {
  position: absolute;
  font-size: 1rem;
  transform: translate(-50%, -50%);
  animation: tt-particle-rise 0.65s ease forwards;
}

@keyframes tt-particle-rise {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1.4); }
}

@media (max-width: 640px) {
  .tt-board {
    gap: clamp(2px, 0.6vw, 4px);
    width: min(calc(var(--tt-cols, 6) * 44px + 4px * (var(--tt-cols, 6) - 1)), 94vw);
  }

  .tt-cell {
    min-width: 40px;
    min-height: 40px;
  }

  .tt-frame {
    max-width: 96vw;
    padding: 8px;
  }
}

/* ?? tangram ?? */
.tangram-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  touch-action: none;
}

.tangram-wrap--enter {
  animation: tangram-enter 0.42s ease;
}

.tangram-wrap--snap {
  animation: tangram-snap 0.2s ease;
}

.tangram-wrap--clear .tangram-canvas {
  filter: brightness(1.08);
}

@keyframes tangram-enter {
  0% { opacity: 0; transform: translateY(12px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}

@keyframes tangram-snap {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.tangram-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.tangram-hud-item {
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
  white-space: nowrap;
}

.tangram-hud-level {
  color: #f8fafc;
}

.tangram-hud-remain--hot {
  color: #fbbf24;
  animation: tangram-pulse 1s ease infinite;
}

.tangram-hud-remain--done {
  color: #4ade80;
}

.tangram-hud-time {
  color: #94a3b8;
}

.tangram-progress {
  flex: 1 1 80px;
  min-width: 60px;
  height: 6px;
  background: rgba(51, 65, 85, 0.8);
  border-radius: 999px;
  overflow: hidden;
}

.tangram-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f43f5e, #fb7185);
  border-radius: 999px;
  transition: width 0.35s ease;
}

@keyframes tangram-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.tangram-goal {
  margin: 0;
  font-size: 0.88rem;
  color: #94a3b8;
  text-align: center;
}

.tangram-frame {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tangram-canvas {
  display: block;
  width: 100%;
  cursor: grab;
  touch-action: none;
  border-radius: 14px;
}

.tangram-canvas:active {
  cursor: grabbing;
}

.tangram-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 14px;
}

.tangram-flash--win {
  background: radial-gradient(circle, rgba(250, 204, 21, 0.45), transparent 70%);
}

.tangram-flash--active {
  animation: tangram-flash 0.5s ease forwards;
}

@keyframes tangram-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.tangram-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  padding: 12px 28px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fef08a;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.9), rgba(251, 113, 133, 0.85));
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.tangram-banner--show {
  animation: tangram-banner 0.9s ease forwards;
}

@keyframes tangram-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

.tangram-fx {
  position: relative;
  width: 100%;
  height: 0;
  pointer-events: none;
}

.tangram-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: tangram-particle 0.9s ease-out forwards;
}

@keyframes tangram-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% {
    transform: translate(var(--tangram-px, 0), var(--tangram-py, -80px)) scale(0);
    opacity: 0;
  }
}

.tangram-toolbar {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.tangram-btn {
  min-width: 100px;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
  background: linear-gradient(180deg, #475569, #334155);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.tangram-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #64748b, #475569);
}

.tangram-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

.tangram-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tangram-btn-rot {
  background: linear-gradient(180deg, #f43f5e, #e11d48);
  border-color: rgba(251, 113, 133, 0.5);
}

.tangram-btn-flip {
  background: linear-gradient(180deg, #8b5cf6, #7c3aed);
  border-color: rgba(167, 139, 250, 0.5);
}

@media (max-width: 640px) {
  .tangram-wrap {
    max-width: 96vw;
  }

  .tangram-hud {
    padding: 6px 10px;
    gap: 6px 8px;
  }

  .tangram-hud-item {
    font-size: 0.75rem;
  }

  .tangram-btn {
    min-width: 88px;
    min-height: 48px;
    font-size: 0.9rem;
  }
}

/* ?? Lines 98 (lines-98) ?? */
.lines98-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.25rem 0 0.5rem;
}

.lines98-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  max-width: 420px;
}

.lines98-hud-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.85), rgba(49, 46, 129, 0.75));
  color: #e9d5ff;
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 2px 10px rgba(91, 33, 182, 0.25);
}

.lines98-hud-score {
  color: #fde68a;
}

.lines98-hud-best {
  color: #c4b5fd;
}

.lines98-hud-best--record {
  animation: lines98-record 1.1s ease;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.55);
}

@keyframes lines98-record {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.08); background: linear-gradient(135deg, #78350f, #92400e); color: #fde68a; }
}

.lines98-hud-combo {
  color: #a5f3fc;
}

.lines98-hud-combo--hot {
  animation: lines98-combo-pulse 0.6s ease infinite alternate;
  color: #f0abfc;
  border-color: rgba(232, 121, 249, 0.6);
}

@keyframes lines98-combo-pulse {
  from { box-shadow: 0 0 6px rgba(232, 121, 249, 0.3); }
  to { box-shadow: 0 0 16px rgba(232, 121, 249, 0.65); }
}

.lines98-hud-fill--warn {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.5);
}

.lines98-hud-pop {
  animation: lines98-hud-pop 0.32s ease;
}

@keyframes lines98-hud-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.lines98-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(30, 27, 75, 0.65));
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.lines98-preview-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #c4b5fd;
  letter-spacing: 0.04em;
}

.lines98-preview-row {
  display: flex;
  gap: 8px;
}

.lines98-preview-pearl {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, var(--l98-glow) 18%, var(--l98-color) 62%, #1e1b4b 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.lines98-frame {
  position: relative;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(145deg, #1e1b4b 0%, #312e81 45%, #1e1b4b 100%);
  box-shadow:
    0 12px 32px rgba(49, 46, 129, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lines98-frame--shake {
  animation: lines98-frame-shake 0.38s ease;
}

@keyframes lines98-frame-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.lines98-board {
  --l98-cell: min(42px, calc((min(94vw, 380px) - 4px * (var(--l98-size, 9) - 1)) / var(--l98-size, 9)));
  display: grid;
  grid-template-columns: repeat(var(--l98-size, 9), var(--l98-cell));
  gap: 4px;
  touch-action: manipulation;
}

.lines98-board--enter {
  animation: lines98-board-enter 0.45s ease;
}

@keyframes lines98-board-enter {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.lines98-cell {
  width: var(--l98-cell);
  height: var(--l98-cell);
  padding: 0;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.55), rgba(30, 27, 75, 0.45));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
  position: relative;
}

.lines98-cell--filled {
  background: linear-gradient(145deg, rgba(30, 27, 75, 0.35), rgba(49, 46, 129, 0.25));
}

.lines98-cell--selected {
  box-shadow:
    0 0 0 2px #fde047,
    0 0 14px rgba(250, 204, 21, 0.55),
    inset 0 2px 6px rgba(0, 0, 0, 0.2);
  transform: scale(1.04);
}

.lines98-cell--reachable {
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.35), rgba(99, 102, 241, 0.28));
  box-shadow:
    inset 0 0 0 1px rgba(167, 139, 250, 0.55),
    0 0 10px rgba(139, 92, 246, 0.25);
}

.lines98-cell--reachable::after {
  content: '';
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: rgba(196, 181, 253, 0.35);
  animation: lines98-reach-pulse 1.2s ease infinite;
}

@keyframes lines98-reach-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 0.75; transform: scale(1); }
}

.lines98-cell--dim {
  opacity: 0.55;
}

.lines98-cell--shake {
  animation: lines98-cell-shake 0.35s ease;
}

@keyframes lines98-cell-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.lines98-marble {
  display: block;
  width: 78%;
  height: 78%;
  margin: 11% auto;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff 0%, var(--l98-glow) 16%, var(--l98-color) 58%, color-mix(in srgb, var(--l98-color) 70%, #000) 100%);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.35),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    inset 0 2px 4px rgba(255, 255, 255, 0.35);
  transition: transform 0.07s ease;
}

.lines98-marble--slide {
  transform: scale(1.08);
}

.lines98-flash {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.lines98-flash--clear {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.45), transparent 70%);
}

.lines98-flash--record {
  background: radial-gradient(circle, rgba(253, 224, 71, 0.55), transparent 72%);
}

.lines98-flash--over {
  background: rgba(15, 23, 42, 0.55);
}

.lines98-flash--on {
  animation: lines98-flash 0.52s ease forwards;
}

@keyframes lines98-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.lines98-banner {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%) scale(0.7);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  white-space: nowrap;
}

.lines98-banner--line {
  color: #ede9fe;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.45);
}

.lines98-banner--bonus {
  color: #422006;
  background: linear-gradient(135deg, #fde047, #fbbf24);
  box-shadow: 0 6px 22px rgba(251, 191, 36, 0.5);
}

.lines98-banner--on {
  animation: lines98-banner 0.88s ease forwards;
}

@keyframes lines98-banner {
  0% { opacity: 0; transform: translateX(-50%) scale(0.65); }
  22% { opacity: 1; transform: translateX(-50%) scale(1.06); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.95); }
}

.lines98-bonus {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%) scale(0.6);
  padding: 10px 22px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #422006;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 7;
}

.lines98-bonus--on {
  animation: lines98-bonus 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes lines98-bonus {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.12); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.9); }
}

.lines98-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

.lines98-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  animation: lines98-particle 0.74s ease-out forwards;
}

@keyframes lines98-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--l98-px), var(--l98-py)) scale(0.2); opacity: 0; }
}

.lines98-hint {
  margin: 0;
  font-size: 0.82rem;
  color: #a5b4fc;
  text-align: center;
  max-width: 360px;
  line-height: 1.45;
}

@media (max-width: 640px), (hover: none) {
  .lines98-board {
    --l98-cell: max(36px, calc((min(94vw, 380px) - 4px * (var(--l98-size, 9) - 1)) / var(--l98-size, 9)));
  }

  .lines98-hud-pill {
    font-size: 0.76rem;
    padding: 5px 10px;
  }
}

/* Magic Square */
.magic-square-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.magic-square-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: min(460px, 96vw);
}

.magic-square-hud-item {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #1c1408 28%);
  border: 1px solid rgba(217, 119, 6, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.magic-square-hud-level {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
}

.magic-square-hud-target {
  color: #fcd34d;
  border-color: rgba(252, 211, 77, 0.4);
}

.magic-square-hud-swaps {
  color: #e2e8f0;
}

.magic-square-hud-timer {
  color: #94a3b8;
}

.magic-square-progress {
  width: min(460px, 96vw);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.magic-square-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #b45309, #d97706, #fbbf24);
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.45);
  transition: width 0.28s ease;
}

.magic-square-goal {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #cbd5e1;
  text-align: center;
}

.magic-square-frame {
  position: relative;
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(145deg, #3d2a12 0%, #2a1c0c 45%, #1a1208 100%);
  border: 2px solid rgba(217, 119, 6, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.magic-square-frame--cleared {
  border-color: rgba(250, 204, 21, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 28px rgba(234, 179, 8, 0.35),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.magic-square-board-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    "board rows"
    "cols diags"
    "gap gap";
  gap: 6px 8px;
  align-items: stretch;
}

.magic-square-board {
  grid-area: board;
  display: grid;
  gap: 4px;
  width: min(calc(var(--ms-size, 3) * 52px + 4px * (var(--ms-size, 3) - 1)), 78vw);
  aspect-ratio: 1;
  padding: 10px;
  touch-action: manipulation;
  user-select: none;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 12px,
      rgba(217, 119, 6, 0.04) 12px,
      rgba(217, 119, 6, 0.04) 24px
    ),
    linear-gradient(160deg, #4a3418, #2a1c0c);
  border-radius: 14px;
  border: 1px solid rgba(217, 119, 6, 0.22);
}

.magic-square-board--enter {
  animation: magic-square-board-enter 0.42s cubic-bezier(0.22, 1.1, 0.36, 1);
}

.magic-square-row-sums {
  grid-area: rows;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 4px;
  min-width: 42px;
}

.magic-square-col-sums {
  grid-area: cols;
  display: grid;
  gap: 4px;
}

.magic-square-diags {
  grid-area: diags;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 52px;
}

.magic-square-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0;
  border: 2px solid rgba(217, 119, 6, 0.28);
  border-radius: 10px;
  background: linear-gradient(145deg, #5c4220, #3d2a14);
  color: #fef3c7;
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.25);
}

.magic-square-cell:hover:not(:disabled) {
  filter: brightness(1.08);
}

.magic-square-cell--selected {
  border-color: #fbbf24;
  background: linear-gradient(145deg, #7c5a24, #5c4220);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 16px rgba(251, 191, 36, 0.45);
  transform: scale(1.04);
}

.magic-square-cell--pop {
  animation: magic-square-cell-pop 0.34s cubic-bezier(0.22, 1.2, 0.36, 1);
}

.magic-square-cell--gold {
  border-color: rgba(250, 204, 21, 0.75);
  background: linear-gradient(145deg, #ca8a04, #a16207);
  color: #fffbeb;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 18px rgba(234, 179, 8, 0.55);
  animation: magic-square-gold-pulse 0.8s ease-in-out infinite alternate;
}

.magic-square-sum {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 36px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.2);
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.magic-square-sum--ok {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(22, 101, 52, 0.35);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
  animation: magic-square-sum-glow 0.5s ease;
}

.magic-square-sum--bad {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}

.magic-square-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

.magic-square-flash--active {
  animation: magic-square-flash 0.48s ease forwards;
}

.magic-square-flash--match {
  background: radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.22), transparent 70%);
}

.magic-square-flash--win {
  background: radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.35), transparent 72%);
}

.magic-square-combo {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%) scale(0.6);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  color: #fef9c3;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.85), rgba(22, 163, 74, 0.9));
  border: 2px solid rgba(187, 247, 208, 0.6);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.magic-square-combo--show {
  animation: magic-square-combo-pop 0.9s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
}

.magic-square-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.magic-square-particle {
  position: absolute;
  font-size: 1.1rem;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
  animation: magic-square-particle 1s ease-out var(--ms-delay, 0s) forwards;
}

@keyframes magic-square-board-enter {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes magic-square-cell-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes magic-square-gold-pulse {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.15); }
}

@keyframes magic-square-sum-glow {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes magic-square-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes magic-square-combo-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5) translateY(8px); }
  20% { opacity: 1; transform: translateX(-50%) scale(1.08) translateY(0); }
  80% { opacity: 1; transform: translateX(-50%) scale(1) translateY(-4px); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(-12px); }
}

@keyframes magic-square-particle {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.4); }
}

@media (max-width: 640px) {
  .magic-square-cell {
    min-height: 48px;
    min-width: 48px;
  }

  .magic-square-board {
    width: min(calc(var(--ms-size, 3) * 48px + 4px * (var(--ms-size, 3) - 1)), 72vw);
  }

  .magic-square-frame {
    padding: 8px;
    max-width: 96vw;
  }
}

/* ?? hexa-merge ?? */
.hexa-merge-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  touch-action: manipulation;
}

.hexa-merge-wrap--enter {
  animation: hexa-merge-enter 0.42s ease;
}

.hexa-merge-wrap--shake {
  animation: hexa-merge-shake 0.36s ease;
}

@keyframes hexa-merge-enter {
  0% { opacity: 0; transform: translateY(10px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hexa-merge-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.hexa-merge-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: min(480px, 96vw);
}

.hexa-merge-hud-item {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #0f172a 28%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.hexa-merge-hud-score {
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.4);
}

.hexa-merge-hud-score.hexa-merge-hud-pop {
  animation: hexa-merge-hud-pop 0.32s ease;
}

@keyframes hexa-merge-hud-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.hexa-merge-hud-best {
  color: #e2e8f0;
}

.hexa-merge-hud-max {
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.35);
}

.hexa-merge-combo {
  color: #fde047;
  border-color: rgba(250, 204, 21, 0.45);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hexa-merge-combo--show {
  opacity: 1;
  transform: scale(1);
  animation: hexa-merge-combo-pop 0.5s ease;
}

@keyframes hexa-merge-combo-pop {
  0% { transform: scale(0.7); opacity: 0; }
  35% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.hexa-merge-queue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hexa-merge-queue-slot {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  border: 2px solid rgba(71, 85, 105, 0.5);
  background: rgba(51, 65, 85, 0.4);
  color: #94a3b8;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hexa-merge-queue-slot--active {
  transform: scale(1.12);
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.45);
  border-color: rgba(129, 140, 248, 0.7);
}

.hexa-merge-canvas {
  display: block;
  max-width: min(480px, 96vw);
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(99, 102, 241, 0.28);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.hexa-merge-canvas:active {
  transform: scale(0.995);
}

@media (max-width: 640px) {
  .hexa-merge-hud-item {
    font-size: 0.8rem;
    padding: 5px 10px;
  }

  .hexa-merge-queue-slot {
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
  }
}

/* ?? color-flood ?? */
.color-flood-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  touch-action: manipulation;
}

.color-flood-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: min(560px, 96vw);
}

.color-flood-hud-item {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #0f172a 28%);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.color-flood-hud-level {
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.4);
}

.color-flood-hud-moves {
  color: #e2e8f0;
}

.color-flood-hud-moves.color-flood-hud-pop {
  animation: color-flood-hud-pop 0.32s ease;
}

@keyframes color-flood-hud-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.color-flood-hud-remain {
  color: #94a3b8;
}

.color-flood-hud-remain--warn {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.2);
}

.color-flood-hud-remain--done {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
}

.color-flood-progress {
  flex: 1 1 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.color-flood-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0284c7, #38bdf8, #7dd3fc);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
  transition: width 0.32s ease;
}

.color-flood-goal {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.2);
}

.color-flood-goal--shake {
  animation: color-flood-shake 0.38s ease;
}

@keyframes color-flood-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.color-flood-frame {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background:
    linear-gradient(160deg, #1e3a5f 0%, #0f2744 50%, #0a1929 100%);
  border: 2px solid rgba(56, 189, 248, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 8px rgba(0, 0, 0, 0.45),
    0 14px 36px rgba(0, 0, 0, 0.42);
  max-width: min(calc(var(--cf-size, 12) * 28px + 24px), 96vw);
}

.color-flood-board {
  display: grid;
  grid-template-columns: repeat(var(--cf-size, 12), 1fr);
  gap: clamp(2px, 0.4vw, 4px);
  width: 100%;
  aspect-ratio: 1;
}

.color-flood-board--enter {
  animation: color-flood-board-enter 0.45s ease;
}

@keyframes color-flood-board-enter {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

.color-flood-board--fail {
  animation: color-flood-board-fail 0.5s ease;
}

@keyframes color-flood-board-fail {
  0%, 100% { filter: none; }
  30% { filter: brightness(0.7) saturate(0.6); }
}

.color-flood-board--victory {
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.5));
}

.color-flood-cell {
  aspect-ratio: 1;
  border-radius: clamp(3px, 0.8vw, 6px);
  background: var(--cf-cell-color, #64748b);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.22),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.color-flood-cell--owned {
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.35),
    inset 0 -1px 3px rgba(0, 0, 0, 0.15),
    0 0 8px color-mix(in srgb, var(--cf-cell-color) 60%, transparent);
}

.color-flood-cell--origin {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: -2px;
  z-index: 1;
}

.color-flood-cell--wave {
  animation: color-flood-cell-wave 0.42s ease backwards;
}

@keyframes color-flood-cell-wave {
  0% { transform: scale(0.82); filter: brightness(1.4); }
  55% { transform: scale(1.08); filter: brightness(1.15); }
  100% { transform: scale(1); filter: brightness(1); }
}

.color-flood-cell--victory-wave {
  animation: color-flood-victory-wave 0.6s ease backwards;
}

@keyframes color-flood-victory-wave {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}

.color-flood-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

.color-flood-flash--active {
  animation: color-flood-flash 0.48s ease;
}

.color-flood-flash--ok { background: rgba(56, 189, 248, 0.25); }
.color-flood-flash--clear { background: rgba(125, 211, 252, 0.35); }
.color-flood-flash--fail { background: rgba(248, 113, 113, 0.3); }

@keyframes color-flood-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.color-flood-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  padding: 10px 22px;
  border-radius: 14px;
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #f0f9ff;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.92), rgba(14, 165, 233, 0.88));
  border: 2px solid rgba(186, 230, 253, 0.5);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.color-flood-banner--show {
  animation: color-flood-banner-pop 0.9s ease forwards;
}

.color-flood-banner--clear {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(56, 189, 248, 0.9));
}

.color-flood-banner--level {
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.95), rgba(15, 39, 68, 0.92));
}

@keyframes color-flood-banner-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

.color-flood-combo {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fef08a;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.9), rgba(245, 158, 11, 0.85));
  border: 1px solid rgba(253, 224, 71, 0.5);
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.35);
  opacity: 0;
  transform: scale(0.8) translateY(6px);
  pointer-events: none;
  z-index: 4;
}

.color-flood-combo--show {
  animation: color-flood-combo-pop 0.9s ease;
}

@keyframes color-flood-combo-pop {
  0% { opacity: 0; transform: scale(0.6) translateY(10px); }
  25% { opacity: 1; transform: scale(1.1) translateY(0); }
  70% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.9) translateY(-8px); }
}

.color-flood-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.color-flood-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: color-flood-particle 0.62s ease-out forwards;
}

@keyframes color-flood-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0); opacity: 0; }
}

.color-flood-palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(560px, 96vw);
  padding: 8px 4px;
}

.color-flood-palette--shake {
  animation: color-flood-shake 0.38s ease;
}

.color-flood-color-btn {
  --cf-color: #64748b;
  width: clamp(48px, 12vw, 58px);
  height: clamp(48px, 12vw, 58px);
  min-width: 48px;
  min-height: 48px;
  border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(145deg, color-mix(in srgb, var(--cf-color) 88%, white 12%), var(--cf-color));
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.25),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.color-flood-color-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.3),
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 16px color-mix(in srgb, var(--cf-color) 50%, transparent);
}

.color-flood-color-btn:active {
  transform: translateY(0) scale(0.96);
}

.color-flood-color-btn--current {
  border-color: rgba(255, 255, 255, 0.55);
  filter: brightness(0.75) saturate(0.7);
  cursor: default;
  transform: none;
}

.color-flood-color-btn--current:hover {
  transform: none;
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.25),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (max-width: 640px) {
  .color-flood-frame {
    padding: 8px;
    max-width: 94vw;
  }

  .color-flood-color-btn {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }

  .color-flood-hud-item {
    font-size: 0.8rem;
    padding: 5px 10px;
  }
}

/* ?? mahjong-solitaire ?? */
.mj-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  touch-action: manipulation;
}

.mj-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: min(520px, 96vw);
}

.mj-hud-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 72%, #1a0a0a 28%);
  border: 1px solid rgba(248, 113, 113, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.mj-hud-time {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}

.mj-hud-remain {
  color: #e2e8f0;
}

.mj-hud-best {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.35);
}

.mj-combo {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #fef08a;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.85), rgba(185, 28, 28, 0.9));
  border: 1px solid rgba(252, 165, 165, 0.45);
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.mj-combo--show {
  opacity: 1;
  transform: scale(1);
  animation: mj-combo-pop 0.85s ease;
}

@keyframes mj-combo-pop {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1.1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.95) translateY(-4px); }
}

.mj-progress {
  width: min(520px, 96vw);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.mj-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #b91c1c, #ef4444, #fca5a5);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
  transition: width 0.28s ease;
}

.mj-goal {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #cbd5e1;
  text-align: center;
}

.mj-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.mj-btn {
  min-width: 118px;
  min-height: 44px;
}

.mj-stuck-banner {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.45);
  border: 1px solid rgba(248, 113, 113, 0.35);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mj-stuck-banner--show {
  opacity: 1;
  transform: translateY(0);
  animation: mj-stuck-pulse 1.2s ease infinite alternate;
}

@keyframes mj-stuck-pulse {
  from { box-shadow: 0 0 8px rgba(239, 68, 68, 0.2); }
  to { box-shadow: 0 0 16px rgba(239, 68, 68, 0.45); }
}

.mj-frame {
  position: relative;
  padding: 14px 10px 18px;
  border-radius: 22px;
  max-width: 96vw;
  overflow-x: auto;
  overflow-y: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(220, 38, 38, 0.12), transparent 55%),
    linear-gradient(165deg, #2a1515 0%, #1a0f0f 45%, #120909 100%);
  border: 2px solid rgba(220, 38, 38, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 8px rgba(0, 0, 0, 0.45),
    0 14px 36px rgba(0, 0, 0, 0.42);
}

.mj-board {
  position: relative;
  margin: 0 auto;
  min-height: 120px;
}

.mj-board--enter {
  animation: mj-board-enter 0.42s ease;
}

.mj-board--shuffle {
  animation: mj-board-shuffle 0.4s ease;
}

.mj-board--victory {
  filter: drop-shadow(0 0 22px rgba(251, 191, 36, 0.45));
}

@keyframes mj-board-enter {
  0% { opacity: 0; transform: translateY(10px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mj-board-shuffle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-0.6deg); }
  75% { transform: rotate(0.6deg); }
}

.mj-tile {
  position: absolute;
  width: calc(var(--mj-unit, 22px) * 2);
  height: calc(var(--mj-unit, 22px) * 2.4);
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  background:
    linear-gradient(145deg, #fef9c3 0%, #fde68a 35%, #fbbf24 70%, #d97706 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(146, 64, 14, 0.35),
    0 4px 0 #92400e,
    0 6px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.mj-tile:hover:not(:disabled) {
  transform: translateY(-3px);
  filter: brightness(1.05);
}

.mj-tile-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(1.1rem, 4.5vw, 1.55rem);
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.mj-tile-shine {
  position: absolute;
  inset: 4px 6px auto;
  height: 35%;
  border-radius: 6px 6px 50% 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent);
  pointer-events: none;
}

.mj-tile--open {
  filter: brightness(1.08);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(146, 64, 14, 0.3),
    0 4px 0 #92400e,
    0 0 12px rgba(251, 191, 36, 0.35),
    0 6px 12px rgba(0, 0, 0, 0.35);
}

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

.mj-tile--selected {
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.65),
    0 0 0 3px #fbbf24,
    0 0 18px rgba(251, 191, 36, 0.55),
    0 6px 0 #92400e,
    0 10px 16px rgba(0, 0, 0, 0.4);
  z-index: 200 !important;
}

.mj-tile--hint {
  animation: mj-tile-hint 0.7s ease infinite alternate;
}

@keyframes mj-tile-hint {
  from { box-shadow: 0 0 8px rgba(52, 211, 153, 0.4), 0 4px 0 #92400e; }
  to { box-shadow: 0 0 20px rgba(52, 211, 153, 0.75), 0 4px 0 #92400e; }
}

.mj-tile--shake {
  animation: mj-tile-shake 0.36s ease;
}

@keyframes mj-tile-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.mj-tile--pop {
  animation: mj-tile-pop 0.28s ease forwards;
  pointer-events: none;
}

@keyframes mj-tile-pop {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

.mj-tile--shuffle {
  animation: mj-tile-shuffle 0.38s ease;
}

@keyframes mj-tile-shuffle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg) scale(0.96); }
}

.mj-tile--layer-pop {
  animation: mj-layer-pop 0.48s ease;
}

@keyframes mj-layer-pop {
  0% { transform: translateY(4px); filter: brightness(0.9); }
  50% { transform: translateY(-2px); filter: brightness(1.15); }
  100% { transform: translateY(0); filter: brightness(1.05); }
}

.mj-tile--removed {
  visibility: hidden;
  pointer-events: none;
}

.mj-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 8;
}

.mj-flash--active {
  animation: mj-flash 0.48s ease forwards;
}

.mj-flash--match { background: rgba(251, 191, 36, 0.22); }
.mj-flash--combo { background: rgba(239, 68, 68, 0.28); }
.mj-flash--win { background: radial-gradient(circle, rgba(253, 224, 71, 0.45), transparent 70%); }
.mj-flash--stuck { background: rgba(127, 29, 29, 0.35); }

@keyframes mj-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.mj-clear-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: #422006;
  background: linear-gradient(135deg, #fde047, #facc15);
  box-shadow: 0 8px 28px rgba(250, 204, 21, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}

.mj-clear-banner--show {
  animation: mj-clear-banner 0.95s ease forwards;
}

@keyframes mj-clear-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.95); }
}

.mj-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

.mj-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  animation: mj-particle 0.85s ease-out forwards;
}

@keyframes mj-particle {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0)) scale(0.2); opacity: 0; }
}

.mj-confetti {
  position: absolute;
  font-size: 1.2rem;
  animation: mj-confetti 2s ease-out var(--delay, 0s) forwards;
  pointer-events: none;
}

@keyframes mj-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(540deg); }
}

@media (max-width: 640px) {
  .mj-frame {
    padding: 10px 6px 14px;
  }

  .mj-tile {
    min-width: 44px;
    min-height: 52px;
  }

  .mj-hud-pill {
    font-size: 0.78rem;
    padding: 5px 10px;
  }

  .mj-btn {
    min-width: 100px;
    min-height: 48px;
  }
}

/* ?? Hitori R2 ? mobile board fit + level toolbar ?? */
.hitori-board {
  width: min(calc(var(--hitori-size, 5) * 44px + 4px * (var(--hitori-size, 5) - 1)), 94vw);
  max-width: 94vw;
}

.hitori-cell {
  min-width: 0;
  min-height: 0;
  font-size: clamp(0.75rem, 2.8vw, 1rem);
}

.hitori-frame {
  max-width: 96vw;
}

.hitori-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(520px, 96vw);
}

.hitori-level-select {
  flex: 1;
  min-width: 8rem;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: color-mix(in srgb, var(--bg-elevated) 72%, #0f172a 28%);
  color: #e2e8f0;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.hitori-reset-btn {
  min-height: 44px;
  min-width: 5.5rem;
}

@media (max-width: 640px) {
  .hitori-board {
    gap: clamp(2px, 0.6vw, 4px);
    width: min(calc(var(--hitori-size, 5) * 44px + 4px * (var(--hitori-size, 5) - 1)), 94vw);
    max-width: 94vw;
  }

  .hitori-frame {
    padding: 8px;
  }
}

/* --- hex-catch --- */
.hex-catch-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.hex-catch-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.32),
    0 14px 36px rgba(15, 23, 42, 0.5);
  background: #0c1222;
}

.hex-catch-canvas:active {
  transform: scale(0.996);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.45),
    0 10px 28px rgba(15, 23, 42, 0.55),
    0 0 28px rgba(99, 102, 241, 0.14);
}

@media (max-width: 640px) {
  .hex-catch-canvas {
    border-radius: 10px;
  }
}

/* --- log-hopper --- */
.log-hopper-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.log-hopper-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 0 0 1px rgba(14, 165, 233, 0.28),
    0 14px 36px rgba(12, 74, 110, 0.45);
  background: #0c4a6e;
}

.log-hopper-dpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  max-width: 240px;
  margin: 14px auto 0;
  touch-action: none;
  padding: 0 4px 8px;
}

.log-hopper-btn {
  min-height: 52px;
  min-width: 52px;
  font-size: 22px;
  padding: 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  box-shadow: 0 4px 14px rgba(12, 74, 110, 0.32);
  touch-action: manipulation;
}

.log-hopper-btn.lh-up {
  grid-column: 2;
}

.log-hopper-btn.lh-left {
  grid-column: 1;
  grid-row: 2;
}

.log-hopper-btn.lh-down {
  grid-column: 2;
  grid-row: 2;
}

.log-hopper-btn.lh-right {
  grid-column: 3;
  grid-row: 2;
}

.log-hopper-btn:hover {
  transform: translateY(-1px);
}

.log-hopper-btn:active {
  transform: translateY(1px) scale(0.96);
  box-shadow: 0 2px 6px rgba(12, 74, 110, 0.32);
}

@media (min-width: 769px) {
  .log-hopper-dpad {
    display: none;
  }
}

/* --- spring-ninja --- */
.spring-ninja-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.spring-ninja-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.28),
    0 14px 36px rgba(49, 46, 129, 0.42);
  background: #312e81;
}

/* --- tunnel-rush --- */
.tunnel-rush-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.tunnel-rush-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.32),
    0 14px 36px rgba(15, 23, 42, 0.55);
  background: #0a0614;
}

.tunnel-rush-touch {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
  touch-action: manipulation;
}

.tunnel-rush-touch--left {
  left: 0;
}

.tunnel-rush-touch--right {
  right: 0;
}

@media (min-width: 769px) {
  .tunnel-rush-touch {
    display: none;
  }
}

/* --- zigzag-ball --- */
.zigzag-ball-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.zigzag-ball-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.28),
    0 14px 36px rgba(15, 23, 42, 0.55);
  background: #0b1020;
}

/* --- gravity-flip --- */
.gravity-flip-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.gravity-flip-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(8, 145, 178, 0.32),
    0 14px 36px rgba(15, 23, 42, 0.55);
  background: #071018;
}

/* --- brick-shooter --- */
.brick-shooter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: none;
}

.brick-shooter-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  width: 100%;
}

.brick-shooter-hud span {
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 70%, #312e81 30%);
  border: 1px solid rgba(99, 102, 241, 0.28);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.brick-shooter-hud strong {
  color: #e2e8f0;
  margin-left: 4px;
}

.brick-shooter-hud-round strong {
  color: #a5b4fc;
}

.brick-shooter-hud-balls strong {
  color: #7dd3fc;
}

.brick-shooter-hud-score strong {
  color: #facc15;
}

.brick-shooter-hud-best strong {
  color: #4ade80;
}

.brick-shooter-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: crosshair;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.32),
    0 16px 40px rgba(30, 27, 75, 0.5);
  background: #0f172a;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

.brick-shooter-canvas:active {
  transform: scale(0.996);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.45),
    0 12px 32px rgba(30, 27, 75, 0.55),
    0 0 28px rgba(99, 102, 241, 0.15);
}

/* ?? rope-swing ?? */
.rope-swing-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.rope-swing-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background: #0c4a6e;
}

.rope-swing-touch {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  touch-action: none;
}

@media (max-width: 640px) {
  .rope-swing-wrap {
    max-width: 100%;
  }

  .rope-swing-canvas {
    border-radius: var(--radius-sm);
  }
}

/* --- orbit-jumper --- */
.orbit-jumper-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  touch-action: none;
}

.orbit-jumper-canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.55),
    0 0 0 1px rgba(99, 102, 241, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background: #0b1026;
}

.orbit-jumper-touch {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  touch-action: none;
}

@media (min-width: 641px) {
  .orbit-jumper-touch {
    display: none;
  }
}

/* --- centipede --- */
.centipede-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.centipede-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: crosshair;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow:
    0 0 0 1px rgba(101, 163, 13, 0.32),
    0 14px 36px rgba(20, 83, 45, 0.45);
  background: #052e16;
}

.centipede-canvas:active {
  transform: scale(0.995);
  box-shadow:
    0 0 0 1px rgba(163, 230, 53, 0.42),
    0 10px 28px rgba(20, 83, 45, 0.55),
    0 0 24px rgba(132, 204, 22, 0.14);
}

/* --- train-switch --- */
.train-switch-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.train-switch-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
  box-shadow:
    0 0 0 1px rgba(234, 88, 12, 0.32),
    0 14px 36px rgba(67, 20, 7, 0.48);
  background: #0c1222;
}

.train-switch-canvas:active {
  transform: scale(0.996);
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, 0.45),
    0 10px 28px rgba(67, 20, 7, 0.55),
    0 0 28px rgba(234, 88, 12, 0.14);
}

@media (max-width: 640px) {
  .train-switch-canvas {
    border-radius: 10px;
  }
}

/* --- sky-rings --- */
.sky-rings-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.sky-rings-touch {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.sky-rings-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  transition: transform 0.08s ease-out, box-shadow 0.15s ease;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.28),
    0 14px 36px rgba(14, 116, 144, 0.32);
  background: #7dd3fc;
}

.sky-rings-wrap:active .sky-rings-canvas {
  transform: scale(0.985);
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.45),
    0 10px 28px rgba(14, 116, 144, 0.42),
    0 0 20px rgba(56, 189, 248, 0.18);
}

/* --- fruit-catch --- */
.fruit-catch-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.fruit-catch-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: grab;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
  box-shadow:
    0 0 0 1px rgba(22, 163, 74, 0.35),
    0 14px 36px rgba(5, 46, 22, 0.5);
  background: #052e16;
}

.fruit-catch-canvas:active {
  cursor: grabbing;
  transform: scale(0.996);
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.45),
    0 10px 28px rgba(5, 46, 22, 0.55),
    0 0 28px rgba(34, 197, 94, 0.16);
}

@media (max-width: 640px) {
  .fruit-catch-canvas {
    border-radius: 10px;
  }
}

/* --- ninja-wall --- */
.ninja-wall-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  touch-action: none;
}

.ninja-wall-canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.55),
    0 0 0 1px rgba(220, 38, 38, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background: #0f172a;
}

.ninja-wall-touch {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  touch-action: none;
}

@media (min-width: 641px) {
  .ninja-wall-touch {
    display: none;
  }
}

/* --- snowball-run --- */
.snowball-run-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.snowball-run-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: grab;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.28),
    0 14px 36px rgba(12, 74, 110, 0.5);
  background: #0c4a6e;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

.snowball-run-canvas:active {
  cursor: grabbing;
  transform: scale(0.996);
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.42),
    0 12px 32px rgba(12, 74, 110, 0.55),
    0 0 28px rgba(56, 189, 248, 0.15);
}

/* --- bubble-shooter --- */
.bubble-shooter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: none;
}

.bubble-shooter-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  width: 100%;
  font-size: 0.82rem;
  color: #94a3b8;
}

.bubble-shooter-hud span {
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 70%, #0c4a6e 30%);
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.bubble-shooter-hud strong {
  color: #e2e8f0;
  margin-left: 4px;
}

.bubble-shooter-hud-score strong {
  color: #facc15;
}

.bubble-shooter-hud-combo strong {
  color: #f472b6;
}

.bubble-shooter-hud-shots strong {
  color: #7dd3fc;
}

.bubble-shooter-hud-best strong {
  color: #4ade80;
}

.bubble-shooter-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow:
    0 0 0 1px rgba(6, 182, 212, 0.15),
    0 12px 32px rgba(12, 74, 110, 0.55),
    0 0 24px rgba(56, 189, 248, 0.1);
  background: #0c4a6e;
  cursor: crosshair;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

.bubble-shooter-canvas:active {
  transform: scale(0.996);
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.42),
    0 12px 32px rgba(12, 74, 110, 0.55),
    0 0 28px rgba(56, 189, 248, 0.18);
}

/* --- stair-climb --- */
.stair-climb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.stair-climb-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  width: 100%;
}

.stair-climb-hud span {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.stair-climb-hud-combo {
  color: #fb923c;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.stair-climb-hud-combo--hot {
  color: #fde047;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.45);
  animation: stair-climb-combo-pulse 0.5s ease infinite alternate;
}

@keyframes stair-climb-combo-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

.stair-climb-gauge-wrap {
  width: 100%;
  max-width: 480px;
  padding: 0 4px;
  transition: filter 0.2s ease;
}

.stair-climb-gauge {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.22);
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
}

.stair-climb-gauge-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #34d399, #a3e635);
  transition: width 0.08s linear, background 0.2s ease;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
}

.stair-climb-gauge-wrap--low .stair-climb-gauge-fill {
  background: linear-gradient(90deg, #fbbf24, #f97316);
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.4);
}

.stair-climb-gauge-wrap--crisis {
  animation: stair-climb-crisis-shake 0.35s ease infinite;
}

.stair-climb-gauge-wrap--crisis .stair-climb-gauge-fill {
  background: linear-gradient(90deg, #ef4444, #f97316);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55);
}

.stair-climb-gauge-wrap--save {
  animation: stair-climb-save-flash 0.42s ease;
}

@keyframes stair-climb-crisis-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes stair-climb-save-flash {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.6) drop-shadow(0 0 8px #22d3ee); }
  100% { filter: brightness(1); }
}

.stair-climb-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.28),
    0 14px 36px rgba(15, 23, 42, 0.55);
  background: #0c1222;
}

.stair-climb-tap-zones {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 480px;
}

.stair-climb-tap {
  flex: 1;
  min-height: 52px;
  border: none;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
  color: #e2e8f0;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.stair-climb-tap--left {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.35), rgba(37, 99, 235, 0.55));
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.stair-climb-tap--right {
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.35), rgba(219, 39, 119, 0.55));
  box-shadow: 0 4px 14px rgba(219, 39, 119, 0.25);
}

.stair-climb-tap:active {
  transform: scale(0.97);
}

.stair-climb-hint {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  transition: opacity 0.25s ease;
}

.stair-climb-hint--hide {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* --- cliff-climb --- */
.cliff-climb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: none;
}

.cliff-climb-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  width: 100%;
  font-size: 14px;
  color: #94a3b8;
}

.cliff-climb-hud span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cliff-climb-hud strong {
  color: #e2e8f0;
  font-size: 16px;
}

.cliff-climb-hud-combo {
  color: #fb923c;
  font-weight: 700;
  min-height: 1.2em;
}

.cliff-climb-hud-combo--hot {
  color: #fde047;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  animation: cliff-climb-combo-pulse 0.5s ease infinite alternate;
}

@keyframes cliff-climb-combo-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.cliff-climb-gauge-wrap {
  width: 100%;
  max-width: 360px;
  padding: 0 4px;
}

.cliff-climb-gauge {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.cliff-climb-gauge-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22d3ee);
  transition: width 0.12s ease, background 0.2s ease;
}

.cliff-climb-gauge-wrap--low .cliff-climb-gauge-fill {
  background: linear-gradient(90deg, #f97316, #ef4444);
}

.cliff-climb-gauge-wrap--crisis {
  animation: cliff-climb-crisis-shake 0.35s ease infinite;
}

.cliff-climb-gauge-wrap--crisis .cliff-climb-gauge-fill {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

@keyframes cliff-climb-crisis-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.cliff-climb-canvas {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 14px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.cliff-climb-tap-zones {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 360px;
}

.cliff-climb-tap {
  flex: 1;
  min-height: 52px;
  border: none;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  touch-action: manipulation;
}

.cliff-climb-tap--left {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  color: #eff6ff;
  box-shadow: 0 4px 0 #1e3a8a;
}

.cliff-climb-tap--right {
  background: linear-gradient(180deg, #ec4899, #be185d);
  color: #fdf2f8;
  box-shadow: 0 4px 0 #831843;
}

.cliff-climb-tap:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.cliff-climb-hint {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  transition: opacity 0.25s ease;
}

.cliff-climb-hint--hide {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* --- castle-knock --- */
.castle-knock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: none;
}

.castle-knock-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  width: 100%;
}

.castle-knock-hud span {
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-elevated) 70%, #78350f 30%);
  border: 1px solid rgba(180, 83, 9, 0.32);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.castle-knock-hud strong {
  color: #e2e8f0;
  margin-left: 4px;
}

.castle-knock-hud-stage strong {
  color: #fdba74;
}

.castle-knock-hud-shots strong {
  color: #7dd3fc;
}

.castle-knock-hud-stars strong {
  color: #fde68a;
}

.castle-knock-hud-best strong {
  color: #4ade80;
}

.castle-knock-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: crosshair;
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, 0.35),
    0 16px 40px rgba(67, 20, 7, 0.5);
  background: #1e3a5f;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

.castle-knock-canvas:active {
  transform: scale(0.996);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.4),
    0 12px 32px rgba(67, 20, 7, 0.55),
    0 0 28px rgba(180, 83, 9, 0.18);
}

/* --- submarine-dive --- */
.submarine-dive-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.submarine-dive-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.32),
    0 14px 36px rgba(15, 23, 42, 0.55);
  background: #0c4a6e;
}

/* ?? common-sense-quiz ?? */
.csq-root {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 22px;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(99, 102, 241, 0.14), transparent 55%),
    linear-gradient(165deg, rgba(148, 163, 184, 0.07), transparent 42%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
}

.csq-root--shake { animation: csq-shake 0.48s ease; }
.csq-root--finish {
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3), 0 14px 36px rgba(34, 197, 94, 0.16);
}

@keyframes csq-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.csq-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  border-radius: inherit;
}

.csq-flash--ok { background: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.28), transparent 65%); animation: csq-flash-in 0.32s ease; }
.csq-flash--bad { background: radial-gradient(circle at 50% 40%, rgba(239, 68, 68, 0.26), transparent 65%); animation: csq-flash-in 0.32s ease; }
.csq-flash--warn { background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.24), transparent 65%); animation: csq-flash-in 0.32s ease; }
.csq-flash--win { background: radial-gradient(circle at 50% 40%, rgba(99, 102, 241, 0.3), transparent 65%); animation: csq-flash-in 0.45s ease; }

@keyframes csq-flash-in {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.csq-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.csq-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  animation: csq-particle 0.6s ease-out forwards;
}

@keyframes csq-particle {
  to { transform: translate(var(--csq-px), var(--csq-py)); opacity: 0; }
}

.csq-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--csq-cc, #6366f1);
  animation: csq-confetti 0.85s ease-out forwards;
}

@keyframes csq-confetti {
  to { transform: translate(var(--csq-cx), var(--csq-cy)) rotate(540deg); opacity: 0; }
}

.csq-streak-float,
.csq-badge-float {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 8;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 2px 12px rgba(251, 191, 36, 0.5);
  animation: csq-float 0.78s ease forwards;
  pointer-events: none;
}

.csq-badge-float { color: #a855f7; text-shadow: 0 2px 12px rgba(168, 85, 247, 0.5); font-size: 1.05rem; }

@keyframes csq-float {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}

.csq-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  z-index: 2;
}

.csq-progress,
.csq-score,
.csq-streak {
  font-size: 0.88rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.csq-score--pop { animation: csq-pop 0.36s ease; }

@keyframes csq-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); color: #22c55e; }
}

.csq-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  overflow: hidden;
}

.csq-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.csq-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  z-index: 2;
}

.csq-cat-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.csq-cat-pill--active { opacity: 1; transform: scale(1.05); box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35); }
.csq-cat-pill--badge { opacity: 1; background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(99, 102, 241, 0.15)); border-color: rgba(168, 85, 247, 0.4); }

.csq-timer-bar {
  width: 100%;
  height: 8px;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  overflow: hidden;
}

.csq-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8, #a5b4fc);
  border-radius: 999px;
  transition: width 0.1s linear;
}

.csq-timer-fill--warn {
  background: linear-gradient(90deg, #ef4444, #f97316, #fbbf24);
  animation: csq-timer-pulse 0.6s ease infinite;
}

@keyframes csq-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.csq-timer {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #818cf8;
  font-variant-numeric: tabular-nums;
}

.csq-timer--warn { color: #ef4444; animation: csq-timer-blink 0.5s ease infinite; }

@keyframes csq-timer-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.csq-prompt-card {
  width: 100%;
  padding: 18px 16px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 50%), var(--bg-card);
  border: 2px solid var(--border);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

.csq-prompt-card--enter { animation: csq-card-enter 0.35s ease; }

@keyframes csq-card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.csq-cat-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.csq-cat-badge--science { background: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.35); }
.csq-cat-badge--history { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.35); }
.csq-cat-badge--culture { background: rgba(236, 72, 153, 0.15); border-color: rgba(236, 72, 153, 0.35); }
.csq-cat-badge--life { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.35); }

.csq-prompt {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}

.csq-choices-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.csq-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.csq-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), var(--bg-card);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
}

.csq-choice:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.12);
}

.csq-choice:active:not(:disabled) { transform: scale(0.98); }

.csq-choice-label {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.15);
  font-size: 0.82rem;
  font-weight: 800;
  color: #818cf8;
}

.csq-choice.correct {
  border-color: #22c55e;
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.04)), var(--bg-card);
}

.csq-choice.wrong {
  border-color: var(--danger);
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04)), var(--bg-card);
}

.csq-choice--dim { opacity: 0.45; }
.csq-choice:disabled { cursor: default; }

.csq-feedback {
  min-height: 1.5em;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
}

.csq-feedback.ok { color: #22c55e; }
.csq-feedback.bad { color: var(--danger); }

.csq-explain {
  min-height: 2em;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
  padding: 0 4px;
}

.csq-explain.ok { color: #16a34a; }
.csq-explain.bad { color: var(--text-muted); }

.csq-celebration {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.72);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.35s ease;
}

.csq-celebration--show { opacity: 1; }

.csq-celebration-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
}

.csq-celebration-score {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 0 16px;
}

@media (max-width: 480px) {
  .csq-choice { min-height: 56px; font-size: 0.92rem; }
  .csq-prompt { font-size: 1.02rem; }
}

/* --- digit-span --- */
.ds-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 4px 0 12px;
}

.ds-hud {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.ds-mode-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.ds-mode-btn {
  flex: 1;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(30, 27, 75, 0.5), rgba(15, 23, 42, 0.3));
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.ds-mode-btn--active {
  color: #fff;
  border-color: rgba(124, 58, 237, 0.55);
  background:
    radial-gradient(circle at 30% 20%, rgba(167, 139, 250, 0.35), transparent 55%),
    linear-gradient(155deg, #7c3aed, #5b21b6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 4px 14px rgba(91, 33, 182, 0.35);
}

.ds-mode-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.ds-mode-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.ds-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.ds-stat {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ds-span { color: #a78bfa; }
.ds-fails { color: #f87171; }
.ds-best { color: #fbbf24; }

.ds-fail-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.ds-fail-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s, box-shadow 0.2s;
}

.ds-fail-dot--used {
  background: #ef4444;
  border-color: #fca5a5;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.ds-phase-bar {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.ds-phase-step {
  flex: 1;
  text-align: center;
  padding: 5px 0;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ds-phase-step--current {
  color: #c4b5fd;
  border-color: rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.15);
}

.ds-phase-step--lit {
  color: #a78bfa;
  background: rgba(124, 58, 237, 0.22);
}

.ds-display-zone {
  position: relative;
  width: 100%;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.18), transparent 60%),
    linear-gradient(165deg, rgba(30, 27, 75, 0.55), rgba(15, 23, 42, 0.35));
  border: 1px solid rgba(167, 139, 250, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 28px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

.ds-digit-slots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.ds-slot {
  width: 28px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.ds-slot--lit {
  background: rgba(167, 139, 250, 0.45);
}

.ds-slot--active {
  background: #a78bfa;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.65);
  transform: scaleY(1.4);
}

.ds-active-digit {
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  color: #ede9fe;
  text-shadow:
    0 0 20px rgba(167, 139, 250, 0.7),
    0 2px 8px rgba(15, 23, 42, 0.4);
  min-height: 1.1em;
}

.ds-active-digit--pop {
  animation: ds-digit-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ds-digit-pop {
  0% { transform: scale(0.4); opacity: 0.3; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.ds-perfect-ring {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fde047;
  text-shadow: 0 0 16px rgba(250, 204, 21, 0.8);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
}

.ds-perfect-ring--show {
  animation: ds-perfect-ring 1.1s ease forwards;
}

@keyframes ds-perfect-ring {
  0% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1.08); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

.ds-pb-pop {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45);
  pointer-events: none;
  opacity: 0;
}

.ds-pb-pop--show {
  animation: ds-pb-pop 1.3s ease forwards;
}

@keyframes ds-pb-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.8); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  75% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.95); }
}

.ds-reverse-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  box-shadow: 0 3px 12px rgba(6, 182, 212, 0.4);
  pointer-events: none;
  opacity: 0;
}

.ds-reverse-badge--show {
  animation: ds-reverse-badge 1.5s ease forwards;
}

@keyframes ds-reverse-badge {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7); }
  20% { opacity: 1; transform: translateX(-50%) scale(1.05); }
  80% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.9); }
}

.ds-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
}

.ds-flash--success.ds-flash--active {
  background: rgba(74, 222, 128, 0.22);
  animation: ds-flash 0.42s ease;
}

.ds-flash--fail.ds-flash--active {
  background: rgba(248, 113, 113, 0.22);
  animation: ds-flash 0.42s ease;
}

@keyframes ds-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.ds-input-zone {
  width: 100%;
  transition: transform 0.05s;
}

.ds-input-zone--shake {
  animation: ds-shake 0.45s ease;
}

@keyframes ds-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.ds-input-slots {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ds-input-slot {
  width: 44px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #ede9fe;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(167, 139, 250, 0.2);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

.ds-input-slot--filled {
  background: rgba(124, 58, 237, 0.25);
  border-color: rgba(167, 139, 250, 0.5);
}

.ds-input-slot--cursor {
  border-color: #a78bfa;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.35);
}

.ds-status {
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
  min-height: 1.4em;
}

.ds-status--watch { color: #a78bfa; }
.ds-status--success { color: #4ade80; }
.ds-status--fail { color: #f87171; }

.ds-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  touch-action: manipulation;
}

.ds-pad--disabled {
  opacity: 0.45;
  pointer-events: none;
}

.ds-pad-btn {
  min-height: 54px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(160deg, rgba(30, 27, 75, 0.6), rgba(15, 23, 42, 0.4));
  font-size: 1.35rem;
  font-weight: 800;
  color: #ede9fe;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 3px 10px rgba(15, 23, 42, 0.2);
  transition: transform 0.1s, background 0.14s, box-shadow 0.14s;
  -webkit-tap-highlight-color: transparent;
}

.ds-pad-btn:hover:not(:disabled) {
  background:
    radial-gradient(circle at 30% 20%, rgba(167, 139, 250, 0.2), transparent 55%),
    linear-gradient(160deg, rgba(91, 33, 182, 0.4), rgba(30, 27, 75, 0.5));
}

.ds-pad-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.ds-pad-zero {
  grid-column: 2;
}

.ds-pad-back {
  grid-column: 3;
  font-size: 1.1rem;
  color: #fca5a5;
}

.ds-start-btn {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(155deg, #7c3aed, #5b21b6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 18px rgba(91, 33, 182, 0.4);
  transition: transform 0.12s, filter 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.ds-start-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.ds-start-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 380px) {
  .ds-pad-btn {
    min-height: 48px;
    font-size: 1.2rem;
  }
  .ds-input-slot {
    width: 38px;
    height: 46px;
    font-size: 1.3rem;
  }
  .ds-active-digit {
    font-size: 3rem;
  }
}

/* --- missing-sign --- */
.missing-sign-root {
  position: relative;
  width: min(420px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 16px 22px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(99, 102, 241, 0.18), transparent 55%),
    linear-gradient(165deg, rgba(148, 163, 184, 0.07), transparent 42%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.missing-sign-root--shake {
  animation: ms-shake 0.5s ease;
}

.missing-sign-root--over {
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.3),
    0 12px 32px rgba(239, 68, 68, 0.14);
}

.missing-sign-root--blaze {
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.45),
    0 0 32px rgba(249, 115, 22, 0.22),
    0 12px 32px rgba(15, 23, 42, 0.18);
}

.missing-sign-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.missing-sign-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.missing-sign-flash.is-ok {
  background: radial-gradient(circle at 50% 45%, rgba(99, 102, 241, 0.28), transparent 65%);
  opacity: 1;
}

.missing-sign-flash.is-bad {
  background: radial-gradient(circle at 50% 45%, rgba(239, 68, 68, 0.22), transparent 65%);
  opacity: 1;
}

.missing-sign-flash.is-over {
  background: radial-gradient(circle at 50% 40%, rgba(239, 68, 68, 0.35), transparent 70%);
  opacity: 1;
}

.missing-sign-hud {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.missing-sign-timer-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.missing-sign-timer-ring {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: conic-gradient(
    #6366f1 calc(var(--pct, 100) * 1%),
    rgba(148, 163, 184, 0.15) 0
  );
  opacity: 0.35;
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.missing-sign-timer-wrap--urgent .missing-sign-timer-ring {
  background: conic-gradient(
    #ef4444 calc(var(--pct, 100) * 1%),
    rgba(239, 68, 68, 0.12) 0
  );
  opacity: 0.5;
}

.missing-sign-timer {
  position: relative;
  z-index: 2;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 800;
  color: #6366f1;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent),
    linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.35);
  box-shadow:
    0 4px 14px rgba(99, 102, 241, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.missing-sign-timer--urgent {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
  box-shadow:
    0 4px 16px rgba(239, 68, 68, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: ms-timer-pulse 0.85s ease-in-out infinite;
}

.missing-sign-timer--zero {
  opacity: 0.55;
}

.missing-sign-timer-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.missing-sign-score-badge {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.28);
  box-shadow: 0 3px 12px rgba(99, 102, 241, 0.12);
}

.missing-sign-score-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #818cf8;
  font-variant-numeric: tabular-nums;
}

.missing-sign-score-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}

.missing-sign-combo {
  position: relative;
  z-index: 2;
  min-height: 1.4rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #f59e0b;
  text-align: center;
}

.missing-sign-combo.is-warm {
  color: #fbbf24;
}

.missing-sign-combo.is-hot {
  font-size: 0.95rem;
  color: #f97316;
  text-shadow: 0 0 12px rgba(249, 115, 22, 0.45);
}

.missing-sign-tier {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.missing-sign-problem-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 18px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    var(--bg-card);
  border: 1px solid var(--border);
  box-shadow:
    0 6px 18px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.missing-sign-problem-tag {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #818cf8;
  text-align: center;
}

.missing-sign-problem {
  font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  min-height: 2.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  transition: transform 0.15s ease;
}

.missing-sign-problem--three {
  font-size: clamp(1.15rem, 4.8vw, 1.55rem);
}

.missing-sign-choices-label {
  position: relative;
  z-index: 2;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-muted);
}

.missing-sign-choices {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

.missing-sign-op {
  min-height: 64px;
  padding: 18px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent),
    var(--bg-card);
  border: 2px solid var(--border);
  font-size: clamp(1.6rem, 6vw, 2rem);
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  touch-action: manipulation;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  -webkit-tap-highlight-color: transparent;
}

.missing-sign-op:hover:not(:disabled) {
  border-color: rgba(99, 102, 241, 0.55);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.14), rgba(99, 102, 241, 0.04)),
    var(--bg-card);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.18);
}

.missing-sign-op:active:not(:disabled) {
  transform: scale(0.95);
}

.missing-sign-op:disabled {
  cursor: default;
  opacity: 0.88;
}

.missing-sign-op.reveal {
  border-color: var(--success);
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.28), rgba(16, 185, 129, 0.12));
  color: var(--success);
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.35),
    0 6px 18px rgba(52, 211, 153, 0.22);
  animation: ms-reveal-pulse 0.6s ease;
}

.missing-sign-op.wrong {
  border-color: var(--danger);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.08));
  color: var(--danger);
}

.missing-sign-feedback {
  position: relative;
  z-index: 2;
  min-height: 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.missing-sign-feedback.ok {
  color: var(--success);
}

.missing-sign-feedback.bad {
  color: var(--danger);
}

.missing-sign-bonus-pop {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fde68a;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(234, 88, 12, 0.85));
  border: 1px solid rgba(253, 224, 71, 0.5);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
  pointer-events: none;
  opacity: 0;
}

.missing-sign-bonus-pop.is-show {
  animation: ms-bonus-pop 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.missing-sign-timeup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 14px 28px;
  border-radius: 16px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.92);
  border: 1px solid rgba(239, 68, 68, 0.45);
  box-shadow: 0 12px 32px rgba(127, 29, 29, 0.45);
  pointer-events: none;
  opacity: 0;
}

.missing-sign-timeup.is-show {
  animation: ms-timeup-pop 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.missing-sign-timeup.is-record {
  color: #fde68a;
  background: rgba(120, 53, 15, 0.92);
  border-color: rgba(251, 191, 36, 0.5);
}

.missing-sign-acc-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.missing-sign-acc-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.missing-sign-acc-track {
  flex: 1;
  min-width: 100px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  overflow: hidden;
}

.missing-sign-acc-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #34d399);
  transition: width 0.7s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

.missing-sign-acc-pct {
  font-size: 0.88rem;
  font-weight: 800;
  color: #818cf8;
  font-variant-numeric: tabular-nums;
}

.missing-sign-pop {
  animation: ms-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.missing-sign-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  pointer-events: none;
  animation: ms-particle 0.55s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

.missing-sign-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  animation: ms-confetti 1s ease-out forwards;
}

@keyframes ms-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(4px); }
}

@keyframes ms-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes ms-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes ms-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -24px)) scale(0.2); }
}

@keyframes ms-bonus-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  25% { opacity: 1; transform: translate(-50%, -58%) scale(1.12); }
  70% { opacity: 1; transform: translate(-50%, -62%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(0.95); }
}

@keyframes ms-timeup-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes ms-reveal-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes ms-confetti {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(80px) rotate(540deg); }
}

/* --- math-judge --- */
.mathj-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 8px 4px 12px;
  touch-action: manipulation;
}

.mathj-root--shake {
  animation: mathj-shake 0.48s ease;
}

.mathj-root--over .mathj-eq-wrap {
  opacity: 0.55;
  filter: grayscale(0.2);
}

.mathj-root--fever .mathj-eq-wrap {
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.45),
    0 0 32px rgba(124, 58, 237, 0.28);
}

.mathj-flash {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}

.mathj-flash--ok {
  background: radial-gradient(circle at 50% 40%, rgba(74, 222, 128, 0.35), transparent 68%);
  animation: mathj-flash-in 0.32s ease;
}

.mathj-flash--bad {
  background: radial-gradient(circle at 50% 40%, rgba(248, 113, 113, 0.38), transparent 68%);
  animation: mathj-flash-in 0.32s ease;
}

.mathj-flash--save {
  background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.42), transparent 70%);
  animation: mathj-flash-save 0.55s ease-out;
}

.mathj-flash--win {
  background: radial-gradient(circle at 50% 40%, rgba(167, 139, 250, 0.4), transparent 72%);
  animation: mathj-flash-win 0.65s ease-out;
}

.mathj-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 8;
}

.mathj-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mathj-timer {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 22px;
  color: #e2e8f0;
  background: linear-gradient(145deg, rgba(30, 27, 75, 0.9), rgba(49, 46, 129, 0.75));
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.mathj-timer-num {
  font-variant-numeric: tabular-nums;
}

.mathj-timer-label {
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
}

.mathj-timer--urgent {
  color: #fca5a5;
  animation: mathj-timer-pulse 0.8s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.35);
}

.mathj-score-badge {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}

.mathj-score-num {
  font-size: 22px;
  font-weight: 800;
  color: #4ade80;
  font-variant-numeric: tabular-nums;
}

.mathj-score-label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}

.mathj-lives {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(30, 27, 75, 0.55);
  border: 1px solid rgba(167, 139, 250, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mathj-lives--critical {
  animation: mathj-heart-danger 0.9s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.35);
}

.mathj-lives--save-pop {
  animation: mathj-save-pop 0.52s ease;
}

.mathj-heart {
  font-size: 18px;
  color: #f472b6;
  text-shadow: 0 0 8px rgba(244, 114, 182, 0.5);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.mathj-heart--lost {
  opacity: 0.22;
  transform: scale(0.85);
  color: #64748b;
  text-shadow: none;
}

.mathj-heart--danger {
  color: #f87171;
  animation: mathj-heart-beat 0.7s ease-in-out infinite;
}

.mathj-combo {
  min-height: 28px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: transparent;
  text-align: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.mathj-combo--hot {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
  animation: mathj-combo-pop 0.35s ease;
}

.mathj-combo--blaze {
  color: #fb923c;
  text-shadow: 0 0 16px rgba(251, 146, 60, 0.6);
  animation: mathj-combo-pop 0.35s ease;
}

.mathj-tier {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
}

.mathj-eq-wrap {
  width: 100%;
  padding: 22px 16px;
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(30, 27, 75, 0.92), rgba(49, 46, 129, 0.78)),
    radial-gradient(circle at 20% 20%, rgba(167, 139, 250, 0.12), transparent 55%);
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.15),
    0 16px 36px rgba(15, 23, 42, 0.45);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.mathj-eq {
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 800;
  text-align: center;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: color 0.2s ease, transform 0.2s ease;
}

.mathj-eq--enter {
  animation: mathj-eq-enter 0.3s ease;
}

.mathj-eq--ok {
  color: #4ade80;
  transform: scale(1.04);
}

.mathj-eq--bad {
  color: #f87171;
  animation: mathj-eq-bad 0.35s ease;
}

.mathj-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.mathj-btn {
  min-height: 72px;
  border: none;
  border-radius: 18px;
  font-size: clamp(32px, 9vw, 44px);
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.mathj-btn--o {
  color: #ecfdf5;
  background: linear-gradient(160deg, #22c55e, #15803d);
  box-shadow:
    0 6px 0 #14532d,
    0 12px 28px rgba(34, 197, 94, 0.35);
}

.mathj-btn--x {
  color: #fff1f2;
  background: linear-gradient(160deg, #ef4444, #b91c1c);
  box-shadow:
    0 6px 0 #7f1d1d,
    0 12px 28px rgba(239, 68, 68, 0.35);
}

.mathj-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.mathj-btn:active:not(:disabled) {
  transform: translateY(3px) scale(0.98);
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.4);
}

.mathj-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mathj-hint {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
}

.mathj-hint--hide {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.mathj-float {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: 900;
  pointer-events: none;
  animation: mathj-float 0.7s ease-out forwards;
  z-index: 9;
}

.mathj-float--ok { color: #4ade80; text-shadow: 0 0 12px rgba(74, 222, 128, 0.6); }
.mathj-float--speed { color: #22d3ee; font-size: 26px; text-shadow: 0 0 14px rgba(34, 211, 238, 0.65); }
.mathj-float--combo { color: #fbbf24; }
.mathj-float--save { color: #fde68a; font-size: 24px; text-shadow: 0 0 14px rgba(253, 224, 71, 0.7); }
.mathj-float--bad { color: #f87171; }

.mathj-particle {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mathj-pc, #a78bfa);
  animation: mathj-particle 0.62s ease-out forwards;
}

.mathj-combo-burst {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  color: #fde68a;
  background: rgba(30, 27, 75, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.4);
  animation: mathj-burst 0.68s ease-out forwards;
  z-index: 10;
}

.mathj-confetti {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--mathj-cc, #a78bfa);
  animation: mathj-confetti 0.9s ease-out forwards;
}

@keyframes mathj-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@keyframes mathj-flash-in {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes mathj-flash-save {
  0% { opacity: 0.9; transform: scale(0.96); }
  50% { opacity: 0.5; }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes mathj-flash-win {
  0% { opacity: 0.75; }
  100% { opacity: 0; }
}

@keyframes mathj-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes mathj-heart-danger {
  0%, 100% { box-shadow: 0 0 12px rgba(248, 113, 113, 0.25); }
  50% { box-shadow: 0 0 22px rgba(248, 113, 113, 0.5); }
}

@keyframes mathj-heart-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@keyframes mathj-save-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes mathj-combo-pop {
  0% { transform: scale(0.85); opacity: 0.5; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes mathj-eq-enter {
  0% { opacity: 0; transform: translateY(10px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mathj-eq-bad {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes mathj-float {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.7); }
  40% { opacity: 1; transform: translate(-50%, -80%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(0.9); }
}

@keyframes mathj-particle {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--mathj-px)), calc(-50% + var(--mathj-py))) scale(0.2); }
}

@keyframes mathj-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  30% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}

@keyframes mathj-confetti {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--mathj-cx)), calc(-50% + var(--mathj-cy))) rotate(540deg); }
}

/* --- n-back --- */
.nb-wrap {
  position: relative;
  width: min(420px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 14px 20px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(124, 58, 237, 0.2), transparent 55%),
    linear-gradient(165deg, rgba(148, 163, 184, 0.07), transparent 42%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.nb-wrap--shake {
  animation: nb-shake 0.42s ease;
}

.nb-wrap--streak-warm {
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.35),
    0 0 24px rgba(245, 158, 11, 0.15),
    0 10px 28px rgba(15, 23, 42, 0.12);
}

.nb-wrap--streak-hot {
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, 0.45),
    0 0 32px rgba(249, 115, 22, 0.22),
    0 10px 28px rgba(15, 23, 42, 0.14);
}

.nb-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
}

.nb-phase {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.35);
  color: #c4b5fd;
}

.nb-phase--main {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(167, 139, 250, 0.45);
  color: #ddd6fe;
}

.nb-q,
.nb-best {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.nb-score-block {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.28);
}

.nb-score-label {
  font-size: 0.78rem;
  color: #94a3b8;
}

.nb-score-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: #a78bfa;
  font-variant-numeric: tabular-nums;
}

.nb-streak-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
}

.nb-streak-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  transition: width 0.25s ease;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}

.nb-streak-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.nb-stage {
  position: relative;
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nb-flash {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.nb-flash--on.nb-flash--ok {
  background: radial-gradient(circle at 50% 45%, rgba(52, 211, 153, 0.28), transparent 65%);
  opacity: 1;
}

.nb-flash--on.nb-flash--bad {
  background: radial-gradient(circle at 50% 45%, rgba(239, 68, 68, 0.22), transparent 65%);
  opacity: 1;
}

.nb-flash--on.nb-flash--clear {
  background: radial-gradient(circle at 50% 40%, rgba(124, 58, 237, 0.35), transparent 70%);
  opacity: 1;
}

.nb-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.nb-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  animation: nb-particle 0.62s ease-out forwards;
  box-shadow: 0 0 8px currentColor;
}

.nb-shape-card {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nb-shape-card--pop {
  animation: nb-shape-pop 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.nb-shape-card--correct {
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.35),
    0 8px 24px rgba(52, 211, 153, 0.2);
}

.nb-shape-card--wrong {
  border-color: rgba(239, 68, 68, 0.55);
  animation: nb-shake 0.42s ease;
}

.nb-shape-inner {
  width: 72px;
  height: 72px;
  background: var(--nb-color, #7c3aed);
  box-shadow:
    0 0 20px var(--nb-glow, rgba(124, 58, 237, 0.5)),
    inset 0 2px 8px rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease;
}

.nb-shape--circle {
  border-radius: 50%;
}

.nb-shape--square {
  border-radius: 8px;
}

.nb-shape--triangle {
  width: 0;
  height: 0;
  background: transparent;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  border-bottom: 62px solid var(--nb-color, #7c3aed);
  box-shadow: none;
  filter: drop-shadow(0 0 12px var(--nb-glow, rgba(124, 58, 237, 0.5)));
}

.nb-shape--diamond {
  transform: rotate(45deg);
  border-radius: 6px;
}

.nb-shape--star {
  background: transparent;
  box-shadow: none;
  font-size: 72px;
  line-height: 1;
  width: auto;
  height: auto;
  color: var(--nb-color, #7c3aed);
  text-shadow: 0 0 16px var(--nb-glow, rgba(124, 58, 237, 0.5));
}

.nb-shape--star::before {
  content: '?';
}

.nb-shape--hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.nb-status {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.nb-speed-pop {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fde68a;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.92), rgba(234, 88, 12, 0.88));
  border: 1px solid rgba(253, 224, 71, 0.5);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
  pointer-events: none;
  opacity: 0;
}

.nb-speed-pop--show {
  animation: nb-speed-pop 0.75s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.nb-feedback-pop {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  pointer-events: none;
  opacity: 0;
}

.nb-feedback-pop--show {
  animation: nb-feedback-pop 0.7s ease forwards;
}

.nb-feedback-pop--ok {
  color: #6ee7b7;
  background: rgba(6, 78, 59, 0.85);
  border: 1px solid rgba(52, 211, 153, 0.4);
}

.nb-feedback-pop--bad {
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.nb-feedback-pop--speed {
  color: #fde68a;
  background: rgba(120, 53, 15, 0.9);
}

.nb-grade-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4.5rem;
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 0 30px currentColor;
}

.nb-grade-pop--show {
  animation: nb-grade-pop 1.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.nb-grade-pop--S { color: #fde047; }
.nb-grade-pop--A { color: #a78bfa; }
.nb-grade-pop--B { color: #60a5fa; }
.nb-grade-pop--C { color: #94a3b8; }
.nb-grade-pop--D { color: #f87171; }

.nb-timer-wrap {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
}

.nb-timer-wrap--hide {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.nb-timer-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transition: width 0.05s linear;
}

.nb-timer-fill--warn {
  background: linear-gradient(90deg, #ef4444, #f97316);
}

.nb-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.nb-actions--hide {
  display: none;
}

.nb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 14px 12px;
  border-radius: 16px;
  font-size: 2rem;
  font-weight: 900;
  cursor: pointer;
  border: 2px solid var(--border);
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.nb-btn:active {
  transform: scale(0.96);
}

.nb-btn-sub {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.85;
}

.nb-btn-o {
  color: #6ee7b7;
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.2), rgba(16, 185, 129, 0.08)),
    var(--bg-card);
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: 0 4px 16px rgba(52, 211, 153, 0.15);
}

.nb-btn-o:hover {
  border-color: rgba(52, 211, 153, 0.65);
  box-shadow: 0 6px 20px rgba(52, 211, 153, 0.25);
}

.nb-btn-x {
  color: #fca5a5;
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.18), rgba(220, 38, 38, 0.08)),
    var(--bg-card);
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12);
}

.nb-btn-x:hover {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.22);
}

.nb-hint {
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
}

.nb-main-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  padding: 14px 24px;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #ddd6fe;
  background: rgba(76, 29, 149, 0.92);
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 12px 32px rgba(76, 29, 149, 0.45);
  pointer-events: none;
  animation: nb-banner-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.nb-main-banner--out {
  animation: nb-banner-out 0.5s ease forwards;
}

@keyframes nb-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes nb-shape-pop {
  0% { transform: scale(0.85); opacity: 0.6; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes nb-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--nb-px, 0), var(--nb-py, -30px)) scale(0.2); }
}

@keyframes nb-speed-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  30% { opacity: 1; transform: translateX(-50%) scale(1.1); }
  70% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.9); }
}

@keyframes nb-feedback-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.05); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

@keyframes nb-grade-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  65% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes nb-banner-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes nb-banner-out {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

/* --- typo-hunt --- */
.th-root {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 1rem 0.75rem 1.5rem;
  touch-action: manipulation;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(99, 102, 241, 0.18), transparent 55%),
    linear-gradient(165deg, rgba(30, 27, 75, 0.45) 0%, rgba(15, 23, 42, 0.2) 100%);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.22),
    0 16px 40px rgba(15, 23, 42, 0.45);
  overflow: hidden;
}

.th-root--shake {
  animation: th-shake 0.46s ease;
}

.th-root--hot {
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.35),
    0 0 32px rgba(245, 158, 11, 0.15),
    0 16px 40px rgba(15, 23, 42, 0.45);
}

.th-root--blaze {
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.4),
    0 0 40px rgba(249, 115, 22, 0.22),
    0 16px 40px rgba(15, 23, 42, 0.45);
  animation: th-blaze-glow 0.8s ease-in-out infinite alternate;
}

.th-root--over {
  filter: saturate(0.92);
}

@keyframes th-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes th-blaze-glow {
  from { box-shadow: 0 0 24px rgba(249, 115, 22, 0.18), 0 0 0 1px rgba(239, 68, 68, 0.35); }
  to { box-shadow: 0 0 36px rgba(251, 191, 36, 0.28), 0 0 0 1px rgba(249, 115, 22, 0.45); }
}

.th-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.th-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.th-flash--on.th-flash--ok {
  background: rgba(34, 197, 94, 0.12);
  animation: th-flash-in 0.36s ease forwards;
}

.th-flash--on.th-flash--speed {
  background: rgba(250, 204, 21, 0.16);
  animation: th-flash-in 0.36s ease forwards;
}

.th-flash--on.th-flash--bad {
  background: rgba(239, 68, 68, 0.14);
  animation: th-flash-in 0.36s ease forwards;
}

.th-flash--on.th-flash--over {
  background: rgba(99, 102, 241, 0.12);
  animation: th-flash-in 0.5s ease forwards;
}

@keyframes th-flash-in {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.th-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.th-timer {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-size: 1.75rem;
  font-weight: 800;
  color: #e0e7ff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.th-timer--urgent {
  color: #fca5a5;
  animation: th-timer-pulse 0.75s ease-in-out infinite;
}

.th-timer-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

@keyframes th-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.th-score {
  font-size: 1.1rem;
  font-weight: 700;
  color: #a5b4fc;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(129, 140, 248, 0.25);
}

.th-combo {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s;
}

.th-combo--warm,
.th-combo--hot,
.th-combo--blaze {
  opacity: 1;
  transform: translateY(0);
}

.th-combo--hot {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.th-combo--blaze {
  color: #fb923c;
  animation: th-combo-blaze 0.5s ease-in-out infinite alternate;
}

@keyframes th-combo-blaze {
  from { text-shadow: 0 0 8px rgba(249, 115, 22, 0.4); }
  to { text-shadow: 0 0 18px rgba(251, 191, 36, 0.65); }
}

.th-timer-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 1rem;
}

.th-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  transition: width 0.1s linear;
}

.th-timer-fill--urgent {
  background: linear-gradient(90deg, #ef4444, #f97316);
}

.th-hint {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 0.85rem;
}

.th-sentence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.12rem 0.05rem;
  min-height: 4.5rem;
  padding: 1.1rem 0.75rem;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(129, 140, 248, 0.2);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.2);
  line-height: 1.75;
}

.th-sentence--pop {
  animation: th-sentence-pop 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes th-sentence-pop {
  0% { transform: scale(0.96); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.th-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  min-height: 1.35em;
  padding: 0.15em 0.08em;
  font-size: clamp(1.25rem, 4.5vw, 1.55rem);
  font-weight: 600;
  color: #f1f5f9;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  touch-action: manipulation;
}

.th-char--space {
  min-width: 0.5em;
  cursor: default;
  pointer-events: none;
}

.th-char:not(.th-char--disabled):not(.th-char--space):hover {
  background: rgba(99, 102, 241, 0.22);
  transform: scale(1.08);
}

.th-char:not(.th-char--disabled):not(.th-char--space):active {
  transform: scale(0.95);
}

.th-char--disabled {
  cursor: default;
  pointer-events: none;
}

.th-char--correct {
  background: rgba(34, 197, 94, 0.35) !important;
  color: #bbf7d0;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.45);
  animation: th-char-correct 0.35s ease;
}

.th-char--wrong {
  background: rgba(239, 68, 68, 0.35) !important;
  color: #fecaca;
  animation: th-char-wrong 0.35s ease;
}

.th-char--reveal {
  background: rgba(34, 197, 94, 0.28) !important;
  color: #86efac;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.55);
  animation: th-char-reveal 0.55s ease;
}

@keyframes th-char-correct {
  0% { transform: scale(1); }
  50% { transform: scale(1.22); }
  100% { transform: scale(1.05); }
}

@keyframes th-char-wrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes th-char-reveal {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.8); }
  100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.th-feedback {
  min-height: 1.5rem;
  text-align: center;
  font-size: 0.88rem;
  margin-top: 0.75rem;
  color: var(--text-muted);
}

.th-feedback--ok {
  color: #86efac;
}

.th-feedback--bad {
  color: #fca5a5;
}

.th-start {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 1rem auto 0;
}

.th-summary {
  text-align: center;
  padding: 1rem;
  margin-top: 0.75rem;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.25);
}

.th-summary--show {
  animation: th-summary-in 0.5s ease forwards;
}

@keyframes th-summary-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.th-summary-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #c7d2fe;
  margin-bottom: 0.35rem;
}

.th-summary-score {
  font-size: 1rem;
  font-weight: 600;
  color: #a5b4fc;
}

.th-summary-record {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fbbf24;
}

.th-pop {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 0.95rem;
  font-weight: 800;
  pointer-events: none;
  white-space: nowrap;
  animation: th-pop-rise 0.7s ease-out forwards;
  z-index: 6;
}

.th-pop--ok {
  color: #86efac;
  text-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
}

.th-pop--speed {
  color: #fde047;
  font-size: 1.05rem;
  text-shadow: 0 2px 10px rgba(250, 204, 21, 0.55);
}

.th-pop--bad {
  color: #fca5a5;
}

@keyframes th-pop-rise {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
  20% { opacity: 1; transform: translate(-50%, -12px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -36px) scale(1); }
}

.th-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a5b4fc;
  pointer-events: none;
  animation: th-particle 0.6s ease-out forwards;
}

@keyframes th-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -20px)) scale(0.2); }
}

@media (max-width: 480px) {
  .th-char {
    font-size: clamp(1.35rem, 5.2vw, 1.65rem);
    min-width: 1.45em;
    min-height: 1.45em;
  }

  .th-sentence {
    padding: 1rem 0.5rem;
  }
}

/* --- visual-count --- */
.visual-count-root {
  max-width: 440px;
  margin: 0 auto;
  touch-action: manipulation;
}

.visual-count-hud {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.visual-count-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(139, 92, 246, 0.28);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
}

.visual-count-pill--danger {
  border-color: rgba(248, 113, 113, 0.45);
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.15);
}

.visual-count-pill-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.visual-count-pill-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #e9d5ff;
}

.visual-count-combo {
  min-height: 1.4rem;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: transparent;
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

.visual-count-combo.is-on {
  color: #a78bfa;
  animation: vc-combo-pop 0.35s ease;
}

.visual-count-combo.is-hot {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.visual-count-combo.is-blaze {
  color: #f472b6;
  text-shadow: 0 0 16px rgba(244, 114, 182, 0.55);
  animation: vc-combo-pop 0.35s ease, vc-blaze 0.7s ease-in-out infinite;
}

.visual-count-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.12));
  border: 1px solid rgba(167, 139, 250, 0.35);
  font-weight: 700;
  color: #ddd6fe;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.visual-count-prompt:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(139, 92, 246, 0.2);
}

.visual-count-prompt.is-active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(99, 102, 241, 0.2));
}

.visual-count-target-badge {
  font-size: 1.35rem;
  line-height: 1;
}

.visual-count-arena {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.3),
    0 14px 36px rgba(15, 23, 42, 0.55);
}

.visual-count-arena--shake {
  animation: vc-shake 0.42s ease;
}

.visual-count-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #0f172a;
}

.visual-count-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 27, 75, 0.96));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.visual-count-mask.is-on {
  opacity: 1;
}

.visual-count-mask-text {
  font-size: 1.2rem;
  font-weight: 800;
  color: #c4b5fd;
  text-shadow: 0 0 18px rgba(167, 139, 250, 0.45);
}

.visual-count-flash-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(15, 23, 42, 0.6);
}

.visual-count-flash-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #8b5cf6, #38bdf8);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
}

.visual-count-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.visual-count-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: vc-particle 0.65s ease-out forwards;
}

.visual-count-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.visual-count-flash.is-ok { background: rgba(34, 197, 94, 0.22); }
.visual-count-flash.is-bad { background: rgba(239, 68, 68, 0.24); }
.visual-count-flash.is-over { background: rgba(139, 92, 246, 0.2); }

.visual-count-flash.is-on {
  animation: vc-flash 0.36s ease-out forwards;
}

.visual-count-choices {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.visual-count-choices.is-visible {
  display: grid;
}

.visual-count-choice {
  min-height: 56px;
  border: none;
  border-radius: 14px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ede9fe;
  cursor: pointer;
  background: linear-gradient(145deg, #4c1d95, #312e81);
  border: 1px solid rgba(167, 139, 250, 0.4);
  box-shadow: 0 8px 20px rgba(30, 27, 75, 0.45);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
  touch-action: manipulation;
}

.visual-count-choice:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(76, 29, 149, 0.45);
}

.visual-count-choice:active {
  transform: scale(0.97);
}

.visual-count-choice.is-correct {
  background: linear-gradient(145deg, #15803d, #166534);
  border-color: rgba(74, 222, 128, 0.55);
  animation: vc-choice-pop 0.35s ease;
}

.visual-count-choice.is-wrong {
  background: linear-gradient(145deg, #b91c1c, #7f1d1d);
  border-color: rgba(248, 113, 113, 0.55);
  animation: vc-choice-wrong 0.35s ease;
}

.visual-count-feedback {
  min-height: 1.5rem;
  margin-top: 10px;
  text-align: center;
  font-weight: 700;
  color: var(--text-muted);
}

.visual-count-feedback.is-ok {
  color: #4ade80;
  animation: vc-feedback-pop 0.3s ease;
}

.visual-count-feedback.is-bad {
  color: #f87171;
  animation: vc-feedback-pop 0.3s ease;
}

.visual-count-banner {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 120;
  padding: 14px 22px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fef3c7;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(79, 70, 229, 0.95));
  border: 1px solid rgba(253, 224, 71, 0.45);
  box-shadow: 0 16px 40px rgba(30, 27, 75, 0.55);
  opacity: 0;
  pointer-events: none;
}

.visual-count-banner.is-show {
  animation: vc-banner 1.4s ease forwards;
}

.visual-count-hint {
  margin-top: 10px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

@keyframes vc-combo-pop {
  0% { transform: scale(0.85); opacity: 0.4; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes vc-blaze {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@keyframes vc-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes vc-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

@keyframes vc-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes vc-choice-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes vc-choice-wrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes vc-feedback-pop {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes vc-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

/* --- emoji-riddle --- */
.er-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 20px 16px 22px;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(139, 92, 246, 0.14), transparent 55%),
    linear-gradient(165deg, rgba(148, 163, 184, 0.07), transparent 42%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
}

.er-wrap--shake {
  animation: er-shake 0.48s ease;
}

.er-wrap--complete {
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.35),
    0 14px 36px rgba(139, 92, 246, 0.16);
}

.er-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  border-radius: inherit;
}

.er-flash.is-ok {
  background: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.28), transparent 65%);
  animation: er-flash-in 0.32s ease forwards;
}

.er-flash.is-bad {
  background: radial-gradient(circle at 50% 40%, rgba(239, 68, 68, 0.26), transparent 65%);
  animation: er-flash-in 0.32s ease forwards;
}

.er-flash.is-brilliant {
  background: radial-gradient(circle at 50% 35%, rgba(251, 191, 36, 0.38), transparent 62%);
  animation: er-flash-in 0.42s ease forwards;
}

.er-flash.is-win {
  background: radial-gradient(circle at 50% 40%, rgba(139, 92, 246, 0.32), transparent 65%);
  animation: er-flash-in 0.55s ease forwards;
}

.er-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.er-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}

.er-progress,
.er-score,
.er-streak {
  font-size: 0.88rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent), var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.er-streak--hot {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.er-score--pop {
  animation: er-pop 0.36s ease;
}

.er-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  overflow: hidden;
  z-index: 2;
}

.er-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.er-timer-bar {
  width: 100%;
  height: 8px;
  background: rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  overflow: hidden;
  z-index: 2;
}

.er-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  border-radius: 999px;
  transition: width 0.1s linear;
}

.er-timer-fill--warn {
  background: linear-gradient(90deg, #ef4444, #f97316);
  animation: er-timer-pulse 0.6s ease infinite;
}

.er-timer {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  z-index: 2;
}

.er-timer--warn {
  color: #ef4444;
}

.er-category {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a78bfa;
  z-index: 2;
}

.er-emoji {
  text-align: center;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  line-height: 1.2;
  padding: 16px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.04));
  border: 1px solid rgba(139, 92, 246, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: 2;
}

.er-emoji--pop {
  animation: er-emoji-pop 0.42s ease;
}

.er-hint-box {
  min-height: 1.4em;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #6366f1;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s, transform 0.25s;
  z-index: 2;
}

.er-hint-box--show {
  opacity: 1;
  transform: translateY(0);
}

.er-cue {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
  z-index: 2;
}

.er-form {
  display: flex;
  gap: 8px;
  width: 100%;
  z-index: 2;
}

.er-input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  font-size: 1.05rem;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.er-input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.er-input--bad {
  border-color: #ef4444;
}

.er-input--shake {
  animation: er-shake 0.42s ease;
}

.er-submit-btn {
  min-width: 72px;
  min-height: 48px;
  border-radius: 12px;
}

.er-actions {
  display: flex;
  justify-content: center;
  z-index: 2;
}

.er-hint-btn {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.12), transparent);
}

.er-hint-btn--used {
  opacity: 0.55;
}

.er-feedback {
  min-height: 1.5em;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 2;
}

.er-feedback.ok {
  color: #22c55e;
}

.er-feedback.bad {
  color: #ef4444;
}

.er-drama {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 8;
  font-size: 1.35rem;
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.er-drama--show {
  animation: er-drama-pop 0.72s ease forwards;
}

.er-drama--hot {
  color: #fbbf24;
}

.er-drama--ok {
  color: #a78bfa;
}

.er-brilliant {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 9;
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fbbf24;
  text-shadow:
    0 0 20px rgba(251, 191, 36, 0.8),
    0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
}

.er-brilliant--show {
  animation: er-brilliant-pop 0.88s ease forwards;
}

.er-collection {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(6px);
  z-index: 2;
}

.er-collection--show {
  animation: er-collection-in 0.6s ease 0.3s forwards;
}

.er-celebration {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
}

.er-celebration--show {
  animation: er-celebration-in 0.5s ease 0.15s forwards;
}

.er-celebration-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
}

.er-celebration-score {
  font-size: 1.05rem;
  font-weight: 700;
  color: #c4b5fd;
}

.er-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--er-pc, #8b5cf6);
  box-shadow: 0 0 8px var(--er-pc, #8b5cf6);
  animation: er-particle 0.58s ease-out forwards;
}

.er-confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--er-cc, #8b5cf6);
  border-radius: 2px;
  animation: er-confetti 0.92s ease-out forwards;
  transform: rotate(var(--er-cr, 0deg));
}

@keyframes er-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes er-flash-in {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes er-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes er-emoji-pop {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes er-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

@keyframes er-drama-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes er-brilliant-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.1); }
}

@keyframes er-collection-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes er-celebration-in {
  to { opacity: 1; }
}

@keyframes er-particle {
  to {
    transform: translate(var(--er-px, 0), var(--er-py, 0));
    opacity: 0;
  }
}

@keyframes er-confetti {
  to {
    transform: translate(var(--er-cx, 0), var(--er-cy, 0)) rotate(var(--er-cr, 0deg));
    opacity: 0;
  }
}

@media (max-width: 480px) {
  .er-wrap {
    padding: 14px 12px 18px;
    gap: 12px;
  }

  .er-form {
    flex-direction: column;
  }

  .er-submit-btn {
    width: 100%;
  }
}

/* --- idiom-quiz --- */
.idiom-quiz-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 16px 22px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(251, 191, 36, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(180, 83, 9, 0.1) 0%, transparent 50%),
    linear-gradient(165deg, #1c1917 0%, #292524 45%, #1c1917 100%);
  border: 1px solid rgba(217, 119, 6, 0.35);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.08),
    0 18px 44px rgba(15, 23, 42, 0.45);
  overflow: hidden;
  touch-action: manipulation;
}

.idiom-quiz-wrap--shake {
  animation: idiom-quiz-shake 0.42s ease;
}

@keyframes idiom-quiz-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.idiom-quiz-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.idiom-quiz-progress,
.idiom-quiz-score,
.idiom-quiz-streak {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--bg-elevated) 65%, #78350f 35%);
  border: 1px solid rgba(217, 119, 6, 0.35);
  color: #fde68a;
}

.idiom-quiz-streak--hot {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.55);
  box-shadow: 0 0 14px rgba(251, 146, 60, 0.25);
}

.idiom-quiz-streak--pop {
  animation: idiom-quiz-pop 0.36s ease;
}

.idiom-quiz-score--pop {
  animation: idiom-quiz-pop 0.36s ease;
}

@keyframes idiom-quiz-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.idiom-quiz-timer-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.5);
  overflow: hidden;
  margin-bottom: 6px;
}

.idiom-quiz-timer-bar--urgent {
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
}

.idiom-quiz-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d97706, #fbbf24);
  transition: width 0.1s linear, background 0.25s ease;
}

.idiom-quiz-timer-bar--urgent .idiom-quiz-timer-fill {
  background: linear-gradient(90deg, #ef4444, #f97316);
}

.idiom-quiz-timer {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fcd34d;
  margin-bottom: 10px;
}

.idiom-quiz-timer--urgent {
  color: #fca5a5;
  animation: idiom-quiz-pulse 0.8s ease infinite;
}

@keyframes idiom-quiz-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.idiom-quiz-progress-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  overflow: hidden;
  margin-bottom: 14px;
}

.idiom-quiz-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b45309, #f59e0b);
  transition: width 0.35s ease;
}

.idiom-quiz-mode {
  display: block;
  text-align: center;
  margin: 0 auto 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.idiom-quiz-mode--meaning {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.idiom-quiz-mode--blank {
  background: rgba(168, 85, 247, 0.18);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.idiom-quiz-hint {
  text-align: center;
  font-size: 0.82rem;
  color: #a8a29e;
  margin-bottom: 10px;
}

.idiom-quiz-prompt {
  text-align: center;
  font-size: clamp(1.15rem, 4.5vw, 1.55rem);
  font-weight: 700;
  line-height: 1.45;
  color: #fef3c7;
  padding: 16px 14px;
  margin-bottom: 14px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(120, 53, 15, 0.35) 0%, rgba(41, 37, 36, 0.6) 100%);
  border: 1px solid rgba(251, 191, 36, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  letter-spacing: 0.06em;
}

.idiom-quiz-prompt--enter {
  animation: idiom-quiz-fade-up 0.38s ease;
}

.idiom-quiz-prompt--reveal {
  font-size: clamp(0.95rem, 3.8vw, 1.15rem);
  color: #fcd34d;
  border-color: rgba(34, 197, 94, 0.35);
}

.idiom-quiz-prompt--hard {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.12);
}

@keyframes idiom-quiz-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.idiom-quiz-choices {
  display: grid;
  gap: 10px;
}

.idiom-quiz-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(180, 83, 9, 0.35);
  background: linear-gradient(145deg, rgba(68, 64, 60, 0.85), rgba(41, 37, 36, 0.9));
  color: #fef3c7;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
}

.idiom-quiz-choice--enter {
  animation: idiom-quiz-fade-up 0.35s ease both;
}

.idiom-quiz-choice-label {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(217, 119, 6, 0.25);
  color: #fcd34d;
}

.idiom-quiz-choice-text {
  flex: 1;
  text-align: left;
  letter-spacing: 0.04em;
}

.idiom-quiz-choice--dim {
  opacity: 0.45;
}

.idiom-quiz-choice:disabled {
  cursor: default;
}

.idiom-quiz-choice:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
}

.idiom-quiz-choice:active:not(:disabled) {
  transform: scale(0.98);
}

.idiom-quiz-choice.correct {
  border-color: #22c55e;
  background: linear-gradient(145deg, rgba(22, 101, 52, 0.5), rgba(41, 37, 36, 0.9));
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.25);
}

.idiom-quiz-choice.wrong {
  border-color: #ef4444;
  background: linear-gradient(145deg, rgba(127, 29, 29, 0.45), rgba(41, 37, 36, 0.9));
}

.idiom-quiz-choice--pop {
  animation: idiom-quiz-pop 0.36s ease;
}

.idiom-quiz-feedback {
  min-height: 1.4em;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 12px;
}

.idiom-quiz-feedback.ok {
  color: #4ade80;
}

.idiom-quiz-feedback.bad {
  color: #fca5a5;
}

.idiom-quiz-drama {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  pointer-events: none;
  font-size: clamp(1.1rem, 5vw, 1.6rem);
  font-weight: 800;
  white-space: nowrap;
  z-index: 6;
}

.idiom-quiz-drama.is-visible {
  animation: idiom-quiz-drama 0.9s ease forwards;
}

.idiom-quiz-drama--gold {
  color: #fde047;
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.6);
}

.idiom-quiz-drama--good {
  color: #86efac;
  text-shadow: 0 0 16px rgba(34, 197, 94, 0.45);
}

.idiom-quiz-drama--ok {
  color: #93c5fd;
}

.idiom-quiz-drama--low {
  color: #fca5a5;
}

@keyframes idiom-quiz-drama {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

.idiom-quiz-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.idiom-quiz-flash.is-ok {
  background: rgba(34, 197, 94, 0.12);
  animation: idiom-quiz-flash 0.28s ease;
}

.idiom-quiz-flash.is-bad {
  background: rgba(239, 68, 68, 0.14);
  animation: idiom-quiz-flash 0.28s ease;
}

.idiom-quiz-flash.is-win {
  background: rgba(251, 191, 36, 0.18);
  animation: idiom-quiz-flash 0.65s ease;
}

@keyframes idiom-quiz-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.idiom-quiz-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.idiom-quiz-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc, #f59e0b);
  animation: idiom-quiz-particle 0.5s ease forwards;
}

@keyframes idiom-quiz-particle {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.2); }
}

.idiom-quiz-confetti {
  position: absolute;
  width: 8px;
  height: 12px;
  background: var(--cc, #f59e0b);
  animation: idiom-quiz-confetti 0.9s ease forwards;
}

@keyframes idiom-quiz-confetti {
  from { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  to { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(540deg); }
}

.idiom-quiz-float {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  animation: idiom-quiz-float 0.72s ease forwards;
}

.idiom-quiz-float--ok {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.idiom-quiz-float--hot {
  background: rgba(251, 146, 60, 0.22);
  color: #fdba74;
  border: 1px solid rgba(251, 146, 60, 0.45);
}

.idiom-quiz-float--bonus {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

@keyframes idiom-quiz-float {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  80% { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px) scale(0.9); }
}

@media (max-width: 480px) {
  .idiom-quiz-wrap {
    padding: 14px 12px 18px;
  }

  .idiom-quiz-choice {
    min-height: 56px;
    padding: 14px 12px;
  }

  .idiom-quiz-prompt {
    padding: 14px 10px;
  }
}

/* --- word-chain --- */
.wc-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 4px 0 14px;
  position: relative;
}

.wc-root--shake {
  animation: wc-shake 0.38s ease;
}

@keyframes wc-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.wc-hud {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.wc-diff-bar {
  display: flex;
  gap: 8px;
}

.wc-diff-btn {
  flex: 1;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(15, 118, 110, 0.25), rgba(15, 23, 42, 0.35));
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.wc-diff-btn--active {
  color: #fff;
  border-color: rgba(13, 148, 136, 0.55);
  background:
    radial-gradient(circle at 30% 20%, rgba(45, 212, 191, 0.35), transparent 55%),
    linear-gradient(155deg, #0d9488, #0f766e);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 4px 14px rgba(13, 148, 136, 0.35);
}

.wc-diff-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.wc-diff-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.wc-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.wc-stat {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.wc-chain-stat { color: #5eead4; }
.wc-best-stat { color: #fbbf24; }
.wc-need-stat { color: #93c5fd; }

.wc-timer-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.wc-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d9488, #2dd4bf);
  transition: width 0.35s linear, background 0.2s;
}

.wc-timer-bar--warn .wc-timer-fill {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}

.wc-timer-bar--danger {
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}

.wc-timer-bar--danger .wc-timer-fill {
  background: linear-gradient(90deg, #dc2626, #f87171);
}

.wc-timer {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ccfbf1;
  letter-spacing: 0.04em;
}

.wc-arena {
  position: relative;
  width: 100%;
}

.wc-current-card {
  position: relative;
  padding: 22px 18px;
  border-radius: 16px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 0%, rgba(45, 212, 191, 0.18), transparent 50%),
    linear-gradient(155deg, rgba(15, 118, 110, 0.35), rgba(15, 23, 42, 0.55));
  border: 1px solid rgba(45, 212, 191, 0.25);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 24px rgba(0, 0, 0, 0.25);
}

.wc-current-card--pop {
  animation: wc-card-pop 0.34s ease;
}

@keyframes wc-card-pop {
  0% { transform: scale(0.94); }
  55% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.wc-current-label {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.25);
  color: #99f6e4;
  margin-bottom: 8px;
}

.wc-current-word {
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(45, 212, 191, 0.35);
}

.wc-chain-pop {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%) scale(0.85);
  opacity: 0;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #fde047;
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid rgba(250, 204, 21, 0.45);
  pointer-events: none;
}

.wc-chain-pop--on {
  animation: wc-chain-pop 0.72s ease forwards;
}

@keyframes wc-chain-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.8); }
  25% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  75% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(0.92); }
}

.wc-chain-list {
  width: 100%;
  max-height: 140px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.wc-chain-scroll {
  max-height: 140px;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wc-chain-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  animation: wc-item-in 0.28s ease;
}

@keyframes wc-item-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.wc-chain-item--ai {
  background: rgba(13, 148, 136, 0.15);
}

.wc-chain-item--you {
  background: rgba(99, 102, 241, 0.15);
}

.wc-chain-tag {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  color: #a5b4fc;
}

.wc-chain-item--ai .wc-chain-tag { color: #5eead4; }

.wc-chain-word {
  font-weight: 700;
  color: #f1f5f9;
}

.wc-input-zone {
  display: flex;
  gap: 8px;
  width: 100%;
}

.wc-input {
  flex: 1;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.wc-input:focus {
  border-color: rgba(45, 212, 191, 0.55);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.wc-input:disabled {
  opacity: 0.5;
}

.wc-submit-btn {
  min-width: 72px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  border: none;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(155deg, #0d9488, #0f766e);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
  transition: transform 0.1s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.wc-submit-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.wc-submit-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.wc-status {
  min-height: 1.4em;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.wc-status--ok { color: #4ade80; }
.wc-status--bad { color: #fca5a5; }

.wc-start-btn {
  min-height: 46px;
  padding: 0 28px;
  border-radius: 12px;
  border: none;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(155deg, #14b8a6, #0d9488);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.4);
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.wc-start-btn:active {
  transform: scale(0.97);
}

.wc-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 12px;
  z-index: 4;
}

.wc-flash--on.wc-flash--ok {
  background: rgba(34, 197, 94, 0.12);
  animation: wc-flash 0.3s ease;
}

.wc-flash--on.wc-flash--bad {
  background: rgba(239, 68, 68, 0.14);
  animation: wc-flash 0.3s ease;
}

.wc-flash--on.wc-flash--win {
  background: rgba(251, 191, 36, 0.18);
  animation: wc-flash 0.65s ease;
}

@keyframes wc-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.wc-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.wc-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pc, #2dd4bf);
  animation: wc-particle 0.5s ease forwards;
}

@keyframes wc-particle {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.2); }
}

.wc-confetti {
  position: absolute;
  width: 8px;
  height: 12px;
  background: var(--cc, #f59e0b);
  animation: wc-confetti 0.9s ease forwards;
}

@keyframes wc-confetti {
  from { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  to { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(540deg); }
}

@media (max-width: 480px) {
  .wc-input {
    min-height: 52px;
    font-size: 1.1rem;
  }

  .wc-submit-btn {
    min-height: 52px;
    min-width: 64px;
  }

  .wc-diff-btn {
    min-height: 44px;
  }
}

/* --- word-chain (play module) --- */
.word-chain-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 4px 0 14px;
  position: relative;
}

.word-chain-wrap--shake {
  animation: word-chain-shake 0.38s ease;
}

.word-chain-wrap--win .word-chain-current {
  box-shadow: 0 0 28px rgba(34, 197, 94, 0.35);
}

@keyframes word-chain-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.word-chain-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.word-chain-chain {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #5eead4;
  background: rgba(13, 148, 136, 0.18);
  border: 1px solid rgba(45, 212, 191, 0.28);
  transition: transform 0.2s, box-shadow 0.2s;
}

.word-chain-chain--hot {
  color: #fde047;
  border-color: rgba(250, 204, 21, 0.45);
  background: rgba(234, 179, 8, 0.15);
}

.word-chain-chain--mega {
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.25);
}

.word-chain-chain--pop {
  animation: word-chain-chain-pop 0.32s ease;
}

@keyframes word-chain-chain-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.word-chain-best {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fbbf24;
}

.word-chain-diff {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.word-chain-diff--hidden {
  display: none;
}

.word-chain-diff-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}

.word-chain-diff-btns {
  display: flex;
  gap: 8px;
}

.word-chain-diff-btn {
  flex: 1;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.22), rgba(15, 23, 42, 0.35));
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.word-chain-diff-btn--active {
  color: #fff;
  border-color: rgba(139, 92, 246, 0.55);
  background: linear-gradient(155deg, #7c3aed, #6d28d9);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.word-chain-start--hidden {
  display: none;
}

.word-chain-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.word-chain-board--hidden {
  display: none;
}

.word-chain-status {
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
}

.word-chain-current {
  padding: 20px 16px;
  border-radius: 16px;
  text-align: center;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  background:
    radial-gradient(circle at 20% 0%, rgba(167, 139, 250, 0.2), transparent 50%),
    linear-gradient(155deg, rgba(91, 33, 182, 0.35), rgba(15, 23, 42, 0.55));
  border: 1px solid rgba(167, 139, 250, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.word-chain-req {
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: #c4b5fd;
}

.word-chain-timer-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.word-chain-timer-bar--urgent {
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
}

.word-chain-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transition: width 0.35s linear, background 0.2s;
}

.word-chain-wrap:has(.word-chain-timer--urgent) .word-chain-timer-fill {
  background: linear-gradient(90deg, #dc2626, #f87171);
}

.word-chain-timer {
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ddd6fe;
}

.word-chain-timer--urgent {
  color: #fca5a5;
  animation: word-chain-timer-pulse 0.8s ease infinite;
}

@keyframes word-chain-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.word-chain-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 28px;
}

.word-chain-recent-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.word-chain-chip {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

.word-chain-chip--last {
  border-color: rgba(167, 139, 250, 0.45);
  color: #ddd6fe;
}

.word-chain-input-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.word-chain-input {
  flex: 1;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  outline: none;
}

.word-chain-input:focus {
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.word-chain-submit {
  min-width: 72px;
  min-height: 48px;
}

.word-chain-feedback {
  min-height: 1.2em;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
}

.word-chain-feedback.bad {
  color: #fca5a5;
}

.word-chain-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0;
  z-index: 2;
}

.word-chain-flash--on {
  opacity: 1;
}

.word-chain-flash--ok { background: rgba(34, 197, 94, 0.12); }
.word-chain-flash--bad { background: rgba(239, 68, 68, 0.12); }
.word-chain-flash--win { background: rgba(167, 139, 250, 0.18); }

.word-chain-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 3;
}

.word-chain-float {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  animation: word-chain-float 0.88s ease forwards;
}

.word-chain-float--ok { color: #86efac; background: rgba(34, 197, 94, 0.2); }
.word-chain-float--hot { color: #fde047; background: rgba(234, 179, 8, 0.22); }
.word-chain-float--bad { color: #fca5a5; background: rgba(239, 68, 68, 0.2); }

@keyframes word-chain-float {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  80% { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px) scale(0.9); }
}

.word-chain-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: word-chain-particle 0.72s ease forwards;
}

@keyframes word-chain-particle {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

@media (max-width: 480px) {
  .word-chain-input,
  .word-chain-submit {
    min-height: 52px;
  }

  .word-chain-diff-btn {
    min-height: 44px;
  }
}

/* odd-one-out */
.ooo-root {
  --ooo-accent: #7c3aed;
  --ooo-accent2: #a78bfa;
  --ooo-bg: linear-gradient(165deg, #1e1b4b 0%, #312e81 42%, #4c1d95 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 12px 18px;
  border-radius: 18px;
  background: var(--ooo-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 32px rgba(30, 27, 75, 0.45);
  overflow: hidden;
  touch-action: manipulation;
  min-height: 360px;
}

.ooo-root::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(167, 139, 250, 0.18), transparent 42%),
    radial-gradient(circle at 82% 88%, rgba(124, 58, 237, 0.14), transparent 38%);
  pointer-events: none;
}

.ooo-hud {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ooo-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ooo-timer-ring {
  --pct: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: conic-gradient(#a78bfa calc(var(--pct) * 360deg), rgba(255, 255, 255, 0.12) 0);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
}

.ooo-timer {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15, 10, 40, 0.85);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ede9fe;
}

.ooo-timer-label {
  font-size: 0.68rem;
  color: rgba(237, 233, 254, 0.7);
  font-weight: 600;
}

.ooo-score-badge,
.ooo-best-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ooo-score-num,
.ooo-best-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: #f5f3ff;
  line-height: 1.1;
}

.ooo-score-label,
.ooo-best-label {
  font-size: 0.68rem;
  color: rgba(237, 233, 254, 0.72);
  font-weight: 600;
}

.ooo-combo {
  position: relative;
  z-index: 2;
  min-height: 1.4rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: transparent;
  transition: color 0.2s;
}

.ooo-combo.is-active {
  color: #fde047;
  text-shadow: 0 0 12px rgba(253, 224, 71, 0.55);
  animation: ooo-combo-pop 0.35s ease;
}

.ooo-combo.is-blaze {
  color: #fb923c;
  text-shadow: 0 0 16px rgba(251, 146, 60, 0.65);
}

@keyframes ooo-combo-pop {
  0% { transform: scale(0.85); opacity: 0.4; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.ooo-tier {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(237, 233, 254, 0.78);
  font-weight: 600;
}

.ooo-hard-tag {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fef3c7;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.45);
}

.ooo-prompt {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ede9fe;
  padding: 4px 8px;
}

.ooo-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.ooo-word {
  position: relative;
  min-height: 88px;
  padding: 14px 10px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  overflow: hidden;
}

.ooo-word::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.4s ease;
}

.ooo-word:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.35);
}

.ooo-word:active:not(:disabled) {
  transform: scale(0.97);
}

.ooo-word-text {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: #f5f3ff;
  line-height: 1.25;
  word-break: keep-all;
}

.ooo-word--hit {
  background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%) !important;
  animation: ooo-hit 0.32s ease;
}

.ooo-word--miss {
  background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%) !important;
  animation: ooo-shake-cell 0.4s ease;
}

.ooo-word--reveal {
  box-shadow: 0 0 0 3px #fde047, 0 0 20px rgba(253, 224, 71, 0.5) !important;
}

@keyframes ooo-hit {
  0% { transform: scale(0.92); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes ooo-shake-cell {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.ooo-explain {
  position: relative;
  z-index: 2;
  min-height: 2.4rem;
  padding: 8px 12px;
  border-radius: 12px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: transparent;
  background: transparent;
  transition: all 0.25s ease;
}

.ooo-explain.is-show {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.35);
  animation: ooo-explain-in 0.3s ease;
}

@keyframes ooo-explain-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ooo-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.ooo-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ooo-flash.is-ok { background: rgba(34, 197, 94, 0.22); opacity: 1; }
.ooo-flash.is-bonus { background: rgba(245, 158, 11, 0.28); opacity: 1; }
.ooo-flash.is-bad { background: rgba(239, 68, 68, 0.24); opacity: 1; }
.ooo-flash.is-over { background: rgba(124, 58, 237, 0.32); opacity: 1; }

.ooo-pop {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  animation: ooo-pop-float 0.88s ease forwards;
}

.ooo-pop--ok { color: #86efac; background: rgba(34, 197, 94, 0.25); }
.ooo-pop--bonus { color: #fde047; background: rgba(234, 179, 8, 0.28); font-size: 1.05rem; }
.ooo-pop--bad { color: #fca5a5; background: rgba(239, 68, 68, 0.22); }

@keyframes ooo-pop-float {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -58%) scale(1.08); }
  80% { opacity: 1; transform: translate(-50%, -72%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -88%) scale(0.9); }
}

.ooo-particle {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c4b5fd;
  animation: ooo-particle 0.72s ease forwards;
}

@keyframes ooo-particle {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.ooo-root--shake {
  animation: ooo-shake-root 0.45s ease;
}

@keyframes ooo-shake-root {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.ooo-root--urgent .ooo-timer {
  color: #fca5a5;
  animation: ooo-urgent-pulse 0.8s ease infinite;
}

.ooo-root--hard .ooo-prompt {
  color: #fde047;
}

.ooo-root--over {
  filter: saturate(1.1);
}

@keyframes ooo-urgent-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@media (max-width: 480px) {
  .ooo-word {
    min-height: 96px;
  }

  .ooo-word-text {
    font-size: 1.2rem;
  }
}

/* ?? time-order ?? */
.to-root {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 22px;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(180, 83, 9, 0.16), transparent 55%),
    linear-gradient(165deg, rgba(148, 163, 184, 0.07), transparent 42%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
}

.to-root--shake { animation: to-shake 0.48s ease; }
.to-root--finish {
  box-shadow: 0 0 0 1px rgba(180, 83, 9, 0.35), 0 14px 36px rgba(180, 83, 9, 0.18);
}

@keyframes to-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.to-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  border-radius: inherit;
}

.to-flash--on { opacity: 1; }
.to-flash--ok { background: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.28), transparent 65%); animation: to-flash-in 0.32s ease; }
.to-flash--partial { background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.24), transparent 65%); animation: to-flash-in 0.32s ease; }
.to-flash--bad { background: radial-gradient(circle at 50% 40%, rgba(239, 68, 68, 0.26), transparent 65%); animation: to-flash-in 0.32s ease; }
.to-flash--win { background: radial-gradient(circle at 50% 40%, rgba(180, 83, 9, 0.3), transparent 65%); animation: to-flash-in 0.45s ease; }

@keyframes to-flash-in {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.to-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.to-particle {
  position: fixed;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  animation: to-particle 0.6s ease-out forwards;
}

@keyframes to-particle {
  to { transform: translate(var(--to-px), var(--to-py)); opacity: 0; }
}

.to-float {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 8;
  font-size: 1.2rem;
  font-weight: 800;
  animation: to-float 0.88s ease forwards;
}

.to-float--ok { color: #86efac; background: rgba(34, 197, 94, 0.2); padding: 6px 14px; border-radius: 999px; }
.to-float--hot { color: #fde047; background: rgba(234, 179, 8, 0.22); padding: 6px 14px; border-radius: 999px; }

@keyframes to-float {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  80% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(0.9); }
}

.to-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 2;
}

.to-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid var(--border);
}

.to-pill--round { color: #b45309; }
.to-pill--score { color: var(--text); }
.to-pill--combo { color: #94a3b8; }
.to-pill--hot {
  color: #fde047;
  background: rgba(234, 179, 8, 0.18);
  border-color: rgba(234, 179, 8, 0.35);
  animation: to-combo-pulse 0.6s ease infinite alternate;
}

@keyframes to-combo-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

.to-hint {
  margin: 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.to-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}

.to-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 10px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(15, 23, 42, 0.04));
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.2s ease;
  touch-action: none;
}

.to-card:active { cursor: grabbing; }
.to-card--dragging {
  transform: scale(1.03);
  box-shadow: 0 8px 22px rgba(180, 83, 9, 0.22);
  border-color: rgba(180, 83, 9, 0.45);
  z-index: 3;
}

.to-card--locked { cursor: default; pointer-events: none; }
.to-card--ok {
  border-color: rgba(34, 197, 94, 0.55);
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.12), rgba(15, 23, 42, 0.04));
}
.to-card--bad {
  border-color: rgba(239, 68, 68, 0.5);
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(15, 23, 42, 0.04));
}

.to-grip {
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: -2px;
  user-select: none;
}

.to-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.to-field {
  font-size: 0.72rem;
  font-weight: 700;
  color: #b45309;
  opacity: 0.9;
}

.to-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: keep-all;
}

.to-year {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.to-year--reveal {
  color: #b45309;
  animation: to-year-pop 0.35s ease;
}

@keyframes to-year-pop {
  0% { transform: scale(0.9); opacity: 0.5; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.to-move-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.to-move-btn {
  width: 36px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.to-move-btn:hover:not(:disabled) { background: rgba(180, 83, 9, 0.12); }
.to-move-btn:active:not(:disabled) { transform: scale(0.94); }
.to-move-btn:disabled { opacity: 0.35; cursor: default; }

.to-confirm {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 6px 18px rgba(180, 83, 9, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
  z-index: 2;
}

.to-confirm:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(180, 83, 9, 0.42);
}

.to-confirm:active:not(:disabled) { transform: translateY(1px); }
.to-confirm:disabled { opacity: 0.55; cursor: default; }

@media (max-width: 480px) {
  .to-card { padding: 14px 10px; }
  .to-move-btn { width: 40px; height: 36px; }
  .to-confirm { min-height: 52px; }
}

/* --- binary-rush --- */
.br-root {
  position: relative;
  width: min(440px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 14px 20px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(5, 150, 105, 0.2), transparent 55%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 18px,
      rgba(5, 150, 105, 0.04) 18px,
      rgba(5, 150, 105, 0.04) 19px
    ),
    linear-gradient(165deg, rgba(15, 23, 42, 0.06), transparent 45%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.br-root--shake {
  animation: br-shake 0.48s ease;
}

.br-root--blaze {
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.45),
    0 0 32px rgba(16, 185, 129, 0.22),
    0 12px 32px rgba(15, 23, 42, 0.18);
}

.br-root--over {
  box-shadow:
    0 0 0 1px rgba(5, 150, 105, 0.35),
    0 12px 32px rgba(5, 150, 105, 0.14);
}

@keyframes br-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.br-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
}

.br-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.br-flash--ok {
  background: radial-gradient(circle at 50% 42%, rgba(16, 185, 129, 0.3), transparent 65%);
  opacity: 1;
}

.br-flash--bad {
  background: radial-gradient(circle at 50% 42%, rgba(239, 68, 68, 0.22), transparent 65%);
  opacity: 1;
}

.br-flash--over {
  background: radial-gradient(circle at 50% 40%, rgba(5, 150, 105, 0.32), transparent 70%);
  opacity: 1;
}

.br-flash--hacker {
  background: radial-gradient(circle at 50% 35%, rgba(52, 211, 153, 0.38), transparent 68%);
  opacity: 1;
}

.br-hacker {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  z-index: 12;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #ecfdf5;
  background: linear-gradient(135deg, #059669, #047857 55%, #064e3b);
  border: 2px solid rgba(110, 231, 183, 0.7);
  box-shadow:
    0 0 24px rgba(16, 185, 129, 0.55),
    0 0 48px rgba(5, 150, 105, 0.35);
  opacity: 0;
  pointer-events: none;
}

.br-hacker.is-show {
  animation: br-hacker-pop 1.3s ease forwards;
}

@keyframes br-hacker-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  15% { opacity: 1; transform: translateX(-50%) scale(1.12); }
  30% { transform: translateX(-50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.05) translateY(-8px); }
}

.br-hud {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
}

.br-timer-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.br-timer-ring {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: conic-gradient(var(--accent) 100%, rgba(148, 163, 184, 0.15) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.br-timer-wrap--urgent .br-timer-ring {
  animation: br-ring-pulse 0.9s ease infinite;
}

@keyframes br-ring-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.br-timer {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  background: var(--bg-elevated);
  border: 2px solid var(--border);
}

.br-timer--urgent {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
}

.br-timer-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.br-score-badge {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(5, 150, 105, 0.14), rgba(5, 150, 105, 0.06));
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.br-score-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #059669;
}

.br-score-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.br-combo {
  position: relative;
  z-index: 2;
  min-height: 1.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.br-combo.is-warm {
  opacity: 1;
  color: #10b981;
}

.br-combo.is-hot {
  opacity: 1;
  color: #34d399;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
  animation: br-combo-pulse 0.6s ease infinite alternate;
}

@keyframes br-combo-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.br-tier {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

.br-problem-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.08), transparent);
  border: 1px solid var(--border);
}

.br-mode-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #10b981;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.br-target {
  font-size: 2.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}

.br-target--binary {
  font-size: 1.65rem;
  letter-spacing: 0.14em;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  color: #34d399;
}

.br-binary-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.br-sum-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid var(--border);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.br-sum-wrap--hidden {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: none;
}

.br-sum-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.br-sum-value {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #059669;
}

.br-bit-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 360px;
}

.br-bit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 8px;
  border-radius: 12px;
  border: 2px solid rgba(100, 116, 139, 0.35);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.12), rgba(15, 23, 42, 0.08));
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 72px;
}

.br-bit:active:not(:disabled) {
  transform: scale(0.94);
}

.br-bit--inactive {
  opacity: 0.28;
  pointer-events: none;
}

.br-bit--on {
  border-color: rgba(16, 185, 129, 0.65);
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.18), rgba(4, 120, 87, 0.1));
  box-shadow:
    0 0 14px rgba(16, 185, 129, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.br-bit--on .br-bit-led {
  background: radial-gradient(circle at 35% 30%, #6ee7b7, #059669 55%, #047857);
  box-shadow:
    0 0 10px rgba(52, 211, 153, 0.8),
    0 0 20px rgba(16, 185, 129, 0.45);
}

.br-bit--wave {
  animation: br-bit-wave 0.36s ease;
}

@keyframes br-bit-wave {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); box-shadow: 0 0 22px rgba(52, 211, 153, 0.7); }
  100% { transform: scale(1); }
}

.br-bit.reveal {
  border-color: rgba(250, 204, 21, 0.7);
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.35);
}

.br-bit-led {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #475569, #1e293b 70%);
  border: 2px solid rgba(71, 85, 105, 0.6);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.br-bit-weight {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.br-bit-state {
  font-size: 0.9rem;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  color: var(--text);
}

.br-choices {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 320px;
}

.br-choice {
  min-height: 56px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.08), transparent);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}

.br-choice:active:not(:disabled) {
  transform: scale(0.95);
}

.br-choice.reveal {
  border-color: rgba(16, 185, 129, 0.65);
  background: linear-gradient(160deg, rgba(5, 150, 105, 0.2), rgba(5, 150, 105, 0.08));
  color: #059669;
}

.br-action-row {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}

.br-submit,
.br-start {
  flex: 1;
  min-height: 48px;
  border-radius: 14px;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.br-submit {
  color: #ecfdf5;
  background: linear-gradient(160deg, #10b981, #059669 55%, #047857);
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

.br-submit:active:not(:disabled) {
  transform: scale(0.96);
}

.br-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.br-start {
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--border);
}

.br-start:active {
  transform: scale(0.96);
}

.br-feedback {
  position: relative;
  z-index: 2;
  min-height: 1.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
}

.br-feedback.is-ok {
  color: #059669;
}

.br-feedback.is-bad {
  color: #ef4444;
}

.br-float {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: 800;
  pointer-events: none;
  animation: br-float 0.72s ease forwards;
}

.br-float--ok {
  color: #10b981;
}

.br-float--bonus {
  color: #34d399;
  font-size: 1.25rem;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
}

.br-float--bad {
  color: #ef4444;
}

@keyframes br-float {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  80% { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px) scale(0.9); }
}

@media (max-width: 480px) {
  .br-bit {
    min-height: 64px;
    padding: 8px 4px 6px;
  }

  .br-bit-led {
    width: 20px;
    height: 20px;
  }

  .br-target {
    font-size: 2.2rem;
  }

  .br-choice,
  .br-submit,
  .br-start {
    min-height: 52px;
  }
}

/* Speed Sort */
.speed-sort-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 6px 0 4px;
}

.speed-sort-wrap.speed-sort-wrap--penalty {
  animation: speed-sort-shake 0.42s ease;
}

.speed-sort-wrap.speed-sort-wrap--celebrate {
  animation: speed-sort-glow 1.1s ease;
}

.speed-sort-wrap.speed-sort-wrap--record {
  animation: speed-sort-record 1.2s ease;
}

@keyframes speed-sort-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes speed-sort-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

@keyframes speed-sort-record {
  0%, 100% { filter: brightness(1) saturate(1); }
  30% { filter: brightness(1.15) saturate(1.2); }
  60% { filter: brightness(1.05) saturate(1.1); }
}

.speed-sort-hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(440px, 96vw);
}

.speed-sort-round {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.speed-sort-timer {
  font-size: 1.65rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.speed-sort-hint {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.08);
}

.speed-sort-hint.speed-sort-hint--bonus {
  color: #7c3aed;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(99, 102, 241, 0.1));
}

.speed-sort-progress {
  position: relative;
  width: 100%;
  height: 22px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.1);
  overflow: hidden;
}

.speed-sort-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width 0.25s ease;
}

.speed-sort-progress-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
}

.speed-sort-stage {
  position: relative;
  width: min(440px, 96vw);
  border-radius: calc(var(--radius) + 4px);
  padding: 8px;
  background:
    linear-gradient(155deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06)),
    radial-gradient(ellipse 90% 80% at 50% 0%, rgba(129, 140, 248, 0.15), transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px rgba(99, 102, 241, 0.12);
}

.speed-sort-stage.speed-sort-stage--bonus {
  background:
    linear-gradient(155deg, rgba(124, 58, 237, 0.16), rgba(99, 102, 241, 0.08)),
    radial-gradient(ellipse 90% 80% at 50% 0%, rgba(167, 139, 250, 0.2), transparent 70%);
}

.speed-sort-play {
  position: relative;
  width: 100%;
  min-height: 280px;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 23px, rgba(99, 102, 241, 0.04) 23px, rgba(99, 102, 241, 0.04) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, rgba(99, 102, 241, 0.04) 23px, rgba(99, 102, 241, 0.04) 24px),
    linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(99, 102, 241, 0.04));
  overflow: hidden;
}

.speed-sort-tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  color: #fff;
  background: linear-gradient(145deg, #6366f1, #4f46e5);
  box-shadow:
    0 4px 12px rgba(79, 70, 229, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}

.speed-sort-tile:hover:not(:disabled) {
  transform: scale(1.06);
  box-shadow:
    0 6px 16px rgba(79, 70, 229, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.speed-sort-tile:active:not(:disabled) {
  transform: scale(0.94);
}

.speed-sort-tile--done {
  opacity: 0.35;
  transform: scale(0.85);
  pointer-events: none;
  background: linear-gradient(145deg, #22c55e, #16a34a);
}

.speed-sort-tile--miss {
  animation: speed-sort-tile-miss 0.42s ease;
  background: linear-gradient(145deg, #ef4444, #dc2626);
}

.speed-sort-tile--round-done {
  animation: speed-sort-tile-pop 0.5s ease;
}

@keyframes speed-sort-tile-miss {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.1) rotate(-4deg); }
  75% { transform: scale(1.05) rotate(4deg); }
}

@keyframes speed-sort-tile-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(0.92); opacity: 0.5; }
}

.speed-sort-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 4;
}

.speed-sort-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  z-index: 3;
}

.speed-sort-flash--on.speed-sort-flash--hit {
  animation: speed-sort-flash-hit 0.35s ease;
}

.speed-sort-flash--on.speed-sort-flash--penalty {
  animation: speed-sort-flash-penalty 0.42s ease;
}

.speed-sort-flash--on.speed-sort-flash--win {
  animation: speed-sort-flash-win 0.9s ease;
}

.speed-sort-flash--on.speed-sort-flash--record {
  animation: speed-sort-flash-record 1.1s ease;
}

@keyframes speed-sort-flash-hit {
  0% { opacity: 0; background: rgba(34, 197, 94, 0); }
  30% { opacity: 1; background: rgba(34, 197, 94, 0.12); }
  100% { opacity: 0; background: rgba(34, 197, 94, 0); }
}

@keyframes speed-sort-flash-penalty {
  0% { opacity: 0; background: rgba(239, 68, 68, 0); }
  30% { opacity: 1; background: rgba(239, 68, 68, 0.14); }
  100% { opacity: 0; background: rgba(239, 68, 68, 0); }
}

@keyframes speed-sort-flash-win {
  0% { opacity: 0; background: rgba(99, 102, 241, 0); }
  40% { opacity: 1; background: rgba(99, 102, 241, 0.18); }
  100% { opacity: 0; background: rgba(99, 102, 241, 0); }
}

@keyframes speed-sort-flash-record {
  0% { opacity: 0; background: rgba(234, 179, 8, 0); }
  25% { opacity: 1; background: rgba(234, 179, 8, 0.22); }
  50% { opacity: 0.6; background: rgba(251, 191, 36, 0.16); }
  100% { opacity: 0; background: rgba(234, 179, 8, 0); }
}

.speed-sort-float {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  animation: speed-sort-float 0.88s ease forwards;
}

.speed-sort-float--penalty { color: #fca5a5; background: rgba(239, 68, 68, 0.2); }
.speed-sort-float--perfect { color: #fde047; background: rgba(234, 179, 8, 0.25); }

@keyframes speed-sort-float {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  80% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.9); }
}

.speed-sort-round-banner {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.85);
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.92), rgba(139, 92, 246, 0.88));
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
  z-index: 5;
}

.speed-sort-round-banner.speed-sort-round-banner--show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.speed-sort-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a5b4fc;
  animation: speed-sort-particle 0.72s ease forwards;
}

@keyframes speed-sort-particle {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); }
}

@media (max-width: 480px) {
  .speed-sort-tile {
    min-width: 48px;
    min-height: 48px;
    font-size: 0.95rem;
  }

  .speed-sort-play {
    min-height: 260px;
  }
}

/* ?? number-sequence ?? */
.nsq-root {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 22px;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(139, 92, 246, 0.16), transparent 58%),
    linear-gradient(165deg, rgba(148, 163, 184, 0.07), transparent 42%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
}

.nsq-root--shake { animation: nsq-shake 0.48s ease; }
.nsq-root--finish {
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 14px 36px rgba(139, 92, 246, 0.18);
}
.nsq-root--genius {
  box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.45), 0 0 28px rgba(168, 85, 247, 0.28);
}

@keyframes nsq-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.nsq-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  border-radius: inherit;
}

.nsq-flash--ok { background: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.28), transparent 65%); animation: nsq-flash-in 0.32s ease; }
.nsq-flash--bad { background: radial-gradient(circle at 50% 40%, rgba(239, 68, 68, 0.26), transparent 65%); animation: nsq-flash-in 0.32s ease; }
.nsq-flash--warn { background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.24), transparent 65%); animation: nsq-flash-in 0.32s ease; }
.nsq-flash--win { background: radial-gradient(circle at 50% 40%, rgba(139, 92, 246, 0.32), transparent 65%); animation: nsq-flash-in 0.45s ease; }

@keyframes nsq-flash-in {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

.nsq-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.nsq-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--pc, #34d399);
  animation: nsq-particle 0.58s ease-out forwards;
}

@keyframes nsq-particle {
  to { transform: translate(var(--px), var(--py)); opacity: 0; }
}

.nsq-float {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 8;
  font-size: 1.2rem;
  font-weight: 800;
  animation: nsq-float 0.82s ease forwards;
  pointer-events: none;
}

.nsq-float--ok { color: #86efac; text-shadow: 0 2px 12px rgba(34, 197, 94, 0.5); }
.nsq-float--hot { color: #fde047; text-shadow: 0 2px 12px rgba(234, 179, 8, 0.55); }
.nsq-float--genius {
  color: #e9d5ff;
  font-size: 1.45rem;
  text-shadow: 0 0 18px rgba(192, 132, 252, 0.75);
}

@keyframes nsq-float {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(1); }
}

.nsq-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  z-index: 2;
}

.nsq-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}

.nsq-pill--score {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.28);
  color: #c4b5fd;
}

.nsq-pill--best {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.28);
  color: #fcd34d;
}

.nsq-timer-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.nsq-timer-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  overflow: hidden;
}

.nsq-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
  transition: width 0.1s linear;
}

.nsq-timer-wrap--urgent .nsq-timer-fill {
  background: linear-gradient(90deg, #ef4444, #f97316);
  animation: nsq-timer-pulse 0.6s ease infinite;
}

@keyframes nsq-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.nsq-timer-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 28px;
}

.nsq-type-badge {
  align-self: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #a5b4fc;
}

.nsq-type-badge--hard {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(192, 132, 252, 0.35);
  color: #e9d5ff;
}

.nsq-streak {
  min-height: 1.4rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: transparent;
  transition: color 0.2s;
}

.nsq-streak--warm { color: #fbbf24; }
.nsq-streak--hot {
  color: #fde047;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
  animation: nsq-streak-glow 0.8s ease infinite alternate;
}

@keyframes nsq-streak-glow {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

.nsq-sequence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 2px;
  padding: 16px 12px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.35), rgba(30, 27, 75, 0.2));
  border: 1px solid rgba(139, 92, 246, 0.22);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.12);
}

.nsq-num {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.22), rgba(99, 102, 241, 0.12));
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #ede9fe;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

.nsq-num--q {
  background: linear-gradient(145deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.12));
  border-color: rgba(251, 191, 36, 0.4);
  color: #fde68a;
  animation: nsq-q-pulse 1.2s ease infinite;
}

@keyframes nsq-q-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.nsq-sep {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.6);
  margin: 0 1px;
}

.nsq-prompt {
  margin: 0;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
}

.nsq-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.nsq-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(148, 163, 184, 0.12), rgba(100, 116, 139, 0.08));
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s;
  touch-action: manipulation;
}

.nsq-choice--enter {
  animation: nsq-choice-in 0.35s ease backwards;
}

@keyframes nsq-choice-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.nsq-choice:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.15);
}

.nsq-choice:active {
  transform: scale(0.97);
}

.nsq-choice-label {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}

.nsq-choice-val {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.nsq-choice--reveal {
  border-color: rgba(34, 197, 94, 0.55);
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.18), rgba(22, 163, 74, 0.1));
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.nsq-choice--wrong {
  border-color: rgba(239, 68, 68, 0.5);
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.08));
  animation: nsq-wrong-shake 0.4s ease;
}

@keyframes nsq-wrong-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.nsq-feedback {
  min-height: 2.6rem;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.45;
  color: transparent;
  transition: background 0.2s, color 0.2s;
}

.nsq-feedback--ok {
  color: #86efac;
  background: rgba(34, 197, 94, 0.1);
}

.nsq-feedback--bad {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
}

.nsq-chart {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.nsq-root--finish .nsq-chart {
  display: flex;
}

.nsq-chart-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
  color: var(--text-muted);
}

.nsq-chart-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nsq-chart-row {
  display: grid;
  grid-template-columns: 52px 1fr 36px;
  align-items: center;
  gap: 8px;
}

.nsq-chart-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
}

.nsq-chart-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  overflow: hidden;
}

.nsq-chart-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width 0.6s ease;
}

.nsq-chart-fill--hot {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.nsq-chart-pct {
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #a5b4fc;
}

@media (max-width: 480px) {
  .nsq-num {
    font-size: 1.15rem;
    padding: 7px 10px;
  }

  .nsq-choice {
    min-height: 52px;
    padding: 10px 12px;
  }

  .nsq-choice-val {
    font-size: 1.05rem;
  }
}

/* ?? reverse-command (???? ??) ?? */
.rcv-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 8px 4px 14px;
  touch-action: manipulation;
  overflow: hidden;
}

.rcv-bg {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(circle at 30% 20%, rgba(34, 197, 94, 0.12), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(22, 163, 74, 0.1), transparent 50%),
    linear-gradient(165deg, rgba(15, 23, 42, 0.4), rgba(20, 83, 45, 0.15));
  pointer-events: none;
  z-index: 0;
  animation: rcv-bg-drift 12s ease-in-out infinite alternate;
}

.rcv-root--speed .rcv-bg {
  animation: rcv-bg-speed 2.4s linear infinite;
}

.rcv-root--shake {
  animation: rcv-shake 0.48s ease;
}

.rcv-root--over .rcv-stage,
.rcv-root--over .rcv-pad {
  opacity: 0.55;
  filter: grayscale(0.15);
}

.rcv-flash {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}

.rcv-flash--ok {
  background: radial-gradient(circle at 50% 40%, rgba(74, 222, 128, 0.35), transparent 68%);
  animation: rcv-flash-in 0.32s ease;
}

.rcv-flash--bad {
  background: radial-gradient(circle at 50% 40%, rgba(248, 113, 113, 0.38), transparent 68%);
  animation: rcv-flash-in 0.32s ease;
}

.rcv-flash--trap {
  background: radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.42), transparent 70%);
  animation: rcv-flash-in 0.32s ease;
}

.rcv-flash--win {
  background: radial-gradient(circle at 50% 40%, rgba(74, 222, 128, 0.4), transparent 72%);
  animation: rcv-flash-win 0.65s ease-out;
}

.rcv-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 8;
}

.rcv-hud {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.rcv-timer {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 22px;
  color: #dcfce7;
  background: linear-gradient(145deg, rgba(20, 83, 45, 0.92), rgba(22, 101, 52, 0.78));
  border: 1px solid rgba(74, 222, 128, 0.35);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
}

.rcv-timer-num {
  font-variant-numeric: tabular-nums;
}

.rcv-timer-label {
  font-size: 12px;
  font-weight: 600;
  color: #86efac;
}

.rcv-timer--urgent {
  color: #fca5a5;
  animation: rcv-timer-pulse 0.8s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.35);
}

.rcv-score-badge {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.7));
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.rcv-score-num {
  font-size: 22px;
  font-weight: 800;
  color: #4ade80;
  font-variant-numeric: tabular-nums;
}

.rcv-score-label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}

.rcv-best {
  font-size: 12px;
  font-weight: 700;
  color: #86efac;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(20, 83, 45, 0.45);
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.rcv-combo {
  position: relative;
  z-index: 2;
  min-height: 26px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: transparent;
  text-align: center;
}

.rcv-combo--hot {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
  animation: rcv-combo-pop 0.35s ease;
}

.rcv-combo--blaze {
  color: #fb923c;
  text-shadow: 0 0 16px rgba(251, 146, 60, 0.6);
  animation: rcv-combo-pop 0.35s ease;
}

.rcv-type {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #86efac;
  opacity: 0.85;
}

.rcv-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.75), rgba(20, 83, 45, 0.35));
  border: 1px solid rgba(74, 222, 128, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(15, 23, 42, 0.35);
}

.rcv-root--speed .rcv-stage {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 28px rgba(74, 222, 128, 0.25),
    0 8px 24px rgba(15, 23, 42, 0.35);
}

.rcv-frog {
  font-size: 2rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
  transition: transform 0.2s ease;
}

.rcv-frog--happy {
  animation: rcv-frog-hop 0.35s ease;
}

.rcv-frog--mad {
  animation: rcv-frog-wobble 0.4s ease;
}

.rcv-cmd {
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  font-weight: 900;
  text-align: center;
  line-height: 1.25;
  transition: color 0.15s ease, transform 0.2s ease;
}

.rcv-cmd--green {
  color: #4ade80;
  text-shadow: 0 0 16px rgba(74, 222, 128, 0.45);
}

.rcv-cmd--red {
  color: #f87171;
  text-shadow: 0 0 16px rgba(248, 113, 113, 0.45);
}

.rcv-cmd--trap {
  font-size: clamp(1.1rem, 4.5vw, 1.5rem);
}

.rcv-cmd--ok {
  transform: scale(1.04);
}

.rcv-cmd--bad {
  animation: rcv-cmd-bad 0.35s ease;
}

.rcv-hint {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
}

.rcv-hint--hide {
  display: none;
}

.rcv-pad {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.rcv-pad-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.rcv-pad-spacer,
.rcv-pad-center {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcv-pad-center {
  font-size: 1.5rem;
  opacity: 0.55;
}

.rcv-btn {
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 16px;
  font-size: 1.75rem;
  font-weight: 800;
  color: #f8fafc;
  cursor: pointer;
  background: linear-gradient(145deg, color-mix(in srgb, var(--rcv-accent) 85%, #fff 15%), var(--rcv-accent));
  border: 2px solid color-mix(in srgb, var(--rcv-accent) 70%, #fff 30%);
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--rcv-accent) 55%, #000 45%),
    0 8px 16px rgba(15, 23, 42, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
  touch-action: manipulation;
}

.rcv-btn--big {
  width: 84px;
  height: 84px;
  font-size: 2.1rem;
}

.rcv-btn--small {
  width: 58px;
  height: 58px;
  font-size: 1.35rem;
  opacity: 0.88;
}

.rcv-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.rcv-btn:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--rcv-accent) 55%, #000 45%),
    0 4px 8px rgba(15, 23, 42, 0.3);
}

.rcv-btn--hit {
  animation: rcv-btn-hit 0.22s ease;
  filter: brightness(1.2);
}

.rcv-btn--miss {
  animation: rcv-btn-miss 0.32s ease;
  background: linear-gradient(145deg, #64748b, #475569);
  border-color: #94a3b8;
}

.rcv-float {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  animation: rcv-float 0.88s ease forwards;
  white-space: nowrap;
}

.rcv-float--ok { color: #86efac; background: rgba(34, 197, 94, 0.22); }
.rcv-float--speed { color: #fde047; background: rgba(234, 179, 8, 0.24); }
.rcv-float--trap { color: #fcd34d; background: rgba(245, 158, 11, 0.28); }
.rcv-float--bad { color: #fca5a5; background: rgba(239, 68, 68, 0.22); }

.rcv-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: rcv-particle 0.72s ease forwards;
}

.rcv-particle--ok { background: #4ade80; }
.rcv-particle--bad { background: #f87171; }

@keyframes rcv-bg-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(2%, -3%) scale(1.04); }
}

@keyframes rcv-bg-speed {
  from { transform: translateX(-4%) scale(1.02); }
  to { transform: translateX(4%) scale(1.06); }
}

@keyframes rcv-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes rcv-flash-in {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes rcv-flash-win {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes rcv-timer-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes rcv-combo-pop {
  0% { transform: scale(0.85); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes rcv-frog-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-8px) scale(1.08); }
}

@keyframes rcv-frog-wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

@keyframes rcv-cmd-bad {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes rcv-btn-hit {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes rcv-btn-miss {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  70% { transform: translateX(4px); }
}

@keyframes rcv-float {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  80% { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px) scale(0.9); }
}

@keyframes rcv-particle {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

@media (max-width: 480px) {
  .rcv-btn,
  .rcv-pad-spacer,
  .rcv-pad-center {
    width: 68px;
    height: 68px;
  }

  .rcv-btn--big {
    width: 78px;
    height: 78px;
  }

  .rcv-btn--small {
    width: 54px;
    height: 54px;
  }
}


/* --- pattern-lock --- */
.pl-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px 14px 20px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 85% 50% at 50% 0%, rgba(124, 58, 237, 0.18), transparent 55%),
    linear-gradient(165deg, rgba(148, 163, 184, 0.06), transparent 40%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  touch-action: manipulation;
}

.pl-hud {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pl-stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.pl-stat {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}

.pl-len {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.28);
  color: #7dd3fc;
}

.pl-fails {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}

.pl-best {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.28);
  color: #fcd34d;
}

.pl-fail-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pl-fail-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.2);
  border: 1px solid rgba(148, 163, 184, 0.3);
  transition: background 0.2s, box-shadow 0.2s;
}

.pl-fail-dot--used {
  background: #ef4444;
  border-color: #f87171;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.pl-phase-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.pl-phase-step {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.55);
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.pl-phase-step--active {
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(167, 139, 250, 0.35);
}

.pl-phase-step--done {
  color: #86efac;
  background: rgba(34, 197, 94, 0.1);
}

.pl-arena {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.pl-arena--shake {
  animation: pl-shake 0.42s ease;
}

@keyframes pl-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.pl-canvas {
  display: block;
  border-radius: 18px;
  cursor: crosshair;
  touch-action: none;
  box-shadow:
    inset 0 2px 14px rgba(0, 0, 0, 0.2),
    0 8px 24px rgba(15, 23, 42, 0.25);
}

.pl-perfect-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 3px solid rgba(52, 211, 153, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: transparent;
  pointer-events: none;
  z-index: 4;
}

.pl-perfect-ring--on {
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.75);
  text-shadow: 0 0 16px rgba(52, 211, 153, 0.65);
  animation: pl-perfect 0.88s ease forwards;
}

@keyframes pl-perfect {
  0% { opacity: 0; transform: scale(0.75); }
  25% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.15); }
}

.pl-pb-pop {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%) translateY(8px);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fde68a;
  background: rgba(251, 191, 36, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.pl-pb-pop--on {
  animation: pl-pb-pop 1.05s ease forwards;
}

@keyframes pl-pb-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.85); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
  75% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.92); }
}

.pl-regret {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fda4af;
  background: rgba(244, 63, 94, 0.18);
  border: 1px solid rgba(251, 113, 133, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.pl-regret--on {
  animation: pl-regret 0.88s ease forwards;
}

@keyframes pl-regret {
  0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
  20% { opacity: 1; transform: translateX(-50%) scale(1.06); }
  80% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.95); }
}

.pl-flash {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

.pl-flash--success {
  background: radial-gradient(circle at 50% 45%, rgba(52, 211, 153, 0.32), transparent 68%);
}

.pl-flash--fail {
  background: radial-gradient(circle at 50% 45%, rgba(244, 63, 94, 0.28), transparent 68%);
}

.pl-flash--on {
  animation: pl-flash 0.42s ease;
}

@keyframes pl-flash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

.pl-status {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  min-height: 1.4rem;
}

.pl-status--input { color: #a5b4fc; }
.pl-status--success { color: #86efac; }
.pl-status--fail { color: #fca5a5; }

.pl-start-btn {
  min-width: 140px;
  min-height: 48px;
  padding: 12px 28px;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  color: #f8fafc;
  background: linear-gradient(145deg, #7c3aed, #5b21b6);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
}

.pl-start-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.42);
}

.pl-start-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.pl-start-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .pl-canvas {
    max-width: 100%;
  }

  .pl-start-btn {
    min-height: 52px;
    width: 100%;
    max-width: 280px;
  }
}

/* --- mental-rotation --- */
.mr-root {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  touch-action: manipulation;
}

.mr-hud {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.mr-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(124, 58, 237, 0.28);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
}

.mr-pill--warn {
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.18);
}

.mr-pill--warn .mr-pill-value {
  color: #fca5a5;
}

.mr-pill-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.mr-pill-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ddd6fe;
}

.mr-streak-bar {
  position: relative;
  height: 8px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  overflow: hidden;
}

.mr-streak-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa, #fbbf24);
  transition: width 0.3s ease;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.5);
}

.mr-streak-label {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fde68a;
  pointer-events: none;
}

.mr-root--streak-warm .mr-streak-fill {
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
}

.mr-root--streak-hot .mr-streak-fill {
  animation: mr-streak-pulse 0.8s ease-in-out infinite;
}

.mr-prompt {
  text-align: center;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(99, 102, 241, 0.12));
  border: 1px solid rgba(167, 139, 250, 0.35);
  font-weight: 700;
  color: #ddd6fe;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.mr-prompt.is-active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(99, 102, 241, 0.2));
}

.mr-arena {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.3),
    0 14px 36px rgba(15, 23, 42, 0.55);
}

.mr-arena--shake {
  animation: mr-shake 0.42s ease;
}

.mr-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(15, 23, 42, 0.6);
}

.mr-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0f172a;
}

.mr-panel-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #a78bfa;
  padding: 6px 0 2px;
  letter-spacing: 0.06em;
}

.mr-canvas {
  display: block;
  width: 100%;
  height: auto;
}

.mr-timer-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(15, 23, 42, 0.6);
}

.mr-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #7c3aed, #38bdf8);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
}

.mr-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.mr-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: mr-particle 0.65s ease-out forwards;
}

.mr-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.mr-flash.is-ok { background: rgba(34, 197, 94, 0.22); }
.mr-flash.is-bad { background: rgba(239, 68, 68, 0.24); }
.mr-flash.is-over { background: rgba(124, 58, 237, 0.2); }

.mr-flash.is-on {
  animation: mr-flash 0.36s ease-out forwards;
}

.mr-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.mr-actions--locked {
  opacity: 0.55;
  pointer-events: none;
}

.mr-btn {
  min-height: 64px;
  border: none;
  border-radius: 16px;
  font-size: 1.8rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  touch-action: manipulation;
}

.mr-btn--o {
  background: linear-gradient(145deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
}

.mr-btn--x {
  background: linear-gradient(145deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
}

.mr-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.mr-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.mr-feedback {
  min-height: 1.5rem;
  text-align: center;
  margin-top: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: transparent;
}

.mr-feedback.is-ok {
  color: #4ade80;
  animation: mr-pop 0.35s ease;
}

.mr-feedback.is-bad {
  color: #f87171;
}

.mr-speed-pop {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: 900;
  color: transparent;
  pointer-events: none;
  z-index: 5;
}

.mr-speed-pop.is-on {
  color: #fde047;
  text-shadow: 0 0 16px rgba(253, 224, 71, 0.7);
  animation: mr-speed 0.9s ease forwards;
}

.mr-hint {
  text-align: center;
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

@keyframes mr-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes mr-particle {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

@keyframes mr-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes mr-pop {
  0% { transform: scale(0.85); opacity: 0.5; }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes mr-speed {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  80% { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px) scale(0.9); }
}

@keyframes mr-streak-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@media (max-width: 480px) {
  .mr-btn {
    min-height: 56px;
    font-size: 1.6rem;
  }
}

/* --- eye-measure --- */
.eye-measure-root {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  touch-action: manipulation;
}

.eye-measure-hud {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.eye-measure-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(14, 165, 233, 0.28);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
}

.eye-measure-pill--score .eye-measure-pill-value {
  color: #7dd3fc;
}

.eye-measure-pill--best .eye-measure-pill-value {
  color: #fde047;
}

.eye-measure-pill-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.eye-measure-pill-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #bae6fd;
}

.eye-measure-gauge-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.eye-measure-gauge-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 42px;
}

.eye-measure-gauge {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  overflow: hidden;
}

.eye-measure-gauge-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  transition: width 0.45s ease, box-shadow 0.3s ease;
}

.eye-measure-gauge-fill.is-hot {
  background: linear-gradient(90deg, #22c55e, #4ade80);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

.eye-measure-gauge-fill.is-god {
  background: linear-gradient(90deg, #fde047, #fbbf24, #22c55e);
  box-shadow: 0 0 16px rgba(253, 224, 71, 0.45);
  animation: em-gauge-god 0.8s ease infinite alternate;
}

@keyframes em-gauge-god {
  from { filter: brightness(1); }
  to { filter: brightness(1.15); }
}

.eye-measure-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(56, 189, 248, 0.12));
  border: 1px solid rgba(56, 189, 248, 0.35);
  font-weight: 700;
  color: #bae6fd;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.eye-measure-prompt:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(14, 165, 233, 0.2);
}

.eye-measure-prompt.is-active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(2, 132, 199, 0.2));
}

.eye-measure-badge {
  font-size: 1.35rem;
  line-height: 1;
}

.eye-measure-arena {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(14, 165, 233, 0.3),
    0 14px 36px rgba(15, 23, 42, 0.55);
}

.eye-measure-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
}

.eye-measure-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 3;
}

.eye-measure-overlay.is-on {
  opacity: 1;
}

.eye-measure-overlay-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 24px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  animation: em-overlay-pop 0.35s ease;
}

@keyframes em-overlay-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.eye-measure-overlay-grade {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fde047;
  text-shadow: 0 0 14px rgba(253, 224, 71, 0.5);
}

.eye-measure-overlay-err {
  font-size: 0.95rem;
  font-weight: 600;
  color: #94a3b8;
}

.eye-measure-overlay-pts {
  font-size: 1.1rem;
  font-weight: 800;
  color: #7dd3fc;
}

.eye-measure-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

.eye-measure-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.eye-measure-flash.is-on.is-ok {
  animation: em-flash-ok 0.38s ease;
}

.eye-measure-flash.is-on.is-bad {
  animation: em-flash-bad 0.38s ease;
}

.eye-measure-flash.is-on.is-god {
  animation: em-flash-god 0.55s ease;
}

.eye-measure-flash.is-on.is-over {
  animation: em-flash-over 0.5s ease;
}

@keyframes em-flash-ok {
  0% { opacity: 0; background: transparent; }
  30% { opacity: 1; background: radial-gradient(circle at 50% 42%, rgba(34, 197, 94, 0.28), transparent 65%); }
  100% { opacity: 0; }
}

@keyframes em-flash-bad {
  0% { opacity: 0; }
  30% { opacity: 1; background: radial-gradient(circle at 50% 42%, rgba(248, 113, 113, 0.22), transparent 65%); }
  100% { opacity: 0; }
}

@keyframes em-flash-god {
  0% { opacity: 0; }
  20% { opacity: 1; background: radial-gradient(circle at 50% 40%, rgba(253, 224, 71, 0.38), transparent 60%); }
  50% { opacity: 0.8; background: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.25), transparent 65%); }
  100% { opacity: 0; }
}

@keyframes em-flash-over {
  0% { opacity: 0; }
  35% { opacity: 1; background: radial-gradient(circle at 50% 40%, rgba(14, 165, 233, 0.32), transparent 68%); }
  100% { opacity: 0; }
}

.eye-measure-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: em-particle 0.68s ease forwards;
}

@keyframes em-particle {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.eye-measure-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.eye-measure-nudge {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(2, 40px);
  gap: 4px;
}

.eye-measure-nudge-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  color: #94a3b8;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease, color 0.15s ease;
  touch-action: manipulation;
}

.eye-measure-nudge-btn:nth-child(1) { grid-column: 2; }
.eye-measure-nudge-btn:nth-child(2) { grid-column: 1; grid-row: 2; }
.eye-measure-nudge-btn:nth-child(3) { grid-column: 3; grid-row: 2; }
.eye-measure-nudge-btn:nth-child(4) { grid-column: 2; grid-row: 2; }

.eye-measure-nudge-btn:active {
  transform: scale(0.92);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}

.eye-measure-submit {
  min-width: 120px;
  min-height: 88px;
  padding: 12px 20px;
  border: none;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #f0f9ff;
  background: linear-gradient(160deg, #0ea5e9, #0284c7 55%, #0369a1);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.15s ease;
  touch-action: manipulation;
}

.eye-measure-submit:active:not(:disabled) {
  transform: scale(0.96);
}

.eye-measure-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.eye-measure-feedback {
  min-height: 1.4rem;
  margin-top: 10px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.eye-measure-feedback.is-ok {
  color: #4ade80;
}

.eye-measure-feedback.is-bad {
  color: #f87171;
}

.eye-measure-banner {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%) scale(0.9);
  z-index: 6;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fde047;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(14, 165, 233, 0.2));
  border: 1px solid rgba(253, 224, 71, 0.45);
  box-shadow: 0 8px 24px rgba(253, 224, 71, 0.2);
  opacity: 0;
  pointer-events: none;
}

.eye-measure-banner.is-show {
  animation: em-banner 1.4s ease forwards;
}

@keyframes em-banner {
  0% { opacity: 0; transform: translateX(-50%) scale(0.85); }
  15% { opacity: 1; transform: translateX(-50%) scale(1.05); }
  75% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.95); }
}

@media (max-width: 480px) {
  .eye-measure-nudge-btn {
    width: 44px;
    height: 44px;
  }

  .eye-measure-submit {
    min-height: 96px;
    min-width: 100px;
  }
}

/* --- odd-one-out --- */
.ooo-root {
  position: relative;
  width: min(400px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 14px 20px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(217, 119, 6, 0.18), transparent 55%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 14px,
      rgba(217, 119, 6, 0.03) 14px,
      rgba(217, 119, 6, 0.03) 15px
    ),
    linear-gradient(165deg, rgba(15, 23, 42, 0.05), transparent 45%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ooo-root--shake {
  animation: ooo-shake 0.48s ease;
}

.ooo-root--urgent {
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.35),
    0 0 24px rgba(239, 68, 68, 0.12),
    0 10px 28px rgba(15, 23, 42, 0.12);
}

.ooo-root--hard {
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(168, 85, 247, 0.16), transparent 55%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 14px,
      rgba(168, 85, 247, 0.04) 14px,
      rgba(168, 85, 247, 0.04) 15px
    ),
    linear-gradient(165deg, rgba(15, 23, 42, 0.05), transparent 45%),
    var(--bg-elevated);
}

.ooo-root--over {
  box-shadow:
    0 0 0 1px rgba(217, 119, 6, 0.35),
    0 12px 32px rgba(217, 119, 6, 0.14);
}

@keyframes ooo-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.ooo-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}

.ooo-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.15s ease;
}

.ooo-flash.is-ok {
  opacity: 1;
  background: radial-gradient(circle at 50% 45%, rgba(34, 197, 94, 0.22), transparent 65%);
}

.ooo-flash.is-bonus {
  opacity: 1;
  background: radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.28), transparent 65%);
}

.ooo-flash.is-bad {
  opacity: 1;
  background: radial-gradient(circle at 50% 45%, rgba(239, 68, 68, 0.22), transparent 65%);
}

.ooo-flash.is-over {
  opacity: 1;
  background: radial-gradient(circle at 50% 40%, rgba(217, 119, 6, 0.25), transparent 70%);
}

.ooo-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  z-index: 2;
}

.ooo-timer-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ooo-timer-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    #d97706 calc(var(--pct, 1) * 360deg),
    rgba(148, 163, 184, 0.15) 0
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}

.ooo-root--urgent .ooo-timer-ring {
  background: conic-gradient(
    #ef4444 calc(var(--pct, 1) * 360deg),
    rgba(148, 163, 184, 0.15) 0
  );
}

.ooo-timer {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.ooo-timer-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
}

.ooo-score-badge,
.ooo-best-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  border-radius: 12px;
  min-width: 52px;
}

.ooo-score-badge {
  background: rgba(217, 119, 6, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.ooo-best-badge {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.22);
}

.ooo-score-num,
.ooo-best-num {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.1;
}

.ooo-score-num { color: #f59e0b; }
.ooo-best-num { color: #fbbf24; }

.ooo-score-label,
.ooo-best-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
}

.ooo-combo {
  min-height: 1.5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: transparent;
  z-index: 2;
  transition: color 0.2s, text-shadow 0.2s;
}

.ooo-combo.is-active {
  color: #fbbf24;
  text-shadow: 0 2px 10px rgba(251, 191, 36, 0.45);
  animation: ooo-combo-pop 0.35s ease;
}

.ooo-combo.is-blaze {
  color: #fde047;
  text-shadow: 0 0 14px rgba(250, 204, 21, 0.6);
}

@keyframes ooo-combo-pop {
  0% { transform: scale(0.85); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.ooo-tier {
  margin: 0;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  z-index: 2;
}

.ooo-hard-tag {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.12));
  border: 1px solid rgba(192, 132, 252, 0.35);
  color: #e9d5ff;
  z-index: 2;
  animation: ooo-hard-pulse 1.2s ease infinite;
}

@keyframes ooo-hard-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.3); }
  50% { box-shadow: 0 0 12px 2px rgba(168, 85, 247, 0.25); }
}

.ooo-prompt {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  z-index: 2;
}

.ooo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  z-index: 2;
}

.ooo-word {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 14px 10px;
  border: none;
  border-radius: 16px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
  box-shadow:
    0 4px 0 #92400e,
    0 8px 18px rgba(180, 83, 9, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
  touch-action: manipulation;
}

.ooo-root--hard .ooo-word {
  background: linear-gradient(145deg, #a78bfa 0%, #8b5cf6 55%, #7c3aed 100%);
  box-shadow:
    0 4px 0 #5b21b6,
    0 8px 18px rgba(124, 58, 237, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.ooo-word:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.ooo-word:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #92400e,
    0 4px 10px rgba(180, 83, 9, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ooo-word:disabled {
  opacity: 0.72;
  cursor: default;
}

.ooo-word--hit {
  animation: ooo-word-hit 0.38s ease;
  filter: brightness(1.15);
}

.ooo-word--miss {
  animation: ooo-word-miss 0.42s ease;
  background: linear-gradient(145deg, #f87171, #ef4444 55%, #dc2626) !important;
  box-shadow:
    0 4px 0 #991b1b,
    0 8px 18px rgba(239, 68, 68, 0.3) !important;
}

.ooo-word--reveal {
  animation: ooo-word-reveal 0.5s ease;
  outline: 3px solid #86efac;
  outline-offset: 2px;
}

@keyframes ooo-word-hit {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes ooo-word-miss {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes ooo-word-reveal {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

.ooo-word-text {
  word-break: keep-all;
  line-height: 1.25;
}

.ooo-explain {
  min-height: 2.6rem;
  padding: 8px 12px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 600;
  color: transparent;
  border-radius: 12px;
  transition: color 0.2s, background 0.2s;
  z-index: 2;
  max-width: 100%;
}

.ooo-explain.is-show {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  animation: ooo-explain-in 0.3s ease;
}

@keyframes ooo-explain-in {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.ooo-pop {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  font-weight: 800;
  pointer-events: none;
  animation: ooo-pop 0.88s ease forwards;
  z-index: 7;
}

.ooo-pop--ok { color: #86efac; text-shadow: 0 2px 12px rgba(34, 197, 94, 0.5); }
.ooo-pop--bonus { color: #e9d5ff; font-size: 1.35rem; text-shadow: 0 0 16px rgba(192, 132, 252, 0.7); }
.ooo-pop--bad { color: #fca5a5; text-shadow: 0 2px 10px rgba(239, 68, 68, 0.45); }

@keyframes ooo-pop {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(1); }
}

.ooo-particle {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde047, #f59e0b);
  pointer-events: none;
  animation: ooo-particle 0.72s ease forwards;
}

@keyframes ooo-particle {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))) scale(0.2); }
}

@media (max-width: 480px) {
  .ooo-word {
    min-height: 96px;
    font-size: 1.2rem;
  }

  .ooo-grid {
    gap: 12px;
  }
}

/* --- multi-task --- */
.mtk-root {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 4px 0 8px;
  touch-action: manipulation;
  gap: 0;
}

.mtk-root--over {
  filter: saturate(0.82);
}

.mtk-root--over .mtk-pong-wrap,
.mtk-root--over .mtk-quiz {
  pointer-events: none;
}

.mtk-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 8;
}

.mtk-flash {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}

.mtk-flash--ok {
  background: radial-gradient(circle at 50% 72%, rgba(74, 222, 128, 0.38), transparent 68%);
  animation: mtk-flash-in 0.32s ease;
}

.mtk-flash--bad {
  background: radial-gradient(circle at 50% 50%, rgba(248, 113, 113, 0.42), transparent 68%);
  animation: mtk-flash-in 0.32s ease;
}

.mtk-flash--milestone {
  background: radial-gradient(circle at 50% 32%, rgba(251, 191, 36, 0.48), transparent 72%);
  animation: mtk-flash-in 0.32s ease;
}

.mtk-flash--clutch {
  background: radial-gradient(circle at 50% 55%, rgba(251, 146, 60, 0.52), transparent 70%);
  animation: mtk-flash-clutch 0.4s ease-out;
}

@keyframes mtk-flash-in {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes mtk-flash-clutch {
  0% { opacity: 0.92; }
  50% { opacity: 0.55; }
  100% { opacity: 0; }
}

.mtk-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  z-index: 2;
}

.mtk-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 14px;
  min-width: 72px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
}

.mtk-badge--surv .mtk-badge-num {
  color: #38bdf8;
}

.mtk-badge--solve .mtk-badge-num {
  color: #4ade80;
}

.mtk-badge--best .mtk-badge-num {
  color: #fbbf24;
  font-size: 16px;
}

.mtk-badge-num {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #e2e8f0;
  line-height: 1.1;
}

.mtk-badge-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.03em;
}

.mtk-zone-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 12px 4px;
  text-align: center;
}

.mtk-zone-label--top {
  color: #67e8f9;
  background: linear-gradient(180deg, rgba(8, 47, 73, 0.38), transparent);
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-bottom: none;
}

.mtk-zone-label--bottom {
  color: #a78bfa;
  background: linear-gradient(180deg, transparent, rgba(49, 46, 129, 0.32));
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-bottom: none;
}

.mtk-pong-wrap {
  position: relative;
  width: 100%;
  min-height: 160px;
  padding: 6px 8px 10px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.95), rgba(30, 27, 75, 0.85));
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-top: none;
  border-radius: 0 0 12px 12px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.08),
    inset 0 1px 0 rgba(56, 189, 248, 0.06);
}

.mtk-pong-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.22),
    0 8px 24px rgba(8, 16, 32, 0.55);
}

.mtk-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
  margin: 4px 0;
}

.mtk-divider::before,
.mtk-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 2px;
}

.mtk-divider::before {
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.38));
}

.mtk-divider::after {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.38), transparent);
}

.mtk-divider-icon {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.5));
}

.mtk-quiz {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 200px;
  padding: 12px 12px 16px;
  background: linear-gradient(160deg, rgba(30, 27, 75, 0.92), rgba(49, 46, 129, 0.78));
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-top: none;
  border-radius: 0 0 14px 14px;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.1),
    0 12px 28px rgba(15, 23, 42, 0.4);
  touch-action: manipulation;
}

.mtk-quiz--fail {
  animation: mtk-quiz-shake 0.45s ease;
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.28);
}

@keyframes mtk-quiz-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.mtk-quiz-timer {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.mtk-quiz-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #38bdf8);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
  transition: width 0.1s linear;
}

.mtk-quiz-timer--urgent .mtk-quiz-timer-fill {
  background: linear-gradient(90deg, #ef4444, #f97316);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.55);
  animation: mtk-timer-fill-pulse 0.7s ease-in-out infinite;
}

.mtk-quiz-timer-num {
  align-self: flex-end;
  margin-top: -6px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #c4b5fd;
  pointer-events: none;
}

.mtk-quiz-timer--urgent + .mtk-quiz-timer-num {
  color: #fca5a5;
  animation: mtk-timer-num-pulse 0.7s ease-in-out infinite;
}

.mtk-eq {
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 800;
  text-align: center;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mtk-eq--pop {
  animation: mtk-eq-pop 0.28s ease;
}

@keyframes mtk-eq-pop {
  0% { opacity: 0.4; transform: scale(0.92); }
  60% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

.mtk-hint {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  min-height: 1.2rem;
}

.mtk-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-top: 2px;
}

.mtk-btn {
  min-height: 56px;
  min-width: 44px;
  border: none;
  border-radius: 16px;
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.mtk-btn--o {
  color: #ecfdf5;
  background: linear-gradient(160deg, #22c55e, #15803d);
  box-shadow:
    0 5px 0 #14532d,
    0 10px 24px rgba(34, 197, 94, 0.32);
}

.mtk-btn--x {
  color: #fff1f2;
  background: linear-gradient(160deg, #ef4444, #b91c1c);
  box-shadow:
    0 5px 0 #7f1d1d,
    0 10px 24px rgba(239, 68, 68, 0.32);
}

.mtk-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.mtk-btn:active:not(:disabled) {
  transform: translateY(3px) scale(0.98);
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.4);
}

.mtk-milestone {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: clamp(1.3rem, 6vw, 2rem);
  font-weight: 900;
  color: #fde68a;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(251, 191, 36, 0.75);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.mtk-milestone--show {
  animation: mtk-milestone-pop 1.1s cubic-bezier(0.2, 1.1, 0.35, 1) forwards;
}

@keyframes mtk-milestone-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  22% { opacity: 1; transform: translate(-50%, -58%) scale(1.12); }
  55% { opacity: 1; transform: translate(-50%, -62%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(0.9); }
}

.mtk-clutch {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  font-weight: 900;
  color: #fb923c;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(251, 146, 60, 0.85),
    0 0 48px rgba(239, 68, 68, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  letter-spacing: 0.06em;
}

.mtk-clutch--show {
  animation: mtk-clutch-pop 0.68s cubic-bezier(0.2, 1.2, 0.35, 1) forwards;
}

@keyframes mtk-clutch-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-6deg); }
  18% { opacity: 1; transform: translate(-50%, -54%) scale(1.18) rotate(2deg); }
  45% { opacity: 1; transform: translate(-50%, -56%) scale(1.05) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(0.85); }
}

@keyframes mtk-timer-fill-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

@keyframes mtk-timer-num-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@media (max-width: 480px) {
  .mtk-pong-wrap {
    min-height: 140px;
    padding: 4px 6px 8px;
  }

  .mtk-quiz {
    min-height: 188px;
    padding: 10px 10px 14px;
    gap: 8px;
  }

  .mtk-btn {
    min-height: 52px;
    border-radius: 14px;
  }

  .mtk-buttons {
    gap: 10px;
  }

  .mtk-badge {
    min-width: 64px;
    padding: 5px 10px;
  }

  .mtk-badge-num {
    font-size: 18px;
  }
}

/* --- slime-volley --- */
.slime-volley-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 8px 0;
  gap: 8px;
}

.slime-volley-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.12);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.slime-volley-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  padding: 0 8px;
}

.slime-volley-btn {
  flex: 1;
  min-width: 64px;
  height: 52px;
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.1s, filter 0.1s, box-shadow 0.15s;
  touch-action: manipulation;
}

.slime-volley-btn--left,
.slime-volley-btn--right {
  background: linear-gradient(145deg, #38bdf8, #0284c7);
}

.slime-volley-btn--jump {
  flex: 1.2;
  background: linear-gradient(145deg, #4ade80, #16a34a);
  font-size: 1.2rem;
}

.slime-volley-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow:
    0 6px 16px rgba(56, 189, 248, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.slime-volley-btn--jump:hover:not(:disabled) {
  box-shadow:
    0 6px 16px rgba(74, 222, 128, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.slime-volley-btn:active:not(:disabled) {
  transform: scale(0.95);
}

@media (max-width: 480px) {
  .slime-volley-btn {
    min-width: 72px;
    height: 56px;
    font-size: 1.5rem;
  }

  .slime-volley-controls {
    gap: 14px;
    padding: 0 12px;
  }
}

/* --- plane-toss --- */
.plane-toss-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.plane-toss-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  transition: transform 0.08s ease-out, box-shadow 0.15s ease;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.28),
    0 14px 36px rgba(14, 116, 144, 0.32);
  background: #7dd3fc;
}

.plane-toss-wrap:active .plane-toss-canvas {
  transform: scale(0.985);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.42),
    0 8px 24px rgba(14, 116, 144, 0.38);
}

@media (max-width: 480px) {
  .plane-toss-canvas {
    border-radius: 10px;
  }
}

/* --- ski-run --- */
.ski-run-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.ski-run-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: grab;
  box-shadow:
    0 0 0 1px rgba(14, 165, 233, 0.28),
    0 14px 36px rgba(12, 74, 110, 0.5);
  background: #0c4a6e;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

.ski-run-canvas:active {
  cursor: grabbing;
  transform: scale(0.996);
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.42),
    0 12px 32px rgba(12, 74, 110, 0.55),
    0 0 28px rgba(56, 189, 248, 0.15);
}

.ski-run-pad {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  padding: 0 8px;
}

.ski-run-pad-btn {
  flex: 1;
  max-width: 140px;
  min-height: 52px;
  border: none;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 700;
  color: #f0f9ff;
  background: linear-gradient(165deg, #0ea5e9, #0369a1);
  box-shadow:
    0 4px 14px rgba(14, 165, 233, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ski-run-pad-btn:hover {
  background: linear-gradient(165deg, #38bdf8, #0284c7);
}

.ski-run-pad-btn:active,
.ski-run-pad-btn.ski-run-pad-active {
  transform: scale(0.94);
  box-shadow:
    0 2px 8px rgba(14, 165, 233, 0.4),
    inset 0 2px 6px rgba(0, 0, 0, 0.15);
}

@media (min-width: 640px) {
  .ski-run-pad {
    display: none;
  }
}

/* Paper Toss */
.paper-toss-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

.paper-toss-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(100, 116, 139, 0.12);
  transition: transform 0.08s ease, box-shadow 0.2s ease;
}

.paper-toss-canvas:active {
  transform: scale(0.985);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(74, 222, 128, 0.2);
}

/* --- soccer-juggle --- */
.soccer-juggle-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.soccer-juggle-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  box-shadow:
    0 0 0 1px rgba(22, 163, 74, 0.4),
    0 14px 36px rgba(5, 46, 22, 0.55);
  background: #14532d;
}

.soccer-juggle-canvas:active {
  transform: scale(0.997);
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.5),
    0 10px 28px rgba(5, 46, 22, 0.6),
    0 0 24px rgba(34, 197, 94, 0.18);
}

@media (max-width: 640px) {
  .soccer-juggle-canvas {
    border-radius: 10px;
  }
}

/* --- skate-trick --- */
.skate-trick-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.skate-trick-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.32),
    0 14px 36px rgba(49, 46, 129, 0.45);
  background: #312e81;
}

.skate-trick-wrap:active .skate-trick-canvas {
  transform: scale(0.995);
  transition: transform 0.08s ease;
}

/* --- shuffleboard --- */
.shuffleboard-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

.shuffleboard-wrap--shake {
  animation: shuffleboard-shake 0.42s ease-out;
}

.shuffleboard-wrap--celebrate .shuffleboard-canvas {
  box-shadow:
    0 0 0 2px rgba(74, 222, 128, 0.45),
    0 12px 40px rgba(21, 128, 61, 0.5),
    0 0 32px rgba(250, 204, 21, 0.25);
}

@keyframes shuffleboard-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-4px, 2px); }
  30% { transform: translate(4px, -2px); }
  45% { transform: translate(-3px, -2px); }
  60% { transform: translate(3px, 2px); }
  75% { transform: translate(-2px, 1px); }
}

.shuffleboard-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: grab;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(5, 46, 22, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(21, 128, 61, 0.35);
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

.shuffleboard-canvas:active {
  cursor: grabbing;
  transform: scale(0.985);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 6px 24px rgba(5, 46, 22, 0.4);
}

@media (max-width: 480px) {
  .shuffleboard-wrap {
    padding: 4px 0;
  }

  .shuffleboard-canvas {
    border-radius: 10px;
  }
}

/* --- curling --- */
.curling-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

.curling-wrap--shake {
  animation: curling-shake 0.42s ease-out;
}

.curling-wrap--celebrate .curling-canvas {
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.45),
    0 12px 40px rgba(30, 58, 95, 0.5),
    0 0 32px rgba(250, 204, 21, 0.22);
}

@keyframes curling-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-4px, 2px); }
  30% { transform: translate(4px, -2px); }
  45% { transform: translate(-3px, -2px); }
  60% { transform: translate(3px, 2px); }
  75% { transform: translate(-2px, 1px); }
}

.curling-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: grab;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(30, 58, 95, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.35);
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

.curling-canvas:active {
  cursor: grabbing;
  transform: scale(0.985);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 6px 24px rgba(30, 58, 95, 0.4);
}

@media (max-width: 480px) {
  .curling-wrap {
    padding: 4px 0;
  }

  .curling-canvas {
    border-radius: 10px;
  }
}

/* --- hammer-strike --- */
.hammer-strike-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: none;
}

.hammer-strike-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  width: 100%;
  font-size: 14px;
  color: #94a3b8;
}

.hammer-strike-hud span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hammer-strike-hud strong {
  color: #e2e8f0;
  font-size: 16px;
}

.hammer-strike-hud-score strong {
  color: #fbbf24;
}

.hammer-strike-hud-best strong {
  color: #4ade80;
}

.hammer-strike-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

@media (max-width: 480px) {
  .hammer-strike-wrap {
    padding: 4px 0;
  }

  .hammer-strike-canvas {
    border-radius: 10px;
  }
}

/* --- hurdle-dash --- */
.hurdle-dash-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.hurdle-dash-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
  font-size: 13px;
  color: #94a3b8;
}

.hurdle-dash-hud span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hurdle-dash-hud strong {
  color: #e2e8f0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.hurdle-dash-hud-time strong {
  color: #fbbf24;
}

.hurdle-dash-hud-best strong {
  color: #4ade80;
}

.hurdle-dash-hud-streak strong {
  color: #38bdf8;
}

.hurdle-dash-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  background: #0c4a6e;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.hurdle-dash-wrap:active .hurdle-dash-canvas {
  filter: brightness(1.04);
}

@media (max-width: 480px) {
  .hurdle-dash-wrap {
    padding: 4px 0;
  }

  .hurdle-dash-canvas {
    border-radius: 10px;
  }
}

/* --- claw-machine --- */
.claw-machine-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 0 12px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.claw-machine-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  width: 100%;
  max-width: 420px;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(190, 18, 60, 0.35), rgba(30, 27, 75, 0.55));
  border: 1px solid rgba(251, 113, 133, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem;
  color: #fecdd3;
}

.claw-machine-hud strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

.claw-machine-hud-score strong {
  color: #fbbf24;
}

.claw-machine-hud-best strong {
  color: #4ade80;
}

.claw-machine-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(251, 113, 133, 0.25);
}

.claw-machine-wrap--tap .claw-machine-canvas {
  transform: scale(0.992);
  transition: transform 0.08s ease-out;
}

.claw-machine-wrap--shake .claw-machine-canvas {
  animation: claw-machine-shake 0.4s ease-out;
}

.claw-machine-wrap--celebrate .claw-machine-canvas {
  animation: claw-machine-pulse 0.7s ease-out;
}

@keyframes claw-machine-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px) rotate(-0.6deg);
  }
  40% {
    transform: translateX(6px) rotate(0.6deg);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(3px);
  }
}

@keyframes claw-machine-pulse {
  0% {
    filter: brightness(1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  }
  40% {
    filter: brightness(1.18);
    box-shadow: 0 0 28px rgba(251, 191, 36, 0.45);
  }
  100% {
    filter: brightness(1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  }
}

@media (max-width: 480px) {
  .claw-machine-wrap {
    padding: 4px 0;
  }

  .claw-machine-hud {
    font-size: 0.82rem;
    gap: 8px 12px;
  }

  .claw-machine-canvas {
    border-radius: 10px;
  }
}

/* --- sumo-push --- */
.sumo-push-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: none;
}

.sumo-push-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  width: 100%;
  font-size: 14px;
  color: #94a3b8;
}

.sumo-push-hud span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sumo-push-hud strong {
  color: #e2e8f0;
  font-size: 16px;
}

.sumo-push-hud-score strong {
  color: #38bdf8;
}

.sumo-push-ai {
  color: #f87171 !important;
}

.sumo-push-hud-best strong {
  color: #4ade80;
}

.sumo-push-hint {
  font-size: 13px;
  color: #fbbf24;
  text-align: center;
  min-height: 1.2em;
}

.sumo-push-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

@media (max-width: 480px) {
  .sumo-push-wrap {
    padding: 4px 0;
  }

  .sumo-push-canvas {
    border-radius: 10px;
  }
}

/* --- coin-pusher --- */
.coin-pusher-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: none;
}

.coin-pusher-wrap--shake {
  animation: coin-pusher-shake 0.4s ease-out;
}

.coin-pusher-wrap--celebrate .coin-pusher-canvas {
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.55),
    0 12px 36px rgba(234, 179, 8, 0.35);
}

@keyframes coin-pusher-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.coin-pusher-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  width: 100%;
  font-size: 14px;
  color: #94a3b8;
}

.coin-pusher-hud span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.coin-pusher-hud strong {
  color: #e2e8f0;
  font-size: 16px;
}

.coin-pusher-hud-bank strong {
  color: #fbbf24;
}

.coin-pusher-hud-score strong {
  color: #4ade80;
}

.coin-pusher-hud-best strong {
  color: #38bdf8;
}

.coin-pusher-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 14px;
  cursor: pointer;
  touch-action: none;
  background: #0f172a;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.coin-pusher-canvas:active {
  transform: scale(0.992);
}

@media (max-width: 480px) {
  .coin-pusher-wrap {
    padding: 4px 0;
  }

  .coin-pusher-canvas {
    border-radius: 10px;
  }
}

/* --- wheelie-ride --- */
.wheelie-ride-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  touch-action: none;
}

.wheelie-ride-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 12px;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.35),
    0 14px 36px rgba(127, 29, 29, 0.45);
  background: #0f172a;
  transition: transform 0.08s ease-out, box-shadow 0.15s ease;
}

.wheelie-ride-wrap:active .wheelie-ride-canvas {
  transform: scale(0.992);
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.5),
    0 10px 28px rgba(127, 29, 29, 0.55);
}

@media (max-width: 480px) {
  .wheelie-ride-canvas {
    border-radius: 10px;
  }
}

/* --- claw-machine --- */
.claw-machine-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 6px 0 4px;
  user-select: none;
  -webkit-user-select: none;
}

.claw-machine-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(190, 18, 60, 0.35), rgba(30, 27, 75, 0.55));
  border: 1px solid rgba(251, 191, 36, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: #e2e8f0;
}

.claw-machine-hud strong {
  color: #fde68a;
  font-size: 16px;
  margin-left: 4px;
}

.claw-machine-hud-score strong {
  color: #4ade80;
}

.claw-machine-hud-best strong {
  color: #f0abfc;
}

.claw-machine-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(251, 113, 133, 0.2);
  transition: transform 0.08s ease-out;
}

.claw-machine-wrap--tap .claw-machine-canvas {
  transform: scale(0.992);
}

.claw-machine-wrap--shake .claw-machine-canvas {
  animation: claw-machine-shake 0.4s ease-out;
}

.claw-machine-wrap--celebrate .claw-machine-canvas {
  animation: claw-machine-pulse 0.7s ease-out;
}

@keyframes claw-machine-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px) rotate(-0.6deg);
  }
  40% {
    transform: translateX(6px) rotate(0.6deg);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(3px);
  }
}

@keyframes claw-machine-pulse {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.18);
    box-shadow: 0 0 28px rgba(251, 191, 36, 0.45);
  }
  100% {
    filter: brightness(1);
  }
}

@media (max-width: 480px) {
  .claw-machine-wrap {
    padding: 4px 0;
  }

  .claw-machine-canvas {
    border-radius: 10px;
  }

  .claw-machine-hud {
    gap: 8px 14px;
    font-size: 12px;
  }
}

/* --- ring-toss --- */
.ring-toss-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: none;
  padding: 8px 0;
}

.ring-toss-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 8px 28px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(245, 158, 11, 0.22);
  background: #1e3a5f;
  transition: transform 0.08s ease-out, box-shadow 0.15s ease;
}

.ring-toss-wrap:active .ring-toss-canvas {
  transform: scale(0.985);
  box-shadow:
    0 4px 18px rgba(15, 23, 42, 0.4),
    0 0 0 1px rgba(245, 158, 11, 0.35);
}

@media (max-width: 480px) {
  .ring-toss-canvas {
    border-radius: 10px;
  }
}

/* --- javelin-throw --- */
.javelin-throw-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 6px 0 12px;
  user-select: none;
  -webkit-user-select: none;
}

.javelin-throw-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(30, 58, 138, 0.45));
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.javelin-throw-hud span {
  font-size: 13px;
  color: #cbd5e1;
  letter-spacing: 0.02em;
}

.javelin-throw-hud strong {
  color: #f8fafc;
  font-weight: 700;
}

.javelin-throw-hud-best strong {
  color: #4ade80;
}

.javelin-throw-hud-wind strong.tail {
  color: #7dd3fc;
}

.javelin-throw-hud-wind strong.head {
  color: #fca5a5;
}

.javelin-throw-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: #bae6fd;
}

.javelin-throw-wrap:active .javelin-throw-canvas {
  transform: scale(0.995);
  transition: transform 0.08s ease;
}

.javelin-throw-wrap--shake {
  animation: javelin-throw-shake 0.4s ease;
}

.javelin-throw-wrap--celebrate {
  animation: javelin-throw-glow 1.1s ease;
}

@keyframes javelin-throw-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
}

@keyframes javelin-throw-glow {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.18);
  }
  100% {
    filter: brightness(1);
  }
}

@media (max-width: 480px) {
  .javelin-throw-wrap {
    padding: 4px 0;
    gap: 8px;
  }

  .javelin-throw-hud {
    gap: 8px 10px;
    padding: 6px 10px;
  }

  .javelin-throw-canvas {
    border-radius: 10px;
  }
}

/* --- tug-of-war --- */
.tug-of-war-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tug-of-war-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  width: 100%;
  font-size: 14px;
  color: #94a3b8;
}

.tug-of-war-hud span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tug-of-war-hud strong {
  color: #e2e8f0;
  font-size: 16px;
}

.tug-of-war-hud-score strong {
  color: #60a5fa;
}

.tug-of-war-hud-score strong:last-child {
  color: #f87171;
}

.tug-of-war-hud-best strong {
  color: #4ade80;
}

.tug-of-war-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.tug-of-war-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 64px;
  padding: 16px 24px;
  border: none;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0f172a;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #d97706 100%);
  box-shadow:
    0 4px 0 #92400e,
    0 8px 20px rgba(180, 83, 9, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}

.tug-of-war-btn:active {
  filter: brightness(1.05);
  box-shadow:
    0 2px 0 #92400e,
    0 4px 12px rgba(180, 83, 9, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.tug-of-war-btn--go {
  background: linear-gradient(180deg, #86efac 0%, #22c55e 55%, #16a34a 100%);
  box-shadow:
    0 4px 0 #14532d,
    0 8px 20px rgba(22, 163, 74, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #052e16;
}

.tug-of-war-btn--stop {
  background: linear-gradient(180deg, #fca5a5 0%, #ef4444 55%, #b91c1c 100%);
  box-shadow:
    0 4px 0 #7f1d1d,
    0 8px 20px rgba(185, 28, 28, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #450a0a;
  animation: tug-of-war-stop-pulse 0.55s ease-in-out infinite alternate;
}

@keyframes tug-of-war-stop-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.12); }
}

.tug-of-war-btn--disabled,
.tug-of-war-btn:disabled {
  opacity: 0.45;
  cursor: default;
  filter: grayscale(0.35);
  animation: none;
}

.tug-of-war-hint {
  margin: 0;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .tug-of-war-wrap {
    padding: 4px 0;
  }

  .tug-of-war-canvas {
    border-radius: 10px;
  }

  .tug-of-war-btn {
    min-height: 72px;
    font-size: 20px;
    border-radius: 14px;
  }
}

/* --- long-jump --- */
.long-jump-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 6px 4px 12px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.long-jump-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.18), rgba(14, 165, 233, 0.14));
  border: 1px solid rgba(74, 222, 128, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.long-jump-hud span {
  font-size: 0.85rem;
  color: #cbd5e1;
  letter-spacing: 0.02em;
}

.long-jump-hud strong {
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
}

.long-jump-hud-record strong {
  color: #4ade80;
}

.long-jump-hud-best strong {
  color: #7dd3fc;
}

.long-jump-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #7dd3fc;
  transition: transform 0.08s ease-out, box-shadow 0.15s ease;
}

.long-jump-wrap:active .long-jump-canvas {
  transform: scale(0.992);
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 480px) {
  .long-jump-wrap {
    padding: 4px 0;
  }

  .long-jump-canvas {
    border-radius: 10px;
  }

  .long-jump-hud {
    gap: 8px 12px;
    font-size: 0.8rem;
  }
}
/* --- swim-sprint --- */
.swim-sprint-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 0;
}

.swim-sprint-wrap--shake {
  animation: swim-sprint-shake 0.35s ease-out;
}

.swim-sprint-wrap--finish .swim-sprint-canvas {
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.5),
    0 16px 48px rgba(14, 116, 144, 0.55),
    0 0 36px rgba(253, 224, 71, 0.3);
}

.swim-sprint-wrap--fail .swim-sprint-canvas {
  filter: saturate(0.7) brightness(0.85);
}

@keyframes swim-sprint-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 2px); }
  50% { transform: translate(4px, -2px); }
  75% { transform: translate(-2px, 1px); }
}

.swim-sprint-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
}

.swim-sprint-hud strong {
  color: #e0f2fe;
  font-size: 15px;
}

.swim-sprint-hud-best strong {
  color: #4ade80;
}

.swim-sprint-hud-pace strong {
  color: #38bdf8;
}

.swim-sprint-o2-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  padding: 0 4px;
}

.swim-sprint-o2-wrap--pulse {
  animation: swim-sprint-crisis 0.35s ease infinite;
}

.swim-sprint-o2-label {
  font-size: 12px;
  font-weight: 700;
  color: #7dd3fc;
  min-width: 28px;
}

.swim-sprint-o2 {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, 0.25);
}

.swim-sprint-o2-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0ea5e9, #22d3ee, #67e8f9);
  transition: width 0.1s linear, background 0.2s ease;
}

.swim-sprint-o2-fill--warn {
  background: linear-gradient(90deg, #f97316, #fb923c);
}

.swim-sprint-o2-fill--crit {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

@keyframes swim-sprint-crisis {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.swim-sprint-canvas {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 14px;
  touch-action: none;
  cursor: pointer;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(2, 132, 199, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.3);
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.swim-sprint-pad {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 400px;
}

.swim-sprint-btn {
  flex: 1;
  min-height: 54px;
  border: none;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}

.swim-sprint-btn--left {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  color: #eff6ff;
  box-shadow: 0 4px 0 #1e3a8a;
}

.swim-sprint-btn--right {
  background: linear-gradient(180deg, #ec4899, #be185d);
  color: #fdf2f8;
  box-shadow: 0 4px 0 #831843;
}

.swim-sprint-btn--breathe {
  flex: 0.7;
  background: linear-gradient(180deg, #22d3ee, #0891b2);
  color: #ecfeff;
  box-shadow: 0 4px 0 #0e7490;
  font-size: 22px;
}

.swim-sprint-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.swim-sprint-hint {
  font-size: 13px;
  font-weight: 600;
  color: #7dd3fc;
  text-align: center;
  min-height: 1.2em;
  transition: opacity 0.3s ease;
}

.swim-sprint-hint--fade {
  opacity: 0.35;
}

@media (max-width: 480px) {
  .swim-sprint-wrap {
    padding: 4px 0;
  }

  .swim-sprint-canvas {
    border-radius: 10px;
  }

  .swim-sprint-btn {
    min-height: 56px;
  }
}
/* ===== baccarat ===== */
.bac-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0 16px;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  touch-action: manipulation;
}

.bac-wrap--shake {
  animation: bac-shake 0.4s ease;
}

.bac-wrap--jackpot {
  animation: bac-jackpot-flash 1.1s ease;
}

@keyframes bac-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes bac-jackpot-flash {
  0%, 100% { filter: brightness(1); }
  30% { filter: brightness(1.25) saturate(1.3); }
  60% { filter: brightness(1.1); }
}

.bac-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.bac-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.bac-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(160deg, #1c1917 0%, #292524 100%);
  border: 1px solid rgba(185, 28, 28, 0.35);
  min-width: 64px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.bac-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #a8a29e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bac-stat-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fbbf24;
}

.bac-stat-value--chips {
  color: #fde68a;
}

.bac-stat-value--streak {
  color: #fb7185;
}

.bac-stat-value--flash {
  animation: bac-flash 0.5s ease;
}

.bac-stat-value--pop {
  animation: bac-pop 0.4s ease;
}

@keyframes bac-flash {
  0%, 100% { color: #fde68a; }
  40% { color: #fff; text-shadow: 0 0 12px #fbbf24; }
}

@keyframes bac-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.bac-tower {
  position: relative;
  width: 28px;
  height: 56px;
  border-radius: 8px;
  background: rgba(28, 25, 23, 0.8);
  border: 1px solid rgba(251, 191, 36, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bac-tower-label {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  z-index: 1;
}

.bac-tower-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #fbbf24, #b45309);
  transition: height 0.35s ease;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.bac-tower-fill--pop {
  animation: bac-pop 0.4s ease;
}

.bac-tower--hot {
  border-color: #f43f5e;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.45);
}

.bac-tower--hot .bac-tower-fill {
  background: linear-gradient(180deg, #fb7185, #be123c);
}

.bac-table {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 520px;
  padding: 18px 14px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(220, 38, 38, 0.18), transparent 55%),
    linear-gradient(165deg, #14532d 0%, #052e16 55%, #022c22 100%);
  border: 2px solid #166534;
  box-shadow:
    inset 0 0 48px rgba(0, 0, 0, 0.3),
    0 8px 28px rgba(0, 0, 0, 0.35);
}

.bac-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bac-zone-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bac-zone-score {
  font-size: 1.35rem;
  font-weight: 900;
  color: #fef08a;
  min-height: 1.4em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.bac-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
}

.bac-card {
  position: relative;
  width: 62px;
  height: 88px;
  border-radius: 8px;
  background: linear-gradient(160deg, #fffef8, #f5f0e6);
  border: 1px solid #d6d3d1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  color: #1c1917;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.bac-card--back {
  background:
    repeating-linear-gradient(45deg, #7f1d1d 0 6px, #991b1b 6px 12px),
    linear-gradient(160deg, #b91c1c, #7f1d1d);
  border-color: #450a0a;
}

.bac-card--red { color: #b91c1c; }
.bac-card--black { color: #1c1917; }

.bac-card--deal {
  animation: bac-deal-in 0.28s ease;
}

.bac-card--squeeze {
  animation: bac-squeeze 0.42s ease;
}

.bac-card--pop {
  animation: bac-pop 0.28s ease;
}

@keyframes bac-deal-in {
  from { transform: translateY(-24px) scale(0.85); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes bac-squeeze {
  0% { transform: scaleX(1); filter: brightness(0.7); }
  40% { transform: scaleX(0.15); }
  100% { transform: scaleX(1); filter: brightness(1); }
}

.bac-corner {
  position: absolute;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
}

.bac-corner--tl { top: 4px; left: 5px; }
.bac-corner--br { bottom: 4px; right: 5px; transform: rotate(180deg); }

.bac-suit-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.bac-beads {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  padding: 0 4px;
}

.bac-beads-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.bac-beads-track {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-height: 22px;
}

.bac-bead {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.bac-bead--p { background: linear-gradient(160deg, #3b82f6, #1d4ed8); }
.bac-bead--b { background: linear-gradient(160deg, #f43f5e, #be123c); }
.bac-bead--t { background: linear-gradient(160deg, #22c55e, #15803d); }

.bac-bet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.bac-bet-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.bac-bet-input {
  width: 88px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
}

.bac-bet-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bac-bet-preset {
  min-width: 48px;
  min-height: 40px;
}

.bac-sides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.bac-side {
  min-height: 64px;
  border: 2px solid transparent;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: pre-line;
  line-height: 1.25;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.bac-side:active:not(:disabled) {
  transform: translateY(2px) scale(0.98);
}

.bac-side:disabled {
  opacity: 0.55;
  cursor: default;
}

.bac-side--player {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  color: #eff6ff;
  box-shadow: 0 4px 0 #1e3a8a;
}

.bac-side--banker {
  background: linear-gradient(180deg, #fb7185, #e11d48);
  color: #fff1f2;
  box-shadow: 0 4px 0 #9f1239;
}

.bac-side--tie {
  background: linear-gradient(180deg, #4ade80, #16a34a);
  color: #f0fdf4;
  box-shadow: 0 4px 0 #14532d;
}

.bac-side--active {
  border-color: #fde68a;
  box-shadow: 0 0 0 3px rgba(253, 230, 138, 0.45), 0 4px 0 rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.bac-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.bac-btn-deal {
  min-width: 160px;
  min-height: 52px;
  font-size: 1.1rem;
  font-weight: 800;
  border-radius: 14px;
}

.bac-feedback {
  margin: 0;
  min-height: 1.4em;
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-muted);
}

.bac-feedback--ok { color: #4ade80; }
.bac-feedback--bad { color: #fb7185; }
.bac-feedback--jackpot {
  color: #fbbf24;
  font-size: 1.2rem;
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.6);
  animation: bac-pop 0.5s ease;
}

.bac-shoe-info,
.bac-payout-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.bac-fx {
  pointer-events: none;
  position: absolute;
  inset: 30% 0 auto;
  height: 0;
  display: flex;
  justify-content: center;
  z-index: 5;
}

.bac-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fbbf24;
  animation: bac-particle-fly 0.85s ease forwards;
}

.bac-particle--jackpot {
  width: 10px;
  height: 10px;
  background: #f43f5e;
  box-shadow: 0 0 8px #fbbf24;
}

.bac-particle--win {
  background: #4ade80;
}

@keyframes bac-particle-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

@media (max-width: 480px) {
  .bac-card {
    width: 54px;
    height: 78px;
  }

  .bac-side {
    min-height: 72px;
    font-size: 0.9rem;
  }

  .bac-btn-deal {
    min-height: 56px;
    width: 100%;
    max-width: 320px;
  }

  .bac-suit-center { font-size: 22px; }
}

/* --- card-war --- */
.card-war-wrap {
  --cw-felt: #14532d;
  --cw-felt-deep: #052e16;
  --cw-gold: #fbbf24;
  --cw-ink: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
  padding: 8px 6px 12px;
  user-select: none;
  -webkit-user-select: none;
}

.card-war-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.card-war-hud > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.88));
  border: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.02em;
}

.card-war-hud strong {
  font-size: 18px;
  color: var(--cw-ink);
  font-variant-numeric: tabular-nums;
}

.card-war-hud-you strong { color: #86efac; }
.card-war-hud-ai strong { color: #fda4af; }
.card-war-hud-best strong { color: var(--cw-gold); }
.card-war-hud-streak--hot {
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.35);
}
.card-war-hud-streak--hot strong { color: #fb923c; }

.card-war-arena {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  min-height: 320px;
  padding: 18px 12px 22px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(74, 222, 128, 0.18), transparent 55%),
    radial-gradient(ellipse at 30% 80%, rgba(15, 23, 42, 0.35), transparent 50%),
    linear-gradient(165deg, var(--cw-felt) 0%, var(--cw-felt-deep) 100%);
  border: 2px solid rgba(21, 128, 61, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -18px 40px rgba(0, 0, 0, 0.25),
    0 12px 28px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
}

.card-war-arena::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(134, 239, 172, 0.18);
  pointer-events: none;
}

.card-war-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.card-war-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: card-war-pop 0.55s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

@keyframes card-war-pop {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2);
  }
}

.card-war-banner {
  position: absolute;
  left: 50%;
  top: 14%;
  transform: translate(-50%, -8px) scale(0.85);
  z-index: 6;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #0f172a;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.card-war-banner--show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.card-war-banner--war {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  color: #fff;
  animation: card-war-drum 0.35s ease-in-out 3;
}

.card-war-banner--win { background: linear-gradient(135deg, #86efac, #22c55e); }
.card-war-banner--lose { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.card-war-banner--streak { background: linear-gradient(135deg, #fdba74, #f97316); color: #fff; }
.card-war-banner--royal {
  background: linear-gradient(135deg, #fef08a, #eab308 40%, #f59e0b);
  box-shadow: 0 0 24px rgba(250, 204, 21, 0.55);
}

@keyframes card-war-drum {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, 0) scale(1.08); }
}

.card-war-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.card-war-side--ai { flex-direction: column-reverse; }

.card-war-mid {
  z-index: 2;
  min-width: 52px;
  text-align: center;
}

.card-war-mid-label {
  font-size: 13px;
  font-weight: 800;
  color: rgba(248, 250, 252, 0.85);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.06em;
}

.card-war-deck {
  position: relative;
  width: 54px;
  height: 74px;
}

.card-war-deck-stack,
.card-war-deck-stack::before,
.card-war-deck-stack::after {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background:
    linear-gradient(145deg, #1d4ed8 0%, #1e3a8a 55%, #172554 100%);
  border: 2px solid rgba(191, 219, 254, 0.35);
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.45);
}

.card-war-deck-stack::before {
  content: '';
  transform: translate(3px, -3px);
  opacity: 0.85;
  z-index: -1;
}

.card-war-deck-stack::after {
  content: '';
  transform: translate(6px, -6px);
  opacity: 0.55;
  z-index: -2;
}

.card-war-deck--empty .card-war-deck-stack,
.card-war-deck--empty .card-war-deck-stack::before,
.card-war-deck--empty .card-war-deck-stack::after {
  background: rgba(15, 23, 42, 0.25);
  border-style: dashed;
  box-shadow: none;
}

.card-war-deck-count {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  color: #bbf7d0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.card-war-play {
  position: relative;
  width: 92px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-war-war-stack {
  position: absolute;
  left: -18px;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 0;
}

.card-war-side--ai .card-war-war-stack {
  left: auto;
  right: -18px;
}

.card-war-mini-back {
  width: 28px;
  height: 38px;
  border-radius: 5px;
  background: linear-gradient(145deg, #1d4ed8, #1e3a8a);
  border: 1px solid rgba(191, 219, 254, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateX(calc(var(--i) * 3px)) rotate(calc(var(--i) * -4deg));
  animation: card-war-bury 0.35s ease-out both;
  animation-delay: calc(var(--i) * 60ms);
}

@keyframes card-war-bury {
  from { opacity: 0; transform: translateY(-12px) scale(0.8); }
  to { opacity: 1; }
}

.card-war-card {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 128px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 10px;
  font-family: Georgia, 'Times New Roman', serif;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.card-war-card--back {
  background:
    repeating-linear-gradient(
      45deg,
      #1e40af 0 6px,
      #1d4ed8 6px 12px
    );
  border: 2px solid rgba(191, 219, 254, 0.45);
  color: #e2e8f0;
  align-items: center;
  justify-content: center;
}

.card-war-card-pattern {
  font-size: 28px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

.card-war-card--face {
  background: linear-gradient(165deg, #ffffff 0%, #f1f5f9 100%);
  border: 2px solid rgba(15, 23, 42, 0.12);
}

.card-war-card-rank {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.card-war-card-rank--br {
  align-self: flex-end;
  transform: rotate(180deg);
}

.card-war-card-suit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  line-height: 1;
}

.card-war-card--flip {
  animation: card-war-flip 0.45s ease;
}

@keyframes card-war-flip {
  0% { transform: rotateY(0) scale(1); }
  45% { transform: rotateY(90deg) scale(1.05); }
  100% { transform: rotateY(0) scale(1); }
}

.card-war-card--win {
  transform: scale(1.08) translateY(-6px);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.7), 0 12px 24px rgba(0, 0, 0, 0.4);
}

.card-war-card--lose {
  filter: brightness(0.72) saturate(0.7);
  transform: scale(0.94) translateY(4px);
}

.card-war-card--slow {
  animation: card-war-slowmo 0.9s ease;
}

@keyframes card-war-slowmo {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) rotate(-3deg); }
  100% { transform: scale(1.08) translateY(-6px); }
}

.card-war-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
}

.card-war-hint {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #86efac;
  text-align: center;
  min-height: 1.3em;
  transition: opacity 0.3s ease;
}

.card-war-hint--fade { opacity: 0.4; }

.card-war-auto {
  flex-shrink: 0;
  min-height: 44px;
  min-width: 72px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(160deg, #1e293b, #0f172a);
  color: #e2e8f0;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card-war-auto:active { transform: translateY(1px); }

.card-war-auto--on {
  border-color: rgba(74, 222, 128, 0.65);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
  color: #86efac;
}

.card-war-wrap--war .card-war-arena {
  animation: card-war-pulse 0.4s ease-in-out 2;
}

@keyframes card-war-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15) saturate(1.2); }
}

.card-war-wrap--streak .card-war-arena {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(249, 115, 22, 0.45),
    0 12px 28px rgba(0, 0, 0, 0.35);
}

.card-war-wrap--royal .card-war-arena {
  box-shadow:
    inset 0 0 40px rgba(250, 204, 21, 0.25),
    0 0 28px rgba(234, 179, 8, 0.4);
}

.card-war-wrap--celebrate .card-war-arena {
  animation: card-war-winflash 0.8s ease;
}

@keyframes card-war-winflash {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.35) saturate(1.3); }
}

.card-war-wrap--shake {
  animation: card-war-shake 0.45s ease-out;
}

@keyframes card-war-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

@media (max-width: 480px) {
  .card-war-wrap { padding: 4px 0 8px; max-width: 100%; }
  .card-war-arena { min-height: 290px; padding: 14px 8px 18px; }
  .card-war-card { width: 78px; height: 110px; border-radius: 10px; }
  .card-war-play { width: 78px; height: 110px; }
  .card-war-card-suit { font-size: 30px; }
  .card-war-card-rank { font-size: 18px; }
  .card-war-hud > span { padding: 6px 2px; font-size: 10px; }
  .card-war-hud strong { font-size: 16px; }
}

/* --- domino --- */
.domino-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 8px 6px 12px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(45, 212, 191, 0.12), transparent 55%),
    linear-gradient(165deg, #0f172a 0%, #134e4a 48%, #0f172a 100%);
  border-radius: 16px;
  border: 1px solid rgba(45, 212, 191, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.domino-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
  font-size: 13px;
  color: #94a3b8;
}

.domino-hud strong {
  color: #e2e8f0;
  font-size: 15px;
}

.domino-hud-hand strong { color: #5eead4; }
.domino-hud-ai strong { color: #fca5a5; }
.domino-hud-best strong { color: #fde68a; }

.domino-status {
  margin: 0;
  min-height: 1.35em;
  text-align: center;
  font-size: 14px;
  font-weight: 650;
  color: #99f6e4;
}

.domino-status--win { color: #86efac; }
.domino-status--lose { color: #fca5a5; }

.domino-board {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 120px;
  max-height: 200px;
  overflow: auto;
  padding: 10px 8px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 11px,
      rgba(15, 23, 42, 0.25) 11px,
      rgba(15, 23, 42, 0.25) 12px
    ),
    linear-gradient(180deg, #115e59 0%, #0f766e 100%);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.18s ease;
}

.domino-board--snap {
  transform: scale(1.02);
}

.domino-board-empty {
  color: rgba(204, 251, 241, 0.55);
  font-size: 13px;
  font-weight: 600;
}

.domino-placed {
  display: inline-flex;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.domino-placed--new .domino-tile {
  animation: domino-pop 0.28s ease;
}

.domino-placed--fall {
  transform: translateY(28px) rotate(18deg);
  opacity: 0;
}

@keyframes domino-pop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.domino-tile {
  display: inline-flex;
  align-items: stretch;
  width: 52px;
  height: 28px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  box-shadow:
    0 2px 0 #64748b,
    0 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 #fff;
  overflow: hidden;
}

.domino-tile--v {
  flex-direction: column;
  width: 28px;
  height: 52px;
}

.domino-half {
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
}

.domino-half::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0f172a;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.15);
  opacity: 0;
}

.domino-half[data-n="1"]::after { opacity: 1; }
.domino-half[data-n="2"]::after {
  opacity: 1;
  box-shadow:
    -5px -4px 0 #0f172a,
    5px 4px 0 #0f172a;
  background: transparent;
  width: 5px;
  height: 5px;
}
.domino-half[data-n="3"]::after {
  opacity: 1;
  box-shadow:
    -5px -4px 0 #0f172a,
    0 0 0 2.5px #0f172a,
    5px 4px 0 #0f172a;
  background: transparent;
  width: 0;
  height: 0;
}
.domino-half[data-n="4"]::after {
  opacity: 1;
  box-shadow:
    -5px -4px 0 #0f172a,
    5px -4px 0 #0f172a,
    -5px 4px 0 #0f172a,
    5px 4px 0 #0f172a;
  background: transparent;
  width: 0;
  height: 0;
}
.domino-half[data-n="5"]::after {
  opacity: 1;
  box-shadow:
    -5px -4px 0 #0f172a,
    5px -4px 0 #0f172a,
    0 0 0 2.5px #0f172a,
    -5px 4px 0 #0f172a,
    5px 4px 0 #0f172a;
  background: transparent;
  width: 0;
  height: 0;
}
.domino-half[data-n="6"]::after {
  opacity: 1;
  box-shadow:
    -5px -5px 0 #0f172a,
    5px -5px 0 #0f172a,
    -5px 0 0 #0f172a,
    5px 0 0 #0f172a,
    -5px 5px 0 #0f172a,
    5px 5px 0 #0f172a;
  background: transparent;
  width: 0;
  height: 0;
}

.domino-bar {
  width: 2px;
  background: linear-gradient(180deg, #94a3b8, #64748b);
  flex-shrink: 0;
}

.domino-tile--v .domino-bar {
  width: 100%;
  height: 2px;
}

.domino-ends {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.domino-ends[hidden] {
  display: none !important;
}

.domino-end-btn {
  flex: 1;
  max-width: 160px;
  min-height: 48px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 750;
  color: #042f2e;
  cursor: pointer;
  background: linear-gradient(180deg, #5eead4 0%, #14b8a6 100%);
  box-shadow: 0 3px 0 #0f766e, 0 6px 14px rgba(13, 148, 136, 0.35);
  -webkit-tap-highlight-color: transparent;
}

.domino-end-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0f766e;
}

.domino-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 64px;
  padding: 4px 2px;
}

.domino-hand-tile {
  appearance: none;
  border: 2px solid transparent;
  background: transparent;
  padding: 2px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 56px;
  min-height: 56px;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.domino-hand-tile--ok {
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.15);
}

.domino-hand-tile--ok:hover,
.domino-hand-tile--ok:focus-visible {
  transform: translateY(-4px) scale(1.04);
}

.domino-hand-tile--sel {
  border-color: #fbbf24;
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
}

.domino-hand-tile--dead {
  opacity: 0.42;
  filter: grayscale(0.35);
}

.domino-hand-tile:disabled {
  cursor: default;
}

.domino-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.domino-draw-btn,
.domino-pass-btn {
  min-height: 52px;
  min-width: 120px;
  padding: 10px 18px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.domino-draw-btn {
  color: #0f172a;
  background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 100%);
  box-shadow: 0 3px 0 #1d4ed8, 0 6px 14px rgba(37, 99, 235, 0.35);
}

.domino-pass-btn {
  color: #fff;
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  box-shadow: 0 3px 0 #9a3412, 0 6px 14px rgba(234, 88, 12, 0.3);
}

.domino-draw-btn:disabled,
.domino-pass-btn:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

.domino-draw-btn:not(:disabled):active,
.domino-pass-btn:not(:disabled):active {
  transform: translateY(2px);
}

.domino-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.domino-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: domino-burst 0.5s ease-out forwards;
}

@keyframes domino-burst {
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.2);
    opacity: 0;
  }
}

.domino-float {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, 0);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  animation: domino-float-up 0.85s ease-out forwards;
  white-space: nowrap;
}

@keyframes domino-float-up {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -28px) scale(1); }
}

.domino-wrap--shake {
  animation: domino-shake 0.3s ease;
}

@keyframes domino-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.domino-wrap--tease {
  animation: domino-tease 0.45s ease;
}

@keyframes domino-tease {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.15) saturate(1.2); }
}

.domino-wrap--win {
  box-shadow:
    inset 0 0 40px rgba(250, 204, 21, 0.25),
    0 0 24px rgba(250, 204, 21, 0.2);
}

.domino-wrap--lose {
  filter: saturate(0.75);
}

@media (max-width: 480px) {
  .domino-tile {
    width: 48px;
    height: 26px;
  }
  .domino-tile--v {
    width: 26px;
    height: 48px;
  }
  .domino-hand-tile {
    min-width: 52px;
    min-height: 52px;
  }
  .domino-end-btn,
  .domino-draw-btn,
  .domino-pass-btn {
    min-height: 56px;
  }
}

/* --- battleship --- */
.battleship-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 6px 4px 10px;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(14, 165, 233, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(2, 132, 199, 0.12), transparent 50%),
    linear-gradient(180deg, #0c1929 0%, #0a1628 50%, #07101c 100%);
  border-radius: 16px;
  overflow: hidden;
}

.battleship-wrap--win {
  animation: battleship-win-glow 0.8s ease;
}
.battleship-wrap--lose {
  animation: battleship-lose-shake 0.45s ease;
}
@keyframes battleship-win-glow {
  0%, 100% { box-shadow: none; }
  40% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.55), inset 0 0 30px rgba(125, 211, 252, 0.2); }
}
@keyframes battleship-lose-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.battleship-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(15, 23, 42, 0.65));
  border: 1px solid rgba(56, 189, 248, 0.25);
  font-size: 13px;
  color: #bae6fd;
}
.battleship-hud strong {
  color: #f0f9ff;
  font-size: 15px;
  margin-left: 4px;
}
.battleship-hud-combo {
  min-width: 2.5em;
  text-align: center;
}
.battleship-combo-pop {
  display: inline-block;
  color: #fbbf24 !important;
  animation: battleship-combo-bounce 0.35s ease;
}
@keyframes battleship-combo-bounce {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.battleship-hint {
  font-size: 13px;
  font-weight: 600;
  color: #7dd3fc;
  text-align: center;
  min-height: 1.3em;
  padding: 0 8px;
}

.battleship-place-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}
.battleship-ship-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.battleship-ship-btn {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 10px;
  background: linear-gradient(180deg, #1e3a5f, #0f2744);
  color: #e0f2fe;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}
.battleship-ship-btn--active {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35);
  background: linear-gradient(180deg, #0369a1, #0c4a6e);
}
.battleship-ship-btn--done {
  opacity: 0.45;
  filter: grayscale(0.4);
  cursor: default;
}
.battleship-ship-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.battleship-place-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.battleship-btn {
  min-height: 42px;
  padding: 8px 14px;
  border: none;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  color: #f0f9ff;
  background: linear-gradient(180deg, #334155, #1e293b);
  box-shadow: 0 3px 0 #0f172a;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.battleship-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0f172a;
}
.battleship-btn--auto {
  background: linear-gradient(180deg, #0ea5e9, #0369a1);
  box-shadow: 0 3px 0 #0c4a6e;
}
.battleship-btn--start {
  background: linear-gradient(180deg, #64748b, #475569);
  box-shadow: 0 3px 0 #334155;
  opacity: 0.7;
}
.battleship-btn--start.battleship-btn--ready {
  background: linear-gradient(180deg, #22c55e, #15803d);
  box-shadow: 0 3px 0 #14532d;
  opacity: 1;
  animation: battleship-pulse 1.4s ease infinite;
}
.battleship-btn--start:disabled {
  cursor: not-allowed;
}
@keyframes battleship-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

.battleship-view-toggle {
  display: none;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  justify-content: center;
}
.battleship-view-btn {
  flex: 1;
  min-height: 40px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.7);
  color: #94a3b8;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
.battleship-view-btn--active {
  color: #e0f2fe;
  background: linear-gradient(180deg, #0369a1, #0c4a6e);
  border-color: #38bdf8;
}

.battleship-boards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.battleship-boards--place .battleship-panel--enemy {
  display: none;
}
.battleship-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.battleship-panel-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #7dd3fc;
}
.battleship-board {
  display: grid;
  grid-template-columns: repeat(10, minmax(28px, 36px));
  grid-template-rows: repeat(10, minmax(28px, 36px));
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(12, 74, 110, 0.55), rgba(8, 47, 73, 0.85)),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(56, 189, 248, 0.06) 31px,
      rgba(56, 189, 248, 0.06) 32px
    );
  border: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow:
    0 8px 24px rgba(2, 20, 40, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.battleship-board--shake {
  animation: battleship-lose-shake 0.3s ease;
}

.battleship-cell {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(160deg, #164e73, #0c3a56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.battleship-cell:disabled {
  cursor: default;
}
.battleship-cell--place:hover:not(:disabled),
.battleship-cell--fog:hover:not(:disabled) {
  filter: brightness(1.18);
  transform: scale(1.04);
}
.battleship-cell--fog {
  background:
    linear-gradient(160deg, rgba(148, 163, 184, 0.25), rgba(71, 85, 105, 0.35)),
    linear-gradient(160deg, #1e3a5f, #0f2744);
}
.battleship-cell--ship {
  background: linear-gradient(160deg, #64748b, #334155);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(148, 163, 184, 0.4);
}
.battleship-cell--ship::after {
  content: '';
  position: absolute;
  inset: 22% 18%;
  border-radius: 3px;
  background: linear-gradient(180deg, #94a3b8, #475569);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.battleship-cell--ghost {
  background: rgba(56, 189, 248, 0.45) !important;
  outline: 2px solid #38bdf8;
}
.battleship-cell--ghost-bad {
  background: rgba(239, 68, 68, 0.4) !important;
  outline: 2px solid #ef4444;
}
.battleship-cell--miss {
  background: linear-gradient(160deg, #1e293b, #0f172a);
}
.battleship-cell--miss::after {
  content: '';
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 6px rgba(148, 163, 184, 0.5);
}
.battleship-cell--hit {
  background: linear-gradient(160deg, #f97316, #c2410c) !important;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.55);
}
.battleship-cell--hit::after {
  content: '';
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, #fef08a, #ef4444 70%);
}
.battleship-cell--sunk {
  background: linear-gradient(160deg, #7f1d1d, #450a0a) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}
.battleship-cell--sunk::after {
  content: '';
  position: absolute;
  inset: 20%;
  background:
    linear-gradient(45deg, transparent 42%, #fca5a5 42%, #fca5a5 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, #fca5a5 42%, #fca5a5 58%, transparent 58%);
  opacity: 0.9;
}
.battleship-cell--pop {
  animation: battleship-cell-pop 0.28s ease;
}
@keyframes battleship-cell-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.battleship-cell--reveal {
  background: linear-gradient(160deg, #64748b, #334155) !important;
  opacity: 0.85;
}

.battleship-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 5;
}
.battleship-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3px 0 0 -3px;
  animation: battleship-particle-fly 0.6s ease-out forwards;
}
.battleship-particle--hit {
  background: #fb923c;
  box-shadow: 0 0 6px #f97316;
}
.battleship-particle--miss {
  background: #94a3b8;
}
.battleship-particle--sink {
  width: 9px;
  height: 9px;
  background: #f87171;
  box-shadow: 0 0 8px #ef4444;
}
@keyframes battleship-particle-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

.battleship-banner {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.85);
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 900;
  color: #f0f9ff;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(56, 189, 248, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  max-width: 92%;
  text-align: center;
}
.battleship-banner--show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.battleship-banner--sink { color: #fecaca; border-color: #f87171; }
.battleship-banner--combo { color: #fde68a; border-color: #fbbf24; }
.battleship-banner--win { color: #bbf7d0; border-color: #4ade80; font-size: 18px; }
.battleship-banner--ok { color: #bae6fd; }
.battleship-banner--bad { color: #fecaca; }

@media (max-width: 700px) {
  .battleship-view-toggle {
    display: flex;
  }
  .battleship-boards--battle .battleship-panel {
    display: none;
  }
  .battleship-boards--battle .battleship-panel--active {
    display: flex;
  }
  .battleship-board {
    grid-template-columns: repeat(10, minmax(30px, 1fr));
    grid-template-rows: repeat(10, minmax(30px, 1fr));
    width: min(100%, 360px);
  }
  .battleship-cell {
    min-width: 30px;
    min-height: 30px;
  }
}

@media (max-width: 380px) {
  .battleship-board {
    grid-template-columns: repeat(10, minmax(28px, 1fr));
    grid-template-rows: repeat(10, minmax(28px, 1fr));
  }
  .battleship-cell {
    min-width: 28px;
    min-height: 28px;
    border-radius: 4px;
  }
}

/* ?? dots-boxes (?? ??) ?? */
.db-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 6px 12px;
  max-width: 440px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(124, 58, 237, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(14, 165, 233, 0.12), transparent 50%),
    linear-gradient(165deg, #1e1b4b 0%, #0f172a 55%, #1e293b 100%);
  border-radius: 16px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.db-diff-row {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.db-diff-btn {
  min-width: 88px;
  min-height: 40px;
  touch-action: manipulation;
}

.db-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.db-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.db-score--you {
  border-color: rgba(56, 189, 248, 0.45);
}

.db-score--ai {
  border-color: rgba(251, 113, 133, 0.45);
}

.db-score--active {
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.45);
  transform: translateY(-1px);
}

.db-score--lead .db-score-val {
  color: #fde68a;
}

.db-score-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.db-score-val {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: #f8fafc;
}

.db-score-val--pop {
  animation: db-val-pop 0.32s ease-out;
}

.db-score--you .db-score-val { color: #7dd3fc; }
.db-score--ai .db-score-val { color: #fda4af; }

.db-vs {
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

.db-best {
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
}

.db-status {
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  text-align: center;
}

.db-status--you { color: #7dd3fc; }
.db-status--ai { color: #fda4af; }
.db-status--bonus {
  color: #fde68a;
  animation: db-status-pulse 0.5s ease;
}

.db-board-wrap {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  touch-action: none;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 17px,
      rgba(148, 163, 184, 0.04) 17px,
      rgba(148, 163, 184, 0.04) 18px
    );
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(167, 139, 250, 0.2);
  overflow: hidden;
}

.db-board-wrap--shake {
  animation: db-shake 0.28s ease;
}

.db-board-wrap--win {
  box-shadow:
    0 0 0 2px rgba(74, 222, 128, 0.55),
    0 12px 36px rgba(34, 197, 94, 0.35);
}

.db-board-wrap--lose {
  animation: db-shake 0.4s ease;
  box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.45);
}

.db-board-wrap--draw {
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.4);
}

.db-board {
  width: 100%;
  height: 100%;
  display: block;
}

.db-box {
  fill: rgba(51, 65, 85, 0.35);
  transition: fill 0.2s ease;
}

.db-box--you {
  fill: rgba(14, 165, 233, 0.55);
}

.db-box--ai {
  fill: rgba(244, 63, 94, 0.5);
}

.db-box--claim {
  animation: db-box-claim 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);
}

.db-box--wave {
  animation: db-box-wave 0.4s ease;
}

.db-line {
  stroke: rgba(100, 116, 139, 0.45);
  stroke-width: 4;
  stroke-linecap: round;
  pointer-events: none;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
}

.db-line--taken {
  stroke-width: 6;
}

.db-line--you {
  stroke: #38bdf8;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.6));
}

.db-line--ai {
  stroke: #fb7185;
  filter: drop-shadow(0 0 4px rgba(251, 113, 133, 0.55));
}

.db-line--pop {
  animation: db-line-pop 0.28s ease-out;
}

.db-hit {
  fill: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.db-hit:hover {
  fill: rgba(250, 204, 21, 0.12);
}

.db-dot {
  fill: #e2e8f0;
  stroke: #94a3b8;
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.db-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.db-burst {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}

.db-burst-speck {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7dd3fc;
  animation: db-speck 0.45s ease-out forwards;
  transform: rotate(calc(var(--a) * 1deg)) translateY(0);
}

.db-burst--ai .db-burst-speck {
  background: #fda4af;
}

.db-combo {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 28px;
  font-weight: 900;
  color: #fde68a;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

.db-combo--pop {
  animation: db-combo-pop 0.7s ease-out;
}

.db-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  padding: 10px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 27, 75, 0.92));
  border: 1px solid rgba(167, 139, 250, 0.5);
  color: #f8fafc;
  font-size: 22px;
  font-weight: 900;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  white-space: nowrap;
}

.db-banner--show {
  animation: db-banner-in 0.55s ease-out forwards;
}

@keyframes db-val-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@keyframes db-status-pulse {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.55; transform: scale(1.05); }
}

@keyframes db-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes db-box-claim {
  0% { transform-origin: center; transform: scale(0.55); opacity: 0.4; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes db-box-wave {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.45); }
}

@keyframes db-line-pop {
  0% { stroke-width: 2; }
  50% { stroke-width: 9; }
  100% { stroke-width: 6; }
}

@keyframes db-speck {
  0% { opacity: 1; transform: rotate(calc(var(--a) * 1deg)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(calc(var(--a) * 1deg)) translateY(-28px) scale(0.3); }
}

@keyframes db-combo-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  25% { opacity: 1; transform: translate(-50%, -55%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

@keyframes db-banner-in {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.7); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 480px) {
  .db-wrap { padding: 6px 4px 10px; gap: 8px; }
  .db-score-val { font-size: 22px; }
  .db-diff-btn { min-height: 44px; }
  .db-hit { /* larger touch via SVG already */ }
}

/* ---- mancala ---- */
.mancala-wrap {
  --mancala-wood: #8b5a2b;
  --mancala-wood-dark: #5c3a1a;
  --mancala-felt: #2d5a3d;
  --mancala-you: #f59e0b;
  --mancala-ai: #94a3b8;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 6px 16px;
  user-select: none;
  -webkit-user-select: none;
}

.mancala-wrap--shake {
  animation: mancala-shake 0.28s ease;
}

.mancala-wrap--combo .mancala-board {
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.55),
    0 12px 36px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.mancala-wrap--win .mancala-board {
  animation: mancala-win-glow 1.1s ease;
}

.mancala-wrap--lose .mancala-board {
  animation: mancala-lose-dim 0.7s ease;
}

.mancala-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  color: #fef3c7;
}

.mancala-hud span {
  background: linear-gradient(160deg, rgba(92, 58, 26, 0.92), rgba(60, 35, 14, 0.95));
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.mancala-hud strong {
  color: #fde68a;
  font-variant-numeric: tabular-nums;
}

.mancala-hud-turn--you {
  color: #fbbf24 !important;
}

.mancala-hud-turn--ai {
  color: #cbd5e1 !important;
}

.mancala-hud-turn--over {
  color: #fda4af !important;
}

.mancala-hint {
  min-height: 1.3em;
  font-size: 13px;
  font-weight: 600;
  color: #d6d3d1;
  text-align: center;
}

.mancala-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(56px, 76px) 1fr minmax(56px, 76px);
  grid-template-rows: auto auto;
  grid-template-areas:
    "ai-store ai-pits you-store"
    "ai-store you-pits you-store";
  gap: 10px 8px;
  width: 100%;
  padding: 16px 12px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.08), transparent 45%),
    linear-gradient(145deg, #a16207 0%, var(--mancala-wood) 38%, var(--mancala-wood-dark) 100%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -8px 18px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(120, 53, 15, 0.55);
}

.mancala-pit--ai-store {
  grid-area: ai-store;
}

.mancala-pit--you-store {
  grid-area: you-store;
}

.mancala-pits--ai {
  grid-area: ai-pits;
}

.mancala-pits--you {
  grid-area: you-pits;
}

.mancala-pits {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.mancala-pit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 64px;
  min-width: 0;
  padding: 8px 4px 6px;
  border: none;
  border-radius: 50%;
  cursor: default;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.14), transparent 42%),
    radial-gradient(circle at 50% 60%, #1a3d28, #0f2418 70%);
  box-shadow:
    inset 0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 -2px 0 rgba(255, 255, 255, 0.06),
    0 2px 0 rgba(0, 0, 0, 0.25);
  color: #fef3c7;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  overflow: hidden;
}

.mancala-pit--you {
  border-radius: 18px;
}

.mancala-pit--ai {
  border-radius: 18px;
  opacity: 0.95;
}

.mancala-pit--store {
  min-height: 100%;
  align-self: stretch;
  border-radius: 28px;
  justify-content: center;
  background:
    radial-gradient(circle at 40% 22%, rgba(255, 255, 255, 0.16), transparent 40%),
    linear-gradient(180deg, #3f2a14, #1c120a 70%);
  box-shadow:
    inset 0 8px 20px rgba(0, 0, 0, 0.5),
    0 3px 0 rgba(0, 0, 0, 0.3);
}

.mancala-pit--playable {
  cursor: pointer;
  box-shadow:
    inset 0 6px 14px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(251, 191, 36, 0.55),
    0 4px 12px rgba(245, 158, 11, 0.25);
  animation: mancala-pulse 1.4s ease-in-out infinite;
}

.mancala-pit--playable:hover,
.mancala-pit--playable:focus-visible {
  transform: translateY(-2px) scale(1.03);
  outline: none;
}

.mancala-pit--playable:active {
  transform: translateY(1px) scale(0.98);
}

.mancala-pit--hot {
  filter: brightness(1.25);
  transform: scale(1.06);
}

.mancala-pit--picked {
  transform: scale(0.92);
  filter: brightness(0.85);
}

.mancala-pit--capture {
  animation: mancala-capture-pop 0.42s ease;
}

.mancala-pit--ai-pick {
  box-shadow:
    inset 0 6px 14px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(148, 163, 184, 0.7);
}

.mancala-pit--store-glow {
  box-shadow:
    inset 0 8px 20px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(251, 191, 36, 0.65),
    0 0 0 2px rgba(253, 230, 138, 0.7);
}

.mancala-pit--golden {
  background:
    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(180deg, #fbbf24, #b45309 75%) !important;
  animation: mancala-golden 1.2s ease infinite alternate;
}

.mancala-count {
  position: relative;
  z-index: 2;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  line-height: 1;
}

.mancala-pit--store .mancala-count {
  font-size: 22px;
}

.mancala-beads {
  position: absolute;
  inset: 18% 12% 14%;
  z-index: 1;
  pointer-events: none;
}

.mancala-bead {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fde68a, #d97706 55%, #92400e);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  left: calc(18% + (var(--i) * 11%) % 62%);
  top: calc(12% + (var(--i) * 17%) % 58%);
}

.mancala-pit--ai .mancala-bead {
  background: radial-gradient(circle at 30% 28%, #e2e8f0, #64748b 55%, #334155);
}

.mancala-gauge {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  z-index: 2;
}

.mancala-gauge-fill {
  display: block;
  width: 100%;
  height: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transition: height 0.25s ease;
}

.mancala-pit--ai-store .mancala-gauge-fill {
  background: linear-gradient(90deg, #cbd5e1, #64748b);
}

.mancala-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.mancala-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  animation: mancala-particle 0.65s ease-out forwards;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

.mancala-banner {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 6;
  padding: 10px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.95), rgba(69, 26, 3, 0.96));
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fef3c7;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
}

.mancala-banner--pop {
  animation: mancala-banner-pop 0.85s ease forwards;
}

@keyframes mancala-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@keyframes mancala-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes mancala-capture-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes mancala-particle {
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.2);
    opacity: 0;
  }
}

@keyframes mancala-banner-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(0.95); }
}

@keyframes mancala-win-glow {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.2) saturate(1.15); }
}

@keyframes mancala-lose-dim {
  0% { filter: brightness(1); }
  50% { filter: brightness(0.75) saturate(0.7); }
  100% { filter: brightness(0.9); }
}

@keyframes mancala-golden {
  from { filter: brightness(1) saturate(1); }
  to { filter: brightness(1.15) saturate(1.2); }
}

@media (max-width: 480px) {
  .mancala-wrap {
    padding: 4px 2px 12px;
  }

  .mancala-board {
    padding: 12px 8px;
    border-radius: 16px;
    grid-template-columns: 48px 1fr 48px;
    gap: 8px 6px;
  }

  .mancala-pit {
    min-height: 56px;
    padding: 6px 2px 4px;
  }

  .mancala-pit--store {
    min-height: 100%;
  }

  .mancala-pits {
    gap: 4px;
  }

  .mancala-count {
    font-size: 13px;
  }

  .mancala-pit--store .mancala-count {
    font-size: 18px;
  }

  .mancala-bead {
    width: 8px;
    height: 8px;
  }
}

/* --- mill-game --- */
.mill-game-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 4px 0 12px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.mill-game-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
  font-size: 13px;
  color: #a8a29e;
}

.mill-game-hud strong {
  color: #fef3c7;
  font-size: 15px;
  font-weight: 800;
}

.mill-game-hud-wins strong {
  color: #fbbf24;
}

.mill-game-hud-pieces strong:first-child {
  color: #f59e0b;
}

.mill-game-hud-pieces strong:last-child {
  color: #94a3b8;
}

.mill-game-status {
  min-height: 1.4em;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #fde68a;
  letter-spacing: 0.01em;
}

.mill-game-status--ai {
  color: #94a3b8;
}

.mill-game-status--remove {
  color: #38bdf8;
  animation: mill-game-pulse-text 0.7s ease-in-out infinite alternate;
}

.mill-game-status--win {
  color: #fbbf24;
  font-size: 18px;
}

.mill-game-status--lose {
  color: #f87171;
}

@keyframes mill-game-pulse-text {
  from { opacity: 0.75; transform: scale(1); }
  to { opacity: 1; transform: scale(1.03); }
}

.mill-game-threat {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #7f1d1d;
  background: linear-gradient(180deg, #fecaca, #f87171);
  box-shadow: 0 2px 10px rgba(248, 113, 113, 0.35);
  animation: mill-game-threat-pop 0.45s ease;
}

.mill-game-threat--hot {
  color: #78350f;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  box-shadow: 0 2px 14px rgba(245, 158, 11, 0.45);
}

@keyframes mill-game-threat-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.mill-game-board-frame {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(251, 191, 36, 0.12), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(120, 53, 15, 0.35), transparent 50%),
    linear-gradient(160deg, #3f2a1a 0%, #1c120a 45%, #292017 100%);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(180, 130, 70, 0.28);
}

.mill-game-board-frame.mill-game-end-win {
  box-shadow: 0 0 0 2px #fbbf24, 0 8px 32px rgba(251, 191, 36, 0.35);
}

.mill-game-board-frame.mill-game-end-lose {
  box-shadow: 0 0 0 2px #ef4444, 0 8px 28px rgba(239, 68, 68, 0.3);
}

.mill-game-board {
  position: absolute;
  inset: 4%;
}

.mill-game-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mill-game-line {
  stroke: #a16207;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.85;
  filter: drop-shadow(0 0 0.4px rgba(253, 230, 138, 0.35));
}

.mill-game-mill-glow line {
  stroke: transparent;
  stroke-width: 3.2;
  stroke-linecap: round;
  transition: stroke 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}

.mill-game-mill-glow--on line {
  stroke: #fbbf24;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.9));
  animation: mill-game-glow-pulse 0.7s ease-in-out infinite alternate;
}

.mill-game-mill-glow--threat line {
  stroke: #f87171;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(248, 113, 113, 0.8));
  animation: mill-game-glow-pulse 0.55s ease-in-out infinite alternate;
}

@keyframes mill-game-glow-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.mill-game-points {
  position: absolute;
  inset: 0;
}

.mill-game-point {
  position: absolute;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: radial-gradient(circle at 35% 30%, #78716c, #44403c 55%, #1c1917);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.mill-game-point--empty {
  background: radial-gradient(circle at 35% 30%, #57534e, #292524 60%, #0c0a09);
  opacity: 0.85;
}

.mill-game-point--you {
  background:
    radial-gradient(circle at 32% 28%, #fde68a 0%, #f59e0b 42%, #b45309 78%, #78350f 100%);
  box-shadow:
    0 3px 8px rgba(180, 83, 9, 0.55),
    inset 0 2px 3px rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}

.mill-game-point--you::after {
  content: '';
  position: absolute;
  inset: 22% 28% auto auto;
  width: 28%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.mill-game-point--ai {
  background:
    radial-gradient(circle at 32% 28%, #e2e8f0 0%, #94a3b8 40%, #475569 75%, #1e293b 100%);
  box-shadow:
    0 3px 8px rgba(51, 65, 85, 0.55),
    inset 0 2px 3px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.mill-game-point--ai::after {
  content: '';
  position: absolute;
  inset: 22% 28% auto auto;
  width: 28%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.mill-game-point--hint {
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.4);
  animation: mill-game-hint-ring 1.2s ease-in-out infinite;
}

.mill-game-point--target {
  box-shadow:
    0 0 0 3px rgba(52, 211, 153, 0.75),
    0 2px 8px rgba(16, 185, 129, 0.4);
  filter: brightness(1.15);
}

.mill-game-point--selected {
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow:
    0 0 0 3px #fbbf24,
    0 4px 14px rgba(251, 191, 36, 0.5);
  z-index: 2;
}

.mill-game-point--remove {
  box-shadow:
    0 0 0 3px #38bdf8,
    0 0 12px rgba(56, 189, 248, 0.55);
  animation: mill-game-remove-pulse 0.6s ease-in-out infinite alternate;
  z-index: 2;
}

.mill-game-point--pop {
  animation: mill-game-pop 0.35s ease;
}

.mill-game-point--shake {
  animation: mill-game-shake 0.3s ease;
}

.mill-game-point:disabled {
  cursor: default;
}

@keyframes mill-game-hint-ring {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

@keyframes mill-game-remove-pulse {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes mill-game-pop {
  0% { transform: translate(-50%, -50%) scale(0.7); }
  55% { transform: translate(-50%, -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes mill-game-shake {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% - 4px), -50%); }
  75% { transform: translate(calc(-50% + 4px), -50%); }
}

.mill-game-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.mill-game-flash--mill {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.35), transparent 65%);
  animation: mill-game-flash-fade 0.5s ease;
}

.mill-game-flash--win {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.45), transparent 70%);
  animation: mill-game-flash-fade 0.7s ease;
}

.mill-game-flash--lose {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.35), transparent 70%);
  animation: mill-game-flash-fade 0.6s ease;
}

@keyframes mill-game-flash-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.mill-game-particles,
.mill-game-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.mill-game-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: mill-game-particle-fly 0.65s ease-out forwards;
}

@keyframes mill-game-particle-fly {
  to {
    transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py)));
    opacity: 0;
  }
}

.mill-game-float {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 900;
  color: #fef3c7;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  animation: mill-game-float-up 0.9s ease-out forwards;
  white-space: nowrap;
}

.mill-game-float--mill {
  color: #fbbf24;
  font-size: 16px;
}

.mill-game-float--remove {
  color: #7dd3fc;
}

@keyframes mill-game-float-up {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
  to { opacity: 0; transform: translate(-50%, calc(-50% - 36px)) scale(1.1); }
}

.mill-game-hint {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #d6d3d1;
  text-align: center;
  opacity: 0.85;
}

.mill-game-hint--pulse {
  animation: mill-game-hint-banner 2.5s ease;
  color: #fde68a;
}

@keyframes mill-game-hint-banner {
  0%, 100% { opacity: 0.85; }
  30%, 70% { opacity: 1; transform: scale(1.04); }
}

@media (max-width: 480px) {
  .mill-game-point {
    width: 36px;
    height: 36px;
  }

  .mill-game-hud {
    font-size: 12px;
    gap: 6px 10px;
  }

  .mill-game-board-frame {
    border-radius: 14px;
  }
}

/* --- nim-game --- */
.nim-wrap {
  --nim-wood: #b45309;
  --nim-wood-dark: #78350f;
  --nim-cream: #fef3c7;
  --nim-ink: #431407;
  --nim-sky: #0f172a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 8px 6px 16px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(251, 191, 36, 0.18), transparent 55%),
    linear-gradient(165deg, #1c1917 0%, #292524 45%, #1e293b 100%);
  border-radius: 18px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nim-wrap--shake {
  animation: nim-shake 0.42s ease-out;
}

@keyframes nim-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.nim-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.nim-hud-item {
  font-size: 13px;
  font-weight: 600;
  color: #fde68a;
  background: rgba(0, 0, 0, 0.28);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.22);
}

.nim-hud-item strong {
  color: #fff7ed;
  font-weight: 800;
  margin-left: 4px;
}

.nim-hud-streak--hot {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.45), rgba(234, 179, 8, 0.35));
  border-color: rgba(251, 146, 60, 0.55);
  animation: nim-pulse 1.1s ease-in-out infinite;
}

@keyframes nim-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.nim-hud-rule {
  color: #fdba74;
  opacity: 0.9;
}

.nim-diff-row {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

.nim-diff-btn {
  flex: 1;
  max-width: 120px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  color: #e7e5e4;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.nim-diff-btn:active {
  transform: scale(0.96);
}

.nim-diff-btn--active {
  background: linear-gradient(180deg, #f59e0b, #b45309);
  color: #fffbeb;
  border-color: rgba(253, 230, 138, 0.5);
  box-shadow: 0 3px 0 #78350f, 0 6px 16px rgba(180, 83, 9, 0.35);
}

.nim-diff-btn--hard.nim-diff-btn--active {
  background: linear-gradient(180deg, #f87171, #b91c1c);
  box-shadow: 0 3px 0 #7f1d1d, 0 6px 16px rgba(185, 28, 28, 0.35);
}

.nim-status {
  margin: 0;
  min-height: 1.4em;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #fef3c7;
  transition: color 0.2s ease;
}

.nim-status--ai {
  color: #7dd3fc;
}

.nim-status--win {
  color: #86efac;
  animation: nim-pop 0.45s ease;
}

.nim-status--lose {
  color: #fca5a5;
}

@keyframes nim-pop {
  0% { transform: scale(0.85); opacity: 0.5; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.nim-board-wrap {
  position: relative;
  width: 100%;
  border-radius: 16px;
  padding: 14px 10px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0 2px,
      transparent 2px 18px
    ),
    linear-gradient(180deg, rgba(68, 64, 60, 0.55), rgba(28, 25, 23, 0.8));
  border: 1px solid rgba(214, 211, 209, 0.12);
  overflow: hidden;
}

.nim-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nim-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 8px;
  border-radius: 12px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.nim-row--active {
  background: rgba(251, 191, 36, 0.12);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.35);
}

.nim-row--empty {
  opacity: 0.35;
}

.nim-row-label {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #1c1917;
  background: linear-gradient(180deg, #fde68a, #d97706);
}

.nim-sticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  align-items: center;
}

.nim-row-empty-mark {
  color: #78716c;
  font-size: 18px;
  padding-left: 4px;
}

.nim-stick {
  position: relative;
  width: 18px;
  min-width: 44px;
  height: 52px;
  min-height: 48px;
  padding: 0 13px;
  box-sizing: content-box;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  background:
    linear-gradient(90deg, #92400e 0%, #d97706 35%, #fbbf24 50%, #d97706 65%, #78350f 100%);
  background-clip: content-box;
  box-shadow:
    0 4px 0 #451a03,
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset -2px 0 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
  touch-action: manipulation;
}

.nim-stick-gloss {
  position: absolute;
  left: 17px;
  top: 6px;
  width: 4px;
  height: 70%;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
  pointer-events: none;
}

.nim-stick:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.nim-stick:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #451a03;
}

.nim-stick--selected {
  transform: translateY(-6px) scale(1.06);
  filter: brightness(1.15) saturate(1.2);
  box-shadow:
    0 8px 0 #451a03,
    0 0 12px rgba(251, 191, 36, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.nim-stick--take {
  animation: nim-stick-fly 0.4s ease-in forwards;
  animation-delay: calc(var(--take-i, 0) * 35ms);
  pointer-events: none;
}

.nim-stick--ai-take {
  animation: nim-stick-fly-ai 0.4s ease-in forwards;
  animation-delay: calc(var(--take-i, 0) * 35ms);
  pointer-events: none;
}

@keyframes nim-stick-fly {
  0% { opacity: 1; transform: translateY(-6px) rotate(0deg); }
  100% { opacity: 0; transform: translate(18px, -48px) rotate(28deg) scale(0.7); }
}

@keyframes nim-stick-fly-ai {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translate(-14px, -40px) rotate(-22deg) scale(0.7); }
}

.nim-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.nim-flash--show {
  opacity: 1;
  animation: nim-flash-fade 0.42s ease-out forwards;
}

.nim-flash--win {
  background: radial-gradient(circle at 50% 40%, rgba(74, 222, 128, 0.45), transparent 65%);
}

.nim-flash--lose {
  background: radial-gradient(circle at 50% 40%, rgba(248, 113, 113, 0.4), transparent 65%);
}

@keyframes nim-flash-fade {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

.nim-trap-banner,
.nim-hard-badge {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  z-index: 3;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: 12px;
  text-align: center;
}

.nim-trap-banner {
  color: #fff7ed;
  font-size: 22px;
  background: linear-gradient(135deg, #ea580c, #b91c1c);
  box-shadow: 0 8px 28px rgba(185, 28, 28, 0.45);
}

.nim-trap-banner--show,
.nim-hard-badge--show {
  animation: nim-banner-in 0.85s ease forwards;
}

.nim-hard-badge {
  color: #1c1917;
  font-size: 16px;
  background: linear-gradient(135deg, #fde68a, #f59e0b 50%, #ef4444);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.7), 0 8px 24px rgba(0, 0, 0, 0.35);
}

@keyframes nim-banner-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.05); }
}

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

.nim-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3px 0 0 -3px;
  animation: nim-particle 0.5s ease-out forwards;
  box-shadow: 0 0 6px currentColor;
}

@keyframes nim-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

.nim-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}

.nim-take-btn,
.nim-clear-btn {
  flex: 1;
  min-height: 48px;
  font-weight: 800;
  border-radius: 12px;
  touch-action: manipulation;
}

.nim-take-btn:disabled,
.nim-clear-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nim-take-btn:not(:disabled) {
  background: linear-gradient(180deg, #fbbf24, #d97706);
  border: none;
  color: #1c1917;
  box-shadow: 0 4px 0 #92400e;
}

.nim-take-btn:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #92400e;
}

@media (max-width: 480px) {
  .nim-stick {
    width: 20px;
    min-width: 44px;
    height: 54px;
  }

  .nim-diff-btn {
    min-height: 46px;
    font-size: 13px;
  }

  .nim-take-btn,
  .nim-clear-btn {
    min-height: 52px;
  }
}

/* ===== mate-in-one ===== */
.mio-root {
  --mio-ink: #1c1917;
  --mio-cream: #f5f0e6;
  --mio-gold: #d4a017;
  --mio-board-light: #e8d5b5;
  --mio-board-dark: #b58863;
  --mio-accent: #0f766e;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 6px 16px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  touch-action: manipulation;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212, 160, 23, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(15, 118, 110, 0.12), transparent 50%),
    linear-gradient(165deg, #2a2520 0%, #1a1714 45%, #12100e 100%);
  border-radius: 18px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.mio-root--nudge {
  animation: mio-nudge 0.28s ease;
}

@keyframes mio-nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
}

.mio-root--gm {
  box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.55), 0 0 40px rgba(212, 160, 23, 0.25);
}

.mio-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
}

.mio-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: inherit;
  opacity: 0;
}

.mio-flash--mate {
  animation: mio-mate-flash 0.75s ease forwards;
  background: radial-gradient(circle at 50% 40%, rgba(250, 204, 21, 0.55), transparent 65%);
}

.mio-flash--gm {
  animation: mio-gm-flash 1.2s ease forwards;
  background: radial-gradient(circle at 50% 45%, rgba(253, 224, 71, 0.7), rgba(212, 160, 23, 0.2) 50%, transparent 70%);
}

@keyframes mio-mate-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes mio-gm-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

.mio-badge {
  pointer-events: none;
  position: absolute;
  top: 28%;
  left: 50%;
  z-index: 9;
  transform: translate(-50%, -50%) scale(0.6);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #1c1917;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
}

.mio-badge--show {
  animation: mio-badge-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mio-badge-pop {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.5); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(0.95); }
}

.mio-gm {
  pointer-events: none;
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%) scale(0.4);
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fef3c7;
  text-shadow:
    0 0 20px rgba(250, 204, 21, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.mio-gm--show {
  animation: mio-gm-pop 1.3s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes mio-gm-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-6deg); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

.mio-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
  z-index: 2;
}

.mio-pill {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #e7e5e4;
  background: rgba(28, 25, 23, 0.65);
  border: 1px solid rgba(231, 229, 228, 0.14);
  backdrop-filter: blur(6px);
}

.mio-pill--puzzle {
  color: #fde68a;
  border-color: rgba(212, 160, 23, 0.4);
}

.mio-pill--best {
  color: #a7f3d0;
}

.mio-pill--hint {
  color: #7dd3fc;
}

.mio-pill--combo {
  color: #fda4af;
}

.mio-pill--combo-hot {
  color: #fff;
  background: linear-gradient(135deg, #e11d48, #f59e0b);
  border-color: transparent;
  box-shadow: 0 0 14px rgba(225, 29, 72, 0.45);
}

.mio-pill--pop {
  animation: mio-pill-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mio-pill-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.mio-pill--time {
  color: #d6d3d1;
}

.mio-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fde68a;
  letter-spacing: 0.02em;
  text-align: center;
  min-height: 1.2em;
}

.mio-status {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #d6d3d1;
  text-align: center;
  min-height: 1.3em;
  transition: color 0.2s ease;
}

.mio-status--wrong {
  color: #fca5a5;
  animation: mio-status-shake 0.35s ease;
}

@keyframes mio-status-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.mio-frame {
  position: relative;
  padding: 10px 10px 4px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(68, 64, 60, 0.9), rgba(28, 25, 23, 0.95));
  border: 1px solid rgba(212, 160, 23, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.mio-frame--mate {
  border-color: rgba(250, 204, 21, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 28px rgba(250, 204, 21, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.35);
}

.mio-frame--shake {
  animation: mio-frame-shake 0.38s ease;
}

@keyframes mio-frame-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.mio-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(352px, 92vw);
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(28, 25, 23, 0.45);
}

.mio-files {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(352px, 92vw);
  margin-top: 2px;
}

.mio-file {
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(231, 229, 228, 0.45);
  text-transform: lowercase;
}

.mio-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s ease, transform 0.12s ease;
}

.mio-cell--light {
  background: linear-gradient(160deg, #f0d9b5 0%, #e8d5b5 100%);
}

.mio-cell--dark {
  background: linear-gradient(160deg, #c49a6c 0%, #b58863 100%);
}

.mio-cell:hover {
  filter: brightness(1.08);
}

.mio-cell:active {
  transform: scale(0.94);
}

.mio-cell--own .mio-piece--white {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.mio-cell--sel {
  box-shadow: inset 0 0 0 3px rgba(15, 118, 110, 0.85);
  z-index: 1;
}

.mio-cell--move::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.45);
  pointer-events: none;
}

.mio-cell--capture {
  box-shadow: inset 0 0 0 3px rgba(225, 29, 72, 0.55);
}

.mio-cell--capture::after {
  display: none;
}

.mio-cell--hint-from {
  animation: mio-hint-pulse 1s ease infinite;
  box-shadow: inset 0 0 0 3px rgba(250, 204, 21, 0.9);
}

.mio-cell--hint-to {
  animation: mio-hint-pulse 1s ease infinite;
  box-shadow: inset 0 0 0 3px rgba(56, 189, 248, 0.9);
}

@keyframes mio-hint-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

.mio-cell--pop {
  animation: mio-cell-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mio-cell-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.mio-piece {
  font-size: clamp(1.15rem, 5.2vw, 1.85rem);
  line-height: 1;
  pointer-events: none;
  transition: transform 0.2s ease;
  z-index: 1;
}

.mio-piece--white {
  color: #fffbeb;
  text-shadow:
    0 1px 0 #78716c,
    0 2px 4px rgba(0, 0, 0, 0.35);
}

.mio-piece--black {
  color: #1c1917;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.mio-piece--fall {
  animation: mio-king-fall 0.85s cubic-bezier(0.55, 0.05, 0.7, 0.4) forwards;
}

@keyframes mio-king-fall {
  0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
  60% { transform: translateY(8px) rotate(55deg) scale(1.05); opacity: 1; }
  100% { transform: translateY(22px) rotate(110deg) scale(0.7); opacity: 0.15; }
}

.mio-dot {
  display: none;
}

.mio-float {
  position: absolute;
  z-index: 9;
  transform: translate(-50%, 0);
  font-weight: 800;
  font-size: 1.05rem;
  color: #fde68a;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  animation: mio-float-up 0.75s ease forwards;
  pointer-events: none;
}

@keyframes mio-float-up {
  0% { opacity: 1; transform: translate(-50%, 0) scale(0.8); }
  100% { opacity: 0; transform: translate(-50%, -36px) scale(1.1); }
}

.mio-spark {
  position: absolute;
  z-index: 9;
  font-size: 0.85rem;
  color: #fbbf24;
  pointer-events: none;
  animation: mio-spark 0.65s ease forwards;
}

@keyframes mio-spark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); }
}

.mio-toolbar {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  z-index: 2;
}

.mio-hint-btn {
  min-height: 44px;
  min-width: 120px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, 0.45);
  background: linear-gradient(160deg, #0e7490, #155e75);
  color: #ecfeff;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(14, 116, 144, 0.35);
  transition: transform 0.12s ease, filter 0.15s ease, opacity 0.2s;
}

.mio-hint-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.mio-hint-btn:active:not(:disabled) {
  transform: translateY(2px);
}

.mio-hint-btn:disabled,
.mio-hint-btn--empty {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .mio-board,
  .mio-files {
    width: min(42px * 8, 96vw);
  }

  .mio-cell {
    min-height: 42px;
  }

  .mio-pill {
    font-size: 0.72rem;
    padding: 4px 8px;
  }

  .mio-hint-btn {
    min-height: 48px;
    width: min(240px, 90vw);
  }
}

/* --- old-maid --- */
.old-maid-wrap {
  --om-felt: #14532d;
  --om-felt-deep: #052e16;
  --om-gold: #fbbf24;
  --om-cream: #fef3c7;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 8px 6px 12px;
  touch-action: manipulation;
}

.old-maid-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  width: 100%;
  font-size: 13px;
  color: #94a3b8;
}

.old-maid-hud strong {
  color: #f8fafc;
  font-size: 16px;
  margin-left: 4px;
}

.old-maid-hud-wins strong { color: var(--om-gold); }

.old-maid-table {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 12px 18px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(74, 222, 128, 0.18), transparent 55%),
    linear-gradient(160deg, #166534 0%, var(--om-felt) 45%, var(--om-felt-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(74, 222, 128, 0.22);
  overflow: hidden;
}

.old-maid-table::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 12px 12px;
  pointer-events: none;
  opacity: 0.5;
}

.old-maid-seat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 10px;
  border-radius: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.old-maid-seat--active {
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35);
}

.old-maid-seat--you {
  order: 3;
  margin-top: 4px;
}

.old-maid-seat--ai:nth-of-type(1) { order: 1; }
.old-maid-seat--ai:nth-of-type(2) { order: 2; }

.old-maid-seat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #ecfdf5;
}

.old-maid-avatar {
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  transition: transform 0.25s ease;
}

.old-maid-seat--nervous .old-maid-avatar {
  animation: old-maid-sweat 1.2s ease-in-out infinite;
}

@keyframes old-maid-sweat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-2px) rotate(2deg); }
}

.old-maid-name { font-weight: 700; letter-spacing: 0.02em; }
.old-maid-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.35);
  font-size: 11px;
  color: #bbf7d0;
}

.old-maid-fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 88px;
  width: 100%;
  padding: 4px 8px 8px;
}

.old-maid-card {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 76px;
  margin: 0 -14px;
  padding: 0;
  border: none;
  border-radius: 8px;
  transform: rotate(var(--fan-rot, 0deg));
  transform-origin: 50% 120%;
  z-index: var(--fan-z, 0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.old-maid-card--up {
  background: linear-gradient(165deg, #fffef8 0%, #f1e9d2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.old-maid-card--joker {
  background: linear-gradient(160deg, #f5d0fe 0%, #c084fc 55%, #7c3aed 100%);
}

.old-maid-card-rank {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.old-maid-card-suit { font-size: 20px; line-height: 1; }
.old-maid-card-joker { font-size: 26px; line-height: 1; }
.old-maid-card-jk {
  font-size: 9px;
  font-weight: 700;
  color: #faf5ff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.old-maid-card--back {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 40%),
    linear-gradient(160deg, #1e3a8a 0%, #1e40af 50%, #172554 100%);
  border: 2px solid rgba(191, 219, 254, 0.35);
}

.old-maid-card-pattern {
  display: block;
  width: 70%;
  height: 70%;
  margin: 15% auto;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(147, 197, 253, 0.25) 0 2px,
      transparent 2px 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(96, 165, 250, 0.2) 0 2px,
      transparent 2px 6px
    );
  box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.25);
}

.old-maid-card--pick {
  cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.55));
}

.old-maid-card--pick:hover,
.old-maid-card--pick:focus-visible {
  transform: rotate(var(--fan-rot, 0deg)) translateY(-10px) scale(1.06);
  z-index: 40;
  outline: none;
}

.old-maid-card--pick:active {
  transform: rotate(var(--fan-rot, 0deg)) translateY(-4px) scale(1.02);
}

.old-maid-card:disabled {
  cursor: default;
}

.old-maid-seat--pair-pop {
  animation: old-maid-pop 0.42s ease;
}

@keyframes old-maid-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.old-maid-seat--shuffle .old-maid-fan {
  animation: old-maid-shuffle 0.45s ease;
}

@keyframes old-maid-shuffle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.old-maid-seat--drawn .old-maid-fan {
  animation: old-maid-draw 0.35s ease;
}

@keyframes old-maid-draw {
  0% { transform: scale(1); }
  50% { transform: scale(0.96); opacity: 0.85; }
  100% { transform: scale(1); }
}

.old-maid-seat--got-joker {
  animation: old-maid-joker-hit 0.55s ease;
}

@keyframes old-maid-joker-hit {
  0%, 100% { filter: none; }
  30% { filter: hue-rotate(-20deg) brightness(1.15); }
  50% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

.old-maid-seat--escaped {
  opacity: 0.55;
}

.old-maid-seat--escaped .old-maid-fan { min-height: 24px; }

.old-maid-seat--branded {
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.65), 0 0 24px rgba(168, 85, 247, 0.45);
  animation: old-maid-brand 0.8s ease;
}

@keyframes old-maid-brand {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.old-maid-hint {
  margin: 0;
  min-height: 1.35em;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #86efac;
}

.old-maid-fx {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  z-index: 20;
}

.old-maid-float {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  color: #0f172a;
  background: #fef08a;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  animation: old-maid-float-up 0.85s ease-out forwards;
}

.old-maid-float--pair { background: #86efac; }
.old-maid-float--phew { background: #7dd3fc; }
.old-maid-float--joker { background: #e9d5ff; color: #581c87; }
.old-maid-float--escape { background: #fde68a; }
.old-maid-float--win { background: linear-gradient(135deg, #fef08a, #4ade80); font-size: 18px; }
.old-maid-float--lose { background: #c4b5fd; color: #4c1d95; }

@keyframes old-maid-float-up {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.85); }
  20% { opacity: 1; transform: translate(-50%, -6px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}

.old-maid-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fde047;
  animation: old-maid-particle 0.65s ease-out forwards;
}

.old-maid-particle--pair { background: #4ade80; }
.old-maid-particle--escape { background: #fbbf24; }
.old-maid-particle--win { background: #f472b6; }
.old-maid-particle--lose { background: #a78bfa; }

@keyframes old-maid-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.old-maid-wrap--win .old-maid-table {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 2px rgba(74, 222, 128, 0.45),
    0 12px 36px rgba(74, 222, 128, 0.28);
}

.old-maid-wrap--lose .old-maid-table {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 2px rgba(168, 85, 247, 0.5),
    0 12px 36px rgba(124, 58, 237, 0.3);
}

@media (max-width: 480px) {
  .old-maid-wrap { max-width: 100%; padding: 4px 2px 10px; }
  .old-maid-card { width: 48px; height: 68px; margin: 0 -12px; }
  .old-maid-card--pick { min-width: 48px; min-height: 68px; }
  .old-maid-fan { min-height: 78px; }
  .old-maid-table { padding: 12px 8px 14px; border-radius: 14px; }
}
/* --- auction-bid --- */
.auction-bid-wrap {
  --ab-gold: #fbbf24;
  --ab-ink: #1c1917;
  --ab-panel: rgba(28, 25, 23, 0.72);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 10px 8px 16px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 18px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(251, 191, 36, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(180, 83, 9, 0.25), transparent 50%),
    linear-gradient(165deg, #292524 0%, #1c1917 50%, #0c0a09 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.auction-bid-wrap--win {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 2px rgba(74, 222, 128, 0.4),
    0 12px 36px rgba(74, 222, 128, 0.22);
}

.auction-bid-wrap--close {
  animation: auction-bid-glow 0.9s ease-out;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 2px rgba(251, 191, 36, 0.65),
    0 0 40px rgba(251, 191, 36, 0.35);
}

.auction-bid-wrap--pass {
  animation: auction-bid-sigh 0.55s ease-out;
}

@keyframes auction-bid-glow {
  0% { filter: brightness(1.35); transform: scale(1.01); }
  100% { filter: brightness(1); transform: scale(1); }
}

@keyframes auction-bid-sigh {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(3px); }
  70% { transform: translateY(-1px); }
}

.auction-bid-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: 100%;
}

.auction-bid-pill {
  font-size: 12px;
  font-weight: 600;
  color: #fde68a;
  background: var(--ab-panel);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.22);
}

.auction-bid-pill strong {
  color: #fff7ed;
  font-weight: 800;
  margin-left: 3px;
}

.auction-bid-pill--best strong { color: #fbbf24; }

.auction-bid-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.auction-bid-treasure {
  width: 100%;
  max-width: 280px;
  text-align: center;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(120, 53, 15, 0.55), rgba(28, 25, 23, 0.9)),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(251, 191, 36, 0.04) 8px,
      rgba(251, 191, 36, 0.04) 16px
    );
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.35);
}

.auction-bid-treasure-emoji {
  font-size: 42px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  animation: auction-bid-float 2.8s ease-in-out infinite;
}

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

.auction-bid-treasure-label {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fcd34d;
  opacity: 0.85;
}

.auction-bid-treasure-value {
  margin-top: 2px;
  font-size: 36px;
  font-weight: 900;
  color: #fffbeb;
  text-shadow: 0 2px 0 rgba(120, 53, 15, 0.6), 0 0 20px rgba(251, 191, 36, 0.35);
}

.auction-bid-treasure-value--pop {
  animation: auction-bid-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes auction-bid-pop {
  0% { transform: scale(0.7); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

.auction-bid-status {
  margin: 0;
  min-height: 2.4em;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #e7e5e4;
  line-height: 1.35;
  padding: 0 6px;
}

.auction-bid-players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.auction-bid-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.auction-bid-player--you {
  border-color: rgba(96, 165, 250, 0.45);
  background: linear-gradient(160deg, rgba(30, 64, 175, 0.35), rgba(0, 0, 0, 0.3));
}

.auction-bid-player--win {
  border-color: rgba(74, 222, 128, 0.65);
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.3);
  transform: scale(1.04);
  animation: auction-bid-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.auction-bid-player--flip .auction-bid-player-bid {
  animation: auction-bid-flip 0.35s ease;
}

@keyframes auction-bid-flip {
  0% { transform: rotateY(90deg) scale(0.8); opacity: 0; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}

.auction-bid-player-emoji { font-size: 22px; line-height: 1; }
.auction-bid-player-name {
  font-size: 12px;
  font-weight: 700;
  color: #fafaf9;
}
.auction-bid-player-meta {
  font-size: 10px;
  color: #a8a29e;
}
.auction-bid-player-meta b {
  color: #fde68a;
  font-weight: 800;
  margin: 0 1px;
}

.auction-bid-player-bid {
  margin-top: 4px;
  min-width: 48px;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
  color: #78716c;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

.auction-bid-player-bid.is-open {
  color: #fffbeb;
  background: linear-gradient(145deg, #b45309, #78350f);
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.4);
}

.auction-bid-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(251, 191, 36, 0.18);
  transition: opacity 0.25s ease;
}

.auction-bid-controls.is-locked {
  opacity: 0.55;
  pointer-events: none;
}

.auction-bid-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #fde68a;
}

.auction-bid-bid-num {
  font-size: 22px;
  font-weight: 900;
  color: #fffbeb;
}

.auction-bid-slider {
  width: 100%;
  height: 36px;
  margin: 0;
  accent-color: #f59e0b;
  cursor: pointer;
  touch-action: none;
}

.auction-bid-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.auction-bid-qbtn {
  min-height: 40px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(68, 64, 60, 0.9), rgba(28, 25, 23, 0.95));
  color: #fef3c7;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.auction-bid-qbtn:hover {
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.85), rgba(68, 64, 60, 0.95));
}

.auction-bid-qbtn:active {
  transform: scale(0.96);
}

.auction-bid-submit {
  min-height: 48px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  color: #1c1917;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  box-shadow: 0 4px 0 #92400e, 0 8px 20px rgba(217, 119, 6, 0.35);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.auction-bid-submit:hover:not(:disabled) {
  filter: brightness(1.06);
}

.auction-bid-submit:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #92400e, 0 4px 12px rgba(217, 119, 6, 0.3);
}

.auction-bid-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.auction-bid-submit.is-pulse {
  animation: auction-bid-pop 0.25s ease;
}

.auction-bid-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.auction-bid-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: auction-bid-particle 0.65s ease-out forwards;
}

.auction-bid-particle--win { background: #4ade80; }
.auction-bid-particle--gold {
  background: #fbbf24;
  box-shadow: 0 0 6px #f59e0b;
  width: 10px;
  height: 10px;
}

@keyframes auction-bid-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.auction-bid-banner {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 6;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  animation: auction-bid-banner 1.15s ease-out forwards;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.auction-bid-banner--win {
  color: #14532d;
  background: linear-gradient(135deg, #86efac, #4ade80);
}

.auction-bid-banner--close {
  color: #78350f;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.auction-bid-banner--pass {
  color: #e0e7ff;
  background: linear-gradient(135deg, #6366f1, #4338ca);
}

@keyframes auction-bid-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.95); }
}

.auction-bid-podium {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  animation: auction-bid-pop 0.5s ease;
}

.auction-bid-podium-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 700;
  color: #fafaf9;
}

.auction-bid-podium-row strong { color: #fbbf24; }
.auction-bid-podium-row--1 {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.35), rgba(0, 0, 0, 0.3));
  border-color: rgba(251, 191, 36, 0.45);
}
.auction-bid-podium-row.is-you {
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.55);
}

@media (max-width: 480px) {
  .auction-bid-wrap { padding: 8px 4px 12px; border-radius: 14px; }
  .auction-bid-treasure-emoji { font-size: 36px; }
  .auction-bid-treasure-value { font-size: 30px; }
  .auction-bid-qbtn { min-height: 44px; font-size: 11px; }
  .auction-bid-submit { min-height: 52px; }
  .auction-bid-player { padding: 8px 6px 10px; }
}

/* --- treasure-dig --- */
.treasure-dig-wrap {
  --td-soil: #5c4030;
  --td-soil-deep: #3d2a1f;
  --td-gold: #fbbf24;
  --td-vault: #0d9488;
  --td-danger: #dc2626;
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 8px 10px 16px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

.treasure-dig-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.treasure-dig-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 12px;
  background: linear-gradient(160deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid rgba(180, 83, 9, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(92, 64, 48, 0.12);
}

.treasure-dig-pill em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #92400e;
  text-transform: uppercase;
}

.treasure-dig-pill strong {
  font-size: 16px;
  font-weight: 800;
  color: #451a03;
  font-variant-numeric: tabular-nums;
}

.treasure-dig-pill--vault {
  background: linear-gradient(160deg, #ccfbf1 0%, #99f6e4 100%);
  border-color: rgba(13, 148, 136, 0.28);
}
.treasure-dig-pill--vault em { color: #0f766e; }
.treasure-dig-pill--vault strong { color: #134e4a; }

.treasure-dig-pill--best {
  background: linear-gradient(160deg, #fef9c3 0%, #fde68a 100%);
}

.treasure-dig-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #78716c;
}

.treasure-dig-density {
  color: #b45309;
}
.treasure-dig-wrap--danger .treasure-dig-density {
  color: var(--td-danger);
  animation: treasure-dig-pulse 1.1s ease-in-out infinite;
}

.treasure-dig-hint {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #57534e;
  min-height: 36px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 247, 237, 0.85);
  border: 1px dashed rgba(180, 83, 9, 0.25);
}

.treasure-dig-board-shell {
  position: relative;
  margin: 0 auto 12px;
  padding: 10px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(251, 191, 36, 0.12), transparent 50%),
    linear-gradient(165deg, #7c5a3e 0%, var(--td-soil) 40%, var(--td-soil-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -8px 20px rgba(0, 0, 0, 0.25),
    0 10px 28px rgba(61, 42, 31, 0.35);
}

.treasure-dig-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  touch-action: manipulation;
}

.treasure-dig-cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 48px;
  border: none;
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(145deg, #a67c52 0%, #8b5e3c 55%, #6b4423 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 6px rgba(0, 0, 0, 0.28),
    0 3px 0 #4a2f1a;
  transition: transform 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.treasure-dig-cell:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.treasure-dig-cell:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    0 1px 0 #4a2f1a;
}

.treasure-dig-dirt {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), transparent 40%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(0, 0, 0, 0.04) 4px,
      rgba(0, 0, 0, 0.04) 5px
    );
  pointer-events: none;
}

.treasure-dig-face {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(16px, 5.5vw, 22px);
  font-weight: 800;
  color: #fef3c7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.treasure-dig-cell--open {
  cursor: default;
  transform: none;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}

.treasure-dig-cell--open .treasure-dig-dirt {
  opacity: 0.15;
}

.treasure-dig-cell--treasure {
  background: linear-gradient(145deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%);
  animation: treasure-dig-sparkle 0.55s ease;
}

.treasure-dig-cell--empty {
  background: linear-gradient(145deg, #78716c 0%, #57534e 100%);
}

.treasure-dig-cell--bomb {
  background: linear-gradient(145deg, #f87171 0%, #b91c1c 100%);
  animation: treasure-dig-bomb-flash 0.45s ease;
}

.treasure-dig-cell--h1 .treasure-dig-face { color: #93c5fd; }
.treasure-dig-cell--h2 .treasure-dig-face { color: #86efac; }
.treasure-dig-cell--h3 .treasure-dig-face { color: #fde047; }
.treasure-dig-cell--h4 .treasure-dig-face { color: #fdba74; }
.treasure-dig-cell--h5 .treasure-dig-face { color: #fca5a5; }

.treasure-dig-cell--tense {
  box-shadow:
    inset 0 0 0 2px rgba(248, 113, 113, 0.65),
    inset 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: treasure-dig-tense 0.9s ease-in-out infinite;
}

.treasure-dig-cell--pop {
  animation: treasure-dig-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.treasure-dig-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.treasure-dig-btn {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.treasure-dig-btn--escape {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 45%, #d97706 100%);
  color: #451a03;
  box-shadow: 0 4px 0 #92400e, 0 8px 18px rgba(217, 119, 6, 0.35);
}

.treasure-dig-btn--escape:hover:not(:disabled) {
  filter: brightness(1.05);
}

.treasure-dig-btn--escape:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #92400e, 0 4px 10px rgba(217, 119, 6, 0.3);
}

.treasure-dig-btn--escape:disabled,
.treasure-dig-btn--home:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

.treasure-dig-btn--home {
  background: linear-gradient(135deg, #5eead4 0%, #14b8a6 100%);
  color: #134e4a;
  box-shadow: 0 3px 0 #0f766e;
}

.treasure-dig-banner {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 5;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: rgba(28, 25, 23, 0.88);
  pointer-events: none;
  animation: treasure-dig-banner-in 0.35s ease forwards;
  white-space: nowrap;
}

.treasure-dig-banner--combo {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
}
.treasure-dig-banner--warn {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}
.treasure-dig-banner--vault,
.treasure-dig-banner--home {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
}
.treasure-dig-banner--floor,
.treasure-dig-banner--clear {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.treasure-dig-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 18px;
}

.treasure-dig-float {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 900;
  color: #fffbeb;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  animation: treasure-dig-float-up 0.85s ease-out forwards;
  pointer-events: none;
}

.treasure-dig-float--gold { color: #fef08a; }
.treasure-dig-float--bomb { color: #fecaca; font-size: 20px; }

.treasure-dig-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fbbf24;
  animation: treasure-dig-particle 0.65s ease-out forwards;
}

.treasure-dig-particle--gold { background: #facc15; box-shadow: 0 0 6px #fbbf24; }
.treasure-dig-particle--dirt { background: #a8a29e; width: 6px; height: 6px; }
.treasure-dig-particle--bomb { background: #f87171; box-shadow: 0 0 8px #ef4444; }

.treasure-dig-wrap--enter .treasure-dig-board-shell {
  animation: treasure-dig-enter 0.45s ease;
}

.treasure-dig-wrap--vault .treasure-dig-board-shell {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 3px rgba(20, 184, 166, 0.45),
    0 12px 32px rgba(13, 148, 136, 0.4);
}

.treasure-dig-wrap--hot .treasure-dig-pill--floor-gold {
  animation: treasure-dig-pulse 0.8s ease-in-out infinite;
}

.treasure-dig-wrap--shake-soft {
  animation: treasure-dig-shake-soft 0.3s ease;
}

.treasure-dig-wrap--boom .treasure-dig-board-shell {
  animation: treasure-dig-boom 0.5s ease;
}

.treasure-dig-wrap--win .treasure-dig-board-shell {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 0 3px rgba(251, 191, 36, 0.55),
    0 14px 36px rgba(245, 158, 11, 0.4);
}

.treasure-dig-wrap--lose .treasure-dig-board-shell {
  filter: saturate(0.7) brightness(0.9);
}

@keyframes treasure-dig-pop {
  0% { transform: scale(0.82); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes treasure-dig-sparkle {
  0% { filter: brightness(1.4); }
  100% { filter: brightness(1); }
}

@keyframes treasure-dig-bomb-flash {
  0%, 40% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}

@keyframes treasure-dig-tense {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

@keyframes treasure-dig-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes treasure-dig-banner-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes treasure-dig-float-up {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1); }
}

@keyframes treasure-dig-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

@keyframes treasure-dig-enter {
  0% { transform: translateY(12px); opacity: 0.6; }
  100% { transform: none; opacity: 1; }
}

@keyframes treasure-dig-shake-soft {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes treasure-dig-boom {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 2px) rotate(-1deg); }
  40% { transform: translate(7px, -2px) rotate(1deg); }
  60% { transform: translate(-4px, 1px); }
  80% { transform: translate(3px, -1px); }
}

@media (max-width: 480px) {
  .treasure-dig-wrap { padding: 4px 4px 12px; max-width: 100%; }
  .treasure-dig-hud { gap: 4px; }
  .treasure-dig-pill { padding: 5px 2px; border-radius: 10px; }
  .treasure-dig-pill em { font-size: 9px; }
  .treasure-dig-pill strong { font-size: 14px; }
  .treasure-dig-cell { min-height: 48px; border-radius: 10px; }
  .treasure-dig-board { gap: 5px; }
  .treasure-dig-board-shell { padding: 8px; border-radius: 14px; }
  .treasure-dig-btn { min-height: 48px; font-size: 14px; }
}

/* --- liar-dice --- */
.liar-dice-wrap {
  --ld-felt: #14532d;
  --ld-felt-deep: #052e16;
  --ld-gold: #fbbf24;
  --ld-cream: #fef3c7;
  --ld-ink: #0f172a;
  --ld-accent: #ea580c;
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 6px 8px 14px;
  color: var(--ld-cream);
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  user-select: none;
  touch-action: manipulation;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(251, 191, 36, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(234, 88, 12, 0.15), transparent 45%),
    linear-gradient(165deg, #166534 0%, var(--ld-felt) 45%, var(--ld-felt-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 28px rgba(0,0,0,0.25);
}
.liar-dice-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.liar-dice-hud strong {
  color: var(--ld-gold);
  font-size: 1.05em;
  margin-left: 4px;
}
.liar-dice-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 8px 6px 4px;
}
.liar-dice-seat {
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(0,0,0,0.18));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 10px 12px;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s;
}
.liar-dice-seat.is-turn {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.25), 0 8px 20px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}
.liar-dice-seat.is-bidder {
  background: linear-gradient(180deg, rgba(251,191,36,0.16), rgba(0,0,0,0.2));
}
.liar-dice-seat.is-out {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.liar-dice-seat.is-loser {
  animation: liar-dice-hit 0.45s ease;
  border-color: #f87171;
}
.liar-dice-seat--hit {
  animation: liar-dice-hit 0.42s ease;
}
.liar-dice-seat--smirk {
  animation: liar-dice-smirk 0.5s ease;
}
@keyframes liar-dice-hit {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}
@keyframes liar-dice-smirk {
  0% { transform: scale(1); }
  40% { transform: scale(1.04) rotate(-1deg); }
  100% { transform: scale(1); }
}
.liar-dice-seat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 700;
}
.liar-dice-avatar { font-size: 1.35rem; }
.liar-dice-name { flex: 1; }
.liar-dice-count {
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  color: var(--ld-gold);
}
.liar-dice-cup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  align-items: center;
}
.liar-dice-out {
  font-size: 0.85rem;
  opacity: 0.7;
  letter-spacing: 0.08em;
}
.liar-dice-die {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: linear-gradient(145deg, #fff7ed, #fdba74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 4px rgba(0,0,0,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: liar-dice-pop 0.35s ease;
}
.liar-dice-die--hidden {
  background: linear-gradient(145deg, #9a3412, #7c2d12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 5px rgba(0,0,0,0.35);
  position: relative;
}
.liar-dice-die--hidden::after {
  content: "?";
  color: rgba(254, 243, 199, 0.55);
  font-weight: 800;
  font-size: 1rem;
}
@keyframes liar-dice-pop {
  0% { transform: scale(0.6) rotate(-8deg); opacity: 0.4; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.liar-dice-wrap--rolling .liar-dice-die {
  animation: liar-dice-shake 0.55s ease;
}
@keyframes liar-dice-shake {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-4px) rotate(8deg); }
  60% { transform: translateY(2px) rotate(-6deg); }
}
.liar-dice-die-face {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 28px;
  height: 28px;
  gap: 1px;
}
.liar-dice-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: auto;
  background: transparent;
}
.liar-dice-pip.on {
  background: radial-gradient(circle at 35% 30%, #44403c, #1c1917);
  box-shadow: 0 0.5px 1px rgba(0,0,0,0.35);
}
.liar-dice-history {
  min-height: 52px;
  margin: 6px 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.22);
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(254, 243, 199, 0.85);
}
.liar-dice-hist-line + .liar-dice-hist-line { margin-top: 2px; }
.liar-dice-panel {
  margin: 8px 4px 4px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.liar-dice-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35);
}
.liar-dice-bid-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}
.liar-dice-qty-val {
  min-width: 36px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ld-gold);
}
.liar-dice-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: 100%;
}
.liar-dice-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 8px 14px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #f59e0b, #c2410c);
  box-shadow: 0 3px 0 #7c2d12, 0 4px 10px rgba(0,0,0,0.25);
  transition: transform 0.12s, filter 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.liar-dice-btn:hover:not(:disabled) { filter: brightness(1.08); }
.liar-dice-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #7c2d12;
}
.liar-dice-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.liar-dice-face-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: linear-gradient(145deg, #fff7ed, #fdba74);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.liar-dice-face-btn.is-active {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.45);
  transform: scale(1.06);
}
.liar-dice-face-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.liar-dice-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.liar-dice-btn--bid { flex: 1; max-width: 160px; }
.liar-dice-btn--call {
  flex: 1;
  max-width: 160px;
  background: linear-gradient(180deg, #f87171, #b91c1c);
  box-shadow: 0 3px 0 #7f1d1d, 0 4px 10px rgba(0,0,0,0.25);
}
.liar-dice-hint {
  text-align: center;
  margin: 8px 6px 0;
  font-size: 0.88rem;
  color: rgba(254, 243, 199, 0.9);
  min-height: 1.4em;
}
.liar-dice-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 5;
}
.liar-dice-float {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  animation: liar-dice-float 0.95s ease forwards;
  white-space: nowrap;
}
.liar-dice-float--bid { color: var(--ld-gold); }
.liar-dice-float--call { color: #fecaca; font-size: 1.55rem; }
.liar-dice-float--smirk { color: #fda4af; font-size: 1.4rem; }
.liar-dice-float--win { color: #86efac; font-size: 1.6rem; }
.liar-dice-float--lose { color: #fca5a5; }
.liar-dice-float--roll { color: #fde68a; }
@keyframes liar-dice-float {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.7); }
  20% { opacity: 1; transform: translate(-50%, -55%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}
.liar-dice-particle {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: liar-dice-particle 0.7s ease forwards;
}
.liar-dice-particle--win { background: #fbbf24; }
.liar-dice-particle--lose { background: #f87171; }
.liar-dice-particle--truth { background: #4ade80; }
.liar-dice-particle--lie { background: #fb7185; }
@keyframes liar-dice-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}
.liar-dice-reveal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  border-radius: 18px;
  z-index: 6;
  padding: 16px;
}
.liar-dice-reveal.is-show { display: flex; }
.liar-dice-drum {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ld-gold);
  animation: liar-dice-pulse 0.35s ease infinite alternate;
}
@keyframes liar-dice-pulse {
  from { transform: scale(1); opacity: 0.85; }
  to { transform: scale(1.08); opacity: 1; }
}
.liar-dice-reveal-card {
  max-width: 320px;
  width: 100%;
  padding: 18px 16px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 2px solid rgba(251, 191, 36, 0.45);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  animation: liar-dice-pop 0.35s ease;
}
.liar-dice-reveal-card.is-true { border-color: #4ade80; }
.liar-dice-reveal-card.is-false { border-color: #fb7185; }
.liar-dice-reveal-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #fff;
}
.liar-dice-reveal-detail {
  font-size: 0.88rem;
  color: rgba(254,243,199,0.85);
  margin-bottom: 10px;
}
.liar-dice-reveal-loser {
  font-weight: 700;
  color: var(--ld-gold);
}
.liar-dice-wrap--shake {
  animation: liar-dice-hit 0.32s ease;
}
.liar-dice-wrap--win {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 2px rgba(74,222,128,0.45), 0 12px 36px rgba(74,222,128,0.28);
}
.liar-dice-wrap--lose {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 2px rgba(248,113,113,0.45), 0 12px 36px rgba(185,28,28,0.28);
}
.liar-dice-wrap--fanfare .liar-dice-table {
  animation: liar-dice-pulse 0.5s ease 3;
}
@media (max-width: 480px) {
  .liar-dice-wrap { max-width: 100%; padding: 4px 2px 10px; }
  .liar-dice-die { width: 36px; height: 36px; }
  .liar-dice-die-face { width: 24px; height: 24px; }
  .liar-dice-pip { width: 5px; height: 5px; }
  .liar-dice-face-btn, .liar-dice-btn { min-width: 44px; min-height: 44px; }
}

/* --- hex-connect --- */
.hex-connect-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 4px 0 12px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.hex-connect-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
  font-size: 13px;
  color: #94a3b8;
}

.hex-connect-hud strong {
  font-size: 15px;
  font-weight: 800;
}

.hex-connect-you { color: #f87171; }
.hex-connect-ai { color: #38bdf8; }
.hex-connect-hud-wins strong { color: #fbbf24; }
.hex-connect-hud-moves strong { color: #e2e8f0; }

.hex-connect-status {
  min-height: 1.35em;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0;
}

.hex-connect-status--ai { color: #7dd3fc; }
.hex-connect-status--nice { color: #fde047; }
.hex-connect-status--win { color: #fbbf24; font-size: 17px; }
.hex-connect-status--lose { color: #f87171; }

.hex-connect-hint {
  text-align: center;
  font-size: 12px;
  color: #64748b;
  max-width: 92%;
}

.hex-connect-hint--pulse {
  animation: hex-connect-hint-pulse 1.2s ease-in-out 2;
}

@keyframes hex-connect-hint-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); color: #94a3b8; }
}

.hex-connect-sizes {
  display: flex;
  gap: 8px;
  margin-bottom: 2px;
}

.hex-connect-size-btn {
  min-height: 40px;
  min-width: 72px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(180deg, #334155, #1e293b);
  color: #cbd5e1;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.hex-connect-size-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.55);
}

.hex-connect-size-btn:active { transform: scale(0.97); }

.hex-connect-size-btn--on {
  border-color: rgba(14, 165, 233, 0.7);
  background: linear-gradient(180deg, #0ea5e9, #0369a1);
  color: #f0f9ff;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

.hex-connect-frame {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(56, 189, 248, 0.14), transparent 50%),
    radial-gradient(ellipse at 80% 85%, rgba(239, 68, 68, 0.12), transparent 45%),
    linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #0c4a6e 100%);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(100, 116, 139, 0.35);
  padding: 6px;
}

.hex-connect-frame--win {
  box-shadow: 0 0 0 2px #fbbf24, 0 10px 36px rgba(251, 191, 36, 0.35);
}

.hex-connect-frame--lose {
  box-shadow: 0 0 0 2px #38bdf8, 0 10px 36px rgba(56, 189, 248, 0.3);
}

.hex-connect-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  touch-action: none;
  cursor: pointer;
}

.hex-connect-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 4;
}

.hex-connect-flash--win {
  animation: hex-connect-flash-win 0.7s ease-out;
  background: radial-gradient(circle at 50% 45%, rgba(251, 191, 36, 0.45), transparent 60%);
}

.hex-connect-flash--lose {
  animation: hex-connect-flash-lose 0.65s ease-out;
  background: radial-gradient(circle at 50% 45%, rgba(56, 189, 248, 0.4), transparent 60%);
}

@keyframes hex-connect-flash-win {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hex-connect-flash-lose {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

.hex-connect-fx {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 38%;
  width: 0;
  height: 0;
  z-index: 6;
}

.hex-connect-float {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  color: #0f172a;
  background: #fde047;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  animation: hex-connect-float-up 0.9s ease-out forwards;
}

.hex-connect-float--nice { background: linear-gradient(135deg, #fde047, #f97316); }
.hex-connect-float--win { background: linear-gradient(135deg, #fef08a, #4ade80); font-size: 18px; }
.hex-connect-float--lose { background: #7dd3fc; color: #0c4a6e; }

@keyframes hex-connect-float-up {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.85); }
  20% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}

.hex-connect-badge {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 7;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  animation: hex-connect-badge-pop 0.45s ease;
}

.hex-connect-badge--win {
  color: #78350f;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45);
}

.hex-connect-badge--lose {
  color: #0c4a6e;
  background: linear-gradient(180deg, #bae6fd, #38bdf8);
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.4);
}

@keyframes hex-connect-badge-pop {
  from { transform: translateX(-50%) scale(0.7); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

@media (max-width: 480px) {
  .hex-connect-wrap { max-width: 100%; padding: 2px 0 10px; }
  .hex-connect-size-btn { min-height: 44px; min-width: 80px; }
  .hex-connect-status { font-size: 14px; }
  .hex-connect-frame { border-radius: 14px; padding: 4px; }
}

/* ===== mini-escape ===== */
.mini-escape-wrap {
  --me-ink: #1e293b;
  --me-accent: #d97706;
  --me-good: #059669;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 6px 12px;
  color: var(--me-ink);
  touch-action: manipulation;
  user-select: none;
}
.mini-escape-wrap--shake { animation: me-shake 0.38s ease-out; }
.mini-escape-wrap--win { animation: me-win-glow 1.2s ease-out; }
@keyframes me-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes me-win-glow {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.25) saturate(1.2); }
  100% { filter: brightness(1); }
}

.mini-escape-hud {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,251,235,0.95), rgba(254,243,199,0.75));
  border: 1px solid rgba(217,119,6,0.28);
  box-shadow: 0 8px 24px rgba(120,53,15,0.08);
  font-size: 0.86rem;
  font-weight: 650;
}
.mini-escape-room-label { grid-column: 1 / -1; color: #92400e; font-size: 0.95rem; }
.mini-escape-timer {
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  color: #b45309;
  letter-spacing: 0.04em;
}
.mini-escape-progress { color: #0f766e; }
.mini-escape-best { color: #64748b; font-weight: 600; }

.mini-escape-stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 300px;
  box-shadow:
    0 12px 36px rgba(15,23,42,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.25);
}
.mini-escape-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 280px;
  overflow: hidden;
}
.mini-escape-scene--study {
  background:
    radial-gradient(ellipse at 70% 20%, rgba(251,191,36,0.25), transparent 45%),
    linear-gradient(180deg, #78350f 0%, #92400e 38%, #a16207 38%, #78350f 100%);
}
.mini-escape-scene--lab {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(56,189,248,0.2), transparent 50%),
    linear-gradient(180deg, #0f172a 0%, #1e293b 42%, #334155 42%, #0f172a 100%);
}
.mini-escape-scene--vault {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(167,139,250,0.18), transparent 55%),
    linear-gradient(180deg, #1c1917 0%, #292524 40%, #44403c 40%, #1c1917 100%);
}
.mini-escape-decor { position: absolute; inset: 0; pointer-events: none; }
.mini-escape-wall {
  position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
}
.mini-escape-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.22));
}
.mini-escape-prop { position: absolute; border-radius: 8px; opacity: 0.55; }
.mini-escape-prop--window {
  right: 12%; top: 10%; width: 18%; height: 22%;
  background: linear-gradient(160deg, rgba(186,230,253,0.7), rgba(125,211,252,0.25));
  box-shadow: inset 0 0 0 3px rgba(120,53,15,0.45);
}
.mini-escape-prop--pipes {
  left: 6%; top: 8%; width: 40%; height: 8%;
  background: linear-gradient(90deg, #64748b, #94a3b8, #64748b);
  border-radius: 999px;
}
.mini-escape-prop--bars {
  left: 8%; top: 8%; right: 8%; height: 14%;
  background: repeating-linear-gradient(90deg, #78716c 0 8px, transparent 8px 18px);
  opacity: 0.4;
}
.mini-escape-scene-title {
  position: absolute;
  left: 12px; top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.45);
  color: #fef3c7;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
}

.mini-escape-hotspot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  color: #fff;
  font-size: 1.45rem;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mini-escape-hotspot:hover,
.mini-escape-hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.35), 0 8px 20px rgba(0,0,0,0.25);
  outline: none;
}
.mini-escape-hotspot:active { transform: translate(-50%, -50%) scale(0.96); }
.mini-escape-hotspot-label {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-escape-hotspot--done { opacity: 0.55; filter: grayscale(0.3); }
.mini-escape-hotspot--solved {
  border-color: rgba(52,211,153,0.7);
  background: linear-gradient(160deg, rgba(52,211,153,0.35), rgba(16,185,129,0.15));
}
.mini-escape-hotspot--hint {
  animation: me-hint-pulse 0.9s ease-in-out infinite;
  border-color: #38bdf8;
  z-index: 2;
}
@keyframes me-hint-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(56,189,248,0.55); }
  50% { box-shadow: 0 0 0 10px rgba(56,189,248,0); }
}

.mini-escape-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.mini-escape-particle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: me-particle 0.6s ease-out forwards;
}
@keyframes me-particle {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); opacity: 0; }
}
.mini-escape-door-flash {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(circle at 85% 55%, rgba(254,243,199,0.9), transparent 55%);
  opacity: 0;
}
.mini-escape-door-flash--on { animation: me-door-flash 0.9s ease-out; }
@keyframes me-door-flash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

.mini-escape-toast {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%) translateY(12px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15,23,42,0.88);
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mini-escape-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mini-escape-toast--good { background: rgba(5,150,105,0.92); }
.mini-escape-toast--warn { background: rgba(185,28,28,0.92); }
.mini-escape-toast--combo { background: linear-gradient(90deg, #7c3aed, #db2777); }
.mini-escape-toast--eureka { background: linear-gradient(90deg, #7c3aed, #2563eb); }
.mini-escape-toast--door { background: linear-gradient(90deg, #d97706, #f59e0b); color: #1c1917; }
.mini-escape-toast--hint { background: rgba(14,165,233,0.92); }

.mini-escape-side {
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(248,250,252,0.95), rgba(226,232,240,0.7));
  border: 1px solid rgba(148,163,184,0.35);
  padding: 10px 12px;
  max-height: 120px;
  overflow: auto;
}
.mini-escape-side-title {
  font-size: 0.75rem;
  font-weight: 750;
  color: #475569;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.mini-escape-clue-list {
  margin: 0; padding-left: 18px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #334155;
}
.mini-escape-clue-empty { list-style: none; margin-left: -18px; color: #94a3b8; }
.mini-escape-clue-item { margin-bottom: 4px; }

.mini-escape-inv {
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(145deg, rgba(255,247,237,0.95), rgba(254,215,170,0.45));
  border: 1px solid rgba(234,88,12,0.22);
}
.mini-escape-inv-title {
  font-size: 0.75rem;
  font-weight: 750;
  color: #9a3412;
  margin-bottom: 8px;
}
.mini-escape-inv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  align-items: center;
}
.mini-escape-inv-empty { color: #a8a29e; font-size: 0.82rem; }
.mini-escape-inv-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  min-height: 56px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 2px solid rgba(180,83,9,0.25);
  background: linear-gradient(160deg, #fff7ed, #ffedd5);
  font-size: 1.35rem;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.mini-escape-inv-item:hover { transform: translateY(-2px); }
.mini-escape-inv-item--sel {
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234,88,12,0.28);
  transform: scale(1.06);
}
.mini-escape-inv-cap {
  font-size: 0.58rem;
  font-weight: 700;
  color: #7c2d12;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-escape-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-escape-hint-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: none;
  font-weight: 750;
  font-size: 0.9rem;
  color: #0c4a6e;
  background: linear-gradient(145deg, #e0f2fe, #7dd3fc);
  box-shadow: 0 4px 0 #0284c7;
  cursor: pointer;
}
.mini-escape-hint-btn:hover:not(:disabled) { filter: brightness(1.05); }
.mini-escape-hint-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #0284c7; }
.mini-escape-hint-btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.mini-escape-hint-cd { font-size: 0.78rem; color: #64748b; font-weight: 600; }

.mini-escape-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(3px);
}
.mini-escape-modal[hidden] { display: none !important; }
.mini-escape-modal-card {
  width: min(360px, 100%);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(165deg, #fffbeb, #fef3c7 60%, #fde68a);
  border: 1px solid rgba(217,119,6,0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.28);
  animation: me-modal-in 0.22s ease-out;
}
@keyframes me-modal-in {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.mini-escape-modal-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: #92400e;
}
.mini-escape-modal-text {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #44403c;
}
.mini-escape-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.mini-escape-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(120,53,15,0.2);
  background: #fff7ed;
  color: #7c2d12;
  font-weight: 700;
  cursor: pointer;
}
.mini-escape-btn--primary {
  border: none;
  color: #fff;
  background: linear-gradient(145deg, #f59e0b, #d97706);
  box-shadow: 0 3px 0 #b45309;
}
.mini-escape-btn--primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #b45309; }

.mini-escape-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid rgba(180,83,9,0.35);
  font-size: 1.35rem;
  letter-spacing: 0.28em;
  text-align: center;
  font-weight: 750;
  background: #fff;
  color: #1c1917;
}
.mini-escape-input--bad { animation: me-shake 0.35s ease-out; border-color: #ef4444; }

.mini-escape-seq-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mini-escape-seq-btn {
  min-height: 48px;
  border: none;
  border-radius: 12px;
  font-weight: 750;
  color: #fff;
  background: var(--seq-color, #64748b);
  box-shadow: 0 4px 0 rgba(0,0,0,0.25);
  cursor: pointer;
}
.mini-escape-seq-btn--pop { animation: me-seq-pop 0.2s ease-out; }
@keyframes me-seq-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.mini-escape-seq-status {
  margin-top: 10px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 650;
  color: #57534e;
  min-height: 1.2em;
}

.mini-escape-need-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mini-escape-need {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(248,113,113,0.15);
  border: 1px solid rgba(239,68,68,0.35);
  font-size: 0.8rem;
  font-weight: 650;
  color: #991b1b;
}
.mini-escape-need--have {
  background: rgba(52,211,153,0.18);
  border-color: rgba(16,185,129,0.4);
  color: #065f46;
}

@media (max-width: 480px) {
  .mini-escape-stage { min-height: 260px; }
  .mini-escape-scene { min-height: 240px; }
  .mini-escape-hotspot { font-size: 1.25rem; }
  .mini-escape-side { max-height: 100px; }
}

/* --- stock-trader --- */
.st-wrap {
  --st-bg0: #0b1220;
  --st-bg1: #111827;
  --st-line: #1e293b;
  --st-up: #34d399;
  --st-down: #f87171;
  --st-gold: #fbbf24;
  --st-ink: #e2e8f0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 6px 14px;
  color: var(--st-ink);
  font-family: Segoe UI, Noto Sans KR, sans-serif;
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
 background:
 radial-gradient(ellipse at 20% 0%, rgba(16, 185, 129, 0.12), transparent 45%),
 radial-gradient(ellipse at 90% 10%, rgba(59, 130, 246, 0.1), transparent 40%),
 linear-gradient(180deg, #0f172a 0%, #020617 100%);
 border-radius: 18px;
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 32px rgba(0,0,0,0.35);
 overflow: hidden;
}
.st-hud {
 display: flex;
 flex-wrap: wrap;
 gap: 6px 10px;
 justify-content: center;
 padding: 6px 4px;
}
.st-hud-item {
 font-size: 12px;
 color: #94a3b8;
 background: rgba(15, 23, 42, 0.75);
 border: 1px solid rgba(148, 163, 184, 0.18);
 border-radius: 999px;
 padding: 5px 10px;
}
.st-hud-item strong {
 color: #f8fafc;
 font-weight: 700;
 margin-left: 4px;
}
.st-hud-item--asset {
 border-color: rgba(52, 211, 153, 0.45);
 background: rgba(6, 78, 59, 0.35);
}
.st-hud-item--time strong { font-variant-numeric: tabular-nums; }
.st-hud-item--urgent {
 border-color: rgba(248, 113, 113, 0.55);
 animation: st-pulse 0.8s ease-in-out infinite;
}
.st-price-row {
 display: flex;
 align-items: baseline;
 justify-content: center;
 gap: 12px;
}
.st-price {
 font-size: 28px;
 font-weight: 800;
 letter-spacing: -0.02em;
 color: #f8fafc;
 text-shadow: 0 0 24px rgba(52, 211, 153, 0.25);
}
.st-delta {
 font-size: 15px;
 font-weight: 700;
}
.st-up { color: var(--st-up); }
.st-down { color: var(--st-down); }
.st-chart-box {
 border-radius: 14px;
 overflow: hidden;
 border: 1px solid rgba(148, 163, 184, 0.2);
 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
 background: #0b1220;
}
.st-canvas {
 display: block;
 width: 100%;
 height: auto;
 max-height: 280px;
 touch-action: none;
}
.st-ticker {
 display: flex;
 align-items: center;
 min-height: 36px;
 padding: 8px 12px;
 border-radius: 10px;
 background: linear-gradient(90deg, rgba(30, 58, 138, 0.45), rgba(15, 23, 42, 0.8));
 border: 1px solid rgba(96, 165, 250, 0.35);
 overflow: hidden;
}
.st-ticker-text {
 font-size: 13px;
 font-weight: 650;
 color: #bfdbfe;
 white-space: nowrap;
 animation: st-ticker-scroll 12s linear infinite;
}
.st-ticker--pulse {
 animation: st-ticker-flash 0.55s ease;
}
.st-hint {
 margin: 0;
 text-align: center;
 font-size: 13px;
 font-weight: 600;
 color: #94a3b8;
 min-height: 1.3em;
}
.st-fee {
 margin: 0;
 text-align: center;
 font-size: 11px;
 color: #64748b;
}
.st-btns {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 8px;
}
.st-btn {
 appearance: none;
 border: none;
 border-radius: 14px;
 min-height: 52px;
 padding: 12px 10px;
 font-size: 15px;
 font-weight: 800;
 letter-spacing: 0.02em;
 cursor: pointer;
 color: #052e16;
 transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
 touch-action: manipulation;
 -webkit-tap-highlight-color: transparent;
}
.st-btn:disabled {
 opacity: 0.4;
 cursor: not-allowed;
 filter: grayscale(0.3);
}
.st-btn:not(:disabled):active {
 transform: scale(0.97);
}
.st-btn--buy {
 background: linear-gradient(180deg, #6ee7b7, #059669);
 box-shadow: 0 6px 0 #065f46, 0 10px 20px rgba(16, 185, 129, 0.35);
 color: #022c22;
}
.st-btn--buy-half {
 background: linear-gradient(180deg, #a7f3d0, #34d399);
 box-shadow: 0 6px 0 #047857, 0 8px 16px rgba(52, 211, 153, 0.28);
 color: #064e3b;
}
.st-btn--sell {
 background: linear-gradient(180deg, #fca5a5, #dc2626);
 box-shadow: 0 6px 0 #7f1d1d, 0 10px 20px rgba(239, 68, 68, 0.35);
 color: #450a0a;
}
.st-btn--sell-half {
 background: linear-gradient(180deg, #fecaca, #f87171);
 box-shadow: 0 6px 0 #991b1b, 0 8px 16px rgba(248, 113, 113, 0.28);
 color: #7f1d1d;
}
.st-btn--pop {
 transform: scale(1.04);
 filter: brightness(1.08);
}
.st-fx {
 pointer-events: none;
 position: absolute;
 left: 50%;
 top: 42%;
 width: 0;
 height: 0;
 z-index: 30;
}
.st-float {
 position: absolute;
 left: 50%;
 top: 0;
 transform: translate(-50%, 8px) scale(0.9);
 opacity: 0;
 padding: 8px 14px;
 border-radius: 999px;
 font-size: 15px;
 font-weight: 800;
 white-space: nowrap;
 background: #e2e8f0;
 color: #0f172a;
 box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.st-float--show {
 animation: st-float-up 0.9s ease-out forwards;
}
.st-float--profit { background: #86efac; }
.st-float--loss { background: #fca5a5; }
.st-float--info { background: #93c5fd; }
.st-float--moon { background: #fde68a; }
.st-moon {
 position: absolute;
 left: 50%;
 top: -20px;
 transform: translate(-50%, 40px) scale(0.6);
 opacity: 0;
 font-size: 22px;
 font-weight: 900;
 letter-spacing: 0.04em;
 color: #fef08a;
 text-shadow: 0 0 18px rgba(251, 191, 36, 0.8), 0 4px 0 #92400e;
 white-space: nowrap;
}
.st-moon--show {
 animation: st-moon-fly 1.5s ease-out forwards;
}
.st-grade {
 position: absolute;
 left: 50%;
 top: -10px;
 transform: translate(-50%, 20px) scale(0.8);
 opacity: 0;
 padding: 10px 18px;
 border-radius: 12px;
 font-size: 20px;
 font-weight: 900;
 letter-spacing: 0.06em;
 background: linear-gradient(135deg, #1e293b, #0f172a);
 border: 2px solid #fbbf24;
 color: #fde68a;
 box-shadow: 0 0 28px rgba(251, 191, 36, 0.45);
 white-space: nowrap;
}
.st-grade--show {
 animation: st-grade-in 0.9s ease-out forwards;
}
.st-grade--S { border-color: #f472b6; color: #fbcfe8; box-shadow: 0 0 32px rgba(244, 114, 182, 0.5); }
.st-grade--A { border-color: #fbbf24; }
.st-grade--B { border-color: #34d399; color: #a7f3d0; }
.st-grade--C { border-color: #94a3b8; color: #e2e8f0; }
.st-grade--D { border-color: #fb923c; color: #fed7aa; }
.st-grade--F { border-color: #f87171; color: #fecaca; }
.st-flash {
 pointer-events: none;
 position: absolute;
 inset: 0;
 border-radius: 18px;
 opacity: 0;
 z-index: 25;
}
.st-flash--show {
 animation: st-flash 0.42s ease-out;
}
.st-flash--green { background: radial-gradient(circle at 50% 40%, rgba(52,211,153,0.35), transparent 65%); }
.st-flash--red { background: radial-gradient(circle at 50% 40%, rgba(248,113,113,0.35), transparent 65%); }
.st-flash--gold { background: radial-gradient(circle at 50% 40%, rgba(251,191,36,0.4), transparent 65%); }
.st-particle {
 position: absolute;
 left: 0;
 top: 0;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 animation: st-particle 0.65s ease-out forwards;
}
.st-wrap--shake { animation: st-shake 0.28s ease; }
.st-wrap--profit .st-price { color: #6ee7b7; }
.st-wrap--moon .st-chart-box {
 box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.55), 0 0 28px rgba(251, 191, 36, 0.35);
}
.st-wrap--win {
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 2px rgba(52,211,153,0.4), 0 12px 36px rgba(16,185,129,0.25);
}
.st-wrap--lose {
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 2px rgba(248,113,113,0.4), 0 12px 36px rgba(239,68,68,0.22);
}

@keyframes st-float-up {
 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.85); }
 18% { opacity: 1; transform: translate(-50%, -4px) scale(1.08); }
 100% { opacity: 0; transform: translate(-50%, -52px) scale(1); }
}
@keyframes st-moon-fly {
 0% { opacity: 0; transform: translate(-50%, 50px) scale(0.5) rotate(-6deg); }
 25% { opacity: 1; transform: translate(-50%, -10px) scale(1.15) rotate(2deg); }
 70% { opacity: 1; transform: translate(-50%, -40px) scale(1.05) rotate(0deg); }
 100% { opacity: 0; transform: translate(-50%, -90px) scale(0.9) rotate(4deg); }
}
@keyframes st-grade-in {
 0% { opacity: 0; transform: translate(-50%, 30px) scale(0.7); }
 40% { opacity: 1; transform: translate(-50%, -8px) scale(1.12); }
 100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes st-flash {
 0% { opacity: 0.9; }
 100% { opacity: 0; }
}
@keyframes st-particle {
 0% { opacity: 1; transform: translate(0, 0) scale(1); }
 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}
@keyframes st-shake {
 0%, 100% { transform: translateX(0); }
 25% { transform: translateX(-5px); }
 75% { transform: translateX(5px); }
}
@keyframes st-pulse {
 0%, 100% { background: rgba(127, 29, 29, 0.35); }
 50% { background: rgba(185, 28, 28, 0.55); }
}
@keyframes st-ticker-flash {
 0% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.7); }
 100% { box-shadow: 0 0 0 10px rgba(96, 165, 250, 0); }
}
@keyframes st-ticker-scroll {
 0% { transform: translateX(8%); }
 100% { transform: translateX(-8%); }
}

@media (max-width: 480px) {
 .st-wrap { padding: 6px 4px 12px; border-radius: 14px; }
 .st-price { font-size: 24px; }
 .st-btn { min-height: 48px; font-size: 14px; border-radius: 12px; }
 .st-hud-item { font-size: 11px; padding: 4px 8px; }
 .st-moon { font-size: 18px; }
}

/* ===== ghost-leg ===== */
.gl-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0 16px;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  touch-action: manipulation;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(34, 197, 94, 0.12), transparent 55%),
    linear-gradient(180deg, #0f172a 0%, #14532d 48%, #0f172a 100%);
  border-radius: 16px;
  overflow: hidden;
}
.gl-wrap--shake { animation: gl-shake 0.4s ease; }
.gl-wrap--hit { animation: gl-hit-flash 0.55s ease; }
.gl-wrap--jackpot { animation: gl-jackpot-flash 1.1s ease; }
.gl-wrap--miss { filter: saturate(0.85); }
@keyframes gl-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes gl-hit-flash {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.2) saturate(1.25); }
}
@keyframes gl-jackpot-flash {
  0%, 100% { filter: brightness(1); }
  30% { filter: brightness(1.3) saturate(1.4); }
  60% { filter: brightness(1.12); }
}
.gl-note {
  margin: 0;
  font-size: 0.78rem;
  color: #86efac;
  text-align: center;
  opacity: 0.9;
}
.gl-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0 8px;
}
.gl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 10px;
  background: linear-gradient(160deg, #14532d 0%, #166534 100%);
  border: 1px solid rgba(74, 222, 128, 0.35);
  min-width: 56px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.gl-stat--mult {
  border-color: rgba(250, 204, 21, 0.5);
  background: linear-gradient(160deg, #713f12 0%, #a16207 100%);
}
.gl-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #bbf7d0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gl-stat-value {
  font-size: 1rem;
  font-weight: 800;
  color: #fef08a;
}
.gl-stat-value--chips { color: #fde68a; }
.gl-stat-value--mult { color: #fef9c3; }
.gl-stat-value--jackpot {
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
}
.gl-stat-value--streak { color: #fb7185; }
.gl-stat-value--flash { animation: gl-flash 0.5s ease; }
.gl-stat-value--pop { animation: gl-pop 0.4s ease; }
@keyframes gl-flash {
  0%, 100% { color: #fde68a; }
  40% { color: #fff; text-shadow: 0 0 12px #fbbf24; }
}
@keyframes gl-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.gl-timer {
  width: min(360px, 92%);
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(74, 222, 128, 0.25);
  overflow: hidden;
  opacity: 0.45;
}
.gl-timer--on { opacity: 1; }
.gl-timer--urgent .gl-timer-fill {
  background: linear-gradient(90deg, #f97316, #ef4444);
}
.gl-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #a3e635);
  transition: width 0.05s linear;
}
.gl-hint {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ecfdf5;
  text-align: center;
  min-height: 1.3em;
}
.gl-arena {
  position: relative;
  width: min(420px, 96%);
}
.gl-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: visible;
}
.gl-board {
  position: relative;
  padding: 10px 8px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(6, 78, 59, 0.45)),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 11px,
      rgba(255, 255, 255, 0.02) 11px,
      rgba(255, 255, 255, 0.02) 12px
    );
  border: 1px solid rgba(74, 222, 128, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.25);
}
.gl-tops,
.gl-bottoms {
  display: grid;
  grid-template-columns: repeat(var(--gl-cols, 4), 1fr);
  gap: 4px;
  margin: 0 4px;
}
.gl-top,
.gl-bot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 36px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
}
.gl-top {
  background: rgba(15, 23, 42, 0.45);
  color: #a7f3d0;
  border: 1px solid rgba(110, 231, 183, 0.25);
}
.gl-top--start {
  background: linear-gradient(160deg, #fbbf24, #f59e0b);
  color: #422006;
  border-color: #fde68a;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
  animation: gl-start-pulse 1.4s ease-in-out infinite;
}
@keyframes gl-start-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.gl-top-mark { font-size: 0.95rem; }
.gl-bot {
  border: 1px solid transparent;
}
.gl-bot--prize {
  background: linear-gradient(160deg, #fef08a, #fbbf24);
  color: #713f12;
  border-color: #fde68a;
}
.gl-bot--bust {
  background: rgba(15, 23, 42, 0.5);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.3);
}
.gl-bot--landed {
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.55);
  outline: 2px solid #4ade80;
}
.gl-bot-label { font-size: 0.62rem; letter-spacing: 0.03em; }
.gl-bot-num { font-size: 0.85rem; }
.gl-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--gl-cols, 4), 1fr);
  grid-template-rows: repeat(var(--gl-rows, 6), 1fr);
  min-height: 220px;
  margin: 6px 10px 8px;
}
.gl-vert {
  grid-row: 1 / -1;
  justify-self: center;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #86efac, #22c55e 40%, #15803d);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}
.gl-rung {
  align-self: center;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #fde68a, #f59e0b, #fde68a);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
  z-index: 1;
}
.gl-token {
  position: absolute;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
  background: radial-gradient(circle at 30% 28%, #fff7ed, #f97316 55%, #c2410c);
  border: 2px solid #ffedd5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: left 0.05s linear, top 0.05s linear;
  pointer-events: none;
}
.gl-token--on { display: flex; }
.gl-token--glow {
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.75), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.gl-token--win {
  animation: gl-token-win 0.55s ease;
  background: radial-gradient(circle at 30% 28%, #fef9c3, #22c55e 60%, #15803d);
}
.gl-token--lose {
  animation: gl-token-lose 0.45s ease;
  filter: grayscale(0.4);
}
@keyframes gl-token-win {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes gl-token-lose {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.gl-token-face {
  font-size: 1.05rem;
  line-height: 1;
}
.gl-particle {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: -4px;
  animation: gl-particle 0.85s ease-out forwards;
}
.gl-particle--hit { background: #4ade80; }
.gl-particle--jackpot { background: #fbbf24; width: 10px; height: 10px; }
.gl-particle--miss { background: #94a3b8; }
@keyframes gl-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
.gl-combo-pop {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 2px 0 #78350f, 0 0 18px rgba(251, 191, 36, 0.7);
  animation: gl-combo 0.85s ease-out forwards;
  pointer-events: none;
}
@keyframes gl-combo {
  0% { transform: translate(-50%, -40%) scale(0.6); opacity: 0; }
  30% { transform: translate(-50%, -55%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
}
.gl-feedback {
  min-height: 1.4em;
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
  color: #e2e8f0;
}
.gl-feedback--ok { color: #4ade80; }
.gl-feedback--bad { color: #fb7185; }
.gl-feedback--jackpot {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
  animation: gl-pop 0.5s ease;
}
.gl-bet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0 8px;
}
.gl-bet-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #bbf7d0;
}
.gl-bet-input {
  width: 72px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(74, 222, 128, 0.4);
  background: #0f172a;
  color: #fef9c3;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
}
.gl-bet-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gl-chip-btn {
  min-width: 48px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(250, 204, 21, 0.4);
  background: linear-gradient(160deg, #a16207, #854d0e);
  color: #fef9c3;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.gl-chip-btn:hover:not(:disabled) { filter: brightness(1.1); }
.gl-chip-btn:active:not(:disabled) { transform: scale(0.96); }
.gl-chip-btn:disabled { opacity: 0.45; cursor: default; }
.gl-exits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  min-height: 52px;
}
.gl-exit-btn {
  min-width: 88px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid rgba(74, 222, 128, 0.45);
  background: linear-gradient(160deg, #166534, #14532d);
  color: #ecfdf5;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.gl-exit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.3);
}
.gl-exit-btn:active:not(:disabled) { transform: scale(0.97); }
.gl-exit-btn:disabled { opacity: 0.4; cursor: default; }
.gl-exit-btn--prize {
  border-color: rgba(251, 191, 36, 0.7);
  background: linear-gradient(160deg, #a16207, #854d0e);
  color: #fef9c3;
}
.gl-exit-btn--picked {
  opacity: 1 !important;
  outline: 2px solid #fbbf24;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
}
.gl-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
  padding: 0 8px 4px;
}
.gl-btn {
  min-width: 140px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.gl-btn:hover:not(:disabled) { filter: brightness(1.08); }
.gl-btn:active:not(:disabled) { transform: scale(0.97); }
.gl-btn:disabled { opacity: 0.45; cursor: default; }
.gl-btn--go {
  background: linear-gradient(160deg, #22c55e, #16a34a);
  color: #052e16;
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
}
.gl-btn--next {
  background: linear-gradient(160deg, #38bdf8, #0284c7);
  color: #082f49;
  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.3);
}
@media (max-width: 480px) {
  .gl-grid { min-height: 200px; }
  .gl-exit-btn {
    min-width: calc(50% - 12px);
    min-height: 56px;
    font-size: 1rem;
  }
  .gl-btn { min-height: 52px; flex: 1; }
  .gl-stat { min-width: 52px; padding: 6px 8px; }
  .gl-token { width: 32px; height: 32px; margin-left: -16px; margin-top: -16px; }
}

/* ===== fox-and-hounds ===== */
.fh-wrap {
  --fh-moss: #1a3a28;
  --fh-leaf: #2d6a45;
  --fh-fox: #e85d04;
  --fh-fox-dark: #9a3412;
  --fh-hound: #64748b;
  --fh-hound-dark: #334155;
  --fh-cream: #fef3c7;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 8px 6px 18px;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(251, 146, 60, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(45, 106, 69, 0.2), transparent 45%),
    linear-gradient(165deg, #0f1f16 0%, #1a3324 40%, #122018 100%);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.fh-wrap--shake { animation: fh-shake 0.28s ease; }
.fh-wrap--break .fh-board {
  animation: fh-break-pulse 0.65s ease;
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.55), 0 12px 40px rgba(232, 93, 4, 0.35);
}
.fh-wrap--win .fh-board {
  animation: fh-win-glow 1.1s ease;
}
.fh-wrap--lose .fh-board {
  animation: fh-lose-dim 0.75s ease;
}

.fh-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  color: var(--fh-cream);
}
.fh-hud span {
  background: linear-gradient(160deg, rgba(45, 106, 69, 0.85), rgba(15, 40, 25, 0.95));
  border: 1px solid rgba(167, 243, 208, 0.22);
  border-radius: 999px;
  padding: 5px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.fh-hud strong {
  color: #fde68a;
  font-variant-numeric: tabular-nums;
}
.fh-hud-turn--you { color: #86efac !important; }
.fh-hud-turn--ai { color: #93c5fd !important; }
.fh-hud-turn--over { color: #fda4af !important; }

.fh-hint {
  min-height: 1.35em;
  font-size: 13px;
  font-weight: 600;
  color: #bbf7d0;
  text-align: center;
  padding: 0 8px;
}

.fh-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.fh-btn {
  appearance: none;
  border: 1px solid rgba(254, 243, 199, 0.28);
  border-radius: 12px;
  padding: 8px 14px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #fef9c3;
  background: linear-gradient(165deg, #3d7a52, #1e4a32);
  box-shadow: 0 2px 0 #0f291c, 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease, filter 0.12s ease;
  touch-action: manipulation;
}
.fh-btn:hover { filter: brightness(1.08); }
.fh-btn:active { transform: scale(0.96); }
.fh-btn--swap {
  background: linear-gradient(165deg, #c2410c, #7c2d12);
  box-shadow: 0 2px 0 #431407, 0 4px 12px rgba(0, 0, 0, 0.3);
}

.fh-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(100%, 384px);
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid #5c3a1a;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  background: #3b2410;
}

.fh-cell {
  position: relative;
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  cursor: default;
}
.fh-cell--light {
  background: linear-gradient(145deg, #e8d5a8, #d4b87a);
}
.fh-cell--dark {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.06), transparent 45%),
    linear-gradient(160deg, #2a5a3a, #1a3d28);
  cursor: pointer;
}
.fh-cell--dark:hover:not(:disabled) {
  filter: brightness(1.12);
}
.fh-cell--selected {
  box-shadow: inset 0 0 0 3px #fbbf24;
  z-index: 1;
}
.fh-cell--target {
  background:
    radial-gradient(circle at center, rgba(253, 224, 71, 0.45) 0%, transparent 55%),
    linear-gradient(160deg, #3d7a52, #245c3a) !important;
  animation: fh-target-pulse 0.9s ease infinite;
}
.fh-cell--target::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(254, 243, 199, 0.85);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
  pointer-events: none;
}
.fh-cell--playable .fh-piece {
  animation: fh-piece-idle 1.6s ease-in-out infinite;
}
.fh-cell--land .fh-piece {
  animation: fh-piece-land 0.28s ease;
}
.fh-cell--ai {
  box-shadow: inset 0 0 0 3px #60a5fa;
}

.fh-piece {
  position: relative;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  display: block;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.fh-piece--fox {
  background:
    radial-gradient(circle at 35% 28%, #fdba74, transparent 42%),
    linear-gradient(160deg, #fb923c, var(--fh-fox-dark));
  border: 2px solid #7c2d12;
}
.fh-piece--hound {
  background:
    radial-gradient(circle at 35% 28%, #cbd5e1, transparent 42%),
    linear-gradient(160deg, #94a3b8, var(--fh-hound-dark));
  border: 2px solid #1e293b;
}
.fh-piece-gloss {
  position: absolute;
  top: 12%;
  left: 18%;
  width: 38%;
  height: 28%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.fh-piece-eye {
  position: absolute;
  top: 36%;
  width: 14%;
  height: 14%;
  border-radius: 50%;
  background: #0f172a;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.fh-piece-eye--l { left: 26%; }
.fh-piece-eye--r { right: 26%; }

.fh-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.fh-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: -4px 0 0 -4px;
  animation: fh-particle 0.5s ease-out forwards;
}
.fh-banner {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 800;
  color: #fff7ed;
  background: linear-gradient(160deg, rgba(194, 65, 12, 0.92), rgba(67, 20, 7, 0.95));
  border: 1px solid rgba(253, 186, 116, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.fh-banner--pop {
  animation: fh-banner-pop 0.85s ease forwards;
}
.fh-streak-badge {
  position: absolute;
  top: 12%;
  right: 8%;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #422006;
  background: linear-gradient(160deg, #fde68a, #f59e0b);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45);
  transform: scale(0.5) rotate(-8deg);
}
.fh-streak-badge--show {
  animation: fh-streak-pop 1.2s ease forwards;
}

@keyframes fh-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes fh-target-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
@keyframes fh-piece-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes fh-piece-land {
  0% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes fh-break-pulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.02); }
}
@keyframes fh-win-glow {
  0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.55), 0 12px 40px rgba(74, 222, 128, 0.35); }
}
@keyframes fh-lose-dim {
  0% { filter: brightness(1); }
  40% { filter: brightness(0.7) saturate(0.7); }
  100% { filter: brightness(1); }
}
@keyframes fh-particle {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}
@keyframes fh-banner-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}
@keyframes fh-streak-pop {
  0% { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  25% { opacity: 1; transform: scale(1.15) rotate(-4deg); }
  70% { opacity: 1; transform: scale(1) rotate(-6deg); }
  100% { opacity: 0; transform: scale(0.9) translateY(-12px); }
}

@media (max-width: 480px) {
  .fh-wrap { max-width: 100%; padding: 6px 2px 12px; }
  .fh-board { width: min(100%, 360px); }
  .fh-btn { padding: 8px 12px; font-size: 12px; }
  .fh-hud { font-size: 11px; gap: 5px 8px; }
}

/* --- yut-nori --- */
.yut-wrap {
  --yut-wood: #b45309;
  --yut-wood-dark: #7c2d12;
  --yut-felt: #14532d;
  --yut-you: #f59e0b;
  --yut-ai: #64748b;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
  padding: 10px 8px 14px;
  touch-action: manipulation;
  user-select: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(251, 191, 36, 0.12), transparent 50%),
    linear-gradient(165deg, #1c1917 0%, #292524 45%, #1c1917 100%);
  border-radius: 18px;
}
.yut-wrap--shake { animation: yut-shake 0.28s ease; }
.yut-wrap--win { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.55), 0 12px 40px rgba(251, 191, 36, 0.2); }
.yut-wrap--lose { box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.4); }
@keyframes yut-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.yut-hud {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 0.9fr;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #e7e5e4;
}
.yut-hud span {
  text-align: center;
  padding: 6px 4px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
}
.yut-hud strong { color: #fef3c7; }
.yut-hud-turn--you { color: #fbbf24 !important; }
.yut-hud-turn--ai { color: #94a3b8 !important; }
.yut-hud-turn--over { color: #fda4af !important; }

.yut-hint {
  min-height: 1.25em;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #d6d3d1;
}

.yut-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06), transparent 42%),
    linear-gradient(145deg, #ca8a04 0%, var(--yut-wood) 40%, var(--yut-wood-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -10px 24px rgba(0, 0, 0, 0.25),
    0 10px 28px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(120, 53, 15, 0.55);
}
.yut-track {
  position: absolute;
  inset: 12%;
  pointer-events: none;
}
.yut-ring {
  position: absolute;
  inset: 0;
  border: 3px solid rgba(254, 243, 199, 0.35);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.yut-diag {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(254, 243, 199, 0.4), transparent);
  transform-origin: center;
}
.yut-diag--a { transform: translate(-50%, -50%) rotate(45deg); }
.yut-diag--b { transform: translate(-50%, -50%) rotate(-45deg); }

.yut-cell {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  z-index: 2;
}
.yut-cell-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 45%),
    radial-gradient(circle at 50% 55%, #166534, #052e16);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.15);
}
.yut-cell--start .yut-cell-dot,
.yut-cell--corner .yut-cell-dot {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4), transparent 45%),
    radial-gradient(circle at 50% 55%, #a16207, #713f12);
  box-shadow: 0 0 0 2px rgba(253, 230, 138, 0.45), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.yut-cell--center .yut-cell-dot {
  width: 22px;
  height: 22px;
  margin: -2px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 45%),
    radial-gradient(circle at 50% 55%, #dc2626, #7f1d1d);
}

.yut-finish {
  position: absolute;
  right: 4%;
  bottom: 3%;
  z-index: 1;
  font-size: 11px;
  font-weight: 800;
  color: #fef3c7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 0.85;
  pointer-events: none;
}

.yut-pieces {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.yut-piece {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: none;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.yut-piece--player {
  background:
    radial-gradient(circle at 32% 28%, #fde68a, transparent 42%),
    radial-gradient(circle at 50% 60%, #f59e0b, #b45309 70%);
}
.yut-piece--ai {
  background:
    radial-gradient(circle at 32% 28%, #e2e8f0, transparent 42%),
    radial-gradient(circle at 50% 60%, #94a3b8, #475569 70%);
  cursor: default;
}
.yut-piece-eye {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1c1917;
  box-shadow: 8px 0 0 #1c1917;
  opacity: 0.7;
}
.yut-piece-shine {
  position: absolute;
  left: 6px;
  top: 5px;
  width: 8px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.yut-piece--home {
  position: relative;
  left: auto !important;
  top: auto !important;
  margin: 0;
}
.yut-piece--movable {
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.75), 0 4px 12px rgba(0, 0, 0, 0.35);
  animation: yut-pulse 1s ease infinite;
}
.yut-piece--selected {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px #fbbf24, 0 6px 14px rgba(0, 0, 0, 0.4);
}
.yut-piece--hop { animation: yut-hop 0.14s ease; }
.yut-piece--fly { animation: yut-fly 0.48s ease forwards; }
.yut-piece--goal-pop { animation: yut-goal 0.45s ease; }
.yut-piece--celebrate { animation: yut-cele 0.7s ease infinite alternate; }
.yut-piece--ai-pick { outline: 3px solid #38bdf8; }
.yut-piece--done { opacity: 0.35; filter: grayscale(0.3); pointer-events: none; }
.yut-piece:disabled { cursor: default; }
@keyframes yut-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes yut-hop {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes yut-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(40px, -60px) scale(0.4) rotate(40deg); opacity: 0; }
}
@keyframes yut-goal {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); filter: brightness(1.3); }
  100% { transform: scale(1); }
}
@keyframes yut-cele {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-6px) scale(1.1); filter: brightness(1.15); }
}

.yut-home {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}
.yut-home-label {
  font-size: 11px;
  font-weight: 800;
  color: #a8a29e;
  min-width: 28px;
}
.yut-home-slot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  flex: 1;
}
.yut-home--you .yut-home-label { color: #fbbf24; }
.yut-home--ai .yut-home-label { color: #94a3b8; }

.yut-throw {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "sticks result"
    "btn btn";
  gap: 8px 12px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.06), transparent 50%),
    linear-gradient(180deg, #44403c, #292524);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.yut-sticks {
  grid-area: sticks;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.yut-stick {
  position: relative;
  width: 18px;
  height: 52px;
  border-radius: 6px;
  background: #78350f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform-style: preserve-3d;
}
.yut-stick-face {
  position: absolute;
  inset: 0;
  display: none;
}
.yut-stick--flat .yut-stick-face--flat,
.yut-stick--round .yut-stick-face--round { display: block; }
.yut-stick-face--flat {
  background: linear-gradient(180deg, #fef3c7, #fcd34d);
}
.yut-stick-face--round {
  background: linear-gradient(180deg, #a16207, #713f12);
  border-radius: 9px;
}
.yut-stick--back {
  box-shadow: 0 0 0 2px #ef4444, inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.yut-sticks--spin .yut-stick {
  animation: yut-stick-spin 0.35s linear infinite;
}
.yut-sticks--spin .yut-stick:nth-child(2) { animation-delay: 0.05s; }
.yut-sticks--spin .yut-stick:nth-child(3) { animation-delay: 0.1s; }
.yut-sticks--spin .yut-stick:nth-child(4) { animation-delay: 0.15s; }
.yut-sticks--slow .yut-stick {
  animation: yut-stick-slow 0.9s ease;
}
@keyframes yut-stick-spin {
  0% { transform: rotateX(0deg) translateY(0); }
  50% { transform: rotateX(180deg) translateY(-8px); }
  100% { transform: rotateX(360deg) translateY(0); }
}
@keyframes yut-stick-slow {
  0% { transform: scale(1); }
  40% { transform: scale(1.15) rotateZ(-6deg); }
  100% { transform: scale(1); }
}

.yut-result {
  grid-area: result;
  min-width: 64px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: #fef3c7;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.yut-result--yut,
.yut-result--mo {
  color: #fbbf24;
  animation: yut-result-pop 0.45s ease;
}
.yut-result--back { color: #f87171; }
@keyframes yut-result-pop {
  0% { transform: scale(0.6); opacity: 0.4; }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.yut-throw-btn {
  grid-area: btn;
  min-height: 48px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  color: #1c1917;
  cursor: pointer;
  background: linear-gradient(180deg, #fde68a, #f59e0b 55%, #d97706);
  box-shadow: 0 4px 0 #92400e, 0 8px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, filter 0.1s ease;
}
.yut-throw-btn:hover:not(:disabled) { filter: brightness(1.06); }
.yut-throw-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #92400e, 0 4px 10px rgba(0, 0, 0, 0.25);
}
.yut-throw-btn:disabled {
  opacity: 0.45;
  cursor: default;
  filter: grayscale(0.3);
}

.yut-branch {
  display: flex;
  gap: 8px;
}
.yut-branch[hidden] { display: none !important; }
.yut-branch-btn {
  flex: 1;
  min-height: 44px;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  color: #fafaf9;
  background: linear-gradient(180deg, #57534e, #44403c);
  box-shadow: 0 3px 0 #292524;
}
.yut-branch-btn--short {
  color: #1c1917;
  background: linear-gradient(180deg, #6ee7b7, #34d399 55%, #059669);
  box-shadow: 0 3px 0 #065f46;
}

.yut-banner {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 20;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  color: #1c1917;
  background: rgba(254, 243, 199, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: yut-banner-in 0.35s ease;
}
.yut-banner--bonus { background: linear-gradient(90deg, #fde68a, #fbbf24); }
.yut-banner--capture { background: linear-gradient(90deg, #fecdd3, #fb7185); color: #881337; }
.yut-banner--goal { background: linear-gradient(90deg, #a7f3d0, #34d399); }
.yut-banner--win { background: linear-gradient(90deg, #fde68a, #f59e0b); font-size: 22px; }
.yut-banner--lose { background: linear-gradient(90deg, #e7e5e4, #a8a29e); }
.yut-banner--stack { background: #bae6fd; }
@keyframes yut-banner-in {
  from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.yut-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  overflow: hidden;
}
.yut-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  animation: yut-spark 0.6s ease forwards;
}
@keyframes yut-spark {
  to {
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0;
  }
}

@media (max-width: 420px) {
  .yut-piece { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .yut-throw-btn { min-height: 52px; font-size: 17px; }
  .yut-hud { font-size: 11px; }
}

/* --- idle-bakery --- */
.idle-bakery-wrap {
  --ib-cream: #fff7ed;
  --ib-amber: #f59e0b;
  --ib-brown: #92400e;
  --ib-crust: #b45309;
  --ib-flour: #ffedd5;
  --ib-ink: #431407;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 6px 4px 12px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.idle-bakery-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  padding: 8px 10px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 247, 237, 0.14), rgba(180, 83, 9, 0.18)),
    radial-gradient(circle at 20% 0%, rgba(251, 191, 36, 0.18), transparent 55%);
  border: 1px solid rgba(251, 191, 36, 0.22);
  font-size: 13px;
  color: #fdba74;
}

.idle-bakery-hud span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.idle-bakery-hud strong {
  color: #fff7ed;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.idle-bakery-hud-gold strong { color: #fbbf24; }
.idle-bakery-hud-cps strong { color: #86efac; }
.idle-bakery-hud-best strong { color: #7dd3fc; }
.idle-bakery-hud-time strong { color: #fdba74; }
.idle-bakery-hud-time--low strong {
  color: #f87171;
  animation: idle-bakery-pulse 0.8s ease-in-out infinite;
}

@keyframes idle-bakery-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.idle-bakery-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 18px 12px 22px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(251, 191, 36, 0.28), transparent 50%),
    linear-gradient(165deg, #7c2d12 0%, #9a3412 38%, #b45309 72%, #78350f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 32px rgba(67, 20, 7, 0.4);
  border: 1px solid rgba(253, 186, 116, 0.28);
}

.idle-bakery-wrap--rush .idle-bakery-stage {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 2px rgba(250, 204, 21, 0.55),
    0 16px 40px rgba(234, 179, 8, 0.35);
}

.idle-bakery-wrap--rush-pop .idle-bakery-stage {
  animation: idle-bakery-flash 0.45s ease-out;
}

@keyframes idle-bakery-flash {
  0% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

.idle-bakery-rush {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  color: #431407;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
  animation: idle-bakery-rush-bob 0.7s ease-in-out infinite;
}

@keyframes idle-bakery-rush-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

.idle-bakery-toast {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(67, 20, 7, 0.88);
  color: #ffedd5;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.idle-bakery-toast--rush {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  color: #431407;
}

.idle-bakery-toast--warn {
  border-color: rgba(248, 113, 113, 0.5);
  color: #fecaca;
}

.idle-bakery-bake {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(200px, 58vw);
  height: min(200px, 58vw);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  color: #431407;
  background:
    radial-gradient(circle at 35% 28%, #fde68a 0%, #fbbf24 42%, #d97706 78%, #92400e 100%);
  box-shadow:
    inset 0 -10px 22px rgba(120, 53, 15, 0.35),
    inset 0 8px 18px rgba(255, 255, 255, 0.35),
    0 12px 28px rgba(67, 20, 7, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.idle-bakery-bake:active {
  transform: scale(0.96);
}

.idle-bakery-bake--pop {
  animation: idle-bakery-bake-pop 0.28s ease-out;
}

@keyframes idle-bakery-bake-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.idle-bakery-bake-emoji {
  font-size: clamp(52px, 16vw, 72px);
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(67, 20, 7, 0.35));
}

.idle-bakery-bake-yield {
  font-size: 14px;
  font-weight: 800;
  color: #78350f;
  background: rgba(255, 247, 237, 0.72);
  padding: 3px 10px;
  border-radius: 999px;
}

.idle-bakery-steam,
.idle-bakery-rain,
.idle-bakery-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.idle-bakery-steam-puff {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  animation: idle-bakery-steam 0.85s ease-out forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes idle-bakery-steam {
  0% { opacity: 0.85; transform: translate(0, 0) scale(0.6); }
  100% { opacity: 0; transform: translate(var(--dx, 0), -56px) scale(1.4); }
}

.idle-bakery-rain-drop {
  position: absolute;
  top: -12%;
  font-size: 16px;
  animation: idle-bakery-rain var(--dur, 1.2s) linear forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes idle-bakery-rain {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(260px) rotate(40deg); opacity: 0; }
}

.idle-bakery-float {
  position: absolute;
  transform: translate(-50%, 0);
  font-weight: 800;
  font-size: 18px;
  color: #fef08a;
  text-shadow: 0 2px 8px rgba(67, 20, 7, 0.7);
  animation: idle-bakery-float 0.85s ease-out forwards;
  pointer-events: none;
}

@keyframes idle-bakery-float {
  0% { opacity: 1; transform: translate(-50%, 0) scale(0.9); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1.15); }
}

.idle-bakery-hint {
  text-align: center;
  font-size: 13px;
  color: #fdba74;
  min-height: 1.2em;
  transition: opacity 0.4s ease;
}

.idle-bakery-hint--fade,
.idle-bakery-hint--gone {
  opacity: 0;
  pointer-events: none;
}

.idle-bakery-shop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}

.idle-bakery-line {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 237, 213, 0.08), rgba(146, 64, 14, 0.16)),
    rgba(67, 20, 7, 0.35);
  border: 1px solid rgba(251, 191, 36, 0.16);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.idle-bakery-line--active {
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18);
}

.idle-bakery-line--level {
  animation: idle-bakery-level 0.4s ease-out;
}

@keyframes idle-bakery-level {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.6); }
  40% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(250, 204, 21, 0); }
  100% { transform: scale(1); }
}

.idle-bakery-line--shake {
  animation: idle-bakery-shake 0.3s ease-out;
}

@keyframes idle-bakery-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.idle-bakery-line-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(160deg, #fed7aa, #fdba74);
  color: #7c2d12;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.idle-bakery-line-tab:active { transform: scale(0.97); }
.idle-bakery-line-tab--on {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 2px rgba(251, 191, 36, 0.55);
}

.idle-bakery-line-emoji { font-size: 28px; line-height: 1; }
.idle-bakery-line-name {
  font-size: 11px;
  font-weight: 700;
}

.idle-bakery-ups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.idle-bakery-up {
  display: flex;
  align-items: stretch;
  min-height: 68px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  background: rgba(28, 16, 8, 0.45);
  color: #ffedd5;
  cursor: pointer;
  touch-action: manipulation;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.idle-bakery-up:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.idle-bakery-up--afford:not(:disabled) {
  border-color: rgba(74, 222, 128, 0.45);
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.18), rgba(28, 16, 8, 0.5));
}

.idle-bakery-up--afford:not(:disabled):active {
  transform: scale(0.97);
}

.idle-bakery-up-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  font-size: 11px;
  line-height: 1.25;
}

.idle-bakery-up-meta strong {
  font-size: 12px;
  color: #fde68a;
}

.idle-bakery-up-meta span { color: #fdba74; }
.idle-bakery-up-meta em {
  font-style: normal;
  color: #86efac;
  font-weight: 700;
}

.idle-bakery-wrap--ended .idle-bakery-bake,
.idle-bakery-wrap--ended .idle-bakery-up,
.idle-bakery-wrap--ended .idle-bakery-line-tab {
  pointer-events: none;
}

@media (max-width: 480px) {
  .idle-bakery-wrap { max-width: 100%; padding: 4px 2px 10px; }
  .idle-bakery-line {
    grid-template-columns: 84px 1fr;
    gap: 6px;
    padding: 6px;
  }
  .idle-bakery-line-tab { min-height: 64px; }
  .idle-bakery-up { min-height: 64px; }
  .idle-bakery-shop { max-height: 260px; }
  .idle-bakery-bake {
    width: min(180px, 56vw);
    height: min(180px, 56vw);
  }
}