/* _content/Municipality16.Shared/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-uvn97ef6m5] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-uvn97ef6m5] {
    flex: 1;
}

.sidebar[b-uvn97ef6m5] {
    background: #0c3a58;
}

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

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

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

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

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

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

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

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

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

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


}

#blazor-error-ui[b-uvn97ef6m5] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-uvn97ef6m5] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/BoostResults.razor.rz.scp.css */
/* ================================
   BOOST RESULTS (player view)
   RW design language (Home / GameFieldRW), light variant
   ================================ */

.boost-results-container[b-80nivgbezf] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Empty state */
.empty-state[b-80nivgbezf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    color: #6c757d;
    text-align: center;
}

.empty-state i[b-80nivgbezf] {
    font-size: 3rem;
    opacity: 0.5;
    margin-bottom: 12px;
}

.empty-state p[b-80nivgbezf] {
    margin: 0;
    font-size: 1.05rem;
}

/* Sections */
.results-section[b-80nivgbezf] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
}

.section-header[b-80nivgbezf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 1rem;
}

.section-header.success[b-80nivgbezf] {
    background: rgba(40, 167, 69, 0.12);
    color: #1e7e34;
}

.section-header.failed[b-80nivgbezf] {
    background: rgba(220, 53, 69, 0.12);
    color: #c82333;
}

.section-header.score[b-80nivgbezf] {
    background: rgba(255, 193, 7, 0.18);
    color: #8a6d00;
}

.count-badge[b-80nivgbezf] {
    margin-left: auto;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    background: rgba(12, 58, 88, 0.85);
    color: white;
}

/* Project grid */
.projects-grid[b-80nivgbezf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 14px;
}

.result-card[b-80nivgbezf] {
    position: relative;
    background: white;
    border-radius: 12px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.result-card:hover[b-80nivgbezf] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.result-card.success[b-80nivgbezf] {
    border-color: rgba(40, 167, 69, 0.35);
}

.result-card.failed[b-80nivgbezf] {
    border-color: rgba(220, 53, 69, 0.25);
}

.card-wrapper[b-80nivgbezf] {
    padding: 10px;
}

.card-wrapper.faded[b-80nivgbezf] {
    opacity: 0.8;
}

/* Badges */
.status-badge[b-80nivgbezf] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.status-badge.success[b-80nivgbezf] {
    background: #28a745;
}

.status-badge.failed[b-80nivgbezf] {
    background: #dc3545;
}

.score-badge[b-80nivgbezf] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    background: #0c3a58;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.boost-badge[b-80nivgbezf] {
    position: absolute;
    top: 48px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.boost-badge.positive[b-80nivgbezf] {
    background: #ffc107;
    color: #4a3200;
}

.boost-badge.negative[b-80nivgbezf] {
    background: #dc3545;
}

/* Score breakdown */
.breakdown-card[b-80nivgbezf] {
    background: white;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.breakdown-items[b-80nivgbezf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.breakdown-item[b-80nivgbezf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
}

.breakdown-item.positive[b-80nivgbezf] {
    background: rgba(40, 167, 69, 0.08);
}

.breakdown-item.negative[b-80nivgbezf] {
    background: rgba(220, 53, 69, 0.08);
}

.points-badge[b-80nivgbezf] {
    flex-shrink: 0;
    min-width: 48px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    color: white;
}

.points-badge.positive[b-80nivgbezf] {
    background: #28a745;
}

.points-badge.negative[b-80nivgbezf] {
    background: #dc3545;
}

.breakdown-item .reason[b-80nivgbezf] {
    color: #2c3e50;
    font-size: 0.95rem;
}

.breakdown-total[b-80nivgbezf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border-top: 2px solid #e9ecef;
}

.total-badge[b-80nivgbezf] {
    flex-shrink: 0;
    min-width: 56px;
    text-align: center;
    padding: 7px 12px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.05rem;
    color: white;
}

.total-badge.positive[b-80nivgbezf] {
    background: #0c3a58;
}

.total-badge.negative[b-80nivgbezf] {
    background: #dc3545;
}

.total-label[b-80nivgbezf] {
    font-weight: 700;
    color: #0c3a58;
    font-size: 1rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .result-card:hover[b-80nivgbezf] {
        transform: none;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .results-section[b-80nivgbezf] {
        padding: 12px;
        border-radius: 12px;
    }

    .projects-grid[b-80nivgbezf] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .section-header[b-80nivgbezf] {
        font-size: 0.9rem;
        padding: 8px 12px;
    }

    .status-badge[b-80nivgbezf],
    .score-badge[b-80nivgbezf] {
        font-size: 0.72rem;
        padding: 5px 10px;
    }

    .boost-badge[b-80nivgbezf] {
        top: 44px;
        font-size: 0.72rem;
    }

    .breakdown-item .reason[b-80nivgbezf] {
        font-size: 0.85rem;
    }
}
/* _content/Municipality16.Shared/Components/Pages/GamePages/BoostResultsRW.razor.rz.scp.css */
/* ================================
       BOOST RESULTS RW
       Responsive design inspired by GameParticipantsRW
       ================================ */

    .boost-results-rw[b-p7ko7uvc4x] {
        width: 100%;
    }

    /* Empty State */
    .empty-state[b-p7ko7uvc4x] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
    }

    .empty-state i[b-p7ko7uvc4x] {
        font-size: 4rem;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-state p[b-p7ko7uvc4x] {
        margin: 0;
        font-size: 1rem;
    }

    /* Results Summary */
    .results-summary-rw[b-p7ko7uvc4x] {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .summary-item[b-p7ko7uvc4x] {
        flex: 1;
        min-width: 140px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        border-radius: 12px;
    }

    .summary-item.success[b-p7ko7uvc4x] {
        background: rgba(40, 167, 69, 0.15);
        border: 1px solid rgba(40, 167, 69, 0.3);
    }

    .summary-item.failed[b-p7ko7uvc4x] {
        background: rgba(220, 53, 69, 0.15);
        border: 1px solid rgba(220, 53, 69, 0.3);
    }

    .summary-item i[b-p7ko7uvc4x] {
        font-size: 1.5rem;
    }

    .summary-item.success i[b-p7ko7uvc4x] { color: #28a745; }
    .summary-item.failed i[b-p7ko7uvc4x] { color: #dc3545; }

    .summary-item .count[b-p7ko7uvc4x] {
        font-size: 2rem;
        font-weight: 700;
        color: white;
    }

    .summary-item .label[b-p7ko7uvc4x] {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.8);
    }

    /* Results Section */
    .results-section[b-p7ko7uvc4x] {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 24px;
    }

    .result-row-section[b-p7ko7uvc4x] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .row-header[b-p7ko7uvc4x] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: white;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .row-header.success[b-p7ko7uvc4x] {
        color: #5ed17b;
    }

    .row-header.failed[b-p7ko7uvc4x] {
        color: #ff7b8a;
    }

    .section-header[b-p7ko7uvc4x] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 12px;
        margin-bottom: 16px;
        font-weight: 600;
    }

    .section-header.success[b-p7ko7uvc4x] {
        background: rgba(40, 167, 69, 0.15);
        color: #28a745;
    }

    .section-header.failed[b-p7ko7uvc4x] {
        background: rgba(220, 53, 69, 0.15);
        color: #dc3545;
    }

    .section-header.score[b-p7ko7uvc4x] {
        background: rgba(255, 193, 7, 0.15);
        color: #ffc107;
    }

    .section-header i[b-p7ko7uvc4x] {
        font-size: 1rem;
    }

    .section-header .badge[b-p7ko7uvc4x] {
        margin-left: auto;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.8rem;
        background: rgba(255, 255, 255, 0.15);
        color: white;
    }

    /* Projects list */
    .projects-grid[b-p7ko7uvc4x] {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: stretch;
    }

    /* Result Card */
    .result-card[b-p7ko7uvc4x] {
        display: flex;
        flex: 1 1 230px;
        flex-direction: column;
        max-width: 320px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        transition: transform 0.2s ease;
    }

    .result-card:hover[b-p7ko7uvc4x] {
        transform: translateY(-2px);
    }

    .result-card.success[b-p7ko7uvc4x] {
        border-left-color: rgba(40, 167, 69, 0.8);
    }

    .result-card.failed[b-p7ko7uvc4x] {
        border-left-color: rgba(220, 53, 69, 0.75);
    }

    .result-meta-row[b-p7ko7uvc4x] {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 8px;
        flex-wrap: wrap;
        min-width: 0;
    }

    /* Status Badge */
    .status-badge[b-p7ko7uvc4x] {
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .status-badge.success[b-p7ko7uvc4x] {
        background: #28a745;
        color: white;
    }

    .status-badge.failed[b-p7ko7uvc4x] {
        background: #dc3545;
        color: white;
    }

    /* Score Badge */
    .score-badge[b-p7ko7uvc4x] {
        background: rgba(0, 0, 0, 0.5);
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: white;
    }

    .score-badge .divider[b-p7ko7uvc4x] {
        opacity: 0.6;
        margin: 0 2px;
    }

    /* Boost Badge */
    .boost-badge[b-p7ko7uvc4x] {
        margin-left: 0;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 0.7rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .boost-badge.positive[b-p7ko7uvc4x] {
        background: rgba(255, 193, 7, 0.9);
        color: #212529;
    }

    .boost-badge.negative[b-p7ko7uvc4x] {
        background: rgba(220, 53, 69, 0.9);
        color: white;
    }

    /* Card Wrapper */
    .card-wrapper[b-p7ko7uvc4x] {
        margin-top: 0;
        min-width: 0;
    }

    .card-wrapper.faded[b-p7ko7uvc4x] {
        opacity: 0.75;
    }

    /* Score Breakdown Section */
    .score-breakdown-section[b-p7ko7uvc4x] {
        margin-top: 24px;
    }

    .breakdown-card[b-p7ko7uvc4x] {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 16px;
        border: 1px solid rgba(255, 193, 7, 0.2);
    }

    .breakdown-items[b-p7ko7uvc4x] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
    }

    .breakdown-item[b-p7ko7uvc4x] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-radius: 10px;
    }

    .breakdown-item.positive[b-p7ko7uvc4x] {
        background: rgba(40, 167, 69, 0.1);
    }

    .breakdown-item.negative[b-p7ko7uvc4x] {
        background: rgba(220, 53, 69, 0.1);
    }

    .points-badge[b-p7ko7uvc4x] {
        min-width: 50px;
        padding: 4px 10px;
        border-radius: 8px;
        text-align: center;
        font-weight: 700;
        font-size: 0.85rem;
    }

    .points-badge.positive[b-p7ko7uvc4x] {
        background: #28a745;
        color: white;
    }

    .points-badge.negative[b-p7ko7uvc4x] {
        background: #dc3545;
        color: white;
    }

    .breakdown-item .reason[b-p7ko7uvc4x] {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.85rem;
    }

    .breakdown-total[b-p7ko7uvc4x] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .total-badge[b-p7ko7uvc4x] {
        padding: 8px 16px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 1.1rem;
    }

    .total-badge.positive[b-p7ko7uvc4x] {
        background: #1a5c7a;
        color: white;
    }

    .total-badge.negative[b-p7ko7uvc4x] {
        background: #dc3545;
        color: white;
    }

    .total-label[b-p7ko7uvc4x] {
        color: white;
        font-weight: 600;
    }

    /* ================================
       MOBILE RESPONSIVE
       ================================ */

    @media (max-width: 640px) {
        .result-card[b-p7ko7uvc4x] {
            flex-basis: 100%;
            max-width: 100%;
            align-items: stretch;
        }

        .result-meta-row[b-p7ko7uvc4x] {
            justify-content: flex-start;
            min-width: 0;
        }
    }

    @media (max-width: 768px) {
        .results-summary-rw[b-p7ko7uvc4x] {
            gap: 10px;
        }

        .summary-item[b-p7ko7uvc4x] {
            padding: 12px 14px;
            min-width: 130px;
        }

        .summary-item i[b-p7ko7uvc4x] {
            font-size: 1.2rem;
        }

        .summary-item .count[b-p7ko7uvc4x] {
            font-size: 1.5rem;
        }

        .summary-item .label[b-p7ko7uvc4x] {
            font-size: 0.75rem;
        }

        .section-header[b-p7ko7uvc4x] {
            padding: 10px 14px;
            font-size: 0.9rem;
        }

        .section-header .badge[b-p7ko7uvc4x] {
            padding: 3px 10px;
            font-size: 0.75rem;
        }

        .projects-grid[b-p7ko7uvc4x] {
            gap: 10px;
        }

        .result-card[b-p7ko7uvc4x] {
            padding: 8px;
        }

        .status-badge[b-p7ko7uvc4x] {
            font-size: 0.6rem;
            padding: 2px 6px;
        }

        .score-badge[b-p7ko7uvc4x] {
            font-size: 0.65rem;
            padding: 2px 6px;
        }

        .boost-badge[b-p7ko7uvc4x] {
            font-size: 0.6rem;
            padding: 2px 5px;
        }

        .breakdown-item[b-p7ko7uvc4x] {
            padding: 8px 10px;
        }

        .points-badge[b-p7ko7uvc4x] {
            min-width: 42px;
            font-size: 0.75rem;
            padding: 3px 8px;
        }

        .breakdown-item .reason[b-p7ko7uvc4x] {
            font-size: 0.8rem;
        }

        .breakdown-total[b-p7ko7uvc4x] {
            padding-top: 10px;
        }

        .total-badge[b-p7ko7uvc4x] {
            padding: 6px 12px;
            font-size: 1rem;
        }
    }

    @media (max-width: 480px) {
        .empty-state[b-p7ko7uvc4x] {
            padding: 30px 12px;
        }

        .empty-state i[b-p7ko7uvc4x] {
            font-size: 2.5rem;
            margin-bottom: 12px;
        }

        .empty-state p[b-p7ko7uvc4x] {
            font-size: 0.9rem;
        }

        .results-summary-rw[b-p7ko7uvc4x] {
            flex-direction: column;
            gap: 8px;
        }

        .summary-item[b-p7ko7uvc4x] {
            min-width: 100%;
            padding: 10px 12px;
        }

        .summary-item i[b-p7ko7uvc4x] {
            font-size: 1.1rem;
        }

        .summary-item .count[b-p7ko7uvc4x] {
            font-size: 1.4rem;
        }

        .summary-item .label[b-p7ko7uvc4x] {
            font-size: 0.7rem;
        }

        .section-header[b-p7ko7uvc4x] {
            padding: 8px 12px;
            font-size: 0.85rem;
        }

        .section-header i[b-p7ko7uvc4x] {
            font-size: 0.9rem;
        }

        .section-header .badge[b-p7ko7uvc4x] {
            padding: 2px 8px;
            font-size: 0.7rem;
        }

        /* Single column on mobile to fit attributes */
        .projects-grid[b-p7ko7uvc4x] {
            gap: 10px;
        }

        .result-card[b-p7ko7uvc4x] {
            padding: 6px;
        }

        .status-badge[b-p7ko7uvc4x] {
            font-size: 0.55rem;
            padding: 2px 5px;
        }

        .score-badge[b-p7ko7uvc4x] {
            font-size: 0.6rem;
            padding: 2px 5px;
        }

        .boost-badge[b-p7ko7uvc4x] {
            font-size: 0.55rem;
            padding: 1px 4px;
        }

        .card-wrapper[b-p7ko7uvc4x] {
            margin-top: 0;
        }

        .boost-badge[b-p7ko7uvc4x] {
            margin-left: 0;
        }

        .breakdown-card[b-p7ko7uvc4x] {
            padding: 10px;
        }

        .breakdown-items[b-p7ko7uvc4x] {
            gap: 6px;
        }

        .breakdown-item[b-p7ko7uvc4x] {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
            padding: 6px 8px;
        }

        .points-badge[b-p7ko7uvc4x] {
            min-width: 40px;
            font-size: 0.7rem;
            padding: 2px 6px;
        }

        .breakdown-item .reason[b-p7ko7uvc4x] {
            font-size: 0.75rem;
        }

        .breakdown-total[b-p7ko7uvc4x] {
            flex-direction: column-reverse;
            align-items: flex-end;
            gap: 6px;
            padding-top: 8px;
        }

        .total-badge[b-p7ko7uvc4x] {
            padding: 5px 10px;
            font-size: 0.95rem;
        }

        .total-label[b-p7ko7uvc4x] {
            font-size: 0.85rem;
        }
    }

    /* Extra small devices - single column */
    @media (max-width: 375px) {
        .summary-item[b-p7ko7uvc4x] {
            padding: 8px 10px;
        }

        .summary-item .count[b-p7ko7uvc4x] {
            font-size: 1.2rem;
        }

        .section-header[b-p7ko7uvc4x] {
            padding: 6px 10px;
            font-size: 0.8rem;
        }

        /* Keep single column on very small screens */
        .projects-grid[b-p7ko7uvc4x] {
            gap: 8px;
        }

        .result-card[b-p7ko7uvc4x] {
            padding: 6px;
        }

        .status-badge[b-p7ko7uvc4x],
        .score-badge[b-p7ko7uvc4x],
        .boost-badge[b-p7ko7uvc4x] {
            font-size: 0.55rem;
        }
    }

    /* Landscape mode */
    @media (max-height: 500px) and (orientation: landscape) {
        .results-summary-rw[b-p7ko7uvc4x] {
            flex-direction: row;
        }

        .summary-item[b-p7ko7uvc4x] {
            min-width: 140px;
            padding: 8px 10px;
        }

        .empty-state[b-p7ko7uvc4x] {
            padding: 20px 15px;
        }

        .empty-state i[b-p7ko7uvc4x] {
            font-size: 2rem;
        }
    }

    /* Touch-friendly improvements */
    @media (hover: none) and (pointer: coarse) {
        .result-card:hover[b-p7ko7uvc4x] {
            transform: none;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/GameBoost.razor.rz.scp.css */
.boost-interface[b-n8xsm2z6l2] {
    background: #0c3a58;
    min-height: 100vh;
}

.score-points-col[b-n8xsm2z6l2] {
    width: 100px;
}

/* Unified PlayerWallet wrapper */
.player-wallet-wrapper[b-n8xsm2z6l2] {
    padding: 0;
}

.idea-card[b-n8xsm2z6l2] {
    transition: all 0.3s ease;
    border-radius: 12px;
    min-height: 200px;
    position: relative;
    cursor: pointer;
}

.idea-card:hover[b-n8xsm2z6l2] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.idea-card.can-drop[b-n8xsm2z6l2] {
    border: 2px dashed var(--color-warning);
    background: rgba(255, 193, 7, 0.1);
}

.boost-card-container[b-n8xsm2z6l2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.boost-card[b-n8xsm2z6l2] {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 10px;
    width: 120px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    background: transparent;
    border: none;
}

.boost-card-label[b-n8xsm2z6l2] {
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 120px;
}

.boost-card-label.disabled[b-n8xsm2z6l2] {
    opacity: 0.5;
    color: #a0a0a0;
}

.boost-card-label.selected-label[b-n8xsm2z6l2],
.boost-card.selected + .boost-card-label[b-n8xsm2z6l2] {
    background: rgba(26, 92, 122, 0.3);
    border: 1px solid rgba(26, 92, 122, 0.5);
}

.boost-card-label.boost-used[b-n8xsm2z6l2] {
    color: #28a745;
    font-weight: 700;
}

.boost-card-label.boost-rejected[b-n8xsm2z6l2] {
    color: #ff7b86;
}

.boost-card-label.boost-pending[b-n8xsm2z6l2] {
    color: #ffc107;
}

.boost-card-label.boost-staged[b-n8xsm2z6l2] {
    color: #57d5e8;
    font-weight: 700;
}

.boost-card-label.historically-used[b-n8xsm2z6l2] {
    color: lightgray;
}

.boost-tool-status[b-n8xsm2z6l2] {
    font-weight: 600;
}

.boost-card:hover[b-n8xsm2z6l2] {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.boost-card.selected[b-n8xsm2z6l2] {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(26, 92, 122, 0.6));
}

.boost-card.used[b-n8xsm2z6l2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.boost-icon[b-n8xsm2z6l2] {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.boost-value[b-n8xsm2z6l2] {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.boost-positive[b-n8xsm2z6l2] {
    background: var(--success-color);
}

.boost-negative[b-n8xsm2z6l2] {
    background: var(--success-color);
}

.placed-boost[b-n8xsm2z6l2] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    z-index: 10;
    background: #ffffff;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.placed-boost-note[b-n8xsm2z6l2] {
    display: block;
    font-size: 10px;
    opacity: 0.82;
}

.placed-boost.boost-approved.boost-positive[b-n8xsm2z6l2] {
    border: 2px solid #28a745;
    background: rgba(40, 167, 69, 0.16);
}

.placed-boost.boost-approved.boost-negative[b-n8xsm2z6l2] {
    border: 2px solid #dc3545;
    background: rgba(220, 53, 69, 0.16);
}

.placed-boost.boost-pending-approval[b-n8xsm2z6l2],
.placed-boost.boost-submitted[b-n8xsm2z6l2] {
    border: 2px dashed currentColor;
    background: rgba(255, 193, 7, 0.16);
    color: #ffc107;
}

.placed-boost.boost-pending-approval.boost-positive[b-n8xsm2z6l2],
.placed-boost.boost-submitted.boost-positive[b-n8xsm2z6l2] {
    border-color: #28a745;
}

.placed-boost.boost-pending-approval.boost-negative[b-n8xsm2z6l2],
.placed-boost.boost-submitted.boost-negative[b-n8xsm2z6l2] {
    border-color: #dc3545;
}

/* Výrazný tag pro umístěné (staged) boosty na projektech */
.staged-boost-tag[b-n8xsm2z6l2] {
    border: 3px solid #fff !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    min-width: 120px;
    text-align: center;
}

/* Kladný boost - zelená */
.staged-boost-tag.staged-positive[b-n8xsm2z6l2] {
    background: #28a745 !important;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12), 0 0 0 3px rgba(40, 167, 69, 0.4) !important;
}

/* Záporný boost - červená */
.staged-boost-tag.staged-negative[b-n8xsm2z6l2] {
    background: #dc3545 !important;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12), 0 0 0 3px rgba(253, 126, 20, 0.4) !important;
}

.staged-indicator[b-n8xsm2z6l2] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.staged-indicator i[b-n8xsm2z6l2] {
    margin-right: 4px;
}

.staged-tool-name[b-n8xsm2z6l2] {
    display: block;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.staged-hint[b-n8xsm2z6l2] {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.65rem;
    margin-top: 3px;
    font-weight: 500;
}

.staged-boost-tag:hover[b-n8xsm2z6l2] {
    animation: none;
    transform: scale(1.05);
    box-shadow: 0 6px 30px rgba(220, 53, 69, 0.6), 0 0 0 3px rgba(220, 53, 69, 0.4) !important;
    background: #dc3545 !important;
}

.staged-boost-tag:hover .staged-indicator[b-n8xsm2z6l2] {
    background: rgba(255, 255, 255, 0.3);
}

.staged-boost-tag:hover .staged-hint[b-n8xsm2z6l2] {
    color: white;
    font-weight: 600;
}

.phase-header[b-n8xsm2z6l2] {
    color: white;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.boost-selection[b-n8xsm2z6l2] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.boost-card.boost-disabled[b-n8xsm2z6l2] {
    opacity: 0.4;
    filter: grayscale(70%) brightness(0.8);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.boost-card.boost-disabled:hover[b-n8xsm2z6l2] {
    transform: none !important;
    box-shadow: none !important;
}

.boost-card.boost-disabled .boost-icon[b-n8xsm2z6l2] {
    opacity: 0.5;
    filter: grayscale(100%);
}

.boost-card.boost-disabled h6[b-n8xsm2z6l2] {
    color: #6c757d !important;
}

.boost-card.boost-disabled .boost-value[b-n8xsm2z6l2] {
    color: #6c757d !important;
    opacity: 0.6;
}

/* USED TOOLS - Successful completion styling */
.boost-card.boost-used[b-n8xsm2z6l2] {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
    border: 2px solid #28a745;
    border-radius: 10px;
}

.boost-card.boost-used[b-n8xsm2z6l2]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(40, 167, 69, 0.1);
    pointer-events: none;
    border-radius: 8px;
}

.boost-card.boost-used:hover[b-n8xsm2z6l2] {
    transform: none !important;
}

/* REJECTED TOOLS - Failed/declined styling */
.boost-card.boost-rejected[b-n8xsm2z6l2] {
    opacity: 0.5;
    filter: grayscale(80%) brightness(0.7);
    cursor: not-allowed;
    position: relative;
    border: 2px solid #dc3545;
    border-radius: 10px;
}

.boost-card.boost-rejected[b-n8xsm2z6l2]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(220, 53, 69, 0.15);
    pointer-events: none;
    border-radius: 8px;
}

.boost-card.boost-rejected:hover[b-n8xsm2z6l2] {
    transform: none !important;
}

/* PENDING TOOLS - Waiting styling */
.boost-card.boost-pending[b-n8xsm2z6l2] {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
    border: 2px dashed #ffc107;
    border-radius: 10px;
}

.boost-card.boost-pending[b-n8xsm2z6l2]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 193, 7, 0.1);
    pointer-events: none;
    border-radius: 8px;
}

.boost-card.boost-pending:hover[b-n8xsm2z6l2] {
    transform: none !important;
}

/* STAGED TOOLS - Placed on project but not yet submitted */
.boost-card.boost-staged[b-n8xsm2z6l2] {
    opacity: 1;
    cursor: pointer;
    position: relative;
    border: 4px solid #1a5c7a;
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(26, 92, 122, 0.6), 0 0 0 3px rgba(26, 92, 122, 0.3);
    animation: staged-pulse-b-n8xsm2z6l2 2s ease-in-out infinite;
}

@keyframes staged-pulse-b-n8xsm2z6l2 {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(26, 92, 122, 0.6), 0 0 0 3px rgba(26, 92, 122, 0.3);
        border-color: #1a5c7a;
    }
    50% {
        box-shadow: 0 0 0 3px rgba(26, 92, 122, 0.9), 0 0 0 3px rgba(26, 92, 122, 0.5);
        border-color: #28a745;
    }
}

.boost-card.boost-staged[b-n8xsm2z6l2]::before {
    content: 'UMÍSTĚNO';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a5c7a;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.boost-card.boost-staged[b-n8xsm2z6l2]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 92, 122, 0.25);
    pointer-events: none;
    border-radius: 8px;
}

.boost-card.boost-staged:hover[b-n8xsm2z6l2] {
    transform: scale(1.05) !important;
    animation: none;
    box-shadow: 0 0 0 3px rgba(26, 92, 122, 1), 0 0 0 3px rgba(26, 92, 122, 0.6);
}

.boost-card.boost-disabled.selected[b-n8xsm2z6l2] {
    filter: grayscale(70%) brightness(0.8);
}

.boost-card.boost-disabled.used[b-n8xsm2z6l2] {
    filter: grayscale(70%) brightness(0.8);
}

.boost-card.historically-used[b-n8xsm2z6l2] {
    opacity: 0.3;
    filter: grayscale(100%) brightness(0.6);
    cursor: not-allowed;
    position: relative;
}

.boost-card.historically-used[b-n8xsm2z6l2]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(220, 53, 69, 0.1);
    pointer-events: none;
}

.voting-complete[b-n8xsm2z6l2] {
    background: rgba(40, 167, 69, 0.1);
    border: 2px solid var(--success-color);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    color: white;
}

.project-card-wrapper[b-n8xsm2z6l2] {
    position: relative;
    transition: all 0.3s ease;
}

.project-card-wrapper.can-drop[b-n8xsm2z6l2] {
    animation: pulse-b-n8xsm2z6l2 1.5s infinite;
}

.project-card-wrapper.has-boost[b-n8xsm2z6l2]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid #1a5c7a;
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

/* Vlastní návrhy - zvýraznění */
.project-card-wrapper.my-project[b-n8xsm2z6l2]::before {
    content: '★';
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f4c737;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.project-card-wrapper.my-project[b-n8xsm2z6l2] {
    background: rgba(244, 199, 55, 0.08);
    border: 2px solid rgba(244, 199, 55, 0.3);
    border-radius: 12px;
}

/* Ensure the project card is positioned relatively for absolute children */
.idea-card[b-n8xsm2z6l2] {
    transition: all 0.3s ease;
    border-radius: 12px;
    min-height: 200px;
    position: relative;
    cursor: pointer;
}

/* Projects Header s Confirm Button - GameBoost */
.projects-header-with-confirm[b-n8xsm2z6l2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
    flex-wrap: wrap;
}

.projects-title[b-n8xsm2z6l2] {
    color: white;
    margin: 0;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Confirm Button Styling - stejný jako v ostatních fázích */
.confirm-button-container[b-n8xsm2z6l2] {
    display: flex;
    align-items: center;
}

.btn-confirm-elegant[b-n8xsm2z6l2] {
    background: #28a745;
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    cursor: pointer;
}

.btn-confirm-elegant:hover:not(:disabled)[b-n8xsm2z6l2] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    background: #1e7e34;
}

.btn-confirm-elegant:active[b-n8xsm2z6l2] {
    transform: translateY(0);
}
.boost-tabs[b-n8xsm2z6l2] {
    display: inline-flex;
    background: var(--bs-light);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06) inset;
}

.boost-tab[b-n8xsm2z6l2] {
    position: relative;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    color: var(--bs-body-color);
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
    outline: none;
}

.boost-tab i[b-n8xsm2z6l2] { font-size: 1rem; }

.boost-tab:hover[b-n8xsm2z6l2] {
    background: rgba(0,0,0,.04);
}

.boost-tab:focus-visible[b-n8xsm2z6l2] {
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

/* Aktivní stavy */
.boost-tab.active[b-n8xsm2z6l2] {
    color: #fff;
    background: var(--bs-success);
    box-shadow: 0 2px 8px rgba(25,135,84,.3);
}

.boost-tab.danger.active[b-n8xsm2z6l2] {
    background: var(--bs-danger);
    box-shadow: 0 2px 8px rgba(220,53,69,.3);
}

.btn-confirm-elegant:disabled[b-n8xsm2z6l2] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-confirm-disabled[b-n8xsm2z6l2] {
    background: rgba(108, 117, 125, 0.3);
    border: 1px solid rgba(108, 117, 125, 0.5);
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: not-allowed;
}

/* Submitted - waiting for mentor */
.btn-submitted-waiting[b-n8xsm2z6l2] {
    background: #ffc107;
    border: none;
    color: #212529;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    animation: pulse-waiting-b-n8xsm2z6l2 2s infinite;
}

/* Completed - all approved by mentor */
.btn-completed-success[b-n8xsm2z6l2] {
    background: #28a745;
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

@keyframes pulse-waiting-b-n8xsm2z6l2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Responsive design pro GameBoost */
@media (max-width: 768px) {
    .projects-header-with-confirm[b-n8xsm2z6l2] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .projects-title[b-n8xsm2z6l2] {
        text-align: center;
    }

    .confirm-button-container[b-n8xsm2z6l2] {
        justify-content: center;
    }

    .btn-confirm-elegant[b-n8xsm2z6l2],
    .btn-confirm-disabled[b-n8xsm2z6l2],
    .btn-submitted-waiting[b-n8xsm2z6l2],
    .btn-completed-success[b-n8xsm2z6l2] {
        width: 100%;
        justify-content: center;
    }
}

.placed-boost[b-n8xsm2z6l2] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    z-index: 10;
}

.boost-positive[b-n8xsm2z6l2] {
    background: var(--success-color);
}

.boost-negative[b-n8xsm2z6l2] {
    background: var(--success-color);
}

.boost-rejected[b-n8xsm2z6l2] {
    background: #6c757d;
    text-decoration: line-through;
}

   

 

.horizontal-layout[b-n8xsm2z6l2] {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Opravuje výškové vyrovnání */
    gap: 20px;
}


@keyframes pulse-b-n8xsm2z6l2 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* Score Breakdown Styles */
.score-breakdown-container[b-n8xsm2z6l2] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.score-breakdown-table[b-n8xsm2z6l2] {
    margin-bottom: 0;
}

.score-breakdown-table th[b-n8xsm2z6l2] {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.score-breakdown-table td[b-n8xsm2z6l2] {
    vertical-align: middle;
}

.score-breakdown-table .table-success[b-n8xsm2z6l2] {
    background: rgba(40, 167, 69, 0.2) !important;
}

.score-breakdown-table .table-danger[b-n8xsm2z6l2] {
    background: rgba(220, 53, 69, 0.2) !important;
}

.score-breakdown-table .table-primary[b-n8xsm2z6l2] {
    background: rgba(26, 92, 122, 0.3) !important;
}

.score-breakdown-table tfoot tr td[b-n8xsm2z6l2] {
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    padding-top: 12px;
}
/* _content/Municipality16.Shared/Components/Pages/GamePages/GameBoostRW.razor.rz.scp.css */
.boost-interface[b-opw51w3701] {
        background: #0c3a58;
        min-height: 100vh;
        width: 100%;
        max-width: 100vw;
        overflow-x: clip; /* "hidden" establishes a scroll container and breaks position:sticky on .phase-header */
        box-sizing: border-box;
    }

    .score-points-col[b-opw51w3701] {
        width: 100px;
    }

    .boost-interface *[b-opw51w3701] {
        box-sizing: border-box;
    }

    /* Unified PlayerWallet wrapper */
    .player-wallet-wrapper[b-opw51w3701] {
        padding: 0;
    }

    .idea-card[b-opw51w3701] {
        min-height: clamp(150px, 20vh, 200px);
        position: relative;
        cursor: pointer;
    }

    .idea-card:hover[b-opw51w3701] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .idea-card.can-drop[b-opw51w3701] {
        border: 2px dashed var(--color-warning);
        background: rgba(255, 193, 7, 0.1);
    }

    .boost-card-container[b-opw51w3701] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(6px, 0.8vw, 8px);
    }

    .boost-card[b-opw51w3701] {
        cursor: pointer;
        width: clamp(90px, 12vw, 120px);
        height: clamp(110px, 15vw, 150px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: clamp(8px, 1vw, 10px);
        position: relative;
        background: transparent;
        border: none;
    }

    .boost-card-label[b-opw51w3701] {
        color: white;
        font-size: clamp(0.75rem, 1.6vw, 0.9rem);
        font-weight: 600;
        text-align: center;
        padding: clamp(3px, 0.5vh, 4px) clamp(6px, 0.8vw, 8px);
        background: rgba(255, 255, 255, 0.1);
        border-radius: clamp(6px, 0.8vw, 8px);
        min-width: clamp(90px, 12vw, 120px);
    }

    .boost-card-label.disabled[b-opw51w3701] {
        opacity: 0.5;
        color: #a0a0a0;
    }

    .boost-card-label.selected-label[b-opw51w3701],
    .boost-card.selected + .boost-card-label[b-opw51w3701] {
        background: rgba(26, 92, 122, 0.3);
        border: 1px solid rgba(26, 92, 122, 0.5);
    }

    .boost-card-label.boost-used[b-opw51w3701] {
        color: #28a745;
        font-weight: 700;
    }

    .boost-card-label.boost-rejected[b-opw51w3701],
    .boost-card-label.negative-mode.boost-staged[b-opw51w3701] {
        color: #ff7b86;
    }

    .boost-card-label.boost-pending[b-opw51w3701] {
        color: #ffc107;
    }

    .boost-card-label.boost-staged[b-opw51w3701] {
        color: #57d5e8;
        font-weight: 700;
    }

    .boost-card-label.historically-used[b-opw51w3701] {
        color: lightgray;
    }

    .boost-tool-status[b-opw51w3701] {
        font-weight: 600;
    }

    .boost-card.negative-mode.selected + .boost-card-label[b-opw51w3701] {
        background: rgba(220, 53, 69, 0.3);
        border: 1px solid rgba(220, 53, 69, 0.5);
    }

    .boost-card:hover[b-opw51w3701] {
    }

    /* Traces the actual brush-stroke silhouette with a solid line (via the
       #boost-brush-outline SVG filter, which dilates the image's alpha shape and
       fills it white) instead of drawing a rectangle or a soft drop-shadow glow. */
    .boost-card.selected[b-opw51w3701] {
        filter: url(#boost-brush-outline);
    }

    .boost-card.used[b-opw51w3701] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .boost-icon[b-opw51w3701] {
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
        margin-bottom: clamp(6px, 1vh, 10px);
    }

    @media (hover: none) {
        .idea-card:hover[b-opw51w3701],
        .boost-card:hover[b-opw51w3701] {
            transform: none;
        }
        .idea-card:active[b-opw51w3701] {
        }
        .boost-card:active[b-opw51w3701] {
        }
    }

    .boost-value[b-opw51w3701] {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
        font-size: 1.1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .boost-positive[b-opw51w3701] {
        background: var(--success-color);
    }

    .boost-negative[b-opw51w3701] {
        background: var(--danger-color, #dc3545);
    }

    .placed-boost[b-opw51w3701] {
        position: absolute;
        bottom: 10px;
        right: 10px;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 0.9rem;
        font-weight: bold;
        color: white;
        z-index: 10;
        background: #ffffff;
        color: #333;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Výrazný tag pro umístěné (staged) boosty na projektech */
    .staged-boost-tag[b-opw51w3701] {
        border: 3px solid #fff !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        min-width: 120px;
        text-align: center;
    }

    /* Kladný boost - zelená */
    .staged-boost-tag.staged-positive[b-opw51w3701] {
        background: #28a745 !important;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12), 0 0 0 3px rgba(40, 167, 69, 0.4) !important;
    }

    /* Záporný boost - červená */
    .staged-boost-tag.staged-negative[b-opw51w3701] {
        background: #dc3545 !important;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12), 0 0 0 3px rgba(253, 126, 20, 0.4) !important;
    }

    .staged-indicator[b-opw51w3701] {
        background: rgba(255, 255, 255, 0.25);
        color: white;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 4px;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-block;
    }

    .staged-indicator i[b-opw51w3701] {
        margin-right: 4px;
    }

    .staged-tool-name[b-opw51w3701] {
        display: block;
        color: white;
        font-weight: 600;
        font-size: 0.85rem;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .staged-hint[b-opw51w3701] {
        display: block;
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.65rem;
        margin-top: 3px;
        font-weight: 500;
    }

    .staged-boost-tag:hover[b-opw51w3701] {
        animation: none;
        box-shadow: 0 6px 30px rgba(220, 53, 69, 0.6), 0 0 0 3px rgba(220, 53, 69, 0.4) !important;
        background: #dc3545 !important;
    }

    .staged-boost-tag:hover .staged-indicator[b-opw51w3701] {
        background: rgba(255, 255, 255, 0.3);
    }

    .staged-boost-tag:hover .staged-hint[b-opw51w3701] {
        color: white;
        font-weight: 600;
    }

    /* ========== HEADER FÁZE ========== */
    .phase-header[b-opw51w3701] {
        background: rgba(12, 58, 88, 0.95);
        padding: clamp(12px, 2vh, 20px) clamp(15px, 3vw, 30px);
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        margin-bottom: clamp(12px, 2vh, 20px);
    }

    .phase-header[b-opw51w3701]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: clamp(2px, 0.5vh, 4px);
    }

    .phase-header-content[b-opw51w3701] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: clamp(8px, 1.5vw, 15px);
        position: relative;
        z-index: 1;
    }

    .phase-title[b-opw51w3701] {
        color: white;
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: clamp(6px, 1vw, 12px);
        flex: 1 1 260px;
        min-width: min(100%, 240px);
        justify-content: flex-end;
        text-align: right;
    }

    .phase-badge[b-opw51w3701] {
        background: rgba(255, 255, 255, 0.2);
        padding: clamp(4px, 0.8vh, 6px) clamp(10px, 1.5vw, 14px);
        border-radius: 12px;
        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
        font-weight: 600;
    }

    .user-info-badge[b-opw51w3701] {
        display: flex;
        align-items: center;
        gap: clamp(6px, 1vw, 10px);
        background: rgba(255, 255, 255, 0.15);
        padding: clamp(6px, 1vh, 8px) clamp(12px, 2vw, 16px);
        border-radius: 12px;
        color: white;
        font-weight: 600;
        font-size: clamp(0.75rem, 1.8vw, 1rem);
    }

    .phase-wallet-slot[b-opw51w3701] {
        display: flex;
        flex: 0 1 460px;
        justify-content: flex-start;
        min-width: min(100%, 260px);
    }

    .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact {
        width: fit-content;
        max-width: 100%;
        margin-left: 0;
    }
    .badge-secretary[b-opw51w3701] {
        background: #ffc107;
        color: #000;
        padding: clamp(3px, 0.5vh, 4px) clamp(8px, 1vw, 10px);
        border-radius: clamp(8px, 1vw, 10px);
        font-size: clamp(0.65rem, 1.3vw, 0.75rem);
        font-weight: 700;
        margin-left: 8px;
    }

    .boost-selection[b-opw51w3701] {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .boost-card.boost-disabled[b-opw51w3701] {
        opacity: 0.4;
        filter: grayscale(70%) brightness(0.8);
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

    .boost-card.boost-disabled:hover[b-opw51w3701] {
        transform: none !important;
        box-shadow: none !important;
    }

    .boost-card.boost-disabled .boost-icon[b-opw51w3701] {
        opacity: 0.5;
        filter: grayscale(100%);
    }

    .boost-card.boost-disabled h6[b-opw51w3701] {
        color: #6c757d !important;
    }

    .boost-card.boost-disabled .boost-value[b-opw51w3701] {
        color: #6c757d !important;
        opacity: 0.6;
    }

    /* USED TOOLS - Successful completion styling */
    .boost-card.boost-used[b-opw51w3701] {
        opacity: 0.7;
        cursor: not-allowed;
        position: relative;
        border: 2px solid #28a745;
        border-radius: 10px;
    }

    .boost-card.boost-used[b-opw51w3701]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(40, 167, 69, 0.1);
        pointer-events: none;
        border-radius: 8px;
    }

    .boost-card.boost-used:hover[b-opw51w3701] {
        transform: none !important;
    }

    /* REJECTED TOOLS - Failed/declined styling */
    .boost-card.boost-rejected[b-opw51w3701] {
        opacity: 0.5;
        filter: grayscale(80%) brightness(0.7);
        cursor: not-allowed;
        position: relative;
        border: 2px solid #dc3545;
        border-radius: 10px;
    }

    .boost-card.boost-rejected[b-opw51w3701]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(220, 53, 69, 0.15);
        pointer-events: none;
        border-radius: 8px;
    }

    .boost-card.boost-rejected:hover[b-opw51w3701] {
        transform: none !important;
    }

    /* PENDING TOOLS - Waiting styling */
    .boost-card.boost-pending[b-opw51w3701] {
        opacity: 0.6;
        cursor: not-allowed;
        position: relative;
        border: 2px dashed #ffc107;
        border-radius: 10px;
    }

    .boost-card.boost-pending[b-opw51w3701]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 193, 7, 0.1);
        pointer-events: none;
        border-radius: 8px;
    }

    .boost-card.boost-pending:hover[b-opw51w3701] {
        transform: none !important;
    }

    /* STAGED TOOLS - Placed on project but not yet submitted */
    /* Positive (support) staged - teal/cyan */
    .boost-card.boost-staged[b-opw51w3701] {
        opacity: 1;
        cursor: pointer;
        position: relative;
        border: 4px solid #1a5c7a;
        border-radius: 12px;
        box-shadow: 0 0 0 3px rgba(26, 92, 122, 0.6), 0 0 0 3px rgba(26, 92, 122, 0.3);
    }

    @keyframes staged-pulse-b-opw51w3701 {
        0%, 100% {
            box-shadow: 0 0 0 3px rgba(26, 92, 122, 0.6), 0 0 0 3px rgba(26, 92, 122, 0.3);
            border-color: #1a5c7a;
        }
        50% {
            box-shadow: 0 0 0 3px rgba(26, 92, 122, 0.9), 0 0 0 3px rgba(26, 92, 122, 0.5);
            border-color: #28a745;
        }
    }

    .boost-staged-label[b-opw51w3701] {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        background: #1a5c7a;
        color: white;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 4px;
        z-index: 10;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        white-space: nowrap;
    }

    .boost-card.boost-staged[b-opw51w3701]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(26, 92, 122, 0.25);
        pointer-events: none;
        border-radius: 8px;
    }

    .boost-card.boost-staged:hover[b-opw51w3701] {
        animation: none;
        box-shadow: 0 0 0 3px rgba(26, 92, 122, 1), 0 0 0 3px rgba(26, 92, 122, 0.6);
    }

    /* Negative (blockade) staged - red */
    .boost-card.negative-mode.boost-staged[b-opw51w3701] {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.6), 0 0 0 3px rgba(220, 53, 69, 0.3);
    }

    @keyframes staged-pulse-negative-b-opw51w3701 {
        0%, 100% {
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.6), 0 0 0 3px rgba(220, 53, 69, 0.3);
            border-color: #dc3545;
        }
        50% {
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.9), 0 0 0 3px rgba(220, 53, 69, 0.5);
            border-color: #e74c5c;
        }
    }

    .boost-card.negative-mode.boost-staged[b-opw51w3701]::after {
        background: rgba(220, 53, 69, 0.25);
    }

    .boost-card.negative-mode.boost-staged:hover[b-opw51w3701] {
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 1), 0 0 0 3px rgba(220, 53, 69, 0.6);
    }

    .boost-card.negative-mode .boost-staged-label[b-opw51w3701] {
        background: #dc3545;
    }

    .boost-card.boost-disabled.selected[b-opw51w3701] {
        filter: grayscale(70%) brightness(0.8);
    }

    .boost-card.boost-disabled.used[b-opw51w3701] {
        filter: grayscale(70%) brightness(0.8);
    }

    .boost-card.historically-used[b-opw51w3701] {
        opacity: 0.3;
        filter: grayscale(100%) brightness(0.6);
        cursor: not-allowed;
        position: relative;
    }

    .boost-card.historically-used[b-opw51w3701]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(220, 53, 69, 0.1);
        pointer-events: none;
    }

    .voting-complete[b-opw51w3701] {
        border: 2px solid rgba(255, 255, 255, 0.25);
        border-radius: 12px;
        padding: 30px;
        text-align: center;
        color: white;
    }

    .project-card-wrapper[b-opw51w3701] {
        position: relative;
    }

    .project-card-wrapper.can-drop[b-opw51w3701] {
    }

    .project-card-wrapper.my-project[b-opw51w3701] {
        background: rgba(244, 199, 55, 0.08);
        border: 2px solid rgba(244, 199, 55, 0.3);
        border-radius: 3px;
    }

    /* Ensure the project card is positioned relatively for absolute children */
    .idea-card[b-opw51w3701] {
        min-height: 200px;
        position: relative;
        cursor: pointer;
    }

    /* Projects Header s Confirm Button - GameBoost */
    .projects-header-with-confirm[b-opw51w3701] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        gap: 20px;
        flex-wrap: wrap;
    }

    .projects-title[b-opw51w3701] {
        color: white;
        margin: 0;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        padding-top: 24px;
    }

    /* ================================
       AVAILABLE PROJECTS GRID
       Responsive design inspired by GameParticipantsRW
       ================================ */

    .available-projects-section[b-opw51w3701] {
        margin-top: clamp(15px, 2vh, 20px);
    }

    /* Grid view - compact cards fitting on one screen */
    .projects-grid-compact[b-opw51w3701] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
        gap: clamp(10px, 1.5vw, 16px);
        width: 100%;
    }

    .project-item-wrapper[b-opw51w3701] {
        border-radius: clamp(10px, 1.5vw, 14px);
        overflow: hidden;
    }

    .project-item-wrapper:hover[b-opw51w3701] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    @media (hover: none) {
        .project-item-wrapper:hover[b-opw51w3701] {
            transform: none;
            box-shadow: none;
        }
        .project-item-wrapper:active[b-opw51w3701] {
        }
    }

    /* List view - compact cards centered like GameParticipantsRW */
    .projects-list-view[b-opw51w3701] {
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 1.2vh, 12px);
        align-items: center;
    }

    .projects-list-view .project-item-wrapper[b-opw51w3701] {
        max-width: 320px;
        width: 100%;
    }

    /* Segmented Control for view toggle */
    .segmented-control[b-opw51w3701] {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.1);
        border-radius: clamp(20px, 2.5vw, 25px);
        padding: clamp(4px, 0.5vw, 5px);
    }

    .segmented-control button[b-opw51w3701] {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        padding: clamp(6px, 0.8vh, 8px) clamp(15px, 2vw, 20px);
        border-radius: clamp(16px, 2vw, 20px);
        font-size: clamp(0.8rem, 1.6vw, 1rem);
        cursor: pointer;
    }

    .segmented-control button.active[b-opw51w3701] {
        background: white;
        color: #0c3a58;
        font-weight: 600;
    }

    .controls-header[b-opw51w3701] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: clamp(12px, 2vh, 20px);
        gap: clamp(12px, 2vw, 20px);
        flex-wrap: wrap;
    }

    /* Confirm Button Styling - stejný jako v ostatních fázích */
    .confirm-button-container[b-opw51w3701] {
        display: flex;
        align-items: center;
    }

    .btn-confirm-elegant[b-opw51w3701] {
        background: #28a745;
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        cursor: pointer;
    }

    .btn-confirm-elegant:hover:not(:disabled)[b-opw51w3701] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        background: #1e7e34;
    }

    .btn-confirm-elegant:active[b-opw51w3701] {
        background: #28a745;
        box-shadow: none;
        outline: none;
    }
    .boost-tabs[b-opw51w3701] {
        display: inline-flex;
        background: var(--bs-light);
        border-radius: 999px;
        padding: 4px;
        gap: 4px;
        box-shadow: 0 2px 10px rgba(0,0,0,.06) inset;
    }

    .boost-tab[b-opw51w3701] {
        position: relative;
        appearance: none;
        border: 0;
        background: transparent;
        padding: 8px 14px;
        border-radius: 999px;
        font-weight: 600;
        letter-spacing: .2px;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        color: var(--bs-body-color);
        outline: none;
    }

    .boost-tab i[b-opw51w3701] { font-size: 1rem; }

    .boost-tab:hover[b-opw51w3701] {
        background: rgba(0,0,0,.04);
    }

    .boost-tab:focus-visible[b-opw51w3701] {
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
    }

    /* Aktivní stavy */
    .boost-tab.active[b-opw51w3701] {
        color: #fff;
        background: var(--bs-success);
        box-shadow: 0 2px 8px rgba(25,135,84,.3);
    }

    .boost-tab.danger.active[b-opw51w3701] {
        background: var(--bs-danger);
        box-shadow: 0 2px 8px rgba(220,53,69,.3);
    }

    .btn-confirm-elegant:disabled[b-opw51w3701] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .btn-confirm-disabled[b-opw51w3701] {
        background: rgba(108, 117, 125, 0.3);
        border: 1px solid rgba(108, 117, 125, 0.5);
        color: rgba(255, 255, 255, 0.7);
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 500;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: not-allowed;
    }

    /* Submitted - waiting for mentor */
    .btn-submitted-waiting[b-opw51w3701] {
        background: #ffc107;
        border: none;
        color: #212529;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    /* Completed - all approved by mentor */
    .btn-completed-success[b-opw51w3701] {
        background: #28a745;
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    @keyframes pulse-waiting-b-opw51w3701 {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }

    /* Responsive design pro GameBoost */
    @media (max-width: 768px) {
        .projects-header-with-confirm[b-opw51w3701] {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .projects-title[b-opw51w3701] {
            text-align: center;
        }

        .confirm-button-container[b-opw51w3701] {
            justify-content: center;
        }

        .btn-confirm-elegant[b-opw51w3701],
        .btn-confirm-disabled[b-opw51w3701],
        .btn-submitted-waiting[b-opw51w3701],
        .btn-completed-success[b-opw51w3701] {
            width: 100%;
            justify-content: center;
        }
    }

    .placed-boost[b-opw51w3701] {
        position: absolute;
        bottom: 10px;
        right: 10px;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 0.9rem;
        font-weight: bold;
        color: white;
        z-index: 10;
    }

    .placed-boost-note[b-opw51w3701] {
        display: block;
        font-size: 10px;
        opacity: 0.82;
    }

    .placed-boost.boost-approved.boost-positive[b-opw51w3701] {
        border: 2px solid #28a745;
        background: rgba(40, 167, 69, 0.16);
    }

    .placed-boost.boost-approved.boost-negative[b-opw51w3701] {
        border: 2px solid #dc3545;
        background: rgba(220, 53, 69, 0.16);
    }

    .placed-boost.boost-pending-approval[b-opw51w3701],
    .placed-boost.boost-submitted[b-opw51w3701] {
        border: 2px dashed currentColor;
        background: rgba(255, 193, 7, 0.16);
        color: #ffc107;
    }

    .placed-boost.boost-pending-approval.boost-positive[b-opw51w3701],
    .placed-boost.boost-submitted.boost-positive[b-opw51w3701] {
        border-color: #28a745;
    }

    .placed-boost.boost-pending-approval.boost-negative[b-opw51w3701],
    .placed-boost.boost-submitted.boost-negative[b-opw51w3701] {
        border-color: #dc3545;
    }

    .boost-positive[b-opw51w3701] {
        background: var(--success-color);
    }

    .boost-negative[b-opw51w3701] {
        background: var(--success-color);
    }

    .boost-rejected[b-opw51w3701] {
        background: #6c757d;
        text-decoration: line-through;
    }

    /* Status strip below the card. The boost value + tool name already ride in the corner
       badge (rightInd/RightIndLabel), like the support card in the support phase; this strip
       only appears once there's an approval outcome (approved/rejected/pending) to report.
       It sits in normal flow (not an overlay) and spans the card's full width so it reads as
       a continuation of the card rather than a floating badge. */
    .boost-status-strip[b-opw51w3701] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        margin-top: -1px; /* sit flush against the card's bottom edge, no seam */
        padding: 6px 10px;
        border-radius: 0 0 3px 3px;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.15;
        color: #fff;
        background: rgba(33, 37, 41, 0.85);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    }

    .boost-status-strip.boost-status-approved[b-opw51w3701] { background: rgba(40, 167, 69, 0.92); }
    .boost-status-strip.boost-status-pending[b-opw51w3701]  { background: rgba(255, 193, 7, 0.96); color: #3a2f00; }
    .boost-status-strip.boost-status-rejected[b-opw51w3701] { background: rgba(108, 117, 125, 0.92); text-decoration: line-through; }

    .horizontal-layout[b-opw51w3701] {
        display: flex;
        justify-content: space-between;
        align-items: center; /* Opravuje výškové vyrovnání */
        gap: 20px;
    }


    @keyframes pulse-b-opw51w3701 {
        0% {
        }
        50% {
        }
        100% {
        }
    }
    
    /* Score Breakdown Styles */
    .score-breakdown-container[b-opw51w3701] {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 12px;
        padding: 20px;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .score-breakdown-table[b-opw51w3701] {
        margin-bottom: 0;
    }
    
    .score-breakdown-table th[b-opw51w3701] {
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    }
    
    .score-breakdown-table td[b-opw51w3701] {
        vertical-align: middle;
    }
    
    .score-breakdown-table .table-success[b-opw51w3701] {
        background: rgba(40, 167, 69, 0.2) !important;
    }
    
    .score-breakdown-table .table-danger[b-opw51w3701] {
        background: rgba(220, 53, 69, 0.2) !important;
    }
    
    .score-breakdown-table .table-primary[b-opw51w3701] {
        background: rgba(26, 92, 122, 0.3) !important;
    }
    
    .score-breakdown-table tfoot tr td[b-opw51w3701] {
        border-top: 2px solid rgba(255, 255, 255, 0.3);
        padding-top: 12px;
    }

    /* ================================
       RESPONSIVE MOBILE OPTIMIZATIONS
       Inspired by GameParticipantsRW
       ================================ */

    /* Mobile-first base adjustments */
    @media (max-width: 992px) {
        .boost-interface[b-opw51w3701] {
            padding: 12px;
        }

        .row.mb-3[b-opw51w3701] {
            margin-bottom: 1rem !important;
        }

        .col-lg-3[b-opw51w3701], .col-lg-9[b-opw51w3701] {
            padding-left: 8px;
            padding-right: 8px;
        }

        .projects-grid-compact[b-opw51w3701] {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
            gap: 12px;
        }
    }

    @media (max-width: 768px) {
        .boost-interface[b-opw51w3701] {
            padding: 8px;
        }

        .projects-grid-compact[b-opw51w3701] {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
            gap: 10px;
        }

        .controls-header[b-opw51w3701] {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .segmented-control[b-opw51w3701] {
            align-self: center;
        }

        /* Stack wallet and header vertically */
        .player-wallet-wrapper[b-opw51w3701] {
            margin-bottom: 12px;
        }

        .phase-header[b-opw51w3701] {
            padding: 14px;
            margin-bottom: 14px;
            border-radius: 12px;
        }

        .phase-header h2[b-opw51w3701] {
            font-size: 1.3rem;
        }

        .phase-header p[b-opw51w3701] {
            font-size: 0.85rem;
        }

        /* Boost selection area */
        .boost-selection[b-opw51w3701] {
            padding: 12px;
            border-radius: 12px;
            margin-bottom: 14px;
        }

        .boost-selection h5[b-opw51w3701] {
            font-size: 0.95rem;
            margin-bottom: 12px;
        }

        /* Boost cards - smaller on mobile */
        .boost-card[b-opw51w3701] {
            width: 90px;
            height: 115px;
        }

        .boost-card-label[b-opw51w3701] {
            font-size: 0.7rem;
            min-width: 90px;
        }

        .boost-value[b-opw51w3701] {
            width: 28px;
            height: 28px;
            font-size: 0.9rem;
        }

        /* Boost tabs */
        .boost-tabs[b-opw51w3701] {
            padding: 3px;
            gap: 3px;
        }

        .boost-tab[b-opw51w3701] {
            padding: 6px 10px;
            font-size: 0.85rem;
        }

        /* Projects grid */
        .row.g-3[b-opw51w3701] {
            gap: 10px !important;
        }

        .col-md-6.col-lg-4[b-opw51w3701] {
            padding: 4px;
        }

        /* Project cards smaller */
        .project-card-wrapper[b-opw51w3701] {
            margin-bottom: 8px;
        }

        .idea-card[b-opw51w3701] {
            min-height: 160px;
        }

        /* Placed boost tags */
        .placed-boost[b-opw51w3701] {
            padding: 4px 8px;
            font-size: 0.75rem;
            bottom: 6px;
            right: 6px;
        }

        .staged-boost-tag[b-opw51w3701] {
            min-width: 100px;
            padding: 6px 10px !important;
        }

        .staged-tool-name[b-opw51w3701] {
            font-size: 0.75rem;
        }

        .staged-hint[b-opw51w3701] {
            font-size: 0.6rem;
        }

        /* Voting complete section */
        .voting-complete[b-opw51w3701] {
            padding: 20px 16px;
            border-radius: 12px;
        }

        .voting-complete .display-1[b-opw51w3701] {
            font-size: 3rem;
        }

        .voting-complete h3[b-opw51w3701] {
            font-size: 1.2rem;
        }

        /* Score breakdown */
        .score-breakdown-container[b-opw51w3701] {
            padding: 14px;
        }

        .score-breakdown-table th[b-opw51w3701],
        .score-breakdown-table td[b-opw51w3701] {
            padding: 8px 10px;
            font-size: 0.85rem;
        }
    }

    @media (max-width: 480px) {
        .boost-interface[b-opw51w3701] {
            padding: 6px;
        }

        .container-fluid.px-3[b-opw51w3701] {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }

        .phase-header[b-opw51w3701] {
            padding: 12px;
        }

        .phase-header h2[b-opw51w3701] {
            font-size: 1.1rem;
        }

        .phase-header p[b-opw51w3701] {
            font-size: 0.8rem;
        }

        /* Projects grid - single column on small phones to fit attributes */
        .projects-grid-compact[b-opw51w3701] {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .controls-header[b-opw51w3701] {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }

        .segmented-control[b-opw51w3701] {
            width: 100%;
            justify-content: center;
        }

        .segmented-control button[b-opw51w3701] {
            padding: 5px 12px;
            font-size: 0.8rem;
            flex: 1;
        }

        /* Boost cards even smaller */
        .boost-card[b-opw51w3701] {
            width: 75px;
            height: 95px;
        }

        .boost-card-label[b-opw51w3701] {
            font-size: 0.65rem;
            min-width: 75px;
            padding: 2px 4px;
        }

        .boost-value[b-opw51w3701] {
            width: 24px;
            height: 24px;
            font-size: 0.75rem;
            top: 3px;
            right: 3px;
        }

        .boost-selection[b-opw51w3701] {
            padding: 10px;
        }

        .boost-selection h5[b-opw51w3701] {
            font-size: 0.85rem;
        }

        /* Tabs smaller */
        .boost-tab[b-opw51w3701] {
            padding: 5px 8px;
            font-size: 0.75rem;
        }

        .boost-tab i[b-opw51w3701] {
            font-size: 0.85rem;
        }

        /* Projects grid single column on very small */
        .col-md-6.col-lg-4[b-opw51w3701] {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .idea-card[b-opw51w3701] {
            min-height: 140px;
        }

        /* Buttons */
        .btn-confirm-elegant[b-opw51w3701],
        .btn-confirm-disabled[b-opw51w3701],
        .btn-submitted-waiting[b-opw51w3701],
        .btn-completed-success[b-opw51w3701] {
            padding: 10px 16px;
            font-size: 0.85rem;
        }

        /* Placed boost smaller */
        .placed-boost[b-opw51w3701] {
            padding: 3px 6px;
            font-size: 0.7rem;
        }

        .staged-boost-tag[b-opw51w3701] {
            min-width: 80px;
            padding: 5px 8px !important;
            border-width: 2px !important;
        }

        /* Voting complete */
        .voting-complete[b-opw51w3701] {
            padding: 16px 12px;
        }

        .voting-complete .display-1[b-opw51w3701] {
            font-size: 2.5rem;
        }

        .voting-complete h3[b-opw51w3701] {
            font-size: 1rem;
        }

        .voting-complete .lead[b-opw51w3701] {
            font-size: 0.85rem;
        }

        .score-breakdown-container[b-opw51w3701] {
            padding: 10px;
        }

        .score-breakdown-table th[b-opw51w3701],
        .score-breakdown-table td[b-opw51w3701] {
            padding: 6px 8px;
            font-size: 0.8rem;
        }
    }

    /* Touch-friendly improvements */
    @media (hover: none) and (pointer: coarse) {
        .boost-card:hover[b-opw51w3701] {
            transform: none;
        }

        .boost-card:active[b-opw51w3701] {
        }

        .idea-card:hover[b-opw51w3701] {
            transform: none;
            box-shadow: none;
        }

        .project-card-wrapper.can-drop:active[b-opw51w3701] {
        }

        .btn-confirm-elegant:hover:not(:disabled)[b-opw51w3701] {
            transform: none;
        }

        .btn-confirm-elegant:active:not(:disabled)[b-opw51w3701] {
        }
    }

    /* Landscape mobile adjustments */
    @media (max-height: 500px) and (orientation: landscape) {
        .phase-header[b-opw51w3701] {
            padding: 10px;
        }

        .phase-header h2[b-opw51w3701] {
            font-size: 1rem;
            margin-bottom: 4px;
        }

        .voting-complete[b-opw51w3701] {
            padding: 15px;
        }

        .voting-complete .display-1[b-opw51w3701] {
            font-size: 2rem;
            margin-bottom: 8px !important;
        }
    }

    /* Align project card layout with GameParticipantsRW: wrappers must not frame or crop cards. */
    .boost-interface[b-opw51w3701] {
        background: #0c3a58;
        padding: 0;
    }

    .phase-header[b-opw51w3701] {
        margin-bottom: 0;
    }

    .projects-grid-compact[b-opw51w3701] {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 280px));
        justify-content: center;
        align-items: start;
    }

    .project-item-wrapper[b-opw51w3701] {
        width: 100%;
        max-width: 280px;
        aspect-ratio: 1 / 1;
        border-radius: 3px;
        overflow: visible;
        background: transparent;
    }

    .project-item-wrapper:hover[b-opw51w3701] {
        box-shadow: none;
    }

    .project-item-wrapper[b-opw51w3701]  .project-card,
    .project-item-wrapper[b-opw51w3701]  .idea-card {
        height: 100%;
    }

    /* Suppress the shared green "selected" highlight from ProjectCard/IdeaCard on this page;
       here .idea-card is used to mark a placed boost, not an active selection. */
    .project-item-wrapper[b-opw51w3701]  .project-card.selected .idea-card,
    .project-item-wrapper[b-opw51w3701]  .idea-card.is-selected {
        border-color: inherit !important;
        box-shadow: none !important;
    }

    /* Let the grid cell grow past its square shape when a status strip is attached below
       the card, instead of clipping/overlapping the row beneath it. The card itself still
       renders at its own aspect-ratio-driven size regardless. */
    .project-item-wrapper.has-status-strip[b-opw51w3701] {
        aspect-ratio: auto;
    }

    .projects-list-view .project-item-wrapper[b-opw51w3701] {
        aspect-ratio: auto;
        max-width: 320px;
    }

    @media (max-width: 480px) {
        .phase-header[b-opw51w3701] {
            border-radius: 0;
        }
    }

    @media (max-width: 768px) {
        .phase-header-content[b-opw51w3701] {
            align-items: stretch;
        }

        .phase-title[b-opw51w3701],
        .phase-wallet-slot[b-opw51w3701] {
            width: 100%;
            flex-basis: 100%;
            justify-content: center;
        }

        .phase-wallet-slot[b-opw51w3701] {
            min-width: 0;
        }

        .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact {
            width: 100%;
            margin-left: 0;
        }
    }

    @media (max-width: 1023px) {
        .phase-header[b-opw51w3701] {
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 7px 10px;
            margin-bottom: 0;
        }

        .phase-header-content[b-opw51w3701] {
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0;
        }

        .phase-title[b-opw51w3701] {
            display: none;
        }

        .phase-wallet-slot[b-opw51w3701] {
            width: 100%;
            min-width: 0;
            flex: 1 1 100%;
            justify-content: center;
        }

        .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact {
            width: auto;
            max-width: calc(100vw - 20px);
            margin: 0 auto;
        }

        .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact .wallet-mobile-summary {
            width: fit-content;
            min-height: 38px;
            justify-content: center;
            gap: 7px;
            margin: 0 auto;
        }

        .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact .mobile-role-avatar {
            width: 30px;
            height: 30px;
            border-radius: 8px;
        }

        .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact .mobile-role-name {
            max-width: 42vw;
            font-size: 0.92rem;
            text-align: center;
        }

        .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact .mobile-preferences {
            gap: 4px;
        }

        .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact .mobile-preference-badge,
        .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact .mobile-secretary-badge {
            width: 24px;
            height: 24px;
        }

        .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact .mobile-preference-badge img,
        .phase-wallet-slot[b-opw51w3701]  .wallet-rw.compact .mobile-secretary-badge img {
            width: 19px;
            height: 19px;
        }
    }

    /* Desktop has plenty of vertical room, so let the header scroll away
       instead of pinning it (mirrors GameSupportRW's sticky-header-group). */
    @media (min-width: 1024px) {
        .phase-header[b-opw51w3701] {
            position: relative;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/GameDashboard.razor.rz.scp.css */
/* PROJECTOR-OPTIMIZED DASHBOARD - High Contrast & Large Text */
:root[b-y0my6pgiva] {
    --game-bg: #0a2540;
    --card-bg: #ffffff;
    --card-bg-dark: rgba(255, 255, 255, 0.98);
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #e63946;
    --info-color: #1a5c7a;
    --text-dark: #1a1a1a;
    --text-light: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.85);
    --border-color: #e0e0e0;
    --shadow-strong: 0 2px 8px rgba(12, 58, 88, 0.12);
}

*[b-y0my6pgiva] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body[b-y0my6pgiva] {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.dashboard-container[b-y0my6pgiva] {
    background: url('/images/m16background.png');
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* KOMPAKTNÍ HEADER */
.dashboard-header[b-y0my6pgiva] {
    background: var(--card-bg-dark);
    padding: 12px 20px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-strong);
}

.header-content[b-y0my6pgiva] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    max-width: 100%;
}

.game-title[b-y0my6pgiva] {
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.5px;
}

.phase-info[b-y0my6pgiva] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.phase-badge[b-y0my6pgiva],
.round-badge[b-y0my6pgiva],
.secretary-badge[b-y0my6pgiva] {
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 0.9rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    border: none;
    transition: all 0.3s ease;
}

.phase-badge[b-y0my6pgiva] {
    background: #1a5c7a;
}

.round-badge[b-y0my6pgiva] {
    background: #28a745;
}

.secretary-badge[b-y0my6pgiva] {
    background: #ffc107;
    color: #1a1a1a;
}

/* KOMPAKTNÍ MAIN CONTENT */
.main-content[b-y0my6pgiva] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
}

/* PHASE CONTENT CARD - KOMPAKTNÍ */
.phase-content[b-y0my6pgiva] {
    background: var(--card-bg-dark);
    border-radius: 10px;
    padding: 15px;
    overflow: visible;
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-strong);
    display: flex;
    flex-direction: column;
}

/* Prevent scrollbar on project cards and results */
.results-container[b-y0my6pgiva] {
    overflow: visible;
    flex: 1;
}

.row.g-3[b-y0my6pgiva], .row.g-2[b-y0my6pgiva] {
    overflow: visible;
}

.interactive-section[b-y0my6pgiva] {
    overflow: visible;
}

/* Kompaktní SupportResults a BoostResults na dashboardu */
.support-section .support-results[b-y0my6pgiva],
.boost-section .boost-results-container[b-y0my6pgiva] {
    overflow: visible;
}

/* SupportResults - 2 sloupce vedle sebe místo pod sebou */
.support-section .projects-grid[b-y0my6pgiva] {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

.support-section .project-result-card[b-y0my6pgiva] {
    margin-bottom: 0 !important;
}

/* SupportResults - kompaktnější karty */
.support-section .project-card .card-img-top[b-y0my6pgiva] {
    max-height: 90px !important;
}

.support-section .project-card[b-y0my6pgiva] {
    font-size: 0.8rem !important;
}

.support-section .project-card h5[b-y0my6pgiva] {
    font-size: 0.85rem !important;
}

.support-section .proposer-info[b-y0my6pgiva] {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
}

/* BoostResults - žádné scrollbary, kompaktní layout */
.boost-section .row[b-y0my6pgiva] {
    overflow: visible !important;
}

.boost-section .col-md-6[b-y0my6pgiva],
.boost-section .col-lg-4[b-y0my6pgiva] {
    overflow: visible !important;
}

.boost-section .position-relative[b-y0my6pgiva] {
    overflow: visible !important;
}

/* BoostResults - kompaktnější karty */
.boost-section .project-card .card-img-top[b-y0my6pgiva] {
    max-height: 100px !important;
}

.boost-section .project-card[b-y0my6pgiva] {
    font-size: 0.8rem !important;
}

.boost-section .project-card h5[b-y0my6pgiva] {
    font-size: 0.85rem !important;
}

.boost-section .section-title[b-y0my6pgiva] {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
}

/* Kompaktní projekt karty pro dashboard */
.phase-content .project-card[b-y0my6pgiva] {
    font-size: 0.85rem;
}

.phase-content .project-card .card-img-top[b-y0my6pgiva] {
    max-height: 120px;
    object-fit: contain;
}

.phase-content .project-card h5[b-y0my6pgiva] {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.phase-content .project-card .card-body[b-y0my6pgiva] {
    padding: 0.5rem !important;
}

/* Ještě kompaktnější v evaluation */
.evaluation-fullscreen .project-card .card-img-top[b-y0my6pgiva] {
    max-height: 100px;
}

/* Extra kompaktní karty v horizontálním layoutu hráčů */
.player-column .project-card[b-y0my6pgiva] {
    font-size: 0.75rem;
}

.player-column .project-card .card-img-top[b-y0my6pgiva] {
    max-height: 80px;
}

.player-column .project-card h5[b-y0my6pgiva] {
    font-size: 0.8rem;
    line-height: 1.1;
}

.player-column .project-card .card-header[b-y0my6pgiva] {
    padding: 0.25rem !important;
}

.player-column .project-card .card-body[b-y0my6pgiva] {
    padding: 0.35rem !important;
}

.player-column .project-card img[alt="icon"][b-y0my6pgiva] {
    width: 50% !important;
}

.phase-title[b-y0my6pgiva] {
    color: var(--text-dark);
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 2px solid #e9ecef;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.phase-title:hover[b-y0my6pgiva] {
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    transform: translateX(2px);
}

.phase-title i[b-y0my6pgiva] {
    color: var(--info-color);
    font-size: 1.8rem;
}

.phase-title-icon[b-y0my6pgiva] {
    font-size: 2rem;
    line-height: 1;
}

.phase-title .badge[b-y0my6pgiva] {
    margin-left: auto;
    font-size: 0.75rem;
}

/* FLEXIBILNÍ KONTINUÁLNÍ LAYOUT */
.interest-areas[b-y0my6pgiva] {
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
    overflow: visible;
    box-shadow: none;
    margin-bottom: 12px;
}

.section-header[b-y0my6pgiva] {
    color: var(--text-dark);
    font-weight: 900;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
}

.section-header:hover[b-y0my6pgiva] {
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    transform: translateY(-1px);
}

.section-header i[b-y0my6pgiva] {
    font-size: 1.3rem;
    color: var(--info-color);
}

.section-header .badge[b-y0my6pgiva] {
    margin-left: auto;
    font-size: 0.8rem;
    padding: 4px 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

/* FLEXIBILNÍ GRID - OBLASTI A HRÁČI SPOLEČNĚ */
.areas-list[b-y0my6pgiva] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}

/* MINI KARTIČKA OBLASTI */
.area-item[b-y0my6pgiva] {
    background: #ffffff;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    border: 2px solid #e0e0e0;
    position: relative;
}

.area-item:hover[b-y0my6pgiva] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.area-item.critical[b-y0my6pgiva] {
    border-color: #dc3545;
    background: #ffffff;
}

.area-item.warning[b-y0my6pgiva] {
    border-color: #ffc107;
    background: #ffffff;
}

.area-item.good[b-y0my6pgiva] {
    border-color: #28a745;
    background: #ffffff;
}

.area-item.excellent[b-y0my6pgiva] {
    border-color: #1a5c7a;
    background: #ffffff;
}

.area-item-content[b-y0my6pgiva] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.area-icon-img[b-y0my6pgiva] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.area-name[b-y0my6pgiva] {
    font-weight: 800;
    color: var(--text-dark);
    font-size: 0.8rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.area-score-display[b-y0my6pgiva] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.area-value[b-y0my6pgiva] {
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--text-dark);
    line-height: 1;
}

.area-max[b-y0my6pgiva] {
    color: #666666;
    font-size: 0.8rem;
    font-weight: 700;
}

/* PROJECT CARDS - Compact grid */
.project-grid[b-y0my6pgiva] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* FLEXIBILNÍ LAYOUT PRO HRÁČE */
.players-overview[b-y0my6pgiva] {
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
    overflow: visible;
    box-shadow: none;
}

/* FLEXIBILNÍ GRID - HRÁČI */
.players-grid[b-y0my6pgiva] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
}

/* MINI KARTIČKA HRÁČE */
.player-card[b-y0my6pgiva] {
    background: #ffffff;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
    border: 2px solid #1a5c7a;
    text-align: center;
}

.player-card:hover[b-y0my6pgiva] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.player-card.secretary[b-y0my6pgiva] {
    border-color: #ffc107;
    background: #ffffff;
}

.player-card.active[b-y0my6pgiva] {
    border-color: #28a745;
    background: #ffffff;
}

.player-info[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.player-avatar[b-y0my6pgiva] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1a5c7a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.player-card.secretary .player-avatar[b-y0my6pgiva] {
    background: #ffc107;
    color: #1a1a1a;
}

.player-card.active .player-avatar[b-y0my6pgiva] {
    background: #28a745;
    color: white;
}

.player-details[b-y0my6pgiva] {
    width: 100%;
}

.player-name[b-y0my6pgiva] {
    font-weight: 800;
    color: var(--text-dark);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
    line-height: 1.1;
}

.player-status[b-y0my6pgiva] {
    font-size: 0.65rem;
    color: #666666;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-badge[b-y0my6pgiva] {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-top: 1px;
}

.badge-secretary[b-y0my6pgiva] {
    background: #ffc107;
    color: #1a1a1a;
}

.badge-active[b-y0my6pgiva] {
    background: #28a745;
    color: white;
}

/* AREA PROGRESS - Only shown during evaluation */
.area-item.show-progress[b-y0my6pgiva] {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.area-item.show-progress .area-item-content[b-y0my6pgiva] {
    width: 100%;
}

.area-progress[b-y0my6pgiva] {
    width: 100%;
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}

.area-progress-fill[b-y0my6pgiva] {
    height: 100%;
    transition: width 0.5s ease;
}

.area-item.critical .area-progress-fill[b-y0my6pgiva] {
    background: var(--danger-color);
}

.area-item.warning .area-progress-fill[b-y0my6pgiva] {
    background: var(--warning-color);
}

.area-item.good .area-progress-fill[b-y0my6pgiva] {
    background: var(--success-color);
}

.area-item.excellent .area-progress-fill[b-y0my6pgiva] {
    background: var(--info-color);
}

/* PROJECTOR-OPTIMIZED EMPTY STATE */
.empty-state[b-y0my6pgiva] {
    text-align: center;
    padding: 80px 30px;
    background: var(--card-bg-dark);
    border-radius: 12px;
    box-shadow: var(--shadow-strong);
}

.empty-state i[b-y0my6pgiva] {
    font-size: 6rem;
    margin-bottom: 30px;
    color: var(--info-color);
    opacity: 0.7;
}

.empty-state h5[b-y0my6pgiva] {
    color: var(--text-dark);
    font-weight: 900;
    font-size: 1.8rem;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.empty-state p[b-y0my6pgiva] {
    font-size: 1.3rem;
    margin: 0;
    color: #666666;
    font-weight: 600;
}

/* PROJECTOR-OPTIMIZED LOADING STATE */
.loading-container[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 30px;
    background: var(--card-bg-dark);
    border-radius: 12px;
    box-shadow: var(--shadow-strong);
    margin: 40px;
}

.loading-container h4[b-y0my6pgiva] {
    color: var(--text-dark);
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -0.5px;
}

/* ROW/COL LAYOUT - Fixed height to fit screen */
.row[b-y0my6pgiva] {
    height: 100%;
}

.col-lg-8[b-y0my6pgiva],  
.col-lg-4[b-y0my6pgiva] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-right: 8px;
}

.col-lg-4 > .interest-areas[b-y0my6pgiva],
.col-lg-4 > .players-overview[b-y0my6pgiva] {
    flex: 0 0 auto;
}

/* PROJECTOR-OPTIMIZED SCROLLBAR - WIDE & HIGH CONTRAST */
.phase-content[b-y0my6pgiva]::-webkit-scrollbar,
.col-lg-4[b-y0my6pgiva]::-webkit-scrollbar {
    width: 12px;
}

.phase-content[b-y0my6pgiva]::-webkit-scrollbar-track,
.col-lg-4[b-y0my6pgiva]::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 6px;
}

.phase-content[b-y0my6pgiva]::-webkit-scrollbar-thumb,
.col-lg-4[b-y0my6pgiva]::-webkit-scrollbar-thumb {
    background: #666666;
    border-radius: 6px;
    border: 2px solid #e0e0e0;
}

.phase-content[b-y0my6pgiva]::-webkit-scrollbar-thumb:hover,
.col-lg-4[b-y0my6pgiva]::-webkit-scrollbar-thumb:hover {
    background: #333333;
}

/* PROJECTOR-OPTIMIZED PROJECT CARDS IN RESULTS */
.results-container .project-card[b-y0my6pgiva] {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 18px 22px;
    background: var(--card-bg-dark);
    border: 3px solid rgba(13, 110, 253, 0.3);
    box-shadow: var(--shadow-strong);
}

.results-container .project-card h5[b-y0my6pgiva] {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

/* PHASE-SPECIFIC SECTIONS */
.interactive-section[b-y0my6pgiva] {
    margin-bottom: 1.5rem;
    animation: fadeIn-b-y0my6pgiva 0.5s ease-out;
}

@keyframes fadeIn-b-y0my6pgiva {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* EVALUATION FULLSCREEN - maximální využití obrazovky */
.evaluation-fullscreen[b-y0my6pgiva] {
    height: 100%;
    width: 100%;
}

.evaluation-fullscreen .phase-content[b-y0my6pgiva] {
    max-width: 100%;
    height: 100%;
}

.evaluation-fullscreen .area-row[b-y0my6pgiva] {
    font-size: 1.1rem;
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.evaluation-fullscreen .area-name-large[b-y0my6pgiva] {
    font-size: 1.3rem;
}

.evaluation-fullscreen .current-score[b-y0my6pgiva] {
    font-size: 2.5rem;
}

.support-section[b-y0my6pgiva] {
    padding: 1rem;
    background: rgba(220, 53, 69, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(220, 53, 69, 0.1);
}

.boost-section[b-y0my6pgiva] {
    padding: 1rem;
    background: rgba(255, 193, 7, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 193, 7, 0.1);
}

.player-section[b-y0my6pgiva] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.player-section:hover[b-y0my6pgiva] {
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    transform: translateY(-2px);
}

.player-header[b-y0my6pgiva] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e0e0e0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-dark);
}

.player-header i[b-y0my6pgiva] {
    font-size: 1.5rem;
    color: var(--info-color);
}

.empty-placeholder[b-y0my6pgiva] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
    font-size: 1.1rem;
}

/* HORIZONTAL PLAYERS GRID - hráči vedle sebe */
.players-grid-horizontal[b-y0my6pgiva] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Pro 3 hráče */
.players-grid-horizontal:has(.player-column:nth-child(3):last-child)[b-y0my6pgiva] {
    grid-template-columns: repeat(3, 1fr);
}

/* Pro 4 hráče */
.players-grid-horizontal:has(.player-column:nth-child(4):last-child)[b-y0my6pgiva] {
    grid-template-columns: repeat(4, 1fr);
}

/* Pro 5 hráčů - 3 + 2 */
.players-grid-horizontal:has(.player-column:nth-child(5):last-child)[b-y0my6pgiva] {
    grid-template-columns: repeat(3, 1fr);
}

/* Pro 6 hráčů - 3 + 3 */
.players-grid-horizontal:has(.player-column:nth-child(6):last-child)[b-y0my6pgiva] {
    grid-template-columns: repeat(3, 1fr);
}

.player-column[b-y0my6pgiva] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 0.75rem;
    border: 2px solid #dee2e6;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-header-compact[b-y0my6pgiva] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    color: var(--text-dark);
    font-size: 0.95rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dee2e6;
}

.player-header-compact i[b-y0my6pgiva] {
    font-size: 1.2rem;
    color: var(--info-color);
}

.player-header-compact .badge[b-y0my6pgiva] {
    margin-left: auto;
}

.projects-vertical[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.project-card-wrapper[b-y0my6pgiva] {
    width: 100%;
}

.empty-placeholder-small[b-y0my6pgiva] {
    text-align: center;
    padding: 1rem;
    color: #999;
    font-style: italic;
    font-size: 0.9rem;
}

/* EMPTY STATE - INTERACTIVE */
/* PROJECTOR-OPTIMIZED INTERACTIVE EMPTY STATE */
.empty-state-interactive[b-y0my6pgiva] {
    text-align: center;
    padding: 5rem 3rem;
    background: var(--card-bg-dark);
    border-radius: 12px;
    box-shadow: var(--shadow-strong);
}

.empty-animation[b-y0my6pgiva] {
    margin-bottom: 3rem;
}

.pulse-icon[b-y0my6pgiva] {
    font-size: 7rem;
    display: inline-block;
    animation: pulse-glow-b-y0my6pgiva 2s ease-in-out infinite;
    color: var(--info-color);
}

@keyframes pulse-glow-b-y0my6pgiva {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.empty-state-interactive h4[b-y0my6pgiva] {
    color: var(--text-dark);
    font-weight: 900;
    font-size: 1.9rem;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.empty-state-interactive p[b-y0my6pgiva] {
    color: #666666;
    font-size: 1.3rem;
    font-weight: 600;
}

/* LOADING SPINNER - Removed duplicate, already styled above */

/* COLOR UTILITIES */
.text-success[b-y0my6pgiva] {
    color: var(--success-color) !important;
}

.text-danger[b-y0my6pgiva] {
    color: var(--danger-color) !important;
}

.text-warning[b-y0my6pgiva] {
    color: var(--warning-color) !important;
}

.text-info[b-y0my6pgiva] {
    color: var(--info-color) !important;
}

/* RESPONSIVE - Optimized for different screen sizes */
@media (max-width: 1600px) {
    .area-row-content[b-y0my6pgiva] {
        grid-template-columns: 120px 1fr 60px 80px;
        gap: 0.6rem;
    }

    .area-icon-large .area-icon-img[b-y0my6pgiva] {
        width: 28px;
        height: 28px;
    }

    .area-name-large[b-y0my6pgiva] {
        font-size: 0.9rem;
    }

    .current-score[b-y0my6pgiva] {
        font-size: 1.75rem;
    }

    .change-display[b-y0my6pgiva] {
        font-size: 0.9rem;
        padding: 0.4rem 0.6rem;
    }
}

@media (max-width: 1400px) {
    .dashboard-grid[b-y0my6pgiva],
    .evaluation-layout[b-y0my6pgiva] {
        grid-template-columns: 1fr 280px;
    }

    .header-content[b-y0my6pgiva] {
        grid-template-columns: 220px 1fr auto;
        gap: 1rem;
    }
}

@media (max-width: 1200px) {
    .dashboard-grid[b-y0my6pgiva],
    .evaluation-layout[b-y0my6pgiva] {
        grid-template-columns: 1fr;
    }

    .right-column[b-y0my6pgiva] {
        flex-direction: row;
        gap: 1rem;
    }

    .interest-areas[b-y0my6pgiva],
    .players-overview[b-y0my6pgiva] {
        flex: 1;
    }
}

/* ========================================
   EVALUATION PHASE - Optimized for single screen
   ======================================== */

.evaluation-layout[b-y0my6pgiva] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1rem;
    height: 100%;
    overflow: hidden;
}

.evaluation-main[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
}

.evaluation-header[b-y0my6pgiva] {
    background: rgba(26, 92, 122, 0.2);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: var(--text-light);
    text-align: center;
    border: 1px solid var(--border-glass);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    flex-shrink: 0;
    transition: all 0.3s ease;
    animation: slideIn 0.5s ease-out;
}

.evaluation-header:hover[b-y0my6pgiva] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.evaluation-header h2[b-y0my6pgiva] {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.evaluation-header .lead[b-y0my6pgiva] {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0;
}

/* COMPACT SUMMARY STATS - Horizontal */
.evaluation-summary[b-y0my6pgiva] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 0.75rem;
    border: 1px solid var(--border-glass);
    flex-shrink: 0;
}

.summary-stats[b-y0my6pgiva] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.summary-stat[b-y0my6pgiva] {
    text-align: center;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    border: 1px solid var(--border-glass);
    transition: all 0.3s ease;
}

.summary-stat:hover[b-y0my6pgiva] {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.stat-number[b-y0my6pgiva] {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-light);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.stat-description[b-y0my6pgiva] {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    font-weight: 600;
}

/* AREAS CONTAINER - Scrollable list */
.areas-container[b-y0my6pgiva] {
    flex: 1;
    background: var(--game-card-bg);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border-glass);
    overflow-y: auto;
    min-height: 0;
}

.areas-rows-container[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* COMPACT AREA ROW - Interactive */
.area-row[b-y0my6pgiva] {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.2rem;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.area-row[b-y0my6pgiva]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: transparent;
    transition: left 0.5s ease;
}

.area-row:hover[b-y0my6pgiva] {
    transform: translateX(2px);
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.area-row:hover[b-y0my6pgiva]::before {
    left: 100%;
}

.area-row.critical[b-y0my6pgiva] {
    background: rgba(220, 53, 69, 0.06);
    border: 2px solid rgba(220, 53, 69, 0.2);
}

.area-row.warning[b-y0my6pgiva] {
    background: rgba(255, 193, 7, 0.06);
    border: 2px solid rgba(255, 193, 7, 0.2);
}

.area-row.good[b-y0my6pgiva] {
    background: rgba(40, 167, 69, 0.06);
    border: 2px solid rgba(40, 167, 69, 0.2);
}

.area-row.excellent[b-y0my6pgiva] {
    background: rgba(26, 92, 122, 0.06);
    border: 2px solid rgba(26, 92, 122, 0.2);
}

.area-row-content[b-y0my6pgiva] {
    display: grid;
    grid-template-columns: 140px 1fr 70px 90px;
    gap: 0.75rem;
    align-items: center;
}

/* AREA INFO */
.area-info[b-y0my6pgiva] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.area-icon-large .area-icon-img[b-y0my6pgiva] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    /* Žádný filtr - chceme vidět barevné ikony */
}

.area-details-text[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.area-name-large[b-y0my6pgiva] {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.2;
}

.area-subtitle[b-y0my6pgiva] {
    font-size: 0.75rem;
    color: #666666;
    font-weight: 600;
}

/* PROGRESS BAR - Compact */
.area-progress-section[b-y0my6pgiva] {
    flex: 1;
}

.progress-bar-container[b-y0my6pgiva] {
    position: relative;
    background: #e9ecef;
    height: 32px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid #dee2e6;
}

.progress-fill[b-y0my6pgiva] {
    height: 100%;
    border-radius: 12px;
    position: relative;
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.progress-fill[b-y0my6pgiva]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    animation: shimmer-b-y0my6pgiva 3s infinite;
}

@keyframes shimmer-b-y0my6pgiva {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-fill.critical[b-y0my6pgiva] {
    background: var(--danger-color);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5);
}

.progress-fill.warning[b-y0my6pgiva] {
    background: var(--warning-color);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5);
}

.progress-fill.good[b-y0my6pgiva] {
    background: var(--success-color);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
}

.progress-fill.excellent[b-y0my6pgiva] {
    background: var(--info-color);
    box-shadow: 0 0 0 3px rgba(26, 92, 122, 0.5);
}

.progress-text[b-y0my6pgiva] {
    font-weight: 800;
    color: var(--text-dark);
    font-size: 0.95rem;
    text-shadow: none;
    position: absolute;
    z-index: 2;
}

.progress-info[b-y0my6pgiva] {
    display: none; /* Hide to save space */
}

/* AREA METRICS */
.area-metrics[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.current-score[b-y0my6pgiva] {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1;
    text-shadow: none;
}

.score-label[b-y0my6pgiva] {
    font-size: 0.7rem;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* AREA CHANGES */
.area-changes[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.change-display[b-y0my6pgiva] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    min-width: 70px;
    justify-content: center;
}

.change-display.positive[b-y0my6pgiva] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 2px solid var(--success-color);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

.change-display.negative[b-y0my6pgiva] {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border: 2px solid var(--danger-color);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}

.change-display.neutral[b-y0my6pgiva] {
    background: #f8f9fa;
    color: #6c757d;
    border: 2px solid #dee2e6;
}

.projects-count[b-y0my6pgiva] {
    font-size: 0.7rem;
    color: #666666;
    text-align: center;
    font-weight: 600;
}

/* NEW 2/3 + 1/3 DASHBOARD GRID LAYOUT */
.dashboard-grid-new[b-y0my6pgiva] {
    display: grid;
    grid-template-columns: 4fr 1fr;
    gap: 1rem;
    height: calc(100vh - 80px);
    overflow: hidden;
}

.left-panel-selected-projects[b-y0my6pgiva] {
    overflow-y: auto;
    overflow-x: hidden;
}

.right-panel-split[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

.right-panel-section[b-y0my6pgiva] {
    flex: 1;
    background: var(--card-bg-dark);
    border-radius: 10px;
    padding: 0.75rem;
    overflow-y: auto;
    box-shadow: var(--shadow-strong);
    border: 2px solid var(--border-color);
}

/* Selected Projects Grid - 6 cards per row */
.selected-projects-grid[b-y0my6pgiva] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.project-card-with-data[b-y0my6pgiva] {
    position: relative;
}

.project-phase-data[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.phase-data-badge[b-y0my6pgiva] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.phase-data-badge i[b-y0my6pgiva] {
    font-size: 1.1rem;
}

.phase-data-badge .badge-label[b-y0my6pgiva] {
    flex: 1;
    color: #666;
}

.phase-data-badge .badge-value[b-y0my6pgiva] {
    font-size: 1.1rem;
    font-weight: 900;
}

.support-badge[b-y0my6pgiva] {
    background: rgba(26, 92, 122, 0.1);
    border: 2px solid rgba(26, 92, 122, 0.3);
    color: #1a5c7a;
}

.boost-badge[b-y0my6pgiva] {
    background: rgba(255, 193, 7, 0.1);
    border: 2px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.boost-badge.positive[b-y0my6pgiva] {
    background: rgba(40, 167, 69, 0.1);
    border: 2px solid rgba(40, 167, 69, 0.3);
    color: #28a745;
}

.boost-badge.negative[b-y0my6pgiva] {
    background: rgba(220, 53, 69, 0.1);
    border: 2px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

/* Interest Areas Chart (Compact) */
.section-header-compact[b-y0my6pgiva] {
    color: var(--text-dark);
    font-weight: 900;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dee2e6;
}

.section-header-compact i[b-y0my6pgiva] {
    font-size: 1rem;
    color: var(--info-color);
}

.areas-chart-container[b-y0my6pgiva] {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 0.5rem;
    height: calc(100% - 3rem);
    padding: 0.5rem 0;
}

.area-chart-item[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.area-chart-bar[b-y0my6pgiva] {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background: #e9ecef;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.area-chart-fill[b-y0my6pgiva] {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height 0.6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    min-height: 20px;
}

.area-chart-header[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    text-align: center;
}

.area-chart-header .area-icon-img[b-y0my6pgiva] {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.area-chart-name[b-y0my6pgiva] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.area-chart-value[b-y0my6pgiva] {
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--text-dark);
}

.area-chart-value small[b-y0my6pgiva] {
    font-size: 0.65rem;
    color: #666;
    font-weight: 600;
}

.area-chart-fill.critical[b-y0my6pgiva] {
    background: var(--danger-color);
}

.area-chart-fill.warning[b-y0my6pgiva] {
    background: var(--warning-color);
}

.area-chart-fill.good[b-y0my6pgiva] {
    background: var(--success-color);
}

.area-chart-fill.excellent[b-y0my6pgiva] {
    background: var(--info-color);
}

.area-chart-icon-only[b-y0my6pgiva] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    min-height: 24px;
}

.area-chart-icon-only .area-icon-img[b-y0my6pgiva] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Players Points Panel */
.players-points-list[b-y0my6pgiva] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-points-card[b-y0my6pgiva] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #ffffff;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.player-points-card:hover[b-y0my6pgiva] {
    transform: translateX(2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.player-points-card.current-user[b-y0my6pgiva] {
    border-color: var(--info-color);
    background: rgba(26, 92, 122, 0.05);
}

.player-rank[b-y0my6pgiva] {
    width: 32px;
    height: 32px;
    background: var(--info-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
    flex-shrink: 0;
}

.player-points-info[b-y0my6pgiva] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-points-name[b-y0my6pgiva] {
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.secretary-icon[b-y0my6pgiva] {
    color: #ffc107;
    font-size: 0.9rem;
}

.player-points-score[b-y0my6pgiva] {
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--success-color);
}

.empty-state-small[b-y0my6pgiva] {
    text-align: center;
    padding: 2rem;
    color: #999;
    font-style: italic;
}

/* Responsive behavior */
@media (max-width: 1600px) {
    .selected-projects-grid[b-y0my6pgiva] {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1400px) {
    .selected-projects-grid[b-y0my6pgiva] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .dashboard-grid-new[b-y0my6pgiva] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .left-panel-selected-projects[b-y0my6pgiva],
    .right-panel-split[b-y0my6pgiva] {
        overflow-y: visible;
    }

    .selected-projects-grid[b-y0my6pgiva] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .selected-projects-grid[b-y0my6pgiva] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .selected-projects-grid[b-y0my6pgiva] {
        grid-template-columns: 1fr;
    }

    .right-panel-split[b-y0my6pgiva] {
        gap: 0.75rem;
    }

    .right-panel-section[b-y0my6pgiva] {
        min-height: 300px;
    }
    
    .area-chart-bar[b-y0my6pgiva] {
        height: 100px;
    }
}
/* _content/Municipality16.Shared/Components/Pages/GamePages/GameDashboardRW.razor.rz.scp.css */
/* ========================================
       GAME DASHBOARD RW - Modern Strategic Design
       ======================================== */

    .dashboard-rw[b-tjagqrdsqk] {
        min-height: 100vh;
        position: relative;
        overflow-x: hidden;
        background: #0c3a58;
    }

    /* Background illustration, very subtle */
    .dashboard-rw[b-tjagqrdsqk]::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('/images/m16background.png') center center / cover no-repeat;
        opacity: 0.10;
        z-index: 0;
    }


    .dashboard-content[b-tjagqrdsqk] {
        position: relative;
        z-index: 1;
    }

    .dashboard-observer-banner[b-tjagqrdsqk] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 13px clamp(15px, 3vw, 30px);
        color: #fff;
        background: linear-gradient(135deg, #8a5a00 0%, #b97800 100%);
        border-bottom: 2px solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 5px 18px rgba(0, 0, 0, 0.24);
    }

    .dashboard-observer-copy[b-tjagqrdsqk] {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .dashboard-observer-copy > i[b-tjagqrdsqk] {
        flex: 0 0 auto;
        font-size: 1.45rem;
    }

    .dashboard-observer-copy strong[b-tjagqrdsqk],
    .dashboard-observer-copy span[b-tjagqrdsqk] {
        display: block;
    }

    .dashboard-observer-copy strong[b-tjagqrdsqk] {
        font-size: 1rem;
        line-height: 1.2;
    }

    .dashboard-observer-copy span[b-tjagqrdsqk] {
        margin-top: 2px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 0.84rem;
    }

    .dashboard-observer-back[b-tjagqrdsqk] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        flex: 0 0 auto;
        padding: 8px 12px;
        color: #0c3a58;
        background: #fff;
        border-radius: 9px;
        font-size: 0.86rem;
        font-weight: 700;
        text-decoration: none;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .dashboard-observer-back:hover[b-tjagqrdsqk] {
        color: #0c3a58;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* ========== HEADER ========== */
    .dashboard-header[b-tjagqrdsqk] {
        background: rgba(12, 58, 88, 0.95);
        padding: 0 clamp(15px, 3vw, 30px);
        height: clamp(56px, 9vh, 80px);
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: stretch;
    }

    .dashboard-header[b-tjagqrdsqk]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--brand-cyan, #1a5c7a);
    }

    .header-content[b-tjagqrdsqk] {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: clamp(10px, 2vw, 20px);
        flex: 1;
    }

    .game-title[b-tjagqrdsqk] {
        color: white;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: stretch;
        flex: 0 0 auto;
        min-width: clamp(74px, 8vw, 108px);
    }

    .game-title img[b-tjagqrdsqk] {
        height: 100%;
        width: auto;
        object-fit: contain;
        display: block;
    }

    .header-phase-center[b-tjagqrdsqk] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 0;
    }

    .header-phase-name[b-tjagqrdsqk] {
        font-size: clamp(1rem, 2.2vw, 1.4rem);
        font-weight: 800;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .header-phase-desc[b-tjagqrdsqk] {
        font-size: clamp(0.7rem, 1.4vw, 0.9rem);
        color: rgba(255, 255, 255, 0.7);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .phase-info[b-tjagqrdsqk] {
        display: flex;
        align-items: center;
        gap: clamp(6px, 1vw, 12px);
        flex-wrap: wrap;
    }

    .phase-badge[b-tjagqrdsqk] {
        padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 18px);
        font-weight: 700;
        font-size: clamp(0.75rem, 1.8vw, 0.95rem);
        color: white;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
    }

    .phase-badge:hover[b-tjagqrdsqk] {
        transform: translateY(-2px);
    }

    .phase-badge.phase-current[b-tjagqrdsqk] {
        background: #1a5c7a;
    }

    .phase-badge.round[b-tjagqrdsqk] {
        background: #28a745;
    }

    .phase-badge.secretary[b-tjagqrdsqk] {
        background: #ffc107;
        color: #1a1a1a;
    }

    .phase-badge.projects-count[b-tjagqrdsqk] {
        background: #1a5c7a;
    }

    /* ========== MAIN CONTENT ========== */
    .main-content[b-tjagqrdsqk] {
        padding: clamp(12px, 2vh, 24px) clamp(12px, 2vw, 24px);
    }

    .dashboard-grid[b-tjagqrdsqk] {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: clamp(12px, 2vw, 24px);
        min-height: calc(100vh - 150px);
    }

    .side-panel[b-tjagqrdsqk] {
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 2vh, 20px);
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }

    @media (max-width: 960px) {
        .dashboard-grid[b-tjagqrdsqk] {
            grid-template-columns: 1fr;
        }
    }

    /* ========== GLASS CARDS ========== */
    .glass-card[b-tjagqrdsqk] {
        background: #ffffff;
        border-radius: clamp(12px, 2vw, 20px);
        padding: clamp(16px, 2.5vh, 24px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.3);
        position: relative;
        overflow: hidden;
    }

    .glass-card[b-tjagqrdsqk]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: #28a745;
    }

    .dark-glass-card[b-tjagqrdsqk] {
        background: rgba(12, 58, 88, 0.95);
        border-radius: clamp(12px, 2vw, 20px);
        padding: clamp(16px, 2.5vh, 24px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: white;
    }

    .section-header[b-tjagqrdsqk] {
        display: flex;
        align-items: center;
        gap: clamp(8px, 1.5vw, 12px);
        margin-bottom: clamp(12px, 2vh, 20px);
        padding-bottom: clamp(10px, 1.5vh, 15px);
        border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    }

    .section-header h3[b-tjagqrdsqk] {
        margin: 0;
        font-weight: 700;
        font-size: clamp(1rem, 2.2vw, 1.3rem);
        color: white;
    }

    .section-header .icon[b-tjagqrdsqk] {
        width: clamp(32px, 5vw, 44px);
        height: clamp(32px, 5vw, 44px);
        border-radius: clamp(8px, 1.2vw, 12px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(1rem, 2vw, 1.3rem);
    }

    .icon-blue[b-tjagqrdsqk] {
        background: #1a5c7a;
        color: white;
    }

    .icon-green[b-tjagqrdsqk] {
        background: #28a745;
        color: white;
    }

    .icon-gold[b-tjagqrdsqk] {
        background: #ffc107;
        color: white;
    }

    .icon-purple[b-tjagqrdsqk] {
        background: #1a5c7a;
        color: white;
    }

    /* ========== INTEREST AREAS ========== */
    .interest-areas-section[b-tjagqrdsqk] {
        height: 50vh;
        display: flex;
        flex-direction: column;
        margin-bottom: clamp(16px, 2.5vh, 24px);
    }

    .interest-areas-section .areas-grid[b-tjagqrdsqk] {
        flex: 1;
        min-height: 0;
    }

    .areas-grid[b-tjagqrdsqk] {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 6px;
        padding: 4px 0;
        height: 100%;
    }

    .area-bar-col[b-tjagqrdsqk] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .area-bar-val[b-tjagqrdsqk] {
        font-size: clamp(0.65rem, 1.4vw, 0.9rem);
        font-weight: 800;
        line-height: 1;
        flex-shrink: 0;
    }

    .area-bar-val.good[b-tjagqrdsqk]    { color: #28a745; }
    .area-bar-val.warning[b-tjagqrdsqk] { color: #dc3545; }
    .area-bar-val.critical[b-tjagqrdsqk]{ color: #dc3545; }

    .area-bar-track[b-tjagqrdsqk] {
        width: 60%;
        flex: 1;
        min-height: 20px;
        background: rgba(255,255,255,0.12);
        border-radius: 8px;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        position: relative;
    }

    /* threshold lines inside track */
    .threshold-line[b-tjagqrdsqk] {
        position: absolute;
        left: 0; right: 0;
        height: 2px;
        pointer-events: none;
        z-index: 1;
    }

    .threshold-line.danger[b-tjagqrdsqk]  { bottom: 15%; background: rgba(220,53,69,0.7); }
    .threshold-line.warning[b-tjagqrdsqk] { bottom: 35%; background: rgba(255,193,7,0.7); }

    .area-bar-fill[b-tjagqrdsqk] {
        width: 100%;
        border-radius: 8px;
        min-height: 4px;
        transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        z-index: 2;
    }

    .area-bar-fill.critical[b-tjagqrdsqk] {
        background: #dc3545;
    }

    .area-bar-fill.warning[b-tjagqrdsqk] {
        background: #dc3545;
    }

    .area-bar-fill.good[b-tjagqrdsqk] {
        background: #28a745;
        box-shadow: 0 0 10px rgba(40,167,69,0.5);
    }

    .area-bar-col .area-icon-img[b-tjagqrdsqk] {
        width: 80%;
        max-width: 42px;
        height: auto;
        aspect-ratio: 1;
        object-fit: contain;
        flex-shrink: 0;
    }

    .area-bar-col i[b-tjagqrdsqk] {
        font-size: clamp(1rem, 2.5vw, 1.6rem);
        color: white;
        flex-shrink: 0;
    }

    /* ========== PLAYERS STANDINGS ========== */
    .players-section[b-tjagqrdsqk] {
        margin-top: clamp(12px, 2vh, 20px);
    }

    .players-list[b-tjagqrdsqk] {
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 1.2vh, 12px);
    }

    .player-card[b-tjagqrdsqk] {
        display: flex;
        align-items: center;
        gap: clamp(10px, 1.5vw, 16px);
        padding: clamp(10px, 1.5vh, 16px);
        background: rgba(255, 255, 255, 0.08);
        border-radius: clamp(10px, 1.5vw, 14px);
        border: 2px solid transparent;
        transition: all 0.3s ease;
    }

    .player-card:hover[b-tjagqrdsqk] {
        transform: translateX(2px);
        background: rgba(255, 255, 255, 0.12);
    }

    .player-card.current-user[b-tjagqrdsqk] {
        border-color: rgba(26, 92, 122, 0.5);
        background: rgba(26, 92, 122, 0.1);
    }

    .player-card.secretary[b-tjagqrdsqk] {
        border-color: rgba(255, 193, 7, 0.5);
    }

    .player-role-icon[b-tjagqrdsqk] {
        width: clamp(32px, 5vw, 44px);
        height: clamp(32px, 5vw, 44px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .player-role-icon img[b-tjagqrdsqk] {
        width: 72%;
        height: 72%;
        object-fit: contain;
    }

    .player-role-icon i[b-tjagqrdsqk] {
        font-size: clamp(1rem, 2.2vw, 1.3rem);
        color: white;
    }

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

    .player-name[b-tjagqrdsqk] {
        font-weight: 700;
        font-size: clamp(0.9rem, 2vw, 1.1rem);
        color: white;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .secretary-star[b-tjagqrdsqk] {
        color: #ffc107;
        font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    }

    .player-score[b-tjagqrdsqk] {
        font-weight: 900;
        font-size: clamp(1.2rem, 2.5vw, 1.5rem);
        color: #28a745;
    }

    .player-score-unit[b-tjagqrdsqk] {
        font-size: 0.82em;
        font-weight: 800;
    }

    /* ========== PHASE CONTENT AREA ========== */
    .phase-content-area[b-tjagqrdsqk] {
        display: flex;
        flex-direction: column;
        gap: clamp(16px, 2.5vh, 24px);
    }

    /* ========== REALIZED PROJECTS HISTORY ========== */
    .history-rounds[b-tjagqrdsqk] {
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 1.5vh, 16px);
    }

    .history-round-row[b-tjagqrdsqk] {
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 1vh, 12px);
    }

    .round-label-badge[b-tjagqrdsqk] {
        display: inline-flex;
        align-items: center;
        padding: clamp(4px, 0.6vh, 6px) clamp(10px, 1.2vw, 14px);
        /*border-radius: 12px;*/
        background: #28a745;
        font-weight: 800;
        font-size: clamp(0.75rem, 1.4vw, 0.85rem);
        color: white;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
        width: fit-content;
    }

    .history-projects-grid[b-tjagqrdsqk] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
        gap: clamp(8px, 1vw, 12px);
    }

    .history-card-wrapper[b-tjagqrdsqk] {
        position: relative;
    }

    .history-round-badge[b-tjagqrdsqk] {
        position: absolute;
        top: 6px;
        left: 6px;
        z-index: 2;
        width: clamp(24px, 3vw, 30px);
        height: clamp(24px, 3vw, 30px);
        border-radius: 50%;
        background: #28a745;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: clamp(0.65rem, 1.2vw, 0.75rem);
        color: white;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
    }

    .phase-title-card[b-tjagqrdsqk] {
        background: #ffffff;
        border-radius: clamp(12px, 2vw, 18px);
        padding: clamp(16px, 2.5vh, 24px);
        display: flex;
        align-items: center;
        gap: clamp(12px, 2vw, 20px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        border: 2px solid rgba(0, 0, 0, 0.05);
    }

    .phase-icon[b-tjagqrdsqk] {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    .phase-details h2[b-tjagqrdsqk] {
        margin: 0 0 4px 0;
        font-size: clamp(1.2rem, 2.8vw, 1.6rem);
        font-weight: 800;
        color: #0c3a58;
    }

    .phase-details p[b-tjagqrdsqk] {
        margin: 0;
        color: #6c757d;
        font-size: clamp(0.85rem, 1.8vw, 1rem);
    }

    /* ========== PROJECTS GRID ========== */
    .projects-grid[b-tjagqrdsqk] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
        gap: clamp(12px, 2vw, 20px);
    }

    @media (max-width: 992px) {
        .projects-grid[b-tjagqrdsqk] {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
        }
    }

    @media (max-width: 768px) {
        .projects-grid[b-tjagqrdsqk] {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
        }
    }

    @media (max-width: 480px) {
        .projects-grid[b-tjagqrdsqk] {
            grid-template-columns: 1fr;
            gap: 12px;
        }
    }

    .project-card-wrapper[b-tjagqrdsqk] {
        border-radius: clamp(10px, 1.5vw, 14px);
        padding: clamp(10px, 1.5vh, 14px);
        transition: all 0.3s ease;
    }

    .project-card-wrapper:hover[b-tjagqrdsqk] {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    

    .project-card-wrapper.failed[b-tjagqrdsqk] {
        border-color: rgba(220, 53, 69, 0.45);
        background: rgba(220, 53, 69, 0.10);
    }

    .dashboard-results-panel[b-tjagqrdsqk] {
        color: #0c3a58;
    }

    .dashboard-results-panel[b-tjagqrdsqk] (.support-results-rw),
    .dashboard-results-panel[b-tjagqrdsqk] (.boost-results-rw) {
        color: #0c3a58;
    }

    .dashboard-realized-current[b-tjagqrdsqk] {
        display: flex;
        flex-direction: column;
        gap: clamp(12px, 1.8vh, 18px);
    }

    .result-stage-note[b-tjagqrdsqk] {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        padding: 8px 12px;
        /*border-radius: 10px;*/
        background: rgba(40, 167, 69, 0.16);
        color: #9ff0d8;
        font-weight: 700;
        font-size: clamp(0.8rem, 1.5vw, 0.95rem);
    }

    .dashboard-project-result[b-tjagqrdsqk] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: clamp(8px, 1.2vh, 12px);
        font-weight: 800;
        font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    }

    .dashboard-project-result.success[b-tjagqrdsqk] {
        color: #28a745;
    }

    .dashboard-project-result.failed[b-tjagqrdsqk] {
        color: #ff8a96;
    }

    .project-phase-data[b-tjagqrdsqk] {
        display: flex;
        gap: clamp(6px, 1vw, 10px);
        margin-top: clamp(8px, 1.2vh, 12px);
        flex-wrap: wrap;
    }

    .data-badge[b-tjagqrdsqk] {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: clamp(4px, 0.8vh, 6px) clamp(8px, 1.2vw, 12px);
        border-radius: 12px;
        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
        font-weight: 700;
    }

    .data-badge.support[b-tjagqrdsqk] {
        background: rgba(26, 92, 122, 0.2);
        color: #1a5c7a;
        border: 1px solid rgba(26, 92, 122, 0.3);
    }

    .data-badge.boost-positive[b-tjagqrdsqk] {
        background: rgba(40, 167, 69, 0.2);
        color: #28a745;
        border: 1px solid rgba(40, 167, 69, 0.3);
    }

    .data-badge.boost-negative[b-tjagqrdsqk] {
        background: rgba(220, 53, 69, 0.2);
        color: #dc3545;
        border: 1px solid rgba(220, 53, 69, 0.3);
    }

    /* ========== EMPTY STATE ========== */
    .empty-state[b-tjagqrdsqk] {
        text-align: center;
        padding: clamp(40px, 8vh, 80px) clamp(20px, 4vw, 40px);
    }

    .empty-icon[b-tjagqrdsqk] {
        font-size: clamp(3rem, 8vw, 5rem);
        margin-bottom: clamp(16px, 3vh, 24px);
        animation: pulse-glow-b-tjagqrdsqk 2s ease-in-out infinite;
    }

    @keyframes pulse-glow-b-tjagqrdsqk {
        0%, 100% { opacity: 0.6; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.1); }
    }

    .empty-state h3[b-tjagqrdsqk] {
        color: white;
        font-size: clamp(1.2rem, 3vw, 1.6rem);
        font-weight: 700;
        margin-bottom: clamp(8px, 1.5vh, 12px);
    }

    .empty-state p[b-tjagqrdsqk] {
        color: rgba(255, 255, 255, 0.7);
        font-size: clamp(0.9rem, 2vw, 1.1rem);
    }

    /* ========== LOADING STATE ========== */
    .loading-container[b-tjagqrdsqk] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
        text-align: center;
        padding: clamp(30px, 6vh, 60px);
    }

    .spinner-custom[b-tjagqrdsqk] {
        width: clamp(50px, 10vw, 80px);
        height: clamp(50px, 10vw, 80px);
        border: 4px solid rgba(255, 255, 255, 0.2);
        border-top-color: #28a745;
        border-radius: 50%;
        animation: spin-b-tjagqrdsqk 1s linear infinite;
        margin-bottom: clamp(16px, 3vh, 24px);
    }

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

    .loading-container h3[b-tjagqrdsqk] {
        color: white;
        font-size: clamp(1.2rem, 3vw, 1.6rem);
        font-weight: 700;
    }

    /* ========== VICTORY/FAILURE OVERLAY ========== */
    .game-result-overlay[b-tjagqrdsqk] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        animation: overlayFadeIn-b-tjagqrdsqk 0.5s ease;
    }

    .game-result-overlay.victory-bg[b-tjagqrdsqk] {
        background: rgba(0, 0, 0, 0.88);
    }

    .game-result-overlay.failure-bg[b-tjagqrdsqk] {
        background: rgba(0, 0, 0, 0.88);
    }

    @keyframes overlayFadeIn-b-tjagqrdsqk {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes cardSlideUp-b-tjagqrdsqk {
        from { opacity: 0; transform: translateY(40px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes iconPulse-b-tjagqrdsqk {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.15); }
    }

    @keyframes shimmer-b-tjagqrdsqk {
        0% { background-position: -200% center; }
        100% { background-position: 200% center; }
    }

    .result-card[b-tjagqrdsqk] {
        padding: clamp(28px, 4vh, 48px) clamp(24px, 3vw, 40px);
        text-align: center;
        max-width: min(92%, 560px);
        width: 100%;
        animation: cardSlideUp-b-tjagqrdsqk 0.6s ease 0.2s both;
        position: relative;
    }

    .result-card[b-tjagqrdsqk]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
    }

    .result-card.victory[b-tjagqrdsqk] {
        background: white;
        box-shadow: 0 30px 90px rgba(40, 167, 69, 0.3), 0 0 0 3px rgba(40, 167, 69, 0.08);
    }
    

    .result-card.failure[b-tjagqrdsqk] {
        background: white;
    }
    
    .result-icon-wrapper[b-tjagqrdsqk] {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto clamp(12px, 2vh, 20px);
        animation: iconPulse-b-tjagqrdsqk 2s ease-in-out infinite;
    }

    .victory .result-icon-wrapper[b-tjagqrdsqk] {
        background: #d4edda;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .failure .result-icon-wrapper[b-tjagqrdsqk] {
        background: #f8d7da;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .result-icon-wrapper .icon-text[b-tjagqrdsqk] {
        font-size: 3.2rem;
        line-height: 1;
    }

    .result-card .result-title[b-tjagqrdsqk] {
        font-size: clamp(1.6rem, 4.5vw, 2.4rem);
        font-weight: 900;
        margin-bottom: 6px;
        letter-spacing: -0.5px;
    }

    .victory .result-title[b-tjagqrdsqk] {
        color: #1e7e34;
    }

    .failure .result-title[b-tjagqrdsqk] {
        color: #dc3545;
    }

    .result-subtitle[b-tjagqrdsqk] {
        color: #6c757d;
        font-size: clamp(0.9rem, 2vw, 1.05rem);
        margin-bottom: clamp(16px, 2.5vh, 24px);
        line-height: 1.5;
    }

    /* Victory conditions */
    .victory-conditions[b-tjagqrdsqk] {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: clamp(16px, 2.5vh, 24px);
        flex-wrap: wrap;
    }

    .condition-badge[b-tjagqrdsqk] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .condition-badge.met[b-tjagqrdsqk] {
        background: #d4edda;
        color: #155724;
    }

    .condition-badge.not-met[b-tjagqrdsqk] {
        background: #f8d7da;
        color: #721c24;
    }

    .condition-badge i[b-tjagqrdsqk] {
        font-size: 1rem;
    }

    /* Winners podium */
    .winners-section[b-tjagqrdsqk] {
        margin-bottom: clamp(16px, 2.5vh, 24px);
    }

    .winners-section .section-label[b-tjagqrdsqk] {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #adb5bd;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .winners-podium[b-tjagqrdsqk] {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 8px;
        flex-wrap: wrap;
    }

    .podium-entry[b-tjagqrdsqk] {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 60px;
        max-width: 72px;
    }

    .podium-avatar[b-tjagqrdsqk] {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(0,0,0,0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
        overflow: hidden;
    }

    .podium-avatar img[b-tjagqrdsqk] {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .podium-initials[b-tjagqrdsqk] {
        font-size: 1rem;
        font-weight: 700;
        color: #0c3a58;
    }

    .podium-name[b-tjagqrdsqk] {
        font-weight: 700;
        font-size: 0.85rem;
        color: #0c3a58;
        margin-bottom: 2px;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .podium-score[b-tjagqrdsqk] {
        font-size: 0.75rem;
        font-weight: 600;
        color: #6c757d;
    }

    .podium-bar[b-tjagqrdsqk] {
        width: 100%;
        border-radius: 8px 8px 0 0;
        margin-top: 4px;
    }

    .podium-entry:nth-child(1) .podium-bar[b-tjagqrdsqk] {
        background: #f4c737;
        height: 48px;
    }

    .podium-entry:nth-child(2) .podium-bar[b-tjagqrdsqk] {
        background: #c0c0c0;
        height: 36px;
    }

    .podium-entry:nth-child(3) .podium-bar[b-tjagqrdsqk] {
        background: #cd7f32;
        height: 24px;
    }

    /* Area scores mini bar */
    .areas-section[b-tjagqrdsqk] {
        margin-bottom: clamp(16px, 2.5vh, 24px);
    }

    .areas-section .section-label[b-tjagqrdsqk] {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #adb5bd;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .area-scores-vertical[b-tjagqrdsqk] {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .area-scores-vertical .area-bar-col[b-tjagqrdsqk] {
        flex: 0 0 36px;
        width: 36px;
        min-width: 36px;
    }

    .area-bar-value[b-tjagqrdsqk] {
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
    }

    .area-bar-value.pos[b-tjagqrdsqk] { color: #28a745; }
    .area-bar-value.neg[b-tjagqrdsqk] { color: #dc3545; }

    .area-bar-track[b-tjagqrdsqk] {
        width: 16px;
        height: 80px;
        background: rgba(0,0,0,0.07);
        border-radius: 8px;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
    }

    .area-bar-fill[b-tjagqrdsqk] {
        width: 100%;
        border-radius: 8px;
        min-height: 4px;
        transition: height 0.6s ease;
    }

    .area-bar-fill.pos[b-tjagqrdsqk] { background: #28a745; }
    .area-bar-fill.neg[b-tjagqrdsqk] { background: #dc3545; }

    .area-bar-icon[b-tjagqrdsqk] {
        width: 22px;
        height: 22px;
    }

    /* Rounds info */
    .rounds-info[b-tjagqrdsqk] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.04);
        font-size: 0.82rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: clamp(16px, 2.5vh, 24px);
    }

    /* CTA button */
    .result-btn[b-tjagqrdsqk] {
        padding: clamp(14px, 2vh, 18px) clamp(32px, 5vw, 48px);
        border: none;
        border-radius: 12px;
        color: white;
        font-weight: 800;
        font-size: clamp(1rem, 2.2vw, 1.15rem);
        cursor: pointer;
        transition: all 0.3s ease;
        letter-spacing: 0.3px;
        position: relative;
        overflow: hidden;
    }

    .victory .result-btn[b-tjagqrdsqk] {
        background: #28a745;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .failure .result-btn[b-tjagqrdsqk] {
        background: #6c757d;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .result-btn:hover[b-tjagqrdsqk] {
        transform: translateY(-2px);
    }

    .victory .result-btn:hover[b-tjagqrdsqk] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .failure .result-btn:hover[b-tjagqrdsqk] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .result-btn i[b-tjagqrdsqk] {
        margin-right: 8px;
    }

    /* ========== CLOSE BUTTON ========== */
    .result-close-btn[b-tjagqrdsqk] {
        position: absolute;
        top: 16px;
        right: 16px;
        background: rgba(0, 0, 0, 0.08);
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.1rem;
        color: #6c757d;
        transition: all 0.2s ease;
        z-index: 10;
    }

    .result-close-btn:hover[b-tjagqrdsqk] {
        background: rgba(0, 0, 0, 0.15);
        color: #343a40;
        transform: scale(1.1);
    }

    .result-close-btn:active[b-tjagqrdsqk] {
        transform: scale(0.95);
    }

    /* ========== END GAME SUMMARY ========== */
    .dashboard-grid.endgame-layout[b-tjagqrdsqk] {
        grid-template-columns: minmax(0, 1fr) clamp(265px, 23.5vw, 340px);
        align-items: start;
        min-height: calc(100vh - 120px);
    }

    .endgame-layout .phase-content-area[b-tjagqrdsqk] {
        min-width: 0;
    }

    .endgame-layout .side-panel[b-tjagqrdsqk] {
        max-height: none;
        overflow: visible;
    }

    .endgame-layout .interest-areas-section[b-tjagqrdsqk] {
        height: 50vh;
        min-height: 320px;
        margin-bottom: 0;
    }

    .endgame-layout .players-section[b-tjagqrdsqk] {
        min-height: 0;
        margin-top: 0;
    }

    /* The former result overlay also defined generic bar classes. Keep the
       dashboard meters authoritative and scoped to the side panel. */
    .side-panel .area-bar-track[b-tjagqrdsqk] {
        width: 60%;
        height: auto;
        flex: 1;
        min-height: 20px;
        background: rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        position: relative;
    }

    .endgame-layout .side-panel .area-bar-track[b-tjagqrdsqk] {
        min-height: clamp(145px, 28vh, 300px);
    }

    .side-panel .area-bar-fill[b-tjagqrdsqk] {
        width: 100%;
        min-height: 4px;
        border-radius: 8px;
        position: relative;
        z-index: 2;
    }

    .endgame-summary[b-tjagqrdsqk] {
        padding: clamp(14px, 2vw, 22px);
        overflow: hidden;
    }

    .endgame-summary-grid[b-tjagqrdsqk] {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: clamp(14px, 2vw, 26px);
        align-items: stretch;
    }

    .endgame-column[b-tjagqrdsqk] {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .endgame-column-title[b-tjagqrdsqk] {
        margin: 0 0 clamp(10px, 1.5vh, 14px);
        padding: 0 10px clamp(8px, 1.2vh, 12px);
        border-bottom: 2px solid rgba(255, 255, 255, 0.18);
        color: #fff;
        font-size: clamp(1rem, 1.7vw, 1.3rem);
        font-weight: 800;
        line-height: 1.2;
    }

    .endgame-condition-list[b-tjagqrdsqk] {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: clamp(10px, 1.6vh, 14px);
    }

    .endgame-condition-card[b-tjagqrdsqk],
    .endgame-result-card[b-tjagqrdsqk] {
        --endgame-status-color: #e40016;
        position: relative;
        overflow: hidden;
        border-left: clamp(14px, 1.6vw, 19px) solid var(--endgame-status-color);
        border-radius: 9px;
        background: rgba(18, 69, 75, 0.9);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .endgame-condition-card.met[b-tjagqrdsqk],
    .endgame-result-card.victory[b-tjagqrdsqk] {
        --endgame-status-color: #0bb51d;
    }

    .endgame-condition-card h3[b-tjagqrdsqk] {
        margin: 0;
        padding: clamp(9px, 1.3vh, 12px) clamp(10px, 1.4vw, 14px) 0;
        color: #fff;
        font-size: clamp(0.98rem, 1.45vw, 1.18rem);
        font-weight: 800;
        line-height: 1.25;
    }

    .endgame-condition-body[b-tjagqrdsqk] {
        display: flex;
        min-height: clamp(88px, 14vh, 126px);
        flex-direction: column;
        justify-content: space-between;
        gap: 8px;
        padding: clamp(9px, 1.3vh, 13px) clamp(10px, 1.5vw, 16px);
    }

    .endgame-condition-body > p:first-child[b-tjagqrdsqk] {
        margin: 0;
        color: #fff;
        font-size: clamp(0.9rem, 1.35vw, 1.08rem);
        font-weight: 700;
        line-height: 1.48;
    }

    .endgame-condition-status[b-tjagqrdsqk] {
        display: flex;
        align-items: center;
        align-self: flex-end;
        gap: 8px;
        margin: 0;
        color: #fff;
        font-size: clamp(0.86rem, 1.2vw, 1rem);
        font-style: italic;
        font-weight: 800;
        line-height: 1.3;
        text-align: right;
    }

    .endgame-condition-status i[b-tjagqrdsqk] {
        flex: 0 0 auto;
        color: var(--endgame-status-color);
        font-size: 1.05em;
    }

    .endgame-result-card[b-tjagqrdsqk] {
        min-height: clamp(280px, 46vh, 390px);
        flex: 1;
        padding: clamp(16px, 2.2vw, 26px);
    }

    .endgame-result-copy[b-tjagqrdsqk] {
        position: relative;
        z-index: 2;
    }

    .endgame-result-message[b-tjagqrdsqk] {
        margin: 0;
        color: #fff;
        font-size: clamp(1.2rem, 2.15vw, 1.72rem);
        font-weight: 800;
        line-height: 1.42;
    }

    .endgame-statue-award[b-tjagqrdsqk] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: clamp(8px, 1.4vh, 14px);
        color: #fff;
        font-size: clamp(1rem, 1.65vw, 1.3rem);
        font-style: italic;
        line-height: 1.35;
    }

    .endgame-result-card.victory .endgame-statue-award[b-tjagqrdsqk] {
        max-width: 68%;
    }

    .endgame-statue-award span[b-tjagqrdsqk],
    .endgame-statue-award strong[b-tjagqrdsqk] {
        display: block;
    }

    .endgame-statue-award strong[b-tjagqrdsqk] {
        overflow-wrap: anywhere;
        font-weight: 900;
    }

    .endgame-statue[b-tjagqrdsqk] {
        position: absolute;
        right: clamp(12px, 1.5vw, 20px);
        bottom: clamp(12px, 1.8vh, 20px);
        z-index: 1;
        width: auto;
        height: clamp(150px, 25vh, 205px);
        max-width: 34%;
        object-fit: contain;
        filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.22));
    }

    @media (max-width: 1080px) {
        .endgame-summary-grid[b-tjagqrdsqk] {
            grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
        }

        .endgame-condition-body[b-tjagqrdsqk] {
            min-height: 110px;
        }

        .endgame-result-card.victory .endgame-statue-award[b-tjagqrdsqk] {
            max-width: 72%;
        }
    }

    @media (max-width: 960px) {
        .dashboard-grid.endgame-layout[b-tjagqrdsqk] {
            grid-template-columns: 1fr;
        }

        .endgame-layout .side-panel[b-tjagqrdsqk] {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

        .endgame-layout .interest-areas-section[b-tjagqrdsqk] {
            height: 300px;
        }
    }

    @media (max-width: 700px) {
        .endgame-summary-grid[b-tjagqrdsqk],
        .endgame-layout .side-panel[b-tjagqrdsqk] {
            grid-template-columns: 1fr;
        }

        .endgame-result-card[b-tjagqrdsqk] {
            min-height: 280px;
        }
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 768px) {
        .dashboard-observer-banner[b-tjagqrdsqk] {
            align-items: stretch;
            flex-direction: column;
        }

        .dashboard-observer-back[b-tjagqrdsqk] {
            align-self: flex-start;
        }

        .dashboard-header[b-tjagqrdsqk] {
            height: auto;
            min-height: 64px;
            padding: 12px 15px;
        }

        .header-content[b-tjagqrdsqk] {
            flex-direction: column;
            align-items: flex-start;
        }

        .phase-info[b-tjagqrdsqk] {
            width: 100%;
            justify-content: flex-start;
        }

        .dashboard-grid[b-tjagqrdsqk] {
            grid-template-columns: 1fr;
        }

        .side-panel[b-tjagqrdsqk] {
            order: -1;
        }

        .dashboard-grid.endgame-layout .side-panel[b-tjagqrdsqk] {
            order: initial;
        }
    }

    @media (max-width: 480px) {
        .main-content[b-tjagqrdsqk] {
            padding: 10px;
        }

        .dark-glass-card[b-tjagqrdsqk],
        .light-card[b-tjagqrdsqk],
        .player-card[b-tjagqrdsqk],
        .area-item[b-tjagqrdsqk] {
            border-radius: 10px;
        }

        .header-phase-center[b-tjagqrdsqk] {
            width: 100%;
            justify-content: center;
        }

        .phase-info[b-tjagqrdsqk] {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .phase-badge[b-tjagqrdsqk] {
            padding: 5px 10px;
            font-size: 0.75rem;
            justify-content: center;
        }

        .area-item[b-tjagqrdsqk] {
            padding: 10px;
        }

        .player-card[b-tjagqrdsqk] {
            padding: 10px;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/GameField.razor.rz.scp.css */
.game-header[b-w9jrpw7mt7] {
    background: var(--rw-blue, #1a5c7a);
}

.phase-card[b-w9jrpw7mt7] {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.phase-card.active[b-w9jrpw7mt7] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.secretary-highlight[b-w9jrpw7mt7] {
    border: 3px solid var(--brand-yellow);
    background: rgba(244, 199, 55, 0.08);
}

.secretary-card[b-w9jrpw7mt7] {
    max-width: 300px;
}

.player-card[b-w9jrpw7mt7] {
    transition: transform var(--dur-fast) var(--ease-out);
}

.player-card:hover[b-w9jrpw7mt7] {
    transform: translateY(-2px);
}

.player-score-row[b-w9jrpw7mt7] {
    cursor: pointer;
}

.role-avatar[b-w9jrpw7mt7] {
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.modal-backdrop-soft[b-w9jrpw7mt7] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop-strong[b-w9jrpw7mt7] {
    background-color: rgba(0, 0, 0, 0.8);
}

.impact-progress[b-w9jrpw7mt7] {
    height: 25px;
}

.results-floating-action[b-w9jrpw7mt7] {
    z-index: 1000;
}

/* anim-pulse is in animations.css — .pulse kept as alias */
.pulse[b-w9jrpw7mt7] {
    animation: anim-pulse-kf-b-w9jrpw7mt7 2s infinite;
}

@keyframes anim-pulse-kf-b-w9jrpw7mt7 {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

/* Skeleton loading state (replaces spinner) */
.game-field-skeleton[b-w9jrpw7mt7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: var(--sp-4);
}
/* _content/Municipality16.Shared/Components/Pages/GamePages/GameFieldRW.razor.rz.scp.css */
.game-container-rw[b-s88x6vuqol] {
        background: #0c3a58;
        min-height: 100vh;
        padding: 15px;
        position: relative;
        overflow-x: hidden;
    }



    .game-content-rw[b-s88x6vuqol] {
        position: relative;
        z-index: 1;
        max-width: 1400px;
        margin: 0 auto;
    }

    .observer-banner-rw[b-s88x6vuqol] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 15px;
        padding: 13px 16px;
        color: #fff;
        background: linear-gradient(135deg, #8a5a00 0%, #b97800 100%);
        border: 2px solid rgba(255, 255, 255, 0.9);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    }

    .observer-banner-copy-rw[b-s88x6vuqol] {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .observer-banner-copy-rw > i[b-s88x6vuqol] {
        flex: 0 0 auto;
        font-size: 1.45rem;
    }

    .observer-banner-copy-rw strong[b-s88x6vuqol],
    .observer-banner-copy-rw span[b-s88x6vuqol] {
        display: block;
    }

    .observer-banner-copy-rw strong[b-s88x6vuqol] {
        font-size: 1rem;
        line-height: 1.2;
    }

    .observer-banner-copy-rw span[b-s88x6vuqol] {
        margin-top: 2px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 0.84rem;
    }

    .observer-back-link-rw[b-s88x6vuqol] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        flex: 0 0 auto;
        padding: 8px 12px;
        color: #0c3a58;
        background: #fff;
        border-radius: 9px;
        font-size: 0.86rem;
        font-weight: 700;
        text-decoration: none;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .observer-back-link-rw:hover[b-s88x6vuqol] {
        color: #0c3a58;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .game-card-rw[b-s88x6vuqol] {
        background: #ffffff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        margin-bottom: 15px;
    }

    .game-header-rw[b-s88x6vuqol] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
    }

    .header-left-rw[b-s88x6vuqol] {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .game-logo-rw[b-s88x6vuqol] {
        width: 80px;
        height: auto;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    .header-info-rw[b-s88x6vuqol] {
        text-align: left;
    }

    .game-title-rw[b-s88x6vuqol] {
        color: #0c3a58;
        font-weight: 700;
        font-size: 1.3rem;
        margin: 0 0 2px 0;
    }

    .game-subtitle-rw[b-s88x6vuqol] {
        color: #6c757d;
        font-size: 0.85rem;
        margin: 0;
    }

    .round-badge-rw[b-s88x6vuqol] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #0c3a58;
        color: white;
        padding: 8px 18px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.95rem;
        box-shadow: 0 3px 10px rgba(26, 92, 122, 0.3);
    }

    .section-card-rw[b-s88x6vuqol] {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
    }

    .section-title-rw[b-s88x6vuqol] {
        color: #0c3a58;
        font-weight: 700;
        font-size: 1rem;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .section-title-rw i[b-s88x6vuqol] {
        color: #1a5c7a;
        font-size: 1.1rem;
    }

    .phase-secretary-row[b-s88x6vuqol] {
        display: flex;
        gap: 15px;
        align-items: stretch;
    }

    .phase-display-rw[b-s88x6vuqol] {
        flex: 1;
        text-align: center;
        padding: 15px 20px;
        background: rgba(26, 92, 122, 0.05);
        border-radius: 12px;
        border: 2px solid rgba(26, 92, 122, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    .phase-icon-rw[b-s88x6vuqol] {
        font-size: 2rem;
    }

    .phase-info-rw[b-s88x6vuqol] {
        text-align: left;
    }

    .phase-name-rw[b-s88x6vuqol] {
        color: #0c3a58;
        font-weight: 700;
        font-size: 1.2rem;
        margin: 0 0 4px 0;
    }

    .phase-description-rw[b-s88x6vuqol] {
        color: #6c757d;
        font-size: 0.85rem;
        margin: 0;
        max-width: 500px;
        margin: 0 auto;
    }

    .secretary-card-rw[b-s88x6vuqol] {
        border: 2px solid #e5a923;
        border-radius: 12px;
        padding: 12px 20px;
        text-align: center;
        background: rgba(243, 156, 18, 0.05);
        min-width: 160px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .secretary-label-rw[b-s88x6vuqol] {
        color: #e5a923;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        line-height: 1;
    }

    .secretary-icon-rw[b-s88x6vuqol] {
        width: 32px;
        height: 32px;
        display: block;
        object-fit: contain;
    }

    .secretary-name-rw[b-s88x6vuqol] {
        color: #0c3a58;
        font-weight: 700;
        font-size: 1rem;
        margin: 0;
    }

    .secretary-role-rw[b-s88x6vuqol] {
        color: #6c757d;
        font-size: 0.8rem;
        margin: 0;
    }

    .controls-grid-rw[b-s88x6vuqol] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .phase-btn-rw[b-s88x6vuqol] {
        padding: 15px 20px;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .phase-btn-rw:disabled[b-s88x6vuqol] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

    .phase-btn-active[b-s88x6vuqol] {
        background: #28a745;
        color: white;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .phase-btn-available[b-s88x6vuqol] {
        background: #0c3a58;
        color: white;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .phase-btn-available:hover:not(:disabled)[b-s88x6vuqol] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .phase-btn-locked[b-s88x6vuqol] {
        background: #e0e0e0;
        color: #6c757d;
    }

    /* Secretary tie-break pending (rules p. 4, step 4): the facilitator must resolve it
       before continuing, so the Phase 3 button calls that out instead of just being locked. */
    .phase-btn-tie-break[b-s88x6vuqol] {
        background: #ffc107;
        color: #3a2e00;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
    }

    .phase-btn-tie-break-content[b-s88x6vuqol] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-align: center;
    }

    .phase-btn-tie-break-title[b-s88x6vuqol] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .phase-btn-tie-break-desc[b-s88x6vuqol] {
        font-weight: 500;
        opacity: 0.85;
        font-size: 0.75rem;
    }

    .action-btn-rw[b-s88x6vuqol] {
        padding: 12px 25px;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
    }

    .btn-primary-rw[b-s88x6vuqol] {
        background: #0c3a58;
        color: white;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .btn-primary-rw:hover[b-s88x6vuqol] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .btn-success-rw[b-s88x6vuqol] {
        background: #28a745;
        color: white;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .btn-success-rw:hover[b-s88x6vuqol] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .btn-danger-rw[b-s88x6vuqol] {
        background: #dc3545;
        color: white;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .btn-danger-rw:hover[b-s88x6vuqol] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .btn-info-rw[b-s88x6vuqol] {
        background: #1a5c7a;
        color: white;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .btn-info-rw:hover[b-s88x6vuqol] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .stats-grid-rw[b-s88x6vuqol] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }

    .stat-card-rw[b-s88x6vuqol] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .stat-value-rw[b-s88x6vuqol] {
        font-size: 2rem;
        font-weight: 700;
        color: #1a5c7a;
    }

    .stat-label-rw[b-s88x6vuqol] {
        color: #6c757d;
        font-size: 0.85rem;
        margin-top: 5px;
    }

    .player-table-rw[b-s88x6vuqol] {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .player-table-rw th[b-s88x6vuqol] {
        background: #0c3a58;
        color: white;
        padding: 12px 15px;
        text-align: left;
        font-weight: 600;
    }

    .player-table-rw th:first-child[b-s88x6vuqol] {
        border-radius: 12px 0 0 0;
    }

    .player-table-rw th:last-child[b-s88x6vuqol] {
        border-radius: 0 12px 0 0;
    }

    .player-table-rw td[b-s88x6vuqol] {
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .player-table-rw tr:last-child td[b-s88x6vuqol] {
        border-bottom: none;
    }

    .player-table-rw tr:hover[b-s88x6vuqol] {
        background: rgba(26, 92, 122, 0.05);
    }

    .rank-badge-rw[b-s88x6vuqol] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        vertical-align: middle;
    }

    .rank-player-icon-rw[b-s88x6vuqol] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .rank-player-icon-fallback-rw[b-s88x6vuqol] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: #1a5c7a;
        color: white;
        font-size: 1rem;
    }

    .points-badge-rw[b-s88x6vuqol] {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .points-positive[b-s88x6vuqol] { background: #d4edda; color: #155724; }
    .points-negative[b-s88x6vuqol] { background: #f8d7da; color: #721c24; }

    .change-badge-rw[b-s88x6vuqol] {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .change-positive[b-s88x6vuqol] { background: #28a745; color: white; }
    .change-negative[b-s88x6vuqol] { background: #dc3545; color: white; }

    .phase-status-rw[b-s88x6vuqol] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 96px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .phase-status-rw.done[b-s88x6vuqol] {
        background: rgba(40, 167, 69, 0.14);
        color: #1e7e34;
        border: 1px solid rgba(40, 167, 69, 0.35);
    }

    .phase-status-rw.waiting[b-s88x6vuqol] {
        background: rgba(108, 117, 125, 0.14);
        color: #5f6870;
        border: 1px solid rgba(108, 117, 125, 0.28);
    }

    .phase-status-rw.on-turn[b-s88x6vuqol] {
        background: rgba(243, 156, 18, 0.16);
        color: #b9770e;
        border: 1px solid rgba(243, 156, 18, 0.4);
    }

    .phase-status-rw i[b-s88x6vuqol] {
        font-size: 0.95rem;
    }

    .modal-overlay-rw[b-s88x6vuqol] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1050;
    }

    .modal-content-rw[b-s88x6vuqol] {
        background: white;
        border-radius: 12px;
        max-width: 800px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .modal-header-rw[b-s88x6vuqol] {
        padding: 20px 25px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .modal-header-rw.success[b-s88x6vuqol] { background: #28a745; color: white; }
    .modal-header-rw.danger[b-s88x6vuqol] { background: #dc3545; color: white; }

    .modal-body-rw[b-s88x6vuqol] {
        padding: 25px;
    }

    .modal-footer-rw[b-s88x6vuqol] {
        padding: 15px 25px;
        border-top: 1px solid #e0e0e0;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .close-btn-rw[b-s88x6vuqol] {
        background: transparent;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: inherit;
        opacity: 0.8;
    }

    .close-btn-rw:hover[b-s88x6vuqol] {
        opacity: 1;
    }

    .loading-container-rw[b-s88x6vuqol] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
    }

    .spinner-rw[b-s88x6vuqol] {
        width: 60px;
        height: 60px;
        border: 5px solid rgba(255,255,255,0.2);
        border-top-color: white;
        border-radius: 50%;
        animation: spin-b-s88x6vuqol 0.8s linear infinite;
    }

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

    .loading-text-rw[b-s88x6vuqol] {
        color: white;
        font-size: 1.2rem;
        margin-top: 20px;
        font-weight: 600;
    }

    .not-authorized-rw[b-s88x6vuqol] {
        background: #ffffff;
        border-radius: 12px;
        padding: 50px;
        max-width: 500px;
        margin: 100px auto;
        text-align: center;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .row-rw[b-s88x6vuqol] {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 25px;
    }

    .col-main-rw[b-s88x6vuqol] {
        flex: 2;
        min-width: 300px;
        display: flex;
    }

    .col-side-rw[b-s88x6vuqol] {
        flex: 1;
        min-width: 280px;
        display: flex;
    }

    .row-rw > .col-main-rw > .game-card-rw[b-s88x6vuqol],
    .row-rw > .col-side-rw > .game-card-rw[b-s88x6vuqol] {
        flex: 1;
        margin-bottom: 0;
    }

    .sponsor-logos-rw[b-s88x6vuqol] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        justify-items: center;
        gap: clamp(8px, 1.5vw, 12px);
        margin-top: 12px;
        padding: clamp(10px, 1.6vw, 14px);
        border-radius: 10px;
        background: #fff;
        border: 1px solid rgba(12, 58, 88, 0.1);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.08);
    }

    .sponsor-logos-rw img[b-s88x6vuqol] {
        display: block;
        width: clamp(52px, 5vw, 68px);
        max-width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: contain;
    }

    .action-buttons-rw[b-s88x6vuqol] {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin-top: 20px;
    }

    .badge-count-rw[b-s88x6vuqol] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #e5a923;
        color: white;
        min-width: 42px;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.75rem;
        font-weight: 800;
        margin-left: 5px;
    }

    @media (max-width: 768px) {
        .game-container-rw[b-s88x6vuqol] {
            padding: 10px;
        }

        .observer-banner-rw[b-s88x6vuqol] {
            align-items: stretch;
            flex-direction: column;
        }

        .observer-back-link-rw[b-s88x6vuqol] {
            align-self: flex-start;
        }

        .game-card-rw[b-s88x6vuqol] {
            border-radius: 12px;
            padding: 14px;
        }

        .game-header-rw[b-s88x6vuqol] {
            flex-direction: column;
            text-align: center;
        }

        .header-left-rw[b-s88x6vuqol] {
            flex-direction: column;
        }

        .header-info-rw[b-s88x6vuqol] {
            text-align: center;
        }

        .phase-secretary-row[b-s88x6vuqol] {
            flex-direction: column;
        }

        .phase-display-rw[b-s88x6vuqol] {
            flex-direction: column;
            text-align: center;
        }

        .phase-info-rw[b-s88x6vuqol] {
            text-align: center;
        }

        .controls-grid-rw[b-s88x6vuqol] {
            grid-template-columns: 1fr 1fr;
        }

        .row-rw[b-s88x6vuqol] {
            flex-direction: column;
        }
    }

    @media (max-width: 480px) {
        .game-container-rw[b-s88x6vuqol] {
            padding: 8px;
        }

        .controls-grid-rw[b-s88x6vuqol],
        .action-buttons-rw[b-s88x6vuqol] {
            display: grid;
            grid-template-columns: 1fr;
        }

        .action-buttons-rw[b-s88x6vuqol],
        .phase-secretary-row[b-s88x6vuqol] {
            gap: 8px;
        }

        .phase-btn-rw[b-s88x6vuqol],
        .action-btn-rw[b-s88x6vuqol] {
            width: 100%;
            min-height: var(--tap-comfort, 56px);
            padding: 12px 14px;
            border-radius: 10px;
        }

        .round-badge-rw[b-s88x6vuqol] {
            width: 100%;
            justify-content: center;
        }

        .col-main-rw[b-s88x6vuqol],
        .col-side-rw[b-s88x6vuqol] {
            min-width: 0;
            width: 100%;
        }

        .sponsor-logos-rw[b-s88x6vuqol] {
            gap: clamp(8px, 2.5vw, 12px);
            padding: clamp(8px, 2.5vw, 12px);
        }

        .sponsor-logos-rw img[b-s88x6vuqol] {
            width: clamp(46px, 15vw, 60px);
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/GameParticipants.razor.rz.scp.css */
.player-interface[b-mc502r1g26] {
        background: #0c3a58;
        min-height: 100vh;
        position: relative;
    }

    /* Červený header - phase indicator */
    .phase-indicator[b-mc502r1g26] {
        background: #dc3545;
        color: white;
        padding: 20px 0;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        position: relative;
        z-index: 100;
    }

    .phase-indicator[b-mc502r1g26]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: #1a5c7a;
    }

    .multiplier-info[b-mc502r1g26] {
        background: rgba(255, 255, 255, 0.25);
        padding: 3px 8px;
        border-radius: 10px;
        font-size: 0.75rem;
        margin-left: auto;
        font-weight: 600;
    }

    .preference-badges[b-mc502r1g26] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .preference-badge[b-mc502r1g26] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
        transition: all 0.3s ease;
        cursor: pointer;
        min-width: fit-content;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .preference-badge:hover[b-mc502r1g26] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .supported-badge[b-mc502r1g26] {
        background: #28a745;
        color: white;
    }

    .not-supported-badge[b-mc502r1g26] {
        background: #dc3545;
        color: white;
    }

    .badge-icon[b-mc502r1g26] {
        font-size: 1.1rem;
    }

    .badge-text[b-mc502r1g26] {
        font-weight: 600;
    }

    /* Main content area styling */
    .main-content-wrapper[b-mc502r1g26] {
        padding: 20px;
    }

    .finish-presentation-container[b-mc502r1g26] {
        text-align: center;
        margin-top: 20px;
    }

    .btn-finish-presentation[b-mc502r1g26] {
        background: #28a745;
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        cursor: pointer;
    }

    .presetingcards[b-mc502r1g26] {
        padding: 20px;
        max-height: 400px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Presentation projects container */
    .presentation-projects-container[b-mc502r1g26] {
        max-height: 500px;
        overflow-y: auto;
        margin-bottom: 20px;
        padding-right: 10px;
    }

    .presentation-projects-container[b-mc502r1g26]::-webkit-scrollbar {
        width: 8px;
    }

    .presentation-projects-container[b-mc502r1g26]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }

    .presentation-projects-container[b-mc502r1g26]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
    }

    .presentation-projects-container[b-mc502r1g26]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }

    .btn-finish-presentation:hover[b-mc502r1g26] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        background: #1e7e34;
    }

    .btn-finish-presentation:active[b-mc502r1g26] {
        transform: translateY(0);
    }

    .btn-finish-presentation:disabled[b-mc502r1g26] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .waiting-screen[b-mc502r1g26] {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 40px;
        text-align: center;
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .segmented-control[b-mc502r1g26] {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 5px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Controls Header - Toggle + Confirm Button */
    .controls-header[b-mc502r1g26] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        gap: 20px;
        flex-wrap: wrap;
    }

    /* Confirm Button Styling */
    .confirm-button-container[b-mc502r1g26] {
        display: flex;
        align-items: center;
    }

    .btn-confirm-elegant[b-mc502r1g26] {
        background: #28a745;
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        cursor: pointer;
    }

    .btn-confirm-elegant:hover:not(:disabled)[b-mc502r1g26] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        background: #1e7e34;
    }

    .btn-confirm-elegant:active[b-mc502r1g26] {
        transform: translateY(0);
    }

    .btn-confirm-elegant:disabled[b-mc502r1g26] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .btn-confirm-disabled[b-mc502r1g26] {
        background: rgba(108, 117, 125, 0.3);
        border: 1px solid rgba(108, 117, 125, 0.5);
        color: rgba(255, 255, 255, 0.7);
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 500;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: not-allowed;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .controls-header[b-mc502r1g26] {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .segmented-control[b-mc502r1g26] {
            align-self: center;
        }

        .confirm-button-container[b-mc502r1g26] {
            justify-content: center;
        }

        .btn-confirm-elegant[b-mc502r1g26],
        .btn-confirm-disabled[b-mc502r1g26] {
            width: 100%;
            justify-content: center;
        }
    }

    .segmented-control button[b-mc502r1g26] {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.8);
        padding: 10px 24px;
        border-radius: 12px;
        transition: all 0.3s ease;
        cursor: pointer;
        font-weight: 600;
    }

    .segmented-control button.active[b-mc502r1g26] {
        background: #ffffff;
        color: var(--background-colorful-primary, var(--brand-cyan-dark, #1a5c7a));
        font-weight: 700;
    }

    /* Card enhancements */
    .card[b-mc502r1g26] {
        background: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .card-header[b-mc502r1g26] {
        border-radius: 12px 16px 0 0 !important;
        background: rgba(0, 0, 0, 0.2);
        font-weight: 600;
    }

    .floating-action[b-mc502r1g26] {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }

    .project-unavailable[b-mc502r1g26] {
        opacity: 0.5;
        pointer-events: none;
        position: relative;
    }

    .project-unavailable[b-mc502r1g26]::after {
        content: "Již vybráno jiným hráčem";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 0, 0, 0.9);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 10;
        font-weight: 600;
    }

    .project-selection-section[b-mc502r1g26] {
        background: rgba(255, 255, 255, 0.02);
        border-radius: 12px;
        padding: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .projects-category .category-header h5[b-mc502r1g26] {
        margin-bottom: 0;
        font-weight: 600;
    }

    .project-selection-wrapper[b-mc502r1g26] {
        height: 100%;
        transition: transform 0.2s ease;
    }

    .project-selection-wrapper:hover[b-mc502r1g26] {
        transform: translateY(-2px);
    }

    .project-unavailable[b-mc502r1g26] {
        opacity: 0.4;
        pointer-events: none;
    }

    .section-divider[b-mc502r1g26] {
        height: 2px;
        background: transparent;
        border: none;
        margin: 2rem 0;
    }

    .status-card[b-mc502r1g26] {
        background: #1a5c7a;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        padding: 1.5rem;
    }

    .status-info[b-mc502r1g26] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-success[b-mc502r1g26] {
        background: #28a745;
        border: none;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .btn-success:hover[b-mc502r1g26] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .selection-header h4[b-mc502r1g26] {
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .player-wallet-wrapper[b-mc502r1g26] {
        padding: 0;
    }

    /* Nový top layout - flexbox pro wallet, selected projects, title */
    .top-layout-container[b-mc502r1g26] {
        display: flex;
        gap: 20px;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 0 20px;
    }

    .wallet-section[b-mc502r1g26] {
        flex: 0 0 auto;
        min-width: 280px;
        max-width: 320px;
    }

    .selected-section[b-mc502r1g26] {
        flex: 0 1 auto;
        min-width: 280px;
        max-width: 620px;
        margin: 0 auto;
    }

    .title-section[b-mc502r1g26] {
        flex: 0 0 auto;
        min-width: 250px;
        max-width: 400px;
        margin-left: auto;
    }

    /* Responzivní úpravy pro top layout */
    @media (max-width: 1400px) {
        .title-section[b-mc502r1g26] {
            flex: 1 1 100%;
            max-width: none;
            margin-left: 0;
            text-align: center !important;
        }
        
        .title-section .text-end[b-mc502r1g26] {
            text-align: center !important;
        }
    }

    @media (max-width: 992px) {
        .top-layout-container[b-mc502r1g26] {
            flex-direction: column;
            align-items: center;
        }

        .wallet-section[b-mc502r1g26] {
            flex: 0 0 auto;
            max-width: 320px;
            width: 100%;
        }

        .selected-section[b-mc502r1g26] {
            flex: 0 0 auto;
            max-width: 100%;
            width: 100%;
        }

        .title-section[b-mc502r1g26] {
            flex: 0 0 auto;
            max-width: none;
            width: 100%;
        }

        .title-section[b-mc502r1g26] {
            order: -1; /* Title na začátek na mobilech */
        }
    }

    /* Container + header */
    .selected-projects-display[b-mc502r1g26] {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    .selected-projects-header h5[b-mc502r1g26] {
        font-weight: 600;
        line-height: 1.25;
    }

    /* Flexbox centered layout with fixed-width cards */
    .selected-projects-grid[b-mc502r1g26] {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        align-items: flex-start;
    }

    /* Card sizing - FIXED width for consistency */
    .selected-project-card[b-mc502r1g26] {
        width: 260px;
        flex: 0 0 260px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    }

    .selected-card-content[b-mc502r1g26] {
        padding: 6px;
    }

    /* Make the deselect button small and unobtrusive */
    .btn-deselect[b-mc502r1g26] {
        align-self: center;
        padding: 4px 10px;
        font-size: 0.875rem;
        line-height: 1.2;
        border-radius: 999px;
    }

    /* --- Mobile first tweaks --- */
    @media (max-width: 575.98px) {
        .selected-projects-display[b-mc502r1g26] {
            max-width: 100%;
            padding: 15px;
        }

        .selected-projects-header h5[b-mc502r1g26] {
            font-size: 1rem;
            margin-bottom: 6px;
        }

        .selected-projects-grid[b-mc502r1g26] {
            flex-direction: column;
            align-items: center;
        }

        .selected-project-card[b-mc502r1g26] {
            width: 100%;
            max-width: 300px;
            flex: 0 0 auto;
            padding: 8px;
            border-radius: 12px;
        }

        .selected-card-content[b-mc502r1g26] {
            padding: 4px;
        }

        .btn-deselect[b-mc502r1g26] {
            font-size: 0.82rem;
            padding: 4px 12px;
        }
    }

    /* --- Small tablets --- */
    /* Optional: slightly shrink inner ProjectCard content if it has known classes */
    .selected-card-content .project-card[b-mc502r1g26],
    .selected-card-content .card[b-mc502r1g26] {
        --card-padding: 8px;
        font-size: 0.95rem;
    }

    .selected-card-content .card-title[b-mc502r1g26],
    .selected-card-content .project-card-title[b-mc502r1g26] {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .selected-card-content .badge[b-mc502r1g26],
    .selected-card-content .tag[b-mc502r1g26] {
        transform: scale(0.95);
    }

    /* Make icons crisp on dark backgrounds */
    .selected-projects-header .bi[b-mc502r1g26] {
        vertical-align: -2px;
    }

    /* Sekce vybraných projektů - styling */
    .selected-projects-display[b-mc502r1g26] {
        background: rgba(40, 167, 69, 0.2);
        border: 2px solid rgba(40, 167, 69, 0.5);
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        max-width: 600px;
        margin: 0 auto;
    }

    .selected-projects-header[b-mc502r1g26] {
        margin-bottom: 15px;
        text-align: center;
    }

    .selected-projects-header h5[b-mc502r1g26] {
        color: white;
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    /* Flexbox centered layout - FINAL override */
    .selected-projects-grid[b-mc502r1g26] {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        align-items: flex-start;
    }

    /* Card sizing - FIXED width */
    .selected-project-card[b-mc502r1g26] {
        width: 260px;
        flex: 0 0 260px;
        position: relative;
        border-radius: 12px;
        padding: 8px;
        border: 3px solid #28a745;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        transition: all 0.3s ease;
        cursor: pointer;
        background: rgba(255,255,255,0.05);
    }

    .selected-project-card:hover[b-mc502r1g26] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        border-color: #dc3545;
    }

    .btn-deselect[b-mc502r1g26] {
        width: 100%;
        background: #dc3545;
        border: none;
        color: white;
        padding: 10px 16px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.3s ease;
        cursor: pointer;
        margin-top: 10px;
    }

    .btn-deselect:hover[b-mc502r1g26] {
        background: #c82333;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    /* Tablet responsive */
    @media (min-width: 576px) and (max-width: 991.98px) {
        .selected-projects-display[b-mc502r1g26] {
            max-width: 550px;
        }

        .selected-project-card[b-mc502r1g26] {
            width: 240px;
            flex: 0 0 240px;
        }
    }

    /* Mobile responsive */
    @media (max-width: 575.98px) {
        .selected-projects-display[b-mc502r1g26] {
            max-width: 100%;
            padding: 15px;
        }

        .selected-projects-grid[b-mc502r1g26] {
            flex-direction: column;
            align-items: center;
        }

        .selected-project-card[b-mc502r1g26] {
            width: 100%;
            max-width: 280px;
            flex: 0 0 auto;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/GameParticipantsRW.razor.rz.scp.css */
/* ========== HLAVNÍ KONTEJNER ========== */
    .game-container[b-6m04x1czxb] {
        background: #0c3a58;
        min-height: 100vh;
        position: relative;
        overflow-x: clip; /* "hidden" establishes a scroll container and breaks position:sticky on .phase-header */
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .game-container *[b-6m04x1czxb] {
        box-sizing: border-box;
    }



    /* ========== HEADER FÁZE ========== */
    .phase-header[b-6m04x1czxb] {
        background: rgba(12, 58, 88, 0.95);
        padding: clamp(12px, 2vh, 20px) clamp(15px, 3vw, 30px);
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    }

    .phase-header[b-6m04x1czxb]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: clamp(2px, 0.5vh, 4px);
    }

    .phase-header-content[b-6m04x1czxb] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: clamp(8px, 1.5vw, 15px);
        position: relative;
        z-index: 1;
    }

    .phase-title[b-6m04x1czxb] {
        color: white;
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: clamp(6px, 1vw, 12px);
        flex: 1 1 260px;
        min-width: min(100%, 240px);
        justify-content: flex-end;
        text-align: right;
    }

    .phase-badge[b-6m04x1czxb] {
        background: rgba(255, 255, 255, 0.2);
        padding: clamp(4px, 0.8vh, 6px) clamp(10px, 1.5vw, 14px);
        border-radius: 12px;
        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
        font-weight: 600;
    }

    .user-info-badge[b-6m04x1czxb] {
        display: flex;
        align-items: center;
        gap: clamp(6px, 1vw, 10px);
        background: rgba(255, 255, 255, 0.15);
        padding: clamp(6px, 1vh, 8px) clamp(12px, 2vw, 16px);
        border-radius: 12px;
        color: white;
        font-weight: 600;
        font-size: clamp(0.75rem, 1.8vw, 1rem);
    }

    .phase-wallet-slot[b-6m04x1czxb] {
        display: flex;
        flex: 0 1 460px;
        justify-content: flex-start;
        min-width: min(100%, 260px);
    }

    .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact {
        width: fit-content;
        max-width: 100%;
        margin-left: 0;
    }

    /* ========== HLAVNÍ OBSAH ========== */
    .main-content[b-6m04x1czxb] {
        padding: clamp(15px, 3vh, 30px) clamp(10px, 2vw, 30px);
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
    }

    /* ========== LAYOUT GRID ========== */
    .top-section[b-6m04x1czxb] {
        width: 100%;
        margin-bottom: clamp(20px, 3vh, 30px);
    }

    /* ========== KARTY ========== */
    .glass-card[b-6m04x1czxb] {
        background: #ffffff;
        border-radius: clamp(12px, 2vw, 20px);
        padding: clamp(15px, 2.5vh, 25px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.3);
        position: relative;
        overflow: hidden;
    }

    .glass-card[b-6m04x1czxb]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: clamp(2px, 0.5vh, 4px);
        background: #28a745;
    }

    .dark-glass-card[b-6m04x1czxb] {
        background: rgba(12, 58, 88, 0.95);
        padding: clamp(15px, 2.5vh, 25px);
        color: white;
    }

    .card-header-custom[b-6m04x1czxb] {
        display: flex;
        align-items: center;
        gap: clamp(8px, 1.2vw, 12px);
        margin-bottom: clamp(12px, 2vh, 20px);
        padding-bottom: clamp(10px, 1.5vh, 15px);
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    }

    .card-header-custom h3[b-6m04x1czxb] {
        margin: 0;
        font-weight: 700;
        font-size: clamp(1rem, 2vw, 1.2rem);
        color: #0c3a58;
    }

    .card-header-custom .icon[b-6m04x1czxb] {
        width: clamp(30px, 4vw, 40px);
        height: clamp(30px, 4vw, 40px);
        border-radius: clamp(8px, 1.2vw, 12px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(1rem, 2vw, 1.2rem);
    }

    .icon-green[b-6m04x1czxb] {
        background: #28a745;
        color: white;
    }

    .icon-blue[b-6m04x1czxb] {
        background: #1a5c7a;
        color: white;
    }

    .icon-warning[b-6m04x1czxb] {
        background: #ffc107;
        color: white;
    }

    /* ========== SELECTED PROJECTS ========== */
    .selected-projects-section[b-6m04x1czxb] {
        padding: clamp(8px, 1.5vh, 12px);
        width: 100%;
        margin: 0 0 15px 0;
    }

    .selected-projects-grid[b-6m04x1czxb] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        align-items: flex-start;
    }

    .selected-project-item[b-6m04x1czxb] {
        position: relative;
        border-radius: 3px;
        overflow: visible;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        cursor: pointer;
        width: 280px;
        flex: 0 0 280px;
        background: transparent;
    }

    .selected-project-item:hover[b-6m04x1czxb] {
        box-shadow: 0 6px 20px rgba(12, 58, 88, 0.25);
    }

    @media (hover: none) {
        .selected-project-item:hover[b-6m04x1czxb] {
            transform: none;
        }
        .selected-project-item:active[b-6m04x1czxb] {
        }
    }

    @media (max-width: 480px) {
        .selected-project-item[b-6m04x1czxb] {
            width: 100%;
            flex: 0 0 100%;
            max-width: 300px;
        }
    }

    /* ========== TLAČÍTKA ========== */
    .btn-primary-custom[b-6m04x1czxb] {
        background: #28a745;
        border: none;
        border-radius: clamp(10px, 1.4vw, 14px);
        color: white;
        padding: clamp(10px, 1.5vh, 14px) clamp(18px, 3vw, 28px);
        font-weight: 700;
        font-size: clamp(0.85rem, 1.8vw, 1rem);
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        display: inline-flex;
        align-items: center;
        gap: clamp(6px, 1vw, 10px);
        -webkit-appearance: none;
        appearance: none;
        touch-action: manipulation;
    }

    .btn-primary-custom:hover:not(:disabled)[b-6m04x1czxb] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .btn-primary-custom:disabled[b-6m04x1czxb] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .btn-secondary-custom[b-6m04x1czxb] {
        background: rgba(108, 117, 125, 0.2);
        border: 2px solid rgba(108, 117, 125, 0.4);
        border-radius: clamp(10px, 1.4vw, 14px);
        color: rgba(255, 255, 255, 0.8);
        padding: clamp(10px, 1.5vh, 14px) clamp(18px, 3vw, 28px);
        font-weight: 600;
        font-size: clamp(0.85rem, 1.8vw, 1rem);
        cursor: not-allowed;
        display: inline-flex;
        align-items: center;
        gap: clamp(6px, 1vw, 10px);
    }

    .btn-danger-custom[b-6m04x1czxb] {
        background: #dc3545;
        border: none;
        border-radius: clamp(8px, 1vw, 10px);
        color: white;
        padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 18px);
        font-weight: 600;
        font-size: clamp(0.75rem, 1.5vw, 0.9rem);
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        display: inline-flex;
        align-items: center;
        gap: clamp(4px, 0.8vw, 8px);
    }

    .btn-danger-custom:hover[b-6m04x1czxb] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    @media (hover: none) {
        .btn-primary-custom:hover:not(:disabled)[b-6m04x1czxb],
        .btn-danger-custom:hover[b-6m04x1czxb] {
            transform: none;
        }
        .btn-primary-custom:active:not(:disabled)[b-6m04x1czxb],
        .btn-danger-custom:active[b-6m04x1czxb] {
        }
    }

    /* ========== SEGMENTED CONTROL ========== */
    .view-toggle[b-6m04x1czxb] {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 5px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .view-toggle button[b-6m04x1czxb] {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        padding: 10px 20px;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .view-toggle button.active[b-6m04x1czxb] {
        background: white;
        color: #0c3a58;
    }

    /* ========== WAITING SCREEN ========== */
    .waiting-card[b-6m04x1czxb] {
        background: rgba(12, 58, 88, 0.9);
        border-radius: clamp(15px, 2.5vw, 25px);
        padding: clamp(30px, 5vh, 50px);
        text-align: center;
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.2);
        max-width: min(90%, 600px);
        margin: 0 auto;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .waiting-card .icon-large[b-6m04x1czxb] {
        font-size: clamp(2.5rem, 6vw, 4rem);
        margin-bottom: clamp(12px, 2vh, 20px);
    }

    .waiting-card h3[b-6m04x1czxb] {
        font-size: clamp(1.2rem, 3vw, 1.8rem);
        font-weight: 700;
        margin-bottom: clamp(10px, 1.5vh, 15px);
    }

    .waiting-card p[b-6m04x1czxb] {
        font-size: clamp(0.9rem, 2vw, 1.1rem);
        opacity: 0.9;
        margin-bottom: clamp(6px, 1vh, 10px);
    }

    .spinner-custom[b-6m04x1czxb] {
        width: clamp(35px, 5vw, 50px);
        height: clamp(35px, 5vw, 50px);
        border: clamp(3px, 0.4vw, 4px) solid rgba(255, 255, 255, 0.2);
        border-top-color: #28a745;
        border-radius: 50%;
        animation: spin-b-6m04x1czxb 1s linear infinite;
        margin: 0 auto clamp(15px, 2.5vh, 25px);
    }

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

    /* ========== PLAYER LIST ========== */
    .player-list[b-6m04x1czxb] {
        list-style: none;
        padding: 0;
        margin: clamp(15px, 2.5vh, 25px) 0 0;
    }

    .player-list-item[b-6m04x1czxb] {
        display: flex;
        align-items: center;
        gap: clamp(8px, 1.2vw, 12px);
        padding: clamp(8px, 1.2vh, 12px) clamp(10px, 1.6vw, 16px);
        background: rgba(255, 255, 255, 0.08);
        border-radius: clamp(8px, 1.2vw, 12px);
        margin-bottom: clamp(6px, 1vh, 10px);
    }

    .player-list-item:hover[b-6m04x1czxb] {
        background: rgba(255, 255, 255, 0.12);
    }

    .player-status-icon[b-6m04x1czxb] {
        font-size: clamp(1.1rem, 2.2vw, 1.3rem);
        flex: 0 0 auto;
    }

    .player-role-icon[b-6m04x1czxb],
    .turn-player-avatar[b-6m04x1czxb] {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.12);
        overflow: hidden;
    }

    .player-role-icon img[b-6m04x1czxb],
    .turn-player-avatar img[b-6m04x1czxb] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .player-role-icon i[b-6m04x1czxb],
    .turn-player-avatar i[b-6m04x1czxb] {
        color: rgba(255, 255, 255, 0.75);
        font-size: 1rem;
    }

    .player-name[b-6m04x1czxb] {
        font-weight: 600;
        font-size: clamp(0.85rem, 1.8vw, 1rem);
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .player-list-item > div[b-6m04x1czxb] {
        min-width: 0;
        text-align: left;
    }

    .player-name-role-wrap[b-6m04x1czxb] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .player-role[b-6m04x1czxb] {
        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
        opacity: 0.8;
        text-align: left;
    }

    .turn-player-card[b-6m04x1czxb] {
        display: inline-grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        margin: 12px auto 4px;
        padding: 10px 14px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.16);
        text-align: left;
    }

    .turn-player-label[b-6m04x1czxb] {
        color: rgba(255, 255, 255, 0.76);
        font-size: 0.9rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .turn-player-text[b-6m04x1czxb] {
        display: grid;
        min-width: 0;
        line-height: 1.15;
    }

    .turn-player-text strong[b-6m04x1czxb] {
        color: #fff;
        font-size: 1rem;
    }

    .turn-player-text small[b-6m04x1czxb] {
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.78rem;
        margin-top: 2px;
    }

    @media (max-width: 576px) {
        .turn-player-card[b-6m04x1czxb] {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            width: 100%;
        }

        .turn-player-label[b-6m04x1czxb] {
            grid-column: 1 / -1;
        }
    }

    .secretary-icon[b-6m04x1czxb] {
        flex: 0 0 auto;
        display: block;
        width: clamp(18px, 2.2vw, 22px);
        height: clamp(18px, 2.2vw, 22px);
        align-self: center;
    }

    /* ========== PROJECTS SECTION ========== */
    .projects-section[b-6m04x1czxb] {
        margin-top: clamp(20px, 3vh, 30px);
    }

    .projects-section-header[b-6m04x1czxb] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: clamp(15px, 2.5vh, 25px);
        flex-wrap: wrap;
        gap: clamp(10px, 1.5vw, 15px);
    }

    .section-title[b-6m04x1czxb] {
        color: white;
        font-size: clamp(1.1rem, 2.5vw, 1.4rem);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: clamp(8px, 1.2vw, 12px);
    }

    .projects-grid[b-6m04x1czxb] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 280px));
        gap: clamp(12px, 2vw, 20px);
        justify-content: center;
        align-items: start;
        width: 100%;
    }

    .projects-grid .project-wrapper[b-6m04x1czxb] {
        aspect-ratio: 1 / 1;
        min-height: 0;
    }

    .projects-grid .project-wrapper[b-6m04x1czxb]  .project-card,
    .projects-grid .project-wrapper[b-6m04x1czxb]  .idea-card {
        height: 100%;
    }

    @media (max-width: 992px) {
        .projects-grid[b-6m04x1czxb] {
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 260px));
        }
    }

    @media (max-width: 768px) {
        .projects-grid[b-6m04x1czxb] {
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 240px));
        }
    }

    @media (max-width: 480px) {
        .phase-header[b-6m04x1czxb] {
            position: static;
        }

        .phase-header-content[b-6m04x1czxb],
        .projects-section-header[b-6m04x1czxb] {
            align-items: stretch;
        }

        .phase-title[b-6m04x1czxb],
        .user-info-badge[b-6m04x1czxb],
        .view-toggle[b-6m04x1czxb],
        .btn-primary-custom[b-6m04x1czxb],
        .btn-secondary-custom[b-6m04x1czxb],
        .btn-danger-custom[b-6m04x1czxb] {
            width: 100%;
            justify-content: center;
        }

        .view-toggle[b-6m04x1czxb] {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .view-toggle button[b-6m04x1czxb] {
            min-height: var(--tap-min, 48px);
        }

        .projects-grid[b-6m04x1czxb] {
            grid-template-columns: 1fr;
            gap: 10px;
        }
    }

    .projects-list[b-6m04x1czxb] {
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 1.2vh, 12px);
        align-items: center;
    }

    .projects-list .project-wrapper[b-6m04x1czxb] {
        aspect-ratio: auto;
    }

    .projects-list .project-wrapper[b-6m04x1czxb] {
        max-width: 320px;
        width: 100%;
    }

    .project-wrapper[b-6m04x1czxb] {
        width: 100%;
        max-width: 280px;
    }

    .project-wrapper:hover[b-6m04x1czxb] {
    }

    @media (hover: none) {
        .player-list-item:hover[b-6m04x1czxb] {
            background: rgba(255, 255, 255, 0.08);
        }
        .project-wrapper:hover[b-6m04x1czxb] {
            transform: none;
        }
        .project-wrapper:active[b-6m04x1czxb] {
        }
    }

    .project-unavailable[b-6m04x1czxb] {
        opacity: 0.4;
        pointer-events: none;
        position: relative;
    }

    .project-unavailable-label[b-6m04x1czxb] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(220, 53, 69, 0.95);
        color: white;
        padding: 8px 16px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.9rem;
        z-index: 10;
    }

    /* ========== DIVIDER ========== */
    .section-divider[b-6m04x1czxb] {
        height: 2px;
        background: transparent;
        margin: 35px 0;
        border: none;
    }

    /* ========== PRESENTATION CARD ========== */
    .presentation-card[b-6m04x1czxb] {
        background: #3f5d75;
        border-radius: clamp(12px, 2vw, 20px);
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        max-width: min(100%, 700px);
        width: 100%;
        margin: 0 auto;
    }

    .presentation-card-header[b-6m04x1czxb] {
        background: #3f5d75;
        color: white;
        padding: 14px 18px;
        font-weight: 700;
        font-size: 1.05rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .presentation-card-body[b-6m04x1czxb] {
        padding: 20px;
    }

    .presentation-card-body h5[b-6m04x1czxb] {
        font-size: 0.95rem;
    }

    .presentation-card-body p[b-6m04x1czxb] {
        font-size: 0.85rem;
    }

    .presentation-projects-grid[b-6m04x1czxb] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
        gap: clamp(10px, 2vw, 16px);
        margin: clamp(12px, 2vh, 20px) 0;
        width: 100%;
        align-items: start;
    }

    .presentation-project-wrapper[b-6m04x1czxb] {
        aspect-ratio: 1 / 1;
        min-width: 0;
        border-radius: 6px;
        overflow: visible;
    }

    .presentation-project-wrapper[b-6m04x1czxb]  .project-card,
    .presentation-project-wrapper[b-6m04x1czxb]  .idea-card {
        height: 100%;
    }

    @media (max-width: 576px) {
        .presentation-card-header[b-6m04x1czxb] {
            padding: 10px 14px;
            font-size: 0.9rem;
            gap: 8px;
        }

        .presentation-card-body[b-6m04x1czxb] {
            padding: 14px;
        }

        .presentation-card-body h5[b-6m04x1czxb] {
            font-size: 0.85rem;
        }

        .presentation-card-body p[b-6m04x1czxb] {
            font-size: 0.8rem;
            margin-bottom: 10px;
        }

        .presentation-projects-grid[b-6m04x1czxb] {
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
            gap: 8px;
        }
    }

    /* ========== END GAME ========== */
    .end-game-card[b-6m04x1czxb] {
        text-align: center;
        max-width: min(100%, 600px);
        width: 100%;
        margin: 0 auto;
    }

    .trophy-icon[b-6m04x1czxb] {
        font-size: clamp(3rem, 8vw, 5rem);
        margin-bottom: clamp(12px, 2vh, 20px);
    }

    .victory-text[b-6m04x1czxb] {
        color: #28a745;
        font-size: clamp(1.4rem, 4vw, 2rem);
        font-weight: 800;
    }

    .failure-text[b-6m04x1czxb] {
        color: #dc3545;
        font-size: clamp(1.4rem, 4vw, 2rem);
        font-weight: 800;
    }

    /* ========== MODAL ========== */
    .modal-overlay[b-6m04x1czxb] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(10px, 2vw, 20px);
    }

    .modal-content-custom[b-6m04x1czxb] {
        background: white;
        border-radius: clamp(12px, 2vw, 20px);
        max-width: min(95%, 1200px);
        width: 100%;
        max-height: 90vh;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .modal-header-custom[b-6m04x1czxb] {
        padding: 20px 25px;
        font-weight: 700;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .modal-header-success[b-6m04x1czxb] {
        background: #28a745;
        color: white;
    }

    .modal-header-danger[b-6m04x1czxb] {
        background: #dc3545;
        color: white;
    }

    .modal-body-custom[b-6m04x1czxb] {
        padding: 0;
        max-height: calc(90vh - 150px);
        overflow-y: auto;
    }

    .modal-footer-custom[b-6m04x1czxb] {
        padding: 20px 25px;
        background: #f8f9fa;
        display: flex;
        justify-content: flex-end;
        gap: 15px;
    }

    .btn-close-custom[b-6m04x1czxb] {
        background: transparent;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        opacity: 0.8;
    }

    .btn-close-custom:hover[b-6m04x1czxb] {
        opacity: 1;
    }

    /* ========== ANIMACE ========== */
    .animate-slide-in[b-6m04x1czxb] {
        /* intentionally empty — removed flash-causing animation */
    }

    @keyframes pulse-b-6m04x1czxb {
    }

    .animate-pulse[b-6m04x1czxb] {
    }

    /* ========== END GAME OVERLAY (DashboardRW-inspired) ========== */
    .endgame-overlay[b-6m04x1czxb] {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        padding: 15px;
    }

    .endgame-overlay.endgame-victory-bg[b-6m04x1czxb] {
        background: rgba(0, 0, 0, 0.88);
    }

    .endgame-overlay.endgame-failure-bg[b-6m04x1czxb] {
        background: rgba(0, 0, 0, 0.88);
    }

    @keyframes endgameOverlayIn-b-6m04x1czxb {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes endgameCardSlideUp-b-6m04x1czxb {
    }

    .endgame-card[b-6m04x1czxb] {
        background: white;
        border-radius: 12px;
        padding: clamp(24px, 4vh, 40px) clamp(20px, 3vw, 36px);
        text-align: center;
        max-width: min(95%, 620px);
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
    }

    .endgame-card.victory[b-6m04x1czxb] {
        box-shadow: 0 30px 90px rgba(40, 167, 69, 0.3), 0 0 0 3px rgba(40, 167, 69, 0.08);
    }

    .endgame-card.failure[b-6m04x1czxb] {
        box-shadow: 0 30px 90px rgba(220, 53, 69, 0.2), 0 0 0 3px rgba(220, 53, 69, 0.06);
    }

    .endgame-close-btn[b-6m04x1czxb] {
        position: absolute;
        top: 16px; right: 16px;
        background: rgba(0,0,0,0.06);
        border: none;
        border-radius: 50%;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        color: #6c757d;
        font-size: 1rem;
    }

    .endgame-close-btn:hover[b-6m04x1czxb] {
        background: rgba(0,0,0,0.12);
        color: #333;
    }

    .endgame-title[b-6m04x1czxb] {
        font-size: clamp(1.8rem, 5vw, 2.6rem);
        font-weight: 900;
        margin-bottom: 4px;
        letter-spacing: -0.5px;
    }

    .victory .endgame-title[b-6m04x1czxb] {
        color: #1e7e34;
    }

    .failure .endgame-title[b-6m04x1czxb] {
        color: #dc3545;
    }

    .endgame-subtitle[b-6m04x1czxb] {
        color: #6c757d;
        font-size: clamp(0.9rem, 2vw, 1.05rem);
        margin-bottom: clamp(16px, 2.5vh, 24px);
        line-height: 1.5;
    }

    .endgame-conditions[b-6m04x1czxb] {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: clamp(16px, 2.5vh, 24px);
        flex-wrap: wrap;
    }

    .endgame-condition[b-6m04x1czxb] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .endgame-condition.met[b-6m04x1czxb] {
        background: #d4edda;
        color: #155724;
    }

    .endgame-condition.not-met[b-6m04x1czxb] {
        background: #f8d7da;
        color: #721c24;
    }

    .endgame-condition i[b-6m04x1czxb] { font-size: 1rem; }

    /* Area bars */
    .endgame-areas[b-6m04x1czxb] {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 14px;
        margin-bottom: clamp(20px, 3vh, 28px);
        flex-wrap: nowrap;
    }

    .endgame-area-col[b-6m04x1czxb] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        flex: 0 0 44px;
        width: 44px;
    }

    .endgame-area-value[b-6m04x1czxb] {
        font-size: 0.85rem;
        font-weight: 800;
        line-height: 1;
    }

    .endgame-area-value.pos[b-6m04x1czxb] { color: #28a745; }
    .endgame-area-value.neg[b-6m04x1czxb] { color: #dc3545; }

    .endgame-area-track[b-6m04x1czxb] {
        width: 22px;
        height: 120px;
        background: rgba(0,0,0,0.07);
        border-radius: 11px;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
    }

    .endgame-area-fill[b-6m04x1czxb] {
        width: 100%;
        border-radius: 11px;
        min-height: 6px;
    }

    .endgame-area-fill.pos[b-6m04x1czxb] { background: #28a745; }
    .endgame-area-fill.neg[b-6m04x1czxb] { background: #dc3545; }

    .endgame-area-icon[b-6m04x1czxb] {
        width: 28px;
        height: 28px;
    }

    /* Section label */
    .endgame-section-label[b-6m04x1czxb] {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #adb5bd;
        font-weight: 700;
        margin-bottom: 10px;
    }

    /* Players list */
    .endgame-players[b-6m04x1czxb] {
        margin-bottom: clamp(16px, 2.5vh, 24px);
        text-align: left;
    }

    .endgame-player-row[b-6m04x1czxb] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 10px;
    }

    .endgame-player-row:hover[b-6m04x1czxb] {
        background: rgba(0,0,0,0.03);
    }

    .endgame-player-rank[b-6m04x1czxb] {
        font-weight: 800;
        font-size: 1rem;
        color: #0c3a58;
        min-width: 28px;
        text-align: center;
    }

    .endgame-player-avatar[b-6m04x1czxb] {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: rgba(0,0,0,0.06);
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
        flex-shrink: 0;
    }

    .endgame-player-avatar img[b-6m04x1czxb] {
        width: 24px; height: 24px;
        object-fit: contain;
    }

    .endgame-player-info[b-6m04x1czxb] {
        flex: 1;
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .endgame-player-info strong[b-6m04x1czxb] {
        font-size: 0.9rem;
        color: #0c3a58;
    }

    .endgame-player-info small[b-6m04x1czxb] {
        font-size: 0.75rem;
        color: #6c757d;
    }

    .endgame-player-score[b-6m04x1czxb] {
        font-weight: 800;
        font-size: 1rem;
        color: #28a745;
        min-width: 40px;
        text-align: right;
    }

    /* Personal score */
    .endgame-personal[b-6m04x1czxb] {
        margin-bottom: clamp(16px, 2.5vh, 24px);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(0,0,0,0.08);
    }

    .endgame-personal-total[b-6m04x1czxb] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 18px;
        background: #0c3a58;
        color: white;
    }

    .endgame-personal-label[b-6m04x1czxb] {
        font-weight: 600;
        font-size: 0.95rem;
    }

    .endgame-personal-value[b-6m04x1czxb] {
        font-weight: 900;
        font-size: 1.4rem;
    }

    .endgame-personal-details[b-6m04x1czxb] {
        padding: 8px 0;
    }

    .endgame-score-row[b-6m04x1czxb] {
        display: flex;
        justify-content: space-between;
        padding: 6px 18px;
        font-size: 0.85rem;
        color: #333;
    }

    .endgame-score-row.positive span:last-child[b-6m04x1czxb] { color: #28a745; font-weight: 600; }
    .endgame-score-row.negative span:last-child[b-6m04x1czxb] { color: #dc3545; font-weight: 600; }

    /* Rounds info */
    .endgame-rounds[b-6m04x1czxb] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.04);
        font-size: 0.82rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: clamp(16px, 2.5vh, 24px);
    }

    /* Footer buttons */
    .endgame-footer[b-6m04x1czxb] {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .endgame-btn[b-6m04x1czxb] {
        padding: 12px 28px;
        border: none;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
    }

    .endgame-btn.primary[b-6m04x1czxb] {
        background: #0c3a58;
        color: white;
    }

    .endgame-btn.primary:hover[b-6m04x1czxb] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .endgame-btn.secondary[b-6m04x1czxb] {
        background: #e9ecef;
        color: #495057;
    }

    .endgame-btn.secondary:hover[b-6m04x1czxb] {
        background: #dee2e6;
    }

    @media (max-width: 768px) {
        .phase-header-content[b-6m04x1czxb] {
            align-items: stretch;
        }

        .phase-title[b-6m04x1czxb],
        .phase-wallet-slot[b-6m04x1czxb] {
            width: 100%;
            flex-basis: 100%;
            justify-content: center;
        }

        .phase-wallet-slot[b-6m04x1czxb] {
            min-width: 0;
        }

        .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact {
            width: 100%;
            margin-left: 0;
        }
    }

    @media (max-width: 1023px) {
        .phase-header[b-6m04x1czxb] {
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 7px 10px;
        }

        .phase-header-content[b-6m04x1czxb] {
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0;
        }

        .phase-title[b-6m04x1czxb] {
            display: none;
        }

        .phase-wallet-slot[b-6m04x1czxb] {
            width: 100%;
            min-width: 0;
            flex: 1 1 100%;
            justify-content: center;
        }

        .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact {
            width: auto;
            max-width: calc(100vw - 20px);
            margin: 0 auto;
        }

        .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact .wallet-mobile-summary {
            width: fit-content;
            min-height: 38px;
            justify-content: center;
            gap: 7px;
            margin: 0 auto;
        }

        .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact .mobile-role-avatar {
            width: 30px;
            height: 30px;
            border-radius: 8px;
        }

        .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact .mobile-role-name {
            max-width: 42vw;
            font-size: 0.92rem;
            text-align: center;
        }

        .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact .mobile-preferences {
            gap: 4px;
        }

        .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact .mobile-preference-badge,
        .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact .mobile-secretary-badge {
            width: 24px;
            height: 24px;
        }

        .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact .mobile-preference-badge img,
        .phase-wallet-slot[b-6m04x1czxb]  .wallet-rw.compact .mobile-secretary-badge img {
            width: 19px;
            height: 19px;
        }
    }

    /* Desktop has plenty of vertical room, so let the header scroll away
       instead of pinning it (mirrors GameSupportRW's sticky-header-group). */
    @media (min-width: 1024px) {
        .phase-header[b-6m04x1czxb] {
            position: relative;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/GameSupport.razor.rz.scp.css */
.support-interface[b-0zo098ualy] {
    background: var(--brand-navy, #0c3a58);
    min-height: 100vh;
    padding: 20px;
}

.player-wallet-wrapper[b-0zo098ualy] {
    padding: 0;
}

.support-card-container[b-0zo098ualy] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    max-width: 20%;
}

.support-card[b-0zo098ualy] {
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-out),
                filter var(--dur-base) var(--ease-out);
    border-radius: 8px;
    width: 100%;
    max-width: 70px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    border: none;
}

@media (max-width: 768px) {
    .support-card[b-0zo098ualy] { max-width: 60px; height: 75px; }
}

@media (max-width: 480px) {
    .support-card[b-0zo098ualy] { max-width: 55px; height: 68px; }
}

.support-card:hover[b-0zo098ualy] {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.support-card.selected[b-0zo098ualy] {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(26, 92, 122, 0.6));
}

.support-card.used[b-0zo098ualy] {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(70%) brightness(0.8);
}

.support-card-label[b-0zo098ualy] {
    color: white;
    font-size: 0.65rem;
    font-weight: 500;
    text-align: center;
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    min-width: 50px;
}

@media (max-width: 768px) {
    .support-card-label[b-0zo098ualy] { font-size: 0.6rem; min-width: 45px; padding: 1px 3px; }
}

.support-card.selected ~ .support-card-label[b-0zo098ualy] {
    background: rgba(26, 92, 122, 0.3);
    border: 1px solid rgba(26, 92, 122, 0.5);
}

.support-card.used ~ .support-card-label[b-0zo098ualy] {
    opacity: 0.5;
    color: #a0a0a0;
}

.player-hand[b-0zo098ualy] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .player-hand[b-0zo098ualy] { padding: 10px; margin-bottom: 15px; }
}

.player-hand-sticky[b-0zo098ualy] {
    position: sticky;
    top: 0;
    z-index: 1050;
    width: 100%;
    background: rgba(12, 58, 88, 0.95);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    padding: 8px 0;
    margin-bottom: 0;
}

.player-hand-sticky .player-hand[b-0zo098ualy] {
    margin-bottom: 0;

}

.sticky-spacer[b-0zo098ualy] { height: 15px; }

@media (max-width: 768px) {
    .player-hand-sticky[b-0zo098ualy] { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); padding: 6px 0; }
    .sticky-spacer[b-0zo098ualy] { height: 12px; }
    .player-hand h5[b-0zo098ualy] { font-size: 0.9rem; margin-bottom: 0.75rem !important; }
    .player-hand .d-flex.gap-2[b-0zo098ualy] { gap: 0.35rem !important; }
}

@media (max-width: 480px) {
    .player-hand-sticky[b-0zo098ualy] { padding: 5px 0; }
    .player-hand[b-0zo098ualy] { padding: 8px; }
    .player-hand h5[b-0zo098ualy] { font-size: 0.85rem; }
    .support-card-container[b-0zo098ualy] { gap: 2px; }
}

.phase-header[b-0zo098ualy] {
    color: white;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.voting-complete[b-0zo098ualy] {
    border: 2px solid var(--support-positive);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    color: white;
}

.project-card-wrapper[b-0zo098ualy] {
    position: relative;
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-out);
}

.project-card-wrapper.can-drop[b-0zo098ualy] {
    animation: anim-pulse-kf-b-0zo098ualy 1.5s infinite;
}

@keyframes anim-pulse-kf-b-0zo098ualy {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.02); }
}

.project-card-wrapper.has-support[b-0zo098ualy]::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 3px solid var(--support-positive);
    border-radius: 12px;
    pointer-events: none;
}

.segmented-control[b-0zo098ualy] {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 5px;
}

.segmented-control button[b-0zo098ualy] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 20px;
    border-radius: 12px;
    transition: all var(--dur-base) var(--ease-out);
    cursor: pointer;
}

.segmented-control button.active[b-0zo098ualy] {
    background: white;
    color: var(--brand-navy);
    font-weight: 600;
}

.controls-header[b-0zo098ualy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
    flex-wrap: wrap;
}

.confirm-button-container[b-0zo098ualy] {
    display: flex;
    align-items: center;
}

.btn-confirm-elegant[b-0zo098ualy] {
    background: var(--support-positive);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    cursor: pointer;
    min-height: var(--tap-min);
}

.btn-confirm-elegant:hover:not(:disabled)[b-0zo098ualy] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.btn-confirm-elegant:active[b-0zo098ualy] { transform: translateY(0); }

.btn-confirm-elegant:disabled[b-0zo098ualy] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-confirm-disabled[b-0zo098ualy] {
    background: rgba(108, 117, 125, 0.3);
    border: 1px solid rgba(108, 117, 125, 0.5);
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: not-allowed;
    min-height: var(--tap-min);
}

.project-card-wrapper.can-remove[b-0zo098ualy] {
    border: 2px dashed var(--brand-yellow);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out);
    position: relative;
}

.project-card-wrapper.can-remove:hover[b-0zo098ualy] {
    background: rgba(244, 199, 55, 0.1);
    border-color: var(--brand-yellow-deep);
    transform: translateY(-2px);
}

.remove-card-indicator[b-0zo098ualy] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--brand-yellow);
    color: #333;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    opacity: 0.8;
    transition: opacity var(--dur-base) var(--ease-out);
}

.project-card-wrapper.can-remove:hover .remove-card-indicator[b-0zo098ualy] {
    opacity: 1;
    animation: anim-bounce-kf-b-0zo098ualy 1s infinite;
}

@keyframes anim-bounce-kf-b-0zo098ualy {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-2px); }
    60% { transform: translateY(-2px); }
}

.project-card-wrapper.can-remove[b-0zo098ualy]::after {
    content: "Karta se vrátí zpět pro další použití";
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    z-index: 1000;
}

.project-card-wrapper.can-remove:hover[b-0zo098ualy]::after { opacity: 1; }

.project-card-wrapper.my-project[b-0zo098ualy]::before {
    content: '★';
    position: absolute;
    top: 10px;
    left: 10px;
    background: #f4c737;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.project-card-wrapper.my-project[b-0zo098ualy] {
    background: rgba(244, 199, 55, 0.08);
    border: 2px solid rgba(244, 199, 55, 0.3);
    border-radius: 12px;
}

@media (max-width: 768px) {
    .controls-header[b-0zo098ualy] { flex-direction: column; align-items: stretch; gap: 12px; }
    .segmented-control[b-0zo098ualy] { align-self: center; }
    .confirm-button-container[b-0zo098ualy] { justify-content: center; }
    .btn-confirm-elegant[b-0zo098ualy],
    .btn-confirm-disabled[b-0zo098ualy] { width: 100%; justify-content: center; }
}

.equal-height[b-0zo098ualy] { align-items: stretch; }

.equal-height > [class^="col"][b-0zo098ualy] {
    display: flex;
    flex-direction: column;
}
/* _content/Municipality16.Shared/Components/Pages/GamePages/GameSupportRW.razor.rz.scp.css */
.support-interface[b-2hw73c3w4u] {
        background: #0c3a58;
        min-height: 100vh;
        padding: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: clip; /* Use clip instead of hidden to allow sticky positioning */
        box-sizing: border-box;
    }

    .support-interface *[b-2hw73c3w4u] {
        box-sizing: border-box;
    }

    /* Ensure parent containers don't break sticky positioning */
    .support-interface .container-fluid[b-2hw73c3w4u],
    .support-interface .row[b-2hw73c3w4u] {
        overflow: visible;
    }

    /* Unified PlayerWallet wrapper */
    .player-wallet-wrapper[b-2hw73c3w4u] {
        padding: 0;
    }

    .support-card-container[b-2hw73c3w4u] {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(3px, 0.5vw, 4px);
        flex: 0 0 auto;
        max-width: 20%;
        transition: filter 160ms ease;
    }

    /* Traces the actual brush-stroke silhouette with a solid line (via the
       #support-brush-outline SVG filter, which dilates the image's alpha shape and
       fills it white) instead of drawing a rectangle or a soft drop-shadow glow. */
    .support-card-container.selected-support-card[b-2hw73c3w4u] {
        filter: url(#support-brush-outline);
    }

    .player-hand[b-2hw73c3w4u] {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
        padding: 12px;
        margin-bottom: 20px;
    }
    
    @media (max-width: 768px) {
        .player-hand[b-2hw73c3w4u] {
            padding: 10px;
            margin-bottom: 15px;
        }
    }
    
    /* Phase header + support-card hand stick together as one panel so
       neither can scroll over/hide the other (they share the same background). */
    .sticky-header-group[b-2hw73c3w4u] {
        position: sticky;
        top: 0; /* Sticks to the top of the viewport when scrolling */
        z-index: 1050; /* Above page content but below modals */
        will-change: transform; /* Performance optimization for sticky */
    }

    /* Desktop has plenty of vertical room for the phase header, so let it scroll
       away instead of eating space at the top — but the support-card hand stays
       sticky on its own, since you still want quick access to it while scrolling
       a long project list. The header has already scrolled out of view by the
       time the hand reaches the top, so there's no overlap.
       display:contents removes the group's own box entirely rather than just
       switching it to position:relative — a sticky element can only stay stuck
       for as long as its nearest block-level ancestor's box is still on screen,
       and .sticky-header-group is only as tall as header+hand, so left as a
       normal box it would cap the hand's sticky range to a few pixels. Dropping
       the group's box promotes header/hand to direct children of
       .support-interface (the full-page-height wrapper) instead. */
    @media (min-width: 1024px) {
        .sticky-header-group[b-2hw73c3w4u] {
            display: contents;
        }

        .player-hand-sticky[b-2hw73c3w4u] {
            position: sticky;
            top: 0;
            z-index: 1050;
        }
    }

    .player-hand-sticky[b-2hw73c3w4u] {
        width: 100%;
        background: #0c3a58; /* Increased opacity for better visibility */
         /* Enhanced blur effect for glass-morphism */
         /* Safari support */
        box-shadow: 0 clamp(6px, 0.8vh, 8px) clamp(14px, 1.6vh, 16px) rgba(0, 0, 0, 0.35); /* Stronger shadow for better separation */
        border-radius: 0 0 clamp(8px, 1.2vw, 12px) clamp(8px, 1.2vw, 12px);
        padding: clamp(8px, 1vh, 12px) 0; /* Increased padding */
        margin-bottom: 0;
    }

    .player-hand-sticky .player-hand[b-2hw73c3w4u] {
        margin-bottom: 0;
        border-radius: clamp(8px, 1.2vw, 12px);
    }

    .sticky-spacer[b-2hw73c3w4u] {
        height: clamp(10px, 1.5vh, 15px);
    }

    .player-hand h5[b-2hw73c3w4u] {
        font-size: clamp(0.8rem, 1.8vw, 1rem);
        margin-bottom: clamp(0.5rem, 1vh, 0.75rem);
    }

    /* ========== HEADER FÁZE ========== */
    .phase-header[b-2hw73c3w4u] {
        background: rgba(12, 58, 88, 0.95);
        padding: clamp(12px, 2vh, 20px) clamp(15px, 3vw, 30px);
        position: relative; /* containing block for ::before; stickiness now lives on .sticky-header-group */
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
        margin-bottom: clamp(12px, 2vh, 20px);
    }

    .phase-header[b-2hw73c3w4u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: clamp(2px, 0.5vh, 4px);
        border-radius: clamp(10px, 1.5vw, 15px) clamp(10px, 1.5vw, 15px) 0 0;
    }

    .phase-header-content[b-2hw73c3w4u] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: clamp(8px, 1.5vw, 15px);
        position: relative;
        z-index: 1;
    }

    .phase-title[b-2hw73c3w4u] {
        color: white;
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        font-weight: 700;
        margin: 0;
        display: flex;
        align-items: center;
        gap: clamp(6px, 1vw, 12px);
        flex: 1 1 260px;
        min-width: min(100%, 240px);
        justify-content: flex-end;
        text-align: right;
    }

    .phase-badge[b-2hw73c3w4u] {
        background: rgba(255, 255, 255, 0.2);
        padding: clamp(4px, 0.8vh, 6px) clamp(10px, 1.5vw, 14px);
        border-radius: 12px;
        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
        font-weight: 600;
    }

    .user-info-badge[b-2hw73c3w4u] {
        display: flex;
        align-items: center;
        gap: clamp(6px, 1vw, 10px);
        background: rgba(255, 255, 255, 0.15);
        padding: clamp(6px, 1vh, 8px) clamp(12px, 2vw, 16px);
        border-radius: 12px;
        color: white;
        font-weight: 600;
        font-size: clamp(0.75rem, 1.8vw, 1rem);
    }

    .phase-wallet-slot[b-2hw73c3w4u] {
        display: flex;
        flex: 0 1 460px;
        justify-content: flex-start;
        min-width: min(100%, 260px);
    }

    .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact {
        width: fit-content;
        max-width: 100%;
        margin-left: 0;
    }

    .badge-secretary[b-2hw73c3w4u] {
        background: #ffc107;
        color: #000;
        padding: clamp(3px, 0.5vh, 4px) clamp(8px, 1vw, 10px);
        border-radius: clamp(8px, 1vw, 10px);
        font-size: clamp(0.65rem, 1.3vw, 0.75rem);
        font-weight: 700;
        margin-left: 8px;
    }

    .voting-complete[b-2hw73c3w4u] {
        border: 2px solid rgba(255, 255, 255, 0.25);
        border-radius: clamp(10px, 1.5vw, 15px);
        padding: clamp(20px, 3vh, 30px);
        text-align: center;
        color: white;
    }

    /* ========== SECRETARY TIE-BREAK (rules p. 4, step 3) ========== */
    .tiebreak-panel[b-2hw73c3w4u] {
        background: rgba(255, 255, 255, 0.08);
        border: 2px solid #ffc107;
        border-radius: 12px;
        padding: clamp(16px, 2.5vh, 24px);
        margin-bottom: clamp(12px, 2vh, 20px);
        color: white;
        text-align: center;
    }

    .tiebreak-badge[b-2hw73c3w4u] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #ffc107;
        color: #212529;
        font-weight: 700;
        font-size: clamp(0.8rem, 1.6vw, 0.9rem);
        padding: 6px 14px;
        border-radius: 999px;
        margin-bottom: 10px;
    }

    .tiebreak-instruction[b-2hw73c3w4u] {
        margin: 0 0 16px;
        font-size: clamp(0.9rem, 1.8vw, 1rem);
        color: rgba(255, 255, 255, 0.9);
    }

    /* Same grid proportions as GameParticipantsRW's .projects-grid, so tie-break cards
       render at the same size (and the same internal element/text scale) as everywhere
       else in the app instead of being squeezed into an undersized custom box.
       auto-fit (not auto-fill) so leftover empty tracks collapse to 0 — with only 2-3
       tied ideas, auto-fill kept phantom tracks that skewed "justify-content: center"
       off-center towards the left. */
    .tiebreak-cards[b-2hw73c3w4u] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 280px));
        gap: clamp(12px, 2vw, 20px);
        justify-content: center;
        margin-bottom: 16px;
    }

    .tiebreak-card-wrapper[b-2hw73c3w4u] {
        aspect-ratio: 1 / 1;
        min-height: 0;
        margin-top: clamp(8px, 1.5vh, 16px);
        cursor: pointer;
    }

    .tiebreak-card-wrapper[b-2hw73c3w4u]  .project-card,
    .tiebreak-card-wrapper[b-2hw73c3w4u]  .idea-card {
        height: 100%;
    }

    .tiebreak-cards-readonly .tiebreak-card-wrapper[b-2hw73c3w4u] {
        cursor: default;
    }

    .tiebreak-card-fallback[b-2hw73c3w4u] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: white;
        color: #0c3a58;
        border-radius: 10px;
        padding: 10px;
        text-align: center;
    }

    .tiebreak-actions[b-2hw73c3w4u] {
        display: flex;
        justify-content: center;
    }

    .tiebreak-waiting[b-2hw73c3w4u] {
        border-color: rgba(255, 193, 7, 0.55);
    }

    .tiebreak-waiting h3[b-2hw73c3w4u] {
        font-size: clamp(1.05rem, 2.2vw, 1.3rem);
        margin-bottom: 6px;
    }

    .tiebreak-waiting p[b-2hw73c3w4u] {
        margin: 0;
        color: rgba(255, 255, 255, 0.8);
    }

    .tiebreak-spinner[b-2hw73c3w4u] {
        width: 34px;
        height: 34px;
        margin: 0 auto 12px;
        border: 3px solid rgba(255, 255, 255, 0.25);
        border-top-color: #ffc107;
        border-radius: 50%;
        animation: tiebreak-spin-b-2hw73c3w4u 0.9s linear infinite;
    }

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

    .project-card-wrapper[b-2hw73c3w4u] {
        position: relative;
        cursor: pointer;
    }

    .project-card-wrapper.can-drop[b-2hw73c3w4u] {
    }

    @keyframes pulse-b-2hw73c3w4u {
        0% {
        }
        50% {
        }
        100% {
        }
    }

    .segmented-control[b-2hw73c3w4u] {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.1);
        border-radius: clamp(20px, 2.5vw, 25px);
        padding: clamp(4px, 0.5vw, 5px);
    }

    .segmented-control button[b-2hw73c3w4u] {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        padding: clamp(6px, 0.8vh, 8px) clamp(15px, 2vw, 20px);
        border-radius: clamp(16px, 2vw, 20px);
        font-size: clamp(0.8rem, 1.6vw, 1rem);
        cursor: pointer;
    }

    .segmented-control button.active[b-2hw73c3w4u] {
        background: white;
        color: var(--background-colorful-primary);
        font-weight: 600;
    }

    /* Controls Header - Toggle + Confirm Button */
    .controls-header[b-2hw73c3w4u] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: clamp(12px, 2vh, 20px);
        gap: clamp(12px, 2vw, 20px);
        flex-wrap: wrap;
    }

    /* Confirm Button Styling */
    .confirm-button-container[b-2hw73c3w4u] {
        display: flex;
        align-items: center;
    }

    .btn-confirm-elegant[b-2hw73c3w4u] {
        background: #28a745;
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        cursor: pointer;
    }

    .btn-confirm-elegant:hover:not(:disabled)[b-2hw73c3w4u] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        background: #1e7e34;
    }

    .btn-confirm-elegant:active[b-2hw73c3w4u] {
        background: #28a745;
        box-shadow: none;
        outline: none;
    }

    .btn-confirm-elegant:disabled[b-2hw73c3w4u] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .btn-confirm-disabled[b-2hw73c3w4u] {
        background: rgba(108, 117, 125, 0.3);
        border: 1px solid rgba(108, 117, 125, 0.5);
        color: rgba(255, 255, 255, 0.7);
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 500;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: not-allowed;
    }

    /* Remove card mechanismus */
    .project-card-wrapper.can-remove[b-2hw73c3w4u] {
        border: 2px dashed #ffc107;
        cursor: pointer;
        position: relative;
    }

    .project-card-wrapper.can-remove:hover[b-2hw73c3w4u] {
        background: rgba(255, 193, 7, 0.1);
        border-color: #e0a800;
    }

    .remove-card-indicator[b-2hw73c3w4u] {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #ffc107;
        color: #333;
        padding: 4px 8px;
        border-radius: 3px;
        font-size: 0.75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
        z-index: 10;
        opacity: 0.8;
    }

    .project-card-wrapper.can-remove:hover .remove-card-indicator[b-2hw73c3w4u] {
        opacity: 1;
    }

    @keyframes bounce-b-2hw73c3w4u {
        0%, 20%, 50%, 80%, 100% {
        }
        40% {
        }
        60% {
        }
    }

    /* Tooltip pro remove akci */
    .project-card-wrapper.can-remove[b-2hw73c3w4u]::after {
        content: "Karta se vrátí zpět pro další použití";
        position: absolute;
        bottom: -35px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 0.8rem;
        white-space: nowrap;
        opacity: 0;
        z-index: 1000;
    }

    .project-card-wrapper.can-remove:hover[b-2hw73c3w4u]::after {
        opacity: 1;
    }

    /* Vlastní návrhy - zvýraznění */
    .project-card-wrapper.my-project[b-2hw73c3w4u] {
        background: rgba(244, 199, 55, 0.08);
        border: 2px solid rgba(244, 199, 55, 0.3);
        border-radius: 3px;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .controls-header[b-2hw73c3w4u] {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
        }

        .segmented-control[b-2hw73c3w4u] {
            align-self: center;
        }

        .confirm-button-container[b-2hw73c3w4u] {
            justify-content: center;
        }

        .btn-confirm-elegant[b-2hw73c3w4u],
        .btn-confirm-disabled[b-2hw73c3w4u] {
            width: 100%;
            justify-content: center;
        }
    }

    .equal-height[b-2hw73c3w4u] {
        align-items: stretch;
    }

    .equal-height > [class^="col"][b-2hw73c3w4u] {
        display: flex;
        flex-direction: column;
    }

    /* ================================
       AVAILABLE PROJECTS GRID
       Responsive design inspired by GameParticipantsRW
       ================================ */

    .available-projects-section[b-2hw73c3w4u] {
        margin-top: clamp(15px, 2vh, 20px);
    }

    .available-projects-header[b-2hw73c3w4u] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: clamp(12px, 2vh, 20px);
        flex-wrap: wrap;
        gap: clamp(10px, 1.5vw, 15px);
    }

    .available-projects-title[b-2hw73c3w4u] {
        color: white;
        font-size: clamp(1rem, 2.2vw, 1.25rem);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: clamp(6px, 1vw, 10px);
        margin: 0;
    }

    .available-projects-title i[b-2hw73c3w4u] {
        color: #ffc107;
    }

    .available-projects-count[b-2hw73c3w4u] {
        opacity: 0.7;
        font-size: 0.85em;
        font-weight: 400;
    }

    /* Grid view - compact cards fitting on one screen */
    .projects-grid-compact[b-2hw73c3w4u] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
        gap: clamp(10px, 1.5vw, 16px);
        width: 100%;
    }

    /* List view - compact cards centered like GameParticipantsRW */
    .projects-list-view[b-2hw73c3w4u] {
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 1.2vh, 12px);
        align-items: center;
    }

    .projects-list-view .project-item-wrapper[b-2hw73c3w4u] {
        max-width: 320px;
        width: 100%;
    }

    .project-item-wrapper[b-2hw73c3w4u] {
        border-radius: 3px;
        overflow: hidden;
    }

    .project-item-wrapper:hover[b-2hw73c3w4u] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    @media (hover: none) {
        .project-item-wrapper:hover[b-2hw73c3w4u] {
            transform: none;
            box-shadow: none;
        }
        .project-item-wrapper:active[b-2hw73c3w4u] {
        }
    }

    /* ================================
       RESPONSIVE MOBILE OPTIMIZATIONS
       Inspired by GameParticipantsRW
       ================================ */

    @media (max-width: 992px) {
        .support-interface[b-2hw73c3w4u] {
            padding: 0;
        }

        .projects-grid-compact[b-2hw73c3w4u] {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
            gap: 12px;
        }
    }

    @media (max-width: 768px) {
        .support-interface[b-2hw73c3w4u] {
            padding: 0;
        }

        .projects-grid-compact[b-2hw73c3w4u] {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
            gap: 10px;
        }

        .available-projects-header[b-2hw73c3w4u] {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }

        .available-projects-title[b-2hw73c3w4u] {
            font-size: 1rem;
        }

        /* Sticky header adjustments */
        .player-hand-sticky[b-2hw73c3w4u] {
            padding: 8px 0;
            box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        }

        .player-hand[b-2hw73c3w4u] {
            padding: 10px;
            margin-bottom: 12px;
        }

        .player-hand h5[b-2hw73c3w4u] {
            font-size: 0.85rem;
            margin-bottom: 10px;
        }

        .support-card-container[b-2hw73c3w4u] {
            gap: 3px;
            max-width: 18%;
        }

        /* Phase header */
        .phase-header[b-2hw73c3w4u] {
            padding: 14px;
            margin-bottom: 14px;
        }

        /* Voting complete */
        .voting-complete[b-2hw73c3w4u] {
            padding: 20px 16px;
        }

        .voting-complete .display-1[b-2hw73c3w4u] {
            font-size: 3rem;
        }

        /* Project cards */
        .project-card-wrapper[b-2hw73c3w4u] {
            margin-bottom: 10px;
        }

        /* Controls header */
        .controls-header[b-2hw73c3w4u] {
            gap: 12px;
            margin-bottom: 14px;
        }

        .segmented-control[b-2hw73c3w4u] {
            padding: 4px;
        }

        .segmented-control button[b-2hw73c3w4u] {
            padding: 6px 14px;
            font-size: 0.85rem;
        }
    }

    @media (max-width: 480px) {
        .support-interface[b-2hw73c3w4u] {
            padding: 0;
        }

        .player-hand-sticky[b-2hw73c3w4u] {
            padding: 6px 0;
            box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        }

        .player-hand[b-2hw73c3w4u] {
            padding: 8px;
        }

        .player-hand h5[b-2hw73c3w4u] {
            font-size: 0.8rem;
        }

        .support-card-container[b-2hw73c3w4u] {
            gap: 2px;
            max-width: 17%;
        }

        .phase-header[b-2hw73c3w4u] {
            padding: 12px;
        }

        .voting-complete[b-2hw73c3w4u] {
            padding: 16px 12px;
        }

        .voting-complete .display-1[b-2hw73c3w4u] {
            font-size: 2.5rem;
        }

        .voting-complete h3[b-2hw73c3w4u] {
            font-size: 1rem;
        }

        .voting-complete .lead[b-2hw73c3w4u] {
            font-size: 0.85rem;
        }

        /* Controls */
        .controls-header[b-2hw73c3w4u] {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }

        .segmented-control[b-2hw73c3w4u] {
            width: 100%;
            justify-content: center;
        }

        .segmented-control button[b-2hw73c3w4u] {
            padding: 5px 12px;
            font-size: 0.8rem;
            flex: 1;
        }

        /* Confirm button */
        .btn-confirm-elegant[b-2hw73c3w4u],
        .btn-confirm-disabled[b-2hw73c3w4u] {
            padding: 10px 16px;
            font-size: 0.85rem;
        }

        /* Projects grid - single column on small phones to fit attributes */
        .projects-grid-compact[b-2hw73c3w4u] {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        /* Remove card indicator smaller */
        .remove-card-indicator[b-2hw73c3w4u] {
            font-size: 0.7rem;
            padding: 3px 6px;
        }
    }

    /* Extra small phones - keep single column */
    @media (max-width: 375px) {
        .projects-grid-compact[b-2hw73c3w4u] {
            gap: 8px;
        }
    }

    /* Touch-friendly improvements */
    @media (hover: none) and (pointer: coarse) {
        .project-card-wrapper.can-drop:hover[b-2hw73c3w4u] {
            animation: none;
        }

        .project-card-wrapper:active[b-2hw73c3w4u] {
        }

        .segmented-control button:hover[b-2hw73c3w4u] {
            background: transparent;
        }

        .segmented-control button:active[b-2hw73c3w4u] {
            background: rgba(0, 0, 0, 0.08);
        }
    }

    /* Landscape mobile: free up vertical space by letting the whole sticky
       group (header + hand) scroll away instead of pinning it. */
    @media (max-height: 500px) and (orientation: landscape) {
        .sticky-header-group[b-2hw73c3w4u] {
            position: relative;
        }

        .phase-header[b-2hw73c3w4u] {
            padding: 10px;
        }

        .voting-complete[b-2hw73c3w4u] {
            padding: 12px;
        }

        .voting-complete .display-1[b-2hw73c3w4u] {
            font-size: 2rem;
            margin-bottom: 8px !important;
        }
    }

    /* Align project card layout with GameParticipantsRW: wrappers must not frame or crop cards. */
    .support-interface[b-2hw73c3w4u] {
        background: #0c3a58;
    }

    .phase-header[b-2hw73c3w4u] {
        margin-bottom: 0;
    }

    .player-hand-sticky[b-2hw73c3w4u] {
        border-radius: 0;
    }

    .projects-grid-compact[b-2hw73c3w4u] {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 280px));
        justify-content: center;
        align-items: start;
    }

    .project-item-wrapper[b-2hw73c3w4u] {
        width: 100%;
        max-width: 280px;
        aspect-ratio: 1 / 1;
        border-radius: 3px;
        overflow: visible;
        background: transparent;
    }

    .project-item-wrapper:hover[b-2hw73c3w4u] {
        box-shadow: none;
    }

    .project-item-wrapper[b-2hw73c3w4u]  .project-card,
    .project-item-wrapper[b-2hw73c3w4u]  .idea-card {
        height: 100%;
    }

    .projects-list-view .project-item-wrapper[b-2hw73c3w4u] {
        aspect-ratio: auto;
        max-width: 320px;
    }

    @media (max-width: 768px) {
        .phase-header-content[b-2hw73c3w4u] {
            align-items: stretch;
        }

        .phase-title[b-2hw73c3w4u],
        .phase-wallet-slot[b-2hw73c3w4u] {
            width: 100%;
            flex-basis: 100%;
            justify-content: center;
        }

        .phase-wallet-slot[b-2hw73c3w4u] {
            min-width: 0;
        }

        .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact {
            width: 100%;
            margin-left: 0;
        }
    }

    @media (max-width: 1023px) {
        .phase-header[b-2hw73c3w4u] {
            padding: 7px 10px;
            margin-bottom: 0;
        }

        .phase-header-content[b-2hw73c3w4u] {
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0;
        }

        .phase-title[b-2hw73c3w4u] {
            display: none;
        }

        .phase-wallet-slot[b-2hw73c3w4u] {
            width: 100%;
            min-width: 0;
            flex: 1 1 100%;
            justify-content: center;
        }

        .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact {
            width: auto;
            max-width: calc(100vw - 20px);
            margin: 0 auto;
        }

        .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact .wallet-mobile-summary {
            width: fit-content;
            min-height: 38px;
            justify-content: center;
            gap: 7px;
            margin: 0 auto;
        }

        .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact .mobile-role-avatar {
            width: 30px;
            height: 30px;
            border-radius: 8px;
        }

        .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact .mobile-role-name {
            max-width: 42vw;
            font-size: 0.92rem;
            text-align: center;
        }

        .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact .mobile-preferences {
            gap: 4px;
        }

        .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact .mobile-preference-badge,
        .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact .mobile-secretary-badge {
            width: 24px;
            height: 24px;
        }

        .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact .mobile-preference-badge img,
        .phase-wallet-slot[b-2hw73c3w4u]  .wallet-rw.compact .mobile-secretary-badge img {
            width: 19px;
            height: 19px;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/InterestAreasSummary.razor.rz.scp.css */
.area-card[b-pldzeq7cw8] {
        transition: all 0.3s ease;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .area-card:hover[b-pldzeq7cw8] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }
    
    .area-icon[b-pldzeq7cw8] {
        font-size: 3rem;
        margin-bottom: 10px;
    }
    
    .area-value[b-pldzeq7cw8] {
        font-size: 2.5rem;
        font-weight: bold;
        margin: 10px 0;
    }
    
    .area-impact[b-pldzeq7cw8] {
        font-size: 1.5rem;
        font-weight: bold;
    }
    
    .area-progress[b-pldzeq7cw8] {
        height: 10px;
        border-radius: 5px;
        overflow: hidden;
        background: #e9ecef;
        margin-top: 10px;
    }
    
    .area-progress-bar[b-pldzeq7cw8] {
        height: 100%;
        transition: width 0.5s ease;
    }
    
    .level-0[b-pldzeq7cw8] { background: var(--success-color); }
    .level-1[b-pldzeq7cw8] { background: #fd7e14; }
    .level-2[b-pldzeq7cw8] { background: var(--color-warning); }
    .level-3[b-pldzeq7cw8] { background: var(--success-color); }
    .level-4[b-pldzeq7cw8] { background: #28a745; }
    .level-5[b-pldzeq7cw8] { background: #1a5c7a; }
/* _content/Municipality16.Shared/Components/Pages/GamePages/MentorDashboard.razor.rz.scp.css */
.mentor-dashboard[b-bp3kmalejk] {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 25px;
        margin-top: 30px;
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .approval-card[b-bp3kmalejk] {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        transition: all 0.3s ease;
    }

    .approval-card:hover[b-bp3kmalejk] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .approval-pending[b-bp3kmalejk] {
        border-left: 4px solid #ffc107;
    }

    .approval-approved[b-bp3kmalejk] {
        border-left: 4px solid #28a745;
        opacity: 0.7;
    }

    .approval-rejected[b-bp3kmalejk] {
        border-left: 4px solid #dc3545;
        opacity: 0.7;
    }

    .tool-preview[b-bp3kmalejk] {
        width: 80px;
        height: 80px;
        object-fit: contain;
    }

    .mentor-actions[b-bp3kmalejk] {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    .quiz-answers[b-bp3kmalejk] {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-top: 15px;
    }

    .answer-item[b-bp3kmalejk] {
        padding: 10px;
        margin-bottom: 10px;
        background: white;
        border-radius: 6px;
        border-left: 3px solid #1a5c7a;
    }

    .answer-correct[b-bp3kmalejk] {
        border-left-color: #28a745;
        background: #d4edda;
    }

    .answer-incorrect[b-bp3kmalejk] {
        border-left-color: #dc3545;
        background: #f8d7da;
    }

    .pending-badge[b-bp3kmalejk] {
        background: #ffc107;
        color: white;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .player-group-header[b-bp3kmalejk] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 8px;
        margin-top: 20px;
    }

    .player-group-header:first-child[b-bp3kmalejk] {
        margin-top: 0;
    }

    .player-group-header h6[b-bp3kmalejk] {
        margin: 0;
        font-weight: 500;
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/PhaseCompletionWaiting.razor.rz.scp.css */
.phase-completion-container[b-b1ffi5x6wp] {
    width: 100%;
    height: 100%;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: completion-fade-in-b-b1ffi5x6wp 0.4s var(--ease-out, ease-out);
}

.phase-completion-content[b-b1ffi5x6wp] {
    background: var(--surface-card, #ffffff);
    border: 1px solid var(--border-default, rgba(12, 58, 88, 0.15));
    border-radius: 12px;
    padding: 40px 30px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: var(--shadow-md, 0 2px 8px rgba(12, 58, 88, 0.12));
    animation: completion-slide-in-b-b1ffi5x6wp 0.4s var(--ease-out, ease-out);
}

.completion-icon[b-b1ffi5x6wp] {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 16px;
    color: var(--state-success, #28a745);
    animation: completion-pop-b-b1ffi5x6wp 0.5s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) 0.15s both;
    display: inline-block;
}

.completion-title[b-b1ffi5x6wp] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #0c3a58);
}

.completion-message[b-b1ffi5x6wp] {
    font-size: 1rem;
    margin: 12px 0 0;
    line-height: 1.5;
    color: var(--text-muted, #6c757d);
}

.completion-next-info[b-b1ffi5x6wp] {
    background: var(--surface-card-soft, #f8f9fa);
    border: 1px solid var(--border-subtle, rgba(12, 58, 88, 0.08));
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--text-secondary, #44606f);
}

.completion-spinner .spinner-border[b-b1ffi5x6wp] {
    width: 2rem;
    height: 2rem;
    border-width: 2px;
    border-color: var(--border-default, rgba(12, 58, 88, 0.15));
    border-top-color: var(--rw-blue, #1a5c7a);
}

.completion-spinner-text[b-b1ffi5x6wp] {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--text-muted, #6c757d);
    font-weight: 500;
}

@keyframes completion-fade-in-b-b1ffi5x6wp {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes completion-slide-in-b-b1ffi5x6wp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes completion-pop-b-b1ffi5x6wp {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
    .phase-completion-content[b-b1ffi5x6wp] {
        padding: 30px 20px;
        max-width: 350px;
    }

    .completion-icon[b-b1ffi5x6wp] {
        font-size: 3rem;
    }

    .completion-title[b-b1ffi5x6wp] {
        font-size: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .phase-completion-container[b-b1ffi5x6wp],
    .phase-completion-content[b-b1ffi5x6wp],
    .completion-icon[b-b1ffi5x6wp] {
        animation: none !important;
    }
}
/* _content/Municipality16.Shared/Components/Pages/GamePages/PlayerProgressBar.razor.rz.scp.css */
.progress-container[b-blsgu2ry7w] {
        width: 100%;
        padding: 40px 20px 30px;
        background: #f8f9fa;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        margin: 20px 0;
        position: relative;
        overflow: hidden;
    }
        100%[b-blsgu2ry7w] { transform: rotate(360deg); }
    }
    
    .progress-track[b-blsgu2ry7w] {
        position: relative;
        height: 100px;
        margin: 0 40px;
    }
    
    .progress-line[b-blsgu2ry7w] {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 6px;
        background: #e9ecef;
        transform: translateY(-50%);
        border-radius: 3px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    .progress-start-point[b-blsgu2ry7w],
    .progress-end-point[b-blsgu2ry7w] {
        position: absolute;
        top: 50%;
        width: 14px;
        height: 14px;
        background: #2c3e50;
        border: 2px solid #ecf0f1;
        border-radius: 50%;
        transform: translateY(-50%);
        z-index: 2;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .progress-start-point[b-blsgu2ry7w] {
        left: -7px;
    }
    
    .progress-end-point[b-blsgu2ry7w] {
        right: -7px;
    }
    
    .player-avatar[b-blsgu2ry7w] {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
    }
    
    .player-avatar:hover[b-blsgu2ry7w] {
        transform: translate(-50%, -58%);
    }
    
    .player-avatar:hover .player-info[b-blsgu2ry7w] {
        opacity: 1;
        visibility: visible;
        transform: translateY(8px);
    }
    
    .avatar-circle[b-blsgu2ry7w] {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        border: 4px solid white;
        position: relative;
        background: var(--background-colorful-primary);
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .player-avatar:hover .avatar-circle[b-blsgu2ry7w] {
        transform: scale(1.15);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }
    
    .avatar-circle img[b-blsgu2ry7w] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .avatar-initials[b-blsgu2ry7w] {
        color: white;
        font-weight: bold;
        font-size: 20px;
        text-transform: uppercase;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .player-info[b-blsgu2ry7w] {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 12px;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        white-space: nowrap;
        pointer-events: none;
        z-index: 1000;
    }
    
    .player-name[b-blsgu2ry7w] {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 4px;
        background: var(--color-element-background);
        padding: 4px 12px;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }
    
    .player-points[b-blsgu2ry7w] {
        display: inline-block;
        font-size: 13px;
        color: #fff;
        background: var(--background-colorful-primary);
        padding: 4px 10px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(26, 92, 122, 0.4);
        margin-bottom: 4px;
        font-weight: 600;
    }
    
    .player-role[b-blsgu2ry7w] {
        display: block;
        font-size: 11px;
        color: #7f8c8d;
        font-style: italic;
        background: var(--color-element-background);
        padding: 2px 8px;
        border-radius: 10px;
        margin-top: 3px;
    }
    
    .progress-labels[b-blsgu2ry7w] {
        display: flex;
        justify-content: space-between;
        margin: 25px 40px 0;
        font-size: 15px;
        color: #34495e;
        font-weight: 600;
        position: relative;
    }
    
    .label-center[b-blsgu2ry7w] {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-weight: bold;
        color: #2c3e50;
        font-size: 16px;
    }
    
    /* Animace pro nové hráče */
    @keyframes fadeIn-b-blsgu2ry7w {
        from {
            opacity: 0;
            transform: translate(-50%, -30%);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    }
    
    .player-avatar[b-blsgu2ry7w] {
        animation: fadeIn-b-blsgu2ry7w 0.5s ease-out;
    }
    
    /* Responsivní design */
    @media (max-width: 768px) {
        .progress-track[b-blsgu2ry7w] {
            margin: 0 20px;
            height: 80px;
        }
        
        .avatar-circle[b-blsgu2ry7w] {
            width: 48px;
            height: 48px;
            border-width: 3px;
        }
        
        .avatar-initials[b-blsgu2ry7w] {
            font-size: 16px;
        }
        
        .progress-labels[b-blsgu2ry7w] {
            margin: 20px 20px 0;
            font-size: 13px;
        }
        
        .player-name[b-blsgu2ry7w] {
            font-size: 12px;
        }
        
        .player-points[b-blsgu2ry7w] {
            font-size: 11px;
        }
        
        .player-role[b-blsgu2ry7w] {
            font-size: 10px;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/PlayerProgressBarRW.razor.rz.scp.css */
.progress-container-rw[b-wyuun3g1t1] {
        background: #ffffff;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        margin: 20px 0;
        position: relative;
        overflow: visible;
    }

    .progress-header[b-wyuun3g1t1] {
        margin-bottom: 25px;
        text-align: center;
    }

    .progress-title[b-wyuun3g1t1] {
        color: #0c3a58;
        font-weight: 700;
        font-size: 1.1rem;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .progress-title i[b-wyuun3g1t1] {
        color: #1a5c7a;
        font-size: 1.2rem;
    }

    .progress-track-rw[b-wyuun3g1t1] {
        position: relative;
        height: 100px;
        margin: 0 50px;
    }

    .progress-line-rw[b-wyuun3g1t1] {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 8px;
        background: var(--rw-blue, #1a5c7a);
        transform: translateY(-50%);
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .progress-markers[b-wyuun3g1t1] {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
    }

    .marker[b-wyuun3g1t1] {
        position: absolute;
        width: 16px;
        height: 16px;
        background: #0c3a58;
        border: 3px solid white;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .marker-start[b-wyuun3g1t1] {
        left: -8px;
    }

    .marker-center[b-wyuun3g1t1] {
        left: 50%;
        transform: translateX(-50%);
    }

    .marker-end[b-wyuun3g1t1] {
        right: -8px;
    }

    .player-avatar-rw[b-wyuun3g1t1] {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
    }

    .player-avatar-rw:hover[b-wyuun3g1t1] {
        transform: translate(-50%, -60%);
    }

    .player-avatar-rw:hover .player-tooltip-rw[b-wyuun3g1t1] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .avatar-circle-rw[b-wyuun3g1t1] {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        border: 4px solid white;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        background: #0c3a58;
    }

    .player-avatar-rw:hover .avatar-circle-rw[b-wyuun3g1t1] {
        transform: scale(1.15);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .avatar-circle-rw img[b-wyuun3g1t1] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .avatar-initials-rw[b-wyuun3g1t1] {
        color: white;
        font-weight: 700;
        font-size: 18px;
        text-transform: uppercase;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .player-tooltip-rw[b-wyuun3g1t1] {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        margin-top: 8px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .tooltip-content[b-wyuun3g1t1] {
        background: white;
        border-radius: 12px;
        padding: 12px 16px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        border: 2px solid #e0e0e0;
    }

    .player-name-rw[b-wyuun3g1t1] {
        font-size: 14px;
        font-weight: 700;
        color: #0c3a58;
    }

    .player-points-rw[b-wyuun3g1t1] {
        font-size: 13px;
        font-weight: 600;
        color: white;
        background: #28a745;
        padding: 4px 12px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    }

    .player-role-rw[b-wyuun3g1t1] {
        font-size: 11px;
        color: #6c757d;
        font-style: italic;
    }

    .progress-labels-rw[b-wyuun3g1t1] {
        display: flex;
        justify-content: space-between;
        margin: 30px 50px 0;
        font-size: 14px;
        color: #0c3a58;
        font-weight: 600;
        position: relative;
    }

    .label-center-rw[b-wyuun3g1t1] {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-weight: 700;
        color: #0c3a58;
        background: #f8f9fa;
        padding: 2px 12px;
        border-radius: 12px;
    }

    .label-min-rw[b-wyuun3g1t1], .label-max-rw[b-wyuun3g1t1] {
        background: #f8f9fa;
        padding: 2px 12px;
        border-radius: 12px;
    }

    @keyframes fadeInRw-b-wyuun3g1t1 {
        from {
            opacity: 0;
            transform: translate(-50%, -30%);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    }

    .player-avatar-rw[b-wyuun3g1t1] {
        animation: fadeInRw-b-wyuun3g1t1 0.5s ease-out;
    }

    @media (max-width: 768px) {
        .progress-track-rw[b-wyuun3g1t1] {
            margin: 0 30px;
            height: 80px;
        }

        .avatar-circle-rw[b-wyuun3g1t1] {
            width: 44px;
            height: 44px;
            border-width: 3px;
        }

        .avatar-initials-rw[b-wyuun3g1t1] {
            font-size: 14px;
        }

        .progress-labels-rw[b-wyuun3g1t1] {
            margin: 20px 30px 0;
            font-size: 12px;
        }

        .tooltip-content[b-wyuun3g1t1] {
            padding: 8px 12px;
        }

        .player-name-rw[b-wyuun3g1t1] {
            font-size: 12px;
        }

        .player-points-rw[b-wyuun3g1t1] {
            font-size: 11px;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/PlayerWallet.razor.rz.scp.css */
/* ================================
       COMPACT LEFT-ALIGNED PLAYER WALLET
       ================================ */
    
    /* Unified container - consistent across all game pages */
    .compact-wallet-container[b-zvyom8nhd6] {
        width: 100%;
        max-width: 320px;
        position: relative;
        overflow: visible;
        transition: all 0.3s ease;
    }

    .compact-wallet-container.collapsed[b-zvyom8nhd6] {
        max-width: 50px;
    }

    /* Ensure toggle stays visible and clickable when wallet is collapsed (force top-left) */
    .compact-wallet-container.collapsed .wallet-toggle-btn[b-zvyom8nhd6] {
        position: fixed !important;
        left: 12px !important;
        right: auto !important;
        top: 12px !important;
        transform: none !important;
        z-index: 2500 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 6px !important;
    }

    .wallet-toggle-btn[b-zvyom8nhd6] {
        position: absolute;
        right: -18px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        border-radius: 8px;
        min-width: 40px;
        width: auto;
        height: 40px;
        padding: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        color: white;
        font-size: 0.95rem;
        z-index: 999;
        transition: all 0.18s ease;
        pointer-events: auto;
        line-height: 1;
    }

    .wallet-char[b-zvyom8nhd6] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin: 0;
        border-radius: 50%;
        background: #f4c737;
        color: #1b1b1b;
        font-weight: 700;
        font-size: 0.95rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        line-height: 1;
    }

    .wallet-toggle-btn:hover[b-zvyom8nhd6] {
        /* Do not change background/opacity or add shadows on hover */
        transform: translateY(-50%) scale(1.03);
        box-shadow: none;
        background: none;
    }

    .compact-wallet-display.hidden[b-zvyom8nhd6] {
        opacity: 0;
        transform: translateX(-100%);
        pointer-events: none;
    }

    .compact-wallet-display[b-zvyom8nhd6] {
        background: rgba(26, 92, 122, 0.07);
        border-radius: 12px;
        padding: 16px 18px;
        color: white;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .compact-wallet-display[b-zvyom8nhd6]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: #dc3545;
    }

    /* Compact header with role icon */
    .compact-wallet-header[b-zvyom8nhd6] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        gap: 10px;
    }

    .compact-avatar-section[b-zvyom8nhd6] {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-grow: 1;
        min-width: 0;
    }

    .compact-role-icon[b-zvyom8nhd6] {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        padding: 4px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .compact-user-info[b-zvyom8nhd6] {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .compact-username[b-zvyom8nhd6] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .compact-role-name[b-zvyom8nhd6] {
        opacity: 0.85;
        font-size: 0.75rem;
        display: block;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .compact-role-badge[b-zvyom8nhd6] {
        background: rgba(255, 255, 255, 0.25);
        padding: 2px 6px;
        border-radius: 8px;
        font-size: 0.65rem;
        font-weight: 500;
        display: inline-block;
        margin-top: 3px;
    }

    .compact-secretary-badge[b-zvyom8nhd6] {
        background: #ffc107;
        color: #2c2c54;
        padding: 4px 6px;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(254, 202, 87, 0.3);
        flex-shrink: 0;
    }

    /* Compact preferences */
    .compact-preferences-section[b-zvyom8nhd6] {
        background: rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .compact-preferences-title[b-zvyom8nhd6] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 10px;
        font-size: 0.85rem;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .compact-preference-groups[b-zvyom8nhd6] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .compact-preference-group[b-zvyom8nhd6] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .compact-preference-badges[b-zvyom8nhd6] {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .compact-badge[b-zvyom8nhd6] {
        padding: 3px 6px;
        border-radius: 6px;
        font-size: 0.8rem;
        transition: all 0.2s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .compact-badge:hover[b-zvyom8nhd6] {
        transform: scale(1.1);
    }


    .not-supported-compact[b-zvyom8nhd6] {
       
        position: relative;
    }
    /* Křížek přes nepodporovanou oblast - silnější verze */
    .not-supported-compact[b-zvyom8nhd6]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        height: 3px;
        background: #ff0000;
        border-radius: 2px;
        z-index: 1;
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.4),
            0 0 8px rgba(255, 0, 0, 0.3);
    }

    .not-supported-compact[b-zvyom8nhd6]::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .not-supported-compact[b-zvyom8nhd6]::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }



    /* Area icon image styling */
    .area-icon-img[b-zvyom8nhd6] {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

    /* Compact additional info */
    .compact-additional-info[b-zvyom8nhd6] {
        margin-top: 10px;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        text-align: center;
        font-size: 0.7rem;
        opacity: 0.9;
    }

    /* Compact custom content */
    .compact-custom-content[b-zvyom8nhd6] {
        margin-top: 10px;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        font-size: 0.75rem;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .compact-wallet-container[b-zvyom8nhd6] {
            max-width: 280px;
        }

        .compact-wallet-display[b-zvyom8nhd6] {
            padding: 14px 16px;
        }

        /* On mobile: show an 'x' cross instead of black circle chevron */
        .wallet-toggle-btn[b-zvyom8nhd6] {
            right: 8px;
            top: 8px;
            transform: none;
            background: transparent;
            border: none;
            width: 44px;
            height: 44px;
            box-shadow: none;
            align-items: center;
            justify-content: center;
            padding: 6px;
        }


    /* Desktop: hide mobile-only icon */
    .wallet-toggle-btn .mobile-only[b-zvyom8nhd6] { display: none; }
        .compact-role-icon[b-zvyom8nhd6] {
            width: 36px;
            height: 36px;
        }

        .compact-username[b-zvyom8nhd6] {
            font-size: 0.95rem;
        }

        .compact-role-name[b-zvyom8nhd6] {
            font-size: 0.7rem;
        }
    }

    @media (max-width: 480px) {
        .compact-wallet-container[b-zvyom8nhd6] {
            max-width: 260px;
        }

        .compact-wallet-display[b-zvyom8nhd6] {
            padding: 12px 14px;
        }

        .compact-role-icon[b-zvyom8nhd6] {
            width: 24px;
            height: 24px;
        }

        .compact-preference-badges[b-zvyom8nhd6] {
            gap: 3px;
        }

        .compact-badge[b-zvyom8nhd6] {
            padding: 2px 4px;
            font-size: 0.75rem;
        }

        .area-icon-img[b-zvyom8nhd6] {
            width: 14px;
            height: 14px;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/PlayerWalletRW.razor.rz.scp.css */
/* ================================
       PLAYER WALLET RW
       Responsive design inspired by GameParticipantsRW
       ================================ */

    .wallet-rw[b-4blceg9iac] {
        position: relative;
        width: 100%;
        max-width: 200px;
        z-index: 100;
    }

    .wallet-rw.collapsed[b-4blceg9iac] {
        max-width: 60px;
    }

    .wallet-rw.compact[b-4blceg9iac] {
        width: min(100%, 460px);
        max-width: 460px;
        z-index: 1;
    }

    .wallet-rw.compact.collapsed[b-4blceg9iac] {
        max-width: 460px;
    }

    .wallet-rw.compact .wallet-mobile-summary[b-4blceg9iac] {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 56px;
        width: fit-content;
        max-width: 100%;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        gap: 12px;
    }

    .wallet-rw.compact .wallet-card[b-4blceg9iac],
    .wallet-rw.compact .wallet-toggle-floating[b-4blceg9iac] {
        display: none;
    }

    .wallet-rw.compact .mobile-role-avatar[b-4blceg9iac] {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .wallet-rw.compact .mobile-role-name[b-4blceg9iac] {
        font-size: 1.08rem;
        font-weight: 800;
    }

    .wallet-rw.compact .mobile-preferences[b-4blceg9iac] {
        grid-column: auto;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 7px;
    }

    .wallet-rw.compact .mobile-preference-badge[b-4blceg9iac] {
        width: 32px;
        height: 32px;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .wallet-rw.compact .mobile-preference-badge img[b-4blceg9iac] {
        width: 26px;
        height: 26px;
    }

    .wallet-rw.compact .mobile-secretary-badge[b-4blceg9iac] {
        width: 32px;
        height: 32px;
    }

    .wallet-rw.compact .mobile-secretary-badge img[b-4blceg9iac] {
        width: 26px;
        height: 26px;
    }

    /* Floating toggle button (collapsed state) */
    .wallet-toggle-floating[b-4blceg9iac] {
        position: fixed;
        left: 12px;
        top: 12px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        background: rgba(26, 92, 122, 0.95);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        cursor: pointer;
        z-index: 2000;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toggle-avatar[b-4blceg9iac] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.2);
    }

    .toggle-avatar img[b-4blceg9iac] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .toggle-initial[b-4blceg9iac] {
        color: white;
        font-size: 1.2rem;
        font-weight: 700;
    }

    /* Wallet Card */
    .wallet-card[b-4blceg9iac] {
        border-radius: 12px;
        padding: 16px;
        color: white;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        position: relative;
        overflow: hidden;
    }

    .wallet-card.hidden[b-4blceg9iac] {
        opacity: 0;
        transform: translateX(-100%);
        pointer-events: none;
        position: absolute;
    }

    .wallet-card[b-4blceg9iac]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
    }

    /* Header */
    .wallet-header[b-4blceg9iac] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .user-info-row[b-4blceg9iac] {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        min-width: 0;
    }

    .role-avatar[b-4blceg9iac] {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        padding: 6px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .role-avatar.placeholder[b-4blceg9iac] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: 700;
        color: white;
    }

    .user-details[b-4blceg9iac] {
        display: flex;
        flex-direction: column;
        min-width: 0;
        flex: 1;
    }

    .user-name[b-4blceg9iac] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .role-type-badge[b-4blceg9iac] {
        background: rgba(255, 255, 255, 0.2);
        padding: 2px 8px;
        border-radius: 8px;
        font-size: 0.65rem;
        font-weight: 500;
        display: inline-block;
        margin-top: 2px;
        width: fit-content;
    }

    .username[b-4blceg9iac] {
        opacity: 0.8;
        font-size: 0.75rem;
        display: block;
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .secretary-badge[b-4blceg9iac] {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
    }

    .secretary-badge img[b-4blceg9iac] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .close-btn[b-4blceg9iac] {
        background: none;
        border: none;
        color: white;
        opacity: 0.6;
        padding: 4px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .close-btn:hover[b-4blceg9iac] {
        opacity: 1;
    }

    /* Preferences Section */
    .preferences-section[b-4blceg9iac] {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .section-title[b-4blceg9iac] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 10px;
        font-size: 0.85rem;
        font-weight: 600;
        color: white;
    }

    .section-title i[b-4blceg9iac] {
        color: #ff6b6b;
    }

    .preference-groups[b-4blceg9iac] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .preference-group[b-4blceg9iac] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .preference-badges[b-4blceg9iac] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .preference-badge[b-4blceg9iac] {
        width: 36px;
        height: 36px;
        border-radius: 128px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .preference-badge:hover[b-4blceg9iac] {
        transform: scale(1.1);
    }

    .preference-badge img[b-4blceg9iac] {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .supported-badge[b-4blceg9iac] {
        background: rgba(40, 167, 69, 0.2);
        border: 1px solid rgba(40, 167, 69, 0.4);
    }

    .not-supported-badge[b-4blceg9iac] {
        background: rgba(220, 53, 69, 0.15);
        border: 1px solid rgba(220, 53, 69, 0.3);
    }

    .cross-overlay[b-4blceg9iac] {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70%;
        height: 3px;
        background: #ff0000;
        border-radius: 2px;
        transform: translate(-50%, -50%) rotate(-45deg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    /* Mobile identity card */
    .wallet-mobile-summary[b-4blceg9iac] {
        display: none;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 10px;
        padding: 10px 12px;
        color: white;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .mobile-role-avatar[b-4blceg9iac] {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 5px;
        border-radius: 9px;
        overflow: hidden;
        background: #ff8a2b;
        box-shadow: 0 3px 8px rgba(255, 107, 26, 0.25);
    }

    .mobile-role-avatar img[b-4blceg9iac] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-role-avatar.placeholder[b-4blceg9iac] {
        color: white;
        font-size: 1rem;
        font-weight: 700;
    }

    .mobile-user-details[b-4blceg9iac] {
        display: grid;
        min-width: 0;
        line-height: 1.15;
    }

    .mobile-role-name[b-4blceg9iac] {
        overflow: hidden;
        color: white;
        font-size: 0.95rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-secretary-badge[b-4blceg9iac] {
        position: relative;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        overflow: hidden;
        border-radius: 7px;
    }

    .mobile-secretary-badge img[b-4blceg9iac] {
        width: 21px;
        height: 21px;
        object-fit: contain;
    }

    .mobile-preferences[b-4blceg9iac] {
        display: flex;
        grid-column: 2 / -1;
        flex-wrap: wrap;
        gap: 5px;
    }

    .mobile-preference-badge[b-4blceg9iac] {
        position: relative;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        overflow: hidden;
        border-radius: 7px;
    }

    .mobile-preference-badge img[b-4blceg9iac] {
        width: 21px;
        height: 21px;
        object-fit: contain;
    }

    .mobile-preference-badge.supported[b-4blceg9iac] {
        background: rgba(40, 167, 69, 0.22);
        border: 1px solid rgba(40, 167, 69, 0.5);
    }

    .mobile-preference-badge.not-supported[b-4blceg9iac] {
        background: rgba(220, 53, 69, 0.18);
        border: 1px solid rgba(255, 107, 107, 0.55);
    }

    .mobile-preference-badge.not-supported[b-4blceg9iac]::after {
        position: absolute;
        width: 78%;
        height: 3px;
        content: '';
        background: #ff2e3f;
        border-radius: 2px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        transform: rotate(-45deg);
    }

    /* Additional Info */
    .additional-info[b-4blceg9iac] {
        margin-top: 12px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        text-align: center;
        font-size: 0.75rem;
        opacity: 0.9;
    }

    /* Custom Content */
    .custom-content[b-4blceg9iac] {
        margin-top: 12px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        font-size: 0.8rem;
    }

    /* ================================
       MOBILE RESPONSIVE
       ================================ */

    @media (max-width: 768px) {
        .wallet-rw[b-4blceg9iac] {
            max-width: 100%;
        }

        .wallet-rw.collapsed[b-4blceg9iac] {
            max-width: 100%;
        }

        .wallet-mobile-summary[b-4blceg9iac] {
            display: grid;
        }

        .wallet-card[b-4blceg9iac],
        .wallet-toggle-floating[b-4blceg9iac] {
            display: none;
        }

        .wallet-card[b-4blceg9iac] {
            padding: 14px;
        }

        .wallet-toggle-floating[b-4blceg9iac] {
            width: 52px;
            height: 52px;
            left: 10px;
            top: 10px;
        }

        .toggle-avatar[b-4blceg9iac] {
            width: 44px;
            height: 44px;
        }

        .role-avatar[b-4blceg9iac] {
            width: 40px;
            height: 40px;
            padding: 5px;
        }

        .user-name[b-4blceg9iac] {
            font-size: 0.95rem;
        }

        .username[b-4blceg9iac] {
            font-size: 0.7rem;
        }

        .close-btn[b-4blceg9iac] {
            padding: 6px;
        }

        .preferences-section[b-4blceg9iac] {
            padding: 10px;
        }
    }

    @media (max-width: 480px) {
        .wallet-rw[b-4blceg9iac] {
            max-width: 100%;
        }

        .wallet-rw.collapsed[b-4blceg9iac] {
            max-width: 100%;
        }

        .wallet-mobile-summary[b-4blceg9iac] {
            gap: 7px 8px;
            padding: 9px 10px;
        }

        .mobile-role-avatar[b-4blceg9iac] {
            width: 38px;
            height: 38px;
            padding: 4px;
        }

        .mobile-role-name[b-4blceg9iac] {
            font-size: 0.9rem;
        }

        .mobile-preference-badge[b-4blceg9iac] {
            width: 26px;
            height: 26px;
        }

        .mobile-preference-badge img[b-4blceg9iac] {
            width: 19px;
            height: 19px;
        }

        .wallet-card[b-4blceg9iac] {
            padding: 12px;
            border-radius: 12px;
        }

        .wallet-header[b-4blceg9iac] {
            margin-bottom: 10px;
        }

        .user-info-row[b-4blceg9iac] {
            gap: 8px;
        }

        .role-avatar[b-4blceg9iac] {
            width: 36px;
            height: 36px;
            padding: 4px;
        }

        .user-name[b-4blceg9iac] {
            font-size: 0.9rem;
        }

        .role-type-badge[b-4blceg9iac] {
            font-size: 0.6rem;
            padding: 2px 6px;
        }

        .preferences-section[b-4blceg9iac] {
            padding: 8px;
            border-radius: 10px;
        }

        .section-title[b-4blceg9iac] {
            font-size: 0.75rem;
            margin-bottom: 8px;
        }

        .preference-badges[b-4blceg9iac] {
            gap: 5px;
        }

        .preference-badge[b-4blceg9iac] {
            width: 30px;
            height: 30px;
        }

        .preference-badge img[b-4blceg9iac] {
            width: 22px;
            height: 22px;
        }

        .wallet-toggle-floating[b-4blceg9iac] {
            width: 46px;
            height: 46px;
            left: 8px;
            top: 8px;
        }

        .toggle-avatar[b-4blceg9iac] {
            width: 38px;
            height: 38px;
        }

        .additional-info[b-4blceg9iac] {
            padding: 6px 10px;
            font-size: 0.7rem;
        }

        .custom-content[b-4blceg9iac] {
            padding: 8px 10px;
            font-size: 0.75rem;
        }
    }

    /* Extra small devices */
    @media (max-width: 375px) {
        .wallet-toggle-floating[b-4blceg9iac] {
            width: 42px;
            height: 42px;
        }

        .toggle-avatar[b-4blceg9iac] {
            width: 34px;
            height: 34px;
        }

        .role-avatar[b-4blceg9iac] {
            width: 32px;
            height: 32px;
        }

        .user-name[b-4blceg9iac] {
            font-size: 0.85rem;
        }

        .preference-badge[b-4blceg9iac] {
            width: 28px;
            height: 28px;
        }

        .preference-badge img[b-4blceg9iac] {
            width: 20px;
            height: 20px;
        }
    }

    /* Touch-friendly improvements */
    @media (hover: none) and (pointer: coarse) {
        .preference-badge:hover[b-4blceg9iac] {
            transform: none;
        }

        .preference-badge:active[b-4blceg9iac] {
            transform: scale(0.95);
        }

        .close-btn:hover[b-4blceg9iac] {
            opacity: 0.6;
        }

        .close-btn:active[b-4blceg9iac] {
            opacity: 1;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/ProjectCard.razor.rz.scp.css */
/* ProjectCard wrapper: positioning + selected/support badges.
   The card body itself is delegated to <IdeaCard> via .razor.css scoped styles. */

.project-card[b-hjf6bu93a6] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    font-family: "Russo One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.project-card.clickable[b-hjf6bu93a6] {
    cursor: pointer;
}

.project-card[b-hjf6bu93a6]  .idea-card {
    width: 100%;
    height: 100%;
    max-width: none;
}

/* Compact mode: short banner without illustration */
.project-card.is-compact[b-hjf6bu93a6] {
    aspect-ratio: 9 / 4;
}

.project-card.is-compact[b-hjf6bu93a6]  .idea-card {
    aspect-ratio: auto;
}

/* Give the interest-area row (bottom) more height than the navy face so the
   area icons aren't cramped. */
.project-card.is-compact[b-hjf6bu93a6]  .idea-card-faceup-layout:not(.idea-card-hidden) {
    grid-template-rows: 1fr 1.3fr;
}

/* Hidden-value cards (player view) keep a 3.5fr:1fr split at normal size, which
   crushes the area-icon row once the card is also compact — split it evenly instead. */
.project-card.is-compact[b-hjf6bu93a6]  .idea-card-hidden {
    grid-template-rows: 1fr 1fr;
}

/* List view: drop the illustration and pin the role icon + price splash to the
   top corners so they don't overlap the title or the impact row below. */
.project-card.is-compact[b-hjf6bu93a6]  .idea-card-image,
.project-card.is-compact[b-hjf6bu93a6]  .idea-card-cover,
.project-card.is-compact[b-hjf6bu93a6]  .idea-card-cover-illustration {
    display: none;
}

.project-card.is-compact[b-hjf6bu93a6]  .idea-card-role-badge {
    top: 6px;
    left: 6px;
    transform: none;
}

.project-card.is-compact[b-hjf6bu93a6]  .idea-card-needed {
    top: 6px;
    right: 6px;
    transform: none;
}

/* Results list layout: keep the standard ProjectCard/IdeaCard shell, but
   remove illustration layers so title, role, price, and area icons fit. */
.project-card.is-list-layout[b-hjf6bu93a6] {
    aspect-ratio: 9 / 4;
    min-height: 122px;
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card {
    --idea-title-fs: 0.78rem;
    --idea-title-top: 8px;
    --idea-title-pad-x: 48px;
    --idea-role-size: 34px;
    --idea-role-left: 8px;
    --idea-role-top: 8px;
    --idea-price-size: 38px;
    --idea-price-right: 8px;
    --idea-impact-pad-x: 8px;
    --idea-impact-icon-size: 25px;
    --idea-impact-value-size: 23px;
    --idea-impact-gap: 4px;
    --idea-impact-value-fs: 0.68rem;
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-faceup-layout {
    grid-template-rows: 1fr 1.18fr;
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-hidden {
    grid-template-rows: 1fr 1.18fr;
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-cover,
.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-cover-illustration,
.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-image {
    display: none;
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-title,
.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-hidden .idea-card-title {
    top: var(--idea-title-top);
    left: var(--idea-title-pad-x);
    right: var(--idea-title-pad-x);
    padding: 0;
    background: transparent;
    font-size: var(--idea-title-fs);
    line-height: 1.08;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-role-badge,
.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-hidden .idea-card-role-badge {
    top: var(--idea-role-top);
    left: var(--idea-role-left);
    bottom: auto;
    width: var(--idea-role-size);
    height: var(--idea-role-size);
    transform: none;
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-needed,
.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-hidden .idea-card-needed {
    top: 8px;
    right: var(--idea-price-right);
    bottom: auto;
    width: var(--idea-price-size);
    height: var(--idea-price-size);
    transform: none;
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-hidden .idea-card-impact {
    padding: 6px var(--idea-impact-pad-x);
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-impact-icons,
.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-impact-values {
    gap: var(--idea-impact-gap);
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-attr-icon-wrapper {
    width: var(--idea-impact-icon-size);
    height: var(--idea-impact-icon-size);
}

.project-card.is-list-layout[b-hjf6bu93a6]  .idea-card-hidden .idea-impact-arrow {
    width: 42%;
}

/* ===== Selected state ===== */
.project-card.selected[b-hjf6bu93a6]  .idea-card {
    border-color: #20ad5a;
    box-shadow:
        0 0 0 3px rgba(32, 173, 90, 0.95),
        0 0 0 7px rgba(32, 173, 90, 0.2),
        0 2px 8px rgba(12, 58, 88, 0.12);
}

.selected-badge[b-hjf6bu93a6] {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: #28a745;
    color: #fff;
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ===== Support badges (corner indicators on top of the card) ===== */
.project-card[b-hjf6bu93a6] {
    --badge-size: 52px;
    --badge-font-size: 0.8rem;
}

.project-card-small[b-hjf6bu93a6] {
    --badge-size: 42px;
    --badge-font-size: 0.7rem;
}

.project-card-large[b-hjf6bu93a6] {
    --badge-size: 62px;
    --badge-font-size: 0.9rem;
}

.support-badge[b-hjf6bu93a6] {
    position: absolute;
    width: var(--badge-size);
    height: var(--badge-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--badge-font-size);
    color: #fff;
    z-index: 10;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28));
    pointer-events: none;
}

.support-badge img[b-hjf6bu93a6] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.support-badge-left[b-hjf6bu93a6] {
    top: -12px;
    left: -12px;
}

.support-badge-right[b-hjf6bu93a6] {
    top: -12px;
    right: -12px;
}

@media (max-width: 576px) {
    .support-badge-left[b-hjf6bu93a6] { top: -9px; left: -9px; }
    .support-badge-right[b-hjf6bu93a6] { top: -9px; right: -9px; }
}

/* Caption under the right badge (e.g. which boost tool produced this value).
   Anchored to the badge's horizontal CENTER (not its right edge) via the
   right/transform combo, so it stays centered under the badge regardless of
   how wide the tool name renders. */
.support-badge-caption[b-hjf6bu93a6] {
    position: absolute;
    top: calc(-12px + var(--badge-size) + 4px);
    right: calc(-12px + var(--badge-size) / 2);
    transform: translateX(50%);
    max-width: 130px;
    z-index: 10;
    background: rgba(12, 58, 88, 0.92);
    color: #fff;
    font-size: calc(var(--badge-font-size) * 0.85);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    padding: 3px 7px;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

@media (max-width: 576px) {
    .support-badge-caption[b-hjf6bu93a6] {
        top: calc(-9px + var(--badge-size) + 3px);
        right: calc(-9px + var(--badge-size) / 2);
        max-width: 110px;
    }
}
/* _content/Municipality16.Shared/Components/Pages/GamePages/ProjectsSlider.razor.rz.scp.css */
.projects-viewer[b-8ic3j4huxt] {
        width: 100%;
        max-width: 100%;
        padding: 15px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        overflow: hidden;
    }

    .project-section[b-8ic3j4huxt] {
        width: 100%;
    }

    .section-title[b-8ic3j4huxt] {
        font-size: 0.9rem;
        font-weight: 600;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .project-slider-container[b-8ic3j4huxt] {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .project-slider[b-8ic3j4huxt] {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 5px 5px 15px 5px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    /* Force horizontal scroll */
    .project-slider[b-8ic3j4huxt]::-webkit-scrollbar {
        height: 6px;
    }

    .project-slider[b-8ic3j4huxt]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .project-slider[b-8ic3j4huxt]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.4);
        border-radius: 3px;
    }

    .project-slider[b-8ic3j4huxt]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.6);
    }

    .project-slide[b-8ic3j4huxt] {
        flex: 0 0 auto;
        width: 250px;
        min-width: 250px;
        max-width: 250px;
        position: relative;
    }

    .stack-indicator[b-8ic3j4huxt] {
        position: absolute;
        top: 5px;
        left: 5px;
        background: rgba(26, 92, 122, 0.9);
        color: white;
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 0.75rem;
        font-weight: 600;
        z-index: 10;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    /* Scale down the cards to fit better */
    .project-slide .project-card[b-8ic3j4huxt] {
        transform: scale(0.9);
        transform-origin: center;
    }

    /* Gradient fade indicators */
    .project-slider-container[b-8ic3j4huxt]::before,
    .project-slider-container[b-8ic3j4huxt]::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 15px;
        width: 20px;
        z-index: 2;
        pointer-events: none;
    }

    .project-slider-container[b-8ic3j4huxt]::before {
        left: 0;
        background: rgba(26, 92, 122, 0.9);
    }

    .project-slider-container[b-8ic3j4huxt]::after {
        right: 0;
        background: rgba(12, 58, 88, 0.9);
    }

    .empty-stacks-message[b-8ic3j4huxt] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        gap: 10px;
    }

    .empty-stacks-message i[b-8ic3j4huxt] {
        font-size: 2.5rem;
        opacity: 0.5;
        color: white;
    }

    .empty-stacks-message p[b-8ic3j4huxt] {
        margin: 0;
        font-size: 0.9rem;
    }

    /* Firefox scrollbar */
    @supports (scrollbar-width: thin) {
        .project-slider[b-8ic3j4huxt] {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1);
        }
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
        .projects-viewer[b-8ic3j4huxt] {
            padding: 10px;
        }
        
        .project-slide[b-8ic3j4huxt] {
            width: 220px;
            min-width: 220px;
            max-width: 220px;
        }
        
        .section-title[b-8ic3j4huxt] {
            font-size: 0.85rem;
        }

        .stack-indicator[b-8ic3j4huxt] {
            font-size: 0.7rem;
            padding: 3px 8px;
        }
    }

    /* Prevent vertical overflow */
    *[b-8ic3j4huxt] {
        box-sizing: border-box;
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/ProjectsSliderRW.razor.rz.scp.css */
/* ================================
       PROJECTS SLIDER RW
       Responsive design inspired by GameParticipantsRW
       ================================ */

    .projects-viewer-rw[b-e5iklyrz5b] {
        width: 100%;
        background: rgba(26, 92, 122, 0.12);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .projects-viewer-rw.collapsed[b-e5iklyrz5b] {
        border-radius: 12px;
    }

    /* Header */
    .viewer-header[b-e5iklyrz5b] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.05);
        cursor: pointer;
        user-select: none;
        transition: background 0.2s ease;
    }

    .viewer-header:hover[b-e5iklyrz5b] {
        background: rgba(255, 255, 255, 0.1);
    }

    .header-content[b-e5iklyrz5b] {
        display: flex;
        align-items: center;
        gap: 10px;
        color: white;
    }

    .header-content i[b-e5iklyrz5b] {
        font-size: 1.1rem;
        opacity: 0.9;
    }

    .header-title[b-e5iklyrz5b] {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .badge-count[b-e5iklyrz5b] {
        background: rgba(255, 255, 255, 0.2);
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .collapse-btn[b-e5iklyrz5b] {
        background: none;
        border: none;
        color: white;
        opacity: 0.7;
        padding: 4px;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .collapse-btn:hover[b-e5iklyrz5b] {
        opacity: 1;
    }

    /* Content */
    .viewer-content[b-e5iklyrz5b] {
        padding: 14px 12px 18px;
        transition: all 0.3s ease;
    }

    .viewer-content.hidden[b-e5iklyrz5b] {
        display: none;
    }

    /* Section */
    .project-section[b-e5iklyrz5b] {
        margin-bottom: 16px;
    }

    .project-section:last-child[b-e5iklyrz5b] {
        margin-bottom: 0;
    }

    .section-header[b-e5iklyrz5b] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        color: white;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .section-header i[b-e5iklyrz5b] {
        font-size: 0.9rem;
    }

    .section-count[b-e5iklyrz5b] {
        margin-left: auto;
        background: rgba(255, 255, 255, 0.15);
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    /* Scroll Container */
    .projects-scroll-container[b-e5iklyrz5b] {
        position: relative;
        width: 100%;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .projects-scroll[b-e5iklyrz5b] {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: visible;
        padding: 6px 4px 18px 4px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 4px;
    }

    .projects-scroll[b-e5iklyrz5b]::-webkit-scrollbar {
        height: 8px;
    }

    .projects-scroll[b-e5iklyrz5b]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
        margin: 0 8px;
    }

    .projects-scroll[b-e5iklyrz5b]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.4);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .projects-scroll[b-e5iklyrz5b]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.6);
    }

    .projects-scroll[b-e5iklyrz5b]::-webkit-scrollbar-thumb:active {
        background: rgba(255, 255, 255, 0.8);
    }

    /* Project Item */
    .project-item[b-e5iklyrz5b] {
        flex: 0 0 auto;
        width: 280px;
        min-width: 280px;
        aspect-ratio: 1 / 1;
        position: relative;
        transition: transform 0.2s ease;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    .project-item[b-e5iklyrz5b]  .project-card,
    .project-item[b-e5iklyrz5b]  .idea-card {
        height: 100%;
    }

    .project-item[b-e5iklyrz5b]  .project-card {
        position: relative;
        z-index: 2;
    }

    .project-item:hover[b-e5iklyrz5b] {
        transform: translateY(-2px);
    }

    .project-item.with-stack-badge[b-e5iklyrz5b] {
        aspect-ratio: auto;
        height: calc(280px + 18px);
        padding-bottom: 18px;
    }

    

    .project-item.with-stack-badge[b-e5iklyrz5b]::before {
        bottom: 9px;
        z-index: 1;
    }

    .project-item.with-stack-badge[b-e5iklyrz5b]::after {
        bottom: 0;
        left: 18px;
        right: 18px;
        z-index: 0;
        opacity: 0.62;
    }

    .project-item.with-stack-badge[b-e5iklyrz5b]  .project-card {
        height: calc(100% - 18px);
    }

    /* First and last item padding for better mobile UX */
    .project-item:first-child[b-e5iklyrz5b] {
        margin-left: 4px;
    }

    .project-item:last-child[b-e5iklyrz5b] {
        margin-right: 4px;
    }

    /* Empty State */
    .empty-state[b-e5iklyrz5b] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 20px;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
    }

    .empty-state i[b-e5iklyrz5b] {
        font-size: 2rem;
        margin-bottom: 10px;
        opacity: 0.5;
    }

    .empty-state p[b-e5iklyrz5b] {
        margin: 0;
        font-size: 0.85rem;
    }

    /* ================================
       MOBILE RESPONSIVE
       ================================ */

    @media (max-width: 768px) {
        .projects-viewer-rw[b-e5iklyrz5b] {
            border-radius: 12px;
        }

        .viewer-header[b-e5iklyrz5b] {
            padding: 10px 14px;
        }

        .header-title[b-e5iklyrz5b] {
            font-size: 0.9rem;
        }

        .viewer-content[b-e5iklyrz5b] {
            padding: 10px;
        }

        .section-header[b-e5iklyrz5b] {
            padding: 6px 10px;
            font-size: 0.8rem;
        }

        .project-item[b-e5iklyrz5b] {
            width: 260px;
            min-width: 260px;
        }

        .project-item.with-stack-badge[b-e5iklyrz5b] {
            height: calc(260px + 18px);
        }

        .projects-scroll[b-e5iklyrz5b] {
            gap: 10px;
            padding: 6px 8px 16px 8px;
        }

        .projects-scroll[b-e5iklyrz5b]::-webkit-scrollbar {
            height: 6px;
        }

        /* Scroll hint shadow for mobile */
        .projects-scroll-container[b-e5iklyrz5b]::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 12px;
            width: 40px;
            background: rgba(26, 92, 122, 0.16);
            pointer-events: none;
            z-index: 1;
        }
    }

    @media (max-width: 480px) {
        .viewer-header[b-e5iklyrz5b] {
            padding: 8px 12px;
        }

        .header-content[b-e5iklyrz5b] {
            gap: 8px;
        }

        .header-content i[b-e5iklyrz5b] {
            font-size: 1rem;
        }

        .header-title[b-e5iklyrz5b] {
            font-size: 0.85rem;
        }

        .badge-count[b-e5iklyrz5b] {
            font-size: 0.7rem;
            padding: 2px 6px;
        }

        .viewer-content[b-e5iklyrz5b] {
            padding: 8px;
        }

        .section-header[b-e5iklyrz5b] {
            padding: 5px 8px;
            margin-bottom: 8px;
            font-size: 0.75rem;
        }

        /* Smaller cards for small phones - better fit */
        .project-item[b-e5iklyrz5b] {
            width: 240px;
            min-width: 240px;
        }

        .project-item.with-stack-badge[b-e5iklyrz5b] {
            height: calc(240px + 18px);
        }

        .projects-scroll[b-e5iklyrz5b] {
            gap: 8px;
            padding: 6px 6px 16px 6px;
        }

        .projects-scroll[b-e5iklyrz5b]::-webkit-scrollbar {
            height: 4px;
        }

        .empty-state[b-e5iklyrz5b] {
            padding: 25px 15px;
        }

        .empty-state i[b-e5iklyrz5b] {
            font-size: 1.8rem;
        }

        .empty-state p[b-e5iklyrz5b] {
            font-size: 0.8rem;
        }

        /* More visible scroll hint on small screens */
        .projects-scroll-container[b-e5iklyrz5b]::after {
            width: 30px;
            background: rgba(26, 92, 122, 0.22);
        }
    }

    /* Extra small devices (iPhone SE, small Androids) */
    @media (max-width: 375px) {
        .project-item[b-e5iklyrz5b] {
            width: 220px;
            min-width: 220px;
        }

        .project-item.with-stack-badge[b-e5iklyrz5b] {
            height: calc(220px + 18px);
        }

        .projects-scroll[b-e5iklyrz5b] {
            gap: 6px;
        }

        .section-header[b-e5iklyrz5b] {
            font-size: 0.7rem;
            padding: 4px 6px;
        }
    }

    /* Touch-friendly improvements */
    @media (hover: none) and (pointer: coarse) {
        .project-item:hover[b-e5iklyrz5b] {
            transform: none;
        }

        .project-item:active[b-e5iklyrz5b] {
            transform: scale(0.98);
        }

        .viewer-header:hover[b-e5iklyrz5b] {
            background: rgba(255, 255, 255, 0.05);
        }

        .viewer-header:active[b-e5iklyrz5b] {
            background: rgba(255, 255, 255, 0.12);
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/PublicProjectStacks.razor.rz.scp.css */
.stacks-container[b-tmb0n7zev2] {
        padding: 20px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
    }

    /* Replace counter */
    .replace-counter[b-tmb0n7zev2] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        color: white;
        font-weight: 600;
    }

    .counter-label[b-tmb0n7zev2] {
        font-size: 0.9rem;
    }

    .counter-value[b-tmb0n7zev2] {
        font-size: 1.1rem;
        color: #28a745;
        padding: 4px 12px;
        background: rgba(40, 167, 69, 0.2);
        border-radius: 8px;
    }

    .counter-exhausted[b-tmb0n7zev2] {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #dc3545;
        font-size: 0.9rem;
    }

    /* 4 Slots Grid */
    .stacks-grid[b-tmb0n7zev2] {
        display: grid;
        grid-template-columns: repeat(5, minmax(160px, 1fr));
        gap: 12px;
        margin-top: 20px;
        align-items: stretch;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    .stack-wrapper[b-tmb0n7zev2] {
        position: relative;
        padding-bottom: 35px;
    }

    /* Deck indicator (cards underneath) */
    .deck-indicator[b-tmb0n7zev2] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 15px;
        z-index: 0;
    }

    .deck-layers[b-tmb0n7zev2] {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .deck-layer[b-tmb0n7zev2] {
        position: absolute;
        height: 100%;
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 0 0 12px 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .deck-count-badge[b-tmb0n7zev2] {
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(26, 92, 122, 0.9);
        color: white;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 700;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(26, 92, 122, 0.4);
    }

    .deck-count-badge i[b-tmb0n7zev2] {
        font-size: 0.8rem;
    }

    /* Stack card */
    .stack-card-wrapper[b-tmb0n7zev2] {
        position: relative;
        z-index: 5;
        transition: all 0.3s ease;
    }

    .stack-card[b-tmb0n7zev2] {
        position: relative;
        background: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        padding: 6px;
        transition: all 0.3s ease;
        overflow: visible;
    }

    .stack-card.clickable[b-tmb0n7zev2] {
        cursor: pointer;
    }

    .stack-card.clickable:hover[b-tmb0n7zev2] {
        transform: translateY(-2px);
        border-color: rgba(40, 167, 69, 0.5);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    /* Selected card */
    .stack-card-wrapper.card-selected .stack-card[b-tmb0n7zev2] {
        border: 3px solid #28a745;
        background: rgba(40, 167, 69, 0.15);
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5);
    }

    /* Selection indicator */
    .selection-indicator[b-tmb0n7zev2] {
        position: absolute;
        top: 3px;
        right: 3px;
        z-index: 30;
        background: #28a745;
        color: white;
        padding: 3px 6px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 0.6rem;
        display: flex;
        align-items: center;
        gap: 3px;
        box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
    }
    
    .selection-indicator i[b-tmb0n7zev2] {
        font-size: 0.7rem;
    }

    /* Card actions (replace button) */
    .card-actions[b-tmb0n7zev2] {
        position: absolute;
        bottom: 3px;
        left: 8px;
        right: 8px;
        z-index: 20;
        display: flex;
        justify-content: center;
    }

    .btn-replace[b-tmb0n7zev2] {
        background: #ffc107;
        border: none;
        color: white;
        padding: 4px 10px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.65rem;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
        cursor: pointer;
    }

    .btn-replace:hover[b-tmb0n7zev2] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        background: #ff9800;
    }

    /* Empty stack */
    .empty-stack[b-tmb0n7zev2] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 350px;
        background: rgba(255, 255, 255, 0.05);
        border: 2px dashed rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.4);
    }

    .empty-stack i[b-tmb0n7zev2] {
        font-size: 2.5rem;
        opacity: 0.5;
    }

    .empty-stack p[b-tmb0n7zev2] {
        margin: 0;
        font-size: 0.85rem;
        font-weight: 500;
    }

    /* Responsive design */
    @media (max-width: 1200px) {
        .stacks-grid[b-tmb0n7zev2] {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .stacks-grid[b-tmb0n7zev2] {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    /* Marker for user's own proposed projects */
    .stack-card-wrapper.my-project[b-tmb0n7zev2]::before {
        content: '★';
        position: absolute;
        top: 8px;
        left: 8px;
        background: #f4c737;
        color: white;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }
    .stack-card-wrapper.my-project .stack-card[b-tmb0n7zev2] {
        background: rgba(244, 199, 55, 0.06);
        border: 2px solid rgba(244, 199, 55, 0.22);
        border-radius: 12px;
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/PublicProjectStacksRW.razor.rz.scp.css */
/* ================================
       PUBLIC PROJECT STACKS RW
       Responsive design inspired by GameParticipantsRW
       ================================ */

    /*.stacks-rw {*/
    /*    width: 100%;*/
    /*    background: rgba(26, 92, 122, 0.12);*/
    /*    border-radius: 12px;*/
    /*    padding: 16px;*/
    /*    border: 1px solid rgba(255, 255, 255, 0.15);*/
    /*}*/

    /* Header */
    .stacks-header[b-37nk16k1gr] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-title[b-37nk16k1gr] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: white;
        font-size: 1rem;
        font-weight: 600;
    }

    .header-title i[b-37nk16k1gr] {
        font-size: 1.1rem;
        opacity: 0.9;
    }

    .replace-counter[b-37nk16k1gr] {
        display: flex;
        align-items: center;
    }

    .counter-badge[b-37nk16k1gr] {
        display: flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    /*.counter-badge.available {*/
    /*    background: rgba(40, 167, 69, 0.2);*/
    /*    color: #28a745;*/
    /*    border: 1px solid rgba(40, 167, 69, 0.3);*/
    /*}*/

    .counter-badge.exhausted[b-37nk16k1gr] {
        background: rgba(220, 53, 69, 0.15);
        color: #dc3545;
        border: 1px solid rgba(220, 53, 69, 0.25);
    }

    /* Stacks Grid - Horizontal Scroll */
    .stacks-grid[b-37nk16k1gr] {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 4px 12px 4px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }

    .stacks-grid[b-37nk16k1gr]::-webkit-scrollbar {
        height: 8px;
    }

    .stacks-grid[b-37nk16k1gr]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
        margin: 0 8px;
    }

    .stacks-grid[b-37nk16k1gr]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.4);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .stacks-grid[b-37nk16k1gr]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.6);
    }

    /* Stack Slot */
    .stack-slot[b-37nk16k1gr] {
        position: relative;
        min-height: 350px;
        flex: 0 0 280px;
        min-width: 280px;
    }

    .stack-number[b-37nk16k1gr] {
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%);
        background: #0c3a58;
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 700;
        z-index: 10;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    /* Stack Card Container */
    .stack-card-container[b-37nk16k1gr] {
        position: relative;
        padding-top: 12px;
        padding-bottom: 8px;
        transition: transform 0.2s ease;
    }

    .stack-card-container[b-37nk16k1gr]  .project-card {
        aspect-ratio: 1 / 1;
    }

    .stack-card-container[b-37nk16k1gr]  .idea-card {
        height: 100%;
    }

    .stack-card-container.clickable[b-37nk16k1gr] {
        cursor: pointer;
    }

    .stack-card-container.clickable:hover[b-37nk16k1gr] {
        transform: translateY(-2px);
    }

    .stack-card-container.my-project[b-37nk16k1gr] {
        border-radius: 12px;
        background: rgba(244, 199, 55, 0.08);
        border: 2px solid rgba(244, 199, 55, 0.25);
    }

    /* Replace in flight: block interaction until the server confirms the real new top card */
    .stack-card-container.pending-replace[b-37nk16k1gr] {
        cursor: default;
        pointer-events: none;
    }

    .stack-card-container.pending-replace[b-37nk16k1gr]  .project-card {
        opacity: 0.5;
    }

    .pending-replace-overlay[b-37nk16k1gr] {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 25;
        color: white;
    }

    /* Deck Indicator */
    .deck-indicator[b-37nk16k1gr] {
        position: absolute;
        bottom: 0;
        left: 5px;
        right: 5px;
        height: 15px;
    }

    .deck-layer[b-37nk16k1gr] {
        position: absolute;
        bottom: calc(-1 * var(--offset));
        left: var(--offset);
        right: calc(-1 * var(--offset));
        height: 8px;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0 0 8px 8px;
    }

    .deck-count[b-37nk16k1gr] {
        position: absolute;
        bottom: -28px;
        left: 50%;
        transform: translateX(-50%);
        background: #1a5c7a;
        color: white;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 4px;
        z-index: 5;
        box-shadow: 0 2px 6px rgba(26, 92, 122, 0.3);
    }

    /* My Project Badge */
    .my-project-badge[b-37nk16k1gr] {
        position: absolute;
        top: 16px;
        left: 4px;
        background: #f4c737;
        color: white;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        z-index: 15;
        box-shadow: 0 2px 8px rgba(244, 199, 55, 0.4);
    }

    /* Replace Button - spans the full width of the card and sits flush
       against its bottom edge, like an attached footer bar. */
    .replace-btn[b-37nk16k1gr] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        background: #ffc107;
        border: none;
        border-radius: 0 0 3px 3px;
        color: white;
        padding: 5px 12px;
        font-size: 0.7rem;
        font-weight: 600;
        cursor: pointer;
        z-index: 20;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
        transition: all 0.2s ease;
    }

    .replace-btn:hover[b-37nk16k1gr] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    /* Empty Slot */
    .empty-slot[b-37nk16k1gr] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 180px;
        background: rgba(255, 255, 255, 0.05);
        border: 2px dashed rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.4);
        gap: 8px;
        margin-top: 12px;
    }

    .empty-slot i[b-37nk16k1gr] {
        font-size: 2rem;
        opacity: 0.5;
    }

    .empty-slot span[b-37nk16k1gr] {
        font-size: 0.8rem;
        font-weight: 500;
    }

    /* ================================
       MOBILE RESPONSIVE
       ================================ */

    @media (max-width: 768px) {
        .stacks-rw[b-37nk16k1gr] {
            padding: 10px;
        }

        .stacks-header[b-37nk16k1gr] {
            margin-bottom: 12px;
            gap: 8px;
        }

        .header-title[b-37nk16k1gr] {
            font-size: 0.85rem;
        }

        .header-title i[b-37nk16k1gr] {
            font-size: 1rem;
        }

        .counter-badge[b-37nk16k1gr] {
            font-size: 0.7rem;
            padding: 4px 8px;
        }

        .stacks-grid[b-37nk16k1gr] {
            gap: 10px;
        }

        .stack-slot[b-37nk16k1gr] {
            min-height: 320px;
            flex: 0 0 260px;
            min-width: 260px;
        }

        .stack-number[b-37nk16k1gr] {
            width: 20px;
            height: 20px;
            font-size: 0.65rem;
            top: -6px;
        }

        .stack-card-container[b-37nk16k1gr] {
            padding-top: 10px;
            padding-bottom: 16px;
        }

        .my-project-badge[b-37nk16k1gr] {
            width: 24px;
            height: 24px;
            font-size: 0.75rem;
            top: 14px;
        }

        .replace-btn[b-37nk16k1gr] {
            font-size: 0.65rem;
            padding: 4px 8px;
        }

        .deck-count[b-37nk16k1gr] {
            font-size: 0.65rem;
            padding: 2px 6px;
        }

        .empty-slot[b-37nk16k1gr] {
            min-height: 150px;
        }
    }

    @media (max-width: 480px) {
        .stacks-rw[b-37nk16k1gr] {
            padding: 8px;
            border-radius: 12px;
        }

        .stacks-header[b-37nk16k1gr] {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 10px;
        }

        .header-title[b-37nk16k1gr] {
            font-size: 0.8rem;
        }

        .header-title i[b-37nk16k1gr] {
            font-size: 0.9rem;
        }

        .counter-badge[b-37nk16k1gr] {
            font-size: 0.65rem;
            padding: 3px 6px;
        }

        .stacks-grid[b-37nk16k1gr] {
            gap: 8px;
        }

        .stack-slot[b-37nk16k1gr] {
            min-height: 300px;
            flex: 0 0 240px;
            min-width: 240px;
        }

        .stack-number[b-37nk16k1gr] {
            width: 18px;
            height: 18px;
            font-size: 0.6rem;
            top: -5px;
        }

        .stack-card-container[b-37nk16k1gr] {
            padding-top: 8px;
            padding-bottom: 14px;
        }

        .my-project-badge[b-37nk16k1gr] {
            width: 22px;
            height: 22px;
            font-size: 0.7rem;
            top: 12px;
            left: 2px;
        }

        .replace-btn[b-37nk16k1gr] {
            font-size: 0.6rem;
            padding: 3px 6px;
        }

        .deck-count[b-37nk16k1gr] {
            font-size: 0.55rem;
            padding: 2px 6px;
            bottom: -24px;
        }

        .deck-count i[b-37nk16k1gr] {
            font-size: 0.6rem;
        }

        .empty-slot[b-37nk16k1gr] {
            min-height: 130px;
        }

        .empty-slot i[b-37nk16k1gr] {
            font-size: 1.5rem;
        }

        .empty-slot span[b-37nk16k1gr] {
            font-size: 0.7rem;
        }
    }

    /* Extra small devices */
    @media (max-width: 360px) {
        .stacks-grid[b-37nk16k1gr] {
            gap: 10px;
        }

        .stack-slot[b-37nk16k1gr] {
            min-height: 160px;
            flex: 0 0 220px;
            min-width: 220px;
        }

        .header-title[b-37nk16k1gr] {
            font-size: 0.75rem;
        }
    }

    /* Landscape mode optimization */
    @media (max-height: 500px) and (orientation: landscape) {
        .stacks-rw[b-37nk16k1gr] {
            padding: 8px;
        }

        .stacks-header[b-37nk16k1gr] {
            margin-bottom: 8px;
        }

        .stacks-grid[b-37nk16k1gr] {
            gap: 8px;
        }

        .stack-slot[b-37nk16k1gr] {
            min-height: 120px;
            flex: 0 0 180px;
            min-width: 180px;
        }

        .stack-card-container[b-37nk16k1gr] {
            padding-top: 6px;
            padding-bottom: 12px;
        }
    }

    /* Touch-friendly improvements */
    @media (hover: none) and (pointer: coarse) {
        .stack-card-container.clickable:hover[b-37nk16k1gr] {
            transform: none;
        }

        .stack-card-container.clickable:active[b-37nk16k1gr] {
            transform: scale(0.98);
        }

        .replace-btn:hover[b-37nk16k1gr] {
            transform: none;
        }

        .replace-btn:active[b-37nk16k1gr] {
            transform: scale(0.95);
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/QuizComponent.razor.rz.scp.css */
.quiz-overlay[b-ad2yrgrs7m] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn-b-ad2yrgrs7m 0.3s ease;
    }

    .quiz-modal[b-ad2yrgrs7m] {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        max-width: 700px;
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
        animation: slideUp-b-ad2yrgrs7m 0.3s ease;
    }

    @keyframes fadeIn-b-ad2yrgrs7m {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp-b-ad2yrgrs7m {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .quiz-header[b-ad2yrgrs7m] {
        background: #0c3a57;
        color: white;
        padding: 25px 30px;
        border-radius: 12px 20px 0 0;
    }

    .quiz-body[b-ad2yrgrs7m] {
        padding: 30px;
    }

    .question-card[b-ad2yrgrs7m] {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        border: 2px solid transparent;
        transition: all 0.3s ease;
    }

    .question-card:hover[b-ad2yrgrs7m] {
        border-color: var(--brand-cyan-dark, #1a5c7a);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .choice-option[b-ad2yrgrs7m] {
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 12px 15px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .choice-option:hover[b-ad2yrgrs7m] {
        border-color: var(--brand-cyan-dark, #1a5c7a);
        background: #f0f3ff;
    }

    .choice-option.selected[b-ad2yrgrs7m] {
        border-color: var(--brand-cyan-dark, #1a5c7a);
        background: rgba(26, 92, 122, 0.08);
        font-weight: 600;
    }

    .choice-radio[b-ad2yrgrs7m] {
        width: 20px;
        height: 20px;
        border: 2px solid var(--brand-cyan-dark, #1a5c7a);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .choice-radio.selected[b-ad2yrgrs7m]::after {
        content: '';
        width: 12px;
        height: 12px;
        background: var(--brand-cyan-dark, #1a5c7a);
        border-radius: 50%;
    }

    .open-answer-textarea[b-ad2yrgrs7m] {
        width: 100%;
        min-height: 120px;
        padding: 15px;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        font-size: 1rem;
        transition: all 0.3s ease;
        resize: vertical;
    }

    .open-answer-textarea:focus[b-ad2yrgrs7m] {
        outline: none;
        border-color: var(--brand-cyan-dark, #1a5c7a);
        box-shadow: 0 0 0 3px rgba(26, 92, 122, 0.1);
    }

    .quiz-footer[b-ad2yrgrs7m] {
        padding: 20px 30px;
        background: #f8f9fa;
        border-radius: 0 0 20px 20px;
        display: flex;
        justify-content: space-between;
        gap: 15px;
    }

    .btn-quiz[b-ad2yrgrs7m] {
        padding: 12px 30px;
        border-radius: 10px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .btn-quiz-primary[b-ad2yrgrs7m] {
        background: #0f4556;
        color: white;
    }

    .btn-quiz-primary:hover:not(:disabled)[b-ad2yrgrs7m] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

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

    .btn-quiz-secondary[b-ad2yrgrs7m] {
        background: white;
        color: #666;
        border: 2px solid #e0e0e0;
    }

    .btn-quiz-secondary:hover[b-ad2yrgrs7m] {
        background: #f8f9fa;
        border-color: var(--brand-cyan-dark, #1a5c7a);
        color: var(--brand-cyan-dark, #1a5c7a);
    }

    .progress-indicator[b-ad2yrgrs7m] {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
    }

    .progress-dot[b-ad2yrgrs7m] {
        flex: 1;
        height: 4px;
        background: #e0e0e0;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .progress-dot.completed[b-ad2yrgrs7m] {
        background: var(--brand-cyan-dark, #1a5c7a);
    }

    .mode-info-badge[b-ad2yrgrs7m] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.2);
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/QuizCorrecting.razor.rz.scp.css */
/* ========== RW DARK THEME FOR QUIZ CORRECTING ========== */
    .quiz-correcting-container[b-akcqgq4yp5] {
        background: #0c3a58;
        min-height: 100%;
        padding: clamp(15px, 3vh, 30px) clamp(10px, 2vw, 30px);
        border-radius: clamp(12px, 2vw, 20px);
        color: white;
    }

    /* Mode indicator alert */
    .quiz-correcting-container .alert-primary[b-akcqgq4yp5] {
        background: rgba(26, 92, 122, 0.15);
        border: 1px solid rgba(26, 92, 122, 0.4);
        color: white;
    }

    .quiz-correcting-container .alert-info[b-akcqgq4yp5] {
        background: rgba(26, 92, 122, 0.15);
        border: 1px solid rgba(26, 92, 122, 0.4);
        color: white;
    }

    .quiz-correcting-container .alert-success[b-akcqgq4yp5] {
        background: rgba(40, 167, 69, 0.15);
        border: 1px solid rgba(40, 167, 69, 0.4);
        color: white;
    }

    .quiz-correcting-container .alert-secondary[b-akcqgq4yp5] {
        background: rgba(108, 117, 125, 0.15);
        border: 1px solid rgba(108, 117, 125, 0.4);
        color: white;
    }

    .quiz-correcting-container .alert-light[b-akcqgq4yp5] {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
    }

    /* Nav tabs */
    .quiz-correcting-container .nav-tabs[b-akcqgq4yp5] {
        border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    }

    .quiz-correcting-container .nav-tabs .nav-link[b-akcqgq4yp5] {
        color: rgba(255, 255, 255, 0.7);
        border: none;
        border-bottom: 3px solid transparent;
        background: transparent;
        transition: all 0.3s ease;
    }

    .quiz-correcting-container .nav-tabs .nav-link:hover[b-akcqgq4yp5] {
        color: white;
        border-bottom-color: rgba(255, 255, 255, 0.3);
    }

    .quiz-correcting-container .nav-tabs .nav-link.active[b-akcqgq4yp5] {
        color: white;
        background: rgba(255, 255, 255, 0.1);
        font-weight: 700;
    }

    /* Cards */
    .quiz-correcting-container .card[b-akcqgq4yp5] {
        background: #ffffff;
        border: none;
        border-radius: clamp(10px, 1.5vw, 14px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        color: #1a1a1a;
    }

    .quiz-correcting-container .card .card-header.bg-primary[b-akcqgq4yp5] {
        background: #0c3a58 !important;
        border-radius: clamp(10px, 1.5vw, 14px) clamp(10px, 1.5vw, 14px) 0 0;
    }

    .quiz-correcting-container .card .card-header.bg-info[b-akcqgq4yp5] {
        background: #1a5c7a !important;
        border-radius: clamp(10px, 1.5vw, 14px) clamp(10px, 1.5vw, 14px) 0 0;
    }

    .quiz-correcting-container .card .card-footer[b-akcqgq4yp5] {
        background: rgba(248, 249, 250, 0.5);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .quiz-correcting-container .card .card-body .form-label[b-akcqgq4yp5] {
        color: #555;
    }

    /* .alert-light is white-on-transparent for the dark page background, but this one
       (the player's open-answer box) sits inside a white .card — needs dark text instead. */
    .quiz-correcting-container .card .alert-light[b-akcqgq4yp5] {
        background: #f8f9fa;
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: #1a1a1a;
    }

    /* Sort toggle buttons */
    .quiz-correcting-container .sort-toggle-group[b-akcqgq4yp5] {
        display: inline-flex;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.25);
    }

    .quiz-correcting-container .sort-toggle-btn[b-akcqgq4yp5] {
        padding: 6px 16px;
        cursor: pointer;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.85rem;
        font-weight: 500;
        transition: all 0.25s ease;
    }

    .quiz-correcting-container .sort-toggle-btn:hover[b-akcqgq4yp5] {
        background: rgba(255, 255, 255, 0.15);
        color: white;
    }

    .quiz-correcting-container .sort-toggle-btn.active[b-akcqgq4yp5] {
        background: rgba(255, 255, 255, 0.22);
        color: white;
        font-weight: 700;
    }

    .quiz-correcting-container .sort-toggle-btn + .sort-toggle-btn[b-akcqgq4yp5] {
        border-left: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Player group header */
    .quiz-correcting-container .player-group-header[b-akcqgq4yp5] {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: clamp(8px, 1vw, 12px);
    }

    /* Buttons */
    .quiz-correcting-container .btn-success[b-akcqgq4yp5] {
        background: #28a745;
        border: none;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        transition: all 0.3s ease;
    }

    .quiz-correcting-container .btn-success:hover:not(:disabled)[b-akcqgq4yp5] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .quiz-correcting-container .btn-danger[b-akcqgq4yp5] {
        background: #dc3545;
        border: none;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        transition: all 0.3s ease;
    }

    .quiz-correcting-container .btn-danger:hover:not(:disabled)[b-akcqgq4yp5] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    /* Empty state text (outside cards) */
    .quiz-correcting-container > .text-muted[b-akcqgq4yp5],
    .quiz-correcting-container .text-center .text-muted[b-akcqgq4yp5] {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Inside cards - keep dark text on light card background */
    .quiz-correcting-container .card .text-muted[b-akcqgq4yp5] {
        color: #6c757d !important;
    }

    .quiz-correcting-container .text-success[b-akcqgq4yp5] {
        color: #28a745 !important;
    }

    /* Badge overrides */
    .quiz-correcting-container .badge.bg-warning[b-akcqgq4yp5] {
        background: #ffc107 !important;
    }

    .quiz-correcting-container .badge.bg-danger[b-akcqgq4yp5] {
        background: #dc3545 !important;
    }

    .quiz-correcting-container .badge.bg-secondary[b-akcqgq4yp5] {
        background: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
    }

    /* Voting complete */
    .quiz-correcting-container .voting-complete-rw[b-akcqgq4yp5] {
        background: rgba(40, 167, 69, 0.1);
        border: 2px solid rgba(40, 167, 69, 0.4);
        border-radius: clamp(12px, 2vw, 20px);
        padding: clamp(20px, 4vh, 40px);
        text-align: center;
        color: white;
    }

    /* Textarea in dark cards */
    .quiz-correcting-container .form-control[b-akcqgq4yp5] {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.15);
    }

    /* Border-info override for mentor cards */
    .quiz-correcting-container .card.border-info[b-akcqgq4yp5] {
        border: none !important;
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/SupportResults.razor.rz.scp.css */
.support-results[b-hu9i616m5p] {
        padding: 0;
    }

    /* Summary Statistics */
    .results-summary[b-hu9i616m5p] {
        margin-bottom: 30px;
    }

    .stat-card[b-hu9i616m5p] {
        background: #ffffff;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        transition: transform 0.3s ease;
        border: 2px solid transparent;
    }

    .stat-card:hover[b-hu9i616m5p] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .stat-icon[b-hu9i616m5p] {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .stat-number[b-hu9i616m5p] {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 8px;
    }

    .stat-label[b-hu9i616m5p] {
        font-size: 0.9rem;
        font-weight: 500;
        opacity: 0.8;
    }

    .stat-success[b-hu9i616m5p] {
        border-color: #28a745;
    }

    .stat-success .stat-icon[b-hu9i616m5p],
    .stat-success .stat-number[b-hu9i616m5p] {
        color: #28a745;
    }

    .stat-danger[b-hu9i616m5p] {
        border-color: #dc3545;
    }

    .stat-danger .stat-icon[b-hu9i616m5p],
    .stat-danger .stat-number[b-hu9i616m5p] {
        color: #dc3545;
    }

    .stat-primary[b-hu9i616m5p] {
        border-color: #1a5c7a;
    }

    .stat-primary .stat-icon[b-hu9i616m5p],
    .stat-primary .stat-number[b-hu9i616m5p] {
        color: #1a5c7a;
    }

    .stat-info[b-hu9i616m5p] {
        border-color: #1a5c7a;
    }

    .stat-info .stat-icon[b-hu9i616m5p],
    .stat-info .stat-number[b-hu9i616m5p] {
        color: #1a5c7a;
    }

    /* Projects Section */
    .projects-section[b-hu9i616m5p] {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 15px;
        border: 1px solid #dee2e6;
    }

    .section-header[b-hu9i616m5p] {
        color: #2c3e50;
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .success-header[b-hu9i616m5p] {
        color: #28a745;
    }

    .danger-header[b-hu9i616m5p] {
        color: #dc3545;
    }

    .section-subtitle[b-hu9i616m5p] {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    /* Projects Grid */
    .projects-grid[b-hu9i616m5p] {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr;
    }

    /* Project Result Card */
    .project-result-card[b-hu9i616m5p] {
        position: relative;
        background: white;
        border-radius: 12px;
        overflow: visible;
        border: 1px solid #dee2e6;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .project-result-card:hover[b-hu9i616m5p] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    @media (prefers-reduced-motion: reduce) {
        .project-result-card:hover[b-hu9i616m5p] {
            transform: none;
        }
    }

    .project-result-card.eliminated[b-hu9i616m5p] {
        opacity: 0.85;
    }

    /* Support Visualization */
    .support-visualization[b-hu9i616m5p] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        background: transparent;
        align-items: center;
        justify-content: center;
        flex: 1;
        max-width: 60%;
    }

    .support-icon[b-hu9i616m5p] {
        width: 45px;
        height: 45px;
        transition: transform 0.2s ease;
        background: white;
        border-radius: 50%;
        padding: 2px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .support-icon:hover[b-hu9i616m5p] {
        transform: scale(1.15);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    }

    .support-icon img[b-hu9i616m5p] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    /* Status Badge */
    .status-badge[b-hu9i616m5p] {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 15;
        padding: 8px 16px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .status-success[b-hu9i616m5p] {
        background: #28a745;
        color: white;
    }

    .status-danger[b-hu9i616m5p] {
        background: #dc3545;
        color: white;
    }

    /* Warning Badge */
    .warning-badge[b-hu9i616m5p] {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 15;
        padding: 8px 12px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.95);
        color: #856404;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        font-size: 1.2rem;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Proposer Info */
    .proposer-info[b-hu9i616m5p] {
        background: #0c3a58;
        color: white;
        padding: 12px 16px;
        border-radius: 0 0 12px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-weight: 600;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        flex-wrap: wrap;
    }

    .proposer-info.eliminated-info[b-hu9i616m5p] {
        background: #6c757d;
    }

    .proposer-name[b-hu9i616m5p] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
        min-width: 120px;
        flex-shrink: 0;
    }

    .proposer-name i[b-hu9i616m5p] {
        font-size: 1.1rem;
    }

    .proposer-support[b-hu9i616m5p] {
        display: flex;
        align-items: baseline;
        gap: 4px;
        font-size: 1.1rem;
        font-weight: 700;
        min-width: 80px;
        flex-shrink: 0;
        justify-content: flex-end;
    }

    .support-number[b-hu9i616m5p] {
        font-size: 1.3rem;
    }

    .support-divider[b-hu9i616m5p] {
        opacity: 0.7;
        font-size: 1rem;
    }

    .support-required[b-hu9i616m5p] {
        font-size: 1rem;
        opacity: 0.9;
    }

    /* Empty States */
    .empty-state[b-hu9i616m5p] {
        text-align: center;
        padding: 60px 20px;
        color: rgba(255, 255, 255, 0.6);
    }

    .empty-state i[b-hu9i616m5p] {
        font-size: 4rem;
        margin-bottom: 20px;
        opacity: 0.5;
    }

    .empty-state p[b-hu9i616m5p] {
        font-size: 1.1rem;
        margin: 0;
    }

    .empty-state-main[b-hu9i616m5p] {
        text-align: center;
        padding: 80px 20px;
        color: white;
    }

    .empty-state-main i[b-hu9i616m5p] {
        color: rgba(255, 255, 255, 0.5);
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .support-results[b-hu9i616m5p] {
            padding: 15px;
        }

        .results-summary[b-hu9i616m5p] {
            margin-bottom: 20px;
        }

        .stat-card[b-hu9i616m5p] {
            padding: 15px 10px;
        }

        .stat-icon[b-hu9i616m5p] {
            font-size: 1.5rem;
        }

        .stat-number[b-hu9i616m5p] {
            font-size: 2rem;
        }

        .stat-label[b-hu9i616m5p] {
            font-size: 0.8rem;
        }

        .projects-section[b-hu9i616m5p] {
            padding: 15px;
        }

        .section-header[b-hu9i616m5p] {
            font-size: 1.3rem;
            flex-wrap: wrap;
        }

        .status-badge[b-hu9i616m5p] {
            font-size: 0.75rem;
            padding: 6px 12px;
        }

        .warning-badge[b-hu9i616m5p] {
            width: 35px;
            height: 35px;
            font-size: 1rem;
        }

        .proposer-info[b-hu9i616m5p] {
            font-size: 0.85rem;
            padding: 10px 12px;
            gap: 8px;
        }

        .proposer-name[b-hu9i616m5p] {
            font-size: 0.8rem;
            min-width: 100px;
        }

        .proposer-support[b-hu9i616m5p] {
            font-size: 0.95rem;
            min-width: 70px;
        }

        .support-number[b-hu9i616m5p] {
            font-size: 1.1rem;
        }

        .projects-grid[b-hu9i616m5p] {
            gap: 15px;
        }

        .support-visualization[b-hu9i616m5p] {
            gap: 6px;
            max-width: 50%;
        }

        .support-icon[b-hu9i616m5p] {
            width: 38px;
            height: 38px;
        }
    }

    @media (max-width: 480px) {
        .stat-card[b-hu9i616m5p] {
            padding: 12px 8px;
        }

        .stat-number[b-hu9i616m5p] {
            font-size: 1.8rem;
        }

        .stat-label[b-hu9i616m5p] {
            font-size: 0.75rem;
        }

        .section-header[b-hu9i616m5p] {
            font-size: 1.1rem;
        }

        .status-badge[b-hu9i616m5p] {
            font-size: 0.7rem;
            padding: 5px 10px;
            top: 8px;
            left: 8px;
        }

        .warning-badge[b-hu9i616m5p] {
            top: 8px;
            right: 8px;
            width: 30px;
            height: 30px;
            font-size: 0.9rem;
        }

        .proposer-info[b-hu9i616m5p] {
            padding: 10px 12px;
            font-size: 0.8rem;
            gap: 6px;
        }

        .proposer-name[b-hu9i616m5p] {
            font-size: 0.75rem;
            min-width: 80px;
        }

        .proposer-name i[b-hu9i616m5p] {
            font-size: 0.95rem;
        }

        .proposer-support[b-hu9i616m5p] {
            font-size: 0.85rem;
            min-width: 60px;
        }

        .support-number[b-hu9i616m5p] {
            font-size: 1rem;
        }

        .support-visualization[b-hu9i616m5p] {
            gap: 4px;
            max-width: 45%;
        }

        .support-icon[b-hu9i616m5p] {
            width: 32px;
            height: 32px;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/GamePages/SupportResultsRW.razor.rz.scp.css */
/* ================================
       SUPPORT RESULTS RW
       Responsive design inspired by GameParticipantsRW
       ================================ */

    .support-results-rw[b-nicmu1h61f] {
        width: 100%;
    }

    /* Loading State */
    .loading-state[b-nicmu1h61f] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        color: white;
        gap: 16px;
    }

    /* Empty State */
    .empty-state[b-nicmu1h61f] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 20px;
        color: white;
        text-align: center;
    }

    .empty-state i[b-nicmu1h61f] {
        font-size: 4rem;
        opacity: 0.5;
        margin-bottom: 16px;
    }

    .empty-state h5[b-nicmu1h61f] {
        margin-bottom: 8px;
    }

    .empty-state p[b-nicmu1h61f] {
        opacity: 0.7;
    }

    /* Results Summary */
    .results-summary-rw[b-nicmu1h61f] {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }

    .summary-item[b-nicmu1h61f] {
        flex: 1;
        min-width: 140px;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        border-radius: 12px;
    }

    .summary-item.success[b-nicmu1h61f] {
        background: rgba(40, 167, 69, 0.15);
        border: 1px solid rgba(40, 167, 69, 0.3);
    }

    .summary-item.failed[b-nicmu1h61f] {
        background: rgba(220, 53, 69, 0.15);
        border: 1px solid rgba(220, 53, 69, 0.3);
    }

    .summary-item i[b-nicmu1h61f] {
        font-size: 1.8rem;
    }

    .summary-item.success i[b-nicmu1h61f] { color: #28a745; }
    .summary-item.failed i[b-nicmu1h61f] { color: #dc3545; }

    .summary-content[b-nicmu1h61f] {
        display: flex;
        flex-direction: column;
    }

    .summary-item .count[b-nicmu1h61f] {
        font-size: 2rem;
        font-weight: 700;
        color: white;
        line-height: 1;
    }

    .summary-item .label[b-nicmu1h61f] {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 4px;
    }

    /* Results Rows */
    .results-section[b-nicmu1h61f] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .result-row-section[b-nicmu1h61f] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .row-header[b-nicmu1h61f] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: white;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .row-header.success[b-nicmu1h61f] {
        color: #5ed17b;
    }

    .row-header.failed[b-nicmu1h61f] {
        color: #ff7b8a;
    }

    .projects-list[b-nicmu1h61f] {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: stretch;
    }

    /* Result Card */
.result-card[b-nicmu1h61f] {
    display: flex;
    flex: 1 1 230px;
    flex-direction: column;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: transform 0.2s ease;
}

    .result-card:hover[b-nicmu1h61f] {
        transform: translateY(-2px);
    }

    .result-card.success[b-nicmu1h61f] {
        border-left-color: rgba(40, 167, 69, 0.8);
    }

    .result-card.failed[b-nicmu1h61f] {
        border-left-color: rgba(220, 53, 69, 0.75);
    }

    /* Card Wrapper */
    .card-wrapper[b-nicmu1h61f] {
        min-width: 0;
        padding: 0;
    }

    .card-wrapper.faded[b-nicmu1h61f] {
        opacity: 0.8;
    }

    /* Result Footer */
    .result-footer[b-nicmu1h61f] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center;
        gap: 8px;
        min-width: 0;
        margin-top: 8px;
        padding: 0;
        background: transparent;
    }

    .result-card.failed .result-footer[b-nicmu1h61f] {
        background: transparent;
    }

    .proposer-info[b-nicmu1h61f] {
        display: flex;
        align-items: center;
        gap: 8px;
        color: white;
        font-size: 0.85rem;
        font-weight: 500;
        min-width: 0;
    }

    .proposer-info span[b-nicmu1h61f] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .proposer-info i[b-nicmu1h61f] {
        font-size: 1rem;
        opacity: 0.9;
    }

    /* Votes Row */
    .votes-row[b-nicmu1h61f] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
        grid-column: 1 / -1;
        max-width: none;
        min-width: 0;
    }

    .vote-icon[b-nicmu1h61f] {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 3px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s ease;
        color: #0c3a58;
        font-size: 0.75rem;
        font-weight: 800;
    }

    .vote-icon:hover[b-nicmu1h61f] {
        transform: scale(1.15);
    }

    .vote-icon img[b-nicmu1h61f] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Support Score */
    .support-score[b-nicmu1h61f] {
        display: flex;
        align-items: baseline;
        gap: 3px;
        color: white;
        font-weight: 700;
        min-width: 70px;
        justify-content: flex-end;
    }

    .support-score .current[b-nicmu1h61f] {
        font-size: 1.2rem;
    }

    .support-score .divider[b-nicmu1h61f] {
        opacity: 0.6;
        font-size: 0.9rem;
    }

    .support-score .required[b-nicmu1h61f] {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    /* Empty Column */
    .empty-column[b-nicmu1h61f] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
        border: 1px dashed rgba(255, 255, 255, 0.15);
    }

    .empty-column i[b-nicmu1h61f] {
        font-size: 2.5rem;
        margin-bottom: 12px;
        opacity: 0.5;
    }

    .empty-column p[b-nicmu1h61f] {
        margin: 0;
        font-size: 0.9rem;
    }

    /* ================================
       MOBILE RESPONSIVE
       ================================ */

    @media (max-width: 768px) {
        .results-summary-rw[b-nicmu1h61f] {
            gap: 10px;
        }

        .summary-item[b-nicmu1h61f] {
            padding: 12px 14px;
            gap: 10px;
            min-width: 130px;
        }

        .summary-item i[b-nicmu1h61f] {
            font-size: 1.4rem;
        }

        .summary-item .count[b-nicmu1h61f] {
            font-size: 1.5rem;
        }

        .summary-item .label[b-nicmu1h61f] {
            font-size: 0.7rem;
        }

        .projects-list[b-nicmu1h61f] {
            gap: 10px;
        }

        .result-card[b-nicmu1h61f] {
            border-radius: 12px;
        }

        .card-wrapper[b-nicmu1h61f] {
            padding: 0;
        }

        .result-footer[b-nicmu1h61f] {
            padding: 0;
            gap: 8px;
        }

        .proposer-info[b-nicmu1h61f] {
            font-size: 0.75rem;
            min-width: 85px;
        }

        .proposer-info i[b-nicmu1h61f] {
            font-size: 0.9rem;
        }

        .votes-row[b-nicmu1h61f] {
            gap: 4px;
            max-width: none;
        }

        .vote-icon[b-nicmu1h61f] {
            width: 30px;
            height: 30px;
        }

        .support-score[b-nicmu1h61f] {
            min-width: 55px;
        }

        .support-score .current[b-nicmu1h61f] {
            font-size: 1rem;
        }

        .support-score .divider[b-nicmu1h61f],
        .support-score .required[b-nicmu1h61f] {
            font-size: 0.85rem;
        }

        .empty-column[b-nicmu1h61f] {
            padding: 35px 18px;
        }

        .empty-column i[b-nicmu1h61f] {
            font-size: 2.2rem;
        }
    }

    @media (max-width: 480px) {
        .results-summary-rw[b-nicmu1h61f] {
            flex-direction: column;
            gap: 8px;
        }

        .summary-item[b-nicmu1h61f] {
            min-width: 100%;
            padding: 10px 12px;
        }

        .summary-item i[b-nicmu1h61f] {
            font-size: 1.2rem;
        }

        .summary-item .count[b-nicmu1h61f] {
            font-size: 1.3rem;
        }

        .summary-item .label[b-nicmu1h61f] {
            font-size: 0.65rem;
        }

        /* Single column on mobile to fit attributes */
        .projects-list[b-nicmu1h61f] {
            gap: 10px;
        }

        .result-card[b-nicmu1h61f] {
            border-radius: 10px;
            flex-basis: 100%;
            max-width: 100%;
        }

        .card-wrapper[b-nicmu1h61f] {
            padding: 0;
        }

        .result-footer[b-nicmu1h61f] {
            grid-template-columns: 1fr;
            gap: 4px;
            padding: 0;
        }

        .proposer-info[b-nicmu1h61f] {
            min-width: auto;
            font-size: 0.65rem;
        }

        .votes-row[b-nicmu1h61f] {
            max-width: 100%;
            justify-content: flex-start;
            gap: 3px;
        }

        .vote-icon[b-nicmu1h61f] {
            width: 24px;
            height: 24px;
        }

        .support-score[b-nicmu1h61f] {
            justify-content: flex-start;
            min-width: auto;
        }

        .support-score .current[b-nicmu1h61f] {
            font-size: 0.9rem;
        }

        .support-score .divider[b-nicmu1h61f] {
            font-size: 0.75rem;
        }

        .support-score .required[b-nicmu1h61f] {
            font-size: 0.75rem;
        }

        .empty-column[b-nicmu1h61f] {
            padding: 25px 12px;
        }

        .empty-column i[b-nicmu1h61f] {
            font-size: 1.8rem;
        }

        .empty-column p[b-nicmu1h61f] {
            font-size: 0.8rem;
        }
    }

    /* Extra small devices */
    @media (max-width: 375px) {
        .summary-item[b-nicmu1h61f] {
            padding: 8px 10px;
        }

        .summary-item .count[b-nicmu1h61f] {
            font-size: 1.2rem;
        }

        /* Keep single column on very small screens */
        .projects-list[b-nicmu1h61f] {
            gap: 8px;
        }

        .vote-icon[b-nicmu1h61f] {
            width: 22px;
            height: 22px;
        }

        .votes-row[b-nicmu1h61f] {
            gap: 2px;
        }

        .result-footer[b-nicmu1h61f] {
            padding: 0;
        }
    }

    /* Landscape mode */
    @media (max-height: 500px) and (orientation: landscape) {
        .results-summary-rw[b-nicmu1h61f] {
            flex-direction: row;
        }

        .summary-item[b-nicmu1h61f] {
            min-width: 140px;
            padding: 8px 10px;
        }

        .empty-state[b-nicmu1h61f] {
            padding: 20px 15px;
        }

        .empty-state i[b-nicmu1h61f] {
            font-size: 2.5rem;
        }

        .result-footer[b-nicmu1h61f] {
            grid-template-columns: minmax(0, 1fr) max-content;
        }
    }

    @media (max-width: 900px) {
        .card-wrapper[b-nicmu1h61f] {
            padding: 0;
        }

        .result-footer[b-nicmu1h61f] {
            grid-template-columns: minmax(0, 1fr) max-content;
            padding: 0;
        }

        .votes-row[b-nicmu1h61f] {
            max-width: none;
        }
    }

    @media (max-width: 700px) {
        .result-footer[b-nicmu1h61f] {
            grid-template-columns: minmax(0, 1fr) max-content;
        }
    }

    @media (max-width: 620px) {
        .result-footer[b-nicmu1h61f] {
            grid-template-columns: 1fr;
        }

        .proposer-info span[b-nicmu1h61f] {
            white-space: normal;
        }

        .support-score[b-nicmu1h61f] {
            justify-content: flex-start;
        }
    }

    /* Touch-friendly improvements */
    @media (hover: none) and (pointer: coarse) {
        .result-card:hover[b-nicmu1h61f] {
            transform: none;
        }

        .vote-icon:hover[b-nicmu1h61f] {
            transform: none;
        }

        .vote-icon:active[b-nicmu1h61f] {
            transform: scale(0.95);
        }
    }
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/CreateLobbyForm.razor.rz.scp.css */
.create-shell[b-p2ey2fq7i4] {
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2.5rem);
    background: var(--surface-page, #f8f9fa);
    color: var(--text-primary, #0c3a58);
}

.create-card[b-p2ey2fq7i4] {
    width: min(880px, 100%);
    margin: 0 auto;
    display: grid;
    gap: var(--sp-5, 20px);
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--border-subtle, rgba(12, 58, 88, 0.14));
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(12, 58, 88, 0.12));
}

.create-card--centered[b-p2ey2fq7i4] {
    min-height: 360px;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.create-header[b-p2ey2fq7i4] {
    display: flex;
    align-items: center;
    gap: var(--sp-4, 16px);
}

.create-logo[b-p2ey2fq7i4] {
    width: 132px;
    max-width: 36vw;
    height: auto;
}

.create-eyebrow[b-p2ey2fq7i4] {
    margin: 0 0 0.25rem;
    color: var(--brand-cyan-700, #1a5c7a);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.create-header h1[b-p2ey2fq7i4],
.create-card--centered h1[b-p2ey2fq7i4],
.create-section h2[b-p2ey2fq7i4] {
    margin: 0;
    color: var(--text-primary, #0c3a58);
}

.create-section[b-p2ey2fq7i4] {
    display: grid;
    gap: var(--sp-3, 12px);
    padding: var(--sp-4, 16px);
    border: 1px solid var(--border-subtle, rgba(12, 58, 88, 0.14));
    border-radius: 8px;
    background: rgba(248, 243, 223, 0.54);
}

.create-grid[b-p2ey2fq7i4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3, 12px);
}

.create-field[b-p2ey2fq7i4] {
    display: grid;
    gap: 0.45rem;
    color: var(--text-primary, #0c3a58);
    font-weight: 800;
}

.create-field small[b-p2ey2fq7i4],
.create-help[b-p2ey2fq7i4],
.create-switch small[b-p2ey2fq7i4],
.create-option p[b-p2ey2fq7i4],
.create-card--centered p[b-p2ey2fq7i4] {
    color: var(--text-muted, #52606D);
}

.create-field strong[b-p2ey2fq7i4] {
    margin-left: 0.2rem;
    color: var(--feedback-error, #E63946);
}

.create-input[b-p2ey2fq7i4] {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-strong, rgba(12, 58, 88, 0.2));
    border-radius: 8px;
    background: var(--surface-card, #FFFFFF);
    color: var(--text-primary, #0c3a58);
    font: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.create-input:focus[b-p2ey2fq7i4] {
    outline: none;
    border-color: var(--brand-cyan-700, #1a5c7a);
    box-shadow: var(--shadow-glow, 0 0 0 4px rgba(26, 92, 122, 0.28));
}

.create-textarea[b-p2ey2fq7i4] {
    min-height: 104px;
    resize: vertical;
}

.create-select[b-p2ey2fq7i4] {
    cursor: pointer;
}

.create-switch[b-p2ey2fq7i4] {
    display: flex;
    gap: var(--sp-3, 12px);
    align-items: flex-start;
    padding: var(--sp-3, 12px);
    border-radius: 8px;
    background: var(--surface-card, #FFFFFF);
}

.create-switch input[b-p2ey2fq7i4] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--brand-cyan, #1a5c7a);
}

.create-switch span[b-p2ey2fq7i4] {
    display: grid;
    gap: 0.2rem;
}

.create-note[b-p2ey2fq7i4] {
    padding: var(--sp-3, 12px);
    border-left: 4px solid var(--brand-lime, #28a745);
    border-radius: 8px;
    background: rgba(40, 167, 69, 0.18);
}

.create-note p[b-p2ey2fq7i4] {
    margin: 0.35rem 0 0;
}

.create-option[b-p2ey2fq7i4] {
    display: flex;
    gap: var(--sp-3, 12px);
    padding: var(--sp-4, 16px);
    margin-block: var(--sp-2, 8px);
    border: 1px solid var(--border-subtle, rgba(12, 58, 88, 0.14));
    border-radius: 8px;
    background: var(--surface-card, #FFFFFF);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.create-option:hover[b-p2ey2fq7i4] {
    transform: translateY(-1px);
    border-color: var(--brand-cyan-700, #1a5c7a);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(12, 58, 88, 0.12));
}

.create-option.selected[b-p2ey2fq7i4] {
    border-color: var(--brand-cyan-700, #1a5c7a);
    background: var(--brand-cyan-100, #E8F7FB);
}

.create-option.disabled[b-p2ey2fq7i4] {
    cursor: not-allowed;
    opacity: 0.55;
}

.create-option.disabled:hover[b-p2ey2fq7i4] {
    transform: none;
    border-color: var(--border-subtle, rgba(12, 58, 88, 0.14));
    box-shadow: none;
}

.create-option h3[b-p2ey2fq7i4] {
    margin: 0;
    font-size: 1rem;
}

.create-option p[b-p2ey2fq7i4] {
    margin: 0.35rem 0;
}

.create-option span[b-p2ey2fq7i4] {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    background: var(--brand-yellow, #F4C737);
    color: var(--text-primary, #0c3a58);
    font-size: 0.78rem;
    font-weight: 800;
}

.create-radio[b-p2ey2fq7i4] {
    margin-top: 0.25rem;
    accent-color: var(--brand-cyan, #1a5c7a);
}

.create-submit[b-p2ey2fq7i4],
.create-login-link[b-p2ey2fq7i4] {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border: 0;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: var(--brand-lime, #28a745);
    color: var(--text-primary, #0c3a58);
    font-weight: 900;
    text-decoration: none;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(12, 58, 88, 0.12));
}

.create-submit[b-p2ey2fq7i4] {
    width: 100%;
}

.create-submit:disabled[b-p2ey2fq7i4] {
    cursor: not-allowed;
    opacity: 0.55;
}

.create-alert[b-p2ey2fq7i4] {
    padding: var(--sp-3, 12px);
    border-radius: 8px;
    font-weight: 800;
}

.create-alert--error[b-p2ey2fq7i4] {
    border: 1px solid rgba(230, 57, 70, 0.35);
    background: rgba(230, 57, 70, 0.12);
    color: #8C1D27;
}

.create-spinner[b-p2ey2fq7i4] {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(12, 58, 88, 0.28);
    border-top-color: var(--text-primary, #0c3a58);
    border-radius: 999px;
    animation: create-spin-b-p2ey2fq7i4 780ms linear infinite;
}

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

@media (max-width: 640px) {
    .create-header[b-p2ey2fq7i4] {
        align-items: flex-start;
        flex-direction: column;
    }

    .create-grid[b-p2ey2fq7i4] {
        grid-template-columns: 1fr;
    }
}
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/CreateLobbyFormRW.razor.rz.scp.css */
.create-container[b-hplsxpqt5x] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
    background: #0c3a58;
}


.create-card[b-hplsxpqt5x] {
    width: min(900px, 100%);
    position: relative;
    z-index: 1;
    display: grid;
    gap: 22px;
    padding: 40px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.create-card.centered[b-hplsxpqt5x] {
    min-height: 360px;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.create-header[b-hplsxpqt5x] {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.game-logo[b-hplsxpqt5x] {
    width: 140px;
    height: auto;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.create-header h1[b-hplsxpqt5x],
.create-card.centered h1[b-hplsxpqt5x] {
    margin: 0;
    color: #0c3a58;
    font-size: 1.75rem;
    font-weight: 800;
}

.create-header p[b-hplsxpqt5x],
.create-card.centered p[b-hplsxpqt5x] {
    margin: 0;
    color: #6c757d;
    font-weight: 700;
}

.form-section[b-hplsxpqt5x] {
    display: grid;
    gap: 16px;
    padding: 25px;
    border-radius: 12px;
    background: #f8f9fa;
}

.section-title[b-hplsxpqt5x] {
    margin: 0;
    color: #0c3a58;
    font-size: 1.1rem;
    font-weight: 800;
}

.section-copy[b-hplsxpqt5x],
.field-help[b-hplsxpqt5x],
.toggle-row small[b-hplsxpqt5x],
.verification-card small[b-hplsxpqt5x] {
    color: #6c757d;
}

.form-grid[b-hplsxpqt5x] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-field[b-hplsxpqt5x] {
    display: grid;
    gap: 8px;
}

.form-label-custom[b-hplsxpqt5x] {
    color: #0c3a58;
    font-weight: 800;
}

.form-label-custom strong[b-hplsxpqt5x],
.field-validation[b-hplsxpqt5x] {
    color: #dc3545;
}

.form-control-custom[b-hplsxpqt5x],
.form-select-custom[b-hplsxpqt5x] {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
    color: #0c3a58;
    font: inherit;
    font-weight: 700;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.form-control-custom:focus[b-hplsxpqt5x],
.form-select-custom:focus[b-hplsxpqt5x] {
    outline: none;
    border-color: #1a5c7a;
    box-shadow: 0 0 0 4px rgba(26, 92, 122, 0.14);
}

.form-control-custom.invalid[b-hplsxpqt5x] {
    border-color: #dc3545;
}

.textarea-custom[b-hplsxpqt5x] {
    min-height: 112px;
    resize: vertical;
}

.form-select-custom[b-hplsxpqt5x] {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230c3a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: calc(100% - 14px) center;
    background-size: 12px 8px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

.toggle-row[b-hplsxpqt5x] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
}

.toggle-row input[b-hplsxpqt5x] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #1a5c7a;
}

.toggle-row span[b-hplsxpqt5x] {
    display: grid;
    gap: 4px;
}

.toggle-row strong[b-hplsxpqt5x] {
    color: #0c3a58;
}

.info-note[b-hplsxpqt5x] {
    padding: 16px;
    border-left: 5px solid #28a745;
    border-radius: 12px;
    background: rgba(40, 167, 69, 0.1);
    color: #0c3a58;
}

.info-note p[b-hplsxpqt5x] {
    margin: 6px 0 0;
    color: #6c757d;
}

.verification-grid[b-hplsxpqt5x] {
    display: grid;
    gap: 12px;
}

.guest-player-section[b-hplsxpqt5x] {
    text-align: center;
}

.player-count-grid[b-hplsxpqt5x] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.player-count-button[b-hplsxpqt5x] {
    min-height: 112px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 3px solid #d7e3ea;
    border-radius: 12px;
    background: #ffffff;
    color: #0c3a58;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.player-count-button strong[b-hplsxpqt5x] {
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1;
}

.player-count-button span[b-hplsxpqt5x] {
    font-weight: 800;
}

.player-count-button:hover[b-hplsxpqt5x] {
    transform: translateY(-2px);
    border-color: #1a5c7a;
}

.player-count-button.selected[b-hplsxpqt5x] {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.1);
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.16);
}

.verification-card[b-hplsxpqt5x] {
    width: 100%;
    min-height: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #ffffff;
    color: #0c3a58;
    text-align: left;
    box-shadow: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.verification-card:hover:not(:disabled)[b-hplsxpqt5x] {
    transform: translateY(-2px);
    border-color: #1a5c7a;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.verification-card.selected[b-hplsxpqt5x] {
    border-color: #1a5c7a;
    background: rgba(26, 92, 122, 0.08);
}

.verification-card.disabled[b-hplsxpqt5x] {
    cursor: not-allowed;
    opacity: 0.55;
}

.verification-card span:not(.radio-dot)[b-hplsxpqt5x] {
    display: grid;
    gap: 5px;
}

.verification-card strong[b-hplsxpqt5x] {
    font-size: 1rem;
}

.verification-card em[b-hplsxpqt5x] {
    width: fit-content;
    border-radius: 999px;
    padding: 4px 10px;
    background: #f4c737;
    color: #0c3a58;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
}

.radio-dot[b-hplsxpqt5x] {
    width: 22px;
    height: 22px;
    border: 2px solid #1a5c7a;
    border-radius: 999px;
    margin-top: 2px;
    background: #ffffff;
}

.verification-card.selected .radio-dot[b-hplsxpqt5x] {
    box-shadow: inset 0 0 0 5px #ffffff;
    background: #1a5c7a;
}

.create-button[b-hplsxpqt5x] {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    padding: 14px 24px;
    background: #28a745;
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.create-button:hover:not(:disabled)[b-hplsxpqt5x] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.create-button:disabled[b-hplsxpqt5x] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.create-button-secondary[b-hplsxpqt5x] {
    background: #0c3a58;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.alert-error[b-hplsxpqt5x] {
    padding: 16px;
    border: 1px solid rgba(220, 53, 69, 0.35);
    border-radius: 12px;
    background: rgba(220, 53, 69, 0.1);
    color: #842029;
    font-weight: 800;
}

.create-spinner[b-hplsxpqt5x] {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: create-spin-b-hplsxpqt5x 780ms linear infinite;
}


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

@media (max-width: 720px) {
    .create-container[b-hplsxpqt5x] {
        padding: 20px 12px;
        align-items: flex-start;
    }

    .create-card[b-hplsxpqt5x] {
        padding: 24px 16px;
        border-radius: 12px;
    }

    .form-section[b-hplsxpqt5x] {
        padding: 18px 14px;
    }

    .form-grid[b-hplsxpqt5x] {
        grid-template-columns: 1fr;
    }

    .player-count-grid[b-hplsxpqt5x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/Create_lobby.razor.rz.scp.css */
/* Route wrapper only. Form styling lives in CreateLobbyForm.razor.css. */
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/Create_lobbyRW.razor.rz.scp.css */
/* Route wrapper only. Form styling lives in CreateLobbyForm.razor.css. */
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/CustomRoleCreation.razor.rz.scp.css */
.custom-role-creator[b-dkmncrwv68] {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .role-card[b-dkmncrwv68] {
        background: var(--background-colorful-primary);
        color: white;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }
    
    .input-group-custom[b-dkmncrwv68] {
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .input-group-custom input[b-dkmncrwv68],
    .input-group-custom textarea[b-dkmncrwv68] {
        background: #ffffff;
        border: none;
        border-radius: 5px;
        padding: 10px;
    }
    
    .area-selector[b-dkmncrwv68] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 15px;
    }
    
    .area-checkbox[b-dkmncrwv68] {
        background: rgba(255,255,255,0.2);
        padding: 10px;
        border-radius: 8px;
        transition: all 0.3s;
        cursor: pointer;
    }
    
    .area-checkbox:hover[b-dkmncrwv68] {
        background: rgba(255,255,255,0.3);
    }
    
    .area-checkbox.selected-positive[b-dkmncrwv68] {
        background: rgba(76, 175, 80, 0.5);
        border: 2px solid #4CAF50;
    }
    
    .area-checkbox.selected-negative[b-dkmncrwv68] {
        background: rgba(244, 67, 54, 0.5);
        border: 2px solid #f44336;
    }
    
    .waiting-screen[b-dkmncrwv68] {
        text-align: center;
        padding: 40px;
        background: rgba(255,255,255,0.1);
        border-radius: 12px;
        color: white;
    }
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/Home.razor.rz.scp.css */
.home-container[b-y2jrkcgmte] {
    background: #0c3a58;
    min-height: 100vh;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.home-landmarks-background[b-y2jrkcgmte] {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: min(78vw, 1085px);
    height: auto;
    opacity: 0.2;
    object-fit: contain;
    transform: translate(-50%, -42%);
    filter: saturate(0.88) brightness(1.05);
    pointer-events: none;
    user-select: none;
}

.home-container > .container[b-y2jrkcgmte] {
    position: relative;
    z-index: 1;
}

.game-header[b-y2jrkcgmte] {
    border-radius: 12px;
    padding: 20px 40px;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.game-title-link[b-y2jrkcgmte] {
    display: inline-flex;
    max-width: 100%;
    border-radius: 10px;
}

.game-title-link:focus-visible[b-y2jrkcgmte] {
    outline: 3px solid #1497bd;
    outline-offset: 5px;
}

.game-title-logo[b-y2jrkcgmte] {
    width: clamp(300px, 34vw, 480px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.game-header h1[b-y2jrkcgmte] {
    color: #0c3a58;
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.game-header .subtitle[b-y2jrkcgmte] {
    color: #666;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.home-copy[b-y2jrkcgmte] {
    color: #666;
    font-size: 1.05rem;
}

.copy-spaced[b-y2jrkcgmte] {
    margin-bottom: 20px;
}

.welcome-badge[b-y2jrkcgmte] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #28a745;
    color: white;
    padding: 10px 25px;
    border-radius: 12px;
    font-weight: 700;
    margin-top: 10px;
}

.game-card[b-y2jrkcgmte] {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.game-card:hover[b-y2jrkcgmte] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.start-options-container[b-y2jrkcgmte] {
    max-width: 1080px;
}

.start-options-grid[b-y2jrkcgmte] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 28px);
    align-items: stretch;
}

.start-option-card[b-y2jrkcgmte] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 340px;
    margin-bottom: 0;
    padding: clamp(24px, 3.2vw, 34px);
    border: 2px solid rgba(12, 58, 88, 0.12);
}

.start-option-card--register[b-y2jrkcgmte] {
    border-color: #1497bd;
}

.start-option-header[b-y2jrkcgmte] {
    margin-bottom: 20px;
}

.start-option-header h2[b-y2jrkcgmte] {
    margin: 0 0 10px;
    color: #0c3a58;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-align: center;
}

.start-option-header p[b-y2jrkcgmte] {
    margin: 0;
    color: #244a62;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
}

.start-benefit-list[b-y2jrkcgmte] {
    display: grid;
    gap: 14px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.start-benefit[b-y2jrkcgmte] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: #38566a;
    font-size: 1rem;
    line-height: 1.4;
}

.start-benefit-icon[b-y2jrkcgmte] {
    display: inline-grid;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    place-items: center;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
}

.start-benefit--included .start-benefit-icon[b-y2jrkcgmte] {
    background: #dff5e7;
    color: #158442;
}

.start-benefit--unavailable[b-y2jrkcgmte] {
    color: #697b87;
}

.start-benefit--unavailable .start-benefit-icon[b-y2jrkcgmte] {
    background: #fde5e7;
    color: #c93542;
}

.start-option-action[b-y2jrkcgmte] {
    margin: auto 0 0;
}

.start-option-card--register .btn-register[b-y2jrkcgmte] {
    border: 2px solid #658296;
    background: #ffffff;
    box-shadow: none;
    color: #0c3a58;
}

.start-option-card--register .btn-register:hover[b-y2jrkcgmte] {
    border-color: #0c3a58;
    background: #eef7fa;
    box-shadow: none;
    color: #0c3a58;
}

.start-options-footer[b-y2jrkcgmte] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.account-sign-in[b-y2jrkcgmte] {
    color: #e4f2f8;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-underline-offset: 3px;
}

.account-sign-in:hover[b-y2jrkcgmte],
.account-sign-in:focus-visible[b-y2jrkcgmte] {
    color: #ffffff;
}

.start-language-selector[b-y2jrkcgmte] {
    width: min(240px, 100%);
    margin-top: 0;
}

.start-language-selector .settings-btn[b-y2jrkcgmte] {
    border-color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.start-language-selector .settings-btn:hover[b-y2jrkcgmte],
.start-language-selector .settings-btn:focus-visible[b-y2jrkcgmte] {
    border-color: #ffffff;
    background: #ffffff;
    color: #0c3a58;
}

.card-header-custom[b-y2jrkcgmte] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid #e0e0e0;
}

.card-header-custom h5[b-y2jrkcgmte] {
    margin: 0;
    color: #0c3a58;
    font-weight: 700;
    font-size: 1.5rem;
}

.card-icon[b-y2jrkcgmte] {
    font-size: 1.8rem;
    color: #28a745;
}

.action-button[b-y2jrkcgmte] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 25px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    width: 100%;
    margin-bottom: 10px;
}

.btn-create[b-y2jrkcgmte] {
    background: #28a745;
    color: white;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.btn-create:hover[b-y2jrkcgmte] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    color: white;
}

.btn-join[b-y2jrkcgmte] {
    background: #1a5c7a;
    color: white;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.btn-join:hover[b-y2jrkcgmte] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    color: white;
}

.btn-logout[b-y2jrkcgmte] {
    background: #6c757d;
    color: white;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.btn-logout:hover[b-y2jrkcgmte] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    color: white;
}

.btn-login[b-y2jrkcgmte] {
    background: #1a5c7a;
    color: white;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.btn-login:hover[b-y2jrkcgmte] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    color: white;
}

.btn-register[b-y2jrkcgmte] {
    background: #28a745;
    color: white;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.btn-register:hover[b-y2jrkcgmte] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    color: white;
}

.registration-help[b-y2jrkcgmte] {
    margin: 14px 0 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff7e0;
    border: 1px solid rgba(229, 169, 35, 0.45);
    color: #4c3d12;
    font-size: 0.95rem;
    line-height: 1.45;
}

.registration-help a[b-y2jrkcgmte] {
    color: #0c3a58;
    font-weight: 800;
    text-decoration: none;
}

.registration-help a:hover[b-y2jrkcgmte] {
    text-decoration: underline;
}

.simple-join-form[b-y2jrkcgmte] {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid #d7e3ea;
    border-radius: 10px;
    background: #f8fbfd;
}

.simple-join-form.compact[b-y2jrkcgmte] {
    margin-bottom: 12px;
}

.simple-join-label[b-y2jrkcgmte] {
    display: block;
    margin-bottom: 8px;
    color: #0c3a58;
    font-weight: 700;
}

.simple-join-row[b-y2jrkcgmte] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.simple-join-input[b-y2jrkcgmte] {
    min-width: 0;
    height: 44px;
    border: 2px solid #d2e1e8;
    border-radius: 8px;
    padding: 0 12px;
    color: #0c3a58;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0;
}

.simple-join-input:focus[b-y2jrkcgmte] {
    border-color: #1a5c7a;
    box-shadow: 0 0 0 3px rgba(26, 92, 122, 0.12);
    outline: none;
}

.simple-join-button[b-y2jrkcgmte] {
    height: 44px;
    border: 0;
    border-radius: 8px;
    padding: 0 18px;
    background: #1a5c7a;
    color: #ffffff;
    font-weight: 800;
}

.simple-join-button:hover[b-y2jrkcgmte] {
    background: #0c3a58;
}

.simple-join-error[b-y2jrkcgmte] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fde8e8;
    color: #9f1d1d;
    font-size: 0.95rem;
    font-weight: 700;
}

.lobby-table[b-y2jrkcgmte] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.lobby-table thead th[b-y2jrkcgmte] {
    color: #0c3a58;
    font-weight: 700;
    padding: 15px;
    background: #f8f9fa;
    border: none;
}

.lobby-table tbody tr[b-y2jrkcgmte] {
    background: white;
    transition: all 0.3s ease;
}

.lobby-table tbody tr:hover[b-y2jrkcgmte] {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.lobby-table tbody td[b-y2jrkcgmte] {
    padding: 15px;
    vertical-align: middle;
    border: none;
}

.lobby-description-cell[b-y2jrkcgmte] {
    color: #666;
}

.lobby-code[b-y2jrkcgmte] {
    background: #0c3a58;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-block;
}

.status-badge[b-y2jrkcgmte] {
    padding: 6px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
}

.status-open[b-y2jrkcgmte] {
    background: #d4edda;
    color: #155724;
    border: 2px solid #28a745;
}

.status-closed[b-y2jrkcgmte] {
    background: #f8d7da;
    color: #721c24;
    border: 2px solid #dc3545;
}

.table-button[b-y2jrkcgmte] {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 10px;
    display: inline-block;
    text-decoration: none;  
}

.table-button.join[b-y2jrkcgmte] {
    margin-bottom:8px;
    background: #1a5c7a;
    color: white;
}

.table-button.join:hover[b-y2jrkcgmte] {
    background: #0c3a58;
    transform: scale(1.05);
}

.table-button.delete[b-y2jrkcgmte] {
    background: transparent;
    color: #dc3545;
    border: 2px solid #dc3545;
}

.table-button.delete:hover[b-y2jrkcgmte] {
    background: #dc3545;
    color: white;
}

.profile-info[b-y2jrkcgmte] {
    background: #0c3a58;
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.profile-info strong[b-y2jrkcgmte] {
    display: block;
    margin-bottom: 5px;
    opacity: 0.9;
}

.profile-info span[b-y2jrkcgmte] {
    font-size: 1.1rem;
    font-weight: 700;
}

.profile-details[b-y2jrkcgmte] {
    color: #666;
    padding: 10px 0;
}

.feature-list[b-y2jrkcgmte] {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.feature-list li[b-y2jrkcgmte] {
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
    color: #333;
    font-size: 1.05rem;
}

.feature-list li[b-y2jrkcgmte]::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: 700;
    font-size: 1.3rem;
}

.demo-box[b-y2jrkcgmte] {
    background: #fff7e0;
    border: 1px solid rgba(229, 169, 35, 0.45);
    padding: 20px;
    border-radius: 12px;
    margin-top: 15px;
    text-align: center;
}

.demo-box h6[b-y2jrkcgmte] {
    margin-bottom: 15px;
    color: #333;
    font-weight: 700;
}

.demo-credentials[b-y2jrkcgmte] {
    background: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.language-selector[b-y2jrkcgmte] {
    position: relative;
    margin-top: 15px;
}

.language-selector-inline[b-y2jrkcgmte] {
    margin: 15px 0;
}

.settings-btn[b-y2jrkcgmte] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: white;
    border: 2px solid #333;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.language-selector > summary.settings-btn[b-y2jrkcgmte] {
    list-style: none;
    user-select: none;
}

.language-selector > summary.settings-btn[b-y2jrkcgmte]::-webkit-details-marker {
    display: none;
}

.language-selector > summary.settings-btn[b-y2jrkcgmte]::after {
    content: "▾";
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.language-selector[open] > summary.settings-btn[b-y2jrkcgmte]::after {
    transform: rotate(180deg);
}

.settings-btn:hover[b-y2jrkcgmte] {
    background: #333;
    color: white;
}

.settings-btn:focus-visible[b-y2jrkcgmte] {
    outline: 3px solid #1497bd;
    outline-offset: 3px;
}

.language-dropdown[b-y2jrkcgmte] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
    list-style: none;
    padding: 0;
    margin-bottom: 5px;
    z-index: 100;
}

.language-dropdown li[b-y2jrkcgmte] {
    padding: 0;
}

.language-dropdown li a[b-y2jrkcgmte] {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.language-dropdown li a:hover[b-y2jrkcgmte] {
    background: #f8f9fa;
    color: #1a5c7a;
}

.active-games-card[b-y2jrkcgmte] {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.active-game-item[b-y2jrkcgmte] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.active-game-info[b-y2jrkcgmte] {
    flex: 1;
}

.active-game-info .game-name[b-y2jrkcgmte] {
    font-weight: 700;
    color: #0c3a58;
    font-size: 1.05rem;
}

.active-game-info .game-meta[b-y2jrkcgmte] {
    color: #666;
    font-size: 0.85rem;
    margin-top: 4px;
}

.active-game-role[b-y2jrkcgmte] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
}

.role-facilitator[b-y2jrkcgmte] {
    background: #d4edda;
    color: #155724;
}

.role-player[b-y2jrkcgmte] {
    background: #d1ecf1;
    color: #0c5460;
}

.btn-rejoin[b-y2jrkcgmte] {
    background: #ffc107;
    color: #333;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    font-weight: 700;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.btn-rejoin:hover[b-y2jrkcgmte] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    color: #333;
}

.empty-state[b-y2jrkcgmte] {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-text[b-y2jrkcgmte] {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.compact-action[b-y2jrkcgmte] {
    max-width: 300px;
    margin: 0 auto;
}

.empty-state-icon[b-y2jrkcgmte] {
    font-size: 4rem;
    color: #ccc;
    margin-bottom: 20px;
}

.loading-spinner[b-y2jrkcgmte] {
    text-align: center;
    padding: 60px 20px;
}

.spinner[b-y2jrkcgmte] {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top-color: #1a5c7a;
    border-radius: 50%;
    animation: spin-b-y2jrkcgmte 0.8s linear infinite;
    margin: 0 auto 20px;
}

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

.home-sponsor-footer[b-y2jrkcgmte] {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 26px auto 0;
    padding: clamp(16px, 2.4vw, 24px);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: clamp(14px, 2vw, 24px);
}

.home-sponsor-footer img[b-y2jrkcgmte] {
    display: block;
    width: clamp(72px, 7vw, 104px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

@media (min-width: 992px) {
    /* When there's no admin lobby table (col-lg-8), the solo profile/quick-actions
       column looks cramped at Bootstrap's default 33%; give it more room. */
    .col-lg-4.home-col-solo[b-y2jrkcgmte] {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (max-width: 768px) {
    .home-landmarks-background[b-y2jrkcgmte] {
        top: 46%;
        width: min(105vw, 1085px);
        opacity: 0.14;
        transform: translate(-50%, -42%);
    }

    .home-sponsor-footer[b-y2jrkcgmte] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 20px;
    }

    .home-sponsor-footer img[b-y2jrkcgmte] {
        width: clamp(62px, 18vw, 88px);
    }

    .start-options-grid[b-y2jrkcgmte] {
        grid-template-columns: minmax(0, 1fr);
    }

    .start-option-card[b-y2jrkcgmte] {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .home-container[b-y2jrkcgmte] {
        padding: 20px 12px;
    }

    .game-header[b-y2jrkcgmte] {
        margin-bottom: 24px;
        padding: 18px 20px;
    }

    .start-option-card[b-y2jrkcgmte] {
        padding: 24px 20px;
    }
}
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/Join.razor.rz.scp.css */
.join-container[b-dwevbydiuo] {
    background: #0c3a58;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}



.join-card[b-dwevbydiuo] {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    position: relative;
    z-index: 1;
}

.join-header[b-dwevbydiuo] {
    text-align: center;
    margin-bottom: 30px;
}

.join-header h2[b-dwevbydiuo] {
    color: #0c3a58;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 10px;
}

.join-header .user-badge[b-dwevbydiuo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #28a745;
    color: white;
    padding: 8px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
}

.code-input-wrapper[b-dwevbydiuo] {
    position: relative;
    margin-bottom: 25px;
}

.code-label[b-dwevbydiuo] {
    color: #0c3a58;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: block;
}

.code-input[b-dwevbydiuo] {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.5rem;
    text-align: center;
    border: 3px solid #e0e0e0;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    transition: all 0.3s ease;
    background: white;
}

.code-input:focus[b-dwevbydiuo] {
    outline: none;
    border-color: #28a745;
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.1);
}

.join-button[b-dwevbydiuo] {
    width: 100%;
    padding: 15px;
    background: #28a745;
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.join-button:hover:not(:disabled)[b-dwevbydiuo] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.join-button:active:not(:disabled)[b-dwevbydiuo] {
    transform: translateY(0);
}

.join-button:disabled[b-dwevbydiuo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.alert-custom[b-dwevbydiuo] {
    padding: 15px 20px;
    border-radius: 12px;
    margin-top: 20px;
    font-weight: 600;
    animation: slideIn-b-dwevbydiuo 0.3s ease;
}

.alert-error[b-dwevbydiuo] {
    background: #fee;
    border: 2px solid #dc3545;
    color: #721c24;
}

.alert-success[b-dwevbydiuo] {
    background: #d4edda;
    border: 2px solid #28a745;
    color: #155724;
}

.not-authorized-card[b-dwevbydiuo] {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    text-align: center;
    position: relative;
    z-index: 1;
}

.not-authorized-card h3[b-dwevbydiuo] {
    color: #0c3a58;
    margin-bottom: 20px;
    font-weight: 700;
}

.not-authorized-card p[b-dwevbydiuo] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 25px;
}

.login-link[b-dwevbydiuo] {
    display: inline-block;
    padding: 12px 30px;
    background: #1a5c7a;
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.login-link:hover[b-dwevbydiuo] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    color: white;
}

@keyframes slideIn-b-dwevbydiuo {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}

.spinner[b-dwevbydiuo] {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-dwevbydiuo 0.8s linear infinite;
}

@keyframes spin-b-dwevbydiuo {
    to { transform: rotate(360deg); }
}
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/LobbyPageRW.razor.rz.scp.css */
.lobby-container[b-dda852exr8] {
        background: #0c3a58;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        position: relative;
        overflow: hidden;
    }



    .lobby-card[b-dda852exr8] {
        background: #ffffff;
        border-radius: 12px;
        padding: 40px;
        max-width: 800px;
        width: 100%;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        position: relative;
        z-index: 1;
    }

    .lobby-header[b-dda852exr8] {
        text-align: center;
        margin-bottom: 30px;
    }

    .game-logo[b-dda852exr8] {
        width: 140px;
        height: auto;
        margin-bottom: 15px;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    }

    .lobby-header h1[b-dda852exr8] {
        color: #0c3a58;
        font-weight: 700;
        font-size: 1.6rem;
        margin-bottom: 8px;
    }

    .lobby-header p[b-dda852exr8] {
        color: #6c757d;
        font-size: 1rem;
        margin: 0;
    }

    .join-section[b-dda852exr8] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-bottom: 30px;
    }

    @media (max-width: 768px) {
        .join-section[b-dda852exr8] {
            grid-template-columns: 1fr;
        }
    }

    .qr-section[b-dda852exr8] {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 25px;
        text-align: center;
    }

    .qr-code-wrapper[b-dda852exr8] {
        background: white;
        padding: 15px;
        border-radius: 12px;
        display: inline-block;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .qr-code-wrapper img[b-dda852exr8] {
        max-width: 180px;
        border-radius: 8px;
    }

    .code-section[b-dda852exr8] {
        background: #0c3a58;
        border-radius: 12px;
        padding: 25px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .code-label[b-dda852exr8] {
        color: rgba(255,255,255,0.8);
        font-size: 0.9rem;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .join-code[b-dda852exr8] {
        font-size: 3.5rem;
        font-weight: 800;
        color: white;
        letter-spacing: 0.15em;
        text-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        margin-bottom: 10px;
    }

    .code-hint[b-dda852exr8] {
        color: rgba(255,255,255,0.7);
        font-size: 0.85rem;
    }

    .section-card[b-dda852exr8] {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 20px;
    }

    .section-title[b-dda852exr8] {
        color: #0c3a58;
        font-weight: 700;
        font-size: 1.1rem;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-title i[b-dda852exr8] {
        color: #1a5c7a;
        font-size: 1.3rem;
    }

    .player-count[b-dda852exr8] {
        margin-left: auto;
        background: #0c3a58;
        color: white;
        padding: 5px 15px;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
    }

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

    .player-item[b-dda852exr8] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 20px;
        background: white;
        border-radius: 12px;
        border: 2px solid #e0e0e0;
        transition: all 0.3s ease;
    }

    .player-item:hover[b-dda852exr8] {
        border-color: #1a5c7a;
        transform: translateX(2px);
    }

    .player-info[b-dda852exr8] {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .player-avatar[b-dda852exr8] {
        width: 40px;
        height: 40px;
        background: #0c3a58;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 1rem;
        flex: 0 0 auto;
        overflow: hidden;
    }

    .player-avatar img[b-dda852exr8] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .player-name[b-dda852exr8] {
        font-weight: 600;
        color: #0c3a58;
        overflow-wrap: anywhere;
    }

    .player-actions[b-dda852exr8] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
    }

    .remove-player-button[b-dda852exr8] {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 0;
        border-radius: 8px;
        padding: 8px 12px;
        background: #dc3545;
        color: #ffffff;
        cursor: pointer;
        font-size: 0.82rem;
        font-weight: 800;
    }

    .remove-player-button:hover:not(:disabled)[b-dda852exr8] {
        background: #b02a37;
    }

    .remove-player-button:disabled[b-dda852exr8] {
        cursor: wait;
        opacity: 0.65;
    }

    .player-status[b-dda852exr8] {
        padding: 5px 12px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .status-ready[b-dda852exr8] {
        background: #28a745;
        color: white;
    }

    .status-creating[b-dda852exr8] {
        background: #ffc107;
        color: white;
    }

    .waiting-message[b-dda852exr8] {
        text-align: center;
        padding: 30px;
        color: #6c757d;
    }

    .waiting-message i[b-dda852exr8] {
        font-size: 2.5rem;
        margin-bottom: 15px;
        animation: pulse-b-dda852exr8 2s infinite;
    }

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

    .info-banner[b-dda852exr8] {
        background: rgba(26, 92, 122, 0.1);
        border: 2px solid #1a5c7a;
        border-radius: 12px;
        padding: 15px 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .info-banner i[b-dda852exr8] {
        color: #1a5c7a;
        font-size: 1.3rem;
    }

    .info-banner-content[b-dda852exr8] {
        flex: 1;
    }

    .info-banner-content strong[b-dda852exr8] {
        color: #0c3a58;
        display: block;
        margin-bottom: 3px;
    }

    .info-banner-content small[b-dda852exr8] {
        color: #6c757d;
    }

    .success-banner[b-dda852exr8] {
        background: rgba(40, 167, 69, 0.1);
        border: 2px solid #28a745;
    }

    .success-banner i[b-dda852exr8] {
        color: #28a745;
    }

    .admin-banner[b-dda852exr8] {
        background: rgba(26, 92, 122, 0.1);
        border: 2px solid #1a5c7a;
        margin-bottom: 20px;
    }

    .admin-banner i[b-dda852exr8] {
        color: #1a5c7a;
    }

    .admin-link[b-dda852exr8] {
        background: #1a5c7a;
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.85rem;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .admin-link:hover[b-dda852exr8] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        color: white;
    }

    .action-button[b-dda852exr8] {
        width: 100%;
        padding: 18px;
        background: #28a745;
        border: none;
        border-radius: 12px;
        color: white;
        font-weight: 700;
        font-size: 1.15rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .action-button:hover:not(:disabled)[b-dda852exr8] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .action-button:disabled[b-dda852exr8] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
        background: #6c757d;
        box-shadow: none;
    }

    .secondary-button[b-dda852exr8] {
        background: #ffc107;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        margin-top: 10px;
    }

    .secondary-button:hover:not(:disabled)[b-dda852exr8] {
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    .help-text[b-dda852exr8] {
        text-align: center;
        color: #6c757d;
        font-size: 0.85rem;
        margin-top: 15px;
    }

    .spinner[b-dda852exr8] {
        width: 22px;
        height: 22px;
        border: 3px solid rgba(255,255,255,0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin-b-dda852exr8 0.8s linear infinite;
    }

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

    .alert-custom[b-dda852exr8] {
        padding: 16px 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        font-weight: 600;
        animation: slideIn-b-dda852exr8 0.3s ease;
    }

    .alert-error[b-dda852exr8] {
        background: #fee2e2;
        border: 2px solid #ef4444;
        color: #991b1b;
    }

    @keyframes slideIn-b-dda852exr8 {
        from {
            opacity: 0;
            transform: translateY(-2px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .loading-container[b-dda852exr8] {
        text-align: center;
        padding: 60px 20px;
    }

    .loading-spinner[b-dda852exr8] {
        width: 60px;
        height: 60px;
        border: 4px solid rgba(26, 92, 122, 0.2);
        border-top-color: #1a5c7a;
        border-radius: 50%;
        animation: spin-b-dda852exr8 1s linear infinite;
        margin: 0 auto 20px;
    }

    .loading-container p[b-dda852exr8] {
        color: #0c3a58;
        font-size: 1.1rem;
        font-weight: 600;
    }

    @media (max-width: 600px) {
        .player-item[b-dda852exr8] {
            align-items: flex-start;
            gap: 12px;
        }

        .player-actions[b-dda852exr8] {
            flex-direction: column;
            align-items: stretch;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/LobbyQrCode.razor.rz.scp.css */
.qr-code-display[b-y4f6917rnk] {
        background-color: white;
        padding: 20px;
        border-radius: 12px;
        display: inline-block;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    @media print {
        .btn[b-y4f6917rnk], .card-footer[b-y4f6917rnk] {
            display: none !important;
        }
    }
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/PlayerWaitingRoom.razor.rz.scp.css */
.waiting-container[b-dajavagmxr] {
    background: #0c3a58;
    min-height: 100vh;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}



.waiting-card[b-dajavagmxr] {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    position: relative;
    z-index: 1;
}

.status-header[b-dajavagmxr] {
    color: #0c3a58;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.lobby-title[b-dajavagmxr] {
    color: #0c3a58;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.lobby-description[b-dajavagmxr] {
    color: #666;
    margin-bottom: 20px;
}

.custom-role-alert[b-dajavagmxr] {
    background: #0c3a58;
    color: white;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.waiting-message[b-dajavagmxr] {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 30px;
}

.connection-status[b-dajavagmxr] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 12px;
    background: #f8f9fa;
}

.connection-status.connected[b-dajavagmxr] {
    background: #d4edda;
    color: #155724;
}

.connection-status.connecting[b-dajavagmxr] {
    background: #fff3cd;
    color: #856404;
}

.connection-status.disconnected[b-dajavagmxr] {
    background: #f8d7da;
    color: #721c24;
}

.status-dot[b-dajavagmxr] {
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 10px;
    border-radius: 50%;
    background: #28a745;
    box-shadow: 0 0 0 6px rgba(40, 167, 69, 0.16);
}

.status-dot-waiting[b-dajavagmxr] {
    background: #ffc107;
    box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.18);
}

.players-count[b-dajavagmxr] {
    background: #0c3a58;
    color: white;
    padding: 15px 25px;
    border-radius: 12px;
    display: inline-block;
    margin-top: 20px;
    font-weight: 600;
}

.game-code-box[b-dajavagmxr] {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 12px;
    margin-top: 15px;
    color: #666;
}

.game-code-box strong[b-dajavagmxr] {
    color: #0c3a58;
    font-size: 1.3rem;
}

.leave-button[b-dajavagmxr] {
    background: transparent;
    color: #dc3545;
    border: 2px solid #dc3545;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.leave-button:hover[b-dajavagmxr] {
    background: #dc3545;
    color: white;
    transform: translateY(-2px);
}

.leave-button:disabled[b-dajavagmxr] {
    opacity: 0.6;
    cursor: not-allowed;
}

.reconnect-button[b-dajavagmxr] {
    background: #1a5c7a;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reconnect-button:hover[b-dajavagmxr] {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.error-alert[b-dajavagmxr] {
    background: #f8d7da;
    color: #721c24;
    padding: 15px 20px;
    border-radius: 12px;
    margin-top: 20px;
    border: 2px solid #dc3545;
}
/* _content/Municipality16.Shared/Components/Pages/LobbyPages/RoleSelection.razor.rz.scp.css */
/* Main theme */
    .role-selection-container[b-dmq3qv4zeo] {
        background: #0c3a58;
        min-height: 100vh;
        padding: 40px 20px;
    }

    .page-header[b-dmq3qv4zeo] {
        background: #ffffff;
        border-radius: 10px;
        padding: 30px;
        margin-bottom: 30px;
        text-align: center;
        color: #0c3a58;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .page-header h3[b-dmq3qv4zeo] {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .user-info-box[b-dmq3qv4zeo] {
        background: #ffffff;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        color: #333;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .user-info-box p[b-dmq3qv4zeo] {
        margin: 5px 0;
        font-size: 1.1rem;
    }

    .role-input[b-dmq3qv4zeo] {
        background: #f5f5f5;
        border: 2px solid #ddd;
        border-radius: 8px;
        padding: 12px 20px;
        font-size: 1rem;
        color: #333;
        transition: all 0.3s ease;
        margin-bottom: 15px;
        width: 100%;
    }

    .role-input:focus[b-dmq3qv4zeo] {
        background: white;
        border-color: #4CAF50;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15), 0 0 0 3px rgba(76, 175, 80, 0.1);
        outline: none;
    }

    .role-input[b-dmq3qv4zeo]::placeholder {
        color: #999;
    }

    .roles-grid[b-dmq3qv4zeo] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 25px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .role-card[b-dmq3qv4zeo] {
        background: #ffffff;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        padding: 25px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .role-card:hover[b-dmq3qv4zeo] {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        border-color: #4CAF50;
    }

    /* Selected role - purple theme */
    .role-card.selected[b-dmq3qv4zeo] {
        border: 3px solid #9c27b0;
        background: #f3e5f5;
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    /* Taken role - red theme */
    .role-card.taken[b-dmq3qv4zeo] {
        border: 3px solid #f44336;
        background: #ffebee;
        opacity: 0.8;
        cursor: not-allowed;
        position: relative;
    }

    .role-taken-badge[b-dmq3qv4zeo] {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #f44336;
        color: white;
        padding: 5px 12px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
        z-index: 1;
    }
    
    .taken-by-badge[b-dmq3qv4zeo] {
        background: #fff3e0;
        border: 2px solid #ff9800;
        padding: 10px 15px;
        border-radius: 8px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .taken-by-badge i[b-dmq3qv4zeo] {
        color: #ff9800;
        font-size: 1.2rem;
    }
    
    .taken-by-badge strong[b-dmq3qv4zeo] {
        color: #e65100;
        font-size: 0.95rem;
    }

    .role-card.taken:hover[b-dmq3qv4zeo] {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Disabled state */
    .role-card.disabled[b-dmq3qv4zeo] {
        opacity: 0.5;
        cursor: not-allowed;
        background: #f5f5f5;
    }

    .role-card.disabled:hover[b-dmq3qv4zeo] {
        transform: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-color: #e0e0e0;
    }

    .role-content[b-dmq3qv4zeo] {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .role-icon-container[b-dmq3qv4zeo] {
        flex-shrink: 0;
    }

    .role-icon[b-dmq3qv4zeo] {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #f5f5f5;
        padding: 10px;
        border: 2px solid #e0e0e0;
        transition: all 0.3s ease;
    }

    .role-card:hover .role-icon[b-dmq3qv4zeo] {
        border-color: #4CAF50;
        transform: scale(1.05);
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
    }

    .role-card.selected .role-icon[b-dmq3qv4zeo] {
        border-color: #9c27b0;
        box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.3);
    }

    .role-info[b-dmq3qv4zeo] {
        flex: 1;
    }

    .role-name[b-dmq3qv4zeo] {
        font-size: 1.3rem;
        font-weight: 700;
        color: #0c3a58;
        margin-bottom: 15px;
    }

    .role-attributes[b-dmq3qv4zeo] {
        background: #f5f5f5;
        border-radius: 10px;
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .attribute-icon[b-dmq3qv4zeo] {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        padding: 5px;
        transition: all 0.3s ease;
    }

    .attribute-icon.positive[b-dmq3qv4zeo] {
        border: 3px solid #4CAF50;
        background: #e8f5e9;
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
    }

    .attribute-icon.negative[b-dmq3qv4zeo] {
        border: 3px solid #f44336;
        background: #ffebee;
        box-shadow: 0 0 10px rgba(244, 67, 54, 0.3);
    }

    .attribute-icon:hover[b-dmq3qv4zeo] {
        transform: scale(1.1);
    }

    .current-role-banner[b-dmq3qv4zeo] {
        background: var(--brand-cyan-dark, #1a5c7a);
        color: white;
        padding: 20px 30px;
        border-radius: 10px;
        margin-bottom: 25px;
        text-align: center;
    }

    .current-role-banner strong[b-dmq3qv4zeo] {
        font-size: 1.3rem;
        display: block;
        margin-bottom: 5px;
    }

    .confirm-button[b-dmq3qv4zeo] {
        background: #4CAF50;
        border: none;
        color: white;
        padding: 18px 50px;
        font-size: 1.3rem;
        font-weight: 700;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        display: block;
        margin: 30px auto;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .confirm-button:hover:not(.disabled)[b-dmq3qv4zeo] {
        background: #45a049;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
        transform: translateY(-2px);
    }

    .confirm-button:active:not(.disabled)[b-dmq3qv4zeo] {
        transform: translateY(0);
        box-shadow: 0 2px 10px rgba(76, 175, 80, 0.4);
    }

    .confirm-button.disabled[b-dmq3qv4zeo] {
        background: #9e9e9e;
        cursor: not-allowed;
        opacity: 0.6;
        box-shadow: none;
    }

    .loading-message[b-dmq3qv4zeo] {
        color: white;
        font-size: 1.3rem;
        text-align: center;
        padding: 50px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        color: #333;
    }

    .not-authorized-box[b-dmq3qv4zeo] {
        background: #ffffff;
        padding: 40px;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .not-authorized-box p[b-dmq3qv4zeo] {
        font-size: 1.2rem;
        color: #333;
        margin-bottom: 20px;
    }

    .not-authorized-box a[b-dmq3qv4zeo] {
        color: #2196F3;
        font-weight: 700;
        text-decoration: none;
    }

    .not-authorized-box a:hover[b-dmq3qv4zeo] {
        color: #1565C0;
        text-decoration: underline;
    }

    .language-button[b-dmq3qv4zeo] {
        background: #ffffff;
        border: 3px solid #e0e0e0;
        border-radius: 10px;
        padding: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100px;
    }

    .language-button:hover[b-dmq3qv4zeo] {
        border-color: #4CAF50;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
    }

    .language-button.selected[b-dmq3qv4zeo] {
        border-color: #9c27b0;
        background: #f3e5f5;
        box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .roles-grid[b-dmq3qv4zeo] {
            grid-template-columns: 1fr;
        }

        .role-content[b-dmq3qv4zeo] {
            flex-direction: column;
            text-align: center;
        }

        .page-header h3[b-dmq3qv4zeo] {
            font-size: 1.8rem;
        }
    }
/* _content/Municipality16.Shared/Components/Shared/Cards/AreaToken.razor.rz.scp.css */
.area-token[b-p5e4iak29i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: var(--fw-bold);
    box-shadow: 0 2px 5px rgba(12, 58, 88, 0.18),
                inset 0 -2px 0 rgba(0, 0, 0, 0.08);
    user-select: none;
}

.area-token img[b-p5e4iak29i] {
    width: 64%;
    height: 64%;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.area-token-glyph[b-p5e4iak29i] {
    font-size: 1em;
    line-height: 1;
}

/* Sizes */
.area-token-sm[b-p5e4iak29i] { width: 24px; height: 24px; font-size: 0.75rem; }
.area-token-md[b-p5e4iak29i] { width: 36px; height: 36px; font-size: 1rem; }
.area-token-lg[b-p5e4iak29i] { width: 56px; height: 56px; font-size: 1.4rem; }

/* Per-area color */
.area-token-culture[b-p5e4iak29i]   { background: var(--area-culture); }
.area-token-education[b-p5e4iak29i] { background: var(--area-education); }
.area-token-health[b-p5e4iak29i]    { background: var(--area-health); }
.area-token-infra[b-p5e4iak29i]     { background: var(--area-infra); }
.area-token-nature[b-p5e4iak29i]    { background: var(--area-nature); }
.area-token-sport[b-p5e4iak29i]     { background: var(--area-sport); color: var(--brand-navy); }
/* _content/Municipality16.Shared/Components/Shared/Cards/IdeaCard.razor.rz.scp.css */
/* ===== Base card shell ===== */
.idea-card[b-19ovh75x59] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    font-family: "Russo One", sans-serif;
    font-weight: 400;
    font-style: normal;
    border-radius: 3px;
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    outline: none;
    overflow: hidden;
    user-select: none;
    border: 1px solid var(--border-default);

    --idea-title-fs: 0.78rem;
    --idea-title-top: 7px;
    --idea-title-pad-x: 42px;
    --idea-bar-top: 36px;
    --idea-role-size: 34px;
    --idea-role-left: 12px;
    --idea-role-top: 45px;
    --idea-image-w: 80%;
    --idea-image-h: 80%;
    --idea-image-top: 50px;
    --idea-image-left: 10%;
    --idea-price-size: 50px;
    --idea-price-right: var(--idea-role-left);
    --idea-impact-pad-x: 10px;
    --idea-impact-icon-size: 34px;
    --idea-impact-value-size: 32px;
    --idea-impact-gap: 5px;
    --idea-impact-value-fs: 0.92rem;
}

.idea-card-size-small[b-19ovh75x59] {
    --idea-title-fs: 0.55rem;
    --idea-title-top: 5px;
    --idea-title-pad-x: 30px;
    --idea-bar-top: 26px;
    --idea-role-size: 24px;
    --idea-role-left: 8px;
    --idea-role-top: 31px;
    --idea-image-w: 108%;
    --idea-image-h: 85%;
    --idea-image-top: 24px;
    --idea-image-left: -4%;
    --idea-price-size: 37px;
    --idea-price-right: var(--idea-role-left);
    --idea-impact-pad-x: 6px;
    --idea-impact-icon-size: 23px;
    --idea-impact-value-size: 22px;
    --idea-impact-gap: 3px;
    --idea-impact-value-fs: 0.68rem;
}

.idea-card-size-large[b-19ovh75x59] {
    --idea-title-fs: 0.94rem;
    --idea-title-top: 10px;
    --idea-title-pad-x: 54px;
    --idea-bar-top: 48px;
    --idea-role-size: 46px;
    --idea-role-left: 16px;
    --idea-role-top: 58px;
    --idea-image-w: 80%;
    --idea-image-h: 80%;
    --idea-image-top: 50px;
    --idea-image-left: 10%;
    --idea-price-size: 128px;
    --idea-price-right: 8px;
    --idea-impact-pad-x: 14px;
    --idea-impact-icon-size: 44px;
    --idea-impact-value-size: 40px;
    --idea-impact-gap: 7px;
    --idea-impact-value-fs: 1.08rem;
}

.idea-card.is-clickable[b-19ovh75x59] {
    cursor: pointer;
}

.idea-card.is-clickable:hover[b-19ovh75x59] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.idea-card.is-selected[b-19ovh75x59] {
    box-shadow: var(--shadow-card-hover), var(--shadow-glow);
}

.idea-card.is-clickable:focus[b-19ovh75x59] {
    outline: none;
}

.idea-card.is-clickable:focus-visible[b-19ovh75x59] {
    box-shadow: var(--shadow-card-hover), var(--shadow-glow);
}

/* ===== Face down (yellow polygon) ===== */
.idea-card-facedown[b-19ovh75x59] {
    background: #e7eff4;
}

.idea-card-frame[b-19ovh75x59] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.idea-polygon[b-19ovh75x59] {
    width: 78%;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(12, 58, 88, 0.18));
}

.idea-number[b-19ovh75x59] {
    position: absolute;
    font-family: "Russo One", sans-serif;
    font-weight: var(--fw-black);
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    color: var(--brand-navy);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
}

.idea-round-pill[b-19ovh75x59] {
    position: absolute;
    top: 12%;
    right: 12%;
    background: var(--brand-cyan);
    color: #fff;
    font-family: "Russo One", sans-serif;
    font-weight: var(--fw-bold);
    padding: 2px 10px;
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-sm);
}

/* ===== Face up: rules card layout ===== */
.idea-card-faceup-layout[b-19ovh75x59] {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 1fr 1fr;
    background: #fff;
}

.idea-card-face[b-19ovh75x59] {
    position: relative;
    z-index: 2;
    min-height: 0;
    overflow: visible;
    background: #203c58;
}

.idea-card-face[b-19ovh75x59]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: #fff;
}

.idea-card-title[b-19ovh75x59] {
    position: absolute;
    z-index: 3;
    top: var(--idea-title-top);
    left: var(--idea-title-pad-x);
    right: var(--idea-title-pad-x);
    color: #fff;
    font-family: "Russo One", sans-serif;
    /*font-size: var(--idea-title-fs);*/
    font-weight: var(--fw-black);
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.idea-card-role-badge[b-19ovh75x59] {
    position: absolute;
    z-index: 4;
    top: var(--idea-role-top);
    left: var(--idea-role-left);
    width: var(--idea-role-size);
    height: var(--idea-role-size);
    display: grid;
    place-items: center;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}

.idea-card-role-badge img[b-19ovh75x59] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.idea-card-image[b-19ovh75x59] {
    position: absolute;
    z-index: 2;
    top: var(--idea-image-top);
    left: var(--idea-image-left);
    width: var(--idea-image-w);
    height: var(--idea-image-h);
    object-fit: contain;
    display: block;
}

.idea-card-needed[b-19ovh75x59] {
    position: absolute;
    z-index: 6;
    right: var(--idea-price-right);
    top: 100%;
    width: var(--idea-price-size);
    height: var(--idea-price-size);
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    color: #203c58;
    font-family: "Russo One", sans-serif;
    font-size: var(--idea-impact-value-fs);
    font-weight: var(--fw-black);
    line-height: 1;
}

.idea-card-needed img[b-19ovh75x59] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.16));
}

.idea-card-needed span[b-19ovh75x59] {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25badb;
}

.idea-card-impact[b-19ovh75x59] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: max-content max-content;
    align-items: center;
    align-content: center;
    row-gap: clamp(5px, 2.8%, 10px);
    min-height: 0;
    padding: 8px var(--idea-impact-pad-x);
    background: #fff;
}

.idea-card-impact-icons[b-19ovh75x59],
.idea-card-impact-values[b-19ovh75x59] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--idea-impact-gap);
    align-items: center;
    justify-items: center;
    min-width: 0;
}

.idea-card-cover[b-19ovh75x59] {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Project illustration sits in the plaza on top of the city background */
.idea-card-cover-illustration[b-19ovh75x59] {
    position: absolute;
    z-index: 2;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -25%);
    width: 74%;
    height: 62%;
    object-fit: contain;
    pointer-events: none;
}

/* ===== Hidden-value card (player view): header bar, illustration, combined area icons ===== */
.idea-card-hidden[b-19ovh75x59] {
    grid-template-rows: 3.5fr 1fr;
}

/* Title sits in a solid navy header bar */
.idea-card-hidden .idea-card-title[b-19ovh75x59] {
    top: 0;
    left: 0;
    right: 0;
    padding: 22px 8px;
    background: #1F3B58;
    text-shadow: none;
}

/* Player (role) icon and support splash share the same baseline */
.idea-card-hidden .idea-card-role-badge[b-19ovh75x59] {
    top: 84%;
    bottom: auto;
    left: 8px;
    transform: translateY(-50%);
}

.idea-card-hidden .idea-card-needed[b-19ovh75x59] {
    top: 84%;
    bottom: auto;
    transform: translateY(-50%);
}

/* Footer: basic area icon + separate direction arrow, no grey chrome */
.idea-card-hidden .idea-card-impact[b-19ovh75x59] {
    padding: 4px 6px;
}

.idea-card-hidden .idea-attr-icon-wrapper[b-19ovh75x59] {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.idea-card-hidden .idea-attr-icon-cell[b-19ovh75x59] {
    width: 100%;
    height: 100%;
    background: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none !important;
}

.idea-card-hidden .idea-attr-icon-cell.is-inactive[b-19ovh75x59] {
    opacity: 0.4;
}

.idea-card-hidden .idea-impact-arrow[b-19ovh75x59] {
    position: absolute;
    top: -4%;
    right: -4%;
    width: 46%;
    height: auto;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
}

.idea-attr-icon-wrapper[b-19ovh75x59] {
    position: relative;
    width: var(--idea-impact-icon-size);
    height: var(--idea-impact-icon-size);
}

.idea-attr-icon-cell[b-19ovh75x59] {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--idea-impact-icon-size);
    height: var(--idea-impact-icon-size);
    border-radius: 50%;
    background: #e7eaee;
    overflow: hidden;
}

.idea-attr-icon-cell.is-inactive[b-19ovh75x59] {
    opacity: 0.45;
}

.idea-attr-icon-cell.is-active.idea-attr-pos[b-19ovh75x59] {
    box-shadow: inset 0 0 0 2px rgba(18, 159, 82, 0.25);
}

.idea-attr-icon-cell.is-active.idea-attr-neg[b-19ovh75x59] {
    box-shadow: inset 0 0 0 2px rgba(224, 43, 43, 0.25);
}

.idea-attr-icon[b-19ovh75x59] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.idea-attr-value-cell[b-19ovh75x59] {
    display: grid;
    place-items: center;
    width: var(--idea-impact-value-size);
    height: var(--idea-impact-value-size);
    border-radius: 50%;
    background: #eef0f3;
    color: #203c58;
    font-family: "Russo One", sans-serif;
    font-size: var(--idea-impact-value-fs);
    font-weight: var(--fw-black);
    line-height: 1;
}

.idea-attr-value-cell.is-active.idea-attr-pos[b-19ovh75x59] {
    border: 2px solid #20ad5a;
    color: #0c9f4e;
    background: #fff;
}

.idea-attr-value-cell.is-active.idea-attr-neg[b-19ovh75x59] {
    border: 3px solid #dc3545;
    color: #dc3545;
    background: #fff;
}

.idea-attr-value-cell.is-inactive[b-19ovh75x59] {
    border: 0;
}
/* _content/Municipality16.Shared/Components/Shared/Cards/ParticipationToolCard.razor.rz.scp.css */
.ptool-card[b-qifeqhe3s1] {
    position: relative;
    width: 96px;
    height: 96px;
    display: inline-block;
    outline: none;
}

.ptool-card.is-clickable[b-qifeqhe3s1] {
    cursor: pointer;
}

.ptool-card.is-clickable:focus[b-qifeqhe3s1] {
    outline: none;
}

.ptool-card.is-selected[b-qifeqhe3s1] {
    transform: scale(1.10);
    filter: drop-shadow(0 0 5px rgba(26, 92, 122, 0.55));
}

.ptool-card.is-used[b-qifeqhe3s1] {
    opacity: 0.4;
    filter: grayscale(50%);
    cursor: not-allowed;
}

.ptool-card.is-disabled[b-qifeqhe3s1] {
    opacity: 0.5;
    filter: grayscale(45%) brightness(0.9);
    cursor: not-allowed;
    pointer-events: none;
}

.ptool-card.ptool-state-staged[b-qifeqhe3s1] {
    filter: drop-shadow(0 0 5px rgba(26, 92, 122, 0.55));
}

.ptool-card.ptool-state-pending[b-qifeqhe3s1] {
    filter: drop-shadow(0 0 5px rgba(244, 199, 55, 0.6));
}

.ptool-card.ptool-state-used[b-qifeqhe3s1] {
    filter: drop-shadow(0 0 5px rgba(76, 175, 80, 0.5));
}

.ptool-card.ptool-state-rejected[b-qifeqhe3s1] {
    filter: grayscale(20%) drop-shadow(0 0 5px rgba(230, 57, 70, 0.55));
}

.ptool-card.ptool-state-historical[b-qifeqhe3s1] {
    filter: grayscale(80%) brightness(0.7);
}

.ptool-svg[b-qifeqhe3s1] {
    width: 100%;
    height: 100%;
    display: block;
}

.ptool-img[b-qifeqhe3s1] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62%;
    height: 62%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}

.ptool-label[b-qifeqhe3s1] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: 0.6rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    white-space: nowrap;
}

.ptool-label-top[b-qifeqhe3s1]    { top: 12%; }
.ptool-label-bottom[b-qifeqhe3s1] { bottom: 12%; }

.ptool-value[b-qifeqhe3s1] {
    position: absolute;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--fw-black);
    font-size: 1.1rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.ptool-value-top[b-qifeqhe3s1]    { top: 32%;    left: 8%; }
.ptool-value-bottom[b-qifeqhe3s1] { bottom: 32%; right: 8%; }

.ptool-status[b-qifeqhe3s1] {
    position: absolute;
    left: 50%;
    bottom: -0.8rem;
    transform: translateX(-50%);
    max-width: 9rem;
    padding: 0.12rem 0.45rem;
    border-radius: var(--r-pill);
    background: rgba(12, 58, 88, 0.86);
    color: #fff;
    font-size: 0.62rem;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}
/* _content/Municipality16.Shared/Components/Shared/Cards/SupportCard.razor.rz.scp.css */
.support-card[b-1h769kewfx] {
    position: relative;
    width: clamp(48px, 8vw, 72px);
    height: clamp(48px, 8vw, 72px);
    display: inline-grid;
    place-items: center;
    outline: none;
}

.support-card.is-clickable[b-1h769kewfx] {
    cursor: pointer;
}

.support-card.is-clickable:hover[b-1h769kewfx] {
    transform: scale(1.06);
    filter: drop-shadow(0 4px 8px rgba(12, 58, 88, 0.18));
}

.support-card.is-selected[b-1h769kewfx] {
    transform: scale(1.12);
}

.support-card.is-used[b-1h769kewfx] {
    opacity: 0.35;
    filter: grayscale(60%) brightness(0.85);
    cursor: not-allowed;
}

.support-card.is-disabled[b-1h769kewfx] {
    opacity: 0.45;
    filter: grayscale(45%) brightness(0.9);
    cursor: not-allowed;
    pointer-events: none;
}

.support-card.is-clickable:focus[b-1h769kewfx] {
    outline: none;
}

.support-card.is-clickable:focus-visible[b-1h769kewfx] {
    outline: none;
    transform: scale(1.08);
    filter: drop-shadow(0 0 5px rgba(26, 92, 122, 0.6));
}

.support-brush[b-1h769kewfx] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.support-role-corner[b-1h769kewfx] {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

.support-role-corner img[b-1h769kewfx] {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.support-role-tl[b-1h769kewfx] { top: 6px;    left: 6px; }
.support-role-br[b-1h769kewfx] { bottom: 6px; right: 6px; }

.support-card-pos[b-1h769kewfx]     { color: var(--support-positive); }
.support-card-neg[b-1h769kewfx]     { color: var(--support-negative); }
.support-card-neutral[b-1h769kewfx] { color: var(--support-neutral); }
/* _content/Municipality16.Shared/Components/Shared/ConnectivityBanner.razor.rz.scp.css */
.connectivity-banner[b-b1hmappt9y] {
    position: fixed;
    left: 50%;
    top: 1rem;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: min(92vw, 560px);
    transform: translateX(-50%);
    padding: 0.85rem 1rem;
    border-radius: var(--r-sm, 8px);
    background: var(--brand-coral, #e97852);
    color: #fff;
    box-shadow: var(--shadow-card-hover, 0 2px 8px rgba(12, 58, 88, 0.12));
    font-weight: 700;
    text-align: center;
}

.connectivity-banner--reconnecting[b-b1hmappt9y] {
    background: var(--state-warning, #ffc107);
    color: var(--text-primary, #0c3a58);
}

.connectivity-banner--offline[b-b1hmappt9y] {
    background: var(--state-danger, #dc3545);
}

.connectivity-banner--long-offline[b-b1hmappt9y] {
    background: var(--support-negative-deep, #b02a37);
}

.connectivity-overlay[b-b1hmappt9y] {
    position: fixed;
    inset: 0;
    z-index: 1190;
    display: grid;
    place-items: center;
    padding: var(--sp-4, 16px);
    background: rgba(12, 58, 88, 0.58);
}

.connectivity-overlay__panel[b-b1hmappt9y] {
    width: min(92vw, 420px);
    border-radius: var(--r-md, 12px);
    padding: var(--sp-6, 24px);
    background: var(--surface-card, #fff);
    color: var(--text-primary, #0c3a58);
    box-shadow: var(--shadow-card-hover, 0 2px 8px rgba(12, 58, 88, 0.12));
    text-align: center;
}

.connectivity-overlay__icon[b-b1hmappt9y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--sp-3, 12px);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-coral, #e97852) 18%, transparent);
    color: var(--brand-coral, #e97852);
    font-size: 1.35rem;
}

.connectivity-overlay__panel h2[b-b1hmappt9y] {
    margin: 0 0 var(--sp-2, 8px);
    font-size: 1.25rem;
    line-height: 1.2;
}

.connectivity-overlay__panel p[b-b1hmappt9y] {
    margin: 0 0 var(--sp-4, 16px);
    color: var(--text-secondary, #506070);
}

.connectivity-overlay__button[b-b1hmappt9y] {
    min-height: var(--tap-min, 48px);
    border: 0;
    border-radius: var(--r-sm, 8px);
    padding: 0.75rem 1rem;
    background: var(--brand-teal, #1a5c7a);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.connectivity-overlay__button:focus-visible[b-b1hmappt9y] {
    outline: none;
    box-shadow: var(--shadow-glow, 0 0 0 4px rgba(26, 92, 122, 0.35));
}
/* _content/Municipality16.Shared/Components/Shared/EndGameResultsDisplay.razor.rz.scp.css */
/* ================================
   END GAME RESULTS
   RW design language (Home / GameFieldRW)
   ================================ */

.end-game-results[b-l1041l9ojn] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Victory / Failure banner */
.result-banner[b-l1041l9ojn] {
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    color: white;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    position: relative;
    overflow: hidden;
}


.result-banner.victory[b-l1041l9ojn] {
    background: #28a745;
}

.result-banner.failure[b-l1041l9ojn] {
    background: #dc3545;
}

.banner-icon i[b-l1041l9ojn] {
    font-size: 3.2rem;
    display: inline-block;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.result-banner.victory .banner-icon i[b-l1041l9ojn] {
    animation: trophy-pop-b-l1041l9ojn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes trophy-pop-b-l1041l9ojn {
    0% { transform: scale(0) rotate(-15deg); }
    100% { transform: scale(1) rotate(0); }
}

.result-banner h1[b-l1041l9ojn] {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 6px;
    position: relative;
}

.result-banner h2[b-l1041l9ojn] {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    opacity: 0.95;
    position: relative;
}

.result-banner p[b-l1041l9ojn] {
    margin: 10px 0 0;
    font-size: 1.05rem;
    opacity: 0.9;
    position: relative;
}

/* Conditions */
.conditions-grid[b-l1041l9ojn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.condition-card[b-l1041l9ojn] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    border-left: 6px solid transparent;
}

.condition-card.met[b-l1041l9ojn] {
    border-left-color: #28a745;
}

.condition-card.unmet[b-l1041l9ojn] {
    border-left-color: #dc3545;
}

.condition-icon i[b-l1041l9ojn] {
    font-size: 1.8rem;
}

.condition-card.met .condition-icon i[b-l1041l9ojn] {
    color: #28a745;
}

.condition-card.unmet .condition-icon i[b-l1041l9ojn] {
    color: #dc3545;
}

.condition-info[b-l1041l9ojn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.condition-name[b-l1041l9ojn] {
    font-weight: 700;
    color: #0c3a58;
}

.condition-detail[b-l1041l9ojn] {
    font-size: 0.85rem;
    color: #6c757d;
}

/* Winner card */
.winner-card[b-l1041l9ojn] {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
    border: 2px solid rgba(255, 193, 7, 0.4);
}

.winner-header[b-l1041l9ojn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #ffc107;
    color: #4a3200;
}

.winner-header i[b-l1041l9ojn] {
    font-size: 1.3rem;
}

.winner-header h5[b-l1041l9ojn] {
    margin: 0;
    font-weight: 800;
    font-size: 1.15rem;
}

.winner-body[b-l1041l9ojn] {
    padding: 28px 20px;
    text-align: center;
}

.winner-tokens[b-l1041l9ojn] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
}

.winner-token[b-l1041l9ojn] {
    animation: trophy-pop-b-l1041l9ojn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.statue-image i[b-l1041l9ojn] {
    font-size: 7rem;
    color: #ffc107;
    filter: drop-shadow(0 2px 6px rgba(12, 58, 88, 0.25));
}

.statue-base[b-l1041l9ojn] {
    background: #ffc107;
    color: #4a3200;
    padding: 10px 22px;
    border-radius: 12px;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.statue-base h4[b-l1041l9ojn] {
    margin: 0;
    font-weight: 800;
    font-size: 1.2rem;
}

.shared-victory[b-l1041l9ojn] {
    margin: 18px 0 0;
    color: #6c757d;
}

/* Failure card */
.failure-card[b-l1041l9ojn] {
    background: #fff5f5;
    border: 2px solid rgba(220, 53, 69, 0.3);
    border-radius: 12px;
    padding: 26px 22px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.failure-card h4[b-l1041l9ojn] {
    color: #dc3545;
    font-weight: 800;
    margin: 0 0 8px;
}

.failure-card p[b-l1041l9ojn] {
    color: #b02a37;
    font-size: 1.05rem;
    margin: 0;
}

/* Rankings */
.rankings-card[b-l1041l9ojn] {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.rankings-header[b-l1041l9ojn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #0c3a58;
    color: white;
}

.rankings-header i[b-l1041l9ojn] {
    font-size: 1.2rem;
}

.rankings-header h5[b-l1041l9ojn] {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.rankings-body[b-l1041l9ojn] {
    padding: 8px 14px 14px;
    overflow-x: auto;
}

.rankings-table[b-l1041l9ojn] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.rankings-table thead th[b-l1041l9ojn] {
    color: #0c3a58;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    border: none;
    text-align: left;
}

.rankings-table tbody tr[b-l1041l9ojn] {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rankings-table tbody tr:hover[b-l1041l9ojn] {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.rankings-table tbody tr.rank-first[b-l1041l9ojn] {
    background: #fff8e1;
}

.rankings-table tbody td[b-l1041l9ojn] {
    padding: 12px;
    vertical-align: middle;
    border: none;
}

.rankings-table tbody td:first-child[b-l1041l9ojn] {
    border-radius: 12px 0 0 12px;
}

.rankings-table tbody td:last-child[b-l1041l9ojn] {
    border-radius: 0 12px 12px 0;
}

.rank-col[b-l1041l9ojn] {
    width: 64px;
    text-align: center;
}

.rank-badge[b-l1041l9ojn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.05rem;
    color: white;
}

.rank-badge.rank-1[b-l1041l9ojn] {
    background: #ffc107;
    color: #0c3a58;
}

.rank-badge.rank-2[b-l1041l9ojn] {
    background: #adb5bd;
    color: #0c3a58;
}

.rank-badge.rank-3[b-l1041l9ojn] {
    background: #cd7f32;
}

.rank-badge.rank-4[b-l1041l9ojn] {
    background: #0c3a58;
}

.player-name[b-l1041l9ojn] {
    font-weight: 700;
    color: #0c3a58;
}

.role-description[b-l1041l9ojn] {
    font-size: 0.85rem;
    color: #6c757d;
}

.prefs-col[b-l1041l9ojn] {
    text-align: center;
}

.prefs-icons[b-l1041l9ojn] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.pref-icon-img[b-l1041l9ojn] {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.pref-strikethrough[b-l1041l9ojn] {
    position: relative;
    display: inline-flex;
    opacity: 0.5;
}

.pref-strikethrough[b-l1041l9ojn]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -2px;
    right: -2px;
    height: 2px;
    background: #dc3545;
    transform: rotate(-45deg);
}

.score-col[b-l1041l9ojn] {
    text-align: right;
    width: 90px;
}

.score-pill[b-l1041l9ojn] {
    display: inline-block;
    background: #28a745;
    color: white;
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.05rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .winner-token[b-l1041l9ojn],
    .result-banner.victory .banner-icon i[b-l1041l9ojn] {
        animation: none;
    }

    .rankings-table tbody tr:hover[b-l1041l9ojn] {
        transform: none;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .end-game-results[b-l1041l9ojn] {
        padding: 10px;
        gap: 12px;
    }

    .result-banner[b-l1041l9ojn] {
        padding: 22px 16px;
        border-radius: 12px;
    }

    .result-banner h1[b-l1041l9ojn] {
        font-size: 1.5rem;
    }

    .result-banner h2[b-l1041l9ojn] {
        font-size: 1.1rem;
    }

    .banner-icon i[b-l1041l9ojn] {
        font-size: 2.4rem;
    }

    .statue-image i[b-l1041l9ojn] {
        font-size: 5rem;
    }

    .role-col[b-l1041l9ojn] {
        display: none;
    }

    .rankings-table thead th[b-l1041l9ojn],
    .rankings-table tbody td[b-l1041l9ojn] {
        padding: 8px;
    }

    .rank-badge[b-l1041l9ojn] {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }

    .pref-icon-img[b-l1041l9ojn] {
        width: 22px;
        height: 22px;
    }

    .score-pill[b-l1041l9ojn] {
        padding: 4px 12px;
        font-size: 0.95rem;
    }
}
/* _content/Municipality16.Shared/Components/Shared/FeedbackHost.razor.rz.scp.css */
/* Web mute UI is disabled for now; MAUI keeps its own sound controls. */
/* _content/Municipality16.Shared/Components/Shared/PersonalScoreCard.razor.rz.scp.css */
/* ================================
   PERSONAL SCORE CARD
   RW design language (Home / GameFieldRW)
   ================================ */

.personal-score-card[b-32l7osg93e] {
    padding: 16px;
}

.score-card-rw[b-32l7osg93e] {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(12, 58, 88, 0.12);
}

.score-card-header[b-32l7osg93e] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #0c3a58;
    color: white;
}

.score-card-header i[b-32l7osg93e] {
    font-size: 1.2rem;
}

.score-card-header h5[b-32l7osg93e] {
    margin: 0;
    font-weight: 700;
    font-size: 1.15rem;
}

.score-rows[b-32l7osg93e] {
    padding: 8px 0;
}

.score-row[b-32l7osg93e] {
    display: grid;
    grid-template-columns: 90px 80px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f2f4;
    transition: background 0.2s ease;
}

.score-row:last-child[b-32l7osg93e] {
    border-bottom: none;
}

.score-row:hover[b-32l7osg93e] {
    background: #f8f9fa;
}

.row-icon[b-32l7osg93e] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.op-badge[b-32l7osg93e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.op-plus[b-32l7osg93e] {
    background: #28a745;
}

.op-minus[b-32l7osg93e] {
    background: #dc3545;
}

.op-equals[b-32l7osg93e] {
    background: #0c3a58;
}

.row-glyph[b-32l7osg93e] {
    font-size: 1.6rem;
    color: #1a5c7a;
}

.glyph-gold[b-32l7osg93e] {
    color: #ffc107;
}

.area-icon[b-32l7osg93e] {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.crossed-out[b-32l7osg93e] {
    position: relative;
    display: inline-flex;
    opacity: 0.6;
}

.crossed-out[b-32l7osg93e]::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    height: 3px;
    background-color: #dc3545;
    transform: rotate(-45deg);
    border-radius: 2px;
}

.row-value[b-32l7osg93e] {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: #0c3a58;
}

.row-value.positive[b-32l7osg93e] {
    color: #28a745;
}

.row-value.negative[b-32l7osg93e] {
    color: #dc3545;
}

.row-label[b-32l7osg93e] {
    color: #495057;
    font-weight: 500;
    font-size: 1rem;
}

/* Final score row */
.total-row[b-32l7osg93e] {
    margin-top: 4px;
    background: rgba(40, 167, 69, 0.08);
    border-top: 2px solid rgba(40, 167, 69, 0.25);
    border-bottom: none;
}

.total-row:hover[b-32l7osg93e] {
    background: rgba(40, 167, 69, 0.12);
}

.total-value[b-32l7osg93e] {
    font-size: 1.7rem;
    color: #0c3a58;
}

.total-label[b-32l7osg93e] {
    font-weight: 700;
    color: #0c3a58;
    font-size: 1.05rem;
}

/* Mobile */
@media (max-width: 480px) {
    .personal-score-card[b-32l7osg93e] {
        padding: 10px;
    }

    .score-row[b-32l7osg93e] {
        grid-template-columns: 70px 60px 1fr;
        gap: 8px;
        padding: 10px 12px;
    }

    .op-badge[b-32l7osg93e] {
        width: 22px;
        height: 22px;
        font-size: 0.9rem;
    }

    .row-glyph[b-32l7osg93e] {
        font-size: 1.3rem;
    }

    .area-icon[b-32l7osg93e] {
        width: 28px;
        height: 28px;
    }

    .row-value[b-32l7osg93e] {
        font-size: 1.05rem;
    }

    .row-label[b-32l7osg93e] {
        font-size: 0.85rem;
    }

    .total-value[b-32l7osg93e] {
        font-size: 1.4rem;
    }
}
/* _content/Municipality16.Shared/Components/Shared/PwaInstallButton.razor.rz.scp.css */
.pwa-install-button[b-t8mvfr0b2g] {
    position: fixed;
    right: clamp(1rem, 2vw, 1.5rem);
    bottom: clamp(1rem, 2vw, 1.5rem);
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: var(--r-sm, 8px);
    background: var(--brand-lime, #28a745);
    color: var(--brand-navy, #0c3a58);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(12, 58, 88, 0.12));
    font-weight: 800;
    letter-spacing: 0;
}

.pwa-install-button:hover[b-t8mvfr0b2g] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover, 0 2px 8px rgba(12, 58, 88, 0.12));
}

@media (max-width: 640px) {
    .pwa-install-button[b-t8mvfr0b2g] {
        left: 1rem;
        right: 1rem;
        justify-content: center;
    }
}
/* _content/Municipality16.Shared/Components/Shared/SkeletonCard.razor.rz.scp.css */
.skeleton-card-shell[b-acmch2c1m4] {
    display: inline-block;
    overflow: hidden;
}