/* ─── MemoGame.exe Retro Stylings ─── */
.sound-toggle-container:hover {
    background-color: var(--win-blue-title-start, #000080);
    color: #ffffff !important;
}
.sound-toggle-container:hover #mem-sound-toggle-status {
    color: #ffffff !important;
}

/* ─── MemoGame.exe Layout Shell Fixes ─── */

#window-memory-test {
    width: min(980px, calc(100vw - 48px));
    max-height: calc(100vh - 56px);
    height: 640px !important; /* Extremely stable fixed layout height across all screens */
    display: flex;
    flex-direction: column !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#window-memory-test .window-border-outer,
#window-memory-test .window-border-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

#window-memory-test .window-content-inset {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.memo-app-body {
    display: grid !important;
    grid-template-columns: 220px 1fr !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.memo-sidebar {
    width: 220px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
    border-right: 2px solid var(--win-border-darker) !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 12px !important; /* Premium unified spacing system */
    background: linear-gradient(180deg, #1b3447 0%, #0d1e2b 60%, #150c26 100%) !important;
}

.memo-main-panel {
    flex: 1 !important;
    height: 100% !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 16px 20px !important; /* Consistent elegant spacing rhythm */
    box-sizing: border-box !important;
    background-color: #dfdfdf !important;
}

.memory-screen {
    height: 100% !important;
    min-height: 100% !important;
    display: none !important;
    flex-direction: column !important;
    padding: 0 !important; /* Let main panel handle boundary padding */
    box-sizing: border-box !important;
}

.memory-screen.active {
    display: flex !important;
}

/* ─── Standardized Retro Buttons inside MemoGame ─── */
#window-memory-test .win98-btn,
#window-memory-test .run-protocol-btn {
    min-height: 38px !important; /* Standard button height 34px-40px */
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-family: var(--font-pixel), monospace !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    border-top: 2px solid var(--win-border-light) !important;
    border-left: 2px solid var(--win-border-light) !important;
    border-right: 2px solid var(--win-border-darker) !important;
    border-bottom: 2px solid var(--win-border-darker) !important;
    box-shadow: inset -1px -1px var(--win-border-dark), inset 1px 1px #dfdfdf !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
}

#window-memory-test .run-protocol-btn {
    background-color: #1084d0 !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6) !important;
}

#window-memory-test .run-protocol-btn:hover:not(:disabled) {
    background-color: #1b90dc !important;
}

#window-memory-test .win98-btn:hover:not(:disabled) {
    background-color: #d8d8d8 !important;
}

#window-memory-test .win98-btn:active:not(:disabled),
#window-memory-test .run-protocol-btn:active:not(:disabled) {
    border-top: 2px solid var(--win-border-darker) !important;
    border-left: 2px solid var(--win-border-darker) !important;
    border-right: 2px solid var(--win-border-light) !important;
    border-bottom: 2px solid var(--win-border-light) !important;
    box-shadow: inset 1px 1px var(--win-border-dark) !important;
}

/* START GAME / BEGIN button — precision alignment */
#mem-btn-begin {
    height: 42px !important;
    min-width: 190px !important;
    max-width: 240px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    text-align: center !important;
    transform: none !important;
    text-shadow: none !important;
    margin: 0 auto !important;
}

#mem-btn-begin .btn-cap {
    display: block !important;
    line-height: 1 !important;
    transform: none !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 1px !important;
}

/* START TEST CTA Modifier */
#mem-btn-start {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    box-shadow: 0 0 10px rgba(16, 132, 208, 0.4) !important;
}

/* Screen alignments for centering & balance */
#mem-screen-intro,
#mem-screen-roundPreview,
#mem-screen-failed,
#mem-screen-submit {
    justify-content: center !important;
    gap: 16px !important;
}

#mem-screen-intro .mem-panel,
#mem-screen-roundPreview .mem-panel,
#mem-screen-failed .mem-panel,
#mem-screen-submit .mem-panel {
    flex: none !important;
    height: auto !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile overrides are defined at the bottom of the file for consolidated priority */

/* ─── Retro Stylings ─── */

/* Title banner */
.mem-title-banner {
    font-size: 20px;
    color: var(--win-blue-title-start, #0044ff);
    text-align: center;
    text-shadow: 1px 1px #ffffff;
    margin: 10px 0 4px 0;
    font-weight: bold;
    letter-spacing: 1px;
}

.mem-title-banner.text-error {
    color: #8b0000;
    text-shadow: 1px 1px #ffffff;
}

.mem-title-banner.text-success {
    color: #006b2e;
    text-shadow: 1px 1px #ffffff;
}

/* Subtitle */
.mem-subtitle {
    text-align: center !important;
    font-size: 10px !important;
    color: #666666 !important;
    margin-bottom: 12px !important; /* Consistent medium gap */
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* ─── Retro Panel System ─── */
.mem-panel-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    flex: 1 !important;
}

.mem-panel {
    border-top: 2px solid var(--win-border-dark, #808080) !important;
    border-left: 2px solid var(--win-border-dark, #808080) !important;
    border-right: 2px solid var(--win-border-light, #ffffff) !important;
    border-bottom: 2px solid var(--win-border-light, #ffffff) !important;
    background-color: #dfdfdf !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.mem-panel-title {
    background: linear-gradient(90deg, var(--win-blue-title-start, #1084d0), var(--win-blue-title-end, #1b90dc)) !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--win-border-darker, #404040) !important;
    padding: 6px 10px !important;
    font-family: var(--font-pixel), monospace !important;
    font-size: 10px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4) !important;
}

.mem-panel-body {
    padding: 14px 16px !important; /* Elegant roomier inner padding */
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Consistent padding rhythm */
    flex: 1 !important;
}

.mem-panel-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #000000 !important;
    border-bottom: 1px dashed #cccccc !important;
    padding-bottom: 6px !important;
    margin-bottom: 2px !important;
}

.mem-panel-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.mem-panel-row .row-label {
    color: #111827 !important;
    font-weight: bold !important;
}

.mem-panel-row .row-value {
    font-weight: bold !important;
    color: #003f7f !important;
}

.mem-panel-row-full {
    font-size: 11px !important;
    color: #000000 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* Legacy info/message boxes */
.mem-message-box, .mem-info-box {
    background-color: #dfdfdf !important;
    border-top: 2px solid var(--win-border-dark, #808080) !important;
    border-left: 2px solid var(--win-border-dark, #808080) !important;
    border-right: 2px solid var(--win-border-light, #ffffff) !important;
    border-bottom: 2px solid var(--win-border-light, #ffffff) !important;
    padding: 20px 15px !important;
    margin: 10px 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
}

.mem-info-box {
    align-items: flex-start !important;
    padding: 15px !important;
    text-align: left !important;
}

.mem-message-box p, .mem-info-box .info-row {
    font-size: 11px;
    line-height: 1.6;
    color: #000;
}

.mem-info-box .info-row span {
    font-weight: bold;
    color: #ff00ff;
}

/* Play state outer panel */
.mem-board-outer-panel {
    border-top: 2px solid var(--win-border-dark, #808080) !important;
    border-left: 2px solid var(--win-border-dark, #808080) !important;
    border-right: 2px solid var(--win-border-light, #ffffff) !important;
    border-bottom: 2px solid var(--win-border-light, #ffffff) !important;
    background-color: #dfdfdf !important;
    padding: 12px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    gap: 12px !important; /* Consistent section gap */
}

/* Play state header */
.mem-board-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important; /* Perfect inner padding */
    background-color: #000000 !important;
    color: #39ff14 !important; /* matrix green */
    font-size: 11px !important;
    border: 2px inset var(--win-border-darker, #404040) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.hud-item {
    font-family: var(--font-pixel, monospace) !important;
    font-size: 9px !important;
    white-space: nowrap !important;
}

.hud-item span {
    color: #00ffff !important; /* Neon cyan values */
}

.mem-timer-display span {
    color: #ffaa00 !important; /* warm gold timer */
    font-weight: bold !important;
}

/* Play state board body container */
.mem-board-body {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    background-color: #808080 !important; /* Dark neutral background contrasting the cards */
    border: 2px inset var(--win-border-darker, #404040) !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    padding: 16px !important;
}

/* Game grid */
.mem-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--cols), var(--card-size)) !important;
    grid-auto-rows: var(--card-size) !important;
    gap: var(--card-gap) !important;
    justify-content: center !important;
    align-content: center !important;
    width: calc((var(--cols) * var(--card-size)) + ((var(--cols) - 1) * var(--card-gap))) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

/* Card item */
.mem-card {
    background-color: #dfdfdf;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: transform 0.1s ease;
    width: var(--card-size) !important;
    height: var(--card-size) !important;
}

.mem-card:active {
    transform: scale(0.96);
}

.mem-card.flipped {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    background-color: #cccccc;
}

.mem-card-back {
    width: 85%;
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mem-card-front {
    display: none;
    width: 80%;
    height: 80%;
    align-items: center;
    justify-content: center;
}

.mem-card.flipped .mem-card-back {
    display: none;
}

.mem-card.flipped .mem-card-front {
    display: flex;
}

.mem-card.matched {
    opacity: 0.65;
    border: 2px solid #00e676 !important;
    background-color: #b0c4de !important;
    cursor: default !important;
    transform: none !important;
}

.mem-card.matched:active {
    transform: none !important;
}

/* Action Area */
.mem-action-area {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mem-fail-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

.mem-victory-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* Left sidebar adaptations (Cohesive Inset Diagnostics Panels) */
.intro-box {
    background-color: #0b141d !important;
    border: 2px inset var(--win-border-darker, #404040) !important;
    padding: 8px 10px !important;
    color: #dfdfdf !important;
    box-sizing: border-box !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.intro-box .intro-title {
    font-family: var(--font-pixel), monospace !important;
    font-size: 8px !important;
    color: #ffaa00 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
}

.intro-box .intro-text {
    font-family: var(--font-mono), monospace !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: #a0aec0 !important;
    text-align: left !important;
}

.memory-stats-box {
    background-color: #000000 !important;
    border: 2px inset var(--win-border-darker, #404040) !important;
    padding: 8px 10px !important;
    color: #39ff14 !important; /* matrix green */
    font-size: 11px !important;
    line-height: 1.5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.memory-stats-box .stat-row {
    display: flex !important;
    justify-content: space-between !important;
}

.memory-stats-box .stat-row span {
    color: #00ffff !important; /* cyan values */
}



/* System log area (Premium Full-Width Diagnostics Strip) */
.memory-system-log {
    background-color: #dfdfdf !important;
    border-top: 2px solid var(--win-border-dark) !important;
    padding: 8px 12px 10px 12px !important;
    height: 68px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
}

.memory-system-log .log-title {
    color: #cc0066 !important; /* Elegant retro pink/magenta */
    font-size: 9px !important;
    font-family: var(--font-pixel), monospace !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
}

.memory-system-log .log-content {
    flex: 1 !important;
    padding: 4px 8px !important;
    background-color: #000000 !important;
    color: #39ff14 !important; /* Bright cyber matrix green */
    font-family: var(--font-mono), monospace !important;
    font-size: 10px !important;
    overflow-y: auto !important;
    text-align: left !important;
    border: 2px inset #404040 !important;
    white-space: pre-wrap !important;
    line-height: 1.3 !important;
    box-sizing: border-box !important;
}

/* Text coloring classes */
.text-error {
    color: #8b0000 !important;
}

.text-success {
    color: #006b2e !important;
}

.text-retro-red {
    color: #8b0000 !important;
}

.text-retro-blue {
    color: #003f7f !important;
}

.text-retro-navy {
    color: #001a66 !important;
}

.text-retro-green {
    color: #006b2e !important;
}

/* Unified clean mobile responsive layout shell and grid scaling overrides */
@media (max-width: 768px) {
    /* 1. Viewport & Body Rules */
    body {
        overflow-x: hidden !important;
    }

    #window-memory-test {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        height: calc(100dvh - 54px) !important; /* Leave exactly 34px for retro taskbar + 20px padding */
        max-height: calc(100dvh - 54px) !important;
        transform: none !important;
        overflow: hidden !important;
    }

    /* 2. Mobile App Shell Stacked Layout */
    .memo-app-body {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .memo-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 2px solid var(--win-border-darker) !important;
        height: auto !important;
        flex-shrink: 0 !important;
        padding: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .memo-main-panel {
        width: 100% !important;
        padding: 8px 10px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        background-color: #dfdfdf !important;
    }

    /* Compact Diagnostics Sidebar Panels */
    .intro-box {
        padding: 4px 8px !important;
        margin: 0 !important;
    }

    .intro-box .intro-text {
        display: none !important; /* Hide long desktop descriptions on mobile */
    }

    .memory-stats-box {
        margin-top: 0 !important;
        padding: 4px 8px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 12px !important;
        background-color: #000000 !important;
        border: 2px inset var(--win-border-darker) !important;
    }

    .memory-stats-box .stat-row {
        font-size: 9.5px !important;
        margin: 0 !important;
    }

    /* 3. Mobile HUD Fix */
    .mem-board-header {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 4px !important;
        padding: 6px 8px !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .hud-item {
        font-size: clamp(7.5px, 2.2vw, 9.5px) !important;
        white-space: nowrap !important;
    }

    .mem-board-header .hud-item:nth-child(1) { grid-column: span 3; text-align: left; }
    .mem-board-header .hud-item:nth-child(2) { grid-column: span 3; text-align: right; }
    .mem-board-header .hud-item:nth-child(3) { grid-column: span 2; text-align: left; }
    .mem-board-header .hud-item:nth-child(4) { grid-column: span 2; text-align: center; }
    .mem-board-header .hud-item:nth-child(5) { grid-column: span 2; text-align: right; }

    /* 4. Card Grid Scaling (Round specific clamp variables) */
    .mem-grid.round-1 {
        --card-size-mobile: clamp(44px, 14vw, 62px);
        --card-gap-mobile: clamp(6px, 2vw, 10px);
    }
    
    .mem-grid.round-2 {
        --card-size-mobile: clamp(34px, 11vw, 48px);
        --card-gap-mobile: clamp(4px, 1.5vw, 8px);
    }
    
    .mem-grid.round-3 {
        --card-size-mobile: clamp(32px, 10.5vw, 46px);
        --card-gap-mobile: clamp(4px, 1.4vw, 8px);
    }

    /* Grid layout auto-responsive overrides */
    .mem-card {
        width: var(--card-size-mobile, clamp(34px, 11vw, 48px)) !important;
        height: var(--card-size-mobile, clamp(34px, 11vw, 48px)) !important;
    }
    
    .mem-grid {
        min-height: 0 !important;
        padding: 4px !important;
        gap: var(--card-gap-mobile, clamp(4px, 1.5vw, 8px)) !important;
        grid-template-columns: repeat(var(--cols), var(--card-size-mobile, clamp(34px, 11vw, 48px))) !important;
        grid-auto-rows: var(--card-size-mobile, clamp(34px, 11vw, 48px)) !important;
        width: calc((var(--cols) * var(--card-size-mobile, clamp(34px, 11vw, 48px))) + ((var(--cols) - 1) * var(--card-gap-mobile, clamp(4px, 1.5vw, 8px)))) !important;
    }

    /* 5. Board Container Mobile Behavior */
    .mem-board-outer-panel {
        padding: 6px !important;
        gap: 6px !important;
    }

    .mem-board-body {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 8px !important;
    }

    /* 6. System Log Mobile Fix */
    .memory-system-log {
        height: 52px !important;
        padding: 6px 10px !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    }

    .memory-system-log .log-content {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    /* 7. Mobile Buttons Comfort Targets */
    #window-memory-test .win98-btn,
    #window-memory-test .run-protocol-btn {
        min-height: 44px !important; /* Premium finger-tappable standard size */
        padding: 0 12px !important;
        font-size: 11px !important;
    }

    .mem-fail-actions,
    .mem-victory-actions {
        flex-direction: column !important; /* Stack vertically for cozy mobile viewing */
        gap: 6px !important;
        width: 100% !important;
    }

    /* 8. Mobile Titlebar / Menu */
    .menu-bar {
        padding: 4px 6px !important;
    }
    
    .menu-bar .menu-item {
        font-size: 10px !important;
        margin-right: 4px !important;
    }
    
    .sound-toggle-container {
        font-size: 9.5px !important;
        padding: 1px 4px !important;
    }

    /* 9. Mobile Submit Screen adjustments */
    #mem-screen-submit .win98-input {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* Prevents auto-zoom behavior on iOS input focus */
    }

    /* 10. Mobile Leaderboard Screen Auto-scroll Container */
    .leaderboard-table-container {
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }
}