/* incursion-locks.css: Incursion compact lock rows. */
/* ============================================================
   INCURSION BETA — compact lock rows
   --------------------------------------------------------------------------
   The beta keeps one shared dice hand, but each lock used to repeat four pieces
   vertically: requirement, staged dice, placement hint, and controls. That turns
   a five-slot room into a long stack even though every slot is the same small
   decision. Keep the existing markup and server contract, but let the row read
   like a compact instrument panel: requirement | staged die | add | picker.

   This is scoped to .ib2-solve so the live board remains unchanged. The shared
   _room_lock.html partial still owns the no-JS fields and hidden posted values.
   ============================================================ */
.ib2-solve .lock-slot-v2 {
    display: grid;
    grid-template-columns: max-content minmax(42px, 1fr) max-content minmax(94px, 1.35fr);
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    padding: 4px 8px;
}
.ib2-solve .lock-slot-v2__head {
    grid-column: 1;
    min-width: 0;
}
.ib2-solve .slot-stack {
    grid-column: 2;
    min-width: 0;
    min-height: 34px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.ib2-solve .slot-empty {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ib2-solve .slot-controls {
    display: contents;
}
.ib2-solve .slot-arm {
    grid-column: 3;
    min-width: max-content;
}
.ib2-solve .slot-controls .slot-pick {
    grid-column: 4;
    min-width: 0;
    width: 100%;
}
.ib2-solve .lock-slot-v2 > .sacrifice-warn,
.ib2-solve .lock-slot-v2 > .sacrifice-tax {
    grid-column: 1 / -1;
}

/* Blind-mode odds and the optional modifier note remain readable without turning
   an empty slot back into a multi-line card. Warnings are allowed to expand below. */
.ib2-solve .slot-odds { white-space: nowrap; }
.ib2-solve .room-lock__modifier-note { grid-column: 1 / -1; margin: 0 0 2px; }

/* width < 768px, not max-width: 767px: same rule, but on the documented breakpoint
   scale (see docs/ux-rules.md) and in the range syntax the rest of this file uses. */
@media (width < 768px) {
    .ib2-solve .lock-slot-v2 {
        grid-template-columns: max-content minmax(38px, 1fr) max-content minmax(82px, 1.35fr);
        column-gap: 6px;
        padding: 4px 6px;
    }
    .ib2-solve .slot-arm { padding-inline: 7px; }
    /* This 0.78rem only actually renders on a non-touch narrow window: a real phone matches
       the global `@media (pointer: coarse) { select { font-size: 16px !important; } }` rule
       too (it exists to stop iOS Safari auto-zooming on focus for a sub-16px control), and
       !important wins regardless of this selector's own higher specificity. So the closed-
       state placeholder has to fit at 16px, not 12.5px: measured via canvas measureText
       against the real column width, "or pick from a list…" needed ~135px against the
       ~66px this column's minmax(82px, ...) floor actually leaves for text once padding is
       subtracted, and the browser doesn't ellipsis a native <select>'s own closed text (it
       hard-clips), so it rendered as "or pick fr". Shortened in the template to "Pick die"
       (~54px, comfortable margin at 16px); text-overflow below is a defensive no-op on
       browsers that ignore it and a real ellipsis on the ones that don't, so a future
       lengthening of this string (or a longer translation) degrades visibly instead of
       silently chopping mid-word again. */
    .ib2-solve .slot-controls .slot-pick {
        font-size: 0.78rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* The hand is a rack, not a receipt. A tile represents one visible face/color
   combination, while its label keeps the exact count available to place. The
   Alpine component still chooses one physical die ID per activation. */
.ib2-hand .die-group {
    width: 42px;
    height: 36px;
    padding: 0;
}
.ib2-hand .die-group .die-face { line-height: 1; }
.ib2-hand .die-count {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Lucky Roll (dice_advantage_pct), Blind only: a die flagged to reroll-and-keep-higher at
   floor build. Never the ring alone (house rule: colour is never the only signal), so a
   text badge always rides with it. Compound selectors, not cascade order, decide which
   ring wins when die-advantage combines with an existing state class: this file is too
   large to trust "whichever rule comes later" for a two-class combination. */
.die-blind.die-advantage { box-shadow: inset 0 0 0 2px var(--color-primary), inset 0 -2px 0 rgba(0,0,0,0.2); }
.stacked-die.die-advantage { box-shadow: inset 0 0 0 2px var(--color-primary), inset 0 -2px 0 rgba(0,0,0,0.25); }
.stacked-die.die-sacrifice.die-advantage { box-shadow: inset 0 0 0 2px var(--color-warning), inset 0 -2px 0 rgba(0,0,0,0.25); }
.die-advantage-badge {
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 0.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    pointer-events: none;
}
.stacked-die .die-advantage-badge { top: 0; right: 2px; font-size: 0.42rem; }

/* Touch floor for the hand, last in the incursion die styles: the 42x36 tile above is
   declared later than the earlier 44px branch and would otherwise win. */
@media (pointer: coarse) {
    .ib2-hand .die-group { width: 44px; height: 44px; min-height: 44px; }
}