/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-6lz7xhg2u3] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-6lz7xhg2u3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
.btn:focus[b-6lz7xhg2u3], .btn:active:focus[b-6lz7xhg2u3], .btn-link.nav-link:focus[b-6lz7xhg2u3], .form-control:focus[b-6lz7xhg2u3], .form-check-input:focus[b-6lz7xhg2u3] {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.page[b-6lz7xhg2u3] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-6lz7xhg2u3] {
    flex: 1;
}

.sidebar[b-6lz7xhg2u3] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-6lz7xhg2u3] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-6lz7xhg2u3]  a, .top-row[b-6lz7xhg2u3]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row[b-6lz7xhg2u3]  a:hover, .top-row[b-6lz7xhg2u3]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-6lz7xhg2u3]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row[b-6lz7xhg2u3] {
        justify-content: space-between;
    }

    .top-row[b-6lz7xhg2u3]  a, .top-row[b-6lz7xhg2u3]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-6lz7xhg2u3] {
        flex-direction: row;
    }

    .sidebar[b-6lz7xhg2u3] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-6lz7xhg2u3] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-6lz7xhg2u3]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-6lz7xhg2u3], article[b-6lz7xhg2u3] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

.content[b-6lz7xhg2u3] {
    padding-top: 1.1rem;
}
/* /Components/Shared/Cards/CardComponent.razor.rz.scp.css */
/* MTG Card Component - Modern Layout */

.mtg-card[b-pz2ctan8n4] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #1a1a1a;
    border: 2px solid rgba(255, 255, 255, 0.1);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Hover Effects */
.mtg-card:hover[b-pz2ctan8n4] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
    z-index: 10;
}

/* Selected State */
.mtg-card.selected[b-pz2ctan8n4] {
    border-color: #2196f3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.4);
}

/* Commander Card */
.mtg-card.commander[b-pz2ctan8n4] {
    border-color: #ffa726;
    box-shadow: 0 0 12px rgba(255, 167, 38, 0.6);
}

.mtg-card.commander:hover[b-pz2ctan8n4] {
    box-shadow: 0 0 20px rgba(255, 167, 38, 0.8);
}

/* Tapped State - Rotate 90 degrees */
.mtg-card.tapped[b-pz2ctan8n4] {
    transform: rotate(90deg);
    opacity: 0.85;
}

.mtg-card.tapped:hover[b-pz2ctan8n4] {
    transform: rotate(90deg) scale(1.02);
}

/* Summoning Sickness */
.mtg-card.summoning-sickness[b-pz2ctan8n4] {
    border-color: rgba(255, 193, 7, 0.5);
}

/* Card Image Background */
.card-image[b-pz2ctan8n4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card-overlay[b-pz2ctan8n4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.8) 100%
    );
}

/* Card Header - Name and Mana */
.card-header[b-pz2ctan8n4] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 2;
}

.card-name[b-pz2ctan8n4] {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mana-cost[b-pz2ctan8n4] {
    font-size: 10px;
    font-weight: 700;
    color: #ffa726;
    margin-left: 4px;
    white-space: nowrap;
}

/* Card Type Line */
.card-type-line[b-pz2ctan8n4] {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
}

.type-text[b-pz2ctan8n4] {
    font-size: 9px;
    font-style: italic;
    color: #b0b0b0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Power/Toughness Box */
.power-toughness-box[b-pz2ctan8n4] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 4px 8px;
    z-index: 3;
    min-width: 32px;
    text-align: center;
}

.power-toughness-box span[b-pz2ctan8n4] {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Counters Container */
.counters-container[b-pz2ctan8n4] {
    position: absolute;
    bottom: 4px;
    left: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 3;
    max-width: 60%;
}

.counter-badge[b-pz2ctan8n4] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.counter-name[b-pz2ctan8n4] {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

    /* A counter can be called anything the player typed, and a support-strip card
       is 108px wide. Eliding keeps the count visible, which is the part that has
       to be readable. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.counter-value[b-pz2ctan8n4] {
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Counter Type Colors */
.counter-plus[b-pz2ctan8n4] {
    background: rgba(76, 175, 80, 0.85);
}

.counter-minus[b-pz2ctan8n4] {
    background: rgba(244, 67, 54, 0.85);
}

.counter-loyalty[b-pz2ctan8n4] {
    background: rgba(156, 39, 176, 0.85);
}

.counter-charge[b-pz2ctan8n4] {
    background: rgba(33, 150, 243, 0.85);
}

.counter-generic[b-pz2ctan8n4] {
    background: rgba(96, 125, 139, 0.85);
}

/* Status Indicators (Top Right) */
.status-indicators[b-pz2ctan8n4] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 3;
}

.status-badge[b-pz2ctan8n4] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.tapped-badge[b-pz2ctan8n4] {
    background: rgba(33, 150, 243, 0.9);
    border: 1px solid rgba(33, 150, 243, 1);
}

.summoning-sickness-badge[b-pz2ctan8n4] {
    background: rgba(255, 193, 7, 0.9);
    border: 1px solid rgba(255, 193, 7, 1);
    color: #000;
}

.commander-badge[b-pz2ctan8n4] {
    background: rgba(255, 167, 38, 0.9);
    border: 1px solid rgba(255, 167, 38, 1);
}

.commander-tax[b-pz2ctan8n4] {
    font-size: 9px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.4);
    padding: 1px 4px;
    border-radius: 3px;
}

.attachment-badge[b-pz2ctan8n4] {
    background: rgba(156, 39, 176, 0.9);
    border: 1px solid rgba(156, 39, 176, 1);
}

/* Tapped Overlay */
.tapped-overlay[b-pz2ctan8n4] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(33, 150, 243, 0.15);
    pointer-events: none;
    z-index: 1;
}

/* Responsive Sizing */
@media (max-width: 768px) {
    .card-name[b-pz2ctan8n4] {
        font-size: 10px;
    }

    .mana-cost[b-pz2ctan8n4] {
        font-size: 9px;
    }

    .type-text[b-pz2ctan8n4] {
        font-size: 8px;
    }

    .power-toughness-box span[b-pz2ctan8n4] {
        font-size: 11px;
    }

    .counter-badge[b-pz2ctan8n4] {
        font-size: 8px;
    }
}

/* Animation for card entry */
@keyframes cardEnter-b-pz2ctan8n4 {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mtg-card[b-pz2ctan8n4] {
    animation: cardEnter-b-pz2ctan8n4 0.2s ease-out;
}

/* Prevent text selection during drag */
.mtg-card *[b-pz2ctan8n4] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Focus state for accessibility */
.mtg-card:focus[b-pz2ctan8n4] {
    outline: 3px solid #2196f3;
    outline-offset: 2px;
}

.mtg-card:focus:not(:focus-visible)[b-pz2ctan8n4] {
    outline: none;
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .mtg-card:active[b-pz2ctan8n4] {
        transform: scale(0.98);
    }

    .mtg-card.tapped:active[b-pz2ctan8n4] {
        transform: rotate(90deg) scale(0.98);
    }
}
/* /Components/Shared/Playboard/BattlefieldUnit.razor.rz.scp.css */
/* --w is the card's width; a Magic card is 63x88mm, so height is width * 7/5. */

.unit[b-obv07on80k] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.unit.selected[b-obv07on80k] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

/* Attach mode: what cannot take the card recedes, what can is called out. */
.unit.dimmed[b-obv07on80k] { opacity: .34; }

.unit.targetable[b-obv07on80k] {
    outline: 3px dashed var(--mud-palette-primary);
    outline-offset: 3px;
}

/* The frame owns the layout box. Rotating the card alone would leave its
   original footprint behind and lay the tapped card across its neighbours, so
   the frame swaps its own dimensions and the card turns inside it. */
.unit-frame[b-obv07on80k] {
    position: relative;
    width: var(--w);
    height: calc(var(--w) * 7 / 5);
    transition: width .18s ease, height .18s ease;
}

.unit-frame.tapped[b-obv07on80k] {
    width: calc(var(--w) * 7 / 5);
    height: var(--w);
}

.unit-rot[b-obv07on80k] {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--w);
    height: calc(var(--w) * 7 / 5);
    transition: transform .18s ease;
}

/* Rotating about the top-left sends the box off to the left; translating first
   (transforms apply right to left) brings it back to exactly the swapped frame. */
.unit-frame.tapped .unit-rot[b-obv07on80k] {
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100%);
}

.unit-att[b-obv07on80k] {
    align-self: stretch;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #241f14;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 6px;
    flex: 0 0 auto;
}

.unit-att-icon[b-obv07on80k] {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    color: #e0a458;
}

.unit-att-name[b-obv07on80k] {
    font-size: 9px;
    font-weight: 600;
    color: #e8dcc4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Square off the card's own bottom corners only when a strip sits under it, so
   host and attachments read as one object. */
.unit.equipped[b-obv07on80k]  .mtg-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.unit[b-obv07on80k]  .mtg-card {
    width: 100%;
    height: 100%;
}

/* The lift-on-hover is a mouse affordance; under a thumb it only jitters. */
@media (hover: none) {
    .unit[b-obv07on80k]  .mtg-card:hover { transform: none; }
}
/* /Components/Shared/Playboard/ModernPlayboardComponent.razor.rz.scp.css */
/* Tablet playboard: session bar, battlefield, rail. Only the play area scrolls. */

.playboard[b-1ay3n0d9nm] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--mud-palette-background);
}

.pb-centre[b-1ay3n0d9nm] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.pb-column[b-1ay3n0d9nm] { flex-direction: column; }

.pb-body[b-1ay3n0d9nm] { flex: 1; min-height: 0; display: flex; }

.pb-field[b-1ay3n0d9nm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

/* ---------- in play ---------- */

.pb-play[b-1ay3n0d9nm] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.pb-head[b-1ay3n0d9nm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.pb-name[b-1ay3n0d9nm] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pb-count[b-1ay3n0d9nm] {
    font-size: 11px;
    font-weight: 700;
    color: var(--mud-palette-surface);
    background: var(--mud-palette-text-secondary);
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

.pb-untap[b-1ay3n0d9nm] {
    margin-left: auto;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pb-untap:focus-visible[b-1ay3n0d9nm] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Cards wrap into the space rather than scrolling sideways, and a unit that
   carries attachments is taller, so the row it sits in grows with it. */
.pb-wrap[b-1ay3n0d9nm] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pb-empty[b-1ay3n0d9nm] {
    flex: 1;
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-disabled);
    padding: 20px;
    text-align: center;
}

/* ---------- support strip ---------- */

.pb-support[b-1ay3n0d9nm] {
    flex: 0 0 auto;
    display: flex;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.pb-group[b-1ay3n0d9nm] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 12px;
    border-right: 1px solid var(--mud-palette-lines-default);
    flex: 0 0 auto;
}

.pb-group:last-child[b-1ay3n0d9nm] { border-right: 0; }

.pb-group-label[b-1ay3n0d9nm] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.pb-group-cards[b-1ay3n0d9nm] { display: flex; gap: 6px; align-items: flex-start; }

/* ---------- attach mode ---------- */

.pb-attach-bar[b-1ay3n0d9nm] {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 10px 9px 16px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
    z-index: 20;
}

.pb-attach-cancel[b-1ay3n0d9nm] {
    font: inherit;
    font-weight: 600;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .22);
    color: inherit;
    cursor: pointer;
}

.pb-attach-cancel:focus-visible[b-1ay3n0d9nm] { outline: 2px solid #fff; outline-offset: 2px; }
/* /Components/Shared/Playboard/PlayerRail.razor.rz.scp.css */
.rail[b-7ir6pmymym] {
    width: 272px;
    flex: 0 0 auto;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rail-block[b-7ir6pmymym] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 10px;
}

.rail-label[b-7ir6pmymym] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 8px;
}

.rail-empty[b-7ir6pmymym] {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mud-palette-text-disabled);
}

/* ---------- collapsible section headers ---------- */

.rail-head[b-7ir6pmymym] { margin: 0; }

.rail-toggle[b-7ir6pmymym] {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font: inherit;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rail-toggle:focus-visible[b-7ir6pmymym] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* The label carries the block's bottom margin; inside a header button the body
   supplies its own spacing, so drop it or the collapsed state sits crooked. */
.rail-toggle .rail-label[b-7ir6pmymym] { margin: 0; }

/* Collapsing should hide the controls, not the information. */
.rail-sum[b-7ir6pmymym] {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.rail-chev[b-7ir6pmymym] {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    transition: transform .15s ease;
    transform: rotate(-90deg);
}

.rail-chev.open[b-7ir6pmymym] { transform: rotate(0deg); }

/* ---------- available ---------- */

.open-row[b-7ir6pmymym] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.open-chip[b-7ir6pmymym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 6px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
}

.open-n[b-7ir6pmymym] { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- life ---------- */

.life[b-7ir6pmymym] { display: flex; align-items: center; justify-content: space-between; }

.life-num[b-7ir6pmymym] {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ---------- shared controls ---------- */

.step[b-7ir6pmymym], .ctr-btn[b-7ir6pmymym], .cmdr-btn[b-7ir6pmymym], .pip-add[b-7ir6pmymym], .pip-sub[b-7ir6pmymym], .act[b-7ir6pmymym] {
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.step:focus-visible[b-7ir6pmymym], .ctr-btn:focus-visible[b-7ir6pmymym], .cmdr-btn:focus-visible[b-7ir6pmymym],
.pip-add:focus-visible[b-7ir6pmymym], .pip-sub:focus-visible[b-7ir6pmymym], .act:focus-visible[b-7ir6pmymym] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.step[b-7ir6pmymym], .ctr-btn[b-7ir6pmymym], .pip-add[b-7ir6pmymym], .pip-sub[b-7ir6pmymym], .act[b-7ir6pmymym] { border-radius: 8px; }
.cmdr-btn[b-7ir6pmymym] { border-radius: 6px; }

.step:disabled[b-7ir6pmymym], .ctr-btn:disabled[b-7ir6pmymym], .cmdr-btn:disabled[b-7ir6pmymym], .pip-sub:disabled[b-7ir6pmymym] {
    opacity: .35;
    cursor: default;
}

/* 44px: this is a tablet, and these get used constantly mid-game. */
.step[b-7ir6pmymym] { width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; }

/* ---------- mana ---------- */

.mana[b-7ir6pmymym] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; }

.pip[b-7ir6pmymym] { display: flex; gap: 4px; }

.pip-add[b-7ir6pmymym] {
    flex: 1;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
}

.pip-dot[b-7ir6pmymym] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .2);
    flex: 0 0 auto;
}

.pip-n[b-7ir6pmymym] { font-size: 16px; font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; }

.pip-sub[b-7ir6pmymym] { width: 34px; height: 46px; display: grid; place-items: center; font-size: 17px; }

/* ---------- counters ---------- */

.ctr[b-7ir6pmymym] { display: flex; align-items: center; gap: 6px; height: 46px; font-size: 13px; }
.ctr > span:first-child[b-7ir6pmymym] { flex: 1; }
.ctr-btn[b-7ir6pmymym] { width: 36px; height: 36px; display: grid; place-items: center; font-size: 17px; }
.ctr-n[b-7ir6pmymym] { min-width: 22px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- commander damage ---------- */

/* Three slots across rather than a list down: a pod is four players, and the
   whole block now costs one row of rail height instead of three. */
.cmdr-row[b-7ir6pmymym] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.cmdr-box[b-7ir6pmymym] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 5px 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.cmdr-cap[b-7ir6pmymym] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.cmdr-steps[b-7ir6pmymym] { display: flex; align-items: center; gap: 2px; }

.cmdr-btn[b-7ir6pmymym] { width: 22px; height: 28px; display: grid; place-items: center; font-size: 15px; }

.cmdr-n[b-7ir6pmymym] {
    min-width: 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 21 from one commander is lethal, as is the tenth poison counter. Both are
   easy to walk past when they are just another number in a column. */
.cmdr-box.lethal[b-7ir6pmymym] { border-color: var(--mud-palette-error); }
.cmdr-box.lethal .cmdr-n[b-7ir6pmymym],
.cmdr-box.lethal .cmdr-cap[b-7ir6pmymym] { color: var(--mud-palette-error); }

.ctr-n.lethal[b-7ir6pmymym] { color: var(--mud-palette-error); }

/* ---------- actions ---------- */

.actions[b-7ir6pmymym] { display: flex; flex-direction: column; gap: 6px; }
.actions .rail-label[b-7ir6pmymym] { margin-bottom: 2px; }

.act[b-7ir6pmymym] {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

.act.primary[b-7ir6pmymym] {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.act.subtle[b-7ir6pmymym] {
    background: transparent;
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.act-meta[b-7ir6pmymym] {
    font-size: 12px;
    font-weight: 400;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

.act-menu[b-7ir6pmymym] { width: 100%; }
.act-menu[b-7ir6pmymym]  .mud-button-root { width: 100%; min-height: 46px; justify-content: space-between; }

/* ---------- counters on a card ---------- */

/* The two that cancel sit together and above the rest, because between them
   they are most of what a game actually puts on a permanent. */
.ctr-quick[b-7ir6pmymym] { display: flex; flex-direction: column; }

/* A counter can be called anything the player typed, and the rail is 272px, so
   a long name has to give way to the steppers rather than push them off. */
.ctr-name[b-7ir6pmymym] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ctr-add[b-7ir6pmymym] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 2px;
}

.ctr-chip[b-7ir6pmymym] {
    font: inherit;
    font-size: 12px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ctr-chip:focus-visible[b-7ir6pmymym] { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.ctr-custom[b-7ir6pmymym] { display: flex; gap: 6px; width: 100%; }

.ctr-input[b-7ir6pmymym] {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

/* Removing a token takes it out of the game, and nothing brings it back --
   the one control in the rail that is worth colouring as a warning. */
.act.danger[b-7ir6pmymym] { color: var(--mud-palette-error); }
/* /Components/Shared/Zones/HandDevice.razor.rz.scp.css */
/* Hand device — phone, full screen, three rows: session bar, cards, bottom bar.
   Zones and actions share the bottom bar so everything you reach for is under a
   thumb and the cards get the whole middle. Only the card area scrolls. */

.hand-device[b-b5c70sxubj] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--mud-palette-background);
}

/* ---------- zone switcher, now part of the bottom bar ---------- */

.zone-chips[b-b5c70sxubj] {
    display: flex;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.zone-chips[b-b5c70sxubj]::-webkit-scrollbar {
    display: none;
}

.zone-chip[b-b5c70sxubj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;

    /* 40px is still a comfortable thumb target and buys back a little height. */
    min-height: 40px;
    padding: 0 12px;

    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.zone-chip:hover[b-b5c70sxubj] {
    border-color: var(--mud-palette-primary);
}

.zone-chip.active[b-b5c70sxubj] {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.zone-chip-count[b-b5c70sxubj] {
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

.zone-chip:focus-visible[b-b5c70sxubj] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ---------- cards ---------- */

.hand-device-cards[b-b5c70sxubj] {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
}

.card-grid[b-b5c70sxubj] {
    display: grid;

    /* auto-FIT, not auto-fill: auto-fill keeps the empty tracks, so a four-card
       hand on a wide screen stayed pinned at the minimum width with a third of the
       row left blank. auto-fit collapses what is unused and the cards take the room.

       The pair of numbers is a floor and a ceiling on one card: never narrower than
       240px (which is what decides how many fit), never wider than 250px, so a
       one-card hand does not become a poster. min() keeps it from overflowing a
       phone narrower than the floor. */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 250px));
    justify-content: center;
    gap: 10px;
}

/* ::deep reaches past CSS isolation into CardComponent's own root. The card sizes
   from its width and the real card ratio (63x88mm) rather than a fixed height, so
   it stays correct at any column count. */
.card-grid[b-b5c70sxubj]  .mtg-card {
    aspect-ratio: 5 / 7;
}

/* The lift-on-hover is a mouse affordance and just causes jitter under a thumb. */
@media (hover: none) {
    .card-grid[b-b5c70sxubj]  .mtg-card:hover {
        transform: none;
    }
}

.hand-device-empty[b-b5c70sxubj] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--mud-palette-text-disabled);
}

/* ---------- actions ---------- */

.hand-device-bottom[b-b5c70sxubj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* Actions hold their width; the chips take what is left and scroll. */
.bottom-actions[b-b5c70sxubj] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}