@font-face {
  font-family: ValdoraSerif;
  src: local('Palatino Linotype'), local('Book Antiqua'), local('Georgia');
  font-display: swap;
}
:root {
  --bg: #101918;
  --panel: #16201e;
  --panel2: #1c2924;
  --gold: #c2a36b;
  --bright: #e2ca96;
  --ink: #e5e0d1;
  --muted: #9b9f90;
  --line: #bda77b2c;
  --red: #aa5d46;
  --green: #9aaa78;
  --serif: ValdoraSerif, Georgia, serif;
  --sans: 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.42;
}
button {
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.18s,
    color 0.18s;
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--bright);
  outline-offset: 4px;
}
button {
  border: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
}
a {
  color: var(--bright);
}
.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  vertical-align: middle;
}
.eyebrow {
  font: 10px var(--sans);
  letter-spacing: 2.1px;
  color: var(--gold);
  font-weight: 600;
}
.subtle {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.primary,
.secondary {
  min-height: 46px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid var(--gold);
  font-size: 12px;
  letter-spacing: 0.6px;
}
.primary {
  background: linear-gradient(135deg, #d4bb85, #b1915b);
  color: #1b211b;
  font-weight: 700;
  box-shadow: 0 4px 20px #0003;
}
.primary:hover:not(:disabled) {
  background: #e6d1a2;
  box-shadow: 0 0 24px #d4bb851f;
}
.secondary {
  background: #192320;
  color: #dfc493;
  border-color: #ba9d5f66;
}
.secondary:hover:not(:disabled) {
  background: #2b372d;
  border-color: var(--gold);
}
.text-button {
  background: none;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 12px;
  padding: 10px 3px;
}
.text-button:hover {
  color: var(--bright);
}
.tool {
  width: 40px;
  height: 40px;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #bdb6a0;
  border: 1px solid transparent;
}
.tool:hover {
  color: var(--bright);
  border-color: var(--line);
  background: #c9b77e0b;
}
.tool .icon {
  width: 20px;
  height: 20px;
}
.loading {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
}
.sigil {
  font-size: 64px;
  color: var(--gold);
}
.title-screen {
  min-height: 760px;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  background: #101917;
}
.title-art,
.title-shade {
  position: absolute;
  inset: 0;
}
.title-art {
  background: url('/assets/valdora.png') 55% 50% / cover;
}
.title-shade {
  background:
    linear-gradient(90deg, #081312ed 0%, #0b1714d4 20%, #0a15114a 57%, transparent 85%),
    linear-gradient(0deg, #071211eb 0%, transparent 25%, transparent 80%, #0813126b);
}
.title-top {
  position: absolute;
  top: 30px;
  left: 4%;
  right: 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #cec5ac;
  font-size: 10px;
  letter-spacing: 2px;
}
.title-content {
  position: relative;
  width: 530px;
  max-width: 94%;
  margin-left: 8%;
  padding-top: 13vh;
  text-align: center;
}
.title-sigil {
  width: 58px;
  height: 58px;
  background: transparent;
  margin-bottom: 23px;
  opacity: 0.85;
  box-shadow: 0 0 80px #d5c59115;
}
.title-content > .eyebrow {
  letter-spacing: 3px;
  font-size: 10px;
  margin-bottom: 18px;
}
.title-content h1 {
  font-size: 76px;
  line-height: 0.94;
  letter-spacing: 8px;
  color: #e5d9b8;
  text-shadow: 0 3px 35px #0009;
}
.title-content h1 small {
  display: block;
  font-size: 16px;
  line-height: 2.7;
  letter-spacing: 6px;
}
.title-rule {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: center;
  letter-spacing: 2.2px;
  color: #c6ab73;
  font-size: 10px;
  margin: 30px 0;
}
.title-rule i {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b69760);
}
.title-rule i:last-child {
  transform: rotate(180deg);
}
.title-description {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.8;
  color: #c8c7b7;
}
.title-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin: 30px auto;
  width: 270px;
}
.title-actions > .primary,
.title-actions > .secondary {
  width: 100%;
  min-height: 50px;
}
.title-actions > .text-button {
  font-size: 11px;
}
.title-footer {
  position: absolute;
  bottom: 24px;
  left: 4%;
  right: 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.title-footer > span {
  font-size: 9px;
  letter-spacing: 2px;
  color: #9eaa9b;
  display: flex;
  align-items: center;
  gap: 13px;
}
.title-footer .text-button {
  font-size: 10px;
  color: #9eaa9b;
}
.title-footer .icon {
  width: 18px;
  height: 18px;
}
.mist {
  position: absolute;
  pointer-events: none;
  opacity: 0.14;
  filter: blur(22px);
  background: radial-gradient(ellipse at center, #b4c8b9 0%, transparent 65%);
  width: 110%;
  height: 32%;
  left: -25%;
  bottom: 20%;
  animation: mistdrift 35s ease-in-out infinite alternate;
}
.mist-two {
  left: 18%;
  bottom: 6%;
  height: 20%;
  animation-delay: -14s;
  opacity: 0.1;
}
@keyframes mistdrift {
  to {
    transform: translate(18%, 20%) scaleX(1.2);
  }
}
.game-shell {
  height: 100dvh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  height: 65px;
  flex-shrink: 0;
  background: #101a17;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  z-index: 10;
  box-shadow: 0 6px 30px #0003;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 2px;
  color: #d6c293;
}
.brand img {
  width: 32px;
  height: 32px;
}
.brand em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 1px;
}
.chapter-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: #8f9584;
}
.topbar nav {
  display: flex;
  gap: 6px;
}
.game-main {
  display: grid;
  grid-template-columns: 186px minmax(360px, 1fr) 354px;
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 1;
  min-height: 0;
}
.hero-panel {
  grid-column: 1;
  grid-row: 1/3;
  position: relative;
  padding: 25px 17px 14px;
  background: linear-gradient(160deg, #1d2821, #111b18 75%);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #495244 transparent;
}
.hero-portrait {
  position: relative;
  padding: 0;
  border: 1px solid #b79b5e78;
  background: none;
  width: 111px;
  height: 137px;
  margin-bottom: 21px;
  box-shadow: 0 4px 25px #0005;
}
.portrait {
  display: block;
  background-image: url('/assets/portraits.png');
  background-size: 200% 200%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.portrait-fighter {
  background-position: 0 0;
}
.portrait-ranger {
  background-position: 100% 0;
}
.portrait-mage {
  background-position: 0 100%;
}
.portrait-mara {
  background-position: 100% 100%;
}
.portrait-ancestry {
  background-image: url('/assets/ancestry-portraits.png');
}
.portrait-dwarf {
  background-position: 0 0;
}
.portrait-half-orc {
  background-position: 100% 0;
}
.portrait-lightfoot {
  background-position: 0 100%;
}
.portrait-stout {
  background-position: 100% 100%;
}
.portrait-dragonborn {
  background-image: url('/assets/dragonborn-portrait.png');
  background-size: cover;
  background-position: center;
}
.level-badge {
  position: absolute;
  bottom: -11px;
  left: calc(50% - 14px);
  display: grid;
  place-content: center;
  width: 28px;
  height: 24px;
  background: #1a241e;
  border: 1px solid #aa8d58;
  color: var(--bright);
  font: 14px var(--serif);
}
.hero-panel h2 {
  font-size: 22px;
  color: #dfd2ac;
  text-align: center;
  overflow-wrap: anywhere;
}
.hero-class {
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}
.health {
  margin: 20px 0 14px;
  width: 100%;
  text-align: center;
}
.health > span {
  font-size: 16px;
  color: #dbbdb0;
  font-family: var(--serif);
}
.health small {
  font: 10px var(--sans);
  color: #a09886;
}
.health .icon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  color: #b67b66;
}
.health-track {
  height: 5px;
  background: #402821;
  margin-top: 9px;
  border: 1px solid #88564333;
}
.health-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8b4937, #c3926b);
  transition: width 0.4s;
}
.hero-stats {
  display: flex;
  justify-content: center;
  width: 100%;
  border-bottom: 1px solid var(--line);
  padding-bottom: 17px;
  gap: 28px;
}
.hero-stats > span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 3px 7px;
}
.hero-stats .icon {
  color: #b7af90;
  width: 17px;
  height: 17px;
}
.hero-stats strong {
  font: 18px var(--serif);
  color: #d4caab;
}
.hero-stats small {
  grid-column: 1/3;
  color: #8d9685;
  font-size: 9px;
  text-align: center;
}
.rail-nav {
  width: 100%;
  margin: 15px 0;
}
.rail-nav button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 4px;
  background: transparent;
  color: #b7bba8;
  font-size: 11px;
  text-align: left;
}
.rail-nav button:hover:not(:disabled) {
  color: var(--bright);
}
.rail-nav .icon {
  width: 17px;
  height: 17px;
  color: #a29572;
}
kbd {
  font: 9px var(--sans);
  color: #89917d;
  opacity: 0.65;
  border: 1px solid #67705940;
  min-width: 15px;
  text-align: center;
  padding: 1px 3px;
}
.rail-nav kbd {
  margin-left: auto;
}
.quest-note {
  width: 100%;
  padding: 18px 1px;
  border-top: 1px solid var(--line);
  margin-top: 7px;
}
.quest-note .eyebrow {
  font-size: 8px;
}
.quest-note h3 {
  font-size: 16px;
  line-height: 1.4;
  color: #c5b78f;
  margin: 10px 0 7px;
}
.quest-note p {
  font: 11px/1.7 var(--sans);
  color: #84907f;
}
.quest-step {
  font-size: 10px;
  color: #a39e82;
  padding-top: 11px;
}
.quest-step.complete {
  color: #b6c091;
}
.quest-step.complete:before {
  content: '✓ ';
  color: #93b78c;
}
.rail-bottom {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 10px;
  color: #818e7c;
  padding-top: 20px;
}
.rail-bottom .gold {
  color: #c1a675;
  font-size: 12px;
}
.world-stage {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #162822;
  min-height: 260px;
}
.landscape {
  position: absolute;
  inset: 0;
  background: url('/assets/valdora.png') 52% 50% / cover;
  transition: filter 1s;
}
.world-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, #0c1818e8, transparent 34%, #091b1817 66%, #091917ce),
    linear-gradient(90deg, #0e1b1944, transparent 40%, #0e1b1933);
}
.world-stage .mist {
  z-index: 1;
}
.stage-heading {
  position: absolute;
  left: 32px;
  top: 27px;
  right: 25px;
  z-index: 3;
  text-shadow: 0 2px 15px #000;
}
.stage-heading .eyebrow {
  font-size: 8px;
  color: #d0bc8d;
}
.stage-heading h2 {
  font-size: 29px;
  color: #e2dfc9;
  margin: 7px 0 6px;
  line-height: 1.2;
}
.stage-heading p {
  color: #c7c8b2;
  font-size: 10px;
  letter-spacing: 0.4px;
}
.map-pins {
  position: absolute;
  inset: 100px 35px 84px 15px;
  z-index: 3;
}
.routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.routes line {
  stroke: #ddc28b;
  stroke-width: 0.25;
  stroke-dasharray: 0.65 0.8;
  opacity: 0.33;
}
.map-pin {
  position: absolute;
  background: transparent;
  transform: translate(-50%, -50%);
  padding: 0;
  opacity: 0.85 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 134px;
  text-shadow:
    0 2px 8px #000,
    0 0 6px #000;
  transition: filter 0.2s;
}
.map-pin:not(.current):not(.available) {
  filter: saturate(0.25);
  opacity: 0.6 !important;
}
.map-pin .pin-icon {
  width: 33px;
  height: 33px;
  background: #142821cb;
  border: 1px solid #b9a06899;
  display: grid;
  place-content: center;
  transform: rotate(45deg);
  box-shadow: 0 0 20px #111b17cc;
  backdrop-filter: blur(4px);
}
.map-pin .pin-icon .icon {
  transform: rotate(-45deg);
  width: 16px;
  height: 16px;
  color: #c4b897;
}
.map-pin.available .pin-icon {
  border-color: #dbc086;
  background: #57442ae0;
}
.map-pin.current .pin-icon {
  border-color: #f4d89c;
  background: #b69a58;
  box-shadow:
    0 0 0 5px #e2bf8220,
    0 0 35px #f4c25b33;
}
.map-pin.current .icon {
  color: #12241d;
}
.map-pin.current:after {
  content: '';
  position: absolute;
  width: 49px;
  height: 49px;
  top: -8px;
  transform: rotate(45deg);
  border: 1px solid #dfc48b77;
}
.pin-label {
  padding-top: 15px;
  font: 12px var(--serif);
  color: #ede1bf;
  text-align: center;
  max-width: 155px;
  line-height: 1.2;
}
.pin-label small {
  display: block;
  font: 7px var(--sans);
  letter-spacing: 1.6px;
  margin-top: 6px;
  color: #e5c483;
}
.map-pin:hover:not(:disabled) {
  filter: brightness(1.25);
  transform: translate(-50%, -50%);
}
.map-pin:hover:not(:disabled) .pin-icon {
  box-shadow: 0 0 25px #e0ba6688;
}
.stage-bottom {
  position: absolute;
  bottom: 22px;
  left: 27px;
  right: 23px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  pointer-events: none;
}
.world-time {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #d3c397;
}
.world-time > .icon {
  width: 29px;
  height: 29px;
  opacity: 0.7;
}
.world-time small {
  display: block;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0;
  color: #99aba0;
  margin-top: 6px;
}
.compass {
  font-size: 42px;
  color: #c4b281aa;
  position: relative;
  line-height: 1;
}
.compass span {
  display: block;
  text-align: center;
  font: 8px var(--sans);
  margin-bottom: 2px;
}
.stage-hint {
  font-size: 9px;
  color: #b5c4ae;
  text-shadow: 0 1px 5px #000;
}
.stage-hint > .icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}
.in-combat .landscape {
  filter: brightness(0.35) saturate(0.65) blur(2px);
}
#battlefield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 2;
  touch-action: none;
}
.in-combat #battlefield {
  display: block;
}
/* The empty pin layer sits above the canvas and would swallow every pointer event. */
.in-combat .map-pins {
  display: none;
}
.in-combat .stage-heading {
  pointer-events: none;
  right: 190px;
}
.in-combat .turn-order {
  top: 25px;
  left: auto;
  right: 20px;
}
@media (max-width: 700px) {
  .in-combat .stage-heading {
    right: 140px;
  }
  .in-combat .turn-order {
    top: 25px;
    right: 12px;
    gap: 4px;
  }
  .in-combat .turn-token {
    width: 30px;
    height: 38px;
  }
}
.turn-order {
  position: absolute;
  top: 115px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
  pointer-events: none;
}
.turn-token {
  width: 42px;
  height: 49px;
  background: #23332dd9;
  border: 1px solid #86886a88;
  color: #c6b594;
  position: relative;
  display: grid;
  place-content: center;
}
.turn-token.active {
  border: 2px solid #d6b16b;
  box-shadow: 0 0 0 3px #cda76020;
}
.turn-token > .portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.turn-token > small {
  position: absolute;
  bottom: -8px;
  left: calc(50% - 10px);
  background: #17271d;
  border: 1px solid #7d7855;
  text-align: center;
  min-width: 0;
  padding: 1px;
  font-size: 9px;
  white-space: nowrap;
  z-index: 1;
}
.surprise-marker {
  display: inline-grid;
  place-items: center;
  min-width: 10px;
  height: 10px;
  margin-left: 1px;
  padding: 0 2px;
  border-radius: 50%;
  background: #c78a55;
  color: #1d2119;
  font-size: 8px;
  font-weight: 800;
  vertical-align: middle;
}
.turn-token.defeated {
  opacity: 0.35;
}
.story-panel {
  grid-column: 3;
  grid-row: 1/3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: radial-gradient(ellipse at top right, #29302466, transparent 75%), #17221c;
  box-shadow: -15px 0 35px #09110c30;
  z-index: 4;
}
.story-scroll {
  padding: 30px 27px 18px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #4d5946 transparent;
  flex: 1;
}
.story-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.story-kicker .eyebrow {
  font-size: 8px;
  letter-spacing: 2px;
}
.little-star {
  color: #9d8960;
  font-size: 16px;
}
.story-panel h2 {
  font-size: 30px;
  line-height: 1.13;
  color: #e2d4b0;
  margin: 20px 0;
}
.gold-line {
  width: 45px;
  height: 1px;
  background: #b4945c;
  margin-bottom: 22px;
}
.narrative {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.83;
  color: #c9cbbb;
  white-space: pre-line;
}
.decision-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 8px;
  letter-spacing: 1.6px;
  color: #b2a680;
  margin-top: 32px;
  margin-bottom: 14px;
}
.lucky-faces {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}
.lucky-faces > span {
  display: grid;
  gap: 6px;
  min-width: 68px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lucky-faces small {
  font-size: 10px;
}
.lucky-faces strong {
  font: 28px var(--serif);
}
.lucky-faces .lucky-eligible {
  color: #e0c890;
  border-color: #b4945c;
  background: #a4853415;
}
.lucky-panel button {
  margin-top: 8px;
  width: 100%;
}
.stealth-status {
  margin: 12px 0;
  padding: 13px;
  border: 1px solid #8fbaa752;
  border-radius: 8px;
  background: #29524533;
  color: #c9dbbc;
}
.stealth-status strong {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stealth-status p {
  margin: 8px 0;
  font-size: 12px;
  line-height: 1.6;
}
.stealth-status small {
  color: #b3bca9;
  font-size: 11px;
  line-height: 1.6;
}
.decision-heading:after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--line);
}
.choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 14px 10px;
  background: #23302488;
  border: 1px solid #8f927533;
  text-align: left;
}
.choice:hover:not(:disabled) {
  background: #3d422c77;
  border-color: #b99c6477;
}
.choice-number {
  font: 15px var(--serif);
  color: #c4ac7b;
  width: 20px;
  align-self: flex-start;
  margin-top: 2px;
}
.choice strong {
  font: 14px var(--serif);
  line-height: 1.35;
  color: #dacead;
  display: block;
}
.choice small {
  display: block;
  font: 10px/1.6 var(--sans);
  color: #93a08d;
  margin-top: 5px;
}
.choice > .icon {
  width: 14px;
  height: 14px;
  color: #b89d6a;
  margin-left: auto;
}
.choice > span:nth-child(2) {
  flex: 1;
}
.story-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  font-size: 9px;
  color: #7f8c77;
  display: flex;
  align-items: center;
  gap: 7px;
}
.save-indicator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #95aa76;
  box-shadow: 0 0 4px #aaba7644;
}
.travel-list {
  margin-top: 22px;
  font-size: 11px;
  color: #a0a790;
}
.travel-list summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: #b6ad8c;
}
.travel-list summary:after {
  content: '+';
  margin-left: auto;
}
.travel-list summary .icon {
  width: 15px;
  height: 15px;
}
.travel-list > button {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: left;
  background: #20302677;
  margin-top: 5px;
  padding: 11px 8px;
  font-size: 11px;
}
.travel-list > button .icon {
  width: 13px;
  height: 13px;
  margin-left: auto;
}
.travel-list > button small {
  flex-basis: 100%;
  font-size: 9px;
  line-height: 1.5;
  color: #8e9b87;
  margin-top: 5px;
}
.turn-message {
  margin-top: 25px;
  font: 14px/1.6 var(--serif);
  color: #c6c59f;
  display: flex;
  gap: 9px;
  align-items: center;
}
.turn-message > .icon {
  width: 18px;
}
.surprised-message {
  color: #e0b77f;
  padding: 12px;
  border: 1px solid #ba875455;
  background: #3a2c2070;
}
.surprise-panel {
  margin: 18px 0 8px;
  padding: 14px;
  border: 1px solid #b58a5b55;
  background: linear-gradient(135deg, #382e2277, #202a2277);
  color: #d2c5aa;
}
.surprise-panel > .eyebrow {
  color: #c29c68;
}
.surprise-panel-complete {
  padding: 10px 14px;
}
.surprise-panel-complete summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 10px;
  cursor: pointer;
  list-style: none;
}
.surprise-panel-complete summary::-webkit-details-marker {
  display: none;
}
.surprise-panel-complete summary::after {
  content: '+';
  margin-left: auto;
  color: #c29c68;
}
.surprise-panel-complete[open] summary::after {
  content: '−';
}
.surprise-panel-complete summary strong {
  font: 14px var(--serif);
  color: #ead9b9;
}
.surprise-panel-complete summary small {
  flex-basis: 100%;
  color: #a9a38d;
  font-size: 10px;
}
.surprise-panel h3 {
  margin: 6px 0 8px;
  font: 18px/1.3 var(--serif);
  color: #ead9b9;
}
.surprise-panel p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
}
.surprise-panel .surprise-hero {
  color: #e7b77d;
}
.surprise-panel ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.surprise-panel li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #b58a5b33;
  font-size: 12px;
}
.surprise-panel li strong {
  color: #e4d1ae;
}
.surprise-panel li span {
  color: #a9a38d;
  text-align: right;
}
.target-choice {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 13px 9px;
  margin-top: 8px;
  background: #293025;
  border: 1px solid #99795e55;
  text-align: left;
}
.target-choice strong {
  font: 14px var(--serif);
  display: block;
}
.target-choice small {
  font-size: 10px;
  color: #a09380;
  display: block;
  margin-top: 5px;
}
.enemy-mark {
  color: #ad7051;
}
.end-turn {
  width: 100%;
  margin-top: 23px;
}
@media (max-width: 480px) {
  .surprise-panel {
    padding: 11px;
  }
  .surprise-panel li {
    display: block;
  }
  .surprise-panel li span {
    display: block;
    margin-top: 3px;
    text-align: left;
  }
}
.cell-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 160px;
  overflow: auto;
}
.cell-options button {
  background: #2b3c2e;
  border: 1px solid #65755c66;
  padding: 8px;
  color: #c1cbb1;
  font-size: 10px;
  min-width: 42px;
}
.action-dock {
  grid-column: 2;
  grid-row: 2;
  padding: 16px 23px 20px;
  background: linear-gradient(0deg, #131e1a, #1a271f);
  border-top: 1px solid var(--line);
  min-height: 119px;
  z-index: 4;
}
.dock-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
  gap: 8px;
}
.dock-heading .eyebrow {
  font-size: 8px;
  letter-spacing: 1.5px;
}
.dock-heading > .subtle {
  font-size: 9px;
}
.budgets {
  font-size: 10px;
  color: #8f9d88;
}
.budgets b {
  font-weight: 400;
  color: #c7b47b;
}
.budgets i {
  font-style: normal;
  padding: 0 5px;
  color: #465442;
}
.dock-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}
.action-tile {
  position: relative;
  width: 63px;
  min-height: 63px;
  padding: 9px 4px 6px;
  background: #253224;
  border: 1px solid #8284624d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #beb591;
}
.action-tile > .icon {
  width: 25px;
  height: 25px;
}
.action-tile span {
  font-size: 8px;
  line-height: 1.15;
  min-height: 10px;
  text-align: center;
}
.action-tile kbd {
  position: absolute;
  right: 2px;
  top: 2px;
  font-size: 7px;
  min-width: 10px;
  padding: 0;
  border: 0;
}
.action-tile.selected {
  background: linear-gradient(150deg, #62603a55, #b9a26c22);
  border-color: #b69c60;
  color: #e8cf8f;
  box-shadow: inset 0 0 12px #c3aa5422;
}
.action-tile:hover:not(:disabled) {
  border-color: #bca576;
  background: #35422d;
}
.action-tile:disabled {
  opacity: 0.3;
}
.camp-action {
  background: transparent;
  font-size: 10px;
  color: #a7aa8e;
  display: flex;
  gap: 9px;
  align-items: center;
  margin-left: auto;
  padding: 8px;
}
.camp-action > .icon {
  width: 19px;
  height: 19px;
}
.chronicle {
  height: 65px;
  min-height: 65px;
  border-top: 1px solid var(--line);
  background: #0f1916;
  display: flex;
  gap: 24px;
  padding: 12px 25px;
  align-items: center;
  z-index: 5;
}
.chronicle-label {
  background: none;
  font-size: 8px;
  letter-spacing: 2px;
  color: #9e9b7b;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.chronicle-label > .icon {
  width: 18px;
  height: 18px;
}
.chronicle > div {
  flex: 1;
  min-width: 0;
}
.chronicle p {
  font-size: 10px;
  line-height: 1.8;
  color: #9eaa99;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chronicle p:first-child {
  opacity: 0.6;
}
.chronicle p.log-damage {
  color: #c19a7e;
}
.chronicle p.log-roll {
  color: #cab486;
}
.local-label {
  color: #586f5d;
  font-size: 8px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.roll-panel {
  border-top: 1px solid var(--line);
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
}
.roll-panel > .eyebrow {
  font-size: 8px;
}
.opportunity-panel {
  margin-top: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.opportunity-panel h3 {
  color: var(--gold);
  font: 23px/1.25 var(--serif);
}
.opportunity-panel p {
  font-size: 12px;
  line-height: 1.7;
}
.opportunity-panel button {
  width: 100%;
  margin-top: 12px;
}
.die-emblem {
  position: relative;
  width: 95px;
  height: 95px;
  margin: 19px auto 13px;
  filter: drop-shadow(0 0 20px #c9a95720);
}
.die-emblem > .icon {
  width: 100%;
  height: 100%;
  stroke-width: 0.5;
  color: #d4b578;
}
.die-emblem > span {
  position: absolute;
  top: 36%;
  left: 0;
  right: 0;
  text-align: center;
  font: 24px var(--serif);
  color: #e4d9b6;
}
.die-emblem.rolling {
  animation: diceroll 0.3s ease-in-out infinite;
}
.roll-panel h3 {
  font-size: 18px;
  color: #d6c7a2;
  line-height: 1.4;
}
.dice-expression {
  font-size: 12px;
  color: var(--gold);
  margin: 10px 0;
}
.roll-panel p {
  font-size: 11px;
  line-height: 1.65;
  color: #95a08b;
  margin-bottom: 15px;
}
.roll-button {
  width: 100%;
  font-size: 11px;
  gap: 10px;
}
.physical-fields {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 15px 0;
}
.physical-fields label {
  font-size: 10px;
  color: #c5b586;
  width: 55px;
}
.physical-fields input {
  width: 100%;
  min-height: 45px;
  text-align: center;
  font: 20px var(--serif);
  background: #0f1d16;
  border: 1px solid #a28b5866;
  color: #e1d2aa;
  margin-top: 6px;
  padding: 5px;
}
.small {
  font-size: 9px;
  margin-top: 8px;
}
.ending .eyebrow {
  font-size: 9px;
}
.ending h2 {
  font-size: 37px;
}
.ending-sigil {
  margin: 24px 0 10px;
  color: var(--gold);
}
.ending-sigil .icon {
  width: 62px;
  height: 62px;
  stroke-width: 0.7;
}
.ending .primary,
.ending .secondary {
  width: 100%;
  margin: 9px 0;
}
.ending-stats {
  margin: 24px 0;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  color: var(--gold);
  font-size: 10px;
}
dialog {
  width: 700px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  background: linear-gradient(140deg, #253126, #152219 60%);
  color: var(--ink);
  border: 1px solid #9b855b88;
  box-shadow: 0 30px 140px #000a;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #526045 transparent;
  scroll-padding-top: 140px;
}
dialog::backdrop {
  background: #050d0be0;
  backdrop-filter: blur(8px);
}
.dialog-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #253126;
  padding: 25px 30px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.dialog-header h2 {
  font-size: 27px;
  margin-top: 10px;
  color: #ddccaa;
}
.dialog-header .eyebrow {
  font-size: 8px;
}
.dialog-body {
  padding: 25px 30px 30px;
}
.dialog-intro {
  font: 16px/1.7 var(--serif);
  color: #bcc4ae;
  margin-bottom: 24px;
}
.dialog-body > p {
  line-height: 1.8;
  margin-bottom: 17px;
  color: #b9c1ae;
}
.dialog-body .primary {
  margin-top: 22px;
}
.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.settings-head > span {
  font-size: 8px;
  letter-spacing: 1px;
  color: #8fa081;
}
.settings-head > .text-button {
  font-size: 10px;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 15px 0;
}
.setting-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.setting-row label .icon {
  width: 18px;
  color: #baa372;
}
.setting-row select {
  max-width: 54%;
  background: #101e15;
  color: #d1ccae;
  border: 1px solid #83926466;
  padding: 10px;
  font-size: 11px;
}
.settings-access {
  display: flex;
  gap: 24px;
  margin-top: 25px;
  flex-wrap: wrap;
}
.settings-access label {
  font-size: 11px;
  color: #adbba3;
  display: flex;
  align-items: center;
  gap: 7px;
}
input[type='checkbox'] {
  accent-color: #c2a86e;
}
.field-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #b7ad86;
  display: block;
  margin-bottom: 10px;
}
.name-input {
  font: 22px var(--serif);
  width: 100%;
  padding: 14px 15px;
  background: #0c191380;
  border: 1px solid #8f986355;
  color: #e7dfc8;
}
.name-input::placeholder {
  font-size: 16px;
  color: #758874;
}
.class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 23px 0 15px;
}
.class-card {
  background: #19271d;
  border: 1px solid #65755466;
  padding: 0;
  text-align: left;
  overflow: hidden;
}
.class-card > .portrait {
  height: 158px;
  width: 100%;
  filter: saturate(0.6);
  background-size: 200% 200%;
}
.class-card > span:last-child {
  display: block;
  padding: 13px 11px;
}
.class-card strong {
  display: block;
  font: 19px var(--serif);
  color: #d7c6a0;
}
.class-card small {
  display: block;
  font-size: 9px;
  line-height: 1.5;
  color: #9aa890;
  margin-top: 7px;
}
.class-card.selected {
  border-color: #d0b477;
  box-shadow: 0 0 0 2px #b2985733;
}
.class-card.selected > .portrait {
  filter: saturate(1);
}
.class-description {
  font-size: 12px;
  line-height: 1.7;
  color: #b4c0a6;
  min-height: 44px;
}
.creation-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 20px;
}
.creation-skills {
  border: 1px solid var(--line);
  padding: 16px;
  margin: 20px 0;
  min-width: 0;
}
.creation-skills legend {
  color: var(--bright);
  padding: 0 8px;
  font: 18px var(--serif);
}
.half-elf-choice-panel {
  border-color: #8f805444;
  background: #b4945c08;
}
.half-elf-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.half-elf-choice-group {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}
.half-elf-choice-group > strong {
  color: #d6c393;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.half-elf-choice-group label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #c9c3a3;
  font-size: 11px;
}
.half-elf-choice-group select {
  width: 100%;
  min-width: 0;
  padding: 9px;
  color: #d2c8ab;
  background: #132419;
  border: 1px solid #60765477;
  border-radius: 4px;
}
.dragon-ancestry-choice {
  margin: 14px 0;
}
.dragon-ancestry-choice label {
  display: grid;
  gap: 7px;
  color: #c9c3a3;
  font-size: 11px;
}
.dragon-ancestry-choice select {
  width: 100%;
  padding: 10px;
  color: #d2c8ab;
  background: #132419;
  border: 1px solid #60765477;
  border-radius: 4px;
}
.breath-panel {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #aa714866;
  border-left: 3px solid #d0834e;
  border-radius: 6px;
  background: #7c482017;
}
.breath-panel h3 {
  margin: 8px 0;
  color: #f0c59b;
  font: 20px var(--serif);
}
.breath-panel > p,
.breath-preview p {
  color: #d2c8ab;
  font-size: 12px;
  line-height: 1.6;
}
.breath-used {
  color: #f0c59b !important;
  font-weight: 700;
}
.breath-compass {
  display: grid;
  grid-template-columns: repeat(3, minmax(38px, 48px));
  justify-content: center;
  gap: 5px;
  margin: 16px auto;
}
.breath-compass button,
.breath-aim-grid button {
  min-height: 38px;
  color: #eed3b0;
  background: #432a1d;
  border: 1px solid #a16d48;
  border-radius: 4px;
  cursor: pointer;
}
.breath-compass button:nth-child(1) {
  grid-column: 2;
}
.breath-compass button:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}
.breath-compass button:nth-child(3) {
  grid-column: 3;
  grid-row: 2;
}
.breath-compass button:nth-child(4) {
  grid-column: 3;
  grid-row: 3;
}
.breath-compass button:nth-child(5) {
  grid-column: 2;
  grid-row: 3;
}
.breath-compass button:nth-child(6) {
  grid-column: 1;
  grid-row: 3;
}
.breath-compass button:nth-child(7) {
  grid-column: 1;
  grid-row: 2;
}
.breath-compass button:nth-child(8) {
  grid-column: 1;
  grid-row: 1;
}
.breath-compass button:hover:not(:disabled),
.breath-aim-grid button:hover:not(:disabled),
.breath-aim-grid button.selected {
  color: #fff4df;
  background: #885532;
  border-color: #e4a36f;
}
.breath-compass button:disabled,
.breath-aim-grid button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.breath-aim-list {
  margin-top: 10px;
  color: #d8c9a8;
  font-size: 12px;
}
.breath-aim-list summary {
  cursor: pointer;
  padding: 8px 0;
}
.breath-aim-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  padding: 5px;
}
.breath-aim-grid button {
  min-width: 0;
  min-height: 32px;
  padding: 2px;
  font-size: 10px;
}
.breath-preview {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #aa714844;
}
.breath-preview > strong {
  color: #f0c59b;
}
.breath-preview .primary,
.breath-preview .text-button {
  margin: 5px 5px 0 0;
}
.fey-influence {
  display: grid;
  gap: 6px;
  margin: 18px 0;
  padding: 13px 15px;
  border: 1px solid #8b789488;
  border-left: 3px solid #b79ac4;
  border-radius: 5px;
  background: #7e608018;
}
.fey-influence > strong {
  color: #e2d4ef;
  font: 17px var(--serif);
}
.fey-influence p,
.fey-influence small {
  margin: 0;
  color: #c9cbbb;
  font-size: 12px;
  line-height: 1.55;
}
.build-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.build-controls label {
  font-size: 11px;
  color: #c9c3a3;
}
.build-controls select,
.ability-choice select {
  display: block;
  width: 100%;
  background: #132419;
  border: 1px solid #60765477;
  padding: 10px;
  margin-top: 7px;
  color: #d2c8ab;
  font-size: 12px;
}
.ability-choice-heading,
.ability-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px 110px;
  align-items: center;
  gap: 16px;
}
.ability-choice-heading {
  color: #96a38a;
  font-size: 8px;
  margin: 18px 0 6px;
}
.ability-choice {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: #d2c8ab;
}
.ability-choice select {
  margin-top: 0;
}
.ability-choice output {
  font: 20px var(--serif);
  color: var(--bright);
}
.point-budget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 15px 0;
  font-size: 11px;
  color: #d2c8ab;
}
.point-budget .text-button {
  font-size: 11px;
}
.ability-costs {
  color: #96a38a;
  font-size: 11px;
  margin-bottom: 18px;
  line-height: 1.8;
}
.build-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.build-preview > div {
  padding: 14px 8px;
  background: #0d1d1666;
  border: 1px solid var(--line);
  text-align: center;
}
.build-preview small {
  font-size: 8px;
  color: #96a38a;
}
.build-preview strong {
  display: block;
  color: var(--bright);
  font: 26px var(--serif);
  margin-top: 8px;
}
.build-preview strong span {
  font-size: 13px;
}
.build-preview p {
  grid-column: 1 / -1;
  color: #b4c0a6;
  font-size: 11px;
  line-height: 1.7;
}
@media (max-width: 480px) {
  .build-controls {
    grid-template-columns: 1fr;
  }
  .ability-choice-heading,
  .ability-choice {
    grid-template-columns: minmax(0, 1fr) 65px 83px;
    gap: 8px;
  }
  .build-preview {
    gap: 5px;
  }
}
.skill-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.skill-choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 12px;
  color: #d2c8ab;
}
.skill-choices small {
  font-size: 9px;
  color: #96a38a;
}
.skill-choices input {
  accent-color: #d0b477;
}
.skill-choices label:has(input:disabled) {
  opacity: 0.5;
}
.proficiency-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
.proficiency-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: #c9c3a3;
  font-size: 12px;
}
.proficiency-row small {
  display: block;
  color: #96a38a;
  font-size: 9px;
  margin-top: 4px;
}
.proficiency-row strong {
  margin-left: auto;
  color: var(--bright);
  font: 21px var(--serif);
}
.proficiency-dot {
  color: #788c71;
}
.proficiency-dot.trained {
  color: #d0b477;
}
@media (max-width: 480px) {
  .skill-choices,
  .proficiency-grid {
    grid-template-columns: 1fr;
  }
}
.seed-label {
  font-size: 8px;
  letter-spacing: 1px;
  color: #9faf92;
}
.seed-label input,
.seed-label select {
  display: block;
  padding: 9px;
  background: #132419;
  border: 1px solid #60765477;
  color: #d2c8ab;
  margin-top: 8px;
  width: 220px;
  max-width: 100%;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.dice-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #c6b685;
  flex-wrap: wrap;
}
.dice-note .icon {
  width: 18px;
}
.dice-note .text-button {
  font-size: 10px;
}
.creation-footnote {
  font-size: 9px;
  color: #799173;
  margin-top: 16px;
  line-height: 1.6;
}
.character-summary {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 28px;
}
.character-summary > .portrait {
  width: 86px;
  height: 104px;
  flex-shrink: 0;
  border: 1px solid var(--gold);
}
.character-summary h3 {
  font-size: 22px;
  margin: 13px 0;
}
.character-summary p {
  font-size: 11px;
  color: #a4b497;
  line-height: 1.6;
}
.character-summary .eyebrow {
  font-size: 9px;
}
.ability-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.ability-grid > div {
  border: 1px solid var(--line);
  text-align: center;
  padding: 14px 3px;
  background: #0d1d1666;
}
.ability-grid small {
  font-size: 10px;
  color: #96a38a;
}
.ability-grid strong {
  display: block;
  font: 25px var(--serif);
  color: var(--bright);
  margin: 12px 0 7px;
}
.ability-grid span {
  font-size: 8px;
  color: #778b70;
}
.sheet-line {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.sheet-line > span {
  color: #8fa283;
}
.sheet-line strong {
  font-weight: 400;
  color: #c9c3a3;
}
.inventory-gold {
  font: 34px var(--serif);
  color: var(--bright);
  margin-bottom: 24px;
}
.inventory-gold small {
  font: 11px var(--sans);
  margin-left: 12px;
  color: #b3ad88;
}
.inventory-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.inventory-row > .icon {
  width: 29px;
  height: 29px;
  color: #b1a177;
}
.inventory-row > div {
  flex: 1;
}
.inventory-row h3 {
  font-size: 19px;
}
.inventory-row h3 span {
  color: #bdaa75;
  margin-left: 8px;
}
.inventory-row p {
  font-size: 11px;
  line-height: 1.6;
  color: #95a58a;
  margin-top: 7px;
}
.inventory-row .secondary {
  min-height: 37px;
  font-size: 10px;
  padding: 8px 14px;
}
.section-title {
  font-size: 20px;
  color: #cbb88d;
  margin: 25px 0 16px;
}
.relic {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font: 16px var(--serif);
  color: #d2c092;
}
.relic .icon {
  width: 18px;
  height: 18px;
}
.shop-actions {
  display: flex;
  gap: 12px;
}
.journal-summary {
  display: flex;
  gap: 20px;
  color: #c2b484;
  font-size: 11px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 23px;
}
.entry {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #95a16b22;
}
.entry > span {
  font-size: 8px;
  color: #799270;
  white-space: nowrap;
  margin-top: 4px;
  letter-spacing: 1px;
}
.entry p {
  font: 14px/1.7 var(--serif);
  color: #b9c6ad;
}
.entry-roll p {
  font: 11px/1.7 var(--sans);
  color: #c5b285;
}
.entry-damage p {
  color: #c28e70;
}
.entry-success p,
.entry-reward p {
  color: #c6cb99;
}
.camp-icon {
  color: var(--gold);
  text-align: center;
  margin: 10px 0 25px;
}
.camp-icon > .icon {
  width: 75px;
  height: 75px;
  stroke-width: 0.7;
}
.help-steps {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.help-steps article {
  display: flex;
  gap: 22px;
}
.help-steps b {
  font: 30px var(--serif);
  color: #9b8657;
}
.help-steps h3 {
  font-size: 21px;
  color: #d1bf96;
  margin-bottom: 8px;
}
.help-steps p {
  font-size: 12px;
  line-height: 1.8;
  color: #9faf94;
}
.help-steps + .subtle {
  margin-top: 25px;
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  padding: 15px 23px;
  max-width: calc(100vw - 36px);
  width: max-content;
  background: #233426f5;
  border: 1px solid #b69b6377;
  box-shadow: 0 8px 40px #0008;
  color: #dfd5b5;
  font-size: 12px;
  line-height: 1.7;
  z-index: 1000;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
#toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.busy .choices,
.busy .dock-actions,
.busy .map-pins {
  pointer-events: none;
}
.large-text {
  font-size: 16px;
}
.large-text .narrative {
  font-size: 18px;
}
.large-text .choice small {
  font-size: 12px;
}
.large-text .choice strong {
  font-size: 16px;
}
.reduce-motion * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@keyframes diceroll {
  0% {
    transform: rotate(-10deg) scale(0.95);
  }
  50% {
    transform: rotate(12deg) scale(1.05);
  }
  100% {
    transform: rotate(-10deg) scale(0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
@media (min-width: 1700px) {
  .game-main {
    grid-template-columns: 210px minmax(500px, 1fr) 400px;
  }
  .hero-panel {
    padding: 30px 24px;
  }
  .story-scroll {
    padding: 35px;
  }
  .narrative {
    font-size: 18px;
  }
  .story-panel h2 {
    font-size: 35px;
  }
  .choice strong {
    font-size: 16px;
  }
  .choice small {
    font-size: 11px;
  }
  .hero-portrait {
    width: 135px;
    height: 165px;
  }
  .action-tile {
    width: 74px;
    min-height: 73px;
  }
  .action-tile span {
    font-size: 9px;
  }
}
@media (max-height: 760px) and (min-width: 951px) {
  .game-shell {
    min-height: 560px;
  }
  .topbar {
    height: 54px;
  }
  .hero-panel {
    padding-top: 16px;
  }
  .hero-portrait {
    width: 85px;
    height: 103px;
    margin-bottom: 17px;
  }
  .hero-panel h2 {
    font-size: 19px;
  }
  .health {
    margin: 12px 0;
  }
  .hero-stats {
    padding-bottom: 11px;
  }
  .rail-nav {
    margin: 8px 0;
  }
  .rail-nav button {
    padding: 9px 4px;
  }
  .quest-note {
    padding: 12px 0;
  }
  .quest-note p {
    display: none;
  }
  .quest-note h3 {
    font-size: 14px;
  }
  .quest-step {
    padding-top: 7px;
  }
  .rail-bottom {
    padding-top: 12px;
  }
  .story-scroll {
    padding: 20px 23px;
  }
  .story-panel h2 {
    font-size: 26px;
    margin: 15px 0;
  }
  .narrative {
    font-size: 15px;
    line-height: 1.65;
  }
  .decision-heading {
    margin-top: 23px;
  }
  .choice {
    padding: 10px 8px;
  }
  .chronicle {
    height: 54px;
    min-height: 54px;
  }
  .action-dock {
    padding: 12px 18px;
    min-height: 99px;
  }
  .action-tile {
    width: 55px;
    min-height: 55px;
  }
  .action-tile > .icon {
    width: 21px;
    height: 21px;
  }
  .dock-heading {
    margin-bottom: 9px;
  }
  .stage-heading {
    top: 21px;
    left: 23px;
  }
  .stage-heading h2 {
    font-size: 25px;
  }
  .turn-order {
    top: 91px;
  }
  .map-pins {
    inset: 75px 30px 63px 15px;
  }
  .pin-label {
    font-size: 10px;
    padding-top: 12px;
  }
  .map-pin .pin-icon {
    width: 27px;
    height: 27px;
  }
  .map-pin.current:after {
    width: 39px;
    height: 39px;
    top: -6px;
  }
  .stage-bottom {
    bottom: 14px;
  }
  .title-screen {
    min-height: 620px;
  }
  .title-content {
    padding-top: 65px;
  }
  .title-sigil {
    width: 42px;
    height: 42px;
    margin-bottom: 15px;
  }
  .title-content h1 {
    font-size: 60px;
  }
  .title-rule {
    margin: 20px 0;
  }
  .title-description {
    font-size: 17px;
  }
  .title-actions {
    margin: 19px auto;
  }
  .title-top {
    top: 17px;
  }
  .title-footer {
    bottom: 17px;
  }
}
@media (max-width: 1200px) and (min-width: 951px) {
  .game-main {
    grid-template-columns: 156px minmax(300px, 1fr) 315px;
  }
  .hero-panel {
    padding-left: 12px;
    padding-right: 12px;
  }
  .story-scroll {
    padding-left: 21px;
    padding-right: 21px;
  }
  .topbar {
    padding: 0 17px;
  }
  .brand {
    font-size: 14px;
    letter-spacing: 1.3px;
  }
  .chapter-label {
    font-size: 8px;
    letter-spacing: 2px;
  }
  .stage-heading h2 {
    font-size: 25px;
  }
  .map-pins {
    inset-left: 5px;
  }
  .map-pin {
    width: 100px;
  }
  .pin-label {
    font-size: 10px;
  }
  .action-dock {
    padding-left: 14px;
    padding-right: 14px;
  }
  .action-tile {
    width: 53px;
  }
  .dock-heading > .subtle {
    display: none;
  }
  .camp-action {
    font-size: 9px;
    padding: 4px;
  }
  .chronicle {
    padding: 10px 16px;
    gap: 15px;
  }
  .quest-note h3 {
    font-size: 14px;
  }
  .local-label {
    display: none;
  }
}
@media (max-width: 950px) {
  .game-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .topbar {
    height: 58px;
    padding: 0 15px;
    position: sticky;
    top: 0;
  }
  .brand {
    font-size: 14px;
    letter-spacing: 1.4px;
  }
  .chapter-label {
    display: none;
  }
  .topbar nav {
    gap: 1px;
  }
  .tool {
    width: 34px;
    height: 36px;
  }
  .game-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-rows: auto minmax(340px, 52vh) auto auto;
    min-height: 0;
  }
  .hero-panel {
    grid-column: 1/3;
    grid-row: 1;
    flex-direction: row;
    gap: 13px;
    padding: 12px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
    min-height: 80px;
  }
  .hero-portrait {
    width: 42px;
    height: 53px;
    margin: 0 6px 0 0;
    flex-shrink: 0;
  }
  .level-badge {
    width: 21px;
    height: 17px;
    font-size: 11px;
    left: calc(50% - 10px);
    bottom: -4px;
  }
  .hero-panel h2 {
    font-size: 19px;
  }
  .hero-class {
    display: none;
  }
  .health {
    width: 100px;
    margin: 0 7px 0 auto;
  }
  .health > span {
    font-size: 14px;
  }
  .hero-stats {
    display: none;
  }
  .rail-nav {
    display: flex;
    width: auto;
    margin: 0;
  }
  .rail-nav button {
    padding: 6px;
    width: 32px;
    height: 32px;
    font-size: 0;
    gap: 0;
  }
  .rail-nav .icon {
    width: 20px;
    height: 20px;
  }
  .rail-nav kbd {
    display: none;
  }
  .quest-note,
  .rail-bottom {
    display: none;
  }
  .world-stage {
    grid-column: 1;
    grid-row: 2;
  }
  .story-panel {
    grid-column: 2;
    grid-row: 2/4;
  }
  .story-scroll {
    padding: 22px;
  }
  .story-panel h2 {
    font-size: 26px;
  }
  .narrative {
    font-size: 15px;
  }
  .stage-heading {
    left: 22px;
    top: 23px;
  }
  .stage-heading h2 {
    font-size: 25px;
  }
  .action-dock {
    grid-column: 1;
    grid-row: 3;
  }
  .dock-heading > .subtle {
    display: none;
  }
  .dock-actions {
    gap: 5px;
  }
  .action-tile {
    width: 54px;
  }
  .camp-action {
    font-size: 9px;
    margin-left: 0;
  }
  .chronicle {
    position: relative;
    height: 70px;
    padding: 12px 20px;
  }
  .local-label {
    display: none;
  }
  .map-pins {
    inset: 80px 22px 65px 4px;
  }
  .map-pin {
    width: 100px;
  }
  .pin-label {
    font-size: 10px;
  }
  .map-pin .pin-icon {
    width: 26px;
    height: 26px;
  }
  .map-pin.current:after {
    width: 38px;
    height: 38px;
    top: -6px;
  }
  .stage-hint {
    font-size: 8px;
  }
  .stage-bottom {
    left: 20px;
    right: 15px;
    bottom: 16px;
  }
  .title-content {
    margin-left: 4%;
    width: 460px;
  }
  .title-content h1 {
    font-size: 64px;
  }
  .title-art {
    background-position: 60% 50%;
  }
}
@media (max-width: 680px) {
  .half-elf-choices {
    grid-template-columns: minmax(0, 1fr);
  }
  .half-elf-choice-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .half-elf-choice-group > strong {
    grid-column: 1 / -1;
  }
  .breath-aim-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .title-screen {
    min-height: 730px;
  }
  .title-top {
    top: 20px;
    left: 22px;
    right: 22px;
    letter-spacing: 1px;
    font-size: 7px;
  }
  .title-top .text-button {
    font-size: 10px;
  }
  .title-content {
    margin: 0 auto;
    padding-top: 15vh;
    max-width: 90%;
    width: 370px;
  }
  .title-sigil {
    width: 45px;
    height: 45px;
  }
  .title-content h1 {
    font-size: 55px;
    letter-spacing: 6px;
  }
  .title-content > .eyebrow {
    font-size: 8px;
    letter-spacing: 2px;
  }
  .title-rule {
    font-size: 8px;
    gap: 10px;
    letter-spacing: 1.2px;
  }
  .title-description {
    font-size: 18px;
  }
  .title-shade {
    background:
      linear-gradient(90deg, #091915c9, #0b17128a),
      linear-gradient(0deg, #0a1713, transparent 60%, #0a171377);
  }
  .title-art {
    background-position: 63% 50%;
  }
  .title-footer {
    flex-direction: column;
    gap: 4px;
    bottom: 13px;
  }
  .title-footer > span {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .title-actions {
    margin-top: 24px;
  }
  .brand {
    font-size: 11px;
    letter-spacing: 1px;
    gap: 7px;
  }
  .brand img {
    width: 25px;
    height: 25px;
  }
  .topbar nav .tool {
    width: 29px;
    height: 31px;
  }
  .topbar {
    padding: 0 11px;
    height: 53px;
  }
  .hero-panel {
    padding: 12px 13px;
    gap: 8px;
  }
  .hero-panel h2 {
    font-size: 16px;
    max-width: 98px;
    text-align: left;
  }
  .hero-portrait {
    width: 36px;
    height: 44px;
    margin-right: 2px;
  }
  .health {
    width: 85px;
    margin: 0 0 0 auto;
  }
  .health .icon {
    display: none;
  }
  .health > span {
    font-size: 13px;
  }
  .health small {
    font-size: 8px;
  }
  .rail-nav {
    gap: 0;
  }
  .rail-nav button {
    width: 27px;
    padding: 5px;
  }
  .rail-nav .icon {
    width: 17px;
  }
  .rail-nav button:last-child {
    display: none;
  }
  .game-main {
    display: flex;
    flex-direction: column;
  }
  .world-stage {
    height: 380px;
    min-height: 380px;
  }
  .stage-heading {
    top: 23px;
    left: 22px;
  }
  .stage-heading h2 {
    font-size: 26px;
  }
  .stage-heading p {
    font-size: 9px;
  }
  .story-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
    order: 4;
    max-height: none;
  }
  .story-scroll {
    overflow: visible;
    padding: 26px;
  }
  .story-panel h2 {
    font-size: 32px;
  }
  .narrative {
    font-size: 16px;
  }
  .action-dock {
    order: 3;
    padding: 16px;
    min-height: 106px;
  }
  .dock-heading > .eyebrow {
    font-size: 7px;
  }
  .budgets {
    font-size: 9px;
  }
  .dock-actions {
    gap: 6px;
  }
  .action-tile {
    width: calc((100% - 36px) / 7);
    min-width: 42px;
    min-height: 58px;
  }
  .action-tile > span {
    font-size: 7px;
  }
  .action-tile > .icon {
    width: 22px;
    height: 22px;
  }
  .action-tile kbd {
    display: none;
  }
  .action-dock .camp-action {
    margin-left: auto;
    font-size: 9px;
    max-width: 155px;
  }
  .chronicle {
    order: 10;
    height: 81px;
    padding: 13px 17px;
    gap: 12px;
  }
  .chronicle-label {
    font-size: 7px;
    letter-spacing: 1px;
    flex-direction: column;
    gap: 3px;
  }
  .chronicle p {
    font-size: 9px;
  }
  .map-pins {
    inset: 78px 30px 56px 5px;
  }
  .pin-label {
    font-size: 10px;
  }
  .map-pin {
    width: 110px;
  }
  .stage-bottom {
    bottom: 18px;
  }
  .stage-hint {
    max-width: 44%;
    font-size: 8px;
    line-height: 1.5;
  }
  .turn-order {
    top: 100px;
  }
  .dialog-header {
    padding: 20px;
    gap: 8px;
  }
  .dialog-header h2 {
    font-size: 24px;
  }
  .dialog-body {
    padding: 22px 20px;
  }
  .dialog-intro {
    font-size: 15px;
  }
  .setting-row {
    gap: 8px;
  }
  .setting-row label {
    font-size: 10px;
  }
  .setting-row label .icon {
    display: none;
  }
  .setting-row select {
    font-size: 9px;
    max-width: 53%;
    padding: 9px 4px;
  }
  .settings-head > span {
    font-size: 7px;
  }
  .settings-head > .text-button {
    font-size: 9px;
  }
  .settings-head {
    gap: 5px;
  }
  .settings-access {
    gap: 14px;
  }
  .settings-access label {
    font-size: 10px;
  }
  .class-grid {
    gap: 6px;
  }
  .class-card > .portrait {
    height: 98px;
  }
  .class-card > span:last-child {
    padding: 11px 6px;
  }
  .class-card strong {
    font-size: 15px;
  }
  .class-card small {
    font-size: 8px;
  }
  .creation-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .creation-bottom .seed-label {
    width: 100%;
  }
  .seed-label input {
    width: 100%;
  }
  .ability-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .character-summary {
    gap: 14px;
  }
  .character-summary h3 {
    font-size: 19px;
  }
  .character-summary > .portrait {
    width: 65px;
    height: 87px;
  }
  .inventory-row {
    gap: 12px;
  }
  .inventory-row h3 {
    font-size: 17px;
  }
  .inventory-row > .icon {
    width: 22px;
  }
  .inventory-row p {
    font-size: 10px;
  }
  .journal-summary {
    gap: 12px;
    font-size: 9px;
  }
  .entry {
    gap: 12px;
  }
  .entry p {
    font-size: 13px;
  }
  .shop-actions {
    flex-wrap: wrap;
  }
  .title-actions > .primary {
    min-height: 48px;
  }
}
.save-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding-top: 18px;
}
.library-notice {
  margin-bottom: 24px;
}
dialog[data-kind='library'] {
  width: min(880px, 94vw);
}
.library-search label {
  display: block;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 12px;
}
.library-search > div {
  display: flex;
  gap: 10px;
}
.library-search input {
  min-width: 0;
  flex: 1;
  background: #0b1813;
  border: 1px solid #a38d5855;
  padding: 12px;
  color: var(--ink);
}
.library-search select {
  width: 100%;
  background: #102219;
  padding: 10px;
  margin: 12px 0 24px;
  border: 1px solid var(--line);
  color: var(--ink);
}
.book-shelf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.book-shelf article {
  padding: 20px;
  border: 1px solid var(--line);
  background: #102219;
}
.book-shelf h3 {
  font-size: 22px;
  margin: 12px 0;
}
.book-shelf a {
  display: block;
  font-size: 11px;
  margin-top: 12px;
}
.book-shelf .text-button {
  padding: 7px 0;
}
.reference-hit {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.reference-hit:hover {
  background: #bfab6110;
}
.reference-hit > span {
  font-size: 10px;
  color: var(--gold);
}
.reference-hit > p {
  font: 15px/1.7 var(--serif);
  color: var(--ink);
  margin-top: 10px;
}
.library-pagination,
.reader-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin: 24px 0;
}
.reader-toolbar a {
  font-size: 11px;
}
.library-page h3 {
  font-size: 25px;
  margin-bottom: 8px;
}
.reference-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 16px/1.7 var(--serif);
  color: #d2d5bc;
  padding: 24px;
  background: #0e1e17;
  border: 1px solid var(--line);
  margin-top: 18px;
}
.library-page[hidden],
.library-results[hidden] {
  display: none;
}
@media (max-width: 600px) {
  .book-shelf {
    grid-template-columns: 1fr;
  }
  .library-search > div {
    flex-wrap: wrap;
  }
  .library-search input {
    min-width: 160px;
  }
  .reference-text {
    font-size: 14px;
    padding: 15px;
  }
  .reader-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}
.condition-note {
  font-size: 11px;
  line-height: 1.6;
  color: #deb07f;
  margin: 10px 0;
}
.spell-preview {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--gold);
  background: #bf974912;
}
.spell-preview strong {
  font: 18px var(--serif);
  color: var(--bright);
}
.spell-preview p {
  font-size: 12px;
  line-height: 1.7;
  margin-top: 9px;
}
.spell-preview .spell-warning {
  color: #e7a78a;
}
.spell-preview .primary {
  padding: 10px;
  min-height: 40px;
  width: 100%;
  margin-top: 13px;
}
.preview-target {
  border-color: var(--bright);
}
.reaction-hint {
  border: 1px solid var(--gold);
  background: #c2a36b15;
  padding: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--bright);
  margin: 15px 0;
}
.hero-portrait {
  flex-shrink: 0;
}
.dice-overrides {
  margin-top: 24px;
  border-top: 1px solid #83926444;
  padding-top: 18px;
}
.dice-overrides summary {
  color: var(--bright);
  cursor: pointer;
  font-size: 13px;
}
.dice-overrides summary span {
  color: var(--muted);
  margin-left: 10px;
  font-size: 11px;
}
.dice-overrides .setting-row {
  gap: 12px;
}
.dice-overrides .setting-row label {
  font-size: 12px;
}
.spell-slot-summary {
  display: flex;
  gap: 14px;
  margin: 22px 0;
}
.spell-slot-summary > div {
  flex: 1;
  border: 1px solid #ba99554a;
  background: #c2a36b0b;
  padding: 15px 20px;
}
.spell-slot-summary small,
.concentration-banner small {
  display: block;
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 1.5px;
}
.spell-slot-summary strong {
  display: block;
  font: 30px var(--serif);
  color: var(--bright);
  margin-top: 5px;
}
.spell-slot-summary strong span {
  font-size: 18px;
  color: #839b93;
}
.spell-slot-summary p {
  font-size: 11px;
  color: #93a49c;
  margin-top: 4px;
}
.spellbook-heading {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 10px;
}
.spellbook-heading h3 {
  font: 24px var(--serif);
}
#prepared-count {
  font-size: 12px;
  color: var(--gold);
}
.spellbook-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
}
.spellbook-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  background: #162b242e;
  border: 1px solid #7a968438;
  cursor: pointer;
}
.spellbook-card:has(input:checked) {
  background: #b09a5920;
  border-color: #bca76480;
}
.spellbook-card:has(input:focus-visible) {
  outline: 2px solid var(--gold);
}
.spellbook-card small {
  display: block;
  font-size: 9px;
  letter-spacing: 1px;
  color: #9cb2a9;
}
.spellbook-card strong {
  display: block;
  font: 18px var(--serif);
  color: var(--bright);
  margin: 5px 0 7px;
}
.spellbook-description {
  display: block;
  font-size: 11px;
  line-height: 1.6;
  color: #b9c4bd;
}
.spellbook-check {
  margin-top: 5px;
  color: var(--gold);
}
.concentration-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #7cc2b75e;
  background: #49b8b61a;
}
.concentration-banner strong {
  display: block;
  font: 20px var(--serif);
  margin: 7px 0;
}
.concentration-banner span {
  display: block;
  font-size: 11px;
  color: #a1c7bd;
}
.concentration-banner button {
  font-size: 11px;
  padding: 10px;
}
.dock-heading {
  flex-wrap: wrap;
  gap: 8px;
}
.spell-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.spell-controls label,
.spell-controls button {
  font-size: 10px;
}
.spell-controls select {
  padding: 4px 6px;
  color: var(--bright);
  border: 1px solid #83926466;
  background: #101e18;
  font-size: 10px;
}
.concentration-chip {
  color: #a9d4ca;
  font-size: 10px;
  max-width: 220px;
}
.creation-background label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: var(--bright);
}
.creation-background select {
  min-width: 0;
  width: 100%;
  padding: 11px;
  color: var(--bright);
  background: #132219;
  border: 1px solid #a4a87d50;
}
.background-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
}
.background-grants,
.background-coverage {
  color: #bac5b2;
  font-size: 12px;
  line-height: 1.7;
  margin: 16px 0;
}
.background-replacements {
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin: 24px 0;
}
.background-replacements label + label {
  margin-top: 16px;
}
.creation-background .sheet-line {
  align-items: start;
  gap: 18px;
  font-size: 12px;
}
.creation-background .sheet-line strong {
  max-width: 66%;
  text-align: right;
}
.background-coverage summary {
  cursor: pointer;
}
.sheet-background {
  margin-top: 28px;
}
.equipment-section {
  margin-top: 32px;
  border-top: 1px solid #c4c5a52b;
  padding-top: 16px;
}
.equipment-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 24px;
}
.equipment-summary > div {
  padding: 16px 10px;
  border: 1px solid #a4a87d36;
  text-align: center;
}
.equipment-summary small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 8px;
}
.equipment-summary strong {
  font: 26px var(--serif);
  color: var(--gold);
}
.equipment-summary strong span {
  font-size: 13px;
}
.equipment-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.equipment-slot {
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  border: 1px solid #a4a87d36;
  background: #0b1a1270;
  gap: 10px;
}
.equipment-slot h4 {
  margin: 0;
  font: 17px var(--serif);
  color: var(--gold);
}
.equipment-slot > strong {
  font-size: 12px;
  font-weight: 400;
  min-height: 32px;
}
.equipment-slot button {
  padding: 9px 6px;
  margin-top: auto;
  font-size: 11px;
}
.equipment-section select {
  min-width: 0;
  width: 100%;
  color: var(--bright);
  background: #132219;
  border: 1px solid #a4a87d50;
  padding: 9px 8px;
  font-size: 12px;
}
.equipment-section label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.gear-grip {
  margin: 20px 0;
}
.equipment-attack {
  display: grid;
  gap: 7px;
  border-left: 2px solid var(--gold);
  padding: 12px 16px;
  margin: 16px 0;
  background: #c5aa6d0b;
  font-size: 12px;
}
.equipment-attack strong {
  font: 20px var(--serif);
  color: var(--gold);
}
.equipment-warning {
  color: #f3c7a4;
  border-color: #d68a65;
  line-height: 1.7;
  font-size: 12px;
}
.inventory-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}
.inventory-tabs button {
  padding: 12px 10px;
  color: var(--muted);
  font: 12px var(--sans);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
}
.inventory-tabs button[aria-selected='true'] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.inventory-tabs + section .equipment-section {
  border-top: 0;
  margin-top: 0;
}
#inventory-supplies {
  padding-top: 20px;
}
.gear-backpack {
  margin: 24px 0;
  font-size: 12px;
}
.gear-recovery {
  border-left: 2px solid var(--gold);
  padding: 4px 16px 16px;
  margin: 20px 0;
  font-size: 12px;
  line-height: 1.7;
}
.rest-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.rest-summary small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.rest-summary strong {
  display: block;
  font: 32px var(--serif);
  color: var(--gold);
  margin-top: 8px;
}
.rest-summary strong span {
  font-size: 18px;
}
.rest-choice,
.rest-active {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.rest-panel h3 {
  font: 24px var(--serif);
  color: var(--gold);
}
.rest-panel h3 span {
  font: 12px var(--sans);
  float: right;
  margin-top: 5px;
  color: var(--muted);
}
.rest-panel p {
  font-size: 13px;
  line-height: 1.7;
}
.rest-panel button {
  margin: 7px 7px 0 0;
}
.gear-backpack summary {
  cursor: pointer;
  color: var(--gold);
  padding: 10px 0;
}
.gear-items > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #a4a87d24;
}
.gear-items small {
  color: var(--muted);
  text-align: right;
}
.gear-shop-controls {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px;
}
.gear-purchase {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #a4a87d36;
  margin-top: 15px;
  padding: 16px;
}
.gear-purchase span {
  font: 18px var(--serif);
}
.gear-purchase small {
  display: block;
  font: 11px var(--sans);
  margin-top: 8px;
  color: var(--muted);
}
.ancestry-description {
  color: var(--gold);
  font-size: 12px;
  line-height: 1.8;
}
.vision-legend {
  position: absolute;
  bottom: 48px;
  left: 16px;
  max-width: calc(100% - 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  pointer-events: none;
  background: #0b151aee;
  color: #d1c9b2;
  padding: 9px 12px;
  border-left: 2px solid var(--gold);
  font-size: 10px;
  line-height: 1.5;
}
.vision-legend small {
  flex-basis: 100%;
  color: #a4b1b7;
  font-size: 9px;
}
.ability-rolls {
  margin: 16px 0 22px;
  padding: 18px;
  border: 1px solid #a4a87d36;
  background: #070e1080;
}
.ability-rolls .build-controls {
  align-items: end;
}
.physical-ability-rolls,
.ability-roll-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}
.physical-ability-rolls fieldset {
  min-width: 0;
  margin: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  border: 1px solid #a4a87d36;
}
.physical-ability-rolls legend {
  font-size: 11px;
}
.physical-ability-rolls input {
  width: 100%;
  min-width: 0;
  padding: 10px 2px;
  text-align: center;
  color: var(--ink);
  background: #101d20;
  border: 1px solid #a4a87d55;
  font: 16px var(--sans);
}
.ability-roll-results li > span {
  font-size: 10px;
  color: var(--muted);
}
.ability-roll-results li > div {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 6px;
}
.ability-roll-results strong {
  color: var(--gold);
  padding-left: 3px;
  white-space: nowrap;
}
.ability-die {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 30px;
  border: 1px solid #b99d6580;
  color: #f0dfb5;
  background: #27312d;
  font: 17px var(--serif);
  border-radius: 4px;
}
.ability-die.discarded {
  opacity: 0.45;
  text-decoration: line-through;
  border-style: dashed;
}
@media (max-width: 480px) {
  .physical-ability-rolls,
  .ability-roll-results {
    grid-template-columns: 1fr;
  }
  .ability-rolls {
    padding: 12px;
  }
}
.equipment-section .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 680px) {
  .equipment-slots,
  .gear-shop-controls {
    grid-template-columns: 1fr;
  }
  .equipment-slot > strong {
    min-height: auto;
  }
  .equipment-summary {
    gap: 5px;
  }
  .equipment-summary strong {
    font-size: 22px;
  }
  .gear-purchase {
    flex-wrap: wrap;
  }
}
@media (max-width: 680px) {
  .spellbook-grid {
    grid-template-columns: 1fr;
  }
  .spellbook-heading h3 {
    font-size: 21px;
  }
  .concentration-banner {
    flex-wrap: wrap;
  }
  .spell-controls {
    gap: 8px;
  }
}

/* Jornadas salvas (slots) */
.save-slots {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(1200px 500px at 50% -10%, #1d2c26 0%, var(--bg) 55%);
}
.slots-panel {
  width: min(920px, 92%);
  margin: 42px auto 64px;
  flex: 1;
}
.slots-heading .eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 12px;
}
.slots-heading h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 10px;
}
.slots-heading p {
  font-size: 13px;
  line-height: 1.7;
  color: #a8b0a4;
  max-width: 620px;
  margin: 0;
}
.slots-actions {
  display: flex;
  gap: 12px;
  margin: 26px 0 30px;
}
.slots-actions .primary,
.slots-actions .secondary {
  min-height: 46px;
  padding: 0 22px;
}
.slots-warnings {
  border: 1px solid #7a4b3a;
  background: #2a1c16;
  color: #e0b6a2;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  margin: 0 0 18px;
  display: grid;
  gap: 6px;
}
.slots-warnings p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.slot-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.slot-card.slot-active {
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px #c2a36b55,
    0 10px 30px #0006;
}
.slot-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.slot-card-head h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}
.slot-badge {
  flex-shrink: 0;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #101918;
  background: var(--gold);
  border-radius: 20px;
  padding: 4px 9px;
  font-weight: 700;
}
.slot-character {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.slot-character small {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #9eaa9b;
}
.slot-meta {
  font-size: 12px;
  color: #b8c0b0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.5;
}
.slot-meta small {
  color: #7f8a7c;
}
.slot-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.slot-card-actions[hidden],
.slot-rename-form[hidden],
.slot-delete-confirm[hidden] {
  display: none;
}
.slot-card-actions .primary,
.slot-card-actions .secondary {
  min-height: 36px;
  padding: 0 14px;
  font-size: 11px;
}
.slot-current-hint {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.slot-danger {
  color: #c98f7c;
}
.slot-rename-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.slot-rename-form label {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #9eaa9b;
  display: grid;
  gap: 6px;
}
.slot-rename-form input {
  background: #0e1412;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  letter-spacing: normal;
}
.slot-rename-form input:focus {
  border-color: var(--gold);
  outline: none;
}
.slot-rename-form .primary {
  min-height: 38px;
}
.slot-delete-confirm {
  border-top: 1px solid #7a4b3a;
  padding-top: 12px;
  display: grid;
  gap: 10px;
}
.slot-delete-confirm p {
  font-size: 12px;
  line-height: 1.6;
  color: #d8b7a8;
  margin: 0;
}
.slot-delete-button {
  background: #7a3d2c;
  border-color: #9a5c46;
}
.slot-delete-button:hover {
  background: #8f4a35;
}
.slots-empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 54px 24px;
  text-align: center;
  color: #9eaa9b;
  display: grid;
  gap: 8px;
  justify-items: center;
}
.slots-empty .sigil {
  font-size: 34px;
  color: var(--gold);
}
.slots-empty h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.slots-empty p {
  font-size: 12px;
  margin: 0;
}
.slots-footer {
  margin-top: 34px;
  display: flex;
  justify-content: center;
}
.title-active-slot {
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  color: #9eaa9b;
  margin: -14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.title-active-slot strong {
  color: var(--gold);
  font-weight: 600;
}
@media (max-width: 680px) {
  .slots-panel {
    margin-top: 26px;
  }
  .slots-heading h2 {
    font-size: 27px;
  }
  .slots-actions {
    flex-direction: column;
  }
  .slot-grid {
    grid-template-columns: 1fr;
  }
}

#auth-screen {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, #081312f2, #101918f0),
    url('/assets/valdora.png') center / cover;
}
#auth-screen[hidden] {
  display: none;
}
.auth-card {
  width: min(420px, 100%);
  padding: 36px 32px 28px;
  background: #121c1ae8;
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px #000a;
  text-align: center;
}
.auth-sigil {
  color: var(--gold);
  font-size: 36px;
  line-height: 1;
}
.auth-card h1 {
  margin: 8px 0 12px;
  font-size: 34px;
  color: var(--bright);
}
.auth-help,
.auth-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.auth-note {
  margin-top: 16px;
  font-size: 12px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
  text-align: left;
}
.auth-field span {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--gold);
}
.auth-field input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--ink);
  background: #0c191380;
  border: 1px solid #8f986355;
}
#auth-submit {
  width: 100%;
  margin-top: 8px;
}
.auth-message {
  color: #e0b2a4;
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 8px;
}
#auth-status {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 30;
}
#auth-status[hidden] {
  display: none;
}
.auth-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100vw - 28px));
  padding: 6px 8px 6px 12px;
  background: #16201eeb;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
}
.auth-chip-mark {
  color: var(--gold);
}
.auth-chip-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-chip-button {
  background: none;
  color: var(--gold);
  border: 1px solid var(--line);
  min-height: 32px;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.4px;
}
.auth-chip-button:hover {
  color: var(--bright);
  border-color: var(--gold);
}