/* OUT post-playtest tuning: viewport safety + stronger MV visibility */

/* The live controls now contain REWIND / SOUND / MIX / NEW RUN.
   Keep all four on one row in fullscreen so no second row can fall below the viewport. */
html:fullscreen .game-shell,
html:-webkit-full-screen .game-shell{
  --fs-board:min(calc(100dvh - 220px),calc(100vw - 155px),790px);
}

html:fullscreen .controls,
html:-webkit-full-screen .controls{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  width:100%;
}

html:fullscreen .controls #newRun,
html:-webkit-full-screen .controls #newRun{
  grid-column:auto !important;
}

html:fullscreen .controls .button,
html:-webkit-full-screen .controls .button{
  min-width:0;
  padding:6px 5px;
  white-space:nowrap;
}

html:fullscreen .message-row,
html:-webkit-full-screen .message-row{
  padding:5px 8px;
}

@media (max-width:720px){
  html:fullscreen .game-shell,
  html:-webkit-full-screen .game-shell{
    --fs-board:min(calc(100vw - 12px),calc(100dvh - 260px),600px);
  }
  html:fullscreen .controls,
  html:-webkit-full-screen .controls{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  html:fullscreen .controls .button,
  html:-webkit-full-screen .controls .button{
    padding:5px 2px;
    font-size:7px;
  }
}

@media (max-height:620px) and (orientation:landscape){
  html:fullscreen .game-shell,
  html:-webkit-full-screen .game-shell{
    --fs-board:min(calc(100dvh - 118px),calc(100vw - 140px),680px);
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  html:fullscreen .game-header,
  html:fullscreen .message-row,
  html:-webkit-full-screen .game-header,
  html:-webkit-full-screen .message-row{
    display:none;
  }
  html:fullscreen .controls,
  html:-webkit-full-screen .controls{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* MV should already be perceptible before the player builds ECHO.
   Dynamic variables from out-aaa.js still increase visibility during strong play. */
.aaa-loaded .yt-background{
  opacity:max(.24,var(--mv-opacity)) !important;
  filter:blur(min(9px,var(--mv-blur))) brightness(max(.52,var(--mv-bright))) saturate(max(1.05,var(--mv-sat))) contrast(1.06) !important;
}

.aaa-loaded .cinema-scrim{
  background:linear-gradient(180deg,rgba(1,3,7,.42),rgba(2,6,13,.15) 35%,rgba(2,5,12,.20) 70%,rgba(0,2,7,.52));
}

.aaa-loaded .cinema-vignette{
  box-shadow:inset 0 0 16vw rgba(0,0,0,.68),inset 0 -13vh 18vh rgba(0,0,0,.46);
}

.aaa-loaded .board-wrap{
  background:rgba(2,7,16,.20);
  backdrop-filter:blur(4px) saturate(1.30);
}

.aaa-loaded .board{
  background:
    linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px),
    radial-gradient(circle at 50% 46%,rgba(63,167,255,.09),transparent 54%),
    linear-gradient(145deg,rgba(10,29,52,.34),rgba(3,9,20,.34));
  background-size:calc(100%/9) calc(100%/9),calc(100%/9) calc(100%/9),auto,auto;
}

/* Once the run has real energy, let the MV come visibly forward. */
body.aaa-perfect .yt-background,
body.aaa-clear .yt-background{
  opacity:max(.42,var(--mv-opacity)) !important;
  filter:blur(min(6px,var(--mv-blur))) brightness(max(.62,var(--mv-bright))) saturate(max(1.12,var(--mv-sat))) contrast(1.05) !important;
}