/*
  style.css – Simplified premium design for Enjoyer Win
  Inspired by modern dark UI, glassmorphism, and neon accent colors.
*/

/* ==== Design Tokens ==== */
:root {
  /* Core palette */
  --bg: #060912;               /* deep dark background */
  --bg-card: rgba(12, 18, 32, 0.85); /* card background with glass effect */
  --bg-hover: rgba(255,255,255,0.02);
  --neon: #00e676;            /* main accent */
  --neon-dark: #00c853;       /* darker accent */
  --neon-glow: 0 0 12px rgba(0,230,118,0.4), 0 0 30px rgba(0,230,118,0.2);
  --border: rgba(255,255,255,0.08);
  --text-primary: #e8edf5;
  --text-secondary: #8496b0;
  --text-tertiary: #4a5a72;
  --danger: #ff4762;
  --radius: 12px;
  --font-main: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* ==== Global Reset ==== */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}

/* ==== Layout ==== */
.layout {
  display:grid;
  grid-template-areas:
    "header header header"
    "sidebar main ads";
  grid-template-columns:260px 1fr 200px;
  grid-template-rows:64px 1fr;
  min-height:100vh;
}
@media (max-width:1200px){
  .layout{grid-template-columns:240px 1fr; grid-template-areas:"header header" "sidebar main";}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr; grid-template-areas:"header" "main";}
}

/* ==== Header ==== */
header {
  grid-area:header;
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:20px;
  padding:0 24px; height:64px;
  background:rgba(9,10,15,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.logo {
  font-family: var(--font-mono);
  font-weight:700; font-size:22px; color:#fff;
  flex:1; display:flex; align-items:center; gap:8px;
}
.balance-display {
  font-family: var(--font-mono);
  color:var(--neon);
  background:rgba(0,230,118,0.08);
  padding:8px 12px; border-radius:8px;
  border:1px solid rgba(0,230,118,0.2);
}
.header-right { display:flex; align-items:center; gap:12px; }

/* ==== Hamburger (mobile) ==== */
.menu-toggle {
  display:none; flex-direction:column; gap:5px; width:28px; height:28px; cursor:pointer;
}
.menu-toggle span { display:block; height:2px; background:var(--text-primary); transition:0.3s; }
@media (max-width:900px){ .menu-toggle{display:flex;}}
.menu-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,6px);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px);}

/* ==== Sidebar ==== */
.sidebar {
  grid-area:sidebar;
  background:rgba(14,16,23,0.4);
  backdrop-filter:blur(12px);
  border-right:1px solid var(--border);
  padding:24px 0; overflow-y:auto;
}
@media (max-width:900px){
  .sidebar{position:fixed; top:64px; left:-260px; width:260px; height:calc(100vh - 64px);
    background:rgba(9,10,15,0.95); transition:transform .4s cubic-bezier(.2,.8,.2,1);}
  .sidebar.open{transform:translateX(260px);}
}

/* ==== Nav Items ==== */
.games-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--neon);
  margin: 32px 0 12px;
  position: relative;
  text-align: center;
}

.games-section-title::before, .games-section-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  transform: translateY(-50%);
}
.games-section-title::before { left: 0; }
.games-section-title::after { right: 0; }
.nav-section-title {font-size:12px; font-weight:700; color:var(--text-tertiary); text-transform:uppercase; padding:0 24px 8px;}
.nav-item {
  display:flex; align-items:center; gap:12px; padding:12px 24px; cursor:pointer;
  color:var(--text-secondary); font-size:15px; transition:0.2s;
  border-left:3px solid transparent;
}
.nav-item:hover {background:var(--bg-hover); color:var(--text-primary);}
.nav-item.active {color:var(--neon); border-left-color:var(--neon); background:linear-gradient(90deg, rgba(0,230,118,0.1), transparent);}
.nav-item span.icon {font-size:20px; width:24px; text-align:center; transition:transform .3s;}
.nav-item:hover span.icon {transform:scale(1.12) rotate(-5deg);}

/* ==== Main Content ==== */
main {grid-area:main; padding:24px; overflow-y:auto;}

/* ==== Buttons ==== */
.btn-neon, .btn-ghost, .btn-danger {
  font-family: var(--font-main);
  font-weight:600; border-radius:8px; cursor:pointer; transition:0.2s;
  padding:10px 20px; border:none;
}
.btn-neon {background:linear-gradient(135deg,var(--neon),var(--neon-dark)); color:#000; box-shadow:var(--neon-glow);}
.btn-neon:hover {transform:translateY(-2px); box-shadow:0 0 20px rgba(0,230,118,0.6);}
.btn-ghost {background:rgba(255,255,255,0.03); color:var(--text-primary); border:1px solid var(--border);}
.btn-ghost:hover {background:rgba(255,255,255,0.07); border-color:var(--neon);}
.btn-danger {background:linear-gradient(135deg,#ff2a5f,#e11d48); color:#fff; box-shadow:0 4px 12px rgba(255,42,95,0.4);} 
.btn-danger:hover {transform:translateY(-2px); box-shadow:0 0 20px rgba(255,42,95,0.6);}

/* ==== Modal ==== */
.modal-overlay {position:fixed; inset:0; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); z-index:1000;}
.modal {background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:32px; max-width:420px; width:90%;}
.modal-title {font-size:24px; font-weight:700; color:var(--neon); margin-bottom:8px; text-align:center;}
.modal-subtitle {font-size:14px; color:var(--text-secondary); margin-bottom:24px; text-align:center;}
.auth-tabs {display:flex; border-bottom:1px solid var(--border); margin-bottom:24px;}
.auth-tab {flex:1; padding:10px; text-align:center; cursor:pointer; color:var(--text-secondary); font-weight:600; border-bottom:2px solid transparent;}
.auth-tab.active {color:var(--neon); border-bottom-color:var(--neon);}
.auth-tab:hover {color:var(--text-primary);}

/* ==== Form ==== */
.form-group {margin-bottom:16px;}
.form-group label {display:block; margin-bottom:6px; font-size:13px; color:var(--text-secondary); font-weight:600;}
.form-group input {width:100%; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-size:15px; font-family:var(--font-main); outline:none;}
.form-group input:focus {border-color:var(--neon);}
.form-error {color:var(--danger); font-size:13px; margin-top:4px;}

/* ==== Game Cards ==== */
.game-view {max-width:600px; margin:0 auto;}
.game-view.active {display:block;}
.game-title {font-size:28px; font-weight:700; color:var(--neon); margin-bottom:20px; text-shadow:0 0 8px var(--neon);}
.game-card {background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px;}

/* ==== Game Grid ==== */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
  padding: 10px;
}

/* Staggered fade‑in animation for cards */
.game-thumb {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s forwards;
  animation-delay: calc(var(--i) * 0.08s);
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}
.game-thumb {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.game-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--neon) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.game-thumb:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 25px var(--neon-glow);
  background: rgba(255,255,255,0.06);
}
.game-thumb:hover::before { opacity: 0.15; }
.game-thumb-icon {font-size:32px; margin-bottom:8px;}
.game-thumb-name {font-size:15px; font-weight:600; color:var(--text-primary);}
.game-thumb-tag {font-size:11px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:1px; margin-top:4px;}
.badge-hot {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  box-shadow: 0 0 6px var(--danger-glow);
  pointer-events: none;
}

/* Assign animation index to each game thumbnail */
.games-grid .game-thumb {
  --i: 0;
}
.games-grid .game-thumb:nth-child(1) { --i: 1; }
.games-grid .game-thumb:nth-child(2) { --i: 2; }
.games-grid .game-thumb:nth-child(3) { --i: 3; }
.games-grid .game-thumb:nth-child(4) { --i: 4; }
.games-grid .game-thumb:nth-child(5) { --i: 5; }
.games-grid .game-thumb:nth-child(6) { --i: 6; }
.games-grid .game-thumb:nth-child(7) { --i: 7; }
.games-grid .game-thumb:nth-child(8) { --i: 8; }
.games-grid .game-thumb:nth-child(9) { --i: 9; }
.games-grid .game-thumb:nth-child(10) { --i: 10; }

/* ==== Ads Panel ==== */
.ads-panel {grid-area:ads; background:var(--bg-card); border-left:1px solid var(--border); padding:12px; display:flex; flex-direction:column; gap:12px; overflow-y:auto;}
.ad-wrapper {display:flex; flex-direction:column; align-items:center;}

/* ==== Toast ==== */
.notif-container {position:fixed; top:80px; right:16px; z-index:2000; display:flex; flex-direction:column; gap:8px;}
.notif {font-family:var(--font-main); font-size:15px; font-weight:600; padding:12px 20px; border-radius:8px; max-width:300px; animation:slideIn .3s ease;}
.notif.win {background:rgba(0,255,136,0.15); border:1px solid var(--neon); color:var(--neon);}
.notif.lose {background:rgba(255,68,85,0.15); border:1px solid var(--danger); color:var(--danger);}
@keyframes slideIn {from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);}}

/* ==== Misc ==== */
a {color:var(--neon); text-decoration:none;}
a:hover {text-decoration:underline;}

/* ==== Responsive tweaks ==== */
@media (max-width:600px){
  .games-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}