/* Compact creation screen, with real existing 3D preview as primary and PINOC concept art optional. */
@media(max-width:760px) and (orientation:portrait){
 #create .creation-reference-header{padding:0 0 10px!important}
 #create .creation-logo{font-size:clamp(30px,8.5vw,46px)!important}
 #create .creation-subtitle{margin-top:8px!important}
 #create .creation-reference-layout{gap:8px!important}
 #create .creation-reference-preview{height:clamp(250px,36vh,320px)!important;min-height:0!important}
 #create .creation-reference-layout .file{padding:12px 14px!important}
 #create .file label{margin:7px 0 4px!important}
 #create .creation-appearance{margin-top:10px!important}
 #create #createBtn{margin:10px auto 12px!important;min-height:60px!important}
}
#create .creation-reference-preview .creation-live-model{position:absolute;inset:4px 4px 60px;z-index:3;min-width:0;display:flex;flex-direction:column}
#create .creation-live-model .rpg-preview{flex:1;min-height:0!important;height:auto!important;overflow:hidden}
#create .creation-live-model .preview-controls{display:flex;justify-content:center;gap:5px;margin:3px 0}
#create .creation-live-model .preview-controls button{min-height:38px;padding:6px 10px!important;font-size:11px!important}
#create .creation-reference-preview .pinoc-preview-test{display:none!important;inset:4px 4px 60px!important}
#create .creation-reference-preview.show-concept .pinoc-preview-test{display:flex!important;z-index:4}
#create .creation-reference-preview.show-concept .creation-live-model{visibility:hidden}
#create .creation-reference-preview .creation-preview-caption{display:none}
#create .creation-preview-switch{position:absolute;z-index:6;bottom:8px;left:8px;right:8px;display:flex;gap:8px;justify-content:center}
#create .creation-preview-switch button{min-height:44px;min-width:104px;border:1px solid #899cb8;background:#091321;color:#e5ebf7;border-radius:4px;font:13px Georgia,serif;padding:7px 12px}
#create .creation-preview-switch button[aria-pressed=true]{background:#283d5c;border-color:#d5e4ff;box-shadow:0 0 8px #9ec6ff55}
@media(max-width:760px) and (orientation:portrait){
 /* Leave a clear central area between quest and gameplay controls. */
 #gameScreen .hall-location{top:calc(207px + env(safe-area-inset-top))!important}
 #gameScreen .hall-prompt{top:calc(248px + env(safe-area-inset-top))!important;left:10px!important;right:108px!important;max-height:44px!important;white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important}
 #gameScreen .hall-controls{top:calc(205px + env(safe-area-inset-top))!important}
 #gameScreen .actionline{top:calc(40% + env(safe-area-inset-top))!important;right:5px!important;gap:8px!important}
 #gameScreen .actionline .orn{width:74px!important;min-width:74px!important;max-width:74px!important;height:48px!important;font-size:9px!important;overflow:hidden!important}
 #gameScreen #talk{top:auto!important;bottom:calc(var(--touch-clearance,110px) + 300px)!important;left:12px!important;right:110px!important;max-height:90px!important;overflow:auto!important}
 /* Gameplay welcome narration must not overlap portal prompt or action buttons. */
 #gameScreen .hall-welcome,#gameScreen .hall-intro,#gameScreen .hall-story{max-width:calc(100vw - 125px)!important}
 #gameScreen .weapon-actions{right:10px!important;bottom:calc(var(--touch-clearance,110px) + 72px)!important}
 #gameScreen #skills{right:10px!important;bottom:calc(var(--touch-clearance,110px) + 218px)!important}
}

/* Portrait gameplay: separate the utility-action rail from the skill buttons.
   Earlier mobile overrides placed both groups in the same right-hand column. */
@media(max-width:760px) and (orientation:portrait){
 #gameScreen .actionline{
  right:8px!important;
  top:calc(40% + env(safe-area-inset-top))!important;
  gap:8px!important;
 }
 #gameScreen #skills{
  position:absolute!important;
  left:auto!important;
  right:102px!important;
  top:calc(40% + env(safe-area-inset-top))!important;
  bottom:auto!important;
  display:grid!important;
  grid-template-columns:60px!important;
  width:60px!important;
  max-width:60px!important;
  gap:12px!important;
 }
 #gameScreen #skills .skill{width:60px!important;min-width:60px!important;height:60px!important;min-height:60px!important}
}