/* Web visitors see the introduction first. The installed app keeps its game-library UI. */
html:not(.is-app) #home .hero{--promo-height:clamp(450px,42vw,600px);display:grid;height:var(--promo-height);min-height:0;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:35px;padding:30px 0;margin-bottom:20px;align-items:center;overflow:hidden}
html:not(.is-app) #home .hero-art{height:100%;max-height:460px;min-height:0}
html.has-played:not(.is-app) #home .hero{height:calc(var(--promo-height)/3);grid-template-columns:minmax(0,1fr) minmax(130px,30%);gap:20px;padding:14px 0;margin-bottom:16px}
.has-played #home .hero .eyebrow,.has-played #home .hero-copy>p,.has-played #home .hero-tags{display:none}
.has-played #home .hero h1{font-size:clamp(20px,2.1vw,29px);line-height:1.05;letter-spacing:-.035em;margin:0}
.has-played #home .hero-actions{display:flex;flex-direction:row;gap:8px;margin-top:10px}
.has-played #home .hero-actions .button{min-height:35px;padding:7px 12px;border-radius:9px;gap:12px;font-size:11px;white-space:nowrap}
.has-played #home .hero-actions .button>span{font-size:16px}
.has-played #home .hero-art{width:100%;max-width:280px;justify-self:end;align-self:stretch;transform:none}
.has-played #home .art-label,.has-played #home .hero-art .spark{display:none}
.has-played #home .art-tile{width:clamp(70px,8vw,110px);height:clamp(78px,8.5vw,120px);border-radius:13px;font-size:clamp(55px,6vw,85px);box-shadow:4px 5px 0 #0000000b}
.has-played #home .tile-x{left:6%;top:4%;bottom:auto}.has-played #home .tile-o{right:3%;bottom:0;top:auto;font-size:clamp(62px,7vw,98px)}
.has-played #home .art-tile>span{font-size:5px;left:8px;bottom:9px}
.has-played #home .art-sticker{width:44px;height:44px;right:2%;top:1%;font-size:18px}.has-played #home .art-sticker>span{font-size:4px}
.has-played #home .orbit{inset:8% 4%}.has-played #home .orbit-two{inset:18% 0}
.is-app #home .hero{display:none}
@media(max-width:700px){
 html:not(.is-app) #home .hero{--promo-height:600px;grid-template-columns:minmax(0,1fr);height:var(--promo-height);gap:12px;padding:20px 0;margin-bottom:18px;align-content:center}
 html:not(.has-played):not(.is-app) #home .hero h1{font-size:42px;line-height:1.02;margin:0 0 14px}
 html:not(.has-played):not(.is-app) #home .hero .eyebrow{font-size:6px;margin-bottom:14px}
 html:not(.has-played):not(.is-app) #home .hero-copy>p{font-size:11px;line-height:1.6;margin-bottom:14px;max-width:100%}
 html:not(.has-played):not(.is-app) #home .hero-actions .button{min-height:43px;font-size:10px;padding:10px}
 html:not(.has-played):not(.is-app) #home .hero-tags{font-size:6px;gap:10px;margin-top:12px}
 html:not(.has-played):not(.is-app) #home .hero-art{height:190px;width:100%;max-width:320px;max-height:190px}
 html:not(.has-played):not(.is-app) #home .art-tile{width:108px;height:118px;font-size:86px;border-radius:16px}html:not(.has-played):not(.is-app) #home .art-tile.tile-o{font-size:100px}
 html:not(.has-played):not(.is-app) #home .tile-x{top:10px;left:40px}html:not(.has-played):not(.is-app) #home .tile-o{right:24px;bottom:5px}
 html.has-played:not(.is-app) #home .hero{height:calc(var(--promo-height)/3);grid-template-columns:minmax(0,1fr) 105px;gap:12px;padding:14px 0;margin-bottom:14px}
 .has-played #home .hero h1{font-size:23px}.has-played #home .hero-actions{margin-top:12px}.has-played #home .hero-actions .button{font-size:10px;min-height:34px;padding:7px 9px;gap:7px}.has-played #home .hero-actions button[data-tour-open]{display:none}
 .has-played #home .art-tile{width:70px;height:78px;font-size:55px}.has-played #home .tile-o{font-size:62px}.has-played #home .art-sticker{width:34px;height:34px;font-size:14px;right:0}.has-played #home .tile-x{left:0;top:5%}.has-played #home .tile-o{right:0;bottom:10%}.has-played #home .hero-art{max-height:none}
}
@media(display-mode:standalone),(display-mode:fullscreen){#home .hero{display:none}}