/* Falling Blocks layout. Shared pieces live in base.css and game.css. */
.game{
  position:relative;z-index:1;
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:128px auto 128px;
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "hold  board next"
    "stats board next";
  justify-content:center;align-content:start;
  gap:14px;
  padding:4px clamp(16px,4vw,32px) 24px;
}
.hold{grid-area:hold}
.stats{grid-area:stats;align-self:start}
.next{grid-area:next;align-self:start}
.board-wrap{grid-area:board}

/* ---- Phones & tablets ---- */
@media (max-width:700px),(pointer:coarse){
  .game{
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "hold  stats next"
      "board board board";
    justify-content:stretch;justify-items:center;
    gap:8px;
    padding:0 16px 8px;
  }
  .hold,.next{justify-self:stretch}
  .board-wrap{align-self:center}
  .stats{
    justify-self:stretch;
    grid-template-columns:repeat(4,1fr);gap:4px;
    padding:8px 6px;
  }
}

/* ---- Phones held sideways: controls flank the board ---- */
@media (orientation:landscape) and (max-height:520px){
  body.play{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:
      "bar   board next"
      "stats board hold"
      ".     board ."
      "dpad  board face";
    gap:8px;
    padding:8px max(16px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  }
  body.play > .game, body.play > .touch{display:contents}
  .bar{grid-area:bar;padding:0}
  .board-wrap{grid-area:board;align-self:center}
  .hold,.next{flex-direction:row;justify-content:space-between;padding:8px 12px}
  .stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .dpad{grid-area:dpad;justify-self:center}
  .face{grid-area:face;justify-self:center}
}