/* ===== BALLTRIALS (27-sep-2026) =====
   Only index.html (CH.01 gameplay) and fleet.html (the BallTrials card) load this file,
   so the other pages and their ?v= numbers stay untouched. */

/* The CRT monitor only positioned iframes (YouTube). An image or a self-hosted video
   needs the same rule, copied from `.crt-monitor iframe` in main.css. */
.crt-monitor .video-wrapper > img,
.crt-monitor .video-wrapper > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
  display: block;
}

/* The ATRAX card turns its logo into green phosphor with a filter. The BallTrials wordmark has a
   thick outline, and that filter melts it into an unreadable blob, so it keeps its own colours. */
.atrax-logo-crt img.logo-color {
  filter: drop-shadow(0 0 10px rgba(51, 255, 0, 0.28));
}

/* Play button over the gameplay clip. The video only loads when it is pressed (preload="none"). */
.bt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3; /* above the scanline layer of .video-wrapper::after (z-index 2) */
  width: 72px;
  height: 72px;
  padding: 0 0 0 4px;
  border: 1px solid var(--green);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--green);
  font-family: var(--font);
  font-size: 24px;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: var(--glow-green);
  cursor: pointer;
}

.bt-play:hover,
.bt-play:focus-visible {
  background: rgba(0, 30, 0, 0.8);
  outline: none;
}

.bt-video video {
  cursor: pointer;
}

.bt-video.playing .bt-play {
  display: none;
}

/* FLEET cards on phones (ATRAX and BallTrials). Below 768px alien.css turns .fv-body into
   display: contents, so its 20px 16px padding disappears and the title and the fields touch the
   left border. The ATRAX card already had this before BallTrials. This gives the padding back to
   those children; the button keeps its own margin from alien.css. Only fleet.html has these cards. */
@media (max-width: 768px) {
  .fv-layout .fv-title,
  .fv-layout .fv-subtitle,
  .fv-layout .fv-fields {
    padding-left: 16px;
    padding-right: 16px;
  }

  .fv-layout .fv-title {
    padding-top: 20px;
  }
}