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

:root {
  color-scheme: dark;
  --night: #0b0f19;
  --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;
  --good: #b8f0c0;
  --display: 'Wizard Display', ui-monospace, monospace;
  --small: 'Wizard Small', ui-monospace, monospace;
  --body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --slab: 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;
  font-family: var(--body);
  font-synthesis: none;
}

* { box-sizing: border-box }
html, body { height: 100% }
html { background: var(--night) }
body { margin: 0; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; color: var(--text); font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; background: var(--night) }
button, input { font: inherit }
button, a, input { -webkit-tap-highlight-color: transparent }
button { cursor: pointer }
button:disabled { cursor: not-allowed }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }
[hidden] { display: none !important }
h1, h2, h3, p { margin: 0 }
p { color: var(--muted) }
kbd { display: inline-block; margin: 0 2px; 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) }
canvas { image-rendering: pixelated; image-rendering: crisp-edges }
.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 }

.bar { flex: none; position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; background: var(--stone); box-shadow: inset 0 -2px 0 var(--deep), 0 2px 0 var(--stone-up) }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none }
.brand img { width: 40px; height: 40px; image-rendering: pixelated }
.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, .foot i, .me-text i { font-style: normal; color: var(--lip); padding: 0 8px }
.edition b { font-weight: 400; color: var(--gold) }
.tools { display: flex; gap: 10px }
.tool { white-space: nowrap; 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) }
.tool:hover { color: var(--gold) }
.tool[aria-pressed="true"] { color: var(--gold); box-shadow: inset 2px 2px 0 var(--stone-up), inset -2px -2px 0 var(--deep), 0 0 0 2px var(--gold-low) }

.town { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #070a12 }
#world { position: absolute; left: 0; top: 0; display: block; outline: none; cursor: pointer; touch-action: none }
#world:focus-visible { outline: none }

.place { position: absolute; top: 18px; left: 50%; z-index: 2; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; white-space: nowrap; font-family: var(--display); font-size: 27px; line-height: 36px; text-transform: uppercase; color: var(--gold); text-shadow: 0 3px 0 var(--gold-low), 3px 0 0 var(--gold-ink), -3px 0 0 var(--gold-ink), 0 -3px 0 var(--gold-ink), 0 6px 0 var(--gold-ink); transition: opacity .5s, transform .5s }
.place.show { opacity: 1; transform: translate(-50%, 0) }

.tool-short { display: none }
.minimap { position: absolute; top: 14px; right: 14px; z-index: 2; width: 176px; height: auto; aspect-ratio: 1024 / 1440; background: var(--deep); box-shadow: 0 0 0 2px var(--rim), 0 0 0 4px var(--deep), 4px 4px 0 4px #070a12cc; cursor: crosshair; transition: opacity .2s }
.mini-fold { display: none }
.town.mini-off .minimap { display: none }
.minimap:hover { box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px var(--deep), 4px 4px 0 4px #070a12cc }
.quest { position: absolute; top: 14px; left: 14px; z-index: 3; width: 328px; background: var(--stone); box-shadow: var(--slab) }
.quest-goal { padding: 10px 12px 12px }
.quest-kicker { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--gold) }
.quest-kicker > span:first-child { flex: 1 }
.quest-kicker b { font-weight: 400; color: var(--ice) }
.quest-seals { display: flex; gap: 3px }
.quest-seals i { width: 6px; height: 8px; background: #3c3a55; box-shadow: 0 0 0 1px var(--deep) }
.quest-seals i.lit { background: var(--gold); box-shadow: 0 0 0 1px var(--gold-ink), 0 0 6px 1px #ffe06688 }
.quest-text { margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: var(--text) }
.quest-pages { margin: 8px 0 0; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--gold) }
.quest.folded .quest-pages { display: none }
.quest-fall { margin: 8px 0 0; padding: 6px 8px; font-size: 14px; line-height: 1.4; color: var(--bad); background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px #6b3a3a }
.quest-actions { display: flex; gap: 8px; margin-top: 10px }
.quest-actions button { flex: 1; min-height: 36px; padding: 4px 8px 2px; border: 0; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--ice); background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.quest-actions .quest-go { color: var(--gold-ink); background: var(--gold); box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -4px 0 var(--gold-mid), 0 0 0 2px var(--gold-ink) }
.quest-actions button:hover, .quest-actions button:focus-visible { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.quest-actions .quest-go:hover, .quest-actions .quest-go:focus-visible { background: var(--gold-hi); box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -4px 0 var(--gold-mid), 0 0 0 2px var(--gold) }
.quest.finished .quest-text { color: var(--good) }
.quest-fold { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -11px -10px -11px -2px; padding: 0; border: 0; color: var(--ice); background: none }
.quest-fold i { width: 8px; height: 8px; box-shadow: inset -2px -2px 0 currentColor; transform: rotate(-135deg) translate(-1px, -1px) }
.quest.folded .quest-fold i { transform: rotate(45deg) translate(-2px, -2px) }
.quest-fold:hover, .quest-fold:focus-visible { color: var(--gold) }
.quest-fold:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px }
.quest-short { display: none; margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--text) }
.quest.folded .quest-goal { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center }
.quest.folded .quest-kicker { grid-column: 1 / -1 }
.quest.folded .quest-short { display: block; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.quest.folded .quest-actions { margin-top: 8px }
.quest.folded .quest-actions .quest-journal { display: none }
.quest.folded .quest-actions .quest-go { flex: none; min-width: 56px; padding: 4px 12px 2px }
.go-short { display: none }
.quest.folded .go-long { display: none }
.quest.folded .go-short { display: inline }
.quest.folded #quest-title { display: none }
.quest.folded .quest-kicker b { flex: 1 }
.quest.folded .quest-text { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.quest.folded .quest-fall { display: none }
.quest.optional .quest-kicker #quest-title::after { content: ' · optional'; color: var(--muted) }
.quest.optional .quest-kicker b { display: none }
.quest.inside .tour { display: none }
.tour { box-shadow: 0 -2px 0 var(--deep) }
.tour-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px 6px; border: 0; text-align: left; color: var(--gold); background: none; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase }
.tour-head span { flex: 1 }
.tour-head b { font-weight: 400; color: var(--ice) }
.tour.complete .tour-head b { color: var(--good) }
.tour-caret { width: 8px; height: 8px; box-shadow: inset -2px -2px 0 currentColor; transform: rotate(-135deg) translate(-1px, -1px) }
.tour.closed .tour-caret { transform: rotate(45deg) translate(-2px, -2px) }
.tour-body { padding: 0 8px 10px }
.tour-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px }
.tour-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 4px 8px; border: 0; text-align: left; color: var(--text); background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip) }
.tour-list button:hover, .tour-list button:focus-visible { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.tour-list button[aria-disabled="true"] { cursor: default }
.tour-list button[aria-disabled="true"]:hover { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip) }
.tour-ico { flex: none; width: 18px; height: 18px; image-rendering: pixelated }
.tour-name { flex: 1; min-width: 0; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--ice); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tick { flex: none; display: grid; place-items: center; width: 18px; height: 18px; background: #0b0f19; box-shadow: inset 0 0 0 2px var(--rim) }
.tick-ico { width: 14px; height: 14px; image-rendering: pixelated }
.tour-list li.done .tour-name { color: var(--muted) }
.tour-list li.done .tick { box-shadow: inset 0 0 0 2px #4d8a5c }
.tour-list li.fresh button { animation: tour-fresh 1.6s steps(8) }
@keyframes tour-fresh { 0%, 50% { background: #2c4a35 } 100% { background: #10161f } }
.tour-reward { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0 4px; font-size: 14px; line-height: 1.35; color: var(--muted) }
.tour-reward canvas { flex: none; width: 11px; height: 32px }

.journal h3, .profile h3 { margin: 18px 0 10px; font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--ice) }
.journal > h3:first-child { margin-top: 0 }
.journal-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.journal-steps li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: #6f7d92 }
.journal-steps i { width: 10px; height: 10px; margin-top: 5px; background: #3c3a55; box-shadow: 0 0 0 1px var(--deep) }
.journal-steps li.done { color: var(--muted) }
.journal-steps li.done i { background: var(--good) }
.journal-steps li.now { color: var(--text) }
.journal-steps li.now i { background: var(--gold) }
.journal-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) }
.journal-page h3 { margin: 0 0 8px; color: var(--gold) }
.journal-page p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--text) }
.journal-page.missing h3 { color: var(--muted) }
.journal-page.missing p { color: var(--muted) }
.journal-clues { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none }
.journal-clues li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--text) }
.journal-clues li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; background: #d0e2ef; box-shadow: 2px 0 0 #0b0f16 inset }
.journal-chronicle { padding: 12px 14px; font-size: 15px; color: var(--gold-hi); background: #1d2433; box-shadow: inset 2px 2px 0 #2a3347, inset -2px -2px 0 var(--deep), 0 0 0 2px var(--rim) }

.puzzle { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center }
.puzzle.miss { animation: puzzle-miss .36s steps(4) }
@keyframes puzzle-miss { 0%, 100% { transform: none } 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }
.puzzle-note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text) }
.puzzle-note.bad { color: var(--bad) }
.cave-link { color: var(--gold-hi) }
.journal-now { margin: 0 0 12px; padding: 8px 10px; font-size: 14px; line-height: 1.45; color: var(--text); background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px var(--gold-low) }
.finale > p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: var(--text) }
.finale h3 { margin: 16px 0 8px; font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--ice) }
.earned { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px }
.earned li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip) }
.earned b { font-family: var(--small); font-weight: 400; font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--gold) }
.earned span { font-size: 14px; line-height: 1.4; color: var(--muted) }
.finale-next { display: flex; flex-wrap: wrap; gap: 8px }
.stars-puzzle.narrow .sky { width: 100%; max-width: 340px }
.stars-puzzle.narrow .star, .stars-puzzle.narrow .sky > span { min-width: 44px; min-height: 44px }
.rune-glyph { width: 45px; height: 45px; image-rendering: pixelated }
.rune-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; justify-content: center }
.rune-row li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 10px 6px 8px; background: #2a1d45; box-shadow: inset 2px 2px 0 #3d2a61, inset -2px -2px 0 var(--deep), 0 0 0 2px #6c45c9 }
.rune-row li span { font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--gold) }
.rune-row.slots li { min-height: 69px; justify-content: center }
.rune-row.slots i { width: 18px; height: 2px; background: #6c45c9 }
.rune-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(360px, 100%) }
.rune-key { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 84px; padding: 8px 6px; border: 0; color: var(--ice); background: #10161f; font-family: var(--small); font-size: 14px; text-transform: uppercase; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.rune-key:hover:not(:disabled), .rune-key:focus-visible { color: var(--gold); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.trip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center }
.trip > p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); max-width: 560px }
.trip-facts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-width: 560px; text-align: left }
.trip-facts li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--muted) }
.trip-facts li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; background: var(--gold) }
.trip-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(560px, 100%); font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--gold) }
.trip-head b { font-weight: 400 }
.trip-pips { display: flex; align-items: center; gap: 4px }
.trip-pips i { width: 14px; height: 20px; background: center / 14px 20px no-repeat; image-rendering: pixelated }
.trip-pips i.lit { filter: drop-shadow(0 0 4px #9fe8ff) drop-shadow(0 0 1px #ffffff); animation: pip-glow 2.4s steps(2) infinite }
.trip-pips i.lit:nth-of-type(2) { animation-delay: .8s }
.trip-pips i.lit:nth-of-type(3) { animation-delay: 1.6s }
.trip-pips i.burn { animation: pip-burn .7s steps(7) }
.trip-pips i.cast { animation: pip-cast .7s steps(7) }
@keyframes pip-glow { 50% { filter: drop-shadow(0 0 7px #9fe8ff) drop-shadow(0 0 2px #ffffff) brightness(1.25) } }
@keyframes pip-burn { 0% { transform: scale(1.9) rotate(-12deg); filter: drop-shadow(0 0 8px #ff7a6a) brightness(2.4) } 60% { transform: scale(1.1); filter: drop-shadow(0 0 4px #ff7a6a) } 100% { transform: none; filter: none } }
@keyframes pip-cast { 0% { transform: scale(1.9); filter: drop-shadow(0 0 8px #ffe066) brightness(2.6) } 60% { transform: scale(1.1); filter: drop-shadow(0 0 4px #ffe066) } 100% { transform: none; filter: none } }
.trip-spell { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 3px 8px 2px 5px }
.trip-spell em { font-style: normal; font-size: 14px; line-height: 12px }
.trip-spell.detect { color: var(--gold-ink); background: var(--gold); box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -2px 0 var(--gold-mid), 0 0 0 2px var(--gold-ink), 0 0 12px 2px #ffe06655 }
.trip-spell.ward { color: #0b1a28; background: #9fe8ff; box-shadow: inset 0 2px 0 #e8f6ff, inset 0 -2px 0 #4c9fd0, 0 0 0 2px #0b1a28, 0 0 12px 2px #9fe8ff66 }
.trip-spell.ward.spent { color: #5d6b80; background: #283449; box-shadow: inset 0 2px 0 #36455e, 0 0 0 2px var(--deep) }
.trip-spell.ward.spent .emblem { filter: grayscale(1) brightness(.6) }
.emblem { display: block; flex: none; image-rendering: pixelated }
.trip-charge, .trip-replay { min-height: 44px; padding: 8px 14px; border: 0; color: var(--ice); background: #10161f; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.trip-charge:hover:not(:disabled), .trip-charge:focus-visible, .trip-replay:hover:not(:disabled), .trip-replay:focus-visible { color: var(--gold); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.trip-charge:disabled, .trip-replay:disabled { color: #5d6b80 }
.trip-charge { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 #6b3f12, 0 0 0 2px var(--gold-mid), 0 0 14px 1px #ffe06633 }
.trip-charge:hover:not(:disabled), .trip-charge: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), 0 0 18px 3px #ffe06655 }
.trip-charge:disabled { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.trip-charge:disabled .emblem { filter: grayscale(1) brightness(.55) }
.trip-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none }
.trip-fx i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }
.fx-detect { width: 10px; height: 10px; box-shadow: 0 0 0 2px #fff6c8, 0 0 0 4px var(--gold), 0 0 0 6px #6b3f12; animation: fx-detect .7s steps(7) forwards }
.fx-detect::before, .fx-detect::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff6c8; box-shadow: 0 0 0 1px var(--gold-mid); transform: translate(-50%, -50%) }
.fx-detect::before { width: 2px; height: 34px }
.fx-detect::after { width: 34px; height: 2px }
@keyframes fx-detect { 0% { width: 6px; height: 6px; opacity: 1; transform: translate(-50%, -50%) rotate(45deg) } 70% { opacity: 1 } 100% { width: 70px; height: 70px; opacity: 0; transform: translate(-50%, -50%) rotate(45deg) } }
.fx-ward { animation: fx-ward .9s steps(9) forwards; filter: drop-shadow(0 0 10px #9fe8ff) drop-shadow(0 0 2px #ffffff) }
@keyframes fx-ward { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 1 } 30% { transform: translate(-50%, -50%) scale(1.1); opacity: 1 } 100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0 } }
.fx-clear { width: 20px; height: 20px; box-shadow: 0 0 0 3px #fff6c8, 0 0 0 6px var(--gold), 0 0 24px 8px #ffe06666; animation: fx-clear .8s steps(8) forwards }
@keyframes fx-clear { 0% { width: 10px; height: 10px; opacity: 1; transform: translate(-50%, -50%) rotate(45deg) } 100% { width: 240px; height: 240px; opacity: 0; transform: translate(-50%, -50%) rotate(45deg) } }
.fx-mist { width: 100%; height: 100%; background: radial-gradient(#c9b8e8cc, #5f5a7a99 55%, transparent 75%); animation: fx-mist .9s steps(6) forwards }
@keyframes fx-mist { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) } 40% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3) } }
.trip.hit > .trip-ice, .trip.hit > .trip-light, .trip.hit > .trip-echo { animation: trip-hit .45s steps(6) }
@keyframes trip-hit { 0%, 100% { transform: none } 20% { transform: translateX(-5px) } 40% { transform: translateX(5px) } 60% { transform: translateX(-3px) } 80% { transform: translateX(3px) } }
.trip.hit > .trip-head, .trip.hit > .puzzle-note { color: #ff9a8a }
.trip.shielded > .trip-ice .ice-field, .trip.shielded > .trip-light .light-wrap, .trip.shielded > .trip-echo .rune-pad { box-shadow: 0 0 0 2px #e8f6ff, 0 0 0 5px #79b3dd, 0 0 0 8px #2b5f8a, 0 0 30px 10px #9fe8ff55 }
.trip.opened > .trip-ice .ice-field, .trip.opened > .trip-light .light-wrap, .trip.opened > .trip-echo .rune-pad { box-shadow: 0 0 0 2px #fff6c8, 0 0 0 5px var(--gold), 0 0 0 8px #6b3f12, 0 0 30px 10px #ffe06655 }
.rune-key.hinted { color: var(--gold); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold), 0 0 0 5px #f6b84066, 0 0 16px 4px #ffe06655; animation: hinted 1s steps(2) infinite }
@keyframes hinted { 50% { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px #fff6c8, 0 0 0 6px var(--gold), 0 0 22px 6px #ffe06688 } }
.trip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center }
.trip-ice, .trip-light, .trip-echo { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100% }
.ice-field { display: grid; gap: 6px; padding: 10px; background: #0d2233; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px #2e5873 }
.ice-row { display: grid; grid-template-columns: repeat(3, 64px); gap: 6px }
.ice-tile { position: relative; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; box-shadow: 0 0 0 2px #0b1a28 }
.ice-tile canvas { display: block; width: 64px; height: 64px; image-rendering: pixelated }
.ice-tile:disabled { cursor: default }
.ice-tile:not(.next):not(.here) canvas { filter: saturate(0.6) brightness(0.72) }
.ice-tile.next:not(:disabled):hover, .ice-tile.next:focus-visible { box-shadow: 0 0 0 2px var(--gold) }
.ice-tile.glow { z-index: 1; box-shadow: 0 0 0 2px #fff6c8, 0 0 0 5px var(--gold), 0 0 0 7px #6b3f12, 0 0 18px 6px #ffe06688; animation: hinted-tile 1s steps(2) infinite }
.ice-tile.glow canvas { filter: brightness(1.12) }
@keyframes hinted-tile { 50% { box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px var(--gold), 0 0 0 8px #6b3f12, 0 0 26px 9px #ffe066aa } }
.trip-hat { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; transform: translate(-50%, -56%); image-rendering: pixelated }
.light-wrap { position: relative; width: min(288px, 100%); aspect-ratio: 1; box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--rim) }
.light-board { display: block; width: 100% !important; height: 100%; image-rendering: pixelated }
.mirror-key { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; min-width: 44px; min-height: 44px }
.mirror-key:hover:not(:disabled), .mirror-key:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px }
.echo-wall { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; justify-content: center }
.echo-wall li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 64px; min-height: 69px; padding: 10px 6px 8px; background: #10202e; box-shadow: inset 2px 2px 0 #1b3446, inset -2px -2px 0 var(--deep), 0 0 0 2px #2e5873 }
.echo-wall li i { width: 18px; height: 2px; background: #2e5873 }
.echo-wall li span { font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--ice) }
.echo-wall li.lit { box-shadow: inset 2px 2px 0 #1b3446, inset -2px -2px 0 var(--deep), 0 0 0 2px var(--ice), 0 0 0 5px var(--ice-dim) }
.spell-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(560px, 100%) }
.spell-pick .spell { display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 96px; padding: 12px 14px; text-align: left; line-height: 1.4 }
.spell-pick .spell > div { display: flex; flex-direction: column; gap: 6px }
.spell-pick .spell .emblem { animation: emblem 1.6s steps(2) infinite }
.spell-pick .spell[data-spell="detect"] .emblem { filter: drop-shadow(0 0 4px #fff1b0) }
.spell-pick .spell[data-spell="ward"] .emblem { filter: drop-shadow(0 0 5px #9fe8ff) }
@keyframes emblem { 50% { transform: translateY(-2px) } }
.spell-pick .spell b { font-weight: 400 }
.spell-pick .spell span { font-family: var(--body, inherit); font-size: 14px; text-transform: none; line-height: 1.45 }
.spell-pick .choice.spell { border: 0; color: var(--ice); background: #10161f; font-family: var(--small); font-size: 14px; text-transform: uppercase; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.spell-pick .choice.spell:hover, .spell-pick .choice.spell:focus-visible { color: var(--gold); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.spell-pick .choice.spell[data-spell="ward"] { color: #9fe8ff; background: #0e1c2a; box-shadow: inset 2px 2px 0 #16324a, inset -2px -2px 0 #2b5f8a, 0 0 0 2px #79b3dd, 0 0 16px 2px #9fe8ff33 }
.spell-pick .choice.spell[data-spell="ward"]:hover, .spell-pick .choice.spell[data-spell="ward"]:focus-visible { color: #e8f6ff; box-shadow: inset 2px 2px 0 #16324a, inset -2px -2px 0 #4c9fd0, 0 0 0 2px #9fe8ff, 0 0 22px 4px #9fe8ff55 }
.spell-pick .primary.spell[data-spell="detect"] { box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -4px 0 var(--gold-mid), 0 0 0 2px var(--gold-ink), 0 0 18px 3px #ffe06644 }
@media (prefers-reduced-motion: reduce) { .trip *, .trip *::before, .trip *::after { animation: none !important } .trip-fx { display: none } }
[data-motion="reduced"] .trip *, [data-motion="reduced"] .trip *::before, [data-motion="reduced"] .trip *::after { animation: none !important }
[data-motion="reduced"] .trip-fx { display: none }
.trip .risk, .trip-facts li.risk { color: #f2b8a2 }
.trip-facts li.risk::before { background: #f2b8a2 }
.ice-row { grid-template-columns: repeat(var(--cols, 3), 64px) }
.ice-field.deep { background: #0a1a29; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px #24485f }
.trial { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center }
.trial > p { margin: 0; max-width: 580px; font-size: 15px; line-height: 1.5 }
.trial-board { width: min(580px, 100%); text-align: left }
.card-open { display: inline-flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; min-height: 44px; justify-content: center }
.card-open em { font-style: normal; font-size: 14px; color: var(--ice-dim) }
.card-open:focus-visible, .card-open:hover b { color: var(--gold) }
.card-slot:not(:empty) { margin-top: 14px }
.wizard-card { display: grid; gap: 10px; padding: 14px 16px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--gold-low), 0 0 0 4px var(--deep) }
.wizard-card header { display: flex; gap: 14px; align-items: center }
.wizard-card header .kit { display: flex; gap: 6px; align-items: flex-end }
.wizard-card header .kit canvas { image-rendering: pixelated }
.wizard-card header b { display: block; font-family: var(--small); font-weight: 400; font-size: 14px; line-height: 18px; text-transform: uppercase; color: var(--gold) }
.wizard-card header em { font-style: normal; font-size: 14px; color: var(--ice) }
.card-trophies { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none }
.card-trophies li { padding: 4px 8px 3px; font-size: 14px; color: var(--text); background: #1c2840; box-shadow: 0 0 0 1px var(--lip) }
.my-card { display: grid; gap: 14px; margin-bottom: 18px }
.title-list { display: flex; flex-wrap: wrap; gap: 8px }
.title-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 6px 10px; border: 0; color: var(--ice); background: #10161f; text-align: left; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.title-chip b { font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase }
.title-chip span { font-size: 14px; color: var(--muted); max-width: 220px }
.title-chip.on { color: var(--gold); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.title-chip:disabled { color: #5d6b80 }
.title-chip:not(:disabled):hover, .title-chip:focus-visible { color: var(--gold) }
@media (max-width: 600px) {
  .spell-pick { grid-template-columns: 1fr }
  .ice-row { grid-template-columns: repeat(var(--cols, 3), 52px) }
  .ice-tile, .ice-tile canvas { width: 52px !important; height: 52px !important }
}
.trip-done { font-family: var(--small); font-size: 14px !important; line-height: 18px !important; text-transform: uppercase; color: var(--gold) !important }
@media (max-width: 600px) {
  .ice-row { grid-template-columns: repeat(3, 56px) }
  .ice-tile, .ice-tile canvas { width: 56px; height: 56px }
  .echo-wall { gap: 6px }
  .echo-wall li { min-width: 56px }
}
.stars-top { display: flex; align-items: center; gap: 18px; text-align: left }
.scroll-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 12px; background: #e8d8af; box-shadow: inset 2px 2px 0 #fff3cf, inset -2px -2px 0 #b89c66, 0 0 0 2px #16111f }
.scroll-card b { font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: #3a2a1a }
.star-chart { display: grid; grid-template-columns: repeat(var(--cols), 16px); gap: 6px }
.star-chart i { width: 16px; height: 16px }
.star-chart i.lit { background: radial-gradient(circle, #3a2a1a 0 3px, transparent 4px) }
.sky { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; width: min(560px, 100%); padding: 12px; background: radial-gradient(circle at 8% 30%, #3c5c9e 0 1px, transparent 2px), radial-gradient(circle at 27% 78%, #3c5c9e 0 1px, transparent 2px), radial-gradient(circle at 46% 12%, #28407e 0 1px, transparent 2px), radial-gradient(circle at 63% 55%, #3c5c9e 0 1px, transparent 2px), radial-gradient(circle at 81% 88%, #28407e 0 1px, transparent 2px), radial-gradient(circle at 92% 22%, #3c5c9e 0 1px, transparent 2px), linear-gradient(#0a0f24, #141c3e); box-shadow: inset 2px 2px 0 #050814, 0 0 0 2px var(--rim) }
.sky > span, .star { aspect-ratio: 1 }
.star { display: grid; place-items: center; min-width: 0; padding: 0; border: 0; background: none }
.star i { width: 6px; height: 6px; background: #bfd7e8; box-shadow: 6px 0 0 -2px #84afd2, -6px 0 0 -2px #84afd2, 0 6px 0 -2px #84afd2, 0 -6px 0 -2px #84afd2 }
.star:hover i, .star:focus-visible i { background: var(--gold-hi) }
.star:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px }
.star[aria-pressed="true"] i, .star.found i { background: var(--gold); box-shadow: 6px 0 0 -2px var(--gold-mid), -6px 0 0 -2px var(--gold-mid), 0 6px 0 -2px var(--gold-mid), 0 -6px 0 -2px var(--gold-mid), 0 0 10px 2px #ffe06666 }
.pedestal { display: grid; place-items: center; width: 120px; height: 150px; background: linear-gradient(#10161f 0 70%, #2a3347 70% 78%, #1d2433 78%); box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px var(--rim) }
.pedestal canvas { width: 32px; height: 96px; image-rendering: pixelated }
.pedestal.tuning canvas { animation: tune-hum .3s steps(2) infinite }
.pedestal.tuned { box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px var(--gold), 0 0 24px 4px #ffe06655 }
.pedestal.tuned canvas { animation: none; filter: drop-shadow(0 0 6px #ffe066) }
@keyframes tune-hum { 50% { transform: translateY(-3px); filter: drop-shadow(0 0 4px #ffe066) } }
.profile > .small { color: var(--muted) }
@media (prefers-reduced-motion: reduce) { .puzzle.miss, .pedestal.tuning canvas { animation: none } }
[data-motion="reduced"] .puzzle.miss, [data-motion="reduced"] .pedestal.tuning canvas { animation: none }
.tour.complete .tour-reward { color: var(--good) }

.map-panel { display: flex; gap: 20px; align-items: flex-start }
.town-map { flex: none; height: min(62vh, 720px); width: auto; aspect-ratio: 256 / 360; image-rendering: pixelated; cursor: crosshair; box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--rim) }
.map-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; flex: 1 1 auto }
.map-legend, .map-places { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0 }
.map-legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted) }
.map-ico { width: 18px; height: 18px; image-rendering: pixelated; flex: none }
.map-legend .map-ico { width: 27px; height: 27px }
.map-places button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 12px; border: 0; text-align: left; color: var(--text); background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.map-places button:hover, .map-places button:focus-visible { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.map-places .map-ico { width: 27px; height: 27px }
.map-places span { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.map-places b { font-family: var(--small); font-weight: 400; font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--gold) }
.map-places .locked b { color: #cbbbe8 }
.map-places .cave b { color: var(--ice) }
.map-places em { font-style: normal; font-size: 14px; color: var(--muted) }
.map-places .seen em { color: var(--good) }
.map-places li { display: flex; gap: 8px; align-items: stretch }
.map-places li > button:first-child { flex: 1 1 auto; min-width: 0 }
.map-places .map-travel { flex: none; width: auto; gap: 8px; padding: 6px 12px; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--ice) }
.map-places .map-travel i { width: 10px; height: 14px; background: currentColor; clip-path: polygon(50% 0, 100% 40%, 70% 100%, 30% 100%, 0 40%) }
.map-places .map-travel span { display: inline }

.me { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 28px); padding: 8px 14px 8px 8px; border: 0; text-align: left; color: var(--text); background: var(--stone); box-shadow: var(--slab) }
.me:hover .me-text b { color: var(--gold) }
.me-icon { display: grid; place-items: center; width: 40px; height: 56px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip) }
.me-icon canvas { width: 16px; height: 48px }
.me-text { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.me-text b { font-family: var(--small); font-weight: 400; font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--ice); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.me-text > span { font-size: 14px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.me-stats { display: flex; gap: 14px; padding-left: 12px; box-shadow: -2px 0 0 var(--deep) }
.me-stats > span { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 6px }
.me-stats b { font-family: var(--small); font-weight: 400; font-size: 14px; line-height: 14px; color: var(--gold) }
.me-stats em { grid-column: 1 / -1; font-style: normal; font-size: 14px; line-height: 1.2; color: var(--muted); text-transform: uppercase; letter-spacing: .04em }
.ico { display: block; width: 14px; height: 18px; background: center / contain no-repeat; image-rendering: pixelated }
.ico.shard { background-image: url(assets/town/ui-shard.png?v=c_hbFNI0ft3g) }
.ico.deed { background-image: url(assets/town/ui-deed.png?v=c_hbFNI0ft3g) }

.hint { position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%); padding: 8px 14px 6px; white-space: nowrap; 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); pointer-events: none }

.pulse { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; justify-items: center; align-content: center; gap: 4px; width: 84px; height: 84px; padding: 6px 0 4px; border: 0; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--ice); background: var(--stone); box-shadow: var(--slab); cursor: pointer; touch-action: manipulation }
.pulse i { width: 22px; height: 22px; box-shadow: inset 0 0 0 2px currentColor, 0 0 0 4px var(--stone), 0 0 0 6px currentColor; border-radius: 50% }
.pulse kbd { font-family: var(--small); font-size: 14px; color: var(--muted, #9fc2dc) }
.pulse.ready { color: var(--gold); animation: pulse-ready 1.2s steps(2) infinite }
.pulse:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.pulse:active { transform: translateY(2px) }
@keyframes pulse-ready { 50% { box-shadow: var(--slab), 0 0 0 6px #ffe06655 } }
[data-motion="reduced"] .pulse.ready { animation: none }
@media (hover: none) { .pulse kbd { display: none } }
.dialog { position: absolute; left: 50%; bottom: 16px; z-index: 4; transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr; gap: 18px; width: min(780px, calc(100% - 24px)); padding: 16px 18px; background: var(--stone); box-shadow: var(--slab) }
.dialog .portrait { width: 80px; height: 80px; image-rendering: pixelated; background: #10161f; box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--rim), 0 0 0 6px var(--deep) }
.say header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px }
.say .who { font-family: var(--small); font-weight: 400; font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--gold) }
.say .role { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em }
.say .line { min-height: 48px; font-size: 16px; line-height: 1.5; color: var(--text) }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px 8px 8px; border: 0; background: #10161f; color: var(--text); font-family: var(--body); font-size: 16px; font-weight: 500; line-height: 1.25; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.choice:hover, .choice:focus-visible { color: var(--gold); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.choice kbd { color: inherit }
.primary-choice { color: var(--gold) }

.panel-wrap { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 18px; background: #070a12b8 }
.panel-wrap .slab { display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100% - 12px); background: var(--stone); box-shadow: var(--slab) }
.panel-wrap .slab.wide { width: min(880px, 100%) }
.slab > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 20px 14px; box-shadow: 0 2px 0 var(--deep) }
.kicker { display: block; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--gold) }
.slab h2 { margin-top: 8px; font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 36px; text-transform: uppercase; color: var(--text) }
.close { flex: none; min-height: 44px; padding: 0 14px; border: 0; font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--ice); background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.close:hover { color: var(--gold) }
.slab .body { overflow: auto; padding: 18px 20px 22px; overscroll-behavior: contain }

.primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 6px 20px 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) }
.primary:disabled { opacity: .5 }
.text-button { border: 0; background: none; color: var(--gold); font-family: var(--small); font-size: 14px; text-transform: uppercase; padding: 8px 0; min-height: 44px }
.small { font-size: 14px; line-height: 1.5 }

.gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px }
.card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px 12px; text-align: center; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.card.worn { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.card .icon { display: grid; place-items: center; height: 104px }
.card .icon canvas.staff { width: 32px; height: 96px }
.card .icon canvas.familiar { width: 96px; height: 96px }
.card.locked .icon canvas { filter: brightness(.35) saturate(.2) }
.card b { font-family: var(--small); font-weight: 400; font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--ice) }
.card p { flex: 1; font-size: 14px; line-height: 1.45 }
.card.locked p { color: #8796a8 }
.card p.progress { flex: none; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--gold) }
.equip { width: 100%; min-height: 40px; border: 0; font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--gold-ink); background: var(--gold); box-shadow: inset 0 2px 0 var(--gold-hi), inset 0 -4px 0 var(--gold-mid), 0 0 0 2px var(--gold-ink) }
.equip:hover:not(:disabled) { background: var(--gold-hi) }
.equip:disabled { color: var(--muted); background: var(--stone); box-shadow: inset 0 -3px 0 var(--deep), 0 0 0 2px var(--rim) }
.equip.worn:disabled { color: var(--gold) }

.deeds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.deeds li { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px var(--rim) }
.deeds i { width: 18px; height: 26px; background: url(assets/ui-pip.png?v=c_hbFNI0ft3g) 0 0 / 18px 26px; image-rendering: pixelated }
.deeds li.done i { background-image: url(assets/ui-pip-on.png?v=c_hbFNI0ft3g) }
.deeds b { display: block; font-family: var(--small); font-weight: 400; font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--ice) }
.deeds li.done b { color: var(--gold) }
.deeds span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--muted) }
.deeds em { font-style: normal; font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--muted) }
.deeds li.done em { color: var(--good) }

.tavern h3, .page h3 { margin: 22px 0 10px; font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--ice) }
.sign-book { display: flex; flex-direction: column; gap: 8px }
.sign-book label { font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--gold) }
.sign-book .row { display: flex; gap: 12px; align-items: center }
.sign-book input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 0; background: #10161f; color: var(--text); font-size: 16px; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px var(--rim) }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto }
.board li { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) 64px minmax(0, 2fr); gap: 12px; align-items: center; padding: 6px 10px; background: #10161f; box-shadow: inset 0 -2px 0 var(--deep) }
.board li.you { box-shadow: inset 0 -2px 0 var(--deep), 0 0 0 2px var(--gold-low) }
.board li.empty { display: block; color: var(--muted); font-size: 14px }
.board .rank { font-family: var(--small); font-size: 14px; color: var(--muted) }
.board b { font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--ice); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.board .kit { display: flex; gap: 4px; align-items: end; height: 32px }
.board .kit canvas.staff { width: 11px; height: 32px }
.board .kit canvas.familiar { width: 32px; height: 32px }
.board .badges { font-size: 14px; line-height: 1.35; color: var(--muted) }

.books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px }
.book { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; border: 0; text-align: left; color: var(--ice); background: #10161f; font-family: var(--small); font-size: 14px; line-height: 18px; text-transform: uppercase; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.book:hover { color: var(--gold); box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold) }
.book i { flex: none; width: 14px; height: 20px; background: #5b3a6e; box-shadow: inset 2px 0 0 #8a5fa3, inset -2px 0 0 #2f1d3b, inset 0 -3px 0 #e8d8af }
.page p { margin-bottom: 12px; font-size: 16px; line-height: 1.6; color: var(--text) }

.mirror { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start }
.mirror-frame { padding: 10px; background: #2a1d45; box-shadow: inset 0 0 0 2px #16111f, 0 0 0 4px #f6b840, 0 0 0 6px #16111f, 0 0 26px 2px #6c45c955 }
.mirror-face { display: block; width: 160px; height: 160px; image-rendering: pixelated }
.mirror-side p { margin-bottom: 12px; font-size: 15px; color: var(--text) }
.mirror-side p + p { color: var(--muted) }
.mirror-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px }
.mirror-actions a { text-decoration: none }
.mirror-card { grid-column: 1 / -1 }
.mirror-card:empty { display: none }
.mirror.has-card { grid-template-columns: 1fr }
.mirror.has-card .mirror-frame, .mirror.has-card .mirror-side { display: none }
.mirror.has-card .mirror-actions { justify-content: center }
.mirror.has-card .small { text-align: center }
.card-preview { display: block; width: auto; height: auto; max-width: 100%; max-height: min(52vh, 439px); margin: 0 auto 12px; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--rim) }
.graves > p { font-size: 15px; color: var(--text); margin-bottom: 14px }
.stones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px }
.stones li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 10px; background: #1d2433; box-shadow: inset 2px 2px 0 #2a3347, inset -2px -2px 0 var(--deep), 0 0 0 2px var(--rim) }
.stones b { font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--ice) }
.stones span { font-size: 14px; color: var(--muted) }

.help .keys-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px }
.help .keys-list li { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding-bottom: 10px; box-shadow: 0 2px 0 var(--deep); color: var(--text) }
.help .keys-list li span { color: var(--muted); font-size: 14px }
.help p { font-size: 15px; line-height: 1.6 }

.toast { position: absolute; top: 70px; left: 50%; z-index: 5; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 9px 16px; font-family: var(--body); font-size: 15px; font-weight: 500; line-height: 1.35; text-align: center; color: var(--text); background: var(--stone); box-shadow: 0 0 0 2px var(--rim), 0 0 0 4px var(--deep), 4px 4px 0 4px #070a12cc }
.toast[data-tone="good"] { color: var(--gold); box-shadow: 0 0 0 2px var(--gold-low), 0 0 0 4px var(--deep), 4px 4px 0 4px #070a12cc }
.toast[data-tone="bad"] { color: var(--bad) }

.loading { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: #070a12 }
.loading .slab { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(420px, calc(100% - 32px)); padding: 28px; text-align: center; background: var(--stone); box-shadow: var(--slab) }
.loading h1 { font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 45px; text-transform: uppercase; 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) }
.load-bar { width: 100%; height: 12px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px var(--rim) }
.load-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--ice-dim); box-shadow: inset 0 2px 0 var(--ice); transition: width .2s }

.foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; min-height: 40px; background: var(--stone); box-shadow: inset 0 2px 0 var(--deep); font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--muted) }
.foot a { color: var(--ice); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center }
.foot a:hover { color: var(--gold) }
.motion { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer }
.motion input { width: 18px; height: 18px; accent-color: var(--gold) }
.noscript { padding: 24px; color: var(--text) }

@media (min-width: 1400px) {
  .minimap { width: 200px }
}

@media (max-height: 620px) and (min-width: 601px) {
  .tour-list button { min-height: 28px; padding: 2px 8px }
  .tour-reward { display: none }
}

@media (max-height: 500px) and (min-width: 601px) {
  .minimap { width: 92px; top: 8px; right: 8px }
  .quest { width: 288px; top: 8px; left: 8px }
  .quest-goal { padding: 6px 10px 8px }
  .quest-text { margin-top: 4px; font-size: 14px }
  .quest-actions { margin-top: 6px }
  .quest-actions button { min-height: 32px }
  .quest-actions .quest-journal { flex: none; padding: 4px 10px 2px }
  .tour-head { min-height: 34px; padding: 4px 10px 2px }
  .place { top: 10px; left: 256px; right: 112px; font-size: 18px; line-height: 27px; text-align: center; overflow: hidden; text-overflow: ellipsis; transform: translateY(-8px) }
  .place.show { transform: none }
  .me { left: 8px; bottom: 8px; padding: 6px 10px 6px 6px }
  .me-text { display: none }
  .me-stats { padding-left: 0; box-shadow: none }
}
@media (max-width: 860px) {
  .edition { display: none }
  .foot > span { display: none }
}

@media (max-width: 600px) {
  .bar { padding: 6px 10px }
  .wordmark { font-size: 14px; line-height: 14px }
  .brand img { width: 32px; height: 32px }
  .tool { white-space: normal; padding: 0 10px; line-height: 16px }
  #help .tool-long { display: none }
  #help .tool-short { display: inline }
  .foot .tool-long { display: none }
  .foot .tool-short { display: inline }
  .foot { white-space: nowrap }
  .place { font-size: 18px; line-height: 27px; top: auto; bottom: 112px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; transform: translate(-50%, 8px) }
  .place.show { transform: translate(-50%, 0) }
  .minimap { width: 104px; top: 10px; right: 10px }
  .mini-fold { position: absolute; z-index: 3; top: 156px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; color: var(--ice); background: var(--stone); box-shadow: var(--slab) }
  .mini-fold i { width: 14px; height: 10px; box-shadow: inset 0 0 0 2px currentColor, inset 0 -4px 0 -2px currentColor }
  .mini-fold[aria-pressed="true"] { top: 10px; color: var(--gold) }
  .mini-fold[hidden] { display: none }
  .mini-fold:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
  .quest { top: 10px; left: 10px; width: min(252px, calc(100% - 134px)) }
  .quest-goal { padding: 8px 10px 10px }
  .quest-text { font-size: 14px }
  .quest-actions button { min-height: 36px; padding: 4px 6px 2px }
  .quest-actions .quest-journal { flex: none }
  .stars-top { flex-direction: column; text-align: center }
  .rune-row { gap: 6px }
  .rune-row li { min-width: 52px; padding: 8px 4px 6px }
  .tour-head { min-height: 40px; padding: 6px 10px 4px }
  .map-panel { flex-direction: column; align-items: center }
  .town-map { height: auto; width: 100% }
  .me { left: 8px; bottom: 8px; gap: 8px; padding: 6px 10px 6px 6px }
  .me-icon { width: 24px; height: 36px }
  .me-icon canvas { width: 11px; height: 32px }
  .me-text { display: none }
  .me-stats { padding-left: 0; box-shadow: none; gap: 12px }
  .pulse { right: 8px; bottom: 8px; width: 76px; height: 76px }
  .hint { bottom: 64px; font-size: 14px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis }
  .hint { bottom: 96px }
  .toast { top: auto; bottom: 172px }
  .dialog { bottom: 8px; grid-template-columns: 1fr; gap: 10px; padding: 14px }
  .dialog .portrait { display: none }
  .say .line { font-size: 15px; min-height: 0 }
  .choice { flex: 1 1 100% }
  .panel-wrap { padding: 8px }
  .slab h2 { font-size: 18px; line-height: 27px }
  .stones { grid-template-columns: repeat(2, 1fr) }
  .board li { grid-template-columns: 24px minmax(0, 1fr) 52px; }
  .board .badges { grid-column: 2 / -1 }
  .foot { min-height: 36px }
  .sign-book .row { flex-direction: column; align-items: stretch }
  .mirror { grid-template-columns: 1fr; justify-items: center }
  .mirror-face { width: 120px; height: 120px }
}

@media (hover: none) {
  .choice kbd { display: none }
}

[data-motion="reduced"] .place, [data-motion="reduced"] .load-bar i { transition: none }
[data-motion="reduced"] .tour-list li.fresh button { animation: none }

.emotes { position: absolute; right: 108px; bottom: 14px; z-index: 2; display: grid; grid-template-columns: repeat(3, auto); gap: 6px }
.emotes button { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 56px; min-height: 48px; padding: 6px 8px 4px; border: 0; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--ice); background: var(--stone); box-shadow: var(--slab); cursor: pointer; touch-action: manipulation }
.emotes button:hover, .emotes button:focus-visible { color: var(--gold) }
.emotes button:active { transform: translateY(2px) }
.emotes kbd { font-size: 14px; padding: 2px 4px 1px }
@media (hover: none) { .emotes kbd { display: none } }
.online { position: absolute; right: 14px; bottom: 124px; z-index: 2; margin: 0; padding: 6px 10px 4px; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--muted); background: var(--stone); box-shadow: 0 0 0 2px var(--rim), 0 0 0 4px var(--deep); pointer-events: none }
.online.busy { color: var(--good) }
.online.busy::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; background: var(--good); box-shadow: 0 0 0 2px var(--gold-ink) }
.invites { position: absolute; top: 70px; right: 14px; z-index: 5; display: grid; gap: 10px; width: min(320px, calc(100% - 28px)) }
.duel-invite { padding: 12px 14px; color: var(--text); background: var(--stone); box-shadow: 0 0 0 2px var(--gold-low), 0 0 0 4px var(--deep), 4px 4px 0 4px #070a12cc; animation: invite-in .3s steps(3) }
.duel-invite p { margin: 0 0 10px; font-size: 15px }
.duel-invite b { color: var(--gold) }
@keyframes invite-in { from { transform: translateX(24px); opacity: 0 } }
.quests-head { box-shadow: 0 -2px 0 var(--deep) }
.quests-head span { flex: 1 }
.quests-head b { font-weight: 400; color: var(--gold) }
.quests-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg) }
.quests-head:hover, .quests-head:focus-visible { color: var(--gold-hi) }

.arena { display: grid; gap: 14px }
.arena-rules { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin: 0; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase }
.arena-rules .rule { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip) }
.arena-rules b { font-weight: 400 }
.arena-rules i { font-style: normal; color: var(--muted) }
.arena-rules .ember b:first-of-type, .spell-btn.ember b { color: #ffb26b }
.arena-rules .tide b:first-of-type, .spell-btn.tide b { color: #9fdcff }
.arena-rules .thorn b:first-of-type, .spell-btn.thorn b { color: #a8ec8c }
.arena-icon { width: calc(24px * var(--s, 1)); height: calc(24px * var(--s, 1)); image-rendering: pixelated }
.arena-frame { position: relative; width: min(100%, 600px, calc((100dvh - 420px) * 256 / 136)); min-width: min(100%, 300px); margin: 0 auto; aspect-ratio: 256 / 136; background: #0d0a16; box-shadow: 0 0 0 2px var(--rim), 0 0 0 4px var(--deep) }
.arena-stage { display: block; width: 100%; height: 100%; image-rendering: pixelated }
.arena-hud { position: absolute; inset: 8px 8px auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; pointer-events: none; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase }
.arena-hud .side { display: grid; gap: 4px; padding: 6px 8px 4px; background: #0b0f19d9; box-shadow: 0 0 0 2px var(--rim) }
.arena-hud .side.foe { justify-items: end; text-align: right }
.arena-hud .side b { font-weight: 400; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.arena-hud .side small { color: var(--muted); font-size: 14px }
.arena-hud .side:empty { display: none }
.arena-hud .mid { display: grid; justify-items: center; gap: 6px; padding-top: 2px; color: var(--ice) }
.arena-hud .clock { min-width: 48px; padding: 4px 8px 2px; text-align: center; color: var(--gold-ink); background: var(--gold); box-shadow: 0 0 0 2px var(--gold-ink) }
.arena-hud .clock.hurry { background: #ff8a6b; animation: hurry .5s steps(2) infinite }
@keyframes hurry { 50% { transform: translateY(-2px) } }
.arena-crystals { display: flex; gap: 4px }
.arena-crystals i { width: 10px; height: 14px; background: #1c2840; clip-path: polygon(50% 0, 100% 35%, 70% 100%, 30% 100%, 0 35%); box-shadow: inset 0 0 0 2px #2f466c }
.arena-crystals i.won { background: linear-gradient(#fff6c8 0 30%, #ffe066 30% 70%, #f6b840 70%) }
.arena-banner { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 6px 12px 4px; text-align: center; font-family: var(--small); font-size: 14px; line-height: 16px; text-transform: uppercase; color: var(--ice); background: #0b0f19e6; box-shadow: 0 0 0 2px var(--rim); opacity: 0; pointer-events: none }
.arena-banner.show { opacity: 1; animation: banner-in .35s steps(3) }
.arena-banner[data-tone="good"] { color: var(--good); box-shadow: 0 0 0 2px #3f8a52 }
.arena-banner[data-tone="bad"] { color: var(--bad); box-shadow: 0 0 0 2px #8a3f3f }
.arena-banner[data-tone="gold"] { color: var(--gold); box-shadow: 0 0 0 2px var(--gold-low) }
@keyframes banner-in { from { transform: translate(-50%, 8px); opacity: 0 } }
.duel-frame > .duel-stage { box-shadow: none }
.arena-status { margin: 0; min-height: 20px; font-size: 15px; color: var(--muted); text-align: center }
.arena-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.arena-pick[hidden] { display: none }
.seal-slots { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px }
.seal-slots .slot { display: grid; place-items: center; width: 44px; height: 44px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.seal-slots .slot i { font-style: normal; font-family: var(--small); font-size: 14px; color: var(--rim) }
.seal-slots .slot .arena-icon { width: 36px; height: 36px }
.spell-btn { position: relative; display: grid; justify-items: center; gap: 4px; min-height: 120px; padding: 10px 8px 8px; border: 0; color: var(--ice); background: #10161f; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim); cursor: pointer; touch-action: manipulation }
.spell-btn small { font-size: 14px; color: var(--muted) }
.spell-btn kbd { position: absolute; top: 6px; left: 6px; font-size: 14px; padding: 2px 4px 1px }
.spell-btn .arena-icon { width: 64px; height: 64px }
.spell-btn:hover, .spell-btn:focus-visible { transform: translateY(-2px) }
.spell-btn.ember:hover, .spell-btn.ember:focus-visible { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 #c65a1e, 0 0 0 2px #ff8a3d }
.spell-btn.tide:hover, .spell-btn.tide:focus-visible { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 #2a6aa8, 0 0 0 2px #4fb6ff }
.spell-btn.thorn:hover, .spell-btn.thorn:focus-visible { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 #2f7a3a, 0 0 0 2px #5fd068 }
.spell-btn:active { transform: translateY(2px) }
@media (hover: none) { .spell-btn kbd { display: none } }
.arena-menu .arena-row, .arena-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
.arena-menu button:not(.primary) { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px 6px; border: 0; color: var(--ice); background: #10161f; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.arena-menu button.ghost { color: var(--muted) }
.arena-menu button:disabled { opacity: .5 }
.arena-name { min-height: 48px; padding: 0 12px; font: 15px var(--body); color: var(--text); background: #10161f; border: 0; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px var(--rim) }
.arena-note, .arena-live, .arena-quest, .arena-empty { margin: 0; font-size: 14px; color: var(--muted) }
.arena-quest b { color: var(--gold); font-weight: 400; font-family: var(--small); font-size: 14px }
.arena-live { color: var(--good) }
.arena-board { display: grid; gap: 14px }
.arena-list h3 { margin: 0 0 6px; font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--ice) }
.arena-list ul, .arena-list ol { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none }
.arena-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip) }
.arena-list li.mine, .arena-list li.you { box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--gold-low), 0 0 0 2px var(--gold-low) }
.arena-list .who { display: grid; gap: 2px; min-width: 0 }
.arena-list .who b, .arena-list li > b { color: var(--gold); font-weight: 400; font-family: var(--small); font-size: 14px }
.arena-list small { color: var(--muted); font-size: 14px }
.arena-list .seq { display: flex; gap: 2px }
.arena-list .seq .arena-icon { width: 24px; height: 24px }
.ledger ol { counter-reset: rank }
.ledger li::before { counter-increment: rank; content: counter(rank); min-width: 18px; font-family: var(--small); color: var(--muted) }
.primary.small, .choice.small, .ghost.small { min-height: 36px; padding: 4px 12px 6px; font-size: 14px }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px }
.live-note { color: var(--good) }
.quest-book-panel .raffle-state { margin: 0 0 8px; padding: 12px 14px; font-size: 15px; color: var(--gold-hi); background: #1d2433; box-shadow: inset 2px 2px 0 #2a3347, inset -2px -2px 0 var(--deep), 0 0 0 2px var(--rim) }
.quest-book-panel h3 { margin: 18px 0 10px; font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--ice) }
.claim-form { margin: 12px 0 16px; padding: 14px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px var(--gold-low) }
.claim-form h3 { margin: 0; color: var(--gold) }
.claim-form .small { margin: 0 }
.claim-form .primary { align-self: flex-start; margin-top: 6px }
.quest-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.quest-list li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; background: #10161f; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip) }
.quest-list li div { display: grid; gap: 3px }
.quest-list li b { font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--ice) }
.quest-list li span { font-size: 14px; color: var(--muted) }
.quest-list .tick { width: 14px; height: 14px; box-shadow: inset 0 0 0 2px var(--rim) }
.quest-list li.done .tick { background: var(--good); box-shadow: inset 0 0 0 2px #3f8a52 }
.quest-list li.done b { color: var(--good) }
.mentor { display: grid; gap: 6px; margin-top: 12px }
.mentor label { font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--ice) }
.mentor .row { display: flex; gap: 8px }
.mentor input { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; font: 14px var(--body); color: var(--text); background: #10161f; border: 0; box-shadow: inset 2px 2px 0 var(--deep), 0 0 0 2px var(--rim) }
@media (max-width: 600px) {
  .emotes { right: 96px; bottom: 12px; gap: 4px }
  .emotes button { min-width: 44px; padding: 6px 4px 4px; font-size: 14px }
  .online { bottom: auto; top: 12px; right: auto; left: 12px; display: none }
  .arena-hud { inset: 4px 4px auto; font-size: 14px }
  .arena-hud .side { padding: 4px 6px 2px }
  .spell-btn { min-height: 96px }
  .spell-btn .arena-icon { width: 48px; height: 48px }
  .seal-slots .slot { width: 40px; height: 40px }
}
[data-motion="reduced"] .duel-invite, [data-motion="reduced"] .arena-banner.show, [data-motion="reduced"] .arena-hud .clock.hurry { animation: none }
@media (prefers-reduced-motion: reduce) { .duel-invite, .arena-banner.show, .arena-hud .clock.hurry { animation: none } }

.duel { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px 10px; background: radial-gradient(circle at 50% 40%, #1a1226 0, #07050c 70%); overflow: auto }
.duel[hidden] { display: none }
.duel-frame { position: relative; flex: none; box-shadow: 0 0 0 2px var(--rim), 0 0 0 4px var(--deep), 8px 8px 0 4px #00000080 }
.duel-stage { display: block; image-rendering: pixelated }
.duel-top { position: absolute; inset: 6px 6px auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; pointer-events: none; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase }
.duel-side { display: grid; gap: 5px; justify-self: start; min-width: 0; max-width: 100%; padding: 8px 10px 6px; background: #0b0f19e0; box-shadow: 0 0 0 2px var(--rim), 0 0 0 4px var(--deep) }
.duel-side.foe { justify-self: end; justify-items: end; text-align: right }
.duel-side b { font-weight: 400; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.duel-side small { color: var(--muted); font-size: 14px }
.duel-mid { display: grid; justify-items: center; gap: 6px; color: var(--ice); text-shadow: 2px 2px 0 var(--deep) }
.duel-round { font-family: var(--display); font-size: 18px; line-height: 18px; color: var(--gold) }
.duel-clock { min-width: 56px; padding: 6px 10px 4px; text-align: center; color: var(--gold-ink); background: var(--gold); box-shadow: 0 0 0 2px var(--gold-ink) }
.duel-clock.hurry { background: #ff8a6b; animation: hurry .5s steps(2) infinite }
.arena-crystals { display: flex; gap: 4px }
.arena-crystals i { width: 12px; height: 16px; background: #1c2840; clip-path: polygon(50% 0, 100% 35%, 70% 100%, 30% 100%, 0 35%) }
.arena-crystals i.won { background: linear-gradient(#fff6c8 0 30%, #ffe066 30% 70%, #f6b840 70%) }
.duel-banner { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 8px 16px 6px; text-align: center; font-family: var(--display); font-size: 18px; line-height: 22px; text-transform: uppercase; color: var(--ice); background: #0b0f19e8; box-shadow: 0 0 0 2px var(--rim), 0 0 0 4px var(--deep); opacity: 0; pointer-events: none; white-space: nowrap }
.duel-banner.show { opacity: 1; animation: banner-in .35s steps(3) }
.duel-banner[data-tone="good"] { color: var(--good); box-shadow: 0 0 0 2px #3f8a52, 0 0 0 4px var(--deep) }
.duel-banner[data-tone="bad"] { color: var(--bad); box-shadow: 0 0 0 2px #8a3f3f, 0 0 0 4px var(--deep) }
.duel-banner[data-tone="gold"] { color: var(--gold); box-shadow: 0 0 0 2px var(--gold-low), 0 0 0 4px var(--deep) }
.duel-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; justify-items: center; padding: 28px max(12px, calc(50% - 380px)) 12px; background: linear-gradient(transparent, #07050ccc 34%, #07050cf0) }
.duel-status { margin: 0; min-height: 20px; font-size: 15px; color: var(--text); text-align: center; text-shadow: 1px 1px 0 var(--deep) }
.duel-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100% }
.duel-pick .spell-btn { min-height: 0; padding: 6px 8px 6px; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; justify-items: start; column-gap: 10px; row-gap: 2px; text-align: left }
.duel-pick .spell-btn .arena-icon { grid-row: span 2 }
.duel-pick .seal-slots { grid-column: 1 / -1 }
.duel-pick[hidden] { display: none }
.duel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
.duel-actions button:not(.primary), .arena-row button.choice, .arena-row button.ghost { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px 6px; border: 0; color: var(--ice); background: #10161f; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--lip), 0 0 0 2px var(--rim) }
.duel-actions .ghost, .arena-row .ghost { color: var(--muted) }
.duel-actions button:disabled { opacity: .5 }
.arena-row.big { gap: 12px }
.in-duel .emotes, .in-duel .online, .in-duel .invites { visibility: hidden }
@media (max-width: 700px), (max-height: 520px) {
  .duel-frame { display: grid; justify-items: center }
  .duel-bottom { position: static; padding: 10px 0 0; background: none; width: min(100%, 560px) }
}
@media (max-width: 600px) {
  .duel { padding: 6px 6px 8px; gap: 6px }
  .duel-top { inset: 4px 4px auto; font-size: 14px }
  .duel-side { padding: 5px 6px 4px }
  .duel-round { font-size: 14px }
  .duel-banner { font-size: 14px; line-height: 16px; white-space: normal }
  .duel-pick .spell-btn { min-height: 92px }
}
[data-motion="reduced"] .duel-banner.show, [data-motion="reduced"] .duel-clock.hurry { animation: none }
.duel-pick .spell-btn kbd { left: auto; right: 6px; top: 6px }
@media (max-width: 700px) { .duel-side small { display: none } .duel-side { padding: 4px 6px 3px } .duel-side b { font-size: 14px; max-width: 110px } .arena-crystals i { width: 9px; height: 12px } .duel-banner { padding: 5px 10px 3px; top: 30% } }

.gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; overflow: auto; background: rgba(8, 10, 18, 0.84) }
.gate-panel { width: min(660px, 100%); padding: 20px; color: var(--text); background: var(--stone); box-shadow: var(--slab) }
.gate-panel h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 22px; text-transform: uppercase; color: var(--gold) }
.gate-body { display: grid; grid-template-columns: 192px minmax(0, 1fr); gap: 18px; align-items: start }
.gate-stage { display: grid; place-items: center; background: #141a28; box-shadow: inset 0 0 0 2px var(--lip) }
.gate-preview { width: 192px; height: 192px; image-rendering: pixelated }
.gate-fields { display: grid; gap: 6px }
.gate-label { margin: 6px 0 0; font-family: var(--small); font-size: 14px; line-height: 14px; text-transform: uppercase; color: var(--muted) }
.gate-models { display: flex; gap: 8px }
.gate-model { flex: 1 1 0; display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 4px 2px; border: 0; color: var(--text); background: #141a28; box-shadow: inset 0 0 0 2px var(--lip); font-family: var(--small); font-size: 14px; text-transform: uppercase; cursor: pointer }
.gate-model canvas { width: 72px; height: 72px; image-rendering: pixelated }
.gate-model.on { color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold) }
.gate-robes { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px }
.gate-robe { aspect-ratio: 1; min-height: 26px; padding: 0; border: 0; background: var(--robe); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35); cursor: pointer }
.gate-robe.on { outline: 2px solid var(--gold); outline-offset: 2px }
.gate-fields input { width: 100%; min-height: 40px; padding: 8px 10px; border: 0; font: inherit; font-size: 16px; color: var(--text); background: #10161f; box-shadow: inset 0 0 0 2px var(--lip) }
.gate-fields input:focus { outline: 2px solid var(--gold); outline-offset: -2px }
.gate-note { min-height: 18px; margin: 10px 0 0; font-size: 14px; color: #ff9a8a }
.gate-actions { display: flex; gap: 10px; margin-top: 8px }
.gate-actions .primary { flex: 1 }
@media (max-width: 560px) {
  .gate-body { grid-template-columns: 1fr }
  .gate-preview { width: 128px; height: 128px }
}

.me-handle { font-style: normal; font-size: 14px; line-height: 12px; color: #8d93a3 }
.me-handle:empty { display: none }
.chat { position: absolute; left: 14px; bottom: 104px; z-index: 2; width: 300px; background: rgba(13, 17, 28, 0.84); box-shadow: inset 0 0 0 2px var(--lip) }
.chat-fold { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 30px; padding: 4px 10px; border: 0; color: var(--ice); background: transparent; font-family: var(--small); font-size: 14px; text-transform: uppercase; cursor: pointer }
.chat-fold:hover, .chat-fold:focus-visible { color: var(--gold) }
.chat-fold kbd { margin-left: auto; font-size: 14px; padding: 2px 4px 1px }
.chat-new { min-width: 18px; padding: 2px 4px; text-align: center; color: var(--gold-ink); background: var(--gold); font-weight: 400 }
.chat-log { display: none; height: 128px; margin: 0; padding: 2px 10px 6px; overflow-y: auto; list-style: none; font-size: 14px; line-height: 1.3; color: var(--text); overflow-wrap: anywhere }
.chat-log li + li { margin-top: 3px }
.chat-log b { margin-right: 4px; font-family: var(--small); font-weight: 400; font-size: 14px; text-transform: uppercase; color: var(--gold) }
.chat-log i { margin-right: 6px; font-style: normal; font-size: 14px; color: #8d93a3 }
.chat-form { display: none; gap: 4px; padding: 0 6px 6px }
.chat.open .chat-log { display: block }
.chat.open .chat-form { display: flex }
.chat-form input { flex: 1; min-width: 0; min-height: 34px; padding: 4px 8px; border: 0; font: inherit; font-size: 16px; color: var(--text); background: #10161f; box-shadow: inset 0 0 0 2px var(--lip) }
.chat-form input:focus { outline: 2px solid var(--gold); outline-offset: -2px }
.chat-form button { min-height: 34px; padding: 4px 10px; border: 0; font-family: var(--small); font-size: 14px; text-transform: uppercase; color: var(--gold-ink); background: var(--gold); cursor: pointer }
.in-duel .chat { visibility: hidden }
@media (max-width: 760px) {
  .chat { left: 8px; right: 8px; width: auto; bottom: 150px }
  .chat-log { height: 96px }
}
@media (hover: none) { .chat-fold kbd { display: none } }