@font-face { font-family: Cinzel; src: url("./cinzel.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
:root {
  color-scheme: dark;
  --night: #080809; --stone: #151516; --field: #191819;
  --silver: #c4c0ba; --blood: #a72e32; --ink: #e3dfd9;
  --muted: #a4a09c; --line: #393638; --danger: #e58c8c;
  --display: Cinzel, "Palatino Linotype", Georgia, serif;
  font-family: "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--night); color: var(--ink); overscroll-behavior: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--silver); outline-offset: 4px; }
button { color: var(--ink); border: 1px solid var(--line); background: linear-gradient(#222122, var(--stone)); border-radius: 1px; min-height: 44px; padding: 12px 18px; font-size: 13px; transition: background .16s, border-color .16s, box-shadow .16s, transform .16s; }
button:hover:not(:disabled) { border-color: #807778; background: #292526; }
button:active:not(:disabled) { transform: translateY(1px); }
button.primary { background: linear-gradient(#8d2529, #591619); color: var(--ink); border-color: #b4484c; font: 500 14px/1.4 var(--display); letter-spacing: .12em; box-shadow: inset 0 0 0 3px #08080955, inset 0 1px #e58c8c40, 0 6px 24px #0006; }
button.primary:hover:not(:disabled) { background: linear-gradient(#a72e32, #721b20); border-color: var(--danger); box-shadow: inset 0 0 0 3px #08080955, 0 4px 28px #a72e3226; }
button.quiet { background: transparent; color: var(--muted); }
button.quiet:hover:not(:disabled) { color: var(--ink); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.shell, .arena, .playfield { position: absolute; inset: 0; width: 100%; height: 100%; height: 100dvh; }
.topbar { position: absolute; top: max(22px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); z-index: 4; }
.brand { position: fixed; left: max(28px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; pointer-events: none; opacity: .6; }
.brand-mark { color: var(--silver); width: 30px; height: 36px; }
h1 { margin: 0; font: 500 12px/1 var(--display); letter-spacing: .12em; }
.subtitle { margin: 6px 0 0; color: var(--muted); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.actions { display: flex; gap: 7px; align-items: center; }
.actions button { font-size: 12px; width: 44px; height: 44px; padding: 10px; background: #080809e6; }
.actions svg { width: 20px; height: 20px; display: block; }
.arena { overflow: hidden; background: var(--field); }
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(#080809e6, transparent 150px); }
.vitals { position: absolute; left: max(28px, env(safe-area-inset-left)); top: max(25px, env(safe-area-inset-top)); width: 250px; padding-left: 49px; }
.vital-seal { position: absolute; left: 0; top: -4px; width: 36px; height: 43px; color: var(--silver); }
.stat-label { color: var(--muted); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.vital-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.number { font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums; }
#health-text { font-size: 11px; color: var(--ink); white-space: nowrap; }
.health-track { position: relative; height: 12px; border: 1px solid #635052; padding: 2px; background: var(--night); overflow: hidden; box-shadow: 0 3px 12px #0008; }
#health-fill { position: relative; height: 100%; width: 100%; background: linear-gradient(90deg, #631a20, #bb4146); box-shadow: inset 0 1px #e58c8c66; transition: width .12s; }
/* The health just lost lingers as a pale chip, then drains after the bar. */
.health-chip { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(100% - 4px); background: #f1d3c8; transition: width .45s cubic-bezier(.4, 0, .6, 1) .32s; }
.health-track.hurt { animation: vital-hurt .32s ease-out; }
@keyframes vital-hurt { 0% { border-color: #ff8a8a; box-shadow: 0 0 18px #ff3b3b99, 0 3px 12px #0008; transform: translateX(-2px); } 30% { transform: translateX(2px); } 60% { transform: translateX(-1px); } 100% { transform: none; } }
.xp-track.level-up #xp-fill { animation: xp-level .7s ease-out; }
@keyframes xp-level { 0% { background: #fff6d8; box-shadow: 0 0 22px #ffd27a, 0 0 6px #fff; } 100% { box-shadow: 0 0 8px #c4c0ba40; } }
.clock { position: absolute; top: max(24px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); text-align: center; min-width: 150px; padding: 0 18px 14px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at top, #080809cc, transparent); }
#timer { font-size: 32px; letter-spacing: .09em; line-height: 1; color: var(--ink); text-shadow: 0 2px 8px #000; }
.clock .stat-label { margin-top: 5px; font-size: 9px; }
.counters { position: absolute; right: max(189px, calc(env(safe-area-inset-right) + 165px)); top: max(25px, env(safe-area-inset-top)); display: flex; gap: 26px; text-align: right; }
.counters .number { font-size: 20px; display: block; margin-top: 4px; }
#coins { color: var(--silver); }
.xp-track { position: absolute; top: 0; width: 100%; height: 3px; left: 0; background: var(--night); }
#xp-fill { background: var(--silver); height: 100%; width: 0; box-shadow: 0 0 8px #c4c0ba40; transition: width .15s; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ability-fx { pointer-events: none; z-index: 1; mix-blend-mode: screen; }
#world:focus-visible { outline-offset: -4px; }
#navigation { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#navigation-safe-area { position: absolute; inset: max(112px, calc(env(safe-area-inset-top) + 90px)) max(24px, env(safe-area-inset-right)) max(150px, calc(env(safe-area-inset-bottom) + 126px)) max(24px, env(safe-area-inset-left)); }
#minimap { --map-gold: #c2a16c; --map-bone: #e0cea4; --map-enemy: #bf6049; --map-curse: #ae9499; --map-soot: #100b09; position: absolute; top: max(100px, calc(env(safe-area-inset-top) + 78px)); right: max(14px, env(safe-area-inset-right)); width: clamp(220px, 18vw, 260px); }
.map-bezel { position: relative; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 4px 5px #000b); }
.map-bezel::after { content: ""; position: absolute; inset: 0; background: url("../minimap.png") center / contain no-repeat; }
.map-drawing { position: absolute; left: 13%; top: 11%; display: block; width: 74%; aspect-ratio: 1; }
.map-symbols { z-index: 1; overflow: visible; }
.map-scars { fill: none; stroke: #120a07; stroke-opacity: .55; stroke-width: .6; stroke-linecap: round; }
.map-compass { fill: #c2a16c; font: 500 4.5px var(--display); text-anchor: middle; paint-order: stroke; stroke: var(--map-soot); stroke-width: 1.5; }
#map-camera { fill: #d6bc8605; stroke: #c2a16c; stroke-opacity: .3; stroke-width: .45; stroke-dasharray: 1.6 .8 .3 1.2; }
#map-enemies { fill: var(--map-enemy); stroke: #32120d; stroke-width: .4; }
#map-elites { fill: #c08a52; stroke: var(--map-soot); stroke-width: .65; }
#map-bosses { fill: var(--map-bone); stroke: #63261f; stroke-width: .85; }
#map-route { fill: none; stroke: #a77c4f; stroke-width: .65; stroke-dasharray: .8 2 2 .9 .4 2.5; opacity: .6; }
#map-player { fill: var(--map-bone); stroke: var(--map-soot); stroke-width: .8; filter: drop-shadow(0 1px 1px #000); }
#map-objectives { color: var(--map-gold); }
#map-objectives [data-kind="shrine"] { color: var(--map-curse); }
.map-objective-glyph { fill: currentColor; stroke: var(--map-soot); stroke-width: .7; stroke-linejoin: miter; filter: drop-shadow(0 1px 1px #000); }
.map-objective-claws { fill: none; stroke: var(--map-bone); stroke-width: .65; opacity: 0; }
.map-objective-bearing { fill: none; stroke: currentColor; stroke-width: .85; display: none; }
#map-objectives [data-tracked="true"] .map-objective-claws { opacity: .85; }
#map-objectives [data-distant="true"] .map-objective-glyph { fill: var(--map-soot); stroke: currentColor; }
#map-objectives [data-distant="true"] .map-objective-bearing { display: block; }
.map-readout { margin: -5px 12% 0; text-align: center; text-shadow: 0 2px 2px #000; background: radial-gradient(ellipse at top, #1c100af0, #100b09db 55%, transparent 75%); }
#map-status { margin: 0; padding: 5px 0 7px; color: #b7a58a; font: 500 10px/1.4 var(--display); white-space: nowrap; }
#map-status[data-danger="true"] { color: var(--map-enemy); }
.map-destination { min-height: 63px; padding: 8px 0; border-top: 1px solid #96704740; }
#map-target-label { display: block; color: #a99476; font: 500 8px/1.4 var(--display); letter-spacing: .05em; }
#map-target-name { display: block; margin: 4px 0; color: var(--map-gold); font: 500 12px/1.4 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#map-target-name[data-kind="shrine"] { color: var(--map-curse); }
#map-target-distance { display: block; color: #c6b395; font: 12px/1.4 Georgia, serif; font-variant-numeric: tabular-nums; }
#objective-arrow { position: absolute; left: 0; top: 0; width: 132px; height: 58px; display: flex; flex-direction: column; align-items: center; visibility: hidden; filter: drop-shadow(0 1px 3px #000); }
#objective-bearing { width: 24px; height: 24px; flex-shrink: 0; }
#objective-name, #objective-distance { display: block; max-width: 100%; padding: 1px 5px; background: #080809e6; font-size: 10px; line-height: 15px; }
#objective-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#objective-distance { color: var(--ink); font-size: 9px; }
.field-caption { position: absolute; top: 89px; left: max(28px, env(safe-area-inset-left)); z-index: 2; pointer-events: none; color: var(--muted); font-size: 9px; letter-spacing: .17em; text-transform: uppercase; opacity: .7; }
.field-caption::before { content: ""; width: 5px; height: 5px; display: inline-block; background: var(--blood); margin: 0 8px 1px 0; transform: rotate(45deg); }
.announcements { position: absolute; z-index: 4; top: 112px; left: 50%; transform: translateX(-50%); width: min(540px, calc(100% - 32px)); display: grid; justify-items: center; gap: 12px; pointer-events: none; }
#toast { width: max-content; max-width: 100%; margin: 0; padding: 11px 24px; color: var(--ink); background: #080809ed; border-block: 1px solid var(--line); font-size: 12px; line-height: 1.6; text-align: center; }
#interact-btn { position: absolute; z-index: 4; bottom: max(139px, calc(env(safe-area-inset-bottom) + 125px)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); background: #100c0dee; border-color: var(--blood); color: var(--danger); font-size: 12px; box-shadow: 0 0 25px #a72e321c; }
#interact-btn small { display: block; margin-top: 5px; color: var(--ink); font-size: 11px; }
#boon { position: absolute; z-index: 3; right: max(24px, env(safe-area-inset-right)); bottom: 128px; max-width: 260px; margin: 0; padding: 10px 13px; color: var(--danger); background: #080809ed; border-left: 2px solid var(--blood); font-size: 11px; line-height: 1.6; pointer-events: none; }
.loadout { position: absolute; z-index: 3; bottom: max(26px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 12px; padding: 9px; background: linear-gradient(#222122f5, #080809f5); border: 1px solid #625b5c; box-shadow: 0 6px 30px #0009, inset 0 0 0 3px var(--night); }
.level { text-align: center; min-width: 45px; }
.level .number { display: block; font: 500 28px var(--display); color: var(--ink); }
.slots { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#weapons { flex-wrap: nowrap; }
.slot { position: relative; width: 52px; height: 54px; display: grid; place-items: center; background: linear-gradient(#262325, #100f10); border: 1px solid #625b5c; border-radius: 1px; color: var(--silver); overflow: hidden; }
.slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #080809b3 var(--cooldown, 0%), transparent var(--cooldown, 0%)); pointer-events: none; }
.slot.empty { border-color: #39363880; background: #08080980; }
.slot.empty::before { content: "·"; color: var(--line); }
.slot svg { width: 29px; height: 29px; }
.slot small { position: absolute; z-index: 1; bottom: 2px; right: 4px; font-size: 9px; color: var(--ink); }
.slot.fused { color: var(--ink); border: 2px solid var(--blood); background: radial-gradient(ellipse at bottom, #a72e3240, var(--night)); }
.slot.fused small { font-size: 7px; letter-spacing: .06em; }
.slot.fusion-ready { border-color: var(--danger); box-shadow: 0 0 12px #a72e3233; }
.weapon-pips { position: absolute; z-index: 1; top: 3px; inset-inline: 3px; display: flex; gap: 2px; }
.weapon-pips i { flex: 1; height: 3px; background: var(--line); }
.weapon-pips i.filled { background: var(--silver); }
.fusion-ready .weapon-pips i.filled { background: var(--danger); }
#fusion-ready { position: absolute; bottom: calc(100% + 44px); left: 0; width: 100%; margin: 0; color: var(--danger); text-align: center; font: 10px/1.5 Consolas, monospace; text-shadow: 0 2px 4px #000; pointer-events: none; }
#fusion-banner { width: min(410px, 100%); padding: 16px 22px; text-align: center; border-block: 1px solid var(--blood); background: linear-gradient(110deg, #080809f5, #261719fa, #080809f5); box-shadow: 0 10px 40px #0008; }
#fusion-banner .eyebrow { margin: 0 0 8px; }
#fusion-symbols { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--silver); }
#fusion-symbols svg { width: 25px; height: 25px; }
#fusion-symbols svg:last-child { width: 44px; height: 44px; color: var(--ink); filter: drop-shadow(0 0 8px #a72e3266); }
#fusion-name { display: block; font: 500 28px/1.2 var(--display); color: var(--ink); margin: 10px 0; }
#fusion-recipe, #fusion-power { margin: 5px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
#fusion-power { color: var(--silver); }
.passives { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); flex-wrap: nowrap; }
.passives .slot { width: 28px; height: 28px; color: var(--silver); background: #080809ed; border-color: #625b5c; }
.passives .slot svg { width: 16px; height: 16px; }
.xp-copy { position: absolute; top: calc(100% + 7px); width: 100%; left: 0; text-align: center; color: var(--muted); font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
.footer { position: absolute; z-index: 3; right: max(24px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); color: var(--muted); font-size: 10px; line-height: 1.8; text-align: right; pointer-events: none; }
kbd { display: inline-block; font: 10px "Cascadia Mono", Consolas, monospace; border: 1px solid #625b5c; border-bottom-width: 2px; padding: 1px 4px; border-radius: 2px; color: var(--ink); }
.technical { color: var(--muted); font-size: 10px; }
#stick { position: absolute; z-index: 2; pointer-events: none; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; border: 1px solid #c4c0ba66; background: #08080955; }
#stick-knob { position: absolute; width: 38px; height: 38px; left: 32px; top: 32px; border-radius: 50%; border: 1px solid #c4c0baaa; background: #c4c0ba33; }
.touch-copy { display: none; }
dialog { width: min(560px, calc(100% - 36px)); max-height: calc(100dvh - 36px); padding: 42px; border: 1px solid #625b5c; border-top-color: #8c7375; border-radius: 1px; color: var(--ink); background: linear-gradient(145deg, #201b1d, var(--stone) 38%, #100f10); box-shadow: 0 30px 120px #000c, inset 0 0 0 5px var(--night), inset 0 0 0 6px #39363880; scrollbar-color: #625b5c var(--night); }
.menu-content { position: relative; z-index: 1; }
dialog.full-screen { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: max(36px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); border: 0; box-shadow: none; background: radial-gradient(ellipse at 50% 25%, #28131566, transparent 55%), var(--night); }
dialog.full-screen[open] { display: grid; justify-items: center; align-items: center; }
dialog.full-screen .menu-content { width: min(540px, 100%); text-align: center; }
.intro-art { display: none; }
dialog.full-screen .intro-art { display: block; position: fixed; pointer-events: none; inset: 0; overflow: hidden; }
.cathedral { position: absolute; width: min(1100px, 140vw); height: 115vh; left: 50%; top: -6vh; transform: translateX(-50%); color: #635052; opacity: .18; }
.intro-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 25%, var(--night) 85%), linear-gradient(0deg, #080809, transparent 35%); }
.oath-seal { display: none; }
dialog.full-screen .oath-seal { display: block; width: 98px; height: 108px; margin: 0 auto 24px; color: #8c7375; filter: drop-shadow(0 5px 18px #a72e3226); }
dialog[data-mode="upgrade"] { width: min(940px, calc(100% - 36px)); text-align: center; }
dialog[data-mode="upgrade"] .dialog-copy { margin-inline: auto; }
/* The merchant's counter: brass prices, burgundy cloth, a ruled stock ledger. */
dialog[data-mode="shop"] { --brass: #e9b96d; --cloth: #382025; width: min(1240px, calc(100% - 28px)); padding: 32px; border-top-color: var(--brass); }
dialog[data-mode="shop"] .eyebrow { color: var(--brass); }
dialog[data-mode="shop"] .dialog-copy { margin-bottom: 20px; }
.shop-ledger { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; border-block: 1px solid #66503b; }
.shop-ledger strong { display: block; margin-top: 6px; color: var(--brass); font-size: 25px; font-weight: 500; }
.shop-clock { text-align: right; color: var(--brass); font-size: 13px; }
.shop-clock small { display: block; margin-top: 7px; color: var(--muted); font: 11px/1.5 "Segoe UI", system-ui, sans-serif; }
.shop-counter { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: center; }
#shop-stock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shop-merchant { min-width: 0; padding-top: 16px; text-align: center; }
#shop-art { position: static; display: block; width: 100%; height: auto; aspect-ratio: 420 / 470; image-rendering: pixelated; }
.shop-merchant p { margin: 0 0 14px; font: 12px/1.8 var(--display); color: var(--muted); }
.shop-offer { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px 0; }
.shop-offer > button { margin-top: auto; width: 100%; }
.shop-offer button { padding: 10px 8px; border-color: #80613e; background: var(--cloth); font-size: 12px; }
.shop-offer button:disabled { opacity: 1; color: var(--muted); background: var(--stone); border-color: var(--line); }
.shop-offer[data-purchased="true"] .gear-comparison { opacity: .65; }
#shop-status { min-height: 1.6em; margin: 18px 0; color: var(--brass); font-size: 12px; line-height: 1.6; }
/* Sticks to the dialog's padding edge, so no offer shows below the counter. */
.shop-footer { position: sticky; bottom: -32px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px 32px; border-top: 1px solid #66503b; background: var(--stone); }
.shop-footer > span { color: var(--muted); font-size: 11px; }
#shop-save { margin-left: auto; }
#interact-btn[data-kind="shop"] { border-color: #e9b96d; color: #e9b96d; }
@media (min-width: 681px) and (max-width: 1100px) {
  .shop-counter { grid-template-columns: 180px minmax(0, 1fr); }
  #shop-stock { grid-template-columns: 1fr; gap: 0; }
  .shop-offer { border-bottom: 1px solid var(--line); }
}
@media (max-width: 680px) {
  dialog[data-mode="shop"] { padding: 24px 18px; }
  .shop-counter { grid-template-columns: 1fr; gap: 0; }
  .shop-merchant { display: none; }
  #shop-stock { grid-template-columns: 1fr; gap: 0; }
  .shop-offer { padding: 17px 0; border-bottom: 1px solid var(--line); }
  .shop-ledger strong { font-size: 21px; }
  .shop-clock { max-width: 170px; }
  .shop-footer { bottom: -24px; padding-block: 14px 24px; flex-wrap: wrap; }
  .shop-footer > span { width: 100%; }
  #shop-save { margin-left: 0; }
}
/* Landscape phones: drop the stall art and the prose so stock stays on screen. */
@media (max-height: 560px) {
  dialog[data-mode="shop"] { padding: 18px 24px; }
  dialog[data-mode="shop"] .eyebrow { margin-bottom: 8px; }
  dialog[data-mode="shop"] h2 { font-size: 24px; margin-bottom: 0; }
  dialog[data-mode="shop"] .dialog-copy { display: none; }
  .shop-counter { grid-template-columns: 1fr; gap: 0; }
  .shop-merchant { display: none; }
  .shop-ledger { padding: 10px 0; }
  .shop-ledger strong { margin-top: 3px; font-size: 21px; }
  .shop-offer { padding: 13px 0; }
  #shop-status { margin: 12px 0; }
  .shop-footer { bottom: -18px; padding-block: 12px 18px; }
}
dialog::backdrop { background: #080809bf; backdrop-filter: blur(4px) saturate(.35); }
.eyebrow { margin: 0 0 14px; color: var(--silver); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
h2 { font: 500 clamp(28px, 4vw, 40px)/1.18 var(--display); letter-spacing: .015em; margin: 0 0 14px; text-shadow: 0 3px 20px #0005; text-wrap: balance; }
.dialog-copy { color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 480px; margin: 0 0 23px; }
.intro-title { font-size: clamp(38px, 7vw, 72px); text-transform: uppercase; letter-spacing: .035em; margin-bottom: 12px; background: linear-gradient(#f0ece6 20%, #908582); background-clip: text; color: transparent; text-shadow: none; }
dialog.full-screen .eyebrow { color: var(--danger); letter-spacing: .5em; padding-left: .5em; margin-bottom: 8px; }
dialog.full-screen .dialog-copy { margin: 0 auto 36px; font-size: 13px; letter-spacing: .025em; }
.controls-guide { margin: 25px 0 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
#run-options { margin-top: 12px; padding: 18px 20px; text-align: left; background: var(--stone); border: 1px solid var(--line); }
.seed-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 16px; }
.seed-row label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; }
.seed-row input { width: 100%; min-width: 0; border: 1px solid #625b5c; background: var(--night); padding: 10px; border-radius: 1px; color: var(--ink); font-size: 16px; }
.seed-row p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
#start-btn { width: min(360px, 100%); min-height: 54px; }
.intro-secondary { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.intro-secondary button, #back-btn { border-color: transparent; font-size: 12px; padding-inline: 14px; }
#options-btn[aria-expanded="true"] { color: var(--ink); border-bottom-color: var(--blood); }
#options-btn::after { content: "+"; display: inline-block; width: 12px; margin-left: 10px; color: var(--silver); }
#options-btn[aria-expanded="true"]::after { content: "−"; }
#back-btn { margin-top: 6px; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.dialog-actions button { flex: 1; }
.fineprint { color: var(--muted); font-size: 10px; line-height: 1.6; margin: 18px 0 0; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.choice { min-width: 0; min-height: 280px; padding: 24px 22px 18px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; background: linear-gradient(160deg, #2b2527, #121113 65%); border-color: #625b5c; box-shadow: inset 0 0 0 3px #08080980; }
.choice:hover:not(:disabled) { border-color: var(--blood); background: linear-gradient(160deg, #352225, #151112 65%); box-shadow: inset 0 0 0 3px #08080980, 0 6px 24px #0004; transform: translateY(-3px); }
.choice-icon { display: grid; place-items: center; color: var(--silver); width: 56px; height: 56px; padding: 12px; margin-bottom: 24px; border: 1px solid #625b5c; background: radial-gradient(#393638, var(--night)); }
.choice-icon svg { width: 100%; height: 100%; }
.choice-label { color: var(--danger); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; }
.choice-name { font: 500 19px/1.35 var(--display); margin-bottom: 12px; }
.choice-copy, .choice-fusion { color: var(--muted); font-size: 12px; line-height: 1.65; }
.choice-fusion { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10px; }
.choice-key { margin-top: auto; padding-top: 24px; font-size: 10px; color: var(--silver); }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 25px 0; padding-block: 20px; border-block: 1px solid var(--line); }
.result-grid .number { display: block; font-size: 25px; margin-top: 7px; }
#inline-error { font-size: 12px; line-height: 1.6; color: var(--danger); margin: 16px 0 0; overflow-wrap: anywhere; }
#resume-btn, #again-btn { width: 100%; min-height: 52px; }
#pause-new { width: 100%; border-color: transparent; margin-top: 18px; }
.menu-details { margin-top: 16px; border-block: 1px solid var(--line); }
.menu-details + .menu-details { margin-top: 0; border-top: 0; }
summary { min-height: 48px; padding: 14px 0; font-size: 12px; color: var(--silver); cursor: pointer; }
summary:hover { color: var(--ink); }
.settings { margin: 0; padding: 4px 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings label { font-size: 11px; color: var(--muted); display: grid; gap: 8px; }
.settings select { min-width: 0; min-height: 44px; background: var(--night); color: var(--ink); padding: 10px; border: 1px solid #625b5c; border-radius: 1px; }
.settings .technical { grid-column: 1 / -1; margin: 0; }
.fullscreen-choice { display: flex; gap: 9px; align-items: center; min-height: 44px; font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.fullscreen-choice input { accent-color: var(--blood); width: 18px; height: 18px; flex-shrink: 0; }
.pause-help { color: var(--muted); font-size: 12px; line-height: 1.9; margin: 0 0 18px; }
.pause-help p { margin: 0 0 12px; }
.pause-help strong { color: var(--ink); font-weight: 500; }
@keyframes menu-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
dialog[open] .menu-content { animation: menu-arrive .35s ease-out both; }
@media (max-width: 1000px) { .brand, .footer { display: none; } }
@media (max-width: 680px) {
  .topbar { top: max(17px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
  .actions { gap: 5px; }
  .actions button { width: 40px; height: 44px; padding: 9px; }
  .vitals { left: max(14px, env(safe-area-inset-left)); top: max(22px, env(safe-area-inset-top)); width: 154px; padding-left: 28px; }
  .vital-seal { width: 26px; height: 37px; }
  .vital-heading .stat-label { font-size: 8px; }
  #health-text { font-size: 10px; }
  .clock { top: max(81px, calc(env(safe-area-inset-top) + 64px)); min-width: 110px; padding: 0 8px 9px; }
  #timer { font-size: 24px; }
  .counters { right: 16px; top: max(82px, calc(env(safe-area-inset-top) + 65px)); gap: 12px; }
  .counters .stat-label { font-size: 8px; }
  .counters .number { font-size: 14px; }
  .loadout { bottom: max(23px, env(safe-area-inset-bottom)); padding: 7px; gap: 7px; }
  .level { min-width: 34px; }
  .level .number { font-size: 24px; }
  .level .stat-label { font-size: 8px; }
  .slot { width: 36px; height: 44px; }
  .slot svg { width: 24px; height: 24px; }
  .slots { gap: 4px; }
  .field-caption { top: 86px; left: 16px; max-width: 80px; line-height: 1.7; font-size: 8px; }
  .announcements { top: 144px; }
  #navigation-safe-area { inset: max(150px, calc(env(safe-area-inset-top) + 130px)) max(14px, env(safe-area-inset-right)) max(155px, calc(env(safe-area-inset-bottom) + 130px)) max(14px, env(safe-area-inset-left)); }
  #minimap { top: max(144px, calc(env(safe-area-inset-top) + 124px)); right: max(8px, env(safe-area-inset-right)); width: 164px; }
  .map-readout { margin-inline: 5%; }
  #map-status { font-size: 9px; }
  #map-target-name { font-size: 10px; }
  #map-target-distance { font-size: 9px; }
  #toast { padding: 10px 15px; font-size: 11px; }
  #interact-btn { bottom: max(132px, calc(env(safe-area-inset-bottom) + 110px)); }
  #boon { right: 50%; transform: translateX(50%); bottom: 133px; width: max-content; max-width: calc(100% - 30px); font-size: 10px; }
  dialog { padding: 25px 21px; }
  dialog.full-screen { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  dialog.full-screen .oath-seal { width: 80px; height: 88px; margin-bottom: 20px; }
  dialog.full-screen .dialog-copy { margin-bottom: 28px; }
  .choices { grid-template-columns: 1fr; }
  .choice { min-height: auto; display: grid; grid-template-columns: 32px 1fr; gap: 5px 13px; padding: 13px; }
  .choice-icon { grid-column: 1; grid-row: 1 / 5; margin: 4px 0 0; width: 34px; height: 40px; padding: 5px; }
  .choice-label, .choice-name, .choice-copy, .choice-fusion { grid-column: 2; margin: 0; }
  .choice-name { font-size: 17px; }
  .choice-fusion { margin-top: 4px; padding-top: 6px; }
  .choice-key { display: none; }
  .result-grid { gap: 8px; }
  .result-grid .stat-label { font-size: 9px; }
}
@media (max-height: 740px) {
  dialog.full-screen { padding-block: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom)); }
  dialog.full-screen .oath-seal { width: 58px; height: 64px; margin-bottom: 12px; }
  dialog.full-screen .dialog-copy { margin-bottom: 24px; }
  .controls-guide { margin-top: 16px; }
}
@media (max-width: 360px) { .intro-title { font-size: 32px; } .settings { grid-template-columns: 1fr; } }
/* Landscape phones keep the arena clear. */
@media (max-height: 500px) and (min-width: 681px) {
  .controls-guide { margin-top: 12px; }
  .loadout { bottom: max(14px, env(safe-area-inset-bottom)); padding: 5px; }
  .slot { width: 40px; height: 40px; }
  .xp-copy, .field-caption, .brand, .footer { display: none; }
  .passives { bottom: calc(100% + 5px); }
  #interact-btn { bottom: 102px; }
  dialog { padding: 25px; }
  .choice { min-height: 200px; padding: 15px; }
  .choice-icon { width: 45px; height: 45px; padding: 8px; margin-bottom: 12px; }
}
@media (max-height: 540px) { .announcements { top: 82px; gap: 8px; } #fusion-banner { padding: 8px 16px; } #fusion-symbols { display: none; } #fusion-name { font-size: 26px; } }
@media (max-height: 500px) {
  #minimap { top: max(78px, calc(env(safe-area-inset-top) + 58px)); width: 156px; }
  .map-readout { margin-inline: 4%; }
  #map-status, #map-target-distance { font-size: 9px; }
  #map-target-name { font-size: 10px; }
  #navigation-safe-area { top: 82px; bottom: 100px; }
}
@media (max-width: 360px) and (min-height: 501px) { #minimap { top: 132px; width: 140px; } }
@media (pointer: coarse) { .touch-copy { display: inline; } .keyboard-copy { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* The camp: roster, hero sheet and nights. Full-screen menus scroll when needed. */
dialog.full-screen { overflow-y: auto; }
dialog.full-screen:is([data-mode="intro"], [data-mode="pick"], [data-mode="achievements"]) .menu-content { width: min(1180px, 100%); }
dialog.full-screen:is([data-mode="intro"], [data-mode="pick"], [data-mode="achievements"]) .oath-seal { width: 40px; height: 44px; margin-bottom: 6px; }
dialog.full-screen:is([data-mode="intro"], [data-mode="pick"], [data-mode="achievements"]) .intro-title { font-size: clamp(30px, 4vw, 46px); margin-bottom: 4px; }
dialog.full-screen:is([data-mode="intro"], [data-mode="pick"], [data-mode="achievements"]) .dialog-copy { margin-bottom: 16px; }
dialog.full-screen:is([data-mode="intro"], [data-mode="pick"], [data-mode="achievements"]) { padding-top: max(20px, env(safe-area-inset-top)); }
#user-chip { position: fixed; top: max(18px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 2; display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; font-size: 12px; color: var(--silver); background: #080809cc; border: 1px solid var(--line); }
#user-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid #625b5c; }
#user-chip button { min-height: 34px; padding: 6px 12px; font-size: 11px; border-color: transparent; }
.section-label { margin: 0 0 12px; color: var(--muted); font: 500 11px/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; text-align: left; }
.section-label span { color: var(--silver); letter-spacing: .08em; margin-left: 8px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; }
.camp { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); grid-template-areas: "roster detail" "nights detail"; grid-template-rows: auto 1fr; gap: 22px 26px; margin-bottom: 24px; text-align: left; }
.camp .roster { grid-area: roster; min-width: 0; }
.camp .nights { grid-area: nights; min-width: 0; align-self: start; }
.camp .hero-detail, #pick-detail { grid-area: detail; min-width: 0; }
.camp-pick { grid-template-areas: "roster detail"; }
.camp-pick .roster-grid { grid-area: roster; }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px; }
.hero-tile { --hero-color: #625b5c; --hero-glow: #2a1416; position: relative; min-width: 0; min-height: 0; padding: 6px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--hero-glow) 22%, transparent), transparent 70%), linear-gradient(#1b1819, #0c0b0c); border: 1px solid var(--line); overflow: hidden; }
.hero-tile canvas { position: static; width: 100%; height: auto; aspect-ratio: 96 / 120; touch-action: auto; }
.hero-tile:hover:not(:disabled) { border-color: color-mix(in srgb, var(--hero-color) 60%, var(--line)); background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--hero-glow) 35%, transparent), transparent 70%), linear-gradient(#211c1d, #0c0b0c); }
.hero-tile[aria-selected="true"] { border-color: var(--hero-color); box-shadow: 0 0 22px color-mix(in srgb, var(--hero-glow) 40%, transparent), inset 0 -2px var(--hero-color); }
.hero-tile.locked { background: linear-gradient(#131112, #090809); }
.hero-tile.locked[aria-selected="true"] { border-color: #6b3a3d; box-shadow: inset 0 -2px #6b3a3d; }
.hero-name { font-size: 11px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hero-tile.locked .hero-name { color: #6c6365; letter-spacing: .12em; text-transform: uppercase; font-size: 9px; }
.hero-glyph { position: absolute; top: 5px; left: 6px; font: 700 11px "Cascadia Mono", Consolas, monospace; font-variant-ligatures: none; color: var(--hero-color); text-shadow: 0 0 6px var(--hero-glow); }
.hero-lock { position: absolute; top: 5px; right: 6px; width: 14px; height: 14px; color: #6b5a5c; }
.hero-lock svg, .map-lock svg { width: 100%; height: 100%; display: block; }
.hero-own { position: absolute; top: 4px; right: 5px; padding: 1px 5px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--night); background: var(--hero-color); }
.hero-sheet { --hero-color: #625b5c; --hero-glow: #2a1416; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 16px; background: radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--hero-glow) 20%, transparent), transparent 60%), linear-gradient(160deg, #211b1d, #0e0d0e 70%); border: 1px solid var(--line); border-top: 2px solid var(--hero-color); }
.hero-sheet canvas { position: static; width: 130px; height: auto; aspect-ratio: 176 / 220; align-self: start; touch-action: auto; }
.hero-title { margin: 4px 0 2px; font: 500 26px/1.15 var(--display); color: var(--ink); }
.hero-epithet { margin: 0 0 16px; color: var(--hero-color); font-size: 12px; letter-spacing: .08em; }
.hero-sheet.locked .hero-epithet { color: var(--muted); }
.hero-weapon { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-block: 1px solid var(--line); }
.hero-weapon-icon { width: 38px; height: 38px; padding: 6px; border: 1px solid #625b5c; background: radial-gradient(#393638, var(--night)); color: var(--hero-color); }
.hero-weapon-icon svg { width: 100%; height: 100%; display: block; }
.hero-weapon strong, .hero-requirement strong { display: block; margin: 3px 0 5px; font: 500 15px/1.3 var(--display); }
.hero-weapon p, .hero-requirement p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.hero-perk { margin: 12px 0 4px; color: var(--silver); font-size: 12px; }
.hero-perk::before { content: "◆"; color: var(--hero-color); margin-right: 8px; font-size: 9px; }
.hero-record, .hero-own-note { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.hero-own-note { color: var(--hero-color); }
.hero-requirement { padding: 12px 0; border-top: 1px solid var(--line); }
.hero-requirement small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.progress { display: block; height: 6px; margin-top: 10px; background: var(--night); border: 1px solid #3c3537; overflow: hidden; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, #631a20, #bb4146); }
.map-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.map-card { --map-a: #2b2527; --map-b: #0e0d0e; position: relative; min-width: 0; min-height: 118px; padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: linear-gradient(170deg, var(--map-a), var(--map-b) 75%); border: 1px solid var(--line); }
.map-card[data-map="grounds"] { --map-a: #2a2830; --map-b: #0d0c10; }
.map-card[data-map="marsh"] { --map-a: #1f2b1d; --map-b: #0b0f0a; }
.map-card[data-map="foundry"] { --map-a: #3a1d14; --map-b: #110908; }
.map-card[data-map="cloister"] { --map-a: #22303a; --map-b: #0b0f13; }
.map-card[aria-checked="true"] { border-color: var(--danger); box-shadow: inset 0 -2px var(--blood), 0 0 18px #a72e3226; }
.map-card:disabled { opacity: 1; cursor: not-allowed; filter: grayscale(.85) brightness(.65); }
.map-name { font: 500 14px/1.25 var(--display); color: var(--ink); }
.map-blurb { color: var(--muted); font-size: 11px; line-height: 1.5; }
.map-record { margin-top: auto; color: var(--silver); font-size: 10px; letter-spacing: .06em; }
.map-danger { display: flex; gap: 3px; }
.map-danger i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid #6b5a5c; }
.map-danger i.on { background: var(--blood); border-color: var(--danger); }
.map-lock { position: absolute; top: 12px; right: 12px; width: 15px; height: 15px; color: #8c7375; }
#signin-panel { display: grid; justify-items: center; gap: 16px; }
.signin-note { margin: 0; max-width: 420px; color: var(--silver); font-size: 13px; line-height: 1.7; }
a.button { display: inline-grid; place-items: center; min-height: 52px; padding: 12px 34px; text-decoration: none; }
a.button.primary { background: linear-gradient(#8d2529, #591619); color: var(--ink); border: 1px solid #b4484c; font: 500 15px/1.4 var(--display); letter-spacing: .12em; box-shadow: inset 0 0 0 3px #08080955, 0 6px 24px #0006; }
a.button.primary:hover { background: linear-gradient(#a72e32, #721b20); border-color: var(--danger); }
#signin-error { margin: 0; color: var(--danger); font-size: 12px; }
#pick-confirm { width: min(360px, 100%); min-height: 54px; }
.pick-hint { margin: 0; padding: 40px 24px; color: var(--muted); font-size: 13px; text-align: center; border: 1px dashed var(--line); }
.hero-detail { display: grid; align-content: start; gap: 14px; }
.next-goals { padding: 14px 16px 6px; border: 1px solid var(--line); background: #0d0c0dcc; }
.goal { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #2c2729; }
.goal-text strong { font: 500 13px/1.3 var(--display); }
.goal-copy { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.goal .progress { margin-top: 6px; }
.pick-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.ledger { text-align: left; }
.ledger-summary { margin: 0 0 18px; color: var(--silver); font-size: 12px; text-align: center; letter-spacing: .08em; }
.ledger-tier { margin-bottom: 22px; }
.ledger-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(120px, 190px); gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid #2c2729; background: linear-gradient(90deg, #171415, #0c0b0c); }
.ledger-row + .ledger-row { border-top: 0; }
.ledger-row.done { border-left: 2px solid var(--blood); background: linear-gradient(90deg, #211415, #0c0b0c); }
.ledger-reward { width: 40px; height: 50px; display: grid; place-items: center; }
.ledger-reward canvas { position: static; width: 40px; height: 50px; touch-action: auto; }
.ledger-map { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--silver); border: 1px solid #625b5c; padding: 3px 5px; }
.ledger-text strong { font: 500 14px/1.3 var(--display); }
.ledger-text p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ledger-unlocks { display: block; margin-top: 4px; color: var(--danger); font-size: 10px; letter-spacing: .05em; }
.ledger-status { text-align: right; }
.ledger-status small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.ledger-done { color: var(--danger); font: 500 11px var(--display); letter-spacing: .15em; text-transform: uppercase; }
#achievements-close { display: block; width: min(360px, 100%); margin: 8px auto 0; }
#unlock-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 0 18px; }
.reveal-hero { --hero-color: var(--silver); --hero-glow: #2a1416; display: grid; justify-items: center; gap: 6px; width: 170px; padding: 12px; border: 1px solid var(--hero-color); background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--hero-glow) 35%, transparent), transparent 70%), #0d0c0d; animation: reveal-arrive .6s ease-out both; }
.reveal-frame { position: relative; width: 120px; height: 150px; }
.reveal-frame canvas { position: absolute; inset: 0; width: 120px; height: 150px; touch-action: auto; }
.reveal-shadow { transition: opacity 1.4s ease-in; }
.reveal-shadow.gone { opacity: 0; }
.reveal-hero strong { font: 500 14px var(--display); color: var(--hero-color); }
.reveal-hero small { color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }
.reveal-map, .reveal-achievement { width: 100%; margin: 0; color: var(--silver); font-size: 12px; }
.reveal-map { color: var(--danger); font-family: var(--display); letter-spacing: .08em; }
#record-status { min-height: 1.4em; margin: 0 0 16px; color: var(--muted); font-size: 12px; }
@keyframes reveal-arrive { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
#boss-bars { position: absolute; z-index: 3; top: max(120px, calc(env(safe-area-inset-top) + 98px)); left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 40px)); display: grid; gap: 8px; pointer-events: none; }
.boss-bar { display: grid; gap: 4px; }
.boss-bar header { display: flex; justify-content: space-between; align-items: baseline; font: 500 12px/1.2 var(--display); letter-spacing: .1em; color: var(--ink); text-shadow: 0 2px 6px #000; }
.boss-bar header small { color: var(--danger); font: 10px "Segoe UI", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.boss-track { height: 8px; padding: 1px; border: 1px solid #7a3a3e; background: #080809e6; }
.boss-fill { height: 100%; background: linear-gradient(90deg, #7a1c22, #d0484f); transition: width .15s; }
.boss-bar[data-enraged="true"] .boss-fill { background: linear-gradient(90deg, #a0161d, #ff5a4f); box-shadow: 0 0 10px #ff4a4a88; }
@media (max-width: 1000px) {
  .camp { grid-template-columns: 1fr; grid-template-areas: "roster" "detail" "nights"; }
  .camp-pick { grid-template-areas: "roster" "detail"; }
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .roster-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 5px; }
  .hero-sheet { grid-template-columns: 96px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .hero-sheet canvas { width: 96px; }
  .hero-title { font-size: 21px; }
  .map-card { min-height: 112px; padding: 11px 10px; }
  .ledger-row { grid-template-columns: 40px minmax(0, 1fr); }
  .ledger-status { grid-column: 2; text-align: left; }
  #user-chip { position: static; justify-content: center; margin: 0 auto 12px; width: max-content; max-width: 100%; }
  #boss-bars { top: 118px; }
}
@media (max-height: 500px) and (min-width: 681px) {
  dialog.full-screen .oath-seal, dialog.full-screen .eyebrow { display: none; }
  dialog.full-screen .dialog-copy { margin-bottom: 12px; }
}