/* Warm drawing room. Layout coordinates belong to elements, never a bitmap skin. */
.playroom{--u:1;--ink:#603f32;--muted:#856556;--green:#b9593e;--green-soft:#ffe6c0;--white:#fffaf0;--paper:#fff5df;--line:#e8c69c;--left:calc(clamp(176px,16vw,248px)*var(--u));--right:calc(clamp(116px,9vw,156px)*var(--u));--header:calc(82px*var(--u));font:calc(15px*var(--u))/1.4 'PingFang SC','Microsoft YaHei',system-ui,sans-serif;color:var(--ink);height:100dvh;overflow:hidden;background:#f5dfb9;background-image:radial-gradient(#fff2d8 1.5px,transparent 1.5px);background-size:20px 20px}
.playroom *{box-sizing:border-box}.playroom [hidden]{display:none!important}.playroom button{min-width:44px;min-height:44px;border:2px solid var(--line);border-radius:16px;padding:8px 12px;background:#fff9e9;color:var(--ink);font:inherit;font-weight:650;line-height:1.25;box-shadow:0 3px 0 #c98f6533;transition:background .12s,box-shadow .12s}.playroom button:hover:not(:disabled){background:#ffe3b2;border-color:#cc8a56}.playroom button:active:not(:disabled){box-shadow:0 1px 0 #b77e4c33;background:#ffd495}.playroom button:disabled{opacity:.46;cursor:default}.playroom button:focus-visible,.playroom input:focus-visible,.playroom textarea:focus-visible{outline:4px solid #a55339;outline-offset:3px}.playroom button[aria-pressed=true]{background:#ffdb97;border-color:#bb6b39;box-shadow:inset 0 0 0 2px #fff7de,0 3px 0 #b5773f44}.playroom button.primary{background:#bf603f;color:#fffaf0;border-color:#9d4931;box-shadow:0 4px 0 #8c432c;padding:12px 20px}.playroom button.primary:hover{background:#a95236}.playroom .playful-icon{width:calc(38px*var(--u));height:calc(38px*var(--u));flex:none;display:block;overflow:visible}
.playroom .app-header{height:var(--header);padding:8px 16px;gap:12px;background:#fff3da;border:0;border-bottom:3px solid #e6bd87;box-shadow:0 3px 0 #ffffff77;position:relative;z-index:3}.playroom .brand{min-width:142px;gap:8px;color:var(--ink)}.playroom .brand>.playful-icon{height:56px;width:56px}.playroom .brand strong{font-size:calc(24px*var(--u));letter-spacing:3px;font-weight:850}.playroom .brand small{font-size:12px;letter-spacing:1px;color:#926341}.playroom .header-actions{flex:1;justify-content:flex-end;gap:8px;min-width:0}.playroom .header-actions button{flex-direction:column;gap:0;font-size:calc(14px*var(--u));min-width:calc(66px*var(--u));height:calc(64px*var(--u));padding:3px 8px;background:#fffaf0;border-color:#eacaa0}.playroom .header-actions #save{background:#f6c979;border-color:#d2984f}.playroom .header-actions button .playful-icon{width:calc(32px*var(--u));height:calc(32px*var(--u))}.playroom .header-actions button svg{width:32px;height:32px}.playroom .edit-commands,.playroom .command-strip,.playroom .rail-bottom{display:none}.playroom .workspace{height:calc(100dvh - var(--header));min-height:0;display:grid;grid-template-columns:var(--left) minmax(0,1fr) var(--right);gap:12px;padding:12px;position:relative}
.playroom .classic-left{grid-column:1;grid-row:1;min-height:0;display:flex;flex-direction:column;gap:10px;border:2px solid #d9ae77;border-radius:24px;background:#fff1d4;padding:10px;box-shadow:0 5px 0 #bf8a5033;overflow:hidden}.playroom .classic-left h2{font-size:calc(16px*var(--u));text-align:center;flex:none;margin:0}.playroom .brush-box{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:8px;overflow-y:auto;min-height:0;padding:3px 4px 7px;scrollbar-width:thin;scrollbar-color:#ce9d72 #fff1d4}.playroom .brush-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:0 4px;min-width:0;padding:4px;min-height:calc(80px*var(--u));background:#fffdf5;border-color:#e8d4af;font-size:calc(14px*var(--u));border-radius:16px;position:relative}.playroom .brush-card>.playful-icon{width:calc(34px*var(--u));height:calc(38px*var(--u));grid-row:1}.playroom .brush-card>span:not(.brush-sample){font-size:calc(14px*var(--u));text-align:left;word-break:keep-all}.playroom .brush-card .brush-sample{grid-column:1/-1;display:block;min-width:0;height:calc(24px*var(--u))}.playroom .brush-sample canvas{display:block;width:100%;height:100%;object-fit:contain}.playroom .brush-card[aria-pressed=true]{background:#ffdf9e;border:2px solid #bb6b39}.playroom .brush-card[aria-pressed=true]:after{content:'✓';position:absolute;right:2px;top:0;color:#9d542f;font-size:15px;font-weight:900}.playroom .left-actions{margin-top:auto;display:grid;gap:8px;flex:none}.playroom .left-actions button{width:100%;min-height:48px;padding:4px;gap:8px}.playroom .left-actions .playful-icon{width:34px;height:34px}.playroom .subtool-box{overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:0}.playroom .subtool-card{min-height:52px}.playroom .tool-coach{padding:12px;background:#fff9e9;border:2px dashed #dcb384;border-radius:18px;color:#765341;font-size:calc(14px*var(--u));line-height:1.7}
.playroom .classic-colors{flex:none;width:100%;padding:8px;background:#f9ddbb;border:2px solid #dbb58b;border-radius:18px}.playroom .color-pair{display:flex;align-items:center;gap:6px;justify-content:center;height:58px}.playroom .color-pair button{min-width:44px;height:48px;box-shadow:inset 0 0 0 3px #fffdf0,0 3px 0 #bd8b6744;border:2px solid #be946d;border-radius:14px}.playroom #foreground-palette{width:54px;height:54px}.playroom #background-palette{width:44px;height:44px}.playroom #swap-colors{padding:0;background:#fff1cd;font-size:26px;box-shadow:none}.playroom .color-history{display:flex;justify-content:center;gap:6px}.playroom .color-history:empty{display:none}.playroom .color-history button{min-width:44px;width:44px;height:44px;padding:0;border:5px solid #fff5df}.playroom #palette-open{width:100%;margin-top:6px;border:0;background:transparent;box-shadow:none;padding:4px;font-size:14px}.playroom #palette-open:before{content:'🎨';font-size:20px}
.playroom .tool-rail{grid-column:3;grid-row:1;background:#edcca9;border:2px solid #cc9d73;border-radius:24px;padding:10px 8px;gap:10px;min-height:0;display:flex;flex-direction:column;box-shadow:0 5px 0 #b8835733}.playroom .tool-rail #tools{display:flex;flex-direction:column;gap:8px;min-height:0;width:100%;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#bd8d69 #edcca9;padding:3px}.playroom .tool-button{width:100%;flex:1;min-height:calc(62px*var(--u));height:auto;max-height:calc(108px*var(--u));display:flex;flex-direction:column;gap:1px;border-radius:18px;padding:4px;background:#fff1dd;border:2px solid #ddb58e;color:var(--ink);font-size:calc(14px*var(--u))}.playroom .tool-button .playful-icon{width:calc(40px*var(--u));height:calc(40px*var(--u))}.playroom .tool-button[aria-pressed=true]:before{display:none}.playroom .tool-page{flex:none;width:100%;padding:8px 3px;display:flex;flex-direction:column;gap:2px;font-size:calc(14px*var(--u));background:#fff2d1}.playroom .tool-page small{font-size:12px;color:#896443}
.playroom .studio{grid-column:2;grid-row:1;min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px;background:transparent}.playroom .canvas-topbar{display:flex;align-items:center;gap:10px;flex:none;min-height:48px}.playroom .workspace-tabs{display:flex;gap:6px;flex:none}.playroom .workspace-tabs button{font-size:calc(14px*var(--u));padding:8px 14px;border-color:#d6b185;background:#fff4df}.playroom .canvas-welcome{flex:1;text-align:center;font-size:14px;color:#966944;white-space:nowrap}.playroom .zoom-controls{margin-left:auto;gap:3px}.playroom .zoom-controls button{width:44px;height:44px;font-size:18px;padding:0;border:1px solid #d7b790;background:#fff2d9}.playroom .zoom-controls #fit{font-size:14px;width:52px}.playroom #zoom-value{font-size:12px;min-width:36px}.playroom .viewport{flex:1;min-height:100px!important;min-width:0;max-height:none;height:auto;margin:0;padding:14px;background:#ead1ab;background-image:none;border:3px solid #fff9ed;border-radius:20px;box-shadow:0 0 0 2px #d1a36e,inset 0 2px 8px #9e704626;overflow:auto}.playroom .canvas-sheet{box-shadow:0 4px 12px #86573226}.playroom .canvas-footer{height:24px;flex:none;margin:0;padding:0 4px;font-size:12px;color:#78573e;gap:12px;overflow:hidden}.playroom #tool-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.playroom .muted{color:#8d6e50}.playroom .status-dot{background:#b1763b}
.playroom .quick-palette{display:flex;gap:8px;align-items:center;flex:none;min-width:0;height:64px;padding:2px 4px;background:#fff0d5;border:2px solid #dfbd8e;border-radius:20px}.playroom .swatches{display:flex;flex-wrap:nowrap;justify-content:flex-start;min-width:0;overflow-x:auto;gap:4px;padding:5px 3px;scrollbar-width:thin;scrollbar-color:#c5976d transparent}.playroom .swatch{width:44px;height:44px;min-width:44px;min-height:44px;flex:none;border:5px solid #fff7e8;border-radius:50%;padding:0;box-shadow:0 1px 3px #6a483933}.playroom .swatch[aria-pressed=true]{box-shadow:0 0 0 2px #874b30;outline:2px solid #fff8e7;outline-offset:-6px;transform:none}.playroom .swatch:hover{transform:none;filter:brightness(1.07)}.playroom .more-colors{border:0;background:#fff0d5;box-shadow:none;gap:4px;min-width:76px;font-size:12px;padding:2px;display:flex;flex-direction:column;flex:none}.playroom .more-colors .playful-icon{width:28px;height:28px}
.playroom .brush-inspector{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.playroom #active-brush-preview{width:90px;flex:none}.playroom #active-brush-preview canvas{width:100%;height:48px;object-fit:contain}.playroom #active-brush-preview .playful-icon{width:48px;height:48px}.playroom .brush-inspector strong{display:block;font-size:calc(17px*var(--u))}.playroom .brush-inspector span{display:block;font-size:12px;color:#8f674c}.playroom #brush-choose,.playroom .divider{display:none}
.playroom input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;min-width:80px;min-height:44px;height:44px;cursor:pointer;margin:0;accent-color:#c47143}.playroom input[type=range]::-webkit-slider-runnable-track{height:12px;background:#efd4a6;border:2px solid #d2a775;border-radius:12px}.playroom input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border:3px solid #9f5835;border-radius:50%;background:#f6bb65;box-shadow:inset 0 0 0 3px #ffe9ae,0 2px 1px #98623544}.playroom input[type=range]::-moz-range-track{height:10px;background:#efd4a6;border:2px solid #d2a775;border-radius:12px}.playroom input[type=range]::-moz-range-thumb{width:24px;height:24px;border:3px solid #9f5835;border-radius:50%;background:#f6bb65}
.playroom dialog{color:var(--ink);background:#fff6e2;border:3px solid #c79460;border-radius:28px;padding:24px;width:min(660px,calc(100vw - 36px));max-height:calc(100dvh - 36px);overflow:auto;box-shadow:0 9px 0 #89583c33,0 20px 80px #6a493744;font-size:calc(15px*var(--u))}.playroom dialog::backdrop{background:#65493466;backdrop-filter:blur(3px)}.playroom dialog h2{font-size:calc(24px*var(--u));color:#8b4d31;margin:0 0 18px}.playroom dialog p{font-size:14px;color:#835e46;line-height:1.7;margin:10px 0 18px}.playroom dialog label{font-size:calc(15px*var(--u));color:var(--ink);margin:10px 0;display:block}.playroom .wide-dialog{width:min(980px,calc(100vw - 36px))}.playroom .dialog-actions{position:sticky;bottom:-24px;background:#fff6e2;z-index:2;padding:14px 0 0;display:flex;justify-content:flex-end;gap:12px;margin-top:18px;flex:none}.playroom dialog input:not([type=checkbox]):not([type=range]):not([type=file]):not([type=color]),.playroom textarea{border:2px solid #d9b78d;border-radius:12px;background:#fffdf6;color:var(--ink);font:inherit;padding:10px 12px;min-height:44px}.playroom input[type=checkbox]{appearance:none;-webkit-appearance:none;width:28px;height:28px;min-width:28px;min-height:28px;border:2px solid #ba8e5f;border-radius:8px;background:#fffaf0;vertical-align:middle;margin:0 7px 0 0;display:inline-grid;place-content:center}.playroom input[type=checkbox]:checked{background:#c97c44;border-color:#955330}.playroom input[type=checkbox]:checked:after{content:'✓';color:#fff;font-size:22px;font-weight:bold}.playroom label:has(input[type=checkbox]){min-height:44px;display:flex;align-items:center;cursor:pointer}.playroom .choice-source{display:none!important}.playroom .choice-button{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;min-width:120px;border-color:#d9ad7a;background:#fff0d0;text-align:left;font-size:calc(15px*var(--u));max-width:100%;font-weight:650}.playroom .choice-arrow{font-size:20px;color:#a2673d}.playroom .choice-dialog{width:min(860px,calc(100vw - 36px))}.playroom .choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(144px,1fr));gap:12px;max-height:60vh;overflow:auto;padding:5px}.playroom .choice-card{display:flex;flex-direction:column;gap:8px;min-height:132px;min-width:0;background:#fffaf0;padding:14px}.playroom .choice-card>span:last-child{overflow-wrap:anywhere}.playroom .choice-picture,.playroom .choice-card>img{height:64px;width:72px;object-fit:cover;display:grid;place-items:center;border-radius:12px}.playroom .choice-picture svg{width:64px;height:64px}.playroom .font-sample{font-size:32px;line-height:1;color:#9c563b;max-width:100%;max-height:100%;overflow:hidden;display:grid;place-items:center}.playroom #choice-search{width:100%;margin-bottom:16px}.playroom .number-stepper{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-left:6px}.playroom .number-stepper button{width:44px;padding:0;font-size:24px;background:#ffe6b9}.playroom .number-stepper input[type=number]{width:72px;text-align:center;appearance:textfield;-moz-appearance:textfield;padding:6px}.playroom input[type=number]::-webkit-inner-spin-button,.playroom input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.playroom .tool-settings .detail-bar{display:flex;flex-wrap:wrap;gap:16px;padding:0;background:transparent;min-height:0;overflow:visible;white-space:normal;align-items:flex-start}.playroom .detail-bar>label,.playroom .creative-options>label{min-height:76px;background:#ffefd1;border:2px solid #e3c298;border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;font-size:15px}.playroom .detail-bar input[type=range]{width:170px}.playroom .creative-options{display:contents}.playroom .detail-bar select{max-width:none}.playroom #option-help{display:none}.playroom .dialog-grid,.playroom .more-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.playroom .dialog-grid button,.playroom .more-actions button{min-height:58px;background:#fff0d1;border:2px solid #dfb580;font-size:15px}.playroom .document-name input{width:100%;max-width:none}.playroom .document-name{display:flex}.playroom #save-state{font-size:13px}
.playroom .palette-editor{display:grid;grid-template-columns:256px 1fr;gap:24px}.playroom #color-plane{width:256px;height:192px;border:3px solid #c39462;border-radius:16px;touch-action:none;cursor:crosshair}.playroom .palette-editor label{display:flex;align-items:center;gap:8px}.playroom .palette-editor .number-stepper{margin-left:auto}.playroom #color-preview{height:50px;border:4px solid #fff;border-radius:14px;box-shadow:0 0 0 2px #d3b38c}.playroom #color-alpha-value{min-width:40px}.playroom .palette-editor input[type=range]{width:100%}.playroom #color-value{max-width:190px}
.playroom .text-layout{display:grid;grid-template-columns:minmax(310px,1fr) 1fr;gap:24px}.playroom .text-layout textarea{width:100%;resize:vertical;min-height:90px}.playroom .text-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.playroom .text-style{padding:8px;border:2px solid #dec299;border-radius:12px;margin:0;gap:6px;background:#fffaf0;font-size:14px;min-height:54px}.playroom .text-style:has(input:checked){background:#ffdda3;border-color:#c88449}.playroom .text-style-icon{width:28px;height:28px;display:grid;place-items:center;font:bold 24px Georgia;background:none!important}.playroom .text-texture-actions{display:flex;gap:8px;flex-wrap:wrap}.playroom .text-texture-actions button{font-size:14px}.playroom .effect-preview{background:repeating-conic-gradient(#f1eadb 0% 25%,#fffdf6 0% 50%) 50%/16px 16px;border:2px solid #d8b58e;border-radius:18px;min-height:260px;align-self:start;padding:16px;max-width:100%;color:#82614a}.playroom .effect-preview canvas{max-width:100%;max-height:320px;object-fit:contain}.playroom #text-preview canvas{max-width:100%;height:auto}.playroom #text-error{color:#a24532}.playroom .effect-layout{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px}.playroom .darkroom-categories{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.playroom .darkroom-categories button{font-size:14px;padding:10px}.playroom #effect-parameters label{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.playroom #effect-parameters input{width:170px}.playroom #function-modes fieldset{border:2px solid #e0bd91;border-radius:14px;margin:10px 0;padding:12px}.playroom #function-modes label{display:flex;align-items:center;gap:12px;font-size:14px}.playroom #function-modes input{width:150px}.playroom #fractal-bounds{display:grid;grid-template-columns:1fr 1fr;gap:8px}.playroom #fractal-bounds label{display:flex;flex-direction:column}.playroom #fractal-bounds .number-stepper{margin:0}.playroom #fractal-bounds .number-stepper input{width:54px}.playroom .fractal-style{display:flex;gap:6px;margin:12px 0}.playroom #fractal-preview canvas{max-width:100%;height:auto}.playroom #fractal-note{font-size:14px}.playroom #fractal-style{font-size:14px}
.playroom .right-panel{display:none}.playroom.library-open .right-panel{display:flex;flex-direction:column;position:absolute;z-index:4;left:calc(var(--left) + 24px);right:calc(var(--right) + 24px);top:72px;bottom:18px;background:#fff3d8;border:3px solid #ce9d69;border-radius:24px;padding:16px;min-height:0;box-shadow:0 12px 32px #95632d33}.playroom .library{padding:0;min-height:0;flex:1;overflow:hidden}.playroom .panel-heading h2{font-size:20px}.playroom .panel-heading>span{font-size:13px}.playroom .panel-description{font-size:14px;margin-top:8px}.playroom .categories{gap:6px;margin:14px 0;flex:none}.playroom .categories button{font-size:14px;min-height:44px;padding:8px 12px;color:var(--ink);border:2px solid #dfb884;background:#fffaf0}.playroom .asset-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px;min-height:100px;max-height:none;overflow-y:auto;flex:1;padding:4px}.playroom .asset{min-height:144px;background:#fffaf1;border:2px solid #e3c596;border-radius:18px;padding:12px 8px;gap:6px}.playroom .asset img{height:90px;width:105px}.playroom .asset span{font-size:14px;color:#714d38}.playroom .asset .asset-add{opacity:1;width:24px;height:24px;background:#f2c779;color:#7f482d}.playroom .library-tip{display:none}.playroom .layers-panel{padding:0;min-height:0;max-height:none;border:0}.playroom #layer-list{max-height:200px;overflow:auto;margin:12px 0;gap:8px}.playroom .layer-row{min-height:58px;border:2px solid #e3c397;border-radius:14px;background:#fff8e9}.playroom .layer-row.active{background:#ffe3b1;border-color:#c4844e}.playroom .layer-name{font-size:15px;min-height:44px;box-shadow:none;border:0;background:transparent}.playroom .layer-thumb{width:66px;height:44px;border-radius:8px}.playroom .eye-button{min-height:44px;min-width:44px}.playroom .layer-actions{gap:8px;margin-bottom:18px}.playroom .layer-actions button{min-height:44px;min-width:44px;font-size:14px}.playroom #layer-dialog{width:min(860px,calc(100vw - 36px))}.playroom #current-layer-name{font-weight:bold}.playroom .music-dialog{width:min(520px,calc(100vw - 36px))}.playroom .music-tracks,.playroom .music-transport{display:flex;gap:10px;justify-content:center;align-items:center;margin:14px 0}.playroom .music-transport button{min-height:64px;flex:1;background:#fbd694;font-size:18px}.playroom .music-dialog input[type=range]{width:220px}.playroom #music-volume-value,.playroom #ui-sound-volume-value{margin-left:12px}.playroom #toast{font-size:16px;background:#70462f;color:#fff8eb;max-width:calc(100vw - 40px);bottom:32px;padding:14px 22px;border:2px solid #e3b67f;border-radius:18px;z-index:30}.playroom .display-options{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}.playroom .display-options button{min-height:68px;min-width:120px}.playroom #display-note{font-size:14px}.playroom .display-dialog h3{font-size:17px;margin-top:22px}
@media(min-width:1850px){.playroom .brush-card{min-height:calc(98px*var(--u))}.playroom .brush-card>.playful-icon{width:calc(46px*var(--u));height:calc(46px*var(--u))}.playroom .brush-inspector span{font-size:14px}.playroom .tool-button .playful-icon{width:calc(52px*var(--u));height:calc(52px*var(--u))}}
@media(max-width:1250px){.playroom .brand{min-width:102px}.playroom .brand>.playful-icon{width:42px;height:42px}.playroom .brand small{display:none}.playroom .header-actions{gap:5px}.playroom .header-actions button{min-width:58px;padding:3px 5px;font-size:14px}.playroom .canvas-welcome{display:none}.playroom .canvas-topbar{gap:4px}.playroom .workspace-tabs button{padding:8px 10px}.playroom .brush-inspector{min-width:100px}.playroom #active-brush-preview{display:none}.playroom .brush-inspector span{display:none}.playroom #zoom-value{display:none}.playroom .brush-card{grid-template-columns:1fr;justify-items:center;min-height:84px}.playroom .brush-card>.playful-icon{height:32px;width:32px}.playroom .brush-card>span:not(.brush-sample){text-align:center}.playroom .brush-card .brush-sample{height:18px;width:100%}}
@media(max-width:980px){.playroom .app-header{padding:8px}.playroom .header-actions button{min-width:50px;font-size:12px}.playroom .brand{min-width:84px}.playroom .brand>.playful-icon{display:none}.playroom .workspace{gap:8px;padding:8px}.playroom .classic-left{padding:8px}.playroom .canvas-topbar .zoom-controls{gap:2px}.playroom .workspace-tabs{gap:3px}.playroom .workspace-tabs button{font-size:14px;padding:7px}.playroom .zoom-controls #fit{display:none}.playroom .brush-inspector strong{font-size:15px}.playroom.library-open .right-panel{left:calc(var(--left) + 16px);right:calc(var(--right) + 16px)}.playroom .text-layout{grid-template-columns:minmax(280px,1fr) 1fr;gap:16px}}
@media(max-height:740px){.playroom{--header:72px}.playroom .app-header{height:72px}.playroom .header-actions button{height:58px}.playroom .tool-button{min-height:54px}.playroom .tool-button .playful-icon{width:32px;height:32px}.playroom .quick-palette{height:58px}.playroom .workspace{padding-top:8px;padding-bottom:8px}.playroom .canvas-topbar{min-height:44px}.playroom .classic-left{gap:8px}.playroom .brush-card{min-height:78px}.playroom .viewport{padding:8px}.playroom dialog{padding:20px}.playroom .dialog-actions{bottom:-20px}.playroom dialog h2{font-size:22px;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.playroom *{transition:none!important;scroll-behavior:auto!important}}
.playroom{--left:calc(clamp(200px,16vw,248px)*var(--u))}.playroom #background-picker-open{min-height:48px}.playroom .choice-picture .playful-icon{width:64px;height:64px}
@media(max-width:980px){.playroom .header-actions button{font-size:14px;min-width:58px}.playroom .header-actions #display-open{min-width:70px}.playroom .header-actions{gap:4px}.playroom .brand{min-width:64px}.playroom .brand strong{font-size:22px}}
@media(max-height:740px){.playroom{--header:80px}.playroom .app-header{height:80px}.playroom .header-actions button{height:64px}.playroom .brush-box{gap:6px}.playroom .brush-card{grid-template-columns:auto 1fr;grid-template-rows:auto auto;min-height:60px;padding:3px;gap:0}.playroom .brush-card>.playful-icon{width:32px;height:32px}.playroom .brush-card>span:not(.brush-sample){font-size:14px;word-break:normal}.playroom .brush-card .brush-sample{height:16px}.playroom #palette-open{display:none}.playroom .classic-colors{padding:6px}.playroom .classic-colors:after{content:'点颜色，调一调';display:block;text-align:center;font-size:12px;color:#865b3c;margin-top:4px}.playroom .left-actions{gap:6px}}

.playroom .choice-card{position:relative}.playroom .choice-card[aria-pressed=true]:after{content:"✓";position:absolute;right:12px;top:8px;color:#8a4e2d;font-size:22px}.playroom .text-result{min-width:0}.playroom .text-result .effect-preview{min-height:220px}.playroom .text-result .text-texture-actions{margin-top:12px}.playroom .detail-bar>label:has(#paint-on-layer){flex-direction:row;align-items:center}
.playroom{--left:calc(clamp(216px,16vw,248px)*var(--u))}
.playroom canvas:focus-visible{outline:3px solid #b87b48;outline-offset:1px}
/* The library is a shelf in the layout: it never overlaps the drawing surface. */
.playroom .workspace-tabs button{display:flex;align-items:center;gap:5px;padding:5px 9px}.playroom .workspace-tabs .playful-icon{width:30px;height:30px}
.playroom .subtool-card{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:76px;text-align:left;flex:none}.playroom .subtool-card .choice-picture{width:64px;height:54px;flex:none}.playroom .subtool-card svg{width:100%;height:100%}.playroom .subtool-card[aria-pressed=true]:after{content:'✓';margin-left:auto}
.playroom .choice-button>.choice-picture{width:32px;height:32px;flex:none}.playroom .choice-button>.choice-picture svg,.playroom .choice-button>.choice-picture img{width:100%;height:100%;object-fit:contain}
.playroom.library-open .right-panel{position:static;inset:auto;z-index:auto;display:flex;flex:none;width:100%;height:clamp(190px,24vh,290px);padding:8px 10px;border-width:2px;border-radius:18px;box-shadow:0 3px 0 #bd875433;gap:4px;overflow:hidden}
.playroom .right-panel{position:relative!important}
.playroom .library{display:flex;flex-direction:column;position:static}.playroom .library .panel-heading{display:none}.playroom .panel-description{display:none}.playroom .categories{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;margin:0 110px 4px 0;min-height:48px;max-height:48px;padding:0 0 4px}.playroom .categories button{white-space:nowrap;flex:none;padding:5px 8px;font-size:13px}.playroom .categories .playful-icon{width:25px;height:25px}
.playroom .asset-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:116px;grid-template-rows:1fr;gap:8px;overflow-x:auto;overflow-y:hidden;min-height:90px;align-items:stretch;padding:2px 2px 8px}.playroom .asset{min-height:0;padding:4px;display:flex;flex-direction:column;justify-content:center}.playroom .asset img{height:clamp(58px,9vh,120px);width:100%;object-fit:contain}.playroom .asset span{font-size:12px}.playroom .asset .asset-add{display:none}.playroom .asset[aria-pressed=true]{background:#ffe1a8;border-color:#b26c40}
@media(max-height:760px){.playroom.library-open .right-panel{height:180px}.playroom.library-open .brush-inspector{display:none}.playroom.library-open .quick-palette{gap:3px}.playroom.library-open .quick-palette button{min-width:36px}.playroom.library-open .canvas-welcome{display:none}}
@media(max-width:1100px){.playroom .canvas-welcome{display:none}.playroom .workspace-tabs button{padding:4px;gap:2px}.playroom .workspace-tabs .playful-icon{width:25px;height:25px}}

.playroom .brand strong{font-size:calc(21px*var(--u));letter-spacing:1px}

.playroom .picture-action{gap:8px}.playroom .picture-action .playful-icon{width:32px;height:32px}.playroom .choice-picture canvas{width:100%;height:100%;object-fit:contain;border-radius:9px}.playroom .darkroom-categories .picture-action{flex-direction:column;gap:3px}
/* One reserved bottom shelf; changing tools or opening assets never resizes paper. */

.playroom .tool-dock .quick-palette{height:58px;min-height:0}

.playroom #ratio-value{font-size:12px;font-variant-numeric:tabular-nums;min-width:28px}

.playroom.library-open .tool-dock .quick-palette{display:none}

.playroom.library-open .tool-dock .right-panel{height:auto;width:100%;min-height:0;inset:auto;padding:4px 8px;gap:2px}
.playroom .tool-dock .categories{min-height:44px;max-height:44px;margin-bottom:1px}
.playroom .tool-dock .asset-grid{min-height:0;grid-auto-columns:110px;padding-bottom:5px;gap:6px}
.playroom .tool-dock .asset img{height:64px;min-height:0;flex:1;object-fit:contain}
.playroom .tool-dock .asset span{flex:none;line-height:18px;white-space:nowrap}
.playroom .tool-dock .asset{padding:2px;gap:0}
.playroom .tool-coach{white-space:pre-line}
.playroom #layer-dialog .layers-panel{height:auto;min-height:0;display:block}
.playroom #layer-dialog .panel-heading h2{display:none}
.playroom #layer-dialog .panel-heading{justify-content:flex-end}
.playroom #layer-dialog #layer-list{display:flex;flex-direction:column;max-height:34vh;min-height:120px;margin:8px 0;overflow:auto}
.playroom #layer-dialog .layer-row{display:flex;align-items:center;gap:10px;padding:7px;flex:none;min-height:78px}
.playroom #layer-dialog .layer-name{display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:12px;flex:1;min-width:0;padding:4px}
.playroom #layer-dialog .layer-name span{overflow-wrap:anywhere}
.playroom #layer-dialog .layer-thumb{width:88px;height:58px;flex:none;background:repeating-conic-gradient(#f1e3cc 0% 25%,#fff9ed 0% 50%) 50%/14px 14px;object-fit:contain}
.playroom .layer-row.active .layer-name:after{content:'✓ 已选';white-space:nowrap;font-size:12px;margin-left:auto}
.playroom #layer-dialog .eye-button{font-size:13px;gap:4px;flex:none;padding:5px;min-width:76px}
.playroom .layer-guide{padding:10px 14px;border-radius:14px;background:#ffebc7}
.playroom #layer-dialog .layer-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.playroom #layer-dialog .layer-actions button{min-height:54px;gap:6px;flex:1;white-space:nowrap}
.playroom #layer-dialog .layer-actions svg{width:28px;height:28px}
.playroom #current-layer-name{padding:6px 0;margin:0}
.playroom .layer-advanced{border-top:2px solid #e6c79c;margin-top:12px;padding-top:8px}
.playroom .layer-advanced summary{cursor:pointer;min-height:44px;padding:10px;color:#805735;font-weight:650}
.playroom .layer-advanced .dialog-grid{margin-top:10px}
@media(max-height:740px){.playroom .tool-dock .asset img{height:48px}}
@media(max-width:1100px){.playroom #ratio-value{display:none}}
.playroom .subtool-card>.playful-icon{width:58px;height:52px;flex:none}
.playroom .subtool-card>span{min-width:0}
.playroom .subtool-box{overflow-x:hidden}
.playroom .tool-dock .categories{overflow-y:hidden}

.playroom #selection-reset{background:#ffe0a2;border-color:#b46f38;font-size:13px}
.playroom #selection-reset span{text-align:left}

/* Direct paper controls: two mutually exclusive illustrated stroke buttons. */
#toast{display:none!important}

#library-groups{display:none}
.playroom.library-open #library-groups:not(:empty){display:flex;flex-direction:column;gap:7px;min-height:0;overflow:auto;flex:1}
.playroom.library-open .classic-left:has(#library-groups:not(:empty)) .brush-box,.playroom.library-open .classic-left:has(#library-groups:not(:empty)) .subtool-box{display:none}
.playroom #library-groups img{width:58px;height:46px;object-fit:contain;border-radius:9px}
.playroom #library-groups .subtool-card{min-height:64px;display:flex;flex-direction:row;flex:none}

.deprecated-stroke-control{display:none!important}
.playroom .canvas-footer #tool-hint{display:block;flex:1;min-width:0;text-align:right}

/* A single responsive dock reserves the same space for painting and browsing. */

.playroom .tool-dock .quick-palette{height:100%}

.playroom .tool-dock .asset-grid{grid-auto-flow:row;grid-template-columns:repeat(var(--shelf-columns,4),minmax(0,1fr));grid-auto-columns:auto;grid-template-rows:minmax(0,1fr);overflow:hidden;gap:clamp(6px,.7vw,12px)}
.playroom .tool-dock .asset{min-width:0;padding:4px;overflow:hidden}
.playroom .tool-dock .asset img{height:0;width:100%;flex:1;min-height:32px;object-fit:contain}
.playroom .tool-dock .asset span{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;font-size:clamp(12px,.8vw,16px);max-width:100%}
.playroom .tool-dock .categories{margin-right:0}
.playroom .tool-dock .categories button{font-size:clamp(12px,.85vw,16px)}

.playroom .tool-dock .asset .asset-add{display:none}

.playroom #effect-progress{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;min-width:0}
.playroom #effect-progress button{font-size:13px;white-space:nowrap}
.playroom.processing-effect .canvas-welcome,.playroom.processing-effect .zoom-controls{display:none}
/* A stable, labelled color station; recent colors no longer grow two extra rows. */
.playroom .classic-colors{padding:8px;display:flex;flex-direction:column;gap:5px}
.playroom .classic-colors h3{margin:0;text-align:center;font-size:15px}
.playroom .color-pair{display:grid;grid-template-columns:minmax(44px,1fr) minmax(44px,1fr) 44px;gap:4px;height:66px;align-items:center}
.playroom .color-slot{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;min-width:0}
.playroom .color-slot #foreground-palette,.playroom .color-slot #background-palette{height:46px;width:100%;max-width:66px;min-width:44px}
.playroom #swap-colors{width:44px;height:44px;margin-bottom:19px}
.playroom #foreground-history{height:44px;min-height:44px;display:flex;align-items:center;overflow:hidden;gap:4px}
.playroom #foreground-history>span{font-size:11px;color:#8c6b55;text-align:center;line-height:1.5}
.playroom #foreground-history button{width:44px;flex:none;border-width:4px;border-radius:50%}
.playroom #palette-open{min-height:44px;margin:0;padding:3px;font-size:13px;background:#ffebc7;border:1px solid #dbb58b}
.playroom #palette-open:before{content:none}
.playroom .classic-palette-dialog{width:min(780px,calc(100vw - 36px))}
.playroom .palette-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:20px}
.playroom .preset-color{padding:5px;min-width:0;min-height:64px;display:flex;align-items:center;gap:6px;font-size:12px}
.playroom .preset-color i{width:30px;height:34px;background:var(--preset);border-radius:12px;border:2px solid #c9a983;flex:none}
.playroom .palette-editor{grid-template-columns:minmax(220px,1.1fr) minmax(160px,1fr);gap:22px}
.playroom #color-plane{width:100%;height:auto;aspect-ratio:4/3}
.playroom #color-preview{height:76px;margin-bottom:14px;border-radius:16px}
.playroom .color-numbers summary{cursor:pointer;min-height:44px;padding:10px 0;font-size:13px}
.playroom .color-numbers label{margin:4px 0}
@media(max-height:740px){.playroom .classic-palette-dialog{padding:16px}.playroom .palette-presets{gap:5px;margin-bottom:12px}.playroom .preset-color{min-height:48px}.playroom .classic-palette-dialog h2{margin-bottom:12px}.playroom .classic-palette-dialog .dialog-actions{bottom:-16px}.playroom #color-plane{max-height:170px;object-fit:fill}}

.playroom .fairy-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.playroom .fairy-modes .subtool-card{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:5px 2px;min-height:70px;font-size:12px;min-width:0}
.playroom .fairy-modes .playful-icon{width:28px;height:28px}
.playroom .fairy-modes .subtool-card[aria-pressed=true]:after{display:none}

/* v1.6: keep the paper dominant at 1080p while preserving 44px child targets. */
.playroom{--header:clamp(64px,6.4dvh,70px)}
.playroom .app-header{height:var(--header);padding:5px 12px;gap:8px}
.playroom .brand>.playful-icon{width:46px;height:46px}
.playroom .brand strong{font-size:calc(19px*var(--u))}
.playroom .brand small{font-size:11px}
.playroom .header-actions{gap:5px}
.playroom .header-actions button{height:54px;min-width:calc(60px*var(--u));font-size:calc(12px*var(--u));padding:2px 6px}
.playroom .header-actions button .playful-icon{width:27px;height:27px}
.playroom .workspace{gap:8px;padding:8px}
.playroom .studio{gap:5px}
.playroom .canvas-topbar{min-height:44px;gap:6px}
.playroom .workspace-tabs{gap:4px}
.playroom .workspace-tabs button{min-height:44px;padding:3px 8px}
.playroom .workspace-tabs .playful-icon{width:27px;height:27px}
.playroom .viewport{padding:8px;border-radius:16px}
.playroom .canvas-footer{height:20px;font-size:11px}

.playroom .tool-dock .quick-palette{height:52px;padding-block:0}

@media(max-height:760px){.playroom .canvas-welcome{display:none}.playroom .tool-dock .asset img{height:42px}}

/* v1.6.2: preserve the v1.6.0 paper area; controls scroll sideways as one row. */
.playroom #layer-dialog .layer-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.playroom #layer-dialog .layer-actions button{flex-direction:column;white-space:normal;line-height:1.25;padding:4px;gap:2px;min-width:0}

.playroom #library-groups .subtool-card{white-space:normal;line-height:1.3}
.playroom[data-library-surface=fairy] .categories button{display:none}
.playroom[data-library-surface=fairy] .categories button[data-category=fairy]{display:flex}

.playroom .tool-dock .asset-grid{align-content:stretch}
.playroom .tool-dock .asset img{min-height:16px}
.playroom .tool-dock .asset span{flex-shrink:0;font-size:12px;line-height:15px}

/* Close choices remain legible on the smallest supported window. */
#close-dialog{max-width:min(540px,90vw)}
#close-dialog .dialog-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#close-dialog button{min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;white-space:normal}
#close-dialog .playful-icon{width:38px;height:38px}
.playroom .about-dialog{width:min(420px,calc(100vw - 36px));text-align:center;padding:28px 28px 20px}.playroom .about-dialog h2{margin:8px 0 4px;font-size:30px}.playroom .about-mark{width:82px;height:82px;margin:0 auto 6px;display:grid;place-items:center;border:3px solid #d29a64;border-radius:28px;background:#ffe2a8;box-shadow:0 5px 0 #b9764d33;overflow:hidden}.playroom .about-mark img{width:100%;height:100%;object-fit:cover}.playroom .about-mark svg{width:60px;height:60px}.playroom .about-version{margin:0 0 8px;color:#936b4b}.playroom .about-links{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2px;margin:0 0 12px}.playroom .about-links-sep{color:#c89a6d;font-weight:700;margin:0 8px;pointer-events:none}.playroom .about-links a{color:#8b4d31;font-weight:650;text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:32px;padding:0 6px;border-radius:8px;cursor:pointer;transition:color 160ms ease,background 160ms ease,transform 160ms ease}.playroom .about-links a:active{transform:scale(.97)}.playroom .about-links a:focus-visible{outline:3px solid #a55339;outline-offset:2px}.playroom .about-credit{margin:0;color:#9a6d52;font-size:13px;font-weight:600;letter-spacing:.05em;line-height:1.55}.playroom .about-dialog .dialog-actions{justify-content:center;margin-top:16px}

/* Keep the canvas interaction model clear and prevent accidental page selection. */
.playroom, .playroom * { user-select: none; -webkit-user-select: none; }
.playroom input, .playroom textarea, .playroom select, .playroom [contenteditable="true"] { user-select: text; -webkit-user-select: text; }
.playroom #painting { cursor: var(--drawing-cursor, crosshair); }
.playroom .header-command#new-quick, .playroom .header-command#reset-settings { font-size: 14px; }
.playroom .sound-toggle { display:flex; align-items:center; gap:8px; margin:12px 0; }
.playroom .palette-presets { user-select:none; }

/* Keep document actions identifiable and reachable at compact window widths. */
.playroom .header-actions{overflow-x:auto;justify-content:safe flex-end;padding-bottom:3px}
.playroom .header-actions button{flex:0 1 calc(60px*var(--u));min-width:44px;white-space:nowrap}
.playroom .header-actions #display-open{flex-shrink:0;min-width:max(70px,calc(64px*var(--u)))}
.playroom .header-actions #new-quick{background:#e2eed5;border-color:#98b484;min-width:68px;font-size:13px;white-space:nowrap}

@media (hover:hover) and (pointer:fine){.playroom .about-links a:hover{color:#60301d;background:#ffe3b2}}

/* Landscape phones and split-screen windows: keep the canvas wide and make
   both tool collections horizontally scrollable rows below it.  The old
   three-column grid left only a few hundred pixels for a 16:9 canvas at
   640px, which made drawing and touch panning needlessly cramped. */
@media (max-width: 860px) {
  .playroom {
    --header: 64px;
    overflow: hidden;
  }
  .playroom .app-header {
    height: var(--header);
    min-height: var(--header);
    padding: 4px 8px;
    gap: 6px;
  }
  .playroom .brand { min-width: 44px; flex: 0 0 auto; }
  .playroom .brand > .playful-icon { display: none; }
  .playroom .brand strong { font-size: 18px; letter-spacing: 1px; }
  .playroom .brand small { display: none; }
  .playroom .header-actions {
    gap: 3px;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .playroom .header-actions::-webkit-scrollbar { display: none; }
  .playroom .header-actions button {
    flex: 0 0 auto;
    min-width: 44px;
    width: auto;
    height: 52px;
    padding: 2px 6px;
    font-size: 12px;
  }
  .playroom .header-actions button .playful-icon { width: 24px; height: 24px; }

  .playroom .workspace {
    height: calc(100dvh - var(--header));
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: start;
    -webkit-overflow-scrolling: touch;
  }
  .playroom .studio {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    height: auto;
  }
  .playroom .canvas-topbar { min-height: 44px; }
  .playroom .canvas-welcome { display: none; }
  .playroom .viewport {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 190px !important;
    max-height: none;
    aspect-ratio: 16 / 9;
    padding: 6px;
    overflow: auto;
  }
  .playroom .canvas-sheet { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .playroom .canvas-footer { min-height: 24px; height: 24px; }
  .playroom .workspace .tool-dock { height: clamp(136px, 30dvh, 180px); }
  .playroom .tool-dock .categories { min-height: 44px; max-height: 44px; }
  .playroom .tool-dock .categories button { min-height: 44px; }
  .playroom #library-pagination button { min-height: 44px; }

  .playroom .classic-left {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-height: 112px;
    min-height: 96px;
    padding: 6px;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  .playroom .classic-left h2 { display: none; }
  .playroom .classic-left > * { flex: 0 0 auto; }
  .playroom .classic-left .classic-colors { width: 120px; }
  .playroom .classic-left .brush-box {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    align-content: stretch;
    gap: 6px;
    padding: 2px;
  }
  .playroom .classic-left .brush-card {
    width: 82px;
    min-width: 82px;
    min-height: 82px;
    height: 100%;
  }
  .playroom .classic-left .left-actions {
    width: 76px;
    min-width: 76px;
    margin-top: 0;
    gap: 4px;
  }
  .playroom .classic-left .left-actions button { min-height: 44px; }
  .playroom .classic-left .subtool-box {
    width: 160px;
    min-width: 160px;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .playroom .classic-left .subtool-card { min-width: 112px; height: 100%; }

  .playroom .tool-rail {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    min-height: 68px;
    max-height: 76px;
    padding: 5px 6px;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    overflow: hidden;
  }
  .playroom .tool-rail #tools {
    flex: 1;
    min-width: 0;
    width: auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    padding: 1px;
  }
  .playroom .tool-button {
    flex: 0 0 64px;
    width: 64px;
    min-height: 58px;
    max-height: none;
    padding: 3px;
    font-size: 12px;
  }
  .playroom .tool-button .playful-icon { width: 30px; height: 30px; }
  .playroom .tool-page { width: 76px; min-width: 76px; padding: 3px; }
  .playroom .rail-bottom { display: none; }
}

/* Very narrow split-screen widths: keep every action reachable without
   letting a long label force the canvas or the controls off-screen. */
@media (max-width: 640px) {
  .playroom .workspace { padding: 6px; gap: 6px; }
  .playroom .viewport { min-height: 180px !important; }
  .playroom .workspace .tool-dock { height: clamp(128px, 34dvh, 164px); }
  .playroom .classic-left { min-height: 92px; max-height: 104px; }
  .playroom .classic-left .classic-colors { width: 108px; }
  .playroom .classic-left .brush-card { width: 76px; min-width: 76px; }
  .playroom .classic-left .left-actions { width: 68px; min-width: 68px; }
  .playroom .tool-rail { min-height: 64px; max-height: 70px; }
  .playroom .tool-button { flex-basis: 60px; width: 60px; min-height: 54px; }
  .playroom .tool-page { width: 68px; min-width: 68px; }
}

/* Canvas-first mode for phones, split-screen windows and short laptop
   windows. The complete tool groups remain available as three focused
   drawers, while the default state leaves the largest possible paper area. */
.playroom .mobile-commands,
.playroom .mobile-scrim { display: none; }

@media (max-width: 860px), (max-height: 600px) {
  .playroom .mobile-commands {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    max-width: 100%;
    padding: 2px;
    scrollbar-width: none;
  }
  .playroom .mobile-commands::-webkit-scrollbar { display: none; }
  .playroom .mobile-command {
    flex: 0 0 auto;
    min-width: 52px;
    min-height: 44px;
    padding: 5px 8px;
    border-radius: 12px;
    background: #fff4df;
    font-size: 12px;
    white-space: nowrap;
  }
  .playroom .mobile-command[aria-pressed="true"] {
    background: #ffdb97;
    border-color: #bb6b39;
  }
  .playroom .mobile-focus-command { background: #e2eed5; border-color: #98b484; }
  .playroom .canvas-topbar { position: relative; z-index: 7; overflow-x: auto; scrollbar-width: none; }
  .playroom .canvas-topbar::-webkit-scrollbar { display: none; }
  .playroom .canvas-topbar .zoom-controls { display: none; }
  .playroom .workspace { overflow: hidden; }
  .playroom .mobile-scrim {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: rgba(79, 48, 29, .26);
  }
  .playroom .mobile-commands { position: relative; z-index: 8; }
  .playroom[data-mobile-panel="brushes"] .mobile-scrim,
  .playroom[data-mobile-panel="tools"] .mobile-scrim,
  .playroom[data-mobile-panel="options"] .mobile-scrim,
  .playroom[data-mobile-panel="library"] .mobile-scrim { display: block; }
  .playroom[data-mobile-panel="focus"] .classic-left,
  .playroom[data-mobile-panel="focus"] .tool-rail,
  .playroom[data-mobile-panel="focus"] .tool-dock { display: none; }
  .playroom[data-mobile-panel="brushes"] .tool-rail,
  .playroom[data-mobile-panel="brushes"] .tool-dock,
  .playroom[data-mobile-panel="tools"] .classic-left,
  .playroom[data-mobile-panel="tools"] .tool-dock,
  .playroom[data-mobile-panel="options"] .classic-left,
  .playroom[data-mobile-panel="options"] .tool-rail,
  .playroom[data-mobile-panel="library"] .classic-left,
  .playroom[data-mobile-panel="library"] .tool-rail { display: none; }
  .playroom[data-mobile-panel="focus"] .studio { grid-column: 1; grid-row: 1; height: 100%; }
  .playroom[data-mobile-panel="focus"] .viewport {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto;
    aspect-ratio: auto;
  }
  .playroom[data-mobile-panel="focus"] .canvas-sheet { max-width: 100%; max-height: 100%; }
  .playroom[data-mobile-panel="brushes"] .classic-left,
  .playroom[data-mobile-panel="tools"] .tool-rail,
  .playroom[data-mobile-panel="options"] .tool-dock,
  .playroom[data-mobile-panel="library"] .tool-dock {
    position: fixed;
    z-index: 6;
    display: flex;
    box-sizing: border-box;
    box-shadow: 0 14px 34px rgba(100, 59, 30, .28);
  }
  .playroom[data-mobile-panel="brushes"] .classic-left {
    top: calc(var(--header) + 8px);
    left: 8px;
    bottom: 8px;
    width: min(360px, calc(100vw - 16px));
    max-height: none;
  }
  .playroom[data-mobile-panel="tools"] .tool-rail {
    top: calc(var(--header) + 8px);
    right: 8px;
    bottom: 8px;
    width: min(320px, calc(100vw - 16px));
    max-height: none;
  }
  .playroom[data-mobile-panel="options"] .tool-dock,
  .playroom[data-mobile-panel="library"] .tool-dock {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    height: min(48dvh, 380px);
    min-height: 180px;
    max-height: calc(100dvh - var(--header) - 16px);
    padding: 8px;
    overflow: auto;
    border: 2px solid #d9ae77;
    border-radius: 20px;
    background: #fff1d4;
  }
  .playroom[data-mobile-panel="options"] .tool-dock .right-panel { display: none; }
  .playroom[data-mobile-panel="library"] .tool-dock .classic-parameters { display: none; }
  .playroom[data-mobile-panel="library"] .tool-dock .right-panel { flex: 1 1 auto; }
  .playroom[data-mobile-panel="brushes"] .classic-left,
  .playroom[data-mobile-panel="tools"] .tool-rail { overflow-y: auto; }
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-box,
  .playroom[data-mobile-panel="tools"] .tool-rail #tools { overflow-y: auto; }
  .playroom[data-mobile-panel="brushes"] .classic-left > *,
  .playroom[data-mobile-panel="tools"] .tool-rail > * { flex-shrink: 0; }
}

@media (max-width: 640px), (max-height: 500px) {
  /* Android WebView reports CSS dp at the device density (800x480 at
     420dpi is only about 305x183 CSS px). Compact the fixed header and keep
     the five drawer commands in the first viewport row. */
  .playroom .app-header {
    height: 56px;
    min-height: 0;
    padding: 2px 4px;
    gap: 4px;
    overflow: hidden;
  }
  .playroom .brand { min-width: 54px; gap: 0; }
  .playroom .brand strong { font-size: 16px; letter-spacing: 0; }
  .playroom .brand small,
  .playroom .brand > .playful-icon { display: none; }
  .playroom .header-actions { gap: 2px; overflow-x: auto; justify-content: flex-start; }
  .playroom .header-actions button {
    flex: 0 0 auto;
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 2px;
    font-size: 9px;
  }
  .playroom .header-actions button .playful-icon,
  .playroom .header-actions button svg { width: 22px; height: 22px; }
  .playroom .canvas-topbar { height: 46px; min-height: 46px; overflow: hidden; }
  .playroom .canvas-topbar .workspace-tabs,
  .playroom .canvas-topbar .canvas-welcome { display: none; }
  .playroom .mobile-commands {
    position: absolute;
    inset: 0;
    max-width: none;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .playroom .mobile-command { min-width: 48px; min-height: 40px; padding: 3px 5px; font-size: 10px; }
  .playroom .document-name { display: none; }
  .playroom .canvas-footer { height: 20px; font-size: 10px; }
  .playroom[data-mobile-panel="options"] .tool-dock,
  .playroom[data-mobile-panel="library"] .tool-dock { height: min(56dvh, 340px); }
}

/* High-density Android phones/tablets expose a much smaller CSS viewport
   than their screenshot width. Preserve a usable paper area there while
   keeping the same drawer controls and touch targets in physical pixels. */
@media (max-width: 640px) and (min-resolution: 2dppx) {
  .playroom .app-header { height: 32px; padding: 1px 3px; gap: 2px; }
  .playroom .brand { min-width: 40px; }
  .playroom .brand strong { font-size: 11px; }
  .playroom .header-actions { gap: 1px; }
  .playroom .header-actions button { min-width: 30px; width: 30px; height: 30px; padding: 1px; font-size: 7px; }
  .playroom .header-actions button .playful-icon,
  .playroom .header-actions button svg { width: 16px; height: 16px; }
  .playroom .canvas-topbar { height: 32px; min-height: 32px; }
  .playroom .mobile-commands { gap: 2px; padding: 1px; }
  .playroom .mobile-command { min-width: 40px; min-height: 40px; padding: 2px 3px; border-radius: 8px; font-size: 8px; }
  .playroom .workspace { padding: 3px; gap: 3px; }
  .playroom .studio { gap: 3px; }
  .playroom .viewport { padding: 3px; border-width: 2px; border-radius: 10px; }
  .playroom .canvas-footer { display: none; }
}

/* v1.10.3: mobile studio sheets. The earlier compact rows kept the desktop
   shelf's internal grid, which clipped brush choices and hid parameter
   controls. On a narrow Web viewport each shelf is now a real, scrollable
   sheet with one clear job; desktop and native classic layouts never enter
   this media query. */
@media (max-width: 860px), (max-height: 600px) {
  .playroom .workspace {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    overflow: hidden;
    padding: 4px;
    gap: 4px;
  }
  .playroom .studio,
  .playroom[data-mobile-panel] .studio {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    min-height: 0;
  }
  .playroom .canvas-topbar { flex: 0 0 44px; height: 44px; min-height: 44px; }
  .playroom[data-mobile-panel="focus"] .viewport {
    flex: 1 1 auto;
    height: auto;
    min-height: 0 !important;
    aspect-ratio: auto;
  }
  .playroom[data-mobile-panel="focus"] .canvas-footer { display: none; }

  .playroom[data-mobile-panel="brushes"] .classic-left,
  .playroom[data-mobile-panel="tools"] .tool-rail,
  .playroom[data-mobile-panel="options"] .tool-dock,
  .playroom[data-mobile-panel="library"] .tool-dock {
    position: fixed !important;
    top: calc(var(--header) + 52px);
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box;
    z-index: 10;
    border: 2px solid #d9ae77;
    border-radius: 20px;
    background: #fff1d4;
    box-shadow: 0 14px 34px rgba(100, 59, 30, .28);
    overflow: hidden !important;
  }

  /* Brush sheet: a compact color strip, a real two-column choice grid and
     a bottom row for tool-specific choices. */
  .playroom[data-mobile-panel="brushes"] .classic-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left > h2,
  .playroom[data-mobile-panel="brushes"] .classic-left > #library-groups { display: none !important; }
  .playroom[data-mobile-panel="brushes"] .classic-left .classic-colors {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    flex: 0 0 auto;
    width: auto;
    padding: 3px;
    min-height: 0;
    height: 56px;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .classic-colors h3 { display: none; }
  .playroom[data-mobile-panel="brushes"] .classic-left .color-pair {
    grid-column: 1 / -1;
    height: 46px;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .color-slot { gap: 1px; font-size: 10px; }
  .playroom[data-mobile-panel="brushes"] .classic-left .color-slot #foreground-palette,
  .playroom[data-mobile-panel="brushes"] .classic-left .color-slot #background-palette {
    height: 34px !important;
    min-height: 34px;
    width: 100%;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left #foreground-history { display: none; }
  .playroom[data-mobile-panel="brushes"] .classic-left #palette-open { display: none; }
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-box {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    align-content: start;
    flex: 1 1 auto !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 7px;
    padding: 2px;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-card {
    width: auto;
    min-width: 0;
    min-height: 74px;
    height: auto;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .subtool-box {
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: row;
    min-height: 0;
    max-height: 62px;
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 5px;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .subtool-card {
    flex: 0 0 136px;
    min-width: 136px;
    min-height: 58px;
    white-space: nowrap;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left #stroke-buttons {
    display: flex;
    flex: 0 0 auto;
    min-height: 38px;
    max-height: 42px;
    overflow-x: auto;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .left-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    width: auto;
    min-width: 0;
    margin: 0;
    gap: 7px;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .left-actions button { flex: 1; min-height: 38px; }

  /* Tool sheet: enough room for every tool, with the page switch always
     visible at the bottom. Choosing a tool routes to its brush/options sheet. */
  .playroom[data-mobile-panel="tools"] .tool-rail {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }
  .playroom[data-mobile-panel="tools"] .tool-rail #tools {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    align-content: start;
    flex: 1 1 auto;
    width: auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 8px;
    padding: 2px;
  }
  .playroom[data-mobile-panel="tools"] .tool-rail .tool-button {
    width: auto;
    min-height: 68px;
    max-height: none;
    font-size: 12px;
  }
  .playroom[data-mobile-panel="tools"] .tool-rail #tool-page {
    position: static;
    flex: 0 0 44px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  /* Parameter sheet: keep the color row visible and let every actual control
     occupy a readable row inside a vertical scroller. */
  .playroom[data-mobile-panel="options"] .tool-dock {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 9px;
  }
  .playroom[data-mobile-panel="options"] .tool-dock .quick-palette {
    display: flex !important;
    flex: 0 0 56px;
    width: auto;
    height: 56px !important;
    min-height: 56px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px;
  }
  .playroom[data-mobile-panel="options"] .tool-dock .quick-palette .swatches {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    gap: 5px;
  }
  .playroom[data-mobile-panel="options"] .tool-dock .quick-palette .swatch {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    min-height: 32px;
  }
  .playroom[data-mobile-panel="options"] .tool-dock .more-colors { flex: 0 0 auto; min-height: 40px; }
  .playroom[data-mobile-panel="options"] .tool-dock .classic-parameters {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
  }
  .playroom[data-mobile-panel="options"] .classic-parameters .options-bar,
  .playroom[data-mobile-panel="options"] .classic-parameters .primary-brush-options,
  .playroom[data-mobile-panel="options"] .classic-parameters .primary-brush-options .detail-bar {
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: auto !important;
    min-height: 44px;
    gap: 7px;
    padding: 0;
  }
  .playroom[data-mobile-panel="options"] .classic-parameters .primary-brush-options { flex-direction: column; }
  .playroom[data-mobile-panel="options"] .classic-parameters .parameter-slider,
  .playroom[data-mobile-panel="options"] .classic-parameters #brush-options,
  .playroom[data-mobile-panel="options"] .classic-parameters .primary-brush-options label {
    flex: 1 1 180px;
    min-height: 44px;
    justify-content: space-between;
  }
  .playroom[data-mobile-panel="options"] .classic-parameters .primary-brush-options .detail-bar > label,
  .playroom[data-mobile-panel="options"] .classic-parameters .primary-brush-options .detail-bar > button {
    flex: 1 1 180px;
    min-height: 44px;
  }
  .playroom[data-mobile-panel="options"] .classic-parameters #stroke-buttons,
  .playroom[data-mobile-panel="options"] .classic-parameters #selection-combination,
  .playroom[data-mobile-panel="options"] .classic-parameters #selection-actions {
    display: flex !important;
    flex: 0 0 auto;
    width: 100%;
    min-height: 44px;
    flex-wrap: wrap;
  }
  .playroom[data-mobile-panel="options"] #library-pagination,
  .playroom[data-mobile-panel="options"] #library-instruction { display: none !important; }

  /* Library sheet: category chips and cards each get their own scroll area;
     the page controls are moved beside the library by classic-ui.js. */
  .playroom[data-mobile-panel="library"] .tool-dock {
    display: flex !important;
    flex-direction: column;
    padding: 9px;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .quick-palette,
  .playroom[data-mobile-panel="library"] .tool-dock .classic-parameters { display: none !important; }
  .playroom[data-mobile-panel="library"] .tool-dock .right-panel {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    flex: 1 1 auto;
    flex-direction: column;
    width: auto !important;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .library {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .panel-heading { flex: 0 0 auto; min-height: 34px; }
  .playroom[data-mobile-panel="library"] .tool-dock .panel-heading h2 { font-size: 17px; }
  .playroom[data-mobile-panel="library"] .tool-dock .panel-description { flex: 0 0 auto; margin: 2px 0 5px; font-size: 12px; }
  .playroom[data-mobile-panel="library"] .tool-dock .categories {
    display: flex;
    flex: 0 0 48px;
    width: 100%;
    max-height: 48px;
    min-height: 48px;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 5px;
    margin: 0 0 6px;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .categories button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 3px 8px;
    font-size: 12px;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset-grid {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto !important;
    overflow-x: hidden;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    grid-auto-rows: minmax(108px, auto);
    grid-auto-flow: row;
    align-content: start;
    gap: 7px;
    padding: 2px;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset {
    min-width: 0;
    min-height: 104px;
    padding: 4px;
    border-radius: 13px;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset img { height: 65px; min-height: 0; flex: none; }
  .playroom[data-mobile-panel="library"] .tool-dock .asset span { font-size: 11px; line-height: 1.2; }
  .playroom[data-mobile-panel="library"] .tool-dock .layers-panel { display: none !important; }
  .playroom[data-mobile-panel="library"] .tool-dock #library-pagination {
    display: flex !important;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
  }
  .playroom[data-mobile-panel="library"] .tool-dock #library-pagination button { min-height: 40px; }
  .playroom[data-mobile-panel="library"] .tool-dock #library-instruction {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    font-size: 12px;
  }

  /* Every dialog gets a mobile sheet geometry. The palette editor keeps the
     hue plane and action buttons in the first view instead of pushing them
     below a tall preset grid. */
  .playroom dialog {
    width: min(560px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - var(--header) - 16px);
    margin: auto;
    padding: 14px;
    overflow: auto;
    border-radius: 18px;
  }
  .playroom dialog h2 { font-size: 20px; margin-bottom: 8px; }
  .playroom dialog .dialog-actions {
    position: sticky;
    bottom: -14px;
    z-index: 2;
    margin: 10px -14px -14px;
    padding: 9px 14px 14px;
    background: linear-gradient(transparent, #fff1d4 28%);
  }
  .playroom #palette-dialog:not([open]) { display: none; }
  .playroom #palette-dialog[open] {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 16px);
    height: calc(100dvh - var(--header) - 16px);
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }
  .playroom #palette-dialog h2 {
    flex: 0 0 24px;
    min-height: 24px;
    margin: 0 0 5px;
    font-size: 18px;
  }
  .playroom #palette-dialog .palette-presets {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(74px, 1fr);
    grid-template-columns: none;
    flex: 0 0 46px;
    height: 46px;
    max-height: 46px;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 5px;
    margin-bottom: 6px;
  }
  .playroom #palette-dialog .preset-color { min-height: 40px; padding: 3px; gap: 3px; font-size: 10px; }
  .playroom #palette-dialog .preset-color i { width: 24px; height: 24px; border-radius: 8px; }
  .playroom #palette-dialog .palette-editor {
    display: flex;
    flex: 0 0 92px;
    flex-direction: row;
    min-height: 0;
    gap: 8px;
    overflow: hidden;
  }
  .playroom #palette-dialog .palette-editor > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 24px;
    gap: 3px;
  }
  .playroom #palette-dialog #color-plane { width: 100%; height: 64px; min-height: 0; max-height: none; }
  .playroom #palette-dialog .palette-editor > div:first-child label { min-height: 24px; }
  .playroom #palette-dialog #color-preview { height: 28px; margin: 0 0 2px; }
  .playroom #palette-dialog .palette-editor > div:last-child {
    flex: 0 0 176px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 4px;
    overflow-y: auto;
  }
  .playroom #palette-dialog .palette-editor > div:last-child #color-preview,
  .playroom #palette-dialog .palette-editor > div:last-child label:last-child { grid-column: 1 / -1; }
  .playroom #palette-dialog .palette-editor label { min-height: 30px; margin: 0; font-size: 11px; }
  .playroom #palette-dialog .paint-texture-option {
    flex: 0 0 38px;
    min-height: 38px;
    margin: 5px 0 0;
    gap: 7px;
    align-items: center;
    overflow: hidden;
  }
  .playroom #palette-dialog .paint-texture-option select,
  .playroom #palette-dialog .paint-texture-option .choice-button { min-height: 34px; padding: 4px 7px; }
  .playroom #palette-dialog .dialog-actions { flex: 0 0 42px; position: static; margin: 5px 0 0; padding: 0; background: none; }
  .playroom #palette-dialog .dialog-actions button { min-height: 42px; }
}

@media (max-width: 640px) and (min-resolution: 2dppx) {
  .playroom { --header: 32px; }
  .playroom .canvas-topbar { flex-basis: 40px; height: 40px; min-height: 40px; }
  .playroom[data-mobile-panel="brushes"] .classic-left,
  .playroom[data-mobile-panel="tools"] .tool-rail,
  .playroom[data-mobile-panel="options"] .tool-dock,
  .playroom[data-mobile-panel="library"] .tool-dock { top: calc(var(--header) + 44px); }
}

/* v1.10.4: content-sized mobile drawers.  A fixed bottom sheet should expose
   the controls it owns, then let that control group scroll; stretching every
   sheet to the remaining viewport made the brush grid overlap its actions
   and left the library cards with a clipped row. */
@media (max-width: 860px), (max-height: 600px) {
  .playroom[data-mobile-panel="brushes"] .classic-left,
  .playroom[data-mobile-panel="library"] .tool-dock {
    top: auto !important;
    bottom: 8px !important;
    height: auto !important;
    max-height: calc(100dvh - var(--header) - 60px) !important;
  }

  /* The source brush list is intentionally hidden for eraser/fill/etc.  Keep
     the native [hidden] contract stronger than the drawer's display rules. */
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-box[hidden] {
    display: none !important;
  }

  /* One visible brush row is enough to identify the tool; the rest remains
     reachable by scrolling without pushing stroke/actions into the cards. */
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-box:not([hidden]) {
    flex: 0 0 74px !important;
    height: 74px !important;
    max-height: 74px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-box:not([hidden]) {
    grid-auto-flow: column !important;
    grid-auto-columns: 132px !important;
    grid-template-columns: none !important;
    grid-template-rows: 70px !important;
    flex-basis: 70px !important;
    height: 70px !important;
    max-height: 70px !important;
    align-content: start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-card {
    min-height: 70px;
    height: 70px;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .classic-colors {
    height: 52px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .color-pair {
    height: 42px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .color-slot #foreground-palette,
  .playroom[data-mobile-panel="brushes"] .classic-left .color-slot #background-palette {
    height: 32px !important;
    min-height: 32px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left #stroke-buttons {
    min-height: 40px !important;
    max-height: 40px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .left-actions,
  .playroom[data-mobile-panel="brushes"] .classic-left .left-actions button {
    min-height: 44px !important;
    height: 44px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .subtool-box {
    flex: 0 0 62px !important;
    height: 62px !important;
    max-height: 62px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .subtool-box:empty {
    display: none !important;
    flex: 0 0 0 !important;
    height: 0 !important;
  }

  /* Material cards are deliberately compact: one complete row plus a pager
     is more useful than a tall blank sheet with clipped card bottoms. */
  .playroom[data-mobile-panel="library"] .tool-dock {
    padding: 7px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .right-panel,
  .playroom[data-mobile-panel="library"] .tool-dock .library {
    flex: 0 0 auto !important;
    height: auto !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .categories {
    flex: 0 0 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin-bottom: 5px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset-grid {
    flex: 0 0 88px !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    grid-auto-rows: 84px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset {
    min-height: 84px !important;
    height: 84px !important;
    padding: 3px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset img {
    height: 50px !important;
    max-height: 50px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset span {
    line-height: 14px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock #library-pagination {
    flex: 0 0 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock #library-pagination button {
    min-height: 36px !important;
    padding-block: 3px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock #library-instruction {
    flex: 0 0 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* Keep the CSS viewport variable in step with the compact header. */
@media (max-width: 640px), (max-height: 500px) {
  .playroom { --header: 56px; }
}
@media (max-width: 640px) and (min-resolution: 2dppx) {
  .playroom { --header: 32px; }
}

/* Keep the existing desktop promise: opening 图库 reserves a readable bottom
   shelf below the paper instead of turning the mode button into a tiny, easy
   to miss strip.  The native classic stylesheet is untouched. */
@media (min-width: 861px) and (min-height: 601px) {
  .playroom.library-open .tool-dock {
    min-height: 210px;
  }
  .playroom.library-open .tool-dock .right-panel {
    position: relative !important;
    display: flex !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  .playroom.library-open .tool-dock .asset-grid {
    min-height: 100px;
  }
}

/* v1.10.5: a wide but short Web window still uses the canvas-first drawer
   model. Without this column override the base three-column grid leaves the
   studio in the old left rail and produces a large empty area on the right. */
@media (min-width: 861px) and (max-height: 600px) {
  .playroom .workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  .playroom .studio {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
}

/* v1.10.5: compact drawers size themselves around their controls. The Web
   mobile tool sheet shows every tool in a small grid; native desktop keeps
   its original two-page rail because it never enters this media query. */
@media (max-width: 860px), (max-height: 600px) {
  .playroom[data-mobile-panel="tools"] .tool-rail {
    top: auto !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--header) - 60px) !important;
    padding: 6px !important;
    gap: 5px !important;
    overflow-y: auto !important;
  }
  .playroom[data-mobile-panel="tools"] .tool-rail #tools {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
    grid-auto-rows: 54px;
    align-content: start;
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 4px !important;
    padding: 1px !important;
  }
  .playroom[data-mobile-panel="tools"] .tool-rail .tool-button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: 54px !important;
    max-height: 54px !important;
    padding: 2px !important;
    gap: 0 !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }
  .playroom[data-mobile-panel="tools"] .tool-rail .tool-button .playful-icon {
    width: 28px !important;
    height: 28px !important;
  }
  .playroom[data-mobile-panel="tools"] .tool-rail #tool-page {
    display: none !important;
  }

  .playroom[data-mobile-panel="library"] .tool-dock {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--header) - 60px) !important;
    overflow-y: auto !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .panel-description {
    display: none !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .categories {
    flex-basis: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin-bottom: 4px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .categories button {
    min-height: 36px !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset-grid {
    flex-basis: 82px !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)) !important;
    grid-auto-rows: 78px !important;
    gap: 5px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset {
    min-height: 78px !important;
    height: 78px !important;
    padding: 2px !important;
    border-radius: 10px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset img {
    height: 46px !important;
    max-height: 46px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .asset span {
    font-size: 10px !important;
    line-height: 12px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock #library-pagination {
    flex-basis: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock #library-pagination button {
    min-height: 32px !important;
    padding-block: 2px !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock #library-instruction {
    flex-basis: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 420px), (max-height: 420px) {
  .playroom[data-mobile-panel="library"] .tool-dock #library-instruction {
    display: none !important;
  }
}

@media (min-width: 641px) and (max-height: 600px) {
  .playroom {
    --header: 64px;
  }
  .playroom .app-header {
    height: 64px;
    padding: 4px 8px;
  }
  .playroom .header-actions button {
    height: 56px;
    min-height: 50px;
  }
  .playroom .header-actions button .playful-icon,
  .playroom .header-actions button svg {
    width: 26px;
    height: 26px;
  }
}

/* v1.10.6: keep every section of the brush drawer inside its own row. The
   previous compact rules made the color helper pseudo-element and the 48px
   stroke buttons larger than their 40px grid tracks, so both could paint over
   the brush cards and the action row. */
@media (max-width: 860px), (max-height: 600px) {
  .playroom[data-mobile-panel="brushes"] .classic-left {
    gap: 4px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .classic-colors {
    display: block !important;
    flex: 0 0 50px !important;
    width: auto !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 3px 6px !important;
    overflow: hidden !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .classic-colors::after {
    display: none !important;
    content: none !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .color-pair {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) !important;
    grid-template-rows: 44px !important;
    grid-column: auto !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    gap: 4px !important;
    align-items: center !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .color-slot {
    height: 40px !important;
    min-height: 40px !important;
    gap: 0 !important;
    justify-content: center !important;
    font-size: 10px !important;
    line-height: 10px !important;
    overflow: hidden !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .color-slot #foreground-palette,
  .playroom[data-mobile-panel="brushes"] .classic-left .color-slot #background-palette {
    width: 100% !important;
    max-width: 64px !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left #swap-colors {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left #foreground-history,
  .playroom[data-mobile-panel="brushes"] .classic-left #background-history,
  .playroom[data-mobile-panel="brushes"] .classic-left #palette-open {
    display: none !important;
  }

  .playroom[data-mobile-panel="brushes"] .classic-left .brush-box:not([hidden]) {
    flex: 0 0 74px !important;
    flex-basis: 74px !important;
    width: auto !important;
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding: 2px !important;
    grid-template-columns: none !important;
    grid-template-rows: 70px !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 132px !important;
    align-content: start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-card {
    width: 132px !important;
    min-width: 132px !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-rows: 36px 24px !important;
    align-content: center !important;
    gap: 0 4px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-card > .playful-icon {
    width: 30px !important;
    height: 30px !important;
    grid-row: 1 !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-card > span:not(.brush-sample) {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .brush-card .brush-sample {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 20px !important;
    min-height: 20px !important;
    overflow: hidden !important;
  }

  .playroom[data-mobile-panel="brushes"] .classic-left #stroke-buttons {
    flex: 0 0 48px !important;
    width: auto !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left #stroke-buttons button {
    flex: 0 0 136px !important;
    width: 136px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 3px 6px !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left #stroke-buttons .choice-picture {
    width: 24px !important;
    height: 24px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .left-actions,
  .playroom[data-mobile-panel="brushes"] .classic-left .left-actions button {
    flex: 0 0 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .left-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: auto !important;
    margin: 0 !important;
    gap: 6px !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .left-actions button {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 2px 6px !important;
    gap: 4px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .playroom[data-mobile-panel="brushes"] .classic-left .left-actions .playful-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Ultra-small Android/WebView viewports still need a way to reach every drawer
   row. Keep the canvas-first height budget, but let the active drawer scroll
   vertically instead of clipping pagination and action rows. */
@media (max-width: 860px), (max-height: 600px) {
  .playroom[data-mobile-panel="brushes"] .classic-left {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .playroom[data-mobile-panel="library"] .library {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .playroom[data-mobile-panel="library"] .tool-dock .right-panel,
  .playroom[data-mobile-panel="library"] .tool-dock .library {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 640px) and (min-resolution: 2dppx) {
  /* The palette editor has a denser fixed layout than the other dialogs.
     At very high density its action row can exceed the CSS viewport, so the
     dialog itself becomes the scroll container. */
  .playroom #palette-dialog[open] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }
}