/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT LAYER — page-specific components ONLY.
   NO TOKENS. NO DUPLICATE DEFINITIONS.

   All design tokens live in src/input.css @theme + @layer base.
   All reusable glass surfaces, buttons, inputs, cards, badges live in
   src/input.css @layer components.

   This file contains ONLY:
   1. Page-specific layouts (page-shell, mobile-stack)
   2. Roadmap visual components (unique to the roadmap page)
   3. Tab active states
   4. html/body overflow safety

   If you need a new component, add it to src/input.css @layer components.
   If you need a new token, add it to src/input.css @theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Body overflow safety */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--surface-base);
  color: var(--text-primary);
}

/* Page width container */
.page-shell {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .page-shell {
    padding-inline: 1.5rem;
  }
}

/* Tab active state */
.tab-btn-active {
  background: var(--surface-elevated) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
  font-weight: 800;
}

.dark .tab-btn-active {
  background: rgba(46, 121, 199, 0.18) !important;
  border-color: rgba(46, 121, 199, 0.5) !important;
  color: #FFFFFF !important;
}

/* Responsive grid helpers */
.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-table table {
  min-width: 42rem;
}

.mobile-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .mobile-stack.lg-2 {
    grid-template-columns: 2fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROADMAP PAGE COMPONENTS — unique visual elements for game_dev_roadmap.html
   ═══════════════════════════════════════════════════════════════════════════ */

.roadmap-line {
  background: linear-gradient(to bottom, 
    transparent,
    rgba(var(--primary-rgb), 0.2) 10%,
    rgba(var(--primary-rgb), 0.5) 50%,
    rgba(var(--primary-rgb), 0.2) 90%,
    transparent
  );
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.1);
}

.roadmap-dot {
  background: var(--glass-bg-primary, var(--surface-card));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 4px solid rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4);
}

.dark .roadmap-dot {
  background: rgba(7, 17, 31, 0.8);
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.6);
}

.roadmap-card-glass {
  background: var(--glass-bg-interactive, var(--surface-card));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border, var(--border-soft));
  box-shadow: var(--shadow-premium);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.roadmap-card-glass:hover {
  border-color: var(--glass-border-hover, rgb(var(--primary-rgb)));
  box-shadow: var(--glass-shadow, var(--shadow-premium-lg));
  transform: translateY(-4px);
}