.landing-screen{
  background:linear-gradient(180deg,#f7fbfc 0%,#eef6f4 100%)!important;
  padding:0!important;
}
.landing-screen .simple-header{
  height:62px!important;
  padding:calc(10px + env(safe-area-inset-top)) 18px 8px!important;
  background:transparent!important;
}
.landing-art{
  height:calc(100dvh - 62px - env(safe-area-inset-top) - 60px)!important;
  margin:0 10px!important;
  padding:24px 18px 20px!important;
  border-radius:26px 26px 0 0!important;
  background:linear-gradient(180deg,#bfeaf4 0%,#dff4ef 42%,#f8fbfa 100%)!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px 0 #ffffffaa!important;
}
.landing-art:after{
  height:24%!important;
  bottom:0!important;
  opacity:.16!important;
  background:repeating-linear-gradient(90deg,#17766d 0 10%,transparent 10% 15%)!important;
}
.landing-art .clouds{
  opacity:.28!important;
}
.landing-art .logo{
  order:0!important;
  transform:none!important;
  margin-top:2px!important;
  text-shadow:none!important;
  position:relative!important;
  z-index:4!important;
}
.landing-art .logo div{
  background:#ed1d24!important;
  border:3px solid #fff!important;
  border-radius:8px!important;
  padding:4px 14px!important;
  font-size:clamp(21px,6vw,32px)!important;
  letter-spacing:.5px!important;
  box-shadow:0 4px 10px #00000015!important;
}
.landing-art .logo strong{
  color:#171717!important;
  font-size:clamp(48px,15vw,74px)!important;
  line-height:.8!important;
  -webkit-text-stroke:0!important;
  letter-spacing:1px!important;
}
.landing-art .logo small{
  color:#526469!important;
  font-size:clamp(10px,3.2vw,16px)!important;
  -webkit-text-stroke:0!important;
  letter-spacing:2px!important;
  margin-top:4px!important;
}
.landing-art .mascot{
  order:1!important;
  width:112px!important;
  height:112px!important;
  margin:16px 0 4px!important;
  font-size:0!important;
  border-radius:30px!important;
  background:url('/pwa-icon.webp') center/cover no-repeat!important;
  box-shadow:0 12px 24px #16444728!important;
  z-index:4!important;
}
.landing-art .hero-cards{
  order:2!important;
  font-size:0!important;
  letter-spacing:0!important;
  margin:6px 0 0!important;
  transform:none!important;
  width:100%!important;
  text-align:center!important;
  z-index:4!important;
}
.landing-art .hero-cards:before{
  content:'Good to play together';
  display:block;
  color:#183c43!important;
  font-size:18px!important;
  font-weight:900!important;
  letter-spacing:.1px!important;
}
.landing-art .hero-cards:after{
  content:'Create a room or join your friends';
  display:block;
  margin-top:4px!important;
  color:#617075!important;
  font-size:12px!important;
  font-weight:700!important;
}
.landing-art .hero-action{
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  width:auto!important;
  transform:none!important;
  margin:0!important;
  height:56px!important;
  padding:10px 16px!important;
  border-radius:16px!important;
  font-size:18px!important;
  z-index:8!important;
}
.landing-art .hero-action:first-of-type{
  top:auto!important;
  bottom:96px!important;
}
.landing-art .hero-action:nth-of-type(2){
  top:auto!important;
  bottom:30px!important;
}
.landing-art .hero-action:first-of-type:before{
  content:'▶'!important;
  margin-right:10px!important;
  font-size:14px!important;
}
.landing-art .hero-action:nth-of-type(2){
  border:1px solid #d5e0e0!important;
}
.landing-art .hero-action:nth-of-type(2):before{
  content:'?'!important;
  display:inline-grid!important;
  place-items:center!important;
  width:22px!important;
  height:22px!important;
  margin-right:8px!important;
  border-radius:50%!important;
  background:#eaf2f2!important;
  color:#31545a!important;
  font-size:13px!important;
  font-weight:1000!important;
}
@media (min-width:700px){
  .landing-art{max-width:680px!important;margin:0 auto!important}
}