/* ============================================================
   Super Stick Hero — BintzGE  |  stick-hero.css
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --primary:      #0ea5e9;
  --primary-dark: #0891b2;
  --primary-glow: rgba(14,165,233,0.4);
  --bg-dark:      #0f172a;
  --bg-darker:    #020617;
  --card-bg:      rgba(30,41,59,0.88);
  --card-border:  rgba(148,163,184,0.15);
  --text-primary: #f1f5f9;
  --text-secondary:#94a3b8;
  --success:      #10b981;
  --success-glow: rgba(16,185,129,0.4);
  --danger:       #ef4444;
  --danger-glow:  rgba(239,68,68,0.4);
  --sidebar-w:    300px;
}

html, body { height:100%; width:100%; overflow:hidden; }

body {
  font-family:'Rajdhani','Segoe UI',sans-serif;
  background:var(--bg-darker);
  color:var(--text-primary);
  position:fixed;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}

/* ── HAMBURGER ─────────────────────────────────────────────── */
.hamburger {
  position:fixed; top:14px; left:14px; z-index:9999;
  background:var(--card-bg); border:1.5px solid var(--primary); border-radius:12px;
  padding:10px 11px; cursor:pointer; display:flex; flex-direction:column; gap:4px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 20px var(--primary-glow);
  transition:transform .2s, box-shadow .2s;
}
.hamburger:hover { transform:scale(1.07); box-shadow:0 6px 28px rgba(14,165,233,.6); }
.hamburger span { display:block; width:22px; height:2.5px; background:var(--primary); border-radius:2px; }

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar {
  position:fixed; top:0; left:calc(-1 * var(--sidebar-w) - 20px);
  width:var(--sidebar-w); height:100vh;
  background:rgba(15,23,42,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-right:1px solid var(--card-border); z-index:10000;
  transition:left .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; box-shadow:4px 0 32px rgba(0,0,0,.6);
}
.sidebar.open { left:0; }
.sidebar-header {
  padding:20px 20px 16px; border-bottom:1px solid var(--card-border);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:rgba(15,23,42,.98); z-index:1;
}
.sidebar-logo { font-family:'Orbitron',sans-serif; font-size:1.25rem; font-weight:900; color:var(--primary); letter-spacing:.08em; text-shadow:0 0 12px var(--primary-glow); }
.close-sidebar { background:none; border:none; color:var(--text-secondary); font-size:1.4rem; cursor:pointer; padding:4px 8px; border-radius:6px; transition:all .2s; line-height:1; }
.close-sidebar:hover { color:var(--danger); background:rgba(239,68,68,.1); transform:rotate(90deg); }
.sidebar nav { padding:8px 0; }
.nav-link { display:flex; align-items:center; padding:13px 20px; color:var(--text-secondary); text-decoration:none; border-left:3px solid transparent; transition:all .22s; font-size:.97rem; font-weight:500; gap:10px; letter-spacing:.02em; }
.nav-link:hover { background:rgba(14,165,233,.08); border-left-color:var(--primary); color:var(--primary); padding-left:26px; }
.nav-link.active { background:rgba(14,165,233,.12); border-left-color:var(--primary); color:var(--primary); font-weight:700; }
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--primary-dark); border-radius:4px; }

/* ── OVERLAY ───────────────────────────────────────────────── */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9990;
  opacity:0; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(2px);
}
.overlay.show { opacity:1; pointer-events:all; }

/* ── TOP-RIGHT HUD BAR ─────────────────────────────────────── */
.hud-bar {
  position:fixed; top:14px; right:14px; z-index:9999;
  display:flex; align-items:center; gap:10px;
}
.hud-bar.hidden { display:none; }

#score-hud {
  background:var(--card-bg); backdrop-filter:blur(12px);
  border:1.5px solid var(--success); border-radius:14px;
  padding:8px 16px; text-align:center;
  box-shadow:0 4px 20px var(--success-glow); min-width:72px;
}
#score-label { font-size:.6rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.12em; margin-bottom:1px; }
#score { font-family:'Orbitron',sans-serif; font-size:1.5rem; font-weight:900; color:var(--success); text-shadow:0 0 14px var(--success-glow); line-height:1; }
.score-sep { color:var(--text-secondary); font-size:1rem; font-weight:400; margin:0 2px; }
.score-last { color:var(--text-secondary); font-size:1rem; font-weight:700; text-shadow:none; }

/* User chip */
#user-hud { display:flex; align-items:center; gap:6px; }
.user-hud-name {
  font-family:'Orbitron',sans-serif; font-size:.72rem; font-weight:700; color:var(--primary);
  background:var(--card-bg); border:1.5px solid var(--primary); border-radius:20px;
  padding:6px 12px; cursor:pointer; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:all .2s; backdrop-filter:blur(10px);
}
.user-hud-name:hover { background:rgba(14,165,233,.15); }
.user-hud-id {
  font-family:'Orbitron',sans-serif; font-size:.72rem; font-weight:700;
  color:var(--text-secondary); letter-spacing:.08em;
  background:var(--card-bg); border:1.5px solid var(--border);
  border-radius:20px; padding:6px 12px;
  backdrop-filter:blur(10px); white-space:nowrap;
}
.user-hud-login {
  font-family:'Orbitron',sans-serif; font-size:.7rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  border:none; border-radius:20px; padding:7px 14px; cursor:pointer;
  box-shadow:0 0 14px var(--primary-glow); transition:transform .2s;
}
.user-hud-login:hover { transform:scale(1.06); }

/* Icon buttons */
.hud-icon-btn {
  background:var(--card-bg); border:1.5px solid var(--card-border); border-radius:12px;
  color:var(--text-primary); font-size:1.15rem; padding:8px 10px; cursor:pointer;
  backdrop-filter:blur(10px); transition:all .2s; line-height:1;
}
.hud-icon-btn:hover { border-color:var(--primary); transform:scale(1.08); background:rgba(14,165,233,.1); }

/* ── CANVAS ────────────────────────────────────────────────── */
#game-canvas { position:fixed; top:0; left:0; z-index:1; cursor:pointer; touch-action:none; display:block; }

/* ── IN-GAME UI ────────────────────────────────────────────── */
#perfect {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Orbitron',sans-serif; font-size:clamp(1.8rem,6vw,3rem); font-weight:900;
  color:var(--success); text-shadow:0 0 30px var(--success-glow),0 0 60px var(--success-glow);
  opacity:0; transition:opacity .4s; z-index:200; pointer-events:none; letter-spacing:.1em;
}
#restart {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Orbitron',sans-serif; font-size:clamp(.9rem,3vw,1.2rem); font-weight:700;
  color:#fff; background:linear-gradient(135deg,var(--danger),#dc2626); border:2px solid var(--danger);
  padding:1rem 2.5rem; border-radius:50px; cursor:pointer; display:none; z-index:200;
  letter-spacing:.15em; text-transform:uppercase; box-shadow:0 0 24px var(--danger-glow);
  transition:transform .2s, box-shadow .2s;
}
#restart:hover { transform:translate(-50%,-50%) scale(1.08); box-shadow:0 0 40px rgba(239,68,68,.7); }
#intro-hint {
  position:fixed; bottom:40px; left:50%; transform:translateX(-50%); z-index:150;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:50px;
  padding:10px 22px; font-size:.88rem; color:var(--text-secondary); letter-spacing:.05em;
  backdrop-filter:blur(10px); transition:opacity .5s; pointer-events:none; white-space:nowrap;
}
#intro-hint.hidden { opacity:0; }

/* ── INTRO SCREEN ──────────────────────────────────────────── */
#intro-screen {
  position:fixed; inset:0; z-index:5000; display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  background:linear-gradient(160deg,#020617 0%,#0f172a 60%,#0c1a2e 100%);
  transition:opacity .5s;
}
#intro-screen.hidden { opacity:0; pointer-events:none; }
.intro-inner { text-align:center; animation:fadeUp .7s ease both; padding:20px; }
.intro-title { font-family:'Orbitron',sans-serif; font-size:clamp(2rem,9vw,4rem); font-weight:900; color:var(--primary); letter-spacing:.08em; text-shadow:0 0 40px var(--primary-glow); margin-bottom:.5rem; }
.intro-sub { font-family:'Orbitron',sans-serif; font-size:clamp(.65rem,2.5vw,.85rem); color:var(--text-secondary); letter-spacing:.25em; text-transform:uppercase; margin-bottom:3rem; }
.intro-start-btn {
  font-family:'Orbitron',sans-serif; font-size:clamp(.85rem,3vw,1.1rem); font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border:2px solid var(--primary);
  padding:.9rem 2.8rem; border-radius:50px; cursor:pointer; text-transform:uppercase; letter-spacing:.15em;
  box-shadow:0 0 24px var(--primary-glow); animation:pulse 2s ease-in-out infinite;
}

/* ── TUTORIAL SCREEN ───────────────────────────────────────── */
#tutorial-screen {
  position:fixed; inset:0; z-index:5000; display:none; flex-direction:column;
  justify-content:center; align-items:center; background:rgba(2,6,23,.96);
  backdrop-filter:blur(8px); padding:20px; overflow-y:auto;
}
#tutorial-screen.show { display:flex; animation:fadeIn .3s ease both; }
.tutorial-box { background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:28px 24px; max-width:480px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.tutorial-title { font-family:'Orbitron',sans-serif; font-size:clamp(1.2rem,5vw,1.8rem); font-weight:900; color:var(--primary); text-align:center; margin-bottom:1.5rem; letter-spacing:.08em; }
.tutorial-steps { display:flex; flex-direction:column; gap:12px; margin-bottom:1.5rem; }
.tutorial-step { display:flex; align-items:flex-start; gap:14px; background:rgba(14,165,233,.06); border:1px solid rgba(14,165,233,.12); border-radius:12px; padding:14px; }
.step-num { font-family:'Orbitron',sans-serif; font-size:1.4rem; font-weight:900; color:var(--primary); opacity:.7; min-width:30px; line-height:1; padding-top:2px; }
.step-text h4 { font-size:.95rem; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.step-text p { font-size:.85rem; color:var(--text-secondary); line-height:1.5; }
.highlight { color:var(--success); font-weight:700; }
.tutorial-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-play { font-family:'Rajdhani',sans-serif; font-size:1.05rem; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--success),#059669); border:2px solid var(--success); padding:.75rem 2rem; border-radius:50px; cursor:pointer; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 0 20px var(--success-glow); transition:transform .2s; }
.btn-play:hover { transform:scale(1.05); }
.btn-skip { font-family:'Rajdhani',sans-serif; font-size:1.05rem; font-weight:600; color:var(--text-secondary); background:transparent; border:2px solid var(--card-border); padding:.75rem 2rem; border-radius:50px; cursor:pointer; text-transform:uppercase; transition:all .2s; }
.btn-skip:hover { border-color:var(--text-secondary); color:var(--text-primary); }

/* ── MODALS ────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:8000; display:none;
  justify-content:center; align-items:center;
  background:rgba(2,6,23,.8); backdrop-filter:blur(6px); padding:20px; overflow-y:auto;
}
.modal-overlay.show { display:flex; animation:fadeIn .25s ease both; }
.modal-box {
  background:rgba(15,23,42,.98); border:1px solid var(--card-border); border-radius:20px;
  padding:28px 24px; width:100%; max-width:420px; box-shadow:0 24px 60px rgba(0,0,0,.6);
  position:relative; max-height:90vh; overflow-y:auto;
}
.modal-wide { max-width:600px; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-title { font-family:'Orbitron',sans-serif; font-size:1.1rem; font-weight:900; color:var(--primary); letter-spacing:.06em; }
.modal-close { background:none; border:none; color:var(--text-secondary); font-size:1.3rem; cursor:pointer; padding:4px 8px; border-radius:6px; transition:all .2s; line-height:1; }
.modal-close:hover { color:var(--danger); background:rgba(239,68,68,.1); transform:rotate(90deg); }
.modal-desc { font-size:.88rem; color:var(--text-secondary); margin-bottom:14px; line-height:1.5; }
.modal-input {
  width:100%; background:rgba(30,41,59,.8); border:1.5px solid var(--card-border);
  border-radius:10px; padding:12px 14px; font-family:'Rajdhani',sans-serif; font-size:1rem;
  color:var(--text-primary); outline:none; transition:border-color .2s; margin-bottom:10px;
}
.modal-input:focus { border-color:var(--primary); }
.modal-input:disabled { opacity:.4; cursor:not-allowed; }
.modal-msg { font-size:.85rem; min-height:18px; margin-bottom:12px; color:var(--text-secondary); }
.modal-btn {
  width:100%; font-family:'Orbitron',sans-serif; font-size:.9rem; font-weight:700;
  padding:12px; border-radius:10px; border:none; cursor:pointer;
  text-transform:uppercase; letter-spacing:.12em; transition:all .2s;
}
.modal-btn.primary { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:0 0 16px var(--primary-glow); }
.modal-btn.primary:hover { transform:scale(1.02); box-shadow:0 0 28px var(--primary-glow); }
.modal-btn.success { background:linear-gradient(135deg,var(--success),#059669); color:#fff; box-shadow:0 0 16px var(--success-glow); }
.modal-btn.success:hover { transform:scale(1.02); }
.modal-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }

/* Profile */
.profile-info { background:rgba(14,165,233,.05); border:1px solid rgba(14,165,233,.1); border-radius:12px; padding:16px; margin-bottom:16px; }
.profile-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(148,163,184,.08); }
.profile-row:last-child { border-bottom:none; padding-bottom:0; }
.profile-label { font-size:.8rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.08em; }
.profile-val { font-family:'Orbitron',sans-serif; font-size:.95rem; font-weight:700; color:var(--text-primary); }
.profile-val.mono { letter-spacing:.15em; color:var(--primary); }
.profile-val.score-color { color:var(--success); }
.divider { border:none; border-top:1px solid var(--card-border); margin:16px 0; }
.rename-cooldown { font-size:.8rem; color:var(--danger); margin-bottom:8px; min-height:16px; }

/* Leaderboard */
.lb-table-wrap { width:100%; overflow-x:auto; margin:10px 0; border-radius:12px; border:1px solid var(--card-border); }
.lb-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.lb-table thead tr { background:rgba(14,165,233,.1); }
.lb-table th { padding:10px 12px; text-align:left; font-family:'Orbitron',sans-serif; font-size:.65rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.1em; }
.lb-table td { padding:9px 12px; border-top:1px solid rgba(148,163,184,.06); vertical-align:middle; }
.lb-table tbody tr:hover { background:rgba(14,165,233,.04); }
.lb-table tbody tr.lb-me { background:rgba(14,165,233,.12); }
.lb-table tbody tr.lb-me td { color:var(--primary); font-weight:700; }
.lb-rank { font-family:'Orbitron',sans-serif; font-size:.85rem; color:var(--text-secondary); min-width:44px; }
.lb-name { font-weight:600; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-id   { font-family:'Orbitron',sans-serif; font-size:.78rem; color:var(--text-secondary); letter-spacing:.1em; }
.lb-score{ font-family:'Orbitron',sans-serif; font-size:.9rem; font-weight:700; color:var(--success); text-align:right; }
.lb-table th:last-child, .lb-table td:last-child { text-align:right; }
.lb-empty { text-align:center; padding:24px; color:var(--text-secondary); font-size:.9rem; }
.lb-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; }
.lb-info { font-size:.78rem; color:var(--text-secondary); letter-spacing:.04em; }
.lb-pagination { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.lb-pg-btn {
  font-family:'Orbitron',sans-serif; font-size:.72rem; font-weight:700;
  background:transparent; border:1.5px solid var(--card-border); color:var(--text-secondary);
  border-radius:8px; padding:5px 10px; cursor:pointer; transition:all .2s;
}
.lb-pg-btn:hover { border-color:var(--primary); color:var(--primary); }
.lb-pg-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.lb-pg-dot { font-size:.8rem; color:var(--text-secondary); padding:0 4px; }

/* ── LOGIN SCREEN (fullscreen, tampil pertama) ─────────────── */
#login-screen {
  position:fixed; inset:0; z-index:7000;
  display:flex; justify-content:center; align-items:center;
  background:linear-gradient(160deg, #020617 0%, #0f172a 55%, #071428 100%);
  transition:opacity .5s ease;
  padding:20px;
  overflow-y:auto;
}
#login-screen.hidden {
  opacity:0;
  pointer-events:none;
}

.login-inner {
  display:flex; flex-direction:column; align-items:center;
  gap:28px; width:100%; max-width:400px;
  animation:fadeUp .7s ease both;
}

.login-logo { text-align:center; }
.login-game-title {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(2rem,10vw,3.5rem);
  font-weight:900; color:var(--primary);
  letter-spacing:.1em;
  text-shadow:0 0 40px var(--primary-glow), 0 0 80px rgba(14,165,233,.15);
  line-height:1; margin-bottom:.4rem;
}
.login-game-sub {
  font-family:'Orbitron',sans-serif;
  font-size:clamp(.6rem,2.5vw,.75rem);
  color:var(--text-secondary); letter-spacing:.28em; text-transform:uppercase;
}

.login-card {
  width:100%;
  background:rgba(15,23,42,.9);
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:28px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(14,165,233,.05);
  backdrop-filter:blur(16px);
}
.login-card-title {
  font-family:'Orbitron',sans-serif;
  font-size:1rem; font-weight:900;
  color:var(--text-primary); letter-spacing:.06em;
  margin-bottom:8px;
}
.login-card-desc {
  font-size:.85rem; color:var(--text-secondary);
  line-height:1.55; margin-bottom:18px;
}
.login-input {
  width:100%;
  background:rgba(30,41,59,.9);
  border:1.5px solid var(--card-border);
  border-radius:12px; padding:14px 16px;
  font-family:'Rajdhani',sans-serif; font-size:1.05rem;
  color:var(--text-primary); outline:none;
  transition:border-color .2s, box-shadow .2s;
  margin-bottom:10px;
  -webkit-user-select:text; user-select:text;
  touch-action:auto;
}
.login-input:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(14,165,233,.15);
}
.login-msg {
  font-size:.85rem; min-height:20px;
  margin-bottom:12px; color:var(--text-secondary);
  display:flex; align-items:center; gap:6px;
}
.login-msg.loading::before { content:''; display:inline-block; width:10px; height:10px; border:2px solid var(--primary); border-top-color:transparent; border-radius:50%; animation:spin .6s linear infinite; }
.login-btn {
  width:100%;
  font-family:'Orbitron',sans-serif; font-size:.95rem; font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  border:none; border-radius:12px; padding:14px;
  cursor:pointer; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 0 20px var(--primary-glow);
  transition:transform .2s, box-shadow .2s;
}
.login-btn:hover { transform:scale(1.02); box-shadow:0 0 32px rgba(14,165,233,.6); }
.login-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.login-footer-note {
  font-size:.75rem; color:rgba(148,163,184,.5);
  text-align:center; letter-spacing:.04em; line-height:1.5;
}

@keyframes spin { to { transform:rotate(360deg); } }

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes pulse  { 0%,100%{transform:scale(1);box-shadow:0 0 24px var(--primary-glow)} 50%{transform:scale(1.04);box-shadow:0 0 40px rgba(14,165,233,.6)} }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hud-bar { gap:6px; top:10px; right:10px; }
  #score-hud { padding:6px 10px; min-width:56px; }
  #score { font-size:1.2rem; }
  .user-hud-name { max-width:80px; font-size:.65rem; }
  .hud-icon-btn { padding:6px 8px; font-size:1rem; }
  .modal-box { padding:20px 16px; }
}