:root{--c:#00ffff;--m:#ff00ff;--b:#2020ff;--k:#000;--w:#fff;--g:#c0c0c0}
*{box-sizing:border-box}
body{margin:0;font-family:'VT323',monospace;font-size:20px;color:#000;
background:var(--b);background-image:linear-gradient(45deg,#1818d0 25%,transparent 25%,transparent 75%,#1818d0 75%),linear-gradient(45deg,#1818d0 25%,transparent 25%,transparent 75%,#1818d0 75%);background-size:32px 32px;background-position:0 0,16px 16px}
body.fried{filter:saturate(6) contrast(2.2) hue-rotate(40deg)}
header{text-align:center;padding:18px 10px 6px;color:#fff}
h1{font-family:'Press Start 2P';font-size:clamp(16px,4vw,34px);margin:6px 0;cursor:pointer;animation:cyc 1.2s steps(6) infinite,jit .15s infinite;text-shadow:3px 3px 0 var(--m),-3px -2px 0 var(--c)}
@keyframes cyc{0%{color:#fff}33%{color:var(--c)}66%{color:#ff0}100%{color:#fff}}
@keyframes jit{50%{transform:translate(1px,-1px)}}
#byline{font-family:'Press Start 2P';font-size:11px;color:#ffd700;margin:2px 0 8px;text-shadow:2px 2px 0 var(--m)}
#byline:hover{animation:shake .1s infinite}
#subtitle{font-size:24px;color:var(--c);margin:0}
.tri{display:inline-block;font-size:40px;color:#ffd700;animation:spin 3s linear infinite}
.tri:hover{animation:shake .08s infinite}
@keyframes spin{to{transform:rotateY(360deg)}}
@keyframes shake{50%{transform:translateX(4px) rotate(8deg)}}
#auth-status{font-size:18px}
#auth-status a{color:#ff0}
main{display:grid;grid-template-columns:2fr 1fr;gap:14px;max-width:1200px;margin:auto;padding:12px}
.wide{grid-column:1/-1}
@media(max-width:800px){main{grid-template-columns:1fr}}
.win{background:var(--g);border:3px solid;border-color:#fff #404040 #404040 #fff;padding:8px}
.bar{background:linear-gradient(90deg,#000080,var(--m));color:#fff;font-family:'Press Start 2P';font-size:10px;padding:5px;margin:-8px -8px 8px;display:flex;justify-content:space-between;align-items:center}
.screen{position:relative;background:#000}
canvas{width:100%;display:block;image-rendering:pixelated;aspect-ratio:16/9}
.crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px);animation:vhs 4s infinite}
@keyframes vhs{0%,90%{transform:none}92%{transform:translateX(3px)skewX(2deg)}94%{transform:translateX(-2px)}}
button{font-family:'VT323';font-size:20px;background:var(--g);border:3px solid;border-color:#fff #404040 #404040 #fff;padding:4px 10px;cursor:pointer;margin:3px}
button:active{border-color:#404040 #fff #fff #404040;transform:scale(.94,1.06)}
button:hover{color:var(--m)}
.big{font-family:'Press Start 2P';font-size:11px;padding:10px}
.hot{background:var(--m);color:#fff}
.tiny{font-size:14px;padding:0 6px;opacity:.4}
.actions{display:flex;flex-wrap:wrap;margin-top:8px}
.row{display:flex;gap:10px;flex-wrap:wrap}
input,textarea{font-family:'VT323';font-size:19px;border:2px inset #fff;padding:3px;width:100%}
.row label{flex:1}
.fx{display:grid;grid-template-columns:1fr 90px;align-items:center;border-bottom:1px dotted #808080;padding:3px 0}
.fx input[type=range]{width:90px}
.fx label{display:flex;gap:6px;align-items:center}
.fx input[type=checkbox],.safe input{width:auto}
#gallery{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#gallery img{width:64px;height:64px;image-rendering:pixelated;background:var(--c);border:2px solid #000;cursor:pointer}
#gallery img.sel{border-color:var(--m);box-shadow:0 0 0 3px var(--m)}
#hall{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.card{background:#fff;border:2px solid #000;padding:6px;cursor:pointer}
.card:hover{background:var(--c)}
.card b{color:var(--m)}
footer{text-align:center;color:#fff;padding:20px}
footer a{color:var(--c)}
#carpet{position:fixed;top:30%;left:-200px;font-size:70px;z-index:99;pointer-events:none;display:none}
#carpet.fly{display:block;animation:fly 3s linear}
@keyframes fly{to{left:110%;transform:translateY(-120px) rotate(-10deg)}}