@font-face {
  font-family: 'Cinzel';
  src: url('../assets/fonts/cinzel-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../assets/fonts/cormorant-italic-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --pitch: #0a0809;
  --iron-950: #110e10;
  --iron-900: #171315;
  --iron-800: #1e1a1c;
  --iron-700: #2b2528;
  --iron-line: #3d3438;
  --ash: #ddd3c7;
  --smoke: #958a80;
  --blood: #a3161c;
  --blood-hi: #d8262c;
  --blood-lo: #5c0b0f;
  --gilt: #d4a24c;
  --gilt-hi: #f4d68c;
  --gilt-lo: #8a5e22;
  --heal: #6fbf73;
  --r-common: #a39a90;
  --r-rare: #5b97dc;
  --r-epic: #b071e6;
  --r-legendary: #e8a83c;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --chamfer: 10px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--pitch); }
body {
  color: var(--ash);
  font: 500 18px/1.45 var(--body);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: 0.02em; line-height: 1.15; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }

#app {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  min-height: 100%;
  min-height: 100dvh;
  background: var(--pitch);
  overflow: hidden;
}
@media (min-width: 560px) {
  body { background: radial-gradient(ellipse at 50% 0%, #1b1012, #050404 70%); }
  #app { box-shadow: 0 0 0 1px #221b1e, 0 30px 80px #000; }
}

/* ---------- Screen shell ---------- */
.screen {
  position: relative;
  min-height: 100dvh;
  padding: calc(var(--safe-top) + 14px) 16px calc(var(--nav-h) + var(--safe-bottom) + 20px);
  animation: screen-in 260ms ease-out both;
}
.screen.full { padding-bottom: calc(var(--safe-bottom) + 16px); }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.topbar h1 { font-size: 22px; }
.purse {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 17px var(--display);
  color: var(--gilt-hi);
  background: linear-gradient(180deg, #f4d68c, #c48b33 60%, #8a5e22);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.purse svg { width: 18px; height: 18px; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; color: var(--smoke); cursor: pointer; border-radius: 4px;
}
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:active { color: var(--ash); }

.lede { color: var(--smoke); font-size: 17px; margin-top: 4px; }
.lore { font-style: italic; color: #b9ada0; font-size: 18px; }
.muted { color: var(--smoke); }
.gold { color: var(--gilt); }
.danger { color: var(--blood-hi); }
.section-title { font: 700 15px var(--display); color: var(--smoke); margin: 26px 0 10px; letter-spacing: 0.04em; }

/* ---------- Iron plate panels (chamfered) ---------- */
.plate {
  position: relative;
  background: linear-gradient(180deg, var(--iron-800), var(--iron-900));
  clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
  padding: 14px 16px;
}
.plate::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 30%);
}
.plate + .plate { margin-top: 10px; }

/* ---------- Buttons ---------- */
.btn {
  --c1: var(--iron-700); --c2: var(--iron-800); --edge: var(--iron-line);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  min-height: 50px; padding: 0 22px; border: 0; cursor: pointer;
  font: 700 16px var(--display); letter-spacing: 0.06em; color: var(--ash);
  background: linear-gradient(180deg, var(--edge), var(--edge));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  transition: transform 90ms, filter 120ms;
}
.btn::before {
  content: ''; position: absolute; inset: 1px; z-index: -0;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  clip-path: inherit;
}
.btn > * , .btn { z-index: 0; }
.btn span, .btn svg { position: relative; }
.btn:active { transform: translateY(1px) scale(0.99); filter: brightness(1.15); }
.btn[disabled] { filter: grayscale(0.8) brightness(0.6); cursor: not-allowed; }
.btn.primary { --c1: #b81d23; --c2: #6e0d12; --edge: linear-gradient(180deg, #f4d68c, #8a5e22); color: #fff1dc; text-shadow: 0 1px 0 #3a0306; }
.btn.gilt { --c1: #e2b65c; --c2: #9a6a26; --edge: #f4d68c; color: #2a1704; }
.btn.ghost { --c1: transparent; --c2: transparent; --edge: var(--iron-line); color: var(--smoke); }
.btn.block { display: flex; width: 100%; }
.btn.big { min-height: 62px; font-size: 20px; }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 13px; }
.btn svg { width: 20px; height: 20px; }
.row { display: flex; gap: 10px; }
.row > .btn { flex: 1; }
.stack > * + * { margin-top: 10px; }

/* ---------- Bottom navigation ---------- */
.nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 30;
  width: 100%; max-width: 520px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  background: linear-gradient(180deg, rgba(17,14,16,0.92), #0a0809);
  border-top: 1px solid #2a2326;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #7b7069; text-decoration: none; font: 600 11px var(--display); letter-spacing: 0.05em;
}
.nav a svg { width: 24px; height: 24px; }
.nav a[aria-current='page'] { color: var(--gilt-hi); }
.nav a[aria-current='page'] svg { filter: drop-shadow(0 0 6px rgba(212,162,76,0.5)); }

/* ---------- Bars ---------- */
.bar { position: relative; height: 14px; background: #0d0a0b; box-shadow: inset 0 0 0 1px #3a2f33, inset 0 2px 4px #000; overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: var(--v, 100%); background: linear-gradient(180deg, #e2343a, #8e1015); transition: width 420ms cubic-bezier(.2,.8,.2,1); }
.bar > b { position: absolute; inset: 0 auto 0 0; width: var(--v, 100%); background: #f0d7a3; opacity: 0.55; transition: width 900ms 260ms ease-out; }
.bar.player > i { background: linear-gradient(180deg, #7fd37f, #2f7a35); }
.bar.gilt > i { background: linear-gradient(180deg, #f4d68c, #a8742a); }
.bar.thin { height: 6px; }

/* ---------- Boss stage (shared by home, map, battle) ---------- */
.stage {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 -16px;
  background: radial-gradient(ellipse at 50% 70%, var(--fog, #3a1e1e) 0%, transparent 65%), linear-gradient(180deg, var(--sky1, #120d10), var(--sky2, #2a1416));
}
.stage .mountains { position: absolute; inset: auto 0 0 0; width: 100%; height: 45%; z-index: 0; opacity: 0.9; }
.stage .boss-art { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }
.stage canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.stage::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,0.75) 100%), linear-gradient(180deg, transparent 70%, var(--pitch));
}

/* Boss art animation hooks */
.boss-art .body { transform-origin: 50% 90%; animation: breathe 4.2s ease-in-out infinite; }
.boss-art .eyes { animation: flicker 3.3s steps(1) infinite; }
@keyframes breathe { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.025) translateY(-2px); } }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 94% { opacity: 0.2; } 96% { opacity: 1; } 97% { opacity: 0.4; } }
.boss-art.hit { animation: hit-shake 260ms; }
.boss-art.hit .body { filter: brightness(2.2) saturate(0.4) sepia(1) hue-rotate(-30deg); }
.boss-art.crit { animation: hit-shake 420ms; }
.boss-art.crit .body { filter: brightness(3) saturate(0); }
@keyframes hit-shake { 0% { transform: translate(0,0); } 20% { transform: translate(-7px, 2px) rotate(-1deg); } 45% { transform: translate(6px,-2px) rotate(0.8deg); } 70% { transform: translate(-3px, 1px); } 100% { transform: none; } }
.boss-art.windup { animation: windup 2.6s ease-in forwards; }
.boss-art.windup .body { filter: drop-shadow(0 0 18px rgba(255, 40, 40, 0.8)); }
@keyframes windup { 0% { transform: none; } 100% { transform: scale(0.94) translateY(8px); } }
.boss-art.strike { animation: strike 380ms ease-out; }
@keyframes strike { 0% { transform: scale(0.94) translateY(8px); } 35% { transform: scale(1.18) translateY(14px); } 100% { transform: none; } }
.boss-art.enraged .body { filter: drop-shadow(0 0 12px rgba(220, 30, 30, 0.6)) saturate(1.3); }
.boss-art.dying { animation: dying 1.8s ease-in forwards; }
@keyframes dying { 0% { transform: none; opacity: 1; filter: none; } 30% { transform: translateY(6px) rotate(-2deg); filter: brightness(2); } 100% { transform: translateY(60px) scale(0.9, 0.6); opacity: 0; filter: blur(6px) brightness(0.2); } }
.boss-art.locked { filter: brightness(0) drop-shadow(0 0 1px #3b2f33); }
.boss-art.locked .body, .boss-art.locked .eyes { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .boss-art .body, .boss-art .eyes { animation: none; }
  .boss-art.hit, .boss-art.crit, .boss-art.strike { animation: none; }
  .screen { animation: none; }
}

/* ---------- Home ---------- */
.home .stage { height: min(58dvh, 520px); margin-top: -14px; }
.home .boss-title { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 6px; }
.boss-name { font: 800 30px/1.05 var(--display); color: #f1e6d6; text-shadow: 0 2px 12px #000; }
.boss-sub { font: italic 500 18px var(--body); color: #c0b2a3; margin-top: 2px; }
.home .wound { margin: 10px 0 4px; }
.meta-line { display: flex; justify-content: space-between; gap: 10px; font: 600 13px var(--display); color: var(--smoke); letter-spacing: 0.04em; }
.home .gear-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 14px 0; }
.stat-tile { text-align: center; padding: 10px 6px; }
.stat-tile strong { display: block; font: 700 22px var(--display); color: var(--ash); }
.stat-tile span { font-size: 15px; color: var(--smoke); }
.campaign-progress { display: flex; gap: 4px; margin-top: 8px; }
.campaign-progress i { flex: 1; height: 5px; background: #2a2326; }
.campaign-progress i.done { background: linear-gradient(90deg, #a8742a, #f4d68c); }
.campaign-progress i.now { background: var(--blood-hi); box-shadow: 0 0 8px var(--blood-hi); }

/* ---------- Lists (gear, shop, map, history) ---------- */
.item-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.item-glyph { width: 56px; height: 56px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2d2629, #120f11); box-shadow: inset 0 0 0 1px var(--rc, #3d3438); }
.item-glyph svg { width: 40px; height: 40px; }
.item-name { font: 700 17px var(--display); color: var(--rc, var(--ash)); }
.item-meta { font-size: 15px; color: var(--smoke); }
.item-stats { font: 600 13px var(--display); color: #cbbfb2; margin-top: 3px; letter-spacing: 0.02em; }
.item-stats .up { color: var(--heal); }
.item-stats .down { color: var(--blood-hi); }
.rarity-common { --rc: var(--r-common); }
.rarity-rare { --rc: var(--r-rare); }
.rarity-epic { --rc: var(--r-epic); }
.rarity-legendary { --rc: var(--r-legendary); }
.badge { display: inline-block; font: 700 11px var(--display); letter-spacing: 0.06em; padding: 2px 7px; color: #1a1205; background: var(--gilt); margin-left: 6px; vertical-align: 2px; }
.badge.iron { background: #3a3236; color: var(--ash); }
.item-actions { display: flex; gap: 8px; margin-top: 12px; }
.item-actions .btn { flex: 1; }
.empty { text-align: center; padding: 26px 12px; color: var(--smoke); }

.tabs { display: flex; gap: 6px; margin: 12px 0 4px; }
.tabs button { flex: 1; min-height: 40px; border: 0; background: #181416; color: var(--smoke); font: 700 13px var(--display); letter-spacing: 0.05em; cursor: pointer; }
.tabs button[aria-selected='true'] { background: #2b2528; color: var(--gilt-hi); box-shadow: inset 0 -2px 0 var(--gilt); }

.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.slot { text-align: center; padding: 8px 4px; background: #151113; box-shadow: inset 0 0 0 1px var(--rc, #2e272a); }
.slot svg { width: 36px; height: 36px; }
.slot small { display: block; font: 600 11px var(--display); color: var(--smoke); margin-top: 2px; }
.power-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }

/* ---------- Campaign map ---------- */
.map-node { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; cursor: pointer; }
.map-node .thumb { width: 84px; height: 92px; overflow: hidden; background: linear-gradient(180deg, var(--sky1), var(--sky2)); }
.map-node .thumb svg { width: 100%; height: 100%; }
.map-node.locked { cursor: default; opacity: 0.7; }
.map-node.selected { box-shadow: inset 3px 0 0 var(--blood-hi); }
.map-node .tier { font: 600 12px var(--display); color: var(--smoke); letter-spacing: 0.05em; }
.map-region { font: 700 14px var(--display); color: var(--gilt); margin: 22px 0 8px; letter-spacing: 0.05em; }

/* ---------- Battle ---------- */
.battle { padding: 0; min-height: 100dvh; display: flex; flex-direction: column; }
.battle .hud { position: relative; z-index: 6; padding: calc(var(--safe-top) + 10px) 14px 8px; }
.battle .hud-top { display: flex; align-items: flex-start; gap: 10px; }
.battle .hud-top .who { flex: 1; min-width: 0; }
.battle .boss-name { font-size: 22px; }
.battle .hp-num { font: 700 14px var(--display); color: #e8d9c6; margin-top: 4px; display: flex; justify-content: space-between; }
.battle .stage { flex: 1; margin: 0; min-height: 300px; }
.battle .float-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.dmg {
  position: absolute; left: 50%; top: 40%;
  font: 800 44px var(--display); color: #fff2df;
  text-shadow: 0 0 1px #000, 0 3px 0 #5c0b0f, 0 0 18px rgba(255,80,60,0.6);
  animation: dmg-rise 1100ms cubic-bezier(.2,.9,.3,1) forwards;
}
.dmg.crit { font-size: 64px; color: var(--gilt-hi); text-shadow: 0 3px 0 #6b4512, 0 0 24px rgba(255,200,90,0.8); }
.dmg small { display: block; font-size: 16px; text-align: center; letter-spacing: 0.1em; }
@keyframes dmg-rise { 0% { transform: translate(-50%, 10px) scale(0.6); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -110px) scale(1); opacity: 0; } }
.slash { position: absolute; inset: 10% 5%; z-index: 6; pointer-events: none; }
.slash path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: slash 340ms ease-out forwards; }
@keyframes slash { 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.banner {
  position: absolute; left: 12px; right: 12px; top: 36%; z-index: 8; text-align: center; pointer-events: none;
  font: 800 26px var(--display); color: #fff; text-shadow: 0 2px 14px #000;
  animation: banner 1800ms ease-out forwards;
}
.banner small { display: block; font: italic 500 19px var(--body); color: #e0cfbd; }
@keyframes banner { 0% { opacity: 0; transform: scale(1.3); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.warn-ring { position: absolute; z-index: 8; left: 50%; top: 14px; transform: translateX(-50%); padding: 6px 14px; font: 700 15px var(--display); color: #ffd9d9; background: rgba(110, 10, 15, 0.85); box-shadow: 0 0 20px rgba(220,30,30,0.6); }
.hurt-flash { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(200, 0, 0, 0.55)); animation: hurt 600ms ease-out forwards; }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }
.shake { animation: hit-shake 320ms; }

.battle .lower { position: relative; z-index: 6; padding: 8px 14px calc(var(--safe-bottom) + 12px); background: linear-gradient(180deg, transparent, var(--pitch) 20%); }
.counters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; margin-bottom: 10px; }
.counter { text-align: center; }
.counter strong { display: block; font: 800 34px/1 var(--display); color: var(--ash); }
.counter span { font-size: 15px; color: var(--smoke); }
.counter.combo strong { color: var(--gilt-hi); }
.counter.combo.pop strong { animation: pop 300ms; }
@keyframes pop { 50% { transform: scale(1.35); } }

.cam-strip { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; margin-top: 10px; }
.cam-box { position: relative; width: 112px; aspect-ratio: 3 / 4; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px #3a2f33; }
.cam-box video, .cam-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.feedback { font: 700 22px/1.2 var(--display); color: #f1e6d6; min-height: 54px; }
.feedback.good { color: #9be08f; }
.feedback.bad { color: #ff8b80; }
.depth { margin-top: 6px; }

.pause-veil { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(6, 4, 5, 0.86); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); text-align: center; }
.pause-veil .inner { width: 100%; max-width: 360px; }
.pause-veil h2 { font-size: 30px; margin-bottom: 8px; }

/* ---------- Calibration ---------- */
.calib .viewer { position: relative; margin: 12px -16px 0; aspect-ratio: 3 / 4; max-height: 56dvh; background: #050404; overflow: hidden; }
.calib .viewer video, .calib .viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.calib .viewer .status-chip { position: absolute; left: 10px; top: 10px; z-index: 3; font: 700 12px var(--display); letter-spacing: 0.05em; padding: 5px 9px; background: rgba(0,0,0,0.7); color: var(--ash); }
.calib .viewer .hint { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 14px 12px; font: 700 20px/1.25 var(--display); text-align: center; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85)); }
.checklist { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.checklist li { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--smoke); }
.checklist li::before { content: ''; width: 12px; height: 12px; flex: none; transform: rotate(45deg); background: #2e272a; box-shadow: inset 0 0 0 1px #4a4044; }
.checklist li.ok { color: var(--ash); }
.checklist li.ok::before { background: var(--heal); box-shadow: 0 0 8px rgba(111,191,115,0.6); }
.setup-steps { margin: 6px 0 0; padding-left: 22px; }
.setup-steps li { margin: 6px 0; }
.setup-figure { display: block; width: 100%; max-width: 380px; margin: 12px auto; }

/* ---------- Results ---------- */
.result { text-align: center; }
.result .stage { height: 300px; margin-top: -14px; }
.result h1 { font-size: 40px; margin-top: 4px; }
.result h1.victory { background: linear-gradient(180deg, #fff1c9, #d4a24c 55%, #8a5e22); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 10px rgba(212, 162, 76, 0.35)); }
.result h1.defeat { color: var(--blood-hi); text-shadow: 0 0 24px rgba(216, 38, 44, 0.45); }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; text-align: center; }
.result-grid .plate strong { display: block; font: 800 26px var(--display); }
.result-grid .plate span { color: var(--smoke); font-size: 16px; }
.reward-list { text-align: left; }
.reward-gold { font: 800 34px var(--display); color: var(--gilt-hi); text-shadow: 0 0 16px rgba(244,214,140,0.4); }

/* ---------- Profile ---------- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats-grid .plate { margin: 0 !important; }
.stats-grid strong { display: block; font: 800 24px var(--display); color: var(--ash); }
.stats-grid span { font-size: 15px; color: var(--smoke); }
.history-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.history-row .when { font-size: 15px; color: var(--smoke); }
.outcome { font: 700 13px var(--display); letter-spacing: 0.05em; }
.outcome.victory { color: var(--gilt); }
.outcome.defeat { color: var(--blood-hi); }
.outcome.retreated { color: var(--smoke); }

/* ---------- Settings ---------- */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; }
.setting label { flex: 1; }
.setting small { display: block; color: var(--smoke); font-size: 15px; }
.toggle { position: relative; width: 54px; height: 30px; flex: none; appearance: none; -webkit-appearance: none; background: #2b2528; box-shadow: inset 0 0 0 1px #4a4044; cursor: pointer; margin: 0; }
.toggle::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; background: #8d8279; transition: transform 160ms, background 160ms; }
.toggle:checked { background: #4d1316; box-shadow: inset 0 0 0 1px var(--blood); }
.toggle:checked::after { transform: translateX(24px); background: var(--gilt-hi); }
.seg { display: flex; }
.seg button { flex: 1; min-height: 40px; border: 0; background: #1a1517; color: var(--smoke); font: 700 12px var(--display); cursor: pointer; box-shadow: inset 0 0 0 1px #3a3236; }
.seg button[aria-pressed='true'] { background: #3a1416; color: var(--gilt-hi); box-shadow: inset 0 0 0 1px var(--blood); }

/* ---------- Toast & modal ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-bottom) + 14px); transform: translateX(-50%); z-index: 50; max-width: 440px; width: calc(100% - 32px); padding: 12px 16px; text-align: center; font: 700 15px var(--display); background: #241d20; color: var(--ash); box-shadow: 0 10px 30px #000, inset 0 0 0 1px #3d3438; animation: toast 2600ms ease forwards; }
.toast.good { box-shadow: 0 10px 30px #000, inset 0 0 0 1px var(--gilt); color: var(--gilt-hi); }
.toast.bad { box-shadow: 0 10px 30px #000, inset 0 0 0 1px var(--blood); color: #ffb3ac; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.modal-veil { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(5, 3, 4, 0.82); }
.modal { width: 100%; max-width: 400px; }
.modal h2 { font-size: 22px; margin-bottom: 8px; }
.modal p { margin-bottom: 16px; color: #c8bcaf; }

/* ---------- Boot / error ---------- */
.boot { display: grid; place-items: center; min-height: 100dvh; text-align: center; padding: 24px; }
.boot h1 { font-size: 40px; letter-spacing: 0.12em; background: linear-gradient(180deg, #e9e2da, #7d736a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.boot p { color: var(--smoke); margin-top: 8px; }
.spinner { width: 34px; height: 34px; margin: 18px auto 0; border: 2px solid #3a3236; border-top-color: var(--gilt); border-radius: 50%; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.intro .crest { display: block; width: 120px; margin: 30px auto 10px; }
.intro h1 { text-align: center; font-size: 42px; letter-spacing: 0.1em; }
.intro .lede { text-align: center; }
.intro .plate p + p { margin-top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }