/* Siraj design system R13: one family (Plex, see tokens.css), warm paper, lantern-night indigo for actions, lantern gold as the
   accent, a real type scale (12/14/16/18/22/28/36), 8 px spacing, one shadow. RTL-first with logical properties. */
:root {
  --night: #2a2470; --night2: #3b2f8f; --violet: var(--brand); --gold: var(--accent); --gold2: #e9a21a; --cream: var(--surface); --card: var(--surface);
  --coral: #e8774f; --teal: #1f9e93; --r-s: 12px; --r-m: 16px; --r-l: 24px; --sh: var(--shadow); --sh-h: 0 2px 4px rgba(31, 27, 45, .06), 0 12px 32px -16px rgba(31, 27, 45, .28);
  --f-ui: var(--font); --f-d: var(--font); --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); } body { font-family: var(--font); color: var(--ink); background: var(--bg); min-height: 100vh; -webkit-tap-highlight-color: transparent; font-size: var(--fs-16); line-height: var(--lh); font-variant-numeric: tabular-nums; }
a { color: var(--brand); }
img { max-width: 100%; }
#app { max-width: 1120px; margin: 0 auto; padding: 0 var(--s2) var(--s5); position: relative; }
h1, h2, h3 { font-family: var(--font); font-weight: 700; line-height: var(--lh-h); margin: 0 0 var(--s1); color: var(--ink); }
h1 { font-size: var(--fs-28); } h2 { font-size: var(--fs-22); font-weight: 600; } h3 { font-size: var(--fs-18); font-weight: 600; }
@media (min-width: 900px) { h1 { font-size: var(--fs-36); } }
.muted { color: var(--ink-2); } .small { font-size: var(--fs-14); } .break { word-break: break-all; }
.top { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; color: var(--ink); position: relative; z-index: 2; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 48px; color: var(--ink); }
.logo img { border-radius: 12px; }
.logo b { font-size: var(--fs-22); font-weight: 700; color: var(--ink); }
.top-r { display: flex; gap: 8px; align-items: center; }
.chip { font: 600 var(--fs-14)/1 var(--font); border: 0; border-radius: var(--r-pill); padding: 0 16px; min-height: 44px; min-width: 44px; background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, color .2s; }
.top .chip { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.chip.ghost, .top .chip.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.chip.on { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent); }
.btn { font: 600 var(--fs-16)/1 var(--font); border: 0; border-radius: var(--r-btn); padding: 0 22px; min-height: 48px; cursor: pointer; background: var(--surface); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.primary { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.btn.primary:hover { background: var(--brand-hi); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.big { font-size: var(--fs-18); min-height: 56px; padding: 0 28px; width: 100%; }
.btn:focus-visible, .chip:focus-visible, .world:focus-visible, .kid:focus-visible, .step button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .row.end { justify-content: flex-end; } .row.between { justify-content: space-between; margin: 0; }
.card { background: var(--surface); border-radius: var(--r-l); padding: var(--s3) var(--s2); box-shadow: var(--sh); border: 1px solid var(--line); margin: var(--s2) 0; position: relative; }
/* hero */
.hero, .hero-mini { position: relative; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh); background: var(--night); }
.hero .keyart, .hero-mini .keyart { display: block; width: 100%; height: auto; aspect-ratio: 1088 / 608; object-fit: cover; }
.hero::after, .hero-mini::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #1b1b4d99 0%, transparent 34%, transparent 60%, #1b1b4dcc 100%); pointer-events: none; }
.hero-txt { position: absolute; inset-inline: 0; top: 0; padding: 18px 22px; color: #fff; z-index: 1; text-align: center; }
.hero-txt h1 { color: #fff; font-size: var(--fs-28); text-shadow: 0 2px 12px #0008; } .hero-txt p { margin: 0; color: #fff; font-weight: 500; font-size: var(--fs-16); text-shadow: 0 1px 8px #0009; }
.kids { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; display: flex; gap: 10px; padding: 12px 14px; overflow-x: auto; scrollbar-width: none; }
.kid { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 5px 16px 5px 6px; background: #ffffffd9; backdrop-filter: blur(6px); font: 600 var(--fs-16) var(--font); color: var(--ink); cursor: pointer; min-height: 52px; }
[dir=rtl] .kid { padding: 5px 6px 5px 16px; }
.kid img { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 50%; padding: 3px; }
.kid.on { background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.kid.add .plus { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 26px; color: var(--violet); }
/* path */
.path { background: var(--surface); }
.path.lit { background: var(--accent-soft); }
.path-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.path-lamp img { width: 46px; height: 74px; filter: grayscale(1) brightness(.85) opacity(.55); transition: filter .6s; }
.path-lamp.on img { filter: drop-shadow(0 0 14px #ffb020) drop-shadow(0 0 4px #ffd66b); animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) scale(1.03); } }
.steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.step button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: #fff; border-radius: var(--r-m); padding: 10px 12px; cursor: pointer; font-family: var(--f-ui); color: var(--ink); text-align: start; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, var(--line)); min-height: 72px; }
.step img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.st-t { display: flex; flex-direction: column; flex: 1; line-height: 1.3; } .st-t small { color: var(--ink-2); font-weight: 500; font-size: var(--fs-12); } .st-t b { font-size: var(--fs-16); font-weight: 600; }
.st-m { font-weight: 600; color: color-mix(in srgb, var(--c) 45%, #1b1b4d); font-size: 14px; white-space: nowrap; }
.step.done button { background: color-mix(in srgb, var(--c) 14%, #fff); } .step.done .st-m { font-size: 22px; }
/* lamps */
.lamps { color: var(--ink); margin: var(--s3) 4px; } .lamps-h { display: flex; justify-content: space-between; align-items: baseline; } .lamps-h small { color: var(--accent-ink); font-weight: 600; }
.lamp-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 8px; }
.lamp { display: grid; place-items: center; height: 64px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.lamp img { height: 50px; filter: grayscale(1) opacity(.35); }
.lamp.on { background: var(--accent-soft); } .lamp.on img { filter: none; }
.lamp.today { box-shadow: inset 0 0 0 2px var(--accent); }
/* worlds */
.sec { color: var(--ink); margin: var(--s4) 4px var(--s2); font-size: var(--fs-22); font-weight: 600; }
.worlds { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.world { position: relative; border: 0; padding: 0; border-radius: var(--r-l); overflow: hidden; cursor: pointer; background: var(--c); box-shadow: var(--sh); text-align: start; color: #fff; font-family: var(--font); aspect-ratio: 3 / 2; transition: transform .25s var(--ease), box-shadow .25s; }
.world:hover { transform: translateY(-3px); box-shadow: var(--sh-h); }
.w-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.world:hover .w-bg { transform: scale(1.04); }
.world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, #0007 62%, color-mix(in srgb, var(--c) 25%, #000d) 100%); } /* R5: stronger scrim under the white titles */
.w-ch { position: absolute; bottom: 8%; inset-inline-end: 4%; height: 62%; width: auto; z-index: 1; filter: drop-shadow(0 8px 12px #0006); animation: bob 3.6s ease-in-out infinite; }
.world:nth-child(2) .w-ch { animation-delay: -.9s; } .world:nth-child(3) .w-ch { animation-delay: -1.8s; } .world:nth-child(4) .w-ch { animation-delay: -2.7s; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-1deg); } }
.w-t { position: absolute; inset-inline-start: 16px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; max-width: 62%; line-height: 1.2; }
.w-t b { font-weight: 700; font-size: var(--fs-22); text-shadow: 0 1px 8px #0009; } .w-t small { font-weight: 500; text-shadow: 0 1px 6px #000a; font-size: var(--fs-12); }
.w-p { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; }
.w-go { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; background: #fff; color: var(--ink); font-weight: 600; border-radius: 999px; padding: 6px 14px; font-size: var(--fs-14); }
.ring { width: 56px; height: 56px; transform: rotate(-90deg); } .ring text { direction: ltr; transform: rotate(90deg); transform-origin: 28px 28px; font: 600 13px var(--font); fill: #fff; }
.ring .rbg { fill: #0005; stroke: #ffffff44; stroke-width: 5; } .ring .rfg { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.ws .ring .rbg { fill: #fff; stroke: #0001; } .ws .ring text { fill: var(--ink); }
.plan-line { color: var(--ink-2); text-align: center; margin: var(--s3) 8px 0; } .foot { text-align: center; color: var(--ink-2); margin-top: var(--s2); font-size: var(--fs-14); } .foot a { color: var(--brand); display: inline-flex; align-items: center; padding: 0 8px; min-height: 48px; }
/* setup / forms */
.form { margin-top: -40px; z-index: 2; } .fld { display: block; margin: 14px 0; } .fld > span { display: block; font-weight: 600; font-size: var(--fs-14); margin-bottom: 6px; color: var(--ink); }
input, textarea { font: 500 var(--fs-16) var(--font); width: 100%; border: 1px solid var(--line-2); border-radius: var(--r-in); padding: 0 14px; min-height: 48px; background: #fff; color: var(--ink); }
textarea { padding: 12px 14px; }
input:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; } .chips .chip { box-shadow: inset 0 0 0 1px var(--line-2); } .chips .chip.on { box-shadow: inset 0 0 0 2px var(--accent); }
.avs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0; }
.av { border: 0; background: #fff; border-radius: var(--r-m); padding: 8px; cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.av { min-width: 0; } .av img { width: 100%; height: 100%; object-fit: contain; } .av.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* player */
.player { position: fixed; inset: 0; z-index: 20; background: var(--night); display: flex; flex-direction: column; }
.pbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 52px; padding: 0 8px; background: linear-gradient(90deg, var(--night), color-mix(in srgb, var(--c) 45%, var(--night))); color: #fff; flex: none; }
.pb-x { display: flex; align-items: center; gap: 6px; border: 0; background: #ffffff1f; color: #fff; border-radius: 999px; padding: 4px 12px; min-height: 44px; font: 600 var(--fs-16) var(--font); cursor: pointer; }
.pb-x img { width: 28px; height: 28px; border-radius: 8px; } .pb-x b { font-weight: 700; color: #fff; font-size: var(--fs-18); }
.pb-w, .pb-k { display: flex; align-items: center; gap: 6px; font-weight: 800; white-space: nowrap; overflow: hidden; } .pb-w img, .pb-k img { width: 32px; height: 32px; object-fit: contain; }
.pwrap { position: relative; flex: 1; } .pframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.ploading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #fff; font-weight: 800; z-index: 1; transition: opacity .4s; }
.ploading img { width: 110px; animation: bob 1.4s ease-in-out infinite; } .ploading.gone { opacity: 0; pointer-events: none; }
/* parents */
.parent h1, .teacher h1 { color: var(--ink); margin-top: 6px; } .teacher > p.muted { color: var(--ink-2); }
.rep-h { display: flex; gap: 12px; align-items: center; } .rep-h img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 18px; padding: 4px; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 120px; align-items: end; margin: 16px 0 6px; }
.bars span { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bars i { display: block; width: 100%; height: max(4px, var(--h)); border-radius: 10px 10px 4px 4px; background: var(--brand); }
.bars .today i { background: var(--accent); } .bars small { font-weight: 600; font-size: 12px; color: var(--muted); }
.wstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.ws { background: #fff; border-radius: var(--r-m); padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--c) 40%, transparent); }
.ws b { font-size: 15px; line-height: 1.2; } .ws small { font-weight: 700; font-size: 13px; }
.rep-txt { white-space: pre-wrap; background: #fff; border-radius: var(--r-m); padding: 12px 14px; font: 500 var(--fs-14)/1.7 var(--font); margin: 10px 0 0; border: 1.5px dashed var(--line); }
.klist { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; } .klist li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 6px 10px; }
.klist img { width: 40px; height: 40px; object-fit: contain; } .klist b { flex: 1; } .klist small { color: var(--muted); }
.prices { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; margin: 14px 0; }
.price { border: 0; background: #fff; border-radius: var(--r-m); padding: 14px; text-align: start; cursor: pointer; font-family: var(--font); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); display: flex; flex-direction: column; gap: 2px; min-height: 84px; }
.price b { font-size: var(--fs-18); font-weight: 700; } .price small { color: var(--ink-2); font-weight: 500; font-size: var(--fs-12); } .price.best { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); }
.test { background: var(--accent-soft); border-radius: 12px; padding: 8px 12px; font-weight: 500; font-size: 14px; color: #6a4a00; }
.okline { background: var(--ok-soft); color: var(--ok); font-weight: 600; border-radius: 12px; padding: 8px 12px; }
.code { margin-top: 14px; } .code .row input { flex: 1; min-width: 180px; }
.sw { font-weight: 700; } .sw input { width: auto; }
.tbl-wrap { overflow-x: auto; margin-top: 10px; } .tbl { border-collapse: collapse; width: 100%; background: #fff; border-radius: 14px; overflow: hidden; font-size: 15px; }
.tbl th, .tbl td { padding: 8px 10px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl th { background: var(--surface-2); font-weight: 600; }
.err { color: var(--bad); font-weight: 600; font-size: var(--fs-14); min-height: 1.4em; }
#modal { position: fixed; inset: 0; z-index: 40; background: rgba(31, 27, 45, .45); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(4px); }
#modal[hidden] { display: none; } .sheet { background: var(--surface); border-radius: var(--r-l); padding: 22px; width: min(440px, 100%); box-shadow: var(--sh-h); animation: pop .3s var(--ease); }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
#toast { position: fixed; bottom: 24px; inset-inline: 0; margin: auto; width: max-content; max-width: 90vw; background: var(--ink); color: #fff; font-weight: 600; padding: 12px 20px; border-radius: 999px; z-index: 50; opacity: 0; transform: translateY(20px); pointer-events: none; }
#toast.show { animation: toast 2.6s var(--ease); } @keyframes toast { 10%, 85% { opacity: 1; transform: none; } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
[data-offline] .plan-line::after { content: ' · offline'; }
@media (max-width: 700px) {
  #app { padding: 0 12px 32px; }
  .hero .keyart { aspect-ratio: 4 / 3.4; }
  .steps { grid-template-columns: 1fr; } .worlds { grid-template-columns: 1fr; } .wstats { grid-template-columns: repeat(2, 1fr); }
  .prices { grid-template-columns: 1fr; } .logo b { font-size: 22px; } .top .chip { padding: 8px 12px; }
  .pb-k { display: none; } .lamp { height: 52px; } .lamp img { height: 40px; }
}
@media (min-width: 1000px) { .hero .keyart { max-height: 460px; } .worlds { grid-template-columns: repeat(4, 1fr); } .world { aspect-ratio: 3 / 4; } .w-ch { height: 46%; bottom: 26%; } .w-t { max-width: 88%; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }
@media print { body { background: #fff; } body::before, .top, .row, .plan, .klist, .sec, .foot, .code { display: none !important; } .card { box-shadow: none; break-inside: avoid; } .parent h1 { color: #000; } }

/* ---------- Round 5: light, lantern levels, badge shelf, reveals ---------- */
.glow-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; background: var(--surface); color: var(--ink); overflow: hidden; }
.glow-card .muted { color: var(--ink-2); margin: 6px 0 0; }
.glow-t small { color: var(--accent-ink); font-weight: 600; font-size: var(--fs-14); }
.glow-t h2 { margin: 0; font-size: var(--fs-22); line-height: var(--lh-h); }
.lantern { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.lantern img { width: 84px; height: 84px; object-fit: contain; position: relative; filter: drop-shadow(0 0 calc(2px + var(--lv, 1) * 1.2px) rgba(246, 182, 45, .7)); animation: sway 4.5s ease-in-out infinite; transform-origin: 50% 0; }
.lantern .halo { position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 102, calc(.18 + var(--lv, 1) * .05)), transparent 68%); animation: breathe 3.2s ease-in-out infinite; }
.lv-n { position: absolute; inset-block-end: -2px; inset-inline-end: -2px; min-width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; background: var(--gold); color: var(--night); font-family: var(--font); font-weight: 700; font-size: var(--fs-16); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes breathe { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } }
.lbar { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.lbar i { display: block; height: 100%; width: var(--p); border-radius: 6px; background: var(--accent); animation: grow .9s var(--ease) both; }
[dir='rtl'] .lbar i { margin-inline-start: 0; }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes grow { from { width: 0; } }
.pts { color: var(--ink); font-size: var(--fs-18); font-weight: 700; font-variant-numeric: tabular-nums; }
.today-chip { display: inline-block; background: var(--ok-soft); color: var(--ok); border-radius: 999px; padding: 0 10px; font-weight: 600; font-size: var(--fs-12); }
.shelf { background: var(--surface); color: var(--ink); }
.shelf .muted { color: var(--ink-2); }
.tiny { font-size: .85rem; margin: 10px 0 0; }
.badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 6px; margin-top: 12px; }
@media (max-width: 560px) { .badges { grid-template-columns: repeat(4, 1fr); } }
.badge { background: none; border: 0; padding: 4px 0; color: var(--ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; }
.badge small { font-size: var(--fs-12); line-height: 1.35; text-align: center; color: var(--ink); font-weight: 500; }
.medal { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--c); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 6px var(--c), 0 8px 18px rgba(0, 0, 0, .35); overflow: hidden; }
.medal img { width: 46px; height: 46px; object-fit: contain; }
.badge:not(.on) .medal { filter: grayscale(1) brightness(.55); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 0 0 3px rgba(255, 255, 255, .25), 0 0 0 6px rgba(255, 255, 255, .08); }
.badge:not(.on) small { color: var(--muted); }
.badge.on .medal::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: glint 3.6s ease-in-out infinite; }
@keyframes glint { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.lock { position: absolute; font-style: normal; font-size: 18px; filter: grayscale(0) brightness(2); }
.reveal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(12, 10, 40, .78); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s var(--ease); padding: 20px; }
.reveal.in { opacity: 1; }
.rays { position: absolute; width: 900px; height: 900px; left: 50%; top: 50%; margin: -450px 0 0 -450px; background: repeating-conic-gradient(from 0deg, rgba(255, 201, 77, .16) 0 10deg, transparent 10deg 20deg); border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 0, transparent 62%); mask: radial-gradient(circle, #000 0, transparent 62%); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rev-card { position: relative; background: var(--cream); border-radius: var(--r-l); padding: 26px 22px 22px; width: min(360px, 100%); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); transform: scale(.6) translateY(30px); transition: transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.reveal.in .rev-card { transform: none; }
.rev-card small { color: var(--brand); font-weight: 600; font-size: var(--fs-14); }
.rev-card h2 { margin: 8px 0 2px; font-size: var(--fs-28); color: var(--ink); }
.rev-card p { margin: 0 0 16px; color: var(--muted); }
.rev-icon { display: grid; place-items: center; margin: 14px 0 6px; }
.medal.big { width: 120px; height: 120px; animation: pop .7s cubic-bezier(.2, 1.8, .4, 1) .15s both; }
.medal.big img { width: 100px; height: 100px; }
.lantern.big { width: 140px; height: 140px; --lv: 8; animation: pop .7s cubic-bezier(.2, 1.8, .4, 1) .15s both; }
.lantern.big img { width: 120px; height: 120px; }
@keyframes pop { from { transform: scale(0) rotate(-20deg); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lantern img, .lantern .halo, .lbar i, .badge.on .medal::after, .rays, .medal.big, .lantern.big { animation: none !important; } .rev-card { transition: none; } }

/* R5 UX audit fixes */
.empty-note { margin: 14px 0 6px; padding: 18px 16px; border-radius: 14px; background: var(--surface-2); color: var(--ink); font-weight: 500; text-align: center; line-height: 1.6; }
#kerr:empty { min-height: 0; margin: 0; }
.avs { align-items: stretch; } .avs .av { aspect-ratio: 1; overflow: hidden; } .avs .av img { width: 100%; height: 100%; min-height: 0; object-fit: contain; } /* equal avatar tiles */
@media (min-width: 1000px) {
  .setup { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: center; max-width: 1240px; margin-inline: auto; }
  .setup .hero-mini { margin: 0; } .setup .card.form { margin: 0; } .setup .foot { grid-column: 1 / -1; }
}
.card .sw ~ a[href='/privacy'] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }

/* ===================== R13: calm kids layer (replaces the R6 3D/ornate game layer) ===================== */
#app { z-index: 1; }
.btn, .chip, .ibtn, .w-go, .kid, .price, .step button, .pb-x { -webkit-user-select: none; user-select: none; }
.btn { transition: background .15s, transform .12s var(--ease); } .btn:active, .chip:active, .kid:active, .price:active { transform: scale(.98); }
.btn.danger, .klist [data-del] { background: var(--bad-soft); color: var(--bad); box-shadow: none; }
.ibtn { width: 44px; height: 44px; border: 0; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; color: var(--brand); background: var(--brand-soft); }
.ibtn svg { width: 22px; height: 22px; } .ibtn[aria-pressed='false'] { color: var(--muted); background: var(--surface-2); }
.ibtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* top bar: quiet, on paper */
.top { position: sticky; top: 0; z-index: 12; margin: 0; padding: 8px 0; background: rgba(255, 249, 241, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .logo { min-width: 44px; min-height: 44px; } .top-r { gap: 6px; } .top .chip { white-space: nowrap; }
/* hero stats */
.hud-stats { position: absolute; top: 12px; inset-inline: 0; justify-content: center; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; }
.hero:has(.hud-stats) .hero-txt { top: 44px; padding-top: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: rgba(31, 27, 45, .62); color: #fff; font: 600 var(--fs-14) var(--font); }
[dir='rtl'] .pill { padding: 4px 6px 4px 12px; }
.pill img { width: 22px; height: 22px; }
.pill .spark { width: 18px; height: 18px; background: var(--accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.pill .flame { width: 14px; height: 18px; margin-inline: 3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #f08a4b; }
/* daily path: a quiet dotted trail, the next stop marked in gold */
.steps { position: relative; }
.steps::before { content: ''; position: absolute; z-index: 0; inset-block: 36px; inset-inline-start: 36px; border-inline-start: 2px dashed var(--line-2); }
.step { position: relative; z-index: 1; }
.step img { width: 52px; height: 52px; border-radius: 50%; padding: 4px; background: color-mix(in srgb, var(--c) 14%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, #fff); }
.step.done img { box-shadow: 0 0 0 2px var(--ok); }
.step.next button { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.step.next .st-m { color: var(--accent-ink); background: var(--surface); border-radius: 999px; padding: 4px 10px; box-shadow: inset 0 0 0 1px var(--accent); }
@media (min-width: 701px) { .steps::before { inset-block: auto; top: 40px; inset-inline: 40px; border-inline-start: 0; border-top: 2px dashed var(--line-2); } }
/* world cards keep their art, lose the gloss */
.world { box-shadow: var(--sh); } .world:hover .w-ch { transform: translateY(-4px); } .w-ch { transition: transform .3s var(--ease); }
.w-go { background: #fff; color: var(--ink); }
.kid { box-shadow: none; } .kid.on { box-shadow: 0 0 0 2px #fff; }
.price { box-shadow: inset 0 0 0 1px var(--line-2); }
.av.on { box-shadow: inset 0 0 0 2px var(--accent); }
.banner { margin: 8px 0 12px; }
.banner img { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 461; object-fit: cover; border-radius: var(--r-l); }
@media (min-width: 900px) { .banner img { max-height: 280px; } }
/* loading */
.ploading::before { content: ''; position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 4px solid #ffffff2a; border-top-color: var(--accent); animation: spin 1s linear infinite; top: 50%; left: 50%; margin: -60px 0 0 -28px; }
.syncing .w-p .ring, .syncing .glow-card .pts, .syncing .st-m { animation: skel 1s ease-in-out infinite alternate; }
@keyframes skel { from { opacity: 1; } to { opacity: .45; } }
.sheet { border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(31, 27, 45, .45); animation: pop .28s var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; }
.simlink { margin: 4px 0 10px; } .simlink .chip { min-height: 44px; display: inline-flex; align-items: center; }
/* R12 grown-ups' entry on the kids' home (behind the gate) */
.grownbar { display: flex; align-items: center; gap: 14px; width: 100%; margin: var(--s4) 0 0; padding: 14px var(--s2); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.grownbar > .ic:first-child { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.grownbar span { flex: 1; display: flex; flex-direction: column; gap: 2px; } .grownbar b { font-size: var(--fs-16); font-weight: 600; } .grownbar small { font-size: var(--fs-14); color: var(--ink-2); }
.gb-l { width: 18px; height: 18px; color: var(--muted); }

/* R9: SVG icons replace emoji */
.ic { display: inline-block; vertical-align: -.14em; flex: none; }
.lock { filter: none; color: #fff; font-size: 20px; display: grid; place-items: center; }
.lock .ic { filter: drop-shadow(0 1px 3px #0008); }
.okline .ic, .simlink .ic { margin-inline-end: 4px; } .st-ok { width: 22px; height: 22px; color: #1aa26b; stroke-width: 3; }
.badge:not(.on) .medal { filter: grayscale(1) brightness(.75) contrast(.9); }
.lock { inset: auto auto -3px -3px; width: 22px; height: 22px; font-size: 12px; border-radius: 50%; background: #2a2670; box-shadow: 0 0 0 2px #4b45a8; }
[dir="ltr"] .lock { inset: auto -3px -3px auto; }
.lock { background: #fff; color: #23205e; box-shadow: 0 1px 4px #0006; width: 24px; height: 24px; font-size: 13px; } .lock .ic { filter: none; stroke-width: 2.6; }