/* Shared control tokens and generic control chrome used across screens. */

:root {
    --control-border-soft: rgba(255, 255, 255, 0.08);
    --control-border: rgba(255, 255, 255, 0.12);
    --control-border-strong: rgba(255, 255, 255, 0.14);
    --control-bg-soft: rgba(255, 255, 255, 0.04);
    --control-bg: rgba(255, 255, 255, 0.06);
    --control-bg-strong: rgba(255, 255, 255, 0.08);
    --control-bg-emphasis: rgba(255, 255, 255, 0.12);
    --control-input-bg: rgba(10, 13, 18, 0.78);
    --control-selected-border: rgb(var(--accent-light-rgb) / 0.82);
    --control-selected-bg: rgb(var(--accent-rgb) / 0.24);
}

select,
input {
    min-height: 44px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--control-input-bg);
    color: var(--text);
    padding: 0 12px;
}

.primary,
.secondary,
.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    text-decoration: none;
}

.primary {
    border: 1px solid rgb(var(--accent-light-rgb) / 0.34);
    background: var(--accent);
}

.secondary {
    border: 1px solid var(--control-border);
    background: var(--control-bg-strong);
}

.ghost-button {
    border: 1px solid var(--control-border);
    background: rgba(255, 255, 255, 0.055);
}

.control-glyph {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--control-glyph-bg, rgba(0, 0, 0, 0.24));
    color: var(--warn);
    font-weight: 900;
    line-height: 1;
}

.control-glyph img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    display: block;
}

.control-glyph-xs {
    width: 26px;
    height: 26px;
}

.control-glyph-sm {
    width: 30px;
    height: 30px;
}

.control-glyph-md {
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
}

.control-glyph-lg {
    width: clamp(54px, 14vw, 72px);
    height: clamp(54px, 14vw, 72px);
    font-size: clamp(1.85rem, 6vw, 2.4rem);
}

.control-glyph-xl {
    width: clamp(56px, 12vw, 76px);
    height: clamp(56px, 12vw, 76px);
    font-size: clamp(2rem, 6vw, 2.6rem);
}

.board-size-choice button,
.game-speed-choice button,
.tool-button {
    border: 1px solid var(--control-border);
    background: var(--control-bg-strong);
}

.board-size-choice button.selected,
.game-speed-choice button.selected,
.local-play-choice button.selected,
.tool-button.selected {
    border: 1px solid var(--control-selected-border);
    background: var(--control-selected-bg);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}