/* /Components/Battle/AttackModal.razor.rz.scp.css */
.attack-modal-overlay[b-junzqn58ai] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.attack-modal-overlay.visible[b-junzqn58ai] {
    opacity: 1;
    pointer-events: all;
}

.attack-modal[b-junzqn58ai] {
    position: relative;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    border: 2px solid #ffd700;
    border-radius: 16px;
    padding: var(--modal-padding-mobile, 16px);
    width: calc(100% - 24px);
    max-width: 800px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
    margin: 12px;
}

@media (min-width: 768px) {
    .attack-modal[b-junzqn58ai] {
        padding: var(--modal-padding-desktop, 24px);
        width: auto;
        min-width: 600px;
        margin: 0;
    }
}

.modal-header[b-junzqn58ai] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.modal-title[b-junzqn58ai] {
    font-size: 1.6em;
    font-weight: bold;
    color: #ffd700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: 12px;
}

.modal-title-divider[b-junzqn58ai] {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.battle-arena[b-junzqn58ai] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
}

@media (min-width: 768px) {
    .battle-arena[b-junzqn58ai] {
        flex-direction: row;
        gap: 24px;
    }
}

/* Triangle Overlay for attack animations */
.triangle-overlay[b-junzqn58ai] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 100;
}

.triangle-svg[b-junzqn58ai] {
    width: 100%;
    height: 100%;
}

/* Attack lines connecting dice - color set via inline style */
.attack-line[b-junzqn58ai] {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: line-draw-b-junzqn58ai 0.5s ease-out forwards;
    filter: drop-shadow(0 0 3px currentColor);
}

/* Arrowhead at the end of attack lines - color set via inline style */
.arrow-head[b-junzqn58ai] {
    animation: arrow-fade-in-b-junzqn58ai 0.3s ease-out 0.4s forwards;
    opacity: 0;
    filter: drop-shadow(0 0 3px currentColor);
}

@keyframes line-draw-b-junzqn58ai {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes arrow-fade-in-b-junzqn58ai {
    to {
        opacity: 1;
    }
}

.attackers-side[b-junzqn58ai] {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 16px;
}

.defender-side[b-junzqn58ai] {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.side-label[b-junzqn58ai] {
    font-size: 0.9em;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-align: center;
}

.attackers-list[b-junzqn58ai] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attacker-row[b-junzqn58ai] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    transition: opacity 0.3s ease;
    /* Background color set via inline style using player color */
}

.attacker-row.eliminated[b-junzqn58ai] {
    opacity: 0.4;
    filter: grayscale(50%);
}

.troop-circle[b-junzqn58ai] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border: 2px solid rgb(128, 128, 128);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .troop-circle[b-junzqn58ai] {
        width: 44px;
        height: 44px;
        font-size: 1.2em;
    }
}

.troop-circle.skull[b-junzqn58ai] {
    background: #333 !important;
    border-color: #555;
}

.skull-icon[b-junzqn58ai] {
    font-size: 1.4em;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.attacker-info[b-junzqn58ai] {
    flex: 1;
    min-width: 0;
}

.territory-name[b-junzqn58ai] {
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-name[b-junzqn58ai] {
    font-size: 0.85em;
    color: #888;
}

.die-container[b-junzqn58ai] {
    flex-shrink: 0;
    position: relative;
}

/* 12-sided die (d12) - dodecahedron shape using clip-path */
.die[b-junzqn58ai] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    position: relative;
    /* Dodecahedron-like shape (12-sided approximation) */
    clip-path: polygon(
        50% 0%,
        85% 15%,
        100% 50%,
        85% 85%,
        50% 100%,
        15% 85%,
        0% 50%,
        15% 15%
    );
}

@media (min-width: 768px) {
    .die[b-junzqn58ai] {
        width: 52px;
        height: 52px;
        font-size: 1.4em;
    }
}

.die[b-junzqn58ai]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    clip-path: polygon(
        50% 0%,
        85% 15%,
        100% 50%,
        85% 85%,
        50% 100%,
        15% 85%,
        0% 50%,
        15% 15%
    );
    z-index: -1;
}

.die .die-value[b-junzqn58ai] {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.die.rolling[b-junzqn58ai] {
    animation: dice-shake-b-junzqn58ai 0.08s infinite;
}

.die.waiting[b-junzqn58ai] {
    opacity: 0.6;
}

.die.winner[b-junzqn58ai] {
    box-shadow: 0 0 25px rgba(74, 222, 128, 0.9);
    transform: scale(1.15);
}

.die.loser[b-junzqn58ai] {
    opacity: 0.4;
    transform: scale(0.85);
}

.die.eliminated-die[b-junzqn58ai] {
    opacity: 0.3;
    transform: scale(0.8);
    filter: grayscale(100%);
}

.dice-white[b-junzqn58ai] {
    background: linear-gradient(135deg, #ffffff 0%, #e9ecef 50%, #dee2e6 100%);
    color: #333;
    border: 2px solid #adb5bd;
}

.dice-yellow[b-junzqn58ai] {
    background: linear-gradient(135deg, #ffe066 0%, #ffc107 50%, #d39e00 100%);
    color: #333;
    border: 2px solid #c29200;
}

.dice-orange[b-junzqn58ai] {
    background: linear-gradient(135deg, #ff922b 0%, #fd7e14 50%, #d66a0f 100%);
    color: #fff;
    border: 2px solid #c45d0a;
}

.dice-red[b-junzqn58ai] {
    background: linear-gradient(135deg, #ff6b6b 0%, #dc3545 50%, #a82835 100%);
    color: #fff;
    border: 2px solid #8b2029;
}

.dice-black[b-junzqn58ai] {
    background: linear-gradient(135deg, #495057 0%, #343a40 50%, #212529 100%);
    color: #fff;
    border: 2px solid #0d0d0d;
}

@keyframes dice-shake-b-junzqn58ai {
    0% { transform: rotate(-5deg) translateX(-2px) translateY(-1px); }
    25% { transform: rotate(3deg) translateX(1px) translateY(2px); }
    50% { transform: rotate(-3deg) translateX(2px) translateY(-2px); }
    75% { transform: rotate(5deg) translateX(-1px) translateY(1px); }
    100% { transform: rotate(-5deg) translateX(-2px) translateY(-1px); }
}

.defender-row[b-junzqn58ai] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    margin: auto 0;
    /* Background color set via inline style using player color */
}

.defender-info[b-junzqn58ai] {
    flex: 1;
    min-width: 0;
}

.round-info[b-junzqn58ai] {
    text-align: center;
    font-size: 0.9em;
    color: #888;
    margin-bottom: 16px;
}

.battle-summary[b-junzqn58ai] {
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.battle-summary.visible[b-junzqn58ai] {
    opacity: 1;
    transform: translateY(0);
}

.battle-summary.attacker-victory[b-junzqn58ai] {
    background: rgba(74, 222, 128, 0.2);
    border: 1px solid rgba(74, 222, 128, 0.5);
}

.battle-summary.defender-victory[b-junzqn58ai] {
    background: rgba(96, 165, 250, 0.2);
    border: 1px solid rgba(96, 165, 250, 0.5);
}

.summary-result[b-junzqn58ai] {
    margin-bottom: 8px;
}

.victory-text[b-junzqn58ai] {
    font-size: 1.4em;
    font-weight: bold;
    color: #4ade80;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.defeat-text[b-junzqn58ai] {
    font-size: 1.4em;
    font-weight: bold;
    color: #60a5fa;
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}

.final-stats[b-junzqn58ai] {
    display: flex;
    justify-content: center;
    gap: 24px;
    font-size: 0.9em;
}

.stat[b-junzqn58ai] {
    color: #aaa;
}

.attacker-stat[b-junzqn58ai] {
    color: #f87171;
}

.defender-stat[b-junzqn58ai] {
    color: #60a5fa;
}

.elimination-notice[b-junzqn58ai] {
    margin-top: 8px;
    padding: 8px 16px;
    background: rgba(220, 53, 69, 0.3);
    border-radius: 4px;
    font-size: 0.9em;
    color: #f87171;
    font-weight: 600;
    display: inline-block;
}

.modal-footer[b-junzqn58ai] {
    display: flex;
    justify-content: center;
}

.btn-continue[b-junzqn58ai] {
    padding: 14px 32px;
    min-height: var(--touch-target-min, 44px);
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-continue:hover:not(:disabled)[b-junzqn58ai] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.btn-continue:disabled[b-junzqn58ai] {
    opacity: 0.5;
    cursor: not-allowed;
}

.skip-button[b-junzqn58ai] {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    color: #ffd700;
    font-size: 0.85em;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.skip-button:hover[b-junzqn58ai] {
    opacity: 1;
}
/* /Components/Battle/AttackOrderModal.razor.rz.scp.css */
.attack-order-modal-overlay[b-dd790qmnz2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.attack-order-modal-overlay.visible[b-dd790qmnz2] {
    opacity: 1;
    pointer-events: all;
}

.attack-order-modal[b-dd790qmnz2] {
    background: linear-gradient(180deg, #2a1a1a 0%, #1a0f0f 100%);
    border: 2px solid #dc3545;
    border-radius: 16px;
    padding: var(--modal-padding-mobile, 16px);
    width: calc(100% - 24px);
    max-width: 550px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 40px rgba(220, 53, 69, 0.3);
    animation: modal-appear-b-dd790qmnz2 0.2s ease-out;
    margin: 12px;
}

@media (min-width: 768px) {
    .attack-order-modal[b-dd790qmnz2] {
        padding: var(--modal-padding-desktop, 24px);
        width: auto;
        min-width: 450px;
        margin: 0;
    }
}

.modal-title[b-dd790qmnz2] {
    font-size: 1.4em;
    font-weight: bold;
    color: #dc3545;
    text-align: center;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

.modal-header[b-dd790qmnz2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(220, 53, 69, 0.3);
}

@media (min-width: 768px) {
    .modal-header[b-dd790qmnz2] {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        margin-bottom: 24px;
    }
}

.territory-label[b-dd790qmnz2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.player-pill[b-dd790qmnz2] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.territory-name[b-dd790qmnz2] {
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
}

.attacker-label .territory-name[b-dd790qmnz2] {
    color: #ff6b6b;
}

.defender-label .territory-name[b-dd790qmnz2] {
    color: #74c0fc;
}

.territory-troops[b-dd790qmnz2] {
    font-size: 0.9em;
    font-weight: 600;
    color: #aaa;
}

.attacker-label .territory-troops[b-dd790qmnz2] {
    color: #ff9999;
}

.defender-label .territory-troops[b-dd790qmnz2] {
    color: #99c9ff;
}

.attack-arrow[b-dd790qmnz2] {
    font-size: 1.5em;
    color: #dc3545;
    padding: 8px 0;
    text-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
    transform: rotate(90deg);
}

@media (min-width: 768px) {
    .attack-arrow[b-dd790qmnz2] {
        font-size: 2em;
        padding: 0 16px;
        transform: none;
    }
}

.troop-selector[b-dd790qmnz2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.preset-btn[b-dd790qmnz2] {
    flex: 1;
    min-width: 80px;
    padding: 12px 16px;
    min-height: var(--touch-target-min, 44px);
    border: none;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (min-width: 768px) {
    .preset-btn[b-dd790qmnz2] {
        flex: none;
        min-width: auto;
        padding: 10px 16px;
    }
}

.preset-btn:disabled[b-dd790qmnz2] {
    opacity: 0.4;
    cursor: not-allowed;
}

.none-btn[b-dd790qmnz2] {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: #fff;
}

.none-btn:hover:not(:disabled)[b-dd790qmnz2] {
    background: linear-gradient(135deg, #5a6268, #3d4349);
}

.all-btn[b-dd790qmnz2] {
    background: linear-gradient(135deg, #dc3545, #a82835);
    color: #fff;
}

.all-btn:hover:not(:disabled)[b-dd790qmnz2] {
    background: linear-gradient(135deg, #c82333, #8b1f2b);
}

.adjust-btn[b-dd790qmnz2] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    font-size: 1.8em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.adjust-btn:disabled[b-dd790qmnz2] {
    opacity: 0.3;
    cursor: not-allowed;
}

.minus-btn[b-dd790qmnz2] {
    background: linear-gradient(135deg, #ffea00, #e6d000);
    color: #333;
}

.minus-btn:hover:not(:disabled)[b-dd790qmnz2] {
    background: linear-gradient(135deg, #ffe600, #cdb800);
    transform: scale(1.05);
}

.plus-btn[b-dd790qmnz2] {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    color: #fff;
}

.plus-btn:hover:not(:disabled)[b-dd790qmnz2] {
    background: linear-gradient(135deg, #218838, #1a6429);
    transform: scale(1.05);
}

.slider-container[b-dd790qmnz2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.troop-slider[b-dd790qmnz2] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #333;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.troop-slider[b-dd790qmnz2]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc3545, #a82835);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

.troop-slider[b-dd790qmnz2]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc3545, #a82835);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

.troop-count[b-dd790qmnz2] {
    font-size: 2em;
    font-weight: bold;
    color: #dc3545;
    text-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

.modal-footer[b-dd790qmnz2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 768px) {
    .modal-footer[b-dd790qmnz2] {
        flex-direction: row;
        justify-content: flex-end;
        gap: 12px;
    }
}

.btn-cancel[b-dd790qmnz2], .btn-ok[b-dd790qmnz2] {
    padding: 14px 24px;
    min-height: var(--touch-target-min, 44px);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

@media (min-width: 768px) {
    .btn-cancel[b-dd790qmnz2], .btn-ok[b-dd790qmnz2] {
        width: auto;
        padding: 12px 24px;
    }
}

.btn-cancel[b-dd790qmnz2] {
    background: #444;
    color: #fff;
}

.btn-cancel:hover[b-dd790qmnz2] {
    background: #555;
}

.btn-ok[b-dd790qmnz2] {
    background: linear-gradient(135deg, #dc3545, #a82835);
    color: #fff;
    min-width: 120px;
}

.btn-ok:hover[b-dd790qmnz2] {
    background: linear-gradient(135deg, #c82333, #8b1f2b);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

/* Tactical Move Mode Styles */
.attack-arrow.tactical-move[b-dd790qmnz2] {
    color: #17a2b8;
    text-shadow: 0 0 10px rgba(23, 162, 184, 0.5);
}

.btn-ok.btn-tactical[b-dd790qmnz2] {
    background: linear-gradient(135deg, #17a2b8, #117a8b);
}

.btn-ok.btn-tactical:hover[b-dd790qmnz2] {
    background: linear-gradient(135deg, #138496, #0d5c6a);
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4);
}

@keyframes modal-appear-b-dd790qmnz2 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Surge Mode Styles */
.attack-order-modal.surge-mode[b-dd790qmnz2] {
    background: linear-gradient(180deg, #1a2a1a 0%, #0f1a0f 100%);
    border: 2px solid #ffea00;
    box-shadow: 0 0 40px rgba(255, 234, 0, 0.3);
}

.modal-title.surge-mode[b-dd790qmnz2] {
    color: #ffea00;
    text-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
}

.surge-warning[b-dd790qmnz2] {
    background: rgba(255, 234, 0, 0.15);
    border: 1px solid rgba(255, 234, 0, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    font-size: 0.9em;
    color: #ffea00;
    text-align: center;
}

.btn-ok.btn-surge[b-dd790qmnz2] {
    background: linear-gradient(135deg, #ffea00, #e6d000);
    color: #333;
}

.btn-ok.btn-surge:hover[b-dd790qmnz2] {
    background: linear-gradient(135deg, #ffe600, #cdb800);
    box-shadow: 0 4px 15px rgba(255, 234, 0, 0.4);
}

.surge-mode .troop-count[b-dd790qmnz2] {
    color: #ffea00;
    text-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
}

.surge-mode .troop-slider[b-dd790qmnz2]::-webkit-slider-thumb {
    background: linear-gradient(135deg, #ffea00, #e6d000);
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
}

.surge-mode .troop-slider[b-dd790qmnz2]::-moz-range-thumb {
    background: linear-gradient(135deg, #ffea00, #e6d000);
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
}

.surge-mode .all-btn[b-dd790qmnz2] {
    background: linear-gradient(135deg, #ffea00, #e6d000);
    color: #333;
}

.surge-mode .all-btn:hover:not(:disabled)[b-dd790qmnz2] {
    background: linear-gradient(135deg, #ffe600, #cdb800);
}
/* /Components/Battle/ReinforcementModal.razor.rz.scp.css */
.reinforcement-modal-overlay[b-uiocrkodmd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.reinforcement-modal-overlay.visible[b-uiocrkodmd] {
    opacity: 1;
    pointer-events: all;
}

.reinforcement-modal[b-uiocrkodmd] {
    background: linear-gradient(180deg, #1a2a1a 0%, #0f1a0f 100%);
    border: 2px solid #4ade80;
    border-radius: 16px;
    padding: var(--modal-padding-mobile, 16px);
    width: calc(100% - 24px);
    max-width: 850px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 60px rgba(74, 222, 128, 0.3);
    animation: modal-appear 0.3s ease-out;
    margin: 12px;
}

@media (min-width: 768px) {
    .reinforcement-modal[b-uiocrkodmd] {
        padding: var(--modal-padding-desktop, 28px);
        width: auto;
        min-width: 600px;
        margin: 0;
    }
}

.modal-columns[b-uiocrkodmd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .modal-columns[b-uiocrkodmd] {
        flex-direction: row;
        gap: 24px;
    }
}

.breakdown-column[b-uiocrkodmd] {
    flex: 1;
    min-width: 0;
    order: 1;
}

.all-players-column[b-uiocrkodmd] {
    width: 100%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    order: 2;
}

@media (min-width: 768px) {
    .all-players-column[b-uiocrkodmd] {
        width: 200px;
        order: 2;
    }
}

.all-players-header[b-uiocrkodmd] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: 0.9em;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.all-players-list[b-uiocrkodmd] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

@media (min-width: 768px) {
    .all-players-list[b-uiocrkodmd] {
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

.player-reinforcement-item[b-uiocrkodmd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    flex: 1 1 auto;
    min-width: 100px;
}

@media (min-width: 768px) {
    .player-reinforcement-item[b-uiocrkodmd] {
        flex: none;
        min-width: auto;
    }
}

.player-info[b-uiocrkodmd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-color-dot[b-uiocrkodmd] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.player-name[b-uiocrkodmd] {
    color: #ddd;
    font-size: 0.9em;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-troops[b-uiocrkodmd] {
    font-weight: bold;
    color: #4ade80;
    font-size: 0.95em;
}

.modal-header[b-uiocrkodmd] {
    text-align: center;
    margin-bottom: 24px;
}

.modal-header h2[b-uiocrkodmd] {
    margin: 0;
    font-size: 1.8em;
    color: #4ade80;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

.modal-subtitle[b-uiocrkodmd] {
    margin: 8px 0 0 0;
    color: #888;
    font-size: 0.95em;
}

.breakdown-list[b-uiocrkodmd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.breakdown-item[b-uiocrkodmd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border-left: 3px solid transparent;
}

@media (min-width: 768px) {
    .breakdown-item[b-uiocrkodmd] {
        padding: 12px 16px;
    }
}

.breakdown-item.territory-count[b-uiocrkodmd] {
    border-left-color: #60a5fa;
}

.breakdown-item.connected-empire[b-uiocrkodmd] {
    border-left-color: #f59e0b;
}

.breakdown-item.region-bonus[b-uiocrkodmd] {
    padding: 6px 12px 6px 28px;
    background: rgba(139, 92, 246, 0.1);
    border-left-color: #8b5cf6;
}

@media (min-width: 768px) {
    .breakdown-item.region-bonus[b-uiocrkodmd] {
        padding: 8px 16px 8px 40px;
    }
}

.breakdown-label[b-uiocrkodmd] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ddd;
    font-size: 0.95em;
}

.breakdown-icon[b-uiocrkodmd] {
    font-size: 1.2em;
}

.breakdown-value[b-uiocrkodmd] {
    font-size: 1.1em;
    font-weight: bold;
    color: #4ade80;
    min-width: 40px;
    text-align: right;
}

.region-bonuses[b-uiocrkodmd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.region-header[b-uiocrkodmd] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #aaa;
    font-size: 0.9em;
    padding: 8px 16px 4px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
}

.region-name[b-uiocrkodmd] {
    color: #c4b5fd;
    font-style: italic;
}

.region-value[b-uiocrkodmd] {
    color: #a78bfa;
}

.total-section[b-uiocrkodmd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.05));
    border: 2px solid #4ade80;
    border-radius: 12px;
    margin-bottom: 20px;
}

.total-label[b-uiocrkodmd] {
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
}

.total-value[b-uiocrkodmd] {
    font-size: 2em;
    font-weight: bold;
    color: #4ade80;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.6);
    animation: pulse-glow 2s ease-in-out infinite;
}

.close-button[b-uiocrkodmd] {
    width: 100%;
    padding: 14px;
    min-height: var(--touch-target-min, 44px);
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #0f1a0f;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-button:hover[b-uiocrkodmd] {
    background: linear-gradient(135deg, #86efac, #4ade80);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4);
}
/* /Components/Battle/SpoilsOfWarModal.razor.rz.scp.css */
.spoils-modal-overlay[b-oa0pkeyyuv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.spoils-modal-overlay.visible[b-oa0pkeyyuv] {
    opacity: 1;
    pointer-events: all;
}

.spoils-modal[b-oa0pkeyyuv] {
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    border: 2px solid #ffd700;
    border-radius: 16px;
    padding: var(--modal-padding-mobile, 16px);
    width: calc(100% - 24px);
    max-width: 550px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
    margin: 12px;
}

@media (min-width: 768px) {
    .spoils-modal[b-oa0pkeyyuv] {
        padding: var(--modal-padding-desktop, 24px);
        width: auto;
        min-width: 450px;
        margin: 0;
    }
}

.modal-header[b-oa0pkeyyuv] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.modal-title[b-oa0pkeyyuv] {
    font-size: 1.6em;
    font-weight: bold;
    color: #ffd700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: 4px;
}

.modal-subtitle[b-oa0pkeyyuv] {
    font-size: 1.1em;
    color: #aaa;
    margin-bottom: 12px;
}

.modal-title-divider[b-oa0pkeyyuv] {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.battle-arena[b-oa0pkeyyuv] {
    margin-bottom: 16px;
}

.armies-column[b-oa0pkeyyuv] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
}

.column-header[b-oa0pkeyyuv] {
    font-size: 0.9em;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-align: center;
}

.armies-list[b-oa0pkeyyuv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.army-row[b-oa0pkeyyuv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

@media (min-width: 768px) {
    .army-row[b-oa0pkeyyuv] {
        gap: 12px;
        padding: 10px 12px;
    }
}

.army-row.eliminated[b-oa0pkeyyuv] {
    opacity: 0.4;
    filter: grayscale(50%);
}

.troop-circle[b-oa0pkeyyuv] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .troop-circle[b-oa0pkeyyuv] {
        width: 44px;
        height: 44px;
        font-size: 1.2em;
    }
}

.troop-circle.skull[b-oa0pkeyyuv] {
    background: #333 !important;
    border-color: #555;
}

.skull-icon[b-oa0pkeyyuv] {
    font-size: 1.4em;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.army-info[b-oa0pkeyyuv] {
    flex: 1;
    min-width: 0;
}

.player-name[b-oa0pkeyyuv] {
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.territory-name[b-oa0pkeyyuv] {
    font-size: 0.8em;
    color: #888;
}

.die-container[b-oa0pkeyyuv] {
    flex-shrink: 0;
    position: relative;
}

.die[b-oa0pkeyyuv] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    position: relative;
    clip-path: polygon(
        50% 0%,
        85% 15%,
        100% 50%,
        85% 85%,
        50% 100%,
        15% 85%,
        0% 50%,
        15% 15%
    );
}

@media (min-width: 768px) {
    .die[b-oa0pkeyyuv] {
        width: 52px;
        height: 52px;
        font-size: 1.4em;
    }
}

.die .die-value[b-oa0pkeyyuv] {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.die.rolling[b-oa0pkeyyuv] {
    animation: dice-shake-b-oa0pkeyyuv 0.08s infinite;
}

.die.waiting[b-oa0pkeyyuv] {
    opacity: 0.6;
}

.die.winner[b-oa0pkeyyuv] {
    box-shadow: 0 0 25px rgba(74, 222, 128, 0.9);
    transform: scale(1.15);
}

.die.loser[b-oa0pkeyyuv] {
    opacity: 0.5;
    transform: scale(0.9);
}

.dice-white[b-oa0pkeyyuv] {
    background: linear-gradient(135deg, #ffffff 0%, #e9ecef 50%, #dee2e6 100%);
    color: #333;
    border: 2px solid #adb5bd;
}

.dice-yellow[b-oa0pkeyyuv] {
    background: linear-gradient(135deg, #ffe066 0%, #ffc107 50%, #d39e00 100%);
    color: #333;
    border: 2px solid #c29200;
}

.dice-orange[b-oa0pkeyyuv] {
    background: linear-gradient(135deg, #ff922b 0%, #fd7e14 50%, #d66a0f 100%);
    color: #fff;
    border: 2px solid #c45d0a;
}

.dice-red[b-oa0pkeyyuv] {
    background: linear-gradient(135deg, #ff6b6b 0%, #dc3545 50%, #a82835 100%);
    color: #fff;
    border: 2px solid #8b2029;
}

.dice-black[b-oa0pkeyyuv] {
    background: linear-gradient(135deg, #495057 0%, #343a40 50%, #212529 100%);
    color: #fff;
    border: 2px solid #0d0d0d;
}

@keyframes dice-shake-b-oa0pkeyyuv {
    0% { transform: rotate(-5deg) translateX(-2px) translateY(-1px); }
    25% { transform: rotate(3deg) translateX(1px) translateY(2px); }
    50% { transform: rotate(-3deg) translateX(2px) translateY(-2px); }
    75% { transform: rotate(5deg) translateX(-1px) translateY(1px); }
    100% { transform: rotate(-5deg) translateX(-2px) translateY(-1px); }
}

.round-result[b-oa0pkeyyuv] {
    width: 50px;
    text-align: center;
    flex-shrink: 0;
}

.win-badge[b-oa0pkeyyuv] {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(74, 222, 128, 0.3);
    border: 1px solid #4ade80;
    border-radius: 4px;
    color: #4ade80;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
}

.tie-badge[b-oa0pkeyyuv] {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(251, 191, 36, 0.3);
    border: 1px solid #fbbf24;
    border-radius: 4px;
    color: #fbbf24;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
}

.damage-badge[b-oa0pkeyyuv] {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(239, 68, 68, 0.3);
    border: 1px solid #ef4444;
    border-radius: 4px;
    color: #ef4444;
    font-size: 0.85em;
    font-weight: bold;
}

.round-info[b-oa0pkeyyuv] {
    text-align: center;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 20px;
    color: #888;
}

.round-number[b-oa0pkeyyuv] {
    font-weight: 600;
    color: #ffd700;
}

.highest-roll[b-oa0pkeyyuv] {
    font-size: 0.9em;
}

.battle-summary[b-oa0pkeyyuv] {
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.battle-summary.visible[b-oa0pkeyyuv] {
    opacity: 1;
    transform: translateY(0);
}

.summary-result[b-oa0pkeyyuv] {
    margin-bottom: 8px;
}

.victory-text[b-oa0pkeyyuv] {
    font-size: 1.3em;
    font-weight: bold;
    text-shadow: 0 0 10px currentColor;
}

.final-stats[b-oa0pkeyyuv] {
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 8px;
}

.losses-breakdown[b-oa0pkeyyuv] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    font-size: 0.85em;
}

.loss-item[b-oa0pkeyyuv] {
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.modal-footer[b-oa0pkeyyuv] {
    display: flex;
    justify-content: center;
}

.btn-continue[b-oa0pkeyyuv] {
    padding: 14px 32px;
    min-height: var(--touch-target-min, 44px);
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-continue:hover:not(:disabled)[b-oa0pkeyyuv] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.btn-continue:disabled[b-oa0pkeyyuv] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/GameOverModal.razor.rz.scp.css */
.game-over-overlay[b-4nifp5fs61] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}

.game-over-overlay.visible[b-4nifp5fs61] {
    opacity: 1;
    visibility: visible;
}

.game-over-content[b-4nifp5fs61] {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 2rem;
    max-width: 900px;
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
}

/* Particles background */
.particles-container[b-4nifp5fs61] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.particle[b-4nifp5fs61] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 215, 0, 0.6);
    border-radius: 50%;
    bottom: -10px;
    left: 50%;
    animation: floatUp-b-4nifp5fs61 var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    transform: translateX(var(--x));
}

@keyframes floatUp-b-4nifp5fs61 {
    0% {
        transform: translateX(var(--x)) translateY(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateX(var(--x)) translateY(-10vh) scale(1);
    }
    90% {
        opacity: 0.5;
    }
    100% {
        transform: translateX(calc(var(--x) + 20px)) translateY(-100vh) scale(0.5);
        opacity: 0;
    }
}

/* Winner section */
.winner-section[b-4nifp5fs61] {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 2rem;
}

.winner-section.show[b-4nifp5fs61] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.crown-container[b-4nifp5fs61] {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.crown[b-4nifp5fs61] {
    font-size: 5rem;
    animation: crownBounce-b-4nifp5fs61 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
}

.crown-glow[b-4nifp5fs61] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation: pulse-b-4nifp5fs61 2s ease-in-out infinite;
}

@keyframes crownBounce-b-4nifp5fs61 {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes pulse-b-4nifp5fs61 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
}

.victory-text[b-4nifp5fs61] {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(255, 215, 0, 0.5);
    letter-spacing: 0.3em;
    margin: 0;
    animation: victoryGlow-b-4nifp5fs61 2s ease-in-out infinite;
}

@keyframes victoryGlow-b-4nifp5fs61 {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.defeat-icon[b-4nifp5fs61] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.defeat-icon-img[b-4nifp5fs61] {
    width: 120px;
    height: auto;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 20px rgba(231, 76, 60, 0.6));
    animation: skullPulse-b-4nifp5fs61 2s ease-in-out infinite;
}

@keyframes skullPulse-b-4nifp5fs61 {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
}

.defeat-text[b-4nifp5fs61] {
    font-size: 3.5rem;
    font-weight: 900;
    color: #e74c3c;
    letter-spacing: 0.2em;
    margin: 0;
    text-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
}

.winner-name[b-4nifp5fs61] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    text-shadow: 0 0 20px currentColor;
}

.victory-subtitle[b-4nifp5fs61],
.defeat-subtitle[b-4nifp5fs61] {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

/* Stats section */
.stats-section[b-4nifp5fs61] {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    margin-bottom: 2rem;
}

.stats-section.show[b-4nifp5fs61] {
    opacity: 1;
    transform: translateY(0);
}

.stat-cards[b-4nifp5fs61] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat-card[b-4nifp5fs61] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    min-width: 140px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover[b-4nifp5fs61] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stat-icon[b-4nifp5fs61] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.stat-value[b-4nifp5fs61] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.stat-label[b-4nifp5fs61] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Standings section */
.standings-section[b-4nifp5fs61] {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    margin-bottom: 2rem;
}

.standings-section.show[b-4nifp5fs61] {
    opacity: 1;
    transform: translateY(0);
}

.standings-title[b-4nifp5fs61] {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    font-weight: 600;
}

.standings-list[b-4nifp5fs61] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 600px;
    margin: 0 auto;
}

.standing-row[b-4nifp5fs61] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateX(-20px);
    animation: slideIn-b-4nifp5fs61 0.5s ease forwards;
}

@keyframes slideIn-b-4nifp5fs61 {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.standing-row.winner[b-4nifp5fs61] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 170, 0, 0.1) 100%);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.standing-row.eliminated[b-4nifp5fs61] {
    opacity: 0.6;
}

.rank[b-4nifp5fs61] {
    width: 40px;
    text-align: center;
}

.rank-crown[b-4nifp5fs61] {
    font-size: 1.5rem;
}

.rank-number[b-4nifp5fs61] {
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

.player-color[b-4nifp5fs61] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
}

.player-details[b-4nifp5fs61] {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.player-name[b-4nifp5fs61] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.player-status[b-4nifp5fs61] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.status-winner[b-4nifp5fs61] {
    color: #ffd700;
}

.status-conceded[b-4nifp5fs61] {
    color: #e67e22;
}

.status-eliminated[b-4nifp5fs61] {
    color: #e74c3c;
}

.player-final-stats[b-4nifp5fs61] {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Chart section */
.chart-section[b-4nifp5fs61] {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.chart-section.show[b-4nifp5fs61] {
    opacity: 1;
    transform: translateY(0);
}

/* Action section */
.action-section[b-4nifp5fs61] {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    position: relative;
    z-index: 10;
    padding-bottom: 2rem;
}

.action-section.show[b-4nifp5fs61] {
    opacity: 1;
    transform: translateY(0);
}

.btn-return-lobby[b-4nifp5fs61] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
    position: relative;
    z-index: 100;
}

.btn-return-lobby:hover[b-4nifp5fs61] {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.6);
}

.btn-return-lobby:active[b-4nifp5fs61] {
    transform: translateY(0) scale(1);
}

.btn-arrow[b-4nifp5fs61] {
    transition: transform 0.3s ease;
}

.btn-return-lobby:hover .btn-arrow[b-4nifp5fs61] {
    transform: translateX(5px);
}

/* Confetti */
.confetti-container[b-4nifp5fs61] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.confetti[b-4nifp5fs61] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color);
    top: -10px;
    left: var(--x);
    animation: confettiFall-b-4nifp5fs61 var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

.confetti:nth-child(odd)[b-4nifp5fs61] {
    border-radius: 50%;
}

.confetti:nth-child(3n)[b-4nifp5fs61] {
    width: 8px;
    height: 12px;
}

.confetti:nth-child(5n)[b-4nifp5fs61] {
    width: 6px;
    height: 6px;
}

@keyframes confettiFall-b-4nifp5fs61 {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .victory-text[b-4nifp5fs61] {
        font-size: 2.5rem;
    }

    .defeat-text[b-4nifp5fs61] {
        font-size: 2.5rem;
    }

    .winner-name[b-4nifp5fs61] {
        font-size: 1.8rem;
    }

    .crown[b-4nifp5fs61] {
        font-size: 3.5rem;
    }

    .stat-cards[b-4nifp5fs61] {
        gap: 1rem;
    }

    .stat-card[b-4nifp5fs61] {
        padding: 1rem 1.5rem;
        min-width: 100px;
    }

    .stat-value[b-4nifp5fs61] {
        font-size: 1.4rem;
    }

    .standing-row[b-4nifp5fs61] {
        padding: 0.75rem 1rem;
    }
}
/* /Components/Help/BattlePlanHelpModal.razor.rz.scp.css */
.help-modal-overlay[b-ialdvlp6l6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.help-modal-overlay.visible[b-ialdvlp6l6] {
    opacity: 1;
    pointer-events: all;
}

.help-modal[b-ialdvlp6l6] {
    position: relative;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    border: 2px solid #ffd700;
    border-radius: 16px;
    padding: var(--modal-padding-mobile, 16px);
    width: calc(100% - 24px);
    max-width: 520px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
    margin: 12px;
}

@media (min-width: 768px) {
    .help-modal[b-ialdvlp6l6] {
        padding: var(--modal-padding-desktop, 24px);
        width: auto;
        min-width: 400px;
        margin: 0;
    }
}

.modal-header[b-ialdvlp6l6] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.modal-title[b-ialdvlp6l6] {
    font-size: 1.3em;
    font-weight: bold;
    color: #ffd700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .modal-title[b-ialdvlp6l6] {
        font-size: 1.6em;
        letter-spacing: 2px;
    }
}

.modal-title-divider[b-ialdvlp6l6] {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.modal-subtitle[b-ialdvlp6l6] {
    margin: 12px 0 0 0;
    color: #888;
    font-size: 0.95em;
}

.help-content[b-ialdvlp6l6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.help-section[b-ialdvlp6l6] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .help-section[b-ialdvlp6l6] {
        gap: 16px;
        padding: 12px 16px;
    }
}

.help-icon[b-ialdvlp6l6] {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ffd700, #c9a000);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #1a1a2e;
    flex-shrink: 0;
}

.help-text[b-ialdvlp6l6] {
    flex: 1;
}

.help-text strong[b-ialdvlp6l6] {
    color: #fff;
    font-size: 1em;
}

.help-text p[b-ialdvlp6l6] {
    margin: 6px 0 0 0;
    color: #aaa;
    font-size: 0.9em;
    line-height: 1.4;
}

.button-hint[b-ialdvlp6l6] {
    display: inline-block;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.95em;
}

.help-tip[b-ialdvlp6l6] {
    padding: 12px 16px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 10px;
    color: #4ade80;
    font-size: 0.9em;
    line-height: 1.4;
}

.help-tip strong[b-ialdvlp6l6] {
    color: #86efac;
}

.modal-footer[b-ialdvlp6l6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.dont-show-again[b-ialdvlp6l6] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 0.9em;
    cursor: pointer;
    user-select: none;
}

.dont-show-again input[type="checkbox"][b-ialdvlp6l6] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #ffd700;
}

.dont-show-again:hover[b-ialdvlp6l6] {
    color: #aaa;
}

.btn-continue[b-ialdvlp6l6] {
    width: 100%;
    padding: 14px 32px;
    min-height: var(--touch-target-min, 44px);
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-continue:hover[b-ialdvlp6l6] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4);
}
/* /Components/Help/InitialDeploymentHelpModal.razor.rz.scp.css */
.help-modal-overlay[b-ry3hetjjx0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.help-modal-overlay.visible[b-ry3hetjjx0] {
    opacity: 1;
    pointer-events: all;
}

.help-modal[b-ry3hetjjx0] {
    position: relative;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    border: 2px solid #ffd700;
    border-radius: 16px;
    padding: var(--modal-padding-mobile, 16px);
    width: calc(100% - 24px);
    max-width: 520px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
    margin: 12px;
}

@media (min-width: 768px) {
    .help-modal[b-ry3hetjjx0] {
        padding: var(--modal-padding-desktop, 24px);
        width: auto;
        min-width: 400px;
        margin: 0;
    }
}

.modal-header[b-ry3hetjjx0] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.modal-title[b-ry3hetjjx0] {
    font-size: 1.3em;
    font-weight: bold;
    color: #ffd700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .modal-title[b-ry3hetjjx0] {
        font-size: 1.6em;
        letter-spacing: 2px;
    }
}

.modal-title-divider[b-ry3hetjjx0] {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.modal-subtitle[b-ry3hetjjx0] {
    margin: 12px 0 0 0;
    color: #888;
    font-size: 0.95em;
}

.help-content[b-ry3hetjjx0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.help-section[b-ry3hetjjx0] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .help-section[b-ry3hetjjx0] {
        gap: 16px;
        padding: 12px 16px;
    }
}

.help-icon[b-ry3hetjjx0] {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ffd700, #c9a000);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #1a1a2e;
    flex-shrink: 0;
}

.help-text[b-ry3hetjjx0] {
    flex: 1;
}

.help-text strong[b-ry3hetjjx0] {
    color: #fff;
    font-size: 1em;
}

.help-text p[b-ry3hetjjx0] {
    margin: 6px 0 0 0;
    color: #aaa;
    font-size: 0.9em;
    line-height: 1.4;
}

.button-hint[b-ry3hetjjx0] {
    display: inline-block;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.95em;
}

.help-tip[b-ry3hetjjx0] {
    padding: 12px 16px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 10px;
    color: #4ade80;
    font-size: 0.9em;
    line-height: 1.4;
}

.help-tip strong[b-ry3hetjjx0] {
    color: #86efac;
}

.modal-footer[b-ry3hetjjx0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.dont-show-again[b-ry3hetjjx0] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 0.9em;
    cursor: pointer;
    user-select: none;
}

.dont-show-again input[type="checkbox"][b-ry3hetjjx0] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #ffd700;
}

.dont-show-again:hover[b-ry3hetjjx0] {
    color: #aaa;
}

.btn-continue[b-ry3hetjjx0] {
    width: 100%;
    padding: 14px 32px;
    min-height: var(--touch-target-min, 44px);
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-continue:hover[b-ry3hetjjx0] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4);
}
/* /Components/Help/SurgeAttackHelpModal.razor.rz.scp.css */
.help-modal-overlay[b-2yfpi66s5r] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.help-modal-overlay.visible[b-2yfpi66s5r] {
    opacity: 1;
    pointer-events: all;
}

.help-modal[b-2yfpi66s5r] {
    position: relative;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    border: 2px solid #ffea00;
    border-radius: 16px;
    padding: var(--modal-padding-mobile, 16px);
    width: calc(100% - 24px);
    max-width: 520px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 60px rgba(255, 234, 0, 0.3);
    margin: 12px;
}

@media (min-width: 768px) {
    .help-modal[b-2yfpi66s5r] {
        padding: var(--modal-padding-desktop, 24px);
        width: auto;
        min-width: 400px;
        margin: 0;
    }
}

.modal-header[b-2yfpi66s5r] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.modal-title[b-2yfpi66s5r] {
    font-size: 1.3em;
    font-weight: bold;
    color: #ffea00;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .modal-title[b-2yfpi66s5r] {
        font-size: 1.6em;
        letter-spacing: 2px;
    }
}

.modal-title-divider[b-2yfpi66s5r] {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffea00, transparent);
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
}

.modal-subtitle[b-2yfpi66s5r] {
    margin: 12px 0 0 0;
    color: #888;
    font-size: 0.95em;
}

.help-content[b-2yfpi66s5r] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.help-section[b-2yfpi66s5r] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .help-section[b-2yfpi66s5r] {
        gap: 16px;
        padding: 12px 16px;
    }
}

.help-icon[b-2yfpi66s5r] {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ffea00, #e6d000);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #1a1a2e;
    flex-shrink: 0;
}

.help-text[b-2yfpi66s5r] {
    flex: 1;
}

.help-text strong[b-2yfpi66s5r] {
    color: #fff;
    font-size: 1em;
}

.help-text p[b-2yfpi66s5r] {
    margin: 6px 0 0 0;
    color: #aaa;
    font-size: 0.9em;
    line-height: 1.4;
}

.help-text em[b-2yfpi66s5r] {
    color: #ffea00;
    font-style: normal;
    font-weight: 600;
}

.help-tip[b-2yfpi66s5r] {
    padding: 12px 16px;
    background: rgba(255, 234, 0, 0.1);
    border: 1px solid rgba(255, 234, 0, 0.3);
    border-radius: 10px;
    color: #ffea00;
    font-size: 0.9em;
    line-height: 1.4;
}

.help-tip strong[b-2yfpi66s5r] {
    color: #fff;
}

.modal-footer[b-2yfpi66s5r] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.surge-footer[b-2yfpi66s5r] {
    gap: 12px;
}

.dont-show-again[b-2yfpi66s5r] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 0.9em;
    cursor: pointer;
    user-select: none;
}

.dont-show-again input[type="checkbox"][b-2yfpi66s5r] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #ffea00;
}

.dont-show-again:hover[b-2yfpi66s5r] {
    color: #aaa;
}

.button-group[b-2yfpi66s5r] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

@media (min-width: 768px) {
    .button-group[b-2yfpi66s5r] {
        flex-direction: row;
        justify-content: center;
    }
}

.btn-secondary[b-2yfpi66s5r] {
    flex: 1;
    padding: 14px 24px;
    min-height: var(--touch-target-min, 44px);
    background: transparent;
    border: 2px solid #888;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-2yfpi66s5r] {
    border-color: #ffea00;
    color: #ffea00;
    background: rgba(255, 234, 0, 0.1);
}

.btn-continue[b-2yfpi66s5r] {
    flex: 1;
    padding: 14px 24px;
    min-height: var(--touch-target-min, 44px);
    background: linear-gradient(135deg, #ffea00, #e6d000);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-continue:hover[b-2yfpi66s5r] {
    background: linear-gradient(135deg, #fff44f, #ffea00);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 234, 0, 0.4);
}
/* /Components/Help/TacticalMoveHelpModal.razor.rz.scp.css */
.help-modal-overlay[b-3pcine447o] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.help-modal-overlay.visible[b-3pcine447o] {
    opacity: 1;
    pointer-events: all;
}

.help-modal[b-3pcine447o] {
    position: relative;
    background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
    border: 2px solid #ffd700;
    border-radius: 16px;
    padding: var(--modal-padding-mobile, 16px);
    width: calc(100% - 24px);
    max-width: 520px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
    margin: 12px;
}

@media (min-width: 768px) {
    .help-modal[b-3pcine447o] {
        padding: var(--modal-padding-desktop, 24px);
        width: auto;
        min-width: 400px;
        margin: 0;
    }
}

.modal-header[b-3pcine447o] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.modal-title[b-3pcine447o] {
    font-size: 1.3em;
    font-weight: bold;
    color: #ffd700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .modal-title[b-3pcine447o] {
        font-size: 1.6em;
        letter-spacing: 2px;
    }
}

.modal-title-divider[b-3pcine447o] {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.modal-subtitle[b-3pcine447o] {
    margin: 12px 0 0 0;
    color: #888;
    font-size: 0.95em;
}

.help-content[b-3pcine447o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.help-section[b-3pcine447o] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .help-section[b-3pcine447o] {
        gap: 16px;
        padding: 12px 16px;
    }
}

.help-icon[b-3pcine447o] {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ffd700, #c9a000);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #1a1a2e;
    flex-shrink: 0;
}

.help-text[b-3pcine447o] {
    flex: 1;
}

.help-text strong[b-3pcine447o] {
    color: #fff;
    font-size: 1em;
}

.help-text p[b-3pcine447o] {
    margin: 6px 0 0 0;
    color: #aaa;
    font-size: 0.9em;
    line-height: 1.4;
}

.button-hint[b-3pcine447o] {
    display: inline-block;
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.95em;
}

.help-tip[b-3pcine447o] {
    padding: 12px 16px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 10px;
    color: #4ade80;
    font-size: 0.9em;
    line-height: 1.4;
}

.help-tip strong[b-3pcine447o] {
    color: #86efac;
}

.modal-footer[b-3pcine447o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.dont-show-again[b-3pcine447o] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 0.9em;
    cursor: pointer;
    user-select: none;
}

.dont-show-again input[type="checkbox"][b-3pcine447o] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #ffd700;
}

.dont-show-again:hover[b-3pcine447o] {
    color: #aaa;
}

.btn-continue[b-3pcine447o] {
    width: 100%;
    padding: 14px 32px;
    min-height: var(--touch-target-min, 44px);
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-continue:hover[b-3pcine447o] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4);
}
/* /Components/OccupationChart.razor.rz.scp.css */
.occupation-chart-container[b-olqwuf3axx] {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 16px;
    margin-top: 20px;
}

.chart-title[b-olqwuf3axx] {
    font-size: 1rem;
    font-weight: 600;
    color: #ffd700;
    margin: 0 0 4px 0;
    text-align: center;
}

.chart-subtitle[b-olqwuf3axx] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 12px;
}

.occupation-chart[b-olqwuf3axx] {
    width: 100%;
    height: auto;
    max-height: 180px;
}

.chart-legend[b-olqwuf3axx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.legend-item[b-olqwuf3axx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color[b-olqwuf3axx] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.legend-name[b-olqwuf3axx] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

.no-data[b-olqwuf3axx] {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    padding: 20px;
}
/* /Pages/Auth/Profile.razor.rz.scp.css */
/* Napoleon-era Profile Page Styling */

.profile-container[b-jkpoincxl3] {
    min-height: calc(100vh - 60px);
    padding: 30px 20px;
    background: linear-gradient(135deg, #1a1510 0%, #2d2318 50%, #1a1510 100%);
    font-family: 'Crimson Text', Georgia, serif;
    position: relative;
}

.profile-container[b-jkpoincxl3]::before {
    content: '';
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(139, 90, 43, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(139, 90, 43, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.profile-content[b-jkpoincxl3] {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Page Header */
.profile-header[b-jkpoincxl3] {
    text-align: center;
    margin-bottom: 30px;
}

.profile-title[b-jkpoincxl3] {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #c9a227;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(201, 162, 39, 0.5);
    margin: 0 0 10px;
}

.profile-subtitle[b-jkpoincxl3] {
    color: rgba(245, 230, 200, 0.7);
    font-style: italic;
    font-size: 1.1rem;
}

/* Loading State */
.loading-container[b-jkpoincxl3] {
    text-align: center;
    padding: 60px 20px;
    color: #c9a227;
}

.loading-spinner[b-jkpoincxl3] {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(201, 162, 39, 0.2);
    border-top-color: #c9a227;
    border-radius: 50%;
    animation: spin-b-jkpoincxl3 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin-b-jkpoincxl3 {
    to { transform: rotate(360deg); }
}

.loading-text[b-jkpoincxl3] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

/* Alert Messages */
.alert-message[b-jkpoincxl3] {
    padding: 14px 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    border-left: 4px solid;
}

.alert-message.success[b-jkpoincxl3] {
    background: linear-gradient(135deg, rgba(45, 74, 28, 0.9) 0%, rgba(26, 46, 16, 0.9) 100%);
    color: #f5e6c8;
    border-left-color: #4a7c23;
}

.alert-message.error[b-jkpoincxl3] {
    background: linear-gradient(135deg, rgba(139, 26, 34, 0.9) 0%, rgba(109, 20, 25, 0.9) 100%);
    color: #f5e6c8;
    border-left-color: #ffd700;
}

/* Parchment Cards */
.parchment-card[b-jkpoincxl3] {
    background: linear-gradient(145deg, #f5e6c8 0%, #e8d4a8 50%, #dcc89a 100%);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(139, 90, 43, 0.3),
        inset 0 0 50px rgba(139, 90, 43, 0.08);
    position: relative;
    overflow: hidden;
}

.parchment-card[b-jkpoincxl3]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
}

.parchment-card[b-jkpoincxl3]::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid rgba(139, 90, 43, 0.2);
    border-radius: 4px;
    pointer-events: none;
}

.card-header[b-jkpoincxl3] {
    position: relative;
    z-index: 2;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(139, 90, 43, 0.25);
}

.card-title[b-jkpoincxl3] {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #2d1810;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title-icon[b-jkpoincxl3] {
    font-size: 1.2rem;
    color: #8b5a2b;
}

.card-body[b-jkpoincxl3] {
    position: relative;
    z-index: 2;
    padding: 20px;
}

/* Profile Picture Section */
.profile-picture-section[b-jkpoincxl3] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.profile-avatar[b-jkpoincxl3] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #c9a227;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.profile-avatar-placeholder[b-jkpoincxl3] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(145deg, #5a4a3a 0%, #3d2d1d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #c9a227;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.avatar-letter[b-jkpoincxl3] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #c9a227;
}

.profile-picture-info[b-jkpoincxl3] {
    flex: 1;
}

.picture-label[b-jkpoincxl3] {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #3d2d1d;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.picture-url[b-jkpoincxl3] {
    font-size: 0.85rem;
    color: #7a6a5a;
    word-break: break-all;
}

/* Tab Navigation */
.tab-nav[b-jkpoincxl3] {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(139, 90, 43, 0.3);
}

.tab-btn[b-jkpoincxl3] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7a6a5a;
    background: transparent;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.tab-btn[b-jkpoincxl3]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background 0.3s ease;
}

.tab-btn:hover[b-jkpoincxl3] {
    color: #3d2d1d;
}

.tab-btn.active[b-jkpoincxl3] {
    color: #8b1a22;
}

.tab-btn.active[b-jkpoincxl3]::after {
    background: #8b1a22;
}

/* Form Elements */
.form-group[b-jkpoincxl3] {
    margin-bottom: 15px;
}

.form-label[b-jkpoincxl3] {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3d2d1d;
    margin-bottom: 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.form-input[b-jkpoincxl3] {
    width: 100%;
    padding: 10px 14px;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1rem;
    color: #2d1810;
    background: linear-gradient(180deg, #fff9ed 0%, #f5e6c8 100%);
    border: 2px solid #c9a86c;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
}

.form-input:focus[b-jkpoincxl3] {
    border-color: #8b5a2b;
    box-shadow: 0 0 0 3px rgba(139, 90, 43, 0.15);
}

.form-input[b-jkpoincxl3]::placeholder {
    color: #a09080;
    font-style: italic;
}

.form-hint[b-jkpoincxl3] {
    font-size: 0.85rem;
    color: #7a6a5a;
    margin-top: 5px;
    font-style: italic;
}

/* Input Group */
.input-group[b-jkpoincxl3] {
    display: flex;
    gap: 10px;
}

.input-group .form-input[b-jkpoincxl3] {
    flex: 1;
}

/* File Input */
.file-input-wrapper[b-jkpoincxl3] {
    position: relative;
}

.file-input-wrapper input[type="file"][b-jkpoincxl3] {
    width: 100%;
    padding: 10px 14px;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.95rem;
    color: #2d1810;
    background: linear-gradient(180deg, #fff9ed 0%, #f5e6c8 100%);
    border: 2px solid #c9a86c;
    border-radius: 4px;
}

.file-selected[b-jkpoincxl3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: #5a4a3a;
    font-size: 0.9rem;
}

/* Buttons */
.btn-primary[b-jkpoincxl3] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f5e6c8;
    background: linear-gradient(180deg, #8b1a22 0%, #6d1419 100%);
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(139, 26, 34, 0.4);
}

.btn-primary:hover:not(:disabled)[b-jkpoincxl3] {
    background: linear-gradient(180deg, #a12830 0%, #8b1a22 100%);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-jkpoincxl3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-jkpoincxl3] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3d2d1d;
    background: transparent;
    border: 2px solid rgba(139, 90, 43, 0.4);
    border-radius: 4px;
    padding: 8px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover[b-jkpoincxl3] {
    background: rgba(139, 90, 43, 0.1);
    border-color: rgba(139, 90, 43, 0.6);
}

/* Account Info */
.info-row[b-jkpoincxl3] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(139, 90, 43, 0.15);
}

.info-row:last-child[b-jkpoincxl3] {
    border-bottom: none;
}

.info-label[b-jkpoincxl3] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #5a4a3a;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.info-value[b-jkpoincxl3] {
    color: #2d1810;
    font-size: 0.95rem;
}

/* Toggle Switch */
.toggle-row[b-jkpoincxl3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toggle-info[b-jkpoincxl3] {
    flex: 1;
}

.toggle-label[b-jkpoincxl3] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2d1810;
    letter-spacing: 0.03em;
}

.toggle-hint[b-jkpoincxl3] {
    font-size: 0.85rem;
    color: #7a6a5a;
    font-style: italic;
    margin-top: 4px;
}

.toggle-switch[b-jkpoincxl3] {
    position: relative;
    width: 50px;
    height: 26px;
}

.toggle-switch input[b-jkpoincxl3] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-jkpoincxl3] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #c9a86c;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider[b-jkpoincxl3]:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider[b-jkpoincxl3] {
    background: #2d4a1c;
}

.toggle-switch input:checked + .toggle-slider[b-jkpoincxl3]:before {
    transform: translateX(24px);
}

/* Music Select */
.music-select-group[b-jkpoincxl3] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(139, 90, 43, 0.2);
}

.music-select[b-jkpoincxl3] {
    cursor: pointer;
}

/* Back to Lobby Button */
.back-to-lobby[b-jkpoincxl3] {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
}

.btn-back-lobby[b-jkpoincxl3] {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #f5e6c8;
    background: linear-gradient(180deg, #4a3a2a 0%, #2d1810 100%);
    border: 2px solid #c9a227;
    border-radius: 6px;
    padding: 12px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-back-lobby:hover[b-jkpoincxl3] {
    background: linear-gradient(180deg, #5a4a3a 0%, #3d2d1d 100%);
    border-color: #ffd700;
    color: #ffd700;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 162, 39, 0.3);
}

/* Corner Decorations */
.corner-decoration[b-jkpoincxl3] {
    position: fixed;
    width: 100px;
    height: 100px;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

.corner-decoration[b-jkpoincxl3]::before,
.corner-decoration[b-jkpoincxl3]::after {
    content: '';
    position: absolute;
    background: linear-gradient(135deg, #c9a227 0%, #8b5a2b 100%);
}

.corner-tl[b-jkpoincxl3] { top: 70px; left: 15px; }
.corner-tr[b-jkpoincxl3] { top: 70px; right: 15px; transform: scaleX(-1); }
.corner-bl[b-jkpoincxl3] { bottom: 15px; left: 15px; transform: scaleY(-1); }
.corner-br[b-jkpoincxl3] { bottom: 15px; right: 15px; transform: scale(-1); }

.corner-decoration[b-jkpoincxl3]::before {
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
}

.corner-decoration[b-jkpoincxl3]::after {
    width: 2px;
    height: 100%;
    top: 0;
    left: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .profile-picture-section[b-jkpoincxl3] {
        flex-direction: column;
        text-align: center;
    }

    .input-group[b-jkpoincxl3] {
        flex-direction: column;
    }

    .corner-decoration[b-jkpoincxl3] {
        display: none;
    }
}

@media (max-width: 480px) {
    .profile-container[b-jkpoincxl3] {
        padding: 20px 15px;
    }

    .profile-title[b-jkpoincxl3] {
        font-size: 1.8rem;
    }

    .card-body[b-jkpoincxl3] {
        padding: 15px;
    }

    .toggle-row[b-jkpoincxl3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
/* /Pages/Game/Game.razor.rz.scp.css */
/* Napoleon-era Game Styling - Matching Lobby Theme */

/* ===== Base Layout ===== */
.game-container[b-c6296j2vay] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #1a1510 0%, #2d2318 50%, #1a1510 100%);
    z-index: 9999;
}

.loading-overlay[b-c6296j2vay] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1510 0%, #2d2318 50%, #1a1510 100%);
    z-index: 9999;
}

/* ===== Title Bar ===== */
.game-title-bar[b-c6296j2vay] {
    position: relative;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: linear-gradient(180deg, #3d2d1d 0%, #2d1810 100%);
    border-bottom: 2px solid rgba(201, 162, 39, 0.4);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .game-title-bar[b-c6296j2vay] {
        height: 48px;
        padding: 0 12px;
    }
}

.title-left[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 767px) {
    .title-left[b-c6296j2vay] {
        display: none;
    }
}

.game-name[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #f5e6c8;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.game-mode[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.85rem;
    color: #a08070;
    padding: 2px 8px;
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 4px;
}

.title-center[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

@media (max-width: 767px) {
    .title-center[b-c6296j2vay] {
        align-items: flex-start;
    }
}

.current-phase[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #c9a227;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
}

@media (max-width: 767px) {
    .current-phase[b-c6296j2vay] {
        font-size: 0.85rem;
        letter-spacing: 1px;
    }
}

.troops-info[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.75rem;
    color: #4a7c23;
}

@media (max-width: 767px) {
    .troops-info[b-c6296j2vay] {
        font-size: 0.7rem;
    }
}

.title-right[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (max-width: 767px) {
    .title-right[b-c6296j2vay] {
        gap: 8px;
    }
}

.player-pill[b-c6296j2vay] {
    padding: 6px 16px;
    border-radius: 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

@media (max-width: 767px) {
    .player-pill[b-c6296j2vay] {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
}

.time-remaining[b-c6296j2vay] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4a7c23;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(74, 124, 35, 0.5);
}

@media (max-width: 767px) {
    .time-remaining[b-c6296j2vay] {
        font-size: 1.1rem;
    }
}

.time-remaining.time-warning[b-c6296j2vay] {
    color: #8b1a22;
    text-shadow: 0 0 8px rgba(139, 26, 34, 0.5);
    animation: pulse-b-c6296j2vay 1s ease-in-out infinite;
}

@keyframes pulse-b-c6296j2vay {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===== Main Game Area ===== */
.game-main-area[b-c6296j2vay] {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 767px) {
    .game-main-area[b-c6296j2vay] {
        padding-bottom: 56px;
    }
}

/* ===== Control Panel ===== */
.control-panel[b-c6296j2vay] {
    width: 280px;
    background: linear-gradient(180deg, #2d2318 0%, #1a1510 100%);
    border-right: 2px solid rgba(201, 162, 39, 0.3);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .control-panel[b-c6296j2vay] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 55vh;
        border-right: none;
        border-top: 2px solid rgba(201, 162, 39, 0.4);
        z-index: 500;
        transform: translateY(calc(100% - 56px));
        transition: transform 0.3s ease;
        padding-bottom: var(--safe-area-bottom, 0);
    }

    .control-panel.expanded[b-c6296j2vay] {
        transform: translateY(0);
    }
}

.control-panel-tab[b-c6296j2vay] {
    display: none;
}

@media (max-width: 767px) {
    .control-panel-tab[b-c6296j2vay] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        height: 56px;
        background: linear-gradient(180deg, #3d2d1d 0%, #2d1810 100%);
        border: none;
        border-bottom: 1px solid rgba(201, 162, 39, 0.2);
        cursor: pointer;
        flex-shrink: 0;
    }

    .control-panel-tab-icon[b-c6296j2vay] {
        font-size: 1rem;
        color: #c9a227;
        transition: transform 0.3s ease;
    }

    .control-panel.expanded .control-panel-tab-icon[b-c6296j2vay] {
        transform: rotate(180deg);
    }

    .control-panel-tab-text[b-c6296j2vay] {
        font-family: 'Cinzel', serif;
        font-size: 0.9rem;
        font-weight: 600;
        color: #c9a227;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
}

.panel-section[b-c6296j2vay] {
    padding: 16px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}

.section-header[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #c9a227;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.section-subheader[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.75rem;
    color: #a08070;
    display: block;
    margin-bottom: 8px;
}

/* ===== Player List ===== */
.player-list[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.player-row[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(245, 230, 200, 0.05);
    border: 1px solid rgba(201, 162, 39, 0.15);
    border-radius: 6px;
    transition: background 0.2s;
}

.player-row.current-player[b-c6296j2vay] {
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid rgba(201, 162, 39, 0.4);
}

.player-row.eliminated[b-c6296j2vay] {
    opacity: 0.5;
}

.player-row.conceded[b-c6296j2vay] {
    opacity: 0.7;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.player-color-dot[b-c6296j2vay] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgb(128, 128, 128);
    box-sizing: border-box;
}

.player-info[b-c6296j2vay] {
    flex: 1;
    min-width: 0;
}

.player-name[b-c6296j2vay] {
    display: block;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f5e6c8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-stats[b-c6296j2vay] {
    display: block;
    font-size: 0.7rem;
    color: #a08070;
}

.phase-complete-badge[b-c6296j2vay] {
    color: #4a7c23;
    font-size: 1rem;
}

.concede-badge[b-c6296j2vay] {
    font-size: 0.9rem;
    margin-right: 4px;
}

/* ===== Phase Controls ===== */
.phase-controls[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.phase-instructions[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.85rem;
    color: #d4c4a8;
    margin: 0;
    line-height: 1.4;
}

.tactical-move-instructions[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selected-territory-info[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(23, 162, 184, 0.15);
    border-radius: 6px;
    border: 1px solid rgba(23, 162, 184, 0.3);
}

.selected-territory-info .label[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    color: #17a2b8;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
}

.selected-territory-info .territory-name[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    color: #f5e6c8;
    font-weight: 600;
}

.selected-territory-info .troop-count[b-c6296j2vay] {
    color: #17a2b8;
    font-size: 0.85rem;
}

.btn-clear-selection[b-c6296j2vay] {
    margin-left: auto;
    background: rgba(139, 90, 43, 0.2);
    border: 1px solid rgba(139, 90, 43, 0.4);
    color: #a08070;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.btn-clear-selection:hover[b-c6296j2vay] {
    background: rgba(139, 26, 34, 0.3);
    border-color: #8b1a22;
    color: #f5e6c8;
}

.troops-remaining[b-c6296j2vay] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(74, 124, 35, 0.15);
    border: 1px solid rgba(74, 124, 35, 0.3);
    border-radius: 6px;
}

.troops-label[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    color: #d4c4a8;
    font-size: 0.85rem;
}

.troops-value[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #4a7c23;
}

.selected-territory-info[b-c6296j2vay],
.attack-target-info[b-c6296j2vay] {
    padding: 10px;
    background: rgba(245, 230, 200, 0.05);
    border-radius: 6px;
}

.selected-territory-info .label[b-c6296j2vay],
.attack-target-info .label[b-c6296j2vay],
.attack-troops-selector .label[b-c6296j2vay] {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    color: #a08070;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.selected-territory-info .value[b-c6296j2vay],
.attack-target-info .value[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.9rem;
    color: #f5e6c8;
    font-weight: 500;
}

.attack-target-info[b-c6296j2vay] {
    background: rgba(139, 26, 34, 0.15);
    border: 1px solid rgba(139, 26, 34, 0.3);
}

.attack-troops-selector[b-c6296j2vay] {
    padding: 10px;
    background: rgba(245, 230, 200, 0.05);
    border-radius: 6px;
}

.troop-counter[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.btn-counter[b-c6296j2vay] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.4);
    background: rgba(201, 162, 39, 0.15);
    color: #c9a227;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-counter:hover[b-c6296j2vay] {
    background: rgba(201, 162, 39, 0.3);
}

.counter-value[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f5e6c8;
    min-width: 40px;
    text-align: center;
}

/* ===== Action Buttons ===== */
.btn-action[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    padding: 12px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    text-transform: uppercase;
}

.btn-action:disabled[b-c6296j2vay] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-complete[b-c6296j2vay] {
    background: linear-gradient(180deg, #2d4a1c 0%, #1a2e10 100%);
    color: #f5e6c8;
    box-shadow: 0 2px 8px rgba(45, 74, 28, 0.4);
}

.btn-complete:hover:not(:disabled)[b-c6296j2vay] {
    background: linear-gradient(180deg, #3d5a2c 0%, #2d4a1c 100%);
    transform: translateY(-1px);
}

.btn-attack[b-c6296j2vay] {
    background: linear-gradient(180deg, #8b1a22 0%, #6d1419 100%);
    color: #f5e6c8;
    box-shadow: 0 2px 8px rgba(139, 26, 34, 0.4);
}

.btn-attack:hover:not(:disabled)[b-c6296j2vay] {
    background: linear-gradient(180deg, #a12830 0%, #8b1a22 100%);
}

.btn-surge[b-c6296j2vay] {
    background: linear-gradient(135deg, #c9a227 0%, #a08520 100%);
    color: #2d1810;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(201, 162, 39, 0.4);
}

.btn-surge:hover:not(:disabled)[b-c6296j2vay] {
    background: linear-gradient(135deg, #d9b237 0%, #c9a227 100%);
}

.order-surge[b-c6296j2vay] {
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid rgba(201, 162, 39, 0.4);
}

.surge-label[b-c6296j2vay] {
    color: #c9a227;
}

.btn-view-battles[b-c6296j2vay] {
    background: linear-gradient(180deg, #4a3d6a 0%, #3a2d5a 100%);
    color: #f5e6c8;
}

.btn-view-battles:hover:not(:disabled)[b-c6296j2vay] {
    background: linear-gradient(180deg, #5a4d7a 0%, #4a3d6a 100%);
}

/* ===== Orders List ===== */
.orders-list[b-c6296j2vay] {
    padding: 10px;
    background: rgba(245, 230, 200, 0.05);
    border: 1px solid rgba(201, 162, 39, 0.15);
    border-radius: 6px;
}

.orders-header[b-c6296j2vay] {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #a08070;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.order-row[b-c6296j2vay] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.8rem;
    color: #f5e6c8;
    border-bottom: 1px solid rgba(201, 162, 39, 0.15);
}

.order-row:last-child[b-c6296j2vay] {
    border-bottom: none;
}

.order-row.order-highlighted[b-c6296j2vay] {
    background: rgba(201, 162, 39, 0.2);
    border-radius: 4px;
    margin: -4px -6px;
    padding: 4px 6px;
}

.order-row.order-clickable[b-c6296j2vay] {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.order-row.order-clickable:hover[b-c6296j2vay] {
    background: rgba(139, 26, 34, 0.2);
    border-radius: 4px;
    margin: -4px -6px;
    padding: 4px 6px;
}

.order-row.order-locked[b-c6296j2vay] {
    opacity: 0.7;
    cursor: not-allowed;
}

.lock-icon[b-c6296j2vay] {
    margin-right: 6px;
    font-size: 0.85em;
}

.order-details[b-c6296j2vay] {
    flex: 1;
}

.phase-hint[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.8rem;
    color: #7a6a5a;
    margin: 4px 0 8px 0;
    font-style: italic;
}

.btn-cancel-order[b-c6296j2vay] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(139, 26, 34, 0.3);
    color: #c9a227;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.btn-cancel-order:hover[b-c6296j2vay] {
    background: rgba(139, 26, 34, 0.5);
}

.all-orders-list[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 350px;
    overflow-y: auto;
}

.player-orders-group[b-c6296j2vay] {
    padding: 10px;
    background: rgba(245, 230, 200, 0.05);
    border: 1px solid rgba(201, 162, 39, 0.15);
    border-radius: 6px;
}

.player-orders-header[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}

.all-player-order[b-c6296j2vay] {
    padding-left: 10px;
    margin-bottom: 4px;
    font-family: 'Crimson Text', Georgia, serif;
}

.all-player-order:last-child[b-c6296j2vay] {
    margin-bottom: 0;
}

.no-orders-notice[b-c6296j2vay] {
    padding: 16px;
    text-align: center;
    color: #a08070;
    font-style: italic;
    font-family: 'Crimson Text', Georgia, serif;
}

.waiting-notice[b-c6296j2vay] {
    margin-top: 12px;
    padding: 8px;
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 6px;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.8rem;
    color: #c9a227;
    text-align: center;
}

.alliances-list[b-c6296j2vay],
.alliance-row[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.85rem;
    color: #d4c4a8;
}

.alliance-row[b-c6296j2vay] {
    padding: 6px 0;
}

.game-over-message[b-c6296j2vay] {
    text-align: center;
    padding: 20px;
}

.winner-name[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 0 10px currentColor;
}

.results-animation-notice[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(201, 162, 39, 0.15);
    border-radius: 6px;
    border: 1px solid rgba(201, 162, 39, 0.3);
}

.pulse-indicator[b-c6296j2vay] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c9a227;
    animation: pulse-glow-b-c6296j2vay 0.5s ease-in-out infinite alternate;
}

@keyframes pulse-glow-b-c6296j2vay {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

.results-animation-notice span[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.85rem;
    color: #c9a227;
}

/* ===== Battle Results ===== */
.battle-results-list[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.battle-result[b-c6296j2vay] {
    padding: 10px;
    border-radius: 6px;
    border-left: 4px solid;
}

.battle-result.battle-won[b-c6296j2vay] {
    background: rgba(74, 124, 35, 0.15);
    border-left-color: #4a7c23;
}

.battle-result.battle-lost[b-c6296j2vay] {
    background: rgba(139, 26, 34, 0.15);
    border-left-color: #8b1a22;
}

.battle-header[b-c6296j2vay] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.battle-territories[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.85rem;
    color: #f5e6c8;
    font-weight: 500;
}

.battle-outcome[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.battle-won .battle-outcome[b-c6296j2vay] {
    color: #4a7c23;
}

.battle-lost .battle-outcome[b-c6296j2vay] {
    color: #8b1a22;
}

.battle-details[b-c6296j2vay] {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
}

.losses[b-c6296j2vay] {
    color: #a08070;
}

.attacker-losses[b-c6296j2vay] {
    color: #c9a227;
}

.defender-losses[b-c6296j2vay] {
    color: #5a8dbd;
}

.elimination-notice[b-c6296j2vay] {
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(139, 26, 34, 0.3);
    border-radius: 4px;
    font-size: 0.75rem;
    color: #c9a227;
    font-weight: 600;
}

.no-battles-notice[b-c6296j2vay] {
    padding: 20px;
    text-align: center;
    color: #a08070;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.9rem;
}

.game-map-fullscreen[b-c6296j2vay] {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* ===== Hamburger Menu ===== */
.hamburger-menu[b-c6296j2vay] {
    position: relative;
    margin-left: 12px;
}

.hamburger-btn[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    padding: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.hamburger-btn:hover[b-c6296j2vay] {
    opacity: 0.8;
}

.hamburger-line[b-c6296j2vay] {
    display: block;
    width: 100%;
    height: 3px;
    background: #c9a227;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

.menu-dropdown[b-c6296j2vay] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 160px;
    background: linear-gradient(180deg, #3d2d1d 0%, #2d1810 100%);
    border: 2px solid rgba(201, 162, 39, 0.4);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 2000;
}

.menu-item[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    font-family: 'Crimson Text', Georgia, serif;
    color: #f5e6c8;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.menu-item:hover[b-c6296j2vay] {
    background: rgba(201, 162, 39, 0.15);
}

.menu-item.exit-item[b-c6296j2vay] {
    color: #c9a227;
}

.menu-item.exit-item:hover[b-c6296j2vay] {
    background: rgba(139, 26, 34, 0.3);
}

.menu-item.concede-active[b-c6296j2vay] {
    color: #c9a227;
    background: rgba(201, 162, 39, 0.15);
}

.menu-item.disabled[b-c6296j2vay],
.menu-item:disabled[b-c6296j2vay] {
    opacity: 0.4;
    cursor: not-allowed;
}

.menu-item.disabled:hover[b-c6296j2vay],
.menu-item:disabled:hover[b-c6296j2vay] {
    background: transparent;
}

.menu-icon[b-c6296j2vay] {
    font-size: 1rem;
}

/* ===== Modal Styling ===== */
.modal-overlay[b-c6296j2vay] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 21, 16, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    pointer-events: auto;
}

.modal-dialog[b-c6296j2vay] {
    background: linear-gradient(145deg, #f5e6c8 0%, #e8d4a8 50%, #dcc89a 100%);
    border: 2px solid rgba(139, 90, 43, 0.4);
    border-radius: 12px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    pointer-events: auto;
    position: relative;
}

.modal-dialog[b-c6296j2vay]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
}

.modal-header[b-c6296j2vay] {
    position: relative;
    z-index: 2;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(139, 90, 43, 0.3);
}

.modal-title[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    margin: 0;
    color: #2d1810;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-body[b-c6296j2vay] {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.modal-body p[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    margin: 0;
    color: #3d2d1d;
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-footer[b-c6296j2vay] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(139, 90, 43, 0.3);
}

.btn-cancel[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    padding: 10px 20px;
    background: transparent;
    border: 2px solid rgba(139, 90, 43, 0.4);
    border-radius: 6px;
    color: #5a4a3a;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    pointer-events: auto;
}

.btn-cancel:hover[b-c6296j2vay] {
    background: rgba(139, 90, 43, 0.1);
    border-color: rgba(139, 90, 43, 0.6);
}

.btn-confirm[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    padding: 10px 20px;
    background: linear-gradient(180deg, #8b1a22 0%, #6d1419 100%);
    border: none;
    border-radius: 6px;
    color: #f5e6c8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    pointer-events: auto;
}

.btn-confirm:hover[b-c6296j2vay] {
    background: linear-gradient(180deg, #a12830 0%, #8b1a22 100%);
}

/* ===== Hurry Up Modal ===== */
.hurry-up-modal[b-c6296j2vay] {
    background: linear-gradient(145deg, #f5e6c8 0%, #e8d4a8 50%, #dcc89a 100%);
    border: 2px solid rgba(139, 90, 43, 0.4);
    border-radius: 12px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    pointer-events: auto;
    position: relative;
}

.hurry-up-modal .modal-header[b-c6296j2vay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(139, 90, 43, 0.1) 0%, transparent 100%);
    border-bottom: 1px solid rgba(139, 90, 43, 0.3);
}

.hurry-up-modal .modal-title[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #3d2d1d;
    margin: 0;
}

.modal-close-btn[b-c6296j2vay] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #5a4a3a;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close-btn:hover[b-c6296j2vay] {
    color: #8b1a22;
}

.hurry-up-buttons[b-c6296j2vay] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px;
}

.hurry-up-btn[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.15) 0%, rgba(201, 162, 39, 0.05) 100%);
    border: 2px solid rgba(139, 90, 43, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.hurry-up-btn:hover[b-c6296j2vay] {
    background: linear-gradient(180deg, rgba(201, 162, 39, 0.3) 0%, rgba(201, 162, 39, 0.15) 100%);
    border-color: rgba(201, 162, 39, 0.6);
    transform: translateY(-2px);
}

.hurry-up-btn:active[b-c6296j2vay] {
    transform: translateY(0);
}

.hurry-up-icon[b-c6296j2vay] {
    font-size: 2rem;
}

.hurry-up-label[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3d2d1d;
    text-align: center;
}

/* ===== Hurry Up Toast Notification ===== */
.hurry-up-toast[b-c6296j2vay] {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(145deg, #f5e6c8 0%, #e8d4a8 50%, #dcc89a 100%);
    border: 2px solid rgba(201, 162, 39, 0.6);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(201, 162, 39, 0.3);
    z-index: 9999;
    animation: hurryUpSlideIn-b-c6296j2vay 0.4s ease-out, hurryUpPulse-b-c6296j2vay 0.6s ease-in-out 0.4s 2;
}

.hurry-up-toast-icon[b-c6296j2vay] {
    font-size: 2rem;
    animation: hurryUpBounce-b-c6296j2vay 0.5s ease-in-out infinite;
}

.hurry-up-toast-message[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #3d2d1d;
}

.hurry-up-toast-message strong[b-c6296j2vay] {
    color: #8b1a22;
}

@keyframes hurryUpSlideIn-b-c6296j2vay {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes hurryUpPulse-b-c6296j2vay {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(201, 162, 39, 0.3);
    }
    50% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 40px rgba(201, 162, 39, 0.6);
    }
}

@keyframes hurryUpBounce-b-c6296j2vay {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* ===== Concede Notification Toast ===== */
.concede-toast[b-c6296j2vay] {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(145deg, #4a4a4a 0%, #3d3d3d 50%, #2d2d2d 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.1);
    z-index: 9999;
    animation: concedeSlideIn-b-c6296j2vay 0.4s ease-out;
}

.concede-toast-icon[b-c6296j2vay] {
    font-size: 2rem;
}

.concede-toast-message[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #e0e0e0;
}

.concede-toast-message strong[b-c6296j2vay] {
    color: #fff;
}

@keyframes concedeSlideIn-b-c6296j2vay {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ===== I-COM Diplomacy Modal ===== */
.icom-modal[b-c6296j2vay] {
    background: linear-gradient(145deg, #1a2a3a 0%, #0d1821 100%);
    border: 2px solid rgba(0, 200, 255, 0.4);
    border-radius: 12px;
    min-width: 400px;
    max-width: 550px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 200, 255, 0.2);
    pointer-events: auto;
}

.icom-modal .modal-header[b-c6296j2vay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(0, 200, 255, 0.15) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 200, 255, 0.3);
}

.icom-modal .modal-title[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #00c8ff;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}

.icom-instructions[b-c6296j2vay] {
    padding: 12px 20px;
    background: rgba(0, 200, 255, 0.05);
    border-bottom: 1px solid rgba(0, 200, 255, 0.2);
}

.icom-instructions p[b-c6296j2vay] {
    margin: 0;
    font-size: 0.85rem;
    color: #a0c0d0;
    line-height: 1.4;
}

.icom-instructions strong[b-c6296j2vay] {
    color: #00c8ff;
}

.icom-players[b-c6296j2vay] {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.icom-player-row[b-c6296j2vay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.icom-player-info[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 120px;
}

.icom-player-color[b-c6296j2vay] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.icom-player-name[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e0e0e0;
}

.icom-ai-badge[b-c6296j2vay] {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: rgba(255, 165, 0, 0.3);
    color: #ffa500;
    border-radius: 4px;
    font-weight: 600;
}

.icom-status[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 0.75rem;
    min-width: 80px;
}

.icom-current-alliance[b-c6296j2vay] {
    color: #4ade80;
    font-weight: 600;
}

.icom-my-proposal[b-c6296j2vay] {
    color: #60a5fa;
}

.icom-their-proposal[b-c6296j2vay] {
    color: #f472b6;
}

.icom-buttons[b-c6296j2vay] {
    display: flex;
    gap: 6px;
}

.icom-btn[b-c6296j2vay] {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(0, 200, 255, 0.4);
    border-radius: 6px;
    background: rgba(0, 200, 255, 0.1);
    color: #00c8ff;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.icom-btn:hover[b-c6296j2vay] {
    background: rgba(0, 200, 255, 0.25);
    border-color: rgba(0, 200, 255, 0.7);
    transform: translateY(-2px);
}

.icom-btn.selected[b-c6296j2vay] {
    background: rgba(0, 200, 255, 0.4);
    border-color: #00c8ff;
    box-shadow: 0 0 12px rgba(0, 200, 255, 0.5);
}

.icom-btn-x[b-c6296j2vay] {
    border-color: rgba(255, 80, 80, 0.4);
    background: rgba(255, 80, 80, 0.1);
    color: #ff5050;
}

.icom-btn-x:hover[b-c6296j2vay] {
    background: rgba(255, 80, 80, 0.25);
    border-color: rgba(255, 80, 80, 0.7);
}

.icom-btn-x.selected[b-c6296j2vay] {
    background: rgba(255, 80, 80, 0.4);
    border-color: #ff5050;
    box-shadow: 0 0 12px rgba(255, 80, 80, 0.5);
}

.icom-legend[b-c6296j2vay] {
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(0, 200, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.icom-legend-item[b-c6296j2vay] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.icom-legend-level[b-c6296j2vay] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(0, 200, 255, 0.4);
    border-radius: 4px;
    background: rgba(0, 200, 255, 0.1);
    color: #00c8ff;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.icom-legend-x[b-c6296j2vay] {
    border-color: rgba(255, 80, 80, 0.4);
    background: rgba(255, 80, 80, 0.1);
    color: #ff5050;
}

.icom-legend-desc[b-c6296j2vay] {
    font-size: 0.8rem;
    color: #8899aa;
    line-height: 1.4;
}

.icom-footer[b-c6296j2vay] {
    padding: 16px 20px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(0, 200, 255, 0.2);
}

.btn-close-icom[b-c6296j2vay] {
    background: linear-gradient(180deg, rgba(0, 200, 255, 0.2) 0%, rgba(0, 200, 255, 0.1) 100%);
    border: 1px solid rgba(0, 200, 255, 0.4);
    color: #00c8ff;
    padding: 10px 30px;
}

.btn-close-icom:hover[b-c6296j2vay] {
    background: linear-gradient(180deg, rgba(0, 200, 255, 0.3) 0%, rgba(0, 200, 255, 0.2) 100%);
    border-color: #00c8ff;
}

/* I-COM Button in Diplomacy Phase */
.btn-icom[b-c6296j2vay] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(0, 200, 255, 0.2) 0%, rgba(0, 200, 255, 0.1) 100%);
    border: 2px solid rgba(0, 200, 255, 0.4);
    color: #00c8ff;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 12px;
}

.btn-icom:hover[b-c6296j2vay] {
    background: linear-gradient(180deg, rgba(0, 200, 255, 0.3) 0%, rgba(0, 200, 255, 0.2) 100%);
    border-color: #00c8ff;
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.3);
    transform: translateY(-2px);
}

.icom-icon[b-c6296j2vay] {
    font-size: 1.2rem;
}

/* Alliance Summary in Diplomacy Phase */
.alliances-summary[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.alliance-badge[b-c6296j2vay] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid;
    border-radius: 6px;
}

.alliance-level[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #4ade80;
}

.alliance-player[b-c6296j2vay] {
    color: #e0e0e0;
}

/* ===== Game Statistics ===== */
.game-statistics[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.stats-header[b-c6296j2vay] {
    margin-bottom: 24px;
}

.trophy-icon[b-c6296j2vay] {
    font-size: 4rem;
    margin-bottom: 8px;
    animation: trophy-bounce-b-c6296j2vay 1s ease-in-out;
}

@keyframes trophy-bounce-b-c6296j2vay {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.winner-announcement[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.winner-label[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: #c9a227;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
}

.stats-header .winner-name[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    font-weight: bold;
    text-shadow: 0 0 20px currentColor;
}

.game-summary[b-c6296j2vay] {
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
    padding: 12px 24px;
    background: rgba(245, 230, 200, 0.08);
    border: 1px solid rgba(201, 162, 39, 0.2);
    border-radius: 8px;
}

.summary-item[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-label[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #a08070;
    text-transform: uppercase;
}

.summary-value[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #f5e6c8;
}

.player-rankings[b-c6296j2vay] {
    width: 100%;
    max-width: 400px;
    margin-bottom: 24px;
}

.rankings-header[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: #a08070;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}

.rankings-list[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ranking-row[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(245, 230, 200, 0.05);
    border: 1px solid rgba(201, 162, 39, 0.15);
    border-radius: 8px;
    transition: transform 0.2s;
}

.ranking-row.winner-row[b-c6296j2vay] {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.15), rgba(201, 162, 39, 0.05));
    border: 1px solid rgba(201, 162, 39, 0.4);
    transform: scale(1.02);
}

.ranking-row.eliminated-row[b-c6296j2vay] {
    opacity: 0.6;
}

.rank-badge[b-c6296j2vay] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(139, 90, 43, 0.2);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a08070;
}

.rank-badge.rank-first[b-c6296j2vay] {
    background: linear-gradient(135deg, #c9a227, #a08520);
    color: #2d1810;
    font-size: 1.1rem;
}

.player-info[b-c6296j2vay] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.ranking-row .player-name[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-weight: 600;
    font-size: 0.95rem;
}

.player-status[b-c6296j2vay] {
    font-size: 0.75rem;
}

.status-winner[b-c6296j2vay] {
    color: #c9a227;
}

.status-conceded[b-c6296j2vay] {
    color: #8b1a22;
}

.status-eliminated[b-c6296j2vay] {
    color: #a08070;
}

.player-stats[b-c6296j2vay] {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    color: #a08070;
}

.player-stats .stat[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats-footer[b-c6296j2vay] {
    margin-top: 8px;
}

.btn-return[b-c6296j2vay] {
    padding: 12px 32px;
    font-size: 1rem;
}

/* ===== Combined Side Panel (Chat & Region Bonus) ===== */
.side-panel[b-c6296j2vay] {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 320px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    display: flex;
}

@media (max-width: 767px) {
    .side-panel[b-c6296j2vay] {
        top: 48px;
        bottom: 56px;
        width: calc(100vw - 40px);
        max-width: 320px;
    }
}

.side-panel.open[b-c6296j2vay] {
    transform: translateX(0);
}

/* Tab container - stacked vertically on the left edge */
.side-panel-tabs[b-c6296j2vay] {
    position: absolute;
    left: -36px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 767px) {
    .side-panel-tabs[b-c6296j2vay] {
        left: -44px;
    }
}

.side-panel-tab[b-c6296j2vay] {
    position: relative;
    width: 36px;
    height: 100px;
    background: linear-gradient(180deg, #3d2d1d 0%, #2d1810 100%);
    border: 2px solid rgba(201, 162, 39, 0.4);
    border-right: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

@media (max-width: 767px) {
    .side-panel-tab[b-c6296j2vay] {
        width: 44px;
    }
}

.side-panel-tab:hover[b-c6296j2vay] {
    background: linear-gradient(180deg, #4d3d2d 0%, #3d2820 100%);
    border-color: rgba(201, 162, 39, 0.6);
}

.side-panel-tab.active[b-c6296j2vay] {
    background: linear-gradient(180deg, #2d2318 0%, #1a1510 100%);
    border-color: rgba(201, 162, 39, 0.6);
}

.side-panel-tab-text[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #c9a227;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
}

.side-panel-tab.has-unread .side-panel-tab-text[b-c6296j2vay] {
    animation: side-panel-pulse-b-c6296j2vay 1s ease-in-out infinite;
}

/* Matched card set animation - golden glow pulse */
.side-panel-tab.has-matched-set[b-c6296j2vay] {
    animation: matched-set-glow-b-c6296j2vay 1.5s ease-in-out infinite;
    border-color: rgba(201, 162, 39, 0.8);
}

.side-panel-tab.has-matched-set .side-panel-tab-text[b-c6296j2vay] {
    animation: matched-set-text-b-c6296j2vay 1.5s ease-in-out infinite;
}

@keyframes matched-set-glow-b-c6296j2vay {
    0%, 100% {
        box-shadow: 0 0 5px rgba(201, 162, 39, 0.4), inset 0 0 10px rgba(201, 162, 39, 0.1);
        border-color: rgba(201, 162, 39, 0.6);
    }
    50% {
        box-shadow: 0 0 15px rgba(201, 162, 39, 0.8), 0 0 25px rgba(201, 162, 39, 0.4), inset 0 0 15px rgba(201, 162, 39, 0.2);
        border-color: rgba(201, 162, 39, 1);
    }
}

@keyframes matched-set-text-b-c6296j2vay {
    0%, 100% {
        color: #c9a227;
        text-shadow: 0 0 5px rgba(201, 162, 39, 0.3);
    }
    50% {
        color: #f0d060;
        text-shadow: 0 0 10px rgba(201, 162, 39, 0.6), 0 0 20px rgba(201, 162, 39, 0.3);
    }
}

.side-panel-unread-indicator[b-c6296j2vay] {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #c9a227;
    border-radius: 50%;
    animation: side-panel-pulse-b-c6296j2vay 1s ease-in-out infinite;
}

@keyframes side-panel-pulse-b-c6296j2vay {
    0%, 100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1.2);
    }
}

/* Main content area */
.side-panel-content[b-c6296j2vay] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #2d2318 0%, #1a1510 100%);
    border-left: 2px solid rgba(201, 162, 39, 0.4);
    overflow: hidden;
}

.side-panel-header[b-c6296j2vay] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(180deg, #3d2d1d 0%, #2d1810 100%);
    border-bottom: 1px solid rgba(201, 162, 39, 0.3);
    flex-shrink: 0;
}

.side-panel-title[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #c9a227;
    letter-spacing: 0.08em;
}

/* Chat content section */
.side-panel-chat[b-c6296j2vay] {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.side-panel-chat.active[b-c6296j2vay] {
    display: flex;
}

.chat-messages-container[b-c6296j2vay] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-chat-message[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #d4c4a8;
}

.game-chat-message .chat-timestamp[b-c6296j2vay] {
    color: #7a6a5a;
    font-size: 0.75rem;
    margin-right: 6px;
}

.game-chat-message .chat-sender[b-c6296j2vay] {
    font-weight: 600;
    margin-right: 4px;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.6), 0 0 8px rgba(255, 255, 255, 0.3);
}

.game-chat-message .chat-content[b-c6296j2vay] {
    word-break: break-word;
}

.chat-input-container[b-c6296j2vay] {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(201, 162, 39, 0.2);
    flex-shrink: 0;
}

.side-panel .chat-input[b-c6296j2vay] {
    flex: 1;
    padding: 10px 14px;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.95rem;
    color: #f5e6c8;
    background: rgba(245, 230, 200, 0.08);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
}

.side-panel .chat-input:focus[b-c6296j2vay] {
    border-color: rgba(201, 162, 39, 0.6);
    background: rgba(245, 230, 200, 0.12);
}

.side-panel .chat-input[b-c6296j2vay]::placeholder {
    color: #7a6a5a;
    font-style: italic;
}

.chat-send-btn[b-c6296j2vay] {
    padding: 10px 14px;
    background: linear-gradient(180deg, #8b1a22 0%, #6d1419 100%);
    border: none;
    border-radius: 4px;
    color: #f5e6c8;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.chat-send-btn:hover[b-c6296j2vay] {
    background: linear-gradient(180deg, #a12830 0%, #8b1a22 100%);
}

/* Region bonus content section */
.side-panel-regions[b-c6296j2vay] {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.side-panel-regions.active[b-c6296j2vay] {
    display: flex;
}

.region-bonus-list[b-c6296j2vay] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.region-bonus-row[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(245, 230, 200, 0.03);
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid rgba(201, 162, 39, 0.15);
}

.region-bonus-row:hover[b-c6296j2vay] {
    background: rgba(245, 230, 200, 0.06);
    border-color: rgba(201, 162, 39, 0.3);
}

.region-color-dot[b-c6296j2vay] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.region-name[b-c6296j2vay] {
    flex: 1;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.95rem;
    color: #f5e6c8;
}

.region-bonus-value[b-c6296j2vay] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #c9a227;
    min-width: 30px;
    text-align: right;
}

/* ===== Cards Panel ===== */
.side-panel-cards[b-c6296j2vay] {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.side-panel-cards.active[b-c6296j2vay] {
    display: flex;
}

.cards-list[b-c6296j2vay] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.no-cards[b-c6296j2vay] {
    color: #a08070;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.peril-card[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(245, 230, 200, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(201, 162, 39, 0.2);
    transition: all 0.2s ease;
    overflow: hidden;
}

.peril-card:hover[b-c6296j2vay] {
    background: rgba(245, 230, 200, 0.1);
    border-color: rgba(201, 162, 39, 0.4);
    transform: translateX(-2px);
}

.peril-card img[b-c6296j2vay] {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    min-width: 50px;
    min-height: 50px;
    object-fit: contain;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    flex-shrink: 0;
}

.card-info[b-c6296j2vay] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-territory[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.95rem;
    color: #f5e6c8;
}

/* Card type color hints */
.peril-card.infantry[b-c6296j2vay] {
    border-left: 3px solid #4a7c59;
}

.peril-card.cavalry[b-c6296j2vay] {
    border-left: 3px solid #8b6914;
}

.peril-card.artillery[b-c6296j2vay] {
    border-left: 3px solid #8b3a3a;
}

.peril-card.wild[b-c6296j2vay] {
    border-left: 3px solid #6a5acd;
}

/* Owned territory card styling */
.peril-card.owned[b-c6296j2vay] {
    background: rgba(201, 162, 39, 0.1);
    border-color: rgba(201, 162, 39, 0.4);
}

.card-owned-badge[b-c6296j2vay] {
    font-size: 0.8rem;
    color: #c9a227;
    font-weight: 600;
}

/* Card selection */
.cards-selected-count[b-c6296j2vay] {
    font-size: 0.8rem;
    color: #c9a227;
    margin-left: auto;
}

.peril-card.selectable[b-c6296j2vay] {
    cursor: pointer;
}

.peril-card.selected[b-c6296j2vay] {
    background: rgba(201, 162, 39, 0.2);
    border-color: #c9a227;
    box-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
}

.card-checkbox[b-c6296j2vay] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid rgba(201, 162, 39, 0.4);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.card-checkbox.checked[b-c6296j2vay] {
    background: #c9a227;
    border-color: #c9a227;
}

.card-checkbox.checked[b-c6296j2vay]::after {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1510;
    font-size: 12px;
    font-weight: bold;
    height: 100%;
}

/* Trade section */
.cards-trade-section[b-c6296j2vay] {
    padding: 12px;
    border-top: 1px solid rgba(201, 162, 39, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-trade-cards[b-c6296j2vay] {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(180deg, #4a7c59 0%, #3d6b4a 100%);
    border: 2px solid rgba(201, 162, 39, 0.4);
    border-radius: 6px;
    color: #f5e6c8;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-trade-cards:hover:not(:disabled)[b-c6296j2vay] {
    background: linear-gradient(180deg, #5a8c69 0%, #4d7b5a 100%);
    border-color: rgba(201, 162, 39, 0.6);
    transform: translateY(-1px);
}

.btn-trade-cards:disabled[b-c6296j2vay] {
    background: linear-gradient(180deg, #3d3d3d 0%, #2d2d2d 100%);
    border-color: rgba(100, 100, 100, 0.4);
    color: #666;
    cursor: not-allowed;
}

.trade-button-content[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trade-title[b-c6296j2vay] {
    font-size: 0.95rem;
}

.trade-breakdown[b-c6296j2vay] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8rem;
    opacity: 0.9;
}

.trade-bonus[b-c6296j2vay] {
    font-family: 'Crimson Text', Georgia, serif;
}

.trade-bonus.territory-bonus[b-c6296j2vay] {
    color: #c9a227;
}

.trade-hint[b-c6296j2vay] {
    font-size: 0.75rem;
    color: #8b7355;
    text-align: center;
    font-style: italic;
}

/* ===== Volume Control ===== */
.volume-control-container[b-c6296j2vay] {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid rgba(201, 162, 39, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

.volume-control[b-c6296j2vay] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.volume-icon[b-c6296j2vay] {
    font-size: 1.2rem;
    min-width: 24px;
    text-align: center;
}

.volume-slider[b-c6296j2vay] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(201, 162, 39, 0.2);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.volume-slider[b-c6296j2vay]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #c9a227;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
    transition: transform 0.2s ease;
}

.volume-slider[b-c6296j2vay]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.volume-slider[b-c6296j2vay]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #c9a227;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
}

.volume-value[b-c6296j2vay] {
    font-size: 0.8rem;
    color: #a08070;
    min-width: 40px;
    text-align: right;
}

/* ===== Scrollbar Styling ===== */
.control-panel[b-c6296j2vay]::-webkit-scrollbar,
.all-orders-list[b-c6296j2vay]::-webkit-scrollbar,
.battle-results-list[b-c6296j2vay]::-webkit-scrollbar,
.chat-messages-container[b-c6296j2vay]::-webkit-scrollbar,
.region-bonus-list[b-c6296j2vay]::-webkit-scrollbar,
.cards-list[b-c6296j2vay]::-webkit-scrollbar {
    width: 8px;
}

.control-panel[b-c6296j2vay]::-webkit-scrollbar-track,
.all-orders-list[b-c6296j2vay]::-webkit-scrollbar-track,
.battle-results-list[b-c6296j2vay]::-webkit-scrollbar-track,
.chat-messages-container[b-c6296j2vay]::-webkit-scrollbar-track,
.region-bonus-list[b-c6296j2vay]::-webkit-scrollbar-track,
.cards-list[b-c6296j2vay]::-webkit-scrollbar-track {
    background: rgba(139, 90, 43, 0.1);
    border-radius: 4px;
}

.control-panel[b-c6296j2vay]::-webkit-scrollbar-thumb,
.all-orders-list[b-c6296j2vay]::-webkit-scrollbar-thumb,
.battle-results-list[b-c6296j2vay]::-webkit-scrollbar-thumb,
.chat-messages-container[b-c6296j2vay]::-webkit-scrollbar-thumb,
.region-bonus-list[b-c6296j2vay]::-webkit-scrollbar-thumb,
.cards-list[b-c6296j2vay]::-webkit-scrollbar-thumb {
    background: rgba(139, 90, 43, 0.4);
    border-radius: 4px;
}

.control-panel[b-c6296j2vay]::-webkit-scrollbar-thumb:hover,
.all-orders-list[b-c6296j2vay]::-webkit-scrollbar-thumb:hover,
.battle-results-list[b-c6296j2vay]::-webkit-scrollbar-thumb:hover,
.chat-messages-container[b-c6296j2vay]::-webkit-scrollbar-thumb:hover,
.region-bonus-list[b-c6296j2vay]::-webkit-scrollbar-thumb:hover,
.cards-list[b-c6296j2vay]::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 90, 43, 0.6);
}
/* /Pages/Lobby/Lobby.razor.rz.scp.css */
/* Napoleon-era Lobby Styling */

/* ===== Base Layout ===== */
.lobby-container[b-cf44vz5to1] {
    min-height: 100vh;
    padding: 0;
    background: linear-gradient(135deg, #1a1510 0%, #2d2318 50%, #1a1510 100%);
    font-family: 'Crimson Text', Georgia, serif;
    position: relative;
}

.lobby-container[b-cf44vz5to1]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(139, 90, 43, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(139, 90, 43, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.lobby-grid[b-cf44vz5to1] {
    display: grid;
    grid-template-columns: 300px 1fr 200px;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ===== Header ===== */
.lobby-header[b-cf44vz5to1] {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 10px;
}

.lobby-title[b-cf44vz5to1] {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #c9a227;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(201, 162, 39, 0.5);
    margin: 0;
}

.lobby-subtitle[b-cf44vz5to1] {
    color: rgba(245, 230, 200, 0.7);
    font-style: italic;
    font-size: 1.1rem;
    margin-top: 5px;
}

/* ===== Parchment Cards ===== */
.parchment-card[b-cf44vz5to1] {
    background: linear-gradient(145deg, #f5e6c8 0%, #e8d4a8 50%, #dcc89a 100%);
    border-radius: 8px;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(139, 90, 43, 0.3),
        inset 0 0 60px rgba(139, 90, 43, 0.1);
    position: relative;
    overflow: hidden;
}

.parchment-card[b-cf44vz5to1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
}

.parchment-card[b-cf44vz5to1]::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid rgba(139, 90, 43, 0.25);
    border-radius: 4px;
    pointer-events: none;
}

/* ===== Card Headers ===== */
.card-header[b-cf44vz5to1] {
    position: relative;
    z-index: 2;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(139, 90, 43, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-cf44vz5to1] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d1810;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title-icon[b-cf44vz5to1] {
    font-size: 1.2rem;
}

/* ===== War Rooms Panel ===== */
.war-rooms-panel[b-cf44vz5to1] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
}

.create-room-btn[b-cf44vz5to1] {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f5e6c8;
    background: linear-gradient(180deg, #8b1a22 0%, #6d1419 100%);
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(139, 26, 34, 0.4);
}

.create-room-btn:hover[b-cf44vz5to1] {
    background: linear-gradient(180deg, #a12830 0%, #8b1a22 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 26, 34, 0.5);
}

.rooms-list[b-cf44vz5to1] {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.rooms-empty[b-cf44vz5to1] {
    text-align: center;
    padding: 30px 20px;
    color: #7a6a5a;
    font-style: italic;
}

.room-item[b-cf44vz5to1] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(245, 230, 200, 0.3) 100%);
    border: 1px solid rgba(139, 90, 43, 0.3);
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.room-item:hover[b-cf44vz5to1] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(245, 230, 200, 0.5) 100%);
    border-color: rgba(139, 90, 43, 0.5);
    transform: translateX(3px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.room-item.in-progress[b-cf44vz5to1] {
    border-left: 3px solid #c9a227;
}

.room-header[b-cf44vz5to1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.room-name[b-cf44vz5to1] {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: #2d1810;
    font-size: 0.95rem;
}

.room-badge[b-cf44vz5to1] {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.room-badge.waiting[b-cf44vz5to1] {
    background: rgba(45, 74, 28, 0.2);
    color: #2d4a1c;
    border: 1px solid rgba(45, 74, 28, 0.4);
}

.room-badge.in-progress[b-cf44vz5to1] {
    background: rgba(201, 162, 39, 0.2);
    color: #8b6914;
    border: 1px solid rgba(201, 162, 39, 0.5);
}

.room-details[b-cf44vz5to1] {
    font-size: 0.85rem;
    color: #7a6a5a;
}

/* ===== Chat Panel ===== */
.chat-panel[b-cf44vz5to1] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
}

.online-badge[b-cf44vz5to1] {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(45, 74, 28, 0.2);
    color: #2d4a1c;
    border: 1px solid rgba(45, 74, 28, 0.4);
}

.chat-messages[b-cf44vz5to1] {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    padding: 15px 20px;
    min-height: 400px;
}

.chat-message[b-cf44vz5to1] {
    margin-bottom: 12px;
    line-height: 1.5;
}

.chat-message.system[b-cf44vz5to1] {
    color: #7a6a5a;
    font-style: italic;
    font-size: 0.9rem;
}

.chat-timestamp[b-cf44vz5to1] {
    font-size: 0.75rem;
    color: #a09080;
    margin-right: 8px;
}

.chat-sender[b-cf44vz5to1] {
    font-weight: 600;
    color: #8b1a22;
    margin-right: 6px;
}

.chat-content[b-cf44vz5to1] {
    color: #3d2d1d;
}

.chat-input-area[b-cf44vz5to1] {
    position: relative;
    z-index: 2;
    padding: 15px 20px;
    border-top: 1px solid rgba(139, 90, 43, 0.3);
    display: flex;
    gap: 10px;
}

.chat-input[b-cf44vz5to1] {
    flex: 1;
    padding: 12px 16px;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1rem;
    color: #2d1810;
    background: linear-gradient(180deg, #fff9ed 0%, #f5e6c8 100%);
    border: 2px solid #c9a86c;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
}

.chat-input:focus[b-cf44vz5to1] {
    border-color: #8b5a2b;
    box-shadow: 0 0 0 3px rgba(139, 90, 43, 0.15);
}

.chat-input[b-cf44vz5to1]::placeholder {
    color: #a09080;
    font-style: italic;
}

.send-btn[b-cf44vz5to1] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f5e6c8;
    background: linear-gradient(180deg, #2d4a1c 0%, #1a2e10 100%);
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(45, 74, 28, 0.4);
}

.send-btn:hover:not(:disabled)[b-cf44vz5to1] {
    background: linear-gradient(180deg, #3d5a2c 0%, #2d4a1c 100%);
    transform: translateY(-1px);
}

.send-btn:disabled[b-cf44vz5to1] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Online Players Panel ===== */
.players-panel[b-cf44vz5to1] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
}

.players-list[b-cf44vz5to1] {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.player-item[b-cf44vz5to1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(139, 90, 43, 0.15);
    font-size: 0.9rem;
    color: #3d2d1d;
}

.player-item:last-child[b-cf44vz5to1] {
    border-bottom: none;
}

.player-status-dot[b-cf44vz5to1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a7c23;
    box-shadow: 0 0 6px rgba(74, 124, 35, 0.6);
}

/* ===== Create Room Modal ===== */
.modal-overlay[b-cf44vz5to1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 21, 16, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-cf44vz5to1] {
    background: linear-gradient(145deg, #f5e6c8 0%, #e8d4a8 50%, #dcc89a 100%);
    border-radius: 8px;
    width: 100%;
    max-width: 450px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(139, 90, 43, 0.3),
        inset 0 0 80px rgba(139, 90, 43, 0.1);
    position: relative;
    overflow: hidden;
}

.modal-card[b-cf44vz5to1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
}

.modal-card[b-cf44vz5to1]::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid rgba(139, 90, 43, 0.3);
    border-radius: 4px;
    pointer-events: none;
}

.modal-header[b-cf44vz5to1] {
    position: relative;
    z-index: 2;
    padding: 25px 30px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(139, 90, 43, 0.3);
}

.modal-seal[b-cf44vz5to1] {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: radial-gradient(circle at 30% 30%, #a12830 0%, #8b1a22 40%, #6d1419 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.modal-seal-icon[b-cf44vz5to1] {
    font-size: 24px;
    color: #ffd700;
}

.modal-title[b-cf44vz5to1] {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d1810;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.modal-body[b-cf44vz5to1] {
    position: relative;
    z-index: 2;
    padding: 25px 30px;
}

.form-group[b-cf44vz5to1] {
    margin-bottom: 0;
}

.form-label[b-cf44vz5to1] {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #3d2d1d;
    margin-bottom: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.form-input[b-cf44vz5to1] {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1.05rem;
    color: #2d1810;
    background: linear-gradient(180deg, #fff9ed 0%, #f5e6c8 100%);
    border: 2px solid #c9a86c;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
}

.form-input:focus[b-cf44vz5to1] {
    border-color: #8b5a2b;
    box-shadow: 0 0 0 3px rgba(139, 90, 43, 0.15);
}

.form-input[b-cf44vz5to1]::placeholder {
    color: #a09080;
    font-style: italic;
}

.modal-footer[b-cf44vz5to1] {
    position: relative;
    z-index: 2;
    padding: 20px 30px 25px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-top: 1px solid rgba(139, 90, 43, 0.3);
}

.btn-cancel[b-cf44vz5to1] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5a4a3a;
    background: transparent;
    border: 2px solid rgba(139, 90, 43, 0.4);
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover[b-cf44vz5to1] {
    background: rgba(139, 90, 43, 0.1);
    border-color: rgba(139, 90, 43, 0.6);
}

.btn-create[b-cf44vz5to1] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f5e6c8;
    background: linear-gradient(180deg, #8b1a22 0%, #6d1419 100%);
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(139, 26, 34, 0.4);
}

.btn-create:hover:not(:disabled)[b-cf44vz5to1] {
    background: linear-gradient(180deg, #a12830 0%, #8b1a22 100%);
    transform: translateY(-1px);
}

.btn-create:disabled[b-cf44vz5to1] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Corner Decorations ===== */
.corner-decoration[b-cf44vz5to1] {
    position: fixed;
    width: 120px;
    height: 120px;
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
}

.corner-decoration[b-cf44vz5to1]::before,
.corner-decoration[b-cf44vz5to1]::after {
    content: '';
    position: absolute;
    background: linear-gradient(135deg, #c9a227 0%, #8b5a2b 100%);
}

.corner-tl[b-cf44vz5to1] { top: 15px; left: 15px; }
.corner-tr[b-cf44vz5to1] { top: 15px; right: 15px; transform: scaleX(-1); }
.corner-bl[b-cf44vz5to1] { bottom: 15px; left: 15px; transform: scaleY(-1); }
.corner-br[b-cf44vz5to1] { bottom: 15px; right: 15px; transform: scale(-1); }

.corner-decoration[b-cf44vz5to1]::before {
    width: 100%;
    height: 3px;
    top: 0;
    left: 0;
}

.corner-decoration[b-cf44vz5to1]::after {
    width: 3px;
    height: 100%;
    top: 0;
    left: 0;
}

/* ===== Floating Decorations ===== */
.float-decoration[b-cf44vz5to1] {
    position: fixed;
    font-size: 2.5rem;
    opacity: 0.06;
    color: #c9a227;
    z-index: 0;
    pointer-events: none;
}

.float-1[b-cf44vz5to1] { top: 20%; left: 3%; }
.float-2[b-cf44vz5to1] { bottom: 25%; left: 5%; transform: rotate(-15deg); }
.float-3[b-cf44vz5to1] { top: 15%; right: 3%; transform: rotate(15deg); }
.float-4[b-cf44vz5to1] { bottom: 20%; right: 4%; }

/* ===== Music Toggle ===== */
.music-toggle-container[b-cf44vz5to1] {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 100;
}

.music-toggle[b-cf44vz5to1] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 12px;
    background: rgba(26, 21, 16, 0.9);
    border: 1px solid rgba(139, 90, 43, 0.5);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.music-toggle:hover[b-cf44vz5to1] {
    background: rgba(45, 35, 24, 0.95);
    border-color: rgba(201, 162, 39, 0.6);
}

.music-toggle input[type="checkbox"][b-cf44vz5to1] {
    display: none;
}

.toggle-slider[b-cf44vz5to1] {
    position: relative;
    width: 36px;
    height: 20px;
    background: rgba(139, 90, 43, 0.3);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.toggle-slider[b-cf44vz5to1]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #8b5a2b;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.music-toggle input[type="checkbox"]:checked + .toggle-slider[b-cf44vz5to1] {
    background: rgba(201, 162, 39, 0.4);
}

.music-toggle input[type="checkbox"]:checked + .toggle-slider[b-cf44vz5to1]::before {
    transform: translateX(16px);
    background: #c9a227;
}

.toggle-label[b-cf44vz5to1] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.9rem;
    color: #c9a227;
    white-space: nowrap;
}

/* ===== Scrollbar Styling ===== */
.rooms-list[b-cf44vz5to1]::-webkit-scrollbar,
.chat-messages[b-cf44vz5to1]::-webkit-scrollbar,
.players-list[b-cf44vz5to1]::-webkit-scrollbar {
    width: 8px;
}

.rooms-list[b-cf44vz5to1]::-webkit-scrollbar-track,
.chat-messages[b-cf44vz5to1]::-webkit-scrollbar-track,
.players-list[b-cf44vz5to1]::-webkit-scrollbar-track {
    background: rgba(139, 90, 43, 0.1);
    border-radius: 4px;
}

.rooms-list[b-cf44vz5to1]::-webkit-scrollbar-thumb,
.chat-messages[b-cf44vz5to1]::-webkit-scrollbar-thumb,
.players-list[b-cf44vz5to1]::-webkit-scrollbar-thumb {
    background: rgba(139, 90, 43, 0.4);
    border-radius: 4px;
}

.rooms-list[b-cf44vz5to1]::-webkit-scrollbar-thumb:hover,
.chat-messages[b-cf44vz5to1]::-webkit-scrollbar-thumb:hover,
.players-list[b-cf44vz5to1]::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 90, 43, 0.6);
}

/* ===== Responsive Design ===== */
@media (max-width: 1200px) {
    .lobby-grid[b-cf44vz5to1] {
        grid-template-columns: 280px 1fr 180px;
        gap: 15px;
    }
}

@media (max-width: 992px) {
    .lobby-grid[b-cf44vz5to1] {
        grid-template-columns: 1fr;
    }

    .lobby-header[b-cf44vz5to1] {
        margin-bottom: 15px;
    }

    .war-rooms-panel[b-cf44vz5to1],
    .chat-panel[b-cf44vz5to1],
    .players-panel[b-cf44vz5to1] {
        max-height: 50vh;
    }

    .float-decoration[b-cf44vz5to1],
    .corner-decoration[b-cf44vz5to1] {
        display: none;
    }
}

@media (max-width: 767px) {
    .lobby-container[b-cf44vz5to1] {
        padding: 0;
        padding-bottom: var(--safe-area-bottom, 0px);
    }

    .lobby-title[b-cf44vz5to1] {
        font-size: 1.8rem;
    }

    .card-header[b-cf44vz5to1] {
        padding: 12px 15px;
    }

    .chat-input-area[b-cf44vz5to1] {
        padding: 12px 15px;
        flex-wrap: wrap;
    }

    .chat-input[b-cf44vz5to1] {
        min-height: var(--touch-target-min, 44px);
    }

    .send-btn[b-cf44vz5to1] {
        min-height: var(--touch-target-min, 44px);
        padding: 12px 20px;
    }

    .create-room-btn[b-cf44vz5to1] {
        min-height: var(--touch-target-min, 44px);
        padding: 10px 16px;
    }

    .room-item[b-cf44vz5to1] {
        min-height: var(--touch-target-min, 44px);
        padding: 14px 15px;
    }

    /* Modal improvements for mobile */
    .modal-card[b-cf44vz5to1] {
        margin: var(--modal-margin-mobile, 12px);
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer[b-cf44vz5to1] {
        flex-direction: column;
        gap: 8px;
    }

    .btn-cancel[b-cf44vz5to1], .btn-create[b-cf44vz5to1] {
        width: 100%;
        min-height: var(--touch-target-min, 44px);
        padding: 14px 24px;
    }

    /* Improve scrolling on mobile */
    .rooms-list[b-cf44vz5to1],
    .chat-messages[b-cf44vz5to1],
    .players-list[b-cf44vz5to1] {
        -webkit-overflow-scrolling: touch;
    }
}
/* /Pages/WarRoom/WarRoom.razor.rz.scp.css */
/* Napoleon-era War Room Styling */

/* ===== Base Layout ===== */
.warroom-container[b-lb30glzhfn] {
    min-height: calc(100vh - 60px);
    padding: 20px;
    background: linear-gradient(135deg, #1a1510 0%, #2d2318 50%, #1a1510 100%);
    font-family: 'Crimson Text', Georgia, serif;
    position: relative;
}

.warroom-container[b-lb30glzhfn]::before {
    content: '';
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(139, 90, 43, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(139, 90, 43, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.warroom-grid[b-lb30glzhfn] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ===== Loading State ===== */
.loading-container[b-lb30glzhfn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: #c9a227;
}

.loading-spinner[b-lb30glzhfn] {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(201, 162, 39, 0.2);
    border-top-color: #c9a227;
    border-radius: 50%;
    animation: spin-b-lb30glzhfn 1s linear infinite;
}

@keyframes spin-b-lb30glzhfn {
    to { transform: rotate(360deg); }
}

.loading-text[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    margin-top: 20px;
    letter-spacing: 0.1em;
}

/* ===== Parchment Cards ===== */
.parchment-card[b-lb30glzhfn] {
    background: linear-gradient(145deg, #f5e6c8 0%, #e8d4a8 50%, #dcc89a 100%);
    border-radius: 8px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(139, 90, 43, 0.3),
        inset 0 0 50px rgba(139, 90, 43, 0.08);
    position: relative;
    overflow: hidden;
}

.parchment-card[b-lb30glzhfn]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
}

.parchment-card[b-lb30glzhfn]::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid rgba(139, 90, 43, 0.2);
    border-radius: 4px;
    pointer-events: none;
}

/* ===== Card Headers ===== */
.card-header[b-lb30glzhfn] {
    position: relative;
    z-index: 2;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(139, 90, 43, 0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #2d1810;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title-icon[b-lb30glzhfn] {
    font-size: 1.1rem;
    color: #8b5a2b;
}

.card-body[b-lb30glzhfn] {
    position: relative;
    z-index: 2;
    padding: 12px 16px;
}

/* ===== Room Header Card ===== */
.room-header-card[b-lb30glzhfn] {
    margin-bottom: 15px;
}

.room-name[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2d1810;
    letter-spacing: 0.05em;
}

.btn-leave[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8b1a22;
    background: transparent;
    border: 1px solid rgba(139, 26, 34, 0.4);
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-leave:hover[b-lb30glzhfn] {
    background: rgba(139, 26, 34, 0.1);
    border-color: #8b1a22;
}

/* ===== Players List ===== */
.players-card[b-lb30glzhfn] {
    margin-bottom: 15px;
}

.player-count[b-lb30glzhfn] {
    font-size: 0.85rem;
    color: #5a4a3a;
}

.players-list[b-lb30glzhfn] {
    position: relative;
    z-index: 2;
}

.player-row[b-lb30glzhfn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(139, 90, 43, 0.15);
}

.player-row:last-child[b-lb30glzhfn] {
    border-bottom: none;
}

.player-name-badge[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.player-badges[b-lb30glzhfn] {
    display: flex;
    gap: 6px;
}

.badge-host[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 3px;
    background: linear-gradient(135deg, #c9a227 0%, #a08020 100%);
    color: #2d1810;
    text-transform: uppercase;
}

.badge-ready[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 3px;
    background: linear-gradient(135deg, #2d4a1c 0%, #1a2e10 100%);
    color: #f5e6c8;
    text-transform: uppercase;
}

/* ===== Color Selection ===== */
.colors-card[b-lb30glzhfn] {
    margin-bottom: 15px;
}

.color-grid[b-lb30glzhfn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 2;
    padding: 12px 16px;
}

.color-btn[b-lb30glzhfn] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.color-btn:hover:not(:disabled)[b-lb30glzhfn] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.color-btn.selected[b-lb30glzhfn] {
    border-color: #2d1810;
    box-shadow: 0 0 0 2px #c9a227;
}

.color-btn:disabled[b-lb30glzhfn] {
    opacity: 0.4;
    cursor: not-allowed;
}

.color-btn:disabled[b-lb30glzhfn]::after {
    content: '✕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0, 0, 0, 0.6);
    font-weight: bold;
    font-size: 1rem;
}

/* ===== Settings Card ===== */
.settings-card[b-lb30glzhfn] {
    margin-bottom: 15px;
}

.settings-grid[b-lb30glzhfn] {
    position: relative;
    z-index: 2;
    padding: 12px 16px;
}

.setting-row[b-lb30glzhfn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(139, 90, 43, 0.15);
}

.setting-row:last-child[b-lb30glzhfn] {
    border-bottom: none;
}

.setting-label[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3d2d1d;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.setting-value[b-lb30glzhfn] {
    font-size: 0.9rem;
    color: #5a4a3a;
}

.setting-select[b-lb30glzhfn] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.9rem;
    color: #2d1810;
    background: linear-gradient(180deg, #fff9ed 0%, #f5e6c8 100%);
    border: 1px solid #c9a86c;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
}

.setting-select:focus[b-lb30glzhfn] {
    border-color: #8b5a2b;
    box-shadow: 0 0 0 2px rgba(139, 90, 43, 0.15);
}

/* ===== Action Buttons ===== */
.actions-area[b-lb30glzhfn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.btn-start[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f5e6c8;
    background: linear-gradient(180deg, #2d4a1c 0%, #1a2e10 100%);
    border: none;
    border-radius: 4px;
    padding: 14px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(45, 74, 28, 0.4);
}

.btn-start:hover:not(:disabled)[b-lb30glzhfn] {
    background: linear-gradient(180deg, #3d5a2c 0%, #2d4a1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 74, 28, 0.5);
}

.btn-start:disabled[b-lb30glzhfn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-ready[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f5e6c8;
    background: linear-gradient(180deg, #8b1a22 0%, #6d1419 100%);
    border: none;
    border-radius: 4px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(139, 26, 34, 0.4);
}

.btn-ready:hover:not(:disabled)[b-lb30glzhfn] {
    background: linear-gradient(180deg, #a12830 0%, #8b1a22 100%);
    transform: translateY(-1px);
}

.btn-ready:disabled[b-lb30glzhfn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-ready.is-ready[b-lb30glzhfn] {
    background: linear-gradient(180deg, #c9a227 0%, #a08020 100%);
    color: #2d1810;
}

/* ===== Right Column ===== */
.right-column[b-lb30glzhfn] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ===== Map Preview ===== */
.map-card .card-body[b-lb30glzhfn] {
    padding: 8px;
}

.map-preview[b-lb30glzhfn] {
    position: relative;
    height: 280px;
    border-radius: 4px;
    overflow: hidden;
}

/* ===== Chat Panel ===== */
.chat-card[b-lb30glzhfn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

.chat-messages[b-lb30glzhfn] {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    max-height: 30vh;
}

.chat-message[b-lb30glzhfn] {
    margin-bottom: 10px;
    line-height: 1.5;
}

.chat-message.system[b-lb30glzhfn] {
    color: #7a6a5a;
    font-style: italic;
    font-size: 0.9rem;
}

.chat-timestamp[b-lb30glzhfn] {
    font-size: 0.75rem;
    color: #a09080;
    margin-right: 8px;
}

.chat-sender[b-lb30glzhfn] {
    font-weight: 600;
    color: #8b1a22;
    margin-right: 6px;
}

.chat-content[b-lb30glzhfn] {
    color: #3d2d1d;
}

.chat-input-area[b-lb30glzhfn] {
    position: relative;
    z-index: 2;
    padding: 12px 16px;
    border-top: 1px solid rgba(139, 90, 43, 0.25);
    display: flex;
    gap: 10px;
}

.chat-input[b-lb30glzhfn] {
    flex: 1;
    padding: 10px 14px;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 1rem;
    color: #2d1810;
    background: linear-gradient(180deg, #fff9ed 0%, #f5e6c8 100%);
    border: 2px solid #c9a86c;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
}

.chat-input:focus[b-lb30glzhfn] {
    border-color: #8b5a2b;
    box-shadow: 0 0 0 3px rgba(139, 90, 43, 0.15);
}

.chat-input[b-lb30glzhfn]::placeholder {
    color: #a09080;
    font-style: italic;
}

.btn-send[b-lb30glzhfn] {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f5e6c8;
    background: linear-gradient(180deg, #2d4a1c 0%, #1a2e10 100%);
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-send:hover:not(:disabled)[b-lb30glzhfn] {
    background: linear-gradient(180deg, #3d5a2c 0%, #2d4a1c 100%);
}

.btn-send:disabled[b-lb30glzhfn] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Scrollbar Styling ===== */
.chat-messages[b-lb30glzhfn]::-webkit-scrollbar {
    width: 8px;
}

.chat-messages[b-lb30glzhfn]::-webkit-scrollbar-track {
    background: rgba(139, 90, 43, 0.1);
    border-radius: 4px;
}

.chat-messages[b-lb30glzhfn]::-webkit-scrollbar-thumb {
    background: rgba(139, 90, 43, 0.4);
    border-radius: 4px;
}

.chat-messages[b-lb30glzhfn]::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 90, 43, 0.6);
}

/* ===== Corner Decorations ===== */
.corner-decoration[b-lb30glzhfn] {
    position: fixed;
    width: 100px;
    height: 100px;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

.corner-decoration[b-lb30glzhfn]::before,
.corner-decoration[b-lb30glzhfn]::after {
    content: '';
    position: absolute;
    background: linear-gradient(135deg, #c9a227 0%, #8b5a2b 100%);
}

.corner-tl[b-lb30glzhfn] { top: 70px; left: 15px; }
.corner-tr[b-lb30glzhfn] { top: 70px; right: 15px; transform: scaleX(-1); }
.corner-bl[b-lb30glzhfn] { bottom: 15px; left: 15px; transform: scaleY(-1); }
.corner-br[b-lb30glzhfn] { bottom: 15px; right: 15px; transform: scale(-1); }

.corner-decoration[b-lb30glzhfn]::before {
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
}

.corner-decoration[b-lb30glzhfn]::after {
    width: 2px;
    height: 100%;
    top: 0;
    left: 0;
}

/* ===== Responsive Design ===== */
@media (max-width: 992px) {
    .warroom-grid[b-lb30glzhfn] {
        grid-template-columns: 1fr;
    }

    .corner-decoration[b-lb30glzhfn] {
        display: none;
    }

    .map-preview[b-lb30glzhfn] {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .warroom-container[b-lb30glzhfn] {
        padding: 10px;
    }

    .card-header[b-lb30glzhfn] {
        padding: 10px 12px;
    }

    .card-body[b-lb30glzhfn] {
        padding: 10px 12px;
    }

    .color-btn[b-lb30glzhfn] {
        width: 32px;
        height: 32px;
    }
}

/* ===== AI General Styles ===== */
.ai-card[b-lb30glzhfn] {
    margin-top: 12px;
}

.ai-general-grid[b-lb30glzhfn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px;
}

.ai-general-btn[b-lb30glzhfn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    background: rgba(139, 90, 43, 0.2);
    border: 1px solid rgba(139, 90, 43, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Crimson Text', Georgia, serif;
}

.ai-general-btn:hover:not(:disabled)[b-lb30glzhfn] {
    background: rgba(139, 90, 43, 0.4);
    border-color: #c9a227;
    transform: translateY(-2px);
}

.ai-general-btn:disabled[b-lb30glzhfn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-general-name[b-lb30glzhfn] {
    font-size: 0.75rem;
    color: #3d2d1d;
    text-align: center;
    font-weight: 600;
}

/* AI Player Badge */
.badge-ai[b-lb30glzhfn] {
    display: inline-block;
    padding: 2px 6px;
    background: linear-gradient(135deg, #6f42c1, #5a32a3);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.player-row.ai-player[b-lb30glzhfn] {
    background: rgba(111, 66, 193, 0.1);
}

/* Remove AI Button */
.btn-remove-ai[b-lb30glzhfn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 4px;
    background: rgba(220, 53, 69, 0.8);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: bold;
    transition: background 0.2s ease;
}

.btn-remove-ai:hover[b-lb30glzhfn] {
    background: #dc3545;
}

/* Modal Overlay */
.modal-overlay[b-lb30glzhfn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-lb30glzhfn] {
    background: #f5e6d3;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    max-width: 400px;
    width: 90%;
}

.modal-header[b-lb30glzhfn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(139, 90, 43, 0.2);
}

.modal-header h3[b-lb30glzhfn] {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #3d2d1d;
}

.modal-close[b-lb30glzhfn] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #8b5a2b;
    cursor: pointer;
    padding: 4px 8px;
}

.modal-close:hover[b-lb30glzhfn] {
    color: #3d2d1d;
}

.modal-body[b-lb30glzhfn] {
    padding: 16px;
}

.ai-color-modal .color-grid[b-lb30glzhfn] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    justify-items: center;
}

.ai-color-modal .color-btn[b-lb30glzhfn] {
    width: 48px;
    height: 48px;
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* Napoleon-era Navigation Styling */

.page[b-7qgaxabob2] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-7qgaxabob2] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ===== Top Navigation Bar ===== */
.top-row[b-7qgaxabob2] {
    background: linear-gradient(180deg, #2d2318 0%, #1a1510 100%);
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, transparent 0%, #c9a227 20%, #c9a227 80%, transparent 100%) 1;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ===== Brand / Logo ===== */
.nav-brand[b-7qgaxabob2] {
    display: flex;
    align-items: center;
}

.brand-link[b-7qgaxabob2] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.brand-link:hover[b-7qgaxabob2] {
    transform: scale(1.02);
}

.brand-icon[b-7qgaxabob2] {
    font-size: 1.8rem;
    color: #c9a227;
    text-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
}

.brand-text[b-7qgaxabob2] {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #f5e6c8;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===== Navigation Links ===== */
.nav-links[b-7qgaxabob2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link[b-7qgaxabob2] {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d4c4a8;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link:hover[b-7qgaxabob2] {
    color: #f5e6c8;
    background: rgba(201, 162, 39, 0.15);
}

.link-icon[b-7qgaxabob2] {
    font-size: 1rem;
}

/* Admin Link */
.admin-link[b-7qgaxabob2] {
    color: #c9a227;
}

.admin-link:hover[b-7qgaxabob2] {
    color: #ffd700;
    background: rgba(201, 162, 39, 0.2);
}

/* Profile Link */
.profile-link[b-7qgaxabob2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    background: rgba(245, 230, 200, 0.08);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 20px;
}

.profile-link:hover[b-7qgaxabob2] {
    background: rgba(245, 230, 200, 0.15);
    border-color: rgba(201, 162, 39, 0.5);
}

.profile-img[b-7qgaxabob2] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #c9a227;
    box-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
}

.profile-icon[b-7qgaxabob2] {
    font-size: 1.2rem;
    color: #c9a227;
}

.profile-name[b-7qgaxabob2] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Logout Link */
.logout-link[b-7qgaxabob2] {
    color: #a08070;
}

.logout-link:hover[b-7qgaxabob2] {
    color: #c9a227;
    background: rgba(160, 128, 112, 0.15);
}

/* Music Controls in Nav Bar */
.music-controls[b-7qgaxabob2] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-right: 8px;
}

.now-playing[b-7qgaxabob2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.8rem;
    color: rgba(201, 162, 39, 0.8);
}

.track-title[b-7qgaxabob2] {
    font-style: italic;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-note[b-7qgaxabob2] {
    font-size: 1rem;
    color: #c9a227;
    animation: bounce-note-b-7qgaxabob2 0.8s ease-in-out infinite;
}

.note-left[b-7qgaxabob2] {
    animation-delay: 0s;
}

.note-right[b-7qgaxabob2] {
    animation-delay: 0.4s;
}

/* Skip Track Button */
.skip-track-btn[b-7qgaxabob2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 8px;
    padding: 0;
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid rgba(201, 162, 39, 0.4);
    border-radius: 50%;
    color: #c9a227;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.skip-track-btn:hover[b-7qgaxabob2] {
    background: rgba(201, 162, 39, 0.3);
    border-color: #c9a227;
    transform: scale(1.1);
}

.skip-track-btn:active[b-7qgaxabob2] {
    transform: scale(0.95);
}

.skip-track-btn span[b-7qgaxabob2] {
    margin-top: -1px;
}

@keyframes bounce-note-b-7qgaxabob2 {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* Music Toggle */
.music-toggle[b-7qgaxabob2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 12px;
    background: rgba(26, 21, 16, 0.6);
    border: 1px solid rgba(139, 90, 43, 0.4);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.music-toggle:hover[b-7qgaxabob2] {
    background: rgba(45, 35, 24, 0.8);
    border-color: rgba(201, 162, 39, 0.5);
}

.music-toggle input[type="checkbox"][b-7qgaxabob2] {
    display: none;
}

.toggle-slider[b-7qgaxabob2] {
    position: relative;
    width: 32px;
    height: 18px;
    background: rgba(139, 90, 43, 0.3);
    border-radius: 9px;
    transition: all 0.3s ease;
}

.toggle-slider[b-7qgaxabob2]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #8b5a2b;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.music-toggle input[type="checkbox"]:checked + .toggle-slider[b-7qgaxabob2] {
    background: rgba(201, 162, 39, 0.4);
}

.music-toggle input[type="checkbox"]:checked + .toggle-slider[b-7qgaxabob2]::before {
    transform: translateX(14px);
    background: #c9a227;
}

.toggle-label[b-7qgaxabob2] {
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 0.8rem;
    color: #c9a227;
    white-space: nowrap;
}

/* Audio Loading Indicator */
.audio-loading-indicator[b-7qgaxabob2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.audio-loading-bar[b-7qgaxabob2] {
    width: 60px;
    height: 6px;
    background: rgba(139, 90, 43, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.audio-loading-progress[b-7qgaxabob2] {
    height: 100%;
    background: linear-gradient(90deg, #c9a227 0%, #ffd700 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
    animation: loading-pulse-b-7qgaxabob2 1.5s ease-in-out infinite;
}

@keyframes loading-pulse-b-7qgaxabob2 {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.audio-load-error[b-7qgaxabob2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(139, 90, 43, 0.4);
    border-radius: 50%;
    color: #c9a227;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: help;
}

.audio-disabled[b-7qgaxabob2] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a08070;
    font-size: 1rem;
    cursor: help;
}

/* Enlist Link (Register) */
.enlist-link[b-7qgaxabob2] {
    background: linear-gradient(180deg, #8b1a22 0%, #6d1419 100%);
    color: #f5e6c8 !important;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(139, 26, 34, 0.4);
}

.enlist-link:hover[b-7qgaxabob2] {
    background: linear-gradient(180deg, #a12830 0%, #8b1a22 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 26, 34, 0.5);
}

/* ===== Content Area ===== */
.content[b-7qgaxabob2] {
    flex: 1;
    padding: 0;
}

/* ===== Responsive Design ===== */
@media (max-width: 767px) {
    .top-row[b-7qgaxabob2] {
        padding: 0 var(--spacing-sm, 8px);
        padding-left: max(var(--spacing-sm, 8px), var(--safe-area-left, 0px));
        padding-right: max(var(--spacing-sm, 8px), var(--safe-area-right, 0px));
        height: 56px;
    }

    .brand-text[b-7qgaxabob2] {
        font-size: 1.3rem;
    }

    .brand-icon[b-7qgaxabob2] {
        font-size: 1.5rem;
    }

    .nav-link[b-7qgaxabob2] {
        font-size: 0.75rem;
        padding: 10px 12px;
        min-height: var(--touch-target-min, 44px);
        display: flex;
        align-items: center;
    }

    .profile-name[b-7qgaxabob2] {
        display: none;
    }

    .profile-link[b-7qgaxabob2] {
        padding: 8px 12px;
        min-height: var(--touch-target-min, 44px);
    }

    /* Hide music track title on mobile to save space */
    .track-title[b-7qgaxabob2] {
        display: none;
    }

    .music-controls[b-7qgaxabob2] {
        gap: 8px;
    }

    .skip-track-btn[b-7qgaxabob2] {
        width: 32px;
        height: 32px;
    }

    /* Smaller loading bar on mobile */
    .audio-loading-bar[b-7qgaxabob2] {
        width: 40px;
    }

    .audio-load-error[b-7qgaxabob2],
    .audio-disabled[b-7qgaxabob2] {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .top-row[b-7qgaxabob2] {
        padding: 0 var(--spacing-xs, 4px);
        padding-left: max(var(--spacing-xs, 4px), var(--safe-area-left, 0px));
        padding-right: max(var(--spacing-xs, 4px), var(--safe-area-right, 0px));
    }

    .nav-links[b-7qgaxabob2] {
        gap: 2px;
    }

    .nav-link[b-7qgaxabob2] {
        padding: 10px 8px;
        font-size: 0.7rem;
    }

    .link-icon[b-7qgaxabob2] {
        display: none;
    }

    .brand-icon[b-7qgaxabob2] {
        display: none;
    }

    .brand-text[b-7qgaxabob2] {
        font-size: 1.1rem;
        letter-spacing: 0.1em;
    }

    /* Hide music toggle label on very small screens */
    .toggle-label[b-7qgaxabob2] {
        display: none;
    }

    .music-toggle[b-7qgaxabob2] {
        padding: 8px;
        min-width: var(--touch-target-min, 44px);
        min-height: var(--touch-target-min, 44px);
        justify-content: center;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-r7t90ee15u] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-r7t90ee15u] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-r7t90ee15u] {
    font-size: 1.1rem;
}

.oi[b-r7t90ee15u] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-r7t90ee15u] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-r7t90ee15u] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-r7t90ee15u] {
        padding-bottom: 1rem;
    }

    .nav-item[b-r7t90ee15u]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-r7t90ee15u]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-r7t90ee15u]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-r7t90ee15u] {
        display: none;
    }

    .collapse[b-r7t90ee15u] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-r7t90ee15u] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}