@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;700&display=swap");

:root {
  --bg0: #050812;
  --bg1: #08152a;
  --bg2: #0f2444;
  --panel: rgba(7, 19, 40, 0.72);
  --panel-edge: rgba(82, 201, 255, 0.55);
  --panel-glow: rgba(34, 182, 255, 0.28);
  --text: #dff5ff;
  --text-dim: #9ec4e8;
  --neon-cyan: #4de8ff;
  --neon-blue: #4f83ff;
  --neon-lime: #9cff6c;
  --neon-amber: #ffd45f;
  --neon-pink: #ff5ad8;
  --field0: #061b2f;
  --field1: #0b2842;
  --field2: #0e3557;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 520px at 15% -5%, rgba(79, 131, 255, 0.42), rgba(0, 0, 0, 0) 70%),
    radial-gradient(850px 420px at 95% 0%, rgba(255, 90, 216, 0.32), rgba(0, 0, 0, 0) 72%),
    linear-gradient(165deg, var(--bg2) 0%, var(--bg1) 40%, var(--bg0) 100%);
  min-height: 100vh;
}

.studio-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.studio-hero {
  padding: 22px;
}

.studio-kicker {
  margin: 0 0 8px;
  color: var(--text-dim);
  font-family: "Orbitron", sans-serif;
  letter-spacing: 1.7px;
  font-size: 0.72rem;
}

.studio-hero h1 {
  margin: 0;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  letter-spacing: 2.4px;
  color: #eefbff;
  text-shadow: 0 0 12px rgba(77, 232, 255, 0.8);
}

.studio-sub {
  margin: 10px 0 0;
  font-size: 1rem;
  color: #b8d8f2;
}

.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.game-card {
  min-height: 210px;
}

.game-card h2 {
  margin: 0 0 10px;
  font-family: "Orbitron", sans-serif;
  color: #e6f8ff;
}

.game-card p {
  margin: 0 0 8px;
}

.game-card.featured {
  grid-column: span 2;
}

.game-tag {
  margin: 0 0 10px;
  display: inline-block;
  font-family: "Orbitron", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1.4px;
  padding: 4px 8px;
  border: 1px solid rgba(77, 232, 255, 0.6);
  color: #bff6ff;
}

.card-actions {
  margin-top: 16px;
}

.card-btn {
  display: inline-block;
  text-decoration: none;
  border: 1px solid rgba(77, 232, 255, 0.85);
  background: linear-gradient(180deg, rgba(15, 47, 91, 0.95), rgba(11, 28, 54, 0.92));
  color: #d9f6ff;
  padding: 10px 12px;
  font-family: "Orbitron", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.6px;
  box-shadow: 0 0 12px rgba(77, 232, 255, 0.3);
}

.card-btn:hover {
  border-color: #9cf6ff;
  box-shadow: 0 0 16px rgba(77, 232, 255, 0.48);
}

.studio-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #b0d6ef;
}

.studio-footer p {
  margin: 0;
}

.game-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.panel {
  position: relative;
  background: linear-gradient(175deg, rgba(12, 30, 60, 0.78), var(--panel));
  border: 1px solid var(--panel-edge);
  box-shadow:
    0 0 0 1px rgba(167, 233, 255, 0.14) inset,
    0 0 24px var(--panel-glow),
    0 6px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  padding: 10px;
  overflow: hidden;
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}

.top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.top-bar h1 {
  margin: 0;
  font-family: "Orbitron", sans-serif;
  letter-spacing: 2px;
  color: #e8fbff;
  text-shadow: 0 0 8px rgba(77, 232, 255, 0.8);
  font-size: 1.55rem;
}

.mini-brand {
  margin: 0 0 4px;
  color: #9ec4e8;
  font-family: "Orbitron", sans-serif;
  letter-spacing: 1.5px;
  font-size: 0.66rem;
}

.top-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: "Orbitron", sans-serif;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.back-link {
  color: #d8f8ff;
  text-decoration: none;
  border: 1px solid rgba(77, 232, 255, 0.6);
  padding: 3px 6px;
  letter-spacing: 0.6px;
}

.back-link:hover {
  border-color: #9cf6ff;
  box-shadow: 0 0 10px rgba(77, 232, 255, 0.42);
}

.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.team-block {
  text-align: center;
}

.team-name {
  font-family: "Orbitron", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.6px;
  color: #c9ecff;
}

.team-score {
  font-family: "Orbitron", sans-serif;
  font-size: 2.45rem;
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(77, 232, 255, 0.7);
}

.game-meta {
  text-align: center;
  line-height: 1.35;
  font-family: "Orbitron", sans-serif;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.field-wrap {
  overflow: hidden;
}

.field {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6.8;
  min-height: 300px;
  --off-primary: #2e5ea7;
  --off-helmet: #dbeaff;
  --def-primary: #7f2330;
  --def-helmet: #ffd8d8;
  background:
    linear-gradient(90deg, rgba(77, 232, 255, 0.08) 0 1px, transparent 1px 10%),
    linear-gradient(0deg, rgba(77, 232, 255, 0.08) 0 1px, transparent 1px 20%),
    linear-gradient(180deg, var(--field2), var(--field1) 56%, var(--field0));
  border: 1px solid rgba(77, 232, 255, 0.7);
  box-shadow:
    inset 0 0 45px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(77, 232, 255, 0.3);
}

.field::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.06) 0,
    rgba(255, 255, 255, 0.06) 2px,
    rgba(255, 255, 255, 0) 2px,
    rgba(255, 255, 255, 0) 9px
  );
  mix-blend-mode: soft-light;
}

.yard-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
}

.first-down-marker {
  background: linear-gradient(180deg, #ffe481, #ffc247);
  box-shadow: 0 0 16px rgba(255, 212, 95, 0.9);
  opacity: 0.95;
}

.line-of-scrimmage {
  background: linear-gradient(180deg, #9cf6ff, #4de8ff);
  box-shadow: 0 0 14px rgba(77, 232, 255, 0.9);
  opacity: 0.95;
}

.ball {
  position: absolute;
  top: 45%;
  width: 20px;
  height: 12px;
  background: linear-gradient(180deg, #ffbf73, #a25821);
  border: 2px solid #120a00;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: opacity 0.12s linear;
  z-index: 5;
  box-shadow: 0 0 12px rgba(255, 168, 94, 0.55);
}

.play-trail {
  position: absolute;
  height: 3px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(156, 246, 255, 0.2), rgba(156, 246, 255, 0.95));
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}

.play-trail.pass {
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 90, 216, 0.2), rgba(255, 90, 216, 0.98));
  box-shadow: 0 0 7px rgba(255, 90, 216, 0.95);
}

.play-trail.active {
  opacity: 1;
}

.ball-carrier {
  position: absolute;
  width: 20px;
  height: 14px;
  border: 3px solid #02070d;
  border-radius: 2px;
  background: linear-gradient(180deg, #c8ff93, #7cc63f);
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 6;
  box-shadow:
    0 0 0 2px rgba(3, 13, 21, 0.35),
    0 0 11px rgba(156, 255, 108, 0.9);
}

.ball-carrier.pass {
  background: linear-gradient(180deg, #ff9ae8, #ff5ad8);
  box-shadow:
    0 0 0 2px rgba(12, 4, 12, 0.4),
    0 0 11px rgba(255, 90, 216, 0.92);
}

.ball-carrier.active {
  opacity: 1;
}

.hit-burst {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
  background: radial-gradient(circle, #ffffff 0%, #9cf6ff 35%, #ff5ad8 68%, rgba(0, 0, 0, 0) 100%);
}

.hit-burst.active {
  animation: giant-hit 0.36s ease-out;
}

@keyframes giant-hit {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
    filter: brightness(1.5);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.7) rotate(24deg);
  }
  80% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(3.45) rotate(-18deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.1) rotate(0deg);
    filter: brightness(0.82);
  }
}

.player {
  position: absolute;
  width: 18px;
  height: 21px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 0, 0, 0.35);
  image-rendering: pixelated;
  transition:
    left 0.18s linear,
    top 0.18s linear,
    filter 0.1s linear;
  z-index: 4;
}

.player::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -8px;
  width: 18px;
  height: 8px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.player::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -6px;
  width: 18px;
  height: 6px;
  border-left: 1px solid rgba(0, 0, 0, 0.35);
  border-right: 1px solid rgba(0, 0, 0, 0.35);
  background: repeating-linear-gradient(
    to right,
    #021223 0,
    #021223 3px,
    #87f0ff 3px,
    #87f0ff 6px
  );
}

.player.offense {
  background: var(--off-primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--off-primary), white 14%);
}

.player.offense::before {
  background: var(--off-helmet);
}

.player.defense {
  background: var(--def-primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--def-primary), white 12%);
}

.player.defense::before {
  background: var(--def-helmet);
}

.player.highlight {
  filter: drop-shadow(0 0 5px rgba(156, 255, 108, 0.95));
}

.endzone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-family: "Orbitron", sans-serif;
  font-size: 0.64rem;
  color: #e7fbff;
  text-shadow: 0 0 7px rgba(77, 232, 255, 0.7);
  opacity: 0.92;
}

.endzone.left {
  left: 0;
  background: linear-gradient(180deg, rgba(77, 232, 255, 0.4), rgba(77, 232, 255, 0.16));
}

.endzone.right {
  right: 0;
  background: linear-gradient(180deg, rgba(255, 90, 216, 0.4), rgba(255, 90, 216, 0.16));
}

.play-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 8px;
}

.play-btn,
.upgrade-btn,
#newSeasonBtn {
  border: 1px solid rgba(77, 232, 255, 0.8);
  background: linear-gradient(180deg, rgba(15, 47, 91, 0.95), rgba(11, 28, 54, 0.92));
  color: #d9f6ff;
  padding: 10px 8px;
  font-family: "Orbitron", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(77, 232, 255, 0.28);
}

.play-btn:hover,
.upgrade-btn:hover,
#newSeasonBtn:hover {
  border-color: #9cf6ff;
  box-shadow: 0 0 16px rgba(77, 232, 255, 0.48);
}

.play-btn:active,
.upgrade-btn:active,
#newSeasonBtn:active {
  transform: translateY(1px);
}

.hint {
  margin: 8px 0 0;
  font-size: 0.84rem;
  color: var(--text-dim);
}

.log h2,
.season h2,
.roster h2,
.setup h2 {
  margin: 0 0 8px;
  font-family: "Orbitron", sans-serif;
  letter-spacing: 1px;
  font-size: 0.95rem;
  color: #b7f4ff;
}

#feed {
  background: linear-gradient(180deg, rgba(2, 13, 26, 0.92), rgba(7, 18, 35, 0.84));
  border: 1px solid rgba(77, 232, 255, 0.55);
  min-height: 120px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  font-size: 0.86rem;
}

.feed-line {
  margin: 0 0 6px;
}

.season-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.season-grid,
.roster-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}

.upgrade-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.setup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

select {
  border: 1px solid rgba(77, 232, 255, 0.75);
  background: rgba(6, 22, 43, 0.95);
  color: #ddf7ff;
  font-family: "Orbitron", sans-serif;
  padding: 6px;
}

strong {
  color: #b5dbff;
}

@media (max-width: 720px) {
  .studio-shell {
    padding: 10px;
  }

  .studio-grid {
    grid-template-columns: 1fr;
  }

  .game-card.featured {
    grid-column: span 1;
  }

  .studio-footer {
    flex-direction: column;
  }

  .game-shell {
    max-width: 100%;
    padding: 10px;
  }

  .field {
    min-height: 220px;
    aspect-ratio: 16 / 7.2;
  }

  .player {
    width: 14px;
    height: 17px;
  }

  .player::before {
    top: -6px;
    width: 14px;
    height: 6px;
  }

  .player::after {
    bottom: -5px;
    width: 14px;
    height: 5px;
  }

  .ball {
    width: 16px;
    height: 10px;
  }

  .ball-carrier {
    width: 16px;
    height: 11px;
    border-width: 2px;
  }

  .hit-burst {
    width: 16px;
    height: 16px;
  }

  .scoreboard {
    grid-template-columns: 1fr;
  }

  .season-grid,
  .roster-grid {
    grid-template-columns: 1fr;
  }

  .game-meta {
    order: -1;
  }

  .top-bar h1 {
    font-size: 1.16rem;
  }

  .hint {
    font-size: 0.74rem;
  }

  .hit-burst.active {
    animation: giant-hit-mobile 0.34s ease-out;
  }
}

@keyframes giant-hit-mobile {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.45);
  }
  72% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(2.65);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.1);
  }
}