:root{--beige:#d8cbb0;--mustard:#c9a227;--teal:#4a7a7a;--crt:#0f1f14;--green:#7dff9a;--red:#ff5a4e;--ink:#2b2418}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#111;font-family:'IBM Plex Mono',monospace;color:var(--ink)}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}
#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:22px;text-shadow:0 0 3px #000;pointer-events:none;z-index:5}
#prompt{position:fixed;left:50%;top:56%;transform:translateX(-50%);background:rgba(20,18,12,.8);color:#ffe9a8;padding:6px 12px;border:1px solid var(--mustard);font-size:13px;pointer-events:none;z-index:5;display:none}
#hud{position:fixed;top:10px;left:10px;z-index:20;background:rgba(216,203,176,.92);border:2px solid var(--ink);padding:8px 10px;box-shadow:4px 4px 0 rgba(0,0,0,.4);font-size:12px;min-width:220px}
.hud-row{display:flex;align-items:center;gap:6px;margin:3px 0}
.lbl{font-weight:700;font-size:10px;letter-spacing:1px;opacity:.7}
.pay{font-family:'VT323';font-size:26px;color:#1d7a33}
.bar{flex:1;height:10px;background:#00000022;border:1px solid var(--ink)}
#hud-sus{height:100%;width:0;background:var(--red);transition:width .5s}
#hud-sus.pulse{animation:pulse .6s infinite alternate}
@keyframes pulse{to{opacity:.35}}
#auth-status{font-size:10px;margin-top:4px}
#auth-status a{color:var(--teal)}
.key{font-family:'IBM Plex Mono';font-weight:700;font-size:12px;background:linear-gradient(#efe6d2,#cfc2a5);border:1px solid #8a7d62;border-bottom:4px solid #8a7d62;border-radius:5px;padding:7px 10px;cursor:pointer;color:var(--ink);transition:transform .05s}
.key:active,.key.on{transform:translateY(3px);border-bottom-width:1px}
.key:disabled{opacity:.45;cursor:not-allowed}
.key.big{font-size:15px;padding:10px 16px}
.screen{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#3d4652 0 12px,#38414c 12px 24px)}
.form{background:#f4eedd;width:min(520px,92vw);padding:22px;border:2px solid var(--ink);box-shadow:10px 10px 0 #0006;position:relative;max-height:94vh;overflow:auto;animation:drop .5s ease-out}
@keyframes drop{from{transform:translateY(-40px) rotate(-2deg);opacity:0}}
.form-head{border-bottom:3px double var(--ink);margin-bottom:14px;padding-bottom:10px}
.logo{font-family:'Archivo Black';font-size:34px;line-height:.95;color:var(--ink)}
.est{font-size:11px;opacity:.7;margin-top:6px}
.form label{display:block;font-size:12px;font-weight:700;margin:10px 0}
.form input[type=text],.form input:not([type]){display:block;width:100%;margin-top:4px;font:inherit;padding:8px;border:none;border-bottom:2px solid var(--ink);background:#fffbe9;font-family:'Caveat';font-size:24px}
.chk{font-weight:400!important;display:flex!important;gap:8px;align-items:flex-start}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.small{font-size:11px;opacity:.75;margin:6px 0}
.foot{margin-top:10px;font-size:12px}.foot a{color:var(--teal)}
#desk{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;padding:70px 10px 10px;gap:8px;background:radial-gradient(ellipse at center,rgba(0,0,0,.2),rgba(0,0,0,.75))}
.monitors{flex:1;display:flex;gap:10px;min-height:0}
.mon{flex:1;background:var(--crt);border:14px solid #cfc4a8;border-bottom-width:22px;border-radius:8px;color:var(--green);font-family:'VT323';font-size:19px;padding:8px;display:flex;flex-direction:column;min-height:0;position:relative;box-shadow:inset 0 0 40px #000,0 8px 0 #8a7d62}
.mon::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px)}
#mon-left{overflow:auto;flex:.85}
.mon-title{background:var(--green);color:var(--crt);padding:0 6px;display:flex;gap:10px;justify-content:space-between}
.sec{margin-top:8px;opacity:.7}
#roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.vcard{border:1px solid #3c7a4a;padding:5px;cursor:pointer;font-size:16px;line-height:1.05}
.vcard:hover{background:#163322}.vcard.sel{background:#245a35;border-color:var(--green)}
.vcard.lock{opacity:.35;cursor:not-allowed}
.vcard .av{font-size:24px;float:left;margin-right:5px}
.tb{height:5px;background:#0006;margin-top:3px}.tb div{height:100%}
#vectors{display:flex;flex-wrap:wrap;gap:5px}
.vec{border:1px solid #3c7a4a;padding:3px 7px;cursor:pointer;font-size:17px}
.vec.sel{background:var(--green);color:var(--crt)}.vec.lock{opacity:.35;cursor:not-allowed}
.dial{margin-top:10px;font-size:16px}
#chat{flex:1;overflow-y:auto;padding:6px 2px;display:flex;flex-direction:column;gap:5px;min-height:0}
.b{max-width:82%;padding:4px 8px;border-radius:6px;line-height:1.1}
.b.v{align-self:flex-start;background:#1f3d28;border:1px solid #3c7a4a}
.b.p{align-self:flex-end;background:#c9a22733;border:1px solid var(--mustard);color:#ffe9a8}
.sys{align-self:center;opacity:.6;font-size:16px;text-align:center}
.typing{opacity:.6;align-self:flex-start;animation:pulse .5s infinite alternate}
#suggest{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.sg{font-size:15px;border:1px dashed #3c7a4a;padding:2px 6px;cursor:pointer;flex:1 1 30%;min-width:140px}
.sg:hover{background:#163322}
.inrow input{width:100%;background:#000;border:1px solid var(--green);color:var(--green);font-family:'VT323';font-size:20px;padding:6px}
#whistle{background:var(--red);color:#fff;padding:3px 6px;animation:pulse .4s infinite alternate}
.actionbar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
#profile{position:fixed;right:20px;top:80px;width:280px;background:#f4eedd;border:2px solid var(--ink);padding:12px;z-index:25;box-shadow:6px 6px 0 #0007;font-size:12px}
#profile .big-av{font-size:54px;text-align:center}
#profile h3{margin:4px 0;font-family:'Archivo Black'}
.meter{height:16px;border:2px solid var(--ink);background:#fff;margin:4px 0}
.meter div{height:100%;transition:width .6s,background .6s}
.flag{font-size:11px}.flag.hit{text-decoration:line-through;color:var(--red)}
#notebook,#modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#000a}
.paper{width:min(520px,94vw);max-height:90vh;overflow:auto;background:#fffbe6 repeating-linear-gradient(transparent 0 27px,#9fc3e0 27px 28px);padding:24px 24px 14px 50px;font-family:'Caveat';font-size:23px;position:relative;box-shadow:6px 8px 0 #0008;border-left:3px solid #e88}
.paper h2{margin:0 0 6px;font-size:34px}
.paper .margin{color:#c33;transform:rotate(-2deg);margin-top:8px}
.flip{animation:flip .35s}
@keyframes flip{from{transform:rotateY(70deg);opacity:.2}}
.nb-nav{display:flex;gap:10px;align-items:center;margin-top:10px;font-family:'IBM Plex Mono';font-size:13px}
.nb-nav button{font-family:inherit;cursor:pointer}
.mbox{background:#f4eedd;border:2px solid var(--ink);padding:20px;width:min(480px,92vw);max-height:88vh;overflow:auto;box-shadow:8px 8px 0 #0008;animation:drop .4s}
.mbox h2{font-family:'Archivo Black';margin:0 0 8px}
.mbox.pink{background:#ffc9d6}
.mbox .memo{font-family:'Caveat';font-size:22px;border-left:3px solid var(--mustard);padding-left:10px;margin:10px 0}
.box{font-size:70px;text-align:center;animation:box 1.2s ease-in-out infinite alternate}
@keyframes box{to{transform:translateY(-10px) rotate(4deg)}}
.lb td{padding:3px 6px;border-bottom:1px dashed #0003;font-size:12px}
#toasts{position:fixed;right:12px;top:12px;z-index:80;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.toast{background:var(--ink);color:#ffe9a8;padding:8px 12px;border-left:5px solid var(--mustard);font-size:12px;max-width:300px;animation:drop .3s}
.toast.bad{border-color:var(--red)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.bill{position:absolute;top:-30px;width:34px;height:16px;background:#6fbf6f;border:1px solid #2d6b2d;color:#2d6b2d;font-size:10px;text-align:center;font-weight:700;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
#mobile-ui{position:fixed;inset:0;pointer-events:none;z-index:10}
#joy{position:absolute;left:20px;bottom:30px;width:120px;height:120px;border-radius:50%;background:#fff2;border:2px solid #fff6;pointer-events:auto;touch-action:none}
#joy-knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#fff8}
#m-interact{position:absolute;right:20px;bottom:40px;pointer-events:auto}
#m-desk{position:absolute;right:20px;bottom:100px;pointer-events:auto}
@media (max-width:760px){
  .monitors{flex-direction:column}
  #desk{padding-top:96px}
  .mon{border-width:6px;font-size:17px}
  #mon-left{flex:0 0 38%}
  #hud{font-size:10px;min-width:0;padding:5px}
  .pay{font-size:20px}
  .actionbar .key{font-size:10px;padding:5px 6px}
  #profile{right:6px;left:6px;width:auto;top:96px}
}