/* Connected controls, a calmer battlefield, and visible cause and effect. */
.adventure-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.adventure-tools .text-button{min-height:42px;padding:7px 12px;border:1px solid #68785465;border-radius:9px;background:#15221ce6;color:#e1eccb;font-size:12px;white-space:nowrap}
.adventure-tools #adventure-speed{font-variant-numeric:tabular-nums;min-width:65px;color:#ebd6a7}
.campaign-toolbar{gap:10px;flex-wrap:wrap}
.stage-guide-button{display:block;position:relative;z-index:7;width:100%;padding:3px 0 0;color:inherit;background:none;border:0;cursor:pointer;text-align:center;border-radius:5px}
.stage-guide-button .stage-name::after{content:' ↗';font-size:.8em;opacity:.55}
.stage-guide-button:hover .stage-name{color:var(--member-accent)}
.die-owner[data-character-guide]{border:0;color:inherit;background:none;width:100%;padding:0;cursor:pointer;border-radius:7px}
.die-owner[data-character-guide]:hover{color:#eff8d4}
.die-owner[data-character-guide]::after{content:'↗';font-size:9px;line-height:1;opacity:.6}
.character-info-link{padding:3px 5px;border:1px solid #8ea97b70;border-radius:5px;background:#17271e;color:#d3e3bb;font-size:10px;line-height:1.5;cursor:pointer}
.roster-illustration{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.roster-illustration .character-avatar{width:72px;height:90px;flex:none}
.roster-illustration h3{margin:0}
.roster-illustration button{font-size:12px;margin-top:7px}
.camp-character-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:15px 0}
.camp-character-card{--card-accent:#d8ecac;position:relative;min-width:0;border:1px solid #65785880;border-radius:12px;background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--card-accent) 15%,transparent),transparent 75%),#132019;padding:5px 3px 8px;cursor:pointer;color:#e8efd9;transition:border-color .2s,transform .2s}
.camp-character-card:hover{border-color:var(--card-accent);transform:translateY(-3px)}
.camp-character-card .character-avatar{height:86px;width:100%;max-width:88px;margin:auto}
.camp-character-card strong{display:block;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.camp-character-card small{display:block;font-size:9px;line-height:1.4;color:#b4c6a9;overflow-wrap:anywhere}
.camp-character-card::after{content:'↗';position:absolute;right:6px;top:4px;font-size:11px;color:var(--card-accent);opacity:.75}
.roll-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.roll-tools>span{font-size:10px;line-height:1.5;color:#a9bca4;max-width:65%}
.roll-tools button{font-size:11px;min-height:35px;white-space:nowrap;color:#dbdfb6}
body[data-rolling="true"] .hand-tools,body[data-rolling="true"] #selection-strip,body[data-rolling="true"] #selection-hint,body[data-rolling="true"] #move-opportunities,body[data-rolling="true"] #party-buffs,body[data-rolling="true"] #combo-status,body[data-rolling="true"] #skill-receipt{display:none}
body[data-rolling="true"] #hand-panel{min-height:380px}
.enemy-plan{margin:12px 16px 0;padding:10px;border:1px solid #8d9c8138;border-radius:10px;background:#122027da;position:relative;z-index:3}
.enemy-plan-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;line-height:1.4}
.enemy-plan-label strong{font-size:9px;letter-spacing:1px;color:#ccd8be}
.enemy-plan-label>span{font-size:9px;color:#9eafa7}
.enemy-plan-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.enemy-beat{min-width:0;border:1px solid #77887336;border-radius:7px;padding:7px;background:#0c1b205c;display:grid;grid-template-columns:1fr auto;gap:3px 5px;color:#afc1b7}
.enemy-beat>span{font-size:9px;align-self:center}
.enemy-beat>strong{font-size:15px;line-height:1.2;color:#d2e0cc;font-variant-numeric:tabular-nums}
.enemy-beat small{font-size:8px;font-weight:400}
.enemy-beat>em{grid-column:1/-1;font-size:9px;line-height:1.4;font-style:normal;overflow-wrap:anywhere}
.enemy-beat.current{background:#32423670;border-color:#b6cb827a}
.enemy-beat.heavy{border-color:#d29a6a85;background:#613e2645}
.enemy-beat.heavy strong{color:#f0bd92}
.command-bridge{margin:10px 0 8px;border:1px solid #91ab6955;border-radius:10px;padding:10px 12px;background:linear-gradient(120deg,#31422466,#17271d)}
.bridge-pattern{display:flex;align-items:center;gap:7px}
.bridge-pattern>span{display:grid;place-items:center;width:28px;height:30px;border:1px solid #6f8659;border-radius:5px;background:#15261b}
.bridge-pattern svg{width:18px;height:18px}.bridge-pattern>b{font-size:18px;font-weight:400;color:#95ad78;margin:0 3px}.bridge-pattern>strong{font-size:12px;color:#e7f3c5}
.command-bridge>p{font-size:11px;line-height:1.5;margin:7px 0 0;color:#b6c9a8}
.fate-confirmed{display:flex;align-items:center;gap:6px;font-size:11px;color:#f4d795;margin-top:8px}.fate-confirmed>svg{width:14px;height:14px}.fate-confirmed>span{color:#bdb995}
.forecast-viz{border:1px solid #75916860;padding:10px 11px;border-radius:9px;background:#15281d;margin-top:10px}
.forecast-viz>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:#c4d5b6}
.forecast-viz strong{font-size:13px;color:#e1efc4;font-variant-numeric:tabular-nums}
.forecast-life{height:8px;border-radius:6px;background:#08140e;position:relative;overflow:hidden;margin-top:8px}
.forecast-life>span{position:absolute;left:0;top:0;height:100%;border-radius:6px;transition:width .3s ease}
.forecast-range{background:#728e5850}.forecast-certain{background:linear-gradient(90deg,#789c63,#d2e8aa)}
.forecast-life>i{position:absolute;top:0;width:2px;height:100%;background:#ffffffb8}
.forecast-viz>small{display:block;color:#a1b496;font-size:10px;line-height:1.4;margin-top:6px}
.forecast-viz.danger{border-color:#bf8a688c;background:#40292266}.forecast-viz.danger strong{color:#f5bda6}
.move-chance.just-unlocked{animation:flow-unlock .85s ease-out both}
.hand-panel,.commands-panel,.review-panel,.camp-panel,.outcome-panel{animation:flow-panel-in .27s ease-out both}
body[data-phase="playback"] .arena .health-fill{transition-duration:.45s}
.arena[data-playback-paused="true"] *, .arena[data-playback-paused="true"] *::before,.arena[data-playback-paused="true"] *::after{animation-play-state:paused!important}
body:has(dialog[open]) .arena *,body:has(dialog[open]) .camp-character-card .character-avatar *{animation-play-state:paused!important}
.workshop-draft{color:#e5d49c;font-size:11px;line-height:1.6;margin:7px 0}
@keyframes flow-unlock{0%{transform:scale(.97);box-shadow:0 0 0 #e7ebbc00}38%{transform:scale(1.025);box-shadow:0 0 18px #dcefa132}100%{transform:scale(1);box-shadow:0 0 0 #e7ebbc00}}
@keyframes flow-panel-in{from{opacity:.6;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:820px){.adventure-tools{gap:5px}.enemy-plan{margin-top:10px}.camp-character-card .character-avatar{height:104px;max-width:108px}.camp-character-card strong{font-size:13px}.camp-character-card small{font-size:10px}}
@media(max-width:560px){.campaign-toolbar{align-items:center;gap:5px}.campaign-toolbar>#campaign-progress{width:100%;font-size:9px}.adventure-tools{width:100%;justify-content:space-between}.adventure-tools .text-button{font-size:11px;padding:5px 10px;min-height:38px}.camp-character-strip{gap:5px}.camp-character-card .character-avatar{height:83px}.camp-character-card strong{font-size:11px}.camp-character-card small{font-size:9px}.enemy-plan{margin:9px 10px 0;padding:8px}.enemy-beat{padding:6px;grid-template-columns:1fr;gap:3px}.enemy-beat>em{font-size:8px;line-height:1.45}.enemy-beat>span{font-size:9px}.enemy-beat>strong{font-size:15px}.roll-tools{gap:7px}.roll-tools>span{font-size:9px}.roll-tools button{font-size:10px}.die-owner[data-character-guide]::after{display:none}.character-info-link{padding:3px;font-size:9px}.bridge-pattern>span{width:24px;height:27px}.bridge-pattern>strong{font-size:11px}.command-bridge{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.hand-panel,.commands-panel,.review-panel,.camp-panel,.outcome-panel,.move-chance.just-unlocked{animation:none}.camp-character-card:hover{transform:none}.forecast-life>span{transition:none}}
.bridge-techniques { display: grid; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #a99abc42; }
.bridge-techniques>span { display: flex; gap: 7px; align-items: flex-start; color: #d4c4e6; font-size: 11px; line-height: 1.55; }
.bridge-techniques>span>svg { width: 14px; height: 14px; margin-top: 2px; flex: none; }
.bridge-techniques strong { color: #e3d7ee; font-weight: 650; }
.bridge-techniques>small { color: #b5b8cc; font-size: 10px; line-height: 1.55; }
.forecast-reason { margin-top: 10px; border-top: 1px solid #92a48445; }
.forecast-reason>summary { min-height: 44px; display: flex; align-items: center; gap: 7px; color: #c9d8b3; font-size: 11px; line-height: 1.55; cursor: pointer; padding: 7px 0; list-style: none; }
.forecast-reason>summary::-webkit-details-marker { display: none; }
.forecast-reason>summary::before { content: '+'; width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 15px; border: 1px solid #9ba98066; border-radius: 5px; line-height: 1; }
.forecast-reason[open]>summary::before { content: '−'; }
.forecast-reason>summary:focus-visible { outline: 2px solid #d1e4a8; outline-offset: 3px; border-radius: 5px; }
.forecast-reason>p { color: #c4d1c4; font-size: 11px; line-height: 1.75; }
.forecast-reason>small { display: block; color: #aabbb0; font-size: 10px; line-height: 1.75; margin-top: 9px; }
.forecast-equation { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 4px; margin-top: 10px; border-radius: 8px; padding: 9px 7px; background: #0d1b15aa; }
.forecast-equation>span { color: #a8bcb0; font-size: 9px; line-height: 1.6; text-align: center; min-width: 0; }
.forecast-equation b { display: block; color: #e0eacb; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.forecast-equation>span:last-child b { color: #ebbea8; }
.forecast-equation>i { color: #849b87; font-style: normal; font-size: 13px; }
@media(max-width:560px) { .forecast-equation { gap: 3px; padding: 8px 5px; } .forecast-equation>span { font-size: 8px; } .forecast-equation b { font-size: 17px; } }
/* Compare real turns without leaving the dice or command controls. */
.tactics-panel { container-type: inline-size; margin: 14px 0; border: 1px solid #98b6a850; border-radius: 14px; background: linear-gradient(125deg,#18312b,#14242a); overflow: hidden; }
.tactics-disclosure>summary { display: flex; align-items: center; gap: 10px; min-height: 63px; padding: 12px 14px; cursor: pointer; list-style: none; color: #d9e8d8; }
.tactics-disclosure>summary::-webkit-details-marker { display: none; }
.tactics-summary-icon { display: grid; place-items: center; width: 35px; height: 38px; border: 1px solid #bbd1a153; border-radius: 10px; color: #d1dcab; background: #74936512; flex: none; }
.tactics-summary-icon>svg { width: 23px; height: 23px; }
.tactics-disclosure>summary>span:nth-child(2) { min-width: 0; }
.tactics-disclosure>summary strong { display: block; font-size: 14px; line-height: 1.4; font-weight: 700; color: #e5eee0; }
.tactics-disclosure>summary small { display: block; margin-top: 3px; font-size: 10px; line-height: 1.5; color: #aec3b6; }
.tactics-summary-count { margin-left: auto; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #9fb89a55; border-radius: 50%; color: #c9d9bc; font-size: 11px; font-weight: 600; flex: none; }
.tactics-disclosure>summary>i { color: #c1d3b9; font-style: normal; font-size: 18px; line-height: 1; transition: transform .18s ease; }
.tactics-disclosure[open]>summary { border-bottom: 1px solid #92aa8f3d; }
.tactics-disclosure[open]>summary>i { transform: rotate(180deg); }
.tactics-disclosure>summary:focus-visible,.tactic-actions>summary:focus-visible { outline: 2px solid #d4e8ad; outline-offset: -3px; border-radius: 10px; }
.tactics-content { padding: 13px; }
.tactics-intro { color: #bdcfc6; font-size: 11px; line-height: 1.8; margin: 0 0 13px; }
.tactics-cards { display: grid; grid-template-columns: 1fr; gap: 11px; align-items: stretch; }
.tactic-card { --tactic-accent: #b3d8bd; display: flex; flex-direction: column; min-width: 0; padding: 14px; border: 1px solid color-mix(in srgb,var(--tactic-accent) 37%,transparent); border-radius: 12px; background: radial-gradient(ellipse at 90% 0,color-mix(in srgb,var(--tactic-accent) 9%,transparent),transparent 56%),#102129; }
.tactic-assault { --tactic-accent: #e9b59e; }
.tactic-survival { --tactic-accent: #acd3ea; }
.tactic-card.is-selected { border-color: var(--tactic-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--tactic-accent) 23%,transparent); }
.tactic-card-heading { display: flex; align-items: flex-start; gap: 10px; }
.tactic-mark { display: grid; place-items: center; flex: none; width: 29px; height: 32px; color: var(--tactic-accent); border: 1px solid color-mix(in srgb,var(--tactic-accent) 45%,transparent); border-radius: 8px; background: color-mix(in srgb,var(--tactic-accent) 7%,transparent); }
.tactic-mark>svg { width: 19px; height: 19px; }
.tactic-card h4 { margin: 0; color: var(--tactic-accent); font-family: Georgia,"PingFang TC",serif; font-size: 21px; line-height: 1.3; font-weight: 400; }
.tactic-card-heading p { font-size: 10px; line-height: 1.7; color: #aebfc2; margin-top: 5px; }
.tactic-dice { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 14px 0 12px; }
.tactic-die { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tactic-die>span { position: relative; display: grid; place-items: center; width: 39px; height: 38px; border: 1px solid currentColor; border-bottom-width: 3px; border-radius: 8px; background: #24362f; }
.tactic-die>span>svg { width: 22px; height: 22px; }
.tactic-die>span>b { position: absolute; right: -4px; top: -5px; display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; color: #dbebc6; background: #234239; font-size: 9px; line-height: 1; }
.tactic-die>em { margin-top: 5px; max-width: 100%; font-style: normal; font-size: 9px; line-height: 1.5; color: #c6d4ca; text-align: center; overflow-wrap: anywhere; }
.tactic-die.is-omitted>span { border-style: dashed; border-bottom-width: 1px; background: #19242a; opacity: .5; }
.tactic-die.is-omitted>em { color: #8fa39f; }
.tactic-die.is-omitted>span>b { background: #19242a; border-style: dashed; }
.tactic-estimates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 11px 0; border-top: 1px solid #9cacac2e; border-bottom: 1px solid #9cacac2e; }
.tactic-estimates>div { min-width: 0; }
.tactic-estimates>div>span { display: block; font-size: 9px; line-height: 1.55; color: #b8cbc3; }
.tactic-estimates strong { display: block; color: #e6edcd; font-size: 26px; line-height: 1.2; font-weight: 400; font-family: Georgia,serif; font-variant-numeric: tabular-nums; margin: 4px 0; }
.tactic-estimates>div:last-child strong { color: #c5e4bd; }
.tactic-estimates>div.is-danger strong { color: #f0b397; }
.tactic-estimates small { display: block; color: #91aca4; font-size: 8px; line-height: 1.65; }
.tactic-support { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-top: 10px; color: #aec5bd; font-size: 10px; line-height: 1.65; }
.tactic-support>span:first-child { display: inline-flex; align-items: center; gap: 4px; color: #e0d09f; }
.tactic-support svg { width: 13px; height: 13px; }
.tactic-outlook { display: flex; align-items: flex-start; gap: 5px; font-size: 10px; line-height: 1.6; color: #bdd0cd; margin: 10px 0 0; }
.tactic-outlook>svg { width: 13px; height: 13px; margin-top: 2px; }
.tactic-outlook.certain { color: #d0e6a8; }
.tactic-outlook.risky { color: #efbc9f; }
.tactic-actions { margin-top: 10px; border-top: 1px solid #859d9950; }
.tactic-actions>summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 3px 6px; cursor: pointer; min-height: 44px; padding: 6px 0; font-size: 10px; line-height: 1.5; color: #d2deda; list-style: none; }
.tactic-actions>summary::-webkit-details-marker { display: none; }
.tactic-actions>summary>span { color: #99b3a8; font-size: 8px; padding: 3px 5px; border: 1px solid #91ab9650; border-radius: 5px; }
.tactic-actions>ol { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 7px; }
.tactic-actions li { display: flex; align-items: center; gap: 6px; min-width: 0; border-radius: 8px; background: #08171d5e; padding: 5px; }
.tactic-actor-art { flex: none; height: 40px; width: 30px; }
.tactic-actor-art>.character-avatar { width: 30px; height: 40px; }
.tactic-actor-art .character-avatar * { animation: none !important; }
.tactic-actions li>div { flex: 1; min-width: 0; }
.tactic-actions li strong { display: block; color: #d3e0d8; font-size: 10px; line-height: 1.4; }
.tactic-actions li>div>span { display: block; color: #a9bfc0; font-size: 9px; line-height: 1.5; margin-top: 3px; overflow-wrap: anywhere; }
.tactic-command-kind { flex: none; font-size: 7px; font-weight: 500; color: #a4b9b2; }
.tactic-equivalent { color: #a5bcb6; font-size: 9px; line-height: 1.6; margin: 3px 0 10px; }
.tactic-apply { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 44px; width: 100%; margin-top: auto; padding: 10px 12px; color: #182621; border: 1px solid var(--tactic-accent); border-radius: 9px; background: var(--tactic-accent); font-size: 11px; line-height: 1.5; font-weight: 700; }
.tactic-apply:hover:not(:disabled) { filter: brightness(1.08); }
.tactic-apply[aria-pressed="true"] { background: color-mix(in srgb,var(--tactic-accent) 14%,#12232a); color: var(--tactic-accent); }
.tactic-apply:disabled { opacity: .55; }
.tactics-method,.tactics-same { color: #a6beb3; font-size: 10px; line-height: 1.85; margin-top: 13px; }
.tactics-same { color: #d1dec2; border-left: 2px solid #a5c28a; padding: 8px 10px; border-radius: 0 8px 8px 0; background: #536e3330; }
@container(min-width:630px) { .tactics-cards { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } .tactic-card { padding: 12px 10px; } .tactic-card-heading { gap: 7px; min-height: 84px; } .tactic-card h4 { font-size: 20px; } .tactic-mark { width: 24px; height: 28px; } .tactic-mark>svg { width: 16px; height: 16px; } .tactic-dice { gap: 4px; } .tactic-die>span { width: 32px; height: 33px; } .tactic-die>span>svg { width: 19px; height: 19px; } .tactic-support { align-items: flex-start; flex-direction: column; } .tactic-outlook { min-height: 32px; } }
/* The reveal ends with each companion's committed contribution, then earned memories. */
.flow-outcome { margin: 17px 0; border-top: 1px solid #91a89050; padding-top: 15px; }
.flow-outcome-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.flow-outcome-heading>span { font-size: 9px; letter-spacing: 1.1px; color: #c5d4b2; line-height: 1.5; }
.flow-outcome-heading>strong { color: #d0e2bb; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-contributions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.flow-contributions>article { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 9px; border: 1px solid #89a69142; border-radius: 11px; background: linear-gradient(140deg,#29433244,#10222ae8); }
.flow-contributor { width: 39px; height: 55px; flex: none; }
.flow-contributor>.character-avatar { height: 55px; width: 39px; }
.flow-contributor .character-avatar * { animation: none !important; }
.flow-contributions>article>div:last-child { min-width: 0; }
.flow-contributions strong { display: block; color: #e1e9d4; font-size: 12px; line-height: 1.45; }
.flow-contributions article>div>span { display: block; color: #aac3bd; font-size: 10px; line-height: 1.5; margin-top: 3px; overflow-wrap: anywhere; }
.flow-contributions p { font-size: 10px; line-height: 1.8; color: #b7cfc1; margin-top: 5px; }
.flow-contributions b { font-weight: 700; color: #e3dfb9; }
.flow-contributions small { display: block; color: #9fb5ad; font-size: 9px; line-height: 1.65; margin-top: 4px; }
.flow-outcome-note { color: #9db7a6; font-size: 10px; line-height: 1.85; margin-top: 10px; }
.flow-earned { display: flex; align-items: flex-start; gap: 13px; padding: 15px; margin-top: 15px; border: 1px solid #d4c28a74; border-radius: 13px; background: radial-gradient(ellipse at 0 0,#dbc47220,transparent 66%),linear-gradient(115deg,#303927b8,#152d30); }
.flow-earned-medal { width: 54px; height: 66px; color: #e4d49a; flex: none; }
.flow-earned-medal>svg { width: 54px; height: 66px; animation: flow-earned-mark .85s ease-out both; }
.flow-earned>div { min-width: 0; }
.flow-earned h4 { color: #e6dfb7; font-size: 20px; font-weight: 400; font-family: Georgia,"PingFang TC",serif; line-height: 1.35; margin: 0; }
.flow-earned ul { display: grid; gap: 7px; list-style: none; padding: 0; margin: 10px 0 0; }
.flow-earned li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; color: #c8d3b2; font-size: 11px; line-height: 1.6; }
.flow-earned li>strong { font-weight: 650; color: #e2e8c5; }
.flow-earned li>span { color: #adcbba; font-size: 10px; }
.flow-earned-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #d3cc9472; border-radius: 8px; color: #e6dba7; background: #555e2c22; font-size: 11px; line-height: 1.6; margin-top: 10px; }
@keyframes flow-earned-mark { 0% { opacity: .3; transform: translateY(5px) scale(.84); } 40% { opacity: 1; transform: translateY(-2px) scale(1.08); } 100% { opacity: 1; transform: none; } }
@media(max-width:420px) { .tactics-content { padding: 10px; } .tactics-disclosure>summary { padding: 10px 12px; gap: 8px; } .flow-contributions { grid-template-columns: 1fr; } .flow-earned { padding: 12px; gap: 9px; } .flow-earned-medal,.flow-earned-medal>svg { width: 41px; height: 55px; } .flow-earned h4 { font-size: 19px; } }
@media(prefers-reduced-motion:reduce) { .tactics-disclosure>summary>i { transition: none; } .flow-earned-medal>svg { animation: none; } }
html[data-motion="reduced"] .tactics-disclosure>summary>i { transition: none; }
html[data-motion="reduced"] .flow-earned-medal>svg { animation: none; }

/* A short, current plan before the four character controls. */
.command-decision{--decision-accent:#bcd5a9;margin:14px 0 12px;padding:14px;border:1px solid #adbf8b72;border-radius:12px;background:radial-gradient(ellipse at 0 0,#c9da8a11,transparent 70%),linear-gradient(125deg,#223c31,#172b30)}
.decision-heading{display:flex;justify-content:space-between;align-items:center;gap:8px 13px;flex-wrap:wrap;margin-bottom:12px}
.decision-heading>span{font-size:10px;font-weight:650;letter-spacing:.8px;line-height:1.5;color:#c9dab6}
.decision-heading>strong{font-size:11px;line-height:1.4;font-weight:600;color:#dfebc8;border:1px solid #adc79855;border-radius:6px;padding:4px 6px;background:#adc98709}
.decision-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.decision-metrics>div{min-width:0}
.decision-metrics>div+div{padding-left:12px;border-left:1px solid #98ae9057}
.decision-metrics>div>span{display:flex;align-items:center;gap:6px;font-size:11px;color:#c1d1c7;line-height:1.5}
.decision-metrics svg{width:16px;height:17px;flex:none;color:var(--decision-accent)}
.decision-metrics>div>strong{display:block;font-family:Georgia,"PingFang TC",serif;font-size:30px;font-weight:400;line-height:1.3;color:#e5ebc9;white-space:nowrap;font-variant-numeric:tabular-nums;margin:4px 0 2px}
.decision-metrics>div>strong>small{font-family:inherit;font-size:14px;color:#b7c9b3}
.decision-metrics>div>small{display:block;font-size:10px;line-height:1.7;color:#acbfb1}
.decision-verdict{display:flex;align-items:flex-start;gap:7px;margin:11px 0 0;padding:9px 10px;border:1px solid #a0bc8f50;border-radius:8px;background:#84a6750b;color:var(--decision-accent)}
.decision-verdict>svg{width:16px;height:18px;flex:none;margin-top:1px}
.decision-verdict>strong{font-size:12px;line-height:1.65;font-weight:600}
.command-decision[data-decision-outcome="certain"]{--decision-accent:#dce7a4;border-color:#d2d79585}
.command-decision[data-decision-outcome="critical"]{--decision-accent:#dfc897}
.command-decision:is([data-decision-outcome="defeat"],[data-decision-outcome="risk"]){--decision-accent:#f0b296;border-color:#c59575a3;background:radial-gradient(ellipse at 0 0,#ea946015,transparent 70%),linear-gradient(125deg,#3c342d,#252d30)}
.command-decision:is([data-decision-outcome="defeat"],[data-decision-outcome="risk"]) .decision-verdict{border-color:#e2a98770;background:#d27d4810}
.command-decision:is([data-decision-outcome="defeat"],[data-decision-outcome="risk"]) [data-decision-hp]{color:#fac4a9}
.decision-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 10px;list-style:none;padding:11px 0 0;margin:0}
.decision-actions>li{display:flex;align-items:center;gap:7px;min-width:0;padding:6px 0}
.decision-actions>li>b{display:grid;place-items:center;width:23px;height:26px;flex:none;font-size:11px;font-weight:500;line-height:1;color:#c3d4b8;border:1px solid #9eb38d60;border-radius:6px;background:#a2bb8108}
.decision-actions>li>span{min-width:0}
.decision-actions small{display:block;font-size:10px;line-height:1.5;color:#a9bdb0}
.decision-actions strong{display:block;font-size:12px;font-weight:600;line-height:1.45;color:#dee7d2;overflow-wrap:anywhere}
.decision-actions>li[data-decision-command="technique"] strong{color:#c3e0da}
.decision-actions>li[data-decision-command="special"] strong{color:#e2d5b0}
/* The expanded rulebook remains available without repeating its prose each turn. */
.command-bridge:has(.bridge-rules){padding:0;background:#1c302775}
.bridge-rules>summary{display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:44px;padding:10px 12px;color:#d0dfc5;font-size:12px;line-height:1.5;cursor:pointer;list-style:none}
.bridge-rules>summary::-webkit-details-marker{display:none}
.bridge-rules>summary>span{color:#a6bdab;font-size:10px;white-space:nowrap}
.bridge-rules>summary>span::after{content:' +';font-size:15px;margin-left:5px}
.bridge-rules[open]>summary>span::after{content:' −'}
.bridge-rules>summary:focus-visible{outline:2px solid #e0e8b5;outline-offset:-3px;border-radius:8px}
.bridge-rules-content{border-top:1px solid #89a47745;padding:12px}
.bridge-rules-content>p{font-size:12px;line-height:1.7;margin:9px 0;color:#c0d0b7}
@media(max-width:420px){.command-decision{padding:12px}.decision-heading{gap:6px}.decision-heading>span{font-size:9px}.decision-heading>strong{font-size:10px}.decision-metrics{gap:9px}.decision-metrics>div+div{padding-left:9px}.decision-metrics>div>strong{font-size:27px}.decision-metrics>div>span{font-size:10px;gap:4px}.decision-verdict{padding:8px}.decision-actions{column-gap:8px}.decision-actions strong{font-size:11px}}