/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-jntx2093my] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.app-header[b-jntx2093my] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem max(1rem, calc((100vw - 72rem) / 2));
    border-bottom: 1px solid var(--header-border);
    background: var(--header-bg);
    flex-wrap: wrap;
}

.app-brand[b-jntx2093my] {
    margin-right: auto;
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.03em;
}

main[b-jntx2093my] {
    flex: 1;
    display: flex;
}

    main .content[b-jntx2093my] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0 auto;
        padding: 1.25rem clamp(0.75rem, 3vw, 2rem);
    }

#blazor-error-ui[b-jntx2093my] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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-jntx2093my] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-0q9l6chugb],
.components-reconnect-repeated-attempt-visible[b-0q9l6chugb],
.components-reconnect-failed-visible[b-0q9l6chugb],
.components-pause-visible[b-0q9l6chugb],
.components-resume-failed-visible[b-0q9l6chugb],
.components-rejoining-animation[b-0q9l6chugb] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-0q9l6chugb],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-0q9l6chugb],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-0q9l6chugb],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-0q9l6chugb],
#components-reconnect-modal.components-reconnect-retrying[b-0q9l6chugb],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-0q9l6chugb],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-0q9l6chugb],
#components-reconnect-modal.components-reconnect-failed[b-0q9l6chugb],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-0q9l6chugb] {
    display: block;
}


#components-reconnect-modal[b-0q9l6chugb] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-0q9l6chugb 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-0q9l6chugb 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-0q9l6chugb 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-0q9l6chugb]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-0q9l6chugb 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-0q9l6chugb {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-0q9l6chugb {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-0q9l6chugb {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-0q9l6chugb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-0q9l6chugb] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-0q9l6chugb] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-0q9l6chugb] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-0q9l6chugb] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-0q9l6chugb] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-0q9l6chugb] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-0q9l6chugb 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-0q9l6chugb] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-0q9l6chugb {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Game.razor.rz.scp.css */
.match-screen[b-4s6cgdxy8c] {
    max-width: 72rem;
    margin-inline: auto;
}

.game-heading[b-4s6cgdxy8c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.game-title[b-4s6cgdxy8c] { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; }
.game-utilities[b-4s6cgdxy8c] { display: flex; gap: 0.5rem; margin-left: auto; }
.copy-link[b-4s6cgdxy8c], .btn-audio-mute[b-4s6cgdxy8c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: 0.75rem;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.875rem;
}
.btn-audio-mute[b-4s6cgdxy8c] { width: 2.75rem; padding: 0; }
.copy-status[b-4s6cgdxy8c] { width: 100%; font-size: 0.875rem; color: var(--text-secondary); }
.copy-status:empty[b-4s6cgdxy8c] { display: none; }
.lobby-link[b-4s6cgdxy8c] { margin-bottom: 1rem; }

.game-layout[b-4s6cgdxy8c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    grid-template-areas: "status status" "board commands" "log log";
    gap: 1.25rem 2rem;
    align-items: start;
}
.side-panel[b-4s6cgdxy8c] { min-width: 0; }
.side-panel-left[b-4s6cgdxy8c] {
    grid-area: status;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border-block: 1px solid var(--border-default);
    padding-block: 1rem;
}
.phase-banner[b-4s6cgdxy8c] { flex: 1 1 24rem; min-width: 0; }
.banner-header[b-4s6cgdxy8c] { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.banner-title[b-4s6cgdxy8c] { font-size: 1rem; font-weight: 700; }
.banner-hint[b-4s6cgdxy8c] { margin-top: 0.375rem; max-width: 70ch; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; }
.banner-waiting .btn[b-4s6cgdxy8c] { margin-top: 0.75rem; }
.opponent-badge[b-4s6cgdxy8c] { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-secondary); }
.opponent-badge[b-4s6cgdxy8c]::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.badge-ready[b-4s6cgdxy8c] { color: var(--alert-success-text); }
.banner-victory[b-4s6cgdxy8c] { color: var(--alert-success-text); }
.banner-defeat[b-4s6cgdxy8c] { color: var(--alert-danger-text); }
.banner-draw[b-4s6cgdxy8c] { color: var(--alert-warning-text); }
.draw-action-bar[b-4s6cgdxy8c] { margin-top: 1rem; }
.btn-draw-offer[b-4s6cgdxy8c] { display: inline-flex; gap: 0.5rem; align-items: center; }
.draw-offer-card[b-4s6cgdxy8c] { width: 100%; padding: 0.75rem 0; border-top: 1px solid var(--border-default); }
.draw-offer-title[b-4s6cgdxy8c] { font-weight: 700; }
.draw-offer-text[b-4s6cgdxy8c] { margin-block: 0.375rem 0.75rem; color: var(--text-secondary); font-size: 0.875rem; }
.draw-offer-actions[b-4s6cgdxy8c] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.board-column[b-4s6cgdxy8c] {
    grid-area: board;
    min-width: 0;
    width: min(100%, max(22rem, calc(100dvh - 24rem)));
    max-width: 40rem;
    justify-self: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.board-panel[b-4s6cgdxy8c] { min-width: 0; }
.player-corner[b-4s6cgdxy8c] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 1.5rem; padding-left: 1.25rem; font-size: 0.875rem; }
.player-name[b-4s6cgdxy8c] { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.player-status[b-4s6cgdxy8c] { color: var(--text-secondary); }
.player-status.connected[b-4s6cgdxy8c] { color: var(--alert-success-text); }
.player-you[b-4s6cgdxy8c] { color: var(--text-secondary); font-size: 0.75rem; }
.player-top[b-4s6cgdxy8c]::before, .player-bottom[b-4s6cgdxy8c]::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-orange); }
.player-corner.team-one[b-4s6cgdxy8c]::before { background: var(--tank-blue); }

.side-panel-right[b-4s6cgdxy8c] { grid-area: commands; }
.deploy-tray[b-4s6cgdxy8c], .planning-tray[b-4s6cgdxy8c] { display: flex; flex-direction: column; gap: 0.75rem; }
.panel-section-title[b-4s6cgdxy8c] { font-weight: 700; font-size: 1rem; }
.planning-header[b-4s6cgdxy8c] { display: flex; flex-direction: column; gap: 0.75rem; }
.ap-counter[b-4s6cgdxy8c] { display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem; align-items: center; font-size: 0.875rem; }
.ap-label[b-4s6cgdxy8c], .bank-tag[b-4s6cgdxy8c] { color: var(--text-secondary); }
.ap-values[b-4s6cgdxy8c] { font-variant-numeric: tabular-nums; }
.ap-pips[b-4s6cgdxy8c] { display: flex; gap: 0.25rem; margin-left: auto; flex-wrap: wrap; max-width: 5rem; }
.ap-pip[b-4s6cgdxy8c] { width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--border-strong); }
.ap-available[b-4s6cgdxy8c] { background: var(--color-primary); }
.ap-bank-empty[b-4s6cgdxy8c] { background: transparent; border: 1px solid var(--border-strong); }

.tank-cards[b-4s6cgdxy8c] { display: flex; flex-direction: column; border-block: 1px solid var(--border-default); }
.tank-card[b-4s6cgdxy8c] { position: relative; padding: 0.75rem; border-bottom: 1px solid var(--border-default); }
.tank-card:last-child[b-4s6cgdxy8c] { border-bottom: 0; }
.tank-card.card-selected[b-4s6cgdxy8c] { background: var(--color-primary-soft); }
.tank-card-header[b-4s6cgdxy8c] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
.tank-select[b-4s6cgdxy8c] { border: 0; background: transparent; color: var(--text-primary); font-size: 0.9375rem; font-weight: 700; padding: 0; text-align: left; min-height: 1.75rem; overflow-wrap: anywhere; }
.tank-select[b-4s6cgdxy8c]::after { content: ''; position: absolute; inset: 0; }
.tank-select:hover[b-4s6cgdxy8c] { color: var(--color-primary); }
.tank-select:focus-visible[b-4s6cgdxy8c]::after { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.tank-card.card-selected .tank-select[b-4s6cgdxy8c] { color: var(--color-primary); }
.tank-hp[b-4s6cgdxy8c], .tank-card-pos[b-4s6cgdxy8c], .pos-badge[b-4s6cgdxy8c], .actions-count-badge[b-4s6cgdxy8c] { font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.tank-hp[b-4s6cgdxy8c] { color: var(--alert-success-text); }
.pos-placed[b-4s6cgdxy8c] { color: var(--text-secondary); }
.pos-unplaced[b-4s6cgdxy8c] { color: var(--alert-warning-text); }
.tank-card-actions[b-4s6cgdxy8c] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.tank-card-dir[b-4s6cgdxy8c] { color: var(--text-secondary); font-size: 0.8125rem; }
.tank-card-dir strong[b-4s6cgdxy8c] { color: var(--text-primary); font-weight: 500; }
.tank-card-meta[b-4s6cgdxy8c] { display: flex; gap: 0.5rem; }
.actions-count-badge[b-4s6cgdxy8c] { color: var(--color-primary); }
.btn-rotate[b-4s6cgdxy8c] { position: relative; z-index: 1; display: inline-flex; gap: 0.375rem; align-items: center; min-height: 2.75rem; padding: 0.375rem 0.625rem; border: 1px solid var(--border-default); border-radius: 0.5rem; background: var(--bg-elevated); color: var(--text-primary); font-size: 0.8125rem; }

.action-palette[b-4s6cgdxy8c] { display: flex; flex-direction: column; gap: 0.5rem; }
.action-palette-title[b-4s6cgdxy8c] { color: var(--text-secondary); font-size: 0.875rem; }
.action-palette-title span[b-4s6cgdxy8c] { color: var(--text-primary); font-weight: 700; }
.action-buttons-grid[b-4s6cgdxy8c] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.btn-action[b-4s6cgdxy8c] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.25rem; min-height: 3.5rem; border: 1px solid var(--border-default); border-radius: 0.75rem; background: var(--bg-elevated); color: var(--text-primary); font-size: 0.75rem; line-height: 1.3; }
.btn-action-fire[b-4s6cgdxy8c] { grid-column: span 2; flex-direction: row; min-height: 2.75rem; }
.btn-action-wait[b-4s6cgdxy8c] { min-height: 2.75rem; }
.btn-action:hover:not(:disabled)[b-4s6cgdxy8c], .btn-rotate:hover:not(:disabled)[b-4s6cgdxy8c] { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary); }
.btn-action-fire:hover:not(:disabled)[b-4s6cgdxy8c] { background: var(--alert-danger-bg); color: var(--alert-danger-text); border-color: var(--color-danger); }

.action-queue-card[b-4s6cgdxy8c] { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.action-queue-title[b-4s6cgdxy8c] { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; }
.queue-count[b-4s6cgdxy8c] { color: var(--text-secondary); font-weight: 400; font-variant-numeric: tabular-nums; }
.empty-queue[b-4s6cgdxy8c] { color: var(--text-secondary); font-size: 0.875rem; padding: 0.5rem 0; }
.queue-list[b-4s6cgdxy8c] { max-height: 14rem; overflow-y: auto; scrollbar-gutter: stable; }
.queue-item[b-4s6cgdxy8c] { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; min-height: 2.75rem; border-bottom: 1px solid var(--border-default); font-size: 0.8125rem; }
.queue-num[b-4s6cgdxy8c] { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.queue-tank[b-4s6cgdxy8c] { font-weight: 700; }
.queue-type[b-4s6cgdxy8c] { flex: 1; min-width: 4rem; color: var(--text-secondary); }
.btn-remove-action[b-4s6cgdxy8c] { display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; background: transparent; color: var(--text-secondary); border: 0; border-radius: 0.5rem; }
.btn-remove-action:hover[b-4s6cgdxy8c] { color: var(--alert-danger-text); background: var(--alert-danger-bg); }
.deploy-actions[b-4s6cgdxy8c], .deploy-actions-confirmed[b-4s6cgdxy8c] { display: flex; flex-direction: column; gap: 0.5rem; }
.btn-confirm-deploy[b-4s6cgdxy8c], .btn-cancel-confirm[b-4s6cgdxy8c] { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.confirmed-status-badge[b-4s6cgdxy8c] { color: var(--alert-success-text); font-size: 0.875rem; line-height: 1.5; }

.combat-log-card[b-4s6cgdxy8c] { grid-area: log; border-top: 1px solid var(--border-default); padding-top: 0.75rem; }
.combat-log-card summary[b-4s6cgdxy8c] { cursor: pointer; padding-block: 0.5rem; color: var(--text-secondary); font-size: 0.875rem; }
.combat-log-card summary span[b-4s6cgdxy8c] { margin-left: 0.5rem; font-variant-numeric: tabular-nums; }
.combat-log-entries[b-4s6cgdxy8c] { max-height: 16rem; overflow-y: auto; margin-top: 0.5rem; }
.log-entry[b-4s6cgdxy8c] { padding-block: 0.375rem; font-size: 0.8125rem; line-height: 1.5; overflow-wrap: anywhere; }
button[b-4s6cgdxy8c] { cursor: pointer; transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; }
button:disabled[b-4s6cgdxy8c] { cursor: default; opacity: 0.45; }
button:focus-visible[b-4s6cgdxy8c], summary:focus-visible[b-4s6cgdxy8c] { outline: 2px solid var(--color-primary); outline-offset: 3px; }

@media (max-width: 760px) {
    .game-layout[b-4s6cgdxy8c] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "board" "commands" "log"; gap: 1.25rem; }
    .board-column[b-4s6cgdxy8c] { width: 100%; max-width: 34rem; }
    .side-panel-right[b-4s6cgdxy8c] { width: 100%; max-width: 34rem; justify-self: center; }
    .side-panel-left[b-4s6cgdxy8c] { align-items: start; }
    .phase-banner[b-4s6cgdxy8c] { flex-basis: 100%; }
    .game-heading[b-4s6cgdxy8c] { margin-bottom: 0.75rem; }
    .game-title[b-4s6cgdxy8c] { font-size: 1.25rem; }
    .copy-link span[b-4s6cgdxy8c] { display: none; }
    .copy-link[b-4s6cgdxy8c] { width: 2.75rem; padding: 0; }
    .tank-cards[b-4s6cgdxy8c] { flex-direction: row; }
    .tank-card[b-4s6cgdxy8c] { flex: 1; min-width: 0; border-bottom: 0; }
    .tank-card + .tank-card[b-4s6cgdxy8c] { border-left: 1px solid var(--border-default); }
    .tank-card-header[b-4s6cgdxy8c], .tank-card-actions[b-4s6cgdxy8c] { align-items: start; }
    .planning-header[b-4s6cgdxy8c] { flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
    .ap-pips[b-4s6cgdxy8c] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    button[b-4s6cgdxy8c] { transition: none; }
}

@media (min-width: 761px) and (max-height: 800px) {
    .planning-tray[b-4s6cgdxy8c] { gap: 0.625rem; }
    .planning-header[b-4s6cgdxy8c] { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.375rem; }
    .ap-pips[b-4s6cgdxy8c] { display: none; }
    .tank-cards[b-4s6cgdxy8c] { flex-direction: row; }
    .tank-card[b-4s6cgdxy8c] { flex: 1; min-width: 0; padding: 0.5rem; border-bottom: 0; }
    .tank-card + .tank-card[b-4s6cgdxy8c] { border-left: 1px solid var(--border-default); }
    .tank-select[b-4s6cgdxy8c] { font-size: 0.8125rem; }
    .tank-card-actions[b-4s6cgdxy8c] { gap: 0.25rem; }
    .tank-card-dir[b-4s6cgdxy8c] { font-size: 0.75rem; }
    .tank-hp[b-4s6cgdxy8c] { font-size: 0.6875rem; }
}

.maneuver-option[b-4s6cgdxy8c] { display:flex;gap:.5rem;align-items:center;min-height:44px;font-size:.8rem;line-height:1.3;cursor:pointer; }
.maneuver-option input[b-4s6cgdxy8c] { accent-color:var(--color-primary);width:1rem;height:1rem;flex-shrink:0; }
.plan-preview-hint[b-4s6cgdxy8c] { font-size:.75rem;line-height:1.4;color:var(--text-secondary);margin:.5rem 0; }
.rematch-actions[b-4s6cgdxy8c] { display:flex;flex-direction:column;gap:.75rem; }
.rematch-actions p[b-4s6cgdxy8c] {margin:0;color:var(--text-secondary)}

.game-utilities[b-4s6cgdxy8c] {flex-wrap:wrap}
.home-link[b-4s6cgdxy8c] {text-decoration:none}
@media (max-width:760px) { .copy-link.home-link[b-4s6cgdxy8c] {width:auto;padding:.5rem .75rem} }

@media (min-width:761px) and (max-height:800px) {
    .planning-tray[b-4s6cgdxy8c] {gap:.5rem}
    .action-palette[b-4s6cgdxy8c] {display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .5rem}
    .action-palette-title[b-4s6cgdxy8c] {align-self:center}
    .action-buttons-grid[b-4s6cgdxy8c] {grid-column:1 / -1}
    .btn-action[b-4s6cgdxy8c] {min-height:3rem}
    .btn-action-fire[b-4s6cgdxy8c],.btn-action-wait[b-4s6cgdxy8c] {min-height:2.75rem}
    .action-queue-card[b-4s6cgdxy8c] {padding-top:.5rem}
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-buttons[b-druhis7cwy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    margin-inline: auto;
    max-width: 40rem;
}

.home-action[b-druhis7cwy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    text-align: left;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 1rem;
    text-decoration: none;
}

.home-action-link[b-druhis7cwy] {
    width: 100%;
    grid-column: 1 / -1;
}

.home-action-primary[b-druhis7cwy] {
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-color: var(--color-primary);
}

.home-action:hover[b-druhis7cwy] {
    border-color: var(--color-primary);
    background: var(--bg-surface-alt);
}

.home-action:focus-visible[b-druhis7cwy] {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

.action-icon[b-druhis7cwy] {
    font-size: 2rem;
    color: var(--color-primary);
}

.action-icon svg[b-druhis7cwy] {
    display: block;
    width: 2rem;
    height: 2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.action-arrow[b-druhis7cwy] {
    margin-left: auto;
    color: var(--text-muted);
}

@media (max-width: 760px) {
    .home-buttons[b-druhis7cwy] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.modal-backdrop-custom[b-druhis7cwy] {
    position: fixed;
    inset: 0;
    background: var(--app-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    overflow-y: auto;
}

.modal-box[b-druhis7cwy] {
    background: var(--app-modal-bg);
    border-radius: 0.5rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 0.5rem 1rem var(--app-modal-shadow);
}

.modal-actions[b-druhis7cwy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.hero[b-druhis7cwy] {
    width: 100%;
    text-align: center;
}

.hero h1[b-druhis7cwy] {
    margin: 0px;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
}

.hero p[b-druhis7cwy] {
    margin-top: 0.5rem;
    color: var(--text-muted);
}

.hero[b-druhis7cwy] { max-width: 40rem; margin: clamp(2rem, 10dvh, 6rem) auto 0; text-align: left; }
.hero h1[b-druhis7cwy] { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.03em; text-wrap: balance; }
.hero .home-description[b-druhis7cwy] { max-width: 42ch; margin-top: 1rem; font-size: 1.125rem; line-height: 1.6; color: var(--text-secondary); }
.hero .home-author[b-druhis7cwy] { font-size: 0.875rem; }
.home-action[b-druhis7cwy] { transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; }
.home-action-primary .action-icon[b-druhis7cwy], .home-action-primary .action-arrow[b-druhis7cwy] { color: var(--text-on-primary); }
.home-action-primary:hover[b-druhis7cwy] { background: var(--color-primary-hover); color: var(--text-on-primary); }
.home-action-link[b-druhis7cwy] { border: 0; background: transparent; padding-inline: 0; font-size: 0.9375rem; }
.home-action-link:hover[b-druhis7cwy] { background: transparent; color: var(--color-primary); }
.home-action-link .action-icon svg[b-druhis7cwy] { width: 1.25rem; height: 1.25rem; }
.modal-box[b-druhis7cwy] { border-radius: 1rem; }
@media (prefers-reduced-motion: reduce) { .home-action[b-druhis7cwy] { transition: none; } }
/* /Components/Pages/Join.razor.rz.scp.css */
.join-page[b-80j7ibfsl2] {
    max-width: 26rem;
    margin-inline: auto;
    padding: 1.5rem;
    border: 1px solid var(--border-default);
    border-radius: 1rem;
    background: var(--bg-surface);
}

.join-page h1[b-80j7ibfsl2] {
    font-size: 1.5rem;
}

.room-pin[b-80j7ibfsl2] {
    color: var(--text-muted);
    margin-block: 1rem;
}

.room-pin strong[b-80j7ibfsl2] {
    color: var(--text-primary);
    letter-spacing: 0.1em;
}
/* /Components/Pages/Rules.razor.rz.scp.css */
.rules-page[b-5d969ug01l] {
    width: min(100%, 48rem);
    margin-inline: auto;
}

.rules-hero[b-5d969ug01l] {
    padding-block: 0.5rem 2rem;
}

.back-link[b-5d969ug01l] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.75rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.back-link:hover[b-5d969ug01l] {
    color: var(--color-primary);
}

.back-link svg[b-5d969ug01l] {
    width: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rules-hero h1[b-5d969ug01l] {
    max-width: 12ch;
    margin: 0 0 0.75rem;
    font-size: clamp(2.25rem, 7vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.rules-hero p[b-5d969ug01l] {
    max-width: 65ch;
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.65;
}

.rules-flow[b-5d969ug01l] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-block: 0.75rem;
    margin-bottom: 2.5rem;
    border-block: 1px solid var(--border-default);
    scrollbar-width: thin;
}

.rules-flow a[b-5d969ug01l] {
    flex: 0 0 auto;
    padding: 0.45rem 0.75rem;
    border-radius: 0.45rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.rules-flow a:hover[b-5d969ug01l] {
    color: var(--text-primary);
    background: var(--bg-surface-alt);
}

.rules-content[b-5d969ug01l] {
    display: grid;
    gap: 3rem;
}

.rules-content section[b-5d969ug01l] {
    scroll-margin-top: 2rem;
}

.rules-content h2[b-5d969ug01l] {
    margin: 0 0 0.65rem;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    letter-spacing: -0.025em;
}

.rules-content p[b-5d969ug01l] {
    max-width: 70ch;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.orientation-note[b-5d969ug01l] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--color-primary-soft);
    color: var(--text-primary);
}

.orientation-note svg[b-5d969ug01l] {
    flex: 0 0 auto;
    width: 1.5rem;
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.action-list[b-5d969ug01l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    margin: 1.5rem 0 0;
    list-style: none;
    border-top: 1px solid var(--border-default);
}

.action-list li[b-5d969ug01l] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-default);
}

.action-list li:nth-child(odd)[b-5d969ug01l] {
    padding-right: 1rem;
}

.action-list li:nth-child(even)[b-5d969ug01l] {
    padding-left: 1rem;
    border-left: 1px solid var(--border-default);
}

.action-list span[b-5d969ug01l] {
    color: var(--text-secondary);
    line-height: 1.5;
}

.resolution-order[b-5d969ug01l] {
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 1.5rem 0;
    list-style-position: inside;
}

.resolution-order li[b-5d969ug01l] {
    flex: 1;
    padding: 0.85rem;
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    text-align: center;
}

.rules-facts[b-5d969ug01l] {
    display: grid;
    gap: 0.85rem;
    padding-top: 0.5rem;
}

.rules-facts p[b-5d969ug01l] {
    padding-left: 1rem;
    border-left: 1px solid var(--color-primary);
}

.rules-cta[b-5d969ug01l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--border-default);
}

.rules-cta p[b-5d969ug01l] {
    margin: 0;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .action-list[b-5d969ug01l] {
        grid-template-columns: 1fr;
    }

    .action-list li:nth-child(odd)[b-5d969ug01l],
    .action-list li:nth-child(even)[b-5d969ug01l] {
        padding-inline: 0;
        border-left: 0;
    }

    .resolution-order[b-5d969ug01l] {
        flex-direction: column;
    }

    .rules-cta[b-5d969ug01l] {
        align-items: stretch;
        flex-direction: column;
    }
}
/* /Components/Shared/GameBoard.razor.rz.scp.css */
.board-layout[b-a9pgzvr2to] {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    grid-template-rows: 1.25rem auto;
    width: 100%;
    max-width: 45rem;
}

.column-labels[b-a9pgzvr2to] {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(var(--board-size), minmax(0, 1fr));
    padding-inline: 1px;
}

.row-labels[b-a9pgzvr2to] {
    grid-row: 2;
    display: grid;
    grid-template-rows: repeat(var(--board-size), minmax(0, 1fr));
    padding-block: 1px;
}

.column-labels[b-a9pgzvr2to], .row-labels[b-a9pgzvr2to] {
    gap: 1px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.column-labels span[b-a9pgzvr2to], .row-labels span[b-a9pgzvr2to] {
    display: grid;
    place-items: center;
    min-width: 0;
}

.game-board[b-a9pgzvr2to] {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(var(--board-size), minmax(0, 1fr));
    grid-template-rows: repeat(var(--board-size), minmax(0, 1fr));
    width: 100%;
    aspect-ratio: 1;
    box-sizing: border-box;
    gap: 1px;
    border: 1px solid var(--border-strong);
    background: var(--border-strong);
}

.game-board-cell[b-a9pgzvr2to] {
    position: relative;
    padding: 0;
    margin: 0;
    border: none;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: background 0.15s ease;
    user-select: none;
}

.game-board-cell:hover[b-a9pgzvr2to] {
    z-index: 15;
}

.game-board-cell.has-active-popup[b-a9pgzvr2to] {
    z-index: 25;
}

.game-board-cell.deploy-zone[b-a9pgzvr2to] {
    background: var(--bg-surface-alt);
    background: rgba(59, 130, 246, 0.08);
    outline: 1px dashed var(--color-primary);
    outline-offset: -2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-board-cell.deploy-zone:hover[b-a9pgzvr2to] {
    background: var(--color-primary-soft);
    background: var(--bg-surface-alt);
    outline-color: var(--color-primary);
}

.deploy-marker[b-a9pgzvr2to] {
    color: var(--text-muted);
    font-size: 0.8rem;
    opacity: 0.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--color-primary);
    opacity: 0.75;
    pointer-events: none;
    user-select: none;
}

.game-board-cell.has-tank[b-a9pgzvr2to] {
    cursor: pointer;
}

.tank-unit[b-a9pgzvr2to] {
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tank-unit.tank-selected[b-a9pgzvr2to] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: 4px;
}

.tank-unit.tank-destroyed[b-a9pgzvr2to] {
    opacity: 0.35;
    filter: grayscale(1);
}

/* Health Pips */
.tank-pips[b-a9pgzvr2to] {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    pointer-events: none;
    z-index: 2;
}

.pip[b-a9pgzvr2to] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.pip-active[b-a9pgzvr2to] {
    background: var(--color-success);
    box-shadow: 0 0 2px var(--color-success);
}

.pip-empty[b-a9pgzvr2to] {
    background: var(--border-strong);
    opacity: 0.6;
}

/* Action Badges on Tank */
.action-badges[b-a9pgzvr2to] {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1px;
    pointer-events: none;
    z-index: 2;
}

.action-badge[b-a9pgzvr2to] {
    font-size: 0.6rem;
    padding: 0 2px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    line-height: 1;
}

.tank-svg[b-a9pgzvr2to] {
    width: 100%;
    height: 100%;
}

/* Player 1 Colors (Blue theme) */
.tank-p1 .tank-barrel[b-a9pgzvr2to] {
    fill: #0056b3;
}
.tank-p1 .tank-tread[b-a9pgzvr2to] {
    fill: #2c3e50;
}
.tank-p1 .tank-hull[b-a9pgzvr2to] {
    fill: var(--tank-blue);
}
.tank-p1 .tank-turret[b-a9pgzvr2to] {
    fill: #004085;
}
.tank-p1 .tank-symbol[b-a9pgzvr2to] {
    fill: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
}

/* Player 2 Colors (Orange theme) */
.tank-p2 .tank-barrel[b-a9pgzvr2to] {
    fill: #b34700;
}
.tank-p2 .tank-tread[b-a9pgzvr2to] {
    fill: #2c3e50;
}
.tank-p2 .tank-hull[b-a9pgzvr2to] {
    fill: var(--color-orange);
}
.tank-p2 .tank-turret[b-a9pgzvr2to] {
    fill: #803300;
}
.tank-p2 .tank-symbol[b-a9pgzvr2to] {
    fill: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
}

/* Tank Action Menu (Rendered conditionally for single active tank) */
.tank-hover-menu[b-a9pgzvr2to] {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 0.4rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    padding: 3px;
    gap: 3px;
    z-index: 30;
    pointer-events: auto;
    white-space: nowrap;
    animation: fadeInMenu-b-a9pgzvr2to 0.12s ease-out;
}

.tank-hover-menu.menu-above[b-a9pgzvr2to] {
    bottom: calc(100% + 4px);
}

.tank-hover-menu.menu-below[b-a9pgzvr2to] {
    top: calc(100% + 4px);
}

.tank-hover-menu.align-center[b-a9pgzvr2to] {
    left: 50%;
    transform: translateX(-50%);
}

.tank-hover-menu.align-left[b-a9pgzvr2to] {
    left: 0;
}

.tank-hover-menu.align-right[b-a9pgzvr2to] {
    right: 0;
}

.tank-hover-btn[b-a9pgzvr2to] {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 0.25rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: all 0.12s ease;
}

.tank-hover-btn:hover:not(:disabled)[b-a9pgzvr2to] {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: scale(1.12);
    z-index: 1;
}

.tank-hover-btn:disabled[b-a9pgzvr2to] {
    opacity: 0.35;
    cursor: not-allowed;
}

.tank-hover-btn.hover-btn-move:hover:not(:disabled)[b-a9pgzvr2to] {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tank-hover-btn.hover-btn-fire:hover:not(:disabled)[b-a9pgzvr2to] {
    background: var(--alert-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.tank-hover-btn.hover-btn-wait:hover:not(:disabled)[b-a9pgzvr2to] {
    background: rgba(230, 140, 0, 0.15);
    border-color: #e68c00;
    color: #e68c00;
}

.tank-hover-btn.hover-btn-close[b-a9pgzvr2to] {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    border-color: transparent;
}

.tank-hover-btn.hover-btn-close:hover[b-a9pgzvr2to] {
    background: var(--alert-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Move Trajectory Preview */
.game-board-cell.preview-move-target[b-a9pgzvr2to] {
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
    background: rgba(0, 120, 215, 0.15);
    z-index: 10;
}

.move-preview-overlay[b-a9pgzvr2to] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 8;
}

.move-preview-arrow[b-a9pgzvr2to] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    opacity: 0.85;
    animation: moveArrowPulse-b-a9pgzvr2to 0.8s infinite alternate ease-in-out;
}

@keyframes moveArrowPulse-b-a9pgzvr2to {
    from {
        transform: translateY(2px) scale(0.9);
        opacity: 0.5;
    }
    to {
        transform: translateY(-2px) scale(1.15);
        opacity: 1;
    }
}

/* Targeting Laser Beam */
.laser-beam-overlay[b-a9pgzvr2to] {
    position: absolute;
    pointer-events: none;
    z-index: 12;
    background: #ff2222;
    box-shadow: 0 0 6px #ff3333, 0 0 12px #ff0000;
}

.laser-beam-overlay.laser-vert[b-a9pgzvr2to] {
    width: 3px;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.laser-beam-overlay.laser-horiz[b-a9pgzvr2to] {
    height: 3px;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.laser-beam-overlay.active-laser[b-a9pgzvr2to] {
    background: #ff0055;
    box-shadow: 0 0 10px #ff0055, 0 0 20px #ff0000;
    animation: laserPulse-b-a9pgzvr2to 0.15s infinite alternate;
}

.laser-beam-overlay.active-laser.laser-vert[b-a9pgzvr2to] {
    width: 5px;
}

.laser-beam-overlay.active-laser.laser-horiz[b-a9pgzvr2to] {
    height: 5px;
}

@keyframes laserPulse-b-a9pgzvr2to {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* Laser Target Reticle */
.laser-target-reticle[b-a9pgzvr2to] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: #ff2222;
    pointer-events: none;
    z-index: 14;
    animation: targetSpin-b-a9pgzvr2to 1.2s infinite ease-in-out;
    filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.8));
}

@keyframes targetSpin-b-a9pgzvr2to {
    0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    50% { transform: translate(-50%, -50%) scale(1.25) rotate(90deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(180deg); }
}

/* Tank Damaged Shake/Flash Animation */
.tank-unit.tank-damaged-flash[b-a9pgzvr2to] {
    animation: damageShake-b-a9pgzvr2to 0.4s ease-in-out;
    filter: drop-shadow(0 0 8px #ff0000) brightness(1.5) !important;
}

@keyframes damageShake-b-a9pgzvr2to {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-4px, 2px); }
    40% { transform: translate(4px, -3px); }
    60% { transform: translate(-3px, 3px); }
    80% { transform: translate(3px, -1px); }
}

@keyframes fadeInMenu-b-a9pgzvr2to {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Mystery Box */
.mystery-box-unit[b-a9pgzvr2to] {
    position: absolute;
    inset: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    z-index: 8;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    animation: boxFloat-b-a9pgzvr2to 2s ease-in-out infinite alternate;
}

.mystery-box-unit.box-ap[b-a9pgzvr2to] {
    background: radial-gradient(circle, rgba(234, 179, 8, 0.35) 0%, rgba(202, 138, 4, 0.12) 80%);
    border: 2px dashed #eab308;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.5);
}

.mystery-box-unit.box-hp[b-a9pgzvr2to] {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.35) 0%, rgba(22, 163, 74, 0.12) 80%);
    border: 2px dashed #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.box-icon[b-a9pgzvr2to] {
    font-size: 1.3rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.box-badge[b-a9pgzvr2to] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: 1px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.box-ap .box-badge[b-a9pgzvr2to] {
    background: #eab308;
    color: #000;
}

.box-hp .box-badge[b-a9pgzvr2to] {
    background: #22c55e;
    color: #fff;
}

@keyframes boxFloat-b-a9pgzvr2to {
    0% { transform: translateY(0) scale(0.96); }
    100% { transform: translateY(-3px) scale(1.04); }
}

/* Incoming Dropzone */
.incoming-dropzone[b-a9pgzvr2to] {
    position: absolute;
    inset: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #38bdf8;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.12);
    z-index: 7;
    pointer-events: none;
    overflow: hidden;
}

.drop-pulse-ring[b-a9pgzvr2to] {
    position: absolute;
    inset: -50%;
    border-radius: 50%;
    border: 2px solid rgba(56, 189, 248, 0.6);
    animation: dropRadar-b-a9pgzvr2to 2s linear infinite;
    pointer-events: none;
}

@keyframes dropRadar-b-a9pgzvr2to {
    0% { transform: scale(0.2); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0; }
}

.drop-icon[b-a9pgzvr2to] {
    font-size: 1.1rem;
    line-height: 1;
    animation: dropBounce-b-a9pgzvr2to 1.5s ease-in-out infinite alternate;
}

.drop-badge[b-a9pgzvr2to] {
    font-size: 0.6rem;
    font-weight: 800;
    background: #0284c7;
    color: #fff;
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: 2px;
}

@keyframes dropBounce-b-a9pgzvr2to {
    0% { transform: translateY(-2px); }
    100% { transform: translateY(2px); }
}

/* Floating Combat Text Badges */
.combat-floating-badge[b-a9pgzvr2to] {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 35;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    animation: combatFloatUp-b-a9pgzvr2to 1.6s ease-out forwards;
}

.combat-floating-badge.float-damage[b-a9pgzvr2to] {
    background: #dc2626;
    color: #fff;
    border: 1px solid #f87171;
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.8));
}

.combat-floating-badge.float-crit[b-a9pgzvr2to] {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    border: 1px solid #fbbf24;
    font-size: 0.95rem;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.9));
}

.combat-floating-badge.float-ap[b-a9pgzvr2to] {
    background: #eab308;
    color: #000;
    border: 1px solid #fef08a;
    filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.8));
}

.combat-floating-badge.float-hp[b-a9pgzvr2to] {
    background: #22c55e;
    color: #fff;
    border: 1px solid #86efac;
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.8));
}

.combat-floating-badge.float-destroyed[b-a9pgzvr2to] {
    background: #7f1d1d;
    color: #fca5a5;
    border: 1px solid #ef4444;
    font-size: 0.95rem;
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 1));
}

@keyframes combatFloatUp-b-a9pgzvr2to {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.6);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -15px) scale(1.15);
    }
    35% {
        transform: translate(-50%, -24px) scale(1);
    }
    75% {
        opacity: 1;
        transform: translate(-50%, -36px) scale(0.98);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -46px) scale(0.9);
    }
}

/* Tank Destruction FX */
.tank-destruction-fx[b-a9pgzvr2to] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 28;
    pointer-events: none;
}

.destruction-shockwave[b-a9pgzvr2to] {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #ff4444;
    animation: shockwaveExplode-b-a9pgzvr2to 1.2s ease-out forwards;
}

.destruction-blast[b-a9pgzvr2to] {
    font-size: 2.2rem;
    animation: blastPop-b-a9pgzvr2to 1.4s ease-out forwards;
}

@keyframes shockwaveExplode-b-a9pgzvr2to {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
        border-color: #fef08a;
    }
    50% {
        border-color: #ef4444;
    }
    100% {
        width: 90px;
        height: 90px;
        opacity: 0;
        border-color: #7f1d1d;
    }
}

@keyframes blastPop-b-a9pgzvr2to {
    0% {
        transform: scale(0.3) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: scale(1.4) rotate(15deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) rotate(-10deg);
        opacity: 1;
    }
    100% {
        transform: scale(0.4) rotate(30deg);
        opacity: 0;
    }
}

.tank-unit.tank-exploding[b-a9pgzvr2to] {
    animation: tankCollapse-b-a9pgzvr2to 1.5s ease-in-out forwards !important;
}

@keyframes tankCollapse-b-a9pgzvr2to {
    0% {
        transform: scale(1);
        filter: brightness(2) contrast(2);
    }
    25% {
        transform: scale(1.2) rotate(8deg);
        filter: brightness(3) sepia(1) hue-rotate(-50deg);
    }
    60% {
        transform: scale(0.9) rotate(-12deg);
        filter: brightness(1.5) contrast(3);
    }
    100% {
        transform: scale(0.7) rotate(0deg);
        filter: grayscale(1) opacity(0.5);
    }
}

/* Tank Hover Info Card */
.tank-hover-card[b-a9pgzvr2to] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    min-width: 120px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 6px 8px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.75);
    z-index: 32;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;

    white-space: nowrap;
}

.tank-hover-card.card-above[b-a9pgzvr2to] {
    bottom: calc(100% + 6px);
}

.tank-hover-card.card-below[b-a9pgzvr2to] {
    top: calc(100% + 6px);
}

.game-board-cell.has-tank:hover .tank-hover-card[b-a9pgzvr2to] {
    opacity: 1;
}

.th-header[b-a9pgzvr2to] {
    display: flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 3px;
    margin-bottom: 4px;
}

.th-symbol[b-a9pgzvr2to] {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--color-primary);
}

.th-name[b-a9pgzvr2to] {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-primary);
    flex-grow: 1;
}

.th-badge[b-a9pgzvr2to] {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
}

.th-badge.badge-mine[b-a9pgzvr2to] {
    background: #0284c7;
    color: var(--text-primary);
}

.th-badge.badge-enemy[b-a9pgzvr2to] {
    background: #dc2626;
    color: var(--text-primary);
}

.th-details[b-a9pgzvr2to] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.th-row[b-a9pgzvr2to] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.th-row strong[b-a9pgzvr2to] {
    color: var(--text-primary);
}

.th-row .th-dead[b-a9pgzvr2to] {
    color: #ef4444;
}

.th-row .th-ok[b-a9pgzvr2to] {
    color: #22c55e;
}

@media (hover: none) {
    .tank-hover-menu[b-a9pgzvr2to] {
        display: none !important;
    }
    .tank-hover-card[b-a9pgzvr2to] {
        display: none !important;
    }
}

.board-layout:focus-visible[b-a9pgzvr2to], .game-board-cell:focus-visible[b-a9pgzvr2to] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    z-index: 20;
}
.game-board[b-a9pgzvr2to] { border-radius: 4px; }
.deploy-marker[b-a9pgzvr2to] { line-height: 1; }
.th-header[b-a9pgzvr2to] { border-color: var(--border-default); }
.th-symbol[b-a9pgzvr2to] { color: var(--tank-blue); }
.th-name[b-a9pgzvr2to], .th-row strong[b-a9pgzvr2to] { color: var(--text-primary); }
.tank-hover-card[b-a9pgzvr2to] { box-shadow: var(--shadow-md); border: 0; }
@media (max-width: 760px) {
    .tank-hover-menu[b-a9pgzvr2to], .tank-hover-card[b-a9pgzvr2to] { display: none; }
    .tank-pips[b-a9pgzvr2to] { top: 1px; gap: 1px; }
    .pip[b-a9pgzvr2to] { width: 3px; height: 3px; }
    .action-badges[b-a9pgzvr2to] { bottom: 0; }
    .action-badge[b-a9pgzvr2to] { font-size: 0.5rem; }
    .column-labels[b-a9pgzvr2to], .row-labels[b-a9pgzvr2to] { font-size: 0.6rem; }
    .box-icon[b-a9pgzvr2to], .drop-icon[b-a9pgzvr2to] { font-size: 0.75rem; }
    .box-badge[b-a9pgzvr2to], .drop-badge[b-a9pgzvr2to] { font-size: 0.45rem; padding: 0; }
    .mystery-box-unit[b-a9pgzvr2to] { inset: 1px; }
}
@media (prefers-reduced-motion: reduce) {
    .board-layout *[b-a9pgzvr2to], .board-layout *[b-a9pgzvr2to]::before, .board-layout *[b-a9pgzvr2to]::after {
        animation: none !important;
        transition: none !important;
    }
}

.planned-path[b-a9pgzvr2to] { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3; }
.planned-path line[b-a9pgzvr2to] { stroke:var(--color-primary);stroke-width:.065;stroke-dasharray:.12 .08; }
.planned-step[b-a9pgzvr2to] { position:absolute;inset:auto 0 0;display:flex;justify-content:center;align-items:center;gap:1px;background:var(--color-primary);color:var(--text-on-primary);font-size:clamp(.55rem,.75vw,.75rem);font-weight:700;z-index:4;pointer-events:none;line-height:1.2; }
.planned-step svg[b-a9pgzvr2to] { width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0; }
.planned-blocked[b-a9pgzvr2to] { background:var(--color-danger);color:#fff; }
@media (max-width:760px) { .planned-step[b-a9pgzvr2to] {font-size:.55rem} .planned-step svg[b-a9pgzvr2to] {width:9px;height:9px} }
/* /Components/Shared/PinInput.razor.rz.scp.css */
.pin-input[b-hliezviult] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.pin-digit[b-hliezviult] {
    width: 3rem;
    height: 3.25rem;
    text-align: center;
    font-size: 1.5rem;
    padding: 0;
}