/**
 * Quests: the list, the single citizen window, reward chips. Load order is significant: keep this file's <link> position in index.html.
 */

.modal-panel--quest {
    max-width: min(620px, 92vw);
}

.quest-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    width: 100%;
    padding-right: 6px;
}

.quest {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--card);
    border: 3px solid var(--card-edge);
}

.quest.is-claimed {
    opacity: 0.6;
}

.quest__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quest__tick {
    font-size: 20px;
    line-height: 1;
}

.quest__tick.is-done {
    color: var(--ok);
}

.quest__portrait {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--edge);
    flex-shrink: 0;
}

.quest__name {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-muted);
}

.quest__message {
    font-size: 15px;
    color: var(--text);
    margin-top: 6px;
}

.quest__objective {
    font-size: 14px;
    color: var(--text-dim);
    margin-top: 6px;
}

.quest__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.quest__reward {
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--well);
    border: 2px solid var(--edge);
    font-size: 15px;
}

.quest__claim {
    padding: 8px 20px;
    border-radius: 8px;
    border: 3px solid var(--cta-edge);
    background: linear-gradient(var(--cta-top), var(--cta-bottom));
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.quest__claim:disabled {
    filter: grayscale(0.7);
    opacity: 0.55;
    cursor: default;
}

.quest-empty {
    color: var(--text-muted);
    opacity: 0.8;
}


/* Quest single */
.quest-window {
    position: relative;
    width: 100%;
}

.quest-list {
    overflow: visible;
}

.quest--single {
    position: relative;
    padding-top: 28px;
}

.quest__portrait-wrap {
    position: absolute;
    top: -28px;
    left: -28px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid var(--quest-portrait-ring, var(--edge));
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    overflow: hidden;
    background: var(--well);
    z-index: 2;
}

.quest__portrait--large {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.quest__portrait--fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    background: var(--panel-top);
}

.quest__plaque {
    margin: 0 auto 4px;
    padding: 6px 18px 10px;
    min-width: 180px;
    max-width: 260px;
    text-align: center;
    background: var(--quest-plaque-art, var(--title-tab-art, none)) center / 100% 100% no-repeat;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.quest__plaque-text {
    display: block;
    line-height: 1.1;
}

.quest__role {
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 10px;
}

/* Rewards row: resource octagons + lock + thumbs + slot */
.quest__footer--single {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.quest__rewards {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.quest__chip--resource {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    position: relative;
    background: var(--levelup-chip-art, none) center / 100% 100% no-repeat;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.quest__chip-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
}

.quest__chip-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.quest__chip-fallback {
    font-size: 10px;
    font-weight: 700;
    color: var(--text);
}

.quest__chip-qty {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 10px;
    background: #2ecc71;
    border: 1.5px solid #fff;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
}

.quest__chip-label {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    white-space: nowrap;
    color: var(--text-dim);
}

.quest__unlock-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--well);
    border: 2px solid var(--edge);
}

.quest__lock {
    width: 22px;
    height: 22px;
    flex: none;
    background: var(--lock-art, none) center / contain no-repeat;
    display: block;
}

.quest__thumbs {
    display: flex;
    gap: 4px;
}

.quest__thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--card-edge);
    display: grid;
    place-items: center;
}

.quest__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quest__thumb-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.quest__more {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    padding: 0 4px;
}

.quest__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.quest__nav-btn {
    width: 34px;
    height: 37px;
    border: 0;
    border-radius: 0;
    background: var(--arrow-art, none) center / 100% 100% no-repeat;
    color: var(--text);
    font-size: var(--chrome-glyph-size, 18px);
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.quest__nav-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.quest__counter {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
}

.quest__claim--blue {
    align-self: center;
    min-width: 132px;
    width: 132px;
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: var(--btn-blue-art, linear-gradient(var(--cta-top), var(--cta-bottom))) center / 100% 100% no-repeat;
    border-image: none;
    box-shadow: none;
    box-sizing: border-box;
    color: #fff;
    font-size: 15px;
}