/* QUQN illustrated reference direction. All original app and Coop features remain. */
:root{--ref-bg:#06101e;--ref-panel:#081321;--ref-gold:#ffc439;--ref-cyan:#54e4f5;--ref-ink:#eaf4ff}
html{scroll-behavior:smooth}body{background:var(--ref-bg);color:var(--ref-ink)}
.shell{width:min(1240px,calc(100% - 44px))}
.site-header{background:#050c17!important;border-bottom:1px solid rgba(255,191,38,.35);box-shadow:0 6px 25px rgba(0,0,0,.5);z-index:100}
.site-header .nav{min-height:69px}.site-header .brand{gap:10px}.site-header .brand img{width:43px;height:43px;object-fit:contain;filter:drop-shadow(0 0 8px #f6a91188)}
.site-header .brand span{font-size:1.8rem;letter-spacing:-.05em;font-weight:1000;color:#ffcb47;text-shadow:0 1px 0 #8d460f,0 0 16px #ffae3477}
.site-header .navlinks a,.site-header .navlinks button{font-weight:800;font-size:.75rem;letter-spacing:.07em}
.site-header .btn.gold,.reference-hero .btn.gold,.reference-play .btn.gold{color:#1b1208!important;background:linear-gradient(180deg,#fff0a4,#ffc52e 55%,#d98609)!important;border:1px solid #ffdd71!important;box-shadow:0 0 0 2px #6d3b13,0 0 22px #ffa600a8,0 8px 20px #0009!important}
.reference-hero{min-height:645px!important;position:relative;overflow:hidden;background:#071425}
.reference-hero .hero-image{position:absolute;inset:-3%;background-image:url('../reference-city.webp')!important;background-size:cover!important;background-position:center 55%!important;filter:saturate(1.26) brightness(.88)}
.reference-hero .hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,20,.92),rgba(5,13,29,.75) 36%,rgba(2,8,18,.13) 73%),linear-gradient(0deg,#07111e 0%,transparent 20%,transparent 85%,#08111e 100%);z-index:1}
.reference-hero-grid{height:645px;position:relative;z-index:3;display:flex;align-items:center}
.reference-hero-copy{width:min(56%,640px);padding:30px 0 65px;position:relative;z-index:5}
.ref-eyebrow{display:inline-block;color:#ffce5a;letter-spacing:.22em;font-size:.7rem;font-weight:900;text-transform:uppercase}
.hero-wordmark{display:flex;align-items:center;gap:16px;margin:18px 0 10px}
.hero-wordmark img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 0 14px #ffb600a6)}
.hero-wordmark>span{font-size:clamp(4.7rem,9vw,8.4rem);line-height:.86;font-weight:1000;letter-spacing:-.09em;color:#ffdb58;text-shadow:0 4px 0 #a05513,0 8px 0 #542b0e,2px 12px 21px #000,0 0 25px #ffb7318c}
.hero-wordmark small{display:block;font-size:.63rem;letter-spacing:.28em;line-height:2;margin:9px 0 0 7px;color:#fff4bf;text-shadow:none}
.reference-hero #heroTitle{font-size:clamp(2.25rem,4.6vw,4.4rem)!important;line-height:1.02!important;letter-spacing:-.045em!important;margin:17px 0 12px!important;text-shadow:0 4px 15px #000;max-width:680px}
.reference-hero #heroTitle em{color:#ffd355;font-style:italic}
.reference-hero #heroSubtitle{font-size:1.15rem;line-height:1.55;max-width:510px;color:#f4f4eb;text-shadow:0 2px 8px #000}
.reference-hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:28px 0 10px}
.reference-hero-actions .btn{padding:15px 22px!important;font-size:.86rem;font-weight:950}.reference-hero .btn.outline{border:1px solid #e6dabc;background:#07111aba;color:white}
.reference-hero-foot{font-size:.78rem;color:#eddbb7;letter-spacing:.04em}
.hero-character{position:absolute;z-index:4;height:570px;width:auto;right:3%;bottom:-37px;object-fit:contain;filter:drop-shadow(0 18px 14px #000d) drop-shadow(0 0 16px #f9974399)}
.hero-quip{position:absolute;right:2%;top:9%;z-index:5;transform:rotate(-8deg);font-family:cursive;font-size:1.36rem;font-style:italic;color:#fff7e2;text-shadow:0 3px 10px #000;line-height:1.3}
.hero-side-token{position:absolute;z-index:2;right:0;top:3%;width:124px;height:124px;filter:drop-shadow(0 0 21px #ffc23e)}
.hero-side-token img{width:100%;height:100%;object-fit:contain}.hero-side-token span{position:absolute;bottom:-24px;right:12px;color:#fff;font-size:.8rem;font-weight:900}.hero-side-token small{display:block;font-size:.58rem}
.live-strip{position:relative;z-index:6;margin:-9px auto 0;background:#06101f!important;padding:9px 20px;border-block:2px solid #d6a32b;box-shadow:0 0 18px #f9ad2588,0 13px 30px #0009}
.live-strip-inner{gap:13px!important}.live-brand img{object-fit:contain}.live-stat strong,.live-progress strong{color:#fff8d4}.live-progress .meter i{background:linear-gradient(90deg,#45ffee,#00aed6)!important;box-shadow:0 0 12px #29e2fa}
.reference-explainer,.reference-chapters{position:relative;padding:63px 0 70px;background:radial-gradient(ellipse at center top,#15354b 0%,#091725 55%,#07111e 100%);overflow:hidden}
.reference-explainer:before,.reference-chapters:before{content:'₿';font-size:34rem;line-height:1;position:absolute;right:-8%;top:-6%;color:#3b82aa0b;pointer-events:none}
.ref-section-heading{text-align:center;margin:0 auto 29px;max-width:820px}.ref-section-heading h2{font-weight:1000;font-size:clamp(2.35rem,4.5vw,4rem);line-height:1.04;margin:7px auto 8px;color:white;text-shadow:0 3px 15px #000}.ref-section-heading p{margin:0 auto;color:#c8d6df;font-size:1.07rem}
.reference-explainer-grid,.reference-character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.reference-explainer-grid article{min-height:250px;padding:26px 25px;border-radius:12px;border:2px solid #d49d21;background:linear-gradient(155deg,#23394a8f,#091623f5 76%),url('../reference-city.webp') center/cover;box-shadow:inset 0 0 27px #fcb31823,0 8px 22px #0008}
.reference-explainer-grid article:nth-child(2){border-color:#07cde5;box-shadow:inset 0 0 28px #00d3ff29,0 0 17px #00d9ff50}.reference-explainer-grid article:nth-child(3){border-color:#22daba;box-shadow:inset 0 0 28px #00efa32b,0 0 17px #12ffbb47}
.ref-icon{display:grid;place-items:center;width:68px;height:68px;margin-bottom:9px;border-radius:13px;font-size:2.5rem;font-weight:900;background:#0d2432}.ref-icon.gold{color:#ffc73e;box-shadow:0 0 18px #ffba296a}.ref-icon.cyan{color:#6deaff;box-shadow:0 0 18px #06ecff6a}.ref-icon.mint{color:#3ff4c3;box-shadow:0 0 18px #16eab66a}
.reference-explainer-grid small,.reference-character-copy small{font-size:.66rem;font-weight:900;color:#f0c258;letter-spacing:.18em}.reference-explainer-grid h3{margin:9px 0 4px;font-size:1.8rem;font-weight:1000;color:#ffd866}.reference-explainer-grid article:nth-child(2) h3{color:#72ebfb}.reference-explainer-grid article:nth-child(3) h3{color:#69f2d5}.reference-explainer-grid p{color:#e2ebf0;font-size:.97rem;line-height:1.43;margin:0;max-width:310px}
.reference-chapters{padding-top:54px;background:linear-gradient(#081521,#07101d)}.reference-character-grid{gap:16px}
.reference-character{overflow:hidden;background:#091522;border:2px solid #e2ae32;border-radius:11px;box-shadow:0 12px 32px #000a,0 0 14px #f1a32440}.reference-character.unknown{border-color:#d3b989}
.reference-character-art{height:250px;position:relative;overflow:hidden;background:linear-gradient(0deg,#08111e22,#08111e40),url('../reference-city.webp') center/cover}
.reference-character-art>img{width:100%;height:100%;object-fit:cover;object-position:68% center;filter:saturate(1.2)}
.character-badge{position:absolute;left:16px;bottom:13px;background:#edba37;color:#1d160e;border-radius:5px;padding:5px 9px;font-size:.65rem;font-weight:1000;letter-spacing:.08em}
.reference-character.unknown .character-badge{background:#0e1827;color:#e7d5a8;border:1px solid #b49c6c}.reference-character-copy{padding:16px 19px 22px}.reference-character-copy h3{font-size:1.65rem;color:#ffdc6a;margin:4px 0}.reference-character-copy p{line-height:1.45;color:#dce6ec;font-size:.9rem;min-height:58px}.reference-character-copy a,.locked-link{color:#eac15f;font-size:.7rem;font-weight:900;letter-spacing:.12em;text-decoration:none}
.secret-silhouette{position:absolute;bottom:-32px;left:20%;height:96%;width:63%;background:#04070c;filter:drop-shadow(0 0 6px #ff9b25) drop-shadow(0 0 17px #ef6d1f);border-radius:48% 48% 25% 25%;transform:rotate(-8deg)}
.secret-silhouette:before{content:'';position:absolute;top:-32px;left:12%;height:96px;width:86%;background:#04070c;clip-path:polygon(0 100%,14% 20%,38% 48%,53% 0,72% 52%,95% 24%,100% 100%)}
.secret-silhouette i{position:absolute;top:34%;right:0;width:100px;height:110px;transform:rotate(-30deg);border:28px solid #04070c;border-top-color:transparent;border-left-color:transparent;border-radius:50%}
.silhouette-two{left:24%;width:70%;transform:rotate(6deg);border-radius:48% 55% 32% 22%}.silhouette-two:before{clip-path:polygon(0 92%,13% 40%,35% 51%,50% 0,66% 48%,95% 35%,100% 100%)}
.reference-world{min-height:370px;display:flex;align-items:center;text-align:center;background:linear-gradient(0deg,#081320 1%,#07101a43 30%,#06101b60 78%,#081321),url('../reference-city.webp') center 56%/cover;box-shadow:inset 0 0 50px #07111d}
.reference-world .shell{padding:65px 0}.reference-world h2{max-width:700px;margin:7px auto;font-weight:1000;font-size:clamp(2.3rem,5vw,4.6rem);line-height:1.02;text-shadow:0 4px 17px #000}.reference-world p{color:#fff;font-size:1.06rem;text-shadow:0 2px 8px #000}.ref-text-link{color:#ffd15b;font-weight:900;font-size:.78rem;text-decoration:none;letter-spacing:.13em}
.reference-play{padding:65px 0;background:linear-gradient(170deg,#0d2030,#07111b)}.reference-play-grid{display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr) minmax(0,1fr);gap:18px;align-items:stretch}
.reference-mint-panel,.reference-play #billionaire,.reference-play #heroCoopPreview{border-radius:16px;border:1px solid #b89449!important;background:#0b1824eb!important;box-shadow:0 14px 33px #0006;min-width:0}.reference-mint-panel{padding:25px 20px}.reference-mint-panel h3{font-size:1.75rem;color:#ffe094;line-height:1.1;margin:13px 0}.reference-mint-panel>p{color:#cdd7de;font-size:.9rem;line-height:1.5}
.reference-mint-panel #mint-options{margin-top:17px;width:100%;background:transparent;box-shadow:none}.reference-play #billionaire{display:block;width:100%;height:auto;max-height:none;overflow:visible;padding:20px 18px}.reference-play .hero-game-head h2{font-size:1.6rem}.reference-play .hero-future-stage{height:185px!important}.reference-play .future-card{height:auto!important}.reference-play .game-disclaimer{font-size:.7rem}
.reference-play #heroCoopPreview{display:block;grid-area:auto!important;padding:18px!important;height:auto!important;max-height:none!important;overflow:visible!important}.reference-play .hero-top10{overflow:auto;max-height:370px}
#story,#ranks,#what-is-quqn,#faq,.persona,.road-section{background:linear-gradient(150deg,#0c1c2b,#070f1c 78%)!important}#story .feature-img{box-shadow:0 0 25px #daa83a55;border:1px solid #ad864e}#story .feature-img img{object-fit:cover}#ranks .rank-grid{margin-top:25px}
#road21m{padding:65px 0}#road21m .road-card{background:linear-gradient(140deg,#122737,#071421);border:1px solid #c69c43}.community{background:linear-gradient(120deg,#8c5816,#f9c653 55%,#a96b17)!important}.community-box{box-shadow:0 13px 35px #0007}
.footer{background:#050b14!important;border-top:1px solid #a88138}.footer .brand img,.guide-top .brand img{object-fit:contain}
@media(max-width:1150px){.reference-play-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-play #heroCoopPreview{grid-column:span 2}.hero-character{right:-6%;height:550px}.reference-hero-copy{width:63%}}
@media(max-width:760px){.shell{width:min(100% - 30px,650px)}.site-header .nav{min-height:62px}.site-header .brand span{font-size:1.38rem}.site-header .brand img{width:36px;height:36px}.reference-hero,.reference-hero-grid{min-height:740px!important;height:740px}.reference-hero .hero-image{background-position:63% center!important}.reference-hero .hero-overlay{background:linear-gradient(180deg,#061322dc 0%,#081524b7 45%,#06132116 79%,#071321 100%)}.reference-hero-grid{align-items:flex-start}.reference-hero-copy{width:100%;padding:36px 0 0}.hero-wordmark img{width:72px;height:72px}.hero-wordmark>span{font-size:clamp(3.7rem,14vw,6.3rem)}.hero-wordmark small{font-size:.46rem}.reference-hero #heroTitle{font-size:clamp(2.3rem,7.5vw,3.6rem)!important;max-width:600px}.reference-hero #heroSubtitle{font-size:.95rem;max-width:430px}.reference-hero-actions{margin-top:18px}.reference-hero-actions .btn{padding:12px 13px!important;font-size:.71rem}.hero-character{height:min(64vw,420px);right:-3%;bottom:-25px}.hero-quip{top:auto;bottom:28%;right:auto;left:3%;font-size:1rem}.hero-side-token{width:80px;height:80px;top:auto;bottom:14%;right:0}.reference-explainer-grid,.reference-character-grid{grid-template-columns:1fr}.reference-explainer-grid article{min-height:180px}.reference-explainer,.reference-chapters{padding:52px 0}.reference-character-art{height:270px}.reference-world{min-height:320px}.reference-play-grid{grid-template-columns:1fr}.reference-play #heroCoopPreview{grid-column:auto}.live-strip{margin-top:0;padding:13px 0}.ref-section-heading h2{font-size:2.25rem}}
@media(max-width:410px){.reference-hero-actions{gap:9px}.reference-hero-actions .btn{font-size:.62rem;padding:10px!important}.hero-wordmark>span{font-size:3.45rem}.hero-character{height:275px}.hero-quip{bottom:27%}.reference-hero #heroTitle{font-size:2.26rem!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}