/* ==========================================================================
   AraBuzz — design system  ·  "Parchment & Gold"

   The brief: it should feel like a beautifully made premium product that
   happens to be for a child. Not a kids' app.

   Four decisions carry most of that:
     1  Warm bone surfaces and a deep forest ink, never white-on-grey.
     2  One antique gold accent, used sparingly. Saturation is earned.
     3  Fraunces for display — a warm optical serif with soft, wonky edges.
        Lexend for everything read at length; it is drawn to help children read.
     4  No hard offset "game" shadows anywhere. Depth comes from layered,
        low-opacity shadow and a hairline of inner light.

   Colour never carries meaning alone: every state also has a word or an icon.
   ========================================================================== */

:root {
  /* --- surfaces: warm, never clinical --------------------------------- */
  --paper:      #F5F1EA;
  --paper-2:    #EDE6DB;
  --card:       #FFFDF9;
  --card-2:     #FBF7F0;

  --ink:        #1B2B29;
  --ink-soft:   #4C5D5A;
  --ink-faint:  #8A9793;
  --line:       rgba(27, 43, 41, .10);
  --line-2:     rgba(27, 43, 41, .06);

  /* --- accents: one gold, three supports ------------------------------ */
  --gold:       #B8862F;
  --gold-lift:  #D8A44E;
  --gold-deep:  #8E6620;
  --gold-soft:  #F6EBD7;

  --jade:       #2F6B58;
  --jade-lift:  #47876F;
  --jade-soft:  #E4EEE8;

  --clay:       #B05C42;
  --clay-lift:  #C97457;
  --clay-soft:  #F7E7E0;

  --indigo:     #2C4A6B;
  --indigo-soft:#E4EBF2;

  --plum:       #6B5570;
  --plum-soft:  #EEE8F0;

  /* legacy aliases so nothing breaks mid-rename */
  --honey: var(--gold); --honey-deep: var(--gold-deep); --honey-soft: var(--gold-soft);
  --sage: var(--jade);  --sage-deep: var(--jade);       --sage-soft: var(--jade-soft);
  --coral: var(--clay); --coral-deep: var(--clay);      --coral-soft: var(--clay-soft);
  --sky: var(--indigo); --sky-soft: var(--indigo-soft);
  --macaw-blue: var(--indigo); --macaw-gold: var(--gold);

  /* --- geometry: tighter than a toy, softer than an enterprise app ---- */
  --r-s:  10px;
  --r:    14px;
  --r-l:  20px;
  --r-xl: 28px;
  --radius-s: var(--r-s); --radius: var(--r); --radius-l: var(--r-l); --radius-xl: var(--r-xl);

  /* --- light: layered and low, never a single hard drop --------------- */
  --sh-1: 0 1px 2px rgba(27,43,41,.045), 0 2px 8px rgba(27,43,41,.04);
  --sh-2: 0 2px 4px rgba(27,43,41,.04), 0 10px 26px rgba(27,43,41,.07);
  --sh-3: 0 4px 10px rgba(27,43,41,.05), 0 24px 56px rgba(27,43,41,.11);
  --lift: inset 0 1px 0 rgba(255,255,255,.45);
  --shadow-s: var(--sh-1); --shadow: var(--sh-2); --shadow-l: var(--sh-3);

  --font-head: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Lexend', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --- night ---------------------------------------------------------- */
[data-theme="dark"] {
  --paper:     #131B1A;
  --paper-2:   #1B2523;
  --card:      #1E2A28;
  --card-2:    #223330;
  --ink:       #F0EBE1;
  --ink-soft:  #B9C4C0;
  --ink-faint: #7E8D89;
  --line:      rgba(240,235,225,.12);
  --line-2:    rgba(240,235,225,.07);

  --gold: #D6A44C; --gold-lift: #E8BC6E; --gold-deep: #B8862F; --gold-soft: #33291A;
  --jade: #5EA184; --jade-soft: #1C2E28;
  --clay: #D08165; --clay-soft: #33221C;
  --indigo: #6E9BC4; --indigo-soft: #1B2733;
  --plum: #A38FA9; --plum-soft: #272130;

  --lift: inset 0 1px 0 rgba(255,255,255,.07);
  --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.22);
  --sh-2: 0 2px 4px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.34);
  --sh-3: 0 4px 10px rgba(0,0,0,.34), 0 24px 56px rgba(0,0,0,.46);
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { background: var(--paper); }
html, body {
  margin: 0; padding: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
body { min-height: 100vh; min-height: 100dvh; background: transparent; }

/* A whisper of grain over everything. Costs nothing, and is most of the
   difference between "flat vector" and "printed on good paper". */
body:after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body:after { mix-blend-mode: screen; opacity: .05; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 36;
  line-height: 1.14;
  letter-spacing: -.018em;
  margin: 0 0 .42em;
}
h1 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.25rem); font-variation-settings: 'SOFT' 46, 'WONK' 1, 'opsz' 60; }
h2 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.55rem); }
h3 { font-size: 1.12rem; font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 20; letter-spacing: -.01em; }

p { margin: 0 0 1em; }
a { color: var(--indigo); text-underline-offset: 3px; }
strong, b { font-weight: 550; }

::selection { background: var(--gold-soft); color: var(--gold-deep); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.noselect, button, .tile, .opt { -webkit-user-select: none; user-select: none; }

/* ==========================================================================
   Layout
   ========================================================================== */
.app { max-width: 1000px; margin: 0 auto; padding: 20px 20px 128px; }
.screen { display: none; animation: rise .42s var(--ease-out); }
.screen.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; }
.spacer { height: 18px; }
.hidden { display: none !important; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
@media (max-width: 760px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Surfaces
   ========================================================================== */
.card {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 26px;
  box-shadow: var(--sh-1), var(--lift);
}
.card.pad-s { padding: 18px; }
.card.flat  { box-shadow: none; background: var(--paper-2); border-color: var(--line-2); }
.card.glow  { box-shadow: var(--sh-2), var(--lift); }
@media (max-width: 560px) { .card { padding: 20px; } }

.tile {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 22px;
  box-shadow: var(--sh-1), var(--lift);
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .3s;
}
.tile:before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, var(--gold-soft), transparent 62%);
  opacity: 0; transition: opacity .34s var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-2), var(--lift); border-color: rgba(184,134,47,.34); }
.tile:hover:before { opacity: .8; }
.tile:active { transform: translateY(-1px); }
.tile .ic { color: var(--gold); }
.tile .emoji, .tile .tile-ic { display: block; margin-bottom: 12px; color: var(--gold); }
.tile h3 { margin-bottom: 5px; }
.tile p { font-size: .86rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.tile .ribbon {
  position: absolute; top: 16px; right: 16px;
  background: var(--ink); color: var(--card); font-size: .58rem; font-weight: 600;
  padding: 4px 9px; letter-spacing: .12em; border-radius: 999px;
  font-family: var(--font-body); line-height: 1.4;
}

/* ==========================================================================
   Buttons — no hard offset shadows. Fill, hairline of light, soft cast.
   ========================================================================== */
button, .btn {
  font-family: var(--font-body);
  font-weight: 500; font-size: .98rem; letter-spacing: -.005em;
  border: 1px solid transparent; border-radius: var(--r);
  padding: 12px 22px; cursor: pointer;
  background: var(--paper-2); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .18s var(--ease), background .22s, box-shadow .22s, border-color .22s, color .22s;
}
button .ic { flex: none; }
button:hover { background: var(--card-2); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .42; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-lift), var(--gold));
  color: #FFFCF5; border-color: rgba(0,0,0,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px rgba(184,134,47,.26);
}
.btn-primary:hover { background: linear-gradient(180deg, #E0AE59, var(--gold-lift)); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 26px rgba(184,134,47,.32); }
.btn-primary:active { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 3px 10px rgba(184,134,47,.26); }

.btn-go {
  background: linear-gradient(180deg, var(--jade-lift), var(--jade));
  color: #FBFDFC; border-color: rgba(0,0,0,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px rgba(47,107,88,.26);
}
.btn-go:hover { box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 10px 26px rgba(47,107,88,.3); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--gold); color: var(--ink); background: transparent; }
.btn-quiet { background: transparent; color: var(--ink-faint); padding: 9px 12px; font-size: .9rem; }
.btn-quiet:hover { background: var(--paper-2); color: var(--ink); }
.btn-s  { padding: 8px 15px; font-size: .87rem; border-radius: var(--r-s); }
.btn-xl { padding: 16px 34px; font-size: 1.06rem; border-radius: var(--r-l); }
.btn-block { width: 100%; }
.btn-danger { background: var(--clay-soft); color: var(--clay); }
.btn-danger:hover { background: var(--clay); color: #fff; }

/* icon-only */
.btn-icon { width: 42px; height: 42px; padding: 0; border-radius: 50%; }

/* ==========================================================================
   Form controls
   ========================================================================== */
/* Every text-like field, however it is typed — an input with no `type` at all
   is still a text field, and used to fall through to the browser's own white. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
textarea, select {
  font-family: var(--font-body); font-size: .98rem; font-weight: 350;
  padding: 12px 15px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,134,47,.16);
}
label { font-size: .82rem; font-weight: 500; color: var(--ink-soft); display: block; margin-bottom: 7px;
        letter-spacing: .01em; }
.field { margin-bottom: 18px; }
.hint { font-size: .8rem; color: var(--ink-faint); margin-top: 7px; line-height: 1.5; }

.spell-input {
  font-family: var(--font-body) !important;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem) !important;
  font-weight: 400; letter-spacing: .14em; text-align: center;
  padding: 20px 16px !important; border-radius: var(--r-l) !important;
  background: var(--paper) !important; border: 1px solid var(--line) !important;
  box-shadow: inset 0 2px 6px rgba(27,43,41,.05);
}
.spell-input:focus { box-shadow: inset 0 2px 6px rgba(27,43,41,.05), 0 0 0 3px rgba(184,134,47,.18); }
.spell-input::placeholder { letter-spacing: .04em; font-size: 1rem; color: var(--ink-faint); }

/* ==========================================================================
   Type helpers
   ========================================================================== */
.big-word {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem);
  letter-spacing: .03em; line-height: 1.16;
}
.kicker {
  font-family: var(--font-body); font-size: .69rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
}
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.tiny { font-size: .78rem; }
.small { font-size: .88rem; }
.center-text { text-align: center; }
.bold { font-weight: 550; }

.ic { display: inline-block; vertical-align: -.18em; }
.ichip { display: inline-flex; align-items: center; gap: 7px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 14px;
  font-size: .82rem; font-weight: 500; color: var(--ink-soft);
}
.pill .ic { color: currentColor; }
.pill.honey { background: var(--gold-soft); color: var(--gold-deep); border-color: rgba(184,134,47,.18); }
.pill.sage  { background: var(--jade-soft); color: var(--jade); border-color: rgba(47,107,88,.16); }
.pill.coral { background: var(--clay-soft); color: var(--clay); border-color: rgba(176,92,66,.16); }
.pill.plum  { background: var(--plum-soft); color: var(--plum); border-color: rgba(107,85,112,.16); }
.pill.sky   { background: var(--indigo-soft); color: var(--indigo); border-color: rgba(44,74,107,.14); }
.pill.tiny  { font-size: .7rem; padding: 4px 10px; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar { display: flex; align-items: center; gap: 16px; padding: 12px 2px 24px; position: relative; }
.brand { display: flex; align-items: center; gap: 13px; cursor: pointer; }
.brand svg { width: 44px; height: 44px; flex: none; border-radius: 12px; box-shadow: var(--sh-1); }
.brand-name {
  font-family: var(--font-head); font-weight: 600;
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 48;
  font-size: 1.42rem; letter-spacing: -.028em; line-height: 1;
}
.brand-name .a { color: var(--ink); }
.brand-name .b { color: var(--gold); }
.brand-tag {
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; margin-top: 4px;
}
.hud { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.hud .pill { font-weight: 550; background: var(--card); box-shadow: var(--sh-1); border-color: var(--line); }

/* ==========================================================================
   Meters
   ========================================================================== */
.bar { height: 9px; background: var(--paper-2); border-radius: 999px; overflow: hidden;
       box-shadow: inset 0 1px 2px rgba(27,43,41,.07); }
.bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lift));
  transition: width .8s var(--ease-out);
}
.bar.sage > i { background: linear-gradient(90deg, var(--jade), var(--jade-lift)); }
.bar.thin { height: 6px; }

.qbar { display: flex; gap: 4px; margin: 6px 0 22px; }
.qbar span { flex: 1; height: 4px; border-radius: 999px; background: var(--paper-2); transition: background .4s, transform .3s; }
.qbar span.done { background: var(--jade); }
.qbar span.miss { background: var(--clay); }
.qbar span.now  { background: var(--gold); transform: scaleY(1.9); }

/* ==========================================================================
   Feedback
   ========================================================================== */
.feedback {
  border-radius: var(--r-l); padding: 20px 24px; margin-top: 18px;
  animation: rise .32s var(--ease-out); border: 1px solid transparent;
}
.feedback.good { background: var(--jade-soft); border-color: rgba(47,107,88,.2); }
.feedback.bad  { background: var(--clay-soft); border-color: rgba(176,92,66,.2); }
.feedback h3 { margin-bottom: 6px; }
.feedback.good h3 { color: var(--jade); }
.feedback.bad  h3 { color: var(--clay); }

.diff { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); letter-spacing: .1em; font-weight: 400; margin: 12px 0; }
.diff .ok   { color: var(--ink); }
.diff .bad  { color: var(--clay); background: rgba(176,92,66,.13); border-radius: 4px; padding: 0 3px;
              text-decoration: line-through; text-decoration-thickness: 1.5px; }
.diff .miss { color: var(--jade); background: rgba(47,107,88,.14); border-radius: 4px; padding: 0 3px; }

@keyframes shake { 0%,100%{transform:translateX(0)} 18%{transform:translateX(-7px)}
  38%{transform:translateX(7px)} 58%{transform:translateX(-4px)} 78%{transform:translateX(4px)} }
.shake { animation: shake .42s var(--ease); }
@keyframes pop { 0%{transform:scale(.86);opacity:0} 58%{transform:scale(1.04);opacity:1} 100%{transform:scale(1)} }
.pop { animation: pop .42s var(--ease-out); }

@keyframes floatUp {
  0%   { transform: translateY(6px) scale(.9); opacity: 0 }
  22%  { opacity: 1; transform: translateY(-10px) scale(1.04) }
  100% { transform: translateY(-84px) scale(1); opacity: 0 }
}
.float-points {
  position: fixed; z-index: 90; pointer-events: none;
  font-family: var(--font-head); font-weight: 600; font-size: 1.6rem;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  color: var(--gold-deep); animation: floatUp 1.15s var(--ease-out) forwards;
}

/* ==========================================================================
   Choices
   ========================================================================== */
.opts { display: grid; gap: 11px; }
.opt {
  display: flex; gap: 15px; align-items: flex-start; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 20px; cursor: pointer; color: var(--ink);
  font-family: var(--font-body); font-size: .97rem; font-weight: 350; line-height: 1.52;
  box-shadow: var(--sh-1);
  transition: transform .22s var(--ease-out), border-color .22s, background .22s, box-shadow .22s;
}
.opt:hover:not(.locked) { border-color: var(--gold); transform: translateX(3px); box-shadow: var(--sh-2); }
.opt .key {
  flex: none; width: 27px; height: 27px; border-radius: 8px; background: var(--paper-2);
  display: grid; place-items: center; font-size: .78rem; font-weight: 600; color: var(--ink-faint);
  transition: all .22s;
}
.opt.correct { border-color: var(--jade); background: var(--jade-soft); }
.opt.correct .key { background: var(--jade); color: #fff; }
.opt.wrong { border-color: var(--clay); background: var(--clay-soft); }
.opt.wrong .key { background: var(--clay); color: #fff; }
.opt.locked { cursor: default; }
.opt.spelling-opt { font-size: 1.22rem; letter-spacing: .08em; font-weight: 400; }

/* ==========================================================================
   Letter tiles
   ========================================================================== */
.letters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 22px 0; }
.ltile {
  width: 52px; height: 58px; border-radius: var(--r-s);
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer;
  font-size: 1.55rem; font-weight: 400; font-family: var(--font-body);
  box-shadow: var(--sh-1), var(--lift);
  transition: all .2s var(--ease-out);
}
.ltile:hover { border-color: var(--gold); transform: translateY(-2px); }
.ltile:active { transform: translateY(0); }
.ltile.used { opacity: .22; pointer-events: none; }
.ltile.slot { background: var(--paper-2); border-style: dashed; box-shadow: none; }
.ltile.filled { background: var(--gold-soft); border-color: var(--gold); }
.ltile.gap { background: var(--gold-soft); border-color: var(--gold); border-style: dashed; }
.ltile.fixed { background: transparent; border-color: transparent; box-shadow: none; cursor: default; }
.ltile.space { width: 20px; border: none; background: none; box-shadow: none; cursor: default; }
@media (max-width: 560px) { .ltile { width: 42px; height: 48px; font-size: 1.28rem; } }

.gap-input {
  width: 52px; height: 58px; border-radius: var(--r-s) !important;
  border: 1px dashed var(--gold) !important; background: var(--gold-soft) !important;
  text-align: center; font-size: 1.55rem !important; font-weight: 400; padding: 0 !important;
  font-family: var(--font-body);
}
@media (max-width: 560px) { .gap-input { width: 42px; height: 48px; font-size: 1.28rem !important; } }

/* ==========================================================================
   Word Rush
   ========================================================================== */
.rush-bubble-wrap { position: relative; height: 138px; display: grid; place-items: center; }
.rush-bubble {
  position: relative; padding: 20px 36px; border-radius: 999px;
  background: linear-gradient(155deg, var(--card), var(--gold-soft));
  border: 1px solid rgba(184,134,47,.4);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.7);
  animation: driftIn .75s var(--ease-out), bobble 4.4s ease-in-out .75s infinite;
}
.rush-bubble:after {
  content: ''; position: absolute; top: 13px; left: 28px; width: 24px; height: 11px;
  border-radius: 50%; background: rgba(255,255,255,.7); transform: rotate(-22deg);
}
@keyframes driftIn { from { transform: translateX(90px) scale(.86); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes bobble { 0%,100% { transform: translateY(0) rotate(-.8deg) } 50% { transform: translateY(-9px) rotate(.8deg) } }
.rush-bubble.pop { animation: popOut .48s var(--ease-out) forwards; }
@keyframes popOut { 0%{transform:scale(1);opacity:1} 42%{transform:scale(1.2)} 100%{transform:scale(.24);opacity:0} }

.rush-target {
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.5rem); font-weight: 400; letter-spacing: .1em;
  text-align: center; font-family: var(--font-body); line-height: 1.2;
  transition: opacity .55s var(--ease), filter .55s var(--ease);
}
.rush-target.faded { opacity: 0; filter: blur(14px); }

.rush-spark { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  pointer-events: none; animation: sparkOut .65s var(--ease-out) forwards; }
@keyframes sparkOut { from { transform: translate(0,0) scale(1); opacity: 1 }
  to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0 } }

.rush-type { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  min-height: 70px; align-items: center; margin: 18px 0 6px; }
.rush-ch {
  min-width: 38px; height: 54px; border-radius: var(--r-s); display: grid; place-items: center;
  font-size: 1.7rem; font-weight: 400; font-family: var(--font-body); padding: 0 4px;
  background: var(--paper-2); color: var(--ink-faint);
  border-bottom: 2px solid var(--line); transition: all .14s var(--ease-out);
}
.rush-ch.hit  { background: var(--jade-soft); color: var(--jade); border-bottom-color: var(--jade); animation: letterPop .2s var(--ease-out); }
.rush-ch.miss { background: var(--clay-soft); color: var(--clay); border-bottom-color: var(--clay); animation: shake .3s; }
.rush-ch.now  { background: var(--gold-soft); border-bottom-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,134,47,.14); }
.rush-ch.space { min-width: 16px; background: none; border-bottom-color: transparent; }
@keyframes letterPop { 0%{transform:scale(.72)} 60%{transform:scale(1.12)} 100%{transform:scale(1)} }
@media (max-width: 560px) { .rush-ch { min-width: 29px; height: 42px; font-size: 1.28rem; } }

.rush-stage { display: flex; gap: 6px; justify-content: center; margin: 4px 0 2px; }
.rush-stage span {
  font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px; background: var(--paper-2); color: var(--ink-faint);
  transition: all .3s var(--ease);
}
.rush-stage span.on   { background: var(--gold); color: #FFFCF5; }
.rush-stage span.done { background: var(--jade-soft); color: var(--jade); }

.rush-hud { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.rush-queue { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.rush-queue span { font-size: .73rem; padding: 5px 12px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-faint); font-weight: 500; }
.rush-queue span.cleared { background: var(--jade-soft); color: var(--jade); }
.rush-queue span.active  { background: var(--gold); color: #FFFCF5; }

.rush-input { position: absolute; opacity: 0; pointer-events: none; height: 1px; width: 1px; }
.rush-tap { border: 1px dashed var(--line); border-radius: var(--r); padding: 13px;
  text-align: center; color: var(--ink-faint); font-size: .87rem; cursor: text; transition: border-color .3s; }

/* ==========================================================================
   Crossword & word search
   ========================================================================== */
.xw-wrap { overflow: auto; padding: 8px; }
.xw { border-collapse: separate; border-spacing: 2px; margin: 0 auto; }
.xw td { width: 38px; height: 38px; padding: 0; border: none; position: relative; }
.xw td.blank { background: transparent; }
.xw td.cell { background: var(--card); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--sh-1); }
.xw td.cell input {
  width: 100%; height: 100%; border: none; background: transparent; text-align: center;
  font-size: 1.15rem; font-weight: 400; text-transform: uppercase; padding: 0 !important;
  font-family: var(--font-body); color: var(--ink); border-radius: 5px;
}
.xw td.cell input:focus { background: var(--gold-soft); box-shadow: none; outline: none; }
.xw td.cell.hl { background: var(--indigo-soft); }
.xw td.cell.ok input { color: var(--jade); }
.xw td.cell.no input { color: var(--clay); }
.xw td .num { position: absolute; top: 1px; left: 3px; font-size: .55rem; font-weight: 600;
  color: var(--ink-faint); pointer-events: none; }
@media (max-width: 620px) { .xw td { width: 30px; height: 30px; } .xw td.cell input { font-size: .95rem; } }

.clues { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
@media (max-width: 760px) { .clues { grid-template-columns: 1fr; gap: 18px; } }
.clues ol { padding-left: 24px; margin: 0; }
.clues li { margin-bottom: 10px; font-size: .9rem; line-height: 1.55; cursor: pointer; }
.clues li:hover { color: var(--gold-deep); }
.clues li.solved { color: var(--jade); text-decoration: line-through; opacity: .7; }

.ws { border-collapse: separate; border-spacing: 1px; margin: 0 auto; user-select: none; }
.ws td { width: 32px; height: 32px; text-align: center; font-size: 1rem; font-weight: 400;
  font-family: var(--font-body); cursor: pointer; border-radius: 6px; color: var(--ink-soft);
  transition: background .12s, color .12s; }
.ws td.sel { background: var(--gold); color: #FFFCF5; }
.ws td.found { background: var(--jade-soft); color: var(--jade); font-weight: 500; }
@media (max-width: 620px) { .ws td { width: 25px; height: 25px; font-size: .8rem; } }

/* ==========================================================================
   Ara
   ========================================================================== */
.ara-stage { display: grid; place-items: center; position: relative; }
.ara-stage svg { width: 100%; height: auto; max-width: 200px; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.ara-bob { animation: bob 4.2s ease-in-out infinite; }
@keyframes cheer { 0%{transform:rotate(0) scale(1)} 26%{transform:rotate(-6deg) scale(1.07)}
  52%{transform:rotate(5deg) scale(1.07)} 76%{transform:rotate(-3deg) scale(1.03)} 100%{transform:none} }
.ara-cheer { animation: cheer .78s var(--ease-out); }

.speech {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 14px 22px; position: relative; font-size: .98rem; max-width: 460px;
  box-shadow: var(--sh-1), var(--lift);
}
.speech:after {
  content: ''; position: absolute; left: 30px; bottom: -7px; width: 13px; height: 13px;
  background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.speech.up:after { bottom: auto; top: -7px; transform: rotate(225deg); }

/* ==========================================================================
   Garden & badges
   ========================================================================== */
.garden { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
.plant {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 10px; text-align: center; cursor: pointer; box-shadow: var(--sh-1);
  transition: all .26s var(--ease-out);
}
.plant:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--gold); }
.plant .stage { display: block; margin-bottom: 7px; color: var(--jade); }
.plant .nm { font-size: .74rem; font-weight: 500; line-height: 1.3; word-break: break-word; }
.plant .lvl { height: 3px; border-radius: 999px; background: var(--paper-2); margin-top: 9px; overflow: hidden; }
.plant .lvl i { display: block; height: 100%; background: var(--jade); }
.plant.mastered { border-color: var(--jade); background: var(--jade-soft); }
.plant.tricky { border-color: var(--clay); }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.badge {
  text-align: center; padding: 17px 9px; border-radius: var(--r);
  background: var(--paper-2); border: 1px solid transparent; transition: all .26s var(--ease-out);
}
.badge.on { background: var(--card); border-color: rgba(184,134,47,.3); box-shadow: var(--sh-1); }
.badge .ic { color: var(--ink-faint); opacity: .4; }
.badge.on .ic { color: var(--gold); opacity: 1; }
.badge .nm { font-size: .73rem; font-weight: 550; margin-top: 8px; line-height: 1.25; }
.badge .ds { font-size: .64rem; color: var(--ink-faint); line-height: 1.35; margin-top: 3px; }

.badge-shelf { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.badge-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); font-size: .78rem; font-weight: 500;
  color: var(--ink-soft); box-shadow: var(--sh-1);
}
.badge-chip .ic { color: var(--gold); }
.badge-chip.locked { background: transparent; box-shadow: none; color: var(--ink-faint); border-style: dashed; }
.badge-chip.locked .ic { color: var(--ink-faint); }

.stars { display: inline-flex; gap: 8px; align-items: center; }
.stars .ic { color: var(--gold); }
.stars .off .ic, .stars .off { color: var(--line); }

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-bg {
  position: fixed; inset: 0; background: rgba(20,30,29,.42); backdrop-filter: blur(8px) saturate(1.1);
  display: grid; place-items: center; z-index: 100; padding: 22px; animation: fadeIn .24s var(--ease);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line); border-radius: var(--r-xl); padding: 30px;
  max-width: 560px; width: 100%; max-height: 88vh; overflow: auto;
  box-shadow: var(--sh-3), var(--lift); animation: pop .38s var(--ease-out); position: relative;
}
.modal-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: transparent; color: var(--ink-faint); border: 1px solid var(--line);
}
.modal-x:hover { background: var(--clay-soft); color: var(--clay); border-color: transparent; }
.modal-body { padding-right: 30px; }
.modal-body > h2:first-child { margin-top: 0; }

/* ==========================================================================
   Tabs
   ========================================================================== */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 26px; overflow-x: auto; }
.tabs button {
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 12px 16px; color: var(--ink-faint); font-size: .92rem; white-space: nowrap; font-weight: 450;
}
.tabs button:hover { color: var(--ink-soft); background: none; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--gold); font-weight: 550; }

/* ==========================================================================
   Data tables
   ========================================================================== */
table.data { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.data th {
  text-align: left; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line);
}
table.data td { padding: 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }

/* ==========================================================================
   Toast
   ========================================================================== */
#toast { position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--ink); color: var(--paper); padding: 12px 22px; border-radius: 999px;
  font-size: .89rem; font-weight: 450; box-shadow: var(--sh-3);
  animation: rise .34s var(--ease-out);
}
.toast.good { background: var(--jade); }
.toast.bad { background: var(--clay); }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--line);
  border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.loading-box { display: grid; place-items: center; gap: 15px; padding: 44px 20px; text-align: center; }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 150; }

/* ==========================================================================
   Bottom navigation
   ========================================================================== */
.nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px;
  background: rgba(255,253,249,.86); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--line); border-radius: 999px;
  display: flex; gap: 2px; padding: 6px; box-shadow: var(--sh-3); z-index: 60;
}
[data-theme="dark"] .nav { background: rgba(30,42,40,.86); }
.nav button {
  background: none; padding: 9px 16px; border-radius: 999px; font-size: .68rem;
  color: var(--ink-faint); flex-direction: column; gap: 3px; font-weight: 500;
  letter-spacing: .02em; transition: all .26s var(--ease-out);
}
.nav button .ic { color: currentColor; }
.nav button:hover { color: var(--ink-soft); background: none; }
.nav button.on { background: var(--ink); color: var(--card); }

/* ==========================================================================
   Multi-child
   ========================================================================== */
.ava {
  width: 46px; height: 46px; padding: 0; border-radius: 50%; font-size: 1.35rem;
  background: var(--paper-2); border: 2px solid transparent; line-height: 1;
}
.ava.on { border-color: var(--ava); background: color-mix(in srgb, var(--ava) 14%, var(--card)); }

.who-chip {
  background: var(--card) !important; color: var(--ink) !important;
  border: 1px solid var(--who); font-weight: 550; cursor: pointer; padding: 5px 13px;
}
.who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; }
.who-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 26px 16px; border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line); box-shadow: var(--sh-1);
  transition: all .28s var(--ease-out); position: relative;
}
.who-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.who-card.on { border-color: var(--who); }
.who-card .who-ava { font-size: 2.6rem; line-height: 1; }
.who-card .who-name { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 20; }
.who-card .who-meta { font-size: .74rem; color: var(--ink-faint); }
.who-card .who-tag {
  position: absolute; top: 11px; right: 11px; font-size: .56rem; letter-spacing: .12em;
  text-transform: uppercase; background: var(--jade); color: #fff;
  padding: 3px 9px; border-radius: 999px; font-weight: 600;
}
.who-card.add { border-style: dashed; color: var(--ink-faint); background: transparent; box-shadow: none; }

/* ==========================================================================
   My scores
   ========================================================================== */
.score-row { display: flex; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.score-row:last-child { border-bottom: none; }
.score-when { width: 88px; flex: none; line-height: 1.3; }
.score-when b { display: block; font-size: .87rem; font-weight: 550; }
.score-stars { flex: none; display: inline-flex; gap: 3px; }
.score-stars .ic { color: var(--gold); }
.score-stars .off .ic { color: var(--line); }
.score-pts { flex: none; width: 52px; text-align: right; font-family: var(--font-head);
  font-weight: 600; color: var(--gold-deep); font-variation-settings: 'opsz' 18; }
@media (max-width: 560px) { .score-when { width: 62px; } .score-row { gap: 10px; } }

/* ==========================================================================
   Journey
   ========================================================================== */
.jstrip { display: flex; gap: 11px; overflow-x: auto; padding: 14px 2px 8px; scroll-snap-type: x proximity; }
.jstrip .jstep {
  flex: none; width: 128px; text-align: center; scroll-snap-align: start;
  background: var(--paper-2); border-radius: var(--r); padding: 14px 9px;
  opacity: .48; transition: all .3s var(--ease-out); border: 1px solid transparent;
}
.jstrip .jstep.have { opacity: 1; background: var(--card); border-color: rgba(184,134,47,.26); box-shadow: var(--sh-1); }
.jstrip .jart { display: grid; place-items: center; min-height: 72px; color: var(--jade); }
.jstrip .jname { font-weight: 550; font-size: .8rem; margin-top: 5px; }
.jstrip .jsub { font-size: .67rem; color: var(--ink-faint); line-height: 1.35; margin-top: 3px; }
.jstrip.small-steps .jstep { width: 106px; padding: 12px 7px; }
.jstrip.small-steps .jart { min-height: 42px; }

.jtree { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.jtree > div:first-child { display: grid; place-items: center; }
.jflame { width: 74px; text-align: center; padding: 12px 5px; border-radius: var(--r);
  background: var(--paper-2); opacity: .45; color: var(--ink-faint); }
.jflame.have { opacity: 1; background: var(--clay-soft); color: var(--clay); }

/* ==========================================================================
   Report
   ========================================================================== */
.report h2 { color: var(--indigo); border-bottom: 1px solid var(--gold); padding-bottom: 8px; margin-top: 30px; }
.report h3 { color: var(--ink); margin-top: 20px; }
.report blockquote {
  margin: 14px 0; padding: 15px 20px; background: var(--gold-soft);
  border-left: 2px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; font-size: .95rem;
}
.report ul { padding-left: 22px; } .report li { margin-bottom: 8px; }
.report table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .88rem; }
.report table th, .report table td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.report table th { background: var(--paper-2); font-weight: 550; }

.stage-banner { border-radius: var(--r-l); padding: 18px 24px; color: #fff;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap; box-shadow: var(--sh-2); }

/* ==========================================================================
   Charts
   ========================================================================== */
.viz-title { font-family: var(--font-head); font-weight: 600; font-size: 1rem; margin: 0 0 3px;
  color: var(--ink); font-variation-settings: 'SOFT' 30, 'opsz' 18; }
.viz-sub { font-size: .8rem; color: var(--ink-faint); margin-bottom: 12px; }
.viz-note { font-size: .79rem; color: var(--ink-soft); margin-top: 10px; }
.viz-empty { font-size: .87rem; padding: 20px 0; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 15px; margin: 2px 0 12px; }
.viz-key { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-soft); }
.viz-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.viz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 11px; }
.viz-tile { background: var(--paper-2); border-radius: var(--r); padding: 15px 16px; }
.viz-tile-v { font-family: var(--font-head); font-size: 1.65rem; font-weight: 600; line-height: 1.05;
  color: var(--ink); font-variation-settings: 'opsz' 30; }
.viz-tile-l { font-size: .72rem; color: var(--ink-faint); margin-top: 3px; line-height: 1.35; }
.viz-tile-d { font-size: .72rem; margin-top: 6px; font-weight: 550; }

/* ==========================================================================
   THE SCENE
   ========================================================================== */
#scene { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
#scene .sky { position: absolute; inset: 0; transition: background 1.8s var(--ease); }
#scene .veil { position: absolute; inset: 0; opacity: .88; transition: background 1.8s var(--ease); }
@keyframes twinkle { 0%,100% { opacity: .22 } 50% { opacity: 1 } }

/* ==========================================================================
   THE HERO — a band of the real garden across the top of Home
   ========================================================================== */
.hero {
  position: relative; height: 330px; border-radius: var(--r-xl); overflow: hidden;
  margin-bottom: 18px; box-shadow: var(--sh-3); border: 1px solid var(--line);
  isolation: isolate;
}
@media (max-width: 760px) { .hero { height: 250px; } }
.hero-art, .hero-art .garden-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-shade {   /* keeps the words legible over whatever the sky is doing */
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(8,14,12,.72) 0%, rgba(8,14,12,.44) 34%, transparent 62%),
    radial-gradient(120% 90% at 50% 38%, transparent 56%, rgba(0,0,0,.24));
}
.hero-copy { position: absolute; left: 30px; top: 26px; max-width: 54%; z-index: 3; color: #FBF7EF; }
.hero-kicker {
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600;
  opacity: .82; text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.hero-title {
  font-family: var(--font-head); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  font-weight: 600; line-height: 1.1; margin-top: 5px; letter-spacing: -.02em;
  font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 60;
  text-shadow: 0 2px 12px rgba(0,0,0,.34);
}
.hero-sub { font-size: .88rem; opacity: .9; margin-top: 3px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.hero-bar {
  height: 7px; border-radius: 999px; background: rgba(255,255,255,.26); margin-top: 16px;
  overflow: hidden; max-width: 300px; box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
.hero-bar > i {
  display: block; height: 100%; border-radius: 999px; transition: width .9s var(--ease-out);
  background: linear-gradient(90deg, var(--gold-lift), #FFF3D6);
  box-shadow: 0 0 12px rgba(255,220,150,.6);
}
.hero-count { font-size: .77rem; margin-top: 9px; opacity: .92; text-shadow: 0 1px 5px rgba(0,0,0,.45); }
@media (max-width: 760px) {
  .hero-copy { left: 20px; top: 18px; max-width: 66%; }
  .hero-sub { font-size: .8rem; }
}

/* ==========================================================================
   THE PLOT — the full garden on its own page
   ========================================================================== */
.plot {
  position: relative; width: 100%; aspect-ratio: 12 / 7; max-height: 64vh;
  border-radius: var(--r-xl); overflow: hidden; margin: 14px 0 10px;
  box-shadow: var(--sh-3); border: 1px solid var(--line);
}
.plot .garden-svg { width: 100%; height: 100%; display: block; }
.gplant { transition: transform .18s var(--ease-out); transform-box: fill-box; transform-origin: 50% 100%; }
.gplant:hover { transform: scale(1.06); }
@media (max-width: 760px) { .plot { aspect-ratio: 4 / 3; } }

/* the legend of growth stages, drawn rather than described */
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; margin-top: 10px; }
.leg { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.leg > i {
  display: flex; align-items: flex-end; justify-content: center; height: 54px; width: 100%;
  background: linear-gradient(180deg, transparent 60%, var(--jade-soft));
  border-radius: var(--r-s);
}
.leg > b { font-size: .68rem; font-weight: 500; color: var(--ink-soft); line-height: 1.25; }

/* --- the set number a word list was given when it was uploaded ----------- */
.setno {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 26px; height: 22px; padding: 0 6px; border-radius: 7px;
  background: var(--gold-soft); color: var(--gold-deep);
  border: 1px solid rgba(184,134,47,.28);
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
  margin-right: 8px; vertical-align: 2px;
}
.tile .setno, .pill .setno { height: 19px; min-width: 22px; font-size: .64rem; margin-right: 6px; }

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  body:after, #scene, .topbar, .nav, .no-print, button { display: none !important; }
  html, body { background: #fff !important; }
  .app { max-width: none; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
  .report-section, .viz { break-inside: avoid; }
}

/* ==========================================================================
   Respect a reduced-motion preference everywhere
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Drawn petals and leaves rather than emoji — so the world has one illustrator. */
.mote.petal, .hmote.petal {
  width: var(--sz); height: calc(var(--sz) * .78);
  background: linear-gradient(140deg, #FBD9E4, #F0A9C2);
  border-radius: 60% 12% 60% 12%;
}
.mote.leaf, .hmote.leaf {
  width: var(--sz); height: calc(var(--sz) * .62);
  background: linear-gradient(140deg, #9AC58C, #5E9A5B);
  border-radius: 0 70% 0 70%;
}

/* --- nav: the active pill deserves a little more presence ---------------- */
.nav button.on { box-shadow: 0 4px 12px rgba(27,43,41,.22); }

/* --- a hairline under the top bar anchors the page ----------------------- */
.topbar:after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 10px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ==========================================================================
   ONBOARDING — invitation, sign-in, consent, PIN, the first child
   One decision per screen. Nothing else on the page competes with it.
   ========================================================================== */
body.onboarding > .app,
body.onboarding > .topbar,
body.onboarding > .nav { display: none !important; }

.onboard {
  position: fixed; inset: 0; z-index: 500; overflow-y: auto;
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}
.ob-wrap { max-width: 480px; margin: 0 auto; padding: 40px 20px 64px; }
.ob-wrap.wide { max-width: 660px; }

.ob-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.ob-brand img { width: 44px; height: 44px; border-radius: 12px; }
.ob-name { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.ob-name .gold { color: var(--gold); }
.ob-tag { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-top: 1px; }

.ob-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 30px 28px; box-shadow: var(--sh-2), var(--lift);
}
@media (max-width: 520px) { .ob-card { padding: 24px 20px; } .ob-wrap { padding-top: 26px; } }

.ob-card h1 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.9rem); margin-bottom: .3em; }
.ob-card .lead { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.62; }
.ob-kicker { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--gold); margin-bottom: 6px; }
.ob-h { margin: 26px 0 .4em; font-size: 1.05rem; }

.ob-list { margin: 18px 0; padding: 0; list-style: none; }
.ob-list li { position: relative; padding: 0 0 0 26px; margin-bottom: 11px;
  color: var(--ink-soft); line-height: 1.55; }
.ob-list li:before {
  content: ''; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--gold);
}

.ob-points { margin: 18px 0 6px; }
.ob-point { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line-2); }
.ob-point:first-child { border-top: 0; }
.ob-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-deep);
  display: grid; place-items: center; font-size: .74rem; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.ob-point b { display: block; margin-bottom: 3px; line-height: 1.4; }
.ob-point p { margin: 0; font-size: .89rem; color: var(--ink-soft); line-height: 1.58; }

.ob-agree {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  margin: 26px 0 16px; padding: 16px 18px;
  background: var(--gold-soft); border: 1px solid rgba(184,134,47,.28);
  border-radius: var(--r); line-height: 1.5; font-weight: 500;
}
.ob-agree input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--gold); }

.ob-pin { font-size: 1.5rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }

.ob-avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 20px; }
.ob-avatars button {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 4px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--card-2); color: var(--ink-soft); cursor: pointer;
  font-size: .68rem; text-transform: capitalize; transition: all .16s var(--ease);
}
.ob-avatars button.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-deep); }

.ob-tick { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--jade-soft); color: var(--jade); }
.ob-foot { text-align: center; font-size: .74rem; color: var(--ink-faint); margin-top: 18px; }
.btn-wide { width: 100%; justify-content: center; margin-top: 6px; }

/* the badge a child picks is a plant, so give each one room to be seen */
.ob-avatars { grid-template-columns: repeat(4, 1fr); }
.ob-avatars button { padding: 10px 4px 9px; min-height: 92px; justify-content: flex-end; }
.ob-avatars button svg { height: 46px; }
@media (max-width: 460px) { .ob-avatars { grid-template-columns: repeat(3, 1fr); } }

/* A plain stack of rows — recent games, recent misspellings. No decoration,
   because everything in it is somebody's child. */
.list { margin-top: 6px; }
.list > .row { padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.list > .row:last-child { border-bottom: none; }

/* --- pronouns: three words, chosen once, used everywhere ----------------- */
.ob-pronouns { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.ob-pronouns button, .row .pn {
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink-soft);
  font-size: .88rem; transition: all .16s var(--ease);
}
.ob-pronouns button:hover, .row .pn:hover { border-color: var(--gold); }
.ob-pronouns button.on, .row .pn.on {
  border-color: var(--gold); background: var(--gold-soft); color: var(--gold-deep);
}

/* The one moment the app has nothing to show: a device just signed in on,
   waiting to be told whose it is. */
.boot-wait {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  align-content: center; gap: 14px; background: var(--bg);
}
.boot-wait p { margin: 0; font-size: .9rem; }

/* --- onboarding: choices, steps, and the one warning that matters -------- */
.ob-choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 16px 18px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card-2);
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.ob-choice:hover { border-color: var(--gold); transform: translateY(-1px); }
.ob-choice b { display: block; margin-bottom: 2px; }
.ob-choice span { font-size: .87rem; color: var(--ink-soft); }

.ob-steps { margin: 16px 0; padding-left: 20px; line-height: 1.7; }
.ob-steps li { margin-bottom: 11px; color: var(--ink-soft); }
.ob-steps li b { color: var(--ink); }
.ob-addr { font-family: var(--font-body); background: var(--gold-soft); color: var(--gold-deep);
  padding: 2px 8px; border-radius: 6px; letter-spacing: .01em; }

.ob-warn {
  margin: 22px 0; padding: 18px 20px; border-radius: var(--r);
  background: var(--clay-soft); border: 1px solid rgba(176,92,66,.28);
}
.ob-warn b { display: block; margin-bottom: 8px; color: var(--clay); font-size: 1.02rem; }
.ob-warn p { margin: 0 0 10px; font-size: .9rem; line-height: 1.6; }
.ob-warn p:last-child { margin-bottom: 0; }