/* Knowdle game FX (v60): layer for fx/gamefx.js plus the /games Halloween spotlight.
   Everything here is decoration: pointer-events none, aria-hidden, transforms and opacity only. */

/* ---------- feedback layer (rings, sparkles) ---------- */
.gfx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; contain: strict; }
.gfx-ring { position: absolute; border-radius: 50%; border: 2px solid var(--gfx-ring, #6b2eff); opacity: 0; will-change: transform, opacity; }
html[data-theme="dark"] .gfx-ring { --gfx-ring: #ffc83d; }
.gfx-spark { position: absolute; width: 14px; height: 14px; translate: -50% -50%; opacity: 0; will-change: transform, opacity; }
.gfx-spark svg { display: block; }
.gfx-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: reduce) { .gfx-layer { display: none; } }
body.reduced-motion .gfx-layer { display: none; }

/* ---------- "New" badge on hub tiles ---------- */
.kgt-new {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: #ffc83d; color: #1c1030; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 2px 0 #1c1030; pointer-events: none;
}

/* ---------- Halloween spotlight row on /games (shown in October only, by date in app.js) ---------- */
.hub-row.hw-row { position: relative; }
.hw-row .hw-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-row .hw-sub { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-dim); }
.hw-row .hw-pumpkin { width: 30px; height: auto; flex: none; }
.hw-bat { position: absolute; top: -14px; right: 92px; width: 54px; height: auto; pointer-events: none; z-index: 2;
  animation: hw-bob 4.8s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes hw-bob { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -5px; rotate: 3deg; } }
@media (prefers-reduced-motion: reduce) { .hw-bat { animation: none; } }
body.reduced-motion .hw-bat { animation: none; }
@media (max-width: 380px) { .hw-bat { right: 84px; width: 44px; } }