/* PlayCalm Four in a Row (the shared look is in assets/css/duel.css). A calm frame with round holes; discs fall gently. */
.fr-board {
  display: grid; grid-template-columns: repeat(7, 1fr); width: min(100%, 520px); margin: 0 auto; direction: ltr;
  background: var(--secondary); border: 3px solid var(--border-strong); border-radius: 18px; padding: 6px; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.fr-col {
  display: grid; grid-template-rows: repeat(6, 1fr); gap: 0; padding: 0; border: 0; border-radius: 12px; background: transparent;
  cursor: pointer; min-width: 0; min-height: 48px;
}
.fr-col[aria-disabled="true"] { cursor: default; }
.fr-col:focus-visible { outline: 3px solid var(--star); outline-offset: -3px; }
.fr-col.cur:focus-visible, .fr-col:focus-visible { background: color-mix(in srgb, var(--star) 14%, transparent); }
@media (hover: hover) and (pointer: fine) { .fr-col:not([aria-disabled]):hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } }
.fr-cell { position: relative; aspect-ratio: 1; margin: 7%; border-radius: 50%; background: var(--card); box-shadow: inset 0 2px 4px rgba(0,0,0,.14); }
.fr-cell .mk { position: absolute; inset: 4%; width: 92%; height: 92%; }
.fr-cell.last .mk { animation: fr-drop calc(.16s + var(--fall) * .06s) cubic-bezier(.45, 0, .7, 1); }
.fr-cell.win { box-shadow: 0 0 0 4px var(--star); }
.fr-ghost { display: none; }
.fr-ghost .mk { opacity: .3; }
@media (hover: hover) and (pointer: fine) { .fr-board:not(.busy) .fr-col:not([aria-disabled]):hover .fr-ghost { display: block; } }
.fr-board:not(.busy) .fr-col:not([aria-disabled]):focus-visible .fr-ghost { display: block; }
.fr-board.busy .fr-col { cursor: progress; }
@keyframes fr-drop { from { transform: translateY(calc(var(--fall) * -116%)); } to { transform: none; } }
.bd-still .fr-cell.last .mk { animation: none; }   /* reduced motion (decided in duel.js): the disc simply appears */

/* Phones: the board uses the card's whole width (no inner padding) so each column is at least 48 px wide from 372 px up
   (390 px screen: about 50 px). Below 372 px seven 48 px columns cannot fit, so a bar of 48 px buttons appears under the board. */
.fr-pick { display: none; direction: ltr; grid-template-columns: 56px 1fr 56px; gap: 8px; margin-top: 10px; }
.fr-pick .btn { min-height: 52px; font-size: calc(18px * var(--fs, 1)); white-space: nowrap; padding: 0 8px; }
@media (max-width: 480px) {
  .fr-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .fr-board { border-width: 2px; padding: 0; border-radius: 14px; }
}
@media (max-width: 371px) { .fr-pick { display: grid; } .fr-col.cur { background: color-mix(in srgb, var(--star) 16%, transparent); } }

/* Full screen for play: seven columns by six rows, as large as the screen allows */
:root[data-focus="on"] .fr-board { width: 100%; }
:root[data-focus="on"] .bd-stage { --bd-w: min(100cqw, (var(--pc-fy) - 210px) * 7 / 6); }
@media (orientation: landscape) { :root[data-focus="on"] .bd-stage { --bd-w: min((var(--pc-fy) - 16px) * 7 / 6, 60cqw); } }
/* color-blind support: the four winning discs get a dashed ring as well */
html.pc-cb .fr-cell.win { outline: 3px dashed var(--text); outline-offset: 2px; }