@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:#060a02;color:#e8ffd0;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(3,8,1,0.90);backdrop-filter:blur(4px)}
.logo{font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(22px,5.5vw,44px);color:#ccff00;text-shadow:0 0 20px #ccff00,0 0 50px rgba(204,255,0,0.3);letter-spacing:3px;text-align:center;display:flex;align-items:center;gap:0;justify-content:center}
.sub{color:#445520;font-family:'Orbitron',monospace;font-size:10px;letter-spacing:5px;margin-top:-6px}
.hint{color:#2a3310;font-family:'Orbitron',monospace;font-size:8px;letter-spacing:1px;text-align:center;line-height:1.8}

.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 #1e2e08;border-radius:8px;padding:12px 16px;color:#e8ffd0;font-family:'Orbitron',monospace;font-size:14px;outline:none;transition:border-color 0.2s}
.input-row input:focus{border-color:rgba(204,255,0,0.5)}
.input-row input.shake{animation:shake 0.35s}
.dice{background:rgba(204,255,0,0.08);border:1px solid rgba(204,255,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(204,255,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-purple{background:linear-gradient(135deg,#ccff00,#88bb00);color:#060a02;box-shadow:0 4px 20px rgba(204,255,0,0.35)}
.btn-purple:hover{box-shadow:0 4px 40px rgba(204,255,0,0.55)}
.btn-outline{background:transparent;border:1px solid #1e2e08;color:#445520;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:#66882a;color:#88aa40}

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

/* 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(4,8,1,0.94),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:#2a3310;letter-spacing:2px}
.hud-val{font-size:15px;color:#ccff00;font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(204,255,0,0.6)}
#hudCombo{font-size:18px;color:#ffd700;font-weight:900;font-family:'Orbitron',monospace;text-shadow:0 0 12px #ffd700;min-width:48px;text-align:center;pointer-events:none}
#muteBtn{background:none;border:none;font-size:16px;cursor:pointer;padding:4px;opacity:0.5;pointer-events:all}
#muteBtn:active{opacity:1}

/* Stat rows */
.stat-row{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:300px;font-family:'Orbitron',monospace;font-size:10px;color:#2a3310;border-bottom:1px solid #0e140a;padding:7px 0}
.stat-val{color:#ccff00;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums}
#rankMsg{color:#ffd700;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:#445520;border:1px solid #1e2e08;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:#ccff00;border-color:#ccff00}
#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:#0a0e05;border-radius:4px;border-left:3px solid #ccff00}
.lb-row.me{background:#121a06;border-color:#ffd700;box-shadow:0 0 12px rgba(204,255,0,0.08)}
.lb-rank{font-family:'Orbitron',monospace;font-size:11px;color:#2a3310;width:28px;flex-shrink:0}
.lb-name{flex:1;font-family:'Orbitron',monospace;font-size:10px;color:#445520;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:#2a3310;font-family:'Orbitron',monospace;font-size:11px;text-align:center;padding:20px}

#devPanel{flex-direction:column;align-items:center;gap:8px;width:100%;max-width:340px;background:rgba(255,150,0,0.06);border:1px solid rgba(255,150,0,0.25);border-radius:10px;padding:12px 10px}
.dev-label{font-family:'Orbitron',monospace;font-size:8px;letter-spacing:3px;color:rgba(255,150,0,0.6);text-align:center}
.dev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.dev-btn{background:rgba(255,150,0,0.08);border:1px solid rgba(255,150,0,0.22);border-radius:6px;color:rgba(255,180,60,0.85);font-family:'Orbitron',monospace;font-size:9px;padding:7px 3px;cursor:pointer;text-align:center;transition:all 0.15s;line-height:1.4}
.dev-btn:hover,.dev-btn:active{background:rgba(255,150,0,0.20);border-color:rgba(255,150,0,0.55);color:#ffa030}
.diff-row{display:flex;gap:6px;width:100%;max-width:340px}
.diff-btn{flex:1;background:transparent;border:1px solid #1e2e08;color:#445520;font-family:'Orbitron',monospace;font-size:9px;letter-spacing:1.5px;padding:9px 4px;border-radius:6px;cursor:pointer;transition:all 0.2s}
.diff-btn:hover{border-color:#66882a;color:#88aa40}
.diff-btn.active[data-diff="beginner"]{border-color:#44cc44;color:#44ee44;background:rgba(68,204,68,0.08);box-shadow:0 0 10px rgba(68,204,68,0.15)}
.diff-btn.active[data-diff="medium"]{border-color:#ffaa00;color:#ffcc00;background:rgba(255,170,0,0.08);box-shadow:0 0 10px rgba(255,170,0,0.15)}
.diff-btn.active[data-diff="pro"]{border-color:#ff3344;color:#ff5566;background:rgba(255,51,68,0.08);box-shadow:0 0 10px rgba(255,51,68,0.15)}
.btn-share{background:transparent;border:1.5px solid rgba(204,255,0,0.45);color:#ccff00;font-family:'Orbitron',monospace;font-size:12px;font-weight:700;letter-spacing:2px;padding:12px 20px;border-radius:8px;cursor:pointer;transition:all 0.2s;width:100%;max-width:340px;text-shadow:0 0 8px rgba(204,255,0,0.5);box-shadow:0 0 12px rgba(204,255,0,0.08)}
.btn-share:hover,.btn-share:active{background:rgba(204,255,0,0.08);border-color:#ccff00;box-shadow:0 0 20px rgba(204,255,0,0.2)}

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