/* Scoped repairs for the October viewport audit; artwork and game handlers stay intact. */
html.bavilo-responsive-puzzle .a-legacy-voice > button {
  flex:0 0 48px; min-width:48px; min-height:48px;
}
html.bavilo-responsive-puzzle .a-legacy-voice > div { min-width:0; }

@media(max-width:700px) {
  html.bavilo-responsive-friends body.hub-page .hero-copy::before { content:none; }
  html.bavilo-responsive-friends body.hub-page .hero-copy { padding-top:52px; }
  html.bavilo-responsive-friends body.hub-page .hero .eyebrow {
    max-width:100%; white-space:normal; overflow-wrap:anywhere;
    justify-content:center; line-height:1.5;
  }

  html.bavilo-responsive-differences body > header {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    height:auto; flex:none; gap:8px; padding:10px 12px;
  }
  html.bavilo-responsive-differences body > header > .bavilo-nav-controls {
    grid-area:1 / 1 / 2 / -1; width:max-content; max-width:100%;
  }
  html.bavilo-responsive-differences body > header > .title {
    grid-area:2 / 1 / 3 / -1; min-width:0; font-size:20px;
    line-height:1.2; padding:4px 0; text-align:center;
  }
  html.bavilo-responsive-differences body > header > .title small {
    font-size:12px; line-height:1.4; margin-top:4px;
  }
  html.bavilo-responsive-differences body > header > .chip:has(#round) { grid-area:3 / 1; }
  html.bavilo-responsive-differences body > header > .chip:has(#cnt) { grid-area:3 / 2; }
  html.bavilo-responsive-differences body > header > .chip {
    min-width:0!important; min-height:44px; padding:5px;
  }
  html.bavilo-responsive-differences body > header > .chip span { display:block; }
  html.bavilo-responsive-differences body > header > .ghost {
    grid-area:3 / 3 / 4 / 5; width:100%; min-width:0; min-height:44px;
    justify-content:center; font-size:13px; padding:8px;
  }
  html.bavilo-responsive-differences body > header > button:last-child {
    grid-area:4 / 1 / 5 / -1; justify-self:center; justify-content:center;
    width:auto; height:auto; min-height:44px; padding:8px 20px; font-size:14px;
  }

  html.bavilo-responsive-story .storybook header {
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    gap:8px; height:auto; min-height:0; padding:6px;
  }
  html.bavilo-responsive-story .storybook header > .bavilo-nav-controls { grid-area:1 / 1 / 2 / -1; }
  html.bavilo-responsive-story .storybook header > .header-right {
    grid-area:3 / 1 / 4 / -1; justify-self:end; margin:0; gap:8px;
  }
  html.bavilo-responsive-story .storybook header > .brand {
    grid-area:2 / 1 / 3 / -1; width:100%; max-width:none;
    padding:9px 12px; text-align:center;
  }
  html.bavilo-responsive-story .storybook .brand h1 { font-size:20px; line-height:1.2; }
  html.bavilo-responsive-story .storybook .brand small { font-size:10px; line-height:1.4; }
  html.bavilo-responsive-story .storybook .round { min-width:44px; min-height:44px; }

  html.bavilo-responsive-routine #world > header {
    display:grid; grid-template-columns:minmax(0,1fr) repeat(4,44px);
    height:auto; flex:none; gap:8px; padding:10px 12px;
  }
  html.bavilo-responsive-routine #world > header > .bavilo-nav-controls { grid-area:1 / 1 / 2 / 6; }
  html.bavilo-responsive-routine #world > header > .brand {
    grid-area:2 / 1 / 3 / 6; width:100%; max-width:none;
    padding:9px 12px; text-align:center;
  }
  html.bavilo-responsive-routine #world > header > .brand h1 { font-size:20px; line-height:1.2; }
  html.bavilo-responsive-routine #world > header > .brand small { font-size:10px; line-height:1.4; }
  html.bavilo-responsive-routine #world > header > #earned {
    grid-area:3 / 1; margin:0; justify-self:start; padding:12px;
  }
  html.bavilo-responsive-routine #world > header > :is(#replay,#mute,#pause,#reset) {
    position:static; inset:auto; width:44px; height:44px;
    min-width:44px; min-height:44px; font-size:22px;
  }
  html.bavilo-responsive-routine #replay { grid-area:3 / 2; }
  html.bavilo-responsive-routine #mute { grid-area:3 / 3; }
  html.bavilo-responsive-routine #pause { grid-area:3 / 4; }
  html.bavilo-responsive-routine #reset { grid-area:3 / 5; }
  html.bavilo-responsive-routine #world > .instruction { margin-top:4px; flex:none; }
  html.bavilo-responsive-routine #world { min-height:760px; height:100svh; }
}

/* Only the illustration canvas scales. The same scene units still drive pointer input. */
.town-scene-frame,.town-scene-canvas { position:absolute; inset:0; width:1920px; height:1080px; }
.town-scene-canvas { transform-origin:top left; }
html.town-compact-layout,html.town-compact-layout body { height:auto; min-height:100%; overflow:auto; }
html.town-compact-layout #stage.compact-town {
  position:relative; width:100%; height:auto; min-height:100svh;
  display:flex; flex-direction:column; overflow:hidden; padding-bottom:14px;
}
html.town-compact-layout #stage.compact-town > header {
  position:relative; inset:auto; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; gap:10px;
  width:100%; height:auto; min-height:0; padding:12px; order:0;
}
html.town-compact-layout #stage.compact-town header .brand {
  min-width:0; max-width:none; padding:9px 14px; border-radius:16px;
}
html.town-compact-layout #stage.compact-town header .brand h1 { font-size:20px; line-height:1.2; }
html.town-compact-layout #stage.compact-town header .brand small { font-size:10px; letter-spacing:1px; }
html.town-compact-layout #stage.compact-town #teacher { grid-column:3; grid-row:1; }
html.town-compact-layout #stage.compact-town #chapters {
  grid-column:1/-1; margin:0; justify-self:center; gap:8px; padding:7px 12px;
}
html.town-compact-layout #stage.compact-town #chapters span { width:28px; height:28px; font-size:15px; }
html.town-compact-layout #stage.compact-town :is(header .icon,[data-bavilo-control]) {
  width:48px; height:48px; min-width:48px; min-height:48px; flex-basis:48px;
  font-size:28px; border-radius:16px;
}
html.town-compact-layout #stage.compact-town :is([data-bavilo-control]::before,[data-bavilo-control="home"] svg) { width:24px; height:24px; }
html.town-compact-layout #stage.compact-town #instruction-bar {
  position:relative; inset:auto; order:1; width:calc(100% - 24px);
  min-height:72px; margin:0 12px 10px; padding:9px 12px; gap:10px; border-radius:18px;
}
html.town-compact-layout #stage.compact-town #instruction { font-size:19px; line-height:1.3; }
html.town-compact-layout #stage.compact-town #chapter { font-size:11px; letter-spacing:1px; }
html.town-compact-layout #stage.compact-town #bavi-icon { flex:0 0 57px; }
html.town-compact-layout #stage.compact-town .town-scene-frame {
  position:relative; inset:auto; order:2; width:100%; flex:none; overflow:hidden;
}
html.town-compact-layout #stage.compact-town #context-actions {
  position:relative; inset:auto; order:3; width:100%; padding:12px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
html.town-compact-layout #stage.compact-town #context-actions:empty { display:none; }
html.town-compact-layout #stage.compact-town #context-actions .scene-cta {
  position:static; inset:auto; transform:none; max-width:100%;
  min-height:48px; padding:12px 22px; font-size:18px; border-radius:18px;
}
html.town-compact-layout #stage.compact-town .low-targets {
  position:static; inset:auto; display:flex; flex-wrap:wrap; gap:12px;
}
html.town-compact-layout #stage.compact-town .low-targets button {
  min-width:100px; height:48px; font-size:24px;
}
html.town-compact-layout #stage.compact-town :is(#hint,#issue) {
  position:relative; inset:auto; order:4; width:calc(100% - 24px); margin:8px 12px;
  font-size:15px; line-height:1.4; transform:none;
}
html.town-compact-layout #stage.compact-town > footer {
  position:relative; inset:auto; order:5; width:100%; height:auto;
  margin-top:auto; padding:12px; display:flex; flex-wrap:wrap; gap:10px;
}
html.town-compact-layout #stage.compact-town footer .tool {
  flex:1; min-width:0; height:auto; min-height:48px; padding:9px 8px;
  gap:8px; font-size:23px; border-radius:16px;
}
html.town-compact-layout #stage.compact-town footer .tool span { font-size:12px; }
html.town-compact-layout #stage.compact-town #input-tip {
  order:2; flex:1 0 100%; margin:0; padding:9px; font-size:12px; line-height:1.4;
}
html.town-compact-layout #stage.compact-town #overlay { position:fixed; padding:16px; }
html.town-compact-layout #stage.compact-town .overlay-card { max-width:650px; padding:22px; border-radius:24px; }
html.town-compact-layout #stage.compact-town .overlay-card h2 { font-size:26px; }
html.town-compact-layout #stage.compact-town .overlay-card p { font-size:18px; }
html.town-compact-layout #stage.compact-town .overlay-card button { min-height:48px; padding:12px 18px; font-size:17px; }
html.town-compact-layout #stage.compact-town .house-hit::before {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:var(--town-touch-size); min-height:var(--town-touch-size); width:100%; height:100%;
}
@media(max-width:700px) {
  html.town-compact-layout #stage.compact-town > header { grid-template-columns:minmax(0,1fr) auto; }
  html.town-compact-layout #stage.compact-town header > .brand { grid-column:1/-1; grid-row:2; text-align:center; }
  html.town-compact-layout #stage.compact-town #teacher { grid-column:2; }
  html.town-compact-layout #stage.compact-town #chapters { grid-row:3; }
  html.town-compact-layout #stage.compact-town :is(header .icon,[data-bavilo-control]) { width:44px; height:44px; min-width:44px; min-height:44px; flex-basis:44px; }
}