/* OUT V13 — PR #301 game-feel restoration with one renderer for phone + desktop. */
:root{--out-board-max:760px}

/* One motion owner. JS/WAAPI owns transform; CSS never interpolates it. */
.piece{transition:opacity .12s ease,filter .12s ease!important;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;contain:layout paint style}

/* Keep the actual game cluster compact on ultrawide/fullscreen displays. */
html:fullscreen .playfield,html:-webkit-full-screen .playfield{grid-template-columns:var(--fs-board) 96px!important;width:min(100%,calc(var(--fs-board) + 108px));margin-inline:auto;justify-content:center;justify-items:stretch}
html:fullscreen .board-wrap,html:-webkit-full-screen .board-wrap{justify-self:stretch!important}
html:fullscreen .live-stats,html:-webkit-full-screen .live-stats{justify-self:stretch!important}

/* The board cells themselves are the predictive timing display. */
#rhythmHaloV9,#rhythmGridV10,.out-perfect-frame-v11,#outTimingFinal{display:none!important}
.out-grid-timing-v13{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;border-radius:inherit;contain:layout paint style;mix-blend-mode:screen}
.out-grid-ring-v13{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);opacity:0;will-change:opacity,filter;pointer-events:none}
.out-grid-cell-v13{margin:1px;border-radius:3px;background:rgba(95,220,255,.18);border:1px solid rgba(160,239,255,.18);box-shadow:inset 0 0 9px rgba(105,221,255,.16),0 0 8px rgba(105,221,255,.08)}
.out-grid-ring-v13[data-ring="0"] .out-grid-cell-v13{background:rgba(240,253,255,.48);border-color:rgba(240,253,255,.72);box-shadow:0 0 20px rgba(180,244,255,.45),inset 0 0 12px rgba(255,255,255,.34)}
.out-grid-ring-v13[data-ring="4"] .out-grid-cell-v13{background:rgba(255,239,157,.25);border-color:rgba(255,244,190,.58);box-shadow:0 0 16px rgba(255,218,103,.24),inset 0 0 11px rgba(255,245,190,.18)}
.out-grid-timing-v13.perfect-burst{animation:out-v13-perfect .38s cubic-bezier(.15,.78,.2,1)}
@keyframes out-v13-perfect{0%{filter:brightness(1)}18%{filter:brightness(2.15) drop-shadow(0 0 22px rgba(255,235,145,.72))}100%{filter:brightness(1)}}

/* Unified background MV. Keep it inside the page stacking context and visibly
   readable behind the translucent game surface. */
body.aaa-loaded .cinema-layer{z-index:0!important}
body.aaa-loaded .game-shell{position:relative;z-index:3!important}
#ytBackground{display:none!important}
.out-mv-unified-v13{z-index:0!important;opacity:1;transition:opacity .2s ease}
.out-mv-unified-v13 iframe{opacity:min(.78,calc(var(--mv-opacity)*2.35))!important;filter:blur(calc(var(--mv-blur)*.38)) brightness(calc(var(--mv-bright) + .32)) saturate(var(--mv-sat)) contrast(1.06);will-change:opacity,filter,transform}
body.out-run-active .cinema-scrim{background:linear-gradient(180deg,rgba(1,3,7,.34),rgba(2,6,13,.12) 35%,rgba(2,5,12,.18) 70%,rgba(0,2,7,.48))}
body.out-run-active .cinema-vignette{box-shadow:inset 0 0 15vw rgba(0,0,0,.62),inset 0 -13vh 18vh rgba(0,0,0,.44)}
.out-mv-state-v13{margin-left:auto;margin-right:8px;padding:3px 6px;border:1px solid rgba(139,234,255,.18);border-radius:999px;color:#8297af;font-size:7px;font-weight:900;letter-spacing:.1em;white-space:nowrap;background:rgba(4,12,23,.42)}
.out-mv-state-v13[data-state="playing"]{color:#9ff4cb;border-color:rgba(114,239,176,.42);box-shadow:0 0 12px rgba(114,239,176,.12)}
.out-mv-state-v13[data-state="blocked"],.out-mv-state-v13[data-state="api-error"],.out-mv-state-v13[data-state="error"]{color:#ff9aa5;border-color:rgba(255,107,122,.42)}

/* Before START there is only setup UI. Live stats, runtime message and commands
   must not overlap the start card. The whole game HUD appears atomically once
   a run actually begins, and disappears again after the run ends. */
body:not(.out-run-active) .controls,
body:not(.out-run-active) .live-stats,
body:not(.out-run-active) .message-row{display:none!important}
body:not(.out-run-active) .playfield{grid-template-columns:1fr!important}

/* Utility navigation never consumes the flexible board row. */
.out-game-lab-link-v13{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 11px;border:1px solid rgba(151,222,255,.18);border-radius:999px;background:rgba(5,13,25,.78);color:#cceeff;text-decoration:none;font-size:9px;font-weight:900;letter-spacing:.08em;white-space:nowrap;box-shadow:inset 0 1px rgba(255,255,255,.04);backdrop-filter:blur(10px)}
.out-game-lab-link-v13:hover{border-color:rgba(151,222,255,.42);box-shadow:0 0 20px rgba(105,221,255,.10)}
.game-header .out-game-lab-link-v13{margin-left:auto;margin-right:10px;align-self:flex-start}
html:fullscreen .out-game-lab-link-v13,html:-webkit-full-screen .out-game-lab-link-v13{position:fixed;z-index:140;left:max(7px,env(safe-area-inset-left));top:max(7px,env(safe-area-inset-top));min-height:30px;padding:6px 9px;background:rgba(3,10,21,.88)}

.out-v13-difficulty{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin:8px 0}
.out-v13-difficulty button{border:1px solid rgba(151,222,255,.18);border-radius:999px;background:rgba(6,15,28,.72);color:#9eb4ce;padding:6px 12px;font:900 8px/1 system-ui;letter-spacing:.12em;cursor:pointer}
.out-v13-difficulty button.active{color:#07111d;background:linear-gradient(135deg,#8beaff,#fff1a2);border-color:transparent;box-shadow:0 0 16px rgba(105,221,255,.18)}
.out-v13-difficulty small{flex-basis:100%;color:#8295ad;font-size:8px;line-height:1.35}
.out-v13-course-status{display:block;text-align:center;color:#8fd8b7;font-size:8px;letter-spacing:.07em;margin:5px 0 0}
.out-source-panel small.out-v13-track-note{display:block;margin-top:5px;color:#8295ad;line-height:1.4}

/* Five commands are one control strip on every form factor. Later V13 CSS owns
   the grid so older 2/3/4-column rules cannot create a second row. */
.controls.out-controls-v9,html:fullscreen .controls.out-controls-v9,html:-webkit-full-screen .controls.out-controls-v9{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:clamp(3px,.45vw,7px)!important;width:100%!important;align-items:stretch}
.controls.out-controls-v9 #newRun,html:fullscreen .controls.out-controls-v9 #newRun,html:-webkit-full-screen .controls.out-controls-v9 #newRun{grid-column:auto!important}
.controls.out-controls-v9 .button{min-width:0!important;width:100%!important;min-height:48px!important;height:auto!important;max-height:58px;padding:8px 5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.05}

@media(max-width:760px),(pointer:coarse){
  .out-grid-cell-v13{margin:.5px;border-radius:2px;background:rgba(80,219,255,.25);border-color:rgba(175,242,255,.25);box-shadow:inset 0 0 7px rgba(105,221,255,.18),0 0 6px rgba(105,221,255,.11)}
  .out-grid-ring-v13[data-ring="0"] .out-grid-cell-v13{background:rgba(235,253,255,.58)}
  .out-grid-ring-v13[data-ring="4"] .out-grid-cell-v13{background:rgba(255,239,157,.34)}
  .game-header .out-game-lab-link-v13{position:absolute;left:8px;top:8px;margin:0;z-index:40;min-height:29px;padding:5px 8px;font-size:7px;background:rgba(3,10,21,.86)}
  .game-header{position:relative;padding-top:31px}
  html:fullscreen .game-header,html:-webkit-full-screen .game-header{padding-top:0}
  .out-v13-difficulty{margin:6px 0}.out-v13-difficulty button{padding:6px 10px;font-size:7px}.out-v13-difficulty small{font-size:7px}
  .out-mv-state-v13{font-size:6px;padding:2px 5px;margin-right:5px}

  .controls.out-controls-v9,html:fullscreen .controls.out-controls-v9,html:-webkit-full-screen .controls.out-controls-v9{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important}
  .controls.out-controls-v9 .button,html:fullscreen .controls.out-controls-v9 .button,html:-webkit-full-screen .controls.out-controls-v9 .button{min-height:44px!important;max-height:50px!important;padding:5px 2px!important;border-radius:9px!important;font-size:clamp(6px,1.85vw,8px)!important;letter-spacing:0!important}
  .controls.out-controls-v9 #rewind{gap:2px!important;padding-inline:2px!important;justify-content:center!important}
  .controls.out-controls-v9 .rewind-glyph{width:20px!important;height:20px!important;flex-basis:20px!important;border-radius:6px!important}
  .controls.out-controls-v9 .rewind-glyph svg{width:16px!important;height:16px!important}
  .controls.out-controls-v9 .rewind-copy b{font-size:6.5px!important;letter-spacing:.02em!important}
  .controls.out-controls-v9 .rewind-copy small{font-size:5px!important;letter-spacing:0!important;margin-top:2px!important}

  /* Pointer type is more reliable than screenshot/device pixels for phones.
     Force the board and four live stats back inside the fullscreen viewport. */
  html:fullscreen .playfield,html:-webkit-full-screen .playfield{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) auto!important;width:100%!important;gap:4px!important;justify-items:center!important;overflow:hidden!important}
  html:fullscreen .board-wrap,html:-webkit-full-screen .board-wrap{width:min(100%,var(--fs-board))!important;max-width:100%!important;justify-self:center!important}
  html:fullscreen .live-stats,html:-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:4px!important;justify-self:center!important}
  html:fullscreen .stat-card,html:-webkit-full-screen .stat-card{min-height:34px!important;padding:4px 5px!important;text-align:center!important}
}

@media(max-width:390px){
  .out-game-lab-link-v13{font-size:6.5px}.out-grid-cell-v13{margin:.35px}
  .controls.out-controls-v9 .button{font-size:5.8px!important}
  .controls.out-controls-v9 .rewind-copy small{display:none!important}
  .controls.out-controls-v9 .rewind-copy b{font-size:6px!important}
  .out-mv-state-v13{max-width:70px;overflow:hidden;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){.out-grid-ring-v13{will-change:opacity}.out-grid-timing-v13.perfect-burst{animation-duration:.12s}}