/* Bella's Game World v0.3 — fixed stage, local scrolling, immediate colours.
   This file deliberately follows v0.2; print layouts are preserved. */
:root {--studio-pink:#f8d3e8}
.studio-tabs{display:flex;gap:5px;flex:0 0 auto;padding:8px;background:linear-gradient(110deg,#fdf1fb,#f2efff);border-radius:17px;box-sizing:border-box}
.studio-tab{min-width:0;flex:1;border:2px solid transparent;background:#fff;border-radius:13px;min-height:44px;padding:7px 4px;font-size:clamp(10px,1.3vw,13px);font-weight:900;line-height:1.1;color:#795389;cursor:pointer;box-shadow:0 2px 0 #ebdeee}
.studio-tab[aria-pressed=true]{background:#a477e9;color:white;border-color:#8e5ad0;box-shadow:0 2px 0 #6e45a8}
.studio-tab:focus-visible{outline:3px solid #e77ab0;outline-offset:2px}
.paper-quick-colours{flex:0 0 auto;min-height:0;background:#fff8fd;border:1px solid #f0ddf0;border-radius:16px;padding:7px 10px 9px}
.quick-colour-title{font-size:13px;font-weight:1000;color:#8157b1;display:flex;justify-content:space-between;gap:6px;align-items:center}
.quick-colour-title span{font-size:10px;color:#957b9f;line-height:1.2;text-align:right}
.paper-quick-colours .paint-card{margin:5px 0 0;padding:7px 9px;background:#fff;border-radius:11px}
.paper-quick-colours .paint-head{margin-bottom:5px}
.paper-quick-colours .paint-head h3{font-size:12px}
.paper-quick-colours .paint-head .paint-emoji{font-size:16px}
.paper-quick-colours .swatches{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
.paper-quick-colours .swatch{min-width:0;max-width:34px;width:100%;border-width:2px;margin:0 auto}
.paper-quick-colours .paint-extras{margin-top:7px;gap:5px}
.paper-quick-colours .paint-extras input{height:29px;width:40px;padding:0}
.paper-quick-colours .paint-extras label{font-size:11px}
.paper-quick-colours .remove-btn{font-size:10px;padding:7px 8px}
.paper-quick-colours .outfit-label{display:none}
.paper-quick-colours .current-outfit{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:thin;gap:5px;margin-top:7px;padding:0 1px 4px;-webkit-overflow-scrolling:touch}
.paper-quick-colours .outfit-pill{flex:0 0 auto;font-size:10px;padding:5px 8px;min-height:30px}
.paper-quick-colours .empty-help{margin:5px 0;padding:7px;font-size:11px}
.paper-quick-colours .empty-help .big{display:none}
.paper-quick-colours.colour-tap{animation:colourPulse .32s ease-out}
@keyframes colourPulse{50%{box-shadow:0 0 0 4px #e7b1f2}}
/* A workbench is deliberately a single tool column; the artwork is its own
   unscrolling column. Only the toolbox pane scrolls, NOT the entire page. */
@media screen and (min-width:700px){
 html:has(.bella-studio-ready),body.bella-studio-ready{overflow:hidden!important;height:100%;overscroll-behavior:none}
 body.bella-studio-ready .bella-hub-bar{height:46px;min-height:46px;padding-top:3px;padding-bottom:3px}
 body.bella-studio-ready .bella-hub-bar a{min-height:37px;padding:5px 12px}
 body.bella-page-paper.bella-studio-ready .app,
 body.bella-page-glow.bella-studio-ready .app{max-width:none;height:calc(100dvh - 46px - env(safe-area-inset-bottom));min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:5px 9px 9px}
 body.bella-page-paper.bella-studio-ready .topbar,
 body.bella-page-glow.bella-studio-ready .topbar{flex:none;min-height:48px;margin:0 0 7px!important;gap:6px;align-items:center;flex-wrap:nowrap}
 body.bella-page-paper.bella-studio-ready .brand-mark,
 body.bella-page-glow.bella-studio-ready .logo-mark{width:36px;height:36px;border-radius:11px;font-size:21px;box-shadow:none}
 body.bella-page-paper.bella-studio-ready .brand h1,
 body.bella-page-glow.bella-studio-ready .logo h1{font-size:clamp(16px,2vw,22px);white-space:nowrap;letter-spacing:-.6px}
 body.bella-page-paper.bella-studio-ready .brand p,
 body.bella-page-glow.bella-studio-ready .logo small{display:none}
 body.bella-page-paper.bella-studio-ready .top-actions,
 body.bella-page-glow.bella-studio-ready .top-actions{width:auto;flex-wrap:nowrap;margin-left:auto;gap:5px}
 body.bella-page-paper.bella-studio-ready .top-actions button,
 body.bella-page-glow.bella-studio-ready .top-actions button{flex:0 1 auto;min-height:36px;padding:7px 9px;font-size:11px;box-shadow:none;white-space:nowrap}
 body.bella-page-paper.bella-studio-ready .main,
 body.bella-page-glow.bella-studio-ready .layout{display:grid!important;grid-template-columns:minmax(320px,0.92fr) minmax(300px,1.08fr)!important;grid-template-rows:minmax(0,1fr);gap:9px;align-items:stretch!important;flex:1;min-height:0;max-height:100%;overflow:hidden}
 body.bella-page-paper.bella-studio-ready .paper-workbench,
 body.bella-page-glow.bella-studio-ready .glow-workbench{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-height:0;min-width:0;gap:5px;background:#fff;border:1px solid #eee1f5;border-radius:17px;padding:7px;overflow:hidden;box-shadow:0 5px 18px #a16aa921}
 body.bella-page-paper.bella-studio-ready .center,
 body.bella-page-glow.bella-studio-ready .main-stage{grid-column:2!important;grid-row:1!important;min-height:0;min-width:0;order:initial!important;align-self:stretch;overflow:hidden}
 body.bella-page-paper.bella-studio-ready .studio-scroll,
 body.bella-page-glow.bella-studio-ready .studio-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#c5a1e9 #f9efff}
 /* Paper Dolls: always-visible picture and colour strip. */
 body.bella-page-paper.bella-studio-ready .paper-workbench .wardrobe,
 body.bella-page-paper.bella-studio-ready .paper-workbench .designer{min-height:0;max-height:none;grid-column:auto;order:initial!important;display:none;width:100%;padding:4px 5px;box-shadow:none;border:none;border-radius:10px;flex:1}
 body.bella-page-paper.bella-studio-ready .paper-workbench[data-view=clothes] .wardrobe{display:block}
 body.bella-page-paper.bella-studio-ready .paper-workbench[data-view=dolls] .designer,
 body.bella-page-paper.bella-studio-ready .paper-workbench[data-view=places] .designer{display:block}
 body.bella-page-paper.bella-studio-ready .paper-workbench .designer .small-section{display:none;border:0;padding:0}
 body.bella-page-paper.bella-studio-ready .paper-workbench[data-view=dolls] .designer .small-section:first-child{display:block}
 body.bella-page-paper.bella-studio-ready .paper-workbench[data-view=places] .designer .small-section:nth-child(2){display:block}
 body.bella-page-paper.bella-studio-ready .paper-workbench .hint,
 body.bella-page-paper.bella-studio-ready .paper-workbench .little-note{display:none}
 body.bella-page-paper.bella-studio-ready .paper-workbench .categories{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:5px 0 8px;overflow:visible}
 body.bella-page-paper.bella-studio-ready .paper-workbench .category{min-height:52px;padding:3px 1px;border-radius:10px;font-size:10px;min-width:0}
 body.bella-page-paper.bella-studio-ready .paper-workbench .category .emoji{font-size:21px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .wardrobe-subtitle{margin:5px 0 7px;font-size:12px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .item{min-height:100px;padding:4px 3px;border-radius:12px;touch-action:pan-y}
 body.bella-page-paper.bella-studio-ready .paper-workbench .item .preview{height:68px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .item-name{font-size:10px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .models{margin-top:7px;gap:6px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .model{min-height:85px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .locations{grid-template-columns:repeat(3,1fr);margin-top:8px}
 body.bella-page-paper.bella-studio-ready .center{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 3px}
 body.bella-page-paper.bella-studio-ready .scene-tools{width:100%;flex:none;min-height:36px;margin:0 0 5px;flex-wrap:nowrap}
 body.bella-page-paper.bella-studio-ready .scene-tools h2{font-size:14px}
 body.bella-page-paper.bella-studio-ready .scene-controls{gap:5px;flex-wrap:nowrap}
 body.bella-page-paper.bella-studio-ready .mini-btn{padding:6px 8px;font-size:10px;min-height:32px}
 body.bella-page-paper.bella-studio-ready .scene-card{width:min(100%,calc((100dvh - 191px)*.7742));height:auto;max-width:510px;max-height:calc(100dvh - 191px);border-width:5px;border-radius:18px;flex:none;margin:0 auto}
 body.bella-page-paper.bella-studio-ready .scene-card svg{width:100%;height:auto}
 body.bella-page-paper.bella-studio-ready .stage-help{font-size:10px;margin:4px auto 0}
 body.bella-page-paper.bella-studio-ready .middle-bottom{display:none}
 /* Glow Studio: face stays present, tools and colours remain in left pane. */
 body.bella-page-glow.bella-studio-ready .glow-workbench .settings,
 body.bella-page-glow.bella-studio-ready .glow-workbench .makeup-panel{flex:1;max-height:none;min-height:0;width:100%;padding:7px 8px;box-shadow:none;border:none;border-radius:10px;display:none;order:initial!important;grid-row:auto;grid-column:auto;gap:8px}
 body.bella-page-glow.bella-studio-ready .glow-workbench[data-view=makeup] .makeup-panel{display:block}
 body.bella-page-glow.bella-studio-ready .glow-workbench[data-view=models] .settings,
 body.bella-page-glow.bella-studio-ready .glow-workbench[data-view=hair] .settings,
 body.bella-page-glow.bella-studio-ready .glow-workbench[data-view=extras] .settings{display:block}
 body.bella-page-glow.bella-studio-ready .glow-workbench .settings .style-group{display:none}
 body.bella-page-glow.bella-studio-ready .glow-workbench[data-view=models] .style-group:nth-child(1),
 body.bella-page-glow.bella-studio-ready .glow-workbench[data-view=hair] .style-group:nth-child(2),
 body.bella-page-glow.bella-studio-ready .glow-workbench[data-view=extras] .style-group:nth-child(3){display:block}
 body.bella-page-glow.bella-studio-ready .makeup-panel>.muted{display:none}
 body.bella-page-glow.bella-studio-ready .makeup-panel>.section-title{margin-bottom:4px;font-size:13px}
 body.bella-page-glow.bella-studio-ready .tool-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:5px}
 body.bella-page-glow.bella-studio-ready .tool{padding:6px 1px 5px;min-height:59px;font-size:9.5px;line-height:1.15;border-radius:11px}
 body.bella-page-glow.bella-studio-ready .tool .tool-icon{font-size:21px;margin-bottom:0}
 body.bella-page-glow.bella-studio-ready .palette-box{margin-top:8px;padding:8px;border-radius:12px}
 body.bella-page-glow.bella-studio-ready .palette-choices{margin-top:6px;gap:7px}
 body.bella-page-glow.bella-studio-ready .palette-btn{width:32px;height:32px}
 body.bella-page-glow.bella-studio-ready .palette-title{font-size:12px}
 body.bella-page-glow.bella-studio-ready .color-custom{margin-top:6px!important}
 body.bella-page-glow.bella-studio-ready .makeup-actions{margin-top:7px}
 body.bella-page-glow.bella-studio-ready .makeup-actions button{padding:7px 4px;font-size:11px;min-height:35px}
 body.bella-page-glow.bella-studio-ready .tip{margin-top:6px;padding:7px;font-size:10px}
 body.bella-page-glow.bella-studio-ready .extra-panel{margin-top:7px}
 body.bella-page-glow.bella-studio-ready .extra-panel .section-title{font-size:13px;margin-bottom:5px}
 body.bella-page-glow.bella-studio-ready .preset{padding:7px 2px;font-size:11px}
 body.bella-page-glow.bella-studio-ready .preset .emoji{font-size:17px}
 body.bella-page-glow.bella-studio-ready .main-stage{display:flex;flex-direction:column;align-items:stretch;padding:6px;background:linear-gradient(180deg,#fff,#fff7fc)}
 body.bella-page-glow.bella-studio-ready .stage-top{flex:none;padding:3px 5px 5px}
 body.bella-page-glow.bella-studio-ready .portrait-shell{width:min(100%,calc((100dvh - 185px)*.831));max-width:580px;max-height:calc(100dvh - 185px);margin:0 auto;flex:none;border-radius:16px}
 body.bella-page-glow.bella-studio-ready .portrait-svg{width:100%;height:auto;max-height:none}
 body.bella-page-glow.bella-studio-ready .stage-footer{padding:6px 5px 2px;gap:5px}
 body.bella-page-glow.bella-studio-ready .stage-footer .hint{font-size:11px}
 body.bella-page-glow.bella-studio-ready .foot-actions button{padding:5px 8px;font-size:10px}
 body.bella-page-glow.bella-studio-ready .controls-note{display:none}
}
@media screen and (min-width:700px) and (max-width:899px){
 body.bella-page-paper.bella-studio-ready .main,
 body.bella-page-glow.bella-studio-ready .layout{grid-template-columns:minmax(300px, .98fr) minmax(295px, 1.02fr)!important}
 .paper-quick-colours .swatches{grid-template-columns:repeat(6,minmax(0,1fr))}
 .paper-quick-colours .swatch{width:23px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .item-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.bella-page-glow.bella-studio-ready .tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 body.bella-page-glow.bella-studio-ready .tool{min-height:55px}
}
@media screen and (min-width:700px) and (max-height:620px){
 body.bella-page-paper.bella-studio-ready .brand h1,
 body.bella-page-glow.bella-studio-ready .logo h1{font-size:17px}
 body.bella-page-paper.bella-studio-ready .scene-card{width:min(100%,calc((100dvh - 158px)*.7742));max-height:calc(100dvh - 158px)}
 body.bella-page-glow.bella-studio-ready .portrait-shell{width:min(100%,calc((100dvh - 157px)*.831));max-height:calc(100dvh - 157px)}
 body.bella-page-paper.bella-studio-ready .stage-help{display:none}
 body.bella-page-paper.bella-studio-ready .quick-colour-title span{display:none}
 body.bella-page-glow.bella-studio-ready .stage-footer .hint{font-size:10px}
}
@media screen and (max-width:699px){
 /* On small phones retain the original single-column layout; make the doll
    sticky above its controls wherever the viewport permits. */
 body.bella-page-paper.bella-studio-ready .paper-workbench,
 body.bella-page-glow.bella-studio-ready .glow-workbench{display:contents}
 body.bella-page-paper.bella-studio-ready .studio-tabs,
 body.bella-page-glow.bella-studio-ready .studio-tabs{display:none}
 body.bella-page-paper.bella-studio-ready .paper-quick-colours{order:2;margin:0 12px 12px;width:calc(100% - 24px)}
 body.bella-page-paper.bella-studio-ready .paper-workbench .wardrobe{order:3}
 body.bella-page-paper.bella-studio-ready .paper-workbench .designer{order:4}
 body.bella-page-paper.bella-studio-ready .paper-workbench .designer .small-section:last-child{display:none}
 body.bella-page-paper.bella-studio-ready .paper-quick-colours .swatches{grid-template-columns:repeat(12,1fr)}
 body.bella-page-paper.bella-studio-ready .center{position:sticky;top:0;z-index:3;background:#fff4fb;padding:5px;border-radius:15px}
 body.bella-page-paper.bella-studio-ready .scene-card{width:min(66vw, calc((100dvh - 250px)*.7742));}
 body.bella-page-paper.bella-studio-ready .middle-bottom{display:none}
 body.bella-page-glow.bella-studio-ready .glow-workbench .makeup-panel{order:1}
 body.bella-page-glow.bella-studio-ready .glow-workbench .settings{order:2}
}
@media print{
 body.bella-page-paper.bella-studio-ready .paper-workbench,
 body.bella-page-glow.bella-studio-ready .glow-workbench{display:none!important}
 body.bella-page-paper.bella-studio-ready .center,
 body.bella-page-glow.bella-studio-ready .main-stage{display:block!important}
}
/* Final small-landscape refinements based on Bella's actual iPad clips. */
@media screen and (min-width:700px){
 body.bella-page-paper.bella-studio-ready .footer{display:none!important}
 body.bella-page-glow.bella-studio-ready .tool-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media screen and (min-width:700px) and (max-height:620px){
 body.bella-page-paper.bella-studio-ready .paper-quick-colours{padding:4px 7px}
 body.bella-page-paper.bella-studio-ready .paper-quick-colours .current-outfit{display:none}
 body.bella-page-paper.bella-studio-ready .paper-quick-colours .paint-card{margin-top:2px;padding:4px 7px}
 body.bella-page-paper.bella-studio-ready .paper-quick-colours .paint-head{margin-bottom:2px}
 body.bella-page-paper.bella-studio-ready .paper-quick-colours .paint-extras{margin-top:4px}
 body.bella-page-paper.bella-studio-ready .paper-quick-colours .swatch{max-width:26px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .category{min-height:39px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .category .emoji{font-size:17px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .categories{margin:3px 0 4px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .panel-title{margin-bottom:2px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .panel-title .eyebrow{display:none}
 body.bella-page-paper.bella-studio-ready .paper-workbench .panel-title h2{font-size:13px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .wardrobe-subtitle{display:none}
 body.bella-page-paper.bella-studio-ready .paper-workbench .item{min-height:74px;padding:2px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .item .preview{height:49px}
 body.bella-page-paper.bella-studio-ready .paper-workbench .item-name{font-size:9px}
 body.bella-page-glow.bella-studio-ready .tool{min-height:51px;padding:4px 1px;font-size:9px}
 body.bella-page-glow.bella-studio-ready .tool .tool-icon{font-size:18px}
 body.bella-page-glow.bella-studio-ready .palette-btn{width:27px;height:27px}
}