:root { --bg:#1b100b; --panel:#352015; --line:#845b38; --red:#985528; --deep-red:#542d18; --gold:#efc88d; --white:#f6e7cf; --muted:#bba385; }
.phone-shell { background:linear-gradient(160deg,#3b2111,#130b07); }
html, body { background:#160c07!important; }
/* 手机预览保持各页同一内容宽度，滚动条不挤压底栏。 */
html { scrollbar-width:none; }
html::-webkit-scrollbar { display:none; }
.ak-home-active .phone-shell { min-height:0!important; height:auto!important; align-self:flex-start; }
.system-bar,.app-header { background:#24140c; color:#f0d0a3; }
.ak-home-active .system-bar,.ak-home-active .app-header { display:none; }
.ak-home-active .app-content { padding:0!important; background:#160c07; min-height:0; }
.ak-art { position:relative; margin:0; padding:0; line-height:0; }
.ak-art>img { display:block; width:100%; height:auto; }
.ak-art .ak-hotspot { position:absolute; border:0; padding:0; margin:0; background:transparent; border-radius:8px; cursor:pointer; }
.ak-hotspot:focus-visible { outline:2px solid #ffe0a1; outline-offset:-3px; }
.menu-page,.pass-page,.profile-page,.recharge-page,.safe-page,.table-page { background:radial-gradient(circle at 18% 0,#53301988,transparent 40%),linear-gradient(150deg,#28170f,#110a07)!important; }
.dark-card,.member-card,.balance-card,.function-card,.plan-card,.current-card,.rule,.recharge-rule { background:linear-gradient(145deg,#492817,#1e110b)!important; border-color:#946d44!important; color:#f3e1c4; }
.category { background:#20120b!important; }
.category button.active { background:#50301b!important; border-color:#cd9b60!important; }
.cart-bar { position:fixed!important; bottom:calc(96px + max(8px, env(safe-area-inset-bottom)))!important; background:#382115!important; border-color:#92613c!important; }
.menu-page { padding-bottom:180px!important; }
.pass-page,.recharge-page { padding-bottom:140px!important; }
.pass-page { min-height:760px; padding:22px 16px 190px!important; background:radial-gradient(circle at 82% 0,#7a4825 0,transparent 28%),linear-gradient(#2a160d,#110906 64%,#070504)!important; }
.pass-hero { padding:14px 8px 20px!important; border-bottom:1px solid rgba(194,133,67,.42); }
.pass-hero h2 { letter-spacing:1px; }
.pass-plan { min-height:102px; padding:15px!important; border-color:#845b38!important; background:linear-gradient(120deg,rgba(63,31,16,.96),rgba(13,8,5,.98))!important; box-shadow:0 8px 18px rgba(0,0,0,.2); }
.pass-plan strong { color:#fff2da; }
.pass-plan span { color:#e0ae6d!important; }
.pass-plan small { color:#c0a58a!important; line-height:1.4; }
.pass-price b { color:#ffd38d!important; }
.red-button { background:linear-gradient(#976039,#5a311b)!important; border-color:#c39860!important; }
.pass-plan { gap:12px; }
.pass-plan>div:first-child { min-width:0; flex:1; }
.pass-price { flex:0 0 82px; min-width:82px; }
.pass-price em { display:block; min-height:32px; padding:7px 10px; white-space:nowrap; background:linear-gradient(#976039,#5a311b)!important; border:1px solid #c39860; }
.app-content { background:#160c07; padding-bottom:0; }
.subpage { background:radial-gradient(circle at 18% 0,#53301988,transparent 40%),linear-gradient(150deg,#28170f,#110a07); }
.subpage, .profile-page, .pass-page { min-height:calc(100svh - 107px); }
.category-list { background:#20120b; }

/* AK Western page backgrounds: homepage and navigation remain unchanged. */
.onsite-page { background-color:#160c07!important; background-image:linear-gradient(180deg,transparent 0,rgba(22,12,7,.12) 220px,rgba(22,12,7,.5) 550px),url('./ak-events-western-v1.jpg')!important; background-size:100% auto!important; background-position:center top!important; background-repeat:no-repeat!important; }
.onsite-page .notice-heading { min-height:230px; padding:100px 4px 14px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-end; text-shadow:0 1px 4px #000,0 0 10px #000; }
.onsite-page .notice-heading-copy { color:#e0cbb0; }
.ranking-page,.ranking-member-only { background-color:#160c07!important; background-image:linear-gradient(180deg,rgba(22,12,7,.12),rgba(22,12,7,.24) 260px,rgba(22,12,7,.72) 560px,#160c07 825px),url('./ak-ranking-western-v1.jpg')!important; background-position:center top!important; background-size:100% auto!important; background-repeat:no-repeat!important; }

/* Home footer is interactive UI, replacing the old labels embedded in the poster. */
.ak-home-active .phone-shell { align-self:stretch; }
.ak-home-page { min-height:100svh; padding-bottom:calc(72px + env(safe-area-inset-bottom)); box-sizing:border-box; background:#160c07; overflow-x:hidden; }
/* Retain the natural scene ratio; shorter screens crop only the spare ceiling at the top. */
.ak-home-scene { position:relative; width:100%; height:calc(100svh - 72px - calc(var(--ak-shell-width) * 0.797333333) - env(safe-area-inset-bottom)); min-height:calc(var(--ak-shell-width) * 0.8); max-height:calc(var(--ak-shell-width) * 1.111612133); overflow:hidden; }
.ak-home-scene-image { position:absolute; top:calc(100% - calc(var(--ak-shell-width) * 1.111612133)); left:0; display:block; width:100%; height:calc(var(--ak-shell-width) * 2); }
.ak-home-actions { padding-bottom:calc(var(--ak-shell-width) * 0.026666667); }
.ak-feature-grid { display:flex; gap:calc(var(--ak-shell-width) * 0.016); margin:0 calc(var(--ak-shell-width) * 0.032); }
.ak-feature-card { flex:1; min-width:0; height:calc(var(--ak-shell-width) * 0.437333333); padding:0; margin:0; overflow:hidden; border:calc(var(--ak-shell-width) * 0.001333333) solid #b68b57; border-radius:calc(var(--ak-shell-width) * 0.016); background:#ebc79b; color:#302014; box-sizing:border-box; line-height:1.3; text-align:left; }
.ak-feature-card::after { display:none; }
.ak-feature-photo { position:relative; height:calc(var(--ak-shell-width) * 0.253333333); overflow:hidden; background:#201209; }
/* Source photographs are clipped from the untouched 1086x1448 poster; never stretched. */
.ak-feature-art { position:absolute; top:calc(var(--ak-shell-width) * -0.668975467); width:calc(var(--ak-shell-width) * 1.190995733); height:auto; max-width:none; display:block; }
.ak-feature-order { left:calc(var(--ak-shell-width) * -0.0609928); }
.ak-feature-pass { left:calc(var(--ak-shell-width) * -0.439348933); }
.ak-feature-recharge { left:calc(var(--ak-shell-width) * -0.8242828); }
.ak-feature-copy { height:calc(var(--ak-shell-width) * 0.184); padding:calc(var(--ak-shell-width) * 0.029333333) calc(var(--ak-shell-width) * 0.021333333); box-sizing:border-box; background:linear-gradient(120deg,#f2d6ad,#dcad79); display:flex; flex-direction:column; justify-content:center; }
.ak-feature-heading { display:flex; align-items:center; justify-content:space-between; gap:calc(var(--ak-shell-width) * 0.005333333); white-space:nowrap; font-size:calc(var(--ak-shell-width) * 0.042666667); font-weight:600; }
.ak-feature-arrow { display:flex; flex:0 0 calc(var(--ak-shell-width) * 0.042666667); width:calc(var(--ak-shell-width) * 0.042666667); height:calc(var(--ak-shell-width) * 0.042666667); justify-content:center; align-items:center; border-radius:50%; color:#f3d9b2; background:#36220e; font-size:calc(var(--ak-shell-width) * 0.04); font-weight:400; line-height:1; }
.ak-feature-english { display:block; margin-top:calc(var(--ak-shell-width) * 0.013333333); font-size:calc(var(--ak-shell-width) * 0.021333333); line-height:1.2; white-space:nowrap; color:#5a3820; }
.ak-home-story { display:block; width:100%; padding:0; border:0; background:transparent; position:relative; height:calc(var(--ak-shell-width) * 0.157333333); margin-top:calc(var(--ak-shell-width) * 0.016); overflow:hidden; }
.ak-story-art { position:absolute; top:calc(var(--ak-shell-width) * -0.867403333); left:0; width:100%; height:calc(var(--ak-shell-width) * 1.333333333); display:block; }
.ak-utility-row { display:flex; margin:calc(var(--ak-shell-width) * 0.016) calc(var(--ak-shell-width) * 0.032) 0; height:calc(var(--ak-shell-width) * 0.144); border:calc(var(--ak-shell-width) * 0.001333333) solid #91643b; border-radius:calc(var(--ak-shell-width) * 0.013333333); background:linear-gradient(#392310,#221407); box-sizing:border-box; }
.ak-utility { display:flex; flex:1; min-width:0; align-items:center; justify-content:center; gap:calc(var(--ak-shell-width) * 0.016); padding:0; margin:0; border:0; border-left:calc(var(--ak-shell-width) * 0.001333333) solid #795332; background:transparent; color:#efd1a5; line-height:1.3; }
.ak-utility:first-child { border-left:0; }
.ak-utility-icon { font-size:calc(var(--ak-shell-width) * 0.050666667); line-height:1; }
.ak-utility-title { display:block; font-size:calc(var(--ak-shell-width) * 0.034666667); white-space:nowrap; }
.ak-utility-english { display:block; margin-top:calc(var(--ak-shell-width) * 0.005333333); font-size:calc(var(--ak-shell-width) * 0.018666667); color:#c0a47c; line-height:1.2; }
/* 两处底栏共享宽度、行高、图标和文字；安全区只计算一次。 */
:root { --ak-shell-width:min(100vw, 390px); }
.phone-shell { width:var(--ak-shell-width); }
@media (min-width:700px) { :root { --ak-shell-width:min(540px, 75svh); } }
.bottom-nav, .ak-home-native-nav { position:fixed!important; z-index:90; top:auto; left:50%; right:auto; bottom:0; transform:translateX(-50%); width:var(--ak-shell-width); height:calc(72px + env(safe-area-inset-bottom)); margin:0; padding:0 0 env(safe-area-inset-bottom); border:0; border-top:1px solid #72502f; border-radius:0; background:linear-gradient(#352012,#190e08); box-shadow:none; backdrop-filter:none; display:flex; align-items:stretch; line-height:1.3; }
.bottom-nav.hidden { display:none; }
.bottom-nav .nav-item, .ak-home-native-nav .nav-item { flex:0 0 20%; width:20%; min-width:0; height:100%; margin:0; padding:0; color:#bca486; background:transparent; border:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:12px; font-weight:400; line-height:1.3; }
.bottom-nav .nav-item.active, .ak-home-native-nav .nav-item.active { color:#ffdda4; }
.bottom-nav .nav-item::before, .ak-home-native-nav .nav-item::before { display:none; }
.bottom-nav .nav-icon, .ak-home-native-nav .nav-icon { flex-shrink:0; width:22px; height:22px; }
.bottom-nav .nav-item span:last-child, .ak-home-native-nav .nav-item span:last-child { font-size:12px; white-space:nowrap; line-height:1.3; }

.round-board-bg { position:absolute; left:9%; top:7%; width:82%; height:84%; border-radius:48%; border:2px solid #b38953; box-sizing:border-box; background:radial-gradient(ellipse,#554026 0,#342416 60%,#201209 100%); box-shadow:inset 0 0 0 8px #321c0e,inset 0 0 0 10px #82582e,inset 0 0 40px #110904,0 5px 16px #0008; }
.round-table-brand .ak-table-wordmark { font-family:Georgia,serif; color:#e6c58e; font-size:17px; letter-spacing:2px; border-top:1px solid #a87d49; border-bottom:1px solid #a87d49; padding:9px 2px; }
/* Activities share one continuous background from the status bar through the tabs. */
.ak-events-active .phone-shell { background: url('./ak-events-western-v1.jpg') center top / cover no-repeat!important; background-attachment:local!important; }
.ak-events-active .system-bar,.ak-events-active .app-header,.ak-events-active .app-content,.ak-events-active .onsite-page { background:transparent!important; }
.ak-events-active .bottom-nav { background:rgba(20,12,7,.3)!important; box-shadow:none!important; border-color:rgba(218,176,107,.18)!important; }
.ak-events-active .onsite-page { padding-top:6px; }
.ak-events-active .notice-heading { min-height:0; padding-top:0; }
.ak-events-active .notice-empty,.ak-events-active .store-brief,.ak-events-active .live-empty { background:rgba(20,12,7,.62)!important; }
.staff-code-card { margin:18px 0; padding:18px; border:1px solid #88643d; border-radius:14px; background:linear-gradient(120deg,#382416,#21160f); }
.staff-code-heading,.staff-code-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.staff-code-heading strong { font-size:17px; color:#f2d09c; }.staff-code-heading span { color:#c2ad90; font-size:12px; }
.staff-code-row input { flex:1; min-width:0; height:48px; padding:0 12px; border:1px solid #88643d; border-radius:9px; background:#170e08; color:#ffe2ac; font-size:18px; letter-spacing:2px; }
.staff-code-row button { flex:none; min-height:44px; background:transparent; color:#dec295; border:0; }
#recharge-staff-status { font-size:13px; color:#bdad98; line-height:1.6; }#recharge-staff-status b { color:#ffe1a5; font-size:18px; }#recharge-staff-status small { display:block; }
.zx-coin-summary{position:relative}.zx-coin-summary .zx-coin-art{float:right;width:64px;height:64px;object-fit:contain;margin:0 0 12px 14px}.zx-coin-summary h3{overflow-wrap:anywhere}.zx-coin-summary .red-button{clear:both}
