/* POPEX v107 — Moonlit proportions. Keep game engine, touch geometry and goofy faces unchanged. */
:root{
 --pw-cartoon:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",-apple-system,system-ui,sans-serif;
 --pw-portrait-lift:clamp(0px,calc((100dvh - 680px)*.56),116px);
}
.moonlit-app,.moonlit-app button,.moonlit-app input{font-family:var(--pw-cartoon)!important}
.moonlit-app .brand-lockup h1{font-family:var(--pw-cartoon)!important;font-weight:850!important;letter-spacing:-1.3px!important}
#gameStage>.stats .stat strong,.challenge-hud .ch-timer,#gameStage .pop-time-clock strong{font-family:var(--pw-cartoon)!important;font-variant-numeric:tabular-nums}
/* Portrait visual hierarchy: branding first, then a controlled breathing gap, score, board, then pieces. */
@media (orientation:portrait){
 #gameStage{
  margin-top:var(--pw-portrait-lift)!important;
  gap:5px!important;
 }
 #gameStage>.stats{padding:0 0 2px!important}
 #gameStage>.queue-title{margin:0!important}
 #gameStage>#rack{margin:13px auto 0!important;gap:clamp(7px,2.35vw,12px)!important}
}
/* The shape holders are nearly spherical: animated membrane; stationary hit target. */
#gameStage>#rack>.piece{
 width:min(100%,126px)!important;
 height:auto!important;
 aspect-ratio:1 / 1!important;
 min-height:0!important;
 padding:6px 3px!important;
 justify-self:center!important;
 border-radius:50%!important;
 animation:none!important;
 overflow:hidden!important;
 background:radial-gradient(ellipse at 26% 16%,rgba(238,247,255,.13),transparent 55%),rgba(144,164,217,.07)!important;
 border:1px solid rgba(221,234,255,.29)!important;
 box-shadow:inset 0 2px 8px rgba(250,253,255,.14),inset 0 -8px 16px rgba(18,31,67,.15),0 3px 15px rgba(5,15,39,.09)!important;
}
#gameStage>#rack>.piece:not(.used)::before{
 border-radius:50%;
 background:radial-gradient(ellipse at 27% 15%,rgba(250,251,255,.22),transparent 44%),
             radial-gradient(ellipse at 75% 81%,rgba(143,162,212,.17),transparent 62%),
             rgba(151,176,222,.085)!important;
 animation:pw107LivingPocket 7.4s ease-in-out infinite!important;
 animation-delay:calc(var(--pocket-index,0) * -2.3s)!important;
}
#gameStage>#rack>.piece[aria-pressed="true"]{border-color:rgba(229,242,255,.78)!important;box-shadow:0 0 0 1px rgba(213,230,255,.13),0 0 21px rgba(189,211,255,.20),inset 0 2px 9px rgba(250,255,255,.14)!important}
#gameStage>#rack>.piece[aria-pressed="true"]::before{background:radial-gradient(ellipse at 27% 14%,rgba(255,255,255,.25),transparent 52%),rgba(142,171,224,.17)!important}
@keyframes pw107LivingPocket{
 0%,100%{border-radius:50% 50% 49% 51% / 49% 51% 50% 50%;transform:scale(1);opacity:.94}
 24%{border-radius:54% 46% 52% 48% / 46% 53% 47% 54%;transform:scale(1.023,.985);opacity:1}
 51%{border-radius:47% 53% 48% 52% / 54% 48% 53% 45%;transform:scale(.99,1.017);opacity:.89}
 78%{border-radius:52% 48% 54% 46% / 48% 54% 46% 52%;transform:scale(1.012,.995);opacity:.98}
}
/* The toolbar uses two slightly larger breathing bubbles, never animated transform on hit area. */
.moonlit-app .bloop-header{grid-template-columns:54px minmax(0,1fr) 54px!important;gap:4px!important}
.moonlit-app .bloop-header .top-bubble{
 width:50px!important;height:50px!important;padding:12px!important;
 position:relative!important;isolation:isolate!important;
 background:rgba(147,173,226,.075)!important;
 border:1px solid rgba(221,234,255,.22)!important;
 border-radius:50%!important;
 box-shadow:inset 0 2px 7px rgba(255,255,255,.15),inset 0 -5px 10px rgba(18,30,59,.16),0 2px 12px rgba(0,6,32,.15)!important;
}
.moonlit-app .bloop-header .top-bubble::before{
 content:"";pointer-events:none;position:absolute;inset:0;border-radius:50%;
 background:radial-gradient(ellipse at 26% 19%,rgba(255,255,255,.29),transparent 51%),rgba(157,178,235,.06);
 border:1px solid rgba(231,241,255,.17);
 animation:pw107ToolbarBreathe 6.2s ease-in-out infinite;
}
.moonlit-app .bloop-header .top-restart::before{animation-delay:-3.1s}
.moonlit-app .bloop-header .top-bubble svg{width:23px!important;height:23px!important;z-index:1;position:relative;pointer-events:none}
@keyframes pw107ToolbarBreathe{
 0%,100%{border-radius:50%;transform:scale(1);opacity:.8}
 28%{border-radius:52% 48% 54% 46% / 49% 53% 47% 51%;transform:scale(1.035,.985);opacity:1}
 63%{border-radius:47% 53% 49% 51% / 54% 47% 53% 46%;transform:scale(.985,1.025);opacity:.85}
}
/* A single shared optical model for all EMPTY domes — remove historical randomized nth-child shine. */
body.wrap-texture #gameStage #board>.cell:nth-child(n):not(.filled):not(.pop-now)::before{
 inset:1.8%!important;
 border-radius:50%!important;
 border:1px solid rgba(225,236,255,.34)!important;
 background:
  radial-gradient(ellipse at 27% 19%,rgba(248,251,255,.29) 0 8%,rgba(249,251,255,.08) 15%,transparent 30%),
  radial-gradient(circle at 51% 54%,rgba(205,224,254,.105) 0 46%,rgba(112,143,200,.09) 70%,rgba(17,30,65,.24) 100%)!important;
 box-shadow:inset 1px 2px 3px rgba(243,249,255,.22),inset -2px -3px 7px rgba(12,24,54,.25),0 1px 3px rgba(3,13,39,.14)!important;
 filter:none!important;
}
body.wrap-texture #gameStage #board>.cell:nth-child(n):not(.filled):not(.pop-now)::after{
 content:none!important;display:none!important;
}
/* Consistent specular model for occupied bubbles while retaining each character's color, eyes and motion. */
body.wrap-texture #gameStage #board>.cell.filled:not(.pop-now)::before{
 background:
  radial-gradient(ellipse at 27% 19%,rgba(255,255,255,.29) 0 8%,transparent 30%),
  radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--tile) 33%,white) 0 19%,var(--tile) 67%,color-mix(in srgb,var(--tile) 78%,#24395e) 100%)!important;
}
body.wrap-texture #gameStage #board>.cell.filled:not(.pop-now)::after{content:none!important;display:none!important}
/* POP TIME, challenge, confirmation and feedback: stable rounded shapes, same moonlit palette. */
#gameStage .popup,#gameStage .popup.warn,#gameStage .popup.ready,#gameStage .popup.color-streak,#gameStage .popup.challenge-win,#gameStage .popup.board-clear,#gameStage .popup.story-intro,#gameStage .popup.story-nervous{
 border-radius:23px!important;min-height:60px!important;
 font-family:var(--pw-cartoon)!important;letter-spacing:.1px!important;
}
#gameStage>.sheet>.bonus-countdown:not([hidden]){
 border-radius:23px!important;
 font-family:var(--pw-cartoon)!important;
}
#gameStage .pop-time-clock,.moonlit-app .pop-time-clock{
 border-radius:20px!important;
}
#gameStage>.queue-title .challenge-hud{
 border-radius:17px!important;
}
.gameover-card,.pw72-dialog{border-radius:24px!important;font-family:var(--pw-cartoon)!important}
.gameover-retry,.pw72-actions button.pw72-primary{border-radius:18px!important}
#gameStage .popup::before,#gameStage>.sheet>.bonus-countdown::before,#gameStage>.queue-title .challenge-hud::before{
 border-radius:inherit!important;animation:none!important;
}
.moonlit-app #notice:not([hidden]){border-radius:18px!important}
/* Early-device adjustments: compact rather than clipping the rack below the viewport. */
@media (orientation:portrait) and (max-height:750px){
 :root{--pw-portrait-lift:clamp(0px,calc((100dvh - 690px)*.18),14px)}
 #gameStage>#rack>.piece{width:min(100%,99px)!important}
 #gameStage>#rack{margin-top:8px!important}
 .moonlit-app .bloop-header{height:59px!important;min-height:59px!important}
}
@media (orientation:portrait) and (max-height:615px){
 #gameStage>#rack>.piece{width:min(100%,86px)!important}
 #gameStage>#rack{margin-top:4px!important}
 .moonlit-app .bloop-header{height:50px!important;min-height:50px!important}
 .moonlit-app .bloop-header .top-bubble{width:44px!important;height:44px!important;padding:10px!important}
 #gameStage>.stats .stat{min-height:35px!important}
 #gameStage>.queue-title{height:27px!important;min-height:27px!important}
}
@media (orientation:landscape) and (max-height:600px){
 #gameStage{margin-top:0!important}
 #gameStage>#rack>.piece{width:100%!important;height:100%!important;aspect-ratio:auto!important}
 .moonlit-app .bloop-header .top-bubble{width:43px!important;height:43px!important;padding:10px!important}
}
@media (prefers-reduced-motion:reduce){
 #gameStage>#rack>.piece::before,.moonlit-app .bloop-header .top-bubble::before{animation:none!important}
}

/* Final QA: compact confirmation and slightly larger POP TIME dial. */
.pw72-dialog.pw107-confirm{
 width:min(264px,calc(100vw - 52px))!important;
 padding:24px 24px 22px!important;
 border-radius:25px!important;
 background:radial-gradient(ellipse at 20% 0%,rgba(238,244,255,.14),transparent 55%),linear-gradient(155deg,#344365,#1c2b4b)!important;
}
.pw107-confirm h2{font-family:var(--pw-cartoon)!important;font-size:24px!important;font-weight:850!important;line-height:1.1;margin:0 0 23px!important;letter-spacing:.1px}
.pw107-confirm .pw72-actions{display:flex;justify-content:center;align-items:center;gap:22px!important}
.pw107-confirm .pw72-actions button{
 flex:none!important;width:65px!important;height:65px!important;min-height:65px!important;
 border-radius:50%!important;display:grid;place-items:center;padding:0!important;
 background:rgba(195,215,244,.09)!important;border:1px solid rgba(226,237,255,.3)!important;
 color:#e8f1ff!important;font:700 38px/1 var(--pw-cartoon)!important;
 box-shadow:inset 0 2px 7px rgba(245,251,255,.08),0 2px 12px rgba(8,12,36,.2)!important;
}
.pw107-confirm .pw72-actions button.pw72-primary{
 color:#172e49!important;background:linear-gradient(142deg,#ddf2ff,#a4cbd7)!important;
 border-color:#dff8ff!important;font-size:33px!important;
}
.pw107-confirm .pw72-actions button:active{filter:brightness(1.14);transform:scale(.95)}
#gameStage .pop-time-clock,.moonlit-app .pop-time-clock{
 width:90px!important;height:90px!important;border-radius:22px!important;
 padding:8px 4px!important;
}
#gameStage .pop-time-clock strong{font-size:45px!important}
#gameStage .pop-time-clock small{font-size:8px!important}
#gameStage .pop-time-clock span{font-size:8px!important}
#gameStage>.stats .pop-time-hud{height:90px!important;top:-16px!important}
@media (max-width:355px),(max-height:635px){
 #gameStage .pop-time-clock,.moonlit-app .pop-time-clock{width:77px!important;height:77px!important}
 #gameStage .pop-time-clock strong{font-size:38px!important}
 #gameStage>.stats .pop-time-hud{height:77px!important;top:-6px!important}
}

/* POP TIME temporarily owns the HUD: the paused challenge cannot overlap the enlarged timer. */
body.pop-time-active #gameStage>.queue-title .challenge-hud{visibility:hidden!important;pointer-events:none!important}