@font-face { font-family: 'Wizard Display'; src: url(fonts/wizard-display.ttf?v=ZPVP1nKmVar_) format('truetype'); font-display: swap }
@font-face { font-family: 'Wizard Small'; src: url(fonts/wizard-small.ttf?v=ZPVP1nKmVar_) format('truetype'); font-display: swap }

:root {
  color-scheme: dark;
  --night: #111725;
  --deep: #0b0f19;
  --drop: #070a12;
  --stone: #151b2a;
  --stone-up: #1c2840;
  --lip: #2f466c;
  --rim: #44536a;
  --ice: #bfd7e8;
  --ice-dim: #84afd2;
  --text: #e1ecf4;
  --muted: #a5b8cc;
  --gold: #ffe066;
  --gold-hi: #fff1b0;
  --gold-mid: #f6b840;
  --gold-low: #ee8a2a;
  --gold-ink: #16111f;
  --bad: #ffab9c;
  --display: 'Wizard Display', ui-monospace, monospace;
  --small: 'Wizard Small', ui-monospace, monospace;
  --body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --stage-w: 1024px;
  --stage-h: 576px;
  --frame-w: 1144px;
  --px: 4px;
  font-family: var(--body);
  font-synthesis: none;
}

* { box-sizing: border-box }
html { background: var(--night) }
body { margin: 0; min-height: 100vh; color: var(--text); font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; image-rendering: pixelated; background: linear-gradient(90deg, #11172500 0, #111725e0 calc(50% - 620px), #111725f5 calc(50% - 540px), #111725f5 calc(50% + 540px), #111725e0 calc(50% + 620px), #11172500 100%) fixed, url(assets/backdrop.png?v=ZPVP1nKmVar_) center bottom / var(--bd-w, 1792px) var(--bd-h, 1008px) no-repeat fixed, var(--night) }
#ambient { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; pointer-events: none; z-index: 0 }
button, input { font: inherit }
button, a, input { -webkit-tap-highlight-color: transparent }
button { cursor: pointer }
button:disabled { cursor: not-allowed; opacity: .45 }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }
[hidden] { display: none !important }
h1, h2, h3, p { margin: 0 }
p { color: var(--muted) }
img { image-rendering: pixelated }
kbd { margin: 0 3px; font-family: var(--small); font-size: 14px; line-height: 1; color: var(--ice); background: var(--stone); padding: 4px 6px 2px; box-shadow: inset 0 -2px 0 var(--deep), 0 0 0 2px var(--lip) }

.app { max-width: 1180px; margin: auto; padding: 24px 32px 32px; position: relative; z-index: 1 }

.masthead { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: var(--frame-w); max-width: calc(100% - 32px); margin: 0 auto; padding: 16px 0 14px }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none }
.brand img { width: 48px; height: 48px }
.wordmark { font-family: var(--display); font-size: 18px; line-height: 18px; text-transform: uppercase; color: var(--text) }
.wordmark b { display: block; font-weight: 400; color: var(--gold) }
.edition { font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--muted) }
.edition i { font-style: normal; color: var(--lip); padding: 0 10px }
.edition b { font-weight: 400; color: var(--gold) }
.tools { display: flex; gap: 10px }
.tool { font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--ice); background: var(--stone); border: 0; min-height: 44px; padding: 0 14px; box-shadow: inset 2px 2px 0 var(--stone-up), inset -2px -2px 0 var(--deep), 0 0 0 2px var(--lip) }
a.tool { display: inline-flex; align-items: center; text-decoration: none }
.tool { white-space: nowrap }
.town-link { color: var(--gold) }
.town-link .long { display: inline }
@media (max-width: 600px) { .town-link .long, .hud-town .long, .scene-town .long { display: none } .scene-town { padding: 6px 12px 10px } .cave-done .hud-town { display: none } .tools { gap: 6px } .tool { padding: 0 10px } }
.tool:hover:not(:disabled) { color: var(--gold) }
.tool[aria-pressed="true"] { color: var(--gold) }


.theater { position: relative; z-index: 1; display: flex; justify-content: center }
.game-frame { position: relative; overflow-x: clip; width: var(--frame-w); background: var(--stone); box-shadow: 0 0 0 2px var(--deep), 0 10px 0 2px var(--drop) }
.frame-art { position: absolute; top: 0; left: calc(var(--px) * -12); width: calc(var(--px) * 280); height: var(--stage-h); image-rendering: pixelated; pointer-events: none; z-index: 1 }

#stage { position: relative; width: var(--stage-w); height: var(--stage-h); margin: 0 auto; isolation: isolate; background: var(--deep) }
#game { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none }

.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 28px; pointer-events: none; z-index: 3 }
.panel { pointer-events: auto; width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px; text-align: center; background: var(--stone); box-shadow: inset 2px 2px 0 var(--stone-up), inset -2px -2px 0 var(--deep), 0 0 0 2px var(--rim), 0 0 0 4px var(--deep), 6px 6px 0 4px #070a12cc }
.panel p { font-size: 15px }
.panel h1, .panel h2, #guide h2, .coven h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--text) }
.panel h2 { font-size: 18px; line-height: 27px }
.eyebrow { font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--gold) }
.danger { color: var(--bad) }
.cause { font-family: var(--body); font-size: 17px !important; font-weight: 600; line-height: 1.4; color: var(--text) !important }

.title-overlay { justify-content: flex-start; padding-left: 5% }
.title-panel { align-items: flex-start; text-align: left; max-width: 540px; gap: 10px; padding: 18px 24px }
.title-panel h1 { font-size: 36px; line-height: 45px; color: var(--gold); text-shadow: 0 4px 0 var(--gold-low), 4px 0 0 var(--gold-ink), -4px 0 0 var(--gold-ink), 0 -4px 0 var(--gold-ink), 0 8px 0 var(--gold-ink) }
.rules { display: flex; gap: 24px; width: 100%; padding: 14px 0; box-shadow: 0 -2px 0 var(--deep), 0 2px 0 var(--deep); font-size: 14px; color: var(--muted) }
.rules b { display: block; font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 32px; color: var(--gold) }

.primary { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 6px 22px 10px; border: 0; background: var(--gold); color: var(--gold-ink); font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -6px 0 var(--gold-mid), inset 0 -8px 0 var(--gold-low), 0 0 0 2px var(--gold-ink), 0 6px 0 2px var(--drop) }
.primary:hover:not(:disabled) { background: var(--gold-hi) }
.primary:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -6px 0 var(--gold-mid), inset 0 -8px 0 var(--gold-low), 0 0 0 2px var(--gold-ink), 0 2px 0 2px var(--drop) }
.title-panel .primary { width: 100% }
.small { font-size: 14px !important; line-height: 1.5 }
.small b { color: var(--text) }
.err { color: var(--bad) !important; font-size: 14px !important; overflow-wrap: anywhere }
.err:empty { display: none }
.rest-clock b { display: block; font-family: var(--display); font-weight: 400; font-size: 45px; line-height: 54px; color: var(--gold) }
.rest-clock span { font-family: var(--small); font-size: 14px; text-transform: uppercase }
.text-button { border: 0; background: none; color: var(--muted); font-size: 14px; padding: 8px 0; min-height: 44px }
.text-button:hover { color: var(--gold) }
.skip-rest { color: var(--ice-dim); text-decoration: underline; text-underline-offset: 3px }

.parchment { position: relative; gap: 9px; align-items: stretch; text-align: left; padding: 26px 30px; background: #e8d8af; color: #3b2c18; box-shadow: inset 2px 2px 0 #f6ead0, inset -2px -2px 0 #c4ab78, 0 0 0 2px #7a5a2e, 0 0 0 4px var(--gold-ink), 6px 6px 0 4px #070a12cc }
.parchment::before, .parchment::after { content: ''; position: absolute; left: -10px; right: -10px; height: 10px; background: #a9783e; box-shadow: inset 0 2px 0 #e8c27a, inset 0 -2px 0 #5a3a16, 0 0 0 2px var(--gold-ink) }
.parchment::before { top: -10px }
.parchment::after { bottom: -10px }
.parchment p, .parchment .eyebrow { color: #46351c }
.parchment h2 { text-align: center; color: #3b2c18 }
.parchment .eyebrow { text-align: center }
.parchment label { font-family: var(--small); font-size: 14px; text-transform: uppercase; margin-top: 6px; color: #3b2c18 }
.parchment label span { color: #6c5233 }
.parchment input { width: 100%; min-height: 44px; padding: 9px 10px; border: 0; border-radius: 0; background: #f9eed3; color: #2c2112; font-size: 15px; box-shadow: inset 2px 2px 0 #c4ab78, 0 0 0 2px #7a5a2e }
.parchment input:focus-visible { outline-offset: 2px }
.parchment .err { color: #8f2a1f !important }
.parchment #address-state { color: #5c452a }
.parchment #address-state[data-ok="0"] { color: #8f2a1f }
.parchment #address-state[data-ok="1"] { color: #2f5530 }
.parchment .privacy { text-align: center; font-size: 14px !important }
.parchment .primary { margin-top: 6px }
#scroll .parchment { max-width: 820px; padding: 22px 28px }
.scroll-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-items: start }
.scroll-fields { display: flex; flex-direction: column; gap: 9px }
.rites { display: flex; flex-direction: column; gap: 8px }
.rites-title { margin: 6px 0 0 !important; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: #3b2c18 !important }
.rite { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; background: #f3e6c4; box-shadow: inset 2px 2px 0 #d6c08e, 0 0 0 2px #7a5a2e }
.rite i { display: block; width: 18px; height: 26px; background: url(assets/ui-pip.png?v=ZPVP1nKmVar_) 0 0 / 18px 26px; image-rendering: pixelated }
.rite[data-state="done"] i { background-image: url(assets/ui-pip-on.png?v=ZPVP1nKmVar_) }
.rite b { display: block; font-family: var(--body); font-weight: 700; font-size: 16px; line-height: 1.3; color: #2c2112 }
.rite span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; color: #46351c }
.rite[data-state="waiting"] span { color: #6b4a1f }
.rite[data-state="waiting"][data-blink="1"] i { background-image: url(assets/ui-pip-on.png?v=ZPVP1nKmVar_) }
.rite[data-state="done"] span { color: #2f5530 }
.rite button { min-width: 76px; min-height: 36px; padding: 5px 10px 3px; border: 0; background: #3b2c18; color: #f9eed3; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; box-shadow: inset 0 -3px 0 #1d140a, 0 0 0 2px var(--gold-ink) }
.rite button:hover:not(:disabled) { background: #5a4220; color: var(--gold) }
.rite[data-state="done"] button { background: #2f5530; color: #e7f5d6; opacity: 1; box-shadow: inset 0 -3px 0 #1d3a1e, 0 0 0 2px var(--gold-ink) }
#cast.locked { opacity: .55 }

.address-receipt { font-family: ui-monospace, monospace; font-size: 14px !important; color: var(--ice) !important; word-break: break-all }
#scene-caption { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; background: var(--stone); color: var(--ice); padding: 8px 12px 6px; box-shadow: 0 0 0 2px var(--rim), 0 0 0 4px var(--deep); pointer-events: none; z-index: 2 }
#scene-caption:empty { display: none }
#skip-scene { position: absolute; right: 12px; bottom: 20px; z-index: 3; min-height: 36px; padding: 6px 12px 4px; border: 0; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--ice); background: var(--stone); box-shadow: 0 0 0 2px var(--rim), 0 0 0 4px var(--deep); cursor: pointer }
#skip-scene[hidden] { display: none }
#skip-scene:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }

#choices { padding: 14px 16px; background: var(--stone); box-shadow: inset 0 2px 0 var(--deep) }
.question-row { display: flex; gap: 18px; align-items: baseline; margin-bottom: 10px }
.question-row .eyebrow { white-space: nowrap; color: var(--muted) }
.question-row h2 { font-family: var(--body); font-weight: 600; font-size: 20px; line-height: 1.35; color: var(--text) }
.answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.answer { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; text-align: left; border: 0; background: #10161f; color: var(--text); font-family: var(--body); font-size: 16px; font-weight: 500; line-height: 1.35; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.answer:hover, .answer[aria-pressed="true"] { color: var(--gold); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.answer kbd { color: inherit; flex-shrink: 0 }
.choice-hint { margin-top: 14px !important; font-size: 14px }
.lore { margin-top: 12px }
.lore-missing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px }
.lore-missing p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text) }
.lore-missing .town-back { color: var(--gold) }
.lore #lore-toggle { padding: 9px 12px 7px; font-family: var(--small); font-size: 14px; line-height: 16px; text-align: left; text-transform: uppercase; color: var(--gold); background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px var(--gold-low) }
.lore-page { margin-top: 10px; padding: 12px 14px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.lore-page p { margin: 0 0 8px; font-size: 16px; line-height: 1.55; color: var(--text) }
.lore-page p:last-child { margin-bottom: 0 }
.wl-state { width: 100%; margin: 0; padding: 10px 12px; font-size: 14px !important; line-height: 1.5; color: var(--text) !important; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.need { margin: 0; font-size: 14px !important; line-height: 1.5; color: var(--muted) }
.rites-note { margin: 0 0 8px; font-size: 14px !important; line-height: 1.45; color: #46351c !important }
.receipt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; width: 100%; margin: 4px 0; padding: 10px 12px; text-align: left; font-size: 14px; line-height: 1.45; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.receipt[hidden] { display: none }
.receipt dt { padding-top: 2px; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--gold) }
.receipt dd { margin: 0; color: var(--text); overflow-wrap: anywhere }
.pages-state { width: 100%; margin: 0; padding: 10px 12px; font-size: 15px !important; line-height: 1.45; color: var(--text) !important; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold-mid) }
.pages-state b { color: var(--gold) }
.wl-state[data-tone="closed"] { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold-mid) }
.death-answer { font-family: var(--small); font-size: 14px !important; line-height: 21px; text-transform: uppercase; color: var(--gold) !important }

.hud { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 16px; padding: 5px 18px; background: var(--stone); box-shadow: inset 0 2px 0 var(--deep), inset 0 -2px 0 var(--deep); font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--muted) }
.hud-scene { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hud-town { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 2px 12px 0 10px; color: var(--gold); text-decoration: none; white-space: nowrap; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.hud-town::before { content: ''; width: 6px; height: 6px; margin-top: -2px; box-shadow: inset 2px 2px 0 currentColor; transform: rotate(-45deg) }
.hud-town:hover, .hud-town:focus-visible { color: var(--gold-hi); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.town-back { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-family: var(--small); text-transform: uppercase; color: var(--gold) }
#scene-label { color: var(--ice) }
#journey-note { display: none }
#progress-label { justify-self: end; text-align: right }
#progress { display: flex; gap: 6px }
#progress i { display: block; width: 18px; height: 26px; background: url(assets/ui-pip.png?v=ZPVP1nKmVar_) 0 0 / 18px 26px; image-rendering: pixelated }
#progress i.filled { background-image: url(assets/ui-pip-on.png?v=ZPVP1nKmVar_) }

.below { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 22px auto 0 }
.below p { font-size: 14px }
.below i { font-style: normal; color: var(--lip); margin: 0 6px }
.below .touch { display: none }
.below .text-button { color: var(--gold); font-family: var(--small); text-transform: uppercase }

#guide { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; margin: 24px auto 0; padding: 28px 0 8px; box-shadow: 0 -2px 0 var(--stone-up) }
#guide h2 { font-size: 27px; line-height: 36px; margin: 10px 0 14px; color: var(--gold) }
#guide h3 { font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--ice); margin-bottom: 12px }
#guide p { font-size: 14px; margin-bottom: 12px }
#guide .lead p { font-size: 16px; color: var(--text) }

.coven { margin: 44px auto 0 }
.coven-head { margin-bottom: 24px }
.coven h2 { font-size: 27px; line-height: 36px; color: var(--gold) }
.coven-head p { font-size: 14px; margin-top: 8px }
.coven-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 14px; list-style: none; margin: 0; padding: 0 }
.coven-grid li { display: flex; flex-direction: column; align-items: center; gap: 10px }
.portrait { display: block; width: 80px; height: 80px; background: url(assets/gallery.png?v=ZPVP1nKmVar_) calc(var(--i) * -80px) 0 / 960px 80px no-repeat; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--rim), 0 0 0 6px var(--deep), 4px 4px 0 6px var(--drop) }
.coven-grid b { font-family: var(--small); font-weight: 400; font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--muted); text-align: center }

footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 18px; box-shadow: 0 -2px 0 var(--stone-up); font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--muted) }
.motion { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer }
.motion input { width: 18px; height: 18px; accent-color: var(--gold) }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }

@media (hover: none) {
  .below .keys { display: none }
  .below .touch { display: block }
  .answer kbd { display: none }
  .answer:hover:not([aria-pressed="true"]) { color: var(--ice); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
}

@media (max-width: 900px) {
  .app { padding: 18px 20px 28px }
  .edition { display: none }
  .title-panel { gap: 10px; padding: 20px 22px; max-width: 360px }
  .title-panel h1 { font-size: 27px; line-height: 36px }
  .rules { padding: 10px 0 }
  .rules b { font-size: 18px; line-height: 24px }
  #guide { grid-template-columns: 1fr; gap: 6px }
  .coven-grid { grid-template-columns: repeat(4, 1fr) }
}

@media (max-width: 700px) {
  .app { padding: 14px 12px 24px }
  .masthead { gap: 10px; max-width: calc(100% - 24px); padding: 12px 0 }
  .brand { gap: 10px }
  .brand img { width: 40px; height: 40px }
  .tool { padding: 0 10px }
  .game-frame { box-shadow: 0 2px 0 var(--deep), 0 -2px 0 var(--deep) }
  .frame-art { display: none }
  .hud { padding: 10px 12px }
  #progress-label, #journey-note, .hud-scene { display: none }
  .hud { grid-template-columns: 1fr; justify-items: center; gap: 10px }
  #stage { height: auto }
  .overlay { position: relative; inset: auto; padding: 0 }
  .panel, .title-panel, #done .panel { max-width: none; align-items: center; text-align: center; padding: 22px 18px; box-shadow: inset 0 2px 0 var(--deep) }
  .title-panel h1 { font-size: 27px; line-height: 36px }
  .title-panel .rules { justify-content: center; gap: 30px }
  .title-panel .primary { max-width: 340px }
  .parchment { margin: 12px 10px 14px; width: auto }
  .parchment input { font-size: 16px }
  .scroll-grid { grid-template-columns: 1fr; gap: 9px }
  #scroll .parchment { padding: 20px 14px }
  .rite { text-align: left }
  .rite button { min-width: 64px }
  .parchment label { text-align: left }
  #scene-caption { top: 10px; bottom: auto; max-width: 92%; white-space: normal; text-align: center }
  #choices { padding: 14px 12px }
  .question-row { display: block }
  .question-row h2 { margin-top: 8px }
  .answers { grid-template-columns: 1fr; gap: 12px }
  .answer { min-height: 50px }
  .choice-hint { text-align: center }
  #progress { gap: 4px }
  #progress i { width: 18px; height: 26px }
  .below { flex-direction: column; gap: 6px; text-align: center }
  .coven-grid { grid-template-columns: repeat(3, 1fr) }
  footer { flex-direction: column; text-align: center; gap: 4px }
}

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

#stage[data-mode="done"] { height: auto }
.scene-town { position: absolute; z-index: 4; gap: 0; right: calc(var(--px) * 22); top: calc(var(--stage-h) - var(--px) * 10 - 52px); white-space: nowrap }
.scene-town[hidden] { display: none }
@media (max-width: 600px) { .scene-town { right: calc(var(--px) * 8) } }
.cave-done .town-link { display: none }
.cave-done .hud-town { visibility: hidden }
#done { position: relative; inset: auto; padding: 0 }
#done .panel { max-width: none; padding: 22px; box-shadow: inset 0 2px 0 var(--deep) }
#done .panel p { max-width: 560px }
a.primary { text-decoration: none }
#done .primary { width: 100%; margin-top: 6px }
#done .share-sub { background: transparent; color: var(--gold-hi); box-shadow: inset 0 0 0 2px var(--gold-mid) }