/* Responsive scaling wrapper */
#page-scaler {
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
    width: 1308px;
    height: 653px;
    pointer-events: auto;
}

body {
    overflow: hidden !important;
}

/* Your existing CSS continues below */
@font-face {
    font-family: 'HYWenHei';
    src: url('assets/fonts/HYWenHei-85W.ttf') format('truetype');
}

* {
    margin:  0;
    padding: 0;
    box-sizing:  border-box;
}

body {
    background-color: #2a2d35;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    color:  #ffffff;
    position: relative;
    overflow:  hidden; /* Prevent scrollbars from rotated canvas */
}

#bgCanvas {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    transform-origin: center center;
    z-index: -2;
    pointer-events: none;
}

#vignette {
    z-index: -1;
}

h1, p, #interaction-prompt {
    position: relative;
    z-index: 1;
}

h1 {
    padding: 50px;
    text-align: center;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Vignette effect */
#vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background:
            radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0.2) 100%),
            linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    z-index: -1;
    animation: fadeIn 2s ease-in-out 0.0s forwards;
}

/* Interaction prompt */
#interaction-prompt {
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    width: fit-content;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.95);
    font-family: 'HYWenHei', Arial, sans-serif;
    font-size: 1.3rem;
    letter-spacing: 1px;
    z-index: 100;
    pointer-events: none;
    padding: 16px 32px;

    /* No visible box at all */
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;

    /* Soft text glow only */
    text-shadow:
            0 0 10px rgba(0, 0, 0, 0.8),
            0 0 20px rgba(0, 0, 0, 0.5),
            0 0 40px rgba(0, 0, 0, 0.3),
            0 2px 4px rgba(0, 0, 0, 0.9);

    /* Starting state - hidden below screen */
    transform: translateY(300px);
    opacity: 0;
}

/* Slide up entrance */
#interaction-prompt.visible {
    animation: promptEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Floating + pulsing state */
#interaction-prompt.floating {
    opacity: 1;
    transform: translateY(0);
    animation: promptFloat 3s ease-in-out infinite, pulse 2.5s ease-in-out infinite;
}
/* Slide down exit */
#interaction-prompt.exit {
    animation: promptExit 0.6s ease-in forwards;
}

/* Keyframes */
@keyframes promptEntrance {
    from {
        transform: translateY(300px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes promptExit {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(300px);
        opacity: 0;
    }
}

@keyframes hoverFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}
p {
    text-align: center;
    font-size: 1.5rem;
}
/* Top left logo */
#top-logo {
    position: fixed;
    top: -88px;
    left: -25px;
    width: 500px;
    height: auto;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 0.5s ease-out 0.8s forwards;
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade out state */
#top-logo.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Fade out state */
#top-logo.fade-out {
    opacity: 0;
}
/* Sub logo under main logo */
#sub-logo {
    position: fixed;
    top: -5px;
    left: -5px;
    width: 459px;
    height: auto;
    z-index: 7;
    opacity: 0.9;
    transition: transform 0.6s ease-in, opacity 0.1s ease-out 0.6s;
}

/* Slide out to left state */
#sub-logo.slide-out {
    transform: translateX(-400px);
    opacity: 0;
}
/* Plexus video */
#plexus-video {
    position: fixed;
    top: -65px;
    left: -150px;
    width: 600px;
    height: 183px;
    z-index: 9;
    pointer-events: none;

    /* PERFORMANCE BOOSTERS */
    background: transparent;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    image-rendering: auto;
    -webkit-tap-highlight-color: transparent;
    backface-visibility: hidden;

    /* Fade in animation */
    opacity: 0;
    animation: fadeIn 0.5s ease-out 0.8s forwards;
}

/* Slide out */
#plexus-video.slide-out {
    animation: slideOutLeft 0.6s ease-in forwards;
}
/* Hides the Opera GX video pop-out button container */
#detach-button-host {
    display: none !important;
    visibility: hidden !important;
}

/* Hides other browser-injected divs that often house these icons */
html > div[style*="z-index: 2147483647"] {
    display: none !important;
}
/* Slide sprite */
#slide-sprite {
    position: fixed;
    top: 72px;
    left: -5px;
    width: 459px;
    height: 60px;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    animation: slideDown 0.8s ease-out 0.0s forwards;
}

/* Entrance animation - slides down and fades in */
@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 1;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Exit - matches sub-logo exactly */
#slide-sprite.slide-out {
    transform: translateX(-400px) !important;
    opacity: 0 !important;
    transition: transform 0.6s ease-in, opacity 0.1s ease-out 0.6s !important;
}

@keyframes slideOutLeft {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(-400px, 0, 0);
        opacity: 0;
    }
}
/* New background - appears after roll away */
#newBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -3;
    opacity: 0;
    transition: opacity 1s ease-in-out;

    /* Placeholder - we can change this to whatever you want */
    background: linear-gradient(135deg, #1a1c24 0%, #2a2d35 50%, #1a1c24 100%);
}

#newBackground.visible {
    opacity: 1;
}


/* Cylinder WebGL container */
#cylinder-container {
    position: fixed;
    top:  0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

#cylinder-container.visible {
    opacity:  1;
}

/* Hide original canvas when cylinder is active */
body. cylinder-active #bgCanvas {
    opacity: 0;
}
/* Rotating UI element - movie clapboard style */
/* Rotating UI element - movie clapboard style */
#rotating-ui {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1080px;
    height: auto;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
}

#rotating-ui.rotate-in {
    animation: clapboardSwing 1.2s ease-out forwards;
}

/* Remove individual hovering - wrapper handles it now */
#rotating-ui.hovering {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    /* No animation here anymore */
}
@keyframes clapboardSwing {
    0% {
        transform: translateX(50vw) translateY(-50%) rotate(90deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
        opacity: 1;
    }
}
@keyframes hoverFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    50% {
        transform: translateX(-50%) translateY(calc(-50% - 10px)) rotate(0deg);
    }
}
#rotating-ui.rotate-in {
    animation: clapboardSwing 1.3s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
@keyframes promptFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* Still background - expands from center */
#stillBackground {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    width: 1px;
    height: 1px;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background-image: url('assets/still-background.png');
    background-size: cover;
    background-position: center;
    opacity: 0.01;

    /* GPU optimization */
    will-change: width, height, opacity, border-radius;
    backface-visibility: hidden;
}

#stillBackground.expand {
    animation: expandFromCenter 1s ease-out forwards;
}

@keyframes expandFromCenter {
    0% {
        width: 1px;
        height: 1px;
        opacity: 0.01;
        border-radius: 50%;
    }
    15% {
        opacity: 1;
    }
    100% {
        width: 105vw;
        height: 105vh;
        opacity: 1;
        border-radius: 0%;
    }
}
/* Button container - creates the "curtain" effect */
.btn-container {
    position: fixed;
    z-index: 150;
    overflow: hidden;
    pointer-events: auto; /* Enable clicks on buttons */
}

/* Button 1 container */
#btn-container-1 {
    top: 80px;
    right: 125px;
    width: 464px;  /* Match button width */
    height: 264px;  /* Match button height */
}

/* Button 2 container */
#btn-container-2 {
    top: 260px;
    right: 125px;
    width: 328px;
    height: 264px;
}

/* Button 3 container */
#btn-container-3 {
    top: 525px;
    right: 148px;
    width: 300px;
    height: 76px;
}

/* The actual button */
.slide-btn {
    position: absolute;
    top: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.6s ease-out;

    /* 3D perspective for push effect */
    transform-style: preserve-3d;
    perspective: 500px;
}

.slide-btn img {
    width: 150px;
    height: auto;
    transition: transform 0.15s ease-out, filter 0.15s ease-out;
}

/* Slide from RIGHT to LEFT */
.from-right .slide-btn {
    right: 0;
    transform: translateX(100%);
}

.from-right .slide-btn.slide-in {
    transform: translateX(0);
}

/* Slide from LEFT to RIGHT */
.from-left .slide-btn {
    left: 0;
    transform: translateX(-100%);
}

.from-left .slide-btn.slide-in {
    transform: translateX(0);
}

/* Hover effect - push in with gray overlay */
.slide-btn:hover img {
    transform: scale(0.95) translateZ(-10px);
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5)) brightness(0.7);
}

.slide-btn:active img {
    transform: scale(0.92) translateZ(-15px);
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5)) brightness(0.5);
}

/* Active/click effect - push even more */
.slide-btn:active img {
    transform: scale(0.92) translateZ(-15px);
    filter: brightness(0.5);
}
/* Individual button sizes */
#btn-1 img {
    width: 320px;
    height: auto;
}

#btn-2 img {
    width: 320px;
    height: auto;
}

#btn-3 img {
    width: 300px;
    height: 76px;
}
/* UI Wrapper - contains rotating-ui and buttons */
#ui-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 19;
    pointer-events: none; /* Let clicks pass through empty space */
}

#ui-wrapper.hovering {
    animation: wrapperFloat 3s ease-in-out infinite;
}

@keyframes wrapperFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
/* Contact button containers - left side */
#btn-container-4 {
    top: 10px;
    left: 0px;
    width: 108px;
    height: 108px;
}

#btn-container-5 {
    top: 60px;
    left: 5px;
    width: 108px;
    height: 108px;
}

#btn-container-6 {
    top: 120px;
    left: 5px;
    width: 108px;
    height: 108px;
}

/* Contact button sizes */
#btn-4 img {
    width: 60px;
    height: auto;
}

#btn-5 img {
    width: 50px;
    height: auto;
}

#btn-6 img {
    width: 50px;
    height: auto;
}
/* Top decorative element - slides from top */
#top-decor {
    position: fixed;
    top: -15px;
    left: 2%;
    transform: translateX(-50%) translateY(-100%);
    width: 100px;
    height: auto;
    z-index: 19;
    pointer-events: none;
    transition: transform 0.8s ease-out;
}

#top-decor.slide-in {
    transform: translateX(-50%) translateY(0);
}
/* Shadow for contact buttons */
#btn-4 img{
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5))
}
#btn-5 img,
#btn-6 img {
    filter: drop-shadow(3px 6px 10px rgba(0, 0, 0, 0.7))
}
/* Scramble text container */
#scramble-container {
    position: fixed;
    top: 26%;
    left: 25%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    white-space: nowrap;
    text-align: left;
}

#scramble-text {
    font-family: 'HYWenHei', Arial, sans-serif;
    font-size: 2rem;
    color: #37373D;
    letter-spacing: 2px;
    display: inline-block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1;  /* Space between lines */
}

/* Individual characters - prevent jitter */
.scramble-char {
    display: inline-block;
    min-width: 0.5em;
    text-align: center;
}

/* Space characters need less width */
.scramble-char:empty {
    min-width: 0.3em;
}

/* Blinking cursor */
#text-cursor {
    font-family: 'HYWenHei', Arial, sans-serif;
    font-size: 2rem;
    color: #37373D;
    animation: cursorBlink 1s step-end infinite;
    margin-left: 2px;
}

#text-cursor.fade-out {
    animation: cursorFadeOut 0.3s ease-out forwards;
}

@keyframes cursorFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes cursorBlink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* Hide text initially */
#scramble-container {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

#scramble-container.visible {
    opacity: 1;
}


/* Scrollable text box - anchored to bottom */
#scroll-box {
    position: fixed;
    bottom: 100px;
    left: 36.5%;
    transform: translateX(-50%);
    width: 700px;
    height: var(--scroll-box-height, 350px);
    z-index: 100;
    overflow: hidden;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* Smooth height transition for later */
    transition: height 0.5s ease-in-out;
}

/* Inner scrollable content */
#scroll-content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding: 20px;

    /* Hide scrollbar but keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#scroll-content::-webkit-scrollbar {
    display: none;
}
/* Word wrapper - prevents mid-word breaks */
.word-wrap {
    display: inline-block;
    white-space: nowrap;
}

/* Update scramble container */
#scramble-container-2 {
    position: relative;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

#scramble-container-2.visible {
    opacity: 1;
}

/* Scramble text styling */
#scramble-text-2 {
    font-family: 'HYWenHei', Arial, sans-serif;
    font-size: 1.25rem;
    color: #37373D;
    letter-spacing: 2px;
    display: inline;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.090;
}

/* Blinking cursor */
#text-cursor-2 {
    font-family: 'HYWenHei', Arial, sans-serif;
    font-size: 1.5rem;
    color: #37373D;
    animation: cursorBlink 1s step-end infinite;
    margin-left: 2px;
    display: inline;
}

#text-cursor-2.fade-out {
    animation: cursorFadeOut 0.3s ease-out forwards;
}
/* Empty line spacer */
.line-spacer {
    display: block;
    height: 0.5em;
}
/* Non-selectable scramble text */
#scramble-container,
#scramble-container-2,
#scroll-box {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
/* Plexus background videos */
#plexus-bg-1,
#plexus-bg-2 {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#plexus-bg-1.visible,
#plexus-bg-2.visible {
    opacity: 1;
}

/* Plexus background video - fullscreen optimized */
#plexus-bg-1 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    min-width: 100vw;
    min-height: 100vh;
    width: auto;
    height: auto;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    object-fit: cover;

    /* PERFORMANCE BOOSTERS */
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    image-rendering: auto;
    -webkit-tap-highlight-color: transparent;
}

#plexus-bg-1.visible {
    opacity: 0.12;
    will-change: auto; /* Release after animation */
}
/* Plexus 2 - adjust position as needed */
#plexus-bg-2 {
    bottom: 100px;
    right: 100px;
    width: 400px;
    height: auto;
}
/* Scramble text slide up for video tab */
#scramble-container {
    transition: transform 0.5s ease-in-out;
}

#scramble-container.video-tab {
    transform: translate(-50%, -50%) translateY(-50px); /* Adjust this value as needed */
}
/* Video container - hidden by default */


#video-container.visible {
    opacity: 1;
    visibility: visible;
}

#video-container {
    position: fixed;
    top: 150px;
    left: 28.5%;
    transform: translateX(-50%);
    height: 265px;
    aspect-ratio: 16 / 9;
    z-index: 100;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

#youtube-player {
    width: 100%;
    height: 100%;            /* ← Must be 100% to follow container */
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* Video switcher container */
#video-switcher {
    position: fixed;
    top: 125px;              /* Adjust to align with video */
    right: 525px;            /* Position to the right of video */
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out;
    pointer-events: auto;  /* ← Add this */
}

#video-switcher.visible {
    opacity: 1;
    visibility: visible;
}

/* Individual switch buttons */
.vid-switch-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease-out;
    pointer-events: auto;  /* ← Add this */
}

.vid-switch-btn img {
    width: 150px;             /* Adjust size as needed */
    height: auto;
    transition: filter 0.3s ease-in-out, transform 0.15s ease-out;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
}

/* Selected state - inverted colors */
.vid-switch-btn.selected img {
    filter: invert(1) drop-shadow(2px 4px 6px rgba(255, 255, 255, 0.3));
}

/* Hover effect */
.vid-switch-btn:hover img {
    transform: scale(0.95);
}

.vid-switch-btn:active img {
    transform: scale(0.90);
}

/* Prevent hover overriding selected state */
.vid-switch-btn.selected:hover img {
    filter: invert(1) drop-shadow(2px 4px 6px rgba(255, 255, 255, 0.3));
    transform: scale(0.95);
}
/* Shop button container */
#btn-container-shop {
    top: 150px;              /* ← Adjust vertical position */
    right: 490px;             /* ← Adjust horizontal position */
    width: 348px;            /* ← Match your sprite width */
    height: 768px;           /* ← Match your sprite height */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#btn-container-shop.visible {
    opacity: 1;
    visibility: visible;
}

#btn-shop img {
    width: 200px;            /* ← Adjust button size */
    height: auto;
}

/* Price text */
#shop-price {
    position: fixed;
    top: 550px;              /* ← Adjust vertical position */
    right: 550px;            /* ← Adjust horizontal position */
    font-family: 'HYWenHei', Arial, sans-serif;
    font-size: 1.8rem;
    color: #37373D;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, transform 0.15s ease-out;  /* ← Add transform */
    z-index: 150;
    pointer-events: none;
}

#shop-price.visible {
    opacity: 1;
    visibility: visible;
}
#shop-price.hover {
    transform: translateY(-20px);  /* ← Slides up on hover */
}

/* Scroll box - add width variable and transition */
#scroll-box {
    --scroll-box-width: 700px;
    width: var(--scroll-box-width);
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out, left 0.5s ease-in-out;
}

/* Shop tab - shrink from right, keep left edge fixed */
#scroll-box.shop-tab {
    --scroll-box-width: 200px;
    left: calc(36.5% - 250px);  /* ← Adjust to keep left edge in place */
}
/* Email tooltip */
#email-tooltip {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(55, 55, 61, 0.95);
    color: #ffffff;
    font-family: 'HYWenHei', Arial, sans-serif;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    z-index: 200;
    pointer-events: none;
}

#email-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
/* Legal footer - always visible, no animations */
/* Legal footer - always visible, no animations */
#legal-footer {
    position: fixed;
    bottom: 15px;
    right: 20px;
    z-index: 300;
    font-family: 'HYWenHei', Arial, sans-serif;
    font-size: 0.85rem;
    pointer-events: auto;
}

#legal-footer a {
    color: rgba(253, 252, 94, 0.7);  /* Your yellow at 70% */
    text-decoration: none;
    transition: color 0.2s ease;
}

#legal-footer a:hover {
    color: #FDFC5E;  /* Full yellow on hover */
    text-decoration: underline;
}

#legal-footer .divider {
    color: rgba(253, 252, 94, 0.5);  /* Yellow divider at 50% */
    margin: 0 10px;
}
/* Mobile notice */
#mobile-notice {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #1a1c22;
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

#mobile-notice.visible {
    display: flex;
}

.notice-content {
    text-align: center;
    color: #e0e0e0;
    font-family: 'HYWenHei', Arial, sans-serif;
    padding: 40px;
}

.notice-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.notice-content h2 {
    font-size: 2rem;
    color: #FDFC5E;
    margin-bottom: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.notice-content p {
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 10px;
}

.notice-content span {
    font-size: 1rem;
    color: #888;
}