@font-face {
    font-family: 'Flappy';
    src: url('../assets/fonts/flappy-font.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Warehouse palette — edit these values to recolor the game. */
:root {
    color-scheme: dark;
    --page: #101820;
    --panel: #1c2935;
    --border: #42596d;
    --text: #f5f2e9;
    --muted: #b8c6d1;
    --accent: #ffab4c;
    --accent-hover: #ffc078;
    --arena: #c4d2db;
    --floor: #263746;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 16px;
    background: var(--page);
    color: var(--text);
    font-family: system-ui, sans-serif;
    text-align: center;
}

main {
    max-width: 420px;
    margin: 0 auto;
}

h1 {
    font-size: 1.5rem;
}

canvas {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
    background: var(--arena);
}

#jump-button {
    margin-top: 16px;
    min-height: 48px;
    padding: 12px 36px;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: var(--page);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

#jump-button:active {
    transform: translateY(2px);
}

#jump-button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}

#jump-button:disabled {
    opacity: 0.5;
    cursor: wait;
}

p {
    color: var(--muted);
    font-size: 0.875rem;
}

.leaderboard {
    margin-top: 28px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    text-align: left;
}

.leaderboard h2 {
    margin: 0;
    font-size: 1.25rem;
}

.leaderboard label {
    display: block;
    margin-bottom: 8px;
}

.leaderboard input {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: var(--text);
    color: var(--page);
}

.leaderboard input:focus-visible, #refresh-leaderboard:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

#refresh-leaderboard {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--page);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

#refresh-leaderboard:disabled { opacity: 0.5; cursor: wait; }

.leaderboard table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.leaderboard th, .leaderboard td {
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    overflow-wrap: anywhere;
}

.leaderboard th:first-child { width: 20%; }
.leaderboard th:last-child { width: 22%; }
.leaderboard th:last-child, .leaderboard td:last-child { text-align: right; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

#score-dialog {
    width: min(400px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel);
    color: var(--text);
    text-align: left;
}
#score-dialog::backdrop { background: rgb(0 0 0 / 65%); }
#score-dialog h2 { margin-top: 0; }
#score-dialog label { display: block; margin-bottom: 8px; }
#score-dialog input { background: var(--page); color: var(--text); width: 100%; padding: 12px; font: inherit; border: 1px solid var(--border); border-radius: 8px; }
#score-dialog button { min-height: 48px; padding: 12px 20px; margin: 8px 8px 0 0; border: none; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; background: var(--accent); color: var(--page); }
#score-dialog #skip-score { background: var(--muted); }
#score-dialog :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Use the game font for titles and controls; keep names and instructions readable. */
h1, .leaderboard h2, #score-dialog h2,
#jump-button, #refresh-leaderboard, #score-dialog button {
    font-family: 'Flappy', system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
}
h1 { font-size: 2.5rem; }
.leaderboard h2, #score-dialog h2 { font-size: 1.75rem; }
#jump-button, #refresh-leaderboard, #score-dialog button { font-size: 1.25rem; }

h1 { color: var(--accent); text-shadow: 0 3px 0 #0005; }
canvas { box-shadow: 0 0 0 2px var(--border), 0 12px 32px #0004; }
#jump-button { box-shadow: 0 4px 0 #9a541a; }
#jump-button:hover:not(:disabled), #score-dialog button[type="submit"]:hover { background: var(--accent-hover); }
#refresh-leaderboard:hover:not(:disabled) { background: var(--panel); border-color: var(--muted); }
#score-dialog #skip-score { background: var(--floor); color: var(--text); border: 1px solid var(--border); }
.leaderboard th { color: var(--muted); }
.leaderboard tbody tr:first-child { color: var(--accent); }