/* ==========================================================================
   mAIn Character — Retro Theme
   ========================================================================== */

/* --- CSS Custom Properties --- */
:root {
  /* Primary */
  --cosmic-black: #0a0a1a;
  --court-orange: #ff6b1a;
  --slam-purple: #9b30ff;

  /* Secondary */
  --neon-green: #39ff14;
  --hot-cyan: #00e5ff;
  --star-white: #f0f0ff;

  /* System / Chrome */
  --win95-gray: #c0c0c0;
  --panel-dark: #1a1a2e;
  --bevel-light: #e0e0e0;
  --bevel-dark: #404060;
  --danger-red: #ff1744;
  --footer-bg: #050510;

  /* Fonts */
  --font-display: 'Press Start 2P', cursive;
  --font-terminal: 'VT323', monospace;
  --font-body: 'Space Grotesk', sans-serif;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--star-white);
  background: radial-gradient(ellipse at 50% 40%, #1a0a30 0%, #0a0a1a 60%, #0a0a1a 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Basketball court background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* Half-court line (horizontal) */
    linear-gradient(
      to bottom,
      transparent calc(50% - 1px),
      rgba(255, 107, 26, 0.18) calc(50% - 1px),
      rgba(255, 107, 26, 0.18) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    /* Center circle */
    radial-gradient(
      circle at 50% 50%,
      transparent 79px,
      rgba(255, 107, 26, 0.18) 79px,
      rgba(255, 107, 26, 0.18) 81px,
      transparent 81px
    ),
    /* Top free-throw circle */
    radial-gradient(
      circle at 50% 100%,
      transparent 59px,
      rgba(255, 107, 26, 0.12) 59px,
      rgba(255, 107, 26, 0.12) 61px,
      transparent 61px
    ),
    /* Bottom free-throw circle */
    radial-gradient(
      circle at 50% 0%,
      transparent 59px,
      rgba(255, 107, 26, 0.12) 59px,
      rgba(255, 107, 26, 0.12) 61px,
      transparent 61px
    ),
    /* Top key/lane - left edge */
    linear-gradient(
      to right,
      transparent calc(50% - 60px),
      rgba(255, 107, 26, 0.15) calc(50% - 60px),
      rgba(255, 107, 26, 0.15) calc(50% - 58px),
      transparent calc(50% - 58px)
    ),
    /* Top key/lane - right edge */
    linear-gradient(
      to right,
      transparent calc(50% + 58px),
      rgba(255, 107, 26, 0.15) calc(50% + 58px),
      rgba(255, 107, 26, 0.15) calc(50% + 60px),
      transparent calc(50% + 60px)
    ),
    /* Top key/lane - bottom edge */
    linear-gradient(
      to bottom,
      transparent calc(100% - 2px),
      rgba(255, 107, 26, 0.15) calc(100% - 2px)
    ),
    /* Bottom key/lane - left edge */
    linear-gradient(
      to right,
      transparent calc(50% - 60px),
      rgba(255, 107, 26, 0.15) calc(50% - 60px),
      rgba(255, 107, 26, 0.15) calc(50% - 58px),
      transparent calc(50% - 58px)
    ),
    /* Bottom key/lane - right edge */
    linear-gradient(
      to right,
      transparent calc(50% + 58px),
      rgba(255, 107, 26, 0.15) calc(50% + 58px),
      rgba(255, 107, 26, 0.15) calc(50% + 60px),
      transparent calc(50% + 60px)
    ),
    /* Bottom key/lane - top edge */
    linear-gradient(
      to bottom,
      rgba(255, 107, 26, 0.15) 2px,
      transparent 2px
    ),
    /* Three-point arc top */
    radial-gradient(
      circle at 50% 0%,
      transparent 219px,
      rgba(255, 107, 26, 0.10) 219px,
      rgba(255, 107, 26, 0.10) 221px,
      transparent 221px
    ),
    /* Three-point arc bottom */
    radial-gradient(
      circle at 50% 100%,
      transparent 219px,
      rgba(255, 107, 26, 0.10) 219px,
      rgba(255, 107, 26, 0.10) 221px,
      transparent 221px
    ),
    /* Court border */
    linear-gradient(to right, rgba(255, 107, 26, 0.12) 2px, transparent 2px, transparent calc(100% - 2px), rgba(255, 107, 26, 0.12) calc(100% - 2px)),
    linear-gradient(to bottom, rgba(255, 107, 26, 0.12) 2px, transparent 2px, transparent calc(100% - 2px), rgba(255, 107, 26, 0.12) calc(100% - 2px));
  background-size:
    /* Half-court line */ 100% 100%,
    /* Center circle */ 100% 100%,
    /* Top FT circle */ 100% 28%,
    /* Bottom FT circle */ 100% 28%,
    /* Top key left */ 100% 50%,
    /* Top key right */ 100% 50%,
    /* Top key bottom */ 100% 28%,
    /* Bottom key left */ 100% 50%,
    /* Bottom key right */ 100% 50%,
    /* Bottom key top */ 100% 28%,
    /* 3pt arc top */ 100% 50%,
    /* 3pt arc bottom */ 100% 50%,
    /* Border left/right */ 100% 100%,
    /* Border top/bottom */ 100% 100%;
  background-position:
    /* Half-court line */ 0 0,
    /* Center circle */ 0 0,
    /* Top FT circle */ 0 0,
    /* Bottom FT circle */ 0 bottom,
    /* Top key left */ 0 0,
    /* Top key right */ 0 0,
    /* Top key bottom */ 0 0,
    /* Bottom key left */ 0 bottom,
    /* Bottom key right */ 0 bottom,
    /* Bottom key top */ 0 bottom,
    /* 3pt arc top */ 0 0,
    /* 3pt arc bottom */ 0 bottom,
    /* Border left/right */ 0 0,
    /* Border top/bottom */ 0 0;
  background-repeat: no-repeat;
}

/* Scanline overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0, 0, 0, 0.03) 1px,
    rgba(0, 0, 0, 0.03) 2px
  );
}

@media (max-width: 767px) {
  body::after {
    display: none;
  }
}

a {
  color: var(--hot-cyan);
  text-decoration: none;
  transition: color 200ms;
}

a:hover {
  color: var(--court-orange);
}

a:focus-visible {
  outline: 2px solid var(--court-orange);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  display: block;
}

/* --- Font Classes --- */
.font-display {
  font-family: var(--font-display);
  text-transform: uppercase;
}

.font-terminal {
  font-family: var(--font-terminal);
}

.font-body {
  font-family: var(--font-body);
}

/* --- Headings --- */
h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.3;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 18px;
}

@media (max-width: 767px) {
  h1 { font-size: 28px; }
  h2 { font-size: 20px; }
  h3 { font-size: 16px; }
}

/* --- Bevel Utilities --- */
.bevel-raised {
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}

.bevel-inset {
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}

/* --- Panel --- */
.panel {
  background: var(--panel-dark);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  border-radius: 0;
  padding: 24px;
}

/* --- Chrome Bar --- */
.chrome-bar {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #808080, #c0c0c0, #ffffff, #c0c0c0, #808080);
  flex-shrink: 0;
}

/* --- Text Glow --- */
.text-glow-orange {
  text-shadow: 0 0 20px rgba(255, 107, 26, 0.5), 0 0 40px rgba(255, 107, 26, 0.3);
}

.text-glow-cyan {
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.5), 0 0 40px rgba(0, 229, 255, 0.3);
}

.text-glow-purple {
  text-shadow: 0 0 20px rgba(155, 48, 255, 0.5), 0 0 40px rgba(155, 48, 255, 0.3);
}

/* --- Buttons --- */
.btn-primary {
  display: inline-block;
  background: linear-gradient(180deg, #ff8040, var(--court-orange));
  color: var(--star-white);
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 3px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  border-radius: 0;
  box-shadow: 4px 4px 0px #000;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 150ms, transform 150ms;
}

.btn-primary:hover {
  box-shadow: 2px 2px 0px #000;
  transform: translate(2px, 2px);
  color: var(--star-white);
}

.btn-primary:active {
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  box-shadow: 0 0 0 #000;
  transform: translate(4px, 4px);
}

.btn-secondary {
  display: inline-block;
  background: var(--panel-dark);
  color: var(--star-white);
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 3px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  border-radius: 0;
  box-shadow: 4px 4px 0px #000;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 150ms, transform 150ms;
}

.btn-secondary:hover {
  box-shadow: 2px 2px 0px #000;
  transform: translate(2px, 2px);
  color: var(--star-white);
}

.btn-secondary:active {
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  box-shadow: 0 0 0 #000;
  transform: translate(4px, 4px);
}

.btn-purple {
  background: linear-gradient(180deg, #b050ff, var(--slam-purple));
}

.btn-compact {
  font-size: 12px;
  padding: 8px 16px;
}

/* --- Content Area --- */
.content-area {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px 80px;
  flex: 1;
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}

@media (max-width: 767px) {
  .content-area {
    padding: 32px 16px 48px;
  }
}

/* Full-width variant for bracket view — minimal padding, no max-width */
.content-area-full {
  width: 100%;
  padding: 8px 12px;
  flex: 1 0 auto;
  position: relative;
  z-index: 1;
}

/* --- Animations --- */
@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 4px 4px 0px #000, 0 0 10px rgba(255, 107, 26, 0.3); }
  50% { box-shadow: 4px 4px 0px #000, 0 0 20px rgba(255, 107, 26, 0.6); }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Utility --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-muted { color: #808080; }