/* =========================================================
   accessibility.css — the "never compromise" layer
   Load LAST on every page so it can override anything.
   Helps keyboard, screen-reader, low-vision, and
   motion-sensitive visitors.
   ========================================================= */

/* ---------- Skip link ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--title-color);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 6px 0;
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Visible focus for every interactive element ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
#player:focus-visible {
    outline: 3px solid var(--burnt);
    outline-offset: 2px;
    border-radius: 2px;
}
a:focus,
button:focus { outline: 3px solid var(--burnt); outline-offset: 2px; }

/* ---------- Screen-reader-only utility ---------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

#player { outline-offset: 4px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    #player,
    #player:hover { transform: rotate(0deg) !important; }
    .nav-links li,
    .nav-links li:nth-child(even),
    .tagline,
    .welcome-text img { transform: none !important; }
    #left-spool,
    #right-spool { animation: none !important; }

    /* stickers: kill the bob + rock entirely */
    .sticker .sticker-art,
    .sticker:hover .sticker-art,
    .sticker:focus-visible .sticker-art {
        animation: none !important;
        transform: none !important;
    }
    /* arcade + blog motion */
    .arcade-banner,
    .sunburst { animation: none !important; }
}

/* ---------- High contrast / forced colors ---------- */
@media (forced-colors: active) {
    .widget,
    .nav-links li,
    .stamp,
    .game-stamp,
    .win,
    .post-card { border: 2px solid; }
    a { text-decoration: underline; }
}

/* ---------- Minimum tap targets on touch ---------- */
@media (pointer: coarse) {
    .nav-links li a,
    .link-list a,
    .desk-icon { min-height: 44px; }
}