/* Overlay core: stage, badge, popup, animations and looks.
 Shared 1:1 by the app preview (Overlay page) and the OBS overlay (/overlay). */

.stage {
  position: relative;
  width: min(100%, calc((100vh - var(--topH) - 250px) * 16 / 9));
  min-width: min(100%, 320px);
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  container-type: inline-size;
  background:
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.2px) 0 0 / var(--grid) var(--grid),
    radial-gradient(ellipse at 50% 45%, #141417 0%, #0b0b0d 70%);
  box-shadow: inset 0 0 80px rgba(0,0,0,.6);
  --acc: #FBBF24;
  --grid: 26px;
  --inset: 24px;
  --badge-r: 17px;
  --popup-r: 20px;
  --badge-fs: 13px;
  --badge-px: 14px;
  --badge-py: 8px;
  --popup-w: 190px;
  --popup-fs: 15px;
  --spring: var(--spring-soft);
  --spring-dur: .62s;
}
.stage.hard { --spring: var(--spring-hard); --spring-dur: .5s; }

.slot { position: absolute; transition: opacity .35s ease; }
.slot.tl { top: var(--inset); left: var(--inset); }
.slot.tc { top: var(--inset); left: 50%; transform: translateX(-50%); }
.slot.tr { top: var(--inset); right: var(--inset); }
.slot.bl { bottom: var(--inset); left: var(--inset); }
.slot.bc { bottom: var(--inset); left: 50%; transform: translateX(-50%); }
.slot.br { bottom: var(--inset); right: var(--inset); }
.slot.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.stage.docked .slot { opacity: 0; pointer-events: none; }
.stage.docked .fx { visibility: hidden; }
.slot .bbox { position: absolute; inset: -7px; border: 1.5px dashed var(--acc); border-radius: calc(var(--badge-r) + 6px); opacity: 0; pointer-events: none; }
.slot.popup-slot .bbox { border-radius: calc(var(--popup-r) + 6px); }
.slot.a-bbox .bbox { animation: bboxFx .75s ease-out both; }
@keyframes bboxFx { 0% { opacity: 0; transform: scale(1.14); } 25% { opacity: .95; } 100% { opacity: 0; transform: scale(1); } }

/* stage effects */
.fx { position: absolute; pointer-events: none; }
.fx-pulse { inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 62%); }
.fx-pulse.go { animation: pulseFx .95s ease-out; }
@keyframes pulseFx { 0% { opacity: .95; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.4); } }
.fx-ring { left: 50%; top: 50%; width: calc(var(--popup-w) * .9); aspect-ratio: 1; border: 2px solid var(--acc); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.3); }
.fx-ring.go { animation: ringFx .9s cubic-bezier(.2,.8,.2,1); }
@keyframes ringFx { 0% { opacity: .8; transform: translate(-50%, -50%) scale(.35); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); } }
.fx-scan { left: 0; right: 0; top: -2px; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--acc) 30%, var(--acc) 70%, transparent); box-shadow: 0 0 18px var(--acc), 0 0 40px color-mix(in srgb, var(--acc) 50%, transparent); }
.fx-scan.go { animation: scanFx .8s cubic-bezier(.4,0,.2,1); }
@keyframes scanFx { 0% { opacity: .7; transform: translateY(0); } 100% { opacity: 0; transform: translateY(calc(100cqw * 9 / 16 + 4px)); } }
.fx-hue { inset: 0; opacity: 0; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--acc) 35%, transparent) 50%, transparent 70%); transform: translateX(-100%); }
.fx-hue.go { animation: hueFx .9s cubic-bezier(.4,0,.2,1); }
@keyframes hueFx { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 0; transform: translateX(100%); } }

/* ─── Badge ───────────────────────────────────────────────── */
.badge {
  position: relative; overflow: hidden;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--badge-py) var(--badge-px);
  border-radius: var(--badge-r);
  font-size: var(--badge-fs); font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.15;
  transition: border-radius .3s var(--ease), padding .3s var(--ease), font-size .3s var(--ease), color .35s, background .35s, border-color .35s, box-shadow .35s, opacity .28s, transform .35s var(--ease), filter .28s;
}
.badge > * { position: relative; z-index: 1; }
.badge::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--acc); opacity: 0; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.badge-row { display: inline-flex; align-items: center; gap: .55em; }
.badge .ico { position: relative; width: .62em; height: .62em; border-radius: 50%; background: var(--acc); box-shadow: 0 0 .6em var(--acc); flex: none; animation: pulse 1.6s ease-in-out infinite; transition: width .3s var(--spring-soft), height .3s var(--spring-soft), background .35s, box-shadow .35s, opacity .2s, transform .3s var(--spring-soft), margin .3s; }
.badge .ico::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--acc); opacity: 0; }
.badge .ico.min { width: .42em; height: .42em; box-shadow: none; animation: none; }
.badge .ico.match { background: currentColor; box-shadow: none; }
.badge .ico.match::after { border-color: currentColor; }
.stage.no-icon .badge .ico { width: 0; height: 0; opacity: 0; transform: scale(0); margin-right: -.55em; }
.badge .sub { font-size: .7em; font-weight: 600; letter-spacing: .6px; opacity: .72; text-transform: none; }
.badge .sub span { display: inline-block; }
.badge .sub span.ty { animation: typeIn .28s var(--ease) both; }
@keyframes typeIn { from { opacity: 0; transform: translateY(5px) scale(.6); } to { opacity: 1; transform: none; } }
.badge .sub.typing::after { content: ''; display: inline-block; width: 2px; height: .9em; background: var(--acc); margin-left: 3px; vertical-align: -1px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.badge.gone { animation: none !important; opacity: 0; transform: scale(.45); filter: blur(4px); pointer-events: none; }
.badge.ghost { pointer-events: none; }

/* ─── Popup ───────────────────────────────────────────────── */
.popup {
  position: relative; overflow: hidden;
  width: var(--popup-w); max-width: 80vw;
  padding: calc(var(--popup-fs) * 1.1) calc(var(--popup-fs) * .9);
  border-radius: var(--popup-r);
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  transition: border-radius .3s var(--ease), width .3s var(--ease), padding .3s var(--ease), color .35s, background .35s, border-color .35s, box-shadow .35s, opacity .28s, transform .35s var(--ease), filter .28s;
}
.popup > * { position: relative; z-index: 1; }
.popup::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--acc); opacity: 0; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.popup::after { content: ''; position: absolute; inset: -40%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.17) 50%, transparent 60%); transform: translateX(-70%); }
.popup.gone { animation: none !important; opacity: 0; transform: scale(.5); filter: blur(4px); pointer-events: none; }
.popup .pico { width: calc(var(--popup-fs) * 1.4); height: calc(var(--popup-fs) * 1.4); overflow: visible; stroke: var(--acc); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--acc)); }
.popup .pico path, .popup .pico circle { stroke-dasharray: 100; stroke-dashoffset: 0; }
.popup .pico .hand { transform-origin: 12px 12px; }
.popup .t { font-family: var(--display); font-size: var(--popup-fs); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--acc); line-height: 1.1; }
.popup .t span { display: inline-block; }
.popup .s { font-size: calc(var(--popup-fs) * .66); color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ─── Animation slots (one class at a time) ───────────────── */
.badge.in, .badge.a-pop { animation: badgeIn var(--spring-dur) var(--spring) both; }
.popup.in, .popup.a-pop { animation: popIn var(--spring-dur) var(--spring) both; }
@keyframes badgeIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes popIn { from { opacity: 0; transform: scale(.55) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.badge.out { animation: badgeOut .18s ease-in both; }
.popup.out { animation: popOut .2s ease-in both; }
@keyframes badgeOut { to { opacity: 0; transform: translateY(-10px) scale(.94); } }
@keyframes popOut { to { opacity: 0; transform: scale(.88) translateY(6px); filter: blur(5px); } }

/* full state entrance: content animates too */
.popup.in::after { animation: shine 1s .3s cubic-bezier(.4,0,.2,1); }
@keyframes shine { 0% { transform: translateX(-70%); opacity: 1; } 100% { transform: translateX(70%); opacity: 0; } }
.popup.in .pico path, .popup.in .pico circle { animation: draw .6s cubic-bezier(.4,0,.2,1) .12s both; }
.popup.in .pico .hand path { animation-delay: .32s; }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.popup.in .pico.live .hand { animation: snapBack .9s cubic-bezier(.2,1.25,.35,1) .35s both; }
@keyframes snapBack { from { transform: rotate(-250deg); } to { transform: rotate(0deg); } }
.popup.in .pico.live { animation: liveFlash .55s .95s ease-out both; }
@keyframes liveFlash {
  0% { filter: drop-shadow(0 0 6px var(--acc)); transform: scale(1); }
  30% { filter: drop-shadow(0 0 16px var(--acc)) drop-shadow(0 0 34px var(--acc)); transform: scale(1.22); }
  55% { filter: drop-shadow(0 0 3px var(--acc)); transform: scale(1); }
  75% { filter: drop-shadow(0 0 14px var(--acc)); transform: scale(1.1); }
  100% { filter: drop-shadow(0 0 7px var(--acc)); transform: scale(1); }
}
.popup.in .pico.delayed .hand { animation: rewind 1.15s cubic-bezier(.3,.9,.3,1) .35s both; }
@keyframes rewind { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.popup.in .t span { animation: letterIn .55s var(--spring) both; animation-delay: calc(150ms + var(--i) * 26ms); }
@keyframes letterIn { from { opacity: 0; transform: translateY(10px) scale(.8); } to { opacity: 1; transform: none; } }
.popup.in .s { animation: subIn .5s ease-out .5s both; }
@keyframes subIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.stage.s-delayed .badge.in::before { animation: wipeFx .8s .1s var(--ease) both; }
.stage.s-live .badge.in .ico::after { animation: ping 1s .4s ease-out; }

/* look change: material flip */
.badge.a-flip, .popup.a-flip { animation: flipIn .75s var(--spring) both; backface-visibility: hidden; }
@keyframes flipIn { 0% { opacity: 0; transform: perspective(700px) rotateY(-100deg) scale(.9); } 55% { opacity: 1; } 100% { opacity: 1; transform: perspective(700px) rotateY(0) scale(1); } }
.popup.a-flip::after { animation: shine .9s .35s cubic-bezier(.4,0,.2,1); }

/* color change: paint sweep */
.badge.a-wipe, .popup.a-wipe { animation: paintPulse .8s ease-out both; }
.badge.a-wipe::before, .popup.a-wipe::before { animation: wipeFx .8s var(--ease) both; }
@keyframes wipeFx { 0% { transform: scaleX(0); opacity: .6; } 55% { transform: scaleX(1); opacity: .6; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes paintPulse { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* corners change: jelly */
.badge.a-jelly, .popup.a-jelly { animation: jelly .75s var(--spring) both; }
@keyframes jelly { 0% { transform: scale(1, 1); } 30% { transform: scale(1.1, .9); } 55% { transform: scale(.95, 1.06); } 75% { transform: scale(1.02, .98); } 100% { transform: scale(1, 1); } }

/* instant live: strobe */
.badge.a-flash, .popup.a-flash { animation: strobe .55s ease-out both; }
@keyframes strobe { 0% { filter: brightness(1); } 12% { filter: brightness(3.2) saturate(0); } 26% { filter: brightness(1); } 40% { filter: brightness(2.2); } 100% { filter: brightness(1); } }

/* motion mode: wobble demo */
.badge.a-wobble, .popup.a-wobble { animation: wobble .95s var(--spring) both; }
@keyframes wobble { 0% { transform: none; } 18% { transform: translateX(-7px) rotate(-2.5deg); } 38% { transform: translateX(6px) rotate(2deg); } 58% { transform: translateX(-3px) rotate(-1deg); } 78% { transform: translateX(2px); } 100% { transform: none; } }

/* position change: glide handled in JS, no keyframes */
.badge.a-glide { animation: none; }

/* status dot micro animations (keep the idle pulse running) */
.badge .ico.a-dotin { animation: dotIn .55s var(--spring) both, pulse 1.6s ease-in-out .6s infinite; }
@keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } }
.badge .ico.a-tick { animation: tickFx .5s var(--spring) both, pulse 1.6s ease-in-out .5s infinite; }
@keyframes tickFx { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
.badge .ico.a-ping::after { animation: ping .8s ease-out; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }

/* ─── Looks (own skins) ───────────────────────────────────── */
.t-stone .badge { background: rgba(13,13,16,.94); border: 1px solid rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.45); }
.t-stone .popup { background: rgba(13,13,16,.94); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 40px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--acc) 22%, transparent); }

.t-ghost .badge { background: transparent; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.8); padding-inline: 4px; }
.t-ghost .popup { background: rgba(0,0,0,.35); color: #fff; }

.t-ember .badge { background: color-mix(in srgb, var(--acc) 16%, #0e0e11); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); color: var(--acc); box-shadow: 0 0 20px color-mix(in srgb, var(--acc) 22%, transparent); }
.t-ember .popup { background: color-mix(in srgb, var(--acc) 10%, #0e0e11); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); box-shadow: 0 0 34px color-mix(in srgb, var(--acc) 18%, transparent); }

.t-tactical .badge { background: rgba(0,0,0,.88); border: 2px solid var(--acc); color: var(--acc); font-family: var(--mono); font-weight: 600; letter-spacing: .5px; border-radius: min(var(--badge-r), 5px); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 35%, transparent); background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.035) 2px 3px); }
.t-tactical .popup { background: rgba(0,0,0,.88); border: 2px solid var(--acc); border-radius: min(var(--popup-r), 6px); font-family: var(--mono); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.035) 2px 3px); }
.t-tactical .popup .t { font-family: var(--mono); letter-spacing: .5px; }

.t-obsidian .badge { background: rgba(18,18,22,.55); border: 1px solid rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.35); }
.t-obsidian .popup { background: rgba(18,18,22,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 40px rgba(0,0,0,.4); }

.t-frost .badge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 24px rgba(0,0,0,.25); }
.t-frost .popup { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 40px rgba(0,0,0,.3); }
.t-frost .popup .s { color: rgba(255,255,255,.75); }