@font-face{font-family:"bangers";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/7d0635fea7-bangers-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"nunito";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/5a7225555b-nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"nunito";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/c1df9687f1-nunito-latin-700-normal.woff2) format("woff2")}
/* Bopdle: neon music video: equaliser bars, cassette-pink and teal glow, vinyl play button. */
body.dle-bopdle {
  background:
    linear-gradient(0deg, #36e2c414 0 2px, transparent 2px) 0 0 / 100% 28px,
    radial-gradient(circle at 15% 15%, #ff4fa344, transparent 40%),
    radial-gradient(circle at 85% 85%, #36e2c433, transparent 45%),
    var(--background);
  background-attachment: fixed;
}
.dle-bopdle .site-header { background: #0d0619; border-bottom: 3px solid var(--primary); box-shadow: 0 0 20px #ff4fa366; }
.dle-bopdle .site-header .brand { color: #fff; font-size: 26px; letter-spacing: 0.05em; text-shadow: 0 0 10px var(--primary), 2px 2px 0 var(--accent); }
.dle-bopdle .page-title,
.dle-bopdle .reveal-name,
.dle-bopdle .reveal-title { color: #fff; letter-spacing: 0.04em; text-shadow: 0 0 14px var(--primary), 3px 3px 0 var(--accent); }
.dle-bopdle .page-title { font-size: clamp(34px, 7vw, 54px); }
.dle-bopdle .guess-input { border: 2px solid var(--accent); border-radius: 14px; background: #0d0619; }
.dle-bopdle .guess-button, .dle-bopdle .share-button { background: var(--primary); border: 0; border-radius: 14px; font-family: var(--headingFont); font-size: 20px; letter-spacing: 0.06em; box-shadow: 0 0 16px #ff4fa388; }
.dle-bopdle .clue-card { border: 2px solid var(--primary); border-radius: 22px; box-shadow: 0 0 30px #ff4fa333, inset 0 0 40px #36e2c41a; }
.dle-bopdle .play-button {
  position: relative; isolation: isolate; overflow: hidden;
  width: 120px; height: 120px; font-family: var(--headingFont); font-size: 22px; letter-spacing: 0.05em;
  background: transparent; border: 3px solid var(--accent); text-shadow: 0 1px 3px #000;
}
.dle-bopdle .play-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background:
    radial-gradient(circle, var(--primary) 0 26%, transparent 27%),
    conic-gradient(from 0deg, #ffffff22, transparent 20%, #ffffff18 50%, transparent 70%),
    repeating-radial-gradient(circle, #1b1b1b 0 3px, #262626 3px 5px);
}
.dle-bopdle .listen-card.is-playing .play-button { animation: none; }
.dle-bopdle .listen-card.is-playing .play-button::before { animation: vinyl-spin 1.8s linear infinite; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.dle-bopdle .stage-dot.current { background: var(--accent); color: #0d0619; border-color: var(--accent); }
.dle-bopdle .stage-dot.unlocked { border-color: var(--accent); }
.dle-bopdle .cell { border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .dle-bopdle .listen-card.is-playing .play-button::before { animation: none; } }