@import url(
    'https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Press+Start+2P&family=Creepster&display=swap'
);


/* ================================================================
   VARIABLES

   Halloween / "ding-dong ditch" re-theme -- a porch light glowing
   against a Halloween night. Every variable below keeps the exact
   same NAME it had in the arcade theme (and Keyboard Battle's own
   copy of this file), just repointed to a jack-o'-lantern palette
   instead of a neon one -- so every rule written against --cyan,
   --glow-green, etc. elsewhere in this file re-themes for free
   without needing to be touched individually.
   ================================================================ */

:root {

    --bg: #0a0612;

    --panel: #16101f;

    /* was cyan -- now the porch light / pumpkin glow, the theme's
       primary accent (nav links, focus rings, headings). */
    --cyan: #ff7518;

    /* was purple -- now a witchy violet, used alongside the pumpkin
       glow for the heading's drop-shadow depth. */
    --purple: #9b30ff;

    /* was pink -- now a blood red, doing double duty as "SPRING" 's
       accent color and every error state's color. */
    --pink: #ff2d4d;

    /* was green -- now a toxic slime green for success states and
       the "online" indicator. */
    --green: #39ff6a;

    /* was yellow -- warning amber for incomplete-department rows,
       shifted slightly so it doesn't collide with the pumpkin
       orange above. */
    --yellow: #ffb000;

    /* was white -- warm moonlight/parchment instead of a cold
       white. */
    --white: #fdf3e3;

    --muted: #7a6b8a;

    --border: rgba(
        255,
        117,
        24,
        0.25
    );

    --glow-cyan:
        0 0 5px #ff7518,
        0 0 15px rgba(
            255,
            117,
            24,
            0.65
        );

    --glow-green:
        0 0 5px #39ff6a,
        0 0 20px rgba(
            57,
            255,
            106,
            0.7
        );
}


/* ================================================================
   RESET
   ================================================================ */

* {
    box-sizing: border-box;
}

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

body {

    background:
        radial-gradient(
            ellipse at center,
            #2a1a3d 0%,
            #140b1f 45%,
            #05030a 100%
        );

    color: var(--white);

    font-family: 'Orbitron', monospace;

    overflow-x: hidden;
}


/* ================================================================
   NIGHT VIGNETTE

   Same role the CRT edge-darkening played in the arcade theme --
   just tinted toward night-purple instead of neutral black.
   ================================================================ */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(10,6,18,.75) 100%
        );

    z-index: 50;
}


/* ================================================================
   HALLOWEEN NIGHT SKY

   Repurposes the arcade theme's full-viewport ".scanlines" overlay
   (same element, same fixed/pointer-events:none/high-z-index role)
   to carry the night's atmosphere instead of a CRT scanline
   texture: a moon and a couple of spiderwebs anchored to the
   viewport corners, plus bats drifting across on a slow loop.
   Opacity stays low and everything is pointer-events:none so it
   never competes with or blocks the actual content underneath.
   ================================================================ */

.scanlines {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 100;

    opacity: .4;

    background-repeat: no-repeat;

    background-image:
        /* moon, upper right -- tucked into the true corner, well
           clear of the header's nav buttons */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='34' fill='%23fdf3e3'/%3E%3Ccircle cx='64' cy='38' r='30' fill='%230a0612'/%3E%3C/svg%3E"),
        /* spiderweb, bottom-left corner -- kept out of the header
           and the form entirely by living at the bottom of the
           viewport instead of the top */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23fdf3e3' stroke-width='1' fill='none'%3E%3Cpath d='M0 100 L100 0 M0 100 L100 60 M0 100 L60 0 M0 100 L100 100 M0 100 L0 0'/%3E%3Cpath d='M0 78 Q30 74 30 100'/%3E%3Cpath d='M0 55 Q50 50 50 100'/%3E%3Cpath d='M0 32 Q70 26 70 100'/%3E%3C/g%3E%3C/svg%3E"),
        /* spiderweb, bottom-right corner */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23fdf3e3' stroke-width='1' fill='none'%3E%3Cpath d='M100 100 L0 0 M100 100 L0 60 M100 100 L40 0 M100 100 L0 100 M100 100 L100 0'/%3E%3Cpath d='M100 78 Q70 74 70 100'/%3E%3Cpath d='M100 55 Q50 50 50 100'/%3E%3Cpath d='M100 32 Q30 26 30 100'/%3E%3C/g%3E%3C/svg%3E");

    background-position:
        calc(100% - 50px) 14px,
        0 100%,
        100% 100%;

    background-size:
        42px 42px,
        110px 110px,
        110px 110px;
}

.scanlines::before,
.scanlines::after {

    content: "";

    position: absolute;

    top: 18%;

    width: 70px;

    height: 30px;

    background:
        no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath fill='%23140b1f' d='M50 20 C45 5 30 0 20 8 C28 10 34 14 38 20 C30 16 18 16 8 24 C20 22 30 26 36 32 C40 24 46 20 50 26 C54 20 60 24 64 32 C70 26 80 22 92 24 C82 16 70 16 62 20 C66 14 72 10 80 8 C70 0 55 5 50 20 Z'/%3E%3C/svg%3E");

    animation: bat-fly 22s linear infinite;
}

.scanlines::before {
    left: -10%;
    animation-delay: 0s;
}

.scanlines::after {
    left: -10%;
    top: 32%;
    width: 50px;
    height: 22px;
    animation-delay: 11s;
    animation-duration: 26s;
}

@keyframes bat-fly {

    0% {
        transform: translateX(0) translateY(0);
        opacity: 0;
    }

    8% {
        opacity: .55;
    }

    50% {
        transform: translateX(60vw) translateY(-18px);
    }

    92% {
        opacity: .55;
    }

    100% {
        transform: translateX(120vw) translateY(6px);
        opacity: 0;
    }
}


/* ================================================================
   MAIN ARCADE FRAME
   ================================================================ */

.arcade {

    width: min(
        1500px,
        96vw
    );

    min-height: 100vh;

    margin: auto;

    padding: 28px 20px;

    position: relative;
}


/* ================================================================
   HEADER
   ================================================================ */

.header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 2px solid var(--border);

    padding-bottom: 20px;

    margin-bottom: 20px;
}

.header-actions {

    display: flex;

    align-items: center;

    gap: 12px;
}

.brand-small {

    font-size: 10px;

    letter-spacing: 5px;

    color: var(--cyan);

    text-shadow: var(--glow-cyan);

    margin-bottom: 8px;
}

h1 {

    margin: 0;

    font-family: 'Creepster', cursive;

    /* Creepster's dripping letterforms already read much bigger
       than Press Start 2P at the same size, so this theme's clamp
       sits a little lower. */
    font-size: clamp(
        28px,
        5.5vw,
        58px
    );

    line-height: 1.2;

    letter-spacing: 1px;

    color: var(--white);

    text-shadow:
        3px 3px 0 var(--purple),
        0 0 18px var(--cyan);
}

h1 span {

    color: var(--pink);

    text-shadow:
        0 0 6px var(--pink),
        0 0 22px var(--pink);
}


/* ================================================================
   PUMPKIN (brand mark)

   A small jack-o'-lantern dropped in front of the "RASPBERRY PI
   ARCADE" brand label via a pseudo-element, so no markup changes
   are needed in any of the three pages to pick it up.
   ================================================================ */

.brand {

    position: relative;

    padding-left: 40px;
}

.brand::before {

    content: "";

    position: absolute;

    left: 0;

    top: 2px;

    width: 26px;

    height: 22px;

    background:
        no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='56' rx='40' ry='32' fill='%23ff7518'/%3E%3Crect x='45' y='14' width='10' height='16' rx='3' fill='%2339ff6a'/%3E%3Cpath d='M32 50 L46 60 L32 70 Z' fill='%230a0612'/%3E%3Cpath d='M68 50 L54 60 L68 70 Z' fill='%230a0612'/%3E%3Cpath d='M28 78 Q50 96 72 78 L62 70 Q50 82 38 70 Z' fill='%230a0612'/%3E%3C/svg%3E");

    filter: drop-shadow(0 0 4px rgba(255, 117, 24, .8));
}


/* ================================================================
   CONNECTION
   ================================================================ */

.connection {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 11px;

    letter-spacing: 2px;

    padding: 9px 14px;

    border: 1px solid;

    border-radius: 4px;
}

.connection-dot {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    display: block;
}

.connection.online {

    color: var(--green);

    border-color: var(--green);

    box-shadow: var(--glow-green);
}

.connection.online .connection-dot {

    background: var(--green);

    box-shadow: var(--glow-green);
}

.connection.offline {

    color: var(--muted);

    border-color: #30364d;
}

.connection.offline .connection-dot {

    background: var(--muted);
}


/* ================================================================
   NAV LINK

   A small pill-shaped link to another page (e.g. the live view
   <-> high scores). Deliberately understated by default -- muted
   border, no glow -- so it doesn't compete with the connection
   status badge, but lights up on hover/focus so it reads clearly
   as clickable.
   ================================================================ */

.nav-link {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 11px;

    letter-spacing: 2px;

    padding: 9px 14px;

    border: 1px solid var(--border);

    border-radius: 4px;

    color: var(--cyan);

    text-decoration: none;

    transition:
        border-color .2s,
        box-shadow .2s,
        background .2s;
}

.nav-link:hover,
.nav-link:focus-visible {

    border-color: var(--cyan);

    box-shadow: var(--glow-cyan);

    background: rgba(255, 117, 24, .06);
}

/* A <button> reusing .nav-link (e.g. the department filter, which
   opens a modal rather than navigating) needs browser button
   chrome reset to look identical to the <a> version. */
button.nav-link {

    font-family: inherit;

    cursor: pointer;

    background: transparent;
}


/* ================================================================
   STATUS
   ================================================================ */

.status {

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    margin-bottom: 28px;

    min-height: 100px;
}

.game-state {

    color: var(--cyan);

    font-size: 12px;

    letter-spacing: 4px;
}

.timer {

    font-family: 'Press Start 2P', monospace;

    font-size: clamp(
        28px,
        7vw,
        70px
    );

    color: white;

    text-align: center;

    min-width: 220px;

    text-shadow:
        0 0 5px white,
        0 0 20px var(--cyan),
        0 0 40px var(--cyan);

    transition:
        color .2s,
        text-shadow .2s;
}

.timer.warning {

    color: var(--yellow);

    text-shadow:
        0 0 5px var(--yellow),
        0 0 25px var(--yellow);

    animation:
        timer-pulse .5s infinite alternate;
}

@keyframes timer-pulse {

    from {
        opacity: .65;
    }

    to {
        opacity: 1;
    }
}

.last-update {

    text-align: right;

    font-size: 9px;

    letter-spacing: 2px;

    color: var(--muted);
}


/* ================================================================
   PLAYER GRID
   ================================================================ */

.players {

    display: grid;

    grid-template-columns:
        repeat(
            var(--player-count, 2),
            minmax(0, 1fr)
        );

    gap: 18px;

    min-height: 450px;
}


/* ================================================================
   PLAYER CARD
   ================================================================ */

.player {

    --player-color: var(--cyan);

    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.01)
        );

    border: 2px solid
        color-mix(
            in srgb,
            var(--player-color) 35%,
            transparent
        );

    min-height: 450px;

    padding: 24px;

    overflow: hidden;

    transition:
        border-color .25s,
        box-shadow .25s,
        transform .25s;

    contain: layout paint;
}


/* decorative corner */

.player::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 80px;
    height: 3px;

    background: var(--player-color);

    box-shadow:
        0 0 15px var(--player-color);
}

.player::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--player-color) 6%,
                transparent
            ),
            transparent 35%
        );
}

.player.leader {

    border-color: var(--green);

    box-shadow:
        inset 0 0 40px
            rgba(57,255,106,.08),
        0 0 20px
            rgba(57,255,106,.25);

    transform: scale(1.015);
}

.player.leader::before {

    background: var(--green);

    box-shadow:
        0 0 15px var(--green),
        0 0 30px var(--green);

    width: 100%;
}


/* ================================================================
   PLAYER HEADER
   ================================================================ */

.player-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

    z-index: 1;
}

.player-number {

    font-size: 10px;

    letter-spacing: 3px;

    color: var(--player-color);
}

.player-position {

    font-size: 10px;

    letter-spacing: 2px;

    color: var(--muted);
}

.player.leader .player-position {

    color: var(--green);

    text-shadow: var(--glow-green);
}


/* ================================================================
   PLAYER NAME
   ================================================================ */

.player-name {

    margin-top: 15px;

    font-size: clamp(
        18px,
        3vw,
        28px
    );

    font-weight: 800;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    color: white;

    text-shadow:
        0 0 8px
        color-mix(
            in srgb,
            var(--player-color) 50%,
            transparent
        );

    position: relative;

    z-index: 1;
}


/* ================================================================
   SCORE
   ================================================================ */

.score-label {

    margin-top: 28px;

    color: var(--muted);

    font-size: 9px;

    letter-spacing: 4px;

    position: relative;

    z-index: 1;
}

.score {

    font-family: 'Press Start 2P', monospace;

    font-size: clamp(
        32px,
        7vw,
        72px
    );

    line-height: 1;

    margin-top: 10px;

    color: white;

    position: relative;

    z-index: 1;

    transition:
        color .12s,
        text-shadow .12s;
}

.score.bump {

    animation:
        score-bump .25s ease-out;
}

@keyframes score-bump {

    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.16);

        color: var(--green);

        text-shadow:
            0 0 5px var(--green),
            0 0 20px var(--green),
            0 0 40px var(--green);
    }

    65% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);

        color: white;
    }
}


/* ================================================================
   STATS
   ================================================================ */

.stats {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 35px;

    position: relative;

    z-index: 1;
}

.stat {

    background: rgba(
        0,
        0,
        0,
        .35
    );

    border: 1px solid rgba(
        255,
        255,
        255,
        .07
    );

    padding: 12px;
}

.stat-label {

    font-size: 8px;

    color: var(--muted);

    letter-spacing: 2px;
}

.stat-value {

    margin-top: 6px;

    font-size: 20px;

    font-weight: 700;

    color: var(--player-color);
}


/* ================================================================
   KEY HISTORY
   ================================================================ */

.history-label {

    margin-top: 22px;

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--muted);

    position: relative;

    z-index: 1;
}

.history {

    display: flex;

    gap: 4px;

    margin-top: 8px;

    height: 36px;

    position: relative;

    z-index: 1;
}

.key {

    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(
        255,
        255,
        255,
        .12
    );

    background: rgba(
        255,
        255,
        255,
        .03
    );

    font-size: 12px;

    color: #aaa;
}

.key.combo {

    color: var(--green);

    border-color: var(--green);

    background: rgba(
        0,
        255,
        102,
        .14
    );

    box-shadow:
        0 0 8px
        rgba(57,255,106,.45);

    animation:
        combo-key .45s
        ease-in-out infinite alternate;
}

@keyframes combo-key {

    from {
        opacity: .65;
    }

    to {
        opacity: 1;
    }
}


/* ================================================================
   COMBO
   ================================================================ */

.combo {

    margin-top: 20px;

    min-height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 1;
}

.combo span {

    color: var(--yellow);

    font-family: 'Press Start 2P', monospace;

    font-size: 11px;

    text-shadow:
        0 0 8px var(--yellow);

    animation:
        combo-text .45s
        ease-in-out infinite alternate;
}

@keyframes combo-text {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}


/* ================================================================
   COMBO BANNER
   ================================================================ */

.combo-banner {

    position: fixed;

    left: 50%;

    bottom: 45px;

    transform:
        translateX(-50%);

    z-index: 200;

    padding: 18px 40px;

    text-align: center;

    background:
        rgba(3,4,10,.94);

    border: 2px solid var(--green);

    box-shadow:
        0 0 10px var(--green),
        0 0 35px
            rgba(57,255,106,.5);

    min-width: min(
        500px,
        85vw
    );

    animation:
        combo-banner-in .2s
        ease-out;
}

.combo-banner.hidden {
    display: none;
}

.combo-small {

    font-size: 9px;

    letter-spacing: 5px;

    color: var(--green);
}

.combo-text {

    margin-top: 10px;

    font-family:
        'Press Start 2P',
        monospace;

    font-size: 16px;

    color: white;

    text-shadow:
        0 0 8px var(--green);
}

@keyframes combo-banner-in {

    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(20px)
            scale(.9);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}


/* ================================================================
   FOOTER
   ================================================================ */

footer {

    display: flex;

    justify-content: space-between;

    margin-top: 25px;

    padding-top: 15px;

    border-top: 1px solid
        rgba(255,255,255,.08);

    color: var(--muted);

    font-size: 8px;

    letter-spacing: 3px;
}

.green-dot {

    display: inline-block;

    width: 6px;
    height: 6px;

    background: var(--green);

    border-radius: 50%;

    box-shadow: var(--glow-green);

    margin-right: 5px;
}


/* ================================================================
   EMPTY / WAITING
   ================================================================ */

.waiting {

    grid-column:
        1 / -1;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 400px;

    color: var(--muted);

    font-family:
        'Press Start 2P',
        monospace;

    font-size: 14px;

    letter-spacing: 3px;

    text-align: center;

    animation:
        waiting-pulse 1.5s
        infinite alternate;
}

@keyframes waiting-pulse {

    from {
        opacity: .35;
    }

    to {
        opacity: 1;
    }
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 900px) {

    .players {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .player {
        min-height: 380px;
    }
}

@media (max-width: 600px) {

    .arcade {
        width: 100%;
        padding: 15px 10px;
    }

    .header {
        align-items: flex-start;
    }

    /* The moon sits right where the wrapped nav buttons land once
       the header stacks at this width -- drop it and keep just the
       two corner webs, which stay clear down at the bottom. */
    .scanlines {

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23fdf3e3' stroke-width='1' fill='none'%3E%3Cpath d='M0 100 L100 0 M0 100 L100 60 M0 100 L60 0 M0 100 L100 100 M0 100 L0 0'/%3E%3Cpath d='M0 78 Q30 74 30 100'/%3E%3Cpath d='M0 55 Q50 50 50 100'/%3E%3Cpath d='M0 32 Q70 26 70 100'/%3E%3C/g%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23fdf3e3' stroke-width='1' fill='none'%3E%3Cpath d='M100 100 L0 0 M100 100 L0 60 M100 100 L40 0 M100 100 L0 100 M100 100 L100 0'/%3E%3Cpath d='M100 78 Q70 74 70 100'/%3E%3Cpath d='M100 55 Q50 50 50 100'/%3E%3Cpath d='M100 32 Q30 26 30 100'/%3E%3C/g%3E%3C/svg%3E");

        background-position:
            0 100%,
            100% 100%;

        background-size:
            80px 80px,
            80px 80px;
    }

    /* Clear of the submit button and footer instead of sitting on
       top of them once the page is this short. */
    .sneak-away {
        bottom: 80px;
    }

    .connection,
    .nav-link {
        font-size: 8px;
        padding: 6px 8px;
    }

    .header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .status {

        grid-template-columns:
            1fr;

        gap: 10px;

        text-align: center;
    }

    .game-state,
    .last-update {
        text-align: center;
    }

    .timer {
        min-width: 0;
    }

    .players {

        grid-template-columns:
            1fr;

        min-height: 0;
    }

    .player {

        min-height: 350px;

        transform: none !important;
    }

    .combo-banner {
        bottom: 20px;
    }
}

/* ============================================================
   HIGH SCORES
   ============================================================ */

.highscores-heading {

    text-align: center;

    font-family: 'Press Start 2P', monospace;

    font-size: clamp(
        16px,
        3vw,
        26px
    );

    letter-spacing: 4px;

    color: var(--cyan);

    text-shadow: var(--glow-cyan);

    margin: 4px 0 16px;
}


/* ================================================================
   HIGH SCORES TOOLBAR
   ================================================================ */

.highscores-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 16px;

    font-size: 10px;

    letter-spacing: 1px;

    color: var(--muted);
}

.highscores-filter-label {
    text-transform: uppercase;
}

.toolbar-link {

    color: var(--cyan);

    text-decoration: none;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    border-bottom: 1px solid transparent;

    transition: border-color .2s;
}

.toolbar-link:hover,
.toolbar-link:focus-visible {
    border-color: var(--cyan);
}

/* A <button> reusing .toolbar-link (the department filter trigger)
   needs the same browser chrome reset as button.nav-link does --
   including border, which a native <button> has on all four sides
   by default and .toolbar-link only ever meant to override on the
   bottom edge (the hover-underline). */
button.toolbar-link {

    font-family: inherit;

    font-size: inherit;

    letter-spacing: inherit;

    cursor: pointer;

    background: transparent;

    padding: 0;

    border: none;

    border-bottom: 1px solid transparent;
}

.highscores-toolbar-links {

    display: flex;

    align-items: center;

    gap: 18px;
}

.highscores-panel {

    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.01)
        );

    border: 2px solid var(--border);

    box-shadow:
        inset 0 0 40px
            rgba(255,117,24,.05);

    padding: 6px 24px 10px;

    overflow: hidden;
}

.highscores-panel::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--cyan);

    box-shadow: 0 0 15px var(--cyan);
}

.highscores {
    width: 100%;
    overflow-x: auto;
}

.highscores-table {
    width: 100%;
    border-collapse: collapse;
}

.highscores-table th,
.highscores-table td {
    padding: 16px 18px;
    text-align: center;
}

.highscores-table th {

    font-size: 9px;

    letter-spacing: 3px;

    color: var(--muted);

    border-bottom: 2px solid var(--border);
}

.highscores-table td {

    font-size: 1.05rem;

    border-bottom: 1px solid
        rgba(255,255,255,.06);
}

.highscores-table tbody tr:hover {
    background: rgba(255,255,255,.03);
}

.highscores-table .rank {

    width: 60px;

    font-family: 'Press Start 2P', monospace;

    font-size: 12px;

    color: var(--cyan);
}

.highscores-table .name-cell {

    text-align: left;

    font-weight: 700;

    color: white;

    text-shadow:
        0 0 8px rgba(255,117,24,.35);
}

.highscores-table .department {

    text-align: left;

    color: var(--muted);

    font-size: 0.85rem;

    letter-spacing: 0.5px;
}

.highscores-table .score-cell {

    font-family: 'Press Start 2P', monospace;

    font-size: 14px;

    color: white;

    text-shadow: 0 0 8px var(--cyan);
}

.highscores-table .combos {
    color: var(--yellow);
}

.highscores-table .speed {
    color: var(--green);
}

.highscores-table .player-count {
    color: var(--muted);
    font-size: 0.9rem;
}

/* A cell's content (e.g. a department name linking to its player
   list) keeps that cell's own color/weight instead of default
   link blue -- only the underline-on-hover signals it's clickable. */
.highscores-table td a {
    color: inherit;
    text-decoration: none;
}

.highscores-table td a:hover,
.highscores-table td a:focus-visible {
    text-decoration: underline;
}

.highscores-table .empty {

    padding: 60px 20px;

    color: var(--muted);

    font-family: 'Press Start 2P', monospace;

    font-size: 12px;

    letter-spacing: 3px;

    animation:
        waiting-pulse 1.5s
        infinite alternate;
}

/* Top three */

.highscores-table tbody tr:nth-child(1) .rank {
    color: #ffd700;
    text-shadow: 0 0 10px #ffd700;
}

.highscores-table tbody tr:nth-child(2) .rank {
    color: #c0c0c0;
    text-shadow: 0 0 10px #c0c0c0;
}

.highscores-table tbody tr:nth-child(3) .rank {
    color: #cd7f32;
    text-shadow: 0 0 10px #cd7f32;
}

/*
 * Department scoreboard: fewer than 3 scoring players yet. The
 * average is real but not fully earned, so it recedes (muted
 * rank/name/score, no medal colors even if the raw number would
 * otherwise land in the top 3) except for the one thing that
 * explains why -- the player count itself, called out in amber.
 * Selector is one tag more specific than the nth-child medal
 * rules above so it always wins regardless of source order.
 */
.highscores-table tbody tr.incomplete td.rank {
    color: var(--muted);
    text-shadow: none;
}

.highscores-table tbody tr.incomplete td.name-cell {
    color: var(--muted);
    text-shadow: none;
}

.highscores-table tbody tr.incomplete td.score-cell {
    color: var(--muted);
    text-shadow: none;
}

.highscores-table tbody tr.incomplete td.player-count {
    color: var(--yellow);
    font-weight: 700;
}

.highscores-legend {

    margin-top: 14px;

    padding: 0 4px;

    color: var(--muted);

    font-size: 10px;

    letter-spacing: .5px;

    line-height: 1.6;
}


/* ================================================================
   DEPARTMENT FILTER MODAL
   ================================================================ */

.modal-backdrop {

    position: fixed;

    inset: 0;

    z-index: 500;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(3, 4, 10, .85);

    padding: 20px;
}

.modal-backdrop.hidden {
    display: none;
}

.modal {

    width: min(480px, 100%);

    max-height: 80vh;

    overflow-y: auto;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.01)
        );

    border: 2px solid var(--cyan);

    box-shadow:
        0 0 15px var(--cyan),
        0 0 40px rgba(255,117,24,.3);

    padding: 20px;
}

.modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 16px;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--border);
}

.modal-title {

    font-family: 'Press Start 2P', monospace;

    font-size: 11px;

    letter-spacing: 2px;

    color: var(--cyan);

    text-shadow: var(--glow-cyan);
}

.modal-close {

    background: none;

    border: none;

    color: var(--muted);

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

    padding: 0 4px;

    transition: color .2s;
}

.modal-close:hover,
.modal-close:focus-visible {
    color: var(--cyan);
}

.modal-body {

    display: flex;

    flex-direction: column;

    gap: 6px;
}

.modal-option {

    display: block;

    padding: 10px 14px;

    color: var(--white);

    text-decoration: none;

    border: 1px solid transparent;

    border-radius: 4px;

    font-size: 13px;

    letter-spacing: .5px;

    transition:
        background .15s,
        border-color .15s;
}

.modal-option:hover,
.modal-option:focus-visible {
    background: rgba(255,117,24,.08);
    border-color: var(--border);
}

.modal-option.active {
    color: var(--cyan);
    border-color: var(--cyan);
    background: rgba(255,117,24,.06);
    text-shadow: 0 0 8px rgba(255,117,24,.4);
}

.modal-empty {

    color: var(--muted);

    font-size: 12px;

    letter-spacing: 1px;

    padding: 10px 14px;
}

/* Mobile */

@media (max-width: 700px) {

    .highscores-panel {
        padding: 4px 10px 6px;
    }

    .highscores-table th,
    .highscores-table td {
        padding: 10px 8px;
    }

    .highscores-table td {
        font-size: 0.95rem;
    }

    .highscores-table th {
        font-size: 8px;
    }

    .highscores-toolbar {
        flex-wrap: wrap;
    }

    .modal {
        padding: 16px;
    }

}


/* ================================================================
   FORMS (password gate + score registration -- Ring på Spring)
   ================================================================ */

.auth-panel {

    display: flex;

    justify-content: center;

    padding: 20px 0 10px;
}

.auth-form,
.score-form {

    width: min(
        440px,
        100%
    );

    display: flex;

    flex-direction: column;

    gap: 18px;

    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 24px;
}

.form-field {

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.form-label {

    font-size: 11px;

    letter-spacing: 2px;

    color: var(--cyan);

    text-shadow: var(--glow-cyan);
}

.form-hint {

    color: var(--muted);

    text-shadow: none;

    font-size: 10px;

    letter-spacing: 1px;
}

.form-input,
.form-select {

    font-family: 'Orbitron', monospace;

    font-size: 16px;

    color: var(--white);

    background: rgba(255, 255, 255, .03);

    border: 1px solid var(--border);

    border-radius: 4px;

    padding: 12px 14px;

    outline: none;

    transition:
        border-color .2s,
        box-shadow .2s;
}

.form-input:focus,
.form-select:focus {

    border-color: var(--cyan);

    box-shadow: var(--glow-cyan);
}

.form-select option {

    background: var(--panel);

    color: var(--white);
}

/* Styled as a porch doorbell button rather than a plain arcade
   button: pill-shaped, glowing like it's lit from inside, with a
   slow idle pulse and a ripple "chime" ring on press -- it's the
   button that "rings the bell" on the house. */
.form-submit {

    position: relative;

    overflow: visible;

    font-family: 'Press Start 2P', monospace;

    font-size: 12px;

    letter-spacing: 2px;

    color: var(--bg);

    background: var(--cyan);

    border: none;

    border-radius: 999px;

    padding: 16px;

    cursor: pointer;

    text-shadow: none;

    box-shadow: var(--glow-cyan);

    animation: doorbell-idle 2.6s ease-in-out infinite;

    transition: transform .1s;
}

.form-submit:hover,
.form-submit:focus-visible {

    animation-play-state: paused;

    box-shadow:
        0 0 8px #ff7518,
        0 0 30px rgba(255, 117, 24, .8);
}

.form-submit:active {

    transform: scale(.98);
}

.form-submit::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 999px;

    border: 2px solid var(--cyan);

    opacity: 0;

    pointer-events: none;
}

.form-submit:active::after {

    animation: doorbell-ring .6s ease-out;
}

@keyframes doorbell-idle {

    0%,
    100% {
        box-shadow: var(--glow-cyan);
    }

    50% {
        box-shadow:
            0 0 8px #ff7518,
            0 0 26px rgba(255, 117, 24, .85);
    }
}

@keyframes doorbell-ring {

    0% {
        transform: scale(1);
        opacity: .9;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.form-feedback {

    font-size: 11px;

    letter-spacing: 1px;

    min-height: 14px;
}

.form-feedback.wide {

    width: min(
        440px,
        100%
    );

    margin: 0 auto 10px;

    padding: 12px 16px;

    border-radius: 4px;

    min-height: 0;
}

.form-feedback.success {

    color: var(--green);
}

.form-feedback.wide.success {

    background: rgba(57, 255, 106, .08);

    border: 1px solid var(--green);
}

.form-feedback.warning {

    color: var(--yellow);
}

.form-feedback.wide.warning {

    background: rgba(255, 176, 0, .08);

    border: 1px solid var(--yellow);
}

.form-feedback.error {

    color: var(--pink);
}

.form-feedback.wide.error {

    background: rgba(255, 45, 77, .08);

    border: 1px solid var(--pink);
}


/* ================================================================
   SNEAK AWAY

   A silhouette ducking in the corner, idly bobbing as if keeping
   watch. After a score is successfully registered -- i.e. the bell
   has been rung -- register.php adds ".dash" for one run, sending
   it darting off the edge of the screen. Fixed-position and
   pointer-events:none, same as the night-sky overlay, so it never
   sits in the way of or intercepts clicks on real content.
   ================================================================ */

.sneak-away {

    position: fixed;

    bottom: 14px;

    right: 18px;

    width: 72px;

    height: 52px;

    background:
        no-repeat bottom right / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cg fill='%23fdf3e3'%3E%3Ccircle cx='108' cy='28' r='10'/%3E%3Cpath d='M60 40 Q85 30 100 35 L108 55 Q90 50 75 58 Z'/%3E%3Cpath d='M60 55 L40 90 L50 92 L68 62 Z'/%3E%3Cpath d='M80 60 L95 90 L105 88 L85 55 Z'/%3E%3Cpath d='M62 42 L35 50 L37 56 L65 50 Z'/%3E%3C/g%3E%3C/svg%3E");

    /* Pale rather than literally black -- a solid-black shadow on
       top of this theme's already-near-black background would be
       invisible. Reads as a ghostly figure instead, which fits. */
    opacity: .55;

    filter: drop-shadow(0 0 4px rgba(253, 243, 227, .4));

    pointer-events: none;

    z-index: 101;

    animation: sneak-idle 3.4s ease-in-out infinite;
}

.sneak-away.dash {

    animation: sneak-dash .9s ease-in forwards;
}

@keyframes sneak-idle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes sneak-dash {

    0% {
        transform: translate(0, 0);
        opacity: .85;
    }

    100% {
        transform: translate(160px, 14px);
        opacity: 0;
    }
}

@media (max-width: 700px) {

    .sneak-away {
        width: 50px;
        height: 36px;
    }
}