.locked-game-page {
    --locked-radius: 1.15rem;
    --locked-border: rgba(44, 62, 80, 0.1);
    --locked-shadow: 0 0.45rem 1.4rem rgba(44, 62, 80, 0.09);
    max-width: 1220px;
}

.locked-game-page h1,
.locked-game-page h2,
.locked-game-page h3 {
    line-height: 1.15;
}

.locked-game-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.locked-game-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--lt-blue, #4a90e2);
    text-decoration: none;
}

.locked-game-breadcrumb__link:hover,
.locked-game-breadcrumb__link:focus-visible {
    text-decoration: underline;
}

.locked-game-breadcrumb__separator {
    flex: 0 0 auto;
    font-size: 0.7rem;
}

.locked-game-breadcrumb__current {
    overflow: hidden;
    text-overflow: ellipsis;
}

.locked-game-hero,
.locked-game-panel,
.locked-explore-panel,
.locked-related-section {
    border: 1px solid var(--locked-border);
    border-radius: var(--locked-radius);
    background: #fff;
    box-shadow: var(--locked-shadow);
}

.locked-game-hero {
    overflow: hidden;
}

.locked-game-hero__visual {
    position: relative;
    min-height: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e9f1f7;
}

.locked-game-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.locked-game-hero__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 300px;
    place-items: center;
    color: var(--lt-blue, #4a90e2);
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 207, 75, 0.3) 0 4rem, transparent 4.1rem),
        linear-gradient(135deg, #d8ebfb, #f8fbfd);
    font-size: 5rem;
}

.locked-game-hero__access-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border: 2px solid rgba(255, 255, 255, 0.76);
    border-radius: 999px;
    color: #614300;
    background: rgba(255, 210, 91, 0.95);
    box-shadow: 0 0.35rem 1rem rgba(44, 62, 80, 0.2);
    font-size: 0.85rem;
    font-weight: 900;
    backdrop-filter: blur(7px);
}

.locked-game-hero__content {
    padding: 1.25rem;
    background:
        radial-gradient(circle at 112% -8%, rgba(255, 207, 75, 0.22) 0 6rem, transparent 6.1rem),
        radial-gradient(circle at 2% 112%, rgba(82, 199, 150, 0.15) 0 6rem, transparent 6.1rem),
        linear-gradient(145deg, rgba(238, 247, 255, 0.97), #fff);
}

.locked-game-pill {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.locked-game-pill--theme {
    color: #744c07;
    background: #fff0c7;
}

.locked-game-pill--grade {
    color: #1d5fa8;
    background: #dceefa;
}

.locked-game-pill--duration {
    color: #24734d;
    background: #d9f5e5;
}

.locked-game-hero__title {
    font-size: clamp(1.65rem, 4vw, 2.45rem);
    font-weight: 900;
}

.locked-game-hero__excerpt {
    font-size: 1rem;
    line-height: 1.6;
}

.locked-game-hero__message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid rgba(74, 144, 226, 0.15);
    border-radius: 0.95rem;
    color: #27546f;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.89rem;
}

.locked-game-hero__message-icon {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 2.65rem;
    place-items: center;
    border-radius: 0.8rem;
    color: #7c5700;
    background: #ffe39a;
    font-size: 1.15rem;
}

.locked-game-panel,
.locked-explore-panel,
.locked-related-section {
    padding: 1rem;
}

.locked-game-section-heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.locked-game-section-heading__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    place-items: center;
    border-radius: 0.9rem;
    color: #1d5fa8;
    background: #dceefa;
    font-size: 1.2rem;
}

.locked-game-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.locked-game-skill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.75rem;
    color: #24734d;
    background: #e4f7ec;
    font-size: 0.85rem;
    font-weight: 800;
}

.locked-game-learning-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 0.95rem;
    color: #664700;
    background: #fff5d9;
}

.locked-game-learning-box > i {
    margin-top: 0.1rem;
    font-size: 1.25rem;
}

.locked-game-feature {
    display: flex;
    min-height: 142px;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.9rem;
    border: 1px solid rgba(44, 62, 80, 0.08);
    border-radius: 0.95rem;
    background: #f7fafc;
}

.locked-game-feature > i {
    margin-bottom: 0.6rem;
    color: var(--lt-blue, #4a90e2);
    font-size: 1.35rem;
}

.locked-game-feature strong {
    margin-bottom: 0.25rem;
    font-size: 0.92rem;
}

.locked-game-feature span {
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
    line-height: 1.45;
}

.locked-subscription-card {
    position: sticky;
    top: calc(var(--app-header-height, 0px) + 1rem);
    padding: 1.15rem;
    border: 2px solid rgba(255, 181, 35, 0.38);
    border-radius: var(--locked-radius);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 207, 75, 0.32) 0 5rem, transparent 5.1rem),
        linear-gradient(145deg, #fffaf0, #fff);
    box-shadow: 0 0.55rem 1.6rem rgba(122, 88, 0, 0.12);
}

.locked-subscription-card__icon {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 0.85rem;
    place-items: center;
    border-radius: 1rem;
    color: #704d00;
    background: #ffe39a;
    font-size: 1.35rem;
}

.locked-subscription-card__intro {
    color: #5f5a4d;
    line-height: 1.55;
}

.locked-subscription-card__benefits {
    display: grid;
    gap: 0.7rem;
}

.locked-subscription-card__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: #3f4e57;
    font-size: 0.9rem;
    font-weight: 700;
}

.locked-subscription-card__benefits i {
    width: 1.25rem;
    flex: 0 0 1.25rem;
    color: #2e9d68;
    text-align: center;
}

.locked-subscription-card__button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.95rem;
    color: #543900;
    font-weight: 900;
}

.locked-subscription-card__parent-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    line-height: 1.4;
}

.locked-explore-card {
    display: flex;
    min-height: 92px;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem;
    border: 2px solid transparent;
    border-radius: 1rem;
    color: var(--lt-dark, #2c3e50);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.locked-explore-card--theme {
    background: #fff6df;
}

.locked-explore-card--grade {
    background: #eaf5ff;
}

.locked-explore-card:hover,
.locked-explore-card:focus-visible {
    color: var(--lt-dark, #2c3e50);
    border-color: rgba(74, 144, 226, 0.35);
    box-shadow: 0 0.45rem 1rem rgba(44, 62, 80, 0.1);
    transform: translateY(-2px);
}

.locked-explore-card__icon {
    display: grid;
    width: 3.1rem;
    height: 3.1rem;
    flex: 0 0 3.1rem;
    place-items: center;
    border-radius: 0.9rem;
    color: #1d5fa8;
    background: rgba(255, 255, 255, 0.82);
    font-size: 1.25rem;
}

.locked-explore-card__content {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.2rem;
}

.locked-explore-card__content strong {
    font-size: 0.95rem;
}

.locked-explore-card__content small {
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

.locked-explore-card__arrow {
    flex: 0 0 auto;
    color: var(--lt-blue, #4a90e2);
}

.locked-related-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.locked-related-card {
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 0.95rem rgba(44, 62, 80, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.locked-related-card:hover,
.locked-related-card:focus-within {
    box-shadow: 0 0.65rem 1.35rem rgba(44, 62, 80, 0.14);
    transform: translateY(-3px);
}

.locked-related-card__link,
.locked-related-card__link:hover {
    color: inherit;
}

.locked-related-card__visual {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #edf2f6;
}

.locked-related-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
    transition: transform 220ms ease;
}

.locked-related-card:hover .locked-related-card__image {
    transform: scale(1.035);
}

.locked-related-card__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--lt-blue, #4a90e2);
    background: linear-gradient(135deg, #d6e9fa, #fcfcfc);
    font-size: 2.3rem;
}

.locked-related-card__lock {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    color: #624300;
    background: rgba(255, 218, 116, 0.95);
    box-shadow: 0 0.25rem 0.7rem rgba(44, 62, 80, 0.18);
}

.locked-related-card__theme {
    display: inline-flex;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    color: #744c07;
    background: #fff0c7;
    font-size: 0.7rem;
    font-weight: 900;
}

.locked-related-card__title {
    font-weight: 900;
}

.locked-related-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.locked-related-card__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--lt-blue, #4a90e2);
    font-size: 0.84rem;
    font-weight: 900;
}

@media (min-width: 992px) {
    .locked-game-hero__visual {
        aspect-ratio: auto;
    }

    .locked-game-hero__content {
        min-height: 390px;
        padding: 1.6rem;
    }

    .locked-game-panel,
    .locked-explore-panel,
    .locked-related-section {
        padding: 1.25rem;
    }
}

@media (max-width: 991.98px) {
    .locked-subscription-card {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .locked-game-page {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .locked-game-hero__content,
    .locked-game-panel,
    .locked-explore-panel,
    .locked-related-section,
    .locked-subscription-card {
        padding: 0.9rem;
    }

    .locked-game-hero__placeholder {
        min-height: 220px;
    }

    .locked-game-hero__access-badge {
        top: 0.65rem;
        left: 0.65rem;
    }

    .locked-related-section__header {
        align-items: stretch;
        flex-direction: column;
    }

    .locked-related-section__header .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .locked-explore-card,
    .locked-related-card,
    .locked-related-card__image {
        transition: none;
    }
}