/* =========================================================
   Arnika Games — shared design system
   One palette, one font, one shape language ("soft clay").
   Zones with other art styles still use these tokens for UI chrome.
   ========================================================= */

@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/baloo-2-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/baloo-2-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/baloo-2-devanagari-500-normal.woff2) format("woff2");
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/baloo-2-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/baloo-2-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/baloo-2-devanagari-700-normal.woff2) format("woff2");
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/baloo-2-latin-800-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/baloo-2-latin-ext-800-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/baloo-2-devanagari-800-normal.woff2) format("woff2");
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }

:root {
  /* palette — pastel but rich, warm-leaning */
  --cream: #FFF6EA;
  --sand: #FFE9D2;
  --peach: #FFB98E;
  --coral: #FF7F6E;
  --berry: #E5689A;
  --sun: #FFC94D;
  --honey: #F5A623;
  --mint: #7FD8B4;
  --leaf: #5DB86A;
  --sky: #86C9F2;
  --ocean: #3E9BD8;
  --lilac: #B7A2F2;
  --plum: #7B5CC9;
  --ink: #4A3350;          /* text: warm plum-brown, never pure black */
  --ink-soft: #7D6680;
  --white: #FFFDF9;
  --night: #2B2550;

  --shadow-clay: inset 0 -7px 0 rgba(60, 25, 40, .14), inset 0 5px 0 rgba(255, 255, 255, .45), 0 10px 20px -6px rgba(90, 45, 40, .35);
  --shadow-clay-pressed: inset 0 -2px 0 rgba(60, 25, 40, .14), inset 0 3px 0 rgba(255, 255, 255, .35), 0 3px 8px -4px rgba(90, 45, 40, .35);
  --shadow-soft: 0 16px 40px -12px rgba(90, 45, 40, .28);

  --r-sm: 16px;
  --r-md: 24px;
  --r-lg: 36px;
  --r-pill: 999px;

  --tap: 84px;             /* minimum kid tap target */
  --tap-lg: 120px;

  --font: "Baloo 2", ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body { position: fixed; inset: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img, svg { display: block; }
.game-surface, .game-surface * { -webkit-user-select: none; user-select: none; touch-action: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 4px solid var(--ocean); outline-offset: 4px; border-radius: 12px; }

/* ---------- boot ---------- */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--sand); z-index: 100; transition: opacity .5s; }
.boot.is-done { opacity: 0; pointer-events: none; }
.boot__blob { width: 84px; height: 84px; border-radius: 50%; background: var(--coral); box-shadow: var(--shadow-clay); animation: blob 1s var(--ease-bounce) infinite alternate; }
@keyframes blob { from { transform: scale(1, 1) translateY(0); } to { transform: scale(1.12, .88) translateY(10px); } }
.noscript { padding: 40px; font-size: 24px; text-align: center; }

/* ---------- screens ---------- */
#app { position: fixed; inset: 0; }
.screen {
  position: absolute; inset: 0; overflow: hidden;
  padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  animation: screen-in .45s var(--ease-bounce) both;
}
.screen--scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.screen.is-leaving { animation: screen-out .25s ease-in both; }
@keyframes screen-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes screen-out { to { opacity: 0; transform: scale(1.02); } }

.bg-sky {
  background:
    radial-gradient(120% 70% at 15% 0%, #FFF3DC 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 10%, #FFD9E4 0%, transparent 55%),
    linear-gradient(180deg, #CDEBFF 0%, #FFE8D6 70%, #FFD9BD 100%);
}
.bg-warm {
  background:
    radial-gradient(90% 60% at 0% 0%, #FFE4C2 0%, transparent 60%),
    radial-gradient(80% 60% at 100% 100%, #FFD1DC 0%, transparent 60%),
    var(--cream);
}
.bg-night { background: radial-gradient(120% 90% at 50% 10%, #4B3F86 0%, #2B2550 55%, #1C1838 100%); color: #F4EEFF; }

.canvas-host { position: absolute; inset: 0; }
.canvas-host canvas { width: 100% !important; height: 100% !important; display: block; outline: none; }

/* ---------- buttons ---------- */
.btn {
  --c: var(--coral); --c-ink: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 10px 28px;
  border-radius: var(--r-pill);
  background: var(--c); color: var(--c-ink);
  font-weight: 800; font-size: 22px; letter-spacing: .01em;
  box-shadow: var(--shadow-clay);
  transition: transform .18s var(--ease-bounce), box-shadow .18s, filter .2s;
  text-decoration: none;
}
.btn:active, .btn.is-pressed { transform: translateY(4px) scale(.97, .95); box-shadow: var(--shadow-clay-pressed); }
.btn svg { width: 30px; height: 30px; flex: none; }
.btn--sun { --c: var(--sun); --c-ink: var(--ink); }
.btn--mint { --c: var(--mint); --c-ink: var(--ink); }
.btn--sky { --c: var(--sky); --c-ink: var(--ink); }
.btn--lilac { --c: var(--lilac); --c-ink: var(--ink); }
.btn--cream { --c: var(--white); --c-ink: var(--ink); }
.btn--ghost { --c: rgba(255,255,255,.55); --c-ink: var(--ink); box-shadow: inset 0 0 0 3px rgba(74,51,80,.12); }
.btn--danger { --c: #F16060; }
.btn--block { width: 100%; }
.btn--sm { min-height: 52px; font-size: 18px; padding: 8px 20px; }
.btn[disabled] { filter: grayscale(.6) opacity(.6); pointer-events: none; }

.icon-btn {
  --c: var(--white);
  width: var(--tap); height: var(--tap); flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c);
  box-shadow: var(--shadow-clay);
  transition: transform .18s var(--ease-bounce), box-shadow .18s;
}
.icon-btn svg { width: 56%; height: 56%; }
.icon-btn:active, .icon-btn.is-pressed { transform: translateY(4px) scale(.94, .9); box-shadow: var(--shadow-clay-pressed); }
.icon-btn--sun { --c: var(--sun); }
.icon-btn--mint { --c: var(--mint); }
.icon-btn--sky { --c: var(--sky); }
.icon-btn--coral { --c: var(--coral); color: var(--white); }
.icon-btn--lilac { --c: var(--lilac); }
.icon-btn--berry { --c: var(--berry); color: var(--white); }
.icon-btn--glass { --c: rgba(255,255,255,.22); color: #fff; box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 10px 24px -10px rgba(0,0,0,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.icon-btn.is-active { --c: var(--sun); }

/* top bar with back button — always top-left, same spot in every zone */
.topbar {
  position: absolute; z-index: 20;
  top: calc(14px + var(--safe-t)); left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar__group { display: flex; gap: 12px; align-items: center; }

.squish { animation: squish .42s var(--ease-bounce); }
@keyframes squish { 0% { transform: scale(1); } 30% { transform: scale(1.14, .84); } 60% { transform: scale(.94, 1.08); } 100% { transform: scale(1); } }
.wiggle { animation: wiggle .5s ease-in-out; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
.bounce-in { animation: bounce-in .6s var(--ease-bounce) both; }
@keyframes bounce-in { from { opacity: 0; transform: scale(.4) translateY(30px); } to { opacity: 1; transform: none; } }

/* ---------- cards & forms (parent-facing) ---------- */
.card {
  background: var(--white); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-soft);
  width: min(460px, 100%);
}
.card h2 { margin: 0 0 6px; font-size: 30px; line-height: 1.1; font-weight: 800; }
.card p { margin: 0 0 18px; color: var(--ink-soft); font-size: 17px; line-height: 1.4; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 700; font-size: 16px; }
.input {
  width: 100%; min-height: 58px; padding: 10px 20px;
  border-radius: var(--r-md); border: 3px solid #F1DCCB; background: var(--cream);
  font-size: 19px; font-weight: 600; outline: none; transition: border-color .2s, box-shadow .2s;
  -webkit-user-select: text; user-select: text;
}
.input:focus { border-color: var(--peach); box-shadow: 0 0 0 5px rgba(255, 185, 142, .3); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); margin: 4px 0 18px; line-height: 1.35; }
.check input { width: 26px; height: 26px; accent-color: var(--coral); flex: none; margin: 0; }
.check a, .link { color: var(--plum); font-weight: 700; }
.form-error { color: #C53D4F; font-weight: 700; min-height: 24px; margin: 0 0 8px; font-size: 16px; }
.muted { color: var(--ink-soft); }
.stack { display: grid; gap: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- welcome ---------- */
.welcome { display: grid; grid-template-rows: 1fr auto; place-items: center; }
.welcome__stage { position: absolute; inset: 0; }
.welcome__brand { position: absolute; top: calc(18px + var(--safe-t)); left: 0; right: 0; display: flex; justify-content: center; z-index: 2; pointer-events: none; }
.welcome__brand svg { width: min(420px, 78vw); height: auto; filter: drop-shadow(0 8px 10px rgba(120, 60, 40, .18)); }
.welcome__actions {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(22px + var(--safe-b)); z-index: 2;
  display: grid; gap: 14px; width: min(420px, calc(100% - 32px));
}
.welcome__actions .btn--play { min-height: 92px; font-size: 30px; }
.welcome__actions .btn--play svg { width: 44px; height: 44px; }
.welcome__parent { display: flex; gap: 12px; }
.welcome__parent .btn { flex: 1; }
.sheet {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  background: rgba(74, 51, 80, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade-in .25s both; overflow-y: auto; touch-action: pan-y;
}
.sheet > .card { animation: bounce-in .45s var(--ease-bounce) both; position: relative; }
.sheet__close { position: absolute; top: 14px; right: 14px; width: 56px; height: 56px; }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- profile picker ---------- */
.picker { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.picker__title { display: flex; align-items: center; gap: 14px; }
.picker__title .who-icon { width: 76px; height: 76px; }
.picker__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; max-width: 980px; }
.avatar-tile {
  display: grid; justify-items: center; gap: 8px; width: 150px;
  transition: transform .2s var(--ease-bounce);
}
.avatar-tile:active { transform: scale(.94); }
.avatar-tile__face { width: 132px; height: 132px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-clay); display: grid; place-items: center; overflow: hidden; }
.avatar-tile__face svg { width: 100%; height: 100%; }
.avatar-tile__name { font-weight: 800; font-size: 24px; line-height: 1; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-tile--add .avatar-tile__face { background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 4px rgba(74,51,80,.14); }
.avatar-tile--add svg { width: 56px; height: 56px; color: var(--ink-soft); }
.avatar-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.avatar-choice { aspect-ratio: 1; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 3px #F1DCCB; transition: transform .2s var(--ease-bounce), box-shadow .2s; overflow: hidden; }
.avatar-choice svg { width: 100%; height: 100%; }
.avatar-choice[aria-pressed="true"] { box-shadow: inset 0 0 0 5px var(--coral), 0 6px 14px -6px rgba(255,127,110,.8); transform: scale(1.06); }
.lang-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.lang-choice { min-height: 64px; border-radius: var(--r-md); background: var(--cream); box-shadow: inset 0 0 0 3px #F1DCCB; font-weight: 800; font-size: 20px; display: grid; place-items: center; line-height: 1; }
.lang-choice small { display: block; font-weight: 600; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.lang-choice[aria-pressed="true"] { background: var(--sun); box-shadow: var(--shadow-clay); }

/* profile chip */
.profile-chip { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; min-height: 72px; border-radius: var(--r-pill); background: rgba(255,253,249,.88); box-shadow: var(--shadow-clay); backdrop-filter: blur(6px); }
.profile-chip__face { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--cream); }
.profile-chip__face svg { width: 100%; height: 100%; }
.profile-chip__name { font-weight: 800; font-size: 22px; max-width: 32vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- island ---------- */
.island-hint { position: absolute; bottom: calc(18px + var(--safe-b)); left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; display: flex; gap: 10px; }
.island-hint span { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.8); animation: dot 1.4s ease-in-out infinite; }
.island-hint span:nth-child(2) { animation-delay: .15s; } .island-hint span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-8px); opacity: 1; } }
.zone-badges { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.zone-badge {
  position: absolute; left: 0; top: 0; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; background: var(--white); box-shadow: var(--shadow-clay);
  display: grid; place-items: center; pointer-events: auto;
  transition: opacity .3s; will-change: transform;
}
.zone-badge svg { width: 62%; height: 62%; }
.zone-badge::after { content: ""; position: absolute; bottom: -9px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-top-color: var(--white); border-bottom: 0; }
.zone-badge--pet { background: var(--sun); } .zone-badge--pet::after { border-top-color: var(--sun); }
.zone-badge--bubbles { background: var(--sky); } .zone-badge--bubbles::after { border-top-color: var(--sky); }
.zone-badge--tent { background: var(--berry); color: #fff; } .zone-badge--tent::after { border-top-color: var(--berry); }

/* ---------- pet ---------- */
.pet-tray {
  position: absolute; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + var(--safe-b));
  display: flex; gap: 14px; padding: 12px; border-radius: var(--r-pill);
  background: rgba(255,253,249,.82); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px);
}
.food { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--cream); box-shadow: var(--shadow-clay); display: grid; place-items: center; touch-action: none; }
.food svg { width: 74%; height: 74%; pointer-events: none; }
.food-ghost { position: fixed; z-index: 50; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; filter: drop-shadow(0 14px 12px rgba(70,30,20,.3)); transition: transform .12s; }
.food-ghost svg { width: 100%; height: 100%; }
.pet-side { position: absolute; z-index: 10; right: calc(14px + var(--safe-r)); top: 50%; transform: translateY(-50%); display: grid; gap: 16px; }
.mic-btn { position: relative; }
.mic-btn.is-listening::before, .mic-btn.is-listening::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 4px solid var(--coral); animation: ring 1.6s ease-out infinite; }
.mic-btn.is-listening::after { animation-delay: .8s; }
.mic-btn.is-hearing { --c: var(--coral); color: #fff; }
.mic-btn.is-denied { filter: grayscale(1) opacity(.6); }
@keyframes ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.zzz { position: absolute; z-index: 6; pointer-events: none; font-weight: 800; color: #fff; font-size: 44px; text-shadow: 0 4px 10px rgba(0,0,0,.25); animation: zzz 3s ease-in-out infinite; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(40px, -90px) scale(1.2); } }

/* ---------- bubbles ---------- */
.bubbles { background: #10182C; }
.bubbles video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); filter: brightness(.62) saturate(.9) contrast(.95); }
.bubbles canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bubbles__fallback-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 20% 85%, rgba(127,216,180,.35), transparent 70%),
  radial-gradient(60% 50% at 85% 20%, rgba(183,162,242,.35), transparent 70%),
  linear-gradient(180deg, #1B2550 0%, #1E3F6B 60%, #205E7A 100%); }
.privacy-note {
  position: absolute; z-index: 15; left: 16px; right: 16px; margin: 0 auto; width: fit-content;
  bottom: calc(14px + var(--safe-b));
  display: flex; align-items: center; gap: 10px; line-height: 1.25;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: rgba(20, 24, 44, .62); color: #EAF4FF; font-size: 15px; font-weight: 600;
  backdrop-filter: blur(8px); transition: opacity .8s;
}
.privacy-note svg { width: 22px; height: 22px; flex: none; }
.privacy-note.is-faded { opacity: 0; pointer-events: none; }
.loader-orb { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--sky) 45%, var(--plum)); animation: blob .9s var(--ease-bounce) infinite alternate; opacity: .85; z-index: 3; }

/* ---------- tent ---------- */
.tent { background:
  repeating-conic-gradient(from -90deg at 50% -30%, #FF9A8B 0 7.5deg, #FFE3C8 7.5deg 15deg); }
.tent::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 110%, rgba(255,201,77,.55), transparent 70%), linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,240,220,.85) 100%); }
.tent__choices { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 6vw, 70px); padding: 110px 20px 40px; flex-wrap: wrap; }
.tent__door {
  width: clamp(200px, 34vw, 330px); aspect-ratio: 1; border-radius: 44px;
  background: var(--white); box-shadow: var(--shadow-clay), var(--shadow-soft);
  display: grid; place-items: center; padding: 14px;
  transition: transform .2s var(--ease-bounce);
}
.tent__door svg { width: 100%; height: 100%; }
.tent__door:active { transform: scale(.94, .9) translateY(4px); }
@media (orientation: portrait) and (max-width: 700px) { .tent__door { width: min(62vw, 34vh); } .tent__choices { flex-direction: column; padding-top: 100px; } }

/* piano */
.piano { background: linear-gradient(180deg, #FFF0DE, #FFD9C4); display: flex; flex-direction: column; }
.piano__keys {
  flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(6px, 1.2vw, 14px);
  padding: calc(104px + var(--safe-t)) calc(14px + var(--safe-r)) calc(18px + var(--safe-b)) calc(14px + var(--safe-l));
  align-items: center;
}
.key {
  --c: var(--coral);
  position: relative; border-radius: 30px 30px 40px 40px; background: var(--c);
  box-shadow: inset 0 -16px 0 rgba(60,25,40,.16), inset 0 8px 0 rgba(255,255,255,.4), 0 12px 18px -8px rgba(90,45,40,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: calc(100% - var(--i, 0) * 4.5%); min-width: 0; touch-action: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,.18) 0 18%, transparent 18% 100%);
  transition: transform .12s, box-shadow .12s;
}
.key.is-down { transform: translateY(6px) scaleY(.97); box-shadow: inset 0 -6px 0 rgba(60,25,40,.16), inset 0 6px 0 rgba(255,255,255,.35), 0 4px 8px -6px rgba(90,45,40,.45); }
.key__face { width: min(94%, 140px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 6px 10px -6px rgba(60,25,40,.4); display: grid; place-items: center; transform-origin: 50% 90%; }
.key__face svg { width: 92%; height: 92%; }
.key.is-down .key__face { animation: face-bounce .45s var(--ease-bounce); }
@keyframes face-bounce { 0% { transform: scale(1); } 35% { transform: scale(1.22, .82) translateY(6px); } 70% { transform: scale(.92, 1.12) translateY(-10px); } 100% { transform: none; } }
.key__dot, .key::before { position: absolute; bottom: 22px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: inset 0 -3px 0 rgba(60,25,40,.15); }
.key::before { content: ""; top: 22px; bottom: auto; }
.note-pop { position: absolute; pointer-events: none; z-index: 30; width: 46px; height: 46px; animation: note-pop 1.1s ease-out forwards; }
@keyframes note-pop { from { opacity: 1; transform: translate(-50%, 0) scale(.6) rotate(-10deg); } to { opacity: 0; transform: translate(-50%, -160px) scale(1.2) rotate(15deg); } }
@media (orientation: portrait) {
  .piano__keys { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
  .key { flex-direction: row; justify-content: center; height: 100%; border-radius: 34px; }
  .key::before { top: 50%; margin-top: -9px; left: 22px; }
  .key__face { width: auto; height: 80%; max-height: 120px; }
  .key__dot { bottom: auto; top: 50%; margin-top: -9px; right: 22px; }
  .piano__keys { align-items: stretch; }
}

/* words */
.words { background: linear-gradient(180deg, #E8F6FF, #FFF1E0); }
.words__grid {
  position: absolute; inset: 0; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 18vw, 170px), 1fr)); gap: clamp(10px, 2vw, 22px);
  padding: calc(112px + var(--safe-t)) calc(16px + var(--safe-r)) calc(24px + var(--safe-b)) calc(16px + var(--safe-l));
  align-content: start;
}
.word-card { aspect-ratio: 1; border-radius: 32px; background: var(--white); box-shadow: var(--shadow-clay); display: grid; place-items: center; padding: 8%; transition: transform .2s var(--ease-bounce); }
.word-card svg { width: 100%; height: 100%; }
.word-card:active { transform: scale(.92, .88) translateY(4px); }
.word-card.is-seen { background: #FFFBEF; }
.lang-toggle { display: flex; gap: 8px; padding: 8px; border-radius: var(--r-pill); background: rgba(255,253,249,.9); box-shadow: var(--shadow-soft); }
.lang-toggle button { width: 68px; height: 68px; border-radius: 50%; font-weight: 800; font-size: 24px; display: grid; place-items: center; transition: transform .2s var(--ease-bounce), background .2s; line-height: 1; }
.lang-toggle button[aria-pressed="true"] { background: var(--sun); box-shadow: var(--shadow-clay); transform: scale(1.06); }
.lang-toggle button .deva { font-size: 30px; transform: translateY(2px); }
.word-big { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(255, 246, 234, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade-in .2s both; }
.word-big__inner { display: grid; justify-items: center; gap: 4px; animation: bounce-in .5s var(--ease-bounce) both; padding: 20px; }
.word-big__art { width: min(62vmin, 380px); aspect-ratio: 1; }
.word-big__art svg { width: 100%; height: 100%; }
.word-big__word { font-weight: 800; font-size: clamp(54px, 12vmin, 110px); line-height: 1.05; color: var(--ink); text-align: center; letter-spacing: .01em; }
.word-big__translit { font-size: clamp(22px, 4vmin, 32px); color: var(--ink-soft); font-weight: 700; min-height: 1em; }
.word-big__again { margin-top: 10px; }

/* ---------- parent corner ---------- */
.gate { display: grid; place-items: center; text-align: center; }
.gate__inner { display: grid; justify-items: center; gap: 18px; max-width: 420px; }
.hold-btn { position: relative; width: 190px; height: 190px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-clay); display: grid; place-items: center; touch-action: none; transition: transform .2s var(--ease-bounce); }
.hold-btn.is-holding { transform: scale(.95); }
.hold-btn svg.ring { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); }
.hold-btn svg.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.hold-btn .lock { width: 76px; height: 76px; }
.parent { max-width: 760px; margin: 0 auto; padding-top: calc(110px + var(--safe-t)); }
.parent h1 { font-size: 38px; margin: 0 0 18px; line-height: 1; font-weight: 800; }
.parent section { background: var(--white); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-soft); margin-bottom: 18px; }
.parent h3 { margin: 0 0 12px; font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.parent h3 svg { width: 30px; height: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 56px; min-width: 72px; padding: 6px 18px; border-radius: var(--r-pill); background: var(--cream); box-shadow: inset 0 0 0 3px #F1DCCB; font-weight: 800; font-size: 18px; }
.chip[aria-pressed="true"] { background: var(--sun); box-shadow: var(--shadow-clay); }
.prof-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 2px dashed #F1DCCB; }
.prof-row:last-child { border-bottom: 0; }
.prof-row__face { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--cream); flex: none; }
.prof-row__face svg { width: 100%; height: 100%; }
.prof-row__name { flex: 1; font-weight: 800; font-size: 22px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.prof-row .btn { min-height: 52px; font-size: 17px; padding: 6px 18px; }

/* ---------- rest ---------- */
.rest { display: grid; place-items: center; }
.rest__moon { position: absolute; top: calc(30px + var(--safe-t)); right: calc(40px + var(--safe-r)); width: 90px; height: 90px; border-radius: 50%; box-shadow: inset -22px -8px 0 0 #FFE7A3; transform: rotate(-20deg); }
.star { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #FFF5CC; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }

/* ---------- toasts ---------- */
.toast { position: fixed; z-index: 90; left: 50%; top: calc(18px + var(--safe-t)); transform: translateX(-50%); background: var(--ink); color: var(--white); padding: 12px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: 17px; box-shadow: var(--shadow-soft); animation: toast 3.2s ease both; max-width: calc(100% - 40px); text-align: center; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -20px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }

/* ---------- responsive ---------- */
@media (max-width: 520px), (max-height: 520px) {
  :root { --tap: 80px; }
  .card { padding: 22px; }
  .avatar-tile { width: 120px; } .avatar-tile__face { width: 108px; height: 108px; } .avatar-tile__name { font-size: 20px; }
  .picker { gap: 18px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .welcome__brand svg { width: min(300px, 40vw); }
  .welcome__actions { left: auto; right: calc(20px + var(--safe-r)); transform: none; width: min(360px, 44vw); bottom: calc(14px + var(--safe-b)); }
  .welcome__actions .btn--play { min-height: 80px; }
  .piano__keys, .words__grid { padding-top: calc(100px + var(--safe-t)); }
  .tent__choices { padding-top: 96px; }
  .tent__door { width: min(36vw, 62vh); }
  .parent { padding-top: calc(100px + var(--safe-t)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 430px) {
  .pet-tray { gap: 8px; padding: 8px; }
  .food { width: 80px; height: 80px; }
}
.is-night .pet-tray { background: rgba(60, 52, 110, .7); }
@media (orientation: portrait) {
  .pet-side { top: calc(14px + var(--safe-t)); transform: none; display: flex; }
}

/* =========================================================
   Phase 3 — pet picker, calm room, zoo, art studio
   ========================================================= */

/* ---------- pet picker ---------- */
.petpick__arrow { position: absolute; z-index: 10; top: 50%; margin-top: -42px; }
.petpick__arrow--l { left: calc(16px + var(--safe-l)); }
.petpick__arrow--r { right: calc(16px + var(--safe-r)); }
.petpick__choose {
  position: absolute; z-index: 10; left: 50%; bottom: calc(26px + var(--safe-b)); transform: translateX(-50%);
  width: 124px; height: 124px; border-radius: 50%; background: var(--coral); color: #fff;
  box-shadow: var(--shadow-clay), 0 0 0 10px rgba(255,255,255,.55); display: grid; place-items: center;
  transition: transform .2s var(--ease-bounce); animation: heart-beat 1.6s ease-in-out infinite;
}
.petpick__choose svg { width: 60%; height: 60%; --fill: #fff; }
.petpick__choose.is-pressed { transform: translateX(-50%) scale(.92, .88); }
.petpick__choose.is-chosen { animation: none; transform: translateX(-50%) scale(1.15); }
@keyframes heart-beat { 0%, 100% { transform: translateX(-50%) scale(1); } 12% { transform: translateX(-50%) scale(1.08); } 24% { transform: translateX(-50%) scale(1); } 36% { transform: translateX(-50%) scale(1.05); } }
.petpick__dots { position: absolute; z-index: 9; left: 50%; transform: translateX(-50%); bottom: calc(166px + var(--safe-b)); display: flex; gap: 10px; padding: 8px 12px; border-radius: var(--r-pill); background: rgba(255,253,249,.7); }
.petpick__dots span { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -2px 0 rgba(60,25,40,.15); transition: transform .25s var(--ease-bounce); }
.petpick__dots span.is-on { transform: scale(1.5); box-shadow: 0 0 0 3px var(--white), inset 0 -2px 0 rgba(60,25,40,.15); }
@media (max-height: 520px) and (orientation: landscape) {
  .petpick__choose { width: 100px; height: 100px; bottom: calc(14px + var(--safe-b)); left: auto; right: calc(120px + var(--safe-r)); transform: none; animation: none; }
  .petpick__choose.is-pressed { transform: scale(.92, .88); }
  .petpick__choose.is-chosen { transform: scale(1.15); }
  .petpick__dots { bottom: calc(14px + var(--safe-b)); left: calc(16px + var(--safe-l)); transform: none; }
}

/* pet tray: six foods; two rows on narrow phones */
@media (max-width: 560px) and (orientation: portrait) {
  .pet-tray { display: grid; grid-template-columns: repeat(3, 80px); gap: 10px; padding: 10px; border-radius: 36px; }
  .food { width: 80px; height: 80px; }
}
@media (orientation: portrait) and (max-width: 560px) { .pet-side { gap: 10px; } }

/* ---------- calm room (soft watercolour) ---------- */
.calm { background: #F5EEE3; color: #5E5266; }
.calm__bg { position: absolute; inset: 0; background: #F5EEE3 center / 100% 100% no-repeat; }
.calm-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.calm .back-btn, .calm-toy .back-btn { --c: #F3E2A9; box-shadow: 0 6px 0 rgba(94,82,102,.14), 0 14px 24px -12px rgba(94,82,102,.45); }
.calm__shelf {
  --cols: 5; --rows: 3;
  --cell: min(calc((100vw - 90px) / var(--cols)), calc((100vh - 150px - var(--safe-t) - var(--safe-b)) / var(--rows)), 168px);
  position: absolute; left: 50%; top: calc(50% + 34px); transform: translate(-50%, -50%);
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); gap: 10px 14px;
  padding: 16px 18px 22px; border-radius: 28px;
  background: #C9A98A var(--paper-wood);
  box-shadow: 0 18px 40px -18px rgba(94,82,102,.55), inset 0 0 0 6px rgba(169,135,107,.55);
}
.calm__cubby {
  position: relative; width: var(--cell); height: var(--cell); border-radius: 20px; padding: 8%;
  background: linear-gradient(180deg, rgba(94,82,102,.22), rgba(94,82,102,0) 12%), #F6EEE3 var(--paper-cream);
  border-bottom: 6px solid #A9876B;
  transition: transform .2s var(--ease-bounce);
}
.calm__cubby img { width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .35s; }
.calm__cubby img.is-in { opacity: 1; }
.calm__cubby.is-pressed { transform: scale(.94, .9) translateY(3px); }
.calm__cubby.is-decor { cursor: default; opacity: .95; }
@media (orientation: portrait) { .calm__shelf { --cols: 3; --rows: 5; --cell: min(calc((100vw - 76px) / 3), calc((100vh - 170px - var(--safe-t) - var(--safe-b)) / 5), 168px); } }
@media (max-height: 520px) and (orientation: landscape) { .calm__shelf { --cols: 5; gap: 6px 10px; padding: 10px 14px 14px; top: calc(50% + 40px); --cell: min(calc((100vw - 200px) / 5), calc((100vh - 128px) / 3), 150px); } }

.calm-toy { position: absolute; inset: 0; z-index: 25; background: #F5EEE3; overflow: hidden;
  animation: toy-open .5s cubic-bezier(.2,.8,.2,1) both; clip-path: circle(150% at var(--ox) var(--oy)); }
.calm-toy.is-closing { animation: toy-close .38s ease-in both; }
@keyframes toy-open { from { clip-path: circle(0% at var(--ox) var(--oy)); } to { clip-path: circle(150% at var(--ox) var(--oy)); } }
@keyframes toy-close { from { clip-path: circle(150% at var(--ox) var(--oy)); } to { clip-path: circle(0% at var(--ox) var(--oy)); } }
.calm-toy__stage { position: absolute; inset: 0; }
.calm-toy__paper { position: absolute; inset: 0; pointer-events: none; background-image: var(--paper); mix-blend-mode: multiply; opacity: .2; }
.calm-toy__tools { position: absolute; z-index: 21; top: calc(14px + var(--safe-t)); right: calc(14px + var(--safe-r)); display: flex; gap: 12px; }
.wc-btn { --c: #FBF7EF; color: #5E5266; box-shadow: 0 6px 0 rgba(94,82,102,.14), 0 14px 24px -12px rgba(94,82,102,.45); }
.wc-btn:active, .wc-btn.is-pressed { box-shadow: 0 2px 0 rgba(94,82,102,.14); }

/* ---------- zoo (low-poly toy) ---------- */
.zoo { background: #BFE6FF; }
.zoo__nav { position: absolute; z-index: 12; top: 50%; margin-top: -42px; }
.zoo__nav--l { left: calc(14px + var(--safe-l)); }
.zoo__nav--r { right: calc(14px + var(--safe-r)); }
.zoo__tray { position: absolute; z-index: 12; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); display: flex; gap: 12px; padding: 12px; border-radius: var(--r-pill); background: rgba(255,253,249,.88); box-shadow: var(--shadow-soft); }
.zoo__food { width: var(--tap); height: var(--tap); border-radius: 22px; background: #FFF6E6; box-shadow: var(--shadow-clay); display: grid; place-items: center; touch-action: none; clip-path: polygon(12% 0, 88% 0, 100% 14%, 100% 86%, 88% 100%, 12% 100%, 0 86%, 0 14%); }
.zoo__food svg { width: 72%; height: 72%; pointer-events: none; }
.zoo__ghost { position: fixed; z-index: 50; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; filter: drop-shadow(0 12px 10px rgba(30,40,60,.3)); }
.zoo__ghost svg { width: 100%; height: 100%; }
.zoo__fx { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.zoo__heart { position: absolute; width: 46px; color: #FF6F8A; animation: note-pop 1.4s ease-out both; }
.zoo__name { position: absolute; z-index: 9; left: 0; top: 0; pointer-events: none; display: grid; justify-items: center; padding: 8px 26px 10px; border-radius: 26px; background: #FFFDF9; box-shadow: 0 8px 0 rgba(40,60,90,.14), var(--shadow-soft); will-change: transform; }
.zoo__name::after { content: ""; position: absolute; bottom: -14px; left: 50%; margin-left: -14px; border: 14px solid transparent; border-top-color: #FFFDF9; border-bottom: 0; }
.zoo__name-word { font-weight: 800; font-size: clamp(36px, 7vmin, 64px); line-height: 1.05; color: var(--ink); }
.zoo__name-tr { font-weight: 700; font-size: 20px; color: var(--ink-soft); }
.zoo__name-tr:empty { display: none; }
@media (max-width: 560px) and (orientation: portrait) {
  .zoo__tray { display: grid; grid-template-columns: repeat(3, 80px); gap: 10px; padding: 10px; border-radius: 34px; }
  .zoo .topbar__group { gap: 8px; }
  .zoo .topbar .icon-btn { width: 76px; height: 76px; }
}
@media (max-height: 520px) and (orientation: landscape) { .zoo__food { width: 76px; height: 76px; } .zoo__tray { gap: 8px; padding: 8px; } }

/* ---------- art studio (crayon & chalk on kraft paper) ---------- */
.art { background: #E8D7BA var(--kraft); }
.art__body { position: absolute; inset: 0; }
.art__home { position: absolute; inset: calc(96px + var(--safe-t)) 16px calc(16px + var(--safe-b)); display: grid; place-content: center; grid-template-columns: repeat(4, var(--s)); gap: clamp(14px, 3vw, 34px); --s: min(22vw, 250px, calc(100vh - 160px)); }
.art__card { width: var(--s); height: var(--s); border-radius: 36px; background: center / 100% 100% no-repeat; display: grid; place-items: center; transition: transform .2s var(--ease-bounce); filter: drop-shadow(0 10px 10px rgba(90,60,30,.25)); }
.art__card svg { width: 66%; height: 66%; }
.art__card.is-pressed { transform: scale(.94, .9) rotate(-2deg); }
.art__card:nth-child(2) { transform: rotate(1.5deg); } .art__card:nth-child(3) { transform: rotate(-1.5deg); }
@media (orientation: portrait) { .art__home { grid-template-columns: repeat(2, var(--s)); --s: min(42vw, 260px, calc((100vh - 170px) / 2)); } }

.art__stage { position: absolute; left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); top: calc(96px + var(--safe-t)); bottom: calc(8px + var(--safe-b)); }
.art__body.is-tools .art__stage { bottom: calc(118px + var(--safe-b)); }
.art__cv { width: 100%; height: 100%; display: block; touch-action: none; }
.art__rail { position: absolute; z-index: 12; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); display: flex; gap: 12px; padding: 10px 14px; border-radius: 30px; background: rgba(255,253,247,.75); box-shadow: 0 10px 24px -12px rgba(90,60,30,.45); }
.art__tool { width: var(--tap); height: var(--tap); border-radius: 26px; background: #FFFDF7; display: grid; place-items: center; box-shadow: 0 6px 0 rgba(90,60,30,.18); color: var(--ink); transition: transform .2s var(--ease-bounce), box-shadow .2s; }
.art__tool svg { width: 58%; height: 58%; }
.art__tool img { width: 70%; height: 70%; }
.art__tool.is-on { transform: translateY(-8px); box-shadow: 0 0 0 5px var(--sun), 0 12px 0 rgba(90,60,30,.16); }
.art__tool.is-pressed { transform: scale(.92); }
.art__swatch { width: 74%; height: 74%; border-radius: 50%; background: center / 100% no-repeat; }
.art__palette { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(60,40,20,.28); animation: fade-in .2s both; }
.art__palette-grid { display: grid; grid-template-columns: repeat(4, 84px); gap: 14px; padding: 22px; border-radius: 32px; background: #FFFDF7 var(--kraft); background-size: 300px; box-shadow: var(--shadow-soft); animation: bounce-in .4s var(--ease-bounce) both; }
.art__pcol { width: 84px; height: 84px; border-radius: 50%; background: center / 100% no-repeat; transition: transform .2s var(--ease-bounce); }
.art__pcol.is-pressed { transform: scale(.88); }
@media (max-height: 520px) and (orientation: landscape) {
  .art__palette-grid { grid-template-columns: repeat(8, 80px); gap: 10px; padding: 16px; } .art__pcol { width: 80px; height: 80px; }
  .art__rail { left: calc(10px + var(--safe-l)); top: calc(96px + var(--safe-t)); bottom: auto; transform: none; display: grid; grid-template-columns: repeat(2, 80px); gap: 8px; padding: 8px; }
  .art__tool { width: 80px; height: 80px; } .art__tool.is-on { transform: scale(1.04); }
  .art__body.is-tools .art__stage { bottom: calc(8px + var(--safe-b)); left: calc(196px + var(--safe-l)); }
}
@media (max-width: 600px) and (orientation: portrait) {
  .art__rail { display: grid; grid-template-columns: repeat(3, 80px); gap: 10px; padding: 10px; }
  .art__tool { width: 80px; height: 80px; } .art__tool.is-on { transform: translateY(-4px); }
  .art__body.is-tools .art__stage { bottom: calc(206px + var(--safe-b)); }
  .art__palette-grid { grid-template-columns: repeat(4, 80px); gap: 10px; padding: 16px; } .art__pcol { width: 80px; height: 80px; }
}
.art__pages { position: absolute; inset: calc(100px + var(--safe-t)) 16px calc(16px + var(--safe-b)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.5vw, 28px); align-content: center; max-width: 1100px; margin: 0 auto; overflow-y: auto; touch-action: pan-y; }
.art__page { aspect-ratio: 4 / 3; border-radius: 22px; background: #FFFEFA; padding: 4%; box-shadow: 0 8px 0 rgba(90,60,30,.16), 0 16px 26px -14px rgba(90,60,30,.5); transition: transform .2s var(--ease-bounce); }
.art__page img { width: 100%; height: 100%; display: block; }
.art__page:nth-child(odd) { transform: rotate(-1.2deg); } .art__page:nth-child(even) { transform: rotate(1deg); }
.art__page.is-pressed { transform: scale(.95); }
@media (orientation: portrait) { .art__pages { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; } }
.art__aqua { position: absolute; inset: 0; }
.art__aqua canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.art__hint { position: absolute; left: 50%; top: 50%; width: min(60vw, 360px); aspect-ratio: 4 / 3; transform: translate(-50%, -50%); background: #FFFEFA; border-radius: 26px; padding: 4%; box-shadow: var(--shadow-soft); }
.art__hint img { width: 100%; height: 100%; }
.art__gallery { position: absolute; inset: calc(100px + var(--safe-t)) 0 0; padding: 10px 20px calc(30px + var(--safe-b)); display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 22vw, 210px), 1fr)); gap: 22px; align-content: start; overflow-y: auto; touch-action: pan-y; }
.art__thumb { aspect-ratio: 4 / 3; background: #FFFEFA; padding: 8px 8px 22px; border-radius: 10px; transform: rotate(var(--r)); box-shadow: 0 10px 18px -10px rgba(90,60,30,.6); }
.art__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.art__empty { grid-column: 1 / -1; display: grid; place-items: center; height: 50vh; color: rgba(90,60,30,.35); }
.art__empty svg { width: 160px; height: 160px; }
.art__big { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 18px; background: rgba(60,40,20,.45); animation: fade-in .2s both; padding: 20px; }
.art__big img { max-width: min(92vw, 1000px); max-height: calc(100vh - 170px); border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); animation: bounce-in .4s var(--ease-bounce) both; }
.art__big-bar { display: flex; gap: 16px; }
.art__fly { position: fixed; z-index: 60; left: 50%; top: 50%; width: 300px; margin: -110px 0 0 -150px; border-radius: 10px; box-shadow: var(--shadow-soft); transition: transform .7s cubic-bezier(.5,0,.3,1), opacity .7s; pointer-events: none; }
.art__alive { animation: heart-beat2 1.8s ease-in-out infinite; }
@keyframes heart-beat2 { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.1); } 30% { transform: scale(1); } }
.zone-badge--calm { background: #D7C8E0; } .zone-badge--calm::after { border-top-color: #D7C8E0; }
.zone-badge--zoo { background: var(--mint); } .zone-badge--zoo::after { border-top-color: var(--mint); }
.zone-badge--art { background: var(--peach); } .zone-badge--art::after { border-top-color: var(--peach); }


/* ---------- parent corner v2: what was played, zone switches, data download ---------- */
.parent .psub { margin: -4px 0 14px; font-size: 16px; line-height: 1.4; }
.pz-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.pz-ico svg { width: 62%; height: 62%; }
.pzgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pzone { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 14px 10px 12px; border-radius: 22px; background: var(--cream); box-shadow: inset 0 0 0 3px #F1DCCB; text-align: left; transition: background .2s, box-shadow .2s, transform .15s; }
.pzone:active { transform: scale(.97); }
.pzone__name { flex: 1; font-weight: 800; font-size: 17px; line-height: 1.15; }
.pswitch { flex: none; position: relative; width: 56px; height: 32px; border-radius: 99px; background: #D9CFE0; transition: background .2s; }
.pswitch i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .22s var(--ease-bounce); }
.pzone[aria-checked="true"] { background: #fff; box-shadow: inset 0 0 0 3px #CFEFDF; }
.pzone[aria-checked="true"] .pswitch { background: #5CC9A0; }
.pzone[aria-checked="true"] .pswitch i { transform: translateX(24px); }
.pzone[aria-checked="false"] .pz-ico { filter: grayscale(1); opacity: .5; }
.pzone[aria-checked="false"] .pzone__name { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 2px; }
.pplay__who { margin-bottom: 14px; }
.chip--face { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.chip__face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #fff; }
.chip__face svg { width: 100%; height: 100%; display: block; }
.pplay__empty { margin: 6px 0 0; font-size: 18px; color: var(--ink-soft); }
.pdays { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 130px; padding: 6px 0 0; margin-bottom: 16px; }
.pdays__col { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; gap: 4px; }
.pdays__bar { align-self: end; justify-self: center; width: min(100%, 22px); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #FFC94D, #FF9A4D); min-height: 0; }
.pdays__col small { font-size: 12px; line-height: 1.1; color: var(--ink-soft); font-weight: 700; }
.pdays__col:last-child small { color: var(--ink); font-weight: 800; }
.pzbars { display: grid; gap: 8px; }
.pzbar { display: grid; grid-template-columns: 44px minmax(90px, 150px) 1fr auto; align-items: center; gap: 10px; font-size: 16px; }
.pzbar__name { font-weight: 800; line-height: 1.1; }
.pzbar__track { height: 16px; border-radius: 99px; background: #F3ECF5; overflow: hidden; }
.pzbar__track span { display: block; height: 100%; border-radius: 99px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.pzbar b { font-weight: 800; white-space: nowrap; }
.pplay__total { margin: 14px 0 0; font-size: 16px; color: var(--ink-soft); }
.pexport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding-top: 16px; border-top: 2px dashed #EFE4D6; }
.pexport small { font-size: 15px; flex: 1 1 220px; }
@media (max-width: 480px) {
  .pzgrid { grid-template-columns: 1fr 1fr; }
  .pzone { flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
  .pzone .pswitch { margin-left: auto; }
  .pzone__name { order: 3; flex: 1 1 100%; font-size: 16px; }
  .pzbar { grid-template-columns: 40px 1fr auto; }
  .pzbar .pz-ico { width: 40px; height: 40px; }
  .pzbar__track { grid-column: 2 / 4; grid-row: 2; }
  .pdays { gap: 3px; }
}