/* ============================================================================
   RESPONSIVE v2 — collapse game to stacked mobile, reorder arcade HUD
   ============================================================================ */
/* Below this width there isn't room for the side band beside the board. */
@media (max-width: 1100px) {
  .side-logo { display: none; }
  body.game-active .app { padding-left: clamp(16px, 3.5vw, 44px); }
}

@media (max-width: 900px) {
  .screen-game { grid-template-columns: minmax(0, 1fr); }
  .model-panel { flex-direction: column; }
  /* mobile order: header → board → score → goal → lookbook */
  .model-panel .score-block { order: 1; }
  .model-panel .goal-wrap   { order: 2; }
  .model-panel .lookbook    { order: 3; }
  /* on phones show the lookbook feature smaller */
  .look-feature { aspect-ratio: 16/10; }
  .look-feature img { object-position: center 12%; }
}

@media (max-width: 560px) {
  :root { --board-gap: 3px; }
  /* Full-bleed the board: trim outer padding so the 8 columns get the most width
     possible → the largest tiles a phone can fit. */
  body.game-active .app { padding-inline: 6px; padding-block: clamp(8px, 1.6vh, 14px); }
  .board-wrap { padding: 8px; }
  .board-status { padding: 2px 2px 8px; font-size: 9px; }
  /* Show the whole garment (no crop) on phones — larger tiles make cropping obvious. */
  .cell .glyph img { object-fit: contain; }
  .score-num { font-size: 34px; }
  .reward-code { font-size: 18px; padding: 12px 14px; }
  .shop-grid { grid-template-columns: 1fr; }
  .email-form .row-two { grid-template-columns: 1fr; }
  .combo-pop .cx { font-size: 52px; }
}

@media (max-width: 380px) {
  body.game-active .app { padding-inline: 4px; }
  .board-wrap { padding: 6px; }
}