@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");

:root {
    --aoa-dark: #061b14;
    --aoa-deep: #031811;
    --aoa-green: #0c4f25;
    --aoa-green-soft: #123d25;
    --aoa-lime: #b7df19;
    --aoa-lime-bright: #d7f23a;
    --aoa-light: #f7fbf2;
    --aoa-muted: #cfe3bd;
    --aoa-border: rgba(183, 223, 25, 0.34);
    --aoa-panel: rgba(3, 24, 17, 0.9);
    --aoa-panel-soft: rgba(8, 45, 29, 0.84);
    --aoa-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
    --aoa-display-font: "Russo One", sans-serif;
    --aoa-body-font: "Trebuchet MS", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    background:
        radial-gradient(circle at 12% 0%, rgba(183, 223, 25, 0.18), transparent 28%),
        linear-gradient(135deg, #03100c 0%, #062419 46%, #0b351f 100%);
    color: var(--aoa-light);
    font-family: var(--aoa-body-font);
}

h1,
h2,
h3,
h4,
summary {
    color: #ffffff;
    font-family: var(--aoa-display-font);
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

button,
.button {
    background: var(--aoa-lime);
    border: 0;
    border-radius: 8px;
    color: var(--aoa-dark);
    cursor: pointer;
    font-family: var(--aoa-body-font);
    font-weight: 700;
    padding: 10px 14px;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

button:hover,
.button:hover {
    background: var(--aoa-lime-bright);
    box-shadow: 0 10px 24px rgba(183, 223, 25, 0.22);
    transform: translateY(-1px);
}

button:focus-visible,
.button:focus-visible,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--aoa-lime);
    outline: 3px solid rgba(183, 223, 25, 0.25);
}

input,
select,
textarea {
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid rgba(183, 223, 25, 0.28);
    border-radius: 8px;
    color: #102018;
    font-family: var(--aoa-body-font);
}

label {
    color: #e9f7d3;
    font-family: var(--aoa-body-font);
    font-weight: 700;
}

.message,
.score-summary,
.admin-panel,
.classification-container,
.phase-section,
.match-card {
    background: var(--aoa-panel);
    border: 1px solid var(--aoa-border);
    border-radius: 8px;
    box-shadow: var(--aoa-shadow);
    color: var(--aoa-light);
}

.message {
    color: var(--aoa-light);
}

a {
    color: inherit;
}