/* Farkle Bank + Settings pass.
   Keep the approved game/mobile shell intact and only reshape Farkle controls. */

.game-tab-content[data-game-component="farkle-scoring"] .farkle-status {
    order: 2;
}

.game-tab-content[data-game-component="farkle-scoring"] .farkle-controls {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.game-tab-content[data-game-component="farkle-scoring"] .farkle-bank-button {
    width: 100%;
    min-height: 52px;
    font-size: clamp(15px, 3.8vw, 18px);
}

.game-tab-content[data-game-component="farkle-scoring"] .farkle-new-game-button {
    align-self: center;
    width: min(46%, 190px);
    min-height: 36px;
    font-size: clamp(11px, 2.6vw, 13px);
}

.game-tab-content[data-game-component="settings"][data-game-id="farkle"] {
    padding: clamp(12px, 3vw, 18px);
}

.farkle-settings-panel {
    width: 100%;
    display: grid;
    gap: 12px;
    padding: clamp(14px, 3.5vw, 20px);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
}

.farkle-settings-title {
    margin: 0;
    color: var(--text);
    font-size: clamp(18px, 4.6vw, 22px);
    line-height: 1.1;
    font-weight: 760;
}

.farkle-settings-hint {
    margin: 0;
    color: var(--muted);
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.4;
}

.farkle-setting-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.farkle-setting-option {
    min-width: 0;
    min-height: 46px;
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 720;
    cursor: pointer;
}

.farkle-setting-option.is-selected {
    border-color: color-mix(in srgb, var(--pink) 55%, var(--line));
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--pink) 20%, transparent), transparent 78%),
        var(--bg);
}

.farkle-setting-option:active {
    transform: scale(.98);
}

@media (max-width: 360px) {
    .farkle-setting-options {
        gap: 6px;
    }

    .farkle-setting-option {
        min-height: 44px;
        padding-inline: 4px;
    }
}