/* Only Snakes — carnival theme scoped so Race Night / base app stay untouched */
.only-snakes {
  --os-bg: #f6efd9;
  --os-bg-2: #e7f3eb;
  --os-panel: #fffaf0;
  --os-ink: #19212b;
  --os-muted: #66717f;
  --os-line: rgba(25, 33, 43, 0.18);
  --os-shadow: rgba(31, 34, 39, 0.16);
  color: var(--os-ink);
}

body.only-snakes {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 25%, transparent 25% 50%, rgba(255, 255, 255, 0.08) 50% 75%, transparent 75% 100%),
    linear-gradient(160deg, var(--os-bg), var(--os-bg-2));
  background-size: 38px 38px, cover;
  min-height: 100vh;
  color: var(--os-ink);
}

/* Stop avatar thumbnails from expanding flex rows after save */
/* Host / player surfaces inside carnival theme */
.only-snakes .os-snakework {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--snakework-size);
  height: calc(var(--snakework-size) * 0.56);
  opacity: 0;
  transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--start-rotate)) scale(0.35);
  transform-origin: center;
  animation: os-snakework-burst var(--duration) cubic-bezier(0.16, 0.9, 0.25, 1) var(--delay) forwards;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.2));
  will-change: transform, opacity;
}

.only-snakes .os-snakework path {
  fill: none;
  stroke: var(--snakework-color);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.only-snakes .os-snakework-outline { stroke: color-mix(in srgb, var(--os-ink) 70%, transparent); stroke-width: 6; opacity: 0.7; }

.only-snakes .os-snakework-body { stroke-width: 4; }

.only-snakes .os-snakework-belly { stroke: rgba(255, 255, 255, 0.62) !important; stroke-width: 1; stroke-dasharray: 3 5; }

.only-snakes .os-snakework ellipse { fill: var(--snakework-color); stroke: color-mix(in srgb, var(--os-ink) 60%, transparent); stroke-width: 1.4; }

.only-snakes .os-snakework-eye { fill: #fff; }

.only-snakes .os-snakework-pupil { fill: var(--os-ink); }

.only-snakes .os-snakework.is-static {
  opacity: 0.9;
  transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--end-rotate)) scale(1);
  animation: none;
}

@keyframes os-snakework-burst {
  0% { opacity: 0; transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--start-rotate)) scale(0.35); }
  12%, 72% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--end-rotate)) scale(1.05); }
}

/* Final results ceremony + personal stats */