/* ==========================================================
   BACKGROUND 1
   Arcade UI Kit — Sunset Grid (main menu)
   Flat 3-band sunset sky, a striped flat sun, a receding
   perspective grid floor, two flat cabinet silhouettes,
   a floating coin and a floating joystick.
========================================================== */

.background--1 {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: var(--ink);
}


/* ==========================================================
   SKY (flat hard-edged bands, not a blend)
========================================================== */

.background--1 .background__sky {
    position: absolute;

    inset: 0;

    background: linear-gradient(
        180deg,
        var(--ink) 0%, var(--ink) 32%,
        var(--primary) 32%, var(--primary) 62%,
        var(--secondary) 62%, var(--secondary) 100%
    );
}


/* ==========================================================
   STARS (flat pixel squares)
========================================================== */

.background--1 .background__stars {
    position: absolute;

    inset: 0;

    top: 0;
    height: 32%;
}

.background--1 .background__stars span {
    position: absolute;

    width: 4px;
    height: 4px;

    background: #ffffff;
}

.background--1 .background__stars span:nth-child(1){ top:14%; left:12%; }
.background--1 .background__stars span:nth-child(2){ top:22%; left:30%; width:3px; height:3px; }
.background--1 .background__stars span:nth-child(3){ top:10%; left:52%; }
.background--1 .background__stars span:nth-child(4){ top:26%; left:70%; width:3px; height:3px; }
.background--1 .background__stars span:nth-child(5){ top:16%; left:86%; }
.background--1 .background__stars span:nth-child(6){ top:32%; left:44%; width:3px; height:3px; }


/* ==========================================================
   SUN (flat circle with cut stripes)
========================================================== */

.background--1 .background__sun {
    position: absolute;

    top: 24%;
    left: 50%;

    width: 130px;
    height: 130px;

    background: var(--warning);

    border: 3px solid var(--ink);

    border-radius: 50%;

    transform: translateX(-50%);

    overflow: hidden;
}

.background--1 .background__sun-stripe {
    position: absolute;

    left: 0;

    width: 100%;

    height: 8px;

    background: var(--secondary);
}

.background--1 .background__sun-stripe:nth-child(1){ bottom: 12px; }
.background--1 .background__sun-stripe:nth-child(2){ bottom: 28px; }
.background--1 .background__sun-stripe:nth-child(3){ bottom: 44px; }


/* ==========================================================
   GRID FLOOR (perspective)
========================================================== */

.background--1 .background__grid {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 34%;

    overflow: hidden;

    background: var(--ink);

    border-top: 3px solid var(--secondary);
}

.background--1 .background__grid-lines {
    position: absolute;

    inset: -40% 0 0 0;

    background-image:
        repeating-linear-gradient(90deg, var(--secondary) 0 2px, transparent 2px 40px),
        repeating-linear-gradient(0deg, var(--secondary) 0 2px, transparent 2px 26px);

    opacity: .55;

    transform: perspective(220px) rotateX(58deg);

    transform-origin: 50% 0%;
}


/* ==========================================================
   ARCADE CABINETS
========================================================== */

.background--1 .background__cabinet {
    position: absolute;

    bottom: 14%;

    width: 46px;
    height: 78px;

    background: var(--surface);

    border: 3px solid var(--ink);

    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.background--1 .background__cabinet--left { left: 6%; }
.background--1 .background__cabinet--right { right: 6%; }

.background--1 .background__cabinet-screen {
    position: absolute;

    top: 10px;
    left: 6px;

    width: 30px;
    height: 24px;

    background: var(--primary);

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

.background--1 .background__cabinet-joystick {
    position: absolute;

    top: 44px;
    left: 12px;

    width: 10px;
    height: 10px;

    background: var(--warning);

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

    border-radius: 50%;
}

.background--1 .background__cabinet-btn {
    position: absolute;

    top: 46px;
    right: 8px;

    width: 8px;
    height: 8px;

    background: var(--secondary);

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

    border-radius: 50%;
}


/* ==========================================================
   FLOATING COIN
========================================================== */

.background--1 .background__coin {
    position: absolute;

    top: 46%;
    left: 18%;

    width: 30px;
    height: 30px;

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

    background: var(--warning);

    border: 3px solid var(--ink);

    border-radius: 50%;

    color: var(--ink);

    font-family: var(--font-family-mono);
    font-size: 13px;
    font-weight: 700;
}


/* ==========================================================
   FLOATING JOYSTICK
========================================================== */

.background--1 .background__joystick {
    position: absolute;

    top: 44%;
    right: 16%;

    width: 12px;
    height: 34px;

    background: var(--surface);

    border: 3px solid var(--ink);

    border-radius: 3px;
}

.background--1 .background__joystick-ball {
    position: absolute;

    top: -14px;
    left: 50%;

    width: 26px;
    height: 26px;

    background: var(--danger);

    border: 3px solid var(--ink);

    border-radius: 50%;

    transform: translateX(-50%);
}


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

@media (max-width: 480px) {

    .background--1 .background__sun { width: 96px; height: 96px; }
    .background--1 .background__cabinet { width: 36px; height: 62px; }
    .background--1 .background__coin { width: 24px; height: 24px; }

}

/* ==========================================================
   BACKGROUND 2
   Arcade UI Kit — Neon Marquee (secondary / bonus screen)
   Solid dark sky, twinkling pixel stars, a lit marquee
   arch, a cooler grid floor, floating power-ups.
========================================================== */

.background--2 {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: var(--ink);
}

.background--2 .background-2__sky {
    position: absolute;

    inset: 0;

    background: var(--ink);
}

.background--2 .background-2__stars span {
    position: absolute;

    width: 4px;
    height: 4px;

    background: var(--secondary);

    animation: bg2-blink 1.4s steps(2, jump-none) infinite;
}

.background--2 .background-2__stars span:nth-child(1){ top:10%; left:10%; }
.background--2 .background-2__stars span:nth-child(2){ top:16%; left:26%; animation-delay:.2s; width:3px; height:3px; }
.background--2 .background-2__stars span:nth-child(3){ top:8%; left:46%; animation-delay:.4s; }
.background--2 .background-2__stars span:nth-child(4){ top:20%; left:64%; animation-delay:.1s; width:3px; height:3px; }
.background--2 .background-2__stars span:nth-child(5){ top:12%; left:80%; animation-delay:.3s; }
.background--2 .background-2__stars span:nth-child(6){ top:24%; left:92%; animation-delay:.5s; width:3px; height:3px; }

@keyframes bg2-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}


/* ==========================================================
   MARQUEE ARCH
========================================================== */

.background--2 .background-2__marquee {
    position: absolute;

    top: 12%;
    left: 50%;

    width: 62%;

    height: 90px;

    background: var(--primary);

    border: 3px solid var(--surface);

    border-radius: 999px 999px 0 0;

    transform: translateX(-50%);
}

.background--2 .background-2__marquee-bulb {
    position: absolute;

    top: 10px;

    width: 9px;
    height: 9px;

    background: var(--warning);

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

    border-radius: 50%;
}

.background--2 .background-2__marquee-bulb:nth-child(1){ left: 10%; }
.background--2 .background-2__marquee-bulb:nth-child(2){ left: 26%; top: 2px; }
.background--2 .background-2__marquee-bulb:nth-child(3){ left: 44%; top: -2px; }
.background--2 .background-2__marquee-bulb:nth-child(4){ right: 44%; top: -2px; }
.background--2 .background-2__marquee-bulb:nth-child(5){ right: 26%; top: 2px; }
.background--2 .background-2__marquee-bulb:nth-child(6){ right: 10%; }


/* ==========================================================
   GRID FLOOR
========================================================== */

.background--2 .background-2__grid {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 32%;

    overflow: hidden;

    background: var(--ink);

    border-top: 3px solid var(--info);
}

.background--2 .background-2__grid-lines {
    position: absolute;

    inset: -40% 0 0 0;

    background-image:
        repeating-linear-gradient(90deg, var(--info) 0 2px, transparent 2px 40px),
        repeating-linear-gradient(0deg, var(--info) 0 2px, transparent 2px 26px);

    opacity: .5;

    transform: perspective(220px) rotateX(58deg);

    transform-origin: 50% 0%;
}


/* ==========================================================
   FLOATING POWER-UPS
========================================================== */

.background--2 .background-2__power {
    position: absolute;

    width: 26px;
    height: 26px;

    border: 3px solid var(--ink);
}

.background--2 .background-2__power--star {
    top: 50%;
    left: 14%;

    background: var(--warning);

    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
    );

    border: none;
}

.background--2 .background-2__power--gem {
    top: 58%;
    right: 14%;

    background: var(--info);

    transform: rotate(45deg);

    border-radius: 4px;
}


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

@media (max-width: 480px) {

    .background--2 .background-2__marquee { height: 70px; }

}

/* ==========================================================
   BACKGROUND 3
   Arcade UI Kit — Game Over / Alert
   Deep red-black sky, a diagonal hazard-stripe band, a
   red-tinted grid floor, flashing corner accents.
========================================================== */

.background--3 {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: var(--ink);
}

.background--3 .background-3__sky {
    position: absolute;

    inset: 0;

    background: linear-gradient(
        180deg,
        var(--ink) 0%, var(--ink) 55%,
        var(--danger) 55%, var(--danger) 100%
    );
}


/* ==========================================================
   HAZARD STRIPE BAND
========================================================== */

.background--3 .background-3__hazard {
    position: absolute;

    top: 30%;

    right: 0;
    left: 0;

    height: 34px;

    background-image: repeating-linear-gradient(
        45deg,
        var(--warning) 0 18px,
        var(--ink) 18px 36px
    );

    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
}


/* ==========================================================
   FLASHING MARKS
========================================================== */

.background--3 .background-3__flash {
    position: absolute;

    width: 16px;
    height: 16px;

    background: var(--warning);

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

    transform: rotate(45deg);

    animation: bg3-blink 1s steps(2, jump-none) infinite;
}

.background--3 .background-3__flash:nth-child(1){ top: 12%; left: 10%; }
.background--3 .background-3__flash:nth-child(2){ top: 16%; right: 12%; animation-delay:.3s; }
.background--3 .background-3__flash:nth-child(3){ top: 62%; left: 16%; animation-delay:.6s; }

@keyframes bg3-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .2; }
}


/* ==========================================================
   GRID FLOOR
========================================================== */

.background--3 .background-3__grid {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 30%;

    overflow: hidden;

    background: var(--ink);

    border-top: 3px solid var(--danger);
}

.background--3 .background-3__grid-lines {
    position: absolute;

    inset: -40% 0 0 0;

    background-image:
        repeating-linear-gradient(90deg, var(--danger) 0 2px, transparent 2px 40px),
        repeating-linear-gradient(0deg, var(--danger) 0 2px, transparent 2px 26px);

    opacity: .55;

    transform: perspective(220px) rotateX(58deg);

    transform-origin: 50% 0%;
}


/* ==========================================================
   BROKEN LIFE ICON
========================================================== */

.background--3 .background-3__life {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 60px;
    height: 54px;

    transform: translate(-50%, -50%);
}

.background--3 .background-3__life-half {
    position: absolute;

    top: 0;

    width: 28px;
    height: 40px;

    background: var(--surface);

    border: 3px solid var(--ink);
}

.background--3 .background-3__life-half:nth-child(1) {
    left: 0;

    border-radius: 26px 4px 4px 26px;
}

.background--3 .background-3__life-half:nth-child(2) {
    right: 0;

    border-radius: 4px 26px 26px 4px;

    transform: translateY(6px);
}