:root {
    --night: #14002e;
    --deep: #2a0050;
    --magenta: #ff2e97;
    --cyan: #00e5ff;
    --sun: #ffd23f;
    --orange: #ff9a3c;
    --ink: #fff4fb;
    --display: 'Monoton', 'Impact', 'Arial Black', sans-serif;
    --tech: 'Orbitron', 'Trebuchet MS', 'Arial Black', sans-serif;
    --crt: 'VT323', 'Courier New', monospace;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

body {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, var(--night) 0%, var(--deep) 46%, #7a1478 61%, var(--night) 61.2%, var(--night) 100%);
    color: var(--ink);
    font-family: var(--tech);
}

.stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 44% 24%, var(--cyan) 50%, transparent 52%),
        radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 78% 28%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 90% 10%, var(--magenta) 50%, transparent 52%),
        radial-gradient(1px 1px at 6% 36%, #fff 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 35% 40%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 72% 42%, #fff 50%, transparent 52%),
        radial-gradient(1px 1px at 95% 38%, #fff 50%, transparent 52%);
    animation: twinkle 4s ease-in-out infinite alternate;
}

.sun {
    position: absolute;
    left: 50%;
    top: 7%;
    width: min(64vw, 54vh, 520px);
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--sun) 0%, var(--orange) 38%, var(--magenta) 72%, #b0127a 100%);
    box-shadow: 0 0 80px 10px rgba(255, 46, 151, 0.55), 0 0 200px 40px rgba(255, 46, 151, 0.25);
    filter: brightness(0.78) saturate(1.1);
    -webkit-mask-image: linear-gradient(
        180deg,
        #000 0%, #000 44%,
        transparent 44%, transparent 47%,
        #000 47%, #000 58%,
        transparent 58%, transparent 62%,
        #000 62%, #000 71%,
        transparent 71%, transparent 76%,
        #000 76%, #000 83%,
        transparent 83%, transparent 89%,
        #000 89%, #000 94%,
        transparent 94%, transparent 100%
    );
    mask-image: linear-gradient(
        180deg,
        #000 0%, #000 44%,
        transparent 44%, transparent 47%,
        #000 47%, #000 58%,
        transparent 58%, transparent 62%,
        #000 62%, #000 71%,
        transparent 71%, transparent 76%,
        #000 76%, #000 83%,
        transparent 83%, transparent 89%,
        #000 89%, #000 94%,
        transparent 94%, transparent 100%
    );
}

.memphis {
    position: absolute;
    pointer-events: none;
    opacity: 0.9;
}

.m-tri-a {
    left: 7%;
    top: 16%;
    width: clamp(28px, 5vh, 60px);
    aspect-ratio: 1;
    background: var(--cyan);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    --r: -14deg;
    transform: rotate(var(--r));
    box-shadow: 0 0 20px var(--cyan);
    animation: float 5s ease-in-out infinite alternate;
}

.m-tri-b {
    right: 8%;
    top: 30%;
    width: clamp(24px, 4vh, 48px);
    aspect-ratio: 1;
    background: var(--sun);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    --r: 18deg;
    transform: rotate(var(--r));
    animation: float 6s ease-in-out infinite alternate-reverse;
}

.m-ring {
    right: 14%;
    top: 12%;
    width: clamp(30px, 6vh, 70px);
    aspect-ratio: 1;
    border: 6px solid var(--magenta);
    border-radius: 50%;
    box-shadow: 0 0 16px var(--magenta), inset 0 0 16px var(--magenta);
    animation: float 4.5s ease-in-out infinite alternate;
}

.m-zig {
    left: 12%;
    top: 40%;
    width: clamp(72px, 12vh, 140px);
    height: clamp(12px, 2vh, 24px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' preserveAspectRatio='none'%3E%3Cpolyline points='0,11 6,1 12,11 18,1 24,11' fill='none' stroke='%23ffd23f' stroke-width='2.5' stroke-linejoin='miter'/%3E%3C/svg%3E") 0 0 / 24px 100% repeat-x;
    filter: drop-shadow(0 0 6px var(--sun));
    animation: float 5.5s ease-in-out infinite alternate-reverse;
}

.m-dots {
    right: 6%;
    top: 52%;
    width: clamp(50px, 9vh, 100px);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--cyan) 3px, transparent 4px) 0 0 / 14px 14px;
    filter: drop-shadow(0 0 5px var(--cyan));
}

.m-square {
    left: 5%;
    top: 58%;
    width: clamp(20px, 4vh, 44px);
    aspect-ratio: 1;
    background: var(--magenta);
    --r: 24deg;
    transform: rotate(var(--r));
    box-shadow: 0 0 18px var(--magenta);
    animation: float 4s ease-in-out infinite alternate;
}

.horizon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 38%;
    height: 3px;
    background: var(--cyan);
    box-shadow: 0 0 18px 4px var(--cyan);
}

.floor {
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: 0;
    height: 38%;
    perspective: 340px;
    perspective-origin: 50% 0;
    overflow: hidden;
}

.floor::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200%;
    transform-origin: 50% 0;
    transform: rotateX(62deg);
    background-image:
        linear-gradient(var(--cyan) 2px, transparent 2px),
        linear-gradient(90deg, var(--magenta) 2px, transparent 2px);
    background-size: 70px 70px;
    animation: drive 1.4s linear infinite;
    filter: drop-shadow(0 0 6px var(--cyan));
}

.floor::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--night) 0%, rgba(20, 0, 46, 0) 55%);
}

.palm {
    position: absolute;
    bottom: 1%;
    height: min(58vh, 520px);
    width: auto;
    pointer-events: none;
    color: #0a0018;
    filter: drop-shadow(0 0 3px rgba(255, 46, 151, 0.9)) drop-shadow(0 0 14px rgba(255, 46, 151, 0.45));
}

.palm-l {
    left: -7%;
}

.palm-r {
    right: -7%;
    transform: scaleX(-1);
}

.palm-l2 {
    left: 11%;
    height: min(34vh, 320px);
    color: #14002e;
    opacity: 0.9;
}

.palm-r2 {
    right: 11%;
    height: min(30vh, 290px);
    transform: scaleX(-1);
    color: #14002e;
    opacity: 0.9;
}

.vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}

.scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
}

.track {
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    top: -20px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    animation: tracking 7s linear infinite;
}

.osd {
    position: absolute;
    top: max(0.8rem, env(safe-area-inset-top, 0px));
    left: max(1rem, env(safe-area-inset-left, 0px));
    font-family: var(--crt);
    font-size: clamp(1.3rem, 3.2vh, 2rem);
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan);
}

.osd b {
    display: inline-block;
    font-weight: 400;
    margin-right: 0.4em;
    animation: blink 1.2s steps(1) infinite;
}

.osd-r {
    left: auto;
    right: max(1rem, env(safe-area-inset-right, 0px));
}

main {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(0.35rem, 1.8vh, 1.4rem);
    padding: 3.2rem 1rem 3.2rem;
}

.badge {
    font-family: var(--crt);
    font-size: clamp(1.1rem, 3.2vh, 2rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--night);
    background: var(--sun);
    padding: 0 1rem 0 1.35rem;
    box-shadow: 4px 4px 0 var(--magenta);
    transform: rotate(-2deg);
}

.logo {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: min(11.5vw, 12.5vh);
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow:
        0 0 6px #fff,
        0 0 18px var(--magenta),
        0 0 42px var(--magenta),
        0 0 90px var(--magenta);
    animation: buzz 6s infinite;
}

.logo .eighty {
    display: block;
    color: var(--cyan);
    text-shadow:
        0 0 6px #fff,
        0 0 18px var(--cyan),
        0 0 42px var(--cyan),
        0 0 90px var(--cyan);
}

.info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.25rem, 1.2vh, 0.8rem);
    width: min(92vw, 42rem);
    padding: clamp(0.5rem, 1.8vh, 1.1rem) clamp(0.8rem, 3vw, 1.6rem);
    background: rgba(14, 0, 34, 0.86);
    border: 2px solid var(--cyan);
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.55), inset 0 0 18px rgba(0, 229, 255, 0.18);
}

.headline {
    margin: 0;
    font-size: clamp(0.95rem, 3vh, 1.7rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sun);
    text-shadow: 2px 2px 0 var(--magenta), 0 0 14px rgba(255, 154, 60, 0.75);
}

.sub {
    margin: 0;
    max-width: 36rem;
    font-family: var(--crt);
    font-size: clamp(1.2rem, 3vh, 1.8rem);
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 46, 151, 0.8);
}

.launch {
    margin: 0;
    font-family: var(--crt);
    font-size: clamp(1.2rem, 3vh, 1.7rem);
    letter-spacing: 0.12em;
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.9);
}

.countdown {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(0.4rem, 1.6vw, 1.1rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.unit {
    min-width: clamp(4rem, 17vw, 8.6rem);
    padding: clamp(0.3rem, 1.2vh, 0.9rem) 0.4rem clamp(0.3rem, 1vh, 0.7rem);
    background: rgba(10, 0, 28, 0.8);
    border: 3px solid var(--magenta);
    box-shadow: 0 0 16px var(--magenta), inset 0 0 18px rgba(255, 46, 151, 0.35);
}

.unit:nth-child(even) {
    border-color: var(--cyan);
    box-shadow: 0 0 16px var(--cyan), inset 0 0 18px rgba(0, 229, 255, 0.3);
}

.num {
    display: block;
    font-family: var(--crt);
    font-size: min(11vw, 10vh);
    line-height: 0.95;
    color: #fff;
    text-shadow: 0 0 8px var(--sun), 0 0 22px var(--orange);
    font-variant-numeric: tabular-nums;
}

.label {
    display: block;
    margin-top: 0.2rem;
    font-size: clamp(0.55rem, 1.5vh, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.85;
}

.live {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}

.live strong {
    font-family: var(--display);
    font-weight: 400;
    font-size: min(8vw, 9vh);
    color: var(--sun);
    text-shadow: 0 0 10px var(--sun), 0 0 40px var(--orange);
}

.live span {
    font-family: var(--crt);
    font-size: clamp(1.3rem, 3.4vh, 2rem);
    color: var(--cyan);
}

.is-live .countdown, .is-live .launch {
    display: none;
}

.is-live .live {
    display: flex;
}

.eq {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: clamp(26px, 6vh, 54px);
}

.eq i {
    display: block;
    width: 9px;
    height: 100%;
    transform-origin: bottom;
    background: linear-gradient(180deg, var(--magenta), var(--cyan));
    box-shadow: 0 0 8px rgba(255, 46, 151, 0.7);
    animation: bounce 1s ease-in-out infinite alternate;
}

.eq i:nth-child(3n) {
    animation-duration: 0.7s;
}

.eq i:nth-child(4n) {
    animation-duration: 1.3s;
}

.eq i:nth-child(5n) {
    animation-duration: 0.55s;
}

.eq i:nth-child(2n) {
    animation-delay: -0.4s;
}

.eq i:nth-child(3n) {
    animation-delay: -0.8s;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--crt);
    font-size: clamp(1.1rem, 2.6vh, 1.5rem);
}

.tags li {
    padding: 0 0.7rem;
    border: 1px solid rgba(255, 244, 251, 0.45);
    color: #ffd7ee;
    background: rgba(20, 0, 46, 0.6);
}

footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    padding: 0.6rem 1rem max(0.6rem, env(safe-area-inset-bottom, 0px));
    text-align: center;
    font-family: var(--crt);
    font-size: clamp(1.05rem, 2.6vh, 1.3rem);
    letter-spacing: 0.06em;
    color: #ffd7ee;
    background: linear-gradient(0deg, rgba(20, 0, 46, 0.95), rgba(20, 0, 46, 0));
}

@keyframes drive {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 70px;
    }
}

@keyframes twinkle {
    from {
        opacity: 0.55;
    }
    to {
        opacity: 1;
    }
}

@keyframes bounce {
    from {
        transform: scaleY(0.15);
    }
    to {
        transform: scaleY(1);
    }
}

@keyframes float {
    from {
        transform: translateY(0) rotate(var(--r, 0deg));
    }
    to {
        transform: translateY(-14px) rotate(var(--r, 0deg));
    }
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

@keyframes tracking {
    from {
        top: -20px;
    }
    to {
        top: 105%;
    }
}

@keyframes buzz {
    0%, 17%, 19%, 23%, 100% {
        opacity: 1;
    }
    18% {
        opacity: 0.55;
    }
    21% {
        opacity: 0.8;
    }
    22% {
        opacity: 0.5;
    }
}

@media (max-height: 700px) {
    .tags {
        display: none;
    }
}

@media (max-width: 640px) and (max-height: 900px) {
    .tags {
        display: none;
    }
}

@media (max-height: 600px) {
    .sub {
        display: none;
    }
    .eq {
        display: none;
    }
}

@media (max-height: 480px) {
    .headline {
        display: none;
    }
    .launch {
        display: none;
    }
    .palm {
        display: none;
    }
    .info {
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
}

@media (max-width: 640px) {
    .palm {
        height: min(40vh, 380px);
    }
    .palm-l {
        left: -22%;
    }
    .palm-r {
        right: -22%;
    }
    .palm-l2, .palm-r2 {
        display: none;
    }
    .m-zig, .m-dots {
        display: none;
    }
    .unit {
        min-width: 0;
        flex: 1 1 0;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }
    .countdown {
        width: 100%;
        max-width: 26rem;
        gap: 0.35rem;
    }
    .num {
        font-size: min(9.5vw, 8vh);
    }
    .sub {
        font-size: clamp(1.05rem, 2.6vh, 1.4rem);
    }
    .headline {
        letter-spacing: 0.06em;
    }
    .launch {
        letter-spacing: 0.05em;
    }
    .info {
        padding: 0.5rem 0.8rem;
    }
    footer {
        font-size: 1rem;
    }
    .label {
        letter-spacing: 0.08em;
    }
    .osd-r {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floor::before, .stars, .eq i, .logo, .track, .osd b, .memphis {
        animation: none;
    }
    .eq i {
        transform: scaleY(0.6);
    }
}