@font-face { font-family: "B612 Mono"; font-weight: 400; font-display: swap; src: url(/fonts/b612-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "B612 Mono"; font-weight: 700; font-display: swap; src: url(/fonts/b612-mono-latin-700-normal.woff2) format("woff2"); }
:root { color-scheme: dark; --font: "B612 Mono", ui-monospace, Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(120% 90% at 50% 0%, #2a2d33, #0d0e10); color: #e8e8e8; font-family: var(--font); display: flex; flex-direction: column; overflow-x: hidden; }

#band { display: flex; flex-wrap: wrap; gap: 6px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; background: linear-gradient(#3b3f45, #2a2d32); border-bottom: 2px solid #111; box-shadow: 0 3px 12px #000a; }
#band .id { display: flex; flex-direction: column; justify-content: center; padding: 0 10px 0 4px; min-width: 150px; }
#band .id b { font-size: 20px; color: #fff; letter-spacing: .06em; }
#band .id span { font-size: 10px; color: #9aa0a8; }
.cell { background: #000; border: 1px solid #14161a; border-radius: 4px; padding: 3px 9px 4px; min-width: 92px; box-shadow: inset 0 0 8px #000, 0 0 0 1px #4a4e55; display: grid; }
.cell.wide { min-width: 150px; }
.cell i { font-style: normal; font-size: 9px; letter-spacing: .12em; color: #2ee6ff; }
.cell b { font-size: 21px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.cell u { text-decoration: none; font-size: 10px; color: #9aa0a8; min-height: 12px; white-space: nowrap; }
.cell b.amb { color: #ffb21a; } .cell b.grn { color: #2bf02b; } .cell u.ok { color: #2bf02b; } .cell u.bad { color: #ff3030; }

main { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; align-items: start; justify-content: center; }
.du { position: relative; background: linear-gradient(#52565d, #3a3d43); padding: 12px; border-radius: 10px; box-shadow: 0 8px 22px #000c, inset 0 1px 0 #7a7f87, inset 0 -2px 0 #1b1d20; }
.du canvas { display: block; width: 100%; aspect-ratio: 640 / 600; background: #000; border-radius: 4px; box-shadow: inset 0 0 0 2px #0b0c0d, 0 0 0 3px #17191c; }
.du::before, .du::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #aaa, #444 70%); top: 3px; }
.du::before { left: 3px; } .du::after { right: 3px; }
.ctl { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; align-items: center; }
.ctl button { font: 700 12px var(--font); padding: 7px 10px; border-radius: 5px; border: 1px solid #14161a; background: linear-gradient(#5a5e65, #43464c); color: #e6e6e6; box-shadow: 0 2px 0 #1a1c1f; min-width: 42px; }
.ctl button.on { background: linear-gradient(#2e6f2e, #1f4a1f); color: #9dff9d; }
.ctl span { font-size: 10px; letter-spacing: .1em; color: #c7ccd2; margin: 0 4px 0 8px; }

.lower { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 0 14px 14px; align-items: start; }
#arr b { font-weight: 700; }
#arr .k { color: #555; }
#acarsBox .ah, #arrBox .ah { font-size: 11px; letter-spacing: .14em; color: #d8dce1; margin-bottom: 8px; }
.paper { background: #ebe8dc; color: #1c1c1c; border-radius: 3px; padding: 10px 12px; font-size: 11px; line-height: 1.5; max-height: 220px; overflow: auto; box-shadow: inset 0 0 14px #0003; }
.paper .m { border-bottom: 1px dashed #9a968a; padding: 4px 0; white-space: pre-wrap; word-break: break-word; }
.paper .m.new { animation: feed .6s ease-out; }
@keyframes feed { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
#mcp { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 12px; background: linear-gradient(#34373c, #2a2d32); border-bottom: 2px solid #111; }
#mcp div { background: #000; border-radius: 4px; padding: 2px 10px 3px; min-width: 88px; box-shadow: inset 0 0 6px #000, 0 0 0 1px #4a4e55; }
#mcp i { display: block; font-style: normal; font-size: 9px; letter-spacing: .12em; color: #c7ccd2; }
#mcp b { font-size: 19px; color: #2bf02b; font-variant-numeric: tabular-nums; }
#mcp .mt { font-size: 10px; letter-spacing: .14em; color: #9aa0a8; }
.cdu pre { margin: 0; background: #000; color: #fff; padding: 12px; font: 14px/1.55 var(--font); border-radius: 4px; min-height: 250px; box-shadow: inset 0 0 0 2px #0b0c0d; white-space: pre-wrap; }
.cdu pre .m { color: #ff55f5; } .cdu pre .g { color: #2bf02b; } .cdu pre .c { color: #2ee6ff; } .cdu pre .a { color: #ffb21a; }
.cdub { display: flex; gap: 6px; margin-top: 8px; }
.cdub button { font: 700 12px var(--font); padding: 8px 14px; border-radius: 5px; border: 1px solid #14161a; background: linear-gradient(#5a5e65, #43464c); color: #e6e6e6; }
.cdub button.on { background: linear-gradient(#2e6f2e, #1f4a1f); color: #9dff9d; }
body.fit { height: 100vh; overflow: hidden; }
body.fit #stage { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
body.fit main, body.fit .lower { display: contents; }
body.fit .du { min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: 6px; margin: 0; }
body.fit .du canvas { flex: 1; min-height: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
body.fit .ctl { margin-top: 4px; gap: 3px; } body.fit .ctl button { padding: 3px 6px; font-size: 10px; min-width: 0; } body.fit .ctl span { font-size: 9px; margin: 0 2px 0 4px; }
body.fit .paper, body.fit .cdu pre { flex: 1; min-height: 0; max-height: none; overflow: auto; }
body.fit .cdu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
body.fit .cdub { margin-top: 4px; } body.fit .ah { margin-bottom: 4px !important; }
body.fit #band { padding: 4px 8px; gap: 4px; } body.fit .cell { padding: 1px 7px 2px; min-width: 70px; } body.fit .cell.wide { min-width: 110px; } body.fit .cell b { font-size: 16px; } body.fit .cell u { font-size: 9px; min-height: 10px; } body.fit #band .id b { font-size: 16px; }
body.fit #mcp { padding: 2px 10px; } body.fit #mcp b { font-size: 15px; }
body.fit footer { position: fixed; right: 8px; bottom: 4px; padding: 0; z-index: 6; }
#nav { display: flex; gap: 5px; align-items: center; margin-left: auto; flex-wrap: wrap; }
#nav button { font: 700 11px var(--font); letter-spacing: .08em; padding: 8px 11px; border-radius: 5px; border: 1px solid #14161a; background: linear-gradient(#5a5e65, #43464c); color: #e6e6e6; box-shadow: 0 2px 0 #1a1c1f; }
#nav button.hot { background: linear-gradient(#2f6fb0, #1f4a78); color: #dff0ff; }
.flash { animation: flash 1.4s ease-out; } @keyframes flash { 0% { outline: 3px solid #2ee6ff; outline-offset: 3px; } 100% { outline: 3px solid transparent; outline-offset: 3px; } }
.du canvas { filter: brightness(var(--b, 1)); }
body.ck-on { overflow: hidden; }
#ckpt { position: fixed; inset: 0; z-index: 30; background: #050505; display: flex; flex-direction: column; align-items: center; }
#ckpt[hidden] { display: none; }
.ckbar { height: 44px; width: 100%; display: flex; gap: 14px; align-items: center; padding: 0 12px; background: #15171a; font: 12px var(--font); color: #9aa0a8; flex: 0 0 44px; }
.ckbar button { font: 700 12px var(--font); padding: 7px 14px; border-radius: 5px; border: 1px solid #333; background: #2a2d32; color: #e6e6e6; }
.ckbar label { display: flex; gap: 8px; align-items: center; letter-spacing: .1em; } .ckbar input { width: 150px; }
.ckstage { position: relative; margin: auto; overflow: hidden; background: #000; }
.ckimg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.ckscr { position: absolute; left: 0; top: 0; width: 640px; height: 600px; transform-origin: 0 0; overflow: hidden; background: #000; filter: brightness(calc(var(--b, 1) * .9)) contrast(.96) saturate(.92) blur(.35px); }
.ckscr canvas { display: block; width: 640px; height: 600px; }
.ckscr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 28%, transparent 46%, transparent 72%, rgba(255,255,255,.07) 100%), radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%); box-shadow: inset 0 0 30px rgba(0,0,0,.65); }
.ckled { position: absolute; font: 700 20px "B612 Mono", ui-monospace, monospace; color: #fff3d6; text-align: right; padding-right: 6px; box-sizing: border-box; text-shadow: 0 0 6px #ffb45a, 0 0 2px #fff; background: rgba(20,8,0,.78); }
#ckMcp, #ckHandles { position: absolute; inset: 0; pointer-events: none; }
.ckh { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #2ee6ff; background: rgba(46,230,255,.25); pointer-events: auto; cursor: grab; font: 10px var(--font); color: #2ee6ff; white-space: nowrap; touch-action: none; }
.ckh:not(:empty)::after { content: ""; }
.ckcredit { position: absolute; left: 10px; bottom: 6px; font: 10px var(--font); color: #cfd3d8; background: rgba(0,0,0,.6); padding: 3px 7px; border-radius: 3px; max-width: 70vw; }
.ckcredit a { color: #8fd0ff; }
#ckpt.calib .ckscr { outline: 1px dashed #2ee6ff; }
#seat { position: fixed; inset: 0; z-index: 40; background: #000; }
#seat[hidden] { display: none; }
#seatCv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.seatbar { position: absolute; top: 0; left: 0; right: 0; background: rgba(10,11,13,.72); flex-wrap: wrap; height: auto; min-height: 44px; padding: 6px 12px; }
.seatbar input { width: 90px; } .seatbar button.on { background: #1f4a1f; color: #9dff9d; }
.seatbar .seats { display: flex; gap: 4px; } .seatbar .seats button { padding: 7px 10px; }
.seatbar .stopt { display: none; gap: 14px; flex-wrap: wrap; } #seat.opts .stopt { display: flex; } #seat.opts #stSet { background: #1f3a4a; color: #9dd8ff; }
#stHelp { opacity: .7; }
#stHint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); font: 12px var(--font); color: #dfe6ee; background: rgba(0,0,0,.65); padding: 6px 12px; border-radius: 5px; pointer-events: none; text-align: center; max-width: 92vw; }
#stJoy { display: none; position: absolute; left: 18px; bottom: 34px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); touch-action: none; }
#stJoy i { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(220,230,240,.35); }
@media (pointer: coarse) { #stJoy { display: block; } #stHint { bottom: auto; top: 96px; } .ckcredit { left: auto; right: 6px; max-width: 55vw; font-size: 8px; } }
@media (max-width: 700px) { .seatbar { gap: 6px; padding: 4px 6px; } .ckbar button { padding: 7px 9px; } .seatbar .seats button { padding: 7px 7px; } #stHelp { display: none; } .seatbar input { width: 70px; } }
footer { display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px 12px; }
footer button { font: 12px var(--font); padding: 6px 12px; border-radius: 5px; border: 1px solid #333; background: #1a1c1f; color: #9aa0a8; }
#dbg { position: fixed; right: 10px; bottom: 50px; max-height: 60vh; overflow: auto; margin: 0; padding: 10px; background: #000d; border: 1px solid #333; border-radius: 6px; font: 11px/1.45 var(--font); color: #cfd3d8; z-index: 5; }

@media (max-width: 900px) { main { grid-template-columns: 1fr; padding: 10px; } .cell { min-width: 80px; } .cell b { font-size: 18px; } .cell.wide { min-width: 120px; } }