/* Full-width scenery; desktop play areas share the viewport's center. */
@media (min-width:901px){
 body,body.on-cover,body.on-village,body.on-memory,body.on-quiz,
 body.on-prato,body.on-escova,body.on-amigos,body.on-pintura{padding-right:0}
 .topbar,.on-cover .topbar,.on-village .topbar{background:none;backdrop-filter:none;border:0;box-shadow:none}
 .memory-page,.quiz-page,.prato-page,.escova-page,.amigos-page,.paint-page{
  width:calc(100% - 240px);max-width:1480px;padding:18px 0 30px;margin-inline:auto;
  --companion-width:clamp(135px,12vw,190px);--companion-gap:20px;
 }
 .memory-layout,.quiz-stage,.prato-layout,.escova-layout{
  display:grid;grid-template-columns:var(--companion-width) minmax(0,1fr) var(--companion-width);
  column-gap:var(--companion-gap);width:100%;max-width:none;margin-inline:auto;
 }
 .memory-game,.quiz-card,.prato-board,.escova-board{grid-column:2;grid-row:1;min-width:0}
 .memory-side{grid-column:3;grid-row:1;min-width:0}
 .quiz-company,.prato-company,.escova-company{grid-column:1;grid-row:1;min-width:0}
 .memory-guide{max-width:calc(100% - 2 * (var(--companion-width) + var(--companion-gap)))}
 .memory-board{max-width:none}
 .quiz-progress,.prato-path,.escova-path{max-width:100%}
 .prato-finish,.quiz-finish,.escova-finish{max-width:980px;margin-inline:auto}
 .voice-notice{left:50%}
}

/* Stack the host before the centered board when two side spaces would crowd it. */
@media (min-width:901px) and (max-width:1150px){
 .memory-layout,.quiz-stage,.prato-layout,.escova-layout{display:flex;flex-direction:column;gap:16px}
 .memory-game,.memory-side,.quiz-card,.prato-board,.escova-board{width:100%}
 .memory-guide{max-width:100%}
 .quiz-company,.prato-company,.escova-company{align-self:center;padding:0;width:150px}
 .quiz-host>img,.prato-company .prato-barao img,.escova-company img{height:140px}
 .memory-side{display:flex;align-items:center;justify-content:center;gap:16px;padding:0}
 .memory-dentim img{height:140px}
 .memory-heading,.quiz-heading,.prato-heading,.escova-heading{margin:14px auto;width:min(470px,80%)}
}

/* The full illustration fits above Jogar. A soft backdrop fills the screen edges. */
.on-cover .cover{height:calc(100svh - var(--credits-height));min-height:440px;background:#f5dac0}
.on-cover .cover-backdrop{display:block;background-image:var(--desktop-cover);filter:blur(30px);opacity:.55}
.on-cover .cover-art-wrap{
 inset:0 auto 106px 50%;width:min(100%,calc((100svh - var(--credits-height) - 106px) * 1.776833));
 height:auto;max-height:none;transform:translateX(-50%);
 mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(#000 86%,transparent);
 mask-composite:intersect;
}
.on-cover .cover-art{object-fit:contain;object-position:center;mask-image:none;min-height:0;max-height:none}
.on-cover .cover-play{bottom:22px}
.prato-company .prato-barao img{height:230px;width:100%;object-fit:contain}
.prato-storyteller{text-align:center;font-family:Fredoka,Arial,sans-serif;font-size:.85rem}
.prato-storyteller img{display:block;width:64px;height:70px;object-fit:contain}
.prato-storyteller span{display:block}

@media (max-aspect-ratio:1/1){
 .on-cover .cover-backdrop{background-image:var(--mobile-cover)}
}
@media (max-width:900px){
 .topbar,.on-cover .topbar,.on-village .topbar{
  background:rgba(220,201,236,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid #ffffffa6;box-shadow:0 -3px 18px #68508412;pointer-events:auto;
 }
 body .game-credits{background:#e9ddf0f2;border-top:0}
 .on-cover .cover{height:100svh;min-height:560px}
 .on-cover .cover-art-wrap{inset:0 auto calc(var(--controls-height) + 104px) 50%;height:auto;width:min(100%,calc((max(100svh,560px) - var(--controls-height) - 104px) * .666667));transform:translateX(-50%)}
 .on-cover .cover-play{bottom:calc(var(--controls-height) + 22px)}
 .prato-company .prato-barao img{height:125px}
 .prato-company{justify-content:center}
}
@media (max-width:700px){
 .prato-storyteller img{width:42px;height:55px}
 .prato-storyteller{font-size:.78rem}
}
@media (min-width:901px) and (max-width:1150px){
 .prato-company .prato-barao img{height:140px}
}