/* Rated games. Loaded after styles.css, board.css and pieces.css.
 *
 * Every colour, radius and shadow here comes from the variables styles.css
 * already defines, so this sheet inherits the house look (chunky solids with a
 * hard "shelf" underneath, never a blurred drop shadow) and follows the theme
 * picker without knowing it exists.
 *
 * PHONE FIRST, and the order on screen is the order in a chess broadcast:
 * opponent above the board, you below it, controls under that. On a 390x844
 * viewport the whole game -- both clocks, the board, the move list and the
 * buttons -- sits on one screen with nothing to scroll to.
 */

.play {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: var(--pad);
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  max-width: 34rem;
  margin: 0 auto;
  font-family: var(--sans);
  color: var(--ink);
}

.play h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 .35rem; }
.play h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .3rem; }
.play .sub { color: var(--dim); font-size: .92rem; line-height: 1.45; margin: 0 0 .8rem; }
.play .err { color: var(--bad); font-size: .92rem; margin: .6rem 0 0; }

/* ---------- buttons ---------- */
.play .btn {
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: var(--radius);
  padding: .7rem 1.1rem;
  min-height: var(--tap);
  cursor: pointer;
  box-shadow: 0 var(--shelf) 0 var(--brand-dk);
  transition: transform .06s ease, box-shadow .06s ease;
}
.play .btn:active {
  transform: translateY(var(--shelf));
  box-shadow: 0 0 0 var(--brand-dk);
}
.play .btn.ghost {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 var(--shelf) 0 var(--rule);
}
.play .btn.ghost:active { box-shadow: 0 0 0 var(--rule); }
.play .btn.danger { background: var(--bad); box-shadow: 0 var(--shelf) 0 var(--bad-dk); }
.play .btn.danger:active { box-shadow: 0 0 0 var(--bad-dk); }

.play .link {
  font: inherit;
  font-weight: 600;
  color: var(--brand-lt);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- pairing ---------- */
.pools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.pool {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .6rem .3rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 var(--shelf) 0 var(--rule);
  transition: transform .06s ease, box-shadow .06s ease;
}
.pool:active { transform: translateY(var(--shelf)); box-shadow: 0 0 0 var(--rule); }
.pool .t { font-weight: 700; font-size: 1.05rem; }
.pool .c { font-size: .72rem; color: var(--dim); text-transform: capitalize; }

.play .signin { margin-top: 1rem; }

/* Three dots, because a spinner implies a network wait and most of this beat is
   the server picking from a pool. Switched off under reduced motion at the
   bottom of the file. */
.pulse { display: flex; gap: .5rem; margin-top: 1rem; }
.pulse i {
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--brand);
  animation: playPulse 1.1s ease-in-out infinite;
}
.pulse i:nth-child(2) { animation-delay: .15s; }
.pulse i:nth-child(3) { animation-delay: .3s; }
@keyframes playPulse {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-.28rem); }
}

/* ---------- the game ---------- */
.play-game { display: flex; flex-direction: column; gap: .5rem; }

.pcard {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: .5rem .7rem;
  min-height: 3.25rem;
}
button.pcard { cursor: pointer; }

.pcard .av {
  flex: 0 0 auto;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  background: var(--card-2);
  color: var(--ink);
}
.pcard.me .av { background: var(--brand); color: #fff; }

.pcard .who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pcard .nm {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard .flag { margin-left: .3rem; }
.pcard .sub { font-size: .78rem; color: var(--dim); }

/* The clock. Tabular figures so the digits do not jitter as they change --
   a clock that reflows every tenth of a second is unreadable under 10s, which
   is exactly when people are looking at it. */
.pcard .clock {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 600;
  padding: .25rem .55rem;
  border-radius: .7rem;
  background: var(--surface);
  color: var(--dim);
  min-width: 4.2rem;
  text-align: center;
}
/* Only the side to move is lit, so which clock is running is readable without
   reading either number. */
.pcard .clock.live { background: var(--ink); color: var(--bg); }
.pcard .clock.low { color: var(--bad); }
.pcard .clock.live.low { background: var(--bad); color: #fff; }

.pboard { width: 100%; }

/* board.css puts the file letters at `left: 24px; width: 100%`, so the row of
   A-H is the full width of the board shifted 24px right: the letters sit off
   centre under their files and H hangs past the right edge. On a 390px phone
   that was 8px of horizontal page scroll, which is the one layout fault a
   screenshot does not show.
 *
 * Corrected here and scoped to this view rather than in board.css, which is
 * shared and belongs to another workstream -- but it is a fault there and every
 * board on the site has it. Flagged in the handover. */
.pboard .cg-wrap coords.files { left: 0; }

.pline { margin: .1rem 0 0; font-size: .95rem; min-height: 1.3em; }
.pline b { font-weight: 600; }
.pline span { color: var(--dim); }

/* One line, scrolled horizontally. A wrapping move list is the single biggest
   consumer of vertical space on a phone and the only move anyone looks at
   mid-game is the last one. */
.pmoves {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  white-space: nowrap;
  font-size: .85rem;
  color: var(--dim);
  min-height: 1.4rem;
  scrollbar-width: none;
}
.pmoves::-webkit-scrollbar { display: none; }
.pmoves .mv b { color: var(--ink); font-weight: 600; }

.pmeta { margin: 0; font-size: .75rem; color: var(--dim); }

.pactions { display: flex; gap: .5rem; }
.pactions .btn { flex: 1 1 auto; }

/* ---------- the result ---------- */
.pover {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pover .rating { margin: 0; font-size: 1.05rem; }
.pover .rating .lab { color: var(--dim); font-size: .85rem; }
.pover .sub { margin: 0; }
.delta { font-weight: 700; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }

/* ---------- sheets ----------
   Anchored to the bottom rather than centred: on a phone the bottom of the
   screen is where the thumb is, and a promotion choice has to be answerable
   without moving your grip. */
.psheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(0 0 0 / .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.psheet[hidden] { display: none; }
.psheet-in {
  width: 100%;
  max-width: 34rem;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1.1rem;
  padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.psheet .lab { margin: 0; font-size: .85rem; color: var(--dim); }
.psheet .sub { margin: 0; }

.promo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.promo-b {
  border: 0;
  padding: .35rem;
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  box-shadow: 0 var(--shelf) 0 var(--rule);
}
.promo-b:active { transform: translateY(var(--shelf)); box-shadow: 0 0 0 var(--rule); }
/* The artwork is pieces.css's, reached through its own selector rather than
   copied. board.css sizes a piece at 12.5% because it lives on a board; here
   one piece fills its button, and the move transition is off because nothing
   is moving. */
.promo-b .cg-wrap { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; }
.promo-b .cg-wrap piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  transition: none;
}

/* ---------- desktop ----------
   Wider than a phone the board stops growing, because a board that fills a
   laptop is a board you drag pieces across rather than play on. One column
   still, just capped and centred: the phone order (opponent, board, you) is
   the right order at every width, and a second column would only move the move
   list somewhere nobody is looking. */
@media (min-width: 48rem) {
  .play { max-width: 40rem; }
  .pboard { max-width: 32rem; margin: 0 auto; width: 100%; }
  .pmoves { white-space: normal; flex-wrap: wrap; overflow: visible; }
  .pools { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse i { animation: none; opacity: .6; }
  .play .btn, .pool, .promo-b { transition: none; }
}