@font-face { font-family: 'Noto Sans Bengali'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/noto-bengali-400.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans Bengali'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/noto-bengali-600.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans Bengali'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/noto-bengali-700.woff2') format('woff2'); }
@font-face { font-family: 'Noto Color Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/noto-color-emoji.woff2') format('woff2'); }
:root {
  --bg: rgba(13, 17, 23, 0.92);
  --gold: #f2c14e;
  --green: #21c97a;
  --red: #ff5a5f;
  --blue: #4aa8ff;
  --text: #f5f7fa;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  background: transparent; /* OBS composites this over the video */
  font-family: 'Noto Sans Bengali', 'Inter', 'Segoe UI', system-ui, sans-serif, 'Noto Color Emoji';
  overflow: hidden;
}

#stage {
  position: absolute;
  left: 4vw;
  bottom: 6vh;
  width: 42vw;
  min-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  transform: scale(var(--overlay-scale, 1));
  transform-origin: bottom left;
}

.nudge {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 62px 16px 22px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border-radius: 14px;
  color: var(--text);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  border-left: 6px solid var(--gold);
  /* Hidden by default; an anim-<name>-in class drives the entrance, an
     anim-<name>-out class drives the exit. transform-origin centers 3D flips.
     The card's `animation` slot is reserved for entry/exit so the dwell shimmer
     rides a separate ::after pseudo-element (no conflict). */
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
}

/* Per-accent glow colour for the dwell pulse (matches the border-left accent). */
.nudge { --accent-glow: 242, 193, 78; }      /* momentum (gold) */
.nudge.goal { --accent-glow: 33, 201, 122; }
.nudge.danger { --accent-glow: 255, 90, 95; }
.nudge.info { --accent-glow: 74, 168, 255; }

/* Dwell pulse: a gentle accent glow that breathes while the nudge sits on screen.
   Kicks in after the entrance so it never fights the entry motion. */
.nudge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: dwellPulse 2.6s ease-in-out 0.55s infinite;
}

.nudge .text {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1px;
}

.nudge .cta {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #ffd97a);
  color: #1a1205;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* 'cta' format — a larger, more prominent call-to-action button. */
.nudge.fmt-cta .cta {
  font-size: 17px;
  padding: 9px 18px;
  margin-top: 8px;
  align-self: flex-start;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* 'odds' format — a clean odds card: market label, selection + prominent price chip. */
.nudge.fmt-odds {
  padding: 14px 22px 14px 22px;
}

.nudge .odds-market {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(245, 247, 250, 0.6);
}

.nudge .odds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
}

.nudge .odds-selection {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.1px;
}

.nudge .odds-chip {
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  padding: 6px 16px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--gold), #ffd97a);
  color: #1a1205;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.nudge.goal .odds-chip { background: linear-gradient(90deg, var(--green), #57e39b); color: #042a17; }
.nudge.danger .odds-chip { background: linear-gradient(90deg, var(--red), #ff8a8d); color: #2a0406; }
.nudge.info .odds-chip { background: linear-gradient(90deg, var(--blue), #84c5ff); color: #04203f; }

.nudge.goal { border-left-color: var(--green); }
.nudge.goal .cta { background: linear-gradient(90deg, var(--green), #57e39b); color: #042a17; }
.nudge.danger { border-left-color: var(--red); }
.nudge.danger .cta { background: linear-gradient(90deg, var(--red), #ff8a8d); color: #2a0406; }
.nudge.momentum { border-left-color: var(--gold); }
.nudge.info { border-left-color: var(--blue); }
.nudge.info .cta { background: linear-gradient(90deg, var(--blue), #84c5ff); color: #04203f; }

/* 'image' format — give image cards a DEFINITE width (overriding the fit-content used
   for text bubbles). This is what makes per-entry scale (card `zoom`) and the global
   overlay scale reach the image: the image is width:100% of a concrete length, so it
   follows when zoom scales the card width — it never relies on zoom magnifying the
   replaced <img> itself, which older Chromium/OBS-CEF builds skip. */
.nudge.fmt-image {
  width: 360px;
}
.nudge .nudge-img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.brand-logo {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  animation: logoIn 0.55s cubic-bezier(0.2, 1.2, 0.3, 1) 0.1s both;
}

/* Logo entrance: a small spin + pop, slightly after the card lands. */
@keyframes logoIn {
  0%   { opacity: 0; transform: scale(0.5) rotate(-90deg); }
  70%  { opacity: 1; transform: scale(1.12) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.status {
  display: none;
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 11px;
  color: rgba(245, 247, 250, 0.35);
  font-family: monospace;
}

/* ── Animation system ────────────────────────────────────────────────────────
   7 entry/exit presets. Each `anim-<name>-in` runs the entrance; the JS swaps it
   for `anim-<name>-out` on dismiss. Snappy (~0.4–0.5s), GPU-friendly (transform +
   opacity only). Entry keyframes end at the resting state; exit keyframes start
   there and leave the card hidden (forwards fill holds it until removal). */

:root {
  --anim-ease-in: cubic-bezier(0.2, 0.9, 0.25, 1);
  --anim-ease-out: cubic-bezier(0.4, 0, 0.7, 0.2);
}

/* slideL — in from left → out to right */
.nudge.anim-slideL-in  { animation: anim-slideL-in 0.45s var(--anim-ease-in) both; }
.nudge.anim-slideL-out { animation: anim-slideL-out 0.4s var(--anim-ease-out) both; }
@keyframes anim-slideL-in  { from { opacity: 0; transform: translateX(-120%); } to { opacity: 1; transform: translateX(0); } }
@keyframes anim-slideL-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(120%); } }

/* slideR — in from right → out to left */
.nudge.anim-slideR-in  { animation: anim-slideR-in 0.45s var(--anim-ease-in) both; }
.nudge.anim-slideR-out { animation: anim-slideR-out 0.4s var(--anim-ease-out) both; }
@keyframes anim-slideR-in  { from { opacity: 0; transform: translateX(120%); } to { opacity: 1; transform: translateX(0); } }
@keyframes anim-slideR-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-120%); } }

/* slideUp — rise from bottom → sink down */
.nudge.anim-slideUp-in  { animation: anim-slideUp-in 0.45s var(--anim-ease-in) both; }
.nudge.anim-slideUp-out { animation: anim-slideUp-out 0.4s var(--anim-ease-out) both; }
@keyframes anim-slideUp-in  { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes anim-slideUp-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(40px); } }

/* fade — fade in → fade out */
.nudge.anim-fade-in  { animation: anim-fade-in 0.45s ease both; }
.nudge.anim-fade-out { animation: anim-fade-out 0.4s ease both; }
@keyframes anim-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* pop — scale-up with slight bounce + fade in → shrink + fade out */
.nudge.anim-pop-in  { animation: anim-pop-in 0.5s cubic-bezier(0.18, 1.4, 0.4, 1) both; }
.nudge.anim-pop-out { animation: anim-pop-out 0.4s ease both; }
@keyframes anim-pop-in  { 0% { opacity: 0; transform: scale(0.7); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes anim-pop-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.75); } }

/* zoom — zoom from small + fade → zoom out */
.nudge.anim-zoom-in  { animation: anim-zoom-in 0.45s var(--anim-ease-in) both; }
.nudge.anim-zoom-out { animation: anim-zoom-out 0.4s ease-in both; }
@keyframes anim-zoom-in  { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes anim-zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }

/* flip — 3D flipX in → flipX out */
.nudge.anim-flip-in  { animation: anim-flip-in 0.5s var(--anim-ease-in) both; }
.nudge.anim-flip-out { animation: anim-flip-out 0.4s ease-in both; }
@keyframes anim-flip-in  { from { opacity: 0; transform: perspective(800px) rotateX(-90deg); } to { opacity: 1; transform: perspective(800px) rotateX(0deg); } }
@keyframes anim-flip-out { from { opacity: 1; transform: perspective(800px) rotateX(0deg); } to { opacity: 0; transform: perspective(800px) rotateX(90deg); } }

/* Dwell pulse — gentle accent glow that breathes; colour set by --accent-glow. */
@keyframes dwellPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-glow), 0); }
  50%      { box-shadow: 0 0 18px 2px rgba(var(--accent-glow), 0.28); }
}