:root { --bg:#0e1b24; --fg:#d9e2e6; --dim:#8aa0aa; --panelbg:#101418e0; --pline:#2c3a42; --ok:#5fd36a; --warn:#f0b43c; --bad:#f0503c; --acc:#6cc4ff; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); overflow:hidden; }
body { font:12px/1.4 Consolas, "Courier New", monospace; }
canvas#cv { position:fixed; inset:0; display:block; }
#viewport { position:fixed; inset:0; width:auto; margin:0; overflow:hidden; pointer-events:none; }
#stage { position:absolute; left:0; top:0; background:transparent !important; pointer-events:none; transform-origin:top left; }
#stage .console, #stage .console * { pointer-events:auto; }
#stage .crew-notice { pointer-events:none !important; }
#stage .game-top { background:#101820e8; }
#stage .scene-foot { background:#101820d8; }
body:not([data-state=trial]):not([data-state=free]):not([data-state=practice]):not([data-state=replay]) #viewport { visibility:hidden; }
#trial-info { display:flex; gap:22px; align-items:center; font:15px/1 'Segoe UI', sans-serif; letter-spacing:.1em; color:#c1cdd2; }
#trial-info .ti-time b { color:#f2f1e8; font-size:22px; letter-spacing:.06em; margin-left:6px; }
#tiDev { color:var(--bad); font-weight:700; } #tiFree { color:#101418; background:var(--acc); padding:4px 8px; border-radius:3px; }
#tiFree:empty, #tiDev:empty { display:none; }
#screens { position:fixed; inset:0; z-index:40; overflow:auto; --screens-height:100vh; }
#screens[hidden] { display:none; }
#hostcard { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:#09121af2; color:#f2f1e8; font:16px/1.5 'Segoe UI', sans-serif; }
#hostcard[hidden] { display:none; }
#hostcard .host-inner { max-width:560px; padding:36px; border:1px solid #47606d; background:#101820; }
#hostcard .eyebrow { font-size:11px; letter-spacing:.2em; color:#75cfe3; }
#hostcard button { font:inherit; padding:10px 18px; background:#1b3a47; color:#f2f1e8; border:1px solid #75cfe3; cursor:pointer; }
.panel { position:fixed; background:var(--panelbg); border:1px solid var(--pline); padding:6px 10px; white-space:pre; color:var(--fg); }
.dim { color:var(--dim); }
#help { right:12px; top:90px; z-index:30; white-space:normal; max-width:520px; font:13px/1.5 'Segoe UI', sans-serif; padding:12px 16px; }
#help[hidden] { display:none; }
#help h3 { margin:6px 0 4px; font-size:12px; letter-spacing:.14em; color:#75cfe3; }
#help .k { display:inline-block; min-width:18px; padding:0 5px; border:1px solid #607d8c; border-radius:3px; color:#75cfe3; margin-right:4px; font-family:Consolas, monospace; }
#help .row { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #22323b; padding:2px 0; }
#drill { position:fixed; right:14px; top:96px; z-index:40; background:#101418e8; border:1px solid #5a7684; border-left:3px solid #75cfe3; color:#e8edf0; padding:8px 12px; font:13px/1.5 Consolas, monospace; white-space:pre; max-width:34vw; }
#drill[hidden] { display:none; }
#replayhud { position:fixed; right:14px; top:96px; z-index:40; background:#101418e8; border:1px solid #5a7684; border-left:3px solid #f2ba59; color:#e8edf0; padding:8px 12px; font:13px/1.6 Consolas, monospace; white-space:pre-wrap; max-width:44vw; }
#replayhud[hidden] { display:none; }
#replayhud .k { display:inline-block; border:1px solid #6a7f8a; border-radius:3px; padding:0 5px; margin:0 2px; color:#75cfe3; }
#replayhud .on { background:#294b58; color:#fff; border-color:#75cfe3; }
body[data-state=replay] #console-root { pointer-events:none; opacity:.92; }
#flash { position:fixed; left:50%; top:96px; transform:translateX(-50%); display:none; color:var(--warn); background:#101418f0; border:1px solid var(--warn); padding:6px 14px; font:14px/1.4 'Segoe UI', sans-serif; z-index:45; max-width:70vw; text-align:center; }
#errors { position:fixed; left:8px; top:50%; color:var(--bad); white-space:pre; z-index:60; }
#overlay { right:8px; top:90px; display:none; max-width:48vw; overflow:hidden; font-size:11px; z-index:25; }
#inmon { right:8px; top:90px; display:none; z-index:26; white-space:normal; max-width:360px; }
#inmon .k { display:inline-block; min-width:22px; padding:1px 4px; margin:1px; border:1px solid var(--pline); text-align:center; color:var(--dim); background:#0b1116; }
#inmon .k.on { color:#101418; background:var(--warn); border-color:var(--warn); font-weight:bold; }
#monHist { white-space:pre; margin-top:4px; font-size:11px; }
#monClose, #tuning button { float:right; background:#23313a; color:var(--fg); border:1px solid var(--pline); padding:2px 8px; margin-left:6px; cursor:pointer; font:inherit; }
#tuning { left:50%; transform:translateX(-50%); top:8px; bottom:8px; width:560px; overflow:auto; display:none; white-space:normal; z-index:35; }
#tuning h3 { margin:10px 0 4px; color:var(--acc); font-size:12px; }
#tuning .row { display:flex; justify-content:space-between; gap:8px; margin:2px 0; }
#tuning label.chg { color:var(--bad); font-weight:bold; }
#tuning input[type=number] { width:90px; background:#1b242a; color:var(--fg); border:1px solid var(--pline); }
#tuning select { background:#1b242a; color:var(--fg); border:1px solid var(--pline); }
#tuning button { float:none; }
#stage [data-guide-action-box] { cursor:pointer; }
#stage [data-guide-action-box]:hover { outline:1px solid #75cfe3; }
#tiWarp { display:flex; gap:6px; align-items:center; }
#tiWarp b { color:#f2f1e8; }
#tiWarp button { pointer-events:auto; font:inherit; color:#c1cdd2; background:transparent; border:1px solid #5d7480; border-radius:3px; width:22px; height:22px; line-height:18px; padding:0; cursor:pointer; }
#tiWarp small { color:#f2ba59; font-size:12px; letter-spacing:.04em; }
#tiWarp[hidden] { display:none; }
#top-auto { margin-left:8px; color:#8fd18f; letter-spacing:.1em; }
#top-auto[hidden] { display:none; }
.top-right.view-changed #top-view { color:#f2f1e8; text-shadow:0 0 6px rgba(242,186,89,.9); }