:root { --sky: #A0D8EF; --ink: #123; --accent: #FF8C00; }

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    min-height: 100vh;
    image-rendering: pixelated;
    background-color: var(--sky);
    /* Proportions match the game's own renderer (BackgroundRenderer.cs):
       clouds 20% tall starting 12% down, mountains 18% tall ending where
       the ground starts, ground is the bottom 22% (GroundTopPercent = 0.78). */
    background-image:
        url("/images/clouds.png"),
        url("/images/mountains.png"),
        url("/images/ground.png");
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-position: 0 12vh, 0 60vh, 0 78vh;
    background-size: auto 20vh, auto 18vh, auto 22vh;
    background-attachment: fixed, fixed, fixed;
}

/* Decorative scene layer — pinned to the viewport, behind all real content
   (z-index 0 vs main's z-index 1). Purely visual, aria-hidden. */
.scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.scene img {
    position: absolute;
    image-rendering: pixelated;
    height: auto;
}

.scene-pegasus  { top: 12vh; left: 4%; width: 14vh; }
.scene-dolphin  { top: 19vh; right: 3%; width: 13vh; }

.scene-token-1 { top: 26vh; left: 22%; width: 6vh; }
.scene-token-2 { top: 26vh; right: 22%; width: 6vh; }
.scene-gate  { bottom: 22vh; left: 50%; width: 14vh; transform: translateX(-50%); }
.scene-horse { bottom: 22vh; left: calc(50% - 21vh); width: 12vh; }

main { max-width: 40rem; margin: 0 auto; padding: 1rem; position: relative; z-index: 1; }

.logo {
    display: block;
    margin: 1rem auto 0.5rem;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.tabs { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1rem; }

.tab {
    flex: 1 1 0; text-align: center; padding: 0.6rem 0.4rem;
    border-radius: 0.5rem; text-decoration: none; color: var(--ink);
    background: #ffffff88; font-weight: 600; font-size: 0.95rem;
}

.tab.active { background: var(--accent); color: #fff; }

.countdown { text-align: center; font-weight: 600; color: #4a5a66; margin: 0 0 1rem; }

.empty { text-align: center; color: #4a5a66; padding: 2rem 0; }

table { width: 100%; border-collapse: separate; border-spacing: 0 0.25rem; }

th {
    text-align: left; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: #4a5a66; padding: 0 0.75rem;
}

th:last-child, td:last-child { text-align: right; }

td { background: #f4e4c8dd; padding: 0.7rem 0.75rem; }
tr td:first-child { border-radius: 0.5rem 0 0 0.5rem; width: 3rem; font-weight: 700; }
tr td:last-child { border-radius: 0 0.5rem 0.5rem 0; font-variant-numeric: tabular-nums; }

tr:first-child td { background: #ffe98add; font-weight: 700; }

tr.me td { background: var(--accent); color: #fff; font-weight: 700; }

.total { text-align: center; color: #4a5a66; font-size: 0.9rem; margin-top: 1rem; }

.paging { display: flex; gap: 0.5rem; justify-content: center; margin: 0.75rem 0 1.5rem; }

.paging .page {
    padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none;
    color: var(--ink); background: #ffffff88; font-weight: 600; font-size: 0.9rem;
}

@media (max-width: 30rem) {
    h1 { font-size: 1.4rem; }
    .tab { font-size: 0.85rem; padding: 0.5rem 0.25rem; }
}

@media (max-width: 600px) {
    /* The decorative gate/horse/Pegasus/Dolphin/token scene is purely
       cosmetic (aria-hidden) and was folding under the table awkwardly on
       narrow viewports — simplest fix is to not render it at all below this
       width, so the table always gets full clean space. */
    .scene {
        display: none;
    }
}