/* Wrapper styling for a bundled raid-runner build (Capture Maduro, Capture Bin Laden).
 *
 * Scoped under .cv-* so it cannot reach the portal chrome, and built from qlx.css tokens
 * (--panel-2, --line, --accent, --muted) so the page reads as the portal, not as a
 * third-party embed. The game ships its own styling inside the iframe.
 */

.cv-head { margin-bottom: 0.9rem; }
.cv-head h1 { margin: 0 0 0.2rem; font-size: clamp(1.2rem, 3.5vw, 1.7rem); }

/* The fee notice is the answer to "what did that just cost me?", so it stays prominent. */
.cv-fee {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.9rem;
}

.cv-frame-wrap {
  position: relative;
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}

/* The game is 16:9 plus its own HUD and sizes itself to the height it gets (embed=1). */
.cv-frame { display: block; width: 100%; border: 0; height: clamp(480px, 78vh, 860px); }
/* display:block above would otherwise beat the hidden attribute, and the
   blanked frame (white in Safari) would keep its full height after a run. */
.cv-frame[hidden] { display: none; }

@media (max-width: 600px) { .cv-frame { min-height: 480px; } }

/* Phones and tablets: while a run is in progress the frame covers the whole
   viewport so the 16:9 screen gets every pixel of width. The game's own EXIT
   button and the end of a run both bring the page back. */
@media (max-width: 1024px) {
  .cv-frame-wrap.is-playing {
    position: fixed; inset: 0; z-index: 50; margin: 0;
    border: 0; border-radius: 0; background: var(--bg);
  }
  .cv-frame-wrap.is-playing .cv-frame { height: 100%; min-height: 0; width: 100%; height: 100dvh; }
  body.cv-locked { overflow: hidden; }
}

.cv-status { margin: 0.6rem 0 0; }
.cv-actions { margin: 0.9rem 0 0; }

.cv-about { margin-top: 1rem; color: var(--muted); font-size: 0.9rem; }
.cv-about summary { cursor: pointer; color: var(--ink); }
.cv-about ul { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.cv-about li { margin-bottom: 0.4rem; }

/* The gate sits over the frame area until the entry fee has been charged.
   The frame has no src until then, so the game genuinely cannot start early. */
.cv-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem; min-height: 420px; padding: 2rem 1rem; text-align: center;
}
.cv-gate[hidden] { display: none; }
.cv-gate-text { margin: 0; color: var(--muted); }

/* Same shape as the portal's .btn-primary, one size up: it is the page's one action. */
.cv-play {
  padding: 0.8rem 2.4rem;
  background: var(--accent);
  color: #10131a;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.cv-play:hover:not(:disabled) { filter: brightness(1.08); }
.cv-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cv-play:disabled { opacity: 0.45; cursor: not-allowed; }

.cv-meters { display: flex; gap: 0.6rem; margin: 0.9rem 0; flex-wrap: wrap; }
.cv-meter {
  flex: 1 1 110px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  text-align: center;
}
.cv-meter-label {
  display: block; font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.cv-meter-value { display: block; font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- phones -----------------------------------------------------------------
   The gate only needs room for its line and PLAY, so on a phone it gives up
   its tall placeholder and PLAY sits above the fold. While a run plays the
   frame covers the screen (above); on a phone with a notch it keeps clear of
   the cut-outs. */
.cv-play { min-height: 44px; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .cv-head { margin-bottom: 0.4rem; }
  .cv-meters { margin: 0.6rem 0; }
  .cv-frame-wrap { margin-top: 0.6rem; }
  .cv-gate { min-height: 0; padding: 1.25rem 1rem; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .cv-head > .muted { display: none; }
  .cv-fee { margin-top: 0.4rem; padding: 0.4rem 0.7rem; }
  .cv-meter { padding: 0.2rem 0.5rem; }
  .cv-meter-value { font-size: 1rem; }
  .cv-gate { padding: 0.8rem 1rem; gap: 0.5rem; }
}
@media (max-width: 1024px) {
  .cv-frame-wrap.is-playing {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .cv-frame-wrap.is-playing .cv-frame { height: 100%; }
}