:root{--wood1:#5a3417;--wood2:#7a4a22;--wood3:#3e220e;--cream:#f3e3c3;--orange:#e8741c;--pcb:#0f4d2a;--copper:#c98a3a;--black:#141210}
*{box-sizing:border-box}
body{margin:0;background:#1c130c radial-gradient(circle at 50% 0,#3b2616,#120b06 70%);color:var(--cream);font-family:'Big Shoulders Display',sans-serif;min-height:100vh}
#app{max-width:1150px;margin:0 auto;padding:12px}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 16px;background:repeating-linear-gradient(90deg,#111 0 3px,#1d1d1d 3px 6px);border-radius:10px 10px 0 0;border-bottom:4px solid #000;position:relative}
.stripes{display:flex;flex-direction:column;gap:2px;width:60px}
.stripes i{height:4px;display:block}
.stripes i:nth-child(1){background:#f5d11b}.stripes i:nth-child(2){background:#f5a31b}.stripes i:nth-child(3){background:#e8741c}.stripes i:nth-child(4){background:#d6451b}.stripes i:nth-child(5){background:#a9281b}
h1{font-weight:900;font-size:clamp(28px,5vw,54px);letter-spacing:4px;margin:0;color:var(--cream);text-shadow:3px 3px 0 #a9281b}
h1 span{color:var(--orange)}
.cart{display:flex;gap:10px;align-items:center;background:#0a0a0a;padding:8px;border-radius:6px 6px 0 0;border:2px solid #333}
.cart-label{background:linear-gradient(180deg,#f5a31b,#d6451b 60%,#3a1a4a);padding:6px 10px;border-radius:3px;color:#fff;text-align:center;line-height:1}
.cart-label b{font-size:20px;font-weight:900;display:block}.cart-label small{font-size:10px}
.cart-btns{display:flex;flex-direction:column;gap:4px}
.cart-btns button{background:#333;color:var(--cream);border:1px solid #555;font-size:13px;padding:3px 8px;letter-spacing:1px}
.cart-btns button:active{background:var(--orange)}
main{display:grid;grid-template-columns:1fr 380px;gap:14px;margin-top:14px}
@media(max-width:860px){main{grid-template-columns:1fr}}
.tv{background:linear-gradient(135deg,var(--wood2),var(--wood1) 40%,var(--wood3));border-radius:26px;padding:22px 22px 10px;box-shadow:0 10px 30px #000a,inset 0 0 0 3px #0005;background-image:repeating-linear-gradient(95deg,#0000 0 7px,#0002 7px 9px),linear-gradient(135deg,var(--wood2),var(--wood1) 40%,var(--wood3))}
.screen{position:relative;background:#000;border-radius:28px/22px;overflow:hidden;aspect-ratio:4/3.6;border:10px solid #1a1a1a;box-shadow:inset 0 0 30px #000}
#canvas{width:100%;height:100%;image-rendering:pixelated;display:block;transition:filter .2s}
.screen.fx #canvas{filter:blur(.35px) saturate(1.3) contrast(1.1)}
.scan,.vig{position:absolute;inset:0;pointer-events:none}
.screen.fx .scan{background:repeating-linear-gradient(0deg,#0006 0 1px,#0000 1px 3px);mix-blend-mode:multiply}
.screen.fx .vig{background:radial-gradient(ellipse at center,#0000 55%,#000c 100%);box-shadow:inset 0 0 50px #fff1}
#fried,#initials{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#000c;font-family:'Press Start 2P';text-align:center;font-size:12px;color:#f5a31b;padding:10px}
#fried{background:radial-gradient(#555,#111);color:#ddd}
#fried small{font-size:8px;color:#aaa}
#initials input{font-family:'Press Start 2P';font-size:22px;width:120px;text-align:center;background:#000;color:#f5d11b;border:2px solid #f5d11b;text-transform:uppercase}
#initials button,#fried button{font-family:'Press Start 2P';font-size:10px;padding:8px;background:var(--orange);border:0;color:#000}
.tv-knobs{display:flex;align-items:center;gap:12px;padding:8px 6px 0;font-size:14px;letter-spacing:2px}
.tv-knobs i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ddd,#666);display:inline-block;box-shadow:0 2px 3px #000}
.tv-knobs label{margin-left:auto}
.console{margin-top:14px;background:repeating-linear-gradient(90deg,#141414 0 4px,#222 4px 8px);border-radius:8px;padding:10px;border-bottom:26px solid var(--wood1);box-shadow:0 8px 18px #000a}
.switch-row{display:flex;justify-content:space-around;flex-wrap:wrap;gap:8px}
.sw{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;letter-spacing:1px;color:#ccc;background:none;border:0;min-width:64px}
.sw .slot{width:18px;height:40px;background:#000;border-radius:3px;position:relative;box-shadow:inset 0 0 4px #000}
.sw .lever{position:absolute;left:-4px;width:26px;height:18px;border-radius:3px;background:linear-gradient(#eee,#888);top:2px;transition:top .12s}
.sw.on .lever{top:20px}
.sw b{font-size:10px;color:var(--orange)}
.side{display:flex;flex-direction:column;gap:12px}
.joy-panel{display:flex;align-items:center;justify-content:space-between;background:#111;border-radius:12px;padding:12px;border:2px solid #333}
.joy{display:flex;align-items:center;gap:8px}
.jb{width:54px;height:54px;border-radius:10px;background:#222;color:var(--cream);border:2px solid #444;font-size:20px;touch-action:none}
.jb.act{background:var(--orange);color:#000}
.stick{width:60px;height:60px;background:#000;border-radius:8px;display:flex;align-items:center;justify-content:center}
.knob-ball{width:22px;height:40px;background:linear-gradient(90deg,#222,#555,#222);border-radius:10px 10px 4px 4px;transition:transform .08s}
.fire{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6a5a,#b3160c 60%,#5a0600);border:4px solid #222;color:#fff;font-size:18px;font-weight:900;letter-spacing:2px;box-shadow:0 5px 0 #000;touch-action:none}
.fire.act{transform:translateY(4px);box-shadow:0 1px 0 #000}
.pcb{background:var(--pcb);background-image:linear-gradient(90deg,#0000 48%,#c98a3a33 48% 52%,#0000 52%),linear-gradient(0deg,#0000 48%,#c98a3a22 48% 52%,#0000 52%);background-size:36px 36px;border-radius:10px;padding:10px 12px;border:3px solid #093019;font-size:15px}
.pcb summary{cursor:pointer;font-weight:900;letter-spacing:2px;color:#b8f5c8}
.pcb summary em{font-weight:400;font-size:12px;color:#8ac79a}
.warn{font-size:12px;color:#f5d11b;margin:6px 0}
.chips{display:flex;gap:6px;margin:6px 0}
.chip{flex:1;background:#111;color:#bbb;font-size:12px;text-align:center;padding:10px 2px;border-radius:2px;position:relative;box-shadow:0 0 0 3px #111,0 3px 0 3px #000;border-top:3px dotted #aaa;border-bottom:3px dotted #aaa}
.jumpers{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.jumper{display:flex;align-items:center;gap:6px;background:#0a3a1f;border:1px dashed var(--copper);color:#cfe;padding:5px 8px;font-size:13px;text-align:left;border-radius:4px}
.jumper .clip{width:40px;height:10px;border-radius:5px;background:#333;position:relative;flex:none}
.jumper.on .clip{background:linear-gradient(90deg,#d22,#d22 30%,#f5d11b 30% 70%,#222 70%);box-shadow:0 0 8px #f33}
.jumper.on{border-style:solid;color:#fff;background:#3a1a0a}
.pots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.pot{display:flex;flex-direction:column;align-items:center;font-size:11px;letter-spacing:1px;text-align:center;touch-action:none;user-select:none}
.pot .dial{width:52px;height:52px;border-radius:50%;background:conic-gradient(from 0deg,#eee,#777,#ddd,#666,#eee);box-shadow:0 3px 5px #000,inset 0 0 0 5px #0003;position:relative;cursor:ns-resize}
.pot .dial::after{content:'';position:absolute;left:50%;top:4px;width:4px;height:14px;margin-left:-2px;background:#a9281b;border-radius:2px}
.pot b{color:var(--copper);font-size:12px}
.bends{display:flex;gap:6px}
.bend{flex:1;height:44px;border-radius:50%/40%;background:radial-gradient(#f5d11b,#b88a0a);border:3px solid #222;font-weight:900;font-size:13px;touch-action:none}
.bend.act{background:radial-gradient(#fff,#f5a31b);transform:scale(.95)}
.smoke{margin:10px 0;display:flex;align-items:center;gap:8px;font-size:12px}
.smoke .bar{flex:1;height:10px;background:#000;border-radius:5px;overflow:hidden}
#smokeBar{height:100%;width:0;background:linear-gradient(90deg,#aaa,#f5a31b,#d22)}
.mods{display:grid;grid-template-columns:1fr auto;gap:5px}
.mods input,.mods select{background:#062;color:#cfe;border:1px solid var(--copper);padding:4px;font-family:inherit;font-size:14px}
.mods button{background:var(--copper);border:0;font-weight:900;padding:4px 8px}
.hof{background:#111;border:2px solid #333;border-radius:10px;padding:10px 14px;font-family:'Press Start 2P';font-size:10px}
.hof h3{margin:0 0 8px;color:var(--orange);font-size:11px}
.hof ol{margin:0;padding-left:24px;line-height:1.9;color:#f5d11b}
#auth-status{margin-top:6px;font-size:8px;color:#888}
#auth-status a{color:var(--orange)}
.dbg{margin-top:14px;background:#030a04;border:2px solid #1c3;border-radius:6px;padding:8px;color:#3f6;font-family:'Press Start 2P';font-size:8px}
.dbg-head{display:flex;justify-content:space-between;margin-bottom:6px}
.dbg-grid{display:grid;grid-template-columns:1fr 1.2fr 2fr;gap:10px}
@media(max-width:700px){.dbg-grid{grid-template-columns:1fr 1fr}#ram{grid-column:span 2}}
.dbg pre{margin:0;line-height:1.6;white-space:pre;overflow:hidden;font-family:inherit}
.dbg .bad{color:#f33;background:#300}
footer{text-align:center;padding:18px;font-size:15px;letter-spacing:1px;color:#e8d3aa;background:repeating-linear-gradient(95deg,#0000 0 7px,#0002 7px 9px),linear-gradient(var(--wood2),var(--wood3));margin-top:14px;border-radius:8px}
footer a{color:#f5d11b}