*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overscroll-behavior:none;background:#10222e;color:#e8e4da;font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif}#root{height:100%}.title-root{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:16px;text-align:center}.title-root h1{font-size:1.5rem;margin:0}.ship-select{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}.ship-select label{cursor:pointer}.start-btn{font-size:1.2rem;padding:12px 40px;background:#2a7fb8;border:none;border-radius:8px;color:#fff;cursor:pointer}.start-btn:hover{background:#3590cc}.hint{color:#9fb3c0;font-size:.8rem;max-width:480px}.play-root{position:fixed;inset:0;height:100%;display:flex;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}.top-bar{position:absolute;top:0;left:0;right:0;height:40px;display:flex;align-items:center;padding:0 8px;z-index:10;pointer-events:none}.abort-btn{pointer-events:auto;background:#0006;color:#e8e4da;border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:6px 14px;cursor:pointer}.play-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.instruments{position:absolute;bottom:12px;left:0;right:0;width:fit-content;margin-inline:auto;display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center;justify-content:center;min-height:42px;padding:4px 18px;max-width:min(92vw,1000px);white-space:nowrap;background:#0d141aa8;border:1px solid rgba(70,88,100,.45);border-radius:12px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;z-index:5}@media(max-width:1360px){.instruments{bottom:auto;top:8px;max-width:calc(100vw - 170px)}}@media(max-width:1000px){.instruments{min-height:36px;gap:2px 10px;padding:3px 12px}.instruments .inst-value{font-size:.82rem}.instruments .inst-label{font-size:.56rem}.instruments .rpm-bar,.instruments .steer-indicator{display:none}.thruster-buttons{bottom:16px}.tc-left{top:52px;bottom:12px}.tc-left .slider-v,.tc-left .lever-wrap{height:100%}.tc-left .lever-wrap .slider-v{flex:1;height:auto}}.inst{display:flex;align-items:center;gap:6px;white-space:nowrap}.inst-label{font-size:.62rem;color:#8fa4b2}.inst-value{font-size:.95rem;font-variant-numeric:tabular-nums}.shift-F{color:#7fd47f}.shift-N{color:#d4c77f}.shift-R{color:#d47f7f}.transiting{animation:blink .6s step-start infinite}@keyframes blink{50%{opacity:.2}}.rpm-bar{display:inline-block;width:50px;height:6px;background:#26333c;border-radius:3px;overflow:hidden}.rpm-bar span{display:block;height:100%;background:#2a7fb8}.steer-indicator{position:relative;display:inline-block;width:52px;height:8px;background:#26333c;border-radius:4px}.steer-indicator:after{content:"";position:absolute;left:50%;top:-2px;width:1px;height:12px;background:#5d707d}.steer-needle{position:absolute;left:50%;top:-1px;width:4px;height:10px;margin-left:-2px;background:#e8b23c;border-radius:2px}.wind-dial{position:relative;display:inline-block;width:22px;height:22px;border:1px solid #46586475;border-radius:50%}.wind-needle{position:absolute;left:50%;top:50%;width:2px;height:9px;margin-left:-1px;transform-origin:50% 0;background:#e8b23c}.touch-controls{position:absolute;inset:0;pointer-events:none;z-index:6}.tc-left,.tc-right{position:absolute;bottom:16px;display:flex;gap:10px;align-items:flex-end;pointer-events:auto}.tc-left{left:14px}.tc-right{right:14px}.slider{position:relative;background:#1420299e;border:1px solid rgba(78,100,116,.55);border-radius:12px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);touch-action:none}.slider-v{width:52px;height:160px}.slider-h{width:190px;height:52px;align-self:flex-end}.slider-center-mark{position:absolute;background:#46586475}.slider-v .slider-center-mark{left:4px;right:4px;top:50%;height:2px}.slider-h .slider-center-mark{top:4px;bottom:4px;left:50%;width:2px}.slider-detent-band{position:absolute;background:#7896aa29}.slider-v .slider-detent-band{left:3px;right:3px;top:46%;height:8%}.slider-h .slider-detent-band{top:3px;bottom:3px;left:46%;width:8%}.slider-knob{position:absolute;background:#2a7fb8;border:1px solid #58a6d6;border-radius:6px}.slider-v .slider-knob{left:4px;width:42px;height:24px;margin-top:-12px;top:50%}.slider-h .slider-knob{top:4px;height:42px;width:24px;margin-left:-12px;left:50%}.lever-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}.lever-label{font-size:.6rem;color:#8fa4b2}.thruster-buttons{position:absolute;bottom:66px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:auto}.thruster-buttons-row{display:flex;gap:8px;align-items:center}.thruster-buttons-row .thr-label{min-width:3.2em;text-align:center}.thr-btn{width:56px;height:44px;background:#1420299e;color:#e8e4da;border:1px solid rgba(78,100,116,.55);border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:1rem;touch-action:none}.thr-label{font-size:.6rem;color:#8fa4b2}.time-warning{pointer-events:none;margin-left:auto;background:#96281ebf;color:#ffd9a8;border-radius:6px;padding:6px 12px;font-variant-numeric:tabular-nums}.boundary-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px 30px #c8281e8c;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;color:#ffb0a0;font-size:1.1rem;text-shadow:0 1px 4px #000}.hold-indicator{position:absolute;bottom:122px;left:50%;transform:translate(-50%);width:180px;height:8px;background:#00000073;border-radius:4px;overflow:hidden;pointer-events:none}.hold-bar{height:100%;background:#7fd47f;transition:width .1s linear}.result-root{height:100%;overflow-y:auto;display:flex;justify-content:center;padding:24px 12px}.result-card{width:min(680px,100%);background:#101a21;border:1px solid #2c3a44;border-radius:10px;padding:20px}.result-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2c3a44;padding-bottom:12px}.outcome{font-size:1.3rem}.outcome.ok{color:#7fd47f}.outcome.failed{color:#d47f7f}.total-score{font-size:1.6rem;font-variant-numeric:tabular-nums}.fail-reason{color:#ffb0a0;margin:10px 0 0}.stars{color:#f2c14e;font-size:1.4rem;letter-spacing:2px}.stars.empty{color:#48545e}.stars.small{color:#f2c14e;font-size:.85rem;letter-spacing:1px;margin-left:6px}.feedback-comment{margin:12px 0 0;padding:10px 12px;background:#16222b;border-left:3px solid #f2c14e;border-radius:4px;color:#d8e2e8;line-height:1.6}.score-main{margin:18px 0;padding:14px;background:#16222b;border:1px solid #34434e;border-radius:8px}.score-main-row{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}.score-main-label{font-size:1.05rem}.score-main-value{font-size:1.7rem;font-variant-numeric:tabular-nums}.score-main-points{margin-left:auto;font-size:1.1rem;color:#cfe3ef}.drift-timeline{position:relative;height:16px;background:#0c141a;border-radius:4px;overflow:hidden}.drift-seg{position:absolute;top:0;bottom:0}.drift-seg.neglected{background:#a3552f}.drift-seg.corrected{background:#7fd47f}.score-row{display:grid;grid-template-columns:9em 1fr auto;gap:8px;padding:7px 4px;border-bottom:1px solid #1c2831;font-size:.92rem}.score-row>span:last-child{font-variant-numeric:tabular-nums;color:#cfe3ef}.conditions{margin-top:16px}.conditions h3{font-size:.95rem;color:#8fa4b2;margin:0 0 6px}.cond-row{display:grid;grid-template-columns:4em 1fr;gap:8px;padding:4px;font-size:.9rem}.result-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.replay-root{position:fixed;inset:0;display:flex;flex-direction:column;background:#10222e}.replay-top{height:44px;display:flex;align-items:center;gap:12px;padding:0 8px;background:#101a21;border-bottom:1px solid #2c3a44;font-size:.8rem;overflow-x:auto;white-space:nowrap}.view-switch{display:flex;gap:4px;align-items:center;color:#8fa4b2}.view-btn{background:#1b2831;color:#cfe3ef;border:1px solid #34434e;border-radius:5px;padding:4px 10px;cursor:pointer;font-size:.8rem}.view-btn.active{background:#2a7fb8;border-color:#58a6d6;color:#fff}.overlay-toggles{display:flex;gap:8px;color:#9fb3c0;font-size:.72rem}.overlay-toggles label{display:flex;align-items:center;gap:2px;cursor:pointer}.ref-play-badge{background:#7a4a1e;color:#ffd9a8;border-radius:4px;padding:2px 8px;font-size:.72rem}.replay-main{flex:1;display:flex;min-height:0}.replay-canvas{flex:1;min-width:0;display:block}.replay-graphs{width:260px;display:flex;flex-direction:column;border-left:1px solid #2c3a44}.graph-canvas{flex:1;width:100%;min-height:0}.replay-transport{height:48px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#101a21;border-top:1px solid #2c3a44}.seek-wrap{flex:1;position:relative;display:flex;align-items:center}.seek-bar{width:100%}.seek-markers{position:absolute;left:0;right:0;top:-6px;height:8px;pointer-events:none}.marker{position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;margin-left:-4px}.marker.drift{border-top:7px solid #e0813a}.marker.corrected{border-top:7px solid #7fd47f}.marker.contact{border-top:7px solid #ff5f56}.time-label{font-variant-numeric:tabular-nums;color:#cfe3ef}.records-root{height:100%;display:flex;flex-direction:column;padding:12px;gap:10px}.records-header{display:flex;align-items:center;gap:14px}.records-header h2{margin:0;font-size:1.1rem;flex:1}.records-table-wrap{flex:1;overflow:auto}.records-table{width:100%;border-collapse:collapse;font-size:.82rem}.records-table th,.records-table td{padding:6px 8px;border-bottom:1px solid #1c2831;text-align:left;white-space:nowrap}.records-table th{color:#8fa4b2;font-weight:400;position:sticky;top:0;background:#10222e}.records-table .em{color:#ffd166}.records-table .empty{text-align:center;color:#5d707d;padding:30px}.record-actions{display:flex;gap:4px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#1b2831;border:1px solid #34434e;border-radius:8px;padding:10px 20px;animation:toast-out 2.5s forwards;z-index:100}@keyframes toast-out{0%,80%{opacity:1}to{opacity:0}}.briefing-root{height:100%;overflow-y:auto;display:flex;justify-content:center;padding:20px 12px}.briefing-card{width:min(760px,100%);background:#101a21;border:1px solid #2c3a44;border-radius:10px;padding:20px}.briefing-card h2{margin:0 0 14px;font-size:1.15rem}.briefing-body{display:flex;gap:18px;flex-wrap:wrap}.briefing-diagram{width:280px;height:300px;border:1px solid #2c3a44;border-radius:8px;flex-shrink:0}.briefing-info{flex:1;min-width:260px}.briefing-info h3{font-size:.9rem;color:#8fa4b2;margin:12px 0 4px}.briefing-info ul{margin:4px 0;padding-left:20px;font-size:.88rem}.briefing-info li{margin:3px 0}.forecast-note{color:#d4a04f;font-size:.78rem;margin:0 0 6px}.mobile-note{color:#d4a04f;font-size:.82rem;margin:12px 0 0;padding:8px 10px;border:1px solid #5a4a2a;border-radius:6px;background:#2a2416}.kbd-map{--kbd-u: 38px;--kbd-gap: 4px;display:flex;gap:14px;align-items:flex-end;margin:8px 0 6px}.kbd-main,.kbd-arrows{display:flex;flex-direction:column;gap:var(--kbd-gap)}.kbd-row{display:flex;gap:var(--kbd-gap)}.kbd-row-2{margin-left:calc(var(--kbd-u) * .3)}.kbd-row-3{margin-left:calc(var(--kbd-u) * .65)}.kbd-arrows-top{margin-left:calc(var(--kbd-u) + var(--kbd-gap))}.kbd-key{width:var(--kbd-u);height:calc(var(--kbd-u) + 6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#16232d;border:1px solid #46586475;border-radius:6px;box-shadow:inset 0 -2px 0 var(--gc, transparent)}.kbd-cap{font-size:.72rem;font-weight:600;color:#e8e4da;line-height:1}.kbd-fn{font-size:.44rem;color:var(--gc);line-height:1;white-space:nowrap}.kbd-off{opacity:.28}.kbd-lever{--gc: #69d2ff}.kbd-port{--gc: #7fd47f}.kbd-stbd{--gc: #e8b45f}.kbd-steer{--gc: #c792ea}.kbd-bow{--gc: #5fd8c9}.kbd-stern{--gc: #f2879b}.kbd-mod{--gc: #8fa4b2}@media(max-width:1000px){.kbd-map{display:none}}.rotate-hint{display:none;position:absolute;inset:0;z-index:50;background:#0a1218f2;color:#e8e4da;font-size:1.3rem;align-items:center;justify-content:center}@media(orientation:portrait)and (max-width:700px){.rotate-hint{display:flex}}