/* Import local custom fonts */
@font-face {
    font-family: 'CustomTitle';
    src: url('./fonts/title.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Highlight currently-playing equation part */
.math-question .question-text .playing {
    color: #000000 !important;
    text-shadow: 0 2px 8px rgb(255, 255, 255);
    transition: color 160ms ease, text-shadow 160ms ease;
}


@font-face {
    font-family: 'CustomMain';
    src: url('./fonts/all.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =================================== */
/* 1. GLOBAL STYLES (Body, Header, Footer) */
/* =================================== */
html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'CustomMain', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;

    /* Brighter, multi-stop gradient with more depth */
    background: linear-gradient(120deg, #071427 0%, #183447 35%, #0b3b5a 65%, #0f172a 100%);
    background-size: 240% 240%;
    background-attachment: fixed;
    /* keep a single seamless background while scrolling */
    background-repeat: no-repeat;
    animation: bodyGradient 20s ease-in-out infinite;
}

@keyframes bodyGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    body {
        animation: none !important;
    }
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 0;
}

/* Header Styling */
header {
    color: #fff;
    padding: 5px 0;
    margin-bottom: 5px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    /* night sky background */
    background: radial-gradient(circle at 25% 20%, #0b2a4a 0%, #07122a 30%, #020617 100%);
    color: #fff;
    background-size: cover;
}

/* gradientShift keyframes removed; header uses a static gradient now */

/* Badge for "Coming Soon" cards */
.badge-coming-soon {
    background: #000;
    color: #ff7a00;
    padding: 6px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 8px;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 153, 255, 0.95);
    pointer-events: none;
    user-select: none;
}

header .container {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 4;
}

header .title-group {
    text-align: center;
    flex-grow: 0;
    /* Prevent full-width expansion */
    display: inline-block;
    /* Shrink-wrap to content */
    max-width: fit-content;
    /* Ensure content-fit width */
    position: relative;
}

/* Accessibility: Skip Link is visually hidden but becomes visible when focused by keyboard users */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Make the skip link visible in the upper-left when focused via keyboard */
.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    left: 12px;
    top: 12px;
    /* ensure element is fully visible (override visually-hidden clipping) */
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    padding: 8px 12px;
    background: #fff;
    color: #000;
    border-radius: 6px;
    z-index: 100000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Focus styles for header interactive elements (non-visual by default; only on keyboard focus)
   Use :focus-visible so mouse clicks don't show the focus ring. */
.back-button[tabindex],
.title-group[tabindex] {
    outline: none;
}

.back-button:focus-visible,
.title-group:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Playful multicolor title letters */
.title-letter {
    display: inline-block;
    font-weight: 900;
    font-size: 1.15em;
    line-height: 1;
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

/* lighter, playful palette: blue, green, pink, purple */
.title-letter:nth-child(5n+1) {
    color: #6ec8ff;
}

/* light blue */
.title-letter:nth-child(5n+2) {
    color: #8ff0a0;
}

/* light green */
.title-letter:nth-child(5n+3) {
    color: #ffb6e6;
}

/* pink */
.title-letter:nth-child(5n+4) {
    color: #d3b3ff;
}

/* purple */
.title-letter:nth-child(5n+5) {
    color: #ffe59e;
}

/* light yellow */

/* wave animation: letters pop left-to-right every 4s */
@keyframes letterPop {
    0% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }

    30% {
        transform: translateY(-10px) scale(1.12);
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.12));
    }

    100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
}

/* Use JS to trigger the pop effect every 5s; keep CSS as the visual state for the pop */
.title-letter {
    transition: transform 700ms cubic-bezier(.2, .8, .2, 1), filter 700ms ease;
}

/* Pop state applied by JS */
.title-letter.pop {
    transform: translateY(-10px) scale(1.12);
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.12));
}

/* Centered container under main header (moved from inline index.html) */
#music-and-ai-container {
    min-height: 30px;
    width: 98%;
    margin: 0 auto;
    margin-bottom: 5px;
    /* centers horizontally */
    display: flex;
    align-items: stretch;
    /* ensure children fill parent's height */
    justify-content: center;
    background: #00000054;
}

/* For larger screens, constrain container to 50% width and center it */
@media (min-width: 1025px) {
    #music-and-ai-container {
        width: 50%;
    }
}

/* Children inside the music/AI container split the space horizontally */
.music-half,
.speaky-half {
    width: 50%;
    height: 100%;
    min-height: 30px;
    box-sizing: border-box;
    padding: 8px 12px;
}

/* Simple alignment for internal placeholders */
#music-player {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#speaky {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Distinct semi-transparent backgrounds for each half */
#music-player {
    background: rgba(0, 0, 0, 0.18);
    border-right: 0.5px solid gray;
}

/* Compact inline music player styles */
.music-player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.mp-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    padding: 0 8px;
    cursor: pointer;
    height: 26px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* remove hard outline, use subtle base shadow */
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.mp-progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    outline: none;
}

.mp-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.mp-volume-group {
    position: relative;
}

.mp-volume-pop {
    position: absolute;
    bottom: 36px;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    padding: 8px;
    border-radius: 8px;
    display: none;
    z-index: 10;
    min-width: 120px;
}

.mp-volume-pop[aria-hidden="false"] {
    display: block;
}

.mp-volume {
    width: 100%;

}


.mp-btn:active,
.mp-btn:hover {
    /* slightly stronger shadow and color accent on hover/focus */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
    color: #00dbe7;
}

/* Visible focus for keyboard users */
.mp-btn:focus-visible {
    outline: 2px solid #00dbe7;
    outline-offset: 2px;
}

.mp-progress:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 219, 231, 0.12);
    outline: none;
}

#speaky {
    /* background: rgba(255, 255, 255, 0.06); */
    background: rgba(0, 0, 0, 0.18);
    border-left: 0.5px solid gray;
}

/* AI CTA button */
.ai-cta {
    background: transparent;
    border: none;
    color: #fff;
    /* padding: 8px 12px; */
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
}

.ai-cta {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.ai-cta:hover {
    color: #00dbe7;
}

/* Modal styles (simple, centered) */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    z-index: 99999;
}

.modal[aria-hidden="false"] {
    display: flex;
}

.modal-inner,
.speaky-container {
    background: #fff;
    color: #000;
    padding: 18px;
    border-radius: 8px;
    min-width: 300px;
    min-height: 400px;
    text-align: center;
    font-size: 2.5rem;
}

.modal-actions {
    margin-top: 12px;
}

.modal-actions button {
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    background: #0078d4;
    color: #fff;
    border: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    font-weight: 700;
}

.modal-actions button:hover {
    background: #005aab;
}

.modal-actions button:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .title-letter {
        transition: none;
        animation: none;
        transform: none;
    }
}

header h1 {
    margin: 0;
    font-family: 'CustomTitle', Arial, sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    color: #fff;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 1);
    /* Disabled the flash effect to keep title fully opaque */
    animation: none;
    position: relative;
    z-index: 10;
}

/*
 * Disable automatic scaling applied by the `.selected` class inside game UIs.
 * Many games add a `selected` class to tiles via JS; previously some game CSS
 * used `transform: scale(...)` to visually pop selected tiles. To keep a
 * consistent, non-zooming UI across games we neutralize that transform for
 * elements contained in game sections. This rule is intentionally broad and
 * targets elements inside containers whose class includes `-game` as well as
 * common game grid containers. We use !important to reliably override game
 * specific rules without modifying each game's stylesheet.
 */
[class*="-game"] .selected,
.game-container .selected,
.game-area .selected,
.vowel-grid .selected,
.letter-grid .selected,
.cvc-image-grid .selected,
.word-selection-grid .selected {
    transform: none !important;
}

@keyframes textFlash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

header p {
    font-family: 'CustomTitle', Arial, sans-serif;
    font-size: 1.1em;
    margin-top: 5px;
    font-weight: 400;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    position: relative;
    z-index: 10;
}

/* Header decorative images and animations have been removed.
    The image files under assets/images/main-header/ are left intact in the repo.
    This keeps the header text (`header h1`, `header p`) and the `.back-button` styles unchanged.
*/

/* Subtle vignette + noise overlay (static, accessibility-friendly)
   - non-animated vignette to focus content
   - tiny SVG noise used as a faint texture via data-URI
   - keeps z-index below title (title has z-index:10) and does not affect .back-button (z-index:20)
*/
header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    /* below header text (z-index:10) and back-button (z-index:20) */
    background-image:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.06) 55%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.02) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='1' stitchTiles='stitch' seed='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.07' fill='white'/></svg>");
    background-size: cover, cover, 120px 120px;
    background-repeat: no-repeat, no-repeat, repeat;
    mix-blend-mode: multiply;
}

/* Decorative side bubbles (left + right). Transparent, different sizes, slight zoom in/out.
   They are constrained to the sides via width and do not appear in the middle. */
header .container::before,
header .container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* widen side columns so decorative letters fill more of each side while
         leaving the center area clear (50% + 50% meet at center) */
    width: 50%;
    pointer-events: none;
    z-index: 4;
    /* below header title (z-index:10) and back-button (z-index:20) */
    filter: none;
    /* use a single SVG per side (set by JS) instead of tiling; CSS variables allow JS to inject
         a randomized data-URI for each side. Fallbacks keep previous visuals if JS is disabled. */
    background-image: var(--side-fallback, none);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    transform-origin: center;
    transition: opacity 0.25s ease;
    opacity: 1;
}

/* left side */
header .container::before {
    left: 0;
    /* floating blurred letters (denser set) */
    /* left side background is set via --left-bg by JS; fallback kept in --side-fallback */
    background-image: var(--left-bg, var(--side-fallback));
    background-position: left center;
    background-size: 100% 100%;
}

/* right side */
header .container::after {
    right: 0;
    /* floating blurred letters (denser set, different scatter) */
    /* right side background is set via --right-bg by JS; fallback kept in --side-fallback */
    background-image: var(--right-bg, var(--side-fallback));
    background-position: right center;
    background-size: 100% 100%;
}

/* New full-width header-side container (used when JS injects .header-sides)
   This element sits behind the title but stretches to the full header width
   so left/right decorations can reach the viewport edges. */
.header-sides {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
    /* below header text (z-index:10) */
    overflow: hidden;
}

.header-sides .side {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* subtle blur and slightly reduced opacity for a soft, out-of-focus effect */
    filter: blur(1.6px);
    opacity: 0.95;
    transition: filter 250ms ease, opacity 250ms ease;
}

.header-sides .side.left {
    left: 0;
}

.header-sides .side.right {
    right: 0;
}

/* Style dropdown options for vowel teams (where browser supports option styling) */
select#vowel-type-select,
select#vt-vowel-type-select {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(0, 0, 0, 0.35);
    color: #fff;
    backdrop-filter: blur(4px);
}

select#vowel-type-select option.vowel-type-option,
select#vt-vowel-type-select option.vowel-type-option {
    color: #fff;
    padding: 6px 8px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    header .container::before,
    header .container::after {
        animation: none;
        opacity: 0.95;
        /* keep static stars subtle */
    }
}


/* Back Button */
.back-button {
    position: absolute;
    left: 20px;
    top: 50%;
    background-color: transparent;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    border-radius: 50%;
    z-index: 20;
    width: 45px;
    height: 45px;
    transition: transform 0.2s ease, background-color 0.2s ease;
    transform: translateY(-50%);
    background-image: url('../assets/images/main-header/back-button.png');
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(0) drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7));
}

.back-button:hover,
.back-button:active {
    /* Hover/active: subtle white inner shadow, no scaling; active includes a slightly stronger shadow */
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-50%);
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.15);
    transition: box-shadow 120ms ease, background-color 120ms ease, transform 100ms ease;
}

.back-button:active {
    box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.22);
    transform: translateY(-50%) scale(0.96);
    transition: transform 90ms ease, box-shadow 90ms ease;
}

/* Keep an explicit focus outline for keyboard users using :focus-visible */
.back-button:focus-visible {
    outline-offset: 2px;
}

.back-button-home {
    display: none !important;
}

/* Fullscreen toggle button in the header: visually mirrors .back-button but sits on the right */
.header-fullscreen-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    background-color: transparent;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    border-radius: 50%;
    z-index: 20;
    width: 45px;
    height: 45px;
    transition: transform 0.2s ease, background-color 0.2s ease;
    transform: translateY(-50%);
    background-image: url('../assets/images/main-header/fullscreen.png');
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(0) drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.7));
}

.header-fullscreen-btn:hover,
.header-fullscreen-btn:active {
    background-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-50%);
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.15);
    transition: box-shadow 120ms ease, background-color 120ms ease, transform 100ms ease;
}

.header-fullscreen-btn:active {
    transform: translateY(-50%) scale(0.96);
    box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.22);
    transition: transform 90ms ease, box-shadow 90ms ease;
}

.header-fullscreen-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Swap to close icon when in fullscreen */
.header-fullscreen-btn.is-fullscreen {
    background-image: url('../assets/images/main-header/close-fullscreen.png');
}

/* Footer Styling */
footer {
    background: #494D5F;
    color: #fff;
    text-align: center;
    padding: 3px 0;
    flex-shrink: 0;
    font-size: 0.8em;
    font-family: 'CustomTitle', Arial, sans-serif;
    font-weight: normal;
    margin-top: 10px;
}

footer .container {
    padding: 5px 0;
}

/* Go to Top button */
.go-to-top {
    position: fixed;
    right: 5px;
    bottom: 5px;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 0;
    /* square */
    background: rgba(0, 87, 255, 0.7);
    color: #fff;
    border: none;
    display: none;
    /* hidden until scrolled */
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.go-to-top.show {
    display: inline-flex !important;
    visibility: visible;
    opacity: 1;
}

.go-to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Hide go-to-top on small screens (mobile) */
@media (max-width: 600px) {
    .go-to-top {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.copyright-text {
    margin-right: 15px;
}

.footer-links a {
    color: #fff;
    margin: 0 8px;
    transition: color 0.2s ease;
    font-weight: normal;
}

.footer-links a:hover {
    color: #a9b7ff;
}


/* =================================== */
/* 2. LAYOUT & AD STYLES */
/* =================================== */
main {
    flex-grow: 1;
    /* padding: 10px 0 0 0; */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

.main-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
    max-width: 800px;
}

.game-page-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-width: 960px;
    gap: 20px;
    height: 100%;
    padding-bottom: 20px;
}

.sidebar-ad {
    background: transparent;
    padding: 15px;
    border: 1px dashed rgba(204, 204, 204, 0.6);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    width: 160px;
    height: 600px;
    flex-shrink: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.inline-ad {
    background: transparent;
    padding: 15px;
    border: 1px dashed rgba(204, 204, 204, 0.6);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    min-height: 90px;
}

/* New CSS to handle inline ads inside the game grid on larger screens */
.game-grid>.inline-ad {
    width: 100%;
    margin: 20px 0;
    box-sizing: border-box;
}

.sidebar-ad p {
    color: #888;
    font-style: italic;
    word-break: break-all;
}

.inline-ad p {
    color: #888;
    font-style: italic;
    word-break: break-all;
}


/* =================================== */
/* 3. HOMEPAGE GRID */
/* =================================== */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    background: transparent;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.game-grid-item-content {
    background: #f8f9fa;
    border: 1px solid #ddd;
    padding: 30px;
    text-align: center;
    border-radius: 12px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: #555;
    /* No layout-shifting on hover: only animate shadows/filters */
    transition: box-shadow 0.18s ease, filter 0.18s ease, background-color 0.18s ease;
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.game-grid-item-content:hover,
.game-grid-item-content:focus-visible,
.game-grid-item-content:focus-within {
    /* Strong, omni-directional inner shadow + pronounced outer shadow and faint accent glow. */
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.55),
        /* deep inner shadow from all directions */
        inset 0 0 12px rgba(255, 255, 255, 0.02),
        /* tiny inner highlight */
        0 12px 40px rgba(0, 0, 0, 0.26),
        /* stronger outer drop shadow */
        0 0 36px rgba(41, 169, 255, 0.06);
    /* faint colored glow for emphasis */
    outline: 1px solid rgba(93, 95, 239, 0.14);
    filter: saturate(1.08) brightness(1.03);
}

/* Smooth transitions including outline so keyboard focus shows smoothly */
.game-grid-item-content {
    transition: box-shadow 0.18s ease, filter 0.18s ease, background-color 0.18s ease, outline 120ms ease;
}

.game-grid-item-content h3 {
    margin: 0 0 10px 0;
    color: #5D5FEF;
    font-size: 1.4em;
    font-weight: 600;
}

.game-grid-item-content p {
    font-size: 0.9em;
    color: #666;
    font-weight: 400;
}

.card-with-bg {
    background-image: url('../assets/images/alphabet-balloons/alphabet-card.png');
    background-size: cover;
    background-position: center;
    justify-content: center;
    padding: 20px;
}

/* Ensure all cards that use `-bg` suffix have consistent background layout */
.game-grid-item-content[class$="-bg"] {
    background-size: cover;
    background-position: center;
    justify-content: center;
    padding: 20px;
}

.game-grid-item-content[class$="-bg"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* =================================== */
/* 4. FORCE HEADER ELEMENTS OPAQUE (refactored: only text elements kept)
   Decorative pseudo-elements were removed during refactor. */
header,
header h1,
header p {
    opacity: 1 !important;
}

.card-match-bg {
    background-image: url('../assets/images/alphabet-match/alphabet-match-card.png');
    background-size: cover;
    background-position: center;
    justify-content: center;
    padding: 20px;
}

.card-cvc-bg {
    background-image: url('../assets/images/cvc-words/cvc-words-card.png');
    background-size: cover;
    background-position: center;
    justify-content: center;
    padding: 20px;
}

.card-vowel-teams-bg {
    background-image: url('../assets/images/vowel-teams/vowel-teams-card.png');
    background-size: cover;
    background-position: center;
    justify-content: center;
    padding: 20px;
}

/* Screen-reader-only helper used for hidden images that should be indexed/read but not visually shown */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.card-text-container {
    position: relative;
    z-index: 2;
    background-color: rgba(11, 42, 74, 0.7);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 20px;
    min-width: 270px;
    min-height: 80px;
    width: auto;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-text-container h3,
.card-text-container p {
    color: #fff;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
}

.card-text-container h3 {
    margin-bottom: 10px;
    font-weight: 700;
}

.card-text-container p {
    margin-bottom: 0;
    font-weight: 500;
}

/* Small inline icons for acknowledgements/tools list */
.tool-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 10px;
    display: inline-block;
    object-fit: contain;
}

.tool-emoji {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 10px;
    font-size: 16px;
    line-height: 20px;
}

/* Brand font snippets for acknowledgement names (fall back to system fonts) */
.brand-google {
    font-family: 'Product Sans', 'Inter', 'CustomMain', 'CustomTitle', Helvetica, Arial, sans-serif;
    font-weight: 600;
}

.brand-github {
    font-family: 'Segoe UI', 'Roboto', 'CustomMain', 'CustomTitle', Helvetica, Arial, sans-serif;
    font-weight: 600;
}

.brand-microsoft {
    font-family: 'Segoe UI', Tahoma, Geneva, 'CustomMain', 'CustomTitle', Verdana, sans-serif;
    font-weight: 600;
}


/* =================================== */
/* 4. GENERIC GAME STYLES (Containers, Modals, UI) */
/* =================================== */
.game-container {
    flex-grow: 1;
    background: #222;
    color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
    min-height: 60vh;
    max-height: fit-content;
    position: relative;
    overflow: hidden;
    gap: 20px;
}

.game-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 0;
}

.game-buttons {
    display: flex;
    justify-content: space-between;
    width: 95%;
    max-width: 700px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.help-button {
    background-color: #333;
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.8em;
    font-weight: 600;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.help-button:hover {
    background-color: #555;
}

.start-game-button {
    background: linear-gradient(90deg, #3498db, #2980b9);
    color: #fff;
    border: 2px solid #fff;
    padding: 15px 30px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: 600;
    font-family: 'CustomMain', Arial, sans-serif;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.start-game-button:hover:not(:disabled) {
    background: linear-gradient(90deg, #2980b9, #2471a3);
}

.start-game-button:disabled {
    background: #555;
    cursor: not-allowed;
    opacity: 0.7;
    border: 2px solid #fff;
}

.game-over-screen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    text-align: center;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

.game-over-screen h2 {
    font-size: 3em;
    margin-bottom: 10px;
    color: #2ECC71;
}

.game-over-screen p {
    font-size: 1.8em;
    margin-bottom: 20px;
}

.game-over-screen p #finalScoreValue {
    color: #2ECC71;
}

.game-over-screen button {
    background: linear-gradient(90deg, #3498db, #2980b9);
    color: #fff;
    border: 2px solid #fff;
    padding: 15px 30px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: 600;
    font-family: 'CustomMain', Arial, sans-serif;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.game-over-screen button:hover {
    background: linear-gradient(90deg, #2980b9, #2471a3);
}

.star-rating {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
}

.star {
    font-size: 2.5em;
    color: #555;
    transition: color 0.3s ease;
}

.star.filled {
    color: #f1c40f;
}

/* Help Modal */
.help-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    overflow: auto;
}

.help-modal-content {
    background-color: #fff;
    color: #333;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    position: relative;
    animation: fadeInScale 0.3s ease-out forwards;
    text-align: left;
    font-family: 'CustomMain', Arial, sans-serif;
    box-sizing: border-box;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.help-modal-content h3 {
    margin-top: 0;
    color: #5D5FEF;
    font-size: 1.8em;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}

.help-modal-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-modal-content ul li {
    margin-bottom: 15px;
    font-size: 1.1em;
    line-height: 1.3;
    display: block;
    position: relative;
    padding-left: 25px;
    word-wrap: break-word;
}

.help-modal-content ul li::before {
    content: '■';
    color: red;
    font-size: 1em;
    position: absolute;
    left: 0;
    top: 0;
}

.help-modal-content ul li strong {
    color: #5D5FEF;
    display: inline;
    font-weight: 600;
}

.help-modal-content ul li span.explanation {
    display: block;
    font-size: 0.9em;
    color: #555;
    line-height: 1.3;
    font-weight: 400;
}

/* Nested lists in help modal: use round black bullets matching main text */
.help-modal-content ul li ul {
    list-style: disc outside;
    margin: 0 0 15px;
    padding-left: 25px;
}

.help-modal-content ul li ul li {
    display: list-item;
    position: relative;
    padding-left: 0;
    font-size: 0.9em;
    color: #555;
    line-height: 1.3;
    font-weight: 400;
}

.help-modal-content ul li ul li::before {
    content: none;
}

.help-modal-content .red-bold {
    color: #dc3545;
    font-weight: 600;
}

.help-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.8em;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border: none;
    background: none;
    transition: color 0.2s ease;
}

.help-modal-close:hover {
    color: #333;
}

/* In-game UI common elements (header, score, timer, buttons) */
.game-play-screen {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    overflow: hidden;
    z-index: 1;
}

.game-header-ui {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(0, 90, 194, 1) 0%, rgba(13, 55, 122, 1) 50%, rgba(0, 125, 150, 1) 100%);
    z-index: 5;
    margin-bottom: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.game-header-left,
.game-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mute-button {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.5em;
    transition: color 0.2s ease, background-color 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mute-button:hover {
    background-color: #f0f0f0;
}

.mute-button.muted {
    color: #ccc;
}

.mute-button.muted::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: 3px;
    background-color: #dc3545;
    transform: rotate(-45deg);
    transform-origin: center;
}

.score-display,
.timer-display {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    box-sizing: border-box;
    padding: 5px 15px;
    border-radius: 12px;
    font-size: 1.4em;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.score-display {
    background-color: #6c757d;
}

.target-letter-display {
    background-color: #9b59b6;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    font-size: 1.8em;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    animation: flash 0.5s infinite ease-in-out;
}

@keyframes flash {
    50% {
        background-color: #be8ad0;
        transform: scale(1.05);
    }
}

.timer-display {
    background-color: #3498db;
}

.timer-display.paused {
    background-color: #f39c12;
}

.close-game-button {
    background-color: #dc3545;
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.8em;
    font-weight: 600;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    line-height: 1;
}

.close-game-button:hover {
    background-color: #c82333;
}

.pause-button {
    background-color: #f39c12;
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 4px;
}

.pause-button:hover {
    background-color: #e67e22;
}

.pause-icon {
    display: block;
    width: 4px;
    height: 16px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.play-icon {
    display: none;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid white;
    margin-left: 4px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

.pause-button.paused .pause-icon {
    display: none;
}

.pause-button.paused .play-icon {
    display: block;
}

.countdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 20;
    color: #fff;
    font-size: 8em;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

#countdownNumber {
    animation: countdownScale 1s linear forwards;
}

@keyframes countdownScale {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* Parts of Speech index card background (added for index.html) */
.card-parts-of-speech-bg {
    background-image: url('../assets/images/parts-of-speech/parts-of-speech-card.png');
    background-size: cover;
    background-position: center;
    padding: 20px;
}

.card-numbers-and-math-bg {
    background-image: url('../assets/images/numbers-and-math/numbers-and-math-card.png');
    background-size: cover;
    background-position: center;
    padding: 20px;
}

/* Common selection screen styles */
.game-container.selection-active {
    background: linear-gradient(-45deg, #2c3e50, #3498db, #2c3e50);
}

.letter-selection-screen {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    padding: 20px;
    width: 95%;
    max-width: 700px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    flex-grow: 1;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(5px);
}

.selection-title {
    background: linear-gradient(90deg, #3498db, #2980b9);
    color: #fff;
    padding: 10px 25px;
    border-radius: 12px;
    font-size: 1.5em;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    margin: 0;
}

.letter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    gap: 10px;
    width: 100%;
}

.letter-box {
    background-color: #ccc;
    color: #555;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    cursor: pointer;
    font-size: clamp(1em, 3vw, 1.8em);
    font-weight: 600;
    font-family: 'CustomMain', Arial, sans-serif;
    text-transform: uppercase;
    transition: background-color 0.2s ease, transform 0.1s ease;
    user-select: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.letter-box.selected {
    background: linear-gradient(90deg, #3498db, #2980b9);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.letter-box:hover:not(.selected) {
    background-color: #bbb;
    transform: scale(1.03);
}

/* Vowel Teams box styles (same as .letter-box) */
.vowel-team-box {
    background-color: #ccc;
    color: #555;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    cursor: pointer;
    font-size: clamp(1em, 3vw, 1.8em);
    font-weight: 600;
    font-family: 'CustomMain', Arial, sans-serif;
    text-transform: uppercase;
    transition: background-color 0.2s ease, transform 0.1s ease;
    user-select: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.vowel-team-box.selected {
    background: linear-gradient(90deg, #3498db, #2980b9);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.vowel-team-box:hover:not(.selected) {
    background-color: #bbb;
    transform: scale(1.03);
}

.selection-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 10px;
}

.select-all-button {
    background-color: #9b59b6;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.select-all-button:hover {
    background-color: #8e44ad;
}

.toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-label {
    font-size: 1em;
    font-weight: 500;
    color: white;
    cursor: pointer;
}

/* Flash visual for difficulty toggle when advanced tiles are clicked */
.toggle-container.toggle-flash {
    outline: 3px solid #1976d2;
    outline-offset: 6px;
    box-shadow: 0 0 0 8px rgba(25, 118, 210, 0.12);
    border-radius: 8px;
    transition: box-shadow .18s ease, outline .12s ease;
}

.toggle-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-checkbox+.toggle-label::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background-color: #ccc;
    transition: background-color 0.2s ease;
    vertical-align: middle;
    margin-right: 8px;
}

.toggle-checkbox+.toggle-label::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.toggle-checkbox:checked+.toggle-label::before {
    background: linear-gradient(90deg, #3498db, #2980b9);
}

.toggle-checkbox:checked+.toggle-label::after {
    transform: translate(18px, -50%);
}

.toggle-label {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Toggle: use subtle white inner shadow on hover and active for both track and knob */
.toggle-label:hover::before,
.toggle-label:focus-visible::before {
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.12);
}

/* Ensure toggles show a clear keyboard focus ring */
.toggle-label:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

/* Also show ring when the hidden checkbox receives keyboard focus (keyboard users land on the input) */
.toggle-checkbox:focus-visible+.toggle-label {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

/* Ensure the knob/track get a subtle emphasis on checkbox keyboard focus */
.toggle-checkbox:focus-visible+.toggle-label::before {
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.12);
}

/* Make selectable tiles keyboard-visible when focused */
.topics-box:focus-visible,
.letter-box:focus-visible,
.item-box:focus-visible,
.pos-box:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

/* Definition modal close button keyboard focus */
.definition-modal .close-button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

/* Select-words button accessible focus style */
.select-words-button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

/* Info button focus-visible (keyboard only) */
.info-button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

.toggle-label:active::before {
    box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.18);
}

.toggle-label:hover::after,
.toggle-label:focus-visible::after {
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Active press: slightly scale the knob to indicate click; handle both checked/unchecked positions */
.toggle-label:active::after {
    transform: translateY(-50%) scale(0.94);
}

.toggle-checkbox:checked+.toggle-label:active::after {
    transform: translate(18px, -50%) scale(0.94);
}

/* Smooth transitions for track and knob changes */
.toggle-checkbox+.toggle-label::before,
.toggle-checkbox+.toggle-label::after {
    transition: transform 100ms ease, box-shadow 100ms ease;
}

/* Make the invisible card anchor cover the entire card so browsers show the link URL and it is focusable */
.card-link {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
    text-decoration: none;
    color: inherit;
    background: transparent;
    /* Keep anchors visually unobtrusive */
}

/* Ensure anchors don't show any custom outline by default; provide a visible keyboard-only focus ring */
.card-link:focus {
    outline: none;
}

.card-link:focus-visible {
    outline: 2px solid #00dbe7;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 219, 231, 0.12);
}

/* Ensure static content pages always have a visible white background */
.static-content-container {
    background-color: #e4e4e4;
}

/* =================================== */
/* 5. STATIC PAGE & FORM STYLES        */
/* =================================== */
.static-content-container {
    background: #f4f4f4;
    padding: 20px 40px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.static-content-container h1,
.static-content-container h2 {
    color: #5D5FEF;
}

.static-content-container a {
    color: #3498db;
    font-weight: 600;
    text-decoration: none;
}

.static-content-container a:hover {
    text-decoration: underline;
}

.static-content-container ul {
    list-style-position: inside;
    padding-left: 10px;
}

.static-content-container ul li {
    margin-bottom: 10px;
}

.contact-form {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.form-group input,
.form-group textarea {
    padding: 12px;
    border: 1px solid #fcfcfc;
    border-radius: 8px;
    font-family: 'CustomMain', Arial, sans-serif;
    font-size: 1em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #5D5FEF;
    box-shadow: 0 0 0 3px rgba(93, 95, 239, 0.2);
}

.form-submit-button {
    padding: 15px 20px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(90deg, #3498db, #2980b9);
    border: 2px solid #fff;
    color: #fff;
    font-family: 'CustomMain', Arial, sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.05s ease;
}

.form-submit-button:hover {
    background: linear-gradient(90deg, #2980b9, #2471a3);
}

/* Inner press effect for click */
.form-submit-button:active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Keyboard-active state (Space/Enter) to match mouse press */
.form-submit-button.key-press-active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Contact form styles & status messaging */
.contact-message {
    /* Responsive text: scales between 0.85rem and 1rem based on viewport width */
    font-size: clamp(0.85rem, 0.9vw + 0.4rem, 1rem);
    min-height: 25.6px;
    line-height: 1.2;
}

.contact-message--success {
    color: #3498db;
    /* matches .form-submit-button primary blue */
    font-weight: 600;
}

.contact-message--error {
    color: #e74c3c;
    /* site red used elsewhere */
    font-weight: 600;
}

/* Inputs: prevent horizontal resize and show error state */
.contact-form textarea {
    resize: vertical;
    /* only vertical resizing allowed */
    min-height: 120px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.contact-form .input-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.08);
}

/* FAQ accordion styles */
.faq-divider {
    width: 100%;
    height: clamp(1px, 0.25vw, 2px);
    /* responsive thickness */
    background-color: #bdbdbd;
    /* dark grey */
    border: none;
    margin: 30px 0;
}

.faq-section {
    margin-top: 20px;
}

.faq-section h2 {
    margin-bottom: 12px;
    font-size: clamp(1rem, 1.2vw + 0.8rem, 1.4rem);
}

.faq-list {
    display: grid;
    gap: 8px;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: clamp(0.9rem, 0.9vw + 0.55rem, 0.9rem);
}

.faq-question::after {
    content: '▸';
    margin-left: 12px;
    color: #777;
    font-size: 0.95em;
    transition: transform 0.18s ease, color 0.18s ease;
}

.faq-question[aria-expanded="true"] {
    border-color: #3498db;
}

.faq-question[aria-expanded="true"]::after {
    content: '▾';
    color: #3498db;
    transform: rotate(0deg);
}

.faq-answer {
    padding: 8px 12px;
    background: #fbfbff;
    border-radius: 6px;
    border: 1px solid #f0f0ff;
    font-size: clamp(0.95rem, 0.9vw + 0.4rem, 1rem);
}

.faq-answer[aria-hidden="true"] {
    display: none;
}

.faq-answer[aria-hidden="true"] {
    display: none;
}

/* Small responsive tweak */
@media (max-width: 640px) {
    .faq-section h2 {
        font-size: 1.1rem;
    }

    .faq-question {
        font-size: 0.9rem;
    }

    .faq-answer {
        font-size: 0.9rem;
    }
}

/* =================================== */
/* 7. RESPONSIVENESS (Common)          */
/* =================================== */
@media (max-width: 1024px) {
    main {
        justify-content: center;
        gap: 0;
    }

    .sidebar-ad {
        display: none;
    }

    .game-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        padding: 8px 8px;
    }

    .inline-ad {
        padding: 10px;
    }

    .game-container {
        padding: 15px;
        font-size: 1em;
    }

    .selection-title {
        font-size: 1.1em;
        padding: 8px 20px;
    }

    .start-game-button {
        padding: 10px 20px;
        font-size: 1.2em;
    }

    .help-button {
        width: 40px;
        height: 40px;
        font-size: 1.5em;
    }

    .score-display,
    .timer-display {
        height: 40px;
        font-size: 1.2em;
    }

    .target-letter-display {
        width: 40px;
        height: 40px;
        font-size: 1.5em;
    }

    .close-game-button,
    .mute-button,
    .pause-button {
        width: 40px;
        height: 40px;
        font-size: 1.5em;
        text-shadow: 1px 2px 2px rgb(0 0 0 / 60%);
    }


}

/* Mobile-only: place header side buttons slightly lower and reduce size for better thumb reach
       (moved into the mobile @media block below so it doesn't affect larger screens) */
@media (max-width: 768px) {
    .selection-title {
        font-size: 1em;
    }

    .toggle-container {
        justify-content: center;
    }

    .toggle-label {
        font-size: 0.9em;
    }

    .game-header-ui {
        padding: 5px 10px;
    }

    .game-header-left,
    .game-header-right {
        gap: 5px;
    }

    header h1 {
        font-size: 1.8em;
    }

    header p {
        font-size: 0.9em;
    }

    header .title-group {
        margin-left: 0;
        margin-right: 0;
    }

    .container {
        width: 95%;
    }

    .ai-cta {
        font-size: clamp(0.6vw, 0.75rem, 2.8vw);
        width: -webkit-fill-available;
        padding: 0;
    }

    main {
        padding: 0 0 15px 0;
    }

    .game-grid {
        grid-template-columns: 1fr;
    }

    .game-grid-item-content {
        padding: 20px;
    }

    .inline-ad {
        min-height: 70px;
    }

    .back-button {
        left: 10px;
        font-size: 1.5em;
    }

    .score-display,
    .timer-display {
        height: 38px;
    }

    .target-letter-display {
        width: 38px;
        height: 38px;
        font-size: 1.4em;
    }

    .close-game-button,
    .mute-button,
    .pause-button {
        width: 38px;
        height: 38px;
        font-size: 1.4em;
    }

    /* Restore larger POS tile font-size on smaller screens and remove extra padding there */
    .parts-of-speech-game .pos-box {
        font-size: clamp(1em, 3vw, 1.8em);
    }

    /* Mobile-only: remove the clamp padding applied in parts-of-speech.css for tighter tiles */
    .parts-of-speech-game .pos-box {
        padding: 0 !important;
    }

    /* Mobile-only: place header side buttons slightly lower and reduce size for better thumb reach */
    .back-button,
    .header-fullscreen-btn {
        top: 70%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        background-size: 55%;
    }

}

@media (max-width: 480px) {
    .selection-controls {
        gap: 10px;
    }

    .toggle-label {
        font-size: 0.8em;
    }

    .select-all-button {
        font-size: 0.9em;
        padding: 8px 12px;
    }

    .game-header-ui {
        padding: 3px 8px;
    }

    .game-header-left,
    .game-header-right {
        gap: 3px;
    }

    .score-display,
    .timer-display {
        font-size: 0.9em;
        padding: 3px 8px;
    }

    header h1 {
        font-size: 1.5em;
    }

    header p {
        font-size: 0.8em;
    }

    footer {
        font-size: 0.7em;
    }

    footer a {
        margin: 0 5px;
    }

    .game-container {
        font-size: 0.9em;
        padding: 10px;
    }

    .selection-title {
        font-size: 1em;
        width: 100%;
    }

    .start-game-button {
        padding: 8px 15px;
        font-size: 1em;
    }

    .help-button {
        width: 35px;
        height: 35px;
        font-size: 1.2em;
    }

    .score-display,
    .timer-display {
        height: 36px;
        font-size: 1em;
    }

    .target-letter-display {
        width: 36px;
        height: 36px;
        font-size: 1.3em;
    }

    .close-game-button,
    .mute-button,
    .pause-button {
        width: 36px;
        height: 36px;
        font-size: 1.5em;
    }

    .footer-content {
        flex-direction: column;
        gap: 5px;
    }
}

/* =================================== */
/* 8. LOADING OVERLAY STYLES           */
/* =================================== */
.loading-overlay {
    /* Centered, content-sized dialog instead of full-viewport backdrop */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(3px);
    transition: opacity 0.5s ease-in-out, transform 0.18s ease-in-out;
    opacity: 1;
    font-family: Arial, Helvetica, sans-serif;
    padding: 18px;
    /* breathing room outside the content */
    border-radius: 10px;
    width: auto;
    height: auto;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    overflow: auto;
    /* ensure the overlay stays centered and allows scrolling if content taller than viewport */
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -48%);
}

.loading-content {
    background-color: rgba(27, 27, 29, 0.9);
    /* Dark Charcoal */
    padding: 24px 28px;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    width: auto;
    min-width: 400px;
    /* default for larger screens */
    max-width: 520px;
    border: 2px solid #3498db;
    /* Bright Blue Border */
    text-align: center;
    /* Center all content */
    position: relative;
    /* for absolutely positioned close button */
}

.loading-message {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: bold;
    color: #ffffff;
    /* White Text */
}

.loading-message span {
    color: #29a9ff;
    /* specified sky/cyan blue for overlay highlights */
}

/* Reusable gradient text with a light-gray fallback color */
.gradient-text {
    /* Use the same overlay highlight color so spans inherit consistently */
    color: #29a9ff;
}

/* Close button for loading overlay (no scale/animation, hover brighter red, active inner shadow) */
.loading-close-button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
    background: #b91c1c;
    /* dark red */
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    /* No transform/scale or animations */
}

.loading-close-button:hover {
    background: #c71f1f;
    /* slightly brighter */
}

.loading-close-button:active {
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45);
}

.loading-close-button:focus {
    outline: none;
    /* never show outline */
}

.loading-close-button:focus-visible {
    /* visible focus ring only for keyboard users; no outline */
    box-shadow: 0 0 0 2px rgb(0, 167, 249);
}

/* Responsive: smaller close button on narrow viewports */
@media (max-width: 480px) {
    .loading-close-button {
        width: 32px;
        height: 32px;
        font-size: 18px;
        top: 4px;
        right: 4px;
        border-radius: 6px;
    }
}

.loading-status-text {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 1px;
    color: #9e9e9e;
    /* Bright Gray */
}

.loading-bar-container {
    width: 100%;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.loading-bar-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #6ec8ff 0%, #3498db 50%, #2b6fb2 100%);
    border-radius: 10px;
    transition: width 0.3s ease-out;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
    .loading-content {
        padding: 25px 20px;
        min-width: 300px;
        /* reduced minimum for small screens */
    }

    .loading-message {
        font-size: 90%;
        margin-bottom: 20px;
    }

    .loading-status-text {
        font-size: 1em;
    }
}

/* Full-screen non-closable welcome overlay for index page */
#index-full-overlay {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* center in viewport */
    width: calc(100% - 40px);
    max-width: 580px;
    /* keeps overlay content-sized */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(5, 12, 30, 0.98), rgba(10, 20, 50, 0.96));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    color: #fff;
    padding: 20px;
    border-radius: 12px;
    /* subtle visual separation from page */
    box-shadow: 0px 20px 90px rgb(0, 0, 0);
    /* added subtle white glow */
    transition: opacity 400ms ease;
    outline: 4px solid #d9d9d9;
}

/* Close button in the overlay (upper-right corner) */
#index-overlay-skip {
    position: absolute;
    top: 12px;
    right: 12px;
    appearance: none;
    background: #8b0000;
    /* dark red background */
    color: #fff;
    border: 1px solid #d9d9d9;
    /* 1px light gray border */
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
}

#index-overlay-skip:hover {
    background: #a40000;
}

/* Remove default focus outline (browser blue) and avoid custom ring */
#index-overlay-skip:focus {
    outline: none;
    box-shadow: none;
}

/* Show a visible outline for keyboard users */
#index-overlay-skip:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    box-shadow: none;
}

/* Darker border and background when clicked/pressed */
#index-overlay-skip:active,
#index-overlay-skip.pressed {
    border-color: #6b6b6b;
    background: #700000;
}

@media (max-width:600px) {
    #index-full-overlay {
        width: calc(100% - 24px);
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 14px;
        max-width: none;
        max-height: calc(100vh - 24px);
        border-radius: 8px;
        box-shadow: 0px 20px 90px rgb(0, 0, 0);
        outline: 2px solid #d9d9d9;
    }
}

#index-full-overlay .index-overlay-inner {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
}

#index-full-overlay .index-overlay-text {
    text-align: center;
}

#index-full-overlay .index-overlay-text .line {
    font-family: 'CustomMain', Arial, sans-serif;
    font-size: clamp(16px, 3.2vw, 22px);
    opacity: 0.95;
}

#index-full-overlay .index-overlay-text .title {
    font-family: 'CustomTitle', Arial, sans-serif;
    font-size: clamp(28px, 6.8vw, 48px);
    font-weight: 900;
    margin-top: 6px;
}

#index-full-overlay .index-progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

#index-full-overlay .index-progress-bar {
    width: 90%;
    max-width: 720px;
    height: 14px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

#index-full-overlay .index-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6ec8ff, #3498db, #2b6fb2);
    transition: width 220ms ease;
}

/* index progress label removed from markup; label styles intentionally omitted */

@media (max-width: 600px) {
    #index-full-overlay .index-overlay-inner {
        gap: 18px;
    }

    #index-full-overlay .index-overlay-text .title {
        font-size: clamp(22px, 8vw, 34px);
    }
}

/* Overlay-only title coloring (copies the title colors without effects) */
#index-full-overlay .overlay-title-letter {
    display: inline-block;
    font-weight: 900;
}

#index-full-overlay .overlay-title-letter:nth-child(5n+1) {
    color: #6ec8ff;
}

#index-full-overlay .overlay-title-letter:nth-child(5n+2) {
    color: #8ff0a0;
}

#index-full-overlay .overlay-title-letter:nth-child(5n+3) {
    color: #ffb6e6;
}

#index-full-overlay .overlay-title-letter:nth-child(5n+4) {
    color: #d3b3ff;
}

#index-full-overlay .overlay-title-letter:nth-child(5n+5) {
    color: #ffe59e;
}

/* Overlay-only subtitle word colors (copy of header subtitle palette: blue, green, red, yellow) */
#index-full-overlay .overlay-sub-word:nth-child(1) {
    color: #3498db;
}

#index-full-overlay .overlay-sub-word:nth-child(2) {
    color: #2ecc71;
}

#index-full-overlay .overlay-sub-word:nth-child(3) {
    color: #e74c3c;
}

#index-full-overlay .overlay-sub-word:nth-child(4) {
    color: #f1c40f;
}

/* Speaky modal specific styles */
.speaky-container {
    width: 300px;
    height: 500px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.15);
    font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 3px solid #90caf9;
}

.speaky-header {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
    color: white;
    padding: 12px 16px;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 10px rgba(25, 118, 210, 0.3);
}

.speaky-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ffffff;
    border: none;
    color: #1976d2;
    font-size: 20px;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 160ms ease, transform 120ms ease, background 160ms ease;
    box-shadow: 0 6px 18px rgba(25, 118, 210, 0.14);
}

.speaky-close:hover {
    background: #f1f9ff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(25, 118, 210, 0.18);
}

.speaky-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12), 0 6px 18px rgba(25, 118, 210, 0.14);
}

.speaky-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.speaky-avatar {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    margin: 0 auto 6px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(25, 118, 210, 0.12);
}

.speaky-header-controls {
    /* Place the controls in a horizontal row above the avatar/title
       so they don't overlap the content below. The element is rendered
       in the DOM before the avatar which ensures it appears above it. */
    position: static;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 6px;
}

.tts-toggle {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    color: #1976d2;
    font-size: 16px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.08);
    position: relative;
}

.tts-toggle[aria-pressed="false"] {
    opacity: 0.85;
}

/* red diagonal line when TTS is off */
.tts-toggle[aria-pressed="false"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 56%;
    background: #e53935;
    /* red */
    transform: translate(-50%, -50%) rotate(-45deg);
    border-radius: 1px;
    pointer-events: none;
}

.tts-select {
    width: 180px;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

.tts-select:focus {
    outline: none;
    box-shadow: 0 8px 24px rgba(16, 66, 122, 0.14);
}

.status-indicator {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 5px;
}

.chat-box {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 85%;
    padding: 10px 15px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
}

.ai-message {
    background: white;
    border-bottom-left-radius: 5px;
    align-self: flex-start;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid #e1f5fe;
}

.interim-message {
    background: rgba(255, 255, 255, 0.85);
    color: #444;
    font-style: italic;
    border: 1px dashed #cfeefd;
    align-self: flex-start;
}

.user-message {
    background: #bbdefb;
    border-bottom-right-radius: 5px;
    align-self: flex-end;
    box-shadow: 0 2px 5px rgba(33, 150, 243, 0.2);
}

.controls {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
}

.controls {
    position: relative;
}

.mic-button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mic-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.6);
}

.mic-button:active {
    transform: scale(0.95);
}

.mic-button.listening {
    background: linear-gradient(135deg, #ef5350 0%, #d32f2f 100%);
    animation: pulse 1.5s infinite;
}

.mic-button.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* when rendered inside the header-controls container make it inline */
.speaky-header-controls .speaky-close {
    position: static;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    padding: 0;
}

/* Info button and panel inside the Speaky modal */
.speaky-info-btn {
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: #ffffff;
    color: #1976d2;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.08);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}

.tts-toggle,
.tts-select,
.speaky-info-btn {
    box-shadow: 0 8px 26px rgba(16, 66, 122, 0.12);
}

.speaky-info-panel {
    position: absolute;
    left: 12px;
    bottom: 56px;
    width: 230px;
    background: white;
    color: #222;
    padding: 10px 12px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    line-height: 1.3;
    z-index: 30;
}

.speaky-info-panel[aria-hidden="true"] {
    display: none;
}

.speaky-info-panel {
    text-align: left;
}

.speaky-info-panel ul {
    margin: 0;
    padding-left: 18px;
}

.speaky-info-panel li {
    margin: 6px 0;
}

/* Platform overview section (index) */
#platform-overview {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    color: #ccc;
    line-height: 1.6;
    font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

#platform-overview h2 {
    color: #fff;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    margin-top: 0;
}

#platform-overview h3 {
    color: #fff;
}

@media (max-width: 640px) {
    #platform-overview {
        margin: 24px 16px;
        padding: 16px;
    }

    #platform-overview h2 {
        font-size: 18px;
    }

    #platform-overview h3 {
        font-size: 15px;
    }
}

/* Platform overview list spacing */
#platform-overview ul {
    line-height: 1.8;
    margin-bottom: 20px;
    padding-left: 1.25rem;
}

/* Overview action button */
.overview-actions {
    text-align: center;
    margin-top: 18px;
}

.overview-back-btn {
    display: inline-block;
    background: #1976d2;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.overview-back-btn {
    display: inline-block;
    background: #1976d2;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .12s ease, transform .06s ease;
}

.overview-back-btn:hover {
    background: #145ea8;
    /* darker on hover */
}

.overview-back-btn:active {
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35);
    /* inner shadow on click */
    transform: translateY(1px);
    outline: none;
    /* remove default outline on click */
}

/* Keep outline only for keyboard focus (focus-visible) */
.overview-back-btn:focus {
    outline: none;
}

.overview-back-btn:focus-visible {
    outline: 3px solid #1976d2;
    /* blue focus ring */
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.12);
}

@media (max-width: 640px) {
    .overview-back-btn {
        width: 140px;
        padding: 12px;
    }

    /* Make play-now button match overview button on small screens */
    .play-now-btn {
        width: 100px;
        padding: 12px;
    }
}

/* Play Now button - mirror Overview styles for consistency */
.play-now-btn {
    display: inline-block;
    background: #1976d2;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .12s ease, transform .06s ease;
}

.play-now-btn:hover {
    background: #145ea8;
}

.play-now-btn:active {
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35);
    transform: translateY(1px);
    outline: none;
}

.play-now-btn:focus {
    outline: none;
}

.play-now-btn:focus-visible {
    outline: 3px solid #1976d2;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.12);
}

/* Game overview block shared by all game pages */
.game-overview {
    max-width: 760px;
    margin: 36px auto;
    padding: 18px;
    color: #ccc;
    line-height: 1.6;
    font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    background: transparent;
}

.game-overview h2 {
    color: #fff;
    margin-top: 0;
    font-size: 20px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 8px;
}

.game-overview p {
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .game-overview {
        margin: 20px 14px;
        padding: 14px;
    }

    .game-overview h2 {
        font-size: 18px;
    }
}