/* Letterloom — mobile layout (load after style.css)
 *
 * ≤900px  stacked play, fluid cells
 * ≤560px  sticky rack, denser chrome
 * ≤380px  very narrow phones
 *
 * Cell width ≈ (100vw − app padding − board padding − gaps) / 15,
 * clamped 24–36px.
 */

/* ≤900px — stacked layout */

@media (max-width: 900px) {
  :root {
    --app-pad-x: 1rem;
    --app-pad-y: 1rem;
    --board-max-width: calc(15 * var(--cell-size) + 14 * var(--board-gap) + 16px);
    /* Fluid board: fit phone/tablet width without horizontal page overflow */
    --cell-size: clamp(
      24px,
      calc((100vw - 2 * var(--app-pad-x) - 16px - 14 * var(--board-gap)) / 15),
      36px
    );
  }

  .letterloom-app {
    padding: max(var(--app-pad-y), env(safe-area-inset-top, 0px))
      max(var(--app-pad-x), env(safe-area-inset-right, 0px))
      max(var(--app-pad-y), env(safe-area-inset-bottom, 0px))
      max(var(--app-pad-x), env(safe-area-inset-left, 0px));
  }

  /* Stack play column; center board-width content */
  .game-main {
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
  }

  .board-area {
    width: 100%;
    max-width: var(--board-max-width);
    gap: 0.65rem;
  }

  /*
   * Lift sidebar children into the game-main flex context so we can reorder
   * for play flow: board/rack → controls → score preview → status → save.
   */
  .game-sidebar {
    display: contents;
  }

  .board-area {
    order: 1;
  }

  .controls-panel {
    order: 2;
  }

  .score-preview {
    order: 3;
  }

  .status-panel {
    order: 4;
  }

  .save-panel {
    order: 5;
  }

  .status-panel,
  .score-preview,
  .controls-panel,
  .save-panel {
    width: 100%;
    max-width: var(--board-max-width);
    padding: 0.85rem;
  }

  /*
   * Prefer fitting the board via fluid --cell-size. If a device is still too
   * narrow, only .board-scroll (wrapper around the grid) may horizontal-scroll.
   */
  .board-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .board-container {
    margin-inline: auto;
    flex-shrink: 0;
    width: max-content;
  }

  /* Scale premium labels & tile glyphs with cell size */
  .board-cell {
    font-size: clamp(0.55rem, calc(var(--cell-size) * 0.28), 0.7rem);
  }

  .premium-label {
    font-size: inherit;
  }

  .center-star {
    font-size: clamp(0.65rem, calc(var(--cell-size) * 0.45), 1rem);
  }

  .tile-letter {
    font-size: clamp(0.7rem, calc(var(--cell-size) * 0.5), 1.15rem);
  }

  .tile-small .tile-letter {
    font-size: clamp(0.65rem, calc(var(--cell-size) * 0.45), 1rem);
  }

  .tile-points {
    font-size: clamp(0.5rem, calc(var(--cell-size) * 0.22), 0.65rem);
    right: 2px;
    bottom: 1px;
  }

  .tile-face {
    border-radius: 3px;
  }

  /* Controls: wrap cleanly; primary action stands out */
  .control-actions,
  .exchange-section {
    gap: 0.5rem;
  }

  .control-actions .btn-primary {
    flex: 1 1 100%;
  }

  .control-actions .btn:not(.btn-primary),
  .exchange-section .btn {
    flex: 1 1 auto;
    min-width: calc(50% - 0.25rem);
  }

  /* Setup / headings — slightly tighter */
  .setup-card {
    padding: 2rem 1.75rem;
  }

  .setup-title {
    font-size: 2.1rem;
  }

  .status-heading {
    font-size: 1rem;
  }

  .status-current-player {
    font-size: 1.15rem;
  }

  .preview-total {
    font-size: 1.35rem;
  }

  /* Avoid iOS focus zoom on inputs (16px minimum) */
  .setup-input,
  input[type='text'],
  input[type='number'],
  input[type='search'] {
    font-size: 16px;
  }

  /* Game-over: fit narrow viewports */
  .app-overlay {
    padding: max(1rem, env(safe-area-inset-top, 0px))
      max(1rem, env(safe-area-inset-right, 0px))
      max(1rem, env(safe-area-inset-bottom, 0px))
      max(1rem, env(safe-area-inset-left, 0px));
    align-items: flex-start;
    overflow-y: auto;
  }

  .game-over-modal {
    max-width: min(400px, 100%);
    margin-block: auto;
  }

  .game-over-card {
    padding: 1.5rem 1.25rem;
  }

  .game-over-title {
    font-size: 1.5rem;
  }

  .game-over-winner {
    font-size: 1.2rem;
  }
}

/* ≤560px — phones */

@media (max-width: 560px) {
  :root {
    --app-pad-x: 0.65rem;
    --app-pad-y: 0.65rem;
  }

  .letterloom-app {
    padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
    padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
  }

  .game-main {
    gap: 0.65rem;
  }

  .board-area {
    gap: 0.5rem;
  }

  .status-panel,
  .score-preview,
  .controls-panel,
  .save-panel {
    padding: 0.75rem;
  }

  /*
   * Sticky rack: stay near the bottom of the viewport while the board-area
   * is on screen. Solid wood-toned backdrop so board cells don’t show through.
   */
  .letterloom-rack {
    position: sticky;
    bottom: 0;
    z-index: 30;
    /* Extend background into safe-area so tiles don’t sit under home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(
      180deg,
      rgba(232, 240, 232, 0) 0%,
      #dfe8df 18%,
      #d4e4d4 100%
    );
    /* Soft lift so sticky rack separates from content scrolling under it */
    box-shadow: 0 -6px 12px -8px rgba(0, 0, 0, 0.18);
  }

  .rack-slots {
    gap: 4px;
    padding: 8px 10px;
  }

  .rack-player-label {
    margin-top: 0.35rem;
    margin-bottom: 0.15rem;
    font-size: 0.8rem;
  }

  /* Touch density: style.css already sets ~44px buttons; reinforce layout only */
  .control-actions .btn-primary {
    flex: 1 1 100%;
    width: 100%;
  }

  .control-actions .btn:not(.btn-primary) {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: calc(50% - 0.25rem);
  }

  .exchange-section .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: calc(50% - 0.25rem);
  }

  .save-actions {
    gap: 0.5rem;
  }

  .save-actions .btn {
    flex: 1 1 auto;
  }

  /* Setup screen */
  .setup-screen {
    min-height: auto;
    align-items: flex-start;
    padding-block: 0.5rem;
  }

  .setup-card {
    padding: 1.25rem 1rem;
    border-radius: 10px;
  }

  .setup-title {
    font-size: 1.85rem;
  }

  .setup-tagline {
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }

  .setup-subtitle {
    margin-bottom: 1.25rem;
  }

  .setup-form {
    gap: 1rem;
  }

  /* Save list: actions under text on narrow screens */
  .setup-save-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
  }

  .setup-save-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .setup-save-actions .btn {
    flex: 1 1 auto;
  }

  .setup-saves-list {
    max-height: min(280px, 40vh);
  }

  .setup-divider {
    margin-bottom: 1.15rem;
  }

  /* Compact status chrome */
  .status-scores,
  .status-bag,
  .status-last-move {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  .direction-hint {
    min-height: 1.5rem;
  }

  .direction-hint-text {
    font-size: 0.8rem;
  }

  .app-message {
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
  }

  .game-over-card {
    padding: 1.25rem 1rem;
  }

  .game-over-title {
    font-size: 1.35rem;
  }

  .game-over-winner {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  .final-scores {
    margin-bottom: 1.15rem;
  }

  .game-over-actions .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* ≤380px — very narrow phones */

@media (max-width: 380px) {
  :root {
    --app-pad-x: 0.5rem;
    --app-pad-y: 0.5rem;
  }

  .setup-title {
    font-size: 1.6rem;
  }

  .setup-card {
    padding: 1rem 0.75rem;
  }

  .rack-slots {
    gap: 3px;
    padding: 6px 8px;
  }

  .control-actions .btn:not(.btn-primary),
  .exchange-section .btn {
    font-size: 0.82rem;
    padding: 0.55rem 0.5rem;
  }

  .status-panel,
  .score-preview,
  .controls-panel,
  .save-panel {
    padding: 0.65rem;
  }

  .preview-total {
    font-size: 1.2rem;
  }
}

/* Prefer reduced motion for rack selection lift */
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .rack-tile.selected .tile-face,
  .rack-tile.exchange-mode.selected .tile-face {
    transform: none;
  }
}