/* Moved out of app.css as it was, rule for rule and in the same order (#547), so the picker can
   choose this file's specs: The match HUD the arena games share (pg-: the cards, the round pill, Pause, the banner, the feed,
   the pause dialog and the results table) and reduced motion's rules for it.
   index.html loads it right after app.css, where these rules stood. */

/* ------------------------------------------------------------ Polygone HUD (visuals.md 6.5)
   The match frame every game shares, in A · Console's look (#411; docs/plans/console-redesign.md
   2.7): black rounded cards (the shape, the name, who plays it on the second line), the round or
   clock in a black pill at the top with its goal part in yellow, a black Pause pill, banners, the
   feed and the toast as black pills. The 3D world, the cards' sizes and the HUD's insets are as
   they were. */

.pg-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}

.pg-hud button,
.pg-hud .pg-dialog {
  pointer-events: auto;
}

.pg-tag {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
  font-weight: 900;
  font-size: max(var(--fs-small), 0.8em);
}

.pg-tag span {
  padding: 0.05em 0.5em;
  border-radius: 0.5em;
  background: var(--c);
  color: var(--ink);
  white-space: nowrap;
}

.pg-tag i {
  width: 0;
  height: 0;
  border: 0.4em solid transparent;
  border-top-color: var(--c);
  border-bottom: 0;
}

.pg-token {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--ui);
  border: 2px solid var(--ui-text);
  font-size: 1.1em;
  will-change: transform;
}

.pg-top {
  position: absolute;
  top: calc(1.1em - 2 * var(--pill-y) + var(--sa-t, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The pill's sizes are the plan's (3.2): as before at 100 % text, and they grow slower than the
   text, so at 200 % the top keeps to one line. */
.pg-round {
  font-weight: 900;
  font-size: var(--fs-heading);
  white-space: nowrap;
}

/* The pill: the round line or the clock on black. Its padding is in rem and .pg-top sits twice that
   higher, so the pill's bottom (the top inset the camera keeps clear) is where the text's was. */
:root {
  --pill-y: 0.15rem;
}

:is(.pg-round, .sg-timer, .tg-clock, .br-top, .cl-top, .pm-top):not(:empty) {
  padding: var(--pill-y) 0.7em;
  border-radius: var(--r-pill);
  background: var(--bg);
}

/* A clock or round inside a game's own pill (Blast Radius, Collinear, Perimeter) is part of it. */
:is(.br-top, .cl-top, .pm-top) > :is(.pg-round, .tg-clock):not(:empty) {
  padding: 0;
  background: none;
}

.pg-round span {
  color: var(--ui-dim);
  font-size: max(var(--fs-small), 0.7em);
}

/* Its goal part ("· first to 3"): yellow text, the one place a yellow word may be (3.1). A clock in
   it keeps its warning colour. */
.pg-round > span:not([class]),
.pg-round > span:not([class]) span:not(.low) {
  color: var(--do);
}

/* A banner: a black pill ringed in its player's colour. It wraps inside the room between the card
   columns (--mid-w, hud-layout.css; on a big screen at least 400 px, --pop-w) instead of running over
   them or off the screen (#236). */
.pg-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.4em;
  width: max-content;
  max-width: var(--pop-w, var(--mid-w, 92vw));
  margin-top: 0.4em;
  padding: 0.35em 1em;
  border-radius: var(--r-l);
  background: var(--bg);
  border: 2px solid var(--c, transparent);
  font-weight: 800;
  text-align: center;
  opacity: 0;
  transform: translateY(-0.4em) scale(0.95);
}

/* It fades in, and goes at once: the frame's places key on .show (a message under the bar, the
   hints stepping aside: hud-layout.css), so a banner still fading out would lie over what took its
   place for 0.2 s (#552). */
.pg-banner.show {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.pg-banner b {
  font-weight: 900;
  font-size: 1.15em;
}

/* The ability icon in the Siegeometry banner takes the seat's colour (as today's game). */
.pg-banner .icon {
  display: grid;
  color: var(--c);
}

.pg-count {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 6em;
  font-weight: 900;
  text-shadow: 0 0.06em 0.3em var(--shadow);
  opacity: 0;
}

.pg-count.show {
  animation: pg-count 0.9s ease-out forwards;
}

@keyframes pg-count {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

.pg-feed {
  position: absolute;
  top: 3.6em;
  inset-inline-end: 1.4em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3em;
  font-size: max(var(--fs-small), 0.8em);
  font-weight: 800;
}

/* A long line wraps between its parts first (a name, the words, the other name). */
.pg-feed-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.3em;
  max-width: 100%;
  padding: 0.2em 0.7em;
  border-radius: var(--r-m);
  background: var(--bg);
  transition: opacity 0.5s;
}

.pg-feed-line span {
  color: var(--ui-dim);
}

.pg-feed-line.gone {
  opacity: 0;
}

.pg-panel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  /* Never wider than half the screen (big text on a phone); #72 must 6 brings the small-screen HUD. */
  width: min(14em, 50vw - 2em);
}

/* TV text is bigger (28 px): narrower cards and the round line closer to the top keep the HUD
   about as big as before, so visuals.md's framing still fits between them. */
@media (min-width: 1800px) {
  .pg-panel {
    width: min(11em, 50vw - 2em);
  }

  /* Their margin or the TV's safe area, whichever is more (#502): --sa-t counts 1rem of margin, and
     these have less (at 200 % --sa-t is 0 and the pill was 5 px from the top). */
  .pg-top {
    top: max(calc(0.4em - 2 * var(--pill-y)), var(--safe-top));
  }

  .pg-hud .pg-pause-btn {
    top: max(calc(0.4rem - 2 * var(--pill-y)), var(--safe-top));
  }
}

:root.tv .pg-panel {
  width: min(11em, 50vw - 2em);
}

:root.tv .pg-top {
  top: max(calc(0.4em - 2 * var(--pill-y)), var(--safe-top));
}

:root.tv .pg-hud .pg-pause-btn {
  top: max(calc(0.4rem - 2 * var(--pill-y)), var(--safe-top));
}

/* Four cards a side (7–8 players): tighter cards, so the column fits a 720p screen at 150 % text. */
.pg-panel:has(> :nth-child(4)) {
  gap: 0.4em;
  font-size: max(var(--fs-small), 0.9em);
}

.pg-panel:has(> :nth-child(4)) .pg-card {
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

.pg-left {
  inset-inline-start: 1.4em;
}

.pg-right {
  inset-inline-end: 1.4em;
}

.pg-card {
  display: flex;
  gap: 0.75em;
  align-items: center;
  /* As big as before A (whose cards had a 0.3em bar in the player's colour at the start): the
     shape now says whose card it is. A state's edge (dashed when out) shows when a game colours it. */
  padding: 0.7em 0.9em;
  padding-inline-start: calc(1.2em - 1px);
  border-radius: var(--r-l);
  background: var(--bg);
  border: 1px solid transparent;
  transition: opacity 0.3s;
}

.pg-card.out {
  opacity: 0.4;
}

/* High contrast: a 2 px white edge, drawn outside (a team's bar keeps its colour). */
.high-contrast .pg-card {
  box-shadow: 0 0 0 2px var(--ui-text);
}

.pg-card-icon svg {
  display: block;
  width: 1.7em;
  height: 1.7em;
}

/* Tessellate's tile pattern (#72 build 20), a small badge on the shape's corner. */
.pg-card-icon {
  position: relative;
}

.pg-hud .pg-card-icon .tg-pattern svg.tile-pattern {
  position: absolute;
  inset-inline-end: -0.35em;
  bottom: -0.35em;
  width: 0.95em;
  height: 0.95em;
  border-radius: 0.15em;
  box-shadow: 0 0 0 0.1em var(--ui);
}

.pg-card-body {
  min-width: 0;
}

/* A long name plus its tag ("Yellow Pyramid" + "Keys 2") wraps the tag to the next line
   instead of cutting either off. */
.pg-card-name {
  font-weight: 900;
  overflow-wrap: anywhere;
}

/* Who plays it, on the second line ("You", "Pad 2", "Phone 1"; a bot's card says "Normal bot"). */
.pg-you {
  display: block;
  font-size: max(var(--fs-small), 0.72em);
  font-weight: 700;
  color: var(--ui-faint);
  white-space: nowrap;
  overflow-x: clip;
  text-overflow: ellipsis;
}

/* "Bot" after a bot's name on the results (#861): quiet, never cut off the name. */
.pg-bot {
  font-size: max(var(--fs-small), 0.72em);
  font-weight: 700;
  color: var(--ui-faint);
  white-space: nowrap;
}

.pg-card-sub {
  color: var(--ui-faint);
  font-size: max(var(--fs-small), 0.72em);
  font-weight: 700;
}

.pg-card-stats {
  display: flex;
  /* A stat longer than its English (Arabic, big text) goes to the next line, not out of the card. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 0.7em;
  margin-top: 0.2em;
  font-size: max(var(--fs-small), 0.85em);
  color: var(--ui-dim);
}

.pg-card-stats b {
  color: var(--ui-text);
  font-weight: 900;
}

.pg-card-stats .pips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
}

.pg-card-stats .pips i {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  border: 0.14em solid var(--ui-dim);
}

.pg-card-stats .pips i.on {
  background: var(--c);
  border-color: var(--ui-text);
}

.pg-card-stats .status {
  font-weight: 900;
  color: var(--ui-text);
}

/* Polygone Quick (#91): what a shape scored in the round just over, beside its total. */
.pg-card-stats .plus {
  padding: 0 0.35em;
  border: 0.14em solid var(--c);
  border-radius: 0.6em;
  color: var(--ui-text);
  font-weight: 900;
}

/* Siegeometry Quick (#91): the live place, "1st" or "=2nd". */
.pg-card-stats .place {
  font-weight: 900;
  color: var(--ui-text);
}

/* Siegeometry (#160): the forge bonus, "+15%" beside a cog, while the player owns forges. The
   card's stats wrap whole items, so at any text size the chip moves to its own line instead of
   squeezing "units" and "bases" under their numbers or running out of the card. */
.sg-card .pg-card-stats {
  flex-wrap: wrap;
  row-gap: 0.15em;
}

.sg-card .pg-card-stats > span {
  white-space: nowrap;
}

.pg-card-stats .sg-forge {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  max-width: 100%;
  color: var(--ui-text);
}

.pg-card-stats .powers {
  display: flex;
  gap: 0.2em;
  color: var(--ui-text);
}

/* Each input's hint is a block of its own on the line (wrapping inside when it must). Not a flex
   wrap: a wrapping flex box of max-content width comes out taller than its rows, the extra spread
   between them (Chromium), and at big text that is a third of the bar. */
.pg-hints {
  position: absolute;
  bottom: calc(1.1em + var(--sa-b, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: block;
  text-align: center;
  width: max-content;
  max-width: 70vw;
  font-size: max(var(--fs-small), 0.72em);
  font-weight: 700;
  color: var(--ui-dim);
}

.pg-hints b {
  color: var(--ui-text);
}

.pg-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--scrim);
  pointer-events: auto;
  animation: pg-fade 0.25s ease-out;
}

@keyframes pg-fade {
  from {
    opacity: 0;
  }
}

.pg-dialog {
  min-width: 22em;
  max-width: 90vw;
  padding: 1.6em 2em;
  border-radius: var(--r-l);
  /* Black, with no shadow (A · Console, #415: light for a TV); high contrast: the white edge. */
  background: var(--bg);
  border: 2px solid transparent;
  text-align: center;
}

.high-contrast .pg-dialog {
  border-color: var(--ui-text);
}

.pg-dialog h2 {
  margin: 0;
  font-size: 2.4em;
  font-weight: 900;
}

.pg-why {
  margin: 0.2em 0 1em;
  color: var(--ui-dim);
  font-weight: 700;
}

.pg-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.2em;
  text-align: start;
}

.pg-table th {
  /* Said here: a th takes its table's start only from a value other than the default (#84). */
  text-align: start;
  font-size: max(var(--fs-small), 0.72em);
  color: var(--ui-dim);
  font-weight: 800;
  padding: 0.3em 0.5em;
}

.pg-table td {
  padding: 0.4em 0.5em;
  border-top: 1px solid var(--ui-line);
  font-weight: 700;
}

.pg-table td svg {
  display: block;
}

.pg-table .name {
  font-weight: 900;
}

.pg-table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.pg-actions {
  display: flex;
  gap: 0.7em;
  justify-content: center;
  margin-top: 1em;
  flex-wrap: wrap;
}

/* The Pause pill: black, top end corner, with the key or pad button of the inputs here (Esc, and ☰
   with a pad; a phone taps it). Its top is the round's pill's, and it is no taller, so the coach's
   line under the pill passes clear of it. */
.pg-pause-btn {
  position: absolute;
  top: calc(1.1rem - 2 * var(--pill-y));
  inset-inline-end: 1.4em;
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.9em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--bg);
  font-size: max(var(--fs-small), 0.8em);
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
}

.pg-pause-btn :is(kbd, .pb) {
  margin: 0;
}

.high-contrast .pg-pause-btn {
  border-color: var(--ui-text);
}

/* ------------------------------------------------------------ reduced motion (setting or OS) */

.reduced-motion .pg-overlay,
.reduced-motion .pg-count.show {
  animation: none;
}

.reduced-motion .pg-count.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.reduced-motion .pg-banner,
.reduced-motion #loader-bar {
  transition: none;
}

/* ------------------------------------------------------------ the opening card (Game/ReadyCard.cs, #860)
   Over the whole match for the first seconds of the countdown: which shape you are, the goal, your
   own controls. It takes no press (the game under it already listens) and is gone before Go; under
   the pause menu and the results, over the HUD. The touch controls stay above it (touch.css). */

.ready-card {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding-block: calc(1em + var(--sa-t)) calc(1em + var(--sa-b));
  padding-inline: calc(1em + var(--sa-s)) calc(1em + var(--sa-e));
  background: var(--ui);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
}

.ready-card.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.12s ease;
}

.reduced-motion .ready-card {
  transition: none;
}

.rc-box {
  display: grid;
  gap: 0.6em;
  justify-items: center;
  max-width: min(100%, 46em);
  text-align: center;
}

.rc-game {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-dim);
}

.rc-you {
  display: grid;
  justify-items: center;
  gap: 0.3em;
}

.rc-you svg {
  width: 4.5em;
  height: 4.5em;
}

.rc-you h2 {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 900;
  line-height: calc(1.15 * var(--line-k));
}

.rc-you h2 b {
  color: var(--c);
}

.rc-goal {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: 800;
}

.rc-group {
  display: grid;
  justify-items: center;
  gap: 0.5em;
}

.rc-who {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 0.6em;
}

.rc-chip {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.7em;
  border: 2px solid var(--c);
  border-radius: 2em;
  background: var(--ui-card);
  font-weight: 800;
}

.rc-chip svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
}

.rc-chip b {
  overflow-wrap: anywhere;
}

.rc-chip em {
  font-style: normal;
  font-size: max(var(--fs-small), 0.8em);
  color: var(--ui-dim);
}

.rc-rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.4em;
  margin: 0;
}

.rc-rows > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.2em 0.45em;
}

.rc-rows dt {
  font-weight: 800;
  color: var(--ui-dim);
}

.rc-rows dd {
  margin: 0;
}

/* A touch screen: its stick and buttons stay above the card and say what they do, so the card has
   no rows and keeps to the room over them, at any text size. */
html:has(#touch) .ready-card {
  place-items: start center;
  padding-block-start: calc(var(--sa-t) + 12vh);
}

html:has(#touch) .rc-you svg {
  width: min(4.5em, 14vh);
  height: min(4.5em, 14vh);
}

/* ------------------------------------------------------------ "You're out" (Game/OutCard.cs, #872)
   One card for every game: who of this screen is out, when they are back, the most time it takes.
   Low in the middle, clear of the hints; under the pause menu and the results; it takes no press.
   With nobody in the room still playing, a yellow button stands under it: Skip to the result. */

.out-card {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--sa-b) + 15vh);
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 0.4em;
  padding-inline: 1em;
  pointer-events: none;
}

.oc-rows {
  display: grid;
  justify-items: center;
  gap: 0.3em;
  max-width: 100%;
}

/* The one thing in the card that takes a press. */
.oc-skip {
  pointer-events: auto;
}

.oc-shape {
  display: inline-flex;
}

.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2em 0.6em;
  max-width: 100%;
  margin: 0;
  padding: 0.4em 0.9em;
  border: 2px solid var(--c);
  border-radius: var(--r-m);
  background: var(--ui);
  font-size: var(--fs-label);
  text-align: center;
}

.oc-row svg {
  flex: none;
  width: 1.4em;
  height: 1.4em;
}

.oc-row > b {
  font-weight: 900;
}

.oc-row > span {
  color: var(--ui-dim);
}

.oc-time {
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}

/* A touch screen: the stick and the buttons have the foot of the screen, so the card sits just over
   them (--touch-room, js/touch.ts), clear of the news under the top bar. A phone on its side: in
   the middle of the foot, between the stick and the buttons. */
html:has(#touch) .out-card {
  bottom: calc(var(--touch-room, 0px) + 0.5em);
}

/* A phone has the board under the card: the card's words stop growing at a size that leaves the
   board in sight at big text (a 320 px phone at 200 %), and it keeps to two lines' room. */
html:has(#touch) .oc-row {
  padding: 0.25em 0.7em;
  font-size: min(var(--fs-label), 4.6vmin);
}

/* Its button too: one line, a finger high, never the big round button of a menu. */
html:has(#touch) .oc-skip {
  min-height: 44px;
  padding: 0.2em 1em;
  font-size: min(var(--fs-label), 4.6vmin);
  white-space: nowrap;
}

@media (orientation: landscape) {
  html:has(#touch) .out-card {
    bottom: calc(var(--sa-b) + 0.3em);
    gap: 0.25em;
    padding-inline: 30vw;
  }
}