/* ============================================================
   HOMONYM HUNTER — cozy edition
   ============================================================ */
:root {
  --sky-top: #C6E4F3;
  --sky-bot: #E9F4FB;

  --ink: #35506B;
  --ink-soft: #6E869C;
  --card: #FFFFFF;
  --card-2: #FFFBF2;
  --line: #DEE9F1;

  --accent: #7FC29B;      /* sage — classic / primary */
  --accent-d: #63AC81;
  --accent-ink: #21402F;

  --amber: #F5C64E;       /* daily */
  --amber-d: #E7B437;
  --amber-ink: #7A5A12;

  --tile: #F1E1BC;        /* letter tiles */
  --tile-ink: #6B5327;

  --good: #57B98A;
  --bad: #E4886A;
  --warn: #EDB24C;

  --cloud: #FFFFFF;
  --hill-1: #77C193;
  --hill-2: #97D2AC;
  --hill-3: #BCE3C8;

  --owl-body: #B99A77;
  --owl-belly: #F4EAD7;
  --owl-wing: #A98C6B;
  --owl-tuft: #A98C6B;
  --owl-frame: #3C4A5C;
  --owl-lens: rgba(233, 244, 251, 0.7);
  --owl-eye: #3C4A5C;
  --owl-beak: #F0A552;
  --owl-foot: #E0913E;
  --owl-shadow: rgba(53, 80, 107, 0.12);

  --shadow: 0 10px 28px rgba(53, 80, 107, 0.13);
  --shadow-sm: 0 4px 12px rgba(53, 80, 107, 0.10);
  --radius: 20px;
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --appbar-h: 56px;
  --appnav-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) { color-scheme: dark;
    --sky-top: #171E33; --sky-bot: #1F2740;
    --ink: #E7ECF6; --ink-soft: #9EABC5;
    --card: #262E46; --card-2: #2B3350; --line: #39425F;
    --accent: #62BE95; --accent-d: #54AD85; --accent-ink: #0c1f16;
    --amber: #E1AF48; --amber-d: #CF9E39; --amber-ink: #2A2410;
    --tile: #3B4059; --tile-ink: #ECE2CB;
    --good: #5FC49A; --bad: #F0977A; --warn: #ECB457;
    --cloud: #3A4568;
    --hill-1: #3F6F59; --hill-2: #355D4C; --hill-3: #2C4C40;
    --owl-belly: #E9DEC8; --owl-frame: #E7ECF6; --owl-eye: #23293c;
    --owl-lens: rgba(231, 236, 246, 0.14);
    --owl-shadow: rgba(0, 0, 0, 0.3);
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
}
:root[data-appearance="dark"] { color-scheme: dark;
  --sky-top: #171E33; --sky-bot: #1F2740;
  --ink: #E7ECF6; --ink-soft: #9EABC5;
  --card: #262E46; --card-2: #2B3350; --line: #39425F;
  --accent: #62BE95; --accent-d: #54AD85; --accent-ink: #0c1f16;
  --amber: #E1AF48; --amber-d: #CF9E39; --amber-ink: #2A2410;
  --tile: #3B4059; --tile-ink: #ECE2CB;
  --good: #5FC49A; --bad: #F0977A; --warn: #ECB457;
  --cloud: #3A4568;
  --hill-1: #3F6F59; --hill-2: #355D4C; --hill-3: #2C4C40;
  --owl-belly: #E9DEC8; --owl-frame: #E7ECF6; --owl-eye: #23293c;
  --owl-lens: rgba(231, 236, 246, 0.14);
  --owl-shadow: rgba(0, 0, 0, 0.3);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.high-contrast {
  --ink: #06131f; --ink-soft: #2c3f4e; --line: #06131f;
  --card: #fff; --card-2: #fff;
}
:root[data-appearance="dark"] body.high-contrast,
:root:not([data-appearance="light"]) body.high-contrast {
  --ink: #fff; --ink-soft: #d7deec; --line: #fff; --card: #10141f; --card-2: #10141f;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 42%, var(--sky-bot) 100%) fixed;
}
body.big-text { font-size: 19px; }

h1, h2, h3 { line-height: 1.15; margin: 0; }
button { font-family: inherit; cursor: pointer; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
code {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 1px 6px; border-radius: 6px; font-size: 0.9em; font-weight: 700;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding:
    calc(var(--appbar-h) + 18px) 16px
    calc(var(--appnav-h) + 36px + env(safe-area-inset-bottom));
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
body[data-route="classic"] #app,
body[data-route="daily"] #app { padding-bottom: 28px; }

/* ---------------- app bar ---------------- */
.appbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--appbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; z-index: 40;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.appbar-back {
  border: 0; background: transparent; font-size: 20px; font-weight: 800;
  color: var(--ink); padding: 6px 8px; border-radius: 10px; line-height: 1;
}
.appbar-title { font-weight: 800; font-size: 15px; color: var(--ink); }
.streak-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--amber) 26%, var(--card));
  color: var(--amber-ink); font-weight: 800; font-size: 13px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
}
:root[data-appearance="dark"] .streak-chip,
:root:not([data-appearance="light"]) .streak-chip { color: var(--amber); }

/* ---------------- bottom nav ---------------- */
.appnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 42;
  height: calc(var(--appnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: stretch;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
body[data-route="classic"] .appnav,
body[data-route="daily"] .appnav { display: none; }
.appnav button {
  flex: 1; border: 0; background: transparent; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 800;
}
.appnav button .ico { font-size: 20px; line-height: 1; }
.appnav button.on { color: var(--accent-d); }
:root[data-appearance="dark"] .appnav button.on,
:root:not([data-appearance="light"]) .appnav button.on { color: var(--accent); }

@media (min-width: 780px) {
  .appnav {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: 16px; width: auto; height: auto; padding: 4px;
    border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);
    background: color-mix(in srgb, var(--card) 97%, transparent);
  }
  .appnav button { flex: 0 0 auto; flex-direction: row; gap: 7px; font-size: 13px; padding: 9px 18px; border-radius: 999px; }
  .appnav button.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
  .appnav button .ico { font-size: 15px; }
  body[data-route="classic"] .appnav, body[data-route="daily"] .appnav { display: flex; }
  #app { padding-bottom: 96px; }
}

/* ---------------- buttons ---------------- */
.btn {
  border: 0; border-radius: 999px; padding: 13px 22px;
  font-size: 15px; font-weight: 800; color: #fff; background: var(--accent);
  box-shadow: var(--shadow-sm);
  transition: transform .09s ease, filter .15s ease, background .15s ease;
}
.btn:active { transform: scale(0.96); }
.btn.primary { background: var(--accent); }
.btn.primary:hover { background: var(--accent-d); }
.btn.primary.big { padding: 16px 34px; font-size: 17px; border-radius: 18px; }
.btn.ghost {
  background: var(--card); color: var(--ink-soft);
  border: 1.5px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { color: var(--ink); }
.btn.ghost.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.btn:disabled { opacity: 0.5; pointer-events: none; }

/* ---------------- home / menu ---------------- */
.menu { display: flex; flex-direction: column; gap: 14px; position: relative; }
.menu-scene {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 2px 0 58px; margin: 0 -16px -6px;
}
.menu-scene .brand.hero { position: relative; z-index: 2; }
.menu-scene .owl {
  width: 92px; height: auto; position: relative; z-index: 2; margin: 14px 0 -6px;
  filter: drop-shadow(0 10px 14px var(--owl-shadow));
  animation: bob 4.5s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.menu-scene .backdrop {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 116px;
  opacity: 0.8; z-index: 0; pointer-events: none;
}

.tag { text-align: center; color: var(--ink-soft); margin: 2px 0 4px; font-size: 15px; font-weight: 600; }

.menu-card {
  text-align: left; background: var(--card); border: 0; border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); color: var(--ink);
  transition: transform .12s ease;
  display: block; width: 100%;
}
.menu-card:active { transform: scale(0.98); }
.menu-card.daily-card {
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-d) 100%);
  color: var(--amber-ink);
}
.menu-card.daily-card .mc-sub, .menu-card.daily-card .mc-meta { color: color-mix(in srgb, var(--amber-ink) 82%, transparent); }
.menu-card.classic-card { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-d) 100%); color: #fff; }
.menu-card.classic-card .mc-sub, .menu-card.classic-card .mc-meta { color: rgba(255,255,255,0.9); }
.mc-title { font-size: 19px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.mc-sub { font-size: 14px; margin-top: 3px; color: var(--ink-soft); font-weight: 600; }
.mc-meta { margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--accent-d); }

.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-card.small { padding: 14px 12px; text-align: center; }
.menu-card.small .mc-title { font-size: 14px; justify-content: center; }
.menu-card.small .mc-sub { font-size: 11px; margin-top: 2px; }

.foot { text-align: center; color: var(--ink-soft); font-size: 12px; margin-top: 6px; font-weight: 600; }

.bringer {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.bringer span { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); font-weight: 800; }
.bringer a { display: block; line-height: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.bringer img { width: 190px; max-width: 60%; display: block; transition: transform .12s ease; }
.bringer a:hover img { transform: translateY(-1px); }

/* ---------------- round ---------------- */
.round { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; }
.mini-hud { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.chip {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; font-weight: 800; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.chip b { color: var(--ink); }
.chip.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.chip.warn { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.chip.timer { color: var(--accent-d); font-variant-numeric: tabular-nums; }

.word-cloud {
  position: relative; width: 100%; display: flex; align-items: center; justify-content: center;
  padding: 26px 20px 30px; margin-top: 4px;
}
.word-cloud .cloud {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 14px 26px rgba(53,80,107,0.16));
}
:root[data-appearance="dark"] .word-cloud .cloud,
:root:not([data-appearance="light"]) .word-cloud .cloud { filter: drop-shadow(0 14px 26px rgba(0,0,0,0.4)); }
.the-word {
  position: relative; z-index: 1;
  font-size: clamp(40px, 12.5vw, 60px); font-weight: 900; letter-spacing: 2px;
  text-transform: uppercase; text-align: center; color: var(--ink);
}
.the-word.flash-ok { animation: flashOk .5s ease; }
.the-word.flash-bad { animation: flashBad .4s ease; }
@keyframes flashOk { 0%,100% { color: var(--ink); } 40% { color: var(--good); transform: scale(1.04); } }
@keyframes flashBad {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.the-word-sub { color: var(--ink-soft); font-size: 13px; font-weight: 700; margin-top: -6px; text-align: center; }

/* letter-tile slots */
.slots { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; min-height: 46px; }
.slot {
  min-width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; font-weight: 900; font-size: 15px; letter-spacing: 1px;
  background: color-mix(in srgb, var(--tile) 30%, var(--card));
  border: 2px dashed color-mix(in srgb, var(--tile-ink) 30%, var(--line));
  color: transparent;
  box-shadow: var(--shadow-sm);
}
.slot.filled {
  border-style: solid; border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tile) 88%, #fff) 0%, var(--tile) 100%);
  color: var(--tile-ink); text-transform: lowercase; letter-spacing: 0;
  animation: pop .34s cubic-bezier(.2,1.3,.5,1);
}
@keyframes pop { 0% { transform: scale(0.6) rotate(-6deg); } 100% { transform: scale(1) rotate(0); } }

.progress-bar { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.progress-bar .track {
  width: 100%; height: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink-soft) 22%, transparent); overflow: hidden;
}
.progress-bar .track i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.progress-bar .plabel { font-size: 12px; font-weight: 800; color: var(--ink-soft); }

/* hint owl bubble */
.hint-owl {
  display: flex; align-items: flex-end; gap: 10px; width: 100%;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.hint-owl .owl { width: 46px; flex-shrink: 0; }
.hint-owl .hb { font-size: 14px; font-weight: 700; color: var(--ink); }

.guess-form { display: flex; gap: 8px; width: 100%; }
.guess-input {
  flex: 1; border: 2px solid var(--line); border-radius: 14px; padding: 14px 18px;
  font-size: 17px; font-family: inherit; font-weight: 700;
  background: var(--card); color: var(--ink); outline: none;
}
.guess-input:focus { border-color: var(--accent); }
.guess-input::placeholder { color: var(--ink-soft); font-weight: 600; }
.guess-form .btn { border-radius: 14px; padding: 14px 22px; flex-shrink: 0; }
.round-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.round-controls .btn { padding: 10px 16px; font-size: 14px; }

/* ---------------- reveal ---------------- */
.reveal { display: flex; flex-direction: column; gap: 14px; position: relative; }
.perfect-card {
  position: relative; text-align: center;
  background: var(--card); border-radius: var(--radius); padding: 20px 18px 18px;
  box-shadow: var(--shadow); overflow: hidden;
}
.perfect-card.win { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--card)) 0%, var(--card) 60%); }
.perfect-card .owl { width: 78px; margin: 0 auto 2px; }
.reveal-title { color: var(--ink-soft); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; }
.reveal-head { font-size: 23px; font-weight: 900; margin-top: 2px; }
.reveal-stats { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 10px; }

.meaning-list { display: flex; flex-direction: column; gap: 8px; }
.meaning {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--line);
}
.meaning.got { border-left-color: var(--good); }
.meaning.missed { border-left-color: var(--warn); }
.meaning.given { border-left-color: var(--ink-soft); opacity: 0.8; }
.meaning-emoji { font-size: 24px; line-height: 1; flex-shrink: 0; }
.meaning-word { font-weight: 900; font-size: 16px; }
.meaning.missed .meaning-word, .meaning.given .meaning-word { color: var(--ink-soft); }
.meaning-def { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.meaning-ex { font-size: 13px; font-style: italic; color: var(--ink-soft); margin-top: 3px; opacity: 0.85; }

.did-you-know {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 600;
}
.reveal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.reveal-actions .btn { flex: 1; min-width: 108px; }
.reveal-actions .btn.primary { flex: 2; }

/* ---------------- daily ---------------- */
.daily-intro { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; padding-top: 10px; }
.daily-intro .owl { width: 96px; }
.daily-badge {
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-d) 100%);
  color: var(--amber-ink); font-weight: 900; padding: 8px 22px; border-radius: 999px; font-size: 16px;
}
.daily-intro h2 { font-size: 25px; font-weight: 900; }
.daily-diff { font-weight: 800; color: var(--accent-d); margin: 0; }
.daily-note { color: var(--ink-soft); font-size: 14px; max-width: 320px; margin: 0; font-weight: 600; }
.daily-streak-line {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 16px; font-size: 14px; box-shadow: var(--shadow-sm); font-weight: 700;
}
.daily-recap { width: 100%; display: flex; flex-direction: column; gap: 14px; margin-top: 2px; }
.recap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.recap-grid > div { background: var(--card); border-radius: 14px; padding: 10px 6px; text-align: center; box-shadow: var(--shadow-sm); }
.recap-grid b { display: block; font-size: 18px; font-weight: 900; }
.recap-grid span { font-size: 10px; color: var(--ink-soft); font-weight: 700; }

.cal-title { text-align: center; font-weight: 900; margin-bottom: 8px; font-size: 15px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 12px; font-weight: 800; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line);
}
.cal-cell.empty { background: transparent; border: 0; }
.cal-cell.done { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); border-color: transparent; }
.cal-cell.perfect { background: color-mix(in srgb, var(--amber) 32%, transparent); color: var(--amber-ink); border-color: transparent; }
.cal-cell.gaveup { background: color-mix(in srgb, var(--bad) 20%, transparent); border-color: transparent; }
.cal-cell.today { outline: 2px solid var(--accent); }

/* ---------------- sheets (progress / settings / help) ---------------- */
.sheet { display: flex; flex-direction: column; gap: 14px; }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head h2 { font-size: 23px; font-weight: 900; }
.sheet h3 { font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 900; margin-top: 4px; }
.sheet hr { border: 0; border-top: 1px solid var(--line); width: 100%; }

/* progress: donut + score */
.progress-hero {
  display: flex; gap: 16px; align-items: center;
  background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.progress-hero .donut { width: 118px; height: 118px; flex-shrink: 0; }
.donut-track { fill: none; stroke: color-mix(in srgb, var(--ink-soft) 20%, transparent); stroke-width: 12; }
.donut-arc { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.donut-big { fill: var(--ink); font-weight: 900; font-size: 26px; text-anchor: middle; }
.donut-small { fill: var(--ink-soft); font-weight: 800; font-size: 10px; text-anchor: middle; text-transform: uppercase; letter-spacing: 1px; }
.progress-hero .ph-right { flex: 1; }
.progress-hero .ph-score { font-size: 30px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.progress-hero .ph-label { font-size: 12px; color: var(--ink-soft); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: var(--card); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm); }
.tile b { display: block; font-size: 21px; font-weight: 900; }
.tile span { font-size: 12px; color: var(--ink-soft); font-weight: 700; }

/* medals */
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.badge {
  background: var(--card); border-radius: 16px; padding: 12px 8px 10px; box-shadow: var(--shadow-sm);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.badge .medal { width: 52px; height: 58px; }
.badge.locked .medal { filter: grayscale(1) opacity(0.4); }
.badge .bn { font-weight: 900; font-size: 12px; }
.badge .bd { font-size: 10px; color: var(--ink-soft); font-weight: 700; line-height: 1.25; }
.badge.locked .bn { color: var(--ink-soft); }

.medal .ribbon { fill: color-mix(in srgb, var(--accent) 55%, #6c86b8); }
.medal.tone-gold .medal-rim { fill: #E8B84B; } .medal.tone-gold .medal-face { fill: #F6D580; }
.medal.tone-silver .medal-rim { fill: #B9C4D0; } .medal.tone-silver .medal-face { fill: #DCE3EA; }
.medal.tone-bronze .medal-rim { fill: #C98A4E; } .medal.tone-bronze .medal-face { fill: #E6B183; }
.medal.tone-blue .medal-rim { fill: #6FA9D8; } .medal.tone-blue .medal-face { fill: #A9CEEB; }
.medal-glyph { font-size: 15px; fill: #4b3a1e; font-weight: 900; }

.mastery-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.mrow {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  background: var(--card); border-radius: 10px; padding: 8px 12px; font-size: 14px;
  border-left: 4px solid var(--line);
}
.mrow.partial { border-left-color: var(--warn); }
.mrow.done { border-left-color: var(--good); }
.mrow.genius { border-left-color: var(--accent); }
.mw { font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.ms { color: var(--amber-d); letter-spacing: 1px; }
.mn { color: var(--ink-soft); font-size: 12px; font-weight: 800; }

/* settings */
.opt {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm);
  font-weight: 700; font-size: 15px;
}
.opt input { width: 44px; height: 26px; accent-color: var(--accent); }
.opt-note { font-size: 12px; color: var(--ink-soft); margin: -4px 2px 2px; font-weight: 600; }
.seg { display: flex; gap: 6px; background: var(--card); border-radius: 14px; padding: 6px; box-shadow: var(--shadow-sm); }
.seg button { flex: 1; border: 0; background: transparent; color: var(--ink-soft); font-weight: 800; font-size: 14px; padding: 10px 6px; border-radius: 10px; }
.seg button.on { background: var(--accent); color: #fff; }

.how { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 600; }
.how-note { background: var(--card); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--ink-soft); box-shadow: var(--shadow-sm); font-weight: 600; }
.how-note b { color: var(--ink); }

/* ---------------- brand ---------------- */
.brand { display: flex; align-items: center; gap: 12px; }
.brand.hero { flex-direction: column; gap: 2px; }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1; align-items: center; }
.brand-text .b1 { font-weight: 900; color: var(--ink); }
.brand-text .b2 { font-weight: 800; letter-spacing: 5px; color: var(--accent-d); }
.brand.hero .brand-text .b1 { font-size: 30px; }
.brand.hero .brand-text .b2 { font-size: 20px; letter-spacing: 7px; margin-top: 1px; }
.brand.bar { gap: 9px; }
.brand.bar .brand-text { align-items: flex-start; }
.brand.bar .brand-text .b1 { font-size: 15px; }
.brand.bar .brand-text .b2 { font-size: 10px; letter-spacing: 3px; }
.brand-text .b3 {
  margin-top: 5px; font-size: 10px; font-weight: 900; letter-spacing: 3px; color: var(--ink-soft);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.brand.bar .brand-text .b3 { display: none; }

/* ---------------- toast + confetti ---------------- */
#toastLayer {
  position: fixed; left: 0; right: 0; bottom: calc(var(--appnav-h) + 18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 60;
}
body[data-route="classic"] #toastLayer, body[data-route="daily"] #toastLayer { bottom: 24px; }
.toast {
  background: var(--ink); color: var(--card); padding: 10px 18px; border-radius: 999px;
  font-weight: 800; font-size: 14px; opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease; max-width: 90vw; box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok { background: var(--good); color: #fff; }
.toast.bad { background: var(--bad); color: #fff; }
.toast.warn { background: var(--warn); color: #3a2c08; }

.confetti { position: absolute; top: -10px; width: 9px; height: 14px; border-radius: 2px; animation: fall 1.9s linear forwards; z-index: 3; pointer-events: none; }
@keyframes fall { to { transform: translateY(120vh) rotate(640deg); opacity: 0.9; } }

/* ---------------- owl svg ---------------- */
.owl { display: block; }
.owl-shadow { fill: var(--owl-shadow); }
.owl-body { fill: var(--owl-body); }
.owl-belly { fill: var(--owl-belly); }
.owl-wing, .owl-tuft { fill: var(--owl-wing); }
.owl-lens { fill: var(--owl-lens); }
.owl-frame { fill: none; stroke: var(--owl-frame); stroke-width: 3.4; }
.owl-frame-bridge { stroke: var(--owl-frame); stroke-width: 3.4; stroke-linecap: round; }
.owl-beak { fill: var(--owl-beak); }
.owl-foot { fill: none; stroke: var(--owl-foot); stroke-width: 2.6; stroke-linecap: round; }

/* backdrop svg */
.hill-1 { fill: var(--hill-1); }
.hill-2 { fill: var(--hill-2); }
.hill-3 { fill: var(--hill-3); }
.bd-tree rect { fill: color-mix(in srgb, var(--hill-1) 70%, #6b4a2e); }
.bd-tree circle { fill: color-mix(in srgb, var(--hill-1) 78%, #2f6b46); }
.bd-tile rect { fill: color-mix(in srgb, var(--tile) 80%, #fff); }
.bd-tile text { fill: var(--tile-ink); font-size: 6px; font-weight: 900; font-family: var(--font); }

/* desktop: home two-up */
@media (min-width: 900px) {
  body[data-route="menu"] #app { max-width: 860px; }
  body[data-route="menu"] .menu {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px 24px;
    grid-template-areas: "scene scene" "daily progress" "classic progress" "grid grid" "foot foot" "bringer bringer";
    align-items: start;
  }
  .menu-scene { grid-area: scene; }
  .menu > .tag { grid-area: scene; align-self: end; margin-bottom: 0; }
  .daily-card { grid-area: daily; }
  .classic-card { grid-area: classic; }
  .menu-grid { grid-area: grid; grid-template-columns: repeat(4, 1fr); }
  .menu .foot { grid-area: foot; }
  .menu .bringer { grid-area: bringer; }
  .menu .progress-peek { grid-area: progress; }
}
.progress-peek { display: none; }
@media (min-width: 900px) {
  .progress-peek {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
  }
  .progress-peek h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); font-weight: 900; }
  .progress-peek .donut { width: 130px; height: 130px; align-self: center; }
}