/* ══════════════════════════════════════════════════════════════
   cursor-follower.css — small red dot (js/cursor-follower.js).
   The element is a 0×0 box moved by the script with transform; the
   visible dot is a centred ::before, so growing it never fights the
   script's positioning. pointer-events: none — it can never block a
   click or trigger a hover. Colour follows the theme (--primary).
   ══════════════════════════════════════════════════════════════ */
.cf-dot {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    will-change: transform;
    backface-visibility: hidden;
}
.cf-dot::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary, #e62327);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 2px 6px rgba(230, 35, 39, .35);
    transform: translate(-50%, -50%) scale(1);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

html.cf-on .cf-dot { opacity: 1; }

/* Over something clickable: grows a little. On click: a small squeeze. */
html.cf-hover .cf-dot::before { transform: translate(-50%, -50%) scale(1.6); }
html.cf-down  .cf-dot::before { transform: translate(-50%, -50%) scale(.7); }
html.cf-hover.cf-down .cf-dot::before { transform: translate(-50%, -50%) scale(1.2); }

/* Over games and text fields: out of the way. */
html.cf-hidden .cf-dot { opacity: 0; }

/* Never on touch screens, for reduced motion, or in print. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .cf-dot { display: none; }
}
@media print {
    .cf-dot { display: none; }
}