:root {
  --ink: #183f45;
  --muted-ink: #48676b;
  --deep: #1d5960;
  --deep-hover: #17494f;
  --sky: #cceaf0;
  --sky-bright: #eaf8f7;
  --meadow: #9fc894;
  --meadow-dark: #6f9f78;
  --sun: #eebd55;
  --sun-deep: #b87924;
  --coral: #c96e68;
  --berry: #8a5b89;
  --panel: rgba(255, 253, 247, .82);
  --panel-solid: #fffdf8;
  --line: rgba(35, 82, 82, .16);
  --shadow-soft: 0 9px 25px rgba(39, 75, 72, .12);
  --shadow: 0 22px 58px rgba(38, 72, 72, .18);
  --page-background: linear-gradient(160deg, #d8eff4 0%, #f5f4df 56%, #d4e8cd 100%);
  --surface: rgba(255, 253, 247, .82);
  --surface-strong: #fffdf8;
  --surface-edge: rgba(255,255,255,.78);
  --soft-border: rgba(35, 82, 82, .16);
  --focus: #287e91;
  --raised-shadow: 0 14px 30px rgba(39, 75, 72, .13), 0 2px 5px rgba(255,255,255,.75) inset;
  --world-sky: linear-gradient(180deg, #b9e0e9 0%, #d6ebdf 57%, #aad09a 58%, #80ae75 100%);
  --radius-large: 28px;
  --radius-medium: 18px;
  --motion: 190ms ease;
  --storybook-outline: rgba(47, 82, 73, .18);
  --storybook-light: rgba(255, 247, 212, .56);
  --storybook-shadow: rgba(48, 69, 59, .2);
  --storybook-paper: rgba(255, 253, 244, .9);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #e8f4ef; }
body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  font-family: ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 82% 7%, rgba(255, 245, 193, .58), transparent 25%),
    radial-gradient(ellipse at 12% 90%, rgba(195, 222, 179, .42), transparent 32%),
    var(--page-background);
  overflow-x: hidden;
  transition: color 260ms ease, background 420ms ease;
}
button, input, select { font: inherit; }
button, .playfield { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, .playfield:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.game-shell {
  position: relative;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.sky-decorations { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cloud { position: absolute; width: 132px; height: 25px; border-radius: 999px; background: rgba(255, 255, 250, .56); filter: blur(.2px); }
.cloud::before, .cloud::after { position: absolute; bottom: -1px; content: ""; border-radius: 50% 52% 45% 45%; background: inherit; }
.cloud::before { left: 17px; width: 57px; height: 42px; }
.cloud::after { right: 16px; width: 45px; height: 35px; }
.cloud-one { top: 8%; left: -36px; transform: scale(.74); }
.cloud-two { top: 20%; right: -33px; transform: scale(1.08); }
.cloud-three { bottom: 9%; left: 8%; transform: scale(.62); }
.sparkle { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.73); filter: blur(.3px); }
.sparkle-one { top: 14%; left: 19%; }.sparkle-two { top: 34%; right: 10%; }.sparkle-three { bottom: 19%; right: 16%; width: 12px; height: 12px; }

.screen { position: relative; z-index: 1; width: min(100%, 520px); }
.start-screen { text-align: center; animation: rise-in 420ms ease-out both; }
.brand-mark { display: flex; align-items: end; justify-content: center; gap: 5px; height: 30px; margin-bottom: 5px; }
.brand-mark span { display: block; width: 8px; border-radius: 999px; background: var(--meadow-dark); transform: rotate(20deg); }
.brand-mark span:nth-child(1) { height: 17px; background: var(--sun); }.brand-mark span:nth-child(2) { height: 29px; background: var(--deep); }.brand-mark span:nth-child(3) { height: 21px; background: var(--meadow-dark); }
.eyebrow { margin: 0 0 6px; color: var(--deep); font-size: .73rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2 { margin: 0; color: var(--ink); font-weight: 850; letter-spacing: -.045em; line-height: .98; }
h1 { font-size: clamp(3.1rem, 14vw, 4.8rem); } h1 span { color: var(--coral); } h2 { font-size: clamp(2.45rem, 12vw, 3.8rem); }
.intro { max-width: 390px; margin: 16px auto 0; color: var(--muted-ink); font-size: 1rem; font-weight: 570; line-height: 1.55; }

.hero-showcase { position: relative; display: grid; width: min(100%, 300px); height: 226px; place-items: end center; margin: 16px auto 7px; overflow: hidden; isolation: isolate; border: 2px solid rgba(255,255,255,.74); border-radius: 46% 54% 41% 43% / 38% 40% 50% 52%; background: linear-gradient(180deg, #bfe5ea 0%, #d9eee0 49%, #9fc68b 50%, #75a46e 100%); box-shadow: 0 16px 32px rgba(43,79,67,.16), inset 0 1px 0 rgba(255,255,255,.78); }
.hero-showcase::before { position: absolute; z-index: 0; right: 13%; top: 10%; width: 56px; height: 56px; content: ""; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #fffbd2 0 8%, #f3ce71 54%, rgba(243,206,113,.12) 71%); box-shadow: 0 0 0 12px rgba(255,244,190,.13); opacity: .88; }
.hero-showcase::after { position: absolute; z-index: 4; bottom: 13px; left: 50%; width: 156px; height: 18px; content: ""; border-radius: 50%; background: rgba(38, 73, 57, .24); filter: blur(6px); transform: translateX(-50%); }
.showcase-skyline, .showcase-home, .showcase-tree, .showcase-path, .showcase-foreground { position: absolute; display: block; pointer-events: none; }
.showcase-skyline { z-index: 0; right: -7%; bottom: 42%; left: -7%; height: 26%; opacity: .72; background: radial-gradient(ellipse at 7% 100%, #6d9d7e 0 26px, transparent 27px), radial-gradient(ellipse at 25% 100%, #7eaa85 0 32px, transparent 33px), radial-gradient(ellipse at 62% 100%, #649374 0 32px, transparent 33px), radial-gradient(ellipse at 86% 100%, #749c79 0 38px, transparent 39px); }
.showcase-home { z-index: 1; top: 57px; left: 14px; width: 111px; height: 96px; border: 4px solid rgba(255,244,215,.64); border-bottom: 0; border-radius: 52px 52px 8px 8px; background: linear-gradient(90deg, transparent 0 24%, rgba(74,133,121,.34) 24% 30%, transparent 30% 67%, rgba(74,133,121,.3) 67% 73%, transparent 73%), linear-gradient(180deg, #f1d7a8, #d9b784); box-shadow: inset 0 8px 0 rgba(255,255,233,.25), 0 7px 0 -3px rgba(142,104,77,.38); }
.showcase-home::before { position: absolute; bottom: 0; left: 35px; width: 34px; height: 55px; content: ""; border: 4px solid #4b877b; border-bottom: 0; border-radius: 24px 24px 0 0; background: linear-gradient(180deg, rgba(40,85,77,.2), rgba(51,107,95,.52)); }
.showcase-home::after { position: absolute; top: -8px; right: -30px; width: 83px; height: 10px; content: ""; border-top: 6px solid rgba(116,83,54,.7); background: repeating-linear-gradient(104deg, transparent 0 10px, rgba(103,74,50,.33) 11px 14px, transparent 15px 24px); box-shadow: 6px 29px 0 -4px rgba(104,75,52,.63), 67px 29px 0 -4px rgba(104,75,52,.63); transform: skewX(-8deg); }
.showcase-tree { z-index: 2; right: 9px; bottom: 30px; width: 82px; height: 142px; background: linear-gradient(90deg, transparent 43%, #785a3e 44% 56%, transparent 57%); }
.showcase-tree::before { position: absolute; top: 0; left: -19px; width: 112px; height: 104px; content: ""; border-radius: 48% 52% 45% 55%; background: radial-gradient(ellipse at 30% 67%, #7fb070 0 20%, transparent 21%), radial-gradient(ellipse at 65% 72%, #4d936a 0 27%, transparent 28%), radial-gradient(ellipse at 54% 31%, #5b9e6a 0 34%, transparent 35%), radial-gradient(ellipse at 17% 37%, #78a96e 0 27%, transparent 28%); box-shadow: inset -11px -8px 0 rgba(42,105,72,.11); }
.showcase-path { z-index: 2; bottom: -8px; left: 27%; width: 47%; height: 49%; background: linear-gradient(90deg, rgba(250,239,202,.2), #e8cfa2 23% 77%, rgba(180,138,96,.35)); clip-path: polygon(44% 0, 57% 0, 100% 100%, 0 100%); opacity: .8; }
.showcase-path::after { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(166deg, transparent 0 11px, rgba(150,109,73,.18) 12px 14px, transparent 15px 24px); }
.showcase-foreground { z-index: 5; bottom: -5px; left: -6px; width: 103px; height: 80px; opacity: .86; background: radial-gradient(ellipse at 14% 100%, #3e7f5e 0 33%, transparent 34%), radial-gradient(ellipse at 48% 86%, #68a86d 0 28%, transparent 29%), radial-gradient(ellipse at 85% 100%, #4c9468 0 34%, transparent 35%); }
.showcase-star { position: absolute; z-index: 6; left: 13%; top: 30%; width: 13px; height: 13px; border-radius: 50%; color: transparent; background: var(--sun); box-shadow: 0 0 0 6px rgba(238,189,85,.17), 0 0 19px rgba(238,189,85,.52); animation: twinkle 2.6s ease-in-out infinite; }

.hero { position: absolute; z-index: 2; width: 64px; height: 100px; transform-origin: center bottom; filter: drop-shadow(0 8px 7px rgba(43, 61, 58, .2)); }
.hero-preview { z-index: 5; position: relative; bottom: 18px; transform: scale(1.5); }
.hero span { position: absolute; display: block; }
.hero-hair-back { top: 6px; left: 6px; width: 52px; height: 52px; border-radius: 49% 53% 44% 46%; background: linear-gradient(135deg, #3f302c, #694d42 74%); box-shadow: inset -5px -5px 0 rgba(39,27,23,.12); }
.hero-head { top: 10px; left: 14px; z-index: 2; width: 38px; height: 40px; border-radius: 47% 51% 51% 46%; background: linear-gradient(115deg, #ce906c, #a85f45); box-shadow: inset 3px 2px 0 rgba(255,225,198,.3), 0 2px 0 rgba(103,59,46,.08); }
.hero-ear { top: 15px; right: -4px; width: 8px; height: 10px; border-radius: 50%; background: #af654a; }
.hero-hair-front { top: 4px; left: 9px; z-index: 3; width: 45px; height: 30px; border-radius: 52% 49% 18% 39%; border-top: 11px solid #46342e; border-left: 8px solid #46342e; box-shadow: -2px -1px 0 rgba(129,94,74,.2); transform: rotate(-8deg); }
.hero-eye { top: 17px; z-index: 3; width: 4px; height: 5px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: #382d2c; box-shadow: inset 1px 1px 0 rgba(255,255,255,.55); }.eye-left { left: 10px; }.eye-right { right: 9px; }
.hero-smile { bottom: 8px; left: 15px; width: 10px; height: 4px; border-bottom: 2px solid #774841; border-radius: 0 0 12px 12px; }.hero-yawn { display: none !important; }
.hero-neck { top: 45px; left: 27px; z-index: 1; width: 10px; height: 10px; background: #a85f45; }
.hero-body { top: 50px; left: 13px; z-index: 2; width: 39px; height: 31px; border: 1px solid rgba(104,62,58,.13); border-radius: 14px 14px 9px 9px; background: linear-gradient(135deg, #dc8a82, #b95c66); box-shadow: inset 3px 3px 0 rgba(255,224,211,.24), inset -3px -3px 0 rgba(117,54,63,.09); }
.hero-body::after { position: absolute; right: 5px; bottom: 4px; width: 12px; height: 2px; content: ""; border-radius: 99px; background: rgba(255,235,221,.42); }
.hero-heart { top: 8px; left: 15px; width: 8px; height: 8px; background: #fff4e2; transform: rotate(45deg); }.hero-heart::before, .hero-heart::after { position: absolute; width: 8px; height: 8px; content: ""; border-radius: 50%; background: inherit; }.hero-heart::before { left: -4px; }.hero-heart::after { top: -4px; }
.hero-arm { top: 54px; z-index: 1; width: 9px; height: 28px; border-radius: 12px; background: linear-gradient(90deg, #c48161, #aa6148); }.arm-left { left: 10px; transform: rotate(18deg); }.arm-right { right: 9px; transform: rotate(-19deg); }
.hero-leg { top: 78px; z-index: 1; width: 10px; height: 19px; border-radius: 0 0 7px 7px; background: linear-gradient(90deg, #4f717b, #335861); }.leg-left { left: 19px; transform: rotate(2deg); }.leg-right { right: 19px; transform: rotate(-2deg); }
.hero-shoe { top: 92px; z-index: 2; width: 17px; height: 8px; border-radius: 9px 9px 4px 5px; background: #34454b; }.shoe-left { left: 14px; }.shoe-right { right: 14px; }
/* Two equally adventurous visual styles share the same playfield dimensions. */
.hero[data-hero-style="girl"] .hero-hair-back { border-radius: 48% 52% 44% 46% 42% 42% 50% 50%; background: linear-gradient(135deg, #45322e, #765145 74%); }.hero[data-hero-style="girl"] .hero-hair-front { border-top-color: #4b342e; border-left-color: #4b342e; }.hero[data-hero-style="girl"] .hero-body { background: linear-gradient(135deg, #d77d87, #b65a70); }.hero[data-hero-style="girl"] .hero-leg { background: linear-gradient(90deg, #597481, #3d5e6b); }
.hero[data-hero-style="boy"] .hero-hair-back { top: 9px; left: 9px; width: 47px; height: 38px; border-radius: 56% 50% 42% 42%; background: linear-gradient(135deg, #343331, #66513c); }.hero[data-hero-style="boy"] .hero-hair-front { top: 7px; left: 13px; width: 38px; height: 18px; border-top: 10px solid #393a35; border-left: 6px solid #393a35; border-radius: 58% 43% 20% 34%; transform: rotate(-4deg); }.hero[data-hero-style="boy"] .hero-body { background: linear-gradient(135deg, #4e8d91, #2f6974); }.hero[data-hero-style="boy"] .hero-heart { width: 7px; height: 7px; background: #fff4de; }.hero[data-hero-style="boy"] .hero-heart::before, .hero[data-hero-style="boy"] .hero-heart::after { width: 7px; height: 7px; }.hero[data-hero-style="boy"] .hero-leg { background: linear-gradient(90deg, #66785d, #445a49); }.hero[data-hero-style="boy"] .hero-shoe { background: #39464d; }

.goal { margin: 0 auto; color: var(--ink); font-size: .93rem; line-height: 1.45; }
.name-entry { display: grid; max-width: 270px; gap: 6px; margin: 14px auto 0; text-align: left; }.name-entry label { color: var(--ink); font-size: .78rem; font-weight: 800; letter-spacing: .01em; }.name-entry input { width: 100%; min-height: 45px; padding: 10px 13px; color: var(--ink); border: 1px solid rgba(36,93,91,.25); border-radius: 11px; outline: 0; background: rgba(255,253,247,.92); box-shadow: inset 0 1px 2px rgba(33,72,70,.08), 0 4px 11px rgba(40,80,70,.06); font-size: .94rem; font-weight: 650; }.name-entry input:focus { border-color: #287e91; box-shadow: 0 0 0 3px rgba(40,126,145,.18), inset 0 1px 2px rgba(33,72,70,.08); }.name-entry input::placeholder { color: #789093; opacity: 1; }.name-entry p { margin: 0; color: var(--muted-ink); font-size: .7rem; font-weight: 600; }
.hero-choice { width: min(100%, 270px); margin: 12px auto 0; padding: 0; border: 0; text-align: left; }.hero-choice legend { padding: 0; color: var(--ink); font-size: .78rem; font-weight: 800; letter-spacing: .01em; }.hero-choice-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 6px; }.hero-choice-button { min-height: 45px; padding: 9px 12px; color: var(--deep); border: 1px solid rgba(35,82,82,.2); border-radius: 12px; background: rgba(255,253,247,.78); box-shadow: 0 3px 10px rgba(41,78,72,.06); font-size: .83rem; font-weight: 850; transition: transform var(--motion), color var(--motion), background var(--motion), border-color var(--motion); }.hero-choice-button:active { transform: scale(.98); }.hero-choice-button[aria-pressed="true"] { color: #fffdf6; border-color: #2c7373; background: linear-gradient(135deg, #438a84, #286b70); box-shadow: 0 5px 13px rgba(34,95,96,.2); }
.control-hint { display: flex; align-items: center; justify-content: center; max-width: 410px; gap: 9px; margin: 13px auto 15px; color: var(--muted-ink); font-size: .84rem; font-weight: 650; line-height: 1.4; }.hint-icon { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; border-radius: 9px; color: transparent; background: rgba(64,133,126,.16); }.hint-icon::before { width: 13px; height: 2px; content: ""; border-radius: 9px; background: var(--deep); box-shadow: -5px 0 0 -1px var(--deep), 5px 0 0 -1px var(--deep); }
.best-score-card { display: inline-grid; grid-template-columns: auto auto auto; align-items: center; gap: 8px; min-width: 154px; padding: 9px 15px; border: 1px solid var(--surface-edge); border-radius: 16px; background: var(--surface); box-shadow: var(--raised-shadow); }.best-label { color: var(--muted-ink); font-size: .75rem; font-weight: 800; }.best-score-card strong { color: var(--deep); font-size: 1.24rem; font-variant-numeric: tabular-nums; }.star-small { width: 10px; height: 10px; border-radius: 50%; color: transparent; background: var(--sun); box-shadow: 0 0 0 3px rgba(238,189,85,.2); }
.start-actions { max-width: 355px; margin: 18px auto 0; }.secondary-actions { display: grid; grid-template-columns: 1fr 1.12fr; gap: 9px; margin-top: 10px; }
.button { display: inline-flex; width: 100%; min-height: 47px; align-items: center; justify-content: center; gap: 9px; padding: 11px 18px; border: 1px solid transparent; border-radius: 14px; font-size: .95rem; font-weight: 800; transition: transform var(--motion), box-shadow var(--motion), background var(--motion); }.button:hover { transform: translateY(-1px); }.button:active { transform: translateY(1px) scale(.99); }
.button-primary { color: #fffef7; background: linear-gradient(135deg, #438a84, #1e5a61); box-shadow: 0 10px 22px rgba(28,78,82,.24), inset 0 1px 0 rgba(255,255,255,.25); font-size: 1.04rem; }.button-primary:hover { background: linear-gradient(135deg, #539b94, #216771); box-shadow: 0 13px 25px rgba(28,78,82,.28), inset 0 1px 0 rgba(255,255,255,.26); }.button-soft { min-height: 44px; color: var(--deep); border-color: var(--line); background: var(--surface); box-shadow: var(--raised-shadow); font-size: .78rem; }.button-soft[aria-pressed="true"], .demo-toggle[aria-pressed="true"] { color: #fffdf6; border-color: #af812d; background: #b9862e; }.demo-note { margin: 10px 0 0; color: var(--muted-ink); font-size: .71rem; font-weight: 600; }

.game-screen { width: min(100%, 800px); animation: fade-in 250ms ease-out both; }.hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }.hud-pill { display: flex; min-height: 53px; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--surface-edge); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.74), var(--surface)); box-shadow: 0 6px 0 rgba(52,90,76,.08), var(--raised-shadow); }.hud-pill span { color: var(--muted-ink); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }.hud-pill strong { color: var(--deep); font-size: 1.24rem; font-variant-numeric: tabular-nums; }.score-pill { border-color: rgba(55,122,123,.25); }.score-pill strong { color: var(--deep); }.star-count-pill, .time-pill { border-color: rgba(218,169,72,.4); background: linear-gradient(145deg, rgba(255,255,248,.93), rgba(255,247,214,.78)); }.star-count-pill strong, .time-pill strong { color: var(--sun-deep); }.flower-count-pill { border-color: rgba(193,101,113,.32); background: linear-gradient(145deg, rgba(255,253,249,.9), rgba(255,232,232,.78)); }.flower-count-pill strong { color: #a65362; }.time-pill strong { font-size: 1.5rem; }.time-pill .seconds { margin-left: -2px; text-transform: lowercase; }.level-pill { display: grid; grid-template-columns: auto auto; align-content: center; column-gap: 5px; border-color: rgba(111,91,151,.32); background: linear-gradient(145deg, rgba(253,249,255,.94), rgba(241,231,250,.82)); }.level-pill span { grid-column: 1 / -1; }.level-pill strong { color: var(--berry); font-size: 1.04rem; }.level-pill em { align-self: center; min-width: 0; overflow-wrap: anywhere; color: var(--berry); font-size: .69rem; font-style: normal; font-weight: 850; line-height: 1.05; }
.playfield-wrap { padding: 8px; border: 1px solid rgba(255,255,255,.78); border-radius: 29px; background: linear-gradient(145deg, rgba(255,255,255,.58), var(--surface)); box-shadow: 0 18px 38px rgba(38,75,65,.19), inset 0 1px 0 rgba(255,255,255,.8); }.playfield { position: relative; width: 100%; height: min(63dvh, 500px); min-height: 300px; overflow: hidden; isolation: isolate; border: 2px solid rgba(255,255,255,.58); border-radius: 23px; background: var(--world-sky); touch-action: none; user-select: none; transition: background 520ms ease, border-color 260ms ease; }.playfield::before { position: absolute; z-index: 0; right: -4%; bottom: 10%; left: -4%; height: 25%; content: ""; pointer-events: none; opacity: .2; background: repeating-linear-gradient(168deg, transparent 0 15px, rgba(246,222,172,.42) 16px 18px, transparent 19px 32px); transform: skewY(-2deg); }.playfield::after { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: radial-gradient(ellipse at 76% 1%, rgba(255,246,205,.58), transparent 27%), linear-gradient(180deg, rgba(255,255,255,.12), transparent 44%, rgba(41,83,56,.06)); }
.field-decorations, .scene-layer { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }.hill { position: absolute; display: block; border-radius: 50% 50% 0 0; }.hill-back { bottom: 22%; left: -14%; width: 68%; height: 28%; background: linear-gradient(180deg, #a9cfa3, #8ab58b); }.hill-back::after { position: absolute; right: -51%; bottom: -8%; width: 108%; height: 96%; content: ""; border-radius: inherit; background: linear-gradient(180deg, #9fc79a, #7eae80); }.hill-front { right: -13%; bottom: -12%; width: 76%; height: 38%; background: linear-gradient(180deg, #a7cc8a, #78a66f); }.hill-front::after { position: absolute; bottom: -2%; left: -55%; width: 82%; height: 80%; content: ""; border-radius: inherit; background: #91bc7d; }.tree-line { position: absolute; bottom: 23%; left: 0; width: 100%; height: 42px; opacity: .45; background: radial-gradient(ellipse at 8% 90%, #5d8b76 0 18px, transparent 19px), radial-gradient(ellipse at 22% 95%, #668f76 0 22px, transparent 23px), radial-gradient(ellipse at 43% 92%, #6f9879 0 17px, transparent 18px), radial-gradient(ellipse at 62% 96%, #55866d 0 23px, transparent 24px), radial-gradient(ellipse at 82% 89%, #6b9677 0 21px, transparent 22px); }.plant { position: absolute; bottom: 13%; width: 20px; height: 36px; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #3d8865, #63aa78); transform: rotate(20deg); }.plant::after { position: absolute; right: -13px; bottom: -2px; width: 18px; height: 28px; content: ""; border-radius: 0 100% 0 100%; background: #4f9b6c; }.plant-one { left: 12%; transform: scale(.75) rotate(18deg); }.plant-two { right: 11%; bottom: 20%; transform: scale(1.05) rotate(-8deg); }.plant-three { right: 36%; bottom: 11%; transform: scale(.55) rotate(12deg); }
.scene-layer { z-index: 1; }.scene-detail { position: absolute; inset: 0; display: block; opacity: .72; }.scene-detail::before, .scene-detail::after { position: absolute; display: block; content: ""; }.scene-playground::before { right: 8%; bottom: 22%; width: 70px; height: 34px; border: 4px solid rgba(78,120,111,.62); border-bottom: 0; border-radius: 42px 42px 0 0; }.scene-playground::after { right: 13%; bottom: 21%; width: 58px; height: 5px; border-radius: 6px; background: rgba(96,80,52,.5); box-shadow: -20px 11px 0 -1px rgba(96,80,52,.45), 23px 11px 0 -1px rgba(96,80,52,.45); }.scene-school::before { right: 6%; bottom: 23%; width: 90px; height: 55px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, rgba(244,229,188,.75) 0 28%, transparent 28% 36%, rgba(244,229,188,.75) 36% 64%, transparent 64% 72%, rgba(244,229,188,.75) 72%); box-shadow: 0 -11px 0 -5px rgba(194,122,92,.52); }.scene-school::after { right: 5%; bottom: 21%; width: 102px; height: 5px; border-radius: 5px; background: rgba(129,93,70,.48); }.scene-home::before { left: 7%; bottom: 21%; width: 78px; height: 54px; border: 6px solid rgba(238,224,192,.76); border-bottom: 0; border-radius: 43px 43px 0 0; background: linear-gradient(90deg, transparent 40%, rgba(100,148,142,.42) 40% 60%, transparent 60%); }.scene-home::after { left: 13%; bottom: 21%; width: 65px; height: 5px; border-radius: 5px; background: rgba(115,83,62,.43); }.scene-birthday::before { right: 8%; top: 13%; width: 104px; height: 40px; background: linear-gradient(125deg, transparent 47%, rgba(194,103,117,.55) 48% 52%, transparent 53%) 0 0 / 26px 40px, linear-gradient(235deg, transparent 47%, rgba(228,185,91,.6) 48% 52%, transparent 53%) 0 0 / 26px 40px; }.scene-birthday::after { right: 13%; bottom: 22%; width: 78px; height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(243,226,182,.82) 0 16%, transparent 16% 24%, rgba(222,151,162,.72) 24% 42%, transparent 42% 50%, rgba(236,190,98,.76) 50% 68%, transparent 68% 76%, rgba(139,174,141,.72) 76%); box-shadow: 0 11px 0 -4px rgba(115,82,63,.5), 0 16px 0 -7px rgba(255,250,235,.52); }
#playfield[data-scene="playground"] { background: linear-gradient(180deg, #bce5e9 0%, #daeeda 57%, #a9cf8e 58%, #78a56d 100%); } #playfield[data-scene="school"] { background: linear-gradient(180deg, #c5e3e4 0%, #e8e6d2 57%, #a9c688 58%, #80a46e 100%); } #playfield[data-scene="home"] { background: linear-gradient(180deg, #c7e4e8 0%, #e8ebd8 57%, #aecb98 58%, #82aa79 100%); } #playfield[data-scene="birthday"] { background: linear-gradient(180deg, #c6e4ec 0%, #e8e7dc 57%, #accd92 58%, #7ca870 100%); }
.cloud-layer, .star-trail-layer, .flower-layer, .moment-layer, .bloom-layer { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }.star-trail-layer { z-index: 2; }.flower-layer, .moment-layer { z-index: 3; }.bloom-layer { z-index: 5; }
.round-finish { position: absolute; inset: 0; z-index: 8; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; color: #fffdf4; pointer-events: none; text-align: center; opacity: 0; background: linear-gradient(180deg, rgba(19,55,59,.04), rgba(24,65,62,.42)); transition: opacity 360ms ease; }.round-finish.is-visible { opacity: 1; }.round-finish span { max-width: 270px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; background: rgba(45,107,101,.82); box-shadow: 0 7px 19px rgba(21,57,56,.24); font-size: .82rem; font-weight: 850; }.round-finish strong { color: #fff7c3; font-size: clamp(1.8rem, 9vw, 2.65rem); font-variant-numeric: tabular-nums; letter-spacing: -.04em; text-shadow: 0 3px 12px rgba(23,53,49,.42); }.playfield.is-round-ending::before, .playfield.is-round-ending::after { opacity: .62; }.playfield.is-round-ending .scene-layer, .playfield.is-round-ending .field-decorations { filter: saturate(.84) brightness(.82); transition: filter 360ms ease; }
.pre-level-countdown { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 20px; pointer-events: none; text-align: center; opacity: 0; background: linear-gradient(180deg, rgba(238,250,242,.08), rgba(24,78,68,.22)); transition: opacity 180ms ease; }.pre-level-countdown.is-visible { opacity: 1; }.pre-level-countdown strong { display: grid; min-width: min(74vw, 260px); min-height: clamp(96px, 24vw, 132px); place-items: center; padding: 14px 24px; border: 2px solid rgba(255,255,255,.78); border-radius: 28px; color: #fffdf4; background: linear-gradient(145deg, rgba(55,135,123,.95), rgba(28,91,91,.97)); box-shadow: 0 13px 29px rgba(25,68,63,.3), inset 0 2px 0 rgba(255,255,255,.25); font-size: clamp(2.45rem, 13vw, 4.65rem); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.05em; line-height: 1; text-shadow: 0 3px 12px rgba(15,50,49,.35); }.pre-level-countdown strong.is-popping { animation: countdown-pop 520ms cubic-bezier(.18,.88,.3,1) both; }@keyframes countdown-pop { 0% { opacity: 0; transform: scale(.72) rotate(-2deg); } 58% { opacity: 1; transform: scale(1.07) rotate(.8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }.playfield.is-round-ending::before, .playfield.is-round-ending::after { opacity: .62; }.playfield.is-round-ending .scene-layer, .playfield.is-round-ending .field-decorations { filter: saturate(.84) brightness(.82); transition: filter 360ms ease; }
.game-cloud { position: absolute; width: 116px; height: 42px; border: 1px solid rgba(87,124,143,.24); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,252,.95), rgba(218,235,239,.82)); box-shadow: 0 7px 12px rgba(68,99,112,.13), inset 0 2px 0 rgba(255,255,255,.75); will-change: transform; }.game-cloud::before, .game-cloud::after { position: absolute; bottom: -1px; content: ""; border: inherit; border-bottom: 0; border-radius: 50% 50% 0 0; background: inherit; }.game-cloud::before { left: 18px; width: 50px; height: 47px; }.game-cloud::after { right: 14px; width: 38px; height: 33px; }.game-cloud.is-bumped { animation: cloud-whoosh 340ms ease-out; }
.game-hero { top: 0; left: 0; z-index: 4; will-change: transform; transition: filter 90ms ease; animation: hero-idle 2.6s ease-in-out infinite alternate; }.game-hero.is-moving { filter: drop-shadow(0 10px 9px rgba(34,57,54,.24)) brightness(1.03); animation: hero-run 320ms ease-in-out infinite alternate; }.game-hero.is-happy { animation: hero-happy 460ms cubic-bezier(.2,.85,.3,1); }.game-hero.is-bumped { animation: hero-encourage 360ms ease-out; }.game-hero.is-cheering { animation: hero-cheer 760ms ease-out; }.game-hero.is-tired { filter: drop-shadow(0 0 12px rgba(72,79,150,.34)) drop-shadow(0 8px 9px rgba(42,48,82,.23)) saturate(.88) brightness(.98); }.game-hero.is-tired::before { position: absolute; top: 8px; left: 3px; z-index: -1; width: 58px; height: 82px; content: ""; border-radius: 50%; background: radial-gradient(ellipse, rgba(76,88,153,.24) 0%, rgba(83,71,140,.1) 48%, transparent 72%); filter: blur(9px); opacity: .8; }.game-hero.is-tired .hero-head { transform: translateY(2px); }.game-hero.is-tired .hero-eye { top: 18px; width: 5px; height: 2px; border-radius: 50%; }.game-hero.is-tired .hero-smile { display: none; }.game-hero.is-tired .hero-yawn { display: block !important; bottom: 6px; left: 15px; z-index: 4; width: 7px; height: 8px; border-radius: 50%; background: #774c58; box-shadow: inset 0 1px 0 rgba(255,222,210,.4); }.game-hero.is-tired .hero-body { transform: translateY(3px); }.game-hero.is-tired .hero-arm { top: 57px; }.game-hero.is-tired .arm-left { transform: rotate(25deg); }.game-hero.is-tired .arm-right { transform: rotate(-27deg); }.game-hero.is-tired .hero-leg { top: 78px; }.game-hero.is-tired.is-moving { filter: drop-shadow(0 0 12px rgba(72,79,150,.32)) drop-shadow(0 9px 9px rgba(42,48,82,.25)) saturate(.91) brightness(1); }
.collectible { position: absolute; z-index: 3; display: block; width: 36px; height: 36px; color: transparent; pointer-events: none; animation: float 1.8s ease-in-out infinite alternate; }.collectible::before { position: absolute; inset: 4px; content: ""; clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%); background: linear-gradient(135deg, #fff9c9, #edba4d 65%, #c98c2a); filter: drop-shadow(0 3px 4px rgba(135,91,23,.22)); }.collectible::after { position: absolute; inset: 8px; content: ""; border-radius: 50%; background: rgba(255,248,180,.34); filter: blur(5px); }
.magic-flower { position: absolute; display: grid; width: 52px; height: 62px; place-items: center; filter: drop-shadow(0 4px 6px rgba(77,91,67,.22)); transform: translate(var(--flower-x), var(--flower-y)); animation: flower-sway 2.1s ease-in-out infinite alternate; }.magic-flower::before { position: absolute; top: 6px; left: 8px; width: 38px; height: 38px; content: ""; border-radius: 50%; background: radial-gradient(ellipse at 50% 8%, transparent 0 26%, #e7a8b1 27% 43%, transparent 44%), radial-gradient(ellipse at 91% 50%, transparent 0 26%, #df8f9d 27% 43%, transparent 44%), radial-gradient(ellipse at 50% 92%, transparent 0 26%, #e7a8b1 27% 43%, transparent 44%), radial-gradient(ellipse at 8% 50%, transparent 0 26%, #df8f9d 27% 43%, transparent 44%), radial-gradient(ellipse at 20% 20%, transparent 0 25%, #e9a4bb 26% 40%, transparent 41%), radial-gradient(ellipse at 80% 20%, transparent 0 25%, #e9a4bb 26% 40%, transparent 41%); }.magic-flower::after { position: absolute; top: 18px; left: 19px; width: 15px; height: 15px; content: ""; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fff2a2 0 11%, #e5b64f 45%, #b77a2e 100%); box-shadow: 0 0 0 3px rgba(255,242,183,.45), 0 0 10px rgba(239,190,91,.52); }.flower-stem { position: absolute; top: 39px; left: 24px; width: 5px; height: 22px; border-radius: 5px; background: #4e9362; }.flower-stem::before { position: absolute; top: 8px; left: -9px; width: 12px; height: 7px; content: ""; border-radius: 100% 0 100% 0; background: #69ab6d; transform: rotate(-28deg); }.flower-value { position: absolute; right: -4px; top: -6px; padding: 2px 5px; border-radius: 8px; color: #694224; background: #fff8db; box-shadow: 0 2px 4px rgba(75,68,42,.17); font-size: .68rem; font-weight: 900; line-height: 1.1; }
.star-trail-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff6b5; box-shadow: 0 0 0 3px rgba(245,205,105,.18), 0 0 10px rgba(244,204,100,.55); opacity: .78; will-change: transform, opacity; animation: trail-twinkle 1.8s ease-in-out infinite alternate; }
.bloom-effect { position: absolute; display: grid; width: 62px; height: 62px; place-items: center; color: transparent; pointer-events: none; animation: bloom-pop 620ms ease-out forwards; }.bloom-effect::before { width: 39px; height: 39px; content: ""; border-radius: 50%; background: radial-gradient(circle at 50% 0, #f1afbd 0 23%, transparent 24%), radial-gradient(circle at 100% 50%, #f1afbd 0 23%, transparent 24%), radial-gradient(circle at 50% 100%, #f1afbd 0 23%, transparent 24%), radial-gradient(circle at 0 50%, #f1afbd 0 23%, transparent 24%), radial-gradient(circle, #f6d579 0 24%, transparent 25%); }.pickup-sparkle { position: absolute; z-index: 4; display: grid; width: 44px; height: 44px; place-items: center; color: #f4c758; font-size: 1.35rem; line-height: 1; pointer-events: none; text-shadow: 0 0 8px rgba(255,246,181,.9); animation: pickup-sparkle 580ms ease-out forwards; }.pickup-sparkle.is-flower { color: #df8f9d; text-shadow: 0 0 8px rgba(255,225,232,.9); }.score-effect, .cheer-effect, .moment-effect { position: absolute; z-index: 3; min-width: 38px; padding: 4px 7px; border-radius: 999px; color: #615031; background: rgba(255,253,239,.9); box-shadow: 0 4px 12px rgba(76,75,51,.16); font-size: .82rem; font-weight: 850; line-height: 1; text-align: center; pointer-events: none; will-change: transform, opacity; }.score-effect { transform: translate(var(--score-x), var(--score-y)); animation: score-float 760ms ease-out forwards; }.score-effect.is-flower { color: #98535e; background: rgba(255,247,244,.93); }.cheer-effect { width: 117px; color: var(--deep); transform: translate(var(--cheer-x), var(--cheer-y)); animation: cheer-pop 900ms ease-out forwards; }.moment-effect { width: 154px; color: #5d4d34; transform: translate(var(--moment-effect-x), var(--moment-effect-y)); animation: moment-pop 1.15s ease-out forwards; }.stage-effect { position: absolute; top: 14px; left: 50%; z-index: 6; padding: 7px 13px; border: 1px solid rgba(255,255,255,.82); border-radius: 999px; color: #fffdf6; background: rgba(50,118,123,.88); box-shadow: 0 7px 17px rgba(34,77,78,.2); font-size: .74rem; font-weight: 850; line-height: 1; pointer-events: none; transform: translateX(-50%); animation: stage-arrival 1.35s ease-out forwards; }.stage-effect.is-exciting { background: rgba(175,123,47,.9); }
.moment-prompt { display: flex; align-items: center; gap: 10px; min-height: 56px; margin: 0 4px 10px; padding: 9px 13px; border: 1px solid rgba(40,107,105,.22); border-radius: 18px; color: var(--ink); background: linear-gradient(145deg, rgba(255,255,253,.95), rgba(248,240,214,.84)); box-shadow: 0 6px 0 rgba(66,99,76,.09), 0 10px 22px rgba(37,74,71,.13), inset 0 1px 0 rgba(255,255,255,.8); }.moment-prompt-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: #dcebe0; box-shadow: inset 0 2px 0 rgba(255,255,255,.6); }.moment-prompt-icon::before { width: 12px; height: 12px; content: ""; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 5px rgba(44,119,116,.13), 0 2px 3px rgba(43,91,78,.2); }.moment-prompt[data-scene="school"] .moment-prompt-icon::before { background: #6a8192; }.moment-prompt[data-scene="home"] .moment-prompt-icon::before { background: #a86569; }.moment-prompt[data-scene="birthday"] .moment-prompt-icon::before { background: var(--berry); }.moment-prompt p { margin: 0; font-size: .8rem; font-weight: 780; line-height: 1.3; }
.brave-moment { position: absolute; display: grid; width: 66px; height: 78px; place-items: center; filter: drop-shadow(0 6px 8px rgba(54,65,54,.25)); pointer-events: none; transform: translate(var(--moment-x), var(--moment-y)); animation: moment-float 1.7s ease-in-out infinite alternate; }.brave-moment::before { position: absolute; inset: 6px 4px 10px; content: ""; border: 2px solid rgba(255,255,255,.86); border-radius: 20px; background: linear-gradient(145deg, rgba(255,253,246,.98), rgba(231,241,226,.93)); box-shadow: 0 5px 0 rgba(67,92,70,.16), 0 0 0 3px rgba(255,241,193,.14), inset 0 2px 0 #fff; }.moment-visual { position: relative; z-index: 1; display: block; width: 40px; height: 44px; }.adult-head { position: absolute; top: 3px; left: 14px; width: 12px; height: 13px; border-radius: 50%; background: #ba8065; }.adult-hair { position: absolute; top: 1px; left: 12px; width: 16px; height: 9px; border-radius: 60% 60% 40% 40%; background: #4a3934; }.adult-body { position: absolute; top: 15px; left: 9px; width: 22px; height: 23px; border-radius: 10px 10px 5px 5px; background: #527b7d; }.adult-arm { position: absolute; top: 19px; right: 4px; width: 7px; height: 18px; border-radius: 10px; background: #ba8065; transform: rotate(-20deg); }.adult-item { position: absolute; right: 0; bottom: 8px; width: 11px; height: 14px; border: 2px solid #e7d27c; border-radius: 3px; background: #f8f0c9; }.is-teacher .adult-body { background: #8a697d; }.is-teacher .adult-item { width: 14px; height: 10px; border-color: #83a4aa; background: #dcebed; }.moment-visual-care-plan-pouch { width: 39px; height: 38px; }.pouch-body { position: absolute; bottom: 3px; left: 5px; width: 29px; height: 25px; border-radius: 7px 7px 9px 9px; background: linear-gradient(135deg, #d69577, #bd6e64); box-shadow: inset 2px 2px rgba(255,226,207,.25); }.pouch-handle { position: absolute; top: 3px; left: 12px; width: 15px; height: 11px; border: 3px solid #98604f; border-bottom: 0; border-radius: 9px 9px 0 0; }.pouch-flap { position: absolute; top: 16px; left: 7px; width: 25px; height: 9px; border-radius: 3px 3px 6px 6px; background: #e5aa89; }.pouch-mark { position: absolute; bottom: 9px; left: 17px; width: 6px; height: 6px; border-radius: 50%; background: #fff3d9; }.moment-context { position: absolute; z-index: -1; display: block; pointer-events: none; }.moment-context.is-play-bench { right: -16px; bottom: 3px; width: 33px; height: 8px; border-radius: 3px; background: #9d704d; box-shadow: 0 9px 0 -2px #79533d, 4px 13px 0 -2px #79533d, 24px 13px 0 -2px #79533d; }.moment-context.is-school-desk { right: -15px; bottom: 4px; width: 30px; height: 12px; border-radius: 3px 3px 1px 1px; background: #b1835e; box-shadow: 4px 13px 0 -3px #805a42, 22px 13px 0 -3px #805a42; }.moment-context.is-school-desk::before { position: absolute; top: -8px; left: 5px; width: 17px; height: 7px; content: ""; border-radius: 2px; background: #d8e7e4; box-shadow: 2px -3px 0 -1px #8ba3a7; }.moment-context.is-home-lamp { right: -15px; bottom: 2px; width: 5px; height: 21px; border-radius: 3px; background: #856149; }.moment-context.is-home-lamp::before { position: absolute; top: -8px; left: -6px; width: 17px; height: 10px; content: ""; border-radius: 9px 9px 3px 3px; background: #f3d68c; box-shadow: 0 0 10px rgba(243,214,140,.65); }.moment-context.is-party-gift { right: -16px; bottom: 3px; width: 19px; height: 17px; border-radius: 3px; background: #d58a9e; box-shadow: 0 6px 0 -3px #a65f79; }.moment-context.is-party-gift::before { position: absolute; top: -7px; left: 7px; width: 5px; height: 24px; content: ""; background: #f5d37b; }.moment-context.is-party-gift::after { position: absolute; top: -10px; left: 4px; width: 12px; height: 8px; content: ""; border: 3px solid #f5d37b; border-bottom: 0; border-radius: 9px 9px 0 0; }.moment-label { position: absolute; z-index: 1; bottom: 0; left: 50%; width: max-content; max-width: 101px; padding: 3px 6px; overflow-wrap: anywhere; border-radius: 8px; color: #fffdf5; background: #355f61; box-shadow: 0 2px 0 rgba(39,70,71,.19); font-size: .59rem; font-weight: 800; line-height: 1.1; text-align: center; transform: translateX(-50%); }
.game-controls { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 11px; padding: 0 4px; }.game-controls p { margin: 0; color: var(--muted-ink); font-size: .78rem; font-weight: 700; line-height: 1.35; }.game-controls p span { color: var(--sun-deep); }.game-control-buttons { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }.change-hero-button { min-height: 40px; margin: 0; padding: 7px 8px; color: var(--deep); border-radius: 10px; font-size: .72rem; text-underline-offset: 2px; }.demo-toggle { min-height: 40px; padding: 8px 11px; color: var(--deep); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--raised-shadow); font-size: .72rem; font-weight: 800; transition: transform var(--motion), background var(--motion); }.demo-toggle:active { transform: scale(.98); }.voice-picker { display: grid; min-width: 132px; gap: 2px; }.voice-picker label { color: var(--muted-ink); font-size: .59rem; font-weight: 800; line-height: 1; }.voice-picker select { width: 100%; min-height: 44px; padding: 7px 25px 7px 9px; overflow: hidden; color: var(--deep); border: 1px solid var(--line); border-radius: 12px; outline: 0; background: rgba(255,253,247,.76); font-size: .7rem; font-weight: 800; text-overflow: ellipsis; }.voice-status { flex-basis: 100%; margin: -2px 0 0; color: var(--muted-ink); font-size: .63rem !important; font-weight: 650 !important; line-height: 1.3 !important; }
.result-screen { animation: rise-in 280ms ease-out both; }
.result-card { position: relative; overflow: hidden; padding: clamp(26px, 6vw, 40px) clamp(18px, 7vw, 44px) 24px; border: 1px solid var(--surface-edge); border-radius: var(--radius-large); text-align: center; background: linear-gradient(145deg, var(--surface-strong), var(--surface)); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.66); }
.result-card.is-celebrating { animation: result-celebration 720ms ease-out both; }
.result-card::before { position: absolute; inset-inline-start: -15%; bottom: -38px; width: 130%; height: 122px; content: ""; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 14% 100%, rgba(69,139,89,.32) 0 20%, transparent 21%), radial-gradient(ellipse at 85% 100%, rgba(102,163,104,.3) 0 24%, transparent 25%), linear-gradient(180deg, rgba(161,199,137,.1), rgba(115,170,107,.3)); }
.result-card::after { position: absolute; inset-block-start: 14px; inset-inline-end: 18px; width: 48px; height: 48px; content: ""; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #fffbd7 0 8%, #f2ce74 52%, rgba(242,206,116,.12) 70%); box-shadow: 0 0 0 9px rgba(244,211,132,.11); }
.result-card > * { position: relative; z-index: 1; }
.result-stars { margin-bottom: 5px; color: #c4933e; font-size: 1.18rem; letter-spacing: .25em; text-shadow: 0 2px 5px rgba(156,118,42,.16); }
.result-card h2 { font-size: clamp(2.15rem, 10vw, 3.35rem); }
.result-hero-stage { position: relative; display: grid; height: 142px; place-items: end center; margin: 4px auto -2px; overflow: hidden; isolation: isolate; }
.result-hero-stage::before { position: absolute; inset-block-start: 15px; width: 116px; height: 116px; content: ""; border-radius: 50%; background: radial-gradient(circle at 38% 31%, rgba(255,253,210,.94) 0 7%, rgba(245,204,111,.6) 43%, rgba(245,204,111,0) 71%); box-shadow: 0 0 0 12px rgba(247,216,138,.13); }
.result-hero-stage::after { position: absolute; inset-block-end: 9px; width: 116px; height: 16px; content: ""; border-radius: 50%; background: rgba(38,73,57,.22); filter: blur(5px); }
.result-hero { position: relative; z-index: 1; margin-inline-start: -2px; transform: scale(1.42) translateY(-6px); animation: result-hero-cheer 760ms cubic-bezier(.2,.85,.3,1) both; }
.result-hero .arm-left { transform: translate(-2px, -7px) rotate(-38deg); }
.result-hero .arm-right { transform: translate(2px, -7px) rotate(38deg); }
.result-message { max-width: 340px; margin: 9px auto 8px; color: var(--muted-ink); font-weight: 700; line-height: 1.45; }
.result-progress { margin: 0 auto 16px; color: var(--deep); font-size: .8rem; font-weight: 850; line-height: 1.35; }
.result-score-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.result-card[data-result-mode="level"] .result-score-summary { grid-template-columns: minmax(0, 1fr); max-width: 240px; margin-inline: auto; }
.result-card[data-result-mode="level"] .result-score { padding-block: 14px; }
.result-card[data-result-mode="adventure"] .result-score-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.result-score-level { border-color: rgba(111,91,151,.26); background: linear-gradient(145deg, rgba(252,248,255,.96), rgba(241,231,250,.82)); }
.result-score-level dd { color: var(--berry); font-size: clamp(1rem, 4.6vw, 1.32rem); line-height: 1.18; letter-spacing: -.02em; }
.result-card[data-result-mode="level"] .result-hero-stage { height: 126px; }
.result-card[data-result-mode="level"] .result-message { margin-top: 2px; }
.result-score { min-width: 0; padding: 12px 8px 11px; border: 1px solid rgba(45,103,91,.14); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,252,.92), rgba(245,249,236,.83)); box-shadow: 0 5px 0 rgba(81,112,69,.08), 0 9px 16px rgba(49,85,66,.08); }
.result-score-final { border-color: rgba(206,153,51,.35); background: linear-gradient(145deg, rgba(255,253,237,.98), rgba(255,239,190,.82)); }
.result-score dt { color: var(--muted-ink); font-size: .72rem; font-weight: 850; line-height: 1.25; }
.result-score dd { margin: 4px 0 0; color: var(--deep); font-size: clamp(1.7rem, 8vw, 2.25rem); font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; }
.result-score-final dd { color: var(--sun-deep); }
.new-best { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; margin: 12px 0 0; padding: 7px 13px; border: 1px solid rgba(183,126,37,.28); border-radius: 999px; color: #88521f; background: rgba(255,241,182,.76); box-shadow: 0 4px 10px rgba(141,102,42,.11); font-size: .84rem; font-weight: 850; }
.result-card .button { min-height: 52px; margin-top: 18px; }
.text-button { min-height: 44px; margin-top: 9px; padding: 9px 18px; color: var(--deep); border: 0; background: transparent; font-size: .85rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.result-main-menu { display: inline-flex; min-width: 150px; align-items: center; justify-content: center; margin-top: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--raised-shadow); text-decoration: none; }
.result-card[data-result-mode="level"] .result-main-menu:hover { background: var(--surface-strong); }
.result-change-hero { display: inline-flex; align-items: center; justify-content: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@keyframes result-celebration { 35% { transform: translateY(-5px) scale(1.015); } 100% { transform: translateY(0) scale(1); } } @keyframes result-hero-cheer { 0% { opacity: 0; transform: scale(1.16) translateY(8px); } 42% { opacity: 1; transform: scale(1.48) translateY(-10px) rotate(-2deg); } 72% { transform: scale(1.4) translateY(-5px) rotate(2deg); } 100% { opacity: 1; transform: scale(1.42) translateY(-6px); } } @keyframes hero-idle { to { transform: translate(var(--hero-x), var(--hero-y)) translateY(-2px) rotate(-.7deg); } } @keyframes hero-run { to { transform: translate(var(--hero-x), var(--hero-y)) translateY(-3px) rotate(1.2deg) scale(1.015); } } @keyframes hero-happy { 35% { transform: translate(var(--hero-x), var(--hero-y)) translateY(-6px) rotate(-4deg) scale(1.06); } 72% { transform: translate(var(--hero-x), var(--hero-y)) translateY(-1px) rotate(3deg) scale(1.02); } 100% { transform: translate(var(--hero-x), var(--hero-y)); } } @keyframes hero-encourage { 35% { transform: translate(var(--hero-x), var(--hero-y)) translateX(-3px) scale(.96); } 68% { transform: translate(var(--hero-x), var(--hero-y)) translateX(2px) scale(1.015); } 100% { transform: translate(var(--hero-x), var(--hero-y)); } } @keyframes pickup-sparkle { 0% { opacity: 0; transform: scale(.55) rotate(-12deg); } 30% { opacity: 1; transform: scale(1.12) rotate(5deg); } 100% { opacity: 0; transform: scale(1.45) rotate(12deg); } } @keyframes stage-arrival { 0% { opacity: 0; transform: translate(-50%, -8px) scale(.92); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1); } 72% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -4px) scale(.98); } } @keyframes moment-float { to { transform: translate(var(--moment-x), calc(var(--moment-y) - 5px)); } } @keyframes flower-sway { to { transform: translate(var(--flower-x), calc(var(--flower-y) - 4px)) rotate(3deg); } } @keyframes moment-pop { 0% { opacity: 0; transform: translate(var(--moment-effect-x), calc(var(--moment-effect-y) + 10px)) scale(.84); } 20% { opacity: 1; transform: translate(var(--moment-effect-x), var(--moment-effect-y)) scale(1); } 100% { opacity: 0; transform: translate(var(--moment-effect-x), calc(var(--moment-effect-y) - 32px)) scale(.98); } } @keyframes float { to { transform: translateY(-6px); } } @keyframes twinkle { 50% { transform: scale(1.13); opacity: .65; } } @keyframes trail-twinkle { to { opacity: .34; } } @keyframes score-float { 0% { opacity: 0; transform: translate(var(--score-x), calc(var(--score-y) + 8px)) scale(.8); } 24% { opacity: 1; transform: translate(var(--score-x), var(--score-y)) scale(1); } 100% { opacity: 0; transform: translate(var(--score-x), calc(var(--score-y) - 38px)) scale(.96); } } @keyframes cheer-pop { 0% { opacity: 0; transform: translate(var(--cheer-x), calc(var(--cheer-y) + 12px)) scale(.8); } 24% { opacity: 1; transform: translate(var(--cheer-x), var(--cheer-y)) scale(1); } 100% { opacity: 0; transform: translate(var(--cheer-x), calc(var(--cheer-y) - 34px)) scale(.96); } } @keyframes hero-cheer { 28% { transform: translate(var(--hero-x), var(--hero-y)) translateY(-10px) rotate(-3deg) scale(1.04); } 58% { transform: translate(var(--hero-x), var(--hero-y)) translateY(-4px) rotate(3deg) scale(1.02); } 100% { transform: translate(var(--hero-x), var(--hero-y)); } } @keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes hero-bump { 35% { transform: translate(var(--hero-x), var(--hero-y)) scale(.93); } 75% { transform: translate(var(--hero-x), var(--hero-y)) scale(1.03); } } @keyframes cloud-whoosh { 50% { filter: brightness(1.06); } } @keyframes bloom-pop { 0% { opacity: 0; transform: scale(.5); } 35% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.32); } }

.sound-toggle { min-height: 40px; padding: 8px 10px; color: var(--deep); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--raised-shadow); font-size: .72rem; font-weight: 800; transition: transform var(--motion), background var(--motion), color var(--motion); }.sound-toggle[aria-pressed="true"] { color: #fffdf6; border-color: #2c7373; background: #32767b; }.sound-toggle:active { transform: scale(.98); }.sound-toggle:disabled { cursor: not-allowed; opacity: .58; }

@media (min-width: 700px) { .game-shell { padding: 30px; }.start-screen { transform: scale(1.04); }.game-screen { width: min(100%, 760px); }.hud { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 13px; margin-bottom: 14px; }.hud-pill { min-height: 62px; }.hud-pill strong { font-size: 1.46rem; }.level-pill strong { font-size: 1.18rem; }.time-pill strong { font-size: 1.78rem; }.playfield { height: min(66dvh, 530px); }.game-controls { margin-top: 14px; }.game-controls p { font-size: .86rem; } }
@media (max-height: 680px) and (orientation: landscape) { .game-shell { padding-top: 12px; padding-bottom: 12px; }.start-screen { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; width: min(100%, 690px); align-items: center; text-align: left; }.brand-mark { grid-column: 1; grid-row: 1; justify-content: start; }.eyebrow { grid-column: 2; grid-row: 1; align-self: end; }.start-screen h1 { grid-column: 2; grid-row: 2; font-size: 3.25rem; }.intro { grid-column: 2; grid-row: 3; margin: 7px 0; }.hero-showcase { grid-column: 1; grid-row: 2 / span 7; margin: 0; }.goal { grid-column: 2; grid-row: 4; margin: 0; }.name-entry { grid-column: 2; grid-row: 5; width: 100%; margin: 7px 0; }.hero-choice { grid-column: 2; grid-row: 6; width: 100%; margin: 0; }.control-hint { grid-column: 2; grid-row: 7; justify-content: flex-start; margin: 7px 0; }.best-score-card { grid-column: 2; grid-row: 8; }.start-actions { grid-column: 2; grid-row: 9; width: 100%; margin: 8px 0 0; }.demo-note { grid-column: 2; grid-row: 10; }.game-screen { width: min(100%, 790px); }.playfield { height: 64dvh; min-height: 240px; }.pre-level-countdown strong { min-height: 80px; padding: 10px 20px; border-radius: 22px; font-size: clamp(2.1rem, 10vw, 3.65rem); }.hud-pill { min-height: 45px; }.hud-pill strong { font-size: 1.15rem; }.time-pill strong { font-size: 1.3rem; }.game-controls { margin-top: 6px; } }
@media (max-width: 420px) { .hero-showcase { width: min(100%, 278px); height: 210px; }.hero-preview { transform: scale(1.4); }.pre-level-countdown { padding: 14px; }.pre-level-countdown strong { min-width: min(78vw, 238px); min-height: 88px; padding: 12px 18px; border-radius: 24px; }.game-controls { display: grid; grid-template-columns: 1fr; }.game-controls p { max-width: none; }.game-control-buttons { width: 100%; flex-wrap: wrap; gap: 5px; }.change-hero-button, .sound-toggle, .demo-toggle { flex: 1 1 auto; padding-right: 8px; padding-left: 8px; }.voice-picker { flex: 1 0 100%; min-width: 0; }.voice-picker select { min-width: 0; }.voice-status { max-width: none; }.result-card { padding: 24px 16px 20px; }.result-hero-stage { height: 132px; }.result-score { padding: 11px 6px; }.result-score dt { font-size: .68rem; }.result-card[data-result-mode="adventure"] .result-score-summary { gap: 6px; }.result-card[data-result-mode="adventure"] .result-score { padding-inline: 4px; }.result-card[data-result-mode="adventure"] .result-score dt { font-size: .62rem; }.result-card[data-result-mode="adventure"] .result-score dd { font-size: 1.28rem; }.result-card[data-result-mode="adventure"] .result-score-level dd { font-size: .84rem; } }
@media (max-height: 680px) and (orientation: landscape) { .result-card { padding-top: 18px; padding-bottom: 16px; }.result-stars { margin-bottom: 2px; }.result-hero-stage { height: 104px; margin-top: -2px; }.result-hero-stage::before { inset-block-start: 4px; width: 92px; height: 92px; }.result-hero-stage::after { inset-block-end: 3px; }.result-hero { transform: scale(1.1) translateY(-2px); animation: none; }.result-message { margin: 4px auto 10px; }.result-score { padding: 8px 7px; }.result-card .button { min-height: 48px; margin-top: 12px; }.result-change-hero { min-height: 44px; margin-top: 3px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.pickup-sparkle, .score-effect, .cheer-effect, .moment-effect, .brave-moment, .game-hero, .game-hero.is-happy, .game-hero.is-bumped, .game-hero.is-cheering, .result-card.is-celebrating, .result-hero { animation: none !important; } }

/* Quiet Saudi-inspired everyday details: warm sand, date-palm green, and geometric shade motifs. */
.scene-detail::selection { background: transparent; }
.scene-home::before { border-color: rgba(236, 220, 180, .86); background: linear-gradient(90deg, transparent 30%, rgba(69, 125, 115, .34) 30% 36%, transparent 36% 64%, rgba(69, 125, 115, .34) 64% 70%, transparent 70%), linear-gradient(0deg, transparent 32%, rgba(69, 125, 115, .28) 32% 38%, transparent 38% 62%, rgba(69, 125, 115, .28) 62% 68%, transparent 68%); box-shadow: inset 0 0 0 2px rgba(235, 193, 103, .16); }
.scene-school::before { border-radius: 38px 38px 8px 8px; background: linear-gradient(90deg, rgba(244, 229, 188, .78) 0 27%, transparent 27% 35%, rgba(244, 229, 188, .78) 35% 65%, transparent 65% 73%, rgba(244, 229, 188, .78) 73%), linear-gradient(180deg, rgba(68, 123, 113, .13), transparent); box-shadow: 0 -11px 0 -5px rgba(194, 122, 92, .52), 0 -16px 0 -9px rgba(75, 132, 104, .26); }
.scene-playground::before { border-color: rgba(69, 125, 105, .68); border-width: 5px; box-shadow: 0 8px 0 -4px rgba(231, 188, 105, .32); }
.scene-playground::after { background: rgba(119, 91, 55, .52); box-shadow: -20px 11px 0 -1px rgba(119, 91, 55, .48), 23px 11px 0 -1px rgba(119, 91, 55, .48), 0 -18px 0 -2px rgba(93, 148, 104, .22); }
.scene-birthday::after { height: 16px; background: radial-gradient(ellipse at 8% 50%, #80503b 0 4px, transparent 5px), radial-gradient(ellipse at 25% 50%, #d58a58 0 5px, transparent 6px), radial-gradient(ellipse at 43% 50%, #f0c35a 0 5px, transparent 6px), radial-gradient(ellipse at 61% 50%, #8daa72 0 5px, transparent 6px), radial-gradient(ellipse at 79% 50%, #d7899c 0 5px, transparent 6px), rgba(243, 226, 182, .82); box-shadow: 0 11px 0 -4px rgba(115, 82, 63, .5), 0 16px 0 -7px rgba(255, 250, 235, .52); }
.moment-context.is-play-bench { box-shadow: 0 9px 0 -2px #79533d, 4px 13px 0 -2px #79533d, 24px 13px 0 -2px #79533d, 0 -7px 0 -3px rgba(96, 149, 105, .55); }
.moment-context.is-school-desk::before { box-shadow: 2px -3px 0 -1px #8ba3a7, 12px -1px 0 -2px #d4a65d; }
.moment-context.is-home-lamp::after { position: absolute; right: -16px; bottom: 0; width: 14px; height: 9px; content: ""; border-radius: 2px 2px 5px 5px; background: #a87a56; box-shadow: 3px 4px 0 -2px rgba(101, 72, 53, .58); }
.moment-context.is-party-gift { box-shadow: 26px 3px 0 -3px #80503b, 37px 3px 0 -3px #d58a58, 48px 3px 0 -3px #8daa72; }

.welcome-settings { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 10px; }.language-switch, .appearance-switch { display: inline-flex; align-items: stretch; min-height: 44px; overflow: hidden; border: 1px solid rgba(35, 82, 82, .2); border-radius: 13px; background: var(--surface); box-shadow: var(--raised-shadow); }
.language-switch-start, .appearance-switch-start { margin: 0; }
.language-button, .appearance-button { min-width: 76px; min-height: 42px; padding: 7px 10px; color: var(--deep); border: 0; border-inline-end: 1px solid rgba(35, 82, 82, .14); background: transparent; font-size: .75rem; font-weight: 850; line-height: 1; }
.appearance-button { min-width: 59px; }
.language-button:last-child, .appearance-button:last-child { border-inline-end: 0; }
.language-button[aria-pressed="true"], .appearance-button[aria-pressed="true"] { color: #fffdf6; background: linear-gradient(135deg, #438a84, #286b70); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.language-switch-game, .appearance-switch-game { min-height: 40px; }
.language-switch-game .language-button, .appearance-switch-game .appearance-button { min-width: 51px; min-height: 38px; padding: 7px 6px; font-size: .65rem; }

html[lang="ar"] body { font-family: Tahoma, Arial, "Segoe UI", system-ui, sans-serif; }
html[dir="rtl"] .start-screen, html[dir="rtl"] .result-card { text-align: center; }
html[dir="rtl"] .name-entry, html[dir="rtl"] .hero-choice { text-align: start; }
html[dir="rtl"] .name-entry input { text-align: start; }
html[dir="rtl"] .intro, html[dir="rtl"] .goal, html[dir="rtl"] .control-hint, html[dir="rtl"] .game-controls p, html[dir="rtl"] .moment-prompt p, html[dir="rtl"] .voice-status { text-align: start; }
html[dir="rtl"] .control-hint { flex-direction: row-reverse; }
html[dir="rtl"] .hud-pill { direction: rtl; }
html[dir="rtl"] .time-pill .seconds { margin-right: -2px; margin-left: 0; }
html[dir="rtl"] .moment-prompt { flex-direction: row-reverse; }
html[dir="rtl"] .game-controls { flex-direction: row-reverse; }
html[dir="rtl"] .game-control-buttons { flex-direction: row-reverse; }
html[dir="rtl"] .voice-picker label { text-align: start; }
html[dir="rtl"] .voice-picker select { padding: 7px 9px 7px 25px; direction: rtl; }
html[dir="rtl"] .moment-label, html[dir="rtl"] .moment-effect, html[dir="rtl"] .stage-effect, html[dir="rtl"] .cheer-effect { direction: rtl; }
html[dir="rtl"] .result-score-summary { direction: rtl; }
/* The game world keeps its original left-origin geometry in both languages. */
html[dir="rtl"] .playfield { direction: ltr; }
html[dir="rtl"] .playfield .moment-label, html[dir="rtl"] .playfield .moment-effect, html[dir="rtl"] .playfield .stage-effect, html[dir="rtl"] .playfield .cheer-effect, html[dir="rtl"] .playfield .round-finish, html[dir="rtl"] .playfield .pre-level-countdown { direction: rtl; }

/* Night is a moonlit re-theme, not a color inversion. */
html[data-theme="dark"] {
  --ink: #eff4ff;
  --muted-ink: #bdc9e4;
  --deep: #a9d8d4;
  --deep-hover: #c3e8e2;
  --sky: #1b2d5f;
  --sky-bright: #2d477c;
  --meadow: #405f68;
  --meadow-dark: #6e9d94;
  --sun: #f3c86b;
  --sun-deep: #f3c86b;
  --coral: #f29aa1;
  --berry: #cbb0e5;
  --panel: rgba(25, 37, 75, .88);
  --panel-solid: #18254c;
  --line: rgba(199, 220, 255, .2);
  --shadow-soft: 0 10px 25px rgba(3, 8, 28, .38);
  --shadow: 0 24px 58px rgba(2, 7, 24, .54);
  --page-background: linear-gradient(160deg, #101a3d 0%, #172653 52%, #273957 100%);
  --surface: rgba(29, 43, 83, .9);
  --surface-strong: #202f5b;
  --surface-edge: rgba(207, 225, 255, .18);
  --soft-border: rgba(194, 217, 255, .2);
  --focus: #f0c96f;
  --raised-shadow: 0 16px 31px rgba(2, 7, 25, .44), 0 1px 0 rgba(228, 240, 255, .12) inset;
  --world-sky: linear-gradient(180deg, #142756 0%, #314a78 49%, #526e78 50%, #263e57 100%);
}
html[data-theme="dark"] { background: #101a3d; }
html[data-theme="dark"] body { background: radial-gradient(circle at 74% 8%, rgba(241, 220, 163, .18) 0 3%, transparent 4%), radial-gradient(circle at 15% 18%, rgba(155, 184, 255, .16), transparent 27%), var(--page-background); }
html[data-theme="dark"] .cloud { background: rgba(185, 207, 241, .24); }
html[data-theme="dark"] .sparkle { background: rgba(238, 246, 255, .78); box-shadow: 0 0 9px rgba(201, 219, 255, .38); }
html[data-theme="dark"] .hero-showcase { border-color: rgba(224,238,255,.2); background: linear-gradient(180deg, #2e4a7b 0%, #385b72 49%, #365b5d 50%, #274757 100%); box-shadow: 0 17px 31px rgba(2,7,25,.4), inset 0 1px 0 rgba(236,244,255,.14); }
html[data-theme="dark"] .hero-showcase::before { background: radial-gradient(circle at 38% 35%, #fff9dc 0 8%, #ead790 42%, rgba(234,215,144,.08) 70%); }
html[data-theme="dark"] .showcase-skyline { opacity: .55; filter: saturate(.75) brightness(.82); }.showcase-home { border-color: rgba(224,236,227,.25); background: linear-gradient(90deg, transparent 0 24%, rgba(111,168,154,.23) 24% 30%, transparent 30% 67%, rgba(111,168,154,.18) 67% 73%, transparent 73%), linear-gradient(180deg, #7c8591, #606d76); box-shadow: inset 0 8px 0 rgba(237,244,239,.08), 0 7px 0 -3px rgba(25,44,54,.45); }.showcase-home::before { background: linear-gradient(180deg, rgba(18,44,54,.2), rgba(46,91,83,.65)); border-color: #66a398; }.showcase-home::after { border-top-color: rgba(142,108,79,.78); background: repeating-linear-gradient(104deg, transparent 0 10px, rgba(172,139,100,.27) 11px 14px, transparent 15px 24px); box-shadow: 6px 29px 0 -4px rgba(72,61,57,.7), 67px 29px 0 -4px rgba(72,61,57,.7); }.showcase-tree, .showcase-foreground { filter: saturate(.76) brightness(.8); }.showcase-path { background: linear-gradient(90deg, rgba(181,203,198,.08), #657080 23% 77%, rgba(50,63,81,.53)); }.showcase-star { box-shadow: 0 0 0 6px rgba(239,201,104,.14), 0 0 19px rgba(239,201,104,.45); }
html[data-theme="dark"] .best-score-card, html[data-theme="dark"] .hud-pill, html[data-theme="dark"] .moment-prompt, html[data-theme="dark"] .result-card, html[data-theme="dark"] .result-score { border-color: var(--surface-edge); background: var(--surface); box-shadow: var(--raised-shadow); }
html[data-theme="dark"] .level-pill strong, html[data-theme="dark"] .level-pill em, html[data-theme="dark"] .result-score-level dd { color: #d9c2f1; }
html[data-theme="dark"] .playfield-wrap { border-color: var(--surface-edge); background: rgba(22, 34, 69, .78); box-shadow: var(--shadow); }
html[data-theme="dark"] .playfield { border-color: rgba(210, 226, 255, .18); background: var(--world-sky); }
html[data-theme="dark"] .playfield::after { background: radial-gradient(ellipse at 75% 4%, rgba(231, 223, 183, .28), transparent 21%), radial-gradient(circle at 20% 17%, rgba(220, 234, 255, .1) 0 1px, transparent 2px), radial-gradient(circle at 47% 11%, rgba(220, 234, 255, .11) 0 1px, transparent 2px), linear-gradient(180deg, rgba(5, 12, 37, .02), rgba(4, 10, 27, .18) 76%); }
html[data-theme="dark"] .hill-back { background: linear-gradient(180deg, #4c7080, #355a6a); } html[data-theme="dark"] .hill-back::after { background: linear-gradient(180deg, #446877, #2d5064); } html[data-theme="dark"] .hill-front { background: linear-gradient(180deg, #3d6370, #243f5d); } html[data-theme="dark"] .hill-front::after { background: #304e64; }
html[data-theme="dark"] .tree-line { opacity: .58; filter: saturate(.75) brightness(.78); } html[data-theme="dark"] .plant { filter: saturate(.76) brightness(.82); }
html[data-theme="dark"] .game-cloud { border-color: rgba(198, 218, 251, .28); background: linear-gradient(180deg, rgba(220, 234, 250, .72), rgba(104, 133, 180, .62)); box-shadow: 0 9px 16px rgba(3, 9, 29, .35), inset 0 1px 0 rgba(255,255,255,.25); }
html[data-theme="dark"] .collectible::before { background: linear-gradient(135deg, #fff8cc, #f0bf52 65%, #b27a29); filter: drop-shadow(0 0 9px rgba(246, 203, 101, .45)); } html[data-theme="dark"] .magic-flower { filter: drop-shadow(0 5px 9px rgba(4, 9, 30, .48)); } html[data-theme="dark"] .flower-value, html[data-theme="dark"] .score-effect, html[data-theme="dark"] .cheer-effect, html[data-theme="dark"] .moment-effect { color: #fff5d6; border: 1px solid rgba(255, 231, 173, .16); background: rgba(37, 47, 83, .92); }
html[data-theme="dark"] .brave-moment::before { border-color: rgba(229, 239, 255, .35); background: linear-gradient(145deg, rgba(44, 63, 106, .96), rgba(33, 57, 80, .94)); box-shadow: 0 6px 0 rgba(6, 13, 35, .28), inset 0 1px 0 rgba(239,247,255,.16); } html[data-theme="dark"] .moment-label { background: #203d63; box-shadow: 0 3px 0 rgba(4,11,30,.36); }
html[data-theme="dark"] .button-primary { background: linear-gradient(135deg, #4e9290, #2b6471); box-shadow: 0 10px 22px rgba(3, 9, 28, .44), inset 0 1px 0 rgba(230,255,250,.2); } html[data-theme="dark"] .button-soft, html[data-theme="dark"] .sound-toggle, html[data-theme="dark"] .demo-toggle, html[data-theme="dark"] .voice-picker select, html[data-theme="dark"] .result-main-menu { color: var(--deep); border-color: var(--soft-border); background: var(--surface); box-shadow: var(--raised-shadow); }
html[data-theme="dark"] .language-switch, html[data-theme="dark"] .appearance-switch { border-color: var(--soft-border); } html[data-theme="dark"] .language-button, html[data-theme="dark"] .appearance-button { color: var(--deep); border-color: rgba(206, 224, 255, .16); } html[data-theme="dark"] .language-button[aria-pressed="true"], html[data-theme="dark"] .appearance-button[aria-pressed="true"] { color: #efffff; background: linear-gradient(135deg, #4b8f90, #2a6675); }
html[data-theme="dark"] .result-card::before { background: rgba(68, 99, 134, .28); } html[data-theme="dark"] .result-hero-stage::before { background: radial-gradient(circle at 38% 31%, rgba(255,245,191,.66) 0 7%, rgba(232,190,93,.28) 43%, rgba(232,190,93,0) 71%); } html[data-theme="dark"] .result-score-final { border-color: rgba(243,200,107,.36); background: linear-gradient(145deg, rgba(59,63,88,.94), rgba(74,71,78,.86)); } html[data-theme="dark"] .new-best { color: #fff0b9; border-color: rgba(255,215,125,.3); background: rgba(116,83,41,.45); } html[data-theme="dark"] .pre-level-countdown { background: linear-gradient(180deg, rgba(6,17,45,.08), rgba(5,16,44,.42)); } html[data-theme="dark"] .pre-level-countdown strong { border-color: rgba(228,240,255,.38); color: #fff9d7; background: linear-gradient(145deg, rgba(55,106,130,.96), rgba(37,61,110,.98)); box-shadow: 0 14px 32px rgba(2,8,30,.54), inset 0 1px 0 rgba(245,251,255,.18); text-shadow: 0 3px 13px rgba(2,8,29,.55); }
html[data-theme="dark"] #playfield[data-scene="playground"] { background: linear-gradient(180deg, #1d3964 0%, #385878 56%, #4b6d6d 57%, #29485d 100%); } html[data-theme="dark"] #playfield[data-scene="school"] { background: linear-gradient(180deg, #233d62 0%, #4e6074 56%, #526c67 57%, #31495c 100%); } html[data-theme="dark"] #playfield[data-scene="home"] { background: linear-gradient(180deg, #263f67 0%, #59687d 56%, #4e6b67 57%, #304a60 100%); } html[data-theme="dark"] #playfield[data-scene="birthday"] { background: linear-gradient(180deg, #263d6b 0%, #5f617b 56%, #526e6d 57%, #314a60 100%); }

/* Home is a full, CSS-only storybook courtyard during its Brave Moment. */
.scene-home { --home-far: #719981; --home-garden: #60916f; --home-wall: #e7c58f; --home-wall-shadow: #ba8f66; --home-teal: #3f8078; --home-paving: #e7cea2; --home-paving-shadow: #c6a174; --home-leaf: #34785a; --home-leaf-light: #70aa70; --home-warmth: rgba(250, 210, 125, .55); --home-wood: #8b6343; overflow: hidden; opacity: 1; animation: scene-settle 280ms cubic-bezier(.2, .8, .3, 1) both; }
.scene-home::before, .scene-home::after { display: block; pointer-events: none; }
.scene-home::before { z-index: 0; inset: 0; background: radial-gradient(ellipse at 75% 4%, var(--home-warmth), transparent 22%), linear-gradient(180deg, rgba(255,255,255,.1), transparent 43%, rgba(61,111,75,.1)); }
.scene-home::after { z-index: 1; right: -6%; bottom: 21%; left: -6%; height: 5%; opacity: .52; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(117,139,91,.23) 19px 31px, transparent 32px 42px); }
.scene-home > span { position: absolute; display: block; pointer-events: none; }
.home-skyline { z-index: 0; right: -7%; bottom: 38%; left: -7%; height: 31%; opacity: .76; background: linear-gradient(180deg, transparent 0 37%, rgba(230,212,172,.45) 38% 68%, transparent 69%), radial-gradient(ellipse at 7% 100%, #87ae85 0 30px, transparent 31px), radial-gradient(ellipse at 28% 100%, #6e9878 0 42px, transparent 43px), radial-gradient(ellipse at 56% 100%, #83ac84 0 31px, transparent 32px), radial-gradient(ellipse at 77% 100%, #638f70 0 47px, transparent 48px), radial-gradient(ellipse at 95% 100%, #7aa27a 0 36px, transparent 37px); }
.home-far-garden { z-index: 1; right: -7%; bottom: 25%; left: -7%; height: 27%; opacity: .82; background: radial-gradient(ellipse at 5% 100%, var(--home-far) 0 33px, transparent 34px), radial-gradient(ellipse at 21% 100%, #6d9b76 0 47px, transparent 48px), radial-gradient(ellipse at 48% 100%, #7cad81 0 35px, transparent 36px), radial-gradient(ellipse at 68% 100%, #5f8c70 0 50px, transparent 51px), radial-gradient(ellipse at 89% 100%, #77a078 0 43px, transparent 44px); }
.home-shade-tree { z-index: 2; left: -3%; bottom: 27%; width: clamp(88px, 19%, 144px); height: 45%; background: linear-gradient(90deg, transparent 43%, #795a3d 44% 56%, transparent 57%); filter: drop-shadow(4px 6px 0 rgba(56,88,59,.12)); }
.home-shade-tree::before { position: absolute; top: 0; left: -18%; width: 137%; height: 69%; content: ""; border-radius: 51% 49% 47% 53%; background: radial-gradient(ellipse at 31% 67%, var(--home-leaf-light) 0 20%, transparent 21%), radial-gradient(ellipse at 65% 72%, #4e9369 0 27%, transparent 28%), radial-gradient(ellipse at 54% 30%, #579b68 0 35%, transparent 36%), radial-gradient(ellipse at 17% 37%, #78a86e 0 27%, transparent 28%); box-shadow: inset -12px -8px 0 rgba(37,103,65,.13); }
.home-facade { z-index: 3; bottom: 27%; left: 8%; width: clamp(145px, 35%, 224px); height: clamp(98px, 28%, 145px); border: 5px solid rgba(255,246,218,.7); border-bottom: 0; border-radius: 70px 70px 9px 9px; background: linear-gradient(90deg, transparent 0 16%, rgba(72,133,120,.3) 16% 21%, transparent 21% 48%, rgba(72,133,120,.22) 48% 53%, transparent 53% 78%, rgba(72,133,120,.3) 78% 83%, transparent 83%), linear-gradient(180deg, #f3d9a8, var(--home-wall)); box-shadow: inset 0 10px 0 rgba(255,251,228,.29), inset -8px 0 0 rgba(173,123,84,.08), 0 9px 0 -3px var(--home-wall-shadow), 0 17px 0 -8px rgba(93,132,93,.38); }
.home-roofline { z-index: 4; bottom: calc(27% + clamp(92px, 26%, 136px)); left: 6%; width: clamp(169px, 40%, 250px); height: 14px; border-radius: 13px 15px 2px 2px; background: linear-gradient(180deg, #d99e68, #b87551); box-shadow: 0 4px 0 rgba(131,89,62,.23), 14px 10px 0 -7px rgba(245,214,161,.7); transform: skewX(-7deg); }
.home-patio-arch { z-index: 5; bottom: 27%; left: calc(8% + clamp(47px, 12%, 77px)); width: clamp(50px, 12%, 75px); height: clamp(66px, 18%, 99px); border: 5px solid var(--home-teal); border-bottom: 0; border-radius: 43px 43px 0 0; background: linear-gradient(180deg, rgba(56,100,89,.18), rgba(52,104,92,.56)); box-shadow: inset 4px 0 0 rgba(255,250,226,.18), inset -4px 0 0 rgba(23,72,64,.1); }
.home-window { z-index: 5; bottom: calc(27% + clamp(31px, 8%, 48px)); width: clamp(21px, 5%, 35px); height: clamp(27px, 7%, 42px); border: 3px solid var(--home-teal); border-radius: 4px; background: linear-gradient(90deg, rgba(246,224,167,.8) 0 44%, var(--home-teal) 45% 55%, rgba(246,224,167,.72) 56%); box-shadow: inset 0 0 0 2px rgba(255,248,204,.23); }
.home-window-left { left: calc(8% + clamp(15px, 4%, 29px)); }.home-window-right { left: calc(8% + clamp(109px, 26%, 169px)); }
.home-pergola { z-index: 4; bottom: 42%; right: 6%; width: clamp(121px, 29%, 210px); height: 13%; border-top: 8px solid rgba(125,89,56,.74); border-radius: 3px; background: repeating-linear-gradient(105deg, transparent 0 13px, rgba(119,86,56,.37) 14px 18px, transparent 19px 32px); box-shadow: 11px 40px 0 -6px rgba(104,77,54,.64), 92px 40px 0 -6px rgba(104,77,54,.64), 0 49px 0 -8px rgba(75,123,83,.3); transform: skewX(-8deg); transform-origin: right bottom; }
.home-path { z-index: 1; bottom: -7%; left: 22%; width: 51%; height: 54%; opacity: .85; background: linear-gradient(90deg, rgba(255,241,205,.18), var(--home-paving) 21% 78%, rgba(194,154,111,.42)); clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); box-shadow: inset 0 2px rgba(255,250,226,.64); }
.home-path::after { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(165deg, transparent 0 15px, rgba(157,119,83,.2) 16px 18px, transparent 19px 33px); }
.home-path-stones { z-index: 2; bottom: 9%; left: 38%; width: 22%; height: 18%; opacity: .42; background: radial-gradient(ellipse at 13% 73%, rgba(141,105,76,.48) 0 7px, transparent 8px), radial-gradient(ellipse at 73% 78%, rgba(141,105,76,.42) 0 8px, transparent 9px), radial-gradient(ellipse at 44% 33%, rgba(141,105,76,.37) 0 5px, transparent 6px); }
.home-seating { z-index: 5; right: 15%; bottom: 28%; width: clamp(62px, 14%, 94px); height: clamp(27px, 7%, 38px); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #bd8067 0 41%, #98604e 42%); box-shadow: 9px 20px 0 -5px #734a3d, 63px 20px 0 -5px #734a3d, 0 -9px 0 -2px rgba(247,221,169,.88), 20px -6px 0 -4px rgba(104,133,84,.36); }
.home-planter { z-index: 6; right: 3%; bottom: 22%; width: clamp(47px, 11%, 71px); height: clamp(64px, 18%, 95px); border-radius: 48% 48% 8px 8px; background: radial-gradient(ellipse at 20% 23%, var(--home-leaf-light) 0 25%, transparent 26%), radial-gradient(ellipse at 75% 18%, #4c906a 0 28%, transparent 29%), radial-gradient(ellipse at 50% 48%, var(--home-leaf) 0 34%, transparent 35%), linear-gradient(180deg, transparent 0 67%, #b78365 68% 100%); box-shadow: 0 9px 0 -4px rgba(92,83,57,.4); }
.home-garden-bed { z-index: 3; right: -2%; bottom: 18%; width: 36%; height: 18%; border-radius: 56% 0 0 0; background: radial-gradient(ellipse at 15% 53%, #d88a9e 0 5px, transparent 6px), radial-gradient(ellipse at 34% 27%, #f1bf67 0 5px, transparent 6px), radial-gradient(ellipse at 57% 58%, #d88a9e 0 6px, transparent 7px), radial-gradient(ellipse at 79% 35%, #f1bf67 0 5px, transparent 6px), radial-gradient(ellipse at 13% 100%, var(--home-leaf) 0 28%, transparent 29%), radial-gradient(ellipse at 47% 100%, var(--home-leaf-light) 0 32%, transparent 33%), radial-gradient(ellipse at 81% 100%, #4b9368 0 30%, transparent 31px); opacity: .84; }
.home-lamp-glow { z-index: 6; right: 30%; bottom: 38%; width: 23px; height: 23px; border-radius: 50%; background: #f8d882; box-shadow: 0 0 0 9px rgba(248,216,130,.17), 0 0 20px rgba(248,216,130,.56); opacity: .72; }
.home-foreground { z-index: 7; bottom: -3%; width: clamp(72px, 19%, 138px); height: clamp(78px, 24%, 124px); opacity: .82; background: radial-gradient(ellipse at 14% 100%, var(--home-leaf) 0 32%, transparent 33%), radial-gradient(ellipse at 43% 87%, var(--home-leaf-light) 0 28%, transparent 29%), radial-gradient(ellipse at 75% 100%, #4c906a 0 35%, transparent 36%); }
.home-foreground-left { left: -2%; transform: scaleX(-1); }.home-foreground-right { right: -2%; }
@keyframes scene-settle { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
html[data-theme="dark"] .scene-home { --home-far: #426a65; --home-garden: #3e6e61; --home-wall: #76808b; --home-wall-shadow: #4d5967; --home-teal: #69a99c; --home-paving: #626f7e; --home-paving-shadow: #3d4a5c; --home-leaf: #2d5e56; --home-leaf-light: #4d856f; --home-warmth: rgba(241,207,127,.28); --home-wood: #71584b; }
html[data-theme="dark"] .home-skyline, html[data-theme="dark"] .home-far-garden { opacity: .63; filter: saturate(.78) brightness(.84); }
html[data-theme="dark"] .home-shade-tree { filter: saturate(.77) brightness(.76); }
html[data-theme="dark"] .home-facade { border-color: rgba(221,232,225,.28); background: linear-gradient(90deg, transparent 0 16%, rgba(111,168,154,.22) 16% 21%, transparent 21% 48%, rgba(111,168,154,.17) 48% 53%, transparent 53% 78%, rgba(111,168,154,.22) 78% 83%, transparent 83%), linear-gradient(180deg, #858d98, var(--home-wall)); box-shadow: inset 0 10px 0 rgba(237,244,239,.08), inset -8px 0 rgba(18,44,51,.12), 0 9px 0 -3px var(--home-wall-shadow), 0 17px 0 -8px rgba(24,51,61,.52); }
html[data-theme="dark"] .home-roofline { background: linear-gradient(180deg, #946c5d, #684d49); box-shadow: 0 4px 0 rgba(31,41,51,.38), 14px 10px 0 -7px rgba(174,146,111,.28); }
html[data-theme="dark"] .home-patio-arch { background: linear-gradient(180deg, rgba(16,33,45,.18), rgba(40,78,74,.58)); box-shadow: inset 4px 0 rgba(224,246,238,.08), inset -4px 0 rgba(7,28,38,.2); }
html[data-theme="dark"] .home-window { background: linear-gradient(90deg, rgba(242,196,112,.78) 0 44%, var(--home-teal) 45% 55%, rgba(242,196,112,.67) 56%); box-shadow: 0 0 10px rgba(245,203,119,.18); }
html[data-theme="dark"] .home-pergola { border-color: rgba(131,102,77,.78); background: repeating-linear-gradient(105deg, transparent 0 13px, rgba(157,128,97,.27) 14px 18px, transparent 19px 32px); box-shadow: 11px 40px 0 -6px rgba(76,62,59,.74), 92px 40px 0 -6px rgba(76,62,59,.74), 0 49px 0 -8px rgba(41,89,72,.32); }
html[data-theme="dark"] .home-path { opacity: .62; background: linear-gradient(90deg, rgba(181,203,198,.08), var(--home-paving) 22% 77%, rgba(50,63,81,.53)); }
html[data-theme="dark"] .home-seating { background: linear-gradient(180deg, #9a6f65 0 41%, #754e4d 42%); box-shadow: 9px 20px 0 -5px #4b3940, 63px 20px 0 -5px #4b3940, 0 -9px 0 -2px rgba(208,180,133,.47); }
html[data-theme="dark"] .home-lamp-glow { background: #f4d182; box-shadow: 0 0 0 9px rgba(244,209,130,.12), 0 0 19px rgba(244,209,130,.49); }
@media (max-height: 680px) and (orientation: landscape) { .home-facade { width: clamp(115px, 31%, 176px); height: clamp(74px, 23%, 99px); }.home-roofline { bottom: calc(27% + clamp(69px, 21%, 91px)); }.home-patio-arch { left: calc(8% + clamp(37px, 10%, 58px)); }.home-pergola { bottom: 45%; }.home-seating { bottom: 30%; }.home-foreground { height: clamp(50px, 18%, 78px); }.home-shade-tree { opacity: .8; } }

/* School is a lively, local CSS-only storybook courtyard during its Brave Moment. */
.scene-school { --school-far: #779a82; --school-leaf: #347a5b; --school-leaf-light: #75ab70; --school-wall: #ead2a2; --school-wall-shadow: #b89067; --school-teal: #42827b; --school-paving: #d8c08e; --school-wood: #8b6548; --school-sky-light: rgba(248,211,126,.5); overflow: hidden; opacity: 1; animation: scene-settle 280ms cubic-bezier(.2, .8, .3, 1) both; }
.scene-school::before, .scene-school::after { display: block; pointer-events: none; }
.scene-school::before { z-index: 0; inset: 0; background: radial-gradient(ellipse at 74% 5%, var(--school-sky-light), transparent 22%), linear-gradient(180deg, rgba(255,255,255,.1), transparent 45%, rgba(45,100,69,.08)); }
.scene-school::after { z-index: 1; right: -6%; bottom: 22%; left: -6%; height: 5%; opacity: .45; background: repeating-linear-gradient(90deg, transparent 0 19px, rgba(98,137,91,.23) 20px 32px, transparent 33px 44px); }
.scene-school > span { position: absolute; display: block; pointer-events: none; }
.school-skyline { z-index: 0; right: -7%; bottom: 39%; left: -7%; height: 30%; opacity: .76; background: linear-gradient(180deg, transparent 0 40%, rgba(227,211,180,.43) 41% 66%, transparent 67%), radial-gradient(ellipse at 7% 100%, #87ad87 0 28px, transparent 29px), radial-gradient(ellipse at 25% 100%, #6c9677 0 40px, transparent 41px), radial-gradient(ellipse at 54% 100%, #7ba881 0 34px, transparent 35px), radial-gradient(ellipse at 79% 100%, #649170 0 43px, transparent 44px), radial-gradient(ellipse at 96% 100%, #7ca47a 0 33px, transparent 34px); }
.school-far-garden { z-index: 1; right: -7%; bottom: 24%; left: -7%; height: 29%; opacity: .83; background: radial-gradient(ellipse at 6% 100%, var(--school-far) 0 34px, transparent 35px), radial-gradient(ellipse at 24% 100%, #6d9b78 0 45px, transparent 46px), radial-gradient(ellipse at 46% 100%, #7baa81 0 34px, transparent 35px), radial-gradient(ellipse at 69% 100%, #5d8c70 0 49px, transparent 50px), radial-gradient(ellipse at 91% 100%, #76a077 0 41px, transparent 42px); }
.school-building { z-index: 3; right: 8%; bottom: 28%; width: clamp(172px, 42%, 290px); height: clamp(105px, 30%, 161px); border: 5px solid rgba(255,247,220,.7); border-bottom: 0; border-radius: 31px 31px 8px 8px; background: linear-gradient(90deg, rgba(71,129,119,.16) 0 8%, transparent 8% 23%, rgba(71,129,119,.2) 23% 27%, transparent 27% 48%, rgba(71,129,119,.2) 48% 52%, transparent 52% 74%, rgba(71,129,119,.2) 74% 78%, transparent 78% 92%, rgba(71,129,119,.15) 92%), linear-gradient(180deg, #f3dbaa, var(--school-wall)); box-shadow: inset 0 10px 0 rgba(255,251,228,.28), inset -8px 0 0 rgba(167,116,80,.08), 0 10px 0 -3px var(--school-wall-shadow), 0 17px 0 -8px rgba(88,131,92,.38); }
.school-roofline { z-index: 4; right: 6%; bottom: calc(28% + clamp(98px, 28%, 149px)); width: clamp(196px, 47%, 320px); height: 15px; border-radius: 16px 14px 2px 2px; background: linear-gradient(180deg, #d89d68, #b97551); box-shadow: 0 4px 0 rgba(129,86,61,.22), -16px 10px 0 -7px rgba(244,212,160,.72); transform: skewX(7deg); }
.school-entrance { z-index: 5; right: calc(8% + clamp(57px, 14%, 97px)); bottom: 28%; width: clamp(53px, 13%, 79px); height: clamp(68px, 19%, 102px); border: 5px solid var(--school-teal); border-bottom: 0; border-radius: 42px 42px 0 0; background: linear-gradient(180deg, rgba(57,101,89,.19), rgba(49,101,91,.57)); box-shadow: inset 4px 0 0 rgba(255,250,226,.18), inset -4px 0 0 rgba(25,71,63,.1); }
.school-window { z-index: 5; bottom: calc(28% + clamp(39px, 10%, 55px)); width: clamp(21px, 5%, 35px); height: clamp(28px, 7%, 44px); border: 3px solid var(--school-teal); border-radius: 4px; background: linear-gradient(90deg, rgba(224,239,228,.9) 0 44%, var(--school-teal) 45% 55%, rgba(224,239,228,.84) 56%); box-shadow: inset 0 0 0 2px rgba(255,251,215,.24); }
.school-window-one { right: calc(8% + clamp(18px, 5%, 35px)); }.school-window-two { right: calc(8% + clamp(113px, 27%, 182px)); }.school-window-three { right: calc(8% + clamp(145px, 34%, 225px)); }
.school-shade-canopy { z-index: 6; left: 7%; bottom: 39%; width: clamp(116px, 28%, 210px); height: 12%; border-top: 8px solid rgba(118,85,55,.73); border-radius: 3px; background: repeating-linear-gradient(105deg, transparent 0 13px, rgba(111,78,51,.36) 14px 18px, transparent 19px 32px); box-shadow: 11px 40px 0 -6px rgba(95,71,51,.63), 94px 40px 0 -6px rgba(95,71,51,.63), 0 49px 0 -8px rgba(76,124,83,.28); transform: skewX(-8deg); transform-origin: left bottom; }
.school-path { z-index: 1; bottom: -7%; left: 24%; width: 49%; height: 55%; opacity: .84; background: linear-gradient(90deg, rgba(255,241,205,.18), var(--school-paving) 21% 78%, rgba(180,143,101,.42)); clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); box-shadow: inset 0 2px rgba(255,250,226,.62); }
.school-path::after { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(165deg, transparent 0 15px, rgba(145,111,76,.2) 16px 18px, transparent 19px 33px); }
.school-path-stones { z-index: 2; bottom: 10%; left: 40%; width: 21%; height: 17%; opacity: .43; background: radial-gradient(ellipse at 12% 75%, rgba(128,100,74,.48) 0 7px, transparent 8px), radial-gradient(ellipse at 74% 80%, rgba(128,100,74,.42) 0 8px, transparent 9px), radial-gradient(ellipse at 47% 32%, rgba(128,100,74,.38) 0 5px, transparent 6px); }
.school-seating { z-index: 5; left: 16%; bottom: 27%; width: clamp(65px, 15%, 98px); height: clamp(27px, 7%, 38px); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #bf8065 0 41%, #99604e 42%); box-shadow: 9px 20px 0 -5px #70483b, 66px 20px 0 -5px #70483b, 0 -9px 0 -2px rgba(247,221,169,.85); }
.school-palm { z-index: 2; left: -2%; bottom: 25%; width: clamp(82px, 18%, 135px); height: 49%; background: linear-gradient(90deg, transparent 44%, #76583e 45% 56%, transparent 57%); filter: drop-shadow(4px 7px 0 rgba(49,83,57,.13)); }
.school-palm::before { position: absolute; top: 0; left: -16%; width: 135%; height: 38%; content: ""; background: radial-gradient(ellipse at 49% 76%, var(--school-leaf) 0 23%, transparent 24%), radial-gradient(ellipse at 22% 48%, var(--school-leaf-light) 0 21%, transparent 22%), radial-gradient(ellipse at 75% 47%, #52966a 0 22%, transparent 23%), linear-gradient(27deg, transparent 48%, #4a8d63 49% 53%, transparent 54%), linear-gradient(-28deg, transparent 48%, #5b9c69 49% 53%, transparent 54%); border-radius: 50%; }
.school-garden-bed { z-index: 3; left: -2%; bottom: 18%; width: 37%; height: 18%; border-radius: 0 56% 0 0; background: radial-gradient(ellipse at 17% 50%, #d58a9e 0 5px, transparent 6px), radial-gradient(ellipse at 39% 26%, #efbd69 0 5px, transparent 6px), radial-gradient(ellipse at 61% 58%, #d58a9e 0 6px, transparent 7px), radial-gradient(ellipse at 82% 33%, #efbd69 0 5px, transparent 6px), radial-gradient(ellipse at 14% 100%, var(--school-leaf) 0 28%, transparent 29%), radial-gradient(ellipse at 49% 100%, var(--school-leaf-light) 0 32%, transparent 33%), radial-gradient(ellipse at 83% 100%, #4b9368 0 30%, transparent 31px); opacity: .84; }
.school-sports-court { z-index: 2; right: -2%; bottom: 12%; width: 29%; height: 23%; border: 3px solid rgba(235,221,178,.56); border-radius: 17px 0 0 0; opacity: .62; background: linear-gradient(90deg, transparent 49%, rgba(235,221,178,.6) 50% 52%, transparent 53%), linear-gradient(180deg, transparent 48%, rgba(235,221,178,.55) 49% 52%, transparent 53%), rgba(73,139,126,.21); }
.school-hoop { z-index: 4; right: 6%; bottom: 27%; width: 47px; height: 68px; border-right: 4px solid rgba(102,88,69,.7); }
.school-hoop::before { position: absolute; top: 0; right: -7px; width: 26px; height: 19px; content: ""; border: 3px solid rgba(242,238,217,.84); border-radius: 3px; background: rgba(93,149,139,.25); }.school-hoop::after { position: absolute; top: 22px; right: -14px; width: 22px; height: 10px; content: ""; border: 3px solid #c76e59; border-top: 0; border-radius: 0 0 14px 14px; }
.school-bags { z-index: 6; left: 31%; bottom: 23%; width: 38px; height: 31px; border-radius: 10px 10px 6px 6px; background: linear-gradient(135deg, #da8d73, #bb655f); box-shadow: 22px 6px 0 -3px #4e8a91, 3px -9px 0 -6px #94594f, 24px -3px 0 -6px #2e6873, 0 7px 0 rgba(94,70,57,.2); }
.school-water-bottles { z-index: 6; left: 25%; bottom: 24%; width: 9px; height: 22px; border-radius: 4px 4px 5px 5px; background: #8bc5ca; box-shadow: 15px 4px 0 -1px #f3cf75, 0 -3px 0 -2px #4d8b93, 15px 1px 0 -2px #bd9342, 1px 5px 0 rgba(45,97,105,.16); }
.school-foreground { z-index: 7; bottom: -3%; width: clamp(72px, 19%, 138px); height: clamp(78px, 24%, 124px); opacity: .82; background: radial-gradient(ellipse at 14% 100%, var(--school-leaf) 0 32%, transparent 33%), radial-gradient(ellipse at 43% 87%, var(--school-leaf-light) 0 28%, transparent 29%), radial-gradient(ellipse at 75% 100%, #4c906a 0 35%, transparent 36%); }
.school-foreground-left { left: -2%; transform: scaleX(-1); }.school-foreground-right { right: -2%; }
html[data-theme="dark"] .scene-school { --school-far: #426a65; --school-leaf: #2e5f57; --school-leaf-light: #4e856f; --school-wall: #75808b; --school-wall-shadow: #4d5967; --school-teal: #69a99c; --school-paving: #626f7e; --school-wood: #70574a; --school-sky-light: rgba(241,207,127,.27); }
html[data-theme="dark"] .school-skyline, html[data-theme="dark"] .school-far-garden { opacity: .63; filter: saturate(.78) brightness(.84); }.school-palm { filter: saturate(.77) brightness(.76); }
html[data-theme="dark"] .school-building { border-color: rgba(221,232,225,.28); background: linear-gradient(90deg, rgba(111,168,154,.13) 0 8%, transparent 8% 23%, rgba(111,168,154,.18) 23% 27%, transparent 27% 48%, rgba(111,168,154,.18) 48% 52%, transparent 52% 74%, rgba(111,168,154,.18) 74% 78%, transparent 78% 92%, rgba(111,168,154,.13) 92%), linear-gradient(180deg, #858d98, var(--school-wall)); box-shadow: inset 0 10px 0 rgba(237,244,239,.08), inset -8px 0 rgba(18,44,51,.12), 0 10px 0 -3px var(--school-wall-shadow), 0 17px 0 -8px rgba(24,51,61,.52); }
html[data-theme="dark"] .school-roofline { background: linear-gradient(180deg, #946c5d, #684d49); box-shadow: 0 4px 0 rgba(31,41,51,.38), -16px 10px 0 -7px rgba(174,146,111,.28); }
html[data-theme="dark"] .school-entrance { background: linear-gradient(180deg, rgba(16,33,45,.18), rgba(40,78,74,.58)); box-shadow: inset 4px 0 rgba(224,246,238,.08), inset -4px 0 rgba(7,28,38,.2); }
html[data-theme="dark"] .school-window { background: linear-gradient(90deg, rgba(242,196,112,.78) 0 44%, var(--school-teal) 45% 55%, rgba(242,196,112,.67) 56%); box-shadow: 0 0 10px rgba(245,203,119,.18); }
html[data-theme="dark"] .school-shade-canopy { border-color: rgba(131,102,77,.78); background: repeating-linear-gradient(105deg, transparent 0 13px, rgba(157,128,97,.27) 14px 18px, transparent 19px 32px); box-shadow: 11px 40px 0 -6px rgba(76,62,59,.74), 94px 40px 0 -6px rgba(76,62,59,.74), 0 49px 0 -8px rgba(41,89,72,.32); }
html[data-theme="dark"] .school-path { opacity: .62; background: linear-gradient(90deg, rgba(181,203,198,.08), var(--school-paving) 22% 77%, rgba(50,63,81,.53)); }html[data-theme="dark"] .school-sports-court { border-color: rgba(223,234,224,.3); }
html[data-theme="dark"] .school-seating { background: linear-gradient(180deg, #9a6f65 0 41%, #754e4d 42%); box-shadow: 9px 20px 0 -5px #4b3940, 66px 20px 0 -5px #4b3940, 0 -9px 0 -2px rgba(208,180,133,.47); }.school-hoop { border-color: rgba(122,111,95,.76); }
@media (max-height: 680px) and (orientation: landscape) { .school-building { width: clamp(132px, 37%, 218px); height: clamp(79px, 25%, 118px); }.school-roofline { bottom: calc(28% + clamp(76px, 24%, 110px)); }.school-entrance { right: calc(8% + clamp(44px, 12%, 71px)); }.school-shade-canopy { bottom: 44%; }.school-palm { opacity: .78; }.school-foreground { height: clamp(50px, 18%, 78px); }.school-bags, .school-water-bottles { transform: scale(.8); transform-origin: bottom left; } }

/* Playground: an energetic, shaded neighborhood park during its existing Brave Moment. */
.scene-playground { --park-far: #709a7b; --park-leaf: #347a59; --park-leaf-light: #76ad70; --park-play: #d8895e; --park-play-dark: #a65d50; --park-teal: #43877d; --park-path: #dfc99b; --park-wood: #895f40; --park-sun: rgba(248,211,125,.52); overflow: hidden; opacity: 1; animation: scene-settle 280ms cubic-bezier(.2, .8, .3, 1) both; }
.scene-playground::before, .scene-playground::after, .scene-birthday::before, .scene-birthday::after { display: block; pointer-events: none; }
.scene-playground::before { z-index: 0; inset: 0; background: radial-gradient(ellipse at 76% 5%, var(--park-sun), transparent 22%), linear-gradient(180deg, rgba(255,255,255,.1), transparent 45%, rgba(45,100,69,.08)); }.scene-playground::after { z-index: 1; right: -6%; bottom: 21%; left: -6%; height: 5%; opacity: .45; background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(97,138,89,.22) 21px 33px, transparent 34px 45px); }.scene-playground > span, .scene-birthday > span { position: absolute; display: block; pointer-events: none; }
.playground-skyline { z-index: 0; right: -7%; bottom: 39%; left: -7%; height: 30%; opacity: .76; background: linear-gradient(180deg, transparent 0 40%, rgba(228,212,178,.4) 41% 66%, transparent 67%), radial-gradient(ellipse at 7% 100%, #88af85 0 30px, transparent 31px), radial-gradient(ellipse at 25% 100%, #6e9877 0 42px, transparent 43px), radial-gradient(ellipse at 54% 100%, #7ba981 0 35px, transparent 36px), radial-gradient(ellipse at 79% 100%, #649171 0 44px, transparent 45px), radial-gradient(ellipse at 96% 100%, #7ba47b 0 34px, transparent 35px); }.playground-far-garden { z-index: 1; right: -7%; bottom: 24%; left: -7%; height: 29%; opacity: .84; background: radial-gradient(ellipse at 6% 100%, var(--park-far) 0 34px, transparent 35px), radial-gradient(ellipse at 24% 100%, #6d9b78 0 46px, transparent 47px), radial-gradient(ellipse at 46% 100%, #7bab81 0 34px, transparent 35px), radial-gradient(ellipse at 69% 100%, #5f8d70 0 49px, transparent 50px), radial-gradient(ellipse at 91% 100%, #76a077 0 41px, transparent 42px); }
.playground-shade-tree { z-index: 2; right: -2%; bottom: 26%; width: clamp(88px, 19%, 145px); height: 47%; background: linear-gradient(90deg, transparent 43%, #75583e 44% 56%, transparent 57%); filter: drop-shadow(-4px 7px 0 rgba(49,83,57,.12)); }.playground-shade-tree::before { position: absolute; top: 0; left: -18%; width: 137%; height: 69%; content: ""; border-radius: 51% 49% 47% 53%; background: radial-gradient(ellipse at 31% 67%, var(--park-leaf-light) 0 20%, transparent 21%), radial-gradient(ellipse at 65% 72%, #4f9369 0 27%, transparent 28%), radial-gradient(ellipse at 54% 30%, #579b68 0 35%, transparent 36%), radial-gradient(ellipse at 17% 37%, #79a96e 0 27%, transparent 28%); box-shadow: inset -12px -8px 0 rgba(37,103,65,.13); }
.playground-play-tower { z-index: 4; left: 8%; bottom: 27%; width: clamp(88px, 22%, 148px); height: clamp(94px, 27%, 148px); border: 5px solid rgba(255,246,219,.7); border-bottom: 0; border-radius: 25px 25px 7px 7px; background: linear-gradient(90deg, rgba(255,237,183,.42) 0 24%, transparent 25% 74%, rgba(255,237,183,.42) 75%), linear-gradient(180deg, #e7aa73, var(--park-play)); box-shadow: inset 0 9px 0 rgba(255,245,215,.28), 0 10px 0 -3px var(--park-play-dark), 0 18px 0 -8px rgba(92,133,89,.35); }.playground-play-tower::before { position: absolute; top: -17px; left: 13%; width: 74%; height: 20px; content: ""; border-radius: 15px 15px 3px 3px; background: #4c8a7d; box-shadow: 0 4px 0 rgba(42,105,96,.24); }.playground-play-tower::after { position: absolute; right: 13%; bottom: 0; width: 28%; height: 49%; content: ""; border: 4px solid #4a867b; border-bottom: 0; border-radius: 20px 20px 0 0; background: rgba(47,103,94,.35); }
.playground-slide { z-index: 5; left: calc(8% + clamp(66px, 17%, 113px)); bottom: 24%; width: clamp(70px, 17%, 114px); height: 56px; border-bottom: 9px solid #e4ba61; border-radius: 0 0 50% 40%; box-shadow: 0 5px 0 rgba(145,111,65,.2); transform: skewX(-21deg) rotate(-9deg); }.playground-slide::after { position: absolute; right: 1px; bottom: -20px; width: 5px; height: 28px; content: ""; background: #997255; box-shadow: -46px 0 #997255; transform: skewX(21deg) rotate(9deg); }
.playground-swings { z-index: 4; right: 27%; bottom: 31%; width: clamp(80px, 19%, 136px); height: clamp(68px, 18%, 100px); border: 6px solid rgba(112,88,60,.68); border-bottom: 0; border-radius: 6px 6px 0 0; }.playground-swings::before { position: absolute; top: 12px; left: 26%; width: 2px; height: 53%; content: ""; background: rgba(105,83,63,.65); box-shadow: 25px 0 rgba(105,83,63,.65); }.playground-swings::after { position: absolute; bottom: 8px; left: 17%; width: 25px; height: 6px; content: ""; border-radius: 5px; background: #d88a76; box-shadow: 34px 0 #5e9991; }
.playground-canopy { z-index: 5; left: 34%; bottom: 43%; width: clamp(105px, 25%, 178px); height: 12%; border-top: 8px solid rgba(120,86,56,.73); border-radius: 3px; background: repeating-linear-gradient(105deg, transparent 0 13px, rgba(111,78,51,.36) 14px 18px, transparent 19px 32px); box-shadow: 11px 39px 0 -6px rgba(95,71,51,.63), 87px 39px 0 -6px rgba(95,71,51,.63), 0 48px 0 -8px rgba(76,124,83,.28); transform: skewX(-8deg); }
.playground-path { z-index: 1; bottom: -7%; left: 23%; width: 51%; height: 55%; opacity: .84; background: linear-gradient(90deg, rgba(255,241,205,.18), var(--park-path) 21% 78%, rgba(180,143,101,.42)); clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); box-shadow: inset 0 2px rgba(255,250,226,.62); }.playground-path::after { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(165deg, transparent 0 15px, rgba(145,111,76,.2) 16px 18px, transparent 19px 33px); }.playground-path-stones { z-index: 2; bottom: 10%; left: 40%; width: 21%; height: 17%; opacity: .43; background: radial-gradient(ellipse at 12% 75%, rgba(128,100,74,.48) 0 7px, transparent 8px), radial-gradient(ellipse at 74% 80%, rgba(128,100,74,.42) 0 8px, transparent 9px), radial-gradient(ellipse at 47% 32%, rgba(128,100,74,.38) 0 5px, transparent 6px); }
.playground-seating { z-index: 6; right: 14%; bottom: 27%; width: clamp(62px, 14%, 95px); height: clamp(27px, 7%, 38px); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #bd8067 0 41%, #98604e 42%); box-shadow: 9px 20px 0 -5px #70483b, 63px 20px 0 -5px #70483b, 0 -9px 0 -2px rgba(247,221,169,.85); }.playground-court { z-index: 2; right: -2%; bottom: 12%; width: 30%; height: 23%; border: 3px solid rgba(235,221,178,.57); border-radius: 17px 0 0 0; opacity: .62; background: linear-gradient(90deg, transparent 49%, rgba(235,221,178,.62) 50% 52%, transparent 53%), linear-gradient(180deg, transparent 48%, rgba(235,221,178,.56) 49% 52%, transparent 53%), rgba(73,139,126,.22); }.playground-hoop { z-index: 4; right: 6%; bottom: 27%; width: 47px; height: 68px; border-right: 4px solid rgba(102,88,69,.7); }.playground-hoop::before { position: absolute; top: 0; right: -7px; width: 26px; height: 19px; content: ""; border: 3px solid rgba(242,238,217,.84); border-radius: 3px; background: rgba(93,149,139,.25); }.playground-hoop::after { position: absolute; top: 22px; right: -14px; width: 22px; height: 10px; content: ""; border: 3px solid #c76e59; border-top: 0; border-radius: 0 0 14px 14px; }.playground-ball { z-index: 5; right: 24%; bottom: 18%; width: 17px; height: 17px; border: 2px solid rgba(255,244,220,.62); border-radius: 50%; background: radial-gradient(circle at 33% 31%, #fff6df 0 10%, transparent 11%), #d98655; box-shadow: 0 3px 0 rgba(102,75,57,.25); }.playground-garden-bed { z-index: 3; left: -2%; bottom: 18%; width: 36%; height: 18%; border-radius: 0 56% 0 0; background: radial-gradient(ellipse at 17% 50%, #d58a9e 0 5px, transparent 6px), radial-gradient(ellipse at 39% 26%, #efbd69 0 5px, transparent 6px), radial-gradient(ellipse at 61% 58%, #d58a9e 0 6px, transparent 7px), radial-gradient(ellipse at 82% 33%, #efbd69 0 5px, transparent 6px), radial-gradient(ellipse at 14% 100%, var(--park-leaf) 0 28%, transparent 29%), radial-gradient(ellipse at 49% 100%, var(--park-leaf-light) 0 32%, transparent 33%), radial-gradient(ellipse at 83% 100%, #4b9368 0 30%, transparent 31px); opacity: .84; }.playground-foreground { z-index: 7; bottom: -3%; width: clamp(72px, 19%, 138px); height: clamp(78px, 24%, 124px); opacity: .82; background: radial-gradient(ellipse at 14% 100%, var(--park-leaf) 0 32%, transparent 33%), radial-gradient(ellipse at 43% 87%, var(--park-leaf-light) 0 28%, transparent 29%), radial-gradient(ellipse at 75% 100%, #4c906a 0 35%, transparent 36%); }.playground-foreground-left { left: -2%; transform: scaleX(-1); }.playground-foreground-right { right: -2%; }
html[data-theme="dark"] .scene-playground { --park-far: #426b65; --park-leaf: #2d5f56; --park-leaf-light: #4e856f; --park-play: #8c6860; --park-play-dark: #5d4a4b; --park-teal: #69a99c; --park-path: #626f7e; --park-sun: rgba(241,207,127,.27); }.scene-playground { --park-wood: #70574a; }html[data-theme="dark"] .playground-skyline, html[data-theme="dark"] .playground-far-garden { opacity: .63; filter: saturate(.78) brightness(.84); }html[data-theme="dark"] .playground-shade-tree { filter: saturate(.77) brightness(.76); }html[data-theme="dark"] .playground-play-tower { border-color: rgba(221,232,225,.28); background: linear-gradient(90deg, rgba(242,196,112,.2) 0 24%, transparent 25% 74%, rgba(242,196,112,.2) 75%), linear-gradient(180deg, #9a7469, var(--park-play)); box-shadow: inset 0 9px 0 rgba(237,244,239,.08), 0 10px 0 -3px var(--park-play-dark), 0 18px 0 -8px rgba(24,51,61,.52); }html[data-theme="dark"] .playground-path { opacity: .62; background: linear-gradient(90deg, rgba(181,203,198,.08), var(--park-path) 22% 77%, rgba(50,63,81,.53)); }html[data-theme="dark"] .playground-canopy { border-color: rgba(131,102,77,.78); background: repeating-linear-gradient(105deg, transparent 0 13px, rgba(157,128,97,.27) 14px 18px, transparent 19px 32px); box-shadow: 11px 39px 0 -6px rgba(76,62,59,.74), 87px 39px 0 -6px rgba(76,62,59,.74), 0 48px 0 -8px rgba(41,89,72,.32); }html[data-theme="dark"] .playground-seating { background: linear-gradient(180deg, #9a6f65 0 41%, #754e4d 42%); box-shadow: 9px 20px 0 -5px #4b3940, 63px 20px 0 -5px #4b3940, 0 -9px 0 -2px rgba(208,180,133,.47); }

/* Birthday: a warm family garden celebration during its existing Brave Moment. */
.scene-birthday { --party-far: #73997d; --party-leaf: #357a5a; --party-leaf-light: #72aa70; --party-wall: #e7c795; --party-wall-shadow: #b88d68; --party-teal: #43817a; --party-path: #e4cda2; --party-warmth: rgba(249,207,125,.54); overflow: hidden; opacity: 1; animation: scene-settle 280ms cubic-bezier(.2, .8, .3, 1) both; }.scene-birthday::before { z-index: 0; inset: 0; background: radial-gradient(ellipse at 74% 5%, var(--party-warmth), transparent 22%), linear-gradient(180deg, rgba(255,255,255,.1), transparent 44%, rgba(58,101,70,.08)); }.scene-birthday::after { z-index: 1; right: -6%; bottom: 21%; left: -6%; height: 5%; opacity: .45; background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(97,138,89,.22) 21px 33px, transparent 34px 45px); }.birthday-skyline { z-index: 0; right: -7%; bottom: 38%; left: -7%; height: 31%; opacity: .76; background: linear-gradient(180deg, transparent 0 38%, rgba(229,210,175,.43) 39% 67%, transparent 68%), radial-gradient(ellipse at 7% 100%, #87ad86 0 30px, transparent 31px), radial-gradient(ellipse at 27% 100%, #6e9878 0 42px, transparent 43px), radial-gradient(ellipse at 55% 100%, #7baa81 0 34px, transparent 35px), radial-gradient(ellipse at 79% 100%, #638f70 0 46px, transparent 47px), radial-gradient(ellipse at 96% 100%, #7aa27a 0 35px, transparent 36px); }.birthday-far-garden { z-index: 1; right: -7%; bottom: 24%; left: -7%; height: 29%; opacity: .83; background: radial-gradient(ellipse at 6% 100%, var(--party-far) 0 34px, transparent 35px), radial-gradient(ellipse at 24% 100%, #6d9b78 0 46px, transparent 47px), radial-gradient(ellipse at 46% 100%, #7bab81 0 34px, transparent 35px), radial-gradient(ellipse at 69% 100%, #5f8d70 0 49px, transparent 50px), radial-gradient(ellipse at 91% 100%, #76a077 0 41px, transparent 42px); }.birthday-home-facade { z-index: 3; bottom: 27%; left: 8%; width: clamp(149px, 36%, 228px); height: clamp(99px, 28%, 146px); border: 5px solid rgba(255,246,218,.7); border-bottom: 0; border-radius: 70px 70px 9px 9px; background: linear-gradient(90deg, transparent 0 16%, rgba(72,133,120,.3) 16% 21%, transparent 21% 48%, rgba(72,133,120,.22) 48% 53%, transparent 53% 78%, rgba(72,133,120,.3) 78% 83%, transparent 83%), linear-gradient(180deg, #f3d9aa, var(--party-wall)); box-shadow: inset 0 10px 0 rgba(255,251,228,.29), inset -8px 0 0 rgba(173,123,84,.08), 0 9px 0 -3px var(--party-wall-shadow), 0 17px 0 -8px rgba(93,132,93,.38); }.birthday-roofline { z-index: 4; bottom: calc(27% + clamp(93px, 26%, 137px)); left: 6%; width: clamp(173px, 41%, 253px); height: 14px; border-radius: 13px 15px 2px 2px; background: linear-gradient(180deg, #d99e68, #b87551); box-shadow: 0 4px 0 rgba(131,89,62,.23), 14px 10px 0 -7px rgba(245,214,161,.7); transform: skewX(-7deg); }.birthday-patio-arch { z-index: 5; bottom: 27%; left: calc(8% + clamp(49px, 12%, 79px)); width: clamp(52px, 13%, 77px); height: clamp(67px, 19%, 101px); border: 5px solid var(--party-teal); border-bottom: 0; border-radius: 43px 43px 0 0; background: linear-gradient(180deg, rgba(56,100,89,.18), rgba(52,104,92,.56)); box-shadow: inset 4px 0 0 rgba(255,250,226,.18), inset -4px 0 0 rgba(23,72,64,.1); }.birthday-bunting { z-index: 6; top: 16%; right: 10%; left: 11%; height: 44px; background: linear-gradient(168deg, transparent 46%, rgba(111,80,59,.42) 47% 49%, transparent 50%) 0 0 / 36px 44px; }.birthday-bunting::before { position: absolute; top: 14px; left: 0; width: 100%; height: 22px; content: ""; background: repeating-linear-gradient(90deg, transparent 0 7px, #d9899b 8px 18px, transparent 19px 26px, #f2bf69 27px 38px, transparent 39px 46px, #67a494 47px 58px, transparent 59px 66px); clip-path: polygon(0 0, 100% 0, 93% 62%, 86% 100%, 79% 62%, 72% 100%, 65% 62%, 58% 100%, 51% 62%, 44% 100%, 37% 62%, 30% 100%, 23% 62%, 16% 100%, 9% 62%); }.birthday-lights { z-index: 7; top: 19%; right: 15%; width: 70%; height: 11px; background: radial-gradient(circle at 4% 50%, #ffe89b 0 3px, transparent 4px), radial-gradient(circle at 18% 50%, #ffe89b 0 3px, transparent 4px), radial-gradient(circle at 32% 50%, #ffe89b 0 3px, transparent 4px), radial-gradient(circle at 46% 50%, #ffe89b 0 3px, transparent 4px), radial-gradient(circle at 60% 50%, #ffe89b 0 3px, transparent 4px), radial-gradient(circle at 74% 50%, #ffe89b 0 3px, transparent 4px), radial-gradient(circle at 88% 50%, #ffe89b 0 3px, transparent 4px); filter: drop-shadow(0 0 5px rgba(255,223,137,.52)); }.birthday-path { z-index: 1; bottom: -7%; left: 22%; width: 51%; height: 54%; opacity: .84; background: linear-gradient(90deg, rgba(255,241,205,.18), var(--party-path) 21% 78%, rgba(194,154,111,.42)); clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); box-shadow: inset 0 2px rgba(255,250,226,.64); }.birthday-path::after { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(165deg, transparent 0 15px, rgba(157,119,83,.2) 16px 18px, transparent 19px 33px); }.birthday-table { z-index: 6; right: 11%; bottom: 27%; width: clamp(85px, 19%, 126px); height: clamp(28px, 7%, 40px); border-radius: 12px 12px 5px 5px; background: linear-gradient(180deg, #fff3da 0 27%, #e8b889 28% 55%, #ba765f 56%); box-shadow: 12px 25px 0 -7px #754d40, 75px 25px 0 -7px #754d40, 0 -10px 0 -4px rgba(255,250,226,.74); }.birthday-cake { z-index: 7; right: 17%; bottom: 34%; width: 34px; height: 25px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #fff0cf 0 30%, #db8da0 31% 58%, #f1c46c 59%); box-shadow: 0 -10px 0 -7px #f1c46c, 0 -13px 0 -10px #d98291; }.birthday-balloons { z-index: 6; right: 3%; bottom: 37%; width: 55px; height: 84px; background: radial-gradient(ellipse at 18% 22%, #d9889b 0 13px, transparent 14px), radial-gradient(ellipse at 51% 13%, #f1c16d 0 14px, transparent 15px), radial-gradient(ellipse at 83% 28%, #61a493 0 12px, transparent 13px); }.birthday-balloons::after { position: absolute; top: 30px; left: 18px; width: 31px; height: 47px; content: ""; border-left: 1px solid rgba(105,83,66,.55); border-right: 1px solid rgba(105,83,66,.55); transform: rotate(8deg); }.birthday-seating { z-index: 5; left: 13%; bottom: 27%; width: clamp(65px, 15%, 98px); height: clamp(27px, 7%, 38px); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #bd8067 0 41%, #98604e 42%); box-shadow: 9px 20px 0 -5px #70483b, 66px 20px 0 -5px #70483b, 0 -9px 0 -2px rgba(247,221,169,.85); }.birthday-garden-bed { z-index: 3; right: -2%; bottom: 17%; width: 37%; height: 18%; border-radius: 56% 0 0 0; background: radial-gradient(ellipse at 15% 53%, #d88a9e 0 5px, transparent 6px), radial-gradient(ellipse at 34% 27%, #f1bf67 0 5px, transparent 6px), radial-gradient(ellipse at 57% 58%, #d88a9e 0 6px, transparent 7px), radial-gradient(ellipse at 79% 35%, #f1bf67 0 5px, transparent 6px), radial-gradient(ellipse at 13% 100%, var(--party-leaf) 0 28%, transparent 29%), radial-gradient(ellipse at 47% 100%, var(--party-leaf-light) 0 32%, transparent 33%), radial-gradient(ellipse at 81% 100%, #4b9368 0 30%, transparent 31px); opacity: .84; }.birthday-lantern { z-index: 7; left: 30%; bottom: 35%; width: 8px; height: 28px; border-radius: 4px; background: #86604a; }.birthday-lantern::before { position: absolute; top: -10px; left: -7px; width: 22px; height: 12px; content: ""; border-radius: 11px 11px 4px 4px; background: #f4d584; box-shadow: 0 0 14px rgba(244,213,132,.57); }.birthday-foreground { z-index: 7; bottom: -3%; width: clamp(72px, 19%, 138px); height: clamp(78px, 24%, 124px); opacity: .82; background: radial-gradient(ellipse at 14% 100%, var(--party-leaf) 0 32%, transparent 33%), radial-gradient(ellipse at 43% 87%, var(--party-leaf-light) 0 28%, transparent 29%), radial-gradient(ellipse at 75% 100%, #4c906a 0 35%, transparent 36%); }.birthday-foreground-left { left: -2%; transform: scaleX(-1); }.birthday-foreground-right { right: -2%; }
html[data-theme="dark"] .scene-birthday { --party-far: #426a65; --party-leaf: #2d5f56; --party-leaf-light: #4e856f; --party-wall: #75808b; --party-wall-shadow: #4d5967; --party-teal: #69a99c; --party-path: #626f7e; --party-warmth: rgba(241,207,127,.27); }html[data-theme="dark"] .birthday-skyline, html[data-theme="dark"] .birthday-far-garden { opacity: .63; filter: saturate(.78) brightness(.84); }html[data-theme="dark"] .birthday-home-facade { border-color: rgba(221,232,225,.28); background: linear-gradient(90deg, transparent 0 16%, rgba(111,168,154,.22) 16% 21%, transparent 21% 48%, rgba(111,168,154,.17) 48% 53%, transparent 53% 78%, rgba(111,168,154,.22) 78% 83%, transparent 83%), linear-gradient(180deg, #858d98, var(--party-wall)); box-shadow: inset 0 10px 0 rgba(237,244,239,.08), inset -8px 0 rgba(18,44,51,.12), 0 9px 0 -3px var(--party-wall-shadow), 0 17px 0 -8px rgba(24,51,61,.52); }html[data-theme="dark"] .birthday-roofline { background: linear-gradient(180deg, #946c5d, #684d49); box-shadow: 0 4px 0 rgba(31,41,51,.38), 14px 10px 0 -7px rgba(174,146,111,.28); }html[data-theme="dark"] .birthday-patio-arch { background: linear-gradient(180deg, rgba(16,33,45,.18), rgba(40,78,74,.58)); box-shadow: inset 4px 0 rgba(224,246,238,.08), inset -4px 0 rgba(7,28,38,.2); }html[data-theme="dark"] .birthday-path { opacity: .62; background: linear-gradient(90deg, rgba(181,203,198,.08), var(--party-path) 22% 77%, rgba(50,63,81,.53)); }html[data-theme="dark"] .birthday-seating { background: linear-gradient(180deg, #9a6f65 0 41%, #754e4d 42%); box-shadow: 9px 20px 0 -5px #4b3940, 66px 20px 0 -5px #4b3940, 0 -9px 0 -2px rgba(208,180,133,.47); }html[data-theme="dark"] .birthday-lights, html[data-theme="dark"] .birthday-lantern::before { filter: drop-shadow(0 0 6px rgba(248,217,132,.56)); }
@media (max-height: 680px) and (orientation: landscape) { .playground-play-tower { width: clamp(72px, 20%, 112px); height: clamp(72px, 23%, 111px); }.playground-swings { opacity: .82; }.playground-canopy { bottom: 45%; }.playground-foreground, .birthday-foreground { height: clamp(50px, 18%, 78px); }.birthday-home-facade { width: clamp(116px, 31%, 178px); height: clamp(74px, 23%, 100px); }.birthday-roofline { bottom: calc(27% + clamp(69px, 21%, 92px)); }.birthday-patio-arch { left: calc(8% + clamp(38px, 10%, 59px)); }.birthday-balloons { transform: scale(.78); transform-origin: bottom right; }.birthday-bunting { top: 10%; }.birthday-table { transform: scale(.85); transform-origin: bottom right; } }

@media (max-height: 680px) and (orientation: landscape) {
  .welcome-settings { grid-column: 2; grid-row: 1 / span 2; justify-self: end; justify-content: end; margin: 0; }
  html[dir="rtl"] .welcome-settings { justify-self: start; justify-content: start; }
}
@media (max-width: 420px) {
  .language-switch-game, .appearance-switch-game { flex: 1 1 100%; justify-content: center; }
  html[dir="rtl"] .game-controls { flex-direction: column; }
  html[dir="rtl"] .game-control-buttons { flex-direction: row-reverse; }
}

/* A calm CSS-only atmosphere shared by the welcome and game screens. */
body {
  background:
    radial-gradient(ellipse at 80% 4%, rgba(255, 246, 194, .72), transparent 24%),
    radial-gradient(ellipse at 12% 92%, rgba(175, 214, 169, .36), transparent 29%),
    var(--page-background);
}
.sky-decorations::before, .sky-decorations::after { position: absolute; content: ""; pointer-events: none; }
.sky-decorations::before {
  inset: 5% -10% auto;
  height: 190px;
  opacity: .62;
  background:
    radial-gradient(ellipse at 8% 44%, rgba(255,255,250,.66) 0 14%, transparent 15%),
    radial-gradient(ellipse at 25% 30%, rgba(255,255,252,.52) 0 16%, transparent 17%),
    radial-gradient(ellipse at 58% 48%, rgba(255,255,252,.48) 0 15%, transparent 16%),
    radial-gradient(ellipse at 86% 24%, rgba(255,255,252,.64) 0 17%, transparent 18%);
  filter: blur(1px);
}
.sky-decorations::after {
  right: -9%; bottom: -18px; left: -9%;
  height: 118px;
  opacity: .46;
  background:
    radial-gradient(ellipse at 8% 100%, rgba(75,137,96,.54) 0 23%, transparent 24%),
    radial-gradient(ellipse at 27% 100%, rgba(98,160,105,.48) 0 27%, transparent 28%),
    radial-gradient(ellipse at 53% 100%, rgba(79,143,96,.44) 0 25%, transparent 26%),
    radial-gradient(ellipse at 80% 100%, rgba(101,163,107,.5) 0 29%, transparent 30%);
}
.cloud { background: linear-gradient(180deg, rgba(255,255,253,.82), rgba(237,249,247,.38)); box-shadow: 0 8px 18px rgba(90,139,144,.08), inset 0 1px 0 rgba(255,255,255,.66); }
.sparkle { background: rgba(255,255,255,.88); box-shadow: 0 0 10px rgba(255,255,255,.4); }
.hero-showcase {
  background:
    radial-gradient(ellipse at 73% 16%, rgba(255,249,203,.72), transparent 20%),
    linear-gradient(180deg, #bee6ef 0%, #dcefe2 48%, #9fc98d 49%, #709c69 100%);
  box-shadow: 0 18px 36px rgba(43,79,67,.18), inset 0 1px 0 rgba(255,255,255,.86), inset 0 -16px 28px rgba(62,117,78,.08);
}
.hero-showcase::before { box-shadow: 0 0 0 12px rgba(255,244,190,.16), 0 0 34px rgba(255,220,125,.22); }
.showcase-skyline { background: radial-gradient(ellipse at 7% 100%, #70a482 0 26px, transparent 27px), radial-gradient(ellipse at 25% 100%, #84b488 0 32px, transparent 33px), radial-gradient(ellipse at 62% 100%, #669877 0 32px, transparent 33px), radial-gradient(ellipse at 86% 100%, #79a57e 0 38px, transparent 39px); }
.showcase-foreground { background: radial-gradient(ellipse at 14% 100%, #377e5a 0 33%, transparent 34%), radial-gradient(ellipse at 48% 86%, #6fb16e 0 28%, transparent 29%), radial-gradient(ellipse at 85% 100%, #4e9a69 0 34%, transparent 35%), radial-gradient(circle at 65% 38%, #eaa2ae 0 3px, transparent 4px), radial-gradient(circle at 38% 48%, #f0c66c 0 3px, transparent 4px); }

/* Decorative sun and moon cues leave the existing localised labels and ARIA state intact. */
.appearance-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.appearance-button::before { display: inline-block; flex: 0 0 11px; width: 11px; height: 11px; content: ""; border-radius: 50%; background: #f1bd50; box-shadow: 0 0 0 2px rgba(241,189,80,.19), 0 0 8px rgba(241,189,80,.38); }
.appearance-button[data-appearance="dark"]::before { background: #e9edf7; box-shadow: -3px 2px 0 #7184ad, 0 0 8px rgba(231,238,255,.4); }
.appearance-button[data-appearance="system"]::before { background: #f1bd50; box-shadow: 0 0 0 2px rgba(241,189,80,.19), 0 0 8px rgba(241,189,80,.38); }
html[data-appearance="system"][data-theme="dark"] .appearance-button[data-appearance="system"]::before { background: #e9edf7; box-shadow: -3px 2px 0 #7184ad, 0 0 8px rgba(231,238,255,.4); }
html[dir="rtl"] .appearance-button { flex-direction: row-reverse; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: appearance-fade-away 330ms ease-out both; }
  ::view-transition-new(root) { animation: appearance-daylight-in 390ms ease-in both; }
  html[data-theme="dark"]::view-transition-new(root) { animation-name: appearance-moonlight-in; }
  @keyframes appearance-fade-away { to { opacity: 0; } }
  @keyframes appearance-daylight-in { from { opacity: 0; filter: brightness(1.08) saturate(.92); } to { opacity: 1; filter: brightness(1) saturate(1); } }
  @keyframes appearance-moonlight-in { from { opacity: 0; filter: brightness(.78) saturate(.88); } to { opacity: 1; filter: brightness(1) saturate(1); } }
}

/* The night remains restful: static stars, moonlight, distant haze, and warm focal glows. */
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 78% 8%, rgba(255,244,196,.24) 0 3%, transparent 4%),
    radial-gradient(ellipse at 76% 8%, rgba(226,235,255,.16), transparent 20%),
    radial-gradient(ellipse at 13% 20%, rgba(139,173,255,.13), transparent 28%),
    var(--page-background);
}
html[data-theme="dark"] .sky-decorations::before {
  inset: 0;
  height: auto;
  opacity: .95;
  filter: none;
  background:
    radial-gradient(circle at 8% 13%, rgba(245,249,255,.88) 0 1px, transparent 1.8px), radial-gradient(circle at 18% 33%, rgba(245,249,255,.68) 0 1px, transparent 1.7px), radial-gradient(circle at 31% 9%, rgba(255,238,179,.77) 0 1.2px, transparent 2px), radial-gradient(circle at 43% 27%, rgba(245,249,255,.72) 0 1px, transparent 1.8px), radial-gradient(circle at 57% 16%, rgba(245,249,255,.88) 0 1.1px, transparent 1.9px), radial-gradient(circle at 68% 39%, rgba(245,249,255,.62) 0 1px, transparent 1.7px), radial-gradient(circle at 89% 27%, rgba(255,238,179,.73) 0 1px, transparent 1.8px), radial-gradient(circle at 91% 55%, rgba(245,249,255,.64) 0 1px, transparent 1.7px);
}
html[data-theme="dark"] .sky-decorations::after {
  bottom: -18px;
  opacity: .44;
  background:
    radial-gradient(ellipse at 8% 100%, rgba(29,76,75,.72) 0 23%, transparent 24%), radial-gradient(ellipse at 27% 100%, rgba(43,90,84,.62) 0 27%, transparent 28%), radial-gradient(ellipse at 53% 100%, rgba(31,78,79,.68) 0 25%, transparent 26%), radial-gradient(ellipse at 80% 100%, rgba(42,89,84,.62) 0 29%, transparent 30%);
}
html[data-theme="dark"] .cloud { background: linear-gradient(180deg, rgba(112,137,181,.24), rgba(30,52,91,.15)); box-shadow: 0 8px 18px rgba(2,8,28,.25); }
html[data-theme="dark"] .sparkle { background: rgba(240,246,255,.88); box-shadow: 0 0 10px rgba(205,224,255,.5); }
html[data-theme="dark"] .hero-showcase { background: radial-gradient(circle at 72% 16%, rgba(246,239,196,.48) 0 7%, rgba(220,228,255,.18) 43%, transparent 65%), linear-gradient(180deg, #203b70 0%, #355675 49%, #31595c 50%, #223f54 100%); box-shadow: 0 18px 38px rgba(2,7,25,.48), inset 0 1px 0 rgba(236,244,255,.16), inset 0 -18px 30px rgba(4,13,35,.24); }
html[data-theme="dark"] .hero-showcase::before { background: radial-gradient(circle at 38% 35%, #fffde8 0 7%, #e8dcab 45%, rgba(226,233,255,.08) 71%); box-shadow: 0 0 0 12px rgba(226,233,255,.08), 0 0 34px rgba(226,233,255,.16); }
html[data-theme="dark"] .showcase-star { box-shadow: 0 0 0 6px rgba(239,201,104,.16), 0 0 22px rgba(239,201,104,.6); }
html[data-theme="dark"] .collectible::before { filter: drop-shadow(0 0 11px rgba(246,203,101,.66)); }
html[data-theme="dark"] .magic-flower::after, html[data-theme="dark"] .home-lamp-glow, html[data-theme="dark"] .birthday-lantern::before { box-shadow: 0 0 0 3px rgba(255,231,159,.12), 0 0 17px rgba(248,213,132,.68); }
html[data-theme="dark"] .birthday-lights { filter: drop-shadow(0 0 8px rgba(248,217,132,.72)); }

@media (max-width: 420px) { .appearance-button { gap: 3px; } .appearance-button::before { flex-basis: 9px; width: 9px; height: 9px; } }
@media (max-height: 680px) and (orientation: landscape) { .appearance-button::before { flex-basis: 9px; width: 9px; height: 9px; } }