/* OUT fullscreen-only viewport fitting.
   Keep the normal preview page layout unchanged; when Fullscreen API is active,
   the whole game must fit in one viewport without document scrolling. */

html:fullscreen,
html:-webkit-full-screen{
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--bg);
}

html:fullscreen body,
html:-webkit-full-screen body{
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  overscroll-behavior:none;
}

html:fullscreen .game-shell,
html:-webkit-full-screen .game-shell{
  --fs-board:min(calc(100dvh - 190px),calc(100vw - 150px),820px);
  width:100%;
  max-width:none;
  height:100vh;
  height:100dvh;
  min-height:0;
  margin:0;
  padding:clamp(6px,1vh,11px) max(8px,env(safe-area-inset-right)) clamp(6px,1vh,11px) max(8px,env(safe-area-inset-left));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  gap:clamp(4px,.7vh,8px);
  overflow:hidden;
}

html:fullscreen .game-header,
html:-webkit-full-screen .game-header{
  margin:0;
  align-items:center;
  min-height:0;
}

html:fullscreen .eyebrow,
html:-webkit-full-screen .eyebrow{
  margin:0 0 2px;
  font-size:8px;
}
html:fullscreen h1,
html:-webkit-full-screen h1{
  font-size:clamp(30px,5vh,48px);
  line-height:.82;
}
html:fullscreen .song-name,
html:-webkit-full-screen .song-name{
  margin:4px 0 0;
  font-size:9px;
}
html:fullscreen .score-stack,
html:-webkit-full-screen .score-stack{
  min-width:150px;
}
html:fullscreen .score-stack>strong,
html:-webkit-full-screen .score-stack>strong{
  font-size:clamp(22px,4vh,32px);
}
html:fullscreen .score-stack>span,
html:fullscreen .score-stack small,
html:-webkit-full-screen .score-stack>span,
html:-webkit-full-screen .score-stack small{
  font-size:7px;
}

html:fullscreen .music-deck,
html:-webkit-full-screen .music-deck{
  margin:0;
  padding:6px 9px;
  border-radius:12px;
}
html:fullscreen .music-meta,
html:-webkit-full-screen .music-meta{
  margin-bottom:4px;
  font-size:8px;
}
html:fullscreen .song-progress,
html:-webkit-full-screen .song-progress{
  height:4px;
}
html:fullscreen .stage-track,
html:-webkit-full-screen .stage-track{
  gap:3px;
  margin-top:4px;
}
html:fullscreen .stage-pip,
html:-webkit-full-screen .stage-pip{
  height:17px;
  border-radius:6px;
  font-size:7px;
}

html:fullscreen .playfield,
html:-webkit-full-screen .playfield{
  min-height:0;
  height:100%;
  grid-template-columns:minmax(0,1fr) 96px;
  gap:7px;
  align-items:center;
  justify-items:center;
  overflow:hidden;
}

html:fullscreen .board-wrap,
html:-webkit-full-screen .board-wrap{
  width:var(--fs-board);
  max-width:100%;
  height:auto;
  aspect-ratio:1;
  align-self:center;
  justify-self:center;
  padding:6px;
  border-radius:18px;
}
html:fullscreen .board,
html:-webkit-full-screen .board{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:13px;
}
html:fullscreen .fx,
html:fullscreen .stage-banner,
html:fullscreen .overlay,
html:-webkit-full-screen .fx,
html:-webkit-full-screen .stage-banner,
html:-webkit-full-screen .overlay{
  inset:6px;
}

html:fullscreen .live-stats,
html:-webkit-full-screen .live-stats{
  width:96px;
  height:min(100%,var(--fs-board));
  min-height:0;
  gap:5px;
  align-self:center;
}
html:fullscreen .stat-card,
html:-webkit-full-screen .stat-card{
  padding:6px;
  border-radius:10px;
}
html:fullscreen .stat-card span,
html:-webkit-full-screen .stat-card span{
  font-size:7px;
}
html:fullscreen .stat-card strong,
html:-webkit-full-screen .stat-card strong{
  font-size:14px;
}
html:fullscreen .stage-card strong,
html:-webkit-full-screen .stage-card strong{
  font-size:10px;
}

html:fullscreen .message-row,
html:-webkit-full-screen .message-row{
  margin:0;
  min-height:0;
  padding:6px 9px;
  border-radius:10px;
}
html:fullscreen .message-row p,
html:-webkit-full-screen .message-row p{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  line-height:1.2;
}
html:fullscreen .message-row span,
html:-webkit-full-screen .message-row span{
  font-size:7px;
}

html:fullscreen .controls,
html:-webkit-full-screen .controls{
  margin:0;
  gap:5px;
}
html:fullscreen .controls .button,
html:-webkit-full-screen .controls .button{
  padding:7px 8px;
  border-radius:9px;
  font-size:9px;
}
html:fullscreen footer,
html:-webkit-full-screen footer{
  display:none;
}

/* A fullscreen result card should also stay inside the board. */
html:fullscreen .overlay,
html:-webkit-full-screen .overlay{
  padding:10px;
}
html:fullscreen .overlay-card,
html:-webkit-full-screen .overlay-card{
  width:min(100%,520px);
  max-height:100%;
}
html:fullscreen .overlay .character-strip,
html:fullscreen .overlay .rule-chips,
html:fullscreen .overlay .audio-picker,
html:-webkit-full-screen .overlay .character-strip,
html:-webkit-full-screen .overlay .rule-chips,
html:-webkit-full-screen .overlay .audio-picker{
  display:none;
}
html:fullscreen .overlay h2,
html:-webkit-full-screen .overlay h2{
  font-size:clamp(24px,5vh,38px);
  margin-bottom:6px;
}
html:fullscreen .overlay p,
html:-webkit-full-screen .overlay p{
  margin:6px 0;
  font-size:10px;
  line-height:1.45;
}
html:fullscreen .result-grid,
html:-webkit-full-screen .result-grid{
  margin:8px 0;
  gap:4px;
}
html:fullscreen .result-item,
html:-webkit-full-screen .result-item{
  padding:6px;
}
html:fullscreen .result-item b,
html:-webkit-full-screen .result-item b{
  font-size:14px;
}
html:fullscreen .overlay-actions,
html:-webkit-full-screen .overlay-actions{
  margin-top:8px;
}
html:fullscreen .overlay-actions .button,
html:-webkit-full-screen .overlay-actions .button{
  min-width:120px;
  padding:7px 9px;
}

/* Compact portrait/tablet fullscreen. */
@media (max-width:720px){
  html:fullscreen .game-shell,
  html:-webkit-full-screen .game-shell{
    --fs-board:min(calc(100vw - 12px),calc(100dvh - 245px),620px);
    padding:5px max(6px,env(safe-area-inset-right)) 5px max(6px,env(safe-area-inset-left));
    gap:4px;
  }
  html:fullscreen .eyebrow,
  html:fullscreen .song-name,
  html:-webkit-full-screen .eyebrow,
  html:-webkit-full-screen .song-name{
    display:none;
  }
  html:fullscreen h1,
  html:-webkit-full-screen h1{
    font-size:30px;
  }
  html:fullscreen .score-stack,
  html:-webkit-full-screen .score-stack{
    min-width:118px;
  }
  html:fullscreen .score-stack>strong,
  html:-webkit-full-screen .score-stack>strong{
    font-size:22px;
  }
  html:fullscreen .playfield,
  html:-webkit-full-screen .playfield{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    gap:4px;
    width:100%;
  }
  html:fullscreen .board-wrap,
  html:-webkit-full-screen .board-wrap{
    width:var(--fs-board);
  }
  html:fullscreen .live-stats,
  html:-webkit-full-screen .live-stats{
    width:100%;
    height:auto;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:none;
    gap:4px;
  }
  html:fullscreen .stat-card,
  html:-webkit-full-screen .stat-card{
    min-height:34px;
    padding:4px 6px;
    text-align:center;
  }
  html:fullscreen .stat-card strong,
  html:-webkit-full-screen .stat-card strong{
    font-size:12px;
  }
  html:fullscreen .stage-card strong,
  html:-webkit-full-screen .stage-card strong{
    font-size:9px;
  }
  html:fullscreen .message-row,
  html:-webkit-full-screen .message-row{
    padding:5px 7px;
  }
  html:fullscreen .message-row span,
  html:-webkit-full-screen .message-row span{
    display:none;
  }
  html:fullscreen .controls,
  html:-webkit-full-screen .controls{
    grid-template-columns:repeat(3,1fr);
  }
  html:fullscreen .controls #newRun,
  html:-webkit-full-screen .controls #newRun{
    grid-column:auto;
  }
  html:fullscreen .controls .button,
  html:-webkit-full-screen .controls .button{
    padding:6px 4px;
    font-size:8px;
  }
}

/* Very short landscape screens: prioritize the board and core controls. */
@media (max-height:520px) and (orientation:landscape){
  html:fullscreen .game-shell,
  html:-webkit-full-screen .game-shell{
    --fs-board:min(calc(100dvh - 86px),calc(100vw - 132px),700px);
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:3px;
    padding:4px 6px;
  }
  html:fullscreen .game-header,
  html:fullscreen .message-row,
  html:-webkit-full-screen .game-header,
  html:-webkit-full-screen .message-row{
    display:none;
  }
  html:fullscreen .music-deck,
  html:-webkit-full-screen .music-deck{
    padding:4px 7px;
  }
  html:fullscreen .music-meta,
  html:-webkit-full-screen .music-meta{
    margin-bottom:2px;
    font-size:7px;
  }
  html:fullscreen .stage-pip,
  html:-webkit-full-screen .stage-pip{
    height:13px;
  }
  html:fullscreen .playfield,
  html:-webkit-full-screen .playfield{
    grid-template-columns:minmax(0,1fr) 86px;
    grid-template-rows:1fr;
  }
  html:fullscreen .live-stats,
  html:-webkit-full-screen .live-stats{
    width:86px;
    height:min(100%,var(--fs-board));
    grid-template-columns:1fr;
    grid-template-rows:repeat(4,1fr);
  }
  html:fullscreen .controls,
  html:-webkit-full-screen .controls{
    grid-template-columns:repeat(3,1fr);
  }
  html:fullscreen .controls #newRun,
  html:-webkit-full-screen .controls #newRun{
    grid-column:auto;
  }
  html:fullscreen .controls .button,
  html:-webkit-full-screen .controls .button{
    padding:4px 6px;
    font-size:8px;
  }
}