/* OUT V15 — viewport/layout stability layer.
   One geometry model across phone/tablet/desktop; gameplay rules stay unchanged. */

:root{
  --out-v15-gap:6px;
  --out-v15-board-max:760px;
}

/* Medium/compact layouts never switch board width when the RUN HUD appears. */
html.out-layout-compact .playfield,
html.out-layout-medium .playfield{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  width:100%!important;
  gap:var(--out-v15-gap)!important;
  justify-items:center!important;
  align-items:start!important;
  overflow:visible!important;
}
html.out-layout-compact .board-wrap,
html.out-layout-medium .board-wrap{
  width:min(100%,var(--out-v15-board-max))!important;
  max-width:100%!important;
  justify-self:center!important;
}
html.out-layout-compact body.out-run-active .live-stats,
html.out-layout-medium body.out-run-active .live-stats{
  display:grid!important;
  width:min(100%,var(--out-v15-board-max))!important;
  height:auto!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  gap:4px!important;
  justify-self:center!important;
}
html.out-layout-compact .stat-card,
html.out-layout-medium .stat-card{
  min-height:38px!important;
  padding:5px 6px!important;
  text-align:center!important;
}

/* Wide mode reserves the stats rail before START so the board width is identical
   before and after body.out-run-active is toggled. */
html.out-layout-wide body:not(.out-run-active) .playfield{
  grid-template-columns:minmax(0,1fr) 112px!important;
}
html.out-layout-wide body:not(.out-run-active) .live-stats{
  display:grid!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* A coarse pointer must not silently turn a tablet into the tiny phone control UI. */
html.out-layout-medium .game-header{padding-top:0!important}
html.out-layout-medium .controls.out-controls-v9 .button,
html.out-layout-medium:fullscreen .controls.out-controls-v9 .button,
html.out-layout-medium:-webkit-full-screen .controls.out-controls-v9 .button{
  min-height:46px!important;
  max-height:58px!important;
  padding:7px 5px!important;
  font-size:9px!important;
  letter-spacing:.01em!important;
}
html.out-layout-medium .controls.out-controls-v9 .rewind-copy b{font-size:8px!important}
html.out-layout-medium .controls.out-controls-v9 .rewind-copy small{font-size:6px!important}

/* Fullscreen is geometry-driven, not device-driven. */
html.out-layout-compact:fullscreen .game-shell,
html.out-layout-compact:-webkit-full-screen .game-shell{
  --fs-board:min(calc(100vw - 12px),calc(100dvh - 198px),590px)!important;
  padding:max(4px,env(safe-area-inset-top)) 6px max(4px,env(safe-area-inset-bottom))!important;
  gap:3px!important;
}
html.out-layout-medium:fullscreen .game-shell,
html.out-layout-medium:-webkit-full-screen .game-shell{
  --fs-board:min(calc(100vw - 18px),calc(100dvh - 190px),760px)!important;
  padding:max(5px,env(safe-area-inset-top)) 8px max(5px,env(safe-area-inset-bottom))!important;
  gap:4px!important;
}
html.out-layout-compact:fullscreen .playfield,
html.out-layout-compact:-webkit-full-screen .playfield,
html.out-layout-medium:fullscreen .playfield,
html.out-layout-medium:-webkit-full-screen .playfield{
  grid-template-columns:1fr!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  gap:4px!important;
  overflow:hidden!important;
}
html.out-layout-compact:fullscreen .board-wrap,
html.out-layout-compact:-webkit-full-screen .board-wrap,
html.out-layout-medium:fullscreen .board-wrap,
html.out-layout-medium:-webkit-full-screen .board-wrap{
  width:min(100%,var(--fs-board))!important;
  max-width:100%!important;
  align-self:center!important;
  justify-self:center!important;
}
html.out-layout-compact:fullscreen .live-stats,
html.out-layout-compact:-webkit-full-screen .live-stats,
html.out-layout-medium:fullscreen .live-stats,
html.out-layout-medium:-webkit-full-screen .live-stats{
  width:min(100%,var(--fs-board))!important;
  height:auto!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  gap:3px!important;
}
html.out-layout-medium:fullscreen .game-header,
html.out-layout-medium:-webkit-full-screen .game-header{
  margin:0!important;
}

/* Short viewports prioritize playable board + commands. */
html.out-layout-short:fullscreen .game-header,
html.out-layout-short:-webkit-full-screen .game-header,
html.out-layout-short:fullscreen .message-row,
html.out-layout-short:-webkit-full-screen .message-row{
  display:none!important;
}
html.out-layout-short:fullscreen .game-shell,
html.out-layout-short:-webkit-full-screen .game-shell{
  --fs-board:min(calc(100dvh - 92px),calc(100vw - 18px),700px)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  gap:3px!important;
}

/* The custom MV must never allocate multi-thousand-CSS-pixel portrait surfaces. */
html.out-layout-compact .cinema-video-shell,
html.out-layout-medium .cinema-video-shell{
  inset:0!important;
  transform:none!important;
  overflow:hidden!important;
}
@media (orientation:portrait){
  html.out-layout-compact #ytBackground,
  html.out-layout-medium #ytBackground,
  html.out-layout-compact .out-mv-pr299-v13>div,
  html.out-layout-medium .out-mv-pr299-v13>div,
  html.out-layout-compact .out-mv-pr299-v13 iframe,
  html.out-layout-medium .out-mv-pr299-v13 iframe,
  html.out-layout-compact .out-mv-unified-v13>div,
  html.out-layout-medium .out-mv-unified-v13>div,
  html.out-layout-compact .out-mv-unified-v13 iframe,
  html.out-layout-medium .out-mv-unified-v13 iframe{
    width:138vw!important;
    height:77.625vw!important;
    min-width:0!important;
    min-height:0!important;
    transform:translate(-50%,-50%)!important;
  }
}
@media (orientation:landscape){
  html.out-layout-compact #ytBackground,
  html.out-layout-medium #ytBackground,
  html.out-layout-compact .out-mv-pr299-v13>div,
  html.out-layout-medium .out-mv-pr299-v13>div,
  html.out-layout-compact .out-mv-pr299-v13 iframe,
  html.out-layout-medium .out-mv-pr299-v13 iframe,
  html.out-layout-compact .out-mv-unified-v13>div,
  html.out-layout-medium .out-mv-unified-v13>div,
  html.out-layout-compact .out-mv-unified-v13 iframe,
  html.out-layout-medium .out-mv-unified-v13 iframe{
    width:186.667dvh!important;
    height:105dvh!important;
    min-width:0!important;
    min-height:0!important;
    transform:translate(-50%,-50%)!important;
  }
}

/* Tablet/phone performance profile: keep MV, remove redundant continuous layers. */
html.out-layout-compact .arena-canvas,
html.out-layout-medium .arena-canvas,
html.out-layout-compact .cinema-grain,
html.out-layout-medium .cinema-grain,
html.out-layout-compact .cinema-lasers,
html.out-layout-medium .cinema-lasers{
  display:none!important;
}
html.out-layout-medium .music-deck,
html.out-layout-medium .message-row,
html.out-layout-medium .stat-card,
html.out-layout-medium .controls .button,
html.out-layout-medium .board-wrap{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Touch target invariants. */
.controls .button,
.out-v13-difficulty button,
.out-source-tabs button,
.overlay-actions .button{
  touch-action:manipulation;
}

@media(prefers-reduced-motion:reduce){
  .cinema-aurora,.cinema-lasers,.cinema-grain{animation:none!important}
}

/* Explicit recovery control for browsers that revoke autoplay after backgrounding. */
.out-resume-v15{
  position:fixed;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:2147482500;
  transform:translateX(-50%);
  min-height:48px;
  padding:10px 18px;
  border:1px solid rgba(143,244,199,.62);
  border-radius:999px;
  background:rgba(4,14,25,.96);
  color:#baffdd;
  box-shadow:0 10px 34px rgba(0,0,0,.45),0 0 24px rgba(114,239,176,.16);
  font:900 10px/1 system-ui,sans-serif;
  letter-spacing:.08em;
  touch-action:manipulation;
}
.out-resume-v15[hidden]{display:none!important}

/* V7 remains the single public result-sharing surface; V13's compatibility panel
   can still exist internally without duplicating controls or result height. */
#outSharePanelV13{display:none!important}

/* Medium landscape (typical tablets / small laptop windows): use the available
   horizontal space for stats instead of spending another ~40px vertical row. */
@media (orientation:landscape){
  html.out-layout-medium .playfield{
    grid-template-columns:minmax(0,1fr) 92px!important;
    grid-template-rows:1fr!important;
    width:min(100%,802px)!important;
    gap:8px!important;
    align-items:center!important;
    justify-items:stretch!important;
    overflow:hidden!important;
  }
  html.out-layout-medium .board-wrap{
    width:min(100%,calc(100dvh - 170px),700px)!important;
    justify-self:end!important;
  }
  html.out-layout-medium body:not(.out-run-active) .live-stats{
    display:grid!important;
    visibility:hidden!important;
    pointer-events:none!important;
    width:92px!important;
    height:min(100%,calc(100dvh - 170px),700px)!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(4,minmax(0,1fr))!important;
  }
  html.out-layout-medium body.out-run-active .live-stats{
    width:92px!important;
    height:min(100%,calc(100dvh - 170px),700px)!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(4,minmax(0,1fr))!important;
    align-self:center!important;
  }
  html.out-layout-medium:fullscreen .game-shell,
  html.out-layout-medium:-webkit-full-screen .game-shell{
    --fs-board:min(calc(100dvh - 125px),calc(100vw - 120px),700px)!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }
  html.out-layout-medium:fullscreen .game-header,
  html.out-layout-medium:-webkit-full-screen .game-header,
  html.out-layout-medium:fullscreen .message-row,
  html.out-layout-medium:-webkit-full-screen .message-row{
    display:none!important;
  }
  html.out-layout-medium:fullscreen .playfield,
  html.out-layout-medium:-webkit-full-screen .playfield{
    grid-template-columns:var(--fs-board) 92px!important;
    grid-template-rows:1fr!important;
    width:min(100%,calc(var(--fs-board) + 100px))!important;
    height:100%!important;
    gap:8px!important;
  }
  html.out-layout-medium:fullscreen .board-wrap,
  html.out-layout-medium:-webkit-full-screen .board-wrap{
    width:var(--fs-board)!important;
  }
  html.out-layout-medium:fullscreen .live-stats,
  html.out-layout-medium:-webkit-full-screen .live-stats{
    width:92px!important;
    height:min(100%,var(--fs-board))!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(4,minmax(0,1fr))!important;
  }
}


/* V15.1 setup/result overlay recovery.
   Short-height desktop/tablet windows can make the setup card taller than the
   square board. The overlay itself must own vertical scrolling instead of
   letting the board clip START and the top heading. */
html.out-layout-compact .overlay,
html.out-layout-medium .overlay,
html.out-layout-short .overlay{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-items:flex-start!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  scroll-padding-block:16px;
}
html.out-layout-compact .overlay-card,
html.out-layout-medium .overlay-card,
html.out-layout-short .overlay-card{
  width:min(100%,570px);
  margin-inline:auto;
  padding-bottom:max(18px,env(safe-area-inset-bottom));
}


/* Keep JS as the only transform owner during BLOCKED feedback too. The legacy
   shake keyframes animate transform and can visually jump an absolutely
   translated piece toward the board origin. */
.piece.blocked{
  animation:out-v15-blocked-pulse .20s linear!important;
}
@keyframes out-v15-blocked-pulse{
  0%,100%{filter:brightness(1)}
  40%{filter:brightness(1.34) drop-shadow(0 0 12px rgba(255,107,122,.52))}
  70%{filter:brightness(.92)}
}