/* V1.7 command interface. The battlefield remains the live 1280 × 720 canvas. */
:root { --cyan: #6addf5; --yellow: #ffd177; --radius-xl: 20px; --radius-lg: 15px; font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
body { background: #080f19; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:disabled { cursor: not-allowed; }
button, input, textarea { font-family: inherit; }
[hidden] { display: none !important; }
.primary-button { background: #8fe5f4; color: #06242f; border: 1px solid #b5f4ff; box-shadow: 0 5px 22px #63d6ed18; border-radius: 7px; }
.primary-button:hover { background: #b6f4ff; box-shadow: 0 5px 24px #64d8f52b; }
.secondary-button, .ghost-button { border-radius: 7px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; }
.command-header { position: relative; z-index: 10; height: 82px; padding: 0 4.5%; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #badfff12; background: #07121bcc; }
.command-header button { border: 0; background: none; }
.command-brand { display: flex; align-items: center; gap: 12px; text-align: left; color: #f0f8ff; font-size: 18px; font-weight: 750; letter-spacing: .13em; }
.command-brand small { display: block; color: #9ab3c7; font-size: 8px; letter-spacing: .3em; margin-top: 3px; }
.command-symbol { color: #97e8fd; font-size: 36px; line-height: 1; }
.command-header nav { display: flex; gap: 36px; margin-left: auto; margin-right: 36px; }
.command-header nav button { position: relative; padding: 29px 0; font-size: 13px; letter-spacing: .12em; color: #a5b7c9; }
.command-header nav button:hover, .command-header nav [aria-current] { color: #b8f3ff; }
.command-header nav [aria-current]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #8ceaff; }
.command-settings { color: #c9dce6; font-size: 21px; width: 40px; height: 40px; }
.command-home { min-height: 100svh; background: #060f1c; display: flex; flex-direction: column; }
.command-home .command-header { background: #06101ad9; }
.command-hero { min-height: 650px; flex: 1; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; padding: 45px 6.5% 182px; }
.command-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('../assets/riftfront-command-v170.png') center 54% / cover no-repeat; }
.command-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #06101cee, #06101c85 35%, transparent 70%), linear-gradient(0deg, #07111c 0%, transparent 35%, #060e1b20); }
.command-copy { max-width: 540px; animation: command-enter .65s ease both; }
.chapter-kicker { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .2em; color: #afdef5; margin: 0 0 22px; }
.chapter-kicker i { width: 23px; height: 1px; background: #7ed9eb; }
.command-copy h1 { margin: 0; font-size: clamp(58px, 6.5vw, 102px); font-weight: 800; line-height: 1.16; letter-spacing: .08em; text-shadow: 0 3px 28px #0005; white-space: nowrap; }
.command-copy h1 span { color: #b7eeff; }
.command-english { margin: 14px 0 27px; font-size: 12px; letter-spacing: .38em; color: #b2cbdc; }
.command-tagline { font-size: 17px; line-height: 1.9; letter-spacing: .08em; color: #a8bed1; }
.command-start { display: flex; align-items: center; gap: 26px; margin-top: 30px; }
.command-primary { min-width: 228px; padding: 16px 22px; text-align: left; display: flex; flex-direction: column; gap: 7px; }
.command-primary > span { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 19px; font-weight: 750; }
.command-primary b { font-size: 24px; font-weight: 400; }
.command-primary small { font-size: 11px; font-weight: 500; opacity: .7; }
.command-practice { border: 0; background: transparent; color: #d8e8f0; font-size: 13px; text-align: left; line-height: 1.8; }
.command-practice span { display: block; font-size: 10px; color: #8199ac; }
.command-practice:hover { color: #8fe5f4; }
.command-progress { display: flex; gap: 14px; align-items: center; max-width: 416px; margin-top: 32px; font-size: 10px; color: #7f98ac; }
.command-progress > span:first-child { display: flex; gap: 12px; align-items: baseline; white-space: nowrap; }
.command-progress b { font-size: 15px; font-weight: 600; color: #e3f2ff; }
.command-progress small { font-size: 10px; color: #8ba7b9; }
.command-progress > div { flex: 1; height: 2px; background: #b9dfff26; }
.command-progress i { display: block; height: 100%; background: #81ddf0; }
.command-stars { white-space: nowrap; }
.command-modebar { position: absolute; left: 6.5%; right: 6.5%; bottom: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; }
.command-modebar button { min-height: 106px; text-align: left; border: 0; border-top: 1px solid #9cc9e84d; padding: 16px 6px 0 0; background: transparent; transition: transform .2s, border-color .2s; animation: command-enter .65s .16s both; }
.command-modebar button:nth-child(2) { animation-delay: .23s; }.command-modebar button:nth-child(3) { animation-delay: .3s; }
.command-modebar button:hover { transform: translateY(-4px); border-color: #a6efff; }
.command-modebar span { font-size: 9px; letter-spacing: .18em; color: #8db3c7; }
.command-modebar strong { display: block; margin: 11px 0 8px; font-size: 19px; font-weight: 650; letter-spacing: .09em; }
.command-modebar strong b { float: right; color: #a3d8ef; font-size: 23px; font-weight: 400; }
.command-modebar small { color: #8daabd; font-size: 11px; }
.command-world-label { position: absolute; right: 7%; top: 28%; color: #d9efff; display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .15em; }
.command-world-label i { width: 6px; height: 6px; background: #9ae8fc; border-radius: 50%; box-shadow: 0 0 16px #7ed6ff; animation: beacon 4s infinite; }
.command-world-label small { display: block; margin-top: 7px; font-size: 8px; color: #a1b7ce; }
.command-footer { min-height: 42px; display: flex; justify-content: space-between; align-items: center; padding: 0 4.5%; font-size: 10px; letter-spacing: .05em; color: #638195; border-top: 1px solid #bce4fc10; }
.command-footer i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; background: #70cdb6; border-radius: 50%; }
.command-footer em { padding: 0 14px; opacity: .5; }
.command-atmosphere { position: absolute; inset: 10% 0 15% 55%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse, #87b5ff09, transparent 65%); animation: atmosphere 9s ease-in-out infinite alternate; }
@keyframes command-enter { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes beacon { 50% { opacity: .35; } }
@keyframes atmosphere { to { opacity: .35; transform: translateY(-18px); } }

/* Campaign, deck and expedition share readable type and a calm command shell. */
.content-main { width: min(1440px, calc(100% - 80px)); }
.campaign-heading { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin: 10px 0 30px; }
.campaign-heading h1 { font-size: 38px; margin: 10px 0 12px; letter-spacing: .08em; }
.campaign-heading p { color: #8ea6bb; margin: 0; font-size: 14px; }
.campaign-difficulty { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.campaign-difficulty > span { color: #acc1cf; font-size: 12px; }.campaign-difficulty > small { color: #7c96a9; font-size: 11px; }
.difficulty-picker { display: flex; border: 1px solid #8fbed52a; border-radius: 6px; padding: 4px; }
.difficulty-picker button { border: 0; background: transparent; color: #92aabc; font-size: 12px; padding: 9px 24px; border-radius: 3px; }
.difficulty-picker button[aria-pressed=true] { background: #8fe5f4; color: #102b3b; }
.campaign-next { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: linear-gradient(90deg, #0a192af2 25%, #0a152885 65%), url('../assets/riftfront-command-v170.png') 60% 48% / cover; padding: 30px 36px; border: 1px solid #a3d6f322; border-radius: 12px; min-height: 250px; }
.campaign-next > div:first-child { max-width: 610px; }.campaign-next > div > span { font-size: 11px; letter-spacing: .1em; color: #9fcde6; }
.campaign-next h2 { font-size: 28px; margin: 12px 0; }.campaign-next p { color: #98b4c9; font-size: 13px; line-height: 1.9; }
.campaign-next .primary-button { min-height: 43px; padding: 10px 24px; font-size: 13px; }
.campaign-completion { min-width: 180px; display: flex; flex-direction: column; gap: 14px; }.campaign-completion strong { font-size: 60px; font-weight: 500; }.campaign-completion strong small { font-size: 20px; color: #7895b0; }
.campaign-pips { display: flex; gap: 5px; }.campaign-pips i { width: 13px; height: 4px; background: #ceeaff33; }.campaign-pips .is-complete { background: #88e4ec; }
.mission-list-heading { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 14px; }.mission-list-heading h2 { font-size: 16px; margin: 0; font-weight: 600; }
.mission-list { border-top: 1px solid #a9d6ea21; }.mission-row { display: grid; grid-template-columns: 54px minmax(170px, 1.1fr) minmax(160px, 1fr) 95px 90px; gap: 22px; align-items: center; padding: 21px 18px; border-bottom: 1px solid #a9d6ea18; transition: background .18s; }
.mission-row:hover { background: #b4d9f008; }.mission-row.is-next { background: #64ccec08; }.mission-row.is-locked { opacity: .47; }
.mission-order { font-size: 24px; color: #5e809a; font-variant-numeric: tabular-nums; font-weight: 300; }.is-complete .mission-order { color: #8eddd4; }
.mission-copy small { color: #7893a9; font-size: 9px; letter-spacing: .08em; }.mission-copy h3 { font-size: 17px; margin: 7px 0; font-weight: 650; }.mission-copy p { margin: 0; font-size: 11px; color: #8da3b5; }
.boss-tag { display: inline-block; font-size: 8px; font-weight: 500; letter-spacing: .08em; color: #e1b1f7; border: 1px solid #c690de44; padding: 3px 5px; margin-left: 8px; vertical-align: middle; }
.mission-conditions span { font-size: 12px; color: #a2b8ca; }.mission-conditions small { display: block; font-size: 10px; color: #6f8b9f; margin-top: 8px; }
.mission-rating small { color: #738ea0; font-size: 11px; }.mission-row .stars { font-size: 15px; letter-spacing: 1px; }
.mission-row > button { padding: 10px; font-size: 12px; min-height: 42px; }.campaign-footnote { color: #718b9e; font-size: 11px; margin: 24px 0 0; line-height: 1.8; }
.hero-art-panel { border-radius: 12px; }.hero-art-panel .hero-copy { padding: 30px; }.hero-art-panel .hero-copy h1 { font-size: 34px; line-height: 1.35; max-width: 760px; }.hero-art-panel .hero-copy p { font-size: 13px; line-height: 1.85; max-width: 650px; }
.deck-main .hero-art-panel { min-height: 200px; }.deck-main .hero-copy { min-height: 0; }.deck-main .info-pill { font-size: 11px; }
.deck-composition { display: flex; gap: 20px; padding: 10px 16px; font-size: 11px; color: #8daebf; }.deck-composition b { color: #c4eafa; padding-left: 6px; }
.deck-advice { padding: 0 16px; margin: 0 0 14px; color: #7597aa; font-size: 11px; line-height: 1.7; }
.deck-search { display: flex; align-items: center; margin: 14px 0 10px; gap: 12px; }.deck-search input { min-width: 0; flex: 1; border: 1px solid #9dc6dd30; background: #06101c; border-radius: 5px; color: #ebf7ff; padding: 12px; font-size: 12px; }.deck-search span { font-size: 11px; color: #7999ac; white-space: nowrap; }
.deck-factions { display: flex; flex-wrap: wrap; gap: 5px; }.deck-factions button { border: 1px solid transparent; background: #ffffff05; border-radius: 4px; padding: 7px 9px; font-size: 10px; color: #92aebf; }.deck-factions [aria-pressed=true] { color: #a0e9fa; border-color: #a0e9fa55; background: #70dff510; }
.empty-library { color: #87a6b8; padding: 30px 10px; font-size: 13px; grid-column: 1 / -1; }
.deck-actions { display: flex; flex-wrap: wrap; gap: 8px; }.deck-actions button { font-size: 12px; }
.card-tile .card-desc { font-size: 11px; line-height: 1.6; }.card-tile .card-name { font-size: 14px; }.card-tile:disabled { opacity: .6; }

/* Live battlefield */
.command-battle.battle-screen { height: 100svh; min-height: 550px; display: grid; grid-template-rows: 66px 32px minmax(0, 1fr) 164px 25px; overflow: hidden; background: #060e17; }
.command-battle .battle-topbar { display: grid; grid-template-columns: 40px minmax(100px, 1fr) 176px minmax(100px, 1fr) 40px; gap: 20px; padding: 7px 16px; background: #07111b; }
.command-battle .battle-icon-button { width: 38px; height: 38px; font-size: 16px; border-radius: 6px; }
.command-battle .core-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
.command-battle .core-label { display: flex; grid-column: 1 / -1; font-size: 11px; line-height: 1.4; letter-spacing: .04em; }.command-battle .core-label b { font-size: 12px; }
.command-battle .core-bar { height: 7px; }.command-battle .outpost-dots i { width: 6px; height: 6px; }.command-battle .outpost-dots { gap: 6px; }
.command-battle .battle-title-block { grid-column: auto; grid-row: auto; min-width: 0; width: auto; display: flex; flex-direction: column; align-items: center; gap: 1px; }.command-battle .battle-title-block small { font-size: 8px; color: #83b6c9; letter-spacing: .12em; }.command-battle .battle-title-block strong { font-size: 14px; }.command-battle .battle-title-block > span { position: static; transform: none; font-size: 18px; line-height: 1; margin: 2px 0 0; color: #ffd27c; font-variant-numeric: tabular-nums; }
.command-phase { display: flex; align-items: center; padding: 0 17px; gap: 25px; position: relative; border-bottom: 1px solid #a2d4ed1c; background: #08131f; }
.phase-markers { display: flex; gap: 28px; }.phase-markers > span { font-size: 10px; color: #4f6b80; white-space: nowrap; }.phase-markers b { font-size: 12px; margin-right: 6px; }.phase-markers .is-active { color: #b9ecfa; }.phase-markers .is-past { color: #719ab0; }
.command-phase-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; opacity: .75; }.command-phase-progress i { display: block; height: 100%; background: #7eddf4; width: 0; }
.command-phase > #stage-rate { margin-left: auto; font-size: 10px; color: #e3c585; }
.command-battle .battle-layout { display: grid; grid-template-columns: minmax(0, 1fr) 224px; gap: 10px; padding: 10px 12px; min-height: 0; overflow: hidden; }
.command-battle .battlefield-column { display: flex; min-width: 0; min-height: 0; }
.command-battle .battlefield-frame { flex: 1; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 9px; overflow: hidden; border: 1px solid #89c2da32; background: #08131e; animation: command-enter .3s ease; }
.command-battle .battlefield-frame::before, .command-battle .battlefield-frame::after { display: none; }
.command-battle #battle-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; }
.command-field-label { position: absolute; top: 11px; left: 14px; right: 14px; display: flex; justify-content: space-between; gap: 20px; color: #b2d9e9; font-size: 11px; pointer-events: none; text-shadow: 0 1px 5px #000; }.command-field-label small { font-size: 9px; color: #8eafc2; }
.command-battle .battlefield-help { bottom: 9px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 94%; margin: 0; padding: 7px 13px; border-radius: 5px; background: #05111de6; border: 1px solid #c2ecff1e; font-size: 11px; color: #a0cee1; white-space: normal; text-align: center; }
.command-battle .intel-sidebar { display: flex; flex-direction: column; gap: 11px; min-height: 0; overflow-y: auto; padding: 0; border: 0; border-radius: 0; background: transparent; }
.command-battle .intel-sidebar > section { border: 1px solid #9dccdf20; border-radius: 7px; padding: 13px; background: #0a1622; box-shadow: none; }
.command-battle .intel-sidebar > section > span { display: block; color: #6e9caf; font-size: 10px; letter-spacing: .07em; margin-bottom: 8px; }.command-battle .intel-sidebar > section > strong { color: #d8edf6; font-size: 13px; line-height: 1.6; font-weight: 600; }.command-battle .intel-sidebar p { display: block; font-size: 11px; line-height: 1.8; color: #89a8bc; margin: 7px 0 0; }
.command-forecast > div { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #abcede; }.command-forecast > div i { height: 5px; width: 5px; border-radius: 50%; background: #86dfec; }.command-battle .command-forecast > strong { display: block; font-size: 28px !important; color: #ffd177 !important; font-variant-numeric: tabular-nums; margin: 6px 0; letter-spacing: .05em; }.command-forecast > small { font-size: 10px; line-height: 1.6; color: #7999af; }
.command-battle .objective-panel { flex: none; }.command-battle .selected-card-panel { flex: 1 0 auto; }.card-intel-art { float: right; width: 60px; height: 60px; object-fit: cover; border-radius: 5px; margin-left: 8px; margin-bottom: 4px; border: 1px solid #9dccdf26; }.card-intel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; clear: both; padding-top: 12px; font-size: 10px; color: #7797ac; }.card-intel-stats b { float: right; color: #beddec; font-weight: 600; }.card-intel-rule { clear: both; margin-top: 12px; padding-top: 11px; border-top: 1px solid #b9dff018; font-size: 10px; color: #6ebacd; line-height: 1.8; }
.command-battle .event-log-panel { flex: 0 0 auto; max-height: 105px; overflow: hidden; }.command-battle #battle-event-log p { font-size: 10px; margin: 5px 0 0; padding-bottom: 5px; line-height: 1.5; }
.command-battle .battle-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex-shrink: 0; }.command-battle .battle-controls button { font-size: 11px; min-height: 36px; border-radius: 5px; background: #102131; color: #accede; }
.command-battle .battle-handbar { display: grid; grid-template-columns: 180px minmax(0, 1fr) 160px; gap: 12px; padding: 10px 12px; min-height: 0; border-top: 1px solid #afd4e52a; background: #07111bdc; }
.command-battle .energy-module { display: flex; gap: 12px; padding: 9px; border: 0; background: transparent; min-width: 0; }.command-battle .energy-orb { width: 65px; height: 65px; flex: 0 0 65px; padding: 0; display: flex; justify-content: center; align-items: baseline; padding-top: 20px; border-radius: 50%; box-shadow: 0 0 0 4px #060f19, 0 0 0 5px #ffd47438, 0 0 24px #ffcf6812; }.command-battle .energy-orb span { font-size: 22px; font-weight: 750; }.command-battle .energy-orb small { font-size: 9px; }.command-battle .energy-module > div:last-child { min-width: 0; flex: 1; }.command-battle .energy-module > div:last-child > strong { font-size: 11px; color: #e5d8b0; }.command-battle .energy-module > div:last-child > small { font-size: 9px; color: #8f9286; line-height: 1.65; }.command-battle .energy-bar { height: 4px; margin: 10px 0 7px; }.is-full .energy-orb { filter: brightness(1.12); }
.command-battle .hand-container { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; overflow-y: hidden; min-width: 0; padding: 6px 3px 3px; scrollbar-width: thin; scrollbar-color: #3b6077 transparent; }
.command-battle .hand-card { display: flex; flex-direction: column; position: relative; flex: 0 0 clamp(90px, 8.5vw, 125px); min-width: 0; height: 132px; min-height: 0; margin: 0; padding: 3px 3px 7px; clip-path: none; border-radius: 7px; border: 1px solid #88b5cf42; background: #102437; touch-action: none; box-shadow: none; opacity: 1; transition: transform .15s, border-color .15s, filter .15s; }
.command-battle .hand-card::after { display: none; }.command-battle .hand-card.is-unaffordable { opacity: .57; filter: saturate(.55); }.command-battle .hand-card:hover { transform: translateY(-3px); border-color: #7ee4fd; }.command-battle .hand-card.is-selected { border-color: #a1f0ff; transform: translateY(-5px); background: #123346; box-shadow: 0 0 0 1px #99eaff, 0 0 17px #6fdaed30; }.command-battle .hand-art { display: flex; width: 100%; height: 79px; flex: 1; min-height: 0; margin: 0 0 7px; border-radius: 4px; background-size: cover; background-position: 50% 42%; border: 0; }.command-battle .hand-art.has-image { background-size: cover; }.command-battle .spell-art { align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 65%, #44c0ee25, transparent 75%), #0b1d2d; }.command-battle .spell-art b { font-size: 37px; color: #85e1f6; font-weight: 400; text-shadow: 0 0 20px #a1e8ff40; }
.command-battle .hand-cost { top: 5px; left: 5px; width: 23px; height: 25px; border-radius: 5px; font-size: 13px; background: #ffd47e; color: #352708; box-shadow: 0 2px 7px #0007; }.command-battle .hand-hotkey { top: 6px; right: 6px; border-radius: 3px; background: #05141acd; color: #a0bfce; padding: 1px 4px; font-size: 10px; }.command-battle .hand-name { font-size: 11px; font-weight: 650; color: #e0f0fa; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; }.command-battle .hand-name em { font-style: normal; font-size: 9px; color: #ffd477; }.command-battle .hand-type { font-size: 9px; color: #7798b1; margin-top: 4px; }
.command-draw { border-left: 1px solid #99d7ec18; padding-left: 12px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }.command-battle .draw-module { display: flex; flex-direction: row; padding: 0; gap: 10px; background: transparent; border: 0; align-items: center; border-radius: 0; }.command-battle .progress-ring { width: 44px; height: 44px; flex: 0 0 44px; }.command-battle .progress-ring > span { font-size: 8px; }.command-battle .progress-ring > b { font-size: 10px; }.command-draw .draw-module > div:last-child > strong { font-size: 12px; color: #a4c6d6; }.command-draw small { display: block; font-size: 9px; color: #6c8da0; margin-top: 6px; }.command-battle .archive-button { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 33px; padding: 5px 7px; border: 1px solid #c6eaff25; background: #0c1d2b; border-radius: 5px; }.command-battle .archive-button > span { font-size: 15px; color: #8ab9ce; }.command-battle .archive-button strong { font-size: 10px; color: #a6bccb; }.command-battle .archive-button > b { font-size: 10px; color: #8cd6f0; }.command-battle .archive-button kbd { display: none; }.command-battle .archive-button:disabled { opacity: .4; }
.command-keybar { display: flex; justify-content: space-between; align-items: center; padding: 0 18px; color: #546f83; font-size: 9px; border-top: 1px solid #b0dfff0b; }.command-keybar kbd { border: 0; background: transparent; padding: 0 3px; color: #8097a9; font-size: 9px; box-shadow: none; }.command-keybar > span:last-child { color: #748fa1; }
.command-battle .command-coach { top: 40px; left: 14px; padding: 12px 30px 12px 14px; width: 260px; border: 1px solid #75d8f146; border-left: 3px solid #87e5fb; background: #081823ed; border-radius: 5px; box-shadow: 0 5px 15px #0003; pointer-events: auto; }.command-battle .command-coach > span { display: block; margin-bottom: 8px; color: #78b5c9; font-size: 9px; }.command-coach > span > b { margin-left: 10px; color: #a2e8ff; }.command-coach > strong { font-size: 12px; font-weight: 600; }.command-battle .command-coach p { font-size: 10px; line-height: 1.7; color: #97b6ca; margin: 6px 0 0; }.command-coach > button { position: absolute; right: 5px; top: 5px; border: 0; background: transparent; color: #7e9faf; font-size: 18px; width: 26px; height: 26px; }
.command-boss { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: min(320px, 43%); padding: 10px 13px; border: 1px solid #c689ee55; border-radius: 5px; background: #130d24e0; pointer-events: none; }.command-boss > div { display: flex; justify-content: space-between; font-size: 10px; color: #e3b1fb; margin-bottom: 7px; }.command-boss > i { display: block; height: 4px; background: #d7acff19; }.command-boss > i b { display: block; height: 100%; background: #d299f1; transition: width .1s; }
.command-battle .battle-banner-stack { top: 25%; width: min(420px, 74%); left: 50%; transform: translateX(-50%); }.command-battle .battle-banner { padding: 11px 16px; border-radius: 5px; }.command-battle .battle-banner strong { font-size: 15px; }.command-battle .battle-banner span { font-size: 11px; line-height: 1.6; }
.core-danger { pointer-events: none; position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 38px #ff51484d; transition: opacity .3s; }.is-core-danger .core-danger { opacity: 1; }.is-core-danger .player-core-hud .core-label { color: #ff9285; }
.hand-drag-ghost { font-size: 12px; }.hand-drag-ghost .hand-art { min-height: 60px; }
.command-battle .hand-card { touch-action: pan-x; }

/* Ready, pause and debrief are complete keyboard-operable states. */
.modal-card { border-radius: 15px; background: linear-gradient(145deg, #122538, #081321 85%); border: 1px solid #afd5f032; box-shadow: 0 30px 100px #0008; }.modal-card h2 { font-size: 30px; letter-spacing: .05em; }.modal-card > p { font-size: 13px; line-height: 1.9; color: #9db6c9; }.modal-card .modal-actions button { min-height: 44px; font-size: 13px; }.modal-card > small { display: block; font-size: 11px; line-height: 1.8; color: #688a9f; }
.command-ready { width: min(680px, 94vw); padding: 36px; }.command-ready h2 { margin: 12px 0 14px; }.ready-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0; border-top: 1px solid #abd6ec20; padding-top: 23px; }.ready-steps b { display: block; font-size: 25px; font-weight: 300; color: #70bed6; margin-bottom: 12px; }.ready-steps strong { display: block; font-size: 14px; margin-bottom: 8px; font-weight: 600; }.ready-steps span { font-size: 11px; color: #8aa6bd; line-height: 1.7; }.ready-details { display: flex; gap: 15px; justify-content: space-between; font-size: 11px; color: #718ea4; padding: 13px 0; border-top: 1px solid #b4d7f019; border-bottom: 1px solid #b4d7f019; }.command-ready .modal-actions { margin: 24px 0 18px; }
.command-pause { width: min(450px, 94vw); padding: 36px; }.command-pause h2 { margin: 14px 0; }.pause-summary { display: flex; justify-content: space-between; gap: 12px; color: #92b4c9; font-size: 11px; padding: 18px 0; border-top: 1px solid #a5d1eb24; border-bottom: 1px solid #a5d1eb24; margin: 24px 0; }.pause-summary b { font-weight: 500; color: #cebb8c; }.pause-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }.pause-actions button { min-height: 46px; font-size: 13px; }.pause-actions kbd { font-size: 10px; border: 0; color: #16394b; background: #07152112; margin-left: 10px; }
.command-result { width: min(620px, 94vw); padding: 28px 36px; }.command-result .result-emblem { font-size: 54px; width: 76px; height: 76px; border: 1px solid #7ae0e536; background: #6de0f308; color: #92e7f6; box-shadow: 0 0 35px #78d2f015; }.command-result.defeat .result-emblem { color: #d9c59b; border-color: #d9c59b40; }.command-result h2 { margin-bottom: 14px; }.command-result .result-stats { border-top: 1px solid #9ad2e327; border-bottom: 1px solid #9ad2e327; border-radius: 0; padding: 20px 0; margin: 24px 0 16px; background: transparent; }.command-result .result-stats > div { padding: 0; border: 0; background: transparent; }.command-result .result-stats span { font-size: 10px; color: #829db0; }.command-result .result-stats strong { font-size: 23px; margin-top: 8px; font-weight: 600; }.command-result .result-stats small { font-size: 13px; }.command-result .result-tip { font-size: 12px; color: #8eb1c6; }.command-result .result-reward { padding: 12px 15px; background: #65dbc907; border: 1px solid #73e9d51f; border-radius: 6px; margin: 18px 0; }.command-result .result-reward p { font-size: 11px; }.command-result .result-star-rule { margin-top: 18px; font-size: 10px; }
.setting-volume { display: flex; flex-direction: column; gap: 16px; padding: 20px 0; }.setting-volume > span { font-size: 13px; }.setting-volume b { float: right; font-size: 12px; color: #7dddeb; }.setting-volume input { width: 100%; accent-color: #80dce8; }.settings-modal .setting-row small { font-size: 11px; }
.dialogue-modal .dialogue-text { font-size: 17px; line-height: 1.9; }.modal-backdrop { background: #020713b8; backdrop-filter: blur(7px); }

@media (min-width: 1500px) and (min-height: 950px) { .command-battle.battle-screen { grid-template-rows: 72px 34px minmax(0, 1fr) 185px 27px; }.command-battle .battle-layout { grid-template-columns: minmax(0, 1fr) 245px; }.command-battle .hand-card { height: 151px; flex-basis: 136px; }.command-battle .hand-name { font-size: 12px; }.command-battle .energy-module { gap: 18px; }.command-battle .battle-handbar { grid-template-columns: 200px minmax(0, 1fr) 176px; } }
@media (max-width: 1100px) { .command-battle .battle-layout { grid-template-columns: minmax(0, 1fr) 186px; }.command-battle .battle-handbar { grid-template-columns: 146px minmax(0, 1fr) 128px; gap: 8px; }.command-battle .energy-orb { width: 52px; height: 52px; flex-basis: 52px; padding-top: 15px; }.command-battle .energy-orb span { font-size: 18px; }.command-battle .energy-module { gap: 9px; padding: 7px; }.command-battle .event-log-panel { display: none; }.command-battle .hand-card { flex-basis: 103px; }.command-draw { padding-left: 8px; }.command-battle .draw-module { gap: 7px; }.command-battle .command-coach { width: 225px; }.command-world-label { display: none; }.mission-row { grid-template-columns: 38px minmax(140px, 1fr) minmax(150px, .8fr) 70px 75px; gap: 15px; } }
@media (max-width: 900px) { .command-battle .battle-layout { grid-template-columns: minmax(0, 1fr); }.command-battle .intel-sidebar { display: none; }.command-battle .battle-topbar { gap: 12px; grid-template-columns: 34px minmax(65px, 1fr) 135px minmax(65px, 1fr) 34px; padding: 7px 10px; }.command-battle .battle-icon-button { width: 32px; height: 34px; }.command-battle .battle-title-block strong { font-size: 13px; }.command-header nav { gap: 20px; margin-right: 12px; }.content-main { width: calc(100% - 36px); }.mission-row { grid-template-columns: 38px 1fr 70px 75px; }.mission-conditions { display: none; }.command-hero { padding-left: 7%; padding-top: 45px; }.command-tagline { font-size: 15px; }.command-start { gap: 20px; }.command-modebar { left: 7%; right: 7%; gap: 25px; }.command-modebar strong { font-size: 17px; }.command-modebar small { font-size: 10px; }.command-header { height: 68px; }.command-header nav button { padding: 23px 0; } }
@media (max-width: 600px) { .command-header { padding: 0 18px; gap: 8px; height: 62px; }.command-brand { font-size: 15px; gap: 7px; }.command-symbol { font-size: 27px; }.command-brand small { font-size: 7px; }.command-header nav { gap: 16px; margin: 0 4px 0 auto; }.command-header nav button { font-size: 11px; padding: 22px 0; letter-spacing: 0; }.command-settings { width: 28px; font-size: 18px; }.command-hero { min-height: 680px; padding: 38px 24px 220px; justify-content: flex-start; }.command-hero::before { background-position: 62% center; }.command-hero::after { background: linear-gradient(90deg, #06101ce3, #06101c59), linear-gradient(0deg, #07111c 3%, transparent 60%); }.command-copy h1 { font-size: 57px; }.chapter-kicker { font-size: 10px; margin-bottom: 20px; }.command-english { font-size: 9px; letter-spacing: .28em; margin: 13px 0 25px; }.command-tagline { font-size: 14px; }.command-start { gap: 15px; flex-wrap: wrap; margin-top: 28px; }.command-primary { min-width: 206px; padding: 14px 18px; }.command-primary > span { font-size: 17px; }.command-practice { font-size: 11px; }.command-practice span { font-size: 9px; }.command-progress { margin-top: 27px; }.command-modebar { bottom: 18px; left: 24px; right: 24px; grid-template-columns: 1fr; gap: 0; }.command-modebar button { min-height: 54px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4px 10px; padding: 10px 0; }.command-modebar span { display: none; }.command-modebar strong { margin: 0; font-size: 15px; }.command-modebar strong b { float: none; font-size: 16px; margin-left: 10px; }.command-modebar small { text-align: right; font-size: 9px; }.command-footer { padding: 12px 18px; font-size: 8px; gap: 12px; }.command-footer em { padding: 0 6px; }.campaign-heading { align-items: flex-start; flex-direction: column; gap: 22px; }.campaign-heading h1 { font-size: 32px; }.campaign-difficulty { align-items: flex-start; }.campaign-next { padding: 23px; min-height: 0; }.campaign-next h2 { font-size: 25px; }.campaign-completion { display: none; }.mission-row { grid-template-columns: 29px minmax(0, 1fr) 66px; gap: 12px; padding: 17px 4px; }.mission-rating { display: none; }.mission-copy h3 { font-size: 15px; }.mission-copy p { font-size: 10px; }.mission-order { font-size: 20px; }.mission-row > button { font-size: 11px; padding: 8px; }.hero-art-panel .hero-copy { padding: 22px; }.hero-art-panel .hero-copy h1 { font-size: 27px; }.hero-art-panel .hero-copy p { font-size: 12px; }
  .command-battle.battle-screen { height: 100svh; min-height: 650px; grid-template-rows: 69px 27px minmax(220px, 1fr) 206px 27px; }.command-battle .battle-topbar { grid-template-columns: 28px 1fr 103px 1fr 28px; gap: 8px; padding: 6px 7px; }.command-battle .battle-icon-button { width: 27px; height: 34px; font-size: 14px; }.command-battle .core-hud { display: grid; gap: 6px 3px; }.command-battle .core-label { font-size: 8px; flex-wrap: wrap; gap: 3px; }.command-battle .core-label b { font-size: 10px; }.command-battle .outpost-dots { display: none; }.command-battle .core-bar { grid-column: 1 / -1; height: 5px; }.command-battle .battle-title-block small { font-size: 7px; }.command-battle .battle-title-block strong { font-size: 12px; }.command-battle .battle-title-block > span { font-size: 17px; }.command-phase { padding: 0 9px; gap: 10px; }.phase-markers { gap: 16px; }.phase-markers > span { font-size: 8px; }.phase-markers b { font-size: 9px; margin-right: 2px; }.command-phase > #stage-rate { font-size: 8px; }.command-battle .battle-layout { padding: 5px; gap: 0; }.command-battle .battlefield-frame { border-radius: 5px; }.command-field-label { font-size: 9px; left: 9px; right: 9px; top: 8px; }.command-field-label small { font-size: 8px; }.command-battle .battlefield-help { font-size: 9px; padding: 5px 8px; bottom: 6px; }.command-battle .battle-handbar { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 47px minmax(0, 1fr); padding: 6px 8px; gap: 2px 12px; }.command-battle .energy-module { order: 0; padding: 3px 4px; gap: 9px; }.command-battle .energy-orb { width: 36px; height: 36px; flex-basis: 36px; padding-top: 9px; box-shadow: 0 0 0 2px #060f19, 0 0 0 3px #ffd47438; }.command-battle .energy-orb span { font-size: 13px; }.command-battle .energy-orb small { font-size: 7px; }.command-battle .energy-module > div:last-child > strong { font-size: 10px; }.command-battle .energy-module > div:last-child > small { display: none; }.command-battle .energy-bar { margin: 7px 0 0; height: 3px; }.command-draw { order: 1; grid-column: 2; grid-row: 1; display: flex; flex-direction: row; align-items: center; gap: 10px; border-left: 0; padding: 0; }.command-battle .draw-module { gap: 7px; }.command-battle .progress-ring { height: 32px; width: 32px; flex-basis: 32px; }.command-battle .progress-ring > span { display: none; }.command-battle .progress-ring > b { font-size: 9px; }.command-draw .draw-module > div:last-child { display: none; }.command-battle .archive-button { flex: 1; min-height: 30px; gap: 5px; padding: 4px 6px; }.command-battle .archive-button strong, .command-battle .archive-button > b { font-size: 9px; }.command-battle .hand-container { order: 2; grid-column: 1 / -1; gap: 7px; padding: 8px 2px 5px; }.command-battle .hand-card { flex-basis: 93px; height: 132px; }.command-battle .hand-name { font-size: 10px; }.command-keybar { padding: 0 8px; font-size: 8px; }.command-keybar > span:first-child { display: none; }.command-keybar::before { content: '点击选牌 → 点击战场部署'; }.command-battle .command-coach { top: 29px; left: 8px; width: 196px; padding: 8px 24px 8px 10px; }.command-battle .command-coach p { display: none; }.command-battle .command-coach > span { margin-bottom: 4px; font-size: 8px; }.command-coach > strong { font-size: 10px; }.command-boss { top: 29px; width: 43%; left: auto; right: 8px; transform: none; padding: 7px; }.command-boss > div { font-size: 8px; }.command-boss > div span { max-width: 82%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.command-battle .battle-banner strong { font-size: 13px; }.command-battle .battle-banner span { font-size: 10px; }
  .command-ready, .command-pause, .command-result { padding: 25px 22px; }.modal-card h2 { font-size: 25px; }.ready-steps { gap: 12px; margin: 23px 0; }.ready-steps strong { font-size: 12px; }.ready-steps span { font-size: 10px; }.ready-details { font-size: 10px; gap: 8px; }.command-result .result-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }.command-result .result-star-rule { font-size: 9px; }.modal-positioner { padding: 12px; }
}
@media (max-height: 650px) and (min-width: 601px) { .command-battle.battle-screen { min-height: 360px; grid-template-rows: 52px 25px minmax(0, 1fr) 112px 0; }.command-battle .battle-handbar { padding: 4px 8px; grid-template-columns: 128px minmax(0, 1fr) 115px; gap: 7px; }.command-battle .hand-card { height: 99px; flex-basis: 89px; padding-bottom: 5px; }.command-battle .hand-art { margin-bottom: 3px; }.command-battle .hand-type { display: none; }.command-battle .hand-name { font-size: 10px; }.command-battle .hand-cost { width: 21px; height: 22px; font-size: 12px; }.command-battle .battle-layout { padding: 4px 8px; }.command-keybar { display: none; }.command-battle .energy-module > div:last-child > small { display: none; }.command-battle .energy-orb { width: 44px; height: 44px; flex-basis: 44px; padding-top: 12px; }.command-battle .energy-orb span { font-size: 16px; }.command-battle .energy-module > div:last-child > strong { font-size: 10px; }.command-battle .command-coach { padding: 8px 28px 8px 10px; top: 30px; }.command-battle .command-coach p { display: none; }.command-battle .battle-title-block > span { font-size: 15px; }.command-battle .battle-title-block small { display: none; }.command-battle .battle-title-block strong { font-size: 12px; }.command-battle .battlefield-help { font-size: 9px; padding: 4px 8px; bottom: 5px; }.command-battle .draw-module > div:last-child { display: none; }.command-battle .draw-module { justify-content: center; }.command-battle .command-draw { gap: 6px; }.command-ready { padding: 23px 28px; }.command-ready h2 { margin: 8px 0; font-size: 25px; }.ready-steps { margin: 16px 0; padding-top: 13px; }.ready-steps b { display: none; }.command-ready .modal-actions { margin: 14px 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

.hero-art-panel.command-deck-hero { background: linear-gradient(90deg, #071725f5 28%, #07172570), url('../assets/riftfront-command-v170.png') center 54% / cover; min-height: 220px; }
.hero-art-panel .info-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-art-panel .info-pill { padding: 5px 9px; font-size: 10px; color: #99becf; background: #07172580; border: 1px solid #90cce329; border-radius: 4px; }
.rogue-difficulty { display: flex; gap: 16px; align-items: center; margin-top: 18px; }
.rogue-difficulty > span { color: #9bbacc; font-size: 11px; }
.library-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: center; }
.library-heading > div:first-child strong { font-size: 12px; line-height: 1.6; margin-top: 7px; font-weight: 500; }
.library-heading .filter-tabs { flex-wrap: nowrap; white-space: nowrap; }
.library-heading .deck-search, .library-heading .deck-factions { grid-column: 1 / -1; }
.library-heading .deck-search { margin: 0; width: 100%; }
.library-heading .deck-search input { min-width: 0; flex: 1; }
.library-heading .deck-factions { margin: 0; gap: 8px; }
.card-tile:disabled { opacity: .86; filter: none; }
@media (max-width: 600px) { .library-heading { grid-template-columns: 1fr; }.library-heading .filter-tabs { justify-self: start; }.hero-art-panel.command-deck-hero { min-height: 240px; } }

/* On a tall touch screen, use the spare height for useful card information. */
@media (max-width: 600px) and (min-height: 700px) {
  .command-battle .battle-layout { grid-template-rows: minmax(0, 1fr) 110px; gap: 5px; }
  .command-battle .intel-sidebar { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 10px; overflow: hidden; padding: 8px 9px; border: 1px solid #a6d7ed20; border-radius: 5px; }
  .command-battle .command-forecast { padding: 4px 0; border: 0; }
  .command-battle .command-forecast > div { font-size: 9px; line-height: 1.6; }
  .command-battle .command-forecast > strong { font-size: 25px; margin: 8px 0 0; }
  .command-battle .command-forecast > small, .command-battle .objective-panel, .command-battle .event-log-panel, .command-battle .battle-controls { display: none; }
  .command-battle .selected-card-panel { padding: 4px 0 4px 10px; border: 0; border-left: 1px solid #a6d7ed20; overflow: auto; }
  .command-battle .selected-card-panel > span { font-size: 8px; }
  .command-battle .selected-card-panel > strong { font-size: 12px; margin: 5px 0; }
  .command-battle .selected-card-panel > p { font-size: 10px; line-height: 1.6; margin: 4px 0; }
  .command-battle .card-intel-art, .command-battle .card-intel-stats, .command-battle .card-intel-rule { display: none; }
}