/* accessibility.css - Shared accessibility styles for all 12 games */

/* Focus indicators for keyboard navigation */
*:focus-visible {
    outline: 3px solid #ffd700 !important;
    outline-offset: 2px !important;
}

/* Skip to content (hidden until focused) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    background: #ffd700;
    color: #000;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 700;
    z-index: 99999;
    border-radius: 4px;
    text-decoration: none;
}
.skip-link:focus {
    top: 10px;
}

/* High contrast mode toggle */
.high-contrast body,
body.high-contrast {
    filter: contrast(1.3);
}
.high-contrast canvas {
    filter: contrast(1.2) brightness(1.1);
}
.high-contrast .btn,
.high-contrast .btn-menu,
.high-contrast .game-btn,
.high-contrast button {
    font-size: 110% !important;
    font-weight: 800 !important;
    border-width: 3px !important;
}
.high-contrast .scene-heading,
.high-contrast h1,
.high-contrast h2 {
    font-size: 120% !important;
    letter-spacing: 1px;
}
.high-contrast p,
.high-contrast span,
.high-contrast div {
    font-size: 105%;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Minimum tap target for mobile (44x44px) */
@media (pointer: coarse) {
    button, .btn, .btn-menu, .game-btn, .nav-tab,
    [role="button"], .clickable {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Loading overlay base styles */
.a11y-loading-overlay {
    position: fixed;
    inset: 0;
    background: #0a0a12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99998;
    transition: opacity 0.3s;
    color: #ccc;
    font-family: 'Segoe UI', Arial, sans-serif;
}
.a11y-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.a11y-loading-text {
    font-size: 18px;
    margin-bottom: 16px;
}
.a11y-loading-bar-bg {
    width: 280px;
    height: 8px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
}
.a11y-loading-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffd700, #ffaa00);
    border-radius: 4px;
    transition: width 0.15s;
}
.a11y-loading-pct {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
}

/* Accessibility toggle button (fixed in corner) */
#a11y-toggle {
    position: fixed;
    bottom: 8px;
    left: 8px;
    width: 36px;
    height: 36px;
    background: rgba(30,30,50,0.8);
    border: 1px solid #555;
    border-radius: 50%;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: all 0.15s;
}
#a11y-toggle:hover {
    background: rgba(50,50,80,0.9);
    color: #ffd700;
    border-color: #ffd700;
}
#a11y-toggle[aria-pressed="true"] {
    background: #ffd700;
    color: #000;
    border-color: #ffd700;
}