:root{color-scheme:dark;background:#090d14;font-family:Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;min-width:320px}main{min-height:100dvh;padding:12px 0 calc(130px + env(safe-area-inset-bottom))}
.top-panel{width:min(calc(100% - 32px),760px);min-height:84px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px;border:1px solid rgb(125 174 218/.14);border-radius:26px;background:linear-gradient(135deg,#17283a 0%,#0e1a28 54%,#111f2e 100%);box-shadow:inset 0 1px 0 rgb(255 255 255/.05),0 14px 30px rgb(0 0 0/.32)}
.profile-summary{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:11px;padding:0 4px;text-align:left;color:#f3f8ff;border-radius:22px;transition:filter .2s ease,transform .2s ease}
.avatar{width:58px;height:58px;display:grid;place-items:center;flex:none;border:1px solid rgb(255 190 83/.7);border-radius:50%;color:#fff6df;font-size:22px;font-weight:800;background:radial-gradient(circle at 32% 26%,#e9a948 0 8%,#864b20 25%,#172536 58%,#07111c 100%);background-size:cover;background-position:center;box-shadow:0 0 0 3px rgb(4 11 19/.45),0 0 18px rgb(250 139 45/.22)}.avatar.has-photo{background-color:#18283a}
.profile-copy{min-width:0;display:grid;gap:6px}.profile-name{font-size:16px;font-weight:600;letter-spacing:.01em;white-space:nowrap}.profile-chevron{display:inline-block;margin-left:2px;color:#9eb2c8;font-size:23px;line-height:12px;vertical-align:-2px}.balance-row{height:34px;display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:3px 5px 3px 9px;border-radius:18px;background:rgb(18 42 70/.82);box-shadow:inset 0 1px 0 rgb(255 255 255/.04)}.star-mark{color:#ffd34f;font-size:23px;line-height:1;text-shadow:0 2px 7px rgb(255 174 43/.48)}.balance-value{font-size:20px;font-weight:800;line-height:1;letter-spacing:.02em}.balance-plus{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:#e4f3ff;font-size:24px;font-weight:400;line-height:1;background:linear-gradient(145deg,#4d8ee8,#2863ba);box-shadow:inset 0 1px 0 rgb(255 255 255/.2),0 3px 8px rgb(0 0 0/.2)}
.top-deposit{height:56px;min-width:164px;display:flex;flex-direction:row;gap:10px;padding:0 22px;border:1px solid rgb(255 213 129/.86);border-radius:20px;color:#fff;font-size:18px;font-weight:800;white-space:nowrap;background:linear-gradient(135deg,#ffb52f 0%,#ff8228 47%,#ff5b2c 100%);box-shadow:inset 0 1px 0 rgb(255 255 255/.35),0 0 22px rgb(255 113 37/.5),0 8px 20px rgb(0 0 0/.22);transition:filter .2s ease,transform .2s ease,box-shadow .2s ease}.wallet-icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.profile-summary:hover,.top-deposit:hover{filter:brightness(1.08);transform:translateY(-1px)}.top-deposit:hover{box-shadow:inset 0 1px 0 rgb(255 255 255/.4),0 0 28px rgb(255 113 37/.68),0 10px 22px rgb(0 0 0/.25)}.profile-summary:focus-visible,.top-deposit:focus-visible{outline:2px solid #fff;outline-offset:3px}.profile-summary:active,.top-deposit:active{transform:translateY(1px) scale(.985)}
.live-panel{width:min(calc(100% - 32px),760px);min-height:72px;margin:10px auto 0;padding:10px 14px;display:flex;align-items:center;gap:18px;border:1px solid rgb(108 157 204/.18);border-radius:24px;background:linear-gradient(100deg,#142538,#0e1c2b 58%,#111f2d);box-shadow:inset 0 1px 0 rgb(255 255 255/.035),0 10px 22px rgb(0 0 0/.2)}.live-status{width:92px;display:grid;grid-template-columns:10px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;flex:none}.live-dot{width:9px;height:9px;grid-row:1;border-radius:50%;background:#32f29a;box-shadow:0 0 0 3px rgb(50 242 154/.12),0 0 10px rgb(50 242 154/.75);animation:live-pulse 1.8s ease-in-out infinite}.live-title{font-size:17px;font-weight:800;letter-spacing:.06em;color:#f3f7fc;line-height:1}.live-caption{grid-column:2;margin-top:4px;color:#7890a8;font-size:8px;line-height:1.12;letter-spacing:.01em}.live-slots{min-width:0;flex:1;display:grid;grid-template-columns:repeat(4,minmax(48px,1fr));gap:8px}.live-slot{height:48px;position:relative;display:block;border:1px solid rgb(116 158 196/.12);border-radius:15px;background:linear-gradient(145deg,rgb(33 58 82/.48),rgb(11 26 42/.52));box-shadow:inset 0 1px 0 rgb(255 255 255/.025)}.live-slot::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);border:1px dashed rgb(131 165 196/.22);border-radius:8px}.live-slot::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:rgb(124 161 192/.22)}@keyframes live-pulse{0%,100%{opacity:1;box-shadow:0 0 0 3px rgb(50 242 154/.12),0 0 10px rgb(50 242 154/.75)}50%{opacity:.65;box-shadow:0 0 0 5px rgb(50 242 154/.05),0 0 5px rgb(50 242 154/.4)}}
@keyframes ui-button-feedback{0%{transform:translateY(0) scale(1)}35%{transform:translateY(1px) scale(.985)}100%{transform:translateY(0) scale(1)}}[data-ui-button].is-pressed{animation:ui-button-feedback .28s ease-out}
.hotbar{position:fixed;width:min(calc(100% - 24px),760px);aspect-ratio:1000/240;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));isolation:isolate}
.plate{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 3px #007aff)}
.plate use{display:none}.plate #outline{stroke:#00cfff;stroke-width:3}
.chest{position:absolute;width:27%;height:100%;left:36.5%;top:-7%;background-image:url('./assets/hotbar-profile-v2.png');background-size:370.37% auto;background-position:50% 31%;background-repeat:no-repeat;clip-path:polygon(2% 0,98% 0,96% 52%,86% 80%,72% 94%,28% 94%,14% 80%,4% 52%);pointer-events:none;z-index:2}
.hotbar{container-type:inline-size}
.actions{position:absolute;inset:32% 3% 7%;display:grid;grid-template-columns:18% 18% 28% 18% 18%;z-index:4}
button{border:0;background:transparent;color:#b9dcff;min-width:0;padding:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;cursor:pointer;border-radius:30px;-webkit-tap-highlight-color:transparent;transition:color .22s}
#tab-2{grid-column:4}#tab-3{grid-column:5}
button .nav-icon{display:block;width:clamp(28px,7.2cqw,52px);height:clamp(28px,7.2cqw,52px);flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
button{gap:clamp(3px,.8cqw,6px)}
button span{font-size:clamp(10px,2.4vw,17px);white-space:nowrap}
button[aria-selected=true] svg{color:#e5faff}
button svg{transition:color .22s ease,filter .22s ease}
button[aria-selected=true] svg{filter:drop-shadow(0 0 2px #36cfff80) drop-shadow(0 0 6px #008cff60)}
button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:430px){.top-panel{width:calc(100% - 20px);min-height:76px;padding:7px 8px;gap:7px;border-radius:23px}.avatar{width:52px;height:52px;font-size:20px}.profile-summary{gap:8px}.profile-name{font-size:14px}.balance-row{height:31px;gap:6px;padding-left:8px}.star-mark{font-size:20px}.balance-value{font-size:18px}.balance-plus{width:25px;height:25px;font-size:21px}.top-deposit{height:50px;min-width:132px;padding:0 14px;gap:7px;border-radius:17px;font-size:15px}.wallet-icon{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){button,button svg,.top-panel *{transition:none!important;animation:none!important}}
@media(max-width:430px){.live-panel{width:calc(100% - 20px);min-height:64px;padding:8px 10px;gap:10px;border-radius:20px}.live-status{width:74px;column-gap:6px}.live-title{font-size:14px}.live-caption{font-size:7px}.live-slots{gap:5px}.live-slot{height:42px;border-radius:12px}}
.banner-slot{width:min(calc(100% - 32px),760px)}
@media(max-width:430px){.banner-slot{width:calc(100% - 20px);margin-top:10px}.banner-placeholder,.banner-link{border-radius:20px}.banner-placeholder span{font-size:10px}.banner-dots{padding-top:6px}}
.profile-handle{display:block;min-height:10px;color:#8196ad;font-size:10px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-handle:empty{display:none}
.actions .nav-icon{width:32px;height:32px;min-width:32px;min-height:32px;object-fit:contain;transform:none}.actions button{gap:5px}.actions button span{line-height:1.1}
.actions .nav-icon .icon-fill{fill:currentColor;stroke:none}.actions .nav-icon{stroke-width:1.65}
.banner-placeholder,.banner-link{aspect-ratio:2.35}.banner-dots{display:none}.banner-slot.has-multiple .banner-dots{display:flex}
.balance-row{cursor:pointer;transition:filter .2s ease,transform .2s ease}.balance-row:hover{filter:brightness(1.12);transform:translateY(-1px)}.balance-row:active{transform:translateY(1px) scale(.98)}.balance-row:focus-visible{outline:2px solid #fff;outline-offset:2px}
.top-panel{width:min(calc(100% - 24px),760px);min-height:72px;padding:6px 8px;gap:10px}.avatar{width:50px;height:50px;font-size:19px}.profile-copy{gap:2px}.profile-name{font-size:15px}.profile-handle{font-size:9px;min-height:9px}.balance-row{height:30px;gap:6px;padding-left:8px}.star-mark{font-size:20px}.balance-value{font-size:18px}.balance-plus{width:25px;height:25px;font-size:21px}.top-deposit{height:48px;min-width:148px;padding:0 17px;border-radius:18px;font-size:16px}.wallet-icon{width:21px;height:21px}
@media(max-width:430px){.top-panel{width:calc(100% - 24px);min-height:64px;padding:5px 7px;gap:6px}.avatar{width:45px;height:45px;font-size:18px}.profile-summary{gap:7px}.profile-name{font-size:13px}.profile-handle{font-size:8px;min-height:8px}.balance-row{height:27px;gap:5px;padding-left:7px}.star-mark{font-size:18px}.balance-value{font-size:16px}.balance-plus{width:22px;height:22px;font-size:19px}.top-deposit{height:43px;min-width:116px;padding:0 11px;gap:6px;border-radius:15px;font-size:13px}.wallet-icon{width:18px;height:18px}}
.live-slot{height:48px;border:0;border-radius:0;background:transparent;box-shadow:none}.live-slot::before,.live-slot::after{display:none}
.banner-slot{width:min(calc(100% - 32px),760px);margin:12px auto 0}.banner-placeholder,.banner-link{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;aspect-ratio:1.55;border:1px solid rgb(73 137 197/.3);border-radius:24px;background:radial-gradient(circle at 75% 20%,rgb(30 82 133/.28),transparent 38%),linear-gradient(135deg,#102940,#091522 58%,#142944);box-shadow:inset 0 1px 0 rgb(255 255 255/.045),0 12px 24px rgb(0 0 0/.24)}.banner-placeholder::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgb(255 255 255/.035) 45%,transparent 65%);transform:translateX(-100%);animation:banner-shimmer 2.8s ease-in-out infinite}.banner-placeholder span{position:relative;color:#69829b;font-size:13px;letter-spacing:.04em;text-transform:uppercase}.banner-link{display:block;border:0;text-decoration:none}.banner-link img{display:block;width:100%;height:100%;object-fit:cover}.banner-dots{display:flex;justify-content:center;gap:7px;padding-top:8px}.banner-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#40566c}.banner-dots i.is-active{width:20px;border-radius:5px;background:#ff922f;box-shadow:0 0 10px rgb(255 146 47/.45)}@keyframes banner-shimmer{to{transform:translateX(100%)}}
.banner-placeholder,.banner-link{aspect-ratio:2.35!important}.banner-dots{display:none!important}.banner-slot.has-multiple .banner-dots{display:flex!important}
.banner-slot{width:min(calc(100% - 24px),760px)!important}@media(max-width:430px){.banner-slot{width:calc(100% - 24px)!important}}
.top-panel,.live-panel,.banner-slot{width:min(calc(100% - 24px),760px)!important;margin-left:auto;margin-right:auto}.hotbar{width:min(calc(100% - 24px),760px)!important}
.actions .nav-icon .icon-fill,.actions .nav-icon .icon-detail{fill:none!important;stroke:currentColor!important}.actions .nav-icon{color:#b9dcff}.actions button[aria-selected=true] .nav-icon{color:#f2fbff;filter:drop-shadow(0 0 3px rgb(53 206 255/.55)) drop-shadow(0 0 8px rgb(0 132 255/.35))}
.actions .nav-image{display:block;width:32px;height:32px;min-width:32px;min-height:32px;object-fit:contain;flex:none}.actions button[aria-selected=true] .nav-image{filter:drop-shadow(0 0 3px rgb(53 206 255/.35))}.actions button:first-child[aria-selected=true] .nav-image{filter:none}
.chest{pointer-events:auto;cursor:pointer;transition:filter .25s ease,transform .25s ease}.chest:hover{filter:drop-shadow(0 0 8px rgb(0 194 255/.48));transform:translateY(-2px)}.chest:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:18px}.chest.is-opening{animation:daily-chest-opening .82s cubic-bezier(.2,.9,.25,1) both;filter:drop-shadow(0 0 18px rgb(255 177 53/.9)) drop-shadow(0 0 28px rgb(0 174 255/.55))}@keyframes daily-chest-opening{0%{transform:translateY(0) scale(1) rotate(0)}20%{transform:translateY(-4px) scale(1.03) rotate(-2deg)}38%{transform:translateY(-10px) scale(1.08) rotate(2deg)}58%{transform:translateY(-4px) scale(1.04) rotate(-1deg)}78%{transform:translateY(-1px) scale(1.01) rotate(0)}100%{transform:translateY(0) scale(1) rotate(0)}}
.daily-modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .25s ease}.daily-modal.is-visible{visibility:visible;opacity:1}.daily-backdrop{position:absolute;inset:0;background:rgb(2 7 14/.78);backdrop-filter:blur(8px)}.daily-dialog{position:relative;width:min(calc(100% - 36px),360px);padding:28px 22px 22px;display:flex;align-items:center;flex-direction:column;border:1px solid rgb(57 163 255/.55);border-radius:28px;color:#edf8ff;background:radial-gradient(circle at 50% 0%,rgb(33 101 155/.38),transparent 45%),linear-gradient(145deg,#142c43,#0b1725 72%);box-shadow:0 25px 80px #000b,0 0 38px rgb(0 128 255/.28);transform:translateY(16px) scale(.96);transition:transform .35s cubic-bezier(.2,.8,.2,1)}.daily-modal.is-visible .daily-dialog{transform:translateY(0) scale(1)}.daily-close{position:absolute;top:10px;right:13px;border:0;color:#8fa8bf;font-size:25px;background:transparent;cursor:pointer}.daily-spark{position:absolute;top:15px;right:57px;color:#ffd369;font-size:18px;animation:daily-spark 1.4s ease-in-out infinite alternate}.daily-mini-chest{margin:5px 0 8px;font-size:54px;line-height:1;filter:drop-shadow(0 7px 15px rgb(255 150 41/.45));animation:daily-float 2s ease-in-out infinite}.daily-kicker{color:#ffbd55;font-size:10px;font-weight:800;letter-spacing:.12em}.daily-dialog h2{margin:8px 0 5px;font-size:24px}.daily-state{min-height:36px;margin:0 0 17px;color:#9bb4ca;font-size:13px;text-align:center;line-height:1.35}.daily-claim{width:100%;height:48px;border:1px solid #ffcb72;border-radius:15px;color:#fff;font-weight:800;background:linear-gradient(135deg,#ffb63c,#ff6b2b);box-shadow:0 0 20px rgb(255 113 42/.43);cursor:pointer;transition:transform .2s ease,filter .2s ease}.daily-claim:hover{filter:brightness(1.08);transform:translateY(-1px)}.daily-claim:disabled{cursor:not-allowed;opacity:.55;filter:grayscale(.15)}@keyframes daily-float{50%{transform:translateY(-6px) rotate(-2deg)}}@keyframes daily-spark{to{transform:scale(1.25) rotate(20deg);opacity:.5}}
#tab-0[aria-selected=true] .nav-icon{color:#b9dcff;filter:none}#tab-0 .nav-icon .case-color{fill:#f04d60!important;stroke:#f04d60!important}#tab-0 .nav-icon .case-ribbon{fill:#fff!important;stroke:#fff!important;stroke-width:1.1}.actions .nav-icon .case-color{stroke-linejoin:round}
.actions .nav-icon .icon-detail{fill:none!important;stroke:currentColor!important;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.actions .nav-icon .icon-fill[opacity]{fill-opacity:.72!important}

/* Keep the avatar and the two profile lines centered as one compact group. */
.profile-summary{align-items:center}
.profile-copy{align-content:center;justify-items:start;gap:8px}
.profile-name{line-height:1.1}
@media(max-width:430px){.top-panel{min-height:70px}.profile-copy{gap:8px}}

/* Keep the mobile layout width stable on pages that scroll. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}

.actions .nav-image{width:42px;height:42px;min-width:42px;min-height:42px;margin-bottom:-10px;filter:brightness(1.45) saturate(1.3) drop-shadow(0 0 5px rgb(0 178 255/.48));transform:translateY(-7px)}
.actions #tab-2 .nav-image,.actions #tab-3 .nav-image{width:50px;height:50px;min-width:50px;min-height:50px;margin-bottom:-18px;transform:translateY(-11px)}

.plate{filter:drop-shadow(0 0 5px #ff4d22)}
.plate #outline{stroke:#ff7536}
.actions button{color:#ffe0c2}
.actions button[aria-selected=true]{color:#fff5e9}
.actions .nav-image{filter:brightness(1.2) saturate(1.15) drop-shadow(0 0 5px rgb(255 92 27/.55))}
.actions button[aria-selected=true] .nav-image{filter:brightness(1.25) saturate(1.2) drop-shadow(0 0 7px rgb(255 104 31/.7))}
.chest:hover{filter:drop-shadow(0 0 10px rgb(255 93 31/.6))}
.chest.is-opening{filter:drop-shadow(0 0 18px rgb(255 177 53/.9)) drop-shadow(0 0 28px rgb(255 67 21/.65))}