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

/* Bridge Builder's mountain adventure header. */
.wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-toolbar { flex-basis: 60px; min-height: 60px; grid-template-columns: minmax(0, 1fr) auto minmax(48px, .15fr); background: linear-gradient(#255685, #15385e); border-bottom: 2px solid #75b9df; }
.wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-title-copy { display: block; min-width: 0; }
.wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-title::before { content: '\1F477'; font-size: 33px; line-height: 1; }
.wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-title-name { color: white; font-family: 'Trebuchet MS', ui-rounded, sans-serif; font-size: clamp(21px, 3vw, 31px); font-weight: 1000; letter-spacing: -.6px; }
.wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-title-name b { color: #ffda67; }
.wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-score { background: #102f50; border: 1px solid #4a7da2; color: white; border-radius: 24px; grid-template-columns: auto auto auto; min-width: 135px; gap: 8px; box-shadow: none; }
.wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-score::before { content: '\2605'; color: #ffcf43; font-size: 26px; }
.wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-score-label, .wonder-arcade-overlay.wonder-arcade-bridge-builder #wonder-arcade-score-value { color: white; }
.wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-close { width: 40px; height: 40px; background: #3c6997; border: 1px solid #6195bd; box-shadow: 0 3px 0 #102d4d66; }
@media (max-width: 540px) {
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-toolbar { flex-basis: 50px; min-height: 50px; grid-template-columns: minmax(0, 1fr) auto; padding-inline: 9px 49px; gap: 5px; }
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-title { gap: 3px; }
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-title::before { font-size: 24px; }
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-title-name { font-size: 20px; }
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-score { min-width: 53px; padding: 4px 8px; height: 32px; grid-template-columns: auto auto; gap: 4px; }
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-score-label { display: none; }
 .wonder-arcade-overlay.wonder-arcade-bridge-builder #wonder-arcade-score-value { font-size: 17px; }
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-score::before { font-size: 19px; }
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-close { width: 32px; height: 32px; top: max(8px, env(safe-area-inset-top)); right: 8px; }
}
@media (max-height: 460px) {
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-toolbar { flex-basis: 40px; min-height: 40px; padding-block: 3px; }
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-title-name { font-size: 22px; }
 .wonder-arcade-overlay.wonder-arcade-bridge-builder .wonder-arcade-close { width: 31px; height: 31px; top: 5px; }
}

/* Seesaw Safari's host header matches the illustrated jungle scene. */
.wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-toolbar {
  flex-basis: 60px;
  min-height: 60px;
  grid-template-columns: minmax(0, 1fr) auto minmax(48px, 1fr);
  background: linear-gradient(180deg, #b8eaff, #e5f9ff);
  border-bottom: 3px solid #fff;
}
.wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-title { gap: 8px; }
.wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-title-copy { display: block; min-width: 0; }
.wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-safari-word { color: #278e25; }
.wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-title::before {
  content: '';
  flex: 0 0 48px;
  width: 48px;
  height: 44px;
  background: url('../games/wonder-arcade/wonder-lab/assets/seesaw-safari/elephant.webp') center / contain no-repeat;
}
.wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-title-name {
  color: #137dcb;
  font-family: ui-rounded, 'Trebuchet MS', sans-serif;
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 1000;
  letter-spacing: -1px;
  -webkit-text-stroke: 1px white;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 white;
}
.wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-score {
  border-color: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 0 #a1cce74d;
}
.wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-score::before {
  content: '★';
  grid-row: 1;
  color: #ffc52c;
  font-size: 26px;
  text-shadow: 0 2px 0 #e6a331;
}
.wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-score { grid-template-columns: auto auto auto; }
.wonder-arcade-overlay.wonder-arcade-seesaw-safari #wonder-arcade-score-value { font-size: 22px; }
.wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-close { width: 44px; height: 44px; background: #ff5276; border: 2px solid #ff87a0; box-shadow: 0 3px 0 #cb3255; backdrop-filter: none; }
@media (max-width: 540px) {
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; padding-left: 8px; padding-right: 55px; flex-basis: 52px; min-height: 52px; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-title { gap: 3px; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-title::before { flex-basis: 30px; width: 30px; height: 34px; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-title-name { font-size: 20px; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-score { min-width: 60px; height: 36px; padding: 3px 7px; gap: 4px; grid-template-columns: auto auto; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-score-label { display: none; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-score::before { font-size: 20px; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari #wonder-arcade-score-value { font-size: 18px; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-close { top: max(7px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 36px; height: 36px; }
}
@media (max-height: 460px) {
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-toolbar { flex-basis: 44px; min-height: 44px; padding-block: 3px; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-title::before { height: 34px; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-title-name { font-size: 23px; }
  .wonder-arcade-overlay.wonder-arcade-seesaw-safari .wonder-arcade-close { width: 34px; height: 34px; top: 5px; }
}

/* Shape Builder gets a compact mission HUD inspired by the game world. */
.wonder-arcade-shape-logo,
.wonder-arcade-title-copy,
.wonder-arcade-shape-level,
.wonder-arcade-shape-stars,
.wonder-arcade-shape-tagline {
  display: none;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-toolbar {
  position: relative;
  isolation: isolate;
  flex-basis: 68px;
  min-height: 68px;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) max(72px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  border-bottom: 2px solid #249ee8;
  background:
    radial-gradient(circle at 16% 0, rgba(51, 197, 255, .22), transparent 30%),
    linear-gradient(100deg, #08245f 0%, #0c317e 48%, #071943 100%);
  box-shadow: 0 6px 22px rgba(2, 13, 46, .38), inset 0 -1px rgba(116, 221, 255, .28);
  color: #fff;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-toolbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .32;
  background-image:
    radial-gradient(circle at 8% 35%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 29% 72%, #72dfff 0 1px, transparent 1.5px),
    radial-gradient(circle at 61% 22%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 83% 68%, #72dfff 0 1px, transparent 1.5px);
  background-size: 170px 68px, 210px 68px, 250px 68px, 195px 68px;
  pointer-events: none;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title {
  display: flex;
  gap: 10px;
  color: #fff;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-logo {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(119, 224, 255, .74);
  border-radius: 14px;
  background: linear-gradient(145deg, #15458e, #08245e);
  box-shadow: 0 0 0 3px rgba(54, 191, 255, .12), inset 0 1px rgba(255,255,255,.22);
  font-size: 1.65rem;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.28));
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title-name {
  color: #fff;
  font-size: 1.04rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .01em;
  text-shadow: 0 2px 7px rgba(0,0,0,.35);
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-tagline {
  display: block;
  margin-top: 3px;
  color: #8ddfff;
  font-size: .46rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level {
  display: grid;
  grid-template-columns: auto;
  min-width: 150px;
  height: 46px;
  align-items: center;
  justify-items: center;
  padding: 3px 5px;
  border: 1px solid rgba(117, 202, 255, .48);
  border-bottom: 4px solid #0a1846;
  border-radius: 13px;
  background: linear-gradient(180deg, #244d9b, #123271);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 5px 12px rgba(0,0,0,.24);
  color: #bdeeff;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level > span {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level strong {
  color: #fff;
  font-size: .8rem;
  line-height: 1.05;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level small {
  margin-top: 2px;
  color: #a5d8ff;
  font-size: .49rem;
  font-weight: 800;
  text-transform: uppercase;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-stars {
  display: flex;
  height: 46px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid rgba(117, 202, 255, .4);
  border-bottom: 4px solid #09163e;
  border-radius: 13px;
  background: linear-gradient(180deg, #244d9b, #123271);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 5px 12px rgba(0,0,0,.22);
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-stars span {
  color: #536caa;
  font-size: 1.35rem;
  line-height: 1;
  -webkit-text-stroke: 1px #8fb5e9;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.26));
  transition: color 240ms ease, transform 240ms ease, filter 240ms ease;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder[data-shape-stars="1"] .wonder-arcade-shape-stars span:nth-child(1),
.wonder-arcade-overlay.wonder-arcade-shape-builder[data-shape-stars="2"] .wonder-arcade-shape-stars span:nth-child(-n+2),
.wonder-arcade-overlay.wonder-arcade-shape-builder[data-shape-stars="3"] .wonder-arcade-shape-stars span {
  color: #ffd438;
  -webkit-text-stroke-color: #ff9d16;
  filter: drop-shadow(0 0 6px rgba(255, 210, 42, .65));
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-score {
  grid-column: auto;
  min-width: 104px;
  height: 46px;
  border: 1px solid rgba(116, 205, 255, .5);
  border-bottom: 4px solid #09163e;
  border-radius: 13px;
  background: linear-gradient(180deg, #244d9b, #123271);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 5px 12px rgba(0,0,0,.22);
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-score-label {
  color: #b9dfff;
  font-size: .58rem;
}

.wonder-arcade-overlay.wonder-arcade-shape-builder #wonder-arcade-score-value {
  color: #fff;
  font-size: 1.05rem;
  text-shadow: 0 0 10px rgba(73, 208, 255, .52);
}

.wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-close {
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  border: 2px solid rgba(135, 221, 255, .68);
  background: linear-gradient(145deg, #314f94, #12265c);
  box-shadow: 0 6px 16px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.22);
  font-size: 1.55rem;
}

@media (max-width: 760px) {
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-toolbar {
    flex-basis: 58px;
    min-height: 58px;
    grid-template-columns: minmax(120px, 1fr) auto auto auto;
    gap: 6px;
    padding: max(6px, env(safe-area-inset-top)) max(53px, env(safe-area-inset-right)) 6px max(7px, env(safe-area-inset-left));
  }

  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-logo { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; font-size: 1.35rem; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title { gap: 7px; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title-name { font-size: .82rem; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-tagline { display: none; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level { min-width: 82px; height: 40px; grid-template-columns: auto; padding-inline: 6px; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level small { display: none; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-stars { height: 40px; gap: 1px; padding-inline: 6px; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-stars span { font-size: 1rem; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-score { min-width: 68px; height: 40px; grid-template-columns: 1fr; justify-items: center; padding-inline: 6px; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-score-label { display: none; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-close { top: max(8px, env(safe-area-inset-top)); right: max(7px, env(safe-area-inset-right)); width: 42px; height: 42px; }
}

@media (max-width: 480px) {
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-toolbar {
    grid-template-columns: minmax(105px, 1fr) auto auto;
  }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level { display: none; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-stars { padding-inline: 4px; }
  .wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-score { min-width: 52px; }
}

/* ===== 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; }
/* The creative/memory courses own their score HUD and exit controls. */
.wonder-arcade-overlay.wonder-arcade-course-game>.wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-course-game>.wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-course-game .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;padding:0!important}
.course-resume-exit{display:none}
.wonder-arcade-course-game .course-resume-exit{display:block;margin:14px auto 0;border:0;background:none;color:#52618b;font-family:inherit;font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer}

.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;
}

body.brainlabs-deep-link-loading {
  overflow: hidden;
}

.brainlabs-deep-link-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
}

body.brainlabs-deep-link-loading .brainlabs-deep-link-loader,
html.brainlabs-game-reloading .brainlabs-deep-link-loader { display: flex; }
html.brainlabs-game-reloading body { overflow: hidden; }
html.brainlabs-game-reloading #page-home,
html.brainlabs-game-reloading #page-category { visibility: hidden; }

/* Pattern Memory owns its header, score and exit. */
.wonder-arcade-overlay.wonder-arcade-pattern-memory .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-pattern-memory .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-pattern-memory:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-pattern-memory.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-mirror-match .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-mirror-match .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-mirror-match:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-mirror-match.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-symmetry-check .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-symmetry-check .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-symmetry-check:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-symmetry-check.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-twin-quest .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-twin-quest .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-twin-quest:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-twin-quest.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-mirror-magic .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-mirror-magic .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-mirror-magic:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-mirror-magic.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-picture-puzzle .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-picture-puzzle .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-picture-puzzle:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-picture-puzzle.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}

/* Shared adventure loader: native artwork stays sharp at every screen size. */
.wonder-arcade-loading { isolation: isolate; box-sizing: border-box; background: radial-gradient(ellipse at 6% 6%, #9bf6ef 0%, transparent 45%), radial-gradient(ellipse at 96% 86%, #f6b9f8 0%, transparent 46%), linear-gradient(125deg,#b7e7ff,#bbcbff 52%,#ebc8fa); }
.wonder-arcade-loading::before, .wonder-arcade-loading::after { content:''; position:absolute; z-index:-1; width:clamp(210px,35vw,520px); aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,#ffffff80,#ffffff18); pointer-events:none; }
.wonder-arcade-loading::before { left:-15%; top:-33%; box-shadow:0 65vh 0 80px #ffffff32; }
.wonder-arcade-loading::after { right:-19%; bottom:-23%; box-shadow:-85vw 34vh 0 25px #ffffff35; }
.wonder-arcade-loading-scenery { position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; pointer-events:none; }
.wonder-arcade-loading-scenery path { fill:none; stroke:#fff; stroke-width:2.5; stroke-dasharray:7 8; opacity:.4; animation:loaderJourney 20s linear infinite; }
.wonder-arcade-loading-scenery circle { fill:#fff; filter:drop-shadow(0 0 9px #fff); animation:loaderTwinkle 2.8s ease-in-out infinite alternate; }
.wonder-arcade-loading-scenery circle:nth-of-type(even) { animation-delay:-1.5s; }
.wonder-arcade-loading-card { position:relative; z-index:2; box-sizing:border-box; width:min(100%,544px); display:flex; flex-direction:column; align-items:center; padding:24px 40px 34px; border:3px solid #ffffffed; border-radius:40px; background:linear-gradient(140deg,#ffffffed,#fbfaffed); box-shadow:0 5px 0 #dce7ff,0 24px 48px #5967d64a, inset 0 0 42px #fff; text-align:center; backdrop-filter:blur(16px); animation:wonderArcadeLoadingArrive 600ms cubic-bezier(.2,.9,.25,1.1) both; }
.wonder-arcade-loading-visual { position:relative; width:186px; height:186px; flex-shrink:0; display:grid; place-items:center; margin-bottom:10px; border-radius:50%; background:radial-gradient(circle,#fff 0 39%,#dcfaff 40% 54%,#d9f2ff80 55% 65%,transparent 66%); }
.wonder-arcade-loading-visual::before { content:''; position:absolute; inset:-9%; border-radius:50%; border:2px solid #ffffffb3; box-shadow:0 0 22px #a3dfff70; animation:loaderHalo 2.5s ease-in-out infinite; }
.wonder-arcade-loading-game-icon { position:relative; z-index:3; display:grid; place-items:center; width:57%; height:57%; border:3px solid #fff9b1; border-radius:30px; background:linear-gradient(135deg,#fff9a6 0%,#ffdf43 48%,#ffc336 100%); box-shadow:inset 0 2px 1px #fff, inset -3px -4px 7px #ec9e3055,0 6px 0 #f1ae36,0 10px 0 #ffa77955,0 17px 25px #6e5cb637; font-size:58px; line-height:1; animation:wonderArcadeHeroFloat 2.8s ease-in-out infinite; }
.wonder-arcade-loading-game-icon::after { content:''; position:absolute; top:6%; left:9%; width:31%; height:13%; border-radius:50%; transform:rotate(-30deg); background:#ffffff9c; }
.wonder-arcade-loading-orbit { position:absolute; inset:8%; z-index:1; border:3px dashed #6aa3ff; border-radius:50%; box-shadow:0 0 0 6px #87d3ff20; animation:wonderArcadeOrbit 12s linear infinite; }
.wonder-arcade-loading-orbit-two { inset:18%; border-color:#59dfe0; animation-direction:reverse; animation-duration:9s; }
.wonder-arcade-loading-orbit-one::after,.wonder-arcade-loading-orbit-two::after { content:''; position:absolute; top:8%; left:4%; width:15px; height:15px; border-radius:5px; background:linear-gradient(135deg,#bd75ff,#8f44ed); box-shadow:0 3px 4px #8a57d73b; }
.wonder-arcade-loading-orbit-two::after { width:12px; height:12px; left:auto; right:0; top:64%; border-radius:50%; background:linear-gradient(135deg,#86fff0,#08c8b0); }
.wonder-arcade-loading-star { position:absolute; z-index:4; color:#ffca2f; filter:drop-shadow(0 3px 0 #e6a52a) drop-shadow(0 3px 5px #ffd75f70); animation:wonderArcadeStarPop 2s ease-in-out infinite alternate; }
.wonder-arcade-loading-star-one { top:1%; right:2%; font-size:42px; }
.wonder-arcade-loading-star-two { bottom:24%; left:-1%; color:#ff6a9c; font-size:36px; filter:drop-shadow(0 3px 0 #e54a80); animation-delay:-.7s; }
.wonder-arcade-loading-star-three { right:0; bottom:19%; color:#1bcef4; font-size:22px; animation-delay:-1.3s; }
.wonder-arcade-loading.is-hidden *, .wonder-arcade-loading.is-hidden *::before, .wonder-arcade-loading.is-hidden *::after { animation-play-state:paused!important; }
.wonder-arcade-loading-copy { width:100%; min-width:0; container-type:inline-size; }
/* Only the temporary preparation label is smaller; game names retain their display size. */
.wonder-arcade-loading-placeholder { display:block; font-size:clamp(12px,6.5cqi,28px); line-height:1.2; letter-spacing:-.025em; white-space:nowrap; }
.wonder-arcade-loading-kicker { position:relative; display:inline-flex; align-items:center; gap:9px; margin-bottom:5px; color:#00898e; font-size:14px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.wonder-arcade-loading-kicker::after { content:''; position:absolute; width:7px; height:18px; right:-18px; top:-10px; border-radius:5px; background:#ffd140; transform:rotate(40deg); }
.wonder-arcade-loading-kicker i { width:9px; height:9px; border-radius:50%; background:#09c8b2; box-shadow:0 0 0 5px #23e5cc26; animation:wonderArcadeReadyPulse 1.5s ease-in-out infinite; }
.wonder-arcade-loading h2 { max-width:100%; margin:0; color:#191e5c; font:900 clamp(28px,4.2vw,44px)/1.15 'Poppins','Inter',sans-serif; letter-spacing:-.04em; white-space:normal; text-wrap:balance; overflow-wrap:anywhere; text-shadow:0 2px 0 #fff; }
.wonder-arcade-loading-level { display:inline-flex; align-items:center; min-height:32px; margin-top:10px; padding:3px 18px; box-sizing:border-box; border:1px solid #6ce3c9; border-radius:999px; color:#08765c; background:linear-gradient(#effff4,#b7f5dc); box-shadow:inset 0 1px #fff,0 2px 0 #a4e5d133; font-size:16px; font-weight:900; text-transform:capitalize; }
.wonder-arcade-loading-level[data-level="medium"] { border-color:#ffd260; color:#ad5b00; background:linear-gradient(#fff5bd,#ffdc77); }
.wonder-arcade-loading-level[data-level="hard"] { border-color:#ffa5c0; color:#b42a59; background:linear-gradient(#fff0f7,#ffcadf); }
.wonder-arcade-loading-messages { position:relative; height:26px; margin:10px 0 24px; overflow:hidden; color:#7888ae; font-size:16px; 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 6s ease-in-out infinite; }
.wonder-arcade-loading-messages span:nth-child(2) { animation-delay:2s; }
.wonder-arcade-loading-messages span:nth-child(3) { animation-delay:4s; }
.wonder-arcade-loading-track { position:relative; width:100%; height:22px; display:flex; align-items:center; justify-content:space-between; padding:0 3px; box-sizing:border-box; border-radius:999px; background:#dce1f1; box-shadow:inset 0 2px 3px #6a79b018,0 2px 0 #fff; }
.wonder-arcade-loading-track-fill { position:absolute; inset:0 auto 0 0; width:66%; border-radius:inherit; background:linear-gradient(90deg,#12d5b1,#34c9fa 43%,#8573ff 78%,#aa68f4); box-shadow:0 0 10px #5adaff50,inset 0 2px 1px #fff6; animation:loaderPower 3s ease-in-out infinite alternate; }
.wonder-arcade-loading-track-fill::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(110deg,transparent 15%,#fff8 45%,transparent 75%); background-size:200% 100%; animation:loaderShine 1.8s linear infinite; }
.wonder-arcade-loading-track i { position:relative; z-index:2; width:22px; height:22px; box-sizing:border-box; border:3px solid #fff; border-radius:50%; background:#aeb9d4; box-shadow:0 0 0 4px #d5ddf3b3; }
.wonder-arcade-loading-track i:first-of-type { background:#08c3ab; box-shadow:0 0 0 4px #7debd8a8,0 0 15px #12d9b04d; }
.wonder-arcade-loading-track i:nth-of-type(2) { background:#9472fc; box-shadow:0 0 0 4px #c4b5ff80; }
.wonder-arcade-loading-runner { position:absolute; top:50%; left:66%; z-index:3; width:44px; height:37px; font-size:32px; line-height:1; transform:translate(-50%,-55%); filter:drop-shadow(0 3px 3px #6252b348); animation:loaderRunner 3s ease-in-out infinite alternate; }
.wonder-arcade-loading-runner svg { display:block; width:100%; height:100%; overflow:visible; }
.wonder-arcade-loading-steps { display:flex; justify-content:space-between; padding:11px 0 0; color:#7d8eb4; font-size:14px; font-weight:850; }
.wonder-arcade-loading-steps span:nth-child(2) { color:#4c5497; }
.wonder-arcade-loading-confetti { position:absolute; inset:0; z-index:0; pointer-events:none; }
.wonder-arcade-loading-confetti i { position:absolute; width:19px; height:19px; border-radius:5px; background:linear-gradient(135deg,#fff078,#ffc72d); box-shadow:inset 1px 2px 1px #ffffff70; animation:loaderDrift 5s ease-in-out infinite alternate; }
.wonder-arcade-loading-confetti i:nth-child(1) { left:11%; top:21%; }
.wonder-arcade-loading-confetti i:nth-child(2) { left:6%; bottom:28%; background:linear-gradient(135deg,#bc8aff,#8b54ef); border-radius:50%; animation-delay:-1s; }
.wonder-arcade-loading-confetti i:nth-child(3) { right:13%; top:20%; animation-delay:-2s; }
.wonder-arcade-loading-confetti i:nth-child(4) { right:9%; bottom:25%; background:linear-gradient(135deg,#ffa1bd,#ff538b); border-radius:50%; animation-delay:-3s; }
.wonder-arcade-loading-confetti i:nth-child(5) { left:20%; top:11%; background:linear-gradient(135deg,#50ffe1,#00c5ae); border-radius:50%; animation-delay:-1.5s; }
.wonder-arcade-loading-confetti i:nth-child(6) { right:15%; bottom:48%; background:linear-gradient(135deg,#4df5d9,#00cdb4); animation-delay:-2.5s; }
.wonder-arcade-loading-confetti i:nth-child(7) { left:20%; bottom:26%; width:23px; height:23px; animation-delay:-3.5s; }
.wonder-arcade-loading-confetti i:nth-child(8) { right:7%; top:15%; width:9px; height:9px; background:#a76aff; animation-delay:-1s; }
.wonder-arcade-loading-confetti i:nth-child(9) { left:5%; top:44%; width:13px; height:13px; background:#ff7caa; animation-delay:-4s; }
.wonder-arcade-loading-confetti i:nth-child(10) { left:23%; bottom:9%; width:12px; height:12px; background:#05cdbf; border-radius:50%; animation-delay:-2s; }
.wonder-arcade-loading-confetti i:nth-child(11) { right:22%; top:7%; width:12px; height:12px; background:#ff7caa; animation-delay:-3s; }
.wonder-arcade-loading-confetti i:nth-child(12) { right:22%; bottom:36%; width:12px; height:12px; animation-delay:-4s; }
@keyframes loaderJourney { to { stroke-dashoffset:-180; } }
@keyframes loaderTwinkle { from { opacity:.35; transform:translateY(-3px); } to { opacity:1; transform:translateY(3px); } }
@keyframes loaderHalo { 50% { opacity:.4; transform:scale(1.05); } }
@keyframes loaderPower { from { width:57%; } to { width:90%; } }
@keyframes loaderRunner { from { left:57%; transform:translate(-50%,-55%) rotate(-5deg); } to { left:90%; transform:translate(-50%,-55%) rotate(5deg); } }
@keyframes loaderShine { to { background-position:-200% 0; } }
@keyframes loaderDrift { from { transform:translate3d(-5px,-10px,0) rotate(-15deg); } to { transform:translate3d(9px,12px,0) rotate(45deg); } }

.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%, 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:600px) {
 .wonder-arcade-loading { padding:18px max(16px,env(safe-area-inset-right)) 18px max(16px,env(safe-area-inset-left)); }
 .wonder-arcade-loading-card { padding:24px 22px 28px; border-radius:32px; }
 .wonder-arcade-loading-visual { width:164px; height:164px; }
 .wonder-arcade-loading-game-icon { font-size:50px; border-radius:26px; }
 .wonder-arcade-loading h2 { font-size:clamp(25px,7vw,36px); }
 .wonder-arcade-loading-kicker { font-size:11px; }
 .wonder-arcade-loading-level { font-size:14px; }
 .wonder-arcade-loading-messages { font-size:12px; margin-bottom:24px; }
 .wonder-arcade-loading-steps { font-size:12px; }
}
@media (max-height:620px) and (orientation:portrait) {
 .wonder-arcade-loading-card { padding:18px 22px 22px; }
 .wonder-arcade-loading-visual { width:140px; height:140px; margin-bottom:6px; }
 .wonder-arcade-loading-game-icon { font-size:44px; border-radius:23px; }
 .wonder-arcade-loading-messages { margin:8px 0 20px; }
}
@media (max-height:560px) and (orientation:landscape) {
 .wonder-arcade-loading { padding:16px max(18px,env(safe-area-inset-right)) 16px max(18px,env(safe-area-inset-left)); }
 .wonder-arcade-loading-card { width:min(100%,650px); display:grid; grid-template-columns:clamp(120px,30vh,180px) minmax(0,1fr); gap:22px; padding:26px 28px; border-radius:30px; text-align:left; }
 .wonder-arcade-loading-visual { width:clamp(120px,30vh,180px); height:clamp(120px,30vh,180px); margin:0; }
 .wonder-arcade-loading-game-icon { font-size:clamp(36px,10vh,54px); border-radius:24px; }
 .wonder-arcade-loading-kicker { font-size:10px; letter-spacing:.06em; }
 .wonder-arcade-loading h2 { font-size:clamp(24px,5.5vh,32px); }
 .wonder-arcade-loading-level { font-size:13px; min-height:26px; margin-top:8px; }
 .wonder-arcade-loading-messages { font-size:12px; height:22px; margin:8px 0 20px; }
 .wonder-arcade-loading-messages span { justify-content:flex-start; }
 .wonder-arcade-loading-track { height:18px; }
 .wonder-arcade-loading-track i { width:18px; height:18px; }
 .wonder-arcade-loading-runner { width:37px; height:32px; }
 .wonder-arcade-loading-steps { font-size:11px; padding-top:10px; }
}
@media (max-height:340px) {
 .wonder-arcade-loading-card { padding:14px 24px; gap:18px; }
 .wonder-arcade-loading-visual { width:110px; height:110px; }
 .wonder-arcade-loading h2 { font-size:23px; }
 .wonder-arcade-loading-kicker { font-size:9px; }
 .wonder-arcade-loading-level { min-height:22px; font-size:11px; margin-top:5px; }
 .wonder-arcade-loading-messages { margin:5px 0 15px; height:19px; font-size:11px; }
 .wonder-arcade-loading-star-one { font-size:29px; }
 .wonder-arcade-loading-star-two { font-size:24px; }
}
@media (prefers-reduced-motion:reduce) {
 .wonder-arcade-loading *, .wonder-arcade-loading *::after, .wonder-arcade-loading *::before { animation:none!important; }
}

@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)
    }

    /* Brain Labs dialogs only: shared site login/register modals use Bootstrap positioning. */
    .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-overlay > .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-overlay .modal-header {
      padding: 24px 24px 18px;
      border-bottom: 1px solid var(--gray-100);
      position: relative
    }

    .modal-overlay .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-overlay .modal-close:hover {
      background: var(--gray-200)
    }

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

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

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

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

    .modal-overlay .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-overlay .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-overlay .modal-instructions {
      font-size: 0.85rem;
      color: var(--gray-700);
      line-height: 1.7
    }

    .modal-overlay .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; }

    /* Override the shared site's fixed 360px canvas on narrow Brain Labs screens. */
    @media (max-width: 359px) {
      html:has(body.brainlabs-page),
      body.brainlabs-page {
        width: 100%;
        min-width: 0;
      }
    }

    /* Keep category navigation beside the heading and descriptions below on mobile. */
    @media (max-width: 768px) {
      .subject-page-inner { padding: 18px 14px 32px; }
      #page-category .subject-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px 10px;
        margin-bottom: 7px;
      }
      #page-category .subject-header .back-btn {
        display: inline-flex;
        justify-content: center;
        min-height: 40px;
        padding: 7px 9px;
        gap: 5px;
        font-size: .75rem;
        white-space: nowrap;
      }
      #page-category .subject-title-block { display: contents; }
      #page-category .subject-title-block h2 {
        min-width: 0;
        margin: 0;
        font-size: clamp(1rem, 4.5vw, 1.4rem);
        line-height: 1.3;
      }
      #page-category .subject-title-block p {
        grid-column: 1 / -1;
        margin-top: 0;
      }
      .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: auto;
  max-height: calc(100dvh - 48px) !important;
  display: grid;
  grid-template-rows: auto minmax(0, auto) 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: 40px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 0.88rem;
  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: auto;
    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;
      }
    }

/* These covers include complete gestures inside a safe panoramic composition. */
#category-games .motion-card-illus {
  height: auto;
  aspect-ratio: 2.1;
}

/* Keep Bridge Builder's title and mountain palette in the fullscreen mobile host. */
@media (max-width: 900px) {
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder .wonder-arcade-toolbar {
    min-height: calc(50px + env(safe-area-inset-top));
    height: calc(50px + env(safe-area-inset-top));
    flex-basis: calc(50px + env(safe-area-inset-top));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    padding: env(safe-area-inset-top) 50px 0 9px;
    background: linear-gradient(#255685, #15385e);
    border-bottom: 2px solid #75b9df;
    pointer-events: auto;
  }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder .wonder-arcade-title { display: flex; }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder .wonder-arcade-title-name { font-size: clamp(20px, 3vw, 26px); }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder .wonder-arcade-score { position: static; left: auto; top: auto; transform: none; min-width: 53px; height: 32px; padding: 4px 8px; border-radius: 22px; }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder #wonder-arcade-score-value { font-size: 17px; }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder .wonder-arcade-close { top: max(8px, env(safe-area-inset-top)); right: 8px; width: 32px; height: 32px; border: 1px solid #6195bd; }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder .wonder-arcade-frame-wrap { inset: calc(50px + env(safe-area-inset-top)) 0 0; }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder.wonder-arcade-android-webview .wonder-arcade-toolbar { min-height: 50px; height: 50px; flex-basis: 50px; padding-top: 0; }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder.wonder-arcade-android-webview .wonder-arcade-frame-wrap { inset: 50px 0 0; }
}
@media (max-height: 460px) and (max-width: 900px) {
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder .wonder-arcade-toolbar,
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder.wonder-arcade-android-webview .wonder-arcade-toolbar { min-height: 40px; height: 40px; flex-basis: 40px; padding-top: 0; }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder .wonder-arcade-frame-wrap,
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder.wonder-arcade-android-webview .wonder-arcade-frame-wrap { inset: 40px 0 0; }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder .wonder-arcade-close { top: 5px; width: 30px; height: 30px; }
  .wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-bridge-builder .wonder-arcade-title-name { font-size: 22px; }
}

/* River Rescue keeps its own readable header in portrait and landscape. */
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-toolbar{background:linear-gradient(115deg,#4b52c7,#443ba9);border-bottom:2px solid #948cff}
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-title-name{color:#fff;font-size:clamp(21px,2.5vw,32px);text-shadow:0 2px 0 #302d86}
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-title:before{content:'\1F333';font-size:30px;margin-right:5px}
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-score{background:#fffdf4;border:1px solid #e2dafa}
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-close{background:#675ecb;border:1px solid #aca4ff;color:#fff}
@media(max-width:900px){
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-toolbar{min-height:calc(50px + env(safe-area-inset-top));height:calc(50px + env(safe-area-inset-top));flex-basis:calc(50px + env(safe-area-inset-top));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:env(safe-area-inset-top) 48px 0 8px;pointer-events:auto;background:linear-gradient(115deg,#4b52c7,#443ba9)}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-title{display:flex;min-width:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-title-name{font-size:clamp(17px,4.8vw,24px);white-space:nowrap}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-title:before{font-size:22px;margin-right:2px}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-score{position:static;left:auto;top:auto;transform:none;min-width:46px;height:31px;padding:4px 6px;border-radius:16px}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue #wonder-arcade-score-value{font-size:16px}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-close{top:max(8px,env(safe-area-inset-top));right:8px;width:32px;height:32px}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-frame-wrap{inset:calc(50px + env(safe-area-inset-top)) 0 0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue.wonder-arcade-android-webview .wonder-arcade-toolbar{min-height:50px;height:50px;flex-basis:50px;padding-top:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue.wonder-arcade-android-webview .wonder-arcade-frame-wrap{inset:50px 0 0}
}
@media(max-height:460px) and (max-width:900px){
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-toolbar,.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue.wonder-arcade-android-webview .wonder-arcade-toolbar{min-height:40px;height:40px;flex-basis:40px;padding-top:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-frame-wrap,.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue.wonder-arcade-android-webview .wonder-arcade-frame-wrap{inset:40px 0 0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-close{top:5px;width:30px;height:30px}
}
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-title-copy{display:block;min-width:0}
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-score{grid-template-columns:auto auto auto;gap:7px}
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-score:before{content:'\2605';color:#f9bc30;font-size:23px}
@media(max-width:900px){
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-score{grid-template-columns:auto auto;gap:4px}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-score-label{display:none}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-river-rescue .wonder-arcade-score:before{font-size:18px}
}

/* Dream World Builder uses the whole frame, including the former empty HUD row. */
.wonder-arcade-overlay.wonder-arcade-dream-builder .wonder-arcade-toolbar{display:none!important;height:0!important;min-height:0!important;flex-basis:0!important;padding:0!important}
.wonder-arcade-overlay.wonder-arcade-dream-builder .wonder-arcade-frame-wrap{position:absolute;inset:0!important;width:100%;height:100%;padding:0!important}
.wonder-arcade-overlay.wonder-arcade-dream-builder .wonder-arcade-close{z-index:30;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:38px;height:38px;background:#1565bf;border:2px solid #a3d8ff;color:#fff;box-shadow:0 3px 0 #154b89}
@media(max-width:900px),(max-height:520px) and (orientation:landscape){
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-dream-builder .wonder-arcade-frame-wrap{inset:0!important}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-dream-builder .wonder-arcade-close{width:30px;height:30px;top:max(5px,env(safe-area-inset-top));right:max(5px,env(safe-area-inset-right))}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-dream-builder.wonder-arcade-android-webview .wonder-arcade-frame-wrap{inset:0!important}
}
/* River Rescue uses its own unified header for title, score, trips and load. */
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-toolbar{display:none!important;height:0!important;min-height:0!important;flex-basis:0!important;padding:0!important}
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-close{z-index:30;top:12px;right:10px;width:38px;height:38px}
@media(max-width:900px),(max-height:520px) and (orientation:landscape){.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-close{top:7px!important;right:6px!important;width:30px!important;height:30px!important}}
@media(max-height:320px) and (orientation:landscape){.wonder-arcade-overlay.wonder-arcade-river-rescue .wonder-arcade-close{top:4px!important}}
/* Pattern Forge has one unified header, including its own exit control. */
 .wonder-arcade-overlay.wonder-arcade-codequest .wonder-arcade-toolbar{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-path-detective .wonder-arcade-toolbar{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-dance-loop .wonder-arcade-toolbar{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-auto-server .wonder-arcade-toolbar{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-auto-server .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .wonder-arcade-overlay.wonder-arcade-auto-server .wonder-arcade-close{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-tiger-trail .wonder-arcade-toolbar{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-tiger-trail .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .wonder-arcade-overlay.wonder-arcade-tiger-trail .wonder-arcade-close{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-pattern-trace .wonder-arcade-toolbar{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-pattern-trace .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .wonder-arcade-overlay.wonder-arcade-pattern-trace .wonder-arcade-close{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-clue-detective .wonder-arcade-toolbar{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-clue-detective .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .wonder-arcade-overlay.wonder-arcade-clue-detective .wonder-arcade-close{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-magic-machine .wonder-arcade-toolbar{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-magic-machine .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .wonder-arcade-overlay.wonder-arcade-magic-machine .wonder-arcade-close{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-dance-loop .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .wonder-arcade-overlay.wonder-arcade-dance-loop .wonder-arcade-close{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-path-detective .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .wonder-arcade-overlay.wonder-arcade-path-detective .wonder-arcade-close{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-codequest .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .wonder-arcade-overlay.wonder-arcade-codequest .wonder-arcade-close{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-rover-route .wonder-arcade-toolbar{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-rover-route .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .wonder-arcade-overlay.wonder-arcade-rover-route .wonder-arcade-close{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-shape-coder .wonder-arcade-toolbar{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-shape-coder .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
 .wonder-arcade-overlay.wonder-arcade-shape-coder .wonder-arcade-close{display:none!important}
 .wonder-arcade-overlay.wonder-arcade-shape-coder.wonder-arcade-awaiting-landscape .wonder-arcade-close{display:flex!important;opacity:1!important;pointer-events:auto!important;z-index:30}
/* Difficulty is chosen before opening Complete the Pattern. */
.sc-play-panel{grid-template-rows:auto auto;}
/* LogicPlay owns its illustrated HUD; use the whole game viewport. */
.wonder-arcade-overlay.wonder-arcade-logic-play .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-logic-play .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-logic-play .wonder-arcade-close{display:none!important}
/* PuzzleForge owns its header and exit, so the board gets the full viewport. */
.wonder-arcade-overlay.wonder-arcade-puzzle-forge .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-puzzle-forge .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-puzzle-forge .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-puzzle-board .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-puzzle-board .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-puzzle-board .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-length-builder .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-length-builder .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-length-builder:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-length-builder.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
/* Route Quest has its own responsive header, score and exit. */
.wonder-arcade-overlay.wonder-arcade-route-quest .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-route-quest .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-route-quest:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-route-quest:is(.wonder-arcade-awaiting-resume,.wonder-arcade-awaiting-landscape) .wonder-arcade-close{display:flex!important;opacity:1!important;pointer-events:auto!important;z-index:30}

/* Shape Builder owns its HUD, including guided lessons. */
.wonder-arcade-overlay.wonder-arcade-geometry-builder .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-geometry-builder .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-geometry-builder:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-geometry-builder.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}

/* Mirror Maze owns its responsive header, score and exit. */
.wonder-arcade-overlay.wonder-arcade-mirror-maze .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-mirror-maze .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-mirror-maze:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-mirror-maze.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}

/* Pick & Stick owns its compact header and exit, including fullscreen. */
.wonder-arcade-overlay.wonder-arcade-pick-stick .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-pick-stick .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-pick-stick:not(.wonder-arcade-awaiting-resume):not(.wonder-arcade-awaiting-landscape) .wonder-arcade-close{display:none!important}

/* Memory Game owns its complete header; the iframe uses all available height. */
.wonder-arcade-overlay.wonder-arcade-memory-game .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-memory-game .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-memory-game:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-memory-game.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}

/* Shape Coder: glowing arcade stage with a dimensional wooden rail toy. */
#sc-overlay { background:#051c40; overflow:hidden; }
#sc-overlay::before { display:none; }
#sc-overlay * { box-sizing:border-box; }
#sc-overlay .sc-shell {
  width:100%; max-width:none; height:100dvh; min-height:0; max-height:none;
  padding:clamp(8px,1.8vw,22px); gap:clamp(10px,2vh,24px); overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  background:radial-gradient(ellipse at 65% 52%,#14629a88,transparent 60%),radial-gradient(ellipse at 12% 90%,#1555b2aa,transparent 42%),linear-gradient(145deg,#03152e,#07346a 72%,#051a3b);
  font-family:'Poppins',system-ui,sans-serif; isolation:isolate;
}
#sc-overlay .sc-shell::before { content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.38;background:repeating-linear-gradient(0deg,transparent 0 67px,#3089ca26 68px 69px),repeating-linear-gradient(90deg,transparent 0 89px,#3089ca26 90px 91px);transform:perspective(800px) rotateY(-8deg) scale(1.15); }
#sc-overlay .sc-shell::after { content:'★';position:absolute;z-index:-1;left:3%;top:29%;font-size:clamp(50px,8vw,110px);color:#ffcc43;filter:drop-shadow(0 0 14px #ffcd64);opacity:.65;animation:scAmbient 7s ease-in-out infinite;pointer-events:none; }
#sc-overlay .sc-scenery { position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none; }
#sc-overlay .sc-scenery i { position:absolute;width:55px;height:55px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#32caff,#027fda 70%);box-shadow:0 0 25px #04a5ff77,inset -4px -5px 8px #00508b;left:4%;top:61%;opacity:.6;animation:scAmbient 8s ease-in-out infinite; }
#sc-overlay .sc-scenery i:nth-child(2) { left:auto;right:3%;top:27%;width:60px;height:60px;border-radius:8px;background:linear-gradient(145deg,#57ffe0,#00a676);box-shadow:0 0 25px #19e5b055;clip-path:polygon(50% 0,100% 100%,0 100%);animation-delay:-3s; }
#sc-overlay .sc-scenery i:nth-child(3) { left:23%;top:auto;bottom:4%;border-radius:9px;background:linear-gradient(145deg,#ff8c9c,#e63461);box-shadow:0 0 25px #fb476c77;transform:rotate(18deg);animation-delay:-4s; }
#sc-overlay .sc-scenery i:nth-child(4) { left:auto;right:4%;top:72%;background:#ffe172;clip-path:polygon(50% 0,62% 34%,100% 38%,72% 61%,81% 100%,50% 78%,19% 100%,28% 61%,0 38%,38% 34%);animation-delay:-2s; }
#sc-overlay .sc-scenery span { position:absolute;left:-110px;bottom:-130px;width:390px;height:270px;border-radius:50%;background:radial-gradient(ellipse at 30% 15%,#286cef,#073987 70%);box-shadow:100px 60px 0 #0b3583,180px 80px 0 #142972;opacity:.8; }
#sc-overlay .sc-scenery span:last-child { left:auto;right:-90px;transform:scaleX(-1); }
#sc-overlay .sc-topbar {
  flex:none;width:100%;min-width:0;min-height:76px;padding:12px 18px;gap:20px;display:flex;
  background:linear-gradient(180deg,#104a7c,#071d42);border:1px solid #409fec;
  border-radius:22px;box-shadow:inset 0 2px 12px #42b3ff44,0 6px 0 #02122d66,0 0 24px #219aff22;
}
#sc-overlay .sc-brand { display:flex;align-items:center;gap:14px;font-size:clamp(22px,3vw,36px);font-weight:900;line-height:1.15;white-space:nowrap; }
#sc-overlay .sc-brand .sc-brand-name { color:#fff;text-shadow:0 3px 0 #0004; }
#sc-overlay .sc-brand-name b { color:#ffe172; }
#sc-overlay .sc-brand-icon { width:50px;height:50px;border-radius:14px;background:linear-gradient(#fff,#e9f5ff);box-shadow:0 3px 0 #abc7e2,0 0 16px #59beff66;flex:none; }
#sc-overlay .sc-mini-square { background:linear-gradient(#ff656a,#f82d45); }
#sc-overlay .sc-mini-circle { background:linear-gradient(#21c4ff,#008bf0); }
#sc-overlay .sc-mini-triangle { border-bottom-color:#06b87a; }
#sc-overlay .sc-puzzle-counter-line { margin:0;padding:10px 18px;border:1px solid #4296dc88;border-radius:28px;font-size:clamp(14px,1.6vw,19px);font-weight:800;color:#fff;white-space:nowrap;background:linear-gradient(#214d81,#112847);box-shadow:inset 0 1px 4px #72caff55; }
#sc-overlay .sc-puzzle-counter-line::before { content:'★';color:#ffd750;margin-right:9px;font-size:1.3em; }
#sc-overlay .sc-live-score { margin-left:auto;display:flex;align-items:center;gap:10px;min-width:112px;padding:7px 18px;border:1px solid #54a4f080;border-radius:18px;background:linear-gradient(#21477d,#102642);box-shadow:inset 0 1px 5px #a2caff44;color:#dbeaff;font-size:13px;line-height:1.25; }
#sc-overlay .sc-live-score>span:first-child { font-size:32px; }
#sc-overlay .sc-live-score strong { display:block;color:#fff;font-size:24px;font-weight:900; }
#sc-overlay .sc-topbar-actions { gap:12px; }
#sc-overlay .sc-guide-button,#sc-overlay .sc-close { width:48px;height:48px;min-height:0;padding:0;border-radius:14px;font:900 30px/1 system-ui;display:grid;place-items:center;box-shadow:inset 0 2px 5px #ffffff40,0 4px 0 #0004;touch-action:manipulation; }
#sc-overlay .sc-guide-button { background:linear-gradient(#177ac1,#073757);border:1px solid #49cfff;color:#ffdf67; }
#sc-overlay .sc-close { background:linear-gradient(#ff5967,#db233b);border:1px solid #ff8897;color:white; }
#sc-overlay .sc-game-stage { flex:1;height:100%;min-height:0;width:min(1050px,100%);max-width:none;margin:0 auto;padding:0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(16px,3vw,36px);align-items:center;align-content:stretch; }
#sc-overlay .sc-side-panel { min-width:0;width:100%;height:auto;display:flex;flex-direction:column;gap:16px;align-self:center; }
#sc-overlay .sc-card-holder { width:100%;margin:0 auto;padding:22px 18px 18px;max-width:460px;align-items:stretch;border:1px solid #4c9cdd;border-radius:24px;background:linear-gradient(145deg,#14386bee,#0c254eea);box-shadow:inset 0 1px 6px #61bcff33,0 12px 30px #0003; }
#sc-overlay .sc-card-label { position:static;margin:0;display:flex;gap:8px;align-items:center;justify-content:center;padding:0;background:none;box-shadow:none;border:0;border-radius:0;text-align:center;text-transform:none;letter-spacing:0;font-size:clamp(19px,2.1vw,27px);line-height:1.25;font-weight:900;white-space:normal;color:#fff; }
#sc-overlay .sc-card-label>span:first-child { font-size:1.25em;flex:none; }
#sc-overlay .sc-card-label .sc-target-label { min-width:0; }
#sc-overlay .sc-card-label b { color:#ffda61; }
#sc-overlay .sc-card-description { color:#c0d7f0;margin:10px 0 18px;font-size:clamp(13px,1.4vw,16px);line-height:1.4;text-align:center; }
#sc-overlay .sc-puzzle-card { width:100%;max-width:none;padding:14px 8px;border:1px solid #e5f5ff;border-radius:18px;background:linear-gradient(#fff,#e8f4ff);box-shadow:0 5px 12px #0003,inset 0 1px 0 white; }
#sc-overlay .sc-puzzle-card::before,#sc-overlay .sc-puzzle-card::after { display:none; }
#sc-overlay .sc-card-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sc-card-gap,6px)!important;padding:var(--sc-card-padding,4px)!important; }
#sc-overlay .sc-card-cell { min-width:0;min-height:0;height:var(--sc-cell-height,clamp(45px,8vh,78px))!important;display:flex;align-items:center;justify-content:center;border-right:1px solid #bcd8ef; }
#sc-overlay .sc-card-cell:nth-child(4n) { border-right:none; }
#sc-overlay .sc-card-cell svg { display:block;min-width:0;min-height:0;width:var(--sc-icon-size,clamp(38px,7vh,60px))!important;height:var(--sc-icon-size,clamp(38px,7vh,60px))!important;max-width:90%;max-height:90%;flex:none;filter:drop-shadow(0 3px 2px #294c7933); }
#sc-overlay .sc-hint-bar { width:100%;max-width:none;margin:0;padding:12px 16px;display:block;text-align:center;font-size:clamp(13px,1.4vw,16px);line-height:1.5;color:#d6eaff;background:#0b2b54cc;border:1px solid #438bcf66;border-radius:16px; }
#sc-overlay .sc-hint-text b { color:#ffda66; }
#sc-overlay .sc-play-panel { min-height:0;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;position:relative; }
#sc-overlay .sc-board-frame { flex:none;width:min(100%,calc((100dvh - 140px)*.875));max-width:520px;min-width:0;aspect-ratio:auto;padding:9px;margin:0;border:3px solid #92501f;border-top-color:#ffc864;border-radius:27px;background:linear-gradient(145deg,#ffdd8b,#d89234 40%,#97501c);box-shadow:inset 0 0 0 3px #ffd77c,0 8px 0 #713a19,0 20px 35px #0008,0 0 32px #ffb44122; }
#sc-overlay .sc-board-area { width:100%;height:auto;aspect-ratio:420/480;border-radius:17px;overflow:visible;background:repeating-linear-gradient(90deg,#8f4d1610 0 2px,transparent 3px 42px),radial-gradient(ellipse at 26% 0%,#fff2b066,transparent 50%),linear-gradient(110deg,#efbd64,#dfa13e 60%,#d88a31);box-shadow:inset 0 2px 3px #fff9,inset 0 -5px 8px #8f431a44;border:0; }
#sc-overlay .sc-toy-piece { width:13%;height:auto;min-width:0;min-height:0;aspect-ratio:1;touch-action:none;cursor:pointer;border-radius:10px;transition:filter .15s; }
#sc-overlay .sc-toy-piece.selected { outline:3px solid #ffe27d;outline-offset:4px;background:#ffcf5c30;filter:drop-shadow(0 0 9px #ffeb85);animation:scPickPulse 1s ease-in-out infinite; }
#sc-overlay .sc-slot-hint { width:clamp(20px,3vw,32px);height:clamp(20px,3vw,32px);min-width:0;min-height:0;border:3px solid #b8ffcf;border-radius:50%;background:radial-gradient(#b8ffcf,#0ebc77);box-shadow:0 0 16px #6affb4;opacity:.95;pointer-events:auto;animation:scPickPulse 1s ease-in-out infinite;cursor:pointer; }
#sc-overlay .sc-board-area.solved { box-shadow:inset 0 0 0 3px #6effad,0 0 28px #76ffad; }
#sc-overlay .sc-control-bar { flex:none;margin:0; }
#sc-overlay .sc-control-bar[hidden] { display:none; }
#sc-overlay .sc-success-bar { justify-content:center; }
#sc-overlay button:focus-visible,#sc-overlay [role=button]:focus-visible { outline:3px solid #fff5a6;outline-offset:3px; }
.sc-celebration { position:fixed;inset:0;z-index:20001;display:grid;place-items:center;padding:16px;background:#041a3bc4;backdrop-filter:blur(8px);font-family:'Poppins',system-ui,sans-serif; }
.sc-reward-card { box-sizing:border-box;width:min(510px,100%);max-height:calc(100dvh - 32px);padding:25px;border:3px solid #ffdc70;border-radius:30px;text-align:center;background:radial-gradient(ellipse at top,#fff4bb,#fffdf1 55%,#e8f6ff);box-shadow:0 8px 0 #8b632655,0 0 45px #ffdd6355;animation:scRewardIn .45s cubic-bezier(.2,1.4,.4,1);color:#12325d; }
.sc-reward-trophy { font-size:65px;line-height:1.1;filter:drop-shadow(0 6px 4px #c7974144); }
.sc-reward-stars { font-size:39px;color:#ffb626;letter-spacing:8px;text-shadow:0 3px 0 #d7801d;animation:scPickPulse 1.5s ease-in-out infinite; }
.sc-reward-card h2 { font-size:clamp(25px,4vw,37px);line-height:1.15;margin:10px 0;color:#117ab5; }
.sc-reward-card p { font-size:18px;margin:12px 0; }
.sc-reward-points { display:inline-block;padding:8px 22px;border-radius:24px;background:#fff0b8;color:#956017;font-size:21px;font-weight:900; }
.sc-reward-actions { display:flex;gap:12px;margin-top:22px; }
.sc-reward-actions button { flex:1;padding:15px 12px;border:1px solid #038c6a;border-radius:17px;background:linear-gradient(#1bd39a,#00ab7c);color:white;box-shadow:0 5px 0 #007957;font:800 18px/1.2 system-ui;cursor:pointer; }
.sc-reward-actions .sc-reward-again { background:#fff;color:#3c5b80;border-color:#b1cce0;box-shadow:0 5px 0 #aec3d3; }
.sc-reward-actions button:focus-visible { outline:3px solid #178fdf;outline-offset:4px; }
@keyframes scAmbient { 50% { transform:translateY(-15px) rotate(12deg); } }
@keyframes scPickPulse { 50% { filter:drop-shadow(0 0 10px #ffeb85); } }
@keyframes scRewardIn { from { opacity:0;transform:translateY(20px) scale(.85); } to { opacity:1;transform:none; } }
@media(max-width:700px) and (orientation:portrait) {
  #sc-overlay .sc-shell { padding:10px;gap:12px; }
  #sc-overlay .sc-topbar { flex-wrap:wrap;gap:8px;padding:10px;min-height:0;border-radius:18px; }
  #sc-overlay .sc-brand { flex:1;font-size:clamp(20px,6vw,26px);gap:6px; }
  #sc-overlay .sc-brand-icon { width:32px;height:32px;border-radius:10px; }
  #sc-overlay .sc-topbar-actions { order:1;gap:8px; }
  #sc-overlay .sc-guide-button,#sc-overlay .sc-close { width:36px;height:36px;font-size:25px;border-radius:10px; }
  #sc-overlay .sc-puzzle-counter-line { order:2;flex:1;font-size:14px;padding:7px 10px; }
  #sc-overlay .sc-live-score { order:3;flex:1;min-width:0;margin:0;padding:5px 12px;justify-content:center;font-size:12px; }
  #sc-overlay .sc-live-score>span:first-child { font-size:24px; }
  #sc-overlay .sc-live-score strong { display:inline;margin-left:8px;font-size:19px; }
  #sc-overlay .sc-game-stage { grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:16px; }
  #sc-overlay .sc-side-panel { gap:6px; }
  #sc-overlay .sc-card-holder { padding:9px;border-radius:16px; }
  #sc-overlay .sc-card-label { font-size:18px;justify-content:center; }
  #sc-overlay .sc-card-description { display:none; }
  #sc-overlay .sc-puzzle-card { padding:4px;margin-top:6px;border-radius:10px; }
  #sc-overlay .sc-card-grid { --sc-card-gap:0px;--sc-card-padding:0px; }
  #sc-overlay .sc-card-cell { --sc-cell-height:clamp(21px,3.8vh,32px);--sc-icon-size:clamp(18px,3.5vh,28px); }
  #sc-overlay .sc-hint-bar { padding:3px;background:none;border:none;font-size:12px; }
  #sc-overlay .sc-board-frame { width:min(100%,calc((100dvh - 303px)*.875));padding:6px;border-radius:20px; }
}
@media(max-height:540px) and (orientation:landscape) {
  #sc-overlay .sc-shell { padding:8px 12px;gap:10px; }
  #sc-overlay .sc-topbar { min-height:0;padding:7px 12px;gap:14px;border-radius:16px; }
  #sc-overlay .sc-brand { font-size:25px;gap:9px; }
  #sc-overlay .sc-brand-icon { width:36px;height:36px;border-radius:10px; }
  #sc-overlay .sc-puzzle-counter-line { font-size:13px;padding:7px 12px; }
  #sc-overlay .sc-live-score { min-width:92px;padding:4px 10px;font-size:10px; }
  #sc-overlay .sc-live-score>span:first-child { font-size:24px; }
  #sc-overlay .sc-live-score strong { font-size:18px; }
  #sc-overlay .sc-guide-button,#sc-overlay .sc-close { width:36px;height:36px;font-size:25px;border-radius:10px; }
  #sc-overlay .sc-topbar-actions { gap:8px; }
  #sc-overlay .sc-game-stage { width:min(760px,100%);gap:18px; }
  #sc-overlay .sc-side-panel { gap:7px; }
  #sc-overlay .sc-card-holder { padding:12px;border-radius:18px; }
  #sc-overlay .sc-card-label { font-size:19px;justify-content:center; }
  #sc-overlay .sc-card-description { font-size:12px;margin:6px 0 10px; }
  #sc-overlay .sc-card-cell { --sc-cell-height:clamp(24px,12vh,52px);--sc-icon-size:clamp(21px,10vh,45px); }
  #sc-overlay .sc-puzzle-card { padding:5px; }
  #sc-overlay .sc-hint-bar { padding:5px;font-size:12px; }
  #sc-overlay .sc-board-frame { width:min(100%,calc((100dvh - 93px)*.875));padding:5px;border-radius:18px; }
  .sc-reward-card { display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto;column-gap:20px;width:min(530px,100%);padding:16px 24px; }
  .sc-reward-trophy { grid-row:1/4;align-self:center;font-size:90px; }
  .sc-reward-stars { font-size:27px;line-height:1; }
  .sc-reward-card h2 { font-size:25px;margin:6px 0; }
  .sc-reward-card p { font-size:14px;margin:4px 0; }
  .sc-reward-points { grid-column:1/-1;justify-self:center;font-size:16px;padding:5px 20px;margin-top:7px; }
  .sc-reward-actions { grid-column:1/-1;margin-top:12px; }
  .sc-reward-actions button { padding:10px;font-size:16px; }
}
@media(max-height:300px) and (orientation:landscape) {
  #sc-overlay .sc-card-description { display:none; }
  #sc-overlay .sc-card-holder { padding:7px; }
  #sc-overlay .sc-card-label { font-size:16px; }
  #sc-overlay .sc-puzzle-card { margin-top:7px; }
  #sc-overlay .sc-card-grid { --sc-card-gap:2px;--sc-card-padding:0px; }
  #sc-overlay .sc-card-cell { --sc-cell-height:21px;--sc-icon-size:19px; }
  #sc-overlay .sc-hint-bar { padding:0;font-size:11px;background:none;border:0; }
  .sc-reward-trophy { font-size:55px; }.sc-reward-card { padding:10px 20px; }.sc-reward-stars { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
  #sc-overlay .sc-shell::after,#sc-overlay .sc-toy-piece,#sc-overlay .sc-slot-hint,.sc-reward-card,.sc-reward-stars { animation:none; }
  #sc-overlay .sc-star-particle { display:none; }
}
@media(max-width:620px) and (orientation:landscape) {
  #sc-overlay .sc-shell { padding:7px 8px;gap:8px; }
  #sc-overlay .sc-topbar { padding:6px 8px;gap:8px; }
  #sc-overlay .sc-brand { font-size:19px;gap:5px; }
  #sc-overlay .sc-brand-icon { width:29px;height:29px; }
  #sc-overlay .sc-puzzle-counter-line { min-width:0;padding:6px 8px;font-size:11px; }
  #sc-overlay .sc-puzzle-counter-line::before { margin-right:4px; }
  #sc-overlay .sc-live-score { min-width:65px;padding:4px 6px;gap:4px; }
  #sc-overlay .sc-live-score>span:first-child { font-size:19px; }
  #sc-overlay .sc-live-score strong { font-size:16px; }
  #sc-overlay .sc-guide-button,#sc-overlay .sc-close { width:30px;height:30px;font-size:23px; }
  #sc-overlay .sc-topbar-actions { gap:5px; }
  #sc-overlay .sc-card-description { display:none; }
  #sc-overlay .sc-card-label { font-size:16px; }
  #sc-overlay .sc-puzzle-card { margin-top:8px; }
  #sc-overlay .sc-card-grid { --sc-card-gap:2px;--sc-card-padding:0px; }
  #sc-overlay .sc-card-cell { --sc-cell-height:clamp(21px,9vh,32px);--sc-icon-size:clamp(19px,8vh,28px); }
}
/* Bloom Memory supplies its own score, help, and close controls. */
.wonder-arcade-overlay.wonder-arcade-bloom-memory .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-bloom-memory .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-bloom-memory:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-bloom-memory.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-memory-journey .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-memory-journey .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-memory-journey:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-memory-journey.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}

/* Shape Sprint uses its own compact HUD and the whole game viewport. */
.wonder-arcade-overlay.wonder-arcade-shape-sprint .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-shape-sprint .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-shape-sprint:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-shape-sprint.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}

/* Memory Match owns its header and uses the entire available game viewport. */
.wonder-arcade-overlay.wonder-arcade-memory-match .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-memory-match .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-memory-match:not(.wonder-arcade-awaiting-resume) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-memory-match.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-hidden-haven .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-water-lab .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-odd-shot .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-odd-shot .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-odd-shot:not(.wonder-arcade-awaiting-resume):not(.wonder-arcade-awaiting-landscape) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-odd-shot.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-star-treasure .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-star-treasure .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-star-treasure:not(.wonder-arcade-awaiting-resume):not(.wonder-arcade-awaiting-landscape) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-star-treasure.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-color-pour .wonder-arcade-toolbar{display:none!important}
.wonder-arcade-overlay.wonder-arcade-color-pour .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-color-pour:not(.wonder-arcade-awaiting-resume):not(.wonder-arcade-awaiting-landscape) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-color-pour.wonder-arcade-awaiting-resume .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-water-lab .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-water-lab:not(.wonder-arcade-awaiting-resume):not(.wonder-arcade-awaiting-landscape) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-water-lab.wonder-arcade-awaiting-resume .wonder-arcade-close,.wonder-arcade-overlay.wonder-arcade-water-lab.wonder-arcade-awaiting-landscape .wonder-arcade-close{display:flex!important;z-index:30}
.wonder-arcade-overlay.wonder-arcade-hidden-haven .wonder-arcade-frame-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.wonder-arcade-overlay.wonder-arcade-hidden-haven:not(.wonder-arcade-awaiting-resume):not(.wonder-arcade-awaiting-landscape) .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-hidden-haven.wonder-arcade-awaiting-resume .wonder-arcade-close,.wonder-arcade-overlay.wonder-arcade-hidden-haven.wonder-arcade-awaiting-landscape .wonder-arcade-close{display:flex!important;z-index:30}
/* Fullscreen elements escape the rotated body. Rotate this game's child surface
   so unsupported native orientation locks still produce a real landscape board. */
@media (orientation:portrait) and (max-width:900px){
  html.ps-virtual-landscape .wonder-arcade-overlay.wonder-arcade-water-lab:fullscreen .wonder-arcade-frame-wrap{inset:auto!important;top:50%!important;left:50%!important;width:100dvh!important;height:100vw!important;transform:translate(-50%,-50%) rotate(90deg)!important;transform-origin:center}
  html.ps-virtual-landscape .wonder-arcade-overlay.wonder-arcade-water-lab:-webkit-full-screen .wonder-arcade-frame-wrap{inset:auto!important;top:50%!important;left:50%!important;width:100dvh!important;height:100vw!important;transform:translate(-50%,-50%) rotate(90deg)!important;transform-origin:center}
  html.ps-virtual-landscape .wonder-arcade-overlay.wonder-arcade-hidden-haven:fullscreen .wonder-arcade-frame-wrap{inset:auto!important;top:50%!important;left:50%!important;width:100dvh!important;height:100vw!important;transform:translate(-50%,-50%) rotate(90deg)!important;transform-origin:center}
  html.ps-virtual-landscape .wonder-arcade-overlay.wonder-arcade-hidden-haven:-webkit-full-screen .wonder-arcade-frame-wrap{inset:auto!important;top:50%!important;left:50%!important;width:100dvh!important;height:100vw!important;transform:translate(-50%,-50%) rotate(90deg)!important;transform-origin:center}
}

/* Compact headers for the six audited cognitive skill categories. */
.wonder-arcade-overlay.wonder-arcade-compact-category .wonder-arcade-toolbar{flex-basis:44px;min-height:44px;padding-block:4px;border-top:0;border-bottom:0;border-radius:0;margin-top:0;gap:8px}.wonder-arcade-overlay.wonder-arcade-compact-category .wonder-arcade-close{top:5px;width:34px;height:34px;font-size:25px}.wonder-arcade-overlay.wonder-arcade-compact-category .wonder-arcade-score{padding-block:3px;min-height:32px}.wonder-arcade-overlay.wonder-arcade-compact-category .wonder-arcade-title-name{font-size:17px}
#mp-overlay .mp-topbar,#sc-overlay .sc-topbar,#cto-overlay .cto-topbar,#ctd-overlay .std-header{height:52px;min-height:52px;flex-shrink:0;margin-top:0;border-top:0;border-radius:0;padding-block:4px;gap:10px}#mp-overlay .mp-topbar button,#sc-overlay .sc-topbar button,#cto-overlay .cto-topbar button,#ctd-overlay .std-header button{width:34px;height:34px;min-height:34px;font-size:22px}#mp-overlay .mp-brand-name,#sc-overlay .sc-brand-name,#cto-overlay .cto-title,#ctd-overlay .std-title{font-size:23px}#mp-overlay .mp-brand>span:first-child{font-size:27px}#mp-overlay .mp-score-badge{padding-block:4px}#mp-overlay .mp-score-badge strong{font-size:22px}#sc-overlay,#sc-overlay .sc-shell{padding-top:0;margin-top:0}#sc-overlay .sc-topbar{align-items:center}#sc-overlay .sc-brand-icon{height:32px}
@media(max-width:900px),(max-height:550px){.wonder-arcade-overlay.wonder-arcade-compact-category .wonder-arcade-toolbar{flex-basis:38px;min-height:38px;padding-block:3px}.wonder-arcade-overlay.wonder-arcade-compact-category .wonder-arcade-close{top:3px;width:31px;height:31px}.wonder-arcade-overlay.wonder-arcade-compact-category .wonder-arcade-title-name{font-size:15px}#mp-overlay .mp-topbar,#sc-overlay .sc-topbar,#cto-overlay .cto-topbar,#ctd-overlay .std-header{height:40px;min-height:40px;padding-block:3px;gap:6px}#mp-overlay .mp-topbar button,#sc-overlay .sc-topbar button,#cto-overlay .cto-topbar button,#ctd-overlay .std-header button{width:30px;height:30px;min-height:30px;font-size:20px}#mp-overlay .mp-brand-name,#sc-overlay .sc-brand-name,#cto-overlay .cto-title,#ctd-overlay .std-title{font-size:18px}#mp-overlay .mp-score-badge{padding-block:3px}#mp-overlay .mp-score-badge strong{font-size:18px}#mp-overlay .mp-header-left{gap:8px}#sc-overlay .sc-brand-icon{height:26px}}

/* Native headers also size to their contents and keep circular, readable controls. */
.wonder-arcade-overlay.wonder-arcade-flow-header .wonder-arcade-toolbar{position:relative!important;inset:auto!important;height:auto!important;min-height:0!important;flex:0 0 auto!important;padding:4px 52px 4px 12px!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center;pointer-events:auto}
.wonder-arcade-overlay.wonder-arcade-flow-header .wonder-arcade-score{position:static!important;transform:none!important;height:auto!important;min-height:32px!important;grid-column:2!important;grid-row:1!important;left:auto!important;right:auto!important;display:flex!important;align-items:center;gap:6px}
.wonder-arcade-overlay.wonder-arcade-flow-header .wonder-arcade-title{display:flex!important;min-width:0;grid-column:1;grid-row:1}
.wonder-arcade-overlay.wonder-arcade-flow-header .wonder-arcade-title-name{font-size:17px;line-height:1.2}
.wonder-arcade-overlay.wonder-arcade-flow-header .wonder-arcade-close{top:4px!important;right:8px!important;width:32px!important;height:32px!important;border-radius:50%;font-size:24px}
.wonder-arcade-overlay.wonder-arcade-flow-header .wonder-arcade-frame-wrap{position:relative!important;inset:auto!important;flex:1 1 0!important;min-height:0;width:100%!important;height:auto!important}
#cto-overlay{padding-inline:0!important}#cto-overlay .cto-stage-wrap{margin-inline:8px}
#mp-overlay .mp-topbar,#sc-overlay .sc-topbar,#cto-overlay .cto-topbar,#ctd-overlay .std-header{height:auto!important;min-height:0!important;flex-basis:auto!important;width:100%;max-width:none;padding:6px 14px!important;overflow:visible}#mp-overlay .mp-header-left{min-height:0;height:auto}#mp-overlay .mp-topbar button,#sc-overlay .sc-topbar button,#cto-overlay .cto-topbar button,#ctd-overlay .std-header button{display:inline-flex;align-items:center;justify-content:center;flex:none!important;width:36px!important;min-width:36px;height:36px!important;min-height:36px!important;padding:0!important;border-radius:50%!important;font-size:26px!important;line-height:1}#mp-overlay .mp-topbar button span,#sc-overlay .sc-topbar button span,#cto-overlay .cto-topbar button span,#ctd-overlay .std-header button span{font-size:inherit;line-height:1}#sc-overlay .sc-live-score>span:last-child{display:flex;flex-direction:row;align-items:center;gap:5px}#sc-overlay .sc-live-score strong{display:inline;font-size:20px}#sc-overlay .sc-shell{width:100%;max-width:none;padding-inline:0;margin-inline:0}#ctd-overlay .std-header button{width:36px!important;height:36px!important}
@media(max-width:900px),(max-height:550px){#mp-overlay .mp-topbar,#sc-overlay .sc-topbar,#cto-overlay .cto-topbar,#ctd-overlay .std-header{min-height:0!important;padding:5px 9px!important}#mp-overlay .mp-brand-name,#sc-overlay .sc-brand-name,#cto-overlay .cto-title,#ctd-overlay .std-title{font-size:18px}#sc-overlay .sc-live-score{padding-block:3px}#mp-overlay .mp-score-badge{padding-block:3px}#mp-overlay .mp-score-badge strong,#sc-overlay .sc-live-score strong{font-size:18px}}

/* Cut the Odd One: content-sized compact header. */
#cto-overlay .cto-topbar{padding:4px 12px!important;gap:10px}
#cto-overlay .cto-brand{font-size:23px;gap:7px}
#cto-overlay .cto-brand>span:first-child{font-size:26px}
#cto-overlay #cto-counter{font-size:14px;padding:4px 15px;white-space:nowrap}
#cto-overlay .cto-score{font-size:14px;padding:3px 10px;gap:6px}
#cto-overlay .cto-score>span{font-size:21px}
#cto-overlay .cto-score strong{font-size:19px}
#cto-overlay .cto-tools{gap:7px}
#cto-overlay .cto-topbar button{width:calc(1em + 10px)!important;min-width:0!important;height:auto!important;min-height:0!important;aspect-ratio:1;padding:3px!important;font-size:22px!important;line-height:1}
@media(max-width:900px),(max-height:550px){
#cto-overlay .cto-topbar{padding:3px 9px!important;gap:6px}
#cto-overlay .cto-brand{font-size:18px;gap:4px}
#cto-overlay .cto-brand>span:first-child{font-size:21px}
#cto-overlay #cto-counter{font-size:12px;padding:3px 9px}
#cto-overlay .cto-score{font-size:11px;padding:2px 7px;gap:4px}
#cto-overlay .cto-score>span{font-size:18px}
#cto-overlay .cto-score strong{font-size:16px}
#cto-overlay .cto-topbar button{font-size:20px!important}
}
/* Spot the Difference: smaller type and padding, with automatic row heights. */
#ctd-overlay .std-header{padding:4px 12px!important;gap:10px;grid-template-rows:auto auto}
#ctd-overlay .std-header h1{font-size:23px;gap:5px}
#ctd-overlay .std-header h1>span{font-size:27px}
#ctd-overlay .std-progress{padding:4px 12px;font-size:11px;gap:3px}
#ctd-overlay .std-score{padding:3px 11px;font-size:11px;gap:6px}
#ctd-overlay .std-score>span{font-size:22px}
#ctd-overlay .std-score strong{font-size:20px}
#ctd-overlay .std-header button{width:calc(1em + 10px)!important;min-width:0!important;height:auto!important;min-height:0!important;aspect-ratio:1;padding:4px!important;font-size:22px!important;line-height:1}
@media(max-width:900px),(max-height:550px){
#ctd-overlay .std-header{padding:3px 9px!important;gap:6px}
#ctd-overlay .std-header h1{font-size:17px}
#ctd-overlay .std-header h1>span{font-size:21px}
#ctd-overlay .std-progress{font-size:9px;padding:3px 8px}
#ctd-overlay .std-score{font-size:9px;padding:2px 7px;gap:4px}
#ctd-overlay .std-score>span{font-size:18px}
#ctd-overlay .std-score strong{font-size:16px}
#ctd-overlay .std-header button{font-size:20px!important}
}
@media(orientation:portrait){#ctd-overlay .std-header h1{font-size:clamp(13px,4.4vw,17px);padding-right:62px}}
/* Shape Builder's host HUD keeps its own navy theme and aligned counters. */
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto!important;grid-template-rows:auto!important;gap:8px!important;padding:5px 54px 5px 12px!important;height:auto!important;min-height:0!important;flex:0 0 auto!important;width:100%!important;background:linear-gradient(110deg,#154985,#0b2359)!important;color:#fff!important;border:0!important;border-bottom:1px solid #4585bd!important;box-sizing:border-box}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title{grid-column:1!important;grid-row:1!important;gap:7px!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title-name{color:#fff!important;font-size:21px!important;line-height:1.2;text-shadow:none}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title-name b{color:#74deff}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-tagline{display:none!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-logo{width:auto!important;height:auto!important;padding:3px!important;font-size:24px!important;line-height:1;border:0;box-shadow:none;background:transparent}
#wonder-arcade-overlay.wonder-arcade-shape-builder :is(.wonder-arcade-score,.wonder-arcade-shape-level,.wonder-arcade-shape-stars){display:flex!important;align-items:center;justify-content:center;position:static!important;inset:auto!important;transform:none!important;margin:0!important;min-width:0!important;height:auto!important;min-height:0!important;padding:4px 10px!important;gap:5px;border:1px solid #548abf;border-radius:18px;background:#173b75;box-shadow:none;color:#fff}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-score{grid-column:2!important;grid-row:1!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-score-label{display:inline!important;color:#c5e7ff;font-size:11px!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder #wonder-arcade-score-value{font-size:18px!important;line-height:1.2}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level{grid-column:3!important;grid-row:1!important;font-size:13px}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level strong{font-size:13px;line-height:1.2}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level small{display:none!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-stars{grid-column:4!important;grid-row:1!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-stars span{font-size:20px;line-height:1;color:#9fbce7}
#wonder-arcade-overlay.wonder-arcade-shape-builder[data-shape-stars="1"] .wonder-arcade-shape-stars span:first-child,
#wonder-arcade-overlay.wonder-arcade-shape-builder[data-shape-stars="2"] .wonder-arcade-shape-stars span:nth-child(-n+2),
#wonder-arcade-overlay.wonder-arcade-shape-builder[data-shape-stars="3"] .wonder-arcade-shape-stars span{color:#ffd85c}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-close{top:6px!important;right:10px!important;width:32px!important;height:auto!important;min-height:0!important;aspect-ratio:1;padding:4px!important;font-size:22px!important;line-height:1;background:#204578!important;color:#fff;border:1px solid #79b9e3;border-radius:50%}
@media(max-width:900px),(max-height:550px){
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:auto auto!important;padding:4px 9px!important;gap:4px 6px!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title{grid-column:1/-1!important;padding-right:38px}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title-name{font-size:17px!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-logo{font-size:20px!important;padding:2px!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-score{grid-column:1!important;grid-row:2!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level{grid-column:2!important;grid-row:2!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-stars{grid-column:3!important;grid-row:2!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder :is(.wonder-arcade-score,.wonder-arcade-shape-level,.wonder-arcade-shape-stars){padding:3px 6px!important;align-self:stretch}
#wonder-arcade-overlay.wonder-arcade-shape-builder #wonder-arcade-score-value{font-size:15px!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level strong{font-size:12px}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-stars span{font-size:16px}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-close{top:4px!important;right:9px!important;width:28px!important;padding:3px!important;font-size:20px!important}
}
@media(min-width:600px) and (max-width:1100px) and (max-height:550px) and (orientation:landscape){
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-toolbar{grid-template-columns:minmax(0,1fr) auto auto auto!important;grid-template-rows:auto!important;padding-right:44px!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-title{grid-column:1!important;padding-right:0}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-score{grid-column:2!important;grid-row:1!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-level{grid-column:3!important;grid-row:1!important}
#wonder-arcade-overlay.wonder-arcade-shape-builder .wonder-arcade-shape-stars{grid-column:4!important;grid-row:1!important}
}

/* Traffic Town provides its own flush, fully accessible game header. */
.wonder-arcade-overlay.wonder-arcade-traffic-town .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-traffic-town > .wonder-arcade-close { display:none !important; }
.wonder-arcade-overlay.wonder-arcade-traffic-town .wonder-arcade-frame-wrap { flex:1; min-height:0; margin:0; border:0; padding:0; }
.wonder-arcade-overlay.wonder-arcade-traffic-town .wonder-arcade-frame { border:0; }

.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-traffic-town .wonder-arcade-frame-wrap { inset:0 !important; padding:0 !important; }

/* Pattern Train has one native header, flush with the game viewport. */
.wonder-arcade-overlay.wonder-arcade-pattern-train .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-pattern-train > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-pattern-train .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-pattern-train .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-pattern-train .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}

/* Truth Detectives owns a compact header with matching score/level spacing. */
.wonder-arcade-overlay.wonder-arcade-truth-detectives .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-truth-detectives > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-truth-detectives .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-truth-detectives .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-truth-detectives .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}

.wonder-arcade-overlay.wonder-arcade-balance-beasts .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-balance-beasts > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-balance-beasts .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-balance-beasts .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-balance-beasts .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}
.wonder-arcade-overlay.wonder-arcade-balance-buddies .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-balance-buddies > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-balance-buddies .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-balance-buddies .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-balance-buddies .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}
.wonder-arcade-overlay.wonder-arcade-number-path .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-number-path > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-number-path .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-number-path .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-number-path .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}
.wonder-arcade-overlay.wonder-arcade-pawzzle .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-pawzzle > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-pawzzle .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-pawzzle .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-pawzzle .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}

/* Steel Bridge Builder owns its header inside the game frame. */
.wonder-arcade-overlay.wonder-arcade-steel-bridge .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-steel-bridge > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-steel-bridge .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-steel-bridge .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-steel-bridge .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}

/* Liquid War supplies its own compact header. */
.wonder-arcade-overlay.wonder-arcade-liquid-war .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-liquid-war > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-liquid-war .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-liquid-war .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-liquid-war .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}

/* The complete Knight board must remain visible at every cover-card ratio. */
[data-id="s55"] .arcade-card-cover{object-fit:contain;object-position:center}
[data-id="s55"] .arcade-card-illus{background:#edf3ff!important}

/* Liquid Sort Lab supplies a single compact native header. */
.wonder-arcade-overlay.wonder-arcade-liquid-sort .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-liquid-sort > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-liquid-sort .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-liquid-sort .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-liquid-sort .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}

[data-id="s12"] .arcade-card-cover{object-fit:contain;object-position:center}
[data-id="s12"] .arcade-card-illus{background:#061127!important}

/* Story Quest owns its compact, flush game header. */
.wonder-arcade-overlay.wonder-arcade-story-quest .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-story-quest > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-story-quest .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-story-quest .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-story-quest .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}

/* Preserve the story and every ending at narrower card aspect ratios. */
[data-id="s37"] .arcade-card-cover{object-fit:contain;object-position:center}
[data-id="s37"] .arcade-card-illus{background:#e5f5f2!important}

/* Find the Hidden Value owns its compact game header and celebration. */
.wonder-arcade-overlay.wonder-arcade-hidden-value .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-hidden-value > .wonder-arcade-close{display:none!important}
.wonder-arcade-overlay.wonder-arcade-hidden-value .wonder-arcade-frame-wrap{flex:1;min-height:0;margin:0;border:0;padding:0}
.wonder-arcade-overlay.wonder-arcade-hidden-value .wonder-arcade-frame{border:0}
.wonder-arcade-overlay.wonder-arcade-mobile-fullscreen.wonder-arcade-hidden-value .wonder-arcade-frame-wrap{inset:0!important;padding:0!important}
[data-id="s49"] .arcade-card-cover{object-fit:contain;object-position:center}
[data-id="s49"] .arcade-card-illus{background:#e6f7ff!important}

/* Family Tree owns its level, score and exit in one header. */
.wonder-arcade-overlay.wonder-arcade-family-tree .wonder-arcade-toolbar,
.wonder-arcade-overlay.wonder-arcade-family-tree > .wonder-arcade-close { display:none!important; }
.wonder-arcade-overlay.wonder-arcade-family-tree .wonder-arcade-frame-wrap { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; padding:0!important; }
.wonder-arcade-overlay.wonder-arcade-family-tree.wonder-arcade-awaiting-resume > .wonder-arcade-close { display:flex!important; opacity:1!important; pointer-events:auto!important; z-index:30; }

/* Auto Server's portrait prompt has no separate toolbar to reserve space for. */
.wonder-arcade-overlay.wonder-arcade-auto-server .wonder-arcade-landscape-gate { padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }
.wonder-arcade-overlay.wonder-arcade-auto-server .wonder-arcade-landscape-card { max-height:calc(100dvh - 32px); padding:18px 16px; border-radius:20px; }
.wonder-arcade-overlay.wonder-arcade-auto-server .wonder-arcade-landscape-icon { width:48px; height:48px; font-size:25px; margin-bottom:8px; }
.wonder-arcade-overlay.wonder-arcade-auto-server .wonder-arcade-landscape-card h2 { font-size:24px; }
.wonder-arcade-overlay.wonder-arcade-auto-server .wonder-arcade-landscape-card p { font-size:14px; line-height:1.35; }
.wonder-arcade-overlay.wonder-arcade-auto-server .wonder-arcade-landscape-preview { display:none; }
.wonder-arcade-overlay.wonder-arcade-auto-server .wonder-arcade-landscape-card small { font-size:11px; }
.wonder-arcade-overlay.wonder-arcade-auto-server.wonder-arcade-awaiting-landscape > .wonder-arcade-close { display:flex!important; opacity:1!important; pointer-events:auto!important; z-index:30; }

/* Auto Server fits the visible phone surface, including browser chrome changes.
   In the rotation fallback the landscape height is the visible portrait width. */
.wonder-arcade-overlay.wonder-arcade-auto-server {
  inset:auto!important;
  top:var(--as-visible-top,0px)!important;
  left:var(--as-visible-left,0px)!important;
  width:var(--as-visible-width,100vw)!important;
  height:var(--as-visible-height,100dvh)!important;
  max-width:none!important;
  max-height:none!important;
}

/* Word Chain's preview is a full-width capture of its current game. Preserve
   the capture's ratio at every card width so its fruits and HUD stay visible. */
#category-games [data-id="s64"] .activity-card-illus {
  height:auto!important;
  aspect-ratio:9/4;
}
#category-games [data-id="s64"] .arcade-card-cover {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:none!important;
}
@media (orientation:portrait) and (max-width:900px) {
  html.ps-auto-server-viewport.ps-virtual-landscape body {
    top:calc(var(--as-visible-top,0px) + var(--as-visible-height,100dvh) * .5)!important;
    left:calc(var(--as-visible-left,0px) + var(--as-visible-width,100vw) * .5)!important;
    width:var(--as-visible-height,100dvh)!important;
    height:var(--as-visible-width,100vw)!important;
    margin:0!important;
  }
  html.ps-auto-server-viewport.ps-virtual-landscape .wonder-arcade-overlay.wonder-arcade-auto-server {
    top:0!important;
    left:0!important;
    width:100%!important;
    height:100%!important;
  }
}