/* Radio Soft — Årets danske julesang: sne + mobil-først (iPhone X / 375px+) */

html {
  height: 100%;
}

body.soft-julesang {
  min-height: 100%;
  min-height: 100dvh;
  -webkit-tap-highlight-color: rgba(126, 184, 255, 0.25);
}

/* --- Sne --- */
.snow {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.snowflake {
  position: absolute;
  top: -12px;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.55);
  animation-name: soft-snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.snowflake:nth-child(3n) {
  width: 4px;
  height: 4px;
  opacity: 0.75;
}

.snowflake:nth-child(5n) {
  width: 8px;
  height: 8px;
  opacity: 0.95;
}

.snowflake:nth-child(7n) {
  width: 3px;
  height: 3px;
  opacity: 0.55;
}

/* Position + tempo (48 flakes) */
.snowflake:nth-child(1)  { left: 2%;  animation-duration: 11s; animation-delay: -1s; }
.snowflake:nth-child(2)  { left: 6%;  animation-duration: 14s; animation-delay: -4s; }
.snowflake:nth-child(3)  { left: 10%; animation-duration: 9s;  animation-delay: -2s; }
.snowflake:nth-child(4)  { left: 14%; animation-duration: 16s; animation-delay: -8s; }
.snowflake:nth-child(5)  { left: 18%; animation-duration: 12s; animation-delay: -3s; }
.snowflake:nth-child(6)  { left: 22%; animation-duration: 15s; animation-delay: -6s; }
.snowflake:nth-child(7)  { left: 26%; animation-duration: 10s; animation-delay: -1.5s; }
.snowflake:nth-child(8)  { left: 30%; animation-duration: 13s; animation-delay: -7s; }
.snowflake:nth-child(9)  { left: 34%; animation-duration: 17s; animation-delay: -9s; }
.snowflake:nth-child(10) { left: 38%; animation-duration: 11s; animation-delay: -2.5s; }
.snowflake:nth-child(11) { left: 42%; animation-duration: 14s; animation-delay: -5s; }
.snowflake:nth-child(12) { left: 46%; animation-duration: 9s;  animation-delay: -0.5s; }
.snowflake:nth-child(13) { left: 50%; animation-duration: 16s; animation-delay: -10s; }
.snowflake:nth-child(14) { left: 54%; animation-duration: 12s; animation-delay: -4.5s; }
.snowflake:nth-child(15) { left: 58%; animation-duration: 15s; animation-delay: -1s; }
.snowflake:nth-child(16) { left: 62%; animation-duration: 10s; animation-delay: -6.5s; }
.snowflake:nth-child(17) { left: 66%; animation-duration: 13s; animation-delay: -3.5s; }
.snowflake:nth-child(18) { left: 70%; animation-duration: 18s; animation-delay: -11s; }
.snowflake:nth-child(19) { left: 74%; animation-duration: 11s; animation-delay: -2s; }
.snowflake:nth-child(20) { left: 78%; animation-duration: 14s; animation-delay: -8.5s; }
.snowflake:nth-child(21) { left: 82%; animation-duration: 9s;  animation-delay: -4s; }
.snowflake:nth-child(22) { left: 86%; animation-duration: 16s; animation-delay: -1.2s; }
.snowflake:nth-child(23) { left: 90%; animation-duration: 12s; animation-delay: -7.5s; }
.snowflake:nth-child(24) { left: 94%; animation-duration: 15s; animation-delay: -5.5s; }
.snowflake:nth-child(25) { left: 4%;  animation-duration: 13s; animation-delay: -9.5s; }
.snowflake:nth-child(26) { left: 12%; animation-duration: 10s; animation-delay: -3s; }
.snowflake:nth-child(27) { left: 20%; animation-duration: 17s; animation-delay: -12s; }
.snowflake:nth-child(28) { left: 28%; animation-duration: 11s; animation-delay: -0.8s; }
.snowflake:nth-child(29) { left: 36%; animation-duration: 14s; animation-delay: -6s; }
.snowflake:nth-child(30) { left: 44%; animation-duration: 9s;  animation-delay: -2.2s; }
.snowflake:nth-child(31) { left: 52%; animation-duration: 16s; animation-delay: -8s; }
.snowflake:nth-child(32) { left: 60%; animation-duration: 12s; animation-delay: -4.2s; }
.snowflake:nth-child(33) { left: 68%; animation-duration: 15s; animation-delay: -1.8s; }
.snowflake:nth-child(34) { left: 76%; animation-duration: 10s; animation-delay: -9s; }
.snowflake:nth-child(35) { left: 84%; animation-duration: 13s; animation-delay: -5s; }
.snowflake:nth-child(36) { left: 92%; animation-duration: 18s; animation-delay: -13s; }
.snowflake:nth-child(37) { left: 8%;  animation-duration: 11s; animation-delay: -7s; }
.snowflake:nth-child(38) { left: 24%; animation-duration: 14s; animation-delay: -2.8s; }
.snowflake:nth-child(39) { left: 40%; animation-duration: 9s;  animation-delay: -10s; }
.snowflake:nth-child(40) { left: 56%; animation-duration: 16s; animation-delay: -3.2s; }
.snowflake:nth-child(41) { left: 72%; animation-duration: 12s; animation-delay: -6.8s; }
.snowflake:nth-child(42) { left: 88%; animation-duration: 15s; animation-delay: -0.3s; }
.snowflake:nth-child(43) { left: 16%; animation-duration: 10s; animation-delay: -11s; }
.snowflake:nth-child(44) { left: 32%; animation-duration: 13s; animation-delay: -4.8s; }
.snowflake:nth-child(45) { left: 48%; animation-duration: 17s; animation-delay: -8.2s; }
.snowflake:nth-child(46) { left: 64%; animation-duration: 11s; animation-delay: -1.4s; }
.snowflake:nth-child(47) { left: 80%; animation-duration: 14s; animation-delay: -5.8s; }
.snowflake:nth-child(48) { left: 96%; animation-duration: 9s;  animation-delay: -2.6s; }

@keyframes soft-snow-fall {
  0% {
    transform: translate3d(0, -5vh, 0) rotate(0deg);
    opacity: 0;
  }
  8% { opacity: 1; }
  100% {
    transform: translate3d(18px, 105vh, 0) rotate(360deg);
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snow { display: none; }
}

/* --- Mobil-først layout --- */
body.soft-julesang .wrap {
  align-items: flex-start;
  padding:
    max(0.85rem, env(safe-area-inset-top, 0px))
    max(0.85rem, env(safe-area-inset-right, 0px))
    max(1.25rem, env(safe-area-inset-bottom, 0px))
    max(0.85rem, env(safe-area-inset-left, 0px));
  position: relative;
  z-index: 3;
}

body.soft-julesang .card,
body.soft-julesang .card-wide {
  width: 100%;
  max-width: 420px;
  margin: 0.35rem auto 1.5rem;
  padding: 1.25rem 1rem 1.15rem;
  border-radius: 14px;
  background: rgba(16, 18, 28, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.soft-julesang .logo-row {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
  justify-content: space-between;
  align-items: center;
}

body.soft-julesang .logo-row .logo {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 48%;
  height: auto;
  max-height: clamp(34px, 11vw, 56px);
  object-fit: contain;
}

body.soft-julesang .logo-row .logo-soft {
  object-position: left center;
}

body.soft-julesang .logo-row .logo-rayo {
  object-position: right center;
}

body.soft-julesang h1 {
  font-size: 1.35rem;
  margin-bottom: 0.55rem;
}

body.soft-julesang .intro {
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
}

/* 3 sang-kort side om side på iPhone X (375+) */
body.soft-julesang .poll-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

body.soft-julesang .poll-option-card {
  padding: 0.4rem;
  min-height: 44px;
  border-radius: 10px;
  -webkit-user-select: none;
  user-select: none;
}

body.soft-julesang .poll-listen-btn {
  min-height: 36px;
  font-size: 0.78rem;
  border-radius: 8px;
}

body.soft-julesang .poll-option-text {
  font-size: 0.72rem;
  line-height: 1.25;
  padding: 0 0.1rem 0.2rem;
  word-break: break-word;
  hyphens: auto;
}

body.soft-julesang .card input[type="text"],
body.soft-julesang .card input[type="email"] {
  min-height: 48px;
  font-size: 16px; /* undgår iOS zoom */
  border-radius: 10px;
}

body.soft-julesang .checkbox-field {
  gap: 0.75rem;
  padding: 0.15rem 0;
}

body.soft-julesang .checkbox-field input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
}

body.soft-julesang .checkbox-field label {
  font-size: 0.88rem;
  line-height: 1.4;
}

body.soft-julesang .btn {
  min-height: 52px;
  margin-top: 0.75rem;
  border-radius: 10px;
  font-size: 1.08rem;
}

body.soft-julesang .poll-live-results {
  margin-top: 1.25rem;
}

body.soft-julesang .poll-result-label {
  font-size: 0.82rem;
  gap: 0.5rem;
}

body.soft-julesang .terms-body {
  position: relative;
  z-index: 3;
  padding-top: max(1.25rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

/* Meget smalle skærme (<360): stable sangvalg */
@media (max-width: 359px) {
  body.soft-julesang .poll-option-grid {
    grid-template-columns: 1fr;
  }

  body.soft-julesang .poll-option-image {
    max-width: 200px;
    margin: 0 auto;
  }

  body.soft-julesang .poll-option-text {
    font-size: 0.9rem;
  }
}

/* Lidt større telefoner / landscape-phone */
@media (min-width: 430px) {
  body.soft-julesang .card,
  body.soft-julesang .card-wide {
    max-width: 460px;
    padding: 1.5rem 1.25rem 1.35rem;
  }

  body.soft-julesang h1 {
    font-size: 1.45rem;
  }

  body.soft-julesang .poll-option-text {
    font-size: 0.8rem;
  }

  body.soft-julesang .logo-row {
    gap: 0.85rem;
  }

  body.soft-julesang .logo-row .logo {
    max-height: clamp(42px, 9vw, 62px);
  }
}

/* Tablet / desktop */
@media (min-width: 768px) {
  body.soft-julesang .wrap {
    align-items: center;
    padding: 2rem 1.5rem;
  }

  body.soft-julesang .card-wide {
    max-width: 640px;
    padding: 1.85rem 1.75rem 1.6rem;
  }

  body.soft-julesang .card:not(.card-wide) {
    max-width: 480px;
  }

  body.soft-julesang h1 {
    font-size: 1.65rem;
  }

  body.soft-julesang .poll-option-grid {
    gap: 0.85rem;
  }

  body.soft-julesang .poll-option-card {
    padding: 0.6rem;
  }

  body.soft-julesang .poll-option-text {
    font-size: 0.88rem;
  }

  body.soft-julesang .logo-row {
    gap: 1.35rem;
  }

  body.soft-julesang .logo-row .logo {
    max-height: 72px;
  }
}

/* Færre snefnug på små / spare CPU — stadig synligt */
@media (max-width: 480px) {
  .snowflake:nth-child(n+33) {
    display: none;
  }
}