/* Game style editor (design/GAME-STYLE-EDITOR.md, frames: design/frames-gse/gse.css). Locks, the Scale capsule, guides, the overflow ghost. */
.sc-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.m-brand{display:inline-flex;align-items:center;gap:var(--s-2)}
.tool .lk{display:none}
.tool.locked,.tool.locked[aria-disabled=true]{position:relative;opacity:1;color:var(--text-3);cursor:help}
.tool.locked:hover,.tool.locked[aria-disabled=true]:hover{background:transparent;color:var(--text-3)}
.tool.locked:active{transform:none}
.tool.locked .lk{position:absolute;right:3px;bottom:3px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px var(--text-3);color:var(--text)}
.tool.locked .lk .i{width:10px;height:10px;stroke-width:2}
.tip.two{position:absolute;z-index:var(--z-sticky);max-width:264px;padding:var(--s-2) 10px;animation:none;pointer-events:none;font:500 var(--fs-1)/16px var(--font);border-radius:var(--r-2);background:var(--raised);color:var(--text);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-2)}
.tip.two[hidden]{display:none}
.tip.two b{display:block;font-weight:600;color:var(--text)}
.tip.two span{display:block;margin-top:2px;color:var(--text-2);font-weight:400}
.stage{container-type:inline-size}
.scl{display:flex;align-items:center;gap:var(--s-1);padding:0 var(--s-2) 0 0;border-radius:var(--pill);background:var(--active)}
.scl[hidden]{display:none}
.scl:not(.on){padding:0;background:none}
.scl:not(.on)>:not(#t-scale){display:none}
.scl #t-scale[aria-disabled=true]{color:var(--text-3);cursor:help}
.scl #t-scale.set::after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.scl #t-scale{position:relative}
.scl .tool.sq{min-width:36px;padding:0}
.scl-track{position:relative;width:160px;height:36px;cursor:pointer;touch-action:none;border-radius:var(--r-2)}
.scl-track::before{content:"";position:absolute;left:0;right:0;top:15px;height:6px;border-radius:var(--r-xs);background:var(--line-strong)}
.scl-limit{position:absolute;top:15px;right:0;height:6px;border-radius:0 var(--r-xs) var(--r-xs) 0;background:var(--hatch),var(--raised);box-shadow:var(--edge)}
.scl-fill{position:absolute;left:0;top:15px;height:6px;border-radius:var(--r-xs);background:var(--accent)}
.scl-tick{position:absolute;top:12px;width:2px;height:12px;margin-left:-1px;border-radius:var(--r-hair);background:var(--text-2)}
.scl-thumb{position:absolute;top:10px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--white);box-shadow:0 0 0 1px var(--art-shadow-2),0 1px 4px var(--art-shadow-1)}
.scl-track:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scl-v{min-width:40px;color:var(--text);font:500 var(--fs-1)/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.scl-max{color:var(--text-3);font:500 var(--fs-1)/1 var(--font);white-space:nowrap}
.scl-max[hidden],.scl-limit[hidden],.scl-tick[hidden]{display:none}
@container (max-width:919px){.scl .tool.sq,.scl-max{display:none}.scl-track{width:112px;margin-left:6px}}
#f-new .clip,#f-new .ghost{display:none;position:absolute;inset:0}
#f-new.sc-on .clip,#f-new.sc-on .ghost{display:block}
#f-new.sc-on>img{opacity:0}
#f-new .clip{overflow:hidden;border-radius:var(--r-2);box-shadow:0 0 0 1px var(--line-hi),var(--shadow-2)}
#f-new .ghost{opacity:.22;pointer-events:none}
#f-new:not(.sc-guides) .ghost{display:none}
#f-new .clip img,#f-new .ghost img{position:absolute;max-width:none;border-radius:0;box-shadow:none;-webkit-user-drag:none;user-select:none;
  width:calc(var(--s) * 100%);height:calc(var(--s) * 100%);left:calc(var(--x) * var(--s) * -100%);top:calc(var(--y) * var(--s) * -100%)}
.g-safe,.g-title,.g-note{display:none}
#f-new.sc-guides .g-safe{display:block}
#f-new.sc-guides .g-title:not([hidden]){display:block}
#f-new.sc-guides .g-note:not([hidden]){display:block}
.g-safe{position:absolute;left:8%;right:8%;top:5%;bottom:5%;border:1px dashed rgb(var(--p-white-rgb) / .75);box-shadow:0 0 0 1px var(--art-shadow-1);pointer-events:none}
.g-safe::before,.g-safe::after{content:"";position:absolute;display:none;border:0 solid var(--accent)}
.g-safe.hit-b::after{display:block;left:-1px;right:-1px;bottom:-1px;border-bottom-width:2px}
.g-safe.hit-t::after{display:block;left:-1px;right:-1px;top:-1px;border-top-width:2px}
.g-safe.hit-r::before{display:block;top:-1px;bottom:-1px;right:-1px;border-right-width:2px}
.g-safe.hit-l::before{display:block;top:-1px;bottom:-1px;left:-1px;border-left-width:2px}
.g-title{position:absolute;border-radius:var(--r-hair);outline:1px solid rgb(var(--p-white-rgb) / .75);box-shadow:0 0 0 2px var(--art-shadow-1);pointer-events:none}
.g-title.out{outline-color:var(--amber)}
.g-title-n{position:absolute;left:-1px;bottom:100%;margin-bottom:var(--s-1);display:flex;gap:var(--s-1)}
.g-tag{height:18px;padding:0 6px;border-radius:var(--r-xs);background:rgba(10,12,22,.72);color:var(--text-2);font:500 var(--fs-0)/18px var(--font);white-space:nowrap}
.g-tag.warn{color:var(--amber)}
.g-title-max{display:none}
@container (max-width:919px){.g-title-max{display:block}}
.g-note{position:absolute;left:8%;right:8%;bottom:calc(5% + 8px);padding:var(--s-1) var(--s-2);border-radius:var(--r-xs);background:rgba(10,12,22,.72);color:var(--text-2);font:500 var(--fs-0)/16px var(--font);text-align:center;pointer-events:none}
#m-pic{position:absolute;inset:0;cursor:default;touch-action:none;outline-offset:-2px}
#m-pic[hidden]{display:none}
#m-pic.can-move{cursor:grab}
#f-new.moving #m-pic{cursor:grabbing}
#m-pic:focus-visible{outline:2px solid var(--accent)}
.tool[aria-busy=true]{opacity:.6}
.cm-hint{grid-column:2;display:flex;align-items:flex-start;gap:var(--s-2);margin-top:-2px;color:var(--text-2);font:var(--fs-1)/16px var(--font)}
.cm-hint .i{flex:none;width:var(--icon-sm);height:var(--icon-sm);margin-top:1px;color:var(--text-3)}
.cm-hint-act{grid-column:2;justify-self:start;margin:-4px 0 0 14px}
.cm-comp.has-hint{row-gap:10px}
.menu-item:has(.mi-sub){height:auto;padding-top:var(--s-2);padding-bottom:var(--s-2);align-items:flex-start}   /* FU-4: the label, and under it the two tags 4 px apart (GAME-STYLE-EDITOR §More menu) */
.menu-item:has(.mi-sub) .i{margin-top:2px}
.mi-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1);min-width:0}
.mi-sub{display:flex;flex-wrap:wrap;gap:var(--s-1)}