/* Global tokens, reset rules, typography, and shared controls. */

:root {
    --background: #11141a;
    --panel: #1a2029;
    --panel-strong: #222a35;
    --line: rgba(255, 255, 255, 0.1);
    --accent: #3da77a;
    --accent-light: #7dd1ad;
    --accent-rgb: 61 167 122;
    --accent-light-rgb: 125 209 173;
    --player-one-rgb: 125 209 173;
    --player-one-strong-rgb: 61 167 122;
    --player-two-rgb: 76 145 214;
    --player-two-light-rgb: 122 181 235;
    --neutral-zone-rgb: 148 158 168;
    --danger-rgb: 240 138 114;
    --danger-strong-rgb: 198 78 78;
    --warn: #d6a84c;
    --text: #f4f7f2;
    --muted: #a6b0ad;
    --shadow: rgba(0, 0, 0, 0.42);
    --transition-fast: 120ms ease-out;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    width: 100%;
    overflow-x: hidden;
    overscroll-behavior: none;
}

body {
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgb(var(--accent-rgb) / 0.2), transparent 42rem),
        linear-gradient(180deg, #12161d 0%, #151a22 48%, #0c0f14 100%);
    background-size: 40px 40px, 40px 40px, auto, auto;
    color: var(--text);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    touch-action: manipulation;
}

h1:focus {
    outline: none;
}

a {
    color: inherit;
}

button,
select,
input {
    font: inherit;
}

button,
.primary,
.secondary,
.ghost-button {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
    transition: border-color var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

button:hover:not(:disabled),
button:focus-visible:not(:disabled),
.primary:hover,
.primary:focus-visible,
.secondary:hover,
.secondary:focus-visible,
.ghost-button:hover,
.ghost-button:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

button:focus-visible,
.primary:focus-visible,
.secondary:focus-visible,
.ghost-button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 3px solid rgb(var(--accent-light-rgb) / 0.45);
    outline-offset: 2px;
}

button:active:not(:disabled),
.primary:active,
.secondary:active,
.ghost-button:active {
    transform: translateY(1px);
}