/* ============================================================
   GAMEX.ZONE – UNDER CONSTRUCTION (index.html)
   Nezávislé styly stránky .coming-page.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap");

:root {
    --text: #f1f4ef;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    font: 16px/1.65 Barlow,Arial,sans-serif;
}

.container {
    width: min(1180px,calc(100% - 44px));
    margin: auto;
}

.footer {
    border-top: 1px solid #76bc1030;
}

:root {
    --bg: #070906;
    --surface: #141a12;
    --line: #35412c;
    --orange: #ffb02e;
    --muted: #aeb8a4;
}

body {
    background: radial-gradient(circle at 22% 8%,rgba(118,188,16,.065),transparent 34%),radial-gradient(circle at 88% 38%,rgba(255,176,46,.045),transparent 30%),#070906;
}

.footer {
    background: linear-gradient(180deg,#12180e,#070906);
}

:root {
    --accent: #76bc10;
    --accent-light: #9bea12;
    --accent-dark: #365f08;
}

.footer {
    border-top-color: rgba(118,188,16,.28);
}

/* ===== STYLY STRÁNKY PŘIPRAVUJEME ===== */

body.coming-page {
    --bg: #070906;
    --neon: #c6ff3d;
    --accent: #ffb02e;
    --accent-soft: #ffd36a;
    --white: #ffffff;
    --soft: rgba(255,255,255,0.65);
}

body.coming-page, body.coming-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

body.coming-page {
    color: var(--white);
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

html:has(body.coming-page) {
    overflow-x: hidden;
}

.coming-page .scene {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 22% 18%, rgba(198,255,61,0.11), transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(255,176,46,0.10), transparent 32%),
    radial-gradient(circle at top, #1a2010, var(--bg) 68%);
}

.coming-page .x-bg, .coming-page .x-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-size: 300% 300%;
}

.coming-page .x-bg {
    background: linear-gradient(45deg,
      transparent 46%,
      rgba(198,255,61,0.085) 50%,
      transparent 54%),
    linear-gradient(-45deg,
      transparent 46%,
      rgba(255,176,46,0.065) 50%,
      transparent 54%);
    animation: moveX 22s linear infinite;
}

.coming-page .x-glow {
    background: linear-gradient(45deg,
      transparent 47%,
      rgba(198,255,61,0.13) 50%,
      transparent 53%),
    linear-gradient(-45deg,
      transparent 47%,
      rgba(255,176,46,0.10) 50%,
      transparent 53%);
    animation: moveX 22s linear infinite, pulseX 6s ease-in-out infinite;
}

@keyframes moveX {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 200%;
    }
}

@keyframes pulseX {
    0%,100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.75;
    }
}

.coming-page .code-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    width: 100%;
}

.coming-page .code-line {
    position: absolute;
    left: -60%;
    white-space: nowrap;
    font-family: "Courier New", monospace;
    font-size: 16px;
    color: rgba(198,255,61,0.50);
    opacity: 0;
    animation: flowCode linear infinite;
}

@keyframes flowCode {
    0% {
        transform: translateX(0);
        width: 0;
        opacity: 0;
    }

    5% {
        opacity: 0.55;
    }

    75% {
        width: 100%;
        opacity: 0.40;
    }

    100% {
        transform: translateX(160%);
        opacity: 0;
    }
}

.coming-page .container {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 760px;
    padding: 50px;
}

.coming-page .logo {
    font-size: 3.4rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--neon);
    text-shadow: 0 0 12px rgba(198,255,61,0.90),
    0 0 30px rgba(255,176,46,0.38);
}

.coming-page .logo img {
    max-height: 150px;
    max-width: 100%;
    height: auto;
    animation: glowPulseLogo 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255,176,46,0.30));
}

@keyframes glowPulseLogo {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(198,255,61,0.72));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(255,176,46,0.72));
    }
}

.coming-page .subtitle {
    margin-top: 16px;
    font-size: 1.3rem;
    color: var(--soft);
    letter-spacing: 1px;
}

.coming-page .divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon) 35%, var(--accent) 65%, transparent);
    margin: 35px auto;
    box-shadow: 0 0 16px rgba(198,255,61,0.42), 0 0 30px rgba(255,176,46,0.18);
}

.coming-page .message {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

.coming-page .highlight {
    color: var(--neon);
    text-shadow: 0 0 8px rgba(198,255,61,0.65);
}

.coming-page .loader {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.08);
    border-top: 2px solid var(--neon);
    border-right: 2px solid var(--accent);
    animation: spin 1.6s linear infinite;
    margin: 0 auto;
    box-shadow: 0 0 25px rgba(198,255,61,0.36),
    inset 0 0 20px rgba(255,176,46,0.25);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.coming-page .footer {
    position: absolute;
    bottom: 18px;
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
    z-index: 5;
}

.coming-page .footer span {
    background: linear-gradient(90deg, var(--neon), var(--accent-soft));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.coming-page .code-line:nth-child(4n) {
    color: rgba(255,176,46,0.44);
}

.coming-page .code-line:nth-child(7n) {
    color: rgba(255,211,106,0.36);
}

@media (max-width: 600px) {
    .coming-page .container {
        padding: 30px 20px;
    }

    .coming-page .logo {
        font-size: 2.5rem;
    }

    .coming-page .subtitle {
        font-size: 1.1rem;
    }

    .coming-page .divider {
        width: 90%;
    }

    /* Mobil: zachovame pohyb, ale vypneme jen nejdrazsi dekorace. */

    .coming-page .orb {
        display: none;
    }

    .coming-page .scanline {
        opacity: .20;
        animation-duration: 15s;
    }

    .coming-page .grid-floor {
        opacity: .12;
        animation-duration: 18s;
    }

    .coming-page .mega-x {
        animation-duration: 12s;
    }

    .coming-page .x-bg {
        animation-duration: 30s;
    }

    .coming-page .x-glow {
        animation-duration: 30s, 9s;
    }

    .coming-page .code-line {
        font-size: 13px;
    }

    .coming-page .container:before {
        background: rgba(255,255,255,.012);
    }
}

@media (max-width: 420px) {
    .coming-page .grid-floor {
        display: none;
    }

    .coming-page .scanline {
        display: none;
    }

    .coming-page .mega-x {
        opacity: .38;
    }
}

.coming-page .grid-floor {
    position: absolute;
    inset: 42% -25% -45%;
    z-index: 0;
    opacity: .18;
    background-image: linear-gradient(rgba(198,255,61,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,176,46,.16) 1px,transparent 1px);
    background-size: 58px 58px;
    transform: perspective(430px) rotateX(63deg);
    transform-origin: center top;
    mask-image: linear-gradient(to bottom,transparent,#000 24%,#000 78%,transparent);
    animation: gridDrift 12s linear infinite;
}

@keyframes gridDrift {
    to {
        background-position: 0 58px,58px 0;
    }
}

.coming-page .mega-x {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-51%) rotate(-2deg);
    font-size: min(78vw,900px);
    line-height: .72;
    font-weight: 1000;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,.04);
    text-shadow: 0 0 90px rgba(198,255,61,.06),0 0 180px rgba(255,176,46,.05);
    user-select: none;
    animation: megaBreath 8s ease-in-out infinite;
    will-change: transform,opacity;
}

@keyframes megaBreath {
    50% {
        opacity: .55;
        transform: translate(-50%,-51%) scale(1.025) rotate(1deg);
    }
}

.coming-page .orb {
    position: absolute;
    width: 38vw;
    height: 38vw;
    border-radius: 50%;
    filter: blur(72px);
    opacity: .11;
    z-index: 0;
    animation: orbFloat 16s ease-in-out infinite alternate;
    will-change: transform;
}

.coming-page .orb-lime {
    background: #c6ff3d;
    left: -17vw;
    top: -13vw;
}

.coming-page .orb-amber {
    background: #ff8a24;
    right: -18vw;
    bottom: -18vw;
    animation-delay: -5s;
}

@keyframes orbFloat {
    to {
        transform: translate(7vw,5vh) scale(1.12);
    }
}

.coming-page .scanline {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    height: 1px;
    top: -5%;
    opacity: .34;
    background: linear-gradient(90deg,transparent,var(--neon),var(--accent),transparent);
    box-shadow: 0 0 16px rgba(198,255,61,.35);
    animation: scan 11s linear infinite;
    pointer-events: none;
}

@keyframes scan {
    to {
        top: 105%;
    }
}

.coming-page .container:before {
    content: "";
    position: absolute;
    inset: 5px -15px;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.055);
    clip-path: polygon(0 0,18% 0,21% 3px,79% 3px,82% 0,100% 0,100% 100%,82% 100%,79% calc(100% - 3px),21% calc(100% - 3px),18% 100%,0 100%);
    background: linear-gradient(135deg,rgba(198,255,61,.025),transparent 40%,rgba(255,176,46,.025));
    /* backdrop-filter intentionally removed for smoother rendering */
}

.coming-page .divider {
    position: relative;
    overflow: visible;
}

.coming-page .divider:after {
    content: "X";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 11px;
    font-weight: 900;
    color: #111;
    background: linear-gradient(135deg,var(--neon),var(--accent));
    width: 22px;
    height: 22px;
    line-height: 22px;
    box-shadow: 0 0 20px rgba(198,255,61,.45);
}

.coming-page .loader {
    position: relative;
    border-right-color: rgba(255,176,46,.65);
    border-bottom-color: rgba(198,255,61,.20);
}

.coming-page .loader:before {
    content: "X";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 24px;
    color: var(--white);
    text-shadow: -5px 0 12px rgba(198,255,61,.75),5px 0 12px rgba(255,176,46,.7);
    animation: counterSpin 1.6s linear infinite;
}

@keyframes counterSpin {
    to {
        transform: rotate(-360deg);
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    html:has(body.coming-page), body.coming-page {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
    }

    .coming-page .scene {
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden !important;
        align-items: center;
        justify-content: center;
    }

    .coming-page .container {
        width: min(82vw, 720px);
        max-width: 720px;
        padding: 8px 22px 10px;
    }

    .coming-page .logo img {
        max-height: clamp(52px, 20vh, 88px);
        max-width: 72vw;
    }

    .coming-page .subtitle {
        margin-top: 4px;
        font-size: clamp(.72rem, 3.1vh, .98rem);
    }

    .coming-page .divider {
        width: 66%;
        margin: clamp(6px, 2.8vh, 12px) auto;
    }

    .coming-page .message {
        font-size: clamp(.68rem, 2.9vh, .92rem);
        line-height: 1.28;
        margin-bottom: clamp(7px, 2.8vh, 13px);
    }

    .coming-page .loader {
        width: clamp(38px, 12vh, 54px);
        height: clamp(38px, 12vh, 54px);
    }

    .coming-page .loader:before {
        font-size: clamp(13px, 4vh, 18px);
    }

    .coming-page .footer {
        bottom: 5px;
        font-size: clamp(.58rem, 2.2vh, .72rem);
    }

    /* Na landscape mobilu/tabletu vypneme nejdrazsi stale se hybajici vrstvy. */

    .coming-page .grid-floor, .coming-page .orb, .coming-page .scanline {
        display: none;
    }

    /* Obri X zustane jako staticka dekorace. */

    .coming-page .mega-x {
        animation: none;
        opacity: .34;
        transform: translate(-50%, -51%) rotate(0deg);
    }

    /* Velke gradientove X nechame staticke, aby se GPU pri otaceni/resize netrapilo. */

    .coming-page .x-bg, .coming-page .x-glow {
        animation: none;
    }

    /* Mene pohybujiciho se kodu v landscape. */

    .coming-page .code-line {
        font-size: 10px;
        opacity: .30;
    }
}

@media (orientation: landscape) and (max-height: 390px) {
    .coming-page .container {
        width: min(78vw, 660px);
        padding: 4px 18px 7px;
    }

    .coming-page .logo img {
        max-height: 58px;
    }

    .coming-page .subtitle {
        margin-top: 2px;
    }

    .coming-page .divider {
        margin: 5px auto;
    }

    .coming-page .message {
        line-height: 1.18;
        margin-bottom: 6px;
    }

    .coming-page .loader {
        width: 36px;
        height: 36px;
    }

    .coming-page .loader:before {
        font-size: 12px;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .coming-page .divider:after {
        display: none;
    }
}