/* Play screen: the fused column's top — screen box, turn banner, player bar. */
/* WHERE the play columns sit is screens/play-layout.css's, including every custom property the
   grid and board-fit.js read. What stays here is the screen's own box and its components. */
.game-screen { max-width: 1600px; padding: 10px; gap: 0; }
/* Dense screen: tighter than the shell's 4rem gutters to buy board width. */
.app-content > .game-screen { padding: 0.625rem 1rem 1rem; }
/* The fused play column (.board-area: banner, player bar, group status, eval bar, board) is the
   exception to the shell gutter; the side columns take it back with their own padding, which
   play-layout.css sets. */
@media (max-width: 640px) {
  .app-content > .game-screen { padding: 0.5rem 0.25rem 0.75rem; }
}

/* Top segment of the fused column: top radius only, no bottom border. */
.turn-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px; font-size: 0.82rem; font-weight: 600;
  border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  letter-spacing: 0.02em;
  min-height: 36px; box-sizing: border-box;
}
.turn-banner-offline { display: none; }
.turn-banner-your-turn       { background: var(--laurel-gradient); color: #fff; border-color: transparent; }
.turn-banner-opponent-turn   { background: var(--bg-card); color: var(--text-muted); }
.turn-banner-you-respond     { background: var(--accent-red); color: #fff; }
.turn-banner-opponent-responds { background: color-mix(in srgb, var(--bronze-deep) 75%, var(--bg-0)); color: var(--gold); }
.tb-label    { font-weight: 700; }
.tb-sublabel { font-size: 0.72rem; opacity: 0.85; font-weight: 400; }
/* Label / sublabel / stake chip each ship a glyph beside their words; the pair swaps at ≤640 (block below). */
.tb-label .tb-ico,
.tb-sublabel .tb-ico,
.tb-chip .tb-ico { display: none; }
/* Pills reserve full size via min-width + line-height so empty→filled doesn't change banner height. */
.tb-timers       { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-variant-numeric: tabular-nums; }
/* Sits against the clocks rather than floating mid-banner: the banner is space-between, so
   auto margin is what pulls this and .tb-timers to the right together. */
.tb-watching {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
/* The banner carries only what the player bar does NOT: the response countdown and the idle
   warning. The turn clock lives in the player bar, per seat — two on one screen read as a bug. */
.tb-resp-timer   {
  font-family: var(--font-mono, monospace); font-weight: 700; font-size: 0.85rem;
  padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,0.18);
  letter-spacing: 0.02em;
  min-width: 42px; text-align: center;
  line-height: 1.2;
  display: inline-block;
}

.tb-opp-dc {
  font-family: var(--font-mono, monospace); font-weight: 700; font-size: 0.85rem;
  padding: 2px 10px; border-radius: 10px; background: color-mix(in srgb, var(--bronze-deep) 60%, transparent);
  color: var(--gold); letter-spacing: 0.02em;
  min-width: 70px; text-align: center; line-height: 1.2; display: inline-block;
}
.tb-timer-paused   { opacity: 0.5; text-decoration: line-through; }
.tb-timer-warning  { color: var(--accent-gold); background: rgba(0,0,0,0.35); }
.tb-timer-critical { color: #fff; background: var(--accent-red); animation: tb-critical-pulse 0.9s ease-in-out infinite; }
.tb-ai-opp {
  font-weight: 700; font-size: 0.72rem;
  padding: 2px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--lapis-2) 18%, transparent);
  color: var(--lapis-2);
  text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1.2; display: inline-flex; align-items: center; gap: 4px;
}
/* Rated/Casual + mode·time-control chips in the turn banner (prototype). */
.tb-chip {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.2); color: inherit;
  text-transform: uppercase; line-height: 1.3; white-space: nowrap;
}
/* In the banner's own chip row, so it adds no column height and the board never shifts.
   Red carries no meaning for a dichromat here — the words, the ⚠ and the blink do.
   .tb-txt clips at ≤640 like every chip, leaving the compact form in .tb-ico. */
.tb-chip-idle {
  background: var(--porphyry); color: #fff;
  text-transform: none; letter-spacing: 0.01em; font-weight: 700;
  animation: tb-idle-blink 1.6s ease-in-out infinite;
}
@keyframes tb-idle-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* Banner states are coloured, so the decap crown inherits the banner colour — the shared porphyry mark is invisible on the laurel state. Upright vs toppled still carries the rule. */
.turn-banner .decap-mark { color: inherit; }
@keyframes tb-critical-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.65; } }
@media (prefers-reduced-motion: reduce) { .tb-timer-critical, .tb-chip-idle { animation: none; } }
/* Drops top radius when banner is above; handles both direct-sibling + wrapped-header shapes. */
.turn-banner:not(.turn-banner-offline) + .pbar,
.play-board-header + .pbar { border-radius: 0; }

/* Slim row [turn-banner | rotate | AI panel], mirrors .deploy-board-header. */
.play-board-header {
  display: flex;
  align-items: stretch;
  gap: 8px;
  /* Full width — top segment of the fused column. */
}
.play-board-header > .turn-banner { flex: 1 1 auto; min-width: 0; }

/* Player bar — one segment of the fused column: side borders only, no radius. */
.pbar {
  background: var(--bg-1);
  /* Explicit so text stays legible under the light-theme dark re-pin. */
  color: var(--ink);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 0;
  padding: 3px 12px 5px;
  font-size: 0.82rem;
}

.pbar-head,
.pbar-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.5fr) minmax(48px, 0.8fr) minmax(48px, 0.8fr) minmax(44px, 0.7fr) minmax(44px, 0.7fr) minmax(88px, 1.3fr);
  align-items: center;
  gap: 10px;
}
.pbar-head {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-4); padding: 2px 0;
}
.pbar-row { padding: 5px 0; border-top: 1px solid var(--divider); }
.pbar-row.active {
  background: linear-gradient(90deg, rgba(184, 155, 95, 0.08), transparent 55%);
}
/* padding, not margin: the row is a grid track, so a margin would shrink the name's own
   ellipsis budget rather than inset the dot from the panel edge. */
.pbar-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding-left: 5px; }
.pbar-name { font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar-row.active .pbar-name { color: var(--text-primary); }
.pbar-rating { color: var(--text-muted); font-size: 0.74rem; }
.pbar-cell { color: var(--text-secondary); white-space: nowrap; }
.pbar-clock { font-weight: 700; color: var(--text-primary); }
.pbar-faint { color: var(--text-muted); opacity: 0.55; }
.pbar-abils { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pbar-row:not(.active) .pool-badge { opacity: 0.5; }

.pb-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pb-dot-mine { background: var(--eval-mine); }
.pb-dot-them { background: var(--eval-them); }
.mp-icon {
  display: inline-flex; align-items: center;
  vertical-align: middle;
  margin-right: 0.3em;
  line-height: 1;
}
.mp-icon .unit-pip { width: 1em; height: 1em; border-width: 1px; flex-shrink: 0; }
/* Mobile: 6 columns won't fit. The CLOCK stays — not knowing how long either side has left is
   worse than not seeing a rating — so the rating and the General column are what go. The name
   column floors at 0 so a long username ellipses instead of squeezing the numbers. */
@media (max-width: 640px) {
  .pbar-head, .pbar-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(46px, 0.9fr) minmax(36px, 0.7fr) minmax(36px, 0.7fr) minmax(36px, 0.7fr);
    gap: 6px;
  }
  .pbar-head > *:nth-child(6), .pbar-row > *:nth-child(6) { display: none; }
  .pbar-rating { display: none; }
}

@media (max-width: 640px) {
  /* Clipped, not display:none — an `aria-label` on a generic span is not announced, so the words
     have to stay in the accessibility tree while the glyph carries the pixels. */
  .tb-label .tb-txt,
  .tb-sublabel .tb-txt,
  .tb-chip .tb-txt {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .tb-label .tb-ico,
  .tb-sublabel .tb-ico,
  .tb-chip .tb-ico { display: inline; }
  .tb-label .tb-ico { font-size: 0.95rem; line-height: 1; }
  .tb-sublabel .tb-ico { font-variant-numeric: tabular-nums; }
  /* Respond states have no short form; hiding the words would leave an empty gap. */
  .tb-sublabel.tb-sub-nosm { display: none; }
  .tb-chip { padding: 2px 6px; }
}