:root{--orange:#d9581c;--gold:#e4a82b;--avocado:#6b7a2a;--choc:#3b2414;--cream:#f3e3c0}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:'Courier Prime',monospace;color:var(--cream);
background:repeating-linear-gradient(90deg,#4a2c17 0 38px,#3d2412 38px 40px,#553219 40px 78px,#3a2110 78px 80px);
display:flex;flex-direction:column;align-items:center;overflow-x:hidden}
#auth-status{position:fixed;top:6px;right:10px;font-size:11px;opacity:.7;z-index:5}
#stage{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:flex-start;padding:22px 10px}
#device{width:min(400px,96vw);padding:16px 18px 10px;border-radius:26px 26px 60px 60px;
background:linear-gradient(160deg,#eb7a2e,#c94d15 60%,#9f3a0e);
box-shadow:inset 0 3px 0 #ffb070,inset 0 -6px 0 #7a2c08,0 18px 30px #0009;position:relative;animation:drop .6s ease-out}
@keyframes drop{from{transform:translateY(-40px) rotate(-3deg);opacity:0}}
.label{background:linear-gradient(135deg,#ddd,#fff 40%,#aaa 60%,#eee);color:#3b2414;border-radius:10px;padding:6px;text-align:center;box-shadow:inset 0 0 0 2px #8886}
.label h1{font-family:Monoton,cursive;font-weight:400;font-size:clamp(20px,6.6vw,28px);margin:0;color:var(--orange);letter-spacing:1px}
.label p{margin:0;font-size:9px;font-weight:700;letter-spacing:1px}
.top-row{display:flex;align-items:center;gap:6px;margin:8px 4px}
.pled{width:9px;height:9px;border-radius:50%;background:#f22;box-shadow:0 0 8px #f33;animation:fl 3s infinite}
@keyframes fl{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.3}50%{opacity:1}}
.tiny{font-size:9px;font-weight:700;color:#3b2414}
.grille{margin-left:auto;width:90px;height:22px;background:radial-gradient(circle,#3b1a08 2px,transparent 2.5px) 0 0/8px 8px}
.bezel{background:#1a0e07;padding:12px;border-radius:12px;box-shadow:inset 0 4px 10px #000}
canvas{display:block;width:100%;image-rendering:pixelated;border-radius:4px}
#controls{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:14px}
.btn{border:none;cursor:pointer;font-family:Bungee;color:#fff;transition:transform .05s;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.btn:active,.btn.on{transform:translateY(3px)}
.dpad{display:flex;gap:4px}
.dp{width:52px;height:52px;background:#2a1a10;border-radius:10px;box-shadow:0 4px 0 #0008;font-size:20px}
.throw{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6a5a,#c01010 60%,#7a0808);box-shadow:0 5px 0 #5a0505,0 8px 12px #0007;font-size:13px}
.smalls{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.rb{background:#3b2414;color:var(--gold);border:none;border-radius:14px;padding:6px 4px;font:700 10px 'Courier Prime';cursor:pointer;box-shadow:0 3px 0 #1a0e07}
.rb:active,.rb.on{transform:translateY(2px);box-shadow:0 1px 0 #1a0e07;background:#5a3620}
.bottom-row{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:12px}
.hatch{background:#a8400f;border:1px dashed #3b2414;color:#fff3dc;font:700 10px 'Courier Prime';padding:5px 7px;border-radius:6px;cursor:pointer}
.fine{font-size:9px;text-align:center;color:#3b2414;margin:8px 0 2px}
.panel{transition:all .3s}
.hidden{display:none!important}
#battery{margin-top:10px;background:#2b1b10;border-radius:10px;padding:10px;display:flex;gap:10px;animation:slide .3s}
@keyframes slide{from{transform:translateY(-10px);opacity:0}}
.batts{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.batts i{display:block;width:28px;height:52px;background:linear-gradient(90deg,#222,#666,#222);border-radius:4px;color:var(--gold);font:700 9px monospace;text-align:center;line-height:52px;font-style:normal;border-top:4px solid #ccc}
.dipwrap b{font-size:10px;color:#f55}
#dips{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}
.dip{display:flex;align-items:center;gap:5px;font-size:10px;cursor:pointer}
.dip span{width:16px;height:26px;background:#c01010;border-radius:3px;position:relative}
.dip span::after{content:'';position:absolute;left:3px;width:10px;height:10px;background:#fff;top:13px;transition:top .15s}
.dip.on span::after{top:3px}
#pcb{width:min(420px,96vw);background:#0f4a24;border-radius:14px;padding:12px;box-shadow:0 14px 30px #000a;border:3px solid #062812;animation:slide .3s}
.pcbhead{display:flex;justify-content:space-between;font-size:11px;color:#bfe8a0;gap:6px;flex-wrap:wrap}
.meter{display:inline-block;width:80px;height:9px;background:#062812;border:1px solid #bfe8a0;vertical-align:middle}
.meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#e4a82b,#f22);transition:width .3s}
#board{position:relative;height:280px;margin:10px 0;border-radius:8px;
background:linear-gradient(#0f4a24,#0f4a24),repeating-linear-gradient(0deg,transparent 0 22px,#1d6b38 22px 24px);
background:repeating-linear-gradient(0deg,transparent 0 30px,#1c6636 30px 32px),repeating-linear-gradient(90deg,transparent 0 46px,#1c6636 46px 48px),#0f4a24}
#wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.chip{position:absolute;background:#141414;color:#ddd;font:700 11px monospace;padding:12px 16px;border-radius:3px;text-align:center;box-shadow:0 3px 0 #000;
border-left:4px dotted #bbb;border-right:4px dotted #bbb}
.chip.small{padding:8px 10px;font-size:9px}
.pad{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:radial-gradient(#fff6c0,#d4a020 50%,#7a5a10);border:none;cursor:pointer;z-index:4;font:700 8px monospace;color:#2a1a00}
.pad.sel{box-shadow:0 0 0 4px #fff,0 0 16px #ff0}
.pad em{position:absolute;top:32px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#bfe8a0;font-style:normal;font-size:8px}
.pcbfoot{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#wireList{display:flex;flex-wrap:wrap;gap:4px;width:100%}
.wtag{font-size:10px;padding:3px 6px;border-radius:10px;background:#062812;cursor:pointer}
.hint{font-size:10px;color:#9c9;margin:6px 0 0}
#modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:20;padding:12px}
.sheet{background:#f1dfa8;color:#3b2414;max-width:420px;width:100%;max-height:85vh;overflow:auto;padding:20px;border-radius:4px;transform:rotate(-1deg);box-shadow:0 10px 30px #000;
background-image:radial-gradient(#d4b87044 1px,transparent 1px);background-size:6px 6px}
.sheet h2{font-family:Bungee;color:var(--orange);margin:0 0 8px}
.sheet table{width:100%;font-size:13px;border-collapse:collapse}
.sheet td{padding:3px;border-bottom:1px dotted #3b241466}
.sheet input{font:700 22px 'Courier Prime';width:90px;text-transform:uppercase;text-align:center;letter-spacing:4px}
.tabs button{font:700 11px 'Courier Prime';margin-right:4px}
.smoke{position:fixed;pointer-events:none;border-radius:50%;background:#bbb8;filter:blur(6px);animation:smk 2s forwards;z-index:30}
@keyframes smk{to{transform:translateY(-160px) scale(4);opacity:0}}
footer{padding:14px}
footer a{color:var(--gold);font-weight:700}