/* Base Reset & Environment Adaption */
body {
    background-color: #050101;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden; 
    /* 适配 iOS 安全区域 */
    padding-top: env(safe-area-inset-top, 20px);
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Module 1: Atmosphere Layers */
.royal-bg {
    position: fixed; inset: 0;
    background: radial-gradient(circle at center, #450a0a 0%, #1a0505 60%, #000000 100%);
    z-index: -2;
    transform: translateZ(0); /* GPU Trigger */
}
.god-rays {
    position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
    background: repeating-conic-gradient(from 0deg, rgba(207, 181, 59, 0.03) 0deg 10deg, transparent 10deg 20deg);
    animation: ray-rotate 60s linear infinite; z-index: -1; pointer-events: none;
    will-change: transform;
}

/* Module 2: UI Components */
.text-royal-gold {
    background: linear-gradient(to bottom, #fceeb5 0%, #cfb53b 40%, #8a6e1e 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

.card-luxury {
    background: linear-gradient(145deg, rgba(30,30,30,0.9), rgba(10,10,10,0.95));
    border: 1px solid rgba(207, 181, 59, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.1);
    position: relative; overflow: hidden; transform: translateZ(0);
}

/* Shine Effect */
.card-luxury::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-25deg); animation: shine 6s infinite;
}
@keyframes shine { 0%, 80% { left: -100%; } 100% { left: 200%; } }

.sweep-shine { position: relative; overflow: hidden; }
.sweep-shine::after {
    content: ""; position: absolute; top: 0; left: -150%; width: 80%; height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
    transform: skewX(-25deg); animation: sweep-light 3s infinite;
    z-index: 50; pointer-events: none; mix-blend-mode: overlay;
}
@keyframes sweep-light { 0% { left: -150%; opacity: 0; } 20% { opacity: 1; } 50%, 100% { left: 150%; opacity: 0; } }

.btn-3d-gold {
    background: radial-gradient(circle at top, #fceeb5, #cfb53b);
    border: none; color: #422006;
    box-shadow: 0 6px 0 #8a6e1e, 0 15px 20px rgba(0,0,0,0.6), inset 0 2px 5px rgba(255,255,255,0.5);
    transition: transform 0.1s;
}
.btn-3d-gold:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a6e1e, 0 5px 10px rgba(0,0,0,0.6); }

/* Typography */
.logo-text {
    font-family: 'Cinzel', serif;
    background: linear-gradient(to bottom, #ffecb3 0%, #ffc107 40%, #ff6f00 50%, #ffc107 60%, #ffecb3 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0px #b71c1c) drop-shadow(0 4px 10px rgba(255, 193, 7, 0.5));
    position: relative; z-index: 10;
}
.logo-shine {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-size: 200% auto; animation: textShine 4s infinite linear;
    z-index: 11; pointer-events: none; mix-blend-mode: overlay;
}
@keyframes textShine { 0% { background-position: -200% center; } 20% { background-position: 200% center; } 100% { background-position: 200% center; } }
.decor-line { height: 2px; background: linear-gradient(90deg, transparent, #cfb53b, transparent); width: 100%; margin-top: -5px; opacity: 0.8; }

/* Layers & Effects */
#fx-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
#flash-overlay { position: fixed; inset: 0; background: white; z-index: 200; pointer-events: none; opacity: 0; }
.do-flash { animation: flash 0.4s ease-out forwards; }
.clip-path-arrow { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }
.tick-anim { animation: tick 0.1s ease-in-out; }
@keyframes tick {
    0% { transform: translate(-50%, 0) rotate(0deg); }
    50% { transform: translate(-50%, -2px) rotate(-15deg); } 
    100% { transform: translate(-50%, 0) rotate(0deg); }
}

/* Toast Component */
#toast-container { position: fixed; top: 10%; left: 50%; transform: translateX(-50%); z-index: 300; pointer-events: none; width: 90%; text-align: center; }
.toast {
    display: inline-block; background: rgba(0, 0, 0, 0.85); border: 1px solid #cfb53b; color: #fceeb5;
    padding: 10px 20px; border-radius: 50px; font-size: 14px; font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); margin-bottom: 10px; opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(-20px);
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Responsive Fixes */
@media (max-height: 700px) {
    .scale-on-short { transform: scale(0.85); transform-origin: center top; }
    .compact-mt { margin-top: 0 !important; }
}