/* Motion + Responsive */
@keyframes gridPulse{
  0%{ transform:translateY(0); opacity:1; }
  45%{ transform:translateY(-1px); opacity:.95; }
  100%{ transform:translateY(0); opacity:1; }
}

@keyframes selectedPulse{
  0%{ box-shadow:0 0 0 1px rgba(255,255,255,.34), 0 0 12px -10px var(--piece-accent); }
  50%{ box-shadow:0 0 0 1px rgba(255,255,255,.45), 0 0 24px -8px var(--piece-accent); }
  100%{ box-shadow:0 0 0 1px rgba(255,255,255,.34), 0 0 12px -10px var(--piece-accent); }
}

@keyframes statusPulse{
  0%{ transform:translateY(1px); opacity:.8; }
  100%{ transform:translateY(0); opacity:1; }
}

@keyframes btnPress{
  0%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(1px) scale(.985); }
  100%{ transform:translateY(0) scale(1); }
}

@keyframes stageShake{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-3px); }
  50%{ transform:translateX(3px); }
  75%{ transform:translateX(-2px); }
}

@keyframes stagePop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.005); }
  100%{ transform:scale(1); }
}

@keyframes stageUndo{
  0%{ transform:scale(1); }
  40%{ transform:scale(.996); }
  100%{ transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .orb-a,
  .orb-b,
  .starfield,
  .shooting,
  .grain{
    animation:none !important;
  }

  .pieceGrid.pulse-grid,
  .pieceBtn.selected,
  .statusText.flash-status,
  .btn.flash-press,
  #board.shake,
  .stageFrame.place-pop,
  .stageFrame.undo-pop{
    animation:none !important;
  }
}

@media (min-width: 861px){
  .layout{
    column-gap:14px;
  }
}

@media (max-width: 860px){
  body{
    display:block;
    min-height:100dvh;
    overflow-y:auto;
  }

  .layout{
    display:block;
    height:auto;
    min-height:max-content;
    padding:8px;
  }

  .infoCard,
  .stage,
  .pieces{
    width:100%;
    margin:0;
  }

  .infoCard{ margin-bottom:12px; }

  .scoreList{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:4px;
  }

  .scoreRow{
    min-height:38px;
  }

  .stage{
    display:block;
    padding-bottom:12px;
    margin-bottom:12px;
  }

  .stageFrame{
    --mobile-board-cap:min(50dvh, calc(100dvh - 320px));
    width:min(92dvw, max(180px, var(--mobile-board-cap)));
    max-height:max(180px, var(--mobile-board-cap));
    max-width:640px;
    margin-inline:auto;
  }

  .pieces{
    margin-top:0;
    position:static;
    z-index:auto;
  }

  .pieceGrid{
    max-height:min(30dvh, 260px);
    overflow:auto;
    padding-right:0;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    justify-items:stretch;
  }

  .pieceBtn{
    max-width:none;
    padding:3px;
  }

  .pieceBtn canvas{ aspect-ratio:2/1; }

  .ctrl-btn,
  .btn-pass-rail,
  .btn-rail{
    min-height:42px;
  }
}

@media (max-width: 540px){
  .transformControls{
    gap:6px;
  }

  .pieceGrid{
    max-height:min(24dvh, 200px);
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .pieceBtn{
    max-width:none;
    padding:3px;
  }

  .ctrl-btn,
  .btn-pass-rail,
  .btn-rail{
    min-height:40px;
  }
}

@media (max-width: 860px) and (max-height: 760px){
  .stageFrame{
    --mobile-board-cap:min(44dvh, calc(100dvh - 340px));
    width:min(92dvw, max(170px, var(--mobile-board-cap)));
    max-height:max(170px, var(--mobile-board-cap));
  }

  .pieceGrid{ max-height:min(20dvh, 145px); }
}