/*
  Dope Dumb Games device shell. Solid colors only.

  The shell builds everything inside the element it is mounted on (.ddg-shell).
  That element needs a definite size from the page (for example a panel with a height);
  the device is fitted inside it, with the control row underneath (a plain window, frame:
  'window', has its controls in a column on its right instead).

  Colors can be changed from the page through these variables, set on any ancestor:
    --ddg-device          the device body and side buttons
    --ddg-screen          the screen before the game draws
    --ddg-accent          the PLAY button
    --ddg-accent-ink      the PLAY button text
    --ddg-ctl-bg          control row buttons
    --ddg-ctl-hover       control row buttons on hover
    --ddg-ctl-fg          control row icons
    --ddg-ctl-on-bg       the selected half of the device switch
    --ddg-ctl-on-fg       its icon
    --ddg-focus           keyboard focus ring on the control row (on the page's panel)
    --ddg-screen-focus    focus ring around the screen (on the device body)
    --ddg-play-focus      focus ring around PLAY (on the dark screen)
*/

.ddg-shell {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  min-height: 420px;
  padding: 0;
  color: #FFFFFF;
  font-family: var(--ddg-font-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  -webkit-tap-highlight-color: transparent;
}
.ddg-shell *,
.ddg-shell *::before,
.ddg-shell *::after { box-sizing: border-box; }

/* Device body. Size, corner radius and button positions are set by shell.js. */
.ddg-device {
  position: relative;
  flex: none;
  background: var(--ddg-device, #7C3AED);
}

.ddg-key {
  position: absolute;
  background: var(--ddg-device, #7C3AED);
  pointer-events: none;
}

/* Screen: the only part that takes clicks and taps for the game. */
.ddg-screen {
  position: absolute;
  overflow: hidden;
  background: var(--ddg-screen, #0D0F14);
  container-type: size;
  cursor: default;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}
/* A ring only when the screen was reached with Tab: flapping with Space shouldn't draw one. */
.ddg-screen.is-keyfocus {
  outline: 3px solid var(--ddg-screen-focus, #F7FF4D);
  outline-offset: 3px;
}

.ddg-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.ddg-canvas.is-hidden {
  opacity: 0;
  transition-duration: 0.12s;
}
/* The studio intro hands over under its own fade through black: the game shows at once. */
.ddg-canvas.is-instant { transition: none; }

/* The studio intro (shell.js draws it), under the PLAY card while that fades away */
.ddg-intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ddg-intro[hidden] { display: none; }

/* SKIP, bottom right, 16 points inside the device's safe area (IntroScene's pill: 72 x 32,
   white at 14% with a 45% outline, Avenir Next Medium 14). --ddg-pt is CSS px per point. */
.ddg-skip {
  position: absolute;
  right: var(--ddg-safe-right, env(safe-area-inset-right, 0px));
  bottom: var(--ddg-safe-bottom, env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: grid;
  place-items: center;
  width: calc(72px * var(--ddg-pt, 1));
  height: calc(32px * var(--ddg-pt, 1));
  margin: 0 calc(16px * var(--ddg-pt, 1)) calc(16px * var(--ddg-pt, 1)) 0;
  padding: 0;
  border: max(1px, calc(1px * var(--ddg-pt, 1))) solid rgba(255, 255, 255, 0.45);
  border-radius: calc(16px * var(--ddg-pt, 1));
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font: 500 calc(14px * var(--ddg-pt, 1)) / 1 "Avenir Next", "AvenirNext-Medium", var(--ddg-font-body, "Inter"), system-ui, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity 0.1s linear;
}
.ddg-skip[hidden] { display: none; }
/* A bigger target than the pill (iOS: 96 x 56). */
.ddg-skip::before {
  content: "";
  position: absolute;
  inset: calc(-12px * var(--ddg-pt, 1));
}
.ddg-skip:hover { background: rgba(255, 255, 255, 0.24); }
.ddg-skip:focus-visible {
  outline: 3px solid var(--ddg-play-focus, #FFFFFF);
  outline-offset: 3px;
}
/* SKIP came before the game was ready: dimmed while it finishes loading. */
.ddg-skip.is-waiting { opacity: 0.4; cursor: progress; }

/* While the screen changes shape, shell.js scales and places the live canvas and the layers
   for the last frame (snapshot, caps, feathers) and dissolves one frame into the other. */
.ddg-screen.is-blending .ddg-canvas {
  transform-origin: 0 0;
  transition: none;
}
.ddg-snap {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform-origin: 0 0;
  will-change: transform, opacity;
  pointer-events: none;
}
.ddg-snap[hidden] { display: none; }

/* Click to play card, inside the screen. --ddg-u is the card's pixel: 1px except on a screen
   too small for the card (see the @supports block after .ddg-card-note). */
.ddg-card {
  --ddg-u: 1px;
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  gap: clamp(10px, 4cqmin, 28px);
  padding: calc(24 * var(--ddg-u));
  background: var(--ddg-screen, #0D0F14);
  color: #FFFFFF;
  text-align: center;
  transition: opacity 0.25s ease;
}
.ddg-card[hidden] { display: none; }
.ddg-card.is-leaving { opacity: 0; pointer-events: none; }

.ddg-card-icon {
  display: block;
  width: 96px;
  width: clamp(64px, 26cqmin, 136px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 22.37%;
  background: #161922;
}

.ddg-card-title {
  margin: 0;
  font: 400 44px / 0.9 var(--ddg-font-display, "Bebas Neue", "Arial Narrow", Impact, sans-serif);
  font-size: clamp(32px, 12cqmin, 76px);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.ddg-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-width: clamp(140px, 48cqmin, 280px);
  min-height: 56px;
  margin-top: calc(4 * var(--ddg-u));
  padding: 0.28em 1.1em 0.18em;
  border: 0;
  border-radius: calc(14 * var(--ddg-u));
  background: var(--ddg-accent, #F7FF4D);
  color: var(--ddg-accent-ink, #0D0F14);
  font: 400 36px / 1 var(--ddg-font-display, "Bebas Neue", "Arial Narrow", Impact, sans-serif);
  font-size: clamp(30px, 11cqmin, 60px);
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}
.ddg-play:hover { background: #FFFFFF; }
.ddg-play:disabled { cursor: progress; background: var(--ddg-accent, #F7FF4D); }
.ddg-play:focus-visible {
  outline: 3px solid var(--ddg-play-focus, #FFFFFF);
  outline-offset: 4px;
}

.ddg-card-note {
  min-height: 1.4em;
  margin: 0;
  color: #A7ADBB;
  font-size: calc(14 * var(--ddg-u));
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}
.ddg-card-note:empty { display: none; }

/* The card always fits inside the screen. At its smallest (the lower limits above) it is 173 px
   tall and 140 wide (LOADING 151, TRY AGAIN 170). On a screen under 190 tall or 170 wide (260
   and 184 while a note shows), such as the sideways phone in a narrow desktop window, --ddg-u
   drops below 1px and those limits shrink with it, so the whole card scales down with the
   screen. Normal sizes are unchanged. PLAY stays 44 px tall until even that won't fit (a screen
   under about 115 px). */
@supports (width: 1cqh) {
  .ddg-card {
    --ddg-u: min(1px, calc(100cqh / 190), calc(100cqw / 170));
    gap: clamp(calc(10 * var(--ddg-u)), 4cqmin, 28px);
  }
  .ddg-card:has(> .ddg-card-note:not(:empty)) {
    --ddg-u: min(1px, calc(100cqh / 260), calc(100cqw / 184));
  }
  .ddg-card-icon { width: clamp(calc(64 * var(--ddg-u)), 26cqmin, 136px); }
  .ddg-card-title { font-size: clamp(calc(32 * var(--ddg-u)), 12cqmin, 76px); }
  .ddg-play {
    min-width: clamp(calc(140 * var(--ddg-u)), 48cqmin, 280px);
    min-height: min(max(44px, calc(56 * var(--ddg-u))), 38cqh);
    font-size: clamp(calc(30 * var(--ddg-u)), 11cqmin, 60px);
  }
}

/* Control row under the device: mute, device switch, full screen */
.ddg-controls {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 248px;
  /* Never wider than the page (a narrow desktop window): the row wraps instead. */
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 10px;
}
@media (max-width: 479px) {
  .ddg-controls { justify-content: center; }
}

.ddg-ctl,
.ddg-pill button {
  display: inline-grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ddg-ctl-fg, #FFFFFF);
  font: inherit;
  cursor: pointer;
}
.ddg-ctl {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ddg-ctl-bg, #161922);
}
.ddg-ctl:hover { background: var(--ddg-ctl-hover, #262A36); }
.ddg-ctl svg,
.ddg-pill svg {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.ddg-ctl[hidden] { display: none; }

.ddg-pill {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ddg-ctl-bg, #161922);
}
.ddg-pill button {
  width: 56px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
}
.ddg-pill button:hover { background: var(--ddg-ctl-hover, #262A36); }
.ddg-pill button[aria-pressed="true"] {
  background: var(--ddg-ctl-on-bg, #7C3AED);
  color: var(--ddg-ctl-on-fg, #FFFFFF);
  cursor: default;
}
.ddg-pill[hidden] { display: none; }

/* Quality slider (opt in): Performance on the left, Quality on the right, three detents */
.ddg-quality {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ddg-ctl-bg, #161922);
  color: var(--ddg-ctl-fg, #FFFFFF);
}
.ddg-quality svg {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.ddg-quality-track {
  position: relative;
  display: block;
  width: 92px;
  height: 40px;
}
/* The rail and its three detents, under the transparent range input */
.ddg-quality-track::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 9px;
  right: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--ddg-ctl-hover, #262A36);
}
.ddg-quality-tick {
  position: absolute;
  top: 16px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #3A4050;
  pointer-events: none;
}
.ddg-quality-tick:nth-child(1) { left: 9px; }
.ddg-quality-tick:nth-child(2) { left: 50%; }
.ddg-quality-tick:nth-child(3) { left: calc(100% - 9px); }
.ddg-quality-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ddg-quality-range::-webkit-slider-runnable-track {
  height: 40px;
  border: 0;
  background: transparent;
}
.ddg-quality-range::-moz-range-track {
  height: 40px;
  border: 0;
  background: transparent;
}
.ddg-quality-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: 11px;
  border: 0;
  border-radius: 50%;
  background: var(--ddg-ctl-on-bg, #7C3AED);
  box-shadow: 0 0 0 3px var(--ddg-ctl-bg, #161922);
  -webkit-appearance: none;
  appearance: none;
}
.ddg-quality-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--ddg-ctl-on-bg, #7C3AED);
  box-shadow: 0 0 0 3px var(--ddg-ctl-bg, #161922);
}
.ddg-quality-range:hover::-webkit-slider-thumb { background: #8F55F5; }
.ddg-quality-range:hover::-moz-range-thumb { background: #8F55F5; }
.ddg-quality-range:focus { outline: none; }
.ddg-quality-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ddg-focus, #F7FF4D); }
.ddg-quality-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--ddg-focus, #F7FF4D); }

.ddg-ctl:focus-visible,
.ddg-pill button:focus-visible,
.ddg-exit:focus-visible {
  outline: 3px solid var(--ddg-focus, #F7FF4D);
  outline-offset: 3px;
}
/* The switch's buttons sit on the control color: the ring goes inside them, in the icons' color.
   The slider's ring goes round the whole slider, like the round buttons'. */
.ddg-pill button:focus-visible {
  outline: 3px solid var(--ddg-ctl-fg, #FFFFFF);
  outline-offset: -5px;
}
.ddg-quality:has(.ddg-quality-range:focus-visible) {
  outline: 3px solid var(--ddg-focus, #F7FF4D);
  outline-offset: 3px;
}

/* Back to the page, only while the game takes over a phone or tablet screen */
.ddg-exit {
  position: absolute;
  top: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  z-index: 4;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #0D0F14;
  color: #FFFFFF;
  cursor: pointer;
}
.ddg-exit:focus-visible { outline-color: #F7FF4D; }
.ddg-exit svg { display: block; width: 22px; height: 22px; pointer-events: none; }

/* Screen reader announcements (host.announce): read out, never shown */
.ddg-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Turn the phone upright */
.ddg-rotate {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: #0D0F14;
  color: #FFFFFF;
  text-align: center;
  font-weight: 700;
}
.ddg-rotate[hidden] { display: none; }
.ddg-rotate svg { width: 56px; height: 56px; }

/* Turn the phone (or tablet) on its side: a game that plays sideways only, held upright */
.ddg-rotate--sideways { gap: 12px; }
.ddg-rotate--sideways svg {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
  color: var(--ddg-device, #7C3AED);
  overflow: visible;
}
.ddg-turn-phone {
  transform-box: view-box;
  transform-origin: 12px 12px;
  animation: ddg-turn 2.4s ease-in-out infinite;
}
.ddg-turn-arrow { color: #FFFFFF; }
@keyframes ddg-turn {
  0%, 18% { transform: rotate(0deg); }
  50%, 82% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
.ddg-rotate-title {
  margin: 0;
  font: 400 44px / 0.95 var(--ddg-font-display, "Bebas Neue", "Arial Narrow", Impact, sans-serif);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ddg-rotate-line {
  margin: 0;
  color: #A7ADBB;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}

/* A plain game window (frame: 'window'): no device body or side buttons. On a computer window
   761 px or wider the controls stand in a column on the window's right, always in view; narrower,
   they stay in the row underneath (shell.js measures whichever the CSS chose). */
.ddg-shell--window .ddg-device { background: transparent; }
@media (min-width: 761px) {
  .ddg-shell--window.ddg-shell--framed { flex-direction: row; }
  .ddg-shell--window.ddg-shell--framed .ddg-controls {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    max-width: none;
  }
  .ddg-shell--window.ddg-shell--framed .ddg-pill { flex-direction: column; }
  .ddg-shell--window.ddg-shell--framed .ddg-pill button { width: 40px; height: 48px; }
  /* The quality slider stands up: Quality at the top, Performance at the bottom */
  .ddg-shell--window.ddg-shell--framed .ddg-quality {
    flex-direction: column-reverse;
    width: 48px;
    height: auto;
    padding: 12px 0;
  }
  .ddg-shell--window.ddg-shell--framed .ddg-quality-track { width: 40px; height: 84px; }
  .ddg-shell--window.ddg-shell--framed .ddg-quality-track::before {
    top: 9px;
    bottom: 9px;
    left: 18px;
    right: auto;
    width: 4px;
    height: auto;
  }
  .ddg-shell--window.ddg-shell--framed .ddg-quality-tick { left: 16px; margin-top: -4px; margin-left: 0; }
  .ddg-shell--window.ddg-shell--framed .ddg-quality-tick:nth-child(1) { top: calc(100% - 9px); left: 16px; }
  .ddg-shell--window.ddg-shell--framed .ddg-quality-tick:nth-child(2) { top: 50%; left: 16px; }
  .ddg-shell--window.ddg-shell--framed .ddg-quality-tick:nth-child(3) { top: 9px; left: 16px; }
  /* The ordinary horizontal slider turned a quarter: value 1 (Quality) at the top in every browser */
  .ddg-shell--window.ddg-shell--framed .ddg-quality-range {
    inset: auto;
    left: -22px;
    top: 22px;
    width: 84px;
    height: 40px;
    transform: rotate(-90deg);
  }
}

/* Full screen on a computer: the device grows to fill the monitor, frame and controls stay */
.ddg-shell.is-fullscreen {
  --ddg-ctl-bg: #161922;
  --ddg-ctl-hover: #262A36;
  --ddg-ctl-fg: #FFFFFF;
  --ddg-ctl-on-bg: #7C3AED;
  --ddg-ctl-on-fg: #FFFFFF;
  --ddg-focus: #F7FF4D;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 24px;
  background: #0D0F14;
}
.ddg-shell::backdrop { background: #0D0F14; }

/* Phones and tablets: no frame. Before PLAY the card sits in the page, then the game takes over the screen. */
.ddg-shell.ddg-shell--touch { min-height: 320px; gap: 16px; }
.ddg-shell--touch .ddg-device {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background: transparent;
}
.ddg-shell--touch .ddg-key { display: none; }
.ddg-shell--touch .ddg-screen {
  inset: 0;
  border-radius: 20px;
}
.ddg-shell--touch .ddg-pill,
.ddg-shell--touch .ddg-quality,
.ddg-shell--touch .ddg-fs { display: none; }
.ddg-shell--touch .ddg-controls {
  justify-content: center;
  min-width: 0;
}

.ddg-shell.is-takeover {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
  background: #0D0F14;
}
.ddg-shell.is-takeover .ddg-screen { border-radius: 0; }
.ddg-shell.is-takeover .ddg-controls { display: none; }
.ddg-shell.is-takeover.is-idle .ddg-exit { display: grid; }

html.ddg-noscroll,
html.ddg-noscroll body {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
  .ddg-canvas,
  .ddg-canvas.is-hidden,
  .ddg-card { transition-duration: 0.01s; }
  /* The phone shows already turned, no animation. */
  .ddg-turn-phone { animation: none; transform: rotate(-90deg); }
}