/* Shared page gutters, including standalone and embedded activity windows. */
body > main:not(.activity-shell), body > #app {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(12px, 1.2vw, 24px);
}
/* These illustrated groups have a useful art-size limit; keep the group centered. */
.russian-house-grid, .german-house-grid, .language-board, .book-timeline {
  margin-inline: auto;
}

/* Activity shadow roots share the near-edge page layout. Keep play surfaces bounded. */
.uv{padding-inline:clamp(12px,1.2vw,24px)}
.uv .pairs-game,.uv .quiz-game,.uv .puzzle-game,.uv .care-game,.uv .wheel-game,.uv .color-book{width:100%;max-width:none;box-sizing:border-box;margin-inline:auto}
:host(umka-treat-run) .wrap{max-width:none;padding-inline:clamp(12px,1.2vw,24px)}
/* A completed puzzle has no tray: center it across the entire workspace. */
.puzzle-layout:has(.puzzle-board.is-complete){grid-template-columns:minmax(0,1fr)}
.puzzle-board{justify-self:center}
#lesson .sk-words button strong{max-width:100%;overflow-wrap:anywhere;text-align:center}
/* Embedded activities use the same small gutters rather than a second padded card. */
#lesson:has(>.activity-frame){padding:0;border:0}
#lesson>.activity-frame{width:100%;margin-inline:auto}

/* Embedded Treat Run shares the page banner; its standalone banner stays intact. */
:host(umka-treat-run[data-host-banner]) .banner{display:none}

/* Share banner ownership without narrowing the existing game-page summaries. */
.activity-banner-layout .banner img{object-fit:contain;background:#f5efe4}
@media(max-width:767px){.activity-banner-layout .banner{height:auto;max-height:300px}.activity-banner-layout .banner img{height:auto;max-height:300px;object-fit:contain}}

/* Wardrobe controls keep stable columns and scrollbar space while outfits change. */
@media(min-width:761px){.dress-workspace .dress-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.dress-workspace .dress-wardrobe{min-width:0;scrollbar-gutter:stable}
/* Keep selection announcements from changing the embedded studio height. */
.uv:has(.dress-workspace)>p[role="status"]{min-height:3.3em}

/* Keep the visible coloring paper and controls together, centered as one workspace. */
@media screen{
.uv .color-book>header{text-align:center}
.uv .color-layout{--color-work-height:min(560px,max(240px,calc(var(--umka-window-height,100dvh) - 230px)));--color-paper-width:calc(var(--color-work-height) * 1122 / 1402);grid-template-columns:minmax(0,var(--color-paper-width)) 360px;justify-content:center;align-items:start;gap:20px}
.uv .color-layout:has(.color-art[viewBox="0 0 1149 1369"]){--color-paper-width:calc(var(--color-work-height) * 1149 / 1369)}
.uv .color-paper{position:static;top:auto;width:100%;max-width:none;justify-self:center}
.uv .color-art{width:100%;height:auto;max-height:none}
.uv .color-tools{width:100%;height:var(--color-work-height);max-height:var(--color-work-height);align-self:start}
@media(max-width:900px){.uv .color-layout{grid-template-columns:minmax(0,1fr);gap:16px}.uv .color-paper,.uv .color-tools{width:100%;max-width:520px;justify-self:center}.uv .color-tools{height:auto;max-height:none}}
}
.asl-overview.seo-overview{margin:0 0 10px;padding:10px 0}
.asl-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;flex-wrap:wrap}
.asl-title-row h1{font-size:clamp(22px,3vw,32px);margin:0}
.asl-title-row>a{display:inline-flex;align-items:center;min-height:36px;font-size:14px;text-underline-offset:3px}
.asl-overview.seo-overview details,.asl-overview .seo-membership-note{margin:4px 0 0;font-size:14px}