/* VetBreeze phone layout: preserve scenes, captions and quiet mascot gestures. */
@media screen and (max-width:760px), screen and (max-width:1024px) and (max-height:600px){
 html{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 body{height:auto;min-height:100%;overflow:visible}
 .app,.app:fullscreen{height:auto;min-height:100svh;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;overflow:visible}
 .app:fullscreen{height:100dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain}
 .topline{position:sticky;top:0;z-index:20;background:#fff;width:100%;min-height:0;flex-wrap:wrap;padding:6px 8px;gap:5px}
 .brand{gap:7px}.brand img{width:28px;height:28px}.brand-name{font-size:13px}.module-title{font-size:10px;padding-left:7px}
 .top-tools{flex-wrap:wrap;gap:4px}.tool,.module-link,.academy-link{font-size:10px;line-height:1.3;padding:7px 9px;min-height:32px}
 .top-caption,.volume-label{display:none}
 .presentation-frame{display:flex;flex-direction:column;height:auto;min-height:0;gap:4px}
 .presentation-frame>.stage{position:relative;display:block;height:auto;min-height:0;max-height:none;aspect-ratio:auto;container-type:inline-size;overflow:visible}
 .scene{position:relative;inset:auto;min-height:0;padding:18px 14px;justify-content:flex-start;overflow:visible;overscroll-behavior:auto}
 .scene .split,.team-scene .clinic-layout,.team-scene .roles-layout{grid-template-columns:minmax(0,1fr);gap:18px}
 .scene .visual,.scene .copy{max-width:100%;min-width:0}
 #stage .scene h2,#stage .scene .split .copy h2{font-size:clamp(24px,7.2vw,30px);line-height:1.16;margin-bottom:12px}
 #stage .scene .subtitle{font-size:15px;line-height:1.55;max-width:100%}
 #stage .scene .eyebrow{font-size:10px;line-height:1.4;margin-bottom:10px;max-width:calc(100% - 58px)}
 .scene-number{top:12px;right:14px;font-size:10px}
 #stage .scene .joke,#stage .scene .story-aside{font-size:13px;line-height:1.5;margin-top:12px;max-width:100%}
 #stage .scene .scene-note{position:static;font-size:11px;line-height:1.5;margin-top:16px}
 #stage .scene .hero-tagline,#stage .scene .module-heading{font-size:27px!important;line-height:1.2}
 .scene .hero-brand .vb-logo-plate{width:min(240px,80%);max-width:100%}
 .scene .chaos{grid-template-columns:minmax(0,1fr);gap:12px}.scene .chaos h2,.scene .floating-word{grid-column:1;grid-row:auto}
 .guide-panel{position:relative;inset:auto;height:auto;min-height:0;grid-template-columns:minmax(0,1fr) 60px;grid-template-rows:auto auto auto;align-items:start;gap:5px 10px;padding:12px 14px;overflow:visible}
 .guide-panel>.guide-art{width:60px;height:60px;align-self:start}
 .guide-copy{min-height:0;max-height:none;font-size:14px;line-height:1.55;align-self:start;overflow:visible}
 .guide-eyebrow,.guide-status{font-size:10px;line-height:1.45}
 .cover{position:relative;inset:auto;display:block;min-height:0;max-height:none;padding:18px 14px;overflow:visible;overscroll-behavior:auto}
 /* Before launch the cover is the entire stage, without hidden scenes taking space. */
 .stage:has(>.cover:not([hidden]))>.scene,.stage:has(>.cover:not([hidden]))>.guide-panel{display:none}
 .cover .cover-logo{width:160px;height:auto;margin-bottom:12px}
 .cover h1{font-size:28px;line-height:1.16;margin:12px 0}
 .cover p{font-size:14px;line-height:1.5}
 .cover .eyebrow{font-size:10px}.cover small{font-size:11px;line-height:1.45;margin-top:12px}
 .cover-module-nav{gap:6px;margin-top:14px}.cover-module-nav>a,.cover-module-nav>span{font-size:11px;padding:6px 9px}
 .cover .launch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin-top:15px}
 .cover .launch button{font-size:12px;line-height:1.4;padding:10px;min-height:42px;white-space:normal}
 .cover .launch #startGuide{grid-column:1/-1}
 .cover .cover-side{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;margin-top:16px;padding:0}
 .cover .cover-mascot{width:72px;height:72px;min-width:72px;min-height:72px}
 .cover .cover-side .guide-welcome{font-size:13px;line-height:1.4;text-align:left;margin:0}
 .cover .cover-side .guide-welcome small{font-size:11px;margin-top:5px}
 .player-bars{position:relative;gap:4px;min-height:0}
 .player-bars>.guide-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;padding:6px;min-height:0}
 .guide-actions button,.reading-buttons button{font-size:11px;line-height:1.35;padding:7px;min-height:36px;white-space:normal}
 .guide-actions label{font-size:10px;gap:4px}.guide-actions .guide-rate{min-height:30px;padding:2px 4px}
 .reading-controls{display:block;min-height:0;padding:6px}
 .reading-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px}
 .reading-buttons #modeButton{grid-column:1/-1}
 .reading-mode-note{max-width:none;font-size:10px;line-height:1.4;text-align:center;margin:5px 0 0}
 .controls{height:auto;min-height:42px;grid-template-columns:auto minmax(0,1fr);gap:7px;padding:5px 6px}
 .controls .control{font-size:11px;padding:7px 8px;min-height:34px}.controls .play{min-width:66px}
 .transport{gap:3px}.scrub{gap:5px}.scrub input{min-width:0}.controls .time{font-size:9px}
 .scene-clock,.now-title{display:none}
 .finished{position:relative;inset:auto;flex-wrap:wrap;gap:6px;padding:10px 14px}
 .finished button{font-size:12px;padding:10px}
 .modal{padding:12px}.modal-panel{max-height:calc(100dvh - 24px);padding:20px}.modal-heading h2{font-size:24px}.scene-grid{grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:360px){
 .cover h1{font-size:26px}.brand-name{font-size:12px}
 .guide-panel{grid-template-columns:minmax(0,1fr) 48px;gap:5px 8px}.guide-panel>.guide-art{width:48px;height:48px}
}
@media screen and (min-width:761px) and (max-width:1100px){
 .topline{flex-wrap:wrap;min-width:0;gap:6px}
 .top-tools{width:100%;min-width:0;flex-wrap:wrap;gap:5px}
}