/* Shared responsive desktop layout for Figlo games. Mobile layouts remain owned by each game stylesheet. */

/* Isolate board painting so changes inside a game board do not invalidate the whole page. */
.board,
.duet-board,
.bloki-board {
  contain: layout paint style;
}

@media (min-width: 768px) {
  /* Desktop sizing is intentionally moderate: the board should grow on large screens,
     but the hint / feedback area must remain comfortably reachable without the game
     feeling cropped below the fold. */

  /* Korony */
  .app {
    --figlo-board-size: min(calc(100vw - 330px), 66vh, 760px);
    width: min(100%, 1180px);
    max-width: 1180px;
    padding: 14px 24px 34px;
  }

  .app .game-topbar {
    height: 52px;
  }

  .app .game-meta {
    width: min(100%, calc(var(--figlo-board-size) + 154px));
    height: 64px;
    margin: 8px auto 14px;
  }

  .app .game-layout {
    grid-template-columns: minmax(0, var(--figlo-board-size)) 124px;
    gap: 22px;
    justify-content: center;
  }

  .app .board {
    width: var(--figlo-board-size);
    max-width: none;
  }

  .app .controls {
    width: 124px;
  }

  .app .controls button,
  .app .control-toggle {
    height: 66px;
  }

  .app .board-column .feedback,
  .app .board-column .hint-card,
  .app .game-tools {
    max-width: var(--figlo-board-size);
  }

  /* These two disabled buttons are legacy controls and add no value to Korony. */
  .app .bottom-actions {
    display: none;
  }

  /* Keep X rendering crisp when the board scales up. */
  .app .x-mark {
    text-shadow: none;
    box-shadow: 0 2px 5px rgba(15,15,20,.24);
  }

  /* Duet + Bloki use the same desktop shell. */
  .game-shell {
    --figlo-board-size: min(calc(100vw - 430px), 62vh, 720px);
    width: min(100%, 1220px);
    max-width: 1220px;
    grid-template-columns: minmax(0, var(--figlo-board-size)) 260px;
    gap: clamp(24px, 3vw, 40px);
    justify-content: center;
    padding: 28px 24px 48px;
  }

  .game-shell .board-wrap {
    width: var(--figlo-board-size);
    max-width: none;
  }

  .game-shell .feedback,
  .game-shell .load-error,
  .game-shell .bloki-legend {
    max-width: var(--figlo-board-size);
  }

  .game-shell .side-panel {
    width: 260px;
  }

  /* Hint cards must remain readable without being constrained by a tall board. */
  .game-shell .hint-card {
    max-height: min(44vh, 360px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* Short desktop windows: fit the board and leave room for feedback / hints below it. */
  @media (max-height: 820px) {
    .app {
      --figlo-board-size: min(calc(100vw - 330px), 58vh, 650px);
      padding-top: 8px;
    }

    .app .game-topbar {
      height: 46px;
    }

    .app .game-meta {
      height: 56px;
      margin-bottom: 10px;
    }

    .game-shell {
      --figlo-board-size: min(calc(100vw - 430px), 56vh, 620px);
      padding-top: 18px;
      padding-bottom: 34px;
    }
  }
}