/* ============================================
   PokéBattle, dark tech theme
   Deep navy/black base, cyan glow as the primary
   accent, classic Pokémon red reserved for the
   device shell and the one or two things per
   screen that need to stand out (e.g. Losses).
   ============================================ */
:root {
  --bg-1: #0d1f30;
  --bg-2: #060d16;
  --surface: rgba(20, 40, 60, 0.55);
  --surface-solid: #0f2436;
  --border: rgba(79, 216, 255, 0.25);
  --cyan: #4fd8ff;
  --cyan-dim: rgba(79, 216, 255, 0.35);
  --cyan-faint: rgba(79, 216, 255, 0.08);
  --ink: #eaf6ff;
  --ink-muted: #7fa8bd;
  --red-600: #e3350d;
  --green-600: #4ee08a;

  --dex-red: #d8291f;
  --dex-red-dark: #a01d15;
  --dex-red-darker: #7a150f;
  --dex-lens-blue: #4fc3f7;
  --dex-lens-blue-dark: #0277bd;

  --mono: 'Share Tech Mono', 'Courier New', monospace;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--mono);
  background: radial-gradient(ellipse at top, var(--bg-1) 0%, var(--bg-2) 65%);
  color: var(--ink);
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* A slow-drifting field of faint dots, ambient depth behind every page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--cyan-faint) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: dot-field-drift 40s linear infinite;
  z-index: 0;
}

@keyframes dot-field-drift {
  from { background-position: 0 0; }
  to { background-position: 400px 400px; }
}

/* ============================================
   Site header
   ============================================ */
.site-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-nav a {
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  letter-spacing: 0.03em;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--cyan);
}

.site-nav a.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  text-shadow: 0 0 6px rgba(79, 216, 255, 0.4);
}

.nav-logout {
  margin-top: 0;
  width: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
}

.nav-logout:hover {
  color: var(--cyan);
  border-color: var(--cyan-dim);
  background: rgba(79, 216, 255, 0.08);
}

@media (max-width: 560px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .site-nav {
    flex-wrap: wrap;
  }
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--dex-lens-blue-dark);
  position: relative;
  flex-shrink: 0;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--surface-solid);
}

.menu-button {
  width: auto;
  margin: 0;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-button span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}

/* ============================================
   Shared form elements (auth pages + profile)
   ============================================ */
.auth-container {
  position: relative;
  z-index: 1;
  background: var(--surface);
  backdrop-filter: blur(8px);
  padding: 2rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 0 24px rgba(79, 216, 255, 0.08);
  width: 100%;
  max-width: 360px;
  margin: 4rem auto;
}

.auth-container h1 {
  margin-top: 0;
  font-size: 1.4rem;
  color: var(--ink);
}

form label {
  display: block;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

form input {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.25rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: var(--mono);
  color: var(--ink);
}

form input:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

form small {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.error-message {
  color: #ff8a80;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

.success-message {
  color: var(--green-600);
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

button {
  margin-top: 1.5rem;
  width: 100%;
  padding: 0.65rem;
  background: var(--cyan);
  color: var(--bg-2);
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--mono);
  cursor: pointer;
}

button:hover {
  background: #7ee4ff;
}

button.secondary {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--border);
}

button.secondary:hover {
  background: rgba(79, 216, 255, 0.1);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================
   Page shell
   ============================================ */
.page-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem;
}

.page-content > h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--ink);
  letter-spacing: 0.03em;
}

/* ============================================
   Profile page
   ============================================ */
.profile-card {
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 0 24px rgba(79, 216, 255, 0.08);
}

.identity-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(79, 216, 255, 0.12);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
  flex-shrink: 0;
  text-shadow: 0 0 8px rgba(79, 216, 255, 0.5);
  border: 1px solid var(--border);
}

.identity-details h2 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--ink);
}

.identity-details p {
  margin: 0.2rem 0 0.5rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.role-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(79, 216, 255, 0.12);
  border: 1px solid var(--border);
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 600;
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.stat {
  text-align: center;
  padding: 0.85rem 0.5rem;
  border-right: 1px solid var(--border);
}

.stat:last-child {
  border-right: none;
}

.stat .value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(79, 216, 255, 0.4);
}

.stat.losses .value {
  color: var(--red-600);
  text-shadow: none;
}

.stat .label {
  font-size: 0.75rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.section-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.profile-actions button {
  margin-top: 0;
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat:nth-child(2) {
    border-right: none;
  }

  .stat:nth-child(1),
  .stat:nth-child(2) {
    border-bottom: 1px solid var(--border);
  }

  .profile-actions {
    flex-direction: column;
  }
}

/* ============================================
   Card Glossary
   ============================================ */
.page-content.glossary-page {
  max-width: 960px;
}

/* Pokédex device shell, the one place that stays a different color
   (classic red) rather than joining the dark palette, so it still reads
   as a distinct physical object sitting on the dark page. */
.pokedex-shell {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, var(--dex-red) 0%, var(--dex-red-dark) 100%);
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.pokedex-top-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.25rem 0.5rem 1rem;
}

.pokedex-lens {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bdefff 0%, var(--dex-lens-blue) 45%, var(--dex-lens-blue-dark) 100%);
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.pokedex-dots {
  display: flex;
  gap: 0.5rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.dot-red { background: #ff5252; }
.dot-yellow { background: #ffd740; }
.dot-green { background: #69f0ae; }

.pokedex-screen {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border-radius: 12px;
  padding: 1.25rem;
  border: 4px solid var(--dex-red-darker);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 40px rgba(79, 216, 255, 0.06);
}

.pokedex-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--cyan-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--cyan-faint) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: grid-drift 18s linear infinite;
  opacity: 0.5;
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 28px 56px, 56px 28px; }
}

.pokedex-screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--cyan-faint) 45%,
    rgba(79, 216, 255, 0.18) 50%,
    var(--cyan-faint) 55%,
    transparent 100%
  );
  animation: scanline-sweep 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scanline-sweep {
  0% { top: -60px; }
  100% { top: 100%; }
}

.pokedex-shell .page-nav {
  margin-top: 1.25rem;
  padding: 0 0.5rem;
}

.pokedex-shell .page-nav button {
  background: var(--surface-solid);
  color: var(--cyan);
  border: none;
  font-weight: 700;
}

.pokedex-shell #page-indicator {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (max-width: 480px) {
  .pokedex-shell {
    padding: 0.85rem;
    border-radius: 14px;
  }

  .pokedex-screen {
    padding: 0.85rem;
  }
}

/* ============================================
   Dex list + detail panel
   ============================================ */
.dex-layout {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.dex-list {
  flex: 1;
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid var(--cyan-dim);
  border-radius: 8px;
  background: var(--surface);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 16px rgba(79, 216, 255, 0.08);
}

.dex-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(79, 216, 255, 0.15);
  cursor: pointer;
}

.dex-row:last-child { border-bottom: none; }

.dex-row:hover {
  background: rgba(79, 216, 255, 0.1);
}

.dex-row.selected {
  background: rgba(79, 216, 255, 0.2);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.dex-row-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

.dex-row-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--cyan);
}

.dex-row-name {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}

.dex-row-id {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cyan);
  flex-shrink: 0;
  text-shadow: 0 0 6px rgba(79, 216, 255, 0.5);
}

.dex-detail-panel {
  flex: 1;
  border: 1px solid var(--cyan-dim);
  border-radius: 8px;
  background: var(--surface);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 16px rgba(79, 216, 255, 0.08);
  padding: 1rem;
  overflow-y: auto;
  max-height: 480px;
}

.dex-detail-number {
  margin: 0 0 0.4rem;
  font-weight: 700;
  color: var(--cyan);
  font-size: 0.85rem;
  text-shadow: 0 0 6px rgba(79, 216, 255, 0.5);
}

.dex-detail-image {
  width: 100%;
  max-width: 220px;
  display: block;
  margin: 0 auto 0.75rem;
  border-radius: 8px;
  filter: drop-shadow(0 0 12px rgba(79, 216, 255, 0.25));
}

.dex-detail-name {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--ink);
  letter-spacing: 0.03em;
}

.card-detail { color: var(--ink-muted); }
.card-attacks p { color: var(--ink); }

.dex-list::-webkit-scrollbar,
.dex-detail-panel::-webkit-scrollbar {
  width: 8px;
}

.dex-list::-webkit-scrollbar-thumb,
.dex-detail-panel::-webkit-scrollbar-thumb {
  background: var(--cyan-dim);
  border-radius: 4px;
}

.dex-list::-webkit-scrollbar-track,
.dex-detail-panel::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 700px) {
  .dex-layout {
    flex-direction: column;
  }

  .dex-list,
  .dex-detail-panel {
    max-height: 320px;
  }
}