/* POPEX v108 — proportion pass: lift stats, reserve challenge lane, center queue, enlarge mascot. */
:root{
  --pw108-stage-min: calc(100dvh - 148px - env(safe-area-inset-bottom,0px));
  --pw108-header-h: 76px;
}
@media (orientation:portrait){
  main.moonlit-app{
    padding-top:calc(8px + env(safe-area-inset-top,0px))!important;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
  .moonlit-app .bloop-header{
    height:84px!important; min-height:84px!important; margin-bottom:0!important;
    grid-template-columns:56px minmax(0,1fr) 56px!important;
  }
  .moonlit-app .bloop-header .top-bubble{width:52px!important;height:52px!important;padding:12px!important}
  .moonlit-app .bloop-header .top-bubble svg{width:24px!important;height:24px!important}
  .moonlit-app .brand-lockup{gap:12px!important}
  .moonlit-app .brand-mark{width:56px!important;height:56px!important}
  .moonlit-app .brand-mark .brand-eye{top:15px;left:12px;width:13px;height:16px}
  .moonlit-app .brand-mark .brand-eye.eye-two{top:13px;left:31px;width:14px;height:18px}
  .moonlit-app .brand-lockup h1{font-size:clamp(33px,8.4vw,44px)!important;line-height:1!important}
  .moonlit-app .bloop-header .brand-tagline{margin-top:4px!important;font-size:10px!important;letter-spacing:1.35px!important}

  #gameStage{
    min-height:var(--pw108-stage-min)!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto 1fr!important;
    grid-template-areas:"stats" "heading" "board" "queue"!important;
    gap:0!important;
    align-items:start!important;
    align-content:start!important;
  }
  #gameStage>.stats{
    padding:0 0 2px!important;
    margin-top:-2px!important;
  }
  #gameStage>.stats .stat{
    min-height:44px!important;
    padding:1px 10px 0!important;
  }
  #gameStage>.stats .stat small{font-size:9px!important;letter-spacing:2.1px!important}
  #gameStage>.stats .stat strong{font-size:clamp(24px,6vw,30px)!important}
  #gameStage>.queue-title{
    height:58px!important; min-height:58px!important;
    margin:4px 0 8px!important; padding:0!important;
    align-self:start!important;
  }
  #gameStage>.queue-title .challenge-hud{
    height:100%!important;
    padding:8px 14px!important;
    align-items:center!important;
  }
  .challenge-hud .ch-text{gap:3px!important}
  .challenge-hud .ch-eyebrow{font-size:9px!important;letter-spacing:.8px!important}
  .challenge-hud .ch-record{font-size:9px!important}
  .challenge-hud .ch-goal{
    font-size:12px!important;
    line-height:1.16!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    display:block!important;
    max-width:100%!important;
  }
  .challenge-hud .ch-timer{font-size:18px!important;min-width:52px!important}

  #gameStage>#sheet{
    justify-self:center!important;
    align-self:start!important;
    width:min(100%, 360px)!important;
  }
  #gameStage>#rack{
    width:min(100%, 380px)!important;
    max-width:380px!important;
    align-self:center!important;
    justify-self:center!important;
    margin:0 auto!important;
    gap:12px!important;
    padding-bottom:2px!important;
  }
  #gameStage>#rack>.piece{
    height:clamp(96px,25.2vw,118px)!important;
    min-height:96px!important;
  }
  #gameStage>#rack .mini-rack{transform:none!important}

  /* Align POP TIME to the reserved lane below score when it takes over the HUD. */
  #gameStage>.stats .pop-time-hud{
    top:40px!important;
    left:0!important; right:0!important;
    height:92px!important;
  }
  #gameStage .pop-time-clock,.moonlit-app .pop-time-clock{
    width:96px!important;height:96px!important;border-radius:20px!important;
  }
  #gameStage .pop-time-clock strong{font-size:47px!important}
  #gameStage .pop-time-clock small,#gameStage .pop-time-clock span{font-size:8px!important}
}

/* Fine tune iPhone widths */
@media (max-width:520px) and (orientation:portrait){
  :root{--pw108-stage-min: calc(100dvh - 130px - env(safe-area-inset-bottom,0px));}
  .moonlit-app .bloop-header{height:72px!important;min-height:72px!important;grid-template-columns:48px minmax(0,1fr) 48px!important}
  .moonlit-app .bloop-header .top-bubble{width:44px!important;height:44px!important;padding:10px!important}
  .moonlit-app .bloop-header .top-bubble svg{width:21px!important;height:21px!important}
  .moonlit-app .brand-mark{width:48px!important;height:48px!important}
  .moonlit-app .brand-mark .brand-eye{top:12px;left:10px;width:12px;height:14px}
  .moonlit-app .brand-mark .brand-eye.eye-two{top:11px;left:26px;width:13px;height:16px}
  .moonlit-app .brand-lockup h1{font-size:clamp(31px,8.2vw,40px)!important}
  .moonlit-app .bloop-header .brand-tagline{font-size:9px!important;letter-spacing:1.15px!important}
  #gameStage>.stats .stat{min-height:42px!important;padding:0 8px!important}
  #gameStage>.queue-title{height:54px!important;min-height:54px!important;margin:4px 0 7px!important}
  #gameStage>#sheet{width:min(100%, 358px)!important}
  #gameStage>#rack{width:min(100%, 380px)!important;gap:10px!important}
  #gameStage>#rack>.piece{height:clamp(92px,24vw,112px)!important;min-height:92px!important}
  #gameStage>.stats .pop-time-hud{top:38px!important;height:90px!important}
  #gameStage .pop-time-clock,.moonlit-app .pop-time-clock{width:92px!important;height:92px!important}
}
@media (max-width:390px) and (orientation:portrait){
  :root{--pw108-stage-min: calc(100dvh - 122px - env(safe-area-inset-bottom,0px));}
  main.moonlit-app{padding-left:8px!important;padding-right:8px!important}
  .moonlit-app .bloop-header{height:68px!important;min-height:68px!important;grid-template-columns:44px minmax(0,1fr) 44px!important}
  .moonlit-app .bloop-header .top-bubble{width:40px!important;height:40px!important;padding:9px!important}
  .moonlit-app .bloop-header .top-bubble svg{width:19px!important;height:19px!important}
  .moonlit-app .brand-mark{width:44px!important;height:44px!important}
  .moonlit-app .brand-mark .brand-eye{top:11px;left:9px;width:11px;height:13px}
  .moonlit-app .brand-mark .brand-eye.eye-two{top:10px;left:24px;width:12px;height:15px}
  .moonlit-app .brand-lockup h1{font-size:clamp(29px,8vw,37px)!important}
  .moonlit-app .bloop-header .brand-tagline{font-size:8px!important;letter-spacing:1px!important}
  #gameStage>.stats .stat{min-height:40px!important}
  #gameStage>.stats .stat small{font-size:8px!important;letter-spacing:1.8px!important}
  #gameStage>.stats .stat strong{font-size:clamp(22px,5.8vw,28px)!important}
  #gameStage>.queue-title{height:50px!important;min-height:50px!important;margin:3px 0 6px!important}
  #gameStage>.queue-title .challenge-hud{padding:7px 12px!important}
  .challenge-hud .ch-eyebrow,.challenge-hud .ch-record{font-size:8px!important}
  .challenge-hud .ch-goal{font-size:11px!important}
  .challenge-hud .ch-timer{font-size:17px!important;min-width:46px!important}
  #gameStage>#sheet{width:min(100%, 354px)!important}
  #gameStage>#rack{width:min(100%, 374px)!important;gap:9px!important}
  #gameStage>#rack>.piece{height:clamp(84px,24vw,104px)!important;min-height:84px!important}
  #gameStage>.stats .pop-time-hud{top:35px!important;height:82px!important}
  #gameStage .pop-time-clock,.moonlit-app .pop-time-clock{width:84px!important;height:84px!important}
  #gameStage .pop-time-clock strong{font-size:42px!important}
}
@media (max-width:340px) and (orientation:portrait), (max-height:620px) and (orientation:portrait){
  :root{--pw108-stage-min: calc(100dvh - 110px - env(safe-area-inset-bottom,0px));}
  .moonlit-app .bloop-header{height:58px!important;min-height:58px!important}
  .moonlit-app .brand-mark{width:38px!important;height:38px!important}
  .moonlit-app .brand-mark .brand-eye{top:10px;left:8px;width:10px;height:12px}
  .moonlit-app .brand-mark .brand-eye.eye-two{top:9px;left:20px;width:11px;height:14px}
  #gameStage>.stats .stat{min-height:36px!important}
  #gameStage>.queue-title{height:44px!important;min-height:44px!important}
  #gameStage>#sheet{width:min(100%, 298px)!important}
  #gameStage>#rack>.piece{height:76px!important;min-height:76px!important}
  #gameStage>.stats .pop-time-hud{top:29px!important;height:74px!important}
  #gameStage .pop-time-clock,.moonlit-app .pop-time-clock{width:74px!important;height:74px!important}
  #gameStage .pop-time-clock strong{font-size:36px!important}
}
/* Landscape unchanged except slight mascot increase. */
@media (orientation:landscape) and (max-height:600px){
  .moonlit-app .brand-mark{width:38px!important;height:38px!important}
}