/* _content/MemoryGame.Web/Components/Layout/BuildStamp.razor.rz.scp.css */
/* Scoped to the component, like the other layout pieces here.

   Quiet on purpose: readable when you go looking for it, close to invisible the
   rest of the time. It sits above page content because it is fixed, so it stays
   small and low-contrast rather than competing with anything. */

.build-stamp[b-zc0uodtuuz] {
    position: fixed;
    right: .5rem;
    bottom: .35rem;
    z-index: 1030;
    font-size: .68rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1;
    padding: .25rem .45rem;
    border-radius: 4px;
    color: #6c757d;
    background: rgba(127, 127, 127, .12);
    opacity: .45;
    transition: opacity .15s ease;
}

/* Hover only. It is text now, so there is nothing to focus. */
.build-stamp:hover[b-zc0uodtuuz] {
    opacity: 1;
    color: #495057;
}

.build-stamp-warn[b-zc0uodtuuz] {
    color: #b8860b;
    font-weight: 600;
}

/* Follows the viewer's theme rather than assuming the light one. */
@media (prefers-color-scheme: dark) {
    .build-stamp[b-zc0uodtuuz] {
        color: #adb5bd;
        background: rgba(255, 255, 255, .08);
    }

    .build-stamp:hover[b-zc0uodtuuz] {
        color: #dee2e6;
    }
}

/* On a narrow screen it would otherwise sit on whatever is in that corner. */
@media (max-width: 575.98px) {
    .build-stamp[b-zc0uodtuuz] {
        font-size: .62rem;
        opacity: .3;
    }
}
/* _content/MemoryGame.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* The container fills the viewport */
.main-container[b-9xuna8kxpr] {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* This is the magic part: the whole main area scrolls */
main[b-9xuna8kxpr] {
    flex: 1;
    overflow-y: auto; /* Enable scrolling for the whole thing */
    background-color: var(--app-ground);
}

.page-content[b-9xuna8kxpr] {
    padding: 1.5rem;
}

/* --- Navigation Styling --- */
[b-9xuna8kxpr] .top-nav {
    background-color: var(--app-slate);
    color: var(--app-surface);
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column; /* Stack brand on top of links on mobile */
    align-items: center;
    gap: 10px;
}

[b-9xuna8kxpr] .nav-brand {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 5px 0;
    /* On a phone the brand row holds the toggle at its far right; from 768px up the toggle is
       gone and this collapses back to just the logo. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

[b-9xuna8kxpr] .nav-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    color: var(--app-surface);
    font-size: 1.25rem;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
}

    [b-9xuna8kxpr] .nav-toggle:hover {
        border-color: var(--app-accent);
        color: var(--app-accent);
    }

/* Hidden on a phone until the toggle says otherwise. Not display:none on the container itself -
   .open has to be able to bring it back, and a row that was never laid out cannot animate. */
/* =========================================
   THE PHONE DRAWER

   Slides in from the left over a dimmed backdrop, items stacked, closing on
   selection, on the backdrop, or on Escape. It is what almost every app does,
   and the reason it suits this nav in particular is that this nav is not flat:
   Explore, Library and Admin have menus inside them. A drawer turns those into
   indented sections; the wrapped row it replaces had them opening as floating
   panels over the page, which is a menu inside a menu on the smallest screen
   in the world.

   Left rather than right, which is the convention. The argument for the right
   is thumb reach on a large phone, and it is a real argument - but the button
   that opens this sits top-left, and a panel that flies out from the opposite
   side of the screen from the control that summoned it is its own small
   confusion.
========================================= */
[b-9xuna8kxpr] .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 320px);
    background-color: var(--app-slate);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 0 1rem;
    overflow-y: auto;
    /* Off-screen rather than display:none, so it can slide - and so its
       contents are laid out and measurable before it is ever opened. */
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 24px rgba(0, 0, 0, .35);
}

    [b-9xuna8kxpr] .nav-links.open {
        transform: translateX(0);
    }

@media (prefers-reduced-motion: reduce) {
    [b-9xuna8kxpr] .nav-links {
        transition: none;
    }
}

/* The dimmed page behind it. A tap anywhere out there closes the drawer, which
   is the gesture people try first and the one a panel with no way out fails. */
[b-9xuna8kxpr] .nav-scrim {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1001;
    border: 0;
    padding: 0;
}

[b-9xuna8kxpr] .nav-drawer-close {
    align-self: flex-end;
    background: none;
    border: 0;
    color: #b6c2cc;
    font-size: 1.1rem;
    line-height: 1;
    padding: .4rem .9rem 1rem;
    cursor: pointer;
}

    [b-9xuna8kxpr] .nav-drawer-close:hover {
        color: var(--app-surface);
    }

[b-9xuna8kxpr] .nav-item {
    color: #b6c2cc;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    font-size: 1rem;
    padding: .8rem 1.25rem;
}

    [b-9xuna8kxpr] .nav-item i {
        font-size: 1.15rem;
        width: 1.4rem;
        text-align: center;
    }

    [b-9xuna8kxpr] .nav-item.active {
        color: var(--app-surface);
        border-bottom: 2px solid var(--app-accent);
    }

        /* The icon carries the accent; the label stays white so it reads as a label rather than
           as a link that has been visited. */
        [b-9xuna8kxpr] .nav-item.active i {
            color: var(--app-accent);
        }

/* --- Explore Dropdown (Study / Test / Memorials collapsed into one menu) --- */
[b-9xuna8kxpr] .dropdown-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: stretch;
}

/* In the drawer: part of the list, indented under the thing that opened it.
   The desktop rules below put it back to a floating panel. */
[b-9xuna8kxpr] .dropdown-nav-menu {
    background-color: rgba(0, 0, 0, .18);
    overflow: hidden;
    z-index: 1001;
}

[b-9xuna8kxpr] .dropdown-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 12px 2.6rem;
    color: #b6c2cc;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

    [b-9xuna8kxpr] .dropdown-nav-link:last-child {
        border-bottom: none;
    }

    [b-9xuna8kxpr] .dropdown-nav-link:hover {
        background-color: rgba(255, 255, 255, .06);
        color: var(--app-surface);
    }

    [b-9xuna8kxpr] .dropdown-nav-link.active {
        color: var(--app-accent);
        font-weight: 700;
    }

/* Group label inside a dropdown. Same shape as the home page's section headings,
   so "Remember" and "Browse" read as the same distinction in both places. */
[b-9xuna8kxpr] .dropdown-nav-heading {
    padding: 12px 16px 5px 2.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a94a0;
    background: none;
    border-bottom: 0;
}

[b-9xuna8kxpr] .dropdown-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

/* --- Desktop Layout --- */
@media (min-width: 768px) {
    [b-9xuna8kxpr] .top-nav {
        flex-direction: row; /* Side by side brand and links */
        justify-content: space-between;
        height: 60px;
        /* The bar stays full width - it is the app's edge - but its CONTENTS stop where the
           widest page stops, so the logo and the links line up with what is underneath them
           instead of hugging the window. On a wide screen they were pinned to the far right
           while the page sat in the middle.
           
           Done with padding rather than an inner wrapper because the bar has no spare element
           to centre, and max() keeps the 2rem gutter on anything narrower than the cap. This is
           what heaphomestead.com does too, at its own width. */
        padding-inline: max(2rem, calc((100% - var(--app-width-tool)) / 2));
    }

    [b-9xuna8kxpr] .nav-brand {
        width: auto;
    }

    /* The toggle is a phone control. Hiding it here rather than rendering it conditionally in C#
       means resizing a desktop window never leaves the markup disagreeing with the layout. */
    [b-9xuna8kxpr] .nav-toggle,
    [b-9xuna8kxpr] .nav-drawer-close {
        display: none;
    }

    [b-9xuna8kxpr] .nav-links {
        /* Back to a row in the bar: static, no drawer, no transform, whatever
           the phone toggle last said. */
        position: static;
        transform: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: auto;
        justify-content: flex-end;
        gap: 30px;
        padding: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }

    [b-9xuna8kxpr] .nav-scrim {
        display: none;
    }

    [b-9xuna8kxpr] .nav-item,
    [b-9xuna8kxpr] .nav-item-btn {
        flex-direction: column;
        gap: 0;
        width: auto;
        font-size: 0.75rem;
        padding: 5px;
    }

        [b-9xuna8kxpr] .nav-item-btn i {
            font-size: 1.3rem;
            width: auto;
        }

    [b-9xuna8kxpr] .dropdown-nav-item {
        flex-direction: row;
        align-items: center;
    }

    [b-9xuna8kxpr] .dropdown-nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 8px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        min-width: 180px;
    }

    [b-9xuna8kxpr] .dropdown-nav-link {
        padding: 12px 16px;
        color: #212529;
        font-size: 0.9rem;
        border-bottom: 1px solid #f1f2f6;
    }

        [b-9xuna8kxpr] .dropdown-nav-link:hover {
            background-color: #f8f9fa;
            color: var(--app-accent);
        }

    [b-9xuna8kxpr] .dropdown-nav-heading {
        padding: 10px 16px 5px;
        background: #fbfcfd;
        border-bottom: 1px solid #f1f2f6;
    }

    [b-9xuna8kxpr] .nav-item i {
        display: block; /* Ensures it sits on its own line above the text */
        font-size: 1.4rem;
        margin-bottom: 2px;
        color: inherit; /* Inherits the blue color when active */
    }
}

[b-9xuna8kxpr] .nav-item-form {
    display: inline-block;
    margin: 0;
}

[b-9xuna8kxpr] .nav-item-btn {
    background: none;
    border: none;
    color: #b6c2cc;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    padding: .8rem 1.25rem;
    cursor: pointer;
    transition: color 0.2s;
}

    [b-9xuna8kxpr] .nav-item-btn i {
        font-size: 1.15rem;
        width: 1.4rem;
        text-align: center;
    }

    /* Match the hover/active states of the NavLinks */
    [b-9xuna8kxpr] .nav-item-btn:hover {
        color: var(--app-surface);
    }

[b-9xuna8kxpr] .nav-item:hover {
    color: var(--app-surface);
}

@media (min-width: 768px) {
    [b-9xuna8kxpr] .nav-item-btn {
        flex-direction: row;
        font-size: 1rem;
        gap: 8px;
    }
}
/* _content/MemoryGame.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.sidebar-island[b-0cmymwtthv] {
    background-color: #212529;
    color: white;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header[b-0cmymwtthv] {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 15px;
}

.toggle-btn[b-0cmymwtthv] {
    color: white;
    font-size: 1.5rem;
    padding: 0;
    background: none;
    border: none;
}

.nav-links[b-0cmymwtthv] {
    display: flex;
    flex-direction: column;
}

.nav-link[b-0cmymwtthv] {
    display: flex;
    align-items: center;
    padding: 1rem;
    color: #ced4da;
    text-decoration: none;
}

    .nav-link:hover[b-0cmymwtthv] {
        background-color: #343a40;
    }

    .nav-link.active[b-0cmymwtthv] {
        background-color: var(--app-accent);
        color: white;
    }

/* --- DESKTOP --- */
@media (min-width: 768.1px) {
    .sidebar-island.expanded[b-0cmymwtthv] {
        width: 250px;
    }

    .sidebar-island.collapsed[b-0cmymwtthv] {
        width: 65px;
    }

        .sidebar-island.collapsed .text[b-0cmymwtthv] {
            display: none;
        }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .sidebar-island[b-0cmymwtthv] {
        width: 100%;
    }

        .sidebar-island.collapsed .nav-links[b-0cmymwtthv] {
            display: none;
        }
}
/* _content/MemoryGame.Web/Components/Layout/Sidebar.razor.rz.scp.css */
/* --- The Backdrop --- */
.sidebar-backdrop[b-fj8x0j7605] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Dim the background */
    z-index: 1900; /* Just below the sidebar */
    backdrop-filter: blur(2px);
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .sidebar-container[b-fj8x0j7605] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 2000;
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
        box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    }

        .sidebar-container.collapsed[b-fj8x0j7605] {
            transform: translateX(-100%);
        }

    /* Make sure the header has enough room for the close button */
    .sidebar-header[b-fj8x0j7605] {
        justify-content: space-between;
        padding-right: 1rem;
    }
}

/* Keep your existing .nav-link, .icon, etc. styles below */
/* _content/MemoryGame.Web/Components/Pages/Home.razor.rz.scp.css */
/* Existing Hero & Card Styles */
.hero-section[b-7boaeydxvp] {
	background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-ground) 100%);
}

.feature-card[b-7boaeydxvp] {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border-radius: 16px;
}

	.feature-card:hover[b-7boaeydxvp] {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
	}

.feature-icon[b-7boaeydxvp] {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	border-radius: 12px;
	font-size: 2rem;
}

.bg-primary-subtle[b-7boaeydxvp] {
	background-color: var(--app-slate-tint);
}

h1[b-7boaeydxvp] {
	letter-spacing: -1px;
}

/* =========================================
   NEW: DYNAMIC HOOK CHAT STYLES
========================================= */

.hook-chat-wrapper[b-7boaeydxvp] {
	max-width: 650px;
	width: 100%;
	margin: 0 auto;
}

/* The sample exchange, sized to sit under the hero rather than to fill it. */
.hook-sample[b-7boaeydxvp] {
	max-width: 560px;
	width: 100%;
	margin: 2rem auto 0;
	background-color: var(--app-surface);
	border: 1px solid var(--app-rule);
	border-radius: 10px;
	padding: 1rem 1.15rem 1.15rem;
	text-align: center;
}

.hook-sample-who[b-7boaeydxvp] {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--app-muted);
	margin-bottom: 0.6rem;
	text-align: left;
}

.hook-bubble-incoming[b-7boaeydxvp] {
	background-color: var(--app-surface);
	color: var(--app-text);
	padding: 0.85rem 1.1rem;
	border-radius: 4px 14px 14px 14px;
	border: 1px solid var(--app-rule);
	font-size: 1rem;
	line-height: 1.55;
	position: relative;
	border-left: 4px solid var(--app-accent);
	/* --- NEW: Forces HTML to respect \n line breaks --- */
	white-space: pre-wrap;
}

.hook-btn-reply[b-7boaeydxvp] {
	background-color: var(--app-accent);
	color: white;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	padding: 0.5rem 1.1rem;
	border-radius: 14px 14px 4px 14px;
	font-weight: 600;
	font-size: 0.92rem;
	margin-top: 0.75rem;
	transition: all 0.2s ease-in-out;
	max-width: 550px;
	border: none;
}

	.hook-btn-reply:hover[b-7boaeydxvp] {
		background-color: var(--app-accent-dark);
		transform: translateY(-2px);
		color: white;
		box-shadow: 0 6px 15px rgba(var(--app-accent-rgb), 0.25) !important;
	}

.tracking-wider[b-7boaeydxvp] {
	letter-spacing: 0.05em;
}

.hover-underline:hover[b-7boaeydxvp] {
	text-decoration: underline !important;
}

.animate-fade-in[b-7boaeydxvp] {
	animation: fadeIn-b-7boaeydxvp 0.4s ease-out forwards;
}

@keyframes fadeIn-b-7boaeydxvp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* --- NEW: Avatar for the Home Page Hook --- */
.hook-avatar[b-7boaeydxvp] {
	width: 90px;
	height: 90px;
	object-fit: contain;
	background-color: var(--app-surface);
	border-radius: 50%;
	border: 3px solid var(--app-surface);
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	animation: fadeIn-b-7boaeydxvp 0.4s ease-out forwards;
}
/* _content/MemoryGame.Web/Components/Pages/Memory/Event.razor.rz.scp.css */
/* =========================================
   FULLSCREEN IMAGE MODAL
========================================= */
.image-modal-overlay[b-klai0o6sf9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-modal-content[b-klai0o6sf9] {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.image-modal-close[b-klai0o6sf9] {
    position: absolute;
    top: 20px;
    right: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

    .image-modal-close:hover[b-klai0o6sf9] {
        background: rgba(255, 255, 255, 0.4);
    }

/* =========================================
   ZOOM INDICATOR (Magnifying Glass)
========================================= */
.zoom-indicator[b-klai0o6sf9] {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: var(--app-accent);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    border: 2px solid #ffffff;
    transition: transform 0.2s ease;
}

.position-relative:active .zoom-indicator[b-klai0o6sf9] {
    transform: scale(0.9);
}

/* =========================================
   HORIZONTAL TIMELINE LAYOUT
========================================= */
.timeline-horizontal-container[b-klai0o6sf9] {
    width: 100%;
    overflow-x: auto; /* Allows swiping left/right */
    padding: 20px 10px 40px 10px;
    /* Makes scrolling buttery smooth on iOS/touch devices */
    -webkit-overflow-scrolling: touch;
    /* Optional: Hides the ugly scrollbar for a cleaner look */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .timeline-horizontal-container[b-klai0o6sf9]::-webkit-scrollbar {
        display: none;
    }

.timeline-horizontal-grid[b-klai0o6sf9] {
    display: grid;
    /* 3 Rows: Top Content, The Line (4px), Bottom Content */
    grid-template-rows: 1fr 4px 1fr;
    /* Each memory card is exactly 350px wide */
    grid-auto-columns: 350px;
    grid-auto-flow: column;
    gap: 0 40px;
    position: relative;
    /* Ensures the grid expands horizontally as new items are added */
    min-width: max-content;
    align-items: center;
}

/* The Continuous Center Line */
.timeline-line[b-klai0o6sf9] {
    grid-row: 2; /* Forces it into the middle row */
    grid-column: 1 / -1; /* Spans from the first card to the very last card */
    background-color: var(--app-accent);
    height: 4px;
    border-radius: 2px;
    width: 100%;
}

.timeline-h-item[b-klai0o6sf9] {
    position: relative;
    width: 100%;
}

    /* Top items sit in the first row and anchor to the bottom (near the line) */
    .timeline-h-item.top-item[b-klai0o6sf9] {
        grid-row: 1;
        align-self: end;
        padding-bottom: 30px;
    }

    /* Bottom items sit in the third row and anchor to the top */
    .timeline-h-item.bottom-item[b-klai0o6sf9] {
        grid-row: 3;
        align-self: start;
        padding-top: 30px;
    }

    /* The Timeline Dots */
    .timeline-h-item[b-klai0o6sf9]::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: white;
        border: 4px solid var(--app-accent);
        border-radius: 50%;
        left: 50%;
        margin-left: -10px; /* Perfectly centers the dot horizontally */
        z-index: 2;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Top dots overlap the center line downward */
    .timeline-h-item.top-item[b-klai0o6sf9]::after {
        bottom: -8px;
    }

    /* Bottom dots overlap the center line upward */
    .timeline-h-item.bottom-item[b-klai0o6sf9]::after {
        top: -8px;
    }

.timeline-content[b-klai0o6sf9] {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

/* Smooth fade-in animation for new items */
.slide-fade-in[b-klai0o6sf9] {
    animation: slideRightFade-b-klai0o6sf9 0.4s ease-out forwards;
}

@keyframes slideRightFade-b-klai0o6sf9 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* _content/MemoryGame.Web/Components/Pages/Memory/Library.razor.rz.scp.css */
.top-controls[b-flitkqsp8e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.search-box[b-flitkqsp8e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 350px;
}

    .search-box input[b-flitkqsp8e] {
        width: 100%;
    }

.pagination-controls[b-flitkqsp8e] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding-top: 10px;
}

.page-info[b-flitkqsp8e] {
    font-weight: 500;
    color: var(--app-muted);
}

.image-list[b-flitkqsp8e] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.image-card[b-flitkqsp8e] {
    display: flex;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--app-rule);
    border-radius: 6px;
    background: var(--app-surface);
}

.thumb[b-flitkqsp8e] {
    width: 120px;
    height: 120px;
    object-fit: contain;
    background-color: var(--app-sunken);
    border: 1px solid var(--app-rule);
    border-radius: 6px;
}

.info[b-flitkqsp8e] {
    flex: 1;
}

    .info h3[b-flitkqsp8e] {
        margin: 0 0 6px 0;
    }

    .info p[b-flitkqsp8e] {
        margin: 0 0 10px 0;
        color: var(--app-muted);
    }

/* _content/MemoryGame.Web/Components/Pages/Memory/Memorial.razor.rz.scp.css */
/* =========================================
   FULLSCREEN IMAGE MODAL
========================================= */
.image-modal-overlay[b-jg6dqoxg7n] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main profile photo at the top of a memorial. A fixed frame (instead of just capping height)
   so a wide/landscape image - a logo, say - gets letterboxed on a clean white background instead
   of rendering full-width-but-short and looking lost against the page's dark section. A normal
   portrait photo still fills most of the frame naturally. */
.memorial-hero-image[b-jg6dqoxg7n] {
    width: 100%;
    max-width: 320px;
    height: 280px;
    object-fit: contain;
    background-color: var(--app-surface);
}

.image-modal-content[b-jg6dqoxg7n] {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.image-modal-close[b-jg6dqoxg7n] {
    position: absolute;
    top: 20px;
    right: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

    .image-modal-close:hover[b-jg6dqoxg7n] {
        background: rgba(255, 255, 255, 0.4);
    }

/* =========================================
   ZOOM INDICATOR (Magnifying Glass)
========================================= */
.zoom-indicator[b-jg6dqoxg7n] {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: var(--app-accent);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    border: 2px solid var(--app-surface);
    transition: transform 0.2s ease;
}

.position-relative:active .zoom-indicator[b-jg6dqoxg7n] {
    transform: scale(0.9);
}

.btn-multiline-pill[b-jg6dqoxg7n] {
    white-space: normal; /* Forces the text to wrap instead of running off the edge */
    height: auto; /* Allows the button to grow dynamically */
    padding: 15px 35px; /* Extra side padding keeps text away from the pinched curves */
    line-height: 1.4; /* Gives multiline text a bit of breathing room */
}

/* Smooth fade for transitioning between views */
.slide-fade-in[b-jg6dqoxg7n] {
    animation: fadeInMode-b-jg6dqoxg7n 0.3s ease-out forwards;
}

@keyframes fadeInMode-b-jg6dqoxg7n {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   INTERACTIVE REPLY BUTTON
========================================= */
/* .bounce-hint / @keyframes bounceDown now live in wwwroot/app.css - shared
   with WeekRemember.razor instead of being page-scoped here only. */

.interactive-reply-btn[b-jg6dqoxg7n] {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    border: 2px solid transparent;
}

    /* Makes the button slightly grow when hovered (for desktop) */
    .interactive-reply-btn:hover[b-jg6dqoxg7n] {
        transform: scale(1.03);
        box-shadow: 0 8px 20px rgba(var(--app-slate-rgb), 0.25) !important;
    }

    /* Creates a satisfying "squish" effect when physically tapped on a phone */
    .interactive-reply-btn:active[b-jg6dqoxg7n] {
        transform: scale(0.96);
        background-color: var(--app-accent-dark); /* Darker on tap */
    }
/* _content/MemoryGame.Web/Components/Pages/Memory/StudyReader.razor.rz.scp.css */
/* =========================================
   1. LAYOUT CONTROLS & BASICS
========================================= */
.test-layout[b-ci0belu6qm] {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2rem;
	max-width: 1200px;
	margin: 0;
	padding: 20px;
	align-items: start;
}

/* --- STICKY CONVERSATION PROFILE LEFT CARD --- */
.left-panel[b-ci0belu6qm] {
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	border: 1px solid #f0f0f0;
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem;
}

.image-wrapper[b-ci0belu6qm] {
	position: relative;
	cursor: pointer;
	margin-bottom: 10px;
}

.header-image[b-ci0belu6qm] {
	width: 220px; /* Increased from 150px */
	height: 220px; /* Increased from 150px */
	object-fit: contain;
	background-color: #ffffff;
	border-radius: 50%;
	border: 4px solid #e9ecef;
	box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.zoom-indicator[b-ci0belu6qm] {
	position: absolute;
	bottom: 15px; /* Bumped up from 5px to sit nicely on the larger circle's curve */
	right: 15px; /* Bumped in from 5px */
	background-color: var(--app-accent);
	color: white;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.9rem;
	border: 2px solid #ffffff;
}

.status-indicator[b-ci0belu6qm] {
	font-size: 0.85rem;
	color: #198754;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}

	.status-indicator .dot[b-ci0belu6qm] {
		width: 8px;
		height: 8px;
		background-color: #198754;
		border-radius: 50%;
		display: inline-block;
	}

/* --- RIGHT PANEL LAYOUT --- */
.right-panel[b-ci0belu6qm] {
	border-left: 1px solid #e0e0e0;
	padding-left: 2rem;
}

/* =========================================
   2. TEXTING THREAD & BUBBLE MECHANICS
========================================= */
.chat-wrapper[b-ci0belu6qm] {
	border: 1px solid #eef0f2;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.chat-header[b-ci0belu6qm] {
	background-color: #f8f9fa;
}

.chat-feed[b-ci0belu6qm] {
	display: flex;
	flex-direction: column;
	background-color: #f4f6f8;
	min-height: 350px;
}

/* Incoming Message Bubble (Left Align) */
.chat-bubble-incoming[b-ci0belu6qm] {
	align-self: flex-start;
	background-color: #ffffff;
	color: #212529;
	padding: 1rem 1.25rem;
	border-radius: 4px 18px 18px 18px;
	max-width: 85%;
	box-shadow: 0 2px 5px rgba(0,0,0,0.04);
	margin-bottom: 1.5rem;
	position: relative;
	border: 1px solid #eaeaea;
}

/* Outgoing History Bubble (Right Align Flat text) */
.chat-bubble-outgoing[b-ci0belu6qm] {
	align-self: flex-end;
	background-color: #e1f5fe;
	color: #0288d1;
	padding: 1rem 1.25rem;
	border-radius: 18px 18px 4px 18px;
	max-width: 85%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.03);
	margin-bottom: 1.5rem;
	border: 1px solid #b3e5fc;
	font-weight: 500;
}

.message-text[b-ci0belu6qm] {
	line-height: 1.6;
	font-size: 1.1rem;
	white-space: pre-wrap; /* Keeps your standard \n line breaks working! */
}

	/* --- NEW: Image handling for rich media chat bubbles --- */
	.message-text[b-ci0belu6qm]  img {
		max-width: 100%;
		height: auto;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
		display: block; /* REQUIRED: Tells the image to take up its own line */
		margin: 10px auto 5px auto; /* REQUIRED: Centers the image horizontally */
	}

/* Outgoing Interactive Action Button */
.reply-wrapper[b-ci0belu6qm] {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
}

.btn-reply[b-ci0belu6qm] {
	align-self: flex-end;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	padding: 1rem 1.5rem;
	max-width: 85%;
	text-align: right;
	border-radius: 18px 18px 4px 18px;
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.4;
	border: none;
	box-shadow: 0 4px 12px rgba(var(--app-accent-rgb), 0.25);
	transition: all 0.2s ease-in-out;
}

.btn-reply-primary[b-ci0belu6qm] {
	background-color: var(--app-accent);
	color: white;
}

	.btn-reply-primary:hover[b-ci0belu6qm] {
		background-color: var(--app-accent-dark);
		transform: scale(1.02);
	}

.btn-reply-success[b-ci0belu6qm] {
	background-color: #198754;
	color: white;
	box-shadow: 0 4px 12px rgba(25, 135, 84, 0.25);
}

	.btn-reply-success:hover[b-ci0belu6qm] {
		background-color: #157347;
		transform: scale(1.02);
	}

/* --- COLLAPSIBLE MEMO PANEL STYLES --- */
.memos-collapsible-wrapper[b-ci0belu6qm] {
	background-color: #ffffff;
	border: 1px solid #eef0f2;
	border-radius: 12px;
	overflow: hidden;
	margin-top: 2rem;
}

.toggle-memos-btn[b-ci0belu6qm] {
	background: #ffffff;
	text-align: left;
	border: none;
	transition: background-color 0.15s ease;
}

	.toggle-memos-btn:hover[b-ci0belu6qm] {
		background-color: #f8f9fa;
	}

.memo-card[b-ci0belu6qm] {
	border-radius: 8px;
	border-left: 3px solid #ffc107 !important;
}

/* =========================================
   3. RESPONSIVE COMPACT LAYOUTS (Mobile)
========================================= */
@media (max-width: 768px) {
	.test-layout[b-ci0belu6qm] {
		display: block;
		padding: 0;
	}

	.left-panel[b-ci0belu6qm] {
		position: sticky;
		top: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px;
		background-color: #ffffff;
		border-radius: 0; /* CHANGED: This is where the 0 goes to fix the mobile peek-a-boo bug! */
		border-bottom: 1px solid #ddd;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		width: 100%;
		box-sizing: border-box;
	}

	#active-message-target[b-ci0belu6qm] {
		scroll-margin-top: 250px; /* Adjust this slightly if your sticky header is taller/shorter */
	}

	.image-wrapper[b-ci0belu6qm] {
		position: relative;
		align-self: center;
		margin-bottom: 15px;
		cursor: pointer;
	}

	.header-image[b-ci0belu6qm] {
		width: 120px; /* Matched the Test page size */
		height: 120px;
		object-fit: contain;
		background-color: #ffffff;
		border-radius: 50%;
		border: 3px solid #f0f0f0;
		box-shadow: 0 4px 10px rgba(0,0,0,0.05);
		display: block;
	}

	.zoom-indicator[b-ci0belu6qm] {
		position: absolute;
		bottom: 0px;
		right: 0px;
		background-color: var(--app-accent);
		color: white;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		border: 2px solid #ffffff;
		transition: transform 0.2s ease;
	}

	.image-wrapper:active .zoom-indicator[b-ci0belu6qm] {
		transform: scale(0.9);
	}

	.status-indicator[b-ci0belu6qm] {
		display: none;
	}

	.chat-name[b-ci0belu6qm] {
		font-size: 1.5rem;
		margin: 0 0 10px 0 !important;
		padding-left: 0;
		text-align: center; /* Centered beautifully under the image */
		width: 100%;
	}

	.left-panel .border-top[b-ci0belu6qm] {
		border-top: none !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
		width: 100% !important;
	}

	.left-panel .badge[b-ci0belu6qm] {
		font-size: 0.9rem !important;
		padding: 8px 12px !important;
		display: block;
		margin: 0 auto;
	}

	.right-panel[b-ci0belu6qm] {
		border-left: none;
		padding: 15px;
	}

	/* --- THE ULTIMATE MOBILE BUBBLE & IMAGE FIX --- */
	.chat-bubble-incoming[b-ci0belu6qm], .chat-bubble-outgoing[b-ci0belu6qm], .btn-reply[b-ci0belu6qm] {
		max-width: 95%;
		box-sizing: border-box !important; /* Stops the padding from expanding the bubble off-screen */
		min-width: 0 !important; /* The magic Flexbox rule that forces GIFs to shrink */
	}

	.message-text[b-ci0belu6qm] {
		width: 100%;
		min-width: 0;
		word-wrap: break-word; /* Safety net so long text doesn't break the bubble either */
	}

		.message-text[b-ci0belu6qm]  img {
			max-width: 100% !important;
			height: auto !important;
			max-height: 250px !important;
			object-fit: contain !important;
			border-radius: 8px;
			display: block; /* Already here, perfect */
			margin: 10px auto 5px auto !important; /* Forces centering on mobile */
		}
}

/* Animations */
.entry-fade[b-ci0belu6qm] {
	animation: chatSlideIn-b-ci0belu6qm 0.35s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes chatSlideIn-b-ci0belu6qm {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-pulse[b-ci0belu6qm] {
	animation: replyPulse-b-ci0belu6qm 2s infinite;
}

@keyframes replyPulse-b-ci0belu6qm {
	0% {
		box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5);
	}

	70% {
		box-shadow: 0 0 0 12px rgba(25, 135, 84, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
	}
}

/* .image-modal-overlay / .image-modal-content / .image-modal-close now live in
   wwwroot/app.css - shared with WeekTestPlay.razor and others instead of
   being copy-pasted per page. */
/* _content/MemoryGame.Web/Components/Pages/Memory/TestingPage/ChoiceToggle.razor.rz.scp.css */

.choice-card[b-vghmxhdlh4] {
	padding: 12px;
	margin: 8px 0;
	border-radius: 8px;
	border: 2px solid #ccc;
	cursor: pointer;
	transition: 0.2s ease;
}

	.choice-card:hover[b-vghmxhdlh4] {
		border-color: #888;
		background-color: #f7f7f7;
	}

	.choice-card.selected[b-vghmxhdlh4] {
		border-color: #007bff;
		background-color: #e7f1ff;
	}
/* _content/MemoryGame.Web/Components/Pages/Memory/TestingPage/TestComplete.razor.rz.scp.css */
/* =========================================
   1. MAIN CONTAINER
========================================= */
.completion-container[b-9j6qq5l6xb] {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 80vh;
	padding: 20px;
	background: radial-gradient(circle at center, var(--app-surface) 0%, var(--app-ground) 100%);
	border-radius: 20px;
}

/* =========================================
   2. SUCCESS CARD
========================================= */
.success-card[b-9j6qq5l6xb] {
	background: white;
	max-width: 500px;
	width: 100%;
	padding: 3rem 2rem;
	border-radius: 24px;
	box-shadow: 0 20px 40px rgba(var(--app-slate-rgb), 0.10);
	text-align: center;
	border: 1px solid var(--app-rule);
	animation: slideUpFade-b-9j6qq5l6xb 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =========================================
   3. ANIMATED TROPHY ICON
========================================= */
.icon-wrapper[b-9j6qq5l6xb] {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto 2rem auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.glow-ring[b-9j6qq5l6xb] {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--app-slate-tint);
	border-radius: 50%;
	animation: pulseGlow-b-9j6qq5l6xb 2s infinite alternate;
	z-index: 1;
}

.trophy-icon[b-9j6qq5l6xb] {
	font-size: 4.5rem;
	color: var(--app-accent);
	z-index: 2;
	text-shadow: 0 8px 15px rgba(var(--app-accent-rgb), 0.30);
	animation: popInBounce-b-9j6qq5l6xb 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* =========================================
   4. TYPOGRAPHY & STATS
========================================= */
.celebration-title[b-9j6qq5l6xb] {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--app-slate);
	margin-bottom: 0.5rem;
}

.celebration-text[b-9j6qq5l6xb] {
	font-size: 1.1rem;
	color: var(--app-muted);
	line-height: 1.6;
	margin-bottom: 2.5rem;
}

.stats-row[b-9j6qq5l6xb] {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.stat-box[b-9j6qq5l6xb] {
	background: var(--app-sunken);
	padding: 1.2rem 1.5rem;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 140px;
	border: 1px solid var(--app-rule);
}

.stat-icon[b-9j6qq5l6xb] {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.stat-number[b-9j6qq5l6xb] {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--app-slate);
}

.stat-label[b-9j6qq5l6xb] {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--app-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 4px;
}

/* =========================================
   5. BUTTONS
========================================= */
.action-buttons[b-9j6qq5l6xb] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.action-btn[b-9j6qq5l6xb] {
	padding: 0.8rem 1.5rem;
	font-weight: bold;
	font-size: 1.1rem;
	border-radius: 12px;
	transition: all 0.2s ease;
}

	.action-btn:hover[b-9j6qq5l6xb] {
		transform: translateY(-2px);
	}

/* =========================================
   6. ANIMATIONS
========================================= */
@keyframes slideUpFade-b-9j6qq5l6xb {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes popInBounce-b-9j6qq5l6xb {
	0% {
		opacity: 0;
		transform: scale(0.3) rotate(-15deg);
	}

	60% {
		transform: scale(1.1) rotate(5deg);
	}

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

@keyframes pulseGlow-b-9j6qq5l6xb {
	0% {
		transform: scale(0.8);
		opacity: 0.4;
	}

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

/* Mobile Adjustments */
@media (max-width: 500px) {
	.stats-row[b-9j6qq5l6xb] {
		flex-direction: column;
		gap: 1rem;
	}

	.stat-box[b-9j6qq5l6xb] {
		min-width: 100%;
	}

	.success-card[b-9j6qq5l6xb] {
		padding: 2rem 1.5rem;
	}
}
/* _content/MemoryGame.Web/Components/Pages/Memory/TestingPage/TestPlay.razor.rz.scp.css */
/* =========================================
   1. MAIN DESKTOP LAYOUT
========================================= */
.test-layout[b-izn53bs28c] {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 2rem;
	max-width: 1200px;
	margin: 0;
	padding: 20px;
	align-items: start;
}

/* --- LEFT PANEL (Sticky Header) --- */
.left-panel[b-izn53bs28c] {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	padding: 1.5rem;
}

/* -------------------------------------
   ADD THESE DESKTOP WRAPPER & BADGE RULES
-------------------------------------- */

/* DESKTOP IMAGE WRAPPER */
.image-wrapper[b-izn53bs28c] {
	position: relative;
	align-self: center; /* Centers it in the sidebar */
	margin-bottom: 20px;
	cursor: pointer;
	width: 100%;
	max-width: 250px; /* Locks the wrapper to perfectly fit the image */
}

/* DESKTOP IMAGE */
.header-image[b-izn53bs28c] {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	display: block;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* THE ZOOM BADGE */
.zoom-indicator[b-izn53bs28c] {
	position: absolute;
	bottom: -10px; /* Hangs off the bottom */
	right: -10px; /* Snaps to the right corner! */
	background-color: var(--app-accent);
	color: white;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	border: 2px solid #ffffff;
	transition: transform 0.2s ease;
}

.image-wrapper:active .zoom-indicator[b-izn53bs28c] {
	transform: scale(0.9);
}

/* ------------------------------------- */

.mobile-button-group[b-izn53bs28c] {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.submit-btn[b-izn53bs28c] {
	width: 100%;
}

.refresh-btn[b-izn53bs28c] {
	width: 100%;
}

.desktop-divider[b-izn53bs28c] {
	display: block;
	width: 100%;
}

/* --- RIGHT PANEL (Scrolling Content) --- */
.right-panel[b-izn53bs28c] {
	padding-top: 0;
	border-left: 2px solid #e0e0e0;
	padding-left: 2rem;
}

/* =========================================
   2. INTERACTIVE CHOICE CARDS & BADGES
========================================= */
.choice-list[b-izn53bs28c] {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

	.choice-list li[b-izn53bs28c] {
		background-color: #ffffff;
		border-radius: 10px;
		padding: 15px 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
		border: 1px solid #f0f0f0;
		transition: all 0.2s ease;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

		.choice-list li:hover[b-izn53bs28c] {
			transform: translateY(-3px);
			box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
			cursor: pointer;
		}

.choice-wrapper[b-izn53bs28c] {
	flex-grow: 1;
}

/* --- GRADED STATES --- */
.choice-list li.selected-card[b-izn53bs28c] {
	background-color: #eff6ff;
	border-color: var(--app-accent);
	box-shadow: 0 4px 15px rgba(var(--app-accent-rgb), 0.15);
}

.choice-list li.correct-card[b-izn53bs28c] {
	background-color: #f0fdf4;
	border-color: #22c55e;
	box-shadow: 0 4px 15px rgba(34, 197, 94, 0.15);
}

.choice-list li.wrong-card[b-izn53bs28c] {
	background-color: #fef2f2;
	border-color: #ef4444;
	box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}

/* --- BADGES --- */
.selected-badge[b-izn53bs28c], .correct-badge[b-izn53bs28c], .wrong-badge[b-izn53bs28c] {
	color: white;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: 15px;
	animation: popIn-b-izn53bs28c 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.selected-badge[b-izn53bs28c] {
	background-color: var(--app-accent);
}

.correct-badge[b-izn53bs28c] {
	background-color: #22c55e;
}

.wrong-badge[b-izn53bs28c] {
	background-color: #ef4444;
}

@keyframes popIn-b-izn53bs28c {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}

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

/* =========================================
   3. MOBILE RESPONSIVENESS (The Stacked Header)
========================================= */
@media (max-width: 768px) {
	.test-layout[b-izn53bs28c] {
		display: block; /* Turns off Grid so the header can stick and slide down */
		padding: 0;
	}

	.left-panel[b-izn53bs28c] {
		position: sticky;
		top: 0;
		z-index: 100;
		display: flex;
		flex-direction: column; /* Stack vertically */
		align-items: center;
		padding: 15px;
		background-color: #ffffff;
		border-radius: 0 0 15px 15px;
		border-bottom: 1px solid #ddd;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		width: 100%; /* Fixes the horizontal scrolling bug */
		box-sizing: border-box;
	}

	/* 1. NEW: The wrapper takes over the centering and spacing */
	.image-wrapper[b-izn53bs28c] {
		position: relative;
		align-self: center;
		margin-bottom: 15px; /* Moved this from the image to the wrapper */
		cursor: pointer;
	}

	/* 2. UPDATED: The image itself (just removed margin-bottom and align-self) */
	.header-image[b-izn53bs28c] {
		width: 120px;
		height: 120px;
		object-fit: contain;
		background-color: #ffffff;
		border-radius: 50%;
		border: 3px solid #f0f0f0;
		box-shadow: 0 4px 10px rgba(0,0,0,0.05);
		display: block; /* Removes weird spacing below images */
	}

	/* 3. NEW: The slick zoom badge */
	.zoom-indicator[b-izn53bs28c] {
		position: absolute;
		bottom: 0px;
		right: 0px;
		background-color: var(--app-accent); /* Nice bright blue */
		color: white;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		border: 2px solid #ffffff; /* Gives it a cut-out look against the image */
		transition: transform 0.2s ease;
	}

	/* When tapped, give the badge a little pop! */
	.image-wrapper:active .zoom-indicator[b-izn53bs28c] {
		transform: scale(0.9);
	}

	.left-panel h3[b-izn53bs28c] {
		display: none;
	}

	.mobile-button-group[b-izn53bs28c] {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Full-width Submit Button below the image */
	.submit-btn[b-izn53bs28c] {
		width: 100%;
		margin-top: 0;
		padding: 12px;
		font-size: 1.1rem;
		font-weight: bold;
		border-radius: 8px;
	}

	/* FLOATING TOP-RIGHT REFRESH ICON */
	.refresh-btn[b-izn53bs28c] {
		position: absolute; /* Pulls it out of the flow */
		top: 15px;
		right: 15px; /* Pins it to the top right of the panel */

		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		font-size: 1.3rem;
		color: #555;
		background-color: #f8f9fa;
		border: 1px solid #e0e0e0;
		border-radius: 50%;
		box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	}

	.desktop-divider[b-izn53bs28c] {
		display: none;
	}

	.right-panel[b-izn53bs28c] {
		border-left: none;
		padding: 15px;
	}
}
/* =========================================
   5. IMAGE MODAL / LIGHTBOX
========================================= */

/* Add a pointer cursor and subtle hover effect to the small profile image */
.header-image[b-izn53bs28c] {
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

	.header-image:hover[b-izn53bs28c] {
		transform: scale(1.05); /* Grows slightly when hovered */
		box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	}

/* .image-modal-overlay / .image-modal-content / .image-modal-close (and their
   fadeInModal/zoomInImage animations) now live in wwwroot/app.css - shared
   with WeekRemember.razor instead of being copy-pasted per page. */

/* =========================================
   6. NEXT ROUND GLOW ANIMATION
========================================= */

/* The "Ready to Move On" glowing button */
.pulse-next-btn[b-izn53bs28c] {
	background-color: #22c55e !important; /* Bright success green */
	color: white !important;
	border-color: #22c55e !important;
	transform: scale(1.05); /* Makes the button physically pop out */
	z-index: 10; /* Ensures the glow overlaps other elements */
	/* The continuous ripple animation */
	animation: pulse-green-b-izn53bs28c 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

	/* Ensure any icons inside turn white when it glows */
	.pulse-next-btn i[b-izn53bs28c] {
		color: white !important;
	}

/* The expanding glow effect */
@keyframes pulse-green-b-izn53bs28c {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	}

	70% {
		box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
}

/* =========================================
   7. INSTRUCTION BANNER
========================================= */
.instruction-banner[b-izn53bs28c] {
	background-color: #f0f9ff; /* Very soft, inviting blue */
	color: #0369a1; /* Deep, readable blue */
	border: 1px solid #bae6fd;
	padding: 15px 20px;
	border-radius: 12px;
	margin-bottom: 20px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
	animation: slideDownFade 0.4s ease-out forwards;
}

	.instruction-banner .icon[b-izn53bs28c] {
		font-size: 1.4rem;
		color: #0ea5e9;
		margin-top: -2px; /* Aligns the icon perfectly with the text */
	}

/* On mobile, shrink the text just a tiny bit to save space */
@media (max-width: 768px) {
	.instruction-banner[b-izn53bs28c] {
		font-size: 0.95rem;
		padding: 12px 15px;
	}
}
/* _content/MemoryGame.Web/Components/Shared/PhotoGallery.razor.rz.scp.css */
/* Moved here from Memorial.razor.css, which is where this grid was written first. Scoped CSS is
   per component, so the occasion's wall could not have reused it where it was. */

.gallery-view-grid[b-8nvbzrbmn0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    align-items: start; /* Keeps cards sized to their content instead of stretching */
}

.gallery-card[b-8nvbzrbmn0] {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .gallery-card:hover[b-8nvbzrbmn0] {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important;
    }

.gallery-media[b-8nvbzrbmn0] {
    max-height: 250px;
    object-fit: contain;
    background-color: #ffffff;
    width: 100%;
}

/* A button rather than a div, so it is reachable by keyboard and announced as something that does
   something - but it has to be stripped back to looking like the picture it wraps. */
.gallery-open[b-8nvbzrbmn0] {
    background: none;
    border: 0;
    padding: 0;
    cursor: zoom-in;
}

.gallery-zoom-icon[b-8nvbzrbmn0] {
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,0.6);
    color: white;
}

.gallery-embed[b-8nvbzrbmn0] {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

    .gallery-embed iframe[b-8nvbzrbmn0] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* =========================================
   FULL SCREEN
========================================= */
.gallery-modal-overlay[b-8nvbzrbmn0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.gallery-modal-content[b-8nvbzrbmn0] {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.gallery-modal-close[b-8nvbzrbmn0] {
    position: absolute;
    top: 20px;
    right: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

    .gallery-modal-close:hover[b-8nvbzrbmn0] {
        background: rgba(255, 255, 255, 0.4);
    }