/* Phone workspace only. Desktop layout and exported artwork are unchanged. */
@media (max-width:850px){
  html{height:100%;overflow:hidden;overscroll-behavior:none}
  body{position:fixed;top:var(--mobile-top,0px);left:0;width:100%;height:var(--mobile-height,100vh);height:var(--mobile-height,100dvh);overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:none}
  header{flex:0 0 auto;min-height:0;height:auto;gap:5px 10px;padding:calc(6px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 6px max(10px,env(safe-area-inset-left,0px))}
  .brand{gap:7px}.brand-symbol{width:29px;height:29px;font-size:21px;border-radius:9px}.brand b{font-size:15px}.brand small{font-size:7px;letter-spacing:1.5px;margin-top:1px}
  .project input{width:116px;min-height:36px;font-size:16px;padding:5px}.project span{display:none}
  nav{width:100%;gap:4px;justify-content:space-between;flex-wrap:wrap}nav button,nav #exportBtn{flex:1;min-height:44px;font-size:11px;padding:6px 5px}
  .workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(132px,min(52%,380px)) minmax(0,1fr);flex:1;min-height:0;height:auto;overflow:hidden}
  main{position:relative;display:flex;flex-direction:column;gap:4px;padding:6px max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px));height:100%;min-height:0;overflow:hidden}
  .canvas-top{flex:0 0 auto;min-height:40px;gap:8px}.canvas-top>div:first-child{display:none}.layout-switch{margin-left:auto}.layout-switch select{min-height:40px;max-width:180px;font-size:16px;padding:5px 8px}
  .canvas-toolbar{flex:0 0 auto;min-height:44px;margin:0;gap:2px;justify-content:flex-start;white-space:nowrap}.canvas-toolbar>span{display:none}.canvas-toolbar>button{min-height:44px;padding:5px 7px;font-size:11px}.mode-switch{display:flex;margin-right:auto;padding:2px}.mode-switch button{min-height:40px;padding:5px 10px;font-size:12px}
  .stage{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:6px;border-radius:13px}
  .stage-top{display:none}.stage-bottom{display:contents}.stage-bottom>span{display:none}.stage-bottom #pngBtn{position:absolute;top:6px;left:max(10px,env(safe-area-inset-left,0px));min-height:40px;padding:5px 9px;font-size:11px}
  .mobile-canvas-fit{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;min-width:0;width:100%}
  .canvas-wrap{flex:none;width:var(--mobile-canvas-width,100%);max-width:100%;margin:0;filter:none}#keyboard{width:100%;height:auto;border-radius:8px;touch-action:none;-webkit-user-select:none;user-select:none}
  .guide-strip,.device-note{display:none}
  aside{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;display:block;border-left:0;border-top:1px solid var(--line);overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scroll-padding:58px 0 calc(16px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
  .library{padding:14px 14px 12px}.editor{padding:0 14px 16px;min-height:0;overflow:visible}.editor .tabs{position:sticky;top:0;z-index:3;background:#fffffff5;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);margin-bottom:14px;padding:4px 0;gap:2px}.tabs button{min-height:44px;font-size:12px;padding:6px 3px}
  .asset-grid,.layer-list{max-height:none;overflow:visible}.asset-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}.asset-card{min-height:54px}.asset-card img{-webkit-user-drag:none}.upload-small{display:inline-flex;align-items:center;min-height:44px;padding:6px 10px}
  .control input:not([type=range]):not([type=checkbox]):not([type=color]),.control select,.control textarea{font-size:16px;min-height:44px}.control input[type=range]{height:44px;min-height:44px;touch-action:pan-y}.control input[type=range]::-webkit-slider-thumb{min-width:24px;min-height:24px}.control input[type=range]::-moz-range-thumb{width:24px;height:24px}
  aside button{min-height:44px}.layer-item .layer-small{min-width:36px}.layer-select{min-width:0}.check-row{min-height:44px}.check-row input{width:22px;height:22px}.check-row label{padding:8px 0}.sound-card .play-sound{width:44px;height:44px;flex-shrink:0}
  .font-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sound-grid{grid-template-columns:1fr}.scope-heading{margin-bottom:14px}.scope-heading p{font-size:12px}footer{padding:12px 14px;font-size:10px}
  dialog{max-height:calc(var(--mobile-height,100dvh) - 20px);width:calc(100% - 20px);max-width:560px;margin:auto;padding:25px 20px calc(20px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}dialog input,dialog select,dialog textarea{font-size:16px!important}dialog button{min-height:44px}.modal-close{min-width:44px}#toast{bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px)}
  .mobile-short .canvas-top,.mobile-short .layout-switch select{min-height:32px}.mobile-short .canvas-toolbar,.mobile-short .canvas-toolbar>button{min-height:34px}.mobile-short .mode-switch button{min-height:30px}.mobile-short .stage-bottom #pngBtn{min-height:32px}
}
@media(max-width:360px){nav{flex-wrap:nowrap}nav button,nav #exportBtn{min-width:0;font-size:10px;padding:5px 3px}nav #exportBtn{flex:1.6;white-space:normal;line-height:1.2}}

.skin-night-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;margin-bottom:12px}.skin-night-bar label{display:flex;align-items:center;gap:6px;font-size:12px}.skin-night-bar select{min-height:40px}.skin-night-bar input{width:20px;height:20px;min-height:0}
@media(max-width:850px){.skin-night-bar{margin-bottom:0;min-height:40px}.skin-night-bar label{font-size:11px}.skin-night-bar select{font-size:16px;min-height:40px;padding:4px}.skin-night-bar label{min-height:40px}}

@media(max-width:850px){.stage-bottom #pngBtn{top:50px}}