/* The player status modal: three cards on a turntable. */

#player-info-dialog { width: min(70vw, 360px); padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; }

/* The three cards stand on a ring, 120° apart: one faces you, the other two are behind it, facing away, at 120° and 240°. Each card
   is turned to its angle and pushed out to the ring's radius (--ring-radius); the whole ring is pulled back by the same radius, so
   the front card sits at the screen, and rotating the ring (--spin) carries them round. */
.player-info-stage { --ring-radius: min(160px, 36vw); perspective: 1100px; }   /* a smaller ring on a phone, so the cards behind stay on the screen */
.player-info-ring {
  display: grid; transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--ring-radius))) rotateY(var(--spin, 0deg));
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.player-info-ring.still { transition: none; }   /* set while the ring is first put in place, so it doesn't swing into position */
.player-info-card {
  --card-color: var(--player-1-color); --angle: 0deg;
  grid-area: 1 / 1; position: relative; transform-style: preserve-3d; transform: rotateY(var(--angle)) translateZ(var(--ring-radius));
}
.player-info-card[data-player="1"] { --card-color: var(--player-1-color); --angle: 0deg; }
.player-info-card[data-player="2"] { --card-color: var(--player-2-color); --angle: 120deg; }
.player-info-card[data-player="3"] { --card-color: var(--player-3-color); --angle: 240deg; }
.player-info-card[data-position="back"] { cursor: pointer; }

/* a card has two faces: the front with the content, and a plain back in the same color (what you see of the ones turned away) */
.player-info-front {
  position: relative; padding: 40px calc(20px + 0.75rem) 20px; border-radius: 14px; background: var(--card-color); color: #fff;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.25); backface-visibility: hidden;
}
.player-info-back { position: absolute; inset: 0; border-radius: 14px; background: var(--card-color); filter: brightness(0.82); transform: rotateY(180deg); backface-visibility: hidden; }

.player-info-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin: -8px 0 14px; }   /* pulled up under the title, with a little room under the score */
.player-info-head .player-info-score { color: #fff; font-size: 96px; line-height: 1; }
.player-info-rows { list-style: none; margin: 6px 0 0; padding: 0; display: grid; align-content: start; gap: 7px; font-size: 17px; min-height: calc(5 * 17px + 4 * 7px); }   /* room for 5 lines, so every card is the same height */
.player-info-rows li { display: flex; justify-content: space-between; gap: 16px; }
.player-info-rows .player-info-none { justify-content: center; color: var(--muted-text-color); }
.player-info-last, .player-info-power { margin-top: 4px; text-align: center; font-size: 17px; line-height: 1.5; }
/* room for the most a turn can say: a wall, a piece, and "(Scored 2 pts.)" (two big lines and a smaller one), so every card is the same height; the text sits at the top */
.player-info-last { min-height: 63px; }
.player-info-power { margin-top: 2px; }   /* so the text under "Power" sits as far from it as the text under "Last move" does */
.player-info-last .points-scored { font-size: 14px; color: var(--muted-text-color); }
.player-info-last .player-info-none { padding-top: 2px; }   /* "No moves yet." has no symbol to make its line taller, so it sits as far under its heading as a move does */
.player-info-last > div + div { margin-top: 6px; }   /* room between the move and its "(Scored 2 pts.)" line */
.player-info-last .bonus-name, .player-info-rows .bonus-name { color: var(--bonus-color); white-space: nowrap; }

/* each card is its player's color with white text, white symbols, and a title outlined in that color */
.player-info-card h2 { color: #fff; -webkit-text-stroke-color: var(--card-color); }
/* the band behind the title's letters covers only the word, not the symbol beside it */
.player-info-card h2::before { content: none; }
.player-word { position: relative; }
.player-word::before { content: ""; position: absolute; z-index: -1; left: 8px; right: 8px; top: 22%; bottom: 22%; background: var(--card-color); }
.player-info-card legend { color: rgba(255, 255, 255, 0.85); }
.player-info-card legend::before, .player-info-card legend::after { background: rgba(255, 255, 255, 0.4); }
.player-info-card svg { --player-1-color: #fff; --player-2-color: #fff; --player-3-color: #fff; }
/* the symbol in the title: white, outlined in the card's color like the title text (the ○ gets a disc behind it so the page doesn't
   show through its hole) */
.player-info-title .symbol { width: 40px; height: 40px; vertical-align: -6px; margin-right: 14px; overflow: visible; stroke: var(--card-color); stroke-width: 760px; stroke-linejoin: round; paint-order: stroke fill; }
.player-info-card[data-player="2"] .player-info-title .symbol { border-radius: 50%; background: var(--card-color); }
.player-info-card .player-info-last .points-scored, .player-info-card .player-info-rows .player-info-none, .player-info-card .player-info-last .player-info-none { color: rgba(255, 255, 255, 0.75); }