/* Studio updates (/studio/, /studio/<slug>/ and the game pages' Development updates). Builds on styles.css tokens: --void, --card, --edge, --edge-hi, --text, --dim, --signal, --gc. */
.sf-wrap{padding-top:clamp(28px,5vw,56px);padding-bottom:64px}
.sf-intro{max-width:640px;margin-bottom:clamp(24px,4vw,40px)}
.sf-intro .label{color:var(--signal)}
.sf-intro h1{margin:10px 0 12px}
.sf-intro p{color:var(--dim);font-size:16px;margin:0}

.sf-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3vw,44px);align-items:start}
.sf-filters{display:grid;gap:10px;margin-bottom:22px}
.sf-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sf-sep{width:1px;height:20px;background:var(--edge);margin:0 4px}
.sf-chip{border:1px solid var(--edge);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--dim);transition:color .2s,border-color .2s,background .2s}
.sf-chip:hover{color:var(--text);border-color:var(--edge-hi)}
.sf-chip.on{color:var(--text);border-color:var(--gc,var(--signal));background:color-mix(in srgb,var(--gc,var(--signal)) 12%,transparent)}
.sf-count{color:var(--dim);margin:2px 0 0}

.sf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sf-card{border:1px solid var(--edge);border-radius:10px;background:var(--card);overflow:hidden;transition:border-color .2s,transform .2s}
.sf-card:hover,.sf-card:focus-within{border-color:color-mix(in srgb,var(--gc) 55%,var(--edge-hi))}
.sf-link{display:flex;flex-direction:column;height:100%}
.sf-link:focus-visible{outline-offset:-2px}
.sf-thumb{position:relative;display:block;aspect-ratio:16/9;background:#000;border-bottom:1px solid var(--edge)}
.sf-thumb img,.sf-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.sf-play,.sf-more{position:absolute;bottom:10px;padding:4px 8px;border-radius:999px;background:rgba(5,5,6,.8);border:1px solid var(--edge);font-size:10px}
.sf-play{left:10px;color:var(--text)}
.sf-more{right:10px;color:var(--dim)}
.sf-txt{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.sf-meta{display:flex;gap:12px;color:var(--dim);font-size:10px}
.sf-type{color:var(--gc)}
.sf-card h3{margin:0;font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.sf-card p{margin:0;color:var(--dim);font-size:14px}
.sf-games{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.sf-game{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.sf-game::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gc)}

.sf-card.lead{grid-column:1/-1}
.sf-card.lead .sf-link{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.sf-card.lead .sf-thumb{border-bottom:0;border-right:1px solid var(--edge);aspect-ratio:16/10}
.sf-card.lead .sf-txt{padding:24px 26px;justify-content:center}
.sf-card.lead h3{font-size:clamp(22px,2.2vw,30px)}
.sf-card.lead p{font-size:15px}
.sf-card.lead.no-media .sf-link{display:flex}

.sf-empty{border:1px dashed var(--edge-hi);border-radius:10px;padding:28px;color:var(--dim);text-align:center}
.sf-empty h3{margin:0 0 6px;color:var(--text);font-size:17px}
.sf-empty p{margin:0}
.sf-empty a{color:var(--signal)}

.sf-side{position:sticky;top:24px;display:grid;gap:16px}
.sf-worlds{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.sf-worlds a{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;padding:6px;border:1px solid transparent;border-radius:8px;transition:border-color .2s,background .2s}
.sf-worlds a:hover,.sf-worlds a.on{border-color:color-mix(in srgb,var(--gc) 50%,var(--edge));background:color-mix(in srgb,var(--gc) 7%,transparent)}
.sf-worlds img{width:72px;height:34px;object-fit:cover;border-radius:4px;display:block}
.sf-worlds b{display:block;font-size:13px;font-weight:500}
.sf-worlds small{color:var(--dim);font-size:9px}
.sf-side .fine{color:var(--dim);margin:8px 0 12px}
.sf-side .fine a{color:var(--text)}

/* detail */
.sf-post{padding-top:clamp(24px,4vw,48px);padding-bottom:64px}
.sf-post .crumbs{display:flex;gap:8px;color:var(--dim);margin-bottom:22px}
.sf-post .crumbs a:hover{color:var(--text)}
.sf-post-h{display:grid;gap:12px;margin-bottom:26px}
.sf-post-h h1{margin:0;font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.02em;font-weight:600}
.sf-post-h .sf-games{padding:0}
.sf-media{display:grid;gap:16px;margin:0 0 28px}
.sf-fig{margin:0;border:1px solid var(--edge);border-radius:10px;overflow:hidden;background:#000}
.sf-fig img,.sf-fig video{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;margin:0 auto}
.sf-body{max-width:680px;font-size:17px;line-height:1.7}
.sf-body p{margin:0 0 1.1em}
.sf-media-more{margin-top:10px}
.sf-follow{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0}

/* game pages */
.sf-jump small{opacity:.7;margin-left:4px}
.sf-latest{margin:clamp(40px,6vw,72px) 0;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--gc) 35%,var(--edge));scroll-margin-top:24px}
.sf-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.sf-empty-game{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;text-align:left}

@media (max-width:980px){
  .sf-layout{grid-template-columns:1fr}
  .sf-side{position:static;order:2}
  .sf-three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sf-grid,.sf-three{grid-template-columns:1fr}
  .sf-card.lead .sf-link{display:flex}
  .sf-card.lead .sf-thumb{border-right:0;border-bottom:1px solid var(--edge);aspect-ratio:16/9}
  .sf-card.lead .sf-txt{padding:16px 18px 18px}
  .sf-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .sf-chip{flex:none}
  .sf-worlds{grid-template-columns:1fr}
  .sf-body{font-size:16px}
}