/* Status — player chips, turn indicator, score, move counter, result banner.
   Markup:
     <div class="status">
       <div class="player is-current"> <span class="piece piece--inline piece--dark"></span>
         <div class="player__meta"><span class="player__name">You</span><span class="player__sub">Black</span></div>
         <span class="player__score t-num">7</span></div>
       <div class="status__mid"><span class="t-eyebrow">Move</span><span class="t-num">14</span></div>
       <div class="player"> ... </div>
     </div> */

.status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-2);
  width: min(100%, var(--board-max));
  margin-inline: auto;
}

.player {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  min-width: 0;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.player--right { flex-direction: row-reverse; text-align: right; }
.player__meta { display: flex; flex-direction: column; min-width: 0; line-height: var(--lh-tight); }
.player__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--fg-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player__sub { font-size: var(--fs-xs); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__score {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: var(--num-tabular);
  color: var(--fg-strong);
}
.player--right .player__score { margin-left: 0; margin-right: auto; }

/* Current turn: gold edge + soft pulse */
.player.is-current {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 1px var(--gold-500), var(--shadow-2);
}
.player.is-current .player__sub { color: var(--gold-700); font-weight: var(--fw-semibold); }
.player.is-current .piece--inline { animation: turn-pulse 2s var(--ease-out) infinite; }
.player.is-winner { border-color: var(--success-500); box-shadow: 0 0 0 1px var(--success-500), var(--shadow-2); }
.player.is-thinking .player__sub::after { content: "…"; }

@keyframes turn-pulse {
  0%, 100% { box-shadow: var(--shadow-piece), 0 0 0 0 var(--gold-ring); }
  60% { box-shadow: var(--shadow-piece), 0 0 0 var(--space-2) transparent; }
}

.status__mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  min-width: calc(var(--space-7) * 2);
  line-height: var(--lh-tight);
}
.status__mid .t-num { font-size: var(--fs-lg); }

/* Turn line under the status (or standalone) */
.turn-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-7);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  text-align: center;
  text-wrap: balance;
}
.turn-line--win { color: var(--success-700); font-weight: var(--fw-bold); }
.turn-line--lose { color: var(--danger-700); font-weight: var(--fw-bold); }

/* Result banner (end of game, above the board or inside a modal) */
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-500);
  background: linear-gradient(180deg, var(--surface-raised), var(--parchment-100));
  box-shadow: 0 0 0 1px var(--gold-200) inset, var(--shadow-2);
  text-align: center;
}
.result__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--fg-strong); line-height: var(--lh-tight); }
.result__sub { font-size: var(--fs-sm); color: var(--fg-muted); }

/* Timer */
.timer { display: inline-flex; align-items: center; gap: var(--space-1); font-variant-numeric: var(--num-tabular); font-weight: var(--fw-semibold); }
.timer .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--wood-500); }
.timer.is-low { color: var(--danger-700); }
.timer.is-low .icon { color: inherit; }

/* Move log */
.movelog { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); font-variant-numeric: var(--num-tabular); }
.movelog li { display: grid; grid-template-columns: 2.5em 1fr 1fr; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); }
.movelog li:nth-child(odd) { background: var(--tint); }
.movelog li.is-current { background: var(--gold-200); color: var(--ink-900); }
.movelog .movelog__n { color: var(--fg-muted); }

@media (max-width: 420px) {
  .player { padding: var(--space-2); gap: var(--space-1); }
  .player__score { font-size: var(--fs-lg); }
  .status__mid { padding: 0 var(--space-1); min-width: var(--space-9); }
}