:root{color-scheme:dark;--gold:#dfbc79;--light:#f1d9a9;--muted:#afa38f;--row:#29251e}*{box-sizing:border-box}body{margin:0;background:#000;color:#fff;font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:0.12rem;-webkit-text-size-adjust:100%}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:0.02rem solid var(--gold);outline-offset:0.03rem}button:active{filter:brightness(.88)}img{display:block}h1,h2,p{margin:0}button img{pointer-events:none}.page{width:3.75rem;margin:0 auto;background:#000;overflow:hidden}.header{height:0.59rem;position:relative}.logo{position:absolute;left:0.18rem;top:0.13rem;width:0.94rem;height:0.32rem;object-fit:cover}.divider{position:absolute;left:1.21rem;top:0.14rem;transform-origin:0 0;transform:rotate(90deg)}.brand{position:absolute;left:1.29rem;top:0.11rem;font-size:0.11rem;line-height:0.2rem}.brand span{display:inline-block;vertical-align:middle;background:linear-gradient(90deg,#e3b676,#f6d89c);color:#896f28;font-size:0.08rem;font-weight:600;line-height:0.14rem;width:0.43rem;text-align:center;border-radius:0.04rem;margin-left:0.03rem}.brand p{font-size:0.12rem;color:#a7a7a7;margin-top:-0.03rem}.support{position:absolute;left:3.39rem;top:0.13rem;width:0.2rem;height:0.37rem;font-size:0.1rem;line-height:0.2rem}.support img{width:0.2rem;height:0.2rem;object-fit:cover}.support span{position:absolute;left:0;top:0.17rem}.hero{display:block;margin-left:0.08rem;width:3.5rem;height:1.16rem;border-radius:0.18rem;overflow:hidden}.hero img{width:3.5rem;height:1.16rem;object-fit:cover}.primary-actions{display:flex;gap:0.08rem;margin:0.12rem 0 0 0.13rem;height:0.38rem}.primary-actions button{height:0.38rem;border-radius:0.1rem;font-size:0.16rem;font-weight:500}.register{width:1.65rem;border:0.01rem solid #f6d89b}.register span{color:#f4d599}.download-action{width:1.72rem;background:linear-gradient(90deg,#e3b676,#f6d89c);color:#111}.routes{margin:0.18rem 0.12rem 0 0.13rem;width:3.5rem}.route-heading{height:0.22rem;display:flex;align-items:center;justify-content:space-between}.route-heading-left{display:flex;align-items:center;gap:0.07rem}.route-heading h2{font-size:0.14rem;line-height:0.22rem;font-weight:500}.route-heading-left>img:last-child{margin-left:0}.route-heading #recheck{display:flex;align-items:center;gap:0.05rem;color:var(--muted);font-size:0.12rem;line-height:0.22rem;margin-right:0.02rem}.route-note{height:0.22rem;line-height:0.22rem;margin-top:0.17rem;text-align:center;color:var(--muted);white-space:nowrap}.route-note button{color:var(--gold)}.route-list{display:flex;flex-direction:column;gap:0.06rem;margin-top:0.07rem}.route{height:0.32rem;border-radius:1rem;background:var(--row);display:flex;align-items:center;padding:0 0.12rem;font-size:0.12rem;line-height:0.22rem}.latency{color:#95ff00;width:0.47rem;flex-shrink:0}.latency.medium{color:#fa0}.latency.slow{color:red}.route-name{margin-left:0.16rem}.route-enter{margin-left:auto;color:#d3b273;padding-right:0.04rem;line-height:0.32rem}.more{display:block;margin:0.09rem auto 0;height:0.22rem;line-height:0.22rem;color:#848484}.promotions{margin:0.22rem 0.12rem 0 0.13rem;width:3.5rem}.section-title{position:relative;height:0.37rem;text-align:center}.section-title>img{position:absolute;left:0.38rem;top:0.19rem}.section-title h2{color:var(--light);font-size:0.2rem;font-weight:600;line-height:0.22rem}.section-title p{font-size:0.09rem;line-height:0.22rem;position:absolute;left:0;right:0;top:0.18rem}.promotion-art{display:block;width:3.5rem;height:2.28rem}.promotion-art img{width:3.5rem;height:2.28rem;object-fit:cover}.games{width:3.5rem;margin:0.21rem 0.12rem 0 0.13rem}.games .section-title{height:1.28rem}.categories{position:relative;height:0;z-index:1}.categories>img{position:absolute;left:0;top:-1.1rem;width:3.5rem;height:1.17rem;object-fit:cover;pointer-events:none}.category-labels{position:absolute;top:-0.36rem;left:0.11rem;line-height:0.22rem;letter-spacing:0.0168rem;white-space:nowrap}.category-buttons{position:absolute;left:0;top:-0.87rem;width:3.5rem;height:0.77rem;display:grid;grid-template-columns:repeat(7,1fr)}.game-grid{display:grid;grid-template-columns:repeat(4,0.8rem);column-gap:0.1rem;row-gap:0.14rem}.game{width:0.8rem;height:1.05rem;text-align:center}.game img{width:0.8rem;height:0.8rem;object-fit:cover;border-radius:0.1rem}.game span{display:block;white-space:nowrap;font-size:0.12rem;line-height:0.22rem;margin-top:0.03rem}.game:nth-child(2),.game:nth-child(6){transform:translateX(-0.01rem)}.game:nth-child(4),.game:nth-child(8){transform:translateX(-0.01rem)}.venues{position:relative;width:3.5rem;height:2.47rem;margin-top:0.17rem}.venues>img{width:3.5rem;height:2.47rem;object-fit:cover}.venue-main{position:absolute;left:0;right:0;top:0;height:0.91rem}.venue-bottom{position:absolute;left:0;right:0;top:0.97rem;bottom:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0.06rem}.home-link{display:flex;flex-direction:column;align-items:center;justify-content:center;width:3.5rem;height:0.59rem;margin:0.15rem 0.12rem 0 0.13rem;background:var(--row);border-radius:0.08rem;color:var(--light);font-family:"Noto Sans SC","PingFang SC",sans-serif;font-size:0.16rem;line-height:0.22rem}.home-link small{font-size:0.12rem;line-height:0.16rem;color:var(--muted)}.stats{display:flex;gap:0.03rem;width:3.5rem;height:0.53rem;margin:0.34rem 0 0 0.14rem}.stats>div{flex:0 0 0.88rem}.stats b{display:flex;align-items:center;height:0.3rem;font-size:0.2rem;font-weight:600;line-height:0.32rem;color:#e2d8c6}.stats em{font-family:"Noto Sans SC","PingFang SC",sans-serif;font-size:0.16rem;font-style:normal;font-weight:400;color:var(--gold);line-height:0.22rem}.stats small{display:block;font-family:"Noto Sans SC","PingFang SC",sans-serif;font-size:0.12rem;line-height:0.16rem;color:var(--muted);white-space:nowrap}.partners{width:3.5rem;height:0.5rem;object-fit:cover;margin:0.25rem 0 0 0.12rem}footer p{text-align:center;font-family:"Noto Sans SC","PingFang SC",sans-serif;font-size:0.12rem;line-height:0.16rem;color:var(--muted);margin-top:0.34rem}.download-bar{display:flex;align-items:center;gap:0.1rem;width:3.75rem;height:0.72rem;margin-top:1.43rem;padding:0 0.12rem;background:#111113;border-bottom:0.01rem solid #2a2721;font-family:"Noto Sans SC","PingFang SC",sans-serif;overflow:hidden}.app-icon{width:0.44rem;height:0.44rem;object-fit:cover;border:0.01rem solid #5b4627;border-radius:0.1rem;flex-shrink:0}.app-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.02rem;overflow:hidden}.app-copy>p{font-size:0.11rem;line-height:0.14rem;color:#beb7ab}.app-copy strong{font-size:0.14rem;line-height:0.18rem;font-weight:500;white-space:nowrap}.rating{display:flex;align-items:center;gap:0.06rem}.stars{display:flex;gap:0.02rem}.rating small{font-size:0.1rem;line-height:0.14rem;color:#92908a;white-space:nowrap}.download-bar>button{width:0.76rem;height:0.32rem;flex-shrink:0;border-radius:0.16rem;background:#e9c67c;color:#111113;font-size:0.13rem;font-weight:500;line-height:0.18rem}dialog{border:0.01rem solid #59482e;border-radius:0.14rem;background:#191714;color:#f1d9a9;max-width:3.3rem;width:calc(100% - 0.4rem);padding:0.26rem}dialog::backdrop{background:#000a}dialog h2{font-size:0.18rem;margin:0.06rem 0 0.12rem}dialog p{color:#afa38f;font-size:0.14rem;line-height:0.24rem}.close{position:absolute;top:0.08rem;right:0.12rem;font-size:0.24rem}.confirm{width:100%;height:0.38rem;background:#e9c67c;color:#111;border-radius:0.08rem;margin-top:0.2rem}.toast{position:fixed;bottom:0.3rem;left:50%;transform:translateX(-50%);max-width:90%;background:#e9c67c;color:#111;border-radius:0.08rem;padding:0.1rem 0.16rem;z-index:10;display:none}.toast.show{display:block}

/* Match Figma’s grayscale text rendering and exact icon placement. */
body{-webkit-font-smoothing:antialiased;font-weight:400}.support img{position:absolute;left:0;top:0}.category-labels{white-space:pre}.route>img{transform:translateY(-0.005rem)}.route-heading-left>img:first-child{transform:translateY(0.004rem)}#recheck img{transform:translateY(0.0065rem)}

/* Keep the download navigation visible while the page scrolls. */
.page{padding-bottom:calc(0.96rem + env(safe-area-inset-bottom, 0rem))}
.download-bar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:20;width:min(3.75rem,100%);height:calc(0.72rem + env(safe-area-inset-bottom, 0rem));margin:0;padding-bottom:env(safe-area-inset-bottom, 0rem)}

/* Animated gold highlight follows the registration button border. */
@property --register-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.register{position:relative;isolation:isolate}
.register::after{content:"";position:absolute;inset:-0.01rem;border-radius:inherit;padding:0.015rem;pointer-events:none;background:conic-gradient(from var(--register-angle),transparent 0deg,transparent 230deg,#c28c37 275deg,#fff0bf 310deg,#e9bd70 335deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:register-border-flow 3s linear infinite}
@keyframes register-border-flow{to{--register-angle:360deg}}
@media(prefers-reduced-motion:reduce){.register::after{animation:none;--register-angle:310deg}}

/* Center each platform metric within four equal columns. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.03rem}
.stats>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;text-align:center}
.stats b{justify-content:center}
.stats small{text-align:center}

/* Original supplied icons, aligned with the action labels. */
.primary-actions button{display:flex;align-items:center;justify-content:center;gap:0.07rem}
.primary-actions .action-icon{width:0.17rem;height:0.18rem;object-fit:contain;flex-shrink:0}
.register>.action-label{color:#fff}
.register>.action-label>span{color:#f4d599}

/* Match each icon to the contrast and gold palette of its button. */
.register .action-icon{filter:brightness(0) saturate(100%) invert(83%) sepia(34%) saturate(577%) hue-rotate(345deg) brightness(101%) contrast(91%) drop-shadow(0 0 0.03rem #dfbc7926)}
.download-action .action-icon{filter:brightness(0) saturate(100%) invert(9%) sepia(17%) saturate(1131%) hue-rotate(354deg) brightness(96%) contrast(93%)}

/* Game artwork links open in a separate tab. */
.game{display:block;text-decoration:none;color:inherit}
.venues{display:block}
.category-link{position:absolute;left:0;top:-1.1rem;width:3.5rem;height:1.1rem;display:block;overflow:hidden}
.category-link img{width:3.5rem;height:1.17rem;object-fit:cover}
.game:focus-visible,.venues:focus-visible,.category-link:focus-visible{outline:0.02rem solid var(--gold);outline-offset:0.02rem}

.brand h1{font:inherit;margin:0}

/* 375-unit design follows the viewport, capped at 480px on wide screens. */
html{font-size:min(26.66666667vw,128px)}
.page{width:100%;max-width:3.75rem;min-height:100vh}
.divider{width:.3rem;height:.005rem}
.route-heading-left>img:first-child{width:.1284rem;height:.128391rem}
.route-heading-left>img:last-child{width:.25rem;height:.12rem}
#recheck img{width:.1504rem;height:.133335rem}
.route>img{width:.09rem;height:.07rem;flex-shrink:0}
.section-title>img{width:2.74rem;height:.01rem}
.stars img{width:.1rem;height:.1rem}

/* Phone safe areas, including landscape notches. */
html{font-size:min(calc((100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)) / 3.75),160px)}
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.download-bar{left:calc(50% + (env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)) / 2);max-width:calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
/* Tablet and wide landscape: fluid sections with readable text sizes. */
@media(min-width:600px){
 html{font-size:100px}
 .page{max-width:1024px}
 .header{height:64px}
 .support{left:auto;right:18px}
 .hero{width:calc(100% - 32px);height:auto;aspect-ratio:350/116;margin:0 16px}
 .hero img{width:100%;height:auto;aspect-ratio:350/116}
 .primary-actions{margin:16px 16px 0;height:44px;gap:12px}
 .primary-actions button{width:auto;flex:1;height:44px;font-size:17px}
 .routes,.promotions,.games,.home-link,.stats{width:calc(100% - 32px);margin-left:16px;margin-right:16px}
 .route-heading h2{font-size:16px}
 .route-note{font-size:14px}
 .route{height:44px;font-size:14px;padding:0 16px}
 .route-enter{line-height:44px;min-width:80px;text-align:right}
 .route-list{gap:8px}
 .more{height:36px;line-height:36px;font-size:14px}
 .section-title>img{left:50%;transform:translateX(-50%)}
 .promotion-art{width:100%;height:auto;max-width:700px;margin:0 auto;aspect-ratio:350/228}
 .promotion-art img{width:100%;height:auto;aspect-ratio:350/228}
 .games .section-title{height:37px}
 .categories{width:350px;height:91px;margin:0 auto}
 .category-link{top:-19px}
 .category-labels{top:55px}
 .game-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px}
 .game{width:100%;height:auto;min-width:0}
 .game img{width:100%;height:auto;aspect-ratio:1}
 .game span{font-size:14px;line-height:24px}
 .game:nth-child(n){transform:none}
 .venues{width:100%;max-width:700px;height:auto;margin:24px auto 0;aspect-ratio:350/247}
 .venues>img{width:100%;height:auto;aspect-ratio:350/247}
 .home-link{height:64px}
 .stats{height:68px}
 .stats b{font-size:24px;height:36px}
 .stats small{font-size:14px;line-height:20px}
 .partners{width:calc(100% - 32px);max-width:700px;height:auto;aspect-ratio:7;margin:25px auto 0}
 .download-bar{width:1024px;height:calc(80px + env(safe-area-inset-bottom,0px));padding-left:20px;padding-right:20px;gap:14px}
 .download-bar>button{width:120px;height:40px;font-size:15px}
 .app-copy strong{font-size:16px;line-height:22px}
 .app-copy>p{font-size:12px}
}
@media(min-width:900px){.game-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.game span{font-size:12px}}
@media(max-width:359px){.primary-actions button{min-height:38px}.route{min-height:34px}}