/* DUBBY Partner Overlays — shared styles. Built for OBS / Streamlabs / Twitch Studio browser sources. */
@font-face { font-family: 'DubbyCode'; src: url('fonts/Montserrat-BlackItalic.otf'); font-weight: 900; font-style: italic; }
@font-face { font-family: 'DubbyUI'; src: url('fonts/Montserrat-ExtraBoldItalic.otf'); font-weight: 800; font-style: italic; }

:root {
  --y: #FFF500; --ink: #0D0D10; --drip: #D20A00; --red: #E4002B;
  --e-out: cubic-bezier(.16, 1, .3, 1); --e-back: cubic-bezier(.34, 1.56, .64, 1); --e-io: cubic-bezier(.65, 0, .35, 1);
}
.theme-dark   { --p1: #202027; --p2: #0C0C0F; --stroke: #FFFFFF; --halo: rgba(0,0,0,.5);  --txt: #FFFFFF; --sub: #A9A9B6; --lab: var(--y); --chip: var(--y); --chipInk: var(--ink); --hi: var(--y); --div: rgba(255,255,255,.16); --gloss: rgba(255,255,255,.07); }
.theme-light  { --p1: #FFFFFF; --p2: #ECECF0; --stroke: #0D0D10; --halo: rgba(255,255,255,.55); --txt: #0D0D10; --sub: #5E5E6A; --lab: #0D0D10; --chip: var(--y); --chipInk: var(--ink); --hi: #0D0D10; --div: rgba(13,13,16,.16); --gloss: rgba(255,255,255,.6); }
.theme-yellow { --p1: #FFF84D; --p2: #FFE800; --stroke: #0D0D10; --halo: rgba(0,0,0,.28); --txt: #0D0D10; --sub: #4B4700; --lab: #0D0D10; --chip: #0D0D10; --chipInk: var(--y); --hi: #0D0D10; --div: rgba(13,13,16,.2); --gloss: rgba(255,255,255,.35); }

html, body { margin: 0; padding: 0; background: transparent; overflow: hidden; }
body.previewbg { background: #2a2a31; }
#stage { position: relative; transform-origin: 0 0; font-family: 'DubbyUI', sans-serif; -webkit-font-smoothing: antialiased; }
#stage.waiting { visibility: hidden; }
#stage > * { position: absolute; }
.abs { position: absolute; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; justify-content: center; }

/* phrase artwork (outlined Hatsch Sans Italic) + live-text fallback, both boxed to the CAP height */
.ph { display: block; overflow: visible; fill: currentColor; flex: none; }
.tx { display: block; position: relative; white-space: nowrap; flex: none; }
.tx > span { position: relative; display: block; font-family: 'DubbyCode', sans-serif; font-weight: 900; font-style: italic; line-height: 1; text-transform: uppercase; white-space: nowrap; }

/* sticker plate: the logo's white-cut + dark halo outline */
.plate { box-sizing: border-box; background: linear-gradient(180deg, var(--p1), var(--p2));
  box-shadow: 0 0 0 var(--sw, 3px) var(--stroke), 0 0 0 calc(var(--sw, 3px) + 2.5px) var(--halo), 0 18px 34px -12px rgba(0,0,0,.65); overflow: hidden; }
.plate::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--gloss), transparent 55%); pointer-events: none; }
.plate .tint { position: absolute; inset: 0; pointer-events: none; }
.sheen { position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; transform: translateX(-160%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 35%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.16) 65%, transparent); pointer-events: none; }
.theme-light .sheen, .theme-yellow .sheen { background: linear-gradient(90deg, transparent, rgba(255,255,255,.4) 35%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.4) 65%, transparent); }

/* smiley sticker (die-cut white ring) + the drip drop */
.stk { box-sizing: border-box; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.4), 0 10px 20px -6px rgba(0,0,0,.6); }
.stk img { display: block; width: 100%; height: 100%; }
.stk .drop { position: absolute; background: var(--drip); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 0; transform: scale(0); }

.chip { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 999px; background: var(--chip); color: var(--chipInk); flex: none; }
.theme-light .chip { box-shadow: inset 0 0 0 2px var(--ink); }
.field { display: flex; align-items: center; box-sizing: border-box; flex: none; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.28); }
.theme-light .field, .theme-yellow .field { background: rgba(13,13,16,.06); box-shadow: inset 0 0 0 2.5px rgba(13,13,16,.32); }
.divider { width: 2px; background: var(--div); border-radius: 2px; flex: none; }
.dot { border-radius: 50%; background: var(--y); box-shadow: 0 0 0 0 rgba(255,245,0,.6); flex: none; }
.theme-light .dot { background: var(--red); } .theme-yellow .dot { background: var(--ink); }
.zig { display: block; overflow: visible; fill: none; stroke: var(--hi); stroke-linejoin: round; stroke-linecap: round; }
.wordmark { display: block; flex: none; }

/* loops (every period divides the element's loop length so pre-rendered videos are seamless) */
@keyframes d-bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } }
@keyframes d-shadow { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(.82); opacity: .35; } }
@keyframes d-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,245,0,.7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255,245,0,0); } }
@keyframes d-caret { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes d-wobble { 0%, 100% { transform: rotate(-8deg) translateY(0); } 25% { transform: rotate(-4deg) translateY(-4px); } 50% { transform: rotate(-9deg) translateY(-6px); } 75% { transform: rotate(-12deg) translateY(-2px); } }
.still * { animation: none !important; transition: none !important; }
.still .sheen, .still .drop { display: none; }