/* ============================================
   SORDIA VIGNTI: GOBLIN-SEASON 
   ============================================ */

/* Custom pixel-print font used for the highscore digits. */
@font-face {
    font-family: "SordiaVigntiPrint";
    src: url("https://sordia-font.dvdscott23.workers.dev/SordiaVigntiFont.otf") format("opentype");
}

/* Base reset so the game fills the viewport without browser spacing and keeps the box model consistent. */
* {
    box-sizing: border-box;
}

/* ============================================================
   LOADING SCREEN
   Lives INSIDE #game, so it always matches the game exactly.
   ============================================================ */

#loading-overlay {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #000;

    z-index: 99999;

    font-family: "SordiaVigntiPrint", monospace;
    color: #f2e6c8;

    pointer-events: all;
    user-select: none;
    -webkit-user-select: none;
}

#title-play-screen {
    position: absolute;
    inset: 0;
    width: 1590px;
    height: 2975px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 100000;
    font-family: "SordiaVigntiPrint", monospace;
}

#title-play-button,
.opening-menu-buttons button,
.opening-info-panel button {
    width: 520px;
    min-height: 142px;
    border: 0;
    padding: 24px 40px;
    background: url("Assets/TimerBanner.png") center / 100% 100% no-repeat;
    color: #3a2313;
    font: 54px/1 "SordiaVigntiPrint", monospace;
    cursor: pointer;
    image-rendering: pixelated;
    text-shadow: 1px 1px 0 #f2e6c8;
}

#title-play-button {
    color: #f2e6c8;
    text-shadow: 2px 2px 0 #3a2313;
}

#title-play-button:hover,
.opening-menu-buttons button:hover,
.opening-info-panel button:hover {
    filter: brightness(1.16);
}

#title-play-button:active,
.opening-menu-buttons button:active,
.opening-info-panel button:active {
    transform: translateY(5px);
}

#title-play-button:disabled {
    cursor: wait;
}

#opening-sequence {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
    z-index: 99990;
    font-family: "SordiaVigntiPrint", monospace;
}

.opening-image,
.opening-menu-background {
    position: absolute;
    inset: 0;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 1590px 2975px;
    opacity: 0;
}

.opening-image-one {
    z-index: 1;
    background-image: url("Assets/Opening1.png");
}

.opening-image-two {
    z-index: 2;
    background-image: url("Assets/Opening2.png");
}

.opening-menu-background {
    z-index: 3;
    background-image: url("Assets/MainMenuBackground.png");
}

.opening-image.is-visible,
.opening-menu-background.is-visible {
    animation: opening-fade-in 900ms ease-out forwards;
}

.opening-image-one.is-moving-up {
    animation: opening-move-up 2200ms ease-in-out forwards;
}

@keyframes opening-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes opening-move-up {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-800px);
    }
}

#opening-menu {
    position: absolute;
    inset: 0;
    width: 1590px;
    height: 2975px;
    z-index: 100000;
    opacity: 0;
    transition: opacity 700ms ease-out;
    pointer-events: none;
}

#opening-menu.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.opening-menu-buttons {
    position: absolute;
    left: 50%;
    top: 65%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    transform: translate(-50%, -50%);
    transition: transform 850ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 650ms ease;
}

#opening-menu.instructions-active .opening-menu-buttons {
    transform: translate(-50%, calc(-50% + 2975px));
    opacity: 0;
    pointer-events: none;
}

.opening-menu-buttons button {
    width: 680px;
    min-height: 172px;
    padding: 26px 40px;
    font-size: 56px;
    color: #f2e6c8;
    text-shadow: 2px 2px 0 #3a2313;
}

.instructions-carousel {
    position: absolute;
    left: 50%;
    top: 420px;
    width: 960px;
    height: 1640px;
    z-index: 4;
    opacity: 0;
    transform: translate(-50%, 80px);
    transition: opacity 650ms ease 180ms, transform 850ms cubic-bezier(0.22, 0.61, 0.36, 1) 180ms;
}

.instructions-carousel.is-ready {
    opacity: 1;
    transform: translate(-50%, 0);
}

.instructions-window {
    width: 960px;
    height: 1415px;
    overflow: hidden;
}

.instructions-track {
    display: flex;
    width: 3840px;
    height: 1415px;
    transform: translateX(0);
    transition: transform 850ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.instructions-track img {
    display: block;
    flex: 0 0 960px;
    width: 960px;
    height: 1415px;
    image-rendering: pixelated;
    user-select: none;
    pointer-events: none;
}

.instructions-arrow {
    position: absolute;
    top: 650px;
    width: 88px;
    height: 122px;
    border: 0;
    background: rgba(18, 10, 8, 0.72);
    color: #f2e6c8;
    font: 64px/1 Arial, sans-serif;
    cursor: pointer;
    transition: opacity 180ms ease, background 180ms ease;
}

.instructions-arrow:hover:not(:disabled) {
    background: rgba(80, 38, 20, 0.9);
}

.instructions-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

.instructions-arrow-left {
    left: -135px;
}

.instructions-arrow-right {
    right: -135px;
}

.instructions-back {
    position: absolute;
    left: 50%;
    top: 1510px;
    width: 640px;
    min-height: 164px;
    padding: 26px 40px;
    border: 0;
    background: url("Assets/TimerBanner.png") center / 100% 100% no-repeat;
    color: #f2e6c8;
    font: 54px/1 "SordiaVigntiPrint", monospace;
    text-shadow: 2px 2px 0 #3a2313;
    cursor: pointer;
    transform: translateX(-50%);
}

.instructions-back:hover {
    filter: brightness(1.16);
}

.opening-instructions-background {
    position: absolute;
    inset: 0;
    width: 1590px;
    height: 2975px;
    z-index: 0;
    background: #000 url("Assets/OtherMenuBackground.png") top left / 1590px 2975px no-repeat;
    opacity: 0;
    transform: translateY(100%);
    transition:
        transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 850ms ease-in-out;
    pointer-events: none;
}

.opening-instructions-background.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.game-loader {
    width: 700px;
    max-width: 70%;

    text-align: center;
}

.game-loader-title {
    font-size: 48px;
    letter-spacing: 6px;
}

.game-loader-subtitle {
    margin-top: 12px;

    font-size: 24px;
    letter-spacing: 5px;

    opacity: 0.8;
}

.game-loader-bar {
    width: 100%;
    height: 30px;

    margin-top: 50px;

    border: 3px solid #f2e6c8;

    overflow: hidden;
}

.game-loader-fill {
    width: 0%;
    height: 100%;

    background: #f2e6c8;

    transition:
        width 0.12s linear;
}

.game-loader-percent {
    margin-top: 18px;

    font-size: 24px;
}

.game-loader-status {
    margin-top: 12px;

    font-size: 16px;

    opacity: 0.7;
}

/* The full browser viewport is used as the outer stage and is kept black to avoid whitespace around the gameplay area. */
html,
body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

body {
    position: relative;
}

/* The fixed-resolution game viewport is scaled down to fit the screen while preserving the original art proportions. */
#game {
    position: fixed;
    left: 0;
    top: 0;
    width: 1590px;
    height: 2975px;
    overflow: hidden;
    background: #000;
    transform: scale(var(--viewport-scale, 1));
    transform-origin: top left;
    cursor: none;
    /* Blocks pinch-zoom/pan/double-tap-zoom so finger drags only aim the hands, never the browser. */
    touch-action: none;

        /* Stop browser selection popup during gameplay */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

/* The world itself is the exact design size and contains the background image that should not be stretched or zoomed. */
#game-world {
    position: relative;
    width: 1590px;
    height: 2975px;
    overflow: hidden;
    background-color: #000;
    cursor: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.world-background {
    position: absolute;
    inset: 0;
    width: 1590px;
    height: 2975px;
    background-repeat: no-repeat;
    background-size: 1590px 2975px;
    background-position: top left;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}

.world-background-day {
    background-image: url("Assets/BackgroundDay.png");
    animation: world-day-cycle 240s linear infinite;
}

.world-background-sunset {
    background-image: url("Assets/BackgroundSunset.png");
    animation: world-sunset-cycle 240s linear infinite;
}

.world-background-night {
    background-image: url("Assets/BackgroundNight.png");
    animation: world-night-cycle 240s linear infinite;
}

.world-background-sunrise {
    background-image: url("Assets/BackgroundSunrise.png");
    animation: world-sunrise-cycle 240s linear infinite;
}

@keyframes world-day-cycle {
    0%, 18% { opacity: 1; }
    25%, 93% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes world-sunset-cycle {
    0%, 18% { opacity: 0; }
    25%, 43% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes world-night-cycle {
    0%, 43% { opacity: 0; }
    50%, 68% { opacity: 1; }
    75%, 100% { opacity: 0; }
}

@keyframes world-sunrise-cycle {
    0%, 68% { opacity: 0; }
    75%, 93% { opacity: 1; }
    100% { opacity: 0; }
}

/* The play area is the active layer where goblins move and are clicked. */
#play-area {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 40;
}

/* Foreground table prop; same size/positioning as the #game-world background, but layered
   in front of the play area (closer to the viewport) while staying behind the hands. */
#table-background {
    position: absolute;
    inset: 0;
    width: 1590px;
    height: 2975px;
    overflow: hidden;
    background-image: url("Assets/TableBackground.png");
    background-repeat: no-repeat;
    background-size: 1590px 2975px;
    background-position: top left;
    z-index: 70;
    pointer-events: none;
    user-select: none;
}

/* The goblin is rendered as a background sprite sheet and placed by JavaScript via animation frames and movement updates. */
#goblin,
.goblin-instance {
    position: absolute;
    left: 0;
    bottom: 27%;
    width: 256px;
    height: 256px;
    background-image: url("Assets/GoblinRun.png");
    background-repeat: no-repeat;
    background-size: 500% 500%;
    z-index: 50;
    image-rendering: pixelated;
    cursor: none;
    user-select: none;
    touch-action: manipulation;
}

/* The Sordia Vignti characters (Ellette, Cedric, Astryx, Steve, Graxen, Kyo): rendered as
   background sprite sheets the same way goblins are, but they never die - only react
   to hits/meetups and keep running across the lanes. */
.sv-character-instance {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 256px;
    height: 256px;
    background-repeat: no-repeat;
    background-size: 500% 500%;
    z-index: 50;
    image-rendering: pixelated;
    cursor: none;
    user-select: none;
    touch-action: manipulation;
}


/* Custom crosshair that replaces the OS cursor; positioned in JS with its click point at the image's center. */
#crosshair {
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 96px;
    transform: translate(-50%, -50%);
    z-index: 100001;
    pointer-events: none;
    user-select: none;
}

/* Highscore board banner pinned to the top-left corner; sized in JS the same way sprite scaling is handled per goblin. */
#highscore-board {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 656px;
    height: 194px;
    background-image: url("Assets/Banner.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    z-index: 90;
    pointer-events: none;
    user-select: none;
}

/* Digit readout centered on the parchment strip of the banner. */
#highscore-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    font-family: "SordiaVigntiPrint", monospace;
    font-size: 50px;
    letter-spacing: 6px;
    color: #3a2313;
    white-space: nowrap;
}

/* Run timer banner: a small copy of TimerBanner.png centered underneath the highscore board
   (left+width/2 of #highscore-board, not the whole screen). */
#timer-banner {
    position: absolute;
    top: 215px;
    left: 328px;
    transform: translateX(-50%);
    width: 156px;
    height: 48px;
    background-image: url("Assets/TimerBanner.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    z-index: 91;
    pointer-events: none;
    user-select: none;
}

/* Digit readout centered on the dark panel of the timer banner. */
#timer-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "SordiaVigntiPrint", monospace;
    font-size: 21px;
    letter-spacing: 1px;
    color: #f2e6c8;
    white-space: nowrap;
}

/* Stored power-up potions sit on opposite sides of the table. Their full sprites glow
   while ready; a shot consumes the slot and activates the corresponding effect. */
#power-up-layer {
    position: absolute;
    inset: 0;
    z-index: 80;
    pointer-events: none;
}

.power-up-slot {
    image-rendering: pixelated;
    cursor: none;
    pointer-events: auto;
}

.power-up-sprite {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

.power-up-sprite-full {
    transition: clip-path 350ms ease-out;
}

.power-up-slow .power-up-sprite-empty {
    background-image: url("Assets/SlowPotionEmpty.png");
}

.power-up-slow .power-up-sprite-full {
    background-image: url("Assets/SlowPotionFull.png");
}

.power-up-rage .power-up-sprite-empty {
    background-image: url("Assets/RagePotionEmpty.png");
}

.power-up-rage .power-up-sprite-full {
    background-image: url("Assets/RagePotionFull.png");
}

.power-up-slot.power-up-ready {
    animation: power-up-ready-glow 900ms ease-in-out infinite alternate;
}

@keyframes power-up-ready-glow {
    from { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    to { filter: brightness(1.3) drop-shadow(0 0 18px #fff4a8); }
}

/* One-shot goblin thrower popup, triggered when the Mischief meter fills. Sits above the
   play area/goblins but stays behind the table and hands, so it pops up as if from
   behind the table without ever rendering in front of it. Slides via transform (GPU
   composited) instead of animating "bottom", which would force a layout+paint every frame. */
#thrower-event {
    position: absolute;
    left: 50%;
    bottom: -656px;
    width: 656px;
    height: 656px;
    background-repeat: no-repeat;
    background-size: 500% 500%;
    image-rendering: pixelated;
    transform: translateX(-50%) translateY(0);
    transition: transform 0.3s ease-out;
    z-index: 65;
    pointer-events: none;
    user-select: none;
}

#thrower-event.thrower-event-visible {
    transform: translateX(-50%) translateY(-1216px);
}

/* Goblin Mischief meter banner pinned to the top-right corner; built from just two sprites
   (MeterEmpty/MeterFull), with the full layers clipped in JS to reveal progress. */
#mischief-meter {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 781px;
    height: 241px;
    z-index: 90;
    pointer-events: none;
    user-select: none;
}

/* Each layer is the full banner image; the empty layer shows through wherever a full
   layer above it is clipped away. Transition makes even a small gain visibly sweep in. */
.meter-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    pointer-events: none;
    user-select: none;
    transition: clip-path 0.35s ease-out;
}

/* Start with nothing revealed until UI.js sets an initial value. */
.meter-layer + .meter-layer {
    clip-path: inset(0 100% 0 0);
}

/* Plain-text progress readout so the raw value is visible without opening devtools. */
#mischief-meter-debug {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #f2e6ff;
    font-family: monospace;
    font-size: 16px;
    white-space: nowrap;
    z-index: 91;
}

/* Brief scale/glow pulse so a mischief gain reads clearly even when the sliver revealed is tiny. */
#mischief-meter.mischief-pulse {
    animation: mischief-pulse 0.35s ease-out;
}

@keyframes mischief-pulse {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/* Positions each hand's cursor-follow X via translate3d() (set in hands.js), fully covering
   #game-world so the nested .player-hand's own absolute offsets resolve exactly as before.
   Owns the z-index since applying a transform here creates a new stacking context, which
   would otherwise strand the child .player-hand's z-index inside it. */
.hand-wrap {
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;
}

/* The hands are large foreground sprites that sit below the visible viewport edge when idle and rise during firing. */
.player-hand {
    position: absolute;
    bottom: -420px;
    height: 1115px;
    width: auto;
    pointer-events: none;
    user-select: none;
    /* transition: transform 0.05s ease-out; */
    transform-origin: bottom center;
}

/* Hand base position is now driven entirely by translate3d() in hands.js. */
#left-hand,
#right-hand {
    left: 0;
}

#game:has(#power-up-layer.power-up-rage-active) #left-hand,
#game:has(#power-up-layer.power-up-rage-active) #right-hand {
    filter: drop-shadow(0 0 18px rgba(255, 45, 35, 0.95)) drop-shadow(0 0 42px rgba(180, 0, 0, 0.8));
    transition: filter 180ms ease-in-out;
}

#game:has(#power-up-layer.power-up-slow-active) #left-hand,
#game:has(#power-up-layer.power-up-slow-active) #right-hand {
    filter: drop-shadow(0 0 18px rgba(45, 135, 255, 0.95)) drop-shadow(0 0 42px rgba(0, 65, 210, 0.8));
    transition: filter 180ms ease-in-out;
}

/* Brief spark that pops in at a hand's fist the instant it fires; positioned via
   translate3d() in hands.js instead of left/bottom. */
.muzzle-flash {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 260px;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 90;
    opacity: 0;
    transform-origin: center center;
    transition: opacity 0.06s ease-out;
}

/* Mirroring and rotation are applied inline from hands.js's MUZZLE_FLASH_OFFSET instead. */
.muzzle-flash.active {
    opacity: 1;
}

/* When a hand is firing, the idle animation is temporarily disabled; the actual punch
   pose transform (combined with the base cursor-follow position) is set in hands.js. */
#left-hand.firing,
#right-hand.firing {
    animation: none !important;
}

/* Subtle idle bobbing keeps the hands feeling alive while not firing. */
@keyframes handIdleBob {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -5px, 0) rotate(0.5deg);
    }
}

#left-hand,
#right-hand {
    animation: handIdleBob 2.8s ease-in-out infinite;
}


/* Tiny point value that rises from a killed goblin */
.goblin-points {
    position: absolute;
    z-index: 80;
    pointer-events: none;
    user-select: none;

    font-family: "SordiaVigntiPrint", monospace;
    font-size: 18px;
    line-height: 1;

    color: #ff0101;
    text-shadow:
        1px 1px 0 #3a2313,
        -1px 1px 0 #3a2313,
        1px -1px 0 #3a2313,
        -1px -1px 0 #3a2313;

    white-space: nowrap;

    transform: translate(-50%, 0);
    opacity: 1;

    animation: goblinPointsRise 900ms ease-out forwards;
}

@keyframes goblinPointsRise {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    65% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -55px);
        opacity: 0;
    }
}


/* ============================================
   GAME OVER SPLAT
   ============================================ */

#game-over-splat {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 180px;
    height: 180px;

    z-index: 450;
    pointer-events: none;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0);

    background:
        radial-gradient(
            circle at center,
            #17051f 0%,
            #260735 42%,
            #110017 70%,
            #050006 100%
        );

    /* Irregular splat shape */
    border-radius:
        42% 58% 35% 65% /
        55% 38% 62% 45%;
}


/* Extra splat blobs */

#game-over-splat::before,
#game-over-splat::after {
    content: "";
    position: absolute;

    background: #17051f;

    border-radius:
        65% 35% 58% 42% /
        40% 62% 38% 60%;
}

#game-over-splat::before {
    width: 130px;
    height: 90px;

    left: -75px;
    top: 35px;

    transform: rotate(-28deg);
}

#game-over-splat::after {
    width: 110px;
    height: 145px;

    right: -60px;
    top: -45px;

    transform: rotate(34deg);
}


/* SPLAT IMPACT */

#game-over-splat.active {
    animation: gameOverSplat 500ms
        cubic-bezier(.15,.75,.15,1)
        forwards;
}


@keyframes gameOverSplat {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0);
    }

    12% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(0.25);
    }

    70% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(12);
    }

    100% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(14);
    }
}


/* ============================================
   LEADERBOARD FADE
   ============================================ */

#leaderboard-overlay.visible {
    display: flex;
    animation: leaderboardFadeIn 700ms ease-out forwards;
}

@keyframes leaderboardFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================
   TOP 10 LEADERBOARD
   ============================================ */

#leaderboard-overlay {
    position: absolute;
    inset: 0;
    z-index: 500;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.55);

    cursor: default;
}

#leaderboard-overlay.visible {
    display: flex;
}

#leaderboard-panel {
    position: relative;

    width: 1122px;
    height: 1338px;
    min-height: 0;

    flex: 0 0 auto;
    box-sizing: border-box;

    padding: 140px 78px 90px;

    font-family: "SordiaVigntiPrint", monospace;
    color: #2d1c10;

    cursor: default;
    
    transform: scale(1.1);
    transform-origin: center center;
    isolation: isolate;
}

#leaderboard-panel-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.leaderboard-menu-back {
    position: absolute;
    left: 50%;
    bottom: -140px;
    z-index: 2;
    width: 360px;
    min-height: 110px;
    padding: 18px 30px;
    border: 0;
    background: url("Assets/TimerBanner.png") center / 100% 100% no-repeat;
    color: #f2e6c8;
    font: 42px/1 "SordiaVigntiPrint", monospace;
    cursor: pointer;
    text-shadow: 2px 2px 0 #3a2313;
    transform: translateX(-50%);
}

/* ============================================
   LEADERBOARD CONTENT
   ============================================ */

/* HIGH SCORES heading — inside parchment */
#leaderboard-title {
    position: absolute;

    top: 220px;
    left: 250px;
    right: 250px;

    width: auto;
    margin: 0;

    text-align: center;

    font-family: "SordiaVigntiPrint", monospace;
    font-size: 42px;
    line-height: 1;

    color: #2d1c10;

    z-index: 2;
}


#leaderboard-list {
    position: absolute;

    top: 350px;

    left: 205px;
    right: 205px;

    width: auto;

    margin: 0;
    padding: 0;

    z-index: 2;
}


.leaderboard-row {
    display: grid;

    grid-template-columns: 58px minmax(0, 1fr) 145px;

    align-items: center;

    width: 100%;
    height: 57px;

    column-gap: 14px;

    margin: 0;
    padding: 0;

    font-family: "SordiaVigntiPrint", monospace;
    font-size: 36px;
    line-height: 1;

    color: #2d1c10;
}


.leaderboard-position {
    text-align: right;
    white-space: nowrap;
}


.leaderboard-player {
    min-width: 0;

    text-align: left;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.leaderboard-score {
    width: 145px;

    text-align: right;

    white-space: nowrap;
}


/* ============================================
   QUALIFYING SCORE FORM
   ============================================ */

#leaderboard-form {
    position: absolute;

    left: 220px;
    right: 220px;

    bottom: 55px;

    width: auto;

    display: none;
    flex-direction: column;

    gap: 10px;

    margin: 0;

    z-index: 2;
}

#leaderboard-play-again,
#leaderboard-quit {
    width: 350px;
    height: 92px;
    flex: 0 0 350px;

    padding: 0;
    border: none;

    background-image: url("Assets/TimerBanner.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-color: transparent;

    color: #f2e6c8;

    font-family: "SordiaVigntiPrint", monospace;
    font-size: 28px;

    cursor: pointer;

    image-rendering: pixelated;
}

#leaderboard-gameover-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    margin-top: 10px;
}

#leaderboard-play-again:hover,
#leaderboard-quit:hover {
    transform: scale(1.05);
}

#leaderboard-play-again:active,
#leaderboard-quit:active {
    transform: scale(0.97);
}


#leaderboard-new-score {
    margin: 0 0 32px 0;

    text-align: center;

    font-family: "SordiaVigntiPrint", monospace;
    font-size: 41px;

    color: #2d1c10;
}


#leaderboard-name,
#leaderboard-email {
    box-sizing: border-box;

    width: 100%;

    padding: 9px 10px;

    border: 2px solid #49301c;

    background: rgba(242, 230, 200, 0.88);

    color: #2d1c10;

    font-family: "SordiaVigntiPrint", monospace;
    font-size: 17px;

    outline: none;

    user-select: text;
    -webkit-user-select: text;

    cursor: text;
}


#leaderboard-name:focus,
#leaderboard-email:focus {
    border-color: #1e130b;
}


#leaderboard-privacy {
    font-size: 11px;
    line-height: 1.3;

    text-align: center;

    color: #2d1c10;
}


#leaderboard-error {
    min-height: 16px;

    text-align: center;

    font-size: 12px;
}


#leaderboard-submit {
    align-self: center;

    padding: 8px 24px;

    border: 2px solid #49301c;

    background: #d8c18b;

    color: #2d1c10;

    font-family: "SordiaVigntiPrint", monospace;
    font-size: 18px;

    cursor: pointer;
}



/* ============================================
   SV MAGICAL SWIRL TELEPORT
   ============================================ */

.sv-teleport-effect {
    position: fixed;

    pointer-events: none;

    overflow: visible;

    z-index: 2000;
}


/* ============================================
   SPIRAL ENERGY
   ============================================ */

.sv-teleport-swirl {
    position: absolute;

    border-radius: 50%;

    background: #d8b4fe;

    box-shadow:
        0 0 6px #c084fc;        

    transform:
        translate(-50%, -50%)
        scale(0);

    animation:
        svSwirlAppear 520ms
        steps(10, end)
        var(--swirl-delay)
        forwards;
}


@keyframes svSwirlAppear {

    0% {
        transform:
            translate(-50%, 20px)
            scale(0);

        opacity: 0;
    }

    25% {
        transform:
            translate(-50%, 10px)
            scale(1);

        opacity: 1;
    }

    70% {
        transform:
            translate(-50%, -8px)
            scale(1);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -30px)
            scale(0);

        opacity: 0;
    }
}


/* ============================================
   MAGIC PARTICLES
   ============================================ */

.sv-teleport-magic-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 5px #a855f7;

    animation:
        svTeleportMagicParticle
        450ms
        steps(7, end)
        forwards;
}


@keyframes svTeleportMagicParticle {

    0% {
        transform:
            translate(0, 0)
            scale(0);

        opacity: 0;
    }

    20% {
        transform:
            translate(0, 0)
            scale(1);

        opacity: 1;
    }

    100% {
        transform:
            translate(
                var(--particle-x),
                var(--particle-y)
            )
            scale(0);

        opacity: 0;
    }
}


/* ============================================
   PORTAL AT FEET
   ============================================ */

.sv-teleport-portal {
    position: absolute;

    left: 50%;
    bottom: 3%;

    width: 60%;
    height: 12%;

    border: 5px solid #a855f7;

    border-radius: 50%;

    transform:
        translateX(-50%)
        scale(0);

    opacity: 0;

    box-shadow:
        0 0 6px #ffffff,
        0 0 12px #c084fc,
        0 0 20px #7e22ce;

    animation:
        svTeleportPortal
        650ms
        steps(9, end)
        forwards;
}


@keyframes svTeleportPortal {

    0% {
        transform:
            translateX(-50%)
            scale(0);

        opacity: 0;
    }

    20% {
        transform:
            translateX(-50%)
            scale(0.7);

        opacity: 1;
    }

    55% {
        transform:
            translateX(-50%)
            scale(1);

        opacity: 1;
    }

    100% {
        transform:
            translateX(-50%)
            scale(0.25);

        opacity: 0;
    }
}


/* ============================================
   CHARACTER DISSOLVE
   ============================================ */

.sv-teleporting {
    animation:
        svCharacterSwirlTeleport
        500ms
        steps(8, end)
        forwards;
}


@keyframes svCharacterSwirlTeleport {

    0% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    55% {
        opacity: 0.8;
    }

    75% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
    }
}


/* ============================================================
   PRE-START STATE

   The loader/countdown covers the game while JavaScript
   creates and positions the hands, targets, crosshair and UI.
   ============================================================ */

#game.game-prestart #play-area,
#game.game-prestart .hand-wrap,
#game.game-prestart .muzzle-flash,
#game.game-prestart #highscore-board,
#game.game-prestart #timer-banner,
#game.game-prestart #mischief-meter {
    visibility: hidden;
}


/*
   This is only the original HTML placeholder.
   Real goblins are .goblin-instance elements created by JS.
*/
#goblin {
    display: none !important;
}




/* ============================================================
   GAME START COUNTDOWN

   This exists INSIDE #game.
   It therefore automatically receives exactly the same
   scaling as the background and every other game element.
   ============================================================ */

#game-countdown {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    /*
       This is the mask over the game while it prepares.
       No blur/filter/backdrop-filter because those caused
       mobile rendering trouble earlier.
    */
    background: rgba(0, 0, 0, 0.58);

    z-index: 99998;

    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;
}

#game-countdown-text {
    font-family: "SordiaVigntiPrint", monospace;

    /*
       Design-space pixels.
       #game handles the mobile/desktop scaling.
    */
    font-size: 240px;
    line-height: 1;

    color: #f2e6c8;

    text-align: center;

    text-shadow:
        0 8px 0 #3a2313,
        0 14px 22px rgba(0, 0, 0, 0.75);
}