/* MUCHroom campaign shell
   Layout shared by every campaign game: a portrait "stage" that is full-bleed on
   phones, a framed phone-sized preview on desktop, and fills its frame when
   embedded. All sizing inside the stage uses container units (cqw / cqh) so the
   UI scales identically at any size. Brand look lives in each game's style.css. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

body {
  display: grid;
  place-items: center;
  background: var(--c-page, #111);
  color: var(--c-text, #fff);
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; -webkit-user-drag: none; }

/* ------------------------------------------------------------------ stage */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  container-type: size;
  touch-action: none;
  isolation: isolate;
  background: var(--c-bg, #000);
}

.stage > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Desktop: present the game as a phone-sized frame on a branded backdrop. */
@media (min-width: 700px) and (min-height: 480px) {
  body:not(.is-embed) .stage {
    height: min(92vh, 860px);
    width: auto;
    aspect-ratio: 9 / 19;
    border-radius: 36px;
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.55), 0 40px 120px rgba(0, 0, 0, 0.55);
  }
}

/* -------------------------------------------------------- desktop backdrop */
.backdrop { display: none; }

@media (min-width: 1000px) and (min-height: 480px) {
  body:not(.is-embed) .backdrop {
    display: flex;
    position: fixed;
    inset: 0;
    padding: 40px 48px;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
    z-index: 0;
  }
  .backdrop > * { pointer-events: auto; max-width: 260px; }
  .backdrop a { color: inherit; }
  body:not(.is-embed) .stage { z-index: 1; }
}

/* ---------------------------------------------------------------- screens */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s;
  z-index: 5;
}

.stage[data-state='loading'] .screen--loading,
.stage[data-state='intro'] .screen--intro,
.stage[data-state='ended'] .screen--end {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* HUD is visible while counting down and playing. */
.hud {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 4;
  opacity: 0;
  transform: translateY(-6cqw);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  pointer-events: none;
}

.stage[data-state='countdown'] .hud,
.stage[data-state='playing'] .hud {
  opacity: 1;
  transform: none;
}

/* Staggered entrance: children with .rise animate in when their screen shows. */
.rise { opacity: 0; transform: translateY(5cqw); }

.stage[data-state='intro'] .screen--intro .rise,
.stage[data-state='ended'] .screen--end .rise {
  animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}

@keyframes rise { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ bits */
.mute {
  position: absolute;
  right: 4cqw;
  bottom: 4cqw;
  bottom: max(4cqw, env(safe-area-inset-bottom));
  width: 9.5cqw;
  height: 9.5cqw;
  border-radius: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
}
.mute:hover { opacity: 1; }
.mute:active { transform: scale(0.9); }
.mute svg { width: 48%; height: 48%; }
.mute .mute-off { display: none; }
.mute[aria-pressed='true'] .mute-on { display: none; }
.mute[aria-pressed='true'] .mute-off { display: block; }
/* Sound toggle only shows during play so it never crowds intro / end layouts. */
.stage:not([data-state='countdown']):not([data-state='playing']) .mute { display: none; }

.toast {
  position: absolute;
  left: 50%;
  bottom: 5cqw;
  transform: translate(-50%, 6cqw);
  width: max-content;
  max-width: 86cqw;
  padding: 3cqw 4.5cqw;
  border-radius: 3cqw;
  background: rgba(10, 10, 12, 0.92);
  color: #fff;
  font: 500 3.3cqw/1.35 system-ui, sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  z-index: 20;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Attract mode (landing previews): no chrome, no interaction. */
.is-attract .mute, .is-attract .demo-note, .is-attract .hint { display: none; }
.is-attract .stage { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}