/* Sourced 3D artwork, photographic atmosphere, and interaction choreography. */
:root{--ink:#253e38;--muted:#647e75}
body{background:#edf2ec}
.world{background:linear-gradient(150deg,#e6f0e7,#e8edf3 55%,#f0e9f0)}
.world .sky-spark,.world .orb{display:none}
.announcement{background:#253e38;letter-spacing:.04em}
.site-header{padding-top:22px;padding-bottom:22px}
.main-nav{background:#ffffff75;border-color:#fff;box-shadow:0 4px 20px #23483e08}
.main-nav a.active{background:#fff}
.main-nav a>span{display:none}
.site-header .brand{letter-spacing:-2px}
.header-actions{align-items:flex-start}
.header-account-stack{display:flex;flex-direction:column;align-items:center;gap:7px;max-width:190px}
.header-account-stack .connect-button{max-width:100%}
#account-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-pill{display:block;white-space:nowrap;padding:5px 11px;border-radius:99px;border:1px solid #fff;background:#ffffff80;box-shadow:0 4px 14px #3c6a6010;font-size:9px;font-weight:700;color:#294f42;letter-spacing:.015em}
.x-social{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid #fff;background:#ffffff85;transition:background .2s,transform .2s;flex-shrink:0}
.x-social svg{width:16px;height:16px;fill:currentColor}
.x-social:hover{background:#fff;transform:translateY(-2px)}
.trend-picker{max-width:260px;margin-top:20px}
@media(max-width:650px){.site-header{column-gap:7px}.header-actions{gap:5px}.header-account-stack{max-width:117px;gap:5px}.header-account-stack .connect-button{padding:10px 9px;font-size:8px}.ca-pill{font-size:7px;padding:4px 7px}.x-social{width:29px;height:29px;margin-top:2px}.x-social svg{width:12px;height:12px}.header-actions .balance-pill{padding:7px;font-size:9px}.header-actions .coin-icon{width:17px;height:17px;font-size:12px}}
.playground-page{padding-top:6px}
.sky-hero{--mx:0;--my:0;position:relative;isolation:isolate;min-height:650px;border-radius:38px;overflow:hidden;display:grid;place-items:center;text-align:center;border:1px solid #fff;box-shadow:0 20px 75px #3c6a6017;background:#c5dde3}
.sky-hero:before{content:'';position:absolute;inset:-35px;z-index:-2;background:linear-gradient(110deg,#d9f0deaa,#d3e8e98c 50%,#e6dff0b0),url('sky.jpg') center 56%/cover;transform:translate(calc(var(--mx)*-14px),calc(var(--my)*-10px)) scale(1.04);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.sky-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 45%,#f5faf299 0,#f5faf240 42%,transparent 68%),linear-gradient(0deg,#eef5ecaa,transparent 25%);pointer-events:none}
.hero-center{position:relative;z-index:2;padding:78px 20px 105px;pointer-events:none}
.hero-center .eyebrow{justify-content:center;font-size:9px;letter-spacing:.19em;color:#36594e}
.hero-center h1{font-size:clamp(68px,7.4vw,106px);line-height:1.03;letter-spacing:-.08em;font-weight:800;margin:25px 0 20px}
.hero-center h1 span,.hero-center h1 em{display:block}
.hero-center h1 em{font-style:normal;color:#fffef5;text-shadow:0 2px 1px #46735d35,0 9px 35px #48756140}
.hero-center p{font-size:14px;color:#426358;line-height:1.8;letter-spacing:-.015em}
.hero-center .hero-buttons{justify-content:center;align-items:center;gap:23px;margin-top:28px;pointer-events:auto}
.sky-button{background:#273f35;color:#f8ffed;border:1px solid #ffffff20;box-shadow:inset 0 1px 1px #fff3,0 6px 15px #274a3620!important;padding:15px 24px!important;font-size:12px}
.sky-button:hover{background:#385c48;transform:translateY(-3px)!important}
.hero-lab-link{font-size:11px;font-weight:700;display:flex;align-items:center;gap:9px}
.hero-lab-link .icon{width:16px;height:16px;transition:transform .3s}
.hero-lab-link:hover .icon{transform:translateX(5px)}
.hero-caption{display:flex;align-items:center;justify-content:center;gap:7px;font-size:8px;letter-spacing:.14em;font-weight:700;color:#587264;margin-top:24px}
.hero-caption>span{width:4px;height:4px;border-radius:50%;background:#728967}
.sky-orbits{position:absolute;inset:0;pointer-events:none}
.sky-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 290px 250px at calc(50% + var(--mx)*100%) calc(50% + var(--my)*100%),#f9ffdc50,transparent 75%);mix-blend-mode:screen;transition:opacity .7s;opacity:0}
.sky-hero:hover .sky-glow{opacity:1}
.sky-ripple{position:absolute;z-index:1;width:60px;height:60px;margin:-30px;border:1px solid #ffffffc0;border-radius:50%;background:radial-gradient(circle,transparent 50%,#fff3);pointer-events:none;animation:glass-ripple 1.3s ease-out forwards}
.sky-orbit{position:absolute;width:155px;height:155px;perspective:800px;transform:translate(calc(var(--mx)*var(--depth,40px)),calc(var(--my)*var(--depth,40px)));transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.orbit-object{position:relative;width:100%;height:100%;animation:object-drift 7s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
.orbit-object:before{content:'';position:absolute;inset:14%;border-radius:30%;background:linear-gradient(135deg,#ffffff96,#ffffff04 70%);border:1px solid #fff9;box-shadow:0 20px 38px #47665618,inset 0 0 30px #fff3;transform:rotate(-14deg);backdrop-filter:blur(10px)}
.orbit-object img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 13px #49685830);transform:rotate(var(--rotation,-13deg));animation:object-turn 11s ease-in-out infinite;animation-delay:calc(var(--i)*-1.7s)}
.orbit-0{left:5%;top:10%;width:163px;height:163px;--depth:55px;--rotation:-15deg}
.orbit-1{right:5%;top:8%;width:145px;height:145px;--depth:38px;--rotation:15deg}
.orbit-2{left:1%;top:49%;width:140px;height:140px;--depth:70px;--rotation:-20deg}
.orbit-3{right:1%;top:48%;width:170px;height:170px;--depth:65px;--rotation:18deg}
.orbit-4{left:20%;bottom:2%;width:120px;height:120px;--depth:25px;--rotation:10deg}
.orbit-5{right:20%;bottom:3%;width:134px;height:134px;--depth:32px;--rotation:-10deg}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;font-size:8px;font-weight:700;letter-spacing:.19em;color:#4f6d5e;z-index:3}
.scroll-cue i{font-size:20px;font-style:normal;animation:scroll-nudge 2.4s ease-in-out infinite}
.arcade-section{padding:55px 4px 0}
.arcade-section .section-header{margin:0 0 27px}
.arcade-section .section-header .eyebrow{font-size:8px;letter-spacing:.16em;color:#7c8c7e;margin-bottom:10px}
.arcade-section h2{font-size:37px;letter-spacing:-.055em}
.arcade-section .section-header p{font-size:12px;margin-top:8px}
.arcade-section .text-link .icon{width:17px;height:17px}
.game-grid{gap:22px}
.game-card{border-radius:28px;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s;box-shadow:0 5px 7px #4b715409,0 16px 35px #6083750d;will-change:auto}
.game-card:hover{box-shadow:0 25px 50px #38544722}
.game-card[data-game=dew]{background:linear-gradient(140deg,#daf4ef,#c2e1f2)}
.game-card[data-game=spf]{background:linear-gradient(140deg,#e5dff6,#d9d3f0)}
.game-card[data-game=serum]{background:linear-gradient(140deg,#f6e5e9,#ead3e2)}
.game-card[data-game=match]{background:linear-gradient(140deg,#edf3d4,#d2e9cd)}
.game-card[data-game=routine]{background:linear-gradient(140deg,#f6eacd,#f2ddcf)}
.game-card[data-game=calm]{background:linear-gradient(140deg,#e6eafa,#dfd9f0)}
.card-topline{top:19px;left:20px;right:20px}
.card-topline .pill{font-size:8px;padding:5px 9px;letter-spacing:.12em;background:#ffffff6b}
.card-topline>span:last-child{font-size:9px;letter-spacing:.1em;opacity:.65}
.game-art{height:235px;overflow:visible;perspective:800px}
.game-art:before{display:none}
.art-halo{position:absolute;width:175px;height:175px;top:40px;left:50%;transform:translateX(-50%) rotate(-15deg);border:1px solid #fff8;border-radius:45px;background:linear-gradient(135deg,#ffffff70,#ffffff06);box-shadow:inset 0 1px 5px #fff7,0 15px 35px #5d7a6610;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.game-object{width:172px;height:172px;object-fit:contain;position:relative;top:13px;filter:drop-shadow(0 15px 10px #425d5a25);transform:rotate(-8deg);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.game-card:nth-child(even) .game-object{transform:rotate(8deg)}
.game-card:hover .game-object,.game-card:focus-within .game-object{transform:translateY(-11px) rotate(6deg) scale(1.12)}
.game-card:hover .art-halo{transform:translateX(-50%) rotate(6deg) scale(1.07)}
.game-satellite{position:absolute;width:77px;height:77px;object-fit:contain;right:13%;top:42px;filter:drop-shadow(0 8px 9px #996d2322);transform:rotate(15deg);transition:transform .7s}
.game-card:hover .game-satellite{transform:translate(8px,-9px) rotate(40deg)}
.card-bottom{padding:20px;background:#ffffff48;border-top:1px solid #fff8;min-height:93px}
.card-bottom h3{font-size:19px}
.card-bottom p{font-size:10px;line-height:1.6;margin-top:5px}
.play-circle{width:39px;height:39px;background:#ffffffa6;box-shadow:0 4px 10px #4a6b4810}
.card-shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--light-x,50%) var(--light-y,20%),#ffffff6b,transparent 58%);opacity:0;transition:opacity .4s;mix-blend-mode:soft-light}
.game-card:hover .card-shine{opacity:1}
.game-open{border-radius:28px}
.arcade-footnote{display:flex;justify-content:space-between;font-size:9px;color:#7c8d7f;padding:21px 2px 0}
.playground-page .below-grid{margin-top:38px}
.device-promo{min-height:250px;padding:30px}
.device-promo .promo-copy{max-width:62%}
.device-promo h3{font-size:29px;letter-spacing:-.05em}
.device-promo p{font-size:11px}
.device-promo .eyebrow{font-size:8px;line-height:1.7}
.promo-photo{position:absolute;right:0;top:0;height:100%;width:39%;object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000 22%);opacity:.9;mix-blend-mode:multiply}
.quest{display:flex;flex-direction:column;justify-content:center;padding:28px}
.quest h3{font-size:22px;margin-top:22px}
.quest .eyebrow{font-size:8px}
.quest .pill{font-size:7px}
.quest p{font-size:11px}
.quest-bottom{gap:10px;font-size:8px}
.provider-logo{width:36px;height:36px;object-fit:contain;border-radius:10px;flex-shrink:0}
.phantom-logo{background:#211c32;padding:6px}
.wallet-provider{transition:background .25s,transform .25s,border-color .25s}
.wallet-provider:hover{transform:translateY(-2px);background:#ffffffb0;border-color:#fff}
.scroll-reveal{opacity:0;translate:0 26px;transition:opacity .75s,translate .75s,transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.scroll-reveal.is-revealed{opacity:1;translate:0 0}
.game-card.scroll-reveal{transition-delay:calc(var(--card-i,0)*40ms),calc(var(--card-i,0)*40ms),0ms,0ms}
.game-intro>.intro-object{width:175px;height:175px;object-fit:contain;filter:drop-shadow(0 15px 12px #4b695d24);margin:0 auto 20px;display:block;animation:object-drift 7s ease-in-out infinite}
@keyframes object-drift{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -16px;rotate:3deg}}
@keyframes object-turn{0%,100%{rotate:y -12deg}50%{rotate:y 15deg}}
@keyframes scroll-nudge{0%,100%{translate:0 0}50%{translate:0 5px}}
@keyframes glass-ripple{from{opacity:.8;transform:scale(.3)}to{opacity:0;transform:scale(9)}}
@media(min-width:1500px){.sky-hero{min-height:710px}.game-art{height:255px}}
@media(max-width:1100px){.sky-hero{min-height:600px}.hero-center h1{font-size:83px}.sky-orbit{scale:.8}.orbit-0{left:1%}.orbit-1{right:1%}.orbit-2{left:-3%}.orbit-3{right:-3%}.orbit-4{left:16%}.orbit-5{right:16%}.game-art{height:210px}.game-object{width:155px;height:155px}.art-halo{width:155px;height:155px;top:32px}.card-bottom{padding:17px 15px}.card-bottom h3{font-size:17px}.card-bottom p{font-size:9px}.play-circle{width:32px;height:32px}}
@media(max-width:900px){.sky-hero{min-height:590px}.hero-center h1{font-size:76px}.orbit-0{top:7%;left:-2%}.orbit-1{top:5%;right:-2%}.orbit-2{top:51%;left:-7%}.orbit-3{top:52%;right:-7%}.hero-center p{font-size:13px}.hero-center .eyebrow{font-size:8px}.arcade-section h2{font-size:32px}.game-grid{gap:16px}.game-art{height:185px}.game-object{width:140px;height:140px}.art-halo{width:132px;height:132px;top:32px;border-radius:32px}.card-bottom{min-height:98px}.card-bottom h3{font-size:15px}.card-bottom p{font-size:8px}.card-topline{left:14px;right:14px;top:14px}.game-satellite{width:55px;height:55px;right:8%;top:38px}.quest h3{font-size:20px}.quest{padding:22px}}
@media(max-width:650px){
  main{padding:0 14px}.site-header{padding:16px 18px 12px}.site-header .brand{font-size:27px}.main-nav{max-width:none}.main-nav a{padding:10px 7px;font-size:9px}.announcement{font-size:7px;letter-spacing:0}.announcement .tiny-star{display:none}.announcement a{font-size:7px}
  .sky-hero{min-height:630px;border-radius:29px}.sky-hero:before{background-position:45% center}.hero-center{padding:138px 12px 150px;width:100%}.hero-center h1{font-size:clamp(57px,15vw,81px);letter-spacing:-.075em;margin:20px 0 17px}.hero-center .eyebrow{font-size:7px;letter-spacing:.12em}.hero-center p{font-size:11px}.hero-center .hero-buttons{gap:16px;margin-top:24px}.hero-center .sky-button{font-size:10px!important;padding:13px 17px!important}.hero-lab-link{font-size:9px;gap:6px}.hero-lab-link .icon{width:14px}.hero-caption{font-size:6px;letter-spacing:.12em;margin-top:20px}
  .sky-orbit{scale:1;width:88px;height:88px}.orbit-0{left:6%;top:26px;--rotation:-16deg}.orbit-1{right:5%;top:39px;--rotation:16deg}.orbit-2{left:-18px;top:48%;width:60px;height:60px;opacity:.7}.orbit-3{right:-17px;top:48%;width:63px;height:63px;opacity:.7}.orbit-4{left:12%;bottom:49px;width:78px;height:78px}.orbit-5{right:10%;bottom:47px;width:94px;height:94px}.orbit-object:before{border-radius:21px}.scroll-cue{bottom:20px;font-size:6px;gap:7px}.scroll-cue i{font-size:17px}
  .arcade-section{padding:38px 2px 0}.arcade-section .section-header{align-items:flex-start;gap:8px;margin-bottom:20px}.arcade-section .section-header .eyebrow{font-size:6px;letter-spacing:.1em;margin-bottom:8px}.arcade-section h2{font-size:26px;max-width:none}.arcade-section .section-header p{font-size:9px;line-height:1.7;max-width:220px}.arcade-section .section-header .text-link{font-size:8px;white-space:normal;max-width:90px;line-height:1.7;margin-top:19px;gap:5px}.arcade-section .text-link .icon{width:13px}
  .game-grid{grid-template-columns:1fr 1fr;gap:13px}.game-card,.game-open{border-radius:23px}.game-art{height:167px}.game-object{width:122px;height:122px;top:14px}.art-halo{width:111px;height:111px;top:37px;border-radius:29px}.card-topline{top:12px;left:12px;right:12px}.card-topline .pill{font-size:6px;padding:4px 6px}.card-topline>span:last-child{font-size:7px}.game-satellite{width:45px;height:45px;right:8%;top:40px}.card-bottom{min-height:98px;align-items:flex-start;padding:14px 12px;gap:5px}.card-bottom h3{font-size:14px;line-height:1.3}.card-bottom p{font-size:8px;max-width:115px;line-height:1.6}.play-circle{width:24px;height:24px;flex-shrink:0;margin-top:2px}.play-circle .icon{width:13px;height:13px}.arcade-footnote{font-size:7px;gap:14px;line-height:1.6;padding-top:16px}.arcade-footnote>span:last-child{text-align:right}
  .playground-page .below-grid{margin-top:27px;gap:15px}.device-promo{padding:24px;min-height:231px}.device-promo .promo-copy{max-width:67%}.device-promo h3{font-size:26px}.device-promo p{font-size:9px}.device-promo .eyebrow{font-size:7px}.promo-photo{width:37%;object-position:55% center}.quest{padding:24px}.quest h3{font-size:23px;margin-top:18px}.quest p{font-size:10px}.quest-top .eyebrow{font-size:8px}.quest-top .pill{font-size:7px}.quest-bottom{font-size:8px}.site-footer{margin-left:20px;margin-right:20px}.floating-lumi{bottom:13px;right:13px}.game-intro>.intro-object{width:150px;height:150px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scroll-reveal{opacity:1;translate:none}.sky-orbit,.sky-hero:before{transform:none}.game-card{transform:none!important}}
@media print{.sky-hero,.arcade-section,.below-grid{display:none}}