:root {
  --color-canvas: #120a10;
  --color-surface: rgba(28, 12, 24, 0.88);
  --color-surface-higher: rgba(36, 16, 30, 0.95);
  --color-surface-border: rgba(255, 255, 255, 0.07);
  --color-surface-border-active: rgba(255, 90, 140, 0.45);
  --color-text: #f5f0f2;
  --color-text-secondary: #c8bdc4;
  --color-text-muted: #7a6e76;
  --color-accent: #ff5a8c;
  --color-accent-glow: rgba(255, 90, 140, 0.55);
  --color-accent-subtle: rgba(255, 90, 140, 0.14);
  --color-accent-secondary: #ff7da8;
  --color-accent-secondary-glow: rgba(255, 125, 168, 0.4);
  --color-accent-deep: #e04070;
  --color-accent-deep-glow: rgba(224, 64, 112, 0.5);
  --color-success: #4cd9a7;
  --color-danger: #ff4560;
  --color-focus: #ff9cbb;
  --color-bungmo-primary: #ff7da8;
  --color-bungmo-glow: rgba(255, 125, 168, 0.4);
  --color-squat-primary: #ff5a8c;
  --color-squat-glow: rgba(255, 90, 140, 0.6);
  --color-squat-glow-outer: rgba(255, 50, 110, 0.25);
}

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

body {
  background: var(--color-canvas);
  overflow: hidden;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  width: 100vw;
  height: 100vh;
}

#overlay {
  position: fixed;
  bottom: 26vmin;
  left: 5vmin;
  right: 5vmin;
  pointer-events: none;
  z-index: 9999;
}

#gift-queue {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2vmin;
}

#floating-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#status-bar {
  position: fixed;
  bottom: 2.4vmin;
  right: 2.4vmin;
  background: var(--color-surface);
  color: var(--color-text);
  padding: 1vmin 3vmin;
  border-radius: 1vmin;
  font-size: 2.6vmin;
  letter-spacing: 0.03em;
  z-index: 10000;
}

.gift-item {
  position: relative;
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-higher));
  border: 0.15vmin solid var(--color-surface-border);
  border-radius: 2.2vmin;
  padding: 2vmin 3vmin;
  display: flex;
  align-items: center;
  gap: 2vmin;
  min-width: 50vmin;
  max-width: 72vmin;
  backdrop-filter: blur(10px);
  animation: giftSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0.5vmin 3vmin rgba(0,0,0,0.5), 0 0 0 0.15vmin var(--color-accent-subtle);
}

.gift-item.combo {
  border-color: var(--color-surface-border-active);
  box-shadow: 0 0.5vmin 4vmin var(--color-accent-glow), 0 0 0 0.15vmin var(--color-surface-border-active);
}

.gift-avatar {
  width: 8vmin;
  height: 8vmin;
  border-radius: 50%;
  border: 0.3vmin solid var(--color-surface-border);
  flex-shrink: 0;
}

.gift-info {
  flex: 1;
  min-width: 0;
}

.gift-sender {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 2.6vmin;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.gift-action {
  color: var(--color-text-secondary);
  font-size: 2.2vmin;
  margin-top: 0.2vmin;
  letter-spacing: 0.01em;
}

.gift-icon {
  width: 9vmin;
  height: 9vmin;
  flex-shrink: 0;
  animation: giftBounce 0.5s ease-out;
}

.gift-count {
  color: var(--color-accent);
  font-weight: 900;
  font-size: 3.5vmin;
  min-width: 5vmin;
  text-align: center;
  text-shadow: 0 0 1.5vmin var(--color-accent-glow);
}

.gift-diamond-badge {
  position: absolute;
  top: -0.5vmin;
  left: -0.5vmin;
  background: var(--color-accent-deep);
  color: var(--color-text);
  font-size: 2vmin;
  font-weight: 800;
  padding: 0.3vmin 1vmin;
  border-radius: 0.8vmin;
  white-space: nowrap;
  box-shadow: 0 0 1.5vmin var(--color-accent-deep-glow);
  line-height: 1.3;
}

.gift-diamond-badge + .gift-count {
  margin-left: 0.8vmin;
}

.floating-gift {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vmin;
  animation: floatUp 3s ease-out forwards;
  pointer-events: none;
}

.floating-gift img {
  width: 12vmin;
  height: 12vmin;
  filter: drop-shadow(0 0 2vmin var(--color-accent-glow));
}

.floating-sender {
  color: var(--color-accent);
  font-size: 2.4vmin;
  font-weight: 700;
  text-shadow: 0 0 1vmin rgba(0,0,0,0.8);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.floating-count {
  color: var(--color-text);
  font-size: 2.8vmin;
  font-weight: 800;
  text-shadow: 0 0 1.5vmin var(--color-accent-glow);
}

.particle {
  position: absolute;
  pointer-events: none;
  animation: particleBurst 1.2s ease-out forwards;
}

.particle .dot {
  width: 1.2vmin;
  height: 1.2vmin;
  border-radius: 50%;
  background: var(--color-accent);
}

.test-panel {
  display: none;
  position: fixed;
  bottom: 8vmin;
  left: 2vmin;
  z-index: 99999;
  background: var(--color-surface-higher);
  padding: 2vmin 3vmin;
  border-radius: 2vmin;
  border: 0.3vmin solid var(--color-surface-border);
  pointer-events: auto;
}

.test-panel-title {
  color: var(--color-accent);
  font-size: 2.4vmin;
  font-weight: 800;
  margin-bottom: 1.2vmin;
  letter-spacing: 0.04em;
}

.test-panel-btn {
  margin: 0.6vmin;
  padding: 1.8vmin 3vmin;
  cursor: pointer;
  border: none;
  border-radius: 1.2vmin;
  font-size: 2.5vmin;
  font-weight: 700;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  letter-spacing: 0.03em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.test-panel-btn:hover {
  transform: scale(1.04);
}

.test-panel-btn.bungmo {
  background: var(--color-accent-secondary);
  color: var(--color-canvas);
  box-shadow: 0 0.3vmin 1.5vmin var(--color-accent-secondary-glow);
}

.test-panel-btn.squat {
  background: var(--color-accent);
  color: var(--color-canvas);
  box-shadow: 0 0.3vmin 2vmin var(--color-accent-glow);
}

.test-panel-hint {
  color: var(--color-text-muted);
  font-size: 1.8vmin;
  margin-top: 1vmin;
}

@keyframes giftSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-8vmin) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes giftBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(8vmin) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translateY(0) scale(1.15);
  }
  30% {
    transform: translateY(-3vmin) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40vmin) scale(0.6);
  }
}

@keyframes particleBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift-item,
  .gift-item.combo {
    animation: none;
  }
  .gift-icon {
    animation: none;
  }
  .floating-gift {
    animation: floatUpReduced 1.5s ease-out forwards;
  }
  .particle {
    animation: none;
    display: none;
  }
  .test-panel-btn:hover {
    transform: none;
  }
}

@keyframes floatUpReduced {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}