/* Life Quest — styles.
   Deliberately one theme: a lofi, night-time game world (every color is painted explicitly,
   so the page holds on any host background). The pixel art lives in the pictures;
   all text is set in IBM Plex Sans (labels, titles, numbers) and IBM Plex Mono (small data). */

:root {
  color-scheme: dark;
  --bg: #0b0c13;
  --panel: #141622;
  --card: #1a1d2b;
  --raised: #232739;
  --sunken: #0e0f18;
  --line: #23273a;
  --line-2: #373c56;
  --ink: #eceaf6;
  --ink-2: #b3b3c9;
  --ink-3: #7d7f9a;
  --gold: #f5c451;
  --gold-2: #ffe08e;
  --gold-3: #b8862c;
  --gold-bg: #2a220f;
  --on-gold: #1d1505;
  --good: #3ecf7a;
  --good-2: #1f8a52;
  --good-bg: #10281c;
  --warn: #ffb547;
  --bad: #ff6272;
  --bad-bg: #2a1119;
  --bad-line: #52202c;
  --info: #5aa9ff;
  --info-bg: #101c2e;
  --info-line: #23405f;
  --focus: #8fd8ff;
  --c-fit: #d95926;
  --c-learn: #c98500;
  --r: 6px;
  --r-lg: 10px;
  --gutter: 16px;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-label: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (min-width: 720px) { :root { --gutter: 24px; } }

/* ---------- base ---------- */
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(1200px 600px at 70% -10%, #171633 0%, transparent 60%), var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
body.has-modal { overflow: hidden; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0 0 8px; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--gold-2); }
img { max-width: 100%; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.neg { color: var(--bad); }
.pos { color: var(--gold); }
.grow { flex: 1 1 auto; }
.wrap { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }

.ico { width: 18px; height: 18px; flex: none; fill: currentColor; display: inline-block; vertical-align: middle; shape-rendering: crispEdges; }

/* ---------- banner ---------- */
.banner { position: relative; height: clamp(150px, 19vw, 232px); overflow: hidden; background: #090a1c; }
#banner-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.banner-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 12, 19, 0) 40%, rgba(11, 12, 19, .55) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgba(8, 8, 20, .6), rgba(8, 8, 20, 0) 55%);
}
.banner-content { position: absolute; inset: auto 0 0 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; padding-bottom: 14px; }
.banner-kicker { margin: 0 0 8px; font: 600 11.5px/1.3 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.banner-title {
  margin: 0; font: 700 clamp(38px, 5.6vw, 68px)/.95 var(--f-display); letter-spacing: -.02em;
  color: #fff3d6; text-shadow: 0 2px 0 #3a1f5e, 0 10px 30px rgba(0, 0, 0, .55);
}
.sync {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font: 400 11.5px/1 var(--f-mono); color: var(--ink-2);
  background: rgba(8, 9, 16, .72); padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line);
}
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.sync[data-state="saved"] .sync-dot { background: var(--good); }
.sync[data-state="local"] .sync-dot { background: var(--info); }
.sync[data-state="saving"] .sync-dot, .sync[data-state="loading"] .sync-dot { background: var(--gold); animation: blink .8s steps(2) infinite; }
.sync[data-state="error"] .sync-dot, .sync[data-state="offline"] .sync-dot { background: var(--bad); }

/* ---------- menu bar ---------- */
.menu { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(11, 12, 19, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.menu-inner { display: flex; align-items: center; gap: 12px; min-height: 54px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; padding-block: 8px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: none; border: 0; border-radius: 4px; cursor: pointer;
  color: var(--ink-3); font: 600 12px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase;
}
.tab:hover { color: var(--ink); background: var(--raised); }
.tab[aria-selected="true"] { color: var(--ink); background: var(--card); box-shadow: inset 0 -3px 0 var(--gold); }
.tab[aria-selected="true"] .ico { color: var(--gold); }
.hud-mini { flex: none; display: flex; align-items: center; gap: 10px; }
.hud-lv { font: 600 11.5px/1 var(--f-label); letter-spacing: .08em; color: var(--on-gold); background: var(--gold); padding: 5px 6px; }
.hud-xp { width: 96px; }
.hud-gold { display: inline-flex; align-items: center; gap: 5px; font: 500 12.5px/1 var(--f-mono); color: var(--gold); }
.hud-gold .ico { width: 12px; height: 12px; }
.hud-gold.neg { color: var(--bad); }
.hud-timer {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; cursor: pointer;
  font: 500 12.5px/1 var(--f-mono); color: var(--ink); background: var(--raised); border: 1px solid var(--line-2); border-radius: 999px;
}
.hud-timer .ico { width: 12px; height: 12px; color: var(--gold); }
.hud-help { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer; }
.hud-help:hover { color: var(--gold); background: var(--raised); }
@media (max-width: 760px) { .hud-xp { display: none; } }
@media (max-width: 460px) { .hud-lv { display: none; } .tab { padding: 9px 10px; gap: 6px; } }

/* ---------- page layout ---------- */
.layout { display: flex; flex-direction: column; gap: 16px; padding-block: 18px 40px; }
.main { container: main / inline-size; min-width: 0; outline: none; }
.side { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 1000px) {
  .layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
}
@media (min-width: 1440px) { .layout { grid-template-columns: 324px minmax(0, 1fr); } }
@media (max-width: 999px) {
  .side { display: contents; }
  #status { order: 1; }
  .main { order: 2; }
  #pomo { order: 3; }

  body:not([data-tab="hq"]) .side > * { display: none; }
}
.stack { display: grid; gap: 16px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-block: 18px 40px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }

/* ---------- panels ---------- */
.panel { container: panel / inline-size; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; scroll-margin-top: 72px; }
.ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 14px; }
.ph-title {
  display: inline-flex; align-items: center; gap: 10px; margin: 2px; padding: 7px 12px 7px 10px;
  font: 600 12px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  background: var(--sunken);
  box-shadow: 0 -2px 0 0 var(--line-2), 0 2px 0 0 var(--line-2), -2px 0 0 0 var(--line-2), 2px 0 0 0 var(--line-2);
}
.ph-title .ico { color: var(--gold); }
.fold-btn { cursor: pointer; border: 0; }
.fold-btn:hover { color: var(--gold-2); }
.fold-chev { width: 14px; height: 14px; margin-left: 2px; color: var(--ink-3); transition: transform .18s ease; }
.panel.fold.is-open .fold-chev { transform: rotate(180deg); }
.panel.fold:not(.is-open) { padding-bottom: 10px; }
.panel.fold:not(.is-open) .ph { margin-bottom: 0; }
.fold-body { margin-top: 2px; }
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ph-sub { margin: -4px 0 14px; color: var(--ink-3); font-size: 13px; }

/* Panel guides: the note a section shows the first time, and the (i) that brings it back. */
.phelp { margin: 0 0 14px; padding: 11px 13px; background: var(--info-bg); border: 1px solid var(--info-line); border-left: 3px solid var(--info); border-radius: var(--r); }
.phelp[hidden] { display: none; }
.phelp-t { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--info); font-family: var(--f-label); font-size: 13px; font-weight: 600; }
.phelp-t .ico { width: 15px; height: 15px; flex: none; }
.phelp-l { display: grid; gap: 5px; margin: 0; padding-left: 17px; }
.phelp-l li { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.phelp-l li::marker { color: var(--info); }
.phelp-f { display: flex; justify-content: flex-end; margin-top: 9px; }
.help-btn { color: var(--ink-3); }
.help-btn:hover { color: var(--info); }

/* The line that announces a new hero aura on level up, and the Advisor's review lists. */
.lu-aura { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 6px 0 0; color: var(--gold-2); font-size: 13px; }
.lu-aura .ico { width: 15px; height: 15px; }
.plan-notes { display: grid; gap: 5px; margin: 0 0 10px; padding-left: 17px; }
.plan-notes li { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.plan-notes li::marker { color: var(--gold-3); }
.sublabel { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font: 600 11px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sublabel .ico { width: 12px; height: 12px; }
.kicker { margin: 0; font: 600 11px/1.3 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.empty { display: grid; justify-items: start; gap: 6px; padding: 18px; border: 1px dashed var(--line-2); border-radius: 8px; }
.empty-t { margin: 0; font-weight: 600; }
.empty-s { margin: 0 0 6px; color: var(--ink-3); font-size: 13px; }
.more { margin: 12px 0 0; }
.row-end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin: 0; }
.row-gap { display: flex; align-items: center; gap: 8px; }
.row-gap.wraps { flex-wrap: wrap; }
.hscroll { overflow-x: auto; margin: -4px; padding: 4px 4px 10px; scrollbar-color: var(--line-2) transparent; }
.table-wrap { overflow-x: auto; scrollbar-color: var(--line-2) transparent; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; }
.plain-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.plain-list li > .ico { color: var(--ink-3); }
.plain-list li > span:first-of-type { margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  --bc: var(--line-2); --bb: var(--raised);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; margin: 2px; padding: 0 14px;
  font: 600 13px/1.1 var(--f-body); color: var(--ink); background: var(--bb);
  border: 0; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 -2px 0 0 var(--bc), 0 2px 0 0 var(--bc), -2px 0 0 0 var(--bc), 2px 0 0 0 var(--bc), 0 5px 0 0 rgba(0, 0, 0, .45);
}
.btn:hover { filter: brightness(1.12); }
.btn:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 -2px 0 0 var(--bc), 0 2px 0 0 var(--bc), -2px 0 0 0 var(--bc), 2px 0 0 0 var(--bc); }
.btn:focus-visible { outline-offset: 5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.btn.primary { --bb: var(--gold); --bc: var(--gold-3); color: var(--on-gold); }
.btn.ghost { --bb: transparent; color: var(--ink-2); box-shadow: 0 -2px 0 0 var(--bc), 0 2px 0 0 var(--bc), -2px 0 0 0 var(--bc), 2px 0 0 0 var(--bc); }
.btn.ghost:hover { --bb: var(--raised); color: var(--ink); filter: none; }
.btn.danger { --bb: #3a1520; --bc: #8a2e3e; color: #ffd6db; }
.btn.danger-ghost { --bb: transparent; --bc: var(--bad-line); color: var(--bad); box-shadow: 0 -2px 0 0 var(--bc), 0 2px 0 0 var(--bc), -2px 0 0 0 var(--bc), 2px 0 0 0 var(--bc); }
.btn.danger-ghost:hover { --bb: var(--bad-bg); filter: none; }
.btn.done { --bb: var(--good-bg); --bc: var(--good-2); color: var(--good); }
.btn.sm { min-height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; }
.btn.sm .ico { width: 12px; height: 12px; }
.btn.big { min-height: 46px; padding: 0 22px; font-size: 15px; }
.btn.block { display: flex; width: calc(100% - 4px); }
.btn.grow { flex: 1 1 auto; }
.icon-btn { width: 32px; min-height: 32px; padding: 0; margin: 0; border-radius: 6px; box-shadow: none !important; color: var(--ink-3); }
.icon-btn:hover { background: var(--raised); color: var(--ink); }
.icon-btn:active { transform: none; }
.icon-btn.corner { position: absolute; top: 6px; right: 6px; background: rgba(8, 9, 16, .62); color: var(--ink); }
.linkish { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.linkish:hover { text-decoration-color: currentColor; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--focus); outline-offset: 5px; }

.check {
  flex: none; width: 26px; height: 26px; margin: 2px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--sunken); color: transparent; border: 0;
  box-shadow: 0 -2px 0 0 var(--line-2), 0 2px 0 0 var(--line-2), -2px 0 0 0 var(--line-2), 2px 0 0 0 var(--line-2);
}
.check .ico { width: 18px; height: 18px; }
.check:hover { color: rgba(62, 207, 122, .55); box-shadow: 0 -2px 0 0 var(--good-2), 0 2px 0 0 var(--good-2), -2px 0 0 0 var(--good-2), 2px 0 0 0 var(--good-2); }
.check.on { background: var(--good); color: #082014; box-shadow: 0 -2px 0 0 var(--good-2), 0 2px 0 0 var(--good-2), -2px 0 0 0 var(--good-2), 2px 0 0 0 var(--good-2); }
.check.sm { width: 22px; height: 22px; }
.check.sm .ico { width: 12px; height: 12px; }
.check:focus-visible { outline-offset: 5px; }

/* ---------- chips, meters ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { display: none; }
.chip.icon-only { padding: 3px 5px; color: var(--ink-3); }
.prio-dot { flex: none; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 2px; background: var(--pc); vertical-align: 1px; }
.badge-warn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad); font-size: 12.5px; font-weight: 600; }
.badge-warn .ico { width: 12px; height: 12px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 3px; background: var(--raised); color: var(--ink-2); font-size: 11.5px; line-height: 1.25; white-space: nowrap; }
.chip .ico { width: 12px; height: 12px; }
.chip.area .sw { width: 8px; height: 8px; border-radius: 1px; background: var(--c); }
.chip.type { color: var(--gold-2); }
.chip.ex { background: transparent; border: 1px dashed var(--line-2); color: var(--ink-3); }
.prio-high { --pc: var(--bad); }
.prio-medium { --pc: var(--warn); }
.prio-low { --pc: var(--info); }
.chip.prio .ico { color: var(--pc); }
.chip.st .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); }
.st-todo { --sc: var(--ink-3); }
.st-doing { --sc: var(--info); }
.st-done { --sc: var(--good); }
.p-high { --pc: var(--bad); }
.p-medium { --pc: var(--warn); }
.p-low { --pc: var(--info); }
.xp-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 3px; background: var(--gold-bg); color: var(--gold); font: 500 11.5px/1.35 var(--f-mono); white-space: nowrap; }
.xp-chip.got { background: var(--good-bg); color: var(--good); }
.i-gold { color: var(--gold); }
.i-fire { color: #ff8a3d; }

.meter { --c: var(--gold); position: relative; height: 8px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, var(--sunken)); }
.meter > i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--c); transition: width .5s steps(8, end); }
.meter.xpbar { height: 14px; margin: 2px; border-radius: 0; overflow: visible; background: #2b220d; box-shadow: 0 -2px 0 0 #06070c, 0 2px 0 0 #06070c, -2px 0 0 0 #06070c, 2px 0 0 0 #06070c; }
.meter.xpbar > i { background: linear-gradient(180deg, #fff2c2 0 3px, var(--gold) 3px 9px, #d9982e 9px); }
.meter.xpbar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0, 0, 0, .55) calc(10% - 2px) 10%); }
.meter.xpbar.mini { height: 8px; }
.meter.xpbar.mini > i { background: var(--gold); }

/* ---------- covers ---------- */
.cover { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; image-rendering: pixelated; background: #11131d; user-select: none; }
.cover.slim { aspect-ratio: 4 / 1; object-position: center 62%; }
.cover.dim { filter: saturate(.7) brightness(.8); }

/* ---------- status window ---------- */
.hero-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 16px; }
.portrait { position: relative; width: 84px; height: 84px; margin: 2px; overflow: hidden; box-shadow: 0 -2px 0 0 var(--line-2), 0 2px 0 0 var(--line-2), -2px 0 0 0 var(--line-2), 2px 0 0 0 var(--line-2); }
.portrait .cover, .sheet-portrait .cover { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.sprite { image-rendering: pixelated; }
.portrait .sprite { position: absolute; left: 50%; bottom: 3px; width: 56px; height: 56px; transform: translateX(-50%); animation: bob 1.6s steps(2) infinite; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.hero-name { margin: 0; font: 700 20px/1.1 var(--f-display); overflow-wrap: anywhere; }
.hero-class { margin: 5px 0; font: 600 12.5px/1.3 var(--f-label); color: var(--gold-2); }
.hero-perk { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--ink-3); }
.hero-perk .ico { width: 12px; height: 12px; color: var(--gold); }
.lv-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.lv-badge {
  display: inline-grid; justify-items: center; align-content: center; min-width: 48px; height: 48px; margin: 2px; padding: 0 6px;
  background: var(--gold); color: var(--on-gold); font: 700 22px/1 var(--f-display);
  box-shadow: 0 -2px 0 0 var(--gold-3), 0 2px 0 0 var(--gold-3), -2px 0 0 0 var(--gold-3), 2px 0 0 0 var(--gold-3), 0 5px 0 0 rgba(0, 0, 0, .45);
}
.lv-badge small { font: 600 9.5px/1 var(--f-label); letter-spacing: .12em; margin-bottom: 2px; }
.lv-text { margin: 6px 0 0; font: 400 12px/1.4 var(--f-mono); color: var(--ink-3); }
.lv-text b { color: var(--ink); font-weight: 500; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 12px; }
.stats3 div { min-width: 0; padding: 8px 10px; border-radius: 6px; background: var(--sunken); }
.stats3 dt, .hstats dt { font: 500 12px/1.3 var(--f-label); color: var(--ink-3); }
.stats3 dd { display: flex; align-items: center; gap: 5px; margin: 3px 0 0; font: 600 15px/1.2 var(--f-body); white-space: nowrap; }
.stats3 dd .ico { width: 12px; height: 12px; }
.checked { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 10px; border-radius: 6px; background: var(--good-bg); color: var(--good); font-size: 12.5px; }
.checked .ico { width: 12px; height: 12px; }
.today-meters { display: grid; gap: 10px; margin-top: 14px; }
.today-meters div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.today-meters b { font: 500 12px var(--f-mono); color: var(--ink); }
.today-meters .meter { grid-column: 1 / -1; }
.overdue { margin-top: 14px; padding: 10px 12px; border-radius: 6px; background: var(--bad-bg); border: 1px solid var(--bad-line); }
.overdue-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--bad); }
.overdue-h .ico { width: 12px; height: 12px; }
.overdue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.overdue li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.overdue li span { flex: none; color: #ff9aa5; font: 400 11px var(--f-mono); }

/* time batteries */
.timerow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.tcell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; align-items: baseline; }
.t-l { font-size: 12px; color: var(--ink-3); }
.t-v { font: 500 12px var(--f-mono); color: var(--ink-2); }
.t-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.t-bar i { display: block; height: 100%; background: var(--ink-3); }

/* focus timer */
.pomo-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.pmode { padding: 7px 4px; border-radius: 4px; border: 1px solid var(--line); background: var(--sunken); color: var(--ink-3); font: 600 11.5px/1.2 var(--f-body); cursor: pointer; }
.pmode[aria-pressed="true"] { color: var(--ink); background: var(--raised); border-color: var(--line-2); }
.pomo-face {
  position: relative; padding: 22px 14px 14px; border-radius: 8px; text-align: center; overflow: hidden;
  background: linear-gradient(rgba(7, 8, 14, .45), rgba(7, 8, 14, .78)), var(--bgimg, #07080e) center / cover;
  image-rendering: pixelated; border: 1px solid var(--line);
}
.pomo-face.short, .pomo-face.long { border-color: var(--good-2); }
.pomo-time { font: 600 58px/1 var(--f-display); letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.pomo-track { height: 4px; margin-top: 16px; background: rgba(255, 255, 255, .1); }
.pomo-track i { display: block; height: 100%; width: 0; background: var(--gold); }
.pomo-face.short .pomo-track i, .pomo-face.long .pomo-track i { background: var(--good); }
.pomo-face.running .pomo-time { animation: glow 2s steps(2) infinite; }
.pomo-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.pomo-ctrl #pomo-go { flex: 1; }
.pomo-count { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.pomo-count .ico { width: 12px; height: 12px; color: var(--gold); }
.newwrap { position: relative; flex: none; }
.new-btn { margin: 0; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 210px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  display: grid; gap: 2px;
}
.pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink); font: 500 14px/1.2 var(--f-body); text-align: left; cursor: pointer;
}
.pop-item:hover, .pop-item:focus-visible { background: var(--raised); }
.pop-item .ico { color: var(--gold); }
.ai-btn .ico { color: var(--gold); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > span, .field > legend { padding: 0; font: 500 13px/1.3 var(--f-label); color: var(--ink-2); }
.field.compact { margin-top: 12px; }
.field.inline select { width: auto; padding-block: 6px; font-size: 13px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea {
  width: 100%; min-width: 0; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--sunken); color: var(--ink); font: 400 14px/1.4 var(--f-body);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 30px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237d7f9a' d='M5 8h2v2H5zm2 2h2v2H7zm2 2h2v2H9zm2 2h2v2h-2zm2-2h2v2h-2zm2-2h2v2h-2zm2-2h2v2h-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); outline: 1px solid var(--focus); outline-offset: 0; }
input[type="date"] { color-scheme: dark; }
input[type="range"] { width: 100%; accent-color: var(--gold); }
textarea { resize: vertical; }
textarea.code { font: 400 12px/1.5 var(--f-mono); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .field-row, .field-row.three { grid-template-columns: minmax(0, 1fr); } }
.check-field { display: flex; align-items: center; gap: 9px; min-height: 40px; font-size: 13.5px; cursor: pointer; }
.check-field input { width: 16px; height: 16px; flex: none; accent-color: var(--gold); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-opt, .icon-pick label, .scene-pick label, .swatches label, .class-pick label, .mood-opt { position: relative; }
.pill-opt input, .icon-pick input, .scene-pick input, .swatches input, .class-pick input, .mood-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pill-opt span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px; cursor: pointer; }
.pill-opt span .ico { width: 12px; height: 12px; color: var(--pc); }
.pill-opt input:checked + span { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 15%, transparent); color: var(--ink); }
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; max-height: 172px; overflow-y: auto; padding: 2px 4px 2px 2px; }
.icon-pick span { display: grid; place-items: center; height: 38px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; }
.icon-pick input:checked + span { border-color: var(--gold); background: var(--gold-bg); color: var(--gold); }
.scene-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.scene-pick label { display: grid; gap: 4px; cursor: pointer; font-size: 11.5px; color: var(--ink-3); }
.scene-pick img { width: 100%; aspect-ratio: 2 / 1; image-rendering: pixelated; border-radius: 4px; outline: 2px solid transparent; outline-offset: 1px; }
.scene-pick input:checked + img { outline-color: var(--gold); }
.scene-pick input:checked ~ span { color: var(--gold-2); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label > span { display: block; width: 30px; height: 30px; border-radius: 6px; background: var(--c); cursor: pointer; }
.swatches input:checked + span { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.class-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.class-card { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); text-align: center; cursor: pointer; }
.class-card img { width: 64px; height: 64px; image-rendering: pixelated; }
.class-card b { font: 700 16px/1.2 var(--f-display); }
.class-card small { font-size: 11.5px; color: var(--ink-3); }
.class-pick input:checked + .class-card { border-color: var(--gold); background: var(--gold-bg); box-shadow: 0 0 0 1px var(--gold); }
.pill-opt input:focus-visible + span, .icon-pick input:focus-visible + span, .scene-pick input:focus-visible + img,
.swatches input:focus-visible + span, .class-pick input:focus-visible + .class-card, .mood-opt input:focus-visible + .mood { outline: 2px solid var(--focus); outline-offset: 2px; }
.grade-field { display: none; }
.mform:has(#f-type option[value="exam"]:checked) .grade-field { display: grid; }

/* ---------- quest cards ---------- */
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; }
.qcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.qcard.tone-over { border-color: var(--bad-line); }
.qcard.tone-today { border-color: #4a3c19; }
.qcard-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.qcard-title { margin: 4px 0 0; font: 600 14.5px/1.35 var(--f-body); overflow-wrap: anywhere; }
.qcard.is-done .qcard-title { color: var(--ink-3); text-decoration: line-through; }
.qcard-edit { margin: -3px -4px 0 0; }
.qcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.due { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; font-size: 12px; color: var(--ink-3); }
.due .ico { width: 12px; height: 12px; }
.tone-over .due { color: var(--bad); }
.tone-today .due { color: var(--gold-2); }
.start { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--info); text-decoration: none; }
.start .ico { width: 12px; height: 12px; }
.qrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.qrow-t { flex: 1 1 150px; min-width: 0; font-size: 13.5px; text-decoration: none; overflow-wrap: anywhere; }
.qrow-t:hover { text-decoration: underline; }
.qrow.is-done .qrow-t { color: var(--ink-3); text-decoration: line-through; }
.qrow-c, .qrow-d { font-size: 12px; color: var(--ink-3); }
.qrow.tone-over .qrow-d { color: var(--bad); }
.qrow.tone-today .qrow-d { color: var(--gold-2); }
.empty-li { padding: 6px 2px; font-size: 13px; color: var(--ink-3); }

/* ---------- HQ ---------- */
.grid-hq { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "today" "habits" "skills" "week" "save" "shop" "log"; }
@container main (min-width: 680px) {
  .grid-hq { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "today today" "habits save" "skills skills" "week week" "shop log"; }
}
@container main (min-width: 940px) {
  .grid-hq { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "today today today today habits habits" "skills skills skills skills skills skills" "week week week week week week" "save save shop shop log log"; }
}
.area-today { grid-area: today; }
.area-habits { grid-area: habits; }
.area-skills { grid-area: skills; }
.area-week { grid-area: week; }
.area-save { grid-area: save; }
.area-shop { grid-area: shop; }
.area-log { grid-area: log; }

.hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hrow { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.hrow.bad { --c: var(--bad); grid-template-columns: auto minmax(0, 1fr) auto auto; }
.hrow-ico { display: grid; color: var(--c); }
.hrow-name { min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.hrow.is-done .hrow-name { color: var(--ink-3); text-decoration: line-through; }
.hrow-streak { display: inline-flex; align-items: center; gap: 2px; font: 600 12px var(--f-body); font-variant-numeric: tabular-nums; color: #ff8a3d; }
.hrow-streak .ico { width: 12px; height: 12px; }
.hrow-clean { font: 600 12px var(--f-body); font-variant-numeric: tabular-nums; color: var(--good); white-space: nowrap; }
.hrow.slipped .hrow-clean { color: var(--bad); }
.hrow .btn { margin: 2px; }

.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.skill { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.skill-body { display: grid; gap: 6px; padding: 10px 12px 12px; }
.skill h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 14px/1.25 var(--f-body); min-width: 0; }
.skill h3 .ico { color: var(--c); }
.skill h3 span { overflow-wrap: anywhere; }
.skill-lv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; font: 700 17px/1.1 var(--f-display); }
.skill-lv small { font: 400 11px var(--f-mono); color: var(--ink-3); }
.skill-xp { margin: 0; font: 400 11px var(--f-mono); color: var(--ink-3); }
.add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 12px; border: 1px dashed var(--line-2); border-radius: var(--r); background: transparent; color: var(--ink-3); font: 600 13px var(--f-body); cursor: pointer; }
.add-tile:hover { color: var(--ink); border-color: var(--gold-3); background: rgba(245, 196, 81, .04); }

.week { display: grid; grid-template-columns: repeat(7, minmax(116px, 1fr)); gap: 8px; min-width: 840px; }
.wday { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 156px; padding: 8px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.wday.is-today { border-color: var(--gold-3); background: linear-gradient(180deg, rgba(245, 196, 81, .09), transparent 60%), var(--card); }
.wday-h { display: flex; justify-content: space-between; align-items: baseline; }
.wday-h span { font: 600 11px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.wday-h b { font: 700 18px/1 var(--f-display); }
.wday.is-past .wday-h b { color: var(--ink-3); }
.wday ul { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.wq, .cal-q {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  width: 100%; padding: 4px 6px; border: 0; border-left: 3px solid var(--pc); border-radius: 3px;
  background: var(--raised); color: var(--ink); font-size: 12px; line-height: 1.3; text-align: left; cursor: pointer;
}
.wq.done, .cal-q.done { opacity: .55; text-decoration: line-through; }
.wmore, .cal-more { font-size: 11px; color: var(--ink-3); }
.wday-f { display: flex; justify-content: space-between; align-items: center; font: 400 11px var(--f-mono); color: var(--ink-3); }
.wday-f .pos { color: var(--gold); }
.wadd { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px dashed var(--line-2); border-radius: 4px; background: none; color: var(--ink-3); cursor: pointer; }
.wadd .ico { width: 12px; height: 12px; }
.wadd:hover { color: var(--ink); border-color: var(--gold-3); }

.sp-entry { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.sp-text { margin: 2px 0 4px; font-size: 14px; overflow-wrap: anywhere; }
.sp-entry .muted { margin: 0; font-size: 12px; }
.sp-form { display: grid; gap: 10px; }
.moods { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.moods legend { margin-bottom: 8px; padding: 0; font: 500 13px/1.3 var(--f-label); color: var(--ink-2); }
.mood { --mc: var(--ink-2); flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: color-mix(in srgb, var(--mc) 16%, var(--sunken)); color: var(--mc); cursor: pointer; }
.m1 { --mc: var(--bad); }
.m2 { --mc: var(--warn); }
.m3 { --mc: #b3b3c9; }
.m4 { --mc: var(--good); }
.m5 { --mc: var(--gold); }
.mood-opt input:checked + .mood { box-shadow: 0 0 0 2px var(--mc); background: color-mix(in srgb, var(--mc) 28%, var(--sunken)); }

.mini-shop { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-shop li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.ms-ico { display: grid; color: var(--gold-2); }
.ms-n { min-width: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.ms-c { display: inline-flex; align-items: center; gap: 4px; font: 500 12px var(--f-mono); color: var(--gold); }
.ms-c .ico { width: 12px; height: 12px; }

.alog { list-style: none; margin: 0; padding: 0; display: grid; }
.alog li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.alog li:last-child { border-bottom: 0; }
.al-t { font: 400 11px var(--f-mono); color: var(--ink-3); }
.al-text { overflow-wrap: anywhere; }
.al-v { font: 500 11.5px var(--f-mono); color: var(--gold); white-space: nowrap; }
.alog li.neg .al-v { color: var(--bad); }

/* ---------- quest board ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.toolbar-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 7px; background: var(--sunken); border: 1px solid var(--line); }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-3); font: 600 12.5px/1.2 var(--f-body); cursor: pointer; }
.seg-btn .ico { width: 12px; height: 12px; }
.seg-btn[aria-pressed="true"] { background: var(--raised); color: var(--ink); }
.seg-btn[aria-pressed="true"] .ico { color: var(--gold); }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font: 500 12.5px/1.2 var(--f-body); cursor: pointer; }
.fchip b { font: 500 11px var(--f-mono); color: var(--ink-3); }
.fchip:hover { border-color: var(--ink-3); color: var(--ink); }
.fchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fchip[aria-pressed="true"] b { color: var(--bg); }
.fchip.warn b { color: var(--bad); }

.cal-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cal-title { margin: 0 6px; min-width: 150px; text-align: center; font: 700 18px/1.2 var(--f-display); }
.cal { min-width: 680px; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow span { padding: 0 4px 6px; font: 600 11px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cal-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 100px; padding: 4px; border-radius: 4px; background: var(--card); border: 1px solid var(--line); }
.cal-cell.out { opacity: .45; }
.cal-cell.is-today { border-color: var(--gold-3); }
.cal-date { align-self: flex-start; padding: 2px 6px; border: 0; border-radius: 3px; background: none; color: var(--ink-2); font: 500 12px var(--f-mono); cursor: pointer; }
.cal-date:hover { background: var(--raised); color: var(--ink); }
.cal-cell.is-today .cal-date { background: var(--gold); color: var(--on-gold); }
.cal-q { font-size: 11.5px; }

.matrix { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@container panel (min-width: 620px) { .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quad { min-height: 150px; padding: 12px; border-radius: 6px; background: var(--sunken); border: 1px solid var(--line); }
.quad h3 { display: grid; gap: 4px; margin: 0 0 10px; font: 600 15px/1.3 var(--f-label); }
.quad h3 small { font: 400 12px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.q-do h3 { color: var(--bad); }
.q-plan h3 { color: var(--gold); }
.q-batch h3 { color: var(--info); }
.q-drop h3 { color: var(--ink-3); }

.mgrid, .cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.mcard, .ccard, .rcard, .hcard, .bcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.mcard-body, .ccard-body, .rcard-body { flex: 1; display: grid; gap: 10px; align-content: start; padding: 12px; }
.mcard h3, .ccard h3, .rcard h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 15px/1.3 var(--f-body); min-width: 0; }
.mcard h3, .ccard h3 span, .rcard h3 span { overflow-wrap: anywhere; }
.ccard h3 .ico { color: var(--c-learn); }
.rcard h3 .ico { color: var(--gold-2); }
.mnote { margin: 0; font-size: 13px; color: var(--ink-2); }
.mprog { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; font: 400 12px var(--f-mono); color: var(--ink-3); }
.cfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mcard.is-ready { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 26px -6px rgba(245, 196, 81, .5); }
.mcard.is-done .cover { filter: grayscale(.6) brightness(.75); }

/* ---------- habits ---------- */
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 14px; }
.hcard-body { display: grid; gap: 10px; padding: 12px; }
.hcard-head { display: flex; align-items: center; gap: 8px; }
.hcard-head h3 { flex: 1; min-width: 0; margin: 0; font: 600 15px/1.3 var(--f-body); overflow-wrap: anywhere; }
.hcard-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: color-mix(in srgb, var(--c) 22%, var(--sunken)); color: var(--c); }
.hcard-ico.bad { --c: var(--bad); }
.heat { display: grid; grid-template-columns: 12px repeat(var(--w), minmax(0, 1fr)); grid-template-rows: 13px repeat(7, auto); grid-auto-flow: column; gap: 2px; font: 400 9px/13px var(--f-mono); color: var(--ink-3); }
.heat > span { align-self: center; white-space: nowrap; }
.heat > i { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--c) 15%, var(--sunken)); }
.heat > i.on { background: var(--c); }
.heat > i.pre { background: rgba(255, 255, 255, .03); }
.heat > i.future { background: transparent; }
.heat > i.today:not(.on) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 75%, #fff); }
.hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.hstats div { min-width: 0; padding: 6px 8px; border-radius: 4px; background: var(--sunken); }
.hstats dd { display: flex; align-items: center; gap: 4px; margin: 3px 0 0; font: 600 13px/1.2 var(--f-body); white-space: nowrap; }
.hstats dd .ico { width: 12px; height: 12px; }
.clean-big { margin: 0; color: var(--ink-2); font-size: 13px; }
.clean-big b { margin-right: 4px; font: 700 30px/1 var(--f-display); color: var(--good); }
.bcard.slipped .clean-big b { color: var(--bad); }
.slips { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; }
.slips i { height: 10px; border-radius: 1px; background: color-mix(in srgb, var(--good) 24%, var(--sunken)); }
.slips i.slip { background: var(--bad); }
.slips i.pre { background: var(--sunken); }
.bcard .row-gap .btn { margin: 2px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.table thead th { font: 600 11px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.table tbody th { font-weight: 500; }
.table td { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tdot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--c); }

/* ---------- shop ---------- */
.purse { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; padding: 14px 16px; border-radius: 8px; border: 1px solid #3d3216; background: linear-gradient(90deg, var(--gold-bg), rgba(42, 34, 15, 0)); }
.purse-label { font: 600 11.5px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.purse-gold { display: inline-flex; align-items: center; gap: 10px; font: 700 42px/1 var(--f-display); letter-spacing: -.01em; color: var(--gold); }
.purse-gold .ico { width: 36px; height: 36px; }
.purse-gold.neg { color: var(--bad); }
.purse .muted { font-size: 13px; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 12px; }
.rcard.can { border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); }
.price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 700 19px/1.1 var(--f-display); color: var(--gold); }
.price .ico { width: 18px; height: 18px; }
.afford { display: grid; gap: 5px; }
.afford span { font: 400 11px var(--f-mono); color: var(--ink-3); }
.afford-ok { margin: 0; font-size: 12px; color: var(--good); }
.rcard-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.trophies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.trophies li { display: grid; gap: 8px; padding-bottom: 10px; overflow: hidden; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.trophies li > span { display: flex; align-items: center; gap: 8px; padding: 0 10px; font-weight: 600; }
.trophies li .btn { justify-self: start; margin: 2px 12px; }
.inv { list-style: none; margin: 0; padding: 0; display: grid; }
.inv li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.inv-ico { display: grid; color: var(--gold-2); }
.inv-n { overflow-wrap: anywhere; }
.inv .neg { font: 500 12px var(--f-mono); }

/* ---------- fitness ---------- */
.grid-fit { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "split" "workout" "lifts" "weight" "fh"; }
@container main (min-width: 760px) {
  .grid-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "split split" "workout lifts" "weight weight" "fh fh"; }
}
.area-split { grid-area: split; }
.area-workout { grid-area: workout; }
.area-lifts { grid-area: lifts; }
.area-weight { grid-area: weight; }
.area-fh { grid-area: fh; }
.split { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); gap: 8px; min-width: 950px; }
.split-day { min-width: 0; padding: 10px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.split-day.is-today { border-color: var(--gold-3); background: linear-gradient(180deg, rgba(245, 196, 81, .09), transparent 60%), var(--card); }
.split-day.rest { background: var(--sunken); }
.split-h { display: flex; justify-content: space-between; align-items: center; font: 600 11px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.split-h .icon-btn { width: 28px; min-height: 28px; }
.split-name { margin: 2px 0 8px; font: 700 17px/1.1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.split-day.rest .split-name { color: var(--ink-3); }
.split-day ul, .ex-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.split-day li { position: relative; padding-left: 10px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.split-day li::before { content: ""; position: absolute; left: 0; top: .55em; width: 4px; height: 4px; background: var(--c-fit); }
.big-name { margin: 2px 0 12px; font: 700 30px/1.05 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.ex-list { margin-bottom: 14px; }
.ex-list li { padding: 8px 10px; border-radius: 4px; background: var(--card); font-size: 13px; }
.lifts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lift { display: grid; gap: 6px; padding: 10px 12px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.lift-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lift-v { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin: 0; font-size: 12px; }
.lift-v .now { font: 700 21px/1.1 var(--f-display); }
.lift .btn { justify-self: start; }
.lifts + .add-tile { flex-direction: row; min-height: 46px; width: 100%; margin-top: 10px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tiles.four { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
.tile { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.tile-l { font: 500 12px/1.3 var(--f-label); color: var(--ink-3); }
.tile-v { font: 600 20px/1.2 var(--f-body); overflow-wrap: anywhere; }
.tile-s { font-size: 12px; color: var(--ink-3); }
.goal-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 14px 0 4px; font: 400 12px var(--f-mono); color: var(--ink-2); }

/* line chart (weight) */
.lchart { margin-top: 16px; padding-left: 42px; }
.lplot { position: relative; height: 176px; }
.lplot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lplot .grid { stroke: var(--line); stroke-width: 1; }
.lplot .goal { stroke: var(--good); stroke-width: 1.5; stroke-dasharray: 5 4; }
.lplot .area { fill: color-mix(in srgb, var(--c-fit) 12%, transparent); }
.lplot .line { fill: none; stroke: var(--c-fit); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ytick { position: absolute; left: -42px; width: 34px; transform: translateY(-50%); text-align: right; font: 400 11px var(--f-mono); color: var(--ink-3); }
.goal-label { position: absolute; right: 0; transform: translateY(-125%); font: 500 11px var(--f-mono); color: var(--good); }
.ldot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--c-fit); box-shadow: 0 0 0 2px var(--panel); transform: translate(-50%, -50%); pointer-events: none; }
.lhits { position: absolute; inset: 0; }
.lhits span { position: absolute; top: 0; bottom: 0; width: 18px; transform: translateX(-50%); outline: none; }
.lhits span::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-2); opacity: 0; }
.lhits em { position: absolute; top: -6px; left: 50%; z-index: 3; display: none; padding: 5px 8px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line-2); transform: translate(-50%, -100%); font: normal 400 12px var(--f-mono); color: var(--ink); white-space: nowrap; }
.lhits span:hover::before, .lhits span:focus-visible::before { opacity: 1; }
.lhits span:hover em, .lhits span:focus-visible em { display: block; }
.lhits span:first-child em { left: 0; transform: translateY(-100%); }
.lhits span:last-child em { left: auto; right: 0; transform: translateY(-100%); }
.lx { display: flex; justify-content: space-between; padding-top: 6px; font: 400 11px var(--f-mono); color: var(--ink-3); }

/* ---------- study ---------- */
.grid-2 { display: grid; gap: 16px; }
@container main (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.exams { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.exam { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.exam.soon { border-color: #4a3c19; }
.exam-n { display: grid; justify-items: center; padding: 6px 0; border-radius: 4px; background: var(--sunken); }
.exam-n b { font: 700 22px/1 var(--f-display); color: var(--gold); }
.exam-n small { font: 500 11px/1.4 var(--f-label); color: var(--ink-3); }
.exam-t { display: grid; gap: 2px; min-width: 0; }
.exam-t .linkish { font-weight: 600; overflow-wrap: anywhere; }
.exam-t small { font-size: 12px; color: var(--ink-3); }
.tt { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 4px; }
.tt th { padding: 4px 6px; font: 600 11px var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: left; white-space: nowrap; }
.tt tbody th { font: 400 12px var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.tt td { padding: 0; }
.tt-cell { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 42px; padding: 6px 8px; border-radius: 4px; border: 1px dashed var(--line-2); background: transparent; color: var(--ink-3); font-size: 12.5px; cursor: pointer; }
.tt-cell.has { justify-content: flex-start; border: 1px solid color-mix(in srgb, var(--c-learn) 45%, var(--line)); background: color-mix(in srgb, var(--c-learn) 12%, var(--card)); color: var(--ink); }
.tt-cell.has .ico { color: var(--c-learn); width: 12px; height: 12px; }
.tt-cell:hover { border-color: var(--gold-3); color: var(--ink); }

/* ---------- hero ---------- */
.grid-hero { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "sheet" "xp" "wheel" "skills" "ach" "journal" "settings"; }
@container main (min-width: 860px) {
  .grid-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "sheet sheet" "xp wheel" "skills skills" "ach ach" "journal settings"; }
}
.area-sheet { grid-area: sheet; }
.area-xp { grid-area: xp; }
.area-wheel { grid-area: wheel; }
.grid-hero .area-skills { grid-area: skills; }
.area-ach { grid-area: ach; }
.area-journal { grid-area: journal; }
.area-settings { grid-area: settings; }
.sheet { display: grid; gap: 16px; margin-bottom: 16px; }
@container panel (min-width: 560px) { .sheet { grid-template-columns: 196px minmax(0, 1fr); align-items: center; } }
.sheet-portrait { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1; overflow: hidden; border-radius: 8px; border: 1px solid var(--line-2); }
.sprite.xl { position: absolute; left: 50%; bottom: 6%; width: 58%; transform: translateX(-50%); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .45)); }
.sheet-id { display: grid; gap: 8px; justify-items: start; }
.sheet-id .meter { width: calc(100% - 4px); }
.sheet-name { margin: 0; font: 700 32px/1.05 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.sheet-lv { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink-2); }
.sheet-lv .lv-badge { min-width: 42px; height: 42px; font-size: 19px; }
.chart-sum { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.chart-sum b { color: var(--ink); }
.colchart { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 168px auto; column-gap: 8px; margin-top: 22px; }
.cc-y { position: relative; }
.cc-y span { position: absolute; right: 0; transform: translateY(50%); font: 400 11px var(--f-mono); color: var(--ink-3); }
.cc-plot { position: relative; border-bottom: 1px solid var(--line-2); }
.cc-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.cc-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.bcol { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; min-width: 0; outline: none; cursor: default; }
.bcol i { display: block; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--gold) 55%, var(--panel)); }
.bcol.today i { background: var(--gold); }
.bcol:hover i, .bcol:focus-visible i { background: var(--gold-2); }
.blabel { position: absolute; left: 50%; transform: translate(-50%, -4px); font: 500 11px var(--f-mono); color: var(--ink-2); white-space: nowrap; }
.tip { position: absolute; top: -8px; left: 50%; z-index: 3; display: none; padding: 5px 8px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line-2); transform: translate(-50%, -100%); font: normal 400 12px var(--f-mono); color: var(--ink); white-space: nowrap; }
.bcol:hover .tip, .bcol:focus-visible .tip { display: block; }
.bcol:nth-child(-n+4) .tip { left: 0; transform: translateY(-100%); }
.bcol:nth-last-child(-n+4) .tip { left: auto; right: 0; transform: translateY(-100%); }
.cc-x { grid-column: 2; display: flex; justify-content: space-between; padding-top: 6px; font: 400 11px var(--f-mono); color: var(--ink-3); }
.tview { margin-top: 12px; font-size: 13px; }
.tview summary { cursor: pointer; color: var(--ink-3); }
.tview .table-wrap { max-height: 240px; overflow-y: auto; margin-top: 8px; }
.wheel { display: grid; gap: 16px; }
@container panel (min-width: 640px) { .wheel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } }
.radar { display: block; width: 100%; max-width: 400px; height: auto; margin-inline: auto; overflow: visible; }
.radar .ring { fill: none; stroke: var(--line); stroke-width: 1; }
.radar .rprev { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.radar .rarea { fill: color-mix(in srgb, var(--gold) 16%, transparent); stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.radar .rdot { fill: var(--gold); stroke: var(--panel); stroke-width: 2; }
.radar .rlabel { fill: var(--ink-2); font: 400 12px var(--f-body); }
.radar .rval { fill: var(--ink); font-weight: 600; }
.wheel-form { display: grid; gap: 10px; }
.slider { display: grid; grid-template-columns: 110px minmax(0, 1fr) 24px; align-items: center; gap: 10px; }
.sl-n { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.sw { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.slider output { font: 500 13px var(--f-mono); text-align: right; }
.wheel-form .btn { justify-self: start; }
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.badge { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 2px; padding: 10px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.badge-ico { grid-row: 1 / span 3; display: grid; place-items: center; width: 40px; height: 40px; background: var(--gold-bg); color: var(--gold); box-shadow: 0 -2px 0 0 var(--gold-3), 0 2px 0 0 var(--gold-3), -2px 0 0 0 var(--gold-3), 2px 0 0 0 var(--gold-3); margin: 2px; }
.badge-ico .ico { width: 24px; height: 24px; }
.badge-name { font-size: 13px; font-weight: 600; }
.badge-desc { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.badge-foot { font: 400 11px var(--f-mono); color: var(--gold); }
.badge.locked { background: transparent; border-style: dashed; }
.badge.locked .badge-ico { background: var(--sunken); color: var(--ink-3); box-shadow: 0 -2px 0 0 var(--line-2), 0 2px 0 0 var(--line-2), -2px 0 0 0 var(--line-2), 2px 0 0 0 var(--line-2); }
.badge.locked .badge-name { color: var(--ink-2); }
.badge.locked .badge-desc { color: var(--ink-3); }
.badge.locked .badge-foot { color: var(--ink-3); }
.moodstrip { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; margin-bottom: 14px; }
.moodstrip i { height: 14px; border-radius: 2px; background: var(--sunken); }
.moodstrip i.m1, .moodstrip i.m2, .moodstrip i.m3, .moodstrip i.m4, .moodstrip i.m5 { background: var(--mc); }
.jlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 420px; overflow-y: auto; }
.jlist li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.jlist p { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.jlist .jdate { font: 400 11px var(--f-mono); color: var(--ink-3); }
.settings fieldset { display: grid; gap: 12px; margin: 0 0 12px; padding: 12px; border-radius: 8px; border: 1px solid var(--line); }
.settings legend { padding: 0 6px; font: 600 13px var(--f-label); color: var(--gold-2); }
.data-zone { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.data-zone h3 { margin: 0 0 6px; font: 600 15px var(--f-label); }

/* ---------- modals ---------- */
#modal-root { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(4, 5, 10, .74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: pop .2s steps(4) both; }
.modal.wide { width: min(760px, 100%); }
.mform { display: flex; flex-direction: column; }
.mhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.mhead h2 { margin: 0; font: 600 16px/1.3 var(--f-label); }
.mbody { display: grid; gap: 14px; padding: 16px; }
.mbody > p { margin: 0; color: var(--ink-2); }
.mfoot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; background: var(--panel); border-top: 1px solid var(--line); }
.mfoot .muted { font-size: 12px; max-width: 280px; }
.onboard .ob-hero { position: relative; }
.ob-cover { aspect-ratio: 3 / 1; }
.ob-title { position: absolute; left: 16px; bottom: 12px; }
.ob-title h2 { margin: 2px 0 0; font: 700 32px/1 var(--f-display); letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.npc { position: relative; overflow: hidden; border-radius: 8px; }
.npc-bg { aspect-ratio: 4 / 1; }
.npc-say { position: absolute; left: 12px; right: 12px; bottom: 10px; margin: 0; padding: 8px 11px; background: rgba(8, 9, 16, .88); box-shadow: 0 -2px 0 0 var(--gold-3), 0 2px 0 0 var(--gold-3), -2px 0 0 0 var(--gold-3), 2px 0 0 0 var(--gold-3); font-size: 13px; line-height: 1.4; }
.ai-out:empty { display: none; }
.thinking { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gold-2); animation: blink 1.2s steps(2) infinite; }
.ai-err { margin: 0; color: var(--bad); }
.plan { display: grid; gap: 10px; padding: 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--line-2); }
.plan-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.plan-h .ico { color: var(--gold); }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 8px; border-radius: 4px; background: var(--raised); }
.plan-list .check-field { flex: 1 1 220px; min-height: 34px; }

/* ---------- toasts, floating XP, level up ---------- */
.toasts { position: fixed; z-index: 70; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; width: min(390px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #161826; border: 1px solid var(--line-2); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); animation: toast-in .24s steps(4) both; transition: opacity .2s, transform .2s; }
.toast.gold { border-color: var(--gold-3); background: linear-gradient(90deg, #2a220f, #161826 65%); }
.toast.bad { border-color: var(--bad-line); }
.toast.out { opacity: 0; transform: translateY(6px); }
.toast-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--sunken); color: var(--gold); }
.toast.bad .toast-ico { color: var(--bad); }
.toast-body { flex: 1; min-width: 0; }
.toast-body p { margin: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.toast-body .toast-sub { font-size: 12px; font-weight: 400; color: var(--ink-3); }
@media (max-width: 640px) { .toasts { left: 16px; right: 16px; width: auto; } }
.fx-layer { position: fixed; inset: 0; z-index: 75; pointer-events: none; overflow: hidden; }
.fx { position: fixed; transform: translate(-50%, -100%); font: 700 16px/1 var(--f-display); color: var(--gold); text-shadow: 0 1px 0 #000, 0 2px 10px rgba(0, 0, 0, .8); white-space: nowrap; animation: fx-rise 1.25s steps(14) both; }
.fx.gold { color: var(--gold-2); }
.fx.neg { color: var(--bad); }
.spark { position: fixed; width: 4px; height: 4px; animation: spark .7s steps(7) both; }
#overlay-root { position: fixed; inset: 0; z-index: 80; }
.levelup { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(4, 4, 12, .86); }
.lu-burst { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.lu-card { position: relative; display: grid; justify-items: center; gap: 8px; width: min(360px, 100%); padding: 28px 28px 24px; text-align: center; background: var(--panel); box-shadow: 0 -4px 0 0 var(--gold), 0 4px 0 0 var(--gold), -4px 0 0 0 var(--gold), 4px 0 0 0 var(--gold), 0 10px 0 0 rgba(0, 0, 0, .5); animation: pop .35s steps(5) both; }
.lu-kicker { margin: 0; font: 600 14px var(--f-label); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); animation: blink .7s steps(2) 4; }
.lu-level { display: flex; align-items: baseline; gap: 8px; font: 700 92px/1 var(--f-display); letter-spacing: -.03em; color: var(--gold); text-shadow: 0 3px 0 #5a3f10; }
.lu-level small { font: 600 14px var(--f-label); color: var(--gold-2); text-shadow: none; }
.lu-sprite { width: 96px; height: 96px; }
.lu-text { margin: 0; font-size: 15px; }
.lu-card .muted { margin: 0; }

/* ---------- guided tour ---------- */
#tour-root { position: fixed; inset: 0; z-index: 65; }
.tour-shade { position: fixed; inset: 0; }
#tour-root.centered .tour-shade { background: rgba(4, 5, 10, .78); }
.tour-spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(4, 5, 10, .78); outline: 2px solid var(--gold); outline-offset: 2px;
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease;
}
#tour-root.centered .tour-spot { display: none; }
.tour-card {
  position: fixed; left: 50%; top: 50%; width: min(380px, calc(100vw - 24px)); padding: 14px 16px 16px;
  background: var(--panel); color: var(--ink);
  box-shadow: 0 -3px 0 0 var(--gold), 0 3px 0 0 var(--gold), -3px 0 0 0 var(--gold), 3px 0 0 0 var(--gold), 0 18px 44px rgba(0, 0, 0, .6);
  transition: left .3s ease, top .3s ease;
}
#tour-root.centered .tour-card { transform: translate(-50%, -50%); }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tour-count { font: 600 11px var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.tour-art { display: block; width: 64px; height: 64px; margin-bottom: 8px; }
.tour-body h2 { margin: 0 0 6px; font: 700 18px/1.25 var(--f-display); }
.tour-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.tour-list { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.tour-list li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.tour-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--gold); }
.tour-dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 12px; }
.tour-dots i { width: 10px; height: 6px; background: var(--line-2); }
.tour-dots i.past { background: var(--gold-3); }
.tour-dots i.on { background: var(--gold); }
.tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- motion ---------- */
@keyframes blink { 50% { opacity: .35; } }
@keyframes bob { 50% { transform: translate(-50%, -2px); } }
@keyframes glow { 50% { text-shadow: 0 2px 14px rgba(0, 0, 0, .6), 0 0 22px rgba(245, 196, 81, .35); } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fx-rise { 0% { opacity: 0; transform: translate(-50%, -40%); } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -300%); } }
@keyframes spark { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .fx { animation: none; opacity: 0; }
}