html.game-viewport, .game-viewport body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.game-viewport .viewport-game:not(:fullscreen) {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: 0;
  padding: 8px 12px;
  transform: translate(-50%, -50%) scale(var(--game-scale, 1));
  transform-origin: center;
}
.game-viewport main.viewport-game:not(:fullscreen) {
  width: min(calc(100vw - 24px), 1280px);
  max-width: none;
}
.viewport-game header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  text-align: left;
}
.viewport-game h1, .viewport-game h1.title {
  font-size: 30px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.04em;
}
.viewport-game .eyebrow { display: none; }
.viewport-game .tagline, .viewport-game #intro { display: none; }
.viewport-game .hint {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
.viewport-game footer { margin-top: 8px; font-size: 11px; }
.viewport-game details { margin-top: 8px; font-size: 13px; line-height: 1.45; }
.viewport-game .toolbar { margin: 6px 0; }
.viewport-game #status { margin: 6px 0; padding: 8px 12px; min-height: 38px; }
.viewport-game .touch-controls, .viewport-game .direction-pad { margin-top: 8px; }
.viewport-game #board { max-width: 1100px; }
.viewport-game #board.tic { max-width: min(520px, calc(100dvh - 200px)); }
.viewport-game #board.mines { max-width: min(760px, calc(100dvh - 200px)); }
.viewport-game #board.simon { max-width: min(620px, calc(100dvh - 200px)); }
.viewport-game #board.connect { max-width: min(850px, calc((100dvh - 200px) * 1.16)); }
.viewport-game .sudoku { max-width: min(760px, calc(100dvh - 260px)); margin: auto; }
.viewport-game .word-grid { max-width: min(760px, calc(100dvh - 270px)); }
.viewport-game #board.naval-layout { max-width: min(1200px, calc((100dvh - 240px) * 2)) !important; }
.viewport-game #board.solitaire { max-width: 1100px !important; }
.viewport-game .cardrow { margin-bottom: 12px; }
.viewport-game .pile { min-height: 0; }
.viewport-game .action-canvas { width: min(100%, calc((100dvh - 230px) * 1.6)); margin: auto; }
.viewport-game .maze-canvas { width: min(100%, calc(100dvh - 230px)); max-width: none; }
.viewport-game #board .calculation { padding: 14px 5px; }
main.viewport-game:fullscreen .action-canvas {
  width: min(100%, calc(var(--fullscreen-board-height, 50dvh) * 1.6));
}
main.viewport-game:fullscreen .maze-canvas {
  width: min(100%, var(--fullscreen-board-height, 50dvh));
}

.game-viewport main.game-shell.viewport-game:not(:fullscreen) {
  width: min(calc(100vw - 24px), 900px);
}
.viewport-game .score-row { padding: 8px 14px; }
.viewport-game .controls { padding: 8px 12px; gap: 7px; }
.viewport-game .board { margin-bottom: 8px; }
.viewport-game .message { margin-bottom: 8px; }
[data-viewport-game="sky-hop"] .viewport-game,
[data-viewport-game="brick-breaker"] .viewport-game { max-width: 720px !important; }
[data-viewport-game="sky-hop"] canvas,
[data-viewport-game="brick-breaker"] canvas {
  width: min(100%, calc((100dvh - 165px) * .7742));
  max-width: none;
  margin: auto;
}
[data-viewport-game="snake"] canvas {
  width: min(100%, calc(100dvh - 250px));
  margin: auto;
}
[data-viewport-game="memory"] .board {
  width: min(100%, calc(100dvh - 210px));
  margin: auto;
}
[data-viewport-game="memory"] .board.wide {
  width: min(100%, calc((100dvh - 210px) * 1.5));
}
[data-viewport-game="sokoban"] .board {
  width: min(calc(100% - 24px), calc(100dvh - 190px));
  max-width: 800px;
}
[data-viewport-game="2048"] .viewport-game { box-sizing: content-box; }
[data-viewport-game="2048"] .heading { margin-bottom: 8px; }
[data-viewport-game="2048"] .heading h1 { font-size: 54px; }
[data-viewport-game="2048"] .game-container { margin-top: 12px; }
[data-viewport-game="2048"] .game-intro { line-height: 1.5; }
[data-viewport-game="2048"] .game-explanation { margin-top: 8px; }

@media (min-width: 601px) {
  [data-viewport-game="sky-hop"] .controls,
  [data-viewport-game="brick-breaker"] .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 4px;
  }
}

@media (max-width: 600px) {
  .viewport-game header { flex-wrap: wrap; }
  .viewport-game h1 { font-size: 24px; }
  .viewport-game .action-canvas { width: 100%; }
  .viewport-game .maze-canvas { width: min(100%, calc(100dvh - 240px)); }
  .viewport-game #board.naval-layout { max-width: 360px !important; }
}