:root {
  --umber: #2E2420;
  --umber-deep: #161210;
  --gold: #C9A227;
  --gold-soft: #e0c056;
  --ember: #D9822B;
  --attack: #C2412D;
  --skill: #2FA39A;
  --power: #E8B030;
  --curse: #6E3C8F;
  --status: #7C8C74;
  --slate: #3D5A80;
  --brine: #2C5F63;
  --salt: #E6E1D3;
  --moss: #4F6D3A;
  --paper: #d8cbb3;
  --paper-dark: #c4b59a;
  --ink: #1c1612;
  --shadow: rgba(8, 6, 4, 0.72);
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
  --font-display: "Cinzel", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  height: 100%;
  background: #0a0908;
  color: var(--salt);
  font-family: var(--font-body);
  overflow: hidden;
  user-select: none;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
img { display: block; max-width: 100%; }

#app {
  width: min(100vw, 440px);
  height: 100dvh;
  height: 100svh;
  margin: 0 auto;
  position: relative;
  background: var(--umber-deep);
  overflow: hidden;
  touch-action: manipulation;
  box-shadow: 0 0 0 1px #000, 0 0 80px rgba(0,0,0,.8);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.38s ease;
}
.screen.on {
  display: flex;
  opacity: 1;
}

.badge {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  z-index: 20;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(22, 18, 16, 0.72);
  border: 1px solid rgba(201, 162, 39, 0.45);
  padding: 4px 8px;
  border-radius: 2px;
  pointer-events: none;
}

/* ---------- TITLE ---------- */
#title {
  background: #0d1014 center / cover no-repeat;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px calc(var(--safe-bottom) + 36px);
}
#title::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,.15) 35%, rgba(10,9,8,.55) 62%, rgba(10,9,8,.92) 100%);
  pointer-events: none;
}
#title .title-ui {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.btn-primary {
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--umber);
  background: linear-gradient(180deg, #e6cf6a, var(--gold) 45%, #a7841c);
  border: 1px solid #f0e0a0;
  box-shadow: 0 4px 0 #5c4a12, 0 8px 20px rgba(0,0,0,.45);
  border-radius: 3px;
  padding: 14px 16px;
}
.btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #5c4a12; }
.btn-ghost {
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(230, 225, 211, 0.45);
  padding: 10px 16px;
}
.btn-ghost[disabled] { cursor: default; }
.btn-secondary {
  width: 100%;
  max-width: 320px;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--salt);
  background: rgba(46, 36, 32, 0.8);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 3px;
  padding: 12px 16px;
}
.btn-secondary:active { background: rgba(70, 55, 45, 0.9); }
.title-note {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(230, 225, 211, 0.5);
  text-align: center;
}

/* ---------- DIALOGUE ---------- */
#dialogue {
  background: #12100e center top / cover no-repeat;
}
#dialogue .dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,10,8,.25) 20%, rgba(12,10,8,.55) 48%, rgba(8,6,5,.88) 100%);
}
#dialogue .portrait-wrap {
  position: absolute;
  right: -4%;
  bottom: 38%;
  height: 62%;
  width: 78%;
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(to left, #000 40%, transparent 98%),
              linear-gradient(to top, transparent 0%, #000 18%, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 98%),
              linear-gradient(to top, transparent 0%, #000 18%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#dialogue .portrait-wrap img {
  height: 100%;
  width: auto;
  margin-left: auto;
  object-fit: contain;
  filter: saturate(.85) contrast(1.05);
}
#dialogue .panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: var(--safe-bottom);
  z-index: 3;
  background: linear-gradient(180deg, rgba(28, 22, 18, 0.94), rgba(18, 14, 12, 0.97));
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 6px;
  padding: 14px 16px 16px;
  min-height: 168px;
  box-shadow: 0 -8px 32px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.speaker {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  min-height: 1em;
}
.speaker.narrator { color: #9a9284; letter-spacing: 0.12em; }
.line {
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--salt);
  flex: 1;
  font-weight: 400;
}
.line.narrator { font-style: italic; color: #d4cec0; }
.continue-hint {
  align-self: flex-end;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(201, 162, 39, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
.skip-btn {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  z-index: 20;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--salt);
  background: rgba(22, 18, 16, 0.7);
  border: 1px solid rgba(230, 225, 211, 0.25);
  border-radius: 2px;
}
.choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.choice {
  text-align: left;
  background: rgba(44, 36, 30, 0.9);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 4px;
  padding: 11px 12px 10px;
  min-height: 48px;
}
.choice:active { background: rgba(70, 56, 42, 0.95); }
.choice .c-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--salt);
  display: block;
}
.choice .c-prev {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.3;
  color: #b7b09f;
}
.choice.locked { opacity: .4; }

/* ---------- MAP ---------- */
#map {
  background: #10151a center / cover no-repeat;
}
#map .dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,18,.45), rgba(10,10,8,.78));
}
.map-ui {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 40px) 20px var(--safe-bottom);
}
.map-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-soft);
  text-shadow: 0 2px 12px #000;
}
.map-sub {
  text-align: center;
  font-size: 12px;
  color: #c5bfb0;
  margin: 6px 0 18px;
  letter-spacing: 0.04em;
}
.run-hud {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--salt);
}
.run-hud span { display: flex; align-items: center; gap: 6px; }
.run-hud b { color: var(--gold); font-weight: 600; }
.chart {
  flex: 1;
  position: relative;
  min-height: 320px;
}
.chart svg.paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 118px;
  min-height: 64px;
  padding: 10px 8px;
  text-align: center;
  background: rgba(22, 18, 16, 0.88);
  border: 1px solid var(--gold);
  border-radius: 50% / 44%;
  box-shadow: 0 0 0 4px rgba(22,18,16,.55), 0 0 18px rgba(201,162,39,.25);
}
.node .n-kind {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.node .n-name {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-top: 3px;
  line-height: 1.25;
}
.node.locked {
  border-color: #5a5348;
  box-shadow: none;
  color: #7a7468;
  pointer-events: none;
}
.node.locked .n-kind { color: #7a7468; }
.node.done {
  border-color: #6e8a6a;
  opacity: .7;
  pointer-events: none;
}
.node.current { animation: glow 1.8s ease-in-out infinite; }
@keyframes glow {
  50% { box-shadow: 0 0 0 4px rgba(22,18,16,.55), 0 0 28px rgba(201,162,39,.7); }
}
.node.rival { border-color: #c9a227; background: rgba(50, 32, 16, 0.9); }
.node:not(.locked):not(.done):active { transform: translate(-50%, -50%) scale(0.97); }

/* ---------- BATTLE ---------- */
#battle { background: #0e1214; }
.stage {
  position: absolute;
  inset: 0;
  background: #152028 center 30% / cover no-repeat;
}
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,14,.2) 0%, rgba(10,12,14,.15) 42%, rgba(12,10,8,.55) 62%, rgba(10,8,6,.94) 82%, #0c0a08 100%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(44, 95, 99, 0.18), transparent 70%);
  pointer-events: none;
}
.enemy {
  position: absolute;
  top: 8%;
  right: 0;
  width: 78%;
  height: 54%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.enemy-art {
  height: 86%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center top;
  filter: saturate(.8) contrast(1.08);
  mask-image: radial-gradient(ellipse 68% 80% at 50% 42%, #000 58%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 68% 80% at 50% 42%, #000 58%, transparent 80%);
  animation: bob 4.4s ease-in-out infinite;
}
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.enemy.hit .enemy-art { animation: none; filter: saturate(.8) contrast(1.08) brightness(1.4); transform: translate(4px, 0); }
.intent {
  position: absolute;
  top: max(86px, calc(env(safe-area-inset-top) + 76px));
  left: 10px;
  z-index: 5;
  min-width: 64px;
  background: rgba(16,12,10,.86);
  border: 1px solid rgba(201,162,39,.5);
  border-radius: 8px;
  padding: 6px 10px;
  text-align: center;
  pointer-events: none;
}
.intent .i-icon { font-size: 18px; line-height: 1; }
.intent .i-val {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--attack);
  font-weight: 700;
}
.intent .i-sub {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2px;
}
.enemy-plate {
  position: absolute;
  top: max(42px, calc(env(safe-area-inset-top) + 32px));
  left: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ename {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-shadow: 0 2px 6px #000;
}
.hp-row { display: flex; align-items: center; gap: 8px; }
.hp-bar {
  flex: 1;
  height: 12px;
  background: #2a1a18;
  border: 1px solid #5a3028;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px #000;
}
.hp-bar > i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #e06a4e, #a83228);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.hp-bar.player > i { background: linear-gradient(180deg, #6db089, #3d6d4a); }
.hp-num {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--salt);
  min-width: 52px;
  text-align: right;
  text-shadow: 0 1px 3px #000;
}

.battle-hud {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  padding: 0 8px var(--safe-bottom);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.player-plate {
  padding: 0 6px;
}
.player-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.energy {
  display: flex;
  gap: 6px;
  align-items: center;
}
.orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a5a40, #2a2418);
  border: 1px solid #6a5a30;
  box-shadow: inset 0 0 4px #000;
}
.orb.on {
  background: radial-gradient(circle at 35% 30%, #ffe9a0, var(--gold) 45%, #8a6410);
  border-color: #f0d878;
  box-shadow: 0 0 10px rgba(201,162,39,.65);
}
.block-chip, .marks-chip {
  font-size: 12px;
  background: rgba(20,16,14,.75);
  border: 1px solid rgba(230,225,211,.2);
  border-radius: 10px;
  padding: 3px 8px;
  color: var(--salt);
}
.block-chip { border-color: #3d6d8a; color: #9ec9e0; }
.block-chip:empty, .block-chip[data-n="0"] { display: none; }

.piles {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 4px;
  pointer-events: none;
}
.pile {
  width: 36px;
  height: 48px;
  border-radius: 3px;
  background: #2a241e;
  border: 1px solid #5a5044;
  font-size: 11px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  color: var(--gold);
  font-weight: 600;
  box-shadow: 2px 2px 0 #15110e;
}
.hand-row {
  position: relative;
  height: 200px;
  margin: 0 -4px;
}
#hand {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 4px;
}
.end-turn {
  position: absolute;
  right: 10px;
  bottom: calc(var(--safe-bottom) + 188px);
  z-index: 8;
  min-width: 86px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber);
  background: linear-gradient(180deg, #efe0a8, var(--gold));
  border: 1px solid #f3e6b0;
  border-radius: 3px;
  box-shadow: 0 3px 0 #5c4a12;
  padding: 8px 10px;
}
.end-turn:disabled {
  background: #3a342c;
  color: #8a8478;
  border-color: #4a443c;
  box-shadow: none;
}
.end-turn:not(:disabled):active { transform: translateY(2px); }

/* cards */
.card {
  position: absolute;
  width: 102px;
  height: 150px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(180deg, #ddd1b8, #c9ba9c);
  color: var(--ink);
  box-shadow: 0 10px 18px rgba(0,0,0,.55);
  transform-origin: 50% 110%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s;
  display: flex;
  flex-direction: column;
  padding: 5px 6px 6px;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 5px;
  border: 2px solid var(--type, var(--umber));
  pointer-events: none;
}
.card.attack { --type: var(--attack); }
.card.skill  { --type: var(--skill); }
.card.power  { --type: var(--power); }
.card.curse  { --type: var(--curse); }
.card.status { --type: var(--status); }
.card.unplayable, .card.too-costly {
  filter: grayscale(.35) brightness(.82);
}
.card.selected {
  z-index: 12 !important;
  box-shadow: 0 16px 28px rgba(0,0,0,.7), 0 0 0 2px var(--gold);
}
.card .cost {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a0, var(--gold) 50%, #7a5c10);
  color: var(--umber);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.card .cost.free { background: radial-gradient(circle at 35% 30%, #cde, #7aa 60%, #365); color: #102; }
.card .ctype {
  align-self: flex-end;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--type);
  font-weight: 700;
  margin-top: 4px;
  margin-right: 2px;
}
.card .glyph {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.3));
  opacity: .85;
}
.card .cname {
  font-family: var(--font-display);
  font-size: 8.5px;
  letter-spacing: 0.02em;
  text-align: center;
  font-weight: 700;
  line-height: 1.15;
  padding: 0 2px;
  max-height: 2.4em;
  overflow: hidden;
}
.card .ctext {
  font-size: 9.5px;
  text-align: center;
  line-height: 1.2;
  color: #3a3228;
  margin-top: 2px;
  min-height: 2.4em;
}
.card .flavor {
  font-size: 7.5px;
  font-style: italic;
  color: #6a6156;
  text-align: center;
  margin-top: auto;
  padding: 2px 2px 0;
  line-height: 1.2;
  max-height: 2.5em;
  overflow: hidden;
}

/* ---------- END / MODAL / TOAST ---------- */
#ending {
  background: #0b0c0e center / cover no-repeat;
  align-items: center;
  justify-content: center;
  padding: 28px 24px var(--safe-bottom);
  text-align: center;
}
#ending .dim {
  position: absolute; inset: 0;
  background: rgba(8,6,5,.72);
}
.end-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 360px;
}
.end-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 26px;
  color: var(--gold);
  margin: 0;
  text-transform: uppercase;
}
.end-card .end-body {
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  color: #d8d2c4;
  margin: 4px 0 12px;
}
.end-card .end-body p { margin: 0 0 10px; }

.modal-back {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(6,5,4,.78);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px var(--safe-bottom);
}
.modal-back.on { display: flex; }
.modal {
  width: 100%;
  background: linear-gradient(180deg, #2a221c, #1a1612);
  border: 1px solid rgba(201,162,39,.5);
  border-radius: 8px;
  padding: 16px;
  max-height: 80dvh;
  overflow: auto;
}
.modal h2 {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
  text-align: center;
}
.pick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.pick-list .card { position: relative; transform: none; }

#toasts {
  position: absolute;
  top: 22%;
  left: 16px;
  right: 16px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.toast {
  background: rgba(16,12,10,.88);
  border: 1px solid rgba(201,162,39,.45);
  color: var(--salt);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 4px;
  animation: fadeup 2.6s ease forwards;
  text-align: center;
  max-width: 90%;
}
.toast.bark {
  font-style: italic;
  border-color: rgba(230,225,211,.3);
}
.toast.bark .who {
  display: block;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}
@keyframes fadeup {
  0% { opacity: 0; transform: translateY(8px); }
  12% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px); }
}

.floater {
  position: absolute;
  z-index: 25;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  pointer-events: none;
  text-shadow: 0 2px 6px #000;
  animation: floatout 0.9s ease forwards;
}
.floater.dmg { color: #f06a54; }
.floater.block { color: #8ec8e8; }
.floater.heal { color: #7dcc8e; }
.floater.marks { color: var(--gold); }
@keyframes floatout {
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -48px); }
}

.turn-banner {
  position: absolute;
  top: 38%;
  left: 0; right: 0;
  z-index: 20;
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--gold);
  text-shadow: 0 2px 16px #000;
  pointer-events: none;
  opacity: 0;
}
.turn-banner.show { animation: banner 1.1s ease; }
@keyframes banner {
  0% { opacity: 0; letter-spacing: 0.4em; }
  25% { opacity: 1; letter-spacing: 0.22em; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

.lore-page {
  background: #d8cbb3;
  color: #2a2218;
  padding: 18px 16px;
  border-radius: 2px;
  box-shadow: 0 8px 24px #000;
  text-align: left;
  margin: 8px 0 16px;
}
.lore-page h3 {
  font-family: var(--font-display);
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lore-page p { margin: 0; font-style: italic; font-size: 14px; line-height: 1.45; }

/* title overlay — Aria's portrait art already has the SALTBOUND lockup */
#title {
  background-image: url("../art/title_bg.jpg");
  background-position: center top;
  background-size: 100% auto;
  background-color: #0c0e10;
}
#title::after {
  background: linear-gradient(180deg, rgba(10,9,8,.06) 42%, rgba(10,9,8,.28) 66%, rgba(10,9,8,.78) 100%);
}
.title-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--salt);
  text-shadow: 0 2px 14px #000, 0 0 28px rgba(0,0,0,.85);
  margin-bottom: 16px;
  text-align: center;
}
.screen {
  display: flex;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.screen.on {
  display: flex;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}
#battle.fog .stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(200,210,215,.22), rgba(140,150,155,.08) 55%, transparent 80%),
    linear-gradient(180deg, rgba(190,200,205,.18), transparent 50%);
  z-index: 3;
  pointer-events: none;
}
.hint {
  position: absolute;
  left: 12px;
  right: 110px;
  bottom: calc(var(--safe-bottom) + 196px);
  z-index: 8;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(230,225,211,.75);
  text-align: left;
  text-shadow: 0 1px 4px #000;
  pointer-events: none;
}