/* Shared visual language for the preserved QUQN features. */
:root{--ref-bg:#071320;--ref-panel:#0b1a29;--ref-border:rgba(255,201,85,.35);--ref-muted:#bacbd4}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;background:#071320;color:#f5f6f2}
main>section{position:relative}
main>.section:not(.road-section),main>.reference-play{padding-block:68px}
main>.section:not(.road-section):before,main>.reference-play:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 86% 16%,#1c4a5b32,transparent 38%);opacity:.8}
main>.section>.shell,main>.reference-play>.shell{position:relative;z-index:1}
.reference-explainer,.reference-chapters,.reference-play,#story,#ranks,.persona,#community,#what-is-quqn,#road21m,#faq{border-top:1px solid #e9af3940}
.ticker{background:#0b1c2a;color:#ffce5c;border-block:1px solid #dcb35780;box-shadow:inset 0 0 30px #e1ab2e19;font-size:.69rem;padding:12px 0;letter-spacing:.18em}
.kicker,.section-head .kicker,.persona .kicker,#story .kicker,.road-copy .kicker{display:inline-block;color:#ffcf62!important;font-size:.69rem;font-weight:950;letter-spacing:.2em;text-transform:uppercase}
#story h2,#ranks h2,.persona h2,#what-is-quqn h2,#faq h2,#road21m h2,.community h2{font-weight:1000;font-size:clamp(2.35rem,4.5vw,4rem);line-height:1.03;letter-spacing:-.055em;color:#fff!important;text-shadow:0 3px 14px #0007;margin:10px 0 20px}
#story p,#ranks p,.persona p,#what-is-quqn p,#faq p,#road21m p{color:var(--ref-muted);line-height:1.57}
#story .lead,#what-is-quqn .lead{color:#ffe0a0;font-size:1.16rem;line-height:1.48}
#story .split{gap:42px;align-items:center}
#story .copy{max-width:650px}
#story blockquote{margin-top:25px;background:linear-gradient(135deg,#142c39,#0b1a29);border:1px solid var(--ref-border);border-left:4px solid #ffd05f;border-radius:13px;padding:20px 24px;box-shadow:0 13px 30px #0006}
#story blockquote p{color:#fff2cd;font-size:1.08rem}
#story .feature-img{border:1px solid #e6b6468c;border-radius:16px;overflow:hidden;background:linear-gradient(0deg,#07121d,#0d2334a1),url('../reference-city.webp') center/cover;min-height:440px}
#story .feature-img img{display:block;width:100%;height:440px;aspect-ratio:auto;object-fit:cover;object-position:70% center;border:none;border-radius:0;filter:saturate(1.06)}
#story .feature-img figcaption{border:1px solid #f5c56b87;border-radius:9px;background:#07141eea;color:#f5e9cb}
#story .quqn-talk{background:#0b1e2af0;border:1px solid #f3bd59;color:#fff4da;border-radius:12px;box-shadow:0 0 18px #ffbf3980}
#ranks .section-head{text-align:center;max-width:780px;margin:0 auto 32px}
#ranks .section-head p{color:#c9d3d7}
#ranks .rank-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#ranks .rank{background:linear-gradient(155deg,#142c3b,#091826);border:1px solid var(--ref-border);border-radius:14px;box-shadow:0 12px 26px #0006}
#ranks .rank img{height:160px;width:100%;object-fit:cover;filter:saturate(.9)}
#ranks .rank h3{color:#ffe09a;font-size:1.04rem}
#ranks .rank p{font-size:.82rem;line-height:1.42;margin-top:5px;color:#c8d3d6}
body #ranks .live-coop{border-top:1px solid var(--ref-border);margin-top:45px;padding-top:38px}
body #ranks .live-coop-head h3,body #ranks .coop-rank-finder h4{color:#fff;letter-spacing:-.05em}
body #ranks .live-coop-head p,body #ranks .coop-rank-finder p{color:#bdcbd1}
body #ranks .coop-rank-finder{background:linear-gradient(150deg,#18303f,#0b1a29);border:1px solid var(--ref-border);border-radius:14px}
body #ranks .holder-card{background:#0d2230;border:1px solid #d9ac494d;border-radius:12px}
body #ranks .holder-card img{background:#091826}
body #ranks .holder-balance{color:#fff0c5}
body #ranks .holder-address,body #ranks .holder-balance small{color:#b3c6d0}
body #ranks .coop-rank-form input{background:#071725;color:white}
#road21m .road-card{border:1px solid #e1ad528a;border-radius:16px;background:linear-gradient(0deg,#071522d9,#091c2bc8),url('../reference-city.webp') center 65%/cover;box-shadow:0 17px 40px #0007,0 0 18px #ffad1626}
#road21m .road-copy p{color:#dfebec;max-width:435px;font-size:.86rem}
#road21m .road-track{background:#102e3b;box-shadow:0 0 0 1px #4d8e9c54}
#road21m .road-milestone b{color:#fff1ca}
#road21m .road-milestone small{color:#b3c8cd}
#road21m .road-status{color:#e5e8dc}
.persona .persona-grid{gap:42px;grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.persona .persona-grid>img{border-radius:15px;border:1px solid #ecbc59b0;box-shadow:0 13px 36px #0008;max-height:470px;object-fit:cover;object-position:70% center}
.persona dl div{border-bottom:1px solid #d0ad604a}
.persona dt{color:#ffd16c;font-size:.72rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.persona dd{color:#d8e3e4;line-height:1.5}
#community{padding:62px 0;background:linear-gradient(160deg,#081827,#102b3a,#091724)!important}
#community .community-box{padding:34px;border-radius:16px;border:1px solid #efbd5c9c;background:linear-gradient(110deg,#182c37,#0b1a27);box-shadow:0 16px 40px #0009,0 0 19px #e5a12836}
#community .community-box .kicker{color:#ffcc63!important}
#community h2{font-size:clamp(2.1rem,3.6vw,3.5rem);margin-bottom:12px}
#community p{color:#d2e0df;font-size:.96rem;line-height:1.55}
#community .social-buttons .btn{background:#142f40!important;color:#fff!important;border:1px solid #dbb15e!important;border-radius:9px;font-size:.76rem;box-shadow:0 7px 16px #0006}
#community .social-buttons .btn:hover{background:#224960!important}
#what-is-quqn .shell{max-width:1000px}
#what-is-quqn .section-head{max-width:none;margin:0;padding:30px 35px;border-radius:16px;border:1px solid var(--ref-border);background:linear-gradient(135deg,#0f2635,#081824);box-shadow:0 16px 40px #0006}
#what-is-quqn p{max-width:810px;margin:13px 0}
#faq .shell{max-width:1000px}
#faq .section-head{text-align:center;max-width:none;margin-bottom:32px}
#faq details{border:1px solid #d1a85662;border-radius:11px;background:#0e2431;padding:0 21px;margin:10px 0;box-shadow:0 8px 18px #0003}
#faq details[open]{background:#142e3c;border-color:#e9b94e}
#faq summary{padding:19px 0;color:#ffe1a0;font-size:1rem}
#faq summary::marker{color:#ffc654}
#faq details p{color:#d9e5e7;margin:0 0 18px;font-size:.91rem}
.reference-play #billionaire .future-card{background:#091a29;border:1px solid #e2b55272;box-shadow:none;border-radius:13px}
.reference-play #billionaire .future-result h3{color:#ffe19a}
.reference-play #billionaire .hero-game-head p,.reference-play .quick-mint-note{color:#c9d7db}
.reference-play .quick-mint-card{background:#102736;border:1px solid #e6b65a59;border-radius:10px}
.reference-play #heroCoopPreview .hero-holder-row{background:#0a1d29;border:1px solid #ecba5e36;border-radius:9px}
.reference-play #heroCoopPreview .hero-coop-preview-head h3{color:#ffe3a4}
.reference-play #heroCoopPreview .hero-holder-address{color:#b9cbd1}
.footer{background:#06101b!important;color:#d1dcdd}
.footer-grid{border-top:1px solid #d9a64744;padding-top:20px}
.footer .brand span{color:#ffd172;font-size:1.35rem;font-weight:1000}
.footer .brand img{width:40px;height:40px;object-fit:contain}
.footer a,.footer button{color:#e4e8dd}
.btn.gold,#what-is-quqn .btn.gold,#spinFuture,.guide-actions .btn.dark{background:linear-gradient(180deg,#fff2ac,#ffc648 55%,#d8931e)!important;color:#211707!important;border:1px solid #f7d578!important;box-shadow:0 5px 15px #0008,0 0 14px #eaa42655;border-radius:10px;font-weight:950}
/* The full beginner guide shares the same navy and gold palette. */
.guide-modal{background:#0a1a28;color:#f6f3e9;border:1px solid #d4a85088;border-radius:16px}
.guide-top{background:#06111c;color:#fff;border-radius:15px 15px 0 0;border-bottom:1px solid #d4a85080}
.guide-top .brand span{color:#ffd270}
.guide-hero h2{color:#fff}
.guide-hero>p,.guide-steps p,.guide-fair>p{color:#c7d5d8}
.guide-hero .coq-tip{background:#142c3a;border:1px solid #e4b95c;color:#fff}
.guide-hero .coq-tip p{color:#fff0c9}
.guide-fair,.guide-safety{background:#102735;color:#fff;border:1px solid #ddb25588;border-radius:12px}
.guide-fair h3,.guide-safety h3{color:#ffe3a0}
.guide-fair small,.guide-safety small{color:#ffd175}
.guide-steps article{background:#112838;border:1px solid #c6a15561;border-radius:12px}
.guide-steps article>b{background:#f1be4c;color:#1a140a;border-radius:10px}
.guide-steps h3,.guide-steps h4{color:#fff0ca}
.guide-steps small{color:#ffc95e}
.guide-steps a,.guide-actions a.text-button{color:#ffd477}
.guide-steps .mint-route{background:#0a1e2d;border:1px solid #cbac686e}
.guide-steps .mint-route.recommended{background:#122b39;border-color:#e5b54b}
.guide-steps .mint-route li{color:#dbe4e4}
.guide-steps .mint-route li strong{color:#fff}
.guide-steps .mint-calc,.guide-steps .token-fingerprint{background:#081a26;color:#f1e4c5;border:1px solid #e5b65b61}
.guide-steps input{background:#081824;color:#fff;border:1px solid #dbac5380}
.guide-actions .btn.outline-dark{color:#ffe2a1;border:1px solid #dfb65e;background:#0d2432;border-radius:10px}
@media(max-width:850px){#ranks .rank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.persona .persona-grid{gap:27px}}
@media(max-width:650px){main>.section:not(.road-section){padding-block:50px}#story .split,.persona .persona-grid{grid-template-columns:1fr}#story .feature-img{min-height:320px}#story .feature-img img{height:340px}#ranks .rank-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#ranks .rank img{height:115px}#ranks .rank div{padding:11px}#community .community-box{grid-template-columns:1fr;padding:25px;gap:22px}#community .social-buttons{justify-content:flex-start}#what-is-quqn .section-head{padding:23px}#road21m .road-copy{display:block}#faq details{padding:0 14px}.guide-hero .coq-tip{margin-top:8px}}