/* Zibby World: purple / pink / teal, chunky toy-like buttons. Tweak the variables to re-theme. */
:root {
  --purple: #8f5bff; --purple-d: #5a2fc9;
  --pink: #ff5fb3; --pink-d: #c92b84;
  --teal: #14d3c4; --teal-d: #0a9a95;
  --yellow: #ffd23f; --yellow-d: #e39a10;
  --green: #4ddc7a; --green-d: #1f9f4b;
  --ink: #2b1a5e;
  --b: clamp(64px, 6.4vmin, 76px);
  --slot: clamp(56px, 7vmin, 76px);
  --hb: calc(var(--slot) * 2.15 + 6px);
  --gap: clamp(8px, 1.2vmin, 12px);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c1240; touch-action: none; overscroll-behavior: none;
  font-family: "Baloo 2", "Fredoka", "Trebuchet MS", ui-rounded, system-ui, sans-serif; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  appearance: none; border: 4px solid #fff; border-radius: 26%; width: var(--b); height: var(--b);
  display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--b) * 0.56); line-height: 1;
  color: #fff; cursor: pointer; text-decoration: none; padding: 0;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28), 0 8px 18px rgba(30, 10, 80, 0.35);
  transition: transform 0.08s, filter 0.15s; position: relative; touch-action: manipulation;
}
.btn:active, .btn.down { transform: translateY(4px) scale(0.94); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }
.btn.big { width: calc(var(--b) * 1.3); height: calc(var(--b) * 1.3); font-size: calc(var(--b) * 0.74); }
.btn.on { filter: brightness(1.12) saturate(1.2); outline: 4px solid #fff7a8; }
.btn.off { filter: grayscale(0.85) brightness(0.9); }
.purple { background: linear-gradient(160deg, #b08bff, var(--purple) 55%, var(--purple-d)); }
.pink { background: linear-gradient(160deg, #ff9ad0, var(--pink) 55%, var(--pink-d)); }
.teal { background: linear-gradient(160deg, #6ff0e3, var(--teal) 55%, var(--teal-d)); }
.yellow { background: linear-gradient(160deg, #ffe98a, var(--yellow) 55%, var(--yellow-d)); }
.green { background: linear-gradient(160deg, #8cf2ac, var(--green) 55%, var(--green-d)); }
.btn.pulse { animation: pulse 0.9s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.45), 0 5px 0 rgba(0, 0, 0, 0.28); } }

/* ---------- HUD layout ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud .btn, #hud .parent-btn, .tb-tray, .tb-boxbtn { pointer-events: auto; }
.cluster { position: absolute; display: flex; gap: var(--gap); }
.cluster.tl { top: calc(var(--gap) + var(--safe-t)); left: calc(var(--gap) + var(--safe-l)); align-items: flex-start; }
.cluster.tools { display: none; } /* the holding bay: js/kidui.js moves its buttons into the four menus */
.cluster.tr { top: calc(var(--gap) + var(--safe-t)); right: calc(var(--gap) + var(--safe-r)); }
.cluster.br { right: calc(var(--gap) + var(--safe-r)); bottom: calc(var(--gap) + var(--safe-b)); display: grid; grid-template-columns: repeat(2, auto); justify-items: end; align-items: end; }
/* ---------- SVG icons (js/svgicons.js) ---------- */
.zi { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; pointer-events: none; fill: currentColor; overflow: visible; }
.btn .zi { filter: drop-shadow(0 2px 0 rgba(30, 10, 80, 0.28)); }
.btn { --zi-2: #3b1f7a; --zi-3: #ffe98a; }
.btn.purple { --zi-2: var(--purple-d); } .btn.pink { --zi-2: var(--pink-d); } .btn.teal { --zi-2: var(--teal-d); }
.btn.yellow { --zi-2: #b9791a; --zi-3: #fff; color: #fff; } .btn.green { --zi-2: var(--green-d); }
.zi-b { fill: var(--zi-2, #3b1f7a); } .zi-c { fill: var(--zi-3, #ffd23f); }
.zi-sb { stroke: var(--zi-2, #3b1f7a); } .zi-sc { stroke: var(--zi-3, #ffd23f); }
.zi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.zi-ink { color: var(--ink); --zi-2: var(--purple); }
.touch-only { display: none; }
body.touch .touch-only { display: inline-flex; }
.drive-only { display: none; }
body.driving .drive-only { display: inline-flex; }
.mount-only { display: none; }
body.mounted .mount-only, body.carried .mount-only { display: inline-flex; }
.train-only { display: none; }
body.on-train .train-only { display: inline-flex; }
#b-train.disabled { opacity: 0.35; filter: grayscale(1); pointer-events: none; }
/* crosshair: a soft sparkle-target, white with a dusky outline so it stays clear on any colour */
#crosshair { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); }
#crosshair::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(43, 26, 94, 0.5), inset 0 0 0 2px rgba(43, 26, 94, 0.35), 0 0 12px 2px rgba(255, 190, 240, 0.55); }
#crosshair::after { content: ""; position: absolute; inset: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6L12 22.5l-2.6-7.9L1.5 12l7.9-2.6z' fill='%23fff' stroke='%232b1a5e' stroke-opacity='.55' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: xhair 2.6s ease-in-out infinite; }
@keyframes xhair { 50% { transform: scale(1.18) rotate(18deg); } }

/* ---------- the Toy Box (js/toybox.js): curved tray, big raised middle item, fading neighbours ---------- */
#hotbar { pointer-events: none; position: absolute; left: 50%; bottom: calc(var(--gap) + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: flex-end; gap: calc(var(--slot) * 0.12);
  width: min(calc(var(--slot) * 9.8), calc(100vw - 2 * (var(--gap) + var(--safe-l)))); height: var(--hb); touch-action: none; }
.tb-tray { position: relative; flex: 1; min-width: 0; height: calc(var(--slot) * 1.5); touch-action: none; cursor: grab; }
.tb-tray:active { cursor: grabbing; }
.tb-hill { position: absolute; inset: 0; border-radius: 50% 50% calc(var(--slot) * 0.4) calc(var(--slot) * 0.4) / 62% 62% calc(var(--slot) * 0.4) calc(var(--slot) * 0.4);
  background: linear-gradient(180deg, rgba(168, 120, 255, 0.82), rgba(98, 58, 214, 0.9) 70%, rgba(80, 40, 190, 0.92)); border: 4px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 0 rgba(30, 10, 90, 0.28), 0 12px 24px rgba(30, 10, 80, 0.35), inset 0 6px 0 rgba(255, 255, 255, 0.28); backdrop-filter: blur(5px); pointer-events: none; }
.tb-shadow { position: absolute; left: 50%; bottom: calc(var(--slot) * 0.12); width: calc(var(--slot) * 1.5); height: calc(var(--slot) * 0.26); margin-left: calc(var(--slot) * -0.75); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(30, 10, 90, 0.5), rgba(30, 10, 90, 0)); pointer-events: none; }
.tb-item { position: absolute; left: 50%; bottom: calc(var(--slot) * 0.26); width: var(--slot); height: var(--slot); margin-left: calc(var(--slot) / -2); cursor: pointer; will-change: transform, opacity; }
.tb-face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 24%; background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22)); border: 3px solid rgba(255, 255, 255, 0.7); pointer-events: none; }
.tb-face img { width: 84%; height: 84%; image-rendering: pixelated; pointer-events: none; }
.tb-item.c .tb-face { background: linear-gradient(160deg, #fff, #ffe3f6); border-color: #fff; box-shadow: 0 0 0 4px var(--pink), 0 0 20px 6px rgba(255, 255, 255, 0.85), 0 6px 0 rgba(30, 10, 90, 0.25); }
.tb-item.boing .tb-face { animation: tbboing 0.45s ease-out; }
@keyframes tbboing { 30% { transform: rotate(-9deg) scale(1.08); } 60% { transform: rotate(7deg) scale(1.04); } }
#hotbar.tool .tb-item.c .tb-face { box-shadow: 0 0 0 4px var(--teal), 0 6px 0 rgba(30, 10, 90, 0.25); }
.tb-boxbtn { appearance: none; flex: none; width: calc(var(--slot) * 1.34); height: calc(var(--slot) * 1.34); padding: 0; margin-bottom: calc(var(--slot) * 0.02); border: 0; background: none; cursor: pointer; filter: drop-shadow(0 5px 0 rgba(30, 10, 90, 0.3)) drop-shadow(0 8px 12px rgba(30, 10, 80, 0.3)); touch-action: manipulation; transition: transform 0.12s; animation: tbbob 3.4s ease-in-out infinite; }
.tb-boxbtn:active { transform: translateY(3px) scale(0.94); }
.tb-boxbtn img { width: 100%; height: 100%; pointer-events: none; }
@keyframes tbbob { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-6deg) translateY(-3px); } 94% { transform: rotate(5deg); } }
.tod-sep { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, #d7c8ff, transparent); }
/* the open toy box palette */
.tbp { z-index: 21; }
.tb-wrap { position: relative; width: min(780px, 100%); max-height: 100%; display: flex; flex-direction: column; padding-top: calc(var(--b) * 0.8); }
.tb-lid { position: absolute; left: 7%; right: 7%; top: 0; height: calc(var(--b) * 1.35); clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(90deg, #8f5bff 0 28px, #a883ff 28px 56px); border-radius: 22px 22px 0 0; display: grid; place-items: center; filter: drop-shadow(0 4px 0 rgba(30, 10, 90, 0.3)); }
.tb-lid i { position: absolute; inset: 7px 7% 0; border: 4px solid rgba(255, 255, 255, 0.85); border-bottom: 0; border-radius: 16px 16px 0 0; clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); }
.tb-lid b { font-size: calc(var(--b) * 0.8); color: #ffe45e; text-shadow: 0 3px 0 rgba(120, 60, 0, 0.35), 0 0 14px rgba(255, 240, 150, 0.9); line-height: 1; }
.tb-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: calc(var(--b) * 0.55); padding: calc(var(--b) * 0.55) 16px 16px; border: 8px solid #fff; border-radius: 30px 30px 40px 40px;
  background: linear-gradient(180deg, #ffd9ee, #ffbfe3 60%, #ff9fd4); box-shadow: inset 0 0 0 6px #ff5fb3, 0 16px 40px rgba(20, 5, 70, 0.5), 0 8px 0 rgba(120, 30, 90, 0.35); }
.tb-body .close { position: absolute; top: calc(var(--b) * -0.38); right: -6px; width: max(56px, calc(var(--b) * 0.8)); height: max(56px, calc(var(--b) * 0.8)); font-size: calc(var(--b) * 0.45); z-index: 2; }
.tb-tabs { display: flex; justify-content: center; gap: clamp(6px, 1.6vmin, 14px); position: absolute; left: 0; right: 0; top: calc(var(--b) * -0.5); z-index: 1; pointer-events: none; }
.tb-tab { appearance: none; pointer-events: auto; width: calc(var(--b) * 0.92); height: calc(var(--b) * 0.92); border-radius: 50%; border: 4px solid #fff; background: linear-gradient(160deg, #c9b0ff, #8f5bff); font-size: calc(var(--b) * 0.5); line-height: 1; padding: 0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 5px 0 rgba(30, 10, 90, 0.3); touch-action: manipulation; transition: transform 0.12s; }
.tb-tab.sel { background: linear-gradient(160deg, #6ff0e3, #14d3c4); transform: translateY(-5px) scale(1.12); box-shadow: 0 8px 0 rgba(10, 100, 95, 0.35), 0 0 0 4px #ffe45e; }
.tb-grid { flex: 1; min-height: 0; overflow: auto; margin-top: calc(var(--b) * 0.35); padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(62px, 12vmin, 104px), 1fr)); gap: 10px; align-content: start; border-radius: 20px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 4px 10px rgba(120, 30, 90, 0.2); touch-action: pan-y; -webkit-overflow-scrolling: touch; max-height: calc(100vh - var(--b) * 4.2 - var(--safe-t) - var(--safe-b)); }
body.compact .tb-wrap { padding-top: calc(var(--b) * 0.7); }
@media (max-height: 460px) { .tb-lid { display: none; } .tb-wrap { padding-top: calc(var(--b) * 0.5); } .tb-body { margin-top: calc(var(--b) * 0.1); } .tb-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; max-height: calc(100vh - var(--b) * 3); } }
#tool-badge { position: absolute; left: 50%; bottom: calc(var(--b) * 1.4 + var(--gap) * 3 + var(--safe-b)); transform: translateX(-50%); font-size: calc(var(--b) * 0.7);
  background: #fff; border-radius: 50%; width: calc(var(--b) * 1.1); height: calc(var(--b) * 1.1); display: grid; place-items: center; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3); border: 4px solid var(--pink); }
#rings { position: absolute; top: calc(var(--gap) + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; gap: 5px; padding: 8px 12px; background: rgba(60, 30, 130, 0.5);
  border-radius: 20px; border: 3px solid rgba(255, 255, 255, 0.85); }
#rings i { width: clamp(12px, 2.4vmin, 22px); height: clamp(12px, 2.4vmin, 22px); border-radius: 50%; border: 4px solid rgba(255, 220, 90, 0.35); }
#rings i.f { border-color: #ffd23f; box-shadow: 0 0 8px #ffd23f; background: radial-gradient(circle, transparent 40%, rgba(255, 210, 60, 0.35) 41%); }
.parent-btn { position: absolute; right: calc(8px + var(--safe-r)); bottom: calc(8px + var(--safe-b)); width: 30px; height: 30px; font-size: 16px; opacity: 0.45; background: rgba(255, 255, 255, 0.25);
  border: 0; border-radius: 50%; padding: 0; display: none; }
body.touch .parent-btn { width: 56px; height: 56px; font-size: 24px; }
body.compact.touch .parent-btn { width: 48px; height: 48px; font-size: 22px; }
#title-parent { display: block; position: absolute; }
#debug { position: absolute; left: calc(10px + var(--safe-l)); bottom: calc(10px + var(--safe-b)); color: #fff; font: 12px/1.4 monospace; background: rgba(0, 0, 0, 0.55); padding: 6px 8px; border-radius: 8px; white-space: pre; }

/* touch helpers */
#joy-base, #joy-knob { position: fixed; display: none; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; }
#joy-base { width: 130px; height: 130px; background: rgba(255, 255, 255, 0.18); border: 4px solid rgba(255, 255, 255, 0.6); }
#joy-knob { width: 62px; height: 62px; background: radial-gradient(circle at 35% 30%, #fff, var(--teal)); border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
#hold-ring { position: fixed; display: none; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; pointer-events: none; z-index: 4; --p: 0deg;
  background: conic-gradient(var(--pink) var(--p), rgba(255, 255, 255, 0.15) 0);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 30; }
#flash.go { animation: flash 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); }
@keyframes flash { 0% { opacity: 0.35; } 100% { opacity: 0; } }

/* ---------- idea bubble ---------- */
.bubble { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 12; background: #fff; border: 6px solid var(--purple); border-radius: 48px; padding: 18px 28px 16px;
  box-shadow: 0 12px 30px rgba(30, 10, 80, 0.4); text-align: center; }
.bubble::after { content: ""; position: absolute; left: 14%; bottom: -26px; width: 28px; height: 28px; background: #fff; border: 6px solid var(--purple); border-top: 0; border-left: 0; border-radius: 0 0 14px 0; transform: rotate(45deg) skew(10deg, 10deg); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.idea-icons { font-size: clamp(54px, 13vmin, 120px); line-height: 1.1; letter-spacing: 0.1em; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.idea-row { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 8px; }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(40, 20, 100, 0.55); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 14px; }
.sheet { position: relative; width: min(920px, 100%); max-height: 100%; overflow: auto; background: linear-gradient(180deg, #fff, #f3eaff); border: 6px solid #fff; border-radius: 36px;
  padding: calc(var(--b) * 0.9) 18px 18px; box-shadow: 0 16px 40px rgba(20, 5, 70, 0.5); -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.sheet .close { position: absolute; top: 10px; right: 10px; width: max(56px, calc(var(--b) * 0.8)); height: max(56px, calc(var(--b) * 0.8)); font-size: calc(var(--b) * 0.45); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(68px, 13vmin, 112px), 1fr)); gap: 12px; }
.cell { aspect-ratio: 1; border-radius: 24px; border: 4px solid #fff; background: linear-gradient(160deg, #e7dcff, #ffe3f3); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 0 rgba(90, 47, 201, 0.25); font-size: clamp(34px, 8vmin, 64px); touch-action: manipulation; }
.cell:active { transform: scale(0.93); }
.cell img { width: 80%; height: 80%; image-rendering: pixelated; pointer-events: none; }
.cell.sel { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink); }
.grid.photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid.photos .cell { aspect-ratio: 4/3; padding: 0; overflow: hidden; }
.grid.photos img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.sheet.photo { width: min(900px, 100%); text-align: center; padding-top: 18px; }
.sheet.photo img { max-width: 100%; max-height: 62vh; border-radius: 20px; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.sheet.gate { width: min(420px, 100%); text-align: center; padding-top: calc(var(--b) * 1.1); }
.gate-hold { margin: 10px auto; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; font-size: 64px; position: relative; background: #fff; border: 6px solid var(--purple); }
.gate-hold i { position: absolute; inset: -6px; border-radius: 50%; --p: 0deg; background: conic-gradient(var(--pink) var(--p), transparent 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%); mask: radial-gradient(circle, transparent 62%, #000 64%); }

/* ---------- title screen ---------- */
#title { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vmin; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.0), rgba(80, 30, 160, 0.38) 70%), linear-gradient(180deg, rgba(143, 91, 255, 0.55), rgba(255, 95, 179, 0.25) 55%, rgba(20, 211, 196, 0.4)); transition: opacity 0.5s; }
#title.gone { opacity: 0; pointer-events: none; }
#title h1 { margin: 0; font-size: clamp(54px, 15vmin, 168px); line-height: 1; font-weight: 900; letter-spacing: 0.01em; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.04em; padding: 0 12px; }
#title h1 span { display: inline-block; color: var(--c); -webkit-text-stroke: clamp(4px, 1vmin, 10px) #fff; paint-order: stroke fill; text-shadow: 0 0.06em 0 rgba(43, 26, 94, 0.35), 0 0.12em 0.25em rgba(43, 26, 94, 0.35); animation: hop 2.2s ease-in-out infinite; animation-delay: var(--d); }
#title h1 .gap { width: 0.35em; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-0.12em) rotate(-3deg); } }
.play { appearance: none; border: 8px solid #fff; background: linear-gradient(160deg, #6ff0e3, var(--teal) 55%, var(--teal-d)); width: clamp(120px, 26vmin, 240px); height: clamp(120px, 26vmin, 240px); border-radius: 50%;
  font-size: clamp(60px, 13vmin, 120px); color: #fff; cursor: pointer; box-shadow: 0 10px 0 rgba(0, 0, 0, 0.25), 0 18px 40px rgba(30, 10, 80, 0.45); animation: throb 1.6s ease-in-out infinite; display: grid; place-items: center; padding: 0 0 0 0.08em; }
.play:active { transform: translateY(8px) scale(0.96); }
.play[disabled] { filter: grayscale(0.6); animation: none; opacity: 0.6; }
@keyframes throb { 50% { transform: scale(1.07); } }
.loading { font-size: 40px; animation: bob 1s infinite; }
.cubes i { position: absolute; width: clamp(40px, 9vmin, 90px); height: clamp(40px, 9vmin, 90px); border-radius: 16%; border: 4px solid #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2); animation: float 7s ease-in-out infinite; }
.cubes i:nth-child(1) { left: 8%; top: 14%; background: var(--purple); }
.cubes i:nth-child(2) { right: 9%; top: 18%; background: var(--pink); animation-delay: -2s; }
.cubes i:nth-child(3) { left: 14%; bottom: 14%; background: var(--teal); animation-delay: -4s; }
.cubes i:nth-child(4) { right: 12%; bottom: 16%; background: var(--yellow); animation-delay: -1s; }
.cubes i:nth-child(5) { left: 44%; top: 6%; background: var(--teal); width: 5vmin; height: 5vmin; animation-delay: -3s; }
.cubes i:nth-child(6) { left: 84%; bottom: 40%; background: var(--purple); width: 5vmin; height: 5vmin; animation-delay: -5s; }
@keyframes float { 50% { transform: translateY(-18px) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; } }

body.compact #rings { padding: 5px 8px; gap: 3px; }
body.compact #rings i { width: 13px; height: 13px; border-width: 3px; }
body.compact #tool-badge { bottom: calc(var(--hb) + var(--gap) + var(--safe-b)); width: calc(var(--b) * 0.9); height: calc(var(--b) * 0.9); font-size: calc(var(--b) * 0.55); }
body.compact .bubble { top: 12%; padding: 10px 18px; }
body.compact .sheet { padding-top: calc(var(--b) * 0.95); }
body.compact #joy-base { width: 110px; height: 110px; }
@media (max-height: 460px) { .sheet { border-radius: 24px; padding-left: 10px; padding-right: 10px; } .grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; } .idea-icons { font-size: 54px; } }
#hud > .parent-btn { display: block; }
#hud > .parent-btn { right: auto; left: calc(8px + var(--safe-l)); }

/* ---------- avatar dress-up ---------- */
.avatar-sheet { width: min(860px, 100%); }
.av-grid { display: grid; grid-template-columns: minmax(150px, 0.8fr) 1.4fr; gap: 16px; align-items: center; }
#avatar-canvas { width: 100%; max-height: 62vh; aspect-ratio: 300 / 380; border-radius: 28px; border: 5px solid #fff; box-shadow: 0 6px 18px rgba(30, 10, 80, 0.3); background: linear-gradient(#c8a6ff, #ffd0ec); }
.av-rows { display: flex; flex-direction: column; gap: 12px; }
.sw-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { width: clamp(38px, 8vmin, 58px); height: clamp(38px, 8vmin, 58px); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 3px 0 rgba(60, 30, 130, 0.35); padding: 0; cursor: pointer; touch-action: manipulation; }
.sw.wide { border-radius: 16px; width: clamp(44px, 9vmin, 66px); height: clamp(54px, 11vmin, 82px); background-size: cover; background-position: center; background-color: #e5d8ff; }
.sw.sel { outline: 5px solid var(--pink); transform: scale(1.12); }
@media (max-width: 560px) { .av-grid { grid-template-columns: 1fr; } #avatar-canvas { max-height: 38vh; margin: 0 auto; width: auto; } }
.vol-row { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 4px 0 8px; }
.vol-row input { flex: 1; min-width: 0; height: 36px; accent-color: #9b5cff; }
/* ===== story + help (js/story.js, js/help.js). Self-contained; safe to merge. ===== */
.zw-story { position: fixed; inset: 0; z-index: 26; display: grid; place-items: center; padding: calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l));
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.15), rgba(60, 20, 140, 0.8)), rgba(40, 20, 100, 0.85); backdrop-filter: blur(6px); }
.zw-card { position: relative; width: min(980px, 100%); max-height: 100%; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px; background: linear-gradient(180deg, #fff, #f3eaff); border: 6px solid #fff; border-radius: 36px; box-shadow: 0 16px 40px rgba(20, 5, 70, 0.5); }
.zw-pic { border-radius: 24px; overflow: hidden; border: 5px solid var(--purple); background: #bfe6ff; aspect-ratio: 4 / 3; max-height: 52vh; justify-self: center; width: min(100%, calc(52vh * 4 / 3)); }
.zw-pic img, .zw-dpic img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.zw-side { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; }
.zw-say { margin: 0; text-align: center; color: var(--ink); font-weight: 800; font-size: clamp(17px, 3.4vmin, 30px); line-height: 1.25; text-wrap: balance; }
.zw-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.zw-dots i { width: 12px; height: 12px; border-radius: 50%; background: #d7c8ff; border: 2px solid #fff; }
.zw-dots i.on { background: var(--pink); transform: scale(1.3); }
.zw-nav { display: flex; gap: 18px; align-items: center; justify-content: center; }
.zw-skip { position: absolute; top: -14px; right: -10px; width: 52px; height: 52px; font-size: 22px; }
.zw-story.pop .zw-pic { animation: zwpop 0.35s ease-out; }
@keyframes zwpop { 0% { transform: scale(0.92); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
@media (orientation: landscape) and (max-height: 800px) {
  .zw-card { grid-template-columns: auto 1fr; align-items: center; padding: 10px; border-radius: 28px; }
  .zw-pic { max-height: none; width: min(56vw, calc((100vh - 60px) * 4 / 3)); }
  .zw-say { font-size: clamp(15px, 4.2vh, 24px); }
  .zw-nav .btn.big { width: 62px; height: 62px; font-size: 32px; }
  .zw-skip { top: -10px; right: -6px; width: 52px; height: 52px; }
}
.zw-help .sheet { padding-top: calc(var(--b) * 0.95); }
.zw-help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 15vmin, 128px), 1fr)); gap: 12px; }
.zw-group { grid-column: 1 / -1; font-size: clamp(28px, 6vmin, 44px); line-height: 1; padding: 4px 8px; border-radius: 16px; background: linear-gradient(90deg, #e7dcff, #ffe3f3, #d6fbf6); text-align: left; }
.zw-hcard { appearance: none; border: 4px solid #fff; border-radius: 24px; background: linear-gradient(160deg, #e7dcff, #ffe3f3); box-shadow: 0 4px 0 rgba(90, 47, 201, 0.25); padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; touch-action: manipulation; font-family: inherit; color: var(--ink); }
.zw-hcard:active { transform: scale(0.94); }
.zw-hcard .btn, .zw-hcard .zw-blk { flex: none; }
.zw-blk { width: var(--b); height: var(--b); image-rendering: pixelated; }
.zw-cap { font-size: 12px; font-weight: 700; line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; opacity: 0.8; }
.zw-detail { display: grid; grid-template-columns: 1fr; gap: 12px; justify-items: center; }
.zw-dpic { width: min(100%, 520px, calc(50vh * 4 / 3)); aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; border: 5px solid var(--purple); background: #bfe6ff; }
.zw-dpic.icon { display: grid; place-items: center; background: linear-gradient(160deg, #e7dcff, #ffe3f3); }
.zw-dpic.icon .btn { width: 38%; height: auto; aspect-ratio: 1; font-size: clamp(48px, 12vmin, 96px); }
.zw-dpic.icon .zw-blk { width: 46%; height: auto; }
.zw-dside { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.zw-toast { position: fixed; left: 50%; bottom: calc(var(--hb) + var(--gap) * 4 + var(--safe-b)); transform: translateX(-50%); z-index: 14; display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100vw - 24px)); padding: 8px 18px 8px 8px; background: #fff; border: 5px solid var(--pink); border-radius: 30px; box-shadow: 0 10px 24px rgba(30, 10, 80, 0.4); pointer-events: none; animation: zwpop 0.35s ease-out; }
.zw-toast img { width: 88px; height: 66px; border-radius: 16px; image-rendering: pixelated; flex: none; border: 3px solid var(--purple); }
.zw-toast span { color: var(--ink); font-weight: 800; font-size: clamp(15px, 3vmin, 22px); line-height: 1.2; }
.zw-gate-voice { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 10px; }
.zw-pill { appearance: none; border: 4px solid #fff; border-radius: 999px; padding: 10px 18px; font: 800 18px inherit; font-family: inherit; color: #fff; background: linear-gradient(160deg, #6ff0e3, var(--teal-d)); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); cursor: pointer; }
.zw-pill.off { background: linear-gradient(160deg, #c9c3dd, #8f88aa); }
.zw-small { font-size: 13px; color: var(--ink); font-weight: 700; }
body.compact .zw-toast { bottom: calc(var(--hb) + var(--gap) * 8 + var(--safe-b)); }
/* ===== end story + help ===== */

/* ===== food bag, pigoblin update (js/food.js). Self-contained; safe to merge. ===== */
.zw-foodgrid { grid-template-columns: repeat(auto-fill, minmax(clamp(78px, 14vmin, 118px), 1fr)); }
.zw-fcell { position: relative; padding: 0; font: inherit; }
.zw-fcell img { width: 76%; height: 76%; margin-bottom: 14%; }
.zw-fcell.empty { opacity: 0.32; filter: grayscale(1); box-shadow: none; }
.zw-fcell.wob { animation: zwwob 0.35s ease-out; }
@keyframes zwwob { 25% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } }
.zw-pips { position: absolute; left: 6px; right: 6px; bottom: 7px; display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.zw-pips i { width: 9px; height: 9px; border-radius: 50%; background: #ff62b4; border: 2px solid #fff; box-shadow: 0 1px 0 rgba(60, 30, 130, 0.35); }
.zw-pips i:nth-child(3n+2) { background: #18d6c6; }
.zw-pips i:nth-child(3n) { background: #9b5cff; }
.zw-pips i.more { background: #ffd23f; }
.zw-steam { position: absolute; left: 30%; right: 30%; top: 2%; height: 30%; pointer-events: none; }
.zw-steam i { position: absolute; bottom: 0; width: 6px; height: 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.85); animation: zwsteam 1.8s ease-out infinite; opacity: 0; }
.zw-steam i:nth-child(1) { left: 10%; } .zw-steam i:nth-child(2) { left: 45%; animation-delay: 0.6s; } .zw-steam i:nth-child(3) { left: 80%; animation-delay: 1.2s; }
@keyframes zwsteam { 0% { transform: translateY(8px) scaleY(0.6); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: translateY(-22px) scaleY(1.3); opacity: 0; } }
#b-food.has { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55), 0 5px 0 rgba(0, 0, 0, 0.28); }
#b-food.flash { animation: zwflash 0.6s ease-out; }
@keyframes zwflash { 30% { transform: scale(1.3) rotate(-8deg); } 60% { transform: scale(0.95) rotate(6deg); } }
#game.zw-shiver { animation: zwshiver 0.12s linear infinite; filter: saturate(0.85) brightness(1.08) hue-rotate(-12deg); }
@keyframes zwshiver { 0% { transform: translate(2px, 0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 0); } 100% { transform: translate(2px, 0); } }
/* ---------- time of day ---------- */
@property --tp { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#b-sun { position: relative; padding: 0; }
.cluster.tr { right: calc(var(--gap) + var(--safe-r) + 4px); top: calc(var(--gap) + var(--safe-t) + 3px); }
.tod-ring { position: absolute; inset: -10px; border-radius: 36%; z-index: -1; pointer-events: none; --rc: #ff8fb0; --tp: 0deg;
  background: conic-gradient(from 0deg, var(--rc) var(--tp), rgba(255, 255, 255, 0.55) 0); box-shadow: 0 0 10px rgba(255, 255, 255, 0.35); transition: --tp 1s linear; }
#tod-chip { position: absolute; top: calc(100% + var(--gap) + 4px); right: 0; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px;
  background: rgba(60, 30, 130, 0.62); border: 3px solid rgba(255, 255, 255, 0.9); color: #fff; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 10px rgba(30, 10, 80, 0.3); }
#tod-chip img { width: calc(var(--b) * 0.5); height: calc(var(--b) * 0.5); border-radius: 30%; border: 2px solid #fff; display: block; }
#tod-chip b { font-size: calc(var(--b) * 0.46); line-height: 1; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(40, 20, 100, 0.5); }
#tod-chip .lk { display: none; font-size: calc(var(--b) * 0.5); line-height: 1; }
#tod-chip.locked img, #tod-chip.locked b { display: none; }
#tod-chip.locked .lk { display: block; }
#tod-chip.locked { padding: 3px 8px; }
#tod-chip.pulse img { animation: todpulse 0.9s ease-in-out infinite; }
@keyframes todpulse { 50% { transform: scale(1.3); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5); } }
#b-sun img { width: 100%; height: 100%; display: block; border-radius: 20%; pointer-events: none; }
#b-sun.locked::after { content: "🔒"; position: absolute; right: -2px; bottom: -4px; font-size: 0.55em; line-height: 1; filter: drop-shadow(0 1px 1px rgba(40,20,100,.5)); }
#tod .sheet { width: min(760px, 100%); }
#tod .tod-grid { grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 24vw, 170px), 1fr)); justify-items: center; }
#tod .tod-cell { width: 100%; max-width: 190px; padding: 0; overflow: hidden; display: grid; place-items: center; font-size: clamp(56px, 12vw, 84px); }
#tod .tod-cell img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
#tod .tod-lock { background: #fff6d8; }
body.compact #tod-chip { gap: 4px; padding: 2px 8px 2px 3px; border-width: 2px; }
body.compact #tod-chip img { width: 22px; height: 22px; border-width: 2px; }
body.compact #tod-chip b { font-size: 18px; }
body.compact #tod-chip .lk { font-size: 22px; }
@media (max-width: 359px) { body.compact #tod-chip { top: calc(100% + 50px); } }
/* time-of-day countdown ring: thicker, with a dark track so the progress is easy to see */
.tod-ring { inset: -15px; background: conic-gradient(from 0deg, var(--rc) var(--tp), rgba(50, 20, 110, 0.85) 0); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(30, 10, 80, 0.45); }

/* surprise friends not met yet */
.zw-hidden { background: linear-gradient(160deg, #4a3a86, #2a1d58); }
.zw-hidden .zw-blk { width: 64px; height: 64px; image-rendering: pixelated; }
.zw-hidden .zw-cap { font-size: 22px; color: #ffe98a; }
/* ---------- little map (orientation only) ---------- */
.map-sheet { width: min(640px, 100%); text-align: center; }
#map-canvas { width: min(100%, 68vmin); aspect-ratio: 1; image-rendering: pixelated; border-radius: 24px; border: 5px solid #fff; box-shadow: 0 6px 18px rgba(30, 10, 80, 0.3); background: #3a80e0; }

/* ===== cloud saves, players, grown-ups (js/cloud.js, js/people.js) ===== */
input[type="text"], textarea, .zw-key { -webkit-user-select: text; user-select: text; touch-action: manipulation; }
#gate { z-index: 60; }
.cloud { position: fixed; left: calc(10px + var(--safe-l) + 48px); bottom: calc(12px + var(--safe-b)); width: 34px; height: 24px; z-index: 55; pointer-events: none; opacity: 0.85; filter: drop-shadow(0 2px 3px rgba(30, 10, 80, 0.45)); }
.cloud svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cloud.synced { opacity: 0.55; }
.cloud .spin { transform-origin: 24px 17px; animation: zwspin 1.4s linear infinite; }
@keyframes zwspin { to { transform: rotate(360deg); } }
.title-who { position: absolute; left: calc(10px + var(--safe-l)); top: calc(10px + var(--safe-t)); width: clamp(54px, 10vmin, 84px); height: clamp(54px, 10vmin, 84px); border-radius: 50%; border: 5px solid #fff; padding: 0; overflow: hidden; background: #e7dcff; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); font-size: 34px; }
.title-who img { width: 100%; height: 100%; object-fit: cover; display: block; }
.title-link { position: absolute; bottom: calc(14px + var(--safe-b)); left: 50%; transform: translateX(-50%); appearance: none; border: 0; background: rgba(255, 255, 255, 0.35); color: var(--ink); font: 700 14px inherit; font-family: inherit; padding: 6px 14px; border-radius: 999px; cursor: pointer; text-decoration: underline; }
.title-about { bottom: calc(54px + var(--safe-b)); font-size: 12px; text-decoration: none; background: rgba(255, 255, 255, 0.28); padding: 4px 12px; }
.zw-over { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l)); overflow: auto;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.2), rgba(60, 20, 140, 0.88)), rgba(40, 20, 100, 0.9); backdrop-filter: blur(6px); touch-action: pan-y; }
.zw-over-in { position: relative; width: min(760px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 12px; color: #fff; text-align: center; }
.zw-over-in h2 { margin: 0; font-size: clamp(26px, 6vmin, 44px); text-shadow: 0 3px 0 rgba(43, 26, 94, 0.5); }
.zw-over-in .close { position: absolute; top: 0; right: 0; width: 52px; height: 52px; font-size: 24px; }
.zw-faces { display: flex; flex-wrap: wrap; gap: clamp(12px, 3vmin, 28px); justify-content: center; }
.zw-face { appearance: none; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; color: #fff; touch-action: manipulation; }
.zw-face img, .zw-face .zw-face-emo { width: clamp(96px, 22vmin, 190px); height: clamp(96px, 22vmin, 190px); border-radius: 50%; border: 6px solid #fff; background: #e7dcff; object-fit: cover; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3), 0 10px 22px rgba(20, 5, 70, 0.4); display: grid; place-items: center; font-size: clamp(48px, 12vmin, 96px); }
.zw-face.on img { border-color: var(--yellow); }
.zw-face b { font-size: clamp(16px, 3.2vmin, 26px); text-shadow: 0 2px 0 rgba(43, 26, 94, 0.5); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zw-face:active { transform: scale(0.93); }
.zw-face.plus .zw-face-emo { background: rgba(255, 255, 255, 0.25); border-style: dashed; color: #fff; }
.zw-big-pill { appearance: none; border: 5px solid #fff; border-radius: 999px; padding: 12px 24px; font: 800 clamp(18px, 3.4vmin, 26px) inherit; font-family: inherit; color: #fff; background: linear-gradient(160deg, #ffa0d5, var(--pink-d)); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); cursor: pointer; display: inline-flex; gap: 12px; align-items: center; touch-action: manipulation; }
.zw-big-pill:active { transform: translateY(3px); }
.zw-msg { min-height: 1.3em; font-weight: 700; font-size: 16px; color: #fff3a8; max-width: 520px; }
.zw-slots { display: flex; gap: 10px; justify-content: center; }
.zw-slot { width: clamp(58px, 14vmin, 96px); height: clamp(58px, 14vmin, 96px); border-radius: 22px; border: 5px dashed rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.15); display: grid; place-items: center; font-size: clamp(32px, 8vmin, 56px); line-height: 1; color: var(--ink); }
.zw-slot.f { border-style: solid; border-color: #fff; background: #fff; }
.zw-slots.big .zw-slot { width: clamp(70px, 17vmin, 110px); height: clamp(70px, 17vmin, 110px); font-size: clamp(40px, 10vmin, 64px); }
.zw-slots.shake { animation: zwshake 0.5s; }
@keyframes zwshake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.zw-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 1.6vmin, 12px); width: min(560px, 100%); }
.zw-icon { appearance: none; aspect-ratio: 1; border: 4px solid #fff; border-radius: 22px; background: linear-gradient(160deg, #e7dcff, #ffe3f3); font-size: clamp(30px, 8vmin, 52px); line-height: 1; padding: 0; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); touch-action: manipulation; display: grid; place-items: center; }
.zw-icon:active { transform: scale(0.9); }
.zw-row { display: flex; gap: 14px; justify-content: center; }
.zw-link { appearance: none; background: none; border: 0; color: #fff; text-decoration: underline; font: 700 15px inherit; font-family: inherit; cursor: pointer; padding: 8px; }
.zw-keybox { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.zw-keybox input, .zw-gu input[type="text"] { font: 700 20px inherit; font-family: inherit; padding: 10px 14px; border-radius: 16px; border: 4px solid #fff; background: #fff; color: var(--ink); width: min(320px, 100%); outline: none; }
#av-newp { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
#av-nick { flex: 1; min-width: 150px; font: 700 18px inherit; font-family: inherit; padding: 10px 14px; border-radius: 16px; border: 4px solid var(--purple); background: #fff; color: var(--ink); outline: none; }
#av-msg { flex-basis: 100%; }
/* grown-ups: plain readable text on a white sheet */
.zw-gu-in { position: relative; width: min(760px, 100%); background: linear-gradient(180deg, #fff, #f3eaff); border: 6px solid #fff; border-radius: 32px; padding: 22px 18px 20px; color: var(--ink); box-shadow: 0 16px 40px rgba(20, 5, 70, 0.5); text-align: left; max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.zw-gu { align-items: start; }
.zw-gu-in .close { position: absolute; top: 10px; right: 10px; width: 48px; height: 48px; font-size: 22px; }
.zw-gu-in h1 { margin: 0 0 8px; font-size: 30px; }
.zw-gu-in h2 { margin: 0 56px 8px 0; font-size: 26px; }
.zw-gu-in h3 { margin: 18px 0 6px; font-size: 19px; color: var(--purple-d); }
.zw-gu-in p, .zw-gu-in li { font-size: 17px; line-height: 1.45; font-weight: 600; }
.zw-gu-in ol, .zw-gu-in ul { padding-left: 24px; margin: 6px 0; }
.zw-lead { font-size: 18px; }
.zw-status { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.zw-st-ico { display: inline-block; width: 34px; height: 24px; background: #8f5bff; border-radius: 8px; padding: 2px 3px; }
.zw-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.zw-mi { appearance: none; border: 4px solid #fff; border-radius: 22px; background: linear-gradient(160deg, #e7dcff, #ffe3f3); box-shadow: 0 4px 0 rgba(90, 47, 201, 0.25); padding: 12px 8px; font: 800 16px inherit; font-family: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; touch-action: manipulation; }
.zw-mi span { font-size: 38px; line-height: 1; }
.zw-mi:active { transform: scale(0.95); }
.zw-mi.danger { background: linear-gradient(160deg, #ffe0e0, #ffd0e6); }
.zw-back { appearance: none; border: 0; background: #ece3ff; color: var(--purple-d); font: 800 16px inherit; font-family: inherit; padding: 8px 14px; border-radius: 999px; cursor: pointer; margin-bottom: 8px; }
.zw-pill.wide { display: block; width: 100%; margin: 10px 0; }
.zw-pill.alt { background: linear-gradient(160deg, #c9a8ff, var(--purple-d)); }
.zw-pill.danger { background: linear-gradient(160deg, #ff9aa8, #d03a52); }
.zw-note { font-size: 16px; font-weight: 600; line-height: 1.45; margin: 10px 0; }
.zw-note.big { font-size: 19px; }
.zw-row-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 8px 0; border-radius: 20px; background: #fff; border: 3px solid #e7dcff; font: 600 16px inherit; font-family: inherit; color: var(--ink); width: 100%; text-align: left; }
.zw-row-card.tap { cursor: pointer; appearance: none; }
.zw-row-card.tap:active { background: #f5efff; }
.zw-grow { flex: 1; min-width: 0; }
.zw-mini { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 32px; background: #e7dcff; border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); }
.zw-tag { font-style: normal; font-size: 12px; background: var(--green); color: #fff; padding: 2px 8px; border-radius: 999px; font-weight: 800; }
.zw-go { font-weight: 800; color: var(--purple-d); }
.zw-pair, .zw-keyview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.zw-qrwrap { background: #fff; padding: 8px; border-radius: 16px; border: 4px solid #e7dcff; }
.zw-qrwrap canvas { width: min(250px, 60vw); height: auto; image-rendering: pixelated; display: block; }
.zw-count { font-size: 20px; font-weight: 800; margin: 0; }
.zw-count.bad { color: #d03a52; }
.zw-key { font: 800 clamp(22px, 5vw, 32px) ui-monospace, Menlo, monospace; background: #fff; border: 4px solid #e7dcff; border-radius: 16px; padding: 10px 16px; word-break: break-all; text-align: center; }
.zw-slots.keys .zw-slot { flex-direction: column; font-size: clamp(36px, 9vmin, 56px); gap: 2px; width: clamp(76px, 18vmin, 112px); height: clamp(86px, 20vmin, 124px); }
.zw-slots.keys small { font-size: 13px; font-weight: 800; }
.zw-slots.keys .num { font-size: clamp(32px, 8vmin, 48px); font-weight: 900; }
.zw-btnrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.zw-gu .idea-row { margin-top: 18px; }
/* ===== end cloud saves ===== */

.no-photos { font-size: 72px; text-align: center; grid-column: 1 / -1; }
.zw-banner { position: fixed; top: calc(8px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 58; width: min(560px, calc(100vw - 20px)); display: flex; flex-direction: column; gap: 8px; }
.zw-banner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; color: var(--ink); border: 4px solid var(--pink); border-radius: 22px; box-shadow: 0 8px 20px rgba(30, 10, 80, 0.4); font: 600 15px inherit; font-family: inherit; }
.zw-banner-t { flex: 1 1 220px; }
.zw-banner-row .zw-pill { font-size: 14px; padding: 6px 12px; }
/* parent PIN pad (js/parentgate.js) */
.zw-gu-in.pinbox { width: min(420px, 100%); text-align: center; align-self: center; }
.zw-gu-in.pinbox h2 { margin-right: 0; }
.pin-dots { display: flex; gap: 12px; justify-content: center; margin: 8px 0; }
.pin-dots i { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--purple); background: #fff; }
.pin-dots i.on { background: var(--purple); }
.pin-dots.shake { animation: zwshake 0.5s; }
.pin-msg { min-height: 1.4em; margin: 4px 0; }
.pin-msg.bad { color: #d03a52; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px auto; max-width: 320px; }
.pin-pad.off { opacity: 0.4; pointer-events: none; }
.pin-key { appearance: none; border: 4px solid #fff; border-radius: 22px; height: clamp(58px, 11vh, 76px); font: 900 30px inherit; font-family: inherit; color: var(--ink); background: linear-gradient(160deg, #e7dcff, #ffe3f3); box-shadow: 0 4px 0 rgba(90, 47, 201, 0.3); cursor: pointer; touch-action: manipulation; }
.pin-key:active { transform: scale(0.94); }
.pin-key.alt { background: linear-gradient(160deg, #ffd0e6, #ff9ac6); }
.pin-key.go { background: linear-gradient(160deg, #8bf0a8, var(--green)); color: #fff; }
.zw-link.dark { color: var(--purple-d); }
#pin-label, #pin-key { font: 700 18px inherit; font-family: inherit; padding: 8px 12px; border-radius: 14px; border: 4px solid var(--purple); outline: none; color: var(--ink); background: #fff; width: min(300px, 100%); margin: 4px auto; }

/* Playtime (grown-ups) */
.zw-pt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 14px; }
.zw-pt-tile { background: #fff; border: 3px solid #e7dcff; border-radius: 18px; padding: 10px 8px; text-align: center; }
.zw-pt-tile b { display: block; font-size: 24px; line-height: 1.15; color: var(--ink); }
.zw-pt-tile span { font-size: 14px; font-weight: 600; color: #5a4f78; }
.zw-pt-h { font-size: 18px; margin: 14px 0 6px; }
.zw-pt-chart { display: flex; align-items: stretch; gap: 4px; height: 190px; background: #fff; border: 3px solid #e7dcff; border-radius: 18px; padding: 10px 8px 6px; }
.zw-pt-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.zw-pt-bar { background: #9e66ff; border-radius: 6px 6px 0 0; }
.zw-pt-bar.zero { background: #e7dcff; }
.zw-pt-col.today .zw-pt-bar { background: #ff6bb8; }
.zw-pt-val { font-size: 13px; font-weight: 700; text-align: center; min-height: 17px; color: var(--ink); }
.zw-pt-day { font-size: 14px; font-weight: 700; text-align: center; margin-top: 4px; color: #5a4f78; }

.zw-banner.n2 { top: calc(76px + var(--safe-t)); }
/* ===============================================================================================   Learning update: star challenges, discovery book, star shop, stickers, grown-ups learning settings.
   ====================================================================================================== */
.zw-bicon { width: 70%; height: 70%; image-rendering: pixelated; pointer-events: none; }
.zw-starbtn { animation: pulse 2.4s ease-in-out infinite; }
#b-disc.new { animation: pulse 1.2s ease-in-out infinite; outline: 4px solid #fff7a8; }
body.ballooning #b-balloon { outline: 4px solid #fff7a8; }

/* treasure counters (also the Star Shop button) */
.zw-treasure, .zw-shhead { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: clamp(16px, 3.2vmin, 24px); color: #fff; }
.zw-treasure { position: absolute; top: calc(var(--b) * 1.3 + var(--gap) * 2 + var(--safe-t) + 46px); left: 50%; transform: translateX(-50%); pointer-events: auto; appearance: none; cursor: pointer; padding: 5px 14px; background: rgba(60, 30, 130, 0.62); border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 20px; touch-action: manipulation; white-space: nowrap; }
.zw-treasure b, .zw-shhead b { min-width: 1.2em; text-align: left; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.zw-treasure .sep, .zw-shhead .sep { width: 2px; height: 1.1em; background: rgba(255, 255, 255, 0.35); margin: 0 4px; }
.zw-tstar { width: 1.3em; height: 1.3em; image-rendering: pixelated; }
body.compact .zw-treasure { top: calc(var(--b) * 1.25 + var(--gap) * 2 + 34px + var(--safe-t)); padding: 3px 10px; }
.zw-shhead { color: var(--ink); flex-wrap: wrap; justify-content: center; margin: 0 56px 6px 0; }
.zw-shhead b { color: var(--ink); text-shadow: none; }

/* small star chip beside what she is looking at (never a pop-up) */
.zw-chip { position: absolute; left: 50%; top: calc(var(--b) * 1.3 + var(--gap) * 2 + var(--safe-t) + 96px); transform: translateX(-50%); pointer-events: auto; appearance: none; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 6px 14px; min-height: 52px; background: #fff; border: 4px solid #ffd23f; border-radius: 999px; font-size: 30px; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3); animation: bob 2.2s ease-in-out infinite; }
.zw-chip i { font-style: normal; font-size: 24px; }
body.compact .zw-chip { top: calc(var(--b) * 1.25 + var(--gap) * 2 + 74px + var(--safe-t)); }
.zw-offer { position: fixed; z-index: 16; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #fff; border: 5px solid var(--purple); border-radius: 30px; box-shadow: 0 10px 28px rgba(30, 10, 80, 0.45); max-width: calc(100vw - 20px); animation: bob 2.4s ease-in-out infinite; }
.zw-offer img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--purple); background: #e7dcff; }
.zw-offer-t { font-weight: 900; color: var(--ink); font-size: 18px; }

/* ---------- the star challenge screen ---------- */
.zw-star { z-index: 24; }
.zw-qsheet { position: relative; width: min(780px, 100%); max-height: 100%; overflow: auto; background: linear-gradient(180deg, #fff, #fff4d8 60%, #f3eaff); border: 6px solid #fff; border-radius: 36px; padding: 12px 14px 16px; box-shadow: 0 16px 40px rgba(20, 5, 70, 0.5); display: flex; flex-direction: column; gap: 8px; touch-action: manipulation; }
.zw-qtop { display: flex; align-items: center; gap: 10px; }
.zw-giver { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; border: 4px solid var(--purple); background: #e7dcff; }
.zw-giver img { width: 100%; height: 100%; object-fit: cover; }
.zw-prog { display: flex; gap: 8px; flex: 1; justify-content: center; }
.zw-prog i { width: 28px; height: 28px; border-radius: 50%; border: 4px solid #e2cf8f; background: #fff7d8; }
.zw-prog i.on { background: #ffd23f; border-color: #e39a10; box-shadow: 0 0 10px #ffd23f; }
.zw-prog i.miss { border-color: #cdbfe8; background: #f0e9fb; }
.zw-qclose { width: 56px; height: 56px; font-size: 26px; flex: none; }
.zw-qbody { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.zw-qcap { display: flex; align-items: center; gap: 10px; width: 100%; }
.zw-say-btn { width: 68px; height: 68px; flex: none; font-size: 32px; }
.zw-qtext { margin: 0; flex: 1; color: var(--ink); font-weight: 800; font-size: clamp(18px, 3.4vmin, 28px); line-height: 1.25; text-wrap: balance; }
.zw-qtext.big { font-size: clamp(22px, 5vmin, 38px); text-align: center; }
.zw-qpic { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; min-height: 20px; max-width: 100%; }
.zw-qpic.hid .zw-obj { opacity: 0; }
.zw-qpic.hid { min-height: 0; }
.zw-grp { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: min(420px, 78vw); padding: 8px 12px; border-radius: 22px; background: rgba(143, 91, 255, 0.1); border: 3px dashed #cdbfe8; }
.zw-obj { font-size: clamp(30px, 8vmin, 54px); line-height: 1.1; position: relative; transition: transform 0.2s; }
.zw-grp.many .zw-obj { font-size: clamp(24px, 6vmin, 38px); }
.zw-obj.ghost { color: #b9a6ee; border: 3px dashed #b9a6ee; border-radius: 12px; width: 1.2em; text-align: center; font-weight: 900; font-size: clamp(26px, 6vmin, 40px); }
.zw-obj.crossed { opacity: 0.4; }
.zw-obj.crossed::after { content: "✖"; position: absolute; inset: 0; display: grid; place-items: center; color: #ff4f8a; font-size: 0.9em; }
.zw-obj.count, .zw-dot.count, .zw-pit.count { transform: scale(1.3); filter: drop-shadow(0 0 8px #ffd23f); }
.zw-obj.count::before { content: attr(data-n); position: absolute; top: -20px; left: 50%; transform: translateX(-50%) scale(0.75); font-weight: 900; font-size: 18px; color: #fff; background: var(--purple); border-radius: 12px; padding: 0 6px; z-index: 2; }
.zw-op { font-size: clamp(34px, 8vmin, 56px); font-weight: 900; color: var(--purple); }
.zw-dice { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 2vmin, 14px); padding: 14px; background: #fff; border: 5px solid var(--purple); border-radius: 26px; width: clamp(130px, 28vmin, 210px); aspect-ratio: 1; }
.zw-dot { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9ad0, var(--pink)); aspect-ratio: 1; }
.zw-dot.off { background: none; }
.zw-frame { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px; background: var(--purple); border-radius: 18px; width: clamp(240px, 56vmin, 400px); }
.zw-cell { background: #fff; border-radius: 10px; aspect-ratio: 1; display: grid; place-items: center; }
.zw-cell.zw-dot { background: #fff; position: relative; }
.zw-cell.zw-dot::after { content: ""; width: 72%; height: 72%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7ff5e8, var(--teal)); }
.zw-emoji { font-size: clamp(72px, 20vmin, 140px); line-height: 1.1; }
.zw-portrait { width: clamp(120px, 28vmin, 200px); height: clamp(120px, 28vmin, 200px); object-fit: contain; }
.zw-pit { width: clamp(46px, 11vmin, 70px); height: clamp(46px, 11vmin, 70px); display: grid; place-items: center; }
.zw-pit svg { width: 100%; height: 100%; }
.zw-pit.q { border: 4px dashed var(--purple); border-radius: 16px; font-weight: 900; font-size: 40px; color: var(--purple); }
.pat { flex-wrap: nowrap; gap: 6px; }
.zw-qbig { font-size: clamp(44px, 12vmin, 92px); font-weight: 900; color: var(--purple-d); letter-spacing: 0.06em; line-height: 1.05; text-align: center; min-height: 0; }
.zw-qbig:empty { display: none; }
.zw-ltr { display: inline-block; min-width: 0.7em; padding: 0 0.1em; border-radius: 12px; }
.zw-ltr.hole { min-width: 0.9em; height: 1em; vertical-align: middle; border: 5px dashed var(--pink); background: #fff0f8; }
.zw-ltr.say { background: #ffe58f; color: var(--pink-d); transform: scale(1.18); }
.zw-slots { display: flex; gap: 10px; justify-content: center; }
.zw-slots:empty { display: none; }
.zw-slot { width: clamp(64px, 15vmin, 100px); height: clamp(72px, 17vmin, 110px); border: 5px dashed var(--purple); border-radius: 20px; background: #f6f0ff; display: grid; place-items: center; font-size: clamp(36px, 9vmin, 62px); font-weight: 900; color: var(--purple-d); }
.zw-slot.on { border-style: solid; background: #d9fff9; border-color: var(--teal-d); }
.zw-slot.say { background: #ffe58f; }
.zw-choices { display: flex; flex-wrap: wrap; gap: clamp(10px, 2.4vmin, 18px); justify-content: center; width: 100%; }
.zw-choice { appearance: none; font-family: inherit; min-width: 76px; min-height: 76px; width: clamp(84px, 24vmin, 160px); height: clamp(84px, 24vmin, 160px); border-radius: 28px; border: 5px solid #fff; background: linear-gradient(160deg, #e7dcff, #ffe3f3); color: var(--purple-d); font-size: clamp(38px, 11vmin, 76px); font-weight: 900; display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 6px 0 rgba(90, 47, 201, 0.3); touch-action: manipulation; transition: transform 0.1s; }
.zw-choice:active { transform: translateY(4px) scale(0.96); box-shadow: 0 2px 0 rgba(90, 47, 201, 0.3); }
.zw-choice svg { width: 78%; height: 78%; }
.zw-choice img { width: 88%; height: 88%; object-fit: contain; }
.zw-choice.tile { background: linear-gradient(160deg, #fff, #d9fff9); border-color: var(--teal); text-transform: lowercase; }
.zw-choice.yes { background: linear-gradient(160deg, #eaffef, #b9f5cb); width: clamp(110px, 30vmin, 190px); height: clamp(110px, 30vmin, 190px); }
.zw-choice.no { background: linear-gradient(160deg, #fff0f6, #ffd0e6); width: clamp(110px, 30vmin, 190px); height: clamp(110px, 30vmin, 190px); }
.lay-words .zw-choice { width: auto; min-width: clamp(120px, 28vmin, 200px); padding: 0 22px; font-size: clamp(30px, 8vmin, 52px); }
.lay-groups .zw-choice { width: clamp(130px, 36vmin, 240px); font-size: clamp(22px, 5.5vmin, 34px); padding: 8px; line-height: 1.1; word-break: break-all; }
.lay-pics .zw-choice { font-size: clamp(56px, 16vmin, 100px); }
.zw-choice.right { background: linear-gradient(160deg, #eaffef, #8ff0b0); border-color: #4ddc7a; animation: zwpop 0.5s; }
.zw-choice.nearly { animation: zwwob 0.5s; border-color: #ffd23f; }
.zw-choice.glow { animation: zwglow 1s ease-in-out infinite; border-color: #ffd23f; }
.zw-choice.used { opacity: 0.25; pointer-events: none; }
@keyframes zwpop { 50% { transform: scale(1.18) rotate(-3deg); } }
@keyframes zwwob { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes zwglow { 50% { box-shadow: 0 0 0 10px rgba(255, 210, 63, 0.7), 0 6px 0 rgba(90, 47, 201, 0.3); transform: scale(1.06); } }
.zw-plus { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-weight: 900; font-size: clamp(28px, 7vmin, 48px); color: #b86a00; background: #fff7d8; border: 5px solid #ffd23f; border-radius: 999px; padding: 6px 22px; animation: zwfloat 1.4s ease-out forwards; z-index: 5; pointer-events: none; }
@keyframes zwfloat { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -60px); } }
.zw-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 30px; }
.zw-confetti i { position: absolute; top: -10px; width: 12px; height: 18px; border-radius: 3px; animation: zwfall 1.8s ease-in forwards; }
@keyframes zwfall { to { transform: translate(var(--dx), 110vh) rotate(720deg); } }
.zw-qdone { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; }
.zw-bigstars { font-size: clamp(40px, 11vmin, 76px); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.zw-bigstars span { animation: zwpop 0.6s backwards; }
.zw-bigstars span:nth-child(2) { animation-delay: 0.1s; } .zw-bigstars span:nth-child(3) { animation-delay: 0.2s; } .zw-bigstars span:nth-child(4) { animation-delay: 0.3s; } .zw-bigstars span:nth-child(5) { animation-delay: 0.4s; }
@media (max-height: 560px) { .zw-qbody { gap: 6px; } .zw-giver { width: 48px; height: 48px; } .zw-qclose, .zw-say-btn { width: 56px; height: 56px; } .zw-choice { width: clamp(84px, 20vh, 130px); height: clamp(84px, 20vh, 130px); } .zw-emoji { font-size: clamp(56px, 18vh, 100px); } }

/* ---------- tabs (discovery book and shop) ---------- */
.zw-tabs { display: flex; gap: 10px; justify-content: center; margin: 0 56px 10px 0; flex-wrap: wrap; }
.zw-tab { appearance: none; width: 64px; height: 64px; border-radius: 22px; border: 4px solid #fff; background: linear-gradient(160deg, #e7dcff, #ffe3f3); font-size: 32px; cursor: pointer; box-shadow: 0 4px 0 rgba(90, 47, 201, 0.25); touch-action: manipulation; }
.zw-tab.on { background: linear-gradient(160deg, #ffe58f, #ffb7dc); box-shadow: 0 0 0 4px var(--pink); }
.zw-dsheet, .zw-shsheet { padding-top: 14px; min-height: 40vh; }
.zw-dcount { font-weight: 900; font-size: 22px; color: var(--ink); margin: 6px 4px; }
.zw-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 20vmin, 150px), 1fr)); gap: 12px; }
.zw-dcard { appearance: none; position: relative; aspect-ratio: 1; border-radius: 24px; border: 5px solid #fff; background: linear-gradient(160deg, #fff6d9, #ffe3f3); box-shadow: 0 5px 0 rgba(90, 47, 201, 0.25); padding: 6px; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; transform: rotate(var(--r, 0deg)); }
.zw-dcard:nth-child(3n) { --r: 1.5deg; } .zw-dcard:nth-child(3n+1) { --r: -1.5deg; }
.zw-dcard img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; image-rendering: auto; }
.zw-dcard img.sil { filter: brightness(0) opacity(0.28); }
.zw-dcard.locked { background: linear-gradient(160deg, #eee8fa, #e4def2); }
.zw-dcard .q { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: clamp(34px, 8vmin, 56px); color: var(--purple); pointer-events: none; }
.wob { animation: zwwob 0.5s; }
.zw-page { display: grid; grid-template-columns: minmax(180px, 1fr) 1.3fr; gap: 16px; align-items: start; }
.zw-pageart { position: relative; background: linear-gradient(160deg, #fff6d9, #ffe3f3); border: 5px solid #fff; border-radius: 26px; padding: 10px; box-shadow: 0 6px 0 rgba(90, 47, 201, 0.25); transform: rotate(-1.5deg); }
.zw-pageart > img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.zw-photo { position: absolute; right: -8px; bottom: -14px; width: 52%; background: #fff; padding: 6px 6px 16px; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3); transform: rotate(5deg); }
.zw-photo::before { content: ""; position: absolute; top: -10px; left: 50%; width: 46px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 210, 63, 0.75); }
.zw-photo img { width: 100%; display: block; }
.zw-pname { margin: 0 0 6px; font-size: clamp(26px, 6vmin, 42px); color: var(--purple-d); }
.zw-pwhere, .zw-pfood { font-weight: 800; font-size: clamp(16px, 3vmin, 22px); color: var(--ink); margin: 4px 0; display: flex; align-items: center; gap: 8px; }
.zw-pfood img { width: 44px; height: 44px; image-rendering: pixelated; }
.zw-pfacts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.zw-pfact { appearance: none; font-family: inherit; text-align: left; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 14px; border-radius: 20px; border: 4px solid #fff; background: linear-gradient(160deg, #e7dcff, #d6fbf6); color: var(--ink); font-weight: 800; font-size: clamp(16px, 3vmin, 22px); cursor: pointer; box-shadow: 0 4px 0 rgba(90, 47, 201, 0.2); }
.zw-pfact .sp { font-size: 28px; flex: none; }
@media (max-width: 640px) { .zw-page { grid-template-columns: 1fr; } .zw-pageart { max-width: 300px; margin: 0 auto; } }

/* stickers and calendar */
.zw-dgrid.stick { grid-template-columns: repeat(auto-fill, minmax(clamp(92px, 19vmin, 130px), 1fr)); }
.zw-stcell { appearance: none; background: none; border: 0; padding: 4px; cursor: pointer; touch-action: manipulation; min-height: 92px; }
.zw-sticker { --col: #8f5bff; --rot: 0deg; position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--col) 130%); border: 6px solid #fff; box-shadow: 0 4px 10px rgba(30, 10, 80, 0.35), inset 0 0 0 3px var(--col); display: grid; place-items: center; transform: rotate(var(--rot)); }
.zw-sticker .ico { font-size: clamp(40px, 9vmin, 64px); line-height: 1; }
.zw-sticker .cat { position: absolute; right: -4px; bottom: -4px; font-size: 20px; background: #fff; border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.zw-sticker.locked { background: #f1ecfb; border: 5px dashed #cfc4ea; box-shadow: none; opacity: 0.7; }
.zw-sticker.locked .ico { color: #b7a8de; font-weight: 900; font-size: clamp(34px, 8vmin, 54px); }
.zw-sticker.locked .cat { display: none; }
.zw-slap { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; }
.zw-slap .zw-sticker { width: clamp(160px, 40vmin, 280px); }
.zw-slap .zw-sticker .ico { font-size: clamp(80px, 20vmin, 140px); }
.zw-slap-t { margin: 0; font-weight: 900; font-size: clamp(22px, 5vmin, 36px); color: #fff; text-shadow: 0 3px 0 var(--col, #8f5bff), 0 0 14px rgba(0, 0, 0, 0.5); text-align: center; padding: 0 14px; }
.zw-slap.go .zw-sticker { animation: zwslap 0.7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes zwslap { 0% { transform: scale(3) rotate(40deg); opacity: 0; } 55% { transform: scale(0.9) rotate(var(--rot)); opacity: 1; } 75% { transform: scale(1.08) rotate(var(--rot)); } 100% { transform: scale(1) rotate(var(--rot)); } }
.zw-cal { max-width: 440px; background: linear-gradient(160deg, #fff6d9, #ffe3f3); border: 5px solid #fff; border-radius: 26px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 4px 0 rgba(90, 47, 201, 0.2); }
.zw-calh { font-weight: 900; font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.zw-calg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.zw-cd { aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; font-weight: 800; font-size: clamp(14px, 2.6vmin, 20px); color: #a897d6; background: rgba(255, 255, 255, 0.55); }
.zw-cd.got { background: #fff7d8; font-size: clamp(20px, 4vmin, 30px); box-shadow: inset 0 0 0 3px #ffd23f; }
.zw-cd.today { box-shadow: inset 0 0 0 3px var(--pink); }
.zw-cd.blank { background: none; }
.zw-quests { display: flex; gap: 10px; justify-content: center; margin-left: 8px; }
.zw-quest { appearance: none; position: relative; width: 64px; height: 64px; font-size: 32px; border-radius: 50%; border: 4px solid #fff; background: linear-gradient(160deg, #e7dcff, #d6fbf6); box-shadow: 0 4px 0 rgba(90, 47, 201, 0.25); cursor: pointer; touch-action: manipulation; }
.zw-quest.done { background: linear-gradient(160deg, #fff7d8, #ffe58f); }
.zw-quest i { position: absolute; right: -6px; top: -6px; font-style: normal; font-size: 24px; }

/* star shop */
.zw-shgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 20vmin, 140px), 1fr)); gap: 12px; }
.zw-shcard, .zw-big { appearance: none; font-family: inherit; position: relative; border-radius: 24px; border: 5px solid #fff; background: linear-gradient(160deg, #e7dcff, #ffe3f3); box-shadow: 0 5px 0 rgba(90, 47, 201, 0.25); padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; min-height: 100px; touch-action: manipulation; }
.zw-shcard .ic, .zw-big .ic, .zw-shbuy .ic { font-size: clamp(42px, 10vmin, 64px); line-height: 1.1; }
.zw-shcard .pr, .zw-big .pr, .zw-shbuy .pr { font-weight: 900; color: var(--ink); font-size: clamp(16px, 3vmin, 22px); }
.zw-shcard.own { background: linear-gradient(160deg, #d9fff9, #eaffef); }
.zw-shcard.worn { box-shadow: 0 0 0 4px var(--teal); }
.zw-shcard.sel { box-shadow: 0 0 0 4px var(--pink); }
.zw-shcard .col1 { filter: hue-rotate(60deg) saturate(1.3); } .zw-shcard .col2 { filter: hue-rotate(160deg); } .zw-shcard .col3 { filter: hue-rotate(260deg) saturate(1.5) brightness(1.2); }
.zw-shbuy { position: sticky; bottom: -10px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 12px; margin-top: 10px; background: #fff; border: 5px solid var(--pink); border-radius: 26px; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.15); }
.zw-bigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.zw-big.got { background: linear-gradient(160deg, #fff7d8, #ffe58f); }
.zw-gift { z-index: 36; }
.zw-giftcard { display: flex; flex-direction: column; align-items: center; gap: 14px; background: linear-gradient(180deg, #fff, #ffe3f3); border: 6px solid #fff; border-radius: 36px; padding: 22px 26px; max-width: min(460px, 100%); box-shadow: 0 16px 40px rgba(20, 5, 70, 0.5); }
.zw-giftbox { appearance: none; border: 0; background: none; cursor: pointer; width: clamp(150px, 38vmin, 250px); animation: zwwob 1.2s infinite; }
.zw-giftbox img { width: 100%; image-rendering: pixelated; }
.zw-giftitem { font-size: clamp(90px, 24vmin, 160px); line-height: 1.1; animation: zwpop 0.7s; }
.zw-reward-toast img[style*="none"] + span { padding-left: 10px; }
.zw-disc-toast { border-color: var(--pink); }

/* ---------- grown-ups learning settings: plain, readable ---------- */
.zw-ls { z-index: 30; touch-action: pan-y; }
.zw-lssheet { width: min(860px, 100%); padding: 18px 20px 24px; color: var(--ink); font-size: 17px; line-height: 1.45; text-align: left; }
.zw-lsbody h2 { margin: 6px 0 4px; font-size: 26px; }
.zw-lsbody h2.rep { margin-top: 28px; padding-top: 18px; border-top: 3px solid #e2d8f7; }
.zw-lsbody h3 { margin: 20px 0 4px; font-size: 19px; color: var(--purple-d); }
.zw-lsbody .note { margin: 2px 0 8px; font-size: 15px; color: #5b4a8c; font-weight: 600; }
.zw-lsbody p { margin: 6px 0; }
.zw-lsbody label { display: block; margin: 6px 0; font-weight: 700; }
.zw-lsbody input[type=checkbox], .zw-lsbody input[type=radio] { width: 22px; height: 22px; vertical-align: -4px; margin-right: 4px; }
.zw-lsbody select, .zw-lsbody textarea, .zw-lsbody input[type=number] { font-size: 16px; font-family: inherit; padding: 8px 10px; border-radius: 12px; border: 3px solid #cfc4ea; width: 100%; max-width: 560px; background: #fff; color: var(--ink); user-select: text; -webkit-user-select: text; }
.zw-lsbody input[type=number] { width: 90px; }
.zw-lsbody textarea { max-width: 100%; }
.zw-subjs { display: flex; flex-direction: column; gap: 10px; }
.zw-subj { background: #fff; border: 3px solid #e2d8f7; border-radius: 16px; padding: 8px 12px; display: grid; grid-template-columns: 1fr; gap: 2px; }
.zw-subj .sh { font-size: 18px; }
.zw-subj .rng { display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr; gap: 10px; align-items: center; margin: 0; font-weight: 600; font-size: 15px; }
.zw-subj input[type=range] { width: 100%; height: 34px; accent-color: var(--purple); }
.zw-grpk { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; background: #fff; border: 3px solid #e2d8f7; border-radius: 14px; padding: 4px 12px; margin: 6px 0; }
.zw-grpk label { margin: 2px 0; }
.zw-grpk .ga { flex: 1 1 100%; color: var(--purple-d); }
.zw-lsbody .pill { appearance: none; font-weight: 700; font-size: 15px; border: 3px solid #fff; border-radius: 999px; padding: 8px 14px; background: linear-gradient(160deg, #6ff0e3, var(--teal-d)); color: #fff; cursor: pointer; margin: 2px 4px 2px 0; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); min-height: 40px; }
.zw-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.zw-rec { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: #fff; border: 3px solid #e2d8f7; border-radius: 14px; padding: 4px 8px; }
.zw-rec b { min-width: 28px; font-size: 20px; }
.zw-rec.has { border-color: var(--teal); }
.zw-rec.recording { border-color: var(--pink); background: #fff0f6; }
.zw-rep { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; border-radius: 12px; overflow: hidden; }
.zw-rep th, .zw-rep td { border: 1px solid #e2d8f7; padding: 6px 8px; text-align: left; vertical-align: top; }
.zw-rep th { background: #efe7ff; }
.zw-rep tr.off { opacity: 0.55; }
.zw-rep .bar { height: 10px; background: #e8e0f8; border-radius: 6px; overflow: hidden; margin-bottom: 2px; }
.zw-rep .bar i { display: block; height: 100%; background: var(--teal); }
.zw-exp { margin: 12px 0 6px; }
@media (max-width: 640px) { .zw-subj .rng { grid-template-columns: 1fr; gap: 0; } .zw-rep { font-size: 13px; } .zw-rep th:nth-child(4), .zw-rep td:nth-child(4) { display: none; } }

.zw-ward .sw { font-size: 30px; display: inline-grid; place-items: center; background: linear-gradient(160deg, #fff, #ffe3f3); }
.zw-lsbody > h2:first-child, .zw-lsbody > .note:nth-child(2) { margin-right: 64px; }
/* short landscape screens: question on the left, answers on the right so nothing needs scrolling */
@media (orientation: landscape) and (max-height: 800px) {
  .zw-qsheet { padding: 8px 12px 10px; gap: 4px; border-radius: 28px; }
  .zw-giver { width: 44px; height: 44px; border-width: 3px; }
  .zw-qclose { width: 56px; height: 56px; }
  .zw-qbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 4px; align-items: center; }
  .zw-qcap { grid-area: 1 / 1; } .zw-qpic { grid-area: 2 / 1; } .zw-qbig { grid-area: 3 / 1; font-size: clamp(34px, 11vh, 60px); }
  .zw-slots { grid-area: 1 / 2; } .zw-choices { grid-area: 2 / 2 / span 2; align-self: center; }
  .zw-slot { width: clamp(52px, 14vh, 80px); height: clamp(58px, 16vh, 88px); }
  .zw-choice { width: clamp(76px, 22vh, 118px); height: clamp(76px, 22vh, 118px); }
  .zw-emoji { font-size: clamp(48px, 16vh, 84px); }
  .zw-dice { width: clamp(100px, 30vh, 150px); } .zw-frame { width: clamp(200px, 56vh, 300px); }
  .zw-qtext { font-size: clamp(16px, 5vh, 22px); }
  .zw-say-btn { width: 56px; height: 56px; font-size: 26px; }
}
.zw-reward-toast, .zw-disc-toast { bottom: auto !important; top: calc(var(--b) * 3.4 + 70px + var(--safe-t)); }
/* next gift bar (js/rewards.js giftBar, council economy) */
.zw-nextgift { appearance: none; border: 0; background: rgba(255, 255, 255, 0.85); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; margin-left: 6px; cursor: pointer; vertical-align: middle; }
.zw-nextgift .ng-ico { font-size: 18px; line-height: 1; }
.zw-nextgift .ng-bar { width: 54px; height: 10px; border-radius: 6px; background: #e7dcff; overflow: hidden; display: inline-block; }
.zw-nextgift .ng-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #ff62b4); border-radius: 6px; }

/* Dev tools (only for players with the dev flag) */
.zw-dev-gear { position: fixed; left: 8px; bottom: 8px; z-index: 60; font: 700 12px system-ui, sans-serif; padding: 6px 10px; border-radius: 12px; border: 0; background: rgba(35, 26, 61, .7); color: #fff; opacity: .55; }
.zw-dev-gear:hover, .zw-dev-gear:focus { opacity: 1; }
.zw-dev { position: fixed; left: 8px; bottom: 44px; z-index: 95; width: min(92vw, 380px); max-height: 80vh; overflow: auto; background: #fff; color: #231a3d; border: 3px solid #7b4dff; border-radius: 16px; padding: 10px 12px; font: 600 14px system-ui, sans-serif; }
.zw-dev-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.zw-dev-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.zw-dev-t { flex: 0 0 100%; font-size: 12px; color: #6b6485; text-transform: uppercase; letter-spacing: .04em; }
.zw-dev-b, .zw-dev-x { font: 700 14px system-ui, sans-serif; padding: 7px 12px; border-radius: 10px; border: 0; background: #7b4dff; color: #fff; }
.zw-dev-x { background: #e7dcff; color: #231a3d; }
.zw-dev-sel { font: 600 14px system-ui, sans-serif; padding: 6px; border-radius: 8px; max-width: 55%; }
.zw-dev-msg { font-size: 13px; color: #6b6485; margin: 6px 0 0; }
.zw-dev-fps { position: fixed; right: 8px; top: 8px; z-index: 60; font: 700 13px ui-monospace, monospace; background: rgba(0, 0, 0, .6); color: #fff; padding: 3px 8px; border-radius: 8px; }
.zw-dev.hidden, .zw-dev-fps.hidden { display: none; }
/* invite code boxes + keypad */
.zw-otp { position: relative; display: flex; gap: 8px; justify-content: center; margin: 10px 0; }
.zw-otp i { width: 46px; height: 58px; border-radius: 14px; border: 4px solid #e7dcff; background: #fff; display: flex; align-items: center; justify-content: center; font: 800 30px system-ui, sans-serif; font-style: normal; color: #231a3d; }
.zw-otp i.on { border-color: #9e66ff; }
#inv-code { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; }
.zw-otp-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 10px auto; }
.zw-otp-pad .pin-key { font-size: 30px; font-weight: 900; font-family: inherit; }

/* ===== scrollable panels: the page is locked (no scroll, zoom or pull-to-refresh) but every panel that overflows scrolls with touch ===== */
.zw-over, .zw-gu-in, .zw-over-in, .modal, .sheet, .zw-story, .zw-help, .scroll, [data-scroll] { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
.zw-over { overflow-x: hidden; }
.zw-over-in { overflow: visible; touch-action: pan-y; } /* the .zw-over around it scrolls */
@supports (height: 100dvh) { .zw-over, .modal, .zw-story, #title { height: 100dvh; } .zw-gu-in, .sheet { max-height: 100dvh; } }
/* long-press icon voice ring */
.iv-ring { position: relative; }
.iv-ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--purple, #7a4bd8); pointer-events: none; animation: ivring 0.9s ease-out forwards; }
@keyframes ivring { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
/* local mode */
body.local .cloud { display: none; }
.zw-tag.code { background: var(--purple); }
.zw-banner.a2hs { top: auto; bottom: calc(14px + var(--safe-b)); z-index: 60; }
#gc-in { font: 900 30px ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: 0.15em; text-align: center; width: min(320px, 100%); padding: 10px; border: 5px solid #fff; border-radius: 18px; color: var(--ink); outline: none; }

/* ---------- Dress-up Mirror (js/mirror.js) ---------- */
.avatar-sheet { overflow: hidden; max-height: 100%; padding-top: calc(var(--b) * 0.55); }
.av-rows { gap: 8px; min-width: 0; }
.mr-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; --tile: clamp(52px, min(21vw, 13.2vh), 124px); }
.mr-tabs { margin-right: calc(var(--b) * 0.85); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }   /* two rows of five: every tab is at least 52px tall */
.mr-tab { appearance: none; border: 3px solid #fff; border-radius: 16px; height: 52px; min-width: 0; font-size: clamp(18px, 3.6vmin, 30px); line-height: 1; padding: 0; cursor: pointer;
  background: linear-gradient(160deg, #fff, #efe4ff); box-shadow: 0 3px 0 rgba(60, 30, 130, 0.3); touch-action: manipulation; }
.mr-tab.sel { outline: 4px solid var(--pink); background: linear-gradient(160deg, #fff, #ffd9ef); transform: scale(1.06); }
.mr-grid { display: grid; grid-template-columns: repeat(3, var(--tile)); gap: 8px; justify-content: start; }
.mr-tile { appearance: none; position: relative; width: var(--tile); height: var(--tile); padding: 0; border: 4px solid #fff; border-radius: 20px; overflow: hidden; cursor: pointer;
  background: linear-gradient(160deg, #fff, #f1e6ff); box-shadow: 0 4px 0 rgba(60, 30, 130, 0.3); touch-action: manipulation; font-size: calc(var(--tile) * 0.45); }
.mr-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mr-tile.sel { outline: 5px solid var(--pink); transform: scale(1.04); }
.mr-tile .mr-no { position: absolute; right: 4px; bottom: 4px; width: calc(var(--tile) * 0.3); height: calc(var(--tile) * 0.3); color: #e5484d; --zi-2: #fff; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9)); }
.mr-tile.more .zi { width: 55%; height: 55%; color: #ffb703; --zi-2: #ff7ab8; }
.mr-tab { color: var(--purple-d, #5a2fc9); --zi-2: #ff7ab8; --zi-3: #ffd23f; }
.mr-tab .zi { width: 66%; height: 66%; vertical-align: middle; }
.mr-pg .zi, .mr-sw .zi { width: 70%; height: 70%; vertical-align: middle; }
.mr-pg { display: inline-flex; align-items: center; justify-content: center; }
.mr-sw { display: inline-flex; align-items: center; justify-content: center; }
.mr-outfits { display: flex; gap: 6px; align-items: center; }
.mr-outfits.hidden { display: none; }
.mr-slot { appearance: none; position: relative; flex: 0 0 auto; width: clamp(44px, 6.4vmin, 54px); height: clamp(44px, 6.4vmin, 54px); padding: 0; border: 3px solid #fff; border-radius: 16px; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #fff, #f1e6ff); box-shadow: 0 4px 0 rgba(60, 30, 130, 0.3); touch-action: manipulation; color: #8b5cf6; --zi-2: #ff7ab8; --zi-3: #ffd23f; }
.mr-slot .zi { width: 55%; height: 55%; }
.mr-slot img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.mr-slot:not(.full) { border-style: dashed; border-color: #c9b6ff; background: #fbf8ff; }
.mr-savebtn { background: linear-gradient(160deg, #fff7c2, #ffe0f4); border-style: solid; border-color: #fff; }
.mr-savebtn.on { outline: 4px solid var(--pink); transform: scale(1.06); }
.mr-slot.saving { animation: mr-twinkle 1.2s ease-in-out infinite; outline: 3px dashed var(--pink); }
.qc-modal .qc-sheet { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 24px 20px; max-width: min(92vw, 560px); }
.qc-row { display: flex; gap: 14px; justify-content: center; }
.qc-slot { width: clamp(84px, 22vmin, 150px); height: clamp(84px, 22vmin, 150px); border-radius: 24px; }

.mr-tile.more { background: linear-gradient(160deg, #fff7c2, #ffe0f4); animation: mr-twinkle 2.4s ease-in-out infinite; }
@keyframes mr-twinkle { 50% { filter: brightness(1.1) saturate(1.2); } }
.mr-pager { display: flex; align-items: center; gap: 10px; }
.mr-pg { appearance: none; border: 3px solid #fff; border-radius: 12px; background: var(--purple); color: #fff; width: 60px; height: 52px; font-size: 16px; cursor: pointer; touch-action: manipulation; }
.mr-pgn { font-weight: 800; color: var(--purple-d); }
.mr-swatches { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; }
.mr-sw { appearance: none; width: clamp(48px, 7vmin, 52px); height: clamp(48px, 7vmin, 52px); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 3px 0 rgba(60, 30, 130, 0.3); color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.6); font-size: clamp(12px, 2.6vmin, 18px); cursor: pointer; padding: 0; }
.mr-sw.lite { color: #5a2fc9; text-shadow: none; }
.mr-sw.sel { outline: 4px solid var(--pink); transform: scale(1.12); }
.mr-bar { display: flex; gap: 12px; align-items: center; }
.mr-btn { --b: clamp(42px, 8vmin, 58px); }
.mr-btn:disabled { filter: grayscale(0.7); opacity: 0.55; }
.green { background: linear-gradient(160deg, #8ef0a0, #37c95a 55%, #1d9a3d); }
.avatar-sheet .hidden { display: none; }
@media (max-width: 560px) and (orientation: portrait) {
  .avatar-sheet { padding: 44px 12px 12px; }
  .av-grid { grid-template-columns: 1fr; gap: 8px; }
  #avatar-canvas { max-height: 36dvh; width: auto; margin: 0 auto; }
  .mr-tabs { margin-right: 0; display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .mr-tab { flex: 0 0 56px; width: 56px; height: 56px; font-size: 28px; }
  .mr-wrap { --tile: 80px; }
  .mr-grid { justify-content: center; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .avatar-sheet { padding: 6px 12px; width: 100%; border-width: 4px; }
  .avatar-sheet .close { top: 4px; right: 4px; }
  .av-grid { grid-template-columns: 38% 1fr; gap: 10px; }
  #avatar-canvas { max-height: 78dvh; width: auto; margin: 0 auto; }
  .mr-wrap { --tile: clamp(44px, 14vh, 70px); gap: 5px; }
  .mr-tabs { margin-right: 0; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .mr-tab { flex: 0 0 52px; width: 52px; height: 52px; font-size: 22px; border-radius: 12px; }
  .mr-btn { --b: 38px; }
  .mr-grid { gap: 6px; }
  .mr-sw { width: 48px; height: 48px; }
}
/* Just play (guest) */
.guest-badge { position: fixed; left: calc(8px + var(--safe-l) + 68px); min-height: 52px; bottom: calc(10px + var(--safe-b)); z-index: 55; appearance: none; border: 3px solid #fff; border-radius: 999px; padding: 4px 12px; background: rgba(255, 140, 60, 0.95); color: #fff; font: 800 14px inherit; font-family: inherit; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); cursor: pointer; }
.guest-big { font-size: clamp(30px, 7vmin, 56px) !important; }
.guest-big2 { font-size: clamp(22px, 4.6vmin, 36px); font-weight: 800; margin: 0; max-width: 700px; text-shadow: 0 2px 0 rgba(43, 26, 94, 0.5); }
.guest-btns { gap: 16px; margin-top: 8px; }
.guest-btn { min-height: 72px; min-width: 170px; padding: 12px 26px; font-size: clamp(22px, 4vmin, 30px); display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.guest-btn span { font-size: 1.3em; line-height: 1; }

/* ---------- Style presents (js/stylecal.js) ---------- */
.sparkle { animation: sc-glow 2.2s ease-in-out infinite; }
.sparkle::after { content: '✨'; position: absolute; top: -8px; right: -6px; font-size: 18px; line-height: 1; pointer-events: none; }
@keyframes sc-glow { 50% { box-shadow: 0 0 0 5px rgba(255, 233, 120, 0.9), 0 0 18px 6px rgba(255, 200, 90, 0.8); } }
.mr-cal { background: linear-gradient(160deg, #ffe48a, #ffc83d 55%, #e8a010); }
.sc-sheet { width: min(760px, 100%); text-align: center; padding: 22px 18px 18px; }
.sc-title { margin: 0 0 10px; color: var(--purple-d); font-size: clamp(22px, 4.2vmin, 34px); }
.sc-body { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(74px, 14vmin, 110px), 1fr)); gap: 10px; width: 100%; max-height: 46vh; overflow-y: auto; padding: 6px; }
.sc-day { appearance: none; position: relative; border: 4px solid #fff; border-radius: 20px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 2px;
  background: linear-gradient(160deg, #fff, #efe4ff); box-shadow: 0 4px 0 rgba(60, 30, 130, 0.3); touch-action: manipulation; }
.sc-day.wrapped { background: linear-gradient(160deg, #ffe0f4, #ffd0ea); }
.sc-ico { font-size: clamp(28px, 6vmin, 44px); line-height: 1; }
.sc-nm { font-size: 11px; font-weight: 800; color: var(--purple-d); line-height: 1.1; }
.sc-sil { position: absolute; right: 4px; bottom: 2px; font-size: 16px; filter: grayscale(1) brightness(0.3); opacity: 0.55; }
.sc-album { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-height: 22vh; overflow-y: auto; width: 100%; }
.sc-al { font-size: 22px; filter: grayscale(1) brightness(0.35); opacity: 0.5; cursor: pointer; }
.sc-al.have { filter: none; opacity: 1; }
.sc-ask { font-size: clamp(22px, 4.5vmin, 34px); font-weight: 800; color: var(--purple-d); margin: 4px 0; }
.sc-areas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.sc-area { appearance: none; border: 5px solid #fff; border-radius: 28px; width: clamp(110px, 22vmin, 160px); height: clamp(110px, 22vmin, 160px); font-size: clamp(44px, 9vmin, 64px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
  background: linear-gradient(160deg, #fff, #e6dcff); box-shadow: 0 6px 0 rgba(60, 30, 130, 0.3); color: var(--purple-d); }
.sc-aname { font-size: clamp(14px, 2.6vmin, 20px); font-weight: 800; }
.sc-reveal { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sc-big { font-size: clamp(80px, 22vmin, 150px); line-height: 1; animation: sc-pop 0.6s ease-out; }
@keyframes sc-pop { 0% { transform: scale(0.3) rotate(-12deg); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.sc-rname { font-size: clamp(22px, 5vmin, 36px); font-weight: 800; color: var(--purple-d); margin: 0; }
.sc-actions { display: flex; gap: 16px; align-items: center; }
.sc-modal { z-index: 24; }
.sc-conf { border-radius: 30px; }
.zw-confirm { background: #fff3c4; border: 3px solid #ffd23f; border-radius: 16px; padding: 10px 14px; margin: 8px 0; }
.zw-areas { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0; }
.zw-areas .note { flex-basis: 100%; margin: 0; }
/* mirror swatches: one scrollable row on small screens, so more colours never push the sheet past the screen */
@media (max-width: 600px), (max-height: 500px) {
  .mr-swatches { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 8px 6px; flex-shrink: 0; }
  .mr-swatches::-webkit-scrollbar { display: none; }
  .mr-sw { flex: 0 0 auto; }
}
@media (max-height: 500px) { .mr-wrap { --tile: clamp(48px, min(19vw, 14.5vh), 110px); } }
@media (max-height: 500px) {
  .mr-wrap { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'tabs tabs' 'grid grid' 'pager sw' 'out out' 'bar bar'; gap: 6px 10px; align-items: center; --tile: clamp(44px, min(18vw, 12.5vh), 100px); }
  .mr-tabs { grid-area: tabs; } .mr-grid { grid-area: grid; } .mr-pager { grid-area: pager; } .mr-swatches { grid-area: sw; min-width: 0; } .mr-bar { grid-area: bar; } .mr-outfits { grid-area: out; }
}
@media (max-width: 600px) {
  .mr-wrap { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'tabs tabs' 'grid grid' 'pager sw' 'out out' 'bar bar'; gap: 6px 8px; align-items: center; }
  .mr-tabs { grid-area: tabs; } .mr-grid { grid-area: grid; justify-content: center; } .mr-pager { grid-area: pager; } .mr-swatches { grid-area: sw; min-width: 0; } .mr-bar { grid-area: bar; } .mr-outfits { grid-area: out; }
  .mr-pager:not(.hidden) .mr-pgn { display: none; }
}
/* overlay manager (js/overlays.js): the title never shows through an open layer, and every layer has a close button */
body.has-overlay #title { pointer-events: none; }
.ovl-close { position: absolute; top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r)); z-index: 99; width: 52px; height: 52px; font-size: 24px; }
/* Party Planner (js/events/planner.js): three big friendly party buttons */
.zw-plansheet { width: min(760px, 100%); text-align: center; padding: 22px 18px 20px; }
.zw-plansheet h2 { margin: 4px 0 14px; color: var(--ink); }
.zw-planrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.zw-planbtn { appearance: none; border: 5px solid #fff; border-radius: 26px; background: linear-gradient(160deg, #e7dcff, #ffe3f3); box-shadow: 0 5px 0 rgba(90, 47, 201, 0.25); padding: 16px 10px; font: 800 20px inherit; font-family: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; touch-action: manipulation; min-height: 168px; }
.zw-planbtn:active { transform: scale(0.96); }
.zw-planbtn.on { background: linear-gradient(160deg, #c9f5ee, #fff3c4); }
.zw-planico svg { width: 64px; height: 64px; }
.zw-planstate { font-size: 15px; font-weight: 700; opacity: 0.75; }

/* ---- rainbow portals (P10): the picture and name over each portal, the rainbow tunnel, the Portal House button ---- */
#portal-tags { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.zw-ptag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; will-change: transform; --zi-2: #3b1f7a; --zi-3: #ffd23f; color: #9b5cff; }
.zw-ptag .pi { width: var(--ps, 64px); height: var(--ps, 64px); display: grid; place-items: center; background: #fff; border: 4px solid transparent; border-radius: 50%; background-clip: padding-box; box-shadow: 0 0 0 4px #ff62b4, 0 0 0 8px #ffd23f, 0 0 0 12px #18d6c6, 0 6px 16px rgba(30, 10, 80, 0.4); }
.zw-ptag .pi svg { width: 72%; height: 72%; }
.zw-ptag .pn { max-width: 220px; padding: 2px 12px; font: 800 clamp(12px, calc(var(--ps, 64px) * 0.24), 22px)/1.25 system-ui, sans-serif; color: #3b1f7a; background: #fff; border: 3px solid #9b5cff; border-radius: 16px; text-align: center; white-space: nowrap; margin-top: 8px; }
.zw-ptag.gold .pi { color: #e0a000; box-shadow: 0 0 0 4px #ffd23f, 0 0 0 8px #fff3b0, 0 0 22px 8px rgba(255, 210, 63, 0.7); }
.zw-ptag.gold .pn { border-color: #e0a000; background: #fff8d6; }
#portal-tunnel { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; --a: 0deg; --s: 1; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 14%), conic-gradient(from var(--a), #ff5d5d, #ffa43b, #ffe14d, #5fe07a, #18d6c6, #4d8dff, #9b5cff, #ff62b4, #ff5d5d); transform: scale(var(--s)); mask-image: radial-gradient(circle at 50% 50%, transparent 0, #000 22%, #000 100%); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0, #000 22%, #000 100%); }
#portal-tunnel.calm { background: radial-gradient(circle at 50% 50%, #fff 0, #ffe9fb 40%, #d9ecff 100%); mask-image: none; -webkit-mask-image: none; transform: none; }
#b-portal.shake { animation: zwshake 0.35s; }

/* ---- offline: "new version ready" button, "ready for the car" toast, Grown-ups panel ---- */
.zw-update { position: fixed; z-index: 57; left: calc(12px + var(--safe-l, 0px)); bottom: calc(76px + var(--safe-b, 0px)); display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; min-height: 52px; font: 800 17px/1.1 inherit; font-family: inherit; color: #fff; background: linear-gradient(160deg, #3be0d0, #12a79a); border: 4px solid #fff; border-radius: 999px; box-shadow: 0 6px 0 rgba(40, 20, 100, 0.45); pointer-events: auto; animation: zwUpd 2.4s ease-in-out infinite; }
.zw-update svg { width: 32px; height: 32px; flex: none; }
.zw-update:active { transform: scale(0.95); }
@keyframes zwUpd { 0%, 100% { box-shadow: 0 6px 0 rgba(40, 20, 100, 0.45), 0 0 0 0 rgba(59, 224, 208, 0.7); } 50% { box-shadow: 0 6px 0 rgba(40, 20, 100, 0.45), 0 0 0 12px rgba(59, 224, 208, 0); } }
@media (prefers-reduced-motion: reduce) { .zw-update { animation: none; } }
#zw-toast { position: fixed; z-index: 59; left: 50%; top: calc(10px + var(--safe-t, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: min(92vw, 560px); padding: 10px 18px; font: 800 17px/1.25 inherit; font-family: inherit; color: #fff; background: rgba(60, 30, 130, 0.92); border: 4px solid #fff; border-radius: 26px; pointer-events: none; }
#zw-toast svg { width: 34px; height: 34px; flex: none; color: #3be0d0; }
.zw-update.hidden, .zw-toast.hidden { display: none; }
.zw-off { display: grid; gap: 10px; }
.zw-off-line { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.zw-off-line svg { width: 34px; height: 34px; flex: none; }
.zw-off-line.ok svg { color: #18c9ba; }
.zw-off-line.bad svg { color: #d6455d; }
.zw-off-bar { height: 16px; border-radius: 99px; background: rgba(120, 90, 200, 0.25); overflow: hidden; border: 3px solid #fff; }
.zw-off-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3be0d0, #8f5bff); transition: width 0.3s; }
.zw-off-bar.hidden, .zw-pill.hidden { display: none; }
.zw-pill svg { width: 1.3em; height: 1.3em; vertical-align: -0.3em; }
/* ---------- Kid UI (js/kidui.js): calm HUD, four big menus ---------- */
body.compact { --b: 56px; --gap: 8px; --slot: 48px; --hb: calc(var(--slot) * 2.15 + 6px); }
.cluster.tr { align-items: flex-start; }
.cluster.br { grid-template-columns: repeat(2, auto); grid-template-rows: repeat(3, auto); grid-auto-flow: dense; }
.cluster.br #b-horn, .cluster.br #b-trainview { grid-area: 1 / 1; }
.cluster.br #b-exit, .cluster.br #b-hop, .cluster.br #b-down { grid-area: 1 / 2; }
.cluster.br #b-place { grid-area: 2 / 1; } .cluster.br #b-up { grid-area: 2 / 2; }
.cluster.br #b-remove { grid-area: 3 / 1; } .cluster.br #b-fly { grid-area: 3 / 2; }
body.touch #b-down { display: none; }
body.touch.vert #b-down { display: inline-flex; }
.kid-menu-btn { position: relative; }
.kid-menu-btn.badge::after { content: ""; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #ff4d6d; border: 3px solid #fff; }
/* portrait phones: the top-right buttons become a column down the right edge, so nothing collides with the top-left row */
body.portrait .cluster.tr { flex-direction: column; align-items: flex-end; }
body.portrait .cluster.br { bottom: calc(var(--hb) + var(--gap) + var(--safe-b)); }
body.compact .sheet .close, body.compact .tb-body .close { width: 48px; height: 48px; }
.zw-treasure { min-height: 56px; top: calc(var(--gap) + var(--safe-t) + (var(--b) - 56px) / 2); }
.zw-treasure .zw-nextgift { pointer-events: none; }
.zw-banner-row .zw-pill { min-height: 56px; min-width: 64px; }
.zw-banner.a2hs { bottom: calc(var(--hb) + var(--gap) * 2 + var(--safe-b)); }
/* the star counter: one small pill, stars only */
.zw-treasure .sep, .zw-treasure .ico, .zw-treasure b[data-c="gold"], .zw-treasure b[data-c="rainbow"], .zw-treasure .zw-nextgift { display: none; } /* gold, rainbow and the next gift are shown inside the shop */
body.compact .zw-treasure { top: calc(var(--gap) + var(--safe-t) + (var(--b) - 48px) / 2); font-size: 20px; padding: 3px 14px; min-height: 48px; }
body.compact.portrait .zw-treasure { top: calc(var(--b) * 1.3 + var(--gap) * 2 + var(--safe-t)); left: calc(var(--gap) + var(--safe-l) + 40px); }
#rings { top: calc(var(--b) + var(--gap) * 2 + var(--safe-t) + 4px); transition: opacity 0.4s; }
#rings.empty { opacity: 0; pointer-events: none; }
body.compact.portrait #rings { top: calc(var(--b) * 1.3 + var(--gap) * 4 + var(--safe-t) + 34px); }
/* hints and the add-to-home note stay small on phones */
body.compact .zw-toast { bottom: auto; top: calc(var(--b) + var(--gap) * 3 + var(--safe-t) + 40px); max-width: min(360px, calc(100vw - 2 * (var(--b) + var(--gap) * 3))); padding: 6px 12px 6px 6px; gap: 8px; border-width: 4px; }
body.compact .zw-toast img { width: 56px; height: 42px; }
body.compact .zw-toast span { font-size: 15px; }
body.compact .zw-banner.a2hs { bottom: calc(var(--hb) + var(--gap) * 2 + var(--safe-b)); width: min(560px, calc(100vw - 2 * (var(--b) * 2.6 + var(--gap) * 3))); }
body.compact.portrait .zw-banner.a2hs { top: calc(var(--b) * 1.3 + var(--gap) * 2 + var(--safe-t) + 56px); bottom: auto; left: calc(var(--gap) + var(--safe-l)); transform: none; width: calc(100vw - var(--b) - var(--gap) * 4 - var(--safe-l) - var(--safe-r)); }
body.compact .zw-banner-row { font-size: 12px; line-height: 1.25; padding: 6px 10px; gap: 6px; }
body.compact .zw-banner-row .zw-pill { min-height: 48px; min-width: 56px; }
/* the four menus */
.kid-menu { z-index: 22; }
.kid-menu .btn { pointer-events: auto; }
.kid-sheet { width: min(780px, 100%); text-align: center; padding: calc(var(--b) * 0.9) clamp(14px, 3vmin, 28px) clamp(16px, 3vmin, 28px); }
.kid-title { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 900; font-size: clamp(24px, 4.4vmin, 36px); line-height: 1; color: var(--ink); }
.kid-title .zi { font-size: 1.3em; color: var(--purple); --zi-2: var(--pink); --zi-3: var(--yellow); }
.kid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(92px, 22vmin, 140px), 1fr)); gap: clamp(12px, 2.6vmin, 22px) 10px; justify-items: center; margin-top: clamp(12px, 2.4vmin, 20px); }
.kt { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.kt[hidden] { display: none; }
.kt-btn.btn { --kt: clamp(76px, 17vmin, 112px); width: var(--kt); height: var(--kt); font-size: calc(var(--kt) * 0.56); position: relative; }
.kt-btn.btn .zw-bicon { width: 70%; height: 70%; }
.kt-label { font-weight: 800; font-size: clamp(15px, 2.7vmin, 21px); line-height: 1.1; color: var(--ink); }
@media (max-height: 460px) { .kid-sheet { padding-top: calc(var(--b) * 0.7); } .kt-btn.btn { --kt: 76px; } .kid-grid { gap: 10px 8px; } }
/* together card: tap Mum or Dad */
.together { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(40, 20, 90, 0.35); }
.together.hidden { display: none; }
.tg-box { position: relative; background: #fff; border-radius: 28px; padding: 22px 26px 26px; box-shadow: 0 10px 0 rgba(30, 10, 90, 0.25); max-width: calc(100vw - 32px); }
.tg-who { text-align: center; font-weight: 800; font-size: 26px; color: #3b1f7a; margin: 0 40px 14px; }
.tg-grid { display: grid; grid-template-columns: repeat(4, minmax(96px, 1fr)); gap: 16px; }
body.compact .tg-grid { grid-template-columns: repeat(2, minmax(96px, 1fr)); }
.tg-btn { appearance: none; border: 0; background: none; display: grid; justify-items: center; gap: 8px; cursor: pointer; touch-action: manipulation; font: inherit; }
.tg-ic { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 26px; background: linear-gradient(160deg, #ff8fd0, #ff5fae); box-shadow: 0 6px 0 rgba(30, 10, 90, 0.25); }
.tg-btn:nth-child(2) .tg-ic { background: linear-gradient(160deg, #a98bff, #7b55f5); }
.tg-btn:nth-child(3) .tg-ic { background: linear-gradient(160deg, #ffd96a, #ffb02e); }
.tg-btn:nth-child(4) .tg-ic { background: linear-gradient(160deg, #6fe6dc, #18c6b6); }
.tg-ic svg { width: 56px; height: 56px; color: #fff; fill: currentColor; }
.tg-lb { font-weight: 800; font-size: 18px; color: #3b1f7a; }
.tg-close { position: absolute; top: 12px; right: 12px; width: 52px; height: 52px; border: 0; border-radius: 16px; background: #ff6fb5; color: #fff; cursor: pointer; }
.tg-close svg { width: 26px; height: 26px; fill: currentColor; }