.sim-nav-badge { margin-left:auto; padding:3px 7px; border-radius:6px; background:var(--mint-soft, #e0f4ed); color:#246c57; font:700 12px var(--mono); letter-spacing:.06em; }
.simulation-main { padding:28px 28px 20px; max-width:none; }
.simulation { --console-height:400px; --sim-ink:#e7f5f8; --sim-muted:#c0d4de; --sim-line:#526f7c; --sim-mint:#b1eed4; }
.sim-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.sim-heading h1 { font-size:36px; line-height:1.15; margin:7px 0; letter-spacing:-.04em; }
.sim-heading p { color:var(--ink-muted); font-size:16px; margin:0; }
.sim-heading .eyebrow { font-size:12px; letter-spacing:.13em; }
.sim-open-badge { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--outline); border-radius:30px; padding:9px 14px; color:var(--leaf-deep); background:var(--surface); font-size:13px; white-space:nowrap; }
.sim-open-badge .icon { width:16px; height:16px; }
.sim-toolbar { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; }
.sim-voyage-summary { display:flex; align-items:center; gap:12px; padding:9px 14px; background:var(--surface-sunken); border:1px solid var(--outline); border-radius:13px; }
.sim-voyage-icon { color:var(--sky-deep); display:grid; place-items:center; }
.sim-voyage-summary strong { display:block; font-size:13px; }
.sim-voyage-summary div > span { display:block; margin-top:3px; font:12px var(--mono); color:var(--ink-muted); }
.sim-voyage-summary progress { width:80px; height:6px; border:0; border-radius:8px; overflow:hidden; background:var(--outline); accent-color:#27876b; }
.sim-voyage-summary progress::-webkit-progress-bar { background:var(--outline); }
.sim-voyage-summary progress::-webkit-progress-value { background:#27876b; border-radius:8px; }
.sim-run-controls { display:flex; gap:8px; align-items:center; }
.sim-time-scale { min-height:44px; padding:8px 10px; border:1px solid var(--outline); border-radius:10px; background:var(--surface); color:var(--ink); font:16px var(--body); cursor:pointer; }
.sim-time-scale:focus-visible { outline:3px solid #f8c56c; outline-offset:3px; }
.simulation button { touch-action:manipulation; }
.simulation button:focus-visible,.simulation [role="slider"]:focus-visible { outline:3px solid #f8c56c; outline-offset:3px; }
.simulation [hidden] { display:none !important; }
.sim-start { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #176457; background:#176457; color:#fff; padding:11px 15px; min-height:44px; font-size:13px; font-weight:700; border-radius:10px; cursor:pointer; }
.sim-start:hover { background:#237d68; }
.sim-start:disabled { opacity:.5; cursor:wait; }
.sim-start .icon { width:17px; height:17px; }
.sim-icon-button { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--outline); background:var(--surface); color:var(--ink-muted); border-radius:10px; cursor:pointer; }
.sim-icon-button .icon { width:18px; height:18px; }
.sim-stage { position:relative; height:calc(100dvh - 285px); min-height:900px; max-height:1200px; overflow:hidden; isolation:isolate; border-radius:20px; background:#b8e1e3; border:1px solid #19384c; box-shadow:0 14px 40px #102c431a; }
.sim-stage:fullscreen { border-radius:0; width:100vw; height:100dvh; max-height:none; min-height:0; }
.sim-world { position:absolute; inset:0 0 var(--console-height); overflow:hidden; }
.sim-world > canvas { width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
.sim-world > canvas:active { cursor:grabbing; }
.sim-loading,.sim-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:40px; text-align:center; background:linear-gradient(150deg,#e7f3e7,#c4e8e6); color:#224f62; z-index:10; }
.sim-loading strong { font:700 24px var(--display); }
.sim-loading > span:last-child { font-size:14px; }
.sim-loading-mark { display:grid; place-items:center; width:70px; height:70px; background:#ffffff91; border-radius:22px; margin-bottom:10px; }
.sim-loading-mark .icon { width:34px; height:34px; }
.sim-error h2 { font-size:26px; }
.sim-error p { max-width:400px; font-size:17px; }
.sim-error button { background:#164e63; color:white; border:0; border-radius:12px; padding:14px 24px; cursor:pointer; }
.sim-window-frame { position:absolute; inset:0; pointer-events:none; border-top:10px solid #e3eee9; box-shadow:inset 0 5px 0 #37617966; }
.sim-window-frame i { position:absolute; top:0; bottom:-10px; width:11px; background:linear-gradient(90deg,#284f5c,#72928f,#d2e3d9); box-shadow:3px 0 8px #1239493b; }
.sim-window-frame i:first-child { left:13px; transform:rotate(5deg); transform-origin:top; }
.sim-window-frame i:last-child { right:13px; transform:rotate(-5deg); transform-origin:top; }
.sim-horizon-hud { position:absolute; z-index:3; top:20px; left:24px; right:24px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:10px; pointer-events:none; }
.sim-horizon-hud > * { pointer-events:auto; }
.sim-heading-tools { display:flex; align-items:flex-start; justify-content:center; gap:14px; }
.sim-binocular-toggle kbd { border:1px solid #b1d1d566; border-radius:4px; padding:1px 4px; font:11px var(--mono); }
.sim-binocular-toggle[aria-pressed="true"] { background:#31766b; border-color:#c2eedc; box-shadow:0 0 0 2px #8ec7b433; }
.sim-binocular-toggle:focus-visible { outline:3px solid #d3f4ab; outline-offset:3px; }
.sim-weather { display:flex; align-items:center; gap:8px; color:#edf6f5; font-size:14px; font-weight:700; }
.sim-weather small { display:block; font-size:12px; font-weight:400; margin-top:3px; letter-spacing:0; }
.sim-sun { font-size:30px; color:#eeb14d; }
.sim-compass { display:grid; grid-template-columns:24px auto 24px; align-items:center; justify-items:center; gap:5px 16px; padding:0 8px; color:#23505f; font:13px var(--mono); text-shadow:0 1px 2px #ffffffa6; }
.sim-compass b { font-size:32px; line-height:1.15; color:#123b4c; }
.sim-compass small { grid-column:1 / -1; width:100%; padding-top:7px; border-top:1px solid #49656b66; text-align:center; font-size:12px; white-space:nowrap; letter-spacing:.14em; }
.sim-glass-button { border:1px solid #b1d1d555; background:#15384ae8; color:#f0faf6; border-radius:10px; display:grid; place-items:center; width:44px; height:44px; cursor:pointer; }
.sim-glass-button .icon { width:21px; height:21px; }
.sim-binocular-toggle { width:auto; min-width:44px; display:flex; align-items:center; gap:7px; padding:0 10px; font:600 12px var(--body); }
.sim-view-actions { display:flex; gap:8px; justify-self:end; }
.sim-fullscreen-play { display:none; width:auto; padding:0 12px; font-size:14px; }
.sim-stage:fullscreen .sim-fullscreen-play { display:block; }
.sim-brief { position:absolute; top:156px; left:24px; width:310px; max-width:calc(100% - 48px); padding:16px 18px; border:1px solid #ffffff90; border-radius:15px; background:#f6fbefee; backdrop-filter:blur(12px); box-shadow:0 8px 24px #16374712; color:#214959; }
.sim-brief-top { display:flex; gap:12px; align-items:center; justify-content:space-between; font:12px var(--mono); letter-spacing:.07em; }
.sim-brief-top > span { color:#357b67; }
.sim-brief-top a { display:flex; align-items:center; gap:4px; font-size:12px; color:#356574; text-decoration:none; }
.sim-brief-top .icon { width:10px; height:10px; }
.sim-brief h2 { font:750 21px/1.2 var(--display); letter-spacing:-.03em; margin:10px 0; }
.sim-destination { display:block; margin-top:10px; font:12px var(--mono); color:#357567; }
.sim-buoy-region { border-top:1px solid #73978c38; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:10px; }
.sim-buoy-region label { font-size:12px; }
.sim-buoy-region select { border:0; border-radius:4px; color:#245847; background:#e0eee5; font:12px var(--body); min-height:36px; padding:5px; width:196px; max-width:100%; }
.sim-look-controls { position:absolute; right:24px; bottom:94px; display:flex; gap:3px; padding:3px; border-radius:9px; background:#f4faeddc; border:1px solid #ffffff80; }
.sim-look-controls button { background:transparent; color:#234e60; border:0; border-radius:6px; font:13px var(--body); padding:10px; cursor:pointer; }
.sim-look-controls button.is-current { background:#f7fff0b3; }
.sim-contact-label { position:absolute; left:50%; top:45%; display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:7px 10px; border:1px solid #ffffff80; border-radius:7px; background:#173a4ae8; color:#fff; font:13px var(--body); pointer-events:none; transform:translate(-50%,-100%); white-space:nowrap; }
.sim-contact-label small { color:#d5f4eb; font-size:12px; }
.sim-contact-dot { width:5px; height:5px; background:#ffb986; border-radius:50%; }
.sim-telemetry { position:absolute; bottom:0; left:0; right:0; padding:12px 30px 14px; display:flex; justify-content:space-between; align-items:center; background:linear-gradient(transparent,#122f48c9); color:white; }
.sim-telemetry > div:first-child,.sim-telemetry > div:last-child { min-width:86px; }
.sim-telemetry > div:last-child { text-align:right; }
.sim-telemetry small { display:block; font:12px var(--mono); color:#d0e5e6; letter-spacing:.13em; }
.sim-telemetry strong { display:block; font:30px var(--mono); }
.sim-telemetry em { font-size:13px; font-style:normal; color:#d8eded; margin-left:5px; }
.sim-vessel-name { display:flex; align-items:center; gap:10px; font:12px var(--mono); letter-spacing:.08em; padding-top:15px; }
.sim-vessel-name small { font-size:12px; margin-top:5px; letter-spacing:.1em; }
.sim-live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#8adeb7; box-shadow:0 0 0 4px #8adeb718; margin-right:4px; }
.sim-console { position:absolute; bottom:0; left:0; right:0; height:var(--console-height); display:grid; grid-template-columns:minmax(210px,1.15fr) minmax(175px,.9fr) minmax(185px,1fr) minmax(215px,1.15fr) minmax(190px,1fr); gap:10px; padding:12px; overflow-x:auto; background:linear-gradient(165deg,#26485b,#183449 70%); border-top:5px solid #8ea9a5; box-shadow:0 -6px 20px #0d26373b; color:var(--sim-ink); scrollbar-color:#8bb9b7 #163343; }
.sim-instrument { min-width:0; border:1px solid #4a6877; border-radius:12px; background:#102b3dcc; box-shadow:inset 0 0 0 3px #284555; display:flex; flex-direction:column; overflow:hidden; }
.sim-instrument header { display:flex; justify-content:space-between; align-items:center; gap:7px; padding:11px 10px; min-height:44px; color:#edf7f5; flex-wrap:wrap; }
.sim-instrument header > span { display:flex; align-items:center; gap:6px; font:700 13px var(--body); letter-spacing:.02em; white-space:nowrap; }
.sim-instrument header small { font-size:12px; color:#c0d3dc; margin-left:3px; letter-spacing:0; }
.sim-instrument header .icon { width:16px; height:16px; flex-basis:16px; color:#c3e7df; }
.sim-instrument button { background:transparent; border:1px solid #6b8a98; color:#e2eff0; border-radius:6px; min-height:34px; padding:5px 8px; cursor:pointer; font:13px var(--body); }
.sim-instrument button:hover { background:#35596d; color:white; }
.sim-instrument header button { min-height:28px; border:0; padding:3px; }
.sim-instrument header strong { color:var(--sim-mint); font:12px var(--mono); white-space:nowrap; }
.sim-instrument footer { display:flex; justify-content:space-between; gap:6px; padding:10px; margin-top:auto; font:12px var(--body); color:#bed3de; flex-wrap:wrap; }
.sim-instrument footer strong { color:#d5eee6; font-weight:400; }
.sim-chart-surface,.sim-radar-surface { position:relative; min-height:0; flex:1; margin:0 8px; border:1px solid #3d667360; background:#0b2433; overflow:hidden; border-radius:4px; }
.sim-chart-surface canvas,.sim-radar-surface canvas { width:100%; height:100%; position:absolute; inset:0; }
.sim-chart-zoom { position:absolute; bottom:7px; right:7px; display:flex; gap:4px; }
.sim-chart-zoom button { width:25px; height:25px; min-height:25px; padding:0; font-size:16px; background:#f6f6e8e8; color:#294b54; border-color:#668d8c; }
.sim-chart.is-expanded { position:absolute; top:22px; left:22px; width:min(760px,calc(100% - 44px)); height:calc(100% - 44px); max-height:640px; min-height:280px; z-index:20; background:#eff2e8; box-shadow:0 18px 50px #0b263b50; border-color:#c5cbbb; }
.sim-chart.is-expanded .sim-chart-surface { background:transparent; }
.sim-chart.is-expanded header { padding:12px; background:#f1f2e5e8; color:#2f514e; }
.sim-chart.is-expanded header > span { font-size:12px; }
.sim-chart.is-expanded header .icon,.sim-chart.is-expanded header small,.sim-chart.is-expanded header button { color:#3f6864; }
.sim-chart.is-expanded footer { background:#f1f2e5dd; color:#3f6562; }
.sim-chart.is-expanded footer strong { color:#315852; }
.sim-chart.is-expanded .sim-chart-tools { background:#f1f2e5dd; }
.sim-chart.is-expanded .sim-chart-tools button { color:#3d6760; border-color:#94b1a0; }
.sim-chart.is-expanded .sim-chart-tools button[aria-pressed="true"] { background:#d4e5d8; color:#1f5749; }
.sim-chart.is-expanded .sim-chart-tools button:hover { background:#d4e5d8; color:#1f5749; }
.sim-chart.is-expanded .sim-chart-tools > span { color:#416d61; }
.sim-chart-course { margin:0 8px 8px; padding:8px 6px; border:1px solid #6b878f; border-radius:6px; background:#0c2534; }
.sim-chart-course > strong { display:block; font:600 13px/1.35 var(--body); color:#f4e0ed; }
.sim-chart-course dl { display:flex; justify-content:space-between; align-items:end; gap:6px; margin:6px 0 0; }
.sim-chart-course dl > div:last-child { text-align:right; }
.sim-chart-course dt { font:12px/1.4 var(--body); color:#c0d4de; white-space:nowrap; }
.sim-chart-course dd { margin:2px 0 0; font:21px/1.1 var(--mono); color:#f4f8ec; white-space:nowrap; }
.sim-chart-course [data-route-distance] { font-size:14px; line-height:1.5; }
.sim-chart.is-expanded .sim-chart-course { margin:0; padding:10px 12px; border:0; border-top:1px solid #9fae9f; border-bottom:1px solid #9fae9f; border-radius:0; background:#f1f2e5eb; }
.sim-chart.is-expanded .sim-chart-course > strong { color:#883166; }
.sim-chart.is-expanded .sim-chart-course dt { color:#496760; }
.sim-chart.is-expanded .sim-chart-course dd { color:#293e45; }
.sim-route-key { color:#883166; }
.sim-track-key { color:#236961; }
@media(min-width:701px) {
  .sim-chart.is-expanded .sim-chart-course { display:flex; justify-content:space-between; align-items:center; gap:20px; }
  .sim-chart.is-expanded .sim-chart-course dl { min-width:185px; margin:0; }
}
.sim-chart-placeholder { display:grid; place-items:center; border:1px dashed #678d9377; border-radius:12px; color:#a6c3c1; font:12px var(--mono); letter-spacing:.08em; }
.sim-stick-row { display:flex; justify-content:center; align-items:center; height:90px; margin-top:-5px; }
.sim-port,.sim-starboard { font:12px var(--mono); letter-spacing:.09em; color:#f59b94; }
.sim-starboard { color:#9cd6b2; }
.sim-stick { position:relative; width:110px; height:90px; touch-action:none; cursor:ew-resize; outline-offset:-1px; border-radius:15px; }
.sim-stick-scale { position:absolute; width:90px; height:48px; border:1px dashed #71939380; border-bottom:0; border-radius:90px 90px 0 0; top:4px; left:10px; }
.sim-stick-well { position:absolute; bottom:4px; left:24px; right:24px; height:27px; border-radius:50%; border:1px solid #56717f; background:radial-gradient(ellipse,#071e2e 30%,#294552 70%,#42606e); }
.sim-stick-lever { position:absolute; left:calc(50% - 5px); bottom:15px; width:10px; height:65px; transform-origin:center 90%; transform:rotate(var(--stick-angle,0deg)); background:linear-gradient(90deg,#648393,#d8e8e9,#637e8b); border-radius:5px; pointer-events:none; }
.sim-stick-lever span { position:absolute; top:-2px; left:-12px; width:34px; height:31px; background:linear-gradient(#e0ede7,#809f9f); border:2px solid #d8e6dd; border-radius:10px 10px 8px 8px; box-shadow:0 5px 8px #041b2950; }
.sim-rudder-actions { display:flex; gap:5px; justify-content:center; padding:0 6px; }
.sim-rudder-actions button { min-height:36px; font-size:13px; }
.sim-rudder-actions button:nth-child(2) { color:#98dfc5; border-color:#629280; }
.sim-radio header label { display:flex; gap:5px; align-items:center; color:#c9e1e4; font:13px var(--body); white-space:nowrap; }
.sim-radio header input { accent-color:#acd9be; width:16px; height:16px; }
.sim-radio-display { border:1px solid #6a977e; margin:0 10px; padding:6px 8px; border-radius:5px; color:#b2edc9; background:linear-gradient(135deg,#203f3e,#14352f); box-shadow:inset 0 2px 6px #001a1666; }
.sim-radio-display > span { font:12px var(--body); letter-spacing:.04em; color:#b9d8c9; }
.sim-radio-display > div { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.sim-radio-display strong { font:30px/1.1 var(--mono); letter-spacing:.08em; }
.sim-radio-display select { min-height:36px; padding:4px; font:13px var(--body); color:#e1f9e5; border:1px solid #7c9c84; background:#234839; border-radius:4px; width:auto; min-width:0; }
.sim-radio-log { flex:1; min-height:45px; overflow-y:auto; margin:9px 11px; font:14px/1.5 var(--body); color:#d4e4ea; }
.sim-radio-log p { margin:0 0 8px; font-size:14px; }
.sim-radio-log b { font-size:13px; color:#c3efd8; margin-right:5px; }
.sim-radio-actions { display:flex; gap:5px; margin:0 10px 10px; }
.sim-radio-actions button { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; font-size:13px; }
.sim-radio-actions button:first-child { background:#365b52; border-color:#517e6a; color:#e2f7e9; }
.sim-radio-actions .icon { width:12px; height:12px; }
.sim-radar-surface { border:0; background:radial-gradient(ellipse,#102e2b,#0b2129 70%); }
.sim-radar-north { position:absolute; top:4px; right:5px; font:12px var(--mono); color:#739a82; }
.sim-radar-contact { position:absolute; bottom:3px; left:5px; font:12px var(--mono); color:#a5caa8; }
.sim-radar footer { font-size:12px; }
.sim-radar footer strong { display:inline-block; margin-left:4px; }
.sim-bottom-bar { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--ink-muted); font:12px var(--mono); padding:13px 3px; }
.sim-bottom-bar > span:first-child { display:flex; gap:8px; align-items:center; }
.sim-bottom-bar b { font-weight:400; }
.sim-bottom-bar .sim-live-dot { background:#3b9f79; }
.sim-keyboard-help { display:flex; gap:4px; align-items:center; }
.sim-keyboard-help kbd { padding:2px 4px; border:1px solid var(--outline); border-radius:4px; background:var(--surface); font-size:12px; }
.sim-watch { border:1px solid var(--outline); border-radius:14px; padding:18px 20px; background:var(--surface); }
.sim-watch .eyebrow { display:block; margin-bottom:12px; font-size:12px; letter-spacing:.12em; }
.sim-watch ol { display:flex; gap:18px; list-style:none; counter-reset:encounter; margin:0; padding:0; }
.sim-watch li { counter-increment:encounter; font-size:13px; line-height:1.5; color:var(--ink-muted); display:flex; gap:7px; align-items:flex-start; flex:1; }
.sim-watch li::before { content:counter(encounter); display:grid; place-items:center; flex:0 0 19px; height:19px; border:1px solid var(--outline); border-radius:50%; font:12px var(--mono); }
.sim-watch li.is-complete { color:var(--leaf-deep); }
.sim-watch li.is-complete::before { content:'✓'; border-color:var(--leaf-deep); background:var(--leaf-soft); }
.sim-watch li b { font-weight:700; color:var(--ink); }
.sim-watch li small { display:block; margin-top:3px; font-size:12px; }
.sim-watch li.is-active::before { border-color:var(--sky); background:var(--sky-soft); color:var(--sky-deep); }
.sim-watch li.is-active small { color:var(--sky-deep); }
.sim-watch li.needs-review::before { content:'!'; border-color:var(--sun-deep); background:var(--sun-soft); color:var(--sun-deep); }
.sim-result-log { list-style:none; text-align:left; padding:0; margin:15px 0 20px; }
.sim-result-log li { margin-top:10px; padding-left:10px; border-left:3px solid #d5a463; }
.sim-result-log li.is-complete { border-left-color:#4eaa85; }
.sim-result-log strong { display:block; font-size:12px; }
.sim-result-log span { display:block; margin-top:3px; font-size:12px; line-height:1.4; }
.sim-debrief { position:absolute; z-index:30; top:50%; left:50%; transform:translate(-50%,-50%); width:min(460px,90%); max-height:calc(100% - 32px); overflow-y:auto; padding:24px; text-align:center; border:1px solid #e6efe0; border-radius:20px; background:#f7fbefeF; backdrop-filter:blur(15px); box-shadow:0 20px 60px #0e2c5866; color:#224556; }
.sim-debrief-icon { display:grid; place-items:center; width:55px; height:55px; margin:0 auto 16px; border-radius:50%; background:#def0df; color:#3e7d68; }
.sim-debrief .eyebrow { display:block; font-size:12px; color:#537c6d; }
.sim-debrief h2 { font:750 28px/1.15 var(--display); margin:12px 0; }
.sim-debrief p { font-size:14px; line-height:1.65; }
.sim-result-stats { display:flex; justify-content:center; gap:40px; margin:20px 0; }
.sim-result-stats strong { display:block; font:22px var(--mono); }
.sim-result-stats span { font-size:12px; color:#577984; }
/* Sound mixer and VHF conversation drawer. */
.sim-sound-controls { display:flex; align-items:center; gap:4px; position:relative; }
.sim-sound-toggle { display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--outline); color:var(--ink); border-radius:10px; min-height:44px; padding:8px 12px; font-size:14px; cursor:pointer; white-space:nowrap; }
.sim-sound-toggle .icon { width:16px; height:16px; }
.sim-sound-toggle[aria-pressed="true"] { color:var(--ink-muted); }
.sim-sound-mixer summary { padding:12px 6px; cursor:pointer; font:12px var(--mono); color:var(--ink-muted); }
.sim-sound-mixer > div { position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:265px; background:var(--surface); border:1px solid var(--outline); border-radius:12px; padding:17px; box-shadow:0 10px 30px #092a3c30; }
.sim-sound-mixer label { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); margin-bottom:12px; }
.sim-sound-mixer output { margin-left:auto; font:12px var(--mono); }
.sim-sound-mixer input[type="range"] { width:100%; accent-color:#3e9780; }
.sim-sound-mixer input[type="checkbox"] { accent-color:#3e9780; }
.sim-sound-mixer p { font-size:12px; line-height:1.5; color:var(--ink-muted); margin:10px 0 0; }
.sim-notice { color:var(--ink-muted); font-size:12px; margin:0 0 10px; }
.sim-call-indicator { font:12px var(--mono); color:#112e35; background:#b5ebca; border-radius:3px; padding:3px 4px; }
.sim-radio-conversation { position:absolute; z-index:22; right:18px; bottom:calc(var(--console-height) + 12px); width:min(460px,calc(100% - 36px)); max-height:calc(100% - var(--console-height) - 180px); overflow:auto; border:1px solid #799b91; border-radius:14px; background:#15343bf5; color:#e3f1e9; box-shadow:0 12px 35px #08283855; backdrop-filter:blur(12px); padding:18px; }
.sim-radio-conversation header { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.sim-radio-eyebrow { font:12px var(--mono); letter-spacing:.08em; color:#9ac6b6; }
.sim-radio-conversation h2 { font:700 18px/1.3 var(--display); color:#edf8ee; margin:5px 0 0; }
.sim-radio-conversation header button { background:#305059; color:#e9f6ef; border:1px solid #73958c66; border-radius:7px; min-width:32px; height:32px; font-size:22px; cursor:pointer; }
.sim-incoming-message { font-size:16px; line-height:1.55; margin:14px 0; border-left:2px solid #8bc5ae; padding-left:12px; }
.sim-reply-prompt { font:12px var(--mono); letter-spacing:.1em; color:#9cc1b8; margin:12px 0 8px; }
.sim-radio-replies { display:grid; gap:7px; }
.sim-radio-replies button { text-align:left; border:1px solid #789e8f; border-radius:8px; padding:11px 13px; background:#284c4f; color:#edf7eb; font:15px/1.5 var(--body); cursor:pointer; }
.sim-radio-replies button:hover { background:#3e665e; border-color:#a9d7bd; }
.sim-radio-replies button:disabled { opacity:.5; cursor:default; }
.sim-radio-replies button:focus-visible,.sim-radio-conversation button:focus-visible { outline:2px solid #dbefd0; outline-offset:3px; }
.sim-radio-conversation footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; color:#9dbcb8; }
.sim-radio-conversation footer > span { font-size:12px; line-height:1.5; max-width:200px; }
.sim-radio-conversation footer button { display:flex; align-items:center; gap:5px; white-space:nowrap; font-size:12px; color:#cde5d8; padding:6px; border:0; background:transparent; cursor:pointer; }
.sim-radio-conversation footer .icon { width:12px; height:12px; }
.sim-radio-report { border-top:1px solid #cadccc; text-align:left; margin:15px 0; padding-top:12px; }
.sim-radio-report h3 { font:700 16px var(--display); margin:0; }
.sim-radio-report > p { font-size:12px; margin:6px 0; }
.sim-radio-alert { grid-column:1 / -1; justify-self:end; display:flex; align-items:center; gap:8px; border:1px solid #c8eac6; background:#234d49f5; color:#e7f4dc; border-radius:10px; padding:10px 14px; font-size:14px; cursor:pointer; box-shadow:0 4px 12px #123b4330; }
.sim-radio-alert .icon { width:15px; height:15px; }
.sim-radio-conversation footer { flex-wrap:wrap; }
.sim-radio-conversation footer > span { flex:1 1 100%; max-width:none; }
.sim-radio-conversation footer button { min-height:30px; }

/* Chart plotter and detented propulsion lever. */
.sim-chart-surface { background:#faf9ee; border-color:#748c83; }
.sim-chart-surface canvas { cursor:grab; touch-action:none; }
.sim-chart-surface canvas:active { cursor:grabbing; }
.sim-chart-tools { display:flex; align-items:center; gap:6px; padding:0 8px 8px; flex-wrap:wrap; }
.sim-chart-tools button { padding:5px 8px; font-size:13px; min-height:32px; }
.sim-chart-tools button[aria-pressed="true"] { background:#345f58; color:#d5f5d7; border-color:#668d80; }
.sim-chart-tools > span { font:12px var(--body); color:#c2dfd4; margin-left:auto; }
.sim-chart footer { font-size:12px; padding:9px; }
.sim-chart footer b { font-weight:400; }
.sim-chart-caption { display:none; margin:0; padding:0 12px 10px; text-align:center; font:12px/1.6 var(--body); color:#304e4a; background:#f1f2e5ee; }
.sim-chart.is-expanded .sim-chart-caption { display:block; }
.sim-chart-caption span { font-size:12px; font-family:var(--sans,sans-serif); }
.sim-steering .sim-stick-row { flex:1; min-height:128px; margin-top:12px; }
.sim-rudder-note { text-align:center; font:14px/1.6 var(--body); color:#c0d7e0; margin:15px 8px; }
.sim-engine header { padding:10px 8px; }
.sim-engine header > span { font-size:13px; letter-spacing:.02em; }
.sim-engine header > small { display:none; }
.sim-engine-display { text-align:center; line-height:1; background:#0b242a; border:1px solid #789b8d; margin:0 8px; padding:8px 3px; border-radius:6px; box-shadow:inset 0 2px 4px #061318; }
.sim-engine-display > span { display:block; font:12px var(--body); color:#bfd6c8; letter-spacing:.06em; }
.sim-engine-display > strong { display:block; font:700 15px/1.65 var(--body); color:#e1f7de; }
.sim-engine-display > small { display:block; font:12px/1.4 var(--body); color:#bfd9cc; }
.sim-engine-display b { font-weight:400; }
.sim-telegraph { --engine-position:.125; position:relative; flex:1; min-height:190px; margin:10px 8px 0; cursor:ns-resize; touch-action:none; border-radius:8px; background:linear-gradient(100deg,#294452,#122c39 60%); border:1px solid #6c8990; user-select:none; }
.sim-engine-detents { position:absolute; inset:7px 3px 7px 41px; display:flex; flex-direction:column; justify-content:space-between; }
.sim-engine-detents span { position:relative; color:#cae7db; font:12px/1.2 var(--body); white-space:nowrap; }
.sim-engine-detents span::before { content:''; position:absolute; left:-12px; top:50%; width:7px; border-top:1px solid #789088; }
.sim-engine-detents span[data-notch="0"] { color:#ead3a3; }
.sim-engine-detents span[data-direction="astern"] { color:#f0c1b4; }
.sim-engine-detents span.is-current { color:#f5f3d7; font-weight:700; }
.sim-engine-detents span.is-current::before { border-color:#fff0bc; border-width:2px; }
.sim-engine-slot { position:absolute; top:11px; bottom:11px; left:15px; width:9px; background:#061923; border-radius:8px; box-shadow:inset 2px 0 2px #000,1px 0 1px #728f91; }
.sim-engine-lever { position:absolute; left:0; top:calc(13px + (100% - 26px)*var(--engine-position)); width:36px; height:10px; background:linear-gradient(#d3ded9,#54727a); border:1px solid #91a7a6; border-radius:4px; transform:translateY(-50%); pointer-events:none; z-index:1; }
.sim-engine-lever span { position:absolute; width:22px; height:17px; top:-5px; left:2px; border-radius:5px; background:linear-gradient(#e8e4d3,#7e938e); border:1px solid #cadad0; box-shadow:0 3px 5px #00131a; }
.sim-engine footer { padding:5px 8px 7px; align-items:center; }
.sim-engine footer button { font-size:13px; min-height:34px; color:#ffe9bf; border-color:#8d9482; }
.sim-engine footer > span { font-size:12px; }

/* Readable bridge HUD and responsive instrument panels. */
.sim-speed { display:flex; flex-direction:column; align-items:center; gap:5px; justify-self:start; min-width:0; padding:0 8px; color:#123b4c; text-shadow:0 1px 2px #ffffffa6; }
.sim-speed small { order:1; display:block; width:100%; padding-top:7px; border-top:1px solid #49656b66; text-align:center; font:12px/1.4 var(--mono); color:#23505f; letter-spacing:.05em; }
.sim-speed strong { display:block; font:32px/1.15 var(--mono); white-space:nowrap; }
.sim-speed em { font:16px var(--mono); font-style:normal; margin-left:6px; color:#23505f; }
.sim-console:focus-visible { outline:3px solid #f8c56c; outline-offset:-3px; }
.sim-engine header,.sim-steering header,.sim-radio header { min-height:48px; }
.sim-chart-zoom button { width:36px; height:36px; min-height:36px; font-size:21px; }
.sim-chart.is-expanded header > span { font-size:14px; }
.sim-chart.is-expanded .sim-chart-tools > span { display:block; }
.sim-chart:not(.is-expanded) .sim-chart-tools > span { display:none; }
.sim-instrument header small { display:none; }
.sim-stage:fullscreen { --console-height:min(400px,48dvh); }
.sim-stage:fullscreen .sim-console { overflow-y:auto; grid-template-rows:minmax(370px,1fr); }
@media(max-width:1200px) {
  .simulation-main { padding:24px 18px; }
  .sim-run-controls { flex-wrap:wrap; }
  .sim-keyboard-help { display:none; }
}
@media(max-width:700px) {
  .simulation-main { padding:22px 12px; }
  .sim-heading { margin-bottom:18px; gap:8px; }
  .sim-heading h1 { font-size:29px; }
  .sim-heading .eyebrow { font-size:12px; }
  .sim-heading p { font-size:15px; }
  .sim-open-badge { padding:8px 10px; font-size:12px; }
  .sim-open-badge .icon { width:15px; }
  .sim-toolbar { gap:10px; }
  .sim-voyage-summary { width:100%; }
  .sim-voyage-summary progress { margin-left:auto; }
  .sim-run-controls { width:100%; gap:8px; }
  .sim-run-controls .sim-start { flex:1; }
  .sim-sound-controls { width:100%; justify-content:flex-end; }
  .simulation { --console-height:1120px; --radio-height:0px; }
  .simulation[data-radio-open="true"] { --radio-height:490px; }
  .sim-stage { height:calc(560px + var(--console-height) + var(--radio-height)); min-height:0; max-height:none; border-radius:15px; }
  .sim-world { bottom:calc(var(--console-height) + var(--radio-height)); }
  .sim-console { bottom:var(--radio-height); grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(350px,1fr) 380px 325px; padding:8px; gap:8px; }
  .sim-horizon-hud { left:14px; right:14px; top:20px; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; }
  .sim-speed { padding:0; }
  .sim-speed strong { font-size:28px; }
  .sim-compass { grid-template-columns:14px auto 14px; justify-self:center; gap:5px 3px; padding:0; font-size:12px; }
  .sim-compass b { font-size:28px; }
  .sim-compass small { font-size:12px; letter-spacing:0; }
  .sim-brief { top:154px; left:20px; width:calc(100% - 40px); max-width:none; padding:16px; }
  .sim-brief h2 { font-size:24px; }
  .sim-buoy-region { gap:8px; }
  .sim-buoy-region select { width:196px; }
  .sim-look-controls { right:18px; bottom:96px; }
  .sim-telemetry { padding:12px 18px; }
  .sim-telemetry strong { font-size:28px; }
  .sim-weather .sim-sun { display:none; }
  .sim-vessel-name { display:none; }
  .sim-instrument header { padding:10px 8px; }
  .sim-instrument header > span { font-size:12px; }
  .sim-instrument footer { padding:8px; font-size:12px; }
  .sim-chart { grid-column:1; grid-row:1; }
  .sim-radar { grid-column:2; grid-row:1; }
  .sim-steering { grid-column:1; grid-row:2; }
  .sim-engine { grid-column:2; grid-row:2; }
  .sim-radio { grid-column:1 / -1; grid-row:3; }
  .sim-steering .sim-stick { width:88px; }
  .sim-steering .sim-stick-scale { width:70px; left:9px; }
  .sim-rudder-actions { gap:3px; padding:0 4px; }
  .sim-rudder-actions button { padding:5px; font-size:13px; }
  .sim-rudder-note { margin:12px 5px; font-size:14px; }
  .sim-engine-detents { left:34px; }
  .sim-engine-display > strong { font-size:14px; }
  .sim-chart-tools { gap:4px; padding:0 6px 6px; }
  .sim-chart-tools button { padding:5px 6px; }
  .sim-chart.is-expanded { top:16px; left:12px; width:calc(100% - 24px); height:calc(560px - 32px); min-height:290px; max-height:none; }
  .sim-radio-conversation { right:0; left:0; bottom:0; width:100%; height:var(--radio-height); max-height:var(--radio-height); border-radius:0; border:0; border-top:1px solid #6f958b; padding:18px; background:#15343b; }
  .sim-radio-replies button { min-height:44px; }
  .sim-bottom-bar { font-size:12px; gap:10px; }
  .sim-watch { padding:16px; }
  .sim-watch ol { gap:12px; display:grid; grid-template-columns:1fr 1fr; }
  .sim-stage:fullscreen { height:100dvh; --console-height:min(400px,48dvh); }
  .sim-stage:fullscreen .sim-world { bottom:var(--console-height); }
  .sim-stage:fullscreen .sim-console { bottom:0; grid-template-columns:repeat(5,minmax(200px,1fr)); grid-template-rows:minmax(370px,1fr); overflow:auto; }
  .sim-stage:fullscreen .sim-console > .sim-instrument { grid-column:auto; grid-row:1; }
  .sim-stage:fullscreen .sim-chart.is-expanded { height:calc(100dvh - 32px); max-height:none; }
  .sim-stage:fullscreen .sim-radio-conversation { z-index:25; height:auto; max-height:70dvh; }
  .sim-stage:fullscreen .sim-view-actions { flex-direction:column-reverse; }
}

.sim-telemetry { pointer-events:none; }
.simulation[data-radio-open="true"] .sim-radio-alert { display:none; }
@media(max-height:700px) {
  .sim-stage:fullscreen { --console-height:40dvh; }
  .sim-stage:fullscreen .sim-horizon-hud { top:14px; gap:6px; }
  .sim-stage:fullscreen .sim-speed { padding:6px 10px; }
  .sim-stage:fullscreen .sim-speed strong { font-size:28px; }
  .sim-stage:fullscreen .sim-compass { padding:6px 10px; }
  .sim-stage:fullscreen .sim-compass b { font-size:28px; }
  .sim-stage:fullscreen .sim-look-controls { left:18px; right:auto; bottom:16px; }
  .sim-stage:fullscreen .sim-weather,.sim-stage:fullscreen .sim-vessel-name,.sim-stage:fullscreen .sim-contact-label { display:none; }
  .sim-stage:fullscreen .sim-telemetry > div:last-child { margin-left:auto; }
  .sim-stage:fullscreen .sim-telemetry strong { font-size:24px; }
.sim-stage:fullscreen .sim-radio-conversation { bottom:16px; max-height:calc(100dvh - 32px); }
}

/* The chart and radar share the selected vessel and a readable data panel. */
.sim-plot-layout { display:flex; flex:1; min-height:0; min-width:0; }
.sim-target-picker,.sim-radar-advanced { display:none; }
.sim-target-summary { margin:6px 8px 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; }
.sim-instrument:not(.is-expanded) .sim-target-card { display:none; }
.sim-instrument.is-expanded .sim-target-summary { display:none; }
.sim-instrument.is-expanded .sim-target-picker { display:flex; align-items:center; gap:10px; padding:9px 12px; font:13px var(--body); }
.sim-target-picker select { flex:1; min-width:0; }
.sim-target-picker select,.sim-radar-tools select,.sim-radar-measure input[type="number"] { background:#0c2827; color:#c9edd3; border:1px solid #537e70; border-radius:5px; padding:6px; min-height:34px; font:13px var(--body); }
.sim-instrument select:focus-visible,.sim-instrument input:focus-visible,.sim-instrument canvas:focus-visible { outline:2px solid #f8c56c; outline-offset:-2px; }
.sim-chart.is-expanded { width:min(1000px,calc(100% - 44px)); max-height:780px; }
.sim-chart.is-expanded .sim-target-picker { color:#315852; background:#f1f2e5eb; }
.sim-chart.is-expanded .sim-target-picker select { background:#f7f8ed; color:#315852; border-color:#94b1a0; }
.sim-instrument.is-expanded.has-target .sim-plot-layout { display:grid; grid-template-columns:minmax(0,1fr) 248px; }
.sim-target-card { min-width:0; overflow:auto; margin:0 8px 0 0; padding:14px; background:#102f30; border:1px solid #567f70; border-radius:7px; color:#d0eddf; scrollbar-width:thin; }
.sim-target-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.sim-target-heading small { display:block; font:11px var(--mono); color:#97bfad; letter-spacing:.1em; margin-bottom:5px; }
.sim-target-heading strong { display:block; font:700 19px/1.2 var(--body); }
.sim-target-heading button { width:28px; min-height:28px; padding:0; flex-shrink:0; font-size:20px; }
.sim-target-status { font:12px var(--mono); margin:13px 0 4px; color:#c3e9bc; }
.sim-target-card[data-risk="true"] .sim-target-status { color:#ffd7a7; }
.sim-target-metrics { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; margin:0; }
.sim-target-metrics > div { min-width:0; border-bottom:1px solid #6089764a; padding:11px 0; }
.sim-target-metrics dt { font:12px/1.4 var(--body); color:#a9c5b9; }
.sim-target-metrics abbr { text-decoration:none; }
.sim-target-metrics dd { margin:3px 0 0; font:14px/1.3 var(--mono); white-space:nowrap; }
.sim-target-metrics .sim-target-primary dd { font-size:19px; color:#e1fbc9; }
.sim-target-relative { grid-column:1 / -1; }
.sim-target-note { font:12px/1.55 var(--body); color:#a9c5b9; margin:12px 0 0; }
.sim-chart .sim-target-card { background:#f5f4e7f2; border-color:#94b1a0; color:#29453f; }
.sim-chart .sim-target-heading small,.sim-chart .sim-target-metrics dt,.sim-chart .sim-target-note { color:#526d62; }
.sim-chart .sim-target-metrics dd,.sim-chart .sim-target-primary dd { color:#315248; }
.sim-chart .sim-target-status { color:#315e4c; }
.sim-chart .sim-target-card[data-risk="true"] .sim-target-status { color:#9e4135; }
.sim-chart .sim-target-heading button { color:#315248; border-color:#94b1a0; }
.sim-radar { background:#0a2329; box-shadow:inset 0 0 0 3px #25473f; }
.sim-radar-header-actions { display:flex; align-items:center; gap:9px; }
.sim-radar-header-actions [data-sim-action="radar"] { display:grid; place-items:center; min-width:28px; }
.sim-radar-tools { display:flex; align-items:center; gap:10px; padding:0 8px 8px; }
.sim-radar-tools label { min-width:0; }
.sim-radar-tools label > span { display:none; font:11px var(--mono); color:#a5c9b8; margin-bottom:4px; }
.sim-radar-tools select { max-width:100%; min-height:30px; font-size:12px; }
.sim-radar-mode { margin-left:auto; color:#a5c9b8; font:10px var(--mono); white-space:nowrap; }
.sim-radar-surface { background:#061b1a; border-radius:8px; }
.sim-radar-surface canvas { cursor:crosshair; touch-action:none; }
.sim-radar-north,.sim-radar-contact { pointer-events:none; color:#a0c8a9; font-size:10px; padding:3px; }
.sim-radar footer { color:#a9c5b9; }
.sim-radar.is-expanded { position:absolute; z-index:20; inset:22px auto auto 22px; width:calc(100% - 44px); height:calc(100% - 44px); max-height:820px; min-height:300px; background:#0b2226; color:#c1d8c6; border-color:#6b9682; box-shadow:0 18px 50px #0b263b70; }
.sim-radar.is-expanded header { padding:12px; border-bottom:1px solid #355c4d; }
.sim-radar.is-expanded .sim-radar-tools { padding:12px 12px 0; flex-wrap:wrap; }
.sim-radar.is-expanded .sim-radar-tools label > span { display:block; }
.sim-radar.is-expanded .sim-radar-tools .sim-radar-advanced { display:block; }
.sim-radar.is-expanded .sim-radar-tools select { font-size:14px; min-height:36px; }
.sim-radar.is-expanded .sim-radar-mode { font-size:12px; }
.sim-radar.is-expanded .sim-radar-measure { display:flex; }
.sim-radar.is-expanded .sim-radar-hint { display:block; }
.sim-radar.is-expanded .sim-radar-north,.sim-radar.is-expanded .sim-radar-contact { font-size:12px; }
.sim-radar-measure { align-items:center; flex-wrap:wrap; gap:10px 16px; padding:10px 12px 0; font:12px var(--body); color:#c1d8c6; }
.sim-radar-measure label { display:flex; align-items:center; gap:6px; }
.sim-radar-measure input[type="checkbox"] { width:16px; height:16px; accent-color:#a4d3a4; }
.sim-radar-measure input[type="number"] { width:76px; }
.sim-radar-measure input:disabled { opacity:.4; }
.sim-radar-measure:not(.is-measuring) > label:not(:first-child),.sim-radar-measure:not(.is-measuring) > output { display:none; }
.sim-radar-measure output { margin-left:auto; font:12px var(--mono); color:#dacf92; }
.sim-radar-measure b { font-weight:400; }
.sim-radar-hint { color:#abc3b4; font:12px/1.4 var(--body); margin:8px 12px 0; }
.sim-radar-placeholder { display:grid; place-items:center; border:1px dashed #678d9377; border-radius:12px; color:#a6c3c1; font:12px var(--mono); letter-spacing:.08em; }
@media(max-width:700px) {
  .sim-chart-placeholder { grid-column:1; grid-row:1; }
  .sim-radar-placeholder { grid-column:2; grid-row:1; }
  .sim-radar-tools { gap:5px; flex-wrap:wrap; }
  .sim-radar-mode { margin-left:0; }
  .sim-chart.is-expanded,.sim-radar.is-expanded { position:fixed; top:10px; left:10px; width:calc(100% - 20px); height:calc(100dvh - 20px); min-height:0; max-height:none; }
  .sim-instrument.is-expanded.has-target .sim-plot-layout { display:flex; flex-direction:column; }
  .sim-instrument.is-expanded .sim-plot-layout > .sim-chart-surface,.sim-instrument.is-expanded .sim-plot-layout > .sim-radar-surface { flex:1; min-height:170px; }
  .sim-instrument.is-expanded .sim-plot-layout { overflow:auto; }
  .sim-instrument.is-expanded .sim-target-card { flex:none; margin:8px 8px 0; padding:10px; overflow:visible; }
  .sim-target-heading strong { font-size:16px; }
  .sim-target-status { margin:7px 0 0; }
  .sim-target-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 6px; }
  .sim-target-metrics > div { padding:6px 0; }
  .sim-target-metrics dt { font-size:11px; }
  .sim-target-metrics dd,.sim-target-metrics .sim-target-primary dd { font-size:13px; }
  .sim-target-relative { grid-column:auto; }
  .sim-target-note { font-size:11px; margin-top:7px; }
  .sim-radar.is-expanded .sim-radar-tools { gap:8px; padding-top:8px; }
  .sim-radar.is-expanded .sim-radar-mode { display:none; }
  .sim-radar.is-expanded .sim-radar-measure { gap:8px; }
  .sim-radar-measure input[type="number"] { width:65px; min-height:30px; }
  .sim-radar-measure output { margin:0; flex-basis:100%; }
  .sim-radar-hint { margin-top:5px; }
  .sim-stage:fullscreen .sim-chart.is-expanded,.sim-stage:fullscreen .sim-radar.is-expanded { height:calc(100dvh - 20px); }
}
@media(max-width:360px) {
  .simulation { --console-height:1730px; }
  .sim-console { grid-template-columns:minmax(0,1fr); grid-template-rows:360px 280px 360px 390px minmax(280px,1fr); }
  .sim-chart { grid-column:1; grid-row:1; }
  .sim-radar { grid-column:1; grid-row:2; }
  .sim-steering { grid-column:1; grid-row:3; }
  .sim-engine { grid-column:1; grid-row:4; }
  .sim-radio { grid-column:1; grid-row:5; }
  .sim-radar-placeholder { grid-column:1; grid-row:2; }
}

/* Passage library and quiet, self-directed watches. */
.sim-voyage-library { margin:0 0 22px; }
.sim-voyage-library-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px; }
.sim-voyage-library-heading > span:last-child { font-size:12px; color:var(--ink-muted); }
.sim-voyage-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.sim-voyage-cards button { display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-height:168px; padding:16px; border:1px solid var(--outline); border-radius:14px; color:var(--ink); background:var(--surface); cursor:pointer; transition:border-color .15s,background .15s; }
.sim-voyage-cards button[aria-pressed="true"] { border-color:#217b68; background:#edf6ee; box-shadow:inset 0 3px 0 #217b68; }
.sim-voyage-cards button:disabled { cursor:default; opacity:.72; }
.sim-voyage-cards button:disabled[aria-pressed="true"] { opacity:1; }
.sim-voyage-tag { font:600 11px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:#367264; margin-bottom:11px; }
.sim-voyage-cards strong { font:700 17px/1.25 var(--display); margin-bottom:7px; }
.sim-voyage-cards button > span:not(.sim-voyage-tag) { color:var(--ink-muted); font-size:12px; }
.sim-voyage-cards small { margin-top:auto; padding-top:12px; font-size:11px; line-height:1.45; color:var(--ink-muted); }
.sim-brief > p { max-width:380px; font-size:13px; line-height:1.5; color:#315367; }
.sim-watch-briefing { position:absolute; z-index:45; inset:0; background:#071d30b8; backdrop-filter:blur(5px); display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:64px 22px; }
.sim-watch-briefing > div { background:#f6f7ee; border:1px solid #d6e2d4; border-radius:22px; padding:34px; width:min(100%,620px); box-shadow:0 25px 90px #0004; color:#173c4b; }
.sim-watch-briefing h2 { font:700 32px/1.15 var(--display); letter-spacing:-.025em; margin:12px 0 20px; }
.sim-watch-briefing p { font-size:17px; line-height:1.75; }
.sim-briefing-note { display:block; font:12px var(--mono); color:#52726b; margin:20px 0; }
.sim-watch-briefing footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.sim-watch-briefing footer > button:not(.sim-start) { padding:10px; border:1px solid #a3beb2; border-radius:9px; background:none; color:#24594b; cursor:pointer; }
.sim-whistle { display:flex; align-items:center; gap:6px; padding:0 10px 10px; font-size:12px; color:var(--sim-muted); }
.sim-whistle select { min-width:0; width:100%; padding:6px; border:1px solid #5b7b89; border-radius:5px; background:#163849; color:#eaf6ee; font-size:12px; }
.sim-lookout { position:absolute; z-index:6; top:95px; right:30px; width:270px; padding:14px; border:1px solid #7b9f9580; background:#071d24e8; color:#dceee6; border-radius:12px; }
.sim-lookout header { display:flex; align-items:center; justify-content:space-between; gap:10px; font:12px var(--mono); }
.sim-lookout header button { color:#dceee6; background:none; border:0; font-size:24px; cursor:pointer; }
.sim-lookout label { display:block; margin:8px 0; font-size:12px; }
.sim-lookout select { width:100%; min-height:34px; margin-top:5px; padding:5px; border:1px solid #668d83; border-radius:6px; background:#173a42; color:#e6f4ed; font-size:13px; }
.sim-lookout p { font-size:13px; line-height:1.6; margin:10px 0; }
.sim-lookout small { display:block; font-size:10px; color:#a6c2b8; }
.sim-lookout header strong { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sim-lookout [data-lookout-bearing] { color:#a6c2b8; font-size:11px; font-weight:400; }
.sim-binocular-zoom { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; }
.sim-binocular-zoom output { min-width:54px; font:600 21px var(--mono); text-align:center; }
.sim-binocular-zoom button { width:40px; height:36px; border:1px solid #6d9a90; border-radius:7px; background:#21464a; color:#ecf7f1; font-size:22px; cursor:pointer; }
.sim-binocular-zoom button:disabled { opacity:.4; cursor:default; }
.sim-lookout .sim-binocular-help { color:#c8e8d7; font-size:11px; text-align:center; margin:8px 0; }
.simulation[data-binoculars="true"] [data-scene] { cursor:crosshair; }
.sim-binocular-mask { position:absolute; z-index:2; pointer-events:none; inset:0; background:radial-gradient(ellipse 48% 60% at 50% 49%,transparent 73%,#02090bcc 77%,#02090bf5 85%); box-shadow:inset 0 0 50px #0008; }
.sim-binocular-mask:after { content:'┼'; position:absolute; left:50%; top:50%; color:#9bbdaf90; font:32px monospace; transform:translate(-50%,-50%); }
.simulation[data-binoculars="true"] .sim-window-frame { visibility:hidden; }
.simulation[data-binoculars="true"] .sim-look-controls { left:24px; right:auto; }
.simulation[data-weather="night"] .sim-compass,.simulation[data-weather="night"] .sim-compass b { color:#d3e4df; text-shadow:0 2px 5px #000; }
.simulation[data-weather="night"] .sim-speed { background:#092634da; color:#d3e4df; }
.simulation[data-weather="night"] .sim-window-frame { filter:brightness(.35); }
.sim-rain { display:none; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.28; background:repeating-linear-gradient(105deg,transparent 0px,transparent 47px,#c4dee3 48px,transparent 49px,transparent 68px); mask-image:repeating-linear-gradient(0deg,transparent 0px,#000 5px,transparent 26px,transparent 67px); animation:sim-rain-fall .75s linear infinite; }
.simulation[data-weather="rain"] .sim-rain { display:block; }
.simulation:not([data-state="running"]) .sim-rain { animation-play-state:paused; }
@keyframes sim-rain-fall { to { transform:translate(-20px,67px); } }
.sim-result-chart { display:block; width:100%; height:320px; margin:20px 0 6px; border:1px solid #aabdaa; border-radius:12px; }
.sim-result-chart-key { font-size:11px!important; color:#4d6b65; }
.sim-result-log li > p { font-size:13px; line-height:1.55; margin:8px 0 4px; color:#32594d; }
.sim-result-log a { font-size:12px; color:#22634d; }
.sim-bottom-bar > button { color:#426657; background:var(--surface); border:1px solid var(--outline); border-radius:7px; padding:8px 10px; cursor:pointer; }
.sim-bottom-bar > button:disabled { opacity:.45; cursor:default; }
@media(max-width:1000px) {
  .sim-voyage-cards { grid-template-columns:repeat(5,minmax(175px,1fr)); overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
  .sim-voyage-cards button { scroll-snap-align:start; }
  .sim-lookout { right:16px; width:220px; top:105px; }
}
@media(max-width:700px) {
  .sim-voyage-library-heading { display:block; }.sim-voyage-library-heading > span:last-child { display:block; margin-top:6px; }
  .sim-watch-briefing { padding:32px 12px; }.sim-watch-briefing > div { padding:22px; }.sim-watch-briefing h2 { font-size:25px; }.sim-watch-briefing p { font-size:15px; line-height:1.7; }
  .sim-lookout { top:100px; left:16px; right:auto; width:calc(100% - 32px); padding:8px 12px; background:#071d24dc; }
  .sim-lookout p { margin:5px 0; }.sim-lookout small { display:none; }.sim-lookout label { display:flex; align-items:center; gap:8px; margin:2px 0; }.sim-lookout select { flex:1; width:120px; margin:0; }
  .sim-result-chart { height:280px; }
}
@media(prefers-reduced-motion:reduce) { .sim-rain { animation:none; } .sim-voyage-cards button { transition:none; } }
.sim-look-controls,.sim-telemetry { z-index:3; }
.simulation[data-weather="night"] .sim-speed small { color:#c1d9d5; }
.sim-debrief { width:min(720px,calc(100% - 32px)); }
.sim-voyage-cards button[aria-pressed="true"] { color:#173c4b; }
.sim-voyage-cards button[aria-pressed="true"] > span:not(.sim-voyage-tag),.sim-voyage-cards button[aria-pressed="true"] small { color:#486458; }
html[data-theme="dark"] .sim-voyage-cards button:not([aria-pressed="true"]) .sim-voyage-tag { color:#a1d8c5; }
.sim-debrief { max-height:min(calc(100% - 32px),calc(100dvh - 32px)); background:#f7fbef; }
@media(max-width:900px) {
  .simulation[data-state="briefing"] .sim-stage,.simulation[data-state="complete"] .sim-stage,.sim-stage:has(.is-expanded) { z-index:70; }
}
@media(max-width:700px) {
  .sim-horizon-hud { grid-template-columns:minmax(55px,1fr) auto 44px; gap:6px; }
  .sim-heading-tools { gap:6px; }
  .sim-binocular-toggle { width:44px; padding:0; justify-content:center; position:relative; }
  .sim-binocular-toggle span { display:none; }
  .sim-binocular-toggle kbd { position:absolute; right:1px; bottom:0; border:0; font-size:9px; }
  .sim-lookout { top:auto; bottom:14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px; }
  .sim-lookout header { gap:3px; font-size:10px; }
  .sim-lookout header strong { gap:3px; }
  .sim-lookout [data-lookout-bearing] { font-size:10px; }
  .sim-lookout .sim-binocular-zoom { gap:5px; margin:0; }
  .sim-lookout .sim-binocular-zoom button { width:32px; height:32px; }
  .sim-lookout .sim-binocular-zoom output { min-width:38px; font-size:17px; }
  .sim-lookout .sim-binocular-help,.sim-lookout label,.sim-lookout [data-lookout-observation] { grid-column:1 / -1; }
  .sim-lookout .sim-binocular-help { margin:0; font-size:10px; }
  .sim-lookout [data-lookout-observation] { margin:2px 0; font-size:12px; line-height:1.35; }
  .simulation[data-binoculars="true"] .sim-look-controls { left:auto; right:16px; top:84px; bottom:auto; }
  .simulation[data-binoculars="true"] .sim-telemetry { visibility:hidden; }
  .sim-watch-briefing { position:fixed; inset:10px; z-index:60; height:calc(100dvh - 20px); border-radius:16px; }
  .sim-debrief { position:fixed; inset:12px; z-index:60; transform:none; width:auto; max-height:calc(100dvh - 24px); }
}