/* Roblox-inspired Light Theme */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --bg: #F2F4F7;
  --bg2: #E8EAED;
  --card-bg: #FFFFFF;
  --card-border: rgba(0,0,0,0.08);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 8px 30px rgba(0,0,0,0.12);
  --text: #393B3D;
  --text-dim: #6B7280;
  --text-light: #9CA3AF;

  --primary: #00A2FF;
  --primary-glow: rgba(0,162,255,0.25);
  --green: #00B06F;
  --green-glow: rgba(0,176,111,0.25);
  --red: #E74C3C;
  --red-glow: rgba(231,76,60,0.25);
  --yellow: #FFB800;
  --yellow-glow: rgba(255,184,0,0.25);
  --purple: #8B5CF6;
  --purple-glow: rgba(139,92,246,0.25);
  --orange: #F97316;

  --robux: #00B06F;
  --diamond: #00CFFF;
  --diamond-glow: rgba(0,207,255,0.25);

  --accent1: #FF6B6B;
  --accent2: #4ECDC4;
  --accent3: #FFD93D;
  --accent4: #6C63FF;
  --accent5: #FF8A5C;
  --zombie: #B71C1C;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --font-display: 'Fredoka', sans-serif;
  --font-body: 'Nunito', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Utility classes */
.text-center { text-align: center; }
.font-display { font-family: var(--font-display); }

/* Buttons */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:hover { transform: translateY(-2px) scale(1.03); }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #0088DD);
  color: #fff;
  padding: 12px 32px;
  font-size: 1rem;
  box-shadow: 0 4px 20px var(--primary-glow);
}
.btn-success {
  background: linear-gradient(135deg, var(--green), #00906A);
  color: #fff;
  padding: 12px 32px;
  font-size: 1rem;
  box-shadow: 0 4px 20px var(--green-glow);
}
.btn-danger {
  background: linear-gradient(135deg, var(--red), #C0392B);
  color: #fff;
}
.btn-ghost {
  background: transparent;
  border: 2px solid var(--card-border);
  color: var(--text-dim);
  padding: 10px 24px;
  font-size: 0.9rem;
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

.btn-lg { padding: 16px 48px; font-size: 1.2rem; }
.btn-sm { padding: 8px 20px; font-size: 0.8rem; }

/* Card base */
.game-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.game-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--card-hover-shadow);
}

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.95); } 100% { transform: scale(1); opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shake { 0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(8px)}45%{transform:translateX(-6px)}60%{transform:translateX(6px)}75%{transform:translateX(-3px)} }
@keyframes gradShift { 0%,100%{background-position:0% 50%}50%{background-position:100% 50%} }
@keyframes coinSpin { 0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)} }

/* Currency displays */
.currency-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
}
.currency-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-full);
  padding: 6px 18px 6px 10px;
  box-shadow: var(--card-shadow);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.currency-pill .icon { font-size: 1.4rem; animation: coinSpin 4s ease infinite; }
.currency-pill.robux { border-color: rgba(0,176,111,0.3); }
.currency-pill.robux .amount { color: var(--robux); }
.currency-pill.diamonds { border-color: rgba(0,207,255,0.3); cursor: pointer; }
.currency-pill.diamonds:hover { transform: scale(1.05); }
.currency-pill.diamonds .amount { color: var(--diamond); }

/* Floating notifications */
.float-notification {
  position: fixed; z-index: 300;
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700;
  pointer-events: none;
  animation: floatNotif 1.5s ease-out forwards;
}
@keyframes floatNotif { 0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1}100%{opacity:0;transform:translateY(-80px) scale(0.8)} }

.float-emoji {
  position: fixed; z-index: 100; pointer-events: none;
  font-size: 2.5rem;
  animation: floatUp 2s ease-out forwards;
}
@keyframes floatUp { 0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-80px) scale(1.3)}100%{opacity:0;transform:translateY(-200px) scale(0.5)} }

/* Flash & shake */
.screen-shake { animation: shake 0.5s ease !important; }
.flash-overlay { position:fixed;inset:0;z-index:200;pointer-events:none;animation:flashAnim 0.4s ease-out forwards }
@keyframes flashAnim { 0%{opacity:0.4}100%{opacity:0} }
.combo-display { position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:3rem;font-weight:700;z-index:300;pointer-events:none;animation:comboAnim 1s ease-out forwards;text-shadow:0 2px 20px currentColor }
@keyframes comboAnim { 0%{opacity:1;transform:translate(-50%,-50%) scale(0.5)}30%{transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-80%) scale(1)} }

/* Fullscreen button */
.fullscreen-btn {
  position: fixed; top: 12px; right: 12px; z-index: 100;
  width: 42px; height: 42px;
  border: 2px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--text-dim);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
  font-size: 1.2rem;
  padding: 0;
}
.fullscreen-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}
.fullscreen-btn:active { transform: scale(0.92); }
.fullscreen-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* Responsive */
@media (max-width: 600px) {
  .btn-lg { padding: 14px 36px; font-size: 1rem; }
}