/* Tactical skin; game data owns rarity colors. */
:root{color-scheme:dark;--paper:#171B20;--panel:#22272E;--ink:#F1F1ED;--muted:#B8BFC7;--line:#49515B;--yellow:#D63843;--field:#171B20;--danger:#FF939B;--accent:#D63843}
body{background:var(--paper)}
button,input,select,textarea{font:inherit}
button{background:#303740;color:var(--ink);border:1px solid var(--line);border-radius:4px;box-shadow:none;transition:background-color .12s,border-color .12s}
button:hover:not(:disabled){background:#3C4652;border-color:#8995A3;filter:none}
button:active:not(:disabled){background:#47515D}
button:disabled{background:#272D35!important;color:#9AA4AE!important;border-color:#414953!important;opacity:1;cursor:not-allowed;box-shadow:none}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid #F1F1ED;outline-offset:3px}
button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.app .combat-header{background:var(--paper)}
.game-brand .brand-mark{color:var(--accent)}
.brand-mark path:last-child{fill:var(--ink)}
.game-brand strong span,.game-brand small{color:var(--muted)}
.combat-metrics .hud-item,.combat-metrics .hud-wallet{background:var(--panel);border:1px solid var(--line);border-radius:4px}
.hud-wallet>div+div{border-color:var(--line)}
.hud-wallet span,.hud-item>span,.hud-item small{color:var(--muted)}
.hud-wallet strong,.hud-item strong{color:var(--ink)}
.header-actions #pause-top{background:#303740;color:var(--ink);border:1px solid var(--line);border-radius:4px}
.header-actions #pause-top[aria-pressed=true]{background:#4B252E;border-color:var(--accent);color:var(--ink)}
#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column{border:1px solid var(--line);border-radius:5px;background:var(--panel);box-shadow:none}
#operation-mount[data-tier="3"] .character-panel{background:var(--panel)}
#operation-mount .mission-card{position:relative}
#operation-mount .mission-card:after{content:"";position:absolute;right:1px;top:4px;width:10px;height:1px;background:#8995A3;transform:rotate(45deg)}
.mission-heading{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.mission-heading h2{letter-spacing:.04em}
.mission-wave strong,.mission-clock strong{color:var(--ink)}
#operation-panel #wave-phase,.mission-clock{color:var(--muted)}
progress,progress::-webkit-progress-bar{background:#171B20}
progress::-webkit-progress-value{background:var(--accent)}
progress::-moz-progress-bar{background:var(--accent)}
.battle-stage,.arena-slot{background:var(--field)}
.arena-wrap{box-shadow:none}
.command-dock{background:var(--panel);border-top:1px solid var(--line)}
.command-dock #roster-empty,.command-dock .roster-heading #field-input-help{color:var(--muted)}
.command-dock #squad-open{border-color:transparent}
.command-dock .command-button{border-radius:4px;background:#303740;color:var(--ink);border:1px solid var(--line)}
.command-dock #summon,.command-dock #summon-batch{background:var(--accent);border-color:#E56871;color:#FFF}
.command-dock #summon:hover:not(:disabled),.command-dock #summon-batch:hover:not(:disabled){background:#B72E38;border-color:#FF9BA3}
.command-dock #start:hover:not(:disabled),.header-actions #pause-top:hover:not(:disabled){background:#3C4652;border-color:#8995A3}
.character-panel .unit-info,.character-panel .unit-meta,.character-panel .unit-description,.unit-description{color:var(--ink)}
.character-panel .unit-info>p,.character-panel #unit-role{color:var(--muted)}
.squad-overview{background:#1B2026;border:1px solid var(--line);border-radius:4px;color:var(--ink)}
.squad-overview>p:first-child,.squad-overview>small{color:var(--muted)}
.squad-overview>strong{color:var(--ink)}
#overview-tiers>span{background:#303740;border-radius:3px}
#overview-tiers b,.squad-overview .overview-resources{color:var(--ink)}
.character-panel .buff-status,.buff-status,.next-step{background:#303740;color:#D4DDD3;border:1px solid var(--line);border-radius:4px}
.recipe,.recipe.available{background:#2A3038;border:1px solid var(--line);border-radius:4px;box-shadow:none}
.recipe.available{border-color:#8B6970}
.recipe .recipe-main,.recipe .recipe-main:disabled{background:transparent!important;color:var(--ink)!important;border:0;opacity:1}
.recipe .recipe-main:hover:not(:disabled){background:#333B45!important}
.recipe .recipe-name,.recipe .recipe-arrow{color:var(--ink)}
.recipe .recipe-portrait,.recipe .ingredient{background:#1B2026;border-radius:3px}
.recipe .ingredient-plus,.recipe .recipe-availability,.recipe.available .recipe-availability,.catalog-note{color:var(--muted)}
.recipe.related:after{background:var(--accent)}
.recipe.confirming,.recipe[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--accent);border-color:var(--accent)}
.recipe-confirmation{background:#2F252D;border-color:var(--accent);border-radius:4px;color:var(--ink)}
.recipe-confirmation .recipe-consumed{color:var(--muted)}
.recipe-confirm-actions button{background:#303740;color:var(--ink)}
.recipe-confirm-actions button:first-child{background:var(--accent);color:#FFF}
#catalog-search,dialog select,dialog textarea{background:#171B20;color:var(--ink);border:1px solid var(--line);border-radius:4px}
#catalog-search::placeholder,textarea::placeholder{color:#B8BFC7;opacity:1}
#catalog-mount{scrollbar-color:#697481 #22272E}
#catalog-panel>.side-heading{position:sticky;top:-1px;z-index:2;background:var(--panel);padding-block:8px;margin-top:-8px}
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:0 16px 48px #0006}
dialog::backdrop{background:#090D12BF;backdrop-filter:none}
dialog h3,.result-dialog h2{color:var(--ink)}
.result-dialog[data-outcome=defeat] h2,#confirm-error{color:#FF939B}
.close-button,.menu-dialog li button,#history-export,.menu-actions button,.feedback-button,.squad-actions button,.unit-tools button{background:#303740;color:var(--ink);border-color:var(--line)}
.dialog-actions button:last-child,.fusion-button,.squad-done{background:var(--accent);color:#FFF}
.squad-help,.effect-catalog-help,.legend-option-status,.recipe-confirmation .recipe-consumed{color:var(--muted)!important}
.effect-catalog-grid article,.confirm-notice{background:#2A3038;border-color:var(--line);color:var(--ink);border-radius:4px}
.effect-values span{background:#303740;color:var(--ink)}
.legend-catalog-open,.profile-frame.options-open #unit-details-open,.legend-roll-actions #legend-reroll,.legend-roll-actions #legend-values{background:#303740;color:var(--ink);border-color:var(--line);box-shadow:none;border-radius:4px}
.legend-roll-actions button small{color:var(--muted)}
.legend-option-line.is-locked button{background:#4B252E;border-color:var(--accent)}
.unit-select-card.selected,.unit-select-card[aria-pressed=true],.roster-panel .unit-select-card.selected{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--accent)}
.unit-select-card{border-radius:4px}
@media(min-width:768px) and (min-height:500px){
 .workspace,.workspace:has(.profile-frame.is-legend){grid-template-columns:232px minmax(260px,1fr) 208px;gap:8px}
 .app{padding:0 12px 12px}
 .squad-column{display:block}
 .character-panel>.catalog-button{display:none}
 .operation-panel,.fusion-panel{padding:14px 10px}
 #operation-mount .character-panel{padding-inline:6px}
 .character-panel .portrait.profile-frame.is-legend{min-width:0;width:100%;max-width:100%}
 .fusion-panel>.side-heading{gap:6px}
 .fusion-panel>.side-heading h2{font-size:14px}
}
@media(min-width:1100px) and (min-height:500px){
 .workspace,.workspace:has(.profile-frame.is-legend){grid-template-columns:clamp(236px,20vw,280px) minmax(420px,1fr) clamp(240px,24vw,360px);gap:12px}
 .app{padding:0 20px 16px}
 .operation-panel,.fusion-panel{padding:18px 14px}
 .fusion-panel>.side-heading h2{font-size:16px}
}
@media(max-width:767px){
 #operation-mount .character-panel{border-radius:4px}
 .command-dock{padding-bottom:max(6px,env(safe-area-inset-bottom))}
 .command-dock .roster-heading #field-input-help{font-size:10px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Keep confirmation flush with its card border. */
.recipe-confirmation{inset:-1px}
.character-panel .unit-info .tier{color:#E4C563}
.character-panel .portrait.profile-frame{background:#303740;border-radius:4px}

.unit-select-card.is-selected{background:#4B252E;border-color:#D63843;box-shadow:inset 0 0 0 1px #D63843}

/* Full-stage battlefield with HUD over the skyline, never reserving an empty band. */
.board-column .battle-stage{padding:0;overflow:hidden}
.battle-stage .arena-slot{width:100%;height:100%;flex:1;min-height:0;container-type:normal}
.battle-stage .arena-wrap{width:100%;height:100%;max-width:none;aspect-ratio:auto}
.battle-stage canvas{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.battle-stage .battle-status{position:absolute;inset:12px 12px auto;z-index:2;height:auto;max-height:24%;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;pointer-events:none}
.battle-status .danger-banner,.battle-status .boss-panel{width:min(100%,520px);margin:0;padding:7px 12px;border:1px solid #87919d70;background:#171B20E8;box-shadow:0 2px 8px #0004;border-radius:4px}
.battle-status .danger-banner[data-level=danger],.battle-status .danger-banner[data-level=ended]{background:#612A32EB;border-color:#D63843}
.battle-status .danger-banner p{font-size:11px;line-height:1.45;color:#F1F1ED;text-align:center;overflow-wrap:anywhere}
.battle-status .boss-panel>div{font-size:11px;line-height:1.4;color:#F1F1ED;margin-bottom:5px}
.battle-status .boss-panel progress{height:5px}
.battle-status .boss-panel progress::-webkit-progress-value{background:#D63843}
@media(max-width:767px){.battle-stage .battle-status{inset:8px 8px auto;gap:5px}.battle-status .danger-banner,.battle-status .boss-panel{padding:5px 8px}.battle-status .danger-banner p,.battle-status .boss-panel>div{font-size:10px}}

/* Mission card: typography and hierarchy from the supplied tactical mockup. */
#operation-mount #operation-panel{padding:12px 14px 16px}
#operation-panel .mission-heading{padding:0 0 10px;margin:0;border-bottom:1px solid #49515B}
#operation-panel .mission-heading h2{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;line-height:1.3;letter-spacing:0}
#operation-panel .mission-heading h2:before{content:"";display:block;width:3px;height:26px;background:#D63843;flex:0 0 3px}
#operation-panel .mission-wave{position:relative;display:flex;align-items:baseline;gap:10px;margin:0;padding:12px 0;border-bottom:1px solid #49515B;white-space:nowrap}
#operation-panel .mission-wave>span:first-child{font-family:Arial,sans-serif;font-size:22px;font-weight:400;letter-spacing:.055em;color:#C1C7CF;display:inline-block;transform:scale(.94,1.15);transform-origin:left center}
#operation-panel .mission-wave strong{display:flex;align-items:baseline;gap:8px;font-size:42px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
#operation-panel #wave-number{color:#D63843;font-weight:800}
#operation-panel .mission-wave strong small{color:#89939F;font-size:22px;font-weight:600;line-height:1.2}
#operation-panel #wave-phase{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#operation-panel .mission-clock{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:12px 0 8px;font-size:16px;line-height:1.4;color:#C1C7CF}
#operation-panel .mission-clock strong{font-size:26px;font-weight:800;line-height:1.2;color:#F1F1ED;font-variant-numeric:tabular-nums}
#operation-panel #next-wave-progress{height:9px;border-radius:4px;background:#3A414A;accent-color:#D63843}
#operation-panel #next-wave-progress::-webkit-progress-bar{background:#3A414A;border-radius:4px}
#operation-panel #next-wave-progress::-webkit-progress-value{background:#D63843;border-radius:4px}
#operation-panel #next-wave-progress::-moz-progress-bar{background:#D63843;border-radius:4px}
@media(max-width:767px){
 #operation-mount #operation-panel{padding:10px 12px 12px}
 #operation-panel .mission-heading h2{font-size:22px}
 #operation-panel .mission-heading h2:before{height:24px}
 #operation-panel .mission-wave{padding:9px 0}
 #operation-panel .mission-wave strong{font-size:36px}
 #operation-panel .mission-wave>span:first-child,#operation-panel .mission-wave strong small{font-size:21px}
 #operation-panel .mission-clock{padding-top:9px}
 #operation-panel .mission-clock strong{font-size:24px}
}

/* Strong heading rule; secondary section divider remains a thin quiet line. */
#operation-panel .mission-heading{position:relative;border-bottom:0;padding-bottom:11px}
#operation-panel .mission-heading:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#89939F;clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%);pointer-events:none}
#operation-panel .mission-heading h2:after{content:"";position:absolute;right:4px;bottom:0;z-index:1;width:26px;height:3px;background:repeating-linear-gradient(125deg,#C1C7CF 0 4px,#22272E 4px 6px);pointer-events:none}

/* Selected character: portrait, name/tier, three live stat rows, legend action. */
#operation-mount{overflow-y:auto}
#operation-mount .character-panel{max-height:none;overflow:visible;flex:1 0 auto;padding:6px}
#operation-mount .character-panel .selected-row{margin:0}
#operation-mount .character-panel .portrait.profile-frame{width:100%;min-width:0;max-width:none;aspect-ratio:1;border-radius:3px}
#operation-mount .character-panel .unit-info{margin:0;padding:0 7px}
.character-panel .unit-identity{display:flex;align-items:center;gap:9px;padding:12px 0 10px}
.character-panel .unit-identity .profile-name{position:static;visibility:visible;margin:0;padding:0;background:none;text-align:left;font-size:22px;line-height:1.3;font-weight:800;min-width:0;color:#F1F1ED;text-shadow:none;overflow-wrap:anywhere}
.character-panel .unit-identity #unit-name{text-align:left;color:#F1F1ED}
.character-panel .unit-identity .tier{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border:1px solid #94AF9F;border-radius:4px;background:#35423D;color:#D9EADF;font-size:12px;line-height:1.25;font-weight:700;white-space:nowrap}
.character-panel .unit-identity .tier[data-tier="1"]{background:#53346C;border-color:#B479D2;color:#F0E0FA}
.character-panel .unit-identity .tier[data-tier="2"]{background:#594723;border-color:#D3AE5A;color:#FAE4A6}
.character-panel .unit-identity .tier[data-tier="3"]{background:#5E2832;border-color:#E06D78;color:#FFE2E5}
.character-panel .unit-identity .tier[data-tier="4"]{background:#1F3E5A;border-color:#6FB7F0;color:#E2F2FF}
.character-panel .unit-stats{margin:0;font-size:16px;line-height:1.4}
.character-panel .unit-stats>div{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #49515B;padding:11px 0}
.character-panel .unit-stats dt{color:#B8BFC7;font-size:15px;font-weight:500}
.character-panel .unit-stats dd{display:flex;align-items:baseline;gap:4px;margin:0;color:#F1F1ED;font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.character-panel .unit-stats dd small{font-size:10px;color:#B8BFC7;font-weight:400}
#unit-sell{display:flex;align-items:center;justify-content:center;width:100%;height:36px;min-height:36px;margin:4px 0;padding:6px 12px;background:transparent;color:#C9D0D8;border:1px solid #697481;border-radius:4px;font-size:13px}
#unit-sell:hover:not(:disabled){border-color:#D63843;color:#F1F1ED}
#unit-sell[hidden]{display:none}
#unit-portal{display:flex;align-items:center;justify-content:center;width:100%;height:36px;min-height:36px;margin:4px 0 0;padding:6px 12px;background:#5c1820;color:#F1F1ED;border:1px solid #b8323d;border-radius:4px;font-size:13px}
#unit-portal[data-mode="return"]{background:transparent}
#unit-portal[hidden]{display:none}
.arena-wrap{position:relative}
.view-toggle{position:absolute;z-index:3;left:8px;top:8px;padding:6px 10px;border:1px solid #b8323d;border-radius:4px;background:rgba(20,10,14,.82);color:#ffd6d9;font-size:12px;font-weight:700;cursor:pointer}
.view-toggle[aria-pressed="true"]{background:#8f1d24;color:#fff}
.view-toggle[hidden]{display:none}
#roster-list .in-portal{position:relative;outline:2px solid #b8323d;outline-offset:-2px}
#roster-list .in-portal:after{content:"포탈";position:absolute;left:3px;top:3px;padding:0 3px;border-radius:2px;background:#8f1d24;color:#fff;font-size:9px;line-height:14px}
.guide-dialog{max-width:min(560px,calc(100vw - 32px))}
.guide-body{max-height:min(60vh,520px);overflow-y:auto;padding-right:4px}
.guide-body h3{margin:14px 0 4px;font-size:15px;color:#F3C595}
.guide-body p{margin:0;font-size:14px;line-height:1.6;color:var(--ink)}
.heretic-status{margin-top:12px;padding-top:10px;border-top:1px solid #49515B}
.heretic-status[hidden]{display:none}
.heretic-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:var(--muted);font-size:13px}
.heretic-row strong{color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums}
#heretic-progress{width:100%;height:6px;margin:6px 0 4px;accent-color:#e2444f}
#heretic-note{display:block;color:var(--muted);font-size:12px}
.heretic-status[data-warn="true"] #heretic-note{color:#ff939b}
#unit-option-action #unit-details-open{position:static;display:flex;align-items:center;justify-content:center;width:100%;height:44px;min-height:44px;padding:8px 12px;margin:10px 0 4px;background:#303740;color:#F1F1ED;border:1px solid #697481;border-radius:4px;font-size:14px}
#unit-option-action #unit-details-open:hover:not(:disabled){background:#3C4652;border-color:#D63843}
#unit-option-action .legend-toggle-label{min-height:0;padding:0;border:0;background:none;color:inherit;font-size:14px;line-height:1.3}
.character-panel .legend-roll-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.character-panel .legend-option-status{margin-top:6px!important}
@media(max-width:767px){
 #operation-mount .character-panel .portrait.profile-frame{width:min(100%,208px);margin-inline:auto}
 .character-panel .unit-identity .profile-name{font-size:20px}
 .character-panel .unit-stats>div{padding:9px 0}
}

.character-panel .unit-identity .profile-name{flex:0 1 auto}
.character-panel .unit-identity .tier{flex:0 0 auto}

.character-panel .unit-stats dt{display:flex;align-items:center;gap:8px}
.character-panel .stat-icon{display:block;width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.character-panel .stat-icon-attack,.character-panel .stat-icon-speed{color:#E86B76}
.character-panel .stat-icon-range{color:#C1C7CF}
@media(min-width:768px) and (min-height:500px){
 #operation-mount{scrollbar-gutter:stable}
 /* Grade tabs (2026-10-27): keep the scrollbar lane so short lists do not widen the cards. */
 #catalog-mount{scrollbar-gutter:stable}
}

/* Unselected army overview: heading, total, one grade per row, recipes and hint. */
#squad-overview{padding:16px 12px;border-radius:4px;background:#1B2026}
#squad-overview .overview-heading{margin:0;padding:0 0 12px;border-bottom:2px solid #697481;color:#F1F1ED;font-size:24px;font-weight:800;line-height:1.3}
#squad-overview>#overview-total{display:block;margin:12px 0 14px;font-size:34px;line-height:1.3;color:#F1F1ED;font-variant-numeric:tabular-nums}
#squad-overview #overview-tiers{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:0 0 12px}
#overview-tiers .overview-tier-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:36px;padding:4px 0;background:none}
#overview-tiers .overview-tier-badge{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:4px 8px;border:1px solid #94AF9F;border-radius:4px;background:#35423D;color:#D9EADF;font-size:13px;line-height:1.2;font-weight:700}
#overview-tiers .overview-tier-badge[data-tier="1"]{background:#53346C;border-color:#B479D2;color:#F0E0FA}
#overview-tiers .overview-tier-badge[data-tier="2"]{background:#594723;border-color:#D3AE5A;color:#FAE4A6}
#overview-tiers .overview-tier-badge[data-tier="3"]{background:#5E2832;border-color:#E06D78;color:#FFE2E5}
#overview-tiers .overview-tier-badge[data-tier="4"]{background:#1F3E5A;border-color:#6FB7F0;color:#E2F2FF}
#overview-tiers .overview-tier-count{display:inline-flex;align-items:baseline;gap:5px}
#overview-tiers .overview-tier-count b{float:none;color:#F1F1ED;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
#overview-tiers .overview-tier-count small{font-size:12px;color:#B8BFC7}
#squad-overview .overview-resources{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:13px 0 0;border-top:1px solid #49515B;color:#B8BFC7;font-size:15px;line-height:1.4}
#squad-overview .overview-resources>span:last-child{display:flex;align-items:baseline;gap:5px}
#squad-overview .overview-resources b{font-size:22px;color:#F1F1ED;font-variant-numeric:tabular-nums}
#squad-overview .overview-resources small{font-size:12px}
#squad-overview>.overview-help{display:block;margin-top:14px;font-size:12px;line-height:1.8;color:#B8BFC7;word-break:keep-all;overflow-wrap:anywhere}
.stat-icon-speed .speed-swing{transform-box:fill-box;transform-origin:50% 50%;transform:rotate(8deg)}
.stat-icon-speed .speed-trails{opacity:.55}
@media(max-width:767px){#squad-overview .overview-heading{font-size:22px}#squad-overview{padding:14px 12px}}

/* Keep the main effect toggle fixed in the card flow; the catalog sits underneath. */
.character-panel #legend-catalog-open{display:block;width:100%;min-height:28px;margin:3px 0 0;padding:4px 0;border:0;background:transparent;color:#B8BFC7;font-size:11px;font-weight:500;line-height:1.4;box-shadow:none;text-decoration:underline;text-underline-offset:3px}
.character-panel #legend-catalog-open:hover:not(:disabled){background:#303740;color:#F1F1ED}
.character-panel #legend-option-status{margin:6px 0 0!important;font-size:11px;line-height:1.5}

/* Shared title treatment for mission status and the army overview. */
#operation-panel .mission-heading,#squad-overview .mission-heading{position:relative;margin:0;padding:0 0 11px;border:0}
#operation-panel .mission-heading h2,#squad-overview .mission-heading h2{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0;font-size:24px;font-weight:800;line-height:1.3;letter-spacing:0;color:#F1F1ED}
#operation-panel .mission-heading h2:before,#squad-overview .mission-heading h2:before{content:"";display:block;width:3px;height:26px;background:#D63843;flex:0 0 3px}
#operation-panel .mission-heading:after,#squad-overview .mission-heading:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#89939F;clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%);pointer-events:none}
#operation-panel .mission-heading h2:after,#squad-overview .mission-heading h2:after{content:"";position:absolute;right:4px;bottom:0;z-index:1;width:26px;height:3px;background:repeating-linear-gradient(125deg,#C1C7CF 0 4px,#22272E 4px 6px);pointer-events:none}
#squad-overview #overview-tiers{gap:7px}
#overview-tiers .overview-tier-row{min-height:44px;padding:8px 10px;border:1px solid #49515B;border-left:2px solid #94AF9F;border-radius:4px;background:#22272E}
#overview-tiers .overview-tier-row:has([data-tier="1"]){border-left-color:#B479D2}
#overview-tiers .overview-tier-row:has([data-tier="2"]){border-left-color:#D3AE5A}
#overview-tiers .overview-tier-row:has([data-tier="3"]){border-left-color:#E06D78}
#overview-tiers .overview-tier-row:has([data-tier="4"]){border-left-color:#6FB7F0}
@media(max-width:767px){
 #operation-panel .mission-heading h2,#squad-overview .mission-heading h2{font-size:22px}
 #operation-panel .mission-heading h2:before,#squad-overview .mission-heading h2:before{height:24px}
}

/* One continuous combat header, with a wordmark and separated inline metrics. */
.app>.combat-header{position:relative;display:grid;grid-template-columns:minmax(180px,1fr) auto auto;align-items:center;gap:0;width:100%;min-height:64px;margin:12px 0;padding:9px 14px;border:1px solid #49515B;border-radius:5px;background:#22272E}
.combat-header .game-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;grid-column:auto;grid-row:auto;gap:0;min-width:0;padding:0 18px 0 0}
.combat-header .brand-wordmark{display:flex;align-items:center;gap:9px;margin:0;font-size:inherit;line-height:1;letter-spacing:0}
.combat-header .brand-logo{display:block;width:112px;height:40px;flex:0 0 auto;color:#F1F1ED}
.combat-header .brand-wordmark .brand-badge{padding:4px 7px;border:1px solid #74616A;border-radius:3px;background:#30272D;color:#F1F1ED;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:0;white-space:nowrap}
.combat-header .game-brand .brand-mode{margin-top:1px;color:#B8BFC7;font-size:8px;line-height:1.2;letter-spacing:0;white-space:normal}
.combat-header .combat-metrics{display:grid;grid-template-columns:repeat(4,auto);grid-column:auto;grid-row:auto;align-items:center;gap:0;min-width:0}
.combat-header .combat-metrics .hud-item{display:flex;align-items:center;gap:9px;min-width:0;min-height:34px;padding:0 16px;border:0;border-left:1px solid #49515B;border-radius:0;background:transparent}
.combat-header .hud-icon{display:block;width:24px;height:24px;flex:0 0 24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#F1F1ED}
.combat-header .hud-credit-icon{color:#E6B760}
.combat-header .combat-metrics .hud-item>.hud-label{display:block;flex:0 0 auto;margin:0;color:#C1C7CF;font-size:13px;font-weight:500;line-height:1.2;letter-spacing:0;white-space:nowrap}
.combat-header .hud-item strong{display:block;margin:0;padding:0;background:none;color:#F1F1ED;font-size:23px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.combat-header .hud-item #alive{color:#ED6974}
.combat-header .hud-item strong small{font-size:14px;font-weight:500;color:#AAB3BF}
.combat-header .header-actions{display:flex;align-items:center;justify-content:flex-end;grid-column:auto;grid-row:auto;gap:0;margin:0;padding:0 0 0 14px;border-left:1px solid #49515B}
.combat-header .header-actions #pause-top{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;border:1px solid transparent;border-radius:4px;background:transparent;color:#F1F1ED}
.combat-header .header-actions #pause-top:disabled{border-color:transparent!important;background:transparent!important;color:#87929F!important}
.combat-header .header-actions #pause-top[aria-pressed=true]{border-color:#D63843;background:#4B252E}
.combat-header .header-actions #pause-top:hover:not(:disabled){border-color:#697481;background:#303740}
@media(min-width:768px) and (max-width:1099px){
 .app>.combat-header{grid-template-columns:minmax(160px,1fr) auto auto;padding-inline:10px}
 .combat-header .brand-logo{width:98px;height:36px}
 .combat-header .brand-wordmark{gap:6px}
 .combat-header .brand-wordmark .brand-badge{padding:4px 5px;font-size:11px}
 .combat-header .game-brand{padding-right:12px}
 .combat-header .combat-metrics .hud-item{gap:7px;padding-inline:10px}
 .combat-header .hud-icon{width:22px;height:22px;flex-basis:22px}
 .combat-header .combat-metrics .hud-item>.hud-label{font-size:12px}
 .combat-header .hud-item strong{font-size:20px}
 .combat-header .hud-item strong small{font-size:12px}
 .combat-header .header-actions{padding-left:10px}
}
@media(max-width:767px){
 .app>.combat-header{grid-template-columns:minmax(0,1fr) 52px;grid-template-rows:auto auto;gap:8px 0;width:calc(100% - 20px);min-height:0;margin:8px 10px;padding:8px 10px}
 .combat-header .game-brand{grid-column:1;grid-row:1;padding:0 8px 0 0}
 .combat-header .brand-logo{width:98px;height:34px}
 .combat-header .brand-wordmark{gap:7px}
 .combat-header .brand-wordmark .brand-badge{font-size:10px;padding:4px 6px}
 .combat-header .header-actions{grid-column:2;grid-row:1;padding-left:7px}
 .combat-header .combat-metrics{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(82px,1.25fr) minmax(64px,1fr) minmax(56px,.9fr) minmax(52px,.85fr);padding-top:8px;border-top:1px solid #49515B}
 .combat-header .combat-metrics .hud-item{display:grid;grid-template-columns:16px minmax(0,1fr);grid-template-rows:auto auto;gap:0 4px;min-height:34px;padding:0 5px}
 .combat-header .combat-metrics .hud-item:first-child{border-left:0;padding-left:0}
 .combat-header .hud-icon{grid-column:1;grid-row:1/3;width:16px;height:16px;flex-basis:16px;align-self:center}
 .combat-header .combat-metrics .hud-item>.hud-label{grid-column:2;grid-row:1;font-size:9px;line-height:1.15}
 .combat-header .hud-item strong{grid-column:2;grid-row:2;font-size:15px;line-height:1.2}
 .combat-header .hud-item strong small{font-size:10px}
 .combat-header .hud-credit strong,.combat-header .hud-modules strong{grid-row:1/3;align-self:center}
}

/* Reserve metric columns so growing numbers never shift dividers or the logo. */
.combat-header .combat-metrics{grid-template-columns:270px 180px 156px 132px}
.combat-header .combat-metrics .hud-item>.hud-label{font-size:20px}
.combat-header .hud-item strong{flex:1 1 0;min-width:0;text-align:right;font-feature-settings:"tnum"}
.combat-header .hud-time strong{min-width:6ch}
@media(min-width:768px) and (max-width:1099px){
 .app>.combat-header{grid-template-columns:minmax(140px,1fr) auto auto}
 .combat-header .combat-metrics{grid-template-columns:190px 120px 100px 90px}
 .combat-header .hud-icon{width:18px;height:18px;flex-basis:18px}
 .combat-header .combat-metrics .hud-item>.hud-label{font-size:16px}
 .combat-header .hud-item strong{font-size:18px}
 .combat-header .hud-time strong{min-width:0}
}
@media(max-width:767px){
 .combat-header .combat-metrics{grid-template-columns:94px 68px minmax(0,1fr) minmax(0,1fr)}
 .combat-header .combat-metrics .hud-item>.hud-label{font-size:14px}
 .combat-header .hud-item strong{text-align:left;min-width:0}
 .combat-header .hud-credit,.combat-header .hud-modules{grid-template-columns:minmax(0,1fr);grid-template-rows:16px 18px;justify-items:center}
 .combat-header .hud-credit .hud-icon,.combat-header .hud-modules .hud-icon{grid-column:1;grid-row:1}
 .combat-header .hud-credit strong,.combat-header .hud-modules strong{grid-column:1;grid-row:2;font-size:12px;text-align:center}
}

/* Shared squad and command card; heading spans the complete card. */
.board-column .command-dock{display:grid;grid-template-columns:minmax(0,3fr) minmax(156px,1fr);grid-template-rows:auto 96px;gap:10px 12px;padding:12px;border:1px solid #49515B;border-radius:5px;background:#22272E}
.command-dock>.roster-heading{grid-column:1/-1;grid-row:1;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:12px;min-height:30px;margin:0;padding-bottom:10px;border-bottom:1px solid #697481}
.command-dock .roster-heading #roster-title{display:flex;align-items:center;gap:9px;flex:0 0 auto;margin:0;font-size:20px;line-height:1.3;font-weight:800;color:#F1F1ED}
.command-dock #roster-title:before{content:"";width:3px;height:23px;background:#D63843;flex:0 0 3px}
.command-dock .roster-heading #field-input-help{flex:0 1 auto;margin-left:auto;text-align:right;font-size:10px;line-height:1.4;color:#B8BFC7}
.command-dock #roster-panel{grid-column:1;grid-row:2}
.command-dock #roster-list{grid-template-rows:80px;grid-auto-rows:80px;grid-auto-columns:64px;gap:7px;min-height:96px;max-height:96px;padding:2px;align-content:start}
.command-dock #roster-list .unit-select-card{height:80px;border:1px solid #89939F;background:#303740;border-radius:4px;overflow:hidden}
.command-dock #roster-list .unit-select-card:hover:not(:disabled){border-color:#F1F1ED}
.command-dock #roster-list .unit-select-card.is-selected{border-color:#D63843;outline:2px solid #D63843;outline-offset:-2px}
.command-dock #roster-empty{height:96px}
.command-dock .command-actions{grid-column:2;grid-row:2;grid-template-columns:repeat(3,minmax(44px,1fr));grid-template-rows:96px;gap:7px;margin:0;align-self:stretch}
.command-dock .command-actions .command-button,.command-dock #start.has-command-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%;height:96px;min-height:96px;padding:7px 3px;font-size:13px;line-height:1.2}
.command-dock .command-icon{display:block;flex:0 0 auto;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.command-dock .command-button .command-label-line{font-size:13px;font-weight:700;white-space:nowrap}
.command-dock .command-button .command-cost{font-size:10px;font-weight:500;color:inherit;white-space:nowrap}
.command-dock #summon-batch{background:#303740;border-color:#697481}
.command-dock #summon-batch:hover:not(:disabled){background:#3C4652;border-color:#8995A3}
@media(max-width:1099px){
 .board-column .command-dock{grid-template-columns:minmax(0,1fr) 156px;gap:8px;padding:8px}
 .command-dock .roster-heading #roster-title{font-size:18px;gap:7px}
 .command-dock .roster-heading #field-input-help{font-size:9px}
 .command-dock .command-actions{gap:4px}
 .command-dock .command-button .command-label-line{font-size:11px}
 .command-dock .command-button .command-cost{font-size:9px}
}

.command-dock .command-button>*{pointer-events:none}

/* Keep the roster title, help and rule entirely to the left of the action buttons. */
.command-dock>.roster-heading{grid-column:1;min-width:0}
.command-dock .roster-heading #field-input-help{min-width:0;overflow:hidden}
.command-dock .command-actions{grid-row:1/span 2;grid-template-rows:minmax(96px,1fr)}
.command-dock .command-actions .command-button,.command-dock #start.has-command-icon{height:100%}
@media(min-width:768px) and (max-width:1099px){
 .command-dock>.roster-heading{flex-wrap:wrap;gap:5px}
 .command-dock .roster-heading #field-input-help{flex-basis:100%;margin-left:0;text-align:left}
}

/* A compact horizontal roster, also scrollable with a vertical mouse wheel. */
.command-dock #roster-list{scrollbar-width:thin;scrollbar-color:#697481 #22272E}
.command-dock #roster-list::-webkit-scrollbar{height:5px}
.command-dock #roster-list::-webkit-scrollbar-track{background:#22272E}
.command-dock #roster-list::-webkit-scrollbar-thumb{background:#697481;border-radius:3px}
.command-dock #roster-list::-webkit-scrollbar-thumb:hover{background:#89939F}

/* Green catalog heading, independent search and grade controls. */
#catalog-panel{--catalog-accent:#57B995}
#catalog-panel>.side-heading{position:relative;display:block;margin:0 0 12px;padding:0 0 11px;border:0;top:auto}
#catalog-panel>.side-heading h2{display:flex;align-items:center;gap:10px;margin:0;font-size:24px;line-height:1.3;font-weight:800;color:#F1F1ED}
#catalog-panel>.side-heading h2:before{content:"";display:block;width:3px;height:26px;flex:0 0 3px;background:var(--catalog-accent)}
#catalog-panel>.side-heading:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#89939F;clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%)}
#catalog-panel>.side-heading h2:after{content:"";position:absolute;right:4px;bottom:0;z-index:1;width:26px;height:3px;background:repeating-linear-gradient(125deg,#C1C7CF 0 4px,#22272E 4px 6px)}
#catalog-panel #catalog-search{display:block;width:100%;min-height:42px;margin:0 0 10px;padding:9px 10px;font-size:14px}
#catalog-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-bottom:14px}
#catalog-filters button{min-width:0;min-height:36px;padding:6px 2px;font-size:12px}
#catalog-filters button[aria-pressed=true]{border-color:var(--catalog-accent);background:#29463D;box-shadow:inset 0 0 0 1px var(--catalog-accent);color:#E5FFF3}
#catalog-filters button:hover{border-color:var(--catalog-accent)}
#catalog-panel :is(button,input):focus-visible{outline-color:var(--catalog-accent)}
#catalog-panel .recipe{padding:10px;border-color:#49515B;background:#2A3038;transition:border-color .12s}
#catalog-panel .recipe.available{border-color:#49856D}
#catalog-panel .recipe:hover,#catalog-panel .recipe:focus-within{border-color:var(--catalog-accent);box-shadow:inset 0 0 0 1px var(--catalog-accent)}
#catalog-panel .recipe.related:after{display:none}
#catalog-panel .recipe .recipe-main{grid-template-columns:minmax(0,1fr) 16px minmax(0,1.2fr);grid-template-rows:auto auto;gap:10px 6px;min-height:0;align-items:center}
#catalog-panel .recipe .recipe-main:hover:not(:disabled){background:transparent!important}
#catalog-panel .recipe .recipe-name{grid-column:1/-1;grid-row:1;align-self:start;font-size:18px;line-height:1.4;min-height:26px}
#catalog-panel .recipe.available .recipe-name{padding-right:65px}
#catalog-panel .recipe-portrait{grid-column:1;grid-row:2;align-self:center;border:1px solid #697481;border-radius:4px}
#catalog-panel .recipe-portrait .character-art{aspect-ratio:1}
#catalog-panel .recipe .recipe-arrow{grid-column:2;grid-row:2}
#catalog-panel .recipe .recipe-ingredients{grid-column:3;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);gap:4px;align-items:center;width:100%}
#catalog-panel .recipe .ingredient{display:block;min-width:0;max-width:none;width:100%;aspect-ratio:1;border:1px solid #697481;border-radius:4px}
#catalog-panel .recipe .ingredient-plus{font-size:15px;text-align:center;align-self:center}
#catalog-panel .recipe-tier{position:absolute;left:4px;bottom:4px;display:inline-flex;align-items:center;justify-content:center;max-width:calc(100% - 8px);margin:0;padding:3px 5px;border:1px solid #B479D2;border-radius:3px;background:#53346C;color:#F0E0FA;font-size:11px;font-weight:700;line-height:1.2}
#catalog-panel .recipe-tier[data-tier="2"]{background:#594723;border-color:#D3AE5A;color:#FAE4A6}
#catalog-panel .recipe-tier[data-tier="3"]{background:#5E2832;border-color:#E06D78;color:#FFE2E5}
#catalog-panel .recipe-tier[data-tier="4"]{background:#1F3E5A;border-color:#6FB7F0;color:#E2F2FF}
#catalog-panel .recipe-availability{position:absolute;top:10px;right:8px;display:block;margin:0;padding:4px 5px;border:1px solid #57B995;border-radius:3px;background:#29463D;color:#CBF6E4;font-size:10px;line-height:1.2;font-weight:700;pointer-events:none}
#catalog-panel .recipe.confirming{border-color:var(--catalog-accent);box-shadow:inset 0 0 0 1px var(--catalog-accent)}
#catalog-panel .recipe-confirmation{border-color:var(--catalog-accent);background:#233A32}
#catalog-panel .recipe-confirm-actions button:first-child{background:#347E62;color:#FFF;border-color:var(--catalog-accent)}
#catalog-dialog .dialog-heading{position:static;height:0;min-height:0;padding:0;margin:0;background:none}
#catalog-dialog .dialog-heading h2{display:none}
#catalog-dialog #catalog-close{position:absolute;top:16px;right:16px;z-index:3}
#catalog-dialog #catalog-panel>.side-heading{display:block;padding-right:44px}
@media(max-width:1099px){
 #catalog-panel>.side-heading h2{font-size:22px}
 #catalog-panel .recipe{padding:8px}
 #catalog-panel .recipe .recipe-name{font-size:16px}
 #catalog-panel .recipe .recipe-main{grid-template-columns:minmax(0,1fr) 12px minmax(0,1.2fr);gap:8px 4px}
}



/* Name beside the result portrait; overflow names loop inside their own viewport. */
#catalog-panel .recipe .recipe-main{grid-template-rows:auto 1fr}
#catalog-panel .recipe-portrait{grid-row:1/span 2;align-self:start}
#catalog-panel .recipe .recipe-name{grid-column:2/4;grid-row:1;min-width:0;max-width:100%;min-height:0;white-space:nowrap;overflow:hidden}
#catalog-panel .recipe-name-window{display:block;width:100%;overflow:hidden;white-space:nowrap}
#catalog-panel .recipe-name-track{display:inline-flex;align-items:center;width:max-content;gap:30px;vertical-align:top}
#catalog-panel .recipe-name-copy{display:block;flex:0 0 auto;white-space:nowrap}
#catalog-panel .recipe-name-repeat{display:none}
#catalog-panel .recipe-name-track.is-overflowing{animation:catalog-name-slide var(--name-duration,8s) linear infinite}
#catalog-panel .is-overflowing .recipe-name-repeat{display:block}
@keyframes catalog-name-slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 15px))}}
@media(prefers-reduced-motion:reduce){#catalog-panel .recipe-name-track.is-overflowing{animation:none}}
/* Selected character name: overflow names loop like catalog names. */
.character-panel .unit-identity .profile-name{flex:0 1 auto;overflow:hidden}
.character-panel .unit-name-window{display:block;max-width:100%;overflow:hidden;white-space:nowrap}
.character-panel .unit-name-track{display:inline-flex;align-items:center;width:max-content;gap:30px;vertical-align:top}
.character-panel .unit-name-track #unit-name{display:block;flex:0 0 auto;white-space:nowrap;overflow:visible;-webkit-line-clamp:none}
.character-panel .unit-name-repeat{display:none;white-space:nowrap}
.character-panel .unit-name-track.is-overflowing{animation:catalog-name-slide var(--name-duration,8s) linear infinite}
.character-panel .unit-name-track.is-overflowing .unit-name-repeat{display:block}
@media(prefers-reduced-motion:reduce){.character-panel .unit-name-track.is-overflowing{animation:none}}

/* Reserve enough card height for readable confirmation controls on narrow panels. */
#catalog-panel .recipe .recipe-main{min-height:136px}
#catalog-panel .recipe-confirmation{padding:8px;gap:4px}
#catalog-panel .recipe-confirmation .recipe-consumed{max-height:56px;overflow-y:auto;font-size:10px;line-height:1.4}



/* Fit idle cards to their portraits; reserve extra height only while confirming a fusion. */
#catalog-panel .recipe .recipe-main{min-height:0}
/* The card keeps its size while asking (2026-10-27, it grew by ~24px); the overlay scrolls if its content ever runs longer. */
#catalog-panel .recipe-confirmation{overflow-y:auto}

/* Three material portraits share one row; result portraits use the same columns as every card. */
#catalog-panel .recipe.has-three .recipe-ingredients{grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr);grid-template-rows:auto;gap:3px;padding-bottom:0;align-items:center}
/* Four different ingredients (2026-10-26: Rapi : Red Hood, Anis : Star) sit in one tighter row. */
#catalog-panel .recipe.has-four .recipe-ingredients{grid-template-columns:minmax(0,1fr) 6px minmax(0,1fr) 6px minmax(0,1fr) 6px minmax(0,1fr);grid-template-rows:auto;gap:2px;padding-bottom:0;align-items:center}
#catalog-panel .recipe.has-four .ingredient-plus{font-size:11px}

/* Quantity badges keep multi-copy recipes in a single readable material row. */
#catalog-panel .recipe .ingredient{position:relative}
#catalog-panel .ingredient-count{position:absolute;right:1px;bottom:1px;display:grid;place-items:center;width:13px;height:13px;padding:0;border:1px solid #89939F;border-radius:50%;background:#171B20F2;color:#F1F1ED;font-size:9px;font-weight:700;line-height:1;white-space:nowrap}

/* Boss arrival warning: full-field overlay; input and battlefield coordinates remain available. */
.battle-stage .boss-wave-warning{--bw-red:#D63843;--bw-hot:#F17F88;--bw-amber:#E8C547;--bw-progress:0;position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;padding:12px;background:#0B0D1099;animation:boss-alert-breathe 1.2s ease-in-out infinite}
.battle-stage .boss-wave-warning[data-final="true"]{--bw-red:#B5121F;--bw-hot:#FF5A66;--bw-amber:#F2B233;background:#0B0D10BB}
.boss-wave-warning .bw-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 38%,#D6384355 78%,#D63843AA 100%);animation:bw-vignette 1.2s ease-in-out infinite}
.boss-wave-warning .bw-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#FFFFFF08 0 1px,transparent 1px 4px);opacity:.8}
.boss-wave-warning .bw-scan::after{content:"";position:absolute;left:0;right:0;height:22%;background:linear-gradient(180deg,transparent,#D6384333,transparent);animation:bw-sweep 1.6s linear infinite}
.boss-wave-warning .bw-band{position:absolute;left:-2%;right:-2%;height:30px;display:flex;align-items:center;overflow:hidden;background:#171B20E6;border-block:4px solid transparent;border-image:repeating-linear-gradient(135deg,var(--bw-amber) 0 10px,#171B20 10px 20px) 4;transform:rotate(-2deg)}
.boss-wave-warning .bw-band-top{top:9%}
.boss-wave-warning .bw-band-bottom{bottom:9%}
.boss-wave-warning .bw-band-track{display:flex;width:max-content;white-space:nowrap;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--bw-amber);animation:bw-band 9s linear infinite}
.boss-wave-warning .bw-band-bottom .bw-band-track{animation-direction:reverse}
.boss-wave-warning .bw-band-track span{padding-right:24px}
.boss-wave-warning .bw-corner{position:absolute;width:34px;height:34px;border:3px solid var(--bw-hot);animation:bw-corner 1.2s ease-in-out infinite}
.boss-wave-warning .bw-tl{top:10px;left:10px;border-right:0;border-bottom:0}
.boss-wave-warning .bw-tr{top:10px;right:10px;border-left:0;border-bottom:0}
.boss-wave-warning .bw-bl{bottom:10px;left:10px;border-right:0;border-top:0}
.boss-wave-warning .bw-br{bottom:10px;right:10px;border-left:0;border-top:0}
.boss-wave-warning .boss-warning-card{position:relative;width:100%;padding:16px 12px 14px;background:linear-gradient(90deg,transparent,#171B20F2 18%,#171B20F2 82%,transparent);text-align:center;color:#F1F1ED;animation:bw-card-in .45s cubic-bezier(.2,.9,.3,1.2) both}
.boss-wave-warning .boss-warning-card::before,.boss-wave-warning .boss-warning-card::after{content:"";position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--bw-red),transparent)}
.boss-wave-warning .boss-warning-card::before{top:0}
.boss-wave-warning .boss-warning-card::after{bottom:0}
.boss-wave-warning .boss-warning-main{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--bw-hot)}
.boss-warning-main svg{width:30px;height:30px;flex:0 0 30px;animation:bw-blink .6s steps(2,end) infinite}
.boss-warning-main strong{position:relative;font-size:clamp(30px,6vw,64px);line-height:1.1;letter-spacing:.14em;color:#F1F1ED;text-shadow:0 0 18px var(--bw-red)}
.boss-warning-main strong::before,.boss-warning-main strong::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;pointer-events:none}
.boss-warning-main strong::before{color:var(--bw-hot);clip-path:inset(0 0 60% 0);animation:bw-glitch 1.8s steps(1) infinite}
.boss-warning-main strong::after{color:#7FD3E0;clip-path:inset(55% 0 0 0);animation:bw-glitch 1.8s steps(1) infinite reverse}
.boss-wave-warning #boss-warning-label{display:block;margin-top:8px;font-size:clamp(15px,2.2vw,20px);font-weight:800;line-height:1.4;letter-spacing:.06em}
.boss-wave-warning .bw-count{position:relative;width:52px;height:52px;margin:8px auto 0}
.boss-wave-warning .bw-count svg{width:100%;height:100%;transform:rotate(-90deg)}
.boss-wave-warning .bw-ring-bg{fill:#171B20;stroke:#49515B;stroke-width:3}
.boss-wave-warning .bw-ring{fill:none;stroke:var(--bw-red);stroke-width:4;stroke-dasharray:100;stroke-dashoffset:calc(var(--bw-progress) * 100);stroke-linecap:round}
.boss-wave-warning #boss-warning-seconds{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:800;color:#F1F1ED;font-variant-numeric:tabular-nums}
.boss-wave-warning #boss-warning-countdown{display:block;margin-top:6px;font-size:12px;line-height:1.4;color:#C1C7CF;font-variant-numeric:tabular-nums}
.boss-wave-warning.is-paused,.boss-wave-warning.is-paused *,.boss-wave-warning.is-paused *::before,.boss-wave-warning.is-paused *::after{animation-play-state:paused}
.boss-wave-warning.is-paused .boss-warning-card{animation-play-state:running}
.battle-stage .boss-wave-warning{opacity:var(--bw-fade,1);transform:scale(calc(1 + (1 - var(--bw-fade,1)) * .05))}
@keyframes boss-alert-breathe{0%,100%{box-shadow:inset 0 0 0 2px #D6384366}50%{box-shadow:inset 0 0 0 6px #D63843CC}}
@keyframes bw-vignette{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bw-sweep{from{top:-22%}to{top:100%}}
@keyframes bw-band{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bw-corner{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes bw-card-in{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:scaleY(1)}}
@keyframes bw-blink{50%{opacity:.25}}
@keyframes bw-glitch{0%,86%,100%{transform:translateX(0);opacity:0}88%{transform:translateX(-5px);opacity:1}92%{transform:translateX(4px);opacity:1}96%{transform:translateX(-2px);opacity:1}}
@media(prefers-reduced-motion:reduce){.battle-stage .boss-wave-warning,.boss-wave-warning *,.boss-wave-warning *::before,.boss-wave-warning *::after{animation:none}}

@media(max-width:767px){.boss-wave-warning .bw-band{height:24px}.boss-wave-warning .bw-band-track{font-size:10px}.boss-wave-warning .bw-corner{width:22px;height:22px}.boss-wave-warning .bw-count{width:44px;height:44px}.boss-wave-warning #boss-warning-seconds{font-size:18px}}

/* Playback control shares the fixed action area beside pause. */
.combat-header .header-actions{gap:5px}
.combat-header #speed-top{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #49515B;border-radius:4px;background:#22272E;color:#F1F1ED;font-size:16px;font-variant-numeric:tabular-nums}
.combat-header #speed-top[aria-pressed=true]{border-color:#D63843;background:#4B252E;color:#F1F1ED}
.combat-header #speed-top:hover:not(:disabled){border-color:#8995A3;background:#303740}
.combat-header #speed-top:focus-visible{outline:2px solid #F1F1ED;outline-offset:3px}
@media(max-width:767px){.combat-header .brand-logo{width:88px}.combat-header .brand-wordmark{gap:5px}.combat-header .header-actions{padding-left:5px}}

@media(max-width:767px){.app>.combat-header{grid-template-columns:minmax(0,1fr) 104px}}
@media(min-width:768px) and (max-width:1099px){.combat-header .combat-metrics{grid-template-columns:190px 112px 88px 78px}.combat-header .brand-logo{width:88px}}

@media(min-width:768px) and (max-width:1099px){.combat-header .combat-metrics{grid-template-columns:190px 120px 100px 90px}}
@media(min-width:768px) and (max-width:899px){
 .app>.combat-header{grid-template-columns:minmax(0,1fr) 104px;grid-template-rows:auto auto;gap:8px 0}
 .combat-header .game-brand{grid-column:1;grid-row:1}
 .combat-header .header-actions{grid-column:2;grid-row:1}
 .combat-header .combat-metrics{grid-column:1/-1;grid-row:2;grid-template-columns:1.4fr 1fr 1fr .9fr;padding-top:8px;border-top:1px solid #49515B}
 .combat-header .combat-metrics .hud-item:first-child{border-left:0;padding-left:0}
}

.combat-header #speed-top{border-color:transparent;background:transparent}
.combat-header #speed-top svg{display:block;width:24px;height:24px}
.combat-header #speed-top[aria-pressed=true]{border-color:#D63843;background:#4B252E}

/* Sound toggle: same frame as the speed button; waves show the current mode. */
.combat-header #sound-top{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:#F1F1ED}
.combat-header #sound-top svg{display:block;width:24px;height:24px}
.combat-header #sound-top:hover{border-color:#697481;background:#303740}
.combat-header #sound-top:focus-visible{outline:2px solid #F1F1ED;outline-offset:3px}
#sound-top .sound-off{display:none}
#sound-top[data-mode=sfx] .sound-wave-2{display:none}
#sound-top[data-mode=off] .sound-wave-1,#sound-top[data-mode=off] .sound-wave-2{display:none}
#sound-top[data-mode=off] .sound-off{display:block}
#sound-top[data-mode=off]{color:#87929F}

/* Entry and loading screens (2026-10-26): dusk city art (files/게임시작.png), amber/red terminal accents. */
body.intro-active{overflow:hidden}
.intro-screen{position:fixed;inset:0;z-index:1000;display:flex;justify-content:center;padding:0 16px;background:#0e1013 url(backgrounds/entry-city-v6-first.webp) center 40%/cover no-repeat;color:var(--ink)}
.intro-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;pointer-events:none;transform:scale(1.06);will-change:transform}
/* Until the animation draws, the canvas shows its own first frame with the same framing and tilt (2026-10-27). */
.intro-bg{background:#0e1013 url(backgrounds/entry-city-v6-first.webp) center 40%/cover no-repeat}
.intro-screen{perspective:1200px;overflow:hidden}
.intro-inner{will-change:transform}
.intro-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,19,.35) 0%,rgba(14,16,19,0) 30%,rgba(14,16,19,.25) 60%,rgba(14,16,19,.9) 100%);pointer-events:none}
.intro-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;width:min(440px,100%);height:100%;padding:11vh 0 8vh}
.intro-brand{display:flex;flex-direction:column;align-items:center;gap:10px}
.intro-logo{width:min(460px,80vw);height:auto;color:#F4F1EA;filter:drop-shadow(0 6px 22px rgba(0,0,0,.65))}
.intro-title{margin:0;padding:6px 18px;font-size:20px;font-weight:700;letter-spacing:.42em;color:#F3C595;text-shadow:0 2px 10px rgba(0,0,0,.8);border-top:1px solid rgba(243,197,149,.45);border-bottom:1px solid rgba(243,197,149,.45)}
.intro-bottom{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%}
.intro-actions{display:flex;flex-direction:column;gap:10px;width:100%}
.intro-actions[hidden]{display:none}
.intro-start,.intro-guide{position:relative;width:100%;cursor:pointer;font-family:inherit}
/* Entry buttons (2026-10-26, user pick "A 노을 유리", a little more visible): dark glass with a dusk-orange edge and glow. */
.intro-start{height:62px;border:1px solid rgba(248,186,124,.92);border-radius:4px;background:rgba(14,16,22,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#FFE8CC;font-size:21px;font-weight:800;letter-spacing:.3em;text-indent:.3em;text-shadow:0 1px 8px rgba(0,0,0,.7);box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 0 24px rgba(240,140,70,.28),0 8px 24px rgba(0,0,0,.4)}
.intro-start:before{content:"";position:absolute;left:50%;bottom:-1px;width:60%;height:2px;margin-left:-30%;border-radius:2px;background:linear-gradient(90deg,transparent,#F8A862,transparent);box-shadow:0 0 14px 3px rgba(248,168,98,.65);animation:intro-beacon 1.6s ease-in-out infinite}
.intro-start:hover,.intro-start:focus-visible{background:rgba(44,28,20,.66);box-shadow:0 0 0 1px rgba(0,0,0,.4),inset 0 0 32px rgba(240,140,70,.45),0 8px 24px rgba(0,0,0,.4)}
.intro-guide{height:48px;border:1px solid rgba(243,197,149,.55);border-radius:4px;background:rgba(14,16,22,.52);color:#F6DCC0;font-size:15px;font-weight:700;letter-spacing:.25em;text-indent:.25em;text-shadow:0 1px 6px rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.intro-guide:hover,.intro-guide:focus-visible{background:rgba(40,28,22,.62);border-color:rgba(248,186,124,.85);color:#fff}
.intro-loading{width:100%}
.loading-track{position:relative;height:18px;padding:3px;border:1px solid rgba(240,163,94,.8);border-radius:3px;background:rgba(10,12,15,.82);box-shadow:0 0 18px rgba(240,163,94,.25)}
.loading-fill{position:relative;display:block;width:0;height:100%;overflow:hidden;background:repeating-linear-gradient(90deg,#F3B06A 0 10px,#D97A3F 10px 13px);box-shadow:0 0 14px rgba(240,163,94,.8)}
.loading-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:loading-sheen 1.1s linear infinite}
@keyframes loading-sheen{to{transform:translateX(100%)}}
@keyframes intro-beacon{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.loading-fill:after,.intro-start:before{animation:none}}
/* Heretic final fight overlay (2026-10-26, seventh pass): sits on the battlefield canvas; the canvas draws the heretic, the
   four-way parry, weak points and hit effects. Navy panels with red only for danger. pointer-events stay off so clicks reach
   the canvas for sniping. */
.final-fight{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;padding:10px 14px 92px;pointer-events:none;color:#e8edf5;font-family:inherit}
.final-fight[hidden]{display:none}
.ff-top{display:flex;align-items:center;gap:10px;width:min(560px,100%);font-size:13px;font-weight:700}
.ff-title{letter-spacing:.06em;color:#ff8a93}
.ff-stage{padding:2px 8px;border:1px solid #4d6283;border-radius:3px;background:rgba(10,16,28,.8)}
.final-fight[data-phase="parry"] .ff-stage{border-color:#ff8a5c;color:#ffd2bf}
.final-fight[data-phase="slash"] .ff-stage{border-color:#ffd25e;color:#ffe7a3}
.final-fight[data-phase="shield"] .ff-stage{border-color:#6fb6ff;color:#bfe0ff}
.ff-time{margin-left:auto;font-size:18px;font-variant-numeric:tabular-nums}
.ff-time.is-low{color:#ff5a64}
.ff-lives{display:flex;gap:4px}
.ff-lives i{width:12px;height:12px;border:1.5px solid #ff6a74;transform:rotate(45deg);background:#e2444f}
.ff-lives i.is-lost{background:transparent;opacity:.45}
.ff-hp{position:relative;width:min(560px,100%);margin-top:6px}
.ff-hp progress{display:block;width:100%;height:14px;appearance:none;border:1px solid #2c3a52;border-radius:2px;background:#0a101b;overflow:hidden}
.ff-hp progress::-webkit-progress-bar{background:#0a101b}
.ff-hp progress::-webkit-progress-value{background:linear-gradient(90deg,#9d1c28,#ff4d5a)}
.ff-hp progress::-moz-progress-bar{background:linear-gradient(90deg,#9d1c28,#ff4d5a)}
.ff-hp span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;text-shadow:0 1px 2px #000}
.ff-bottom{display:flex;gap:14px;align-items:center;min-height:26px;margin:auto 0 6px;padding:0 10px;border-radius:3px;background:rgba(8,13,23,.65);font-weight:700}
.ff-combo{font-size:15px;color:#ffd25e}
.ff-feedback{font-size:14px}
.ff-feedback[data-tone="bad"]{color:#ff6a74}
.ff-feedback[data-tone="good"]{color:#9fdcff}
.ff-feedback[data-tone="great"]{color:#ffd25e;font-size:16px;letter-spacing:.03em}
.ff-hint{margin:0 0 8px;padding:3px 10px;border-radius:3px;background:rgba(8,13,23,.78);font-size:13px;font-weight:700}
.ff-hint b{color:#ffd25e}
/* Attack arrows: the arrow shows the direction, the letter shows the WASD key. */
.ff-arrows{display:flex;gap:8px;padding:10px 12px;border:1px solid #2c3a52;border-radius:6px;background:rgba(8,13,23,.85)}
.ff-arrows[hidden]{display:none}
.ff-arrow{position:relative;display:grid;place-items:center;width:52px;height:52px;border:2px solid #3d4f6c;border-radius:6px;background:#121b2b;color:#e8edf5}
.ff-arrow svg{width:28px;height:28px}
.ff-arrow small{position:absolute;right:4px;bottom:2px;font-size:11px;font-weight:800;color:#9fb0c8}
.ff-arrow.is-current{border-color:#ffd25e;box-shadow:0 0 0 2px #ffd25e55;transform:translateY(-3px)}
.ff-arrow.is-done{border-color:#3d7d55;background:#13291d;color:#9ee6b5}
.final-fight.is-locked .ff-arrows{opacity:.4;filter:grayscale(.6)}
/* Slash gauge: the needle bounces; Space inside red cuts, gold is a critical. */
.ff-slash{display:grid;justify-items:center;gap:8px;width:min(520px,100%);padding:10px 14px;border:1px solid #6b5a22;border-radius:8px;background:rgba(14,12,6,.88)}
.ff-slash[hidden]{display:none}
.ff-slash-title{font-size:14px;font-weight:800;color:#ffe7a3}
.ff-slash-title kbd{padding:0 6px;border:1px solid #ffd25e;border-radius:4px;font-family:inherit;font-size:12px}
.ff-gauge{position:relative;width:100%;height:28px;border:1px solid #3d4f6c;border-radius:4px;background:#0a101b}
.ff-gauge .ff-zone{position:absolute;top:0;bottom:0;background:#e2444f}
.ff-gauge .ff-crit{position:absolute;top:0;bottom:0;background:#ffd25e}
.ff-gauge .ff-needle{position:absolute;top:-8px;bottom:-8px;width:5px;margin-left:-2.5px;border-radius:2px;background:#fff;box-shadow:0 0 6px #fff}
.ff-gauge.is-in .ff-needle{background:#5ee08a;box-shadow:0 0 8px #5ee08a}
.ff-pips{display:flex;gap:10px}
.ff-pips i{width:14px;height:14px;border-radius:50%;background:#2c3a52}
.ff-pips i.is-done{background:#ffd25e;box-shadow:0 0 6px #ffd25e}
/* Shield: only the mouse is needed; the panel shows progress and time while weak points open on the canvas. */
.ff-shield{display:grid;justify-items:center;gap:5px;padding:8px 16px;border:2px solid #6fb6ff;border-radius:8px;background:rgba(8,16,32,.85);box-shadow:0 0 24px #4aa3ff55}
.ff-shield[hidden]{display:none}
.ff-shield strong{font-size:16px;color:#bfe0ff}
.ff-shield span{font-size:12px;font-weight:700}
.ff-shield progress{width:180px;height:10px;appearance:none;border:1px solid #2c4a72;border-radius:2px;background:#0a101b;overflow:hidden}
.ff-shield progress::-webkit-progress-bar{background:#0a101b}
.ff-shield progress::-webkit-progress-value{background:#6fb6ff}
.ff-shield progress::-moz-progress-bar{background:#6fb6ff}
.ff-shield-time{width:180px;height:4px;background:#1a2436}
.ff-shield-time i{display:block;height:100%;background:#ff6a74}
.ff-warning{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle,rgba(70,14,26,.6),rgba(6,10,18,.9));text-align:center}
.ff-warning[hidden]{display:none}
.ff-warning span{font-size:12px;letter-spacing:.3em;color:#ff8e97}
.ff-warning strong{font-size:30px;letter-spacing:.08em}
.ff-warning b{font-size:44px;color:#ffd25e}
.ff-attempt{font-style:normal;font-size:15px;font-weight:800;color:#ffd25e}
.ff-attempt:empty{display:none}
.ff-try{font-size:12px;color:#c9d4e6}
.ff-warning small{max-width:420px;font-size:12px;line-height:1.7;color:#c9d4e6}
.final-fight.is-hit{box-shadow:inset 0 0 60px #ff1f3399}
/* During a parry the bottom lane must stay clear: feedback and hint move to the top-left corner, off every lane. */
.final-fight[data-phase="parry"] .ff-bottom{position:absolute;left:14px;top:62px;margin:0}
.final-fight[data-phase="parry"] .ff-hint{position:absolute;left:14px;top:96px;margin:0}
@media(prefers-reduced-motion:reduce){.ff-arrow.is-current{transform:none}}
/* Effect option roll show (2026-10-27): spinning lines, grade colors, gold jackpot burst with a short frame shake. */
.legend-option-line{position:relative;transition:background .2s}
.legend-option-line[data-grade="0"] strong{color:#C9CFD6}
.legend-option-line[data-grade="1"] strong{color:#7FE09B}
.legend-option-line[data-grade="2"] strong{color:#6CBBFF}
.legend-option-line[data-grade="3"] strong{color:#D29BFF;text-shadow:0 0 8px #B46CFF88}
.legend-option-line[data-grade="4"] strong{color:#FFD45C;text-shadow:0 0 10px #FFB80099}
.legend-option-line.is-rolling strong{color:#FFFFFF;filter:blur(.6px);animation:legend-spin .11s linear infinite}
.legend-option-line.is-rolling{background:linear-gradient(90deg,#FFFFFF00,#FFFFFF14,#FFFFFF00);background-size:200% 100%;animation:legend-sweep .5s linear infinite}
.legend-option-line.just-landed{animation:legend-land .45s cubic-bezier(.2,1.6,.4,1)}
.legend-option-line.just-landed[data-grade="3"]{background:#B46CFF22}
.legend-option-line.just-landed[data-grade="4"],.legend-option-line.jackpot{background:radial-gradient(circle at 40% 50%,#FFD45C55,#FFD45C00 70%);box-shadow:inset 0 0 0 1px #FFD45C}
@keyframes legend-spin{0%{transform:translateY(-35%);opacity:.5}50%{transform:translateY(0);opacity:1}100%{transform:translateY(35%);opacity:.5}}
@keyframes legend-sweep{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes legend-land{0%{transform:scale(1.18)}60%{transform:scale(.97)}100%{transform:scale(1)}}
.legend-roll-banner{position:absolute;z-index:6;left:50%;top:42%;transform:translate(-50%,-50%);pointer-events:none;font-size:26px;font-weight:900;letter-spacing:.06em;color:#FFE27A;-webkit-text-stroke:1px #6B3B00;text-shadow:0 0 14px #FFB800,0 0 30px #FF7A00;animation:legend-banner 1.3s ease-out forwards}
@keyframes legend-banner{0%{transform:translate(-50%,-50%) scale(.3) rotate(-8deg);opacity:0}18%{transform:translate(-50%,-50%) scale(1.25) rotate(3deg);opacity:1}35%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}
.legend-spark{position:absolute;z-index:5;width:6px;height:6px;border-radius:50%;pointer-events:none;background:hsl(var(--hue) 100% 65%);box-shadow:0 0 8px hsl(var(--hue) 100% 60%);animation:legend-spark .85s ease-out forwards}
@keyframes legend-spark{from{transform:translate(-50%,-50%) scale(1.4);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2);opacity:0}}
.profile-frame.legend-jackpot{animation:legend-shake .45s cubic-bezier(.36,.07,.19,.97),legend-glow 1.4s ease-out}
@keyframes legend-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
@keyframes legend-glow{0%{box-shadow:0 0 0 2px #FFD45C,0 0 40px #FFB800}100%{box-shadow:0 0 0 0 #FFD45C00,0 0 0 #FFB80000}}
@media(prefers-reduced-motion:reduce){.legend-option-line.is-rolling,.legend-option-line.is-rolling strong,.legend-option-line.just-landed{animation:none;filter:none}}
/* Pause sits at the far right of the header buttons (user, 2026-10-27). */
.combat-header .header-actions #pause-top{order:1}
/* UR/LR fusion confirmation: a quiet link to preview the effect options (2026-10-27). */
.recipe-confirmation .recipe-effects{display:block;margin:2px auto 6px;min-height:32px;padding:4px 10px;border:1px solid #697481;border-radius:0;background:transparent;color:#C9D0D7;font-size:12px;font-weight:700}
.recipe-confirmation .recipe-effects:hover:not(:disabled){border-color:#E9EDF2;color:#FFFFFF;background:#ffffff10}
/* Credit and module pictures (2026-10-27) inline with amounts, and in the top readouts. */
.res-icon{display:inline-block;width:1.2em;height:1.2em;margin:0 .18em 0 0;vertical-align:-.25em;object-fit:contain}
img.hud-icon.res-hud{object-fit:contain;stroke:none}
/* Phones (2026-10-27): the mouse-only hints (drag, right-click, double-click) wrapped over several lines and pushed the sticky squad
   dock up over the middle of the field, where new characters land, so taps there hit the dock. */
@media(max-width:767px){.command-dock .roster-heading #field-input-help{display:none}}