/* player-diplomacy-panel.css
   Sits inside a Player Info Card. Follows the established system: dark surface,
   gold rationed to the primary action and the allied state, everything else
   muted. Tier colours are used sparingly as small dots so three alliance levels
   stay distinguishable without adding loud colour to the card. */

.player-card__diplomacy {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line, #2a241c);
}

.diplo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 16px;
    font-size: 12.5px;
}

/* ---- status line ---- */
.diplo__status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: Georgia, serif;
}

.diplo__status--allied {
    color: var(--gold, #d8b25e);
}

.diplo__status--third-party {
    color: var(--ink-dim, #9a9082);
}

.diplo__tier {
    font-weight: 600;
    letter-spacing: .01em;
}

.diplo__with {
    color: var(--ink-faint, #6b6355);
    font-weight: 400;
}

/* tier dots — the only place tier colour appears */
.diplo__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
}

.diplo__dot--peace {
    background: #7fa88c;
}
/* calm green  */
.diplo__dot--military {
    background: #c9a14e;
}
/* gold        */
.diplo__dot--strategic {
    background: #8fa9d0;
}
/* cold blue   */
.diplo__dot--none {
    background: var(--ink-faint, #6b6355);
}

/* ---- incoming offer ---- */
.diplo__offer {
    background: rgba(216, 178, 94, .07);
    border: 1px solid rgba(216, 178, 94, .25);
    border-radius: 8px;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.diplo__offer-head {
    color: var(--ink, #efe7d8);
}

    .diplo__offer-head strong {
        color: var(--gold, #d8b25e);
    }

.diplo__terms {
    margin: 0;
    padding-left: 16px;
    color: var(--ink-dim, #9a9082);
    font-size: 12px;
    line-height: 1.5;
}

.diplo__offer-actions {
    display: flex;
    gap: 7px;
}

/* ---- outgoing pending ---- */
.diplo__pending {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--ink-faint, #6b6355);
    font-style: italic;
}

.diplo__pending-label {
    flex: 1;
}

/* ---- actions ---- */
.diplo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    position: relative;
}

.diplo__btn {
    background: transparent;
    border: 1px solid var(--line, #2a241c);
    color: var(--ink-dim, #9a9082);
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease, filter .14s ease;
}

    .diplo__btn:hover:not(:disabled) {
        color: var(--ink, #efe7d8);
        border-color: #3a3226;
    }

    .diplo__btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.diplo__btn--primary {
    background: var(--gold, #d8b25e);
    border-color: var(--gold, #d8b25e);
    color: #211907;
    font-weight: 600;
}

    .diplo__btn--primary:hover:not(:disabled) {
        filter: brightness(1.07);
        color: #211907;
    }

.diplo__btn--danger {
    color: #c98d8d;
    border-color: rgba(201, 141, 141, .35);
}

    .diplo__btn--danger:hover:not(:disabled) {
        color: #e0a5a5;
        border-color: rgba(201, 141, 141, .6);
    }

.diplo__btn--quiet {
    color: var(--ink-faint, #6b6355);
    border-color: transparent;
}

    .diplo__btn--quiet:hover:not(:disabled) {
        color: var(--ink-dim, #9a9082);
    }

.diplo__blocked {
    color: var(--ink-faint, #6b6355);
    font-size: 11.5px;
    font-style: italic;
}

/* ---- tier picker ---- */
.diplo__picker {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 240px;
    background: var(--panel-2, #1c1813);
    border: 1px solid var(--line, #2a241c);
    border-radius: 9px;
    padding: 5px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.diplo__tier-option {
    display: grid;
    grid-template-columns: 10px 1fr;
    grid-template-areas: "dot name" ".  blurb";
    gap: 2px 8px;
    align-items: center;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 8px 9px;
    cursor: pointer;
}

    .diplo__tier-option:hover:not(.is-disabled) {
        background: rgba(216, 178, 94, .08);
    }

    .diplo__tier-option.is-disabled {
        opacity: .38;
        cursor: not-allowed;
    }

    .diplo__tier-option .diplo__dot {
        grid-area: dot;
    }

.diplo__tier-name {
    grid-area: name;
    color: var(--ink, #efe7d8);
    font-size: 12.5px;
    font-weight: 600;
}

.diplo__tier-blurb {
    grid-area: blurb;
    color: var(--ink-faint, #6b6355);
    font-size: 11.5px;
}

/* ---- break confirmation ---- */
.diplo__confirm {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.diplo__confirm-text {
    color: #c98d8d;
    font-size: 12px;
}