/* GifterBoard - Cinematic Display
 *
 * Full-screen immersive layout. No boxes, no labels, no webpage feel.
 * Everything floats in space like a movie title sequence.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg-deep, #0d001a);
  width: 100vw;
  height: 100vh;
  position: relative;
}

:root {
  --neon-primary: #ff2d95;
  --neon-hot: #ff00ea;
  --neon-secondary: #9d00ff;
  --neon-accent: #ffd700;
  --bg-deep: #0d001a;
}

/* --- Background image layer (z:1, above animated canvas) --- */

#bg-image-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.5s ease;
  pointer-events: none;
}

/* When a bg image is active, the animated canvas goes semi-transparent */
body.has-bg-image #bg-canvas {
  opacity: 0.45;
}

/* --- Cinema container --- */

.cinema {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  padding-top: 2vh;
}

/* --- Brand title --- */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  width: 100%;
}

.brand-text {
  font-family: var(--brand-font, 'Dancing Script', cursive);
  font-weight: 700;
  color: var(--brand-color, #fff);
  font-size: var(--brand-size, 18vmin);
  line-height: 1;
  width: var(--brand-width, 90%);
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Brand effects (stackable, apply multiple classes) --- */

.brand-text.fx-glow {
  text-shadow:
    0 0 7px #fff,
    0 0 15px #fff,
    0 0 30px var(--brand-glow, var(--neon-primary)),
    0 0 60px var(--brand-glow, var(--neon-primary)),
    0 0 90px var(--brand-glow, var(--neon-hot)),
    0 0 120px var(--brand-glow, var(--neon-hot));
}

.brand-text.fx-breathe,
.brand-gradient-layer.fx-breathe { animation: neon-breathe 4s ease-in-out infinite alternate; }
.brand-text.fx-flicker,
.brand-gradient-layer.fx-flicker { animation: neon-flicker 8s infinite; }
.brand-text.fx-float,
.brand-gradient-layer.fx-float   { animation: float-gentle 4s ease-in-out infinite; }
.brand-text.fx-pulse,
.brand-gradient-layer.fx-pulse   { animation: neon-breathe 2s ease-in-out infinite alternate; }

/* Shimmer sweep */
.brand-text.fx-shimmer {
  background: linear-gradient(
    90deg,
    var(--brand-color, #fff) 0%,
    var(--brand-color, #fff) 40%,
    rgba(255,255,255,0.95) 50%,
    var(--brand-color, #fff) 60%,
    var(--brand-color, #fff) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: brand-shimmer 3s linear infinite;
}
@keyframes brand-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Stroke outline */
.brand-text.fx-stroke {
  -webkit-text-stroke: var(--brand-stroke-width, 2px) var(--brand-stroke-color, #000);
}

/* Drop shadow */
.brand-text.fx-shadow {
  filter: drop-shadow(3px 4px 6px rgba(0,0,0,0.7));
}

/* Rainbow glow */
.brand-text.fx-rainbow {
  animation: brand-rainbow 4s linear infinite;
}
@keyframes brand-rainbow {
  0%   { filter: hue-rotate(0deg) drop-shadow(0 0 20px currentColor); }
  100% { filter: hue-rotate(360deg) drop-shadow(0 0 20px currentColor); }
}

/* --- Gradient text --- */
/* Single element: gradient fill + drop-shadow for glow (text-shadow breaks on transparent fill) */
.brand-wrap {
  width: var(--brand-width, 90%);
  text-align: center;
}

.brand-gradient-layer {
  font-family: var(--brand-font, 'Dancing Script', cursive);
  font-weight: 700;
  font-size: var(--brand-size, 18vmin);
  line-height: var(--brand-line-height, 1);
  letter-spacing: var(--brand-letter-spacing, 0);
  white-space: pre-wrap;
  word-break: break-word;
  width: 100%;
  background: var(--brand-gradient, linear-gradient(135deg, #ff6ec7 0%, #a855f7 50%, #3b82f6 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow on gradient layer — only when fx-glow is present */
.brand-gradient-layer.fx-glow {
  filter:
    drop-shadow(0 0 8px var(--brand-glow, var(--neon-primary)))
    drop-shadow(0 0 20px var(--brand-glow, var(--neon-primary)))
    drop-shadow(0 0 40px var(--brand-glow, var(--neon-hot)));
}

.brand-gradient-layer.fx-rainbow {
  animation: brand-rainbow-filter 4s linear infinite;
}
@keyframes brand-rainbow-filter {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Rotate — uses inline transform set by JS (0deg default = no effect when unchecked) */
.brand-text.fx-rotate,
.brand-wrap.fx-rotate {
  transform: rotate(var(--brand-rotate, 0deg));
}

/* Skew */
.brand-text.fx-skew,
.brand-wrap.fx-skew {
  transform: skewX(var(--brand-skew, 0deg));
}

/* Rotate + Skew combined */
.brand-text.fx-rotate.fx-skew,
.brand-wrap.fx-rotate.fx-skew {
  transform: rotate(var(--brand-rotate, 0deg)) skewX(var(--brand-skew, 0deg));
}

/* Wave — applied to individual letter spans inside .brand-text or .brand-gradient-layer */
.brand-letter {
  display: inline-block;
}
.brand-text.fx-wave .brand-letter,
.brand-gradient-layer.fx-wave .brand-letter {
  animation: brand-wave 1.8s ease-in-out infinite;
  animation-delay: var(--letter-delay, 0s);
}
@keyframes brand-wave {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(var(--brand-wave-amp, -0.15em)); }
}

/* Arc — SVG-based, handled in cinema-engine. SVG element sizing. */
.brand-arc-svg {
  width: var(--brand-width, 90%);
  height: auto;
  overflow: visible;
}
.brand-arc-svg text {
  font-family: var(--brand-font, 'Dancing Script', cursive);
  font-weight: 700;
  font-size: var(--brand-size, 18vmin);
  fill: var(--brand-color, #fff);
}
.brand-arc-svg text.fx-glow {
  filter:
    drop-shadow(0 0 7px #fff)
    drop-shadow(0 0 20px var(--brand-glow, var(--neon-primary)))
    drop-shadow(0 0 40px var(--brand-glow, var(--neon-primary)));
}
/* SVG gradient fill applied inline via JS */

/* --- Scene area — the main content zone --- */

.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5vh;
  flex: 1;
}

/* --- Cinematic rank entries --- */

.cin-label {
  font-family: 'Cinzel', serif;
  font-size: calc(5vmin * var(--name-scale, 1));
  font-weight: 900;
  letter-spacing: 1vmin;
  color: var(--neon-accent);
  text-shadow:
    0 0 10px var(--neon-accent),
    0 0 30px var(--neon-accent),
    0 2px 8px rgba(0,0,0,0.8);
  opacity: 0;
  animation: cinema-reveal 0.8s ease-out forwards;
}

.cin-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
  opacity: 0;
  animation: cinema-reveal 0.8s ease-out forwards;
}

.cin-rank:nth-child(2) { animation-delay: 0.2s; }
.cin-rank:nth-child(3) { animation-delay: 0.5s; }
.cin-rank:nth-child(4) { animation-delay: 0.8s; }

.cin-pic {
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  object-fit: cover;
  border: 0.5vmin solid var(--neon-accent);
  box-shadow: 0 0 15px var(--neon-accent);
  display: none;
}

.cin-pic.visible { display: block; }

.cin-rank .cin-icon { flex-shrink: 0; }

.cin-rank .cin-name {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  text-shadow:
    0 0 10px rgba(255,255,255,0.6),
    0 0 25px rgba(255,255,255,0.3),
    0 3px 6px rgba(0,0,0,0.8);
}

/* Rank sizes — cinematic hierarchy */
.cin-rank-1 .cin-icon { font-size: calc(8vmin * var(--name-scale, 1)); }
.cin-rank-1 .cin-name { font-size: calc(11vmin * var(--name-scale, 1)); }
.cin-rank-1 .cin-pic  { width: calc(12vmin * var(--name-scale, 1)); height: calc(12vmin * var(--name-scale, 1)); }

.cin-rank-2 .cin-icon { font-size: calc(6vmin * var(--name-scale, 1)); }
.cin-rank-2 .cin-name { font-size: calc(8vmin * var(--name-scale, 1)); }
.cin-rank-2 .cin-pic  { width: calc(9vmin * var(--name-scale, 1)); height: calc(9vmin * var(--name-scale, 1)); }

.cin-rank-3 .cin-icon { font-size: calc(5vmin * var(--name-scale, 1)); }
.cin-rank-3 .cin-name { font-size: calc(6.5vmin * var(--name-scale, 1)); }
.cin-rank-3 .cin-pic  { width: calc(7vmin * var(--name-scale, 1)); height: calc(7vmin * var(--name-scale, 1)); }

/* --- Promo scene --- */

.cin-promo-icon {
  font-size: 30vmin;
  opacity: 0;
  animation: promo-pop 1s ease-out forwards;
  filter: drop-shadow(0 0 20px var(--neon-primary))
          drop-shadow(0 0 50px var(--neon-primary))
          drop-shadow(0 0 80px rgba(0,0,0,0.6));
}

@keyframes promo-pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-20deg); }
  50%  { opacity: 1; transform: scale(1.15) rotate(5deg); }
  70%  { transform: scale(0.95) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.cin-promo {
  opacity: 0;
  animation: cinema-reveal 0.8s ease-out forwards;
  text-align: center;
}

.cin-promo-main {
  font-family: 'Cinzel', serif;
  font-size: 8vmin;
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 20px var(--neon-primary),
    0 0 50px var(--neon-primary),
    0 0 80px var(--neon-hot),
    0 4px 12px rgba(0,0,0,0.9);
  animation: neon-breathe 4s ease-in-out infinite alternate;
  animation-delay: 0.8s;
  opacity: 0;
  animation: cinema-reveal 0.8s ease-out 0.8s forwards, neon-breathe 4s ease-in-out 1.6s infinite alternate;
}

.cin-promo-sub {
  font-family: 'Cinzel', serif;
  font-size: 5vmin;
  font-weight: 700;
  color: var(--neon-accent);
  text-shadow: 0 0 15px var(--neon-accent), 0 3px 8px rgba(0,0,0,0.8);
  margin-top: 1vh;
  opacity: 0;
  animation: cinema-reveal 0.8s ease-out 1.2s forwards, float-gentle 2.5s ease-in-out 2s infinite alternate;
}

/* --- Promo title (e.g. LUCKY LEPRECHAUN) --- */

.cin-promo-title {
  font-family: 'Cinzel', serif;
  font-size: 6vmin;
  font-weight: 900;
  letter-spacing: 0.8vmin;
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 20px var(--neon-primary),
    0 0 50px var(--neon-primary);
  opacity: 0;
  animation: cinema-reveal 0.6s ease-out forwards;
  text-align: center;
  margin-bottom: 1vh;
}

/* --- Green promo override (shamrock scene within pink theme) --- */

.cin-promo-green {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cin-promo-green .cin-promo-title {
  color: #00ff6a;
  text-shadow:
    0 0 7px #00ff6a,
    0 0 20px #00ff41,
    0 0 50px #00cc55,
    0 0 80px #00ff6a,
    0 4px 12px rgba(0,0,0,0.9);
  opacity: 1;
  animation: neon-breathe-green 3s ease-in-out infinite alternate;
}

.cin-promo-green .cin-promo-icon {
  font-size: 25vmin;
  opacity: 1;
  filter: drop-shadow(0 0 20px #00ff6a)
          drop-shadow(0 0 50px #00cc55)
          drop-shadow(0 0 80px rgba(0,80,30,0.6));
  animation: none;
}

.cin-promo-green .cin-promo {
  opacity: 1;
  animation: none;
}

.cin-promo-green .cin-promo-main {
  color: #00ff6a;
  font-size: 12vmin;
  opacity: 1;
  animation: neon-breathe-green 3s ease-in-out infinite alternate;
}

.cin-promo-green .cin-promo-sub {
  color: #ffd700;
  text-shadow: 0 0 15px #ffd700, 0 3px 8px rgba(0,0,0,0.8);
  opacity: 1;
  animation: float-gentle 2.5s ease-in-out infinite alternate;
}

@keyframes neon-breathe-green {
  0% {
    text-shadow:
      0 0 7px #00ff6a, 0 0 15px #00ff6a,
      0 0 30px #00ff41, 0 0 60px #00ff41,
      0 0 90px #00cc55, 0 0 120px #00cc55;
  }
  50% {
    text-shadow:
      0 0 4px #00ff6a, 0 0 8px #00ff6a,
      0 0 20px #00ff41, 0 0 40px #00ff41;
  }
  100% {
    text-shadow:
      0 0 10px #00ff6a, 0 0 20px #00ff6a,
      0 0 40px #00ff41, 0 0 80px #00ff41,
      0 0 110px #00cc55, 0 0 150px #00cc55;
  }
}

/* --- Banner (scrolling text) --- */

.cin-banner {
  width: 100vw;
  overflow: hidden;
  opacity: 0;
  animation: cinema-reveal 0.6s ease-out 0.3s forwards;
}

.cin-banner-text {
  font-family: 'Cinzel', serif;
  font-size: 4vmin;
  font-weight: 700;
  color: var(--neon-accent);
  text-shadow: 0 0 10px var(--neon-accent);
  white-space: nowrap;
  display: inline-block;
  animation: marquee 12s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* --- Scene transition (crossfade) --- */

.scene-out {
  animation: scene-fade-out 0.6s ease-in forwards;
}

.scene-in {
  animation: scene-fade-in 0.6s ease-out forwards;
}

@keyframes scene-fade-out {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

@keyframes scene-fade-in {
  0%   { opacity: 0; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Animations --- */

@keyframes cinema-reveal {
  0%   { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes neon-breathe {
  0% {
    text-shadow:
      0 0 7px #fff, 0 0 15px #fff,
      0 0 30px var(--neon-primary), 0 0 60px var(--neon-primary),
      0 0 90px var(--neon-hot), 0 0 120px var(--neon-hot);
  }
  50% {
    text-shadow:
      0 0 4px #fff, 0 0 8px #fff,
      0 0 20px var(--neon-primary), 0 0 40px var(--neon-primary);
  }
  100% {
    text-shadow:
      0 0 10px #fff, 0 0 20px #fff,
      0 0 40px var(--neon-primary), 0 0 80px var(--neon-primary),
      0 0 110px var(--neon-hot), 0 0 150px var(--neon-hot);
  }
}

@keyframes float-gentle {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

@keyframes spin-gentle {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Flicker on the mid brand line */
.brand-line.flicker {
  animation: neon-breathe 4s ease-in-out infinite alternate,
             neon-flicker 8s infinite;
}

@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.6; }
}

/* --- Particles --- */

.particles {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  bottom: -50px;
  font-size: 2rem;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  animation: particle-rise linear infinite, particle-sway ease-in-out infinite alternate;
}

@keyframes particle-rise {
  0%   { transform: translateY(0); opacity: 0; }
  5%   { opacity: 0.7; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-110vh); opacity: 0; }
}

@keyframes particle-sway {
  0%   { margin-left: -25px; }
  100% { margin-left: 25px; }
}

.particle-heart  { filter: drop-shadow(0 0 6px var(--neon-primary)); }
.particle-note   { filter: drop-shadow(0 0 6px var(--neon-secondary)); }
.particle-sparkle { filter: drop-shadow(0 0 6px var(--neon-accent)); }
.particle-crown  { filter: drop-shadow(0 0 6px var(--neon-accent)); }

.particle-avatar {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 12px var(--neon-primary), 0 0 24px rgba(255,255,255,0.2);
  font-size: 0 !important;
}
.particle-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.particle-welcome {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 6px 20px 6px 6px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.welcome-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.welcome-label {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 4px var(--neon-primary);
}

/* Scale up for monitor/large screens */
@media (min-width: 900px) {
  .particle-welcome { gap: 6px; padding: 3px 10px 3px 3px; }
  .welcome-avatar, .welcome-avatar-placeholder { width: 28px; height: 28px; }
  .welcome-label { font-size: 13px; }
  .particle-avatar { width: 32px; height: 32px; }
}

.welcome-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--neon-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* Lottie particles — no font-size, transparent bg */
.particle dotlottie-player {
  pointer-events: none;
}

/* --- Avatar Layer (z:15, above cinema, below gift layer) --- */

#avatar-layer {
  position: fixed;
  bottom: 4vh;
  right: 3vw;
  z-index: 15;
  pointer-events: none;
  width: 160px;
  height: 200px;
}

#avatar-canvas {
  display: block;
  filter: drop-shadow(0 0 12px rgba(157, 0, 255, 0.6));
}

/* Screen shake — intensity set via data-shake-intensity */
@keyframes avatar-shake-medium {
  0%   { transform: translate(0, 0) rotate(0deg); }
  15%  { transform: translate(-6px, -4px) rotate(-1deg); }
  30%  { transform: translate(6px, 4px) rotate(1deg); }
  45%  { transform: translate(-4px, 2px) rotate(-0.5deg); }
  60%  { transform: translate(4px, -2px) rotate(0.5deg); }
  75%  { transform: translate(-2px, 1px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes avatar-shake-big {
  0%   { transform: translate(0, 0) rotate(0deg); }
  10%  { transform: translate(-12px, -8px) rotate(-2deg); }
  20%  { transform: translate(12px, 8px) rotate(2deg); }
  30%  { transform: translate(-10px, 5px) rotate(-1.5deg); }
  40%  { transform: translate(10px, -5px) rotate(1.5deg); }
  50%  { transform: translate(-8px, 4px) rotate(-1deg); }
  60%  { transform: translate(8px, -4px) rotate(1deg); }
  70%  { transform: translate(-4px, 2px) rotate(-0.5deg); }
  85%  { transform: translate(4px, -2px) rotate(0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

#avatar-layer.avatar-shake[data-shake-intensity="medium"] {
  animation: avatar-shake-medium 0.6s ease-out forwards;
}

#avatar-layer.avatar-shake[data-shake-intensity="big"] {
  animation: avatar-shake-big 0.6s ease-out forwards;
}

/* --- Canvas Overlay (studio editor) --- */

.canvas-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
}

.canvas-overlay.active { display: block; }

.canvas-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.canvas-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: none;
}

.canvas-bg-video.active { display: block; }

.canvas-overlay .canvas-container {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

/* --- Video Overlay --- */

.video-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: black;
  align-items: center;
  justify-content: center;
}

.video-overlay.active { display: flex; }

.video-overlay video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Gift Layer (z:50, above cinema, below canvas/video overlays) --- */

#gift-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

/* --- Gift Video Overlay (positioned, not full-screen) --- */

#gift-video-overlay {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 600px);
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid var(--gva-color, #ff2d95);
  border-radius: 16px;
  box-shadow:
    0 0 20px var(--gva-color, #ff2d95),
    0 0 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#gift-video-overlay.active {
  display: flex;
  animation: gva-entrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.gva-header {
  display: flex;
  align-items: center;
  gap: 2vmin;
  padding: 2vmin 3vmin 1.5vmin;
  width: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
}

.gva-emoji {
  font-size: 9vmin;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px var(--gva-color, #ff2d95));
  animation: float-gentle 2s ease-in-out infinite alternate;
}

.gva-text {
  display: flex;
  flex-direction: column;
}

.gva-name {
  font-family: 'Cinzel', serif;
  font-size: 5vmin;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55vmin;
}

.gva-label {
  font-family: 'Cinzel', serif;
  font-size: 4vmin;
  font-weight: 700;
  animation: neon-breathe 2s ease-in-out infinite alternate;
  white-space: nowrap;
}

.gva-video {
  width: 100%;
  max-height: 40vh;
  object-fit: cover;
  display: block;
}

/* CSS-only mode: no video file, just the header card */
#gift-video-overlay.gva-css-only .gva-video {
  display: none;
}

#gift-video-overlay.gva-css-only {
  padding-bottom: 2vmin;
}

@keyframes gva-entrance {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* --- CSS Gift Pop (small tier, < 1000 diamonds) --- */

.gift-pop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  display: flex;
  align-items: center;
  gap: 3vmin;
  padding: 2.5vmin 5vmin;
  background: rgba(0, 0, 0, 0.82);
  border: 2px solid var(--pop-color, #ff2d95);
  border-radius: 14px;
  box-shadow:
    0 0 18px var(--pop-color, #ff2d95),
    0 0 50px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: min(70vw, 520px);
  max-width: min(90vw, 680px);
  white-space: nowrap;
}

/* Vertical slot positions — stacked around center */
.gift-pop[data-slot="0"] { top: 50%; margin-top: -6vmin; }
.gift-pop[data-slot="1"] { top: 50%; margin-top:  6vmin; }
.gift-pop[data-slot="2"] { top: 50%; margin-top: 18vmin; }
.gift-pop[data-slot="3"] { top: 50%; margin-top:-18vmin; }

.gift-pop-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.gift-pop-hide {
  opacity: 0;
  transform: translateX(-50%) scale(0.85);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.gift-pop-emoji {
  font-size: 10vmin;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px var(--pop-color, #ff2d95));
}

.gift-pop-img {
  width: 12vmin;
  height: 12vmin;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px var(--pop-color, #ff2d95));
}

.gift-pop-name {
  font-family: 'Cinzel', serif;
  font-size: 5.5vmin;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50vmin;
}

.gift-pop-label {
  font-family: 'Cinzel', serif;
  font-size: 4.5vmin;
  font-weight: 700;
  color: var(--pop-color, #ff2d95);
  text-shadow: 0 0 12px var(--pop-color, #ff2d95);
  white-space: nowrap;
}

/* --- Gift Image Overlay (AI-generated Flux image, bottom-right corner) --- */

#gift-image-overlay {
  display: none;
  position: absolute;
  bottom: 4vmin;
  right: 3vw;
  width: 28vmin;
  border-radius: 2vmin;
  overflow: hidden;
  box-shadow: 0 0 4vmin rgba(255, 45, 149, 0.7), 0 0 1.5vmin rgba(0,0,0,0.8);
  border: 0.4vmin solid rgba(255, 45, 149, 0.5);
  z-index: 55;
  flex-direction: column;
  animation: gio-entrance 0.5s ease-out forwards;
}

#gift-image-overlay.active {
  display: flex;
}

.gio-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.gio-footer {
  display: flex;
  align-items: center;
  gap: 1vmin;
  padding: 1.2vmin 1.5vmin;
  background: rgba(13, 0, 26, 0.85);
  backdrop-filter: blur(4px);
}

.gio-emoji {
  font-size: 3.5vmin;
  flex-shrink: 0;
}

.gio-name {
  font-family: 'Cinzel', serif;
  font-size: 2vmin;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.gio-label {
  font-family: 'Cinzel', serif;
  font-size: 1.6vmin;
  color: var(--gio-color, #ff2d95);
  text-shadow: 0 0 8px var(--gio-color, #ff2d95);
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes gio-entrance {
  0%   { opacity: 0; transform: scale(0.85) translateY(20px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}