/* The status line, the last-move texts and the buttons. */

/* ---- buttons ---- */
.button {
  padding: 11px 16px;
  border: 1px solid var(--line-color); border-radius: 8px; background: var(--panel-background); color: var(--text-color);
  font-family: var(--display-font); font-feature-settings: "case"; font-weight: 800; text-transform: uppercase;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.button[aria-pressed="true"] { background: var(--button-background); color: var(--button-text-color); border-color: var(--button-background); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.button.primary { background: var(--button-background); color: var(--button-text-color); border-color: var(--button-background); }
/* "Undo Wall", after a wall is built and before the piece is placed */
.button.undo { background: var(--player-1-color); border-color: var(--player-1-color); color: #fff; }
/* a power that's all used up: its name is dimmed and has a drawn line through it (a real strikethrough was hard to see). The line
   sits high, runs a little past the word at both ends, and stays at full strength while the rest of the button is dimmed */
.button.spent {
  position: relative; opacity: 1;
  color: color-mix(in srgb, var(--text-color) 38%, transparent);
  border-color: color-mix(in srgb, var(--line-color) 50%, transparent);
}
.button.spent::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 47%; height: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--text-color) 69%, transparent);
}

/* ---- the move buttons, under a small gray label like the last-move ones ---- */
.actions { text-align: center; }
.actions-label, .last-move-label {
  color: var(--muted-text-color); font-family: var(--display-font); font-feature-settings: "case"; font-weight: 800;
  text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px;
}
.actions-label { margin-bottom: 8px; }
.action-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---- the status line, above the score cards ----
   The status area is a 48px box at the top of the column, level with the top of the board's first row, and its text is centered
   in it. The space below it puts the top of the score cards level with the top of the board's second row: one square
   ((470 - 5 gaps of 10) / 6) plus one gap, less this box and the column's 14px gap. The cards' label tabs stick up 18px, so they end
   up 14px under the box. */
.status-line {
  --player-1-color: var(--player-1-bright-color);
  --player-2-color: var(--player-2-bright-color);
  --player-3-color: var(--player-3-bright-color);
  height: 48px; line-height: 1.15;
  margin-bottom: calc((var(--board-width) - 5 * var(--board-gap)) / 6 + var(--board-gap) - 48px - 14px);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; text-align: center; font-family: var(--display-font); font-weight: 800;   /* Musgo, in sentence case rather than capitals */
}
.status-line b { text-wrap: balance; }   /* a message that needs two lines breaks into two even ones */
.status-line .new-game-link { cursor: pointer; border-radius: 3px; }   /* stays white; underlined only when pointed at or focused */
.status-line .new-game-link:hover, .status-line .new-game-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.status-line .bonus-name, .last-move .bonus-name { color: var(--bonus-color); white-space: nowrap; }   /* a bonus square named in the text: its star and coordinate in the star's yellow */
.player-colored[data-player="1"] { color: var(--player-1-color); }
.player-colored[data-player="2"] { color: var(--player-2-color); }
.player-colored[data-player="3"] { color: var(--player-3-color); }
/* the old and new messages sit on top of each other while one rolls out and the other in */
.status-line .message-swap { display: grid; }
.status-line .message-swap b { grid-area: 1 / 1; }
/* winning: "You win!" is big and pops in; a tie-break note sits small beside it */
.big-win { display: inline-block; font-size: 1.8em; animation: big-win-pop 0.7s cubic-bezier(0.2, 1.5, 0.35, 1); }
@keyframes big-win-pop { from { transform: scale(0.4); opacity: 0; } }
.tie-note { margin-left: 0.45em; font-size: 0.7em; }
.no-wrap { white-space: nowrap; }

/* ---- the last moves: below the score cards, with room kept for three lines so the buttons under them don't jump around ---- */
.last-moves {
  --player-1-color: var(--player-1-bright-color);
  --player-2-color: var(--player-2-bright-color);
  --player-3-color: var(--player-3-bright-color);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: -2px; text-align: center;
}
.last-move { min-height: 92px; min-width: 0; font-family: var(--display-font); font-weight: 800; font-size: 16px; line-height: 1.3; color: #fff;   /* Musgo, in sentence case like the status line (its letters run smaller than the system font's, so a size up) */ opacity: 0; transition: opacity 0.5s ease; }
.last-move.visible { opacity: 1; }   /* each player's line stays hidden until that player has moved, then fades in */
.last-move-label { display: block; margin-bottom: 2px; }
.last-move .two-squares { font-size: 14.5px; }   /* a double move: "[✓] on A1 and B2", a little smaller */
.last-move .bonus-name { font-weight: 700; }
.last-move .points-scored { font-size: 13.5px; color: var(--muted-text-color); margin-top: 2px; }   /* the smaller "(Scored 2 pts.)" line under a scoring move */

@media (prefers-reduced-motion: reduce) { .big-win { animation: none; } }