:root {
  --blue: #075eea;
  --blue-dark: #034bc0;
  --sky: #33a0ff;
  --ink: #111827;
  --muted: #606c80;
  --line: #dfe8f4;
  --panel: #ffffff;
  --shadow: 0 14px 34px rgba(33, 57, 94, 0.13);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background:
    linear-gradient(135deg, rgba(14, 101, 238, 0.09) 0 10%, transparent 10% 100%) right top / 260px 220px no-repeat,
    linear-gradient(#fff, #f8fbff);
}

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

button {
  font: inherit;
}

.page-shell {
  width: min(100% - 40px, 1220px);
  margin: 0 auto;
  padding: 28px 0 18px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 28px;
}

.brand,
.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand strong,
.footer-brand strong {
  display: block;
  color: var(--blue);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 0.9;
  letter-spacing: 0;
}

.brand small,
.footer-brand small {
  display: block;
  margin-top: 8px;
  color: #1c2230;
  font-size: clamp(0.9rem, 1.8vw, 1.28rem);
}

.sandwich-logo {
  position: relative;
  display: grid;
  width: 110px;
  height: 90px;
  flex: 0 0 auto;
  transform: rotate(-10deg);
}

.sandwich-logo span {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 32px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  box-shadow: 0 7px 12px rgba(28, 48, 77, 0.16);
}

.sandwich-logo span:nth-child(1) {
  top: 4px;
  background: linear-gradient(145deg, #fff, #dfe5ee);
  z-index: 4;
}

.sandwich-logo span:nth-child(2) {
  top: 28px;
  background: linear-gradient(145deg, #ffd21f, #ff9c00);
  z-index: 3;
}

.sandwich-logo span:nth-child(3) {
  top: 42px;
  background: linear-gradient(145deg, #2599ff, #0457dc);
  z-index: 2;
}

.sandwich-logo span:nth-child(4) {
  top: 56px;
  background: linear-gradient(145deg, #fff, #dfe5ee);
  z-index: 1;
}

.sandwich-logo.small {
  width: 88px;
  height: 72px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 24px);
  font-weight: 800;
  text-transform: uppercase;
}

.main-nav a {
  padding: 14px 16px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.main-nav a.active,
.main-nav a:hover {
  color: #fff;
  background: linear-gradient(180deg, #238dff, var(--blue));
  box-shadow: 0 8px 16px rgba(7, 94, 234, 0.28);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: var(--blue);
}

.games-panel,
.site-footer {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.games-panel {
  padding: clamp(20px, 3vw, 34px);
}

.games-not-found-page {
  min-height: calc(100vh - 146px);
  display: grid;
  place-items: center;
  padding-block: clamp(38px, 7vw, 78px);
}

.games-not-found-panel {
  width: min(100%, 720px);
  display: grid;
  justify-items: center;
  padding: 0;
  text-align: center;
}

.games-not-found-code {
  margin: 0;
  color: var(--ink);
  font-size: clamp(5.2rem, 13vw, 8.2rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  text-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
}

.games-not-found-panel h1 {
  margin: 18px 0 12px;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1.1;
}

.games-not-found-message {
  max-width: 520px;
  margin: 0;
  color: #1c2230;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.games-not-found-image {
  width: min(100%, 430px);
  margin: 20px auto 24px;
}

.games-not-found-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 218px;
  min-height: 58px;
  padding: 14px 26px;
  border-radius: 8px;
  background: linear-gradient(180deg, #238dff, var(--blue));
  color: #fff;
  box-shadow: 0 14px 28px rgba(7, 94, 234, 0.24);
  font-size: 1.16rem;
  font-weight: 900;
}

.games-not-found-button:hover {
  background: var(--blue-dark);
}

.section-title {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  color: var(--blue);
  text-align: center;
  text-transform: uppercase;
}

.section-title h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0;
}

.section-title span {
  height: 1px;
  background: linear-gradient(90deg, transparent, #87aefe, transparent);
}

.carousel-shell {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
}

.game-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(148px, 18vw, 190px);
  gap: clamp(14px, 2vw, 26px);
  overflow-x: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  scroll-snap-type: x mandatory;
}

.game-carousel::-webkit-scrollbar {
  height: 8px;
}

.game-carousel::-webkit-scrollbar-track {
  background: #f4f8ff;
  border-radius: 999px;
}

.game-carousel::-webkit-scrollbar-thumb {
  background: #9a9a9a;
  border-radius: 999px;
}

.carousel-control {
  display: grid;
  place-items: center;
  width: 40px;
  height: 64px;
  border: 0;
  border-radius: var(--radius);
  color: var(--blue);
  background: transparent;
  font-size: 3.2rem;
  line-height: 1;
  cursor: pointer;
}

.carousel-control:hover {
  color: var(--blue-dark);
  background: #eef5ff;
}

.game-card {
  display: grid;
  grid-template-rows: 132px auto;
  min-height: 210px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(30, 49, 78, 0.12);
  color: var(--blue);
  cursor: pointer;
  scroll-snap-align: start;
  text-align: center;
  text-transform: uppercase;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.game-card:hover,
.game-card.active {
  transform: translateY(-3px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.18);
}

.game-card strong {
  align-self: center;
  overflow-wrap: anywhere;
  font-size: 1.05rem;
  line-height: 1.18;
}

.game-art {
  position: relative;
  display: grid;
  place-items: center;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 58px);
  gap: 8px;
  transform: rotate(-2deg);
}

.mini-candle-grid {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 9px;
  padding: 12px;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #edf5ff);
  box-shadow: inset 0 0 0 1px #dbe8f7, 0 9px 12px rgba(34, 43, 64, 0.16);
}

.mini-candle-grid span {
  position: relative;
  display: block;
  width: 28px;
  height: 42px;
  background: transparent;
}

.mini-candle-grid span::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 18px;
  height: 28px;
  border-radius: 56% 44% 58% 42% / 64% 50% 50% 36%;
  background: #d8e3f2;
  opacity: 0.68;
  transform: rotate(7deg);
}

.mini-candle-grid span:nth-child(2)::before,
.mini-candle-grid span:nth-child(4)::before {
  background: radial-gradient(circle at 40% 34%, #fff7a8 0 18%, #ffc247 44%, #ff7a1f 100%);
  box-shadow: 0 0 12px rgba(255, 184, 46, 0.58);
  opacity: 1;
}

.tile,
.math-tile,
.shape {
  display: grid;
  place-items: center;
  border-radius: 8px;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 9px 12px rgba(34, 43, 64, 0.22);
  font-weight: 900;
}

.tile {
  width: 58px;
  height: 58px;
  color: #fff;
  background: linear-gradient(145deg, #34a5ff, #015bd7);
  font-size: 1.55rem;
}

.tile.light {
  color: #135cc2;
  background: linear-gradient(145deg, #fff, #eee8dc);
}

.number-stack {
  position: relative;
  width: 134px;
  height: 120px;
}

.number-stack .tile {
  position: absolute;
  font-size: 2rem;
}

.number-stack .tile:nth-child(1) {
  left: 42px;
  top: 2px;
  background: linear-gradient(145deg, #86df43, #27951d);
}

.number-stack .tile:nth-child(2) {
  left: 0;
  top: 54px;
  color: #333;
  background: linear-gradient(145deg, #ffe23d, #ffb400);
}

.number-stack .tile:nth-child(3) {
  right: 0;
  top: 62px;
  background: linear-gradient(145deg, #ff58ba, #d5147b);
}

.majority-stack {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 8px;
  padding: 11px;
  border: 1px solid #dbe8f7;
  border-radius: 10px;
  background: linear-gradient(145deg, #fff, #edf5ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 9px 14px rgba(34, 43, 64, 0.16);
}

.majority-stack span {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(145deg, #1e8cff, #075eea);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.24), 0 6px 10px rgba(7, 94, 234, 0.2);
}

.majority-stack span:nth-child(1),
.majority-stack span:nth-child(3),
.majority-stack span:nth-child(4),
.majority-stack span:nth-child(5),
.majority-stack span:nth-child(7) {
  background: linear-gradient(145deg, #1e8cff, #075eea);
}

.majority-stack span:nth-child(2),
.majority-stack span:nth-child(6),
.majority-stack span:nth-child(8),
.majority-stack span:nth-child(9) {
  background: linear-gradient(145deg, #f05aa5, #c9006d);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.22), 0 6px 10px rgba(186, 0, 101, 0.18);
}

.cube-stack {
  display: grid;
  grid-template-columns: repeat(3, 42px);
  gap: 6px;
  transform: rotate(-28deg) skew(8deg);
}

.cube-stack span {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: linear-gradient(145deg, #ffd32d, #ff7b00);
  box-shadow: 0 9px 10px rgba(91, 59, 0, 0.22);
}

.math-grid {
  display: grid;
  grid-template-columns: repeat(2, 54px);
  gap: 8px;
}

.math-tile {
  width: 54px;
  height: 54px;
  color: #443a34;
  background: linear-gradient(145deg, #fff, #ebe5d9);
  font-size: 2rem;
}

.math-tile.answer {
  color: #fff;
  background: linear-gradient(145deg, #c264ff, #7d21dc);
}

.shape-board {
  display: grid;
  grid-template-columns: repeat(2, 58px);
  gap: 14px;
}

.shape {
  width: 52px;
  height: 52px;
}

.shape.square { background: linear-gradient(145deg, #36a6ff, #075eea); }
.shape.triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #77cf32; }
.shape.hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #a84be6; }
.shape.star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 69%, 21% 91%, 32% 56%, 2% 35%, 39% 35%); background: #ff3d48; }

.more-card {
  color: #fff;
  background: linear-gradient(180deg, #1388ff, var(--blue));
}

.more-card .game-art {
  font-size: 5rem;
}

.game-stage {
  height: clamp(760px, 74vw, 960px);
  min-height: 760px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 8px #f9fbfe, inset 0 0 0 10px #eef3fa;
  overflow: hidden;
}

.game-root {
  height: 100%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 25% 20%, rgba(51, 160, 255, 0.08), transparent 24%),
    linear-gradient(180deg, #fff, #fbfdff);
  overflow: hidden;
}

.module-screen {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  height: 100%;
  min-height: 0;
  padding: clamp(22px, 4vw, 42px);
  overflow: hidden;
}

.module-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.module-toolbar h2 {
  margin: 0 0 7px;
  color: var(--blue);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: 0;
}

.module-toolbar p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.play-button {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius);
  padding: 12px 18px;
  color: #fff;
  background: linear-gradient(180deg, #238dff, var(--blue));
  box-shadow: 0 8px 16px rgba(7, 94, 234, 0.25);
  cursor: pointer;
  font-weight: 800;
  text-transform: uppercase;
}

.placeholder-board {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px dashed #b9c9e2;
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.placeholder-board strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: clamp(1.3rem, 3vw, 2rem);
}

.candle-game {
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.pattern-logic {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  height: 100%;
  min-height: 0;
  padding: clamp(14px, 2.8vw, 30px);
  overflow: hidden;
}

.pattern-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.pattern-toolbar h2 {
  margin: 0 0 7px;
  color: var(--blue);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: 0;
}

.pattern-intro {
  margin: 0;
  color: var(--muted);
  max-width: 58ch;
  line-height: 1.55;
}

.pattern-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 8px;
}

.pattern-status div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.pattern-status .status-label {
  color: var(--muted);
}

.pattern-status strong {
  flex: 0 0 auto;
  font-size: 1.06rem;
  color: var(--blue);
}

.pattern-board {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.pattern-board.is-preview {
  grid-template-rows: minmax(0, 1fr);
  cursor: pointer;
}

.pattern-board.is-preview-exiting {
  opacity: 0;
  transition: opacity 180ms ease;
}

.pattern-board.is-preview .pattern-sequence {
  align-self: center;
  animation: patternPreviewFade 3.8s ease-in-out infinite;
}

.pattern-board.is-preview .pattern-options {
  display: none;
}

.pattern-sequence,
.pattern-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.pattern-sequence {
  align-items: stretch;
}

.pattern-options {
  align-self: stretch;
  align-items: stretch;
}

.pattern-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.08);
}

.pattern-preview-card {
  animation: patternPreviewCard 3.8s ease-in-out infinite;
}

.pattern-preview-card.is-changing {
  animation: patternPreviewFrameIn 420ms ease, patternPreviewCard 3.8s ease-in-out infinite;
}

.pattern-preview-card:nth-child(2) {
  animation-delay: 0.18s;
}

.pattern-preview-card:nth-child(3) {
  animation-delay: 0.36s;
}

.pattern-preview-card .pattern-cell-active {
  animation: patternPreviewCell 3.8s ease-in-out infinite;
  transition: background-color 240ms ease, transform 240ms ease, filter 240ms ease;
}

.pattern-preview-card:nth-child(2) .pattern-cell-active {
  animation-delay: 0.18s;
}

.pattern-preview-card:nth-child(3) .pattern-cell-active {
  animation-delay: 0.36s;
}

.pattern-card-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  text-align: center;
}

.pattern-tile {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-self: center;
  justify-self: center;
  gap: 5px;
  width: min(100%, 118px);
  padding: 7px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #edf5ff);
}

.pattern-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  background: #eef5ff;
}

.pattern-cell-active {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.pattern-missing {
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: min(100%, 118px);
  aspect-ratio: 1;
  border: 1px dashed #b9c9e2;
  border-radius: 8px;
  background: #f4f8ff;
  color: var(--muted);
  font-size: 1.75rem;
  font-weight: 900;
}

.pattern-placeholder {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 168px;
  border: 1px dashed #b9c9e2;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.pattern-feedback {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--blue-dark);
  font-weight: 800;
  display: grid;
  place-items: center;
  text-align: center;
}

.pattern-option {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.pattern-option:hover {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.pattern-option:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.option-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
}

.option-correct {
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #d9f7e3);
}

.option-wrong {
  border-color: #ff6262;
  background: #fff0f0;
}

@keyframes patternPreviewFade {
  0%,
  100% {
    opacity: 0.86;
  }

  50% {
    opacity: 1;
  }
}

@keyframes patternPreviewCard {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-2px) rotate(0.8deg);
  }
}

@keyframes patternPreviewFrameIn {
  0% {
    opacity: 0.72;
    transform: translateY(3px) scale(0.985);
  }

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

@keyframes patternPreviewCell {
  0%,
  100% {
    filter: brightness(0.96);
    transform: scale(0.96);
  }

  50% {
    filter: brightness(1.08);
    transform: scale(1);
  }
}

@media (max-width: 900px) {
  .pattern-status {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 620px) {
  .pattern-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .pattern-toolbar .play-button {
    width: 100%;
  }

  .pattern-sequence,
  .pattern-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pattern-card,
  .pattern-option {
    padding: 8px;
  }

  .pattern-tile,
  .pattern-missing {
    width: min(100%, 96px);
  }
}

.candle-toolbar {
  align-items: center;
}

.candle-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 8px;
}

.candle-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.candle-stats strong {
  color: var(--blue);
  font-size: 1.12rem;
}

.candle-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.candle-actions {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.candle-retry-button {
  min-width: 118px;
}

.candle-retry-button[hidden] {
  display: none;
}

.candle-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-size, 3), var(--candle-tile-size, 84px));
  grid-template-rows: repeat(var(--grid-size, 3), var(--candle-tile-size, 84px));
  justify-content: center;
  align-content: center;
  gap: var(--candle-gap, 10px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.8)),
    #fbfdff;
  overflow: hidden;
}

.candle-board.is-startable .candle-tile {
  pointer-events: none;
}

.candle-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--candle-tile-size, 84px);
  height: var(--candle-tile-size, 84px);
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #edf5ff);
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.12);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.candle-tile:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.candle-tile:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: #78aafd;
}

.candle-tile:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.candle-flame-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 68%;
  height: 68%;
  transform-origin: 50% 62%;
  animation: candleFlameIdle 3.8s ease-in-out infinite;
  animation-delay: var(--candle-idle-delay, 0s);
}

.candle-flame-icon {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.candle-flame-idle,
.candle-flame-shape,
.candle-flame-glow,
.candle-flame-core {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 180ms ease-in-out, transform 180ms ease-in-out, fill 180ms ease-in-out;
}

.candle-flame-idle {
  fill: #d8e3f2;
  opacity: 0.62;
  animation: candleFlameIdleGlow 3.8s ease-in-out infinite;
  animation-delay: var(--candle-idle-delay, 0s);
}

.candle-flame-shape {
  opacity: 0;
}

.candle-flame-glow {
  fill: #ffc247;
  opacity: 0;
}

.candle-flame-core {
  fill: #ffffff;
  opacity: 0;
}

.candle-sparkle {
  position: absolute;
  right: 16%;
  top: 14%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd66e;
  opacity: 0;
  transform: scale(0.4);
  box-shadow: -12px 10px 0 -2px #fff2a8, 8px 18px 0 -3px #ffc247;
}

.candle-tile.is-glowing {
  border-color: #ffc247;
  background: radial-gradient(circle at 50% 46%, rgba(255, 194, 71, 0.28), transparent 42%), #fffaf0;
  box-shadow: 0 0 0 3px rgba(255, 194, 71, 0.22), 0 14px 24px rgba(176, 107, 0, 0.18);
}

.candle-tile.is-glowing .candle-flame-wrap {
  animation: candleFlamePlayback 180ms ease-in-out;
}

.candle-tile.is-glowing .candle-flame-shape,
.candle-tile.is-correct .candle-flame-shape {
  opacity: 1;
}

.candle-tile.is-glowing .candle-flame-idle,
.candle-tile.is-correct .candle-flame-idle {
  opacity: 0;
}

.candle-tile.is-glowing .candle-flame-glow,
.candle-tile.is-correct .candle-flame-glow {
  opacity: 0.42;
}

.candle-tile.is-glowing .candle-flame-core,
.candle-tile.is-correct .candle-flame-core {
  opacity: 0.72;
}

.candle-tile.is-correct {
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #ffffff);
  box-shadow: 0 0 0 3px rgba(38, 166, 91, 0.16), 0 12px 20px rgba(26, 119, 62, 0.12);
}

.candle-tile.is-correct .candle-flame-wrap {
  animation: candleFlameCorrect 240ms ease-in-out;
}

.candle-tile.is-correct .candle-sparkle {
  animation: candleSparkle 420ms ease-out forwards;
}

.candle-tile.is-wrong {
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 3px rgba(255, 98, 98, 0.2), 0 12px 20px rgba(157, 38, 38, 0.12);
  animation: candleFlameWrongTile 220ms ease-in-out;
}

.candle-tile.is-wrong .candle-flame-idle {
  fill: #ff6b6b;
  opacity: 1;
}

.candle-tile.is-wrong .candle-flame-shape {
  opacity: 0;
}

.candle-tile.is-wrong .candle-flame-glow {
  fill: #ff6b6b;
  opacity: 0.22;
}

.number-master-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.number-master-toolbar {
  align-items: center;
}

.number-master-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.number-master-controls .play-button {
  min-width: 118px;
}

.number-secondary-button {
  color: var(--blue);
  border: 1px solid #bad2f7;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
}

.play-button:disabled,
.number-secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  box-shadow: none;
}

.number-master-stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(82px, 1fr));
  gap: 8px;
}

.number-master-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.number-master-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.08rem;
}

.number-master-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.number-master-board {
  display: grid;
  grid-template-columns: repeat(var(--number-grid-size, 3), var(--number-tile-size, 84px));
  grid-template-rows: repeat(var(--number-grid-size, 3), var(--number-tile-size, 84px));
  justify-content: center;
  align-content: center;
  gap: var(--number-gap, 10px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.number-master-board.is-previewing {
  cursor: pointer;
}

.number-master-tile {
  display: grid;
  place-items: center;
  width: var(--number-tile-size, 84px);
  height: var(--number-tile-size, 84px);
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #edf5ff);
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.12);
  color: var(--blue);
  cursor: pointer;
  font-weight: 900;
  font-size: var(--number-font-size, 2rem);
  line-height: 1;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.number-master-tile:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.number-master-board.is-previewing .number-master-tile {
  pointer-events: none;
}

.number-master-tile:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.number-master-tile:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.number-master-tile.has-number {
  color: #fff;
  border-color: #238dff;
  background: linear-gradient(145deg, #33a0ff, var(--blue));
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.45), 0 12px 22px rgba(7, 94, 234, 0.25);
}

.number-master-board.is-previewing .number-master-tile.is-preview-letter {
  animation: alphabetMasterPreviewLetter 760ms ease-in-out both;
}

.number-master-tile.is-found {
  color: #0e6a2c;
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #d9f7e3);
  box-shadow: 0 8px 16px rgba(26, 119, 62, 0.12);
}

.number-master-tile.is-wrong {
  color: #a42626;
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 3px rgba(255, 98, 98, 0.2), 0 12px 20px rgba(157, 38, 38, 0.12);
}

.tile-memory-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.tile-memory-toolbar {
  align-items: center;
}

.tile-memory-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tile-memory-controls .play-button {
  min-width: 118px;
}

.tile-memory-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 8px;
}

.tile-memory-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.tile-memory-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.tile-memory-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.tile-memory-board {
  display: grid;
  grid-template-columns: repeat(var(--tile-memory-grid-size, 3), var(--tile-memory-tile-size, 84px));
  grid-template-rows: repeat(var(--tile-memory-grid-size, 3), var(--tile-memory-tile-size, 84px));
  justify-content: center;
  align-content: center;
  gap: var(--tile-memory-gap, 10px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.tile-memory-board.is-previewing {
  cursor: pointer;
}

.tile-memory-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tile-memory-tile-size, 84px);
  height: var(--tile-memory-tile-size, 84px);
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #edf5ff);
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.12);
  cursor: pointer;
  overflow: hidden;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.tile-memory-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.32;
  pointer-events: none;
  transition: opacity 150ms ease, filter 150ms ease;
}

.tile-memory-tile.pattern-brick::before {
  background:
    linear-gradient(rgba(7, 94, 234, 0.055) 1px, transparent 1px) 0 0 / 100% 16px,
    linear-gradient(90deg, rgba(7, 94, 234, 0.045) 1px, transparent 1px) 0 0 / 28px 16px,
    linear-gradient(90deg, transparent 14px, rgba(7, 94, 234, 0.035) 14px 15px, transparent 15px) 0 8px / 28px 16px;
}

.tile-memory-tile.pattern-hexagon::before {
  background:
    radial-gradient(circle at 50% 0, rgba(7, 94, 234, 0.05) 0 2px, transparent 2px),
    linear-gradient(30deg, transparent 42%, rgba(7, 94, 234, 0.045) 43% 45%, transparent 46%),
    linear-gradient(150deg, transparent 42%, rgba(7, 94, 234, 0.045) 43% 45%, transparent 46%);
  background-size: 28px 24px;
}

.tile-memory-tile.pattern-cube::before {
  background:
    linear-gradient(30deg, rgba(7, 94, 234, 0.05) 12%, transparent 12% 88%, rgba(7, 94, 234, 0.045) 88%),
    linear-gradient(150deg, rgba(7, 94, 234, 0.04) 12%, transparent 12% 88%, rgba(7, 94, 234, 0.04) 88%),
    linear-gradient(90deg, transparent 48%, rgba(7, 94, 234, 0.04) 49% 51%, transparent 52%);
  background-size: 30px 30px;
}

.tile-memory-tile.pattern-weave::before {
  background:
    linear-gradient(90deg, rgba(7, 94, 234, 0.04) 25%, transparent 25% 75%, rgba(7, 94, 234, 0.04) 75%),
    linear-gradient(rgba(7, 94, 234, 0.035) 25%, transparent 25% 75%, rgba(7, 94, 234, 0.035) 75%);
  background-size: 22px 22px;
}

.tile-memory-tile.pattern-diagonal::before {
  background: repeating-linear-gradient(135deg, rgba(7, 94, 234, 0.055) 0 2px, transparent 2px 12px);
}

.tile-memory-tile.pattern-parquet::before {
  background:
    linear-gradient(45deg, rgba(7, 94, 234, 0.045) 25%, transparent 25% 75%, rgba(7, 94, 234, 0.045) 75%),
    linear-gradient(-45deg, rgba(7, 94, 234, 0.035) 25%, transparent 25% 75%, rgba(7, 94, 234, 0.035) 75%);
  background-size: 24px 24px;
}

.tile-memory-tile:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.tile-memory-board.is-previewing .tile-memory-tile {
  pointer-events: none;
}

.tile-memory-tile:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.tile-memory-tile:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.tile-memory-tile.is-pattern {
  border-color: #238dff;
  background: radial-gradient(circle at 50% 45%, rgba(51, 160, 255, 0.52), rgba(7, 94, 234, 0.12) 58%, #fff 100%);
  box-shadow: 0 0 0 3px rgba(7, 94, 234, 0.16), 0 12px 22px rgba(7, 94, 234, 0.2);
}

.tile-memory-tile.is-pattern::before,
.tile-memory-tile.is-selected::before,
.tile-memory-tile.is-correct::before {
  opacity: 0.48;
  filter: contrast(1.08);
}

.tile-memory-tile.is-selected {
  border-color: var(--blue);
  background: linear-gradient(145deg, #dff0ff, #ffffff);
  box-shadow: inset 0 0 0 3px rgba(7, 94, 234, 0.14), 0 10px 18px rgba(7, 94, 234, 0.14);
}

.tile-memory-tile.is-correct {
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #d9f7e3);
  box-shadow: 0 0 0 3px rgba(38, 166, 91, 0.16), 0 10px 18px rgba(26, 119, 62, 0.12);
}

.tile-memory-tile.is-wrong {
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 3px rgba(255, 98, 98, 0.2), 0 12px 20px rgba(157, 38, 38, 0.12);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.quick-math-game {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.quick-math-toolbar {
  align-items: center;
}

.quick-math-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.quick-math-controls .play-button {
  min-width: 118px;
}

.quick-math-answer-row .play-button:disabled,
.quick-math-difficulty button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  box-shadow: none;
}

.quick-math-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 8px;
}

.quick-math-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.quick-math-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.quick-math-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(12px, 2vw, 18px);
  min-height: 0;
  padding: clamp(14px, 2.6vw, 28px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.9)),
    #fbfdff;
  overflow: hidden;
}

.quick-math-difficulty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quick-math-difficulty button {
  min-width: 0;
  border: 1px solid #cfe0f7;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--blue);
  background: #fff;
  cursor: pointer;
  font-weight: 900;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.quick-math-difficulty button.active,
.quick-math-difficulty button:hover:not(:disabled) {
  color: #fff;
  border-color: var(--blue);
  background: linear-gradient(180deg, #238dff, var(--blue));
  transform: translateY(-1px);
}

.quick-math-question-wrap {
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(10px, 2vw, 16px);
  min-height: 0;
  text-align: center;
}

.quick-math-status {
  min-height: 24px;
  margin: 0;
  color: #344154;
  font-weight: 800;
}

.quick-math-question {
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  min-height: clamp(110px, 22vw, 190px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(33, 57, 94, 0.1);
  color: var(--blue);
  font-size: clamp(2.8rem, 8vw, 5.8rem);
  font-weight: 900;
  line-height: 1;
}

.quick-math-pop {
  animation: quickMathPop 180ms ease;
}

.quick-math-preview-pop {
  animation: quickMathPreview 320ms ease;
}

.quick-math-answer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: min(100%, 520px);
  justify-self: center;
}

.quick-math-answer-row input {
  min-width: 0;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
}

.quick-math-answer-row input:focus {
  outline: 3px solid rgba(7, 94, 234, 0.24);
  border-color: #78aafd;
}

.quick-math-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #cfe0f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.quick-math-result strong {
  color: var(--blue);
}

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

.majority-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.majority-toolbar {
  align-items: center;
}

.majority-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 8px;
}

.majority-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.majority-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.majority-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.majority-board {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.majority-grid {
  display: grid;
  grid-template-columns: repeat(var(--majority-grid-size, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--majority-grid-size, 3), minmax(0, 1fr));
  justify-self: center;
  align-self: center;
  gap: 10px;
  width: min(100%, var(--majority-grid-max, 430px), calc(100vh - 360px));
  max-height: min(100%, var(--majority-grid-max, 430px));
  aspect-ratio: 1;
}

.majority-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--majority-cell-border, #cbdcf2);
  border-radius: 8px;
  background: var(--majority-cell-bg, linear-gradient(145deg, #fff, #edf5ff));
  box-shadow: var(--majority-cell-shadow, 0 8px 16px rgba(37, 53, 82, 0.12));
  color: var(--majority-cell-text, var(--blue));
  font-size: clamp(1.65rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.majority-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--majority-cell-shadow, 0 8px 16px rgba(37, 53, 82, 0.12)), 0 0 0 3px rgba(7, 94, 234, 0.14);
}

.majority-cell:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.majority-cell.is-correct,
.majority-cell.is-answer {
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #d9f7e3);
  box-shadow: 0 0 0 3px rgba(38, 166, 91, 0.16), 0 10px 18px rgba(26, 119, 62, 0.12);
  animation: majorityCorrect 180ms ease;
}

.majority-cell.is-wrong {
  color: #a42626;
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 3px rgba(255, 98, 98, 0.2), 0 12px 20px rgba(157, 38, 38, 0.12);
  animation: majorityWrong 220ms ease;
}

.majority-grid.is-preview {
  width: min(100%, 360px);
  pointer-events: none;
}

.majority-preview-cell {
  display: block;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(7, 94, 234, 0.14);
  border-radius: 8px;
  background: linear-gradient(145deg, #1e8cff, #075eea);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.22), 0 8px 16px rgba(37, 53, 82, 0.12);
  animation: majorityPreviewTile 3.8s ease-in-out infinite;
  animation-delay: var(--majority-preview-delay, 0s);
}

.majority-preview-cell:nth-child(2),
.majority-preview-cell:nth-child(5),
.majority-preview-cell:nth-child(8) {
  animation-delay: calc(var(--majority-preview-delay, 0s) - 1.15s);
}

.majority-preview-cell:nth-child(4),
.majority-preview-cell:nth-child(6) {
  animation-delay: calc(var(--majority-preview-delay, 0s) - 2.1s);
}

.majority-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.majority-celebration.show {
  opacity: 1;
}

.majority-celebration span {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffc247;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  animation: majorityStar 760ms ease forwards;
}

.majority-celebration span:nth-child(1) {
  left: 22%;
  top: 18%;
}

.majority-celebration span:nth-child(2) {
  left: 68%;
  top: 18%;
  animation-delay: 60ms;
}

.majority-celebration span:nth-child(3) {
  left: 30%;
  top: 70%;
  animation-delay: 120ms;
}

.majority-celebration span:nth-child(4) {
  left: 76%;
  top: 64%;
  animation-delay: 180ms;
}

.majority-celebration span:nth-child(5) {
  left: 50%;
  top: 10%;
  animation-delay: 90ms;
}

.shape-match-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.shape-match-toolbar {
  align-items: center;
}

.shape-match-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 8px;
}

.shape-match-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.shape-match-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.shape-match-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.shape-match-board {
  position: relative;
  display: grid;
  grid-template-rows: minmax(150px, 0.78fr) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.shape-match-board.is-preview {
  display: block;
  cursor: pointer;
}

.shape-match-board.is-preview .shape-match-target-panel,
.shape-match-board.is-preview .shape-match-options {
  display: none;
}

.shape-match-preview {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(76%, 520px);
  height: min(72%, 360px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.shape-match-preview-item {
  position: absolute;
  left: var(--preview-x, 50%);
  top: var(--preview-y, 50%);
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(var(--preview-scale, 1));
  transition: transform 620ms ease-in-out, opacity 360ms ease;
}

.shape-match-preview-item .shape-match-figure {
  width: 72px;
  height: 72px;
}

.shape-match-target-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 12px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.08);
}

.shape-match-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.shape-match-target,
.shape-match-option {
  display: grid;
  place-items: center;
  min-height: 0;
}

.shape-match-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.shape-match-option {
  min-width: 0;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.shape-match-option:hover {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.shape-match-option:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.shape-match-option.is-wrong {
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 3px rgba(255, 98, 98, 0.2), 0 12px 20px rgba(157, 38, 38, 0.12);
}

.shape-match-figure {
  display: block;
  width: 76px;
  height: 76px;
  background: var(--shape-color);
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.16);
  transform: var(--shape-transform);
  transform-origin: center;
}

.shape-match-target .shape-match-figure {
  width: 104px;
  height: 104px;
}

.shape-match-figure.size-small {
  width: 62px;
  height: 62px;
}

.shape-match-figure.size-large {
  width: 88px;
  height: 88px;
}

.shape-match-target .shape-match-figure.size-small {
  width: 88px;
  height: 88px;
}

.shape-match-target .shape-match-figure.size-large {
  width: 118px;
  height: 118px;
}

.shape-match-figure.is-outline {
  border: 8px solid var(--shape-color);
  background: #fff;
}

.shape-square {
  border-radius: 8px;
}

.shape-circle {
  border-radius: 50%;
}

.shape-triangle {
  clip-path: polygon(50% 4%, 96% 94%, 4% 94%);
}

.shape-diamond {
  border-radius: 8px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.shape-hexagon {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

.shape-star {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.color-snap-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.color-snap-toolbar {
  align-items: center;
}

.color-snap-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 8px;
}

.color-snap-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.color-snap-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.color-snap-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.color-snap-board {
  position: relative;
  display: grid;
  grid-template-rows: minmax(150px, 0.72fr) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.color-snap-board.is-preview {
  grid-template-rows: 1fr;
  cursor: pointer;
}

.color-snap-board.is-preview .color-snap-target-panel {
  display: none;
}

.color-snap-board.is-preview .color-snap-options {
  align-self: center;
  width: min(100%, 760px);
  min-height: clamp(160px, 34vw, 260px);
  margin: 0 auto;
  align-items: stretch;
}

.color-snap-target-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 12px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.08);
}

.color-snap-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.color-snap-target {
  justify-self: center;
  align-self: center;
  width: min(100%, 320px);
  height: min(100%, 106px);
  min-height: 72px;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: var(--snap-target);
  box-shadow: 0 12px 24px rgba(37, 53, 82, 0.14);
}

.color-snap-options {
  display: grid;
  grid-template-columns: repeat(var(--color-snap-choice-count, 6), minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.color-snap-option {
  min-width: 0;
  min-height: 0;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: var(--snap-color);
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.14);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.color-snap-preview-bar {
  pointer-events: none;
  transform: translateY(0) scale(1);
  transition: transform 360ms ease, border-color 360ms ease, box-shadow 360ms ease, filter 360ms ease;
}

.color-snap-preview-bar.is-preview-active {
  transform: translateY(-8px) scale(1.035);
  border-color: rgba(7, 94, 234, 0.24);
  filter: saturate(1.08) brightness(1.04);
  box-shadow: 0 18px 30px rgba(7, 94, 234, 0.18), 0 0 0 5px rgba(255, 255, 255, 0.92);
}

.color-snap-option:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.color-snap-option:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.color-snap-option:disabled {
  cursor: not-allowed;
}

.color-snap-option.is-correct,
.color-snap-option.is-answer {
  border-color: #9addb0;
  box-shadow: 0 0 0 4px rgba(38, 166, 91, 0.24), 0 12px 20px rgba(26, 119, 62, 0.18);
  animation: colorSnapCorrect 180ms ease;
}

.color-snap-option.is-wrong {
  border-color: #ff6262;
  box-shadow: 0 0 0 4px rgba(255, 98, 98, 0.26), 0 12px 20px rgba(157, 38, 38, 0.14);
  animation: colorSnapWrong 220ms ease;
}

.color-snap-fade {
  animation: colorSnapFade 180ms ease;
}

.color-snap-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.color-snap-celebration.show {
  opacity: 1;
}

.reaction-run-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.reaction-run-toolbar {
  align-items: center;
}

.reaction-run-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  gap: 8px;
}

.reaction-run-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.reaction-run-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.reaction-run-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.reaction-run-board {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(10px, 2vw, 16px);
  min-height: 0;
  height: 100%;
  padding: clamp(12px, 2.4vw, 24px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.reaction-run-signal {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  gap: 8px;
  width: min(100%, 520px);
  min-height: clamp(180px, 36vw, 300px);
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #eaf4ff);
  box-shadow: 0 12px 24px rgba(37, 53, 82, 0.14);
  color: var(--blue);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.reaction-run-signal span {
  font-size: clamp(2.6rem, 9vw, 5.4rem);
  font-weight: 900;
  line-height: 1;
}

.reaction-run-signal small {
  color: var(--muted);
  font-weight: 800;
}

.reaction-run-signal:hover {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 16px 28px rgba(7, 94, 234, 0.16);
}

.reaction-run-signal:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.reaction-run-signal.is-go {
  position: absolute;
  left: var(--reaction-target-left, 50%);
  top: var(--reaction-target-top, 50%);
  width: min(45%, 260px);
  min-height: clamp(88px, 16vw, 150px);
  color: #0e6a2c;
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #c8f4d6);
  box-shadow: 0 0 0 4px rgba(38, 166, 91, 0.18), 0 16px 28px rgba(26, 119, 62, 0.16);
  animation: reactionRunGoTarget 520ms ease both, reactionRunGoPulse 940ms ease-in-out infinite;
}

.reaction-run-signal.is-go span {
  font-size: clamp(1.8rem, 5.6vw, 3.2rem);
}

.reaction-run-signal.is-success {
  color: #0e6a2c;
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #d9f7e3);
  animation: reactionRunCorrect 180ms ease;
}

.reaction-run-signal.is-early,
.reaction-run-signal.is-missed {
  color: #a42626;
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 4px rgba(255, 98, 98, 0.2), 0 14px 24px rgba(157, 38, 38, 0.12);
  animation: reactionRunWrong 220ms ease;
}

.reaction-run-signal.is-fake {
  border-color: #ffc247;
  box-shadow: 0 0 0 4px rgba(255, 194, 71, 0.22), 0 14px 24px rgba(37, 53, 82, 0.12);
}

.reaction-run-result {
  grid-row: 2;
  z-index: 1;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: #344154;
  font-weight: 800;
  text-align: center;
}

.reaction-run-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.reaction-run-celebration.show {
  opacity: 1;
}

.reaction-run-celebration span {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffc247;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  animation: reactionRunStar 760ms ease forwards;
}

.reaction-run-celebration span:nth-child(1) {
  left: 22%;
  top: 18%;
}

.reaction-run-celebration span:nth-child(2) {
  left: 68%;
  top: 18%;
  animation-delay: 60ms;
}

.reaction-run-celebration span:nth-child(3) {
  left: 30%;
  top: 70%;
  animation-delay: 120ms;
}

.reaction-run-celebration span:nth-child(4) {
  left: 73%;
  top: 68%;
  animation-delay: 180ms;
}

.reaction-run-celebration span:nth-child(5) {
  left: 49%;
  top: 46%;
  animation-delay: 90ms;
}

.maze-mind-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.maze-mind-toolbar {
  align-items: center;
}

.maze-mind-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.maze-mind-controls .play-button {
  min-width: 112px;
}

.maze-mind-secondary {
  color: var(--blue);
  border: 1px solid #bad2f7;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
}

.maze-mind-secondary:disabled,
.maze-mind-pad button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  box-shadow: none;
}

.maze-mind-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(82px, 1fr));
  gap: 8px;
}

.maze-mind-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.maze-mind-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.maze-mind-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.maze-mind-board {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 2vw, 16px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.maze-mind-grid {
  display: grid;
  grid-template-columns: repeat(var(--maze-mind-size, 5), minmax(0, 1fr));
  grid-template-rows: repeat(var(--maze-mind-size, 5), minmax(0, 1fr));
  align-self: center;
  justify-self: center;
  gap: clamp(4px, 1vw, 8px);
  width: min(100%, 500px);
  max-height: 100%;
  aspect-ratio: 1;
}

.maze-mind-grid.is-preview {
  cursor: pointer;
  transition: opacity 220ms ease, transform 220ms ease;
}

.maze-mind-grid.is-preview-fading {
  opacity: 0;
  transform: translateY(4px) scale(0.985);
}

.maze-mind-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  font-size: clamp(0.48rem, 1.35vw, 0.72rem);
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.maze-mind-cell.is-wall {
  border-color: #b8d5f8;
  background: linear-gradient(145deg, #dcecff, #bcd8f8);
  box-shadow: inset 0 0 0 2px rgba(7, 94, 234, 0.08);
}

.maze-mind-cell.is-temp-blocker {
  border-color: #8fbff8;
  background: linear-gradient(145deg, #d8ebff, #9fc9f5);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.55), 0 8px 14px rgba(7, 94, 234, 0.14);
}

.maze-mind-cell.is-new-blocker {
  animation: mazeMindBlockerIn 250ms ease both;
}

.maze-mind-cell.is-start {
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #d9f7e3);
  color: #0e6a2c;
}

.maze-mind-cell.is-finish {
  border-color: #ffc247;
  background: linear-gradient(145deg, #fff9ea, #ffe4a8);
  color: #9b6100;
}

.maze-mind-cell.has-player::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: linear-gradient(180deg, #238dff, var(--blue));
  box-shadow: 0 7px 14px rgba(7, 94, 234, 0.26);
  transition: transform 140ms ease;
}

.maze-mind-grid.is-complete .maze-mind-cell.is-finish {
  border-color: #9addb0;
  box-shadow: 0 0 0 4px rgba(38, 166, 91, 0.18), 0 10px 18px rgba(26, 119, 62, 0.12);
  animation: mazeMindCorrect 180ms ease;
}

.maze-mind-grid.is-failed {
  animation: mazeMindWrong 220ms ease;
}

.maze-mind-pad {
  position: absolute;
  top: 50%;
  right: clamp(14px, 3vw, 32px);
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(22%, 148px);
  min-width: 96px;
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.maze-mind-pad.is-preview-hidden {
  visibility: hidden;
  pointer-events: none;
}

.maze-mind-pad button {
  min-width: 0;
  min-height: 0;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
  color: var(--blue);
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 900;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.maze-mind-pad button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.maze-mind-pad button:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.maze-mind-pad [data-move="up"] {
  grid-column: 2;
  grid-row: 1;
}

.maze-mind-pad [data-move="left"] {
  grid-column: 1;
  grid-row: 2;
}

.maze-mind-pad [data-move="down"] {
  grid-column: 2;
  grid-row: 3;
}

.maze-mind-pad [data-move="right"] {
  grid-column: 3;
  grid-row: 2;
}

.maze-mind-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.maze-mind-celebration.show {
  opacity: 1;
}

.maze-mind-celebration span {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffc247;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  animation: mazeMindStar 760ms ease forwards;
}

.maze-mind-celebration span:nth-child(1) {
  left: 22%;
  top: 18%;
}

.maze-mind-celebration span:nth-child(2) {
  left: 68%;
  top: 18%;
  animation-delay: 60ms;
}

.maze-mind-celebration span:nth-child(3) {
  left: 30%;
  top: 70%;
  animation-delay: 120ms;
}

.maze-mind-celebration span:nth-child(4) {
  left: 73%;
  top: 68%;
  animation-delay: 180ms;
}

.maze-mind-celebration span:nth-child(5) {
  left: 49%;
  top: 46%;
  animation-delay: 90ms;
}

.composition-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.composition-toolbar {
  align-items: center;
}

.composition-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 8px;
}

.composition-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.composition-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.composition-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.composition-board {
  position: relative;
  display: grid;
  grid-template-rows: minmax(150px, 0.74fr) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.composition-board.is-preview {
  grid-template-rows: 1fr;
}

.composition-board.is-preview .composition-target-panel {
  display: none;
}

.composition-board.is-preview .composition-options {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
}

.composition-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 560px);
  min-height: clamp(190px, 34vw, 300px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.08);
  overflow: hidden;
}

.composition-preview.is-fading {
  animation: compositionPreviewFadeOut 420ms ease forwards;
}

.composition-preview-piece,
.composition-preview-result {
  position: absolute;
  display: grid;
  place-items: center;
}

.composition-preview-piece {
  animation: compositionPreviewMerge 3200ms ease-in-out forwards;
}

.composition-preview-piece-a {
  --composition-preview-start: -96px;
}

.composition-preview-piece-b {
  --composition-preview-start: 96px;
}

.composition-preview-result {
  opacity: 0;
  transform: scale(0.9);
  animation: compositionPreviewResult 3200ms ease-in-out forwards;
}

.composition-preview .composition-symbol,
.composition-preview .composition-symbol-piece {
  width: clamp(58px, 10vw, 92px);
  height: clamp(58px, 10vw, 92px);
}

.composition-target-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 12px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.08);
}

.composition-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.composition-target {
  display: grid;
  place-items: center;
  min-height: 0;
}

.composition-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.composition-option {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.composition-option:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.composition-option:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.composition-option:disabled {
  cursor: not-allowed;
}

.composition-option.is-selected {
  border-color: var(--blue);
  background: linear-gradient(145deg, #eff7ff, #fff);
  box-shadow: 0 0 0 3px rgba(7, 94, 234, 0.14), 0 10px 18px rgba(7, 94, 234, 0.12);
}

.composition-option.is-correct,
.composition-option.is-answer {
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #d9f7e3);
  box-shadow: 0 0 0 4px rgba(38, 166, 91, 0.2), 0 12px 20px rgba(26, 119, 62, 0.14);
  animation: compositionCorrect 180ms ease;
}

.composition-option.is-wrong {
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 4px rgba(255, 98, 98, 0.22), 0 12px 20px rgba(157, 38, 38, 0.12);
  animation: compositionWrong 220ms ease;
}

.composition-symbol,
.composition-symbol-piece {
  position: relative;
  display: block;
  width: clamp(58px, 11vw, 92px);
  height: clamp(58px, 11vw, 92px);
}

.composition-target .composition-symbol {
  width: clamp(94px, 16vw, 138px);
  height: clamp(94px, 16vw, 138px);
}

.composition-composed {
  display: grid;
  place-items: center;
}

.composition-composed .composition-symbol-piece {
  grid-area: 1 / 1;
  width: 78%;
  height: 78%;
}

.composition-symbol-piece::before,
.composition-symbol-piece::after {
  content: "";
  position: absolute;
  inset: 14%;
  display: block;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
}

.composition-symbol-piece::after {
  display: none;
}

.composition-symbol-piece.symbol-circle::before {
  background: transparent;
  border: clamp(3px, 0.7vw, 5px) solid var(--blue);
  border-radius: 50%;
}

.composition-symbol-piece.symbol-square::before {
  background: transparent;
  border: clamp(3px, 0.7vw, 5px) solid var(--blue);
  border-radius: 8px;
}

.composition-symbol-piece.symbol-small-circle::before {
  inset: 28%;
  background: transparent;
  border: clamp(3px, 0.7vw, 5px) solid var(--blue);
  border-radius: 50%;
}

.composition-symbol-piece.symbol-small-square::before {
  inset: 30%;
  background: transparent;
  border: clamp(3px, 0.7vw, 5px) solid var(--blue);
  border-radius: 8px;
}

.composition-symbol-piece.symbol-plus::before,
.composition-symbol-piece.symbol-plus::after,
.composition-symbol-piece.symbol-cross::before,
.composition-symbol-piece.symbol-cross::after,
.composition-symbol-piece.symbol-horizontal::before,
.composition-symbol-piece.symbol-vertical::before {
  inset: auto;
  left: 18%;
  top: 43%;
  width: 64%;
  height: 14%;
  border-radius: 999px;
  background: var(--blue);
}

.composition-symbol-piece.symbol-plus::after,
.composition-symbol-piece.symbol-vertical::before {
  left: 43%;
  top: 18%;
  width: 14%;
  height: 64%;
}

.composition-symbol-piece.symbol-plus::after,
.composition-symbol-piece.symbol-cross::after {
  display: block;
}

.composition-symbol-piece.symbol-cross::before {
  transform: rotate(45deg);
}

.composition-symbol-piece.symbol-cross::after {
  transform: rotate(-45deg);
}

.composition-symbol-piece.symbol-horizontal::after,
.composition-symbol-piece.symbol-vertical::after {
  display: none;
}

.composition-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.composition-celebration.show {
  opacity: 1;
}

.composition-celebration span {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffc247;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  animation: compositionStar 760ms ease forwards;
}

.composition-celebration span:nth-child(1) {
  left: 22%;
  top: 18%;
}

.composition-celebration span:nth-child(2) {
  left: 68%;
  top: 18%;
  animation-delay: 60ms;
}

.composition-celebration span:nth-child(3) {
  left: 30%;
  top: 70%;
  animation-delay: 120ms;
}

.composition-celebration span:nth-child(4) {
  left: 73%;
  top: 68%;
  animation-delay: 180ms;
}

.composition-celebration span:nth-child(5) {
  left: 49%;
  top: 46%;
  animation-delay: 90ms;
}

.mirror-match-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.mirror-match-toolbar {
  align-items: center;
}

.mirror-match-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 8px;
}

.mirror-match-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.mirror-match-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.mirror-match-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.mirror-match-board {
  position: relative;
  display: grid;
  grid-template-rows: minmax(150px, 0.74fr) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.mirror-match-target-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 12px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.08);
}

.mirror-match-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.mirror-match-target {
  display: grid;
  place-items: center;
  min-height: 0;
}

.mirror-match-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.mirror-match-board.is-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}

.mirror-match-board.is-preview .mirror-match-target-panel,
.mirror-match-board.is-preview .mirror-match-options {
  display: none;
}

.mirror-match-preview {
  display: none;
}

.mirror-match-board.is-preview .mirror-match-preview {
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  min-height: clamp(180px, 42vw, 260px);
  padding: clamp(16px, 4vw, 28px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.08);
  cursor: pointer;
}

.mirror-match-board.is-preview .mirror-match-preview:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.32);
  outline-offset: 4px;
}

.mirror-match-preview-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 6vw, 54px);
  animation: mirrorMatchPreviewFade 3400ms ease-in-out forwards;
}

.mirror-match-preview-card {
  display: grid;
  place-items: center;
  width: clamp(108px, 18vw, 144px);
  height: clamp(108px, 18vw, 144px);
  border: 1px solid #e2edf9;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #f8fbff);
  box-shadow: 0 10px 18px rgba(7, 94, 234, 0.1);
}

.mirror-match-preview-card .mirror-match-glyph {
  width: clamp(86px, 14vw, 116px);
  height: clamp(86px, 14vw, 116px);
}

.mirror-match-preview-card-original {
  animation: mirrorMatchPreviewLeft 3400ms ease-in-out forwards;
}

.mirror-match-preview-card-mirror {
  animation: mirrorMatchPreviewRight 3400ms ease-in-out forwards;
}

.mirror-match-preview-pair.is-fading {
  opacity: 0;
  transition: opacity 360ms ease;
}

.mirror-match-option {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.mirror-match-option:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.mirror-match-option:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.mirror-match-option:disabled {
  cursor: not-allowed;
}

.mirror-match-option.is-selected {
  border-color: var(--blue);
  background: linear-gradient(145deg, #eff7ff, #fff);
  box-shadow: 0 0 0 3px rgba(7, 94, 234, 0.14), 0 10px 18px rgba(7, 94, 234, 0.12);
}

.mirror-match-option.is-correct,
.mirror-match-option.is-answer {
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #d9f7e3);
  box-shadow: 0 0 0 4px rgba(38, 166, 91, 0.2), 0 12px 20px rgba(26, 119, 62, 0.14);
  animation: mirrorMatchCorrect 180ms ease;
}

.mirror-match-option.is-wrong {
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 4px rgba(255, 98, 98, 0.22), 0 12px 20px rgba(157, 38, 38, 0.12);
  animation: mirrorMatchWrong 220ms ease;
}

.mirror-match-glyph {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, 0.9vw, 7px);
  width: clamp(70px, 12vw, 104px);
  height: clamp(70px, 12vw, 104px);
  padding: 8px;
}

.mirror-match-target .mirror-match-glyph {
  width: clamp(100px, 16vw, 140px);
  height: clamp(100px, 16vw, 140px);
}

.mirror-match-glyph span {
  min-width: 0;
  min-height: 0;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 42, 110, 0.1)),
    var(--mirror-match-block-color, var(--blue));
  box-shadow: 0 7px 14px rgba(7, 94, 234, 0.22);
}

.mirror-match-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.mirror-match-celebration.show {
  opacity: 1;
}

.mirror-match-celebration span {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffc247;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  animation: mirrorMatchStar 760ms ease forwards;
}

.mirror-match-celebration span:nth-child(1) {
  left: 22%;
  top: 18%;
}

.mirror-match-celebration span:nth-child(2) {
  left: 68%;
  top: 18%;
  animation-delay: 60ms;
}

.mirror-match-celebration span:nth-child(3) {
  left: 30%;
  top: 70%;
  animation-delay: 120ms;
}

.mirror-match-celebration span:nth-child(4) {
  left: 73%;
  top: 68%;
  animation-delay: 180ms;
}

.mirror-match-celebration span:nth-child(5) {
  left: 49%;
  top: 46%;
  animation-delay: 90ms;
}

.focus-flash-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.focus-flash-toolbar {
  align-items: center;
}

.focus-flash-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 8px;
}

.focus-flash-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.focus-flash-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.focus-flash-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.focus-flash-board {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  padding: clamp(12px, 2.4vw, 24px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.focus-flash-rule {
  display: grid;
  place-items: center;
  align-self: start;
  min-height: 32px;
  padding: 8px 10px 0;
  color: #344154;
  font-size: clamp(1.52rem, 2.8vw, 1.84rem);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.focus-flash-card {
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(37, 53, 82, 0.12);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.focus-flash-card:hover {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 16px 28px rgba(7, 94, 234, 0.16);
}

.focus-flash-card:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.focus-flash-card [data-word] {
  display: grid;
  place-items: center;
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.focus-flash-card.is-idle [data-word] {
  animation: focusFlashIdleColor 4400ms ease-in-out infinite;
}

.focus-flash-card.is-fade [data-word] {
  animation: focusFlashFade 180ms ease;
}

.focus-flash-card.is-correct {
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #ffffff);
  box-shadow: 0 0 0 4px rgba(38, 166, 91, 0.2), 0 12px 20px rgba(26, 119, 62, 0.14);
  animation: focusFlashCorrect 180ms ease;
}

.focus-flash-card.is-wrong,
.focus-flash-card.is-miss {
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 4px rgba(255, 98, 98, 0.22), 0 12px 20px rgba(157, 38, 38, 0.12);
  animation: focusFlashWrong 220ms ease;
}

.focus-flash-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.focus-flash-celebration.show {
  opacity: 1;
}

.focus-flash-celebration span {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffc247;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  animation: focusFlashStar 760ms ease forwards;
}

.focus-flash-celebration span:nth-child(1) {
  left: 22%;
  top: 18%;
}

.focus-flash-celebration span:nth-child(2) {
  left: 68%;
  top: 18%;
  animation-delay: 60ms;
}

.focus-flash-celebration span:nth-child(3) {
  left: 30%;
  top: 70%;
  animation-delay: 120ms;
}

.focus-flash-celebration span:nth-child(4) {
  left: 73%;
  top: 68%;
  animation-delay: 180ms;
}

.focus-flash-celebration span:nth-child(5) {
  left: 49%;
  top: 46%;
  animation-delay: 90ms;
}

.color-snap-celebration span {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ffc247;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  animation: colorSnapStar 760ms ease forwards;
}

.color-snap-celebration span:nth-child(1) {
  left: 22%;
  top: 18%;
}

.color-snap-celebration span:nth-child(2) {
  left: 68%;
  top: 18%;
  animation-delay: 60ms;
}

.color-snap-celebration span:nth-child(3) {
  left: 30%;
  top: 70%;
  animation-delay: 120ms;
}

.color-snap-celebration span:nth-child(4) {
  left: 76%;
  top: 64%;
  animation-delay: 180ms;
}

.color-snap-celebration span:nth-child(5) {
  left: 50%;
  top: 10%;
  animation-delay: 90ms;
}

.more-games-library {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.more-games-toolbar {
  align-items: center;
}

.more-games-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.more-games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.more-library-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
  cursor: pointer;
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.more-library-card:hover {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.more-library-card:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.more-library-card.is-coming-soon {
  color: var(--muted);
  background: linear-gradient(145deg, #fff, #f5f8fd);
  box-shadow: none;
}

.more-library-card.is-coming-soon .more-library-art,
.more-library-card.is-coming-soon .more-library-text {
  opacity: 0.62;
}

.more-library-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.more-library-text strong {
  overflow: hidden;
  color: var(--blue);
  font-size: clamp(0.86rem, 1.4vw, 1rem);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-library-text small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.more-library-badge {
  justify-self: end;
  padding: 5px 7px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #238dff, var(--blue));
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.is-coming-soon .more-library-badge {
  color: var(--blue);
  border: 1px solid #bad2f7;
  background: #fff;
}

.more-library-art {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  width: 42px;
  height: 42px;
  padding: 5px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff, #edf5ff);
  box-shadow: 0 6px 12px rgba(37, 53, 82, 0.1);
}

.more-library-art span {
  border-radius: 5px;
  background: var(--blue);
}

.art-memory span {
  background: #ffc247;
}

.art-numbers span:nth-child(1),
.art-majority span:nth-child(1),
.art-path span:nth-child(1) {
  background: #ffc720;
}

.art-numbers span:nth-child(2),
.art-majority span:nth-child(2),
.art-path span:nth-child(2) {
  background: #60c93d;
}

.art-numbers span:nth-child(3),
.art-majority span:nth-child(3),
.art-path span:nth-child(3) {
  background: #e8359e;
}

.art-logic span,
.art-ladder span,
.art-maze span {
  background: #ffad1f;
  transform: rotate(-18deg);
}

.art-math span:nth-child(1)::before,
.art-math span:nth-child(2)::before,
.art-math span:nth-child(3)::before,
.art-math span:nth-child(4)::before {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.art-math span:nth-child(1)::before {
  content: "+";
}

.art-math span:nth-child(2)::before {
  content: "-";
}

.art-math span:nth-child(3)::before {
  content: "x";
}

.art-math span:nth-child(4)::before {
  content: "=";
  color: #fff;
}

.art-math span:nth-child(4) {
  background: #8f35e8;
}

.art-shapes span:nth-child(1),
.art-color span:nth-child(1),
.art-mirror span:nth-child(1) {
  border-radius: 6px;
  background: #238dff;
}

.art-shapes span:nth-child(2),
.art-color span:nth-child(2),
.art-mirror span:nth-child(2) {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: #67c72f;
}

.art-shapes span:nth-child(3),
.art-color span:nth-child(3),
.art-mirror span:nth-child(3) {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  background: #a13ee8;
}

.art-shapes span:nth-child(4),
.art-color span:nth-child(4),
.art-mirror span:nth-child(4) {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  background: #ff3f5f;
}

.art-letters span::before {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.art-letters span:nth-child(1)::before {
  content: "A";
}

.art-letters span:nth-child(2)::before {
  content: "B";
}

.art-letters span:nth-child(3)::before {
  content: "C";
}

.art-letters span:nth-child(4)::before {
  content: "D";
}

.art-tiles span,
.art-flash span {
  background: #dbe8f7;
}

.art-bolt span {
  clip-path: polygon(50% 0, 88% 0, 58% 42%, 96% 42%, 38% 100%, 50% 58%, 15% 58%);
  background: #ffc247;
}

.word-sprint-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.word-sprint-toolbar {
  align-items: center;
}

.word-sprint-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 8px;
}

.word-sprint-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.word-sprint-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.word-sprint-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.word-sprint-board {
  display: grid;
  grid-template-rows: minmax(190px, 0.95fr) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.word-sprint-board.is-previewing {
  grid-template-rows: minmax(230px, 1fr) 0;
  cursor: pointer;
}

.word-sprint-prompt {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 14px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.08);
  text-align: center;
}

.word-sprint-board.is-previewing .word-sprint-prompt {
  align-self: center;
  min-height: clamp(230px, 33vw, 320px);
}

.word-sprint-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.word-sprint-prompt strong {
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.word-sprint-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.word-sprint-board.is-previewing .word-sprint-options {
  display: none;
}

.word-sprint-option {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
  color: var(--blue);
  cursor: pointer;
  font-size: clamp(1rem, 2.1vw, 1.38rem);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.word-sprint-option:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.word-sprint-option:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.word-sprint-option:disabled {
  cursor: not-allowed;
}

.word-sprint-option.is-correct {
  color: #0e6a2c;
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #d9f7e3);
  animation: wordSprintPop 180ms ease;
}

.word-sprint-option.is-wrong {
  color: #a42626;
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 3px rgba(255, 98, 98, 0.2), 0 12px 20px rgba(157, 38, 38, 0.12);
}

.word-sprint-option.is-answer {
  color: #0e6a2c;
  border-color: #9addb0;
  background: #f1fff5;
}

.word-sprint-fade {
  animation: wordSprintFade 180ms ease;
}

.word-sprint-preview-fade {
  animation: wordSprintPreviewFade 420ms ease;
}

.logic-ladder-game {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  padding: clamp(14px, 2.8vw, 30px);
}

.logic-ladder-toolbar {
  align-items: center;
}

.logic-ladder-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 8px;
}

.logic-ladder-stats span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.logic-ladder-stats strong {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 1.06rem;
}

.logic-ladder-status {
  min-height: 28px;
  margin: 0;
  color: #344154;
  font-weight: 700;
  text-align: center;
}

.logic-ladder-board {
  display: grid;
  grid-template-rows: minmax(170px, 0.8fr) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 16px);
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vw, 20px);
  border: 1px solid #dbe8f7;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 94, 234, 0.05), rgba(255, 255, 255, 0.86)),
    #fbfdff;
  overflow: hidden;
}

.logic-ladder-board.is-preview {
  grid-template-rows: 1fr;
  align-items: center;
  cursor: pointer;
}

.logic-ladder-board.is-preview .logic-ladder-sequence {
  grid-template-columns: repeat(6, minmax(62px, 104px));
  justify-content: center;
  align-content: center;
  width: min(100%, 720px);
  margin: 0 auto;
}

.logic-ladder-board.is-preview .logic-ladder-options {
  display: none;
}

.logic-ladder-board.is-preview-exiting .logic-ladder-sequence {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.logic-ladder-sequence,
.logic-ladder-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.logic-ladder-step,
.logic-ladder-option {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  border: 1px solid #cbdcf2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.1);
  text-align: center;
}

.logic-ladder-step.is-missing {
  border-style: dashed;
  background: #f4f8ff;
  color: var(--blue);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 900;
}

.logic-ladder-preview-card {
  min-height: clamp(92px, 15vw, 138px);
  animation: logicLadderPreviewIn 260ms ease both;
}

.logic-ladder-preview-card.is-missing {
  font-size: clamp(1.7rem, 3.8vw, 2.8rem);
}

.logic-ladder-option {
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.logic-ladder-option:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #78aafd;
  box-shadow: 0 12px 20px rgba(7, 94, 234, 0.16);
}

.logic-ladder-option:focus-visible {
  outline: 3px solid rgba(7, 94, 234, 0.35);
  outline-offset: 3px;
}

.logic-ladder-option:disabled {
  cursor: not-allowed;
}

.logic-ladder-option.is-correct,
.logic-ladder-option.is-answer {
  color: #0e6a2c;
  border-color: #9addb0;
  background: linear-gradient(145deg, #f1fff5, #d9f7e3);
}

.logic-ladder-option.is-wrong {
  color: #a42626;
  border-color: #ff6262;
  background: #fff2f2;
  box-shadow: 0 0 0 3px rgba(255, 98, 98, 0.2), 0 12px 20px rgba(157, 38, 38, 0.12);
}

.logic-ladder-item {
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--blue);
  font-weight: 900;
  line-height: 1;
}

.logic-ladder-item strong {
  font-size: clamp(1.35rem, 3vw, 2.4rem);
}

.logic-ladder-figure {
  display: block;
  width: 58px;
  height: 58px;
  background: var(--logic-color);
  box-shadow: 0 8px 16px rgba(37, 53, 82, 0.14);
  transform: var(--logic-rotation);
  transform-origin: center;
}

.logic-ladder-figure.size-small {
  width: 44px;
  height: 44px;
}

.logic-ladder-figure.size-large {
  width: 72px;
  height: 72px;
}

.logic-ladder-figure.shape-square {
  border-radius: 8px;
}

.logic-ladder-figure.shape-circle {
  border-radius: 50%;
}

.logic-ladder-figure.shape-triangle {
  clip-path: polygon(50% 4%, 96% 94%, 4% 94%);
}

.logic-ladder-figure.shape-diamond {
  border-radius: 8px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

@keyframes wordSprintFade {
  0% {
    opacity: 0.5;
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wordSprintPreviewFade {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }

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

@keyframes logicLadderPreviewIn {
  0% {
    opacity: 0.58;
    transform: translateY(5px) scale(0.98);
  }

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

@keyframes alphabetMasterPreviewLetter {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }

  28%,
  70% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes candleFlamePlayback {
  0% {
    transform: scale(0.8);
  }

  58% {
    transform: scale(1.04) rotate(-1deg);
  }

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

@keyframes candleFlameIdle {
  0%,
  100% {
    filter: brightness(0.94);
    transform: translateY(0) scale(0.975) rotate(-0.9deg);
  }

  50% {
    filter: brightness(1.12);
    transform: translateY(-2px) scale(1.025) rotate(0.9deg);
  }
}

@keyframes candleFlameIdleGlow {
  0%,
  100% {
    opacity: 0.54;
  }

  50% {
    opacity: 0.78;
  }
}

@keyframes candleFlameCorrect {
  0% {
    transform: scale(0.94);
  }

  55% {
    transform: scale(1.08);
  }

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

@keyframes candleSparkle {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.4);
  }

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

  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.7);
  }
}

@keyframes candleFlameWrongTile {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  75% {
    transform: translateX(4px);
  }
}

@keyframes wordSprintPop {
  0% {
    transform: scale(0.98);
  }

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

@keyframes quickMathPop {
  0% {
    transform: scale(0.98);
  }

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

@keyframes quickMathPreview {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes majorityCorrect {
  0% {
    box-shadow: 0 0 0 0 rgba(38, 166, 91, 0.26), 0 14px 28px rgba(33, 57, 94, 0.1);
  }

  100% {
    box-shadow: 0 0 0 8px rgba(38, 166, 91, 0), 0 14px 28px rgba(33, 57, 94, 0.1);
  }
}

@keyframes majorityWrong {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

@keyframes majorityPreviewTile {
  0%,
  100% {
    background: linear-gradient(145deg, #1e8cff, #075eea);
    transform: scale(0.98) rotateY(0deg);
    opacity: 0.9;
  }

  42% {
    background: linear-gradient(145deg, #1e8cff, #075eea);
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }

  58% {
    background: linear-gradient(145deg, #f05aa5, #c9006d);
    transform: scale(1.025) rotateY(8deg);
    opacity: 1;
  }

  82% {
    background: linear-gradient(145deg, #f05aa5, #c9006d);
    transform: scale(1) rotateY(0deg);
    opacity: 0.96;
  }
}

@keyframes majorityStar {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.6) rotate(0deg);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.1) rotate(24deg);
  }
}

@keyframes colorSnapFade {
  0% {
    opacity: 0.6;
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes colorSnapCorrect {
  0% {
    transform: scale(0.98);
  }

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

@keyframes colorSnapWrong {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

@keyframes colorSnapStar {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.6) rotate(0deg);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.1) rotate(24deg);
  }
}

@keyframes reactionRunCorrect {
  0% {
    transform: scale(0.98);
  }

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

@keyframes reactionRunGoTarget {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes reactionRunGoPulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(38, 166, 91, 0.16), 0 16px 28px rgba(26, 119, 62, 0.14);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(38, 166, 91, 0.24), 0 18px 30px rgba(26, 119, 62, 0.18);
  }
}

@keyframes reactionRunWrong {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

@keyframes reactionRunStar {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.6) rotate(0deg);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.1) rotate(24deg);
  }
}

@keyframes mazeMindCorrect {
  0% {
    transform: scale(0.98);
  }

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

@keyframes mazeMindWrong {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

@keyframes mazeMindBlockerIn {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mazeMindStar {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.6) rotate(0deg);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.1) rotate(24deg);
  }
}

@keyframes compositionCorrect {
  0% {
    transform: scale(0.98);
  }

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

@keyframes compositionWrong {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

@keyframes compositionPreviewMerge {
  0%,
  18% {
    opacity: 1;
    transform: translateX(var(--composition-preview-start)) scale(1);
  }

  56% {
    opacity: 1;
    transform: translateX(0) scale(1.04);
  }

  72%,
  100% {
    opacity: 0;
    transform: translateX(0) scale(0.94);
  }
}

@keyframes compositionPreviewResult {
  0%,
  54% {
    opacity: 0;
    transform: scale(0.9);
  }

  72%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes compositionPreviewFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(5px) scale(0.985);
  }
}

@keyframes compositionStar {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.6) rotate(0deg);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.1) rotate(24deg);
  }
}

@keyframes mirrorMatchCorrect {
  0% {
    transform: scale(0.98);
  }

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

@keyframes mirrorMatchWrong {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

@keyframes mirrorMatchPreviewFade {
  0% {
    opacity: 0;
  }

  12%,
  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mirrorMatchPreviewLeft {
  0% {
    transform: translateX(10px) scale(0.98);
  }

  24%,
  78% {
    transform: translateX(0) scale(1);
  }

  100% {
    transform: translateX(-6px) scale(0.99);
  }
}

@keyframes mirrorMatchPreviewRight {
  0% {
    transform: translateX(-18px) scale(0.98);
  }

  24%,
  78% {
    transform: translateX(0) scale(1);
  }

  100% {
    transform: translateX(6px) scale(0.99);
  }
}

@keyframes mirrorMatchStar {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.6) rotate(0deg);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.1) rotate(24deg);
  }
}

@keyframes focusFlashFade {
  0% {
    opacity: 0.5;
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes focusFlashIdleColor {
  0% {
    color: #ff3f5f;
  }

  20% {
    color: #ffb019;
  }

  40% {
    color: #238dff;
  }

  60% {
    color: #47b83f;
  }

  80% {
    color: #9b4de3;
  }

  100% {
    color: #ff3f5f;
  }
}

@keyframes focusFlashCorrect {
  0% {
    transform: scale(0.98);
  }

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

@keyframes focusFlashWrong {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

@keyframes focusFlashStar {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.6) rotate(0deg);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-16px) scale(1.1) rotate(24deg);
  }
}

.site-footer {
  display: grid;
  grid-template-columns: 1.8fr repeat(3, 1fr);
  gap: 28px;
  margin-top: 24px;
  padding: clamp(24px, 4vw, 38px);
}

.site-footer h2 {
  margin: 0 0 16px;
  color: var(--blue);
  font-size: 1.05rem;
  text-transform: uppercase;
}

.site-footer a {
  display: block;
  margin: 0 0 11px;
}

.site-footer a:hover {
  color: var(--blue);
}

.footer-brand strong {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.footer-brand small {
  font-size: 0.9rem;
}

.social-links {
  display: flex;
  gap: 14px;
  margin-top: 22px;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #238dff, var(--blue));
  font-weight: 900;
}

.copyright {
  margin: 22px 0 0;
  text-align: center;
}

.about-panel {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.about-title {
  max-width: 820px;
  margin: 0 auto 22px;
  text-transform: none;
}

.about-title h1 {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.about-intro {
  max-width: 760px;
  margin: 0 auto clamp(26px, 4vw, 38px);
  color: #263247;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.7;
  text-align: center;
}

.about-card-grid,
.about-find-grid {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
}

.about-skill-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-card,
.about-find-card,
.about-thanks {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(30, 49, 78, 0.1);
}

.about-card {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 260px;
  padding: clamp(18px, 2.4vw, 28px);
  text-align: center;
}

.about-card.compact {
  min-height: 230px;
}

.about-card h2,
.about-card h3,
.about-find-card h3,
.about-section h2,
.about-thanks h2 {
  color: var(--blue);
  line-height: 1.15;
}

.about-card h2,
.about-card h3 {
  margin: 14px 0 12px;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.about-card p,
.about-find-card p,
.about-thanks p {
  margin: 0;
  color: #263247;
  line-height: 1.58;
}

.about-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 90px;
  height: 76px;
  color: var(--blue);
}

.about-icon::before,
.about-icon::after,
.about-mini-icon::before,
.about-mini-icon::after {
  content: "";
  position: absolute;
}

.icon-memory::before {
  width: 68px;
  height: 48px;
  border-radius: 28px 28px 18px 18px;
  background:
    radial-gradient(circle at 28% 38%, #fff 0 8%, transparent 9%),
    radial-gradient(circle at 46% 30%, #fff 0 7%, transparent 8%),
    radial-gradient(circle at 64% 40%, #fff 0 8%, transparent 9%),
    linear-gradient(145deg, #56b7ff, var(--blue));
}

.icon-memory::after {
  width: 38px;
  height: 38px;
  border-left: 6px solid var(--blue);
  border-bottom: 6px solid var(--blue);
  border-radius: 0 0 0 22px;
  transform: translate(4px, 20px) rotate(-18deg);
}

.icon-logic::before {
  width: 76px;
  height: 58px;
  background: linear-gradient(145deg, #ffba31, #ff9300);
  clip-path: polygon(7% 38%, 36% 20%, 62% 0, 93% 34%, 64% 52%, 36% 72%, 8% 55%);
  filter: drop-shadow(0 8px 10px rgba(255, 150, 0, 0.24));
}

.icon-focus::before {
  width: 72px;
  height: 72px;
  border: 8px solid #3aa5ff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 9px #fff, inset 0 0 0 17px var(--blue);
}

.icon-focus::after {
  width: 42px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
  transform: translate(24px, -20px) rotate(-45deg);
}

.icon-visual::before {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ffd640 0 7%, transparent 8%),
    radial-gradient(circle at 60% 22%, #8bdb4c 0 7%, transparent 8%),
    radial-gradient(circle at 70% 58%, #fff 0 10%, transparent 11%),
    radial-gradient(circle at 36% 68%, #ff63ad 0 7%, transparent 8%),
    linear-gradient(145deg, #9155e8, #6845c9);
}

.icon-easy::before {
  width: 48px;
  height: 62px;
  border-radius: 28px 28px 18px 18px;
  background: linear-gradient(145deg, #73c7ff, var(--blue));
}

.icon-easy::after {
  width: 28px;
  height: 8px;
  border-radius: 999px;
  background: #8ecbff;
  transform: translateY(34px);
}

.icon-fair::before {
  width: 76px;
  height: 58px;
  border-top: 6px solid var(--blue);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.icon-fair::after {
  width: 86px;
  height: 58px;
  background:
    linear-gradient(var(--blue), var(--blue)) center 0 / 6px 58px no-repeat,
    radial-gradient(circle at 20% 82%, transparent 0 16px, var(--blue) 17px 19px, transparent 20px),
    radial-gradient(circle at 80% 82%, transparent 0 16px, var(--blue) 17px 19px, transparent 20px);
}

.icon-speed::before {
  width: 62px;
  height: 62px;
  border: 7px solid #3aa5ff;
  border-radius: 50%;
}

.icon-speed::after {
  width: 28px;
  height: 40px;
  background: var(--blue);
  clip-path: polygon(48% 0, 83% 0, 62% 38%, 92% 38%, 36% 100%, 50% 55%, 18% 55%);
}

.icon-clean::before {
  width: 84px;
  height: 60px;
  background:
    linear-gradient(145deg, #238dff, var(--blue)) 5px 5px / 28px 28px no-repeat,
    linear-gradient(145deg, #ffba31, #ff9300) 45px 7px / 30px 26px no-repeat,
    radial-gradient(circle at 24px 49px, transparent 0 13px, var(--blue) 14px 17px, transparent 18px),
    linear-gradient(var(--blue), var(--blue)) 51px 48px / 32px 5px no-repeat;
}

.icon-refine::before {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(from 20deg, var(--blue), #3aa5ff, var(--blue));
  clip-path: polygon(50% 0, 62% 28%, 94% 35%, 69% 55%, 78% 90%, 50% 72%, 22% 90%, 31% 55%, 6% 35%, 38% 28%);
}

.icon-refine::after {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3aa5ff;
  transform: translate(30px, -22px);
}

.about-section {
  margin-top: clamp(24px, 4vw, 34px);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.about-section h2 {
  margin: 0 0 20px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.about-philosophy-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.about-philosophy-grid .about-card {
  grid-column: span 2;
}

.about-philosophy-grid .about-card:nth-last-child(2) {
  grid-column: 2 / span 2;
}

.about-find-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.about-find-card {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 230px;
  padding: 18px;
  text-align: center;
}

.about-find-card.word {
  background: linear-gradient(145deg, #f0f8ff, #fff);
}

.about-find-card.pattern {
  background: linear-gradient(145deg, #fff6e8, #fff);
}

.about-find-card.math {
  background: linear-gradient(145deg, #fbf0ff, #fff);
}

.about-find-card.visual {
  background: linear-gradient(145deg, #f2ffef, #fff);
}

.about-find-card.speed {
  background: linear-gradient(145deg, #fff1f1, #fff);
}

.about-find-card h3 {
  margin: 14px 0 10px;
  font-size: 1.1rem;
}

.about-mini-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  height: 72px;
  color: var(--blue);
  font-weight: 900;
}

.about-carousel-icon {
  width: 142px;
  height: 104px;
  color: var(--blue);
}

.about-carousel-icon.pattern-icon::before,
.about-carousel-icon.math-icon::before,
.about-carousel-icon.math-icon::after,
.about-carousel-icon.visual-icon::before,
.about-carousel-icon.visual-icon::after {
  display: none;
}

.about-carousel-icon .cube-stack {
  transform: rotate(-28deg) skew(8deg) scale(0.82);
}

.about-carousel-icon .math-grid {
  transform: scale(0.82);
}

.about-carousel-icon .shape-board {
  transform: scale(0.82);
}

.word-icon {
  grid-template-columns: repeat(3, 38px);
  grid-template-rows: repeat(2, 38px);
  gap: 8px;
  width: 142px;
  height: 104px;
  align-content: center;
  justify-content: center;
  font-size: 1.72rem;
  line-height: 1;
}

.word-icon::before {
  display: none;
}

.word-icon span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #b8d3ee;
  border-radius: 8px;
  color: #11244b;
  background: linear-gradient(145deg, #fff, #edf6ff);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.85),
    0 7px 9px rgba(37, 53, 82, 0.18);
  font-weight: 900;
}

.word-icon span:nth-child(6) {
  border-color: #e2b000;
  color: #14234b;
  background: linear-gradient(145deg, #ffe76a, #ffc300 72%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.75),
    0 8px 10px rgba(217, 157, 0, 0.3);
}

.pattern-icon::before {
  left: 4px;
  top: 13px;
  width: 27px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(145deg, #ffbd35, #ff9712);
  box-shadow:
    27px -9px 0 #ffa31b,
    54px 0 0 #ff9a13,
    13px 27px 0 #ffa51b,
    40px 18px 0 #ff9b14,
    67px 27px 0 #ff9410,
    0 7px 10px rgba(255, 151, 18, 0.2),
    40px 25px 12px rgba(255, 151, 18, 0.18);
  transform: rotate(-27deg);
}

.math-icon::before {
  inset: 0;
  background:
    linear-gradient(145deg, #fff, #f1eee8) 0 0 / 34px 34px no-repeat,
    linear-gradient(145deg, #fff, #f1eee8) 44px 0 / 34px 34px no-repeat,
    linear-gradient(145deg, #fff, #f1eee8) 0 42px / 34px 34px no-repeat,
    linear-gradient(145deg, #b950ff, #812ee6) 44px 42px / 34px 34px no-repeat;
  border-radius: 6px;
  filter: drop-shadow(0 8px 10px rgba(37, 53, 82, 0.18));
}

.math-icon::after {
  inset: 0;
  color: #303744;
  content: "+  -\A x  =";
  white-space: pre;
  font-size: 1.35rem;
  line-height: 2.05;
  letter-spacing: 8px;
  transform: translate(9px, 2px);
}

.math-icon {
  color: #303744;
}

.math-icon::first-line {
  color: #303744;
}

.visual-icon::before {
  display: none;
}

.visual-icon::after {
  display: none;
}

.speed-icon::before {
  width: 86px;
  height: 54px;
  background:
    linear-gradient(#22c9a8, #22c9a8) 0 13px / 50px 6px no-repeat,
    linear-gradient(#22c9a8, #22c9a8) 0 30px / 43px 6px no-repeat,
    radial-gradient(circle at 72px 12px, #ff405e 0 10px, transparent 11px),
    linear-gradient(135deg, transparent 0 42%, #ff405e 43% 60%, transparent 61%),
    linear-gradient(45deg, transparent 0 44%, #ff405e 45% 62%, transparent 63%);
  filter: drop-shadow(0 8px 9px rgba(255, 64, 94, 0.2));
}

.speed-icon {
  width: 142px;
  height: 104px;
}

.about-thanks {
  position: relative;
  margin-top: clamp(24px, 4vw, 34px);
  padding: clamp(26px, 4vw, 44px);
  text-align: center;
}

.about-heart {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: -56px auto 16px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #6bc6ff, var(--blue));
  box-shadow: 0 10px 20px rgba(7, 94, 234, 0.22);
  font-size: 1.6rem;
}

.about-thanks h2 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.about-thanks p {
  max-width: 720px;
  margin: 0 auto 14px;
}

.about-thanks strong {
  color: var(--blue);
}

.contact-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.contact-hero {
  padding: clamp(34px, 5vw, 58px) clamp(24px, 4vw, 42px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #eaf4ff 0%, #edf6ff 100%);
}

.contact-hero h1 {
  margin: 0 0 14px;
  color: #101827;
  font-size: clamp(2.45rem, 5vw, 4.2rem);
  line-height: 1;
}

.contact-hero p {
  max-width: 820px;
  margin: 0;
  color: #384a66;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.55;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(24px, 4vw, 42px);
}

.contact-card {
  min-height: 300px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(30, 49, 78, 0.08);
}

.contact-card h2 {
  margin: 0 0 26px;
  color: #101827;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.15;
}

.contact-card p {
  margin: 0 0 22px;
  color: #384a66;
  font-size: 1.03rem;
  line-height: 1.65;
}

.contact-card a {
  color: #384a66;
  text-decoration: none;
}

.contact-card a:hover {
  color: var(--blue);
}

.contact-form {
  display: grid;
  gap: 16px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #c7dcfb;
  border-radius: 8px;
  padding: 15px 18px;
  color: #101827;
  background: #fff;
  font: inherit;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(26, 118, 238, 0.12);
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-submit {
  justify-self: center;
  min-width: 190px;
  border: 0;
  border-radius: 8px;
  padding: 15px 24px;
  color: #fff;
  background: linear-gradient(180deg, #238dff, var(--blue));
  box-shadow: 0 10px 20px rgba(26, 118, 238, 0.24);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(26, 118, 238, 0.3);
}

.policy-panel {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.policy-title {
  max-width: 820px;
  margin: 0 auto 12px;
  text-transform: none;
}

.policy-title h1 {
  font-size: clamp(2.2rem, 4vw, 3.45rem);
}

.policy-updated {
  margin: 0 0 clamp(24px, 4vw, 36px);
  color: #64748b;
  font-weight: 800;
  text-align: center;
}

.policy-section {
  max-width: 860px;
  margin: 0 auto 18px;
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid #d7e7fb;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  box-shadow: 0 8px 18px rgba(30, 49, 78, 0.07);
}

.policy-section h2 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
}

.policy-section p {
  margin: 0;
  color: #263247;
  font-size: 1.02rem;
  line-height: 1.68;
}

.policy-section p + p {
  margin-top: 12px;
}

.policy-section a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.policy-section a:hover {
  text-decoration: underline;
}

.about-panel {
  padding: clamp(20px, 3vw, 34px);
}

.about-intro {
  max-width: 900px;
  margin-bottom: 22px;
  color: #101827;
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  line-height: 1.45;
  font-weight: 600;
}

.about-skill-grid {
  gap: clamp(12px, 1.8vw, 18px);
}

.about-skill-grid .about-card {
  min-height: 166px;
  justify-content: center;
  align-content: center;
  padding: 18px;
  border-color: #b7d5f5;
  box-shadow: 0 10px 22px rgba(30, 49, 78, 0.12);
}

.about-skill-grid .about-card h2 {
  margin: 10px 0 0;
  color: #101827;
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
}

.about-skill-mark {
  display: block;
  width: 88px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 11px 12px rgba(30, 49, 78, 0.15));
}

.about-skill-grid .about-icon {
  width: 76px;
  height: 64px;
  transform: scale(0.88);
}

.about-section {
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}

.about-section h2 {
  margin-bottom: 14px;
  color: #101827;
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
}

.about-philosophy-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.about-philosophy-grid .about-card,
.about-philosophy-grid .about-card:nth-last-child(2) {
  grid-column: auto;
}

.about-philosophy-grid .about-philosophy-item {
  grid-template-columns: 76px minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  align-content: center;
  min-height: 82px;
  padding: 10px 16px;
  text-align: left;
}

.about-philosophy-icon {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(7, 94, 234, 0.15));
}

.about-philosophy-item .about-icon {
  width: 52px;
  height: 48px;
  transform: scale(0.68);
  transform-origin: center;
}

.about-philosophy-item h3 {
  margin: 0;
  color: #101827;
  font-size: clamp(0.95rem, 1.5vw, 1.12rem);
}

.about-find-grid {
  gap: 14px;
}

.about-find-card {
  min-height: 210px;
  padding: 16px 12px;
}

.about-find-card h3 {
  font-size: 1rem;
}

.about-find-card p {
  font-size: 0.86rem;
  line-height: 1.45;
}

.about-thanks {
  margin-top: 22px;
  padding: clamp(20px, 3vw, 30px);
}

.about-thanks h2 {
  color: #101827;
}

.about-thanks p {
  max-width: 820px;
  color: #101827;
  font-weight: 600;
}

@media (max-width: 920px) {
  .site-header {
    align-items: flex-start;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav {
    position: absolute;
    top: 120px;
    left: 20px;
    right: 20px;
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    text-align: center;
  }

  .site-footer {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .about-skill-grid,
  .about-find-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .about-philosophy-grid .about-card,
  .about-philosophy-grid .about-card:nth-last-child(2) {
    grid-column: auto;
  }

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

@media (max-width: 640px) {
  .page-shell {
    width: min(100% - 24px, 1220px);
    padding-top: 16px;
  }

  .brand {
    gap: 10px;
  }

  .sandwich-logo {
    width: 74px;
    height: 64px;
  }

  .carousel-shell {
    grid-template-columns: 1fr;
  }

  .carousel-control {
    display: none;
  }

  .game-carousel {
    grid-auto-columns: 145px;
    padding: 10px;
  }

  .game-card {
    min-height: 190px;
    grid-template-rows: 120px auto;
  }

  .module-toolbar {
    flex-direction: column;
  }

  .play-button {
    width: 100%;
  }

  .candle-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .number-master-controls {
    width: 100%;
  }

  .number-master-controls .play-button {
    flex: 1 1 140px;
  }

  .tile-memory-controls {
    width: 100%;
  }

  .tile-memory-controls .play-button {
    flex: 1 1 140px;
  }

  .maze-mind-controls {
    width: 100%;
  }

  .maze-mind-controls .play-button {
    flex: 1 1 130px;
  }

  .quick-math-controls {
    width: 100%;
  }

  .quick-math-controls .play-button {
    flex: 1 1 140px;
  }

  .number-master-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .tile-memory-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .maze-mind-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .maze-mind-board {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 12px;
  }

  .maze-mind-grid {
    width: min(100%, 330px);
  }

  .maze-mind-pad {
    position: static;
    justify-self: center;
    width: min(100%, 138px);
    min-width: 0;
    transform: none;
  }

  .quick-math-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .majority-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .majority-board {
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 12px;
  }

  .majority-grid {
    gap: 7px;
    width: min(100%, 330px);
  }

  .shape-match-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .color-snap-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .composition-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .composition-board {
    grid-template-rows: minmax(110px, 0.55fr) minmax(0, 1fr);
    padding: 12px;
  }

  .composition-target .composition-symbol {
    width: 92px;
    height: 92px;
  }

  .composition-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mirror-match-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .mirror-match-board {
    grid-template-rows: minmax(110px, 0.55fr) minmax(0, 1fr);
    padding: 12px;
  }

  .mirror-match-target .mirror-match-glyph {
    width: 92px;
    height: 92px;
  }

  .mirror-match-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .focus-flash-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .focus-flash-board {
    padding: 12px;
  }

  .focus-flash-rule {
    min-height: 32px;
    font-size: 1.76rem;
  }

  .focus-flash-card [data-word] {
    font-size: clamp(2.6rem, 16vw, 4.8rem);
  }

  .reaction-run-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .reaction-run-board {
    padding: 12px;
  }

  .reaction-run-signal {
    min-height: 170px;
  }

  .color-snap-board {
    grid-template-rows: minmax(110px, 0.55fr) minmax(0, 1fr);
    padding: 12px;
  }

  .color-snap-board.is-preview {
    grid-template-rows: 1fr;
  }

  .color-snap-target {
    width: min(100%, 240px);
    min-height: 62px;
  }

  .color-snap-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .color-snap-board.is-preview .color-snap-options {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: clamp(140px, 40vw, 220px);
    gap: 6px;
  }

  .shape-match-board {
    grid-template-rows: minmax(120px, 0.62fr) minmax(0, 1fr);
    padding: 12px;
  }

  .shape-match-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shape-match-target .shape-match-figure {
    width: 86px;
    height: 86px;
  }

  .shape-match-figure {
    width: 58px;
    height: 58px;
  }

  .quick-math-panel {
    padding: 12px;
  }

  .quick-math-answer-row {
    grid-template-columns: 1fr;
  }

  .quick-math-answer-row .play-button {
    width: 100%;
  }

  .quick-math-result {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .candle-status {
    font-size: 0.9rem;
  }

  .number-master-status {
    font-size: 0.9rem;
  }

  .tile-memory-status {
    font-size: 0.9rem;
  }

  .quick-math-status {
    font-size: 0.9rem;
  }

  .majority-status {
    font-size: 0.9rem;
  }

  .shape-match-status {
    font-size: 0.9rem;
  }

  .color-snap-status {
    font-size: 0.9rem;
  }

  .more-games-library {
    gap: 8px;
    padding: 12px;
  }

  .more-games-status {
    font-size: 0.9rem;
  }

  .more-games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
  }

  .more-library-card {
    gap: 6px;
    padding: 5px 6px;
  }

  .more-library-art {
    width: 30px;
    height: 30px;
    gap: 3px;
    padding: 4px;
  }

  .more-library-text strong {
    font-size: 0.76rem;
  }

  .more-library-text small {
    font-size: 0.68rem;
  }

  .more-library-badge {
    padding: 4px 5px;
    font-size: 0.58rem;
  }

  .word-sprint-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .logic-ladder-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .logic-ladder-board {
    grid-template-rows: minmax(130px, 0.7fr) minmax(0, 1fr);
    padding: 12px;
  }

  .logic-ladder-sequence,
  .logic-ladder-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .logic-ladder-board.is-preview .logic-ladder-sequence {
    grid-template-columns: repeat(6, minmax(34px, 1fr));
    gap: 6px;
  }

  .logic-ladder-preview-card {
    min-height: 72px;
  }

  .logic-ladder-step,
  .logic-ladder-option {
    padding: 8px;
  }

  .logic-ladder-figure {
    width: 44px;
    height: 44px;
  }

  .word-sprint-board {
    grid-template-rows: minmax(130px, 0.72fr) minmax(0, 1fr);
    padding: 12px;
  }

  .word-sprint-options {
    gap: 8px;
  }

  .word-sprint-option {
    padding: 8px;
  }

  .word-sprint-status {
    font-size: 0.9rem;
  }

  .logic-ladder-status {
    font-size: 0.9rem;
  }

  .game-stage {
    height: clamp(620px, 142vw, 820px);
    min-height: 620px;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .about-panel {
    padding: 18px;
  }

  .about-skill-grid,
  .about-philosophy-grid,
  .about-find-grid {
    grid-template-columns: 1fr;
  }

  .about-card,
  .about-card.compact,
  .about-find-card {
    min-height: auto;
  }

  .contact-hero,
  .contact-grid,
  .contact-card {
    padding: 20px;
  }

  .contact-card {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .page-shell,
  .site-header,
  main,
  .games-panel,
  .game-stage,
  .game-root,
  .site-footer,
  .about-panel,
  .contact-panel,
  .policy-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page-shell {
    padding-top: 16px;
  }

  .site-header {
    gap: 14px;
  }

  .brand {
    min-width: 0;
  }

  .brand > span:last-child {
    min-width: 0;
  }

  .brand strong {
    font-size: clamp(2rem, 11vw, 3rem);
    overflow-wrap: anywhere;
  }

  .brand small {
    font-size: clamp(0.86rem, 4vw, 1.05rem);
  }

  .main-nav {
    left: 12px;
    right: 12px;
    max-width: calc(100vw - 24px);
  }

  .main-nav a,
  .play-button,
  .contact-submit,
  button {
    min-height: 44px;
  }

  .games-panel {
    padding: 16px;
  }

  .section-title {
    gap: 12px;
  }

  .section-title h1 {
    font-size: clamp(1.9rem, 10vw, 3rem);
    text-align: center;
  }

  .carousel-shell {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .carousel-control {
    display: none;
  }

  .game-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 8px 14px 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  .game-card {
    flex: 0 0 80%;
    min-width: 180px;
    max-width: 260px;
    min-height: 176px;
    grid-template-rows: 96px auto;
    scroll-snap-align: center;
    box-sizing: border-box;
    overflow: hidden;
  }

  .game-card strong {
    font-size: 0.95rem;
  }

  .game-art {
    max-width: 100%;
    overflow: hidden;
    transform: scale(0.78);
    transform-origin: center;
    pointer-events: none;
  }

  .mini-candle-grid,
  .cube-stack,
  .math-grid,
  .shape-board,
  .number-stack,
  .majority-stack {
    max-width: 100%;
    transform: scale(0.82);
    transform-origin: center;
  }

  .mini-candle-grid {
    grid-template-columns: repeat(3, 26px);
    gap: 7px;
    padding: 9px;
  }

  .mini-candle-grid span {
    width: 22px;
    height: 34px;
  }

  .mini-candle-grid span::before {
    left: 4px;
    top: 4px;
    width: 14px;
    height: 23px;
  }

  .game-stage {
    height: auto;
    min-height: 0;
    padding: 8px;
  }

  .game-root {
    height: auto;
    min-height: min(640px, calc(100vh - 120px));
    overflow-x: hidden;
    overflow-y: visible;
  }

  .module-shell,
  .module-main,
  .module-preview,
  .module-toolbar,
  .module-status,
  .game-screen,
  .game-board,
  .candle-game,
  .candle-board,
  .number-master-game,
  .number-master-board,
  .tile-memory-game,
  .tile-memory-board,
  .maze-mind-game,
  .maze-mind-board,
  .quick-math-game,
  .quick-math-panel,
  .majority-game,
  .majority-board,
  .shape-match-game,
  .shape-match-board,
  .color-snap-game,
  .color-snap-board,
  .composition-game,
  .composition-board,
  .mirror-match-game,
  .mirror-match-board,
  .focus-flash-game,
  .focus-flash-board,
  .reaction-run-game,
  .reaction-run-board,
  .more-games-game,
  .more-games-library,
  .word-sprint-game,
  .word-sprint-board,
  .logic-ladder-game,
  .logic-ladder-board {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .module-toolbar,
  .candle-controls,
  .number-master-controls,
  .tile-memory-controls,
  .maze-mind-controls,
  .quick-math-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .module-toolbar > *,
  .candle-controls > *,
  .number-master-controls > *,
  .tile-memory-controls > *,
  .maze-mind-controls > *,
  .quick-math-controls > * {
    max-width: 100%;
  }

  .play-button,
  .module-toolbar button,
  .contact-submit {
    width: 100%;
    max-width: 100%;
  }

  .candle-stats,
  .number-master-stats,
  .tile-memory-stats,
  .maze-mind-stats,
  .quick-math-stats,
  .majority-stats,
  .shape-match-stats,
  .color-snap-stats,
  .composition-stats,
  .mirror-match-stats,
  .focus-flash-stats,
  .reaction-run-stats,
  .word-sprint-stats,
  .logic-ladder-stats {
    grid-template-columns: 1fr;
  }

  .candle-grid,
  .number-master-grid,
  .tile-memory-grid,
  .maze-mind-grid,
  .majority-grid,
  .more-games-grid {
    width: 100%;
    max-width: min(100%, 340px);
    justify-self: center;
  }

  .candle-grid,
  .number-master-grid,
  .tile-memory-grid {
    --candle-tile-size: clamp(54px, 18vw, 78px);
    --number-tile-size: clamp(54px, 18vw, 78px);
    --tile-memory-tile-size: clamp(54px, 18vw, 78px);
  }

  .color-snap-options,
  .composition-options,
  .mirror-match-options,
  .shape-match-options,
  .logic-ladder-sequence,
  .logic-ladder-options,
  .word-sprint-options,
  .quick-math-answer-row,
  .quick-math-result {
    grid-template-columns: 1fr;
  }

  .color-snap-board.is-preview .color-snap-options,
  .logic-ladder-board.is-preview .logic-ladder-sequence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .more-games-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .contact-hero,
  .contact-grid,
  .contact-card,
  .policy-panel,
  .about-panel {
    padding: 16px;
  }

  .contact-grid,
  .about-skill-grid,
  .about-philosophy-grid,
  .about-find-grid,
  .site-footer {
    grid-template-columns: 1fr;
  }

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

  .footer-brand,
  .site-footer > div:last-child {
    grid-column: 1 / -1;
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    max-width: 100%;
  }

  img,
  canvas,
  svg {
    max-width: 100%;
  }

  .about-skill-mark,
  .about-philosophy-icon,
  .about-carousel-icon,
  .word-icon,
  .pattern-icon,
  .math-icon,
  .visual-icon,
  .speed-icon {
    max-width: 100%;
  }
}