.stageframe{background:var(--wine2);border:3px solid var(--ink);padding:12px;position:relative;box-shadow:8px 8px #000}.stageframe:before,.stageframe:after{content:"";pointer-events:none;background:radial-gradient(circle at 3px 3px,#ffd76a 2px,#6b3f14 2.6px,#0000 3px) 0 0/12px 6px repeat-x;height:6px;animation:.5s steps(2,end) infinite stage-chase;position:absolute;left:6px;right:6px}.stageframe:before{top:3px}.stageframe:after{animation-direction:reverse;bottom:3px}@keyframes stage-chase{to{background-position-x:12px}}.stagewrap{width:100%;max-width:100%;aspect-ratio:var(--ar,320 / 168);background:#0b0408;position:relative;overflow:hidden}.stage{width:100%;height:100%;image-rendering:pixelated;display:block}.onair{font:400 13px/1 var(--f-px);color:#fff;background:#160a12b3;border:2px solid #000;align-items:center;gap:6px;padding:3px 7px;display:flex;position:absolute;top:8px;left:8px}.onair i{background:var(--red);width:9px;height:9px;animation:1s steps(2,end) infinite stage-blink}@keyframes stage-blink{50%{opacity:.2}}.bubble{z-index:3;max-width:min(40%,290px);color:var(--ink);background:var(--white);border:3px solid var(--ink);font:600 clamp(12px, 1.5vw, 15.5px)/1.25 var(--f-tx);padding:8px 11px 9px;position:absolute;box-shadow:4px 4px #0000008c}.bubble .rest{opacity:0}.bubble b{font:400 11px/1 var(--f-px);color:var(--pink);letter-spacing:.06em;margin-bottom:3px;display:block}.bubble:after{content:"";left:var(--tail,10px);background:var(--white);border:3px solid var(--ink);clip-path:polygon(0 0,100% 0,0 100%);border-top:0;width:12px;height:10px;position:absolute;bottom:-11px}.bubble__short{display:none}.stageframe.is-narrow .bubble{max-width:none;padding:5px 8px 6px;font-size:12.5px;line-height:1.22;inset:auto 5px 5px;box-shadow:3px 3px #0000008c}.stageframe.is-narrow .bubble:after,.stageframe.is-narrow .onair{display:none}.stageframe.is-narrow .bubble b{color:#fff;background:var(--pink);vertical-align:1px;margin:0 6px 0 0;padding:2px 4px;font-size:10px;display:inline-block}.stageframe.is-narrow .bubble__long{display:none}.stageframe.is-narrow .bubble__short{display:inline}.tags{z-index:2;pointer-events:none;position:absolute;inset:0}.tag{color:var(--ink);background:var(--gold);border:2px solid var(--ink);font:400 11px/1 var(--f-px);white-space:nowrap;padding:2px 5px;animation:.3s steps(4,end) both stage-rise;position:absolute;transform:translate(-50%,-100%)}@keyframes stage-rise{0%{opacity:0;transform:translate(-50%,-60%)}}.logo-art{width:240px;height:34px;image-rendering:pixelated;filter:drop-shadow(3px 3px #000);display:block}.wardrobe{grid-template-columns:330px 1fr;align-items:start;gap:22px;display:grid}.wd-preview{position:sticky;top:14px}.wd-stage{border-bottom:3px solid var(--ink);background:radial-gradient(at 50% 92%,#ffd76a73,#0000 60%),repeating-linear-gradient(90deg,#3d1129 0 14px,#34102a 14px 28px);place-items:center;padding:14px 0 6px;display:grid}.wd-canvas{width:228px;height:240px;image-rendering:pixelated;display:block}.wd-poses{flex-wrap:wrap;gap:6px;padding:12px 14px 4px;display:flex}.wd-poses button{color:var(--ink);background:var(--white);border:2px solid var(--ink);font:400 12px/1 var(--f-px);padding:6px 8px}.wd-poses button.is-on{background:var(--gold)}.wd-name{font:400 12px/1 var(--f-px);gap:6px;padding:10px 14px 4px;display:grid}.wd-name input{color:var(--ink);background:var(--white);border:3px solid var(--ink);font:400 18px/1 var(--f-px);text-transform:uppercase;padding:9px 10px}.wd-actions{gap:10px;padding:12px 14px 16px;display:flex}.wd-actions .cta{flex:1;padding:13px 14px;font-size:18px}.wd-opts{padding:0 16px 18px}.wd-tabs{border-bottom:3px solid var(--ink);gap:0;margin:0 -16px 4px;display:flex}.wd-tabs button{color:var(--paper);background:var(--wine);border:0;border-right:3px solid var(--ink);font:400 15px/1 var(--f-px);letter-spacing:.04em;flex:1;padding:12px 8px}.wd-tabs button:last-child{border-right:0}.wd-tabs button[aria-selected=true]{color:var(--ink);background:var(--gold)}.grp{border-bottom:2px dashed #160a122e;padding:14px 0 4px}.grp:last-child{border-bottom:0}.grp h3{font:400 14px/1 var(--f-px);margin-bottom:9px}.grp h3 small{font:500 12px/1 var(--f-tx);opacity:.6;margin-left:8px}.opts{flex-wrap:wrap;gap:8px;display:flex}.opt{background:var(--white);border:3px solid var(--ink);place-items:center;width:66px;min-height:62px;padding:4px 0 12px;display:grid;position:relative;box-shadow:3px 3px #000}.opt canvas{width:54px;height:auto;image-rendering:pixelated}.opt span{font:400 9px/1 var(--f-px);opacity:.7;position:absolute;bottom:2px}.opt:hover{transform:translate(-1px,-1px);box-shadow:4px 4px #000}.opt.is-on{background:var(--gold);box-shadow:0 0 0 3px var(--pink), 3px 3px 0 #000}.opt.is-locked{background:#e2d6c2}.opt.is-locked canvas{opacity:.35;filter:grayscale()}.opt.is-locked:after,.sw.is-locked:after{content:"🔒";font-size:12px;position:absolute;top:2px;right:3px}.sw{background:var(--c);border:3px solid var(--ink);width:34px;height:34px;padding:0;position:relative;box-shadow:2px 2px #000}.sw.is-on{box-shadow:0 0 0 3px var(--paper), 0 0 0 6px var(--ink)}@media (max-width:860px){.wardrobe{grid-template-columns:1fr}.wd-preview{position:static}}@media (max-width:640px){.stageframe{padding:8px;box-shadow:5px 5px #000}.tag{padding:1px 3px;font-size:9px}.logo-art{width:180px;height:25.5px}.wd-canvas{width:152px;height:160px}.opt{width:60px}}
