/* Shared finishing layer: restrained colour, readable decisions, comfortable input. */
:root{--ui-surface:#111a23;--ui-line:#aecbd026;--ui-muted:#adbeca;--type-unit:#99ded5;--type-spell:#bfb1ee;--type-aura:#eed199;--type-trap:#efaaa0;--type-reflex:#9cc9ed}
button,input,select{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #c1fff2;outline-offset:3px}
button:disabled{cursor:default}
.exp-button,.end-turn,.exp-party-card,.exp-reward-card,.exp-path-choice{touch-action:manipulation}
.exp-icon-button,.icon-button,.modal-close{position:relative}
.exp-icon-button:before,.icon-button:before,.modal-close:before{content:"";position:absolute;inset:-5px;min-width:40px;min-height:40px}
.toast{z-index:250;max-width:calc(100vw - 32px);text-align:center;line-height:1.4;pointer-events:none}

/* Card roles stay distinct even when a hand overlaps. */
.battle-card[data-card-type="unit"]{--card-accent:var(--type-unit)}
.battle-card[data-card-type="spell"]{--card-accent:var(--type-spell)}
.battle-card[data-card-type="aura"]{--card-accent:var(--type-aura)}
.battle-card[data-card-type="trap"]{--card-accent:var(--type-trap)}
.battle-card[data-card-type="reflex"]{--card-accent:var(--type-reflex)}
.battle-card .card-face{box-shadow:inset 0 -3px var(--card-accent,var(--mint))}
.game-battle .hand .card-face .card-type{color:var(--card-accent);border:1px solid var(--card-accent);font-size:6.5px;letter-spacing:.5px}
.game-battle .hand .battle-card.unaffordable{opacity:1;filter:none}
.game-battle .hand .battle-card.unaffordable .cost{color:#f3b7ad;background:#482932}
.game-battle .hand .battle-card.selected{border-color:#cefff0}
.game-battle .status-chips{flex-wrap:wrap;max-width:calc(100% - 20px)}
.game-battle .unit-caption strong{line-height:1.12;text-wrap:balance;overflow-wrap:break-word}
.game-battle .support-slot.armed small{color:#dbebe8}
.game-battle .support-slot.face-down{border:1px dashed #b4abc04d}
.game-battle .target-zone.legal-target{outline:2px solid #baffdc;outline-offset:-2px;box-shadow:inset 0 0 20px #90eed020}
.game-battle .target-zone.legal-target.drop-hover{outline-color:#fff;box-shadow:inset 0 0 30px #90eed057}
.game-battle .target-zone.move-source{outline:2px dashed #e9d19b;outline-offset:-3px}

/* The divider owns all phase feedback; card art never overlaps its text. */
.arena-content{--phase-row:50px}
.combat-phase-rail{display:flex;gap:3px;list-style:none;margin:0 0 3px;padding:0;width:min(100%,310px);align-self:center}
.combat-phase-rail li{flex:1;white-space:nowrap;color:#a8b8c9;font-size:6px;letter-spacing:.25px;line-height:1.3;padding:4px 2px;border-top:2px solid #bacada26}
.combat-phase-rail li[aria-current]{border-color:var(--mint);color:#c5fff0;background:#8edac90d}
.combat-phase-rail li:nth-child(n+3)[aria-current]{border-color:#f0a1ae;color:#ffc2cc}
.game-battle .battle-divider>div{width:min(100%,460px);gap:2px;min-width:0}
.game-battle .battle-divider>i{flex:1;min-width:0}
.game-battle #phase-label{font-size:10px;letter-spacing:1.6px;line-height:1.25}
.game-battle #phase-hint{font-size:8px;line-height:1.3;max-width:100%;text-wrap:balance}
.game-battle .clash-tally{line-height:17px}
.game-battle .clash-tally b{color:#ffdda2;text-shadow:0 0 12px #ffc86a30}
.game-battle .hand-section{grid-template-rows:24px minmax(0,1fr) 38px;gap:2px}
.game-battle .hand-heading{gap:6px;font-size:9px;min-width:0}
.battle-journal-button{display:flex;gap:5px;align-items:center;justify-content:center;border:1px solid var(--ui-line);background:#18222b;color:#bdcdd6;min-height:27px;padding:4px 7px;border-radius:7px;font-size:8px;margin-left:auto}
.battle-journal-button .exp-icon{width:12px;height:12px}
.game-battle .selection-help{height:38px;min-height:38px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:9px;overflow:visible;padding:0 2px}
.selection-help:has(.selected-card-detail){background:#111d28;border:1px solid var(--ui-line);border-radius:10px;padding:3px 4px 3px 10px}
.game-battle .selection-help button{position:static;transform:none;flex-shrink:0;height:30px;min-width:30px;background:#ffffff06;border:1px solid var(--ui-line);border-radius:7px;color:#d4e7e6;padding:5px 7px;font-size:10px;display:flex;align-items:center;justify-content:center;gap:4px}
.game-battle .selection-help .selected-card-detail{flex:1;min-width:0;justify-content:space-between;padding:0;border:0;background:transparent;text-align:left}
.selected-card-detail b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#effaf7}
.selected-card-detail span{display:flex;align-items:center;gap:3px;font-size:8px;color:var(--mint)}
.selection-help .exp-icon{width:13px;height:13px;flex-shrink:0}
.game-battle .selection-help .tap-burn{color:#f1c392;border-color:#e7ad6945;white-space:nowrap}
.game-battle .selection-help .tap-burn:disabled{opacity:.38}

/* Fullscreen dialogs share settings and spacing on the ship and in combat. */
.settings-overlay,.battle-journal-overlay{z-index:150}
.utility-modal{width:min(480px,100%);max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:30px 22px 20px;border-radius:22px;background:var(--ui-surface);border:1px solid var(--ui-line);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px;text-align:left}
.utility-modal h2{font-size:25px;line-height:1.12;letter-spacing:-.7px;margin:0 24px 0 0}
.utility-modal p{margin:0}
.utility-note{font-size:11px!important;line-height:1.5!important;color:var(--ui-muted)}
.utility-actions{display:flex;gap:10px;align-items:center}
.utility-actions>button{flex:1;min-height:42px;font-size:11px}
.utility-actions .exp-icon{width:16px;height:16px}
.game-preferences{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;flex-shrink:0;text-align:left}
.game-preferences .preference-toggle{border:1px solid var(--ui-line);background:#1b2630;border-radius:11px;padding:11px 12px;min-height:44px;display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:11px;color:#dbe8ed;text-align:left}
.game-preferences .preference-toggle b{font-size:10px;color:#b0b8c6}
.game-preferences .preference-toggle[aria-pressed="true"] b{color:var(--mint)}
.preference-slider{display:flex;flex-direction:column;gap:10px;grid-column:1/-1;border:1px solid #acbecd18;border-radius:11px;background:#0d151c;padding:10px 12px;color:#b5c7d0;font-size:11px}
.preference-slider>span{display:flex;justify-content:space-between;align-items:center}
.preference-slider output{font-variant-numeric:tabular-nums;color:#e1f2f1}
.preference-slider input{width:100%;height:22px;accent-color:#98e1d9;margin:0;cursor:pointer;touch-action:pan-x}
.preference-note{grid-column:1/-1;color:var(--ui-muted);font-size:10px}
.exp-modal:is(.modal-pause,.modal-settings) .exp-dialog-body{overflow-y:auto;justify-content:flex-start;gap:12px}
.exp-modal:is(.modal-pause,.modal-settings) .exp-space-icon{display:none}
.exp-modal:is(.modal-pause,.modal-settings) .exp-pause-menu{flex-shrink:0}
.exp-modal:is(.modal-pause,.modal-settings) .game-preferences{order:0}
.exp-modal:is(.modal-pause,.modal-settings) .exp-dialog-body h2{flex-shrink:0}

.battle-journal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.battle-journal-stats>div{padding:12px;background:#1d2a34;border-radius:10px;display:flex;flex-direction:column;gap:5px}
.battle-journal-stats b{font-size:23px;color:var(--mint);font-variant-numeric:tabular-nums}
.battle-journal-stats span{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--ui-muted)}
.battle-journal-list{margin:0;min-height:70px;max-height:35dvh;overflow-y:auto;list-style:none;padding:0;scrollbar-width:thin;overscroll-behavior:contain}
.battle-journal-list li{font-size:12px;line-height:1.5;padding:10px 0;border-bottom:1px solid var(--ui-line);color:#c6d8e0}
.battle-journal-list li:first-child{color:#e0fff4}
.inspect-status-list{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;list-style:none;padding:0;margin:8px 0}
.inspect-status-list li{font-size:10px;padding:5px 8px;background:#25313e;border:1px solid #9fb6c340;border-radius:6px;color:#d5e4f1}
.modal.inspection{overflow-y:auto;overscroll-behavior:contain}

/* Deck composition is shared by both deck editors. Counts refer to designs. */
.deck-profile{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:4px 10px;text-align:left;align-items:center;flex-shrink:0;padding:9px 12px;border-radius:10px;background:#0a151dbf;border:1px solid var(--ui-line)}
.deck-profile>div:first-child{font-size:10px;color:#b3c7d1;line-height:1.5}
.deck-profile>div:first-child b{color:#d6f7eb}
.deck-profile>div:first-child span{padding:0 3px;opacity:.6}
.deck-profile>small{font-size:8px;color:#8fa4b0;grid-column:1;grid-row:2}
.deck-curve{grid-column:2;grid-row:1/3;display:flex;gap:5px;align-self:stretch;min-height:31px}
.deck-curve>span{flex:1;position:relative;background:#132936;border-radius:3px;overflow:hidden;display:flex;flex-direction:column-reverse;align-items:center;justify-content:space-between;padding:3px 0}
.deck-curve i{position:absolute;inset:auto 0 0;height:var(--fill);background:#83d6c733}
.deck-curve b,.deck-curve small{position:relative;font-size:7px;line-height:1;color:#c9e9e5}
.exp-deck-columns,.practice-deck-list{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.exp-deck-row,.practice-deck-row{min-height:48px}
.exp-modal.modal-decks{overflow-y:auto}
.exp-reward-card.unrevealed:not(:disabled){border-color:#dbfff2;box-shadow:0 0 0 2px #9ce7d523,0 5px 20px #060d1540}
.exp-reward-card.unrevealed:disabled{opacity:.6}
.exp-dialog-body .exp-card-info b{letter-spacing:.45px}
.exp-reward-note{color:#bac9d5!important}
.exp-map-tools .exp-icon-button{width:38px;min-height:38px}
.exp-map-dock{padding-bottom:max(9px,env(safe-area-inset-bottom))}
.exp-path-choice:focus-visible{outline-offset:2px}
.exp-party-card.downed{filter:grayscale(.7)}
.exp-map-page .exp-board-viewport{top:0}

@media(min-width:650px) and (min-height:650px){
 .arena-content{--phase-row:62px}.game-battle #phase-label{font-size:13px}.game-battle #phase-hint{font-size:10px}
 .combat-phase-rail li{font-size:8px}.game-battle .selection-help{font-size:11px}
 .game-battle .selected-card-detail b{font-size:12px}.selected-card-detail span{font-size:10px}
}
@media(max-width:380px){
 .game-battle .top{gap:8px}.game-battle .top-controls{gap:4px}
 .game-battle .wordmark{font-size:13px}.game-battle .icon-button{width:30px;min-width:30px;height:32px}
 .game-battle .hand-heading{font-size:8px}.battle-journal-button{font-size:7px;padding-inline:5px}
 .deck-profile{grid-template-columns:minmax(0,1fr) 76px;padding:7px 9px}.deck-profile>div:first-child{font-size:9px}
 .game-preferences .preference-toggle{padding:10px 9px;font-size:10px}
}
@media(max-height:650px) and (max-aspect-ratio:4/3){
 .arena-content{--phase-row:51px}.combat-phase-rail li{padding:2px 1px;font-size:5px}
 .game-battle #phase-label{font-size:9px}.game-battle #phase-hint{font-size:7px}
 .game-battle .hand-section{grid-template-rows:20px minmax(0,1fr) 34px}
 .game-battle .selection-help{height:34px;min-height:34px}
}
/* Give the board room on short landscape screens; the hand sits beside it. */
@media(min-aspect-ratio:4/3) and (max-height:600px){
 .game-battle .battle-main{grid-template-columns:minmax(0,1fr) minmax(230px,38%)!important;grid-template-rows:minmax(0,1fr)!important;gap:10px}
 .game-battle .hand-section{grid-template-rows:24px minmax(0,1fr) 38px;align-self:stretch}
 .arena-content{--phase-row:48px}.combat-phase-rail li{font-size:5px;padding:2px 1px}
 .game-battle #phase-label{font-size:9px}.game-battle #phase-hint{font-size:7px}
 .game-battle .hand-heading>span{font-size:8px}.battle-journal-button span{font-size:7px}
 .game-battle .selected-card-detail b{font-size:9px}.selected-card-detail span{display:none}
 .utility-modal{width:min(580px,100%)}.game-preferences .preference-slider{grid-column:auto}
 .exp-map-tools .exp-icon-button{width:32px;min-height:32px}
}
@media(prefers-reduced-motion:reduce){button{scroll-behavior:auto}.combat-phase-rail li{transition:none}}
.calm-motion .combat-phase-rail li{transition:none}

/* A saved toss, presented as a clean two-faced coin. */
.coin-flip{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:24px;background:rgba(7,12,19,.92);backdrop-filter:blur(12px);isolation:isolate}
.coin-flip-content{width:min(100%,420px);text-align:center;color:#edf5f7}
.coin-flip .eyebrow{color:#e7cc91;letter-spacing:.28em;font-size:11px}
.coin-flip h2{font-size:clamp(28px,6vw,40px);margin:12px 0 8px}
.coin-stage{height:250px;position:relative;display:grid;place-items:center;perspective:900px}
.battle-coin{position:relative;width:136px;height:136px;transform-style:preserve-3d;animation:battle-coin-toss var(--toss-time) cubic-bezier(.2,.6,.3,1) both}
.coin-face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;border:7px solid #d9b978;background:#143b3e;box-shadow:inset 0 0 0 3px #f4dda5,inset 0 0 0 9px #143b3e,inset 0 0 0 10px #ad9360,0 14px 35px #0005;backface-visibility:hidden;color:#a9ece0}
.coin-face b{font-size:52px;line-height:1}.coin-face span{font-size:9px;font-weight:800;letter-spacing:.15em}
.coin-face.tails{transform:rotateY(180deg);background:#442533;color:#ffa9ba;box-shadow:inset 0 0 0 3px #f4dda5,inset 0 0 0 9px #442533,inset 0 0 0 10px #ad9360,0 14px 35px #0005}
.coin-shadow{position:absolute;width:100px;height:17px;border-radius:50%;background:#0008;filter:blur(5px);bottom:26px;animation:coin-shadow-pulse var(--toss-time) ease-in-out both}
.coin-result{display:block;min-height:30px;font-size:21px;color:#e7cc91}.coin-flip.ally-first .coin-result{color:#a0e6dc}.coin-flip.enemy-first .coin-result{color:#ffa9ba}
.coin-rule{font-size:14px;color:#aebfc8;line-height:1.6;margin:12px 0 24px}.coin-continue{width:100%;min-height:54px;justify-content:center}
.coin-flip.landed .battle-coin{animation:none;transform:rotateY(var(--landing))}.coin-flip.landed .coin-shadow{animation:none;transform:scale(1);opacity:1}
@keyframes battle-coin-toss{0%{transform:translateY(20px) rotateY(0deg) scale(.8)}35%{transform:translateY(-70px) rotateY(900deg) rotateZ(-12deg) scale(1.08)}75%{transform:translateY(-20px) rotateY(1530deg) rotateZ(5deg)}100%{transform:translateY(0) rotateY(var(--landing))}}
@keyframes coin-shadow-pulse{0%,100%{transform:scale(1);opacity:.8}35%{transform:scale(.4);opacity:.3}}
.coin-flip.calm .battle-coin,.coin-flip.calm .coin-shadow{animation:none}
@media(prefers-reduced-motion:reduce){.battle-coin,.coin-shadow{animation:none}}
@media(max-height:520px){.coin-stage{height:170px}.battle-coin{width:110px;height:110px}.coin-flip h2{font-size:24px;margin:6px 0}.coin-rule{margin:8px 0 14px}.coin-face b{font-size:38px}}

/* Audio attribution remains available in both settings panels. */
.audio-credits-link{grid-column:1/-1;display:block;padding:12px 2px;color:var(--mint,#99dfd5);text-underline-offset:4px;font-size:13px}