/* Tür Tahmini */

.guess-stat-tile {
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 88%, var(--primary-color, #2aa8c9) 12%);
    border-radius: var(--site-home-radius, var(--site-box-radius, 4px));
    padding: .65rem .5rem;
}

.guess-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-color, #2aa8c9);
}

.guess-start {
    margin-top: .25rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 75%, var(--primary-color, #2aa8c9) 25%);
    border-radius: var(--site-home-radius, var(--site-box-radius, 4px));
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 92%, var(--primary-color, #2aa8c9) 8%);
}

.guess-start__row {
    display: grid;
    gap: .85rem 1rem;
    align-items: end;
}

.guess-start__filter {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.guess-start__label {
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}

.guess-group-select {
    width: 100%;
    min-width: 0;
    max-width: 14rem;
}

.guess-start__modes {
    align-items: center;
}

.guess-start__hint {
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 70%, transparent);
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 767.98px) {
    .guess-page .guess-stats-row {
        --bs-gutter-x: .5rem;
        --bs-gutter-y: .5rem;
    }

    .guess-page .guess-stat-tile {
        padding: .5rem .35rem;
    }

    .guess-page .guess-stat-value {
        font-size: 1.1rem;
    }

    .guess-page .guess-stat-tile small {
        font-size: .7rem;
    }

    .guess-start {
        padding: .75rem;
    }

    .guess-start__row {
        gap: .65rem;
    }

    .guess-group-select {
        max-width: none;
    }

    .guess-page .guess-start__modes.home-toolbar-cluster {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: .5rem !important;
        width: 100%;
        align-items: stretch;
    }

    .guess-page .guess-start__modes .btn-fantasy {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .guess-page .guess-start__modes .btn-fantasy > span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .guess-start__hint {
        margin-top: .65rem;
        padding-top: .55rem;
        font-size: .78rem;
    }

    .guess-play-body {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
        padding-bottom: .75rem !important;
    }

    .guess-stage {
        gap: .75rem;
    }

    .guess-stage__main {
        gap: .65rem;
    }

    .guess-image-wrap {
        aspect-ratio: 16 / 10;
    }

    .guess-hints {
        padding: .65rem;
    }

    .guess-hints__head {
        margin-bottom: .45rem;
    }

    .guess-hints__list {
        gap: .4rem;
    }

    .guess-hint-slot {
        padding: .4rem .45rem;
        gap: .45rem;
    }

    .guess-options {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

    .guess-option {
        min-height: 2.5rem;
        padding: .4rem .45rem .4rem .35rem;
        gap: .4rem;
    }

    .guess-option__key {
        width: 1.6rem;
        height: 1.6rem;
        font-size: .75rem;
    }

    .guess-option__label {
        font-size: .86rem;
    }

    .guess-prompt {
        font-size: .88rem;
    }

    .guess-feedback {
        padding: .65rem .75rem;
        font-size: .9rem;
    }
}

@media (min-width: 768px) {
    .guess-start__row {
        grid-template-columns: minmax(9.5rem, 12rem) minmax(0, 1fr);
        align-items: end;
    }
}

.guess-board__row {
    padding: .35rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 70%, transparent);
}

.guess-board__row:last-child {
    border-bottom: 0;
}

.guess-board__user {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.guess-board__user .forum-username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

/* —— Soru ekranı —— */
.guess-play-body {
    max-width: 960px;
    margin-inline: auto;
}

.guess-progress {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
    letter-spacing: .02em;
}

.guess-progress-track {
    height: .35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-border-color, #dee2e6) 70%, transparent);
    overflow: hidden;
}

.guess-progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--primary-color, #2aa8c9);
    transition: width .25s ease;
}

.guess-stage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guess-stage__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
}

.guess-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--site-home-radius, var(--site-box-radius, 4px));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 75%, var(--primary-color, #2aa8c9) 25%);
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 80%, #000 20%);
}

.guess-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.guess-prompt {
    text-align: center;
    font-weight: 700;
    font-size: .95rem;
    color: var(--bs-secondary-color, #6c757d);
    letter-spacing: .02em;
}

.guess-hints {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: .85rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 70%, var(--primary-color, #2aa8c9) 30%);
    border-radius: var(--site-home-radius, var(--site-box-radius, 4px));
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 92%, var(--primary-color, #2aa8c9) 8%);
}

.guess-hints__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
    flex: 0 0 auto;
}

.guess-hints__title {
    font-weight: 700;
    font-size: .9rem;
}

.guess-hints__budget {
    font-size: .82rem;
    color: var(--bs-secondary-color, #6c757d);
}

.guess-hints__budget strong {
    color: var(--primary-color, #2aa8c9);
    font-variant-numeric: tabular-nums;
}

.guess-hints__list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1 1 auto;
}

.guess-hint-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .45rem .55rem;
    border-radius: var(--site-home-radius, var(--site-box-radius, 4px));
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 80%, transparent);
    background: var(--bs-body-bg, #fff);
}

.guess-hint-slot.is-unlocked {
    border-color: color-mix(in srgb, var(--primary-color, #2aa8c9) 45%, transparent);
}

.guess-hint-slot__meta {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.guess-hint-slot__label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color, #6c757d);
}

.guess-hint-slot__value {
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.guess-hint-slot:not(.is-unlocked) .guess-hint-slot__value {
    font-style: italic;
    font-weight: 500;
    opacity: .7;
}

.guess-hint-slot__ok {
    flex: 0 0 auto;
    color: var(--primary-color, #2aa8c9);
    opacity: .85;
}

.guess-hint-slot__action {
    flex: 0 0 auto;
}

.guess-hints__note {
    margin-top: .55rem;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
    flex: 0 0 auto;
}

.guess-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.guess-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 2.75rem;
    min-width: 0;
    padding: .45rem .55rem .45rem .4rem;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 65%, var(--primary-color, #2aa8c9) 35%);
    border-radius: var(--site-home-radius, var(--site-box-radius, 4px));
    background: var(--bs-body-bg, #fff);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.guess-option:hover:not(:disabled),
.guess-option:focus-visible:not(:disabled) {
    border-color: var(--primary-color, #2aa8c9);
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 88%, var(--primary-color, #2aa8c9) 12%);
    outline: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color, #2aa8c9) 35%, transparent);
}

.guess-option:disabled {
    cursor: default;
    opacity: 1;
}

.guess-option__key {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: calc(var(--site-home-radius, var(--site-box-radius, 4px)) - 1px);
    background: var(--primary-color, #2aa8c9);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.guess-option__label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    line-height: 1.3;
}

.guess-option.is-correct {
    border-color: #198754;
    background: color-mix(in srgb, #198754 14%, var(--bs-body-bg, #fff));
}

.guess-option.is-correct .guess-option__key {
    background: #198754;
}

.guess-option.is-wrong {
    border-color: #dc3545;
    background: color-mix(in srgb, #dc3545 12%, var(--bs-body-bg, #fff));
}

.guess-option.is-wrong .guess-option__key {
    background: #dc3545;
}

.guess-option:disabled:not(.is-correct):not(.is-wrong) {
    opacity: .55;
}

.guess-feedback {
    padding: .85rem 1rem;
    border-radius: var(--site-home-radius, var(--site-box-radius, 4px));
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 70%, transparent);
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 90%, var(--primary-color, #2aa8c9) 10%);
    text-align: center;
    line-height: 1.45;
}

.guess-feedback.is-correct {
    border-color: color-mix(in srgb, #198754 55%, transparent);
    background: color-mix(in srgb, #198754 12%, var(--bs-body-bg, #fff));
}

.guess-feedback.is-wrong {
    border-color: color-mix(in srgb, #dc3545 50%, transparent);
    background: color-mix(in srgb, #dc3545 10%, var(--bs-body-bg, #fff));
}

.guess-play-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    padding-top: .25rem;
    border-top: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 70%, transparent);
}

.guess-play-hint {
    font-size: .78rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
}

.guess-finish-score {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--primary-color, #2aa8c9);
    line-height: 1.1;
}

@media (min-width: 768px) {
    .guess-stage__main {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 1.1rem;
    }

    .guess-image-wrap {
        height: 100%;
        min-height: 280px;
        aspect-ratio: auto;
    }

    .guess-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .guess-option {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: .45rem;
        min-height: 5.25rem;
        padding: .65rem .7rem;
    }

    .guess-option__label {
        font-size: .92rem;
    }
}