/* 80s football arcade: midnight-purple sky, a neon-lit field, pixel type, chunky outlines and hard shadows. */
:root {
  --night: #120630;
  --night2: #241056;
  --ink: #0b0620;            /* outlines and hard shadows */
  --ink2: #1c0c45;           /* panels */
  --ink3: #2b1766;           /* raised panels */
  --hi: #fff8e7;
  --muted: #c3b4f0;
  --dim: #8676b8;
  --yellow: #ffd23f;
  --pink: #ff3ea5;
  --cyan: #22e1ff;
  --orange: #ff8a1f;
  --turf: #189437;
  --turf2: #1fae45;
  --win: #39ff7a;
  --lose: #ff3b5c;
  --accent: var(--yellow);
  --line: rgba(255, 255, 255, 0.22);
  --line2: rgba(255, 255, 255, 0.1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --text: "Rubik", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--night); color: var(--hi); font-family: var(--text); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }

/* Big names and numbers */
.tall { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.9; letter-spacing: 0.01em; }
/* Arcade lettering */
.pixel { font-family: var(--pixel); font-weight: 400; text-transform: uppercase; line-height: 1.25; letter-spacing: 0; }
/* Yellow arcade title with a pink and black drop */
.marquee { color: var(--yellow); text-shadow: 0.06em 0.06em 0 var(--pink), 0.12em 0.12em 0 var(--ink); }

.mark { font-family: var(--pixel); text-transform: uppercase; color: var(--yellow); text-shadow: 3px 3px 0 var(--pink); letter-spacing: 0.08em; }
.mark small { color: var(--pink); text-shadow: none; margin-right: 0.8em; font-size: 1em; }

/* The night sky behind everything: pixel stars and stadium-light haze */
.sky {
  background:
    radial-gradient(ellipse 60% 30% at 15% 0%, rgba(255, 210, 63, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 30% at 85% 0%, rgba(34, 225, 255, 0.16), transparent 70%),
    radial-gradient(3px 3px at 22px 38px, #fff 50%, transparent 52%) 0 0 / 140px 120px,
    radial-gradient(2px 2px at 90px 80px, #ffe9a8 50%, transparent 52%) 0 0 / 170px 150px,
    radial-gradient(2px 2px at 50px 12px, #a8f3ff 50%, transparent 52%) 0 0 / 110px 190px,
    linear-gradient(180deg, #0c0424 0%, var(--night) 40%, var(--night2) 75%, #3a0f5e 100%);
}

/* A green field running off to a neon horizon */
.field3d { position: absolute; left: -250%; right: -250%; bottom: 0; perspective: 420px; perspective-origin: 50% 0%; overflow: hidden; pointer-events: none; }
.field3d::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 320%;
  transform: rotateX(64deg); transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.85) 0 5px, transparent 5px 110px),
    repeating-linear-gradient(90deg, transparent 0 calc(50% - 160px), rgba(255, 255, 255, 0.6) calc(50% - 160px) calc(50% - 156px), transparent calc(50% - 156px) calc(50% + 156px), rgba(255, 255, 255, 0.6) calc(50% + 156px) calc(50% + 160px), transparent calc(50% + 160px) 100%),
    repeating-linear-gradient(0deg, var(--turf) 0 110px, var(--turf2) 110px 220px);
}
.field3d::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 6, 48, 0.85) 0%, rgba(18, 6, 48, 0.1) 35%, rgba(18, 6, 48, 0.35) 100%); }
.horizon { position: absolute; left: 0; right: 0; height: 4px; background: var(--pink); box-shadow: 0 0 18px 4px rgba(255, 62, 165, 0.8), 0 0 60px 10px rgba(255, 62, 165, 0.35); pointer-events: none; }

/* CRT scanlines over the whole picture */
.scan::after { content: ""; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 5px); pointer-events: none; z-index: 50; }

/* An arcade cabinet panel */
.box { background: var(--ink2); border: 5px solid var(--ink); box-shadow: inset 0 0 0 3px var(--cyan), 8px 8px 0 var(--ink); }

.thumb {
  flex: none; width: 44px; height: 44px; overflow: hidden; position: relative;
  border: 3px solid var(--ink);
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.35)), var(--team, #5a4a8a);
}
.thumb img { position: absolute; left: 50%; bottom: -2px; width: 140%; transform: translateX(-50%); }
.thumb .ini { position: absolute; inset: 0; display: grid; place-items: center; font: 400 10px var(--pixel); color: var(--hi); }

@keyframes blink { 50% { opacity: 0; } }