/* ============================================================
   INKFREQ'S CHARACTER FORGE — STYLES
   Token system:
   --parchment #EAE0C8   background / card fill
   --ink       #241F1A   primary text
   --burgundy  #6B1220   frame / headers / accents
   --gold      #A9832B   dividers, borders
   --atwill    #2C4A3B   at-will power card (green)
   --encounter #A6342A   encounter power card (vermilion)
   --daily     #1B1B1B   daily power card (black)
   --utility   #2B4C6F   utility power card (blue)
   Type: Cinzel (display) / Crimson Text (body) / IBM Plex Mono (numbers)
   ============================================================ */

:root {
  --parchment: #EAE0C8;
  --parchment-dark: #DED2B0;
  --ink: #241F1A;
  --burgundy: #6B1220;
  --burgundy-dark: #4E0D18;
  --gold: #A9832B;
  --atwill: #2C4A3B;
  --encounter: #A6342A;
  --daily: #1B1B1B;
  --utility: #2B4C6F;
  --card-bg: #F6F0DE;
  --muted: #7A6F5C;

  --font-display: 'Cinzel', serif;
  --font-body: 'Crimson Text', serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #D9CDAA;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: 0.02em; }

/* ---------------- CONTROL PANEL ---------------- */
.control-panel {
  background: var(--burgundy);
  color: var(--parchment);
  padding: 24px 0 28px;
  border-bottom: 4px solid var(--gold);
}

.control-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.app-title {
  color: var(--parchment);
  font-size: 1.9rem;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.dm-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}

.dm-name-row { display: flex; gap: 6px; }
.dm-name-row input { flex: 1; }
.dm-name-row .level-btn { width: 40px; font-size: 1.1rem; }

.dm-loot-field { justify-content: flex-end; }
.dm-loot-field .skill-check { color: var(--parchment); margin-top: 8px; }

.control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.field span { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: #E4D3B0; }

.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 8px 10px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--parchment);
  color: var(--ink);
}
.field textarea { resize: vertical; min-height: 60px; }

.subpanel textarea {
  width: 100%; font-family: var(--font-body); font-size: 0.95rem;
  padding: 8px 10px; border: 1px solid var(--gold); border-radius: 3px;
  background: var(--parchment); color: var(--ink); resize: vertical;
}

.level-control { display: flex; align-items: stretch; gap: 4px; }
.level-control input { text-align: center; width: 100%; }
.level-btn {
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  width: 34px; border: 1px solid var(--gold); border-radius: 3px;
  background: var(--gold); color: var(--ink); cursor: pointer;
}
.level-btn:hover { background: #C39B3D; }

.needs-choice { color: #E4A73B; font-weight: 600; text-transform: none; letter-spacing: normal; }

.control-section { margin-bottom: 26px; }
.section-title {
  color: var(--gold);
  font-size: 1.05rem;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(169,131,43,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.subpanel-grid { display: grid; gap: 18px; }
.subpanel-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.subpanel-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.subpanel-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.power-choice-list { display: flex; flex-direction: column; gap: 10px; max-height: 220px; overflow-y: auto; }
.power-choice-group { display: flex; flex-direction: column; gap: 3px; }
.power-choice-heading {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gold); border-bottom: 1px solid rgba(169,131,43,0.4); padding-bottom: 2px; margin-bottom: 2px;
}
.power-choice-heading .muted { text-transform: none; letter-spacing: normal; color: #C9BC9A; }

.ability-assign-list { display: flex; flex-direction: column; gap: 6px; }
.ability-assign-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
}
.ability-assign-label { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em; }
.ability-assign-row select {
  font-family: var(--font-mono); font-size: 0.95rem; padding: 5px 8px;
  border: 1px solid var(--gold); border-radius: 3px; background: var(--parchment); color: var(--ink);
}
.assign-hint { margin-top: 8px; font-size: 0.78rem; line-height: 1.35; }

.ability-method-field { margin-bottom: 8px; }
.ability-method-field span { color: #E4D3B0; }
.ability-method-field select { width: 100%; }
#rerollScoresBtn { margin-bottom: 10px; width: 100%; }

.point-buy-panel { display: flex; flex-direction: column; gap: 6px; }
.point-buy-remaining {
  font-size: 0.85rem; font-weight: 600; color: var(--parchment);
  background: rgba(0,0,0,0.2); border-radius: 3px; padding: 5px 8px; margin: 0 0 4px;
  text-align: center;
}
.point-buy-remaining.point-buy-over { color: #E39898; background: rgba(166,52,42,0.25); }
.point-buy-row {
  display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 6px;
}
.point-buy-row .level-btn { width: 26px; height: 26px; font-size: 0.9rem; }
.point-buy-score {
  font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--parchment);
  min-width: 22px; text-align: center;
}
.point-buy-cost { font-size: 0.72rem; text-align: right; }

.subpanel {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(169,131,43,0.5);
  border-radius: 4px;
  padding: 12px 14px;
}

.subpanel h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 10px;
}

.skill-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 0.9rem; }
.skill-check { display: flex; align-items: center; gap: 6px; }

.inline-add { display: flex; gap: 8px; margin-bottom: 10px; }
.inline-add select {
  flex: 1; padding: 6px 8px; border-radius: 3px; border: 1px solid var(--gold);
  background: var(--parchment); font-family: var(--font-body);
}
.inline-add button {
  padding: 6px 14px; border: none; border-radius: 3px; background: var(--gold);
  color: var(--ink); font-weight: 600; cursor: pointer;
}
.inline-add button:hover { background: #C39B3D; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--parchment); color: var(--ink); padding: 4px 8px; border-radius: 3px;
  font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px;
}
.chip-x { border: none; background: none; cursor: pointer; color: var(--burgundy); font-weight: 700; font-size: 1rem; line-height: 1; }

.family-row { display: flex; gap: 8px; margin-bottom: 8px; }
.family-row input { flex: 2; padding: 6px 8px; border-radius: 3px; border: 1px solid var(--gold); background: var(--parchment); font-family: var(--font-body); }
.family-row select { flex: 1; padding: 6px 8px; border-radius: 3px; border: 1px solid var(--gold); background: var(--parchment); font-family: var(--font-body); }

.siblings-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.sibling-row { display: grid; grid-template-columns: 2fr 1fr auto; gap: 6px; align-items: center; }
.sibling-row input, .sibling-row select {
  padding: 5px 7px; border-radius: 3px; border: 1px solid var(--gold);
  background: var(--parchment); font-family: var(--font-body); font-size: 0.85rem;
}

.btn-small {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  padding: 5px 12px; border: 1px solid var(--gold); border-radius: 3px;
  background: transparent; color: var(--parchment); cursor: pointer; margin-top: 4px;
}
.btn-small:hover { background: rgba(169,131,43,0.25); }

/* ---------------- Dice Roller page ---------------- */
.dice-page-body { background: #D9CDAA; min-height: 100vh; }
.dice-nav-links { display: flex; gap: 10px; }

.dice-main {
  max-width: 1100px; margin: 28px auto 60px; padding: 0 24px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start;
}
@media (max-width: 800px) { .dice-main { grid-template-columns: 1fr; } }

.dice-panel {
  background: var(--parchment); border: 3px solid var(--burgundy); border-radius: 4px;
  padding: 22px 26px; box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}
.dice-panel-title {
  font-size: 1.1rem; color: var(--burgundy); border-bottom: 1px solid var(--gold);
  padding-bottom: 6px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}

.dice-quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.btn-die {
  flex: 1 1 60px; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  padding: 14px 8px; border: 2px solid var(--burgundy); border-radius: 6px;
  background: var(--card-bg); color: var(--burgundy); cursor: pointer;
}
.btn-die:hover { background: var(--gold); color: var(--ink); }
.btn-die-d20 { background: var(--burgundy); color: var(--parchment); }
.btn-die-d20:hover { background: var(--burgundy-dark); }

.dice-pool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.dice-pool-row {
  display: flex; align-items: center; gap: 8px; background: var(--card-bg);
  border: 1px solid var(--gold); border-radius: 4px; padding: 6px 10px;
}
.dice-pool-label { flex: 1; font-weight: 600; font-family: var(--font-mono); }
.dice-pool-count { min-width: 20px; text-align: center; font-family: var(--font-mono); font-weight: 700; }
.dice-modifier-row { grid-column: span 2; }
.dice-modifier-input {
  flex: 1; padding: 5px 8px; border: 1px solid var(--gold); border-radius: 3px;
  background: var(--parchment); font-family: var(--font-mono); text-align: right;
}

.dice-formula-preview { font-family: var(--font-mono); font-size: 0.95rem; color: var(--muted); margin-bottom: 14px; }
.dice-formula-preview span { color: var(--burgundy); font-weight: 600; }

.dice-action-row { display: flex; gap: 10px; }
.btn-roll { flex: 1; font-size: 1.05rem; padding: 12px; }

.dice-result-area { min-height: 90px; margin-bottom: 20px; }
.dice-result-formula { font-family: var(--font-mono); color: var(--muted); font-size: 0.9rem; margin-bottom: 6px; }
.dice-breakdown-row {
  display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; font-size: 0.88rem;
  padding: 3px 0; border-bottom: 1px dashed rgba(169,131,43,0.3); font-family: var(--font-mono);
}
.dice-result-total {
  font-family: var(--font-mono); font-size: 2.2rem; font-weight: 700; color: var(--burgundy);
  text-align: center; margin-top: 10px;
}
.dice-result-pending { color: var(--muted); font-size: 1.3rem; letter-spacing: 0.05em; }

/* Tumbling die animation — shown briefly while a roll is "in the
   air" before settling on the already-computed result. One visual
   die per distinct die TYPE in the pool (not one per individual
   die), so rolling 20d6 doesn't try to animate 20 separate icons. */
.dice-spin-row { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.die-visual {
  width: 56px; height: 56px; border: 2px solid var(--burgundy); border-radius: 10px;
  background: var(--card-bg); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.3rem; color: var(--burgundy);
}
.die-spinning { animation: dieTumble 0.35s linear infinite; }
@keyframes dieTumble {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(1.1); }
  50%  { transform: rotate(180deg) scale(0.92); }
  75%  { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.dice-result-pop { animation: dicePop 0.32s ease; }
@keyframes dicePop {
  0%   { transform: scale(0.7); opacity: 0.4; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .die-spinning { animation: none; }
  .dice-result-pop { animation: none; }
}

.sound-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; font-size: 1.15rem; line-height: 1;
  background: transparent; color: var(--parchment);
  border: 1px solid var(--gold); border-radius: 4px; cursor: pointer;
}
.sound-toggle-btn:hover { background: rgba(169,131,43,0.25); }
.sound-toggle-btn[aria-pressed="false"] { opacity: 0.6; }

.dice-history-header { display: flex; justify-content: space-between; align-items: center; }
.dice-history-header .btn-small { color: var(--burgundy); border-color: var(--gold); margin-top: 0; }
.dice-history-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.dice-history-row {
  display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: center;
  font-size: 0.82rem; padding: 4px 6px; border-bottom: 1px dashed rgba(169,131,43,0.3);
}
.dice-history-formula { font-family: var(--font-mono); font-weight: 600; color: var(--burgundy); }
.dice-history-detail { color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; }
.dice-history-total { font-family: var(--font-mono); font-weight: 700; text-align: right; }

.inventory-box { max-height: 110px; overflow-y: auto; }
.inv-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  font-size: 0.88rem; padding: 3px 0; border-bottom: 1px dashed rgba(169,131,43,0.4);
}

.control-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------------- Map Generator page ---------------- */
.map-main {
  max-width: 1200px; margin: 28px auto 60px; padding: 0 24px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start;
}
@media (max-width: 900px) { .map-main { grid-template-columns: 1fr; } }

.map-panel {
  background: var(--parchment); border: 3px solid var(--burgundy); border-radius: 4px;
  padding: 22px 26px; box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}
.map-svg-container {
  width: 100%; overflow: hidden; position: relative;
  cursor: grab; touch-action: none; border: 1px solid rgba(107,18,32,0.3); border-radius: 4px;
}
.map-svg-container.dragging { cursor: grabbing; }
.map-svg-container svg { width: 100%; height: auto; display: block; border-radius: 4px; transform-origin: center center; }

.map-zoom-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.map-zoom-btn {
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  width: 34px; height: 34px; border: 1px solid var(--gold); border-radius: 3px;
  background: var(--gold); color: var(--ink); cursor: pointer;
}
.map-zoom-btn:hover { background: #C39B3D; }
.map-zoom-reset { width: auto; padding: 0 12px; font-size: 0.85rem; }
.map-zoom-hint { font-size: 0.8rem; }

.map-legend-list { max-height: 640px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.map-legend-row {
  display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; gap: 2px 10px;
  padding: 5px 4px; border-bottom: 1px dashed rgba(169,131,43,0.35); font-size: 0.85rem;
}
.map-legend-num {
  grid-row: 1 / 3; grid-column: 1; align-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 4px; color: #F6F0DE; font-family: var(--font-mono);
  font-weight: 700; font-size: 0.75rem;
}
.map-legend-name { grid-row: 1; grid-column: 2; font-weight: 600; }
.map-legend-flavor { grid-row: 2; grid-column: 2; font-size: 0.78rem; }

.map-cat-lodging { background: var(--utility); }
.map-cat-food { background: var(--encounter); }
.map-cat-religious { background: var(--gold); }
.map-cat-commerce { background: var(--atwill); }
.map-cat-civic { background: var(--burgundy); }
.map-cat-misc { background: var(--muted); }
.map-cat-residential { background: #4A4034; }
.map-cat-landmark { background: var(--gold); border-radius: 50%; }

.dungeon-svg-container { background: #2A2620; }
.dungeon-legend-num { background: #8A8272; }
.dungeon-legend-entrance { background: var(--atwill); }
.dungeon-legend-boss { background: var(--burgundy); }
.dungeon-legend-tags { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--burgundy); font-weight: 700; }

@media print {
  .map-main { grid-template-columns: 1fr; max-width: 100%; margin: 0; padding: 0; }
  .map-panel { box-shadow: none; border: 2px solid var(--burgundy); page-break-inside: avoid; }
  .map-legend-list { max-height: none; overflow: visible; }
  .map-svg-container { overflow: visible !important; border: none; }
  .map-svg-container svg { transform: none !important; }
}


.btn-primary, .btn-secondary {
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 10px 20px; border-radius: 3px; cursor: pointer; border: none;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: #C39B3D; }
.btn-secondary { background: transparent; color: var(--parchment); border: 1px solid var(--gold); }
.btn-secondary:hover { background: rgba(169,131,43,0.25); }
.file-btn { display: inline-flex; align-items: center; }

.status-msg { font-size: 0.85rem; }
.print-tip { font-size: 0.78rem; margin: 10px 0 0; }
.status-msg.ok { color: #9FD8A0; }
.status-msg.error { color: #E39898; }

.muted { color: var(--muted); font-size: 0.88rem; }

/* ---------------- SHEET ---------------- */
.sheet {
  max-width: 1100px;
  margin: 28px auto 60px;
}

/* Each print-page is a fully self-contained bordered unit — this is
   what makes borders start/end cleanly at page boundaries instead
   of one border trying to wrap content that spans multiple pages. */
.print-page {
  background: var(--parchment);
  border: 3px solid var(--burgundy);
  border-radius: 4px;
  padding: 20px 24px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
  margin-bottom: 28px;
}
.print-page:last-child { margin-bottom: 0; }

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 3px solid var(--burgundy);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.sheet-header h2 { font-size: 1.6rem; color: var(--burgundy); }
.sheet-header p { margin: 4px 0 0; color: var(--muted); font-style: italic; }
.sheet-alignment { font-size: 0.85rem; }

.sheet-header-page2 { display: block; }
.page2-name-ref { font-size: 1.3rem; }
.page2-subtitle { font-size: 0.8rem; }

.sheet-header-right { display: flex; gap: 20px; }
.stat-box { text-align: center; }
.stat-label { display: block; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted); }
.stat-value { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; color: var(--burgundy); }
.stat-value-coinage { font-size: 0.95rem; white-space: nowrap; }
.coinage-debt { color: var(--encounter); }

/* CSS multi-column auto-balances content height across columns —
   this is what keeps the page from having one packed column next
   to mostly-empty ones as the amount of content varies (a level 3
   character's 4 powers vs. a level 10 character's 12 look very
   different, and manually assigning content to fixed columns can't
   adapt to that; letting the browser flow and balance it can). */
/* Boxed layout: each .block is a bordered card with a fixed width
   tier (see .box-w* below), flowing left-to-right and wrapping to
   the next row. This replaced CSS multi-column layout, which
   repeatedly caused unpredictable results in print (balance mode
   could reorder content across a many-block page; auto mode
   without an explicit height packed nearly everything into one
   column instead of respecting the page boundary). Fixed-width
   boxes have no such ambiguity — a box's position is determined
   purely by its own width and document order, nothing else. */
.print-columns { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

.block {
  box-sizing: border-box;
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 0; /* gap on the flex container handles spacing now */
  break-inside: avoid;
  page-break-inside: avoid; /* legacy fallback for older print engines */
}
/* Width tiers — assign one per block based on its typical content size */
.box-w25 { flex: 0 0 calc(25% - 8px); max-width: calc(25% - 8px); }
.box-w33 { flex: 0 0 calc(33.333% - 7px); max-width: calc(33.333% - 7px); }
.box-w50 { flex: 0 0 calc(50% - 5px); max-width: calc(50% - 5px); }
.box-w100 { flex: 0 0 100%; max-width: 100%; }

.block-title {
  font-size: 0.95rem;
  color: var(--burgundy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Abilities — circular badges (mod prominent, score below), official-sheet style */
.abilities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.abil-circle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--card-bg); border: 2px solid var(--burgundy); border-radius: 50%;
  width: 78px; height: 78px; margin: 0 auto; position: relative;
}
.abil-name {
  position: absolute; top: -9px; background: var(--burgundy); color: var(--parchment);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 8px;
}
.abil-mod-big { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--burgundy); line-height: 1; margin-top: 6px; }
.abil-score-oval {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink);
  background: var(--parchment); border: 1px solid var(--gold); border-radius: 8px;
  padding: 0 6px; margin-top: 2px;
}

/* Defenses */
.defenses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.def-box {
  background: var(--card-bg); border: 2px solid var(--burgundy); border-radius: 6px;
  text-align: center; padding: 10px 4px;
}
.def-value { display: block; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--burgundy); }
.def-label { font-size: 0.65rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.04em; }

/* HP Tracker — boxed like the official paper sheet, now bound to live state */
.hp-tracker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hp-box {
  border: 2px solid var(--burgundy); border-radius: 4px; background: var(--card-bg);
  padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
}
.hp-box-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.hp-fillin { display: block; height: 22px; border-bottom: 1.5px solid var(--ink); }
.hp-fillin-value {
  font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--burgundy);
  border-bottom: none; height: auto;
}
.bloodied-indicator {
  display: none; text-align: center; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.78rem; color: var(--encounter);
  background: rgba(166,52,42,0.12); border: 1px solid var(--encounter);
  border-radius: 4px; padding: 3px; margin: 6px 0 0;
}
.hp-summary-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0;
  text-align: center;
}
.hp-summary-row > div {
  background: var(--card-bg); border: 1px solid var(--gold); border-radius: 4px; padding: 5px 2px;
}
.hp-summary-label { display: block; font-size: 0.62rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.03em; }
.hp-summary-value { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: var(--burgundy); }

/* Live HP tracking controls (control panel) */
.hp-track-live-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.hp-readout-box {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  background: rgba(0,0,0,0.18); border: 1px solid rgba(169,131,43,0.5); border-radius: 3px;
  padding: 6px 8px; font-family: var(--font-mono); font-size: 0.95rem; color: var(--parchment);
}
.hp-quick-actions { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.hp-adjust-input {
  width: 64px; padding: 8px 8px; border: 1px solid var(--gold); border-radius: 3px;
  background: var(--parchment); color: var(--ink); font-family: var(--font-mono); text-align: center;
}
.btn-hp {
  flex: 1; font-family: var(--font-body); font-weight: 600; font-size: 0.88rem;
  padding: 8px 10px; border-radius: 3px; cursor: pointer; border: 1px solid var(--gold);
}
.btn-hp:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-damage { background: var(--encounter); color: var(--parchment); border-color: var(--encounter); }
.btn-damage:hover:not(:disabled) { background: #8C2C22; }
.btn-heal { background: var(--atwill); color: var(--parchment); border-color: var(--atwill); }
.btn-heal:hover:not(:disabled) { background: #223A2E; }
.btn-surge { background: var(--gold); color: var(--ink); }
.btn-surge:hover:not(:disabled) { background: #C39B3D; }
.btn-rest { background: transparent; color: var(--parchment); }
.btn-rest:hover { background: rgba(169,131,43,0.25); }
.btn-encounter { background: var(--utility); color: var(--parchment); border-color: var(--utility); flex: 1 1 100%; }
.btn-encounter:hover:not(:disabled) { background: #223d59; }
.btn-death { background: var(--daily); color: var(--parchment); border-color: var(--daily); width: 100%; margin-top: 8px; }
.btn-death:hover:not(:disabled) { background: #333; }

/* Death saves */
.death-save-section {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(169,131,43,0.5);
}
.death-save-header {
  display: flex; align-items: center; gap: 8px; font-weight: 600;
  text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--parchment);
  margin-bottom: 8px;
}
.hp-status-indicator {
  padding: 2px 8px; border-radius: 3px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
}
.hp-status-indicator.hp-status-dying { background: var(--gold); color: var(--ink); }
.hp-status-indicator.hp-status-dead { background: var(--daily); color: var(--parchment); }
.death-save-boxes { display: flex; gap: 8px; margin-bottom: 8px; }
.death-save-box {
  width: 22px; height: 22px; border: 2px solid var(--parchment); border-radius: 3px; display: inline-block;
}
.death-save-box.failed { background: var(--encounter); border-color: var(--encounter); }

/* Sheet-level dying/dead banner */
.sheet-hp-banner {
  text-align: center; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em;
  padding: 6px; border-radius: 4px; margin: 0 0 14px; text-transform: uppercase;
}
.sheet-hp-banner-dying { background: rgba(169,131,43,0.25); color: #8A5A10; border: 2px solid var(--gold); }
.sheet-hp-banner-dead { background: rgba(27,27,27,0.12); color: var(--daily); border: 2px solid var(--daily); }

/* Feats */
.feat-slot-count { font-size: 0.7rem; text-transform: none; letter-spacing: normal; margin-left: 6px; }
.feat-choice-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.feat-check { display: block; }
.feat-unavailable { opacity: 0.5; }

/* Power usage tracking on cards */
.power-card.power-used { opacity: 0.55; }
.power-used-badge {
  position: absolute; top: 8px; right: 10px; background: var(--daily); color: var(--parchment);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; padding: 1px 7px; border-radius: 3px;
}
.power-toggle-btn {
  margin-top: 8px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  padding: 4px 10px; border-radius: 3px; border: 1px solid var(--burgundy); background: var(--burgundy);
  color: var(--parchment); cursor: pointer;
}
.power-toggle-btn:hover { background: var(--burgundy-dark); }

/* Paragon Path / Epic Destiny */
.path-summary { font-style: italic; color: var(--muted); font-size: 0.88rem; margin: 4px 0 8px; }
#sheet-paragon-path ul, #sheet-epic-destiny ul { margin: 0; padding-left: 18px; font-size: 0.85rem; }
#sheet-paragon-path li, #sheet-epic-destiny li { margin-bottom: 5px; }
#paragonPathSelect, #epicDestinySelect {
  width: 100%; padding: 8px 10px; border: 1px solid var(--gold); border-radius: 3px;
  background: var(--parchment); color: var(--ink); font-family: var(--font-body);
}

/* Vitals */
.vitals-list { display: flex; flex-direction: column; gap: 3px; }
.vital-row {
  display: flex; justify-content: space-between; font-size: 0.9rem;
  padding: 3px 2px; border-bottom: 1px dashed rgba(169,131,43,0.4);
}
.vital-row span:last-child { font-family: var(--font-mono); font-weight: 600; }

/* Saving Throw */
.save-base-row {
  display: flex; justify-content: space-between; font-size: 0.95rem;
  padding: 4px 2px; border-bottom: 1px dashed rgba(169,131,43,0.4); margin-bottom: 6px;
}
.save-base-value { font-family: var(--font-mono); font-weight: 600; color: var(--burgundy); }
.save-bonuses-list { display: flex; flex-direction: column; gap: 2px; }
.save-bonus-row { display: flex; justify-content: space-between; font-size: 0.85rem; }
.save-bonus-row span:last-child { font-family: var(--font-mono); color: var(--burgundy); }

/* Encumbrance */
.enc-status {
  text-align: center; font-weight: 600; padding: 5px; border-radius: 3px;
  margin: 8px 0 0; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.enc-unencumbered { background: rgba(44,74,59,0.15); color: var(--atwill); }
.enc-encumbered { background: rgba(230,160,50,0.22); color: #8A5A10; }
.enc-overloaded { background: rgba(166,52,42,0.2); color: var(--encounter); }

/* Conditions */
.conditions-row { display: flex; flex-wrap: wrap; gap: 6px; }
.condition-chip {
  background: var(--encounter); color: var(--parchment); padding: 3px 10px;
  border-radius: 12px; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}

/* Weapons table */
.weapons-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; table-layout: fixed; }
.weapons-table th {
  text-align: left; background: var(--burgundy); color: var(--parchment);
  padding: 5px 6px; font-weight: 600; font-size: 0.72rem; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.weapons-table td {
  padding: 5px 6px; border-bottom: 1px solid rgba(169,131,43,0.3); font-family: var(--font-mono);
  overflow-wrap: break-word; word-break: normal;
}
.weapons-table td:first-child { font-family: var(--font-body); }
/* Column widths: name and properties need the most room; atk/dmg/range are short */
.weapons-table th:nth-child(1), .weapons-table td:nth-child(1) { width: 22%; }
.weapons-table th:nth-child(2), .weapons-table td:nth-child(2) { width: 10%; }
.weapons-table th:nth-child(3), .weapons-table td:nth-child(3) { width: 16%; }
.weapons-table th:nth-child(4), .weapons-table td:nth-child(4) { width: 16%; }
.weapons-table th:nth-child(5), .weapons-table td:nth-child(5) { width: 36%; }

/* Power cards — signature element */
.power-card {
  position: relative;
  box-sizing: border-box;
  background: var(--card-bg);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 10px 12px 10px 14px;
  margin-bottom: 10px;
  break-inside: avoid;
  page-break-inside: avoid;
  border-left-width: 8px;
}
.power-card.card-atwill { border-left-color: var(--atwill); }
.power-card.card-encounter { border-left-color: var(--encounter); }
.power-card.card-daily { border-left-color: var(--daily); }
.power-card.card-utility { border-left-color: var(--utility); }

.power-tab {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 1px 7px;
  border-radius: 2px;
  color: var(--parchment);
  margin-bottom: 4px;
}
.card-atwill .power-tab { background: var(--atwill); }
.card-encounter .power-tab { background: var(--encounter); }
.card-daily .power-tab { background: var(--daily); }
.card-utility .power-tab { background: var(--utility); }

.power-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--burgundy); }
.power-meta { font-size: 0.78rem; color: var(--muted); font-style: italic; margin: 2px 0 6px; }
.power-desc { font-size: 0.9rem; }
.power-source { font-size: 0.68rem; font-style: italic; color: var(--muted); margin-top: 4px; }

/* Skills */
.skills-list { display: flex; flex-direction: column; gap: 2px; }
.skill-row {
  display: flex; justify-content: space-between; font-size: 0.88rem;
  padding: 3px 6px; border-radius: 2px;
}
.skill-row.trained { background: rgba(169,131,43,0.22); font-weight: 600; }
.skill-row span:last-child { font-family: var(--font-mono); }

/* Equipment / traits */
.equip-line { font-size: 0.9rem; margin: 0 0 8px; }
.inventory-print { font-size: 0.85rem; display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.inv-print-row {
  display: flex; justify-content: space-between; padding: 3px 2px;
  border-bottom: 1px dashed rgba(169,131,43,0.4);
}
.inv-print-row span:last-child { font-family: var(--font-mono); color: var(--burgundy); }
.traits-list { margin: 0; padding-left: 18px; font-size: 0.88rem; }
.traits-list li { margin-bottom: 5px; }
.feat-source-note { list-style: none; margin-left: -18px; font-size: 0.72rem; font-style: italic; color: var(--muted); margin-top: 6px; }
.equipment-source-note { font-size: 0.72rem; font-style: italic; color: var(--muted); margin-top: 6px; }

.physical-desc { font-size: 0.88rem; color: var(--muted); font-style: italic; margin: 0 0 8px; }
.backstory-text, .campaign-notes-text { font-size: 0.9rem; white-space: pre-wrap; line-height: 1.5; margin: 0; }

/* ---------------- Encounter Generator page ---------------- */
.encounter-guidance { font-size: 0.82rem; line-height: 1.5; margin: 12px 0 18px; }
.encounter-guidance strong { color: var(--gold); }
.encounter-filter-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .encounter-filter-grid { grid-template-columns: repeat(2, 1fr); } }

.encounter-fallback-note {
  background: rgba(166,52,42,0.15); border: 1px solid var(--encounter); color: var(--encounter);
  border-radius: 4px; padding: 8px 10px; font-size: 0.85rem; font-weight: 600; margin: 0 0 12px;
}
.xp-budget-block { margin-bottom: 16px; }
.xp-budget-label {
  display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: 0.9rem; font-weight: 600; color: var(--burgundy); margin-bottom: 4px;
}
.xp-bar-track { height: 14px; background: var(--card-bg); border: 1px solid var(--gold); border-radius: 7px; overflow: hidden; }
.xp-bar-fill { height: 100%; background: var(--atwill); transition: width 0.2s ease; }
.xp-bar-fill.xp-bar-over { background: var(--encounter); }

.monster-list { display: flex; flex-direction: column; gap: 2px; }
.monster-row {
  display: grid; grid-template-columns: auto 1.3fr auto auto; gap: 4px 10px; align-items: baseline;
  padding: 6px 4px; border-bottom: 1px dashed rgba(169,131,43,0.35); font-size: 0.88rem;
}
.monster-qty { font-family: var(--font-mono); font-weight: 700; color: var(--burgundy); }
.monster-name { font-weight: 600; }
.monster-meta { font-size: 0.78rem; color: var(--muted); }
.monster-xp { font-family: var(--font-mono); font-weight: 600; text-align: right; }
.monster-flavor { grid-column: 1 / -1; font-size: 0.8rem; margin-top: -2px; }
.monster-remove-btn {
  border: none; background: none; color: var(--encounter); font-weight: 700; font-size: 1rem;
  cursor: pointer; line-height: 1; padding: 0 4px;
}
.monster-remove-btn:hover { color: #E39898; }

.monster-search-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--gold); border-radius: 3px;
  background: var(--parchment); color: var(--ink); font-family: var(--font-body); font-size: 0.95rem;
  margin-bottom: 10px;
}
.search-results-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.search-result-row {
  display: grid; grid-template-columns: 1.3fr auto auto auto; gap: 4px 10px; align-items: center;
  padding: 6px 4px; border-bottom: 1px dashed rgba(169,131,43,0.3); font-size: 0.85rem; color: var(--parchment);
}
.search-result-name { font-weight: 600; }
.search-add-btn { color: var(--parchment); border-color: var(--gold); margin-top: 0; white-space: nowrap; }
.search-result-row .monster-flavor { grid-column: 1 / -1; color: #C9BC9A; }

.loot-scope-note { margin-top: 12px; font-size: 0.78rem; }

@media print {
  .map-main { grid-template-columns: 1fr; max-width: 100%; margin: 0; padding: 0; }
  .monster-flavor { grid-column: 1 / -1; }
}

/* ---------------- PRINT ----------------
   Two pages: page 1 (combat reference) and page 2 (character &
   background) are each their own .print-page — bordered, self-
   contained, and forced to a fresh sheet of paper via break-after.
   That's what keeps a border from trying to span a page boundary
   (which browsers just clip rather than repeat) and keeps the
   layout to a predictable 2 pages instead of flowing wherever
   content happens to end. */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; font-size: 9.5px; }

  .sheet { margin: 0; max-width: 100%; }

  .print-page {
    box-shadow: none;
    border: 2px solid var(--burgundy);
    padding: 8px 12px;
    margin-bottom: 0;
    break-inside: avoid;
  }
  .print-page:not(:last-child) {
    break-after: page;
    page-break-after: always; /* legacy fallback */
  }

  /* Page 1 has bounded content and should never split mid-page.
     The Powers page is the one exception — it's allowed to grow
     past one sheet for high-level characters, so forcing it to
     avoid breaking would just cause unpredictable overflow instead
     of a clean, expected extra page. */
  .print-page-powers { break-inside: auto; }

  .sheet-header { margin-bottom: 6px; padding-bottom: 5px; }
  .print-columns { gap: 8px; }
  .block { padding: 5px 7px; }
  .block-title { margin-bottom: 2px; padding-bottom: 1px; font-size: 0.78rem; }

  .save-base-row { padding: 1px 0; margin-bottom: 2px; font-size: 0.78rem; }
  .enc-status { padding: 1px; margin: 2px 0 0; font-size: 0.66rem; }
  .conditions-row { margin-top: 2px; }

  /* Equipment/background text, now sharing page 1 with combat stats */
  .traits-list, .inventory-print, .backstory-text, .campaign-notes-text, .physical-desc, .equip-line { font-size: 0.75rem; line-height: 1.25; margin-bottom: 2px; }
  .traits-list li, .inv-print-row { margin-bottom: 2px; }
  #sheet-property .skill-row, #sheet-family .skill-row { font-size: 0.75rem; padding: 1px 0; }

  /* Ability scores: circles become compact rows — a badge takes far
     more vertical room than the information in it justifies, and
     that overhead is multiplied by 6 stats. */
  .abilities-grid { display: block; }
  .abil-circle {
    display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: 6px; width: auto; height: auto; border: none; border-radius: 0;
    background: none; margin: 0; padding: 0;
  }
  .abil-name {
    position: static; background: none; color: var(--burgundy); padding: 0;
    font-size: 0.72rem; width: 26px; flex-shrink: 0;
  }
  .abil-mod-big { font-size: 0.82rem; margin-top: 0; width: 26px; }
  .abil-score-oval { border: none; background: none; padding: 0; margin-top: 0; font-size: 0.66rem; color: var(--muted); }

  /* Power cards keep their full colored-card look in print now —
     the old stripped-down list style was to save space when Powers
     shared a page with everything else; now it has its own
     dedicated page, so there's no reason not to look like an actual
     card (border, left color accent, rounded corners) same as on
     screen. Font sizes still come down a bit for print density. */
  .power-tab { font-size: 0.58rem; }
  .power-name { font-size: 0.95rem; }
  .power-meta { font-size: 0.72rem; }
  .power-desc { font-size: 0.8rem; line-height: 1.35; }
  .power-source { font-size: 0.6rem; }
  .power-toggle-btn { display: none !important; } /* interactive-only, never useful on paper */

  .weapons-table { font-size: 0.72rem; }
  .weapons-table th, .weapons-table td { padding: 2px 4px; }
  .skill-row, .vital-row, .save-bonus-row { font-size: 0.75rem; padding: 1px 2px; }
  .hp-box-label, .hp-summary-label { font-size: 0.56rem; }
  .hp-fillin-value, .hp-summary-value { font-size: 0.85rem; }
  .def-value { font-size: 1.05rem; }

  @page { size: letter; margin: 0.3in; }
}

@media screen and (max-width: 1100px) {
  .subpanel-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .subpanel-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 900px) {
  .box-w25, .box-w33, .box-w50 { flex-basis: 100%; max-width: 100%; }
  .subpanel-grid.cols-2, .subpanel-grid.cols-3, .subpanel-grid.cols-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME HUB PAGE — "The Unprepared GM"
   ============================================================ */
.home-page-body { background: #D9CDAA; min-height: 100vh; }

.home-hero {
  text-align: center; max-width: 800px; margin: 56px auto 0; padding: 0 24px;
}
.home-title {
  font-family: var(--font-display); font-size: 3rem; font-weight: 700;
  color: var(--burgundy); text-shadow: 0 1px 0 rgba(255,255,255,0.3); margin: 0;
}
.home-subhead {
  font-family: var(--font-body); font-style: italic; font-size: 1.15rem;
  color: var(--ink); margin: 10px 0 0; opacity: 0.85;
}

.folder-wrap { max-width: 980px; margin: 40px auto 60px; padding: 0 24px; }

.home-note-wrap { max-width: 980px; margin: 0 auto 60px; padding: 0 24px; }
.home-note {
  background: var(--card-bg); border: 1px solid var(--gold); border-radius: 6px;
  padding: 20px 26px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.home-note p {
  font-family: var(--font-body); font-size: 0.95rem; line-height: 1.6;
  color: var(--ink); margin: 0 0 12px;
}
.home-note p:last-child { margin-bottom: 0; }

/* Manila-folder tabs: the active tab visually merges with the body
   below it (same color, no bottom border), the inactive tab reads
   as "behind" it (darker, sits lower, has a bottom border) — the
   classic skeuomorphic folder-tab look. */
.folder-tabs { display: flex; gap: 6px; }
.folder-tab {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  padding: 14px 28px 12px; border: 3px solid var(--burgundy); border-bottom: none;
  border-radius: 12px 12px 0 0; cursor: pointer; position: relative; top: 3px;
  background: #C7B98E; color: var(--burgundy); opacity: 0.8;
}
.folder-tab:hover { opacity: 1; }
.folder-tab-active {
  background: var(--parchment); top: 0; opacity: 1; z-index: 2;
  box-shadow: 0 -3px 8px rgba(0,0,0,0.08);
}

.folder-body {
  background: var(--parchment); border: 3px solid var(--burgundy); border-radius: 0 8px 8px 8px;
  padding: 32px; box-shadow: 0 8px 26px rgba(0,0,0,0.22); min-height: 320px;
}
.folder-panel-hidden { display: none; }

.tool-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 700px) { .tool-card-grid { grid-template-columns: 1fr; } }

.tool-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: var(--card-bg); border: 2px solid var(--gold); border-radius: 8px;
  padding: 20px; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.tool-card:hover {
  border-color: var(--burgundy); transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.tool-card-icon { font-size: 2rem; }
.tool-card-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--burgundy); font-weight: 700; }
.tool-card-desc { font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); line-height: 1.4; }

/* Simplified nav bread crumb used on every tool page, replacing
   the old flat multi-link row now that there's a real home base. */
.home-breadcrumb {
  display: inline-block; color: var(--parchment); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  border: 1px solid var(--gold); border-radius: 4px; padding: 8px 16px;
}
.home-breadcrumb:hover { background: rgba(169,131,43,0.25); }