/* Scene composition: generous characters, large countable objects, compact board. */
.game-content { grid-template-rows:76px minmax(0,1fr); }
.play-grid { grid-template-columns:minmax(190px,1fr) minmax(430px,600px) minmax(190px,1fr);gap:12px; }
.board { width:100%;height:min(100%,540px);padding:24px 24px 18px;grid-template-rows:minmax(0,1fr) 90px 78px 28px;gap:8px;align-self:center; }
.prompt { display:none; }
.answers { min-height:0;padding:0;gap:16px; }
.answer-card { width:88px;height:88px;min-width:88px;min-height:88px;font-size:44px; }
.submit-row { min-height:0;padding:0; }
.confirm-btn { width:76px;height:76px; }
.math-stage { --shell:76px;gap:12px; }
.shell-tap { flex:0 0 var(--shell);width:var(--shell);height:var(--shell); }
.shell-object { width:var(--shell);height:var(--shell); }
.object-group { min-width:calc(var(--shell) + 20px);min-height:calc(var(--shell) + 20px);max-width:calc(var(--shell)*3 + 36px);padding:10px;gap:4px; }
.math-stage[data-puzzle="count"] { --shell:100px; }
.math-stage[data-puzzle="count"] .object-group { max-width:336px; }
.math-stage[data-puzzle="sum"] .object-group,.math-stage[data-puzzle="change"] .object-group { max-width:calc(var(--shell)*2 + 28px); }
.math-stage[data-puzzle="missing"] { --shell:65px;gap:10px; }
.missing-parts,.missing-total { gap:10px; }
.missing-parts .object-group { max-width:calc(var(--shell)*4 + 36px); }
.missing-total .object-group { max-width:calc(var(--shell)*6 + 44px); }
.missing-group { width:110px; }
.group-label { font-size:28px; }
.math-sign { font-size:40px; }
.guide { width:min(23vw,280px);height:auto;max-height:300px; }
.hero { width:min(27vw,340px);height:auto;max-height:360px; }
.guide-zone,.hero-zone { overflow:visible; }
.fx-performer { filter:brightness(1.09) saturate(1.05) drop-shadow(0 0 10px #fff4cd75) drop-shadow(0 12px 8px #6b421d45); }
.guide,.hero { filter:brightness(1.09) saturate(1.05) drop-shadow(0 0 10px #fff4cd75) drop-shadow(0 12px 8px #6b421d45); }
.speech { width:100%;max-width:330px;min-height:115px;padding:22px 22px 30px;border:0;border-radius:0;box-shadow:none;background:transparent;isolation:isolate;font-size:19px;line-height:1.25; }
.speech::before { content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:url('assets/ui-ori-speech-deluxe.png.webp') center/100% 100% no-repeat; }
.speech::after { content:none; }
.speechText { position:relative; }
.level-path { justify-self:center; }
.skip-demo { right:22px;bottom:25px; }
@media (min-width:761px) and (orientation:landscape) and (max-width:1100px) {
 .play-grid { grid-template-columns:minmax(180px,1fr) minmax(430px,1.9fr) minmax(180px,1fr);gap:6px; }
 .board { padding:22px 16px 16px; }
 .math-stage { --shell:65px; }
 .math-stage[data-puzzle="count"] { --shell:88px; }
 .math-stage[data-puzzle="missing"] { --shell:51px; }
 .speech { font-size:16px;padding:20px 14px 26px; }
}
@media (max-width:760px),(orientation:portrait) {
 .game-content { grid-template-rows:98px minmax(0,1fr);gap:6px; }
 .play-grid { grid-template-columns:1fr minmax(240px,1.3fr) 1fr;grid-template-rows:minmax(150px,28%) minmax(0,1fr);align-content:center;gap:8px; }
 .guide-zone { display:contents; }
 .guide { grid-column:1;grid-row:1;order:0;justify-self:start;width:clamp(170px,27vw,270px);height:clamp(170px,27vw,270px);max-height:none; }
 .speech { grid-column:2;grid-row:1;order:0;justify-self:center;width:100%;max-width:360px;min-height:130px;font-size:20px;padding:26px 24px 34px; }
 .hero-zone { position:static;grid-column:3;grid-row:1;justify-self:end;width:clamp(180px,29vw,300px); }
 .hero { width:100%;height:auto;max-height:none; }
 .board { grid-column:1/-1;grid-row:2;width:min(100%,740px);height:min(100%,530px);justify-self:center;align-self:start;padding:24px 24px 16px;grid-template-rows:minmax(0,1fr) 84px 72px 26px;gap:6px; }
 .answer-card { width:80px;height:80px;min-width:80px;min-height:80px;font-size:40px; }
 .confirm-btn { width:70px;height:70px; }
 .rune { width:50px; }
}
@media (max-width:599px) {
 .play-grid { grid-template-columns:1fr 1fr 1fr;grid-template-rows:76px 110px minmax(0,1fr);gap:0; }
 .speech { grid-column:1/-1;grid-row:1;width:min(100%,310px);min-height:76px;max-height:76px;font-size:15px;padding:12px 22px 20px; }
 .guide { grid-column:1;grid-row:2;width:155px;height:155px;align-self:center; }
 .hero-zone { grid-column:3;grid-row:2;width:165px;align-self:center; }
 .board { grid-row:3;height:min(100%,490px);padding:18px 13px 12px;grid-template-rows:minmax(0,1fr) 66px 60px 23px;gap:5px; }
 .board::before { border-image-width:20px; }
 .math-stage { --shell:55px;gap:7px; }
 .math-stage[data-puzzle="count"] { --shell:76px; }
 .math-stage[data-puzzle="count"] .object-group { max-width:260px; }
 .math-stage[data-puzzle="missing"] { --shell:45px;gap:6px; }
 .object-group { padding:6px;gap:2px;min-width:calc(var(--shell) + 14px);min-height:calc(var(--shell) + 14px); }
 .math-stage[data-puzzle="sum"] .object-group,.math-stage[data-puzzle="change"] .object-group { max-width:calc(var(--shell)*2 + 18px); }
 .missing-parts .object-group { max-width:calc(var(--shell)*4 + 22px); }
 .missing-total .object-group { max-width:calc(var(--shell)*6 + 26px); }
 .missing-parts,.missing-total { gap:5px; }
 .missing-group { width:75px; }
 .math-sign { font-size:27px; }
 .group-label { font-size:23px; }
 .answer-card { width:64px;height:64px;min-width:64px;min-height:64px;font-size:32px; }
 .confirm-btn { width:60px;height:60px; }
 .feedback { font-size:15px;min-height:20px; }
 .skip-demo { right:16px;bottom:18px;width:48px;height:48px;min-width:48px;min-height:48px; }
}
@media (max-width:599px) and (max-height:720px) {
 .game-content { grid-template-rows:92px minmax(0,1fr);gap:2px; }
 .play-grid { grid-template-rows:66px 80px minmax(0,1fr); }
 .speech { min-height:66px;max-height:66px;font-size:13px;padding:10px 20px 17px; }
 .guide { width:120px;height:120px; }
 .hero-zone { width:130px; }
 .board { grid-template-rows:minmax(0,1fr) 60px 56px 20px;padding:16px 12px 10px;gap:3px; }
 .math-stage[data-puzzle="count"] { --shell:62px; }
 .math-stage[data-puzzle="count"] .object-group { max-width:220px; }
 .math-stage { --shell:49px; }
 .math-stage[data-puzzle="missing"] { --shell:39px; }
 .answer-card { width:58px;height:58px;min-width:58px;min-height:58px;font-size:30px; }
 .confirm-btn { width:56px;height:56px; }
}
/* Large hit areas also in missing-part puzzles; wrap groups instead of shrinking shells. */
@media (max-width:599px) {
 .math-stage[data-puzzle="missing"] { --shell:48px; }
 .missing-total .object-group { max-width:calc(var(--shell)*4 + 24px); }
 .missing-parts .object-group { max-width:calc(var(--shell)*3 + 20px); }
}
@media (min-width:600px) {
 .board:has(.math-stage[data-puzzle="count"] .object-group[aria-label="1 shell"]),
 .board:has(.math-stage[data-puzzle="count"] .object-group[aria-label="2 shells"]),
 .board:has(.math-stage[data-puzzle="count"] .object-group[aria-label="3 shells"]) { height:min(100%,430px); }
}
@media (max-width:599px) {
 .math-stage[data-puzzle="missing"] .object-group { padding:3px; }
 .missing-total .object-group { max-width:174px; }
}
@media (max-width:599px) and (max-height:720px) {
 .board:has(.math-stage[data-puzzle="missing"]) { grid-template-rows:minmax(0,1fr) 58px 54px 18px;padding-top:14px;padding-bottom:8px;gap:2px; }
}
@media (max-width:599px) {
 .board:has(.math-stage[data-puzzle="count"] .object-group[aria-label="1 shell"]),
 .board:has(.math-stage[data-puzzle="count"] .object-group[aria-label="2 shells"]),
 .board:has(.math-stage[data-puzzle="count"] .object-group[aria-label="3 shells"]) { height:min(100%,370px); }
}
/* Roomier reward frames: padding inside the wood and space between symbols. */
.progress { gap:10px;padding:12px 22px;min-height:64px; }
.level-path { gap:18px;padding:12px 24px;min-height:68px; }
.progress-dot,.level-node { flex-shrink:0; }
@media (max-width:760px),(orientation:portrait) {
 .progress { gap:7px;padding:10px 12px;min-height:48px; }
 .level-path { gap:18px;padding:8px 22px;min-height:49px; }
 .progress::before,.level-path::before { border-image-width:11px; }
}
/* Keep the shared four-button toolbar clear of Pevo's reward frames. */
body[data-game="pevo"] #wm-game-controls { left:auto;right:max(10px,env(safe-area-inset-right)); }
@media (max-width:599px) {
 body[data-game="pevo"] #wm-game-controls { right:max(7px,env(safe-area-inset-right));gap:4px; }
 body[data-game="pevo"] #wm-game-controls button { flex-basis:48px!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important; }
}
@media (max-width:379px) {
 .progress { gap:3px;padding-inline:8px; }
}
/* Pevo owns its HUD layout; shared catalog rules must not shrink its rewards. */
@media (orientation:portrait) {
 body[data-game="pevo"].wm-four-controls-active[data-wm-controls-game="19"] #wm-game-controls { left:auto;right:max(10px,env(safe-area-inset-right));gap:6px; }
 body[data-game="pevo"].wm-four-controls-active[data-wm-controls-game="19"] #progress { position:relative;left:auto;right:auto;top:auto;width:auto;min-height:48px;padding:10px 12px;gap:7px; }
 body[data-game="pevo"].wm-four-controls-active[data-wm-controls-game="19"] #progress>* { max-width:none;max-height:none; }
}
@media (max-width:599px) and (orientation:portrait) {
 .game-content { grid-template-rows:126px minmax(0,1fr); }
 .hud { grid-template-columns:137px minmax(0,1fr);grid-template-rows:60px 49px;gap:4px 8px; }
 body[data-game="pevo"].wm-four-controls-active[data-wm-controls-game="19"] #wm-game-controls { left:50%;right:auto;transform:translateX(-50%); }
 body[data-game="pevo"].wm-four-controls-active[data-wm-controls-game="19"] #progress { grid-row:2;grid-column:1;padding:10px 8px;gap:3px; }
 .level-path { grid-row:2;grid-column:2;width:100%;gap:clamp(2px,1vw,6px);padding:8px 10px;justify-content:space-between; }
 .level-node,.level-node.current { width:30px; }
}
@media (max-width:599px) and (max-height:720px) and (orientation:portrait) {
 .play-grid:has(.math-stage[data-puzzle="missing"]) { grid-template-rows:60px 54px minmax(0,1fr); }
 .play-grid:has(.math-stage[data-puzzle="missing"]) .guide { width:104px;height:104px; }
 .play-grid:has(.math-stage[data-puzzle="missing"]) .hero-zone { width:110px; }
}