:root{--bg:#0d0806;--bronze:#b87333;--red:#c1121f;--gold:#f4c430;--ink:#e8d9c0}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#2a0d08 0%,var(--bg) 60%);color:var(--ink);font-family:'IBM Plex Mono',monospace;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 4px);z-index:50}
header{text-align:center;padding:18px 10px 6px;position:relative}
.title{font-family:Anton,sans-serif;font-size:clamp(34px,7vw,78px);margin:0;letter-spacing:2px;background:linear-gradient(180deg,var(--gold),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent;animation:jit 3s infinite;position:relative}
@keyframes jit{0%,92%,100%{transform:none}93%{transform:translate(3px,-2px) skewX(-6deg)}95%{transform:translate(-4px,1px)}97%{transform:translate(2px,2px) skewX(4deg)}}
.sub{margin:0;font-weight:300;font-style:italic;color:var(--bronze)}
#auth-status{position:absolute;right:12px;top:10px;font-size:12px}
#auth-status a,#auth-status button{color:var(--gold);background:none;border:1px solid var(--bronze);padding:3px 8px;cursor:pointer;font:inherit}
main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;padding:12px 18px;max-width:1500px;margin:auto}
@media(max-width:900px){main{grid-template-columns:1fr;padding:8px}}
canvas{width:100%;aspect-ratio:16/9;display:block;background:#000;border:3px solid var(--bronze);box-shadow:0 0 40px #c1121f55}
.transport{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.shield{width:92px;height:104px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:radial-gradient(circle at 40% 30%,#e04040,var(--red) 50%,#5a0508);border:4px solid var(--gold);font-family:Anton;font-size:22px;color:var(--gold);cursor:pointer;box-shadow:0 6px 0 #4a2a10;transition:transform .08s}
.shield:active,.shield.on{transform:translateY(4px);box-shadow:0 2px 0 #4a2a10}
.tempo{display:flex;align-items:center;gap:8px}
.tempo div{font-family:Anton;font-size:40px;color:var(--gold);text-align:center;line-height:1;min-width:84px}
.tempo small{display:block;font-family:'IBM Plex Mono';font-size:10px;color:var(--bronze)}
button,select,input{font-family:'IBM Plex Mono',monospace}
.tempo button,.controls button,.controls select,.panel button{background:linear-gradient(#3a2414,#22140b);color:var(--ink);border:2px solid var(--bronze);padding:8px 12px;cursor:pointer;font-weight:700;box-shadow:0 3px 0 #000;text-transform:uppercase;font-size:12px}
button:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.grid{overflow-x:auto;padding-bottom:6px;-webkit-user-select:none;user-select:none;touch-action:none}
.grow{display:flex;align-items:center;gap:3px;margin-bottom:4px;min-width:640px}
.glab{width:92px;flex:none;font-family:Anton;font-size:14px;letter-spacing:1px;color:var(--bronze);cursor:pointer}
.glab:hover{color:var(--gold)}
.cell{flex:1;aspect-ratio:1;max-width:38px;min-width:28px;background:#2b1a0e;border:1px solid #5a3a20;border-radius:3px;cursor:pointer}
.cell.beat{background:#3b2512}
.cell.on{background:radial-gradient(circle,#ff8a3c,var(--red));border-color:var(--gold);box-shadow:0 0 8px #ff5a1f}
.cell.ph{outline:2px solid var(--gold)}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.controls label{font-size:11px;display:flex;align-items:center;gap:4px;color:var(--bronze)}
input[type=range]{accent-color:var(--red);width:80px}
#rec.on{background:var(--red);color:#fff}
.panel{border:2px solid #5a3a20;padding:12px;background:#140b07cc}
.panel h2{font-family:Anton;font-weight:400;letter-spacing:1px;color:var(--gold);margin:6px 0 8px;font-size:22px}
.row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.row input[type=text],#name{flex:1;min-width:150px;background:#000;border:2px solid var(--bronze);color:var(--gold);padding:8px}
.chk{font-size:12px;color:var(--bronze);display:flex;gap:4px;align-items:center}
.mini{padding:2px 8px!important;font-size:12px}
#hall{padding-left:22px;margin:0;max-height:240px;overflow:auto}
#hall li{padding:5px 0;border-bottom:1px dashed #3a2414;font-size:13px;display:flex;justify-content:space-between;gap:6px;align-items:center}
#hall li span{cursor:pointer}
#hall li span:hover{color:var(--gold)}
.muted{color:#7a6050}
.badge{display:inline-block;background:var(--gold);color:#000;font-family:Anton;padding:4px 10px;margin:4px 0;transform:rotate(-2deg)}
.hidden{display:none}
#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(100px);background:var(--red);color:#fff;padding:12px 20px;font-family:Anton;font-size:20px;letter-spacing:1px;border:3px solid var(--gold);transition:transform .25s;z-index:99;max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}
footer{text-align:center;padding:20px;font-size:12px;color:#7a6050}
footer a{color:var(--gold)}