@font-face {
  font-family: 'Pixelify Sans';
  src: url('assets/fonts/pixelify-sans.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root { --game-font: 'Pixelify Sans', sans-serif; }
*{box-sizing:border-box}body{margin:0;background:#111125;color:#f5efff;font:15px/1.5 var(--game-font);background-image:radial-gradient(ellipse at 20% 0%,#35234c,transparent 60%)}main{max-width:1160px;margin:auto;padding:32px 24px}header, .board-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}h1{font-size:38px;margin:2px 0;color:#ffcf88}h2{font-size:20px;margin:4px 0 10px}p{margin:6px 0;color:#bdb5d1}small{font-size:11px;letter-spacing:2px;color:#c4a0ef}button{font:inherit;color:inherit;border:1px solid #665282;border-radius:12px;padding:12px 18px;background:#35264f;cursor:pointer}button:hover{background:#513775}button:focus-visible{outline:3px solid #ffce86;outline-offset:3px}header>button{white-space:nowrap}.arena{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;background:#201c35;border:1px solid #433554;border-radius:20px;padding:24px;margin:28px 0}.fighter{display:flex;align-items:center;gap:18px}.fighter>div{flex:1}.avatar{font-size:55px}.versus{display:flex;flex-direction:column;text-align:center;gap:5px}.versus span{color:#857398;font-weight:800}.versus strong{color:#ffcf88}progress{display:block;width:100%;height:13px;border:0;border-radius:10px;overflow:hidden;background:#393048;accent-color:#6bdda3}progress::-webkit-progress-bar{background:#393048}progress::-webkit-progress-value{background:#6bdda3;border-radius:10px}.enemy progress{accent-color:#f57b90}.enemy progress::-webkit-progress-value{background:#f57b90}.layout{display:grid;grid-template-columns:minmax(0,660px) 1fr;gap:24px}.board-panel,aside section{background:#201c35;border:1px solid #433554;border-radius:18px;padding:20px}.board-heading{margin-bottom:16px}.board-heading strong{color:#ffcf88}.board-heading span{font-size:12px;color:#bdb5d1}.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding:8px;border-radius:14px;background:#121123}.candy{padding:0;aspect-ratio:1;border:1px solid #ffffff20;display:grid;place-items:center;font-size:clamp(20px,3.3vw,35px);border-radius:11px;background:linear-gradient(145deg,var(--c),#20182a);touch-action:manipulation;transition:transform .15s,opacity .15s}.candy:hover{background:var(--c);transform:translateY(-2px)}.candy.selected{outline:3px solid #fff0ad;transform:scale(.91)}.candy.matched{opacity:.2;transform:scale(.65)}.grid.busy{pointer-events:none}.hint{font-size:12px;margin-top:14px}.legend{display:flex;flex-wrap:wrap;gap:9px 16px;margin-top:18px;font-size:12px;color:#d5c9e7}aside section{margin-bottom:18px}#upgrades p{font-size:13px}#upgrades div{padding:10px 0;border-bottom:1px solid #ffffff12}#upgrades strong{color:#ffcf88}#log{padding-left:20px;font-size:13px;color:#c9bedb}#log li{margin-bottom:9px}dialog{color:#f5efff;background:#241d38;border:1px solid #755894;border-radius:22px;padding:30px;width:min(850px,94vw)}dialog::backdrop{background:#080714dd;backdrop-filter:blur(6px)}dialog h2{font-size:28px}#choices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}#choices button{text-align:left;padding:22px 16px}#choices strong{display:block;color:#ffcf88;font-size:18px;margin-bottom:12px}#choices span{display:block;font-size:14px;color:#d4c7e5}#gameover{max-width:440px}#gameover button{margin-top:20px;background:#73409c}@media(max-width:760px){main{padding:20px 12px}.arena{gap:10px;padding:16px}.avatar{font-size:32px}.fighter{gap:8px}.fighter h2{font-size:15px}.fighter p,.versus small{font-size:11px}.layout{grid-template-columns:1fr}.candy{font-size:clamp(18px,5vw,32px)}#choices{grid-template-columns:1fr}.board-panel{padding:12px}h1{font-size:30px}.versus strong{font-size:12px}.enemy{flex-direction:row-reverse}}

/* Keep the complete combat screen within the desktop viewport. */
@media (min-width: 761px) and (min-height: 600px) {
  main {
    height: 100vh;
    height: 100dvh;
    max-width: 1280px;
    padding: 16px 24px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  header h1 { font-size: 30px; line-height: 1.15; }
  header p { margin: 2px 0; font-size: 13px; }
  .arena { margin: 12px 0; padding: 12px 20px; gap: 18px; }
  .avatar { font-size: 40px; }
  .fighter h2 { margin: 0 0 6px; font-size: 18px; }
  .fighter p { font-size: 12px; margin-bottom: 0; }
  .fighter > div { min-width: 0; }
  .layout { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; }
  .board-panel {
    min-height: 0;
    min-width: 0;
    padding: 12px 16px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .board-heading { margin-bottom: 8px; }
  .grid {
    height: 100%;
    width: auto;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 1;
    justify-self: center;
    gap: 4px;
    padding: 6px;
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }
  .candy { min-width: 0; min-height: 0; aspect-ratio: auto; font-size: clamp(18px, 3.5vh, 32px); border-radius: 8px; }
  .board-panel .hint { margin: 8px 0 0; font-size: 11px; }
  .legend { margin-top: 8px; gap: 4px 12px; font-size: 11px; }
  aside { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
  aside section { padding: 14px; margin-bottom: 12px; }
  aside h2 { font-size: 18px; }
}
dialog { max-height: 90vh; max-height: 90dvh; overflow-y: auto; }

.header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
button:disabled { opacity: .45; cursor: default; }
#enemyStatus { font-size: 11px; color: #f5c980; line-height: 1.3; overflow-wrap: anywhere; }
.reaction-guide p, .reaction-guide summary { font-size: 12px; }
.reaction-guide summary { cursor: pointer; color: #ffcf88; }
.reaction-guide details[open] { max-height: 240px; overflow-y: auto; }
#skillBranches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.skill-branch { min-width: 0; background: #171328; border: 1px solid #574269; border-radius: 14px; padding: 14px; }
.skill-branch h3 { color: #ffcf88; margin: 0 0 16px; }
.skill-node { position: relative; border: 1px solid #60477b; background: #30223f; border-radius: 10px; padding: 12px; }
.skill-node + .skill-node { margin-top: 24px; }
.skill-node + .skill-node::before { content: '↓'; position: absolute; top: -25px; left: calc(50% - 6px); color: #d5afed; }
.skill-node p { font-size: 12px; min-height: 36px; }
.skill-node button { font-size: 12px; padding: 8px; width: 100%; }
#talents { width: min(960px, 94vw); }
#talents > p { font-size: 13px; }
#storageNote { color: #ffcf88; }
#elementLegend span { cursor: help; }
@media (max-width: 760px) {
  #skillBranches { grid-template-columns: 1fr; }
  .header-actions button { padding: 8px 10px; font-size: 12px; }
  .header-actions { max-width: 160px; }
}

/* Special candy badges remain separate from the element icon. */
.candy { position: relative; }
.candy.special { border-color: #ffe39a; box-shadow: inset 0 0 0 1px #fff2c04d, 0 0 6px #ffcf8840; }
.candy.special::after { content: attr(data-special); position: absolute; right: 1px; bottom: 1px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 2px; border-radius: 4px; background: #251731; color: #ffe49b; font: bold 13px/1 var(--game-font); pointer-events: none; }
.candy.special.matched { opacity: .6; box-shadow: 0 0 18px #ffe39a; }
.blast-guide p { font-size: 12px; }
#blastChance { color: #ffcf88; }
@media (min-width: 1050px) { #skillBranches { grid-template-columns: repeat(4, minmax(0, 1fr)); } #talents { width: min(1160px, 94vw); } }
@media (min-width: 761px) and (max-width: 1049px) { #skillBranches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 450px) { .candy.special::after { min-width: 12px; height: 12px; font-size: 10px; } }

#achievementList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.achievement-card { padding: 16px; border: 1px solid #584269; border-radius: 12px; background: #19152b; }
.achievement-card p { font-size: 12px; margin: 8px 0; }
.achievement-card.unlocked { border-color: #d8b166; background: #33263c; }
.achievement-card.unlocked strong { color: #ffe0a0; }
#achievementStorage { font-size: 12px; }
#achievementToast { position: fixed; z-index: 100; pointer-events: none; bottom: 18px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90vw; padding: 14px 20px; border: 1px solid #e5c175; border-radius: 12px; background: #382448; box-shadow: 0 6px 30px #0008; color: #ffdf9a; font-size: 13px; }
.arena.boss-fight { border-color: #d89657; background: linear-gradient(100deg, #201c35, #382335); }
#bossPanel { border-color: #d89657; }
#bossPanel p { font-size: 12px; }
#bossState { color: #ffcf88; }
@media (max-width: 760px) { #achievementList { grid-template-columns: 1fr; } .header-actions { max-width: 200px; } }

.candy[data-hazard]:not([data-hazard=""])::before { content: attr(data-hazard-label); position: absolute; top: 1px; left: 1px; z-index: 1; min-width: 18px; padding: 1px 3px; color: #fff; background: #181326ee; border-radius: 4px; font: bold 11px/1.2 var(--game-font); pointer-events: none; }
.candy[data-hazard="ice"] { border: 2px solid #99e9ff; box-shadow: inset 0 0 14px #c0f6ffb0; opacity: .95; }
.candy[data-hazard="chain"] { border: 2px dashed #d9bd8c; box-shadow: inset 0 0 12px #513b35; opacity: .95; }
.candy[data-hazard="stasis"] { border: 2px solid #bca0ff; box-shadow: inset 0 0 14px #9970df88; opacity: .95; }
.candy[data-hazard="ember"] { border: 2px solid #ff855d; box-shadow: inset 0 0 12px #ff5c3a88; }
@media (max-width: 450px) { .candy[data-hazard]:not([data-hazard=""])::before { font-size: 9px; padding: 0 2px; min-width: 12px; } }

/* Input locks keep the board bright throughout matches and enemy turns. */
.candy:disabled { opacity: 1; cursor: default; }
.candy.matched, .candy.special.matched { opacity: 1; animation: candy-pop .22s ease-out both; }
@keyframes candy-pop { 0% { transform: scale(1); filter: brightness(1); } 45% { transform: scale(1.12); filter: brightness(1.65); box-shadow: 0 0 20px #ffe39a; } 100% { transform: scale(.75); filter: brightness(1.2); } }
.menu-options { display: grid; gap: 12px; margin: 24px 0; }
#mainMenu { max-width: 480px; }
#help { max-height: 88dvh; overflow-y: auto; }
#help section { margin: 24px 0; }
.header-actions { flex-wrap: wrap; }

.grid { overflow: hidden; }
@media (min-width: 761px) and (min-height: 600px) { .board-panel { grid-template-rows: auto minmax(0, 1fr) auto; } }

/* Fullscreen home and compact in-game navigation. */
#mainMenu { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; padding: 32px 20px; background: radial-gradient(ellipse at 50% 22%, #593368 0, #241b3b 40%, #111125 85%); }
#mainMenu[open] { display: grid; place-items: center; }
.menu-content { width: min(100%, 460px); text-align: center; }
.menu-content h2 { font-size: clamp(42px, 7vw, 76px); line-height: 1.05; color: #ffda96; margin: 12px 0 20px; letter-spacing: -2px; }
.menu-content .menu-options { margin: 30px auto; max-width: 340px; }
.menu-content .menu-options button:first-child { background: #86512f; border-color: #e3b771; }
.menu-emblem { font-size: 70px; color: #ffdc9b; text-shadow: 0 0 45px #fcb25b80; }
#pauseMenu { width: min(440px, 94vw); }
#pauseButton { width: 48px; height: 48px; padding: 12px; display: grid; place-items: center; }
.hamburger { display: grid; gap: 5px; width: 22px; }
.hamburger i { display: block; height: 2px; width: 100%; background: #ffe0a0; border-radius: 2px; }
#pauseMenu .menu-options button { width: 100%; text-align: left; }
.layout { grid-template-columns: minmax(0, 680px); justify-content: center; }
.layout:has(aside:not([hidden])) { grid-template-columns: minmax(0, 680px) minmax(220px, 300px); }
[hidden] { display: none !important; }
.grid { position: relative; isolation: isolate; }
.candy { transition: box-shadow .15s, background-color .15s; }
.candy.matched, .candy.special.matched { animation: candy-pop .28s ease-out both; }
.line-beam { position: absolute; z-index: 4; pointer-events: none; border-radius: 8px; background: #fffce4; box-shadow: 0 0 10px 4px #ffda8a, 0 0 22px 7px #ffa94b90; transform-origin: center; animation: line-flash .28s ease-out both; }
@keyframes line-flash { 0% { opacity: 0; filter: brightness(1.8); } 25% { opacity: 1; } 100% { opacity: 0; } }
.power-icon { width: 64px; height: 64px; display: block; flex-shrink: 0; }
#choices button { display: flex; flex-direction: column; }
#choices .power-icon { order: -1; width: 80px; height: 80px; margin: 0 0 16px; }
#upgrades > div { display: grid; grid-template-columns: 64px 1fr; gap: 4px 16px; padding: 16px 0; }
#upgrades .power-icon { grid-row: span 2; }
#upgrades p { grid-column: 2; }
#logWindow, #buildWindow { width: min(640px, 94vw); }
#logWindow #log { font-size: 14px; }
@media (max-width: 760px) { .layout:has(aside:not([hidden])) { grid-template-columns: 1fr; } #choices .power-icon { width: 56px; height: 56px; } .menu-emblem { font-size: 44px; } }

header > div, .fighter, .fighter > div, .board-panel { min-width: 0; }
.header-actions { flex-shrink: 0; }
.grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 760px) {
  main { width: 100%; }
  header { align-items: flex-start; }
  .arena { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .fighter { flex-wrap: wrap; }
  .fighter > div { flex-basis: 100%; }
  .fighter h2 { overflow-wrap: anywhere; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .candy { min-width: 0; }
  .board-heading { gap: 8px; }
}

/* Compact RPG controls and faceted elemental gems. */
.game-toolbar { width: 100%; min-height: 48px; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 10px; }
.candy, .candy:hover { background: radial-gradient(ellipse at 50% 25%, #ffffff09, #0e1224 90%); border-color: #ffffff12; }
.candy:hover { box-shadow: inset 0 0 0 1px var(--c); }
.candy .gem { display: block; width: 82%; height: 82%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 3px #0009); }
.candy.selected { outline: 2px solid #ffe4a3; background: #3b304b; }
.grid.busy .candy:hover { transform: none; }
.legend > span { display: inline-flex; flex-direction: row-reverse; gap: 5px; align-items: center; }
.legend-gem { width: 18px; height: 18px; }
html[data-motion="full"] .candy.matched, html[data-motion="full"] .candy.special.matched { animation: gem-shatter .44s ease-in both; }
html[data-motion="full"] .line-beam { display: block; animation: line-flash .44s ease-out both; }
@keyframes gem-shatter { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.16); filter: brightness(1.9); box-shadow: 0 0 22px var(--c); } 100% { transform: scale(.15); opacity: 0; filter: brightness(2); } }
#pauseMenu .menu-options { margin: 0; }
@media (min-width: 761px) { main { padding-bottom: 16px; } .board-panel { max-width: 100%; } }
@media (max-width: 760px) { main { padding-bottom: 20px; } .game-toolbar { align-items: center; } .game-toolbar button { font-size: 13px; padding: 10px 12px; } .arena { margin-top: 18px; } }

/* Pixel dungeon skin: local art, hard edges, readable panels. */
body { font-family: var(--game-font); background: #0c1321; }
button, dialog, .arena, .board-panel, aside section, .grid, .candy, .candy.special::after, .skill-branch, .skill-node, .achievement-card, #achievementToast, progress { border-radius: 0; }
button { background: #243046; border: 2px solid #8a927b; box-shadow: inset 2px 2px #ffffff12, inset -2px -2px #0006, 3px 3px #070c17; font-family: inherit; font-size: 13px; }
button:hover { background: #37475d; border-color: #f2cf87; }
button:active { box-shadow: inset 2px 2px #0006; transform: translateY(1px); }
button:focus-visible { outline: 2px solid #ffe6a5; outline-offset: 4px; }
h2, h3 { color: #f7dda5; } small { color: #a9c9cf; }
.arena, .board-panel, aside section { background: #101b2bf0; border: 2px solid #5d7480; box-shadow: inset 3px 3px #c0d6ce12, 5px 5px #050a13a8; }
.grid { background: #0a111f; border: 2px solid #31495c; }
.candy, .candy:hover { background: #142235; border: 1px solid #253c50; box-shadow: inset 1px 1px #ffffff08; }
.candy:hover { border-color: #8fb3be; }
.candy.special { border-color: #e2b865; box-shadow: inset 0 0 0 1px #e2b86555; }
.candy.selected { background: #3b4150; outline: 2px solid #ffdd8d; }
.candy .gem, .legend-gem, .power-icon, .creature-sprite { image-rendering: pixelated; }
.candy .gem { filter: drop-shadow(2px 3px #050b18); }
.creature-sprite { display: block; width: 64px; height: 64px; object-fit: contain; }
.avatar { flex-shrink: 0; }
progress { height: 12px; border: 2px solid #0a101c; background: #2d3a45; }
progress::-webkit-progress-bar { background: #2d3a45; }
progress::-webkit-progress-value { background: #78cda0; border-radius: 0; }
.enemy progress::-webkit-progress-value { background: #db7781; }
dialog { background: #111e2dfc; border: 3px solid #95a798; box-shadow: inset 3px 3px #ffffff10, 8px 8px #030811ad; }
dialog::backdrop { background: #020611aa; backdrop-filter: none; }
#mainMenu { background: #0c1321; }
.menu-content { width: min(100%, 480px); padding: 24px 28px; border: 3px solid #889b90; background: #101b2be8; box-shadow: inset 3px 3px #ffffff10, 8px 8px #03081199; }
.menu-content h2 { font: bold clamp(30px, 4.3vw, 48px)/1.12 var(--game-font); text-transform: uppercase; letter-spacing: 1px; text-shadow: 3px 3px #694947; margin: 14px 0 18px; }
.menu-content .menu-options { margin: 22px auto; }
.menu-content .menu-options button:first-child { background: #6d4f34; }
.menu-emblem { width: 48px; height: 48px; margin: auto; font-size: 0; background: url('assets/gems/earth.svg') center / contain no-repeat; image-rendering: pixelated; }
.menu-content > p { font-size: 12px; }
.menu-content .hint { font-size: 10px; }
.menu-content button { padding: 11px 16px; min-height: 42px; }
.skill-branch, .skill-node, .achievement-card { background: #172537; border-color: #657b85; }
.achievement-card.unlocked { background: #293a39; border-color: #d4b575; }
#bestiary { width: min(980px, 94vw); }
.bestiary-tabs { display: flex; gap: 10px; margin: 18px 0; }
.bestiary-tabs [aria-pressed="true"] { background: #5c4d36; border-color: #ebc67e; }
#bestiaryInfo, #bestiary > .hint { font-size: 12px; }
#bestiaryList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.bestiary-card { min-width: 0; padding: 16px; border: 2px solid #4b6774; background: #182a39; }
.bestiary-card-heading { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.bestiary-card h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.bestiary-card p { font-size: 11px; line-height: 1.7; }
.bestiary-stats { color: #f6d58e; }
.bestiary-card small { font-size: 9px; letter-spacing: 1px; }
.arena.boss-fight { background: #2b2330ed; border-color: #cb9d66; }
@media (max-width: 900px) { #bestiaryList { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .creature-sprite { width: 48px; height: 48px; } .menu-content { padding: 20px 16px; } .fighter h2 { font-size: 13px; } .fighter p, .fighter small { font-size: 10px; } .legend { font-size: 10px; } }
@media (max-width: 480px) { #bestiaryList { grid-template-columns: 1fr; } .bestiary-tabs { flex-wrap: wrap; } }

.game-toolbar { flex-wrap: wrap; }
.toolbar-left { flex-wrap: nowrap; }
.toolbar-right { margin-left: auto; }
.bestiary-card.locked { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 220px; background: #111e2d; border-color: #344a59; }
.bestiary-card.locked h3 { color: #99acb7; }
.unknown-creature { width: 64px; height: 64px; margin: 12px; display: grid; place-items: center; border: 2px dashed #536d7d; color: #718b9b; font-size: 36px; font-weight: bold; }
#bestiaryStorage { color: #e1bd7c; font-size: 12px; }

/* Radial skill web with a persistent inspector. */
.layout { grid-template-columns: minmax(0, 680px); }
#talents { width: min(1280px, 98vw); max-height: 96dvh; padding: 22px; }
.skill-web-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; height: min(650px, 72dvh); min-height: 400px; margin-top: 12px; }
.skill-map { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.skill-map-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.skill-map-controls button { padding: 8px 12px; }
#skillZoom { min-width: 42px; text-align: center; font-size: 12px; }
#skillViewport { position: relative; min-height: 260px; flex: 1; overflow: auto; border: 2px solid #405968; background: #0c1625; touch-action: none; cursor: grab; scrollbar-width: thin; }
#skillViewport:active { cursor: grabbing; }
#skillBranches { display: block; position: relative; margin: 0; padding: 0; }
.skill-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.skill-links line { stroke-width:2; vector-effect:non-scaling-stroke; stroke-linecap:square; }
.skill-links .available-link { opacity: .7; }
.web-node { position: absolute; width: 44px; height: 44px; padding: 2px; transform: translate(-50%, -50%); border-color: var(--branch-color); background: #1b2a3b; z-index: 2; box-shadow: 3px 3px #050a16; }
.web-node:active { transform: translate(-50%, -50%); }
.web-node img { width: 36px; height: 36px; image-rendering: pixelated; display: block; }
.web-node.learned { box-shadow:0 0 8px var(--branch-color); border-style:double; }
.web-node.mastered .node-rank { background:#e8ce93; color:#172736; border-color:#fff0bc; }
.web-node.inspected { outline: 2px solid #ffe2a0; outline-offset: 3px; z-index: 4; }
.node-rank { position: absolute; right: -3px; bottom: -3px; min-width:17px; line-height:13px; text-align:center; padding: 0 3px; background: #121a27; border: 1px solid var(--branch-color); color: #f5dda3; font-size: 10px; }
.skill-hub { position: absolute; width: 76px; height: 76px; transform: translate(-50%, -50%); display: grid; place-items: center; border: 2px solid #b6b28e; background: #243347; z-index: 1; }
.skill-hub .creature-sprite { width: 48px; height: 48px; }
.skill-hub span { font-size: 8px; color: #efdbac; }
.skill-inspector { min-width: 0; overflow-y: auto; padding: 16px; background: #182637; border: 2px solid #546b78; }
#skillIcon { image-rendering: pixelated; margin-bottom: 12px; display: block; }
#skillBranch { display: block; }
#skillName { font-size: 18px; }
#skillDesc, #skillRank, #skillRequirement { font-size: 12px; line-height: 1.8; margin: 14px 0; }
.skill-inspector button { width: 100%; margin-top: 12px; padding: 12px 8px; }
#learnSkill { background: #665135; border-color: #d9b574; }
/* Four-chapter story mode. */
#storyHub { width: min(920px, 94vw); padding-top: 60px; }
#closeStoryHub { position: absolute; top: 12px; right: 12px; font-size: 22px; padding: 4px 12px; }
#storyChapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.chapter-card { display: block; text-align: left; padding: 20px; min-height: 110px; }
.chapter-card strong, .chapter-card span { display: block; }
.chapter-card strong { color: #f6d79a; font-size: 17px; margin: 14px 0; }
.chapter-card span, .chapter-card p { font-size: 12px; }
#storyScene { width: min(800px, 94vw); }
#sceneTitle { margin: 12px 0 24px; }
.scene-character { display: flex; align-items: center; gap: 18px; color: #efcf94; }
.story-art { display: block; width: 100%; height: auto; max-height: 27dvh; object-fit: cover; border: 1px solid #73979a; margin: 14px 0 20px; image-rendering: pixelated; }
.scene-illustration { margin: 16px 0 20px; border: 1px solid #668d91; background: #0a1623; box-shadow: 4px 4px #050d17; }
.scene-image { position: relative; overflow: hidden; isolation: isolate; }
.scene-image .story-art { margin: 0; border: 0; width: 100%; aspect-ratio: 16 / 7; max-height: 34dvh; object-fit: contain; background: #101e2e; }
#sceneCaption { padding: 8px 12px; font: 10px/1.6 var(--game-font); color: #b0c8c4; border-top: 1px solid #7b9b8c33; }
#storyScene { width: min(960px, 94vw); padding: clamp(16px, 3vw, 30px); }
#storyScene #sceneTitle { margin-bottom: 16px; }
#storyScene #sceneText { min-height: 0; margin: 16px 0; font-size: 16px; line-height: 1.8; }
.scene-character .creature-sprite { padding: 6px; background: #192c3b; border: 1px solid #6b8b8c; }
.scene-weather { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene-weather::before, .scene-weather::after { content: ''; position: absolute; width: 3px; height: 3px; top: 20%; left: 12%; background: #c3e9c4; box-shadow: 80px 48px #c3e9c480, 180px -24px #d9e6b480, 260px 100px #a6d6c8, 390px 36px #c3e9c480, 540px -20px #c3e9c480, 640px 80px #a6d6c8; opacity: .5; animation: story-motes 7s linear infinite; }
.scene-weather::after { left: 24%; top: 55%; animation-delay: -3s; }
[data-atmosphere="snow"] .scene-weather::before, [data-atmosphere="snow"] .scene-weather::after { background: #f0f5f6; box-shadow: 40px -20px #eef4ee, 110px 60px #eef4ee, 220px 0 #eef4ee, 310px 100px #eef4ee, 400px -40px #eef4ee, 510px 30px #eef4ee; animation-name: story-snow; animation-duration: 5s; }
[data-atmosphere="embers"] .scene-weather::before, [data-atmosphere="embers"] .scene-weather::after { background: #ffd393; box-shadow: 80px 48px #efaa75, 180px -24px #d5886e, 260px 100px #ffd393, 390px 36px #efa375, 540px -20px #ffd393; animation-duration: 3s; }
[data-atmosphere="mist"] .scene-weather::before, [data-atmosphere="mist"] .scene-weather::after { width: 110%; height: 16%; left: -10%; top: 55%; background: linear-gradient(0deg, transparent, #c0dae415, transparent); box-shadow: none; animation: story-mist 12s ease-in-out infinite alternate; }
[data-atmosphere="candle"] .scene-weather { background: radial-gradient(ellipse at 10% 65%, #f1bf6a18, transparent 45%); }
[data-atmosphere="stasis"] .scene-weather::before, [data-atmosphere="stasis"] .scene-weather::after { width: 6px; height: 6px; background: #b9b3ec; box-shadow: 120px 32px #9ebcde, 300px 70px #c0c0ef, 460px -20px #9ebcde; animation: story-sigil 6s ease-in-out infinite; }
[data-atmosphere="dust"] .scene-weather::before, [data-atmosphere="dust"] .scene-weather::after { background: #cfac83; opacity: .3; animation-name: story-dust; }
@keyframes story-motes { from { transform: translate(0, 60px); opacity: 0; } 25%, 75% { opacity: .6; } to { transform: translate(28px, -70px); opacity: 0; } }
@keyframes story-snow { from { transform: translate(0, -100px); opacity: 0; } 20%, 80% { opacity: .8; } to { transform: translate(50px, 180px); opacity: 0; } }
@keyframes story-mist { from { transform: translateX(-10%); opacity: .3; } to { transform: translateX(10%); opacity: .8; } }
@keyframes story-sigil { 0%, 100% { transform: translateY(10px) rotate(45deg); opacity: .1; } 50% { transform: translateY(-15px) rotate(135deg); opacity: .7; } }
@keyframes story-dust { from { transform: translate(-80px, 10px); opacity: 0; } 30%, 70% { opacity: .4; } to { transform: translate(80px, -10px); opacity: 0; } }
@media (max-width: 760px) {
  .scene-image .story-art { max-height: 26dvh; }
  #storyScene #sceneText { font-size: 14px; line-height: 1.7; }
  #sceneCaption { font-size: 9px; }
}
.chapter-art { display: block; width: 100%; aspect-ratio: 8 / 3; object-fit: cover; margin: 14px 0; border: 1px solid #73979a55; image-rendering: pixelated; }
#sceneText { font: 17px/1.9 var(--game-font); color: #e4e1d4; min-height: 140px; margin: 22px 0; }
#scenePage { font-size: 11px; }
.scene-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
#nextScene { background: #6d5135; border-color: #dbba7b; }
#storyComplete { width: min(620px, 94vw); }
#storyComplete button { display: block; width: 100%; margin-top: 18px; }
@media (max-width: 760px) { .skill-web-layout { grid-template-columns: 1fr; height: auto; } #skillViewport { height: 48dvh; flex: auto; } .skill-inspector { overflow: visible; } #skillIcon { width: 56px; height: 56px; } #storyChapters { grid-template-columns: 1fr; } #sceneText { font-size: 16px; } .skill-map-controls { flex-wrap: wrap; } }

#skillBranches { margin-left: auto; margin-right: auto; }

/* Menu destinations occupy the whole viewport, with scrolling only on overflow. */
html:has(dialog[open]) { overflow: hidden; }
dialog.menu-page {
  position: fixed; inset: 0; margin: 0;
  width: 100%; height: 100dvh; max-width: none; max-height: none;
  border: 0; box-shadow: none; background: #0c1321;
  padding: clamp(16px, 3vw, 40px); overflow: auto;
}
#talents.menu-page, #bestiary.menu-page, #help.menu-page, #storyHub.menu-page {
  width: 100%; max-height: none;
}
.menu-page > .board-heading { position: relative; margin-bottom: 18px; }
.menu-page > p:empty { display: none; }
#storyHub.menu-page { padding-top: 80px; }
#storyChapters { max-width: 1100px; margin: 0 auto; }
#bestiaryList { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
#achievementList { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
#talents.menu-page .skill-web-layout { height: calc(100dvh - 190px); min-height: 360px; }
.menu-page .reaction-guide details[open] { max-height: none; overflow: visible; }
@media (min-width: 761px) {
  #talents.menu-page[open] { display: flex; flex-direction: column; }
  #talents.menu-page .board-heading { flex-shrink: 0; }
  #talents.menu-page .skill-web-layout { flex: 1; height: auto; }
  .menu-page .bestiary-card.locked { min-height: 190px; }
  #help.menu-page { display: none; }
  #help.menu-page[open] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; align-content: start; }
  #help.menu-page > .board-heading, #help.menu-page > p { grid-column: 1 / -1; }
  #help.menu-page section { margin: 12px 0; }
}
@media (max-width: 760px) {
  #talents.menu-page .skill-web-layout { height: auto; min-height: 0; }
}

/* Arcane atlas: crisp pixel frames, warm brass, and elemental light. */
#mainMenu {
  width: 100%; padding: clamp(12px, 3vw, 36px); overflow: hidden;
  background: radial-gradient(ellipse at 24% 44%, #163c4759, transparent 55%),
    radial-gradient(ellipse at 85% 75%, #47325340, transparent 50%), #0a1220;
}
#mainMenu::before, #mainMenu::after {
  content: ''; position: absolute; pointer-events: none; inset: 14px;
  border: 1px solid #8fb7b32a;
}
#mainMenu::after { inset: 21px; border-color: #e3c48812; }
#mainMenu .menu-content {
  position: relative; z-index: 1; width: min(100%, 1020px); max-height: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px);
  align-items: center; padding: clamp(20px, 4vw, 52px);
  border: 1px solid #8bafaa65; background: #101d2c9c;
  box-shadow: inset 0 0 0 5px #08131c, inset 0 0 0 6px #738b7633, 12px 12px #030a134d;
}
.menu-intro { min-width: 0; text-align: center; }
.menu-intro > small, .menu-navigation > small { font-size: 10px; letter-spacing: 3px; color: #8fb8b8; }
#mainMenu .menu-content h2 {
  font-size: clamp(30px, 4vw, 49px); line-height: 1.15; letter-spacing: 3px;
  margin: 20px 0 14px; color: #f5dcaa; text-shadow: 3px 3px #443b33;
}
.menu-intro > p { font-size: 12px; color: #9cb2bd; }
.menu-divider { display: flex; align-items: center; gap: 12px; width: 65%; margin: 25px auto 0; }
.menu-divider::before, .menu-divider::after { content: ''; height: 1px; flex: 1; background: #ac95604d; }
.menu-divider span { width: 7px; height: 7px; background: #bda477; transform: rotate(45deg); }
#mainMenu .menu-emblem {
  position: relative; width: 168px; height: 168px; margin: 24px auto;
  background: none; filter: drop-shadow(0 0 24px #79ccbf22);
}
.sigil-ring { position: absolute; top: 22px; left: 22px; width: 124px; height: 124px; border: 1px solid #7fbab46b; transform: rotate(45deg); box-shadow: inset 0 0 0 8px #70b7a908, 0 0 0 7px #70b7a908; }
.sigil-ring::before { content: ''; position: absolute; inset: 12px; border: 1px solid #d6b8795c; }
.sigil-core { position: absolute; top: 52px; left: 52px; width: 64px; height: 64px; background: linear-gradient(135deg, #fff1b9, #92d7ca 50%, #4f8b9f); clip-path: polygon(50% 0, 90% 30%, 75% 80%, 50% 100%, 25% 80%, 10% 30%); }
.sigil-core::after { content: ''; position: absolute; inset: 8px 12px 12px; background: #112d3b; clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); }
.menu-emblem i { position: absolute; width: 14px; height: 14px; left: 77px; top: 0; background: #e79776; box-shadow: 0 0 12px #e7977640; transform: rotate(45deg); }
.menu-emblem i:nth-of-type(2) { left: 145px; top: 40px; background: #79b9e0; }
.menu-emblem i:nth-of-type(3) { left: 145px; top: 115px; background: #c6a2e9; }
.menu-emblem i:nth-of-type(4) { top: 154px; background: #a3d9e2; }
.menu-emblem i:nth-of-type(5) { left: 8px; top: 115px; background: #8bc9a9; }
.menu-emblem i:nth-of-type(6) { left: 8px; top: 40px; background: #d6b77a; }
.menu-navigation { min-width: 0; text-align: left; }
#mainMenu .menu-options { max-width: none; margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#mainMenu .menu-options button {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  min-height: 64px; padding: 14px; font-size: 12px; text-align: left;
  border: 1px solid #647f88; background: linear-gradient(135deg, #25394b, #182738);
  box-shadow: inset 0 2px #a8cfcb12, 3px 3px #050d18;
}
#mainMenu .menu-options button::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; background: #9fc9c4; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
#mainMenu #resumeRun { grid-column: 1 / -1; background: linear-gradient(110deg, #65513a, #3d352c); border-color: #c8ab75; color: #ffe8b8; }
#mainMenu #resumeRun::before { background: #edce8c; clip-path: polygon(20% 0, 100% 50%, 20% 100%); }
#mainMenu #menuStart::before { background: #e7a483; clip-path: polygon(40% 0, 75% 0, 75% 60%, 100% 60%, 100% 75%, 65% 75%, 65% 100%, 45% 100%, 45% 75%, 20% 75%, 20% 60%, 40% 60%); }
#mainMenu #menuStory::before { background: #a5cdb4; clip-path: polygon(0 0, 45% 12%, 50% 25%, 55% 12%, 100% 0, 100% 85%, 55% 100%, 50% 90%, 45% 100%, 0 85%); }
#mainMenu #menuSkills::before { background: #adacde; clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%); }
#mainMenu #menuAchievements::before { background: #dfc17e; clip-path: polygon(0 0, 100% 0, 80% 55%, 60% 65%, 60% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 40% 85%, 40% 65%, 20% 55%); }
#mainMenu #menuBestiary::before { background: #ce9eae; clip-path: polygon(0 0, 30% 25%, 70% 25%, 100% 0, 90% 70%, 50% 100%, 10% 70%); }
#mainMenu #menuHelp::before { background: #8cb8d7; clip-path: polygon(35% 0, 65% 0, 65% 20%, 35% 20%, 35% 35%, 65% 35%, 65% 100%, 35% 100%); }
#mainMenu .menu-options button:hover { border-color: #efd193; background: linear-gradient(135deg, #3b5261, #233b4d); }
.menu-navigation .hint { color: #8fa2ae; font-size: 10px; line-height: 1.7; }
dialog.menu-page { background: radial-gradient(ellipse at 90% 0, #21414d35, transparent 55%), #0c1524; border-top: 3px solid #b69b64; }
.menu-page > .board-heading { padding-bottom: 15px; border-bottom: 1px solid #829e9b3b; }
.menu-page .board-heading h2 { letter-spacing: 1px; }
.chapter-card { position: relative; border-color: #678e91; background: linear-gradient(120deg, #233c4c, #152536); box-shadow: inset 4px 0 #bda576, 4px 4px #050e19; }
.chapter-card:disabled { box-shadow: inset 4px 0 #425362; }
.achievement-card, .bestiary-card, .skill-inspector { background: linear-gradient(140deg, #203448, #132334); }
.arena { border-top-color: #bba476; background: linear-gradient(110deg, #142e3b, #172435 50%, #302838); }
.board-panel { border-top-color: #90b7b1; box-shadow: inset 0 3px #b9dbcb12, 6px 6px #030a1559; }
@media (max-width: 680px) and (min-height: 501px) {
  #mainMenu .menu-content { grid-template-columns: 1fr; gap: 20px; max-width: 460px; padding: 24px; }
  #mainMenu .menu-emblem { width: 168px; height: 100px; margin: 10px auto; transform: scale(.55); transform-origin: 50% 25%; }
  #mainMenu .menu-content h2 { font-size: 30px; margin: 0 0 10px; }
  .menu-divider { display: none; }
  #mainMenu .menu-options { margin: 12px 0 0; gap: 10px; }
  #mainMenu .menu-options button { min-height: 48px; padding: 10px; font-size: 11px; }
  .menu-navigation .hint { margin: 14px 0 0; }
}
@media (max-height: 650px) and (min-width: 681px) {
  #mainMenu .menu-content { padding: 24px; gap: 36px; }
  #mainMenu .menu-emblem { margin: 4px auto; transform: scale(.75); height: 140px; }
  #mainMenu .menu-content h2 { font-size: 34px; margin: 8px 0; }
  #mainMenu .menu-options button { min-height: 48px; padding: 10px; }
  .menu-divider { margin-top: 14px; }
}
@media (max-width: 680px) and (min-height: 501px) and (max-height: 700px) {
  #mainMenu .menu-content { padding: 18px; gap: 14px; }
  #mainMenu .menu-emblem { height: 72px; margin: 4px auto; transform: scale(.4); transform-origin: 50% 0; }
  #mainMenu .menu-content h2 { font-size: 26px; }
  #mainMenu .menu-options { gap: 8px; }
  #mainMenu .menu-options button { min-height: 44px; padding: 8px; }
  .menu-navigation .hint { display: none; }
}
@media (max-height: 500px) {
  #mainMenu { padding: 12px; }
  #mainMenu .menu-content { grid-template-columns: 1fr 1.2fr; padding: 16px; gap: 24px; }
  #mainMenu .menu-emblem, .menu-divider, .menu-navigation .hint { display: none; }
  #mainMenu .menu-content h2 { font-size: clamp(20px, 4vw, 32px); margin: 12px 0; letter-spacing: 1px; }
  .menu-intro > small, .menu-navigation > small { font-size: 8px; letter-spacing: 1px; }
  .menu-intro > p { font-size: 10px; }
  #mainMenu .menu-options { margin: 10px 0 0; gap: 8px; }
  #mainMenu .menu-options button { min-height: 36px; padding: 8px; font-size: 10px; gap: 7px; }
  #mainMenu .menu-options button::before { width: 14px; height: 14px; }
}
@media (max-width: 380px) and (max-height: 500px) {
  #mainMenu .menu-content { grid-template-columns: 1fr; gap: 12px; }
  .menu-intro > p, .menu-intro > small { display: none; }
  #mainMenu .menu-content h2 { font-size: 22px; margin: 0; }
  #mainMenu .menu-content h2 br { display: none; }
}

/* Story is an uninterrupted full-screen view, including its chapter reader. */
#storyHub, #storyScene, #storyComplete {
  position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh;
  max-width: none; max-height: none; border: 0; border-top: 3px solid #b69b64;
  box-shadow: none; background: #0c1726; padding: clamp(12px, 2.5vw, 30px);
  overflow: hidden;
}
#storyHub.menu-page { padding: 72px clamp(16px, 4vw, 60px) 24px; }
#storyChapters {
  width: 100%; height: 100%; max-width: 1300px; margin: 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px;
}
#storyChapters .chapter-card { min-height: 0; min-width: 0; padding: clamp(12px, 2vw, 24px); overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
#storyChapters .chapter-art { flex: 1; min-height: 0; width: 100%; max-height: 22dvh; aspect-ratio: auto; object-fit: cover; margin: 10px 0; }
#storyChapters .chapter-card strong { font-size: clamp(13px, 1.8vw, 20px); margin: 6px 0; }
#storyChapters .chapter-card span, #storyChapters .chapter-card p { font-size: 11px; line-height: 1.5; }
#storyScene[open] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 10px 28px; }
#sceneChapter, #sceneTitle { grid-column: 1 / -1; }
#storyScene #sceneTitle { margin: 0 0 10px; font-size: clamp(20px, 3vw, 32px); }
#sceneChapter { font-size: 10px; }
.scene-illustration { min-height: 0; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.scene-image { flex: 1; min-height: 0; display: grid; align-items: center; }
.scene-image .story-art { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; }
.scene-dialogue { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 12px; }
#storyScene #sceneText { margin: 0; align-self: center; font-size: clamp(12px, 1.8dvh, 18px); line-height: 1.7; }
#scenePage, .scene-actions { margin: 0; }
.scene-actions button { padding: 10px 14px; }
#storyComplete[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; gap: 12px; }
#storyCompleteArt { height: 100%; max-height: none; object-fit: contain; margin: 0; border: 0; }
#storyComplete button { width: min(100%, 480px); margin: 0 auto; }
#storyCompleteInfo, #storyCompleteTitle, #storyCompleteLabel { text-align: center; }
#refundNote:empty { display: none; }
/* Decorative motion stays separate from board resolution and never dims the board. */
.arena { position: relative; isolation: isolate; overflow: hidden; }
.combat-number { position: absolute; z-index: 6; pointer-events: none; font: bold clamp(13px, 2vw, 21px)/1.2 var(--game-font); color: #ffd1b4; text-shadow: 2px 2px #07111d, -1px -1px #07111d; white-space: nowrap; }
.combat-number.heal { color: #a0e1b6; }
.combat-number.shield { color: #99d7ee; font-size: 13px; }
.combat-number.reaction { color: #edc2ff; font-size: clamp(12px, 1.5vw, 17px); }
.enemy-departure { position: absolute; z-index: 5; pointer-events: none; }
.gem-spark { position: absolute; width: 8px; height: 8px; z-index: 6; border: 1px solid #ffffffaa; box-shadow: 0 0 8px #ffffff66; pointer-events: none; }
#combo { display: inline-block; transform-origin: center; }
progress::-webkit-progress-value { transition: width .3s ease-out; }
.low-health { animation: danger-pulse 1.5s ease-in-out infinite; }
button:not(.candy):not(.web-node) { transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
button:not(.candy):not(.web-node):enabled:hover { transform: translateY(-2px); box-shadow: inset 2px 2px #ffffff18, 3px 5px #070c17; }
button:not(.candy):not(.web-node):enabled:active { transform: translateY(1px); }
.menu-content { animation: panel-arrive .5s cubic-bezier(.16,.8,.3,1) both; }
.menu-navigation .menu-options button { animation: card-arrive .42s ease-out both; }
.menu-navigation .menu-options button:nth-child(2), .chapter-card:nth-child(2) { animation-delay: .04s; }
.menu-navigation .menu-options button:nth-child(3), .chapter-card:nth-child(3) { animation-delay: .08s; }
.menu-navigation .menu-options button:nth-child(4), .chapter-card:nth-child(4) { animation-delay: .12s; }
.menu-navigation .menu-options button:nth-child(5) { animation-delay: .16s; }
.menu-navigation .menu-options button:nth-child(6) { animation-delay: .20s; }
.menu-navigation .menu-options button:nth-child(7) { animation-delay: .24s; }
.sigil-core { animation: sigil-glow 4s ease-in-out infinite; }
.menu-emblem i { animation: orbit-bob 4s ease-in-out infinite; }
.menu-emblem i:nth-of-type(2), .menu-emblem i:nth-of-type(5) { animation-delay: -.8s; }
.menu-emblem i:nth-of-type(3), .menu-emblem i:nth-of-type(6) { animation-delay: -1.6s; }
.chapter-card, .bestiary-card, .achievement-card { animation: card-arrive .35s ease-out both; }
.bestiary-card:nth-child(3n+2), .achievement-card:nth-child(3n+2) { animation-delay: .04s; }
.bestiary-card:nth-child(3n), .achievement-card:nth-child(3n) { animation-delay: .08s; }
.achievement-card.unlocked { border-top-color: #e9c785; }
#reward[open], #gameover[open], #pauseMenu[open], #buildWindow[open], #logWindow[open] { animation: panel-arrive .24s ease-out both; }
#choices button { animation: reward-arrive .45s cubic-bezier(.15,.8,.3,1) both; }
#choices button:nth-child(2) { animation-delay: .08s; }
#choices button:nth-child(3) { animation-delay: .16s; }
#choices button:hover .power-icon { animation: item-float 1.8s ease-in-out infinite; }
#skillIcon { animation: icon-arrive .25s ease-out; }
.web-node img { transition: filter .15s, transform .15s; }
.web-node:hover img, .web-node:focus-visible img { transform: scale(1.1); filter: brightness(1.25); }
.web-node.learned { animation: learned-glow 3s ease-in-out infinite; }
.skill-links .available-link { stroke-dasharray: 10 9; animation: magic-flow 6s linear infinite; }
#achievementToast:not([hidden]) { animation: panel-arrive .3s ease-out; }
#log li:first-child { animation: log-arrive .25s ease-out; }
.candy[data-hazard="ember"]::after { animation: sigil-glow 1.2s ease-in-out infinite; }
@keyframes panel-arrive { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes card-arrive { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes reward-arrive { from { opacity: 0; translate: 0 20px; rotate: -2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes orbit-bob { 0%, 100% { transform: translateY(-2px) rotate(45deg); } 50% { transform: translateY(3px) rotate(45deg); } }
@keyframes sigil-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
@keyframes danger-pulse { 0%, 100% { box-shadow: 0 0 0 #df778100; } 50% { box-shadow: 0 0 10px #df778180; } }
@keyframes item-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes icon-arrive { from { transform: scale(.85); opacity: .5; } to { transform: scale(1); opacity: 1; } }
@keyframes learned-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
@keyframes magic-flow { to { stroke-dashoffset: -76; } }
@keyframes log-arrive { from { opacity: .3; translate: 8px 0; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 680px) {
  #storyChapters { gap: 10px; }
  #storyChapters .chapter-card span, #storyChapters .chapter-card p { display: none; }
  #storyChapters .chapter-card small { font-size: 9px; letter-spacing: 1px; }
  #storyChapters .chapter-art { max-height: 24dvh; }
  #storyScene[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(70px, .7fr) minmax(0, 1.3fr); gap: 10px; }
  #storyScene #sceneTitle { margin: 0; font-size: 20px; line-height: 1.2; }
  #sceneChapter { font-size: 9px; letter-spacing: 1px; }
  .scene-dialogue { gap: 8px; }
  #storyScene .scene-character .creature-sprite { width: 40px; height: 40px; padding: 3px; }
  #storyScene #sceneText { font-size: clamp(12px, 1.7dvh, 15px); line-height: 1.55; }
  #sceneCaption { padding: 5px 8px; font-size: 9px; line-height: 1.4; }
  .scene-actions button { padding: 8px 12px; font-size: 12px; }
}
@media (max-height: 500px) {
  #storyHub.menu-page { padding-top: 52px; padding-bottom: 12px; }
  #storyChapters .chapter-card p, #storyChapters .chapter-card span { display: none; }
  #storyChapters .chapter-art { margin: 4px 0; }
  #storyChapters .chapter-card { padding: 8px 12px; }
  #storyChapters .chapter-card strong { font-size: 12px; margin: 2px 0; }
  #storyScene[open] { gap: 6px 18px; }
  #storyScene #sceneTitle { font-size: 20px; margin: 0; }
  #storyScene .scene-character .creature-sprite { width: 36px; height: 36px; padding: 2px; }
  .scene-dialogue { gap: 6px; }
  #storyScene #sceneText { font-size: 12px; line-height: 1.5; }
  .scene-actions button { font-size: 11px; padding: 6px 10px; }
}

/* Field manual: fixed navigation, scrolling only when a topic exceeds the viewport. */
#help.menu-page[open] { display:flex; flex-direction:column; gap:18px; padding:clamp(16px,3vw,36px); overflow:hidden; }
#help .board-heading { flex-shrink:0; margin:0; }
#help h2 { margin:5px 0 0; }
#help .board-heading small { color:#c5ac78; letter-spacing:2px; font-size:10px; }
.help-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; flex-shrink:0; }
.help-tab { margin:0; min-width:0; padding:13px 5px; background:#112332; border-color:#314b59; color:#9fb4bf; }
.help-tab[aria-selected="true"] { background:linear-gradient(135deg,#314238,#203342); border-color:#d3b77d; color:#ffe2a7; box-shadow:inset 0 -3px #b59b65; }
.help-content { flex:1; min-height:0; width:min(1160px,100%); margin:auto; }
.help-panel { height:100%; margin:0 !important; overflow:auto; padding:2px 4px 12px; scrollbar-width:thin; scrollbar-color:#547074 #122332; }
.help-panel:focus-visible { outline:2px solid #d3b77d; outline-offset:-2px; }
.help-card, .reaction-card { position:relative; background:linear-gradient(135deg,#182d3b,#111f30); border:1px solid #35505b; border-top:2px solid #607d79; padding:20px; box-shadow:0 5px 0 #07121b66; }
.help-card h3, .help-section-heading h3 { color:#f1dcaf; font-size:17px; margin:0 0 12px; line-height:1.4; }
.help-card p, .help-section-heading p, .help-note, .reaction-card { font-size:13px; line-height:1.7; color:#bdccd3; }
.help-card p { margin:0; }
.help-card small { display:block; color:#92c5c2; font-size:10px; letter-spacing:2px; margin-bottom:12px; }
.help-basics { display:grid; grid-template-columns:minmax(250px,.85fr) minmax(0,1.4fr); gap:18px; }
.tutorial-card { text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; border-color:#6b785e; }
.help-steps { display:grid; gap:12px; }
.help-steps .help-card { padding-left:68px; }
.step-number { position:absolute; left:17px; top:20px; color:#d5b778; font:bold 24px var(--game-font); opacity:.8; }
.help-note { padding:16px 20px; border-left:3px solid #b79e69; background:#192d3580; margin-top:18px; }
.help-note strong { color:#ecd4a6; }
.tutorial-board { --cell:58px; --gap:7px; position:relative; display:grid; grid-template-columns:repeat(3,var(--cell)); gap:var(--gap); margin:16px auto 24px; padding:9px; background:#091421; border:2px solid #536f70; box-shadow:0 0 30px #62bca414; }
.tutorial-gem { display:grid; place-items:center; width:var(--cell); height:var(--cell); background:#1d3042; border:1px solid #314a5d; }
.tutorial-gem img { width:80%; height:80%; image-rendering:pixelated; }
.demo-1 img { animation:demo-swap-down 4s ease-in-out infinite; position:relative; z-index:2; }
.demo-4 img { animation:demo-swap-up 4s ease-in-out infinite; position:relative; z-index:2; }
.tutorial-board::after { content:""; pointer-events:none; position:absolute; left:9px; right:9px; top:calc(9px + var(--cell) + var(--gap)); height:var(--cell); border:2px solid #ffc77d; box-shadow:0 0 18px #ffa556; opacity:0; animation:demo-line 4s infinite; }
@keyframes demo-swap-down { 0%,12%,90%,100% { transform:translateY(0); } 30%,72% { transform:translateY(calc(var(--cell) + var(--gap))); } }
@keyframes demo-swap-up { 0%,12%,90%,100% { transform:translateY(0); } 30%,72% { transform:translateY(calc(-1 * (var(--cell) + var(--gap)))); } }
@keyframes demo-line { 0%,30%,75%,100% { opacity:0; } 40%,65% { opacity:1; } }
.help-section-heading { margin:4px 0 20px; }
.help-section-heading p { margin:0; }
.element-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.element-card > img { width:50px; height:50px; float:right; margin:0 0 10px 10px; image-rendering:pixelated; }
.element-card { min-height:155px; }
.reaction-cards, .help-progress-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.reaction-card { margin:0; border-left:3px solid #849cbb; }
.reaction-card:last-child { grid-column:1/-1; border-color:#aa9465; }
.special-guide { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; font-size:12px; }
.special-guide span { background:#101d2c; padding:10px; border:1px solid #395363; }
.special-guide b { color:#f1c673; margin-right:8px; }
.hazard-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hazard-example { display:grid; place-items:center; width:46px; height:46px; color:#f2c68a; font-size:26px; background:#0a1726; border:2px solid #847959; margin-bottom:16px; }
.hazard-example.embers { color:#ff9b79; border-color:#bd694d; }
.hazard-example.ice, .hazard-example.stasis { color:#b0e5f8; border-color:#648fac; }
.share-result { margin:16px auto; width:100%; text-align:center; }
.share-result button { border-color:#bca56d; color:#ffe1a1; }
.share-result p { font-size:12px; line-height:1.5; margin:8px 0; color:#b9d6cc; }
.share-result p:empty { display:none; }
.share-result textarea { display:block; width:100%; max-width:480px; margin:10px auto 0; height:112px; max-height:20dvh; resize:none; background:#0b1826; border:1px solid #628583; padding:10px; color:#e2e7dc; font:12px/1.4 var(--game-font); }
#storyComplete[open] { grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto; gap:10px; }
#storyComplete .share-result { margin:0; }
@media(max-width:700px) {
 #help.menu-page[open] { gap:12px; padding:16px 12px; }
 #help .board-heading small { font-size:8px; letter-spacing:1px; }
 #help h2 { font-size:22px; }
 .help-tabs { gap:4px; }
 .help-tab { padding:11px 2px; font-size:10px; }
 .help-basics, .help-progress-grid { grid-template-columns:1fr; }
 .tutorial-board { --cell:44px; margin:10px auto 16px; }
 .help-card { padding:16px; }
 .help-card h3 { font-size:15px; }
 .element-guide, .hazard-guide { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .reaction-cards { grid-template-columns:1fr; gap:10px; }
 .element-card > img { width:36px; height:36px; }
 .element-card p, .help-note, .help-card p, .reaction-card { font-size:12px; }
 #storyComplete .share-result textarea { height:80px; max-height:15dvh; }
}
@media(max-width:380px) { .element-guide, .hazard-guide { grid-template-columns:1fr; } }

@media (min-width:700px) and (max-height:500px) {
 #storyComplete[open] { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto auto auto; gap:6px 20px; padding:12px; }
 #storyCompleteLabel, #storyCompleteTitle { grid-column:1/-1; margin:0; }
 #storyCompleteTitle { font-size:22px; }
 #storyCompleteArt { grid-column:1; grid-row:3/7; }
 #storyCompleteInfo { grid-column:2; grid-row:3; font-size:11px; line-height:1.4; margin:0; align-self:center; }
 #storyComplete .share-result { grid-column:2; grid-row:4; }
 #storyComplete #nextChapter { grid-column:2; grid-row:5; }
 #storyComplete #storyReturn { grid-column:2; grid-row:6; }
 #storyComplete button { padding:7px 12px; font-size:11px; }
 #storyComplete .share-result p { margin:3px 0; font-size:10px; }
 #storyComplete .share-result textarea { height:50px; margin-top:4px; font-size:10px; padding:4px; }
}

/* Story reader: larger dialogue, framed illustrations and sealed chapter previews. */
#storyHub { background:radial-gradient(ellipse at 50% 0,#24423d66,transparent 65%),#0c1726; }
#storyChapters .chapter-card { transition:border-color .2s,background .2s; }
#storyChapters .chapter-card:not(:disabled):hover { border-color:#e2c68c; background:linear-gradient(135deg,#2b4a50,#192c40); }
#storyChapters .chapter-sealed { align-items:center; text-align:center; background:linear-gradient(145deg,#172a3b,#101c2c); }
#storyChapters .chapter-sealed:disabled { opacity:1; color:#a9b8be; }
#storyChapters .sealed-art { width:100%; max-width:480px; object-fit:contain; opacity:.9; }
#storyChapters .chapter-sealed strong { color:#bdc9c5; font-size:clamp(12px,1.7vw,18px); }
#storyChapters .chapter-sealed:not(:disabled) strong { color:#f2d49b; }
#storyScene { background:radial-gradient(ellipse at 5% 15%,#23464b55,transparent 55%),#0b1624; }
#storyScene .scene-image { border:1px solid #647a75; background:#0a1320; box-shadow:0 10px 35px #0004; }
#storyScene .scene-dialogue { background:linear-gradient(135deg,#1c3041,#101d2d); border:1px solid #536e75; border-top:3px solid #c1a775; padding:clamp(14px,2.2vw,30px); box-shadow:0 8px 20px #0003; }
#storyScene #sceneText { font-family:var(--game-font); font-size:clamp(20px,2vw,26px); line-height:1.65; color:#fff5e2; text-shadow:0 1px #000; }
#storyScene .scene-character strong { color:#efd09a; font-size:18px; }
#storyScene #scenePage { color:#adbfcb; font-size:12px; letter-spacing:2px; }
#storyScene .scene-actions { display:flex; justify-content:space-between; gap:12px; }
#storyScene #nextScene { border-color:#d4b77c; background:#304248; color:#ffe4af; min-width:110px; }
#storyScene #skipScene { background:transparent; color:#b9c6ce; }
#mainMenu .credits-link { display:block; margin:12px auto 0; padding:5px 16px; min-height:28px; font-size:11px; background:transparent; border-color:#597077; color:#c5d3d5; }
#credits.menu-page[open] { display:flex; flex-direction:column; padding:clamp(16px,3vw,36px); overflow:hidden; }
.credits-content { flex:1; min-height:0; overflow:auto; max-width:1100px; width:100%; margin:auto; scrollbar-width:thin; }
.creator-credit { text-align:center; padding:18px; margin-bottom:20px; background:radial-gradient(ellipse,#3d514355,transparent 75%); }
.credit-sigil { display:block; color:#e1c483; font-size:38px; }
.creator-credit small { color:#a7bfbd; font-size:10px; }
.creator-credit h3 { font: bold clamp(23px,3vw,34px)/1.3 var(--game-font); color:#f5dfad; margin:12px 0; }
.creator-credit p { color:#c1d4d5; }
.credit-sources { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.credit-sources section { background:#172a39; border:1px solid #3d5963; padding:20px; }
.credit-sources h3 { font-size:16px; margin:0 0 12px; color:#f2d7a5; }
.credit-sources p { font:15px/1.7 var(--game-font); color:#cad6dc; }
.credit-sources a { font:14px/1.6 var(--game-font); color:#a3dcd6; text-underline-offset:4px; }
.credits-thanks { text-align:center; margin:24px 0; color:#b7caca; font-size:12px; }
@media(max-width:680px) {
 #storyScene[open] { grid-template-rows:auto auto minmax(60px,.65fr) minmax(0,1.35fr); gap:8px; padding:14px; }
 #storyScene .scene-dialogue { padding:12px 14px; gap:8px; }
 #storyScene #sceneText { font-size:18px; line-height:1.55; }
 #storyScene .scene-character strong { font-size:15px; }
 #storyScene #sceneCaption { font-size:10px; }
 .credit-sources { grid-template-columns:1fr; }
 .creator-credit { padding:12px; margin-bottom:12px; }
 #mainMenu .credits-link { margin-top:8px; padding:3px 12px; min-height:24px; font-size:10px; }
}
@media(max-width:680px) and (max-height:650px) {
 #storyScene[open] { grid-template-rows:auto auto minmax(44px,.35fr) minmax(0,1.65fr); padding:10px; gap:5px; }
 #storyScene #sceneText { font-size:16px; line-height:1.5; }
 #storyScene .scene-dialogue { padding:10px 12px; gap:5px; }
 #storyScene .scene-character .creature-sprite { width:30px; height:30px; }
 #storyScene .scene-actions button { padding:7px 10px; }
 #sceneCaption { display:none; }
}
@media(min-width:681px) and (max-height:500px) {
 #storyScene[open] { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); padding:10px; }
 #storyScene .scene-dialogue { padding:10px 14px; gap:5px; }
 #storyScene #sceneText { font-size:17px; line-height:1.45; }
 #storyScene .scene-character strong { font-size:14px; }
 #storyScene #sceneCaption { font-size:10px; }
 #mainMenu .credits-link { margin-top:6px; padding:3px 12px; min-height:22px; }
}

.reaction-formula { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.reaction-formula img { width:40px; height:40px; image-rendering:pixelated; }
.reaction-formula > span { color:#c0b08e; font-size:20px; }
.reaction-formula strong { font-size:15px; color:#f4d59b; }
.reaction-card p { margin:10px 0 0; font-size:12px; color:#c4d7db; }
.reaction-order { display:flex; grid-column:1/-1; gap:16px; justify-content:center; padding:12px; background:#142636; border:1px solid #425b65; }
.reaction-order img { width:32px; height:32px; image-rendering:pixelated; }
.reaction-formula .aura-orb { width:40px; height:40px; display:grid; place-items:center; background:conic-gradient(#fa826a,#73bedb,#af8ad8,#a0e2ea,#fa826a); border:3px solid #d7e5df; border-radius:50%; color:#0b1726; font:bold 9px var(--game-font); }
.power-guide { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 14px; }
.power-guide-item { display:grid; place-items:center; width:38px; height:38px; background:#0e1e2d; border:1px solid #4b6571; cursor:help; }
.power-guide-item .power-icon { width:30px; height:30px; margin:0; }
.power-guide-item:focus-visible { outline:2px solid #e3c27e; }
.hazard-counter { display:flex; align-items:center; gap:10px; margin:8px 0; color:#cce2de; font-size:12px; }
.hazard-counter img { image-rendering:pixelated; }
#shareCardDialog { width:min(760px,96vw); max-height:96dvh; overflow:auto; padding:clamp(12px,2vw,24px); }
#shareCardImage { display:block; width:100%; max-height:min(65dvh,calc(96dvh - 180px)); object-fit:contain; margin:12px 0; border:1px solid #68817d; }
.share-card-actions { display:flex; align-items:center; justify-content:center; gap:12px; }
#saveCard { display:inline-block; padding:12px 18px; font:inherit; color:#ffe4ad; background:#2a4248; border:1px solid #bda46b; text-decoration:none; }
#shareCardStatus { text-align:center; font-size:12px; }
#shareCardStatus:empty { display:none; }
@media(max-width:680px) {
 .reaction-formula { gap:8px; }
 .reaction-formula strong { font-size:13px; }
 .reaction-formula img { width:32px; height:32px; }
 .reaction-formula .aura-orb { width:32px; height:32px; }
 .reaction-order { gap:10px; }
 .reaction-order img { width:28px; height:28px; }
 #shareCardDialog h2 { font-size:20px; }
}

/* Run results: one clear primary action, compact records, quiet secondary links. */
#gameover { width:min(640px,94vw); max-width:640px; max-height:94dvh; overflow:auto; padding:clamp(20px,4vw,36px); border:1px solid #758581; border-top:3px solid #c5a873; background:radial-gradient(ellipse at 50% 0,#39464088,transparent 65%),#0c1929; box-shadow:0 18px 90px #0009,inset 0 0 0 5px #ffffff03; }
.run-end-header { text-align:center; }
.run-end-sigil { position:relative; display:grid; place-items:center; width:88px; height:88px; margin:0 auto 18px; border:1px solid #b29a69; background:#172e3b; box-shadow:0 0 35px #d1a7651a; transform:rotate(45deg); }
.run-end-sigil img { transform:rotate(-45deg); image-rendering:pixelated; width:60px; height:60px; }
#endMode { color:#b9cdc9; font-size:10px; letter-spacing:4px; }
#gameover #endTitle { margin:10px 0 6px; color:#ffe2ac; font: bold clamp(30px,5vw,42px)/1.15 var(--game-font); }
.run-end-tagline { color:#a5b7bf; font-size:12px; margin:0; }
.run-end-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:26px 0 16px; }
.run-end-stats > div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px 6px; background:linear-gradient(150deg,#233a47,#142534); border:1px solid #405b64; border-bottom:2px solid #b29b6f; }
.run-end-stats span { color:#b3c8ce; font-size:9px; letter-spacing:1px; text-align:center; }
.run-end-stats strong { color:#f7dfae; font:bold clamp(24px,4vw,34px)/1.2 var(--game-font); }
#gameover #summary { text-align:center; margin:0 0 22px; color:#b9cacd; font-size:12px; line-height:1.6; }
.run-end-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
#gameover button { margin:0; padding:13px 12px; font-size:13px; background:#1b3141; border-color:#5c7478; }
#gameover #playAgain { width:100%; color:#172631; font-weight:bold; background:linear-gradient(135deg,#edd29a,#bea06e); border-color:#f4dfac; box-shadow:0 3px #796548; }
#gameover #playAgain:hover { background:#ffe5b2; }
#gameover .share-result { margin:0; }
#gameover #shareScore { width:100%; border-color:#b29b6f; color:#f4dba9; }
.run-end-links { display:grid; grid-template-columns:1fr; gap:8px; border-top:1px solid #40545d; padding-top:18px; margin-top:24px; }
#gameover .run-end-links button { background:transparent; border-color:transparent; color:#b9cdd1; font-size:11px; padding:8px 2px; }
#gameover .run-end-links button:hover { background:#213847; border-color:#526e74; color:#ffdf9e; }
@media(max-width:480px) {
 #gameover { padding:22px 16px 16px; }
 .run-end-sigil { width:64px; height:64px; margin-bottom:16px; }
 .run-end-sigil img { width:44px; height:44px; }
 .run-end-stats { gap:7px; margin-top:20px; }
 .run-end-stats span { font-size:8px; letter-spacing:0; }
 .run-end-stats > div { padding:14px 4px; }
 #gameover button { font-size:11px; }
 .run-end-actions { gap:8px; }
 .run-end-links { margin-top:18px; padding-top:12px; }
}
@media(max-height:550px) and (min-width:600px) {
 #gameover { padding:18px 24px; }
 .run-end-sigil { display:none; }
 #gameover #endTitle { font-size:30px; margin:6px 0; }
 .run-end-stats { margin:14px 0 10px; }
 .run-end-stats > div { padding:10px 6px; gap:5px; }
 #gameover #summary { margin-bottom:12px; }
 .run-end-links { margin-top:14px; padding-top:10px; }
}

/* Upgrades gives the available viewport to the web and selected skill. */
#talents.menu-page[open] { display:flex; flex-direction:column; gap:12px; padding:14px 18px; max-height:none; overflow:hidden; }
#talents.menu-page > .board-heading { flex-shrink:0; margin:0; min-height:44px; gap:16px; }
#talents #talentTitle { font-size:25px; margin:0; }
#talents #talentBalance { flex:1; margin:0; font-size:12px; text-align:right; color:#d4c28e; line-height:1.5; }
#talents #closeTalents { padding:9px 16px; font-size:12px; }
#talents #storageNote { flex-shrink:0; margin:0; font-size:11px; }
#talents #storageNote:empty { display:none; }
#talents.menu-page .skill-web-layout { flex:1; min-height:0; height:auto; margin:0; grid-template-columns:minmax(0,1fr) clamp(280px,26vw,360px); gap:14px; }
#talents .skill-map { min-height:0; height:100%; }
#talents .skill-map-controls { flex-shrink:0; gap:8px; margin:0 0 10px; }
#talents .skill-map-controls button { padding:7px 12px; font-size:12px; }
#talents #skillViewport { flex:1; min-height:0; height:auto; overflow:hidden; scrollbar-width:none; background:radial-gradient(ellipse at center,#20364477,transparent 72%),#0c1625; }
#talents .skill-inspector { display:flex; flex-direction:column; min-height:0; padding:20px; gap:18px; overflow:auto; }
#talents .skill-selected { display:flex; align-items:center; gap:14px; }
#talents #skillIcon { width:72px; height:72px; flex-shrink:0; margin:0; }
#talents #skillBranch { font-size:10px; color:#a4c2c7; margin-bottom:7px; letter-spacing:1px; }
#talents #skillName { font-size:20px; line-height:1.3; margin:0; color:#f4d9a4; }
#talents #skillDesc { margin:0; font-size:14px; line-height:1.6; color:#d7e3e5; }
#talents .skill-facts { padding:14px; border:1px solid #405d68; background:#0d1e2c99; }
#talents #skillRank { font-size:14px; color:#e9d29e; margin:0 0 8px; line-height:1.4; }
#talents #skillRequirement { margin:0; font-size:12px; line-height:1.5; }
#talents .skill-actions { display:grid; gap:10px; }
#talents .skill-inspector button { margin:0; padding:12px 8px; font-size:13px; }
#talents #refundNote { font-size:11px; line-height:1.5; margin:0; }
#talents #resetTalents { margin-top:auto; background:transparent; color:#b9c9cd; font-size:11px; }
@media(max-height:650px) and (min-width:601px) {
 #talents.menu-page[open] { padding:10px 12px; gap:8px; }
 #talents .skill-inspector { padding:12px; gap:9px; }
 #talents #skillIcon { width:44px; height:44px; }
 #talents #skillName { font-size:17px; }
 #talents #skillBranch { margin-bottom:3px; }
 #talents #skillDesc { font-size:12px; line-height:1.45; }
 #talents .skill-facts { padding:8px; }
 #talents #skillRank { font-size:12px; margin-bottom:4px; }
 #talents #skillRequirement { font-size:11px; }
 #talents .skill-actions { gap:7px; }
 #talents .skill-inspector button { font-size:11px; padding:8px 6px; }
}
@media(max-width:600px) {
 #talents.menu-page[open] { padding:10px; gap:8px; }
 #talents.menu-page > .board-heading { gap:8px; min-height:38px; }
 #talents #talentTitle { font-size:21px; }
 #talents #talentBalance { font-size:10px; }
 #talents #closeTalents { padding:7px 10px; }
 #talents.menu-page .skill-web-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:8px; }
 #talents .skill-map-controls { margin-bottom:6px; gap:6px; }
 #talents .skill-map-controls button { padding:6px 10px; font-size:11px; }
 #talents .skill-inspector { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:8px 12px; padding:12px; }
 #talents .skill-selected { grid-column:1; grid-row:1; gap:8px; }
 #talents #skillIcon { width:36px; height:36px; }
 #talents #skillBranch { font-size:8px; margin-bottom:3px; }
 #talents #skillName { font-size:14px; }
 #talents #skillDesc { grid-column:1; grid-row:2; font-size:11px; line-height:1.4; }
 #talents .skill-facts { grid-column:1; grid-row:3; padding:0; border:0; background:none; }
 #talents #skillRank { font-size:11px; margin:0 0 3px; }
 #talents #skillRequirement { font-size:10px; line-height:1.4; }
 #talents .skill-actions { grid-column:2; grid-row:1/3; gap:7px; align-content:center; }
 #talents .skill-inspector button { font-size:10px; padding:9px 5px; }
 #talents #resetTalents { grid-column:2; grid-row:3; align-self:end; margin:0; font-size:9px; }
 #talents #refundNote { grid-column:1/-1; grid-row:4; font-size:10px; }
}

@media(min-width:601px) and (max-height:500px) {
 #talents .skill-inspector { padding:10px; gap:6px; }
 #talents .skill-selected { gap:10px; }
 #talents #skillIcon { width:36px; height:36px; }
 #talents #skillName { font-size:15px; }
 #talents #skillDesc { font-size:11px; line-height:1.4; }
 #talents .skill-facts { padding:6px 8px; }
 #talents #skillRank { margin-bottom:3px; }
 #talents .skill-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
 #talents .skill-inspector button { font-size:10px; padding:7px 4px; }
 #talents #refundNote { font-size:10px; line-height:1.35; }
}

.focus-display { display:flex; align-items:center; gap:6px; margin-top:7px; color:#c8b6ec; font:10px/1.3 var(--game-font); }
.focus-display img { image-rendering:pixelated; }
#focusMeter { flex:1; min-width:30px; max-width:100px; height:7px; border:1px solid #77698f; background:#0b1728; }
#focusFill { display:block; height:100%; background:linear-gradient(90deg,#9274cb,#dfc997); transition:width .25s; }
.focus-display.ready, .focus-display.empowered { color:#ffe1a0; }
.focus-display.ready #focusMeter { box-shadow:0 0 8px #cba9e85c; }
.active-skills { display:flex; flex-wrap:wrap; gap:7px; padding:12px 0; border-bottom:1px solid #3c5662; }
.active-skill { position:relative; display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid #59747c; background:#142737; }
.active-skill img { image-rendering:pixelated; }
.active-skill b { position:absolute; right:-3px; bottom:-4px; padding:0 3px; color:#f3d9a3; background:#0c1928; font:10px var(--game-font); border:1px solid #637b81; }
.active-skill:focus-visible { outline:2px solid #e1c083; }
@media(max-width:600px) {
 #talents .web-node { width:34px; height:34px; }
 #talents .web-node img { width:26px; height:26px; }
 #talents .node-rank { font-size:8px; padding:1px 3px; }
 .focus-display { flex-wrap:wrap; font-size:9px; gap:4px; }
}

#talents .web-node { width:var(--node-size,44px); height:var(--node-size,44px); }
#talents .web-node img { width:var(--node-icon-size,36px); height:var(--node-icon-size,36px); }
#talents .skill-hub { width:var(--hub-size,76px); height:var(--hub-size,76px); }
#talents .skill-hub .creature-sprite { width:calc(var(--hub-size,76px) - 28px); height:calc(var(--hub-size,76px) - 28px); }
@media(max-width:600px) {
 #talents .web-node { width:min(34px,var(--node-size,44px)); height:min(34px,var(--node-size,44px)); }
 #talents .web-node img { width:min(26px,var(--node-icon-size,36px)); height:min(26px,var(--node-icon-size,36px)); }
 #talents .skill-hub span { font-size:6px; }
}

.board-panel { position:relative; }
.board-notice { position:absolute; top:62px; left:50%; transform:translateX(-50%); z-index:8; pointer-events:none; padding:9px 22px; border:2px solid #b9a477; background:#101e30f2; box-shadow:0 4px 0 #0006; color:#ffe0aa; font:bold 14px/1.3 var(--game-font); text-align:center; }
.board-notice[data-kind="ice"] { color:#bcefff; border-color:#8ad3e5; }
.board-notice[data-kind="stasis"] { color:#dac4ff; border-color:#b69de4; }
.candy[aria-disabled="true"] { cursor:not-allowed; }

.candy[data-hazard="bomb"] { border:2px solid #eaa06e; box-shadow:inset 0 0 14px #e482583e; }
.candy[data-hazard="bomb"]::before { color:#ffe6a9; background:#4b2827; }
#enemyIcon.warded { filter:drop-shadow(0 0 6px #c5b7ef); outline:2px solid #ac99c4; outline-offset:3px; }

.candy[data-rift-target="true"] { border-bottom:3px dashed #a6c3ef; box-shadow:inset 0 -5px #a6c3ef26; }
#enemyIcon.surging { filter:drop-shadow(0 0 8px #b59aff); }

/* An out-of-flow top-layer hint never changes panel or board geometry. */
.ui-tooltip {
 position:fixed; inset:auto; margin:0; z-index:1000; display:flex; align-items:flex-start;
 gap:9px; width:max-content; max-width:min(290px,calc(100vw - 24px)); padding:11px 13px;
 border:1px solid #d5ba84; border-top:2px solid #f0d49a; border-radius:0;
 background:linear-gradient(135deg,#203746,#102333); box-shadow:inset 0 0 0 3px #081624,4px 4px #020914a6;
 color:#f2e3c4; font:12px/1.5 var(--game-font);
 letter-spacing:0; overflow-wrap:anywhere; pointer-events:none;
}
.ui-tooltip::backdrop { background:transparent; }
.ui-tooltip-icon { width:24px; height:24px; flex:0 0 24px; object-fit:contain; image-rendering:pixelated; }


/* Visual combat language: six gems, clear counters, and brass-framed controls. */
:root { --ui-ink:#091421; --ui-panel:#142b3b; --ui-line:#54737d; --ui-gold:#e6c58b; --ui-light:#e8ecdf; }
.ui-icon { display:inline-block; width:22px; height:22px; flex-shrink:0; vertical-align:middle; object-fit:contain; image-rendering:pixelated; pointer-events:none; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body { background:radial-gradient(ellipse at 15% 6%,#18363c65,transparent 45%),radial-gradient(ellipse at 90% 75%,#2f244345,transparent 55%),#09121f; color:var(--ui-light); }
.game-toolbar { min-height:44px; }
.toolbar-left, .toolbar-right { gap:8px; }
.game-toolbar .toolbar-icon, #pauseButton { display:grid; place-items:center; width:44px; height:44px; padding:9px; border:1px solid #718c8d; background:linear-gradient(135deg,#233c4c,#152637); box-shadow:inset 0 2px #b0d4cf13,inset 0 -3px #07142155,3px 3px #040c16; }
.game-toolbar .toolbar-icon .ui-icon { width:24px; height:24px; }
.game-toolbar .toolbar-icon:hover, .game-toolbar .toolbar-icon:focus-visible { border-color:#e6c58b; background:#2d4756; }
#soundToggle[aria-pressed="false"] { border-color:#536875; background:#132432; }
#pauseButton { border-color:#c4aa78; }
.arena { padding:14px 20px; border:1px solid #68868a; border-top:2px solid #bba273; box-shadow:inset 0 0 0 4px #081724,inset 0 0 0 5px #6381812b,5px 5px #030a1459; background:radial-gradient(ellipse at 0 50%,#28665338,transparent 50%),radial-gradient(ellipse at 100% 50%,#65334230,transparent 50%),#142434; }
.fighter { gap:14px; }
.fighter .avatar { position:relative; display:grid; place-items:center; width:80px; height:80px; padding:6px; border:1px solid #6b9390; background:radial-gradient(ellipse at center,#34575266,#0a1a26 75%); box-shadow:inset 0 0 0 3px #0a1723,inset 0 0 0 4px #72938b26; }
.enemy .avatar { border-color:#a7838a; background:radial-gradient(ellipse at center,#70434d55,#181b2b 75%); }
.fighter .avatar::before, .fighter .avatar::after { content:""; position:absolute; width:6px; height:6px; background:#c6b079; pointer-events:none; }
.fighter .avatar::before { top:-2px; left:-2px; }
.fighter .avatar::after { bottom:-2px; right:-2px; }
.fighter h2 { color:#e9dfbf; font-size:17px; letter-spacing:.3px; margin:0 0 6px; }
.fighter progress { width:100%; height:13px; border:2px solid #07111c; outline:1px solid #57776d; outline-offset:0; background:#22313b; }
.fighter progress::-webkit-progress-value { background:linear-gradient(0deg,#4e9d82 0 40%,#83d5a8 40% 75%,#b1e4b9 75%); }
.fighter progress::-moz-progress-bar { background:linear-gradient(0deg,#4e9d82 0 40%,#83d5a8 40% 75%,#b1e4b9 75%); }
.enemy progress { outline-color:#855968; }
.enemy progress::-webkit-progress-value { background:linear-gradient(0deg,#ad586b 0 40%,#e48a98 40% 75%,#f1b2b4 75%); }
.enemy progress::-moz-progress-bar { background:linear-gradient(0deg,#ad586b 0 40%,#e48a98 40% 75%,#f1b2b4 75%); }
.stat-strip, .status-strip, .intent-strip { display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-width:0; }
.stat-strip { margin-top:8px; }
.stat-badge, .status-badge { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:27px; padding:2px 6px; border:1px solid #58717a; background:#0a1825c9; color:#e4e9df; font:12px/1.3 var(--game-font); white-space:nowrap; cursor:help; }
.stat-badge b, .status-badge b { font-weight:700; }
.stat-badge .ui-icon, .status-badge .ui-icon { width:20px; height:20px; }
.stat-badge:focus-visible, .status-badge:focus-visible, .element-token:focus-visible { outline:2px solid var(--ui-gold); outline-offset:2px; }
.stat-badge:hover, .status-badge:hover { border-color:#c4aa78; background:#233747; }
.stat-badge[data-stat="hp"] { color:#c0e8cb; border-color:#5d8b78; }
.stat-badge[data-stat="shield"] { color:#b8e2f5; border-color:#4d7894; }
.stat-badge[data-stat="armor"] { color:#e2d4b4; border-color:#817d68; }
.enemy-stat-row { display:flex; align-items:flex-start; flex-wrap:wrap; gap:5px; margin-top:8px; }
.enemy-stat-row .stat-strip { margin:0; }
#enemyIntent { gap:5px; font-size:12px; letter-spacing:0; color:#efc6a0; }
#enemyIntent .stat-badge { border-color:#8b6c62; color:#f1ccad; }
#enemyStatus.status-strip { gap:4px; margin-top:5px; min-height:0; line-height:1.3; }
.status-badge { min-height:24px; padding:1px 4px; font-size:11px; border-color:#675d7c; color:#dfc9ed; }
.status-badge .ui-icon { width:18px; height:18px; }
.status-badge .legend-gem { width:18px; height:18px; }
#enemyStatus:empty { display:none; }
.versus { gap:6px; min-width:74px; }
.versus > span { align-self:center; width:32px; height:32px; display:grid; place-items:center; border:1px solid #b29a67; background:#102332; color:#dcc18c; font-size:11px; box-shadow:3px 3px #07111c; }
.versus strong, .versus small { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.versus strong .ui-icon { width:22px; height:22px; }
.versus small { font-size:11px; letter-spacing:0; color:#b4c8cb; }
.versus small .ui-icon { width:18px; height:18px; }
.focus-display { gap:5px; margin-top:6px; }
#focusLabel { font-weight:bold; color:#cdb8ed; }
#focusMeter { max-width:96px; height:7px; }
.board-panel { border:1px solid #66878b; border-top:2px solid #c5b080; padding:13px 16px; background:linear-gradient(135deg,#172f3c,#101f30 60%,#182b3b); box-shadow:inset 0 0 0 4px #081725,inset 0 0 0 5px #72938b22,6px 6px #030a1559; }
.board-panel .board-heading { min-height:30px; gap:8px; margin-bottom:10px; }
#phase { display:inline-flex; align-items:center; gap:6px; color:#dfc997; font-size:12px; letter-spacing:.3px; }
#phase .ui-icon { width:22px; height:22px; }
#combo.combat-cue { display:inline-flex; align-items:center; justify-content:flex-end; gap:5px; color:#c6dcd4; }
.combat-cue .stat-badge { border-color:#8b795c; color:#e7d5ae; }
.grid { border:1px solid #69818c; background:#071421; box-shadow:0 0 0 3px #091825,inset 0 0 18px #0008; padding:7px; gap:5px; }
.candy, .candy:hover { border:1px solid #355266; background:linear-gradient(145deg,#203749,#142638); box-shadow:inset 1px 1px #88aab21f,inset -1px -2px #07152480; }
.candy:hover { border-color:#b9c7ae; background:linear-gradient(145deg,#304d5e,#1b3548); }
.candy.selected { background:#3f4c57; border-color:#e3c082; outline:2px solid #f2d69d; }
#elementLegend { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-top:11px; }
#elementLegend > .element-token { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:2px; padding:3px 2px; min-width:0; border:1px solid #46616e; background:#0c1c2a; font-size:10px; color:#d0dcd8; }
.element-token .legend-gem { width:26px; height:26px; }
.element-token .ui-icon { width:18px; height:18px; }
.element-token .effect-arrow { width:6px; color:#748e96; font-size:11px; }
.element-token b { font-size:10px; font-weight:normal; }
.reaction-feedback { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; color:#ead3ff; background:#211d35e8; border:1px solid #c7aad8; box-shadow:3px 3px #08111d66; }
.reaction-feedback .ui-icon { width:24px; height:24px; }
.reaction-feedback .reaction-gem, .reaction-feedback .legend-gem { width:18px; height:18px; object-fit:contain; image-rendering:pixelated; }
/* The pause screen is a compact spell seal, with one clear way back to play. */
#pauseMenu { position:fixed; width:min(420px,calc(100vw - 32px)); padding:28px; border:1px solid #c9b184; border-top:3px solid #e2c58c; overflow:hidden; background:radial-gradient(ellipse at 50% 15%,#31504b66,transparent 65%),linear-gradient(145deg,#172d3b,#0c1b2c); box-shadow:inset 0 0 0 5px #081623,inset 0 0 0 6px #8ea59450,12px 12px #02081180,0 0 65px #0006; }
#pauseMenu::before, #pauseMenu::after { content:""; position:absolute; width:9px; height:9px; border:2px solid #e6c58b; pointer-events:none; }
#pauseMenu::before { top:10px; left:10px; border-right:0; border-bottom:0; }
#pauseMenu::after { bottom:10px; right:10px; border-left:0; border-top:0; }
#pauseMenu::backdrop { background:#030b17ba; backdrop-filter:blur(3px); }
.pause-emblem { position:relative; width:176px; height:136px; margin:0 auto 22px; }
.pause-sigil { position:absolute; top:26px; left:48px; width:80px; height:80px; border:1px solid #829f9166; transform:rotate(45deg); box-shadow:inset 0 0 0 8px #8ebfa20b,0 0 0 7px #93bfa309; }
.pause-sigil::after { content:""; position:absolute; inset:8px; border:1px solid #d2b87c77; }
.pause-core { position:absolute; top:42px; left:64px; image-rendering:pixelated; filter:drop-shadow(0 0 12px #c9ddad36); animation:sigil-glow 4s ease-in-out infinite; }
.pause-gem { position:absolute; width:28px; height:28px; image-rendering:pixelated; filter:drop-shadow(2px 3px #040c18); }
.pause-gem-1 { top:0; left:74px; }
.pause-gem-2 { top:24px; right:8px; }
.pause-gem-3 { bottom:19px; right:8px; }
.pause-gem-4 { bottom:0; left:74px; }
.pause-gem-5 { bottom:19px; left:8px; }
.pause-gem-6 { top:24px; left:8px; }
#pauseMenu .pause-actions { gap:12px; margin:0; }
#pauseMenu .pause-actions button { display:flex; align-items:center; gap:12px; width:100%; min-width:0; margin:0; border:1px solid #668487; background:linear-gradient(135deg,#233d4d,#142a3b); text-align:left; color:#d9e3db; box-shadow:inset 0 2px #b3d4cd16,3px 3px #030c1780; }
#pauseMenu .pause-actions button .ui-icon { width:30px; height:30px; }
#pauseMenu .pause-actions #closePause { min-height:70px; padding:16px 20px; border-color:#d1b47b; background:linear-gradient(110deg,#67543a,#3b3a30); color:#ffe7b1; font-size:17px; }
#closePause kbd { margin-left:auto; font:10px/1.4 var(--game-font); color:#dccb9d; padding:2px 5px; border:1px solid #ab966554; background:#1420284d; box-shadow:0 2px #0002; }
.pause-secondary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#pauseMenu .pause-secondary button { flex-direction:column; justify-content:center; min-height:100px; padding:15px 6px; gap:10px; text-align:center; font-size:12px; }
#pauseMenu .pause-actions button:hover { border-color:#efd7a0; background:linear-gradient(135deg,#3c535c,#233e4c); }
#pauseMenu .pause-actions #closePause:hover { background:linear-gradient(110deg,#806748,#4d4937); }
/* Carry the same carved frame and icon language through the rest of the interface. */
dialog:not(.menu-page):not(#mainMenu):not(#storyScene):not(#storyComplete) { border-top-color:#d9bc84; }
#buildWindow, #logWindow, #reward { background:radial-gradient(ellipse at top right,#2c4c4b40,transparent 65%),#102132; border:1px solid #91a59a; border-top:3px solid #c8ac76; box-shadow:inset 0 0 0 4px #071724,inset 0 0 0 5px #63827a45,8px 8px #030811ad; }
#buildWindow .board-heading, #logWindow .board-heading { padding-bottom:14px; border-bottom:1px solid #56716f6b; }
#buildWindow .board-heading h2, #logWindow .board-heading h2 { margin-bottom:0; }
#upgrades > div { margin-top:9px; padding:12px; border:1px solid #466674; background:#142c3c; box-shadow:inset 3px 0 #9eb19a55; }
#upgrades strong { align-self:center; color:#eed5a2; }
#upgrades p { margin:0; color:#b6ccd2; }
#log { padding-left:22px; }
#log li { border-bottom:1px solid #829e9b1c; padding:0 0 9px 5px; line-height:1.7; }
#log li::marker { color:#bca575; }
#choices button { border:1px solid #78908b; background:linear-gradient(135deg,#203f49,#162838); box-shadow:inset 0 3px #d5c18d88,4px 4px #06111d; }
#choices button:hover { border-color:#e7ca91; background:linear-gradient(135deg,#31555a,#213d4c); }
#choices .power-icon { padding:7px; background:radial-gradient(ellipse,#bdd7b71c,transparent 75%); }
#mainMenu .menu-options button::before { width:24px; height:24px; clip-path:none !important; background:center/contain no-repeat !important; image-rendering:pixelated; }
#mainMenu #resumeRun::before { background-image:url('assets/ui/play.svg') !important; }
#mainMenu #menuStart::before { background-image:url('assets/ui/attack.svg') !important; }
#mainMenu #menuStory::before { background-image:url('assets/ui/book.svg') !important; }
#mainMenu #menuSkills::before { background-image:url('assets/ui/build.svg') !important; }
#mainMenu #menuAchievements::before { background-image:url('assets/ui/crown.svg') !important; }
#mainMenu #menuBestiary::before { background-image:url('assets/sprites/wolf.svg') !important; }
#mainMenu #menuHelp::before { background-image:url('assets/ui/log.svg') !important; }
#mainMenu .menu-content { border-color:#8eada755; border-top-color:#d0b57f; }
#mainMenu .menu-options button { border-color:#628187; }
@media (max-width:760px) {
 main { padding:12px 10px 20px; }
 .arena { padding:12px; gap:8px; margin:12px 0; }
 .fighter { gap:8px; align-content:start; }
 .fighter .avatar { width:58px; height:58px; padding:4px; }
 .fighter .avatar .creature-sprite { width:48px; height:48px; }
 .fighter h2 { font-size:12px; line-height:1.4; margin-bottom:6px; }
 .stat-strip { gap:3px; margin-top:6px; }
 .stat-badge { min-height:23px; padding:1px 4px; gap:3px; font-size:10px; }
 .stat-badge .ui-icon { width:17px; height:17px; }
 .enemy-stat-row { gap:3px; margin-top:6px; }
 .status-strip { gap:3px; }
 .status-badge { font-size:10px; min-height:22px; padding:1px 3px; }
 .status-badge .ui-icon { width:16px; height:16px; }
 .versus { min-width:45px; gap:5px; }
 .versus strong { font-size:10px; }
 .versus small { font-size:9px; }
 .versus > span { width:26px; height:26px; font-size:9px; }
 .board-panel { padding:10px; }
 #phase { font-size:11px; letter-spacing:0; }
 #phase .ui-icon { width:19px; height:19px; }
 #elementLegend { gap:4px; margin-top:9px; }
 .element-token .legend-gem { width:23px; height:23px; }
 .element-token .ui-icon { width:15px; height:15px; }
 #elementLegend > .element-token { gap:0; padding:3px 0; }
 .element-token b { font-size:9px; }
 .grid { gap:4px; padding:5px; }
}
@media (max-width:430px) {
 .game-toolbar .toolbar-icon, #pauseButton { width:40px; height:40px; padding:8px; }
 .game-toolbar .toolbar-icon .ui-icon { width:22px; height:22px; }
 .toolbar-left, .toolbar-right { gap:6px; }
 .arena { padding:10px 9px; }
 .fighter .avatar { width:50px; height:50px; }
 .fighter .avatar .creature-sprite { width:42px; height:42px; }
 .fighter h2 { font-size:11px; }
 .stat-badge { padding:1px 3px; gap:2px; }
 .stat-badge .ui-icon { width:16px; height:16px; }
 .fighter progress { height:11px; }
 .element-token .legend-gem { width:20px; height:20px; }
 .element-token .ui-icon { width:14px; height:14px; }
 #elementLegend > .element-token { min-height:31px; flex-wrap:wrap; }
 .element-token b { font-size:9px; }
 #pauseMenu { padding:24px; }
}
@media (max-height:550px) {
 #pauseMenu { padding:20px 24px; }
 .pause-emblem { height:106px; width:176px; margin-bottom:12px; transform:scale(.8); transform-origin:50% 50%; }
 #pauseMenu .pause-actions #closePause { min-height:56px; padding:10px 16px; }
 #pauseMenu .pause-secondary button { min-height:72px; flex-direction:row; gap:8px; padding:10px 5px; font-size:11px; }
 #pauseMenu .pause-actions button .ui-icon { width:25px; height:25px; }
}
@media (max-height:400px) {
 .pause-emblem { display:none; }
 #pauseMenu { width:min(420px,calc(100vw - 32px)); }
 #pauseMenu .pause-actions #closePause { min-height:54px; }
}

/* A reserved status rail keeps the arena and board stable during combat. */
#enemyStatus.status-strip, #enemyStatus.status-strip:empty {
 display:flex; grid-column:1/-1; flex-wrap:nowrap; justify-content:flex-end;
 align-items:center; gap:4px; width:100%; height:42px; min-height:42px;
 margin:0; padding:4px 0 0; overflow:hidden; border-top:1px solid transparent;
}
#enemyStatus[data-active="true"] { border-top-color:#718b8738; }
#enemyStatus .status-badge {
 flex-direction:column; flex:0 0 34px; width:34px; min-width:0; min-height:34px;
 gap:1px; padding:0 1px; border:0; background:transparent; font-size:10px; line-height:1.1;
}
#enemyStatus .status-badge .ui-icon { width:18px; height:18px; }
.stat-badge, .status-badge { cursor:default; }
.board-panel { grid-template-rows:auto minmax(0,1fr); }
#achievementSummary { display:flex; flex-wrap:wrap; gap:6px; }
.element-card .stat-strip { clear:both; }
.reaction-formula > strong .ui-icon { width:34px; height:34px; }
.combat-number > .ui-icon { width:22px; height:22px; }
.combat-number > b { vertical-align:middle; }
@media (max-width:760px) {
 #enemyStatus.status-strip, #enemyStatus.status-strip:empty { gap:3px; height:40px; min-height:40px; }
 #enemyStatus .status-badge { flex-basis:32px; width:32px; font-size:9px; }
 #enemyStatus .status-badge .ui-icon { width:17px; height:17px; }
 .fighter { display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:auto auto auto; gap:4px 6px; align-items:center; }
 .fighter-info { display:contents; }
 .fighter .avatar { grid-column:1; grid-row:1/3; width:38px; height:38px; padding:2px; }
 .fighter .avatar .creature-sprite { width:32px; height:32px; }
 .fighter h2 { grid-column:2; grid-row:1; margin:0; font-size:10px; line-height:1.25; }
 .fighter progress { grid-column:2; grid-row:2; min-width:0; }
 #playerStats, .enemy-stat-row { grid-column:1/-1; grid-row:3; margin:4px 0 0; }
 #playerStats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:start; gap:3px; }
 #playerStats > :first-child { grid-column:1/-1; }
 .enemy-stat-row { display:grid; gap:3px; }
 #enemyIntent { min-height:23px; flex-wrap:nowrap; }
 .focus-display { grid-column:1/-1; grid-row:4; }
}
@media (min-width:761px) and (max-height:599px) {
 main { display:grid; grid-template-columns:230px minmax(0,1fr); grid-template-rows:44px minmax(0,1fr); gap:10px 16px; height:100dvh; padding:10px 16px; }
 .game-toolbar { grid-column:1/-1; min-height:0; }
 .arena { grid-column:1; grid-row:2; grid-template-columns:minmax(0,1fr); gap:6px; margin:0; padding:10px; min-height:0; align-content:space-between; }
 .fighter { gap:8px; }
 .fighter .avatar { width:40px; height:40px; padding:2px; }
 .fighter .avatar .creature-sprite { width:34px; height:34px; }
 .fighter h2 { font-size:11px; margin-bottom:4px; }
 .fighter progress { height:10px; }
 .stat-strip, .enemy-stat-row { margin-top:4px; gap:3px; }
 .stat-badge { min-height:21px; padding:1px 3px; gap:3px; font-size:10px; }
 .stat-badge .ui-icon { width:16px; height:16px; }
 .versus { flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px; }
 .versus > span { width:23px; height:23px; font-size:9px; }
 .versus strong, .versus small { font-size:9px; }
 #enemyStatus.status-strip, #enemyStatus.status-strip:empty { grid-column:1; height:36px; min-height:36px; gap:1px; justify-content:center; }
 #enemyStatus .status-badge { flex-basis:28px; width:28px; min-height:30px; font-size:8px; }
 #enemyStatus .status-badge .ui-icon { width:16px; height:16px; }
 .layout { grid-column:2; grid-row:2; min-height:0; }
 .board-panel { display:grid; min-height:0; padding:10px; }
 .board-panel .board-heading { min-height:22px; margin-bottom:5px; }
 .grid { height:100%; width:auto; max-width:100%; min-height:0; aspect-ratio:1; justify-self:center; grid-template-rows:repeat(8,minmax(0,1fr)); gap:3px; padding:4px; }
 .candy { min-height:0; aspect-ratio:auto; }
}

/* Battle gives the square board the largest available area. */
@media (min-width:761px) {
 main { width:100%; max-width:none; height:100dvh; display:grid; grid-template-columns:clamp(230px,20vw,270px) minmax(0,1fr); grid-template-rows:44px minmax(0,1fr); gap:12px 16px; padding:10px 12px; }
 .game-toolbar { grid-column:1/-1; grid-row:1; min-height:0; }
 .arena { grid-column:1; grid-row:2; margin:0; min-width:0; min-height:0; }
 .layout { grid-column:2; grid-row:2; min-width:0; min-height:0; grid-template-columns:minmax(0,1fr); }
 .board-panel { display:grid; container-type:size; width:100%; max-width:none; min-height:0; padding:8px; grid-template-rows:22px minmax(0,1fr); row-gap:6px; }
 .board-panel .board-heading { min-height:22px; margin:0; }
 .grid { width:min(100cqw,calc(100cqh - 28px)); height:auto; min-height:0; max-width:100%; max-height:100%; aspect-ratio:1; place-self:center; grid-template-rows:repeat(8,minmax(0,1fr)); }
 .candy { min-width:0; min-height:0; aspect-ratio:auto; }
}
@media (min-width:761px) and (min-height:600px) {
 .arena { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto minmax(0,1fr) 42px; align-items:center; gap:12px; padding:18px; }
 .fighter { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:12px; text-align:center; }
 .fighter .avatar { width:88px; height:88px; padding:6px; }
 .fighter .avatar .creature-sprite { width:72px; height:72px; }
 .fighter-info { width:100%; }
 .fighter h2 { font-size:15px; line-height:1.4; overflow-wrap:anywhere; }
 .stat-strip { justify-content:center; }
 .enemy-stat-row { display:grid; justify-items:center; gap:6px; }
 #enemyIntent { min-height:27px; flex-wrap:nowrap; }
 .versus { flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
 .versus strong, .versus small { font-size:11px; }
 .focus-display { justify-content:center; }
 #enemyStatus.status-strip, #enemyStatus.status-strip:empty { grid-column:1; justify-content:center; gap:2px; height:42px; min-height:42px; }
 #enemyStatus .status-badge { flex-basis:25px; width:25px; font-size:9px; }
}
@media (min-width:761px) and (min-height:600px) and (max-height:740px) {
 .arena { padding:12px; gap:8px; }
 .fighter { gap:7px; }
 .fighter .avatar { width:58px; height:58px; padding:3px; }
 .fighter .avatar .creature-sprite { width:48px; height:48px; }
 .fighter h2 { font-size:12px; margin-bottom:4px; }
}
@media (max-width:760px) {
 main { padding-left:6px; padding-right:6px; }
 .board-panel { padding:5px; }
 .board-panel .board-heading { min-height:22px; margin-bottom:6px; }
 .grid { padding:4px; }
}

/* Hidden SP editor: JOURNEY keeps the appearance of the credits heading. */
#credits .credits-secret { all:unset; font:inherit; color:inherit; cursor:pointer; }
#credits .credits-secret:focus-visible { outline:2px solid #e1c483; outline-offset:4px; }
.admin-panel { max-width:460px; margin:0 auto 20px; padding:18px; border:1px solid #bc9959; background:linear-gradient(145deg,#233b44,#152333); box-shadow:inset 0 0 0 3px #101c27; }
.admin-panel[hidden] { display:none; }
.admin-panel h3 { margin:0; color:#f2d7a5; font-size:18px; }
.admin-panel label { display:block; margin-bottom:8px; color:#d1e1df; font-size:13px; }
.admin-controls { display:flex; gap:10px; }
.admin-controls input { width:100%; min-width:0; padding:10px; color:#fff0c9; background:#101d29; border:1px solid #6c898e; font:inherit; }
.admin-controls input[aria-invalid="true"] { border-color:#f19b98; }
.admin-controls button { flex-shrink:0; }
#adminSPStatus { margin:10px 0 0; font-size:13px; line-height:1.5; color:#e5cf9e; overflow-wrap:anywhere; }
#adminSPStatus:empty { display:none; }

#mainMenu #resumeRun:disabled { animation:none; background:#30363b; border-color:#666d70; color:#b1b6b8; filter:grayscale(1); opacity:.5; cursor:default; transform:none; box-shadow:none; }

body, button, input, select, textarea { font-family:var(--game-font); }

/* Engraved arcane frames. Decoration never changes the combat geometry. */
:root {
  --rune-pattern:url('assets/ui/panel-runes.svg');
  --compass-seal:url('assets/ui/compass-seal.svg');
  --chamfer:12px;
}
.arena, .board-panel, .skill-inspector, .scene-illustration,
#storyScene .scene-dialogue, #mainMenu .menu-content,
#pauseMenu, #gameover, #reward, #buildWindow, #logWindow,
#shareCardDialog, .admin-panel {
  border-image-source:url('assets/ui/panel-frame.svg');
  border-image-slice:16;
  border-image-width:16px;
  border-image-repeat:stretch;
}
.arena {
  background-image:var(--rune-pattern),linear-gradient(155deg,#18343e,#111f30 65%);
  background-position:right top,center;
  background-size:40px 96px,100% 100%;
  background-repeat:repeat-y,no-repeat;
}
.arena.boss-fight {
  background-image:var(--rune-pattern),linear-gradient(155deg,#392e3b,#181f30 65%);
}
.board-panel {
  background-image:var(--rune-pattern),linear-gradient(135deg,#172f3c,#101f30 60%,#182b3b);
  background-size:38px 96px,100% 100%;
  background-position:right top,center;
  background-repeat:repeat-y,no-repeat;
}
#mainMenu .menu-content {
  background-image:var(--rune-pattern),linear-gradient(135deg,#142b35f5,#0f1c2df5);
  background-size:96px 32px,100% 100%;
  background-position:center bottom,center;
  background-repeat:repeat-x,no-repeat;
}

#mainMenu .menu-options button, #pauseMenu .pause-actions button,
#choices button, .chapter-card {
  clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,var(--chamfer) 100%,0 calc(100% - var(--chamfer)));
}
#mainMenu .menu-options button:focus-visible, #pauseMenu .pause-actions button:focus-visible,
#choices button:focus-visible, .chapter-card:focus-visible {
  outline-offset:-5px;
}
#mainMenu .menu-options button::after {
  content:""; position:absolute; right:7px; top:7px; width:14px; height:14px;
  border-top:1px solid #c9b47a88; border-right:1px solid #c9b47a88;
  pointer-events:none;
}
#mainMenu .menu-options button:hover::after { border-color:#ffe1a4; }
#mainMenu #resumeRun:disabled::after { border-color:#89969a; }
.help-card, .reaction-card, .achievement-card, .bestiary-card,
.chapter-card, .credit-sources section, .admin-panel, #choices button,
.run-end-stats > div, .skill-inspector, #storyScene .scene-dialogue {
  background-image:var(--rune-pattern),linear-gradient(140deg,#1c3442,#112130 70%);
  background-position:right top,center;
  background-size:96px 40px,100% 100%;
  background-repeat:repeat-x,no-repeat;
}
.help-card, .reaction-card, .achievement-card, .bestiary-card,
.credit-sources section, .run-end-stats > div {
  position:relative;
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
}
.help-card::before, .reaction-card::before, .achievement-card::before,
.bestiary-card::before, .credit-sources section::before, .run-end-stats > div::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg,transparent 7px,#bda77b 7px 9px,transparent 9px) top left/16px 16px no-repeat,
    linear-gradient(315deg,transparent 7px,#7daba8 7px 9px,transparent 9px) bottom right/16px 16px no-repeat;
  box-shadow:inset 0 0 0 4px #08172666;
}
.achievement-card.unlocked {
  background-image:var(--rune-pattern),linear-gradient(140deg,#354439,#152d32 75%);
}
.bestiary-card.locked {
  background-image:var(--compass-seal),linear-gradient(145deg,#182635,#0d1928);
  background-position:center;
  background-size:160px 160px,100% 100%;
}
.unknown-creature {
  border-style:solid;
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);
  background:#142938;
}
#storyChapters .chapter-card {
  border-image:url('assets/ui/panel-frame.svg') 16 / 16px stretch;
}
#storyChapters .chapter-sealed {
  background-image:var(--compass-seal),var(--rune-pattern),linear-gradient(145deg,#172e3c,#0e1d2d);
  background-position:center,right top,center;
  background-size:250px 250px,96px 40px,100% 100%;
  background-repeat:no-repeat,repeat-x,no-repeat;
}
.skill-inspector {
  background-image:var(--rune-pattern),linear-gradient(155deg,#1c3442,#112130 70%);
  background-size:96px 40px,100% 100%;
  background-position:right top,center;
  background-repeat:repeat-x,no-repeat;
}
#talents #skillViewport {
  background-image:linear-gradient(#7eaaa608 1px,transparent 1px),linear-gradient(90deg,#7eaaa608 1px,transparent 1px);
  background-size:32px 32px;
  background-position:center;
  background-repeat:repeat;
}
#reward {
  background-image:var(--rune-pattern),var(--compass-seal),linear-gradient(145deg,#19333e,#0c1b2c 75%);
  background-position:center top,right bottom,center;
  background-size:96px 24px,210px 210px,100% 100%;
  background-repeat:repeat-x,no-repeat,no-repeat;
}
#gameover, #shareCardDialog {
  background-image:var(--rune-pattern),linear-gradient(145deg,#19333e,#0c1b2c 75%);
  background-position:center top,center;
  background-size:96px 24px,100% 100%;
  background-repeat:repeat-x,no-repeat;
}
#pauseMenu, #buildWindow, #logWindow {
  background-image:var(--rune-pattern),linear-gradient(145deg,#19333e,#0c1b2c 75%);
  background-position:center top,center;
  background-size:96px 32px,100% 100%;
  background-repeat:repeat-x,no-repeat;
}
.creator-credit {
  background-image:var(--compass-seal),radial-gradient(ellipse,#3d514355,transparent 75%);
  background-size:190px 190px,100% 100%;
  background-position:center;
  background-repeat:no-repeat;
}
.run-end-stats > div:nth-child(2) { --chamfer:20px; }
.ui-tooltip { border-image:url('assets/ui/panel-frame.svg') 16 / 10px stretch; }
@media (max-width:760px) {
  :root { --chamfer:8px; }
  #mainMenu .menu-content, .arena, .board-panel, .skill-inspector,
  #storyScene .scene-dialogue, .scene-illustration { border-image-width:10px; }
  #mainMenu .menu-content { background-size:96px 24px,100% 100%; }
  .arena { background-size:28px 96px,100% 100%; }
  .board-panel { background-size:24px 96px,100% 100%; }
}

/* Carry the Achievement engraving into supporting surfaces. */
#help, #credits, #achievements, #bestiary, #talents {
  background-image:var(--rune-pattern),var(--rune-pattern),radial-gradient(ellipse at 10% 0,#193c424d,transparent 65%);
  background-size:96px 32px,32px 96px,100% 100%;
  background-position:left bottom,right top,center;
  background-repeat:repeat-x,repeat-y,no-repeat;
  background-color:#0c1726;
}
#talents .skill-facts, #upgrades > div, .help-note, .special-guide span {
  background-image:var(--rune-pattern),linear-gradient(135deg,#19323dc9,#102331c9);
  background-position:right top,center;
  background-size:80px 28px,100% 100%;
  background-repeat:repeat-x,no-repeat;
  box-shadow:inset 3px 0 #b49c6e55,inset 0 -1px #6d929333;
}
.help-note, .special-guide span, #upgrades > div {
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
/* Preserve the compact, borderless skill facts layout on small screens. */
@media (max-width:600px) {
  #talents .skill-facts { background:none; box-shadow:none; }
}

/* Native scrolling, with a matching brass/teal skin and draggable thumb. */
* { scrollbar-width:thin; scrollbar-color:#93b3a7 #0a1725; }
html, body, dialog, .help-panel, .credits-content, .skill-inspector, textarea, #arenaBosses {
  scrollbar-color:#93b3a7 #0a1725;
}
@supports selector(::-webkit-scrollbar) {
  html, body, dialog, .help-panel, .credits-content, .skill-inspector, textarea, #arenaBosses {
    scrollbar-width:auto; scrollbar-color:auto;
  }
  ::-webkit-scrollbar { width:10px; height:10px; }
  ::-webkit-scrollbar-track {
    background:#0a1725;
    box-shadow:inset 1px 0 #516d7355,inset -1px 0 #030b16;
  }
  ::-webkit-scrollbar-thumb {
    min-height:36px; min-width:36px; border:2px solid #0a1725;
    background:linear-gradient(90deg,#607c7b,#a5bca0 45%,#75988d);
    box-shadow:inset 0 1px #e4ca91,inset 0 -1px #425a63;
  }
  ::-webkit-scrollbar-thumb:hover { background:linear-gradient(90deg,#7e9e91,#d5c18c,#a2bba1); }
  ::-webkit-scrollbar-thumb:active { background:#d9bd80; }
  ::-webkit-scrollbar-corner { background:#0a1725; }
  ::-webkit-scrollbar-button { display:none; width:0; height:0; }
  #talents #skillViewport::-webkit-scrollbar { display:none; }
}

/* Larger, readable combat HUD uses the spare space beside the square board. */
@media (min-width:761px) {
  main { grid-template-columns:clamp(300px,27vw,420px) minmax(0,1fr); }
  .arena .fighter h2 { font-size:18px; }
  .arena .fighter progress { height:18px; }
  .arena .stat-badge { font-size:15px; min-height:34px; padding:3px 7px; }
  .arena .stat-badge .ui-icon { width:24px; height:24px; }
  #enemyIntent { min-height:34px; }
  #enemyStatus.status-strip, #enemyStatus.status-strip:empty { height:54px; min-height:54px; gap:3px; }
  #enemyStatus .status-badge { flex-basis:34px; width:34px; min-height:44px; font-size:12px; }
  #enemyStatus .status-badge .ui-icon { width:24px; height:24px; }
}
@media (min-width:761px) and (min-height:741px) {
  .arena { grid-template-rows:minmax(0,1fr) auto minmax(0,1fr) 54px; }
  .arena .fighter .avatar { width:100px; height:100px; }
  .arena .fighter .avatar .creature-sprite { width:84px; height:84px; }
}
@media (min-width:761px) and (max-height:740px) {
  .arena { padding:12px; gap:8px; }
  .arena .fighter { gap:8px; }
  .arena .fighter h2 { font-size:15px; }
  .arena .fighter .avatar { width:58px; height:58px; }
  .arena .fighter .avatar .creature-sprite { width:48px; height:48px; }
  .arena .stat-badge { font-size:13px; min-height:28px; padding:2px 5px; }
  .arena .stat-badge .ui-icon { width:20px; height:20px; }
  .arena .fighter progress { height:15px; }
  #enemyStatus.status-strip, #enemyStatus.status-strip:empty { height:48px; min-height:48px; }
  #enemyStatus .status-badge { min-height:40px; font-size:11px; }
  #enemyStatus .status-badge .ui-icon { width:22px; height:22px; }
}
@media (min-width:761px) and (min-height:600px) and (max-height:740px) {
  .arena { grid-template-rows:minmax(0,1fr) auto minmax(0,1fr) 48px; }
}
@media (max-width:760px) {
  .arena .fighter h2 { font-size:12px; }
  .arena .stat-badge { font-size:11px; min-height:26px; }
  #enemyStatus.status-strip, #enemyStatus.status-strip:empty { height:46px; min-height:46px; }
  #enemyStatus .status-badge { font-size:10px; min-height:38px; }
  #enemyStatus .status-badge .ui-icon { width:20px; height:20px; }
}

/* Basics is a fitted overview; longer manual topics retain native scrolling. */
#helpPanelBasics { display:flex; flex-direction:column; gap:10px; overflow:hidden; padding-bottom:2px; }
#helpPanelBasics[hidden] { display:none; }
#helpPanelBasics .help-basics { flex:1; min-height:0; gap:12px; }
#helpPanelBasics .help-steps { min-height:0; grid-template-rows:repeat(3,minmax(0,1fr)); gap:8px; }
#helpPanelBasics .help-card { min-height:0; }
#helpPanelBasics .help-note { flex-shrink:0; margin:0; padding:8px 12px; font-size:12px; line-height:1.4; }
@media (max-width:700px) {
  #helpPanelBasics .help-basics { grid-template-rows:minmax(114px,.9fr) minmax(0,1.7fr); gap:8px; }
  #helpPanelBasics .tutorial-card { display:grid; grid-template-columns:114px minmax(0,1fr); grid-template-rows:auto auto auto; align-content:center; gap:4px 10px; padding:10px; text-align:left; }
  #helpPanelBasics .tutorial-board { --cell:28px; --gap:4px; grid-column:1; grid-row:1/4; margin:0; }
  #helpPanelBasics .tutorial-card small, #helpPanelBasics .tutorial-card h3, #helpPanelBasics .tutorial-card p { grid-column:2; margin:0; }
  #helpPanelBasics .tutorial-card small { font-size:8px; letter-spacing:1px; }
  #helpPanelBasics .help-card h3 { font-size:13px; margin:0 0 4px; line-height:1.25; }
  #helpPanelBasics .help-card p { font-size:11px; line-height:1.4; }
  #helpPanelBasics .help-steps .help-card { padding:8px 8px 8px 40px; display:flex; flex-direction:column; justify-content:center; }
  #helpPanelBasics .step-number { font-size:17px; left:12px; top:12px; }
  #helpPanelBasics .help-note { font-size:10px; padding:7px 10px; }
}
@media (min-width:701px) and (max-height:600px) {
  #help.menu-page[open] { padding:12px; gap:10px; }
  #help h2 { font-size:20px; margin:0; }
  #help .board-heading small { font-size:8px; }
  #help .help-tab { padding:8px 4px; }
  #helpPanelBasics .tutorial-card { display:grid; grid-template-columns:106px minmax(0,1fr); grid-template-rows:auto auto auto; gap:4px 10px; align-content:center; padding:10px; text-align:left; }
  #helpPanelBasics .tutorial-board { --cell:26px; --gap:4px; grid-column:1; grid-row:1/4; margin:0; }
  #helpPanelBasics .tutorial-card small, #helpPanelBasics .tutorial-card h3, #helpPanelBasics .tutorial-card p { grid-column:2; margin:0; }
  #helpPanelBasics .help-card h3 { font-size:12px; margin:0 0 4px; }
  #helpPanelBasics .help-card p { font-size:11px; line-height:1.35; }
  #helpPanelBasics .help-card small { font-size:8px; }
  #helpPanelBasics .help-steps .help-card { padding:6px 8px 6px 38px; display:flex; flex-direction:column; justify-content:center; }
  #helpPanelBasics .step-number { font-size:16px; left:12px; top:10px; }
  #helpPanelBasics .help-steps { gap:6px; }
  #helpPanelBasics .help-note { font-size:10px; padding:6px 10px; }
}

/* Reserve name lines so long enemy names cannot shift the mobile board. */
@media (max-width:760px) {
  .arena .fighter h2 { min-height:2.5em; }
}
@media (max-width:380px) {
  .arena .fighter h2 { min-height:3.75em; }
}
@media (max-width:700px) and (max-height:560px) {
  #help.menu-page[open] { padding:10px; gap:8px; }
  #help .board-heading small { font-size:7px; }
  #help h2 { font-size:18px; margin:0; }
  #help #closeHelp { padding:8px 12px; font-size:11px; }
  #help .help-tab { padding:8px 2px; font-size:9px; }
  #helpPanelBasics .help-basics { grid-template-rows:minmax(104px,.8fr) minmax(0,1.8fr); }
  #helpPanelBasics .tutorial-board { --cell:25px; --gap:4px; }
  #helpPanelBasics .tutorial-card { grid-template-columns:105px minmax(0,1fr); padding:8px; gap:3px 8px; }
  #helpPanelBasics .help-steps { gap:6px; }
  #helpPanelBasics .help-steps .help-card { padding-top:6px; padding-bottom:6px; }
}

/* Boss Arena: one practice encounter, selected from defeated Endless bosses. */
#mainMenu #resumeRun { grid-column:auto; }
#mainMenu #menuArena::before { background-image:url('assets/ui/boss-arena.svg') !important; }
#arenaHub.menu-page[open] { display:flex; flex-direction:column; gap:12px; padding:clamp(12px,2.5vw,30px); overflow:hidden; }
#arenaHub { background-image:var(--rune-pattern),linear-gradient(145deg,#18313a,#0c1726 65%); background-size:96px 32px,100% 100%; background-position:center bottom,center; background-repeat:repeat-x,no-repeat; }
#arenaHub .board-heading { flex-shrink:0; margin:0; }
#arenaHubTitle { margin:4px 0 0; }
#arenaInfo { margin:0; font-size:13px; color:#c5d7d1; }
#arenaBosses { flex:1; min-height:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:minmax(115px,1fr); gap:12px; overflow:auto; padding:3px; }
.arena-boss-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-width:0; padding:16px 10px; background-image:var(--rune-pattern),linear-gradient(145deg,#203b47,#102131); background-size:96px 32px,100% 100%; background-repeat:repeat-x,no-repeat; border:1px solid #668389; border-image:url('assets/ui/panel-frame.svg') 16 / 12px stretch; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.arena-boss-card .creature-sprite { width:72px; height:72px; }
.arena-boss-card .ui-icon { width:32px; height:32px; }
.arena-boss-card strong { font-size:14px; color:#e6d4aa; line-height:1.3; }
.arena-boss-card.locked { opacity:.55; }
.arena-boss-card[aria-pressed="true"] { background-color:#3c503f; border-image:none; border:2px solid #e6c489; box-shadow:inset 0 0 0 3px #081724; }
.arena-boss-card:focus-visible { outline-offset:-5px; }
.arena-setup { flex-shrink:0; display:grid; grid-template-columns:minmax(0,1fr) 120px 140px; gap:10px 16px; align-items:center; padding:16px; border:1px solid #8a9b87; border-image:url('assets/ui/panel-frame.svg') 16 / 12px stretch; background-image:var(--rune-pattern),linear-gradient(145deg,#203b42,#112333); background-size:96px 28px,100% 100%; background-repeat:repeat-x,no-repeat; }
.arena-setup strong { color:#edce94; }
.arena-setup p { font-size:13px; margin:5px 0; }
.arena-setup small { font-size:10px; letter-spacing:0; }
.arena-setup label { display:flex; flex-direction:column; gap:5px; font-size:13px; }
.arena-setup input { width:100%; min-width:0; padding:8px; color:#f5dfac; font:inherit; border:1px solid #7d9a96; background:#0b1a28; }
.arena-setup input[aria-invalid="true"] { border-color:#e7a18f; }
#arenaError { grid-column:1/-1; color:#e1bda4; margin:0; font-size:12px; }
#arenaError:empty { display:none; }
#arenaResult { text-align:center; width:min(460px,94vw); background-image:var(--rune-pattern),linear-gradient(145deg,#203b42,#102131); background-size:96px 28px,100% 100%; background-repeat:repeat-x,no-repeat; border-image:url('assets/ui/panel-frame.svg') 16 / 16px stretch; }
#arenaResultArt { width:96px; height:96px; margin:20px auto; }
#arenaResult p { font-size:13px; }
.arena-result-actions { display:grid; gap:10px; margin-top:20px; }
@media (max-width:700px) {
 #arenaHub.menu-page[open] { gap:8px; padding:12px; }
 #arenaHub .board-heading small { font-size:8px; }
 #arenaHubTitle { font-size:23px; }
 #arenaInfo { font-size:11px; }
 #arenaBosses { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(105px,1fr); gap:8px; }
 .arena-boss-card { padding:10px 6px; gap:6px; }
 .arena-boss-card strong { font-size:12px; }
 .arena-boss-card .creature-sprite { width:48px; height:48px; }
 .arena-setup { grid-template-columns:minmax(0,1fr) 110px; gap:8px; padding:12px; }
 .arena-setup > div { grid-column:1/-1; }
 .arena-setup p { font-size:12px; }
 .arena-setup small { font-size:9px; }
}
@media (min-width:701px) and (max-height:500px) {
 #arenaHub.menu-page[open] { padding:10px; gap:6px; }
 #arenaHubTitle { font-size:20px; }
 #arenaHub .board-heading small { display:none; }
 #arenaHub .board-heading button { padding:7px 12px; }
 #arenaInfo { font-size:11px; }
 .arena-setup { padding:10px; }
 .arena-boss-card .creature-sprite { width:44px; height:44px; }
}

@media (max-height:560px) {
 #arenaResult { padding:18px; }
 #arenaResultArt { width:64px; height:64px; margin:12px auto; }
 #arenaResult h2 { font-size:24px; margin:6px 0; }
 #arenaResult p { font-size:12px; }
 #arenaResult .arena-result-actions { gap:8px; margin-top:12px; }
 #arenaResult .arena-result-actions button { padding:8px 12px; font-size:11px; }
}

/* Level and Fight occupy the same control baseline at every width. */
.arena-setup { align-items:end; }
.arena-setup > div { align-self:center; }
.arena-setup input, .arena-setup #startArena { box-sizing:border-box; height:44px; margin:0; }
.arena-setup #startArena { align-self:end; padding:8px 12px; }

/* Boss casts stay local to their target; the board never darkens or shakes. */
.boss-effect { position:absolute; inset:0; z-index:7; display:grid; place-items:center; pointer-events:none; color:var(--boss-color,#d6c18c); border:2px solid currentColor; background:#11233544; box-shadow:inset 0 0 15px currentColor; }
.boss-effect .ui-icon { width:60%; height:60%; image-rendering:pixelated; object-fit:contain; }
.boss-effect-titan { background:repeating-linear-gradient(45deg,transparent 0 8px,#b9c9d266 8px 11px,transparent 11px 16px); border:3px double #c0c8c4; }
.boss-effect-phoenix { border:0; background:linear-gradient(0deg,#ef755a77,transparent); clip-path:polygon(0 100%,8% 40%,30% 60%,48% 0,65% 50%,90% 25%,100% 100%); }
.boss-effect-clock { border:3px double #b5a6ee; background:repeating-linear-gradient(0deg,#a6b5eb18 0 2px,transparent 2px 7px); }
.boss-effect-prism { border:0; background:conic-gradient(#f48a93aa,#ecd899aa,#85d6b4aa,#85c6e9aa,#b897e9aa,#f48a93aa); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.boss-effect-rime { border:3px solid #b9eef9; background:radial-gradient(ellipse,#b9effb55,#74b8e888); clip-path:polygon(0 0,35% 12%,50% 0,65% 12%,100% 0,88% 35%,100% 50%,88% 65%,100% 100%,65% 88%,50% 100%,35% 88%,0 100%,12% 65%,0 50%,12% 35%); }
.boss-effect-hydra { border:2px dashed #98d8a3; background:radial-gradient(ellipse,#92d99a44,transparent); border-radius:50%; }
.boss-effect-tempest { border:0; background:linear-gradient(120deg,transparent 35%,#b6dbf277 48%,transparent 60%); }
.boss-effect-tempest::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 18%,#c3e7fb 0 5px,transparent 6px),radial-gradient(circle at 50% 5%,#c3e7fb 0 5px,transparent 6px),radial-gradient(circle at 85% 18%,#c3e7fb 0 5px,transparent 6px); }
.boss-effect-sentinel { inset:-8%; border:3px solid #e3c58f; background:radial-gradient(ellipse,#b69cf066,#604c8c22); clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%); }
.boss-effect-bombard { border:0; background:linear-gradient(0deg,#edb77866,transparent 75%); }
.boss-effect-rift { border:3px double #c2a3eb; background:linear-gradient(90deg,transparent,#bb8ce288,transparent); clip-path:polygon(30% 0,70% 0,100% 50%,70% 100%,30% 100%,0 50%); }
.boss-cast-flare { inset:-10%; border:2px solid currentColor; background:transparent; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }

/* The atlas opens inside a pixel sanctum. All scenery stays outside layout. */
:root { --atlas-engraving:url('assets/ui/atlas-engraving.svg'); }
#mainMenu {
  background-image:radial-gradient(ellipse at 50% 42%,#142f3e00 25%,#050d1866 100%),url('assets/ui/menu-sanctum.svg');
  background-size:100% 100%,cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#0b1725;
}
#mainMenu::before { border-color:#91b1a946; box-shadow:inset 0 0 70px #050b1544; }
#mainMenu .menu-content {
  background-image:var(--rune-pattern),var(--atlas-engraving),linear-gradient(135deg,#17313be8,#101e2eeb);
  background-size:96px 32px,320px 240px,100% 100%;
  background-position:center bottom,center,center;
  background-repeat:repeat-x,repeat,no-repeat;
}

#mainMenu .menu-navigation { position:relative; }
#mainMenu .menu-navigation > small { display:block; color:#aac8bc; }
#mainMenu .menu-options button:not(:disabled) {
  background-image:linear-gradient(115deg,#98c7b200 50%,#98c7b212),var(--atlas-engraving),linear-gradient(135deg,#253d4b,#192b3b);
  background-size:100% 100%,320px 240px,100% 100%;
  background-position:center,right center,center;
}
#mainMenu #resumeRun:not(:disabled) { background-image:var(--atlas-engraving),linear-gradient(110deg,#65543a,#3d392e); }
#mainMenu .menu-options button:not(:disabled):hover {
  background-image:var(--atlas-engraving),linear-gradient(135deg,#3d5860,#29424e);
  border-color:#efd193;
}
.menu-wisps { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.menu-wisps i {
  position:absolute; left:12%; top:35%; width:3px; height:3px; background:#b4d1ac;
  box-shadow:0 0 10px 3px #88c6ab2b; opacity:.65; animation:sanctum-mote 6s ease-in-out infinite;
}
.menu-wisps i:nth-of-type(2) { left:26%; top:15%; animation-delay:-2s; background:#e3c58b; }
.menu-wisps i:nth-of-type(3) { left:78%; top:18%; animation-delay:-4s; }
.menu-wisps i:nth-of-type(4) { left:89%; top:57%; animation-delay:-1s; background:#c8b3e7; }
.menu-wisps i:nth-of-type(5) { left:22%; top:86%; animation-delay:-3s; background:#e3c58b; }
.menu-wisps i:nth-of-type(6) { left:77%; top:83%; animation-delay:-5s; }
.sanctum-glyph {
  position:absolute; top:42%; width:44px; height:106px;
  background:var(--rune-pattern) center/44px 106px no-repeat;
  border-top:1px solid #ad98614d; border-bottom:1px solid #ad98614d; opacity:.8;
}
.glyph-left { left:clamp(24px,4vw,78px); }
.glyph-right { right:clamp(24px,4vw,78px); }
@keyframes sanctum-mote {
  0%,100% { opacity:.2; transform:translate(0,7px); }
  50% { opacity:.8; transform:translate(3px,-9px); }
}
/* Quiet star routes carry the same engraving into the menu pages. */
#help, #credits, #achievements, #bestiary, #talents {
  background-image:var(--rune-pattern),var(--rune-pattern),var(--atlas-engraving),radial-gradient(ellipse at 10% 0,#193c424d,transparent 65%);
  background-size:96px 32px,32px 96px,320px 240px,100% 100%;
  background-position:left bottom,right top,center,center;
  background-repeat:repeat-x,repeat-y,repeat,no-repeat;
}
#storyHub {
  background-image:var(--atlas-engraving),linear-gradient(#0c172633,#0c172680),url('assets/ui/menu-sanctum.svg');
  background-size:320px 240px,100% 100%,cover;
  background-position:center,center,center bottom;
  background-repeat:repeat,no-repeat,no-repeat;
}
#arenaHub {
  background-image:var(--rune-pattern),var(--atlas-engraving),linear-gradient(#0c17264d,#0c1726bb),url('assets/ui/menu-sanctum.svg');
  background-size:96px 32px,320px 240px,100% 100%,cover;
  background-position:center bottom,center,center,center;
  background-repeat:repeat-x,repeat,no-repeat,no-repeat;
}
.menu-page > .board-heading {
  background-image:linear-gradient(90deg,#b39c6c33,transparent 50%),var(--atlas-engraving);
  background-position:left bottom,right center;
  background-size:100% 1px,320px 240px;
  background-repeat:no-repeat;
}
@media (max-width:680px), (max-height:500px) {
  #mainMenu .menu-content { background-size:96px 24px,320px 240px,100% 100%; }
  .sanctum-glyph { width:24px; opacity:.45; }
  .glyph-left { left:20px; }
  .glyph-right { right:20px; }
}

/* Battle stonework fills the gutters while keeping the square board intact. */
body {
  background-image:var(--atlas-engraving),radial-gradient(ellipse at 15% 6%,#18363c65,transparent 45%),radial-gradient(ellipse at 90% 75%,#2f244345,transparent 55%);
  background-size:320px 240px,100% 100%,100% 100%;
}
.game-toolbar { position:relative; isolation:isolate; }
.game-toolbar::before {
  content:""; position:absolute; z-index:-1; pointer-events:none; left:128px; right:128px; top:calc(50% - 12px); height:24px;
  background:linear-gradient(90deg,transparent,#b7a06e55 15%,#749a8f55 50%,#b7a06e55 85%,transparent) center/100% 1px no-repeat,
    var(--rune-pattern) center/72px 24px repeat-x;
}
.arena, .arena.boss-fight {
  background-image:var(--rune-pattern),var(--rune-pattern),var(--atlas-engraving),linear-gradient(155deg,#18343e,#111f30 65%);
  background-size:30px 96px,30px 96px,320px 240px,100% 100%;
  background-position:left top,right top,center,center;
  background-repeat:repeat-y,repeat-y,repeat,no-repeat;
}
.arena.boss-fight { background-image:var(--rune-pattern),var(--rune-pattern),var(--atlas-engraving),linear-gradient(155deg,#392e3b,#181f30 65%); }
.board-panel {
  position:relative; isolation:isolate;
  background-image:url('assets/ui/battle-pillar.svg'),url('assets/ui/battle-pillar.svg'),var(--atlas-engraving),linear-gradient(135deg,#172f3c,#101f30 60%,#182b3b);
  background-size:clamp(44px,6vw,80px) 86%,clamp(44px,6vw,80px) 86%,320px 240px,100% 100%;
  background-position:16px 60%,calc(100% - 16px) 60%,center,center;
  background-repeat:no-repeat,no-repeat,repeat,no-repeat;
}
.board-panel::before {
  content:""; position:absolute; z-index:-1; pointer-events:none; inset:35px 8px 8px;
  background:radial-gradient(ellipse at 5% 52%,#edba6f25,transparent 17%),radial-gradient(ellipse at 95% 52%,#edba6f25,transparent 17%);
}
.board-panel::after {
  content:""; position:absolute; z-index:-1; pointer-events:none; inset:14px;
  background:linear-gradient(90deg,transparent,#a98f6055,transparent) center top/70% 1px no-repeat,
    linear-gradient(90deg,transparent,#7fa59b44,transparent) center bottom/70% 1px no-repeat;
}
@media (min-width:761px) and (min-height:600px) {
  .arena .fighter { position:relative; isolation:isolate; }
  .arena .fighter::before {
    content:""; position:absolute; z-index:-1; pointer-events:none; left:50%; top:-44px; transform:translateX(-50%);
    width:230px; height:172px; max-width:100%; background:url('assets/ui/battle-niche.svg') center/contain no-repeat;
  }
  .arena .enemy::before { opacity:.7; }
  .versus { position:relative; isolation:isolate; }
  .versus::before, .versus::after {
    content:""; position:absolute; z-index:-1; pointer-events:none; left:8%; right:8%; height:8px;
    background:linear-gradient(90deg,transparent,#b79b6c55,transparent) center/100% 1px no-repeat,
      var(--rune-pattern) center/48px 24px repeat-x;
  }
  .versus::before { top:-16px; }
  .versus::after { bottom:-16px; }
}
@media (min-width:761px) and (min-height:600px) and (max-height:740px) {
  .arena .fighter::before { width:150px; height:100px; top:-27px; }
}
@media (max-width:760px), (max-height:599px) {
  .board-panel { background-size:30px 80%,30px 80%,320px 240px,100% 100%; background-position:left center,right center,center,center; }
  .board-panel::before { display:none; }
  .arena, .arena.boss-fight { background-size:18px 96px,18px 96px,320px 240px,100% 100%; }
}
@media (max-width:420px) {
  .game-toolbar::before { left:112px; right:112px; }
}

/* Settings replaces its origin menu, with live audio controls. */
#mainMenu .menu-footer { display:flex; justify-content:center; gap:10px; margin-top:12px; }
#mainMenu .menu-footer .credits-link { margin:0; }
.pause-secondary { grid-template-columns:repeat(3,minmax(0,1fr)); }
#settings.menu-page[open] { display:flex; flex-direction:column; padding:clamp(12px,3vw,36px); overflow:hidden; }
#settings { background-image:var(--rune-pattern),var(--atlas-engraving),radial-gradient(ellipse at 15% 0,#26484166,transparent 70%); background-size:96px 32px,320px 240px,100% 100%; background-position:center bottom,center,center; background-repeat:repeat-x,repeat,no-repeat; background-color:#0c1726; }
#settings > .board-heading { flex-shrink:0; margin-bottom:20px; }
#settingsTitle { margin:4px 0; }
.settings-content { width:min(940px,100%); margin:auto; min-height:0; overflow:auto; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; padding:4px; }
.settings-card { min-width:0; padding:28px; border:1px solid #77968a; border-image:url('assets/ui/panel-frame.svg') 16 / 14px stretch; background-image:var(--rune-pattern),linear-gradient(145deg,#203d46,#112333); background-size:96px 32px,100% 100%; background-repeat:repeat-x,no-repeat; }
.settings-card-title { display:flex; align-items:center; gap:12px; margin-bottom:24px; color:#efd29b; }
.settings-card-title .ui-icon { width:32px; height:32px; }
.settings-card-title h3 { font-size:22px; margin:0; }
.settings-row { display:flex; justify-content:space-between; align-items:center; gap:12px; min-width:0; }
.settings-row > span, .settings-volume label { color:#d6e2da; font-size:16px; }
.settings-row button { min-width:70px; padding:10px 14px; font-size:14px; }
#settingsSound[aria-pressed="true"] { border-color:#a5c3a5; color:#c9edd0; background:#29453f; }
#settingsSound[aria-pressed="false"] { color:#aab7be; }
.settings-volume { display:grid; grid-template-columns:1fr auto; gap:14px; margin-top:28px; }
.settings-volume output { color:#edce91; font-size:16px; }
.settings-volume input { grid-column:1/-1; width:100%; margin:0; height:24px; appearance:none; background:transparent; cursor:pointer; }
.settings-volume input::-webkit-slider-runnable-track { height:8px; border:1px solid #637b7b; background:#091b29; }
.settings-volume input::-webkit-slider-thumb { appearance:none; width:20px; height:24px; margin-top:-9px; border:2px solid #f3d49a; background:#7d9e8c; box-shadow:inset 0 0 0 3px #183b3c; }
.settings-volume input::-moz-range-track { height:6px; border:1px solid #637b7b; background:#091b29; }
.settings-volume input::-moz-range-thumb { width:16px; height:20px; border:2px solid #f3d49a; border-radius:0; background:#7d9e8c; }
.settings-volume input:focus-visible { outline:2px solid #f0d49a; outline-offset:5px; }
.settings-status { grid-column:1/-1; margin:0; text-align:center; font-size:12px; color:#a9c5bd; }
@media (max-width:680px) {
  #mainMenu .menu-footer { margin-top:8px; }
  .settings-content { grid-template-columns:1fr; gap:14px; }
  .settings-card { padding:20px; }
  .settings-card-title { margin-bottom:16px; }
  .settings-card-title h3 { font-size:19px; }
  .settings-volume { margin-top:20px; gap:10px; }
}
@media (max-width:420px) {
  #pauseMenu .pause-secondary button { flex-direction:column; min-height:80px; gap:6px; padding:10px 4px; font-size:10px; }
  .settings-row > span, .settings-volume label, .settings-volume output { font-size:14px; }
  #fullscreenToggle { font-size:12px; padding:10px; }
}
@media (max-height:500px) {
  #mainMenu .menu-footer { margin-top:6px; }
  #settings > .board-heading { margin-bottom:10px; padding-bottom:8px; }
  #settingsTitle { font-size:22px; }
  #settings .board-heading small { display:none; }
  .settings-card { padding:16px; }
  .settings-card-title { margin-bottom:12px; }
  .settings-card-title h3 { font-size:18px; }
  .settings-volume { margin-top:12px; gap:6px; }
}

.settings-background { margin-top:28px; padding-top:24px; border-top:1px solid #76958a55; }
#backgroundToggle[aria-pressed="true"] { border-color:#a5c3a5; color:#c9edd0; background:#29453f; }
@media (max-height:500px) { .settings-background { margin-top:16px; padding-top:14px; } }

/* Transparent title art replaces the separate emblem and plain heading. */
#mainMenu #menuTitle {
  width:min(100%,440px); margin:22px auto 18px; padding:0;
  font-size:0; line-height:0; letter-spacing:0; text-shadow:none;
}
#menuTitle .title-logo { display:block; width:100%; height:auto; object-fit:contain; image-rendering:pixelated; }
@media (max-width:680px) and (min-height:501px) {
  #mainMenu #menuTitle { width:min(100%,320px); margin:12px auto 10px; }
}
@media (max-height:500px) {
  #mainMenu #menuTitle { width:min(100%,320px); margin:12px auto; }
}
@media (max-width:380px) and (max-height:500px) {
  #mainMenu #menuTitle { width:min(100%,230px); margin:0 auto; }
}

/* Visual novel: a full-bleed stage, standing cast, and bottom dialogue. */
#storyScene[open] {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto;
  gap:0; padding:0; border:0; isolation:isolate; background:#0b1726; overflow:hidden;
}
#storyScene .scene-heading {
  position:absolute; z-index:3; top:clamp(16px,3vh,30px); left:clamp(18px,4vw,64px); right:18px;
  width:fit-content; max-width:calc(100% - 36px); padding:12px 20px 13px;
  background:linear-gradient(100deg,#091828df,#09182870); border-left:3px solid #d3b371;
  box-shadow:0 4px 24px #030b1944; pointer-events:none;
}
#storyScene #sceneChapter { display:block; color:#b8d6cd; font-size:11px; letter-spacing:2px; }
#storyScene #sceneTitle { color:#ffebc5; font-size:clamp(19px,2vw,28px); line-height:1.25; margin:4px 0 0; text-shadow:2px 2px #0a1727; }
#storyScene .scene-illustration { position:absolute; inset:0; z-index:0; display:block; margin:0; border:0; border-image:none; background:none; box-shadow:none; }
#storyScene .scene-image { position:absolute; inset:0; display:block; border:0; background:#0c1b29; box-shadow:none; }
#storyScene .scene-image .story-art { display:block; width:100%; height:100%; max-height:none; margin:0; border:0; object-fit:cover; object-position:center 44%; image-rendering:pixelated; }
#storyScene .scene-image::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#05111e38,transparent 35%,#08152555 80%,#07111e99),linear-gradient(90deg,#07111e40,transparent 25% 75%,#07111e40); }
#storyScene #sceneCaption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#storyScene .scene-cast { position:relative; z-index:1; grid-row:1; width:min(1180px,100%); min-height:0; margin:auto auto 0; height:100%; overflow:hidden; pointer-events:none; }
#storyScene .vn-actor {
  position:absolute; bottom:-22px; width:38%; height:min(66vh,600px); max-height:calc(100% - 92px);
  object-fit:contain; object-position:center bottom; image-rendering:pixelated;
  filter:brightness(.72) saturate(.8) drop-shadow(0 8px 2px #03091899); transition:filter .25s ease-out;
}
#storyScene .vn-actor[hidden] { display:none; }
#storyScene .vn-actor-left { left:4%; }
#storyScene .vn-actor-right { right:4%; }
#storyScene .vn-actor-companion { width:24%; height:36%; left:39%; bottom:-14px; }
#storyScene .vn-actor[data-active="true"] { filter:brightness(1.08) saturate(1.05) drop-shadow(0 8px 2px #03091899); }
#storyScene .vn-actor[data-stone="true"] { filter:grayscale(1) brightness(.7) drop-shadow(0 8px 2px #03091899); }
#storyScene .vn-actor[data-actor="fen"] { height:min(32vh,230px); }
#storyScene[data-scene-kind="narration"] .vn-actor { filter:brightness(.82) drop-shadow(0 8px 2px #03091899); }
#storyScene[data-scene-kind="narration"] .vn-actor[data-stone="true"] { filter:grayscale(1) brightness(.7) drop-shadow(0 8px 2px #03091899); }
#storyScene .scene-dialogue {
  position:relative; z-index:2; grid-row:2; display:grid; grid-template-rows:auto auto; gap:16px;
  width:min(1160px,calc(100% - 64px)); min-height:240px; margin:0 auto clamp(18px,3vh,36px); padding:34px 38px 20px;
  border:1px solid #8b9f9c; border-top:2px solid #d8bd83; border-image:none;
  background-image:var(--rune-pattern),linear-gradient(130deg,#132c39f7,#0b182bf5 70%);
  background-size:96px 32px,100% 100%; background-position:right top,center; background-repeat:repeat-x,no-repeat;
  box-shadow:inset 0 0 0 5px #050e1b77,0 8px 36px #02071080; overflow:visible;
}
#storyScene .scene-dialogue::after { content:''; position:absolute; inset:7px; border:1px solid #90b5ac24; pointer-events:none; }
#storyScene .scene-character {
  position:absolute; left:30px; top:-22px; z-index:1; min-width:148px; padding:7px 25px;
  border:1px solid #c5ac7b; background:linear-gradient(110deg,#2c454d,#142b3a); box-shadow:3px 3px #071322;
}
#storyScene .scene-character::before { content:''; width:7px; height:7px; flex:none; background:#e3c587; transform:rotate(45deg); }
#storyScene .scene-character .creature-sprite { display:none; }
#storyScene .scene-character strong { color:#ffe6b4; font-size:20px; font-weight:600; letter-spacing:1px; }
#storyScene #sceneText { margin:0; align-self:start; min-height:3.15em; font-size:clamp(22px,2vw,27px); line-height:1.5; color:#fff3df; text-shadow:0 2px #060f1c; }
#storyScene .scene-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; }
#storyScene .scene-reading { display:flex; align-items:center; gap:14px; min-width:0; }
#storyScene #scenePage { margin:0; color:#a5c2c4; font-size:13px; letter-spacing:1px; white-space:nowrap; }
#storyScene .scene-progress { display:block; width:72px; height:4px; background:linear-gradient(90deg,#dbbf83 var(--scene-progress,0%),#4a65706b var(--scene-progress,0%)); }
#storyScene .scene-key-hint { color:#a4b6c0; font-size:11px; white-space:nowrap; }
#storyScene .scene-key-hint kbd { padding:1px 4px; border:1px solid #90b2b650; border-radius:2px; font:inherit; }
#storyScene .scene-actions { display:flex; align-items:center; gap:12px; margin:0; }
#storyScene .scene-actions button { min-height:42px; padding:7px 16px; font-size:14px; }
#storyScene #skipScene { border-color:transparent; color:#a7bcc7; background:transparent; box-shadow:none; }
#storyScene #nextScene { display:flex; align-items:center; justify-content:center; gap:16px; min-width:128px; border-color:#c8ab70; background:linear-gradient(120deg,#405b5d,#263e4b); color:#fff0ca; }
#storyScene #nextScene::after { content:''; width:8px; height:12px; background:#e9cd91; clip-path:polygon(0 0,100% 50%,0 100%); animation:vn-next-pulse 1.7s ease-in-out infinite; }
#storyScene[data-scene-kind="letter"] .scene-dialogue { border-color:#be9a63; background-image:var(--rune-pattern),linear-gradient(130deg,#342d23f7,#191f2bf7); }
#storyScene[data-scene-kind="letter"] .scene-character { background:linear-gradient(110deg,#615038,#302b24); }
#storyScene[data-scene-kind="narration"] .scene-character { border-color:#91b8bb; background:linear-gradient(110deg,#29404f,#162839); }
#storyScene[data-scene-kind="narration"] #sceneText { color:#e0edf0; }
@keyframes vn-next-pulse { 0%,100% { opacity:.5; transform:translateX(0); } 50% { opacity:1; transform:translateX(3px); } }
/* A closing chapter card over its final scene. */
#storyComplete[open] { position:fixed; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding:clamp(20px,5vh,54px) 24px; gap:10px; background:#081624; }
#storyCompleteArt { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; opacity:.5; }
#storyComplete::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#07152333,#07152377 35%,#071523ef); }
#storyCompleteTitle { color:#ffe0a3; font-size:clamp(24px,3.5vw,44px); }
#storyCompleteLabel { color:#b1d3cf; letter-spacing:4px; }
#storyCompleteInfo { font-size:18px; color:#d6e5e4; }
#storyComplete .share-result { width:min(100%,480px); text-align:center; }
#storyComplete .share-result p:empty { display:none; }
@media (max-width:680px) {
  #storyScene .scene-heading { top:16px; left:16px; padding:9px 13px; }
  #storyScene #sceneChapter { font-size:10px; letter-spacing:1px; }
  #storyScene #sceneTitle { font-size:20px; }
  #storyScene .vn-actor { width:54%; height:100%; max-height:min(470px,calc(100% - 86px)); bottom:-18px; }
  #storyScene .vn-actor-left { left:-4%; }
  #storyScene .vn-actor-right { right:-4%; }
  #storyScene .vn-actor-companion { width:32%; height:38%; left:39%; }
  #storyScene .vn-actor[data-actor="fen"] { height:38%; }
  #storyScene .scene-dialogue { width:calc(100% - 28px); min-height:270px; margin-bottom:14px; padding:27px 20px 14px; gap:12px; }
  #storyScene .scene-character { left:17px; min-width:124px; top:-19px; padding:5px 17px; }
  #storyScene .scene-character strong { font-size:18px; }
  #storyScene #sceneText { font-size:20px; line-height:1.45; min-height:4.35em; }
  #storyScene .scene-key-hint, #storyScene .scene-progress { display:none; }
  #storyScene .scene-footer { gap:10px; }
  #storyScene .scene-reading { gap:0; }
  #storyScene .scene-actions { gap:4px; }
  #storyScene .scene-actions button { padding:6px 10px; }
  #storyScene #nextScene { min-width:105px; gap:10px; }
}
@media (max-width:380px) and (max-height:600px) {
  #storyScene .scene-heading { top:10px; left:10px; padding:7px 10px; }
  #storyScene #sceneChapter { font-size:9px; }
  #storyScene #sceneTitle { font-size:17px; }
  #storyScene .scene-dialogue { width:calc(100% - 20px); min-height:260px; margin-bottom:10px; padding:24px 15px 10px; gap:9px; }
  #storyScene #sceneText { font-size:18px; line-height:1.4; }
  #storyScene .scene-actions button { font-size:13px; padding:5px 8px; min-height:36px; }
  #storyScene #nextScene { min-width:92px; }
}
@media (max-height:500px) and (min-width:500px) {
  #storyScene .scene-heading { top:10px; left:16px; padding:6px 12px; }
  #storyScene #sceneTitle { font-size:17px; margin-top:1px; }
  #storyScene #sceneChapter { font-size:9px; }
  #storyScene .vn-actor { height:100%; max-height:min(280px,calc(100% - 48px)); bottom:-14px; }
  #storyScene .vn-actor[data-actor="fen"] { height:48%; }
  #storyScene .vn-actor-companion { height:45%; }
  #storyScene .scene-dialogue { width:calc(100% - 32px); min-height:0; margin-bottom:10px; padding:21px 22px 10px; gap:6px; }
  #storyScene .scene-character { top:-17px; padding:3px 16px; }
  #storyScene .scene-character strong { font-size:16px; }
  #storyScene #sceneText { font-size:18px; line-height:1.35; min-height:2.7em; }
  #storyScene .scene-key-hint { display:none; }
  #storyScene .scene-actions button { min-height:34px; padding:4px 12px; font-size:13px; }
  #storyScene #nextScene { min-width:106px; }
  #storyComplete[open] { gap:6px; padding:14px 20px; }
  #storyCompleteTitle { font-size:24px; margin:0; }
  #storyCompleteInfo { font-size:15px; }
  #storyComplete button { padding:7px 14px; min-height:34px; }
}
@media (max-height:350px) and (min-width:500px) {
  #storyScene #sceneTitle { display:none; }
  #storyScene #sceneText { font-size:17px; line-height:1.3; }
  #storyScene .scene-dialogue { padding:19px 18px 8px; }
}

/* Large, readable effect tiles in the field manual, separate from the combat HUD. */
#helpPanelGems .element-card { min-height:216px; padding:20px; }
#helpPanelGems .element-card > img { width:64px; height:64px; margin:0 0 14px 12px; }
#helpPanelGems .element-card h3 { font-size:23px; line-height:1.3; min-height:50px; margin:8px 0 20px; }
#helpPanelGems .stat-strip, #helpPanelReactions .stat-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
#helpPanelGems .stat-badge, #helpPanelReactions .stat-badge {
  min-width:0; min-height:88px; padding:10px 12px; display:grid; grid-template-columns:34px auto;
  align-content:center; justify-content:center; column-gap:10px; row-gap:7px;
  border-color:#6e9198; background:linear-gradient(135deg,#213c4b,#102635); font-size:24px; line-height:1.1;
  box-shadow:inset 0 2px #b9d5ce16,0 3px #07132188;
}
#helpPanelGems .stat-badge .ui-icon, #helpPanelReactions .stat-badge .ui-icon { width:34px; height:34px; float:none; margin:0; object-fit:contain; }
#helpPanelGems .stat-badge b, #helpPanelReactions .stat-badge b { align-self:center; }
#helpPanelGems .guide-stat-label, #helpPanelReactions .guide-stat-label {
  display:block; grid-column:1/-1; margin:0; color:#c2d3d5; font-size:12px; line-height:1.2; letter-spacing:0;
  text-align:center; white-space:normal;
}
#helpPanelReactions .reaction-cards { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
#helpPanelReactions .reaction-card { min-width:0; padding:18px 16px; }
#helpPanelReactions .reaction-formula { gap:8px; flex-wrap:nowrap; justify-content:center; }
#helpPanelReactions .reaction-formula > img, #helpPanelReactions .reaction-formula .aura-orb { width:40px; height:40px; flex:none; }
#helpPanelReactions .reaction-formula > strong .ui-icon { width:36px; height:36px; }
#helpPanelReactions .reaction-name { margin:12px 0 0; text-align:center; font-size:20px; line-height:1.25; color:#f1dcae; }
#helpPanelReactions .stat-strip { gap:8px; }
#helpPanelReactions .stat-badge { min-height:84px; padding:9px 6px; gap:7px; font-size:23px; }
#helpPanelReactions .stat-badge:only-child { grid-column:1/-1; }
#helpPanelReactions .reaction-order { grid-column:1/-1; gap:18px; }
#helpPanelReactions .reaction-order img { width:36px; height:36px; }
/* Looping examples use existing gems/sprites. Only local opacity/transform animate. */
.reaction-demos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 24px; }
#helpPanelReactions .reaction-demo { margin:0; padding:16px; min-width:0; text-align:center; }
#helpPanelReactions .reaction-demo h3 { font-size:18px; margin:0 0 12px; color:#f4dba4; }
.reaction-demo-stage { position:relative; display:flex; align-items:center; justify-content:center; gap:12px; min-height:124px; padding:8px 4px; overflow:hidden; }
.reaction-demo-board { --demo-cell:30px; position:relative; display:grid; grid-template-columns:repeat(3,var(--demo-cell)); gap:4px; padding:6px; background:#0a1724; border:1px solid #6d8785; flex:none; box-shadow:3px 3px #07101c; }
.reaction-demo-board > span { display:grid; place-items:center; width:var(--demo-cell); height:var(--demo-cell); background:#223846; border:1px solid #47606c; }
.reaction-demo-board img { width:85%; height:85%; image-rendering:pixelated; }
.reaction-demo-board .demo-match-cell { border-color:#c4a36d; animation:guide-match-row 7s ease-in-out infinite; }
.reaction-demo-arrow { color:#e9c783; font-size:26px; flex:none; animation:guide-match-arrow 7s ease-in-out infinite; }
.reaction-demo-enemy { position:relative; width:88px; height:92px; display:grid; place-items:center; flex:none; }
.reaction-demo-enemy .demo-creature { position:relative; z-index:1; width:64px; height:64px; image-rendering:pixelated; }
.reaction-demo-enemy::before { content:''; position:absolute; inset:4px; border:3px solid #ee8568; background:#e8875612; box-shadow:0 0 14px #f29b6040; border-radius:50%; }
.demo-enemy-aura { position:absolute; z-index:2; right:0; top:0; display:grid; place-items:center; width:32px; height:32px; background:#402f2a; border:1px solid #efb88b; }
.demo-enemy-aura img { width:26px; height:26px; image-rendering:pixelated; }
.demo-apply .reaction-demo-enemy::before, .demo-apply .demo-enemy-aura { animation:guide-aura-apply 7s ease-in-out infinite; }
.demo-consume .reaction-demo-enemy::before, .demo-consume .demo-enemy-aura { animation:guide-aura-consume 7s ease-in-out infinite; }
.demo-consume .demo-creature { animation:guide-reaction-hit 7s ease-in-out infinite; }
.reaction-demo-outcome { display:flex; align-items:center; justify-content:center; gap:8px; min-height:30px; margin-top:6px; color:#ffe0a0; font-size:18px; animation:guide-aura-result 7s ease-in-out infinite; }
.reaction-demo-outcome img { width:28px; height:28px; image-rendering:pixelated; }
.reaction-demo figcaption { color:#bccfd2; font-size:13px; line-height:1.3; margin-top:5px; }
#help:not([open]) .reaction-demo *, #helpPanelReactions[hidden] .reaction-demo * { animation-play-state:paused; }
#help:not([open]) .reaction-demo-enemy::before, #helpPanelReactions[hidden] .reaction-demo-enemy::before { animation-play-state:paused; }
@keyframes guide-match-row { 0%,16%,100% { opacity:1; transform:scale(1); filter:none; } 25%,40% { opacity:1; transform:scale(1.08); filter:brightness(1.5); } 52%,90% { opacity:.28; transform:scale(.92); filter:none; } }
@keyframes guide-match-arrow { 0%,20%,92%,100% { opacity:.3; transform:translateX(0); } 34%,46% { opacity:1; transform:translateX(4px); } 58%,82% { opacity:.3; transform:translateX(0); } }
@keyframes guide-aura-apply { 0%,40%,100% { opacity:0; } 54%,92% { opacity:1; } }
@keyframes guide-aura-consume { 0%,40%,100% { opacity:1; } 54%,92% { opacity:0; } }
@keyframes guide-aura-result { 0%,40%,100% { opacity:0; transform:translateY(4px); } 54%,92% { opacity:1; transform:translateY(0); } }
@keyframes guide-reaction-hit { 0%,43%,70%,100% { filter:none; transform:scale(1); } 50%,58% { filter:brightness(1.9); transform:scale(1.08); } }
@media (max-width:1200px) {
  #helpPanelGems .element-guide { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #helpPanelReactions .reaction-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reaction-demos { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #helpPanelReactions .reaction-demo:last-child { grid-column:1/-1; }
}
@media (max-width:700px) {
  #helpPanelGems .element-guide { grid-template-columns:1fr; }
  #helpPanelGems .element-card { min-height:190px; padding:18px; }
  #helpPanelGems .element-card > img { width:56px; height:56px; margin:0 0 10px 10px; }
  #helpPanelGems .element-card h3 { min-height:40px; font-size:22px; margin:5px 0 14px; }
  #helpPanelGems .stat-badge, #helpPanelReactions .stat-badge { min-height:84px; font-size:24px; }
  #helpPanelReactions .reaction-cards, .reaction-demos { grid-template-columns:1fr; }
  #helpPanelReactions .reaction-formula { gap:12px; }
  #helpPanelReactions .reaction-formula > img, #helpPanelReactions .reaction-formula .aura-orb { width:44px; height:44px; }
  #helpPanelReactions .reaction-card { padding:18px; }
  #helpPanelReactions .reaction-demo { padding:18px; }
  .reaction-demo-stage { gap:18px; }
  .reaction-demo-board { --demo-cell:34px; }
  #helpPanelReactions .reaction-order { gap:12px; }
  #helpPanelReactions .reaction-order img { width:30px; height:30px; }
}
@media (max-width:380px) {
  #helpPanelReactions .reaction-order { gap:9px; }
  #helpPanelReactions .reaction-order img { width:28px; height:28px; }
  .reaction-demo-stage { gap:10px; }
  .reaction-demo-board { --demo-cell:30px; }
}