@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:#0a0a0f;color:#e8e8ff;font-family:sans-serif;overflow:hidden;height:100dvh;user-select:none}
canvas#c{display:block;position:fixed;inset:0}

.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;z-index:10;background:rgba(5,5,12,0.86);backdrop-filter:blur(4px)}
.logo{font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(26px,6vw,50px);color:#ff8c00;text-shadow:0 0 20px #ff8c00,0 0 50px rgba(255,140,0,0.3);letter-spacing:4px;text-align:center}
.sub{color:#555;font-family:'Orbitron',monospace;font-size:10px;letter-spacing:5px;margin-top:-6px}
.hint{color:#333;font-family:'Orbitron',monospace;font-size:8px;letter-spacing:1px;text-align:center}

.input-row{display:flex;gap:8px;width:100%;max-width:340px}
.input-row input{flex:1;background:rgba(255,255,255,0.04);border:1px solid #2a2a4e;border-radius:8px;padding:12px 16px;color:#e8e8ff;font-family:'Orbitron',monospace;font-size:14px;outline:none;transition:border-color 0.2s}
.input-row input:focus{border-color:rgba(255,140,0,0.5)}
.input-row input.shake{animation:shake 0.35s}
.dice{background:rgba(255,140,0,0.08);border:1px solid rgba(255,140,0,0.25);border-radius:8px;padding:12px 14px;cursor:pointer;font-size:18px;transition:background 0.2s;flex-shrink:0}
.dice:hover{background:rgba(255,140,0,0.18)}

.btn{padding:14px 24px;font-family:'Orbitron',monospace;font-size:12px;font-weight:700;border:none;border-radius:8px;cursor:pointer;letter-spacing:2px;width:100%;max-width:340px;transition:all 0.2s}
.btn-cyan{background:linear-gradient(135deg,#ff8c00,#cc6600);color:#0a0a0f;box-shadow:0 4px 20px rgba(255,140,0,0.3)}
.btn-cyan:hover{box-shadow:0 4px 40px rgba(255,140,0,0.5)}
.btn-outline{background:transparent;border:1px solid #2a2a4e;color:#555;font-family:'Orbitron',monospace;font-size:11px;letter-spacing:2px;padding:10px 20px;border-radius:8px;cursor:pointer;transition:all 0.2s;width:100%;max-width:340px}
.btn-outline:hover{border-color:#555;color:#888}

a.hub-link{color:#555;font-size:11px;font-family:'Orbitron',monospace;letter-spacing:1px;text-decoration:none;margin-top:2px}
a.hub-link:hover{color:#888}

/* HUD */
#hud{position:fixed;top:0;left:0;right:0;display:none;align-items:center;justify-content:space-between;padding:8px 20px;z-index:5;background:linear-gradient(to bottom,rgba(10,10,15,0.88),transparent);pointer-events:none}
.hud-block{font-family:'Orbitron',monospace;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px}
.hud-lbl{font-size:7px;color:#333;letter-spacing:2px}
.hud-val{font-size:15px;color:#ff8c00;font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(255,140,0,0.6)}

#nextBox{position:fixed;top:8px;left:50%;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:2px;z-index:5;pointer-events:none}
#nextLbl{font-family:'Orbitron',monospace;font-size:7px;color:#333;letter-spacing:2px}
#nextCvs{image-rendering:pixelated}

#levelFlash{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(22px,5.5vw,40px);color:#ffd700;text-shadow:0 0 28px #ffd700,0 0 60px rgba(255,215,0,0.3);pointer-events:none;z-index:20;opacity:0;transition:opacity 0.5s;text-align:center}

/* Over screen */
.stat-row{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:300px;font-family:'Orbitron',monospace;font-size:10px;color:#444;border-bottom:1px solid #111;padding:7px 0}
.stat-val{color:#ff8c00;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums}
#rankMsg{color:#ff00ff;font-family:'Orbitron',monospace;font-size:12px;min-height:16px;letter-spacing:1px}

/* Leaderboard */
.lb-tabs{display:flex;gap:8px;width:100%;max-width:340px}
.lb-tab{background:transparent;color:#555;border:1px solid #333;padding:8px;font-family:'Orbitron',monospace;font-size:10px;border-radius:4px;cursor:pointer;flex:1;transition:all 0.2s;letter-spacing:1px}
.lb-tab.active{color:#ff8c00;border-color:#ff8c00}
#lbList{width:100%;max-width:340px;max-height:50vh;overflow-y:auto;padding-right:2px}
.lb-row{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:3px 0;background:#0d0d18;border-radius:4px;border-left:3px solid #ff8c00}
.lb-row.me{background:#140d08;border-color:#ff8c00;box-shadow:0 0 12px rgba(255,140,0,0.08)}
.lb-rank{font-family:'Orbitron',monospace;font-size:11px;color:#444;width:28px;flex-shrink:0}
.lb-name{flex:1;font-family:'Orbitron',monospace;font-size:10px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{font-family:'Orbitron',monospace;color:#ffd700;font-size:11px;font-variant-numeric:tabular-nums;min-width:5ch;text-align:right}
.lb-load{color:#444;font-family:'Orbitron',monospace;font-size:11px;text-align:center;padding:20px}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* Mute button in HUD */
#muteBtn{background:none;border:none;font-size:16px;cursor:pointer;padding:4px;opacity:0.5;line-height:1;-webkit-tap-highlight-color:transparent}
#muteBtn:active{opacity:1}

/* Drop button */
#dropBtn{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:none;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:rgba(255,140,0,0.12);border:2px solid rgba(255,140,0,0.45);color:#ff8c00;font-size:26px;cursor:pointer;z-index:15;transition:background 0.15s;-webkit-tap-highlight-color:transparent}
#dropBtn:active{background:rgba(255,140,0,0.35)}

/* Drag hints */
#dragHints{position:fixed;top:50%;left:0;right:0;transform:translateY(-50%);display:none;justify-content:space-between;pointer-events:none;z-index:3;padding:0 6px}
.drag-hint{font-family:'Orbitron',monospace;font-size:11px;letter-spacing:1px;color:rgba(255,140,0,0.18);text-shadow:0 0 8px rgba(255,140,0,0.1);writing-mode:vertical-rl;user-select:none}
.drag-hint-l{transform:rotate(180deg)}
.drag-hint-r{transform:rotate(0deg)}