/* Shared multi-game Home interior and Play popover. */

.multigame-home-page main{
  position:relative;
}

.multigame-home-page:has(#home-view:not(.hidden)) main::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:74px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:1;
  opacity:.78;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='split' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%23eee9ff'/%3E%3Cstop offset='.4' stop-color='%23b9a4ff'/%3E%3Cstop offset='.7' stop-color='%23f7eeff'/%3E%3Cstop offset='1' stop-color='%239d86da'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M90 0 L58 174 Q55 184 63 194 L120 289 Q126 299 122 309 L61 459 Q57 469 65 479 L119 565 Q125 575 121 586 L61 793 Q56 805 67 815 L114 850 Q124 860 117 870 L74 915 Q67 925 76 935 L119 1000' fill='none' stroke='url(%23split)' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:drop-shadow(0 0 5px #b9a4ff50) drop-shadow(0 0 18px #a78bfa16);
}

.multigame-home-page .admin-multigame-home{
  grid-template-columns:1fr;
  column-gap:0;
  padding-top:48px;
  isolation:isolate;
}

.multigame-home-page .brand small{
  color:#bbaee9;
}

.multigame-home-page .home-preview-compat{
  display:none!important;
}

.multigame-home-page .home-pokemon-cloud{
  z-index:0;
}

/* Both games now share the same unblurred background-Pokémon treatment. */
.multigame-home-page .multigame-stage{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:34px;
  align-items:stretch;
  min-height:600px;
  position:relative;
  z-index:2;
}

.multigame-home-page .multigame-side{
  min-width:0;
  display:grid;
  grid-template-rows:174px 1fr auto;
  position:relative;
  padding-top:4px;
}

.multigame-home-page .multigame-hilo{
  padding-left:8px;
  padding-right:30px;
}

.multigame-home-page .multigame-trivia{
  padding-left:30px;
  padding-right:8px;
}

.multigame-home-page .multigame-copy{
  position:relative;
  z-index:6;
  width:100%;
  max-width:none;
}

.multigame-home-page .multigame-copy h1{
  display:inline-block;
  margin:0;
  padding:0 .04em .12em .02em;
  font-size:clamp(42px,3.6vw,52px);
  line-height:1.2;
  letter-spacing:-2.5px;
  font-weight:850;
  white-space:nowrap;
  overflow:visible;
  background:linear-gradient(105deg,#ded1f5 0%,#ded1f5 40%,#fff 60%,#fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
;padding-block:.06em}

.multigame-home-page .multigame-copy p{
  margin:15px 0 0;
  max-width:360px;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.multigame-home-page .multigame-copy .button{
  margin-top:20px;
  width:min(245px,100%);
  min-width:0;
  padding:13px 18px;
  gap:18px;
  font-size:14px;
  white-space:nowrap;
}

.multigame-home-page .multigame-zigzag{
  display:none;
}

.multigame-home-page .multigame-hilo-art,
.multigame-home-page .multigame-trivia-scene{
  align-self:end;
  position:relative;
  width:min(100%,500px);
  height:410px;
  margin:0 auto;
  overflow:visible;
}

.multigame-home-page .multigame-hilo-art{
  transform:translateY(-32px) scale(.9);
  transform-origin:center bottom;
}

.multigame-home-page .multigame-hilo-art .preview-left{
  left:0;
  top:48px;
}

.multigame-home-page .multigame-hilo-art .preview-right{
  right:0;
  top:100px;
}

.multigame-home-page .multigame-hilo-art .preview-vs{
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}

.multigame-home-page .multigame-hilo-art .floating-question{
  bottom:-13px;
  left:29px;
}

.multigame-home-page .multigame-hilo-art .floating-question small{
  display:none;
}

.multigame-home-page .multigame-oak{
  position:absolute;
  right:-12px;
  bottom:14px;
  width:auto;
  height:460px;
  max-width:52%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 20px 24px #0007);
  z-index:2;
}

.multigame-home-page .trivia-speech{
  --trivia-bubble:#2b253e;
  position:absolute;
  left:0;
  top:42px;
  width:67%;
  min-height:142px;
  display:flex;
  align-items:center;
  padding:28px 30px;
  border:0;
  border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 170' preserveAspectRatio='none'%3E%3Cpath d='M40 31 C45 9 80 5 99 20 C112 1 151 1 166 19 C185 3 220 6 232 24 C250 11 280 19 284 39 C320 31 346 56 332 79 C355 103 335 137 307 134 C303 158 269 165 248 149 C229 167 193 166 178 151 C158 168 126 162 115 146 C89 161 62 148 61 133 C30 140 6 116 22 92 C1 72 14 39 40 31 Z' fill='%232b253e' stroke='%23c9b5ff' stroke-opacity='.16' stroke-width='1.5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  color:#f4f1ff;
  filter:drop-shadow(0 12px 24px #0004);
  z-index:5;
  overflow:visible;
}

.multigame-home-page .trivia-speech:before,
.multigame-home-page .trivia-speech:after{
  content:none;
}

.multigame-home-page .trivia-speech strong{
  position:relative;
  z-index:1;
  font-size:17px;
  line-height:1.45;
  letter-spacing:-.15px;
}

.multigame-home-page .trivia-answers{
  position:absolute;
  left:3px;
  top:208px;
  width:67%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px 10px;
  z-index:5;
}

.multigame-home-page .trivia-answers span{
  min-width:0;
  padding:13px 14px 13px 12px;
  border:1px solid #ffffff13;
  border-radius:14px 11px 15px 10px;
  background:#242030;
  color:#c4bdd0;
  font-size:12px;
  font-weight:650;
  white-space:normal;
  display:flex;
  align-items:center;
  gap:6px;
  box-shadow:0 10px 24px #0003;
}

.multigame-home-page .trivia-answers span:nth-child(1){transform:rotate(-1deg)}
.multigame-home-page .trivia-answers span:nth-child(2){transform:translateY(3px) rotate(.7deg)}
.multigame-home-page .trivia-answers span:nth-child(3){transform:translateX(4px) rotate(.6deg)}
.multigame-home-page .trivia-answers span:nth-child(4){transform:translate(2px,3px) rotate(-.8deg)}

.multigame-home-page .trivia-answers b{
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  margin-right:6px;
  border-radius:50%;
  background:#a78bfa18;
  color:#c9b5ff;
  font-size:9px;
  font-weight:900;
  box-shadow:inset 0 0 0 1px #c9b5ff1f;
}

.multigame-home-page .home-bottom{
  grid-column:1/-1;
  position:relative;
  z-index:4;
  margin-top:46px;
}

.multigame-home-page .home-bottom>span:empty{
  min-width:1px;
}

@media(max-width:1100px){
  .multigame-home-page .multigame-stage{
    column-gap:28px;
  }
  .multigame-home-page .multigame-hilo{
    padding-right:20px;
  }
  .multigame-home-page .multigame-trivia{
    padding-left:20px;
  }
  .multigame-home-page .multigame-copy h1{
    font-size:clamp(38px,4vw,46px);
  }
  .multigame-home-page .multigame-hilo-art{
    transform:translateY(-26px) scale(.79);
  }
  .multigame-home-page .multigame-oak{
    right:-8px;
    bottom:14px;
    height:420px;
    max-width:52%;
  }
  .multigame-home-page .trivia-speech{
    width:68%;
    padding:26px 24px;
  }
  .multigame-home-page .trivia-answers{
    width:68%;
    grid-template-columns:1fr;
    gap:7px;
  }
  .multigame-home-page .trivia-answers span{
    padding:9px 12px;
    transform:none!important;
  }
  .multigame-home-page .trivia-speech strong{
    font-size:15px;
  }
}

@media(min-width:781px) and (max-width:1100px){
  .multigame-home-page .site-header{
    height:auto;
    flex-wrap:wrap;
    gap:16px;
    padding-top:20px;
    padding-bottom:16px;
  }
  .multigame-home-page .site-header .account-area{margin-left:auto}
  .multigame-home-page .site-header .nav{
    order:2;
    width:100%;
    justify-content:center;
  }
}

@media(max-width:780px){
  .multigame-home-page:has(#home-view:not(.hidden)) main::before{
    display:none;
  }

  .multigame-home-page .admin-multigame-home:not(.hidden){
    display:block!important;
    padding-top:24px!important;
  }

  .multigame-home-page .multigame-stage{
    display:grid;
    grid-template-columns:1fr;
    min-height:0;
  }

  .multigame-home-page .multigame-side{
    display:grid;
    grid-template-rows:auto auto auto;
    padding:42px 0 14px;
  }

  .multigame-home-page .multigame-copy{
    max-width:100%;
    text-align:center;
    margin:0 auto;
  }

  .multigame-home-page .multigame-copy h1{
    font-size:clamp(38px,11vw,50px);
    letter-spacing:-2.2px;
    white-space:normal;
  }

  .multigame-home-page .multigame-copy p{
    max-width:360px;
    margin:13px auto 0;
    padding:0 10px;
    font-size:11px;
    line-height:1.6;
  }

  .multigame-home-page .multigame-copy .button{
    width:215px;
    min-width:0;
    margin:18px auto 0;
  }

  .multigame-home-page .multigame-hilo-art{
    height:330px;
    width:min(100%,500px);
    margin:0 auto;
    transform:translateY(-18px) scale(.72);
    transform-origin:center center;
  }

  .multigame-home-page .multigame-zigzag{
    display:block;
    width:100%;
    height:20px;
    margin:4px 0 8px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 20' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='split' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop stop-color='%23eee9ff'/%3E%3Cstop offset='.5' stop-color='%23b9a4ff'/%3E%3Cstop offset='1' stop-color='%239d86da'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 10 L132 6 Q140 6 148 7 L292 13 Q300 13 308 12 L472 7 Q480 7 488 8 L682 12 Q690 12 698 11 L832 5 Q840 5 848 6 L1000 10' fill='none' stroke='url(%23split)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    filter:drop-shadow(0 0 5px #ffffff20);
  }

  .multigame-home-page .multigame-trivia-scene{
    width:min(100%,520px);
    height:390px;
    margin:0 auto;
  }

  .multigame-home-page .multigame-oak{
    right:0;
    bottom:10px;
    height:390px;
    max-width:52%;
  }

  .multigame-home-page .trivia-speech{
    left:2%;
    top:18px;
    width:62%;
    min-height:130px;
    padding:25px 26px;
  }

  .multigame-home-page .trivia-speech strong{
    font-size:13px;
  }

  .multigame-home-page .trivia-answers{
    left:2%;
    top:164px;
    width:62%;
    grid-template-columns:1fr;
    gap:7px;
  }

  .multigame-home-page .trivia-answers span{
    padding:10px 11px;
    font-size:12px;
    transform:none!important;
  }

  .multigame-home-page .trivia-answers b{
    width:18px;
    height:18px;
  }

  .multigame-home-page .home-bottom{
    margin-top:38px!important;
  }
}

@media(max-width:480px){
  .multigame-home-page .multigame-hilo-art{
    transform:translateY(-12px) scale(.63);
    margin-top:-8px;
    margin-bottom:-16px;
  }

  .multigame-home-page .multigame-trivia-scene{
    height:360px;
  }

  .multigame-home-page .multigame-oak{
    right:-2%;
    bottom:10px;
    height:340px;
    max-width:52%;
  }

  .multigame-home-page .trivia-speech{
    width:65%;
    left:0;
    top:16px;
  }

  .multigame-home-page .trivia-answers{
    width:65%;
    left:0;
    top:166px;
  }

  .multigame-home-page .home-preview-play-menu{
    width:min(225px,calc(100vw - 28px));
  }
}

.multigame-home-page .multigame-trivia{display:grid;grid-template-rows:1fr auto;overflow:visible;border-radius:20px}
.multigame-home-page .multigame-trivia-content{display:grid;grid-template-rows:174px 1fr;min-width:0;height:100%}
.home-preview-play-chevron{width:13px;height:13px;margin-left:6px;transition:transform .18s ease}
[data-home-preview-play-toggle][aria-expanded="true"] .home-preview-play-chevron{transform:rotate(180deg)}
@media(max-width:780px){.multigame-home-page .multigame-trivia-content{grid-template-rows:auto 1fr}}
.multigame-home-page .multigame-hilo h1{background-image:linear-gradient(105deg,#ded1f5 0%,#ded1f5 40%,#fff 60%,#fff 100%)}
.multigame-home-page .multigame-trivia h1{background-image:linear-gradient(105deg,#f5d2e3 0%,#f5d2e3 40%,#fff 60%,#fff 100%)}

@media(max-width:780px){
 .multigame-home-page .admin-multigame-home:not(.hidden){padding-top:14px!important}
 .multigame-home-page .multigame-side{padding-top:22px}
 .multigame-home-page .multigame-copy h1{font-size:clamp(32px,10vw,44px)}
 .multigame-home-page .multigame-hilo-art{transform:translateY(-8px);max-width:420px!important;height:266px!important;margin:18px auto 0!important}
 .multigame-home-page .multigame-hilo-art .preview-card{height:240px!important}
 .multigame-home-page .multigame-hilo-art .preview-card img{width:155px!important;height:155px!important}
}
@media(max-width:350px){
 .multigame-home-page .multigame-hilo-art{height:250px!important}
 .multigame-home-page .multigame-hilo-art .preview-card{height:224px!important}
 .multigame-home-page .multigame-hilo-art .preview-card img{height:142px!important}
}

.multigame-home-page .multigame-leaderboard{position:relative;z-index:8;justify-self:center;align-self:end;margin:36px 0 0;padding:8px 0;text-align:center}

@media(min-width:781px){.multigame-home-page .multigame-leaderboard{justify-self:end;margin-top:20px;transform:translateY(-8px)}}