[hidden]{display:none!important}
body{overflow:auto;padding-bottom:84px}
.hub-shell{max-width:1440px;margin:auto;min-height:calc(100dvh - 180px);display:grid;grid-template-columns:1.5fr 1fr;border:1px solid #bba47924;background:#111b17}
.hub-presentation{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 22px 12px;background:radial-gradient(ellipse at 50% 70%,#405a4355,transparent 58%),repeating-linear-gradient(0deg,transparent 0 97px,#0002 98px 100px),linear-gradient(120deg,#1b2c24,#101b17 60%,#28362a)}
.hub-presentation:before,.hub-presentation:after{content:'';position:absolute;z-index:-1;top:-30px;bottom:0;width:72px;border:1px solid #c8ac652e;background:linear-gradient(90deg,#070e0b,#53604444,#111b17);transform:rotate(8deg);left:25px}
.hub-presentation:after{left:auto;right:25px;transform:rotate(-8deg)}
.hub-stars{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 22% 45%,#e6c783 0 1px,transparent 2px),radial-gradient(circle at 76% 67%,#e6c783 0 1px,transparent 2px),radial-gradient(circle at 67% 20%,#e6c783 0 1px,transparent 2px)}
.hub-crest img{width:44px;margin-bottom:14px;filter:drop-shadow(0 0 20px #cbaa6355)}
.hub-presentation h1{font-family:Georgia,serif;font-size:clamp(30px,3.4vw,51px);font-weight:400;line-height:1.12;color:#f0e8cf;margin:18px 0 10px;max-width:570px}
.hub-presentation p{color:#a4b4a6;font-size:13px;line-height:1.6}
.hero-platform{position:relative;width:100%;max-width:480px;height:310px}
#hero-stage{width:100%;height:100%;position:relative;z-index:1}
.summon-ring{position:absolute;left:15%;right:15%;bottom:4%;height:70px;border:2px solid #c2aa67;border-radius:50%;box-shadow:0 0 35px #d3ac4940,inset 0 0 45px #7eb79245;background:radial-gradient(ellipse,#8cb09350,transparent 65%)}
.stage-name{color:#e2ca8d;font-family:Georgia,serif;font-size:22px;letter-spacing:1px}
.hub-details{padding:clamp(24px,3.5vw,56px);display:flex;flex-direction:column;justify-content:center;gap:19px;background:linear-gradient(145deg,#22302940,transparent)}
.hub-details h2{font-family:Georgia,serif;font-weight:400;font-size:32px;color:#e8dec2;line-height:1.15;margin:0}
.hub-details p{font-size:13px;line-height:1.8;color:#a5b1a6;margin:0}
.journey{display:flex;gap:13px;border-block:1px solid #c2aa6725;padding:15px 0;font-size:8px;letter-spacing:1px;color:#ad9c70}
.collection-list{display:grid;gap:10px}
.collection-card{display:flex;align-items:center;gap:13px;text-align:left;padding:13px 16px;background:#27362b66;border:1px solid #a8bc8c26;border-radius:5px;color:#eee3c7;width:100%;cursor:pointer}
.collection-card[aria-pressed=true]{border-color:#c9ae65;background:#45513955}
.collection-card:disabled{opacity:.45;cursor:default}
.collection-card b{font-family:Georgia,serif;font-size:20px;min-width:90px}.collection-card small{color:#a9b9a5;font-size:10px}.collection-card span{margin-left:auto;color:#d1bd7e}
.hero-detail{font-size:13px;color:#b9c5ae;line-height:1.7;min-height:24px}
.hub-details .primary-button,.hub-details .secondary-button{width:100%;min-height:48px;justify-content:center}
.collection-count{letter-spacing:2px;font-size:9px!important;text-align:center}
.storage-warning{color:#f2cb81!important;border:1px solid #ac8d5544;padding:10px}
.hub-navigation{position:fixed;z-index:30;bottom:0;left:0;right:0;height:70px;display:flex;justify-content:center;background:#111a17f5;border-top:1px solid #c7ac6555;backdrop-filter:blur(12px);padding-bottom:env(safe-area-inset-bottom)}
.hub-navigation button{min-width:100px;max-width:180px;flex:1;background:transparent;border:0;border-inline:1px solid #a8b99011;color:#8e9e91;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;cursor:pointer}
.hub-navigation button span{font-size:25px}.hub-navigation button[aria-current=page]{color:#e4c77d;background:linear-gradient(0deg,#b69a4720,transparent)}
.guide{position:fixed;z-index:50;bottom:84px;right:24px;width:min(440px,calc(100% - 32px));display:flex;align-items:center;gap:12px;padding:19px;border:1px solid #bda263;background:#17251bf5;border-radius:8px;box-shadow:0 15px 60px #0008}
.guide img{width:75px;height:105px;object-fit:cover}.guide p{font-size:13px;line-height:1.6;color:#e6e4d2;margin:9px 0}.guide-actions{display:flex;gap:12px;align-items:center}.guide .primary-button{min-width:95px;height:36px;font-size:11px}.guide .text-button{font-size:11px}
.guide-target{outline:3px solid #efd47f!important;outline-offset:4px;box-shadow:0 0 25px #e5c25366!important;position:relative;z-index:51}
body[data-tutorial=true] .hub-details .journey{opacity:.4}
body[data-screen=arena] .guide{bottom:auto;top:8px;right:12px;padding:10px;max-width:400px}
body[data-screen=arena] .guide img{width:40px;height:60px}
.revealing .hero-platform{animation:hero-arrival .7s ease-out}
@keyframes hero-arrival{from{opacity:.1;transform:scale(.9);filter:brightness(3)}to{opacity:1;transform:scale(1);filter:brightness(1)}}
button:focus-visible{outline:3px solid #efd47f;outline-offset:3px}
@media(max-width:850px){.hub-shell{grid-template-columns:1fr}.hub-presentation{padding:22px 18px 14px}.hub-presentation h1{font-size:33px}.hero-platform{height:250px;max-width:330px}.hub-details{padding:26px 22px;gap:15px}.hub-details h2{font-size:28px}.hub-navigation button{min-width:0;flex-direction:column;gap:2px;font-size:10px}.hub-navigation button span{font-size:22px}.guide{right:16px;padding:12px}.guide img{width:48px;height:80px}.guide p{font-size:12px}.hub-shell:has(~*){margin-bottom:0}body[data-tutorial=true]:not([data-screen=arena]) .hub-details{padding-bottom:200px}body[data-screen=arena] .guide{max-width:calc(100% - 24px);top:0}.app-header{position:relative}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

.slot-button.guide-target{position:absolute}
body[data-tutorial=true] .hub-presentation{box-shadow:inset 0 0 150px #0005}

@media(min-width:851px){#arena-screen{height:calc(100dvh - 170px);min-height:540px}}
@media(min-width:851px){#arena-screen .arena-stage{min-height:240px}}

.campaign-wallet{display:flex;justify-content:center;gap:45px;padding:16px;background:#202c22;border-block:1px solid #bca46744;color:#9faf9c;font-size:10px;letter-spacing:1px}.campaign-wallet b{margin-left:12px;color:#f2d88e;font-size:17px}
.campaign-path{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.chapter-node{min-height:53px;border:1px solid #a79a6855;border-radius:12px;background:#29352b;color:#ccd7c4;font-size:13px;cursor:pointer}.chapter-node[aria-pressed=true]{background:#8a713c;color:#fff3cd;border-color:#edd394;box-shadow:0 0 20px #cca33e33}.chapter-node:disabled{opacity:.4;cursor:default}.chapter-controls{display:flex;justify-content:space-between}.summon-clock{color:#d7c489!important}
.chest-display{position:relative;width:100%;height:300px;display:grid;place-items:center;margin:25px 0}.chest-display>span{position:absolute;bottom:0;letter-spacing:3px;color:#ecd28a;font-size:11px}.chest-rays{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#e5b85955,transparent 68%);filter:blur(10px)}
.hero-chest{position:relative;width:235px;height:180px;filter:drop-shadow(0 15px 20px #0009);transform:perspective(650px) rotateY(-12deg)}.chest-lid{position:absolute;top:0;width:100%;height:80px;border:12px solid #be9348;border-radius:60px 60px 8px 8px;background:linear-gradient(90deg,#56381e,#c29859 45%,#593719);box-shadow:inset 0 0 0 5px #38281c}.chest-body{position:absolute;top:79px;width:100%;height:100px;border:11px solid #c89d50;border-radius:0 0 14px 14px;background:repeating-linear-gradient(0deg,#43321e 0 23px,#6a4d28 24px 27px)}.chest-lock{position:absolute;left:89px;top:60px;border:5px solid #f0cf73;border-radius:7px;background:#b58230;width:58px;height:72px;font-size:38px;line-height:60px;color:#fff0a6;text-shadow:0 0 15px #fff}
.hub-presentation:has(#chest-display:not([hidden])) .hero-platform{display:none}
.hero-card.rogue{--hero-color:#c3a0ef}.result-card #next-stage{margin-bottom:8px}.result-card #reward-message{color:#dec385;margin:8px 0;font-size:11px}
body[data-screen=arena] .campaign-wallet{display:none}
@media(max-width:850px){.campaign-wallet{gap:13px;padding:12px 8px;font-size:7px}.campaign-wallet b{margin-left:4px;font-size:13px}.campaign-path{gap:6px}.chapter-node{font-size:11px;min-height:45px}.chest-display{height:245px}.hero-chest{transform:scale(.85)}.hub-navigation button{font-size:9px}}

.hero-card.locked{opacity:.35;filter:grayscale(1)}