:root {
    --serif: 'YouYuan', '幼圆', 'Yuanti SC', 'Hiragino Maru Gothic ProN', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --glass: rgba(15, 20, 31, .59);
    --glass-border: rgba(255, 229, 184, .24);
}
body { background: #10131d; font-family: var(--serif); letter-spacing: .25px; line-height: 1.85; }
button, input, textarea, select { font-family: inherit; }
#app { isolation: isolate; }
.site-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.site-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.site-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07101bd6, #0d15264d 65%, #0a10196b), linear-gradient(0deg, #080f1b66, transparent); }
.site-header, .announcement, .stats, .feature-card, .server-summary, .community-inner, .modal, .quick-tools {
    background: var(--glass); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%);
    box-shadow: inset 0 1px 0 #ffffff16, 0 16px 44px #03071128;
}
.site-header { margin: 18px auto 0; width: calc(100% - 48px); border-radius: 26px; }
.header-inner { max-width: 1240px; width: calc(100% - 48px); }
.brand { gap: 14px; }
.brand-mark, .brand-mark.small { padding: 0; width: 48px; height: 48px; flex: 0 0 48px; border: 0; outline: 0; transform: none; background: none; border-radius: 13px; overflow: hidden; box-shadow: 0 4px 16px #0005; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-mark.small { width: 40px; height: 40px; flex-basis: 40px; }
.brand strong { font-family: var(--serif); letter-spacing: 1px; }
.hero { border-bottom: 0; }
.hero-art, .hero-shade, .hero-grid { display: none; }
.hero-copy { padding: 30px; border: 1px solid var(--glass-border); border-radius: 30px; background: linear-gradient(120deg, #10182796, #10182735); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #ffffff16, 0 24px 64px #0002; }
h1, h2, h3, .hero-tagline { font-family: var(--serif); letter-spacing: 1px; font-weight: 600; }
.hero h1 { font-size: clamp(34px, 3.6vw, 58px); letter-spacing: 1px; }
.hero-tagline { letter-spacing: 2px; }
.hero-description { max-width: none; font-size: 14px; line-height: 1.95; text-wrap: pretty; }
.hero-description, .section-intro, .section-heading p, .feature-copy p { color: #e3e3e5; }
.hero-seal { text-shadow: 0 3px 20px #000; }
.button, .edition, .test-label, .modal-close, .image-zoom, .schedule-tabs button, .daily-summary>div>span { border-radius: 999px; }
.button { letter-spacing: .6px; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px #0003; }
a:focus-visible, button:focus-visible { outline: 2px solid #f6d799; outline-offset: 5px; }
.section-intro, .feature-copy p, .section-heading p { font-size: 14px; line-height: 1.95; }
.section-kicker { font-size: 10px; }
.outline { background: #18223175; border-color: #e7cf9f60; }
.announcement { border-radius: 20px; }
.stats { border-radius: 24px; margin-top: 20px; }
.showcase-section, .events-section, .server-section, .community-section, .footer { background: transparent; border-color: #ffffff15; }
.world-layout { padding: 36px; border: 1px solid var(--glass-border); border-radius: 30px; background: #10182770; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.world-picture, .feature-card, .activity-preview { border-radius: 24px; overflow: hidden; }
.world-picture { box-shadow: 0 12px 40px #0004; }
.section-heading, .event-copy { text-shadow: 0 2px 14px #000b; }
.feature-copy { background: #10182730; }
.event-copy { padding: 28px; border-radius: 26px; background: #10182788; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.event-note, .payment-instructions { border-radius: 16px; background: #d5b77d13; }
.server-summary { border-radius: 26px; }
.server-preview>div { background: #10182765; border-radius: 18px; }
.community-inner { padding: 34px; border-radius: 26px; }
.footer { background: #080e1869; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.quick-tools { border-radius: 22px; overflow: hidden; }
.modal { background: #101827c4; border-radius: 28px; }
.modal::backdrop { background: #04081180; backdrop-filter: blur(5px); }
.schedule-grid>div, .daily-grid>div { border-radius: 14px; background: #ffffff08; border-color: #ffffff20; }
.schedule-grid time, .daily-grid time, .server-preview>div>span, .server-date>strong, .stat strong { font-family: var(--serif); font-variant-numeric: tabular-nums; }
.modal-intro { font-size: 14px; line-height: 1.9; }
.modal-header h2 { letter-spacing: .6px; }
.modal-close { background: #ffffff08; border-color: #ffffff28; }
.modal[open] { animation: glass-arrive .22s ease-out; }
.popup-qr { display: flex; align-items: center; gap: 24px; margin-top: 22px; padding: 22px; border: 1px solid #ffffff26; border-radius: 22px; background: #ffffff08; }
.popup-qr img { display: block; flex: 0 0 152px; width: 152px; height: 152px; object-fit: contain; padding: 8px; border-radius: 16px; background: white; }
.popup-qr strong { font-size: 17px; color: #f1d9ac; }
.popup-qr p { font-size: 14px; line-height: 1.8; margin: 9px 0; overflow-wrap: anywhere; }
.popup-qr small { font-size: 11px; color: #c8cbd4; }
@keyframes glass-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#toast { border-radius: 18px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header, .feature-card, .modal, .hero-copy, .world-layout, .event-copy, .server-summary, .community-inner { background: #141c2aeb; }
}
@media(max-width:900px) {
    .site-header { width: calc(100% - 28px); margin-top: 14px; border-radius: 22px; }
    .header-inner { width: calc(100% - 28px); }
    #navigation { border-radius: 22px; background: #111b2aeb; }
    .hero-copy { max-width: 590px; padding: 26px; }
    .world-layout { padding: 26px; }
}
@media(max-width:560px) {
    .site-header { width: calc(100% - 20px); margin-top: 10px; border-radius: 20px; }
    .header-inner { width: calc(100% - 22px); }
    .brand { gap: 9px; }
    .brand-mark { width: 39px; height: 39px; flex-basis: 39px; border-radius: 11px; }
    .brand strong { font-size: 14px; letter-spacing: 0; }
    .hero { min-height: 660px; height: 710px; }
    .hero-copy { padding: 22px 20px; border-radius: 25px; }
    .hero h1 { font-size: 31px; }
    .hero-description { font-size: 13px; }
    .hero-buttons { gap: 10px; }
    .hero-buttons .button { padding-inline: 16px; }
    .world-layout, .event-copy, .community-inner { padding: 22px; border-radius: 24px; }
    .community-actions { flex-wrap: wrap; }
    .community-actions .button { min-width: 110px; }
    .mobile-actions { margin: 0 10px 10px; border-radius: 20px; overflow: hidden; background: #101827bb; border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
    .mobile-action { background: transparent; }
    .modal { border-radius: 24px; }
    .modal-intro { font-size: 13px; }
    .schedule-grid time { font-size: 19px; }
    .schedule-grid span { font-size: 12px; }
    .popup-qr { flex-direction: column; text-align: center; padding: 20px; gap: 16px; }
    .popup-qr img { flex-basis: auto; }
}
@media(prefers-reduced-motion:reduce) {
    .modal[open] { animation: none; }
    .button:hover { transform: none; }
}