/* 欢喜族怀旧乐园 huanxizu.com · 复古游乐园 / 马戏帐篷 + 门票风（游戏40号） */
:root{--cr:#fff3dc;--cr2:#ffe9c2;--rd:#d62839;--rd2:#a81c2b;--nv:#1b2a4a;--nv2:#24375f;--yl:#ffc93c;--mt:#3fb8a5;--ink:#2a1f1a;--mu:#6b5a4c}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cr);color:var(--ink);font:16px/1.75 -apple-system,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
 background-image:radial-gradient(circle at 20% 30%,rgba(255,201,60,.35) 0 2px,transparent 3px),radial-gradient(circle at 70% 80%,rgba(63,184,165,.3) 0 2px,transparent 3px);background-size:46px 46px,62px 62px;padding-bottom:76px}
a{color:var(--rd2)}a:hover{color:var(--nv)}img{max-width:100%;height:auto;display:block}
.w{max-width:1140px;margin:0 auto;padding:0 18px}
.en{font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:.12em;text-transform:uppercase}
.age{background:var(--nv);color:var(--cr);font-size:13px;text-align:center;padding:5px 10px}.age b{color:var(--yl)}
.tent{position:relative;background:repeating-linear-gradient(90deg,var(--rd) 0 44px,var(--cr) 44px 88px);padding:14px 0 26px}
.tent::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:28px;background:radial-gradient(circle at 22px 0,var(--rd) 21px,transparent 22px) 0 0/88px 28px repeat-x,radial-gradient(circle at 66px 0,var(--cr) 21px,transparent 22px) 0 0/88px 28px repeat-x}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sign{display:inline-flex;align-items:center;gap:12px;background:var(--nv);color:var(--cr);text-decoration:none;border-radius:14px;padding:8px 16px;box-shadow:0 0 0 4px var(--yl),0 6px 0 4px var(--rd2);
 background-image:radial-gradient(circle,var(--yl) 0 2px,transparent 3px);background-size:14px 14px;background-position:3px 3px}
.sign b{font-size:26px;letter-spacing:.12em;color:var(--yl);background:var(--nv);padding:0 6px;border-radius:6px;line-height:1.3}
.sign small{display:block;font-size:12px;background:var(--nv);padding:0 6px;border-radius:4px;color:var(--cr)}
.go{background:var(--yl);color:var(--nv);font-weight:900;text-decoration:none;padding:10px 18px;border-radius:999px;border:3px solid var(--nv);box-shadow:0 4px 0 var(--nv);white-space:nowrap}
.go:hover{background:#ffd866;color:var(--nv)}
.tix{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:2}
.tix a{--h:7px;position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--cr);color:var(--nv);text-decoration:none;font-weight:700;font-size:15px;padding:7px 18px;border-radius:4px;
 -webkit-mask:radial-gradient(circle var(--h) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--h) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
 mask:radial-gradient(circle var(--h) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--h) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.tix a small{font-size:11px;color:var(--rd);font-family:Georgia,serif;font-style:italic}
.tix a[aria-current]{background:var(--yl)}
.crumb{font-size:13px;color:var(--mu);padding-top:26px}.crumb a{color:var(--mu)}
main{display:block}.sec{margin-top:40px}
h1,h2,h3{line-height:1.35;color:var(--nv)}
h2{font-size:26px;margin:0 0 6px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
h2 .en{font-size:14px;color:var(--rd);font-weight:400}
.sub{color:var(--mu);margin:0 0 18px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding-top:40px}
.gate{position:relative;background:var(--nv);color:var(--cr);border-radius:260px 260px 18px 18px;padding:70px 36px 34px;border:10px dotted var(--yl);box-shadow:0 0 0 6px var(--rd)}
.gate .wel{position:absolute;top:22px;left:50%;transform:translateX(-50%);background:var(--rd);color:var(--yl);padding:2px 18px;border-radius:999px;font-size:13px;white-space:nowrap}
.gate h1{color:var(--yl);font-size:40px;margin:6px 0 10px;text-align:center}
.gate h1 em{font-style:normal;color:var(--cr);border-bottom:4px solid var(--mt)}
.gate .lead{color:var(--cr);text-align:center}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-block;text-decoration:none;font-weight:900;padding:12px 22px;border-radius:999px;border:3px solid var(--nv);box-shadow:0 5px 0 var(--nv)}
.btn.y{background:var(--yl);color:var(--nv)}.btn.c{background:var(--cr);color:var(--nv)}
.gate .btn{border-color:var(--yl);box-shadow:0 5px 0 var(--rd)}
.facts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;list-style:none;padding:0;margin:18px 0 0}
.facts li{border:2px dashed var(--yl);border-radius:10px;padding:2px 12px;font-size:14px}.facts b{color:var(--yl);font-size:20px;margin-right:4px}
.park{position:relative;min-height:470px;overflow:hidden;padding:14px}
.wheel{position:absolute;z-index:2;right:6%;top:18px;width:330px;height:330px;border-radius:50%;border:8px solid var(--nv);background:repeating-conic-gradient(var(--nv) 0 2deg,transparent 2deg 30deg),radial-gradient(circle,var(--rd) 0 26px,var(--cr2) 27px);animation:spin 60s linear infinite}
.wheel i{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:8px 8px 14px 14px;border:3px solid var(--nv)}
.wheel i:nth-child(1){transform:rotate(0deg) translate(165px) rotate(0deg);background:var(--rd)}.wheel i:nth-child(2){transform:rotate(60deg) translate(165px);background:var(--yl)}
.wheel i:nth-child(3){transform:rotate(120deg) translate(165px);background:var(--mt)}.wheel i:nth-child(4){transform:rotate(180deg) translate(165px);background:var(--rd)}
.wheel i:nth-child(5){transform:rotate(240deg) translate(165px);background:var(--yl)}.wheel i:nth-child(6){transform:rotate(300deg) translate(165px);background:var(--mt)}
.legs{position:absolute;z-index:1;right:calc(6% + 115px);top:165px;width:100px;height:230px;background:linear-gradient(var(--nv),var(--nv)) center/8px 100% no-repeat;clip-path:polygon(46% 0,54% 0,100% 100%,88% 100%,50% 12%,12% 100%,0 100%)}
.legs::after{content:"";position:absolute;inset:0;background:var(--nv)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wheel{animation:none}}
.card{position:absolute;left:8px;bottom:10px;z-index:3;width:230px;background:#fff;padding:10px 10px 30px;transform:rotate(-5deg);box-shadow:0 10px 24px rgba(27,42,74,.25)}
.card figcaption{font-size:12px;color:var(--mu);text-align:center;margin-top:6px;font-family:Georgia,serif;font-style:italic}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.ride{display:grid;grid-template-columns:96px 1fr 64px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 0 var(--nv2);border:3px solid var(--nv);min-width:0}
.ride .art{display:flex;align-items:center;justify-content:center}
.ride .art svg{width:70px;height:70px}
.z-carousel{background:#ffd9df}.z-rocket{background:#ffd4c2}.z-robot{background:#d4dcef}.z-wave{background:#cdeee8}.z-wheel{background:#fff0bf}
.ride .bd{padding:14px 14px 12px;min-width:0}
.ride .bd small{color:var(--rd);font-size:12px}
.ride h3{margin:2px 0 6px;font-size:19px}.ride h3 a{color:var(--nv);text-decoration:none}.ride h3 a:hover{color:var(--rd)}
.ride p{margin:0 0 8px;font-size:14px;color:var(--mu)}
.stub{border-left:3px dashed var(--nv);background:var(--yl);display:flex;align-items:center;justify-content:center}
.stub span{writing-mode:vertical-rl;font-family:Georgia,serif;font-weight:700;letter-spacing:.2em;color:var(--nv);font-size:14px}
.stars{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;font-size:13px}
.stars li{display:flex;justify-content:space-between;gap:6px;white-space:nowrap}.stars s{text-decoration:none;color:var(--rd);letter-spacing:1px}.stars s i{font-style:normal;color:#e6d6bd}
.zones{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;position:relative;padding:24px;border-radius:30px;background:#cfe9d9;border:4px solid var(--nv);
 background-image:radial-gradient(circle,rgba(27,42,74,.25) 0 2px,transparent 3px);background-size:22px 22px}
.zone{grid-column:span 2;background:var(--cr);border:3px solid var(--nv);border-radius:40% 60% 55% 45%/50% 45% 55% 50%;padding:22px 18px;text-align:center;text-decoration:none;color:var(--ink);box-shadow:0 5px 0 var(--nv)}
.zone:nth-child(4),.zone:nth-child(5){grid-column:span 3}
.zone b{display:block;color:var(--nv);font-size:18px}.zone em{font-style:normal;color:var(--rd);font-size:13px}.zone svg{width:56px;height:56px}
.gatebox{text-align:center;margin-top:14px;font-weight:700;color:var(--nv)}
.tbl{overflow-x:auto;border:3px solid var(--nv);border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{padding:10px 12px;border-bottom:1px dashed #d9c7a8;text-align:left;vertical-align:top}
thead th{background:var(--nv);color:var(--yl)}tbody th{background:var(--cr2);color:var(--nv);white-space:nowrap}
.rail{list-style:none;margin:0;padding:0 0 0 34px;position:relative}
.rail::before{content:"";position:absolute;left:12px;top:6px;bottom:6px;width:10px;background:repeating-linear-gradient(var(--nv) 0 4px,transparent 4px 14px),linear-gradient(90deg,var(--rd) 0 2px,transparent 2px 8px,var(--rd) 8px 10px)}
.rail li{position:relative;background:#fff;border:3px solid var(--nv);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.rail li::before{content:"";position:absolute;left:-30px;top:16px;width:16px;height:16px;border-radius:50%;background:var(--yl);border:3px solid var(--nv)}
.rail time{display:inline-block;background:var(--rd);color:var(--cr);font-weight:700;border-radius:6px;padding:0 8px;font-size:14px;margin-right:8px}
.rail b{color:var(--nv)}.rail p{margin:6px 0 0;color:var(--mu)}
.board{background:var(--nv);color:var(--cr);border-radius:16px;padding:20px 22px;border:4px solid var(--yl)}
.board h3{color:var(--yl);margin:0 0 8px}.board a{color:var(--yl)}.board ul{margin:0;padding-left:20px}.board p{margin:0}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps li{counter-increment:s;background:#fff;border:3px solid var(--nv);border-radius:12px;padding:12px 16px 12px 62px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:12px;top:12px;width:36px;height:36px;border-radius:50%;background:var(--rd);color:var(--yl);font-weight:900;display:flex;align-items:center;justify-content:center}
.steps b{display:block;color:var(--nv)}
.info{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}
.pc{background:#fff;padding:10px 10px 26px;box-shadow:0 10px 24px rgba(27,42,74,.2);transform:rotate(-2deg)}
.pc figcaption{font-size:12px;color:var(--mu);text-align:center;margin-top:6px}
.pc.art{display:flex;align-items:center;justify-content:center;min-height:260px}.pc.art svg{width:150px;height:150px}
.prose p{max-width:780px}.lead{font-size:17px}
.gal{display:flex;gap:22px;flex-wrap:wrap}.gal figure{margin:0}
.faq{background:#fff;border:3px solid var(--nv);border-radius:12px;margin:0 0 10px;padding:0 16px}
.faq summary{cursor:pointer;font-weight:700;color:var(--nv);padding:12px 0}.faq p{margin:0 0 12px;color:var(--mu)}
.rel{display:flex;flex-wrap:wrap;gap:10px}.rel a{background:var(--cr2);border:2px solid var(--nv);border-radius:999px;padding:4px 14px;text-decoration:none;color:var(--nv);font-weight:700}
.cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--rd);color:var(--cr);border-radius:18px;padding:22px 26px;border:4px solid var(--nv);box-shadow:0 8px 0 var(--nv)}
.cta h2{color:var(--yl);margin:0}.cta p{margin:6px 0 0}
.cta>a{background:var(--yl);color:var(--nv);font-weight:900;text-decoration:none;padding:12px 24px;border-radius:999px;border:3px solid var(--nv);white-space:nowrap}
footer{margin-top:60px;background:var(--nv);color:var(--cr);padding:34px 0 26px;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:-8px;height:16px;background:radial-gradient(circle,var(--yl) 0 5px,transparent 6px) 0 0/28px 16px repeat-x}
footer a{color:var(--yl)}.cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;font-size:14px}.cols b{color:var(--yl)}
#dk{position:absolute;opacity:0;pointer-events:none}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;align-items:center;gap:8px;padding:10px;background:rgba(27,42,74,.96);border-top:4px dotted var(--yl)}
.dock a{background:var(--yl);color:var(--nv);font-weight:900;text-decoration:none;padding:10px 26px;border-radius:999px;border:3px solid var(--cr)}
.dock label{color:var(--cr);cursor:pointer;font-size:22px;padding:0 10px}
#dk:checked+.dock{display:none}
.mt{margin-top:20px}.big{font-size:22px;color:var(--yl);margin:0}.on{color:var(--yl)}
@media (max-width:860px){.hero{grid-template-columns:1fr}.park{min-height:380px}.wheel{width:260px;height:260px;right:4%}.wheel i{width:28px;height:28px;margin:-14px}
 .wheel i:nth-child(1){transform:rotate(0deg) translate(130px)}.wheel i:nth-child(2){transform:rotate(60deg) translate(130px)}.wheel i:nth-child(3){transform:rotate(120deg) translate(130px)}
 .wheel i:nth-child(4){transform:rotate(180deg) translate(130px)}.wheel i:nth-child(5){transform:rotate(240deg) translate(130px)}.wheel i:nth-child(6){transform:rotate(300deg) translate(130px)}
 .legs{right:calc(4% + 80px);top:130px}.card{width:190px}
 .info{grid-template-columns:1fr}.pc{max-width:300px}.cols{grid-template-columns:1fr}.zones{grid-template-columns:1fr 1fr}.zone,.zone:nth-child(4),.zone:nth-child(5){grid-column:span 1}.zone:nth-child(5){grid-column:span 2}}
@media (max-width:560px){body{font-size:15px}.tent{padding-top:10px}.sign b{font-size:21px}.go{padding:8px 12px;font-size:14px}
 .tix{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.tix a{flex:0 0 auto}
 .gate{padding:62px 18px 26px;border-radius:180px 180px 16px 16px}.gate h1{font-size:28px}.grid{grid-template-columns:1fr}.ride{grid-template-columns:76px 1fr 48px}.ride .art svg{width:54px;height:54px}.stars{grid-template-columns:1fr;max-width:200px}
 h2{font-size:22px}.park{min-height:330px}.wheel{width:220px;height:220px}.wheel i:nth-child(n){width:24px;height:24px;margin:-12px}
 .wheel i:nth-child(1){transform:rotate(0deg) translate(110px)}.wheel i:nth-child(2){transform:rotate(60deg) translate(110px)}.wheel i:nth-child(3){transform:rotate(120deg) translate(110px)}
 .wheel i:nth-child(4){transform:rotate(180deg) translate(110px)}.wheel i:nth-child(5){transform:rotate(240deg) translate(110px)}.wheel i:nth-child(6){transform:rotate(300deg) translate(110px)}
 .legs{right:calc(4% + 60px);top:110px;height:200px}.card{width:160px}.zones{grid-template-columns:1fr;padding:16px}.zone:nth-child(n){grid-column:span 1}.dock a{padding:10px 16px;font-size:15px}}
