/* Battle Barge (TOW) — Score Card */

/* ===== Score Panel =====
   Universe-scoped: HH's score-card.css defines .score-panel too, and
   this file loads after it in the unified shell. Unscoped, TOW's grid
   would take over the Horus Heresy score panel as well. */

/* `minmax(0, 1fr)`, never a bare `1fr`.
   A bare `1fr` is `minmax(auto, 1fr)`, and `auto` there means MIN-CONTENT —
   so the column could not shrink below the widest unbreakable thing in it.
   `.score-name` is `white-space: nowrap`, so "A TEAM MOST FOWL" set the
   floor, and on a 390pt phone the panel grew past the viewport: the second
   card's + button and the YOU badge were simply off the right-hand edge
   with nothing to scroll. Field-reported 2026-08-14 with two screenshots,
   on an iPhone 12 where a 13 Pro Max had been fine — which is exactly the
   signature of a min-content floor rather than a bad breakpoint. */
html[data-universe="tow"] .score-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-sm);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    align-items: center;
}

html[data-universe="tow"] .score-player {
    text-align: center;
}

/* Wrapped, not truncated.
   A team name is the label a player looks for to find their own card, and
   "A Team Most Fo…" on one card beside "Gorgonzo…" on the other is two
   cards you have to decode. Two short lines cost a few pixels of height
   and read at a glance. `overflow-wrap: anywhere` keeps a single very long
   word from setting a floor the grid cannot honour. */
html[data-universe="tow"] .score-name {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Two cards, not two columns of one panel.
   Field-reported 2026-08-12: "My name then You in the same gold font and
   colour doesn't make it easy to see at a glance. HH separates P1 and P2
   into different cards, I think that would be smart as well." So they get
   a surface each, and the seat marker stops competing with the name for
   the same colour. */
html[data-universe="tow"] .score-player {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}

/* The card this device is playing.
   Absent entirely on a solo battle, where no seat has been established and
   the question is not being asked. A badge rather than more gold text: the
   name is already gold, so colouring the marker the same made the two run
   together at arm's length, which is the distance this is read from. */
html[data-universe="tow"] .score-player:has(.score-name.is-my-seat) {
    border-color: var(--color-gold);
}

html[data-universe="tow"] .score-name.is-my-seat::after {
    content: "YOU";
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.05em 0.4em;
    border-radius: var(--radius-sm, 3px);
    background-color: var(--color-gold);
    color: #14110b;
    font-size: var(--text-xs, 0.65rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    vertical-align: middle;
}

html[data-universe="tow"] .score-value {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

/* ===== VP adjuster =====
   Minus, amount, plus — on one row that must not wrap, because a wrapped
   plus button lands under the opposing player's column and gets mis-tapped.
   Sized for a thumb on a table, not for a mouse. */

html[data-universe="tow"] .score-adjust {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-xs);
    align-items: stretch;
    justify-content: center;
}

html[data-universe="tow"] .score-step {
    min-width: 44px;
    min-height: 44px;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    background-color: var(--color-surface-raised, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

html[data-universe="tow"] .score-step:hover:not(:disabled) {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

html[data-universe="tow"] .score-step:disabled,
html[data-universe="tow"] .score-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

html[data-universe="tow"] .score-input {
    min-width: 0;
    min-height: 44px;
    text-align: center;
    font-size: var(--text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-xs);
}

/* The spinner arrows are unusable at a table and steal width from the
   digits, which is the whole point of the field. */
html[data-universe="tow"] .score-input::-webkit-outer-spin-button,
html[data-universe="tow"] .score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

html[data-universe="tow"] .score-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

html[data-universe="tow"] .score-divider {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    align-self: center;
    padding: 0 var(--space-xs);
}


/* ===== Quick Note Row ===== */

html[data-universe="tow"] .quick-note-row {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

html[data-universe="tow"] .quick-note-row .form-input {
    flex: 1;
}

/* Recent-battle card actions — badge plus a delete.
   Deleting a finished game had no control at all: DISCARD lives in the
   end-of-battle dialog, which only exists while the battle is active. */
html[data-universe="tow"] .recent-battle-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

html[data-universe="tow"] .recent-battle-delete {
    color: var(--color-text-muted);
    line-height: 1;
    padding: 0 var(--space-xs);
}

html[data-universe="tow"] .recent-battle-delete:hover {
    color: var(--color-error);
}

/* Miscast / Outclassed reference rows */
html[data-universe="tow"] .miscast-row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

html[data-universe="tow"] .miscast-name {
    color: var(--color-gold);
    font-weight: 600;
}

html[data-universe="tow"] .miscast-effect {
    grid-column: 2;
    color: var(--color-text-secondary);
}

/* ===== Chess clock =====
   Requested 2026-08-12: "bigger and visible to both players, in a more
   prominent location in real time for both people." It sat below the
   score panel at caption size; it now leads the screen, because the clock
   is the thing both players look up at, from across a table, without
   picking the phone up. The numbers are tabular so they stop jittering as
   the digits change. */

html[data-universe="tow"] .chess-clock {
    display: grid;
    /* Same min-content trap as the score panel above — `.clock-name` is
       nowrap, so a team name set the column floor and pushed the second
       clock off the screen. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
}

html[data-universe="tow"] .clock-player {
    text-align: center;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}

html[data-universe="tow"] .clock-name {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-universe="tow"] .clock-time {
    display: block;
    font-size: clamp(1.75rem, 9vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

/* Whose clock is running. Border AND background, because at arm's length
   under a table lamp a colour change alone is easy to miss. */
html[data-universe="tow"] .clock-player.clock-active {
    border-color: var(--color-gold);
    background-color: rgba(201, 168, 76, 0.10);
}

html[data-universe="tow"] .clock-player.clock-active .clock-time {
    color: var(--color-gold);
}

html[data-universe="tow"] .clock-player.clock-warning .clock-time {
    color: #f0a020;
}

html[data-universe="tow"] .clock-player.clock-expired .clock-time {
    color: var(--color-error);
}

html[data-universe="tow"] .clock-controls {
    display: flex;
    justify-content: center;
}

html[data-universe="tow"] #btn-clock-toggle {
    min-height: 44px;
    min-width: 72px;
}


/* ===== Narrow phones =====
   An iPhone 12 is 390pt wide; a 13 Pro Max is 428. The battle screen was
   built and tested on the wider one and everything on it was sized to fit
   there exactly, so the smaller phone lost 38pt off the right of every
   full-width row. Field-reported 2026-08-14: "still a little squished on
   iphone 12 standard. Should scale well to fit all screen sizes."

   Nothing here changes a layout — it only gives the same layouts less
   padding and slightly smaller type, so the content has room rather than
   the chrome. 430px catches every phone below the Pro Max in portrait. */
@media (max-width: 430px) {
    html[data-universe="tow"] .score-panel {
        padding: var(--space-sm);
        gap: var(--space-xs);
    }

    html[data-universe="tow"] .score-player {
        padding: var(--space-xs);
    }

    html[data-universe="tow"] .score-value {
        font-size: var(--text-2xl);
    }

    /* 44px each side plus the field is 132px of a 160px column. The touch
       target stays a full 44 high; it just stops demanding 44 wide. */
    html[data-universe="tow"] .score-step {
        min-width: 38px;
        padding: 0;
    }

    html[data-universe="tow"] .score-adjust {
        gap: 2px;
    }

    html[data-universe="tow"] .score-divider {
        padding: 0;
        font-size: var(--text-xs);
    }

    html[data-universe="tow"] .chess-clock {
        padding: var(--space-xs) var(--space-sm);
        gap: var(--space-xs);
    }

    html[data-universe="tow"] #btn-clock-toggle {
        min-width: 60px;
        padding-left: var(--space-xs);
        padding-right: var(--space-xs);
    }
}