/*
 * Copyright (C) 2026  Henry Norton-Bower
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

:root {
    --felt: #1b3a1d;
    --wood-dark: #2a1b07;
    --wood-mid: #6b4423;
    --parchment: #e8dcc3;
    --ink: #2a1b07;
    --peg-red: #c23b3b;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.table {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--felt);
    background-image:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05), transparent 60%);
}

.game-box {
    width: min(420px, 90vw);
    padding: 40px 32px;
    text-align: center;
    background: var(--parchment);
    border: solid 10px;
    border-image-slice: 10;
    border-image-source: url("../assets/img/wood.png");
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

.title {
    margin: 0 0 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.6rem;
    color: var(--ink);
    letter-spacing: 1px;
    text-shadow:
        1px 1px 0 rgba(255,255,255,0.3),
        -1px -1px 0 rgba(0,0,0,0.15);
}

.actions, .join-panel-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.tile-button {
    flex: 1 1 0;
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #f4efe3;
    background: var(--wood-dark);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25);
    transition: transform 0.08s ease, filter 0.15s ease;
}

.tile-button:hover {
    filter: brightness(1.15);
}

.tile-button:active {
    transform: translateY(2px);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
}

.tile-button.primary {
    background: var(--peg-red);
}

.tile-button.small {
    padding: 10px 16px;
    font-size: 0.9rem;
}

.join-panel {
    margin-top: 20px;
}

.code-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 2px solid var(--wood-mid);
    border-radius: 6px;
    background: #fdfaf3;
    color: var(--ink);
    box-sizing: border-box;
}

.code-input:focus {
    outline: 2px solid var(--peg-red);
    outline-offset: 1px;
}