/* ════════════════════════════════════════════════════════════
   STUDIO — the editable version of the page
   ════════════════════════════════════════════════════════════ */
body.studio{background:var(--ink);padding-bottom:80px}

.sbar{
  position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px clamp(14px,3vw,32px);background:var(--panel);border-bottom:1px solid var(--line);
}
.sbar__brand{display:flex;align-items:center;gap:10px;min-width:0}
.sbar__brand span{
  font-family:var(--fat);font-size:19px;background:var(--gold);color:#141005;
  width:32px;height:32px;display:grid;place-items:center;border-radius:6px;
}
.sbar__brand b{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.26em}
.sbar__brand i{font-style:normal;font-family:var(--disp);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar__state{flex:1;font-family:var(--disp);font-weight:600;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.sbar__state b{color:var(--gold2)}
.sbar__state .dirty{color:#ffce5a}
.sbar__acts{display:flex;gap:8px;flex-wrap:wrap}

.stabs{
  position:sticky;top:57px;z-index:99;display:flex;gap:2px;overflow-x:auto;
  padding:0 clamp(14px,3vw,32px);background:var(--ink2);border-bottom:1px solid var(--line);
}
.stabs button{
  padding:13px 16px;font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut2);border-bottom:2px solid transparent;white-space:nowrap;
}
.stabs button:hover{color:var(--txt)}
.stabs button.is-on{color:var(--gold2);border-bottom-color:var(--gold)}

.swrap{max-width:1080px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(14px,3vw,32px)}
.spanel{display:none}
.spanel.is-on{display:block;animation:sfade .25s ease}
@keyframes sfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.spanel h2{font-family:var(--fat);font-weight:400;font-size:clamp(24px,3.4vw,34px);margin:0 0 8px}
.spanel h3{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mut);margin:30px 0 12px;
  padding-top:16px;border-top:1px solid var(--line)}
.spanel h3.danger{color:#ff8a8a;border-top-color:rgba(213,10,10,.3)}
.slede{color:var(--mut);font-size:14px;max-width:74ch;margin:0 0 22px}
.hint{color:var(--mut2);font-size:12.5px;margin:8px 0 0;max-width:74ch}
.hint code,.slede code,.pubcard code{background:rgba(255,255,255,.07);padding:1px 6px;border-radius:3px;font-size:12px}
.hint a{color:var(--gold2);text-decoration:underline}
.link{color:var(--gold2);text-decoration:underline;font:inherit}

.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.f{display:flex;flex-direction:column;gap:6px}
.f > span{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut2)}
.f > i{font-style:normal;font-size:11.5px;color:var(--mut2);line-height:1.45}
.f input,.f select,textarea{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--txt);
  padding:10px 12px;font-family:var(--body);font-size:13.5px;width:100%}
.f input:focus,textarea:focus,.f select:focus{outline:2px solid rgba(201,162,39,.5);border-color:transparent}
textarea{resize:vertical;line-height:1.6}
.f .vrow{display:flex;gap:8px;align-items:center}
.f .vrow input[type=text]{flex:1}
.vchk{display:flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut2)}
.vchk input{accent-color:var(--green)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.row input[type=text]{flex:1;min-width:200px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;color:var(--txt);padding:10px 12px;font-size:13.5px}

.heroprev{max-width:240px;border-radius:10px;margin-top:14px;border:1px solid var(--line)}

/* ── games ── */
.gitem{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px;margin-bottom:14px}
.gitem__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.gitem__head b{font-family:var(--fat);font-size:19px}
.gitem .sgrid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* ── film ── */
.drop{
  border:2px dashed var(--line2);border-radius:14px;padding:34px 20px;text-align:center;
  display:grid;gap:7px;transition:.18s;background:rgba(255,255,255,.02)
}
.drop.is-over{border-color:var(--gold);background:rgba(201,162,39,.08)}
.drop b{font-family:var(--fat);font-weight:400;font-size:20px}
.drop span{color:var(--mut);font-size:13.5px}
.drop i{font-style:normal;color:var(--mut2);font-size:12px;max-width:60ch;margin:6px auto 0;line-height:1.5}
.upbar{position:relative;height:26px;background:var(--panel);border-radius:7px;overflow:hidden;margin-top:14px}
.upbar__fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--gold3),var(--gold));transition:width .2s}
.upbar span{position:relative;display:block;line-height:26px;text-align:center;font-family:var(--disp);
  font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase}

.clips{display:grid;gap:12px;margin-top:22px}
.citem{display:grid;grid-template-columns:132px 1fr auto;gap:16px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.citem.is-pinned{border-color:rgba(201,162,39,.55)}
.citem__thumb{position:relative;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:16/9}
.citem__thumb img{width:100%;height:100%;object-fit:cover}
.citem__thumb b{position:absolute;left:6px;top:6px;font-family:var(--fat);font-size:13px;
  background:rgba(8,8,10,.8);padding:2px 7px;border-radius:4px;color:var(--gold2)}
.citem__thumb i{position:absolute;right:6px;bottom:6px;font-style:normal;font-family:var(--disp);
  font-size:10px;letter-spacing:.1em;background:rgba(8,8,10,.8);padding:2px 6px;border-radius:4px}
.citem__body{display:grid;gap:10px;min-width:0}
.citem__body .sgrid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.citem__acts{display:flex;flex-direction:column;gap:6px}
.citem__acts .mini{white-space:nowrap}
.citem__src{font-family:var(--disp);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.citem__src.up{color:#5fe0a5}
.citem__src.missing{color:#ff8a8a}
.tagpills{display:flex;gap:6px;flex-wrap:wrap}
.tagpill{font-family:var(--disp);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 8px;border-radius:4px;border:1px solid var(--line);color:var(--mut2)}
.tagpill.is-on{border-color:var(--gold);color:var(--gold2);background:rgba(201,162,39,.14)}

/* ── publish ── */
.pubcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:12px;padding:18px;margin:18px 0;font-size:13.5px;line-height:1.7;color:var(--mut)}
.pubcard b{color:#fff}
.pubcard .ok{color:#5fe0a5}
.pubcard .dirty{color:#ffce5a}
.deploy{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin-top:14px;font-family:ui-monospace,Menlo,monospace;font-size:12px;
  color:var(--mut);white-space:pre-wrap;line-height:1.7}

/* ── share rows reuse the public styles ── */
#shareList{display:flex;flex-direction:column;gap:8px;margin-top:14px}

@media(max-width:720px){
  .citem{grid-template-columns:1fr}
  .citem__acts{flex-direction:row;flex-wrap:wrap}
}