/* The three score cards under the board. Each is filled with its player's color, with white text and icon, and the card whose
   turn it is gets a white ring. */

.score-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.score-card {
  --card-color: var(--player-1-color);
  position: relative; display: flex; flex-direction: column; container-type: inline-size;
  padding: 20px 10px 10px; border: 2px solid var(--card-color); border-radius: 10px; background: var(--card-color); color: #fff;
  font-family: var(--display-font); font-feature-settings: "case"; font-weight: 800; text-transform: uppercase;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.score-card[data-player="1"] { --card-color: var(--player-1-color); }
.score-card[data-player="2"] { --card-color: var(--player-2-color); }
.score-card[data-player="3"] { --card-color: var(--player-3-color); }
/* the card whose turn it is gets a white ring, 4px thick: the 2px border plus a 2px inset line (so the card's size doesn't change) */
.score-card.has-turn { border-color: #fff; box-shadow: inset 0 0 0 2px #fff; }

/* the YOU / CPU label hangs over the top edge: white text whose stroke is the card's color, so it reads as part of the card */
.card-label {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -56%);
  font-size: 28px; line-height: 1; letter-spacing: 0.5px; white-space: nowrap;
  color: #fff; -webkit-text-stroke: 10px var(--card-color); paint-order: stroke fill; stroke-linejoin: round;
}
/* The icon in the label is white with an outline in the card's color, matching the text. The artwork takes its fill from the
   player color variables, so those are set to white here. The outline is a real stroke (drawn under the fill), measured in the
   artwork's own 2084-unit box, and the symbols are allowed to overflow so the stroke isn't clipped. */
.card-label .symbol {
  width: 28px; height: 28px; vertical-align: -5px; margin-right: 18px; overflow: visible;
  --player-1-color: #fff; --player-2-color: #fff; --player-3-color: #fff;
  stroke: var(--card-color); stroke-width: 760px; stroke-linejoin: round; paint-order: stroke fill;
}
/* the O has a hole, and once the label is raised the page shows through it: back it with a disc in the card's color */
.score-card[data-player="2"] .card-label .symbol { border-radius: 50%; background: var(--card-color); }
/* a card-colored band across the middle of the word, well inside the letters' outline: the P's and O's small counters can get
   their outline cancelled out in Firefox, and the band keeps the page from showing through them */
.card-label .label-text { position: relative; }
.card-label .label-text::before { content: ""; position: absolute; z-index: -1; left: 8px; right: 8px; top: 24%; bottom: 42%; background: var(--card-color); }

.score-number { text-align: center; position: relative; top: -5px; padding: 3px 0; }   /* nudged up: the digits sit high in the space under the label */
.score-digits { display: inline-grid; perspective: 300px; font-size: 72px; line-height: 1.05; }
.score-digits .digit { grid-area: 1 / 1; }
@media (max-width: 959.9px) { .score-digits { font-size: 58px; } }   /* one column: the score digits are 80% of their size */

/* one line at the bottom of the card for the powers each player still has, under a darker, tinted rule that runs edge to edge */
.power-line {
  position: relative; margin: auto -10px -10px; padding: 10px 4px 12px;
  /* sized from the card's width so the longest line ("all walls used") stays on one row, down to a phone */
  font-size: min(16px, calc((100cqw + 12px) / 7.6)); line-height: 1.2; text-align: center; white-space: nowrap;
  color: rgba(255, 255, 255, 0.9); transition: color 0.4s ease;
}
.power-line.spent { color: rgba(255, 255, 255, 0.45); }   /* once the power is used up the line fades back */
.power-line::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px; border-radius: 1px; background: rgba(0, 0, 0, 0.22); }  /* the tinted rule sits in from the card's edges */