:root{color-scheme:dark;--bg:#101715;--panel:#1b2621;--ink:#ecede4;--muted:#a3b3a7;--gold:#d8b875;--line:#34473b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,sans-serif;padding:24px 18px calc(100px + env(safe-area-inset-bottom));max-width:780px;margin:auto}header{padding:12px 2px 20px}.brand{letter-spacing:.15em;font-size:11px;color:var(--gold)}h1{font-size:28px;line-height:1.2;margin:14px 0}h2{font-size:21px;margin:0 0 12px}h3{font-size:17px}p{margin:8px 0;color:var(--muted)}section,.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;margin:12px 0}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.row:last-child{border:0}.small{font-size:13px;color:var(--muted)}button{font:inherit;cursor:pointer;background:var(--gold);border:0;border-radius:12px;color:#1b211a;padding:12px 16px;min-height:44px}button:disabled{opacity:.45;cursor:default}.secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}.actions{display:grid;gap:9px;margin:14px 0}.actions button{text-align:left}input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink);font:inherit;margin:6px 0 12px}label{display:block}nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:8px;background:#152019f5;border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}nav button{background:transparent;color:var(--muted);width:min(30%,230px);padding:4px;font-size:21px}nav span{display:block;font-size:12px}nav button.active{color:var(--gold);background:#d8b87512}.prose{white-space:pre-wrap;overflow-wrap:anywhere}.monster{width:100%;max-height:360px;object-fit:contain;border-radius:14px;background:var(--bg)}#error{color:#ffbfad;position:relative}details{margin:14px 0}summary{cursor:pointer;color:var(--gold)}.empty{text-align:center;padding:30px 12px}.badge{color:var(--gold);font-size:13px}button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.battle-scroll{overflow:auto;max-height:65vh;max-width:100%;margin:16px 0;overscroll-behavior:contain;border:1px solid var(--line);border-radius:12px}.battle-grid{display:grid;gap:3px;width:max-content;padding:4px;background:#0d1410}.battle-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px;background:#273e2d;color:#fff;border:2px solid #45634a;border-radius:6px;touch-action:manipulation;font-size:13px}.battle-cell:disabled{opacity:1}.cell-icon{font-size:27px}.cell-coord{position:absolute;top:2px;left:4px;font-size:10px;color:#afc2b1}.terrain-wall{background:#484d50}.terrain-cover{background:#5a4b2e}.terrain-trap{background:#6c3730}.terrain-rubble{background:#514f3c}.terrain-spent{background:#342e29}.risk-high{border-color:#ec6d66}.risk-low{border-color:#7ce1b1}.risk-mid{border-color:#dcc06d}.battle-log{font-size:14px;max-height:240px;overflow:auto}#tactical>button{margin:4px 4px 4px 0}

.battle-scroll{overflow:visible;max-height:none}.battle-grid{width:100%;gap:3px;padding:3px}.battle-cell{width:100%;min-width:0;min-height:0;aspect-ratio:1;height:auto;padding:9px 1px 8px;gap:0;font-size:10px;line-height:1}.battle-cell .cell-icon{font-size:19px;line-height:20px}.battle-cell strong{font-size:10px;line-height:11px}.cell-coord{font-size:8px;top:2px;left:2px}.terrain-mark{position:absolute;right:2px;top:2px;font-size:9px}.risk-value{position:absolute;bottom:1px;font-size:8px}

.dice-overlay{position:fixed;inset:0;background:#07100ed9;z-index:1000;display:flex;align-items:center;justify-content:center;padding:22px}.dice-panel{width:100%;max-width:440px;text-align:center;background:#1b2621;border:1px solid #d8b875;border-radius:22px;padding:24px;box-shadow:0 20px 70px #0008}.dice-numbers{font-size:58px;font-weight:800;color:#d8b875;font-variant-numeric:tabular-nums;margin:18px 0}.dice-panel p{color:#ecede4}.dice-result{padding:12px;border-left:3px solid var(--gold);background:#ffffff08}#tactical select{display:block;width:100%;margin:10px 0;background:var(--panel);color:var(--ink);padding:10px;border:1px solid var(--line);border-radius:10px}

.battle-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.battle-actions button{font-size:13px;padding:10px 6px}.battle-cell .cell-icon{position:relative;z-index:2}.defeat-overlay .dice-panel{max-width:300px}.defeat-overlay h2{font-size:20px}

.play-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 18px}
.battle-intro{position:fixed;inset:0;z-index:1100;background:#07100eed;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:all}
.clashing-swords{position:relative;width:220px;height:220px}.intro-sword{position:absolute;bottom:20px;width:40px;height:180px;transform-origin:50% 90%}.intro-sword svg{width:100%;height:100%}.sword-left{left:35px;animation:sword-left-clash 1.1s ease-in-out both}.sword-right{right:35px;animation:sword-right-clash 1.1s ease-in-out both}
@keyframes sword-left-clash{0%,15%{transform:rotate(0)}60%,85%{transform:rotate(45deg)}100%{transform:rotate(43deg)}}
@keyframes sword-right-clash{0%,15%{transform:rotate(0)}60%,85%{transform:rotate(-45deg)}100%{transform:rotate(-43deg)}}
@media(prefers-reduced-motion:reduce){.intro-sword{animation:none}.sword-left{transform:rotate(45deg)}.sword-right{transform:rotate(-45deg)}}

.app-toolbar{display:flex;gap:8px;flex-wrap:wrap}.app-toolbar button{font-size:13px}.review-stars{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:16px 0}.review-stars button{display:flex;flex-direction:column;align-items:center;background:transparent;border:1px solid var(--line);color:var(--muted);font-size:27px;padding:6px}.review-stars button.selected{color:var(--gold);border-color:var(--gold);background:#d8b87512}.review-stars small{font-size:11px}.feedback-overlay .dice-panel{max-width:400px;max-height:90vh;overflow:auto}.feedback-overlay textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;resize:vertical}.feedback-overlay form>button{margin:10px 5px 0}.feedback-error{color:#ffbfad!important}

/* Quiet parchment-and-lantern accents, with full mobile width. */
body{background:radial-gradient(ellipse at 15% 0,#263429 0,transparent 45%),var(--bg)}
section{background:linear-gradient(145deg,#233025,#1b2621 65%);box-shadow:0 8px 24px #0002}
summary{padding:8px 0;line-height:1.4}h2{color:#f4e7c6}h3{color:var(--gold)}
.scene-atmosphere{border-left:2px solid var(--gold);padding:2px 14px;margin:8px 0 24px;background:#d8b87508;border-radius:0 12px 12px 0}
.scene-atmosphere h3{font-size:17px;margin:8px 0}.scene-atmosphere p{font-style:italic;color:#bbc8bd;line-height:1.7}
.scene-label{color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font-size:11px;margin:0 0 10px}.scene-body{line-height:1.75}
.shop-row{border-top:1px solid var(--line);padding:16px 0}.shop-actions{display:flex;flex-wrap:wrap;gap:8px}.shop-actions button{font-size:14px;padding:10px 12px}
.merchant-intro{font-style:italic;line-height:1.7}.shop-row[hidden],details[hidden]{display:none}


.spell-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.spell-counts{color:var(--gold);font-variant-numeric:tabular-nums}.spell-card{padding:16px;background:#101a14;border:1px solid var(--line);border-radius:14px;margin:10px 0;overflow-wrap:anywhere}.spell-choice{display:flex;gap:12px;align-items:center}.spell-choice input,.spell-toggle input{width:22px;height:22px;accent-color:var(--gold);margin:0;flex-shrink:0}.spell-toggle{display:flex;align-items:center;gap:10px;margin:14px 0}.spell-badges{display:flex;flex-wrap:wrap;gap:6px}.spell-badges span{font-size:11px;border:1px solid #65593c;color:var(--gold);padding:3px 7px;border-radius:20px}.spell-card a{color:var(--gold);font-size:13px}.spell-note{color:#d8bf8f;font-size:13px}.spell-subtitle{font-style:italic}select{width:100%;padding:10px;margin:6px 0 12px;font:inherit;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px}

body{padding-top:48px}

.adventure{border-left:3px solid var(--accent,#d7bd79);padding-left:12px;margin:12px 0}
.adventure-easy summary{color:#8c998f}.adventure-matched summary{color:#f0f4ee}.adventure-hard summary{color:#edbd72}
.weapon-weak{color:#7dce8c}.weapon-normal{color:#75b6ff}.weapon-good{color:#c093f4}.weapon-best{color:#f3cf72}
.weapon-description{line-height:1.55;font-size:.9rem;max-width:65ch}.spell-aim-hint{color:#bba0f6}
.spell-projectile{position:fixed;z-index:1000;pointer-events:none;color:#fff;font-size:36px;text-shadow:0 0 12px #b890ff,0 0 30px #5f91ff}
.spell-impact{animation:spell-pulse .43s ease-out;box-shadow:inset 0 0 24px #ac8be5}
@keyframes spell-pulse{50%{background:#70599a;filter:brightness(1.6)}}
@media(prefers-reduced-motion:reduce){.spell-impact{animation:none}}
.roll-overlay .dice-panel{max-height:calc(100dvh - 36px);overflow:auto;padding:20px}.roll-overlay h2{font-size:19px;line-height:1.4}
.roll-dice{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:8px 0 18px}.roll-die{width:min(180px,calc((100vw - 108px)/2));max-width:180px;border:1px solid transparent;border-radius:18px;padding:4px;box-sizing:border-box}.roll-die:only-child{width:180px}
.d20-die canvas{width:100%;aspect-ratio:1;display:block}.roll-die-value{font-size:19px;font-weight:800;color:#f4dc9a;font-variant-numeric:tabular-nums}
.chosen-die{border-color:#d8b875;background:#d8b87512}.other-die-face{margin:14px auto;width:88px;height:88px;display:grid;place-items:center;border:2px solid #ecd299;border-radius:16px;background:linear-gradient(145deg,#b48a42,#513f20);color:#fff6df;font-size:40px;font-weight:800;box-shadow:4px 8px 20px #0007}
.roll-hint{font-size:13px;color:#bfbcac!important}.roll-overlay[data-ready="true"]{cursor:pointer}.roll-overlay button{width:100%;margin-top:8px;min-height:46px}.roll-overlay button:focus-visible{outline:3px solid #fff0ba;outline-offset:3px}
.spell-description{line-height:1.6;color:#dce6db}.spell-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.spell-stats>div{background:#ffffff06;border:1px solid #ffffff12;border-radius:10px;padding:10px;overflow-wrap:anywhere}.spell-stats dt{font-size:11px;color:#acb9ab;text-transform:uppercase;letter-spacing:.04em}.spell-stats dd{margin:5px 0 0;font-size:13px;font-weight:600;line-height:1.45;color:#eadeb5}.spell-warning{border-left:3px solid #e6ad6f;padding-left:10px;color:#f0c18c!important}.spell-card>strong{font-size:17px}
.spell-hotbar{display:flex;gap:8px;overflow-x:auto;padding:8px 0 12px;scroll-snap-type:x proximity}.spell-shortcut{flex:0 0 108px;min-height:76px;padding:9px 7px;scroll-snap-align:start;display:flex;flex-direction:column;gap:7px;justify-content:center;white-space:normal}.spell-shortcut strong{font-size:13px;line-height:1.25}.spell-shortcut small{font-size:10px}.spell-attack{background:#632e30;color:#ffe7e4;border-color:#c15e5c}.spell-negative{background:#284b36;color:#e1f5dc;border-color:#679c61}.spell-support{background:#294762;color:#e2efff;border-color:#6394c6}.chosen-spell{outline:2px solid #e9ce82;outline-offset:-3px}.battle-primary{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:8px}.battle-main{background:#e5c56f;color:#292518;border:1px solid #f1d78e;font-size:13px;padding:10px 6px;min-height:50px}.battle-secondary{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}.battle-secondary button{font-size:12px;padding:8px 5px;min-height:42px}.end-turn{position:fixed;right:12px;top:auto;bottom:calc(82px + env(safe-area-inset-bottom));z-index:120;background:#202b25e8;color:#bfcbbf;border:1px solid #7e8a6c80;padding:7px 12px;min-height:32px;font-size:12px;font-weight:500;backdrop-filter:blur(8px)}
.spell-shortcut.spell-unavailable:disabled{background:#353a37;color:#b8bdb9;border-color:#59615b;opacity:1}.spell-unavailable small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#spell-components-needed{border:1px solid #80733e;border-radius:12px;padding:12px}

.tutorial-overlay{position:fixed;inset:0;z-index:200;background:#08100dcc;display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}.tutorial-panel{margin:0;width:min(560px,100%);max-height:calc(100dvh - 24px);overflow:auto;background:#202e24;border:1px solid #a68c4d;border-radius:20px;padding:20px;box-shadow:0 16px 60px #0009}.tutorial-panel h2{font-size:23px;line-height:1.3}.tutorial-progress{color:#e7c879;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.tutorial-footer{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.tutorial-skip{display:block;margin:12px auto 0;background:transparent;border:0;color:#b1bcb2;font-size:12px}.tutorial-guild{border-top:1px solid #66715a;padding:12px 0}.tutorial-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:12px 0}.tutorial-cell{aspect-ratio:1;min-width:0;min-height:44px;padding:0;border:1px solid #5a805d;background:#29452f;font-size:25px}.tutorial-cell.terrain-cover{background:#624f2d}.tutorial-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tutorial-controls button{padding:10px 6px;font-size:12px}.tutorial-tasks{padding-left:18px;font-size:13px}.tutorial-tasks .done{color:#9acb9f}.tutorial-resume{padding:12px;border:1px solid #a68c4d;border-radius:12px}.tutorial-summary{color:#e7c879;font-weight:600}
.roll-outcome{text-align:center;font-size:27px;font-weight:800;min-height:40px}.roll-success{color:#fff}.roll-failure{color:#ff6565}.roll-critical{color:#70df91}.story-option-used:disabled{background:#414743;color:#d0d0d0;opacity:.7}.adventure-difficulty{display:block;padding:10px 12px;margin:12px 0;border-left:4px solid var(--gold);background:#d8b87513;color:var(--ink)}.adventure-hard .adventure-difficulty{color:#f7cd7a}.adventure-easy .adventure-difficulty{color:#bdc8c0}

.scene-art{position:relative;isolation:isolate;overflow:hidden;border-radius:16px;background:#101b24;margin:12px -8px 22px;padding:clamp(16px,4vw,28px)}
.scene-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0;pointer-events:none}
.scene-art::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(9,17,25,.35),rgba(9,17,25,.7) 45%,rgba(9,17,25,.94));pointer-events:none}
.scene-text{position:relative;z-index:2;color:#f4f6f8;text-shadow:0 1px 3px #000}.scene-art .scene-atmosphere p{color:#e0e5e9}.scene-art .prose{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.scene-art,.scene-backdrop{animation:none;transition:none}}

.ac-shield{display:inline-flex;vertical-align:middle;width:38px;height:42px;margin:0 6px;flex-shrink:0}.ac-shield svg{width:100%;height:100%}.battle-statuses{display:flex;gap:6px;flex-wrap:wrap}.status-chip{padding:5px 8px;border-radius:12px;font-size:11px;border:1px solid #648372}.status-positive{background:#173c37;color:#95e2c7}.status-negative,.armor-warning{color:#ffa291}.status-negative{background:#452d32;border-color:#865453}.armor-option{padding:10px 0;border-bottom:1px solid var(--line)}.unit-health-track{width:75%;height:4px;background:#17221b;border-radius:3px;overflow:hidden;margin-top:3px}.unit-health-fill{background:#8dce8b;height:100%;transition:width .4s ease-out}.battle-cell[data-health-change=damage]{box-shadow:inset 0 0 12px #a94141}.battle-cell[data-health-change=heal]{box-shadow:inset 0 0 12px #57ac84}.health-change{position:absolute;left:50%;top:10%;z-index:6;display:flex;flex-direction:column;transform:translateX(-50%);font-size:20px;font-weight:800;text-shadow:0 2px 3px #101010;pointer-events:none;white-space:nowrap}.health-damage{color:#ff8383}.health-heal{color:#83e7a8}.health-absorbed{color:#91caff}.health-miss{color:#d5ddd8;font-size:12px}.temp-hp{font-size:8px;color:#91caff}.unit-status{position:absolute;left:3px;top:3px;color:#9dceec}@media(prefers-reduced-motion:reduce){.unit-health-fill{transition:none}}

/* Clear action hierarchy and readable illustrated scenes. */
header{padding:12px 2px 10px}h1{margin:10px 0 14px}.player-overview{display:flex;flex-wrap:wrap;gap:7px;margin:0}.player-overview>span{padding:5px 10px;border:1px solid #728b7040;border-radius:20px;font-size:12px;background:#24312780}.overview-level{color:#e8d6a7}.overview-gold{color:#e5c77b}.overview-rank{color:#b5c4b8}
.app-toolbar{justify-content:flex-end;margin:6px 0 14px}.app-toolbar button{font-size:11px;padding:5px 9px;min-height:30px;color:#afbbaf;border-color:#52664c60}.play-tabs{background:#101a14;border:1px solid #52664c80;border-radius:16px;padding:5px;gap:5px}.play-tabs button{border-radius:12px;font-weight:600;min-height:46px}.play-tabs button.secondary{border:0}
.hero-summary{display:flex;gap:12px;align-items:center;margin:10px 0 14px}.hero-avatar{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;color:#ebd593;border:1px solid #a18c5860;border-radius:15px;background:radial-gradient(circle at top,#566349,#273229);font-size:24px}.hero-profile{min-width:0;flex:1}.hero-profile strong{display:block;font-size:18px;overflow-wrap:anywhere}.hero-profile small{font-size:12px;color:#adbdaa}.hero-ac{white-space:nowrap;font-size:14px;color:#c3d2d4;font-weight:600}.hero-vitality{margin:10px 0 15px}.hero-health-label{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:13px;margin-bottom:7px}.hero-health-label strong{color:#d0e8cc}.hero-health-label small{color:#b4d7ed;font-size:11px}.hero-health-track{height:9px;background:#101e16;border-radius:12px;overflow:hidden;border:1px solid #49614970}.hero-health-fill{height:100%;background:linear-gradient(90deg,#6c9672,#b9d6a0);border-radius:inherit;transition:width .4s ease-out}.turn-resources{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:12px 0}.turn-resources>span{font-size:11px;border-radius:9px;padding:5px 8px;background:#ffffff06;color:#c3d0bd}.turn-resources .round-label{color:#e3d099}.turn-resources .action-resource{color:#cddfad}.turn-resources .resource-used{color:#929f97}.turn-resources .movement-resource{color:#bcd6e3}.battle-guidance{margin-top:10px;font-size:12px}.battle-main{border-radius:15px;box-shadow:inset 0 1px #fff4,0 3px 10px #0002}.battle-main.battle-shield{background:#c3deed;color:#1a4258;border-color:#daedf7}.battle-shield:disabled{opacity:.48}.battle-secondary button{border-radius:13px;background:#18231c55}.last-result{font-size:12px;margin-bottom:8px}.last-result summary{color:#a8b9aa}.battle-statuses{margin:8px 0}
.roll-result{margin:6px 0 12px}.roll-comparison{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;color:#d8e1e0;font-size:16px;line-height:1.2}.roll-equation{white-space:nowrap}.roll-total{border-radius:10px;padding:7px 9px;background:#ffffff0b;font-size:20px;color:#fff4d6}.roll-versus{font-size:12px;color:#a9b9b4}.roll-impact{font-size:15px;margin:14px 0 10px}.impact-damage{color:#ffa493}.impact-miss{color:#c7d6cf}.ac-shield{width:30px;height:34px;margin:0 2px;vertical-align:middle;filter:drop-shadow(0 2px 5px #7faed32a)}.roll-shield-bonus{display:inline-flex;padding:6px 12px;border-radius:20px;border:1px solid #a2cde455;background:#a1d2ed18;color:#c1e3f7;font-size:13px}.roll-calculation{margin:12px 0 4px}.roll-calculation summary{font-size:12px;color:#a5b9b3;padding:4px}.roll-calculation p{font-size:12px;color:#b9c9c1}.dice-panel{padding:20px;border-color:#b79e63;background:linear-gradient(160deg,#26322c,#18221e 75%)}.dice-panel h2{font-size:18px}.roll-hint{font-size:11px!important}.dice-panel>button{width:100%;margin-top:10px}.roll-die-value{font-size:17px}.roll-outcome{margin-top:12px}
.scene-art{padding:clamp(18px,5vw,30px);padding-top:145px;background:#17212a;min-height:320px;border:1px solid #adc3d02b}.scene-backdrop{object-position:center 20%;opacity:.92}.scene-art::before{background:linear-gradient(180deg,rgba(9,17,25,.12) 0,rgba(9,17,25,.20) 100px,rgba(9,17,25,.76) 200px,rgba(9,17,25,.92) 100%)}.scene-art .scene-atmosphere{background:#0b171e55;border-color:#dcc794bb;margin-bottom:20px;backdrop-filter:blur(3px)}.scene-art .scene-atmosphere h3{color:#f6dfaa}.scene-art .scene-atmosphere p{color:#e1e8e8}.scene-art .scene-body{color:#f0f2f0;text-shadow:0 1px 4px #000;line-height:1.8}.scene-art.art-unavailable{padding-top:24px}.story-choice{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#e0c47f,#c9a760);border:1px solid #eed69966;border-radius:14px;box-shadow:0 3px 12px #0002;font-weight:500;line-height:1.4}.choice-mark{font-size:24px;line-height:1;color:#6e5724}.story-choice.story-option-used{box-shadow:none}.adventure{border:1px solid #61775d50;border-radius:14px;padding:10px 12px;margin:12px 0;background:#13201760}.adventure summary{list-style:none}.adventure summary::after{content:'⌄';float:right;font-size:18px;color:#b5c6ad}.adventure[open] summary::after{content:'⌃'}.adventure-hard{border-color:#c2a45866;background:linear-gradient(120deg,#8f713b18,#18231b)}
@media(max-width:360px){.battle-main{font-size:12px}.hero-profile strong{font-size:16px}.roll-comparison{gap:5px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero-health-fill{transition:none}}

.story-choice.story-option-used:disabled{background:#414743;color:#aab3ad;border-color:#59645b;opacity:1}.story-option-used .choice-mark{color:#929d94}.dice-overlay{padding:16px}.dice-panel{max-height:calc(100dvh - 32px);overflow-y:auto}

.tutorial-guide{padding:14px 16px;border:1px solid #e4c572;border-left:4px solid #e4c572;border-radius:12px;background:#e4c57216;margin:14px 0}.tutorial-guide h3{margin:0 0 8px;font-size:19px;color:#ffe8a3}.tutorial-guide p{margin:0;line-height:1.6;font-size:15px}.tutorial-tasks{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:12px 0}.tutorial-tasks span{padding:5px 8px;border-radius:8px;background:#132019;color:#9aa79d;font-size:12px}.tutorial-tasks .current{color:#ffe8a3;border:1px solid #cbb575}.tutorial-feedback{color:#b9deb5;font-size:14px;line-height:1.5}.tutorial-vitals{display:flex;justify-content:space-between;gap:10px;font-size:13px;flex-wrap:wrap}.tutorial-cell:disabled{opacity:1;filter:none;color:#aab5a9}.tutorial-cell.tutorial-target{border:3px solid #ffe19b;box-shadow:0 0 0 2px #e4c57255;background:#716032;color:#fff;font-size:30px}.tutorial-controls{display:block}.tutorial-controls .tutorial-action{width:100%;min-height:52px;background:#e4c572;color:#292413;font-size:16px;font-weight:700}.tutorial-field-hint{color:#ffe3a2;text-align:center;font-size:13px}.tutorial-complete{background:#315d3a55;border:1px solid #95c899;border-radius:14px;padding:18px;line-height:1.6}.tutorial-complete h3{color:#bcebb8;margin-top:0}

.row>div{min-width:0;overflow-wrap:anywhere}.row>strong{min-width:0;overflow-wrap:anywhere}button{max-width:100%;overflow-wrap:anywhere}.trophy-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.trophy-row>div{grid-column:1/-1}.trophy-row button{width:100%;font-size:14px;min-height:46px;padding:10px 8px}.trophy-row strong{font-size:16px}.trophy-row p{margin:4px 0}.shop-actions{display:flex;flex-wrap:wrap;gap:8px}.shop-actions>button{flex:1 1 100px;min-width:0;font-size:14px}.tutorial-tour{position:relative;margin:0 0 18px}.tutorial-tour .tutorial-panel{position:relative;max-height:none;width:100%;padding:16px;overflow:visible;box-shadow:none}.tutorial-tour .tutorial-progress{position:sticky;top:0;z-index:25;background:#202e24;padding:8px;border-bottom:1px solid #d8b87555;border-radius:8px}.tutorial-tour .tutorial-panel h2{font-size:21px}.tutorial-tour .prose{font-size:14px;line-height:1.55}.demo-frames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.demo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}.demo-cell{aspect-ratio:1;background:#2d4530;border-radius:3px;text-align:center;font-size:18px}.button-picture{padding:12px 0}.button-picture button:disabled{opacity:1;background:#e4c572;color:#292413;cursor:default}.story-editor textarea{width:100%;min-width:0;max-width:100%;resize:vertical;border:1px solid #657552;border-radius:10px;background:#142119;color:#f0f0df;padding:10px;font:inherit;margin:6px 0 14px;overflow-wrap:anywhere}.story-editor label{font-size:13px;color:#e7c879}.editor-toolbar{margin:20px 0}.editor-toolbar>button{width:100%}select{max-width:100%;min-width:0}.tutorial-location{padding:10px;border-left:3px solid #749675}

h1,h2,h3,strong,p,summary{overflow-wrap:anywhere}.shop-row{min-width:0}.demo-frames>div{min-width:0}.tutorial-panel{overflow-wrap:anywhere}

.row>button{flex-shrink:0;min-width:90px;word-break:normal;overflow-wrap:normal}.trophy-row>button{min-width:0}.tutorial-tour{scroll-margin-top:8px}

.tutorial-combat{min-width:0;margin:16px 0;padding:12px;background:#15221b;border:1px solid #47614c;border-radius:16px}.tutorial-combat .battle-scroll{margin:10px 0}.tutorial-combat .battle-cell.tutorial-target{border-color:#ffe09a;box-shadow:inset 0 0 10px #e1c16955}.tutorial-combat .hero-summary{margin-top:0}.tutorial-combat .hero-profile strong{font-size:16px}.tutorial-combat .battle-cell:disabled{opacity:1}.tutorial-combat .turn-resources{margin:8px 0}.tutorial-combat .spell-hotbar{padding-bottom:8px}.tutorial-combat .hero-health-track{height:10px}.guard-impact{box-shadow:inset 0 0 20px #9cd5ff!important}.tutorial-calculation{font-size:12px}.tutorial-combat .unit-status{font-size:11px}.button-picture .spell-shortcut:disabled{background:#632e30;color:#ffe7e4}.tutorial-tour .tutorial-progress{top:0}.tutorial-combat .battle-primary button{min-height:46px}.tutorial-tour .tutorial-panel .tutorial-guide{padding:12px}.tutorial-field-hint{line-height:1.5}

.button-example{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:15px;min-height:46px;font-size:13px;border:1px solid #f1d78e;pointer-events:none}.button-picture{opacity:.85}

.tutorial-combat .end-turn{position:static;display:block;margin:14px 0 0 auto;z-index:auto;max-width:100%;white-space:normal}.tutorial-footer{align-items:stretch;clear:both}.tutorial-footer button{min-width:0;width:100%;min-height:48px;word-break:normal}.tutorial-tour .tutorial-progress{position:static}.tutorial-tour .tutorial-panel{padding-bottom:20px}.tutorial-combat{clear:both}nav button:disabled{opacity:.45}

/* The small damage die belongs to the roll, not to the battlefield. */
/* Reserve a complete row so even two d20 dice never meet the damage die. */
.roll-dice-stage{position:relative;min-width:0}.roll-dice-stage.has-damage-die{padding-top:124px}.damage-die{position:absolute;top:0;right:0;width:96px;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;color:#ffd0b7;z-index:2}.damage-die-title{font-size:10px;text-transform:uppercase;letter-spacing:.1em}.damage-die-shape{position:relative;width:88px;height:88px}.damage-die-shape canvas{display:block;width:100%;height:100%}.damage-die-face{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.damage-die-caption{font-size:10px;line-height:1.2;text-align:center;max-width:96px;overflow-wrap:anywhere}.damage-die[data-ready="true"] .damage-die-shape{filter:drop-shadow(0 0 6px #da876530)}

/* Поля поиска лавки и каталога: оформление не задерживает локальную фильтрацию. */
.search-label{margin-bottom:4px;overflow-wrap:anywhere}
.search-field{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;width:100%;min-width:0;min-height:52px;margin:6px 0 12px;padding:0 4px;border:1px solid var(--line);border-radius:12px;background:var(--bg);transition:border-color 140ms ease-out,box-shadow 140ms ease-out}
.search-field:focus-within{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:-2px;box-shadow:0 0 16px #d8b87528;transition-duration:180ms}
.search-icon{grid-column:1;display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--muted);pointer-events:none;transition:color 140ms ease-out}
.search-icon svg{display:block;width:22px;height:22px}
.search-field:focus-within .search-icon{color:var(--gold);transition-duration:180ms}
.search-field input{grid-column:2;width:100%;min-width:0;margin:0;padding:10px 0;background:transparent;border:0;border-radius:4px;box-shadow:none;font-size:1rem;line-height:1.5;appearance:none;-webkit-appearance:none}
.search-field input:focus-visible{outline:none}
.search-field input::-webkit-search-cancel-button,.search-field input::-webkit-search-decoration{display:none;-webkit-appearance:none}
.search-field input::-ms-clear{display:none}
.search-clear{grid-column:3;min-width:44px;min-height:44px;margin:0;padding:0;background:transparent;color:var(--muted);font-size:24px;line-height:1;border-radius:8px}
.search-clear[hidden]{display:none}
.search-clear:hover{color:var(--gold)}
.search-description{margin-top:-4px;overflow-wrap:anywhere}
.search-field::after{content:'';position:absolute;bottom:0;left:8px;width:36px;height:2px;border-radius:2px;background:var(--gold);opacity:0;pointer-events:none}
.search-field:focus-within::after{animation:search-glint 650ms ease-in-out}
@keyframes search-glint{0%{left:8px;opacity:0}20%{opacity:.8}80%{opacity:.8}100%{left:calc(100% - 44px);opacity:0}}
@media(prefers-reduced-motion:reduce){.search-field,.search-icon{transition:none!important}.search-field:focus-within::after{animation:none}}

/* Короткие ходы: очередь и действия остаются в потоке над нижней навигацией. */
.battle-queue{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:8px 0;margin-bottom:8px}.battle-queue>span{flex-shrink:0;padding:6px 10px;border:1px solid var(--line);border-radius:10px;color:var(--muted)}.battle-queue .queue-current{border-color:var(--gold);color:var(--gold)}
#tactical .battle-scroll,.tutorial-combat .battle-scroll{overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:12px}
#tactical .battle-grid,.tutorial-combat .battle-grid{width:max-content;min-width:100%;grid-auto-columns:minmax(44px,1fr)}
#tactical .battle-cell,.tutorial-combat .battle-cell{min-width:44px;min-height:60px;aspect-ratio:auto}
#tactical .battle-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
#tactical .battle-primary{grid-auto-flow:row}
#tactical .battle-actions>button{width:100%;min-width:0;min-height:52px;padding:8px 10px;font-size:13px;line-height:1.25;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
#tactical .battle-actions .battle-retreat{background:#d8b875;color:#292518;border-color:#f1d78e}
#tactical .battle-actions .battle-picked{outline:2px solid #f7e5af;outline-offset:-4px}
#tactical .battle-actions>button:focus-visible{outline:2px solid #f7e5af;outline-offset:2px}
#tactical button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.battle-queue,.movement-resource,.action-resource{font-size:inherit}
@media(prefers-reduced-motion:reduce){#tactical *, .tutorial-combat *{scroll-behavior:auto!important}}

/* Rebuilt combat controls must not become automatic browser scroll anchors. */
#content{overflow-anchor:none}

/* Playback controls overlay the scene instead of pushing the battlefield down. */
#battle-show-result{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:80;width:auto;max-width:calc(100vw - 24px);margin:0;box-shadow:0 2px 12px #0006}
html,body{overflow-anchor:none}
html{scrollbar-gutter:stable}

/* Keep playback controls hidden as requested. */
#battle-show-result{display:none!important}