/* /Games/AnimalClickGame.razor.rz.scp.css */
:root[b-4i77e8vmxr] {
	--game-bg-1: #f4fbff;
	--game-bg-2: #e9f9f0;
	--card-bg: #ffffff;
	--card-border: #a8e6cf;
	--card-shadow: 0 10px 22px rgba(17, 60, 46, 0.12);
	--title-color: #174236;
}

.game-container[b-4i77e8vmxr] {
	display: grid;
	grid-template-columns: minmax(180px, 32vw) 1fr;
	gap: 1.25rem;
	align-items: stretch;
	padding: 1rem;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--game-bg-1), var(--game-bg-2));
}

.daphine[b-4i77e8vmxr] {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0.5rem;
}

.daphine img[b-4i77e8vmxr] {
	width: min(100%, 320px);
	max-height: min(72vh, 460px);
	object-fit: contain;
}

.play-area[b-4i77e8vmxr] {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 1rem;
	min-height: 0;
}

.instruction[b-4i77e8vmxr] {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: rgba(255, 255, 255, 0.7);
	border: 2px solid #d0f2e2;
	border-radius: 14px;
	padding: 0.7rem 1rem;
}

.instruction h2[b-4i77e8vmxr] {
	margin: 0;
	color: var(--title-color);
	font-size: clamp(1.1rem, 1.4vw + 0.85rem, 2rem);
	font-weight: 800;
}

.cards[b-4i77e8vmxr] {
	display: grid;
	grid-template-columns: repeat(3, minmax(110px, 1fr));
	gap: 0.85rem;
	align-content: center;
}

.card[b-4i77e8vmxr] {
	border: 3px solid var(--card-border);
	background: var(--card-bg);
	border-radius: 16px;
	box-shadow: var(--card-shadow);
	padding: 0.55rem;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover[b-4i77e8vmxr] {
	transform: translateY(-3px);
	box-shadow: 0 14px 24px rgba(17, 60, 46, 0.17);
}

.card img[b-4i77e8vmxr] {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.shake[b-4i77e8vmxr] {
	animation: shake-b-4i77e8vmxr 0.35s linear;
}

@keyframes shake-b-4i77e8vmxr {
	0% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	50% { transform: translateX(6px); }
	75% { transform: translateX(-4px); }
	100% { transform: translateX(0); }
}

@media (max-width: 900px) {
	.game-container[b-4i77e8vmxr] {
		min-height: calc(100vh - 56px);
		grid-template-columns: minmax(130px, 34vw) 1fr;
		gap: 0.9rem;
		padding: 0.75rem;
	}

	.cards[b-4i77e8vmxr] {
		gap: 0.6rem;
	}

	.card[b-4i77e8vmxr] {
		padding: 0.4rem;
		border-radius: 12px;
	}
}

@media (max-width: 720px), (max-height: 520px) {
	.game-container[b-4i77e8vmxr] {
		min-height: calc(100vh - 48px);
		grid-template-columns: minmax(112px, 33vw) 1fr;
		gap: 0.6rem;
		padding: 0.5rem;
	}

	.instruction[b-4i77e8vmxr] {
		padding: 0.45rem 0.6rem;
	}

	.instruction h2[b-4i77e8vmxr] {
		font-size: clamp(0.95rem, 1.4vw + 0.5rem, 1.3rem);
	}

	.cards[b-4i77e8vmxr] {
		grid-template-columns: repeat(3, minmax(78px, 1fr));
		gap: 0.45rem;
	}

	.card[b-4i77e8vmxr] {
		border-width: 2px;
		padding: 0.3rem;
	}
}

@media (max-width: 520px) and (orientation: portrait) {
	.game-container[b-4i77e8vmxr] {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.daphine[b-4i77e8vmxr] {
		justify-content: center;
	}

	.daphine img[b-4i77e8vmxr] {
		max-height: 200px;
	}
}
/* /Games/ColorClickGame.razor.rz.scp.css */
:root[b-t4eg8vrb4z] {
    --colors-bg-1: #fff6ec;
    --colors-bg-2: #f6f4ff;
    --colors-card-bg: #ffffff;
    --colors-card-border: #ffcc8f;
    --colors-title: #5f3e16;
    --colors-shadow: 0 10px 22px rgba(80, 42, 8, 0.14);
}

.game-container[b-t4eg8vrb4z] {
    min-height: calc(100vh - 80px);
    display: grid;
    grid-template-columns: minmax(180px, 32vw) 1fr;
    gap: 1.25rem;
    align-items: stretch;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(140deg, var(--colors-bg-1), var(--colors-bg-2));
}

.daphine[b-t4eg8vrb4z] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0.5rem;
}

.daphine img[b-t4eg8vrb4z] {
    width: min(100%, 320px);
    max-height: min(72vh, 460px);
    object-fit: contain;
}

.play-area[b-t4eg8vrb4z] {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    min-height: 0;
}

.instruction[b-t4eg8vrb4z] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.78);
    border: 2px solid #ffe1bd;
    border-radius: 14px;
    padding: 0.7rem 1rem;
}

.instruction h2[b-t4eg8vrb4z] {
    margin: 0;
    color: var(--colors-title);
    font-size: clamp(1.1rem, 1.4vw + 0.85rem, 2rem);
    font-weight: 800;
}

.cards[b-t4eg8vrb4z] {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 0.85rem;
    align-content: center;
}

.card[b-t4eg8vrb4z] {
    border: 3px solid var(--colors-card-border);
    background: var(--colors-card-bg);
    border-radius: 16px;
    box-shadow: var(--colors-shadow);
    padding: 0.55rem;
    cursor: pointer;
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover[b-t4eg8vrb4z] {
    transform: translateY(-3px);
    box-shadow: 0 14px 24px rgba(80, 42, 8, 0.22);
}

.card img[b-t4eg8vrb4z] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.color-label[b-t4eg8vrb4z] {
    color: #6a3f0f;
    font-size: clamp(1.05rem, 1.1vw + 0.75rem, 1.45rem);
    font-weight: 800;
    line-height: 1;
}

.shake[b-t4eg8vrb4z] {
    animation: shake-b-t4eg8vrb4z 0.35s linear;
}

@keyframes shake-b-t4eg8vrb4z {
    0% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

@media (max-width: 900px) {
    .game-container[b-t4eg8vrb4z] {
        min-height: calc(100vh - 56px);
        grid-template-columns: minmax(130px, 34vw) 1fr;
        gap: 0.9rem;
        padding: 0.75rem;
    }

    .cards[b-t4eg8vrb4z] {
        gap: 0.6rem;
    }

    .card[b-t4eg8vrb4z] {
        padding: 0.4rem;
        border-radius: 12px;
    }
}

@media (max-width: 720px), (max-height: 520px) {
    .game-container[b-t4eg8vrb4z] {
        min-height: calc(100vh - 48px);
        grid-template-columns: minmax(112px, 33vw) 1fr;
        gap: 0.6rem;
        padding: 0.5rem;
    }

    .instruction[b-t4eg8vrb4z] {
        padding: 0.45rem 0.6rem;
    }

    .instruction h2[b-t4eg8vrb4z] {
        font-size: clamp(0.95rem, 1.4vw + 0.5rem, 1.3rem);
    }

    .cards[b-t4eg8vrb4z] {
        grid-template-columns: repeat(3, minmax(78px, 1fr));
        gap: 0.45rem;
    }

    .card[b-t4eg8vrb4z] {
        border-width: 2px;
        padding: 0.3rem;
    }
}

@media (max-width: 520px) and (orientation: portrait) {
    .game-container[b-t4eg8vrb4z] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .daphine[b-t4eg8vrb4z] {
        justify-content: center;
    }

    .daphine img[b-t4eg8vrb4z] {
        max-height: 200px;
    }
}
/* /Games/NumbersClickGame.razor.rz.scp.css */
:root[b-m9f0kcgxvl] {
    --numbers-bg-1: #f6fbff;
    --numbers-bg-2: #f1fff4;
    --numbers-card-bg: #ffffff;
    --numbers-card-border: #9fdbff;
    --numbers-title: #174262;
    --numbers-shadow: 0 10px 22px rgba(16, 57, 89, 0.14);
}

.game-container[b-m9f0kcgxvl] {
    min-height: calc(100vh - 80px);
    display: grid;
    grid-template-columns: minmax(180px, 32vw) 1fr;
    gap: 1.25rem;
    align-items: stretch;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(140deg, var(--numbers-bg-1), var(--numbers-bg-2));
}

.daphine[b-m9f0kcgxvl] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0.5rem;
}

.daphine img[b-m9f0kcgxvl] {
    width: min(100%, 320px);
    max-height: min(72vh, 460px);
    object-fit: contain;
}

.play-area[b-m9f0kcgxvl] {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    min-height: 0;
}

.instruction[b-m9f0kcgxvl] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.75);
    border: 2px solid #cdeaff;
    border-radius: 14px;
    padding: 0.7rem 1rem;
}

.instruction h2[b-m9f0kcgxvl] {
    margin: 0;
    color: var(--numbers-title);
    font-size: clamp(1.1rem, 1.4vw + 0.85rem, 2rem);
    font-weight: 800;
}

.cards[b-m9f0kcgxvl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 0.85rem;
    align-content: center;
}

.card[b-m9f0kcgxvl] {
    border: 3px solid var(--numbers-card-border);
    background: var(--numbers-card-bg);
    border-radius: 16px;
    box-shadow: var(--numbers-shadow);
    padding: 0.55rem;
    cursor: pointer;
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover[b-m9f0kcgxvl] {
    transform: translateY(-3px);
    box-shadow: 0 14px 24px rgba(16, 57, 89, 0.2);
}

.card img[b-m9f0kcgxvl] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.number-label[b-m9f0kcgxvl] {
    color: #0e4971;
    font-size: clamp(1.05rem, 1.1vw + 0.75rem, 1.5rem);
    font-weight: 800;
    line-height: 1;
}

.shake[b-m9f0kcgxvl] {
    animation: shake-b-m9f0kcgxvl 0.35s linear;
}

@keyframes shake-b-m9f0kcgxvl {
    0% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

@media (max-width: 900px) {
    .game-container[b-m9f0kcgxvl] {
        min-height: calc(100vh - 56px);
        grid-template-columns: minmax(130px, 34vw) 1fr;
        gap: 0.9rem;
        padding: 0.75rem;
    }

    .cards[b-m9f0kcgxvl] {
        gap: 0.6rem;
    }

    .card[b-m9f0kcgxvl] {
        padding: 0.4rem;
        border-radius: 12px;
    }
}

@media (max-width: 720px), (max-height: 520px) {
    .game-container[b-m9f0kcgxvl] {
        min-height: calc(100vh - 48px);
        grid-template-columns: minmax(112px, 33vw) 1fr;
        gap: 0.6rem;
        padding: 0.5rem;
    }

    .instruction[b-m9f0kcgxvl] {
        padding: 0.45rem 0.6rem;
    }

    .instruction h2[b-m9f0kcgxvl] {
        font-size: clamp(0.95rem, 1.4vw + 0.5rem, 1.3rem);
    }

    .cards[b-m9f0kcgxvl] {
        grid-template-columns: repeat(3, minmax(78px, 1fr));
        gap: 0.45rem;
    }

    .card[b-m9f0kcgxvl] {
        border-width: 2px;
        padding: 0.3rem;
    }
}

@media (max-width: 520px) and (orientation: portrait) {
    .game-container[b-m9f0kcgxvl] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .daphine[b-m9f0kcgxvl] {
        justify-content: center;
    }

    .daphine img[b-m9f0kcgxvl] {
        max-height: 200px;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-3tgam2od46] {
    min-height: 100vh;
    background:
    radial-gradient(circle at 8% 2%, #ffe8b4 0, #ffe8b4 170px, transparent 171px),
    radial-gradient(circle at 92% 18%, #b6f0ff 0, #b6f0ff 220px, transparent 221px),
    radial-gradient(circle at 50% 100%, #d2ffe7 0, #d2ffe7 260px, transparent 261px),
    linear-gradient(165deg, #edf9ff 0%, #e8f8f6 52%, #e4f5f0 100%);
}

.main-shell[b-3tgam2od46] {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 2.5rem;
}

.brand-header[b-3tgam2od46] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.8rem;
    padding-bottom: 1rem;
    animation: slide-fade-b-3tgam2od46 420ms ease-out both;
}

.brand-header a[b-3tgam2od46] {
    text-decoration: none;
}

.title[b-3tgam2od46] {
    margin: 0;
    font: 900 clamp(2.2rem, 7vw, 4rem)/1 "Trebuchet MS", "Gill Sans", sans-serif;
    color: #0b5967;
    text-shadow: 0 3px 0 #d8f7ff;
    text-decoration: none;
}

.content[b-3tgam2od46] {
    padding-top: 0.8rem;
    background: rgba(255, 255, 255, 0.44);
    border: 1px solid rgba(165, 217, 224, 0.55);
    border-radius: 20px;
    backdrop-filter: blur(2px);
    box-shadow: 0 18px 35px -30px rgba(13, 74, 84, 0.7);
}

.sound-toggle[b-3tgam2od46] {
    border: 2px solid #72bfd0;
    background: #ffffff;
    color: #0b5967;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    line-height: 1;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sound-toggle:hover[b-3tgam2od46] {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px -8px rgba(11, 89, 103, 0.7);
}

@keyframes slide-fade-b-3tgam2od46 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@media (max-width: 640.98px) {
    .brand-header[b-3tgam2od46] {
        padding-top: 1.25rem;
        padding-bottom: 0.75rem;
        gap: 0.7rem;
    }

    .sound-toggle[b-3tgam2od46] {
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
    }

    .content[b-3tgam2od46] {
        border-radius: 16px;
    }
}
/* /Pages/GameLibrary.razor.rz.scp.css */
.library-shell[b-o6am129kif] {
    animation: reveal-b-o6am129kif 500ms ease both;
}

.games-grid[b-o6am129kif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem;
}

.game-tile[b-o6am129kif] {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    border-radius: 26px;
    padding: 0.7rem;
    background: linear-gradient(135deg, #ffe38e 0%, #ffbe7f 100%);
    border: 2px solid #ffd16e;
    box-shadow: 0 18px 30px -20px rgba(123, 89, 23, 0.75);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.game-tile:hover[b-o6am129kif],
.game-tile:focus-visible[b-o6am129kif] {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 22px 36px -20px rgba(123, 89, 23, 0.88);
}

.game-image[b-o6am129kif] {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
    border: 2px solid #fff4ce;
    background: #eafff8;
}

.play-pill[b-o6am129kif] {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 52px;
    padding: 0.8rem 1.1rem;
    border-radius: 999px;
    border: 3px solid #ffffff;
    font: 900 1.04rem/1 "Trebuchet MS", "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: linear-gradient(130deg, #ff6d57 0%, #ff8f39 100%);
    box-shadow: 0 12px 22px -15px rgba(255, 87, 51, 0.9);
    z-index: 2;
}

.game-tile:hover .play-pill[b-o6am129kif],
.game-tile:focus-visible .play-pill[b-o6am129kif] {
    filter: brightness(1.06);
}

@keyframes reveal-b-o6am129kif {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@media (max-width: 640.98px) {
    .games-grid[b-o6am129kif] {
        grid-template-columns: 1fr;
    }

    .game-image[b-o6am129kif] {
        height: 220px;
    }

    .play-pill[b-o6am129kif] {
        min-width: 140px;
        min-height: 50px;
    }

}