:root {
  --bg: #16130f; --panel: #221d17; --panel2: #2b251d; --line: #3a3127;
  --ink: #efe6d6; --muted: #a8998a; --accent: #e0a64b; --accent-ink: #1b1409;
  --hp: #d9534f; --hp-bg: #3b1f1d; --xp: #6fb3e0; --xp-bg: #1d2b36;
  --good: #7fbf6a; --boss: #b07cd8; --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
body.th_forest { --bg: #0f1511; --panel: #17211a; --panel2: #1e2b22; --line: #2c3d31; --accent: #8fcf6a; --accent-ink: #0d1a08; }
body.th_ice    { --bg: #0e1319; --panel: #161e27; --panel2: #1d2833; --line: #2b3a4a; --accent: #7cc6ee; --accent-ink: #07161f; }
body.th_gold   { --bg: #17130a; --panel: #231c0d; --panel2: #2e2511; --line: #4a3b18; --accent: #f3c94a; --accent-ink: #1d1604; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.4 var(--font); }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); min-height: 100vh; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
.loading { padding: 48px 16px; text-align: center; color: var(--muted); }

/* ── шапка ─────────────────────────────── */
#top { position: sticky; top: 0; z-index: 5; background: linear-gradient(var(--bg) 80%, transparent);
       padding: 10px 14px 12px; }
.tophead { display: flex; align-items: center; gap: 10px; }
.tophead .who { flex: 1; min-width: 0; }
.tophead .name { font-family: var(--serif); font-weight: bold; font-size: 16px; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
.tophead .sub { color: var(--muted); font-size: 12px; }
.pill { background: var(--panel2); border: 1px solid var(--line); border-radius: 99px; padding: 3px 9px;
        font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bars { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.bar { position: relative; height: 18px; border-radius: 9px; overflow: hidden; background: var(--hp-bg); }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--hp); border-radius: 9px; transition: width .4s; }
.bar > b { position: relative; display: block; text-align: center; font-size: 11px; line-height: 18px;
           font-weight: 600; text-shadow: 0 1px 2px #0008; font-variant-numeric: tabular-nums; }
.bar.xp { background: var(--xp-bg); } .bar.xp > i { background: var(--xp); }
.bar.boss { background: #2a1d33; } .bar.boss > i { background: var(--boss); }
.bar.big { height: 24px; border-radius: 12px; } .bar.big > b { line-height: 24px; font-size: 13px; }

/* ── вкладки ───────────────────────────── */
#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; background: var(--panel);
        border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
#tabs button { flex: 1; background: none; border: 0; padding: 7px 0 8px; font-size: 11px; color: var(--muted);
               display: flex; flex-direction: column; align-items: center; gap: 1px; }
#tabs button span { font-size: 19px; }
#tabs button.on { color: var(--accent); }
#tabs button[data-tab="settings"] { flex: .6; }

main { padding: 0 14px 20px; }
h2 { font-family: var(--serif); font-size: 18px; margin: 18px 2px 8px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 2px 6px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.card + .card { margin-top: 10px; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 8px 14px;
       font-weight: 600; white-space: nowrap; }
.btn.ghost { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }
.btn:disabled { opacity: .45; cursor: default; }
.bruno { font-family: var(--serif); font-style: italic; color: var(--muted); margin: 6px 2px 0; }

/* ── день и квесты ─────────────────────── */
.dayhead { display: flex; align-items: center; gap: 12px; }
.dayhead .ic { font-size: 30px; }
.dayhead .t { font-family: var(--serif); font-size: 19px; font-weight: bold; }
.progress { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); }
.q { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel);
     border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; transition: opacity .2s, transform .1s; }
.q:active { transform: scale(.99); }
.q .box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); flex: none;
          display: grid; place-items: center; font-size: 15px; background: var(--panel2); }
.q.done { opacity: .6; } .q.done .box { background: var(--good); border-color: var(--good); color: #0c1a08; }
.q.done .title { text-decoration: line-through; text-decoration-color: #fff5; }
.q.missed .box { background: var(--hp); border-color: var(--hp); }
.q .title { font-weight: 500; }
.q .meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1px; }
.q .dmg { color: var(--hp); font-weight: 600; }
.q .hint { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 3px; }
.q.redeem { border-style: dashed; border-color: var(--accent); }
.empty { text-align: center; color: var(--muted); padding: 18px; }

/* ── босс ──────────────────────────────── */
.boss-hero { text-align: center; padding: 18px 14px; }
.boss-hero .em { font-size: 72px; line-height: 1; filter: drop-shadow(0 6px 14px #0009); }
.boss-hero .em.dead { filter: grayscale(1) opacity(.5); transform: rotate(-12deg); }
.boss-hero .nm { font-family: var(--serif); font-size: 22px; font-weight: bold; margin: 8px 0 4px; }
.boss-hero .lore { color: var(--muted); font-style: italic; font-family: var(--serif); margin: 0 0 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.chip { font-size: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 99px; padding: 3px 9px; }

/* ── герой ─────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.stat b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; color: var(--muted); }
.sched { display: grid; gap: 6px; }
.sched .d { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line);
            border-radius: 12px; padding: 8px 10px; }
.sched .d.today { border-color: var(--accent); }
.sched .date { width: 54px; font-variant-numeric: tabular-nums; }
.sched .date small { display: block; color: var(--muted); font-size: 11px; }
select { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
         padding: 5px 6px; font: inherit; font-size: 13px; }

/* ── лавка ─────────────────────────────── */
.item { display: flex; align-items: center; gap: 12px; }
.item + .item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.item .em { font-size: 28px; width: 36px; text-align: center; flex: none; }
.item .price { font-variant-numeric: tabular-nums; }
.form { display: flex; gap: 8px; margin-top: 12px; }
.form input { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
              padding: 8px 10px; min-width: 0; }
.form input[type=number] { width: 90px; flex: none; }

/* ── хроника / настройки ───────────────── */
.log { font-size: 14px; }
.log .e { padding: 8px 0; border-bottom: 1px solid var(--line); white-space: pre-wrap; }
.log .e small { display: block; color: var(--muted); font-size: 11px; }
.set { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.set + .set { border-top: 1px solid var(--line); }
.set input.hhmm, .set input[type=number] { background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
             border-radius: 8px; padding: 6px 4px; width: 62px; text-align: center; font-variant-numeric: tabular-nums; }
.set input[type=number] { width: 58px; }
.switch { width: 46px; height: 28px; border-radius: 14px; background: var(--line); border: 0; position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
                 background: var(--ink); transition: left .2s; }
.switch.on { background: var(--accent); } .switch.on::after { left: 21px; background: var(--accent-ink); }

/* ── тосты ─────────────────────────────── */
#toasts { position: fixed; left: 12px; right: 12px; top: 10px; z-index: 20; display: grid; gap: 6px; pointer-events: none; }
.toast { pointer-events: auto; }
.toast { background: var(--panel2); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px;
         box-shadow: 0 8px 24px #000a; animation: tin .25s ease-out; white-space: pre-wrap; }
.toast.err { border-color: var(--hp); }
@keyframes tin { from { transform: translateY(-10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── анимированные эмодзи ──────────────── */
img.ae { width: 1.15em; height: 1.15em; vertical-align: -.2em; object-fit: contain; pointer-events: none; }
#tabs button span img.ae { width: 22px; height: 22px; display: block; vertical-align: 0; }
.boss-hero .em img.ae { width: 84px; height: 84px; }

/* ── CSS-движение для эмодзи без анимированной версии (как у Бьянки) ── */
.se { display: inline-block; transform-origin: 50% 80%; }
.se-float { animation: se-float 4s ease-in-out infinite; }
.se-coin { animation: se-coin 3.4s ease-in-out infinite; }
.se-tip { animation: se-tip 4.2s ease-in-out infinite; transform-origin: 30% 90%; }
.se-glint { animation: se-glint 2.8s ease-in-out infinite; }
.se-sway { animation: se-sway 2.6s ease-in-out infinite; }
.se-clash { animation: se-clash 3.2s ease-in-out infinite; }
#tabs button span.pop { animation: tabpop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes se-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes se-coin { 0%, 68%, 100% { transform: translateY(0) rotate(0); } 76% { transform: translateY(-5px) rotate(-10deg); }
  84% { transform: translateY(0) rotate(7deg); } 90% { transform: translateY(-1px) rotate(-3deg); } }
@keyframes se-tip { 0%, 72%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-5px) rotate(-14deg); }
  88% { transform: translateY(-2px) rotate(-10deg); } 95% { transform: translateY(0) rotate(0); } }
@keyframes se-glint { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.08); filter: brightness(1.3) saturate(1.2); } }
@keyframes se-sway { 0%, 100% { transform: rotate(-4deg) translateY(0); } 25% { transform: rotate(0) translateY(-3px); }
  50% { transform: rotate(4deg) translateY(0); } 75% { transform: rotate(0) translateY(-3px); } }
@keyframes se-clash { 0%, 76%, 100% { transform: rotate(0) scale(1); } 82% { transform: rotate(-14deg) scale(1.12); }
  88% { transform: rotate(10deg) scale(1.08); } 94% { transform: rotate(-4deg) scale(1); } }
@keyframes tabpop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }