*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:"Courier New",ui-monospace,monospace;color:#fff;user-select:none;-webkit-user-select:none;touch-action:manipulation}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
#room{position:fixed;inset:0;width:100%;height:100%}
button{font-family:inherit;font-weight:900;cursor:pointer;border:0;border-bottom:4px solid rgba(0,0,0,.45);border-radius:4px}
#hud{position:fixed;top:env(safe-area-inset-top,0);left:0;right:0;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;padding:6px;z-index:5;font-size:13px;font-weight:900;text-shadow:2px 2px 0 #000}
.bar{display:flex;gap:4px;align-items:center}.bar i{display:block;width:90px;height:12px;background:#222;border:2px solid #fff}.bar b{display:block;height:100%;width:0;background:#ff3355}
#cofB{background:#a0662b!important}#clock{color:#ffd21f;font-size:16px}#strikes{color:#ff5050}
#screen{position:fixed;left:50%;transform:translateX(-50%);top:13%;width:min(640px,74vw);height:56%;background:#1c1830;border:3px solid #0a0812;display:flex;flex-direction:column;z-index:3;overflow:hidden;transition:filter .2s}
#screen.off{filter:brightness(0)}
#shead{background:#2b2550;padding:5px 8px;font-size:13px;font-weight:900;display:flex;gap:8px}#appname{color:#8b7bff}#viewers{margin-left:auto;color:#ff6b6b}
#cam{position:absolute;right:6px;top:30px;width:96px;height:72px;border:2px solid #8b7bff;z-index:2;background:#000}
#chat{flex:1;overflow:hidden;padding:4px 6px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;font-size:13px}
.msg{padding:4px 6px;background:#262040;border-left:4px solid #555;border-radius:3px;line-height:1.25;cursor:pointer;animation:pop .2s}
.msg.sel{outline:2px solid #ffd21f;background:#3a3060}.msg b{color:#7fe3ff}.msg.sus{border-left-color:#ff3355;background:#3a1830}
.msg .tag{float:right;font-size:10px;opacity:.6}.msg.old{border-left-color:#ff3355}
.norm{opacity:.55;font-size:12px;padding:1px 6px}
@keyframes pop{from{transform:scale(.8);opacity:0}}
#danger{display:none;align-items:center;gap:6px;padding:3px 8px;background:#400;font-size:12px;font-weight:900;color:#ff8080;animation:blink .6s infinite alternate}
#danger.on{display:flex}#danger i{flex:1;height:10px;background:#200;border:1px solid #f55;max-width:160px}#danger b{display:block;height:100%;background:#ff3355;width:0}
@keyframes blink{to{background:#800}}
#acts{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px;background:#120f22}
#acts button{padding:9px 2px;font-size:12px;color:#111;background:#ffd21f}#acts button small{display:block;font-size:9px;opacity:.6}
#acts [data-a=ban]{background:#ff5d5d}#acts [data-a=timeout]{background:#ffb347}#acts [data-a=warn]{background:#ffe066}#acts [data-a=delete]{background:#9fe0ff}
#tabs{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:6}
#tabs button{padding:12px 14px;font-size:14px;background:#8b7bff;color:#fff;position:relative;min-width:92px}#tabs button.on{background:#ffd21f;color:#111}
#tabs em{position:absolute;top:-8px;right:-6px;background:#ff3355;color:#fff;font-style:normal;font-size:11px;padding:1px 5px;border-radius:8px;display:none}#tabs em.on{display:block}
#tabs button.angry{animation:shake .25s infinite}
#tools{position:fixed;right:10px;bottom:calc(66px + env(safe-area-inset-bottom,0));z-index:6}#coffee{padding:10px 12px;font-size:16px;background:#a0662b;color:#fff}
#toast{position:fixed;top:44px;left:50%;transform:translateX(-50%);z-index:9;font-weight:900;font-size:15px;text-shadow:2px 2px 0 #000;pointer-events:none;text-align:center;width:90%}
#event{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:12;background:#ffd21f;color:#111;padding:16px;border:4px solid #111;text-align:center;font-weight:900;width:min(360px,88vw);box-shadow:8px 8px 0 #000}
#event button{margin-top:10px;padding:12px 18px;font-size:16px;background:#ff3355;color:#fff}
.hide{display:none!important}
#scare{position:fixed;inset:0;z-index:15;background:#300;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:shake .08s infinite}
#bigcam{width:min(92vw,110vh);aspect-ratio:4/3;max-height:75vh}
#rant{font-size:clamp(22px,6vw,54px);font-weight:900;color:#fff;text-shadow:4px 4px 0 #f00,-2px -2px 0 #000;text-align:center;padding:8px;font-family:Impact,"Arial Black",sans-serif}
@keyframes shake{0%{transform:translate(3px,-2px)}50%{transform:translate(-4px,3px)}100%{transform:translate(2px,4px)}}
#scare.raid{background:#001;animation:none}
.panel{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:radial-gradient(#2b1650,#000 75%);overflow:auto}
.panel h1{font-size:clamp(34px,9vw,80px);margin:0;color:#ffd21f;text-shadow:4px 4px 0 #ff3355,8px 8px 0 #5b3bff;font-family:Impact,"Arial Black",sans-serif;line-height:1}
.panel p{max-width:540px;opacity:.9}.panel button{padding:14px 22px;font-size:17px;background:#ffd21f;color:#111;margin:5px}
.panel .help{font-size:12px;opacity:.7}
@media (max-width:600px){#shead{font-size:11px;padding-right:80px;flex-wrap:wrap}#cam{top:4px!important}#screen{width:94vw;top:9%;height:64%}#cam{width:72px;height:54px}#tabs button{min-width:0;padding:12px 10px}#hud{font-size:11px}.bar i{width:60px}#tools{bottom:auto;top:calc(76% + 4px)}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;width:min(760px,100%);margin:8px 0}
.card{background:#1c1830;border:2px solid #5b3bff;padding:8px;display:flex;flex-direction:column;gap:4px;text-align:left;font-size:13px}
.card small{opacity:.75;font-size:11px}.card.own{border-color:#7fff9f}.card.lost{opacity:.5;border-color:#f33}
.card button{margin:4px 0 0;padding:8px;font-size:13px}.panel button:disabled{background:#444;color:#999}
.wallet{color:#7fff9f;font-weight:900;font-size:16px}.news{color:#ffd21f;font-weight:900}
.grade{font-size:64px;font-weight:900;font-family:Impact,sans-serif;line-height:1}.gS{color:#ffd21f}.gA{color:#7fff9f}.gB{color:#7fe3ff}.gC{color:#ccc}.gD{color:#ff5050}
table.pay{border-collapse:collapse;font-size:13px;margin:4px}table.pay td{padding:2px 10px;border-bottom:1px solid #333;text-align:left}table.pay td+td{text-align:right}
.panel{background:radial-gradient(rgba(43,22,80,.93),rgba(0,0,0,.96) 75%);justify-content:flex-start}.panel>*:first-child{margin-top:auto}.panel>*:last-child{margin-bottom:auto}
#tabs{max-width:98vw}#tabs button{font-size:12px;padding:12px 8px}