/*
 * Viewport fit
 * ------------
 * The bundled layout sizes the board from available WIDTH only, so on short
 * or landscape screens (Y8's 800x600 frame, laptops, phones in landscape) the
 * board grew taller than the viewport and got clipped.
 *
 * Everything here sizes the board from BOTH width and height so the whole
 * match — topbar, board, player panels, controls — always fits on one screen.
 * Loaded last so it wins over the bundled + responsive-overrides rules.
 */

:root {
  /* Vertical space used by everything that is not the board. */
  --vfit-chrome: 200px;
  --vfit-min-board: 220px;
}

html,
body {
  min-height: 100%;
}

/* ---- Match screen ------------------------------------------------------ */

.game-view {
  box-sizing: border-box;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(10px, 2dvh, 26px);
  padding-bottom: clamp(10px, 2dvh, 26px);
}

.match-layout {
  align-items: center;
}

.board-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.board-frame {
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
}

.board-coordinates {
  width: 100%;
  max-width: max(
    var(--vfit-min-board),
    min(100%, calc(100dvh - var(--vfit-chrome)))
  );
}

/* The board is square: cap it by the leftover viewport height. */
.board-frame {
  max-width: max(
    var(--vfit-min-board),
    min(100%, calc(100dvh - var(--vfit-chrome)))
  );
}

.board {
  width: 100%;
}

.board-coordinates {
  padding-top: clamp(3px, 0.8dvh, 9px);
  font-size: clamp(0.5rem, 1.4dvh, 0.62rem);
}

.game-controls {
  margin-top: clamp(8px, 1.6dvh, 20px);
}

/* Stacked phone layout: panels sit above/below the board, so reserve more. */
@media (max-width: 820px) {
  :root {
    --vfit-chrome: 320px;
    --vfit-min-board: 200px;
  }

  .game-view {
    justify-content: flex-start;
  }
}

/* Short viewports (Y8 frame, laptops, landscape phones). */
@media (max-height: 700px) {
  :root {
    --vfit-chrome: 170px;
  }

  .topbar {
    margin-bottom: clamp(6px, 1.4dvh, 14px);
  }
}

@media (max-height: 560px) {
  :root {
    --vfit-chrome: 140px;
    --vfit-min-board: 160px;
  }

  .icon-button {
    width: 30px;
    height: 30px;
  }

  .control-button {
    padding: 6px 8px;
    font-size: 0.68rem;
  }
}

/* Any short/landscape screen (Y8's 800x600 frame, landscape phones and
   tablets): never stack, keep the three columns side by side. */
@media (orientation: landscape) and (max-width: 1050px) {
  :root {
    --vfit-chrome: 120px;
  }

  .match-layout {
    grid-template-columns: minmax(90px, 1fr) minmax(0, auto) minmax(90px, 1fr);
    gap: 10px;
  }

  .board-zone {
    grid-row: 1 !important;
  }

  .player-panel,
  .player-panel.right {
    grid-row: 1 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    text-align: center;
  }

  .player-panel .wof-profile-rank {
    display: none;
  }

  .score {
    font-size: clamp(1.4rem, 6dvh, 2.2rem);
  }

  .player-comment {
    display: none;
  }
}

/* ---- Start screen ------------------------------------------------------ */

.start-view {
  box-sizing: border-box;
  min-height: 100dvh;
  padding-top: clamp(14px, 3dvh, 40px);
  padding-bottom: clamp(14px, 3dvh, 40px);
}

.start-board {
  width: min(410px, 80vw, calc(100dvh - 220px));
  min-width: 170px;
}

@media (max-height: 700px) {
  .start-title {
    font-size: clamp(2.4rem, 9dvh, 4rem);
  }

  .start-board {
    width: min(320px, 42vw, calc(100dvh - 150px));
  }
}

/* ---- Overlays: modals, sheets, mode picker ----------------------------- */

.modal,
.mode-picker-card,
.sheet {
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
}

@media (max-height: 600px) {
  .modal,
  .mode-picker-card {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .modal h2,
  .mode-picker-card h2 {
    font-size: clamp(1.3rem, 6dvh, 1.9rem);
  }
}

/* Very short landscape (phones held sideways): squeeze the last few pixels. */
@media (orientation: landscape) and (max-height: 430px) {
  :root {
    --vfit-chrome: 155px;
    --vfit-min-board: 140px;
  }

  .topbar {
    margin-bottom: 6px;
  }

  .game-controls {
    margin-top: 6px;
  }
}

/* Start screen on short/landscape screens: keep the two-column composition
   instead of the stacked phone layout, and size the decorative board by
   height so the hero never pushes content off-screen. */
@media (orientation: landscape) and (max-width: 1050px) {
  .start-view {
    display: flex;
    align-items: center;
    padding: clamp(10px, 2dvh, 26px) clamp(14px, 3vw, 32px);
  }

  .start-content {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    max-width: 100%;
    text-align: left;
  }

  .start-copy {
    margin-left: 0;
    margin-right: 0;
  }

  .brand-lockup,
  .start-actions {
    justify-content: flex-start;
  }

  .start-title {
    font-size: clamp(1.9rem, 13dvh, 3.6rem);
  }

  .start-eyebrow,
  .start-copy p {
    font-size: clamp(0.72rem, 3.4dvh, 0.95rem);
  }

  .start-board {
    width: min(300px, 34vw, calc(100dvh - 120px));
  }

  .start-badge {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 430px) {
  .start-view {
    padding: 4px 12px;
  }

  .start-content {
    gap: 12px;
  }

  .start-title {
    font-size: clamp(1.4rem, 12dvh, 2.2rem);
    line-height: 1;
  }

  .start-eyebrow {
    font-size: 0.6rem;
  }

  .start-copy p {
    font-size: 0.74rem;
    line-height: 1.35;
  }

  .start-actions {
    gap: 8px;
  }

  .start-actions .button-primary,
  .start-actions .button-quiet {
    padding: 8px 14px;
    font-size: 0.78rem;
  }

  .start-links,
  .start-utility {
    gap: 10px;
    font-size: 0.7rem;
  }

  .start-board {
    width: min(210px, 30vw, calc(100dvh - 90px));
  }
}

/* Tiny landscape: collapse the generous hero rhythm so every control fits. */
@media (orientation: landscape) and (max-height: 430px) {
  .start-content > section > * {
    margin-top: clamp(5px, 2dvh, 14px) !important;
    margin-bottom: 0 !important;
  }

  .start-content > section > .brand-lockup {
    margin-top: 0 !important;
  }

  .start-content > section > div:last-child {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .control-button {
    padding: 6px 8px;
  }
}