/* Full-screen play, like Blooket: once a room game starts it takes the whole window edge to edge, with
   no page to scroll. A question (or chest) fills the screen with big answer tiles; moves and wait cards
   slide up over the game scene. rooms.js sets .immersive and data-stage (full | scene) on #screen-rooms,
   --mode-backdrop to the mode's painted scene and --popup-h to the pop-up's height. Loaded last. */

/* Edge to edge: break out of the app column and drop the page around the game. */
body:has(#screen-rooms.immersive) #app { width: 100vw; max-width: none; height: 100dvh; max-height: none; }
#screen-rooms.immersive { padding: 0; overflow: hidden; background: var(--mode-backdrop, none) center / cover no-repeat, #0b1220; }
#screen-rooms.immersive .rooms-container { max-width: none; height: 100%; padding: 0; }
#screen-rooms.immersive .rooms-topbar { display: none; }
#screen-rooms.immersive #room-live { display: flex; flex-direction: column; height: 100%; padding: 0; }
#screen-rooms.immersive .match-hud { position: relative; top: auto; flex-shrink: 0; margin: 0; padding-top: max(10px, env(safe-area-inset-top)); background: #0d1626f0; }

/* The game scene fills everything under the HUD. Scoreboard and feed stay on the host's screen. */
#screen-rooms.immersive .match-layout { position: relative; display: block; flex: 1; min-height: 0; }
#screen-rooms.immersive .match-side { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--popup-h, 0px); }
#screen-rooms.immersive .match-side > :is(.match-scoreboard, .live-feed, .room-topic-badge) { display: none; }
#screen-rooms.immersive .match-side > .mode-board.mm { min-height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  padding: 14px max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left)); background-color: #0b1220b3; }
#screen-rooms.immersive .match-side > .mode-companion { min-height: 100%; display: grid; place-content: center; justify-items: center; }

/* Scenes grow to fill the screen. */
#screen-rooms.immersive { --scene-h: clamp(200px, calc(100dvh - var(--popup-h, 0px) - 240px), 900px); }
#screen-rooms.immersive :is(.mm .horror-mansion, .mm .ice-mountain-scene, .mm .lava-arena) { height: var(--scene-h); }
#screen-rooms.immersive .zombie-field { height: clamp(170px, calc(var(--scene-h) * .85), 640px); }
#screen-rooms.immersive :is(.mm .creature-stage, .sprint-scene, .streak-scene, .gemrush-scene, .double-scene, .time-scene, .raid-scene, .vault-scene, .defense-scene) { min-height: clamp(150px, calc(var(--scene-h) * .75), 700px); }
#screen-rooms.immersive :is(.mm .arena-monsters, .mm .race-track) { max-height: var(--scene-h); }

/* Pop-ups (data-stage="scene"): moves, waits and knock-outs slide up over the game. */
#screen-rooms.immersive .match-main { position: absolute; z-index: 6; left: 50%; bottom: 0; translate: -50% 0; width: min(100%, 780px); max-height: 64%; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; border: 1px solid #ffffff26; border-bottom: 0;
  background: linear-gradient(#ffffff0d, #ffffff00 80px), #0f1a2cf2; box-shadow: 0 -14px 44px #000b; backdrop-filter: blur(10px); }
#screen-rooms.immersive .match-main::before { content: ''; display: block; width: 46px; height: 5px; margin: -8px auto 12px; border-radius: 3px; background: #ffffff33; }
#screen-rooms.immersive .match-main:empty { display: none; }
#screen-rooms.immersive .match-main > :first-child { margin-top: 0; }
#screen-rooms.immersive .match-main > :last-child { margin-bottom: 0; }
#screen-rooms.immersive #room-live.enter .match-main { animation: popup-in .38s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes popup-in { from { transform: translateY(70%); opacity: 0; } }

/* Questions and chests (data-stage="full") take the whole screen: question on top, four huge answer tiles below. */
#screen-rooms.immersive[data-stage="full"] .match-main { inset: 0; translate: none; width: auto; max-height: none; display: flex; flex-direction: column; gap: 14px;
  padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(#0b1220e0, #0b1220f5), var(--mode-backdrop, none) center / cover no-repeat, #0b1220; }
#screen-rooms.immersive[data-stage="full"] .match-main::before { display: none; }
#screen-rooms.immersive[data-stage="full"] #room-live.enter .match-main, #screen-rooms.immersive[data-stage="full"] .match-main { animation: none; }
#screen-rooms.immersive[data-stage="full"] .match-main > .room-question { flex: 0 0 auto; display: grid; place-items: center; min-height: 26%; margin: 0;
  padding: 18px 22px; font-size: clamp(1.35rem, 1.2vw + 1.1rem, 2.6rem); line-height: 1.3; overflow-wrap: anywhere; }
#screen-rooms.immersive[data-stage="full"] .room-answers { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 12px; }
#screen-rooms.immersive[data-stage="full"] .room-answers.answers-3 > :last-child { grid-column: 1 / -1; }
/* !important to beat the shared answer-button style in ui.css. */
#screen-rooms.immersive[data-stage="full"] .room-answer { height: 100%; min-height: 0; padding: 14px 16px 14px 58px !important; border-radius: 20px !important; font: 800 clamp(1.1rem, 1.1vw + .9rem, 2.2rem)/1.25 var(--font-body) !important; overflow-wrap: anywhere; }
#screen-rooms.immersive[data-stage="full"] .room-answer::before { left: 14px; width: 34px; height: 34px; margin-top: -17px; border-radius: 10px; font-size: 1.25rem; }
#screen-rooms.immersive[data-stage="full"] .chest-stage { flex: 1; display: grid; align-content: center; justify-items: center; margin: 0; }
#screen-rooms.immersive[data-stage="full"] :is(.boss-panel, .stage-outcome) { flex-shrink: 0; margin: 0; }

/* Laptops and monitors: moves float on the right while the scene fills the rest. */
@media (min-width: 1000px) {
  #screen-rooms.immersive[data-stage="scene"] { --popup-w: min(480px, 40vw); }
  #screen-rooms.immersive[data-stage="scene"] .match-side { padding: 0 calc(var(--popup-w) + 28px) 0 0; }
  #screen-rooms.immersive[data-stage="scene"] .match-main { left: auto; right: 24px; top: 50%; bottom: auto; translate: 0 -50%; width: var(--popup-w); max-height: calc(100% - 48px);
    padding: 20px; border-radius: 26px; border-bottom: 1px solid #ffffff26; }
  #screen-rooms.immersive[data-stage="scene"] .match-main::before { display: none; }
  #screen-rooms.immersive[data-stage="scene"] #room-live.enter .match-main { animation-name: popup-in-side; }
  #screen-rooms.immersive { --scene-h: clamp(260px, calc(100dvh - 250px), 900px); }
  #screen-rooms.immersive[data-stage="full"] .match-main { padding: 28px 40px 36px; gap: 20px; }
  @keyframes popup-in-side { from { transform: translateX(40px) scale(.94); opacity: 0; } }
}

/* HUD buttons: leave/end menu (✕) and real browser full screen (⛶). */
.hud-fullscreen { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 12px; border: 1px solid #ffffff2e; background: #ffffff12; color: #fff; font-size: 1.15rem; cursor: pointer; }
.hud-fullscreen:hover { background: #ffffff24; }
.match-hud:has(.hud-fullscreen) { grid-template-columns: auto minmax(0, 1fr) repeat(4, auto); }
.hud-fullscreen svg { width: 20px; height: 20px; }
/* Phones: the ring, time and score say it all; the "Answer!" label has no room. */
@media (max-width: 420px) { .hud-fullscreen { width: 32px; height: 32px; border-radius: 10px; } .hud-fullscreen svg { width: 17px; height: 17px; }
  .match-hud:has(.hud-fullscreen) { grid-template-columns: auto minmax(0, 1fr) repeat(3, auto); gap: 6px 8px; } .match-hud:has(.hud-fullscreen) .hud-main { display: none; } }
/* The leave/end buttons hide behind ✕ during full-screen play. */
#screen-rooms.immersive .room-leave-row { display: none; }
#screen-rooms.immersive.show-exit .room-leave-row { position: absolute; z-index: 20; top: 76px; right: 12px; display: grid; gap: 8px; margin: 0; padding: 14px; border-radius: 18px;
  background: #0f1a2cf7; border: 1px solid #ffffff2e; box-shadow: 0 14px 40px #000c; }
#screen-rooms.immersive.show-exit .room-leave-row .room-back { margin: 0; }

@media (prefers-reduced-motion: reduce) { #screen-rooms.immersive #room-live.enter .match-main { animation: none; } }