/* ================================================================
   dojo-music.css — Dojo ambient music control (opt-in easter egg)
   Isolated component for dojo.html. Scoped with `button.dm-btn` /
   `.dm-btn` so it always wins over a single Tailwind utility class
   (the Dojo page is a Tailwind island; no global tokens are touched).
   Nothing here affects the navbar, podium, leaderboard or sticky bar.
   ================================================================ */

/* ---------- the audio element: zero layout footprint ---------- */
#dojoMusic {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ---------- the control ----------
   Layout safety: the button's box is deliberately SMALLER than the kicker's
   line box (20px desktop / 16px <=768px) so it can never become the tallest
   inline box -> the line box, the H1, the podium and the leaderboard keep
   byte-identical geometry. The touch target is enlarged invisibly with
   ::before (36px) instead, which never affects layout.
   Visual refinement: the glyph is optically centred (the Font Awesome icons
   are square, so a half-pixel optical nudge keeps it looking centred inside
   the circle), the idle border sits closer to the Dojo hairline weight, and
   the playing ring is slightly softer. No size change, no new effects. */
button.dm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin-inline-start: 8px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.50);
    font-family: inherit;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0;          /* the kicker uses 0.3em tracking - reset it here */
    text-transform: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* optical centring of the square icon inside the circle */
button.dm-btn .dm-ico {
    display: block;
    line-height: 1;
    transform: translateY(-0.5px);
    pointer-events: none;
}

/* invisible, generous hit area (36x36) - does not affect layout */
button.dm-btn::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 999px;
}

@media (max-width: 768px) {
    button.dm-btn {
        width: 14px;
        height: 14px;          /* smaller than the mobile kicker line box (16px) */
        font-size: 7px;
    }
    button.dm-btn::before { inset: -11px; }
}

button.dm-btn:hover {
    color: #ff4d6d;
    background: rgba(255, 77, 109, 0.10);
    border-color: rgba(255, 77, 109, 0.40);
}

button.dm-btn:focus-visible {
    outline: 2px solid rgba(247, 109, 142, 0.9);
    outline-offset: 2px;
    color: #ff4d6d;
}

button.dm-btn .dm-ico {
    display: block;
    pointer-events: none;
}

button.dm-btn .dm-ico-pause { display: none; }
button.dm-btn.is-playing .dm-ico-play  { display: none; }
button.dm-btn.is-playing .dm-ico-pause { display: block; }

/* ---------- playing state: a tiny ring around the button only ---------- */
button.dm-btn.is-playing {
    color: #ff4d6d;
    border-color: rgba(255, 77, 109, 0.45);
    background: rgba(255, 77, 109, 0.10);
}

button.dm-btn.is-playing::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 1px solid rgba(255, 77, 109, 0.42);
    border-radius: 999px;
    pointer-events: none;
    animation: dm-ring 2.8s ease-out infinite;
}

@keyframes dm-ring {
    0%   { transform: scale(1);    opacity: 0.45; }
    70%  { transform: scale(1.4);  opacity: 0; }
    100% { transform: scale(1.4);  opacity: 0; }
}

/* ---------- failure: no broken player, just a quiet hint ---------- */
button.dm-btn.is-error {
    color: #ff8b80;
    border-color: rgba(231, 76, 60, 0.45);
}

/* ---------- reduced motion: kill the ring, keep playback ---------- */
@media (prefers-reduced-motion: reduce) {
    button.dm-btn,
    button.dm-btn::after {
        animation: none !important;
        transition: none !important;
    }
    button.dm-btn.is-playing::after { display: none; }
}