:root{color-scheme:dark;--ink:#d8e6f6;--muted:#7890aa;--accent:#79b9ef;--edge:#2a3c51;--panel:#111924;--shell:#293f56;--glow:#336699;--ratio:4/3;--video-filter:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#080c12;color:var(--ink);font:13px 'Segoe UI',sans-serif}body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,input,select,summary{font:inherit}button,select,summary{border:1px solid #31435b;border-radius:5px;background:#172334;color:#d9eaff;padding:7px 10px;cursor:pointer}button:hover,summary:hover{border-color:var(--accent);background:#223751}button:disabled{opacity:.35;cursor:not-allowed}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:#a1c6e8;text-decoration:none}a:hover{color:white}input[type=search]{width:100%;padding:12px;border:1px solid #2a3c51;border-radius:5px;background:#0a111c;color:#fff}input[type=range]{accent-color:#76b7ef;width:115px}select{max-width:100%}[hidden]{display:none!important}
.topbar{height:57px;flex:none;border-bottom:1px solid var(--edge);display:flex;align-items:center;gap:30px;padding:0 24px;background:#0e1520}.brand{display:flex;align-items:center;gap:8px;letter-spacing:2px;font:700 18px monospace;color:#fff}.brand b{color:var(--accent)}.brand>span{display:grid;place-items:center;background:#336699;width:30px;height:30px;border:1px solid #8bc8ff;border-radius:6px;box-shadow:0 0 18px #33669950}.brand small{font-size:8px;color:var(--muted);letter-spacing:2px;margin-left:10px}.topbar nav{display:flex;gap:24px;font-size:12px}.local-label{margin-left:auto;font:9px monospace;letter-spacing:2px;color:var(--muted)}.intro{display:flex;align-items:center;justify-content:space-between;padding:17px 25px 18px;flex:none}.eyebrow{font:9px monospace;letter-spacing:3px;color:var(--muted)}h1{font-size:26px;letter-spacing:-1px;font-weight:500;margin:7px 0 0}h1 em{font-style:normal;color:var(--accent)}.inventory{display:flex;align-items:center;gap:12px}.inventory b{font:24px monospace}.inventory span{font:9px monospace;letter-spacing:2px;max-width:60px;color:var(--muted)}
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:14px;padding:0 18px 12px}.station,.library{background:var(--panel);border:1px solid var(--edge);border-radius:10px;overflow:hidden;min-height:0;display:flex;flex-direction:column}.station-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:43px;padding:7px 12px;border-bottom:1px solid var(--edge);font:11px monospace}.station-bar strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.station-bar label{white-space:nowrap;color:var(--muted);font-size:10px}.station-bar select{padding:4px;margin-left:7px;font-size:10px}.stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse at 50% 45%,#294d7355,transparent 65%),linear-gradient(130deg,#0b1524,#121b2a 50%,#08111d);container-type:size;overflow:hidden}.stage:after{content:'';position:absolute;width:80%;height:22%;bottom:-15%;border-radius:50%;background:var(--glow);filter:blur(65px);opacity:.45;pointer-events:none}.room-label{position:absolute;bottom:24px;left:24px;color:#527293;font:8px/2 monospace;letter-spacing:4px}.room-label small{font-size:6px;letter-spacing:2px}.monitor{height:min(100%,calc(100cqw / (var(--ratio))));aspect-ratio:var(--ratio);max-width:96%;display:flex;flex-direction:column;padding:9px 12px;background:linear-gradient(130deg,var(--shell),#101b28 90%);border:2px solid color-mix(in srgb,var(--accent) 30%,#202b3a);border-radius:28px;box-shadow:0 0 0 7px #080f1880,inset 0 2px 0 #ffffff18,0 16px 24px #0008;z-index:1;min-height:0}.bezel-top,.bezel-bottom{flex:none;display:flex;align-items:center;justify-content:space-between;color:#bbd1e5;font:8px monospace;letter-spacing:1.5px;height:28px}.bezel-top b{font-size:18px;color:white}.bezel-top small{font-size:7px;color:var(--accent);margin-left:8px}.bezel-top span{font-size:7px}.bezel-bottom{height:22px;font-size:6px;color:var(--muted)}.glass{flex:1;min-height:0;position:relative;border:7px solid #080e15;border-radius:19px;background:#030507;overflow:hidden;box-shadow:0 0 0 1px #7fb6ed22}.glass iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:black;filter:var(--video-filter)}.scanlines{position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(0deg,#0002 0px,#0002 1px,transparent 1px,transparent 4px);opacity:.35}.standby{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:11px/1.9 monospace;color:#9ac5e7;background:radial-gradient(ellipse,#12335566,#030a13);text-shadow:0 0 9px #589eff70;padding:20px;text-align:center}.boot-id{font:700 30px monospace;letter-spacing:5px;color:#e5f6ff}.standby p{font-size:9px;letter-spacing:2px}.standby pre{text-align:left;margin:22px 0;color:#7096b6;font-size:11px}.standby>span{font-size:10px}.cursor{animation:blink 1.2s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.control-deck{padding:10px 12px;border-top:1px solid var(--edge);background:#0f1723;flex:none}.control-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}.control-row button,.control-row a,.control-row label,.control-row summary{font-size:11px}.control-row a{padding:4px}.volume-label{display:flex;gap:7px;align-items:center;color:var(--muted)}.volume-label output{min-width:32px;font:10px monospace;color:var(--accent)}.display-options{position:relative}.display-options summary{list-style:none}.display-options>div{position:absolute;bottom:38px;left:0;z-index:50;border:1px solid var(--edge);border-radius:8px;background:#101b2a;padding:15px;width:235px;box-shadow:0 8px 40px #000a;display:grid;gap:14px}.display-options label{display:flex;align-items:center;justify-content:space-between;gap:10px}.input-hud{display:flex;align-items:center;gap:15px;padding:7px 10px;border:1px solid #263647;border-radius:7px;background:linear-gradient(#131e2c,#0c131e);font:10px monospace}.hud-label{font-size:9px;letter-spacing:1px;color:#dbe8f5}.hud-label small{display:block;color:var(--muted);font-size:6px;margin-top:3px}.keys{display:flex;gap:4px}.keys kbd{display:grid;place-items:center;min-width:25px;height:25px;padding:0 5px;border:1px solid #3c4a5b;border-bottom:3px solid #1d2a3b;border-radius:4px;background:linear-gradient(#2a3748,#172231);color:#e0edfa;font:9px monospace}.keys kbd.on{background:#f4faff;color:#152c42;box-shadow:0 0 12px #fff9;border-color:#fff}.keys.mouse kbd{font-size:7px;border-radius:9px 9px 3px 3px}#keyLabel{color:var(--muted);font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#status{font-size:10px;color:var(--muted);margin:7px 0 0;min-height:14px}
.library-head{height:45px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#182130;flex:none}.library-head strong{font:11px monospace;letter-spacing:1px}.library-head button{padding:3px 8px}.filters{padding:13px;display:grid;gap:8px;border-bottom:1px solid var(--edge);flex:none}.filters>select{width:100%}.filter-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.filter-bottom select{font-size:10px}.filter-bottom span{font:10px monospace;color:var(--muted)}.game-grid{overflow-y:auto;min-height:0;flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px;padding:12px;scrollbar-width:thin;scrollbar-color:#344961 #101723}.game-card{position:relative;background:#162233;border:1px solid #2c4058;border-radius:7px;overflow:hidden;min-width:0}.game-card.active{border-color:#9bd1ff;box-shadow:0 0 0 1px #588bc6}.open-card{display:block;border:0;background:none;padding:0;width:100%;text-align:left;border-radius:0}.card-art{height:96px;background:linear-gradient(135deg,#23394e,#101d2c);display:flex;align-items:center;justify-content:center;overflow:hidden}.card-art img{width:100%;height:100%;object-fit:cover}.cover-type{color:#608db2;font:700 20px monospace;letter-spacing:2px;display:flex;flex-direction:column;align-items:center;gap:9px}.cover-type small{font:7px monospace;letter-spacing:1px;color:#91acc4}.card-body{padding:10px;min-height:66px}.card-title{display:block;font-size:11px;line-height:1.4;font-weight:650;color:#e4effb;min-height:30px}.card-meta{font:8px monospace;color:#7c9dbe;margin-top:7px}.favorite{position:absolute;right:5px;top:5px;border:1px solid #5c7d9f88;background:#0b1828c9;padding:2px 6px;font-size:13px}.favorite[aria-pressed=true]{color:#ffd383}.card-unready{opacity:.65}.pagination{display:flex;justify-content:space-between;align-items:center;padding:11px;border-top:1px solid var(--edge);flex:none}.pagination button{font-size:10px;padding:5px 8px}.pagination span{font:10px monospace;color:var(--muted)}.import-status{padding:9px 12px;border-top:1px solid #223249;background:#101c2a;color:#7c9bbb;font:9px/1.5 monospace;flex:none}footer{display:flex;justify-content:space-between;font:7px monospace;letter-spacing:2px;padding:0 22px 10px;color:#53708d;flex:none}
dialog{color:var(--ink);background:#101c2b;border:1px solid #3d5b7b;border-radius:13px;padding:30px;max-width:470px;width:calc(100% - 32px);box-shadow:0 0 70px #33669933}dialog::backdrop{background:#030812c9;backdrop-filter:blur(5px)}dialog h2{font-size:26px;margin:16px 0}dialog p{color:#9fb4c9;line-height:1.7;font-size:12px}dialog pre{max-height:180px;overflow:auto;font-size:10px}dialog .primary{width:100%;margin-top:20px;background:#336699;padding:12px;color:#fff}.dialog-close{position:absolute;right:12px;top:12px;padding:2px 9px;font-size:20px}dialog summary{background:transparent}.empty{grid-column:1/-1;padding:20px;color:var(--muted);line-height:1.7}.recording{color:#ff8b8b!important;border-color:#ef6767!important}body[data-theme=nebula]{--accent:#bfabf0;--shell:#3c3657;--glow:#785bc4}body[data-theme=nebula] .stage{background:radial-gradient(ellipse at 40% 50%,#56316655,transparent 70%),linear-gradient(135deg,#160f28,#122541)}body[data-theme=amber]{--accent:#edc18b;--shell:#554936;--glow:#ba7c33}body[data-theme=amber] .stage{background:radial-gradient(ellipse,#71502555,transparent 70%),#161514}.stage:fullscreen{height:100vh;width:100vw;padding:24px}.stage:fullscreen .monitor{height:100%;max-width:100%}.stage:fullscreen .room-label{display:none}
@media(max-height:800px) and (min-width:901px){.intro{padding:9px 20px}.intro h1{font-size:21px}.intro .eyebrow{font-size:7px}.topbar{height:47px}.control-deck{padding:7px 10px}.control-row{margin-bottom:5px}.input-hud{padding:4px 8px}.stage{padding:12px}.standby pre{margin:12px 0}.boot-id{font-size:24px}}@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 295px}.brand small,.local-label,.mouse{display:none}.control-row{gap:5px}.room-label{display:none}.input-hud{gap:9px}.station-bar label{font-size:0}}@media(max-width:900px){body{height:auto;overflow:auto}.topbar{padding:0 12px;gap:14px}.brand{font-size:15px}.topbar nav{gap:12px;font-size:10px}.intro{padding:16px}.intro h1{font-size:22px}.workspace{grid-template-columns:1fr;padding:0 10px 14px}.stage{height:55vh;min-height:280px;flex:none}.library{height:650px}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.input-hud{overflow-x:auto}.hud-label,#keyLabel{display:none}footer span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){.cursor{animation:none}}

/* Compact artwork with full-width, readable names. */
.game-grid{display:flex;flex-direction:column;gap:7px}.game-card{flex:none}.open-card{display:flex;align-items:center;min-height:70px;padding:6px;gap:10px}.card-art{flex:0 0 69px;width:69px;height:55px;border-radius:4px}.cover-type{font-size:14px;letter-spacing:1px;gap:5px}.cover-type small{font-size:5px;letter-spacing:0}.card-body{padding:4px 20px 4px 0;min-height:0;flex:1}.card-title{font-size:13px;line-height:1.4;min-height:0}.card-meta{font-size:9px;margin-top:5px}.favorite{right:5px;top:5px;font-size:12px;padding:1px 5px}.game-card.active{background:#213a56}.card-art img{object-fit:contain}
