/* ============ The Playroom ============ */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;   /* Safari must not inflate our text */
  background:#FDF6EC;
}
body{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:#FDF6EC;
  color:#453733;
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;      /* no copy/look-up bubble on long-press */
  overscroll-behavior:none;        /* no pull-to-refresh reload, no rubber-band */
  overflow-x:hidden;
  min-height:100vh;
  min-height:100vh; min-height:100dvh;
}
button{ font-family:inherit; color:inherit; border:none; cursor:pointer; }

.screen{ display:none; min-height:100vh; min-height:100dvh; padding-bottom:env(safe-area-inset-bottom); }
.screen.active{ display:block; }

/* ---------- home ---------- */
.home-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:calc(14px + env(safe-area-inset-top)) 18px 4px;
}
.logo{ font-size:26px; font-weight:800; letter-spacing:-0.5px; }
.star-badge{
  background:#fff; border-radius:999px; padding:8px 14px;
  font-weight:800; font-size:15px; box-shadow:0 2px 8px #0001;
}
.tagline{ margin:2px 18px 10px; font-size:14px; color:#8a776a; }
.section{ padding:6px 14px 2px; }
.section h2{ font-size:19px; margin:10px 6px 10px; }
.section h2 span{ font-size:13px; font-weight:600; color:#a08c7d; margin-left:6px; }
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(min-width:700px){ .tiles{ grid-template-columns:repeat(4,1fr); } }
.tile{
  border-radius:22px; padding:16px 10px 13px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:0 3px 0 #0000000f;
  transition:transform .1s;
}
.tile:active{ transform:scale(0.95); }
.tile-name{ font-weight:800; font-size:15px; }
.tile-skill{ font-size:11px; font-weight:700; color:#00000055; text-transform:uppercase; letter-spacing:.5px; }

#grownupsBtn{
  display:block; margin:26px auto 6px; background:#efe5d8;
  border-radius:999px; padding:12px 22px; font-weight:700; font-size:14px; color:#79695c;
  position:relative; overflow:hidden;
}
#grownupsBtn.holding::after{
  content:''; position:absolute; inset:0; background:#00000012;
  animation:fillhold 1.2s linear forwards;
}
@keyframes fillhold{ from{ width:0; } to{ width:100%; } }
.gu-hint{ font-weight:500; opacity:.6; }
.footer-note{ text-align:center; color:#b5a292; font-size:12px; margin:6px 0 24px; }

/* ---------- game frame ---------- */
.game-head{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 8px;
}
#backBtn,#guBack{
  background:#fff; border-radius:999px; padding:10px 16px;
  font-weight:800; font-size:16px; box-shadow:0 2px 8px #0001;
}
.game-title{ font-weight:800; font-size:17px; text-align:center; flex:1; }
.stage{ padding:8px 14px calc(30px + env(safe-area-inset-bottom)); max-width:560px; margin:0 auto; }

/* ---------- shared bits ---------- */
.prompt{ text-align:center; font-size:19px; font-weight:700; margin:8px 4px 12px; }
.dots{ display:flex; justify-content:center; gap:8px; margin:6px 0 10px; }
.dot{ width:16px; height:16px; border-radius:50%; background:#e7dccd; }
.dot.on{ background:var(--c,#f4c430); transform:scale(1.15); }
.big-choices{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.big-choices.column{ flex-direction:column; align-items:stretch; }
.big-btn{
  background:#fff; border-radius:18px; padding:16px 22px;
  font-size:22px; font-weight:800; box-shadow:0 3px 0 #00000012;
  min-width:76px; transition:transform .1s;
}
.big-btn:active{ transform:scale(0.95); }
.big-btn.wide{ font-size:19px; }
.big-btn.small-text{ font-size:16px; font-weight:700; }
.big-btn.primary{ background:#57b46a; color:#fff; }
.big-btn.right{ background:#d9f2e3; box-shadow:0 0 0 3px #57b46a inset; }
.big-btn.wrong{ background:#ffe3e0; box-shadow:0 0 0 3px #e2574c inset; }
.big-btn.center,.center{ margin-left:auto; margin-right:auto; display:block; }
.chip-row{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin:4px 0 12px; }
.chip{
  background:#f1e8db; border-radius:999px; padding:9px 15px;
  font-weight:700; font-size:14px; color:#79695c;
}
.chip.on{ background:#453733; color:#fff; }
.score-pill{
  background:#fff; border-radius:999px; padding:8px 14px;
  font-weight:800; font-size:14px; box-shadow:0 2px 6px #0001;
}
.shake{ animation:shake .4s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* confetti */
#confettiLayer{ position:fixed; inset:0; pointer-events:none; z-index:99; overflow:hidden; }
.confetti-bit{
  position:absolute; top:-20px; width:12px; height:12px;
  animation:confall linear forwards;
}
@keyframes confall{
  to{ transform:translateY(105vh) rotate(540deg); opacity:.7; }
}

/* ---------- balloons ---------- */
.balloon-sky{ position:relative; height:60vh; height:60dvh; overflow:hidden; border-radius:22px; background:linear-gradient(#e8f4ff,#f7fbff); }
.balloon{
  position:absolute; bottom:-130px; width:64px; height:80px;
  border-radius:50% 50% 50% 50%/45% 45% 55% 55%;
  animation-name:riseUp; animation-timing-function:linear; animation-fill-mode:forwards;
  box-shadow:inset -6px -8px 0 #00000010;
}
.balloon::after{
  content:''; position:absolute; left:50%; bottom:-26px; width:2px; height:26px;
  background:#00000030; transform:translateX(-50%);
}
@keyframes riseUp{ to{ transform:translateY(-75dvh) translateY(-140px); } }
.balloon.popped{ animation:none; transform:scale(1.6); opacity:0; transition:all .17s; }

/* ---------- number blocks ---------- */
.small-prompt{ font-size:15px; }
.nb-field{
  position:relative; height:50vh; height:50dvh; border-radius:22px; overflow:hidden;
  background:linear-gradient(#eaf6ff,#f7fbff);
  box-shadow:0 3px 0 #00000010; touch-action:none;
}
.nb-pad{
  position:absolute; bottom:6px; height:8px; border-radius:50%;
  background:#00000010; transform:translateX(-50%);
}
.nb-tower{
  position:absolute; bottom:10px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
}
.nb-num{
  font-size:34px; font-weight:900; line-height:1; margin-bottom:6px;
  -webkit-text-stroke:1px #00000022; cursor:pointer;
}
.nb-block{
  position:relative; border-radius:7px; margin-top:3px;
  border:2.5px solid #00000025;
  box-shadow:inset -4px -4px 0 #00000012, inset 3px 3px 0 #ffffff30;
  touch-action:none;
}
.nb-ghost-stack{
  position:fixed; z-index:60; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
  transform:rotate(-4deg) scale(1.08);
}
.nb-num-sm{ font-size:26px; }
.nb-unit{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end;
  font-size:11px; font-weight:900; color:#ffffffd9; padding:0 5px 2px 0;
  pointer-events:none; text-shadow:0 1px 2px #00000033;
}
.nb-face{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.nb-goal{ text-align:center; font-size:21px; font-weight:800; margin:-4px 0 10px; }
.nb-ball{
  position:absolute; bottom:14px; left:0; width:66px; height:66px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #ff9d94, #E2504A 72%);
  border:2.5px solid #00000025; z-index:6;
  box-shadow:0 3px 6px #00000022;
  animation:nbroll 1.45s linear forwards;
}
@keyframes nbroll{
  from{ transform:translateX(-90px) rotate(0); }
  to{ transform:translateX(740px) rotate(900deg); }
}
.nb-block.tumble{
  animation:nbtumble .95s cubic-bezier(.25,-.3,.7,1) forwards;
}
@keyframes nbtumble{
  to{ transform:translate(var(--tx,90px),75vh) rotate(var(--rot,240deg)); opacity:.85; }
}
.nb-unit-supply{ font-size:13px; }
.nb-tray{
  display:flex; align-items:center; gap:14px; margin-top:12px;
  background:#fff; border-radius:18px; padding:12px 16px;
  box-shadow:0 3px 0 #00000010;
}
.nb-supply{
  width:54px; height:48px; border-radius:7px; flex-shrink:0;
  border:2.5px solid #00000025;
  box-shadow:inset -4px -4px 0 #00000012;
  animation:nbwiggle 2.2s ease-in-out infinite;
  touch-action:none; position:relative;
}
@keyframes nbwiggle{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-5deg); } 75%{ transform:rotate(5deg); } }
.nb-hint{ font-size:13px; font-weight:700; color:#8a776a; line-height:1.45; }

/* ---------- animals ---------- */
.animal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.animal-card{
  background:#fff; border-radius:20px; padding:14px 6px 10px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  box-shadow:0 3px 0 #00000010;
}
.animal-e{ font-size:44px; }
.animal-n{ font-weight:800; font-size:14px; }
.animal-card.bounce{ animation:bounce .5s; }
@keyframes bounce{ 0%,100%{transform:scale(1)} 40%{transform:scale(1.18) rotate(-4deg)} 70%{transform:scale(.96)} }

/* ---------- shape sorter ---------- */
.sorter-holes{ display:flex; justify-content:center; gap:22px; margin:26px 0 40px; }
.hole{ width:92px; height:92px; opacity:.9; }
.hole.filled{ opacity:1; box-shadow:none; }
.sorter-tray{ display:flex; justify-content:center; gap:22px; margin-top:30px; min-height:100px; }
.piece{ width:88px; height:88px; position:relative; z-index:5; }
.piece.dragging{ z-index:10; }

/* ---------- counting ---------- */
.count-field{
  display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:10px;
  background:#fff; border-radius:22px; min-height:190px; padding:18px; margin-bottom:12px;
  box-shadow:0 3px 0 #00000010;
}
.count-item{ font-size:44px; transition:transform .2s; }
.count-item.counted{ transform:scale(1.35); }

/* ---------- abc ---------- */
.abc-card{
  width:min(78vw,300px); height:min(78vw,300px); margin:10px auto;
  position:relative; perspective:900px; cursor:pointer;
}
.abc-front,.abc-back{
  position:absolute; inset:0; border-radius:28px; backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 5px 0 #00000012; transition:transform .5s;
  background:#fff;
}
.abc-front{ font-size:150px; font-weight:900; color:#e2574c; }
.abc-back{ transform:rotateY(180deg); background:#fff8e8; }
.abc-card.flipped .abc-front{ transform:rotateY(180deg); }
.abc-card.flipped .abc-back{ transform:rotateY(360deg); }
.abc-e{ font-size:96px; }
.abc-w{ font-size:30px; font-weight:800; }
.abc-nav{ display:flex; justify-content:center; gap:14px; margin-top:16px; align-items:center; }

/* ---------- finger trails / maze canvases ---------- */
#ftCanvas,#mzCanvas{
  display:block; margin:6px auto; background:#fff; border-radius:22px;
  width:min(92vw,380px); height:min(92vw,380px);
  box-shadow:0 3px 0 #00000010;
}

/* ---------- memory ---------- */
.mem-grid{ display:grid; gap:10px; max-width:420px; margin:0 auto; }
.mem-grid.g3{ grid-template-columns:repeat(3,1fr); }
.mem-grid.g4{ grid-template-columns:repeat(4,1fr); }
.mem-card{ background:none; padding:0; perspective:600px; aspect-ratio:3/3.4; }
.mem-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .35s; }
.mem-card.up .mem-inner,.mem-card.done .mem-inner{ transform:rotateY(180deg); }
.mem-front,.mem-back{
  position:absolute; inset:0; border-radius:16px; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center; font-size:34px;
  box-shadow:0 3px 0 #00000010;
}
.mem-front{ background:#a06cd5; color:#ffffffaa; font-size:24px; }
.mem-back{ background:#fff; transform:rotateY(180deg); }
.mem-card.done .mem-back{ background:#d9f2e3; }

/* ---------- simon ---------- */
.simon-board{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  width:min(84vw,340px); margin:10px auto;
}
.simon-pad{
  aspect-ratio:1; border-radius:26px; opacity:.55; transition:opacity .12s, transform .12s;
  box-shadow:0 4px 0 #00000018;
}
.simon-pad.lit{ opacity:1; transform:scale(1.05); }
.simon-pad:active{ opacity:1; }

/* ---------- math pop ---------- */
.mp-q{ text-align:center; font-size:38px; font-weight:900; margin:12px 0; }
.bubble-zone{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; padding:20px 0; }
.bubble{
  width:88px; height:88px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #ffffffcc, #bfe0f7 60%, #8ec4ea);
  font-size:26px; font-weight:900; color:#2b5d86;
  animation:bob ease-in-out infinite alternate;
  box-shadow:0 4px 0 #00000010;
}
@keyframes bob{ from{ transform:translateY(0); } to{ transform:translateY(-14px); } }
.bubble.popped{ transform:scale(1.5); opacity:0; transition:all .2s; }

/* ---------- word builder ---------- */
.wb-pic{ text-align:center; font-size:88px; margin:6px 0; }
.wb-slots{ display:flex; justify-content:center; gap:8px; margin:8px 0 18px; }
.wb-slot{
  width:52px; height:60px; border-radius:14px; background:#fff;
  border-bottom:4px solid #d8ccbe; font-size:28px; font-weight:900;
}
.wb-tiles{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.wb-tile{
  width:56px; height:62px; border-radius:14px; background:#f4c430;
  font-size:28px; font-weight:900; box-shadow:0 3px 0 #00000018;
}
.wb-tile.used{ opacity:.25; pointer-events:none; }

/* ---------- maze ---------- */
.maze-pad{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:10px; }
.maze-pad div{ display:flex; gap:64px; }
.pad-btn{
  width:64px; height:56px; border-radius:16px; background:#fff;
  font-size:22px; font-weight:900; box-shadow:0 3px 0 #00000012;
}
.pad-btn:active{ transform:scale(.93); }

/* ---------- slide puzzle ---------- */
.slide-board{
  display:grid; gap:8px; width:min(88vw,380px); margin:0 auto;
}
.slide-tile{
  aspect-ratio:1; border-radius:16px; font-size:30px; font-weight:900;
  box-shadow:0 3px 0 #00000015; color:#453733cc;
}
.slide-blank{ background:transparent; }

/* ---------- rhyme / vocab ---------- */
.rt-word{ text-align:center; font-size:44px; font-weight:900; margin:4px 0 6px; color:#a06cd5; }

/* ---------- coins ---------- */
.coin-field{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px;
  background:#fff; border-radius:22px; min-height:150px; padding:16px; margin-bottom:10px;
  box-shadow:0 3px 0 #00000010;
}
.coin{
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:900; box-shadow:inset -3px -4px 0 #00000018, 0 2px 4px #0002;
}
.coin-q{ width:74px; height:74px; background:#d7d7d7; font-size:16px; }
.coin-d{ width:52px; height:52px; background:#e2e2e2; font-size:13px; }
.coin-n{ width:64px; height:64px; background:#cfcfcf; font-size:14px; }
.coin-p{ width:56px; height:56px; background:#d29a68; font-size:13px; color:#5d3a1e; }

/* ---------- speed sums / stroop ---------- */
.timebar{
  height:12px; border-radius:999px; background:#efe5d8; overflow:hidden; margin:4px 0 8px;
}
.timebar div{ height:100%; width:100%; background:linear-gradient(90deg,#57b46a,#f4c430); transition:width 1s linear; }
.ss-entry{
  text-align:center; font-size:34px; font-weight:900; min-height:46px;
  background:#fff; border-radius:16px; margin:6px auto 8px; max-width:220px; padding:4px;
  box-shadow:0 3px 0 #00000010;
}
.keypad{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  max-width:300px; margin:12px auto;
}
.key{
  height:60px; border-radius:16px; background:#fff; font-size:24px; font-weight:900;
  box-shadow:0 3px 0 #00000012;
}
.key:active{ transform:scale(.94); }
.sd-pad{ grid-template-columns:repeat(4,1fr); max-width:340px; }

.stroop-word{ text-align:center; font-size:64px; font-weight:900; margin:20px 0; min-height:80px; }
.stroop-pads{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:380px; margin:10px auto; }
.stroop-pad{
  height:74px; border-radius:18px; color:#fff; font-size:20px; font-weight:900;
  text-shadow:0 1px 3px #0004; box-shadow:0 4px 0 #00000018;
}
.stroop-pad:active{ transform:scale(.95); }

/* ---------- globe quiz ---------- */
.gq-flag{ text-align:center; margin:6px 0 4px; min-height:120px; }
.gq-emoji{ font-size:96px; display:block; line-height:1.15; }
.gq-state{ font-size:40px; font-weight:900; display:block; padding:16px 0; }
.gq-sub{ font-size:15px; color:#8a776a; font-weight:700; }
.gq-result{ font-size:52px; font-weight:900; display:block; padding:22px 0; }

/* ---------- sudoku ---------- */
.sudoku{
  display:grid; gap:0; width:min(90vw,380px); margin:0 auto 10px;
  border-radius:14px; overflow:hidden; box-shadow:0 3px 0 #00000012;
}
.sd-cell{
  aspect-ratio:1; background:#fff; font-size:24px; font-weight:800;
  border:1px solid #e5dbcf; border-radius:0; color:#4a90d9;
}
.sudoku.n6 .sd-cell{ font-size:20px; }
.sd-cell.given{ color:#453733; background:#faf3e7; font-weight:900; }
.sd-cell.sel{ background:#dceaff; }
.sd-cell.bad{ color:#e2574c; background:#ffe9e6; }
.sd-cell.bt{ border-top:3px solid #79695c; }
.sd-cell.bl{ border-left:3px solid #79695c; }
.sd-cell.br{ border-right:3px solid #79695c; }
.sd-cell.bb{ border-bottom:3px solid #79695c; }

/* ---------- lights out ---------- */
.lights-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  width:min(88vw,360px); margin:8px auto;
}
.light{
  aspect-ratio:1; border-radius:18px; background:#efe5d8;
  box-shadow:inset 0 3px 6px #00000012; transition:background .15s, box-shadow .15s;
}
.light.on{
  background:radial-gradient(circle at 35% 30%, #fff6c9, #f4c430);
  box-shadow:0 0 18px #f4c43088, 0 3px 0 #00000012;
}

/* ---------- art ---------- */
.art-tools{ margin-bottom:8px; }
.swatch-row{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:6px 0; }
.swatch{
  width:38px; height:38px; border-radius:50%; box-shadow:0 2px 5px #00000022;
  border:3px solid transparent;
}
.swatch.on{ border-color:#453733; transform:scale(1.12); }
.swatch.stamp-sw{ background:#fff; font-size:20px; }
.tool-row{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:8px 0; }
.tool-btn{
  min-width:46px; height:46px; border-radius:14px; background:#fff; font-size:18px; font-weight:900;
  box-shadow:0 3px 0 #00000012; padding:0 10px;
}
.tool-btn.on{ background:#453733; color:#fff; }
.hidden{ display:none !important; }
#dsCanvas{
  display:block; width:100%; aspect-ratio:700/880; background:#fff;
  border-radius:20px; box-shadow:0 3px 0 #00000010;
}
#mdCanvas{
  display:block; margin:8px auto; width:min(92vw,420px); height:min(92vw,420px);
  border-radius:20px; box-shadow:0 3px 0 #00000010;
}
.cb-frame{ max-width:420px; margin:0 auto; }
.cb-frame svg{
  width:100%; height:auto; background:#fff; border-radius:20px;
  box-shadow:0 3px 0 #00000010; display:block;
}
.cb-frame .r{ cursor:pointer; }
.pixel-grid{
  display:grid; grid-template-columns:repeat(16,1fr);
  width:min(92vw,400px); aspect-ratio:1; margin:6px auto;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 3px 0 #00000010; gap:1px; padding:4px;
}
.px{ background:#f6efe4; border-radius:2px; }

/* ---------- grown-ups ---------- */
.gu-body{ padding:8px 16px calc(40px + env(safe-area-inset-bottom)); max-width:560px; margin:0 auto; }
.gu-card{
  background:#fff; border-radius:20px; padding:16px 18px; margin-bottom:14px;
  box-shadow:0 3px 0 #00000010; font-size:15px; line-height:1.55;
}
.gu-card h3{ margin:0 0 8px; font-size:16px; }
.gu-big{ font-size:44px; font-weight:900; margin:4px 0 10px; }
.gu-toggle{ display:block; font-weight:700; padding:8px 0; font-size:16px; }
.gu-toggle input{ width:22px; height:22px; vertical-align:-4px; margin-right:8px; }

/* ---------- gate ---------- */
#gate{
  position:fixed; inset:0; background:#00000055; z-index:50;
  display:none; align-items:center; justify-content:center;
}
#gate.open{ display:flex; }
.gate-box{
  background:#fff; border-radius:24px; padding:22px 20px; width:min(88vw,340px); text-align:center;
}
.gate-box h3{ margin:0 0 2px; font-size:20px; }
.gate-sub{ margin:0 0 8px; font-size:14px; color:#8a776a; }
#gateQ{ font-size:30px; font-weight:900; margin:6px 0 10px; }
.gate-entry{
  font-size:32px; font-weight:900; min-height:52px; line-height:52px;
  background:#faf3e7; border-radius:14px; margin:0 auto 12px; width:150px;
  letter-spacing:3px;
}
.gate-pad{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  max-width:250px; margin:0 auto 14px;
}
.gate-key{
  height:54px; border-radius:14px; background:#f4efe6; font-size:23px; font-weight:900;
  box-shadow:0 3px 0 #00000012;
}
.gate-key:active{ transform:scale(.94); }
.gate-key.go{ background:#57b46a; color:#fff; }
.gate-btns{ display:flex; gap:10px; justify-content:center; }

/* ---------- math race ---------- */
.mr-sub{ font-size:14px; color:#8a776a; font-weight:600; }
.mr-player-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin:4px 0; flex-wrap:wrap; }
.mr-player-row .chip-row{ margin:0; }
.mr-tag{ font-weight:800; font-size:14px; }
.mr-note{ text-align:center; font-size:13px; color:#8a776a; margin-top:16px; line-height:1.5; }
.mr-arena{ display:flex; flex-direction:column; height:76vh; height:76dvh; gap:8px; }
.mr-half{
  flex:1; border-radius:20px; position:relative; padding:8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.mr-half.p1{ background:#ffe9e6; }
.mr-half.p2{ background:#e2efff; transform:rotate(180deg); }
.mr-score{
  position:absolute; top:10px; right:14px; font-weight:900; font-size:22px;
  background:#fff; border-radius:999px; padding:4px 14px; box-shadow:0 2px 6px #0001;
}
.mr-q{ font-size:34px; font-weight:900; text-align:center; }
.mr-answers{ display:flex; gap:10px; }
.mr-ans{
  min-width:76px; height:60px; border-radius:16px; background:#fff;
  font-size:24px; font-weight:900; box-shadow:0 3px 0 #00000012;
}
.mr-ans:active{ transform:scale(.94); }
.mr-count{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:72px; font-weight:900; background:#ffffffcc; border-radius:20px; z-index:3;
}
.mr-mid{ display:flex; align-items:center; justify-content:center; gap:10px; }
.mr-bar{ flex:1; }
.mr-final{ font-size:30px; font-weight:900; }
.mr-won{ box-shadow:0 0 0 4px #f4c430 inset; }
.mr-lost{ opacity:.88; }

/* ---------- play together ---------- */
.tg-turnbar{
  display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap;
  font-weight:800; font-size:17px; margin:4px 0 10px; text-align:center;
}
.tg-turnbar span:first-child{ background:#fff; border-radius:999px; padding:6px 14px; box-shadow:0 2px 6px #0001; }
#moCanvas{
  display:block; margin:6px auto; background:#fff; border-radius:20px;
  width:min(92vw,420px); height:min(92vw,420px); box-shadow:0 3px 0 #00000010;
}
.hunt-card{
  background:#fff; border-radius:24px; padding:26px 16px; text-align:center;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  box-shadow:0 3px 0 #00000010; margin-bottom:12px;
}
.hunt-e{ font-size:76px; line-height:1.1; }
.hunt-t{ font-size:24px; font-weight:900; }
.hunt-score{ display:flex; justify-content:space-between; align-items:center; font-weight:900; font-size:18px; padding:0 8px; margin-bottom:10px; }
.hunt-btns{ display:flex; gap:12px; }
.hunt-found{
  flex:1; height:86px; border-radius:20px; font-size:21px; font-weight:900; color:#fff;
  box-shadow:0 4px 0 #00000018; text-shadow:0 1px 3px #0003;
}
.hunt-found:active{ transform:scale(.95); }
.hunt-found.f0{ background:#e2574c; }
.hunt-found.f1{ background:#4a90d9; }
.ed-pad span{ font-size:40px; }
.ac-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:420px; margin:0 auto 14px; }
.ac-card{
  background:#fff; border-radius:20px; padding:16px 8px 12px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:0 3px 0 #00000010;
}
.ac-card:active{ transform:scale(.96); }
.ac-e{ font-size:54px; }
.ac-n{ font-weight:800; font-size:15px; }
.ac-card.right{ box-shadow:0 0 0 4px #57b46a inset; background:#d9f2e3; }
.peek-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:min(70vw,280px); height:min(70vw,280px); margin:14px auto;
  background:#fff; border-radius:26px; font-size:24px; font-weight:900;
  box-shadow:0 4px 0 #00000012;
}
.peek-card span{ font-size:84px; }
.bo-field{
  position:relative; height:52vh; height:52dvh; border-radius:22px; overflow:hidden;
  background:linear-gradient(#eaf6ff,#f7fbff); box-shadow:0 3px 0 #00000010;
}
.bo-balloon{
  position:absolute; top:6%; left:42%; font-size:80px; line-height:1;
  cursor:pointer; touch-action:none; user-select:none; z-index:2;
  filter:drop-shadow(0 4px 4px #00000022);
}
.bo-hint{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; font-size:26px; font-weight:900;
  pointer-events:none; text-align:center;
}
.bo-hint button{ pointer-events:auto; }
.bo-sides{ display:flex; justify-content:space-between; font-weight:800; color:#b5a292; padding:8px 10px 0; }
.bo-sides .hot{ color:#e2574c; }
.st-ask{ text-align:center; font-size:24px; font-weight:900; margin:6px 0 14px; }
.st-story{
  background:#fff; border-radius:22px; padding:22px; font-size:21px; line-height:1.6;
  font-weight:700; box-shadow:0 3px 0 #00000010; margin-bottom:14px;
}
.tw-field{
  position:relative; height:54vh; height:54dvh; border-radius:22px;
  background:linear-gradient(#f3ecff,#fdf6ec); box-shadow:0 3px 0 #00000010;
}
.tw-circle{
  position:absolute; width:86px; height:86px; border-radius:50%;
  transform:translate(-50%,-50%); opacity:.65;
  box-shadow:0 4px 0 #00000015; transition:opacity .15s, transform .15s;
}
.tw-circle.held{ opacity:1; transform:translate(-50%,-50%) scale(1.12); box-shadow:0 0 22px #00000030; }
.tr-field{
  position:relative; height:54vh; height:54dvh; border-radius:22px;
  background:linear-gradient(#eaf6ff,#fdf6ec); box-shadow:0 3px 0 #00000010; overflow:hidden;
}
.tr-meter{
  position:absolute; top:10px; right:12px; font-size:34px;
  background:#ffffffcc; border-radius:999px; padding:6px 10px;
}
.tr-star{
  position:absolute; font-size:64px; transform:translate(-50%,-50%) scale(1);
  animation:starpop .5s ease-out;
}
@keyframes starpop{ from{ transform:translate(-50%,-50%) scale(0); } to{ transform:translate(-50%,-50%) scale(1); } }
.fd-stage{
  display:flex; justify-content:center; align-items:flex-end; gap:18px;
  height:34vh; height:34dvh; background:linear-gradient(#2d2450,#4a3f7a); border-radius:22px;
  box-shadow:0 3px 0 #00000010; padding-bottom:26px; position:relative;
}
.fd-dancer{ font-size:64px; animation:fddance .5s ease-in-out infinite alternate; }
.fd-dancer:nth-child(2){ animation-duration:.42s; }
.fd-dancer:nth-child(3){ animation-duration:.58s; }
.fd-dancer:nth-child(4){ animation-duration:.47s; }
.fd-dancer.frozen{ animation-play-state:paused; filter:saturate(.4) brightness(1.3); }
@keyframes fddance{ from{ transform:translateY(0) rotate(-8deg); } to{ transform:translateY(-26px) rotate(8deg); } }
.fd-flash{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  font-size:64px; font-weight:900; color:#fff; background:#4a90d9dd; z-index:40;
  letter-spacing:2px; pointer-events:none;
}
.fd-flash.show{ display:flex; }
.tu-track{
  display:flex; align-items:center; gap:4px; margin:14px 0 6px; font-size:30px;
}
.tu-rope{
  flex:1; height:10px; background:repeating-linear-gradient(90deg,#c8a06a 0 14px,#b58a52 14px 28px);
  border-radius:6px; position:relative;
}
.tu-knot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:40px; transition:left .1s;
}
.tu-zones{ display:flex; gap:12px; margin-top:14px; height:44vh; height:44dvh; }
.tu-zone{
  flex:1; border-radius:22px; font-size:30px; font-weight:900; color:#fff;
  box-shadow:0 4px 0 #00000018; text-shadow:0 2px 4px #0003; line-height:1.4;
}
.tu-zone:active{ transform:scale(.97); }
.tu-zone.z0{ background:#e2574c; }
.tu-zone.z1{ background:#4a90d9; }
.tu-count{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:90px; font-weight:900; color:#453733; background:#fdf6ecdd; z-index:30; pointer-events:none;
}

/* ---------- header buttons / voice switch ---------- */
.head-btns{ display:flex; align-items:center; gap:8px; }
.voice-btn{
  background:#fff; border-radius:8px; min-width:54px; height:42px; padding:0 8px;
  font-size:9px; font-weight:900; letter-spacing:.08em; box-shadow:0 2px 8px #0001; line-height:1;
}
.voice-btn.off{ background:#efe5d8; opacity:.75; }
.voice-btn:active{ transform:translateY(1px); }
#gameHelpBtn{
  min-width:46px; height:42px; padding:0 10px; border:1px solid var(--edge,#d7c8b6);
  border-radius:8px; background:#fffdf8; color:var(--room-deep,#453733);
  font-size:11px; font-weight:900; letter-spacing:.04em;
}
button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid color-mix(in srgb,var(--room,#607f8c) 72%,#fff); outline-offset:2px;
}
.chip-row>.chip,.chip-row>.score-pill{ min-height:42px; display:inline-flex; align-items:center; justify-content:center; }
.game-help[hidden]{ display:none; }
.game-help{ position:fixed; inset:0; z-index:120; display:grid; place-items:end center; }
.game-help-scrim{ position:absolute; inset:0; width:100%; height:100%; background:#17212699; }
.game-help-card{
  position:relative; width:min(100%,560px); padding:24px 22px calc(24px + env(safe-area-inset-bottom));
  border:1px solid #b8afa1; border-bottom:0; border-radius:12px 12px 0 0;
  background:#f7f3ea; color:#344047; box-shadow:0 -8px 28px #17212630;
}
.game-help-kicker{ font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:#6f7c7f; }
.game-help-card h2{ margin:5px 0 8px; font:700 25px/1.2 Georgia,"Times New Roman",serif; }
.game-help-card p{ margin:0 0 18px; color:#526166; font-size:16px; line-height:1.5; }
.game-help-card .big-btn{ width:100%; font-size:16px; }
@media(max-width:520px){
  #gamewrap .game-head{ gap:5px; padding-left:8px; padding-right:8px; }
  #gamewrap .game-title{ font-size:15px; }
  #gamewrap #backBtn{ padding:9px 11px; font-size:14px; }
  #gamewrap .star-badge{ display:none; }
  #gamewrap .head-btns{ gap:5px; }
  #gameHelpBtn{ min-width:42px; padding:0 7px; }
  .voice-btn{ min-width:48px; padding:0 6px; }
}
.gu-intro{ background:#fff8e8; }
.gu-tip{ font-size:13px; color:#8a776a; margin:6px 0 0; }

/* ---------- shared arcade bits ---------- */
.ov-panel{
  position:absolute; inset:0; z-index:9; border-radius:20px;
  background:#fdf6ecee; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; padding:16px; text-align:center;
}
.ov-title{ font-size:30px; font-weight:900; }

/* ---------- word race extras ---------- */
.wr-q{ font-size:22px; display:flex; flex-direction:column; gap:2px; align-items:center; }
.wr-prompt{ font-size:44px; font-weight:900; line-height:1.1; }
.wr-answers{ flex-wrap:wrap; justify-content:center; }
.wr-ans{ font-size:19px; min-width:96px; height:54px; }

/* ---------- quick draw ---------- */
.qd-score{ display:flex; justify-content:space-between; align-items:center; font-weight:900; font-size:17px; padding:0 6px; margin-bottom:8px; }
.qd-arena{ position:relative; display:flex; gap:10px; height:62vh; height:62dvh; }
.qd-side{ flex:1; border-radius:22px; box-shadow:0 4px 0 #00000018; }
.qd-side.s0{ background:#ffd9d4; }
.qd-side.s1{ background:#d4e6ff; }
.qd-light{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#fff; border-radius:22px; padding:20px 22px; text-align:center;
  font-size:21px; font-weight:900; box-shadow:0 4px 14px #00000022;
  width:min(76%,320px); pointer-events:none;
}
.qd-light.go{ background:#57b46a; color:#fff; font-size:34px; }
.qd-light.early{ background:#f4c430; }
.qd-light.win{ background:#fff8e8; pointer-events:auto; }

/* ---------- number runner ---------- */
.nr-hud{ display:flex; justify-content:space-between; align-items:center; font-weight:900; font-size:20px; padding:0 6px 6px; }
.nr-road{
  position:relative; height:52vh; height:52dvh; border-radius:20px; overflow:hidden;
  background:
    linear-gradient(90deg,#2c3550 0 4%, transparent 4% 96%, #2c3550 96%),
    linear-gradient(#4a5878,#39466a 60%,#303c5c);
  box-shadow:inset 0 0 30px #00000045, 0 3px 0 #00000010; touch-action:none;
}
.nr-lane{
  position:absolute; top:0; bottom:0; width:3px;
  background:repeating-linear-gradient(#f0e6d2cc 0 22px, transparent 22px 46px);
  opacity:.5;
}
.nr-lane:nth-of-type(1){ left:33.3%; } .nr-lane:nth-of-type(2){ left:66.6%; } .nr-lane:nth-of-type(3){ display:none; }
.nr-hero{ position:absolute; bottom:6%; font-size:42px; transform:translateX(-50%); transition:left .1s; z-index:3; filter:drop-shadow(0 5px 4px #00000066); }
.nr-item{
  position:absolute; transform:translateX(-50%); width:62px; height:62px; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, #ffffff, #dfe8f2 55%, #b9c8da);
  display:flex; align-items:center; justify-content:center; color:#2c3550;
  font-size:24px; font-weight:900;
  box-shadow:0 4px 8px #00000045, inset 0 -3px 0 #00000018, inset 0 2px 0 #ffffffcc;
}
.nr-item.grabbed{ transform:translateX(-50%) scale(1.5); opacity:0; transition:all .2s; }
.nr-controls{ display:flex; justify-content:center; gap:14px; margin-top:12px; }
.pad-btn.wide2{ width:120px; }

/* ---------- match magic ---------- */
.m3-grid{ display:grid; gap:4px; width:min(94vw,420px); margin:0 auto; }
.m3-cell{
  aspect-ratio:1; border-radius:12px; background:#fff; font-size:26px;
  box-shadow:0 2px 0 #00000010; display:flex; align-items:center; justify-content:center;
}
.m3-cell.sel{ box-shadow:0 0 0 3px #453733 inset; transform:scale(1.08); }

/* ---------- fruit slice ---------- */
.fs-hud{ display:flex; justify-content:space-between; font-weight:900; font-size:22px; padding:0 8px 6px; }
.fs-field{
  position:relative; height:56vh; height:56dvh; border-radius:20px; overflow:hidden;
  background:linear-gradient(#2f2a4a,#4b3f6e); box-shadow:0 3px 0 #00000010;
}
.fs-fruit{
  position:absolute; width:70px; height:70px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:900; color:#3d3733;
  background:radial-gradient(circle at 34% 28%, #fff, #ffd98a 70%);
  box-shadow:0 3px 8px #0003; margin-top:-35px;
}
.fs-fruit.bomb{ background:radial-gradient(circle at 34% 28%, #777, #2b2b2b 70%); color:#fff; }

.fs-fruit.cut{ background:radial-gradient(circle at 34% 28%,#d9f2e3,#57b46a 70%); transform:scale(1.4); opacity:0; transition:all .22s; }
.fs-fruit.wrongcut,.fs-fruit.boom{ background:radial-gradient(circle at 34% 28%,#ffd0cb,#e2574c 70%); transform:scale(1.6); opacity:0; transition:all .22s; }

/* ---------- flappy facts ---------- */
.ff-hud{ display:flex; justify-content:space-between; font-weight:900; font-size:22px; padding:0 8px 6px; }
.ff-sky{
  position:relative; height:52vh; height:52dvh; border-radius:20px; overflow:hidden;
  background:
    radial-gradient(circle at 84% 12%, #fff3b8 0 26px, #ffffff00 27px),
    radial-gradient(ellipse at 18% 26%, #ffffffcc 0 14px, #ffffff00 15px),
    radial-gradient(ellipse at 26% 29%, #ffffffb0 0 11px, #ffffff00 12px),
    radial-gradient(ellipse at 64% 60%, #ffffff90 0 12px, #ffffff00 13px),
    linear-gradient(#8ec9ef,#cfe9fa 62%,#dff2e3 88%,#bfe0a8);
  box-shadow:inset 0 -14px 20px -10px #7fae6b66, 0 3px 0 #00000010; touch-action:none;
}
.ff-bird{ position:absolute; left:12%; font-size:34px; z-index:3; }
.ff-gate{ position:absolute; top:0; bottom:0; width:74px; }
.ff-slot{
  position:absolute; left:6px; right:6px; height:44%;
  background:linear-gradient(90deg,#3f8a50,#6fc981 30%,#57b46a 60%,#357a45);
  color:#fff; font-size:24px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  text-shadow:0 2px 3px #0006;
  box-shadow:inset 0 0 0 2px #2c6337, 0 2px 4px #00000033;
}
.ff-slot.t{ top:0; border-radius:0 0 6px 6px; }
.ff-slot.b{ bottom:0; border-radius:6px 6px 0 0; }
.ff-slot.t::after,.ff-slot.b::after{
  content:''; position:absolute; left:-6px; right:-6px; height:14px;
  background:linear-gradient(90deg,#357a45,#7dd18f 30%,#57b46a 60%,#2c6337);
  border-radius:4px; box-shadow:0 2px 3px #00000040;
}
.ff-slot.t::after{ bottom:-2px; }
.ff-slot.b::after{ top:-2px; }

/* ---------- crossy count ---------- */
.cr-field{
  position:relative; height:54vh; height:54dvh; border-radius:20px; overflow:hidden;
  background:#cdeacb; box-shadow:0 3px 0 #00000010;
}
.cr-lane{
  position:absolute; left:0; right:0; overflow:hidden;
  background:linear-gradient(#63636e,#54545e 55%,#4b4b55);
  box-shadow:inset 0 2px 3px #00000030, inset 0 -2px 3px #00000030;
}
.cr-lane::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:2px;
  background:repeating-linear-gradient(90deg,#e8e2cf 0 14px,transparent 14px 30px);
  opacity:.7;
}
.cr-lane.safe{
  background:
    radial-gradient(circle at 12% 40%, #b4dfa6 0 4px, transparent 5px),
    radial-gradient(circle at 46% 70%, #b4dfa6 0 3px, transparent 4px),
    radial-gradient(circle at 78% 30%, #a8d798 0 4px, transparent 5px),
    linear-gradient(#cfeab9,#bfe0a8);
  box-shadow:none;
}
.cr-lane.safe::before{ display:none; }
.cr-car{ position:absolute; top:50%; transform:translateY(-50%); font-size:26px; }
.cr-hero{ position:absolute; font-size:30px; transform:translate(-50%,-50%); z-index:4; transition:top .1s, left .1s; }

/* ---------- spot the impostor ---------- */
.im-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:420px; margin:0 auto; }
.im-cell{
  aspect-ratio:1; border-radius:20px; background:#fff; font-size:44px; font-weight:900;
  box-shadow:0 3px 0 #00000010;
}
.im-cell.caught{ background:#d9f2e3; box-shadow:0 0 0 4px #57b46a inset; }

/* ---------- angle birds ---------- */
#abCv{
  display:block; margin:0 auto; width:min(94vw,440px); aspect-ratio:400/330;
  border-radius:20px; box-shadow:0 3px 0 #00000010; background:#eaf6ff;
}

/* ---------- word detective ---------- */
.wd-board{ display:grid; gap:6px; width:min(74vw,300px); margin:0 auto 8px; }
.wd-cell{
  aspect-ratio:1; border-radius:10px; background:#fff; border:2px solid #e7dccd;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:900; text-transform:uppercase;
}
.wd-cell.green{ background:#57b46a; color:#fff; border-color:#57b46a; }
.wd-cell.yellow{ background:#f4c430; color:#fff; border-color:#f4c430; }
.wd-cell.grey{ background:#c9bdae; color:#fff; border-color:#c9bdae; }
.wd-msg{ text-align:center; font-weight:800; font-size:17px; margin:8px 0; min-height:34px; }
.wd-keys{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; max-width:420px; margin:0 auto; }
.wd-key{
  width:31px; height:44px; border-radius:8px; background:#fff; font-weight:900; font-size:15px;
  box-shadow:0 2px 0 #00000012;
}
.wd-key.wide{ width:52px; }
.wd-key.go{ background:#57b46a; color:#fff; }
.wd-key.green{ background:#57b46a; color:#fff; }
.wd-key.yellow{ background:#f4c430; color:#fff; }
.wd-key.grey{ background:#c9bdae; color:#fff; }

/* ---------- power blocks ---------- */
.pb-grid{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  width:min(90vw,370px); aspect-ratio:1; margin:0 auto; padding:8px;
  background:#e7dccd; border-radius:18px; box-shadow:0 3px 0 #00000010;
}
.pb-cell{
  border-radius:12px; background:#f3ece0; display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:900; color:#6b5b4d;
}
.pb-cell.filled{ box-shadow:0 2px 0 #00000018; }

/* ---------- note tiles ---------- */
.nt-hud{ display:flex; justify-content:space-between; font-weight:900; font-size:22px; padding:0 8px 6px; }
.nt-board{
  position:relative; height:56vh; height:56dvh; border-radius:20px; overflow:hidden;
  background:#fffdf7; box-shadow:0 3px 0 #00000010; display:flex; touch-action:none;
}
.nt-col{ flex:1; border-right:1px solid #efe5d8; }
.nt-col:last-of-type{ border-right:none; }
.nt-line{ position:absolute; left:0; right:0; top:78%; height:3px; background:#e2574c55; }
.nt-tile{
  position:absolute; width:25%; height:15%;
  background:linear-gradient(#3d3733,#2a2521); border-radius:8px;
  box-shadow:inset 0 2px 0 #ffffff22;
}
.nt-tile.hit{ background:linear-gradient(#57b46a,#3f9455); transform:scale(.94); transition:all .12s; }

/* ---------- parent lock guide ---------- */
.gu-lock{ background:#f2f8ff; }
.gu-lead{ font-weight:600; }
.gu-step-head{
  font-weight:900; font-size:15px; margin:16px 0 4px; color:#2f5f8f;
  border-top:1px solid #dbe7f3; padding-top:12px;
}
.gu-lock .gu-step-head:first-of-type{ border-top:none; }
.gu-steps{ margin:4px 0 0; padding-left:22px; }
.gu-steps li{ margin-bottom:7px; line-height:1.5; }
.gu-note{
  background:#fff8e8; border-radius:14px; padding:12px 14px; margin-top:14px; font-size:14px;
}

/* ---------- music room ---------- */
.ch-list{ display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:560px){ .ch-list{ grid-template-columns:1fr 1fr; } }
.ch-card{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
  gap:2px 12px; align-items:center; text-align:left;
  background:#fff; border-radius:18px; padding:12px 16px; box-shadow:0 3px 0 #00000010;
}
.ch-card:active{ transform:scale(.98); }
.ch-card-e{ grid-row:1/3; font-size:34px; }
.ch-card-t{ font-weight:800; font-size:16px; }
.ch-card-c{ grid-column:2; font-size:13px; color:#8a776a; font-weight:600; }
.ch-card-d{ grid-row:1/3; grid-column:3; font-size:13px; font-weight:800; color:#b5a292; }
.ch-now{
  background:#fff8e8; border-radius:22px; padding:16px; margin-bottom:14px; text-align:center;
  box-shadow:0 3px 0 #00000010;
}
.ch-emoji{ font-size:52px; line-height:1.1; }
.ch-title{ font-size:21px; font-weight:900; }
.ch-comp{ font-size:14px; color:#8a776a; font-weight:700; margin-bottom:8px; }
.ch-keys{ display:flex; gap:3px; justify-content:center; margin:10px 0; height:34px; }
.ch-key{ width:11px; border-radius:0 0 4px 4px; background:#e7dccd; transition:background .18s, transform .18s; }
.ch-key.lit{ background:#f4c430; transform:scaleY(1.14); }
.ch-time{ display:flex; justify-content:space-between; font-size:13px; font-weight:800; color:#8a776a; margin-top:4px; }
.ch-about{ font-size:14px; line-height:1.5; margin:10px 0 4px; }
.cq-stage{ text-align:center; font-size:80px; margin:10px 0; }
.music-btn.on{ background:#453733; color:#fff; }

/* ---------- table spy ---------- */
.ts-card{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:430px; margin:0 auto; }
.ts-cell{
  aspect-ratio:1; border-radius:16px; background:#fff; padding:6px 4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  box-shadow:0 3px 0 #00000010; position:relative;
}
.ts-cell .ts-e{ font-size:30px; line-height:1; }
.ts-cell .ts-t{ font-size:11px; font-weight:800; line-height:1.2; text-align:center; color:#6b5b4d; }
.ts-cell.got{ background:#d9f2e3; }
.ts-cell.got::after{
  content:'✓'; position:absolute; top:4px; right:7px;
  font-size:16px; font-weight:900; color:#3f9455;
}
.ts-cell.inline{ box-shadow:0 0 0 3px #f4c430 inset, 0 3px 0 #00000010; }
.ts-spy{
  background:#fff; border-radius:24px; padding:24px 16px; text-align:center;
  box-shadow:0 3px 0 #00000010; margin-bottom:12px;
}
.ts-spy-lead{ font-size:15px; color:#8a776a; font-weight:700; }
.ts-spy-e{ font-size:76px; line-height:1.2; }
.ts-spy-t{ font-size:26px; font-weight:900; }

/* ---------- story room ---------- */
.ad-list,.fi-list{ display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:560px){ .ad-list,.fi-list{ grid-template-columns:1fr 1fr; } }
.ad-card{
  display:grid; grid-template-columns:auto 1fr; gap:2px 12px; text-align:left;
  background:#fff; border-radius:20px; padding:14px 16px; box-shadow:0 3px 0 #00000010;
}
.ad-card:active{ transform:scale(.98); }
.ad-e{ grid-row:1/4; font-size:38px; align-self:center; }
.ad-t{ font-weight:800; font-size:17px; }
.ad-b{ font-size:14px; color:#6b5b4d; line-height:1.4; }
.ad-m{ font-size:12px; font-weight:700; color:#a08c7d; margin-top:2px; }
.ad-head{ display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:15px; color:#8a776a; margin-bottom:8px; }
.ad-step{ background:#fff; border-radius:999px; padding:3px 11px; font-size:13px; }
.ad-text{
  background:#fff; border-radius:20px; padding:18px 20px; box-shadow:0 3px 0 #00000010;
  font-size:17px; line-height:1.65;
}
.ad-text p{ margin:0 0 12px; }
.ad-text p:last-child{ margin-bottom:0; }
.ad-end{
  background:#fff8e8; border-radius:16px; padding:14px; margin-top:12px;
  text-align:center; font-weight:900; font-size:18px;
}
.ad-choices{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.ad-choices .big-btn{ text-align:left; line-height:1.35; }
.fi-card{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; text-align:left;
  background:#fff; border-radius:18px; padding:13px 16px; box-shadow:0 3px 0 #00000010;
}
.fi-e{ font-size:30px; }
.fi-t{ font-weight:800; font-size:16px; }
.fi-n{ font-size:12px; font-weight:800; color:#b5a292; }
.fi-head{ text-align:center; font-weight:900; font-size:19px; margin-bottom:8px; }
.fi-ask{ text-align:center; font-size:19px; line-height:1.5; margin:14px 0; }
.fi-ask b{ font-size:24px; }
.fi-input{
  display:block; width:min(92%,340px); margin:0 auto 14px; padding:14px 16px;
  font-size:20px; font-weight:700; text-align:center; font-family:inherit;
  border:3px solid #efe5d8; border-radius:16px; background:#fff; color:#453733;
}
.fi-input:focus{ outline:none; border-color:#57b46a; }
.fi-story{
  background:#fff; border-radius:20px; padding:18px 20px; box-shadow:0 3px 0 #00000010;
  font-size:17px; line-height:1.7; white-space:pre-line;
}
.fi-story p{ margin:0 0 12px; }

/* ---------- globe detective ---------- */
.gd-bar{ display:flex; justify-content:space-between; font-weight:800; font-size:14px; color:#8a776a; padding:0 4px 6px; }
.gd-worth{ text-align:center; font-size:16px; font-weight:700; color:#6b5b4d; margin-bottom:10px; }
.gd-worth b{ font-size:20px; color:#453733; }
.gd-clues{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.gd-clue{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff; border-radius:16px; padding:13px 15px; box-shadow:0 3px 0 #00000010;
  font-size:16px; line-height:1.5;
}
.gd-num{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:#453733; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900;
}
.gd-msg{ text-align:center; font-size:17px; font-weight:700; margin-top:12px; line-height:1.5; }
.gd-all{ text-align:left; font-size:14px; font-weight:600; color:#6b5b4d; margin-top:10px; line-height:1.7; }
.gd-final{ background:#fff; border-radius:22px; padding:26px 18px; text-align:center; box-shadow:0 3px 0 #00000010; }
.gd-final-e{ font-size:64px; line-height:1.1; }
.gd-final-s{ font-size:40px; font-weight:900; }
.gd-final-t{ font-size:16px; color:#6b5b4d; margin:8px 0 14px; line-height:1.5; }

/* ================= Grown-Up Games ================= */
/* --- Sudoku 9x9 --- */
.s9-wrap{ display:flex; justify-content:center; }
.s9-grid{
  display:grid; grid-template-columns:repeat(9,1fr);
  width:min(96vw,430px); aspect-ratio:1; border:3px solid #6b5b4d; border-radius:8px; overflow:hidden;
}
.s9-cell{
  background:#fff; border:1px solid #e2d9cc; font-size:min(4.6vw,21px); font-weight:800; color:#4a90d9;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.s9-cell.given{ color:#3d3733; background:#faf5ec; }
.s9-cell.peer{ background:#f2f6fb; }
.s9-cell.given.peer{ background:#f3efe4; }
.s9-cell.same{ background:#dbeafe; }
.s9-cell.sel{ background:#bfdbfe; }
.s9-cell.rb{ border-right:2.5px solid #6b5b4d; }
.s9-cell.bb{ border-bottom:2.5px solid #6b5b4d; }
.s9-notes{ font-size:min(2.4vw,10px); color:#a08c7d; letter-spacing:1px; font-weight:700; }
.s9-pad{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; max-width:340px; margin:12px auto; }

/* --- Minesweeper --- */
.ms-wrap{ display:flex; justify-content:center; overflow-x:auto; }
.ms-grid{ display:grid; gap:2px; width:min(96vw,440px); }
.ms-cell{
  aspect-ratio:1; background:#cbb9a4; border-radius:4px; font-weight:900;
  font-size:min(3.6vw,16px); display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow:inset -2px -2px 0 #00000018, inset 2px 2px 0 #ffffff40;
}
.ms-cell.open{ background:#efe6d8; box-shadow:none; }
.ms-cell.boom{ background:#e2574c; }
.ms-cell[data-n="1"]{ color:#2563eb; } .ms-cell[data-n="2"]{ color:#15803d; }
.ms-cell[data-n="3"]{ color:#dc2626; } .ms-cell[data-n="4"]{ color:#6d28d9; }
.ms-cell[data-n="5"]{ color:#9a3412; } .ms-cell[data-n="6"]{ color:#0e7490; }
.ms-cell[data-n="7"]{ color:#3d3733; } .ms-cell[data-n="8"]{ color:#78716c; }

/* --- Solitaire --- */
.so-top{ display:flex; gap:6px; align-items:flex-start; margin-bottom:10px; }
.so-spacer{ flex:1; }
.so-found{ display:flex; gap:4px; }
.so-tabs{ display:flex; gap:5px; align-items:flex-start; }
.so-col{ flex:1; display:flex; flex-direction:column; min-height:120px; }
.so-card{
  width:min(12.4vw,54px); aspect-ratio:5/7; border-radius:6px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:900; box-shadow:0 1px 2px #00000028; flex-shrink:0;
}
.so-card.up{ background:#fff; border:1px solid #d8ccbe; }
.so-card.down{ background:repeating-linear-gradient(45deg,#5a6f9e 0 5px,#48597f 5px 10px); border:1px solid #3d4a6b; }
.so-card.empty{ background:#00000010; border:1.5px dashed #b9aa9a; color:#a08c7d; align-items:center; justify-content:center; font-size:18px; }
.so-card.r{ color:#d13b32; } .so-card.b{ color:#3d3733; }
.so-card.sel{ box-shadow:0 0 0 3px #f4c430, 0 1px 2px #00000028; }
.so-r{ font-size:min(3.4vw,15px); line-height:1; }
.so-s{ font-size:min(4vw,18px); line-height:1; }

/* --- Nonogram --- */
.ng-wrap{ display:flex; justify-content:center; overflow-x:auto; }
.ng-grid{ display:grid; gap:1px; width:min(96vw,420px); }
.ng-blank{ background:transparent; }
.ng-clue{
  display:flex; align-items:center; justify-content:center;
  font-size:min(2.8vw,12px); font-weight:800; color:#79695c; background:#f3ece0; border-radius:3px;
}
.ng-cell{ aspect-ratio:1; background:#fff; border:1px solid #e2d9cc; border-radius:2px; padding:0; font-size:11px; color:#b9aa9a; }
.ng-cell.on{ background:#453733; }
.ng-cell.rb{ border-right:2px solid #a08c7d; }
.ng-cell.bb{ border-bottom:2px solid #a08c7d; }

/* --- Cryptogram --- */
.cg-text{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:14px 0; }
.cg-word{ display:flex; gap:2px; }
.cg-ch{
  display:flex; flex-direction:column; align-items:center; background:none; padding:0 1px;
}
.cg-ch.sel .cg-guess{ background:#f4c430; }
.cg-guess{
  min-width:20px; height:26px; line-height:26px; font-size:17px; font-weight:900;
  border-bottom:2px solid #a08c7d; background:#fff; border-radius:3px 3px 0 0;
}
.cg-code{ font-size:10px; font-weight:800; color:#a08c7d; }
.cg-pad{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; max-width:420px; margin:0 auto; }
.cg-key{ width:30px; height:36px; border-radius:7px; background:#fff; font-weight:900; font-size:14px; box-shadow:0 2px 0 #00000012; }
.cg-key.used{ background:#e7dccd; color:#a08c7d; }

/* --- 24 game --- */
.g24-nums{ display:flex; gap:10px; justify-content:center; margin:18px 0; flex-wrap:wrap; }
.g24-num{
  width:70px; height:88px; border-radius:14px; background:#fff; font-size:26px; font-weight:900;
  box-shadow:0 3px 0 #00000014;
}
.g24-num.sel{ background:#f4c430; transform:translateY(-6px); }
.g24-ops{ display:flex; gap:10px; justify-content:center; }
.g24-op{ width:56px; height:56px; border-radius:14px; background:#fff; font-size:24px; font-weight:900; box-shadow:0 3px 0 #00000014; }
.g24-op.sel{ background:#453733; color:#fff; }

/* --- Word search --- */
.ws-wrap{ display:flex; justify-content:center; }
.ws-grid{ display:grid; gap:1px; width:min(96vw,420px); touch-action:none; }
.ws-cell{
  aspect-ratio:1; background:#fff; border-radius:3px; font-size:min(3.2vw,14px);
  font-weight:800; padding:0; color:#4a3f39;
}
.ws-cell.found{ background:#d9f2e3; color:#2f7d4f; }
.ws-cell.pick{ background:#f4c430; }
.ws-list{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px; }
.ws-word{ background:#fff; border-radius:999px; padding:5px 11px; font-size:13px; font-weight:800; box-shadow:0 2px 0 #00000010; }
.ws-word.done{ background:#d9f2e3; text-decoration:line-through; color:#7a9c88; }

/* --- Set --- */
.set-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:440px; margin:0 auto; }
.set-card{
  aspect-ratio:3/4; background:#fff; border-radius:12px; box-shadow:0 2px 0 #00000012;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.set-card.sel{ box-shadow:0 0 0 3px #f4c430 inset, 0 2px 0 #00000012; }
.set-syms{ display:flex; flex-direction:column; gap:2px; font-size:min(5.5vw,24px); line-height:1; }

/* --- Peg solitaire --- */
.pg-wrap{ display:flex; justify-content:center; }
.pg-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; width:min(88vw,360px); }
.pg-void{ background:transparent; }
.pg-hole{ aspect-ratio:1; border-radius:50%; background:#e7dccd; box-shadow:inset 0 2px 4px #00000020; padding:0; }
.pg-hole.peg{ background:radial-gradient(circle at 34% 30%, #f0a878, #b5651d); box-shadow:0 2px 3px #00000030; }
.pg-hole.sel{ box-shadow:0 0 0 3px #f4c430; }
.pg-hole.target{ background:#d9f2e3; box-shadow:inset 0 0 0 2px #57b46a; }

/* --- Dice box --- */
.db-dice{ display:flex; gap:8px; justify-content:center; margin:14px 0; }
.db-die{
  width:58px; height:58px; border-radius:12px; background:#fff; font-size:38px; line-height:1;
  box-shadow:0 3px 0 #00000014; padding:0;
}
.db-die.held{ background:#f4c430; }
.db-sheet{ max-width:420px; margin:14px auto 0; display:flex; flex-direction:column; gap:4px; }
.db-row{
  display:flex; justify-content:space-between; align-items:center;
  background:#fff; border-radius:10px; padding:9px 14px; font-weight:700; font-size:15px;
  box-shadow:0 2px 0 #00000010;
}
.db-row.taken{ background:#efe5d8; color:#8a776a; }
.db-val{ font-weight:900; }

/* ================= Two Grown-Ups ================= */
.ch-wrap{ display:flex; justify-content:center; }
.ch-board{
  display:grid; grid-template-columns:repeat(8,1fr);
  width:min(96vw,440px); aspect-ratio:1; border-radius:8px; overflow:hidden;
  box-shadow:0 3px 0 #00000018;
}
.ch-sq{ display:flex; align-items:center; justify-content:center; padding:0; position:relative; }
.ch-sq.light{ background:#f0e2cb; } .ch-sq.dark{ background:#b58863; }
.ch-sq.sel{ box-shadow:inset 0 0 0 3px #f4c430; }
.ch-sq.move::after{ content:''; width:26%; height:26%; border-radius:50%; background:#00000038; }
.ch-sq.cap{ box-shadow:inset 0 0 0 3px #e2574c; }
.ch-p{ font-size:min(9vw,40px); line-height:1; }
.ch-p.wp{ color:#fff; text-shadow:0 0 2px #000, 0 1px 2px #0006; }
.ch-p.bp{ color:#2b2b2b; text-shadow:0 0 1px #fff8; }
.ch-taken{ min-height:22px; text-align:center; font-size:19px; letter-spacing:-2px; color:#8a776a; }
.ck-p{
  width:74%; height:74%; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:min(4.4vw,20px); color:#f4c430;
}
.ck-p.r{ background:radial-gradient(circle at 34% 30%, #f2887e, #c0392b); }
.ck-p.b{ background:radial-gradient(circle at 34% 30%, #6b6b6b, #222); }

/* Connect four */
.c4-board{ display:grid; gap:6px; width:min(94vw,420px); margin:0 auto; background:#4a90d9; padding:8px; border-radius:14px; }
.c4-cell{ aspect-ratio:1; border-radius:50%; background:#fdf6ec; padding:0; }
.c4-cell.r{ background:radial-gradient(circle at 34% 30%, #f2887e, #d13b32); }
.c4-cell.y{ background:radial-gradient(circle at 34% 30%, #ffe9a3, #f0c419); }
.c4-cell.win{ box-shadow:0 0 0 3px #57b46a; }

/* Reversi */
.rv-board{
  display:grid; grid-template-columns:repeat(8,1fr); gap:2px;
  width:min(94vw,420px); aspect-ratio:1; background:#2f7d4f; padding:4px; border-radius:10px;
}
.rv-cell{ background:#3a9160; border-radius:3px; padding:0; display:flex; align-items:center; justify-content:center; }
.rv-cell.b::after,.rv-cell.w::after{ content:''; width:80%; height:80%; border-radius:50%; }
.rv-cell.b::after{ background:radial-gradient(circle at 34% 30%, #5a5a5a, #1b1b1b); }
.rv-cell.w::after{ background:radial-gradient(circle at 34% 30%, #fff, #d8d2c8); }
.rv-cell.hint::after{ content:''; width:22%; height:22%; border-radius:50%; background:#ffffff66; }

/* Gomoku */
.go-wrap{ display:flex; justify-content:center; }
.go-board{ display:grid; gap:1px; width:min(96vw,420px); background:#c8a06a; padding:4px; border-radius:8px; }
.go-cell{ aspect-ratio:1; background:#e0b87e; padding:0; display:flex; align-items:center; justify-content:center; border-radius:2px; }
.go-cell.b::after,.go-cell.w::after{ content:''; width:82%; height:82%; border-radius:50%; }
.go-cell.b::after{ background:radial-gradient(circle at 34% 30%, #555, #111); }
.go-cell.w::after{ background:radial-gradient(circle at 34% 30%, #fff, #ddd); }
.go-cell.win{ background:#f4c430; }

/* Ultimate tic-tac-toe */
.ut-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:min(94vw,420px); margin:0 auto; }
.ut-sub{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#efe5d8; padding:3px; border-radius:8px; aspect-ratio:1; position:relative; }
.ut-sub.active{ background:#f4c430; }
.ut-sub.done{ display:flex; align-items:center; justify-content:center; }
.ut-sub.done.x{ background:#ffe3e0; } .ut-sub.done.o{ background:#dbeafe; }
.ut-cell{ background:#fff; border-radius:3px; font-size:min(4vw,17px); font-weight:900; padding:0; }
.ut-cell.x{ color:#e2574c; } .ut-cell.o{ color:#4a90d9; }
.ut-big{ font-size:min(14vw,60px); font-weight:900; }

/* Dots and boxes */
.dt-wrap{ display:flex; justify-content:center; }
.dt-grid{ display:grid; align-items:center; justify-items:center; }
.dt-dot{ width:9px; height:9px; border-radius:50%; background:#6b5b4d; }
.dt-h{ width:min(9vw,40px); height:9px; border-radius:5px; background:#e7dccd; }
.dt-v{ width:9px; height:min(9vw,40px); border-radius:5px; background:#e7dccd; }
.dt-h.on{ background:#6b5b4d; } .dt-v.on{ background:#6b5b4d; }
.dt-box{ width:min(9vw,40px); height:min(9vw,40px); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; color:#fff; }
.dt-box.p0{ background:#e2574c; } .dt-box.p1{ background:#4a90d9; }

/* Battleship */
.bs-wrap{ display:flex; justify-content:center; }
.bs-grid{ display:grid; gap:2px; width:min(94vw,400px); }
.bs-cell{ aspect-ratio:1; background:#cfe6f7; border-radius:3px; padding:0; font-size:14px; }
.bs-cell.ship{ background:#6b7280; }
.bs-cell.hit{ background:#e2574c; }
.bs-cell.miss{ background:#a8bcc9; color:#fff; }
.bs-pass{ text-align:center; padding:40px 10px; }
.bs-pass-big{ font-size:70px; }
.bs-fleet{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px; }
.bs-ship{ background:#fff; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:800; box-shadow:0 2px 0 #00000010; }
.bs-ship.sunk{ background:#ffe3e0; text-decoration:line-through; color:#b06a63; }

/* Nine men's morris */
.mr-board{
  position:relative; width:min(88vw,380px); aspect-ratio:1; margin:10px auto;
  background:#f0e2cb; border-radius:10px; overflow:hidden;
}
.mr-lines{ position:absolute; inset:0; width:100%; height:100%; }
.mr-pt{
  position:absolute; width:11%; height:11%; transform:translate(-50%,-50%);
  border-radius:50%; background:#e7dccd; box-shadow:inset 0 1px 3px #00000030; padding:0; z-index:2;
}
.mr-pt.w{ background:radial-gradient(circle at 34% 30%, #fff, #ddd6c9); }
.mr-pt.b{ background:radial-gradient(circle at 34% 30%, #5a5a5a, #1b1b1b); }
.mr-pt.sel{ box-shadow:0 0 0 3px #f4c430; }
.mr-pt.move{ background:#d9f2e3; box-shadow:inset 0 0 0 2px #57b46a; }
.mr-pt.rem{ box-shadow:0 0 0 3px #e2574c; }

/* Trivia duel */
.td-arena{ display:flex; flex-direction:column; height:78vh; height:78dvh; gap:8px; }
.td-half{ flex:1; border-radius:20px; padding:12px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.td-half.p1{ background:#ffe9e6; }
.td-half.p2{ background:#e2efff; transform:rotate(180deg); }
.td-score{ position:absolute; top:8px; right:14px; font-weight:900; font-size:20px; background:#fff; border-radius:999px; padding:3px 12px; }
.td-q{ font-size:17px; font-weight:800; text-align:center; }
.td-opts{ display:flex; flex-direction:column; gap:7px; width:100%; max-width:320px; }
.td-opt{ background:#fff; border-radius:12px; padding:11px; font-size:15px; font-weight:800; box-shadow:0 2px 0 #00000012; }
.td-opt.right{ background:#d9f2e3; }
.td-opt.wrong{ background:#ffd9d4; }
.td-mid{ display:flex; align-items:center; justify-content:center; gap:10px; }
.td-final{ font-size:52px; font-weight:900; }

/* ---------- camera ---------- */
.cam-stage{ position:relative; display:flex; justify-content:center; }
#cbCanvas{
  width:min(92vw,420px); aspect-ratio:3/4; border-radius:20px; background:#2a2521;
  box-shadow:0 3px 0 #00000018; object-fit:cover;
}
#smCanvas{
  width:min(94vw,460px); aspect-ratio:4/3; border-radius:18px; background:#2a2521;
  box-shadow:0 3px 0 #00000018;
}
.cam-count{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-size:110px; font-weight:900; color:#fff; text-shadow:0 4px 18px #0009; pointer-events:none;
}
.cam-count.show{ display:flex; }
.cam-bar{ display:flex; align-items:center; justify-content:center; gap:14px; margin:12px 0 6px; }
.cam-shutter{
  width:74px; height:74px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px #453733, 0 3px 0 #00000018;
}
.cam-shutter:active{ transform:scale(.92); background:#f4c430; }
.cam-shot{ display:flex; justify-content:center; }
/* A finished picture: let iPhone's press-and-hold "Add to Photos" through
   here (the rest of the app blocks the callout and context menu). */
.cam-shot-hold, .cam-shot-hold img{
  -webkit-touch-callout:default;
  -webkit-user-select:auto; user-select:auto;
}
.cam-shot-img{
  width:min(88vw,380px); height:auto; border-radius:18px;
  box-shadow:0 4px 12px #00000026; background:#2a2521;
}
.cam-err{ text-align:center; padding:30px 16px; }
.cam-err-icon{ font-size:64px; }
.sm-film{ display:flex; gap:5px; overflow-x:auto; padding:10px 4px; justify-content:flex-start; }
.sm-thumb{ width:64px; height:48px; border-radius:5px; flex-shrink:0; box-shadow:0 2px 0 #00000014; background:#2a2521; }
.ef-status{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  background:#00000066; color:#fff; border-radius:999px; padding:6px 14px;
  font-size:14px; font-weight:800; pointer-events:none; white-space:nowrap;
}
.ef-status.found{ background:#57b46acc; }
#efCanvas{
  width:min(92vw,420px); aspect-ratio:3/4; border-radius:20px; background:#2a2521;
  box-shadow:0 3px 0 #00000018;
}

/* ---------- Highrise tower sim ---------- */
.tw-bar{
  display:flex; gap:6px; justify-content:space-between; flex-wrap:wrap;
  background:#fff; border-radius:14px; padding:9px 10px; margin-bottom:8px;
  box-shadow:0 2px 0 #00000010;
}
.tw-stat{ font-weight:800; font-size:13px; white-space:nowrap; }
.tw-tools{ display:flex; gap:6px; overflow-x:auto; padding:2px 2px 8px; }
.tw-tool{
  flex-shrink:0; width:66px; border-radius:12px; background:#fff; padding:7px 4px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  box-shadow:0 2px 0 #00000012;
}
.tw-tool.on{ background:#453733; color:#fff; }
.tw-tool.poor{ opacity:.45; }
.tw-te{ font-size:22px; line-height:1; }
.tw-tn{ font-size:10px; font-weight:800; }
.tw-tc{ font-size:9px; font-weight:700; opacity:.7; }
.tw-view{
  max-height:52vh; max-height:52dvh; overflow-y:auto; background:#bfe4ff;
  border-radius:14px; box-shadow:inset 0 2px 6px #00000012; line-height:0;
}
#twCanvas{ display:block; width:100%; height:auto; }
.tw-row{ display:flex; align-items:stretch; gap:3px; margin-bottom:2px; }
.tw-row.locked{ opacity:.35; }
.tw-floor{
  width:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:900; color:#6b5b4d;
}
.tw-cells{ flex:1; display:grid; grid-template-columns:repeat(10,1fr); gap:2px; }
.tw-cell{
  height:30px; background:#ffffff55; border-radius:3px; padding:0;
  border:1px dashed #ffffff99;
}
.tw-cell.ground{ background:#d8c9ae; border-color:#c2b195; }
.tw-cell.locked{ background:#00000010; border-style:solid; border-color:#00000012; }
.tw-unit{
  height:30px; border-radius:4px; background:#f3ece0; padding:0;
  display:flex; align-items:center; justify-content:center; gap:2px;
  box-shadow:inset 0 -2px 0 #00000012; position:relative;
}
.tw-unit.full{ background:#ffe9b8; }
.tw-unit.cut{ background:#ffd9d4; }
.tw-e{ font-size:16px; line-height:1; }
.tw-warn{ font-size:10px; color:#c0392b; font-weight:900; }
.tw-lift{
  height:30px; border-radius:3px; padding:0;
  background:repeating-linear-gradient(#8d9199 0 4px,#767a82 4px 8px);
  color:#fff; font-size:12px; font-weight:900;
}
.tw-lift.base{ background:#5a5f66; }
.tw-base{ text-align:center; color:#8a7a63; letter-spacing:-2px; font-size:12px; }
.tw-msg{ text-align:center; font-size:13px; font-weight:800; min-height:20px; margin:6px 0; color:#6b5b4d; }
.tw-help{ background:#fff; border-radius:18px; padding:18px; box-shadow:0 3px 0 #00000010; line-height:1.6; font-size:15px; }
.tw-help h3{ margin:0 0 10px; }
.tw-help p{ margin:0 0 10px; }
.tw-cell.dirt{ background:#6b5b4d33; border-color:#6b5b4d33; }
.tw-row.under .tw-floor{ color:#8a776a; }
.tw-unit.busy{ background:#ffe6c2; }
.tw-lift.over{ background:repeating-linear-gradient(#e2574c 0 4px,#b8443c 4px 8px); }

/* ---------- Metropolis city sim ---------- */
.ct-wrap{
  overflow:auto; -webkit-overflow-scrolling:touch;
  max-width:min(96vw,440px); max-height:min(96vw,440px);
  margin:0 auto; border-radius:12px; box-shadow:0 3px 0 #00000018;
  overscroll-behavior:contain;
}
.ct-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:1px;
  width:min(96vw,430px); aspect-ratio:1;
  background:#8fbf7a; padding:3px; border-radius:12px; box-shadow:inset 0 2px 6px #00000018;
}
.ct-tile{
  aspect-ratio:1; border-radius:2px; padding:0; font-size:min(3.4vw,15px);
  display:flex; align-items:center; justify-content:center; position:relative;
  background:#a8d48f; line-height:1;
}
.ct-tile.empty{ background:#a8d48f; }
.ct-tile.built{ background:#e6e0d4; }
.ct-tile.z{ background:#dfe8d6; color:#3d3733; }
.ct-tile.zr.lvl1{ background:#cfe6c0; } .ct-tile.zr.lvl2{ background:#a8d98f; } .ct-tile.zr.lvl3{ background:#7cc65e; }
.ct-tile.zc.lvl1{ background:#c9dcf2; } .ct-tile.zc.lvl2{ background:#9dc2ea; } .ct-tile.zc.lvl3{ background:#6ba4e0; }
.ct-tile.zi.lvl1{ background:#f2e3bd; } .ct-tile.zi.lvl2{ background:#e8cf8b; } .ct-tile.zi.lvl3{ background:#dbb75a; }
.ct-tile.nosvc{ box-shadow:inset 0 0 0 2px #e2574c; }
.ct-flag{ position:absolute; top:-2px; right:-1px; font-size:8px; font-style:normal; }
.ct-rci-row{ display:flex; gap:10px; align-items:flex-end; justify-content:center; margin:8px 0 2px; }
.ct-rci-l{ display:flex; flex-direction:column; align-items:center; font-size:11px; font-weight:900; color:#6b5b4d; }
.ct-rci{ width:16px; height:34px; background:#e7dccd; border-radius:3px; display:flex; align-items:flex-end; overflow:hidden; }
.ct-rci i{ width:100%; background:#57b46a; display:block; }
.ct-power{ font-size:12px; font-weight:800; color:#6b5b4d; align-self:center; }
.ct-slider{ width:100%; height:34px; }

/* ---------- Labyrinth 3D ---------- */
.m3-stage{
  position:relative; display:flex; justify-content:center; max-width:680px; margin:0 auto;
  border:1px solid #202b30; border-radius:9px; overflow:hidden; background:#182126;
}
#m3Canvas{
  width:100%; aspect-ratio:8/5; border:0 !important; border-radius:0 !important;
  background:#202c31; box-shadow:none !important; image-rendering:auto; filter:none !important;
}
#m3Mini{
  position:absolute; top:10px; right:10px;
  width:94px; height:94px; border:1px solid #d9d0be55 !important; border-radius:4px !important;
  box-shadow:0 2px 8px #0007 !important; filter:none !important;
}
.m3-look-hint{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  padding:5px 9px; border:1px solid #d9d0be3d; border-radius:4px;
  background:#101719b8; color:#e7decd; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; pointer-events:none; opacity:.78; transition:opacity .18s;
}
.m3-stage.looking .m3-look-hint{ opacity:0; }
.m3-msg{ text-align:center; font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:16px; margin:10px 0; min-height:24px; }
.m3-controls{
  display:flex; align-items:flex-end; justify-content:center; gap:18px; margin:4px auto 10px;
  padding:10px; max-width:520px; border:1px solid #aeb9bb; border-radius:9px; background:#d1d8d7;
}
.m3-control-block{ display:flex; flex-direction:column; gap:6px; }
.m3-control-label{ font-size:10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:#53646b; text-align:center; }
.m3-move-pad{ display:grid; grid-template-columns:repeat(3,64px); gap:6px; }
.m3-move-pad #m3F{ grid-column:1 / 4; width:100%; }
.m3-turn-pad{ display:grid; grid-template-columns:repeat(2,70px); gap:6px; }
.m3-controls .pad-btn{
  width:64px; height:54px; padding:4px 5px; border:1px solid #8f9da0; border-radius:6px;
  background:#f4f5ef; color:#34434a; box-shadow:0 2px 0 #4a585b20;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; touch-action:none;
}
.m3-controls .pad-btn b{ font-size:19px; line-height:1; font-weight:700; }
.m3-controls .pad-btn span{ font-size:9px; line-height:1; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.m3-controls .pad-btn:active{ transform:translateY(1px); background:#e2e7e2; box-shadow:none; }
@media(max-width:520px){
  .m3-controls{ gap:9px; padding:8px 6px; }
  .m3-move-pad{ grid-template-columns:repeat(3,54px); }
  .m3-turn-pad{ grid-template-columns:repeat(2,58px); }
  .m3-controls .pad-btn{ width:54px; height:52px; }
  .m3-turn-pad .pad-btn{ width:58px; }
  #m3Mini{ width:82px; height:82px; }
}

/* ---------- Flick Court ---------- */
.fk-hud{ display:flex; gap:10px; justify-content:center; margin-bottom:6px; }
.fk-side{
  background:#fff; border-radius:999px; padding:7px 15px; font-weight:900; font-size:15px;
  box-shadow:0 2px 0 #00000012; opacity:.55;
}
.fk-side.on{ opacity:1; box-shadow:0 0 0 2px #453733 inset, 0 2px 0 #00000012; }
.fk-side i{ font-style:normal; font-weight:700; font-size:11px; opacity:.65; }
.fk-wrap{ display:flex; justify-content:center; }
#fkCanvas{
  width:min(92vw,360px); aspect-ratio:320/440; border-radius:16px;
  background:#e8dcc4; box-shadow:0 3px 0 #00000018;
}
.fk-msg{ text-align:center; font-weight:800; font-size:14px; margin:8px 0; min-height:22px; }
.ct-tile.data{ border-radius:2px; font-size:10px; opacity:.95; }
.ct-views{ margin-top:2px; }
.tw-lift.exp{ background:repeating-linear-gradient(#f4c430 0 4px,#d9a91c 4px 8px); color:#453733; }
.m3-sub{ font-size:12px; font-weight:700; opacity:.75; }
.m3-code-box{
  font-size:40px; font-weight:900; letter-spacing:10px; text-align:center;
  background:#faf3e7; border-radius:14px; padding:14px; margin:10px 0;
}
.m3-entry{
  font-size:30px; font-weight:900; letter-spacing:9px; text-align:center;
  background:#fff; border-radius:12px; padding:9px; margin:8px auto; max-width:220px;
  box-shadow:inset 0 2px 5px #00000012;
}
.m3-pad2{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:10px 0; }
.m3-key{
  width:34px; height:38px; border-radius:8px; background:#fff; font-weight:900; font-size:15px;
  box-shadow:0 2px 0 #00000012;
}
.m3-key.wide{ width:56px; }
#ctCanvas{
  width:1024px; height:auto; display:block;
  background:#8fbf7a; touch-action:manipulation;
}
.ct-law{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:#f4efe6; border-radius:12px; padding:9px 12px; margin-bottom:6px;
  box-shadow:0 2px 0 #00000010;
}
.ct-law.on{ background:#d9f2e3; box-shadow:0 0 0 2px #57b46a inset, 0 2px 0 #00000010; }
.ct-law-e{ font-size:22px; }
.ct-law-t{ flex:1; display:flex; flex-direction:column; font-size:14px; }
.ct-law-t i{ font-style:normal; font-size:11px; opacity:.7; }
.ct-law-c{ font-size:12px; font-weight:800; opacity:.75; white-space:nowrap; }
.tw-vip{ background:#f4c430; border-radius:999px; padding:2px 8px; }
.fi-word{
  background:linear-gradient(#fde9a8,#f7d979);
  border-radius:6px; padding:0 5px; font-weight:800; color:#4a3a10;
  box-shadow:0 1px 0 #00000014;
}
.ct-news-item{ background:#f4efe6; border-radius:10px; padding:8px 12px; margin:6px 0; box-shadow:0 2px 0 #00000010; }
.ct-mission{ background:#f4c430; border-radius:999px; padding:2px 9px; }
.tw-tenant{ background:#f4efe6; border-radius:10px; padding:7px 11px; margin:5px 0; box-shadow:0 2px 0 #00000010; }
.tw-tenant i{ display:block; color:#6b6257; font-size:0.92em; margin-top:2px; }

/* ===== Big screens: let the app breathe on a Mac or iPad ===== */
@media (min-width: 900px){
  .stage, .gu-body{ max-width: 1000px; }

  /* the two sims get a proper desk-sized view */
  .ct-wrap{ max-width: min(92vw, 900px); max-height: min(76vh, 760px); }
  #ctCanvas{ width: 1280px; }
  .tw-view{ max-height: 74vh; max-width: min(92vw, 900px); margin: 0 auto; }

  /* card grids spread out instead of stacking in a narrow column */
  .fi-list, .ac-grid, .im-grid, .mem-grid{ max-width: 860px; }
  .ct-news-item, .tw-tenant{ max-width: 860px; margin-left:auto; margin-right:auto; }

  /* tool strips can show more at once */
  .tw-tools{ max-width: 940px; margin: 0 auto; }
  .chip-row{ flex-wrap: wrap; }
}
@media (min-width: 1400px){
  .ct-wrap{ max-width: min(90vw, 1180px); max-height: min(80vh, 900px); }
  .stage, .gu-body{ max-width: 1160px; }
}

/* ========================================================================== */
/* 2026 calm art direction — tactile rooms, quiet rewards, clear game chrome   */
/* ========================================================================== */
:root{
  --paper:#f5efe5;
  --paper-2:#ebe1d2;
  --ink:#352f2b;
  --muted:#766b61;
  --line:#d6c8b6;
  --white:#fffdf8;
  --clay:#ad6255;
  --ochre:#b4853e;
  --sage:#70886a;
  --blue:#637f91;
  --plum:#77657d;
  --slate:#394650;
  --room:#8b6b55;
  --room-soft:#e7d9ca;
  --room-deep:#57483e;
  --focus:#1f5b72;
}

html,body{ background:var(--paper); color:var(--ink); }
body{
  background:
    linear-gradient(90deg,#0000 0 49.7%,#6e554708 50%,#0000 50.3%) 0 0/72px 72px,
    var(--paper);
  letter-spacing:.005em;
}
button,input,select{ font:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid color-mix(in srgb,var(--focus) 72%,white);
  outline-offset:3px;
}
button{ transition:background-color .14s ease,border-color .14s ease,transform .1s ease; }
.screen{ background:transparent; }

/* Home: a real playroom shelf rather than a wall of candy-coloured app icons. */
.home-head{ max-width:1180px; margin:0 auto; padding-top:calc(18px + env(safe-area-inset-top)); }
.logo{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(27px,4vw,38px); font-weight:700; letter-spacing:-.035em;
}
.star-badge{
  background:#ede3d5; border:1px solid #d8c9b5; box-shadow:none;
  color:#665543; font-variant-numeric:tabular-nums;
}
.tagline{ max-width:1144px; margin:2px auto 13px; padding:0 18px; color:var(--muted); }
.home-mural{
  position:relative; overflow:hidden; max-width:1144px; height:clamp(150px,25vw,282px);
  margin:0 auto 16px; border:1px solid #cbbba7; border-radius:18px;
  background:#d7c6ae; box-shadow:0 5px 16px #4b3a2d12;
}
.home-mural img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 54%; filter:saturate(.72) contrast(.96); }
.mural-shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,#4936230a 0 55%,#2a1b1030 100%);
  box-shadow:inset 0 0 0 1px #fff8;
}
.home-nav{
  position:sticky; top:0; z-index:20; max-width:1180px; margin:0 auto 6px; padding:8px 14px 9px;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  border-bottom:1px solid #d8cbbb; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.game-search{ display:grid; grid-template-columns:auto minmax(120px,1fr); align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:800; }
.game-search input{
  min-width:0; width:100%; border:1px solid #cfc0ad; border-radius:10px; padding:9px 12px;
  background:#fffaf2; color:var(--ink); box-shadow:inset 0 1px 2px #4d3e3210;
}
.room-rail{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:8px 0 1px; }
.room-rail::-webkit-scrollbar{ display:none; }
.room-chip{
  flex:0 0 auto; padding:7px 11px; border:1px solid #cfc0ae; border-radius:8px;
  background:#eee4d6; color:#554b43; font-size:12px; font-weight:800; box-shadow:none;
}
.section{ max-width:1180px; margin:0 auto; padding:13px 14px 5px; scroll-margin-top:106px; }
.section h2{
  margin:8px 4px 10px; padding-bottom:7px; border-bottom:1px solid color-mix(in srgb,var(--room) 28%,#d9cdbc);
  font-family:Georgia,"Times New Roman",serif; font-size:clamp(19px,3vw,24px); color:var(--room-deep);
}
.section h2 span{ color:var(--muted); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.01em; }
.tiles{ gap:10px; }
.tile{
  --tile:var(--room);
  position:relative; isolation:isolate; min-height:144px; overflow:hidden; justify-content:flex-end;
  padding:15px 13px 13px; border:1px solid color-mix(in srgb,var(--tile) 35%,#d4c7b6);
  border-radius:13px; background:color-mix(in srgb,var(--tile) 10%,#fffaf2);
  box-shadow:0 2px 0 color-mix(in srgb,var(--tile) 16%,transparent); text-align:left; align-items:flex-start;
}
.tile::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px; z-index:-1;
  background:var(--tile); opacity:.66;
}
.tile:hover{ background:color-mix(in srgb,var(--tile) 15%,#fffaf2); }
.tile:active{ transform:translateY(1px); }
.tile-mark{
  position:absolute; top:10px; left:10px; z-index:2; display:grid; place-items:center;
  width:27px; height:27px; border:1px solid color-mix(in srgb,var(--tile) 48%,#8f8273);
  border-radius:7px; background:#fff9efdd; color:var(--tile); font:800 11px/1 Georgia,serif; letter-spacing:.02em;
}
.tile-picture{
  position:absolute; top:10px; left:50%; right:auto; z-index:1;
  display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--tile) 28%,#d7c9b7);
  background:color-mix(in srgb,var(--tile) 14%,#fffaf1);
  color:#302b27; font-size:42px; line-height:1; transform:translateX(-50%);
  filter:saturate(.88); text-shadow:0 1px 0 #fff;
}
.tile-name{ width:100%; font-family:Georgia,"Times New Roman",serif; font-size:16px; line-height:1.1; color:var(--room-deep); }
.tile-skill{ color:color-mix(in srgb,var(--tile) 52%,#514942); font-size:10px; letter-spacing:.075em; }

/* Young non-readers navigate by the full-colour picture; text remains secondary. */
.tile.room-little .tile-picture,.tile.room-together .tile-picture,.tile.room-story .tile-picture{
  background:color-mix(in srgb,var(--tile) 18%,#fffaf1);
  filter:saturate(1);
}
.sec-recent{ --room:#7b6f62; --room-deep:#514941; --room-soft:#e6ded4; }
.sec-versus,.room-versus{ --room:#9b6258; --room-deep:#62463f; --room-soft:#ead8d1; }
.sec-little,.room-little{ --room:#a2764c; --room-deep:#644f38; --room-soft:#ecdfc8; }
.sec-together,.room-together{ --room:#72846a; --room-deep:#465641; --room-soft:#dbe3d4; }
.sec-spy,.room-spy{ --room:#566570; --room-deep:#35434d; --room-soft:#d8e0e2; }
.sec-story,.room-story{ --room:#8b6958; --room-deep:#57443a; --room-soft:#e8dbcf; }
.sec-big,.room-big{ --room:#607f8c; --room-deep:#3e5661; --room-soft:#d6e2e5; }
.sec-teen,.room-teen{ --room:#766679; --room-deep:#514554; --room-soft:#e1d9e3; }
.sec-arcade,.room-arcade{ --room:#475b67; --room-deep:#2f3c45; --room-soft:#d2dce0; }
.sec-music,.room-music{ --room:#855b55; --room-deep:#593f3b; --room-soft:#e7d5cf; }
.sec-art,.room-art{ --room:#768064; --room-deep:#505743; --room-soft:#dde0d1; }
.sec-grownup,.room-grownup{ --room:#5e6468; --room-deep:#3f4549; --room-soft:#dadddf; }
.sec-duo,.room-duo{ --room:#795f49; --room-deep:#4d3e32; --room-soft:#e4d6c8; }
.tile.room-versus,.tile.room-little,.tile.room-together,.tile.room-spy,.tile.room-story,
.tile.room-big,.tile.room-teen,.tile.room-arcade,.tile.room-music,.tile.room-art,
.tile.room-grownup,.tile.room-duo{ --tile:var(--room); }

/* Every game inherits a recognisable room — paper, felt, slate, studio, or wood. */
#gamewrap{
  --game-bg:var(--paper); --panel:#fffaf2; --edge:#d7c8b6; --accent:var(--room);
  min-height:100dvh; background:var(--game-bg);
}
#gamewrap[data-room="versus"]{ --room:#9b6258; --room-deep:#62463f; --room-soft:#ead8d1; --game-bg:#f1e6dd; --panel:#fff9f2; --edge:#d9c3b8; }
#gamewrap[data-room="little"]{ --room:#a2764c; --room-deep:#644f38; --room-soft:#ecdfc8; --game-bg:#f1e8d8; --panel:#fffaf0; --edge:#dbc9aa; }
#gamewrap[data-room="together"]{ --room:#72846a; --room-deep:#465641; --room-soft:#dbe3d4; --game-bg:#e8eee3; --panel:#f9fbf4; --edge:#c6d1bf; }
#gamewrap[data-room="spy"]{ --room:#566570; --room-deep:#35434d; --room-soft:#d8e0e2; --game-bg:#dfe5e6; --panel:#f4f6f3; --edge:#b8c4c7; }
#gamewrap[data-room="story"]{ --room:#8b6958; --room-deep:#57443a; --room-soft:#e8dbcf; --game-bg:#eee4d7; --panel:#fffaf0; --edge:#d8c5ae; }
#gamewrap[data-room="big"]{ --room:#607f8c; --room-deep:#3e5661; --room-soft:#d6e2e5; --game-bg:#e4ecec; --panel:#f8fbf8; --edge:#c0d0d3; }
#gamewrap[data-room="teen"]{ --room:#766679; --room-deep:#514554; --room-soft:#e1d9e3; --game-bg:#eae4eb; --panel:#fbf8fa; --edge:#cec2d0; }
#gamewrap[data-room="arcade"]{ --room:#475b67; --room-deep:#2f3c45; --room-soft:#d2dce0; --game-bg:#dce3e5; --panel:#eef1ef; --edge:#aebdc2; }
#gamewrap[data-room="music"]{ --room:#855b55; --room-deep:#593f3b; --room-soft:#e7d5cf; --game-bg:#eee3df; --panel:#fffaf3; --edge:#d6c2b9; }
#gamewrap[data-room="art"]{ --room:#768064; --room-deep:#505743; --room-soft:#dde0d1; --game-bg:#e9e9dd; --panel:#fffdf5; --edge:#cad0ba; }
#gamewrap[data-room="grownup"]{ --room:#5e6468; --room-deep:#3f4549; --room-soft:#dadddf; --game-bg:#e7e6e2; --panel:#f8f7f2; --edge:#c9c9c4; }
#gamewrap[data-room="duo"]{ --room:#795f49; --room-deep:#4d3e32; --room-soft:#e4d6c8; --game-bg:#e9ded1; --panel:#f9f4eb; --edge:#cdbda9; }
.game-head{
  position:sticky; top:0; z-index:40; padding-top:calc(9px + env(safe-area-inset-top));
  background:color-mix(in srgb,var(--game-bg) 91%,transparent); border-bottom:1px solid var(--edge);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
#backBtn,#guBack,.score-pill{
  background:color-mix(in srgb,var(--panel) 90%,white); border:1px solid var(--edge); box-shadow:none;
}
.game-title{ font-family:Georgia,"Times New Roman",serif; font-size:18px; color:var(--room-deep); }
.stage{
  position:relative; max-width:680px; min-height:calc(100dvh - 62px); padding:15px 14px calc(30px + env(safe-area-inset-bottom));
}
.stage::before{
  content:""; position:absolute; inset:7px 7px auto; height:86px; z-index:-1; pointer-events:none;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); border-bottom:0; border-radius:17px 17px 0 0;
  opacity:.58;
}
.prompt{ color:var(--room-deep); font-family:Georgia,"Times New Roman",serif; letter-spacing:.005em; }
.big-btn,.chip,.score-pill,.gu-card,.count-field,.tw-help,.ct-news-item,.tw-tenant{
  border:1px solid var(--edge); box-shadow:0 2px 0 #4b3a2d0c;
}
.big-btn{ border-radius:12px; background:var(--panel); }
.big-btn.primary{ background:var(--room); color:#fff; border-color:color-mix(in srgb,var(--room) 80%,#342c28); }
.chip{ border-radius:8px; background:color-mix(in srgb,var(--room-soft) 68%,var(--panel)); color:var(--room-deep); }
.chip.on{ background:var(--room-deep); color:#fff; }
.dot{ width:11px; height:11px; background:#d6cec2; }
.dot.on{ background:var(--room); transform:none; }
.wrong,.shake{ animation-duration:.22s !important; }
.confetti-bit{ width:8px; height:8px; opacity:.52; }
@keyframes confall{ to{ transform:translateY(103vh) rotate(180deg); opacity:0; } }

/* Quiet, game-specific scenery. The controls stay primary; the illustration recedes. */
.stage-balloons .balloon-sky{
  border:1px solid #b9c9c8; background:
    linear-gradient(13deg,transparent 0 74%,#a8b9aa 74% 78%,transparent 78%) bottom/100% 36% no-repeat,
    linear-gradient(#dce8e7,#efe6cf 72%); box-shadow:inset 0 -34px 0 #a4b08d;
}
.balloon{ filter:saturate(.68); box-shadow:inset -7px -9px 0 #0000000c; }
.balloon::after{ background:#5d514536; }
.stage-numberblocks .nb-field{
  border:1px solid #cbbda9; background:
    linear-gradient(90deg,#0000 0 14%,#9f897128 14% 15%,#0000 15% 85%,#9f897128 85% 86%,#0000 86%),
    linear-gradient(#e9dfcd 72%,#ae9274 72% 75%,#d4c0a4 75%); box-shadow:none;
}
.nb-tray{ background:#eadcc8; border:1px solid #cbb99e; border-radius:12px; box-shadow:none; }
.nb-supply{ animation:none; }
.animal-grid{ padding:8px; border:1px solid #d4c4ac; border-radius:15px; background:#eadfcf; }
.animal-card{ border:1px solid #cdbda7; border-radius:12px; background:#fffaf0; box-shadow:0 2px 0 #6b513913; }
.animal-e{ filter:saturate(.7); }
.animal-card.bounce{ animation-duration:.28s; }
.stage-shapesorter{ padding-top:22px; background:radial-gradient(ellipse at 50% 38%,#c7b49a3b 0 34%,transparent 35%); }
.sorter-holes{ border-bottom:8px solid #b49778; padding-bottom:18px; }
.piece,.hole{ filter:saturate(.68); }
.stage-counting .count-field{ background:#f7f1df; border-color:#cfc19f; box-shadow:inset 0 -24px 0 #d4d8b8; }
.count-item{ filter:saturate(.72); }
.count-item.counted{ transform:scale(1.14); }
.stage-animals .animal-e,.stage-counting .count-item,.stage-abc .abc-e,
.stage-balloons .balloon,.stage-numberblocks .nb-num,.stage-shapes .piece{
  filter:saturate(.94) contrast(.99);
}
.abc-front,.abc-back{ border:1px solid #ccbda8; border-radius:15px; box-shadow:0 3px 0 #7d624d18; }
.abc-front{ color:#9e594d; }
.abc-card{ perspective:none; }
#ftCanvas,#mzCanvas{ border:1px solid var(--edge); border-radius:12px; box-shadow:none; background:#fffdf7; }

/* Group, story, and spy games use stagecraft and notebook materials. */
.room-together .prompt,.room-story .prompt{ max-width:620px; margin-left:auto; margin-right:auto; }
.room-together.stage::after{
  content:""; display:block; height:7px; margin:22px 8% 0; border-radius:50%; background:#64725e28;
}
.room-spy.stage{
  background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);
  background-size:24px 24px;
}
.room-spy .big-btn,.room-spy .chip{ border-color:#aab7bb; }
.room-story.stage{
  background-image:linear-gradient(90deg,transparent 0 42px,#a9675f21 42px 43px,transparent 43px),
                   repeating-linear-gradient(#0000 0 27px,#77624f13 27px 28px);
}
.room-story .big-btn{ background:#fffaf0; }

/* Board, brain, and arcade rooms read like durable games, not slot machines. */
.room-big .big-btn,.room-teen .big-btn{ background:#f8faf6; }
.room-big canvas,.room-teen canvas,.room-grownup canvas,.room-duo canvas{
  border:1px solid var(--edge); box-shadow:0 3px 0 #3d342c12 !important;
}
.room-arcade.stage{
  padding-top:18px; background:linear-gradient(90deg,#2f3c450b 1px,transparent 1px) 0 0/32px 32px;
}
.room-arcade canvas{
  border:5px solid #34434b !important; border-radius:10px !important;
  box-shadow:0 3px 0 #1f292e33 !important; filter:saturate(.78);
}
.room-arcade .score-pill{ background:#eef0eb; border-color:#9eacb0; }
.room-arcade .big-btn.primary{ background:#4d6671; }

/* Music feels like a recital room; art like an orderly studio. */
.room-music.stage{
  background-image:repeating-linear-gradient(#0000 0 28px,#76595110 28px 29px);
}
.room-music .big-btn,.room-music .chip{ border-color:#cfb8ad; }
.room-music button:active{ transform:translateY(1px); }
.room-art.stage{ background:linear-gradient(90deg,#0000 0 11px,#8f795a0c 12px,#0000 13px) 0 0/24px 24px; }
.room-art canvas{ border:8px solid #d8cab4 !important; outline:1px solid #aa9a82; box-shadow:0 3px 0 #5f4b3618 !important; }

/* Grown-up rooms use paper, ink, felt, and restrained data displays. */
.gu-body{ max-width:720px; }
.gu-card{ background:#f9f6ee; border-radius:12px; }
.gu-field{ display:grid; grid-template-columns:minmax(118px,.45fr) 1fr auto; align-items:center; gap:10px; margin:12px 0; font-size:13px; font-weight:800; }
.gu-field select{
  min-width:0; width:100%; padding:9px 10px; border:1px solid #c9bbaa; border-radius:8px;
  background:#fffdf8; color:var(--ink);
}
.gu-field input[type="range"]{ width:100%; accent-color:#637f72; }
.gu-field output{ min-width:3.4em; color:var(--muted); font-variant-numeric:tabular-nums; }
#guVoicePreview{ margin-top:4px; font-size:14px; }
.room-grownup.stage{ background-image:repeating-linear-gradient(#0000 0 30px,#343a3d0b 30px 31px); }
.room-duo.stage{ background:radial-gradient(ellipse at 50% 25%,#fff7e5 0,#e8dac8 70%); }

/* Highrise and Metropolis: original classic-management-sim presentation. */
.stage-highrise,.stage-metropolis{ max-width:1280px; color:#273136; }
.stage-highrise::before,.stage-metropolis::before{ display:none; }
.stage-highrise{
  --sim-metal:#384850; --sim-line:#9ba7aa; --sim-paper:#e9e5db;
  background:linear-gradient(90deg,#ffffff12 1px,transparent 1px) 0 0/20px 20px,#d8dddb;
}
.stage-metropolis{
  --sim-metal:#35464d; --sim-line:#91a1a1; --sim-paper:#e6e8e1;
  background:linear-gradient(135deg,#657b7010 25%,transparent 25%) 0 0/22px 22px,#d8dfdb;
}
.stage-highrise .tw-bar,.stage-metropolis .tw-bar{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:9px 11px; margin-bottom:8px;
  background:var(--sim-metal); color:#f7f1e5; border:1px solid #243137; border-radius:7px;
  box-shadow:0 2px 0 #18242a2b;
}
.stage-highrise .tw-stat,.stage-metropolis .tw-stat{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.sim-dashboard{
  display:grid; grid-template-columns:repeat(3,minmax(105px,1fr)); gap:7px; margin:7px 0 9px;
  padding:8px; border:1px solid var(--sim-line); border-radius:7px; background:var(--sim-paper);
}
.sim-meter{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; min-height:24px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.045em; }
.sim-meter b{ font-size:11px; font-variant-numeric:tabular-nums; }
.sim-meter>i{ height:7px; overflow:hidden; border:1px solid #859092; background:#c5cccc; }
.sim-meter>i>span{ display:block; height:100%; background:#678376; }
.sim-meter>i>span.warn{ background:#a47143; }
.sim-meter em{ font-style:normal; font-variant-numeric:tabular-nums; }
.sim-note{ display:flex; align-items:center; min-height:24px; padding:4px 7px; border-left:3px solid #657d72; background:#f5f2e9; font-size:10px; font-weight:800; }
.sim-issue{ display:flex; align-items:center; min-height:24px; padding:4px 7px; border-left:3px solid #657d72; background:#f5f2e9; font-size:10px; font-weight:800; }
.sim-issue.warn{ border-left-color:#a7634b; background:#eee0d5; }
.sim-inspector{
  min-height:50px; margin:8px 0; padding:8px 10px; border:1px solid var(--sim-line); border-radius:6px;
  background:#f3f0e7; color:#354047; font-size:12px; line-height:1.38;
}
.sim-inspector strong{ display:block; margin-bottom:2px; font-family:Georgia,serif; font-size:14px; color:#28353b; }
.sim-inspector small{ color:#617077; }
.sim-inspector b,.sim-inspector span{ display:block; }
.sim-control-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:6px 0; }
.sim-control-row .chip{ min-height:34px; padding:7px 11px; border-radius:5px; background:#ece8de; border-color:#aeb6b5; color:#344249; }
.stage-highrise .tw-tools,.stage-metropolis .tw-tools{
  gap:5px; max-width:none; padding:7px; border:1px solid var(--sim-line); border-radius:7px;
  background:#cfd5d2; scrollbar-color:#78878a #cfd5d2;
}
.stage-highrise .tw-tool,.stage-metropolis .tw-tool{
  flex:0 0 76px; min-height:60px; padding:7px 5px; border:1px solid #9eaaa9; border-radius:5px;
  background:#edf0eb; color:#344149; box-shadow:none;
}
.stage-highrise .tw-tool.on,.stage-metropolis .tw-tool.on{
  background:#40535b; color:#fffaf0; border-color:#26363d; box-shadow:inset 0 0 0 2px #fff3;
}
.stage-highrise .tw-tool.locked{ opacity:.48; background:#c6cbc8; border-style:dashed; }
.stage-highrise .tw-tool.locked.on{ color:#344149; box-shadow:inset 0 0 0 2px #8b9696; }
.sim-inspector-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.sim-inspector-actions .chip{ min-height:30px; padding:5px 8px; font-size:10px; }
.tw-type-mark{
  display:inline-grid; place-items:center; min-width:25px; height:20px; padding:0 4px;
  border:1px solid #9ca8a8; border-radius:3px; background:#e1e5e1; color:#34444a;
  font-size:10px; letter-spacing:.04em;
}
.stage-highrise .tw-te,.stage-metropolis .tw-te{ filter:saturate(.55); }
.tw-view{
  max-width:none; max-height:68dvh; border:5px solid #4a5a60; border-radius:5px;
  background:#b6c4c5; box-shadow:0 3px 0 #26343a2b,inset 0 0 0 1px #fff5;
}
.tw-row{ margin:0; gap:1px; }
.tw-floor{ background:#394a52; color:#f3eee3; border-right:1px solid #1e2b30; }
.tw-cells{ gap:1px; background:#4c5a5e; }
.tw-cell{ border-radius:0; border-color:#84918f; background:#d9d8cf; }
.tw-unit{ border-radius:1px; background:#e9e4d8; }
.tw-unit.full{ background:#d9c99e; }
.tw-unit.busy{ background:#d6b890; }
.tw-unit.cut{ background:#d6aaa2; }
.tw-lift{ border-radius:0; background:#78898d; }
.tw-lift.over{ background:repeating-linear-gradient(135deg,#9c574d 0 5px,#743e38 5px 10px); }
.tw-lift.exp{ background:repeating-linear-gradient(135deg,#b38a45 0 5px,#84632f 5px 10px); color:#fff; }
.tw-msg{ color:#38484f; }
.tw-help,.tw-tenant{ border-radius:5px; background:#f0ede4; border-color:#aeb5b2; }
.tw-vip,.ct-mission{ background:#c6a765; border:1px solid #9c7c3c; border-radius:3px; }

.ct-map-shell{ position:relative; margin:0 auto; }
.ct-wrap{
  max-width:none; max-height:68dvh; margin:0; border:5px solid #45575d; border-radius:5px;
  background:#728a7b; box-shadow:0 3px 0 #26343a2b,inset 0 0 0 1px #fff4;
}
#ctCanvas{ background:#71897a; filter:saturate(.74) contrast(.97); image-rendering:auto; transform-origin:top left; }
.ct-mini{
  position:absolute; right:10px; bottom:10px; z-index:8; width:150px; height:150px;
  border:3px solid #34444a; border-radius:3px; background:#d9ddd4; box-shadow:0 2px 8px #17222877;
}
.stage-metropolis .ct-rci-row{
  width:max-content; margin:7px 0; padding:5px 9px; border:1px solid #a8b2b0; border-radius:5px; background:#eceae2;
}
.stage-metropolis .ct-rci{ border:1px solid #9ca7a6; border-radius:1px; background:#c8cfcc; }
.stage-metropolis .ct-rci i{ background:#66816e; }
.stage-metropolis .ct-news-item,.stage-metropolis .ct-law{
  border-radius:5px; border-color:#aeb6b3; background:#f0ede4; box-shadow:none;
}
.stage-metropolis .ct-law.on{ background:#dce6dc; box-shadow:inset 4px 0 0 #627c6c; }

/* The few intentionally animated games keep only a low-key physical cue. */
.bubble{ animation-duration:2.8s; animation-name:calmbob; filter:saturate(.65); }
@keyframes calmbob{ from{ transform:translateY(0); } to{ transform:translateY(-5px); } }
.simon-pad.lit{ transform:scale(1.015); }
.tw-circle.held{ transform:translate(-50%,-50%) scale(1.035); box-shadow:0 3px 0 #00000018; }
.tr-star{ font-size:52px; animation-duration:.24s; filter:saturate(.62); }
.fd-stage{ background:linear-gradient(#4c475a,#6d6575); border:1px solid #4e4757; box-shadow:none; }
.fd-dancer{ animation-duration:1.2s; }
.fd-dancer:nth-child(2){ animation-duration:1.08s; }
.fd-dancer:nth-child(3){ animation-duration:1.32s; }
.fd-dancer:nth-child(4){ animation-duration:1.16s; }
@keyframes fddance{ from{ transform:translateY(0) rotate(-3deg); } to{ transform:translateY(-8px) rotate(3deg); } }
.fd-flash{ inset:auto 16px calc(24px + env(safe-area-inset-bottom)); border:1px solid #b7b0a5; border-radius:12px; padding:14px; font-size:32px; color:#3e4850; background:#f3f0e7ee; }

/* Library-wide finishing pass: each familiar game object gets a quieter material. */
.mem-front{
  background:repeating-linear-gradient(45deg,#607c87 0 6px,#6b8791 6px 12px);
  color:#e9eeeacc; border:1px solid #415d68; border-radius:10px;
}
.mem-back{ background:#fbfaf5; border:1px solid #bdcac9; border-radius:10px; }
.mem-card.done .mem-back{ background:#dce5d8; }
.simon-board{ padding:12px; background:#c8d1ce; border:1px solid #a5b2b2; border-radius:18px; gap:10px; }
.simon-pad{ border-radius:15px; box-shadow:inset 0 -3px 0 #0002; filter:saturate(.58); }
.bubble{
  background:#d9e5e4; border:1px solid #9fb3b5; color:#3e6574;
  box-shadow:inset 0 2px 0 #fff8,0 2px 0 #40545c14;
}
.bubble.popped{ transform:scale(1.14); }
.wb-pic{ filter:saturate(.65); }
.wb-slot{ border:1px solid #bdcaca; border-bottom:4px solid #7a9298; border-radius:8px; background:#f8fbf8; }
.wb-tile{ border:1px solid #9f845d; border-radius:8px; background:#cfb17b; color:#493d30; box-shadow:inset 0 1px 0 #fff6,0 2px 0 #765f3e25; }
.maze-pad .pad-btn,.pad-btn{ border:1px solid var(--edge); border-radius:10px; background:#f8faf6; box-shadow:0 2px 0 #3f4d5112; }
.slide-board{ padding:9px; border:1px solid #afbec0; border-radius:12px; background:#cbd6d5; gap:5px; }
.slide-tile{ border:1px solid #aeb5b3; border-radius:8px; box-shadow:0 2px 0 #3c4a4f1b; filter:saturate(.66); }
.rt-word{ color:#685a6e; font-family:Georgia,"Times New Roman",serif; }
.coin-field{ border-radius:12px; background:#587565; border:5px solid #8f7456; box-shadow:inset 0 0 0 1px #2d4c3b44; }
.coin{ filter:saturate(.48) contrast(.96); box-shadow:inset -2px -2px 0 #0002,0 1px 2px #0003; }
.timebar{ height:9px; border:1px solid #b8b2a7; border-radius:3px; background:#d8d2c7; }
.timebar div{ background:#738b72; }
.ss-entry,.key{ border:1px solid var(--edge); border-radius:9px; box-shadow:0 2px 0 #493c3110; }
.stroop-word{ font-family:Georgia,"Times New Roman",serif; }
.stroop-pad{ border-radius:10px; box-shadow:0 2px 0 #0002; filter:saturate(.62); }
.gq-emoji,.gq-result,.gd-final-e{ filter:saturate(.64); }
.sudoku,.s9-grid{ border-radius:5px; box-shadow:0 2px 0 #31383b14; }
.sd-cell.sel,.s9-cell.sel{ background:#cbdadd; }
.light{ border-radius:8px; }
.light.on{ background:#c7aa5e; box-shadow:inset 0 0 0 2px #9b7f3d; }
.art-tools{ padding:8px; border:1px solid #c0c5b1; border-radius:10px; background:#e0dfcf; }
.swatch{ width:34px; height:34px; border-radius:7px; box-shadow:inset 0 0 0 1px #0002; filter:saturate(.7); }
.swatch.on{ transform:none; border-color:#3f4939; }
.tool-btn{ border:1px solid #bec3af; border-radius:7px; box-shadow:0 2px 0 #4d503f10; }
.pixel-grid{ border-radius:5px; outline:1px solid #a4aa94; box-shadow:none; }

.mr-half,.qd-side,.tu-zone,.td-half{ border:1px solid #b9aea1; border-radius:12px; box-shadow:none; }
.mr-half.p1,.qd-side.s0,.td-half.p1{ background:#e7d5cf; }
.mr-half.p2,.qd-side.s1,.td-half.p2{ background:#d5e0e2; }
.mr-won{ box-shadow:inset 0 0 0 3px #987844; }
.mr-score,.td-score{ border:1px solid #c8bbae; border-radius:6px; box-shadow:none; }
.qd-light{ border:1px solid #c3b6a8; border-radius:10px; box-shadow:0 3px 8px #0002; }
.qd-light.go{ background:#687f6d; }
.hunt-card,.ac-card,.peek-card,.st-story,.tg-turnbar span:first-child{
  border:1px solid var(--edge); border-radius:12px; background:#fafbf5; box-shadow:0 2px 0 #3e4c3c12;
}
.hunt-e,.ac-e,.peek-card span,.bo-balloon{ filter:saturate(.62); }
.hunt-found,.tu-zone{ filter:saturate(.62); text-shadow:none; }
.bo-field,.tw-field,.tr-field{ border:1px solid #bfcbb9; border-radius:13px; box-shadow:none; background:#e6ece1; }
.tu-rope{ filter:saturate(.55); }

.nr-road{ border:5px solid #35434a; border-radius:9px; filter:saturate(.72); box-shadow:inset 0 0 18px #0004; }
.nr-item{ border:1px solid #9ba9ae; background:#dce2e2; box-shadow:0 2px 4px #0004; }
.m3-grid{ padding:7px; border:1px solid #abb7ba; border-radius:8px; background:#c5ced0; }
.m3-cell{ border-radius:6px; box-shadow:0 1px 0 #0002; filter:saturate(.62); }
.m3-cell.sel{ transform:none; box-shadow:inset 0 0 0 3px #475963; }
.fs-field{ border:5px solid #35434a; border-radius:9px; background:#414855; box-shadow:none; }
.fs-fruit{ filter:saturate(.65); }
.fs-fruit.cut,.fs-fruit.wrongcut,.fs-fruit.boom{ transform:scale(1.12); }
.ff-sky{ border:5px solid #35434a; border-radius:9px; filter:saturate(.68); box-shadow:none; }
.ff-slot{ filter:saturate(.68); }
.cr-field{ border:5px solid #35434a; border-radius:9px; filter:saturate(.68); box-shadow:none; }
.im-cell{ border:1px solid #aebbbe; border-radius:8px; box-shadow:0 2px 0 #26353c14; filter:saturate(.65); }
.im-cell.caught{ background:#d7e1d4; box-shadow:inset 0 0 0 3px #647b68; }
#abCv{ border:5px solid #35434a; border-radius:9px; box-shadow:none; filter:saturate(.72); }
.wd-board{ padding:7px; border:1px solid #aeb9bb; background:#cbd2d2; border-radius:7px; }
.wd-cell{ border-radius:3px; border-color:#aeb9bb; }
.wd-cell.green,.wd-key.green{ background:#687f6d; border-color:#687f6d; }
.wd-cell.yellow,.wd-key.yellow{ background:#a88749; border-color:#a88749; }
.wd-key{ border:1px solid #aeb9bb; border-radius:5px; box-shadow:0 1px 0 #0002; }
.pb-grid{ border:1px solid #9fadaf; border-radius:8px; background:#b9c4c5; box-shadow:none; }
.pb-cell{ border-radius:5px; filter:saturate(.55); }
.nt-board{ border:5px solid #35434a; border-radius:9px; box-shadow:none; }
.nt-tile{ border-radius:3px; background:#3b4144; }
.nt-tile.hit{ background:#637b68; transform:none; }

.ch-card,.ch-now,.ad-card,.ad-text,.fi-card,.fi-story,.gd-clue,.gd-final,.ts-cell,.ts-spy{
  border:1px solid var(--edge); border-radius:9px; box-shadow:0 2px 0 #45372c0e;
}
.ch-card-e,.ch-emoji,.ad-e,.fi-e,.ts-cell .ts-e,.ts-spy-e{ filter:saturate(.55); }
.ch-now{ background:#f7f0e4; }
.ch-key.lit{ background:#a88749; transform:scaleY(1.04); }
.ad-text,.fi-story{ background:#fffdf7; font-family:Georgia,"Times New Roman",serif; }
.ad-end{ border:1px solid #d4c0a6; border-radius:7px; background:#eee1cb; }
.fi-input{ border:1px solid #c9bba8; border-radius:7px; background:#fffdf7; }
.gd-num{ background:#53646d; }

.ms-cell{ border-radius:1px; background:#bdb9ae; box-shadow:inset -1px -1px 0 #0002,inset 1px 1px 0 #fff8; }
.ms-cell.open{ background:#ece9e1; }
.so-card.down{ background:repeating-linear-gradient(45deg,#65747a 0 4px,#526166 4px 8px); border-color:#3e4d52; }
.so-card.sel,.set-card.sel,.pg-hole.sel,.mr-pt.sel{ box-shadow:inset 0 0 0 3px #a88749; }
.ng-clue{ background:#deddd7; }
.cg-ch.sel .cg-guess,.g24-num.sel,.ws-cell.pick,.db-die.held{ background:#c8ae72; }
.cg-key,.g24-num,.g24-op,.ws-word,.set-card,.db-die,.db-row{ border:1px solid #c9c8c1; border-radius:6px; box-shadow:0 1px 0 #0001; }
.pg-grid{ padding:14px; border:7px solid #80674c; border-radius:50%; background:#3e654f; }
.pg-hole{ background:#2e4f3e; }
.pg-hole.peg{ filter:saturate(.56); }

.ch-board,.rv-board,.go-board,.c4-board,.ut-board,.bs-grid,.mr-board{ box-shadow:0 3px 0 #372b2216; }
.ch-sq.light{ background:#dfd2bd; }.ch-sq.dark{ background:#8d775f; }
.ch-sq.sel,.c4-cell.win,.go-cell.win{ box-shadow:inset 0 0 0 3px #a88749; }
.ck-p,.c4-cell.r,.c4-cell.y{ filter:saturate(.58); }
.c4-board{ background:#536b75; border:5px solid #3c4c53; border-radius:8px; }
.rv-board{ background:#365d48; border:5px solid #6e5940; border-radius:5px; }
.rv-cell{ background:#426c56; }
.go-board{ background:#9c7c51; border:5px solid #6f5739; border-radius:5px; }
.go-cell{ background:#c4a06a; }
.ut-sub{ border-radius:4px; background:#ddd7ca; }
.ut-sub.active{ background:#c4aa70; }
.dt-box.p0{ background:#9a6258; }.dt-box.p1{ background:#647f8c; }
.bs-cell{ border-radius:1px; background:#b9ced5; }
.bs-cell.hit{ background:#9b5e53; }
.mr-board{ border:7px solid #80674c; border-radius:5px; background:#ddceb7; }

/* Motion stays meaningful: cause/effect, never a constant demand for attention. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .confetti-bit{ display:none; }
}

/* Optional e-reader display. The stored game state and artwork stay unchanged. */
:root[data-eink="true"]{ color-scheme:light; }
:root[data-eink="true"] body,
:root[data-eink="true"] .screen,
:root[data-eink="true"] .stage{ background:#fff !important; color:#000 !important; background-image:none !important; }
:root[data-eink="true"] *,
:root[data-eink="true"] *::before,
:root[data-eink="true"] *::after{
  animation:none !important;
  transition:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  backdrop-filter:none !important;
  scroll-behavior:auto !important;
}
:root[data-eink="true"] #confettiLayer,
:root[data-eink="true"] .confetti-bit,
:root[data-eink="true"] .mural-shade{ display:none !important; }
:root[data-eink="true"] img,
:root[data-eink="true"] canvas,
:root[data-eink="true"] video{ filter:grayscale(1) contrast(1.15) !important; }
:root[data-eink="true"] button,
:root[data-eink="true"] input,
:root[data-eink="true"] select,
:root[data-eink="true"] .tile,
:root[data-eink="true"] .gu-card,
:root[data-eink="true"] .game-head,
:root[data-eink="true"] .home-head{
  background:#fff !important;
  color:#000 !important;
  border-color:#000 !important;
}
:root[data-eink="true"] button:active,
:root[data-eink="true"] button[aria-pressed="true"],
:root[data-eink="true"] .selected,
:root[data-eink="true"] .active:not(.screen){ background:#000 !important; color:#fff !important; }
@media (max-width:699px){
  .home-mural{ margin-left:14px; margin-right:14px; height:155px; border-radius:13px; }
  .game-search{ grid-template-columns:1fr; gap:5px; }
  .game-search span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .home-nav{ padding-top:7px; }
  .section{ scroll-margin-top:101px; }
  .tile{ min-height:136px; }
  .sim-dashboard{ grid-template-columns:1fr; }
  .sim-inspector{ font-size:11px; }
  .stage-highrise,.stage-metropolis{ padding-left:7px; padding-right:7px; }
  .stage-highrise .tw-tool,.stage-metropolis .tw-tool{ flex-basis:68px; }
  .tw-view,.ct-wrap{ max-height:62dvh; }
  .ct-mini{ width:104px; height:104px; right:7px; bottom:7px; }
  .gu-field{ grid-template-columns:1fr auto; }
  .gu-field label{ grid-column:1/-1; }
}
@media (min-width:700px){
  .home-nav{ display:grid; grid-template-columns:minmax(250px,360px) 1fr; gap:14px; align-items:center; }
  .room-rail{ padding-top:1px; }
  .tiles{ grid-template-columns:repeat(4,1fr); }
  .tile{ min-height:146px; }
}
@media (min-width:1000px){
  .tiles{ grid-template-columns:repeat(5,1fr); }
  .stage-highrise,.stage-metropolis{ padding-left:20px; padding-right:20px; }
  .stage-highrise .tw-tools,.stage-metropolis .tw-tools{ flex-wrap:wrap; overflow:visible; }
  .sim-dashboard{ grid-template-columns:repeat(4,minmax(140px,1fr)); }
}

/* ---------- iPad Pro ----------
   The activity shells stop at phone width on a tablet, which stranded a
   narrow strip in the middle of a 13" iPad Pro. Give them the tablet's
   landscape width; the tile grid already widens to four columns at 700px. */
@media (min-width:900px){
  .stage, .gu-body{ max-width:1366px; }
}

/* ===== Number Blocks celebrations ===== */
/* The quiet house style keeps confetti small; these moments are the exception. */
.confetti-bit.confetti-big{
  width:15px; height:22px; opacity:.95;
  box-shadow:0 1px 3px #0000002e;
}
/* a tower taking a bow */
.nb-tower.nb-cheer{ animation:nbCheerHop .62s cubic-bezier(.3,1.5,.5,1) 2; z-index:6; }
@keyframes nbCheerHop{
  0%,100%{ transform:translateX(-50%) translateY(0) scale(1); }
  35%{ transform:translateX(-50%) translateY(-16px) scale(1.06); }
  60%{ transform:translateX(-50%) translateY(0) scale(.97); }
}
.nb-block.nb-pop{ animation:nbPop .5s ease-out both; }
@keyframes nbPop{
  0%{ transform:scale(1); filter:brightness(1); }
  40%{ transform:scale(1.16); filter:brightness(1.5) saturate(1.3); }
  100%{ transform:scale(1); filter:brightness(1); }
}
/* the ring that bursts out of a finished tower */
.nb-ring{
  position:absolute; bottom:8px; width:26px; height:26px; margin-left:-13px;
  border-radius:50%; border:4px solid #F4C430; pointer-events:none; z-index:5;
  animation:nbRing .85s ease-out forwards;
}
@keyframes nbRing{
  0%{ transform:scale(.3); opacity:.95; border-color:#F4C430; }
  70%{ opacity:.5; border-color:#57B46A; }
  100%{ transform:scale(7); opacity:0; border-color:#4A90D9; }
}
.nb-spark{
  position:absolute; bottom:26px; font-size:26px; pointer-events:none; z-index:7;
  animation:nbSpark 1.2s ease-out forwards;
}
@keyframes nbSpark{
  0%{ transform:translateY(0) scale(.5); opacity:0; }
  25%{ opacity:1; transform:translateY(-26px) scale(1.15); }
  100%{ transform:translateY(-96px) scale(.85) rotate(22deg); opacity:0; }
}
/* every shelf full */
.nb-perfect{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; z-index:12; pointer-events:none;
  background:linear-gradient(#ffffff00,#ffffffbb 40%,#ffffffbb 60%,#ffffff00);
  animation:nbPerfectIn .5s ease-out both;
}
.nb-perfect span{
  font-size:clamp(26px,7vw,44px); font-weight:900; letter-spacing:.5px;
  background:linear-gradient(90deg,#E2504A,#F4862C,#F4C430,#57B46A,#4A90D9,#9B5DE5);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:nbShine 1.4s linear infinite;
  background-size:200% 100%;
}
.nb-perfect b{ font-size:clamp(34px,10vw,64px); color:#3d3733; line-height:1; }
.nb-perfect i{ font-size:15px; color:#6b6257; font-style:normal; }
@keyframes nbPerfectIn{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } }
@keyframes nbShine{ from{ background-position:0% 0; } to{ background-position:200% 0; } }
.nb-tower.nb-wave{ animation:nbWave .8s ease-in-out 3; }
@keyframes nbWave{
  0%,100%{ transform:translateX(-50%) translateY(0) rotate(0); }
  30%{ transform:translateX(-50%) translateY(-20px) rotate(-4deg); }
  65%{ transform:translateX(-50%) translateY(-6px) rotate(4deg); }
}
/* knock-them-over: bigger tumble, and the shelf shakes */
.nb-field.nb-quake{ animation:nbQuake .5s ease-in-out 2; }
@keyframes nbQuake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-5px,2px); }
  50%{ transform:translate(4px,-2px); }
  80%{ transform:translate(-3px,1px); }
}

/* ---------- Puppy Blocks ---------- */
/* Ali, 2026-09-04. The yard is a measured box, not decoration: the game reads
   its size to work out how big a stack can get and where the floor is. */
.pb-yard{
  position:relative; height:50vh; height:50dvh; border-radius:22px; overflow:hidden;
  background:linear-gradient(#d9f0fb 0%,#eef9fe 58%,#e9fbef 78%,#bfe9cd 100%);
  box-shadow:0 3px 0 #00000010; touch-action:none;
}
.pb-pup{
  position:absolute; cursor:grab; touch-action:none;
  filter:drop-shadow(0 5px 8px rgba(40,50,60,.22));
  transition:filter .15s;
}
.pb-pup.pb-drag{ cursor:grabbing; filter:drop-shadow(0 14px 20px rgba(40,50,60,.34)); z-index:3; }
.pb-pup.pb-near{ filter:drop-shadow(0 0 0 4px rgba(74,144,217,.6)) drop-shadow(0 9px 13px rgba(40,50,60,.28)); }
.pb-pup svg{ display:block; overflow:visible; pointer-events:none; }
.pb-pup.pb-pop{ animation:pbPop .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes pbPop{ 0%{transform:scale(.86)} 55%{transform:scale(1.1)} 100%{transform:scale(1)} }
.pb-pup.pb-speak{ animation:pbSpeak .5s ease; }
@keyframes pbSpeak{ 0%,100%{transform:translateY(0)} 35%{transform:translateY(-11px)} }
.stage-puppyblocks .pb-yard{ border:1px solid #00000012; }
@media (prefers-reduced-motion:reduce){
  .pb-pup,.pb-pup.pb-pop,.pb-pup.pb-speak{ animation:none; transition:none; }
}

/* ---------- Number Pups ---------- */
/* Ali, 2026-09-04. Sized for a small person on a tablet: huge targets, no
   hover-only affordances, and feedback that is warm rather than corrective. */
.np-ask{ display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0 14px; }
.np-askLabel{ font-size:22px; font-weight:600; opacity:.7; }
.np-askNum{
  font-size:54px; font-weight:700; line-height:1; min-width:1.4em; text-align:center;
  color:#4a90d9;
}
.np-row{ display:flex; gap:clamp(8px,2.5vw,22px); flex-wrap:wrap; justify-content:center; }
.np-pick{
  background:#fff; border:0; border-radius:18px; padding:14px 16px 12px; cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.13); font:inherit; transition:opacity .2s, transform .1s;
}
.np-pick:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.13); }
.np-pick:focus-visible{ outline:4px solid #f4c430; outline-offset:3px; }
.np-art{ display:block; height:clamp(96px,20vw,150px); }
.np-art svg{ width:100%; height:100%; overflow:visible; }
.np-name{ display:block; margin-top:8px; font-size:17px; font-weight:700; }

.np-no{ animation:npShake .45s ease; }
@keyframes npShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 45%{transform:translateX(8px)} 70%{transform:translateX(-5px)} }
.np-fade{ opacity:.32; }
.np-yes{ animation:npCheer .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes npCheer{ 0%{transform:scale(1)} 45%{transform:scale(1.12) translateY(-8px)} 100%{transform:scale(1)} }

/* the counted-out lighting: every cube past the count dims back */
.pup-cube{ transition:opacity .2s ease; }
.np-yes[data-lit="0"] .pup-cube{ opacity:.2 }
.np-yes[data-lit="1"] .pup-cube:nth-of-type(n+2){ opacity:.2 }
.np-yes[data-lit="2"] .pup-cube:nth-of-type(n+3){ opacity:.2 }
.np-yes[data-lit="3"] .pup-cube:nth-of-type(n+4){ opacity:.2 }
.np-yes[data-lit="4"] .pup-cube:nth-of-type(n+5){ opacity:.2 }
.np-yes[data-lit="5"] .pup-cube:nth-of-type(n+6){ opacity:.2 }
.np-yes[data-lit="6"] .pup-cube:nth-of-type(n+7){ opacity:.2 }
.np-yes[data-lit="7"] .pup-cube:nth-of-type(n+8){ opacity:.2 }
.np-yes[data-lit="8"] .pup-cube:nth-of-type(n+9){ opacity:.2 }
.np-yes[data-lit="9"] .pup-cube:nth-of-type(n+10){ opacity:.2 }

.np-count{ font-size:40px; font-weight:800; min-height:1.1em; line-height:1; color:#4a90d9; text-align:center; margin-top:10px; }
.np-dots{ display:flex; gap:7px; justify-content:center; margin-top:8px; }
.np-dots i{ width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,.15); }
.np-dots i.on{ background:#4a90d9; }

.np-end{ text-align:center; padding:22px 0; }
.np-endArt{ display:flex; gap:8px; justify-content:center; align-items:flex-end; margin-bottom:8px; }
.np-mini{ display:block; height:74px; }
.np-mini svg{ height:100%; width:auto; }
.np-big{ margin:6px 0 14px; font-size:28px; font-weight:800; }

@media (prefers-reduced-motion:reduce){
  .np-no,.np-yes{ animation:none; }
  .np-pick,.pup-cube{ transition:none; }
}