/* ============================================================
   DEMO AVAILABILITY STYLES - SLOTTOMAT
   ============================================================
   Version: 2.0 - Production Ready
   Author: Claude Code
   Date: 2026-02-07

   Purpose: Visual indicators for game demo availability
   - Game cards on listing pages: greyed overlay with badge
   - Single game page: beautiful "Demo Not Available" message

   Color Scheme:
   - Background: #1e1e2e, #141420 (dark theme)
   - Unavailable: #ef4444, #dc3545 (red accents)
   - Available: #22c55e (green accent)
   - Text: #ffffff, #a0a0b0 (white/muted)
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================================ */

:root {
    /* Background colors */
    --demo-bg-dark: #141420;
    --demo-bg-medium: #1e1e2e;
    --demo-bg-card: #252538;

    /* Unavailable state - Red */
    --demo-red-primary: #ef4444;
    --demo-red-secondary: #dc3545;
    --demo-red-dark: #b91c1c;
    --demo-red-glow: rgba(239, 68, 68, 0.4);
    --demo-red-subtle: rgba(239, 68, 68, 0.15);

    /* Available state - Green */
    --demo-green-primary: #22c55e;
    --demo-green-secondary: #16a34a;
    --demo-green-glow: rgba(34, 197, 94, 0.4);

    /* Text colors */
    --demo-text-white: #ffffff;
    --demo-text-muted: #a0a0b0;
    --demo-text-dim: rgba(255, 255, 255, 0.6);

    /* Accent colors */
    --demo-accent-purple: #6366f1;
    --demo-accent-purple-hover: #818cf8;

    /* Borders */
    --demo-border-light: rgba(255, 255, 255, 0.1);
    --demo-border-red: rgba(239, 68, 68, 0.3);

    /* Transitions */
    --demo-transition-fast: 0.2s ease;
    --demo-transition-medium: 0.3s ease;

    /* Shadows */
    --demo-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --demo-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --demo-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --demo-shadow-red: 0 4px 20px rgba(239, 68, 68, 0.3);
}


/* ============================================================
   SECTION 1: DEMO AVAILABILITY BADGE
   Corner badge showing available/unavailable status
   ============================================================ */

.demo-badge {
    position: absolute;
    top: clamp(6px, 1.5vw, 12px);
    left: clamp(6px, 1.5vw, 12px);
    padding: clamp(4px, 0.8vw, 6px) clamp(8px, 1.2vw, 12px);
    border-radius: 6px;
    font-size: clamp(9px, 1.5vw, 11px);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: clamp(4px, 0.6vw, 6px);
    z-index: 20;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--demo-shadow-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform var(--demo-transition-fast);
}

.demo-badge svg {
    flex-shrink: 0;
    width: clamp(10px, 1.5vw, 14px);
    height: clamp(10px, 1.5vw, 14px);
}

/* Available Badge - Green Gradient */
.demo-badge--available {
    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.95) 0%,
        rgba(22, 163, 74, 0.95) 100%);
    color: var(--demo-text-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Unavailable Badge - Red with Animation */
.demo-badge--unavailable {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.95) 0%,
        rgba(220, 53, 69, 0.95) 100%);
    color: var(--demo-text-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    animation: badge-pulse 2.5s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% {
        box-shadow: var(--demo-shadow-sm), 0 0 0 0 var(--demo-red-glow);
    }
    50% {
        box-shadow: var(--demo-shadow-md), 0 0 12px 4px var(--demo-red-glow);
    }
}


/* ============================================================
   SECTION 2: OCEAN GAME CARD - UNAVAILABLE STATE
   Greyed overlay with centered "DEMO UNAVAILABLE" text
   ============================================================ */

/* Base positioning for unavailable cards */
.ocean-game-card.demo-unavailable {
    position: relative;
}

/* Ensure game-card-image has positioning context */
.ocean-game-card.demo-unavailable .game-card-image {
    position: relative;
}

/* Dark gradient overlay */
.ocean-game-card.demo-unavailable .game-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(20, 20, 32, 0.3) 0%,
        rgba(20, 20, 32, 0.5) 50%,
        rgba(20, 20, 32, 0.7) 100%
    );
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    transition: background var(--demo-transition-medium);
}

/* Grayscale + dim effect on image */
.ocean-game-card.demo-unavailable .game-card-image img {
    filter: grayscale(70%) brightness(0.75);
    transition: filter var(--demo-transition-medium);
}

/* "DEMO UNAVAILABLE" centered text overlay */
.ocean-game-card.demo-unavailable .game-card-image::after {
    content: 'DEMO UNAVAILABLE';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.95) 0%,
        rgba(185, 28, 28, 0.95) 100%);
    color: var(--demo-text-white);
    padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
    border-radius: 8px;
    font-size: clamp(9px, 1.4vw, 12px);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: var(--demo-shadow-md), 0 0 20px var(--demo-red-glow);
    border: 1px solid rgba(255, 255, 255, 0.2);

    /* Desktop: hidden by default, shown on hover */
    opacity: 0;
    transition: opacity var(--demo-transition-fast),
                transform var(--demo-transition-fast);
}

/* Show text overlay on hover (desktop) */
.ocean-game-card.demo-unavailable:hover .game-card-image::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
}

/* Lighten effect on hover */
.ocean-game-card.demo-unavailable:hover .game-card-image::before {
    background: linear-gradient(
        180deg,
        rgba(20, 20, 32, 0.2) 0%,
        rgba(20, 20, 32, 0.4) 50%,
        rgba(20, 20, 32, 0.6) 100%
    );
}

.ocean-game-card.demo-unavailable:hover .game-card-image img {
    filter: grayscale(40%) brightness(0.85);
}

/* Change play button style for unavailable games */
.ocean-game-card.demo-unavailable .play-btn-ocean,
.ocean-game-card.demo-unavailable .game-card-overlay a {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    cursor: default;
}

.ocean-game-card.demo-unavailable .play-btn-ocean:hover,
.ocean-game-card.demo-unavailable .game-card-overlay a:hover {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
}

/* Hide play icon, show info-style text */
.ocean-game-card.demo-unavailable .play-btn-ocean svg {
    display: none;
}


/* ============================================================
   SECTION 3: EPIC GAME CARD - UNAVAILABLE STATE
   Alternative card style with same unavailable treatment
   ============================================================ */

.epic-game-card.demo-unavailable {
    position: relative;
}

.epic-game-card.demo-unavailable .game-card-image {
    position: relative;
}

.epic-game-card.demo-unavailable .game-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(20, 20, 32, 0.4) 0%,
        rgba(20, 20, 32, 0.6) 100%
    );
    z-index: 5;
    pointer-events: none;
}

.epic-game-card.demo-unavailable .game-card-image img {
    filter: grayscale(60%) brightness(0.8);
    transition: filter var(--demo-transition-medium);
}

.epic-game-card.demo-unavailable:hover .game-card-image img {
    filter: grayscale(30%) brightness(0.9);
}

/* Unavailable text for epic cards */
.epic-game-card.demo-unavailable .game-card-image::after {
    content: 'DEMO UNAVAILABLE';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg,
        var(--demo-red-primary) 0%,
        var(--demo-red-dark) 100%);
    color: var(--demo-text-white);
    padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
    border-radius: 8px;
    font-size: clamp(9px, 1.4vw, 12px);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: var(--demo-shadow-md);
    opacity: 0;
    transition: opacity var(--demo-transition-fast);
}

.epic-game-card.demo-unavailable:hover .game-card-image::after {
    opacity: 1;
}


/* ============================================================
   SECTION 4: STANDARD GAME CARD - UNAVAILABLE STATE
   Legacy game-content class support
   ============================================================ */

.game-content.demo-unavailable .content {
    position: relative;
}

.game-content.demo-unavailable .content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 32, 0.5);
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
}

.game-content.demo-unavailable .content-image {
    filter: grayscale(60%) brightness(0.8);
    transition: filter var(--demo-transition-medium);
}

.game-content.demo-unavailable:hover .content-image {
    filter: grayscale(30%) brightness(0.9);
}


/* ============================================================
   SECTION 5: SINGLE GAME PAGE - DEMO NOT AVAILABLE MESSAGE
   Beautiful centered message box with icon and CTA
   ============================================================ */

.demo-unavailable-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 40px);
    text-align: center;
    background: linear-gradient(145deg,
        var(--demo-bg-medium) 0%,
        var(--demo-bg-dark) 100%);
    border-radius: clamp(12px, 2vw, 20px);
    border: 2px solid var(--demo-border-red);
    min-height: clamp(280px, 40vh, 400px);
    max-width: 700px;
    margin: clamp(20px, 4vw, 40px) auto;
    position: relative;
    overflow: hidden;
    box-shadow: var(--demo-shadow-lg),
                0 0 60px rgba(239, 68, 68, 0.1);
}

/* Decorative background pattern */
.demo-unavailable-message::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 85%, var(--demo-red-subtle) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, var(--demo-red-subtle) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0.8;
}

/* Subtle animated glow border */
.demo-unavailable-message::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(
        45deg,
        var(--demo-red-primary),
        transparent,
        var(--demo-red-secondary),
        transparent,
        var(--demo-red-primary)
    );
    background-size: 400% 400%;
    z-index: -1;
    animation: glow-border 8s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes glow-border {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Icon container */
.demo-unavailable-message .icon-container,
.demo-unavailable-message > svg:first-of-type,
.demo-unavailable-message .demo-icon {
    width: clamp(60px, 12vw, 100px);
    height: clamp(60px, 12vw, 100px);
    color: var(--demo-red-primary);
    margin-bottom: clamp(16px, 3vw, 28px);
    position: relative;
    z-index: 1;
    animation: icon-float 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px var(--demo-red-glow));
}

@keyframes icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Title */
.demo-unavailable-message h3 {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 800;
    color: var(--demo-text-white);
    margin: 0 0 clamp(10px, 2vw, 16px);
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

/* Description text */
.demo-unavailable-message p {
    font-size: clamp(14px, 2.5vw, 17px);
    color: var(--demo-text-muted);
    margin: 0 0 clamp(20px, 4vw, 32px);
    max-width: 500px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.demo-unavailable-message strong {
    color: var(--demo-red-primary);
    font-weight: 700;
}

/* Action buttons container */
.unavailable-actions,
.demo-unavailable-message .actions {
    display: flex;
    gap: clamp(10px, 2vw, 16px);
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Primary button - Browse Other Games */
.demo-unavailable-message .btn-browse,
.demo-unavailable-message .btn-primary,
.unavailable-actions .btn-browse {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: clamp(12px, 2vw, 16px) clamp(24px, 4vw, 36px);
    background: linear-gradient(135deg,
        var(--demo-accent-purple) 0%,
        #4f46e5 100%);
    color: var(--demo-text-white);
    border-radius: 12px;
    font-weight: 700;
    font-size: clamp(14px, 2vw, 16px);
    text-decoration: none;
    transition: all var(--demo-transition-medium);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.demo-unavailable-message .btn-browse:hover,
.demo-unavailable-message .btn-primary:hover,
.unavailable-actions .btn-browse:hover {
    background: linear-gradient(135deg,
        var(--demo-accent-purple-hover) 0%,
        var(--demo-accent-purple) 100%);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.45);
}

.demo-unavailable-message .btn-browse svg,
.unavailable-actions .btn-browse svg {
    width: 20px;
    height: 20px;
    transition: transform var(--demo-transition-fast);
}

.demo-unavailable-message .btn-browse:hover svg,
.unavailable-actions .btn-browse:hover svg {
    transform: translateX(4px);
}

/* Secondary button - Back */
.demo-unavailable-message .btn-back,
.demo-unavailable-message .btn-secondary,
.unavailable-actions .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(12px, 2vw, 16px) clamp(20px, 3vw, 28px);
    background: transparent;
    color: var(--demo-text-muted);
    border: 2px solid var(--demo-border-light);
    border-radius: 12px;
    font-weight: 600;
    font-size: clamp(14px, 2vw, 16px);
    text-decoration: none;
    transition: all var(--demo-transition-medium);
    cursor: pointer;
}

.demo-unavailable-message .btn-back:hover,
.demo-unavailable-message .btn-secondary:hover,
.unavailable-actions .btn-back:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--demo-text-white);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}


/* ============================================================
   SECTION 6: GAME INFO FALLBACK SECTION
   Shows basic game info when demo is unavailable
   ============================================================ */

.game-info-fallback {
    margin-top: clamp(24px, 4vw, 40px);
    padding: clamp(20px, 4vw, 32px);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid var(--demo-border-light);
    text-align: left;
    width: 100%;
    max-width: 600px;
}

.game-info-fallback h4 {
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 700;
    color: var(--demo-text-white);
    margin: 0 0 clamp(12px, 2vw, 16px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-info-fallback h4 svg {
    color: var(--demo-accent-purple);
    width: 24px;
    height: 24px;
}

.game-info-fallback p {
    color: var(--demo-text-dim);
    line-height: 1.6;
    margin-bottom: clamp(16px, 3vw, 24px);
    font-size: clamp(13px, 2vw, 15px);
}

/* Game stats grid */
.game-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(10px, 2vw, 16px);
}

.game-stats-summary .stat {
    background: rgba(99, 102, 241, 0.1);
    padding: clamp(10px, 2vw, 14px) clamp(12px, 2vw, 18px);
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    font-size: clamp(12px, 1.8vw, 14px);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.game-stats-summary .stat .label {
    color: var(--demo-text-dim);
    font-size: clamp(10px, 1.5vw, 12px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-stats-summary .stat .value {
    color: var(--demo-text-white);
    font-weight: 700;
    font-size: clamp(14px, 2vw, 16px);
}

/* Color-coded stat values */
.game-stats-summary .stat--rtp .value {
    color: var(--demo-green-primary);
}

.game-stats-summary .stat--volatility .value {
    color: #fbbf24;
}

.game-stats-summary .stat--provider .value {
    color: var(--demo-accent-purple-hover);
}


/* ============================================================
   SECTION 7: FILTER BUTTON - SHOW AVAILABLE ONLY
   Toggle to hide unavailable games
   ============================================================ */

.filter-available-only {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: clamp(10px, 1.5vw, 14px) clamp(14px, 2vw, 20px);
    background: rgba(34, 197, 94, 0.1);
    border: 2px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    color: var(--demo-green-primary);
    font-size: clamp(12px, 1.8vw, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--demo-transition-medium);
}

.filter-available-only svg {
    width: 18px;
    height: 18px;
    transition: transform var(--demo-transition-fast);
}

.filter-available-only:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
    transform: translateY(-2px);
}

.filter-available-only:hover svg {
    transform: scale(1.1);
}

/* Active state - filter is ON */
.filter-available-only.active {
    background: var(--demo-green-primary);
    border-color: var(--demo-green-primary);
    color: var(--demo-text-white);
    box-shadow: 0 4px 15px var(--demo-green-glow);
}

.filter-available-only.active:hover {
    background: var(--demo-green-secondary);
}


/* ============================================================
   SECTION 8: MOBILE-SPECIFIC STYLES
   Always show overlay text on mobile (no hover)
   ============================================================ */

@media (max-width: 768px) {
    /* Badges - smaller on mobile */
    .demo-badge {
        top: 6px;
        left: 6px;
        padding: 4px 8px;
        font-size: 9px;
        gap: 4px;
    }

    .demo-badge svg {
        width: 10px;
        height: 10px;
    }

    /* ALWAYS show "DEMO UNAVAILABLE" text on mobile */
    .ocean-game-card.demo-unavailable .game-card-image::after,
    .epic-game-card.demo-unavailable .game-card-image::after {
        opacity: 1 !important;
        font-size: 9px;
        padding: 6px 12px;
        letter-spacing: 0.5px;
    }

    /* Stronger overlay on mobile for better text visibility */
    .ocean-game-card.demo-unavailable .game-card-image::before,
    .epic-game-card.demo-unavailable .game-card-image::before {
        background: linear-gradient(
            180deg,
            rgba(20, 20, 32, 0.4) 0%,
            rgba(20, 20, 32, 0.6) 100%
        );
    }

    /* Single game page message - mobile optimized */
    .demo-unavailable-message {
        padding: 32px 20px;
        min-height: 260px;
        margin: 16px;
        border-radius: 14px;
    }

    .demo-unavailable-message .icon-container,
    .demo-unavailable-message > svg:first-of-type,
    .demo-unavailable-message .demo-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 16px;
    }

    .demo-unavailable-message h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .demo-unavailable-message p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* Stack buttons vertically on mobile */
    .unavailable-actions,
    .demo-unavailable-message .actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .demo-unavailable-message .btn-browse,
    .demo-unavailable-message .btn-primary,
    .demo-unavailable-message .btn-back,
    .demo-unavailable-message .btn-secondary,
    .unavailable-actions .btn-browse,
    .unavailable-actions .btn-back {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    /* Game info fallback - mobile */
    .game-info-fallback {
        padding: 16px;
        margin-top: 20px;
    }

    .game-stats-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .demo-badge {
        top: 4px;
        left: 4px;
        padding: 3px 6px;
        font-size: 8px;
    }

    .ocean-game-card.demo-unavailable .game-card-image::after,
    .epic-game-card.demo-unavailable .game-card-image::after {
        font-size: 8px;
        padding: 5px 10px;
    }

    .demo-unavailable-message h3 {
        font-size: 18px;
    }

    .demo-unavailable-message p {
        font-size: 13px;
    }
}


/* ============================================================
   SECTION 9: TABLET STYLES
   Medium screen adjustments
   ============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    .demo-badge {
        top: 8px;
        left: 8px;
        padding: 5px 10px;
        font-size: 10px;
    }

    .ocean-game-card.demo-unavailable .game-card-image::after,
    .epic-game-card.demo-unavailable .game-card-image::after {
        font-size: 10px;
        padding: 8px 14px;
    }

    .demo-unavailable-message {
        padding: 50px 30px;
        max-width: 600px;
    }
}


/* ============================================================
   SECTION 10: LARGE DESKTOP STYLES
   Enhanced for big screens
   ============================================================ */

@media (min-width: 1400px) {
    .demo-badge {
        top: 12px;
        left: 12px;
        padding: 6px 14px;
        font-size: 12px;
    }

    .demo-badge svg {
        width: 16px;
        height: 16px;
    }

    .demo-unavailable-message {
        padding: 80px 50px;
        max-width: 800px;
    }

    .demo-unavailable-message .icon-container,
    .demo-unavailable-message > svg:first-of-type {
        width: 100px;
        height: 100px;
    }

    .demo-unavailable-message h3 {
        font-size: 36px;
    }

    .demo-unavailable-message p {
        font-size: 18px;
        max-width: 550px;
    }
}


/* ============================================================
   SECTION 11: ACCESSIBILITY
   Focus states, screen readers, reduced motion
   ============================================================ */

/* Focus indicators for keyboard navigation */
.ocean-game-card.demo-unavailable:focus-within,
.epic-game-card.demo-unavailable:focus-within {
    outline: 3px solid var(--demo-red-primary);
    outline-offset: 3px;
}

.demo-unavailable-message .btn-browse:focus,
.demo-unavailable-message .btn-back:focus,
.unavailable-actions a:focus,
.unavailable-actions button:focus,
.filter-available-only:focus {
    outline: 3px solid var(--demo-accent-purple);
    outline-offset: 3px;
}

/* Screen reader only text */
.demo-badge .sr-only,
.demo-unavailable-message .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;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .demo-badge--unavailable,
    .demo-unavailable-message .icon-container,
    .demo-unavailable-message > svg:first-of-type,
    .demo-unavailable-message .demo-icon {
        animation: none;
    }

    .demo-unavailable-message::after {
        animation: none;
        background-position: 0% 50%;
    }

    .ocean-game-card.demo-unavailable .game-card-image::after,
    .epic-game-card.demo-unavailable .game-card-image::after,
    .demo-unavailable-message .btn-browse,
    .demo-unavailable-message .btn-back,
    .filter-available-only {
        transition: none;
    }
}


/* ============================================================
   SECTION 12: PRINT STYLES
   Hide unnecessary elements when printing
   ============================================================ */

@media print {
    .demo-badge,
    .demo-unavailable-message,
    .demo-unavailable-message::before,
    .demo-unavailable-message::after,
    .unavailable-actions,
    .filter-available-only {
        display: none !important;
    }

    .ocean-game-card.demo-unavailable .game-card-image::before,
    .ocean-game-card.demo-unavailable .game-card-image::after,
    .epic-game-card.demo-unavailable .game-card-image::before,
    .epic-game-card.demo-unavailable .game-card-image::after {
        display: none;
    }

    .ocean-game-card.demo-unavailable .game-card-image img,
    .epic-game-card.demo-unavailable .game-card-image img {
        filter: none;
    }
}


/* ============================================================
   SECTION 13: DARK MODE / LIGHT MODE SUPPORT
   For future light mode implementation
   ============================================================ */

@media (prefers-color-scheme: light) {
    /* Currently site is dark-only, but ready for future */
    /* .demo-unavailable-message { ... } */
}


/* ============================================================
   SECTION 14: HIGH CONTRAST MODE
   For users who need higher contrast
   ============================================================ */

@media (prefers-contrast: high) {
    .demo-badge--unavailable {
        background: #ff0000;
        border: 2px solid #ffffff;
    }

    .demo-badge--available {
        background: #00ff00;
        color: #000000;
        border: 2px solid #000000;
    }

    .demo-unavailable-message {
        border-width: 3px;
        border-color: var(--demo-red-primary);
    }

    .ocean-game-card.demo-unavailable .game-card-image::after,
    .epic-game-card.demo-unavailable .game-card-image::after {
        background: #ff0000;
        border: 2px solid #ffffff;
    }
}


/* ============================================================
   END OF DEMO AVAILABILITY STYLES
   ============================================================ */

/* ============================================================
   HOMEPAGE GAME CARDS (game-card-ocean class)
   ============================================================ */

.game-card-ocean.demo-unavailable {
    position: relative;
}

.game-card-ocean.demo-unavailable::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 32, 0.5);
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
}

.game-card-ocean.demo-unavailable img {
    filter: grayscale(60%) brightness(0.8);
    transition: filter 0.3s ease;
}

.game-card-ocean.demo-unavailable:hover img {
    filter: grayscale(30%) brightness(0.9);
}

.game-card-ocean.demo-unavailable .game-card-play {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
}

/* Demo badge for homepage cards */
.game-card-ocean .demo-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
}