/* ============================================================
   game.css — Моя игра (дополняет calendar.css)
   ============================================================ */

/* ── Page header ── */
.game-header {
    padding: 32px 0 20px;
    text-align: center;
}
.game-title {
    font-family: "Inter", sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    margin: 0 0 6px;
}
.game-subtitle {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.35);
    margin: 0;
}

/* ── Section divider ── */
.game-section-label {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    padding: 20px 4px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 4px;
}

/* ── Completed quest tints ── */
.cal-card--done-success {
    background: rgba(60, 180, 90, 0.07);
    border-color: rgba(80, 200, 100, 0.18);
}
.cal-card--done-success .cal-card__name {
    color: rgba(160,240,170,0.9);
}
.cal-card--done-fail {
    background: rgba(190, 50, 50, 0.07);
    border-color: rgba(210, 70, 70, 0.18);
}
.cal-card--done-fail .cal-card__name {
    color: rgba(240,140,140,0.9);
}

/* ── Result badge on completed cards ── */
.game-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 8px;
}
.game-result-badge--success {
    background: rgba(60,200,90,0.15);
    color: rgba(120,230,140,0.9);
    border: 1px solid rgba(80,200,100,0.25);
}
.game-result-badge--fail {
    background: rgba(200,60,60,0.15);
    color: rgba(230,120,120,0.9);
    border: 1px solid rgba(200,70,70,0.25);
}

/* ── Finish quest button ── */
.cal-btn--finish {
    background: rgba(180,130,0,0.18);
    border: 1px solid rgba(220,170,0,0.3);
    color: rgba(255,210,80,0.9);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.cal-btn--finish:hover {
    background: rgba(180,130,0,0.3);
    border-color: rgba(220,170,0,0.5);
}

/* ── Cancel registration button ── */
.cal-btn--cancel {
    background: rgba(200,60,60,0.12);
    border: 1px solid rgba(200,60,60,0.25);
    color: rgba(230,120,120,0.9);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.cal-btn--cancel:hover {
    background: rgba(200,60,60,0.25);
    border-color: rgba(200,60,60,0.45);
}

/* ── Result / Cancel / Kick popups ── */
.cal-popup--sm {
    max-width: 420px;
}

.cal-popup__title {
    text-align: center !important;
    width: 100%;
}

.game-result-quest-name {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    text-align: center;
    margin: 0 0 24px;
}
.game-result-btns {
    display: flex;
    gap: 12px;
    flex-direction: column;
}
.game-result-btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: "Inter", sans-serif;
}
.game-result-btn:hover { opacity: 0.85; }
.game-result-btn--success {
    background: rgba(50,180,80,0.2);
    border-color: rgba(80,200,100,0.35);
    color: rgba(140,230,150,0.95);
}
.game-result-btn--fail {
    background: rgba(180,50,50,0.2);
    border-color: rgba(200,70,70,0.35);
    color: rgba(230,130,130,0.95);
}

/* ── Empty state ── */
.game-empty {
    text-align: center;
    padding: 60px 20px;
    font-family: "Inter", sans-serif;
    color: rgba(255,255,255,0.25);
    font-size: 15px;
}
.game-empty span {
    display: block;
    font-size: 36px;
    margin-bottom: 12px;
}

/* ── Participants ── */
.game-participants {
    grid-column: 1 / -1;
    width: 100%;
    margin: 12px 0 0;
    display: contents;
}
.game-participants__label {
    grid-column: 1 / -1;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    margin: 12px 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.game-participants__count {
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
}

/* Participant row — расширяет cal-card__master */
.game-participant-row {
    position: relative;
}
.game-participant-row .cal-card__master-info {
    flex: 1;
    min-width: 0;
}
.game-participant-row .game-kick-btn {
    margin-left: 12px;
    flex-shrink: 0;
}

/* ── Kick button ── */
.game-kick-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: rgba(200,60,60,0.1);
    border: 1px solid rgba(200,60,60,0.2);
    color: rgba(230,100,100,0.7);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    margin-left: auto;
}
.game-kick-btn:hover {
    background: rgba(200,60,60,0.25);
    color: rgba(230,100,100,1);
    border-color: rgba(200,60,60,0.4);
}

@media (max-width: 640px) {
    .game-title { font-size: 22px; }
    .cal-popup--sm { max-width: 94vw; }
}

.cal-card__profile-link {
    color: inherit;
    text-decoration: none;
}

.cal-card__profile-link:hover {
    text-decoration: underline;
}