/* ─── 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(760px, 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: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.memo-main-panel {
    /* The action row's sticky offsets are derived from this, so the two stay in
       step when the mobile block changes the padding. */
    --mem-panel-pad: 16px;
    flex: 1 !important;
    min-height: 0 !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: auto !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;
}

/* Two equal spacers centre the body copy while the action row keeps the last
   slot, so buttons sit at the same height on every screen. Absolute positioning
   would do the same until a screen overflows and the row landed on the content;
   spacers collapse to zero instead and the screen simply scrolls. */
/* Not the board: it grows to fill the panel itself, and a spacer either side
   would take a third of the height each and squash the grid to a strip. */
.memory-screen.active:not(#mem-screen-playing)::before,
.memory-screen.active:not(#mem-screen-playing)::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

.memory-screen.active:not(#mem-screen-playing)::before { order: -1 !important; }
.memory-screen.active:not(#mem-screen-playing)::after  { order: 0 !important; }
.memory-screen.active .mem-action-area { order: 1 !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;
}

/* Leftover cell on odd grids: a slot with no power, not a playable card. */
.mem-card-dead {
    background-color: #1c1c1c;
    border-top: 2px solid #141414;
    border-left: 2px solid #141414;
    border-right: 2px solid #3a3a3a;
    border-bottom: 2px solid #3a3a3a;
    cursor: default;
    pointer-events: none;
}

/* Match the 85% inset the card back uses so it sits on the same rhythm */
.mem-card-dead svg {
    width: 85%;
    height: 85%;
}

.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 */
/* Screens are flex columns, so auto top margin parks the buttons against the
   bottom regardless of content above. The bottom padding carries the clearance
   because a scrolling screen gets no gap from the panel's own padding. */
/* Sticky rather than plain flow: on a screen tall enough to scroll (the
   victory screen) the row would otherwise sit past the fold, and the buttons
   are meant to be in one place on every screen. */
.mem-action-area {
    position: sticky;
    bottom: calc(-1 * var(--mem-panel-pad, 16px));
    z-index: 2;
    background-color: #dfdfdf;
    padding-top: 14px;
    /* The strip runs on past the buttons and over the panel's own bottom
       padding, so scrolling content cannot show through beneath it. The
       negative margin takes that extra height back out of the flow, keeping the
       buttons at the same height on screens that do not scroll. */
    padding-bottom: var(--mem-action-gap, 12px);
    margin-bottom: calc(-1 * var(--mem-panel-pad, 16px));
    flex-shrink: 0;
    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;
}

/* The log strip is the last child of .memo-app-body, so the body must be a
   column that lets the main panel absorb the slack. As a grid the panel sized
   to its content and left the strip floating in the middle of the window. */

/* 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-main-panel {
        --mem-panel-pad: 8px;
        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 */
    }

    /* 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);
    }
    
    /* Rounds 2 and 3 are both four columns wide now, so width no longer
       separates them. Round 3 stays a little smaller because it has a fourth
       row to fit in the same height. */
    .mem-grid.round-2 {
        --card-size-mobile: clamp(38px, 12vw, 54px);
        --card-gap-mobile: clamp(5px, 1.7vw, 9px);
    }
    
    .mem-grid.round-3 {
        --card-size-mobile: clamp(34px, 11vw, 48px);
        --card-gap-mobile: clamp(4px, 1.5vw, 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;
    }
}

/* Panels set display:flex !important and buttons inside the game window set
   display:inline-flex !important under an ID selector, so a bare class ties on
   !important but loses on specificity. Must stay last in the file. */
.is-hidden,
#window-memory-test .is-hidden {
    display: none !important;
}