:root {
  --ink: #24160f;
  --jade: #215c4c;
  --red: #a52f2a;
  --gold: #f5c84c;
  color-scheme: dark;
  font-family: Inter, "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; margin: 0; min-height: 100%; overflow-x: hidden; background: #101a27; }
body { color: var(--wp-ui-text); }
html.battle-active, body.battle-active { height: 100%; overflow: hidden; overscroll-behavior: none; }
button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #8ff4db; outline-offset: 2px; }
.is-hidden { display: none !important; }

.app { width: 100%; max-width: 100%; min-height: 100dvh; }
.scene { width: 100%; max-width: 920px; min-width: 0; margin: 0 auto; }
.main-scene { min-height: 0; }
/* Main composition, typography and navigation belong to the shared frame. */
.main-card { min-width: 0; }
.main-copy { align-self: center; }
.eyebrow { color: #ffb5aa; font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.primary, .secondary { min-height: 44px; border: 0; border-radius: 14px; font-weight: 900; }
.primary { height: 52px; }
.secondary { color: #fff; background: #33445e; }

.battle-scene { position: fixed; inset: 0 auto 56px 50%; transform: translateX(-50%); height: calc(100dvh - 56px); max-width: 920px; overflow: hidden; background: #132236; }
#battleContent { overflow: hidden; }
#battleContent > .auto-chip { position: absolute; z-index: 22; top: 4px; inset-inline-end: 8px; }
.player-chip, .stage-chip { min-width: 0; display: grid; text-align: center; }
.player-chip span, .stage-chip span { overflow: hidden; color: var(--wp-ui-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.player-chip strong, .stage-chip strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.auto-chip { display: flex; align-items: center; justify-content: center; gap: 5px; height: 44px; padding: 0 8px; border: 1px solid var(--wp-ui-line); border-radius: 14px; color: #fff; background: #34465f; font-size: 12px; font-weight: 800; }
.auto-chip i { width: 9px; height: 9px; border-radius: 50%; background: #8290a4; }
.auto-chip.is-on i { background: #63e6be; box-shadow: 0 0 9px #63e6be; }

.battle-layout { position: absolute; inset: 0 0 124px; display: grid; grid-template-columns: 80px minmax(0,1fr); grid-template-rows: minmax(0,1fr); min-height: 0; }
.quick-rail { z-index: 12; display: grid; align-content: center; gap: 6px; padding: 8px; background: linear-gradient(90deg,rgba(15,29,49,.95),rgba(15,29,49,.45)); }
.quick-rail button { position: relative; min-height: 48px; padding: 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: #fff; background: rgba(29,50,71,.88); font-size: 12px; font-weight: 800; }
.dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 2px #fff; }
.dot.is-hidden { display: none; }
.arena-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.wave-hud { position: absolute; z-index: 8; top: 8px; left: 50%; display: flex; gap: 12px; transform: translateX(-50%); padding: 6px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; background: rgba(29,32,34,.72); font-size: 11px; font-weight: 800; white-space: nowrap; }
.boss-bar { position: absolute; z-index: 9; top: 42px; left: 50%; width: min(80%,460px); transform: translateX(-50%); text-align: center; }
.boss-bar span { display: block; margin-bottom: 2px; color: #ffe29a; font-size: 12px; font-weight: 900; }
.boss-bar i { display: block; height: 9px; overflow: hidden; border: 1px solid #f7d073; border-radius: 9px; background: rgba(0,0,0,.5); }
.boss-bar b { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#a32626,#f55e49); transition: width .18s linear; }
.arena { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(rgba(12,25,30,.12),rgba(12,25,30,.06)),url("assets/battlefield-block-v1.png") center/cover; }
.ambient-petals { display: none; }
.unit-line { position: absolute; left: 4%; right: 4%; z-index: 4; display: flex; justify-content: center; align-items: flex-end; gap: 8px; height: calc((100% - 164px) / 2); }
/* Reserve 76px for wave/Boss HUD, 60px for actions and 28px between armies.
   Unit height follows the actual arena, never the full browser viewport. */
.enemy-line { top: 76px; }
.hero-line { bottom: 60px; }
.unit { position: relative; flex: 0 1 118px; min-width: 0; width: 118px; height: 100%; max-height: 200px; filter: drop-shadow(0 8px 6px rgba(0,0,0,.42)); transition: filter .18s; }
.unit.is-attacking { filter: drop-shadow(0 0 12px #fff6bc); }
.unit > .sprite { transition: translate .18s; }
.unit.is-attacking > .sprite { translate: 0 -6px; }
.enemy-line .unit.is-attacking > .sprite { translate: 0 6px; }
.unit.is-hit { animation: hit .18s linear; }
@keyframes hit { 50% { transform: translateX(7px); filter: brightness(1.7) saturate(.5); } }
.sprite { position: absolute; top: 15px; left: 0; width: 100%; height: calc(100% - 37px); overflow: hidden; pointer-events: none; }
/* Bottom-aligned artwork, health and name form one stack. A narrow sprite
   may not fill a tall viewport-based unit; never leave health at its top. */
.unit > .sprite { top: 0; height: calc(100% - 39px); }
.unit > .hp { top: auto; bottom: 26px; }
.enemy-line .sprite { transform: scaleX(-1); }
.enemy-line .sprite[data-native-facing="left"] { transform: none; }
.unit-name { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); max-width: 100%; padding: 2px 6px; border-radius: 8px; background: rgba(10,15,22,.78); font-size: 10px; font-weight: 900; white-space: nowrap; }
.hp { position: absolute; z-index: 5; top: 4px; left: 8%; width: 84%; height: 8px; overflow: hidden; border: 1px solid #fff; border-radius: 4px; background: #241c21; box-shadow: 0 1px 3px 2px #101822; }
.hp b { display: block; width: 100%; height: 100%; background: #55cf7a; transition: width .2s linear; }
.enemy-line .hp b { background: #ee604f; }
.skill-ready { position: absolute; right: 5px; bottom: 24px; width: 12px; height: 12px; border-radius: 50%; background: #59d7ff; box-shadow: 0 0 10px #5ee5ff; }
.status-badge { position: absolute; z-index: 3; left: 50%; top: 13px; transform: translateX(-50%); padding: 2px 5px; border-radius: 7px; color: #152437; background: #8ff4db; font-size: 8px; font-weight: 1000; white-space: nowrap; }
.status-badge.is-debuff { color: #fff; background: #9b5fe0; }
.combat-feed { position: absolute; z-index: 3; inset: 20% 0 25%; pointer-events: none; }
.damage { position: absolute; left: var(--x); top: var(--y); color: #fff2a8; font-size: 18px; font-weight: 1000; text-shadow: 0 2px 2px #7c1d1d; animation: damage 850ms ease-out forwards; }
.damage.crit { color: #ff7a63; font-size: 25px; }
.damage.skill { color: #8df0ff; }
@keyframes damage { to { transform: translateY(-55px) scale(1.15); opacity: 0; } }
.battle-tip { position: absolute; z-index: 14; left: 50%; bottom: 8px; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); }
.battle-tip span { padding: 7px 12px; border-radius: 99px; background: rgba(13,28,36,.82); font-size: 11px; font-weight: 800; white-space: nowrap; }
.battle-tip button { min-width: 44px; height: 44px; border: 0; border-radius: 50%; color: #17243a; background: #f5c84c; font-weight: 900; }
.campaign-goal { display: none; }
.mission-goal { padding: 12px; border-inline-start: 4px solid var(--gold); background: var(--wp-ui-background); line-height: 1.6; }
.battle-tip .loot-pile { position: static; flex: 0 0 80px; min-width: 80px; width: 80px; height: 44px; padding: 4px 6px; border: 2px solid #fff0a8; border-radius: 12px; color: #3a2a0a; background: #f5c84c; font-size: 11px; line-height: 1.2; font-weight: 900; }
.battle-tip { display: grid; grid-template-columns: 80px minmax(0,1fr) 44px; width: calc(100% - 16px); max-width: 340px; justify-content: center; }
.battle-tip .loot-pile.is-hidden { display: block !important; visibility: hidden; pointer-events: none; }
.battle-tip > span { min-width: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.battle-tip > button { flex-shrink: 0; }

.resource-bar { position: absolute; z-index: 20; left: 0; right: 0; bottom: 70px; height: 54px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; gap: 1px; padding: 5px 8px; background: rgba(15,29,49,.97); border-top: 1px solid var(--wp-ui-line); }
.resource-bar > span { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr); grid-template-rows: auto auto; gap: 0 4px; color: var(--wp-ui-muted); font-size: 9px; text-align: start; }
.resource-bar .item-art { grid-row: 1 / 3; width: 32px; height: 32px; }
.resource-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-bar strong { overflow: hidden; color: #ffe490; font-size: 13px; text-overflow: ellipsis; }
.bottom-nav { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: 70px; display: grid; grid-template-columns: repeat(5,1fr); background: #101d2e; border-top: 1px solid var(--wp-ui-line); }
.bottom-nav button { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; min-width: 0; border: 0; color: #aebbd0; background: transparent; }
.bottom-nav button > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fee4a1; background: #364963; font-size: 14px; font-weight: 1000; }
.bottom-nav button > b { font-size: 11px; }
.bottom-nav button.is-active { color: #fff; background: linear-gradient(0deg,rgba(245,200,76,.18),transparent); }
.bottom-nav button.is-active > span { color: #253044; background: #f5c84c; }
.bottom-nav button.is-locked { opacity: .48; }
.bottom-nav button.is-locked > span::after { content: "🔒"; position: absolute; inset-inline-end: -4px; bottom: -2px; font-size: 10px; }
.bottom-nav button > .nav-art { position: relative; border-radius: var(--wp-ui-radius-sm, 4px); background: transparent; }
.bottom-nav button.is-active > .nav-art { background: var(--wp-ui-surface, #19343e); outline: 1px solid var(--wp-ui-line); }
.bottom-nav .nav-art > img { display: block; width: 28px; height: 28px; object-fit: contain; }
.bottom-nav .nav-art > .equipment-art { flex: none; width: 28px; height: 28px; }
.bottom-nav .dot { top: 8px; right: calc(50% - 24px); }
.ad-reserve { position: fixed; z-index: 2; left: max(0px,calc((100vw - 920px)/2)); bottom: 0; width: min(100vw,920px); height: 56px; background: #0a121d; }
.app[data-scene="main"] > .ad-reserve { display: none; }

.management { position: absolute; z-index: 40; inset: 0; display: grid; grid-template-rows: 58px minmax(0,1fr); background: var(--wp-ui-surface); color: var(--wp-ui-text); }
.management > header { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; padding: 5px 12px; border-bottom: 1px solid var(--wp-ui-line); }
.management h2 { margin: 0; text-align: center; }
.management header span { color: var(--wp-ui-muted); font-size: 12px; font-weight: 800; }
.management-body { min-height: 0; overflow-y: auto; padding: 12px 12px 80px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 8px; }
.section-title h3 { margin: 0; font-size: 15px; }
.section-title span { color: var(--wp-ui-muted); font-size: 11px; }
.hero-grid, .card-grid, .campaign-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 8px; }
.hero-card, .panel-card, .campaign-card { overflow: hidden; border: 1px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); background: var(--wp-ui-background); }
.hero-card { display: grid; grid-template-columns: 96px minmax(0,1fr); min-height: 150px; }
.hero-portrait { position: relative; min-height: 150px; overflow: hidden; background: var(--wp-ui-surface); }
.hero-portrait .sprite { top: 6px; left: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.hero-card-copy { display: grid; min-width: 0; align-content: center; gap: 4px; padding: 8px; }
.quality { color: var(--wp-ui-gold); font-size: 10px; font-weight: 800; }
.hero-card h3, .panel-card h3, .campaign-card h3 { margin: 0; font-size: 15px; }
.hero-card p, .panel-card p, .campaign-card p { margin: 0; color: var(--wp-ui-muted); font-size: 11px; line-height: 1.4; }
.mini-stats { display: flex; flex-wrap: wrap; gap: 4px; color: var(--wp-ui-muted); font-size: 10px; }
.card-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; min-width: 0; margin-top: 4px; }
.card-actions button, .panel-card button, .campaign-card button, .modal button:not(.modal-close) { min-width: 0; min-height: 38px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; color: #1f2937; background: #f5c84c; font-size: 11px; font-weight: 900; line-height: 1.15; white-space: normal; }
.card-actions button.alt { color: #fff; background: #435978; }
.card-actions button:disabled, .panel-card button:disabled, .campaign-card button:disabled { opacity: .45; cursor: not-allowed; }
.panel-card, .campaign-card { display: grid; gap: 8px; padding: 12px; }
.codex-content { display: grid; gap: 12px; }
.codex-content > h3, .codex-content > p { margin: 0; }
.codex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.codex-card { min-width: 0; align-content: start; }
.codex-card h3, .codex-card p, .codex-card small { overflow-wrap: anywhere; }
.codex-art { height: 112px; display: grid; place-items: center; }
.codex-art > .sprite { position: static; display: block; width: 100%; height: 112px; transform: none; }
.codex-art > .equipment-art { width: 80px; height: 80px; flex: none; }
.codex-locked { color: var(--wp-ui-muted); font-size: 32px; }
.formation { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
.formation-slot { min-height: 88px; display: grid; place-items: center; padding: 8px; border: 1px dashed #79cdb6; border-radius: 14px; background: rgba(33,92,76,.32); text-align: center; font-size: 11px; }
.formation-slot strong { display: block; margin-top: 4px; }
.equipment-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,360px); gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--wp-ui-line); }
.equipment-row > .card-actions { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 0; }
.equipment-row small { display: block; color: var(--wp-ui-muted); }
.equipment-description { display: flex; gap: 10px; align-items: center; min-width: 0; }
.equipment-description > div { min-width: 0; overflow-wrap: anywhere; }
.equipment-art { flex: 0 0 64px; width: 64px; height: 64px; background: url("assets/equipment-block-v1.png") 0 0/200% 200%; border-radius: var(--wp-ui-radius); }
.equipment-art[data-equipment-art="jade-armor"] { background-position: 100% 0; }
.equipment-art[data-equipment-art="swift-boots"] { background-position: 0 100%; }
.equipment-art[data-equipment-art="war-seal"] { background-position: 100% 100%; }
.summon-stage { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 12px; margin-bottom: 12px; padding: 12px; border: 2px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); color: var(--wp-ui-text); background: var(--wp-ui-background); text-align: center; }
.summon-stage h3 { margin: 0; font-size: 26px; }
.summon-stage p { max-width: 500px; margin: 0; color: var(--wp-ui-muted); }
.summon-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.summon-buttons button { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.tavern-hero-card { grid-template-columns: 88px minmax(0,1fr); align-items: center; min-height: 156px; }
.tavern-portrait { position: relative; width: 88px; height: 132px; background: var(--wp-ui-surface); border: 1px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); }
.tavern-portrait .sprite { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.tavern-hero-copy { display: grid; min-width: 0; gap: 6px; overflow-wrap: anywhere; }
.law-tree { display: grid; gap: 10px; max-width: 620px; margin: 0 auto; }
.law-node { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 2px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); background: var(--wp-ui-background); }
.law-node .seal { display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); color: var(--wp-ui-text); background: var(--wp-ui-button-image); font-weight: 1000; }
.law-node h3, .law-node p { margin: 0; }
.law-node p { color: var(--wp-ui-muted); font-size: 11px; }
.law-node button { min-width: 44px; max-width: 140px; white-space: normal; overflow-wrap: anywhere; }

.modal-layer { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(4,9,16,.76); }
#battleScene > .modal-layer { position: absolute; }
#battleScene > .modal-layer .modal { max-height: 100%; }
.modal { position: relative; width: min(100%,520px); min-width: 0; max-height: min(calc(100dvh - 32px),650px); overflow-y: auto; overscroll-behavior: contain; padding: 22px; border: 2px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); color: var(--wp-ui-text); background: var(--wp-ui-surface); box-shadow: 0 5px 0 var(--wp-ui-shadow); }
.modal h2 { min-height: 44px; margin: 0 0 16px; padding-inline-end: 48px; overflow-wrap: anywhere; }
.modal-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; border: 2px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); color: var(--wp-ui-text); background: var(--wp-ui-button-image); box-shadow: 0 3px 0 var(--wp-ui-shadow); font-size: 24px; }
.leave-confirm { position: absolute; z-index: 90; inset: 0; display: grid; align-content: start; justify-items: center; overflow-y: auto; padding: 16px; background: var(--wp-ui-surface); color: var(--wp-ui-text); overscroll-behavior: contain; }
.leave-card { width: min(100%,520px); margin-block: auto; padding: 16px; border: 2px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); background: var(--wp-ui-panel, var(--wp-ui-surface)); }
.leave-card h2 { margin: 0 0 12px; font-size: 22px; }
.leave-card p { margin: 0 0 16px; line-height: 1.5; }
.leave-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.leave-actions button { min-width: 0; overflow-wrap: anywhere; }
.list { display: grid; gap: 8px; }
.list-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); color: var(--wp-ui-text); background: var(--wp-ui-background); }
.list-item p { margin: 0; font-size: 12px; }
.list-item small { color: var(--wp-ui-muted); }
.list-item button { min-width: 74px; }
.progress { height: 7px; margin-top: 6px; overflow: hidden; border-radius: 8px; background: #0b1723; }
.progress b { display: block; height: 100%; background: #63e6be; }
.settings-list { display: grid; gap: 10px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; min-height: 48px; gap: 12px; padding: 8px; border-bottom: 1px solid var(--wp-ui-line); }
.setting-row select { min-height: 44px; min-width: 0; max-width: 160px; border: 1px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); color: var(--wp-ui-text); background: var(--wp-ui-background); }
.toggle { width: 56px; height: 32px; border: 0; border-radius: 99px; background: #52647d; }
.toggle.is-on { background: #45c7a3; }

.result-panel, .coach { position: absolute; z-index: 60; inset: 64px 0 0; display: grid; place-content: center; gap: 12px; padding: 24px; background: radial-gradient(circle at 50% 30%,rgba(120,62,45,.96),rgba(12,24,37,.98) 68%); text-align: center; overflow-y: auto; }
.result-panel { inset: 0; align-content: start; justify-content: stretch; grid-template-rows: repeat(5,max-content) minmax(max-content,1fr); overscroll-behavior: contain; background: var(--wp-ui-surface); color: var(--wp-ui-text); }
.result-panel h2, .coach h2 { margin: 0; font-size: clamp(34px,8vw,58px); color: #ffe394; }
.result-panel p, .coach p { max-width: 520px; margin: 0 auto; color: #e5e9ef; line-height: 1.6; }
.result-panel :is(h2,p) { color: var(--wp-ui-text); }
.campaign-milestone { width: min(100%, 520px); margin: 2px auto 0; padding: 10px 14px; border: 1px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); color: var(--wp-ui-text); background: var(--wp-ui-background); font-size: 13px; font-weight: 800; line-height: 1.5; }
.reward-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.reward-row > span { padding: 8px 12px; border: 1px solid var(--wp-ui-gold); border-radius: var(--wp-ui-radius); color: var(--wp-ui-text); background: var(--wp-ui-background); font-weight: 900; }
.result-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; align-self: end; gap: 8px; width: min(100%,520px); margin: 6px auto 0; }
.result-actions button { min-width: 0; overflow-wrap: anywhere; }
.coach { z-index: 80; pointer-events: none; color: var(--wp-ui-text); background: var(--wp-ui-surface); }
.coach span { color: var(--wp-ui-muted); font-weight: 900; }
.coach h2 { font-size: clamp(26px,6vw,42px); }
.coach button { width: min(100%,320px); margin: 8px auto 0; pointer-events: auto; }

.toast { position: absolute; z-index: 100; left: 50%; bottom: 138px; max-width: calc(100% - 32px); transform: translateX(-50%); padding: 10px 16px; border-radius: 99px; color: #222; background: #fff0a8; font-size: 12px; font-weight: 900; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: toast 2.2s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%,10px); } 12%,78% { opacity: 1; transform: translate(-50%,0); } 100% { opacity: 0; } }

@media (max-width:699px) and (orientation:portrait) {
  .battle-layout { grid-template-columns: 0 minmax(0,1fr); }
  .quick-rail { position: absolute; z-index: 18; top: 52px; inset-inline-start: 4px; width: 56px; padding: 4px; background: transparent; }
  .quick-rail button { min-height: 44px; padding: 3px; border-color: rgba(255,255,255,.3); background: rgba(24,43,60,.82); font-size: 10px; }
  .arena-wrap { grid-column: 1/-1; }
  .unit-line { left: 64px; right: 8px; }
  .battle-tip { left: 64px; width: calc(100% - 72px); transform: none; gap: 4px; }
  .wave-hud { top: 6px; }
  /* The portrait quick rail sits above the arena on narrow screens.  Shift
     this informational strip clear of that rail so its first characters are
     never hidden behind a button. */
  .campaign-goal { left: calc(50% + 24px); width: calc(100% - 80px); padding-inline: 8px; font-size: 10px; }
  .hero-grid, .card-grid, .campaign-grid { grid-template-columns: 1fr; }
  .equipment-row { grid-template-columns: minmax(0,1fr); gap: 10px; padding-block: 12px; }
}

@media (max-height:520px) and (orientation:landscape) {
  .battle-layout { inset: 0 0 96px; grid-template-columns: 124px minmax(0,1fr); }
  .resource-bar { bottom: 54px; height: 42px; }
  .bottom-nav { height: 54px; }
  /* Intrinsic rail height must not enlarge the arena below the resource row.
     Keep usable label tracks and bounded scrolling at unusually short heights. */
  .quick-rail { min-height: 0; overflow-y: auto; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 2px; padding: 2px; }
  .quick-rail button { min-width: 0; min-height: 44px; padding: 3px; font-size: 10px; }
  .unit-line { top: 38px; bottom: 4px; height: auto; flex-wrap: nowrap; gap: 4px; transform: none; }
  .hero-line { left: 2%; right: 66%; justify-content: center; }
  .enemy-line { left: 66%; right: 2%; justify-content: center; }
  /* Keep the Boss HUD in the center gap, never across either sprite lane. */
  .boss-bar { top: 38px; width: 14%; }
  .unit { flex-basis: 60px; width: 60px; height: 100%; max-height: 104px; }
  .unit-name { max-width: 120%; padding-inline: 3px; font-size: 8px; }
  .battle-tip { top: auto; bottom: 4px; width: 30%; gap: 4px; }
  .battle-tip span { max-width: 68px; padding: 5px 6px; font-size: 9px; line-height: 1.15; white-space: normal; text-align: center; }
  .battle-tip button { min-width: 44px; width: 44px; height: 44px; }
  .campaign-goal { display: none; }
  .hero-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
  .equipment-row { grid-template-columns: minmax(0,1fr) minmax(0,300px); }
  .result-panel { inset: 0; gap: 4px; padding: 8px 24px; }
  .result-panel h2 { font-size: clamp(30px, 8vh, 42px); line-height: 1.05; }
  .result-panel p { line-height: 1.3; }
  .result-panel .reward-row span { padding: 6px 10px; }
  .result-panel .campaign-milestone { padding: 6px 10px; font-size: 12px; line-height: 1.3; }
  .result-panel .result-actions { gap: 6px; margin-top: 2px; }
  .result-panel .result-actions button { min-height: 44px; }
}

@media (min-width:921px) {
  .battle-scene { box-shadow: 0 0 70px rgba(0,0,0,.55); }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Hero workspace: choose a person, inspect their slots, then change gear. */
.item-art { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; flex: 0 0 auto; }
.resource-chip { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font-size: 12px; }
.resource-chip > span { min-width: 0; }
.wallet { display: flex; flex-wrap: wrap; gap: 8px 12px; padding-block: 8px; }
.hero-roster { display: flex; gap: 8px; overflow-x: auto; padding: 4px 3px 12px; }
.roster-choice { flex: 0 0 116px; display: grid; gap: 4px; padding: 8px; color: var(--wp-ui-text); border: 2px solid var(--wp-ui-line); background: var(--wp-ui-background); border-radius: var(--wp-ui-radius); }
.roster-choice strong { font-size: 13px; }
.roster-choice small { font-size: 10px; color: var(--wp-ui-muted); }
.roster-portrait { position: relative; display: block; width: 80px; height: 76px; margin-inline: auto; }
.roster-portrait .sprite { inset: 0; width: 100%; height: 100%; }
.roster-choice[aria-pressed="true"], .loadout-slot[aria-pressed="true"] { border-color: var(--wp-ui-gold); background: var(--wp-ui-active); box-shadow: inset 0 0 0 1px var(--wp-ui-gold); }
.hero-workspace-columns { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.hero-workspace-columns > section { min-width: 0; }
.hero-detail { min-height: 160px; }
.hero-growth-actions { margin-top: 8px; }
.hero-growth-actions button, .hero-backpack .card-actions button { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; white-space: normal; overflow-wrap: anywhere; }
.hero-growth-actions .resource-chip, .hero-backpack .card-actions .resource-chip { font-size: 10px; }
.loadout-slots { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.loadout-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 8px 4px; border: 2px solid var(--wp-ui-line); border-radius: var(--wp-ui-radius); color: var(--wp-ui-text); background: var(--wp-ui-background); }
.loadout-slot .equipment-art { width: 48px; height: 48px; flex-basis: 48px; }
.loadout-slot strong { font-size: 12px; }
.loadout-slot small { font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.loadout-help { margin: 0; color: var(--wp-ui-muted); font-size: 12px; line-height: 1.6; }
.hero-backpack { padding: 12px; border: 1px solid var(--wp-ui-line); background: var(--wp-ui-background); }
.hero-backpack .section-title { margin-top: 0; flex-wrap: wrap; }
.hero-backpack .equipment-row { grid-template-columns: minmax(0,1fr); }
.hero-backpack .card-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
.hero-backpack .card-actions button:first-child { grid-column: 1 / -1; }
.holder-label { display: inline-block; margin-top: 4px; padding: 4px 8px; color: #fff0ad; background: #34402e; font-size: 11px; }
.empty-equipment { display: grid; justify-items: center; gap: 8px; padding: 24px 8px; text-align: center; }
.empty-equipment p { margin: 0; color: var(--wp-ui-muted); font-size: 12px; line-height: 1.5; }
@media (min-width:700px) {
  .hero-workspace-columns { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}