/* ================================================================
   MY MONSTERS — two worlds, one app
   Child side: picture-book sticker look (Baloo 2, chunky, sunny)
   Parent side: quiet sage paper checklist (Nunito, one accent)
   ================================================================ */

:root {
  /* child world */
  --ink: #33324e;
  --paper: #fdf3e3;
  --berry: #e4587c;
  --sun: #f5b841;
  --water: #5aa9e6;
  --leaf: #7fb069;
  --sticker-shadow: 0 3px 0 rgba(51, 50, 78, .22);
  /* parent world */
  --p-bg: #eef1ec;
  --p-ink: #2f3a33;
  --p-mut: #6d7a70;
  --p-card: #fbfcfa;
  --p-line: #dde3dc;
  --p-moss: #5b7f66;
  --p-warn: #b0563c;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, #ffe8c7 0%, #fdd9e0 55%, #d9ecff 100%);
  background-attachment: fixed;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font: inherit; }
.hidden { display: none !important; }

.screen {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

/* ================= SETUP ================= */
#screen-setup { justify-content: center; }
.setup-card {
  background: #fffdf8;
  border: 3px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 6px 0 rgba(51, 50, 78, .25);
  padding: 28px 22px;
  text-align: center;
}
.setup-art .mini-monster { width: 110px; animation: bob 3s ease-in-out infinite; }
.setup-card h1 {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-size: 2.4rem; font-weight: 800; letter-spacing: .5px;
  color: var(--berry);
  text-shadow: 2px 2px 0 #ffd9a3;
}
.setup-card h2 { font-family: 'Baloo 2', sans-serif; font-size: 1.5rem; font-weight: 800; }
.setup-lead { margin: 10px 0 18px; color: #5c5b78; font-size: .95rem; line-height: 1.45; }
.setup-label { display: block; font-weight: 800; margin-bottom: 8px; }
.setup-card input {
  width: 100%; padding: 13px 16px; margin-bottom: 14px;
  border: 3px solid var(--ink); border-radius: 16px;
  font-size: 1.1rem; font-weight: 700; text-align: center; background: #fff;
}
.setup-card input:focus { outline: 3px solid var(--sun); outline-offset: 2px; }

.btn-big {
  display: block; width: 100%;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.2rem;
  color: #fff; background: var(--berry);
  border: 3px solid var(--ink); border-radius: 18px;
  padding: 13px; box-shadow: var(--sticker-shadow);
  transition: transform .1s;
}
.btn-big:active { transform: translateY(3px); box-shadow: none; }

.type-cards { display: grid; gap: 12px; }
.type-card {
  display: grid; grid-template-columns: 78px 1fr; grid-template-rows: auto auto;
  gap: 2px 12px; align-items: center; text-align: left;
  background: #fff; border: 3px solid var(--ink); border-radius: 20px;
  padding: 12px; box-shadow: var(--sticker-shadow);
  transition: transform .1s;
}
.type-card:active { transform: translateY(3px); box-shadow: none; }
.type-card svg { grid-row: 1 / 3; width: 78px; }
.type-card b { font-family: 'Baloo 2', sans-serif; font-size: 1.05rem; }
.type-card span { font-size: .8rem; color: #5c5b78; line-height: 1.3; }

.name-row { display: flex; gap: 10px; }
.name-row input { flex: 1; }
.btn-dice {
  flex: 0 0 56px; height: 56px; font-size: 1.6rem;
  background: var(--sun); border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: var(--sticker-shadow);
}
.btn-dice:active { transform: translateY(3px); box-shadow: none; }

/* ================= CHILD: SANCTUARY ================= */
.child-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.child-head h1 {
  font-family: 'Baloo 2', sans-serif; font-size: 1.9rem; font-weight: 800;
  color: var(--berry); text-shadow: 2px 2px 0 rgba(255, 255, 255, .7);
  line-height: 1;
}
.phase-label { font-weight: 800; font-size: .8rem; color: #6d6c8a; letter-spacing: .06em; text-transform: uppercase; }
.lvl-badge {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.15rem;
  background: var(--sun); border: 3px solid var(--ink); border-radius: 999px;
  padding: 6px 16px; box-shadow: var(--sticker-shadow);
}

/* ---- the scene ---- */
.scene {
  position: relative;
  border: 4px solid var(--ink);
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 1 / 0.92;
  box-shadow: 0 6px 0 rgba(51, 50, 78, .25);
  margin-bottom: 14px;
}
.scenery { position: absolute; inset: 0; display: none; }

/* phase 1 — cozy indoor room */
.scene.phase-1 { background: linear-gradient(#ffeebc 62%, #e9b97f 62%); }
.scene.phase-1 .sc-indoor { display: block; }
.sc-indoor .window {
  position: absolute; top: 9%; right: 8%; width: 26%; height: 32%;
  background: linear-gradient(#aee1f9, #e0f4ff);
  border: 4px solid #b47a44; border-radius: 14px 14px 6px 6px;
}
.sc-indoor .window i { position: absolute; background: #b47a44; }
.sc-indoor .window i:first-child { left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; }
.sc-indoor .window i:last-child { top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px; }
.sc-indoor .rug {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
  width: 74%; height: 13%;
  background: radial-gradient(ellipse at center, #e4587c 0 55%, #f5b841 55% 78%, #e4587c 78%);
  border-radius: 50%;
  opacity: .85;
}
.sc-indoor .pot { position: absolute; bottom: 34%; left: 7%; width: 11%; aspect-ratio: 1; background: #c96f4a; border-radius: 4px 4px 10px 10px; }
.sc-indoor .pot span { position: absolute; left: 50%; top: -60%; transform: translateX(-50%); width: 60%; height: 70%; background: var(--leaf); border-radius: 50% 50% 50% 0; }

/* phase 2 — backyard expansion */
.scene.phase-2 { background: linear-gradient(#aee1f9 58%, #cdeefb 58%); }
.scene.phase-2 .sc-yard { display: block; }
.sc-yard .sun-disc {
  position: absolute; top: 7%; left: 8%; width: 17%; aspect-ratio: 1;
  background: radial-gradient(circle, #ffe9a3 30%, var(--sun) 70%);
  border-radius: 50%; box-shadow: 0 0 30px 8px rgba(245, 184, 65, .55);
}
.sc-yard .grass {
  position: absolute; bottom: -14%; left: -10%; right: -10%; height: 44%;
  background: linear-gradient(#95d276, #6fae52);
  border-radius: 50% 50% 0 0;
}
.sc-yard .fence {
  position: absolute; bottom: 30%; left: 0; right: 0; height: 16%;
  background: repeating-linear-gradient(90deg, #f7f3e8 0 14px, transparent 14px 26px);
  opacity: .9;
}
.sc-yard .playhouse { position: absolute; bottom: 26%; right: 6%; width: 22%; aspect-ratio: 1/1.05; background: #e9a25f; border-radius: 4px; }
.sc-yard .playhouse::before {
  content: ''; position: absolute; left: -12%; right: -12%; top: -34%; height: 40%;
  background: #c96f4a; clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.sc-yard .playhouse i { position: absolute; left: 32%; bottom: 0; width: 36%; height: 55%; background: #7a4a2c; border-radius: 8px 8px 0 0; }

/* phase 3 — wild meadow */
.scene.phase-3 { background: linear-gradient(#ffd3a5 0%, #fff4d6 45%, #d7eecb 100%); }
.scene.phase-3 .sc-meadow { display: block; }
.sc-meadow .hill { position: absolute; border-radius: 50%; }
.sc-meadow .h1 { bottom: -28%; left: -22%; width: 90%; height: 55%; background: #8cc66d; }
.sc-meadow .h2 { bottom: -30%; right: -22%; width: 95%; height: 52%; background: #6fae52; }
.sc-meadow .flower { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 3px rgba(255,255,255,.8); }
.sc-meadow .f1 { bottom: 18%; left: 12%; }
.sc-meadow .f2 { bottom: 10%; right: 16%; background: var(--sun); }
.sc-meadow .f3 { bottom: 24%; right: 30%; background: #9b6fd6; }
.sc-meadow .spark { position: absolute; color: #fff; text-shadow: 0 0 6px var(--sun); animation: twinkle 2.4s ease-in-out infinite; }
.sc-meadow .s1 { top: 12%; left: 14%; font-size: 18px; }
.sc-meadow .s2 { top: 22%; right: 12%; font-size: 13px; animation-delay: .8s; }
.sc-meadow .s3 { top: 8%; right: 34%; font-size: 15px; animation-delay: 1.5s; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---- the monster ---- */
.monster {
  position: absolute; left: 50%; bottom: 2%;
  width: 62%; transform: translateX(-50%);
  overflow: visible;
}
.scene.phase-2 .monster { width: 68%; }
.scene.phase-3 .monster { width: 74%; }

.monster.type-calm  { --m-skin: #6fc0ef; --m-dark: #4d92c8; --m-belly-c: #e7f5fe; }
.monster.type-sprout{ --m-skin: #8cc66d; --m-dark: #5e9c43; --m-belly-c: #eaf6df; }
.monster.type-brave { --m-skin: #f49e5c; --m-dark: #d97b3a; --m-belly-c: #ffeedd; }

.m-shadow { fill: rgba(51, 50, 78, .15); }
.m-body { fill: var(--m-skin); stroke: var(--ink); stroke-width: 5; }
.m-belly { fill: var(--m-belly-c); }
.m-foot { fill: var(--m-dark); stroke: var(--ink); stroke-width: 4; }
.m-pupil { fill: #2b3a4a; }
.m-cheek { fill: rgba(228, 88, 124, .35); }
.m-mouth-happy, .m-mouth-sad { stroke: #2b3a4a; stroke-width: 6; fill: none; stroke-linecap: round; }
.m-mouth-sad, .m-tear { display: none; }
.m-tear { fill: #6fc0ef; stroke: var(--ink); stroke-width: 3; }
.feat { display: none; }
.feat path, .feat ellipse { fill: var(--m-dark); stroke: var(--ink); stroke-width: 4; }
.monster.type-calm .feat-calm { display: block; }
.monster.type-calm .feat-calm ellipse { fill: #fff; opacity: .9; }
.monster.type-sprout .feat-sprout { display: block; }
.monster.type-sprout .feat-sprout path { fill: var(--leaf); }
.monster.type-brave .feat-brave { display: block; }
.acc { display: none; }
.acc path, .acc circle { fill: var(--sun); stroke: var(--ink); stroke-width: 4; }
.monster.acc-2 .acc-p2 { display: block; }
.monster.acc-3 .acc-p3 { display: block; }

.m-breathe { animation: breathe 3.2s ease-in-out infinite; transform-origin: 120px 208px; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }
.m-eyes { animation: blink 4.6s infinite; transform-origin: 120px 106px; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5%, 97.5% { transform: scaleY(.06); } }

.monster.chomp .m-wrap { animation: chomp .45s ease; transform-origin: 120px 208px; }
@keyframes chomp {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.09, .88); }
  60% { transform: scale(.94, 1.08) translateY(-8px); }
  100% { transform: scale(1, 1); }
}

/* droop state — sagging, washed out, teary */
.monster.droop { filter: saturate(.45) brightness(.96); }
.monster.droop .m-wrap { transform: translateY(9px) scale(1, .93); transform-origin: 120px 208px; }
.monster.droop .m-mouth-happy { display: none; }
.monster.droop .m-mouth-sad, .monster.droop .m-tear { display: block; }
.monster.droop .m-breathe { animation-duration: 5s; }

.droop-banner {
  position: absolute; top: 8px; left: 8px; right: 8px; z-index: 5;
  background: #fff; border: 3px solid var(--ink); border-radius: 14px;
  padding: 8px 12px; font-size: .85rem; font-weight: 700; text-align: center;
  box-shadow: var(--sticker-shadow);
}

/* feeding particles */
#particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pop {
  position: absolute; font-size: 26px;
  animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0) scale(.7); }
  100% { opacity: 0; transform: translateY(-90px) scale(1.3); }
}

/* growth bar */
.growth { margin-bottom: 12px; }
.xp-row { display: flex; justify-content: space-between; font-weight: 800; font-size: .85rem; margin-bottom: 5px; }
.xp-bar {
  height: 22px; background: #fff;
  border: 3px solid var(--ink); border-radius: 999px; overflow: hidden;
}
#xp-fill {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(45deg, var(--leaf) 0 12px, #92c47e 12px 24px);
  border-radius: 999px;
  transition: width .4s ease;
}

/* feed buttons */
.feed-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feed-btn {
  display: grid; justify-items: center; gap: 2px;
  border: 3px solid var(--ink); border-radius: 20px;
  padding: 10px 8px 12px;
  box-shadow: var(--sticker-shadow);
  transition: transform .1s;
}
.feed-btn:active { transform: translateY(3px); box-shadow: none; }
.feed-btn.water { background: linear-gradient(#bfe3ff, #8ec9f5); }
.feed-btn.sun { background: linear-gradient(#ffe6a3, #ffcf66); }
.feed-btn[disabled] { opacity: .45; }
.feed-emoji { font-size: 1.7rem; }
.feed-name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: .95rem; }
.feed-count {
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 999px;
  min-width: 42px; padding: 1px 10px; font-size: 1.05rem;
}
.feed-hint { text-align: center; font-size: .8rem; font-weight: 700; color: #6d6c8a; margin-top: 10px; }

.grownups {
  margin: 18px auto 0; display: block;
  font-weight: 800; font-size: .85rem; color: #6d6c8a;
  background: rgba(255, 255, 255, .65);
  border: 2.5px solid #b9b8cc; border-radius: 999px;
  padding: 8px 18px;
}

/* celebration overlay */
.celebrate {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(51, 50, 78, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.celebrate-card {
  position: relative; z-index: 2;
  background: #fffdf8; border: 4px solid var(--ink); border-radius: 28px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .3);
  padding: 30px 26px; text-align: center; max-width: 340px; width: 100%;
  animation: popIn .35s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes popIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cel-title {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 2rem;
  color: var(--berry); text-shadow: 2px 2px 0 #ffd9a3; margin-bottom: 8px;
}
.cel-sub { font-weight: 700; color: #5c5b78; margin-bottom: 18px; line-height: 1.4; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute; top: -20px; width: 12px; height: 12px; border-radius: 3px;
  animation: fall 2.6s linear infinite;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); }
}

/* ================= PARENT UI (low-stimulus) ================= */
.parent-ui {
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: 'Nunito', system-ui, sans-serif;
}
body:has(.parent-ui:not(.hidden)) { background: var(--p-bg); }

.p-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.p-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--p-moss); }
.p-head h1 { font-size: 1.5rem; font-weight: 800; }
.p-link { font-weight: 700; color: var(--p-moss); font-size: .95rem; padding: 8px; }

.p-card {
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.p-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.p-status-main b { display: block; font-size: 1.05rem; }
.p-status-main span { font-size: .8rem; color: var(--p-mut); }
.p-status-side { text-align: right; display: grid; gap: 4px; justify-items: end; }
.mood-chip { font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.mood-chip.ok { background: #e3ede4; color: #3c6647; }
.mood-chip.droop { background: #f3e3dc; color: var(--p-warn); }
.p-bank { font-size: .8rem; color: var(--p-mut); }

.tidy-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.tidy-row input { display: none; }
.tidy-box {
  flex: 0 0 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--p-line); background: #fff; position: relative;
}
.tidy-row input:checked + .tidy-box { background: var(--p-moss); border-color: var(--p-moss); }
.tidy-row input:checked + .tidy-box::after {
  content: '✓'; position: absolute; inset: 0; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.tidy-text { font-size: .82rem; color: var(--p-mut); line-height: 1.35; }
.tidy-text b { display: block; color: var(--p-ink); font-size: .95rem; }

.p-h2 { font-size: .95rem; font-weight: 800; margin: 18px 2px 8px; }
.p-h2-note { font-weight: 600; font-size: .72rem; color: var(--p-mut); display: block; }

.q-list { list-style: none; display: grid; gap: 8px; }
.q-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--p-card); border: 1px solid var(--p-line); border-radius: 14px;
  padding: 10px 12px;
}
.q-item.done { opacity: .55; }
.q-text { flex: 1; min-width: 0; }
.q-title { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.q-pts { font-size: .75rem; color: var(--p-mut); }
.q-go {
  flex: 0 0 auto; min-width: 76px; min-height: 44px;
  border-radius: 12px; font-weight: 800; font-size: .9rem;
  background: var(--p-moss); color: #fff;
  padding: 0 14px;
}
.q-item.done .q-go { background: transparent; color: var(--p-mut); border: 1px solid var(--p-line); }
.q-item.maint .q-title::before { content: '🩹 '; }
.q-del { flex: 0 0 auto; color: var(--p-mut); font-size: 1rem; padding: 8px 6px; }

.p-add {
  display: block; width: 100%; margin-top: 10px;
  border: 2px dashed var(--p-line); border-radius: 14px;
  padding: 12px; font-weight: 800; color: var(--p-moss); background: transparent;
}

.add-form { display: grid; gap: 12px; margin-top: 10px; }
.add-form input[type=text] {
  width: 100%; border: 1px solid var(--p-line); border-radius: 10px;
  padding: 11px 12px; background: #fff;
}
.af-row { display: flex; gap: 16px; flex-wrap: wrap; }
.af-group { display: flex; align-items: center; gap: 6px; }
.af-label { font-size: .75rem; font-weight: 800; color: var(--p-mut); margin-right: 2px; }
.af-group button {
  border: 1px solid var(--p-line); border-radius: 999px;
  padding: 7px 13px; font-weight: 700; font-size: .85rem; background: #fff;
}
.af-group button.sel { background: var(--p-moss); color: #fff; border-color: var(--p-moss); }
.af-daily { font-size: .85rem; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.af-actions { display: flex; gap: 10px; }
.p-btn-primary {
  background: var(--p-moss); color: #fff; font-weight: 800;
  border-radius: 12px; padding: 11px 18px;
}
.p-btn-quiet { color: var(--p-mut); font-weight: 700; padding: 11px 10px; }
.p-btn-danger {
  color: var(--p-warn); font-weight: 700; font-size: .85rem;
  border: 1px solid #e5cfc6; border-radius: 12px; padding: 10px 14px;
}

.log-list { list-style: none; display: grid; gap: 6px; }
.log-list li {
  font-size: .82rem; color: var(--p-mut);
  padding: 7px 12px; background: var(--p-card);
  border: 1px solid var(--p-line); border-radius: 10px;
}
.log-list li b { color: var(--p-ink); }
.log-date { font-size: .7rem; opacity: .8; display: block; }

.p-settings { margin-top: 18px; }
.p-settings summary { font-weight: 800; cursor: pointer; font-size: .9rem; }
.p-settings label { display: block; font-size: .8rem; font-weight: 700; color: var(--p-mut); margin: 12px 0 4px; }
.p-settings input {
  display: block; width: 100%; border: 1px solid var(--p-line);
  border-radius: 10px; padding: 10px 12px; background: #fff; margin-top: 4px;
}
.p-settings .p-btn-primary { margin: 14px 10px 0 0; }
.p-settings .p-btn-danger { margin-top: 14px; }

/* PIN pad */
#screen-pin { justify-content: center; align-items: center; text-align: center; }
.pin-wrap h2 { font-weight: 800; }
.pin-sub { color: var(--p-mut); font-size: .85rem; margin: 6px 0 18px; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin-bottom: 22px; }
.pin-dots i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--p-mut); background: transparent;
}
.pin-dots i.on { background: var(--p-moss); border-color: var(--p-moss); }
.pin-dots.err i { border-color: var(--p-warn); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; }
.pin-pad button {
  height: 64px; border-radius: 18px; font-size: 1.4rem; font-weight: 700;
  background: var(--p-card); border: 1px solid var(--p-line);
}
.pin-pad button:active { background: #e4e9e2; }
.pad-alt { font-size: 1.1rem !important; color: var(--p-mut); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 60; max-width: 92vw;
  background: #2f3a33; color: #fff; font-weight: 700; font-size: .88rem;
  padding: 11px 18px; border-radius: 999px;
  animation: toastIn .25s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ================= MONSTER SCHOOL ================= */
.school-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 14px; }
.school-btn {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.05rem;
  background: #b79ce8; color: #fff;
  border: 3px solid var(--ink); border-radius: 18px;
  padding: 12px 8px; box-shadow: var(--sticker-shadow);
  transition: transform .1s;
}
.school-btn.calm { background: var(--water); }
.school-btn:active { transform: translateY(3px); box-shadow: none; }

.practice-list { list-style: none; display: grid; gap: 12px; }
.practice-card {
  display: grid; grid-template-columns: 64px 1fr; gap: 4px 14px; align-items: center;
  width: 100%; text-align: left;
  background: #fffdf8; border: 3px solid var(--ink); border-radius: 20px;
  padding: 14px; box-shadow: var(--sticker-shadow);
  transition: transform .1s;
}
.practice-card:active { transform: translateY(3px); box-shadow: none; }
.practice-card .pc-emoji { grid-row: 1 / 3; font-size: 2.6rem; text-align: center; }
.practice-card b { font-family: 'Baloo 2', sans-serif; font-size: 1.1rem; }
.practice-card .pc-skill { font-size: .8rem; color: #6d6c8a; font-weight: 700; }
.pc-pick {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: .65rem; font-weight: 800; letter-spacing: .04em;
  background: var(--sun); border: 2px solid var(--ink); border-radius: 999px;
  padding: 2px 8px;
}

/* activity player */
.act-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.act-title {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.5rem;
  color: var(--berry); text-shadow: 2px 2px 0 rgba(255, 255, 255, .7);
}
.act-close {
  width: 44px; height: 44px; font-size: 1.1rem; font-weight: 800;
  background: #fff; border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: var(--sticker-shadow);
}
.act-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center;
  background: #fffdf8; border: 4px solid var(--ink); border-radius: 26px;
  box-shadow: 0 6px 0 rgba(51, 50, 78, .25);
  padding: 26px 20px;
}
.act-text { font-weight: 800; font-size: 1.1rem; line-height: 1.5; max-width: 340px; }
.act-sub { font-weight: 700; font-size: .9rem; color: #6d6c8a; max-width: 320px; line-height: 1.4; }
.act-big { font-size: 3.4rem; line-height: 1; }
.act-next {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.15rem;
  color: #fff; background: var(--berry);
  border: 3px solid var(--ink); border-radius: 18px;
  padding: 12px 34px; box-shadow: var(--sticker-shadow);
}
.act-next:active { transform: translateY(3px); box-shadow: none; }

/* breath step */
.breath-circle {
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfeaff, var(--water));
  border: 4px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #1e3b57; font-size: 1rem;
  transform: scale(1);
  transition: transform 4s ease-in-out;
}
.breath-circle.in { transform: scale(1.5); }
.breath-count { font-weight: 800; color: #6d6c8a; }

/* count step (5-4-3-2-1 grounding) */
.count-btn {
  width: 130px; height: 130px; border-radius: 50%;
  background: linear-gradient(#ffe6a3, #ffcf66);
  border: 4px solid var(--ink); box-shadow: var(--sticker-shadow);
  font-size: 3rem;
  transition: transform .08s;
}
.count-btn:active { transform: scale(.92); }
.count-dots { display: flex; gap: 10px; }
.count-dots i {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--ink); background: #fff;
}
.count-dots i.on { background: var(--leaf); }

/* choice step */
.choice-list { display: grid; gap: 10px; width: 100%; max-width: 360px; }
.choice-btn {
  background: #fff; border: 3px solid var(--ink); border-radius: 16px;
  padding: 12px 14px; font-weight: 800; font-size: .95rem; line-height: 1.35;
  box-shadow: var(--sticker-shadow); text-align: center;
}
.choice-btn:active { transform: translateY(2px); box-shadow: none; }
.choice-btn.good { background: #d9f2cf; border-color: #3c6647; }
.choice-btn.nope { opacity: .45; animation: shake .35s; }
.act-feedback { font-weight: 800; font-size: .95rem; color: #3c6647; min-height: 1.4em; max-width: 340px; }

/* faces step */
.face-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 340px; }
.face-btn {
  display: grid; justify-items: center; gap: 4px;
  background: #fff; border: 3px solid var(--ink); border-radius: 18px;
  padding: 12px 6px; box-shadow: var(--sticker-shadow);
  font-weight: 800; font-size: .8rem;
}
.face-btn:active { transform: translateY(2px); box-shadow: none; }
.face-btn span { font-size: 2.2rem; line-height: 1; }

/* thermometer step */
.thermo { display: grid; gap: 8px; width: 100%; max-width: 300px; }
.thermo-btn {
  border: 3px solid var(--ink); border-radius: 14px;
  padding: 10px; font-weight: 800; font-size: .95rem;
  box-shadow: var(--sticker-shadow); background: #fff;
}
.thermo-btn:active { transform: translateY(2px); box-shadow: none; }
.thermo-btn[data-v="5"] { background: #f28b82; }
.thermo-btn[data-v="4"] { background: #f6ae7b; }
.thermo-btn[data-v="3"] { background: #ffe08a; }
.thermo-btn[data-v="2"] { background: #cde8a8; }
.thermo-btn[data-v="1"] { background: #a8e6cf; }

/* squeeze step */
.squeeze-stage { display: grid; justify-items: center; gap: 14px; }
.squeeze-ball {
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b8, var(--sun));
  border: 4px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem;
  transition: transform .5s ease;
}
.squeeze-ball.tight { transform: scale(.72); }
.squeeze-timer { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--berry); }

/* wave step */
.wave-stage { display: grid; justify-items: center; gap: 12px; width: 100%; }
.wave-meter-wrap {
  width: 60px; height: 190px;
  border: 4px solid var(--ink); border-radius: 999px;
  background: #fff; overflow: hidden;
  display: flex; align-items: flex-end;
}
.wave-meter {
  width: 100%; height: 10%;
  background: linear-gradient(#8ec9f5, var(--water));
  transition: height 2.2s ease-in-out;
}
.wave-emoji { font-size: 2.6rem; transition: transform 2.2s ease-in-out; }

/* parent focus card */
.focus-title { font-size: .95rem; }
.focus-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.focus-chip {
  border: 1px solid var(--p-line); border-radius: 999px;
  padding: 8px 14px; font-weight: 700; font-size: .85rem; background: #fff;
}
.focus-chip.on { background: var(--p-moss); color: #fff; border-color: var(--p-moss); }
.focus-note { font-size: .75rem; color: var(--p-mut); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}