/* Mission 03: a network tabletop, one contextual investigation, restrained signal colours. */
.tx-ops { --ops-ink:#edf5f7; --ops-muted:#a8bbc7; --ops-surface:#11232e; --ops-line:#324c5c; color:var(--ops-ink); background:#091822; padding:22px 28px 26px; margin:18px auto; border-radius:16px; overflow:hidden; }
.tx-ops .game-top { margin:0 0 25px; color:var(--ops-muted); }
.tx-ops .text-button,.tx-ops .game-name,.tx-ops .score-label { color:var(--ops-muted); }
.tx-ops .score-label strong { color:var(--ops-ink); }
.tx-ops .button.primary { background:#b8edcf; color:#102c23; border-color:#b8edcf; box-shadow:none; border-radius:7px; }
.tx-ops .button.primary:hover { background:#d4f8e2; transform:translateY(-1px); }
.tx-ops .button.secondary { background:#193342; color:var(--ops-ink); border-color:var(--ops-line); }
.tx-ops :is(button,summary):focus-visible { outline:3px solid #f4d693; outline-offset:4px; }
.tx-ops .section-label,.ops-eyebrow { color:#a8c5d3; font-size:.73rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.ops-mission { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.ops-mission h1 { color:var(--ops-ink); font-size:clamp(1.5rem,2.5vw,2.25rem); letter-spacing:-.045em; margin:7px 0 0; }
.ops-mission .section-label span { color:#849daa; margin-left:12px; }
.ops-objective { color:var(--ops-muted); font-size:.9rem; max-width:860px; margin:10px 0 20px; line-height:1.6; }
.tx-ops .tx-hud { gap:24px; flex-shrink:0; }
.tx-ops .tx-hud>div { background:none; border:0; box-shadow:none; padding:0; min-width:0; }
.tx-ops .tx-hud dt { color:var(--ops-muted); font-size:.7rem; margin-bottom:5px; }
.tx-ops .tx-hud dd { color:var(--ops-ink); font-size:1rem; }
.tx-ops .tx-shields i.on { color:#b8edcf; filter:none; }
.tx-ops .tx-shields i.off { color:#8d6060; }
.tx-ops .tx-energy { display:none; }
.tx-ops .tx-hud .flash { animation:ops-damage .5s ease-out; }
.tx-ops .ops-arena { position:relative; min-height:480px; height:clamp(450px,52vh,580px); border:1px solid #283f4c; border-radius:10px; overflow:hidden; background:#0d202d; box-shadow:inset 0 -50px 90px #07151d; }
.ops-world,.ops-signals { position:absolute; inset:0; }
.ops-world canvas { display:block; width:100%; height:100%; }
.ops-signals { pointer-events:none; }
.ops-lane-labels { position:absolute; top:17px; left:7%; right:7%; display:grid; grid-template-columns:repeat(3,1fr); text-align:center; color:#adc4cf; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.ops-core { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:10px; align-items:center; white-space:nowrap; font-size:.68rem; letter-spacing:.1em; color:#b6c8d0; background:#0a1b25e8; padding:8px 13px; border-radius:4px; }
.ops-core .icon { width:16px; height:16px; color:#b8edcf; }
.ops-core span { color:#e4f7ed; }
.tx-ops .tx-item { position:absolute; width:clamp(130px,17vw,195px); min-height:58px; transform:translate(-50%,-100%); pointer-events:auto; background:#152c39f5; border:1px solid #526d7c; border-radius:6px; padding:10px 12px; color:#edf5f7; box-shadow:0 7px 14px #0003; transition:border-color .16s,background .16s; animation:none; text-align:left; }
.tx-ops .tx-item:hover { background:#223f50; border-color:#aecbd9; transform:translate(-50%,-100%); }
.tx-ops .tx-item.focused { border-color:#d7eef7; }
.tx-ops .tx-item.target { border-color:#b8edcf; cursor:crosshair; }
.tx-ops .tx-item.resolved { background:#14342f; border-color:#638f7e; opacity:.82; }
.tx-ops .tx-item.st-breached { background:#48292c; border-color:#d38b80; }
.tx-ops .tx-item.st-blocked { background:#3c3423; border-color:#b19a66; }
.tx-ops .tx-body { display:block; transform:none; }
.tx-ops .tx-medal { display:none; }
.tx-ops .tx-plate { display:block; padding:0; background:none; border:0; box-shadow:none; transform:none; color:inherit; }
.tx-ops .tx-tag { color:#abc4d1; font-size:.63rem; font-weight:400; display:block; }
.tx-ops .tx-title { font-size:.79rem; line-height:1.35; color:inherit; display:block; margin-top:4px; font-weight:550; }
.tx-ops .tx-distance { display:block; font-size:.62rem; color:#b6edcf; margin-top:2px; }
.tx-ops .tx-stamp { display:block; font-size:.66rem; color:#c8f3d9; background:none; border:0; transform:none; margin-top:4px; }
.tx-ops .tx-note { font-size:.65rem; color:#eac884; }
.tx-ops .tx-item .tx-plate { outline:none; box-shadow:none; }
.tx-ops .tx-item .tx-tag,.tx-ops .tx-intel .tx-tag { background:none; color:#adc6d4; }
.tx-ops .tx-item .tx-body { animation:none; }
.tx-ops .tx-item:hover .tx-body { transform:none; }
.tx-ops .tx-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ops-decision-list { padding-left:18px; color:#b8cdd9; font-size:.8rem; }
.ops-decision-list li { margin:10px 0; line-height:1.6; }
.tx-ops .tx-pips { margin:6px 0 0; }
.tx-ops .tx-pips i { border-color:#b8edcf; }
.tx-ops .tx-pips i.on { background:#b8edcf; }
.tx-ops .tx-float { display:none; }
.tx-ops .ops-intro { position:absolute; left:4%; top:50%; transform:translateY(-50%); width:min(470px,88%); display:block; padding:30px; background:#0a1b25f5; border:1px solid #456170; border-radius:10px; box-shadow:0 25px 70px #0006; margin:0; }
.tx-ops .ops-intro h2 { font-size:clamp(1.8rem,3.5vw,2.7rem); line-height:1.1; color:#f0f8fb; letter-spacing:-.04em; margin:12px 0 18px; }
.tx-ops .ops-intro p:not(.ops-eyebrow) { font-size:.96rem; color:#bfd0d9; line-height:1.65; }
.ops-intro-foot { display:flex; align-items:center; gap:22px; margin-top:26px; flex-wrap:wrap; }
.ops-intro-foot>span { font-size:.78rem; color:#d4e3ea; flex:1; }
.ops-intro-foot small { display:block; margin-top:7px; color:#a7bac5; }
.is-intro .ops-signals { opacity:.2; }
.ops-context { display:flex; justify-content:space-between; align-items:center; gap:22px; margin:16px 0 12px; font-size:.83rem; color:#c5d8e0; }
.ops-context>p { display:flex; gap:10px; align-items:center; margin:0; }
.ops-context .icon { width:18px; flex-shrink:0; }
.ops-context details { flex:0 0 auto; max-width:350px; }
.tx-ops summary { cursor:pointer; color:#bdd1dc; font-size:.8rem; padding:9px 0; }
.ops-context details[open] { flex-basis:45%; }
.ops-context details p { line-height:1.7; color:var(--ops-muted); }
.tx-ops .ops-hand { background:none; border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; align-items:stretch; gap:16px; box-shadow:none; }
.tx-ops .tx-cards { flex:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; }
.tx-ops .tx-cards:has(> :nth-child(5)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tx-ops .tx-card { display:flex; align-items:center; gap:10px; min-width:0; min-height:76px; padding:12px; border:1px solid #3a5361; background:#152a36; color:#edf5f7; border-radius:6px; box-shadow:none; transform:none; text-align:left; }
.tx-ops .tx-card:hover { background:#213b49; transform:none; border-color:#a4c2d0; }
.tx-ops .tx-card.selected { background:#28493f; border-color:#b8edcf; box-shadow:inset 0 0 0 1px #b8edcf; transform:none; }
.tx-ops .tx-card.short { opacity:.5; }
.tx-ops .tx-card strong { display:block; font-size:.8rem; line-height:1.35; }
.tx-ops .tx-card>span:last-child { min-width:0; overflow-wrap:anywhere; }
.ops-result-heading { flex-wrap:wrap; }
.tx-ops .ops-wave-result .button { max-width:100%; white-space:normal; }
.ops-action-icon { position:relative; color:#b3cbd7; flex-shrink:0; }
.ops-action-icon>.icon { width:21px; height:21px; }
.ops-action-icon small { display:block; font-size:.6rem; text-align:center; margin-top:2px; color:#9ab2bf; }
.tx-ops .tx-cost { display:block; color:#a6bfcc; font-size:.67rem; margin-top:5px; }
.tx-ops .tx-end { align-self:stretch; min-width:148px; font-size:.84rem; }
.ops-card-hint { flex-basis:100%; font-size:.82rem; margin:0; color:#c1d3dd; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tx-ops .ops-feedback { padding:12px 0 0; margin-top:16px; border:0; border-top:1px solid #314652; background:none; color:#c2d2da; box-shadow:none; }
.tx-ops .ops-feedback ul { margin:0; }
.tx-ops .ops-feedback li { color:#bdcdd7; font-size:.81rem; line-height:1.65; padding:0; border:0; }
.tx-ops .ops-feedback strong { color:#f1f6f8; }
.tx-ops .ops-feedback li.success .icon { color:#b8edcf; }
.tx-ops .ops-feedback li.risk .icon { color:#f0a092; }
.ops-investigation { position:absolute; top:12px; right:12px; width:min(370px,calc(100% - 24px)); max-height:calc(100% - 24px); overflow:auto; background:#132a36; border:1px solid #7995a5; border-radius:8px; box-shadow:0 16px 46px #0008; z-index:3; }
.tx-ops .ops-investigation .tx-intel { background:none; border:0; box-shadow:none; padding:25px; color:#d6e4eb; }
.tx-ops .tx-intel h2 { color:#f1f8fa; font-size:1.15rem; line-height:1.3; padding-right:20px; margin-top:10px; }
.tx-ops .tx-kind-desc { color:#aabfc9; font-size:.8rem; line-height:1.6; }
.tx-ops .tx-artifact { background:#0b1e29; border:0; padding:14px; font-size:.84rem; border-radius:5px; }
.tx-ops .tx-artifact>div { display:block; padding:7px 0; border-color:#304654; }
.tx-ops .tx-artifact dt { color:#a8c0cf; font-size:.68rem; margin-bottom:5px; }
.tx-ops .tx-artifact dd { color:#f0f6f8; overflow-wrap:anywhere; }
.tx-ops .tx-flags { font-size:.79rem; color:#c5d6df; }
.tx-ops .tx-help { color:#b5c8d3; font-size:.76rem; }
.ops-close { position:absolute; right:10px; top:10px; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:5px; background:#1e3b4b; color:#d7e8ef; }
.tx-ops .ops-wave-result { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(640px,92%); max-height:94%; overflow:auto; background:#112a36f7; border:1px solid #6d8b9b; border-radius:10px; box-shadow:0 20px 65px #0008; margin:0; padding:26px; color:#e7f0f4; }
.ops-result-heading { display:flex; gap:16px; align-items:center; justify-content:space-between; margin:12px 0; }
.ops-result-heading h2 { margin:0; font-size:1.5rem; color:#edf5f7; }
.tx-ops .earned { font-size:2rem; color:#b8edcf; white-space:nowrap; }
.tx-ops .earned small { font-size:.8rem; color:#adc2ce; }
.ops-wave-result>p { line-height:1.6; color:#bcd0da; font-size:.9rem; }
.tx-ops .takeaway { background:#1e3b46; color:#d4e7ee; border:0; padding:14px; margin:16px 0; }
.tx-ops .takeaway p { font-size:.84rem; }
.tx-ops .tx-outcomes { margin:8px 0; }
.tx-ops .tx-outcomes li { color:#b7d0db; font-size:.8rem; }
.tx-ops .tx-outcomes strong { color:#eff7fa; }
.tx-ops .ops-weight-note { font-size:.7rem; margin:14px 0 0; }
.tx-ops.ops-summary { padding-bottom:32px; }
.ops-debrief { display:grid; grid-template-columns:1fr 260px; gap:45px; align-items:center; padding:40px 0; }
.ops-debrief h1 { font-size:clamp(2rem,4vw,3.5rem); line-height:1.05; color:#eef7fb; letter-spacing:-.045em; margin:15px 0; }
.ops-debrief p { color:#b4c9d4; }
.ops-debrief .ops-outcome { margin-top:25px; color:#c2ebd7; font-size:.84rem; }
.ops-outcome span { margin:0 10px; color:#6d8795; }
.tx-ops .result-score { background:none; border:0; padding:0; color:#dce9ef; text-align:right; display:block; }
.tx-ops .result-score>strong { color:#b8edcf; font-size:5rem; }
.tx-ops .result-score p { font-size:.75rem; }
.ops-decisions article { display:flex; gap:26px; align-items:flex-start; padding:22px 0; border-top:1px solid #334c5a; }
.ops-chapter-number { font-size:.8rem; color:#8babbc; padding-top:4px; }
.ops-decisions article>div { flex:1; }
.ops-decisions h2 { font-size:1rem; color:#e8f3f7; margin:0 0 8px; }
.ops-decisions p { margin:0 0 9px; color:#adcad8; font-size:.86rem; line-height:1.6; }
.ops-decisions small { color:#a3bbc8; font-size:.72rem; }
.ops-decisions article>strong { font-size:1.5rem; color:#b8edcf; white-space:nowrap; }
.ops-badges { border-top:1px solid #334c5a; padding:12px 0; }
.ops-badges li { display:flex; gap:9px; color:#b7cfdc; font-size:.85rem; margin:10px 0; }
.ops-badges .icon { flex-shrink:0; }
.tx-ops .result-buttons { margin-top:20px; }
@keyframes ops-damage { 30% { background:#633936; } }
@media (max-width:1000px) {
 .tx-ops { padding:20px; }.tx-ops .tx-hud { gap:14px; }.ops-mission .section-label span { display:none; }
 .tx-ops .tx-end { min-width:120px; }.tx-ops .tx-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .tx-ops .tx-cards:has(> :nth-child(5)) { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .tx-ops .tx-card { padding:10px; }
}
@media (max-width:640px) {
 .tx-ops { padding:16px 12px; margin:12px auto; width:calc(100% - 16px); border-radius:10px; }
 .tx-ops .game-top { margin-bottom:20px; }.tx-ops .game-name { display:none; }
 .ops-mission { display:block; }.ops-mission h1 { font-size:1.6rem; }.tx-ops .tx-hud { margin-top:18px; gap:24px; }.tx-ops .tx-hud>div { min-width:60px; }
 .ops-objective { font-size:.82rem; }.tx-ops .ops-arena { height:550px; min-height:550px; }
 .tx-ops .tx-item { width:29%; padding:8px 6px; min-height:65px; }.tx-ops .tx-title { font-size:.69rem; }.tx-ops .tx-tag { font-size:.59rem; }.tx-ops .tx-distance { font-size:.58rem; }
 .ops-lane-labels { font-size:.6rem; left:3%; right:3%; }.ops-core { font-size:.58rem; bottom:10px; }
 .tx-ops .ops-intro { left:5%; width:90%; padding:22px; }.tx-ops .ops-intro p:not(.ops-eyebrow) { font-size:.87rem; }
 .ops-intro-foot { display:block; }.ops-intro-foot button { margin-top:20px; width:100%; }
 .ops-context { align-items:flex-start; flex-direction:column; gap:5px; font-size:.78rem; }.ops-context details { max-width:none; }
 .tx-ops .tx-cards,.tx-ops .tx-cards:has(> :nth-child(5)) { flex-basis:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .tx-ops .tx-end { width:100%; min-height:48px; }.tx-ops .tx-card { min-height:78px; }.tx-ops .tx-card strong { font-size:.76rem; }
 .ops-investigation { top:10px; right:10px; width:calc(100% - 20px); max-height:calc(100% - 20px); }
 .tx-ops .ops-wave-result { padding:20px; }.ops-result-heading h2 { font-size:1.2rem; }.tx-ops .earned { font-size:1.7rem; }
 .ops-debrief { grid-template-columns:1fr; gap:20px; padding:20px 0; }.tx-ops .result-score { text-align:left; }.tx-ops .result-score>strong { font-size:4rem; }.ops-decisions article { gap:14px; }
 .ops-card-hint { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .tx-ops *, .tx-ops *::before { animation:none!important; transition:none!important; } }
/* The 3D board: channel names float over their source, and signal cards point down at their crystal. */
.ops-3d .ops-lane-labels { inset:0; display:block; }
.ops-3d .ops-lane-labels span { position:absolute; transform:translate(-50%,-100%); white-space:nowrap; padding:4px 10px; background:#0a1b25d9; border:1px solid #37606f; border-radius:999px; color:#d3e9f1; font-weight:650; }
.ops-3d .ops-core { border:1px solid #2f5a4c; border-radius:999px; }
@media (min-width:901px) {
 .ops-3d .tx-item { width:clamp(124px,13.5vw,168px); background:#10263aee; }
 .ops-3d .tx-item::after { content:''; position:absolute; left:50%; bottom:-6px; width:10px; height:10px; background:inherit; border:solid; border-color:inherit; border-width:0 1px 1px 0; transform:translateX(-50%) rotate(45deg); }
 .ops-investigation.on-left { right:auto; left:12px; }
}
/* Up to tablet width, a live network sits above full-width, readable signal controls. */
@media (max-width:900px) {
 .tx-ops { --ops-world:330px; }
 .tx-ops .ops-arena { height:auto; min-height:calc(var(--ops-world) + 20px); padding:12px; }
 .ops-world { height:var(--ops-world); }
 .ops-signals { position:relative; padding-top:calc(var(--ops-world) + 20px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .ops-signals[inert] { display:none; }
 .tx-ops .ops-signals .tx-item { position:relative; left:auto!important; top:auto!important; transform:none; width:100%; padding:13px; min-height:60px; }
 .tx-ops .ops-signals .tx-item:hover { transform:none; }
 .tx-ops .ops-signals .tx-title { font-size:.86rem; }
 .tx-ops .ops-signals .tx-tag,.tx-ops .ops-signals .tx-distance { font-size:.69rem; }
 .ops-core { top:calc(var(--ops-world) - 35px); bottom:auto; }
 .tx-ops .ops-intro,.tx-ops .ops-wave-result { position:relative; top:auto; left:auto; transform:none; width:100%; max-height:none; margin:var(--ops-world) 0 0; }
 .ops-investigation { top:calc(var(--ops-world) + 10px); max-height:calc(100% - var(--ops-world) - 20px); }
 .ops-lane-labels { font-size:.6rem; letter-spacing:0; }
}
@media (max-width:640px) { .tx-ops { --ops-world:235px; } .ops-signals { grid-template-columns:1fr; } .ops-3d .ops-lane-labels span { padding:2px 7px; font-size:.55rem; } }