/*
© 2026 Logic Duel Puzzles. All rights reserved. Unauthorized duplication, modification, or redistribution of this source code is strictly prohibited.
*/

/* --- Core Variable Matrix & Styling Defaults --- */
:root {
    --bg-color: #0f172a;               /* Deep celestial slate blue */
    --text-color: #f8fafc;             /* Premium crisp off-white */
    --text-faded: #94a3b8;             /* Subtle secondary text grey */
    --accent-color: #fbbf24;           /* Warm, calming amber glow */
    --glass-bg: rgba(30, 41, 59, 0.45); /* Highly polished translucent glass */
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.4);
    
    /* Functional Action Colors */
    --status-live: #34d399;
    --status-upcoming: #60a5fa;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;
}

/* --- Background Aesthetic Canvas --- */
.ambient-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 0;
    pointer-events: none;
}

/* --- Unified Container Hierarchy --- */
#app-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 100dvh;
}

/* --- Glassmorphic Design Token --- */
.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 8px 32px var(--glass-shadow);
}

/* --- Header System --- */
.brand-header {
    text-align: center;
    padding: 8px 0;
}

.brand-title {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.title-accent {
    color: var(--accent-color);
}

/* --- Hero Section --- */
.hero-container {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-color);
    text-align: center; /* Centers the mission statement */
}

.hero-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-faded);
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- Game Selection Grid --- */
.game-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column mobile stack */
    gap: 20px;
}

@media (min-width: 640px) {
    .game-grid {
        grid-template-columns: repeat(2, 1fr); /* Split to two columns on tablets/desktops */
    }
}

.game-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.game-card.status-live:hover {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, 0.3);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-icon {
    font-size: 1.8rem;
    color: var(--accent-color);
    line-height: 1;
}

.status-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.status-badge.live {
    background: rgba(52, 211, 153, 0.15);
    color: var(--status-live);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.status-badge.upcoming {
    background: rgba(96, 165, 250, 0.15);
    color: var(--status-upcoming);
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.game-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.game-description {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-faded);
}

/* --- Screenshot Component Layers --- */
.game-screenshot-container {
    width: 100%;
    aspect-ratio: 16 / 9; /* Updated to wide format */
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.game-screenshot {
    width: 100%;
    height: 100%;
    /* object-fit: cover forces the image to fill the 16:9 box without stretching */
    object-fit: cover; 
    /* object-position nudges the image up/down. 'center center' keeps the grid perfectly focused */
    object-position: center center; 
    display: block;
}

.placeholder-blur {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.screenshot-placeholder-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-faded);
    letter-spacing: 0.5px;
}

.card-features {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-faded);
    background: rgba(0, 0, 0, 0.15);
    padding: 6px 10px;
    border-radius: 6px;
    width: fit-content;
    margin-top: auto; /* Pushes the tags and play buttons neatly together to line up cards */
}

/* --- Global Tactile Button Paradigm --- */
.btn {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:not(:disabled):hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(251, 191, 36, 0.05);
}

.card-action-btn {
    width: 100%;
    display: block;
}

.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.2);
}

/* --- Flat Navigation System Footer --- */
.system-footer {
    margin-top: auto;
    padding-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 480px) {
    .system-footer {
        grid-template-columns: repeat(4, 1fr);
    }
}

.donate-btn {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(251, 191, 36, 0.04);
}

.font-bold {
    font-weight: 800;
}

/* --- Full-Screen Overlay View Framework --- */
#info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity 0.2s ease;
    padding: 16px;
}

.overlay-hidden {
    opacity: 0;
    pointer-events: none;
}

#info-overlay-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    max-height: 85dvh;
    background: #1e293b;
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.overlay-scroll-area {
    overflow-y: auto;
    margin-bottom: 20px;
    padding-right: 4px;
}

.overlay-title {
    color: var(--accent-color);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.overlay-paragraph {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.overlay-list {
    margin-left: 20px;
    margin-bottom: 16px;
    color: #cbd5e1;
}

.overlay-list li {
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Tactile 3D Overlay Dismiss Target */
.overlay-sticky-close {
    background: var(--accent-color) !important;
    color: #0f172a !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px;
    border: none;
    box-shadow: 0 4px 0 #b45309;
}

.overlay-sticky-close:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 transparent;
}

/* --- Minimalist Custom Scrollbar --- */

/* WebKit Browsers (Chrome, Opera, Edge, Safari) */
.overlay-scroll-area::-webkit-scrollbar {
    width: 6px; /* Ultra-slim profile */
}

.overlay-scroll-area::-webkit-scrollbar-track {
    background: transparent; /* Completely invisible track */
}

.overlay-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15); /* Soft, translucent thumb */
    border-radius: 10px; /* Smooth rounded pill shape */
    transition: background 0.2s ease;
}

.overlay-scroll-area::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color); /* Highlights in amber when interacted with */
}

/* Firefox */
.overlay-scroll-area {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* BEGIN: Screen Reader Only Utility Class (.sr-only) */
/* Logic: This utility class hides elements visually from the standard browser rendering tree but ensures they remain fully detectable and readable by assistive technologies (like screen readers) and SEO web crawlers. It works by shrinking the element to a 1px square, removing its borders, and aggressively clipping it out of view. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
/* END: Screen Reader Only Utility Class */