/*! © 2026 LogosVox. All rights reserved. Copying, modifying or redistributing this code is not permitted. https://games.logosvox.com/terms */
/*
 * Four in a Row: LogosVox original code. The board is the shared tray with
 * 42 round wells; chips are round keycaps (.lv-piece) in magenta and gold.
 * A column is one tap target, the whole height of the board. The board is
 * the largest it can be on the stage (container units), centred.
 */
.fr-main { gap: 10px; padding-top: 8px; padding-bottom: 10px; max-width: 640px; }
.fr-stage { width: 100%; }
.fr-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.fr-board {
  /* The width that fits the stage (container units); gaps and padding follow it, so the cells stay round. */
  --w: min(100cqw, calc(100cqh * 1.1), 600px);
  --g: calc(var(--w) * 0.018);
  width: var(--w);
  padding: calc(var(--w) * 0.03);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--g);
  border-radius: calc(var(--w) * 0.06);
  touch-action: none;
  cursor: pointer;
}
.fr-col {
  display: flex;
  flex-direction: column;
  gap: var(--g);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fr-col:focus-visible { outline: 2px solid var(--lv-cobalt); outline-offset: 2px; }
.fr-col.is-aim { background: color-mix(in srgb, var(--fr-aim, var(--lv-g-magenta)) 12%, transparent); }
.fr-col:disabled { cursor: default; }
.fr-cell { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; }
.fr-chip {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  --lv-g-piece-r: 50%;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.35), inset 0 -0.22em 0 rgb(0 0 0 / 0.18), 0 1px 2px rgb(13 13 13 / 0.2);
}
.fr-chip.lv-c-gold { --c: var(--lv-g-gold); }
/* Where a chip would land: a faint chip in the aimed column. */
.fr-cell.is-ghost .fr-chip { opacity: 0.32; box-shadow: none; }
/* The winning four: a ring and a glow, pulsing once. */
.fr-cell.is-win .fr-chip { box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.35), 0 0 0 3px var(--lv-void), 0 0 0 5px var(--c), 0 0 18px 4px var(--c); animation: fr-win 900ms var(--lv-ease) 2; }
.fr-board.is-over .fr-cell:not(.is-win) .fr-chip { opacity: 0.55; }
@keyframes fr-win { 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .fr-cell.is-win .fr-chip { animation: none; } }
:root[data-motion="reduce"] .fr-cell.is-win .fr-chip { animation: none; }

/* Whose turn: a dot in the player's colour and a few words. */
.fr-status { margin: 0; min-height: 28px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.fr-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--fr-turn, var(--lv-edge-strong)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.18); }
.fr-status.is-thinking .fr-dot { animation: fr-breathe 900ms ease-in-out infinite alternate; }
@keyframes fr-breathe { from { transform: scale(0.75); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .fr-status.is-thinking .fr-dot { animation: none; } }
.fr-tools .lv-tool { flex-direction: row; gap: 6px; min-height: 44px; padding: 0 14px; font-size: 13px; white-space: nowrap; }

/* Tall phones: status over the board, tools under it. */
@media (max-aspect-ratio: 4/5) {
  /* Status, board and tools together in the middle; the stage is as tall as a full-width board needs. */
  .fr-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: center; justify-content: stretch; justify-items: center; gap: 14px; }
  .fr-side { display: contents; }
  .fr-status { grid-row: 1; }
  .fr-stage { grid-row: 2; width: 100%; aspect-ratio: 1.08; height: auto; justify-self: stretch; }
  .fr-tools { grid-row: 3; }
  #keys { display: none; }
}
/* Phones held sideways: the board at full height, status and tools beside it. */
@media (orientation: landscape) and (max-height: 540px) {
  .fr-main { max-width: none; }
  .fr-stage { width: auto; flex: 1 1 0; align-self: stretch; }
  .fr-tools { flex-direction: column; align-items: stretch; }
}