/* Sobrecarga - Phones and small screens. */
/* ---------- Responsive ---------- */
@media (max-width:980px){
  #table{min-height:66dvh}
}
@media (max-width:620px){
  /* Phones: no room beside the zone, so every opponent sits above it, three
     per row in turn order (the DOM order of the seats already is turn order).
     A short last row is centred. */
  #table{
    display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;
    gap:14px 8px;
  }
  .top-row{display:contents}
  .seat{flex:0 0 calc((100% - 16px) / 3);min-width:0}
  .seat-box{min-width:0;padding:7px 7px 6px}
  .center{flex:1 1 100%;padding-top:10px}   /* room for the zone label */
  .hand-area{flex:1 1 100%}
  .piles{gap:16px}
  #prompt{font-size:calc(10.5px * var(--s))}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}