/* Pili – styles. Material vocabulary: wooden blocks, beads on a cord, a chalk slate.
   Font: Pili Sans = SIL Andika (made for beginning readers), subset and renamed per the OFL. */
@font-face { font-family: "Pili Sans"; src: url("../fonts/PiliSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pili Sans"; src: url("../fonts/PiliSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #EAF3FA; --bg2: #D9E9F5; --surface: #FFFFFF; --surface2: #F2F7FC;
  --ink: #1C2541; --ink2: #4A5578; --line: rgba(28, 37, 65, .14); --line2: rgba(28, 37, 65, .28); --shadow: rgba(28, 37, 65, .2);
  --red: #E5484D; --red-d: #B5343A; --orange: #F28C28; --yellow: #F6BE3B; --yellow-d: #C9921A;
  --green: #2FA36B; --green-d: #1E7A4E; --blue: #2F6FDE; --blue-d: #1E4FA6; --violet: #7C5CE0; --violet-d: #5A3EB4;
  --pink: #EA5F98; --pink-d: #B8406F; --wood: #B07A4F; --wood-d: #84552F;
  --slate: #24433E; --slate-frame: #A8723F;
  --ok: #2FA36B; --ok-bg: #E2F6EB; --hl: #FFD84A; --warn-bg: #FFF1D6; --warn-ink: #5B4300;
  --fr: #2F6FDE; --de: #2FA36B;
  --r-block: 14px; --r-tile: 22px; --r-stage: 28px;
  --font: "Pili Sans", "Andika", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10201D; --bg2: #17302B; --surface: #1C3833; --surface2: #23443E;
    --ink: #EEF6F2; --ink2: #A9C4BB; --line: rgba(238, 246, 242, .14); --line2: rgba(238, 246, 242, .3); --shadow: rgba(0, 0, 0, .45);
    --ok-bg: #1E4A36; --slate: #1A332F; --slate-frame: #8A5A36; --warn-bg: #4A3B12; --warn-ink: #FFE7A8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #10201D; --bg2: #17302B; --surface: #1C3833; --surface2: #23443E;
  --ink: #EEF6F2; --ink2: #A9C4BB; --line: rgba(238, 246, 242, .14); --line2: rgba(238, 246, 242, .3); --shadow: rgba(0, 0, 0, .45);
  --ok-bg: #1E4A36; --slate: #1A332F; --slate-frame: #8A5A36; --warn-bg: #4A3B12; --warn-ink: #FFE7A8;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: inherit; }
html { height: 100%; background: var(--bg); scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
body {
  height: 100%; margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.35;
  overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#app { height: 100%; display: flex; flex-direction: column; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, [role="button"]:focus-visible { outline: 4px solid var(--hl); outline-offset: 3px; }
.emo { font-family: var(--emoji); line-height: 1; font-style: normal; }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; }
.scr { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.scr[data-world="fr"] { --world: var(--fr); }
.scr[data-world="de"] { --world: var(--de); }
/* each language world has its own frame colour */
.scr.act::before, .scr.pathscr::before, .scr.menu::before { content: ""; position: absolute; inset: 0; border: 5px solid var(--world, transparent); opacity: .55; pointer-events: none; border-radius: 6px; }
.hidden-file { display: none; }

/* ---------- top bar, owl, beads ---------- */
.bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 6px; min-height: 66px; }
.ibtn { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); box-shadow: 0 4px 0 var(--shadow); display: inline-grid; place-items: center; font-size: 25px; flex: none; position: relative; }
.ibtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
.ibtn.album { width: auto; padding: 0 14px; border-radius: 26px; gap: 6px; display: inline-flex; align-items: center; font-weight: 700; font-size: 19px; }
.bar .flag { font-size: 28px; flex: none; }
.bar .beads { flex: 1; display: flex; justify-content: center; gap: 8px; }
.beads i { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line2); }
.beads i.done { background: var(--world, var(--blue)); border-color: var(--world, var(--blue)); }
.beads i.now { border-color: var(--world, var(--blue)); transform: scale(1.18); }
.home .bar .hello { flex: 1; font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.owl { display: flex; align-items: center; gap: 10px; padding: 6px 14px 12px; min-height: 66px; }
.owl-face { font-size: 38px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: 0 3px 0 var(--shadow); flex: none; cursor: pointer; }
.owl-face.talking { animation: bob .45s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-4px) rotate(4deg); } }
.bubble { margin: 0; flex: 1; background: var(--surface); border-radius: 18px 18px 18px 4px; padding: 8px 12px; font-size: 15px; color: var(--ink2); min-height: 40px; display: flex; align-items: center; overflow: hidden; max-height: 66px; }
.bubble:empty { visibility: hidden; }

/* ---------- stage and choices ---------- */
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 8px 14px; position: relative; }
.stage > .scroll { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: 100%; max-width: 640px; transition: opacity .2s; }
.choices.wait { pointer-events: none; opacity: .3; }
.choice {
  min-width: 92px; min-height: 92px; padding: 10px; border-radius: var(--r-tile);
  background: var(--surface); border: 3px solid var(--line); box-shadow: 0 6px 0 var(--shadow);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: transform .12s, opacity .2s; position: relative;
}
.choice:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--shadow); }
.choice.right { background: var(--ok-bg); border-color: var(--ok); }
.choice.right::after { content: "✓"; position: absolute; top: -12px; right: -12px; width: 34px; height: 34px; border-radius: 50%; background: var(--ok); color: #fff; font: 700 20px/34px system-ui, sans-serif; text-align: center; }
.choice.dim { opacity: .32; }
.choice.gone { visibility: hidden; }
.glow { animation: glow .9s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow: 0 6px 0 var(--shadow), 0 0 0 0 rgba(255, 216, 74, 0); } to { box-shadow: 0 6px 0 var(--shadow), 0 0 0 10px rgba(255, 216, 74, .65); } }
.wobble { animation: wobble .45s; }
@keyframes wobble { 20% { transform: translateX(-8px) rotate(-3deg); } 40% { transform: translateX(7px) rotate(3deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.pulse { animation: pulse .6s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.05); } }
.choice.hl, .iword.hl { outline: 5px solid var(--hl); outline-offset: 2px; }

.glyph { font-family: var(--font); font-weight: 700; line-height: 1; }
.choice.letter { min-width: clamp(84px, 21vw, 118px); min-height: clamp(96px, 24vw, 130px); }
.choice.letter .glyph { font-size: clamp(54px, 15vw, 86px); }
.mid { font-size: 40px; }
.big { font-size: clamp(50px, 14vw, 80px); }
.xl { font-size: clamp(72px, 21vw, 128px); }
.huge { font-size: clamp(92px, 28vw, 170px); }
.hint { opacity: 0; transition: opacity .3s; max-height: 0; }
.hint.show { opacity: 1; max-height: 140px; }

/* letters */
.cardwrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; }
.lettercard { background: var(--surface); border-radius: var(--r-stage); box-shadow: 0 8px 0 var(--shadow); padding: 14px 26px; display: inline-flex; align-items: baseline; gap: 14px; }
.lettercard .glyph { font-size: clamp(104px, 32vw, 180px); color: var(--world, var(--blue)); }
.lettercard .glyph.small { font-size: clamp(56px, 17vw, 96px); color: var(--ink2); }
.cardpic { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.word { font-weight: 700; font-size: clamp(26px, 7vw, 38px); letter-spacing: .05em; }
.word .hl { color: var(--red); }
.keyword { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.claproom, .ear { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sylls { display: flex; gap: 10px; visibility: hidden; }
.sylls.show { visibility: visible; }
/* syllable arcs (Silbenbögen) */
.syl { font-weight: 700; font-size: 26px; padding: 2px 12px 14px; border-bottom: 5px solid var(--line2); border-radius: 0 0 44px 44px; }
.syl.on { border-color: var(--world, var(--blue)); color: var(--world, var(--blue)); }
.syl.blank { color: var(--ink2); }
.claps { display: flex; gap: 8px; min-height: 16px; }
.claps i { width: 16px; height: 16px; border-radius: 50%; background: var(--yellow); }
.drum { width: 136px; height: 136px; border-radius: 50%; background: var(--surface); box-shadow: 0 8px 0 var(--shadow); display: grid; place-items: center; }
.drum.hit { animation: hit .18s; }
@keyframes hit { 50% { transform: scale(.92) translateY(4px); } }
.name-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.slot { width: 50px; height: 62px; border-radius: 12px; border: 3px dashed var(--line2); display: grid; place-items: center; font-size: 38px; font-weight: 700; }
.slot.now { border-color: var(--world, var(--blue)); border-style: solid; }
.slot.filled { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.abc { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; padding: 6px 4px 20px; width: 100%; max-width: 680px; }
.abc-k { aspect-ratio: 1; border-radius: var(--r-block); background: var(--surface); box-shadow: 0 5px 0 var(--shadow); font-size: 34px; font-weight: 700; }

/* modal sheet */
.modal { position: fixed; inset: 0; background: rgba(16, 24, 40, .5); display: grid; place-items: center; z-index: 50; padding: 16px; }
.sheet { background: var(--surface); border-radius: 26px; padding: 22px; max-width: 460px; width: 100%; max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; box-shadow: 0 10px 0 var(--shadow); }
.sheet .close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; font-size: 18px; }
.sheet-t { margin: 0; font-weight: 700; font-size: 20px; }
.lettersheet .lettercard { box-shadow: 0 6px 0 var(--shadow); background: var(--surface2); }

/* ---------- numbers ---------- */
.tray { position: relative; width: 100%; max-width: 640px; flex: 1; min-height: 210px; background: var(--surface2); border-radius: var(--r-stage); border: 3px solid var(--line); }
.obj { position: absolute; transform: translate(-50%, -50%); font-size: clamp(38px, 10vw, 56px); width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: 50%; }
.obj.counted { background: rgba(246, 190, 59, .38); }
.obj.counted::after { content: attr(data-n); position: absolute; top: -6px; right: -6px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: var(--world, var(--blue)); color: #fff; font: 700 17px/28px var(--font); }
.obj.wobble { animation: wobble2 .45s; }
@keyframes wobble2 { 25% { transform: translate(-50%, -50%) rotate(-12deg); } 75% { transform: translate(-50%, -50%) rotate(12deg); } }
.numeral { font-weight: 700; font-size: clamp(42px, 12vw, 62px); line-height: 1; }
.choice.num { min-width: 96px; }
.dotline { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 84px; }
.dotline i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink2); }
.dice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; width: 64px; aspect-ratio: 1; padding: 10%; border-radius: 16%; background: var(--surface); border: 3px solid var(--line2); }
.dice i { border-radius: 50%; }
.dice i.pip { background: var(--ink); }
.dice.big { width: clamp(130px, 36vw, 190px); }
.frame { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px; background: var(--wood); border-radius: 10px; width: 150px; }
.frame i { aspect-ratio: 1; background: var(--surface); border-radius: 6px; position: relative; }
.frame i.on::after, .frame i.add::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--red); }
.frame i.add::after { background: var(--yellow); box-shadow: inset 0 0 0 3px var(--yellow-d); }
.frame.big { width: clamp(220px, 70vw, 360px); gap: 6px; padding: 8px; }
.frame.small { width: 92px; gap: 2px; padding: 3px; }
.scatter { position: relative; width: 120px; aspect-ratio: 1; }
.scatter.big { width: clamp(170px, 50vw, 240px); }
.scatter i { position: absolute; width: calc(15% * var(--s, 1)); aspect-ratio: 1; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.scatter.big i { background: var(--blue); }
.hands { display: flex; gap: 10px; }
.hands svg { width: clamp(88px, 25vw, 128px); height: auto; }
.domino { display: flex; background: var(--surface); border: 3px solid var(--line2); border-radius: 16px; padding: 4px; }
.domino .dice { border: 0; width: clamp(80px, 24vw, 118px); }
.domino .dice + .dice { border-left: 3px solid var(--line2); border-radius: 0; }
.flashcard { min-width: clamp(210px, 62vw, 300px); min-height: clamp(200px, 50vw, 260px); display: grid; place-items: center; background: var(--surface); border-radius: var(--r-stage); box-shadow: 0 8px 0 var(--shadow); padding: 14px; }
.flashcover { opacity: .5; }
.choices.two .cmp-card { width: clamp(140px, 42vw, 220px); aspect-ratio: 1; }
.cmp-card .scatter { width: 88%; }
.cmp-n { position: absolute; bottom: 6px; right: 12px; font-size: 26px; font-weight: 700; }
.house { display: flex; flex-direction: column; align-items: center; width: clamp(240px, 78vw, 380px); }
.roof { width: 100%; aspect-ratio: 2.4; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding-bottom: 8px; color: #fff; }
.roof b { font-size: clamp(32px, 9vw, 46px); line-height: 1; }
.roof .dotline i { background: #fff; }
.rooms { width: 92%; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 4px solid var(--ink); border-top: 0; }
.room { display: grid; place-items: center; padding: 10px; min-height: 112px; gap: 6px; }
.room + .room { border-left: 4px solid var(--ink); }
.room.q .qmark { font-size: 54px; font-weight: 700; color: var(--ink2); }
.room.filled { background: var(--ok-bg); }
.objs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; font-size: 26px; max-width: 150px; }
.pile { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 520px; min-height: 60px; }
.gobj { font-size: 38px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: 0 4px 0 var(--shadow); touch-action: none; cursor: grab; position: relative; }
.gobj.dragging, .sitem.dragging { z-index: 10; box-shadow: 0 12px 20px var(--shadow); }
.basket { width: clamp(220px, 70vw, 360px); min-height: 124px; border-radius: 0 0 60px 60px; background: var(--wood); border: 4px solid var(--wood-d); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; }
.basket-ico { font-size: 30px; }
.basket-in { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.basket-in .gobj, .room .gobj { width: 46px; height: 46px; font-size: 30px; }
.check { width: 76px; height: 76px; border-radius: 50%; background: var(--green); color: #fff; font: 700 40px/1 system-ui, sans-serif; box-shadow: 0 6px 0 var(--green-d); flex: none; }
.check:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--green-d); }
.check.right { background: var(--ok); }
.teens { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* number track */
.trackwrap { width: 100%; overflow-x: auto; padding: 34px 6px 12px; }
.trackrow { display: flex; gap: 3px; width: max-content; min-width: 100%; justify-content: center; }
.track { display: flex; gap: 3px; }
.sq { width: clamp(31px, 8.3vw, 60px); height: 92px; border-radius: 10px; background: var(--surface); border: 3px solid var(--line); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px; font-weight: 700; font-size: clamp(15px, 4.4vw, 24px); }
.track .sq:nth-child(even) { background: var(--surface2); }
.track.long .sq { width: 46px; }
.sq.start { width: 34px; justify-content: center; font-size: 22px; background: var(--surface2); }
.sq.next { border-color: var(--world, var(--blue)); animation: glow .9s ease-in-out infinite alternate; }
.sq.pass { background: rgba(246, 190, 59, .3); }
.token { position: absolute; left: 50%; transform: translateX(-50%); font-size: 26px; pointer-events: none; }
.token.kid { top: -30px; }
.token.owl { top: 2px; font-size: 22px; }
.spinner { width: 108px; height: 108px; border-radius: 50%; background: var(--surface); box-shadow: 0 8px 0 var(--shadow); display: grid; place-items: center; font-size: 54px; }
.spinner .dice { width: 70px; }
.spinner.spinning { animation: spin .7s ease-out; }
@keyframes spin { to { transform: rotate(720deg); } }
.again { display: flex; justify-content: center; }

/* ---------- writing on the slate ---------- */
.stage.write { justify-content: flex-start; gap: 10px; }
.trace-head { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.glyph.mini { font-size: 40px; color: var(--world, var(--blue)); }
.lvl-dots { display: inline-flex; gap: 5px; }
.lvl-dots i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line2); }
.lvl-dots i.on { background: var(--yellow); border-color: var(--yellow-d); }
.slate-host { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.slate { background: var(--slate); border: 10px solid var(--slate-frame); border-radius: 22px; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .2), 0 8px 0 var(--shadow); touch-action: none; overflow: hidden; }
.slate canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.tools { display: flex; gap: 14px; justify-content: center; }
.tools.left { flex-direction: row-reverse; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; padding: 6px 4px 20px; width: 100%; max-width: 680px; }
.tcell { aspect-ratio: 1; border-radius: var(--r-block); background: var(--surface); box-shadow: 0 5px 0 var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 32px; }
.tcell .glyph { font-size: 34px; }
.paper { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.paper-t { font-size: 26px; font-weight: 700; margin: 0; text-align: center; }

/* ---------- shapes and picture dictionary ---------- */
svg.shape { width: clamp(68px, 19vw, 104px); height: auto; }
svg.balloon { width: clamp(60px, 17vw, 96px); height: auto; }
.seq { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: 640px; }
.seq svg.shape { width: clamp(36px, 10vw, 58px); }
.qslot { width: clamp(44px, 12vw, 64px); aspect-ratio: 1; border: 3px dashed var(--line2); border-radius: 12px; display: grid; place-items: center; font-size: 30px; font-weight: 700; }
.qslot svg.shape { width: 90%; }
.qslot.filled { border-style: solid; border-color: var(--ok); }
.boxes { display: flex; gap: 14px; justify-content: center; width: 100%; }
.sbox { flex: 1; max-width: 220px; min-height: 140px; border-radius: 18px; border: 4px dashed var(--line2); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; cursor: pointer; }
.sbox .tag svg { width: 44px; height: auto; }
.sbox .tag svg g { stroke: var(--ink2); stroke-width: 5; }
.sbox .inbox { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.sitem { touch-action: none; cursor: grab; border-radius: 12px; display: inline-block; position: relative; }
.sitem svg { width: clamp(50px, 14vw, 68px); height: auto; display: block; }
.sitem.sel { outline: 4px solid var(--hl); outline-offset: 2px; }
.sbox .sitem svg { width: 36px; }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; padding: 6px 4px 20px; width: 100%; max-width: 680px; }
.icell { aspect-ratio: 1; font-size: 42px; border-radius: var(--r-block); background: var(--surface); box-shadow: 0 5px 0 var(--shadow); }
.iword { width: 100%; padding: 14px; border-radius: 16px; background: var(--surface2); font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 10px; justify-content: center; }
.iword.fr { box-shadow: inset 0 0 0 3px var(--fr); }
.iword.de { box-shadow: inset 0 0 0 3px var(--de); }

/* ---------- splash, home, menus, path ---------- */
.splash-top { display: flex; justify-content: flex-end; padding: 12px; }
.splash-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding-bottom: 8vh; }
.big-owl { font-size: clamp(104px, 30vw, 170px); }
.wordmark { margin: 0; font-size: clamp(64px, 18vw, 108px); font-weight: 700; line-height: .9; letter-spacing: .02em; }
.wordmark span:nth-child(1) { color: var(--blue); }
.wordmark span:nth-child(2) { color: var(--red); }
.wordmark span:nth-child(3) { color: var(--yellow-d); }
.wordmark span:nth-child(4) { color: var(--green); }
.tag { margin: 0 0 14px; font-size: 20px; color: var(--ink2); display: flex; gap: 8px; align-items: center; }
.play { width: clamp(88px, 13vh, 112px); height: clamp(88px, 13vh, 112px); border-radius: 50%; background: var(--yellow); box-shadow: 0 8px 0 var(--yellow-d); font-size: clamp(40px, 6vh, 54px); display: grid; place-items: center; flex: none; }
.play:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--yellow-d); }
.play.small { width: 84px; height: 84px; font-size: 38px; }
.home .hero { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px 12px 8px; }
.path { position: relative; display: flex; justify-content: space-between; align-items: center; width: min(92vw, 520px); padding: 6px 0; }
.cord { position: absolute; left: 4%; right: 4%; top: 50%; height: 4px; margin-top: -2px; background: var(--wood); border-radius: 2px; }
.pbead { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; background: var(--surface); border: 4px solid var(--bc, var(--blue)); }
.pbead.b0 { --bc: var(--orange); } .pbead.b1 { --bc: var(--blue); } .pbead.b2 { --bc: var(--red); }
.pbead.b3 { --bc: var(--wood); } .pbead.b4 { --bc: var(--green); } .pbead.b5 { --bc: var(--yellow); }
.pbead.done { background: var(--bc); }
.pbead.now { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(255, 216, 74, .55); }
.blocks { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 6px 14px; align-content: center; max-width: 680px; width: 100%; margin: 0 auto; }
.block { border-radius: var(--r-block); background: var(--c); box-shadow: 0 7px 0 var(--cd); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px; min-height: clamp(84px, 13vh, 116px); }
.block:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--cd); }
.block .face { font-size: 36px; }
.block .face.txt { font-weight: 700; font-size: 36px; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.block .lbl { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.15; }
.c-blue { --c: var(--blue); --cd: var(--blue-d); } .c-red { --c: var(--red); --cd: var(--red-d); }
.c-wood { --c: var(--wood); --cd: var(--wood-d); } .c-violet { --c: var(--violet); --cd: var(--violet-d); }
.c-green { --c: var(--green); --cd: var(--green-d); } .c-pink { --c: var(--pink); --cd: var(--pink-d); }
.menu-title { flex: 1; display: flex; justify-content: center; }
.menu-title span { background: var(--c); color: #fff; border-radius: var(--r-block); padding: 6px 18px; font-size: 26px; font-weight: 700; box-shadow: 0 4px 0 var(--cd); }
.acts { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; padding: 10px 14px; align-content: center; max-width: 680px; width: 100%; margin: 0 auto; }
.act-btn { border-radius: var(--r-tile); background: var(--surface); box-shadow: 0 6px 0 var(--shadow); border: 4px solid var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; min-height: 116px; }
.act-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--shadow); }
.act-btn .face { font-size: 44px; }
.act-btn .lbl { font-size: 15px; font-weight: 700; color: var(--ink2); text-align: center; }
.path-big { flex: 1; display: grid; place-items: center; position: relative; }
.path-big .path { width: min(94vw, 640px); }
.path-big .pbead { width: 54px; height: 54px; font-size: 25px; }
.hopper { position: absolute; left: 0; top: 0; font-size: 46px; transform: translate(-50%, -100%); transition: left .9s cubic-bezier(.3, 1.4, .5, 1), top .9s; }

/* ---------- finale, break, album ---------- */
.finale, .breakscr { align-items: center; }
.sticker-pop { flex: 1; display: grid; place-items: center; font-size: clamp(120px, 36vw, 200px); animation: popin .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes popin { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
.mission { background: var(--surface); border-radius: 22px; padding: 16px 18px; margin: 0 14px 8px; max-width: 520px; box-shadow: 0 6px 0 var(--shadow); display: flex; flex-direction: column; gap: 8px; -webkit-user-select: text; user-select: text; }
.mission-k { margin: 0; font-size: 14px; color: var(--ink2); font-weight: 700; }
.mission-t { margin: 0; font-size: 18px; }
.btn { background: var(--ink); color: var(--bg); border-radius: 14px; padding: 12px 18px; font-weight: 700; font-size: 16px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line2); }
.btn.danger { background: var(--red); color: #fff; }
.move { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.move-t { font-size: clamp(24px, 6vw, 34px); font-weight: 700; text-align: center; margin: 0; padding: 0 16px; }
.breakscr .bar { justify-content: space-between; width: 100%; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.row-btns.left { justify-content: flex-start; }
.album-n { flex: 1; text-align: center; font-size: 24px; font-weight: 700; }
.stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; padding: 10px 14px 24px; max-width: 680px; margin: 0 auto; }
.stk { aspect-ratio: 1; background: var(--surface); border-radius: 50%; display: grid; place-items: center; font-size: 40px; position: relative; box-shadow: 0 4px 0 var(--shadow); }
.stk.locked { opacity: .3; }
.stk b { position: absolute; bottom: -2px; right: -2px; background: var(--yellow); color: #1C2541; border-radius: 12px; font-size: 13px; padding: 2px 6px; }

/* ---------- parent area ---------- */
.parent { -webkit-user-select: text; user-select: text; }
.pbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.ptitle { font-weight: 700; font-size: 18px; }
.tabs { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; flex: none; }
.tab { padding: 9px 14px; border-radius: 12px; background: var(--surface); color: var(--ink2); font-weight: 700; font-size: 15px; white-space: nowrap; }
.tab.on { background: var(--ink); color: var(--bg); }
.pbody { flex: 1; padding: 4px 14px 30px; }
.pcard { background: var(--surface); border-radius: 18px; padding: 14px 16px; margin: 0 auto 12px; max-width: 680px; }
.pcard h2 { font-size: 17px; margin: 0 0 10px; }
.pnote { color: var(--ink2); font-size: 15px; margin: 8px 0 0; }
.pnote.center { text-align: center; }
.pmission { margin: 6px 0; font-size: 15px; }
.wbars { display: flex; gap: 8px; align-items: stretch; height: 150px; }
.wcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wbox { flex: 1; width: 100%; position: relative; background: var(--surface2); border-radius: 8px; overflow: hidden; }
.wfill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--blue); border-radius: 8px 8px 0 0; }
.wfill.done { background: var(--green); }
.wcap { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--red); }
.wv, .wd { font-size: 12px; color: var(--ink2); }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 5px; margin-bottom: 4px; }
.lcell { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-weight: 700; position: relative; font-size: 16px; }
.lcell.s0, .legend i.s0 { background: var(--surface2); color: var(--ink2); }
.lcell.s1, .legend i.s1 { background: #FCE7B2; color: #5B4300; }
.lcell.s2, .legend i.s2 { background: #BFE3FF; color: #0E3A70; }
.lcell.s3, .legend i.s3 { background: #BDEBCF; color: #0F4D2C; }
.lcell::after { position: absolute; top: 1px; right: 3px; font-size: 9px; }
.lcell.s1::after { content: "◔"; } .lcell.s2::after { content: "◑"; } .lcell.s3::after { content: "●"; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--ink2); }
.legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--line2); }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kv:last-child { border-bottom: 0; }
.kv b { font-weight: 700; text-align: right; }
.thumb { width: 96px; height: 96px; border-radius: 12px; background: var(--slate); flex: none; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.field label, .flabel { font-weight: 700; font-size: 15px; margin: 8px 0 6px; }
.field input[type="text"], select { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line2); background: var(--surface2); color: var(--ink); max-width: 100%; }
input[type="range"] { flex: 1; min-width: 160px; accent-color: var(--blue); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { padding: 9px 13px; border-radius: 10px; background: var(--surface2); border: 2px solid var(--line2); font-weight: 700; font-size: 15px; }
.seg button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.radio { display: flex; flex-direction: column; gap: 6px; }
.radio button { text-align: left; padding: 10px 12px; border-radius: 10px; background: var(--surface2); border: 2px solid var(--line2); font-size: 15px; }
.radio button.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 700; }
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font-size: 15px; }
.toggle input { width: 26px; height: 26px; accent-color: var(--green); flex: none; }
.warn { background: var(--warn-bg); color: var(--warn-ink); border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 10px 0 0; }
.reclist { margin-top: 8px; }
.rec-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rec-row .rl { flex: 1; min-width: 160px; font-size: 14px; color: var(--ink2); }
.rec-row .rl b { font-size: 18px; margin-right: 8px; color: var(--ink); }
.mini { padding: 7px 10px; border-radius: 10px; background: var(--surface2); border: 2px solid var(--line2); font-size: 13px; font-weight: 700; }
.mini.recing { background: var(--red); color: #fff; border-color: var(--red); }
.sci h3 { margin: 0 0 6px; font-size: 16px; }
.sci p { margin: 0; font-size: 15px; color: var(--ink2); line-height: 1.45; }
.gate .gate-q { font-size: 28px; font-weight: 700; margin: 0; }
.gate-hint { margin: 0; color: var(--ink2); font-size: 14px; text-align: center; }
.gate-v { font-size: 30px; font-weight: 700; min-height: 40px; letter-spacing: .1em; }
.keypad { display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; }
.key { height: 56px; border-radius: 14px; background: var(--surface2); font-size: 22px; font-weight: 700; box-shadow: 0 3px 0 var(--shadow); }
.key.okk { background: var(--green); color: #fff; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 14px; font-weight: 700; z-index: 80; transition: opacity .3s; max-width: 90vw; }
.toast.out { opacity: 0; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti i { position: absolute; left: 50%; top: 62%; width: 10px; height: 14px; border-radius: 3px; animation: conf var(--d) cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes conf { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

/* small phones */
@media (max-width: 420px) { .blocks { grid-template-columns: repeat(2, 1fr); } }
@media (max-height: 680px) {
  .bar { min-height: 56px; padding-top: 6px; }
  .ibtn { width: 46px; height: 46px; font-size: 22px; }
  .owl { min-height: 54px; padding-bottom: 8px; }
  .owl-face { width: 46px; height: 46px; font-size: 30px; }
  .pbead { width: 38px; height: 38px; font-size: 17px; }
  .stage { gap: 12px; }
}
/* reduced motion: setting or system preference */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.hint { pointer-events: none; }