:root {
  color-scheme: dark;
  --black: #02030a;
  --screen: #050914;
  --panel: #081121;
  --panel-2: #0d1930;
  --panel-3: #111f39;
  --text: #e8efd1;
  --muted: #9aa78f;
  --dim: #64706a;
  --line-dark: #171d2a;
  --line: #7f8da8;
  --line-bright: #d8e0ec;
  --blue: #3355aa;
  --blue-bright: #55aaff;
  --cyan: #55ffff;
  --green: #55ff88;
  --gold: #ffff66;
  --orange: #ffaa44;
  --red: #ff5555;
  --magenta: #ff66ff;
  --white: #ffffff;
  --pixel-shadow: 3px 3px 0 #000;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #000; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(31,48,80,.18) 1px, transparent 1px),
    linear-gradient(rgba(31,48,80,.13) 1px, transparent 1px),
    #02040a;
  background-size: 16px 16px;
  font-family: "Lucida Console", Monaco, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.45;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: radial-gradient(ellipse at center, transparent 54%, rgba(0,0,0,.36) 100%);
}
.screen-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: .12;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.16) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: screen;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; color: #505968 !important; background: #090d16 !important; text-shadow: none !important; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px dotted var(--gold);
  outline-offset: 3px;
}
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: "Lucida Console", Monaco, "Courier New", monospace; }
h1, h2, h3 { text-transform: uppercase; }
h2 { color: var(--cyan); font-size: clamp(1.22rem, 2.2vw, 1.72rem); letter-spacing: .08em; text-shadow: 2px 2px #000; }
h3 { color: var(--gold); font-size: 1rem; letter-spacing: .06em; }
h4 {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #4d6179;
}

.app-shell {
  width: min(1480px, calc(100% - 24px));
  margin: 12px auto 28px;
  border: 4px double var(--line-bright);
  outline: 4px solid #000;
  background: var(--screen);
  box-shadow: 0 0 0 2px #39455b, 12px 14px 0 rgba(0,0,0,.78);
  position: relative;
  z-index: 2;
}
.boot-strip {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 9px;
  border-bottom: 2px solid #000;
  background: #001b16;
  color: var(--green);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.topbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: 12px;
  border-top: 2px solid #2d3c65;
  border-bottom: 4px double var(--line-bright);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px),
    #102050;
}
.brand-block { min-width: 0; }
.eyebrow {
  margin-bottom: 5px;
  color: var(--green);
  font-size: .68rem;
  letter-spacing: .08em;
  font-weight: 700;
  text-transform: uppercase;
}
h1 {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .3em;
  margin: 0;
  color: var(--white);
  font-size: clamp(2.05rem, 5vw, 4rem);
  line-height: .9;
  letter-spacing: -.05em;
  text-shadow: 3px 0 #18388a, 0 3px #18388a, 3px 3px #000, 6px 6px #000;
}
h1 span:last-child { color: var(--cyan); }
.subtitle {
  color: var(--gold);
  margin: 9px 0 0;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.subtitle b { color: var(--muted); }
.top-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-width: 190px;
  align-content: center;
}
kbd {
  display: inline-block;
  min-width: 30px;
  margin-right: 7px;
  padding: 1px 4px;
  border: 1px solid #dbe7ff;
  border-bottom-color: #48536a;
  background: #050913;
  color: var(--cyan);
  box-shadow: 1px 1px #000;
  font-size: .7rem;
  text-align: center;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 8px;
  padding: 8px;
  align-items: start;
}
.story-column { min-width: 0; display: grid; gap: 8px; }
.status-bar, .story-card, .combat-panel, .shop-panel, .greyhaven-panel, .sidebar {
  border: 3px double var(--line);
  background: var(--panel);
  box-shadow: inset 0 0 0 2px #02040a;
}
.status-bar {
  padding: 8px;
  display: grid;
  grid-template-columns: 180px repeat(3, minmax(120px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.identity-block, .health-wrap, .mana-wrap, .xp-wrap {
  border: 1px solid #42506a;
  background: #07101f;
  padding: 7px 8px;
}
.identity-block > span {
  display: block;
  color: var(--white);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.identity-block small { display: block; color: var(--muted); margin-top: 4px; font-size: .7rem; }
.identity-block #titleText { color: var(--gold); }
.resource-line {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  color: var(--muted);
  text-transform: uppercase;
  font-size: .68rem;
}
.resource-line span {
  border: 1px solid #35445c;
  padding: 5px 7px;
  background: #050b16;
  text-align: center;
}
.resource-line strong { color: var(--white); }
.bar-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  margin-bottom: 5px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.meter {
  height: 13px;
  padding: 2px;
  border: 1px solid #9eabc0;
  background: #02040a;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  transition: width .12s steps(8, end);
  background-size: 8px 8px !important;
}
.meter-fill.health { background: repeating-linear-gradient(90deg, var(--red) 0 6px, #8e202c 6px 8px); }
.meter-fill.mana { background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, #205b99 6px 8px); }
.meter-fill.xp { background: repeating-linear-gradient(90deg, var(--gold) 0 6px, #8b7621 6px 8px); }
.meter-fill.enemy { background: repeating-linear-gradient(90deg, var(--magenta) 0 6px, #7a257a 6px 8px); }
.status-effects {
  grid-column: 1 / -1;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.status-chip {
  border: 1px solid var(--orange);
  background: #1c0e05;
  color: var(--orange);
  padding: 3px 6px;
  font-size: .64rem;
  text-transform: uppercase;
}

.story-card {
  min-height: 520px;
  padding: clamp(18px, 3vw, 34px);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(85,170,255,.025), rgba(85,170,255,.025)),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(85,170,255,.035) 15px 16px),
    #07101b;
}
.story-card::before, .combat-panel::before, .greyhaven-panel::before, .shop-panel::before {
  content: "";
  display: block;
  height: 5px;
  margin: -12px -12px 15px;
  background: repeating-linear-gradient(90deg, var(--blue-bright) 0 8px, transparent 8px 12px, var(--cyan) 12px 16px, transparent 16px 20px);
  opacity: .45;
}
.story-card::before { margin: -22px -22px 20px; }
.location-meta {
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  font-weight: 800;
  margin-bottom: 12px;
}
.location-meta::before { content: "LOCATION> "; color: var(--cyan); }
.story-text {
  color: var(--text);
  font-size: .94rem;
  line-height: 1.72;
  max-width: 900px;
  text-shadow: 1px 1px #000;
}
.story-text p { margin-bottom: 1em; }
.story-text .memory-line { color: var(--gold); }
.story-text .memory-line::before { content: "// "; }
.choices {
  counter-reset: choice;
  display: grid;
  gap: 6px;
  margin-top: 24px;
  max-width: 920px;
}
.choice-button {
  counter-increment: choice;
  width: 100%;
  text-align: left;
  color: var(--text);
  border: 2px solid #677893;
  border-left: 6px solid var(--blue-bright);
  background: #090f1c;
  padding: 10px 12px;
  min-height: 44px;
  text-transform: none;
  box-shadow: inset 2px 2px 0 #1e2a3c, inset -2px -2px 0 #000;
}
.choice-button::before { content: counter(choice) ". "; color: var(--gold); font-weight: 800; }
.choice-button:hover, .choice-button:focus-visible {
  color: var(--white);
  border-color: var(--cyan);
  border-left-color: var(--gold);
  background: #173d78;
}
.choice-button:active { transform: translate(2px, 2px); box-shadow: inset 1px 1px 0 #000; }
.choice-button .choice-attribute {
  color: var(--cyan);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  float: right;
  margin-left: 10px;
  text-transform: uppercase;
}
.choice-button small { display: block; color: #b4c0cf; margin-top: 4px; line-height: 1.35; }
.choice-button.route-back { border-left-color: var(--orange); }
.choice-button.shop-entry { border-left-color: var(--gold); }
.roll-result {
  margin-top: 18px;
  border: 2px solid var(--blue-bright);
  border-left-width: 8px;
  background: #08152c;
  padding: 10px 12px;
  color: var(--cyan);
}
.roll-result.success { border-color: var(--green); color: var(--green); background: #071a11; }
.roll-result.failure { border-color: var(--red); color: #ff9b9b; background: #21080c; }

.sidebar {
  position: sticky;
  top: 8px;
  overflow: hidden;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 4px;
  border-bottom: 3px double var(--line);
  background: #030711;
}
.tab {
  border: 1px solid #53617a;
  background: #101b31;
  color: #aeb8c8;
  padding: 8px 5px;
  font-size: .64rem;
  text-transform: uppercase;
  box-shadow: inset 1px 1px #33425f, inset -1px -1px #000;
}
.tab::before { content: "> "; color: transparent; }
.tab:hover { color: var(--white); background: #17346b; }
.tab.active {
  color: var(--gold);
  background: #274991;
  border-color: var(--white);
}
.tab.active::before { color: var(--gold); }
.tab-panel {
  display: none;
  padding: 13px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  scrollbar-color: #50648c #060b14;
  scrollbar-width: thin;
}
.tab-panel.active { display: block; }
.panel-note { color: var(--muted); font-size: .76rem; line-height: 1.5; }

.attribute-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.attribute-card {
  border: 2px solid #52647e;
  background: #091321;
  padding: 9px;
  box-shadow: inset 1px 1px #253752, inset -1px -1px #000;
}
.attribute-card span { display: block; color: var(--muted); font-size: .67rem; text-transform: uppercase; }
.attribute-card strong { display: block; color: var(--white); font-size: 1.45rem; line-height: 1; margin-top: 4px; }
.attribute-card small { display: block; color: var(--dim); font-size: .62rem; margin-top: 3px; }
.derived-stats {
  margin-top: 10px;
  border: 2px solid #52647e;
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 4px;
  background: #050b14;
}
.derived-stats div { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); padding: 3px 5px; border-bottom: 1px dotted #2c3c54; }
.derived-stats strong { color: var(--cyan); }
.attribute-point-box {
  margin-top: 10px;
  border: 2px solid var(--magenta);
  background: #19071a;
  padding: 10px;
}
.attribute-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.seed-card {
  margin-top: 10px;
  border: 1px dashed #647693;
  background: #030812;
  padding: 9px;
}
.seed-card span { color: var(--muted); font-size: .64rem; display: block; margin-bottom: 5px; text-transform: uppercase; }
.seed-card code { color: var(--gold); word-break: break-all; }

.stack-list, .journal-list, .paths-list, .shop-list, .save-slots-list, .codex-grid { display: grid; gap: 6px; }
.stack-card, .equipment-card, .path-card, .shop-item, .contract-card, .faction-card, .recipe-card, .title-card,
.spell-card, .preparation-card, .upgrade-card, .town-upgrade-card, .codex-card {
  border: 2px solid #485a74;
  background: #081220;
  padding: 9px;
  box-shadow: inset 1px 1px #25334b, inset -1px -1px #000;
}
.stack-card strong, .equipment-card strong, .shop-item strong { display: block; color: var(--white); margin-bottom: 3px; }
.stack-card p, .equipment-card p, .path-card p, .shop-item p, .contract-card p, .faction-card p, .recipe-card p, .title-card p,
.spell-card p, .preparation-card p, .upgrade-card p, .town-upgrade-card p, .codex-card p {
  color: var(--muted);
  line-height: 1.4;
  margin: 4px 0 0;
  font-size: .73rem;
}
.stack-card .tag, .equipment-card .tag, .codex-meta, .faction-rank, .spell-school {
  color: var(--cyan);
  font-size: .61rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 4px;
}
.rarity-common { color: #c9cfbf !important; }
.rarity-uncommon { color: var(--green) !important; }
.rarity-rare { color: var(--cyan) !important; }
.rarity-cursed { color: var(--magenta) !important; }
.rarity-legendary { color: var(--gold) !important; }
.affix-line { color: var(--gold) !important; }
.item-actions, .save-slot-actions { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.item-actions button { flex: 1; }
.equipment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.equipment-card.empty { color: var(--muted); min-height: 76px; }
.section-gap { margin-top: 19px; }
.supplies-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.supply-card {
  border: 2px solid #485a74;
  background: #081220;
  padding: 8px;
  text-align: center;
}
.supply-card strong { display: block; color: var(--gold); font-size: 1.15rem; }
.supply-card span { color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.empty-state { color: var(--dim); font-style: normal; }
.empty-state::before { content: "[EMPTY] "; color: #4b596d; }
.journal-entry { border-left: 4px solid var(--blue-bright); padding: 4px 0 4px 9px; }
.journal-entry strong { display: block; color: var(--gold); margin-bottom: 2px; }
.journal-entry p { color: var(--muted); margin: 0; font-size: .72rem; line-height: 1.45; }
.path-card { color: var(--muted); }
.path-card strong { color: var(--white); }

button, .ghost-button, .attribute-buttons button, .town-actions button, .town-card button,
.spell-card button, .preparation-card button, .upgrade-card button, .town-upgrade-card button,
.save-slot-actions button, .item-actions button {
  border: 2px solid #8b99af;
  background: #101b31;
  color: var(--text);
  padding: 7px 9px;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
  box-shadow: inset 2px 2px #394a67, inset -2px -2px #02040a, 2px 2px #000;
}
button:hover { color: var(--white); background: #21458a; border-color: var(--cyan); }
button:active { transform: translate(2px, 2px); box-shadow: inset 1px 1px #02040a; }
.primary-button, .danger-button {
  width: 100%;
  padding: 11px 14px;
  font-weight: 900;
  letter-spacing: .07em;
}
.primary-button { background: #174b2c; border-color: var(--green); color: var(--green); }
.primary-button:hover { background: #20703e; color: var(--white); }
.danger-button { background: #53151d; border-color: var(--red); color: #ffc4c4; }
.full-width { width: 100%; }

.shop-panel, .combat-panel, .greyhaven-panel { padding: 12px; }
.panel-heading, .enemy-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 2px dashed #52617a;
}
.panel-heading p, .enemy-header p { color: var(--muted); }
.shop-gold {
  min-width: 160px;
  border: 2px solid var(--gold);
  background: #171606;
  color: var(--gold);
  padding: 8px;
  text-align: center;
  text-transform: uppercase;
  font-size: .66rem;
}
.shop-gold strong { display: block; color: var(--white); margin-top: 3px; font-size: .84rem; }
.shop-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.shop-item-header { display: flex; justify-content: space-between; gap: 10px; }
.shop-price { color: var(--gold); white-space: nowrap; }

.enemy-header { grid-template-columns: minmax(0, 1fr) minmax(190px, 270px); }
.enemy-hp { border: 2px solid #5f506e; background: #100817; padding: 9px; }
.enemy-intent {
  margin-top: 8px;
  border: 2px solid var(--gold);
  background: #1b1805;
  color: var(--gold);
  padding: 7px 9px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}
.enemy-intent::before { content: "NEXT> "; color: var(--white); }
.enemy-intent.elite { border-color: var(--red); background: #24080d; color: #ff9e9e; }
.elite-name::before { content: "[ELITE] "; color: var(--red); font-size: .65em; letter-spacing: .05em; }
.intent-obscured { filter: blur(2px); user-select: none; opacity: .72; }
.combat-log {
  height: 190px;
  overflow-y: auto;
  border: 2px solid #52647e;
  background: #02060d;
  padding: 9px;
  margin: 10px 0;
  color: #cbd4c4;
  font-size: .74rem;
}
.combat-log p { margin: 0 0 5px; padding-bottom: 4px; border-bottom: 1px dotted #213047; }
.combat-actions {
  counter-reset: combat;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.combat-actions button { counter-increment: combat; min-height: 46px; text-align: left; }
.combat-actions button::before { content: counter(combat) ". "; color: var(--gold); }
.combat-actions .spell-action { border-color: var(--cyan); background: #082245; }
.combat-actions .retreat-action { border-color: var(--orange); background: #2b1806; }
.mana-inline { color: var(--cyan); font-weight: 800; }
.boss-phase { color: var(--red); font-weight: 800; }

.greyhaven-panel { border-color: var(--gold); }
.greyhaven-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
  margin-top: 10px;
  align-items: start;
}
.town-card {
  border: 3px double #786d3f;
  background: #0b0e16;
  padding: 10px;
  align-self: start;
}
.town-card h4 { color: var(--gold); border-bottom-color: #786d3f; }
.town-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.contract-card.complete { border-color: var(--green); }
.contract-card.active { border-color: var(--cyan); }
.progress-track {
  height: 10px;
  padding: 1px;
  border: 1px solid #70809a;
  background: #02040a;
  overflow: hidden;
  margin-top: 7px;
}
.progress-track > span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--green) 0 6px, #1b743d 6px 8px); }
.material-cost { color: var(--gold); font-size: .68rem; }
.preparation-card.selected { border-color: var(--green); background: #071d13; }
.town-upgrade-card.purchased { border-color: var(--green); }
.spell-card.prepared { border-color: var(--cyan); background: #071a2c; }
.spell-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.spell-cost { color: var(--cyan); white-space: nowrap; font-weight: 800; font-size: .68rem; }
.region-rule { border-left: 4px solid var(--green); padding-left: 8px; color: var(--muted); }

footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 3px double var(--line);
  background: #020711;
  color: var(--green);
  font-size: .62rem;
  padding: 6px 9px;
  text-transform: uppercase;
}
#saveStatus { color: var(--gold); text-align: right; }
.keyboard-legend {
  width: min(1480px, calc(100% - 24px));
  margin: -16px auto 24px;
  color: #4f615d;
  font-size: .6rem;
  text-align: right;
  text-transform: uppercase;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.88);
  padding: 14px;
}
.modal {
  width: min(760px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  border: 5px double var(--white);
  outline: 4px solid #173a87;
  background: #07101d;
  box-shadow: 12px 12px 0 #000;
  padding: 18px;
}
.modal::before {
  content: "DUSKGRAVE SYSTEM DIALOG";
  display: block;
  margin: -18px -18px 15px;
  padding: 4px 8px;
  background: #204a99;
  color: var(--white);
  font-size: .65rem;
  text-transform: uppercase;
}
.modal.compact { width: min(470px, 100%); }
.modal label { display: grid; gap: 5px; margin-bottom: 11px; color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.modal input, .modal select {
  width: 100%;
  border: 2px solid #8896ab;
  background: #02060d;
  color: var(--white);
  padding: 9px;
  border-radius: 0;
  box-shadow: inset 2px 2px #000;
}
.form-grid { display: grid; grid-template-columns: 1fr 180px; gap: 8px; }
.seed-input-row { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.background-preview {
  border: 2px solid #52647e;
  background: #081521;
  padding: 10px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 12px;
}
.background-preview strong { color: var(--cyan); }
.creation-points { margin: 12px 0 8px; color: var(--gold); text-transform: uppercase; }
.creation-attributes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; }
.creation-attribute { border: 2px solid #52647e; background: #081220; padding: 9px; }
.creation-attribute-header { display: flex; justify-content: space-between; margin-bottom: 7px; text-transform: uppercase; }
.creation-attribute strong { color: var(--white); font-size: 1.25rem; }
.stepper { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.skill-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 14px; }
.skill-choice {
  border: 3px double #52647e;
  background: #081220;
  color: var(--text);
  padding: 12px;
  text-align: left;
  min-height: 205px;
}
.skill-choice:hover { border-color: var(--cyan); background: #12346b; }
.skill-choice .skill-tag { color: var(--green); font-size: .62rem; letter-spacing: .06em; font-weight: 900; text-transform: uppercase; }
.skill-choice h3 { margin: 8px 0; }
.skill-choice p { color: var(--muted); line-height: 1.45; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.save-slot-card {
  border: 3px double #52647e;
  background: #050b14;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.save-slot-card p { color: var(--muted); margin: 4px 0 0; font-size: .7rem; }
.save-slot-actions { justify-content: flex-end; }
.save-security { color: var(--green); font-size: .62rem; margin-top: 4px; }
.backup-note { color: var(--gold); font-size: .62rem; }
.import-label { border-top: 2px dashed #52647e; padding-top: 12px; }
.hidden { display: none !important; }

@media (max-width: 1120px) {
  .game-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .tab-panel { max-height: none; }
  .tabs { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 820px) {
  body { font-size: 13px; }
  .app-shell { width: calc(100% - 10px); margin-top: 5px; border-width: 3px; box-shadow: none; }
  .boot-strip span:nth-child(2) { display: none; }
  .topbar { flex-direction: column; }
  .top-actions { grid-template-columns: repeat(3, 1fr); min-width: 0; }
  .top-actions kbd { display: none; }
  .status-bar { grid-template-columns: repeat(3, 1fr); }
  .identity-block { grid-column: 1 / -1; }
  .resource-line { grid-template-columns: repeat(3, 1fr); }
  .shop-columns, .greyhaven-grid, .enemy-header, .panel-heading, .skill-choices, .combat-actions, .form-grid { grid-template-columns: 1fr; }
  .shop-gold { min-width: 0; }
  .tabs { grid-template-columns: repeat(3, 1fr); }
  .equipment-grid { grid-template-columns: 1fr; }
  .save-slot-card { grid-template-columns: 1fr; }
  .save-slot-actions { justify-content: flex-start; }
  footer { flex-direction: column; }
  #saveStatus { text-align: left; }
  .keyboard-legend { display: none; }
}
@media (max-width: 520px) {
  .game-layout { padding: 4px; gap: 4px; }
  .story-column { gap: 4px; }
  .topbar { padding: 9px; }
  h1 { font-size: 2rem; }
  .subtitle b { display: block; margin-top: 3px; }
  .top-actions { grid-template-columns: 1fr; }
  .status-bar { grid-template-columns: 1fr; }
  .identity-block { grid-column: auto; }
  .resource-line { grid-template-columns: repeat(2,1fr); }
  .story-card { min-height: 480px; padding: 17px 13px; }
  .story-card::before { margin: -12px -8px 14px; }
  .attribute-grid, .creation-attributes, .town-actions, .supplies-grid { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: repeat(2, 1fr); }
  .modal { padding: 13px; }
  .modal::before { margin: -13px -13px 12px; }
  .modal-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Collapse the empty character column before a run has begun. */
.game-layout:has(> .sidebar.hidden) { grid-template-columns: 1fr; }

/* v0.5 public-test interface additions */
:root {
  --ui-scale: 1;
  --text-scale: 1;
}
body {
  font-size: calc(14px * var(--ui-scale) * var(--text-scale));
}
.app-shell { width: min(calc(1480px * var(--ui-scale)), calc(100% - 24px)); }
.top-actions { grid-template-columns: repeat(2, minmax(145px, 1fr)); min-width: 330px; }
.character-creation-modal { width: min(1050px, 100%); }
.creation-top-grid { grid-template-columns: minmax(280px, 1.5fr) 150px 180px minmax(205px, 1fr); align-items: end; }
.name-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.field-help { color: var(--dim); font-size: .62rem; line-height: 1.35; text-transform: none; }
.checkbox-row { min-height: 38px; display: flex; gap: 8px; align-items: center; border: 2px solid #52647e; background: #02060d; color: var(--text); padding: 8px; text-transform: none; }
.checkbox-row input, .checkbox-setting input { width: auto; accent-color: var(--cyan); }
.difficulty-preview, .recommendation-strip {
  border: 2px solid #52647e;
  background: #071521;
  color: var(--muted);
  padding: 9px 10px;
  margin: 0 0 11px;
  font-size: .72rem;
  line-height: 1.45;
}
.difficulty-preview strong, .recommendation-strip strong { color: var(--gold); }
.difficulty-preview .difficulty-tag { color: var(--cyan); text-transform: uppercase; font-weight: 900; letter-spacing: .07em; }
.creation-workbench { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); gap: 8px; margin-bottom: 12px; align-items: stretch; }
.creation-attributes { margin-bottom: 0; }
.creation-attribute { min-height: 156px; display: grid; grid-template-rows: auto 1fr auto; }
.creation-attribute-description { color: var(--muted); font-size: .69rem; line-height: 1.42; margin: 0 0 8px; }
.creation-attribute-effects { color: var(--cyan); font-size: .62rem; text-transform: uppercase; line-height: 1.45; }
.creation-attribute .stepper { align-self: end; }
.build-preview { border: 4px double var(--gold); background: #111405; padding: 12px; min-height: 100%; }
.build-preview h3 { margin-bottom: 5px; }
.build-archetype { color: var(--white); font-size: 1.05rem; font-weight: 900; text-transform: uppercase; }
.build-description { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.build-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin: 10px 0; }
.build-stat-grid div { display: flex; justify-content: space-between; gap: 8px; border: 1px solid #5f6135; background: #080b04; padding: 5px 7px; font-size: .68rem; }
.build-stat-grid strong { color: var(--gold); }
.build-tendencies { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.build-tendencies h4 { margin-bottom: 5px; font-size: .64rem; }
.build-tendencies ul { margin: 0; padding-left: 17px; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.build-bonus { color: var(--green); font-size: .64rem; margin-top: 8px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; margin-bottom: 12px; }
.checkbox-setting { display: flex !important; flex-direction: row; align-items: center; gap: 8px; min-height: 42px; border: 2px solid #52647e; background: #081220; padding: 8px; color: var(--text) !important; text-transform: none !important; }
.modal textarea { width: 100%; resize: vertical; border: 2px solid #8896ab; background: #02060d; color: var(--white); padding: 9px; box-shadow: inset 2px 2px #000; font: inherit; }
.three-actions { grid-template-columns: repeat(3, 1fr); }
.help-modal { width: min(930px, 100%); }
.help-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 10px; }
.help-nav button.active { border-color: var(--gold); color: var(--gold); background: #2b2506; }
.help-content { min-height: 330px; max-height: 52vh; overflow-y: auto; border: 3px double #52647e; background: #030811; padding: 13px; margin-bottom: 10px; color: var(--muted); line-height: 1.55; }
.help-content h3 { margin-top: 15px; }
.help-content h3:first-child { margin-top: 0; }
.help-content table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.help-content th, .help-content td { border: 1px solid #52647e; padding: 7px; vertical-align: top; text-align: left; }
.help-content th { color: var(--gold); background: #101604; }
.help-content strong { color: var(--white); }
.tutorial-body { color: var(--muted); line-height: 1.55; }
.tutorial-body strong { color: var(--gold); }
.feedback-status { min-height: 25px; color: var(--green); font-size: .68rem; margin-bottom: 8px; }
.save-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
.save-meta-grid span { border: 1px solid #35455d; background: #07101d; padding: 4px 5px; color: var(--muted); font-size: .61rem; text-transform: uppercase; }
.save-meta-grid strong { display: block; color: var(--white); font-size: .68rem; margin-top: 2px; text-transform: none; }
.run-summary { border: 4px double var(--gold); background: #0b0f05; padding: 12px; margin: 12px 0; }
.run-summary h3 { margin-bottom: 8px; }
.run-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.run-summary-grid div { border: 1px solid #5b6535; background: #050804; padding: 7px; }
.run-summary-grid span { display: block; color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.run-summary-grid strong { color: var(--gold); font-size: .9rem; }
.summary-loss { color: var(--red); }
.summary-preserved { color: var(--green); }
body.no-scanlines .screen-fx { display: none; }
body.flicker-enabled .screen-fx { animation: crtFlicker 4.5s steps(1, end) infinite; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
body.high-contrast {
  --text: #ffffff;
  --muted: #d7dfce;
  --dim: #adb7ac;
  --line: #c5d2e7;
  --panel: #020712;
  --panel-2: #071126;
}
body.combat-compact .combat-log p:not(:nth-last-child(-n+7)) { display: none; }
body.hide-shortcuts .keyboard-legend { display: none; }
@keyframes crtFlicker { 0%, 97%, 100% { opacity: .12; } 98% { opacity: .18; } 99% { opacity: .08; } }

@media (max-width: 1120px) {
  .creation-top-grid { grid-template-columns: repeat(2, 1fr); }
  .creation-workbench { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .top-actions { grid-template-columns: repeat(3, 1fr); min-width: 0; }
  .settings-grid, .help-nav, .run-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .save-meta-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .creation-top-grid, .settings-grid, .help-nav, .run-summary-grid, .save-meta-grid, .build-tendencies, .three-actions { grid-template-columns: 1fr; }
  .top-actions { grid-template-columns: repeat(2, 1fr); }
  .name-input-row { grid-template-columns: 1fr; }
}