@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&display=swap');

:root {
  --cyan: #4cc9f0;
  --gold: #ffd60a;
  --red: #ff2d55;
  --purple: #7b2fff;
  --green: #40916c;
  --bg: #0a0a0f;
  --bg2: #0f0f1a;
  --panel: rgba(255,255,255,0.04);
  --border: rgba(76,201,240,0.2);
}

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

body {
  background: var(--bg);
  color: #fff;
  font-family: 'Exo 2', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(76,201,240,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,201,240,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── KGAMES COLLECTION BUTTON ── */
#kgames-collection-btn {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--panel);
  color: rgba(255,255,255,0.55);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 2px;
  text-decoration: none;
  display: block;
  text-align: center;
}
#kgames-collection-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(76,201,240,0.06);
}

/* ── TOP-RIGHT BUTTON BAR (shop + login, always visible on menu) ── */
#top-btn-bar {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 6px;
}
#top-btn-bar.visible { display: flex; }

#shop-btn {
  background: linear-gradient(135deg, var(--gold), #ff9f0a);
  color: #000;
  border: none;
  padding: 7px 13px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255,214,10,0.35);
  transition: all 0.2s;
  white-space: nowrap;
}
#shop-btn:hover { transform: scale(1.05); box-shadow: 0 0 28px rgba(255,214,10,0.55); }

#auth-top-btn {
  background: var(--panel);
  color: var(--cyan);
  border: 1px solid rgba(76,201,240,0.4);
  padding: 7px 13px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
#auth-top-btn:hover { background: rgba(76,201,240,0.1); border-color: var(--cyan); }
#auth-top-btn.logged-in { color: rgba(255,255,255,0.5); border-color: var(--border); font-size: 9px; }

/* ── TOP-LEFT BUTTON BAR (highscores + achievements) ── */
#top-left-bar {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 6px;
}
#top-left-bar.visible { display: flex; }

.top-left-btn {
  background: var(--panel);
  color: rgba(255,255,255,0.65);
  border: 1px solid var(--border);
  padding: 7px 13px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.top-left-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(76,201,240,0.08);
}

/* Push menu content below both fixed bars */
#menu-screen { padding-top: 56px; }

/* ── SCREENS ── */
.screen { display: none; position: relative; z-index: 1; width: 100%; align-items: center; flex-direction: column; padding: 12px 20px 40px; }
.screen.active { display: flex; }
#menu-screen { max-width: 420px; margin: 0 auto; }

/* LOGO */
.logo {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(30px, 7vw, 52px);
  font-weight: 900;
  letter-spacing: 3px;
  text-align: center;
  margin: 18px 0 5px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 50%, var(--cyan) 100%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }

/* Ball preview */
#ball-preview { width: 90px; height: 90px; margin: 0 auto 6px; }
#preview-canvas { width: 90px; height: 90px; }

/* Menu bounce paddle */
#menu-paddle-wrap {
  width: 160px;
  height: 14px;
  margin: 0 auto 18px;
  position: relative;
}
#menu-paddle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--cyan), #0099cc);
  box-shadow: 0 0 14px rgba(76,201,240,0.55);
  animation: paddleBounce 1.8s ease-in-out infinite;
}
@keyframes paddleBounce {
  0%,100% { transform: translateX(calc(-50% - 32px)); }
  50%      { transform: translateX(calc(-50% + 32px)); }
}

/* Stats row */
.stats-row { display: flex; gap: 10px; width: 100%; margin-bottom: 12px; }
.stat-box {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 6px;
  text-align: center;
}
.stat-label { font-size: 8px; letter-spacing: 2px; color: rgba(255,255,255,0.35); text-transform: uppercase; margin-bottom: 3px; }
.stat-value { font-family: 'Orbitron', sans-serif; font-size: 17px; font-weight: 700; color: var(--cyan); }
.stat-value.gold { color: var(--gold); }

/* XP Bar */
.xp-bar-wrap { width: 100%; background: rgba(255,255,255,0.05); border-radius: 999px; height: 7px; margin-bottom: 5px; overflow: hidden; border: 1px solid var(--border); }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--cyan)); border-radius: 999px; transition: width 0.5s ease; box-shadow: 0 0 6px var(--cyan); }
.xp-label { font-size: 9px; color: rgba(255,255,255,0.3); text-align: right; margin-bottom: 14px; }

/* Best row */
.best-row {
  width: 100%; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 15px; margin-bottom: 13px;
  display: flex; align-items: center; justify-content: space-between;
}
.best-label { font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.35); text-transform: uppercase; }
.best-value { font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: 700; color: var(--gold); }

/* Buttons */
.btn {
  width: 100%; padding: 14px; border: none; border-radius: 11px;
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 2px; cursor: pointer; transition: all 0.18s;
  margin-bottom: 9px; position: relative; overflow: hidden;
}
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,0.1),transparent); pointer-events:none; }
.btn-primary { background: linear-gradient(135deg, var(--cyan), #0099cc); color:#000; box-shadow: 0 0 28px rgba(76,201,240,0.3); font-size:17px; padding:17px; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 44px rgba(76,201,240,0.5); }
.btn-secondary { background:var(--panel); border:1px solid var(--border); color:#fff; }
.btn-secondary:hover { border-color:var(--cyan); background:rgba(76,201,240,0.07); }
.btn-daily { background:linear-gradient(135deg,#2d6a4f,#40916c); color:#fff; border:1px solid #52b788; animation:dailyPulse 2s ease-in-out infinite; display:none; }
.btn-daily.visible { display:block; }
@keyframes dailyPulse { 0%,100%{box-shadow:0 0 18px rgba(64,145,108,0.35)} 50%{box-shadow:0 0 36px rgba(64,145,108,0.65)} }

/* ── GAME SCREEN ── */
#game-screen { padding: 0; flex-direction: column; align-items: center; }

#hud {
  width: 100%; max-width: 500px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 14px;
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.hud-item { text-align: center; }
.hud-label { font-size: 7px; letter-spacing: 2px; color: rgba(255,255,255,0.35); text-transform: uppercase; }
.hud-value { font-family:'Orbitron',sans-serif; font-size:15px; font-weight:700; color:#fff; }
.hud-value.cyan { color:var(--cyan); }
.hud-value.gold { color:var(--gold); }
.hud-value.red  { color:var(--red);  }



#powerup-bar {
  width:100%; max-width:500px;
  display:flex; gap:3px; padding:4px 6px;
  background:rgba(0,0,0,0.7);
  border-top:1px solid var(--border);
  justify-content:center; align-items:center;
  flex-shrink:0;
  overflow-x:auto;
  scrollbar-width:none;
  flex-wrap:nowrap;
}
#powerup-bar::-webkit-scrollbar { display:none; }
.powerup-slot {
  display:flex; align-items:center; gap:2px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:5px; padding:3px 5px; font-size:10px;
  opacity:0.3; transition:opacity 0.25s; cursor:pointer;
  user-select:none; flex-shrink:0;
}
.powerup-slot.has-items { opacity:1; }
.powerup-slot.has-items:hover { background:rgba(76,201,240,0.1); }
.powerup-slot .pu-icon  { font-size:13px; line-height:1; }
.powerup-slot .pu-count { font-family:'Orbitron',sans-serif; font-size:9px; font-weight:700; color:var(--cyan); min-width:8px; text-align:center; }
.pu-pause {
  padding:3px 8px; border-radius:5px; border:1px solid var(--border);
  background:var(--panel); color:rgba(255,255,255,0.6); cursor:pointer;
  font-size:12px; transition:all 0.2s; flex-shrink:0;
}
.pu-pause:hover { border-color:var(--cyan); color:#fff; }
/* Mute button in powerup bar */
.pu-mute {
  padding:3px 8px; border-radius:5px; border:1px solid var(--border);
  background:var(--panel); color:rgba(255,255,255,0.5); cursor:pointer;
  font-size:12px; transition:all 0.2s; flex-shrink:0;
}
.pu-mute:hover { border-color:var(--gold); color:var(--gold); }
.pu-mute.muted { color:var(--red); border-color:rgba(255,45,85,0.4); }

/* ── OVERLAYS ── */
.overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.82); backdrop-filter:blur(14px);
  display:none; align-items:center; justify-content:center;
  z-index:500; flex-direction:column; padding:20px;
}
.overlay.active { display:flex; }
.overlay-panel {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:18px; padding:28px; width:100%; max-width:380px;
  text-align:center; position:relative;
  box-shadow:0 0 50px rgba(76,201,240,0.12);
}
.overlay-title { font-family:'Orbitron',sans-serif; font-size:24px; font-weight:900; letter-spacing:3px; margin-bottom:5px; }
.overlay-title.cyan { color:var(--cyan); }
.overlay-title.red  { color:var(--red);  }
.overlay-title.gold { color:var(--gold); }
.overlay-sub { font-size:12px; color:rgba(255,255,255,0.45); margin-bottom:20px; }
.overlay-score { font-family:'Orbitron',sans-serif; font-size:44px; font-weight:900; color:#fff; margin-bottom:5px; line-height:1; }
.overlay-level-reached { font-family:'Orbitron',sans-serif; font-size:14px; color:var(--cyan); margin-bottom:18px; letter-spacing:2px; }
.overlay-earned { display:flex; gap:12px; justify-content:center; margin-bottom:20px; }
.earned-item {
  display:flex; align-items:center; gap:4px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:7px; padding:5px 11px;
  font-family:'Orbitron',sans-serif; font-size:12px;
}
.close-btn {
  position:absolute; top:11px; right:11px;
  background:var(--panel); border:1px solid var(--border);
  color:rgba(255,255,255,0.45); width:28px; height:28px;
  border-radius:50%; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; line-height:1;
}
.close-btn:hover { color:#fff; border-color:var(--cyan); }

/* SHOP */
#shop-overlay .overlay-panel { max-width:440px; max-height:88vh; overflow-y:auto; }
.shop-tabs, .lb-tabs { display:flex; gap:7px; margin-bottom:18px; }
.shop-tab, .lb-tab {
  flex:1; padding:7px 4px; border:1px solid var(--border);
  background:var(--panel); color:rgba(255,255,255,0.4);
  border-radius:7px; font-family:'Orbitron',sans-serif; font-size:8px;
  letter-spacing:1px; cursor:pointer; transition:all 0.18s; text-transform:uppercase;
}
.shop-tab.active { border-color:var(--cyan); color:var(--cyan); background:rgba(76,201,240,0.07); }
.lb-tab.active   { border-color:var(--gold); color:var(--gold); background:rgba(255,214,10,0.07); }
.shop-grid   { display:grid; grid-template-columns:1fr 1fr;     gap:9px; margin-bottom:14px; }
.shop-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-bottom:14px; }
.shop-item {
  background:var(--panel); border:1px solid var(--border);
  border-radius:11px; padding:13px 8px; text-align:center;
  cursor:pointer; transition:all 0.18s; position:relative;
}
.shop-item:hover    { border-color:var(--cyan); background:rgba(76,201,240,0.05); }
.shop-item.selected { border-color:var(--cyan); box-shadow:0 0 18px rgba(76,201,240,0.25); }
.si-icon  { font-size:28px; margin-bottom:5px; }
.si-name  { font-size:10px; font-weight:600; margin-bottom:2px; }
.si-desc  { font-size:8px; color:rgba(255,255,255,0.35); margin-bottom:3px; line-height:1.3; }
.si-price { font-family:'Orbitron',sans-serif; font-size:10px; color:var(--gold); display:flex; align-items:center; justify-content:center; gap:2px; }
.si-price.free { color:#52b788; }
.si-price.sel  { color:var(--cyan); }
.si-badge { position:absolute; top:5px; right:5px; background:var(--cyan); color:#000; font-size:7px; font-weight:700; padding:2px 4px; border-radius:3px; font-family:'Orbitron',sans-serif; }

/* LEADERBOARD */
#leaderboard-overlay .overlay-panel { max-width:420px; max-height:88vh; overflow-y:auto; }
.lb-entry { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:7px; margin-bottom:5px; background:var(--panel); border:1px solid transparent; }
.lb-entry.top1 { border-color:var(--gold); background:rgba(255,214,10,0.05); }
.lb-entry.top2 { border-color:rgba(192,192,192,0.35); }
.lb-entry.top3 { border-color:rgba(205,127,50,0.35); }
.lb-rank  { font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700; width:26px; color:rgba(255,255,255,0.35); }
.lb-rank.gold { color:var(--gold); }
.lb-name  { flex:1; font-size:12px; }
.lb-score { font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; color:var(--cyan); }

/* ACHIEVEMENTS */
#achievements-overlay .overlay-panel { max-width:430px; max-height:88vh; overflow-y:auto; }
.ach-grid { display:flex; flex-direction:column; gap:7px; }
.ach-item { display:flex; align-items:center; gap:11px; padding:10px; background:var(--panel); border:1px solid var(--border); border-radius:9px; text-align:left; transition:border-color 0.3s; }
.ach-item.unlocked { border-color:rgba(255,214,10,0.35); }
.ach-icon { font-size:22px; opacity:0.25; transition:opacity 0.3s; }
.ach-item.unlocked .ach-icon { opacity:1; }
.ach-text  { flex:1; }
.ach-name  { font-size:12px; font-weight:600; margin-bottom:2px; }
.ach-desc  { font-size:10px; color:rgba(255,255,255,0.35); }
.ach-check { color:var(--gold); font-size:14px; opacity:0; transition:opacity 0.3s; }
.ach-item.unlocked .ach-check { opacity:1; }
.ach-cat-header { font-family:'Orbitron',sans-serif; font-size:8px; letter-spacing:2px; color:var(--cyan); opacity:0.5; text-transform:uppercase; margin:10px 0 4px; text-align:left; }

/* CHALLENGE BANNER */
#challenge-banner {
  display:none; width:100%;
  background:linear-gradient(135deg,rgba(255,45,85,0.25),rgba(255,45,85,0.08));
  border:1px solid var(--red); border-radius:11px;
  padding:11px 14px; margin-bottom:11px; text-align:center;
  font-family:'Orbitron',sans-serif; font-size:12px; color:var(--red); letter-spacing:1px;
}
#challenge-banner.visible { display:block; }

/* LEVEL TRANSITION FLASH */
#level-flash {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  z-index:400; pointer-events:none;
  opacity:0; transition:opacity 0.3s;
}
#level-flash.show { opacity:1; }
#level-flash .lf-num   { font-family:'Orbitron',sans-serif; font-size:80px; font-weight:900; color:var(--cyan); line-height:1; text-shadow:0 0 40px var(--cyan); }
#level-flash .lf-label { font-family:'Orbitron',sans-serif; font-size:14px; letter-spacing:6px; color:rgba(255,255,255,0.5); }

/* TOAST */
#toast {
  position:fixed; top:76px; left:50%;
  transform:translateX(-50%) translateY(-16px);
  background:var(--bg2); border:1px solid var(--border);
  border-radius:9px; padding:9px 18px;
  font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:1px;
  color:var(--cyan); z-index:9999; opacity:0; transition:all 0.28s;
  pointer-events:none; white-space:nowrap;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* COMBO FLASH */
#combo-flash {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.5);
  font-family:'Orbitron',sans-serif; font-size:42px; font-weight:900;
  color:var(--gold); text-shadow:0 0 25px var(--gold);
  pointer-events:none; z-index:300; opacity:0;
  transition:transform 0.12s, opacity 0.3s;
}
#combo-flash.pop  { transform:translate(-50%,-50%) scale(1);   opacity:1; }
#combo-flash.fade { transform:translate(-50%,-50%) scale(1.4); opacity:0; }

/* LEVEL UP BANNER */
#levelup-banner {
  position:fixed; top:110px; left:50%;
  transform:translateX(-50%) translateY(-30px);
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  border-radius:10px; padding:9px 22px;
  font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:2px; color:#fff; z-index:300; opacity:0;
  transition:all 0.35s; pointer-events:none;
}
#levelup-banner.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* PARTICLE CANVAS */
#particle-canvas { position:fixed; inset:0; pointer-events:none; z-index:2; }

/* NAME INPUT */
#name-input::placeholder { color:rgba(255,255,255,0.25); }
#name-input:focus { border-color:var(--cyan) !important; box-shadow:0 0 12px rgba(76,201,240,0.2); }

/* SCROLLBAR */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ── COIN ICON (SVG-based, works on all platforms/browsers) ── */
.coin-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; flex-shrink:0; vertical-align:middle;
}
.coin-icon svg { width:100%; height:100%; }

/* ── GAME SCREEN full-height fix — stays contained even in fullscreen ── */
#game-screen {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  align-items: center;
  background: #070710;
}
/* Constrain game to max-width box even in fullscreen */
#game-screen > * {
  max-width: 500px;
  width: 100%;
}
#game-canvas-wrap {
  flex: 1;
  min-height: 0;
  max-width: 500px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
#game-canvas {
  display: block;
  background: #070710;
  touch-action: none;
  cursor: none;
  max-height: 100%;
  max-width: 100%;
}

/* ── COINS TAB + COIN PACKS ── */
.shop-tabs { flex-wrap: wrap; }
.coins-tab { color: var(--gold) !important; border-color: rgba(255,214,10,0.3) !important; }
.coins-tab.active { border-color: var(--gold) !important; background: rgba(255,214,10,0.08) !important; }
.coinpack-item { position: relative; transition: transform 0.15s, box-shadow 0.15s; }
.coinpack-item:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(76,201,240,0.2); }
.coinpack-price { text-align: center; }

/* ── AUTH INPUT FIELDS ── */
#auth-username::placeholder, #auth-password::placeholder, #auth-confirm::placeholder { color:rgba(255,255,255,0.25); }
#auth-overlay a { text-decoration:none; }
#auth-overlay a:hover { text-decoration:underline; }

/* ── LOGOUT / AUTH BUTTONS IN MENU ── */
#auth-btn    { margin-top:4px; }
#logout-btn  { margin-top:0; }