/* responsive.css — fitting phones, tablets, desktops and landscape.
   Phone portrait is the default (single column, ≤540px wide). */

/* ── tablets & desktops: wider frame, side-by-side layouts ── */
@media (min-width: 760px) {
  #app { max-width: 1120px; gap: 18px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
  .hero h1 { font-size: 46px; }
  .hero .rack { width: 120px; height: 104px; }
  .resume, .sect, .games, .tools, .foot, .hero { width: 100%; max-width: 900px; margin-inline: auto; }
  .games { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .games .gcard:last-child:nth-child(odd) { grid-column: auto; min-height: 150px; flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .games .gcard:last-child:nth-child(odd) .mini { position: absolute; }
  .gcard { min-height: 150px; padding: 20px 18px 18px; }
  .gcard b { font-size: 22px; }
  .gcard .mini { width: 56px; height: 56px; }

  /* setup: players | options, rules underneath */
  .setupgrid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .setupgrid > :last-child { grid-column: 1 / -1; }
  .btn.start { max-width: 420px; margin-inline: auto; }

  /* play: score on one side, the ball pad on the other */
  .playgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 18px; align-items: start; }
  .col-pad { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); }
  .board:not(.two) { grid-template-columns: 1fr 1fr; }
  .board:not(.two) .pl { display: block; }
  .board:not(.two) .pl .sc { font-size: clamp(40px, 5vw, 64px); }
  .board.two .pl .sc { font-size: clamp(54px, 7vw, 96px); }
  .pl { padding: 16px 18px; }
  .pl .nm { font-size: 17px; }
  .stat b { font-size: 28px; }

  /* draw, history, settings stay a comfortable reading width */
  [data-view="draw"] > :not(.top), [data-view="history"] > :not(.top), [data-view="settings"] > :not(.top) { width: 100%; max-width: 620px; margin-inline: auto; }

  /* sheets become centred dialogs */
  .sheet { align-items: center; }
  .sheet .body { max-width: 520px; border-radius: 28px; border: 1px solid rgba(244,239,227,.15); animation: pop .3s var(--ease); }
  .sheet .grab { display: none; }
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } }

@media (min-width: 1100px) {
  .games { grid-template-columns: repeat(5, 1fr); max-width: 1100px; }
  .resume, .sect, .tools, .foot, .hero { max-width: 1100px; }
  .playgrid { grid-template-columns: minmax(0, 1fr) 460px; }
}

/* ── phones held sideways: two columns, everything compact ── */
@media (orientation: landscape) and (max-height: 520px) {
  #app { max-width: none; gap: 8px; padding-top: calc(env(safe-area-inset-top, 0px) + 4px); }
  .top { min-height: 40px; }
  .top h1 { font-size: 17px; }
  .playgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .col-score, .col-pad { gap: 8px; }
  .pl { padding: 8px 12px; }
  .pl .sc { font-size: 34px !important; }
  .board:not(.two) { grid-template-columns: 1fr 1fr; }
  .stat { padding: 4px; }
  .stat b { font-size: 18px; }
  .panel { padding: 10px; gap: 8px; }
  .pad { grid-template-columns: repeat(8, 1fr); gap: 6px; }
  .pad.pool { grid-template-columns: repeat(8, 1fr); }
  .ball { max-width: 52px; }
  .hint { font-size: 12px; min-height: 0; }
  .act { padding: 9px 6px; font-size: 13px; }
  .games { grid-template-columns: repeat(3, 1fr); }
  .gcard { min-height: 100px; }
  .setupgrid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .setupgrid > :last-child { grid-column: 1 / -1; }
  .bigball, .mystery { width: 130px; height: 130px; }
}

/* ── very small phones (iPhone SE, small Androids) ── */
@media (max-width: 360px) {
  .pl .sc { font-size: 38px; }
  .board:not(.two) .pl .sc { font-size: 32px; }
  .pad { gap: 10px 6px; }
  .act { font-size: 14px; padding: 13px 6px; }
  .hero h1 { font-size: 30px; }
}

/* ── pool ball pads: 9/10 balls in two even rows ── */
.pad.pool[data-balls="9"], .pad.pool[data-balls="10"] { grid-template-columns: repeat(5, 1fr); }
.pad.three { grid-template-columns: repeat(3, 1fr); }
@media (orientation: landscape) and (max-height: 520px) {
  .pad.pool[data-balls="9"], .pad.pool[data-balls="10"] { grid-template-columns: repeat(5, 1fr); }
  .pad.three { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 760px) { .pad .ball, .pad .ghostball { max-width: 84px; } .pad.pool .ball { max-width: 72px; } }
@media (min-width: 760px) {
  [data-view="learn"] > :not(.top) { width: 100%; max-width: 1000px; margin-inline: auto; }
  .lessons { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .lesson:has(.figure) { grid-column: 1 / -1; }
  [data-view="learn"] .btn.brass { max-width: 420px; }
}