/* ============================================================
   IDLE PARTY — design tokens
   Palette: a guild ledger read by candlelight.
   ============================================================ */
:root{
  --ink:#161320;          /* deep blackberry ink — the night */
  --ink-2:#1f1b2c;        /* raised panel */
  --ink-3:#2a2438;        /* borders / wells */
  --vellum:#ece1c8;       /* parchment text */
  --vellum-dim:#9d937f;   /* faded ink */
  --gold:#d4a24c;         /* gilding — used sparingly */
  --gold-dim:#8a6a30;
  --blood:#b04a40;        /* banes, danger */
  --verdant:#6f9560;      /* boons, success */
  --arcane:#7d6bb0;       /* magic */

  --r:3px;                /* almost no radius — this is a ledger, not an app */
  --shadow:0 2px 0 rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}

/* The `hidden` attribute is set by the browser's default stylesheet as
   `display:none`. ANY author rule that sets `display` (e.g. `.overlay{display:flex}`)
   silently beats it, and the element stays on screen while JS believes it is hidden.
   This one rule makes `hidden` authoritative everywhere. */
[hidden]{display:none !important}
/* min-height (not height) so the page GROWS with its content — a fixed 100%
   height traps the content and the fixed bottom nav then clips the last panel */
html,body{min-height:100vh}
body{
  background:var(--ink);
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(212,162,76,.07), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  color:var(--vellum);
  font-family:'Spectral',Georgia,serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* clear the fixed bottom nav (~59px) with breathing room + device safe area */
  padding-bottom:calc(92px + env(safe-area-inset-bottom));
}
h1,h2,h3,.display{font-family:'Cinzel',serif;letter-spacing:.04em;}
.mono,.num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}

/* layout */
.wrap{max-width:820px;margin:0 auto;padding:16px 14px 0;}
.panel{
  background:var(--ink-2);
  border:1px solid var(--ink-3);
  border-top:1px solid rgba(212,162,76,.18);
  border-radius:var(--r);
  padding:14px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.panel h2{
  font-size:13px;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--ink-3);padding-bottom:8px;margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
}
.panel h2 .aside{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);letter-spacing:0;text-transform:none;}

/* masthead */
header.mast{text-align:center;padding:22px 0 10px;}
header.mast h1{font-size:26px;color:var(--vellum);}
header.mast h1 span{color:var(--gold);}
header.mast .sub{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--vellum-dim);margin-top:4px;font-family:'JetBrains Mono',monospace;}

/* ---- SIGNATURE: the task lantern ---- */
.lantern-row{display:flex;gap:16px;align-items:center;}
.lantern{position:relative;width:104px;height:104px;flex:0 0 104px;}
.lantern svg.ring-svg{transform:rotate(-90deg);display:block}
.lantern .track{stroke:var(--ink-3);}
.lantern .fill{stroke:var(--gold);transition:stroke-dashoffset .95s linear;}
.lantern.watching .fill{stroke:#f0c574;filter:drop-shadow(0 0 6px rgba(240,197,116,.55));}
.lantern .portrait{
  position:absolute;inset:12px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%, #3a3150, #1b1727);
  border-radius:50%;color:var(--vellum);
}
.lantern.watching .portrait{color:#f0c574}

/* hand-inked icons */
.ic-svg{display:block;flex:0 0 auto;filter:url(#inked);}
#inkdefs{position:absolute;width:0;height:0;overflow:hidden}
.lantern.watching .portrait{box-shadow:inset 0 0 18px rgba(240,197,116,.25);}
.lantern .pct{
  position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  background:var(--ink);border:1px solid var(--ink-3);
  font-family:'JetBrains Mono',monospace;font-size:10px;padding:1px 6px;border-radius:2px;color:var(--gold);
}
.doing{flex:1;min-width:0}
.doing .verb{font-family:'Cinzel',serif;font-size:19px;line-height:1.25;}
.doing .flavour{font-style:italic;color:var(--vellum-dim);font-size:13px;margin:2px 0 8px;}
.times{display:flex;gap:14px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;}
.times b{display:block;color:var(--vellum);font-size:14px;font-weight:400;}
.times .lbl{color:var(--vellum-dim);font-size:9px;letter-spacing:.12em;text-transform:uppercase;}
.times .watch b{color:#f0c574}
.times .away b{color:var(--vellum-dim)}

/* buttons */
button{
  font-family:'Cinzel',serif;font-size:12px;letter-spacing:.06em;
  background:var(--ink-3);color:var(--vellum);
  border:1px solid #3a3350;border-radius:var(--r);
  padding:9px 12px;cursor:pointer;transition:.12s;
}
button:hover:not(:disabled){background:#37304c;border-color:var(--gold-dim);}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{opacity:.35;cursor:not-allowed}
button.gold{background:var(--gold);color:#231b0c;border-color:var(--gold);font-weight:700}
button.gold:hover:not(:disabled){background:#e8b866}
button.ghost{background:transparent}
button.wide{width:100%}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}

/* task menu — a compact grouped list; the detail lives in the setup pop-up */
.tasks{display:flex;flex-direction:column;gap:3px}
.task-group{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vellum-dim);margin:12px 2px 4px;
}
.task-group:first-child{margin-top:2px}
.task-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 12px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:8px;
}
.task-row:hover{border-color:var(--gold-dim);background:var(--ink)}
.task-row .tr-name{font-family:'Cinzel',serif;font-size:15px;color:var(--vellum)}
.task-row .tr-skill{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);margin-left:auto}
.task-row .tr-now{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--verdant);
  border:1px solid var(--verdant);border-radius:999px;padding:1px 7px}
.task-row .tr-go{color:var(--vellum-dim);font-size:18px;line-height:1}
.task-row.klass .tr-name::after{content:' ✦';color:var(--arcane)}

/* task setup pop-up (Step 2) */
.ts-close{width:34px;height:34px;font-size:22px;line-height:1;color:var(--vellum-dim);
  background:none;border:none;cursor:pointer}
.ts-close:hover{color:var(--vellum)}
.ts-meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--vellum-dim);margin:0 0 6px}
.ts-flavour{font-style:italic;color:var(--vellum-dim);margin:0 0 14px}
.pick-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--vellum-dim);margin-bottom:7px}
.pick-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;align-items:center}
.pick-chip{font-size:14px;padding:7px 13px;border-radius:999px}
.pick-chip.sel{border-color:var(--gold);color:var(--gold)}
.pick-goal{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);opacity:.7}
.ts-count{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px;font-size:14px}
.ts-count .stepper{display:inline-flex;align-items:center;gap:14px}
.ts-count .stepper button{width:32px;height:32px;font-size:18px;line-height:1;padding:0}
.ts-count .stepper b{font-size:17px;min-width:20px;text-align:center;display:inline-block}
.ts-foot{display:flex;gap:8px}

/* ---- expedition queue + gather beats ---- */
.taskrow{display:flex;gap:6px;align-items:stretch}
.taskrow .task{flex:1;min-width:0}
.qadd{
  flex:0 0 auto;width:34px;border:1px solid var(--ink-3);background:var(--ink-2);
  color:var(--gold);font-size:20px;line-height:1;border-radius:6px;cursor:pointer;
}
.qadd:hover{border-color:var(--gold);background:var(--ink)}

.times .estimate{display:flex;align-items:baseline;gap:8px}

#queueBox .qhead{display:flex;justify-content:flex-end;margin-bottom:8px}
.loop{
  font-size:11px;padding:3px 12px;border-radius:999px;border:1px solid var(--ink-3);
  background:var(--ink-2);color:var(--vellum-dim);cursor:pointer;letter-spacing:.04em;
}
.loop.on{border-color:var(--gold);color:var(--gold)}
.qlist{display:flex;flex-direction:column;gap:6px}
.qitem{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--ink-3);
  border-radius:6px;background:var(--ink-2);font-size:13px;
}
.qitem.now{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(212,162,76,.25)}
.qitem .qi-n{flex:1;min-width:0;font-family:'Cinzel',serif}
.qitem .qi-tag{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold);letter-spacing:.06em}
.qi-x{
  flex:0 0 auto;width:26px;height:26px;border-radius:5px;border:1px solid var(--ink-3);
  background:var(--ink);color:var(--vellum-dim);font-size:18px;line-height:1;cursor:pointer;
}
.qi-x:hover{border-color:var(--blood);color:var(--blood)}
.qest{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);margin:10px 0}
.qbtns{display:flex;gap:8px}
.qbtns .wide{flex:1}
.qrun{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--vellum-dim)}

.workspeed{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);margin-top:8px;padding-top:8px;border-top:1px solid var(--ink-3)}
.workspeed b{color:var(--gold)}

/* gather beats in the ledger */
.ledger .hit{color:var(--verdant);font-weight:600}
.ledger .miss{color:var(--vellum-dim);font-style:italic}
.ledger .roll{color:var(--arcane);font-family:'JetBrains Mono',monospace;font-size:10px}

/* creation: preset-code row */
.preset{display:flex;gap:8px}
.preset #presetCode{flex:1}

/* ---- HUD: level + xp + current activity, stuck to the top of every page ---- */
#hud{
  position:sticky;top:8px;z-index:18;
  display:flex;align-items:center;gap:12px;
  background:rgba(14,38,62,.80);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(120,220,255,.35);border-radius:10px;
  padding:8px 14px;margin:2px 0 10px;
  box-shadow:0 6px 18px rgba(0,0,0,.30);
}
#hud .hud-lvl{font-family:'JetBrains Mono',monospace;font-size:12px;color:#8fe0ff;white-space:nowrap}
#hud .hud-lvl b{font-size:15px}
#hud .hud-bar{flex:1;height:6px;background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden}
#hud .hud-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fd0da,#a6f0a0);transition:width .6s ease}
#hud .hud-hp{flex:0 0 auto;display:flex;align-items:center;gap:6px;white-space:nowrap}
#hud .hud-hp-bar{width:60px;height:6px;background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden}
#hud .hud-hp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c14d43,#e0a24c);transition:width .4s ease}
#hud .hud-hp-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);font-weight:400}
#hud .hud-doing{
  font-family:'Cinzel',serif;font-size:13px;color:var(--vellum);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30%;
}
@media(max-width:520px){ #hud .hud-hp-num{display:none} #hud .hud-doing{max-width:22%} }
#hud .hud-coin{
  flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:12px;
  color:var(--gold);white-space:nowrap;
  padding-left:12px;border-left:1px solid rgba(120,220,255,.22);
}

/* ---- the Homestead ---- */
#homeBox{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){ #homeBox{grid-template-columns:repeat(auto-fit, minmax(380px, 1fr))} }
.homecard{margin-bottom:0}
.homecard.unbuilt{opacity:.85}
.hc-flavour{font-style:italic;color:var(--vellum-dim);font-size:13px;margin:2px 0 12px}
.hc-produces{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--vellum-dim);margin-bottom:10px}
.hc-store{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hc-store .bar{margin:0}
.hc-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);white-space:nowrap}
.hc-steward{font-size:13px;color:var(--verdant);font-style:italic;margin-bottom:10px}
.hc-btns{gap:8px;flex-wrap:wrap}
.hc-mile{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold-dim);margin-top:9px;letter-spacing:.06em}

/* ---- selling from the bag ---- */
.item .sellrow{display:flex;gap:5px;align-items:center;margin-left:8px}
.sellbtn,.consign{
  font-family:'JetBrains Mono',monospace;font-size:10px;padding:3px 8px;border-radius:6px;
  border:1px solid var(--ink-3);background:var(--ink-2);color:var(--vellum-dim);cursor:pointer;white-space:nowrap;
}
.sellbtn:hover{border-color:var(--gold);color:var(--gold)}
.consign.on{border-color:var(--verdant);color:var(--verdant)}
.item .worn{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--vellum-dim);opacity:.7}
.item .roll{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold)}

/* ---- the merchant ---- */
.shop-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.shop-purse{font-size:14px;color:var(--gold)}
.shop-timer{font-size:11px;color:var(--vellum-dim)}
.shop-list{display:flex;flex-direction:column;gap:6px}
.shopitem{
  display:flex;align-items:center;gap:10px;text-align:left;width:100%;
  padding:9px 11px;border:1px solid var(--ink-3);border-radius:8px;background:var(--ink-2);cursor:pointer;
}
.shopitem:hover{border-color:var(--gold)}
.shopitem.poor{opacity:.5}
.shopitem .si-l{flex:1;min-width:0;display:flex;align-items:center;gap:7px;font-size:13px}
.shopitem .si-s{font-size:10px;color:var(--vellum-dim);white-space:nowrap}
.shopitem .si-p{font-size:12px;color:var(--gold);white-space:nowrap}

/* ---- resource ladder chips on gathering task cards ---- */
.reschips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.chip-res{
  font-family:'JetBrains Mono',monospace;font-size:11px;padding:2px 9px;
  border:1px solid var(--ink-3);border-radius:999px;color:var(--vellum-dim);cursor:pointer;
}
.chip-res:hover{border-color:var(--gold-dim)}
.chip-res.sel{border-color:var(--gold);color:var(--gold)}
.chip-res.locked{opacity:.45;cursor:default}

/* ============================================================================
   BLUE-GLASS THEME  (redesign slice 1)
   Translucent frosted panels with glowing cyan borders over a deep-blue
   background; the nav becomes a left rail on tablet/desktop widths. Text, gold
   accents and rarity colours are kept — cyan is the new frame + glow accent.
   ============================================================================ */
body{
  background:#0a1a2e;
  background-image:
    radial-gradient(1100px 700px at 50% -12%, rgba(90,200,255,.12), transparent 60%),
    radial-gradient(900px 600px at 110% 115%, rgba(60,130,210,.14), transparent 60%),
    linear-gradient(165deg, #0a1a2e 0%, #0d2338 48%, #091625 100%);
  background-attachment:fixed;
}
header.mast h1{color:#e2f4ff;text-shadow:0 0 20px rgba(120,220,255,.5)}
header.mast h1 span{color:#69cffb;text-shadow:0 0 22px rgba(105,207,251,.6)}

.panel{
  background:rgba(28,78,120,.24);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid rgba(120,220,255,.40);
  border-top:1px solid rgba(160,238,255,.62);
  border-radius:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.34), 0 0 22px rgba(90,200,255,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
.panel h2{
  color:#c6ecff;
  border-bottom:1px solid rgba(120,220,255,.22);
  text-shadow:0 0 10px rgba(120,220,255,.30);
}

/* progress bars pick up the mockup's teal->green fill */
.bar i{background:linear-gradient(90deg,#3fd0da,#a6f0a0)}

/* nav: frosted bar on phones, glowing left rail on tablets/desktop.
   Uses the #tabs id so these win over the base nav rules further down the file
   regardless of source order (id beats class). */
#tabs{
  background:rgba(14,38,62,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(120,220,255,.30);
}
#tabs button[aria-selected=true]{color:#8fe0ff;box-shadow:inset 0 2px 0 #6fd3ff}

@media(min-width:900px){
  #tabs{
    top:0;bottom:0;right:auto;width:156px;   /* wide enough for "Quest Board" on one line */
    flex-direction:column;justify-content:flex-start;gap:2px;
    border-top:0;border-right:1px solid rgba(120,220,255,.28);
    padding:12px 8px calc(12px + env(safe-area-inset-bottom));
  }
  /* compact, tidy list items — icon beside label, never wrapped mid-phrase */
  #tabs button{
    flex:0 0 auto; flex-direction:row; align-items:center; justify-content:flex-start; gap:9px;
    width:100%; padding:7px 10px; font-size:13px; letter-spacing:.02em; line-height:1;
    border-radius:7px; text-transform:none; min-height:0; white-space:nowrap;
  }
  #tabs button:hover{background:rgba(120,220,255,.07)}
  #tabs button .ic{display:flex; align-items:center; height:16px; width:16px; flex:0 0 auto}
  #tabs button .ic svg{width:16px; height:16px}
  #tabs button[aria-selected=true]{color:#8fe0ff; box-shadow:inset 3px 0 0 #6fd3ff; background:rgba(120,220,255,.12)}
  body{padding-left:156px; padding-bottom:0}
}

/* ============================================================================
   RESPONSIVE DASHBOARD REFLOW
   The main screen is a fluid grid: panels sit side by side when there's room
   (each column at least 320px so they never squish) and drop cleanly into one
   column on narrow screens. No scaling — every font stays crisp at native px.
   ============================================================================ */
.wrap{max-width:none}                            /* fill the window edge to edge, like any app */

/* HARD FLOOR: the page never renders narrower than this — below it the layout
   holds its size and scrolls sideways instead of cramming everything smaller. */
html,body{min-width:400px}

/* A MASONRY driven purely by available width (no breakpoint gate) — panels pack
   into as many ~340px columns as fit, so the dashboard fills the space at ANY
   width or zoom: one column when narrow, 2-3-4 as the window widens. */
#tab-adventure{ column-width:340px; column-gap:14px; }
#tab-adventure > .panel{ margin:0 0 14px; break-inside:avoid; }

/* .tiles — the other pages tile their cards with grid auto-fit: a lone card
   fills the width, two-plus flow into ~340px columns. align-items:start keeps
   each card its natural height (no stretching to the tallest in a row). */
.tiles{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start; margin-bottom:14px; }
@media(min-width:900px){ .tiles{ grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); } }
.tiles > .panel{ margin:0; }
/* Homestead: let the building cards join the section grid as siblings of the shop */
#tab-homestead.tiles > #homeBox{ display:contents; }
/* draggable blocks that aren't .panel (the Character stage/side) still need a
   positioning context for the corner handle, and the drag highlight */
.side{ position:relative; }
[data-panel].dragging{ opacity:.6; outline:2px dashed rgba(120,220,255,.75); outline-offset:-2px; }

/* ============================================================================
   READABLE TYPE SCALE
   The base theme is intentionally dense (lots of 9-13px text). Bump the whole
   scale up to comfortable, standard-app reading sizes. Pure px — no zoom.
   ============================================================================ */
body{font-size:16px}
.panel h2{font-size:15px}
.panel h2 .aside{font-size:12px}
header.mast h1{font-size:30px}
header.mast .sub{font-size:12px}

.doing .verb{font-size:21px}
.doing .flavour{font-size:14px}
.times .lbl{font-size:11px}
.times b{font-size:16px}

.task .tname{font-size:15px}
.task .tmeta{font-size:12px}

.qitem{font-size:14px}
.qi-tag{font-size:11px}
.qest{font-size:12px}
.note{font-size:13px}

.ledger .entry{font-size:14px}
.ledger .ts{font-size:12px}

.stat{font-size:13px}
.skill .sname{font-size:13px}
.dsub{font-size:11px}
.ddesc{font-size:15px}
.rc-name{font-size:17px}
.rc-desc{font-size:13px}
.clbtn{font-size:13px}
.item, .gearitem{font-size:14px}
.member .n{font-size:14px}
.member .c{font-size:12px}
.st-name{font-size:15px}
.st-desc{font-size:12px}

/* ============================================================================
   DRAGGABLE DASHBOARD PANELS
   A dotted grab handle sits in each panel's clear bottom-right corner. Drag it
   to reorder the panels; the arrangement is saved.
   ============================================================================ */
.panel{position:relative}
.drag-handle{
  position:absolute; right:7px; bottom:7px; width:18px; height:18px;
  cursor:grab; opacity:.4; z-index:6; touch-action:none; color:#9fdcff;
  background-image:radial-gradient(currentColor 1.1px, transparent 1.6px);
  background-size:5px 5px; border-radius:4px;
}
.drag-handle:hover{opacity:.95}
.drag-handle:active{cursor:grabbing}
.panel.dragging{opacity:.6; outline:2px dashed rgba(120,220,255,.75); outline-offset:-2px}

/* ============================================================================
   PARALLAX BACKGROUND — the pixel-art scene behind the glass UI.
   A fixed, oversized layer that translates slowly on scroll (wired in core.js).
   A dark scrim over it keeps the translucent panels readable over bright areas.
   ============================================================================ */
html{background:#0a1a2e}
body{background:transparent}          /* let the #bg scene show through */
#bg{
  position:fixed; left:0; top:-16vh; width:100%; height:132vh;
  z-index:-2; pointer-events:none; will-change:transform;
  background:#0a1a2e center center / cover no-repeat;
  background-image:url('IdlePartyBackground.png');
  image-rendering:pixelated;          /* keep the pixel art crisp */
}
#bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,14,30,.40) 0%, rgba(8,14,30,.5) 55%, rgba(6,12,24,.62) 100%);
}

/* skills */
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.skill{background:var(--ink);border:1px solid var(--ink-3);padding:7px 9px;border-radius:var(--r)}
.skill .sname{display:flex;justify-content:space-between;font-size:12px;font-family:'JetBrains Mono',monospace}
.skill .sname b{color:var(--gold)}
.bar{height:3px;background:var(--ink-3);margin-top:5px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold-dim)}

/* stats */
.stats{display:flex;gap:6px;flex-wrap:wrap}
.stat{background:var(--ink);border:1px solid var(--ink-3);padding:5px 9px;font-family:'JetBrains Mono',monospace;font-size:11px}
.stat b{color:var(--vellum);font-weight:700}
.stat span{color:var(--vellum-dim)}

/* effects (boons & banes) */
.fx{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  padding:3px 7px;border:1px solid;border-radius:2px;display:flex;gap:5px;align-items:center;
}
.chip.boon{color:var(--verdant);border-color:rgba(111,149,96,.5);background:rgba(111,149,96,.08)}
.chip.bane{color:var(--blood);border-color:rgba(176,74,64,.5);background:rgba(176,74,64,.08)}
.chip .t{opacity:.6}

/* ---- scrollbars: slim, translucent, glass-styled — everywhere ----
   Covers the ledger, tree nodes, gift bag, overlays and any future scroll area.
   Firefox first (scrollbar-*), then the WebKit pseudo-elements. */
*{scrollbar-width:thin; scrollbar-color:rgba(120,220,255,.35) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(120,220,255,.28);
  border-radius:999px;
  border:2px solid transparent;         /* inset the thumb so it floats slim */
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(120,220,255,.5);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* ledger (loot feed) */
.ledger{max-height:230px;overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:12px}
.entry{
  display:flex;gap:8px;padding:5px 0;border-bottom:1px dashed var(--ink-3);
}
.entry.is-new{animation:stamp .35s ease-out}
@keyframes stamp{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.entry .ts{color:var(--vellum-dim);flex:0 0 42px;font-size:10px;padding-top:2px}
.entry .tx{flex:1}
.r-common{color:var(--vellum)}
.r-uncommon{color:var(--verdant)}
.r-rare{color:#5b8fc9}
.r-epic{color:var(--arcane)}
.r-legendary{color:var(--gold);text-shadow:0 0 8px rgba(212,162,76,.5)}

/* purse */
.purse{display:flex;gap:12px;font-family:'JetBrains Mono',monospace;font-size:14px;align-items:center}
.coin{display:flex;gap:4px;align-items:center}
.coin i{width:9px;height:9px;border-radius:50%;display:block;font-style:normal}
.coin.g i{background:#d4a24c}
.coin.s i{background:#b9bcc4}
.coin.c i{background:#a3663c}

/* inventory */
.inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;font-size:12px}
.item{background:var(--ink);border:1px solid var(--ink-3);padding:6px 8px;display:flex;justify-content:space-between;gap:6px}
.item .q{font-family:'JetBrains Mono',monospace;color:var(--vellum-dim)}

/* party */
.member{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--ink-3)}
.member:last-child{border:0}
.member .av{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;background:var(--ink);border:1px solid var(--ink-3);border-radius:50%;color:var(--gold)}
.member .who{flex:1;min-width:0}
.member .who .n{font-family:'Cinzel',serif;font-size:14px}
.member .who .c{font-size:11px;color:var(--vellum-dim);font-family:'JetBrains Mono',monospace}
.member .buff{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--verdant);text-align:right}
.member.offline .av{opacity:.45}
.code{
  font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:.3em;
  color:var(--gold);text-align:center;padding:10px;background:var(--ink);
  border:1px dashed var(--gold-dim);margin-bottom:10px;
}
input[type=text]{
  font-family:'JetBrains Mono',monospace;background:var(--ink);color:var(--vellum);
  border:1px solid var(--ink-3);padding:9px;border-radius:var(--r);width:100%;font-size:14px;
}
input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* dungeon */
.dungeon{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.dungeon .dname{font-family:'Cinzel',serif;font-size:16px}
.dungeon .dmeta{font-size:12px;color:var(--vellum-dim);font-style:italic}
.timer{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--blood)}

/* tabs */
nav.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  display:flex;background:var(--ink-2);border-top:1px solid var(--ink-3);
  padding-bottom:env(safe-area-inset-bottom);
}
nav.tabs button{
  flex:1;border:0;border-radius:0;background:transparent;
  padding:12px 4px;font-size:10px;letter-spacing:.08em;color:var(--vellum-dim);
  display:flex;flex-direction:column;gap:3px;align-items:center;
}
nav.tabs button .ic{display:block;height:21px}
nav.tabs button[aria-selected=true]{color:var(--gold);box-shadow:inset 0 2px 0 var(--gold)}
section[hidden]{display:none}

/* toast */
#toast{
  position:fixed;left:50%;bottom:86px;transform:translate(-50%,20px);
  background:var(--ink-3);border:1px solid var(--gold-dim);color:var(--vellum);
  padding:9px 14px;font-size:13px;border-radius:var(--r);
  opacity:0;pointer-events:none;transition:.25s;z-index:30;max-width:90vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

.note{font-size:11px;color:var(--vellum-dim);font-style:italic;margin-top:8px}
.center{text-align:center}
.sep{height:1px;background:var(--ink-3);margin:12px 0}

/* ============ CHARACTER SCREEN: the avatar leads, text follows ============ */
/* .charscreen now tiles via the .tiles grid (class added in HTML) */

.stage{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 30%, #2b2440 0%, #1a1626 55%, #131020 100%);
  border:1px solid var(--ink-3);
  border-top:1px solid rgba(212,162,76,.22);
  border-radius:var(--r);
  box-shadow:var(--shadow), inset 0 0 60px rgba(0,0,0,.5);
  min-height:56vh;                 /* the character owns the screen */
  display:flex;flex-direction:column;
  padding:12px;overflow:hidden;
}
/* faint ruled backdrop, like a page it's been drawn on */
.stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 14px);
  mask-image:radial-gradient(ellipse at 50% 45%, #000 40%, transparent 78%);
}
.stage-art{flex:1;display:grid;place-items:center;min-height:0;position:relative;z-index:1}

/* The sprite is 32x40 real pixels, blown up hard. No smoothing, no apologies. */
.avsprite{
  height:100%;max-height:42vh;width:auto;display:block;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));
}
/* the pool of light the character stands in, tinted by class */
.stage-art::after{
  content:'';position:absolute;bottom:4%;left:50%;transform:translateX(-50%);
  width:52%;height:16px;border-radius:50%;
  background:radial-gradient(ellipse, var(--cast, #d4a24c) 0%, transparent 70%);
  opacity:.32;pointer-events:none;
}

.stage-name{position:relative;z-index:1;text-align:center}
.sn-name{font-family:'Cinzel',serif;font-size:22px;color:var(--vellum);line-height:1.15}
.sn-class{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-top:3px;
}
.stage-lvl{
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
}
.stage-lvl .slv{color:var(--vellum-dim);white-space:nowrap}
.stage-lvl .slv b{color:var(--gold);font-size:14px}
.stage-lvl .sxp{color:var(--vellum-dim);white-space:nowrap;font-size:10px}
.bar.wide{flex:1;height:4px;margin:0}

/* the side panel is deliberately quiet */
.side{display:flex;flex-direction:column;gap:8px}
.card{
  background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:var(--r);padding:10px 12px;
}
.card summary{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.card summary::-webkit-details-marker{display:none}
.card summary::after{content:'+';color:var(--vellum-dim);font-size:14px}
.card[open] summary::after{content:'−'}
.card summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.card > *:not(summary){margin-top:10px}
.stats.tight{gap:4px}
.stats.tight .stat{padding:4px 7px;font-size:10px}
.skills.tight{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.kit.stack{grid-template-columns:1fr;gap:6px}

/* appearance swatches */
.swatches{display:flex;gap:7px;flex-wrap:wrap}
.sw{
  width:30px;height:30px;padding:0;border-radius:50%;
  border:2px solid var(--ink-3);cursor:pointer;transition:.12s;
}
.sw:hover{transform:scale(1.08)}
.sw[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,162,76,.25)}
.sw.wide-sw{
  width:auto;height:auto;border-radius:var(--r);padding:7px 11px;
  background:var(--ink);font-size:11px;color:var(--vellum);
}
.sw.wide-sw[aria-pressed=true]{background:#37304c;color:var(--gold)}

@media(min-width:720px){
  .stage{min-height:62vh}
  .avsprite{max-height:48vh}
}


/* council banner — the way back into a dismissed board */
.council-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top-color:var(--gold);
}
.cb-t{font-family:'Cinzel',serif;font-size:15px;color:var(--gold)}
.cb-s{font-size:12px;color:var(--vellum-dim);font-style:italic;margin-top:2px}

/* ===================== PAPER DOLL ===================== */
.doll{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:7px}
.slot{
  display:flex;align-items:center;gap:9px;text-align:left;padding:9px;position:relative;
  background:var(--ink);border:1px solid var(--ink-3);
}
.slot.empty{opacity:.65}
.slot.open{border-color:var(--gold);background:#332c46;box-shadow:0 0 0 1px var(--gold)}
.slot .sl-art{flex:0 0 auto;color:var(--vellum)}
.slot.empty .sl-art{color:#4a4358}
.slot .sl-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sl-slot{
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vellum-dim);
}
.sl-item{font-family:'Cinzel',serif;font-size:11px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-item.none{color:#4a4358}
.sl-n{
  position:absolute;top:5px;right:6px;
  font-family:'JetBrains Mono',monospace;font-size:8px;
  background:var(--gold);color:#231b0c;border-radius:8px;padding:0 4px;font-weight:700;
}

/* quick-swap drawer */
.swapper{margin-top:10px;border-top:1px solid var(--ink-3);padding-top:10px}
.sw-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
}
button.sm{padding:4px 9px;font-size:10px}
.sw-list{display:flex;flex-direction:column;gap:6px}
.swopt{
  display:flex;align-items:center;gap:9px;text-align:left;padding:8px 10px;
  background:var(--ink);border:1px solid var(--ink-3);
}
.swopt:hover{border-color:var(--gold-dim)}
.sw-art{flex:0 0 auto;color:var(--vellum)}
.sw-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sw-name{font-family:'Cinzel',serif;font-size:12px}
.sw-stats,.sw-delta{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  display:flex;gap:5px;flex-wrap:wrap;letter-spacing:0;
}
.sw-delta{flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:1px}
.sb.up{color:var(--verdant)}
.sb.dn{color:var(--blood)}
.nostat{color:#4a4358}

/* gear rows */
.gearitem{cursor:pointer;text-align:left}
.gearitem:hover{border-color:var(--gold-dim)}
.gi-l{display:flex;align-items:center;gap:6px;min-width:0}
.item.isgear{border-left:2px solid var(--gold-dim)}

/* sort bar */
.sortbar{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.sortlbl{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--vellum-dim);
}
.sortbar .seg{flex:1}
.sortbar .seg button{flex:1;padding:6px 4px;font-size:10px}

/* ===================== QUESTS ===================== */
.qlist{display:flex;flex-direction:column;gap:8px}
.quest{display:flex;flex-direction:column;gap:3px;text-align:left;padding:11px}
.quest .qname{font-family:'Cinzel',serif;font-size:14px}
.quest .qflav{font-family:'Spectral',serif;font-style:italic;font-size:12px;color:var(--vellum-dim);letter-spacing:0}
.qactive .qname{font-family:'Cinzel',serif;font-size:16px;color:var(--gold);margin-bottom:9px}
.qstages{display:flex;flex-direction:column;gap:2px}
.qstage{
  display:flex;align-items:center;gap:9px;padding:6px 0;
  font-size:13px;color:var(--vellum-dim);
}
.qstage .qdot{
  width:8px;height:8px;flex:0 0 8px;border-radius:50%;
  border:1px solid var(--ink-3);background:var(--ink);
}
.qstage.done{color:var(--vellum-dim)}
.qstage.done .qdot{background:var(--verdant);border-color:var(--verdant)}
.qstage.now{color:var(--vellum)}
.qstage.now .qdot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 7px var(--gold)}
.qstage.boss .ql{font-family:'Cinzel',serif;color:var(--blood)}
.qstage.boss .qdot{border-color:var(--blood)}
.qstage .ql{flex:1;min-width:0}
.qstage .qt{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold)}
.qstage .qt.done{color:var(--verdant)}

/* ===================== THE LOOT COUNCIL ===================== */
.overlay{
  position:fixed;inset:0;z-index:40;
  background:rgba(8,6,14,.86);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;overflow-y:auto;
}
.overlay[hidden]{display:none !important}
/* ===================== QUEST / DUNGEON DETAIL ===================== */
.detail{
  width:100%;max-width:560px;
  background:var(--ink-2);border:1px solid var(--ink-3);
  border-top:2px solid var(--gold);
  border-radius:var(--r) var(--r) 0 0;
  padding:16px 15px calc(16px + env(safe-area-inset-bottom));
  animation:rise .28s ease-out;
  max-height:88vh;overflow-y:auto;
}
.dt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dt-kind{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--vellum-dim);
}
.dt-title{font-family:'Cinzel',serif;font-size:21px;color:var(--gold);line-height:1.1;margin-top:2px}
.dt-rec{
  font-family:'JetBrains Mono',monospace;font-size:10px;white-space:nowrap;
  padding:3px 7px;border-radius:2px;border:1px solid;
}
.dt-rec.ok{color:var(--verdant);border-color:rgba(111,149,96,.5)}
.dt-rec.under{color:var(--blood);border-color:rgba(176,74,64,.5)}
.dt-lore{
  font-family:'Spectral',serif;font-style:italic;font-size:14px;line-height:1.6;
  color:var(--vellum);margin:12px 0;
}
.dt-facts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.fact{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--vellum-dim);
  background:var(--ink);border:1px solid var(--ink-3);padding:4px 8px;border-radius:2px;
}
.fact.sealed-fact{color:var(--blood)}
.dt-loot{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.lootrow{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 8px;background:var(--ink);border:1px solid var(--ink-3);border-radius:2px;
}
.lr-l{display:flex;align-items:center;gap:7px;font-size:12px;min-width:0}
.lr-pct{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold)}
.dt-foot{display:flex;gap:8px;margin-top:16px}

/* dungeon card is now a tappable button */
.dungeoncard{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  text-align:left;padding:11px;
}
.dungeoncard:hover{border-color:var(--gold-dim)}
.dungeon-go{
  font-family:'Cinzel',serif;font-size:12px;color:var(--gold);flex:0 0 auto;
}

.council{
  width:100%;max-width:640px;
  background:var(--ink-2);border:1px solid var(--ink-3);
  border-top:2px solid var(--gold);
  border-radius:var(--r) var(--r) 0 0;
  padding:16px 14px calc(16px + env(safe-area-inset-bottom));
  animation:rise .3s ease-out;
}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.cl-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cl-title{font-family:'Cinzel',serif;font-size:19px;color:var(--gold)}
.cl-sub{font-family:'Spectral',serif;font-style:italic;font-size:13px;color:var(--vellum-dim)}
.cl-deadline{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);
  margin:10px 0 14px;padding:6px 9px;background:var(--ink);border:1px solid var(--ink-3);
  display:flex;align-items:center;gap:7px;
}
.cl-deadline::before{                    /* an hourglass, not the word "deadline" */
  content:'';flex:0 0 9px;height:11px;
  background:var(--blood);
  clip-path:polygon(0 0,100% 0,55% 45%,100% 100%,0 100%,45% 55%);
}
.cl-deadline b{color:var(--blood)}
.cl-deadline .ok{color:var(--verdant)}
.clhint{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--gold);text-transform:none;letter-spacing:0}

/* the bags */
.bags{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:8px}
.bag{
  background:var(--ink);border:1px solid var(--ink-3);border-radius:var(--r);
  padding:8px 5px;text-align:center;cursor:pointer;transition:.12s;
}
.bag:hover,.bag.over{border-color:var(--gold);background:#241f33}
.bag.me{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(212,162,76,.10), transparent 60%);
  box-shadow:inset 0 1px 0 rgba(212,162,76,.35);
}
.bag.me .bagname{color:var(--gold)}
.bagav{
  height:60px;width:auto;display:block;margin:0 auto 5px;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.bagname{
  font-family:'Cinzel',serif;font-size:11px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bagslot{
  margin-top:6px;min-height:30px;padding:4px;
  background:#12101c;border:1px dashed var(--ink-3);border-radius:2px;
  display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-items:center;
}
.bagempty{font-family:'JetBrains Mono',monospace;font-size:8px;color:#4a4358;letter-spacing:.1em}
.bagitem{display:grid;place-items:center}

/* the haul */
.hoard{display:flex;flex-direction:column;gap:6px}
.hoarditem{
  display:flex;align-items:center;gap:9px;text-align:left;padding:8px 10px;
  border:1px solid var(--ink-3);background:var(--ink);
}
.hoarditem.picked{border-color:var(--gold);background:#332c46;box-shadow:0 0 0 1px var(--gold)}
.hoarditem.voted{opacity:.7;border-left:2px solid var(--gold)}
.hi-art{flex:0 0 auto;color:var(--vellum)}
.hi-name{flex:1;min-width:0;font-family:'Cinzel',serif;font-size:13px}
.hi-vote{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--vellum-dim)}
.hoarditem.voted .hi-vote{color:var(--gold)}
.cl-foot{display:flex;gap:8px;margin-top:14px}

/* ===================== PARTY CHAT ===================== */
.chatlog{
  max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
  margin-bottom:10px;
}
.msg{display:flex;gap:7px;align-items:baseline;font-size:13px;line-height:1.4}
.msg .mwho{font-family:'Cinzel',serif;font-size:11px;color:var(--gold);flex:0 0 auto}
.msg.mine .mwho{color:var(--arcane)}
.msg .mtxt{flex:1;min-width:0;word-break:break-word}
.msg .mts{font-family:'JetBrains Mono',monospace;font-size:9px;color:#4a4358;flex:0 0 auto}
.chatbar{display:flex;gap:7px}
.chatbar input{flex:1}

/* sprite header (inventory tab) */
.sprite-head{display:flex;gap:14px;align-items:center}
.sprite-head .avsprite.small{
  height:96px;width:auto;flex:0 0 auto;max-height:none;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
.sh-text{flex:1;min-width:0}
.sh-name{font-family:'Cinzel',serif;font-size:19px;color:var(--vellum)}
.sh-sub{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin:2px 0 9px;
}

/* dungeon countdown */
.sealed{text-align:right;line-height:1.2}
.sealed .sl{
  display:block;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--vellum-dim);
}
.sealed .timer{font-size:17px;color:var(--blood)}

/* chatter reads as a different voice from loot */
.entry .chat{color:var(--vellum-dim);font-style:italic;font-family:'Spectral',serif}

/* settings */
.setting{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px dashed var(--ink-3);
}
.setting:last-child{border-bottom:0;padding-bottom:0}
.st-name{font-family:'Cinzel',serif;font-size:14px}
.st-desc{font-size:12px;color:var(--vellum-dim);font-style:italic;margin-top:2px}
.seg{display:flex;flex:0 0 auto;border:1px solid var(--ink-3);border-radius:var(--r);overflow:hidden}
.seg button{
  border:0;border-radius:0;background:var(--ink);
  padding:7px 12px;font-size:11px;color:var(--vellum-dim);
}
.seg button + button{border-left:1px solid var(--ink-3)}
.seg button[aria-pressed=true]{background:var(--gold);color:#231b0c;font-weight:700}
.panel.danger{border-top-color:rgba(176,74,64,.4)}
.panel.danger h2{color:var(--blood);border-bottom-color:rgba(176,74,64,.25)}
textarea{
  width:100%;font-family:'JetBrains Mono',monospace;font-size:11px;
  background:var(--ink);color:var(--vellum-dim);border:1px solid var(--ink-3);
  border-radius:var(--r);padding:9px;resize:vertical;word-break:break-all;
}
textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* five tabs need a little less room each */
nav.tabs button{padding:11px 2px;font-size:9px}

.classlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;margin-top:6px}

/* race selection cards */
.racelist{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.racecard{
  display:flex;gap:12px;align-items:flex-start;text-align:left;padding:12px;
}
.racecard:hover{border-color:var(--gold-dim)}
.rc-sigil{
  flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%, #3a3150, #1b1727);
  border:1px solid var(--ink-3);border-radius:50%;color:var(--gold);
}
.rc-body{flex:1;min-width:0}
.rc-name{font-family:'Cinzel',serif;font-size:16px}
.rc-desc{font-size:12px;color:var(--vellum-dim);font-style:italic;margin:3px 0 6px;line-height:1.5}
.rc-stats{display:flex;gap:6px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:10px}
.clbtn{
  display:flex;align-items:center;gap:8px;text-align:left;
  padding:11px 10px;font-size:12px;line-height:1.2;
}
.clbtn span{flex:1;min-width:0}
.clbtn:hover{color:var(--gold)}

/* the inspection page */
.dhead{display:flex;gap:14px;align-items:flex-start}
.dsigil{
  flex:0 0 74px;width:74px;height:74px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%, #3a3150, #1b1727);
  border:1px solid var(--ink-3);border-radius:50%;color:var(--gold);
}
.ddesc{font-size:14px;line-height:1.55;color:var(--vellum)}
.dsub{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--vellum-dim);margin:14px 0 7px;
}
.stat.up b{color:var(--verdant)}
.stat.down b{color:var(--blood)}
.stat.aff b{color:var(--arcane);font-weight:400}

/* starting kit / equipment cards */
.kit{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kititem{
  display:flex;gap:9px;align-items:center;
  background:var(--ink);border:1px solid var(--ink-3);border-radius:var(--r);padding:8px;
}
.kititem.empty{opacity:.5}
.kitart{
  flex:0 0 42px;height:42px;display:grid;place-items:center;
  background:#141120;border:1px solid var(--ink-3);color:var(--vellum);
}
.kititem .kn{font-family:'Cinzel',serif;font-size:12px;line-height:1.25}
.kititem .ks{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--vellum-dim);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:420px){
  .lantern{width:88px;height:88px;flex:0 0 88px}
  .lantern svg{width:88px;height:88px}
  header.mast h1{font-size:22px}
}

/* ===================== THE SCENE (parallax + paper doll) ===================== */
.scene-panel{padding:8px}
#sceneCanvas{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:#191424;border:1px solid var(--ink-3);border-radius:3px;
}

/* ---- ART PEGGED (body.no-art) ----
   Placeholder sprites/scene are switched off until the real rigged art lands
   (see ART_READY in state.js). Hide every art surface and collapse the tall
   character stage into a tidy name/level header. Remove the class to restore. */
body.no-art .scene-panel{display:none}
body.no-art .stage-art{display:none}
body.no-art .sprite-head .avsprite{display:none}
body.no-art .bagav{display:none}
body.no-art .stage{min-height:auto;gap:14px}
body.no-art .stage::before{display:none}

/* ---- party gifting (playtest) ---- */
.member .gift-send{margin-left:auto;padding:3px 10px;font-size:12px;white-space:nowrap}
.member .buff{margin-left:10px}
#giftBag{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto;margin:10px 0}
.giftrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;padding:8px 12px;text-align:left;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r)}
.giftrow:hover{border-color:var(--gold)}
.giftrow .gx{color:var(--vellum-dim);font-size:13px}

/* ---- Battle panel ---- */
.panel.combat{border-color:rgba(176,74,64,.4)}
.cbt-foe{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.cbt-name{font-family:'Cinzel',serif;font-size:16px;color:var(--blood);font-weight:600}
.cbt-you{display:flex;justify-content:space-between;align-items:baseline;margin:9px 0 4px}
.cbt-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--vellum-dim)}
.cbt-hp-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--vellum-dim)}
.cbt-bar{height:9px;background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden}
.cbt-bar i{display:block;height:100%;width:0;transition:width .35s ease}
.cbt-bar.foe i{background:linear-gradient(90deg,#c85a4e,#e08a54)}
.cbt-bar.hp  i{background:linear-gradient(90deg,#c14d43,#e0a24c)}
.cbt-bar.sta i{background:linear-gradient(90deg,#3fd0da,#a6f0a0)}
.cbt-moves{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cbt-move{font-size:13px;padding:7px 12px}
.cbt-move .cost{font-family:'JetBrains Mono',monospace;font-size:11px;color:#8fe0ff;margin-left:4px}
.cbt-move.flee{margin-left:auto;color:var(--vellum-dim)}
.cbt-move.flee:hover{border-color:var(--blood);color:var(--blood)}
.ledger .cb.enemy{color:var(--blood)}
.ledger .cb.hit{color:var(--verdant)}

/* ---- Legacy / Prestige ---- */
.legacy-body{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.legacy-stat{display:flex;align-items:baseline;gap:8px}
.legacy-stat .ls-lbl{color:var(--muted);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.legacy-stat .ls-val{font-size:28px;color:var(--gold);line-height:1}
.legacy-boon{color:var(--verdant);font-size:14px}
.legacy .note{margin:0}

/* ---- Skill tree ---- */
.treecard{display:flex;flex-direction:column;gap:6px}
.treecard .note{text-align:center;margin:0}
.tree-detail{max-width:560px}
.tree-classes{display:flex;gap:6px;margin:4px 0 10px;flex-wrap:wrap}
.tclass{font-size:13px;padding:6px 12px}
.tclass.sel{border-color:var(--gold);color:var(--gold)}
.tree-pts{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--vellum-dim);margin-bottom:10px}
.tree-pts b{color:var(--gold);font-size:16px}
.tree-nodes{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;margin-bottom:14px}
.tnode{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;
  background:var(--ink-2);border:1px solid var(--ink-3)}
.tnode .tn-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tnode .tn-name{font-family:'Cinzel',serif;font-size:15px;color:var(--vellum)}
.tnode .tn-cost{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);flex:0 0 auto}
.tnode .tn-desc{font-size:13px;color:var(--vellum-dim);margin-top:3px;line-height:1.35}
.tnode .tn-req{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--blood);margin-top:5px}
.tnode.owned{border-color:var(--verdant);opacity:.85}
.tnode.owned .tn-cost{color:var(--verdant)}
.tnode.buyable{border-color:var(--gold-dim);cursor:pointer}
.tnode.buyable:hover{border-color:var(--gold);background:var(--ink)}
.tnode.buyable .tn-cost{color:var(--gold)}
.tnode.poor,.tnode.locked{opacity:.55;cursor:default}

/* ---- Customisable dashboard: Add-cards toolbar, picker, and widgets ---- */
.dash-toolbar{column-span:all;display:flex;justify-content:flex-end;margin:0 0 6px}
#btnAddCards{font-size:12px}
.cards-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.card-toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:8px 12px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:8px;font-size:14px}

.wg-gear{display:grid;grid-template-columns:1fr 1fr;gap:1px 14px;margin-bottom:10px}
.wg-slot{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:2px 0}
.wg-sl{color:var(--vellum-dim)}
.wg-it{font-family:'Cinzel',serif}
.wg-it.off{color:var(--vellum-dim);opacity:.55}
.wg-bag{display:flex;flex-wrap:wrap;gap:6px;padding-top:9px;border-top:1px solid var(--ink-3)}
.wg-bagit{font-size:12px;padding:3px 9px;background:var(--ink);border:1px solid var(--ink-3);border-radius:999px}
.wg-more{font-size:12px;color:var(--vellum-dim);font-style:italic}

.wh-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--ink-3);font-size:13px}
.wh-row:last-child{border-bottom:0}
.wh-n{font-family:'Cinzel',serif;flex:0 0 auto}
.wh-s{margin-left:auto;color:var(--vellum-dim);font-size:12px}

/* ---- Item inspect tooltip ---- */
.itemtip{
  position:fixed; z-index:60; max-width:280px; pointer-events:none;
  background:rgba(14,26,44,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(120,220,255,.40); border-radius:10px; padding:10px 12px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.itemtip .tip-name{font-family:'Cinzel',serif;font-size:15px;line-height:1.2}
.itemtip .tip-sub{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);
  text-transform:capitalize;margin:2px 0 8px}
.itemtip .tip-rows{display:flex;flex-direction:column;gap:4px}
.itemtip .tip-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:12px}
.itemtip .tip-row > span{color:var(--vellum-dim);flex:0 0 auto}
.itemtip .tip-row > b{text-align:right;font-weight:600}
[data-item]{cursor:default}
.item[data-item],.gearitem[data-item],.swopt[data-item],.shopitem[data-item]{cursor:pointer}

/* ---- Vitals: Health + Stamina on the character stage ---- */
.vitals{display:flex;flex-direction:column;gap:7px;width:100%;max-width:340px;margin:12px auto 0}
.vital{display:flex;align-items:center;gap:9px}
.vital .vlbl{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);width:58px;flex:0 0 auto;text-transform:uppercase;letter-spacing:.04em}
.vital .vbar{flex:1;height:9px;background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden}
.vital .vbar i{display:block;height:100%;width:0;transition:width .4s ease}
.vital .vbar.hp i{background:linear-gradient(90deg,#c14d43,#e0a24c)}
.vital .vbar.sta i{background:linear-gradient(90deg,#3fd0da,#a6f0a0)}
.vital .vnum{font-size:11px;color:var(--vellum-dim);width:58px;flex:0 0 auto;text-align:right}

/* ---- Activity card: per-cycle bar, Stop toggle, cog ---- */
.cur-head{display:flex;align-items:center;gap:8px}
.cur-head h2{flex:1;border-bottom:0;margin:0;padding:0}
.cur-cog{flex:0 0 auto;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;
  color:var(--vellum-dim);background:none;border:none;border-radius:6px;cursor:pointer}
.cur-cog:hover{color:var(--gold);background:rgba(120,220,255,.07)}
.cur-cog svg{width:17px;height:17px}
.cyc-wrap{height:9px;background:rgba(255,255,255,.09);border-radius:999px;overflow:hidden;margin:9px 0 4px}
.cyc-wrap i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fd0da,#a6f0a0);transition:width .95s linear}
.cur-tally{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vellum-dim);margin-top:3px;min-height:14px;line-height:1.3}
.cur-stop{margin-top:9px}