/* Game pages — /game/<id>/ (built from templates/game.html) */
@font-face {
  font-family: "Lateral";
  src: url("/assets/fonts/Lateral-StandardRegular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;

}

/* Ruder Plakat is a trial licence and subset to digits + dashes (score only). */
@font-face {
  font-family: "Ruder Plakat";
  src: url("/assets/fonts/RuderPlakat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #000;
  --ink: #fff;
  --font-sans: "Lateral", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-score: "Ruder Plakat", "Impact", "Arial Narrow", sans-serif;

  --gutter: 24px;
  /* Figma sizes at 1024px tall; scale down on shorter screens so everything fits. */
  --score-size: clamp(96px, 15.625vh, 160px);
  --text-size: clamp(24px, 3.9vh, 40px);
  --details-gap: 24px;
}

@media (max-width: 767px) {
  :root {
    --score-size: 128px;
    --text-size: 28px;
    --details-gap: 32px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Left column: pinned top-left, details pinned to the bottom. */
.game {
  display: flex;
  flex-direction: column;
  width: 50%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 20px var(--gutter) var(--gutter);
}

/* Right column: full-height photo. */
.photo {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100vh;
  height: 100lvh;
  background: #1a1a1a;
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 28px;
  margin-bottom: 22px;
}

.logo img {
  display: block;
}

.join {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.join img {
  display: block;
  flex: none;
}

/* Lateral's caps sit ~0.1em above centre in the line box; nudge so the text centres on the icon. */
.join span {
  position: relative;
  top: 0.1em;
}

.join:hover {
  background: rgba(255, 255, 255, 0.28);
}

.video,
.video-player {
  display: block;
  width: 100%;
  aspect-ratio: 672 / 354;
  border: 0;
  background: #111;
}

/* Desktop: the video gives up height first so the details never fall off the bottom.
   Height left for it = viewport − header (70) − score line − outcome line − gap − 2 detail lines − bottom gutter. */
@media (min-width: 768px) {
  .video {
    width: min(100%, max(320px, (100vh - 70px - var(--score-size) * 1.237 - var(--text-size) * 4.2 - var(--details-gap) - var(--gutter)) * 672 / 354));
  }
}

.video {
  position: relative;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.video>img:not(.play) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video .play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}

.video:hover .play {
  transform: translate(-50%, -50%) scale(1.06);
}

.video.is-pending {
  cursor: default;
}

.video.is-pending .play {
  opacity: 0.4;
}

.video.is-pending:hover .play {
  transform: translate(-50%, -50%);
}

/* Lightbox player */
.has-lightbox {
  overflow: hidden;
}

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.94);
  color: var(--ink);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.lightbox video {
  display: block;
  width: min(100vw - var(--gutter) * 2, (100dvh - 120px) * 16 / 9);
  aspect-ratio: 16 / 9;
  background: #000;
}

.lightbox-status {
  position: absolute;
  bottom: 24px;
  left: 50%;
  margin: 0;
  padding: 8px 12px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--ink);
  font-size: 14px;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: var(--gutter);
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: var(--ink);
  font: 14px/1.4 var(--font-sans);
  cursor: pointer;
}

/* Same optical nudge as .join: centre Lateral's caps in the button. */
.lightbox-close span {
  position: relative;
  top: 0.1em;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* "Powered by Pitchside", top centre, on the Close button's line. */
.lightbox-brand {
  position: absolute;
  top: 20px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.lightbox-brand span {
  position: relative;
  top: 0.1em;
}

.lightbox-brand img {
  display: block;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.lightbox-brand:hover {
  color: var(--ink);
}

.lightbox-brand:hover img {
  opacity: 1;
}

.lightbox-close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

:is(.join, .logo, .video):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.result {
  margin: 0;
  font-weight: 400;
}

.score {
  display: block;
  font-family: var(--font-score);
  font-size: var(--score-size);
  line-height: normal;
  letter-spacing: calc(var(--score-size) * 0.075);
}

.outcome {
  display: flex;
  align-items: baseline;
  gap: calc(var(--text-size) * 0.175);
  /* Figma sets the outcome line 9.7px into the score's line box at 160px. */
  margin-top: calc(var(--score-size) * -0.0606);
  font-size: var(--text-size);
  line-height: 1.4;
}

/* Winner tag: 1.05em band centred on the letters (cap top to baseline), not the line box. */
.team {
  padding: 0 0.07em;
  color: var(--team-ink, #000);
  background: linear-gradient(var(--team-bg, #fff), var(--team-bg, #fff)) 0 0.07em / 100% 1.05em no-repeat;
}

.details {
  margin: auto 0 0;
  padding-top: var(--details-gap);
  font-size: var(--text-size);
  line-height: 1.4;
}

/* Mobile: single column, no side photo. */
@media (max-width: 767px) {

  /* Black panel fills the screen (svh so the phone's address bar never hides the details). */
  .game {
    width: 100%;
  }

  .details {
    padding-top: var(--details-gap);
  }

  .photo {
    display: none;
  }
}

/* Once the logo splash has fully faded (0.4s): header drops in, date + venue rise up, video and score fade in, all together.
   The layout's whole-page fade is switched off for the game panel so these run on their own. */
html.has-splash body > main.game { opacity: 1; }
html.has-splash .game .game-header { opacity: 0; transform: translateY(-16px); }
html.has-splash .game .details { opacity: 0; transform: translateY(16px); }
html.has-splash .game :is(.video, .result) { opacity: 0; }
html.splash-out .game :is(.game-header, .details, .video, .result) {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease 0.4s, transform 0.7s cubic-bezier(0.22, 0.8, 0.45, 1) 0.4s;
}