* {
    box-sizing: border-box;
}

html {
    background: #080300;
}

body.event-home {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 8%, rgba(244, 156, 34, .24), transparent 34%),
        linear-gradient(180deg, #0b0502 0%, #160804 46%, #050202 100%);
    color: #fff;
    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
    overflow-x: hidden;
    position: relative;
}

.event-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 112px;
}

.event-page::before,
.event-page::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: max(18vw, 180px);
    pointer-events: none;
    z-index: 0;
}

.event-page::before {
    left: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .78), transparent);
}

.event-page::after {
    right: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, .78), transparent);
}

.event-stage {
    position: relative;
    z-index: 1;
    width: min(100vw, 430px);
    margin: 0 auto;
    background: #050202;
    box-shadow: 0 0 80px rgba(255, 137, 25, .18);
}

.event-bg {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}

.event-buttons {
    position: absolute;
    left: 4.8%;
    right: 4.8%;
    top: 55.1%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4.3%;
    z-index: 2;
}

@keyframes btn-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

@keyframes btn-glow {
    0%, 100% {
        filter:
            drop-shadow(0 8px 10px rgba(0, 0, 0, .48))
            drop-shadow(0 0 10px rgba(255, 192, 52, .22));
    }
    50% {
        filter:
            drop-shadow(0 8px 12px rgba(0, 0, 0, .52))
            drop-shadow(0 0 10px rgba(255, 200, 60, .45));
    }
}

.event-btn {
    position: relative;
    display: block;
    border-radius: 12px;
    animation: btn-float 2.8s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

.event-btn img {
    display: block;
    width: 100%;
    height: auto;
    animation: btn-glow 2.8s ease-in-out infinite;
}

.event-download,
.event-download img { animation-delay: 0s; }

.event-guide,
.event-guide img { animation-delay: 0.35s; }

.event-community-wa,
.event-community-wa img { animation-delay: 0.7s; }

.event-btn::after {
    content: "";
    position: absolute;
    inset: 16% 13%;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(255, 238, 142, .52), transparent 62%);
    opacity: 0;
    transform: scale(.82);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.event-btn:hover,
.event-btn:focus-visible {
    transform: translateY(-9px) scale(1.045);
    filter: brightness(1.1);
    outline: none;
}

.event-btn:hover img,
.event-btn:focus-visible img {
    filter:
        drop-shadow(0 16px 18px rgba(0, 0, 0, .58))
        drop-shadow(0 0 22px rgba(255, 206, 69, .5));
}

.event-btn:hover::after,
.event-btn:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}

.event-top-nav {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 209, 85, .3);
    border-radius: 999px;
    background: rgba(10, 4, 2, .52);
    backdrop-filter: blur(8px);
    transform: translateX(-50%);
}

.event-top-nav a {
    color: #ffe6a2;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 999px;
}

.event-top-nav a:hover {
    color: #fff;
    background: rgba(255, 205, 83, .16);
}

.mobile-contact-footer {
    position: fixed;
    left: 50%;
    bottom: max(4px, env(safe-area-inset-bottom));
    z-index: 9998;
    width: min(112vw, 640px);
    margin: 0;
    transform: translateX(-50%);
    display: block;
    pointer-events: none;
}

/* homepage: remove all bottom padding, footer is fixed */
body.event-home .event-page,
body.event-home {
    padding-bottom: 0 !important;
}

.mobile-contact-footer a {
    display: block;
    width: 100%;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.mobile-contact-footer img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(72, 185, 255, .22));
    transition: transform .16s ease, filter .16s ease;
}

.mobile-contact-footer a:active img,
.mobile-contact-footer a:hover img {
    transform: translateY(-3px) scale(1.012);
    filter: drop-shadow(0 0 16px rgba(72, 185, 255, .34));
}

@media (max-width: 767px) {
    body {
        padding-bottom: 92px !important;
    }

    .mobile-contact-footer {
        display: block;
    }

    .event-page {
        padding-bottom: 92px;
    }

    .event-stage {
        min-height: 100dvh;
        box-shadow: none;
    }

    .event-bg {
        height: 100dvh;
        object-fit: cover;
        object-position: top center;
    }

    .event-buttons {
        left: 4.8%;
        right: 4.8%;
        gap: 4.3%;
    }

    .event-top-nav {
        top: 8px;
        max-width: 94vw;
        overflow-x: auto;
    }

    .event-top-nav a {
        font-size: 12px;
        padding: 5px 8px;
    }
}

#cs-fab {
    display: none !important;
}