/* ─────────────────────────── Ashveil theme ─────────────────────────── */
/* Dark-fantasy: cold ash, ember warmth, a bleed of blood-red. */
:root {
  --bg: #0e0b09;
  --bg-2: #161210;
  --panel: #1c1714;
  --panel-2: #241d18;
  --line: #382c22;
  --line-2: #4a3a2c;
  --ink: #efe6d8;
  --ink-dim: #b0a190;
  --ink-faint: #9a8a73; /* D6: lifted for legible contrast on the dark background */
  --ember: #e8631c;
  --ember-2: #ffa53b;
  --gold: #e8b94e;
  --blood: #b23b3b;
  --hp: #d7444a;
  --stam: #5aa84a;
  --mana: #4f8fe0;
  --renown: #b07be0;
  --ok: #5aa84a;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  --r: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; max-width: 100%; overflow-x: hidden; }
/* Let flex children holding text shrink instead of forcing overflow. */
.card-row > div, .spread, .res, .navbtn, .sidebtn { min-width: 0; }
/* Grid/flex items default to min-width:auto and refuse to shrink below their
   content, overflowing the viewport - force them to be shrinkable. */
.grid > *, .page-cols > *, .card-row, .row > * { min-width: 0; }
h3, .muted, .page-sub { overflow-wrap: anywhere; }
body {
  background:
    radial-gradient(1100px 640px at 82% -12%, #2a160c 0%, transparent 55%),
    radial-gradient(900px 600px at 10% 110%, #1a0f0c 0%, transparent 50%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Faint grain/vignette overlay for texture. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url(/assets/texture.svg); background-size: 220px;
  opacity: 0.5; mix-blend-mode: overlay;
}
#auth, .shell, .dock, .toasts, .overlay { position: relative; z-index: 2; }
.hidden { display: none !important; }
h1, h2, h3 { font-family: Cinzel, serif; letter-spacing: 0.3px; }
/* Official Ashveil wordmark - the homepage's Cinzel Decorative logo, used everywhere. */
.deco, .brand h1, .topbar-title { font-family: "Cinzel Decorative", Cinzel, serif; font-weight: 900; letter-spacing: .04em; }
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

/* Icon = CSS mask so SVGs tint with `color`. */
.gicon {
  display: inline-block;
  width: 1.25em; height: 1.25em;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  flex: none;
  /* Centre inline icons with the text they sit beside (e.g. profile "⚔ 209 CP",
     recipe costs "🪙500"). Ignored in flex rows, so buttons/nav are unaffected. */
  vertical-align: middle;
}

/* ───────────────── Auth ───────────────── */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.auth-card {
  width: min(440px, 100%);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 28px;
}
.brand { text-align: center; margin-bottom: 18px; }
.brand-icon { font-size: 44px; color: var(--ember); filter: drop-shadow(0 0 14px rgba(255, 122, 24, 0.5)); }
.brand h1 { margin: 6px 0 2px; font-size: 34px; color: var(--ember-2); }
.tagline { margin: 0; color: var(--ink-dim); font-size: 14px; }
.tabs { display: flex; gap: 6px; background: var(--bg-2); padding: 5px; border-radius: 12px; margin-bottom: 16px; }
.tab { flex: 1; border: 0; background: transparent; color: var(--ink-dim); padding: 9px; border-radius: 9px; font-weight: 600; }
.tab.active { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-dim); font-weight: 600; }
.auth-form input {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  padding: 11px 12px; border-radius: 10px; font-size: 15px;
}
.auth-form input:focus { outline: none; border-color: var(--ember); }
.btn-primary {
  background: linear-gradient(180deg, var(--ember-2), var(--ember));
  color: #2a1402; border: 0; padding: 13px; border-radius: 11px; font-weight: 700; font-size: 15px;
  box-shadow: 0 6px 18px rgba(255, 122, 24, 0.3);
}
.btn-primary:active { transform: translateY(1px); }
.auth-error { color: var(--hp); font-size: 13px; min-height: 18px; text-align: center; margin: 10px 0 0; }

.class-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.class-opt {
  text-align: left; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; color: var(--ink); display: flex; gap: 9px; align-items: flex-start;
}
.class-opt .gicon { font-size: 22px; color: var(--ember-2); margin-top: 2px; }
.class-opt.sel { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 6px 16px rgba(255, 122, 24, 0.2); }
.class-opt b { display: block; font-size: 14px; }
.class-opt small { color: var(--ink-faint); font-size: 11px; line-height: 1.3; }

/* ───────────────── Shell layout ───────────────── */
.shell {
  min-height: 100dvh;
  display: grid;
  /* minmax(0,1fr) - a plain 1fr is minmax(auto,1fr), and the main grid item's
     min-content would otherwise pin the whole shell wider than a phone (the page
     refused to shrink below ~646px). */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "top" "status" "main" "bottom";
}
/* ── Top bar: a forged control-rail. Every element shares one panel treatment,
   one height (--tb-h) and even spacing, so the HUD reads as a single system. ── */
/* Persistent status strip (PvP arena flag + active spell buffs) under the top bar. */
.statusline { grid-area: status; display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 13px; background: rgba(14,11,9,.96); border-bottom: 1px solid var(--line); }
.statusline.hidden { display: none; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--ink-dim); cursor: pointer; }
.status-chip .gicon { font-size: 14px; }
.status-chip.buff { color: var(--ember-2); border-color: rgba(232,99,28,.35); }
.status-chip.buff .buff-cd { color: var(--ink); font-variant-numeric: tabular-nums; }
.status-chip.danger { color: #ff8a8f; border-color: rgba(179,67,74,.55); background: rgba(179,67,74,.14); animation: pulseDanger 2.2s ease-in-out infinite; }
/* Active buffs in the top bar (desktop only - mobile uses the status strip below). */
.topbar-buffs { display: none; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-width: 44vw; scrollbar-width: none; }
.topbar-buffs::-webkit-scrollbar { display: none; }
.topbar-buffs .status-chip { flex-shrink: 0; font-size: 11.5px; padding: 3px 9px; }
@keyframes pulseDanger { 0%,100% { box-shadow: 0 0 0 0 rgba(179,67,74,.0); } 50% { box-shadow: 0 0 10px 0 rgba(179,67,74,.4); } }
body.reduce-motion .status-chip.danger { animation: none; }

.topbar {
  grid-area: top;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  background: linear-gradient(180deg, rgba(24, 19, 14, 0.95), rgba(18, 14, 10, 0.92));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  --tb-h: 44px; /* one height for every control on the rail */
}
.topbar-brand { display: none; align-items: center; gap: 9px; color: var(--ember-2); font-family: "Cinzel Decorative", Cinzel, serif; font-weight: 900; flex-shrink: 0; }
.topbar-brand .gicon { font-size: 24px; color: var(--ember); filter: drop-shadow(0 0 8px rgba(232, 99, 28, 0.4)); }
.topbar-title { font-size: 20px; letter-spacing: 0.5px; }

/* Shared control: same panel, height, border, inset highlight. */
.tb-ctl {
  height: var(--tb-h); box-sizing: border-box;
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  color: var(--ink); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.tb-ctl:hover { border-color: var(--line-2); }

/* Resources as "reliquaries": glass vessels of glowing essence set in forged metal.
   The empty vessel is dark glass; the fill is a vertical liquid gradient with an
   element glow; a gloss meniscus + a slow shimmer sweep play over the top. */
.resources { display: flex; gap: 8px; flex: 1; min-width: 0; }
.res {
  position: relative; flex: 1 1 0; min-width: 0; height: var(--tb-h); box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 0 11px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,0.03), transparent 60%), var(--bg-2);
  border: 1px solid var(--line); border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -7px 12px rgba(0,0,0,0.4);
}
.res[data-nav] { cursor: pointer; }
.res[data-nav]:active { transform: translateY(1px); }
/* the liquid */
.res-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 10px 3px 3px 10px;
  background: linear-gradient(180deg, var(--c-hi), var(--c-mid) 55%, var(--c-lo));
  box-shadow: inset 0 0 12px rgba(0,0,0,0.28), inset 0 2px 0 rgba(255,255,255,0.22), 0 0 16px -2px var(--c-glow);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.res-fill::after { /* the bright meniscus at the liquid's leading edge */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px;
  background: var(--c-hi); box-shadow: 0 0 8px 1px var(--c-glow); border-radius: 2px;
}
.res-gloss { position: absolute; inset: 0; pointer-events: none; border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 44%, rgba(0,0,0,0.22)); }
.res-shimmer { position: absolute; inset: 0; pointer-events: none; border-radius: 11px; overflow: hidden; }
.res-shimmer::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.10) 50%, transparent 58%);
  transform: translateX(-130%); animation: res-shimmer 7s ease-in-out infinite; }
@keyframes res-shimmer { 0%, 72% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }
/* content over the glass */
.res-ic { position: relative; z-index: 1; font-size: 17px; flex-shrink: 0; display: flex; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }
.res-meta { position: relative; z-index: 1; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; text-align: right; min-width: 0; }
.res-label { font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255,255,255,0.72); text-shadow: 0 1px 2px rgba(0,0,0,0.7); white-space: nowrap; }
.res-val { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.75); white-space: nowrap; }
.res-val i { font-style: normal; font-weight: 600; opacity: 0.65; font-size: 11px; }
.res-regen { font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.62); text-shadow: 0 1px 2px rgba(0,0,0,0.7); white-space: nowrap; display: flex; align-items: center; gap: 2px; margin-top: 1px; }
.res-regen .gicon { width: 9px; height: 9px; opacity: 0.7; }
.res-regen .full { color: rgba(120,220,140,0.8); }
/* element palettes */
.res.hp   { --c-hi: #ff8a8f; --c-mid: #d7444a; --c-lo: #7e272c; --c-glow: rgba(215,68,74,0.55); }
.res.stam { --c-hi: #8fe07c; --c-mid: #5aa84a; --c-lo: #2f6a2a; --c-glow: rgba(90,168,74,0.5); }
.res.mana { --c-hi: #84b6f2; --c-mid: #4f8fe0; --c-lo: #2c578f; --c-glow: rgba(79,143,224,0.55); }
/* low health: an urgent ember pulse */
.res.low { animation: res-low 1.4s ease-in-out infinite; }
.res.low .res-fill { animation: res-low-fill 1.4s ease-in-out infinite; }
@keyframes res-low { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -7px 12px rgba(0,0,0,0.4), 0 0 0 0 rgba(215,68,74,0); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -7px 12px rgba(0,0,0,0.4), 0 0 12px 1px rgba(215,68,74,0.45); } }
@keyframes res-low-fill { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
/* dead: the Health vessel reads DEAD - empty, ominous, tappable to revive */
.res.dead { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(215,68,74,0.55), inset 0 -7px 12px rgba(0,0,0,0.55); animation: none; }
.res.dead .res-fill { width: 0 !important; }
.res.dead .res-ic { color: var(--hp); filter: drop-shadow(0 0 5px rgba(215,68,74,0.6)); }
.res.dead .res-val { color: var(--hp); font-weight: 800; letter-spacing: 2px; animation: deathTitle 1.8s ease-in-out infinite; }
.res.dead .res-label { color: rgba(215,68,74,0.8); }

/* Right cluster: gold, bell, profile - same rail, even gaps, pinned right. */
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.gold-pill { padding: 0 13px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; font-size: 13.5px; cursor: default; }
.gold-pill .gicon { font-size: 15px; }
.bell { position: relative; width: var(--tb-h); justify-content: center; padding: 0; color: var(--ink-dim); }
.bell:hover { color: var(--ember-2); }
.bell .gicon { font-size: 18px; }
.bell-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--ember); color: #1a0f08; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg);
}
.profile-chip { padding: 0 12px 0 8px; max-width: 42vw; }
.profile-chip:hover { border-color: var(--ember); }
.profile-chip .pc-ic { font-size: 19px; color: var(--ember-2); flex-shrink: 0; display: flex; }
.profile-chip .pc-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; text-align: left; }
.profile-chip .pc-txt b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-chip .pc-txt small { font-size: 10.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 3px; }
.profile-chip .pc-txt small .gicon { font-size: 10.5px; }

/* Mobile compact: icons carry the label, the value drops its /max (kept in the
   tooltip), and the profile chip collapses to its avatar - so all six controls fit. */
@media (max-width: 480px) {
  .topbar { --tb-h: 40px; gap: 6px; padding: 8px 9px; }
  .res { padding: 0 8px; gap: 5px; }
  .res-label { display: none; }
  .res-meta { align-items: center; }
  .res-val { font-size: 12px; }
  .res-val i { display: none; }
  .gold-pill { padding: 0 9px; font-size: 12px; }
  .profile-chip { padding: 0; width: var(--tb-h); justify-content: center; }
  .profile-chip .pc-txt { display: none; }
}

.sidebar { display: none; }
.content { grid-area: main; min-width: 0; padding: 16px 14px 88px; max-width: 1100px; width: 100%; margin: 0 auto; }

.bottomnav {
  grid-area: bottom;
  position: sticky; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around;
  background: rgba(20, 16, 12, 0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.navbtn {
  flex: 1; border: 0; background: transparent; color: var(--ink-faint);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 10px; font-weight: 600;
  border-radius: 10px;
}
.navbtn .gicon { font-size: 19px; }
.navbtn.active { color: var(--ember-2); }

/* ───────────────── Cards & content ───────────────── */
.page-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; }
.page-head h2 { margin: 0; font-size: 22px; color: var(--ember-2); display: flex; align-items: center; gap: 9px; }
.page-head h2 .gicon { font-size: 24px; color: var(--ember); }
.page-lv { font-family: var(--font-body, inherit); font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--ember-2); background: rgba(0,0,0,.28); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 999px; padding: 3px 10px; margin-left: 2px; white-space: nowrap; }
.page-sub { color: var(--ink-dim); font-size: 13px; margin: -8px 0 14px; }

.grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid.two { grid-template-columns: 1fr 1fr; } }

.card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--r); padding: 14px;
}
.card.locked { opacity: 0.55; }
.card-row { display: flex; gap: 12px; align-items: flex-start; }
.card-icon {
  font-size: 30px; color: var(--ember-2); width: 52px; height: 52px; flex: none;
  display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
}
.card h3 { margin: 0 0 2px; font-size: 16px; }
/* Bestiary plates: the monster icon sits in a danger-tiered glowing socket */
.foe-socket { color: var(--dgr, var(--ember-2)); border-color: color-mix(in srgb, var(--dgr, var(--ember-2)) 45%, var(--line));
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--dgr, var(--ember-2)) 22%, transparent), var(--bg-2));
  box-shadow: inset 0 0 10px rgba(0,0,0,.45), 0 0 12px -4px var(--dgr, var(--ember-2)); }
.foe-plate.active-action .foe-socket { box-shadow: inset 0 0 10px rgba(0,0,0,.45), 0 0 16px -2px var(--dgr, var(--ember)); }
.foe-rate { font-size: 12px; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-dim); font-size: 13px; }
.faint { color: var(--ink-faint); font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tag {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-dim);
}
.tag.raid { color: var(--hp); border-color: rgba(229, 72, 77, 0.4); }
.cost { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12px; }
.cost .gicon { font-size: 13px; }
.cost.stam { color: var(--stam); } .cost.mana { color: var(--mana); } .cost.gold { color: var(--gold); }

.btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 14px;
}
.btn:hover { border-color: var(--ember); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.go { background: linear-gradient(180deg, var(--ember-2), var(--ember)); color: #2a1402; border: 0; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn.danger { color: var(--hp); border-color: rgba(229, 72, 77, 0.4); }

.bar { position: relative; height: 9px; background: var(--bg-2); border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03); }
.bar > span { position: relative; display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--ember-2));
  box-shadow: 0 0 8px -1px var(--ember); transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bar > span::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: #fff; opacity: .55; }
.bar.mastery > span { background: linear-gradient(90deg, var(--renown), #e9d5ff); box-shadow: 0 0 8px -1px var(--renown); }
/* stamina bar on the combat screen literally matches the header's stamina reliquary */
.bar.stam > span { background: linear-gradient(90deg, var(--stam), #8fe07c); box-shadow: 0 0 8px -1px var(--stam); }
/* combat Health bar - your real, draining health (matches the header HP reliquary) */
.bar.hp > span { background: linear-gradient(90deg, var(--hp), #ff8a8f); box-shadow: 0 0 8px -1px var(--hp); }
.bar.hp.low > span { animation: cbLowPulse 1.1s ease-in-out infinite; }
@keyframes cbLowPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.55); } }
/* "⚔ fighting…" live indicator + session tally */
.cb-live { color: var(--ember-2); font-weight: 700; animation: cbLivePulse 1.2s ease-in-out infinite; }
@keyframes cbLivePulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.cb-tally { font-size: 12px; padding-top: 7px; border-top: 1px solid var(--line); }

/* ── Animated combat viewer: the Battle Stage ── */
.battle-stage {
  margin: 0 0 14px; padding: 10px; border-radius: var(--r);
  border: 1px solid var(--ember); background: linear-gradient(180deg, rgba(40,30,22,.9), rgba(20,16,13,.96));
  box-shadow: 0 0 18px rgba(232,99,28,.14), inset 0 1px 0 rgba(255,255,255,.04);
}
.bs-bars { display: flex; gap: 14px; margin-bottom: 8px; }
.bs-side { flex: 1 1 0; min-width: 0; }
.bs-foe { text-align: right; }
.bs-name { font-family: Cinzel, serif; font-size: 13px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-hp { height: 10px; }
.bs-hp-you > span { background: linear-gradient(90deg, var(--stam), #8fe07c); box-shadow: 0 0 8px -1px var(--stam); }
.bs-hp-foe > span { background: linear-gradient(90deg, var(--hp), #ff8a8f); box-shadow: 0 0 8px -1px var(--hp); }
.bs-hpval { font-size: 10px; color: var(--ink-faint); margin-top: 2px; font-variant-numeric: tabular-nums; }
.bs-foe .bs-hpval { text-align: right; }
.bs-arena {
  position: relative; border-radius: 10px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(232,99,28,.10), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(0,0,0,.5), transparent 60%),
    linear-gradient(180deg, #17120f, #0e0b09);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6), inset 0 0 0 1px var(--line);
}
.bs-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── Expedition stage (timed dungeon/boss run) ── */
.exp-stage {
  margin: 0 0 14px; padding: 12px; border-radius: var(--r);
  border: 1px solid var(--blood, #b3434a); background: linear-gradient(180deg, rgba(40,22,24,.92), rgba(18,13,13,.97));
  box-shadow: 0 0 22px rgba(179,67,74,.16), inset 0 1px 0 rgba(255,255,255,.04);
}
.exp-top .exp-obj-label { font-family: Cinzel, serif; font-size: 14px; color: var(--ember-2); }
.exp-hp { height: 11px; }
.exp-hp > span { background: linear-gradient(90deg, var(--stam), #8fe07c); box-shadow: 0 0 8px -1px var(--stam); }
.exp-hpval { font-variant-numeric: tabular-nums; }
.exp-arena {
  position: relative; border-radius: 10px; overflow: hidden; margin-top: 6px;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(179,67,74,.12), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(180deg, #181011, #0c0809);
  box-shadow: inset 0 0 44px rgba(0,0,0,.65), inset 0 0 0 1px var(--line);
}
.exp-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.exp-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px 8px rgba(0,0,0,.55); }
.exp-prog { height: 12px; }
.exp-prog .exp-track { position: absolute; inset: 0; height: 12px; margin: 0; background: transparent; border-radius: 5px; }
.exp-prog .exp-fill { display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--blood, #b3434a), var(--ember), var(--gold)); box-shadow: 0 0 10px -1px var(--ember); transition: width .4s linear; }
.exp-log { margin-top: 10px; }
.exp-log .fx-line { color: var(--ink-dim); font-size: 12.5px; opacity: 0; animation: logIn .3s ease-out forwards; }
body.reduce-motion .exp-log .fx-line { animation: none !important; opacity: 1; }
.bs-float { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bs-dmg {
  position: absolute; top: 46%; transform: translateX(-50%); font-weight: 800; font-size: 18px;
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.8); font-variant-numeric: tabular-nums; white-space: nowrap;
  animation: bsFloat 1.1s ease-out forwards;
}
.bs-dmg.crit { font-size: 26px; color: var(--ember-2); }
.bs-dmg.miss { color: var(--ink-faint); font-size: 14px; font-weight: 700; }
.bs-dmg.heal { color: #8fe07c; }
.bs-dmg.ability { color: var(--ember-2); }
.bs-dmg.dot { color: var(--renown); }
@keyframes bsFloat { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -38px) scale(1); } }
.bs-banner {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.2)); animation: bsBanner .4s ease-out both;
}
.bs-banner b { font-family: MedievalSharp, Cinzel, serif; font-size: 30px; letter-spacing: 3px; }
.bs-banner span { font-size: 12px; color: var(--ink-dim); }
.bs-banner.win b { color: var(--gold); text-shadow: 0 0 18px rgba(232,185,78,.5); }
.bs-banner.lose b { color: var(--hp); text-shadow: 0 0 18px rgba(215,68,74,.5); }
@keyframes bsBanner { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
.bs-controls { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.bs-status { margin-left: auto; font-size: 12px; }

/* Raid assault cinematic - a full-screen overlay that plays before the result. */
.raid-cine { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
  background: rgba(6,4,3,.86); backdrop-filter: blur(3px); animation: rcIn .2s ease both; }
.raid-cine.rc-out { animation: rcOut .18s ease forwards; }
@keyframes rcIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rcOut { to { opacity: 0; } }
.raid-cine-box { width: min(600px, 96vw); }
.rc-title { text-align: center; font-family: Cinzel, serif; color: var(--ember-2); margin-bottom: 8px; letter-spacing: .5px; }
.rc-arena { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #0a1016, #0c1418); box-shadow: var(--shadow); }
.rc-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.rc-banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  pointer-events: none; background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,.15)); animation: bsBanner .4s ease-out both; }
.rc-banner b { font-family: MedievalSharp, Cinzel, serif; font-size: 30px; letter-spacing: 3px; }
.rc-banner span { font-size: 12px; color: var(--ink-dim); }
.rc-banner.win b { color: var(--gold); text-shadow: 0 0 18px rgba(232,185,78,.55); }
.rc-banner.lose b { color: var(--hp); text-shadow: 0 0 18px rgba(215,68,74,.55); }
.rc-skip { display: block; margin: 10px auto 0; }

/* Agility runner - a parallax GrassLand scene with the hero jogging/vaulting. */
.agi-run { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  margin-bottom: 12px; background: #7ec0ee; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.agi-run.is-running { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 0 22px -8px var(--ember); }
.agi-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.agi-run-label { position: absolute; left: 8px; bottom: 7px; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; font-weight: 600; }
.agi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: agiPulse 1s ease-in-out infinite; }
@keyframes agiPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Country flag chip shown by a player's name on the profile & hero card. */
.flag-chip { margin-right: 5px; font-size: .92em; vertical-align: baseline; cursor: default; }
/* "YOU DIED" - a grim, animated death window */
.death-reveal { position: relative; }
.death-reveal::before { content: ""; position: absolute; inset: -16px; pointer-events: none; border-radius: 16px;
  background: radial-gradient(80% 60% at 50% 0%, rgba(215,68,74,.22), transparent 70%); animation: deathVignette .9s ease-out both; }
@keyframes deathVignette { from { opacity: 0; } to { opacity: 1; } }
.death-skull { color: var(--hp); font-size: 76px; filter: drop-shadow(0 0 18px rgba(215,68,74,.6));
  animation: deathSkull 1.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes deathSkull {
  0% { transform: scale(.3) rotate(-14deg); opacity: 0; }
  45% { transform: scale(1.18) rotate(7deg); opacity: 1; }
  65% { transform: scale(.95) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
.death-title { font-family: MedievalSharp, Cinzel, serif; font-size: 34px; letter-spacing: 4px; color: var(--hp);
  margin: 6px 0 2px; text-shadow: 0 0 16px rgba(215,68,74,.5); animation: deathTitle 2.4s ease-in-out infinite; }
@keyframes deathTitle { 0%, 100% { opacity: .8; text-shadow: 0 0 14px rgba(215,68,74,.4); } 50% { opacity: 1; text-shadow: 0 0 26px rgba(215,68,74,.8); } }

.chance { font-weight: 700; }
.chance.good { color: var(--ok); } .chance.mid { color: var(--gold); } .chance.bad { color: var(--hp); }

/* stat grid */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* color: var(--ink) is explicit so <button class="stat"> discipline tiles don't
   inherit the browser-default near-black button text on the dark background. */
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; color: var(--ink); }
.stat b { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat small { display: block; color: var(--ink-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }

/* item rarity dot */
.rarity-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; color: var(--ink-dim); padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; }
.seg button.active { background: var(--panel); color: var(--ink); }

.empty { text-align: center; color: var(--ink-faint); padding: 40px 16px; }
.empty .gicon { font-size: 40px; opacity: 0.5; }
.skeleton { background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: var(--r); height: 76px; }
@keyframes sk { to { background-position: -200% 0; } }

/* ───────────────── Overlay / modals / celebration ───────────────── */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); }
.modal { width: min(420px, 100%); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); animation: pop 0.3s cubic-bezier(0.2, 1.2, 0.3, 1); }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }
.modal h2 { margin: 0 0 6px; text-align: center; }
.reveal { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.reveal .big-icon { font-size: 64px; }
/* B3: quest "adventuring…" attempt animation (icon sway while we await the result). */
.big-icon.quest-resolving { animation: questSway 0.9s ease-in-out infinite; }
@keyframes questSway { 0%,100% { transform: rotate(-12deg) scale(0.96); } 50% { transform: rotate(12deg) scale(1.06); } }
.loot-item { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; width: 100%; animation: lootIn 0.4s both; }
.loot-item .gicon { font-size: 26px; }
@keyframes lootIn { from { transform: translateY(10px) scale(0.9); opacity: 0; } }
.crit-badge { color: var(--gold); font-weight: 800; letter-spacing: 1px; text-shadow: 0 0 12px rgba(245, 196, 81, 0.6); animation: critPulse 0.8s infinite alternate; }
@keyframes critPulse { to { transform: scale(1.08); } }
.levelup { text-align: center; }
.levelup .ring { font-size: 76px; color: var(--gold); filter: drop-shadow(0 0 22px rgba(245, 196, 81, 0.7)); animation: spin 1.2s ease; }
@keyframes spin { from { transform: rotate(-25deg) scale(0.6); opacity: 0; } }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 49; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; opacity: 0.9; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: 0.8; } }

/* Firework bursts - radial particles flying out from a point (big milestones). */
.fireworks { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.fw-burst { position: absolute; }
.fw-burst i { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%;
  opacity: 0; box-shadow: 0 0 7px rgba(255,255,255,0.5); animation: fw-fly 1.15s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes fw-fly {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.25); opacity: 0; }
}
/* Full-screen radial glow flash for the grandest milestones. */
.screen-flash { position: fixed; inset: 0; pointer-events: none; z-index: 48; animation: flashPulse 0.95s ease-out forwards; }
@keyframes flashPulse { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
body.reduce-motion .fireworks, body.reduce-motion .screen-flash { display: none !important; }
/* The level-up ring gets a richer glow at epic (÷50) milestones. */
.levelup .ring.epic { box-shadow: 0 0 28px var(--ember-2), 0 0 60px #ff5d8f88; }

/* toasts */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: 92vw; }
.toast { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; animation: toastIn 0.25s; }
.toast.good { border-color: rgba(63, 185, 80, 0.5); }
.toast.bad { border-color: rgba(229, 72, 77, 0.5); }
.toast .gicon { font-size: 16px; }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } }

/* count-up flash */
.flash { animation: flash 0.6s; }
@keyframes flash { 0% { color: var(--gold); transform: scale(1.18); } 100% {} }

/* ───────────────── Desktop ───────────────── */
@media (min-width: 1024px) {
  .shell {
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-areas: "top top" "status status" "side main";
  }
  .topbar { padding: 11px 22px; gap: 14px; }
  .topbar-brand { display: flex; }
  .resources { flex: 0 1 680px; }
  /* On desktop the buffs live in the header; the mobile status strip is hidden. */
  .topbar-buffs { display: flex; }
  .statusline { display: none; }
  .sidebar {
    grid-area: side; display: flex; flex-direction: column; gap: 4px;
    padding: 16px 12px; border-right: 1px solid var(--line);
    position: sticky; top: 61px; align-self: start; height: calc(100dvh - 61px);
    /* FIX 1: the MENU scrolls on its own, independent of the content column. */
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  .sidebar::-webkit-scrollbar { width: 8px; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  /* FIX 2: pinned Character cluster - stays at the top while the rest scrolls. */
  .nav-pinned {
    position: sticky; top: -16px; z-index: 3;
    margin: -16px -12px 6px; padding: 14px 12px 8px;
    /* E1: fully opaque so list items never show through behind the pinned cluster
       while the sidebar scrolls (was a gradient fading to transparent). */
    background: var(--bg);
    border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px;
  }
  .sidebtn {
    display: flex; align-items: center; gap: 11px; border: 0; background: transparent;
    color: var(--ink-dim); padding: 11px 13px; border-radius: 11px; font-weight: 600; font-size: 14.5px; text-align: left;
  }
  .sidebtn .navkey {
    margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ink-faint);
    border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; opacity: .6;
  }
  .sidebtn:hover .navkey { opacity: 1; }
  .sidebtn .gicon { font-size: 19px; }
  .sidebtn:hover { background: var(--panel); color: var(--ink); }
  .sidebtn.active { background: linear-gradient(90deg, rgba(255, 122, 24, 0.16), transparent); color: var(--ember-2); box-shadow: inset 2px 0 0 var(--ember); }
  .bottomnav { display: none; }
  .content { padding: 22px 28px 40px; }
  .grid.two { grid-template-columns: 1fr 1fr; }
  .grid.three { grid-template-columns: 1fr 1fr 1fr; }
  .page-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
}
@media (min-width: 1320px) {
  .content { max-width: 1180px; }
}

/* ───────────────── Ashveil additions ───────────────── */

/* Ornate framed panels - original CC0 corner flourishes at all four corners. */
.framed { position: relative; }
.framed::before, .framed::after,
.framed > .corner-tr, .framed > .corner-br { content: ""; }
.framed::before, .framed::after {
  content: ""; position: absolute; width: 30px; height: 30px; color: var(--gold);
  background: currentColor; opacity: 0.55; pointer-events: none;
  -webkit-mask: url(/assets/corner.svg) center/contain no-repeat;
  mask: url(/assets/corner.svg) center/contain no-repeat;
}
.framed::before { top: 6px; left: 6px; }
.framed::after { bottom: 6px; right: 6px; transform: rotate(180deg); }

.field-label { font-size: 12px; color: var(--ink-dim); font-weight: 700; margin: 6px 0 2px; text-transform: uppercase; letter-spacing: 0.6px; }

/* Class picker - 8 callings, scrollable, rich cards. */
.class-pick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-height: 280px; overflow-y: auto; padding: 2px; margin-bottom: 4px;
}
.class-opt { flex-direction: column; gap: 4px; }
.class-opt .ctop { display: flex; gap: 8px; align-items: center; }
.class-opt .cmeta { display: none; }
.class-opt.sel .cmeta { display: block; }
.class-opt .cmeta small { display: block; margin-top: 3px; }
.class-opt .emph { color: var(--ember-2); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }

/* The "What's next" dock - the retention hook, always visible. */
.dock {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(64px + env(safe-area-inset-bottom));
  width: min(680px, calc(100vw - 20px)); z-index: 30;
}
.dock-inner {
  display: flex; gap: 8px; align-items: stretch; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(180deg, rgba(36,29,24,0.96), rgba(20,16,12,0.96));
  border: 1px solid var(--line-2); border-radius: 14px; padding: 8px;
  box-shadow: var(--shadow); backdrop-filter: blur(10px);
}
.dock-inner::-webkit-scrollbar { display: none; }
.dock-label { font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; padding: 0 4px; display: flex; align-items: center; }
.dock-chip {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 11px; color: var(--ink); cursor: pointer; max-width: 240px;
}
.dock-chip.act { border-color: var(--ember); box-shadow: 0 0 0 1px rgba(232,99,28,0.3); }
.dock-chip .gicon { font-size: 18px; color: var(--ember-2); }
.dock-chip b { font-size: 12.5px; display: block; line-height: 1.15; }
.dock-chip small { font-size: 10.5px; color: var(--ink-faint); }
.dock-chip .cd { font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 700; }
@media (min-width: 1024px) {
  .dock { left: auto; right: 24px; transform: none; bottom: 20px; width: min(420px, 38vw); }
}

/* Onboarding checklist */
.onboard { border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px; margin-bottom: 16px;
  background: linear-gradient(180deg, rgba(40,30,22,0.7), rgba(28,23,20,0.7)); }
.onboard h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.onboard h3 .gicon { color: var(--ember-2); }
.ob-steps { display: grid; gap: 6px; margin-top: 8px; }
.ob-step { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px; background: var(--bg-2); cursor: pointer; }
.ob-step.done { opacity: 0.6; }
.ob-tick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; display: grid; place-items: center; }
.ob-step.done .ob-tick { background: var(--ok); border-color: var(--ok); }
.ob-tick .gicon { font-size: 11px; color: #0e0b09; }
.ob-step b { font-size: 13px; font-weight: 600; }
.ob-step.done b { text-decoration: line-through; }
.ob-bar { height: 6px; background: var(--bg-2); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.ob-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--gold)); transition: width .6s; }

/* 7-stat sheet grid */
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
@media (min-width: 600px) { .statgrid { grid-template-columns: 1fr 1fr 1fr; } }
.stat .ic { color: var(--ember-2); font-size: 15px; }
.stat-row { display: flex; align-items: center; gap: 7px; }
.derived { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.derived .pill { background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; font-size: 12px; }
.derived .pill b { color: var(--ember-2); }

/* class banner on profile */
.classbox { background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; margin-top: 10px; }
.classbox .k { font-size: 11px; color: var(--ember-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }

/* give content room above the dock on mobile */
.content { padding-bottom: 150px; }
@media (min-width: 1024px) { .content { padding-bottom: 60px; } }

/* ───────────────── Phase 2 UI ───────────────── */
/* Sidebar groups */
.nav-group { font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ink-faint); font-weight: 700; padding: 12px 13px 4px; }
.nav-group:first-child { padding-top: 2px; }

/* Notifications bell */
.bell { position: relative; border: 1px solid var(--line); background: var(--panel); color: var(--ink-dim); width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.bell:hover { border-color: var(--ember); color: var(--ink); }
.bell .gicon { font-size: 17px; }
.bell-badge { position: absolute; top: -5px; right: -5px; background: var(--blood); color: #fff; font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 3px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* "More" menu grid (legacy - kept for any other callers) */
.more-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.more-item { display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 6px; color: var(--ink); font-size: 11px; font-weight: 600; }
.more-item:hover { border-color: var(--ember); color: var(--ember-2); }
.more-item .gicon { font-size: 22px; color: var(--ember-2); }

/* Mobile "More" - a left slide-out drawer that mirrors the desktop sidebar. */
.more-drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.more-drawer-back { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity .24s ease; pointer-events: auto; }
.more-drawer.open .more-drawer-back { opacity: 1; }
.more-drawer-panel {
  position: absolute; inset: 0 auto 0 0; width: min(85vw, 320px);
  background: var(--bg); border-right: 1px solid var(--line-2);
  box-shadow: 7px 0 30px rgba(0,0,0,0.55);
  transform: translateX(-100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; pointer-events: auto;
  overflow-y: auto; overscroll-behavior: contain;
}
.more-drawer.open .more-drawer-panel { transform: translateX(0); }
.more-drawer-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 14px 10px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.more-drawer-head b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.more-drawer-body { padding: 6px 8px 26px; display: flex; flex-direction: column; gap: 3px; }
.more-drawer .nav-pinned { display: flex; flex-direction: column; gap: 3px; padding: 2px 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.more-drawer .sidebtn { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; color: var(--ink-dim); padding: 12px; border-radius: 11px; font-weight: 600; font-size: 15px; text-align: left; }
.more-drawer .sidebtn .gicon { font-size: 20px; }
.more-drawer .sidebtn:hover, .more-drawer .sidebtn:active { background: var(--panel); color: var(--ink); }

/* ───────────────── Melvor-style skills UI ───────────────── */
/* Idle banner - a forge mouth that glows hotter (--heat) as the action nears completion */
.idle-banner {
  position: relative; overflow: hidden;
  background:
    radial-gradient(130% 190% at 18% 135%, rgba(232,99,28, calc(.08 + var(--heat,0) * .30)), transparent 58%),
    linear-gradient(180deg, rgba(42,31,23,.94), rgba(22,18,15,.96));
  border: 1px solid var(--ember); border-radius: var(--r); padding: 11px 13px; margin-bottom: 14px;
  box-shadow: 0 0 18px rgba(232,99,28,.16), inset 0 1px 0 rgba(255,255,255,.05);
}
.idle-banner.stalled { border-color: var(--line-2); border-style: dashed; box-shadow: none; filter: saturate(.55) brightness(.92); }
.idle-row { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
/* the action sits in a glowing forge socket */
.ib-socket {
  position: relative; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 32%, rgba(232,99,28, calc(.22 + var(--heat,0)*.42)), rgba(0,0,0,.4));
  border: 1px solid rgba(232,99,28,.42);
  box-shadow: inset 0 0 10px rgba(0,0,0,.55), 0 0 13px -2px rgba(232,99,28, calc(.28 + var(--heat,0)*.5));
}
.idle-banner .ib-icon { font-size: 22px; color: #ffd9a8; filter: drop-shadow(0 1px 3px rgba(0,0,0,.75)); animation: idleBob 1.3s ease-in-out infinite; }
.idle-banner.stalled .ib-icon { animation: none; color: var(--ink-faint); filter: none; }
.idle-banner.stalled .ib-socket { background: rgba(0,0,0,.3); border-color: var(--line); box-shadow: inset 0 0 8px rgba(0,0,0,.5); }
.ib-label { font-family: Cinzel, serif; letter-spacing: .3px; font-size: 15px; }
.ib-pending { font-size: 12px; font-weight: 800; color: var(--ember-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.idle-banner.stalled .ib-pending { color: var(--hp); }
.ib-collect .gicon, .ib-stop .gicon { font-size: 14px; }
.ib-stop:hover { border-color: var(--hp); color: var(--hp); }
/* rising embers - intensity tracks heat; killed under reduce-motion by the blanket rules */
.ib-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: calc(.25 + var(--heat,0)*.75); }
.ib-embers::before, .ib-embers::after {
  content: ""; position: absolute; bottom: -5px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ember-2); box-shadow: 0 0 6px 1px var(--ember); animation: ib-rise 3.4s linear infinite;
}
.ib-embers::before { left: 21%; }
.ib-embers::after { left: 28%; animation-delay: 1.7s; animation-duration: 4.3s; }
@keyframes ib-rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 14% { opacity: .85; } 100% { transform: translate(9px,-50px) scale(.4); opacity: 0; } }
.idle-banner.stalled .ib-embers { display: none; }
/* reliquary-lite progress trough: inset shadow + a glowing leading edge, echoing the header */
.idle-bar { position: relative; height: 9px; background: var(--bg-2); border-radius: 5px; overflow: hidden; margin-top: 6px;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03); }
.idle-bar > span { position: relative; display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--gold));
  box-shadow: 0 0 10px -1px var(--ember); transition: width .25s linear; }
.idle-bar > span::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--ember-2);
  box-shadow: 0 0 8px 1px var(--ember-2); border-radius: 2px; }

/* Skill tab strip */
.skill-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; margin-bottom: 12px; }
.skill-tabs::-webkit-scrollbar { display: none; }
.skill-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 8px 12px; color: var(--ink-dim); min-width: 74px; }
.skill-tab .gicon { font-size: 20px; }
.skill-tab small { font-size: 10px; color: var(--ink-faint); }
.skill-tab.active { border-color: var(--ember); color: var(--ember-2); box-shadow: 0 0 0 1px var(--ember), 0 0 16px -5px var(--ember);
  background: radial-gradient(circle at 50% 0%, rgba(232,99,28,.16), transparent 72%), var(--panel); }
.skill-tab.locked { opacity: .5; }
.card.active-action { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 0 14px rgba(232,99,28,.2); }

/* Paper-doll equipment grid */
.paperdoll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 600px) { .paperdoll { grid-template-columns: repeat(4, 1fr); } }
.slot-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); padding: 6px; }
.slot-cell .gicon { font-size: 26px; background-color: currentColor; }
.slot-cell small { font-size: 9px; color: var(--ink-faint); text-transform: capitalize; text-align: center; overflow: hidden; white-space: nowrap; max-width: 100%; }
.slot-cell.filled { background: var(--panel-2); }
.slot-cell:hover { border-color: var(--ember); }
.equip-opt { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; color: var(--ink); }
.equip-opt .gicon { font-size: 22px; color: var(--ember-2); }

.reqbox { font-size: 12px; line-height: 1.8; }
.mini-input { width: 90px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); padding: 7px 9px; border-radius: 9px; }

/* Rarity glow on icons inside loot reveals */
.loot-item .gicon { filter: drop-shadow(0 0 6px currentColor); }

/* ═════════════ FIX 3/4/5/6 - idle indicator + animation toolkit ═════════════ */
/* Persistent "currently doing X" bar, stacked just above the dock. */
.idlebar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(124px + env(safe-area-inset-bottom));
  width: min(680px, calc(100vw - 20px)); z-index: 29;
  display: flex; gap: 8px; align-items: stretch;
}
.idlebar.hidden { display: none; }
.idle-main {
  flex: 1; display: flex; align-items: center; gap: 11px; min-width: 0;
  background: linear-gradient(180deg, rgba(36,29,24,0.97), rgba(20,16,12,0.97));
  border: 1px solid var(--ember); border-radius: 14px; padding: 9px 13px; cursor: pointer;
  box-shadow: var(--shadow), 0 0 0 1px rgba(232,99,28,0.25); position: relative; overflow: hidden; text-align: left;
}
.idle-ic { font-size: 22px; color: var(--ember-2); flex: 0 0 auto; }
.idle-ic.working { animation: idleBob 1.3s ease-in-out infinite; }
.idle-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.idle-txt b { color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idle-txt small { color: var(--ink-faint); font-size: 11px; }
.idle-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bg-2); }
.idle-prog > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--gold)); width: 0; transition: width .25s linear; }
/* Collect + Stop share the same pill treatment (Collect mirrors Stop's style). */
.idle-stop, .idle-collect {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; color: var(--ink-dim);
  padding: 4px 12px; cursor: pointer; font-size: 10px; font-weight: 700;
}
.idle-stop:hover { color: var(--hp); border-color: var(--hp); }
.idle-collect:hover { color: var(--ember-2); border-color: var(--ember); }
.idle-stop .gicon, .idle-collect .gicon { font-size: 16px; }
@keyframes idleBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }

/* Floating numbers/text (yields, XP, damage). JS spawns these into .fx-layer. */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 48; overflow: hidden; }
.floater {
  position: absolute; font-weight: 800; font-size: 15px; white-space: nowrap;
  display: flex; align-items: center; gap: 4px; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  animation: floatUp 1.15s ease-out forwards;
}
.floater .gicon { font-size: 15px; }
.floater.xp { color: var(--mana); }
.floater.gold { color: var(--gold); }
.floater.yield { color: var(--ink); }
.floater.dmg { color: #ff6a4d; font-size: 17px; }
.floater.crit { color: var(--gold); font-size: 22px; }
.floater.miss { color: var(--ink-faint); font-size: 14px; }
.floater.heal { color: var(--ok); }
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(6px) scale(0.85); }
  18% { opacity: 1; transform: translateY(-2px) scale(1.08); }
  100% { opacity: 0; transform: translateY(-46px) scale(1); }
}
/* Number pop (count-up emphasis) + gold shimmer + generic pulse. */
.pop { animation: popNum .4s ease-out; }
@keyframes popNum { 0% { transform: scale(1); } 40% { transform: scale(1.28); color: var(--gold); } 100% { transform: scale(1); } }
.shimmer { background: linear-gradient(100deg, var(--gold) 30%, #fff6d8 50%, var(--gold) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: shimmer 1.4s linear; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.pulse-once { animation: pulseOnce .5s ease-out; }
@keyframes pulseOnce { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Live HP bars for combat dramatisation. */
.fx-hpbar { height: 9px; background: var(--bg-2); border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.fx-hpbar > span { display: block; height: 100%; border-radius: 5px; transition: width .35s ease; }
.fx-hpbar.you > span { background: linear-gradient(90deg, var(--ok), #6fe0a0); }
.fx-hpbar.foe > span { background: linear-gradient(90deg, var(--hp), #ff7a5c); }
/* Rolling event log used by idle + combat. */
.fx-log { display: flex; flex-direction: column; gap: 4px; max-height: 132px; overflow: hidden; font-size: 12.5px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }
.fx-log:empty { display: none; }
.fx-log .row { display: flex; align-items: center; gap: 7px; color: var(--ink-dim); opacity: 0; animation: logIn .3s ease-out forwards; }
.fx-log .row .gicon { font-size: 14px; flex-shrink: 0; opacity: .9; }
.fx-log .row b { color: var(--ink); }
@keyframes logIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* Respect reduced motion (system pref OR the in-app toggle on <body>). */
@media (prefers-reduced-motion: reduce) {
  .idle-ic.working, .floater, .pop, .shimmer, .pulse-once, .fx-log .row { animation: none !important; }
  .floater { opacity: 1; }
  /* D6: comprehensive reset - neutralise ALL animation/transition for OS reduced-motion. */
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
/* D6: in-app "Animations: Off" - same comprehensive reset via the body class. */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
}
body.reduce-motion .confetti, body.reduce-motion .floater { display: none !important; }
/* D6: visible keyboard focus everywhere (mouse clicks stay clean via :focus-visible). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
.btn:focus-visible, .sidebtn:focus-visible, .navbtn:focus-visible, .dock-chip:focus-visible,
.profile-chip:focus-visible, .bell:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ember-2); outline-offset: 2px; border-radius: 6px;
}
body.reduce-motion .idle-ic.working,
body.reduce-motion .floater,
body.reduce-motion .pop,
body.reduce-motion .shimmer,
body.reduce-motion .pulse-once,
body.reduce-motion .confetti,
body.reduce-motion .fx-log .row { animation: none !important; }
body.reduce-motion .floater { display: none; }

/* Desktop: the bottom bars clear the (hidden) mobile nav, so sit a touch lower. */
@media (min-width: 1024px) {
  .idlebar { bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* M1: gem socket pips on equipment slot cells. */
.slot-cell .sockets { display: flex; gap: 3px; margin-top: 3px; }
.pip { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; }
.pip.full { background: radial-gradient(circle at 35% 35%, #c9e8ff, #4a90d9); border-color: #4a90d9; box-shadow: 0 0 4px #4a90d9aa; }

/* M5: world-event chip in the dock - a warm, attention-drawing accent. */
.dock-chip.event-chip {
  background: linear-gradient(180deg, rgba(232,99,28,0.22), rgba(36,29,24,0.96));
  border-color: var(--ember); color: var(--ink);
}
.dock-chip.event-chip .gicon { color: var(--gold); }
.dock-chip.event-chip .event-cd { color: var(--gold); }

/* M6: onboarding - dismiss affordance + next-step highlight. */
.ob-dismiss { background: transparent; border: 1px solid var(--line-2); color: var(--ink-faint); border-radius: 8px; padding: 3px 9px; font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ob-dismiss:hover { color: var(--ink); }
.ob-dismiss .gicon { font-size: 12px; }
.ob-step.next { border-color: var(--ember); box-shadow: inset 0 0 0 1px rgba(232,99,28,0.4); color: var(--ink); }
.ob-step.next .ob-tick { color: var(--ember-2); font-weight: 800; }

/* ───────────────── Vault (bank) - two roomy panels, items flow into a grid ───────────────── */
.bank-cols { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 900px) { .bank-cols { grid-template-columns: 1fr 1fr; } }
.bank-panel { display: flex; flex-direction: column; }
.bank-panel.atrisk { border-color: rgba(229, 72, 77, 0.32); }
.bank-panel.safe { border-color: rgba(86, 173, 113, 0.32); }
.bank-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 8px; margin-top: 8px; }
.bank-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 7px 9px; min-width: 0; }
.bank-item:hover { border-color: var(--line-2); }
.bank-item .bi-icon { font-size: 19px; flex: none; }
.bank-item .bi-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.bank-item .bi-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.bank-item .bi-name small { font-size: 11px; }
.bank-item .bi-acts { display: flex; gap: 4px; flex: none; }
.bank-item .bi-acts .btn.sm { padding: 4px 8px; font-size: 11px; }
.bank-gold { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .bank-gold { grid-template-columns: 1fr; } }
.bank-gold .gctl { display: flex; gap: 6px; align-items: center; }
.bank-gold .gctl .mini-input { flex: 1; width: auto; }

/* ───────────────── Equipment - combat-stats panel ───────────────── */
.eq-stats { display: flex; flex-direction: column; }
.eq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.eq-bignum { font-size: 34px; font-weight: 800; line-height: 1; color: var(--ember-2); font-variant-numeric: tabular-nums; }
.eq-style { display: inline-flex; align-items: center; gap: 6px; text-transform: capitalize; font-weight: 700; font-size: 13px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--ink); }
.eq-style .gicon { font-size: 15px; color: var(--ember-2); }
.eq-statlist { display: flex; flex-direction: column; }
.eq-statline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); font-size: 13.5px; }
.eq-statline:first-child { border-top: 0; }
.eq-statline .gicon.eq-stat-ic { font-size: 16px; color: var(--ember-2); flex: none; }
.eq-statline b { font-variant-numeric: tabular-nums; font-size: 15px; }
.eq-statline.zero { opacity: 0.5; }
.eq-statline.zero b { color: var(--ink-faint); }
/* live preview strip in the equip picker */
.eq-preview { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.eq-preview .pill { background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 5px 9px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.eq-preview .pill b { color: var(--ember-2); font-variant-numeric: tabular-nums; }
.eq-preview .pill .gicon { font-size: 13px; color: var(--ember-2); }

/* ───────── Thieving: "Caught! Lying low" - the idle bar pauses red with a countdown ───────── */
.idle-banner.stunned { border-color: rgba(229, 72, 77, 0.5); }
.idle-banner.stunned #idle-fill { background: linear-gradient(90deg, var(--hp), #ff9a3c); transition: none; }
.idle-banner.stunned .ib-socket { animation: caught-shake 0.5s ease-in-out infinite; }
.ib-caught { color: var(--hp); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ib-caught .gicon { font-size: 13px; }
@keyframes caught-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.reduce-motion .idle-banner.stunned .ib-socket { animation: none; }

/* ───────── Bazaar: high-density listing rows (search/filter/sort + history) ───────── */
.bz-list { display: flex; flex-direction: column; gap: 6px; }
.bz-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; padding: 8px 12px; min-width: 0; }
.bz-row { transition: background .15s ease; }
.bz-row:hover { background: rgba(255,122,24,.06); }
.bz-row .bz-ic { font-size: 20px; flex: none; }
.bz-row .bz-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bz-row .bz-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.bz-row .bz-name small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-row .bz-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.bz-row .bz-meta small { font-size: 11px; }
@media (max-width: 560px) {
  .bz-row { grid-template-columns: auto 1fr auto; }
  .bz-row .bz-meta { display: none; }
}

/* ───────── Themed form controls - dark fields, light text (no more bright white) ───────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select, textarea {
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
select:focus, textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember); }
/* Native dropdown list + autofill keep the dark theme too. */
select option { background: var(--panel, #1a1614); color: var(--ink); }
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
  caret-color: var(--ink);
}
/* Number-spinner arrows tinted (WebKit) */
input[type=number]::-webkit-inner-spin-button { filter: invert(0.7); }

/* ═══════════════ Wardrobe - cosmetic frames & name tints ═══════════════ */
/* A name can wear a FRAME (decorative border, wrapping a name span) and a TINT
   (flat colour or an animated gradient on the text). Frame + tint compose: the
   frame is the outer wrapper, the tinted text is the inner span. */
.pname { font-weight: 700; }
.cos-frame { display: inline-block; padding: 1px 9px; border-radius: 8px; border: 1.5px solid transparent; line-height: 1.45; vertical-align: middle; }
/* - Frames - each a distinct material/aura - */
.frame-iron     { border-color: #9aa3ad; background: linear-gradient(180deg, rgba(154,163,173,.16), transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.frame-thorned  { border-color: #46603c; background: linear-gradient(180deg, rgba(50,74,38,.30), transparent); box-shadow: inset 0 0 7px rgba(60,95,45,.5), 0 0 0 1px #1d2a17; }
.frame-bone     { border-color: #d8cdb0; background: rgba(216,205,176,.07); box-shadow: inset 0 0 7px rgba(216,205,176,.32); color: #efe6cf; }
.frame-frost    { border-color: #8fd3ff; background: linear-gradient(180deg, rgba(143,211,255,.16), transparent); box-shadow: 0 0 11px -3px #8fd3ff, inset 0 0 8px rgba(143,211,255,.28); animation: cosFrost 4.5s ease-in-out infinite; }
.frame-gilded   { border-color: #f5c451; background: linear-gradient(180deg, rgba(245,196,81,.16), transparent); box-shadow: 0 0 11px -3px rgba(245,196,81,.65), inset 0 0 6px rgba(245,196,81,.28); }
.frame-ember    { border-color: #ff7a18; background: linear-gradient(180deg, rgba(255,122,24,.18), transparent); box-shadow: 0 0 13px -3px #ff7a18; animation: cosEmber 2.4s ease-in-out infinite; }
.frame-founder  { border-color: #3fd6c5; background: linear-gradient(180deg, rgba(63,214,197,.15), transparent); box-shadow: 0 0 11px -3px #3fd6c5, inset 0 0 6px rgba(63,214,197,.25); }
.frame-sovereign{ border-color: #f5c451; background: linear-gradient(110deg, rgba(245,196,81,.26), rgba(142,68,173,.22), rgba(245,196,81,.26)); background-size: 220% 100%; box-shadow: 0 0 15px -3px rgba(245,196,81,.75), inset 0 0 9px rgba(142,68,173,.35); animation: cosSweep 5s linear infinite; }
.frame-abyssal  { border-color: #6c5ce7; background: radial-gradient(120% 140% at 50% -20%, rgba(108,92,231,.34), rgba(0,0,0,.55)); box-shadow: 0 0 17px -3px #6c5ce7, inset 0 0 13px rgba(0,0,0,.7); animation: cosAbyss 3.4s ease-in-out infinite; }
.frame-radiant  { border-color: #ffd98a; background: radial-gradient(120% 140% at 50% -30%, rgba(255,217,138,.34), transparent 70%); box-shadow: 0 0 16px -2px rgba(255,210,120,.8), inset 0 0 8px rgba(255,217,138,.4); animation: cosEmber 3s ease-in-out infinite; }
@keyframes cosEmber { 0%,100% { box-shadow: 0 0 9px -3px #ff7a18; border-color: #e8631c; } 50% { box-shadow: 0 0 18px -2px #ff9a3c; border-color: #ff9a3c; } }
@keyframes cosFrost { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
@keyframes cosSweep { to { background-position: 220% 0; } }
@keyframes cosAbyss { 0%,100% { box-shadow: 0 0 12px -3px #6c5ce7, inset 0 0 12px rgba(0,0,0,.7); } 50% { box-shadow: 0 0 22px -1px #6c5ce7, inset 0 0 16px rgba(0,0,0,.85); } }
/* - Animated gradient name tints - (flat hex tints are applied inline) - */
.nt { background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: ntFlow 6s linear infinite; }
.nt-ashen    { background-image: linear-gradient(90deg, #d7cdc0, #8a8077, #ff7a18, #8a8077, #d7cdc0); }
.nt-spectral { background-image: linear-gradient(90deg, #9fe6ff, #e6fbff, #6fb7d6, #e6fbff, #9fe6ff); filter: drop-shadow(0 0 4px rgba(120,220,255,.55)); animation-duration: 5s; }
.nt-molten   { background-image: linear-gradient(90deg, #f9d423, #ff7a18, #f5c451, #ff5d2e, #f9d423); filter: drop-shadow(0 0 4px rgba(245,196,81,.55)); animation-duration: 4s; }
.nt-astral   { background-image: linear-gradient(90deg, #5b8cff, #a0c4ff, #c8b6ff, #7aa0ff, #5b8cff); filter: drop-shadow(0 0 4px rgba(120,150,255,.5)); animation-duration: 7s; }
.nt-aurora   { background-image: linear-gradient(90deg, #3fd6c5, #5b8cff, #a06cff, #3fd6c5); filter: drop-shadow(0 0 4px rgba(80,200,200,.5)); }
.nt-void     { background-image: linear-gradient(90deg, #8c7dff, #2a2140, #0a0710, #4b3f7a, #8c7dff); filter: drop-shadow(0 0 6px rgba(108,92,231,.6)); animation-duration: 5s; }
.nt-prismatic { background-image: linear-gradient(90deg, #ff5d6c, #ffb24d, #f9f871, #4be3a6, #5b8cff, #a06cff, #ff5d6c); filter: drop-shadow(0 0 4px rgba(255,255,255,.4)); animation-duration: 4s; }
@keyframes ntFlow { to { background-position: 220% center; } }
.reduce-motion .frame-frost, .reduce-motion .frame-ember, .reduce-motion .frame-sovereign, .reduce-motion .frame-abyssal, .reduce-motion .nt { animation: none; }
/* Wardrobe preview chip - a live look at the cosmetic on your own name */
.cos-preview { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.28); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0 8px; font-size: 14px; min-height: 38px; }
.cos-preview .faint { font-size: 12px; }

/* ═══════════════ Hero card - public player profile ═══════════════ */
.pcard-head { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.pcard-crest { width: 56px; height: 56px; flex: none; display: grid; place-items: center; font-size: 30px; color: var(--ember-2);
  background: radial-gradient(circle at 50% 28%, rgba(255,122,24,.20), var(--bg-2)); border: 1px solid var(--line); border-radius: 14px; box-shadow: inset 0 0 16px rgba(0,0,0,.55), 0 0 14px -6px var(--ember); }
.pcard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pc-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 4px; }
.pc-stat-ic { font-size: 17px; color: var(--ember-2); }
.pc-stat b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pc-stat small { font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.pcard-h { display: flex; align-items: center; gap: 7px; margin: 15px 0 7px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ember-2); font-weight: 700; }
.pcard-h .gicon { font-size: 15px; }
.pcard-feats { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-feat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--gold);
  background: rgba(245,196,81,.08); border: 1px solid rgba(245,196,81,.32); border-radius: 999px; padding: 3px 11px; }
.pc-feat .gicon { font-size: 13px; }
.pcard-showcase { display: flex; flex-direction: column; gap: 7px; }
.pc-show { display: flex; gap: 10px; align-items: center; min-width: 0;
  background: linear-gradient(180deg, rgba(245,196,81,.07), transparent); border: 1px solid rgba(245,196,81,.24); border-radius: 12px; padding: 9px 11px; }
.pc-show-ic { font-size: 23px; color: var(--gold); flex: none; }
.pc-show b { font-size: 13.5px; }
.pc-coll { margin: 7px 0; }
.sc-row { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.sc-row input { flex: none; width: 17px; height: 17px; accent-color: var(--ember); }
.lb-row:hover { background: rgba(255,122,24,.06); }
/* Clickable cards (forum threads, list rows) get a subtle ember lift on hover. */
.card.thread-row:hover { border-color: rgba(232,99,28,.45); box-shadow: 0 0 16px -8px var(--ember); }

/* ═══════════════ Juice: big-moment banner + screen shake ═══════════════ */
.big-moment { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; }
.big-moment span { font-family: Cinzel, serif; font-weight: 900; font-size: clamp(36px, 9vw, 76px); letter-spacing: .05em; text-align: center;
  color: var(--gold); text-shadow: 0 0 34px rgba(245,196,81,.75), 0 4px 12px rgba(0,0,0,.85); -webkit-text-stroke: 1px rgba(20,12,6,.5);
  animation: bigMoment 1.4s cubic-bezier(.2,.9,.2,1) forwards; }
.big-moment.rare span { color: var(--ember-2); text-shadow: 0 0 34px rgba(255,150,40,.85), 0 4px 12px rgba(0,0,0,.85); }
@keyframes bigMoment { 0% { transform: scale(.4) rotate(-3deg); opacity: 0; } 16% { transform: scale(1.14) rotate(1deg); opacity: 1; } 68% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(1.06); opacity: 0; } }
@keyframes screenShake { 10%,90% { transform: translateX(-2px); } 20%,80% { transform: translateX(4px); } 30%,50%,70% { transform: translateX(-7px); } 40%,60% { transform: translateX(7px); } }
.shake { animation: screenShake .45s ease-in-out; }
.reduce-motion .big-moment span, .reduce-motion .shake { animation: none; }
.dock-chip.danger { border-color: rgba(179,67,74,.6); background: rgba(179,67,74,.14); }
.dock-chip.danger b { color: #ff8a8f; }
.dock-chip.limited-chip { border-color: rgba(245,196,81,.6); background: rgba(245,196,81,.12); box-shadow: 0 0 14px -5px rgba(245,196,81,.6); }
.dock-chip.limited-chip b { color: var(--gold); }