/* ==========================================================================
   "Adventurer's ledger" theme, inspired by Monsters & Memories' own look:
   dusk-lit stone, aged parchment with sepia ink, rust leather, ember-gold
   lettering, a book serif with small caps, and the in-game carved-stone
   Inventory window. Layered over style.css; colour tokens are re-scoped per
   surface (parchment / stone / dark item window) so components adapt.
   ========================================================================== */

:root {
  --serif: "Alegreya", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --caps: "Alegreya SC", "Alegreya", Georgia, serif;
  --font: var(--serif);

  /* night / dusk (page) */
  --bg: #15110d;
  --bg-2: #1d1712;
  --text: #efe5cf;
  --text-2: #d2c4a6;
  --muted: #a3927a;
  --border: rgba(214, 186, 140, 0.16);
  --border-2: rgba(214, 186, 140, 0.28);

  /* ember & brass */
  --ember-1: #f6b21a;
  --ember-2: #e26a13;
  --ember-3: #b8410c;
  --brass: #c9a25a;
  --accent: #e0902a;
  --accent-2: #f2b84e;
  --accent-ink: #2a1606;
  --accent-soft: rgba(224, 144, 42, 0.16);

  /* parchment palette */
  --paper: #e9dfc6;
  --paper-2: #e1d4b4;
  --paper-3: #d4c39b;
  --ink: #2c2016;
  --ink-2: #4e3b28;
  --ink-3: #7a6248;
  --rust: #8f3f12;
  --leather-1: #a5591d;
  --leather-2: #7c3c12;

  /* stone (in-game window) */
  --stone-1: #57534d;
  --stone-2: #45423d;
  --stone-3: #2f2c29;
  --stone-hi: #7b766e;
  --stone-lo: #1c1a18;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 18px 40px -18px rgba(0, 0, 0, 0.85);

  /* paper grain (self-made SVG noise; CSP allows data: images) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --stone-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .48  0 0 0 0 .45  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
}

/* ---------- page ---------- */
body {
  font: 16px/1.5 var(--serif);
  font-feature-settings: "kern", "liga", "onum";
  background:
    radial-gradient(1100px 520px at 50% -140px, rgba(226, 106, 19, 0.22), transparent 70%),
    radial-gradient(900px 600px at 100% 30%, rgba(120, 72, 30, 0.12), transparent 70%),
    radial-gradient(1200px 900px at 50% 120%, rgba(0, 0, 0, 0.7), transparent 60%),
    var(--stone-grain),
    #15110d;
  background-attachment: fixed;
}
h1, h2, h3, .brand, .eyebrow, .bracket-title, .sg-title, .slot-label, .tip-name, .card-head h2, label, th,
.chip, .btn, button, .nav a, .stat > span, .vital span, .hstat span:not(.hicon), .mini-stats span, .strip-title {
  font-family: var(--caps);
  letter-spacing: 0.02em;
}
h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: 0.01em; }
h2 { font-size: 1.2rem; font-weight: 700; }
.tnum, .stat input, .vital input, .vital b, .hstat b, .gain, .loss, .diff-chip, .con, .slot-score, .data-table td,
.score-row b, .gt-row, .mini-stats b, .cmp-score {
  font-variant-numeric: lining-nums tabular-nums;
}
::selection { background: rgba(226, 106, 19, 0.35); }

/* ---------- top bar: dark leather strip with brass edge ---------- */
.topbar {
  height: 64px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    var(--grain),
    linear-gradient(180deg, #2b1d12, #1c140d);
  border-bottom: 2px solid #5a3c1e;
  box-shadow: 0 1px 0 rgba(201, 162, 90, 0.35), 0 10px 30px -10px rgba(0, 0, 0, 0.8);
  backdrop-filter: none;
}
.brand { font-size: 1.25rem; font-weight: 700; gap: 12px; }
.brand-text, .brand > :not(.brand-mark) {
  background: linear-gradient(180deg, var(--ember-1) 10%, var(--ember-2) 70%, var(--ember-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8));
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd98a, var(--ember-2) 60%, #7a2e08);
  box-shadow: 0 0 0 2px #3a2412, 0 0 0 3px rgba(201, 162, 90, 0.6), 0 4px 14px -4px rgba(226, 106, 19, 0.8);
}
.nav a, .nav button.link { color: var(--text-2); font-size: 0.95rem; border-radius: 3px; }
.nav a:hover { color: var(--ember-1); background: rgba(226, 106, 19, 0.08); }
.user-chip { border-radius: 4px; border-color: rgba(201, 162, 90, 0.3); font-family: var(--caps); }

/* ---------- buttons: stitched leather ---------- */
.btn, button {
  border-radius: 4px;
  color: #fbf0d8;
  background: linear-gradient(180deg, #c06a22, #8e4212 70%, #7a370e);
  border: 1px solid #4e2108;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.35), 0 2px 0 rgba(0, 0, 0, 0.45);
  outline: 1px dashed rgba(255, 226, 180, 0.42);
  outline-offset: -5px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  font-weight: 700;
}
.btn:hover, button:hover { color: #fff6e3; filter: brightness(1.08); }
.btn-ghost, button.btn-ghost {
  color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-2);
  outline: none; box-shadow: none; text-shadow: none;
}
.btn-danger, button.btn-danger { outline: none; text-shadow: none; }
button.link, .link-btn { outline: none; text-shadow: none; box-shadow: none; }
.switch { outline: none; text-shadow: none; box-shadow: none; border-radius: 4px; }

/* ==========================================================================
   PARCHMENT panels (cards, brackets, auth, dashboard)
   ========================================================================== */
.card, .best-card, .new-card, .empty-state, .auth-card {
  --text: var(--ink);
  --text-2: var(--ink-2);
  --muted: var(--ink-3);
  --border: rgba(84, 58, 32, 0.22);
  --border-2: rgba(84, 58, 32, 0.4);
  --surface: #e2d6b8;
  --surface-2: #ebe2cb;
  --surface-3: #d8c9a5;
  --bg-2: #f1e9d6;
  --accent: var(--rust);
  --accent-2: #a2501a;
  --accent-soft: rgba(143, 63, 18, 0.12);
  --good: #3c6a25;
  --good-soft: rgba(60, 106, 37, 0.14);
  --warn: #a8530e;
  --warn-soft: rgba(168, 83, 14, 0.13);
  --bad: #9a2a1d;
  --bad-soft: rgba(154, 42, 29, 0.12);
  color: var(--ink);
  border-radius: var(--radius);
  border: 1px solid #b7a274;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(120, 84, 40, 0.28) 100%),
    radial-gradient(40% 30% at 85% 15%, rgba(150, 110, 60, 0.12), transparent 70%),
    radial-gradient(35% 25% at 10% 90%, rgba(150, 110, 60, 0.14), transparent 70%),
    var(--grain),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow:
    inset 0 0 0 4px rgba(233, 223, 198, 0.65),
    inset 0 0 0 5px rgba(120, 90, 50, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 20px 40px -20px rgba(0, 0, 0, 0.9);
}
.card a, .best-card a { color: var(--rust); }
.card a:hover { color: #b8410c; }
.card code, .card kbd { background: rgba(84, 58, 32, 0.1); color: var(--ink); border-color: rgba(84, 58, 32, 0.3); }

/* ornamental heading rule */
.card-head { position: relative; padding-bottom: 10px; margin-bottom: 18px; }
.card-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background:
    radial-gradient(circle, var(--rust) 0 2.5px, transparent 3px) center / 12px 7px no-repeat,
    linear-gradient(90deg, transparent, rgba(84, 58, 32, 0.45) 12%, rgba(84, 58, 32, 0.45) 46%, transparent 48%, transparent 52%, rgba(84, 58, 32, 0.45) 54%, rgba(84, 58, 32, 0.45) 88%, transparent) center / 100% 1px no-repeat;
}
details.collapse:not([open]) > summary.card-head::after { display: none; }
.card h2 { color: var(--ink); }
.card .hint, .card .muted { color: var(--ink-3); }

/* inputs on parchment */
.card input, .card select {
  background: #f6f0e2; color: var(--ink); border: 1px solid rgba(84, 58, 32, 0.38); border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(84, 58, 32, 0.15); font-family: var(--serif); font-size: 1rem;
}
.card input::placeholder { color: #a08b6c; }
.card input:focus, .card select:focus { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(143, 63, 18, 0.18); }
.card select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); }
.card .btn-ghost, .card button.btn-ghost { color: var(--ink); background: rgba(255, 250, 238, 0.5); border-color: rgba(84, 58, 32, 0.45); }
.card .btn-danger, .card button.btn-danger { color: var(--bad); border-color: rgba(154, 42, 29, 0.45); background: transparent; }
.card .link-btn { color: var(--ink-2); }
.card .link-btn:hover { background: rgba(84, 58, 32, 0.1); color: var(--rust); }

/* chips & badges on parchment */
.card .chip, .best-card .chip { color: var(--ink-2); background: rgba(255, 250, 238, 0.55); border-color: rgba(84, 58, 32, 0.35); border-radius: 3px; }
.chip-accent { color: #fbf0d8 !important; background: linear-gradient(180deg, #a5591d, #7c3c12) !important; border-color: #4e2108 !important; }
.gain { color: #2f5a1a; background: rgba(60, 106, 37, 0.16); border: 1px solid rgba(60, 106, 37, 0.35); border-radius: 3px; }
.loss { border-radius: 3px; }
.diff-chip { border-radius: 2px; }
.card .diff-chip.up { color: #2f5a1a; background: rgba(60, 106, 37, 0.13); }
.card .diff-chip.down { color: #8d2418; background: rgba(154, 42, 29, 0.11); }
.raid-badge { border-radius: 2px; color: #fff3ea; background: #8d2418; border-color: #5c120a; }
.empty-pill { border-radius: 2px; }

/* con colours: solid swatches that read on parchment and stone alike */
.con { border-radius: 2px; border-width: 1px; font-family: var(--caps); }
.con-red { color: #fff1ec; background: #a3261b; border-color: #5e1009; }
.con-yellow { color: #2a1f00; background: #e4bb2f; border-color: #8a6c0c; }
.con-white { color: #2a2420; background: #faf7ef; border-color: #8f8574; }
.con-darkblue { color: #eef3ff; background: #2f509e; border-color: #182c5c; }
.con-lightblue { color: #08262f; background: #6cc0dc; border-color: #2d7894; }
.con-green { color: #f0ffe6; background: #3e7a29; border-color: #1f4512; }
.con-none { color: var(--ink-2); background: rgba(84, 58, 32, 0.12); border-color: rgba(84, 58, 32, 0.35); }
.con-unknown { color: #2a1606; background: #e88a2a; border-color: #8a4510; }

/* tables on parchment: ruled ledger */
.data-table th { color: var(--ink-3); border-bottom: 2px solid rgba(84, 58, 32, 0.45); font-size: 0.78rem; }
.data-table td { border-bottom: 1px solid rgba(84, 58, 32, 0.18); }
.data-table tr:hover td { background: rgba(143, 63, 18, 0.05); }
.data-table a { color: var(--ink); text-decoration-color: rgba(84, 58, 32, 0.45); }

/* ---------- dashboard ---------- */
.char-card { color: var(--ink); }
.char-card:hover { transform: translateY(-2px) rotate(-0.2deg); border-color: #9c7a43; color: var(--ink); }
.mini-stats div { background: rgba(255, 250, 238, 0.55); border-color: rgba(84, 58, 32, 0.3); border-radius: 3px; }
progress.progress { background: rgba(84, 58, 32, 0.15); }
progress.progress::-webkit-progress-bar { background: rgba(84, 58, 32, 0.15); }
progress.progress::-webkit-progress-value { background: linear-gradient(90deg, var(--rust), #c06a22); }
progress.progress::-moz-progress-bar { background: linear-gradient(90deg, var(--rust), #c06a22); }
.new-card { border: 2px dashed rgba(84, 58, 32, 0.4); color: var(--ink-3); }
.new-card:hover { border-color: var(--rust); color: var(--rust); background: linear-gradient(180deg, var(--paper), var(--paper-2)); }

/* ==========================================================================
   HERO: rust-leather banner (like the official site's header band)
   ========================================================================== */
.hero-card {
  --text: #fbf0d8; --text-2: #f0dcb8; --muted: #e2c49a;
  --border: rgba(255, 220, 170, 0.18);
  color: #fbf0d8;
  border: 1px solid #3e1a06;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255, 200, 120, 0.18), transparent 60%),
    radial-gradient(100% 100% at 50% 50%, transparent 55%, rgba(40, 14, 2, 0.55)),
    var(--grain),
    linear-gradient(180deg, #a85d22, #85421a 60%, #6e3412);
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 0 6px rgba(255, 226, 180, 0.3), var(--shadow);
}
.hero-main h1 { color: #fff6e3; text-shadow: 0 2px 0 rgba(40, 14, 2, 0.6); font-size: 2.4rem; }
.eyebrow { color: #ffd98a; letter-spacing: 0.14em; }
.hero-card .chip { color: #fbf0d8; background: rgba(40, 14, 2, 0.3); border-color: rgba(255, 220, 170, 0.35); }
.hero-stats { background: linear-gradient(180deg, rgba(40, 14, 2, 0.35), rgba(40, 14, 2, 0.5)); border-top: 1px solid rgba(255, 220, 170, 0.25); }
.hstat + .hstat { border-left-color: rgba(255, 220, 170, 0.18); }
.hstat span:not(.hicon) { color: #ecd2a8; }
.hicon { background: rgba(40, 14, 2, 0.45); color: #ffd98a; border: 1px solid rgba(255, 220, 170, 0.25); border-radius: 50%; }
.hero-card .btn-ghost { color: #fbf0d8; background: rgba(40, 14, 2, 0.3); border-color: rgba(255, 220, 170, 0.35); }

/* medallion: brass-rimmed seal */
.medallion { box-shadow: 0 0 0 3px #3a1e08, 0 0 0 5px var(--brass), 0 0 0 7px #3a1e08, 0 14px 40px -12px rgba(0, 0, 0, 0.9), inset 0 -6px 14px rgba(0, 0, 0, 0.3); }
.medallion .lvl { font-family: var(--caps); background: #2a1606; border-color: var(--brass); color: #ffe7b0; }

/* ==========================================================================
   STONE: the Inventory window (equipment pane), carved like the in-game frame
   ========================================================================== */
.panel-stone {
  --text: #efe7d6; --text-2: #d6ccba; --muted: #ada291;
  --border: rgba(0, 0, 0, 0.5); --border-2: rgba(255, 255, 255, 0.14);
  --accent: #e0a446; --accent-2: #f2c063; --accent-soft: rgba(224, 164, 70, 0.16);
  --warn: #f0943a; --good: #8fd16b;
  color: var(--text);
  border-radius: 3px;
  border: 3px solid;
  border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    var(--stone-grain),
    linear-gradient(180deg, var(--stone-1), var(--stone-2));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(255, 255, 255, 0.06), 0 2px 0 rgba(0, 0, 0, 0.5), 0 24px 50px -20px rgba(0, 0, 0, 0.95);
}
.panel-stone .card-head::after {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.55) 10%, rgba(0, 0, 0, 0.55) 90%, transparent) center top / 100% 1px no-repeat,
              linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 10%, rgba(255, 255, 255, 0.12) 90%, transparent) center 2px / 100% 1px no-repeat;
}
.panel-stone h2 { color: #f3ead8; text-shadow: 0 1px 0 #000; }
.panel-stone .hint, .panel-stone .legend { color: #c4b9a6; }
/* slot wells */
.panel-stone .slot {
  border-radius: 2px;
  background: radial-gradient(100% 100% at 50% 30%, #3a3632, #24211e);
  border: 2px solid; border-color: #1a1816 #6a655e #6a655e #1a1816;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.panel-stone .slot.filled { background: radial-gradient(100% 100% at 50% 30%, #433e38, #29251f); }
.panel-stone .slot.rarity-magic { background: radial-gradient(100% 100% at 50% 30%, #35405a, #1f2433); border-color: #141a28 #6f86b8 #6f86b8 #141a28; }
.panel-stone .slot.rarity-magic .item-name { color: #a9c6ff; }
.panel-stone .slot .item-name { color: #f1e8d6; text-shadow: 0 1px 0 #000; font-family: var(--serif); font-weight: 500; font-size: 0.8rem; }
.panel-stone .slot:not(.filled) .item-name { color: #8b8378; font-family: var(--caps); }
.panel-stone .slot-label { color: #c9bfae; text-shadow: 0 1px 0 #000; font-size: 0.68rem; letter-spacing: 0.06em; }
.panel-stone .slot.filled .slot-label .slot-icon { color: var(--brass); }
.panel-stone .slot:focus-within, .panel-stone .slot.pinned { border-color: #e0a446; box-shadow: 0 0 0 2px rgba(224, 164, 70, 0.4), inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.panel-stone .item-art.has-img { border-radius: 2px; border-color: #0e0d0c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 4px rgba(0, 0, 0, 0.6); }
.panel-stone .doll-center {
  border-radius: 2px; border: 2px solid; border-color: #1a1816 #5f5a53 #5f5a53 #1a1816;
  background: radial-gradient(70% 60% at 50% 45%, rgba(224, 164, 70, 0.10), transparent 70%), linear-gradient(180deg, #2b2825, #1f1d1a);
  box-shadow: inset 0 4px 18px rgba(0, 0, 0, 0.7);
}
.panel-stone .vital { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.panel-stone .doll-name b { font-family: var(--caps); font-size: 1.15rem; color: #f4e9d2; }
.panel-stone .slot-score { border-radius: 2px; background: rgba(0, 0, 0, 0.7); border-color: rgba(201, 162, 90, 0.55); color: #f2c063; font-family: var(--caps); }
.panel-stone .slot-edit, .panel-stone .slot-open { border-radius: 2px; background: #2a2724; border-color: #6a655e; color: #e8dfcd; }
.panel-stone .slot input { color: #f4ecdc; font-family: var(--serif); }
.panel-stone .note { color: #c9bfae; }
.race-art { filter: brightness(0) invert(1) sepia(0.85) saturate(1.6) hue-rotate(-8deg) brightness(0.96) drop-shadow(0 0 12px rgba(224, 164, 70, 0.22)); }

/* ==========================================================================
   DARK ITEM WINDOW: tooltips (in-game item info box)
   ========================================================================== */
.tip {
  --text: #f1e6cf; --text-2: #d8c9aa; --muted: #a8977b; --border: rgba(201, 162, 90, 0.25);
  --good: #9bd77a; --bad: #ff8a7a; --accent-2: #f2c063;
  color: var(--text-2);
  font-family: var(--serif); font-size: 0.86rem; text-transform: none; letter-spacing: 0;
  border-radius: 3px;
  background: var(--grain), linear-gradient(180deg, rgba(28, 22, 16, 0.98), rgba(16, 12, 9, 0.98));
  border: 1px solid #7a6440;
  box-shadow: inset 0 0 0 3px rgba(16, 12, 9, 0.98), inset 0 0 0 4px rgba(201, 162, 90, 0.35), 0 24px 48px -16px rgba(0, 0, 0, 0.9);
}
.tip-name { font-family: var(--caps); font-size: 1.02rem; color: #f2c063; }
.tip-name a { color: inherit; }
.tip-flags span { font-family: var(--caps); border-radius: 2px; background: rgba(120, 150, 220, 0.18); color: #b7cbff; }
.tip-row b { color: #f4ead6; }
.tip-credit a { color: #e5cfa0; }
.card .tip a { color: #e5cfa0; }
.score-row b, .gt-eq b { color: #f2c063; }

/* ---------- brackets & slot groups: ledger pages ---------- */
.bracket {
  border-radius: 3px; border: 1px solid rgba(84, 58, 32, 0.35);
  background: linear-gradient(180deg, rgba(255, 250, 238, 0.55), rgba(255, 250, 238, 0.25));
}
.bracket > summary { font-size: 1.05rem; }
.bracket-current { border-color: var(--rust); box-shadow: 0 0 0 2px rgba(143, 63, 18, 0.18); }
.bracket-unknown { border-color: rgba(168, 83, 14, 0.55); background: linear-gradient(180deg, rgba(232, 138, 42, 0.12), rgba(255, 250, 238, 0.3)); }
.bracket-unknown .bracket-title { color: #8f4410; }
.bracket-raid { border-color: rgba(141, 36, 24, 0.5); }
.slot-group { border-radius: 2px; background: rgba(255, 252, 244, 0.6); border-color: rgba(84, 58, 32, 0.28); }
.sg-count { border-radius: 2px; background: rgba(84, 58, 32, 0.12); color: var(--ink-2); }
.pair-note.warn { color: #6b3208; background: rgba(232, 138, 42, 0.16); border-color: rgba(168, 83, 14, 0.4); border-radius: 2px; }
.up-icon { border-radius: 3px; background: #2a2622; border: 1px solid #14110e; color: #d6ccba; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.up-name { font-weight: 700; }
.plan-list, .alert-list, .result-list { background: rgba(255, 252, 244, 0.55); border-color: rgba(84, 58, 32, 0.28); border-radius: 3px; }
.best-card { border-radius: var(--radius); }
.best-icon { border-radius: 3px; background: #2a2622 !important; color: #c9e8b0; border: 1px solid #14110e; }
.strip-title { color: var(--text); font-size: 1.25rem; }
.title-icon { color: var(--ember-1); }

/* stats on the parchment sheet */
.stat { background: rgba(255, 252, 244, 0.6); border-radius: 2px; border-color: rgba(84, 58, 32, 0.28); }
.stat span { color: var(--ink-2); }
.stat-group h3 { color: var(--ink-3); letter-spacing: 0.12em; }
.stat-group + .stat-group { border-top-color: rgba(84, 58, 32, 0.25); }
.resist { border-top-width: 3px; }

/* alerts */
.alert { border-radius: 3px; font-family: var(--serif); }
.alert-info { color: #4a2c0e; background: linear-gradient(180deg, #f1dfb6, #e7cf9a); border-color: #b48a46; }
.alert-error { color: #fff0ea; background: linear-gradient(180deg, #8d2a1d, #6e1e14); border-color: #4a0f08; }
.alert-warn { color: #3d2304; background: linear-gradient(180deg, #f2c57a, #e3a54c); border-color: #a3661c; }

/* floating save bar: a leather tab */
.save-bar { border-radius: 4px; border: 1px solid #4e2108; background: var(--grain), linear-gradient(180deg, #3a2414, #24160c); color: #f0dcb8; font-family: var(--caps); }

/* footer: inked colophon */
.site-footer { border-top: 1px solid rgba(201, 162, 90, 0.25); color: #a3927a; font-family: var(--serif); text-align: center; }
.site-footer a { color: #d9c49a; }

/* dropzone on parchment */
.dropzone { border-radius: 3px; border: 2px dashed rgba(84, 58, 32, 0.45); background: rgba(255, 252, 244, 0.5); color: var(--ink-2); }
.dropzone:hover, .dropzone.is-over { border-color: var(--rust); background: rgba(143, 63, 18, 0.07); }
.dropzone .icon { color: var(--rust); }
.steps li::before { border-radius: 2px; background: var(--rust); color: #fbf0d8; font-family: var(--caps); }

/* auth */
.auth-card h1 { color: var(--ink); }

/* reduce motion */
@media (prefers-reduced-motion: reduce) { .char-card:hover { transform: none; } }

/* ---------- fixes: selects, inputs inside stone, stat cells ---------- */
.card select {
  background-color: #f6f0e2;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px;
}
.stat input, .vital input { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.stat input { color: var(--ink); font-weight: 700; font-size: 1rem; }
.panel-stone input, .panel-stone select {
  background: rgba(0, 0, 0, 0.45); color: #f4ecdc; border-color: rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.panel-stone .vital input { color: #f7efdf; font-family: var(--caps); font-size: 1.2rem; text-shadow: 0 1px 0 #000; }
.panel-stone .slot input { background: rgba(20, 18, 16, 0.92) !important; border-radius: 2px; }
.panel-stone .vital span { color: #c9bfae; }
.fleuron { color: var(--rust); font-family: var(--serif); font-size: 1.15em; margin-right: 2px; }
.panel-stone .fleuron, .hero-card .fleuron { color: var(--brass); }

/* ---------- small screens: brand on top, nav as a scrollable strip ---------- */
.brand-text { white-space: nowrap; }
@media (max-width: 760px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 16px 0; gap: 6px; }
  .topbar .nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .nav a, .user-chip { flex: none; }
  .hero-main h1 { font-size: 1.9rem; }
}

/* Collapsed upgrade brackets loading on demand (app.js) */
.lazy-body.is-loading { opacity: .6; }

/* Key-binding screenshot in the upload instructions */
.keybind-shot { display: block; max-width: 100%; height: auto; margin: .5rem 0 .25rem; border-radius: 4px; border: 1px solid rgba(0,0,0,.35); }

/* Review page: slots the screenshot couldn't read cleanly (overlapping labels etc.) */
.slot.needs-check { border: 2px dashed #d0452c; box-shadow: 0 0 0 3px rgba(208, 69, 44, .25); }
.slot .note.issue { color: #f08a6e; font-weight: 600; }
.panel-stone .slot .note.issue { color: #f39a7e; }
.dot-check { background: #d0452c; }
.parse-check p { margin: .4rem 0 0; font-size: .92em; }

/* Mob level next to the mob name in upgrade sources */
.mob-level { margin-left: .3em; white-space: nowrap; }
.est-note { font-size: .72em; font-style: italic; color: var(--muted); margin-left: .2em; }