/* Ritmul Clasei — stiluri. Doua lumi: ecranul educatoarei (calm, clar) si scena copiilor (mare, vie). */

@font-face { font-family: "Baloo 2"; src: url("../fonts/baloo-2-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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"; src: url("../fonts/baloo-2-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  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: "Nunito"; src: url("../fonts/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-ext.woff2") format("woff2"); font-weight: 200 1000; font-display: swap;
  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; }

:root {
  --ink: #1f2340; --ink-2: #555a7a; --cream: #fff6e9; --paper: #ffffff;
  --teal: #2ec4b6; --teal-d: #17786f; --coral: #ff6b5e; --coral-d: #e2493c; --sun: #ffd23f;
  --sky: #8fd3ff; --lav: #8f8be0; --leaf: #8bd48b;
  --display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 26px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--text); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; }
body.on-stage { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ================= ecranul educatoarei ================= */
.home { max-width: 1120px; margin: 0 auto; overflow-x: hidden; padding: clamp(16px, 3vw, 36px) clamp(16px, 4vw, 40px) 48px;
  padding-top: max(clamp(16px, 3vw, 36px), env(safe-area-inset-top)); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; flex: none; }
.brand-mark rect { fill: var(--teal); }
.brand-mark circle { fill: #fff; }
.brand-mark circle:nth-of-type(2) { fill: var(--sun); }
.brand-mark circle:nth-of-type(3) { fill: var(--coral); }
.brand-name { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 4.6vw, 1.45rem); letter-spacing: -0.01em; white-space: nowrap; }
.badge { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-d);
  background: #d9f5f1; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 420px) { .badge { font-size: 0.66rem; padding: 6px 9px; } .brand { gap: 9px; } .brand-mark { width: 38px; height: 38px; } }

.intro { position: relative; margin: clamp(18px, 3vw, 32px) 0 clamp(18px, 2.4vw, 28px); display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 4vw, 48px); }
.intro-text { max-width: 44rem; min-width: 0; }
.hero.home-hero { --hh: clamp(120px, 15vw, 190px); align-self: flex-end; margin-right: clamp(0px, 3vw, 40px); }
.home-hero .hero-ring { display: none; }
@media (max-width: 640px) {
  .intro { display: block; }
  .hero.home-hero { --hh: 104px; position: absolute; right: 0; top: -6px; margin: 0; }
  .intro h1 { padding-right: 96px; min-height: 96px; display: flex; align-items: center; }
}
.group-name { font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--teal-d); margin: 0 0 6px !important; }
.starchip { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0 !important; padding: 8px 16px 8px 10px; border-radius: 999px; background: #fff3c4; color: var(--ink) !important; font-size: 1rem !important; font-weight: 700; }
.starchip svg { width: 26px; height: 26px; fill: var(--sun); stroke: #e8a800; stroke-width: 1.5; stroke-linejoin: round; }
.starchip b { font-weight: 900; }
.intro h1 { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; }
.intro .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; color: var(--ink-2); margin: 0; text-wrap: pretty; }

.cards { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1180px) { .home { max-width: 1320px; } .cards { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.card { background: var(--paper); border-radius: var(--r); padding: 14px 14px 18px; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(31, 35, 64, 0.06), 0 14px 34px -18px rgba(31, 35, 64, 0.28); }
.card-art { border-radius: 18px; aspect-ratio: 200 / 92; display: grid; place-items: center; overflow: hidden; }
.card-art svg { width: 78%; height: auto; overflow: visible; }
.card-a .card-art { background: linear-gradient(160deg, #5a5ca6, #a9a4ea); }
.card-b .card-art { background: linear-gradient(160deg, #ffe08a, #ffb98a); }
.card-c .card-art { background: linear-gradient(160deg, #bfeee8, #c9e8ff); }
.a-ped { fill: #cfd3dc; } .a-ped2 { fill: #e6e9ef; } .a-body { fill: #e9ebf2; }
.a-arm { stroke: #e9ebf2; stroke-width: 12; stroke-linecap: round; } .a-spark { fill: #fff3b8; }
.b-ear { fill: #fff8ee; } .b-body { fill: var(--teal); } .b-hop { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 10; }
.c-face { fill: #fff; } .c-pie { fill: var(--coral); } .c-rim { fill: none; stroke: var(--ink); stroke-width: 5; }
.c-toy { fill: var(--sun); } .c-toy2 { fill: var(--teal); }
.card-d .card-art { background: linear-gradient(160deg, #3f427f, #7f7cc9); }
.d-wave { fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0.3; } .d-wave + .d-wave { opacity: 0.55; }
.d-bell { fill: var(--sun); } .d-clap { fill: #ffb53f; }
.card-kicker { margin: 16px 6px 2px; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.card h2 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.12; margin: 0 6px 6px; letter-spacing: -0.01em; text-wrap: balance; }
.card-text { margin: 0 6px 18px; color: var(--ink-2); font-size: 1.05rem; line-height: 1.4; flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 6px; }
.card-time { font-weight: 700; color: var(--ink-2); font-size: 0.95rem; white-space: nowrap; }
.go { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: #fff; background: var(--coral); border-radius: 999px;
  min-height: 58px; padding: 0 30px; box-shadow: 0 5px 0 var(--coral-d); transition: transform 0.08s, box-shadow 0.08s; position: relative; }
.go:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--coral-d); }
.go.is-loading span { opacity: 0; }
.go.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.rhythm { margin: 26px 2px 0; color: var(--ink-2); font-size: 1rem; line-height: 1.7; }
.rhythm b { color: var(--ink); font-weight: 800; white-space: nowrap; } .rhythm i { font-style: normal; color: var(--teal-d); margin: 0 2px; }

.settings { margin-top: clamp(28px, 5vw, 52px); background: #fbeeda; border-radius: var(--r); padding: clamp(18px, 3vw, 28px); }
.settings h2 { font-family: var(--display); font-weight: 600; font-size: 1.35rem; margin: 0 0 16px; }
.set-grid { display: grid; gap: 14px 28px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .set-grid { grid-template-columns: 1fr 1fr; } .set-wide { grid-column: 1 / -1; } }
.set { display: flex; flex-direction: column; gap: 8px; }
.set-label { font-weight: 800; font-size: 1rem; display: block; }
.set-hint { display: block; color: var(--ink-2); font-size: 0.92rem; line-height: 1.35; margin-top: 2px; }
.seg { display: inline-flex; background: #fff; border-radius: 999px; padding: 4px; gap: 2px; align-self: flex-start; flex-wrap: wrap; }
.seg button { min-height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 800; color: var(--ink-2); }
.seg button[aria-checked="true"] { background: var(--ink); color: #fff; }
.seg small { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.75; margin-top: -3px; }
#ageSeg button { padding: 6px 18px; line-height: 1.25; }
.opt { font-weight: 600; color: var(--ink-2); }
.text { font: inherit; font-weight: 700; color: var(--ink); min-height: 50px; padding: 0 18px; border-radius: 999px; border: 0; background: #fff; box-shadow: inset 0 0 0 2px rgba(31, 35, 64, 0.1); width: 100%; max-width: 26rem; }
.text::placeholder { color: #a39c8f; font-weight: 600; }
.text:focus { outline: 3px solid var(--teal-d); outline-offset: 2px; }
.set-switch { flex-direction: row; align-items: flex-start; gap: 14px; cursor: pointer; }
.set-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { flex: none; width: 56px; height: 34px; border-radius: 999px; background: #d9cdb9; position: relative; transition: background 0.15s; margin-top: 1px; }
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.set-switch input:checked + .switch { background: var(--teal); }
.set-switch input:checked + .switch::after { transform: translateX(22px); }
.set-switch input:focus-visible + .switch { outline: 3px solid var(--ink); outline-offset: 3px; }
.vol { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vol input[type="range"] { flex: 1; min-width: 180px; height: 34px; accent-color: var(--teal-d); }
.ghost { min-height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 800; background: #fff; box-shadow: inset 0 0 0 2px rgba(31, 35, 64, 0.14); }
.ghost:active { background: #f1e8d8; }

.foot { margin-top: 28px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; }
.foot-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.foot-actions .ghost { box-shadow: inset 0 0 0 2px rgba(31, 35, 64, 0.16); color: var(--ink); }

/* ghidul pentru educatoare */
.guide { position: fixed; inset: 0; z-index: 20; background: rgba(31, 35, 64, 0.5); display: grid; place-items: center; padding: clamp(0px, 3vw, 28px); animation: fade 0.25s ease both; }
.guide-sheet { position: relative; background: var(--cream); width: min(760px, 100%); max-height: 100%; overflow: auto; border-radius: clamp(0px, 3vw, 30px); padding: clamp(22px, 5vw, 48px); -webkit-overflow-scrolling: touch; }
.guide-close { position: sticky; top: 0; float: right; margin: -6px -6px 0 12px; background: #fff; z-index: 1; }
.guide h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 6px; line-height: 1.1; }
.guide h3 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; margin: 26px 0 8px; color: var(--teal-d); }
.guide p, .guide li { font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.guide ul, .guide ol { margin: 0; padding-left: 1.3em; } .guide li { margin-bottom: 8px; }
.guide a { color: var(--teal-d); font-weight: 700; }

.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; background: var(--ink); color: #fff; font-weight: 700; padding: 12px 20px; border-radius: 999px; max-width: 90vw; text-align: center; animation: cap 0.25s ease-out both; }
.foot p { margin: 0 0 4px; } .foot b { color: var(--ink); }
.usage { margin-top: 10px !important; font-weight: 700; }

/* telefon: carduri compacte, ca toate momentele sa incapa fara mult derulat */
@media (max-width: 859px) {
  .card { display: grid; grid-template-columns: 104px 1fr; grid-template-areas: "art kick" "art title" "art text" "foot foot"; column-gap: 14px; padding: 14px; align-items: start; }
  .card-art { grid-area: art; aspect-ratio: 1; align-self: stretch; min-height: 104px; } .card-art svg { width: 92%; }
  .card-kicker { grid-area: kick; margin: 2px 0 0; } .card h2 { grid-area: title; margin: 0 0 4px; font-size: 1.45rem; }
  .card-text { grid-area: text; margin: 0; } .card-foot { grid-area: foot; margin: 14px 0 0; }
}

/* ================= scena copiilor ================= */
.stage { position: fixed; inset: 0; z-index: 10; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden;
  color: var(--ink); user-select: none; -webkit-user-select: none;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  --hero-h: min(56vh, 62vw); --prop: min(40vh, 34vw); }
@media (orientation: portrait) { .stage { --hero-h: min(42vh, 84vw); --prop: min(25vh, 58vw); } }

.sky, .fx { position: absolute; inset: 0; pointer-events: none; }
.t { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.stage[data-theme="signal"] .t-signal, .stage[data-theme="play"] .t-play, .stage[data-theme="stone"] .t-stone,
.stage[data-theme="air"] .t-air, .stage[data-theme="meadow"] .t-meadow { opacity: 1; }
.t-signal { background: radial-gradient(circle at 50% 58%, #fff6d2 0, #ffdf94 42%, #ffb98a 100%); }
.t-play { background:
  radial-gradient(circle at 87% 17%, #ffe37a 0 5.5vmin, rgba(255, 227, 122, 0.3) 5.6vmin 8.5vmin, transparent 8.6vmin),
  radial-gradient(62% 30% at 18% 106%, #a5e29f 60%, transparent 61%),
  radial-gradient(74% 36% at 86% 110%, #8fd98d 60%, transparent 61%),
  linear-gradient(#c5ecff, #e6f9ef 68%, #d6f4cd); }
.t-stone { background:
  radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(3px 3px at 78% 12%, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 64% 30%, #fff 50%, transparent 51%), radial-gradient(3px 3px at 28% 34%, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 90% 40%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 44% 10%, #fff 50%, transparent 51%),
  radial-gradient(3px 3px at 6% 52%, #fff 50%, transparent 51%),
  radial-gradient(circle at 86% 18%, #fdf4cf 0 4.6vmin, rgba(253, 244, 207, 0.16) 4.7vmin 7.6vmin, transparent 7.7vmin),
  linear-gradient(#3f427f, #6b6abb 58%, #9a95df); }
.t-air { background: linear-gradient(#74c4ff, #b9e3ff 58%, #eaf7ff); overflow: hidden; }
.t-air::before, .t-air::after { content: ""; position: absolute; height: 9vmin; width: 30vmin; border-radius: 999px; background: #fff; opacity: 0.85;
  box-shadow: 8vmin -4vmin 0 1vmin #fff, 17vmin -1vmin 0 -1vmin #fff; animation: drift 46s linear infinite; }
.t-air::before { top: 14%; left: -40vmin; }
.t-air::after { top: 34%; left: -40vmin; transform: scale(0.7); animation-duration: 64s; animation-delay: -30s; opacity: 0.7; }
@keyframes drift { to { translate: calc(100vw + 80vmin) 0; } }
.t-meadow { background:
  radial-gradient(circle at 14% 20%, #ffd98a 0 5vmin, rgba(255, 217, 138, 0.3) 5.1vmin 8vmin, transparent 8.1vmin),
  radial-gradient(70% 34% at 22% 108%, #9ddb98 60%, transparent 61%),
  radial-gradient(80% 40% at 84% 112%, #b4e6ad 60%, transparent 61%),
  linear-gradient(#ffe6bf, #fff3da 52%, #d9f2cf); }

.hud-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hud-btn, .ctrl-btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, 0.72); box-shadow: 0 2px 10px -4px rgba(31, 35, 64, 0.4); }
.hud-btn svg, .ctrl-btn svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hud-btn:active, .ctrl-btn:active { transform: scale(0.94); }
.phases { list-style: none; margin: 0 auto; padding: 5px; display: flex; gap: 2px; background: rgba(255, 255, 255, 0.6); border-radius: 999px; }
.phases li { font-weight: 800; font-size: clamp(0.72rem, 1.5vmin + 0.4rem, 1rem); padding: 7px clamp(8px, 1.6vw, 18px); border-radius: 999px; color: rgba(31, 35, 64, 0.5); white-space: nowrap; }
.phases li.is-on { background: var(--ink); color: #fff; }
.phases li.is-done { color: var(--teal-d); }

.scene { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 4vw, 70px); min-height: 0; }
@media (orientation: portrait) { .scene { flex-direction: column; gap: 2vh; } }
.prop { display: grid; place-items: center; width: var(--prop); height: var(--prop); position: relative; }
.prop[data-kind=""] { display: none; }
.prop[data-kind="steps"] { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: auto; }
@media (orientation: landscape) { .prop[data-kind="number"] { margin-right: -2vw; } }
@media (orientation: portrait) { .prop[data-kind="timer"] { margin-bottom: calc(var(--prop) * 0.26); } }

.bignum { font-family: var(--display); font-weight: 700; font-size: calc(var(--prop) * 1.05); line-height: 1; color: var(--coral);
  text-shadow: 0 0.04em 0 var(--coral-d), 0 0.12em 0.2em rgba(31, 35, 64, 0.18); animation: num 1s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes num { 0% { transform: scale(0.3); opacity: 0; } 30% { transform: scale(1.08); opacity: 1; } 78% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.92); opacity: 0.85; } }

.balloon { height: calc(var(--prop) * 1.25); width: auto; overflow: visible; --k: 0; }
.b-body { transform-origin: 150px 300px; transform: scale(calc(0.46 + 0.54 * var(--k))); }
.b-skin { fill: var(--skin, var(--coral)); } .b-shine { fill: #fff; opacity: 0.45; } .b-knot { fill: var(--knot, var(--coral-d)); }
.b-string { fill: none; stroke: rgba(31, 35, 64, 0.55); stroke-width: 4; stroke-linecap: round; }
.balloon.is-free { animation: free 3.2s ease-in forwards; }
@keyframes free { 0% { transform: none; opacity: 1; } 100% { transform: translateY(-60vh) rotate(6deg); opacity: 0; } }

.timer { width: var(--prop); height: var(--prop); filter: drop-shadow(0 10px 18px rgba(31, 35, 64, 0.2)); }
.t-face { fill: #fff; } .t-rim { fill: none; stroke: var(--ink); stroke-width: 7; }
.t-pie { fill: none; stroke: var(--coral); stroke-width: 96; stroke-dasharray: 100 100; }
.timer-digits { position: absolute; top: 100%; left: 0; right: 0; text-align: center; margin-top: 0.4em;
  font-family: var(--display); font-weight: 600; font-size: calc(var(--prop) * 0.16); color: var(--ink-2); font-variant-numeric: tabular-nums; }

.bell { width: var(--prop); height: var(--prop); --k: 0; overflow: visible; }
.bell-wave { fill: none; stroke: #fff; stroke-width: 3; }
.bell-wave.w1 { opacity: calc(var(--k) * 0.95); } .bell-wave.w2 { opacity: calc(var(--k) * 0.6); } .bell-wave.w3 { opacity: calc(var(--k) * 0.32); }
.bell-cup, .bell-top { fill: var(--sun); } .bell-clap { fill: #ffb53f; }
.bell-body { transform-origin: 120px 66px; transform: rotate(calc(var(--k) * 5deg)); }

.starbar { position: absolute; top: 1vh; left: 0; right: 0; display: flex; justify-content: center; z-index: 2; }
.starbar-row { display: flex; gap: clamp(4px, 1vmin, 12px); padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.65); min-height: clamp(44px, 7.6vmin, 76px); align-items: center; }
.starbar i { width: clamp(28px, 5.6vmin, 60px); height: clamp(28px, 5.6vmin, 60px); display: block; }
.starbar svg { width: 100%; height: 100%; fill: var(--sun); stroke: #e8a800; stroke-width: 1.4; stroke-linejoin: round; overflow: visible; }
.starbar i.is-new { animation: newstar 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes newstar { 0% { transform: scale(0) rotate(-140deg); opacity: 0; } 60% { transform: scale(1.5) rotate(12deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.calm .starbar i.is-new { animation: none; }

.steps { display: flex; justify-content: center; gap: clamp(8px, 2.2vw, 26px); padding-bottom: 1vh; }
.steps i { width: clamp(14px, 3.4vmin, 34px); height: clamp(20px, 4.8vmin, 48px); border-radius: 50%; background: rgba(31, 35, 64, 0.12); transition: background 0.4s, transform 0.4s; }
.steps i:nth-child(odd) { transform: translateY(-30%) rotate(-10deg); } .steps i:nth-child(even) { transform: rotate(10deg); }
.steps i.is-on { background: var(--teal-d); }

.caption { position: relative; margin: 0 auto; padding: 0 4vw; min-height: 2.5em; max-width: 26ch; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 5.6vmin, 4rem); line-height: 1.14; letter-spacing: -0.01em; text-wrap: balance;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: color 0.6s; }
.caption.is-in { animation: cap 0.35s ease-out both; }
@keyframes cap { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }
.stage[data-theme="stone"] .caption { color: #fff; }

.ctrl { position: relative; display: flex; justify-content: center; align-items: center; gap: 18px; padding-top: 8px; }
.ctrl-main { width: 64px; height: 64px; background: #fff; }
.ctrl-main svg { width: 28px; height: 28px; } .ctrl-main .i-play { fill: var(--ink); display: none; }
.ctrl-main[aria-pressed="true"] .i-play { display: block; } .ctrl-main[aria-pressed="true"] .i-pause { display: none; }

.stage.is-paused .scene, .stage.is-paused .caption { opacity: 0.45; }
.stage.is-paused *, .stage.is-paused *::before, .stage.is-paused *::after { animation-play-state: paused !important; }
.stage.is-paused .ctrl-main { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.55); }

/* efecte */
.rings { position: absolute; left: 50%; top: 50%; }
.rings i { position: absolute; left: 0; top: 0; width: 40vmin; height: 40vmin; margin: -20vmin; border-radius: 50%; border: 1.4vmin solid #fff; opacity: 0;
  animation: ring 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
.rings i:nth-child(1) { animation-delay: 0.05s; } .rings i:nth-child(2) { animation-delay: 0.37s; } .rings i:nth-child(3) { animation-delay: 0.69s; }
@keyframes ring { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } }
.burst { position: absolute; left: 50%; top: 46%; }
.burst i { position: absolute; width: 3.2vmin; height: 3.2vmin; margin: -1.6vmin; background: var(--sun); opacity: 0;
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
  animation: burst 1.3s cubic-bezier(0.15, 0.7, 0.3, 1) both; }
.burst i:nth-child(1) { --a: 0deg; } .burst i:nth-child(2) { --a: 36deg; } .burst i:nth-child(3) { --a: 72deg; } .burst i:nth-child(4) { --a: 108deg; }
.burst i:nth-child(5) { --a: 144deg; } .burst i:nth-child(6) { --a: 180deg; } .burst i:nth-child(7) { --a: 216deg; } .burst i:nth-child(8) { --a: 252deg; }
.burst i:nth-child(9) { --a: 288deg; } .burst i:nth-child(10) { --a: 324deg; }
.burst i:nth-child(even) { background: var(--coral); animation-delay: 0.06s; }
@keyframes burst { 0% { transform: rotate(var(--a)) translateY(-6vmin) scale(0.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-46vmin) scale(1.1); opacity: 0; } }

/* intrebarea de la final (pentru adult) */
.veil { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(31, 35, 64, 0.42); animation: fade 0.4s ease both; }
@keyframes fade { from { opacity: 0; } }
.verdict { background: #fff; border-radius: 30px; padding: clamp(20px, 4vw, 40px); width: min(680px, 100%); text-align: center; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); }
.verdict h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3.6vw, 2.2rem); margin: 0 0 18px; }
.verdict-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .verdict-row { grid-template-columns: repeat(3, 1fr); } }
.v { min-height: 76px; border-radius: 20px; font-family: var(--display); font-weight: 600; font-size: 1.25rem; padding: 10px 14px; }
.v-better { background: #d2f4d0; } .v-same { background: #fdeebf; } .v-worse { background: #ffd9d4; }
.v:active { transform: scale(0.97); }
.verdict-note { color: var(--ink-2); font-size: 0.92rem; margin: 14px 0 16px; }
.verdict-more { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* animatii linistite: fara efecte si fara leganari; pozele raman */
.calm .rings, .calm .burst { display: none; }
.calm .t-air::before, .calm .t-air::after { animation: none; left: 12%; }
.calm .bignum, .calm .caption.is-in { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rings, .burst { display: none; } }