:root{
  color-scheme:dark;
  --bg:#0b1813;
  --panel:#10221b;
  --panel-2:#142a21;
  --line:#2b4335;
  --line-gold:#6b573b;
  --ink:#f1ebdc;
  --muted:#aebdb0;
  --subtle:#8da596;
  --gold:#efc985;
  --gold-hi:#ffe5af;
  --mint:#a0d5b0;
  --heading:Georgia,"Times New Roman",serif;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.45;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  color:var(--ink);
  min-width:0;
  min-height:100vh;
  background:radial-gradient(ellipse at 48% 4%,#1b3024 0%,#0f2018 35%,var(--bg) 74%);
  -webkit-tap-highlight-color:transparent
}
button,input,a{font:inherit}
a{color:inherit;text-decoration:none}
button{color:inherit;cursor:pointer}
button:disabled{cursor:default}
svg{display:block;flex:none}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}
:focus:not(:focus-visible){outline:none}
main:focus{outline:none}
[hidden]{display:none!important}
p,h1,h2,h3{margin:0}
ul,ol{padding:0;margin:0;list-style:none}
h1,h2,h3{line-height:1.12}
h1,h2{font-family:var(--heading);font-weight:500}
h1{font-size:clamp(2.55rem,5.2vw,4.55rem);letter-spacing:-.045em;color:#fff2d8}
h2{font-size:1.72rem;letter-spacing:-.025em}
h3{font-size:1.05rem}
.top{
  padding-top:env(safe-area-inset-top);
  background:#0b1813e8;
  border-bottom:1px solid #bca27526
}
.top-inner{
  width:min(1160px,100%);margin:auto;
  padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));
  min-height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:20px
}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-emblem{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:linear-gradient(145deg,#ffe5a9,#d29954);color:#3c2b18;
  border:1px solid #ffe2a7;box-shadow:0 2px 16px #dda34726,inset 0 1px 0 #fff4d2
}
.brand strong{font-family:var(--heading);font-size:1.46rem;line-height:1;display:block;color:#fff3d6}
.brand small{font-size:.68rem;letter-spacing:.075em;display:block;color:#b5a991;margin-top:4px}
.desktop-nav{display:flex;gap:6px;align-self:stretch;align-items:center}
.desktop-nav a{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.86rem;padding:9px 12px;border-radius:9px;white-space:nowrap}
.desktop-nav a svg{width:17px;height:17px}
.desktop-nav a[aria-current]{background:#253629;color:var(--gold-hi);box-shadow:inset 0 0 0 1px #c09d5d30}
.desktop-nav a:hover,.icon-button:hover{background:#2b4033;color:#fff0cf}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-button,.balance-chip{
  display:grid;place-items:center;height:41px;min-width:41px;padding:0 8px;
  border:1px solid #34493b;border-radius:10px;background:#12231c;color:#c5cdbd
}
.balance-chip{display:flex;gap:7px;color:var(--gold-hi);padding:0 11px;font-variant-numeric:tabular-nums}
.balance-chip svg{color:var(--gold)}
.mobile-nav{display:none}
.layout,.footer{width:min(1160px,100%);margin:auto;padding-inline:max(24px,env(safe-area-inset-left)) max(24px,env(safe-area-inset-right))}
.layout{padding-top:34px}
.title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:24px}
.title-row p{color:#b8c4b7;font-size:1.04rem;margin-top:7px}
.eyebrow{font-size:.69rem;text-transform:uppercase;letter-spacing:.17em;font-weight:750;color:var(--gold);line-height:1.4}
.hero-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 6px 2px}
.hero-eyebrow span{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 11px #e5a6537d}
.demo-pill,.tag{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:6px 10px;border-radius:30px;
  color:#d6bd92;background:#282d21;border:1px solid #7e6c4c66;font-size:.7rem;font-weight:700;letter-spacing:.08em;white-space:nowrap
}
.demo-pill{margin-top:9px;min-height:36px}
.demo-pill span{width:5px;height:5px;border-radius:50%;background:#ddbd81;box-shadow:0 0 6px #ddbd8199}
.demo-pill:hover{background:#393725}
.button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:47px;padding:11px 17px;border-radius:10px;border:1px solid transparent;
  font-size:.94rem;font-weight:760;line-height:1.2;text-align:center;
  transition:background .16s,transform .15s,box-shadow .16s,color .16s
}
.button:active:not(:disabled),.icon-button:active,.demo-pill:active{transform:translateY(2px) scale(.99)}
.button:disabled{opacity:.54}
.button.primary{
  color:#302111;border-color:#f5d492;background:linear-gradient(180deg,#ffe2a5 0%,#f0c478 51%,#d99f55 100%);
  box-shadow:inset 0 1px 0 #fff7cf,0 4px 0 #76502c,0 8px 22px #050b075c
}
.button.primary:hover:not(:disabled){background:linear-gradient(180deg,#fff0c7,#f3c984)}
.button.secondary{color:#f5deb2;background:#2b392a;border-color:#6d6143;box-shadow:inset 0 1px 0 #e7c28b16}
.button.secondary:hover:not(:disabled){background:#3a4935}
.button.ghost{color:#c7d2c3;background:#10201a;border-color:#3a5244}
.button.ghost:hover{background:#233b2d}
.button.full{width:100%}
.link-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:none;
  color:var(--gold);padding:7px 0;min-height:36px;font-weight:690;font-size:.86rem
}
.link-button:hover{color:#ffeac5}
.panel{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#172e23 0%,#11241c 65%,#10211a);box-shadow:0 14px 40px #050c0925}
.home-grid{display:grid;grid-template-columns:minmax(0,2.13fr) minmax(260px,1fr);gap:16px}
.home-aside{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.vault{
  isolation:isolate;position:relative;overflow:hidden;min-height:464px;
  border:1px solid #7b6546;border-radius:18px;background:#12241b;
  box-shadow:0 16px 60px #0007,inset 0 1px 0 #ffdfa64d
}
.vault-image,.vault-frame,.ambient-specks,.burst{position:absolute;inset:0;pointer-events:none}
.vault-image{
  z-index:-3;
  background:linear-gradient(180deg,#06120de0 0%,#08150f44 26%,transparent 50%,#08150f18 67%,#08150ff2 100%),
    radial-gradient(ellipse at center,#172b1740 16%,#06130e60 83%),url("./assets/vault.jpg") center 69%/cover no-repeat
}
.vault-frame{z-index:1;inset:7px;border:1px solid #b6945840;border-radius:13px;mask-image:linear-gradient(#000 0%,#0000 28%,#0000 68%,#000)}
.vault-caption{position:absolute;z-index:2;top:24px;left:12px;right:12px;text-align:center;pointer-events:none}
.overline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#e8c486;
  font-size:.67rem;font-weight:780;text-transform:uppercase;letter-spacing:.17em
}
.overline i{width:4px;height:4px;background:#e3b477;transform:rotate(45deg)}
.vault h2{color:#fff0cc;font-size:clamp(1.95rem,3.7vw,3.04rem);margin-top:7px;text-shadow:0 2px 16px #0a110b}
.vault-caption p{margin-top:6px;color:#d1d2bb;font-size:.94rem}
.chest-touch{
  position:absolute;z-index:1;top:94px;left:50%;transform:translateX(-50%);
  display:grid;place-items:center;width:min(91%,530px);height:auto;aspect-ratio:520/350;
  background:none;border:0;padding:0;touch-action:manipulation;
  filter:drop-shadow(0 13px 13px #04100c9c)
}
.chest-art{width:100%;height:100%;overflow:visible}
.chest-model{transform-origin:260px 254px;transition:transform .18s ease}
.chest-touch:hover:not(:disabled) .chest-model{transform:translateY(-4px) scale(1.018)}
.chest-touch:active:not(:disabled) .chest-model{transform:translateY(3px) scale(.977)}
.chest-touch:focus-visible{outline-offset:-32px;border-radius:70px}
.vault.copper .chest-model{filter:hue-rotate(335deg) saturate(.95) sepia(.22)}
.vault.azure .chest-model{filter:hue-rotate(26deg) saturate(1.13)}
.vault.royal .chest-model{filter:hue-rotate(63deg) saturate(1.2) brightness(1.12)}
.is-waiting .chest-touch{filter:saturate(.77) brightness(.83) drop-shadow(0 14px 16px #06100e)}
.chest-lid{transform-origin:291px 137px}
.chest-lock{transform-origin:231px 193px}
.chest-light{opacity:0;transform-origin:267px 166px}
.is-opening .chest-model{animation:chest-shake .74s ease both}
.is-opening .chest-lock,.is-open .chest-lock{animation:unlatch .74s ease both}
.is-opening .chest-lid,.is-open .chest-lid{animation:lid-open .78s .56s cubic-bezier(.2,.75,.25,1.15) both}
.is-opening .chest-light,.is-open .chest-light{animation:chest-glow .82s .52s ease-out both}
.is-open:not(.is-opening) .chest-lid{animation:none;transform:translate(12px,-67px) rotate(-12deg) scaleY(.78)}
.is-open:not(.is-opening) .chest-lock{animation:none;transform:translateY(4px) rotate(-14deg)}
.is-open:not(.is-opening) .chest-light{animation:none;opacity:1}
@keyframes chest-shake{0%{transform:scale(.98)}20%{transform:translateY(1px) rotate(1deg)}43%{transform:translate(-3px,-2px) rotate(-1.25deg)}57%{transform:translate(4px,-4px) rotate(1.7deg)}75%{transform:translate(-2px,2px) rotate(-1deg)}100%{transform:none}}
@keyframes unlatch{0%,28%{transform:none}46%{transform:translateY(-8px) rotate(10deg)}100%{transform:translateY(4px) rotate(-14deg)}}
@keyframes lid-open{0%{transform:none}100%{transform:translate(12px,-67px) rotate(-12deg) scaleY(.78)}}
@keyframes chest-glow{0%{opacity:0;transform:scale(.25)}46%{opacity:1;transform:scale(1.23)}100%{opacity:1;transform:scale(1)}}
.ambient-specks{z-index:-1}
.ambient-specks i,.burst i{
  position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;background:#ffcc72;
  border-radius:50%;box-shadow:0 0 9px #ffcb79
}
.ambient-specks i{opacity:.4;animation:drift 5.4s var(--delay) ease-in-out infinite}
@keyframes drift{0%,100%{opacity:.14;transform:translateY(0)}54%{opacity:.7;transform:translate(4px,-12px)}}
.burst{z-index:3}
.burst i{left:49%;top:59%;opacity:0;width:5px;height:5px}
.is-opening .burst i{animation:burst 1s calc(.62s + var(--delay)) cubic-bezier(.15,.6,.2,1) both}
@keyframes burst{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(.3)}15%{opacity:.9}70%{opacity:.7}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.3)}}
.vault-controls{
  position:absolute;z-index:4;bottom:17px;left:12px;right:12px;display:flex;flex-direction:column;align-items:center;gap:12px
}
.vault-cta{width:min(100%,268px);min-height:51px}
.vault-rule{color:#b8c6b6;font-size:.75rem;display:flex;align-items:center;justify-content:center;gap:6px}
.skip{min-height:28px;background:#102019;border-radius:8px;padding:3px 11px;margin-top:-5px}
.wait-label{display:grid;justify-items:center;gap:2px;background:#102319e8;border:1px solid #536047;border-radius:10px;padding:8px 22px}
.wait-label span{display:flex;align-items:center;gap:7px;color:#d3d4bd;font-size:.76rem}
.wait-label b{font-variant-numeric:tabular-nums;letter-spacing:.1em;color:#ffe2a5;font-size:1.36rem}
.game-card,.rank-card{position:relative;overflow:hidden;padding:21px 22px}
.game-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:211px;background:radial-gradient(ellipse at 90% 40%,#2c4933 0%,#1c3529 38%,#12261d 80%)}
.game-card h2{position:relative;margin-top:7px;font-size:clamp(1.6rem,3vw,2.24rem);color:#ffebbd}
.game-card p{position:relative;color:#c0cebe;margin:8px 0 15px;max-width:236px;font-size:.88rem}
.game-card-bottom{position:relative;display:flex;gap:13px;align-items:center}
.game-card-bottom .button{min-height:41px}
.game-card-bottom>span{display:flex;align-items:center;gap:5px;color:#abbfae;font-size:.78rem;white-space:nowrap}
.mini-dial{position:absolute;right:-44px;top:-23px;width:192px;height:192px;border-radius:50%;display:grid;place-items:center;border:1px solid #a5865354;color:#c9ad666f;transform:rotate(-19deg)}
.mini-dial::after,.mini-dial>div{content:"";position:absolute;inset:12px;border-radius:50%;border:1px dashed #ad976347}
.mini-dial>div:first-child{inset:26px;border-style:solid;border-color:#bda57158}
.mini-dial>div:nth-child(2){inset:42px;border-style:solid;border-color:#bda57130}
.mini-dial::after{inset:57px;border-style:solid}
.rank-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.rank-intro{display:flex;align-items:center;gap:12px;margin:12px 0 15px}
.rank-intro h2{font-size:1.75rem;color:#fff1d2}
.rank-level{color:#b7bfab;font-size:.74rem;margin-bottom:1px}
.rank-emblem,.small-emblem{
  position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:13px;
  border:1px solid #8a7046;color:#eac888;background:radial-gradient(ellipse at 30% 10%,#4a5131,#273427 69%);box-shadow:inset 0 0 12px #f4cc8212
}
.rank-emblem.copper{color:#f3ba96;border-color:#a67a56;background:#493329}
.rank-emblem.azure{color:#b6e6d9;border-color:#5d8b83;background:#264742}
.rank-emblem.royal{color:#e3c3ff;border-color:#8b70a9;background:#3e3152}
.progress{background:#0c1b15;border:1px solid #3a503b;border-radius:8px;width:100%;height:8px;overflow:hidden}
.progress i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#a47c46,#edc984)}
.rank-detail{color:#aebfae;font-size:.77rem;margin-top:7px}
.rank-card .link-button{margin-top:5px}
.streak-card{position:relative;display:grid;grid-template-columns:minmax(200px,1fr) minmax(275px,1.3fr) auto;align-items:center;gap:19px;padding:15px 19px;margin-top:16px}
.streak-intro{display:flex;align-items:center;gap:10px}
.small-emblem{height:38px;width:38px;border-radius:10px}
.streak-intro h2{font-size:1.2rem;letter-spacing:0}
.streak-intro p{color:var(--muted);font-size:.77rem;margin-top:3px}
.streak-steps{display:flex;gap:4px;align-items:flex-start;justify-content:space-around}
.streak-steps li{display:grid;justify-items:center;gap:4px;text-align:center;min-width:0;color:#a7b5a6;font-variant-numeric:tabular-nums}
.streak-steps li>span{display:grid;place-items:center;width:34px;height:34px;background:#15291e;border:1px solid #3e5844;border-radius:9px;font-weight:700;font-size:.82rem}
.streak-steps .milestone>span{color:var(--gold);border-color:#7b633f;background:#302e21}
.streak-steps .passed>span{color:#c2f1c9;background:#265340;border-color:#60946a}
.streak-steps .up-next>span{border-color:#c49d61;color:#f7d699}
.streak-steps li small{font-size:.66rem;line-height:1;min-height:.66rem}
.streak-info{background:transparent;border-color:transparent}
.footer{display:flex;justify-content:space-between;gap:16px;padding-block:23px 17px;color:#8da092;font-size:.73rem}
.notice{display:flex;gap:9px;align-items:center;border:1px solid #7b64424f;background:#3a3221;color:#f1d6a1;padding:11px 13px;border-radius:9px;margin:0 0 16px}
.section-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:22px 0 12px}
.section-header h2{font-size:1.64rem}
.collection-grid,.coupon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.key-card{padding:14px;overflow:hidden;position:relative;text-align:center;min-height:211px}
.key-status{display:flex;align-items:center;justify-content:flex-end;gap:5px;color:#acd6b4;font-size:.68rem;font-weight:650}
.key-locked .key-status{color:#b4c3b6}
.key-plate{position:relative;display:grid;place-items:center;width:117px;height:117px;margin:0 auto 5px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--key-color) 26%,#10241a),#10241a18 72%);border:1px solid #c4b47a2f}
.key-plate::before{position:absolute;inset:8px;content:"";border:1px dashed #baa16d44;border-radius:50%}
.key-plate .key-art{position:relative;width:101px;height:101px;filter:drop-shadow(0 7px 7px #040d07b8)}
.key-locked .key-art{filter:saturate(.3) brightness(.69)}
.key-card p,.ticket-card p{color:var(--muted);font-size:.82rem;margin-top:6px}
.collection-rank{margin-top:16px;max-width:360px}
.rank-list li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid #3c503e}
.rank-list li.current{background:#1b3929;border-radius:9px;padding-inline:8px}
.rank-list li b{font-size:.82rem;color:#eac887}
.rank-list li small,.record-list small{display:block;margin-top:3px;color:var(--muted);font-size:.76rem}
.wallet-card{padding:22px;display:grid;grid-template-columns:1fr minmax(250px,.85fr);gap:19px;align-items:center}
.wallet-amount{display:flex;align-items:center;gap:14px}
.wallet-amount b{font-family:var(--heading);font-size:2.85rem;font-weight:500;color:#ffdf9b;line-height:1.05}
.wallet-amount span,.wallet-terms p{color:var(--muted)}
.wallet-terms strong{display:flex;align-items:center;gap:7px;color:var(--gold);margin-bottom:4px}
.wallet-terms p{font-size:.84rem}
.wallet-card+.notice{margin-top:12px}
.ticket-card{position:relative;overflow:hidden;padding:16px}
.ticket-card::after{content:"";position:absolute;right:-15px;top:-20px;width:85px;height:85px;border:1px solid #b2996540;border-radius:50%;pointer-events:none}
.ticket-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:11px}
.ticket-card .button{width:100%;margin-top:13px;min-height:42px}
.ticket-card.mint .small-emblem{color:#c1e6ba;background:#2a4a33;border-color:#5b866a}
.ticket-card.lavender .small-emblem{color:#d9c7ee;background:#423a53;border-color:#7a648b}
.wallet-lists{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.list-panel{padding:17px}
.list-panel h2{font-size:1.39rem}
.empty{color:var(--muted);font-size:.89rem;margin-top:10px}
.record-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid #2d4938;font-size:.87rem}
.record-list li:last-child{border-bottom:0;padding-bottom:0}
.record-list .credit{color:#b7e5b5}
.play-grid,.active-grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(280px,1fr);gap:14px}
.dial-stage,.live-stage{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(ellipse at 50% 44%,#244a36 0%,#132e21 46%,#0d1e17 75%);
  min-height:390px;padding:12px 13px 19px
}
.dial-stage::before,.live-stage::before{content:"";position:absolute;inset:8px;border:1px solid #b9a06c35;border-radius:11px;pointer-events:none}
.dial-stage .overline{margin-top:8px}
.dial-mat{width:min(100%,345px);position:relative;margin:auto}
.dial-svg{width:100%;height:auto;filter:drop-shadow(0 12px 18px #060e08c2);pointer-events:none}
.play-controls{padding:25px;display:flex;flex-direction:column;justify-content:center;gap:11px}
.mode-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mode{
  min-height:42px;border:1px solid #48604e;border-radius:8px;background:#11261c;color:#c8d5c5;
  font-size:.84rem;font-weight:650;padding:4px
}
.mode[aria-pressed="true"]{color:#ffe4aa;border-color:#9a8152;background:#3a3827}
.mode:disabled{opacity:.45}
.mode-hint{font-size:.78rem;color:#dcc99f}
.play-explainer,.live-aside p{font-size:.88rem;color:#b7c9b9}
.record-chip{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;background:#12271d;border:1px solid #385444;color:#c1d0c0;font-size:.86rem}
.record-chip svg{color:var(--gold)}
.record-chip strong{margin-left:auto;color:#ffe2a7;font-variant-numeric:tabular-nums}
.play-controls .primary{margin:2px 0 4px}
.challenge-info{padding:9px 10px;border-radius:8px;background:#293d2b;border:1px solid #6c7855}
.challenge-info p{font-size:.86rem;margin-top:3px}
.challenge-info .link-button{padding-block:2px;min-height:31px}
.active-title{align-items:center;margin-bottom:14px}
.active-title h1{font-size:clamp(2rem,4.2vw,3.4rem)}
.active-grid{grid-template-columns:minmax(0,1.45fr) minmax(245px,.73fr)}
.live-stage{touch-action:manipulation;user-select:none;min-height:0;padding:12px 17px 17px}
.live-stage .dial-mat{width:min(100%,360px);margin:2px auto}
.live-stage[data-feedback="perfect"] .dial-svg{filter:drop-shadow(0 0 16px #f9c86968)}
.live-stage[data-feedback="hit"] .dial-svg{filter:drop-shadow(0 0 13px #8ff0b053)}
.live-stage[data-feedback="miss"] .dial-svg{filter:drop-shadow(0 0 10px #e77c6657)}
.live-stage[data-feedback="perfect"] .strike{background:linear-gradient(#fff3c2,#efcd88)}
.live-stage[data-feedback="hit"] .strike{background:linear-gradient(#dcf3be,#aacd85)}
.live-stage[data-feedback="miss"] .strike{background:linear-gradient(#ffceae,#d99072)}
.hud{display:flex;justify-content:center;gap:8px;width:100%;z-index:1}
.hud>div{min-width:0;flex:1;padding:6px 8px;text-align:center;border-radius:8px;background:#11281ddb;border:1px solid #425b46}
.hud span,.hud strong{display:block}
.hud span{text-transform:uppercase;letter-spacing:.08em;font-size:.64rem;color:#a7c3ac;font-weight:700}
.hud strong{font-size:1.28rem;color:#f4d9a0;font-variant-numeric:tabular-nums}
.timer-bar{width:100%;border-radius:8px;height:3px;background:#11231a;margin-top:7px;overflow:hidden}
.timer-bar i{display:block;width:100%;height:100%;background:#deb66b;transform-origin:left center}
.time-low .timer-bar i{background:#ed957f}
.time-low #hud-timer{color:#ffd2bc}
.gate-sequence{display:flex;justify-content:center;align-items:center;gap:8px;margin:0 auto 10px;height:12px;pointer-events:none}
.gate-sequence i{width:8px;height:8px;transform:rotate(45deg);border:1px solid #728a6e;background:#163023;border-radius:2px}
.gate-sequence .hit{background:#81c197;border-color:#aee1b6}
.gate-sequence .perfect{background:#f5cc80;border-color:#ffe8a7;box-shadow:0 0 6px #dfb46c}
.strike{width:min(100%,278px);min-height:53px;user-select:none;touch-action:manipulation}
.round-countdown,.hit-feedback{
  position:absolute;pointer-events:none;inset:0;display:grid;place-items:center;font-family:var(--heading);
  font-size:clamp(1.2rem,4vw,2.35rem);color:#fff0cb;text-shadow:0 1px 8px #101c0d,0 2px 10px #101c0d,0 2px 30px #111909;
}
.round-countdown:empty,.hit-feedback:empty{display:none}
.round-countdown{font-weight:700}
.hit-feedback{inset:65% 0 auto;font-size:1.45rem;font-weight:700;color:#e7ffcf}
[data-feedback="miss"] .hit-feedback{color:#ffd0b5}
[data-feedback="perfect"] .hit-feedback{color:#ffe2a1}
.live-aside{align-self:start;padding:21px}
.live-aside h2{margin:11px 0 8px;font-size:1.52rem}
.live-aside .link-button{margin-top:10px}
.result-panel{
  max-width:465px;margin:0 auto;padding:22px;text-align:center;position:relative;
  background:radial-gradient(ellipse at 50% 15%,#2c4b32,#132a1f 52%,#11241a)
}
.result-emblem,.reward-mark{display:grid;place-items:center;margin:0 auto 8px;width:101px;height:101px;border-radius:50%;background:radial-gradient(circle,#53623b,#293c2a 67%);color:#f4cd87;border:1px solid #a48a57}
.result-emblem .key-art,.reward-mark .key-art{width:97px;height:97px;filter:drop-shadow(0 4px 5px #111c12)}
.result-panel h1{margin-top:6px;font-size:clamp(2rem,5vw,3rem)}
.record-tag{margin-top:8px}
.result-score{display:flex;justify-content:center;align-items:baseline;gap:8px;color:#cec7a9;margin:10px 0}
.result-score b{font-family:var(--heading);font-size:3.1rem;color:#ffe0a0;line-height:1.05}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 11px}
.result-stats>div{display:grid;gap:2px;background:#152b20;padding:7px;border:1px solid #365341;border-radius:8px}
.result-stats b{font-size:1.15rem;color:#eadbb7}
.result-stats span{font-size:.72rem;color:#b1c4b2}
.result-panel .button{margin-top:11px}
.result-panel>.link-button{margin-top:5px}
.dialog{
  color:var(--ink);padding:24px;width:min(calc(100% - 28px),475px);max-width:none;max-height:min(88dvh,700px);
  border:1px solid #8d7449;border-radius:17px;box-shadow:0 18px 90px #000a;
  background:radial-gradient(ellipse at 55% 0%,#274131,#13271e 59%);overflow:auto
}
.dialog::backdrop{background:#050d09bb;backdrop-filter:blur(3px)}
.dialog h2{padding-right:30px;color:#fff0cf}
.dialog.reward{max-width:440px;text-align:center;padding:22px}
.dialog.reward h2{padding:0;font-size:2.45rem;margin-top:5px}
.modal-close{position:absolute;right:10px;top:10px;background:#15281f}
.dialog-copy{margin:12px 0 16px}
.dialog-copy p,.dialog>p{color:#becdbd;font-size:.91rem;margin:8px 0}
.dialog-copy h3{margin-top:15px}
.dialog .button + .button{margin-top:11px}
.dialog .primary{margin-bottom:4px}
.language-list{margin-top:5px}
.language-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #52725b42;font-size:.85rem}
.language-list li span{color:#b9d1bc;text-align:right;font-size:.73rem}
.reward-head{margin-bottom:15px}
.reward-head p{color:#bfccbc;font-size:.88rem;margin:6px 0}
.reward-values{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.reward-values span{display:flex;align-items:center;gap:6px;background:#1d3528;border:1px solid #6d6848;border-radius:8px;padding:8px 9px;font-size:.8rem;color:#ead6ab}
.reward-values b{font-size:1.03rem;color:#ffde92}
.reward-key{display:flex;justify-content:center;align-items:center;gap:6px;color:#eed09a;margin:8px 0;font-size:.85rem}
.fine{color:#b8c4b7;margin:9px 0;font-size:.77rem}
.reward>.primary{margin-top:9px}
.share-link{width:100%;border:1px solid #6d805f;border-radius:8px;padding:9px;color:var(--ink);background:#0e2117}
.toast{
  position:fixed;z-index:10;bottom:max(19px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  width:max-content;max-width:calc(100% - 30px);color:#fff1d0;background:#263c2a;border:1px solid #8c744d;
  border-radius:9px;box-shadow:0 5px 30px #0008;padding:10px 14px;font-size:.87rem;text-align:center
}
.loading{padding:40px;text-align:center;color:#e9d3a8}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:880px){
  .top-inner{gap:8px;padding-inline:17px}
  .desktop-nav{gap:2px}
  .desktop-nav a{padding-inline:7px;font-size:.79rem}
  .desktop-nav a svg{display:none}
  .layout,.footer{padding-inline:17px}
  .home-grid{grid-template-columns:minmax(0,1.65fr) minmax(222px,1fr);gap:12px}
  .home-aside{gap:12px}
  .chest-touch{top:122px;width:97%}
  .vault{min-height:426px}
  .game-card,.rank-card{padding:17px}
}
@media(max-width:670px){
  .top-inner{min-height:64px;padding-inline:max(13px,env(safe-area-inset-left)) max(13px,env(safe-area-inset-right))}
  .brand{gap:7px}
  .brand strong{font-size:1.31rem}
  .brand small{font-size:.64rem;margin-top:2px}
  .brand-emblem{width:37px;height:37px;border-radius:10px}
  .top-actions{gap:5px}
  .top-actions .icon-button{min-width:39px;height:39px;padding-inline:6px}
  .balance-chip{min-height:39px;height:39px;padding:0 7px;gap:4px}
  .desktop-nav{display:none}
  .mobile-nav{
    display:grid;position:fixed;z-index:8;inset:auto 0 0;grid-template-columns:repeat(4,minmax(0,1fr));
    background:#0b1914f7;border-top:1px solid #526047;box-shadow:0 -6px 18px #050d0882;
    padding:4px max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))
  }
  .mobile-nav a{min-height:53px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;border-radius:8px;color:#b1c1b3;padding:4px 1px;font-size:clamp(.61rem,2.5vw,.74rem);font-weight:640;line-height:1.2;white-space:nowrap}
  .mobile-nav a[aria-current]{color:#f7d59a;background:#283629}
  .layout,.footer{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
  .layout{padding-top:19px}
  .title-row{margin-bottom:15px}
  h1{font-size:clamp(2.35rem,9.4vw,3.2rem)}
  .title-row p{font-size:.86rem;margin-top:4px}
  .demo-pill{min-height:31px;margin-top:4px;padding-inline:8px}
  .home-grid,.home-aside,.play-grid,.active-grid,.wallet-lists{grid-template-columns:minmax(0,1fr);gap:12px}
  .home-aside{grid-template-rows:auto}
  .vault{min-height:clamp(342px,89vw,449px);border-radius:14px}
  .vault-caption{top:16px}
  .vault h2{font-size:clamp(1.85rem,7.7vw,2.65rem);margin-top:3px}
  .vault-caption p{font-size:.79rem;margin-top:4px}
  .vault-image{background-position:center,center,center 61%}
  .chest-touch{width:min(99%,460px);top:63px}
  .vault-controls{bottom:12px;gap:8px}
  .vault-cta{min-height:45px;width:min(100%,232px)}
  .vault-rule{font-size:.68rem}
  .game-card{min-height:168px}
  .game-card h2{font-size:1.93rem;margin-top:4px}
  .game-card p{margin:5px 0 11px}
  .mini-dial{right:-20px;top:-11px}
  .streak-card{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;margin-top:12px}
  .streak-steps{grid-column:1/-1;grid-row:2}
  .streak-info{grid-column:2;grid-row:1}
  .footer{padding-block:19px calc(76px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(68px + env(safe-area-inset-bottom))}
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .coupon-grid{grid-template-columns:1fr;gap:8px}
  .key-card{min-height:168px;padding:10px}
  .key-card h3{font-size:.94rem}
  .key-card p{font-size:.74rem}
  .key-plate{width:90px;height:90px}
  .key-plate .key-art{width:80px;height:80px}
  .wallet-card{grid-template-columns:minmax(0,1fr);gap:10px;padding:15px}
  .wallet-amount b{font-size:2.4rem}
  .dial-stage{min-height:0;padding:9px 10px 13px}
  .setup-dial .dial-mat{width:min(75%,224px)}
  .dial-stage .overline{margin-top:4px}
  .play-controls{padding:15px;gap:8px}
  .play-controls h2{font-size:1.45rem}
  .live-stage{padding:8px 10px 13px}
  .live-stage .dial-mat{width:min(100%,320px,49dvh)}
  .live-aside{display:none}
  .hud{gap:4px}
  .hud>div{padding-inline:4px}
  .active-title{margin-bottom:9px}
  .active-title h1{font-size:2.04rem}
  .result-panel{padding:17px 14px}
}
@media(max-width:365px){
  .brand small{display:none}
  .vault{min-height:330px}
  .chest-touch{top:69px}
  .streak-steps li>span{width:31px;height:31px}
  .mode{font-size:.77rem}
  .live-stage .dial-mat{width:min(100%,41dvh)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .ambient-specks i,.burst{display:none}
  .chest-touch:hover:not(:disabled) .chest-model{transform:none}
}