:root {
  color-scheme: dark;
  --ink: #f8f3da;
  --yellow: #ffd364;
  --blue: #07133b;
  /* Reservecache: Kairo-sand #c2a15a. Ikke aktiver før Ecuador er under 40°C. */
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--blue);
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
}

.teaser { min-height: 100svh; }

.hero {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(180deg, rgba(3, 8, 31, 0.14) 0%, rgba(3, 7, 21, 0.08) 45%, rgba(2, 5, 16, 0.2) 100%),
    url("public/assets/hero/teaser-court-v1.png") center / cover no-repeat;
}

.hero::after {
  background: radial-gradient(ellipse at 50% 60%, transparent 25%, rgba(1, 4, 18, 0.35) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.hero__copy {
  left: clamp(1.25rem, 5vw, 5rem);
  max-width: 42rem;
  position: absolute;
  top: clamp(1.5rem, 7vw, 5.5rem);
  z-index: 5;
}

.eyebrow, .hero__status, .corner-copy { letter-spacing: 0.11em; }

.eyebrow {
  color: var(--yellow);
  font-size: clamp(0.62rem, 1.15vw, 0.85rem);
  margin: 0 0 0.7rem;
}

h1 {
  color: var(--ink);
  font-size: clamp(2.7rem, 8.2vw, 8.4rem);
  letter-spacing: -0.09em;
  line-height: 0.8;
  margin: 0;
  text-shadow: 0.08em 0.08em 0 #0b1f5d, 0.12em 0.12em 0 rgba(0, 0, 0, 0.45);
}

h1 span { color: var(--yellow); }

.hero__status {
  border-left: 2px solid var(--yellow);
  font-size: clamp(0.66rem, 1.25vw, 0.93rem);
  line-height: 1.6;
  margin: 1.5rem 0 0 0.25rem;
  padding-left: 0.85rem;
  text-shadow: 0 2px 7px #000;
}

.hero__status p { margin: 0; }
.hero__status span { color: var(--yellow); font-size: 1.25em; }

.formation { inset: 0; position: absolute; z-index: 3; }

.player {
  --idle-delay: 0s;
  --idle-duration: 3.6s;
  --idle-lift: -0.24rem;
  --idle-tilt: 0deg;
  animation: player-idle var(--idle-duration) ease-in-out var(--idle-delay) infinite;
  background: none;
  border: 0;
  bottom: var(--bottom);
  cursor: pointer;
  filter: drop-shadow(0.35rem 0.45rem 0.3rem rgba(0, 0, 0, 0.55));
  left: var(--left);
  padding: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: var(--size);
}

.player img {
  display: block;
  image-rendering: pixelated;
  transition: filter 160ms ease, transform 160ms ease;
  width: 100%;
}

.player:hover img, .player:focus-visible img {
  filter: brightness(1.14) drop-shadow(0 0 0.7rem rgba(255, 211, 100, 0.85));
  transform: scale(1.035);
}

.player:focus-visible { outline: 2px solid var(--yellow); outline-offset: 0.35rem; }

.player--back { opacity: 0.94; }
.player--middle { opacity: 0.98; }
.player--front { z-index: 2; }

.player:nth-child(2n) { --idle-delay: -1.15s; --idle-duration: 4.2s; --idle-lift: -0.17rem; }
.player:nth-child(3n) { --idle-delay: -2.3s; --idle-duration: 3.15s; --idle-lift: -0.31rem; --idle-tilt: 0.25deg; }
.player:nth-child(5n) { --idle-delay: -0.65s; --idle-duration: 4.8s; --idle-lift: -0.13rem; --idle-tilt: -0.2deg; }

.corner-copy {
  background: rgba(1, 7, 24, 0.94);
  border: 1px solid rgba(156, 255, 127, 0.42);
  border-left: 3px solid rgba(156, 255, 127, 0.9);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.4);
  bottom: clamp(1.2rem, 3vw, 2.6rem);
  color: rgba(248, 243, 218, 0.96);
  font-size: clamp(0.72rem, 0.78vw, 0.96rem);
  left: clamp(1.25rem, 4vw, 3rem);
  margin: 0;
  padding: 0.48rem 0.65rem 0.45rem 0.78rem;
  position: absolute;
  text-shadow: 0 1px 3px #000;
  z-index: 7;
}

.corner-copy span {
  animation: standby-flicker 0.7s steps(2, end) infinite;
  color: #9cff7f;
  text-shadow: 0 0 0.5rem rgba(156, 255, 127, 0.72);
}

.corner-copy span::after {
  animation: terminal-cursor 0.38s steps(2, end) infinite;
  content: " ▮";
  display: inline-block;
}

.scanlines {
  background: repeating-linear-gradient(0deg, rgba(9, 19, 55, 0.1) 0, rgba(9, 19, 55, 0.1) 1px, transparent 1px, transparent 4px);
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 20;
}

.player-dialog {
  background: transparent;
  border: 0;
  color: var(--ink);
  max-height: min(90svh, 52rem);
  max-width: min(92vw, 48rem);
  overflow: visible;
  padding: 0;
}

.player-dialog::backdrop { background: rgba(1, 5, 21, 0.8); backdrop-filter: blur(4px); }

.player-dialog__panel {
  animation: player-card-in 220ms ease-out;
  background:
    linear-gradient(120deg, rgba(7, 19, 59, 0.97), rgba(3, 9, 31, 0.98)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 4px);
  border: 2px solid var(--yellow);
  box-shadow: 0 0 0 5px rgba(11, 31, 93, 0.95), 0 1.25rem 4rem rgba(0, 0, 0, 0.72);
  display: grid;
  gap: clamp(0.5rem, 3vw, 2rem);
  grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 0.9fr);
  min-height: min(72svh, 42rem);
  padding: clamp(1rem, 4vw, 2.5rem);
  position: relative;
}

.player-dialog__close {
  background: var(--yellow);
  border: 0;
  color: var(--blue);
  cursor: pointer;
  font: 2rem/0.8 "Courier New", Courier, monospace;
  height: 2rem;
  padding: 0 0 0.2rem;
  position: absolute;
  right: 0.65rem;
  top: 0.65rem;
  width: 2rem;
}

.player-dialog__close:hover, .player-dialog__close:focus-visible { background: var(--ink); outline: 2px solid var(--yellow); outline-offset: 2px; }

.player-dialog__portrait-wrap { align-items: end; display: flex; justify-content: center; min-height: 0; }

.player-dialog__portrait {
  filter: drop-shadow(0.55rem 0.75rem 0.45rem rgba(0, 0, 0, 0.58));
  image-rendering: pixelated;
  max-height: min(62svh, 36rem);
  max-width: 100%;
  object-fit: contain;
}

.player-dialog__info { align-self: center; padding-right: 1.5rem; }
.player-dialog__eyebrow, .player-dialog__phase { color: var(--yellow); font-size: clamp(0.65rem, 1.5vw, 0.84rem); letter-spacing: 0.11em; line-height: 1.55; }
.player-dialog__eyebrow { margin: 0 0 0.65rem; }
.player-dialog h2 { font-size: clamp(2.5rem, 7vw, 5rem); letter-spacing: -0.08em; line-height: 0.88; margin: 0; text-shadow: 0.08em 0.08em 0 #0b1f5d; }
.player-dialog__xp { border-bottom: 2px solid rgba(255, 211, 100, 0.7); border-top: 2px solid rgba(255, 211, 100, 0.7); color: var(--ink); font-size: clamp(1.35rem, 3vw, 2rem); margin: 1.25rem 0; padding: 0.65rem 0; }
.player-dialog__xp span { color: var(--yellow); font-size: 1.5em; }
.player-dialog__phase { color: rgba(248, 243, 218, 0.72); margin: 0; }

@keyframes player-card-in {
  from { opacity: 0; transform: scale(0.94) translateY(0.8rem); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes standby-flicker {
  0%, 38%, 100% { opacity: 1; }
  39%, 72% { opacity: 0.68; }
}

@keyframes terminal-cursor {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@keyframes player-idle {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(var(--idle-lift)) rotate(var(--idle-tilt)); }
}

/* På svært brede skjermer beholdes baneformasjonen som én bevisst komponert scene. */
@media (min-width: 1921px) {
  .formation {
    bottom: 0;
    height: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 1900px;
  }

  .hero__copy { left: max(4rem, calc(50% - 950px)); }
  .corner-copy { left: max(4rem, calc(50% - 920px)); }
}

@media (max-width: 680px) {
  .hero { background-position: 56% center; }
  .hero__copy { top: 1.75rem; }
  h1 { font-size: clamp(2.4rem, 12.8vw, 3.4rem); }
  .hero__status { margin-top: 1rem; }
  .formation { transform: scale(1); transform-origin: 50% 100%; }
  .player--front { bottom: 2%; width: calc(var(--size) * 0.75); }
  .corner-copy { bottom: 1.3rem; left: 1rem; font-size: 0.66rem; max-width: 14rem; }
  .player-dialog { max-width: min(94vw, 27rem); }
  .player-dialog__panel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 2.25rem 1.25rem 1.25rem; }
  .player-dialog__portrait { max-height: min(48svh, 26rem); }
  .player-dialog__info { padding-right: 0; text-align: center; }
  .player-dialog__xp { margin: 0.85rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .player, .player-dialog__panel, .corner-copy span, .corner-copy span::after { animation: none; }
  .player img { transition: none; }
}