body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
  :root {
    --bg:#0b0d0f; --panel:#14181c; --amber:#ffb347; --amber-dim:#8a5e24;
    --text:#e8e4dc; --text-dim:#8b8478; --red:#ff6b5b; --green:#5ccf72; --blue:#4ba3ff;
    --neon-purple:#c370ff; --neon-cyan:#00ffff; --neon-pink:#ff1493;
  }
  * { box-sizing: border-box; margin:0; padding:0; -webkit-tap-highlight-color: transparent; }
  html, body { width:100%; height:100%; background:var(--bg); color:var(--text);
               font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
               overflow:hidden; user-select:none; }
  #app { position:fixed; inset:0; background:radial-gradient(ellipse at center, #1a1f1f 0%, #040506 88%); }
  #gl { display:block; touch-action:none; cursor:default; }
  body.menu-open #gl { cursor:default !important; }
  body.menu-open { cursor:default !important; }

  /* Custom cursor — always visible */
  #custom-cursor {
    position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
    width:120px; height:32px;
    transform:translate(-14px,-16px);
    display:none;  /* hidden unless dev mode */
  }

  /* ---------- HUD ---------- */
  #hud { position:fixed; inset:0; pointer-events:none; }
  .hud-panel { pointer-events:auto; background:rgba(14,18,22,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter:blur(14px);
               border:1px solid rgba(255,179,71,0.15); border-radius:10px; padding:12px 16px;
               box-shadow:0 6px 28px rgba(0,0,0,0.55); }
  #scoreboard { position:absolute; top:16px; left:50%; transform:translateX(-50%); display:flex; gap:18px; align-items:center; font-size:15px; }
  .player-card { display:flex; flex-direction:column; align-items:center; min-width:96px; padding:6px 14px; border-radius:8px; transition:all .3s; }
  .player-card.active { background:rgba(255,179,71,0.12); box-shadow:inset 0 0 0 1px rgba(255,179,71,0.5); }
  .player-name { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; }
  .player-score { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
  .player-card.active .player-score { color:var(--amber); }
  .frame-score { font-size:11px; color:var(--text-dim); }
  #vs { font-size:11px; color:var(--text-dim); font-weight:600; }

  #message-bar { position:absolute; top:112px; left:50%; transform:translateX(-50%); font-size:13px; color:var(--amber); letter-spacing:.5px; padding:6px 14px; opacity:0; transition:opacity .3s; }
  #message-bar.show { opacity:1; }

  #fine-tune-overlay {
    position:absolute; top:calc(18% + 50px); left:50%; transform:translateX(-50%);
    font-size:48px; font-weight:900; letter-spacing:0.12em; text-transform:uppercase;
    color:rgba(255,221,68,0.72); pointer-events:none; user-select:none;
    white-space:nowrap; font-family:inherit;
    text-shadow: 0 2px 18px rgba(0,0,0,0.9), 0 0 40px rgba(255,200,0,0.35);
    opacity:0; transition:opacity 0.12s;
  }
  #fine-tune-overlay.show { opacity:1; }

  #shoot-overlay {
    position:absolute; top:calc(18% + 110px); left:50%; transform:translateX(-50%);
    font-size:48px; font-weight:900; letter-spacing:0.12em; text-transform:uppercase;
    color:rgba(255,90,90,0.72); pointer-events:none; user-select:none;
    white-space:nowrap; font-family:inherit;
    text-shadow: 0 2px 18px rgba(0,0,0,0.9), 0 0 40px rgba(255,50,50,0.35);
    opacity:0; transition:opacity 0.12s;
  }
  #shoot-overlay.show { opacity:1; }

  #status { position:absolute; bottom:80px; left:16px; font-size:12px; color:var(--text-dim); padding:8px 14px; }
  .status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#666; margin-right:6px; vertical-align:middle; }
  .status-dot.online { background:var(--green); box-shadow:0 0 6px var(--green); }
  .status-dot.shooting { background:var(--amber); animation:pulse 1s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

  #power-meter { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:320px; padding:10px 14px; }
  .power-label { font-size:10px; color:var(--text-dim); letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; }

  /* Contact-point picker — shown when I is held */
  #contact-picker {
    position:absolute; bottom:80px; right:24px;
    width:110px; height:110px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    pointer-events:none;
  }
  #contact-picker canvas { border-radius:50%; cursor:crosshair; pointer-events:auto; }

  #key-indicators { position:absolute; bottom:16px; left:16px; display:flex; gap:10px; align-items:center; pointer-events:none; }
  .key-badge {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    transition: opacity 0.08s;
  }
  .key-badge .key-cap {
    width:36px; height:36px; border-radius:7px; display:flex; align-items:center; justify-content:center;
    font:700 16px/1 ui-monospace,Menlo,monospace; letter-spacing:0;
    border:2px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.35);
    transition: background 0.08s, color 0.08s, border-color 0.08s, box-shadow 0.08s;
  }
  .key-badge .key-label {
    font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
    color:rgba(255,255,255,0.28); transition: color 0.08s;
  }
  .key-badge.active .key-cap {
    background:rgba(255,179,71,0.22);
    border-color:var(--amber);
    color:var(--amber);
    box-shadow:0 0 12px rgba(255,179,71,0.55);
  }
  .key-badge.active .key-label { color:var(--amber); }
  #key-s.active .key-cap { background:rgba(255,90,90,0.22); border-color:#ff5a5a; color:#ff7070; box-shadow:0 0 14px rgba(255,80,80,0.5); }
  #key-s.active .key-label { color:#ff7070; }
  #key-d.active .key-cap { background:rgba(100,220,255,0.2); border-color:#64dcff; color:#64dcff; box-shadow:0 0 14px rgba(100,220,255,0.5); }
  #key-d.active .key-label { color:#64dcff; }

  #room-info { position:absolute; top:16px; right:16px; font-size:12px; }
  #room-code { font-family: "SF Mono", Menlo, monospace; color:var(--amber); font-size:20px; letter-spacing:4px; font-weight:600; }
  #copy-btn { margin-left:8px; background:none; border:1px solid rgba(255,179,71,0.3); color:var(--amber); padding:2px 8px; border-radius:4px; font-size:10px; cursor:pointer; font-family:inherit; }

  #mode-badge { position:absolute; bottom:16px; right:16px; font-size:11px; color:var(--text-dim); padding:6px 12px; text-transform:uppercase; letter-spacing:2px; }

  #restart-btn { position:absolute; top:16px; right:120px; font-size:11px; padding:8px 14px; cursor:pointer; color:var(--text-dim); letter-spacing:2px; text-transform:uppercase; transition:all .15s; font-family:inherit; background:rgba(14,18,22,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,179,71,0.15); border-radius:10px; box-shadow:0 6px 28px rgba(0,0,0,0.55); pointer-events:auto; }
  #restart-btn:hover { color:var(--amber); border-color:var(--amber); }
  #restart-btn.confirming { color:var(--red); border-color:var(--red); animation:pulse-confirm 1s infinite; }
  #admin-btn { position:absolute; top:16px; right:16px; font-size:11px; padding:8px 14px; cursor:pointer; color:var(--text-dim); letter-spacing:2px; text-transform:uppercase; transition:all .15s; font-family:inherit; background:rgba(14,18,22,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,179,71,0.15); border-radius:10px; box-shadow:0 6px 28px rgba(0,0,0,0.55); pointer-events:auto; }
  #admin-btn:hover { color:#64dcff; border-color:#64dcff; }
  #admin-btn.active { color:#64dcff; border-color:#64dcff; background:rgba(100,220,255,0.08); }
  
  #back-to-menu-btn { position:absolute; top:16px; left:16px; font-size:11px; padding:8px 14px; cursor:pointer; color:var(--text-dim); letter-spacing:2px; text-transform:uppercase; transition:all .15s; font-family:inherit; background:rgba(14,18,22,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,179,71,0.15); border-radius:10px; box-shadow:0 6px 28px rgba(0,0,0,0.55); pointer-events:auto; display:none; }
  #back-to-menu-btn:hover { color:var(--amber); border-color:var(--amber); }
  @keyframes pulse-confirm { 0%,100% { opacity:1; } 50% { opacity:.55; } }

  /* ========== Hall of Fame ========== */
  #hall-of-fame-panel {
    position:fixed; inset:0; background:rgba(0,0,0,0.8); display:none; z-index:200;
    align-items:center; justify-content:center;
  }
  #hall-of-fame-panel.show { display:flex; }
  .hall-of-fame-box {
    background:rgba(20,24,28,0.95); border:2px solid var(--amber); border-radius:12px;
    padding:32px; max-width:500px; max-height:80vh; overflow-y:auto;
  }
  .hall-of-fame-title {
    font-size:32px; font-weight:900; color:var(--amber); text-align:center;
    margin-bottom:24px; text-shadow:0 0 20px rgba(255,179,71,0.5);
  }
  .hall-of-fame-list {
    display:flex; flex-direction:column; gap:12px;
  }
  .hof-entry {
    background:rgba(255,179,71,0.08); border:1px solid rgba(255,179,71,0.3);
    border-radius:8px; padding:12px 16px; display:flex; justify-content:space-between;
    align-items:center; transition:all 0.2s;
  }
  .hof-entry:hover { background:rgba(255,179,71,0.15); border-color:var(--amber); }
  .hof-entry.record { border-color:var(--green); background:rgba(92,207,114,0.1); }
  .hof-rank {
    font-weight:700; font-size:18px; color:var(--amber); min-width:30px;
  }
  .hof-rank.gold { color:#ffd700; }
  .hof-rank.silver { color:#c0c0c0; }
  .hof-rank.bronze { color:#cd7f32; }
  .hof-info { flex:1; margin:0 16px; }
  .hof-player { font-size:14px; font-weight:600; color:var(--text); }
  .hof-date { font-size:11px; color:var(--text-dim); margin-top:4px; }
  .hof-break { font-size:20px; font-weight:900; color:var(--amber); text-align:right; min-width:60px; }
  .hof-break.record { color:var(--green); text-shadow:0 0 10px rgba(92,207,114,0.8); }
  .hof-close {
    text-align:center; margin-top:20px;
  }
  .hof-close-btn {
    padding:10px 20px; background:var(--amber); color:#1a1109; border:none;
    border-radius:6px; cursor:pointer; font-weight:700; font-family:inherit;
    transition:all 0.2s;
  }
  .hof-close-btn:hover { transform:scale(1.05); }

  /* ========== Name Input Modal ========== */
  #name-input-modal {
    position:fixed; inset:0; background:rgba(0,0,0,0.9); display:none; z-index:300;
    align-items:center; justify-content:center;
  }
  #name-input-modal.show { display:flex; }
  .name-input-box {
    background:rgba(20,24,28,0.95); border:2px solid var(--green); border-radius:12px;
    padding:32px; max-width:400px; text-align:center;
  }
  .name-input-title {
    font-size:28px; font-weight:900; color:var(--green); margin-bottom:12px;
    text-shadow:0 0 20px rgba(92,207,114,0.5);
  }
  .name-input-subtitle {
    font-size:14px; color:var(--text-dim); margin-bottom:24px;
  }
  .name-input-break {
    font-size:32px; font-weight:900; color:var(--amber); margin-bottom:24px;
  }
  .name-input-field {
    width:100%; padding:12px 16px; background:rgba(255,255,255,0.05); 
    border:2px solid var(--green); border-radius:8px; color:var(--text);
    font-family:inherit; font-size:16px; margin-bottom:20px;
    transition:all 0.2s;
  }
  .name-input-field:focus {
    outline:none; background:rgba(92,207,114,0.1); border-color:var(--green);
    box-shadow:0 0 12px rgba(92,207,114,0.4);
  }
  .name-input-buttons {
    display:flex; gap:12px; justify-content:center;
  }
  .name-input-btn {
    padding:12px 24px; background:var(--green); color:#0b0d0f; border:none;
    border-radius:8px; cursor:pointer; font-weight:700; font-family:inherit;
    transition:all 0.2s; font-size:14px;
  }
  .name-input-btn:hover { transform:scale(1.05); box-shadow:0 0 12px rgba(92,207,114,0.6); }
  .name-input-btn.cancel {
    background:rgba(139,132,120,0.4); color:var(--text-dim);
  }
  .name-input-btn.cancel:hover { background:rgba(139,132,120,0.6); }

  /* ---------- MENU ---------- */
  #menu { position:fixed; inset:0; background:radial-gradient(ellipse at center, #1a1f1f 0%, #040506 88%); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:100; transition:opacity .4s; pointer-events:auto; }
  #menu.hidden { opacity:0; pointer-events:none; }
  .menu-title { font-size:52px; font-weight:800; letter-spacing:-1.5px; margin-bottom:8px; background:linear-gradient(180deg, #fff 0%, var(--amber) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .menu-sub { font-size:13px; color:var(--text-dim); margin-bottom:42px; letter-spacing:3px; text-transform:uppercase; }
  .menu-buttons { display:flex; flex-direction:column; gap:12px; width:320px; }
  .menu-btn { background:var(--panel); border:1px solid rgba(255,179,71,0.15); color:var(--text); padding:16px 20px; border-radius:10px; font-size:15px; cursor:pointer; font-family:inherit; transition:all .15s; font-weight:500; text-align:left; display:flex; align-items:center; gap:12px; pointer-events:auto; }
  .menu-btn:hover { border-color:var(--amber); transform:translateX(2px); background:#1a1f25; }
  .menu-btn .icon { font-size:20px; }
  .menu-btn.primary { background:linear-gradient(135deg, var(--amber) 0%, #d89030 100%); color:#1a1109; border-color:transparent; font-weight:700; }
  .menu-btn.primary:hover { transform:translateX(2px) scale(1.02); }
  .menu-input { background:#0a0d10; border:1px solid rgba(255,179,71,0.2); color:var(--text); padding:14px 18px; border-radius:10px; font-size:18px; font-family: "SF Mono", Menlo, monospace; width:100%; letter-spacing:4px; text-align:center; text-transform:uppercase; outline:none; }
  .menu-input:focus { border-color:var(--amber); }
  .menu-panel { display:flex; flex-direction:column; gap:12px; width:320px; }
  .menu-back { background:none; border:none; color:var(--text-dim); font-family:inherit; font-size:13px; cursor:pointer; padding:8px; margin-top:8px; }
  .menu-back:hover { color:var(--amber); }
  .menu-info { font-size:12px; color:var(--text-dim); text-align:center; line-height:1.6; padding:8px; }
  .menu-info strong { color:var(--amber); font-family: "SF Mono", Menlo, monospace; font-size:22px; letter-spacing:6px; display:block; margin:10px 0; }
  .spinner { width:20px; height:20px; border:2px solid rgba(255,179,71,0.2); border-top-color:var(--amber); border-radius:50%; animation:spin .8s linear infinite; display:inline-block; vertical-align:middle; margin-right:10px; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .menu-error { color:var(--red); font-size:12px; text-align:center; min-height:16px; }
  .credit { position:absolute; bottom:20px; font-size:11px; color:var(--text-dim); letter-spacing:1px; }