html { scroll-behavior: smooth; }
body { overflow-x: hidden; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
.brand-logo { width: 176px; height: 58px; }
.brand-logo img, .footer-logo { width: 100%; height: 100%; object-fit: contain; }
.nav-link { position: relative; padding: .65rem 0; transition: color .25s ease; }
.nav-link::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; transform: scaleX(0); transform-origin: left; background: #d8ff32; transition: transform .25s ease; }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.mobile-nav-link { border-bottom: 1px solid rgba(255,255,255,.14); padding: .85rem .4rem; font-size: .9rem; font-weight: 800; }
.hero-slide { position: absolute; inset: 0; z-index: 0; opacity: 0; background-position: center; background-size: cover; transform: scale(1.05); transition: opacity .9s ease, transform 6s ease; }
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-slide[data-slide="0"] { background-image: url("./assets/images/giggle/hero-arena.webp"); }
.hero-slide[data-slide="1"] { background-image: url("./assets/images/giggle/hero-bumper.webp"); }
.hero-slide[data-slide="2"] { background-image: url("./assets/images/giggle/hero-community.webp"); }
.hero-copy { max-width: min(760px, 100%); }
#hero-title { max-width: 100%; overflow-wrap: anywhere; font-size: clamp(2.25rem, 6.4vw, 5.4rem); line-height: 1.08; text-shadow: 0 4px 24px rgba(0,0,0,.42); }
#hero-subtitle { max-width: 660px; color: rgba(255,255,255,.92); text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero-dot { width: 28px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.42); transition: width .25s ease, background .25s ease; }
.hero-dot.is-active { width: 54px; background: #d8ff32; }
.booking-field { display: block; padding: .25rem .6rem; border-right: 1px solid #e2e8f0; }
.booking-field span { display: block; margin-bottom: .3rem; color: #64748b; font-size: .72rem; font-weight: 800; }
.booking-field div { display: flex; align-items: center; gap: .6rem; color: #151024; }
.booking-field input, .booking-field select { width: 100%; border: 0; outline: 0; color: #151024; background: transparent; font-weight: 800; }
.route-card { position: relative; display: block; min-height: 156px; padding: 1.45rem; border: 1px solid #dce9ee; border-radius: .5rem; background: #fff; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease; }
.route-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(21,16,36,.12); }
.route-card-active { color: #fff; border-color: #151024; background: #151024; box-shadow: 0 16px 40px rgba(21,16,36,.2); }
.route-index { display: block; color: #22e6c3; font-size: .78rem; font-weight: 900; letter-spacing: .1em; }
.route-time { position: absolute; top: 1.45rem; right: 1.45rem; border-radius: .25rem; background: #e7f6f6; padding: .25rem .5rem; color: #117765; font-size: .7rem; font-weight: 900; }
.route-card-active .route-time { background: rgba(255,255,255,.14); color: #fff; }
.route-card strong { display: block; margin-top: 1.5rem; font-size: 1.35rem; font-weight: 900; }
.route-card em { display: block; margin-top: .5rem; color: #64748b; font-style: normal; font-size: .85rem; line-height: 1.55; }
.route-card-active em { color: rgba(255,255,255,.68); }
.route-card small { display: inline-flex; margin-top: .85rem; color: #ff3d8a; font-size: .78rem; font-weight: 900; }
.route-card-active small { color: #d8ff32; }
.eyebrow { margin: 0 0 .7rem; color: #ff3d8a; font-size: .74rem; font-weight: 900; letter-spacing: .1em; }
.section-title { color: #151024; font-size: clamp(2rem, 4vw, 3.7rem); font-weight: 900; line-height: 1.1; letter-spacing: 0; }
.activity-card { position: relative; min-height: 480px; overflow: hidden; border-radius: .5rem; background: #151024; box-shadow: 0 18px 46px rgba(21,16,36,.15); }
.activity-card > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .55s ease; }
.activity-card:hover > img { transform: scale(1.06); }
.activity-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,8,20,.94), rgba(11,8,20,.08) 70%); }
.ticket-card { display: grid; grid-template-columns: 1fr 142px; min-height: 230px; overflow: hidden; border: 1px solid #d5e6ec; border-radius: .5rem; background: #fff; box-shadow: 0 10px 28px rgba(21,16,36,.07); text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.ticket-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(21,16,36,.15); }
.ticket-card > div { padding: 1.45rem; }.ticket-card h3 { margin-top: .9rem; color: #151024; font-size: 1.35rem; font-weight: 900; }.ticket-card p { margin-top: .55rem; color: #64748b; font-size: .82rem; line-height: 1.55; }.ticket-card span:not(.ticket-tag) { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; color: #151024; font-size: .8rem; font-weight: 900; }.ticket-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }.ticket-card:hover img { transform: scale(1.07); }
.ticket-tag { display: inline-flex; border-radius: .25rem; padding: .28rem .52rem; font-size: .68rem; font-weight: 900; }
.zone-card { position: relative; display: block; min-height: 400px; overflow: hidden; border-radius: .5rem; background: #151024; box-shadow: 0 10px 28px rgba(21,16,36,.1); text-decoration: none; transition: transform .35s ease, box-shadow .35s ease; }
.zone-card:hover { transform: translateY(-8px); box-shadow: 0 24px 52px rgba(21,16,36,.22); }.zone-card img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .6s ease; }.zone-card:hover img { transform: scale(1.08); }.zone-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,8,20,.95), rgba(11,8,20,.04) 70%); }.zone-content { position: absolute; right: 0; bottom: 0; left: 0; padding: 1.5rem; color: #fff; }.zone-content span { color: #d8ff32; font-size: .7rem; font-weight: 900; letter-spacing: .08em; }.zone-content h3 { margin-top: .3rem; font-size: 1.6rem; font-weight: 900; }.zone-content p { margin-top: .45rem; color: rgba(255,255,255,.76); font-size: .85rem; line-height: 1.55; }.zone-content small { display: block; margin-top: .8rem; color: rgba(255,255,255,.88); font-size: .76rem; font-weight: 900; }
.gallery-section { padding: 5rem 1rem; background: #f7f4ff; }
.gallery-inner { width: min(100%, 1400px); margin: 0 auto; }
.gallery-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 520px); gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.gallery-head > p { color: #64748b; line-height: 1.75; }
.ocean-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ocean-gallery-card { display: block; overflow: hidden; border: 1px solid #d5e6ec; border-radius: .5rem; background: #fff; box-shadow: 0 10px 28px rgba(21,16,36,.08); text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.ocean-gallery-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(21,16,36,.16); }
.ocean-gallery-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .45s ease; }
.ocean-gallery-card:hover img { transform: scale(1.05); }
.ocean-gallery-card div { padding: 1.15rem; }
.ocean-gallery-card h3 { color: #151024; font-size: 1.1rem; font-weight: 900; }
.ocean-gallery-card p { margin-top: .5rem; color: #64748b; font-size: .88rem; line-height: 1.6; }
.ocean-gallery-card small { display: block; margin-top: .75rem; color: #ff3d8a; font-size: .78rem; font-weight: 900; }
.news-card { display: block; overflow: hidden; border-radius: .5rem; background: #fff; box-shadow: 0 10px 28px rgba(21,16,36,.08); text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.news-card:hover { transform: translateY(-8px); box-shadow: 0 24px 52px rgba(21,16,36,.18); }
.news-image-wrap { position: relative; height: 16rem; overflow: hidden; }
.news-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news-card:hover .news-image-wrap img { transform: scale(1.06); }
.news-tag { position: absolute; top: 1.25rem; left: 1.25rem; border-radius: .25rem; padding: .25rem .75rem; font-size: .75rem; font-weight: 900; }
.news-body { padding: 1.5rem; }
.news-body > p { color: #ff3d8a; font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
.news-body h3 { margin-top: .5rem; color: #151024; font-size: 1.5rem; font-weight: 900; }
.news-body span { display: block; margin-top: .75rem; color: #64748b; font-size: .9rem; line-height: 1.7; }
.news-body b { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.25rem; color: #151024; font-size: .9rem; font-weight: 900; transition: color .2s ease; }
.news-card:hover .news-body b { color: #ff3d8a; }
.section-pagination { display: flex; justify-content: center; align-items: center; gap: .85rem; margin-top: 2rem; color: #151024; font-weight: 900; }
.section-pagination button { border-radius: .375rem; background: #151024; padding: .65rem 1rem; color: #fff; transition: transform .2s ease, opacity .2s ease; }
.section-pagination button:hover:not(:disabled) { transform: translateY(-2px); }
.section-pagination button:disabled { opacity: .35; cursor: not-allowed; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.24); border-radius: .375rem; color: #fff; transition: transform .25s ease, background .25s ease; }.social-link:hover { transform: translateY(-3px); background: #ff3d8a; }.footer-logo { width: 190px; height: 78px; }.footer-title { color: #fff; font-size: .92rem; font-weight: 900; }.footer-list { display: grid; gap: .65rem; margin-top: 1rem; color: rgba(255,255,255,.62); font-size: .85rem; }.footer-list a { transition: color .2s ease; }.footer-list a:hover { color: #d8ff32; }
.qr-link { width: auto; min-width: 72px; padding: 0 .75rem; color: #fff; font-size: .78rem; font-weight: 900; }
.footer-button { border: 0; background: transparent; color: rgba(255,255,255,.62); padding: 0; font: inherit; cursor: pointer; transition: color .2s ease; }
.footer-button:hover { color: #d8ff32; }
.floating-ticket, .page-mode main, .page-mode footer, .page-mode .floating-ticket { display: none !important; }
.page-view { min-height: 100vh; padding: 112px 1rem 5rem; background: #f4f8fb; }
.detail-shell { width: min(100%, 1180px); margin: 0 auto; }
.detail-back { display: inline-flex; align-items: center; gap: .45rem; border-radius: .375rem; background: #151024; padding: .75rem 1rem; color: #fff; font-weight: 900; transition: transform .2s ease, background .2s ease; }
.detail-back:hover { transform: translateY(-2px); background: #34205f; }
.detail-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 2rem; align-items: center; margin-top: 1.5rem; border-radius: .5rem; background: #fff; padding: 1.25rem; box-shadow: 0 16px 44px rgba(21,16,36,.08); }
.detail-hero img { width: 100%; aspect-ratio: 4 / 3; border-radius: .45rem; object-fit: cover; }
.detail-hero h1, .list-head h1 { color: #151024; font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.08; }
.detail-hero p:not(.eyebrow), .list-head p:not(.eyebrow) { margin-top: 1rem; color: #64748b; font-size: 1.05rem; line-height: 1.8; }
.detail-content { margin-top: 1.5rem; border-radius: .5rem; background: #fff; padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 10px 28px rgba(21,16,36,.06); }
.detail-content p { color: #40556b; font-size: 1rem; line-height: 1.9; }
.detail-content p + p { margin-top: 1rem; }
.detail-content ol { display: grid; gap: .6rem; margin-top: 1.25rem; padding-left: 1.2rem; color: #151024; font-weight: 900; }
.detail-gallery, .album-grid, .list-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
.detail-gallery, .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-gallery figure, .album-grid figure, .list-card { overflow: hidden; border-radius: .5rem; background: #fff; box-shadow: 0 10px 28px rgba(21,16,36,.07); }
.detail-gallery img, .album-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.detail-gallery figcaption, .album-grid figcaption { padding: .8rem 1rem; color: #64748b; font-size: .85rem; font-weight: 800; }
.list-head { margin-top: 1.5rem; border-radius: .5rem; background: #fff; padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 10px 28px rgba(21,16,36,.06); }
.list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.list-card { display: block; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.list-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(21,16,36,.14); }
.list-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.list-card div { padding: 1.25rem; }
.list-card span { color: #ff3d8a; font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.list-card h2 { margin-top: .4rem; color: #151024; font-size: 1.35rem; font-weight: 900; }
.list-card p { margin-top: .6rem; color: #64748b; font-size: .9rem; line-height: 1.7; }
.modal-open { overflow: hidden; }
.site-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; }
.site-modal[hidden] { display: none; }
.site-modal-backdrop { position: absolute; inset: 0; background: rgba(11,8,20,.68); backdrop-filter: blur(10px); }
.site-modal-panel { position: relative; width: min(100%, 560px); max-height: min(86vh, 780px); overflow: auto; border-radius: .75rem; background: #fff; padding: 1.35rem; box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.site-modal-close { position: absolute; top: .85rem; right: .85rem; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: .4rem; background: #eef6f8; color: #151024; }
.site-modal h2 { padding-right: 3rem; color: #151024; font-size: 1.65rem; font-weight: 900; }
.modal-copy { display: grid; justify-items: center; gap: 1rem; margin-top: 1.25rem; text-align: center; }
.modal-copy p { color: #40556b; line-height: 1.8; }
.modal-qr { width: min(100%, 280px); aspect-ratio: 1 / 1; border-radius: .5rem; object-fit: contain; background: #f2f6f8; }
.modal-action { display: inline-flex; justify-content: center; border-radius: .375rem; background: #ff3d8a; padding: .85rem 1rem; color: #fff; font-weight: 900; text-decoration: none; }
.modal-schedule { margin-top: 1rem; }
.modal-schedule img { width: 100%; border-radius: .45rem; object-fit: contain; background: #f2f6f8; }
.modal-schedule figcaption { margin-top: .65rem; color: #64748b; font-size: .88rem; line-height: 1.6; text-align: center; }
@media (max-width: 1023px) { .booking-field { border-right: 0; border-bottom: 1px solid #e2e8f0; padding: .7rem .35rem; } }
@media (max-width: 1023px) { .gallery-head, .ocean-gallery-grid { grid-template-columns: 1fr; } }
@media (max-width: 1023px) { .detail-hero, .detail-gallery, .album-grid, .list-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .brand-logo { width: 154px; height: 52px; } .hero-copy { max-width: 340px; padding-bottom: 13rem; } #hero-title { max-width: 330px; font-size: 2.05rem; line-height: 1.12; word-break: break-all; } #hero-subtitle { max-width: 330px; font-size: 1rem !important; line-height: 1.65 !important; } }
@media (max-width: 640px) { .ticket-card { grid-template-columns: 1fr; } .ticket-card img { min-height: 180px; } .detail-hero { padding: .8rem; } .page-view { padding-top: 96px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }