/* Treehouse: iPadOS 26 look (Liquid Glass).
   Two layers, as Apple does it: content (frosted cards) and controls (glass that floats above).
   Colours follow Apple's semantic palette; every page sits on a soft wash of the child's colour. */
:root {
  --bg: #f2f2f7;
  --card: rgba(255, 255, 255, .74);       /* frosted content */
  --card-solid: #ffffff;
  --label: #000000;
  --label2: rgba(60, 60, 67, .62);
  --label3: rgba(60, 60, 67, .32);
  --sep: rgba(60, 60, 67, .2);
  --fill: rgba(120, 120, 128, .12);
  --fill2: rgba(120, 120, 128, .2);

  /* glass */
  --glass: rgba(255, 255, 255, .42);
  --glass-strong: rgba(255, 255, 255, .62);
  --glass-edge: rgba(255, 255, 255, .85);
  --glass-rim: rgba(255, 255, 255, .35);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
  --glass-blur: blur(22px) saturate(190%);
  --sheen: linear-gradient(160deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .15) 38%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .25) 100%);
  --card-shadow: 0 2px 10px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .05);

  --blue: #007aff; --green: #34c759; --red: #ff3b30; --yellow: #ffcc00; --orange: #ff9500;
  --teal: #30b0c7; --indigo: #5856d6; --purple: #af52de; --pink: #ff2d55;
  --tint: var(--blue);
  --wash2: var(--teal);
  --radius: 26px;
  --radius-lg: 32px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --letters: "Andika", ui-rounded, system-ui, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --card: rgba(44, 44, 46, .62); --card-solid: #1c1c1e; --label: #ffffff;
    --label2: rgba(235, 235, 245, .62); --label3: rgba(235, 235, 245, .3);
    --sep: rgba(84, 84, 88, .55); --fill: rgba(120, 120, 128, .24); --fill2: rgba(120, 120, 128, .36);
    --glass: rgba(60, 60, 64, .38); --glass-strong: rgba(70, 70, 74, .55);
    --glass-edge: rgba(255, 255, 255, .28); --glass-rim: rgba(255, 255, 255, .08);
    --glass-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    --sheen: linear-gradient(160deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .08) 100%);
    --card-shadow: none;
    --blue: #0a84ff; --green: #30d158; --red: #ff453a; --yellow: #ffd60a; --orange: #ff9f0a;
    --teal: #40c8e0; --indigo: #5e5ce6; --purple: #bf5af2; --pink: #ff375f;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--label); font: 17px/1.3 var(--font); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
input { font: inherit; color: inherit; }
svg.icon { display: block; flex: none; }

/* ---------- the wash: soft colour behind everything, so glass has something to bend ---------- */
.wash {
  background-color: var(--bg);
  background-image:
    radial-gradient(65% 50% at 5% 0%, color-mix(in srgb, var(--tint) 46%, transparent), transparent 72%),
    radial-gradient(60% 45% at 100% 18%, color-mix(in srgb, var(--wash2) 38%, transparent), transparent 72%),
    radial-gradient(50% 35% at 0% 75%, color-mix(in srgb, var(--wash2) 22%, transparent), transparent 70%),
    radial-gradient(75% 55% at 60% 112%, color-mix(in srgb, var(--tint) 32%, transparent), transparent 72%);
  background-attachment: local;
}
@media (prefers-color-scheme: dark) {
  .wash { background-image:
    radial-gradient(60% 45% at 8% 0%, color-mix(in srgb, var(--tint) 34%, transparent), transparent 70%),
    radial-gradient(55% 40% at 100% 12%, color-mix(in srgb, var(--wash2) 22%, transparent), transparent 70%),
    radial-gradient(70% 50% at 50% 110%, color-mix(in srgb, var(--tint) 20%, transparent), transparent 70%); }
}

/* ---------- glass: the control layer ---------- */
.glass, .circle-btn, .key, .choice, .segmented, .capsule, .btn {
  position: relative; isolation: isolate;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-rim), var(--glass-shadow);
  transition: transform .35s var(--spring), box-shadow .25s, background .2s, opacity .2s;
}
/* specular sheen across the top-left, like light catching the edge */
.glass::after, .circle-btn::after, .key::after, .choice::after, .capsule::after, .btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--sheen); mix-blend-mode: soft-light; z-index: -1;
}
/* Pressing a glass control makes it swell slightly and brighten. */
.circle-btn:active, .key:active, .key.pressed, .choice:active, .btn:active, .capsule:active {
  transform: scale(1.06); background: var(--glass-strong);
}

/* Prominent glass: tinted, for the main action on a screen. */
.btn.filled, .key.go {
  background: color-mix(in srgb, var(--tint) 88%, transparent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 8px 24px color-mix(in srgb, var(--tint) 35%, transparent);
}
.btn.filled::after, .key.go::after { mix-blend-mode: overlay; opacity: .9; }
.key.go { background: color-mix(in srgb, var(--green) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.18), 0 8px 24px color-mix(in srgb, var(--green) 35%, transparent); }
.btn.tinted { color: var(--tint); }

/* ---------- navigation stack ---------- */
#app { position: fixed; inset: 0; overflow: hidden; }
.page { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; will-change: transform; }
.page.enter-push { animation: push-in .5s var(--ease) both; box-shadow: -10px 0 30px rgba(0,0,0,.08); }
.page.leave-push { animation: push-out .5s var(--ease) both; }
.page.enter-pop { animation: pop-in .5s var(--ease) both; }
.page.leave-pop { animation: pop-out .5s var(--ease) both; z-index: 2; }
@keyframes push-in { from { transform: translateX(100%); } }
@keyframes push-out { to { transform: translateX(-30%); } }
@keyframes pop-in { from { transform: translateX(-30%); } }
@keyframes pop-out { to { transform: translateX(100%); } }

.sheet { position: fixed; inset: 0; z-index: 10; overflow-y: auto; animation: sheet-up .55s var(--ease) both; }
.sheet.leaving { animation: sheet-down .4s var(--ease) both; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }

/* ---------- nav: floating glass buttons, no bar. A soft blur edge appears on scroll. ---------- */
.nav { position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top); }
.nav::before { content: ""; position: absolute; inset: 0 0 -24px; pointer-events: none; opacity: 0; transition: opacity .25s;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--bg) 70%, transparent), transparent); }
.page.scrolled .nav::before { opacity: 1; }
.nav-row { position: relative; height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 16px; max-width: 1000px; margin: 0 auto; }
.nav-title { font-weight: 600; font-size: 17px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.page.scrolled .nav-title { opacity: 1; }
.nav-left { justify-self: start; } .nav-right { justify-self: end; display: flex; gap: 10px; }
.circle-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--label); }
.capsule { height: 48px; border-radius: 24px; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.large-title { font-size: 40px; line-height: 46px; font-weight: 800; letter-spacing: .2px; margin: 0; padding: 0 22px 6px; }
.subtitle { color: var(--label2); padding: 0 22px 8px; font-size: 19px; }

/* ---------- content: frosted cards ---------- */
.content { max-width: 720px; margin: 0 auto; padding: 0 20px calc(48px + env(safe-area-inset-bottom)); }
.wide { max-width: 1000px; }
.section { margin: 28px 0 0; }
.section-header { font-size: 15px; font-weight: 600; color: var(--label2); padding: 0 20px 8px; }
.section-header.big { font-size: 24px; font-weight: 700; color: var(--label); padding: 0 6px 12px; }
.section-footer { font-size: 13px; color: var(--label2); padding: 8px 20px 0; }
.group, .hero, .kid-card, .picture-card, .count-card, .reveal, .answer {
  background: var(--card);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--card-shadow), inset 0 0 0 .5px var(--glass-rim);
}
.group { border-radius: var(--radius); overflow: hidden; }
.row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 20px; width: 100%; text-align: left; position: relative; }
.row + .row::before { content: ""; position: absolute; top: 0; right: 20px; left: 20px; height: .5px; background: var(--sep); }
.row.has-icon + .row::before, .row + .row.has-icon::before { left: 66px; }
button.row { transition: background .15s; }
button.row:active { background: var(--fill); }
.row-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; font-size: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.row-main { flex: 1; min-width: 0; padding: 12px 0; }
.row-title { font-size: 17px; }
.row-sub { font-size: 14px; color: var(--label2); margin-top: 2px; }
.row-detail { color: var(--label2); font-size: 17px; white-space: nowrap; }
.row-chev { color: var(--label3); }
.row.action .row-title { color: var(--tint); }
.row.destructive .row-title { color: var(--red); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border-radius: 999px; padding: 0 26px; height: 52px; font-size: 17px; }
.btn.large { height: 60px; font-size: 19px; padding: 0 38px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ---------- segmented ---------- */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: 999px; padding: 4px; }
.segmented button { height: 38px; border-radius: 999px; font-size: 15px; font-weight: 500; transition: background .25s var(--ease), box-shadow .25s; }
.segmented button.on { background: var(--card-solid); font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.12), inset 0 1px 0 var(--glass-edge); }
@media (prefers-color-scheme: dark) { .segmented button.on { background: rgba(120,120,128,.55); } }

/* ---------- avatars ---------- */
.avatar { border-radius: 50%; display: grid; place-items: center; line-height: 1; flex: none; position: relative;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 45%, white), var(--c) 75%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 14px color-mix(in srgb, var(--c) 60%, black 10%), 0 10px 26px color-mix(in srgb, var(--c) 35%, transparent); }

/* ---------- home ---------- */
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.kid-card { border-radius: var(--radius-lg); padding: 32px 20px 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .35s var(--spring); }
.kid-card:active { transform: scale(.97); }
.kid-card .avatar { margin-bottom: 12px; }
.kid-name { font-size: 26px; font-weight: 700; }
.kid-status { font-size: 15px; color: var(--label2); display: flex; align-items: center; gap: 5px; }
.kid-status.done { color: var(--green); font-weight: 600; }
.hold-ring { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--tint) calc(var(--p, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); }

/* ---------- child page ---------- */
.hero { border-radius: var(--radius-lg); padding: 26px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.hero h2 { margin: 0; font-size: 24px; font-weight: 700; }
.hero p { margin: 4px 0 18px; color: var(--label2); }
.ring { position: relative; display: grid; place-items: center; }
.ring svg { transform: rotate(-90deg); filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--tint) 30%, transparent)); }
.ring-label { position: absolute; text-align: center; font-family: var(--rounded); }
.ring-label b { display: block; font-size: 28px; }
.ring-label span { font-size: 12px; color: var(--label2); font-family: var(--font); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); padding: 18px 12px; text-align: center; }
.week-day { font-size: 13px; color: var(--label2); font-weight: 600; }
.week-dot { width: 34px; height: 34px; border-radius: 50%; margin: 8px auto 0; background: var(--fill); display: grid; place-items: center; color: #fff; }
.week-dot.on { background: var(--tint); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 12px color-mix(in srgb, var(--tint) 40%, transparent); }
.week-dot.today { outline: 2px solid var(--fill2); outline-offset: 3px; }
.stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; padding: 16px; font-size: 42px; text-align: center; }
.empty { padding: 20px; color: var(--label2); text-align: center; }

/* ---------- practice ---------- */
.practice { min-height: 100%; display: flex; flex-direction: column; }
.practice-bar { display: flex; align-items: center; gap: 14px; padding: calc(env(safe-area-inset-top) + 12px) 16px 8px; max-width: 1000px; width: 100%; margin: 0 auto; }
.progress { flex: 1; height: 48px; border-radius: 24px; padding: 0 18px; display: flex; align-items: center; }
.progress-track { flex: 1; height: 8px; border-radius: 4px; background: var(--fill2); overflow: hidden; }
.progress-track > i { display: block; height: 100%; background: var(--tint); border-radius: 4px; transition: width .5s var(--spring); }
.practice-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 20px calc(28px + env(safe-area-inset-bottom)); gap: 18px; }
.question { font-family: var(--rounded); font-size: clamp(60px, 12vw, 104px); font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.answer { font-family: var(--rounded); font-size: clamp(44px, 8vw, 64px); font-weight: 700; min-width: 210px; height: 96px; padding: 0 26px; border-radius: 30px; display: grid; place-items: center; color: var(--tint); font-variant-numeric: tabular-nums; transition: background .25s, color .25s, transform .35s var(--spring); }
.answer.placeholder { color: var(--label3); }
.answer.right { background: var(--green); color: #fff; transform: scale(1.06); }
.note { min-height: 84px; display: grid; place-items: center; color: var(--label2); font-size: 17px; text-align: center; }
.note.right { color: var(--green); font-weight: 700; font-size: 22px; }
.keypad { display: grid; grid-template-columns: repeat(3, 88px); gap: 18px 28px; margin-top: 4px; }
.key { width: 88px; height: 88px; border-radius: 50%; font-family: var(--rounded); font-size: 38px; font-weight: 500; display: grid; place-items: center; }
.key.plain { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--label2); }
.key.plain::after { display: none; }
.reveal { border-radius: 22px; padding: 12px 20px; color: var(--label2); text-align: center; }
.reveal b { color: var(--label); font-family: var(--rounded); font-size: 24px; }

.picture-card { width: min(300px, 70vw); aspect-ratio: 1; border-radius: 48px; display: grid; place-items: center; font-size: min(170px, 38vw); line-height: 1; }
.count-card { width: min(620px, 90vw); min-height: 240px; padding: 28px; border-radius: 48px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 14px; font-size: 60px; }
.count-card.many { font-size: 42px; }
.choices { display: flex; gap: 22px; }
.choice { width: clamp(104px, 20vw, 156px); aspect-ratio: 1; border-radius: 40px; font-family: var(--rounded); font-size: clamp(56px, 11vw, 84px); font-weight: 700; display: grid; place-items: center; }
.choice.letter { font-family: var(--letters); }
.choice.right { background: color-mix(in srgb, var(--green) 90%, transparent); color: #fff; transform: scale(1.08); }
.choice.dim { opacity: .3; transform: scale(.94); }
.choice.hint { box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 0 5px var(--yellow), var(--glass-shadow); animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-8px); } }

.finish { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; gap: 8px; }
.finish .sticker { font-size: 150px; line-height: 1.1; animation: pop .8s var(--spring) both; filter: drop-shadow(0 16px 30px rgba(0,0,0,.18)); }
.finish h1 { font-size: 40px; font-weight: 800; margin: 12px 0 0; }
.finish p { color: var(--label2); margin: 0 0 24px; font-size: 19px; }
@keyframes pop { 0% { transform: scale(.3) rotate(-15deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- forms ---------- */
.field { flex: 1; border: 0; outline: 0; background: transparent; font-size: 19px; padding: 16px 0; -webkit-user-select: text; user-select: text; }
.field::placeholder { color: var(--label3); }
.picker { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px; }
.pick-emoji { width: 54px; height: 54px; border-radius: 50%; background: var(--fill); font-size: 30px; display: grid; place-items: center; transition: transform .3s var(--spring); }
.pick-emoji:active { transform: scale(1.1); }
.pick-emoji.on { box-shadow: 0 0 0 3px var(--card-solid), 0 0 0 5px var(--tint); }
.pick-color { width: 36px; height: 36px; border-radius: 50%; background: var(--c); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); transition: transform .3s var(--spring); }
.pick-color.on { box-shadow: 0 0 0 3px var(--card-solid), 0 0 0 5px var(--c); transform: scale(1.08); }
.pad16 { padding: 12px 20px 16px; }

@media (max-width: 560px) {
  .keypad { grid-template-columns: repeat(3, 76px); gap: 14px 22px; }
  .key { width: 76px; height: 76px; font-size: 32px; }
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .large-title { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }
@media (prefers-reduced-transparency: reduce) {
  .glass, .circle-btn, .key, .choice, .segmented, .capsule, .btn, .group, .hero, .kid-card, .picture-card, .count-card, .reveal, .answer {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-solid); }
}

/* ---------- treehouse room ---------- */
.room { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; container-type: inline-size;
  box-shadow: var(--card-shadow), inset 0 0 0 .5px var(--glass-rim); background: #e8d3b8; }
.room-wall { position: absolute; inset: 0 0 30% 0; }
.room-floor { position: absolute; inset: 70% 0 0 0; }
.room-skirting { position: absolute; left: 0; right: 0; top: 69%; height: 1.6%; background: rgba(255,255,255,.75); box-shadow: 0 .4cqw .8cqw rgba(0,0,0,.12); }
.room-floor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.14), transparent 45%); }
.room-window { position: absolute; left: 7%; top: 9%; width: 24%; aspect-ratio: 1; border-radius: 3cqw; border: 1.4cqw solid #fff;
  box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.15), inset 0 0 0 .4cqw rgba(0,0,0,.05); display: grid; place-items: center; font-size: 8cqw; overflow: hidden; }
.room-window::before, .room-window::after { content: ""; position: absolute; background: #fff; }
.room-window::before { left: 50%; top: 0; bottom: 0; width: 1cqw; transform: translateX(-50%); }
.room-window::after { top: 50%; left: 0; right: 0; height: 1cqw; transform: translateY(-50%); }
.room-window span { position: relative; left: 22%; top: -20%; font-size: 6cqw; }
.room-window.day { background: linear-gradient(#7cc4ff, #cfeaff); }
.room-window.dusk { background: linear-gradient(#5b6bd6, #ff9f8a 85%); }
.room-window.night { background: radial-gradient(circle, #fff 0 1.2%, transparent 2%) 0 0 / 30% 30%, linear-gradient(#0d1640, #283a7a); }
.room-items { position: absolute; inset: 0; }
.placed { position: absolute; transform: translate(-50%, -96%); line-height: 1; touch-action: none; cursor: grab;
  filter: drop-shadow(0 .5cqw .45cqw rgba(0,0,0,.22)); transition: filter .2s; }
.placed span { display: inline-block; }
.room.live .placed.sel { filter: drop-shadow(0 0 .35cqw #fff) drop-shadow(0 0 .35cqw #fff) drop-shadow(0 0 1.2cqw var(--tint)) drop-shadow(0 0 1.2cqw var(--tint)); }
.placed.lifting { transform: translate(-50%, -100%) scale(1.1); filter: drop-shadow(0 2cqw 1.6cqw rgba(0,0,0,.25)); cursor: grabbing; }
.room-holder { position: relative; }
.room-tools-row { display: flex; justify-content: center; height: 64px; margin-top: 14px; }
.room-tools { padding: 0 8px; gap: 2px; transition: opacity .2s, transform .35s var(--spring); }
.room-tools.hidden { opacity: 0; pointer-events: none; transform: scale(.9); }
.tool { width: 52px; height: 48px; display: grid; place-items: center; border-radius: 24px; color: var(--label); }
.tool:active { background: var(--fill); }
.tray-bar { max-width: 420px; margin: 0 auto 12px; }
.tray-wrap + .section-footer, .room-hint { text-align: center; }
.tray-wrap { padding: 10px; }
.tray { display: flex; flex-wrap: wrap; gap: 8px; min-height: 76px; }
.tray-item { width: 68px; height: 68px; border-radius: 20px; background: var(--fill); font-size: 40px; display: grid; place-items: center; transition: transform .3s var(--spring); }
.tray-item:active { transform: scale(1.1); }
.tray-item.new { box-shadow: 0 0 0 3px var(--tint); animation: nudge 1.2s ease-in-out infinite; }
.tray-empty { padding: 20px; color: var(--label2); width: 100%; text-align: center; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; padding: 6px; border-radius: 18px; }
.swatch-chip { width: 76px; height: 56px; border-radius: 14px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch.on .swatch-chip { box-shadow: 0 0 0 3px var(--card-solid), 0 0 0 5px var(--tint); }
.swatch.locked .swatch-chip { filter: grayscale(1) brightness(.75); }
.swatch-name { font-size: 13px; color: var(--label2); text-align: center; }

/* treehouse card on the child page */
.house-card { display: block; width: 100%; text-align: left; border-radius: var(--radius-lg); overflow: hidden; background: var(--card);
  box-shadow: var(--card-shadow), inset 0 0 0 .5px var(--glass-rim); transition: transform .35s var(--spring); }
.house-card:active { transform: scale(.98); }
.house-card .room { border-radius: 0; box-shadow: none; pointer-events: none; }
.house-card-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; gap: 12px; }
.house-card-foot b { font-size: 19px; display: block; }
.house-card-foot span { color: var(--label2); font-size: 15px; }

/* ---------- presents ---------- */
.present { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 40px 24px; min-height: 100%; justify-content: center; }
.present-box { font-size: 170px; line-height: 1; width: 260px; height: 260px; border-radius: 50%; display: grid; place-items: center; animation: wobble 1.6s ease-in-out infinite; }
.present-box.opening { animation: open .5s var(--ease) forwards; }
@keyframes wobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-8deg) scale(1.04); } 80% { transform: rotate(7deg) scale(1.04); } 90% { transform: rotate(-4deg); } }
@keyframes open { to { transform: scale(1.5); opacity: 0; } }
.present-item { font-size: 170px; line-height: 1.1; animation: pop .8s var(--spring) both; filter: drop-shadow(0 18px 30px rgba(0,0,0,.2)); }
.present h1 { font-size: 36px; font-weight: 800; margin: 8px 0 0; }
.present p { color: var(--label2); font-size: 19px; margin: 0 0 18px; }
.present .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.present .tag { font-size: 15px; font-weight: 600; color: var(--tint); background: color-mix(in srgb, var(--tint) 14%, transparent); padding: 6px 14px; border-radius: 999px; }
.burst { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.burst i { position: absolute; left: 50%; top: 45%; width: 12px; height: 12px; border-radius: 3px; animation: fly 1.2s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }