/* POOLROOMS · a pool-tile retro OS over a live raymarched poolroom */
:root{--silver:#d3dcdf;--silver2:#e6edef;--hi:#ffffff;--lo:#7d8d92;--dk:#0b1a1d;--ink:#0b1a1d;--teal:#0b5e68;--teal2:#3fb3c0;--aqua:#46c3cf;--aqua2:#b9f1f5;--term:#031417;--termtx:#c9f7fa;--yel:#f3d04e;
  --ui:Tahoma,Verdana,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--vt:'VT323',monospace}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;background:#9fd9df;overflow:hidden}
body{font:13px/1.45 var(--ui);color:var(--ink);-webkit-font-smoothing:none}
button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0}
a{color:inherit}
#wall{position:fixed;inset:0;width:100vw;height:100vh;image-rendering:pixelated;z-index:0;background:#cfe6ea}
.crt{position:fixed;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,40,50,.035) 0 1px,transparent 1px 3px)}
canvas[data-ico]{width:32px;height:32px;image-rendering:pixelated}
/* bevels */
.raised,.btn,.win,.taskbar .start,.task,.ca,.seg button,.tb-btns i,.chips button{border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--lo),inset 1px 1px var(--silver2);background:var(--silver)}
.sunken,input,textarea,select,.panel,.drop{border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);box-shadow:inset 1px 1px var(--dk)}
/* desktop icons */
.icons{position:fixed;left:10px;top:14px;z-index:2;display:flex;flex-direction:column;gap:12px;width:86px}
.icons button{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:12px;text-shadow:1px 1px 0 #0b1a1d,0 0 6px rgba(0,40,50,.6);padding:4px 2px}
.icons button span{padding:0 3px;line-height:1.25;text-align:center}
.icons button:focus span,.icons button:hover span{background:var(--teal);outline:1px dotted #fff}
/* windows */
.win{position:fixed;z-index:5;display:flex;flex-direction:column;padding:2px}
.main{left:110px;right:28px;top:16px;bottom:52px;max-width:1180px;margin:0 auto}
.tb{display:flex;align-items:center;gap:6px;height:24px;padding:0 3px 0 4px;background:linear-gradient(90deg,var(--teal),var(--teal2));color:#fff;font-weight:700;font-size:13px;flex:none;user-select:none}
.tb b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.tb-ico{width:16px!important;height:16px!important}
.tb-btns{display:flex;gap:2px}.tb-btns i{width:18px;height:16px;display:grid;place-items:center;font:700 11px/1 var(--ui);color:var(--ink);font-style:normal;cursor:pointer;padding:0}
.menu{display:flex;gap:2px;padding:3px 4px;border-bottom:1px solid var(--lo);box-shadow:0 1px var(--hi);flex:none;flex-wrap:wrap}
.menu button{padding:2px 8px}.menu button:hover,.menu button.on{background:var(--teal);color:#fff}
.menu button.on{outline:1px dotted #fff;outline-offset:-3px}
.np-r{margin-left:auto;padding:2px 6px}.np-r a{text-decoration:underline}
.body{flex:1;overflow:auto;padding:10px;scrollbar-color:var(--silver) var(--silver2)}
.body::-webkit-scrollbar{width:16px}.body::-webkit-scrollbar-track{background:repeating-conic-gradient(var(--silver) 0 25%,var(--hi) 0 50%) 0 0/2px 2px}
.body::-webkit-scrollbar-thumb{background:var(--silver);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi)}
.view{display:none}.view.on{display:block}
/* panels */
.panel{background:#fff;margin-bottom:10px}
.ph{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--teal),var(--teal2));color:#fff;font-weight:700;padding:3px 8px;font-size:13px;min-height:24px}
.ph-r{margin-left:auto;font-weight:400;font-size:12px;opacity:.95}
.pad{padding:14px 16px}
h1{font:700 26px/1.15 var(--ui);letter-spacing:-.3px;margin:2px 0 10px}
h2{font:700 22px/1.2 var(--ui);margin-bottom:8px}
.lead{max-width:760px;margin-bottom:8px}.lead.small{font-size:12.5px;color:#35484d}
.warn{font-size:12px;color:#5c6c71;font-style:italic;margin:6px 0 12px}
.hint{font-size:12px;color:#55676c;margin:6px 0}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.btn{padding:5px 14px;min-height:28px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.btn:active,.seg button.on,.chips button.on{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px var(--lo)}
.btn.primary{font-weight:700;outline:1px solid var(--dk);outline-offset:-5px}
.btn.big{padding:9px 20px;font-size:14px;margin-top:6px}.btn.wide{width:100%;justify-content:center;margin-top:8px}
.btn:disabled{color:var(--lo);text-shadow:1px 1px #fff}
.dot{width:8px;height:8px;border-radius:50%;background:#18c26a;box-shadow:0 0 0 1px #0b1a1d;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
/* dos + mosaic */
.dos .dos-in{background:#000;padding:14px 16px 12px;color:#d6f6f8;font:20px/1.1 var(--vt)}
.mosaic{display:block;max-width:100%;height:auto;image-rendering:pixelated;margin-bottom:10px;box-shadow:0 0 0 2px #1d2b2e}
.prompt{letter-spacing:.5px}.cur{font-style:normal;animation:blink 1s steps(2) infinite}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.stats div{border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);background:var(--silver2);padding:8px 10px}
.stats b{display:block;font:30px/1 var(--vt);color:var(--teal)}.stats span{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#43555a}
.stats.sm b{font-size:24px}
/* archive */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.seg{display:inline-flex;gap:2px;flex-wrap:wrap}.seg button{padding:3px 10px}.seg.wrap{gap:4px}
.chips{display:flex;gap:4px;flex-wrap:wrap}.chips button{padding:2px 8px;font-size:12px}
.files{display:grid;gap:6px}
.file{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:8px 10px;border:1px solid #c4d1d4;background:#f7fbfb;cursor:pointer;text-align:left;width:100%}
.file:hover{background:#e6f7f9;border-color:var(--aqua)}
.file .up{display:flex;flex-direction:column;align-items:center;font:20px/1 var(--vt);color:var(--teal);min-width:34px;padding:2px 4px}
.file .up:hover{background:var(--aqua2)}.file .up.on{color:#c2410c}
.file .fn{font:600 12.5px var(--mono);word-break:break-all}.file .meta{font-size:12px;color:#4f6166;margin:2px 0 4px}
.file .q{font:19px/1.15 var(--vt);color:#163a40}
.file canvas{width:32px;height:32px}
.lv{display:inline-block;font:700 11px var(--mono);background:var(--teal);color:#fff;padding:0 5px;margin-right:4px}
.lv.house{background:#5e6f74}.lv.tok{background:#c2410c}
/* shallow end */
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:10px;height:calc(100vh - 150px);min-height:520px}
.doors{display:flex;flex-direction:column;margin:0;min-height:0}
.door-list{overflow:auto;flex:1}
.door{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:7px 8px;border-bottom:1px solid #d9e3e5;width:100%;text-align:left}
.door:hover{background:#e6f7f9}.door.on{background:var(--teal);color:#fff}.door.on .last{color:#d8f6f8}
.door .th{width:44px;height:44px;image-rendering:pixelated;border:1px solid #9ab}
.door b{font-size:13px}.door .last{display:block;font-size:11.5px;color:#55676c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.door .wl{display:block;height:4px;background:#d5e2e5;margin-top:4px}.door .wl i{display:block;height:100%;background:var(--aqua)}
.room-wrap{display:flex;flex-direction:column;gap:10px;min-height:0}
.room-head{margin:0;flex:none}
.rh-body{display:grid;grid-template-columns:300px 1fr;gap:12px;padding:10px;align-items:start}
.rh-view,.pv-view,.tok-art{position:relative;aspect-ratio:16/9;background:#cfe6ea;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);overflow:hidden}
.rh-view canvas,.pv-view canvas,.tok-art canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.gauge{position:absolute;right:6px;top:6px;bottom:6px;width:16px;background:rgba(255,255,255,.75);border:1px solid #0b1a1d;display:flex;align-items:flex-end}
.gauge i{display:block;width:100%;background:linear-gradient(#7fe3eb,#14808d);transition:height 1s}
.gauge b{position:absolute;right:20px;bottom:0;font:18px/1 var(--vt);color:#fff;text-shadow:1px 1px 0 #0b1a1d;white-space:nowrap}
.rh-tag{position:absolute;left:6px;top:6px;font:700 11px var(--mono);background:#0b1a1d;color:#7fe3eb;padding:1px 6px}
.rh-info{font-size:12.5px}.rh-info h3{font:700 17px var(--ui);margin-bottom:2px}.rh-info .halves{font:600 12px var(--mono);color:var(--teal);margin:4px 0}
.rh-info dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin-top:6px;font-size:12px}.rh-info dt{color:#5c6c71}.rh-info dd{font-family:var(--mono)}
.term{margin:0;display:flex;flex-direction:column;flex:1;min-height:0}
.term-out{flex:1;overflow:auto;background:var(--term);color:var(--termtx);font:19px/1.18 var(--vt);padding:10px 12px;min-height:220px}
.term-out p{margin:0 0 5px;white-space:pre-wrap;word-break:break-word}
.term-out .ts{color:#4f8a91}.term-out .src{color:#f3d04e}.term-out .wa{color:#7fe3eb}.term-out .wb{color:#a7b8ff}
.term-out .sys{color:#7d9ca1}.term-out .penny{color:#f3d04e}.term-out .new{animation:fadein .5s}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}}
.penny{display:flex;gap:6px;align-items:center;padding:6px;background:var(--silver)}
.penny span{font-weight:700;font-size:12px;white-space:nowrap}.penny input{flex:1;padding:4px 6px;background:#fff;min-width:0}
/* levels */
.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.lvl{border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);background:var(--silver);padding:4px;text-align:left;width:100%}
.lvl canvas{width:100%;aspect-ratio:16/9;display:block;image-rendering:pixelated;border:1px solid #8aa}
.lvl .lb,.lvl small,.lvl .wl{display:block}.lvl .lb{padding:6px 4px 2px}.lvl b{font-size:13px}.lvl small{display:block;font-size:11.5px;color:#4f6166}
.lvl .wl{height:6px;background:#bcd0d4;margin:6px 4px 2px;border:1px solid #6b7c80}.lvl .wl i{display:block;height:100%;background:var(--aqua)}
.empty{padding:20px;text-align:center;color:#55676c;border:1px dashed #9ab}
/* launch */
.launch{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:10px;align-items:start}
fieldset{border:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}.full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:700}
.lbl{display:block;font-size:12px;font-weight:700;margin-bottom:4px}
input,textarea,select{background:#fff;padding:4px 6px;font-weight:400;font-size:13px;resize:vertical;border-radius:0}
input.bad{background:#ffe9e4}
.drop{position:relative;display:flex;align-items:center;gap:10px;padding:8px;background:#fff;min-height:64px;font-weight:400;cursor:pointer}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop img{width:48px;height:48px;object-fit:cover;border:1px solid #9ab}
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.st{border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);background:var(--silver);padding:3px;text-align:left}
.st canvas{width:100%;aspect-ratio:16/9;display:block;image-rendering:pixelated}.st span{display:block;padding:3px 2px;font-size:12px}
.st.on{outline:2px solid var(--teal);outline-offset:1px}.st.on span{font-weight:700}
.models{display:grid;gap:4px}
.mdl{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid #c4d1d4;background:#f7fbfb;text-align:left;width:100%}
.mdl.on{background:var(--teal);color:#fff;border-color:var(--teal)}.mdl small{font:11px var(--mono);opacity:.75}.mdl i{font-style:normal;font:11px var(--mono);padding:1px 5px;border:1px solid currentColor}
.mdl .rb{width:12px;height:12px;border-radius:50%;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);background:#fff;box-shadow:inset 1px 1px var(--dk)}.mdl.on .rb{background:radial-gradient(#0b1a1d 30%,#fff 34%)}
.steps{display:flex;gap:4px;list-style:none;margin:10px 0 4px}.steps li{flex:1;text-align:center;font:11px var(--mono);padding:3px;background:#e2eaec;color:#6b7c80;border:1px solid #bccace}
.steps li.on{background:var(--yel);color:#0b1a1d}.steps li.done{background:var(--teal);color:#fff}
.note{font-size:12.5px;min-height:18px}.note.err{color:#b42318}
.preview .sticky{position:sticky;top:0}
.pv-term{min-height:240px;max-height:340px;font-size:18px}
/* token */
.tokv{display:grid;grid-template-columns:minmax(0,1.1fr) 1fr;gap:18px;align-items:start}
.ca-row{display:flex;gap:6px;margin:10px 0}.ca-row code{flex:1;font:12.5px var(--mono);padding:6px 8px;background:#fff;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);word-break:break-all}
.readme pre{font:13px/1.45 var(--mono);white-space:pre-wrap}
/* notepad + modal */
.note.win{left:50%;top:7vh;transform:translateX(-50%);width:min(820px,94vw);height:80vh;z-index:20}
.np{flex:1;overflow:auto;background:#fff;font:13px/1.5 var(--mono);padding:10px 12px;white-space:pre-wrap;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);margin:2px}
.modal.win{left:50%;top:14vh;transform:translateX(-50%);width:min(520px,94vw);z-index:30}
.modal .pad{background:var(--silver)}
/* taskbar */
.taskbar{position:fixed;left:0;right:0;bottom:0;height:40px;z-index:10;display:flex;align-items:center;gap:4px;padding:4px;background:var(--silver);border-top:2px solid var(--hi);box-shadow:0 -1px var(--silver2)}
.taskbar canvas{width:16px!important;height:16px!important}
.start{display:flex;align-items:center;gap:5px;padding:2px 10px;height:30px;font-weight:700}
.task{display:flex;align-items:center;gap:6px;height:30px;padding:2px 10px;min-width:150px;max-width:230px;white-space:nowrap;overflow:hidden}
.task.on{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px var(--lo);background:repeating-conic-gradient(var(--silver) 0 25%,var(--hi) 0 50%) 0 0/2px 2px;font-weight:700}
.tray{margin-left:auto;display:flex;align-items:center;gap:4px}
.ca{height:30px;padding:2px 10px;font-size:12.5px}.ca b{font-family:var(--mono);font-weight:600}
.clock{height:30px;display:flex;align-items:center;padding:0 12px;border:2px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);font-size:12.5px}
.start-menu{position:fixed;left:4px;bottom:42px;z-index:40;display:flex;background:var(--silver);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--lo),inset 1px 1px var(--silver2)}
.sm-side{width:30px;background:linear-gradient(0deg,var(--teal),var(--teal2));display:flex;align-items:flex-end;justify-content:center;padding:8px 0}
.sm-side span{writing-mode:vertical-rl;transform:rotate(180deg);color:#cdf3f6;font:700 18px var(--ui);letter-spacing:1px}.sm-side b{color:#fff}
.sm-items{display:flex;flex-direction:column;padding:3px;min-width:210px}
.sm-items button,.sm-items a{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;text-align:left;text-decoration:none}
.sm-items button:hover,.sm-items a:hover{background:var(--teal);color:#fff}.sm-items hr{border:0;border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);margin:3px 2px}
.toast{position:fixed;left:50%;bottom:56px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:60;background:#ffffe1;border:1px solid #0b1a1d;padding:6px 12px;font-size:12.5px;transition:.2s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}
/* responsive */
@media (max-width:1100px){.launch{grid-template-columns:1fr}.preview{display:none}.tokv{grid-template-columns:1fr}}
@media (max-width:900px){.icons{display:none}.main{left:6px;right:6px;top:6px}.split{grid-template-columns:1fr;height:auto}.doors{max-height:240px}.term{min-height:420px}.rh-body{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid2{grid-template-columns:1fr}.styles{grid-template-columns:repeat(2,1fr)}.task{display:none}.ca#caChip{display:none}h1{font-size:21px}.body{padding:6px}.pad{padding:12px}.menu button{padding:2px 6px}.file{grid-template-columns:auto 1fr}.file canvas{display:none}}