/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Exocet Font ──────────────────────────────────────────────────────────── */
/* Place your Exocet font files in public/fonts/                              */
@font-face {
  font-family: 'Exocet';
  src: url('fonts/exocet-blizzard-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Exocet';
  src: url('fonts/exocet-blizzard-heavy.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-dark: #0a0a0f;
  --bg-panel: #151520;
  --bg-slot: rgba(10, 10, 15, 0.7);
  --border: #2a2a3e;
  --text: #c8c0b0;
  --text-dim: #706858;
  --text-bright: #e8dcc8;
  --gold: #c7a64a;
  --gold-dim: #8a6d2b;

  /* Item quality colors */
  --q-low: #888888;
  --q-normal: #c8c0b0;
  --q-superior: #c8c0b0;
  --q-magic: #6969ff;
  --q-rare: #ffff00;
  --q-set: #00ff00;
  --q-unique: #c7b377;
  --q-crafted: #ffa500;
  --q-tempered: #ffa500;
  --q-runeword: #c7b377;

  /* Paperdoll cell size */
  --cell: 44px;

  /* D2 frame colors */
  --frame-gold: #8a7a4a;
  --frame-gold-light: #b8a050;
  --frame-gold-dark: #5a4a2a;
  --frame-border-dark: #1a1208;
  --stone-light: #3a3530;
  --stone-mid: #2d2a24;
  --stone-dark: #1e1b16;
  --slot-border: #6a5a2a;
  --slot-border-dim: #3a2a0a;

  /* D2 font stack */
  --font-d2: 'Exocet', 'Cinzel', serif;
  --font-body: 'Exocet', 'Cinzel', 'Segoe UI', sans-serif;
}

body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

#app {
  max-width: 1060px;
  margin: 0 auto;
  padding: 12px;
}

/* ── Top Bar (Dropdown + Toggle) ─────────────────────────────────────────── */
#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #1a1520 0%, #0f0f18 100%);
  border: 2px solid var(--frame-gold-dark);
  border-radius: 3px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

#char-dropdown {
  background: #0e0e0e;
  color: var(--text-bright);
  border: 2px solid;
  border-color: var(--frame-gold-dark) var(--slot-border-dim) var(--slot-border-dim) var(--frame-gold-dark);
  padding: 6px 12px;
  font-family: var(--font-d2);
  font-size: 13px;
  border-radius: 2px;
  cursor: pointer;
  min-width: 240px;
}

#char-dropdown:hover { border-color: var(--frame-gold); }
#char-dropdown:focus { outline: none; border-color: var(--gold); }

#view-toggle {
  display: flex;
  gap: 6px;
}

.toggle-btn {
  background: #0e0e0e;
  color: var(--text-dim);
  border: 2px solid;
  border-color: var(--frame-gold-dark) var(--slot-border-dim) var(--slot-border-dim) var(--frame-gold-dark);
  padding: 5px 16px;
  font-family: var(--font-d2);
  font-size: 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.5px;
}

.toggle-btn:hover {
  border-color: var(--frame-gold);
  color: var(--text);
}

.toggle-btn.active {
  background: linear-gradient(180deg, #2a2210 0%, #1a1508 100%);
  color: var(--gold);
  border-color: var(--frame-gold) var(--frame-gold-dark) var(--frame-gold-dark) var(--frame-gold);
}

/* ── No Characters ───────────────────────────────────────────────────────── */
#no-chars {
  text-align: center;
  padding: 40px 20px;
  background: var(--bg-panel);
  border: 2px solid var(--frame-gold-dark);
  border-radius: 3px;
  font-family: var(--font-d2);
  color: var(--text-dim);
}

#no-chars code {
  background: #0e0e0e;
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--text-bright);
  font-family: 'Consolas', monospace;
}

/* ── D2 Main Frame ───────────────────────────────────────────────────────── */
#d2-frame {
  position: relative;
  /* Stone texture background */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 25% 25%, rgba(80,70,50,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 75%, rgba(80,70,50,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(90,80,55,0.1) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-light) 0%, var(--stone-mid) 30%, #252218 70%, var(--stone-dark) 100%);
  /* Multi-layered gold/bronze frame border */
  border: 4px solid var(--frame-gold);
  box-shadow:
    inset 0 0 0 2px var(--frame-gold-dark),
    inset 0 0 0 4px var(--frame-gold-dim),
    inset 0 0 40px rgba(0,0,0,0.5),
    0 0 0 2px var(--frame-border-dark),
    0 0 0 5px var(--frame-gold-dark),
    0 0 0 7px var(--frame-border-dark),
    0 8px 32px rgba(0,0,0,0.7);
  padding: 12px;
  margin-bottom: 10px;
}

/* ── Character Header (Name + Class boxes) ───────────────────────────────── */
#char-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 4px;
}

.d2-name-box {
  flex: 1;
  background: linear-gradient(180deg, #0e0e0e 0%, #060606 100%);
  border: 2px solid;
  border-color: var(--frame-gold-dark) var(--slot-border-dim) var(--slot-border-dim) var(--frame-gold-dark);
  padding: 8px 14px;
  font-family: var(--font-d2);
  font-size: 16px;
  color: var(--gold);
  text-align: center;
  letter-spacing: 1px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#char-flags {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

#char-flags .flag {
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-d2);
}

.flag-sc { background: #1a3a1a; color: #88cc88; }
.flag-hc { background: #8b2020; color: #ff8888; }
.flag-dead { background: #4a0a0a; color: #ff4444; }

/* ── Main Two-Panel Layout ───────────────────────────────────────────────── */
#main-panels {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

#stats-panel {
  flex: 0 0 420px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#panel-divider {
  width: 4px;
  align-self: stretch;
  background: linear-gradient(180deg,
    var(--frame-gold-dark) 0%,
    var(--frame-gold) 10%,
    var(--frame-gold-light) 50%,
    var(--frame-gold) 90%,
    var(--frame-gold-dark) 100%
  );
  box-shadow:
    -1px 0 0 var(--frame-border-dark),
    1px 0 0 var(--frame-border-dark);
  flex-shrink: 0;
}

#equip-panel {
  flex: 1;
  padding: 6px;
  display: flex;
  flex-direction: column;
}

/* ── D2-Style Stat Boxes ─────────────────────────────────────────────────── */
.d2-box, .d2-derived-box, .d2-resist-box, .attr-box {
  background: linear-gradient(180deg, #151515 0%, #0a0a0a 100%);
  border: 2px solid;
  border-color: var(--frame-gold-dark) var(--slot-border-dim) var(--slot-border-dim) var(--frame-gold-dark);
  padding: 4px 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d2-label {
  font-family: var(--font-d2);
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.5px;
}

.d2-label-sm {
  font-family: var(--font-d2);
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.5px;
}

.d2-value {
  font-family: var(--font-d2);
  font-size: 14px;
  color: #ffffff;
  font-weight: 700;
  min-width: 30px;
  text-align: right;
}

.d2-value.placeholder {
  color: #908878;
  font-size: 12px;
}

.d2-value.gold {
  color: var(--gold);
}

/* ── Stat Header Row (Level / Exp / Next Level) ──────────────────────────── */
.stat-header-row {
  display: flex;
  gap: 4px;
}

.stat-header-row .d2-box {
  flex: 1;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
}

.stat-header-row .d2-box.wide {
  flex: 2;
}

.stat-header-row .d2-label {
  font-size: 11px;
  color: var(--text-dim);
}

.stat-header-row .d2-value {
  font-size: 16px;
}

/* ── Attributes + Derived Stats Grid ─────────────────────────────────────── */
.attr-derived-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

.attr-box {
  padding: 6px 12px;
  flex-direction: row;
  gap: 8px;
}

.attr-box .d2-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
}

.attr-box .d2-value {
  font-size: 16px;
}

.derived-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.d2-derived-box {
  padding: 3px 10px;
}

.d2-derived-box .d2-label-sm {
  font-size: 11px;
}

.d2-derived-box .d2-value {
  font-size: 12px;
}

/* Life/Mana coloring */
.d2-derived-box.life .d2-value { color: #ff6666; }
.d2-derived-box.mana .d2-value { color: #6688ff; }

/* ── Resistances ─────────────────────────────────────────────────────────── */
.resist-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 50%;
  margin-left: auto;
}

.d2-resist-box {
  padding: 3px 10px;
}

.d2-resist-box .d2-label-sm {
  font-size: 11px;
}

.d2-resist-box .d2-value {
  font-size: 12px;
}

/* Resistance colors when values are available */
.d2-resist-box.fire .d2-value:not(.placeholder) { color: #ff4444; }
.d2-resist-box.cold .d2-value:not(.placeholder) { color: #6688ff; }
.d2-resist-box.ltng .d2-value:not(.placeholder) { color: #ffff44; }
.d2-resist-box.poison .d2-value:not(.placeholder) { color: #44ff44; }

/* ── Points Row ──────────────────────────────────────────────────────────── */
.points-row {
  display: flex;
  gap: 4px;
}

.points-row .d2-box.compact {
  flex: 1;
  padding: 4px 8px;
}

/* ── Paperdoll ───────────────────────────────────────────────────────────── */
#paperdoll {
  overflow: hidden;
  border-radius: 2px;
}

.inv-equip {
  display: grid;
  grid-template-columns: repeat(10, var(--cell));
  grid-template-rows: repeat(7, var(--cell));
  gap: 2px;
  padding: 8px;
  justify-content: center;
}

/* ── Swap Tabs ───────────────────────────────────────────────────────────── */
.swap-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-slot);
  border: 1px solid var(--slot-border-dim);
  color: var(--text-dim);
  font-family: var(--font-d2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.swap-tab.active {
  border-color: var(--slot-border);
  color: var(--gold);
  background: rgba(100, 85, 40, 0.25);
}

.stab-l1 { grid-column: 1; grid-row: 1; }
.stab-l2 { grid-column: 2; grid-row: 1; }
.stab-r1 { grid-column: 9; grid-row: 1; }
.stab-r2 { grid-column: 10; grid-row: 1; }

.inv-equip.merc-mode .swap-tab { visibility: hidden; pointer-events: none; }

/* ── Equipment Slots ─────────────────────────────────────────────────────── */
.doll-slot {
  background: var(--bg-slot);
  border: 2px solid var(--slot-border);
  box-shadow: inset 0 0 0 1px var(--slot-border-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
  padding: 2px;
}

.doll-slot:hover {
  border-color: var(--gold);
  background: rgba(100, 85, 40, 0.2);
}

/* Slot grid positions */
.slot-head  { grid-column: 5 / 7;  grid-row: 1 / 3; }
.slot-neck  { grid-column: 7;      grid-row: 2; }
.slot-larm  { grid-column: 1 / 3;  grid-row: 2 / 6; }
.slot-torso { grid-column: 5 / 7;  grid-row: 3 / 6; }
.slot-rarm  { grid-column: 9 / 11; grid-row: 2 / 6; }
.slot-hands { grid-column: 1 / 3;  grid-row: 6 / 8; }
.slot-lring { grid-column: 4;      grid-row: 6; }
.slot-belt  { grid-column: 5 / 7;  grid-row: 6; }
.slot-rring { grid-column: 7;      grid-row: 6; }
.slot-feet  { grid-column: 9 / 11; grid-row: 6 / 8; }

/* Slot content */
.doll-slot .slot-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  image-rendering: pixelated;
}

.doll-slot.empty .slot-label {
  color: var(--text-dim);
  font-family: var(--font-d2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.5;
}

.doll-slot .slot-item-name {
  font-family: var(--font-d2);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  word-break: break-word;
  text-align: center;
  padding: 2px;
}

/* Quality border colors */
.doll-slot.q-magic { border-color: var(--q-magic); }
.doll-slot.q-rare { border-color: var(--q-rare); }
.doll-slot.q-unique { border-color: var(--q-unique); }
.doll-slot.q-set { border-color: var(--q-set); }
.doll-slot.q-crafted { border-color: var(--q-crafted); }
.doll-slot.q-runeword { border-color: var(--q-runeword); }

/* Quality text colors */
.q-text-low { color: var(--q-low); }
.q-text-normal { color: var(--q-normal); }
.q-text-superior { color: var(--q-superior); }
.q-text-magic { color: var(--q-magic); }
.q-text-rare { color: var(--q-rare); }
.q-text-set { color: var(--q-set); }
.q-text-unique { color: var(--q-unique); }
.q-text-crafted { color: var(--q-crafted); }
.q-text-tempered { color: var(--q-tempered); }
.q-text-runeword { color: var(--q-runeword); }

/* ── Inventory Grid (10x8) ───────────────────────────────────────────────── */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(10, var(--cell));
  grid-template-rows: repeat(8, var(--cell));
  gap: 2px;
  padding: 0 8px 8px;
  justify-content: center;
  border-top: 2px solid var(--slot-border-dim);
  margin-top: 2px;
}

.inv-cell {
  background: var(--bg-slot);
  border: 1px solid var(--slot-border-dim);
}

.inv-cell.charm-row {
  background: rgba(20, 15, 40, 0.7);
  border-color: #2a2040;
}

.inv-item {
  background: var(--bg-slot);
  border: 1px solid var(--slot-border-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: default;
  transition: border-color 0.15s;
  z-index: 1;
}

.inv-item:hover {
  border-color: var(--gold);
  z-index: 2;
}

.inv-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.inv-item .inv-item-name {
  font-family: var(--font-d2);
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  word-break: break-word;
  line-height: 1.1;
  padding: 1px;
}

/* Quality border colors for inventory items */
.inv-item.q-magic { border-color: var(--q-magic); }
.inv-item.q-rare { border-color: var(--q-rare); }
.inv-item.q-unique { border-color: var(--q-unique); }
.inv-item.q-set { border-color: var(--q-set); }
.inv-item.q-crafted { border-color: var(--q-crafted); }
.inv-item.q-runeword { border-color: var(--q-runeword); }

/* ── Gold Bar ────────────────────────────────────────────────────────────── */
#gold-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #151515 0%, #0a0a0a 100%);
  border: 2px solid;
  border-color: var(--frame-gold-dark) var(--slot-border-dim) var(--slot-border-dim) var(--frame-gold-dark);
  padding: 6px 14px;
  margin: 6px 8px 2px;
}

.gold-icon {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 40% 35%, #f0d060 0%, #c7a64a 40%, #8a6d2b 70%, #5a4a2a 100%);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#gold-bar .d2-value.gold {
  font-size: 15px;
  color: var(--gold);
  font-family: var(--font-d2);
}

/* ── Notice ──────────────────────────────────────────────────────────────── */
.notice {
  background: linear-gradient(180deg, #1a1820 0%, #0f0e12 100%);
  border: 2px solid var(--frame-gold-dark);
  color: var(--text-dim);
  font-size: 13px;
  padding: 10px 16px;
  margin-bottom: 10px;
  font-family: var(--font-d2);
}

.notice code {
  background: #0e0e0e;
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--text);
  font-family: 'Consolas', monospace;
}

/* ── Skills Panel ────────────────────────────────────────────────────────── */
#skills-panel {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--stone-light) 0%, var(--stone-mid) 50%, var(--stone-dark) 100%);
  border: 4px solid var(--frame-gold);
  box-shadow:
    inset 0 0 0 2px var(--frame-gold-dark),
    inset 0 0 20px rgba(0,0,0,0.4),
    0 0 0 2px var(--frame-border-dark),
    0 0 0 5px var(--frame-gold-dark),
    0 0 0 7px var(--frame-border-dark),
    0 4px 16px rgba(0,0,0,0.5);
  padding: 14px 18px;
}

#skills-panel h2 {
  font-family: var(--font-d2);
  font-size: 15px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--frame-gold-dark);
}

#skills-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.skill-entry {
  display: flex;
  justify-content: space-between;
  padding: 3px 6px;
  border-radius: 2px;
  font-size: 12px;
}

.skill-entry:hover {
  background: rgba(100, 85, 40, 0.15);
}

.skill-name {
  color: var(--text);
  font-family: var(--font-d2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.skill-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.skill-points {
  color: var(--gold);
  font-family: var(--font-d2);
  font-weight: 700;
  min-width: 20px;
  text-align: right;
}

.skill-bonus {
  color: #6888ff;
  font-size: 0.85em;
  margin-left: 1px;
}

.muted {
  color: var(--text-dim);
  font-family: var(--font-d2);
  font-size: 13px;
}

/* ── Item Tooltip ────────────────────────────────────────────────────────── */
#tooltip {
  position: fixed;
  z-index: 1000;
  background: linear-gradient(180deg, #0e0c16 0%, #08060e 100%);
  border: 2px solid;
  border-color: var(--frame-gold-dark) var(--slot-border-dim) var(--slot-border-dim) var(--frame-gold-dark);
  border-radius: 2px;
  padding: 10px 14px;
  max-width: 320px;
  min-width: 180px;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7), inset 0 0 15px rgba(0,0,0,0.3);
  font-size: 12px;
  line-height: 1.5;
}

.tt-item-img-wrap {
  text-align: center;
  margin-bottom: 6px;
}

.tt-item-img {
  max-height: 64px;
  max-width: 100%;
  object-fit: contain;
}

.tt-name {
  font-family: var(--font-d2);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2px;
}

.tt-base {
  text-align: center;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-size: 12px;
  font-family: var(--font-d2);
}

.tt-separator {
  height: 1px;
  background: var(--frame-gold-dark);
  margin: 6px 0;
}

.tt-stat {
  color: var(--text);
  font-size: 12px;
  font-family: var(--font-d2);
  padding: 1px 0;
}

.tt-stat.magic { color: var(--q-magic); }
.tt-stat.set-bonus { color: var(--q-set); }
.tt-stat.req { color: var(--text-dim); }
.tt-stat.ethereal { color: #8888cc; font-style: italic; }
.tt-stat.socketed { color: #aaaaaa; }
.tt-stat.corrupted-mod { color: var(--q-magic); }
.tt-stat.corrupted-mod::before { content: '★ '; color: #ff4444; }
.tt-corrupted-label { color: #ff4444; font-weight: bold; margin-top: 2px; }

.tt-white { color: #ffffff; }

.tt-socket {
  color: #ccaa44;
  font-size: 11px;
  font-family: var(--font-d2);
  padding-left: 8px;
}

/* ── WebSocket Status ────────────────────────────────────────────────────── */
#ws-status {
  position: fixed;
  bottom: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background 0.3s;
}

#ws-status.connected { background: #33aa33; }
#ws-status.disconnected { background: #aa3333; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --cell: 38px; }
  #stats-panel { flex: 0 0 360px; }
}

@media (max-width: 900px) {
  :root { --cell: 34px; }
  #stats-panel { flex: 0 0 320px; }

  .d2-label { font-size: 11px; }
  .d2-value { font-size: 12px; }
  .attr-box .d2-label { font-size: 12px; }
  .attr-box .d2-value { font-size: 14px; }
}

@media (max-width: 768px) {
  :root { --cell: 32px; }

  #main-panels {
    flex-direction: column;
  }

  #stats-panel {
    flex: none;
    width: 100%;
  }

  #panel-divider {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,
      var(--frame-gold-dark) 0%,
      var(--frame-gold) 10%,
      var(--frame-gold-light) 50%,
      var(--frame-gold) 90%,
      var(--frame-gold-dark) 100%
    );
    box-shadow:
      0 -1px 0 var(--frame-border-dark),
      0 1px 0 var(--frame-border-dark);
    margin: 8px 0;
  }

  .resist-group {
    width: 100%;
  }

  #top-bar {
    flex-direction: column;
    gap: 8px;
  }

  #char-dropdown { min-width: 100%; }

  #skills-list { grid-template-columns: 1fr; }
}