:root{--amber:#ffb347;--fg:var(--amber);--bg:#0a0605;--red:#c8102e}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:#e8d9c0;font-family:'VT323',monospace;overflow:hidden}
body{background:radial-gradient(ellipse at 30% 0%,#3a2414 0%,#140b07 45%,#070403 100%)}
#room{display:flex;height:calc(100% - 26px)}
#scene-wrap{position:relative;width:42%;height:100%}
#scene-container{width:100%;height:100%}
#panel{position:absolute;left:12px;bottom:14px;display:flex;gap:10px;align-items:center;background:linear-gradient(#a8823e,#6b4f1f);border:2px solid #3b2a10;border-radius:6px;padding:6px 10px;box-shadow:0 4px 10px #000a}
.leds i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;background:#222;box-shadow:inset 0 0 2px #000}
.leds i.on#led-g{background:#5f5;box-shadow:0 0 8px #5f5}
.leds i.on#led-a{background:#fb3;box-shadow:0 0 8px #fb3}
.leds i.on#led-r{background:#f43;box-shadow:0 0 8px #f43}
.gauge{width:44px;height:44px;border-radius:50%;background:radial-gradient(#f4ecd8,#cbb98f);border:3px solid #3b2a10;position:relative;font-size:9px;color:#333;text-align:center}
.gauge span{position:absolute;bottom:6px;left:0;right:0}
.needle{position:absolute;left:50%;top:50%;width:2px;height:17px;background:#b00;transform-origin:50% 100%;margin-left:-1px;margin-top:-17px;transition:transform .2s}
.ptxt{color:#2a1a08;font-size:16px}
#tip{position:absolute;display:none;pointer-events:none;background:#f4ecd8;color:#3a1a0a;padding:4px 8px;border-radius:4px;font-size:16px;line-height:1}
#crt-wrap{flex:1;display:flex;flex-direction:column;padding:18px 18px 8px 0;min-width:0}
#crt{flex:1;display:flex;flex-direction:column;background:linear-gradient(160deg,#cdb58c,#9c8058 60%,#6e5638);border-radius:26px;padding:22px 22px 8px;box-shadow:0 20px 40px #000c,inset 0 2px 0 #fff6,inset 0 -4px 10px #0006;min-height:0}
#screen{position:relative;flex:1;background:radial-gradient(ellipse,#1a0f04 0%,#050200 90%);border-radius:28px/22px;overflow:hidden;padding:18px 22px;box-shadow:inset 0 0 40px #000,inset 0 0 6px #000;color:var(--fg);font-size:20px;line-height:1.1;text-shadow:0 0 4px var(--fg),0 0 12px color-mix(in srgb,var(--fg) 40%,transparent);animation:flick 4s infinite;cursor:text;display:flex;flex-direction:column;min-height:0}
#screen.green{--fg:#5cff7a}
#screen.panic{--fg:#ff5a4a;background:radial-gradient(ellipse,#2a0503,#080000 90%)}
#out{overflow-y:auto;flex:0 1 auto;white-space:pre-wrap;word-break:break-word;scrollbar-width:none}
#out::-webkit-scrollbar{display:none}
#line{white-space:pre-wrap;word-break:break-all}
#cursor{animation:blink 1s steps(1) infinite}
#hidden-in{position:absolute;opacity:0;left:0;bottom:0;width:1px;height:1px;border:0;font-size:16px}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0006 2px 3px)}
.vig{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px 20px #000b;border-radius:28px/22px}
#static{position:absolute;inset:0;pointer-events:none;opacity:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");transition:opacity .3s}
#static.on{opacity:.85;animation:jit .08s infinite}
@keyframes jit{0%{background-position:0 0}50%{background-position:37px 81px}100%{background-position:-50px 20px}}
@keyframes flick{0%,100%{opacity:1}48%{opacity:.97}50%{opacity:.93}52%{opacity:.98}}
@keyframes blink{50%{opacity:0}}
.bo{display:inline-block;animation:bob 1.6s infinite ease-in-out}
@keyframes bob{0%{transform:translateY(0) scale(1)}60%{transform:translateY(-4px) scale(1.1)}80%{transform:translateY(-6px) scale(1.4);opacity:.3}81%{transform:translateY(2px) scale(.5);opacity:0}100%{transform:none;opacity:1}}
.dim{opacity:.6}.err{color:#ff6b5a;text-shadow:0 0 6px #f43}.warn{color:#ffe066}.ok{color:#9f9}.big{font-size:26px}
#bezel-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:8px}
.badge{background:linear-gradient(#e9e2cf,#a99c7a);color:var(--red);font-family:'Pacifico',cursive;font-size:15px;padding:1px 12px;border-radius:3px;border:1px solid #5a4528}
.pwr{width:12px;height:12px;border-radius:50%;background:#f22;box-shadow:0 0 10px #f22}
#oc-badge{display:none;background:#f22;color:#fff;padding:0 6px;border-radius:3px;font-size:16px;animation:blink .5s steps(1) infinite}
#keyboard{margin-top:10px;background:linear-gradient(#6e5638,#3e2f1d);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 10px 20px #000a}
.krow{display:flex;gap:4px;justify-content:center}
.key{flex:0 0 auto;min-width:26px;height:24px;background:linear-gradient(#efe4cc,#c4b38f);border-radius:4px;box-shadow:0 3px 0 #6b5a3a;color:#4a3519;font-size:14px;text-align:center;line-height:24px;padding:0 4px;transition:transform .05s,box-shadow .05s}
.key.down{transform:translateY(3px);box-shadow:0 0 0 #6b5a3a;background:#d9c7a0}
.key.wide{min-width:200px}
#chips{display:none;gap:6px;overflow-x:auto;padding:8px 0}
#chips button{flex:0 0 auto;background:#3b1a0c;color:var(--amber);border:1px solid var(--amber);border-radius:14px;font-family:inherit;font-size:17px;padding:3px 12px}
#mute{position:fixed;top:10px;right:12px;background:#2a1a0e;color:var(--amber);border:1px solid #6b4f1f;font-family:inherit;font-size:16px;border-radius:4px;padding:2px 8px;cursor:pointer;z-index:5}
#hint{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:#f4ecd8;color:#3a1a0a;padding:6px 12px;border-radius:6px;font-size:18px;z-index:6;box-shadow:0 6px 20px #000a}
#hint button{font-family:inherit;margin-left:6px;background:var(--red);color:#fff;border:0;border-radius:3px;cursor:pointer}
footer{height:26px;line-height:26px;text-align:center;font-size:15px;color:#8a7356}
footer a{color:var(--amber)}
@media (max-width:800px){
  #room{flex-direction:column}
  #scene-wrap{width:100%;height:38vh}
  #crt-wrap{padding:0 8px 4px}
  #crt{padding:12px 12px 6px;border-radius:16px}
  #screen{font-size:17px;padding:10px 12px}
  #keyboard{display:none}
  #chips{display:flex}
  #panel{transform:scale(.8);transform-origin:left bottom}
  footer{font-size:11px}
}