/* rbx/pictures.css — the "My Pictures" picker (rbx/pictures.js), the publish dialog's cover
   picture, decal/image rows in NeoStudio's Properties, and on-screen ImageLabels. */
.np-back{ position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.np-back[hidden]{ display:none; }
.np-modal{ width:min(720px, 100%); max-height:min(640px, calc(100vh - 32px)); display:flex; flex-direction:column; background:#2b2b2b; color:#e8e8e8; border:1px solid #474747;
  border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.6); font-family:'Nunito Sans', system-ui, sans-serif; overflow:hidden; }
.np-head{ display:flex; align-items:center; padding:14px 16px 4px; }
.np-head h3{ margin:0; font-size:18px; font-weight:800; flex:1; }
.np-x{ border:none; background:#3a3a3a; color:#e8e8e8; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:14px; }
.np-sub{ padding:0 16px 10px; color:#a8a8a8; font-size:13px; }
.np-grid{ flex:1; min-height:160px; overflow-y:auto; padding:4px 16px 12px; display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; align-content:start; }
.np-tile{ position:relative; border:2px solid #3c3c3c; background:#232323; border-radius:10px; cursor:pointer; padding:0; overflow:hidden; color:#e8e8e8; font:inherit;
  display:flex; flex-direction:column; aspect-ratio:1 / 1.12; text-align:left; }
.np-tile:hover, .np-tile:focus-visible{ border-color:#0f84ff; outline:none; }
.np-tile.cur{ border-color:#3ddc84; }
.np-tile.new{ border-color:#0f84ff; box-shadow:0 0 0 3px rgba(15,132,255,.35); }
.np-tile img{ flex:1; min-height:0; width:100%; object-fit:contain; background:repeating-conic-gradient(#2e2e2e 0 25%, #262626 0 50%) 0 0 / 16px 16px; display:block; }
.np-tile .nm{ font-size:12px; padding:5px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#1f1f1f; }
.np-up{ align-items:center; justify-content:center; gap:6px; border-style:dashed; text-align:center; font-size:13px; font-weight:700; color:#cfe6ff; }
.np-up .plus{ font-size:34px; line-height:1; font-weight:400; }
.np-up:disabled{ opacity:.6; cursor:progress; }
.np-del{ position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:8px; border:none; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-size:13px; opacity:0; transition:opacity .15s; }
.np-tile:hover .np-del, .np-tile:focus-within .np-del{ opacity:1; }
@media (hover:none){ .np-del{ opacity:1; } }
.np-loading{ grid-column:1 / -1; color:#a8a8a8; font-size:13px; padding:8px 2px; }
.np-foot{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid #3a3a3a; }
.np-msg{ flex:1; min-width:0; font-size:12.5px; color:#a8a8a8; }
.np-msg.bad{ color:#ff8a8a; }
.np-btn{ border:1px solid #4a4a4a; background:#3a3a3a; color:#e8e8e8; border-radius:8px; padding:7px 14px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.np-btn.ghost{ background:transparent; }
.np-btn[hidden]{ display:none; }

/* publish dialog: cover picture */
.pub-cover{ display:flex; align-items:center; gap:10px; }
.pub-cover .pc-img{ width:96px; height:96px; border-radius:10px; object-fit:cover; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); display:block; }
.pub-cover .pc-none{ width:96px; height:96px; border-radius:10px; border:2px dashed rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:11px; color:rgba(255,255,255,.55); text-align:center; padding:6px; }
.pub-cover button{ border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:inherit; border-radius:8px; padding:7px 12px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }

/* NeoStudio Properties: a picture row */
.sp-pic{ display:flex; align-items:center; gap:8px; padding:8px; flex-wrap:wrap; }
.sp-pic img{ width:56px; height:56px; object-fit:contain; border-radius:6px; border:1px solid #4a4a4a; background:repeating-conic-gradient(#2e2e2e 0 25%, #262626 0 50%) 0 0 / 12px 12px; }
.sp-pic .none{ width:56px; height:56px; border-radius:6px; border:1px dashed #5a5a5a; display:flex; align-items:center; justify-content:center; color:#8a8a8a; font-size:20px; }
.sp-pic button{ border:1px solid #4a4a4a; background:#353535; color:#e8e8e8; font:inherit; font-size:12px; padding:4px 10px; border-radius:3px; cursor:pointer; }
.sp-pic button.primary{ background:#1f6fd1; border-color:#1f6fd1; color:#fff; }
.sp-pic button.danger{ border-color:#7a2a2a; color:#ff9b9b; }
.sp-pic .hint{ flex-basis:100%; color:#a8a8a8; font-size:11.5px; line-height:1.4; }
.sp-pic .sp-picid{ font-family:Menlo,Consolas,monospace; color:#9cdcfe; user-select:all; -webkit-user-select:all; }

/* on-screen ImageLabel */
.world-ui-img{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; }
.world-ui-img img{ display:block; width:100%; height:auto; border-radius:6px; user-select:none; -webkit-user-drag:none; }
.world-ui-img.empty{ aspect-ratio:1 / 1; border:2px dashed rgba(255,255,255,.55); border-radius:8px; background:rgba(10,14,26,.35); }
.world-ui-img.empty img{ display:none; }
body.sd-on:not(.rbx-studio) .world-ui-img{ pointer-events:auto; cursor:pointer; }

/* Home: a game's own cover picture fills its tile */
.nh-tile .th img.cover, img.cover{ object-fit:cover; }