/* Base Theme */
:root{
  --bg:#0b0d12;
  --bg-alt:#0f131b;
  --surface:#121622;
  --text:#e5e7eb;
  --muted:#9aa3b2;
  --primary:#3b82f6;
  --accent:#06b6d4;
  --success:#22c55e;
  --danger:#ef4444;
  --card-glass:rgba(18,22,34,.6);
  --border:rgba(148,163,184,.16);
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:radial-gradient(1200px 800px at 10% -10%, rgba(59,130,246,.18), transparent 60%),
             radial-gradient(800px 600px at 90% 0%, rgba(6,182,212,.12), transparent 60%),
             var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:16px;top:16px;z-index:999;background:#000;color:#fff;padding:10px 14px;border-radius:8px}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(11,13,18,.95), rgba(11,13,18,.85));
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:8px 0}
body.game-page{padding-top:84px!important}
body.game-page .section{padding-top:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.brand-text{font-weight:700;letter-spacing:.2px}
.nav-toggle{display:none;background:transparent;border:0;width:40px;height:40px;border-radius:10px;position:relative}
.nav-toggle .bar{display:block;position:absolute;left:10px;right:10px;height:2px;background:var(--text);transition:.25s}
.nav-toggle .bar:nth-child(1){top:12px}
.nav-toggle .bar:nth-child(2){top:19px}
.nav-toggle .bar:nth-child(3){top:26px}

.menu{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center}
.nav-link{
  display:inline-block;padding:6px 10px;margin:2px 0;border-radius:10px;text-decoration:none;color:var(--text);
  position:relative;transition:color .2s, transform .2s;white-space:nowrap;font-size:.9rem;
}
.nav-link:after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-link:hover{color:#fff;transform:translateY(-1px)}
.nav-link:hover:after{transform:scaleX(1)}
.nav-link.active{color:var(--primary);font-weight:600}
.nav-link.active:after{transform:scaleX(1)}

/* Hero */
.hero{position:relative;padding:72px 0 40px}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(1000px 600px at 20% 10%, rgba(59,130,246,.18), transparent 60%),
  radial-gradient(800px 500px at 80% 0%, rgba(6,182,212,.14), transparent 70%),
  linear-gradient(180deg, rgba(11,13,18,0.4), var(--bg));
  pointer-events:none
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.2fr .9fr;gap:40px;align-items:center}
.hero-copy h1{font-size: clamp(2rem, 1.5rem + 2vw, 3rem);line-height:1.1;margin:0 0 12px}
.subtitle{color:var(--muted);margin:0 0 18px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 16px;border-radius:12px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s, box-shadow .2s, background .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg, #3b82f6, #1d4ed8);color:white;box-shadow:var(--shadow)}
.btn-primary:hover{filter:saturate(1.1) brightness(1.02)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:#4b5563;background:rgba(255,255,255,.03)}
.btn-accent{background:linear-gradient(180deg, #06b6d4, #0ea5e9);color:#031824;box-shadow:var(--shadow)}
.btn-accent:hover{filter:saturate(1.08) brightness(1.02)}
.btn-outline{background:rgba(255,255,255,.02);border-color:var(--accent);color:var(--text)}
.btn-outline:hover{background:rgba(14,165,233,.08)}

/* Auth Card */
.auth-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:22px;border-radius:18px;border:1px solid var(--border);
  box-shadow:var(--shadow);backdrop-filter:blur(8px);
}
.auth-card h2{margin:0 0 12px;font-size:1.25rem}
.auth-form{display:grid;gap:12px}
.field{position:relative}
.field input{
  width:100%;height:48px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);padding:0 14px;outline:none;transition:border-color .2s, box-shadow .2s, background .2s
}
.field input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(59,130,246,.18)}
.field label{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;padding:0 6px;background:transparent;transition:.18s
}
.field input:not(:placeholder-shown) + label,
.field input:focus + label{top:-9px;background:var(--surface);color:#cbd5e1;font-size:.78rem}
.actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.link{color:#93c5fd;text-decoration:none}
.link:hover{text-decoration:underline}
.divider{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--muted);font-size:.9rem}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}

/* Sections */
.section{padding:72px 0}
body.game-page .section{padding-top:20px;padding-bottom:72px}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.section-head h2{margin:0 0 8px;font-size:1.6rem}
.section-head p{margin:0 0 24px;color:var(--muted)}

.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{border:1px solid var(--border);border-radius:16px;padding:18px;background:rgba(255,255,255,.02);transition:transform .2s, border-color .2s}
.feature:hover{transform:translateY(-2px);border-color:#334155}
.feature-icon{font-size:22px;margin-bottom:8px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{border:1px solid var(--border);border-radius:16px;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));box-shadow:var(--shadow);transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.55)}
.card header h3{margin:0 0 8px;font-size:1.1rem}

.community-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:999px;text-decoration:none;color:var(--text);border:1px solid var(--border);background:rgba(255,255,255,.02);transition:.2s}
.chip:hover{border-color:#334155;background:rgba(255,255,255,.04)}

/* Pills (used across pages) */
.pill{border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:var(--text);background:rgba(255,255,255,.02);cursor:pointer;user-select:none;transition:.2s;display:inline-block}
.pill:hover{border-color:#334155}
.pill.active{border-color:var(--accent);background:rgba(14,165,233,.08)}

details.faq{border:1px solid var(--border);border-radius:12px;padding:14px;background:rgba(255,255,255,.02);margin-bottom:12px}
details.faq[open]{background:rgba(255,255,255,.04)}
details.faq summary{cursor:pointer;font-weight:600}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:28px 0;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-links{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.footer-links a{text-decoration:none;color:var(--muted)}
.footer-links a:hover{color:var(--text)}

/* Responsive */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:24px}
  .auth-card{order:-1}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .nav-toggle{display:inline-block}
  .menu{position:absolute;top:68px;right:16px;left:16px;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px;transform-origin:top right;transform:scale(.98) translateY(-6px);opacity:0;pointer-events:none;transition:.2s}
  .menu.open{transform:scale(1) translateY(0);opacity:1;pointer-events:auto;box-shadow:var(--shadow)}
  .nav-link{padding:12px 12px}
  .game-nav-menu{flex-wrap:wrap;gap:4px}
  .game-nav-menu .nav-link{font-size:.9rem;padding:8px 10px}
  .features-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Stamina Alert Animations */
@keyframes staminaAlertPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% { 
    transform: scale(1.02);
    box-shadow: 0 0 20px 8px rgba(239, 68, 68, 0.4);
  }
}

@keyframes staminaAlertFlash {
  0%, 100% { 
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
  }
  50% { 
    background-color: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.9);
  }
}

@keyframes staminaIconBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-5deg); }
  75% { transform: translateY(-3px) rotate(5deg); }
}

.stamina-alert {
  animation: staminaAlertFlash 1.5s ease-in-out infinite, staminaAlertPulse 2s ease-in-out infinite;
  position: relative;
  padding: 16px 20px !important;
  border-width: 2px !important;
  font-size: 1.05rem !important;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3) !important;
}

.stamina-alert-icon {
  display: inline-block;
  animation: staminaIconBounce 1s ease-in-out infinite;
  font-size: 1.3em;
  margin-right: 8px;
  vertical-align: middle;
}