:root{
  --dark-bg:#0b1220;
  --muted:#9aa4b2;
  --neon-green:#32ff00;
  --neon-pink:#ff007f;
  --neon-cyan:#00ffff;
  --danger:#ff4500;
}
html,body{height:100%;scroll-behavior:smooth;}
body{
  background:linear-gradient(180deg,#071018 0%,var(--dark-bg) 100%);
  color:#e6eef8;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.neon-text{color:var(--neon-green);text-shadow:0 0 12px rgba(50,255,0,0.3),0 0 24px rgba(50,255,0,0.15);}
.brand{color:var(--neon-green);font-weight:800;font-size:1.125rem;letter-spacing:0.8px;text-transform:uppercase;}
.nav-bg{background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.08);box-shadow:0 2px 12px rgba(0,0,0,0.2);}
.game-tile {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
.game-tile:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-6px) scale(1.02);
  box-shadow:0 8px 24px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.1);
}
.muted{color:var(--muted)}
.footer-link{color:var(--neon-cyan);text-decoration:underline}

/* Small utility for container width used across pages */
.site-container{max-width:64rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}

/* Responsive tweaks */
@media (max-width:640px){
  .brand{font-size:1rem}
}

/* Navigation link underline effect */
.nav-link{position:relative;padding-bottom:2px}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--neon-green);transition:width 0.3s ease;box-shadow:0 0 8px var(--neon-green)}
.nav-link:hover::after{width:100%}

/* Mobile navigation */
.mobile-nav-toggle{display:none;border:0;background:transparent;color:var(--neon-green);padding:8px}
.mobile-nav{display:none;animation:slideDown 0.3s ease-out}
.mobile-nav.open{display:block}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:640px){
  .mobile-nav-toggle{display:block}
  .hidden-sm{display:none}
  .site-container{padding-left:0.75rem;padding-right:0.75rem}
  .card{padding:1rem}
  .game-tile{padding:1rem}
}

/* Game page responsive tweaks */
.game-area{display:flex;gap:1rem}
.game-controls{min-width:220px}
@media (max-width:900px){
  .game-area{flex-direction:column}
  .game-controls{min-width:0;width:100%}
}

/* Larger, touch-friendly buttons */
.large-btn{padding:1rem;min-height:56px;font-size:1.125rem;border-radius:0.75rem}
.neon-button.large-btn{display:inline-flex;align-items:center;justify-content:center}
@media (max-width:640px){
  .large-btn{padding:0.875rem;min-height:52px}
}

/* Compact scoreboard for small screens */
#scoreboard{display:flex;flex-wrap:wrap;gap:0.5rem}
#scoreboard .player-score-card{flex:1 1 48%;padding:0.75rem;border-radius:0.6rem;min-width:0;min-height:70px}
#scoreboard .player-score-card p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){
  #scoreboard{flex-direction:row;gap:0.5rem}
  #scoreboard .player-score-card{flex:1 1 calc(50% - 0.25rem);font-size:0.9rem;padding:0.625rem;min-height:65px}
  #scoreboard .player-score-card .text-2xl{font-size:1.5rem}
}

/* Hover and transition polish */
.brand{transition:transform 0.2s ease, text-shadow 0.2s ease}
.brand:hover{transform:translateY(-2px);text-shadow:0 0 16px rgba(50,255,0,0.5),0 0 32px rgba(50,255,0,0.25)}
.nav-bg a{transition:all 0.2s ease}
.nav-bg a:hover{transform:translateY(-1px);color:#32ff00;text-shadow:0 0 8px rgba(50,255,0,0.3)}
a{transition:all 0.25s ease}
button{transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer;}
button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25)}
button:active:not(:disabled){transform:translateY(0);transition:all 0.1s ease}

/* Logo spacing */
.site-logo{width:36px;height:36px;margin-right:8px}

/* Game icon utilities */
.game-icon{filter:drop-shadow(0 0 12px currentColor)}
.game-icon-green{color:var(--neon-green)}
.game-icon-cyan{color:var(--neon-cyan)}
.game-icon-gray{color:rgba(255,255,255,0.15)}

/* Focus outlines for keyboard users - improved contrast and accessibility */
*:focus-visible{outline:3px solid var(--neon-green);outline-offset:3px;border-radius:4px}
a:focus-visible, button:focus-visible{box-shadow:0 0 0 6px rgba(50,255,0,0.2)}
.show-focus :focus{outline:3px solid var(--neon-green);outline-offset:3px}
.show-focus a:focus, .show-focus button:focus{border-radius:4px}

/* Onboarding overlay */
.onboard-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(2,6,10,0.6),rgba(2,6,10,0.85));backdrop-filter:blur(6px);z-index:80}
.onboard-card{background:linear-gradient(180deg,#071018 0%, #0b1220 100%);border:1px solid rgba(255,255,255,0.04);padding:1rem;max-width:420px;border-radius:12px;text-align:left;color:var(--muted)}
.onboard-card h3{color:var(--neon-green);margin:0 0 .5rem 0}
.onboard-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.onboard-highlight{display:inline-block;padding:.2rem .45rem;border-radius:6px;background:rgba(50,255,0,0.06);border:1px solid rgba(50,255,0,0.06);color:var(--neon-green);font-weight:600}

/* Sticky bottom action bar for mobile */
.mobile-action-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  background: linear-gradient(180deg, rgba(10,12,16,0.95), rgba(8,10,12,0.98));
  backdrop-filter: blur(8px);
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  gap: 10px;
  z-index: 60;
  border-top: 1px solid rgba(255,255,255,0.08);
  justify-content: center;
  align-items: stretch;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
}
.mobile-action-bar .btn {
  flex: 1;
  padding: 14px 8px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width:640px){
  /* Show mobile action bar on small screens */
  .mobile-action-bar{display:flex}
  /* Keep desktop buttons visible, they'll be controlled by JavaScript */
}

/* Analytics opt-out UI small note */
.analytics-optout{font-size:0.85rem;color:var(--muted)}