/* ==========================================================================
   Crash Galaxy — sandbox pages.
   A game running in an iframe, its language menu, and the disclosure that says
   plainly what a visitor is looking at. Loaded only by sandbox-*.html.
   ========================================================================== */

.sandbox {
  padding: 22px 0 44px;
}

/* ------------------------------------------------------------------ header */

.sandbox__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 14px;
}

.sandbox__title {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
}

.sandbox__title small {
  display: block;
  font-family: var(--f-data);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

.sandbox__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ------------------------------------------------------------- demo notice */

/* Says what this is before anyone spins it. Not a decorative banner: it is the
   difference between a demo and something a visitor could mistake for a real
   wager, so it is never collapsed behind a toggle and never colour alone. */
.sandbox__notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, var(--brand));
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 11px 14px;
  margin: 0 0 14px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.sandbox__notice b { color: var(--ink); }

.sandbox__notice svg { flex: none; margin-top: 2px; color: var(--accent, var(--brand)); }

/* --------------------------------------------------------------- the stage */

.sandbox__stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #05070d;              /* the games letterbox onto near-black */
  box-shadow: var(--shadow);
  /* Slot games are landscape-first; this keeps the frame the shape the game
     expects instead of letting it stretch to whatever the column happens to
     be. Height is capped so the stage never outgrows a laptop screen. */
  aspect-ratio: 16 / 10;
  max-height: min(76vh, 760px);
  width: 100%;
}

.sandbox__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Shown until the visitor asks for the game: a slot frontend is tens of
   megabytes and several audio contexts, and loading six of them because
   someone browsed past is neither fast nor polite. */
.sandbox__gate {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(5, 7, 13, 0.35), rgba(5, 7, 13, 0.85)),
    var(--gate-art, #05070d) center / cover no-repeat;
  color: #fff;
}

.sandbox__gate h2 { margin: 0; font-size: 1.1rem; color: #fff; }

.sandbox__gate p {
  margin: 0;
  max-width: 46ch;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.sandbox__gate .cta { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }

.sandbox__gate--missing {
  background: var(--surface-2);
  color: var(--ink);
}

.sandbox__gate--missing h2 { color: var(--ink); }
.sandbox__gate--missing p { color: var(--ink-2); }

.sandbox__gate--missing code {
  font-family: var(--f-data);
  font-size: 0.78rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 7px;
  display: inline-block;
}

/* ------------------------------------------------- demo credits used up */

/* Sits over the frame when the play balance can no longer cover a spin. It
   covers the game deliberately: a spin button that cannot answer is worse than
   an honest dead end with somewhere to go. Dismissable, because someone may
   want to keep looking at the board. */
.sandbox__spent {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  /* `safe center` and not plain `center`. The stage clips its overflow, and
     this panel carries a heading, two paragraphs, the site picker and a block
     of fine print — more than fits a 478px portrait stage on a phone. Centred
     content that outgrows its box overflows BOTH edges, so the top of it is cut
     off by the clip and cannot be scrolled to: the visitor loses the headline
     and the explanation and is left looking at fine print. `safe` pins it to
     the start once it no longer fits, and the panel scrolls instead. */
  align-content: safe center;
  justify-content: center;
  justify-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 12px;
  text-align: center;
  padding: 26px 24px;
  background: rgba(6, 9, 16, 0.93);
  color: #fff;
}

.sandbox__spent[hidden] { display: none; }

.sandbox__spent h2 {
  margin: 0;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  color: #fff;
}

.sandbox__spent h2:focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: 4px; }

.sandbox__spent p {
  margin: 0;
  max-width: 52ch;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.sandbox__spentcta { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 4px; }

/* The ghost CTA is drawn for a light page; on this dark panel it needs its own
   border and ink or it disappears into the backdrop. */
.sandbox__spent .cta--ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  background: transparent;
}

.sandbox__spent .cta--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

.sandbox__spentfine {
  font-size: 0.72rem !important;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6) !important;
  max-width: 60ch;
}

.sandbox__spentclose {
  font-family: var(--f-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  background: none;
  border: 0;
  padding: 8px 10px;
  min-height: 38px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sandbox__spentclose:hover { color: #fff; }

/* ------------------------------------------------------------- language bar */

.sandbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.sandbox__barlabel {
  font-family: var(--f-data);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}

.langs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.langs button {
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  padding: 7px 10px;
  min-height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}

.langs button:hover { color: var(--ink); border-color: var(--line-2); }

/* Chosen language is filled and bolder, not merely tinted — the same rule the
   screenshot tabs follow, so colour is never the only signal. */
.langs button[aria-pressed="true"] {
  color: var(--brand-dark);
  border-color: var(--brand);
  background: var(--brand-soft);
  font-weight: 600;
}

.langs button abbr { text-decoration: none; border: 0; }

.sandbox__note {
  font-family: var(--f-data);
  font-size: 0.71rem;
  color: var(--muted);
  margin: 8px 0 0;
  flex-basis: 100%;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 720px) {
  .sandbox { padding: 14px 0 30px; }

  /* A slot frontend inside a 390px-wide iframe is unreadable — the game's own
     mobile layout wants the whole viewport. Below this width the inline stage
     becomes a poster with a fullscreen launch instead of a squeezed embed. */
  /* PORTRAIT on a phone, and not a squeezed landscape one.
     These builds are launched with device=mobile and lay themselves out to the
     frame they are given, so a 4/3 stage on a 390px screen handed them a 269px
     strip to put a whole slot machine in. Turning the stage upright gives the
     game roughly twice the height and the shape its own mobile layout was drawn
     for. Capped against the viewport so the language bar below stays reachable
     without a scroll on a short phone. */
  .sandbox__stage { aspect-ratio: 3 / 4; max-height: 72vh; }

  .sandbox__head { align-items: flex-start; }
  .sandbox__actions { width: 100%; }
  .sandbox__actions .cta { flex: 1 1 auto; text-align: center; }

  .sandbox__bar { padding: 10px; }
  .langs button { min-height: 44px; padding: 11px 13px; }  /* thumb-sized */
}

/* Small print floor on phones — see the phone-ergonomics block in site.css. */
@media (max-width: 720px) {
  .sandbox__barlabel,
  .sandbox__note { font-size: 0.78rem; }
  .sandbox__spentfine { font-size: 0.78rem !important; }
  .sandbox__spentclose { min-height: 44px; }
  .sandbox__title small { font-size: 0.76rem; }
}


/* ------------------------------------------------------------- popout player

   Stake offers a game in a small and a large windowed player beside the page
   itself; these are ours. popout-<slug>.html is that window: the same demo,
   the same wallet, none of the site around it.

   The window is sized by window.open, so the page's job is only to fill it —
   no aspect ratio here, or the player would letterbox inside a window that was
   opened to fit it. */
.sandbox--popout {
  /* The base .sandbox padding is page furniture; in a window sized to the
     player it is just a black band under the bar. */
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100dvh;
  gap: 0;
}
body.popout { margin: 0; background: #05070d; overflow: hidden; }
.sandbox--popout .sandbox__stage {
  aspect-ratio: auto;
  max-height: none;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.popout__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
}
.popout__name { font-weight: 600; color: var(--ink); }
.popout__name b { color: var(--accent); }
.popout__fine { color: var(--ink-2); }
.popout__note { color: var(--muted); flex: 1 1 auto; min-width: 0; }

/* A narrow popout has no room for three things on one line; the disclosure is
   the one that must never be the one that wraps away. */
@media (max-width: 620px) {
  .popout__bar { flex-wrap: wrap; row-gap: 4px; }
  .popout__fine { order: 3; flex-basis: 100%; }
}

/* The three view controls sit together as one group rather than as three loose
   buttons, so it reads as "how do you want to play this" and not as three
   unrelated actions. */
.sandbox__views { display: flex; gap: 6px; flex-wrap: wrap; }

/* A popout is a desktop affordance: window.open on a phone opens a tab, which
   is not a popout and is worse than the page the visitor is already on. */
@media (max-width: 720px), (pointer: coarse) {
  .sandbox__views [data-popout] { display: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}