/* ==========================================================================
   Game control panel (Mines, Towers, ...): dark segmented pickers, amount box with Clear / 1/2 / 2X / Max
   chips, info box and a solid "Play" block. Colours come from the active theme (--accent), so the panel always
   matches the site. Loaded last, so it only overrides what it has to.
   ========================================================================== */
.game-controls {
    --gc-radius: 12px;
    --gc-well: color-mix(in srgb, var(--bg) 78%, var(--panel));      /* dark inset behind pickers */
    --gc-well-line: color-mix(in srgb, var(--line2) 55%, transparent);
    --gc-pick: color-mix(in srgb, var(--accent) 16%, var(--panel2)); /* selected option */
    --gc-pick-line: color-mix(in srgb, var(--accent) 55%, transparent);
    gap: 18px;
}

/* ---- section labels ---- */
.game-controls .field { gap: 8px; }
.game-controls .field-label {
    color: var(--dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.game-controls .field-label .muted,
.game-controls .field-label .muted b { color: var(--dim); letter-spacing: .06em; font-weight: 600; }

/* ---- Manual / Auto ---- */
.game-controls .mode-tabs {
    gap: 4px;
    padding: 4px;
    border-radius: var(--gc-radius);
    background: var(--gc-well);
    box-shadow: inset 0 0 0 1px var(--gc-well-line);
}
.game-controls .mode-tabs button {
    height: 40px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .15s, color .15s;
}
.game-controls .mode-tabs button:hover:not(:disabled):not(.on) { color: var(--text); }
.game-controls .mode-tabs button.on {
    background: var(--gc-pick);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--gc-pick-line);
}
.game-controls .mode-tabs button.on .ic { color: var(--accent2); }

/* ---- amount box ---- */
.game-controls .amount-input {
    height: 52px;
    padding: 0 8px 0 12px;
    gap: 4px;
    border-radius: var(--gc-radius);
    background: var(--gc-well);
    border: 1px solid var(--gc-well-line);
}
.game-controls .amount-input:focus-within { border-color: var(--accent); }
.game-controls .amount-input input { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.game-controls .amount-input button {
    height: 32px;
    min-width: 0;
    padding: 0 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel2) 70%, var(--bg));
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: background .15s, color .15s;
}
.game-controls .amount-input input { min-width: 64px; }
.game-controls .amount-input button:hover:not(:disabled) { background: var(--panel3); color: var(--text); }
.game-controls .amount-input button.clr { color: var(--dim); }
@media (max-width: 420px) {
    .game-controls .amount-input button { padding: 0 6px; font-size: 10.5px; }
}

/* ---- pickers: plain .seg, Mines "1 3 5 10 1-24" and Towers tiles / traps ---- */
.game-controls .seg,
.game-controls .mines-seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: var(--gc-radius);
    background: var(--gc-well);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--gc-well-line);
}
.game-controls .mines-seg { grid-template-columns: repeat(4, 1fr) 1.15fr; grid-auto-flow: row; }
.game-controls .seg button,
.game-controls .mines-seg button {
    height: 42px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
    transition: background .15s, color .15s;
}
.game-controls .seg button:hover:not(:disabled):not(.on),
.game-controls .mines-seg button:hover:not(.on) { color: var(--text); }
.game-controls .seg button.on,
.game-controls .mines-seg button.on {
    background: var(--gc-pick);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--gc-pick-line);
}
.game-controls .seg button:disabled:not(.on) { opacity: .32; cursor: not-allowed; }
.game-controls .seg button:disabled.on { opacity: .75; }
/* the "1-24" custom chip sits behind a thin divider, like the reference */
.game-controls .mines-seg button[data-n="custom"] {
    position: relative;
    border-radius: 9px;
    font-size: 14px;
    border-left: 0;
}
.game-controls .mines-seg button[data-n="custom"]::before {
    content: '';
    position: absolute;
    left: -3px; top: 8px; bottom: 8px;
    width: 1px;
    background: var(--gc-well-line);
}

/* ---- info box (Towers) ---- */
.game-controls .tw-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding: 16px;
    border-radius: var(--gc-radius);
    background: var(--gc-well);
    box-shadow: inset 0 0 0 1px var(--gc-well-line);
}
.game-controls .tw-info > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.game-controls .tw-info .wide { grid-column: 1 / -1; }
.game-controls .tw-info .wide + div,
.game-controls .tw-info .wide ~ div:not(.wide) { grid-column: auto; }
.game-controls .tw-info span {
    color: var(--dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.game-controls .tw-info b { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.game-controls .tw-info b.pos { color: var(--green); }
.game-controls .tw-info small { color: var(--dim); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* ---- the Play block: solid accent, pressable, flat like the reference ---- */
.game-controls > .btn.primary.lg,
.game-controls .btn.primary.lg.block {
    height: 56px;
    border-radius: var(--gc-radius);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
    color: var(--on-accent);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    --edge: var(--accent-d);
    box-shadow: inset 0 -4px 0 var(--edge), inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent);
    transition: transform .08s, filter .15s, box-shadow .08s;
}
.game-controls > .btn.primary.lg:hover:not(:disabled) { filter: brightness(1.07); }
.game-controls > .btn.primary.lg:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--edge), 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent); }
.game-controls > .btn.primary.lg:disabled { filter: saturate(.5) brightness(.8); box-shadow: inset 0 -4px 0 var(--edge); cursor: not-allowed; }
/* Cash out stays green so a running game is obvious */
.game-controls > .btn.lg.green { --edge: var(--green-d); }