@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
    font-family: 'DM Sans', sans-serif;
    color: #ece6d7;
    background: #111614;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    --gold: #c6a66b;
    --muted: #8f978e;
    --line: rgba(215, 205, 176, .13);
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; background: #111614; }
button { font: inherit; touch-action: manipulation; }
button:focus-visible { outline: 2px solid #dfc18a; outline-offset: 2px; }

.game-shell { min-height: 100vh; background: radial-gradient(ellipse at 50% 30%, #202923 0, #151b18 48%, #101412 100%); }
.topbar { height: 70px; padding: 0 max(5vw, 28px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(12, 16, 14, .52); }
.brand { color: #e7dfcc; text-decoration: none; font-size: 12px; letter-spacing: .2em; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.brand i { color: var(--gold); font-style: normal; }
.brand-mark { color: var(--gold); font-size: 19px; }
.chapter-label { display: flex; align-items: center; gap: 13px; position: absolute; left: 50%; transform: translateX(-50%); }
.chapter-label span, .save-status, .section-kicker, .map-topline, .round-card span, .round-card small, .eyebrow, .stat-row div > span, .roster-heading > span:last-child, .end-turn span, .battle-log b, .controls-hint { letter-spacing: .12em; font-size: 9px; font-weight: 700; }
.chapter-label span { color: var(--gold); }
.chapter-label b { border-left: 1px solid var(--line); padding-left: 13px; color: #d4d1c5; font-size: 12px; font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.save-status { color: #89918a; font-size: 8px; display: flex; align-items: center; gap: 7px; }
.save-status i, .eyebrow span { display: inline-block; width: 5px; height: 5px; background: #92a57d; border-radius: 100%; box-shadow: 0 0 8px #a2b887; }
.sound-button { border: 0; background: transparent; color: #c1bba9; font-size: 21px; cursor: pointer; }
.game-content { max-width: 1330px; padding: 25px 34px 18px; margin: 0 auto; }
.battle-heading { display: flex; justify-content: space-between; align-items: center; margin: 0 0 19px; }
.eyebrow { color: var(--gold); display: flex; align-items: center; gap: 9px; font-size: 8px; letter-spacing: .2em; }
.eyebrow span { width: 3px; height: 3px; box-shadow: none; }
.battle-heading h1 { margin: 7px 0 4px; font: 600 30px/1.15 'Playfair Display', Georgia, serif; letter-spacing: -.025em; }
.battle-heading p { color: #91968d; font-size: 11px; margin: 0; letter-spacing: .015em; }
.round-card { border: 1px solid rgba(198, 166, 107, .3); width: 88px; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background: linear-gradient(145deg, rgba(182, 145, 83, .1), rgba(182, 145, 83, .015)); }
.round-card::before, .round-card::after { content: ''; position: absolute; width: 5px; height: 5px; border: 1px solid var(--gold); }
.round-card::before { left: -3px; top: -3px; }.round-card::after { right: -3px; bottom: -3px; }
.round-card span { color: #b49b69; font-size: 8px; }
.round-card strong { color: #eee2c8; font: 600 24px/1.1 'Playfair Display', Georgia, serif; }
.round-card small { color: #849083; font-size: 7px; }
.battle-layout { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 17px; align-items: stretch; }
.map-panel, .objective-card, .unit-card, .roster-card { border: 1px solid var(--line); background: rgba(21, 27, 24, .78); }
.map-panel { min-width: 0; display: flex; flex-direction: column; }
.map-topline { min-height: 38px; padding: 0 15px; border-bottom: 1px solid var(--line); color: #8d968c; font-size: 8px; display: flex; align-items: center; justify-content: space-between; letter-spacing: .13em; }
.map-topline > span:first-child { color: #c9c2ac; }
.location-dot { display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--gold); }
.board-wrap { position: relative; display: flex; justify-content: center; align-items: center; padding: 20px 28px 18px; flex: 1; background: radial-gradient(ellipse at 50% 45%, rgba(57, 70, 48, .18), transparent 70%); overflow: hidden; }
.board { --tile: min(6.1vw, 66px); position: relative; display: grid; grid-template-columns: repeat(var(--board-width), var(--tile)); grid-template-rows: repeat(var(--board-height), var(--tile)); border: 4px solid #4b4c3c; outline: 1px solid rgba(210, 191, 141, .37); box-shadow: 0 15px 35px rgba(0, 0, 0, .34), 0 0 0 8px rgba(16, 20, 17, .45); }
.tile { position: relative; overflow: hidden; border: 0; border-right: 1px solid rgba(16, 27, 18, .24); border-bottom: 1px solid rgba(16, 27, 18, .24); background-color: #566345; cursor: pointer; padding: 0; }
.tile::before { content: ''; position: absolute; inset: 0; opacity: .5; background: radial-gradient(ellipse at 30% 25%, rgba(199, 189, 129, .19), transparent 42%), linear-gradient(145deg, transparent 30%, rgba(25, 39, 26, .15)); }
.tile:nth-child(3n)::after { content: ''; position: absolute; width: 2px; height: 2px; left: 20%; bottom: 21%; background: rgba(229, 217, 172, .38); box-shadow: 10px -8px rgba(229, 217, 172, .2), 21px -2px rgba(20, 36, 21, .35); }
.terrain-forest { background-color: #3d5743; background-image: radial-gradient(ellipse at 45% 46%, #45674d 0 22%, transparent 23%), radial-gradient(ellipse at 32% 31%, #294432 0 23%, transparent 24%), radial-gradient(ellipse at 65% 28%, #344f39 0 25%, transparent 26%), linear-gradient(130deg, #49604a, #334a39); }
.terrain-forest .tile-detail { opacity: .14; }
.terrain-ruins { background-color: #45473d; background-image: linear-gradient(0deg, transparent 48%, rgba(197, 180, 132, .13) 49% 52%, transparent 53%), linear-gradient(90deg, transparent 48%, rgba(197, 180, 132, .13) 49% 52%, transparent 53%), repeating-linear-gradient(35deg, #45473d, #45473d 7px, #4e5045 8px, #4e5045 9px); cursor: not-allowed; }
.tile-detail { position: absolute; top: 4px; left: 5px; z-index: 1; color: rgba(208, 216, 166, .63); font-size: 10px; pointer-events: none; }
.tile.reachable { box-shadow: inset 0 0 0 2px var(--movement-border); }
.tile.reachable::before { background: var(--movement-fill); opacity: 1; }
.tile.path-preview::before { background: rgba(235, 190, 101, .42); opacity: 1; }
.tile.path-preview { box-shadow: inset 0 0 0 2px rgba(245, 208, 126, .78); }
.tile.path-destination { box-shadow: inset 0 0 0 3px #f3cf83, 0 0 12px rgba(243, 207, 131, .6); }
.path-route { position: absolute; z-index: 2; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); overflow: visible; pointer-events: none; }
.path-route path { fill: none; stroke: #ffe2a0; stroke-width: .065; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .035px rgba(20, 17, 10, .95)); }
.path-route marker path { fill: #ffe2a0; stroke: #ffe2a0; stroke-width: .02; }
.tile.attack-range::before { background: var(--attack-fill); opacity: 1; }
.tile.heal-range::before { background: var(--healing-fill); opacity: 1; }
.tile.attackable { box-shadow: inset 0 0 0 2px var(--attack-border); }
.tile.healable { box-shadow: inset 0 0 0 2px var(--healing-border); }
.tile.selected { z-index: 2; box-shadow: inset 0 0 0 2px var(--selected-border), 0 0 13px rgba(242, 195, 112, .5); }
.tile.impassable { pointer-events: auto; }
.unit-layer { position: absolute; z-index: 3; inset: 0; overflow: visible; pointer-events: none; }
.phase-announcement { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(8, 11, 9, .48); backdrop-filter: blur(2px); pointer-events: none; animation: combat-overlay-in .2s ease-out both; }
.phase-announcement span { padding: 16px 30px; border: 1px solid rgba(206, 178, 119, .72); outline: 1px solid rgba(206, 178, 119, .2); outline-offset: 4px; background: linear-gradient(115deg, rgba(30, 38, 32, .98), rgba(37, 30, 28, .98)); box-shadow: 0 18px 54px rgba(0, 0, 0, .55); color: #f0dfb5; font: 600 18px 'Playfair Display', Georgia, serif; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.combat-overlay { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; padding: 18px; background: radial-gradient(ellipse at 50% 45%, rgba(51, 44, 31, .57), rgba(9, 13, 11, .87)); backdrop-filter: blur(3px); animation: combat-overlay-in .2s ease-out both; }
.combat-scene { position: relative; width: min(590px, 100%); padding: 16px 24px 20px; overflow: hidden; border: 1px solid rgba(206, 178, 119, .68); outline: 1px solid rgba(206, 178, 119, .17); outline-offset: 4px; background: linear-gradient(115deg, rgba(30, 38, 32, .97), rgba(26, 30, 27, .98) 52%, rgba(37, 30, 28, .97)); box-shadow: 0 18px 54px rgba(0, 0, 0, .65), inset 0 0 35px rgba(198, 166, 107, .06); }
.combat-scene::before, .combat-scene::after { content: ''; position: absolute; top: 0; bottom: 0; width: 27%; pointer-events: none; opacity: .12; background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(222, 198, 145, .2) 12px 13px, transparent 14px 25px); }
.combat-scene::before { left: 0; }.combat-scene::after { right: 0; transform: scaleX(-1); }
.combat-scene-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 13px; color: #d7c18d; font-size: 9px; font-weight: 700; letter-spacing: .28em; }
.combat-scene-heading span { color: #f0dfb5; font-size: 12px; text-shadow: 0 0 12px rgba(232, 189, 111, .55); }
.weapon-triangle-result { position: relative; z-index: 1; margin-top: 7px; text-align: center; font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; animation: combat-overlay-in .25s ease-out both; }
.weapon-triangle-result.advantage { color: #b9d28a; }.weapon-triangle-result.disadvantage { color: #d98b79; }
.combatants { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; min-height: 205px; }
.combatant { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; color: #eee5d2; }
.combatant-sprite { display: grid; place-items: center; width: 112px; height: 126px; filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .55)); }
.combatant-sprite .character-sprite { width: 100px; height: 122px; }
.combatant b { max-width: 100%; overflow: hidden; color: #e9dfc9; font: 600 13px 'Playfair Display', Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.combatant > span:not(.combat-result) { margin-top: 3px; color: #96988a; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.combatant-hp { width: min(150px, 100%); margin-top: 10px; }
.combatant-hp-track { height: 5px; padding: 1px; border: 1px solid rgba(221, 205, 166, .35); background: #252923; }
.combatant-hp-track i { display: block; height: 100%; background: #a9bd7e; animation: combat-hp-change .65s .35s ease-out both; }
.combat-attack .combatant-target .combatant-hp-track i { background: #ce7969; }
.combat-phase-counterattack .combatant-source .combatant-hp-track i { background: #ce7969; }
.combat-phase-counterattack .combatant-target .combatant-hp-track i { background: #a9bd7e; }
.combatant-hp small { display: block; margin-top: 4px; color: #a4a394; text-align: center; font-size: 8px; }
.combat-effect { display: grid; place-items: center; color: #d6bb7b; font-size: 27px; text-shadow: 0 0 18px rgba(226, 191, 119, .65); }
.clash-sigil { animation: combat-clash .48s .25s ease-in-out both; }
.heal-sigil { color: #9cdbbe; text-shadow: 0 0 20px rgba(124, 222, 183, .75); animation: combat-heal-sigil .8s ease-in-out infinite alternate; }
.combat-result { position: absolute; top: 21px; right: 5px; color: #f1c0a5; font: 700 22px 'Playfair Display', Georgia, serif; text-shadow: 0 2px 6px #241813, 0 0 13px rgba(222, 107, 85, .7); animation: combat-result-float .85s .3s ease-out both; }
.combat-heal .combat-result { color: #a9e5cb; text-shadow: 0 2px 6px #17241d, 0 0 13px rgba(98, 205, 164, .7); }
.combat-phase-attack .combatant-source .combatant-sprite { animation: combat-lunge .65s .12s ease-in-out both; }
.combat-phase-attack .combatant-source .sprite-weapon { transform-box: fill-box; transform-origin: 20% 60%; animation: combat-weapon-swing .65s .12s ease-in-out both; filter: drop-shadow(0 0 4px rgba(245, 220, 157, .9)); }
.combat-phase-attack .combatant-target .combatant-sprite { animation: combat-hit .42s .42s ease-in-out both; }
.combat-phase-attack .clash-sigil { animation: combat-clash .48s .25s ease-in-out both; }
.combat-phase-counterattack .combatant-target .combatant-sprite { animation: combat-lunge-reverse .65s .12s ease-in-out both; }
.combat-phase-counterattack .combatant-counterattacking .sprite-weapon { transform-box: fill-box; transform-origin: 20% 60%; animation: combat-counter-weapon-swing .65s .12s ease-in-out both; filter: drop-shadow(0 0 4px rgba(245, 220, 157, .9)); }
.combat-phase-counterattack .combatant-source .combatant-sprite { animation: combat-hit-reverse .42s .42s ease-in-out both; }
.combat-phase-counterattack .clash-sigil { animation: combat-clash-reverse .48s .25s ease-in-out both; }
.combat-heal .combatant-source .combatant-sprite { animation: combat-cast .65s ease-in-out both; }
.combat-heal .combatant-target .combatant-sprite { animation: combat-heal-target .9s .2s ease-in-out both; }
@keyframes combat-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes combat-hp-change { from { width: var(--hp-before); } to { width: var(--hp-after); } }
@keyframes combat-lunge { 0%, 100% { transform: translateX(0) scale(1); } 48% { transform: translateX(24px) scale(1.1); } }
@keyframes combat-lunge-reverse { 0%, 100% { transform: translateX(0) scale(1); } 48% { transform: translateX(-24px) scale(1.1); } }
@keyframes combat-weapon-swing { 0%, 100% { transform: rotate(0) translate(0, 0); } 35% { transform: rotate(15deg) translate(1px, -1px); } 68% { transform: rotate(-58deg) translate(2px, 1px); } }
@keyframes combat-counter-weapon-swing { 0%, 100% { transform: rotate(0) translate(0, 0); } 35% { transform: rotate(-15deg) translate(-1px, -1px); } 68% { transform: rotate(58deg) translate(-2px, 1px); } }
@keyframes combat-hit { 0%, 100% { transform: translateX(0); filter: brightness(1); } 25%, 65% { transform: translateX(7px); filter: brightness(1.8) sepia(.5); } 45%, 80% { transform: translateX(-5px); } }
@keyframes combat-hit-reverse { 0%, 100% { transform: translateX(0); filter: brightness(1); } 25%, 65% { transform: translateX(-7px); filter: brightness(1.8) sepia(.5); } 45%, 80% { transform: translateX(5px); } }
@keyframes combat-cast { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-8px) scale(1.08); } }
@keyframes combat-heal-target { 0%, 100% { filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .55)); } 45% { filter: drop-shadow(0 0 17px rgba(114, 226, 183, .9)) brightness(1.35); } }
@keyframes combat-clash { 0% { opacity: 0; transform: scale(.2) rotate(-35deg); } 55% { opacity: 1; transform: scale(1.5) rotate(12deg); } 100% { opacity: .8; transform: scale(1) rotate(0); } }
@keyframes combat-clash-reverse { 0% { opacity: 0; transform: scale(.2) rotate(35deg); } 55% { opacity: 1; transform: scale(1.5) rotate(-12deg); } 100% { opacity: .8; transform: scale(1) rotate(0); } }
@keyframes combat-heal-sigil { from { transform: scale(.8); opacity: .7; } to { transform: scale(1.2); opacity: 1; } }
@keyframes combat-result-float { 0% { opacity: 0; transform: translateY(12px) scale(.7); } 40% { opacity: 1; transform: translateY(-5px) scale(1.15); } 100% { opacity: 1; transform: translateY(-14px) scale(1); } }
.unit-token { position: absolute; width: 48px; height: 55px; transform: translate(-50%, -52%); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55)); transition: left var(--move-step-duration) linear, top var(--move-step-duration) linear; will-change: left, top; }
.unit-token.acted { filter: grayscale(1) brightness(.7) drop-shadow(0 4px 3px rgba(0, 0, 0, .55)); }
.unit-icon { position: absolute; z-index: 2; top: 2px; right: 0; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; font: 10px/1 sans-serif; color: #f2ead8; background: #24291f; border: 1px solid rgba(236, 215, 164, .75); }
.unit-weapon-icon { position: absolute; z-index: 2; top: 19px; right: 0; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: #f2ead8; background: #24291f; border: 1px solid rgba(236, 215, 164, .75); }
.weapon-symbol { display: block; width: 1em; height: 1em; color: currentColor; }
.unit-weapon-icon .weapon-symbol { width: 10px; height: 10px; }
.inventory-item-icon .weapon-symbol { width: 19px; height: 19px; }
.action-icon .weapon-symbol { width: 18px; height: 18px; }
.character-sprite { width: 100%; height: 100%; overflow: visible; animation: sprite-idle 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.unit-token.just-moved .character-sprite { animation: sprite-idle 2.4s ease-in-out infinite, sprite-arrive .38s ease-out; }
.sprite-body { transform-origin: 24px 45px; animation: sprite-breathe 3.2s ease-in-out infinite; }
.sprite-cape { transform-box: fill-box; transform-origin: 50% 10%; animation: sprite-cloak 2.7s ease-in-out infinite; }
.sprite-weapon { transform-origin: 37px 31px; animation: sprite-weapon 3.6s ease-in-out infinite; }
.unit-token.enemy .character-sprite { animation-delay: -.8s; }
.unit-token.enemy .sprite-cape { animation-delay: -.5s; }
@keyframes sprite-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes sprite-arrive { 0% { opacity: .6; scale: .88; } 70% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes sprite-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
@keyframes sprite-cloak { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2deg); } }
@keyframes sprite-weapon { 0%, 86%, 100% { transform: rotate(0); } 91%, 96% { transform: rotate(-4deg); } }
.unit-hp { position: absolute; z-index: 3; bottom: 0; left: 12px; right: 12px; height: 4px; overflow: hidden; border: 1px solid rgba(15, 18, 15, .9); background: #34362c; }
.unit-hp i { display: block; height: 100%; background: #a9c273; }
.unit-token.enemy .unit-hp i { background: #d37b69; }
.map-compass { position: absolute; right: 14px; bottom: 13px; color: #a69d83; font: 8px 'DM Sans', sans-serif; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.map-compass span { font-size: 15px; color: var(--gold); line-height: 1; }
.map-legend { min-height: 42px; display: flex; align-items: center; gap: 17px; flex-wrap: wrap; padding: 7px 15px; border-top: 1px solid var(--line); color: #a5a99d; font-size: 9px; }
.map-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend b { color: #e7e1d2; font-size: 10px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.ally-dot { background: #bdab72; }.enemy-dot { background: #bd7061; }
.terrain-key { margin-left: 3px; }.terrain-key small { color: #747d73; font-size: 8px; }
.legend-tile { width: 11px; height: 11px; border: 1px solid #82916c; }
.range-key { color: #b0b1a0; }.move-key { background: var(--movement-fill); border-color: var(--movement-border); }.attack-key { background: var(--attack-fill); border-color: var(--attack-border); }.heal-key { background: var(--healing-fill); border-color: var(--healing-border); }
.forest-key { background: #405b43; }.ruin-key { background: #494a3f; border-color: #777669; }
.battle-sidebar { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.objective-card, .unit-card, .roster-card { padding: 13px 14px; }
.section-kicker { display: flex; justify-content: space-between; align-items: center; color: #a99262; font-size: 8px; letter-spacing: .17em; }
.section-kicker > span { color: #728071; }
.objective-card h2 { margin: 10px 0 5px; font: 600 15px 'Playfair Display', Georgia, serif; color: #e4ddcc; }
.objective-card h2 span { color: var(--gold); font-size: 12px; margin-right: 5px; }
.objective-card p { margin: 0; color: #8d948a; font-size: 9px; line-height: 1.5; }
.objective-progress { margin-top: 13px; }
.objective-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 6px; color: #828a80; font-size: 8px; letter-spacing: .1em; }
.objective-progress b { color: #c6bdab; font-weight: 500; }
.progress-track, .hp-track, .roster-health { overflow: hidden; background: #30372e; }
.progress-track { height: 3px; }.progress-track i { display: block; height: 100%; background: #ba7961; transition: width .3s; }
.unit-card { padding-bottom: 12px; }
.unit-profile { display: flex; align-items: center; gap: 10px; margin: 12px 0 11px; }
.portrait { width: 43px; height: 45px; flex: 0 0 43px; display: grid; place-items: center; position: relative; border: 1px solid rgba(217, 196, 149, .45); background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--unit-color), #fff 22%), var(--unit-color) 50%, #31342b); }
.portrait span { position: absolute; top: 2px; left: 4px; font-size: 11px; color: #f2e7cd; }.portrait b { font: 600 23px 'Playfair Display', Georgia, serif; color: #f4eddb; text-shadow: 0 1px 3px #24231d; }
.profile-name { min-width: 0; }.profile-name h2 { font: 600 17px 'Playfair Display', Georgia, serif; margin: 0 0 3px; }.profile-name span { font-size: 8px; color: #92988d; letter-spacing: .05em; }
.profile-badge { margin-left: auto; padding: 4px 5px; border: 1px solid rgba(172, 157, 112, .34); color: #baa979; font-size: 7px; letter-spacing: .09em; }
.hp-info { display: flex; justify-content: space-between; color: #c9c4b5; font-size: 9px; margin-bottom: 6px; }.hp-info b { color: #e8dfca; font-size: 11px; margin-left: 3px; }.hp-info i { color: #80877d; font-style: normal; }.hp-info > span:last-child { color: #8b9387; font-size: 8px; }
.hp-track { height: 5px; }.hp-track i { display: block; height: 100%; background: #a9bd7e; transition: width .25s; }.hp-track i.low-hp { background: #c97868; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); padding: 11px 0 9px; margin-top: 5px; border-bottom: 1px solid var(--line); }
.stat-row div { display: flex; flex-direction: column; gap: 5px; }.stat-row div > span { color: #7e877d; font-size: 7px; }.stat-row b { color: #ded7c7; font-size: 10px; font-weight: 500; }
.inventory-panel { margin-top: 10px; }
.inventory-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: #a99262; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.inventory-heading small { color: #81897e; font-size: 8px; font-weight: 500; letter-spacing: .04em; }
.inventory-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.inventory-slot { position: relative; min-width: 0; min-height: 73px; display: flex; flex-direction: column; align-items: flex-start; padding: 6px 6px 5px; border: 1px solid rgba(215, 205, 176, .13); background: rgba(10, 15, 12, .28); }
.inventory-slot.inventory-equipped { border-color: rgba(198, 166, 107, .6); background: rgba(198, 166, 107, .08); }
.inventory-item-icon { color: #c6a66b; font-size: 13px; line-height: 1; }
.inventory-slot > b { width: 100%; margin-top: 5px; overflow: hidden; color: #d9d2c1; font-size: 8px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.inventory-slot > small { margin-top: 2px; color: #858c81; font-size: 6px; line-height: 1.2; letter-spacing: .04em; }
.inventory-slot.inventory-empty { align-items: center; justify-content: center; color: #777e73; }
.inventory-empty > span { font-size: 14px; }.inventory-empty > small { font-size: 7px; }
.inventory-item-action { margin-top: auto; padding: 3px 4px 0 0; border: 0; color: #d0b778; background: transparent; font: 600 7px 'DM Sans', sans-serif; cursor: pointer; }
.inventory-item-action:hover:not(:disabled) { color: #f0d89e; }.inventory-item-action:disabled { color: #697165; cursor: not-allowed; }
.unit-status { display: flex; gap: 12px; padding-top: 9px; }.unit-status span { display: flex; align-items: center; gap: 5px; color: #737c71; font-size: 7px; letter-spacing: .06em; }.unit-status i { width: 5px; height: 5px; border: 1px solid #687064; border-radius: 50%; }.unit-status .status-ready { color: #acb89b; }.unit-status .status-ready i { background: #9ab17d; border-color: #9ab17d; box-shadow: 0 0 6px rgba(154, 177, 125, .5); }
.action-menu { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.action-menu-heading { display: flex; justify-content: space-between; margin-bottom: 8px; color: #b9a16d; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.action-menu-heading span { color: #707a70; font-size: 7px; font-weight: 500; letter-spacing: .1em; }
.action-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.action-button { min-width: 0; min-height: 57px; display: grid; grid-template-columns: 17px 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 4px; padding: 7px 6px; border: 1px solid rgba(215, 205, 176, .16); text-align: left; color: #d9d2c1; background: rgba(10, 15, 12, .34); cursor: pointer; transition: border-color .16s, background .16s, opacity .16s; }
.action-button:hover:not(:disabled), .action-button.action-active { border-color: rgba(198, 166, 107, .65); background: rgba(198, 166, 107, .12); }
.action-button.action-active { box-shadow: inset 0 -2px #c6a66b; }
.action-icon { grid-row: 1 / 3; color: #c5a96d; font-size: 16px; text-align: center; }
.action-button b { align-self: end; font-size: 9px; font-weight: 600; }
.action-button small { align-self: start; margin-top: 2px; color: #81897e; font-size: 7px; white-space: nowrap; }
.action-button:disabled { opacity: .38; cursor: not-allowed; }
.action-wait .action-icon { color: #9a9b89; }
.action-undo { width: 100%; min-height: 34px; grid-template-columns: 22px 1fr; grid-template-rows: 1fr; margin-top: 6px; border-color: rgba(198, 166, 107, .28); }
.action-undo .action-icon { grid-row: auto; }
.roster-card { padding-bottom: 8px; }.roster-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }.roster-heading > span:last-child { color: #70796f; font-size: 7px; }
.roster-list { display: flex; flex-direction: column; }
.roster-unit { position: relative; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 5px 4px; border: 0; border-top: 1px solid rgba(215, 205, 176, .07); text-align: left; background: transparent; color: inherit; cursor: pointer; }
.roster-unit:hover, .roster-selected { background: rgba(188, 164, 108, .075); }.roster-selected::before { content: ''; position: absolute; top: 7px; bottom: 7px; left: -14px; width: 2px; background: var(--gold); }
.roster-avatar { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; color: #f0e6cf; background: var(--unit-color); border: 1px solid rgba(239, 220, 174, .34); font-size: 13px; }
.roster-name { display: flex; flex-direction: column; gap: 2px; flex: 1; }.roster-name b { color: #dcd5c4; font-size: 9px; font-weight: 600; }.roster-name small { color: #80877d; font-size: 8px; }
.roster-hp { color: #c5c6af; font-size: 9px; white-space: nowrap; }.roster-hp i { color: #788075; font-size: 8px; font-style: normal; }
.roster-health { position: absolute; bottom: 3px; left: 40px; right: 4px; height: 2px; }.roster-health i { display: block; height: 100%; background: #99ad78; }.fallen { opacity: .4; }
.turn-controls { margin-top: auto; }.combat-message { min-height: 36px; display: flex; align-items: flex-start; gap: 8px; padding: 2px 3px 8px; }.combat-message > span { color: var(--gold); font-size: 12px; }.combat-message p { color: #a8aa9b; font-size: 9px; line-height: 1.45; margin: 0; }
.end-turn { width: 100%; min-height: 37px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #a88c58; color: #eee5d2; background: linear-gradient(100deg, #5c5035, #403b2b); cursor: pointer; transition: .2s; }
.end-turn:hover:not(:disabled) { background: linear-gradient(100deg, #71603b, #51462d); box-shadow: 0 0 16px rgba(198, 166, 107, .14); }.end-turn span { font-size: 8px; letter-spacing: .16em; }.end-turn b { color: #dfc789; font-size: 17px; font-weight: 400; }.end-turn:disabled { opacity: .55; cursor: wait; }
.bottom-bar { display: flex; justify-content: space-between; align-items: center; min-height: 49px; margin-top: 12px; border-top: 1px solid var(--line); }
.battle-log { display: flex; align-items: center; gap: 10px; min-width: 0; }.log-icon { color: var(--gold); font-size: 17px; }.battle-log > span:last-child { display: flex; flex-direction: column; gap: 3px; }.battle-log b { color: #a28b5d; font-size: 7px; }.battle-log i { color: #95988d; font-style: normal; font-size: 9px; }
.controls-hint { display: flex; align-items: center; gap: 15px; color: #737b71; font-size: 8px; letter-spacing: .02em; font-weight: 400; }.controls-hint kbd { color: #c4b68e; font: 7px 'DM Sans', sans-serif; border: 1px solid #57594b; padding: 3px 5px; margin-right: 4px; }.controls-hint button { border: 0; color: #a5a18f; background: transparent; font-size: 8px; letter-spacing: .1em; cursor: pointer; }.controls-hint button:hover { color: #e3ca93; }
.result-overlay { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(8, 11, 9, .78); backdrop-filter: blur(5px); }.result-card { width: min(390px, calc(100% - 36px)); padding: 33px 35px 30px; text-align: center; border: 1px solid rgba(198, 166, 107, .4); background: #1b211d; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }.result-sigil { display: block; color: var(--gold); font-size: 30px; margin-bottom: 12px; }.result-card .section-kicker { justify-content: center; }.result-card h2 { color: #ede4d0; font: 600 25px 'Playfair Display', Georgia, serif; margin: 10px 0; }.result-card p { color: #989b8e; font-size: 11px; line-height: 1.6; margin: 0 0 20px; }

@media (min-width: 1250px) {
    .game-content { padding-top: 31px; }
    .board { --tile: 68px; }
    .battle-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 900px) {
    .game-content { padding: 22px 20px; }.battle-layout { grid-template-columns: minmax(0, 1fr) 285px; gap: 12px; }
    .board { --tile: min(6.2vw, 58px); }.board-wrap { padding: 16px; }
    .controls-hint > span:nth-child(2) { display: none; }.map-legend { gap: 10px; }
}

@media (max-width: 1100px) {
    .battle-layout { grid-template-columns: minmax(0, 1fr); }
    .board { --tile: min(calc((100vw - 120px) / 10), 60px); }
    .battle-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .objective-card, .unit-card, .roster-card, .turn-controls { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .topbar { height: 56px; padding: 0 max(12px, env(safe-area-inset-left)); }.brand { font-size: 10px; letter-spacing: .14em; gap: 7px; }.brand-mark { font-size: 16px; }
    .chapter-label { display: none; }.save-status { font-size: 7px; }.topbar-right { gap: 10px; }
    .game-content { padding: 16px 12px max(18px, env(safe-area-inset-bottom)); }.battle-heading { align-items: center; gap: 8px; margin-bottom: 12px; }.battle-heading h1 { font-size: 24px; }.battle-heading p { max-width: 255px; font-size: 10px; line-height: 1.4; }.round-card { width: 66px; height: 62px; flex: 0 0 66px; }
    .battle-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }.board-wrap { padding: 13px 8px; }
    .board { --tile: min(calc((100vw - 78px) / 10), 53px); }.unit-token { width: 40px; height: 47px; }.unit-icon { width: 13px; height: 13px; font-size: 9px; }.unit-weapon-icon { top: 17px; width: 13px; height: 13px; }.unit-weapon-icon .weapon-symbol { width: 9px; height: 9px; }.unit-hp { left: 11px; right: 11px; }
    .map-topline { min-height: 34px; padding: 0 10px; font-size: 7px; letter-spacing: .08em; }.map-legend { min-height: 37px; gap: 8px; padding: 7px 9px; font-size: 8px; }.map-legend > span { gap: 4px; }.terrain-key { margin-left: 0; }.terrain-key small { display: none; }
    .battle-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }.objective-card, .unit-card, .roster-card { padding: 11px; }
    .roster-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }.roster-unit { min-width: 0; min-height: 60px; gap: 5px; padding: 6px 5px 9px; }.roster-selected::before { left: -11px; }.roster-avatar { width: 23px; height: 23px; flex-basis: 23px; font-size: 11px; }.roster-name { min-width: 0; }.roster-name b { font-size: 8px; }.roster-name small { display: none; }.roster-hp { display: block; font-size: 8px; }.roster-hp i { font-size: 7px; }.roster-health { left: 5px; right: 5px; bottom: 4px; }
    .inventory-slot { min-height: 76px; padding: 7px; }.inventory-slot > b { font-size: 9px; }.inventory-slot > small { font-size: 7px; }.inventory-item-action { min-height: 32px; padding: 5px 5px 0 0; font-size: 8px; }
    .action-buttons { gap: 7px; }.action-button { min-height: 62px; grid-template-columns: 20px minmax(0, 1fr); column-gap: 5px; padding: 8px 7px; }.action-icon { display: grid; place-items: center; font-size: 18px; }.action-button b { font-size: 10px; }.action-button small { font-size: 7px; }
    .turn-controls { grid-column: 1 / -1; }.end-turn { min-height: 46px; padding: 0 14px; }.end-turn span { font-size: 9px; }.bottom-bar { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 10px; }.controls-hint { width: 100%; justify-content: flex-end; }.controls-hint > span { display: none; }.controls-hint button { min-height: 36px; padding: 6px 0; font-size: 9px; }.battle-log i { font-size: 8px; line-height: 1.4; }
    .combat-overlay { padding: 10px; }.combat-scene { padding: 13px 9px 15px; }.combatants { grid-template-columns: 1fr 30px 1fr; min-height: 180px; }.combatant-sprite { width: 89px; height: 108px; }.combatant-sprite .character-sprite { width: 84px; height: 103px; }.combatant b { font-size: 11px; }.combat-result { right: 0; font-size: 19px; }.combat-effect { font-size: 22px; }
}

@media (max-width: 380px) {
    .game-content { padding-right: 9px; padding-left: 9px; }.board { --tile: min(calc((100vw - 78px) / 10), 48px); }.unit-token { width: 36px; height: 43px; }.unit-icon { right: 0; width: 11px; height: 11px; font-size: 8px; }.unit-weapon-icon { top: 15px; right: 0; width: 11px; height: 11px; }.unit-weapon-icon .weapon-symbol { width: 8px; height: 8px; }.unit-hp { left: 10px; right: 10px; height: 3px; }
    .map-legend { gap: 6px; }.map-legend > span { gap: 3px; }.battle-heading h1 { font-size: 21px; }.battle-heading p { max-width: 220px; font-size: 9px; }.round-card { width: 58px; height: 58px; flex-basis: 58px; }.round-card strong { font-size: 21px; }.roster-list { gap: 3px; }.roster-unit { padding-right: 3px; padding-left: 3px; }.roster-avatar { width: 21px; height: 21px; flex-basis: 21px; }.roster-hp { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .unit-token { transition: none; }
    .character-sprite, .sprite-body, .sprite-cape, .sprite-weapon { animation: none; }
    .combat-overlay, .combatant-sprite, .clash-sigil, .heal-sigil, .combat-result { animation: none; }
    .combat-phase-attack .combatant-source .sprite-weapon, .combat-phase-counterattack .combatant-counterattacking .sprite-weapon { animation: none; filter: none; }
    .combatant-hp-track i { transition: none; }
}

.game-shell { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.topbar { position: fixed; z-index: 6; inset: 0 0 auto; height: 58px; padding: 0 20px; border-bottom-color: rgba(215, 205, 176, .08); background: linear-gradient(180deg, rgba(10, 14, 12, .86), rgba(10, 14, 12, .44)); }
.game-content { width: 100%; max-width: none; height: 100%; padding: 0; margin: 0; }
.battle-heading { display: none; }
.battle-layout { display: block; height: 100%; }
.map-panel { position: fixed; z-index: 0; inset: 0; border: 0; background: #18211a; }
.map-topline { position: fixed; z-index: 4; top: 68px; left: 16px; width: min(300px, calc(100vw - 380px)); min-height: 34px; border: 1px solid var(--line); background: rgba(13, 18, 15, .76); backdrop-filter: blur(8px); }
.board-wrap { position: absolute; inset: 0; display: block; padding: 0; background: radial-gradient(ellipse at 50% 45%, rgba(57, 70, 48, .3), transparent 75%); }
.map-drag-viewport { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: grab; }
.map-drag-viewport.is-dragging { cursor: grabbing; }
.board { --tile: min(9vw, 7vh, 66px); }
.map-drag-viewport.is-dragging .tile { cursor: grabbing; }
.map-compass { z-index: 4; right: 365px; bottom: 73px; }
.map-legend { position: fixed; z-index: 4; left: 14px; bottom: 64px; max-width: calc(100vw - 390px); border: 1px solid var(--line); background: rgba(13, 18, 15, .78); backdrop-filter: blur(8px); }
.battle-sidebar { position: fixed; z-index: 6; top: 68px; right: 14px; bottom: 62px; width: min(330px, calc(100vw - 28px)); gap: 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 3px 4px; scrollbar-color: rgba(198, 166, 107, .38) transparent; scrollbar-width: thin; }
.objective-card, .unit-card, .roster-card { background: rgba(17, 23, 19, .9); backdrop-filter: blur(12px); }
.bottom-bar { position: fixed; z-index: 5; right: 360px; bottom: 8px; left: 14px; min-height: 43px; margin: 0; padding: 5px 10px; border: 1px solid var(--line); background: rgba(13, 18, 15, .82); backdrop-filter: blur(8px); }

@media (max-width: 700px) {
    .topbar { height: 50px; padding: 0 max(12px, env(safe-area-inset-left)); }
    .game-content { padding: 0; }
    .map-topline { top: 58px; left: 8px; width: min(240px, calc(100vw - 16px)); }
    .map-drag-viewport { padding-top: 90px; padding-bottom: calc(44dvh + 20px); }
    .board { --tile: min(9vw, 7vh, 52px); }
    .map-compass { right: 10px; bottom: calc(46dvh + 36px); }
    .map-legend { right: 8px; bottom: calc(46dvh + 8px); left: 8px; max-width: none; min-height: 32px; gap: 7px; padding: 5px 7px; font-size: 7px; }
    .map-legend .terrain-key { display: none; }
    .battle-sidebar { top: auto; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; display: flex; width: auto; max-height: 44dvh; gap: 6px; padding: 0 2px 2px; }
    .objective-card { order: 2; padding: 9px 10px; }
    .unit-card { order: 0; display: flex; flex-direction: column; }
    .roster-card { order: 3; }
    .turn-controls { order: 4; }
    .unit-profile { order: -5; }
    .hp-info { order: -4; }
    .hp-track { order: -3; }
    .stat-row { order: -2; }
    .unit-status { order: -1; }
    .action-menu { order: 0; }
    .inventory-panel { order: 1; }
    .objective-card h2 { margin: 5px 0 3px; font-size: 13px; }
    .objective-card p { font-size: 8px; }
    .objective-progress { margin-top: 7px; }
    .unit-card, .roster-card { padding: 9px 10px; }
    .unit-profile { margin: 7px 0; }
    .stat-row { padding: 7px 0 6px; }
    .inventory-panel { margin-top: 7px; }
    .inventory-slot { min-height: 64px; }
    .action-menu { margin-top: 8px; padding-top: 7px; }
    .action-button { min-height: 48px; }
    .roster-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .roster-unit { min-height: 48px; }
    .turn-controls { margin-top: 0; }
    .combat-message { min-height: 28px; padding-bottom: 4px; }
    .end-turn { min-height: 38px; }
    .bottom-bar { display: contents; }
    .battle-log { display: none; }
    .controls-hint { position: fixed; z-index: 7; top: 57px; right: 8px; width: auto; padding: 3px 7px; border: 1px solid var(--line); background: rgba(13, 18, 15, .82); }
    .controls-hint button { min-height: 28px; padding: 4px; font-size: 8px; }
}

.mission-menu-toggle { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(198, 166, 107, .38); color: #e4dcc8; background: rgba(15, 20, 17, .72); cursor: pointer; }
.mission-menu-toggle > span { color: var(--gold); font-size: 15px; }
.mission-menu-toggle b { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.mission-menu-toggle small { padding-left: 7px; border-left: 1px solid var(--line); color: #bca877; font-size: 8px; }
.mission-menu-toggle:hover, .mission-menu-toggle[aria-expanded="true"] { border-color: var(--gold); background: rgba(198, 166, 107, .12); }
.battle-sidebar { width: min(300px, calc(100vw - 28px)); align-items: stretch; }
.battle-sidebar > .unit-card { display: flex; flex-direction: column; gap: 0; padding: 9px 10px; background: rgba(17, 23, 19, .84); }
.unit-card > .section-kicker { display: none; }
.unit-profile { order: 0; gap: 8px; margin: 0 0 6px; }
.portrait { width: 35px; height: 36px; flex-basis: 35px; }
.portrait b { font-size: 19px; }
.profile-name h2 { font-size: 15px; }
.hp-info { order: 1; margin: 0 0 4px; font-size: 8px; }
.hp-info b { font-size: 9px; }
.hp-track { order: 2; height: 4px; }
.stat-row { order: 3; padding: 6px 0; margin-top: 0; }
.stat-row div { gap: 2px; }
.stat-row div > span { font-size: 6px; }
.stat-row b { font-size: 9px; }
.unit-status { order: 4; gap: 10px; padding-top: 5px; }
.unit-status span { font-size: 6px; }
.action-menu { order: 5; margin-top: 6px; padding-top: 6px; }
.action-menu-heading { margin-bottom: 5px; font-size: 7px; }
.action-buttons { gap: 4px; }
.action-button { min-height: 43px; grid-template-columns: 15px minmax(0, 1fr); column-gap: 3px; padding: 5px 4px; }
.action-icon { font-size: 14px; }
.action-button b { font-size: 8px; }
.action-button small { font-size: 6px; }
.action-undo { min-height: 29px; }
.inventory-panel { order: 6; margin-top: 6px; }
.inventory-heading { margin-bottom: 4px; font-size: 7px; }
.inventory-slots { gap: 4px; }
.inventory-slot { min-height: 52px; padding: 4px; }
.inventory-item-icon { font-size: 11px; }
.inventory-slot > b { margin-top: 3px; font-size: 7px; }
.inventory-slot > small { font-size: 6px; }
.inventory-item-action { font-size: 6px; }
.turn-controls { order: 7; }
.combat-message { min-height: 27px; padding: 5px 2px; }
.combat-message p { font-size: 8px; }
.end-turn { min-height: 31px; }
.map-legend { display: none; }
.battle-log { display: none; }
.bottom-bar { background: transparent; border: 0; padding: 0; }
.controls-hint { display: none; }

.mission-menu-backdrop { position: fixed; z-index: 9; inset: 0; display: flex; align-items: stretch; background: rgba(5, 8, 6, .62); backdrop-filter: blur(3px); animation: combat-overlay-in .16s ease-out both; }
.mission-menu { display: flex; flex-direction: column; gap: 15px; width: min(390px, calc(100vw - 28px)); height: 100%; overflow-x: hidden; overflow-y: auto; padding: max(22px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom)); border-right: 1px solid rgba(198, 166, 107, .35); background: rgba(18, 24, 20, .97); box-shadow: 14px 0 50px rgba(0, 0, 0, .38); scrollbar-color: rgba(198, 166, 107, .38) transparent; scrollbar-width: thin; }
.mission-menu-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mission-menu-header .section-kicker { color: var(--gold); }
.mission-menu-header h2 { margin: 6px 0 0; color: #eee5d2; font: 600 20px 'Playfair Display', Georgia, serif; }
.mission-menu-close { width: 32px; height: 32px; border: 1px solid var(--line); color: #d6c9aa; background: rgba(10, 15, 12, .5); font-size: 22px; cursor: pointer; }
.mission-objective { display: flex; gap: 11px; padding: 12px; border: 1px solid rgba(198, 166, 107, .23); background: rgba(198, 166, 107, .06); }
.mission-sigil { color: var(--gold); font-size: 15px; }
.mission-objective b { color: #e5ddcb; font: 600 14px 'Playfair Display', Georgia, serif; }
.mission-objective p, .mission-log p { margin: 5px 0 0; color: #969b8f; font-size: 9px; line-height: 1.55; }
.mission-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.mission-status > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 9px 8px; border: 1px solid var(--line); background: rgba(10, 15, 12, .34); }
.mission-status span { color: #879084; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.mission-status b { overflow: hidden; color: #ddd4c0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.mission-menu .objective-progress { margin: -5px 0 0; }
.mission-menu .objective-progress > div:first-child { font-size: 8px; }
.mission-roster { padding-top: 12px; border-top: 1px solid var(--line); }
.mission-roster .roster-heading { margin-bottom: 6px; }
.mission-roster .roster-list { display: flex; }
.mission-roster .roster-unit { min-height: 42px; }
.mission-roster .roster-selected::before { left: -9px; }
.mission-log { padding-top: 12px; border-top: 1px solid var(--line); }
.mission-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--line); color: #a5a99d; font-size: 8px; }
.mission-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.mission-legend .legend-dot { width: 6px; height: 6px; }
.mission-legend .legend-tile { width: 9px; height: 9px; }
.mission-legend small { color: #7e877d; }
.mission-restart { min-height: 36px; margin-top: auto; padding: 0 10px; border: 1px solid rgba(198, 166, 107, .36); color: #c9b986; background: rgba(198, 166, 107, .07); font-size: 8px; letter-spacing: .12em; cursor: pointer; }
.mission-restart:hover:not(:disabled) { background: rgba(198, 166, 107, .16); }
.mission-restart:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 700px) {
    .topbar-right { gap: 7px; }
    .save-status { display: none; }
    .mission-menu-toggle { gap: 5px; padding: 6px 8px; }
    .mission-menu-toggle b { font-size: 7px; }
    .mission-menu { align-self: flex-end; width: 100%; height: min(82dvh, 700px); padding: 16px 14px max(14px, env(safe-area-inset-bottom)); border: 1px solid rgba(198, 166, 107, .3); border-bottom: 0; border-radius: 12px 12px 0 0; }
    .mission-menu-header h2 { font-size: 17px; }
    .mission-menu-backdrop { align-items: flex-end; }
    .mission-menu { gap: 11px; }
    .mission-menu .roster-list { display: flex; }
    .mission-menu .roster-unit { min-height: 38px; }
    .battle-sidebar { width: auto; max-height: calc(100dvh - 100px); overflow-y: hidden; }
    .unit-card { gap: 0; }
    .unit-profile { margin-bottom: 4px; }
    .portrait { width: 30px; height: 31px; flex-basis: 30px; }
    .portrait b { font-size: 16px; }
    .profile-name h2 { font-size: 13px; }
    .profile-name span { font-size: 7px; }
    .profile-badge { padding: 3px 4px; font-size: 6px; }
    .stat-row { padding: 4px 0; }
    .inventory-slot { display: grid; grid-template-columns: 14px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 24px; align-items: center; min-height: 0; height: 52px; padding: 3px; }
    .inventory-item-icon { grid-row: 1 / 3; font-size: 10px; }
    .inventory-slot > b { min-width: 0; margin: 0; font-size: 6px; }
    .inventory-slot > small { display: none; }
    .inventory-item-action { height: 24px; min-height: 24px; margin: 0; padding: 0; font-size: 6px; line-height: 1; }
    .action-menu-heading { display: none; }
    .action-menu { margin-top: 4px; padding-top: 0; border-top: 0; }
    .action-buttons { gap: 3px; }
    .action-button { min-height: 31px; grid-template-columns: 13px minmax(0, 1fr); padding: 3px; }
    .action-icon { font-size: 12px; }
    .action-button b { font-size: 7px; }
    .action-button small { display: none; }
    .inventory-panel { margin-top: 4px; }
    .inventory-heading { margin-bottom: 2px; font-size: 6px; }
    .unit-profile { margin-bottom: 2px; }
    .unit-status { padding-top: 3px; }
    .stat-row { padding: 3px 0; }
    .turn-controls { margin-top: 0; }
    .combat-message { min-height: 17px; padding: 2px; }
    .combat-message > span { display: none; }
    .combat-message p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .end-turn { min-height: 27px; }
}