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

/* ===== EIGHT-SKILL CATALOG + UNIFIED GAME SCORE UI ===== */
.preschool-hero {
  padding: 24px !important;
  background: linear-gradient(135deg, #f8fafc, #eef2ff) !important;
}

.preschool-hero .hero-left { max-width: 760px; }
.preschool-hero h1 { margin-bottom: 8px; }
.score-nav-label { color: var(--gray-500); font-size: .76rem; font-weight: 700; white-space: nowrap; }

.skill-pillars-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skill-pillar { overflow: hidden; padding-top: 0; text-align: left; }
.skill-pillar:hover { border-color: var(--skill-color); }
.skill-pillar-illus {
  height: 108px;
  margin: 0 -20px 16px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--skill-color) 13%, white), color-mix(in srgb, var(--skill-color) 4%, white));
  overflow: hidden;
}
.skill-pillar-illus img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.skill-pillar-illus span { font-size: 3.25rem; filter: drop-shadow(0 8px 12px rgba(15, 23, 42, .14)); }
.skill-pillar .pillar-meta { justify-content: flex-start; margin-bottom: 16px; }
.skill-pillar .pillar-explore-btn { margin-top: auto; background: var(--skill-color); }

.activity-card { border-top: 4px solid var(--card-accent, var(--accent)); }
.activity-card-illus { position: relative; }
.activity-card-illus img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arcade-card-cover { object-position: center; transition: transform .25s ease, filter .25s ease; }
.arcade-activity-card:hover .arcade-card-cover { transform: scale(1.025); filter: saturate(1.04) contrast(1.02); }
.activity-level-summary { display: none !important; }
.activity-level-summary .difficulty-badge { margin: 0; }
.activity-card-actions { display: flex; flex-direction: column; gap: 9px; }
.game-level-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; width: 100%; }
.game-level-actions:has(.game-level-btn:only-child) { grid-template-columns: 1fr; }
.game-level-btn {
  min-width: 0;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #fff;
  font: 700 .76rem/1.15 'Inter', sans-serif;
  cursor: pointer;
}
.game-level-btn small { max-width: 100%; overflow: hidden; font-size: .57rem; font-weight: 600; opacity: .9; text-overflow: ellipsis; white-space: nowrap; }
.game-level-easy { background: #059669; border-color: #047857; }
.game-level-medium { background: #d97706; border-color: #b45309; }
.game-level-hard { background: #dc2626; border-color: #b91c1c; }
.game-level-btn:hover, .game-level-btn:focus-visible { filter: brightness(.94); transform: translateY(-1px); }
.activity-card-actions .btn-preview { width: 100%; justify-content: center; }
.preview-level-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.wonder-arcade-overlay { background: #eef2ff; }
.wonder-arcade-toolbar {
  position: relative;
  z-index: 4;
  flex: 0 0 52px;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(48px, 1fr);
  align-items: center;
  gap: 12px;
  padding: max(7px, env(safe-area-inset-top)) max(68px, env(safe-area-inset-right)) 7px max(14px, env(safe-area-inset-left));
  color: #173a57;
  background: linear-gradient(90deg, #e0f2fe, #eef2ff 52%, #f5f3ff);
  border-bottom: 1px solid rgba(99, 102, 241, .18);
}
.wonder-arcade-toolbar .wonder-arcade-title {
  position: static;
  min-width: 0;
  max-width: none;
  height: auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.wonder-arcade-toolbar .wonder-arcade-title-name { overflow: hidden; color: #173a57; font-size: .94rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.wonder-arcade-score {
  grid-column: 2;
  min-width: 122px;
  height: 38px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 4px 12px;
  border: 1px solid rgba(79,70,229,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 5px 14px rgba(30,58,138,.1);
}
.wonder-arcade-overlay.wonder-arcade-no-score .wonder-arcade-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(48px, auto);
}
.wonder-arcade-overlay.wonder-arcade-no-score .wonder-arcade-score {
  display: none !important;
}
.wonder-arcade-overlay.wonder-arcade-recording .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-recording .wonder-arcade-close {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.wonder-arcade-overlay.wonder-arcade-child-orientation-prompt .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-child-orientation-prompt .wonder-arcade-close,
.wonder-arcade-overlay.wonder-arcade-is-loading .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-is-loading .wonder-arcade-close,
.wonder-arcade-overlay.wonder-arcade-awaiting-landscape .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-awaiting-landscape .wonder-arcade-close {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.wonder-arcade-score-label { color: #64748b; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
#wonder-arcade-score-value { color: #4338ca; font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1; }
.wonder-arcade-toolbar + .wonder-arcade-close { top: max(6px, env(safe-area-inset-top)); }
.wonder-arcade-frame.is-preparing { visibility: hidden; }

.ps-native-score {
  position: fixed;
  top: max(70px, calc(env(safe-area-inset-top) + 58px));
  right: max(12px, env(safe-area-inset-right));
  z-index: 9100;
  min-width: 116px;
  min-height: 42px;
  display: none;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 13px;
  color: #fff;
  background: rgba(15,23,42,.88);
  box-shadow: 0 8px 22px rgba(15,23,42,.25);
  pointer-events: none;
  backdrop-filter: blur(9px);
}
.ps-native-score.show { display: grid; }
.ps-native-score-label { color: #cbd5e1; font-size: .63rem; font-weight: 800; text-transform: uppercase; }
#ps-native-score-value { font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1; }
.native-game-score {
  z-index: 30;
  min-width: 116px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 14px;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  color: #172033;
  box-shadow: 0 7px 20px rgba(15,23,42,.24);
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.native-game-score > span {
  color: #64748b;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.native-game-score > strong { color: #4338ca; font-size: 1.05rem; line-height: 1; }
.native-game-final-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 190px;
  padding: 10px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff3b0, #ffd166);
  color: #5c3000;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(180,110,0,.18);
}
.native-game-final-score strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.rt-header-score,
.rescue-header-score {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ps-inline-score { display: flex; align-items: baseline; gap: 6px; margin-left: auto; padding: 6px 10px; border-radius: 9px; background: var(--accent-light); color: var(--accent); }
.ps-inline-score span { font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.ps-inline-score strong { font-variant-numeric: tabular-nums; }

@media (max-width: 1020px) {
  .skill-pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .score-nav-label { display: none; }
  .ps-native-score { top: max(60px, calc(env(safe-area-inset-top) + 52px)); right: max(7px, env(safe-area-inset-right)); min-width: 96px; min-height: 36px; padding: 4px 8px; }
  .preview-level-actions { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .wonder-arcade-frame-wrap { padding-top: 0; background: #fff; }
  .wonder-arcade-toolbar {
    flex-basis: 46px;
    min-height: 46px;
    grid-template-columns: minmax(0, 1fr) auto 34px;
    gap: 6px;
    padding: max(5px, env(safe-area-inset-top)) max(44px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left));
  }
  .wonder-arcade-toolbar .wonder-arcade-title-name { font-size: .78rem; }
  .wonder-arcade-score { min-width: 92px; height: 34px; column-gap: 5px; padding: 3px 8px; border-radius: 10px; }
  .wonder-arcade-score-label { font-size: .58rem; }
  #wonder-arcade-score-value { font-size: .9rem; }
  .wonder-arcade-close { top: max(5px, env(safe-area-inset-top)); }
}

@media (max-width: 560px) {
  .skill-pillars-grid { grid-template-columns: 1fr; }
  .pillars-section { padding-inline: 14px; }
  .subject-page-inner { padding-inline: 12px; }
  .activity-card { min-width: 0; }
  .game-level-actions { gap: 5px; }
  .game-level-btn { padding-inline: 4px; font-size: .7rem; }
}

/* ===== WONDER ARCADE STANDALONE GAME INTEGRATION ===== */
.arcade-card-illus {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.arcade-card-illus::before,
.arcade-card-illus::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
  z-index: -1;
}

.arcade-card-illus::before {
  width: 110px;
  height: 110px;
  left: -25px;
  top: -42px;
}

.arcade-card-illus::after {
  width: 82px;
  height: 82px;
  right: -18px;
  bottom: -30px;
}

.arcade-card-emoji {
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  line-height: 1;
  filter: drop-shadow(0 8px 12px rgba(31, 41, 55, 0.18));
  transform: rotate(-4deg);
  transition: transform 180ms ease;
}

.arcade-card-play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(17, 24, 39, 0.78);
  border: 2px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 12px rgba(17, 24, 39, 0.2);
  font-size: 0.72rem;
}

.arcade-activity-card:hover .arcade-card-emoji {
  transform: rotate(2deg) scale(1.08);
}

.wonder-arcade-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #eef2ff;
}

.wonder-arcade-overlay.active {
  display: flex;
}

.wonder-arcade-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 5;
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: #fff;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.26);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 160ms ease, transform 160ms ease;
}

.wonder-arcade-close:hover,
.wonder-arcade-close:focus-visible {
  background: rgba(15, 23, 42, 0.9);
  outline: 3px solid rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
}

.wonder-arcade-close:active {
  transform: scale(0.97);
}

.wonder-arcade-title {
  display: none;
}

.wonder-arcade-frame-wrap {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background: #fff;
}

.wonder-arcade-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.wonder-arcade-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow: hidden;
  color: #20304a;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.9) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 16%, rgba(255,255,255,.72) 0 8px, transparent 9px),
    radial-gradient(circle at 77% 82%, rgba(255,255,255,.66) 0 6px, transparent 7px),
    linear-gradient(145deg, #c9f6ef 0%, #dfe9ff 46%, #f4ddff 100%);
  font-family: 'Inter', sans-serif;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.wonder-arcade-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wonder-arcade-loading-card {
  position: relative;
  z-index: 2;
  width: min(92vw, 510px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 4vh, 30px) clamp(20px, 5vw, 38px) clamp(18px, 3.5vh, 26px);
  border: 3px solid rgba(255,255,255,.94);
  border-radius: 28px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 0 rgba(65, 76, 128, .18), 0 24px 55px rgba(57, 73, 126, .2);
  text-align: center;
  backdrop-filter: blur(14px) saturate(1.15);
  animation: wonderArcadeLoadingArrive 520ms cubic-bezier(.2,.9,.25,1.2) both;
}

.wonder-arcade-loading-visual {
  position: relative;
  width: clamp(118px, 18vh, 154px);
  height: clamp(118px, 18vh, 154px);
  display: grid;
  place-items: center;
  margin-bottom: clamp(10px, 2vh, 16px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 34%, #e4fbff 35% 52%, rgba(168,228,255,.38) 53% 67%, transparent 68%);
}

.wonder-arcade-loading-game-icon {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 62%;
  height: 62%;
  border: 3px solid rgba(255,255,255,.96);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff7c7, #ffe27a);
  box-shadow: 0 7px 0 #efbd45, 0 14px 25px rgba(135, 97, 23, .2);
  font-size: clamp(2.35rem, 7vh, 3.35rem);
  line-height: 1;
  animation: wonderArcadeHeroFloat 1.55s ease-in-out infinite;
}

.wonder-arcade-loading-orbit {
  position: absolute;
  inset: 7%;
  z-index: 1;
  border: 3px dashed rgba(90, 102, 210, .38);
  border-radius: 50%;
  animation: wonderArcadeOrbit 7s linear infinite;
}

.wonder-arcade-loading-orbit-two {
  inset: 18%;
  border-color: rgba(20, 184, 166, .35);
  animation-direction: reverse;
  animation-duration: 4.5s;
}

.wonder-arcade-loading-star {
  position: absolute;
  z-index: 4;
  color: #ffbd2e;
  filter: drop-shadow(0 2px 0 rgba(151, 97, 15, .18));
  animation: wonderArcadeStarPop 1.15s ease-in-out infinite alternate;
}

.wonder-arcade-loading-star-one { top: 1%; right: 14%; font-size: 1.45rem; }
.wonder-arcade-loading-star-two { bottom: 12%; left: 2%; color: #fb7185; font-size: 1.15rem; animation-delay: -420ms; }
.wonder-arcade-loading-star-three { right: 0; bottom: 20%; color: #38bdf8; font-size: 1rem; animation-delay: -760ms; }

.wonder-arcade-loading-copy { width: 100%; min-width: 0; }

.wonder-arcade-loading-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: #087f73;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wonder-arcade-loading-kicker i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #20c9a6;
  box-shadow: 0 0 0 5px rgba(32,201,166,.14);
  animation: wonderArcadeReadyPulse 1s ease-in-out infinite;
}

.wonder-arcade-loading h2 {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #263552;
  font: 900 clamp(1.35rem, 3.5vw, 2rem)/1.12 'Poppins', 'Inter', sans-serif;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wonder-arcade-loading-level {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-top: 9px;
  padding: 4px 12px;
  border: 1px solid #99f6e4;
  border-radius: 999px;
  color: #087f5b;
  background: #e8fff8;
  font-size: .72rem;
  font-weight: 900;
  text-transform: capitalize;
}

.wonder-arcade-loading-level[data-level="medium"] { border-color: #fde68a; color: #a15c06; background: #fffbdf; }
.wonder-arcade-loading-level[data-level="hard"] { border-color: #fecdd3; color: #c9364c; background: #fff1f3; }

.wonder-arcade-loading-messages {
  position: relative;
  height: 22px;
  margin: 13px 0 10px;
  overflow: hidden;
  color: #64748b;
  font-size: .8rem;
  font-weight: 750;
}

.wonder-arcade-loading-messages span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  animation: wonderArcadeLoadingMessage 4.8s ease-in-out infinite;
}

.wonder-arcade-loading-messages span:nth-child(2) { animation-delay: 1.6s; }
.wonder-arcade-loading-messages span:nth-child(3) { animation-delay: 3.2s; }

.wonder-arcade-loading-track {
  position: relative;
  width: 100%;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  border-radius: 999px;
  background: #e7eaf5;
  box-shadow: inset 0 2px 4px rgba(71,85,105,.13);
}

.wonder-arcade-loading-track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 54%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c8a5, #40a8ef, #8b6ff0);
  transform-origin: left center;
  animation: wonderArcadePowerTrail 1.9s cubic-bezier(.42,0,.25,1) infinite;
}

.wonder-arcade-loading-track i {
  position: relative;
  z-index: 2;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #8290aa;
  box-shadow: 0 1px 4px rgba(51,65,85,.2);
}

.wonder-arcade-loading-track i:first-of-type { background: #16b895; }

.wonder-arcade-loading-runner {
  position: absolute;
  top: 50%;
  left: 8%;
  z-index: 3;
  font-size: 1.25rem;
  line-height: 1;
  transform: translate(-50%, -58%);
  filter: drop-shadow(0 2px 2px rgba(51,65,85,.2));
  animation: wonderArcadeRunner 1.9s cubic-bezier(.42,0,.25,1) infinite;
}

.wonder-arcade-loading-steps {
  display: flex;
  justify-content: space-between;
  padding: 5px 1px 0;
  color: #8490a3;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .02em;
}

.wonder-arcade-loading-confetti { position: absolute; inset: 0; pointer-events: none; }
.wonder-arcade-loading-confetti i {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: #f59e0b;
  opacity: .75;
  animation: wonderArcadeConfettiFloat 3.4s ease-in-out infinite alternate;
}
.wonder-arcade-loading-confetti i:nth-child(1) { left: 8%; top: 17%; transform: rotate(18deg); }
.wonder-arcade-loading-confetti i:nth-child(2) { left: 16%; bottom: 17%; width: 8px; height: 18px; background: #fb7185; animation-delay: -.8s; }
.wonder-arcade-loading-confetti i:nth-child(3) { right: 9%; top: 20%; border-radius: 50%; background: #38bdf8; animation-delay: -1.5s; }
.wonder-arcade-loading-confetti i:nth-child(4) { right: 15%; bottom: 13%; width: 16px; height: 7px; background: #8b5cf6; animation-delay: -2.1s; }
.wonder-arcade-loading-confetti i:nth-child(5) { left: 30%; top: 8%; width: 8px; height: 8px; background: #20c9a6; animation-delay: -2.6s; }
.wonder-arcade-loading-confetti i:nth-child(6) { right: 29%; bottom: 7%; background: #ffd84f; animation-delay: -3s; }

.wonder-arcade-loading .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;
}

.wonder-arcade-landscape-gate {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: max(64px, calc(env(safe-area-inset-top) + 54px)) 18px 24px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .38) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 76%, rgba(255, 255, 255, .32) 0 7px, transparent 8px),
    linear-gradient(145deg, #dff7f5, #dbeafe 48%, #f5e8ff);
}

.wonder-arcade-awaiting-landscape .wonder-arcade-landscape-gate {
  display: flex;
}

.wonder-arcade-resume-gate {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: max(72px, calc(env(safe-area-inset-top) + 62px)) 18px 24px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px),
    rgba(13, 27, 50, .72);
  backdrop-filter: blur(10px) saturate(.8);
}

.wonder-arcade-awaiting-resume .wonder-arcade-resume-gate { display: flex; }

.ps-progress-dialog {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: max(72px, calc(env(safe-area-inset-top) + 62px)) 18px 24px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px),
    rgba(13, 27, 50, .78);
  backdrop-filter: blur(10px) saturate(.8);
}

.ps-progress-dialog.show { display: flex; }
.ps-complete-card { --dialog-accent: #f59e0b; --dialog-dark: #92400e; }
.ps-complete-card::before { background: linear-gradient(90deg, #fbbf24 0 35%, #22c55e 35% 67%, #38bdf8 67%); }
.ps-complete-icon { background: linear-gradient(145deg, #fbbf24, #f97316); box-shadow: 0 7px 0 #b45309, 0 14px 28px rgba(180,83,9,.28); }
.ps-best-score-stats > span:first-child { background: linear-gradient(145deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; }
.ps-best-score-stats > span:last-child { background: linear-gradient(145deg, #fffbeb, #fef3c7); border-color: #fbbf24; }
.ps-best-score-stats > span:last-child strong { color: #b45309; }

@media (max-height: 430px) and (min-width: 601px) {
  .ps-progress-dialog { padding: 48px 12px 8px; }
}

.wonder-arcade-resume-card {
  --dialog-accent: #06b6d4;
  --dialog-dark: #155e75;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 430px);
  box-sizing: border-box;
  padding: 28px 26px 24px;
  border: 3px solid #fff;
  border-bottom: 8px solid var(--dialog-dark);
  border-radius: 8px;
  color: #173a57;
  background:
    linear-gradient(180deg, #ecfeff 0 78px, #fff 78px),
    #fff;
  text-align: center;
  box-shadow: 0 28px 65px rgba(2, 8, 23, .38), 0 0 0 3px var(--dialog-accent);
}

.wonder-arcade-resume-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 8px;
  background: linear-gradient(90deg, #22d3ee 0 34%, #8b5cf6 34% 67%, #fbbf24 67%);
}

.wonder-arcade-resume-card.ps-complete-card {
  background: linear-gradient(180deg, #fff7d6 0 78px, #fff 78px);
  box-shadow: 0 28px 65px rgba(2, 8, 23, .4), 0 0 0 3px #fbbf24;
}

.wonder-arcade-resume-card.ps-complete-card::before {
  background: linear-gradient(90deg, #fbbf24 0 35%, #22c55e 35% 67%, #38bdf8 67%);
}

.wonder-arcade-resume-icon.ps-complete-icon {
  background: linear-gradient(145deg, #fbbf24, #f97316);
  box-shadow: 0 7px 0 #b45309, 0 14px 28px rgba(180,83,9,.28);
}

.wonder-arcade-resume-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 8px 0 auto;
  height: 70px;
  opacity: .48;
  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.8) 22px 24px);
}

.ps-dialog-corner {
  position: absolute;
  z-index: -1;
  top: 31px;
  width: 58px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.9);
  background: #fbbf24;
  box-shadow: 0 4px 0 #b45309;
}

.ps-dialog-corner-left { left: -19px; transform: rotate(-34deg); }
.ps-dialog-corner-right { right: -19px; transform: rotate(34deg); background: #8b5cf6; box-shadow: 0 4px 0 #5b21b6; }

.ps-complete-card .ps-dialog-corner-left { background: #22c55e; box-shadow: 0 4px 0 #047857; }
.ps-complete-card .ps-dialog-corner-right { background: #38bdf8; box-shadow: 0 4px 0 #0369a1; }

.wonder-arcade-resume-card > * { position: relative; z-index: 1; }

.wonder-arcade-resume-icon {
  width: 66px;
  height: 66px;
  margin: -4px auto 10px;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #22d3ee, #0284c7);
  box-shadow: 0 7px 0 var(--dialog-dark), 0 14px 28px rgba(8,145,178,.28);
  font-size: 1.55rem;
  transform: rotate(-3deg);
}

.wonder-arcade-resume-badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 5px 11px;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  color: #92400e;
  background: #fef3c7;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.wonder-arcade-resume-card h2 { margin: 0; color: #132f4c; font: 900 1.65rem/1.15 'Poppins', sans-serif; }
.wonder-arcade-resume-card > p { margin: 8px auto 14px; max-width: 360px; color: #526579; font-size: .92rem; font-weight: 600; line-height: 1.45; }
.wonder-arcade-resume-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.wonder-arcade-resume-stats > span { min-width: 0; padding: 10px; border: 2px solid #bae6fd; border-radius: 7px; background: linear-gradient(145deg, #ecfeff, #f0f9ff); }
.wonder-arcade-resume-stats small { display: block; color: #526579; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.wonder-arcade-resume-stats strong { display: block; margin-top: 2px; color: #0e7490; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.ps-resume-score-stat { grid-template-columns: minmax(0, 210px); justify-content: center; }
.ps-resume-score-stat > span { padding: 9px 18px; border-color: #67e8f9; background: #164e63; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.ps-resume-score-stat small { color: #a5f3fc; }
.ps-resume-score-stat strong { color: #fff; font-size: 1.65rem; }
.ps-resume-challenge { margin: 0 0 16px; padding: 9px 12px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #fcd34d; border-radius: 7px; color: #78350f; background: #fffbeb; font-size: .78rem; font-weight: 800; line-height: 1.35; }
.ps-resume-challenge > span[aria-hidden] { color: #f59e0b; font-size: 1rem; }
.wonder-arcade-resume-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.wonder-arcade-resume-actions button { min-height: 50px; border-radius: 7px; font: 900 .9rem/1 'Inter', sans-serif; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.wonder-arcade-resume-actions button > span[aria-hidden] { margin-right: 7px; font-size: 1.05em; }
.wonder-arcade-restart-button { border: 2px solid #0891b2; color: #0e7490; background: #fff; box-shadow: 0 5px 0 #bae6fd; }
.wonder-arcade-resume-button { border: 2px solid #047857; color: #fff; background: linear-gradient(180deg, #10b981, #059669); box-shadow: 0 6px 0 #047857; }
.wonder-arcade-resume-actions button:hover { transform: translateY(-2px); }
.wonder-arcade-resume-actions button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--dialog-dark); }
.wonder-arcade-resume-actions button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }

@media (max-width: 600px) and (orientation: portrait) {
  .wonder-arcade-resume-gate,
  .ps-progress-dialog { padding: max(66px, calc(env(safe-area-inset-top) + 58px)) 12px 14px; }
  .wonder-arcade-resume-card { width: min(100%, 390px); padding: 22px 15px 17px; }
  .wonder-arcade-resume-icon { width: 58px; height: 58px; margin-top: -1px; border-radius: 16px; font-size: 1.3rem; }
  .wonder-arcade-resume-card h2 { font-size: 1.35rem; }
  .wonder-arcade-resume-card > p { margin: 7px auto 11px; font-size: .82rem; }
  .ps-resume-challenge { margin-bottom: 13px; padding: 8px 9px; font-size: .72rem; }
  .wonder-arcade-resume-actions { gap: 8px; }
  .wonder-arcade-resume-actions button { min-height: 46px; font-size: .8rem; }
}

@media (max-width: 340px) and (orientation: portrait) {
  .wonder-arcade-resume-actions { grid-template-columns: 1fr; }
}

@media (max-height: 430px) and (min-width: 601px) {
  .wonder-arcade-resume-gate,
  .ps-progress-dialog { padding: 50px 8px 7px; }
  .wonder-arcade-resume-card {
    width: min(100%, 650px);
    padding: 10px 14px 8px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) minmax(155px, .72fr);
    grid-template-areas:
      'icon badge stats'
      'icon title stats'
      'desc desc challenge'
      'actions actions actions';
    gap: 3px 10px;
    border-bottom-width: 5px;
    background: linear-gradient(90deg, #ecfeff 0 76px, #fff 76px);
    text-align: left;
  }
  .wonder-arcade-resume-card::after { display: none; }
  .ps-dialog-corner { display: none; }
  .wonder-arcade-resume-icon { grid-area: icon; width: 48px; height: 48px; margin: 4px 0 0; border-width: 3px; border-radius: 13px; font-size: 1.05rem; }
  .wonder-arcade-resume-badge { grid-area: badge; justify-self: start; margin: 0; padding: 2px 7px; font-size: .52rem; }
  .wonder-arcade-resume-card h2 { grid-area: title; font-size: 1rem; }
  .wonder-arcade-resume-card > p { grid-area: desc; margin: 2px 0 3px; max-width: none; font-size: .62rem; line-height: 1.2; }
  .wonder-arcade-resume-stats { grid-area: stats; align-self: stretch; margin: 0; gap: 4px; }
  .wonder-arcade-resume-stats > span { padding: 3px 7px; display: grid; align-content: center; text-align: center; }
  .wonder-arcade-resume-stats small { font-size: .48rem; }
  .wonder-arcade-resume-stats strong { font-size: .86rem; }
  .ps-resume-score-stat { grid-template-columns: 1fr; }
  .ps-resume-score-stat strong { font-size: 1.05rem; }
  .ps-resume-challenge { grid-area: challenge; align-self: stretch; margin: 0; padding: 3px 7px; justify-content: flex-start; font-size: .55rem; line-height: 1.15; }
  .ps-resume-challenge > span[aria-hidden] { font-size: .72rem; }
  .wonder-arcade-resume-actions { grid-area: actions; gap: 7px; margin-top: 3px; }
  .wonder-arcade-resume-actions button { min-height: 31px; font-size: .66rem; }
  .ps-complete-card > p { grid-column: desc-start / challenge-end; }
}

.wonder-arcade-landscape-card {
  width: min(100%, 350px);
  box-sizing: border-box;
  padding: 24px 20px 20px;
  border: 3px solid #fff;
  border-bottom: 8px solid #4d3f99;
  border-radius: 8px;
  background: #fff;
  color: #173f56;
  text-align: center;
  box-shadow: 0 18px 42px rgba(44, 59, 99, .24), 0 0 0 2px #7d70c9;
}

.wonder-arcade-landscape-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 10px;
  place-items: center;
  border: 3px solid #ff8b68;
  border-radius: 50%;
  background: #fff3cb;
  font-size: 2rem;
  transform: rotate(90deg);
}

.wonder-arcade-landscape-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e9fffa;
  color: #14785f;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wonder-arcade-landscape-card h2 {
  margin: 11px 0 7px;
  color: #44358b;
  font-size: clamp(1.35rem, 7vw, 1.75rem);
  line-height: 1.08;
}

.wonder-arcade-landscape-card p {
  margin: 0 auto 14px;
  max-width: 285px;
  color: #52677a;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.42;
}

.wonder-arcade-landscape-preview {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  padding: 10px;
  border: 2px solid #bce6e2;
  border-radius: 7px;
  background: #f0fbfa;
  font-size: 1.15rem;
}

.wonder-arcade-preview-tools,
.wonder-arcade-preview-world {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #fff;
}

.wonder-arcade-preview-world {
  font-size: 1.7rem;
}

.wonder-arcade-preview-arrow {
  color: #ef6b57;
  font-size: 1.3rem;
  font-weight: 900;
}

.wonder-arcade-landscape-button {
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: 2px solid #168b70;
  border-bottom: 6px solid #11614f;
  border-radius: 8px;
  background: #20b486;
  color: #fff;
  font: inherit;
  font-size: .86rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.wonder-arcade-landscape-button:focus-visible {
  outline: 4px solid rgba(32, 180, 134, .24);
  outline-offset: 3px;
}

.wonder-arcade-landscape-button:disabled {
  opacity: .68;
  cursor: wait;
}

.wonder-arcade-landscape-card small {
  display: block;
  margin-top: 10px;
  color: #738395;
  font-size: .7rem;
  font-weight: 750;
}

@media (orientation: landscape) {
  .wonder-arcade-landscape-gate {
    display: none !important;
  }
}

@keyframes wonderArcadeLoadingArrive {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wonderArcadeHeroFloat {
  0%, 100% { transform: translateY(-3px) rotate(-2deg); }
  50% { transform: translateY(5px) rotate(2deg); }
}

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

@keyframes wonderArcadeStarPop {
  from { opacity: .55; transform: scale(.75) rotate(-8deg); }
  to { opacity: 1; transform: scale(1.16) rotate(8deg); }
}

@keyframes wonderArcadeReadyPulse {
  50% { transform: scale(.72); box-shadow: 0 0 0 8px rgba(32,201,166,0); }
}

@keyframes wonderArcadeLoadingMessage {
  0%, 4% { opacity: 0; transform: translateY(8px); }
  10%, 28% { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes wonderArcadePowerTrail {
  0% { width: 10%; opacity: .75; }
  62% { width: 76%; opacity: 1; }
  100% { width: 94%; opacity: .82; }
}

@keyframes wonderArcadeRunner {
  0% { left: 10%; transform: translate(-50%, -58%) rotate(-8deg); }
  62% { left: 76%; transform: translate(-50%, -58%) rotate(5deg); }
  100% { left: 94%; transform: translate(-50%, -58%) rotate(-4deg); }
}

@keyframes wonderArcadeConfettiFloat {
  from { margin-top: -5px; transform: rotate(-12deg) scale(.82); }
  to { margin-top: 8px; transform: rotate(18deg) scale(1.12); }
}

@media (max-width: 480px) {
  .wonder-arcade-loading { padding-inline: 12px; }

  .wonder-arcade-loading-card {
    width: min(94vw, 390px);
    padding: 20px 18px 18px;
    border-radius: 23px;
  }

  .wonder-arcade-loading-visual {
    width: clamp(106px, 18vh, 132px);
    height: clamp(106px, 18vh, 132px);
  }

  .wonder-arcade-loading h2 { font-size: clamp(1.22rem, 6vw, 1.55rem); }
  .wonder-arcade-loading-confetti i:nth-child(5),
  .wonder-arcade-loading-confetti i:nth-child(6) { display: none; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .wonder-arcade-loading { padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }

  .wonder-arcade-loading-card {
    width: min(94vw, 680px);
    max-height: calc(100dvh - 16px);
    display: grid;
    grid-template-columns: clamp(104px, 24vh, 140px) minmax(0, 1fr);
    column-gap: clamp(16px, 4vw, 30px);
    padding: clamp(10px, 3vh, 18px) clamp(16px, 4vw, 28px);
    border-radius: 22px;
    text-align: left;
  }

  .wonder-arcade-loading-visual {
    width: clamp(104px, 24vh, 140px);
    height: clamp(104px, 24vh, 140px);
    margin: 0;
  }

  .wonder-arcade-loading-kicker { margin-bottom: 4px; font-size: .65rem; }
  .wonder-arcade-loading h2 { font-size: clamp(1.15rem, 6vh, 1.65rem); }
  .wonder-arcade-loading-level { min-height: 23px; margin-top: 5px; padding: 2px 10px; font-size: .66rem; }
  .wonder-arcade-loading-messages { height: 19px; margin: 7px 0; font-size: .72rem; }
  .wonder-arcade-loading-messages span { justify-content: flex-start; }
  .wonder-arcade-loading-track { height: 13px; }
  .wonder-arcade-loading-runner { font-size: 1.08rem; }
  .wonder-arcade-loading-steps { padding-top: 3px; font-size: .56rem; }
}

@media (max-height: 340px) and (orientation: landscape) {
  .wonder-arcade-loading-card {
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 14px;
    padding: 8px 14px;
    border-width: 2px;
    box-shadow: 0 6px 0 rgba(65,76,128,.18), 0 14px 30px rgba(57,73,126,.18);
  }

  .wonder-arcade-loading-visual { width: 88px; height: 88px; }
  .wonder-arcade-loading-game-icon { border-radius: 17px; border-width: 2px; box-shadow: 0 4px 0 #efbd45; font-size: 2rem; }
  .wonder-arcade-loading h2 { font-size: 1.05rem; }
  .wonder-arcade-loading-messages { height: 17px; margin: 4px 0 5px; font-size: .65rem; }
  .wonder-arcade-loading-track { height: 11px; }
  .wonder-arcade-loading-steps { display: none; }
}

@media (max-width: 600px) {
  .wonder-arcade-frame-wrap {
    display: flex;
    flex-direction: column;
    padding-top: calc(max(5px, env(safe-area-inset-top)) + 36px);
    background: linear-gradient(180deg, #e0f2fe 0 41px, #fff 41px);
  }

  .wonder-arcade-frame {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  .wonder-arcade-close {
    top: max(5px, env(safe-area-inset-top));
    right: max(7px, env(safe-area-inset-right));
    width: 32px;
    height: 32px;
    border-width: 0;
    font-size: 1.35rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
  }

  .wonder-arcade-title {
    position: absolute;
    top: max(5px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    z-index: 3;
    max-width: calc(100% - 62px);
    height: 32px;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    color: #0f3550;
  }

  .wonder-arcade-title-name {
    overflow: hidden;
    color: #173a57;
    font-size: 0.9rem;
    font-weight: 800;
    text-overflow: ellipsis;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .wonder-arcade-close {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arcade-card-emoji,
  .wonder-arcade-close,
  .wonder-arcade-loading {
    transition: none;
  }

  .wonder-arcade-loading-card,
  .wonder-arcade-loading-game-icon,
  .wonder-arcade-loading-orbit,
  .wonder-arcade-loading-star,
  .wonder-arcade-loading-kicker i,
  .wonder-arcade-loading-messages span,
  .wonder-arcade-loading-track-fill,
  .wonder-arcade-loading-runner,
  .wonder-arcade-loading-confetti i { animation: none !important; }

  .wonder-arcade-loading-messages span { display: none; }
  .wonder-arcade-loading-messages span:first-child { display: flex; opacity: 1; transform: none; }
  .wonder-arcade-loading-track-fill { width: 66%; }
  .wonder-arcade-loading-runner { left: 66%; }
}

    :root {
      --coral: #ff6b6b;
      --coral-light: #fff0f0;
      --coral-dark: #c0392b;
      --amber: #F59E0B;
      --amber-light: #fffbeb;
      --amber-dark: #b7860d;
      --teal: #10B981;
      --teal-light: #ecfdf5;
      --teal-dark: #065f46;
      --violet: #2563EB;
      --violet-light: #eff6ff;
      --violet-dark: #1d4ed8;
      --indigo: #1F2937;
      --indigo-mid: #374151;
      --cream: #FAFAF8;
      --white: #ffffff;
      --gray-100: #F3F4F6;
      --gray-200: #E5E7EB;
      --gray-300: #D1D5DB;
      --gray-500: #6B7280;
      --gray-700: #374151;
      --gray-900: #1F2937;
      --accent: #2563EB;
      --accent-light: #eff6ff;
      --accent-dark: #1d4ed8;
      --success: #10B981;
      --success-light: #ecfdf5;
      --warning: #F59E0B;
      --warning-light: #fffbeb;
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
      --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.04);
      --math-bg: #EEF6FF;
      --math-accent: #3B82F6;
      --math-accent-dark: #1d4ed8;
      --logic-bg: #F3F0FF;
      --logic-accent: #7C3AED;
      --logic-accent-dark: #5b21b6;
      --visual-bg: #ECFDF5;
      --visual-accent: #10B981;
      --visual-accent-dark: #065f46;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --transition: all 0.2s ease;
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--cream);
      color: var(--gray-900);
      min-height: 100vh;
      overflow-x: hidden
    }

    /* ===== TOPNAV ===== */
    .topnav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #fff;
      border-bottom: 1px solid var(--gray-200);
      padding: 0 10px
    }

    .topnav-inner {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      gap: 16px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none
    }

    .brand-icon {
      width: 34px;
      height: 34px;
      background: var(--accent);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0
    }

    .brand-text {
      font-family: 'Poppins', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--gray-900);
      letter-spacing: -0.2px;
      white-space: nowrap
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    @media (max-width: 992px) {
      .nav-tabs {
        position: static;
        transform: none;
      }
    }

    .nav-tab {
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--gray-500);
      cursor: pointer;
      border: none;
      background: none;
      transition: var(--transition);
      white-space: nowrap;
      font-family: 'Inter', sans-serif
    }

    .nav-tab:hover {
      color: var(--gray-900);
      background: var(--gray-100)
    }

    .nav-tab.active {
      color: var(--accent);
      background: var(--accent-light);
      font-weight: 600
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .streak-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      background: var(--warning-light);
      border: 1px solid #fde68a;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 0.78rem;
      font-weight: 600;
      color: #92400e;
      white-space: nowrap
    }

    /* ===== PAGES ===== */
    .page {
      display: none;
      animation: fadeIn 0.3s ease
    }

    .page.active {
      display: block
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

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

    /* ===== HERO ===== */
    .hero {
      background: #fff;
      border-bottom: 1px solid var(--gray-200);
      padding: 20px 24px 16px;
      text-align: center
    }

    .hero-inner {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px;
      flex-wrap: wrap
    }

    .hero-left {
      flex: 1;
      min-width: 260px;
      text-align: center
    }

    .hero-eyebrow {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--accent);
      margin-bottom: 12px
    }

    .hero h1 {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.7rem, 3.5vw, 2.4rem);
      color: var(--gray-900);
      line-height: 1.25;
      margin-bottom: 10px;
      font-weight: 700
    }

    .hero-sub {
      font-size: 0.95rem;
      color: var(--gray-500);
      line-height: 1.6;
    }

    .hero-right {
      display: flex;
      gap: 24px;
      flex-wrap: wrap
    }

    .hero-stat {
      background: var(--gray-100);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      text-align: center;
      min-width: 90px
    }

    .hero-stat-num {
      font-family: 'Poppins', sans-serif;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--gray-900);
      line-height: 1
    }

    .hero-stat-label {
      font-size: 0.7rem;
      color: var(--gray-500);
      margin-top: 3px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px
    }

    /* ===== PILLARS ===== */
    .pillars-section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 18px 24px 32px
    }

    .section-header {
      margin-bottom: 14px
    }

    .section-label {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--accent);
      margin-bottom: 6px
    }

    .section-title {
      font-family: 'Poppins', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--gray-900);
      line-height: 1.3
    }

    .section-desc {
      font-size: 0.9rem;
      color: var(--gray-500);
      margin-top: 6px
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    @media(max-width:900px) {
      .pillars-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .pillar-card {
      background: #fff;
      border-radius: var(--radius-xl);
      padding: 20px 20px 22px;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: var(--transition);
      border: 1.5px solid var(--gray-200);
      position: relative;
      text-align: center
    }

    .pillar-card:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      border-color: var(--accent);
      transform: translateY(-3px)
    }

    .pillar-icon-wrap {
      display: none
    }

    .pillar-card h3 {
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 4px
    }

    .pillar-card p {
      color: var(--gray-500);
      font-size: 0.84rem;
      line-height: 1.5;
      margin-bottom: 14px
    }

    .pillar-meta {
      display: flex;
      gap: 16px;
      margin-bottom: 4px;
      justify-content: center
    }

    .pillar-meta-item {
      font-size: 0.78rem;
      color: var(--gray-500);
      display: flex;
      align-items: baseline;
      gap: 4px
    }

    .pillar-meta-item strong {
      font-size: 1rem;
      font-weight: 700;
      color: var(--gray-900)
    }

    .pillar-explore-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 9px 18px;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 0.82rem;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12)
    }

    .pillar-card.math {
      background: var(--math-bg);
      border-color: #bfdbfe
    }

    .pillar-card.math:hover {
      border-color: var(--math-accent)
    }

    .pillar-card.math .pillar-icon-wrap {
      background: rgba(59, 130, 246, 0.12)
    }

    .pillar-card.math .pillar-explore-btn {
      background: var(--math-accent)
    }

    .pillar-card.math .pillar-explore-btn:hover {
      background: var(--math-accent-dark)
    }

    .pillar-card.logic {
      background: var(--logic-bg);
      border-color: #ddd6fe
    }

    .pillar-card.logic:hover {
      border-color: var(--logic-accent)
    }

    .pillar-card.logic .pillar-icon-wrap {
      background: rgba(124, 58, 237, 0.1)
    }

    .pillar-card.logic .pillar-explore-btn {
      background: var(--logic-accent)
    }

    .pillar-card.logic .pillar-explore-btn:hover {
      background: var(--logic-accent-dark)
    }

    .pillar-card.visual {
      background: var(--visual-bg);
      border-color: #a7f3d0
    }

    .pillar-card.visual:hover {
      border-color: var(--visual-accent)
    }

    .pillar-card.visual .pillar-icon-wrap {
      background: rgba(16, 185, 129, 0.1)
    }

    .pillar-card.visual .pillar-explore-btn {
      background: var(--visual-accent)
    }

    .pillar-card.visual .pillar-explore-btn:hover {
      background: var(--visual-accent-dark)
    }

    .pillar-illus {
      height: 148px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: -20px -20px 16px -20px;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      overflow: hidden
    }

    .pillar-levels {
      font-size: 0.78rem;
      color: var(--gray-500);
      margin-bottom: 12px;
      line-height: 1.6
    }

    .pillar-levels span {
      font-weight: 500;
      color: var(--gray-700)
    }

    /* ===== SUBJECT PAGE ===== */
    .subject-page-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 24px 40px
    }

    .subject-header {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 10px;
      flex-wrap: wrap
    }

    .back-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #fff;
      border: 1.5px solid var(--gray-200);
      border-radius: 8px;
      padding: 8px 16px;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.82rem;
      color: var(--gray-600);
      cursor: pointer;
      transition: var(--transition);
      box-shadow: var(--shadow-sm)
    }

    .back-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-light)
    }

    .subject-title-block {
      flex: 1
    }

    .subject-title-block h2 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--gray-900)
    }

    .subject-title-block p {
      color: var(--gray-500);
      font-size: 0.88rem;
      margin-bottom:0.65rem;
      margin-top: 4px;
      line-height: 1.6
    }

    .chapter-section {
      margin-bottom: 48px
    }

    .chapter-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding: 14px 16px;
      border-radius: var(--radius-md);
      background: #fff;
      border: 1px solid var(--gray-200);
      box-shadow: var(--shadow-sm)
    }

    .chapter-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      flex-shrink: 0;
      background: var(--gray-100)
    }

    .chapter-title {
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--gray-900)
    }

    .chapter-subtitle {
      font-size: 0.8rem;
      color: var(--gray-500);
      margin-top: 1px
    }

    .activities-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      align-items: stretch
    }

    /* ===== ACTIVITY CARD ===== */
    .activity-card {
      background: #fff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: var(--transition);
      border: 1.5px solid var(--gray-200);
      position: relative;
      display: flex;
      flex-direction: column
    }

    .activity-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09);
      border-color: var(--gray-300)
    }

    .activity-card:focus-visible {
      outline: 3px solid rgba(37, 99, 235, .3);
      outline-offset: 3px;
    }

    #category-games .activity-card {
      cursor: pointer;
    }

    #category-games .activity-card button {
      cursor: pointer;
    }

    .activity-card.locked {
      opacity: 0.55
    }

    /* Illustration banner at top of each card */
    .activity-card-illus {
      height: 118px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      overflow: hidden;
      flex-shrink: 0
    }

    .activity-card-top {
      padding: 14px 16px 10px;
      position: relative;
      flex: 1
    }

    .activity-emoji {
      font-size: 1.5rem;
      margin-bottom: 8px;
      display: none
    }

    /* hidden — replaced by illus banner */
    .activity-name {
      font-family: 'Poppins', sans-serif;
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 2px
    }

    .activity-skill { display: none !important; }

    .difficulty-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.68rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      letter-spacing: 0.2px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      height: 22px
    }

    .diff-easy {
      background: linear-gradient(135deg, #d1fae5, #a7f3d0);
      color: #065f46;
      border: 1px solid #6ee7b7
    }

    .diff-medium {
      background: linear-gradient(135deg, #fef3c7, #fde68a);
      color: #78350f;
      border: 1px solid #fcd34d
    }

    .diff-hard {
      background: linear-gradient(135deg, #ffedd5, #fed7aa);
      color: #9a3412;
      border: 1px solid #fdba74
    }



    .lock-overlay {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 22px;
      height: 22px;
      background: var(--gray-100);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem
    }

    .activity-progress {
      padding: 0 18px 8px
    }

    .act-prog-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px
    }

    .act-prog-label {
      font-size: 0.67rem;
      font-weight: 500;
      color: var(--gray-500)
    }

    .stars-row {
      display: flex;
      gap: 1px
    }

    .star {
      font-size: 0.72rem
    }

    .activity-card-bottom {
      padding: 10px 18px 14px;
      display: flex;
      gap: 8px;
      border-top: 1px solid var(--gray-100)
    }

    .btn-play {
      flex: 1;
      background: linear-gradient(135deg, #3B82F6, #2563EB);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 9px 0;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 0.78rem;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25)
    }

    .btn-play:hover {
      background: linear-gradient(135deg, #2563EB, #1d4ed8);
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
      transform: translateY(-1px)
    }

    .btn-play.locked-btn {
      background: var(--gray-200);
      cursor: not-allowed;
      color: var(--gray-500);
      box-shadow: none
    }

    .btn-play.locked-btn:hover {
      background: var(--gray-200);
      transform: none;
      box-shadow: none
    }

    .btn-preview {
      background: #fff;
      border: 1.5px solid var(--gray-200);
      border-radius: 8px;
      padding: 9px 14px;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.78rem;
      cursor: pointer;
      color: var(--gray-600);
      transition: var(--transition);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 5px;
      box-shadow: var(--shadow-sm)
    }

    .btn-preview:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-light)
    }

    .level-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px
    }

    .level-pill {
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 0.78rem;
      font-weight: 500;
      cursor: pointer;
      border: 1.5px solid var(--gray-200);
      transition: var(--transition);
      background: #fff;
      color: var(--gray-600);
      font-family: 'Inter', sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: var(--shadow-sm)
    }

    .level-pill:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-light)
    }

    .level-pill.lp-all.active {
      background: var(--gray-900);
      color: #fff;
      border-color: var(--gray-900);
      box-shadow: 0 2px 6px rgba(31, 41, 55, 0.2)
    }

    .level-pill.lp-easy.active {
      background: linear-gradient(135deg, #059669, #10b981);
      color: #fff;
      border-color: #059669;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25)
    }

    .level-pill.lp-medium.active {
      background: linear-gradient(135deg, #b45309, #d97706);
      color: #fff;
      border-color: #b45309;
      box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25)
    }

    .level-pill.lp-hard.active {
      background: linear-gradient(135deg, #c2410c, #ea580c);
      color: #fff;
      border-color: #c2410c;
      box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25)
    }



    /* ===== DASHBOARD ===== */
    .dashboard-inner {
      max-width: 1000px;
      margin: 0 auto;
      padding: 40px 24px
    }

    .dash-page-title {
      font-family: 'Poppins', sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 6px
    }

    .dash-page-sub {
      font-size: 0.85rem;
      color: var(--gray-500);
      margin-bottom: 32px
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 16px;
      margin-bottom: 40px
    }

    .stat-card {
      background: #fff;
      border-radius: var(--radius-md);
      padding: 20px;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--gray-200)
    }

    .stat-card-label {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--gray-500);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px
    }

    .stat-card-num {
      font-family: 'Poppins', sans-serif;
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--gray-900);
      line-height: 1
    }

    .stat-card-sub {
      font-size: 0.75rem;
      color: var(--gray-500);
      margin-top: 4px
    }

    .dash-section-title {
      font-family: 'Poppins', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 14px
    }

    .dash-progress-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 40px
    }

    .pillar-progress-card {
      background: #fff;
      border-radius: var(--radius-md);
      padding: 20px;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--gray-200)
    }

    .pillar-prog-top {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px
    }

    .pillar-prog-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      background: var(--gray-100)
    }

    .pillar-prog-name {
      font-weight: 600;
      font-size: 0.88rem;
      color: var(--gray-900)
    }

    .pillar-prog-pct {
      font-size: 0.75rem;
      color: var(--gray-500);
      margin-top: 1px
    }

    .prog-segments {
      display: flex;
      gap: 2px;
      margin-bottom: 10px
    }

    .prog-seg {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: var(--gray-100)
    }

    .prog-seg.done {
      background: var(--success)
    }

    .prog-seg.in-prog {
      background: var(--warning)
    }

    .prog-details {
      display: flex;
      justify-content: space-between;
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--gray-500)
    }

    /* ===== MODAL ===== */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(4px);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition)
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible
    }

    .modal {
      background: #fff;
      border-radius: var(--radius-lg);
      max-width: 500px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--gray-200);
      transform: scale(0.96) translateY(12px);
      transition: var(--transition)
    }

    .modal-overlay.active .modal {
      transform: scale(1) translateY(0)
    }

    .modal-header {
      padding: 24px 24px 18px;
      border-bottom: 1px solid var(--gray-100);
      position: relative
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 28px;
      height: 28px;
      border-radius: 5px;
      background: var(--gray-100);
      border: none;
      font-size: 0.9rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gray-700);
      transition: var(--transition)
    }

    .modal-close:hover {
      background: var(--gray-200)
    }

    .modal-emoji {
      font-size: 2rem;
      display: block;
      margin-bottom: 10px
    }

    .modal-title {
      font-family: 'Poppins', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 6px
    }

    .modal-badges {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .modal-body {
      padding: 20px 24px
    }

    .modal-section-title {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--gray-500);
      margin-bottom: 6px;
      margin-top: 16px
    }

    .modal-section-title:first-child {
      margin-top: 0
    }

    .example-box {
      background: var(--gray-100);
      border-radius: var(--radius-sm);
      padding: 14px;
      font-size: 0.88rem;
      color: var(--gray-700);
      line-height: 1.6;
      border-left: 3px solid var(--accent)
    }

    .modal-instructions {
      font-size: 0.85rem;
      color: var(--gray-700);
      line-height: 1.7
    }

    .modal-footer {
      padding: 16px 24px 20px;
      border-top: 1px solid var(--gray-100);
      display: flex;
      gap: 10px
    }

    .preview-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .preview-list li {
      font-size: 0.85rem;
      color: var(--gray-700);
      line-height: 1.5;
      padding-left: 22px;
      position: relative
    }

    .preview-list li::before {
      content: '✓';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--teal);
      font-weight: 700
    }

    .preview-skills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px
    }

    .skill-tag {
      display: inline-flex;
      align-items: center;
      font-size: 0.74rem;
      font-weight: 600;
      color: var(--accent-dark);
      background: var(--accent-light);
      border: 1px solid #bfdbfe;
      border-radius: 20px;
      padding: 4px 12px
    }

    .time-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.68rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      background: var(--gray-100);
      color: var(--gray-700);
      border: 1px solid var(--gray-200);
      height: 22px
    }

    .btn-start-learning {
      flex: 1;
      background: linear-gradient(135deg, #3B82F6, #2563EB);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 12px;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 0.88rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
      transition: var(--transition)
    }

    .btn-start-learning:hover {
      background: linear-gradient(135deg, #2563EB, #1d4ed8);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3)
    }

    .btn-modal-play {
      flex: 1;
      background: linear-gradient(135deg, #3B82F6, #2563EB);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 11px;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 0.88rem;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px
    }

    .btn-modal-play:hover {
      background: linear-gradient(135deg, #2563EB, #1d4ed8);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      transform: translateY(-1px)
    }

    .btn-modal-close {
      background: #fff;
      border: 1.5px solid var(--gray-200);
      border-radius: 8px;
      padding: 10px 18px;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.85rem;
      cursor: pointer;
      color: var(--gray-600);
      transition: var(--transition);
      box-shadow: var(--shadow-sm)
    }

    .btn-modal-close:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-light)
    }

    /* ===== PLAY MODAL ===== */
    .play-modal {
      background: #fff;
      border-radius: var(--radius-lg);
      max-width: 580px;
      width: 100%;
      max-height: 92vh;
      overflow-y: auto;
      position: relative;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--gray-200);
      transform: scale(0.96) translateY(12px);
      transition: var(--transition)
    }

    .modal-overlay.active .play-modal {
      transform: scale(1) translateY(0)
    }

    .play-header {
      padding: 18px 22px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--gray-100)
    }

    .play-header-info h3 {
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--gray-900)
    }

    .play-header-info p {
      font-size: 0.73rem;
      color: var(--gray-500);
      margin-top: 1px
    }

    .play-close {
      background: var(--gray-100);
      border: none;
      border-radius: 5px;
      width: 28px;
      height: 28px;
      color: var(--gray-700);
      font-size: 0.9rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition)
    }

    .play-close:hover {
      background: var(--gray-200)
    }

    .play-body {
      padding: 18px 22px 22px
    }

    .play-progress-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px
    }

    .play-prog-bar {
      flex: 1;
      height: 7px;
      background: var(--gray-100);
      border-radius: 4px;
      overflow: hidden
    }

    .play-prog-fill {
      height: 100%;
      background: var(--accent);
      border-radius: 4px;
      transition: width 0.4s ease
    }

    .play-prog-text {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--gray-500);
      white-space: nowrap
    }

    /* Question card — no "Question N" label; shows activity title instead */
    .play-question-card {
      background: #EEF6FF;
      border-radius: var(--radius-md);
      padding: 20px 20px 18px;
      margin-bottom: 14px;
      text-align: center;
      border: 1px solid #bfdbfe
    }

    .play-question-label {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--accent);
      margin-bottom: 8px
    }

    .play-question-text {
      font-family: 'Poppins', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--gray-900);
      line-height: 1.45
    }

    /* Large visual pattern items — 2.5× bigger */
    .play-pattern {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px
    }

    .play-pattern-item {
      font-size: 2.4rem;
      width: 64px;
      height: 64px;
      background: #fff;
      border-radius: 10px;
      border: 1.5px solid var(--gray-200);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .play-pattern-item.blank {
      background: var(--gray-100);
      border: 2px dashed var(--gray-300)
    }

    /* Options — large touch-friendly tiles */
    .play-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 0
    }

    .play-option {
      background: #fff;
      border: 2px solid var(--gray-200);
      border-radius: var(--radius-md);
      padding: 18px 10px;
      text-align: center;
      cursor: pointer;
      transition: var(--transition);
      font-size: 1.65rem;
      color: var(--gray-900);
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05)
    }

    .play-option:hover {
      background: var(--accent-light);
      border-color: var(--accent);
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(37, 99, 235, 0.12)
    }

    .play-option.correct {
      background: #d1fae5;
      border-color: #10b981;
      color: #065f46
    }

    .play-option.wrong {
      background: #fee2e2;
      border-color: #ef4444;
      color: #991b1b
    }

    /* Fixed-height feedback + next — NO layout shift */
    .play-action-area {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .play-feedback {
      border-radius: var(--radius-sm);
      padding: 11px 14px;
      text-align: center;
      font-weight: 600;
      font-size: 0.88rem;
      border: 1.5px solid transparent;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      transition: background 0.2s, border-color 0.2s, color 0.2s
    }

    .play-feedback.correct {
      color: #065f46;
      background: #d1fae5;
      border-color: #6ee7b7
    }

    .play-feedback.wrong {
      color: #991b1b;
      background: #fee2e2;
      border-color: #fca5a5
    }

    /* Next button always present but invisible until needed — zero layout shift */
    .play-btn-next {
      width: 100%;
      background: linear-gradient(135deg, #3B82F6, #2563EB);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 13px;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      cursor: pointer;
      transition: var(--transition);
      opacity: 0;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
      min-height: 46px
    }

    .play-btn-next.show {
      opacity: 1;
      pointer-events: auto
    }

    .play-btn-next:hover {
      background: linear-gradient(135deg, #2563EB, #1d4ed8);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3)
    }

    .play-complete {
      text-align: center;
      padding: 16px 0
    }

    .play-complete-icon {
      font-size: 3rem;
      margin-bottom: 12px
    }

    .play-complete h3 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 6px
    }

    .play-complete p {
      color: var(--gray-500);
      margin-bottom: 16px;
      font-size: 0.9rem
    }

    .play-complete-stars {
      font-size: 1.8rem;
      margin-bottom: 16px;
      letter-spacing: 6px
    }

    /* ===== MISC ===== */
    .completion-ring {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--gray-500)
    }

    .ring {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: conic-gradient(var(--teal) var(--pct, 0%), var(--gray-100) 0);
      display: inline-block
    }

    @media(max-width:768px) {
      .topnav-inner {
        height: 52px;
      }

      .nav-tabs {
        display: none
      }

      .mobile-nav {
        display: flex;
        justify-content: space-around;
        background: #fff;
        padding: 8px 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        border-top: 1px solid var(--gray-200)
      }

      .mobile-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        background: none;
        border: none;
        color: var(--gray-500);
        font-family: 'Inter', sans-serif;
        font-size: 0.6rem;
        font-weight: 500;
        cursor: pointer;
        padding: 4px 10px;
        transition: var(--transition)
      }

      .mobile-nav-btn.active,
      .mobile-nav-btn:hover {
        color: var(--accent)
      }

      .mobile-nav-icon {
        font-size: 1.2rem
      }

      body {
        padding-bottom: 68px
      }

      .hero {
        padding: 32px 20px
      }

      .activities-grid {
        grid-template-columns: 1fr
      }

      .activities-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .play-options {
        grid-template-columns: repeat(2, 1fr)
      }

      .pillars-grid {
        grid-template-columns: 1fr
      }
    }

    @media(min-width:769px) {
      .mobile-nav {
        display: none
      }
    }

    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      background: var(--gray-900);
      color: #fff;
      padding: 10px 20px;
      border-radius: 6px;
      font-weight: 500;
      font-size: 0.85rem;
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 2000;
      pointer-events: none;
      white-space: nowrap
    }

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

    @media(min-width:769px) {
      .toast {
        bottom: 24px
      }
    }

    /* ===== BUSY BOOK GAME — PREMIUM VELCRO BOOK ===== */
    .bb-overlay {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transition: all 0.35s ease;
      overflow: hidden;
      background: radial-gradient(ellipse at 50% 30%, #f5e8d0 0%, #e8d4a8 45%, #d4b87a 100%)
    }

    .bb-overlay.active {
      opacity: 1;
      visibility: visible
    }

    /* Top bar */
    .bb-topbar {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 18px;
      background: linear-gradient(180deg, rgba(90, 45, 8, 0.94), rgba(70, 32, 5, 0.97));
      border-bottom: 3px solid #a0622a;
      flex-shrink: 0;
      gap: 12px;
      box-shadow: 0 3px 16px rgba(0, 0, 0, 0.35)
    }

    .bb-brand {
      font-family: 'Poppins', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      color: #ffd580;
      display: flex;
      align-items: center;
      gap: 7px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }

    .bb-progress-wrap {
      flex: 1;
      max-width: 280px;
      margin-left: auto;
      margin-right: 46px
    }

    .bb-header-score {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .bb-prog-label {
      font-size: 0.68rem;
      font-weight: 600;
      color: #ffd580;
      margin-bottom: 3px;
      text-align: center
    }

    .bb-prog-bar {
      height: 9px;
      background: rgba(0, 0, 0, 0.35);
      border-radius: 6px;
      overflow: hidden;
      border: 1.5px solid rgba(255, 200, 80, 0.3)
    }

    .bb-prog-fill {
      height: 100%;
      background: linear-gradient(90deg, #ffd700, #ff9800);
      border-radius: 6px;
      transition: width 0.5s cubic-bezier(.34, 1.56, .64, 1);
      box-shadow: 0 0 8px rgba(255, 180, 0, 0.6)
    }

    .bb-close {
      background: rgba(255, 255, 255, 0.14);
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      border-radius: 8px;
      width: 34px;
      height: 34px;
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      flex-shrink: 0;
      font-weight: 700
    }

    .bb-close:hover {
      background: rgba(255, 255, 255, 0.26)
    }

    /* Book stage area */
    .bb-book-stage {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 10px 4px;
      min-height: 0;
      position: relative
    }

    /* Open book container — looks like a real open hardcover */
    .bb-book {
      display: flex;
      align-items: stretch;
      background: transparent;
      position: relative;
      width: 100%;
      max-width: 760px;
      filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.45)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3));
      border-radius: 10px;
      flex: 1;
      min-height: 0;
      max-height: 100%;
    }

    /* Individual page */
    .bb-page {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      position: relative;
      overflow: hidden;
    }

    .bb-page-left {
      border-radius: 10px 0 0 10px;
      background: linear-gradient(108deg, #fffef8 0%, #fdfaf0 60%, #f8f2e0 100%);
      border: 2px solid #e8d8a0;
      border-right: none;
      box-shadow: inset -8px 0 20px rgba(0, 0, 0, 0.06);
    }

    .bb-page-right {
      border-radius: 0 10px 10px 0;
      background: linear-gradient(252deg, #fffef8 0%, #fdfaf0 60%, #f8f2e0 100%);
      border: 2px solid #e8d8a0;
      border-left: none;
      box-shadow: inset 8px 0 20px rgba(0, 0, 0, 0.06);
    }

    /* Page notebook lines */
    .bb-page::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image: repeating-linear-gradient(180deg, transparent, transparent 30px, rgba(100, 160, 220, 0.13) 30px, rgba(100, 160, 220, 0.13) 31px);
      background-position: 0 58px;
    }

    /* Decorative corner fold */
    .bb-page-left::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 22px;
      height: 22px;
      background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.07) 50%);
      z-index: 2;
    }

    .bb-page-right::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 22px;
      height: 22px;
      background: linear-gradient(225deg, transparent 50%, rgba(0, 0, 0, 0.07) 50%);
      z-index: 2;
    }

    /* Page header badge */
    .bb-page-header {
      text-align: center;
      padding: 10px 10px 8px;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
    }

    .bb-page-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 18px;
      border-radius: 50px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.3px;
      position: relative;
    }

    .bb-page-left .bb-page-badge {
      background: linear-gradient(135deg, #2ecc71, #1a9950);
      color: #fff;
      box-shadow: 0 4px 0 #14753c, 0 6px 18px rgba(46, 204, 113, 0.35);
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .bb-page-right .bb-page-badge {
      background: linear-gradient(135deg, #e74c3c, #c0392b);
      color: #fff;
      box-shadow: 0 4px 0 #922b21, 0 6px 18px rgba(231, 76, 60, 0.35);
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .bb-page-badge-icon {
      font-size: 1.4rem;
      filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25))
    }

    .bb-page-badge-text {
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.5px
    }

    /* Drop zone with velcro spots */
    .bb-drop-zone {
      flex: 1;
      padding: 8px 10px 10px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
      gap: 8px;
      position: relative;
      z-index: 1;
      min-height: 80px;
    }

    .bb-drop-zone.drag-over {
      background: rgba(255, 200, 50, 0.08);
      outline: 3px dashed rgba(255, 180, 0, 0.6);
      outline-offset: -5px;
      border-radius: 8px;
    }

    /* Velcro spots (empty placeholders) */
    .bb-velcro-spot {
      width: 72px;
      height: 80px;
      border-radius: 12px;
      border: 2px dashed rgba(160, 120, 60, 0.35);
      background: rgba(200, 160, 80, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-shrink: 0;
      box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    /* Velcro texture lines */
    .bb-velcro-spot::before {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 8px;
      background: repeating-linear-gradient(45deg, rgba(180, 130, 50, 0.10) 0px, rgba(180, 130, 50, 0.10) 2px, transparent 2px, transparent 6px);
    }

    /* PLACED card — attached to page with random rotation */
    .bb-placed-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 7px 9px;
      border-radius: 14px;
      min-width: 68px;
      cursor: default;
      position: relative;
      flex-shrink: 0;
      animation: bbVelcroStick 0.38s cubic-bezier(.34, 1.56, .64, 1) both;
    }

    .bb-placed-card.fruit {
      background: linear-gradient(145deg, #f0fff0, #d8f5d8);
      border: 2.5px solid #4caf50;
      box-shadow: 0 4px 12px rgba(76, 175, 80, 0.28), 0 2px 0 #2e7d32, inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .bb-placed-card.notfruit {
      background: linear-gradient(145deg, #fff5f5, #ffd8d8);
      border: 2.5px solid #ef5350;
      box-shadow: 0 4px 12px rgba(239, 83, 80, 0.25), 0 2px 0 #b71c1c, inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .bb-placed-card .card-emoji {
      font-size: 1.7rem;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14))
    }

    .bb-placed-card .card-label {
      font-size: 0.62rem;
      font-weight: 700;
      color: #333;
      text-align: center;
      line-height: 1.1
    }

    /* Velcro stitching strip on placed card */
    .bb-placed-card::before {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 10px;
      right: 10px;
      height: 3px;
      background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0px, rgba(0, 0, 0, 0.14) 2px, transparent 2px, transparent 5px);
      border-radius: 2px;
    }

    /* Glossy laminate sheen on placed card */
    .bb-placed-card::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 4px;
      right: 4px;
      height: 35%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0));
      border-radius: 10px 10px 50% 50%;
      pointer-events: none;
    }

    @keyframes bbVelcroStick {
      0% {
        transform: var(--rot, rotate(0deg)) scale(0.55) translateY(-12px);
        opacity: 0
      }

      55% {
        transform: var(--rot, rotate(0deg)) scale(1.1) translateY(3px)
      }

      75% {
        transform: var(--rot, rotate(0deg)) scale(0.96)
      }

      100% {
        transform: var(--rot, rotate(0deg)) scale(1);
        opacity: 1
      }
    }

    /* ── SPINE — realistic spiral binding ── */
    .bb-spine-wrap {
      width: 28px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      padding: 10px 0;
      background: linear-gradient(180deg, #8a8a8a 0%, #c0c0c0 20%, #b0b0b0 50%, #c8c8c8 80%, #8a8a8a 100%);
      position: relative;
      z-index: 10;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2), -2px 0 10px rgba(0, 0, 0, 0.2);
    }

    .bb-coil {
      width: 22px;
      height: 18px;
      border-radius: 50%;
      border: 3.5px solid #555;
      background: linear-gradient(145deg, #e8e8e8, #a0a0a0);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.4);
      flex-shrink: 0;
    }

    /* ── CARD TRAY — full-width bottom section, natural flow ── */
    .bb-tray-wrap {
      flex-shrink: 0;
      padding: 6px 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    /* Instruction banner — sits directly above the tray in normal flow */
    .bb-tray-banner {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      color: #5c3000;
      background: linear-gradient(135deg, #fff8e8, #ffefc8);
      border: 1.5px solid #e8c870;
      border-radius: 50px;
      padding: 7px 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7);
      width: fit-content;
      align-self: center;
    }

    .bb-tray {
      border-radius: 18px;
      padding: 12px 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      justify-content: center;
      min-height: 92px;
      align-items: center;
      position: relative;
      background:
        repeating-linear-gradient(90deg, transparent 0, transparent 26px, rgba(0, 0, 0, 0.03) 26px, rgba(0, 0, 0, 0.031) 27px),
        linear-gradient(170deg, #c89450 0%, #b07828 40%, #965e18 70%, #7a4a0e 100%);
      box-shadow:
        inset 0 5px 14px rgba(0, 0, 0, 0.28),
        inset 0 -2px 6px rgba(255, 190, 80, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 5px 0 #5c3508,
        0 3px 0 #4a2c06;
      outline: 3px solid #7a4810;
      outline-offset: -1px;
    }

    .bb-tray::before {
      content: '';
      position: absolute;
      inset: 6px;
      border-radius: 13px;
      border: 1.5px dashed rgba(255, 255, 255, 0.16);
      pointer-events: none
    }

    .bb-tray::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 38%;
      border-radius: 18px 18px 0 0;
      background: linear-gradient(180deg, rgba(255, 220, 140, 0.18) 0%, transparent 100%);
      pointer-events: none
    }

    /* ── DRAGGABLE CARDS ── laminated busy-book cards */
    .bb-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 9px 11px;
      border-radius: 16px;
      background: linear-gradient(145deg, #ffffff 0%, #fdfaf3 60%, #f5eedc 100%);
      border: 2.5px solid #e8c870;
      box-shadow:
        0 5px 0 #b8962a,
        0 8px 18px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
      cursor: grab;
      user-select: none;
      transition: transform 0.2s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.2s ease;
      min-width: 70px;
      position: relative;
      -webkit-tap-highlight-color: transparent;
    }

    /* Laminate sheen */
    .bb-card::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 4px;
      right: 4px;
      height: 38%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.05));
      border-radius: 12px 12px 50% 50%;
      pointer-events: none;
    }

    /* Velcro dots on bottom of card */
    .bb-card::after {
      content: '';
      position: absolute;
      bottom: 5px;
      left: 10px;
      right: 10px;
      height: 3px;
      background: repeating-linear-gradient(90deg, rgba(180, 130, 30, 0.45) 0px, rgba(180, 130, 30, 0.45) 2px, transparent 2px, transparent 5px);
      border-radius: 2px;
    }

    .bb-card:hover {
      transform: translateY(-8px) rotate(1.5deg) scale(1.05);
      box-shadow:
        0 14px 0 #b8962a,
        0 18px 30px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .bb-card.dragging {
      cursor: grabbing;
      transform: translateY(-10px) rotate(4deg) scale(1.1);
      box-shadow: 0 22px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.95);
      z-index: 9999;
      transition: transform 0.12s ease;
    }

    .bb-card .card-emoji {
      font-size: 2.1rem;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.14));
      position: relative;
      z-index: 1
    }

    .bb-card .card-label {
      font-size: 0.66rem;
      font-weight: 700;
      color: #5c3000;
      text-align: center;
      line-height: 1.15;
      position: relative;
      z-index: 1
    }

    .bb-card.shake {
      animation: bbShake 0.42s ease
    }

    @keyframes bbShake {

      0%,
      100% {
        transform: translateX(0) rotate(0)
      }

      20% {
        transform: translateX(-10px) rotate(-4deg)
      }

      40% {
        transform: translateX(10px) rotate(4deg)
      }

      60% {
        transform: translateX(-6px) rotate(-2deg)
      }

      80% {
        transform: translateX(6px) rotate(2deg)
      }
    }

    /* Ghost drag element */
    #bb-ghost {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 9px 11px;
      border-radius: 16px;
      background: linear-gradient(145deg, #fff, #fdf8ee);
      border: 2.5px solid #e8c870;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      transform: rotate(5deg) scale(1.12);
      min-width: 70px;
    }

    /* Sparkle */
    .bb-sparkle {
      position: fixed;
      pointer-events: none;
      z-index: 9998;
      font-size: 1.5rem;
      animation: bbSparkle 0.75s ease forwards
    }

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

      55% {
        transform: scale(1.5) translateY(-28px);
        opacity: 1
      }

      100% {
        transform: scale(0.8) translateY(-56px);
        opacity: 0
      }
    }

    /* Feedback toast */
    .bb-feedback {
      position: fixed;
      bottom: 170px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: #fff;
      border: 2.5px solid;
      border-radius: 16px;
      padding: 10px 24px;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      opacity: 0;
      transition: all 0.3s;
      z-index: 9990;
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    }

    .bb-feedback.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    .bb-feedback.good {
      border-color: #4caf50;
      color: #1b5e20;
      background: #f1fff1
    }

    .bb-feedback.bad {
      border-color: #ef5350;
      color: #b71c1c;
      background: #fff5f5
    }

    /* Completion */
    .bb-complete {
      position: fixed;
      inset: 0;
      z-index: 9995;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      animation: fadeIn 0.4s ease;
    }

    .bb-complete-card {
      background: linear-gradient(145deg, #fffef0, #fff8dc);
      border: 3px solid #d4a030;
      border-radius: 28px;
      padding: 32px 40px;
      text-align: center;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      animation: bbCompIn 0.45s cubic-bezier(.34, 1.56, .64, 1);
    }

    @keyframes bbCompIn {
      from {
        transform: scale(0.6) translateY(40px);
        opacity: 0
      }

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

    .bb-complete-emoji {
      font-size: 4rem;
      display: block;
      margin-bottom: 4px;
      animation: bbBounce 0.6s cubic-bezier(.34, 1.56, .64, 1) 0.2s both
    }

    @keyframes bbBounce {
      0% {
        transform: scale(0)
      }

      70% {
        transform: scale(1.22)
      }

      100% {
        transform: scale(1)
      }
    }

    .bb-complete-card h2 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.75rem;
      font-weight: 700;
      color: #5c2d00;
      margin: 0 0 6px
    }

    .bb-complete-card p {
      color: #9a6030;
      font-size: 0.9rem;
      margin: 0 0 6px
    }

    .bb-complete-stars {
      font-size: 2.2rem;
      letter-spacing: 8px;
      display: block;
      margin: 6px 0 10px
    }

    .bb-badge {
      background: linear-gradient(135deg, #ffd700, #ffa500);
      border-radius: 50%;
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.4rem;
      box-shadow: 0 4px 18px rgba(255, 165, 0, 0.45), 0 0 0 4px rgba(255, 215, 0, 0.3);
      animation: bbSpin 0.8s ease 0.1s both;
      margin: 0 auto 8px
    }

    @keyframes bbSpin {
      0% {
        transform: rotate(-180deg) scale(0)
      }

      100% {
        transform: rotate(0deg) scale(1)
      }
    }

    .bb-play-again {
      background: linear-gradient(135deg, #f5a623, #e08020);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 13px 36px;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 0 5px 0 #a05010, 0 8px 20px rgba(240, 120, 0, 0.32);
      transition: all 0.2s;
      margin-top: 6px
    }

    .bb-play-again:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 0 #a05010, 0 14px 28px rgba(240, 120, 0, 0.38)
    }

    .bb-confetti-container {
      position: fixed;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 9985
    }

    .bb-confetti-piece {
      position: absolute;
      border-radius: 2px;
      animation: bbConfettiFall linear forwards
    }

    @keyframes bbConfettiFall {
      0% {
        transform: translateY(-20px) rotate(0deg) scale(1);
        opacity: 1
      }

      100% {
        transform: translateY(110vh) rotate(720deg) scale(0.7);
        opacity: 0
      }
    }

    /* ===== SHAPE CODER GAME — 4-RAIL TOY ===== */
    /* Busy Book mobile: compact book + 4-card tray row */
    @media (max-width: 640px) {
      .bb-overlay {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        background:
          linear-gradient(180deg, rgba(14, 116, 144, 0.18), transparent 38%),
          radial-gradient(circle at 50% 18%, #fff7d6 0%, #dfc17b 48%, #8b5a22 100%);
      }

      .bb-topbar {
        min-height: 48px;
        padding: 7px 9px;
        gap: 8px;
        border-bottom-width: 2px;
      }

      .bb-brand {
        flex: 0 0 auto;
        min-width: 0;
        font-size: 0.78rem;
        gap: 5px;
        white-space: nowrap;
      }

      .bb-brand > span {
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .bb-progress-wrap {
        min-width: 0;
        max-width: none;
      }

      .bb-prog-label {
        margin-bottom: 2px;
        font-size: 0.58rem;
        line-height: 1.1;
      }

      .bb-prog-bar {
        height: 7px;
        border-width: 1px;
      }

      .bb-close {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 0.9rem;
      }

      .bb-book-stage {
        flex: 0 0 auto;
        padding: 7px 8px 4px;
      }

      .bb-book {
        width: 100%;
        max-width: 360px;
        height: clamp(128px, 28dvh, 168px);
        flex: 0 0 auto;
        filter: drop-shadow(0 9px 18px rgba(0, 0, 0, 0.34));
      }

      .bb-page-left {
        border-radius: 9px 0 0 9px;
        border-width: 2px;
      }

      .bb-page-right {
        border-radius: 0 9px 9px 0;
        border-width: 2px;
      }

      .bb-page::before {
        background-position: 0 34px;
        background-image: repeating-linear-gradient(180deg, transparent, transparent 20px, rgba(100, 160, 220, 0.13) 20px, rgba(100, 160, 220, 0.13) 21px);
      }

      .bb-page-header {
        padding: 6px 4px 4px;
      }

      .bb-page-badge {
        max-width: 92%;
        gap: 3px;
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 0.62rem;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.14) !important;
      }

      .bb-page-badge-icon {
        font-size: 0.95rem;
      }

      .bb-page-badge-text {
        font-size: 0.56rem;
        letter-spacing: 0.7px;
      }

      .bb-drop-zone {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-content: start;
        justify-items: center;
        gap: 4px;
        padding: 4px 5px 6px;
        min-height: 0;
      }

      .bb-velcro-spot {
        width: clamp(31px, 11vw, 42px);
        height: clamp(34px, 12vw, 46px);
        border-radius: 8px;
        border-width: 1.5px;
      }

      .bb-velcro-spot::before {
        inset: 3px;
        border-radius: 6px;
      }

      .bb-placed-card {
        width: 100%;
        height: 100%;
        min-width: 0;
        gap: 1px;
        padding: 4px 3px 6px;
        border-radius: 8px;
        border-width: 1.5px !important;
      }

      .bb-placed-card .card-emoji {
        font-size: clamp(1rem, 5vw, 1.3rem);
      }

      .bb-placed-card .card-label {
        max-width: 100%;
        font-size: 0.42rem;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .bb-placed-card::before,
      .bb-placed-card::after {
        display: none;
      }

      .bb-spine-wrap {
        width: 13px;
        padding: 6px 0;
        box-shadow: 1px 0 5px rgba(0, 0, 0, 0.22), -1px 0 5px rgba(0, 0, 0, 0.18);
      }

      .bb-coil {
        width: 12px;
        height: 9px;
        border-width: 2px;
      }

      .bb-coil:nth-child(n + 8) {
        display: none;
      }

      .bb-tray-wrap {
        flex: 0 0 auto;
        min-height: 0;
        padding: 5px 9px 9px;
        gap: 6px;
      }

      .bb-tray-banner {
        width: 100%;
        padding: 7px 10px;
        border-radius: 10px;
        font-size: 0.66rem;
        line-height: 1.25;
      }

      .bb-tray {
        flex: 0 0 auto;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: clamp(78px, 16dvh, 96px);
        align-items: stretch;
        justify-items: stretch;
        gap: 6px;
        padding: 9px;
        border-radius: 12px;
        outline-width: 2px;
        box-shadow:
          inset 0 4px 10px rgba(0, 0, 0, 0.24),
          0 5px 12px rgba(0, 0, 0, 0.24),
          0 3px 0 #5c3508;
      }

      .bb-tray::before {
        inset: 5px;
        border-radius: 9px;
      }

      .bb-tray::after {
        border-radius: 12px 12px 0 0;
      }

      .bb-card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        gap: 2px;
        padding: 5px 3px 7px;
        border-radius: 10px;
        border-width: 2px;
        box-shadow:
          0 3px 0 #b8962a,
          0 5px 10px rgba(0, 0, 0, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.95);
      }

      .bb-card:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow:
          0 5px 0 #b8962a,
          0 8px 14px rgba(0, 0, 0, 0.18),
          inset 0 1px 0 rgba(255, 255, 255, 0.95);
      }

      .bb-card.dragging {
        transform: translateY(-5px) rotate(3deg) scale(1.04);
      }

      .bb-card .card-emoji {
        font-size: clamp(1.35rem, 7vw, 1.85rem);
      }

      .bb-card .card-label {
        width: 100%;
        font-size: clamp(0.48rem, 2.1vw, 0.62rem);
        line-height: 1.05;
        overflow-wrap: anywhere;
      }

      .bb-card::before {
        left: 3px;
        right: 3px;
        border-radius: 8px 8px 50% 50%;
      }

      .bb-card::after {
        bottom: 4px;
        left: 7px;
        right: 7px;
        height: 2px;
      }

      #bb-ghost {
        min-width: 58px;
        padding: 6px 7px;
        border-radius: 10px;
      }

      #bb-ghost .card-emoji {
        font-size: 1.55rem;
      }

      #bb-ghost .card-label {
        font-size: 0.54rem;
      }

      .bb-feedback {
        bottom: 16px;
        max-width: calc(100vw - 24px);
        padding: 8px 12px;
        border-radius: 10px;
        font-size: 0.72rem;
        white-space: normal;
        text-align: center;
      }

      .bb-complete-card {
        width: min(300px, calc(100vw - 28px));
        padding: 22px 18px;
        border-radius: 18px;
      }

      .bb-complete-card h2 {
        font-size: 1.35rem;
      }

      .bb-complete-emoji {
        font-size: 3rem;
      }

      .bb-complete-stars {
        font-size: 1.6rem;
        letter-spacing: 4px;
      }
    }

    .sc-overlay {
      position: fixed;
      inset: 0;
      background: #0c1738;
      z-index: 3000;
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: 0;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease
    }

    .sc-overlay.active {
      opacity: 1;
      visibility: visible
    }

    /* Full-page game shell (both web and mobile) — the content column stays centred. */
    .sc-shell {
      background:
        radial-gradient(120% 45% at 50% 0%, rgba(59, 130, 246, 0.2) 0%, transparent 55%),
        linear-gradient(165deg, #1e3168 0%, #142451 45%, #0c1738 100%);
      border-radius: 0;
      width: 100%;
      max-width: 100%;
      min-height: 100vh;
      max-height: 100vh;
      overflow-y: auto;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch
    }

    .sc-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px 6px;
      gap: 10px;
      flex-wrap: nowrap;
    }

    /* Subtitle under the header */
    .sc-subtitle {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      color: #93c5fd;
      letter-spacing: 0.5px;
      margin: 0 0 8px;
    }

    .sc-subtitle span {
      color: #fcd34d;
      font-size: 0.8rem;
    }

    .sc-brand {
      font-family: 'Poppins', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
    }

    .sc-brand span {
      color: #FFD700
    }

    .sc-close {
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 8px;
      width: 28px;
      height: 28px;
      color: #fff;
      font-size: 0.9rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
      flex-shrink: 0
    }

    .sc-close:hover {
      background: rgba(255, 255, 255, 0.2)
    }

    /* Difficulty pills — their own centred row */
    .sc-level-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      padding: 2px 16px 4px;
    }

    .sc-lvl-btn {
      padding: 7px 20px;
      border-radius: 22px;
      border: 1.5px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.72);
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .sc-lvl-btn.active {
      border-color: #34d399;
      background: linear-gradient(180deg, #34d399, #10b981);
      color: #fff;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4)
    }

    /* Challenge Card — 30% smaller */
    .sc-card-holder {
      margin: 6px 20px 6px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 10px 12px 8px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center
    }

    .sc-card-label {
      font-size: 0.64rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #fff;
      background: linear-gradient(180deg, #3b82f6, #2563eb);
      padding: 5px 16px;
      border-radius: 20px;
      margin-bottom: -9px;
      position: relative;
      z-index: 12;
      box-shadow: 0 3px 8px rgba(37, 99, 235, 0.45);
      text-align: center
    }

    .sc-puzzle-card {
      background: linear-gradient(150deg, #ffffff 0%, #fafafa 80%, #f0f0f0 100%);
      border-radius: 10px;
      padding: 10px 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      position: relative;
      width: 100%;
      max-width: 200px;
      border: 1px solid #e0e0e0;
    }

    .sc-puzzle-card::before,
    .sc-puzzle-card::after {
      content: '';
      position: absolute;
      top: -10px;
      width: 8px;
      height: 18px;
      border-radius: 4px;
      border: 2px solid #b0b0b0;
      background: linear-gradient(90deg, #d8d8d8, #ffffff 40%, #a0a0a0);
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
      z-index: 10;
    }

    .sc-puzzle-card::before {
      left: 24%;
    }

    .sc-puzzle-card::after {
      right: 24%;
    }

    .sc-card-checkmark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-8deg);
      background: rgba(16, 185, 129, 0.95);
      color: #fff;
      padding: 5px 12px;
      border-radius: 30px;
      font-size: 0.78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      z-index: 15;
      pointer-events: none;
      border: 2px solid #fff;
      animation: popCheck 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }

    @keyframes popCheck {
      from {
        transform: translate(-50%, -50%) scale(0.6) rotate(-25deg);
        opacity: 0;
      }

      to {
        transform: translate(-50%, -50%) scale(1) rotate(-8deg);
        opacity: 1;
      }
    }

    /* Physical Board — wooden toy aesthetic */
    .sc-board-frame {
      background: linear-gradient(160deg, #8B5E3C 0%, #6B4226 100%);
      border-radius: 16px;
      border: 4px solid #5a3419;
      box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
      width: min(260px, 80vw);
      aspect-ratio: 420 / 480;
      margin: 4px auto 8px;
      position: relative;
      padding: 0;
      overflow: visible;
    }

    .sc-board-area {
      width: 100%;
      height: 100%;
      background: linear-gradient(170deg, #c8955a 0%, #a06835 60%, #8B5E3C 100%);
      position: relative;
      overflow: visible;
      /* pieces must never be clipped */
      border-radius: 15px;
    }

    /* wood grain lines */
    .sc-board-area::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(88deg,
          transparent 0px,
          transparent 18px,
          rgba(0, 0, 0, 0.04) 18px,
          rgba(0, 0, 0, 0.04) 20px);
      pointer-events: none;
      z-index: 0;
    }

    .sc-board-area.solved {
      animation: boardGlow 1.8s infinite ease-in-out;
    }

    @keyframes boardGlow {

      0%,
      100% {
        box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.25);
      }

      50% {
        box-shadow: inset 0 0 28px rgba(255, 215, 0, 0.55);
      }
    }

    /* Piece sitting on a rail — scales proportionally with board */
    .sc-toy-piece {
      position: absolute;
      width: 13%;
      aspect-ratio: 1;
      z-index: 20;
      cursor: grab;
      user-select: none;
      touch-action: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: left 0.14s cubic-bezier(0.25, 0.8, 0.25, 1), top 0.14s cubic-bezier(0.25, 0.8, 0.25, 1);
      -webkit-tap-highlight-color: transparent;
      pointer-events: all;
    }

    .sc-toy-piece>svg {
      width: 100%;
      height: 100%;
      pointer-events: none;
      /* only the div itself catches events, not SVG internals */
    }

    .sc-toy-piece.selected {
      outline: 3px solid #FFD700;
      outline-offset: 2px;
      border-radius: 50%;
      z-index: 50 !important;
      cursor: grabbing;
    }

    .sc-toy-piece.dragging {
      cursor: grabbing;
      z-index: 100;
      transform: scale(1.15);
      filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
      transition: none;
    }

    /* Highlight ring shown on reachable slots while dragging */
    .sc-slot-hint {
      position: absolute;
      width: 13%;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 2px dashed rgba(255, 215, 0, 0.7);
      background: rgba(255, 215, 0, 0.12);
      z-index: 15;
      pointer-events: all;
      cursor: pointer;
      transform: translate(-50%, -50%);
      animation: hintPulse 0.9s ease-in-out infinite;
    }

    @keyframes hintPulse {

      0%,
      100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.9);
      }

      50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
      }
    }

    /* Mascot hint bar */
    .sc-hint-bar {
      margin: 8px 16px 4px;
      background: linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(37, 99, 235, 0.1));
      border: 1.5px solid rgba(96, 165, 250, 0.3);
      border-radius: 14px;
      padding: 9px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, 0.88);
      font-size: 0.8rem;
      font-weight: 600;
      line-height: 1.35;
    }

    .sc-hint-mascot {
      font-size: 1.5rem;
      flex-shrink: 0;
      animation: scBob 2s ease-in-out infinite;
    }

    .sc-hint-text b {
      color: #fcd34d;
    }

    @keyframes scBob {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-3px)
      }
    }

    .sc-puzzle-counter-line {
      text-align: center;
      font-size: 0.66rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.4);
      margin: 4px 0 2px;
    }

    .sc-control-bar {
      margin: 4px 16px 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Big green Check Answer button (matches the mockup) */
    .sc-check-btn {
      width: 100%;
      max-width: 340px;
      padding: 13px 20px;
      border: none;
      border-radius: 30px;
      background: linear-gradient(180deg, #4ade80, #22c55e);
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform 0.12s;
    }

    .sc-check-btn:active {
      transform: scale(0.97);
    }

    .sc-shake {
      animation: scShake 0.4s;
    }

    @keyframes scShake {

      0%,
      100% {
        transform: translateX(0)
      }

      25% {
        transform: translateX(-6px)
      }

      75% {
        transform: translateX(6px)
      }
    }

    /* Shape Coder on phones: compact so it fits with little scroll */
    @media (max-width: 560px) {
      .sc-shell { min-height: 100dvh; }
      .sc-topbar { padding: 14px 16px 4px; }
      .sc-board-frame { width: min(235px, 66vw); }
      .sc-card-holder { margin: 4px auto 4px; }
      .sc-hint-bar { font-size: 0.78rem; }
    }

    /* Shape Coder on web/tablet: bigger board, and keep the hint/controls a centred
       column so they don't stretch across a wide screen. */
    @media (min-width: 700px) {
      .sc-board-frame { width: 300px; }
      .sc-card-holder { max-width: 340px; }
      .sc-subtitle { font-size: 1rem; }
      .sc-hint-bar,
      .sc-control-bar { max-width: 520px; margin-left: auto; margin-right: auto; }
    }

    .sc-success-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes slideUp {
      from {
        transform: translateY(10px);
        opacity: 0;
      }

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

    .sc-success-msg {
      font-size: 0.9rem;
      font-weight: 700;
      color: #10B981;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .sc-success-btns {
      display: flex;
      gap: 8px;
    }

    .sc-btn {
      padding: 8px 16px;
      font-family: 'Inter', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
    }

    .sc-btn-primary {
      background: linear-gradient(135deg, #10B981, #059669);
      color: #fff;
      box-shadow: 0 3px 0 #047857, 0 4px 8px rgba(16, 185, 129, 0.3);
    }

    .sc-btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 0 #047857, 0 6px 12px rgba(16, 185, 129, 0.4);
    }

    .sc-btn-primary:active {
      transform: translateY(2px);
      box-shadow: none;
    }

    .sc-btn-secondary {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .sc-btn-secondary:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
    }

    /* Star particles for win effect */
    .sc-star-particle {
      position: absolute;
      pointer-events: none;
      font-size: 1.6rem;
      z-index: 200;
    }

    @keyframes starFly {
      0% {
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
        opacity: 1;
      }

      100% {
        transform: translate(calc(-50% + var(--vx)), calc(-50% + var(--vy))) scale(1.6) rotate(420deg);
        opacity: 0;
      }
    }

    /* Shape Coder redesign: viewport-fitted game stage for web. */
    .sc-overlay {
      background: #08121f;
      overflow: hidden;
    }

    .sc-overlay::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(125deg, rgba(20, 184, 166, 0.14), transparent 32%),
        linear-gradient(235deg, rgba(245, 158, 11, 0.16), transparent 34%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 72px);
      pointer-events: none;
    }

    .sc-shell {
      height: 100dvh;
      min-height: 100dvh;
      max-height: 100dvh;
      overflow: hidden;
      padding: clamp(14px, 2vw, 26px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: clamp(10px, 1.8vh, 18px);
      background:
        linear-gradient(145deg, rgba(19, 49, 78, 0.98) 0%, rgba(8, 20, 38, 0.99) 48%, rgba(4, 42, 47, 0.98) 100%);
      isolation: isolate;
    }

    .sc-shell::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        linear-gradient(90deg, transparent 0 49%, rgba(255, 255, 255, 0.04) 49% 51%, transparent 51%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 44px);
      opacity: 0.55;
      pointer-events: none;
    }

    .sc-topbar,
    .sc-game-stage {
      position: relative;
      z-index: 1;
    }

    .sc-topbar {
      width: min(1220px, 100%);
      min-height: 46px;
      margin: 0 auto;
      padding: 0;
      align-items: center;
    }

    .sc-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-size: clamp(1.05rem, 1.35vw, 1.35rem);
      line-height: 1;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
    }

    .sc-brand .sc-brand-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: #f8fafc;
      color: #0f766e;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
    }

    .sc-mini-shape {
      position: absolute;
      display: block;
      box-shadow: 0 2px 0 rgba(15, 23, 42, 0.2);
    }

    .sc-mini-square {
      width: 10px;
      height: 10px;
      left: 8px;
      top: 9px;
      border-radius: 3px;
      background: #ef4444;
    }

    .sc-mini-circle {
      width: 10px;
      height: 10px;
      right: 8px;
      top: 9px;
      border-radius: 999px;
      background: #2563eb;
    }

    .sc-mini-triangle {
      left: 12px;
      bottom: 7px;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 12px solid #10b981;
      box-shadow: none;
      filter: drop-shadow(0 2px 0 rgba(15, 23, 42, 0.22));
    }

    .sc-brand > span:last-child {
      color: #fff4b8;
    }

    .sc-close {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.45);
      background: rgba(255, 255, 255, 0.94);
      color: #172033;
      font-size: 1.1rem;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .sc-close span {
      display: block;
      font-size: 1.4rem;
      line-height: 1;
      transform: translateY(-1px);
    }

    .sc-close:hover {
      background: #fff;
      transform: translateY(-1px);
    }

    .sc-game-stage {
      width: min(1180px, 100%);
      height: 100%;
      min-height: 0;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(250px, 330px) minmax(420px, 1fr);
      gap: clamp(22px, 4vw, 58px);
      align-items: center;
    }

    .sc-side-panel {
      min-width: 0;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: clamp(12px, 2vh, 18px);
    }

    .sc-status-row {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      min-height: 34px;
    }

    .sc-status-row .sc-subtitle {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #facc15;
      font-size: 0.82rem;
      letter-spacing: 0;
    }

    .sc-puzzle-counter-line {
      min-width: 86px;
      margin: 0;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: rgba(255, 255, 255, 0.82);
      font-size: 0.72rem;
      font-weight: 800;
      text-align: center;
    }

    .sc-card-holder {
      width: min(310px, 100%);
      margin: 0;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
    }

    .sc-card-label {
      margin: 0 auto -10px;
      padding: 6px 16px;
      border-radius: 8px;
      background: linear-gradient(180deg, #fff8db, #facc15);
      color: #44270a;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
      letter-spacing: 1px;
    }

    .sc-puzzle-card {
      width: 100%;
      max-width: none;
      padding: 16px 18px 14px;
      border-radius: 8px;
      border: 1px solid rgba(15, 23, 42, 0.1);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
        repeating-linear-gradient(90deg, transparent 0 24px, rgba(15, 23, 42, 0.035) 24px 25px);
      box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .sc-card-grid {
      gap: 8px !important;
      padding: 10px 8px 6px !important;
    }

    .sc-card-cell {
      height: 40px !important;
    }

    .sc-card-cell svg {
      width: 32px !important;
      height: 32px !important;
    }

    .sc-hint-bar {
      width: min(330px, 100%);
      margin: 0;
      padding: 12px 14px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      font-size: 0.82rem;
    }

    .sc-hint-mascot {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ecfeff;
      color: #0e7490;
      font-size: 1rem;
      animation: none;
    }

    .sc-hint-mascot::before {
      content: '';
      width: 13px;
      height: 13px;
      border-radius: 999px;
      border: 3px solid #0e7490;
      box-shadow: 8px 8px 0 #facc15;
      transform: translate(-3px, -3px);
    }

    .sc-play-panel {
      height: 100%;
      min-height: 0;
      display: grid;
      grid-template-rows: auto auto auto;
      align-content: center;
      justify-items: center;
      gap: clamp(12px, 2vh, 18px);
    }

    .sc-level-row {
      min-height: 44px;
      padding: 0;
      gap: 10px;
      align-items: center;
    }

    .sc-lvl-btn {
      min-width: 116px;
      padding: 10px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.78);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .sc-lvl-btn:hover {
      background: rgba(255, 255, 255, 0.16);
      color: #fff;
    }

    .sc-lvl-btn.active {
      border-color: rgba(45, 212, 191, 0.95);
      background: linear-gradient(180deg, #2dd4bf, #0f766e);
      box-shadow: 0 12px 24px rgba(13, 148, 136, 0.3);
    }

    .sc-board-frame {
      width: min(440px, 38vw, calc((100dvh - 238px) * 0.875));
      min-width: 320px;
      margin: 0;
      border-radius: 14px;
      border: 6px solid #4a2b16;
      background:
        linear-gradient(135deg, rgba(255, 223, 162, 0.32), transparent 38%),
        linear-gradient(160deg, #936032 0%, #5a3419 100%);
      box-shadow:
        0 26px 46px rgba(0, 0, 0, 0.44),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 2px 6px rgba(255, 255, 255, 0.24),
        inset 0 -5px 8px rgba(0, 0, 0, 0.28);
    }

    .sc-board-area {
      border-radius: 8px;
      background:
        linear-gradient(160deg, rgba(255, 217, 143, 0.28), transparent 42%),
        linear-gradient(170deg, #c99350 0%, #a56a35 56%, #7b4926 100%);
    }

    .sc-control-bar {
      width: min(430px, 100%);
      min-height: 52px;
      margin: 0;
    }

    .sc-check-btn {
      height: 52px;
      border-radius: 8px;
      background: linear-gradient(180deg, #34d399, #059669);
      box-shadow:
        0 12px 22px rgba(5, 150, 105, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
    }

    .sc-success-bar {
      min-height: 52px;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.16);
    }

    @media (max-width: 1180px) {
      .sc-game-stage {
        grid-template-columns: minmax(230px, 300px) minmax(360px, 1fr);
        gap: 24px;
      }

      .sc-board-frame {
        min-width: 300px;
      }
    }

    @media (max-width: 900px) {
      .sc-shell {
        height: 100dvh;
        min-height: 100dvh;
        overflow-y: auto;
        padding: 12px;
        gap: 8px;
      }

      .sc-topbar {
        min-height: 40px;
      }

      .sc-game-stage {
        height: auto;
        grid-template-columns: 1fr;
        gap: 10px;
        align-content: start;
      }

      .sc-side-panel {
        gap: 8px;
      }

      .sc-status-row {
        min-height: 30px;
        gap: 6px;
      }

      .sc-status-row .sc-subtitle,
      .sc-puzzle-counter-line {
        padding: 6px 8px;
        font-size: 0.68rem;
      }

      .sc-card-holder {
        width: min(235px, 78vw);
      }

      .sc-card-label {
        padding: 5px 12px;
        font-size: 0.58rem;
      }

      .sc-puzzle-card {
        padding: 10px 12px 8px;
      }

      .sc-card-grid {
        gap: 4px !important;
        padding: 6px 4px 2px !important;
      }

      .sc-card-cell {
        height: 28px !important;
      }

      .sc-card-cell svg {
        width: 25px !important;
        height: 25px !important;
      }

      .sc-hint-bar {
        display: none;
      }

      .sc-play-panel {
        gap: 8px;
      }

      .sc-level-row {
        min-height: 38px;
        gap: 6px;
      }

      .sc-lvl-btn {
        min-width: 0;
        padding: 8px 13px;
        font-size: 0.74rem;
      }

      .sc-board-frame {
        width: min(292px, 72vw);
        min-width: 230px;
        border-width: 4px;
      }

      .sc-control-bar {
        min-height: 44px;
      }

      .sc-check-btn {
        height: 44px;
        font-size: 0.88rem;
      }
    }

    @media (max-height: 720px) and (min-width: 901px) {
      .sc-shell {
        padding-top: 12px;
        padding-bottom: 12px;
        gap: 10px;
      }

      .sc-board-frame {
        width: min(380px, 34vw, calc((100dvh - 210px) * 0.875));
        min-width: 300px;
      }

      .sc-control-bar {
        width: min(380px, 34vw, calc((100dvh - 210px) * 0.875));
        min-width: 300px;
      }

      .sc-card-holder {
        width: min(270px, 100%);
      }

      .sc-card-cell {
        height: 34px !important;
      }

      .sc-card-cell svg {
        width: 28px !important;
        height: 28px !important;
      }
    }

    /* ===== CUT THE ODD ONE GAME ===== */
    .cto-overlay {
      position: fixed;
      inset: 0;
      background-color: #5a9e3a;
      background-image: url('../images/find_odd_one_bg.jpg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      z-index: 3000;
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transition: all 0.35s ease;
      overflow: hidden;
      user-select: none;
    }

    .cto-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .cto-topbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      min-height: 52px;
      background: rgba(0, 0, 0, 0.18);
      backdrop-filter: blur(4px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.25);
      flex-shrink: 0;
      z-index: 10;
    }

    .cto-brand {
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .cto-diff-tabs {
      display: flex;
      gap: 6px;
    }

    .cto-diff-tab {
      padding: 5px 14px;
      border-radius: 20px;
      border: 2px solid rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.25);
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      cursor: pointer;
      transition: all 0.2s;
    }

    .cto-diff-tab.active {
      background: rgba(255, 255, 255, 0.92);
      color: #2d6a2d;
      border-color: rgba(255, 255, 255, 0.9);
      text-shadow: none;
    }

    .cto-close-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.25);
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      justify-self: end;
    }

    .cto-close-btn:hover {
      background: rgba(255, 255, 255, 0.85);
      color: #2d6a2d;
      text-shadow: none;
    }

    .cto-scene {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
    }

    /* Canvas fills the scene */
    .cto-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      touch-action: none;
      cursor: crosshair;
    }

    /* Feedback overlay */
    .cto-feedback {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.8);
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 20px 32px;
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
      z-index: 20;
    }

    .cto-feedback.show {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .cto-feedback.wrong {
      color: #e53e3e;
    }

    .cto-feedback.correct {
      color: #38a169;
    }

    /* Challenge counter */
    .cto-counter {
      position: static;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 12px;
      padding: 4px 12px;
      font-family: 'Inter', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      color: #2d6a2d;
      z-index: 10;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      white-space: nowrap;
    }

    /* Hint text at bottom */
    .cto-hint {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.88);
      border-radius: 20px;
      padding: 7px 20px;
      font-family: 'Inter', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      color: #2d5e10;
      z-index: 10;
      white-space: nowrap;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* Confetti */
    .cto-confetti-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 4000;
    }

    .cto-confetti-piece {
      position: absolute;
      top: -12px;
      animation: ctoConfettiFall linear forwards;
    }

    @keyframes ctoConfettiFall {
      to {
        top: 110vh;
        transform: rotate(720deg);
      }
    }

    /* ===== CIRCLE THE DIFFERENCE GAME ===== */
    .ctd-overlay {
      position: fixed;
      inset: 0;
      background: linear-gradient(160deg, #e8f4fd 0%, #cce8f8 50%, #a8d8f0 100%);
      z-index: 3000;
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transition: all 0.35s ease;
      overflow: hidden;
      user-select: none;
    }

    .ctd-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .ctd-topbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      min-height: 52px;
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      flex-shrink: 0;
      z-index: 10;
      position: relative;
    }

    .ctd-brand {
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: #1a5276;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .ctd-progress-label {
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      color: #1a5276;
      white-space: nowrap;
    }

    .ctd-progress-dots {
      display: flex;
      gap: 6px;
    }

    .ctd-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(26, 82, 118, 0.2);
      border: 2px solid rgba(26, 82, 118, 0.35);
      transition: all 0.3s ease;
    }

    .ctd-dot.found {
      background: #27ae60;
      border-color: #1e8449;
      transform: scale(1.2);
    }

    .ctd-close-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: rgba(26, 82, 118, 0.15);
      color: #1a5276;
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      font-weight: 700;
      justify-self: end;
    }

    .ctd-close-btn:hover {
      background: rgba(26, 82, 118, 0.28);
    }

    .ctd-scene {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 12px;
    }

    .ctd-canvas-wrap {
      position: relative;
      display: inline-block;
      line-height: 0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
      max-width: 100%;
      max-height: 100%;
    }

    .ctd-img {
      display: block;
      max-width: 100%;
      max-height: calc(100vh - 160px);
      object-fit: contain;
      border-radius: 12px;
    }

    .ctd-draw-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      cursor: crosshair;
      touch-action: none;
    }

    .ctd-hint {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.92);
      border-radius: 20px;
      padding: 7px 22px;
      font-family: 'Inter', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      color: #1a5276;
      z-index: 10;
      white-space: nowrap;
      pointer-events: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
      transition: opacity 0.4s;
    }

    .ctd-feedback-bubble {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
      background: #fff;
      border-radius: 14px;
      padding: 9px 24px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      opacity: 0;
      pointer-events: none;
      z-index: 20;
      transition: opacity 0.25s, transform 0.25s;
      white-space: nowrap;
    }

    .ctd-feedback-bubble.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .ctd-feedback-bubble.correct {
      color: #1e8449;
      border: 2px solid #27ae60;
    }

    .ctd-feedback-bubble.wrong {
      color: #c0392b;
      border: 2px solid #e74c3c;
    }

    .ctd-level-complete {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.48);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
      z-index: 50;
      opacity: 0;
      visibility: hidden;
      transition: none;
      border-radius: 12px;
      line-height: normal;
    }

    .ctd-level-complete.show {
      opacity: 1;
      visibility: visible;
    }

    .ctd-complete-card {
      width: min(390px, 100%);
      max-height: calc(100% - 12px);
      padding: clamp(20px, 5vh, 34px);
      overflow: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 11px;
      text-align: center;
      border: 2px solid rgba(255, 255, 255, 0.9);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 22px 55px rgba(15, 23, 42, 0.3);
    }

    .ctd-complete-emoji {
      font-size: clamp(2.8rem, 10vh, 4rem);
      line-height: 1;
      animation: ctdBounce 0.6s ease infinite alternate;
    }

    @keyframes ctdBounce {
      from {
        transform: translateY(0);
      }

      to {
        transform: translateY(-12px);
      }
    }

    .ctd-complete-title {
      font-family: 'Poppins', sans-serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: #1a5276;
      line-height: 1.2;
    }

    .ctd-complete-sub {
      font-family: 'Inter', sans-serif;
      font-size: 0.9rem;
      color: #666;
      line-height: 1.4;
    }

    .ctd-next-btn {
      padding: 12px 32px;
      border-radius: 24px;
      border: none;
      background: linear-gradient(135deg, #2980b9, #1a5276);
      color: #fff;
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(41, 128, 185, 0.4);
      transition: all 0.2s;
    }

    .ctd-next-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(41, 128, 185, 0.5);
    }

    .ctd-confetti-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 4000;
    }

    .ctd-confetti-piece {
      position: absolute;
      top: -12px;
      animation: ctdConfettiFall linear forwards;
    }

    @keyframes ctdConfettiFall {
      to {
        top: 110vh;
        transform: rotate(720deg);
      }
    }

    @keyframes ctdShake {

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

      20% {
        transform: translateX(-6px);
      }

      40% {
        transform: translateX(6px);
      }

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

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

    .ctd-sparkle {
      position: absolute;
      pointer-events: none;
      font-size: 1.5rem;
      animation: ctdSparkleOut 0.9s ease-out forwards;
      z-index: 30;
    }

    @keyframes ctdSparkleOut {
      0% {
        opacity: 1;
        transform: scale(0.5) translate(0, 0);
      }

      100% {
        opacity: 0;
        transform: scale(1.4) translate(var(--sx), var(--sy));
      }
    }

    .ctd-diff-tabs {
      display: flex;
      gap: 6px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .ctd-progress-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      margin: 0;
    }

    .ctd-diff-tab {
      padding: 5px 13px;
      border-radius: 20px;
      border: 2px solid rgba(26, 82, 118, 0.25);
      background: rgba(26, 82, 118, 0.08);
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      color: #1a5276;
      cursor: pointer;
      transition: all 0.2s;
    }

    .ctd-diff-tab.active {
      background: #2980b9;
      border-color: #2980b9;
      color: #fff;
    }

    .ctd-diff-tab:hover:not(.active) {
      background: rgba(26, 82, 118, 0.16);
    }

    /* Spot The Difference: let the puzzle image use more of the viewport. */
    .ctd-scene {
      padding: 6px 8px 38px;
    }

    .ctd-canvas-wrap {
      max-width: calc(100vw - 16px);
      max-height: calc(100dvh - 102px);
    }

    .ctd-img {
      max-width: calc(100vw - 16px);
      max-height: calc(100dvh - 102px);
    }

    @media (orientation: landscape) and (max-height: 620px) {
      .ctd-topbar {
        min-height: 42px;
        padding: 0 10px;
      }

      .ctd-brand {
        font-size: 0.82rem;
        gap: 5px;
      }

      .ctd-diff-tabs {
        gap: 4px;
      }

      .ctd-diff-tab {
        padding: 4px 9px;
        font-size: 0.68rem;
      }

      .ctd-close-btn {
        width: 30px;
        height: 30px;
      }

      .ctd-scene {
        padding: 4px 6px 28px;
      }

      .ctd-canvas-wrap,
      .ctd-img {
        max-width: calc(100vw - 12px);
        max-height: calc(100dvh - 74px);
      }

      .ctd-hint {
        bottom: 5px;
        padding: 5px 12px;
        font-size: 0.68rem;
      }
    }

    /* ===== MATCH THE PUZZLE GAME ===== */
    .mp-overlay {
      position: fixed;
      inset: 0;
      background: linear-gradient(160deg, #f5e6c8 0%, #e8d5a0 50%, #d4c080 100%);
      z-index: 3000;
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transition: all 0.35s ease;
      overflow: hidden
    }

    .mp-overlay.active {
      opacity: 1;
      visibility: visible
    }

    .mp-topbar {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      min-height: 56px;
      background: linear-gradient(180deg, rgba(101, 55, 10, 0.92), rgba(80, 42, 8, 0.95));
      border-bottom: 3px solid #7c4d1e;
      flex-shrink: 0;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
      z-index: 10;
    }

    .mp-header-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .mp-brand {
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: #ffd580;
      display: flex;
      align-items: center;
      gap: 8px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }

    .mp-progress-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 260px;
      pointer-events: none
    }

    .mp-prog-bar {
      width: 100%;
      height: 10px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 99px;
      overflow: hidden;
      border: 1.5px solid rgba(255, 255, 255, 0.15)
    }

    .mp-prog-fill {
      height: 100%;
      background: linear-gradient(90deg, #ffd700, #f5a623);
      border-radius: 99px;
      transition: width 0.4s ease;
      box-shadow: 0 0 8px rgba(255, 215, 0, 0.5)
    }

    .mp-prog-label {
      font-size: 0.72rem;
      font-weight: 600;
      color: #ffd580
    }

    .mp-close-btn {
      background: rgba(255, 255, 255, 0.15);
      border: 2px solid rgba(255, 255, 255, 0.25);
      border-radius: 8px;
      font-size: 1.1rem;
      cursor: pointer;
      color: #fff;
      line-height: 1;
      padding: 5px 8px;
      transition: background 0.15s;
      margin-left: auto;
      z-index: 10;
    }

    .mp-close-btn:hover {
      background: rgba(255, 255, 255, 0.28)
    }

    .mp-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      overflow-y: auto;
      padding: 8px 10px;
      flex: 1;
      min-height: 0;
      position: relative;
      z-index: 2;
    }

    /* Difficulty tabs */
    .mp-diff-tabs {
      display: none !important;
      gap: 6px;
      justify-content: center;
      margin-bottom: 0;
      flex-wrap: nowrap
    }

    .mp-score-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 122px;
      height: 44px;
      padding: 0 16px;
      border-radius: 16px;
      background: #fff;
      color: #1f2937;
      border: 2px solid rgba(255, 255, 255, .85);
      box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
      font-weight: 900;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .mp-score-badge strong {
      color: #3345d6;
      font-size: 22px;
      letter-spacing: 0;
    }

    .mp-diff-tab {
      padding: 4px 11px;
      border-radius: 50px;
      font-size: 0.74rem;
      font-weight: 600;
      border: 2px solid rgba(124, 77, 30, 0.4);
      background: rgba(255, 255, 255, 0.5);
      color: #5c3000;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
    }

    .mp-diff-tab.active {
      background: linear-gradient(135deg, #c8860a, #a06008);
      border-color: #7c4d1e;
      color: #fff;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2)
    }

    /* Slot silhouette — ghost shape inside empty slot */
    .mp-slot-silhouette {
      opacity: 0.28;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center
    }

    /* ── BOARD ── SVG hexagonal premium toy */
    .mp-board-wrap {
      width: 100%;
      max-width: 520px;
      margin-bottom: 0
    }

    .mp-board-label {
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #6b3a0a;
      margin-bottom: 4px;
      text-align: center
    }

    .mp-board-svg-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.38)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25))
    }

    .mp-board {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      justify-content: center;
      z-index: 2;
      padding: 36px 52px 40px;
    }

    .mp-board-row {
      display: flex;
      gap: 5px;
      align-items: center;
      justify-content: center;
    }

    /* ── SLOTS ── base container; appearance comes from SVG for empty, normal for locked */
    .mp-slot {
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      cursor: default;
      position: relative;
      flex-shrink: 0;
      background: transparent;
      border: none;
    }

    /* Locked (filled) slot: subtle recessed platform */
    .mp-slot.locked {
      width: 46px;
      height: 46px;
      border-radius: 10px;
      background: radial-gradient(ellipse at 42% 32%, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.20) 100%);
      border: 1.5px solid rgba(0, 0, 0, 0.16);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 210, 120, 0.14);
    }

    /* Empty slot: glow when dragging over */
    .mp-slot.glow .mp-cavity-svg path,
    .mp-slot.glow .mp-cavity-svg polygon,
    .mp-slot.glow .mp-cavity-svg circle {
      filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
    }

    .mp-slot.glow .mp-cavity-svg {
      filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.75));
    }

    .mp-slot.correct-flash {
      animation: mpCorrectFlash 0.5s ease
    }

    @keyframes mpCorrectFlash {

      0%,
      100% {
        filter: brightness(1)
      }

      50% {
        filter: brightness(1.45) drop-shadow(0 0 10px rgba(120, 255, 120, 0.85))
      }
    }

    /* ── PIECE TRAY ── wooden toy compartment */
    .mp-tray-outer {
      width: 100%;
      max-width: 480px;
      margin-top: 6px
    }

    .mp-tray-label {
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #6b3a0a;
      margin-bottom: 5px;
      text-align: center
    }

    .mp-tray {
      background:
        repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(0, 0, 0, 0.035) 22px, rgba(0, 0, 0, 0.036) 23px),
        linear-gradient(175deg, #c8964a 0%, #b07828 35%, #9a6018 65%, #7a4a10 100%);
      border: none;
      border-radius: 14px;
      padding: 8px 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      min-height: 66px;
      align-items: center;
      box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.28),
        inset 0 -2px 5px rgba(255, 200, 100, 0.12),
        0 6px 18px rgba(0, 0, 0, 0.28),
        0 3px 0 #5c3808,
        0 1.5px 0 #4a2c06;
      position: relative;
      outline: 3px solid #7a4a14;
      outline-offset: -1px;
    }

    /* inner engraved dashed rim */
    .mp-tray::before {
      content: '';
      position: absolute;
      inset: 6px;
      border-radius: 10px;
      border: 1.5px dashed rgba(255, 255, 255, 0.14);
      pointer-events: none
    }

    /* top sheen */
    .mp-tray::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 40%;
      border-radius: 14px 14px 0 0;
      background: linear-gradient(180deg, rgba(255, 220, 140, 0.18) 0%, transparent 100%);
      pointer-events: none
    }

    /* ── PIECES ── premium plastic toy look */
    .mp-piece {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: linear-gradient(145deg, #ffffff 0%, #f2f2f0 60%, #e8e8e4 100%);
      border: 2px solid rgba(0, 0, 0, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      user-select: none;
      transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
      flex-shrink: 0;
      box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.22),
        0 5px 12px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
      position: relative;
      z-index: 1;
    }

    /* gloss sheen on piece */
    .mp-piece::before {
      content: '';
      position: absolute;
      top: 4px;
      left: 5px;
      right: 5px;
      height: 38%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.15));
      border-radius: 10px 10px 50% 50%;
      pointer-events: none;
    }

    .mp-piece:hover {
      transform: translateY(-7px) rotate(1.5deg) scale(1.04);
      box-shadow:
        0 12px 0 rgba(0, 0, 0, 0.18),
        0 16px 28px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .mp-piece.dragging {
      transform: scale(1.18) rotate(4deg) translateY(-6px);
      box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      opacity: 0.92;
      cursor: grabbing;
      z-index: 9999;
    }

    .mp-piece.shake {
      animation: mpShake 0.4s ease
    }

    @keyframes mpShake {

      0%,
      100% {
        transform: translateX(0)
      }

      15% {
        transform: translateX(-8px) rotate(-3deg)
      }

      40% {
        transform: translateX(8px) rotate(3deg)
      }

      65% {
        transform: translateX(-5px)
      }

      85% {
        transform: translateX(5px)
      }
    }

    /* Ghost drag */
    .mp-ghost {
      position: fixed;
      pointer-events: none;
      z-index: 4000;
      display: none;
      width: 64px;
      height: 64px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
      transform: rotate(5deg) scale(1.12);
      align-items: center;
      justify-content: center
    }

    /* Feedback pill — sits outside board area */
    .mp-feedback {
      position: fixed;
      bottom: 88px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border-radius: 50px;
      padding: 9px 22px;
      font-size: 0.9rem;
      font-weight: 700;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
      z-index: 3100;
      opacity: 0;
      transition: opacity 0.25s;
      pointer-events: none;
      white-space: nowrap
    }

    .mp-feedback.show {
      opacity: 1
    }

    /* ── COMPLETION MODAL — never overlaps board ── */
    .mp-complete-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 4500;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(5px);
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .mp-complete-modal.show {
      display: flex
    }

    .mp-complete-inner {
      background: linear-gradient(145deg, #fffef0, #fff8e0);
      border: 3px solid #d4a853;
      border-radius: 28px;
      padding: 28px 32px 24px;
      text-align: center;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      max-width: 340px;
      width: 100%;
      max-height: calc(100dvh - 40px);
      overflow-y: auto;
      animation: mpModalIn 0.4s cubic-bezier(.34, 1.56, .64, 1);
    }

    @keyframes mpModalIn {
      from {
        transform: scale(0.7) translateY(30px);
        opacity: 0
      }

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

    .mp-complete-emoji {
      font-size: 3.8rem;
      line-height: 1;
      margin-bottom: 6px;
      display: block
    }

    .mp-complete-inner h2 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.55rem;
      color: #5c3000;
      margin: 0 0 4px
    }

    .mp-complete-inner p {
      font-size: 0.88rem;
      color: #a07040;
      margin: 0 0 8px
    }

    .mp-complete-stars {
      font-size: 2rem;
      letter-spacing: 6px;
      margin-bottom: 14px;
      display: block
    }

    .mp-complete-btns {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap
    }

    .mp-btn-next {
      background: linear-gradient(135deg, #f5a623, #e8852a);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 11px 26px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 0 #a05010, 0 6px 14px rgba(245, 166, 35, 0.35);
      transition: all 0.2s
    }

    .mp-btn-next:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 0 #a05010, 0 10px 20px rgba(245, 166, 35, 0.4)
    }

    .mp-btn-again {
      background: #fff;
      color: #7c4d1e;
      border: 2.5px solid #e8c87a;
      border-radius: 50px;
      padding: 11px 20px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s
    }

    .mp-btn-again:hover {
      background: #fff8e0
    }

    /* Confetti stays above everything */
    .mp-confetti-container {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 4600;
      overflow: hidden
    }

    .mp-confetti-piece {
      position: absolute;
      top: -12px;
      animation: mpConfettiFall linear forwards
    }

    @keyframes mpConfettiFall {
      to {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0
      }
    }

    /* Stars earned display */
    .mp-stars-row {
      display: flex;
      gap: 4px;
      font-size: 1.1rem
    }

    /* Sparkle */
    .mp-sparkle {
      position: absolute;
      pointer-events: none;
      font-size: 1.1rem;
      animation: mpSparkleAnim 0.6s ease forwards;
      z-index: 200
    }

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

      100% {
        opacity: 0;
        transform: scale(1.6) translateY(-24px)
      }
    }

    /* Decorative Background Illustrations for Match The Puzzle */
    .mp-bg-illus {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 58vh;
      max-height: 470px;
      pointer-events: none;
      z-index: 1;
      opacity: 1.0;
      object-fit: contain;
      transition: all 0.3s ease;
    }

    .mp-bg-left {
      left: 20px;
      width: 27vw;
      max-width: 360px;
    }

    .mp-bg-right {
      right: 20px;
      width: 27vw;
      max-width: 360px;
    }

    @media (max-width: 1024px) {
      .mp-bg-illus {
        width: 20vw;
        max-height: 325px;
        top: 50%;
        transform: translateY(-50%);
      }

      .mp-bg-left {
        left: 10px;
      }

      .mp-bg-right {
        right: 10px;
      }
    }

    @media (max-width: 768px) {
      .mp-bg-illus {
        display: none;
      }
    }

    /* ===== RESCUE THE LIVING THINGS GAME ===== */
    .rescue-overlay {
      position: fixed;
      inset: 0;
      z-index: 9000;
      display: none;
      flex-direction: column;
      background: #87CEEB;
      overflow: hidden;
    }

    .rescue-overlay.active {
      display: flex;
    }

    .rescue-topbar {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(6px);
      flex-shrink: 0;
    }

    .rescue-brand {
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .rescue-diff-tabs {
      display: flex;
      gap: 6px;
    }

    .rescue-diff-tab {
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 0.78rem;
      font-weight: 700;
      border: none;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.18);
      color: rgba(255, 255, 255, 0.8);
      transition: all 0.2s;
      font-family: 'Inter', sans-serif;
    }

    .rescue-diff-tab.active {
      background: #fff;
      color: #1a3a6b;
    }

    .rescue-counter {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      padding: 5px 14px;
      color: #fff;
      font-weight: 700;
      font-size: 0.82rem;
      margin-left: auto;
    }

    .rescue-close {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: #fff;
      font-size: 1.1rem;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
      flex-shrink: 0;
    }

    .rescue-close:hover {
      background: rgba(255, 255, 255, 0.35);
    }

    .rescue-viewport {
      position: relative;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    #rescue-objects-layer {
      position: absolute;
      inset: 0;
      z-index: 15;
      pointer-events: none;
    }

    .rescue-bg {
      position: absolute;
      inset: 0;
      background-image: url('../images/living-vs-non-living-bg.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    /* Helicopter */
    .rescue-heli {
      position: absolute;
      width: 140px;
      height: 80px;
      z-index: 20;
      pointer-events: none;
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
    }

    .heli-svg {
      width: 100%;
      height: 100%;
    }

    /* Rope ladder */
    .rescue-rope {
      position: absolute;
      z-index: 18;
      pointer-events: none;
      display: none;
    }

    .rescue-rope-svg {
      display: block;
    }

    /* Floating objects */
    .rescue-obj {
      position: absolute;
      z-index: 15;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: transform 0.15s;
      user-select: none;
      pointer-events: auto;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .rescue-obj:hover {
      transform: scale(1.1);
    }

    .rescue-obj.rescued {
      pointer-events: none;
    }

    .rescue-obj.shake {
      animation: rescueShake 0.4s ease;
    }

    .rescue-obj-emoji {
      font-size: 2.4rem;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

    .rescue-obj-label {
      font-size: 0.65rem;
      font-weight: 700;
      color: #fff;
      background: rgba(0, 0, 0, 0.55);
      border-radius: 8px;
      padding: 2px 7px;
      white-space: nowrap;
    }

    .rescue-obj-platform {
      width: 52px;
      height: 10px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(140, 200, 255, 0.6) 100%);
      border-radius: 50%;
      margin-top: -2px;
      box-shadow: 0 2px 6px rgba(0, 120, 200, 0.4);
    }

    /* Feedback bubble */
    .rescue-feedback {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.7);
      z-index: 50;
      background: rgba(255, 255, 255, 0.96);
      border-radius: 20px;
      padding: 14px 28px;
      font-size: 1.2rem;
      font-weight: 800;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s cubic-bezier(.34, 1.56, .64, 1);
      text-align: center;
      font-family: 'Poppins', sans-serif;
      white-space: nowrap;
    }

    .rescue-feedback.show {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .rescue-feedback.good {
      border: 3px solid #10B981;
      color: #065f46;
    }

    .rescue-feedback.bad {
      border: 3px solid #ef4444;
      color: #991b1b;
    }

    /* Win screen */
    .rescue-win {
      position: absolute;
      inset: 0;
      z-index: 60;
      background: rgba(0, 0, 0, 0.65);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      text-align: center;
    }

    .rescue-win.show {
      display: flex;
    }

    .rescue-win-card {
      background: #fff;
      border-radius: 28px;
      padding: 36px 48px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      animation: rescuePop 0.5s cubic-bezier(.34, 1.56, .64, 1);
    }

    .rescue-win-emoji {
      font-size: 3.5rem;
    }

    .rescue-win-title {
      font-family: 'Poppins', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      color: #1a3a6b;
    }

    .rescue-win-sub {
      font-size: 1rem;
      color: #6B7280;
      font-weight: 600;
    }

    .rescue-win-btn {
      margin-top: 8px;
      padding: 12px 32px;
      border-radius: 50px;
      border: none;
      background: linear-gradient(135deg, #10B981, #059669);
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
      transition: transform 0.15s;
    }

    .rescue-win-btn:hover {
      transform: scale(1.05);
    }

    /* Instruction bar */
    .rescue-instruction {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 25;
      background: rgba(255, 255, 255, 0.92);
      border-radius: 50px;
      padding: 8px 20px;
      font-size: 0.78rem;
      font-weight: 700;
      color: #1a3a6b;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
      white-space: nowrap;
      pointer-events: none;
    }

    /* Confetti */
    .rescue-confetti-wrap {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 55;
      overflow: hidden;
    }

    .rescue-confetti-piece {
      position: absolute;
      top: -20px;
      border-radius: 3px;
      animation: rescueFall linear forwards;
    }

    @keyframes rescueFall {
      to {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
      }
    }

    @keyframes rescueShake {

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

      20% {
        transform: translateX(-8px) rotate(-3deg);
      }

      40% {
        transform: translateX(8px) rotate(3deg);
      }

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

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

    @keyframes rescuePop {
      from {
        transform: scale(0.5);
        opacity: 0;
      }

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

    @keyframes rescueBob {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    @keyframes rescueHeliHover {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-5px);
      }
    }

    @keyframes rescueRotorSpin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes rescueTailSpin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes rescueSuccessBurst {
      0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
      }

      100% {
        transform: scale(2.5) rotate(180deg);
        opacity: 0;
      }
    }

    .rescue-success-burst {
      position: absolute;
      font-size: 2rem;
      pointer-events: none;
      z-index: 40;
      animation: rescueSuccessBurst 0.7s ease forwards;
    }

    @media (max-width: 600px) {
      .rescue-heli {
        width: 100px;
        height: 58px;
      }

      .rescue-obj-emoji {
        font-size: 1.9rem;
      }

      .rescue-win-card {
        padding: 24px 28px;
      }

      .rescue-win-title {
        font-size: 1.3rem;
      }

      .rescue-instruction {
        font-size: 0.7rem;
        padding: 7px 14px;
        bottom: 8px;
      }

      .rescue-diff-tab {
        padding: 4px 10px;
        font-size: 0.7rem;
      }
    }

    @media (max-width: 900px) and (orientation: landscape),
           (max-height: 500px) and (orientation: landscape) {
      .rescue-topbar {
        min-height: 42px;
        padding: 4px max(7px, env(safe-area-inset-right)) 4px max(7px, env(safe-area-inset-left));
        gap: 6px;
      }
      .rescue-brand { font-size: .72rem; white-space: nowrap; }
      .rescue-header-score { min-width: 72px; min-height: 30px; padding: 3px 7px; }
      .rescue-counter {
        margin: 0;
        padding: 4px 7px;
        font-size: .65rem;
        white-space: nowrap;
      }
      .rescue-close { width: 32px; height: 32px; }
      .rescue-heli { width: 92px; height: 53px; }
      .rescue-obj { min-width: 48px; min-height: 44px; }
      .rescue-obj-emoji { font-size: 1.7rem; }
      .rescue-obj-label { padding: 1px 5px; font-size: .56rem; }
      .rescue-obj-platform { width: 42px; height: 7px; }
      .rescue-instruction {
        bottom: max(4px, env(safe-area-inset-bottom));
        max-width: calc(100% - 16px);
        padding: 5px 10px;
        overflow: hidden;
        font-size: .62rem;
        text-overflow: ellipsis;
      }
      .rescue-win-card { padding: 14px 22px; gap: 7px; }
      .rescue-win-emoji { font-size: 2.25rem; }
      .rescue-win-title { font-size: 1.15rem; }
      .rescue-win-sub { font-size: .78rem; }
      .rescue-win-btn { margin-top: 2px; padding: 9px 24px; }
    }

    /* ===== RING TOSS CHALLENGE GAME ===== */
    /* ===== PREMIUM CARNIVAL RING TOSS ===== */
    .rt-overlay {
      position: fixed;
      inset: 0;
      z-index: 9100;
      display: none;
      flex-direction: column;
      background: #1a0a00;
      overflow: hidden;
    }

    .rt-overlay.active {
      display: flex;
    }

    /* Carnival ambient sparkle particles */
    .rt-sparkle-layer {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      overflow: hidden;
    }

    .rt-ambient-sparkle {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff 0%, rgba(255, 220, 80, 0.8) 50%, transparent 100%);
      animation: rtSparkleFloat linear infinite;
      opacity: 0;
    }

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

      15% {
        opacity: 1;
        transform: translateY(-15px) scale(1);
      }

      85% {
        opacity: 0.7;
      }

      100% {
        transform: translateY(-120px) scale(0.3);
        opacity: 0;
      }
    }

    /* Carnival light string above stage */
    .rt-light-string {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 40px;
      z-index: 8;
      pointer-events: none;
    }

    .rt-light-bulb {
      position: absolute;
      top: 10px;
      width: 16px;
      height: 20px;
      border-radius: 50% 50% 40% 40%;
      box-shadow: 0 0 10px 4px currentColor, 0 0 20px 6px rgba(255, 200, 0, 0.3);
      animation: rtBulbPulse 2s ease-in-out infinite;
    }

    @keyframes rtBulbPulse {

      0%,
      100% {
        filter: brightness(1);
      }

      50% {
        filter: brightness(1.4);
      }
    }

    /* Carnival banners */
    .rt-banners {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50px;
      z-index: 7;
      pointer-events: none;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 40px;
    }

    .rt-banner-flag {
      width: 0;
      height: 0;
      border-left: 11px solid transparent;
      border-right: 11px solid transparent;
      border-top: 22px solid;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
      margin: 0 3px;
    }

    /* Floating balloon decorations */
    .rt-balloon {
      position: absolute;
      z-index: 6;
      pointer-events: none;
      animation: rtBalloonFloat ease-in-out infinite;
    }

    .rt-balloon svg {
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    }

    @keyframes rtBalloonFloat {

      0%,
      100% {
        transform: translateY(0) rotate(-3deg);
      }

      50% {
        transform: translateY(-18px) rotate(3deg);
      }
    }

    .rt-topbar {
      position: relative;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 16px;
      height: 62px;
      background:
        linear-gradient(180deg, #5c2800 0%, #3d1a00 45%, #2a1000 100%);
      border-bottom: 0;
      flex-shrink: 0;
      /* Layered wood-plank shadow effect */
      box-shadow:
        0 1px 0 rgba(255, 200, 80, 0.12) inset,
        0 -1px 0 rgba(0, 0, 0, 0.4) inset,
        0 6px 0 #1a0800,
        0 7px 0 rgba(255, 180, 50, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.6);
    }

    /* Gold trim top border */
    .rt-topbar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg,
          transparent 0%,
          #c8860a 10%,
          #ffd700 30%,
          #ffe680 50%,
          #ffd700 70%,
          #c8860a 90%,
          transparent 100%);
      box-shadow: 0 0 8px rgba(255, 200, 0, 0.6);
    }

    /* Gold trim bottom border */
    .rt-topbar::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg,
          transparent 0%,
          #c8860a 10%,
          #ffd700 30%,
          #ffe680 50%,
          #ffd700 70%,
          #c8860a 90%,
          transparent 100%);
      box-shadow: 0 0 10px rgba(255, 200, 0, 0.5);
      z-index: 1;
    }

    /* Wood grain texture lines */
    .rt-topbar-wood {
      position: absolute;
      inset: 3px 0 3px 0;
      pointer-events: none;
      overflow: hidden;
      opacity: 0.07;
      background: repeating-linear-gradient(90deg,
          transparent 0px,
          transparent 18px,
          rgba(0, 0, 0, 0.9) 18px,
          rgba(0, 0, 0, 0.9) 19px);
    }

    /* Tiny carnival lights on topbar */
    .rt-topbar-lights {
      position: absolute;
      bottom: 3px;
      left: 0;
      right: 0;
      height: 18px;
      pointer-events: none;
      display: flex;
      justify-content: space-evenly;
      align-items: flex-end;
      padding: 0 30px;
    }

    .rt-topbar-bulb {
      width: 8px;
      height: 10px;
      border-radius: 50% 50% 40% 40%;
      flex-shrink: 0;
      opacity: 0.85;
      animation: rtBulbPulse 2s ease-in-out infinite;
    }

    /* Brand / Title */
    .rt-brand {
      font-family: 'Poppins', sans-serif;
      font-size: 1.05rem;
      font-weight: 800;
      color: #ffd580;
      display: flex;
      align-items: center;
      gap: 8px;
      text-shadow:
        0 0 14px rgba(255, 200, 0, 0.7),
        0 2px 4px rgba(0, 0, 0, 0.8);
      white-space: nowrap;
      letter-spacing: 0.3px;
      flex-shrink: 0;
    }

    .rt-brand-icon {
      font-size: 1.3rem;
      display: inline-flex;
      filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.6));
    }

    /* Diff tabs — arcade token style */
    .rt-diff-tabs {
      display: flex;
      gap: 6px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .rt-diff-tab {
      padding: 5px 15px;
      border-radius: 22px;
      font-size: 0.75rem;
      font-weight: 700;
      border: 2px solid rgba(255, 255, 255, 0.18);
      cursor: pointer;
      background: rgba(0, 0, 0, 0.35);
      color: rgba(255, 220, 140, 0.8);
      transition: all 0.2s;
      font-family: 'Poppins', sans-serif;
      letter-spacing: 0.3px;
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .rt-diff-tab:hover {
      background: rgba(255, 200, 80, 0.15);
      border-color: rgba(255, 200, 80, 0.4);
      color: #ffd700;
    }

    .rt-diff-tab.active {
      background: linear-gradient(145deg, #ffd700 0%, #f5a623 100%);
      border-color: #ffe680;
      color: #3d1a00;
      box-shadow:
        0 3px 10px rgba(245, 166, 35, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    /* Right side: round info + close */
    .rt-topbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .rt-round-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 3px;
      min-width: 110px;
    }

    .rt-prog-bar {
      width: 100%;
      height: 7px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 99px;
      overflow: hidden;
      border: 1px solid rgba(255, 200, 80, 0.2);
    }

    .rt-prog-fill {
      height: 100%;
      background: linear-gradient(90deg, #ffd700, #f5a623);
      border-radius: 99px;
      transition: width 0.45s ease;
      box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    }

    .rt-prog-label {
      font-size: 0.7rem;
      font-weight: 700;
      color: #ffd580;
      letter-spacing: 0.3px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
      white-space: nowrap;
    }

    .rt-close-btn {
      background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%);
      border: 2px solid rgba(255, 200, 80, 0.35);
      border-radius: 50%;
      width: 36px;
      height: 36px;
      font-size: 1rem;
      cursor: pointer;
      color: rgba(255, 230, 150, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.18s;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .rt-close-btn:hover {
      background: rgba(255, 100, 100, 0.35);
      border-color: rgba(255, 120, 120, 0.6);
      color: #fff;
      transform: scale(1.08);
    }

    .rt-viewport {
      position: relative;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .rt-bg {
      position: absolute;
      inset: 0;
      background-image: url('../images/which-has-more-game-bg.jpg');
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
    }

    .rt-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.08) 100%);
      pointer-events: none;
    }

    /* Premium instruction pill */
    .rt-instruction {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 25;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 248, 220, 0.97) 100%);
      width: min(520px, calc(100% - 32px));
      border: 3px solid rgba(255, 187, 40, .9);
      border-radius: 22px;
      padding: 10px 22px 11px;
      font-size: 0.84rem;
      font-weight: 700;
      color: #5c2000;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 200, 80, 0.5);
      white-space: normal;
      font-family: 'Poppins', sans-serif;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      animation: rtInstructPulse 2.5s ease-in-out infinite;
    }

    .rt-question-number {
      display: inline-flex;
      padding: 2px 10px;
      border-radius: 999px;
      background: #7c2d12;
      color: #fff7d6;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .rt-instruction strong {
      color: #431407;
      font-size: 1.08rem;
      line-height: 1.2;
      text-transform: none;
    }

    .rt-instruction small {
      color: #7c2d12;
      font-size: .76rem;
      font-weight: 700;
    }

    @keyframes rtInstructPulse {

      0%,
      100% {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 200, 80, 0.5);
      }

      50% {
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(255, 200, 80, 0.8);
      }
    }

    /* Stage holds the two poles + finish circle, positioned over table */
    .rt-stage {
      position: absolute;
      inset: 0;
      z-index: 15;
    }

    /* PREMIUM Target Zone — large golden glowing circle */
    .rt-finish {
      position: absolute;
      left: 50%;
      bottom: 10%;
      width: 190px;
      height: 110px;
      transform: translateX(-50%);
      border-radius: 50%;
      border: 5px solid rgba(255, 235, 100, 0.9);
      background: radial-gradient(ellipse at center,
          rgba(255, 220, 50, 0.35) 0%,
          rgba(255, 200, 30, 0.15) 50%,
          transparent 100%);
      box-shadow:
        0 0 30px rgba(255, 215, 0, 0.7),
        0 0 60px rgba(255, 215, 0, 0.3),
        inset 0 0 30px rgba(255, 215, 0, 0.4);
      animation: rtFinishPulse 1.6s ease-in-out infinite;
      z-index: 12;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Sparkles around target edge */
    .rt-finish::before {
      content: '✨';
      position: absolute;
      font-size: 1.2rem;
      animation: rtOrbit 3s linear infinite;
      top: -10px;
      left: 50%;
      transform-origin: 0 60px;
    }

    .rt-finish::after {
      content: '⭐';
      position: absolute;
      font-size: 1rem;
      animation: rtOrbit 3s linear infinite reverse;
      animation-delay: -1.5s;
      top: -8px;
      left: 50%;
      transform-origin: 0 58px;
    }

    @keyframes rtOrbit {
      from {
        transform: translateX(-50%) rotate(0deg) translateY(-55px);
      }

      to {
        transform: translateX(-50%) rotate(360deg) translateY(-55px);
      }
    }

    .rt-finish-label {
      font-size: 0.75rem;
      font-weight: 800;
      color: #6b3a0a;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 245, 200, 0.95));
      padding: 4px 14px;
      border-radius: 20px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .rt-finish.glow-target {
      border-color: #fff;
      box-shadow:
        0 0 50px rgba(255, 235, 120, 1),
        0 0 100px rgba(255, 235, 120, 0.5),
        inset 0 0 40px rgba(255, 235, 120, 0.7);
      animation: rtFinishActive 0.4s ease-in-out infinite;
    }

    @keyframes rtFinishPulse {

      0%,
      100% {
        transform: translateX(-50%) scale(1);
      }

      50% {
        transform: translateX(-50%) scale(1.05);
      }
    }

    @keyframes rtFinishActive {

      0%,
      100% {
        transform: translateX(-50%) scale(1.04);
      }

      50% {
        transform: translateX(-50%) scale(1.08);
      }
    }

    /* PREMIUM Ring Tower Poles */
    .rt-pole {
      position: absolute;
      bottom: 28%;
      width: 160px;
      cursor: grab;
      user-select: none;
      touch-action: none;
      z-index: 16;
      filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
      animation: rtFloat 3.2s ease-in-out infinite;
      transition: left 0.32s cubic-bezier(.34, 1.56, .64, 1), bottom 0.32s cubic-bezier(.34, 1.56, .64, 1), transform 0.2s ease;
    }

    .rt-pole:hover:not(.locked) {
      filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(255, 220, 80, 0.4));
      transform: scale(1.04) translateY(-4px) !important;
      animation-play-state: paused;
    }

    .rt-pole.rt-left {
      left: 25%;
      margin-left: -80px;
      animation-delay: 0s;
    }

    .rt-pole.rt-right {
      left: 75%;
      margin-left: -80px;
      animation-delay: 0.6s;
    }

    .rt-pole.dragging {
      cursor: grabbing;
      transition: none;
      animation: none;
      filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 230, 80, 0.6));
      z-index: 30;
      transform: scale(1.06) rotate(-2deg);
    }

    .rt-pole.locked {
      pointer-events: none;
    }

    @keyframes rtFloat {

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

      30% {
        transform: translateY(-8px) rotate(0.5deg);
      }

      70% {
        transform: translateY(-4px) rotate(-0.5deg);
      }
    }

    .rt-pole.shake {
      animation: rtShake 0.5s ease;
    }

    @keyframes rtShake {

      0%,
      100% {
        transform: translateX(0) rotate(0deg) scale(1);
      }

      10% {
        transform: translateX(-14px) rotate(-5deg) scale(1.03);
      }

      25% {
        transform: translateX(12px) rotate(5deg) scale(1.03);
      }

      40% {
        transform: translateX(-9px) rotate(-3.5deg) scale(1.02);
      }

      55% {
        transform: translateX(7px) rotate(3deg) scale(1.01);
      }

      70% {
        transform: translateX(-4px) rotate(-1.5deg) scale(1);
      }

      85% {
        transform: translateX(3px) rotate(1deg);
      }
    }

    .rt-pole.snap-in {
      animation: rtSnapIn 0.5s cubic-bezier(.34, 1.56, .64, 1);
    }

    @keyframes rtSnapIn {
      0% {
        transform: scale(1) rotate(0deg);
      }

      30% {
        transform: scale(1.18) rotate(-3deg);
      }

      60% {
        transform: scale(1.08) rotate(2deg);
      }

      100% {
        transform: scale(1) rotate(0deg);
      }
    }

    .rt-pole-svg {
      width: 100%;
      height: auto;
      display: block;
      pointer-events: none;
    }

    .rt-ring-wobble {
      animation: rtRingWobble 0.5s ease;
    }

    @keyframes rtRingWobble {

      0%,
      100% {
        transform: rotate(0deg);
      }

      25% {
        transform: rotate(-8deg);
      }

      75% {
        transform: rotate(8deg);
      }
    }

    /* Ring jump animations — staggered delays */
    .rt-ring-jump-1 {
      animation: rtRingJump 0.7s cubic-bezier(.34, 1.56, .64, 1) forwards;
    }

    .rt-ring-jump-2 {
      animation: rtRingJump 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.09s forwards;
    }

    .rt-ring-jump-3 {
      animation: rtRingJump 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.18s forwards;
    }

    .rt-ring-jump-4 {
      animation: rtRingJump 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.27s forwards;
    }

    .rt-ring-jump-5 {
      animation: rtRingJump 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.36s forwards;
    }

    .rt-ring-jump-6 {
      animation: rtRingJump 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.45s forwards;
    }

    .rt-ring-jump-7 {
      animation: rtRingJump 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.54s forwards;
    }

    @keyframes rtRingJump {
      0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
      }

      40% {
        transform: translateY(-40px) rotate(25deg) scale(1.15);
        opacity: 1;
      }

      70% {
        transform: translateY(-20px) rotate(-10deg) scale(1.1);
        opacity: 1;
      }

      100% {
        transform: translateY(-6px) rotate(0deg) scale(1);
        opacity: 1;
      }
    }

    /* Ring count badge — premium */
    .rt-pole-count {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #fff 0%, #fffde0 100%);
      color: #5c2000;
      font-weight: 800;
      font-size: 0.82rem;
      padding: 4px 13px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 2px #f5a623;
      white-space: nowrap;
      font-family: 'Poppins', sans-serif;
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
    }

    .rt-overlay.rt-show-counts .rt-pole-count {
      opacity: 1;
      transform: translateX(-50%) scale(1.1);
    }

    /* ===== PREMIUM CARNIVAL CURTAIN ===== */
    .rt-curtain {
      position: absolute;
      inset: 0;
      z-index: 60;
      pointer-events: none;
      overflow: hidden;
    }

    /* Pointer-events active only when closed (blocking clicks during transition) */
    .rt-curtain.closed {
      pointer-events: all;
    }

    .rt-curtain-left,
    .rt-curtain-right {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 52%;
      /* Rich red velvet with folds */
      background:
        repeating-linear-gradient(180deg,
          transparent 0px,
          transparent 28px,
          rgba(0, 0, 0, 0.08) 28px,
          rgba(0, 0, 0, 0.08) 32px),
        linear-gradient(180deg,
          #7a0f0f 0%,
          #9b1515 12%,
          #6e0b0b 25%,
          #8c1212 38%,
          #6a0909 50%,
          #8a1010 62%,
          #6c0a0a 75%,
          #911313 88%,
          #6f0c0c 100%);
      transition: transform 0.65s cubic-bezier(0.68, -0.15, 0.27, 1.05);
    }

    .rt-curtain-left {
      left: 0;
      transform-origin: left center;
      transform: scaleX(0);
      /* Shiny edge fold on right */
      border-right: 6px solid rgba(255, 100, 100, 0.25);
      box-shadow: inset -20px 0 40px rgba(0, 0, 0, 0.35);
    }

    .rt-curtain-right {
      right: 0;
      transform-origin: right center;
      transform: scaleX(0);
      border-left: 6px solid rgba(255, 100, 100, 0.25);
      box-shadow: inset 20px 0 40px rgba(0, 0, 0, 0.35);
    }

    /* Gold tassel fringe — left curtain inner edge */
    .rt-curtain-left::before {
      content: '';
      position: absolute;
      top: 0;
      right: -4px;
      bottom: 0;
      width: 28px;
      background:
        repeating-linear-gradient(180deg,
          #c8860a 0px, #ffd700 4px, #c8860a 8px,
          transparent 8px, transparent 18px);
      opacity: 0.9;
    }

    /* Gold trim stripe on left curtain right edge */
    .rt-curtain-left::after {
      content: '';
      position: absolute;
      top: 0;
      right: -6px;
      bottom: 0;
      width: 6px;
      background: linear-gradient(180deg,
          #c8860a, #ffd700 20%, #e8a020 40%, #ffd700 60%, #c8860a);
      box-shadow: 0 0 12px rgba(255, 200, 0, 0.7);
    }

    /* Gold tassel fringe — right curtain inner edge */
    .rt-curtain-right::before {
      content: '';
      position: absolute;
      top: 0;
      left: -4px;
      bottom: 0;
      width: 28px;
      background:
        repeating-linear-gradient(180deg,
          #c8860a 0px, #ffd700 4px, #c8860a 8px,
          transparent 8px, transparent 18px);
      opacity: 0.9;
    }

    .rt-curtain-right::after {
      content: '';
      position: absolute;
      top: 0;
      left: -6px;
      bottom: 0;
      width: 6px;
      background: linear-gradient(180deg,
          #c8860a, #ffd700 20%, #e8a020 40%, #ffd700 60%, #c8860a);
      box-shadow: 0 0 12px rgba(255, 200, 0, 0.7);
    }

    /* OPEN state: curtains visible, slide out from center */
    .rt-curtain.open .rt-curtain-left {
      transform: scaleX(1);
    }

    .rt-curtain.open .rt-curtain-right {
      transform: scaleX(1);
    }

    /* CLOSED state: same as open (for round transitions) */
    .rt-curtain.closed .rt-curtain-left {
      transform: scaleX(1);
    }

    .rt-curtain.closed .rt-curtain-right {
      transform: scaleX(1);
    }

    /* Curtain sparkle container */
    .rt-curtain-sparkles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 61;
      overflow: hidden;
    }

    .rt-curtain-spark {
      position: absolute;
      font-size: 1.2rem;
      opacity: 0;
      animation: rtCurtainSpark 1s ease forwards;
    }

    @keyframes rtCurtainSpark {
      0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
      }

      40% {
        opacity: 1;
        transform: scale(1.3) rotate(20deg);
      }

      100% {
        opacity: 0;
        transform: scale(0.5) rotate(45deg) translateY(-30px);
      }
    }

    /* Curtain valance top bar (decorative pelmet) */
    .rt-curtain-valance {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 36px;
      z-index: 62;
      background: linear-gradient(180deg, #5c1010 0%, #8b1515 60%, #6e0e0e 100%);
      border-bottom: 3px solid #c8860a;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 200, 80, 0.2);
      pointer-events: none;
      /* Show only when curtain has open or closed class */
      opacity: 0;
      transition: opacity 0.3s;
    }

    .rt-curtain.open .rt-curtain-valance,
    .rt-curtain.closed .rt-curtain-valance {
      opacity: 1;
    }

    .rt-curtain-valance::before {
      content: '✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦';
      display: block;
      text-align: center;
      font-size: 0.65rem;
      color: rgba(255, 210, 80, 0.55);
      line-height: 34px;
      letter-spacing: 2px;
    }

    /* Feedback bubble — premium pop */
    .rt-feedback {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.6);
      z-index: 50;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 235, 0.98) 100%);
      border-radius: 24px;
      padding: 18px 34px;
      font-size: 1.3rem;
      font-weight: 800;
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(255, 200, 80, 0.4);
      opacity: 0;
      pointer-events: none;
      transition: all 0.28s cubic-bezier(.34, 1.56, .64, 1);
      text-align: center;
      font-family: 'Poppins', sans-serif;
      white-space: nowrap;
    }

    .rt-feedback.show {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .rt-feedback.good {
      border: 3px solid #10B981;
      color: #064e3b;
    }

    .rt-feedback.bad {
      border: 3px solid #ef4444;
      color: #7f1d1d;
    }

    .rt-feedback-sub {
      display: block;
      font-size: 0.8rem;
      font-weight: 600;
      color: #6B7280;
      margin-top: 4px;
    }

    /* Stars / confetti burst layer */
    .rt-burst-layer {
      position: absolute;
      inset: 0;
      z-index: 45;
      pointer-events: none;
      overflow: hidden;
    }

    .rt-star-piece {
      position: absolute;
      font-size: 1.8rem;
      pointer-events: none;
      animation: rtStarBurst 0.9s cubic-bezier(0.25, 0.8, 0.4, 1) forwards;
    }

    @keyframes rtStarBurst {
      0% {
        transform: translate(0, 0) scale(0.2) rotate(0deg);
        opacity: 1;
      }

      60% {
        opacity: 1;
      }

      100% {
        transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(270deg);
        opacity: 0;
      }
    }

    .rt-confetti-piece {
      position: absolute;
      top: -20px;
      border-radius: 3px;
      animation: rtFall linear forwards;
    }

    @keyframes rtFall {
      to {
        transform: translateY(115vh) rotate(900deg);
        opacity: 0;
      }
    }

    /* WIN / completion screen — premium carnival style */
    .rt-win {
      position: absolute;
      inset: 0;
      z-index: 70;
      background: rgba(0, 0, 0, 0.75);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      text-align: center;
      backdrop-filter: blur(3px);
    }

    .rt-win.show {
      display: flex;
    }

    .rt-win-card {
      background: linear-gradient(145deg, #fff9f0 0%, #fff 60%, #fffde0 100%);
      border-radius: 32px;
      padding: 40px 50px;
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 200, 80, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      animation: rtWinPop 0.55s cubic-bezier(.34, 1.56, .64, 1);
      max-width: 90vw;
      position: relative;
      overflow: hidden;
    }

    .rt-win-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, #ff6b6b, #ffd700, #51cf66, #74c0fc, #f783ac, #ffd700, #ff6b6b);
      background-size: 200%;
      animation: rtRainbowSlide 2s linear infinite;
    }

    @keyframes rtRainbowSlide {
      to {
        background-position: 200%;
      }
    }

    @keyframes rtWinPop {
      from {
        transform: scale(0.45) rotate(-5deg);
        opacity: 0;
      }

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

    .rt-win-emoji {
      font-size: 4rem;
      animation: rtTrophy 1s cubic-bezier(.34, 1.56, .64, 1) 0.3s both;
    }

    @keyframes rtTrophy {
      from {
        transform: scale(0) rotate(-30deg);
      }

      to {
        transform: scale(1) rotate(0deg);
      }
    }

    .rt-win-title {
      font-family: 'Poppins', sans-serif;
      font-size: 1.7rem;
      font-weight: 800;
      background: linear-gradient(135deg, #8b4513 0%, #d4a017 50%, #8b4513 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .rt-win-sub {
      font-size: 1rem;
      color: #6B7280;
      font-weight: 600;
    }

    .rt-win-stars {
      font-size: 1.7rem;
      letter-spacing: 4px;
      animation: rtStarSpin 0.5s ease 0.5s both;
    }

    @keyframes rtStarSpin {
      from {
        transform: scale(0) rotate(-90deg);
      }

      to {
        transform: scale(1) rotate(0deg);
      }
    }

    .rt-win-btn {
      margin-top: 10px;
      padding: 13px 38px;
      border-radius: 50px;
      border: none;
      background: linear-gradient(135deg, #ffd700 0%, #f5a623 100%);
      color: #5c2000;
      font-size: 1.05rem;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 8px 22px rgba(245, 166, 35, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
      font-family: 'Poppins', sans-serif;
      transition: transform 0.15s, box-shadow 0.15s;
    }

    .rt-win-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(245, 166, 35, 0.65);
    }

    .rt-win-btn:active {
      transform: translateY(0);
    }

    .rt-win-btn-secondary {
      margin-top: 0;
      background: rgba(0, 0, 0, 0.06);
      color: #5c3000;
      box-shadow: none;
      border: 2px solid rgba(0, 0, 0, 0.15);
    }

    .rt-win-btn-secondary:hover {
      background: rgba(0, 0, 0, 0.1);
      box-shadow: none;
    }

    @media (max-width: 700px) {
      .rt-pole {
        width: 118px;
      }

      .rt-pole.rt-left {
        left: 25%;
        margin-left: -59px;
      }

      .rt-pole.rt-right {
        left: 75%;
        margin-left: -59px;
      }

      .rt-finish {
        width: 145px;
        height: 82px;
        bottom: 10%;
      }

      .rt-instruction {
        font-size: 0.72rem;
        padding: 7px 14px;
      }

      .rt-topbar {
        height: auto;
        padding: 6px 12px;
        flex-wrap: wrap;
        gap: 6px;
      }

      .rt-brand {
        font-size: 0.85rem;
        order: 1;
      }

      .rt-topbar-right {
        order: 2;
        margin-left: auto;
      }

      .rt-diff-tabs {
        position: static;
        transform: none;
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
        gap: 5px;
        padding-bottom: 4px;
      }

      .rt-diff-tab {
        padding: 4px 11px;
        font-size: 0.68rem;
      }

      .rt-round-wrap {
        min-width: 90px;
      }

      .rt-win-card {
        padding: 28px 28px;
      }

      .rt-win-title {
        font-size: 1.4rem;
      }

      .rt-topbar-lights {
        display: none;
      }
    }

    @media (max-width: 480px) {
      .rt-topbar {
        padding: 5px 8px;
        gap: 4px;
      }

      .rt-brand {
        font-size: 0.78rem;
        gap: 5px;
      }

      .rt-brand-icon {
        font-size: 1.1rem;
      }

      .rt-close-btn {
        width: 30px;
        height: 30px;
        font-size: 0.88rem;
      }

      .rt-diff-tab {
        padding: 3px 9px;
        font-size: 0.64rem;
      }

      .rt-prog-label {
        font-size: 0.62rem;
      }

      .rt-instruction {
        top: 8px;
        font-size: 0.7rem;
        transform:unset;
        padding: 5px 12px;
        left:4%;
        /* max-width: 92vw; */
        white-space: normal;
      }

      .rt-pole {
        width: 92px;
        bottom: 26%;
      }

      .rt-pole.rt-left {
        left: 25%;
        margin-left: -46px;
      }

      .rt-pole.rt-right {
        left: 75%;
        margin-left: -46px;
      }

      .rt-finish {
        width: 116px;
        height: 66px;
        bottom: 9%;
      }

      .rt-pole-count {
        font-size: 0.68rem;
        padding: 2px 8px;
      }
    }

    @media (max-width: 420px) and (orientation: portrait) {
      .rt-pole {
        width: 80px;
        bottom: 24%;
      }

      .rt-pole.rt-left {
        left: 25%;
        margin-left: -40px;
      }

      .rt-pole.rt-right {
        left: 75%;
        margin-left: -40px;
      }

      .rt-finish {
        width: 104px;
        height: 58px;
      }
    }

    /* ===== COMING SOON PAGE (shared by topics without a game yet) ===== */
    .cs-overlay {
      position: fixed;
      inset: 0;
      z-index: 9100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: linear-gradient(160deg, #fff7ec 0%, #fff0f0 45%, #eef6ff 100%);
      overflow: hidden;
    }

    .cs-overlay.active {
      display: flex;
    }

    .cs-sparkle-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .cs-sparkle {
      position: absolute;
      font-size: 1.4rem;
      opacity: 0;
      animation: csTwinkle 2.6s ease-in-out infinite;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
    }

    @keyframes csTwinkle {

      0%,
      100% {
        opacity: 0;
        transform: scale(0.6) rotate(0deg);
      }

      50% {
        opacity: 1;
        transform: scale(1.15) rotate(20deg);
      }
    }

    .cs-card {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 560px;
      background: var(--white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      padding: 48px 36px 40px;
      text-align: center;
      border: 1px solid var(--gray-200);
    }

    .cs-illustration {
      width: 168px;
      height: 168px;
      margin: 0 auto 20px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cs-illustration-glow {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, var(--amber-light) 0%, rgba(255, 255, 255, 0) 70%);
      animation: csPulse 2.4s ease-in-out infinite;
    }

    @keyframes csPulse {

      0%,
      100% {
        transform: scale(0.92);
        opacity: 0.7;
      }

      50% {
        transform: scale(1.06);
        opacity: 1;
      }
    }

    .cs-mascot {
      font-size: 5.5rem;
      position: relative;
      z-index: 1;
      animation: csBob 2.8s ease-in-out infinite;
    }

    @keyframes csBob {

      0%,
      100% {
        transform: translateY(0) rotate(-3deg);
      }

      50% {
        transform: translateY(-10px) rotate(3deg);
      }
    }

    .cs-cones {
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 1.6rem;
      display: flex;
      gap: 28px;
      opacity: 0.9;
    }

    .cs-title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 1.7rem;
      color: var(--gray-900);
      margin-bottom: 12px;
      line-height: 1.3;
    }

    .cs-subtitle {
      font-size: 1rem;
      color: var(--gray-500);
      line-height: 1.6;
      max-width: 420px;
      margin: 0 auto 30px;
    }

    .cs-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 36px;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      color: #fff;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
      transition: var(--transition);
    }

    .cs-back-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
    }

    .cs-back-btn:active {
      transform: translateY(0);
    }

    @media (max-width: 600px) {
      .cs-card {
        padding: 36px 22px 30px;
        border-radius: var(--radius-lg);
      }

      .cs-illustration {
        width: 128px;
        height: 128px;
      }

      .cs-mascot {
        font-size: 4rem;
      }

      .cs-title {
        font-size: 1.3rem;
      }

      .cs-subtitle {
        font-size: 0.9rem;
      }

      .cs-back-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 28px;
      }
    }

    /* =====================================================================
       PRE-SCHOOL — MOBILE + LANDSCAPE OVERRIDES (added after the HTML split)
       ===================================================================== */

    /* WonderKids logo in the top bar (replaces the old text brand) */
    .brand-logo { height: 26px; width: auto; display: block; }
    @media (max-width: 480px) { .brand-logo { height: 21px; } }

    /* Home hero: the subtitle was a flex item sizing to its one-line max-content
       (~560px), so on phones it overflowed the screen (text cut off + a phantom
       horizontal scroll). Force the hero column full-width so the text wraps. */
    @media (max-width: 720px) {
      #page-home .hero-inner { flex-wrap: wrap !important; width: 100%; max-width: 100%; }
      #page-home .hero-left { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; }
      #page-home .hero-sub { max-width: 100%; }
    }

    /* Activity cards: ONE column on phones so Learn/Preview never get clipped.
       (Fixes the earlier duplicate rule that forced 2 cramped columns.) */
    @media (max-width: 640px) {
      .activities-grid { grid-template-columns: 1fr !important; gap: 14px; }
      .activity-card-illus { height: 132px; }
    }
    .activity-card-bottom { flex-wrap: wrap; }
    .activity-card-bottom .btn-play,
    .activity-card-bottom .btn-preview { min-width: 0; }

    /* Subject pages on mobile: the bottom nav handles navigation, so hide the Back
       button, and keep all four level filters on ONE equal-width row. */
    @media (max-width: 768px) {
      .subject-page-inner { padding: 18px 14px 32px; }
      .subject-header { margin-bottom: 7px; }
      .subject-header .back-btn { display: none; }
      .level-filter {
        flex-wrap: nowrap;
        gap: 6px;
        margin-bottom: 18px;
      }
      .level-filter .level-pill {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 7px 4px;
        font-size: 0.72rem;
        gap: 4px;
        white-space: nowrap;
      }
    }
    @media (max-width: 380px) {
      .level-filter .level-pill { font-size: 0.66rem; gap: 3px; }
      .level-filter .level-pill i { font-size: 0.6rem; }
    }

    /* Game topbars that aren't already responsive: wrap instead of overlapping.
       PORTRAIT (tall screens): stack brand / tabs / progress onto their own rows.
       (match-puzzle + shape-coder; ring-toss already has its own mobile rules.) */
    @media (max-width: 1024px) and (orientation: portrait) {
      .mp-topbar, .sc-topbar {
        flex-wrap: wrap;
        row-gap: 6px;
        padding: 8px 10px;
        min-height: 0;
      }
      .mp-brand, .sc-brand { font-size: 0.9rem; }
      .mp-brand span, .sc-brand span { white-space: nowrap; }
      .mp-header-left { flex: 1 1 100%; width: 100%; flex-wrap: wrap; gap: 8px 12px; padding-right: 42px; }
      .mp-close-btn { position: absolute; top: 8px; right: 10px; }
      .mp-diff-tabs { width: 100%; gap: 5px; flex-wrap: wrap; justify-content: center; }
      .mp-diff-tab { padding: 5px 8px; font-size: 0.7rem; }
      .mp-progress-wrap {
        order: 4; width: 100%;
        position: static; transform: none; left: auto; top: auto;
      }
      .mp-prog-label { font-size: 0.72rem; }
    }

    /* LANDSCAPE, short screens (phones held sideways): keep the match-puzzle topbar a
       single COMPACT row so the board + tray still fit the limited height. The
       progress bar is dropped (challenge label stays) to make room. */
    @media (orientation: landscape) and (max-height: 520px) {
      .mp-topbar { min-height: 0; padding: 4px 12px; }
      .mp-header-left { flex: 0 1 auto; width: auto; flex-wrap: nowrap; gap: 12px; padding-right: 0; }
      .mp-brand { font-size: 0.85rem; }
      .mp-brand span { white-space: nowrap; }
      .mp-diff-tabs { width: auto; flex-wrap: nowrap; }
      .mp-diff-tab { padding: 4px 9px; font-size: 0.7rem; }
      .mp-progress-wrap {
        position: static; transform: none; left: auto; top: auto;
        width: auto; margin-left: auto; flex-direction: row; gap: 8px;
      }
      .mp-prog-bar { display: none; }
      .mp-close-btn { position: static; }
    }

    /* ===================== ROTATE-TO-LANDSCAPE GATE ===================== */
    .ps-rotate-gate {
      position: fixed; inset: 0; z-index: 99999;
      display: none;
      flex-direction: column; align-items: center; justify-content: center;
      gap: 20px; padding: 30px; text-align: center;
      background: linear-gradient(160deg, #1f2937, #0f172a);
      color: #fff;
    }
    .ps-rotate-gate.show { display: flex; }
    .ps-rotate-phone {
      font-size: 66px; line-height: 1;
      animation: psRotateHint 1.9s ease-in-out infinite;
    }
    @keyframes psRotateHint {
      0%, 42% { transform: rotate(0deg); }
      58%, 100% { transform: rotate(-90deg); }
    }
    .ps-rotate-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.35rem; }
    .ps-rotate-sub { font-size: 0.95rem; opacity: .85; max-width: 340px; line-height: 1.5; }
    .ps-rotate-btn {
      margin-top: 2px;
      background: var(--accent, #2563EB); color: #fff; border: none;
      padding: 13px 26px; border-radius: 12px; font-size: 1rem; font-weight: 700;
      font-family: 'Inter', sans-serif; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.35);
    }
    .ps-rotate-btn:active { transform: scale(.97); }
    .ps-rotate-btn:disabled { cursor: wait; opacity: .72; transform: none; }
    .ps-rotate-status {
      min-height: 1.25em;
      max-width: 360px;
      color: #cbd5e1;
      font-size: .78rem;
      font-weight: 600;
      line-height: 1.4;
    }

    .ps-rotate-loading {
      width: min(88vw, 430px);
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: clamp(22px, 6vw, 34px);
      border: 2px solid rgba(255,255,255,.78);
      border-radius: 28px;
      color: #172033;
      background: linear-gradient(155deg, #fffdf5, #eefaff 54%, #f3edff);
      box-shadow: 0 24px 65px rgba(2,8,23,.42), inset 0 1px rgba(255,255,255,.95);
    }

    .ps-rotate-gate.is-turning > :not(.ps-rotate-loading) { display: none; }
    .ps-rotate-gate.is-turning .ps-rotate-loading { display: flex; }

    .ps-rotate-loading-visual {
      position: relative;
      width: 96px;
      height: 96px;
      display: grid;
      place-items: center;
      margin-bottom: 3px;
      border-radius: 30px;
      background: linear-gradient(145deg, #fff1a8, #ffd04f);
      box-shadow: 0 8px 0 #e8a92c, 0 14px 28px rgba(217,119,6,.24);
      animation: psLoadingFloat 1.5s ease-in-out infinite;
    }

    .ps-rotate-loading-visual span { font-size: 3rem; line-height: 1; }
    .ps-rotate-loading-visual i {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 5px rgba(34,197,94,.15);
      animation: psLoadingSpark 1.2s ease-in-out infinite alternate;
    }
    .ps-rotate-loading-visual i:nth-of-type(1) { top: -4px; right: 4px; }
    .ps-rotate-loading-visual i:nth-of-type(2) { right: -10px; bottom: 11px; background: #38bdf8; animation-delay: -.35s; }
    .ps-rotate-loading-visual i:nth-of-type(3) { left: -8px; bottom: 18px; background: #fb7185; animation-delay: -.7s; }
    .ps-rotate-loading strong { font: 800 clamp(1.15rem, 5vw, 1.45rem)/1.2 'Poppins', sans-serif; }
    .ps-rotate-loading > span { color: #64748b; font-size: .85rem; font-weight: 700; }
    .ps-rotate-loading-track {
      width: min(100%, 290px);
      height: 13px;
      margin-top: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: #dbe7f2;
      box-shadow: inset 0 2px 4px rgba(15,23,42,.12);
    }
    .ps-rotate-loading-track i {
      display: block;
      width: 42%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #10b981, #38bdf8, #8b5cf6);
      animation: psLoadingTrack 1.05s ease-in-out infinite;
    }
    @keyframes psLoadingFloat { 50% { transform: translateY(-7px) rotate(2deg); } }
    @keyframes psLoadingSpark { to { transform: scale(.62); opacity: .55; } }
    @keyframes psLoadingTrack { from { transform: translateX(-105%); } to { transform: translateX(240%); } }

    /* Fallback for WebViews and mobile browsers that reject orientation.lock().
       Rotate one landscape-sized surface so every overlay, score and close
       control stays together. */
    @media (orientation: portrait) and (max-width: 900px) {
      html.ps-virtual-landscape,
      html.ps-virtual-landscape body {
        overflow: hidden !important;
      }

      html.ps-virtual-landscape body {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        width: 100dvh !important;
        height: 100vw !important;
        min-width: 0 !important;
        min-height: 0 !important;
        transform: translate(-50%, -50%) rotate(90deg) !important;
        transform-origin: center center !important;
      }

      html.ps-virtual-landscape .wonder-arcade-overlay {
        width: 100% !important;
        height: 100% !important;
      }
    }
    .ps-rotate-skip {
      background: none; border: none; color: #cbd5e1;
      font-size: .85rem; text-decoration: underline; cursor: pointer;
    }
    /* If the device is actually in landscape, never show the gate. */
    @media (orientation: landscape) { .ps-rotate-gate.show { display: flex !important; } }

    /* Final overrides stay last because this legacy stylesheet contains earlier
       duplicate responsive rules from the original monolithic prototype. */
    .skill-pillars-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .skill-pillar { display: flex; flex-direction: column; }
    .activity-card[hidden] { display: none !important; }
    .wonder-arcade-frame-wrap { padding-top: 0; }
    .cto-level-complete {
      position: absolute; inset: 0; z-index: 120;
      display: grid; place-items: center; padding: 18px;
      background: rgba(15,23,42,.72); backdrop-filter: blur(7px);
    }
    .cto-level-complete-card {
      position: relative; isolation: isolate;
      width: min(92vw, 500px); padding: clamp(24px, 4vw, 36px); text-align: center;
      border: 3px solid rgba(255,255,255,.92); border-radius: 28px;
      background:
        radial-gradient(circle at 15% 8%, rgba(255,214,67,.24), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(96,165,250,.2), transparent 28%),
        linear-gradient(155deg, #ffffff 0%, #fffdf4 58%, #f4f8ff 100%);
      box-shadow: 0 26px 70px rgba(15,23,42,.42), inset 0 1px 0 #fff;
      animation: ctoCompleteEnter .36s cubic-bezier(.2,.9,.25,1.18) both;
    }
    .cto-level-complete-card::before {
      content: ''; position: absolute; z-index: -1; inset: 10px;
      border: 1px solid rgba(245,158,11,.25); border-radius: 20px; pointer-events: none;
    }
    .cto-complete-sparkles { position: absolute; inset: 18px 22px auto; display: flex; justify-content: space-between; pointer-events: none; }
    .cto-complete-sparkles span { display: block; font-size: clamp(1rem,3vw,1.35rem); animation: ctoSparkle 1.5s ease-in-out infinite alternate; }
    .cto-complete-sparkles span:nth-child(2) { animation-delay: .35s; }
    .cto-complete-sparkles span:nth-child(3) { animation-delay: .7s; }
    .cto-level-complete-emoji {
      display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 8px;
      border-radius: 24px; font-size: 3.2rem; line-height: 1;
      background: linear-gradient(145deg,#fff7cc,#ffe17a); box-shadow: 0 10px 24px rgba(245,158,11,.24);
      transform: rotate(-3deg);
    }
    .cto-complete-kicker { display: block; margin-bottom: 4px; color: #d97706; font: 800 .76rem/1.2 'Inter',sans-serif; letter-spacing: .12em; text-transform: uppercase; }
    .cto-level-complete-card h2 { margin: 0 0 6px; color: #172033; font: 800 clamp(1.55rem,4vw,2.25rem)/1.12 'Poppins',sans-serif; }
    .cto-level-complete-card p { max-width: 390px; margin: 0 auto 16px; color: #64748b; font-size: clamp(.88rem,2.2vw,1rem); line-height: 1.45; }
    .cto-final-score {
      display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px;
      max-width: 330px; margin: 0 auto 10px; padding: 12px 18px;
      border: 2px solid #f4c14a; border-radius: 18px; text-align: left;
      background: linear-gradient(135deg,#fff9dc,#ffed9a); box-shadow: 0 8px 20px rgba(217,119,6,.12);
    }
    .cto-final-score span { color: #92400e; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .cto-final-score strong { grid-row: 1 / 3; grid-column: 2; color: #172033; font: 800 clamp(2rem,7vw,2.75rem)/1 'Poppins',sans-serif; }
    .cto-final-score small { color: #a16207; font-size: .76rem; font-weight: 700; }
    .cto-complete-summary { margin-bottom: 18px; color: #166534; font-size: .84rem; font-weight: 800; }
    .cto-complete-summary span { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: #dcfce7; }
    .cto-complete-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .cto-level-complete-card .cto-complete-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 50px; padding: 11px 18px; border: 0; border-radius: 14px;
      font: 800 .95rem/1 'Inter',sans-serif; cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .cto-complete-btn-primary { color: #fff; background: linear-gradient(135deg,#2563eb,#4f46e5); box-shadow: 0 10px 22px rgba(37,99,235,.28); }
    .cto-complete-btn-secondary { color: #334155; background: #eef2f7; box-shadow: inset 0 0 0 1px #d6deea; }
    .cto-level-complete-card .cto-complete-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
    .cto-level-complete-card .cto-complete-btn:active { transform: translateY(0) scale(.98); }
    .cto-level-complete-card .cto-complete-btn:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 3px; }
    .cto-overlay button { cursor: pointer; }
    @keyframes ctoCompleteEnter { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes ctoSparkle { from { opacity: .55; transform: scale(.86) rotate(-8deg); } to { opacity: 1; transform: scale(1.12) rotate(8deg); } }

    @media (max-width: 520px) {
      .cto-level-complete-card { width: min(94vw, 420px); padding: 22px 16px 18px; border-radius: 22px; }
      .cto-level-complete-emoji { width: 64px; height: 64px; border-radius: 19px; font-size: 2.65rem; }
      .cto-level-complete-card p { margin-bottom: 12px; }
      .cto-final-score { padding: 10px 14px; border-radius: 15px; }
      .cto-complete-summary { margin-bottom: 12px; }
      .cto-complete-actions { grid-template-columns: 1fr; gap: 8px; }
      .cto-level-complete-card .cto-complete-btn { min-height: 46px; }
    }
    @media (max-height: 620px) {
      .cto-level-complete-card { padding-top: 18px; padding-bottom: 16px; }
      .cto-level-complete-emoji { width: 54px; height: 54px; border-radius: 16px; font-size: 2.25rem; margin-bottom: 5px; }
      .cto-level-complete-card p { margin-bottom: 9px; line-height: 1.3; }
      .cto-final-score { margin-bottom: 7px; padding-block: 8px; }
      .cto-complete-summary { margin-bottom: 9px; }
      .cto-level-complete-card .cto-complete-btn { min-height: 42px; padding-block: 9px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cto-level-complete-card, .cto-complete-sparkles span { animation: none; }
      .cto-level-complete-card .cto-complete-btn { transition: none; }
      .ps-rotate-phone,
      .ps-rotate-loading-visual,
      .ps-rotate-loading-visual i,
      .ps-rotate-loading-track i { animation: none; }
    }

    /* Shared viewport guard for native-game and preschool-shell dialogs. */
    .modal-overlay,
    .bb-complete,
    .mp-complete-modal,
    .rescue-win,
    .rt-win,
    .cto-level-complete {
      box-sizing: border-box;
      max-width: 100vw;
      max-height: 100dvh;
      padding: 12px !important;
      overflow: hidden;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay > .modal,
    .bb-complete-card,
    .mp-complete-inner,
    .rescue-win-card,
    .rt-win-card,
    .cto-level-complete-card {
      box-sizing: border-box;
      max-width: calc(100vw - 24px) !important;
      max-height: calc(100dvh - 24px) !important;
      margin: auto;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior: contain;
      transition-property: opacity, transform !important;
    }
    @media (max-width: 1020px) { .skill-pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 600px) {
      .wonder-arcade-frame-wrap { padding-top: 0 !important; background: #fff; }
      .skill-pillars-grid { grid-template-columns: 1fr; }
    }

    /* Native score headers: one compact, collision-free layout at every size. */
    @media (max-width: 760px) {
      .native-game-score {
        min-width: 92px;
        min-height: 34px;
        gap: 8px;
        padding: 4px 9px;
        border-radius: 11px;
      }
      .native-game-score > span { font-size: .58rem; }
      .native-game-score > strong { font-size: .92rem; }
      .bb-progress-wrap { display: none; }
      .bb-header-score { position: absolute; }
      .rescue-counter { margin-left: auto; margin-right: 42px; }
      .rt-instruction {
        width: min(440px, calc(100% - 20px));
        padding: 7px 12px 8px;
      }
      .rt-instruction strong { font-size: .92rem; }
      .rt-instruction small { font-size: .67rem; }
    }

    @media (min-width: 761px) and (max-width: 960px) {
      .bb-progress-wrap { max-width: 200px; }
    }

    @media (max-width: 520px) {
      .bb-brand > span,
      .rescue-brand > span,
      .rt-brand > span:not(.rt-brand-icon) { display: none; }
      .rt-round-wrap { display: none; }
      .rescue-counter {
        margin-right: 34px;
        padding: 4px 8px;
        font-size: .64rem;
      }
      .rt-instruction {
        left: 50% !important;
        transform: translateX(-50%) !important;
      }
      .rt-question-number { font-size: .57rem; }
      .native-game-final-score { min-width: 160px; padding: 8px 12px; }
    }

    /* Rescue HUD: keep every metric in normal layout flow on mobile. The score
       used to be absolutely centered, which let the rescued counter slide
       underneath it as its text grew from 0 / 3 to 3 / 3. */
    @media (max-width: 900px) {
      .rescue-topbar {
        display: grid;
        grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
        align-items: center;
        column-gap: 6px;
      }

      .rescue-header-score {
        position: static;
        inset: auto;
        transform: none;
        min-width: 82px;
        margin: 0;
      }

      .rescue-counter {
        min-width: 0;
        margin: 0;
        justify-self: end;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .rescue-close {
        margin: 0;
      }
    }

    @media (max-width: 380px) {
      .rescue-topbar {
        column-gap: 4px;
        padding-inline: 6px;
      }

      .rescue-header-score {
        min-width: 76px;
        gap: 5px;
        padding-inline: 6px;
      }

      .rescue-counter {
        padding-inline: 6px;
        font-size: .59rem;
      }
    }

    /* Compact skill catalog for phones. The complete card remains the tap target,
       while a two-column layout keeps all nine skills within five short rows. */
    @media (max-width: 600px) {
      .preschool-hero {
        padding: 12px 14px 13px !important;
      }

      .preschool-hero .hero-eyebrow {
        margin-bottom: 5px;
        font-size: .64rem;
        letter-spacing: 1.2px;
      }

      .preschool-hero h1 {
        margin-bottom: 0;
        font-size: clamp(1.16rem, 6vw, 1.36rem);
        line-height: 1.16;
      }

      .preschool-hero .hero-sub {
        display: none;
      }

      .pillars-section {
        padding: 8px 10px calc(18px + env(safe-area-inset-bottom));
      }

      .pillars-section .section-header {
        margin-bottom: 10px;
      }

      .pillars-section .section-label {
        display: none;
      }

      .pillars-section .section-title {
        font-size: 1.08rem;
        line-height: 1.25;
      }

      .skill-pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .skill-pillar {
        min-width: 0;
        padding: 0 9px 9px;
        border-width: 1px;
        border-radius: 14px;
        box-shadow: 0 3px 10px rgba(15, 23, 42, .07);
      }

      .skill-pillar-illus {
        height: 60px;
        margin: 0 -9px 8px;
        border-radius: 13px 13px 0 0;
      }

      .skill-pillar-illus span {
        font-size: 2.15rem;
        filter: drop-shadow(0 4px 7px rgba(15, 23, 42, .12));
      }

      .skill-pillar h3 {
        min-height: 2.35em;
        margin: 0;
        font-size: .78rem;
        line-height: 1.18;
      }

      .skill-pillar .pillar-meta {
        position: absolute;
        top: 7px;
        right: 7px;
        z-index: 1;
        margin: 0;
        padding: 3px 6px;
        border: 1px solid rgba(255, 255, 255, .82);
        border-radius: 999px;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 2px 5px rgba(15, 23, 42, .08);
        backdrop-filter: blur(4px);
      }

      .skill-pillar .pillar-meta-item {
        gap: 2px;
        color: #64748b;
        font-size: .58rem;
        line-height: 1;
      }

      .skill-pillar .pillar-meta-item strong {
        font-size: .68rem;
        line-height: 1;
      }

      .skill-pillar .pillar-explore-btn {
        width: 100%;
        min-height: 28px;
        justify-content: center;
        gap: 5px;
        margin-top: 7px;
        padding: 7px 5px;
        border-radius: 8px;
        font-size: .72rem;
        line-height: 1;
        box-shadow: 0 2px 5px color-mix(in srgb, var(--skill-color) 25%, transparent);
      }

      .skill-pillar:active {
        transform: scale(.985);
      }
    }

    @media (max-width: 340px) {
      .pillars-section { padding-inline: 8px; }
      .skill-pillars-grid { gap: 8px; }
      .skill-pillar { padding-inline: 7px; }
      .skill-pillar-illus { margin-inline: -7px; }
      .skill-pillar h3 { font-size: .73rem; }
      .skill-pillar .pillar-explore-btn { font-size: .64rem; }
    }

    /* Every arcade game uses the complete mobile viewport. Individual games
       keep their own orientation gates inside this edge-to-edge host. */
    @media (max-width: 900px) {
      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen {
        width: 100vw;
        height: 100dvh;
        background: #17233a;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen .wonder-arcade-toolbar {
        position: absolute;
        inset: 0 0 auto;
        z-index: 6;
        min-height: calc(40px + env(safe-area-inset-top));
        height: calc(40px + env(safe-area-inset-top));
        flex: 0 0 calc(40px + env(safe-area-inset-top));
        padding: 0;
        border: 0;
        border-bottom: 1px solid rgba(99,102,241,.18);
        background: linear-gradient(90deg,#e0f2fe,#eef2ff 52%,#f5f3ff);
        box-shadow: 0 4px 14px rgba(15,23,42,.1);
        pointer-events: none;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen .wonder-arcade-title {
        display: none;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen .wonder-arcade-score {
        position: absolute;
        grid-column: auto;
        grid-row: auto;
        top: max(6px, env(safe-area-inset-top));
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        z-index: 7;
        min-width: 70px;
        width: auto;
        height: 28px;
        column-gap: 5px;
        padding: 2px 7px;
        border-radius: 8px;
        pointer-events: none;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen .wonder-arcade-score-label {
        font-size: .52rem;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen #wonder-arcade-score-value {
        font-size: .82rem;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen .wonder-arcade-close {
        top: max(4px, env(safe-area-inset-top));
        right: max(7px, env(safe-area-inset-right));
        z-index: 8;
        width: 32px;
        height: 32px;
        border-width: 0;
        font-size: 1.08rem;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen .wonder-arcade-frame-wrap {
        position: absolute;
        inset: calc(40px + env(safe-area-inset-top)) 0 0;
        width: 100%;
        height: auto;
        padding: 0 !important;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen .wonder-arcade-frame {
        width: 100%;
        height: 100%;
      }

      /* Android WebView already lays the page out below the native status bar.
         Do not add env(safe-area-inset-top) a second time in the host HUD. */
      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-android-webview .wonder-arcade-toolbar {
        min-height: 40px;
        height: 40px;
        flex-basis: 40px;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-android-webview .wonder-arcade-score {
        top: 6px;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-android-webview .wonder-arcade-close {
        top: 4px;
        right: 7px;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-android-webview .wonder-arcade-frame-wrap {
        inset: 40px 0 0;
      }

      /* Color Code Quest reserves the end of its own palette row for these
         host controls, reclaiming the separate 48px parent toolbar. */
      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-inline-mobile-controls .wonder-arcade-toolbar {
        min-height: 0;
        height: 0;
        flex-basis: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-inline-mobile-controls .wonder-arcade-score {
        top: max(19px, calc(env(safe-area-inset-top) + 7px));
        right: max(52px, calc(env(safe-area-inset-right) + 50px));
        left: auto;
        height: 32px;
        transform: none;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-inline-mobile-controls .wonder-arcade-close {
        top: max(17px, calc(env(safe-area-inset-top) + 5px));
        right: max(8px, env(safe-area-inset-right));
        width: 34px;
        height: 34px;
        font-size: 1.3rem;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-inline-mobile-controls .wonder-arcade-frame-wrap {
        inset: 0;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-android-webview.wonder-arcade-inline-mobile-controls .wonder-arcade-score {
        top: 19px;
        right: 52px;
      }

      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-android-webview.wonder-arcade-inline-mobile-controls .wonder-arcade-close {
        top: 17px;
        right: 8px;
      }

      /* A game's portrait/rotation gate owns the whole WebView. Remove the
         parent HUD and give the iframe every available pixel until landscape. */
      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-child-orientation-prompt .wonder-arcade-frame-wrap,
      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-is-loading .wonder-arcade-frame-wrap,
      .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-awaiting-landscape .wonder-arcade-frame-wrap {
        inset: 0;
      }
    }

/* ===== ACTIVITY DETAILS DIALOG =====
   This block intentionally follows the shared viewport guard above. The
   stronger selector keeps the generic max-width rule from stretching this
   reading-focused dialog across the full screen. */
#preview-modal {
  padding: 16px !important;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#preview-modal > .preview-modal-card {
  width: min(100%, 640px);
  max-width: 640px !important;
  height: min(600px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px) !important;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden !important;
  border: 1px solid rgba(100, 116, 139, .24);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .32), 0 4px 14px rgba(15, 23, 42, .12);
}

#preview-modal > .preview-modal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 5px;
  background: linear-gradient(90deg, #0f766e 0 34%, #2563eb 34% 67%, #e85d75 67% 100%);
}

#preview-modal .preview-modal-header {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 54px 16px 20px;
  border-bottom: 1px solid #dfe7ef;
  background: linear-gradient(135deg, #f8fafc 0%, #eef6ff 54%, #fff7ed 100%);
}

#preview-modal .preview-modal-emoji {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid #d9e3ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .1);
  font-size: 2rem;
  line-height: 1;
}

#preview-modal .preview-modal-identity {
  min-width: 0;
}

#preview-modal .modal-title {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
  color: #172033;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: 0;
}

#preview-modal .modal-badges {
  align-items: center;
  gap: 7px;
}

#preview-modal .preview-skill-chip,
#preview-modal .time-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.15;
}

#preview-modal .preview-skill-chip {
  border: 1px solid #bae6fd;
  background: #ecfeff;
  color: #155e75;
}

#preview-modal .time-chip {
  height: auto;
  border-color: #d9e1e9;
  background: #fff;
  color: #475569;
}

#preview-modal .preview-modal-close {
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border: 1px solid #d7e0e8;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  color: #475569;
  font-size: 1rem;
  box-shadow: 0 5px 12px rgba(15, 23, 42, .08);
}

#preview-modal .preview-modal-close:hover {
  border-color: #f0a6b2;
  background: #fff1f2;
  color: #be123c;
}

#preview-modal .preview-modal-close:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}

#preview-modal .preview-modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 0 26px;
  padding: 18px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b8c5d1 transparent;
}

#preview-modal .preview-modal-body::-webkit-scrollbar {
  width: 6px;
}

#preview-modal .preview-modal-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #b8c5d1;
}

#preview-modal .preview-learn-section {
  padding-right: 22px;
  border-right: 1px solid #e2e8f0;
}

#preview-modal .preview-detail-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#preview-modal .preview-detail-section {
  min-width: 0;
}

#preview-modal .modal-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #334155;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
}

#preview-modal .preview-section-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  border-radius: 7px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: .72rem;
}

#preview-modal .preview-time-icon {
  color: #64748b;
  font-size: .82rem;
  line-height: 1;
}

#preview-modal .preview-modal-close span {
  display: block;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}

#preview-modal .preview-list {
  gap: 10px;
}

#preview-modal .preview-list li {
  min-height: 24px;
  padding-left: 31px;
  color: #334155;
  font-size: .88rem;
  line-height: 1.45;
}

#preview-modal .preview-list li::before {
  top: 1px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dcfce7;
  color: #047857;
  font-size: .7rem;
}

#preview-modal .modal-instructions {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid #e85d75;
  color: #475569;
  font-size: .86rem;
  line-height: 1.55;
}

#preview-modal .preview-skills {
  gap: 7px;
}

#preview-modal .skill-tag {
  padding: 5px 10px;
  border-color: #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: .7rem;
  line-height: 1.15;
}

#preview-modal .preview-modal-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 20px 14px;
  border-top: 1px solid #dfe7ef;
  background: #f8fafc;
}

#preview-modal .preview-level-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}

#preview-modal .preview-level-heading[hidden] {
  display: none !important;
}

#preview-modal .preview-modal-footer.single-action {
  grid-template-columns: 1fr;
}

#preview-modal .preview-level-heading strong {
  color: #172033;
  font-size: .84rem;
}

#preview-modal .preview-level-heading span {
  color: #64748b;
  font-size: .67rem;
}

#preview-modal .preview-level-actions {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px;
}

#preview-modal .preview-level-actions:has(.game-level-btn:only-child) {
  grid-template-columns: 1fr !important;
}

#preview-modal .game-level-btn {
  min-height: 48px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: .78rem;
  box-shadow: 0 6px 13px rgba(15, 23, 42, .12);
}

#preview-modal .game-level-btn:hover,
#preview-modal .game-level-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(15, 23, 42, .16);
}

#preview-modal .game-level-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .26);
  outline-offset: 2px;
}

@media (max-width: 680px) {
  #preview-modal {
    padding: 10px !important;
  }

  #preview-modal > .preview-modal-card {
    height: min(560px, calc(100dvh - 20px));
    max-height: calc(100dvh - 20px) !important;
  }

  #preview-modal .preview-modal-header {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    padding: 19px 48px 15px 16px;
  }

  #preview-modal .preview-modal-emoji {
    width: 54px;
    height: 54px;
    font-size: 2rem;
  }

  #preview-modal .modal-title {
    margin-bottom: 6px;
    font-size: 1.16rem;
  }

  #preview-modal .preview-skill-chip,
  #preview-modal .time-chip {
    min-height: 25px;
    padding: 4px 8px;
    font-size: .64rem;
  }

  #preview-modal .preview-modal-close {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
  }

  #preview-modal .preview-modal-body {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 17px 16px;
  }

  #preview-modal .preview-learn-section {
    padding: unset;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }

  #preview-modal .preview-detail-stack {
    gap: 18px;
  }

  #preview-modal .preview-modal-footer {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 11px 12px 13px;
  }

  #preview-modal .preview-level-heading {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  #preview-modal .game-level-btn {
    min-height: 44px;
    padding-inline: 4px;
    font-size: .72rem;
  }
}

@media (max-width: 360px) {
  #preview-modal .preview-modal-header {
    grid-template-columns: 46px minmax(0, 1fr);
    padding-left: 12px;
  }

  #preview-modal .preview-modal-emoji {
    width: 46px;
    height: 46px;
    font-size: 1.7rem;
  }

  #preview-modal .preview-skill-chip {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #preview-modal .preview-modal-body {
    padding-inline: 12px;
  }
}

@media (max-height: 520px) {
  #preview-modal .preview-modal-header {
    grid-template-columns: 46px minmax(0, 1fr);
    padding-top: 12px;
    padding-bottom: 10px;
  }

  #preview-modal .preview-modal-emoji {
    width: 46px;
    height: 46px;
    font-size: 1.75rem;
  }

  #preview-modal .modal-title {
    font-size: 1.05rem;
  }

  #preview-modal .preview-modal-body {
    padding-block: 13px;
  }

  #preview-modal .preview-modal-footer {
    padding-block: 9px 10px;
  }

  #preview-modal .preview-level-heading span {
    display: none;
  }

  #preview-modal .game-level-btn {
    min-height: 40px;
  }
}

    /* Compact mobile catalog: show two playable game cards per row without
       shrinking controls below a comfortable touch size. */
    @media (max-width: 640px) {
      #page-category .subject-page-inner {
        padding-inline: 10px;
      }

      #category-games .activities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }

      #category-games .activity-card {
        min-width: 0;
        border-top-width: 3px;
        border-radius: 14px;
      }

      #category-games .activity-card-illus {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        height: 88px;
        border-radius: 11px 11px 0 0;
      }

      #category-games .arcade-card-emoji {
        font-size: 2.55rem;
      }

      #category-games .arcade-card-play {
        top: auto;
        right: 6px;
        bottom: 6px;
        left: auto;
        z-index: 3;
        margin: 0;
        transform: none;
        width: 29px;
        height: 29px;
        font-size: .6rem;
      }

      #category-games .activity-card-top {
        min-height: unset;
        padding: 9px 8px 7px;
      }

      #category-games .activity-name {
        display: block;
        min-width: 0;
        max-width: 100%;
        min-height: 0;
        overflow: hidden;
        font-size: .86rem;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #category-games .activity-card-bottom {
        gap: 6px;
        padding: 7px;
      }

      #category-games .game-level-actions {
        gap: 3px;
      }

      #category-games .game-level-btn {
        min-height: 26px;
        padding: 4px 1px;
        border-radius: 7px;
        font-size: .57rem;
        letter-spacing: -.01em;
      }

      #category-games .game-level-btn small {
        display: none;
      }

      #category-games .btn-preview {
        min-height: 26px;
        padding: 7px 4px;
        border-radius: 8px;
        font-size: .67rem;
        gap: 4px;
      }
    }

    @media (max-width: 340px) {
      #page-category .subject-page-inner {
        padding-inline: 8px;
      }

      #category-games .activities-grid {
        gap: 8px !important;
      }

      #category-games .activity-card-illus {
        height: 82px;
      }

      #category-games .activity-name {
        font-size: .75rem;
        text-align: center;
      }

      #category-games .game-level-btn {
        font-size: .72rem;
      }
    }