/* View navigation is always on the workbench, independent of the works menu. */
#atelier-desktop-tools,#atelier-desktop-properties{display:none}
body.atelier-simple.atelier-direct #atelier-viewbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;width:100%;margin-top:5px}
.atelier-view-hint{font-size:11px;color:#73806e}
body.atelier-simple.atelier-direct #atelier-viewbar .zoom-controls{position:static!important;inset:auto!important;display:flex;flex-direction:row;flex:none;align-items:center;gap:0;width:auto;max-width:none;margin:0 0 0 auto;padding:0;border:1px solid var(--control-border);border-radius:10px;background:var(--control-surface);box-shadow:none;transform:none!important;opacity:1}
body.atelier-simple.atelier-direct #atelier-viewbar .zoom-controls button{min-height:44px;height:44px;width:44px;border-radius:8px;color:var(--control-ink);font-size:20px}
body.atelier-simple.atelier-direct #atelier-viewbar .zoom-controls #zoom-reset{width:62px;font-size:12px;font-variant-numeric:tabular-nums}
.canvas-viewport.hand-ready,.canvas-viewport.hand-ready *{cursor:grab!important}
.canvas-viewport.is-panning,.canvas-viewport.is-panning *{cursor:grabbing!important}
body.atelier-simple.game-photo-mode #atelier-viewbar{display:none!important}
@media(max-width:1023px){.atelier-view-hint{display:none}}
@media(max-width:620px) and (min-height:541px){.atelier-direct{--atelier-size:min(1040px,max(120px,calc(100dvh - 422px)))}}
@media(orientation:landscape) and (max-height:540px) and (min-width:480px){
 .atelier-direct{--atelier-size:max(100px,min(calc(100dvh - 170px),calc(100vw - 290px)))}
 .atelier-direct #atelier-viewbar{grid-column:1;grid-row:3;margin:0;justify-content:center}
 .atelier-direct #atelier-viewbar .zoom-controls{margin-inline:auto!important}
 .atelier-direct .game-session{grid-row:1/4}
}
/* Desktop uses the sides for tools and properties, giving the canvas the full height. */
@media(min-width:1024px) and (min-height:600px){
 body.atelier-simple.atelier-desktop:has(#studio-view:not([hidden])){overflow:hidden}
 body.atelier-simple.atelier-desktop #studio-view>.workspace{display:grid!important;grid-template-columns:76px minmax(0,1fr) 264px;grid-template-rows:46px minmax(0,1fr) 44px;gap:8px 16px;height:calc(100dvh - 64px);min-height:0;padding:10px 16px!important;align-items:stretch;justify-items:stretch;background:#e8ebe4}
 body.atelier-simple.atelier-desktop #studio-view .stage-shell,body.atelier-simple.atelier-desktop #studio-view .stage-shell>.stage-frame{display:contents!important}
 body.atelier-simple.atelier-desktop #atelier-workbar{grid-column:1/-1;grid-row:1;margin:0}
 body.atelier-simple.atelier-desktop #studio-view #canvas-viewport{grid-column:2;grid-row:2;align-self:center;justify-self:center;width:min(100%,calc(100dvh - 190px))!important;height:auto!important;max-width:100%!important;max-height:100%!important;aspect-ratio:1;margin:0;box-shadow:0 7px 28px #26352816}
 body.atelier-simple.atelier-desktop #atelier-viewbar{grid-column:2;grid-row:3;align-self:center;margin:0}
 body.atelier-simple.atelier-desktop #atelier-desktop-tools{display:block;grid-column:1;grid-row:2/4;min-height:0;overflow-y:auto;padding:6px;border:1px solid var(--control-border);border-radius:10px;background:var(--control-surface);scrollbar-width:thin}
 body.atelier-simple.atelier-desktop #atelier-desktop-tools .stage-tools{display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;position:static!important;inset:auto!important;width:100%;max-width:none;max-height:none;gap:4px;margin:0;padding:0;border:0;background:none;box-shadow:none;transform:none!important}
 body.atelier-simple.atelier-desktop #studio-view #atelier-desktop-tools .stage-tools>.icon-button{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;flex:0 0 44px;width:100%!important;min-width:0;max-width:none;height:44px;min-height:44px;gap:2px;margin:0;padding:2px;border:0;border-radius:8px;background:transparent;color:var(--control-ink);transform:none!important}
 #atelier-desktop-tools .tool-separator{display:none}
 body.atelier-simple.atelier-desktop #studio-view #atelier-desktop-tools .icon-button>:is([data-icon],.atelier-length-icon){display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;line-height:1}
 body.atelier-simple.atelier-desktop #studio-view #atelier-desktop-tools .icon-button svg{display:block;width:18px;height:18px;flex:none;stroke-width:1.7}
 body.atelier-simple.atelier-desktop #studio-view #atelier-desktop-tools .icon-button>:is(.prune-tool-label,.atelier-tool-name,.atelier-length-label,span[data-zh]){display:block;width:100%;max-width:none;font:500 10px/12px var(--sans)!important;text-align:center;letter-spacing:0;white-space:nowrap}
 #atelier-desktop-tools .icon-button:is([aria-pressed=true],[aria-expanded=true]){background:var(--control-strong)!important;color:#fff!important}
 #atelier-desktop-tools .icon-button:disabled{opacity:.35}
 #atelier-desktop-tools .icon-button:hover:not(:disabled){background:var(--control-hover)}
 body.atelier-simple.atelier-desktop #atelier-desktop-properties{display:flex;flex-direction:column;grid-column:3;grid-row:2/4;align-self:stretch;min-height:0;gap:12px;padding:12px;border:1px solid var(--control-border);border-radius:10px;background:var(--control-surface)}
 #atelier-desktop-properties .atelier-touch-tools{width:100%;margin:0;gap:7px}
 #atelier-desktop-properties>:is(.atelier-touch-tools,.atelier-bench){flex:0 0 auto}
 #atelier-desktop-properties .atelier-touch-modes{width:100%;max-width:100%}
 body.atelier-simple.atelier-desktop #atelier-size-control{width:100%;grid-template-columns:1fr 42px 44px;gap:4px}
 body.atelier-simple.atelier-desktop #atelier-size-control .slider-label{grid-column:1;grid-row:1}
 body.atelier-simple.atelier-desktop #atelier-size-control input{grid-column:1/-1;grid-row:2;height:28px;min-height:28px}
 body.atelier-simple.atelier-desktop #atelier-size-control output{grid-column:2;grid-row:1}
 body.atelier-simple.atelier-desktop #atelier-size-control button{grid-column:3;grid-row:1;min-height:32px}
 #atelier-desktop-properties .atelier-bench{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
 #atelier-desktop-properties .atelier-tool-slot{display:none}
 #atelier-desktop-properties :is(.atelier-add-slot,.atelier-vessel-slot,#atelier-atmosphere,#atelier-work){grid-column:auto;grid-row:auto;justify-self:stretch}
 #atelier-desktop-properties .atelier-bench :is(button,summary){width:100%}
 #atelier-desktop-properties .atelier-popover{position:fixed;top:122px;right:294px;bottom:auto;left:auto;width:350px;max-height:calc(100dvh - 145px);z-index:900}
 body.atelier-simple.atelier-desktop #studio-view #atelier-desktop-properties>:is(.design-panel,.layer-menu):not([hidden]){display:block!important;position:relative!important;inset:auto!important;flex:1 1 0%;align-self:stretch;width:100%;max-width:none;height:auto;min-height:0;max-height:none;margin:0;padding:12px 0 0!important;border:0;border-top:1px solid var(--control-border);border-radius:0;background:transparent;box-shadow:none;overflow-y:auto;transform:none!important;z-index:820;scrollbar-width:thin}
 body.atelier-simple.atelier-desktop .design-panel .atelier-inspector-close{display:none!important}
 body.atelier-simple.atelier-desktop .design-panel>.panel-heading{padding:0;margin-bottom:12px}
 body.atelier-simple.atelier-desktop .design-panel>.panel-heading h2{font-size:17px}
 body.atelier-simple.atelier-desktop .design-panel .editor-tabs{width:100%}
 body.atelier-simple.atelier-desktop .design-panel #selection-controls{display:block!important}
 body.atelier-simple.atelier-desktop .design-panel #selection-controls[hidden]{display:none!important}
 body.atelier-simple.atelier-desktop .design-panel .selected-material{margin-bottom:10px}
 body.atelier-simple.atelier-desktop .design-panel .selected-material img{width:36px;height:46px}
 body.atelier-simple.atelier-desktop #studio-view #atelier-desktop-properties>#layer-menu:not([hidden]){display:flex!important;flex-direction:column;overflow:hidden}
 body.atelier-simple.atelier-desktop #layer-menu .layer-list{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto}
 body.atelier-simple.atelier-desktop .game-session{display:contents!important}
 body.atelier-simple.atelier-desktop .atelier-length-panel{position:fixed;top:260px;left:104px;right:auto;bottom:auto;width:300px;max-width:calc(100vw - 130px);transform:none;z-index:900}
 body.atelier-simple.atelier-desktop .workspace>.quick-material-drawer:not([hidden]){inset:64px 0 0 auto;width:450px;height:calc(100dvh - 64px);max-width:50vw;border-radius:12px 0 0 12px}
}

/* First-screen creation and top-layer dialogs, independent of inspector layout. */
body.atelier-simple .header-actions #new-canvas-button{display:grid!important;place-items:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:0;border:1px solid var(--control-border);border-radius:12px;background:var(--control-surface);color:var(--control-ink)}
#new-canvas-button svg{width:21px;height:21px}
body #modal[open]{position:fixed;inset:0;margin:auto;width:min(760px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 100px #1b281c50}
#modal .modal-header{flex:0 0 auto;margin:0;padding:12px 20px;border-bottom:1px solid var(--control-border);background:var(--paper)}
#modal #modal-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 24px 24px;scrollbar-width:thin}
#modal::backdrop{background:#1f2c2466;backdrop-filter:blur(5px)}
#modal .pack-intro{background:#edf1e8;border-radius:10px;padding:12px 14px;color:var(--ink);line-height:1.7}
@media(max-width:600px){#modal #modal-content{padding:16px}body.atelier-simple .header-actions{gap:6px}body.atelier-simple .header-actions #new-canvas-button{flex-basis:40px;min-width:40px;width:40px;height:40px}}
@media(max-width:380px){body.atelier-simple .masthead{padding-inline:10px;gap:8px}body.atelier-simple.atelier-direct .masthead .brand-name{display:none!important}body.atelier-simple .brand{min-width:0;flex:0 0 auto}body.atelier-simple .header-actions{margin-left:auto}}
/* Public account-review information stays reachable without obscuring the canvas. */
.footer{gap:16px;align-items:center;flex-wrap:wrap}
.footer-links{display:flex;align-items:center;justify-content:flex-end;gap:8px 18px;flex-wrap:wrap}
.footer-links a{color:inherit;text-decoration:none;letter-spacing:0;white-space:nowrap;font-size:11px}
.footer-links a:hover{text-decoration:underline;text-underline-offset:3px;color:#405f49}
.image-flow-pricing{display:block;margin-top:12px;text-align:center;color:#5b705b;text-decoration:none;font-size:11px;line-height:1.6}
.image-flow-pricing:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.footer{justify-content:flex-start}.footer-links{justify-content:flex-start;gap:8px 14px}.footer-links a{font-size:10px}}
body.atelier-simple:has(#studio-view:not([hidden]))>.footer{display:flex}
@media(min-width:1024px) and (min-height:600px){
 body.atelier-simple.atelier-desktop #studio-view>.workspace{height:calc(100dvh - 102px)}
 body.atelier-simple.atelier-desktop #studio-view #canvas-viewport{width:min(100%,calc(100dvh - 228px))!important}
 body.atelier-simple.atelier-desktop:has(#studio-view:not([hidden]))>.footer{position:fixed;inset:auto 0 0;z-index:700;min-height:38px;padding:5px 20px;background:#f7f8f3;border-top:1px solid #dce2d9}
}

/* Stem length stays next to Size, at the workbench on phones and desktops. */
body.atelier-simple.atelier-direct #atelier-touch-tools #atelier-length-panel{position:static;inset:auto;transform:none;display:block;width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;z-index:auto}
#atelier-length-panel .atelier-length-close{display:none}
#atelier-length-panel .slider-label{font-size:12px;line-height:18px}
body.atelier-simple.atelier-direct #atelier-touch-tools #atelier-length-panel input{height:32px;min-height:32px}
.stage.game-active:is([data-tool=split],[data-tool=brush]) .unity-container{pointer-events:none}
.stage.game-active[data-tool=split]>#prune-overlay{visibility:visible;z-index:65}
/* Keep the workbench together: the properties/layers panel follows the actual
   canvas edge rather than the far edge of a wide, mostly empty grid track. */
@media(min-width:1024px) and (min-height:600px){
 body.atelier-simple.atelier-desktop #studio-view>.workspace{
  --properties-width:clamp(280px,22vw,320px);
  --desktop-canvas:min(calc(100dvh - 228px),calc(100vw - 76px - var(--properties-width) - 64px));
  grid-template-columns:76px minmax(0,var(--desktop-canvas)) var(--properties-width);
  column-gap:12px;justify-content:center;
 }
 body.atelier-simple.atelier-desktop #studio-view #canvas-viewport{width:100%!important}
 body.atelier-simple.atelier-desktop.layer-list-open #atelier-desktop-properties>:is(.atelier-touch-tools,.atelier-bench){display:none!important}
 body.atelier-simple.atelier-desktop.layer-list-open #studio-view #atelier-desktop-properties>#layer-menu:not([hidden]){padding:0!important;border:0;flex:1 1 auto;overflow:hidden}
 body.atelier-simple.atelier-desktop #layer-menu .layer-menu-heading{padding:2px 0 12px;gap:8px}
 body.atelier-simple.atelier-desktop #layer-menu .layer-menu-heading strong{font-size:18px;letter-spacing:0}
 body.atelier-simple.atelier-desktop #layer-menu .layer-list{padding:6px 0}
 body.atelier-simple.atelier-desktop #layer-menu .layer-row{min-height:62px;gap:6px;padding:4px 2px}
 body.atelier-simple.atelier-desktop #layer-menu .layer-quick-actions{padding:12px 0;gap:6px;border-top:1px solid var(--control-border)}
 body.atelier-simple.atelier-desktop #layer-menu .layer-quick-actions button{font-size:11px}
 body.atelier-simple.atelier-desktop #layer-menu .layer-menu-tip{padding:10px 0 0;font-size:11px}
 body.atelier-simple.atelier-desktop #layer-menu .layer-step{gap:3px}
}
@media(max-width:1023px),(max-height:599px){
 body.atelier-simple.atelier-direct #studio-view .workspace>#layer-menu:not([hidden]){inset:auto 12px max(12px,env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:480px;max-height:min(58dvh,560px);margin-inline:auto;padding:0!important;border-radius:16px;box-shadow:0 16px 60px #26352830}
 body.atelier-simple.atelier-direct #layer-menu .layer-list{flex:1 1 auto}
}