/* Shared scene, combat, menus and responsive placement of the puzzle panel. */
:root {
  color-scheme: dark;
  --bg: #191d24; --panel: #222731; --panel-light: #2c323d; --line: #404752;
  --text: #f0ece4; --muted: #b9bcc4; --quiet: #979eab; --accent: #b7c5d6;
  --gold: #e3be7c; --red: #e3947e; --green: #6d985e; --yellow: #b99c53;
  font-family: 'Segoe UI', system-ui, sans-serif; font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 280px; min-height: 100%; background: var(--bg); }
/* Arabic prose joins naturally; the duel itself keeps its physical left/right
   staging through its markup, while each text panel declares its direction. */
:lang(ar) :is(.brand small, .eyebrow, .victory-loot span, .combat-pop small, .empty-slot small, .shop-item .eyebrow, .ending-stats span) { letter-spacing: normal; }
:lang(ar) :is(.depth h1, .fighter-heading h2, .shop-heading h2, .ending-panel h2) { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }
html:lang(ko) { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }
:lang(ko) :is(.brand small, .eyebrow, .victory-loot span, .combat-pop small, .empty-slot small, .ending-stats span) { letter-spacing: normal; }
:lang(ko) :is(.depth h1, .fighter-heading h2, .shop-heading h2, .shop-item h3, .ending-panel h2, dialog h2) { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; }
:lang(ko) :is(p, .language-note, .notice, .native-entry-hint) { word-break: keep-all; overflow-wrap: anywhere; }
body { margin: 0; color: var(--text); background: radial-gradient(ellipse at 50% 5%, #64748b12, transparent 65%), var(--bg); font-size: 14px; line-height: 1.5; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .4; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
button, a { transition: background .16s, border-color .16s, color .16s; }
button:not(:disabled):active { translate: 0 1px; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
em { font-style: normal; color: var(--quiet); font-weight: 400; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.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; }
/* The game fills exactly the visible screen. dvh follows mobile browser bars
   (100vh would count the space behind them and push the keyboard off-screen).
   One region per layout flexes; everything else keeps its content size. */
.page-shell { width: 100%; max-width: 1440px; height: 100vh; height: 100dvh; margin: auto; padding: env(safe-area-inset-top) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); display: flex; flex-direction: column; }
/* One slim bar: brand, the zone and its progress, then gold, settings and account. */
.site-header { min-height: clamp(48px, 7dvh, 64px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border-bottom: 1px solid #b7c5d618; }
.brand { display: flex; gap: 9px; align-items: center; text-decoration: none; width: fit-content; }
.brand > .icon { width: 22px; height: 30px; color: var(--gold); stroke-width: 1.3; }
.brand > span { font-family: Georgia, serif; font-size: 20px; letter-spacing: 2px; }
.header-actions { display: flex; gap: 6px; align-items: center; justify-self: end; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 9px; width: 38px; height: 38px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); }
.icon-button:hover { background: var(--panel-light); color: var(--text); border-color: var(--line); }
.icon-button .icon { width: 18px; height: 18px; }
.gold-resource { display: flex; align-items: center; gap: 7px; margin-right: 14px; color: var(--gold); font-variant-numeric: tabular-nums; }
.gold-resource .icon { width: 19px; height: 19px; }
.gold-resource strong { font-size: 18px; font-weight: 600; }
.depth { text-align: center; }
.save-warning { display: inline-flex; color: var(--red); margin-right: 4px; }
.save-warning .icon { width: 18px; height: 18px; }
.eyebrow { display: block; color: var(--quiet); font-size: 9px; letter-spacing: 1.7px; line-height: 1.6; font-weight: 600; }
.depth h1 { font: 16px/1.4 Georgia, serif; margin-top: 2px; }
.zone-progress { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; color: var(--zone-accent); font-size: 9px; line-height: 1; }
.zone-progress i { width: 5px; height: 5px; border: 1px solid #6a7381; border-radius: 50%; }
.zone-progress i.lit { background: var(--zone-accent); border-color: var(--zone-accent); }
.zone-progress > .icon { width: 13px; height: 13px; margin-left: 4px; }
.zone-progress > span { min-width: 26px; }
.battle-layout { --actor-max: 448px; --tile: clamp(40px, 5.5dvh, 56px); --tile-gap: 7px; --history-max: calc(4 * var(--track-tile) + 3 * var(--tile-gap) + 8px); flex: 1 1 0; min-height: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 24px; padding: clamp(10px, 2.4dvh, 36px) 0; }
/* The actor row takes what the screen allows, up to a comfortable size; the art scales to it. */
.combatants { grid-column: 1 / -1; grid-row: 1; align-self: stretch; align-content: center; position: relative; display: grid; grid-template-columns: subgrid; grid-template-rows: 36px minmax(56px, var(--actor-max)) minmax(42px, auto) auto minmax(28px, auto) minmax(68px, auto); }
/* One continuous scene, anchored to the unanimated feet in alignScenery().
   Full viewport width avoids cut-off scenery on large monitors. */
.battle-scenery { position: absolute; z-index: -1; inset: 0 auto; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 70px), transparent); pointer-events: none; }
.dungeon-scene { position: absolute; display: block; left: 50%; top: var(--scene-top, 0); transform: translateX(-50%); width: var(--scene-width, 100%); height: var(--scene-height, 100%); max-width: none; object-fit: cover; }
.overgrowth-scene { overflow: hidden; background: #527eaa; }
.battle-scenery:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #191d2433 22%, #191d249e 40%, #191d249e 60%, #191d2433 78%), linear-gradient(to bottom, #191d2440, transparent 35%, #191d2473); }
/* Small labels need separation from both the pale stone and bright furnace. */
.battle-layout :is(.fighter-heading, .health-numbers, .pocket-caption, .word-toolbar, .rune-effect, .preview-label, .board-caption) { text-shadow: 0 1px 2px #10141bf2, 0 0 8px #10141bd9; }
.fighter { grid-row: 1 / span 6; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 0; min-width: 0; text-align: center; width: 100%; max-width: 440px; margin: 0 auto; }
.player-panel { grid-column: 1; }
.enemy-panel { grid-column: 3; }
.fighter-heading { grid-row: 3; min-width: 0; min-height: 42px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 8px; }
.fighter-heading h2 { font: 26px/1.15 Georgia, serif; text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; }
.boss-encounter .fighter-heading { color: var(--gold); }
.boss-encounter h2 { font-size: 23px; }
.fighter-health { grid-row: 4; width: min(85%, 200px); margin: 0 auto; }
.health-numbers { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; min-height: 1.75em; font-size: 14px; font-variant-numeric: tabular-nums; }
.health-numbers > .icon { width: 14px; height: 14px; color: var(--red); }
.health-shield { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 1px 5px; color: #bed6ef; background: #252e3bee; border: 1px solid #8cb0d050; border-radius: 10px; font-size: .85em; font-weight: 600; white-space: nowrap; }
.health-shield .icon { width: 1em; height: 1em; }
.health-numbers strong { font-weight: 600; }
.meter { height: 8px; border-radius: 4px; border: 1px solid #a9b4c330; background: #11151b; overflow: hidden; }
.meter > span { height: 100%; display: block; background: #c48a72; box-shadow: inset 0 1px #fff4; }
.enemy-health .meter > span { background: #d28a77; }
.enemy-health .health-numbers > .icon { color: var(--red); }
.low-health .meter > span { background: #e78371; }
.actor-stage { --foot-inset: 20px; grid-row: 2; min-height: 0; position: relative; margin-top: 12px; --toward: 1; container-type: size; --actor-height: 100cqh; }
.enemy-stage { --toward: -1; }
.actor-wrap { position: absolute; inset: 0 0 var(--foot-inset); display: flex; align-items: flex-end; justify-content: center; transform-origin: center bottom; }
.creature, .adventurer { width: 100%; max-width: 310px; height: auto; max-height: calc(var(--actor-height) - 28px); overflow: visible; filter: drop-shadow(0 2px 0 #0b15184a); }
.actor-wrap > svg, .enemy-figure { animation: breathe 4.5s ease-in-out infinite; transform-origin: center bottom; }
.enemy-figure { position: relative; flex: 0 0 auto; width: min(100%, 310px, calc((var(--actor-height) - var(--art-clearance, 28px)) * 8 / 7)); }
.enemy-figure > .creature { display: block; width: 100%; max-height: none; }
.adventurer { animation-delay: -1.8s !important; }
.enemy-figure.airborne { margin-bottom: 32px; animation-name: bob; }
.ground-shadow { --shadow-height: 16px; position: absolute; left: 20%; right: 20%; bottom: calc(var(--foot-inset) - var(--shadow-height) / 2); height: var(--shadow-height); border-radius: 50%; background: #0b0e14a8; filter: blur(3px); }
.fallen .actor-wrap { opacity: .5; rotate: -12deg; translate: 0 12px; filter: grayscale(.7); }
.fallen .actor-wrap > svg, .defeated .enemy-figure { animation: none; }
.defeated .actor-wrap { opacity: .15; filter: grayscale(1); transform: translateY(15px) scale(.9); }
.shield-active, .enemy-ward { position: absolute; bottom: 0; left: 50%; translate: -50% 0; color: #bed6ef; background: #252e3bee; border: 1px solid #8cb0d050; border-radius: 20px; padding: 3px 9px; white-space: nowrap; font-size: 11px; z-index: 4; }
.shield-active .icon, .enemy-ward .icon { width: 13px; height: 13px; }
.intent { position: absolute; left: 50%; bottom: calc(100% - var(--sprite-top) + var(--intent-gap, 12px)); transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 7px; padding: 4px 11px; border: 1px solid #b7c5d626; border-radius: 20px; background: #191d24e6; color: #e9b795; font-variant-numeric: tabular-nums; line-height: 1.2; }
.intent-main { display: inline-flex; align-items: center; gap: 5px; font-size: 18px; font-weight: 650; }
.intent-main > .icon { width: 19px; height: 19px; }
/* The hit that interrupts it, and a countdown bubble on the corner when it lands later. */
.intent-break { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 4px; border-radius: 10px; background: #ecd9a824; color: #f0dcaa; font-size: 12px; font-weight: 700; }
.intent-break .icon { width: 12px; height: 12px; }
.intent-evasion { display: inline-flex; align-items: center; gap: 2px; padding-inline-start: 6px; border-inline-start: 1px solid #b7c5d63b; color: #cbd9e6; font-size: 12px; }
.intent-evasion .icon { width: 13px; height: 13px; }
.intent-turns { position: absolute; top: -8px; right: -9px; display: inline-flex; align-items: center; gap: 1px; padding: 1px 5px 1px 3px; border-radius: 10px; background: #ece6da; color: #1b1f27; font-size: 11px; font-weight: 750; box-shadow: 0 2px 6px #0b0e1499; }
.intent-turns .icon { width: 10px; height: 10px; }
/* Words only on hover (a tap on phones shows the same text as a notice). */
.intent-tip { display: none; }
@media (hover: hover) and (pointer: fine) {
.intent-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; width: max-content; max-width: 230px; padding: 7px 10px; border-radius: 8px; background: #efe3cb; color: #2a2522; font-size: 12px; font-weight: 500; line-height: 1.35; text-align: center; white-space: normal; box-shadow: 0 8px 20px #0b0e1480; pointer-events: none; }
.intent:hover .intent-tip, .intent:focus-visible .intent-tip { display: block; }
}
.intent.poison { color: #c7a5e1; }
.intent.guard, .intent.stun, .intent.cleared { color: #bed6ef; }
.intent.charge, .intent.heavy { color: var(--gold); }
.pocket-items { grid-row: 6; align-self: start; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 10px auto 0; max-width: 210px; }
.pocket-item, .pocket-empty { width: 54px; height: 56px; border: 1px solid #7b879655; background: #303743b3; border-radius: 7px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.pocket-item { padding: 5px 1px; }
.pocket-item:hover { background: #3b4452; border-color: #a2b1c3; }
.pocket-item > .icon { width: 23px; height: 23px; }
.pocket-item > span { font-size: 10px; color: var(--muted); }
.pocket-empty { color: #77808f; border-style: dashed; background: transparent; font-size: 22px; }
.pocket-caption { display: none; }
.pocket-item.red { color: var(--red); }
.pocket-item.gold { color: var(--gold); }
.pocket-item.blue { color: #a5c6cb; }
.pocket-item.sage { color: var(--accent); }
.puzzle-panel { grid-column: 2; grid-row: 1; align-self: stretch; min-width: 0; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: 12px; position: relative; }
.notice { position: fixed; z-index: 40; left: 50%; bottom: 24px; max-width: min(calc(100vw - 32px), 420px); padding: 9px 14px; border-radius: 10px; background: #efe3cb; color: #2a2522; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center; text-wrap: balance; box-shadow: 0 10px 28px #0b0e1480; opacity: 0; translate: -50% 6px; pointer-events: none; transition: opacity .18s, translate .18s; }
.notice.show { opacity: 1; translate: -50% 0; }
.notice.notice-error { background: #f2cfc2; color: #4b1e14; }
/* Square powers, items and coins in flight (positioned by app.js). */
.flight-layer { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.flight { position: absolute; left: 0; top: 0; will-change: transform; }
.flight-body { display: grid; place-items: center; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; filter: drop-shadow(0 0 6px currentColor); will-change: transform, opacity; }
.flight-body .icon { width: 22px; height: 22px; }
.flight.attack .flight-body { color: #f4d58f; }
.flight.heal .flight-body { color: #b9ec93; }
.flight.boost .flight-body { color: #ffd67a; font: 800 17px/1 'Segoe UI', sans-serif; }
.flight.boosted .flight-body { width: 42px; height: 42px; filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 3px #fff8); }
.flight.boosted .flight-body .icon { width: 32px; height: 32px; }
.flight.coin .flight-body { width: 20px; height: 20px; color: var(--gold); filter: drop-shadow(0 0 4px #f2c66d99); }
.flight.coin .flight-body .icon { width: 18px; height: 18px; }
.flight.item .flight-body { width: 40px; height: 40px; background: #1b2029e6; box-shadow: 0 0 0 1px #ffffff26, 0 8px 18px #0009; filter: none; }
.flight.item .flight-body .icon { width: 24px; height: 24px; filter: drop-shadow(0 0 5px currentColor); }
.flight.item.red .flight-body { color: var(--red); }
.flight.item.gold .flight-body { color: var(--gold); }
.flight.item.blue .flight-body { color: #a5c6cb; }
.flight.item.sage .flight-body { color: var(--accent); }
.pocket-item.launched { opacity: .25; transition: opacity .15s; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: #d6ba86; color: #30291f; border: 1px solid #e8ce9d; border-bottom: 3px solid #9c7d49; padding: 12px 18px; border-radius: 6px; font-weight: 600; font-size: 13px; }
.primary-button:hover { background: #e8ce9d; }
.primary-button .icon { width: 17px; height: 17px; }
.full-width { width: 100%; }
.victory-loot { position: absolute; inset: 15% 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--gold); }
.victory-loot .icon { width: 40px; height: 40px; filter: drop-shadow(0 0 15px #f4c74b50); }
.victory-loot span { letter-spacing: 2px; font-size: 10px; }
.site-header { flex-shrink: 0; }
.shop-view { flex: 1 1 0; min-height: 0; overflow-y: auto; width: 100%; max-width: 1000px; margin: 0 auto; padding-block: clamp(16px, 2svh, 28px); display: flex; flex-direction: column; justify-content: safe center; }
/* A finished run's summary can be taller than the screen; it scrolls inside the game area. */
.ended-layout { overflow-y: auto; overflow-x: hidden; }
.effect-layer { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.exchange-receipt { grid-row: 5; min-height: 26px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: 9px; row-gap: 2px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.receipt-heal { color: #b9e58c; }
.receipt-shield { color: #bed6ef; }
.receipt-hurt { color: #f0a08d; }
.receipt-damage { color: #f4cf8c; }
.receipt-miss { color: #cbd9e6; }
.receipt-stun, .receipt-kill { color: var(--gold); }
.receipt-stun { display: inline-flex; align-items: center; }
.receipt-stun .icon { width: 16px; height: 16px; }
.combat-pop { position: absolute; left: 50%; top: 12%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; color: #ffe0a2; text-shadow: 0 2px 0 #141820, 0 0 12px #0a0d13; white-space: nowrap; animation: combat-pop .65s ease-out both; }
.combat-pop strong { font-size: 45px; line-height: 1.1; font-weight: 800; letter-spacing: -2px; -webkit-text-stroke: 1.5px #141820; paint-order: stroke fill; }
.combat-pop small { font-size: 11px; font-weight: 700; letter-spacing: 2px; margin-top: 5px; background: #191d24ed; border-radius: 3px; padding: 2px 6px; }
.combat-pop .icon { width: 42px; height: 42px; }
.player-stage .combat-pop.strike { color: #ffb09b; }
.combat-pop.healing { color: #c7ffa6; }
.combat-pop.poison { color: #dfb4ff; }
.combat-pop.ward { color: #c1e0ff; }
.impact-ring { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; left: 15%; top: 18%; animation: ring-out .6s ease-out both; border: 3px solid #f4cc8270; background: radial-gradient(transparent 35%, #edc67a33); }
.impact-ring.healing { border-color: #c1f69e90; background: radial-gradient(transparent 30%, #a2ea6b50); }
.impact-ring.poison { border-color: #d3a3fb70; }
.impact-ring.ward { border-color: #a5cceaaa; }
.hit-slash { width: 65%; height: 7px; background: #fff5c8; position: absolute; left: 20%; top: 50%; rotate: -36deg; box-shadow: 0 0 16px #fff2ba; animation: slash .35s ease-out both; }
.hit-slash:after { content: ''; position: absolute; left: 25%; top: -6px; width: 65%; height: 5px; rotate: 72deg; background: #ffefc3; }
.attacking .actor-wrap { animation: lunge .48s ease both; }
.taking-hit .actor-wrap { animation: recoil .5s ease both; }
.healing .actor-wrap { animation: heal-glow .65s ease both; }
.poison-hit .actor-wrap { animation: poison-flash .6s ease both; }
.blocking .actor-wrap { filter: drop-shadow(0 0 16px #a5ccea); }
.heal-spark { position: absolute; left: calc(14% + var(--particle) * 16%); top: calc(60% + var(--particle) * 4%); color: #ceffa3; font-size: 24px; font-weight: bold; animation: heal-rise .65s ease-out both; animation-delay: calc(var(--particle) * 35ms); }
.torch { animation: torch 3s ease-in-out infinite; }
.motes { animation: motes 6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1 .985; } }
@keyframes lunge { 0%, 100% { translate: 0; } 25% { translate: calc(var(--toward) * -8px) 0; } 55% { translate: calc(var(--toward) * 30px) -6px; } }
@keyframes recoil { 0%, 100% { translate: 0; filter: none; } 20% { translate: calc(var(--toward) * -17px) 0; filter: brightness(2.4) sepia(.6); } 45% { translate: calc(var(--toward) * 5px) 0; filter: brightness(1.5); } }
@keyframes heal-glow { 0%,100% { filter: none; } 40% { filter: drop-shadow(0 0 22px #a6f477) brightness(1.4); } }
@keyframes poison-flash { 40% { filter: drop-shadow(0 0 18px #b174e4) hue-rotate(35deg); } }
@keyframes combat-pop { 0% { opacity: 1; transform: translateY(15px) scale(.7); } 22% { opacity: 1; transform: translateY(-3px) scale(1.1); } 80%,100% { opacity: 1; transform: translateY(-12px) scale(1); } }
@keyframes ring-out { 0% { opacity: 0; scale: .4; } 25% { opacity: 1; } 100% { opacity: 0; scale: 1.35; } }
@keyframes slash { 0% { opacity: 0; scale: .1 1; } 25% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1.15 1; } }
@keyframes heal-rise { 0% { opacity: 0; translate: 0 10px; } 25% { opacity: 1; } 100% { opacity: 0; translate: 0 -75px; } }
@keyframes torch { 0%,100% { opacity: .85; } 40% { opacity: 1; } 60% { opacity: .7; } }
@keyframes motes { 0%,100% { translate: 0; opacity: .2; } 50% { translate: 0 -7px; opacity: .7; } }
.small-button { background: #ccba6a15; color: var(--gold); border: 1px solid #d3bc6555; border-radius: 4px; padding: 7px 12px; font-size: 11px; }
.small-button .icon { height: 13px; width: 13px; }
.ending-panel { position: relative; grid-column: 2; grid-row: 1; align-self: center; border: 1px solid #655c4b; border-radius: 12px; background: radial-gradient(ellipse at 50% 0, #6d643522, transparent 70%), var(--panel); text-align: center; padding: 38px 30px; }
.ending-panel h2 { font-family: Georgia, serif; font-size: 33px; line-height: 1.2; font-weight: 400; margin: 12px 0; }
/* End of a run: hero icon, title, where, stat chips, the word as tiles, the haul, actions. */
.ending-hero { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle, #e9b97a26, transparent 70%); color: var(--gold); }
.ending-hero > .icon { width: 40px; height: 40px; stroke-width: 1.4; filter: drop-shadow(0 0 12px #e9b97a66); }
.ending-hero.fading > .icon { color: #9aa3b2; filter: none; animation: lantern-out 1.6s ease-out both; }
@keyframes lantern-out { 0% { color: var(--gold); filter: drop-shadow(0 0 14px #e9b97a99); } 60% { color: var(--gold); } 100% { color: #9aa3b2; filter: none; } }
.burst-coin { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2c4, #e2b453 55%, #a57a2a); opacity: 0; animation: coin-burst .9s calc(var(--i) * 40ms + .15s) cubic-bezier(.2, .8, .3, 1) both; }
@keyframes coin-burst { 0% { opacity: 1; transform: rotate(calc(var(--i) * 45deg)) translateY(0) scale(.5); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--i) * 45deg)) translateY(-58px) scale(1); } }
.ending-where { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.ending-chips { display: flex; justify-content: center; gap: 10px; margin: 18px 0 0; }
.ending-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #1d232c; border: 1px solid #3a4453; font-size: 17px; }
.ending-chip > .icon { width: 17px; height: 17px; color: var(--gold); }
.ending-chip strong { font-weight: 650; color: #ece4d5; }
.ending-word { margin: 20px 0 0; }
.ending-word > span { display: block; font-size: 11px; color: var(--quiet); margin-bottom: 8px; }
.ending-tiles { display: flex; justify-content: center; gap: 5px; }
.ending-tile { display: grid; place-items: center; width: 34px; height: 38px; border-radius: 5px; background: #3a4250; color: #ece4d5; font-size: 18px; font-weight: 650; }
.ending-tile.found { background: #4c7a46; }
.ending-haul { margin: 18px 0 0; }
.ending-haul .loot-summary { margin: 6px 0 0; }
.ending-haul.banked .loot-gold strong { font-size: 36px; }
.ending-haul.lost > span { font-size: 11px; color: var(--red); }
.ending-haul.lost .loot-gold { color: var(--red); opacity: .8; }
.ending-line { margin: 14px 0 10px; font-size: 13px; color: var(--muted); }
/* The one-time question about anonymous stats: two equal answers. */
.stats-ask { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: #1d232c; border: 1px solid #3a4453; text-align: center; }
.stats-ask strong { display: block; font-size: 17px; color: #ece4d5; }
.stats-ask p { margin: 6px 0 12px; font-size: 15px; color: var(--muted); }
.stats-ask-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats-ask-actions .secondary-button { min-height: 46px; font-size: 16px; }
.stats-ask a { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--muted); }
.ending-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.ending-actions.single { grid-template-columns: 1fr; }
.ending-actions > * { min-height: 48px; padding: 10px 12px; font-size: 14px; text-decoration: none; }
.ending-actions .icon { width: 16px; height: 16px; }
.ending-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; border: 0; background: none; color: var(--gold); font-size: 13px; cursor: pointer; }
.ending-link .icon { width: 15px; height: 15px; }
.ending-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-block: 1px solid var(--line); margin: 26px 0; padding: 20px 0; }
.ending-stats strong { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 28px; color: #e0d5bd; }
.ending-stats span { display: block; font-size: 7px; letter-spacing: 1px; color: var(--quiet); margin-top: 4px; }
.loot-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 16px 0; }
.loot-gold { display: inline-flex; align-items: center; gap: 7px; color: var(--gold); font-size: 13px; }
.loot-gold strong { font: 29px/1.1 Georgia, serif; }
.loot-card { display: inline-flex; gap: 7px; align-items: center; padding: 7px 10px; border: 1px solid #8d98ac45; border-radius: 5px; background: #aebcd208; font-size: 11px; color: var(--text); }
.loot-card .icon { width: 18px; height: 18px; color: var(--gold); }
.pending-haul { border-block: 1px solid var(--line); margin: 22px 0; padding: 18px 0; }
.pending-haul h3 { font-size: 12px; font-weight: 500; color: var(--muted); }
.ending-panel .loot-summary { justify-content: center; }
.pending-haul p { font-size: 11px; color: var(--muted); }
.stash-note { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 24px 0; }
dialog { border: 1px solid #5f6a7b; border-radius: 12px; width: min(510px, calc(100% - 32px)); max-height: calc(100dvh - 64px); padding: 33px 32px 28px; color: var(--text); background: #252c37; box-shadow: 0 24px 110px #080b1199; scrollbar-width: thin; scrollbar-color: #5f6a7b transparent; }
dialog::backdrop { background: #0c1119cc; backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-color: transparent; }
/* Every dialog: a card that eases in; on phones a sheet that slides up from the bottom. */
dialog[open] { animation: dialog-in .22s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (max-width: 559px) {
:root dialog { width: 100%; max-width: none; margin: auto 0 0; border-width: 1px 0 0; border-radius: 18px 18px 0 0; max-height: 88dvh; padding: 26px 18px calc(18px + env(safe-area-inset-bottom)); }
dialog::before { content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 38px; height: 4px; border-radius: 2px; background: #5f6a7b; }
dialog[open] { animation: sheet-up .26s cubic-bezier(.2, .9, .3, 1); }
@keyframes sheet-up { from { transform: translateY(100%); } }
}
/* One short line under a title, and a two-button choice: the way back, then the action. */
.dialog-line { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.dialog-actions > button { min-height: 48px; padding: 10px 12px; font-size: 14px; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #5f6a7b; border-radius: 6px; background: transparent; color: var(--text); font-weight: 600; }
.secondary-button:hover { background: #2f3744; }
.dialog-art { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: 16px; background: #1b2029; color: var(--gold); }
.dialog-art .supply-art { width: 48px; height: 48px; }
.dialog-art > .icon { width: 30px; height: 30px; }
/* Settings: a short list of switches, then four tiles. */
.settings-list { display: grid; margin-top: 16px; }
.settings-item { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid #3a4453; font-size: 15px; }
.settings-item > .icon { width: 20px; height: 20px; color: var(--gold); }
.settings-item select { font: inherit; font-size: 14px; color: var(--text); background: #1d232c; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; max-width: 46vw; cursor: pointer; }
.switch { appearance: none; -webkit-appearance: none; position: relative; width: 46px; height: 28px; margin: 0; border-radius: 14px; background: #3a4453; cursor: pointer; transition: background .18s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #e8e2d6; box-shadow: 0 1px 3px #0006; transition: translate .18s; }
.switch:checked { background: #c9a866; }
.switch:checked::after { translate: 18px 0; }
.switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.settings-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.settings-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 8px; border: 1px solid #3f4a5a; border-radius: 12px; background: #1f252f; color: var(--text); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.settings-tile > .icon { width: 24px; height: 24px; color: var(--gold); }
.settings-tile:hover:not(:disabled) { background: #283040; border-color: #5a6578; }
.settings-tile[data-action="restart-prompt"] > .icon, .settings-tile[data-action="restart"] > .icon { color: #e3a08c; }
.run-stats { margin: 18px 0 0; text-align: center; }
.run-haul { margin-top: 16px; text-align: center; }
.run-haul .loot-summary { justify-content: center; margin: 8px 0 0; }
dialog > .eyebrow { color: var(--accent); margin-bottom: 7px; }
dialog h2 { font-family: Georgia, serif; font-size: 28px; line-height: 1.2; font-weight: 400; max-width: 92%; }
.dialog-intro { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 12px 0 23px; }
.help-rules { display: flex; flex-direction: column; gap: 18px; margin: 23px 0; }
.help-rules > div { display: flex; gap: 14px; }
.help-rules > div > .icon { color: #e0c18a; height: 19px; width: 19px; margin-top: 2px; }
.help-rules p { font-size: 11px; line-height: 1.7; color: var(--muted); }
.help-rules strong { display: block; color: var(--text); font-weight: 500; font-size: 12px; margin-bottom: 3px; }
.help-footnote { font-size: 10px; color: var(--quiet); line-height: 1.6; margin-bottom: 20px; }
/* The first look: three numbered steps, each with a small picture of what it means. */
.guide-steps { list-style: none; margin: 20px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 20px; counter-reset: step; }
.guide-steps > li > strong { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.guide-steps > li > strong::before { counter-increment: step; content: counter(step); flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d6ba8622; color: #e0c18a; font-size: 12px; }
.guide-row { display: flex; align-items: center; gap: 12px; padding-inline-start: 32px; }
.guide-row > p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.guide-row .help-example { border: 0; padding: 0; }
.guide-row .help-example p { font-size: 12px; line-height: 1.6; }
.guide-art { display: flex; gap: 6px; flex: 0 0 auto; }
.guide-chip { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border: 1px solid #b4954c55; border-radius: 8px; background: #b4954c14; color: #e0c18a; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.guide-chip .icon { width: 18px; height: 18px; }
.guide-chip.heal { border-color: #a4c78255; background: #a4c78214; color: #add48e; }
.guide-chip.move { border-color: #b7c5d626; border-radius: 20px; background: #191d24; color: #e9b795; }
.guide-chip.stun { border-color: #f1d27a44; border-radius: 20px; background: #f1d27a12; color: #f1d27a; }
.guide-more { margin-top: 14px; }
.guide-more > summary { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; color: var(--quiet); font-size: 12px; cursor: pointer; list-style: none; }
.guide-more > summary::-webkit-details-marker { display: none; }
.guide-more > summary .icon { width: 14px; height: 14px; transition: transform .2s; }
.guide-more[open] > summary .icon { transform: rotate(180deg); }
.guide-more[open] > summary { margin-bottom: 10px; }
/* Settings: plain rows with comfortable tap height, in two groups. */
.settings-group { display: grid; margin: 16px 0 0; padding-top: 8px; border-top: 1px solid #3d4858; }
dialog h2 + .settings-group { margin-top: 18px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 6px 2px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 14px; text-align: start; text-decoration: none; cursor: pointer; }
.settings-row:not(label):hover { background: #2f3744; }
.settings-row select { font: inherit; font-size: 13px; color: var(--text); background: #1d232c; border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; max-width: 55%; cursor: pointer; }
.settings-row input[type="checkbox"] { accent-color: #d6ba86; width: 20px; height: 20px; cursor: pointer; }
.settings-note { font-size: 11px; line-height: 1.5; color: var(--quiet); margin: -6px 2px 6px; }
.settings-note a { color: inherit; }
.settings-legal { display: block; width: fit-content; margin: 18px auto 0; padding: 6px 0; font-size: 12px; color: var(--muted); text-underline-offset: 3px; }
.journal { padding-left: 20px; font-size: 12px; color: var(--muted); }
.journal li { padding: 9px 0; border-bottom: 1px solid #3d4858; }
.journal li:first-child { color: var(--accent); }
.load-error { padding: 12px; background: #483d2a; border-radius: 6px; border: 1px solid #b69b5c66; color: #e8d7aa; font-size: 12px; margin-top: 20px; }
.load-error button { color: inherit; border: 0; background: transparent; text-decoration: underline; }
/* Seen only if the game takes a moment to start: a lantern fades in after a beat,
   so a fast load shows nothing but the game. */
.loading { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; opacity: 0; animation: loading-appear .4s .35s ease-out forwards; }
.loading-lantern { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px #e9b97a66); animation: lantern-glow 1.6s ease-in-out infinite alternate; }
@keyframes loading-appear { to { opacity: 1; } }
@keyframes lantern-glow { to { filter: drop-shadow(0 0 18px #e9b97aaa); opacity: .75; } }
/* Enlarge the playable composition together on large screens. This length is
   shared with wordle.css; it changes layout, never zooms/transforms sprite art.
   Height bounds the composition so ultrawide space does not pull it apart. */
@media (min-width: 1600px) and (min-height: 800px) {
:root { --game-unit: clamp(1px, min(calc(100dvh / 900), calc(100vw / 1600)), 2px); }
.page-shell { max-width: calc(1328 * var(--game-unit)); padding-inline: max(calc(24 * var(--game-unit)), env(safe-area-inset-left)) max(calc(24 * var(--game-unit)), env(safe-area-inset-right)); padding-bottom: max(calc(16 * var(--game-unit)), env(safe-area-inset-bottom)); }
.site-header { min-height: calc(64 * var(--game-unit)); gap: calc(20 * var(--game-unit)); }
.brand { gap: calc(9 * var(--game-unit)); }
.brand > span { font-size: calc(20 * var(--game-unit)); }
.brand > .icon { width: calc(22 * var(--game-unit)); height: calc(30 * var(--game-unit)); }
.depth h1 { font-size: calc(16 * var(--game-unit)); }
.zone-progress { font-size: calc(9 * var(--game-unit)); gap: calc(4 * var(--game-unit)); margin-top: calc(4 * var(--game-unit)); }
.zone-progress i { width: calc(5 * var(--game-unit)); height: calc(5 * var(--game-unit)); }
.zone-progress > .icon { width: calc(13 * var(--game-unit)); height: calc(13 * var(--game-unit)); }
.icon-button { width: calc(38 * var(--game-unit)); height: calc(38 * var(--game-unit)); padding: calc(9 * var(--game-unit)); }
.icon-button .icon, .gold-resource .icon { width: calc(18 * var(--game-unit)); height: calc(18 * var(--game-unit)); }
.gold-resource { gap: calc(7 * var(--game-unit)); margin-right: calc(14 * var(--game-unit)); }
.gold-resource strong { font-size: calc(18 * var(--game-unit)); }
.battle-layout { --actor-max: calc(460 * var(--game-unit)); --tile: calc(56 * var(--game-unit)); --tile-gap: calc(7 * var(--game-unit)); grid-template-columns: minmax(0, 1fr) minmax(0, calc(440 * var(--game-unit))) minmax(0, 1fr); column-gap: calc(24 * var(--game-unit)); }
.combatants { grid-template-rows: calc(36 * var(--game-unit)) minmax(calc(56 * var(--game-unit)), var(--actor-max)) minmax(calc(42 * var(--game-unit)), auto) auto minmax(calc(28 * var(--game-unit)), auto) minmax(calc(68 * var(--game-unit)), auto); }
.fighter { max-width: calc(440 * var(--game-unit)); }
.actor-stage { --foot-inset: calc(20 * var(--game-unit)); --art-clearance: calc(28 * var(--game-unit)); margin-top: calc(12 * var(--game-unit)); }
.creature, .adventurer { max-width: calc(310 * var(--game-unit)); }
.enemy-figure { width: min(100%, calc(310 * var(--game-unit)), calc((var(--actor-height) - var(--art-clearance)) * 8 / 7)); }
.fighter-heading { min-height: calc(42 * var(--game-unit)); padding-bottom: calc(8 * var(--game-unit)); }
.fighter-heading h2 { font-size: calc(26 * var(--game-unit)); }
.boss-encounter h2 { font-size: calc(23 * var(--game-unit)); }
.fighter-health { width: min(85%, calc(200 * var(--game-unit))); }
.meter { height: calc(8 * var(--game-unit)); }
.health-numbers { font-size: calc(14 * var(--game-unit)); margin-top: calc(8 * var(--game-unit)); gap: calc(6 * var(--game-unit)); }
.health-numbers > .icon { width: calc(14 * var(--game-unit)); height: calc(14 * var(--game-unit)); }
.intent { gap: calc(7 * var(--game-unit)); padding: calc(4 * var(--game-unit)) calc(11 * var(--game-unit)); }
.intent-main { font-size: calc(18 * var(--game-unit)); gap: calc(5 * var(--game-unit)); }
.intent-main > .icon { width: calc(19 * var(--game-unit)); height: calc(19 * var(--game-unit)); }
.intent-break, .intent-evasion { font-size: calc(12 * var(--game-unit)); }
.intent-break .icon, .intent-evasion .icon { width: 1em; height: 1em; }
.intent-turns { font-size: calc(11 * var(--game-unit)); }
.intent-turns .icon { width: calc(10 * var(--game-unit)); height: calc(10 * var(--game-unit)); }
.boss-rule.root-status .icon { width: calc(16 * var(--game-unit)); height: calc(16 * var(--game-unit)); flex-basis: calc(16 * var(--game-unit)); }
.exchange-receipt { min-height: calc(26 * var(--game-unit)); font-size: calc(11 * var(--game-unit)); }
.pocket-items { max-width: calc(210 * var(--game-unit)); gap: calc(7 * var(--game-unit)); margin-top: calc(10 * var(--game-unit)); }
.pocket-item, .pocket-empty { width: calc(54 * var(--game-unit)); height: calc(56 * var(--game-unit)); }
.pocket-item > .icon { width: calc(23 * var(--game-unit)); height: calc(23 * var(--game-unit)); }
.pocket-item > span, .pocket-caption { font-size: calc(10 * var(--game-unit)); }
.combat-pop strong { font-size: calc(45 * var(--game-unit)); }
.combat-pop small { font-size: calc(11 * var(--game-unit)); }
.combat-pop .icon { width: calc(42 * var(--game-unit)); height: calc(42 * var(--game-unit)); }
}
@media (max-width: 1100px) {
.battle-layout { --actor-max: 368px; grid-template-columns: minmax(0, 1fr) minmax(0, 360px) minmax(0, 1fr); column-gap: 16px; }
.fighter-heading h2 { font-size: 23px; }
.boss-encounter h2 { font-size: 20px; }
.pocket-items { gap: 5px; }
.pocket-item, .pocket-empty { width: 46px; height: 50px; }
}
/* Portrait phones and tablets share a centered duel above the word. */
@media (max-width: 900px) and (orientation: portrait), (max-width: 699px) {
.page-shell { max-width: 640px; height: auto; min-height: 100dvh; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
/* One row: where you are (zone and progress to the boss), then gold, settings, account. */
.site-header { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 0 7px; }
.brand { display: none; }
.depth { grid-column: 1; grid-row: 1; min-width: 0; text-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.depth h1 { font-size: 15px; line-height: 1.2; margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-progress { justify-content: flex-start; margin-top: 0; }
.header-actions { grid-column: 2; grid-row: 1; gap: 0; }
.gold-resource { margin-right: 6px; }
.icon-button { width: 38px; height: 38px; padding: 9px; }
/* The duel takes the space the word and keyboard leave; the art scales with it.
   Names, health, the last exchange and items sit above it like a battle-game HUD,
   and the guess history floats over the floor of the scene (see wordle.css), so
   the fighters keep their size however many guesses there are. */
/* Equal columns keep both HUDs and the whole fight centered. Character size
   must fit this composition; it must never change the column balance. */
.battle-layout { --intent-gap: 8px; --tile: clamp(36px, 5.6dvh, 52px); --tile-gap: 5px; --overlay-rows: 3; min-height: min-content; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(min-content, 1fr) auto; column-gap: 12px; padding-block: 2px; }
.combatants { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: inherit; grid-template-rows: auto auto 0 auto minmax(220px, 1fr); padding-inline: 26px; z-index: 1; }
.fighter { grid-row: 1 / span 5; }
.fighter-heading { grid-row: 1; }
.fighter-health { grid-row: 2; }
.exchange-receipt { grid-row: 3; }
.pocket-items { grid-row: 4; }
/* Keep the latest guess clear below their feet; older history rises behind them. */
.actor-stage { grid-row: 5; --foot-inset: calc(var(--tile) * .82 + var(--tile-gap) + 10px); --art-clearance: calc(var(--foot-inset) + 8px); }
.fighter { max-width: none; }
.enemy-panel { grid-column: 2; }
.fighter-heading { min-height: 0; padding: 6px 0 4px; }
.fighter-heading h2 { font-size: 15px; }
.boss-encounter h2 { font-size: 14px; }
.fighter-health { width: 85%; }
.health-numbers { font-size: 12px; margin-top: 3px; }
.health-numbers > .icon { width: 12px; height: 12px; }
.meter { height: 7px; }
.actor-stage { margin-top: 0; }
.actor-wrap { inset-inline: 5px; }
.creature, .adventurer { max-height: calc(var(--actor-height) - var(--art-clearance)); width: auto; max-width: 100%; }
.ground-shadow { --shadow-height: 10px; }
.enemy-figure.airborne { margin-bottom: 12px; }
.pocket-items { margin-top: 2px; gap: 5px; flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.pocket-item, .pocket-empty { width: 44px; height: 42px; gap: 1px; }
.pocket-item { min-width: 30px; }
/* In a fight only the items you can use matter; the shop shows free satchel space. */
.pocket-empty { display: none; }
.pocket-item > .icon { width: 19px; height: 19px; }
.pocket-item > span { white-space: nowrap; }
.pocket-caption { display: none; }
.intent { padding: 3px 9px; gap: 6px; }
.intent-main { font-size: 15px; }
.intent-main > .icon { width: 16px; height: 16px; }
/* The message line and the floating numbers already report each exchange. */
.exchange-receipt { display: none; }
.combat-pop strong { font-size: 32px; }
.combat-pop small { font-size: 8px; }
.combat-pop { top: 5%; }
.combat-pop .icon { width: 28px; height: 28px; }
.impact-ring { top: 4%; }
.shield-active, .enemy-ward { font-size: 9px; padding: 2px 6px; }
.victory-loot { inset: 0; }
.victory-loot .icon { width: 30px; height: 30px; }
.victory-loot span { font-size: 8px; }
/* Keep the scene visible around the fighters; shade the HUD and word/keyboard
   areas without applying a colour wash to the characters themselves. */
.battle-scenery:after { background: linear-gradient(to bottom, #191d24c2, #191d242b 25%, #191d2433 44%, #191d24c7 60%, #191d24ee 85%); }
/* Keep the gate in the narrow crop without exposing an empty edge. */
.overgrowth-scene { left: clamp(calc(100% - var(--scene-width)), calc(50% - var(--scene-width) * .68), 0px); transform: none; }
.puzzle-panel { grid-column: 1 / -1; grid-row: 2; padding-top: 6px; max-width: 520px; justify-self: center; justify-content: flex-start; }
.ending-panel { grid-column: 1 / -1; grid-row: 2; margin-top: 18px; padding: 28px 20px; }
.ending-panel h2 { font-size: 29px; }
/* After a run the summary has the screen to itself, centred, with its button in view. */
.ended-layout { grid-template-rows: auto; align-content: safe center; }
.ended-layout .combatants { display: none; }
.ended-layout .ending-panel { grid-row: 1; margin-top: 0; padding: 24px 18px; }
dialog { padding: 30px 23px 23px; max-height: calc(100dvh - 36px); }
dialog h2 { font-size: 26px; }
}
@media (max-width: 559px) {
.brand { gap: 6px; }
.brand > span { font-size: clamp(15px, 3.9vw, 18px); letter-spacing: .5px; }
.brand > .icon { width: 20px; }
}
@media (max-width: 370px) {
.page-shell { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
.brand { gap: 5px; }
.brand > span { font-size: 14px; letter-spacing: 0; }
.brand > .icon { width: 18px; }
.gold-resource { gap: 4px; }
.gold-resource strong { font-size: 15px; }
.gold-resource .icon { width: 15px; }
.icon-button { width: 32px; }
.battle-layout { --tile-gap: 4px; column-gap: 10px; }
.fighter-heading h2 { font-size: 17px; }
.boss-encounter h2 { font-size: 15px; }
.pocket-items { gap: 3px; }
.pocket-item, .pocket-empty { width: 40px; }
}
/* Shorter phones show fewer history rows; everything else already scales with height. */
@media (max-width: 559px) and (max-height: 760px) {
.site-header { padding-block: 6px 5px; }
.puzzle-panel { padding-top: 4px; }
}
@media (max-width: 900px) and (max-height: 699px) { .battle-layout { --overlay-rows: 2; } }
@media (max-width: 900px) and (max-height: 599px) { .battle-layout { --overlay-rows: 1; } }
/* Short portrait screens reserve one clear history row below the duel. This
   keeps room for the largest creature at the same grid as the player. */
@media (max-width: 559px) and (max-height: 800px) { .battle-layout { --overlay-rows: 1; } }
/* Too short to fit the duel, word and keyboard at a usable size: let the page scroll. */
@media (max-width: 559px) and (max-height: 639px) {
.page-shell { height: auto; min-height: 100dvh; }
.battle-layout { flex: 1 0 auto; grid-template-rows: auto auto; }
.combatants { grid-template-rows: auto auto 0 auto 220px; }
}
/* Landscape uses the three-column scene with a compact guess history. */
@media (min-width: 700px) and (orientation: landscape) and (max-height: 640px), (min-width: 700px) and (max-width: 900px) and (orientation: landscape) {
.page-shell { padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.site-header { min-height: clamp(38px, 10dvh, 50px); gap: 12px; }
.brand { gap: 6px; }
.brand > span { font-size: 17px; }
.brand > .icon { width: 20px; height: 28px; }
.depth h1 { font-size: 12px; }
.gold-resource { margin-right: 4px; }
.gold-resource strong { font-size: 16px; }
.icon-button { width: 32px; height: 32px; padding: 7px; }
.battle-layout { --actor-max: clamp(140px, calc(100dvh - 170px), 380px); --art-clearance: 15px; --intent-gap: 6px; --tile: clamp(28px, 8.4dvh, 40px); --tile-gap: 4px; --history-max: calc(2 * var(--track-tile) + var(--tile-gap) + 8px); grid-template-columns: minmax(0, 1fr) minmax(0, clamp(280px, 40vw, 480px)) minmax(0, 1fr); column-gap: 12px; padding-block: 2px; }
.combatants { grid-template-rows: 26px minmax(36px, var(--actor-max)) minmax(26px, auto) auto minmax(18px, auto) minmax(44px, auto); }
.fighter-heading { min-height: 28px; padding-bottom: 5px; }
.fighter-heading h2 { font-size: 16px; }
.boss-encounter h2 { font-size: 14px; }
.health-numbers { font-size: 11px; margin-top: 4px; }
.meter { height: 6px; }
.actor-stage { --foot-inset: 10px; margin-top: 5px; }
.creature, .adventurer { max-height: calc(var(--actor-height) - 15px); }
.enemy-figure.airborne { margin-bottom: 10px; }
.ground-shadow { --shadow-height: 10px; }
.pocket-items { gap: 3px; margin-top: 4px; }
.pocket-item, .pocket-empty { width: 34px; height: 40px; gap: 1px; }
.pocket-item > .icon { width: 17px; height: 17px; }
.pocket-item > span { font-size: 9px; }
.pocket-caption { display: none; }
.intent { padding: 3px 8px; gap: 5px; }
.intent-main { font-size: 14px; }
.intent-main > .icon { width: 15px; height: 15px; }
.exchange-receipt { font-size: 9px; min-height: 18px; }
.combat-pop strong { font-size: 30px; }
.combat-pop small { font-size: 8px; }
.shield-active, .enemy-ward { font-size: 8px; padding: 2px 5px; }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 400px) {
.site-header { min-height: 36px; }
}
/* Too short to fit at a usable size: let the page scroll. */
@media (min-width: 700px) and (orientation: landscape) and (max-height: 319px) {
.page-shell { height: auto; min-height: 100dvh; }
.battle-layout { flex: 1 0 auto; }
.combatants { grid-template-rows: 26px 196px minmax(26px, auto) auto minmax(18px, auto) minmax(44px, auto); }
}
@media (prefers-reduced-motion: reduce) {
*, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.impact-ring, .hit-slash, .heal-spark { display: none; }
}
:root[data-reduce-motion="true"] *, :root[data-reduce-motion="true"] *:before, :root[data-reduce-motion="true"] *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-reduce-motion="true"] :is(.impact-ring, .hit-slash, .heal-spark) { display: none; }
/* Boss rules stay beside the word, including in short landscape layouts. */
.boss-rule { display: inline-flex; justify-content: center; align-items: center; gap: calc(6 * var(--game-unit, 1px)); max-width: 100%; color: #c7c0d8; font-size: calc(11 * var(--game-unit, 1px)); line-height: 1.45; text-align: center; }
.boss-rule .icon { width: calc(15 * var(--game-unit, 1px)); height: calc(15 * var(--game-unit, 1px)); flex: 0 0 calc(15 * var(--game-unit, 1px)); }
.boss-rule.fuse, .intent.fuse, .intent.breath { color: #f1b183; }
.boss-rule.lock, .intent.lock, .yellow-pair { color: #dfc37e; }
.intent.ink { color: #c2b6de; }
@media (max-width: 650px), (max-height: 540px) {
.boss-rule { font-size: 10px; }
}
.phase-health .meter { position: relative; }
.phase-health .meter::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #e9d1a6; }
.elite-mark { color: #e5c28b; }
/* Relics held: a column of small badges on the edge of the hero's stage. Rarity
   shows in the ring: grey common, blue uncommon, gold rare. */
.relic-bar { position: absolute; inset-inline-start: 0; top: 4px; z-index: 2; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px; max-height: calc(100% - 8px); }
.relic { --ring: #b4bcc8; position: relative; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--ring); border-radius: 50%; background: #262c37; color: var(--ring); box-shadow: 0 2px 6px #0007; }
.relic .icon { width: 17px; height: 17px; }
.relic.uncommon { --ring: #8fbbe6; }
.relic.rare { --ring: #e6c27f; box-shadow: 0 0 8px #e6c27f40; }
.relic.spent { opacity: .38; filter: grayscale(1); }
.relic-count { position: absolute; inset-inline-end: -5px; bottom: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #e6c27f; color: #29252a; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; }
@media (max-width: 559px) { .relic { width: 27px; height: 27px; } .relic .icon { width: 16px; height: 16px; } .relic-bar { gap: 4px; } }
.relic-tip { position: fixed; z-index: 40; display: grid; gap: 1px; padding: 7px 11px; border-radius: 9px; background: #efe3cb; color: #2a2522; font-size: 13px; line-height: 1.3; box-shadow: 0 8px 22px #0b0e1480; opacity: 0; translate: -6px -50%; pointer-events: none; transition: opacity .15s, translate .15s; }
.relic-tip strong { font-size: 13px; }
.relic-tip span { font-weight: 600; color: #5a4a35; }
.relic-tip::before { content: ''; position: absolute; top: 50%; left: -4px; width: 9px; height: 9px; background: inherit; translate: 0 -50%; rotate: 45deg; }
.relic-tip.from-end { translate: 6px -50%; }
.relic-tip.from-end::before { left: auto; right: -4px; }
.relic-tip.show { opacity: 1; translate: 0 -50%; }