/* Wrapper styling for an embedded CasinoVizion build.
 *
 * Scoped under .cv-* so it cannot reach the portal chrome. The game itself
 * ships its own styling inside the iframe -- nothing here can affect it, and
 * nothing in it can affect this page.
 */

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

/* The free-play notice is the most important thing on the page: it is the
 * answer to "did that just cost me anything?". */
.cv-freeplay {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.8rem;
  background: #0e1b12;
  border: 1px solid #2c5a3c;
  border-radius: 8px;
  color: #b7dcc4;
  font-size: 0.9rem;
}
.cv-freeplay .tag { margin-right: 0.4rem; }

.cv-frame-wrap {
  position: relative;
  margin-top: 0.9rem;
  border: 1px solid #2a3355;
  border-radius: 10px;
  overflow: hidden;
  background: #05070f;
}

/* A 16:10 box that still works on a phone. The games fill whatever they are
 * given (`embed=1` drops their own chrome), so the wrapper only has to give
 * them a sensible shape. */
.cv-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 420px;
  border: 0;
}

.cv-frame { aspect-ratio: auto; 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, because Swamp-Man sizes its maze from the height it is given and
   a 3:4 box on a phone leaves it a postage stamp under the d-pad. 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: #05070f;
  }
  .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: #8fa3cc; font-size: 0.9rem; }
.cv-about summary { cursor: pointer; color: #b9c8ea; }
.cv-about ul { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.cv-about li { margin-bottom: 0.4rem; }

/* --- paid entry (Swamp-Man) ---------------------------------------------- */
/* The fee notice replaces the free-play notice. It is the answer to "what did
   that just cost me?", so it stays prominent rather than becoming fine print. */
.cv-fee {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.8rem;
  background: #1a1626;
  border: 1px solid #4a3a6a;
  border-radius: 8px;
  color: #cbbfe4;
  font-size: 0.9rem;
}

/* 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: #b9c8ea; }

.cv-play {
  padding: 0.7rem 2.2rem;
  background: #7ef9a2;
  color: #06210f;
  border: none;
  border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 1rem;
  cursor: pointer;
}
.cv-play:hover:not(:disabled) { background: #9dffbb; }
.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: #0b1020;
  border: 1px solid #232c4a;
  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: #6f82ad;
}
.cv-meter-value {
  display: block; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.15rem; color: #eaf2ff;
}

/* --- 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%; }
}