/*
 * layout.css
 * Core page and screen layout.
 *
 * Rules:
 * - Room background is fixed and fullscreen.
 * - Room screen foreground content is constrained to the visible room image stage.
 * - Blurred fill areas around the room image do not receive gameplay/UI content.
 * - Room UI scales against --room-stage-width, not against the full viewport.
 * - Foreground content may scroll vertically inside the room stage.
 * - Horizontal scroll is never allowed.
 * - Mobile safe areas are respected.
 */

.game-root {
  position: relative;
  width: 100%;
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--color-bg-deep);
}

.game-app {
  position: relative;
  z-index: var(--z-app, var(--z-content, 10));
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}

.screen-content {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}

.game-screen {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
}

.game-screen.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.game-screen.is-exiting {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}

.screen-scroll {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100dvh;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen-inner {
  width: min(var(--content-max-width), 100%);
  max-width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    calc(var(--screen-padding-y) + var(--safe-top))
    calc(var(--screen-padding-x) + var(--safe-right))
    calc(var(--screen-padding-y) + var(--safe-bottom))
    calc(var(--screen-padding-x) + var(--safe-left));
}

/*
 * ROOM STAGE LOCK
 *
 * JS calculates the visible contained room image and exposes:
 * - --room-stage-width
 * - --room-stage-height
 * - --room-stage-offset-x
 * - --room-stage-offset-y
 *
 * Every room screen is centered inside exactly that rectangle.
 * The blurred fill around the room image remains background only.
 */
.room-screen {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

.room-screen .screen-scroll {
  width: var(--room-stage-width, min(100vw, calc(100dvh * 0.5625))) !important;
  height: var(--room-stage-height, min(100dvh, calc(100vw * 1.777777))) !important;
  min-height: 0 !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* Stage-relative UI tokens. */
  --room-stage-pad-x: clamp(10px, 4.4%, 24px);
  --room-stage-pad-y: clamp(10px, 2.2dvh, 22px);
  --room-readable-width: min(100%, 620px);
  --room-actions-width: min(100%, 420px);
  --room-control-width: min(100%, 560px);
  --room-title-size: clamp(1.35rem, calc(var(--room-stage-width, 420px) * 0.075), 2.65rem);
  --room-title-compact-size: clamp(1.25rem, calc(var(--room-stage-width, 420px) * 0.062), 2.05rem);
  --room-body-size: clamp(0.98rem, calc(var(--room-stage-width, 420px) * 0.034), 1.26rem);
  --room-button-size: clamp(1.02rem, calc(var(--room-stage-width, 420px) * 0.04), 1.38rem);
  --room-button-height: clamp(44px, calc(var(--room-stage-height, 720px) * 0.065), 58px);
  --room-box-padding: clamp(12px, calc(var(--room-stage-width, 420px) * 0.038), 24px);
}

.room-screen .screen-inner {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  padding:
    calc(var(--room-stage-pad-y) + var(--safe-top))
    calc(var(--room-stage-pad-x) + var(--safe-right))
    calc(var(--room-stage-pad-y) + var(--safe-bottom))
    calc(var(--room-stage-pad-x) + var(--safe-left)) !important;
}

.room-screen .screen-inner > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/*
 * Room-stage UI scaling.
 * These overrides intentionally beat inline widths from box styles such as
 * width: min(92vw, 620px). Viewport-based widths are wrong inside a contained
 * room stage on desktop/tablet.
 */
.room-screen .screen-title {
  width: min(100%, 11em) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  font-size: var(--room-title-size) !important;
  line-height: var(--line-height-title);
  overflow-wrap: anywhere;
}

.room-screen .screen-title--compact {
  font-size: var(--room-title-compact-size) !important;
}

.room-screen .text-box {
  width: var(--room-readable-width) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: var(--room-box-padding) !important;
  font-size: var(--room-body-size) !important;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.room-screen .text-box--story,
.room-screen .room-hub-screen .text-box,
.room-screen .room-hub-completed-screen .text-box,
.room-screen .room-intro-screen .text-box {
  width: var(--room-readable-width) !important;
  max-width: 100% !important;
}

.room-screen .screen-actions {
  width: var(--room-actions-width) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.room-screen .game-button {
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--room-button-height) !important;
  padding: clamp(9px, calc(var(--room-stage-width, 420px) * 0.026), 14px) clamp(14px, calc(var(--room-stage-width, 420px) * 0.04), 20px) !important;
  font-size: var(--room-button-size) !important;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.room-screen .quiz-form,
.room-screen .ghost-answer-form {
  width: var(--room-control-width) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.room-screen .carousel,
.room-screen .carousel-shell,
.room-screen .quiz-options,
.room-screen .drag-challenge,
.room-screen .ghost-challenge,
.room-screen .choice-grid-wrap,
.room-screen .choice-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: auto !important;
}

.room-screen .media-frame,
.room-screen img,
.room-screen svg,
.room-screen canvas {
  max-width: 100% !important;
}

.screen-inner--centered {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.screen-inner--top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-4);
}

.screen-inner--compact {
  padding-top: calc(clamp(14px, 3dvh, 28px) + var(--safe-top));
  padding-bottom: calc(clamp(14px, 3dvh, 28px) + var(--safe-bottom));
  gap: var(--space-3);
}

.screen-title {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.screen-title--compact {
  font-size: clamp(1.45rem, 6.6vw, 2.2rem);
}

.screen-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  max-width: min(420px, 100%);
  margin: 0 auto;
}

.screen-actions--row {
  flex-direction: row;
  flex-wrap: wrap;
}

.screen-actions--row > * {
  flex: 1 1 min(160px, 100%);
  min-width: 0;
}

.layer-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.prevent-horizontal-scroll {
  max-width: 100%;
  overflow-x: hidden;
}

.restart-button {
  position: fixed;
  top: calc(var(--room-stage-offset-y, 0px) + var(--safe-top) + 12px);
  right: calc(var(--room-stage-offset-x, 0px) + var(--safe-right) + 12px);
  z-index: var(--z-restart);
  display: grid;
  place-items: center;
  width: var(--restart-button-size, 48px);
  height: var(--restart-button-size, 48px);
  border: var(--border-soft);
  border-radius: var(--radius-round);
  background: rgba(10, 4, 4, 0.58);
  color: var(--color-text);
  box-shadow: var(--shadow-soft), 0 0 24px rgba(255, 174, 83, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    transform var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

.restart-button:hover,
.restart-button:focus-visible {
  transform: scale(1.04) rotate(18deg);
  border-color: rgba(255, 218, 155, 0.74);
  background: rgba(32, 10, 8, 0.72);
}

.restart-button:active {
  transform: scale(0.96) rotate(28deg);
}

.restart-button img,
.restart-button svg {
  width: 54%;
  height: 54%;
  object-fit: contain;
  pointer-events: none;
}

body.is-loading .restart-button,
body.is-final-screen .restart-button {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 360px) {
  .screen-inner {
    padding-left: calc(12px + var(--safe-left));
    padding-right: calc(12px + var(--safe-right));
  }

  .room-screen .screen-inner {
    padding-left: calc(10px + var(--safe-left)) !important;
    padding-right: calc(10px + var(--safe-right)) !important;
  }

  .screen-title {
    font-size: clamp(1.35rem, 7.2vw, 1.9rem);
  }
}

@media (min-width: 768px) {
  .screen-inner {
    width: min(var(--content-max-width), 100%);
  }

  .screen-actions {
    max-width: 460px;
  }

  .room-screen .screen-actions {
    max-width: 100% !important;
  }
}

@supports not (height: 100dvh) {
  .game-root,
  .game-app,
  .screen-content,
  .game-screen,
  .screen-scroll,
  .screen-inner {
    min-height: 100vh;
  }

  .room-screen {
    min-height: 100vh !important;
  }

  .room-screen .screen-scroll {
    width: var(--room-stage-width, min(100vw, calc(100vh * 0.5625))) !important;
    height: var(--room-stage-height, min(100vh, calc(100vw * 1.777777))) !important;
    min-height: 0 !important;
  }
}