/* ══════════════════════════════════════════════════════════════════════════════
   WhoDrew.io — Temporary Diwali festival theme (auto-off after 20 Nov 2026, see diwali.js)
   Everything is scoped under html.theme-diwali, which diwali.js only adds while the festival runs.
   Gameplay is untouched: no layout changes on game screens, the drawing canvas keeps its colours,
   and every decoration is pointer-events:none.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Festive palette: midnight-purple sky, gold ink, saffron accents ───────── */
html.theme-diwali {
  --bg-base:        #140a22;
  --bg-surface:     #1f1131;
  --bg-card:        #251439;
  --bg-card-hov:    #2f1a49;
  --border-ink:     #a8742c;
  --shadow-ink:     #07030d;
  --txt-primary:    #fff8ec;
  --txt-secondary:  #f1dcc0;
  --txt-muted:      #c5a98a;
  --accent:         #FFB020;
  --accent-light:   #FFD27A;
  --accent-shadow:  #5a3a00;
  --speech-bg:      #2c1843;
  --doodle-yellow:  #FFC93C;
  --dw-gold:        #FFC93C;
  --dw-saffron:     #FF8A1F;
  --dw-glow:        rgba(255, 170, 60, 0.35);
}

html.theme-diwali.theme-light,
html.theme-diwali body.theme-light {
  --bg-base:        #FFF4E2;
  --bg-surface:     #FFFDF8;
  --bg-card:        #FFFDF8;
  --bg-card-hov:    #FFF0D6;
  --border-ink:     #8A2B0E;
  --shadow-ink:     #8A2B0E;
  --txt-primary:    #2a0f05;
  --txt-secondary:  #5a2a12;
  --txt-muted:      #8a5a3a;
  --accent:         #E86A00;
  --accent-light:   #FF9A2E;
  --accent-shadow:  #8A2B0E;
  --speech-bg:      #FFF6E6;
  --dw-glow:        rgba(255, 140, 30, 0.25);
}

/* Rangoli-dotted sky with warm diya glow rising from the bottom */
html.theme-diwali,
html.theme-diwali body {
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 90% 40% at 50% 105%, rgba(255, 140, 30, 0.28), transparent 70%),
    radial-gradient(ellipse 60% 35% at 15% 0%, rgba(199, 125, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 35% at 85% 0%, rgba(255, 59, 92, 0.13), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23FFC93C' stroke-opacity='.11' stroke-width='1.4'%3E%3Ccircle cx='48' cy='48' r='6'/%3E%3Cpath d='M48 30 Q54 40 48 42 Q42 40 48 30Z M48 66 Q54 56 48 54 Q42 56 48 66Z M30 48 Q40 42 42 48 Q40 54 30 48Z M66 48 Q56 42 54 48 Q56 54 66 48Z'/%3E%3C/g%3E%3Cg fill='%23FF6B9A' fill-opacity='.10'%3E%3Ccircle cx='0' cy='0' r='2.5'/%3E%3Ccircle cx='96' cy='0' r='2.5'/%3E%3Ccircle cx='0' cy='96' r='2.5'/%3E%3Ccircle cx='96' cy='96' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 100% 100%, 96px 96px;
  background-attachment: fixed;
}
html.theme-diwali.theme-light,
html.theme-diwali.theme-light body {
  background-image:
    radial-gradient(ellipse 90% 40% at 50% 105%, rgba(255, 140, 30, 0.22), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23C2410C' stroke-opacity='.14' stroke-width='1.4'%3E%3Ccircle cx='48' cy='48' r='6'/%3E%3Cpath d='M48 30 Q54 40 48 42 Q42 40 48 30Z M48 66 Q54 56 48 54 Q42 56 48 66Z M30 48 Q40 42 42 48 Q40 54 30 48Z M66 48 Q56 42 54 48 Q56 54 66 48Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 96px 96px;
}

/* The default floating orbs clash with the fireworks — swap them for soft diya glows */
html.theme-diwali .orb { opacity: 0.35; filter: hue-rotate(-40deg) saturate(1.4); }

/* ── Surfaces & buttons: gold-trimmed cards, shimmering gold primary buttons ─ */
html.theme-diwali .glass-card {
  box-shadow: var(--doodle-shadow-card), 0 0 22px var(--dw-glow);
}
html.theme-diwali .btn-primary {
  background: linear-gradient(110deg, #FFB020 0%, #FFD86B 45%, #FFB020 55%, #FF8A1F 100%);
  background-size: 220% 100%;
  animation: dw-shimmer 3.2s linear infinite;
}
html.theme-diwali .btn-primary:hover:not(:disabled) {
  background: linear-gradient(110deg, #FFC03A 0%, #FFE38E 45%, #FFC03A 55%, #FF9A33 100%);
  background-size: 220% 100%;
}
@keyframes dw-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -120% 0; }
}

/* ── Logo: glowing gold text under its own string of lights ───────────────── */
html.theme-diwali .logo-text {
  text-shadow: 2.5px 2.5px 0 var(--shadow-ink), 0 0 18px rgba(255, 190, 80, 0.45);
}
html.theme-diwali .logo-dot {
  color: var(--dw-gold);
  text-shadow: 2.5px 2.5px 0 var(--shadow-ink), 0 0 14px rgba(255, 201, 60, 0.9);
}
html.theme-diwali .logo-brand-lockup { padding-top: 30px; }

.dw-greeting { display: none; }
html.theme-diwali .dw-greeting {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 3.6vw, 1.25rem);
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, #FFC93C, #FF8A3D, #FF5FD2, #FFC93C);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dw-shimmer 5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 170, 60, 0.4));
}
html.theme-diwali.theme-light .dw-greeting {
  background-image: linear-gradient(90deg, #C2410C, #BE185D, #7C2D12, #C2410C);
  filter: none;
}
.dw-greeting-hi { font-family: 'Nirmala UI', 'Mangal', 'Noto Sans Devanagari', var(--font-display); }
.dw-greeting-spark { color: #FFC93C; -webkit-text-fill-color: #FFC93C; display: inline-block; animation: sparkle-pulse 1.8s infinite ease-in-out; }

/* ── Decoration layers ────────────────────────────────────────────────────── */
.dw-layer { display: none; }
html.theme-diwali .dw-layer {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
html.theme-diwali .dw-back  { z-index: 0; }
/* Static pages (about, terms…) aren't positioned like the game screens, so sink the layer below
   their content; body's own background would hide it there, so the sky is painted on html alone. */
html.theme-diwali[data-dw-screen="static"] .dw-back { z-index: -1; }
html.theme-diwali[data-dw-screen="static"] body { background: transparent; }

.dw-fireworks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* String lights */
.dw-lights {
  position: absolute;
  pointer-events: none;
}
.dw-wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dw-wire path {
  stroke: #3a2a14;
  stroke-width: 2;
}
html.theme-diwali.theme-light .dw-wire path { stroke: #5a2a12; }
.dw-bulb {
  --c: #FFC93C;
  position: absolute;
  width: 10px;
  height: 15px;
  margin-left: -5px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: radial-gradient(circle at 40% 35%, #fff 0 12%, var(--c) 45%);
  box-shadow: 0 0 6px 2px var(--c), 0 0 18px 4px var(--c);
  animation: dw-twinkle 2s ease-in-out infinite;
}
.dw-bulb::before {
  /* little socket cap on top of each bulb */
  content: '';
  position: absolute;
  top: -4px;
  left: 2px;
  width: 6px;
  height: 5px;
  border-radius: 2px;
  background: #2b2b2b;
}
@keyframes dw-twinkle {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.35; }
  55%      { opacity: 0.45; }
}

.dw-lights-top {
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
}
.dw-lights-logo {
  top: 0;
  left: -6%;
  width: 112%;
  height: 40px;
  z-index: 1;
}
.dw-lights-logo .dw-bulb { width: 12px; height: 18px; margin-left: -6px; }
.dw-lights-logo .dw-bulb::before { left: 3px; }

/* Marigold garlands down the screen edges */
.dw-toran {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-top: 6px;
  transform-origin: top center;
  animation: dw-sway 6s ease-in-out infinite;
}
.dw-toran-left  { left: 10px; }
.dw-toran-right { right: 10px; animation-delay: -3s; }
.dw-marigold {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #C2410C 0 18%, transparent 20%),
    repeating-conic-gradient(#FF8A1F 0 12deg, #FFA53A 12deg 24deg);
  box-shadow: inset 0 -3px 0 rgba(150, 50, 0, 0.35), 0 0 6px rgba(255, 140, 30, 0.35);
}
.dw-marigold-alt {
  background:
    radial-gradient(circle, #D97706 0 18%, transparent 20%),
    repeating-conic-gradient(#FFC93C 0 12deg, #FFDB6E 12deg 24deg);
}
.dw-leaf {
  width: 14px;
  height: 22px;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #2f9e44, #146c2e);
  transform: rotate(-20deg);
}
@keyframes dw-sway {
  0%, 100% { transform: rotate(1.6deg); }
  50%      { transform: rotate(-1.6deg); }
}

/* Akash kandil lanterns */
.dw-lantern {
  position: absolute;
  top: 0;
  width: 60px;
  transform-origin: top center;
  animation: dw-sway 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255, 120, 60, 0.55));
}
.dw-lantern-left  { left: 60px; }
.dw-lantern-right { right: 60px; animation-delay: -2.2s; }
.dw-lantern-cord {
  display: block;
  width: 2px;
  height: 70px;
  margin: 0 auto;
  background: #a8742c;
}
.dw-lantern-svg { display: block; width: 60px; height: 110px; }

/* Diyas along the bottom edge */
.dw-diyas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 8px 4px;
  background: linear-gradient(to top, rgba(255, 140, 30, 0.18), transparent);
}
.dw-diyas-inline { display: none; }
html.theme-diwali .dw-diyas-inline {
  display: flex;
  position: static;
  width: 100%;
  background: none;
  margin-top: 8px;
}
.dw-diya {
  position: relative;
  width: 54px;
  height: 52px;
}
.dw-diya-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 54px;
  height: 40px;
}
.dw-flame {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 12px;
  height: 22px;
  margin-left: -6px;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 75%, #fff8d0 0 20%, #FFC93C 45%, #FF6B1F 80%, transparent 100%);
  box-shadow: 0 0 14px 6px rgba(255, 160, 40, 0.55), 0 0 34px 12px rgba(255, 120, 20, 0.25);
  transform-origin: 50% 100%;
  animation: dw-flicker var(--flick, 1.2s) ease-in-out var(--delay, 0s) infinite alternate;
}
.dw-flame-core {
  position: absolute;
  left: 4px;
  bottom: 2px;
  width: 4px;
  height: 8px;
  border-radius: 50%;
  background: #6ec6ff;
  opacity: 0.6;
}
@keyframes dw-flicker {
  0%   { transform: scale(1, 1) rotate(-2deg); opacity: 1; }
  35%  { transform: scale(0.92, 1.08) rotate(2deg); }
  70%  { transform: scale(1.05, 0.94) rotate(-1deg); opacity: 0.9; }
  100% { transform: scale(0.96, 1.1) rotate(1.5deg); opacity: 1; }
}

/* ── Where each decoration shows ──────────────────────────────────────────── */
/* Fireworks, garlands and lanterns belong to the home screen (and static pages);
   lobby and results keep the top lights and the diya glow along the bottom. */
html.theme-diwali .dw-toran,
html.theme-diwali .dw-lantern { display: none; }
@media (min-width: 900px) {
  html.theme-diwali[data-dw-screen="landing"] .dw-toran,
  html.theme-diwali[data-dw-screen="static"] .dw-toran { display: flex; }
}
@media (min-width: 1200px) {
  html.theme-diwali[data-dw-screen="landing"] .dw-lantern,
  html.theme-diwali[data-dw-screen="static"] .dw-lantern { display: block; }
}
/* During actual play (role reveal, drawing, voting, forger guess) only the palette stays —
   no lights or animation competing with the canvas. */
html.theme-diwali.dw-gameplay .dw-back { display: none; }

/* ── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .dw-diyas { height: 54px; }
  .dw-diya { width: 40px; height: 40px; }
  .dw-diya-svg { width: 40px; height: 30px; }
  .dw-flame { bottom: 22px; width: 9px; height: 16px; margin-left: -4.5px; }
  .dw-flame-core { left: 3px; width: 3px; height: 6px; }
  .dw-lights-logo .dw-bulb { width: 9px; height: 14px; margin-left: -4.5px; }
  .dw-lights-logo .dw-bulb::before { left: 1.5px; width: 6px; }
  html.theme-diwali .logo-brand-lockup { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .dw-bulb, .dw-flame, .dw-toran, .dw-lantern,
  html.theme-diwali .btn-primary, html.theme-diwali .dw-greeting, .dw-greeting-spark { animation: none !important; }
}

/* ══ Game moments ═════════════════════════════════════════════════════════════
   Interrogation: the timer is a fuse burning toward a sutli bomb that blasts at 0.
   Forger guess: smoke bombs at the edges, thicker as the guess clock runs out (behind the card).
   Results: rockets when the artists win. All pointer-events:none. */

/* ── Fuse timer ─────────────────────────────────────────────────────────────── */
html.theme-diwali .int-timer-bar {
  position: relative;
  overflow: visible;
  margin-left: 26px;
  height: 6px;
  border: none;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #2a1a10 0 3px, #3a2616 3px 6px); /* burnt fuse */
}
html.theme-diwali .int-timer-fill { opacity: 0; }
.dw-fuse, .dw-bomb, .dw-spark { display: none; }
html.theme-diwali .dw-fuse {
  display: block;
  position: absolute;
  inset: -1px 0;
  border-radius: 4px;
  background: repeating-linear-gradient(-55deg, #E8BE78 0 3px, #A8742C 3px 6px); /* twisted fuse cord */
  box-shadow: 0 0 0 1px #4a1d05;
  transition: clip-path 1s linear;
}
html.theme-diwali .dw-bomb {
  display: block;
  position: absolute;
  left: -30px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -17px;
  filter: drop-shadow(1.5px 1.5px 0 var(--shadow-ink));
}
.dw-bomb-svg { display: block; width: 100%; height: 100%; }
html.theme-diwali .dw-spark {
  display: block;
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  transition: left 1s linear;
}
.dw-spark::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, #FFD45A 45%, rgba(255, 120, 20, 0) 75%);
  box-shadow: 0 0 10px 4px rgba(255, 170, 40, 0.75);
  animation: dw-spark-glow 0.12s ease-in-out infinite alternate;
}
.dw-spark i {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #FFE38E;
  box-shadow: 0 0 4px 1px #FFB020;
  transform: rotate(var(--a)) translateX(0);
  animation: dw-spark-fly 0.55s linear infinite;
}
@keyframes dw-spark-glow {
  from { transform: scale(0.85); opacity: 0.85; }
  to   { transform: scale(1.15); opacity: 1; }
}
@keyframes dw-spark-fly {
  0%   { transform: rotate(var(--a)) translateX(2px); opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(14px) translateY(4px); opacity: 0; }
}
.int-timer-bar.dw-snap .dw-fuse,
.int-timer-bar.dw-snap .dw-spark { transition: none; }
/* Last 5 seconds: the spark roars and the bomb trembles */
html.theme-diwali .dw-fuse-urgent .dw-spark { transform: scale(1.5); }
html.theme-diwali .dw-fuse-urgent .dw-bomb { animation: dw-tremble 0.18s linear infinite; }
html.theme-diwali .dw-fuse-urgent + .int-timer-num { color: var(--doodle-coral); }
@keyframes dw-tremble {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25%      { transform: translate(-1px, 0.5px) rotate(-4deg); }
  75%      { transform: translate(1px, -0.5px) rotate(4deg); }
}
html.theme-diwali .dw-blown .dw-spark,
html.theme-diwali .dw-blown .dw-bomb { visibility: hidden; }

/* ── Blast ──────────────────────────────────────────────────────────────────── */
.dw-fx { display: none; }
html.theme-diwali .dw-fx { display: block; z-index: 60; }
html.theme-diwali .dw-fx .dw-fireworks { opacity: 0; transition: opacity 0.6s ease; }
html.theme-diwali .dw-fx.dw-fx-volley .dw-fireworks { opacity: 1; }
.dw-blast {
  position: absolute;
  width: 0;
  height: 0;
}
.dw-blast-flash {
  position: absolute;
  left: -90px;
  top: -90px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 15%, #FFE38E 30%, #FF8A1F 55%, rgba(255, 60, 0, 0) 72%);
  animation: dw-blast-flash 0.6s ease-out forwards;
}
.dw-blast-ring {
  position: absolute;
  left: -20px;
  top: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #FFC93C;
  animation: dw-blast-ring 0.7s ease-out forwards;
}
.dw-blast-ring2 { border-color: #FF3B5C; border-width: 3px; animation-delay: 0.08s; opacity: 0; }
.dw-blast-word {
  position: absolute;
  left: 0;
  top: -6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  color: #FFC93C;
  -webkit-text-stroke: 2px #5b1d07;
  text-shadow: 3px 3px 0 #5b1d07, 0 0 18px rgba(255, 140, 30, 0.9);
  white-space: nowrap;
  animation: dw-blast-word 1.3s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.dw-debris {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
  animation: dw-debris 0.9s cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}
.dw-screen-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 220, 140, 0.45), rgba(255, 120, 30, 0.15) 60%, transparent);
  animation: dw-screen-flash 0.5s ease-out forwards;
}
@keyframes dw-blast-flash {
  0%   { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes dw-blast-ring {
  0%   { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(5); opacity: 0; }
}
@keyframes dw-blast-word {
  0%   { transform: translate(-50%, -50%) scale(0.2) rotate(-12deg); opacity: 0; }
  20%  { transform: translate(-50%, -110%) scale(1.15) rotate(-6deg); opacity: 1; }
  70%  { transform: translate(-50%, -120%) scale(1) rotate(-6deg); opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(0.95) rotate(-6deg); opacity: 0; }
}
.dw-blast-below .dw-blast-word { animation-name: dw-blast-word-below; }
@keyframes dw-blast-word-below {
  0%   { transform: translate(-50%, -50%) scale(0.2) rotate(-12deg); opacity: 0; }
  20%  { transform: translate(-50%, 40%) scale(1.15) rotate(-6deg); opacity: 1; }
  70%  { transform: translate(-50%, 55%) scale(1) rotate(-6deg); opacity: 1; }
  100% { transform: translate(-50%, 90%) scale(0.95) rotate(-6deg); opacity: 0; }
}
@keyframes dw-debris {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; }
}
@keyframes dw-screen-flash {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.dw-shake { animation: dw-shake 0.45s ease-out; }
@keyframes dw-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-6px, 3px); }
  30% { transform: translate(5px, -4px); }
  45% { transform: translate(-4px, 2px); }
  60% { transform: translate(3px, -2px); }
  80% { transform: translate(-1px, 1px); }
}

/* ── Smoke (forger guess) ───────────────────────────────────────────────────── */
.dw-smoke { display: none; }
html.theme-diwali .dw-smoke {
  display: block;
  z-index: 0; /* behind every screen, so the opaque guess card always stays clear */
  opacity: 0;
  transition: opacity 0.6s ease;
}
html.theme-diwali[data-dw-screen="forger-guess"] .dw-smoke { opacity: 1; }
.dw-smoke-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Haze creeping in from the edges; the centre (where the card is) stays clear */
html.theme-diwali .dw-smoke::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--haze, 0);
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 40%, rgba(214, 196, 230, 0.35) 75%, rgba(230, 214, 240, 0.6) 100%);
}
html.theme-diwali.theme-light .dw-smoke::after {
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 40%, rgba(120, 100, 110, 0.22) 75%, rgba(110, 90, 100, 0.4) 100%);
}
/* The guess card floats above the smoke */
html.theme-diwali #screen-forger-guess .forger-guess-card { z-index: 1; }

@media (max-width: 600px) {
  html.theme-diwali .int-timer-bar { margin-left: 22px; }
  html.theme-diwali .dw-bomb { width: 22px; height: 22px; left: -23px; margin-top: -13px; }
  .dw-blast-word { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dw-spark i, .dw-spark::before, html.theme-diwali .dw-fuse-urgent .dw-bomb,
  .dw-blast-ring, .dw-debris, .dw-shake { animation: none !important; }
  .dw-blast-ring { display: none; }
}