/* Match UI: pre-game side plates, result commentary and the touch hover guard.
   Colours come only from the shared tokens and side identity properties so themes can restyle them. */

/* Pre-game side plates ------------------------------------------------------------------------ */
.pregame-plates { position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .2s; }
[data-referee-phase="ready"] > .pregame-plates,
[data-referee-phase="countdown"] > .pregame-plates { opacity:1; visibility:visible; transition:opacity .25s ease; }
.pregame-plate.side-0 { --side-identity-bg:var(--violet-soft); --side-identity-fg:var(--primary-dark); --side-identity-border:var(--primary); --side-identity-shadow:rgba(29, 79, 159,.3); }
.pregame-plate.side-1 { --side-identity-bg:var(--apricot-soft); --side-identity-fg: var(--player-b-ink); --side-identity-border:var(--coral); --side-identity-shadow:rgba(232,89,12,.3); }
.pregame-plate {
  position:absolute; display:grid; justify-items:center; gap:4px; box-sizing:border-box;
  padding:clamp(10px,1.4vw,18px) clamp(16px,2.4vw,32px); transform:translate(-50%,-50%);
  color:var(--side-identity-fg); background:var(--side-identity-bg);
  border:3px solid var(--side-identity-border); border-radius:22px;
  box-shadow:0 8px 0 var(--side-identity-shadow), 0 18px 40px rgba(15,23,42,.18);
  text-align:center;
}
.pregame-plate[data-anchor="top"] { transform:translate(-50%,0); }
/* Short regions (a Mangala row, half an Abluka board) sit close together: a compact plate keeps both readable. */
.pregame-plate[data-anchor="center"] { padding:6px 16px; border-radius:16px; box-shadow:0 5px 0 var(--side-identity-shadow), 0 12px 28px rgba(15,23,42,.16); }
.pregame-plate[data-anchor="center"] .pregame-plate__line { font-size:clamp(20px,2.4vw,36px); }
.pregame-plate[data-anchor="center"] small { font-size:clamp(11px,1vw,14px); }
.pregame-plate__line { display:flex; align-items:center; gap:.35em; max-width:100%; font-size:clamp(26px,4.2vw,64px); font-weight:900; line-height:1.05; }
.pregame-plate__name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pregame-plate__arrow { flex:none; font-size:.72em; color:var(--side-identity-border); }
.pregame-plate small { font-size:clamp(12px,1.25vw,18px); font-weight:800; letter-spacing:.05em; text-transform:uppercase; opacity:.86; }
.pregame-plate[data-dir="left"] { --plate-from:-44px 0; --plate-nudge:-7px 0; }
.pregame-plate[data-dir="right"] { --plate-from:44px 0; --plate-nudge:7px 0; }
.pregame-plate[data-dir="top"] { --plate-from:0 -32px; --plate-nudge:0 -6px; }
.pregame-plate[data-dir="bottom"] { --plate-from:0 32px; --plate-nudge:0 6px; }
[data-referee-phase="ready"] > .pregame-plates .pregame-plate,
[data-referee-phase="countdown"] > .pregame-plates .pregame-plate { animation:pregame-plate-in .5s cubic-bezier(.2,.9,.3,1.15) both; }
[data-referee-phase="ready"] > .pregame-plates .pregame-plate__arrow,
[data-referee-phase="countdown"] > .pregame-plates .pregame-plate__arrow { animation:pregame-plate-nudge 1.1s ease-in-out .5s infinite; }
@keyframes pregame-plate-in { from { opacity:0; translate:var(--plate-from,0 18px); scale:.92; } }
@keyframes pregame-plate-nudge { 50% { translate:var(--plate-nudge,0 0); } }
@media (max-width:600px), (max-height:560px) {
  .pregame-plate { padding:8px 12px; border-width:2px; border-radius:16px; box-shadow:0 5px 0 var(--side-identity-shadow); }
  .pregame-plate__line { font-size:clamp(20px,6vw,30px); }
  .pregame-plate small { font-size:11px; }
}
body.high-contrast .pregame-plate { color:var(--navy); background:var(--paper); box-shadow:none; }
/* The seat's rim colour stays (#arenaDialog beats an Abluka look): blue and orange at 3:1 or better on white. */
body.high-contrast #arenaDialog .pregame-plate.side-0 { --side-identity-border:var(--player-a); }
body.high-contrast #arenaDialog .pregame-plate.side-1 { --side-identity-border:var(--player-b); }
@media (forced-colors:active) { .pregame-plate { color:CanvasText; background:Canvas; border-color:CanvasText; box-shadow:none; } }
body.reduced-motion .pregame-plates, body.reduced-motion .pregame-plate, body.reduced-motion .pregame-plate__arrow { transition:none; animation:none !important; }
@media (prefers-reduced-motion:reduce) { .pregame-plates, .pregame-plate, .pregame-plate__arrow { transition:none; animation:none !important; } }

/* Result commentary --------------------------------------------------------------------------- */
.arena-result__commentary { display:grid; gap:4px; }
.arena-result__commentary span { display:block; }
.arena-result__commentary span:first-child { font-weight:800; }

/* Touch hover guard: mobile browsers keep :hover at the last tap point and re-apply it after layout
   changes, so an option appearing under the setup's start button looked pre-selected. hub.js marks
   html[data-input] on every pointerdown; answer-target hover rules (ui-overhaul.css, styles.css,
   board-games.css, abluka.css) apply only under html:not([data-input="touch"]). */