/* Popex v109 — viewport-safe portrait layout and light UI polish.
   This layer intentionally leaves all game mechanics and score persistence intact. */
@media (orientation:portrait){
  html,body{margin:0;min-height:100%;width:100%;overflow-x:hidden}
  main.moonlit-app{
    box-sizing:border-box!important;
    min-height:100vh!important;min-height:100dvh!important;
    display:flex!important;flex-direction:column!important;
    padding-top:calc(8px + env(safe-area-inset-top,0px))!important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
  }
  .moonlit-app .layout{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;min-height:0!important}
  .moonlit-app .layout>.panel{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;min-height:0!important}
  #gameStage{
    --pw109-board-size:min(100%, 360px, max(245px, calc(100dvh - 345px)));
    box-sizing:border-box!important;
    margin-top:0!important;min-height:0!important;
    flex:1 1 auto!important;height:auto!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(26px, 1fr) auto minmax(114px,1fr)!important;
    grid-template-areas:"stats" "heading" "board" "queue"!important;
    align-content:stretch!important;align-items:stretch!important;
    gap:0!important;
  }
  #gameStage>.stats{align-self:start!important}
  #gameStage>.queue-title{
    box-sizing:border-box!important;
    height:auto!important;min-height:26px!important;
    margin:0!important;align-self:stretch!important;
    display:flex!important;align-items:center!important;
  }
  #gameStage>.queue-title .challenge-hud{width:100%!important;height:auto!important;min-height:48px!important}
  #gameStage>#sheet{
    box-sizing:border-box!important;
    width:var(--pw109-board-size)!important;
    max-width:100%!important;
    justify-self:center!important;align-self:center!important;
  }
  #gameStage>#rack{
    box-sizing:border-box!important;
    width:min(100%, 380px)!important;
    max-width:100%!important;
    height:100%!important;min-height:0!important;
    margin:0 auto!important;padding:0!important;
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;align-items:center!important;justify-items:center!important;
    gap:clamp(7px,2.5vw,13px)!important;
    align-self:stretch!important;justify-self:center!important;
  }
  #gameStage>#rack>.piece{
    box-sizing:border-box!important;
    width:min(100%,116px)!important;height:auto!important;
    min-height:0!important;aspect-ratio:1!important;
    align-self:center!important;justify-self:center!important;
  }
  #gameStage>#rack>.piece.used{opacity:.24!important}
  .moonlit-app .night-atmosphere{
    height:100%!important;max-height:none!important;
    overflow:hidden!important;
  }
  .moonlit-app .ridge-far{
    top:clamp(205px,29dvh,310px)!important;left:-30%!important;
    width:160%!important;height:clamp(150px,23dvh,235px)!important;
    border-radius:48% 52% 61% 39% / 42% 68% 32% 58%!important;
    transform:rotate(-7deg)!important;
    background:radial-gradient(ellipse 66% 58% at 38% 64%,rgba(119,129,184,.17),rgba(91,105,158,.095) 49%,transparent 79%)!important;
    filter:blur(21px)!important;
  }
  .moonlit-app .ridge-near{
    top:clamp(235px,34dvh,355px)!important;left:-32%!important;
    width:167%!important;height:clamp(140px,22dvh,225px)!important;
    border-radius:55% 45% 57% 43% / 67% 36% 64% 33%!important;
    transform:rotate(5deg)!important;
    background:radial-gradient(ellipse 70% 60% at 64% 38%,rgba(116,133,190,.11),transparent 74%)!important;
    filter:blur(25px)!important;
  }
}
/* Smaller portrait phones prioritize a playable board without scrolling the controls away. */
@media (orientation:portrait) and (max-height:740px){
  #gameStage{grid-template-rows:auto minmax(16px,1fr) auto minmax(89px,1fr)!important;--pw109-board-size:min(100%,360px,max(215px,calc(100dvh - 285px)))}
  #gameStage>#rack>.piece{width:min(100%,99px)!important}
  .moonlit-app .bloop-header{height:58px!important;min-height:58px!important}
}
@media (orientation:portrait) and (max-height:650px){
  #gameStage{--pw109-board-size:min(100%,320px,max(190px,calc(100dvh - 250px)));grid-template-rows:auto minmax(8px,1fr) auto minmax(72px,1fr)!important}
  #gameStage>#rack>.piece{width:min(100%,85px)!important}
}
/* Soft in-world danger / success glass, not generic opaque action buttons. */
.pw107-confirm .pw72-actions #pw72No{
  color:#ffccd1!important;
  background:radial-gradient(ellipse at 28% 18%,rgba(255,224,229,.18),transparent 57%),rgba(219,96,121,.12)!important;
  border-color:rgba(250,159,175,.28)!important;
}
.pw107-confirm .pw72-actions #pw72Yes{
  color:#d5f7d8!important;
  background:radial-gradient(ellipse at 28% 18%,rgba(229,255,234,.19),transparent 57%),rgba(125,206,146,.13)!important;
  border-color:rgba(160,235,173,.31)!important;
}
/* Reuse the actual PopeX bubble face language for POP TIME's startled mascot. */
#gameStage>.sheet>.bonus-countdown:not([hidden]){
  display:flex!important;flex-direction:column!important;align-items:center!important;
  gap:6px!important;white-space:normal!important;
  padding:15px 20px!important;
}
.pw109-startled{
  display:block;position:relative;width:66px;height:66px;flex:none;
  border-radius:50%;background:radial-gradient(circle at 32% 22%,#f7ffff 0%,#b2e5f3 22%,#64badb 52%,#366d9c 88%);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 3px 9px rgba(255,255,255,.7),inset 0 -6px 10px rgba(24,63,109,.4),0 3px 19px rgba(106,218,255,.24);
  animation:pw109-startle .8s ease-in-out 2;
}
.pw109-startled::before{content:"";position:absolute;top:10px;left:9px;width:23px;height:15px;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(-31deg);filter:blur(3px)}
.pw109-eye{position:absolute;top:17px;width:19px;height:25px;border-radius:50%;background:#fff;
  box-shadow:0 2px 3px rgba(28,52,94,.32),inset 0 1px 2px #fff;transform:rotate(-7deg)}
.pw109-eye:nth-child(1){left:12px}.pw109-eye:nth-child(2){right:10px;transform:rotate(9deg)}
.pw109-eye::after{content:"";position:absolute;width:9px;height:12px;left:6px;top:6px;border-radius:50%;background:#273253;box-shadow:inset 2px 1px 0 rgba(255,255,255,.2)}
.pw109-eye::before{content:"";position:absolute;width:4px;height:5px;left:7px;top:7px;border-radius:50%;background:#fff;z-index:1}
.pw109-mouth{position:absolute;top:46px;left:29px;width:8px;height:11px;border-radius:50%;background:#293c69;box-shadow:inset 0 1px 3px #152246}
.pw109-intro-label{font-size:clamp(23px,6vw,36px);font-weight:850;letter-spacing:.5px;line-height:1.1}
@keyframes pw109-startle{0%,100%{transform:scale(1)}35%{transform:scale(1.1) rotate(-5deg)}65%{transform:scale(1.06) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.pw109-startled{animation:none!important}}