/* Version 0.03: reference-led pop-art UI. Artwork atlas generated for this app. */
:root{--ink:#18182f;--cream:#fffbee;--pink:#ffa4c6;--mint:#89e8e0;--lavender:#cab4ff;--yellow:#ffe04c;--muted:#746b7f}
body{background-color:var(--cream);background-image:radial-gradient(#d8bd8714 .7px,transparent .7px);background-size:4px 4px;color:var(--ink)}
#top{max-width:1030px;padding:16px 28px 4px}.brand small{display:none}.brand-icon{width:59px;height:59px}.brand{font-size:27px}main{max-width:1030px;margin:8px auto 108px;padding:0 28px}#account .wallet-chip{background:transparent;border:0;padding:0}#account .wallet-chip span{display:none}#account .header-avatar{display:none}
.reference-intro{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:175px;margin:0 0 17px;padding:0 100px}.reference-intro h1{position:relative;display:inline-block;font-size:clamp(40px,8.2vw,83px);font-weight:950;letter-spacing:-3px;line-height:1.4;margin:0 0 8px;white-space:nowrap}.reference-intro h1:after{content:'';position:absolute;width:42%;height:8px;background:#ff55a0;bottom:0;left:13%;border-radius:99px;transform:rotate(-5deg)}.reference-intro p{font-size:clamp(10px,2.7vw,26px);font-weight:800;white-space:nowrap;margin:3px -22px 0}.hand-note{position:absolute;width:16%;height:145px;top:20px;pointer-events:none}.note-left{left:0}.note-right{right:0}
.art-sticker{display:block;flex:none;background-image:url('art/stickers-atlas.png');background-size:200% 300%;background-repeat:no-repeat;width:200px;aspect-ratio:1;pointer-events:none}
.reference-hero{background:linear-gradient(120deg,#ffda32,#ffe452);border:0;padding:18px 26px 18px 8px;border-radius:30px;min-height:0;gap:0;overflow:hidden;box-shadow:0 9px 0 #ffe19820}.reference-hero .hero-copy{flex:0 0 43%;text-align:center}.reference-hero h2{font-size:clamp(22px,5.2vw,50px);font-weight:950;line-height:1.5;white-space:nowrap;margin:0 0 4px}.reference-hero p{font-size:clamp(16px,3.6vw,34px);font-weight:800;margin:0 0 14px}.reference-hero .hero-sticker{width:55%;margin:-27px -9px -27px -7px}.sample-options{display:flex;gap:8px;margin:0 0 17px}.sample-options span{flex:1;border:2px solid var(--ink);border-radius:22px;background:#fffefb;font-size:clamp(12px,2.8vw,27px);font-weight:800;white-space:nowrap;padding:13px 4px}.sample-options span:first-child{background:#a7ece3}.reference-hero .hero-cta{width:100%;min-width:0;border-radius:99px;font-size:clamp(15px,3.2vw,31px);padding:10px 15px;line-height:1.4;min-height:0;box-shadow:none}.hero-cta .ui-icon{width:24px;height:24px}
.discover-title{font-size:clamp(19px,3.4vw,34px);margin:20px 5px 10px;line-height:1.5}.discover-title span{color:#ff55a0;font-size:30px}.discovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.discovery-tile{position:relative;display:flex;align-items:center;text-align:right;padding:0 14px 0 0;height:170px;border:0;border-radius:28px;overflow:hidden;box-shadow:0 7px 0 #ded3ba16;color:var(--ink);gap:0}.discovery-tile .art-sticker{height:190px;width:190px;margin:-7px -8px -7px -7px}.discovery-tile h3{font-size:clamp(15px,3.3vw,30px);font-weight:900;line-height:1.6;margin:0;white-space:nowrap;z-index:1;letter-spacing:-1px}.pink{background:linear-gradient(120deg,#ffb3cc,#ff99c0)}.lavender{background:linear-gradient(120deg,#ccb7ff,#d6c4ff)}.yellow{background:linear-gradient(120deg,#ffe79a,#ffe789)}.mint{background:linear-gradient(120deg,#91ede6,#7be4df)}
.reference-friends{position:relative;display:flex;justify-content:space-between;align-items:center;overflow:hidden;background:linear-gradient(100deg,#ff4d9f,#ff5ca5);border-radius:28px;min-height:180px;margin:17px 0 0;padding:8px 26px 0 0}.reference-friends>div{width:50%;text-align:center;z-index:1}.reference-friends h2{font-size:clamp(19px,3.9vw,38px);line-height:1.6;white-space:nowrap;margin:0 0 12px}.reference-friends .art-sticker{width:49%;margin:-58px -3px -83px -6px}.reference-friends .cream{border:2px solid var(--ink);font-size:clamp(13px,2.6vw,25px);line-height:1.3;padding:12px 30px;min-height:0}.reference-friends:after{content:'✦';color:#fff7e9;position:absolute;right:12px;top:9px;font-size:36px}
#nav{bottom:0;border:0;border-top:1px solid #ede7d7;border-radius:0;box-shadow:none;background:#fffbeeef;width:min(1030px,100%);padding:10px 28px max(10px,env(safe-area-inset-bottom));gap:40px}#nav a{color:var(--ink);font-size:15px;font-weight:700;min-height:68px;gap:4px;border-radius:24px}#nav .ui-icon{width:33px;height:33px}#nav a.active{background:linear-gradient(120deg,#ffe785,#ffdf50)}
.world-banner{border-radius:30px;display:flex;align-items:center;justify-content:space-between;padding:20px 32px;margin:20px 0 24px;overflow:hidden}.world-banner>div{flex:1;min-width:0}.world-banner h1{font-size:36px;line-height:1.6;margin:0 0 8px}.world-banner p{font-size:17px;margin:0 0 12px}.world-banner .art-sticker{width:240px;margin:-35px 0 -35px -15px}.world-banner .eyebrow{color:#655177}.text-link{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:800;background:#fff9ebc4;padding:7px 14px;border-radius:99px}.competition-steps{display:flex;justify-content:space-between;gap:8px;margin-bottom:24px}.competition-steps span{font-size:14px;font-weight:700}.competition-steps b{background:#ffd451;display:inline-grid;place-items:center;border-radius:50%;width:30px;height:30px;margin-left:5px}.competition-forms .card{margin:0;background:#fffefa}.competition-forms .card:nth-child(2){background:#eee5ff}.competition-forms button[type=submit]{width:100%;border-radius:99px;margin-top:10px}.rematch-note{margin-top:24px;background:#ffecac;font-size:14px}.rematch-note .ui-icon{margin-left:7px}.rematch-note p{margin:8px 0 0;font-size:12px}.friends-page{background:#fffefa}.friends-page .person{border:1px solid #ebe0ec;border-radius:20px;padding:16px;margin:12px 0;background:#fffaf5}.similarity{display:inline-block;background:#bcefe0;color:#204b45;border-radius:20px;padding:2px 7px;font-size:12px}.friends-page .person .secondary{background:#ffe36d;border-radius:99px}.podium{display:flex;justify-content:center;align-items:flex-end;gap:14px;max-width:680px;margin:36px auto 24px;direction:ltr}.podium-player{width:31%;display:flex;align-items:center;flex-direction:column;min-width:0;position:relative}.podium-player strong{width:100%;overflow:hidden;text-overflow:ellipsis;text-align:center;white-space:nowrap;font-size:15px}.podium-player .avatar{width:66px;height:66px;border:4px solid white;box-shadow:0 0 0 3px #d6bfff;margin-bottom:10px}.podium-player.place-1 .avatar{width:82px;height:82px;box-shadow:0 0 0 4px #ffe04c}.medal{border-radius:50%;background:#ddd0ff;color:var(--ink);font-weight:900;min-width:25px;text-align:center;position:absolute;top:-13px;z-index:1;font-size:15px}.place-1 .medal{background:#ffe04c;font-size:24px;top:-22px}.podium-block{border-radius:20px 20px 0 0;background:#ddccff;width:100%;height:73px;text-align:center;font-size:32px;font-weight:900;margin-top:10px;padding-top:12px}.place-1 .podium-block{height:103px;background:#ffe26a}.place-3 .podium-block{height:57px;background:#ffbdd5}.leaderboard-page .rank{background:#eee4ff;color:var(--ink)}.leaderboard-page .person.is-me{background:#fff2b7;border-radius:16px;padding:10px}.games-catalog .discovery-tile h3{font-size:24px;white-space:normal}
@media(max-width:700px){#top{padding:12px 14px 2px}.brand{font-size:18px;gap:4px}.brand-icon{width:40px;height:40px}main{padding:0 12px;margin-top:4px;margin-bottom:92px}.reference-intro{min-height:94px;padding:0 54px;margin:1px 0 12px}.reference-intro h1{font-size:clamp(32px,8.9vw,60px);letter-spacing:-1.5px;margin-bottom:4px}.reference-intro h1:after{height:4px}.reference-intro p{font-size:clamp(9px,2.72vw,18px);margin:3px -27px 0;letter-spacing:-.45px}.hand-note{height:72px;width:17%;top:7px}.reference-hero{padding:10px 10px 10px 0;border-radius:22px}.reference-hero .hero-copy{flex-basis:43%}.reference-hero .hero-sticker{width:56%;margin:-5px -7px -5px -1px}.reference-hero h2{font-size:clamp(20px,5.15vw,35px);letter-spacing:-.7px;margin:0 0 3px}.reference-hero p{font-size:clamp(14px,3.5vw,23px);margin:0 0 9px}.sample-options{gap:4px;margin-bottom:8px}.sample-options span{font-size:clamp(10px,2.7vw,18px);border-width:1px;padding:7px 2px;border-radius:11px}.reference-hero .hero-cta{font-size:clamp(12px,3.2vw,21px);padding:8px 7px;min-height:35px}.hero-cta .ui-icon{width:15px;height:15px;margin-right:4px}.discover-title{font-size:20px;margin:15px 2px 8px}.discover-title span{font-size:23px}.discovery-grid{gap:7px}.discovery-tile{height:clamp(83px,20vw,128px);border-radius:17px;padding:0 4px 0 0}.discovery-tile .art-sticker{height:auto;width:51%;margin:-2px -1px -2px 0}.discovery-tile h3{font-size:clamp(12px,3.35vw,22px);letter-spacing:-.8px}.reference-friends{border-radius:20px;padding:5px 10px 0 0;margin-top:9px;min-height:100px}.reference-friends>div{width:52%}.reference-friends h2{font-size:clamp(15px,3.85vw,26px);margin:0 0 8px;letter-spacing:-.8px}.reference-friends .art-sticker{width:48%;margin:-15px -2px -28px -2px}.reference-friends .cream{font-size:12px;padding:7px 19px;border-width:1px;min-height:32px}.reference-friends .cream .ui-icon{width:14px;margin-right:5px}.reference-friends:after{font-size:19px;right:4px;top:5px}#nav{padding:8px 13px max(8px,env(safe-area-inset-bottom));gap:19px}#nav a{min-height:54px;font-size:12px;border-radius:18px}#nav .ui-icon{width:28px;height:28px}.world-banner{padding:15px 17px;margin:15px 0 20px;border-radius:23px}.world-banner h1{font-size:23px;margin:0 0 6px}.world-banner p{font-size:11px;line-height:1.9}.world-banner .art-sticker{width:37%;margin:-6px 0 -6px -12px}.world-banner .eyebrow{font-size:10px}.text-link{font-size:10px;padding:5px 9px;gap:4px}.text-link .ui-icon{width:17px;height:17px}.competition-steps{gap:5px}.competition-steps span{font-size:10px}.competition-steps b{width:22px;height:22px;margin-left:2px}.competition-forms .card{padding:20px}.competition-forms h2{font-size:20px}.podium{gap:9px}.podium-player strong{font-size:12px}.podium-player small{font-size:10px}.podium-player .avatar{width:51px;height:51px}.podium-player.place-1 .avatar{width:64px;height:64px}.friends-page .person{padding:12px}.friends-page h2{font-size:20px}.friends-page .person>.secondary{font-size:12px}.games-catalog .discovery-tile{height:107px}.games-catalog .discovery-tile h3{font-size:14px}.leaderboard-page{padding:16px}.leaderboard-page .person{gap:8px}.leaderboard-page .pill{font-size:10px}.leaderboard-page .avatar{width:36px;height:36px}}
@font-face{font-family:Lalezar;src:url('Lalezar.ttf') format('truetype');font-display:swap}
.reference-intro h1,.reference-hero h2,.discover-title,.discovery-tile h3,.reference-friends h2,.world-banner h1{font-family:Lalezar,Vazir,sans-serif;font-weight:400;letter-spacing:0}
.reference-intro h1{font-size:clamp(46px,9.4vw,96px);line-height:1.13}.reference-hero h2{font-size:clamp(26px,6vw,58px)}.hand-note{height:auto;aspect-ratio:184/164;mix-blend-mode:multiply}.note-right{aspect-ratio:158/168}.header-inbox svg{width:31px;height:34px;vertical-align:middle;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sample-options .ui-icon{width:28px;height:28px;margin-left:3px}.sample-options span{display:flex;align-items:center;justify-content:center;gap:3px}.sample-options .coin-icon{fill:#ffd758}.discovery-tile h3{font-size:clamp(17px,3.7vw,36px)}
@media(max-width:700px){.reference-intro h1{font-size:clamp(37px,9.7vw,65px)}.reference-intro{min-height:89px}.hand-note{height:auto;top:7px}.reference-hero h2{font-size:clamp(23px,5.9vw,41px);line-height:1.35}.reference-hero .hero-sticker{margin-top:-16px;margin-bottom:-16px}.sample-options .ui-icon{width:20px;height:20px;margin-left:0}.sample-options span{font-size:clamp(10px,2.7vw,18px);gap:1px}.discovery-tile h3{font-size:clamp(15px,3.7vw,25px)}.reference-friends h2{font-size:clamp(17px,4.6vw,30px)}.header-inbox svg{width:24px;height:27px}}
.hand-note{filter:brightness(1.055)}.sample-options span:first-child .ui-icon{fill:#ffda51}
@media(max-width:700px){.discovery-tile[data-to="play/personality"] h3{font-size:clamp(12px,3.1vw,22px);letter-spacing:-.3px}.discovery-tile[data-to="play/personality"] .art-sticker{width:49%}}

.art-hug{clip-path:inset(0 6% 0 0)}