/* gladiator-play.css — GladiatorChess setup-phase rendering chrome per
   GladiatorChess/docs/design.md §11. Loaded via App.razor as
   _content/Haxahedron.Modules.Chess/css/gladiator-play.css. Chess module's existing
   chess-play.css covers the in-game arena (chessground + per-state framing); this file
   handles the W1-W6 setup gauntlet + W7 Resolved-state setup-replay strip.

   Color palette pinned in design §11.3 (already baked into the SVG assets themselves —
   amber Part 3 face-up, coral Part 4 face-up, gray face-down, gold coin). CSS here
   handles layout, sizing, and the coin-spin animation per §11.4.3's 2-second lockout. */

/* ---------- Setup-phase outer chrome ---------- */

.gladiator-awaiting,
.gladiator-coin-toss,
.gladiator-color-choice,
.gladiator-placard-pool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 8px;
}

.gladiator-hint {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

/* ---------- Placards (Part 3 + Part 4) ---------- */

/* Single placard size per §11.3 lock — color alone signals which Part the player is in
   (amber for Part 3, coral for Part 4). 80x112 mobile sizing (~70% of the 100x140 SVG
   viewBox) fits 5 placards across a ~380px portrait viewport with room for gaps. */
.gladiator-placard {
    width: 80px;
    height: 112px;
    display: block;
}

.gladiator-placard--back {
    /* Face-down asset — same image for every slot per §11.3.1 asset-security posture.
       Right-click yields the back design only; the resolved outcome is server-side. */
}

.gladiator-placard--faceup {
    /* Face-up assets are loaded only after the placard pick is server-resolved. */
}

.gladiator-placard--dim {
    opacity: 0.4;
}

.gladiator-placard-stack {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.gladiator-placard-stack--awaiting {
    /* Awaiting view (W1) — single dimmed face-down placard centered as a visual cue.
       Not interactive; pure context. */
}

.gladiator-placard-button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease-out;
}

.gladiator-placard-button:hover:not(:disabled) {
    transform: translateY(-4px);
}

.gladiator-placard-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.gladiator-prev-reveal {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

/* ---------- Coin toss (W2) ---------- */

.gladiator-coin {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
}

.gladiator-coin-face {
    width: 100%;
    height: 100%;
    display: block;
}

/* §11.4.3 two-stage coin flow — the 2-second lockout pairs with this CSS keyframe to
   spin the coin while the Heads/Tails buttons are still disabled. The spin loops through
   3 full rotations to make the "flipping" intent unambiguous; the actual result is
   server-stamped at submit time and lands on the next render. */
.gladiator-coin--spinning .gladiator-coin-face {
    animation: gladiator-coin-spin 2s ease-out;
}

@keyframes gladiator-coin-spin {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(1440deg);
    }
}

/* ---------- Color choice (W3 / W4) ---------- */

.gladiator-pass-prompt {
    max-width: 380px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.95rem;
}

.gladiator-color-action-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 280px;
}

.gladiator-color-action-row .mud-button {
    width: 100%;
}

/* ---------- W7 Resolved-state setup-replay strip ---------- */

.gladiator-setup-replay {
    margin-top: 16px;
    padding: 12px 16px;
    background-color: var(--mud-palette-surface);
    border-radius: 8px;
    border-left: 3px solid var(--mud-palette-primary);
}

.gladiator-setup-replay-header {
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.gladiator-setup-replay-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 12px;
    row-gap: 4px;
    margin: 0;
}

.gladiator-setup-replay-list dt {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.gladiator-setup-replay-list dd {
    margin: 0;
}

/* ---------- Stats Card 4 (Setup Outcomes) ---------- */

.gladiator-stats-card {
    margin-top: 12px;
    padding: 12px;
    background-color: var(--mud-palette-surface);
    border-radius: 8px;
}

.gladiator-stats-card-title {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
}

.gladiator-histogram {
    /* Parent-level grid so all 5 rows SHARE column sizing — every label aligns to the widest
       label, every count aligns to the widest count digit. With a per-row grid the columns
       sized independently per row and the count digits drifted out of vertical alignment. */
    display: grid;
    grid-template-columns: min-content min-content 1fr;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    margin-bottom: 12px;
    font-size: 0.85rem;
}

.gladiator-histogram-row {
    /* display: contents makes the row div transparent to grid layout — its three child spans
       (label, count, bar) participate directly in the parent's column tracks. Preserves the
       row semantic for accessibility / future per-row hover state without breaking alignment. */
    display: contents;
}

.gladiator-histogram-label {
    color: var(--mud-palette-text-secondary);
}

.gladiator-histogram-bar {
    height: 8px;
    background-color: var(--mud-palette-primary);
    border-radius: 4px;
    width: var(--bar-width, 0%);
    min-width: 2px;
}

.gladiator-histogram-count {
    text-align: left;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.gladiator-attrition-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 8px 0;
}

.gladiator-attrition-tiles div {
    text-align: center;
}

.gladiator-attrition-tiles dt {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.gladiator-attrition-tiles dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.gladiator-pass-flourish {
    margin: 8px 0 0 0;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    text-align: center;
}

/* ---------- Desktop adaptation (§11.4.8) ---------- */

@media (min-width: 800px) {
    /* Two-column setup-phase layout — content stays in the left ⅔ of the play surface
       (mirroring where the chessground board will sit after setup completes); the right
       ⅓ is reserved for the inherited messaging container which the platform chrome
       already places there. No bespoke CSS needed beyond the existing per-state grid
       core already applies. */

    /* W7 setup-replay on desktop reflows to the right ⅓ column alongside the Move List
       per §11.7.2. v1 keeps the inline placement below the static board to avoid the
       structural reflow; the placement matches mobile + tablet. Promote to right-column
       in v1.x if the operator wants the desktop reflow. */
}