/* Keep browser text scaling predictable without disabling pinch-to-zoom. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:600px),(max-height:500px) and (pointer:coarse){
 body{min-width:0;max-width:100%;overflow-x:clip}
 .header{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));transform:none;width:auto;max-width:none;min-width:0;display:flex;gap:8px;padding:7px 8px;min-height:58px;box-sizing:border-box}
 .header .navigation{display:flex;flex:1 1 0;min-width:0;gap:0;overflow:hidden}
 .header .brand{font-size:15px;letter-spacing:-.6px;gap:6px;padding:0;min-width:0;white-space:nowrap}
 .header .brand-mark{flex-shrink:0;grid-template-columns:repeat(2,8px);gap:2px}.header .brand-mark i{height:8px}
 .header .header-actions{display:flex;flex:0 0 auto;gap:7px;min-width:0;margin:0}
 .header .header-cta{min-width:0;min-height:44px;padding:10px 8px;font-size:14px;gap:4px;white-space:nowrap}
 .header .header-share{width:44px;min-width:44px;flex:0 0 44px;padding:10px}
 .header .navigation>.nav-link,.header .how-button,.header .account-dropdown,.header .header-actions>.nav-link{display:none}
 #square-intro{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));transform:none;width:auto;max-width:none;min-width:0;padding:0;top:var(--mobile-header-bottom,74px);box-sizing:border-box}
 #square-intro h1{white-space:normal;overflow-wrap:anywhere;font-size:clamp(14px,3.7vw,18px);line-height:1.25;margin:0;padding:8px;max-width:100%}
 #square-intro .launch-strip{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:8px;padding:12px;border-radius:16px;min-width:0;max-width:100%;text-shadow:none}
 #square-intro .launch-strip>div{min-width:0;max-width:100%}
 #square-intro .launch-kicker{font-size:12px;margin-bottom:4px}
 #square-intro .launch-strip strong{font-size:16px;line-height:1.3}
 #square-intro .launch-strip p{display:none}
 #square-intro .launch-strip-action{display:block;width:100%;max-width:none}
 #square-intro .launch-strip .launch-button{width:100%;min-width:0;min-height:44px;padding:10px;font-size:14px;white-space:normal;overflow-wrap:anywhere}
 #square-intro .launch-strip-action small{display:none}
 #square-intro .launch-discovery{font-size:12px;line-height:1.4;gap:6px;min-width:0;max-width:100%}
 #square-intro .launch-discovery>div{flex-wrap:wrap;min-width:0;max-width:100%}
 #square-intro .launch-discovery button{min-height:36px;font-size:12px;padding:7px}
 .mobile-tabbar{max-width:100%;box-sizing:border-box}
 dialog[id]{min-width:0;max-width:calc(100% - 16px);box-sizing:border-box}
 .launch-success-panel,.public-ad-shell{overflow-wrap:anywhere}
 .launch-history-actions,.launch-share{min-width:0;max-width:100%}
}
@media(max-height:500px) and (pointer:coarse){#square-intro .launch-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}#square-intro .launch-discovery{display:none}#square-intro .launch-kicker{display:none}}
/* Full-screen mobile tile viewer; the board beneath retains its dimensions. */
#detail-dialog.reels-view{position:fixed;inset:0;margin:0;width:100%;max-width:100%;height:100dvh;height:var(--visible-height,100dvh);max-height:100dvh;border:0;border-radius:0;padding:0;overflow:hidden;background:#191822;color:#fff;display:flex;flex-direction:column;overscroll-behavior:contain}
#detail-dialog.reels-view:not([open]){display:none}
#detail-dialog.reels-view .detail-closebar{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;z-index:5;padding:0}
#detail-dialog.reels-view .detail-close{width:44px;height:44px;background:#fff;color:#171717;box-shadow:0 2px 15px #0003}
#detail-dialog.reels-view :is(#detail-art,.reel-preview-art){position:relative;flex:1 1 0;width:100%;min-height:0;height:auto;overflow:hidden;touch-action:pinch-zoom}
#detail-dialog.reels-view :is(#detail-art,.reel-preview-art) .tile-content{height:100%;min-height:0;padding: max(64px,calc(env(safe-area-inset-top) + 50px)) 24px 18px}
#detail-dialog.reels-view :is(#detail-art,.reel-preview-art) .tile-heading{font-size:clamp(26px,8vw,48px);line-height:1.1;overflow-wrap:anywhere;max-width:100%;margin-top:14px}
#detail-dialog.reels-view :is(#detail-art,.reel-preview-art) .tile-brand{font-size:14px;max-width:calc(100% - 35px)}
#detail-dialog.reels-view :is(#detail-art,.reel-preview-art) .tile-image,#detail-dialog.reels-view :is(#detail-art,.reel-preview-art) .uploaded-picture{object-fit:contain;width:100%;height:100%}
#detail-dialog.reels-view :is(#detail-art,.reel-preview-art) .tile-meta{font-size:13px}
#detail-dialog.reels-view .detail-info{flex:none;padding:12px 16px max(12px,env(safe-area-inset-bottom));min-width:0;background:#191822;color:white}
#detail-dialog.reels-view .detail-info h2{font-size:18px;line-height:1.2;margin:4px 0}
#detail-dialog.reels-view #detail-description{display:none}
#detail-dialog.reels-view .detail-kicker,#detail-dialog.reels-view .detail-disclaimer{font-size:12px;color:#d7d3e6;line-height:1.35}
#detail-dialog.reels-view .detail-disclaimer{margin:8px 0 0}
#detail-dialog.reels-view .detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#detail-dialog.reels-view .detail-actions .button{min-height:44px;min-width:0;padding:10px;font-size:14px;flex:1;gap:5px}
#detail-dialog.reels-view .detail-actions .outline{border-color:#aaa1c1;color:white}
#reel-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;padding:0 14px;background:#191822;color:#fff}
#reel-controls button{width:44px;height:44px;color:white;font-size:24px;border-radius:50%}
#reel-controls button:disabled{opacity:.3}
#reel-position{font-size:12px;text-align:center}
@media(max-height:500px){#detail-dialog.reels-view{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:1fr auto}#detail-dialog.reels-view :is(#detail-art,.reel-preview-art){grid-row:1/3;height:100%;width:100%}#detail-dialog.reels-view .detail-info{grid-column:2;grid-row:1;overflow:auto;padding-top:60px}#detail-dialog.reels-view #reel-controls{grid-column:2;grid-row:2}#detail-dialog.reels-view :is(#detail-art,.reel-preview-art) .tile-heading{font-size:clamp(22px,5vw,36px)}}

#detail-dialog.reels-view :is(#detail-art,.reel-preview-art){will-change:transform;backface-visibility:hidden}

#reel-stage{display:contents}
#detail-dialog.reels-view #reel-stage{display:block;position:relative;flex:1 1 0;min-height:0;overflow:hidden;isolation:isolate}
#detail-dialog.reels-view #reel-stage #detail-art{height:100%;width:100%;min-height:0}
@media(max-height:500px){#detail-dialog.reels-view #reel-stage{grid-column:1;grid-row:1/3;height:100%}}

@media(max-width:600px),(max-height:500px) and (pointer:coarse){#square-intro .launch-strip{display:flex;flex-direction:row;gap:6px;padding:7px 8px}#square-intro .launch-strip[hidden]{display:none}#square-intro .launch-strip>div{flex:1;min-width:0}#square-intro .launch-strip strong{font-size:12px}#square-intro .launch-strip .launch-button{width:auto;min-width:0;flex:0 0 auto;font-size:12px;padding:9px;min-height:40px}}

/* Compact navigation retains 44px touch targets and the device safe area. */
@media(max-width:600px),(max-height:500px) and (pointer:coarse){
 .mobile-tabbar{gap:2px;padding:3px 6px max(3px,env(safe-area-inset-bottom))}
 .mobile-tabbar>a,.mobile-tabbar>button{min-height:44px;padding:3px 2px;gap:2px;font-size:12px;border-radius:8px}
 .mobile-tabbar svg{width:18px;height:18px}
}

/* The artwork, navigation and details travel as one full-screen post. */
#reel-card{display:contents}
#detail-dialog.reels-view #reel-stage{display:block;position:absolute;inset:0;width:100%;height:100%;min-height:0}
#detail-dialog.reels-view :is(#reel-card,.reel-preview-card){position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;width:100%;height:100%;min-height:0;background:#191822;touch-action:pinch-zoom;will-change:transform;backface-visibility:hidden}
#detail-dialog.reels-view #reel-stage :is(#detail-art,.reel-preview-art){height:100%;min-height:0;max-height:100%;grid-column:1;grid-row:1}
#detail-dialog.reels-view .reel-description{display:none}
.reel-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;padding:0 14px;background:#191822;color:#fff}
.reel-controls button{width:44px;height:44px;color:white;font-size:24px;border-radius:50%}
.reel-controls span{font-size:12px;text-align:center}
@media(max-height:500px){
 #detail-dialog.reels-view{display:flex}
 #detail-dialog.reels-view :is(#reel-card,.reel-preview-card){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:1fr auto}
 #detail-dialog.reels-view #reel-stage :is(#detail-art,.reel-preview-art){grid-column:1;grid-row:1/3;height:100%}
 #detail-dialog.reels-view :is(#reel-controls,.reel-controls){grid-column:2;grid-row:2}
}

/* Compact publishing controls; keep labels in flow and controls touch-friendly. */
.header .brand{border-radius:0}
#create-dialog{border-radius:0}
#create-dialog :is(input:not([type=checkbox]),select,textarea,.button,.icon-button,.selected-spot-info,.selected-shape,.creator-extras,.upload-fieldset,.preview-column){border-radius:0}
#create-dialog .dialog-header{padding:12px 16px;gap:12px}
#create-dialog .dialog-header>div{min-width:0;flex:1}
#create-dialog .dialog-header h2{font-size:22px;line-height:1.2;overflow-wrap:anywhere}
#create-dialog .dialog-header .icon-button{flex:0 0 44px}
#create-dialog .creator-fields{padding:12px 16px}
#create-dialog .selected-spot-info{padding:10px;gap:10px;margin-bottom:12px;align-items:flex-start}
#create-dialog .selected-spot-info>span:last-child{min-width:0;overflow-wrap:anywhere}
#create-dialog .selected-spot-info small{margin-top:3px}
#create-dialog .placement-options{grid-template-columns:minmax(0,1fr);gap:6px}
#create-dialog .design-fieldset{margin-top:12px;min-width:0}
#create-dialog :is(.plan-fieldset,.design-fieldset) legend{margin-bottom:6px;font-size:15px}
#create-dialog .field-label{line-height:1.35;overflow-wrap:anywhere}
#create-dialog .label-row{gap:10px;margin-top:10px;align-items:baseline}
#create-dialog .character-count{flex-shrink:0;white-space:nowrap}
#create-dialog :is(input:not([type=checkbox]),select,textarea){padding:8px 10px;box-sizing:border-box}
#create-dialog select{padding-inline-end:32px;text-overflow:ellipsis}
#create-dialog .field-hint{line-height:1.4;overflow-wrap:anywhere}
#create-dialog .creator-extras{margin-top:10px}
#create-dialog .creator-extras summary{padding:10px}
#create-dialog .field-row{gap:10px;margin-top:12px}
#create-dialog .field-row>div{min-width:0}
#create-dialog .creator-bottom{padding:10px 16px;gap:8px;flex-wrap:wrap}
#create-dialog .creator-bottom>div:not(.publishing-progress){flex:1 1 220px;overflow-wrap:anywhere}
#create-dialog .creator-bottom .button{border-radius:0;padding:10px 12px;min-height:44px}
#create-dialog .creator-signin{padding:10px 16px;gap:10px;flex-wrap:wrap}
#create-dialog .creator-signin>div{min-width:0;flex:1 1 200px}
@media(max-width:600px){
 #create-dialog .creator-bottom{padding-bottom:max(10px,env(safe-area-inset-bottom))}
 #create-dialog .creator-bottom>div:not(.publishing-progress){flex:1 1 100%}
 #create-dialog .creator-bottom .button{flex:1 1 100%;width:100%}
 #create-dialog .preview-column{margin:0 16px 12px}
}