/* /Components/AccountMenu.razor.rz.scp.css */
.account-menu-shell[b-0ejhq78u69] {
    position: relative;
    display: inline-flex;
    align-items: center;
    isolation: isolate;
    padding-bottom: 0.9rem;
    margin-bottom: -0.9rem;
}

.account-menu-shell[b-0ejhq78u69]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: min(18rem, calc(100vw - 1.5rem));
    height: 1rem;
    opacity: 0;
    pointer-events: none;
}

.account-trigger[b-0ejhq78u69] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.8rem;
    padding: 0.52rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.14));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-elevated) 82%, transparent);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        filter 0.2s ease;
}

.account-trigger:hover[b-0ejhq78u69],
.account-trigger:focus-visible[b-0ejhq78u69] {
    transform: translateY(-2px) scale(1.015);
    border-color: color-mix(in srgb, var(--accent) 48%, rgba(255, 255, 255, 0.22));
    box-shadow:
        0 20px 38px color-mix(in srgb, var(--accent) 24%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    filter: saturate(1.08);
    text-decoration: none;
}

.account-trigger--profile[b-0ejhq78u69],
.account-trigger--guest[b-0ejhq78u69] {
    cursor: pointer;
    gap: 0.48rem;
    min-height: 2.55rem;
    padding: 0.48rem 0.9rem;
    border-radius: 0.82rem;
    border-color: color-mix(in srgb, var(--border-color) 78%, var(--accent) 18%);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(22, 23, 34, 0.92);
    font-size: 0.84rem;
    font-weight: 650;
    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.account-trigger--profile .account-trigger-avatar[b-0ejhq78u69] {
    width: 1.72rem;
    height: 1.72rem;
    font-size: 0.72rem;
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent);
}

.account-trigger--profile .account-trigger-caret[b-0ejhq78u69] {
    margin-left: -0.06rem;
}

.account-trigger--profile:hover[b-0ejhq78u69],
.account-trigger--profile:focus-visible[b-0ejhq78u69],
.account-trigger--guest:hover[b-0ejhq78u69],
.account-trigger--guest:focus-visible[b-0ejhq78u69] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        color-mix(in srgb, rgba(22, 23, 34, 0.94) 82%, var(--accent) 18%);
    box-shadow:
        0 14px 24px rgba(0, 0, 0, 0.18),
        0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    filter: none;
}

.account-trigger--loading[b-0ejhq78u69] {
    opacity: 0.74;
    pointer-events: none;
}

.account-trigger-avatar[b-0ejhq78u69],
.account-dropdown-avatar[b-0ejhq78u69] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.account-trigger-avatar[b-0ejhq78u69] {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.76rem;
}

.account-trigger-label[b-0ejhq78u69] {
    white-space: nowrap;
}

.account-trigger-badge[b-0ejhq78u69] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.28rem;
    height: 1.28rem;
    padding: 0 0.38rem;
    border-radius: 999px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 74%, rgba(255, 255, 255, 0.14)), color-mix(in srgb, var(--accent-secondary) 66%, rgba(14, 15, 22, 0.78)));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    box-shadow:
        0 10px 18px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    animation: account-badge-snap-in-b-0ejhq78u69 0.56s cubic-bezier(0.24, 1.2, 0.32, 1) both;
}

.account-trigger-badge[b-0ejhq78u69]::after,
.account-dropdown-link-badge[b-0ejhq78u69]::after {
    content: "";
    position: absolute;
    inset: -0.18rem;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    opacity: 0;
    transform: scale(0.7);
    animation: account-badge-ring-b-0ejhq78u69 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.account-trigger-badge--topbar[b-0ejhq78u69] {
    margin-left: -0.08rem;
}

.account-trigger-caret[b-0ejhq78u69] {
    font-size: 0.72rem;
    color: var(--text-muted);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s ease;
}

.account-menu-shell.is-open .account-trigger-caret[b-0ejhq78u69] {
    transform: rotate(180deg) scale(1.08);
    color: var(--text-primary);
}

.account-dropdown[b-0ejhq78u69] {
    position: absolute;
    top: calc(100% + 0.28rem);
    right: 0;
    width: min(18rem, calc(100vw - 1.5rem));
    padding: 0.82rem;
    border-radius: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.08));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
        rgba(12, 14, 22, 0.96);
    box-shadow:
        0 26px 48px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    transform: translate3d(0, -0.78rem, 0) scale(0.985);
    transform-origin: top right;
    pointer-events: none;
    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.24s ease;
    filter: blur(4px);
}

.account-dropdown[b-0ejhq78u69]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 20%, transparent), transparent 44%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 32%);
    pointer-events: none;
}

.account-menu-shell.is-open .account-dropdown[b-0ejhq78u69] {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
    filter: blur(0);
}

.account-menu-shell.is-open[b-0ejhq78u69]::after {
    opacity: 1;
    pointer-events: auto;
}

.account-dropdown-header[b-0ejhq78u69] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.35rem 0.35rem 0.8rem;
}

.account-dropdown-avatar[b-0ejhq78u69] {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.account-dropdown-copy[b-0ejhq78u69] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
}

.account-dropdown-title[b-0ejhq78u69] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.account-dropdown-subtitle[b-0ejhq78u69] {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.account-dropdown-links[b-0ejhq78u69] {
    position: relative;
    display: grid;
    gap: 0.35rem;
}

.account-dropdown-link[b-0ejhq78u69] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    width: 100%;
    padding: 0.72rem 0.8rem;
    border-radius: 0.5rem 0.95rem 0.95rem 0.95rem;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    overflow: hidden;
    transition:
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
    cursor: pointer;
}

.account-dropdown-link[b-0ejhq78u69]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.18rem;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent-secondary) 70%, white));
    transform: scaleY(0.2);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.14s ease;
}

.account-dropdown-link:hover[b-0ejhq78u69],
.account-dropdown-link:focus-visible[b-0ejhq78u69] {
    transform: translateX(4px) scale(1.01);
    background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.03));
    border-color: color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.08));
    box-shadow: 0 12px 20px color-mix(in srgb, var(--accent) 12%, transparent);
    text-decoration: none;
}

.account-dropdown-link:hover[b-0ejhq78u69]::before,
.account-dropdown-link:focus-visible[b-0ejhq78u69]::before {
    transform: scaleY(1);
    opacity: 1;
}

.account-dropdown-link-label[b-0ejhq78u69] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.account-dropdown-link-trailing[b-0ejhq78u69] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.52rem;
    min-width: 0;
    flex-shrink: 0;
}

.account-dropdown-link-meta[b-0ejhq78u69] {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.account-dropdown-link-badge[b-0ejhq78u69] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.26rem;
    height: 1.26rem;
    padding: 0 0.36rem;
    border-radius: 999px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, rgba(255, 255, 255, 0.16)), color-mix(in srgb, var(--accent-secondary) 64%, rgba(12, 14, 22, 0.82)));
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    box-shadow:
        0 10px 18px color-mix(in srgb, var(--accent) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    animation: account-badge-snap-in-b-0ejhq78u69 0.56s cubic-bezier(0.24, 1.2, 0.32, 1) both;
}

.account-dropdown-link--danger .account-dropdown-link-label[b-0ejhq78u69] {
    color: #fda4af;
}

.account-dropdown-link--danger:hover[b-0ejhq78u69],
.account-dropdown-link--danger:focus-visible[b-0ejhq78u69] {
    background: rgba(251, 113, 133, 0.1);
    border-color: rgba(251, 113, 133, 0.18);
}

@keyframes account-badge-snap-in-b-0ejhq78u69 {
    0% {
        opacity: 0;
        transform: translate3d(0.36rem, -0.26rem, 0) scale(0.56) rotate(-12deg);
        filter: saturate(1.22) brightness(1.08);
    }

    58% {
        opacity: 1;
        transform: translate3d(-0.08rem, 0.05rem, 0) scale(1.16) rotate(4deg);
        filter: saturate(1.08) brightness(1.04);
    }

    78% {
        transform: translate3d(0.04rem, -0.03rem, 0) scale(0.95) rotate(-2deg);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        filter: none;
    }
}

@keyframes account-badge-ring-b-0ejhq78u69 {
    0% {
        opacity: 0.54;
        transform: scale(0.74);
    }

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

@media (max-width: 640px) {
    .account-menu-shell.is-authenticated[b-0ejhq78u69] {
        display: none;
    }

    .account-menu-shell[b-0ejhq78u69] {
        padding-bottom: 0.72rem;
        margin-bottom: -0.72rem;
    }

    .account-menu-shell[b-0ejhq78u69]::after {
        width: min(17rem, calc(100vw - 1.2rem));
        height: 0.8rem;
    }

    .account-trigger[b-0ejhq78u69] {
        min-height: 2.2rem;
        padding-inline: 0.68rem;
        font-size: 0.78rem;
    }

    .account-trigger-label[b-0ejhq78u69] {
        font-size: 0.82rem;
    }

    .account-trigger-badge[b-0ejhq78u69] {
        min-width: 1.18rem;
        height: 1.18rem;
        padding-inline: 0.34rem;
        font-size: 0.64rem;
    }

    .account-dropdown-link-trailing[b-0ejhq78u69] {
        gap: 0.44rem;
    }

    .account-dropdown-link-badge[b-0ejhq78u69] {
        min-width: 1.18rem;
        height: 1.18rem;
        padding-inline: 0.32rem;
        font-size: 0.62rem;
    }

    .account-dropdown[b-0ejhq78u69] {
        top: calc(100% + 0.22rem);
        width: min(17rem, calc(100vw - 1.2rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-trigger[b-0ejhq78u69],
    .account-trigger-caret[b-0ejhq78u69],
    .account-dropdown[b-0ejhq78u69],
    .account-dropdown-link[b-0ejhq78u69],
    .account-dropdown-link[b-0ejhq78u69]::before,
    .account-trigger-badge[b-0ejhq78u69],
    .account-trigger-badge[b-0ejhq78u69]::after,
    .account-dropdown-link-badge[b-0ejhq78u69],
    .account-dropdown-link-badge[b-0ejhq78u69]::after {
        transition: none;
        animation: none;
    }
}
/* /Components/AchievementToast.razor.rz.scp.css */
/* Container � fixed in the top-right viewport corner */

.ach-toast-container[b-zykmgwxgly] {
    position: fixed;
    top: calc(var(--topbar-height, 3.5rem) + 0.75rem);
    right: 1rem;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    pointer-events: none;
    max-width: min(400px, calc(100vw - 2rem));
}

/* Individual toast card */

.ach-toast[b-zykmgwxgly] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--accent-glow);
    border-radius: 0.85rem;
    background: rgba(15, 18, 30, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 0 24px var(--accent-glow),
        0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    pointer-events: auto;
    will-change: transform, opacity;
}

/* Accent glow bar on the left edge */

.ach-toast-glow[b-zykmgwxgly] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent-glow));
    border-radius: 3px 0 0 3px;
}

/* Icon */

.ach-toast-icon[b-zykmgwxgly] {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border-radius: 50%;
    background: var(--accent-subtle);
    border: 1.5px solid var(--accent-glow);
}

/* Body text */

.ach-toast-body[b-zykmgwxgly] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.ach-toast-label[b-zykmgwxgly] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    line-height: 1;
}

.ach-toast-name[b-zykmgwxgly] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}

.ach-toast-desc[b-zykmgwxgly] {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Dismiss button */

.ach-toast-dismiss[b-zykmgwxgly] {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 0;
}

.ach-toast-dismiss:hover[b-zykmgwxgly] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

/* Enter animation */

.ach-toast.entering[b-zykmgwxgly] {
    animation: ach-enter-b-zykmgwxgly 0.5s cubic-bezier(0.34, 1.8, 0.64, 1) both;
    animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes ach-enter-b-zykmgwxgly {
    0% {
        opacity: 0;
        transform: translateX(110%) scaleX(1.15) scaleY(0.88);
        filter: blur(5px);
    }
    50% {
        opacity: 1;
        transform: translateX(-6%) scaleX(0.97) scaleY(1.04);
        filter: blur(0);
    }
    72% {
        transform: translateX(2%) scaleX(1.01) scaleY(0.99);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

/* Icon pop after the card slides in */

.ach-toast.entering .ach-toast-icon[b-zykmgwxgly] {
    animation: ach-icon-pop-b-zykmgwxgly 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}

@keyframes ach-icon-pop-b-zykmgwxgly {
    0% {
        transform: scale(0.4) rotate(-12deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(4deg);
        opacity: 1;
    }
    72% {
        transform: scale(0.92) rotate(-1deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Glow pulse on the icon ring */

.ach-toast.entering .ach-toast-icon[b-zykmgwxgly] {
    box-shadow: 0 0 0 0 var(--accent-glow);
    animation:
        ach-icon-pop-b-zykmgwxgly 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both,
        ach-glow-pulse-b-zykmgwxgly 1.8s ease-in-out 0.5s 2;
}

@keyframes ach-glow-pulse-b-zykmgwxgly {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--accent-glow);
    }
    50% {
        box-shadow: 0 0 16px 4px var(--accent-glow);
    }
}

/* Exit animation */

.ach-toast.exiting[b-zykmgwxgly] {
    animation: ach-exit-b-zykmgwxgly 0.35s cubic-bezier(0.55, 0, 1, 0.45) both;
}

@keyframes ach-exit-b-zykmgwxgly {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    25% {
        transform: translateX(-4%) scaleX(0.94) scaleY(1.04);
    }
    100% {
        opacity: 0;
        transform: translateX(50%) scaleX(1.1) scaleY(0.9);
        filter: blur(3px);
    }
}

/* Responsive: mobile */

@media (max-width: 480px) {
    .ach-toast-container[b-zykmgwxgly] {
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
    }

    .ach-toast[b-zykmgwxgly] {
        padding: 0.75rem 0.85rem;
    }

    .ach-toast-icon[b-zykmgwxgly] {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.1rem;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .ach-toast.entering[b-zykmgwxgly],
    .ach-toast.exiting[b-zykmgwxgly],
    .ach-toast.entering .ach-toast-icon[b-zykmgwxgly] {
        animation-duration: 0.01ms !important;
    }
}
/* /Components/ArticleSocialHeader.razor.rz.scp.css */
.article-social-header[b-q7jdfvqlo4] {
    display: grid;
    justify-items: end;
    gap: 0.55rem;
}

.article-social-header-bar[b-q7jdfvqlo4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.article-social-header-vote-stack[b-q7jdfvqlo4] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.article-social-header-vote[b-q7jdfvqlo4] {
    position: relative;
    min-width: 4.5rem;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.58rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.16));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.04));
    color: var(--text-primary);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.article-social-header-vote:hover:not(:disabled)[b-q7jdfvqlo4] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, 0.2));
    background: color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.05));
}

.article-social-header-vote:disabled[b-q7jdfvqlo4] {
    cursor: default;
    opacity: 0.7;
}

.article-social-header-vote--active[b-q7jdfvqlo4] {
    border-color: color-mix(in srgb, var(--accent) 42%, white);
    background: color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.08));
}

.article-social-header-label[b-q7jdfvqlo4] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: color-mix(in srgb, var(--text-secondary) 86%, white);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.article-social-header-count[b-q7jdfvqlo4] {
    color: var(--text-primary);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.article-social-header-status[b-q7jdfvqlo4] {
    margin: 0;
    color: color-mix(in srgb, var(--text-muted) 92%, white);
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: right;
}

@media (max-width: 720px) {
    .article-social-header[b-q7jdfvqlo4],
    .article-social-header-bar[b-q7jdfvqlo4] {
        justify-items: start;
        justify-content: flex-start;
    }

    .article-social-header-status[b-q7jdfvqlo4] {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .article-social-header[b-q7jdfvqlo4] {
        gap: 0.34rem;
    }

    .article-social-header-bar[b-q7jdfvqlo4] {
        gap: 0.36rem;
    }

    .article-social-header-vote-stack[b-q7jdfvqlo4] {
        gap: 0.14rem;
    }

    .article-social-header-vote[b-q7jdfvqlo4] {
        min-width: 3.55rem;
        min-height: 1.86rem;
        padding: 0.3rem 0.42rem;
        border-radius: 0.62rem;
    }

    .article-social-header-label[b-q7jdfvqlo4] {
        font-size: 0.52rem;
        letter-spacing: 0.03em;
    }

    .article-social-header-count[b-q7jdfvqlo4] {
        font-size: 0.64rem;
    }

    .article-social-header-status[b-q7jdfvqlo4] {
        font-size: 0.68rem;
        line-height: 1.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-social-header-vote[b-q7jdfvqlo4] {
        transition: none;
    }
}
/* /Components/CommunityRichSourceEditor.razor.rz.scp.css */
.community-rich-editor[b-k7zn2vow4k] {
    position: relative;
    display: grid;
}

.community-rich-editor-surface[b-k7zn2vow4k] {
    width: 100%;
    min-height: 7.4rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.14));
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.65;
    box-sizing: border-box;
    overflow: auto;
    overflow-wrap: anywhere;
    resize: vertical;
    white-space: pre-wrap;
}

.community-rich-editor-surface:focus[b-k7zn2vow4k] {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 38%, white);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

.community-rich-editor-surface[data-rich-empty="true"][b-k7zn2vow4k]::before {
    content: attr(data-rich-placeholder);
    color: color-mix(in srgb, var(--text-muted) 88%, white);
    pointer-events: none;
}

.community-rich-editor-surface--summary[b-k7zn2vow4k] {
    min-height: 4.8rem;
}

.community-rich-editor-surface--body[b-k7zn2vow4k] {
    min-height: 26rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    line-height: 1.82;
    resize: none;
}

.community-rich-editor-surface--body:focus[b-k7zn2vow4k] {
    border-color: transparent;
    box-shadow: none;
}

.community-rich-editor-surface--document-summary[b-k7zn2vow4k],
.community-rich-editor-surface--document-body[b-k7zn2vow4k] {
    color: #2a2230;
}

.community-rich-editor-surface--document-summary[b-k7zn2vow4k] {
    min-height: 5.2rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    line-height: 1.72;
    resize: none;
}

.community-rich-editor-surface--document-summary:focus[b-k7zn2vow4k] {
    border-color: transparent;
    box-shadow: none;
}

.community-rich-editor-surface--document-summary[data-rich-empty="true"][b-k7zn2vow4k]::before,
.community-rich-editor-surface--document-body[data-rich-empty="true"][b-k7zn2vow4k]::before {
    color: rgba(73, 61, 84, 0.42);
}

.community-rich-editor-surface--document-body[b-k7zn2vow4k] {
    min-height: 28rem;
}

.community-rich-editor-surface > :first-child[b-k7zn2vow4k] {
    margin-top: 0;
}

.community-rich-editor-surface > :last-child[b-k7zn2vow4k] {
    margin-bottom: 0;
}

.community-rich-editor-surface div[b-k7zn2vow4k],
.community-rich-editor-surface p[b-k7zn2vow4k],
.community-rich-editor-surface h2[b-k7zn2vow4k] {
    margin: 0;
}

.community-rich-editor-surface div + div[b-k7zn2vow4k],
.community-rich-editor-surface div + p[b-k7zn2vow4k],
.community-rich-editor-surface div + h2[b-k7zn2vow4k],
.community-rich-editor-surface p + div[b-k7zn2vow4k],
.community-rich-editor-surface p + p[b-k7zn2vow4k],
.community-rich-editor-surface p + h2[b-k7zn2vow4k],
.community-rich-editor-surface h2 + div[b-k7zn2vow4k],
.community-rich-editor-surface h2 + p[b-k7zn2vow4k],
.community-rich-editor-surface h2 + h2[b-k7zn2vow4k],
.community-rich-editor-surface ul + div[b-k7zn2vow4k],
.community-rich-editor-surface ul + h2[b-k7zn2vow4k],
.community-rich-editor-surface ol + div[b-k7zn2vow4k],
.community-rich-editor-surface ol + h2[b-k7zn2vow4k],
.community-rich-editor-surface div + ul[b-k7zn2vow4k],
.community-rich-editor-surface div + ol[b-k7zn2vow4k],
.community-rich-editor-surface h2 + ul[b-k7zn2vow4k],
.community-rich-editor-surface h2 + ol[b-k7zn2vow4k] {
    margin-top: 0.55rem;
}

.community-rich-editor-surface ul[b-k7zn2vow4k],
.community-rich-editor-surface ol[b-k7zn2vow4k] {
    margin: 0.15rem 0 0.15rem 1.15rem;
    padding-left: 0.55rem;
}

.community-rich-editor-surface li + li[b-k7zn2vow4k] {
    margin-top: 0.18rem;
}

.community-rich-editor-surface h2[b-k7zn2vow4k] {
    color: var(--text-primary);
    font-size: 1.65rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.community-rich-editor-surface--body h2[b-k7zn2vow4k] {
    font-size: 1.85rem;
    line-height: 1.08;
}

.community-rich-editor-surface--document-body h2[b-k7zn2vow4k] {
    color: #1f1823;
}

.community-rich-source-input[b-k7zn2vow4k] {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
/* /Components/ContentCalloutCard.razor.rz.scp.css */
.content-callout-card[b-zi8pcjjcx4] {
    border-radius: 0.8rem;
    padding: 0.85rem 0.95rem;
}

.content-callout-card--accent[b-zi8pcjjcx4] {
    border: 1px solid var(--accent-glow);
    background: var(--accent-subtle);
}

.content-callout-card--default[b-zi8pcjjcx4] {
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

[b-zi8pcjjcx4] .content-callout-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.6;
}

[b-zi8pcjjcx4] .content-callout-copy strong {
    color: var(--text-primary);
}
/* /Components/ContentCommentsSection.razor.rz.scp.css */
.content-comments[b-dcrov36ko9] {
    display: grid;
    gap: 1rem;
    padding-top: 0.25rem;
}

.content-comments-head[b-dcrov36ko9] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.8rem;
}

.content-comments-title-wrap[b-dcrov36ko9] {
    display: grid;
    gap: 0.2rem;
}

.content-comments-kicker[b-dcrov36ko9] {
    color: color-mix(in srgb, var(--accent) 46%, white);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.content-comments-title-wrap h2[b-dcrov36ko9] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.55rem, 2.9vw, 2rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.content-comments-sort[b-dcrov36ko9] {
    display: grid;
    gap: 0.32rem;
    justify-items: end;
}

.content-comments-sort-label[b-dcrov36ko9] {
    color: color-mix(in srgb, var(--text-secondary) 88%, white);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.content-comments-sort-menu[b-dcrov36ko9] {
    position: relative;
    display: inline-flex;
    min-width: 11rem;
    z-index: 3;
}

.content-comments-sort-trigger[b-dcrov36ko9] {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.6rem 2.55rem 0.6rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.16));
    border-radius: 0.95rem;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.05)),
            color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.02)));
    color: var(--text-primary);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    text-align: left;
    box-shadow: 0 6px 16px rgba(18, 6, 28, 0.12);
}

.content-comments-sort-trigger:hover:not(:disabled)[b-dcrov36ko9] {
    border-color: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.2));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.06)),
            color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.03)));
}

.content-comments-sort-trigger:focus-visible[b-dcrov36ko9] {
    outline: 2px solid color-mix(in srgb, var(--accent) 62%, white);
    outline-offset: 0.18rem;
}

.content-comments-sort-trigger:disabled[b-dcrov36ko9] {
    cursor: default;
    opacity: 0.7;
}

.content-comments-sort-options[b-dcrov36ko9] {
    position: absolute;
    z-index: 2;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 100%;
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.16));
    border-radius: 1rem;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.05)),
            color-mix(in srgb, var(--accent) 6%, rgba(255, 255, 255, 0.02))),
        color-mix(in srgb, var(--bg-surface) 94%, transparent);
    box-shadow: 0 18px 36px rgba(8, 6, 18, 0.32);
}

.content-comments-sort-option[b-dcrov36ko9] {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: color-mix(in srgb, var(--text-secondary) 92%, white);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.content-comments-sort-option:hover[b-dcrov36ko9] {
    background: color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.05));
    color: var(--text-primary);
}

.content-comments-sort-option--active[b-dcrov36ko9] {
    background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.06));
    color: var(--text-primary);
}

.content-comments-sort-icon[b-dcrov36ko9] {
    width: 0.95rem;
    height: 0.95rem;
    stroke: color-mix(in srgb, var(--text-secondary) 88%, white);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.content-comments-sort-backdrop[b-dcrov36ko9] {
    position: fixed;
    inset: 0;
    z-index: 1;
    border: 0;
    padding: 0;
    background: transparent;
}

.content-comments-sign-in[b-dcrov36ko9],
.content-comments-item[b-dcrov36ko9] {
    display: grid;
    gap: 0.7rem;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.14));
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.03));
}

.content-comments-compose[b-dcrov36ko9] {
    display: grid;
    gap: 0.6rem;
}

.content-comments-compose-box[b-dcrov36ko9] {
    width: 100%;
    min-height: 6.6rem;
    resize: vertical;
    padding: 0.88rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.16));
    border-radius: 1rem;
    background: rgba(8, 8, 16, 0.52);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.65;
}

.content-comments-compose-box:focus-visible[b-dcrov36ko9] {
    outline: 2px solid color-mix(in srgb, var(--accent) 62%, white);
    outline-offset: 0.18rem;
}

.content-comments-compose-foot[b-dcrov36ko9],
.content-comments-item-head[b-dcrov36ko9],
.content-comments-item-author[b-dcrov36ko9],
.content-comments-more[b-dcrov36ko9] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.content-comments-compose-foot[b-dcrov36ko9] {
    justify-content: space-between;
    gap: 0.7rem;
}

.content-comments-compose-count[b-dcrov36ko9] {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.content-comments-compose-submit[b-dcrov36ko9],
.content-comments-sign-in-link[b-dcrov36ko9],
.content-comments-remove[b-dcrov36ko9],
.content-comments-like[b-dcrov36ko9],
.content-comments-more-button[b-dcrov36ko9] {
    min-height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 0.92rem;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.16));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.05));
    color: var(--text-primary);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.content-comments-compose-submit[b-dcrov36ko9],
.content-comments-remove[b-dcrov36ko9],
.content-comments-like[b-dcrov36ko9],
.content-comments-more-button[b-dcrov36ko9] {
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.content-comments-compose-submit:hover:not(:disabled)[b-dcrov36ko9],
.content-comments-remove:hover:not(:disabled)[b-dcrov36ko9],
.content-comments-like:hover:not(:disabled)[b-dcrov36ko9],
.content-comments-more-button:hover:not(:disabled)[b-dcrov36ko9] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.18));
    background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.06));
}

.content-comments-compose-submit:disabled[b-dcrov36ko9],
.content-comments-remove:disabled[b-dcrov36ko9],
.content-comments-like:disabled[b-dcrov36ko9],
.content-comments-more-button:disabled[b-dcrov36ko9] {
    cursor: default;
    opacity: 0.72;
}

.content-comments-sign-in p[b-dcrov36ko9],
.content-comments-body[b-dcrov36ko9],
.content-comments-feedback[b-dcrov36ko9],
.content-comments-empty[b-dcrov36ko9] {
    margin: 0;
    color: color-mix(in srgb, var(--text-secondary) 90%, white);
    line-height: 1.75;
}

.content-comments-feedback--error[b-dcrov36ko9] {
    color: color-mix(in srgb, #ff9c9c 88%, white);
}

.content-comments-list[b-dcrov36ko9] {
    display: grid;
    gap: 0.7rem;
}

[b-dcrov36ko9] .content-comments-avatar-trigger {
    border-radius: 50%;
}

.content-comments-avatar[b-dcrov36ko9] {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.18));
    object-fit: cover;
    overflow: hidden;
    flex: 0 0 auto;
}

.content-comments-avatar--placeholder[b-dcrov36ko9] {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, white), color-mix(in srgb, var(--accent-secondary) 68%, var(--accent)));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
}

.content-comments-item-copy[b-dcrov36ko9] {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.content-comments-item-copy strong[b-dcrov36ko9] {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.content-comments-item-copy span[b-dcrov36ko9] {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.content-comments-item-head[b-dcrov36ko9] {
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.content-comments-item-actions[b-dcrov36ko9] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.content-comments-remove[b-dcrov36ko9] {
    min-height: 2.2rem;
    padding: 0.4rem 0.68rem 0.38rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.content-comments-like-stack[b-dcrov36ko9] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    flex: 0 0 auto;
}

.content-comments-like[b-dcrov36ko9] {
    min-width: 3.55rem;
    min-height: 2.2rem;
    padding: 0.4rem 0.62rem 0.38rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.content-comments-like-label[b-dcrov36ko9] {
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.content-comments-like-count[b-dcrov36ko9] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
}

.content-comments-like--active[b-dcrov36ko9] {
    border-color: color-mix(in srgb, var(--accent) 40%, white);
    background: color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.08));
}

.content-comments-body[b-dcrov36ko9] {
    white-space: pre-wrap;
    font-size: 0.98rem;
    line-height: 1.72;
}

@media (max-width: 720px) {
    .content-comments-head[b-dcrov36ko9],
    .content-comments-item-head[b-dcrov36ko9],
    .content-comments-compose-foot[b-dcrov36ko9] {
        flex-direction: column;
        align-items: stretch;
    }

    .content-comments-sort[b-dcrov36ko9] {
        justify-items: stretch;
    }

    .content-comments-sort-menu[b-dcrov36ko9],
    .content-comments-compose-submit[b-dcrov36ko9],
    .content-comments-sign-in-link[b-dcrov36ko9],
    .content-comments-item-actions[b-dcrov36ko9],
    .content-comments-remove[b-dcrov36ko9],
    .content-comments-like-stack[b-dcrov36ko9],
    .content-comments-like[b-dcrov36ko9],
    .content-comments-more-button[b-dcrov36ko9] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-comments-sort-option[b-dcrov36ko9],
    .content-comments-compose-submit[b-dcrov36ko9],
    .content-comments-remove[b-dcrov36ko9],
    .content-comments-like[b-dcrov36ko9],
    .content-comments-more-button[b-dcrov36ko9] {
        transition: none;
    }
}
/* /Components/ContentPageFrame.razor.rz.scp.css */
.content-page[b-mymclu66r2] {
    width: min(100%, var(--content-page-max-width, 54rem));
    margin: 0 auto;
    padding: 0 1rem 3rem;
    display: grid;
    gap: 1rem;
}

.content-page--document[b-mymclu66r2] {
    --content-page-max-width: 54rem;
}

.content-page--editorial[b-mymclu66r2] {
    --content-page-max-width: 62rem;
}

.content-page-hero[b-mymclu66r2] {
    display: grid;
    gap: 0.8rem;
}

.content-page--document .content-page-hero[b-mymclu66r2] {
    justify-items: center;
    text-align: center;
    margin-bottom: 0.15rem;
}

.content-page--editorial .content-page-hero[b-mymclu66r2],
.content-page--editorial .content-page-footer[b-mymclu66r2] {
    border: 1px solid var(--border-color);
    border-radius: 1.05rem;
    background:
        linear-gradient(180deg, rgba(18, 20, 32, 0.97) 0%, rgba(11, 13, 22, 0.99) 100%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.content-page--editorial .content-page-hero[b-mymclu66r2],
.content-page--editorial .content-page-footer[b-mymclu66r2] {
    padding: 1.15rem 1.2rem;
}

.content-page-copy[b-mymclu66r2] {
    display: grid;
    gap: 0.45rem;
}

.content-page--document .content-page-copy[b-mymclu66r2] {
    justify-items: center;
}

.content-page-kicker[b-mymclu66r2] {
    display: inline-flex;
    width: fit-content;
    padding: 0.32rem 0.68rem;
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.content-page--editorial .content-page-kicker[b-mymclu66r2] {
    padding: 0;
    border-radius: 0;
    background: none;
    color: color-mix(in srgb, var(--accent) 72%, white);
}

.content-page-title[b-mymclu66r2] {
    margin: 0;
    color: var(--text-primary);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.content-page--document .content-page-title[b-mymclu66r2] {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}

.content-page--editorial .content-page-title[b-mymclu66r2] {
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    letter-spacing: -0.05em;
}

.content-page-intro[b-mymclu66r2],
.content-page-meta[b-mymclu66r2] {
    margin: 0;
}

.content-page-intro[b-mymclu66r2] {
    color: var(--text-secondary);
    line-height: 1.68;
}

.content-page--document .content-page-intro[b-mymclu66r2] {
    font-size: 0.95rem;
}

.content-page--editorial .content-page-intro[b-mymclu66r2] {
    max-width: 52ch;
    font-size: 0.96rem;
}

.content-page-meta[b-mymclu66r2] {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.content-page-back[b-mymclu66r2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    min-height: 2.15rem;
    padding: 0.45rem 0.78rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.02));
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.content-page-back:hover[b-mymclu66r2],
.content-page-back:focus-visible[b-mymclu66r2] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 42%, white);
    background: color-mix(in srgb, var(--accent) 15%, rgba(255, 255, 255, 0.02));
    outline: none;
}

.content-page-actions[b-mymclu66r2],
.content-page-inset[b-mymclu66r2],
.content-page-body[b-mymclu66r2],
.content-page-footer[b-mymclu66r2] {
    width: 100%;
}

.content-page-actions[b-mymclu66r2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.content-page-body[b-mymclu66r2] {
    display: grid;
    gap: 1rem;
}

.content-page-footer[b-mymclu66r2] {
    display: grid;
    gap: 0.8rem;
}

[b-mymclu66r2] .content-frame-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

[b-mymclu66r2] .content-frame-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.45rem 0.78rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.02));
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

[b-mymclu66r2] .content-frame-link:hover,
[b-mymclu66r2] .content-frame-link:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 42%, white);
    background: color-mix(in srgb, var(--accent) 15%, rgba(255, 255, 255, 0.02));
    outline: none;
}

[b-mymclu66r2] .content-frame-link--ghost {
    background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 760px) {
    .content-page[b-mymclu66r2] {
        padding: 0 0.8rem 2.4rem;
    }

    .content-page--editorial .content-page-hero[b-mymclu66r2],
    .content-page--editorial .content-page-footer[b-mymclu66r2] {
        padding: 0.95rem;
    }
}

@media (max-width: 640px) {
    .content-page-actions[b-mymclu66r2],
    [b-mymclu66r2] .content-frame-link-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-page-back[b-mymclu66r2],
    [b-mymclu66r2] .content-frame-link {
        transition: none;
    }
}
/* /Components/ContentSectionCard.razor.rz.scp.css */
.content-section-card[b-1d90hzngv5] {
    border: 1.5px solid var(--border-color);
    border-radius: 0.95rem;
    background: var(--bg-surface);
    padding: 1rem 1.1rem;
    display: grid;
    gap: 0.6rem;
}

.content-section-card--accent[b-1d90hzngv5] {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 9%, rgba(255, 255, 255, 0.02));
}

.content-section-card-head[b-1d90hzngv5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.content-section-card-copy[b-1d90hzngv5] {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
}

.content-section-card-eyebrow[b-1d90hzngv5] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.66rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--accent) 78%, white);
}

.content-section-card-title[b-1d90hzngv5] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.08rem;
}

.content-section-card-actions[b-1d90hzngv5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-end;
}

[b-1d90hzngv5] .content-section-heading {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 700;
}

[b-1d90hzngv5] .content-display-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

[b-1d90hzngv5] .content-section-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

[b-1d90hzngv5] .content-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.66rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--accent) 78%, white);
}

[b-1d90hzngv5] .content-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

[b-1d90hzngv5] .content-copy {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.65;
}

[b-1d90hzngv5] .content-copy--muted {
    color: var(--text-secondary);
}

[b-1d90hzngv5] .content-copy--small {
    font-size: 0.82rem;
    color: var(--text-muted);
}

[b-1d90hzngv5] .content-copy strong {
    color: var(--text-primary);
}

[b-1d90hzngv5] .content-list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text-primary);
    display: grid;
    gap: 0.35rem;
    font-size: 0.88rem;
    line-height: 1.6;
}

[b-1d90hzngv5] .content-inline-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent-glow);
    padding-bottom: 0.04rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

[b-1d90hzngv5] .content-inline-link:hover,
[b-1d90hzngv5] .content-inline-link:focus-visible {
    color: var(--text-primary);
    border-color: var(--accent);
    outline: none;
}

[b-1d90hzngv5] .content-inline-link--prominent {
    display: inline-block;
    width: fit-content;
    font-size: 1.02rem;
    font-weight: 600;
    word-break: break-all;
}
/* /Components/DailyQuests.razor.rz.scp.css */
/* ?? Daily Quests panel ??????????????????????????? */

.dq-panel[b-duppnn1mk6] {
    border: 1.5px solid var(--border-color);
    border-radius: 0.85rem;
    background: var(--bg-surface);
    padding: 1rem 1.15rem 1.15rem;
}

.dq-heading[b-duppnn1mk6] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.dq-heading-icon[b-duppnn1mk6] {
    font-size: 1rem;
    line-height: 1;
}

.dq-heading-count[b-duppnn1mk6] {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ?? Quest list ???????????????????????????????????? */

.dq-list[b-duppnn1mk6] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.dq-item[b-duppnn1mk6] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.6rem;
    background: var(--bg-elevated);
    transition: opacity 0.2s ease, background 0.2s ease;
}

.dq-item.dq-completed[b-duppnn1mk6] {
    opacity: 0.65;
    background: var(--success-subtle);
}

.dq-item-icon[b-duppnn1mk6] {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.dq-item-body[b-duppnn1mk6] {
    flex: 1;
    min-width: 0;
}

.dq-item-top[b-duppnn1mk6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.dq-item-title[b-duppnn1mk6] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dq-item-progress-text[b-duppnn1mk6] {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.dq-item-desc[b-duppnn1mk6] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0.15rem 0 0.45rem;
}

/* ?? Progress bar ?????????????????????????????????? */

.dq-bar[b-duppnn1mk6] {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-body);
    overflow: hidden;
}

.dq-bar-fill[b-duppnn1mk6] {
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    transition: width 0.4s ease;
}

.dq-bar-fill.dq-bar-done[b-duppnn1mk6] {
    background: var(--success);
}

/* ?? Completed check ??????????????????????????????? */

.dq-check[b-duppnn1mk6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

/* ?? All done message ?????????????????????????????? */

.dq-all-done[b-duppnn1mk6] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--success);
    margin: 0.75rem 0 0;
}
/* /Components/DailyStreakCelebration.razor.rz.scp.css */
.daily-streak-celebration[b-kxh9tbqgwn] {
    position: fixed;
    inset: 0;
    z-index: 8950;
    display: grid;
    place-items: center;
    padding: 1rem;
    pointer-events: none;
    overflow: hidden;
    background: rgba(3, 5, 12, 0.18);
    contain: layout paint style;
    isolation: isolate;
    animation: daily-streak-shell-b-kxh9tbqgwn 3.05s ease both;
}

.daily-streak-celebration__burst[b-kxh9tbqgwn] {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.58rem;
    max-width: calc(100vw - 2rem);
    color: #fff;
    line-height: 1;
    transform-origin: 50% 58%;
    animation: daily-streak-burst-b-kxh9tbqgwn 3.05s cubic-bezier(0.22, 1, 0.36, 1) both;
    --daily-streak-flight-x-1: 2vw;
    --daily-streak-flight-y-1: -10vh;
    --daily-streak-flight-r-1: 22deg;
    --daily-streak-flight-x-2: 4.5vw;
    --daily-streak-flight-y-2: -20vh;
    --daily-streak-flight-r-2: 45deg;
    --daily-streak-flight-x-3: 6.8vw;
    --daily-streak-flight-y-3: -29vh;
    --daily-streak-flight-r-3: 72deg;
    --daily-streak-flight-x-4: 9vw;
    --daily-streak-flight-y-4: -36vh;
    --daily-streak-flight-r-4: 101deg;
    --daily-streak-flight-x-5: 11.1vw;
    --daily-streak-flight-y-5: -41vh;
    --daily-streak-flight-r-5: 133deg;
    --daily-streak-flight-x-6: 13.2vw;
    --daily-streak-flight-y-6: -43vh;
    --daily-streak-flight-r-6: 168deg;
    --daily-streak-flight-x-7: 15.2vw;
    --daily-streak-flight-y-7: -40vh;
    --daily-streak-flight-r-7: 204deg;
    --daily-streak-flight-x-8: 17.3vw;
    --daily-streak-flight-y-8: -31vh;
    --daily-streak-flight-r-8: 245deg;
    --daily-streak-flight-x-9: 19.2vw;
    --daily-streak-flight-y-9: -16vh;
    --daily-streak-flight-r-9: 290deg;
    --daily-streak-flight-x-10: 21.2vw;
    --daily-streak-flight-y-10: 8vh;
    --daily-streak-flight-r-10: 340deg;
    --daily-streak-flight-x-11: 23vw;
    --daily-streak-flight-y-11: 43vh;
    --daily-streak-flight-r-11: 390deg;
    --daily-streak-flight-x-12: 24vw;
    --daily-streak-flight-y-12: 78vh;
    --daily-streak-flight-r-12: 430deg;
}

.daily-streak-celebration__number-slot[b-kxh9tbqgwn] {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    min-width: 3.6rem;
    height: 4.1rem;
}

.daily-streak-celebration__number[b-kxh9tbqgwn] {
    grid-area: 1 / 1;
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 4rem;
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: 0;
    text-shadow:
        0 0 18px rgba(255, 255, 255, 0.42),
        0 8px 26px rgba(0, 0, 0, 0.52);
    transform-origin: 50% 70%;
}

.daily-streak-celebration__number-flight[b-kxh9tbqgwn] {
    grid-area: 1 / 1;
    display: inline-grid;
    place-items: center;
    transform-origin: 50% 70%;
}

.daily-streak-celebration__number-flight--old[b-kxh9tbqgwn] {
    animation: daily-streak-old-flight-b-kxh9tbqgwn 2.58s linear both;
}

.daily-streak-celebration__number--old[b-kxh9tbqgwn] {
    animation: daily-streak-old-charge-b-kxh9tbqgwn 2.16s linear both;
}

.daily-streak-celebration__number--new[b-kxh9tbqgwn] {
    opacity: 0;
    animation: daily-streak-new-number-b-kxh9tbqgwn 0.56s cubic-bezier(0.16, 1.7, 0.32, 1) 1.1s both;
}

.daily-streak-celebration__text[b-kxh9tbqgwn] {
    position: relative;
    z-index: 1;
    min-width: 9.2rem;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0;
    text-transform: lowercase;
    white-space: nowrap;
    text-shadow:
        0 0 16px rgba(255, 255, 255, 0.28),
        0 8px 26px rgba(0, 0, 0, 0.52);
}

@keyframes daily-streak-shell-b-kxh9tbqgwn {
    0% {
        opacity: 0;
    }

    8%, 86% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes daily-streak-burst-b-kxh9tbqgwn {
    0% {
        opacity: 0;
        transform: translateY(18px) scaleX(1.08) scaleY(0.82);
    }

    9% {
        opacity: 1;
        transform: translateY(-4px) scaleX(0.96) scaleY(1.08);
    }

    16%, 78% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }
}

@keyframes daily-streak-old-charge-b-kxh9tbqgwn {
    0% {
        transform: rotate(0deg) skewX(0deg) scale(0.86);
    }

    5% {
        transform: rotate(0.7deg) skewX(0deg) scaleX(1.03) scaleY(0.97);
    }

    10% {
        transform: rotate(-1.2deg) skewX(-0.6deg) scaleX(0.98) scaleY(1.04);
    }

    15% {
        transform: rotate(2.4deg) skewX(1.2deg) scaleX(1.06) scaleY(0.94);
    }

    20% {
        transform: rotate(-3.9deg) skewX(-2.4deg) scaleX(0.92) scaleY(1.12);
    }

    25% {
        transform: rotate(5.8deg) skewX(3.8deg) scaleX(1.12) scaleY(0.9);
    }

    30% {
        transform: rotate(-8.6deg) skewX(-5.8deg) scaleX(0.86) scaleY(1.18);
    }

    34% {
        transform: rotate(11.5deg) skewX(7.8deg) scaleX(1.22) scaleY(0.82);
    }

    38% {
        transform: rotate(-14.8deg) skewX(-10deg) scaleX(0.75) scaleY(1.3);
    }

    41% {
        transform: rotate(17.6deg) skewX(12deg) scaleX(1.32) scaleY(0.74);
    }

    44% {
        transform: rotate(-21deg) skewX(-14deg) scaleX(0.68) scaleY(1.42);
    }

    47% {
        transform: rotate(23.5deg) skewX(15.5deg) scaleX(1.4) scaleY(0.7);
    }

    50% {
        transform: rotate(-18deg) skewX(-13deg) scaleX(0.72) scaleY(1.36);
    }

    52% {
        transform: rotate(0deg) skewX(0deg) scaleX(0.66) scaleY(1.48);
    }

    58% {
        transform: rotate(0deg) skewX(0deg) scaleX(0.86) scaleY(1.14);
    }

    74% {
        transform: rotate(0deg) skewX(0deg) scale(0.96);
    }

    100% {
        transform: rotate(0deg) skewX(0deg) scale(0.88);
    }
}

@keyframes daily-streak-old-flight-b-kxh9tbqgwn {
    0%, 42.5% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    45.5% {
        opacity: 1;
        transform: translate(var(--daily-streak-flight-x-1), var(--daily-streak-flight-y-1)) rotate(var(--daily-streak-flight-r-1)) scaleX(0.78) scaleY(1.26);
    }

    49.5% {
        opacity: 1;
        transform: translate(var(--daily-streak-flight-x-2), var(--daily-streak-flight-y-2)) rotate(var(--daily-streak-flight-r-2)) scale(0.98);
    }

    54% {
        opacity: 1;
        transform: translate(var(--daily-streak-flight-x-3), var(--daily-streak-flight-y-3)) rotate(var(--daily-streak-flight-r-3)) scale(1);
    }

    59.5% {
        opacity: 1;
        transform: translate(var(--daily-streak-flight-x-4), var(--daily-streak-flight-y-4)) rotate(var(--daily-streak-flight-r-4)) scale(0.96);
    }

    65% {
        opacity: 1;
        transform: translate(var(--daily-streak-flight-x-5), var(--daily-streak-flight-y-5)) rotate(var(--daily-streak-flight-r-5)) scale(0.9);
    }

    70.5% {
        opacity: 1;
        transform: translate(var(--daily-streak-flight-x-6), var(--daily-streak-flight-y-6)) rotate(var(--daily-streak-flight-r-6)) scale(0.84);
    }

    76% {
        opacity: 0.98;
        transform: translate(var(--daily-streak-flight-x-7), var(--daily-streak-flight-y-7)) rotate(var(--daily-streak-flight-r-7)) scale(0.86);
    }

    82% {
        opacity: 0.94;
        transform: translate(var(--daily-streak-flight-x-8), var(--daily-streak-flight-y-8)) rotate(var(--daily-streak-flight-r-8)) scale(0.84);
    }

    88% {
        opacity: 0.86;
        transform: translate(var(--daily-streak-flight-x-9), var(--daily-streak-flight-y-9)) rotate(var(--daily-streak-flight-r-9)) scale(0.82);
    }

    93% {
        opacity: 0.74;
        transform: translate(var(--daily-streak-flight-x-10), var(--daily-streak-flight-y-10)) rotate(var(--daily-streak-flight-r-10)) scale(0.8);
    }

    97% {
        opacity: 0.52;
        transform: translate(var(--daily-streak-flight-x-11), var(--daily-streak-flight-y-11)) rotate(var(--daily-streak-flight-r-11)) scale(0.76);
    }

    100% {
        opacity: 0;
        transform: translate(var(--daily-streak-flight-x-12), var(--daily-streak-flight-y-12)) rotate(var(--daily-streak-flight-r-12)) scale(0.72);
    }
}

@keyframes daily-streak-new-number-b-kxh9tbqgwn {
    0% {
        opacity: 0;
        transform: translateX(-0.32rem) skewX(-18deg) scaleX(0.18) scaleY(1.46) rotate(-7deg);
    }

    18% {
        opacity: 1;
        transform: translateX(0.18rem) skewX(10deg) scaleX(1.44) scaleY(0.66) rotate(3deg);
    }

    44% {
        opacity: 1;
        transform: translateX(-0.08rem) skewX(-4deg) scaleX(0.88) scaleY(1.18) rotate(-1.6deg);
    }

    68% {
        opacity: 1;
        transform: translateX(0.04rem) skewX(2deg) scaleX(1.08) scaleY(0.94) rotate(0.8deg);
    }

    84% {
        opacity: 1;
        transform: translateX(0) skewX(0deg) scaleX(0.98) scaleY(1.02);
    }

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

@media (max-width: 520px) {
    .daily-streak-celebration__burst[b-kxh9tbqgwn] {
        gap: 0.38rem;
    }

    .daily-streak-celebration__number-slot[b-kxh9tbqgwn] {
        min-width: 2.7rem;
        height: 3rem;
    }

    .daily-streak-celebration__number[b-kxh9tbqgwn] {
        font-size: 2.85rem;
    }

    .daily-streak-celebration__text[b-kxh9tbqgwn] {
        min-width: 6.8rem;
        font-size: 1.12rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .daily-streak-celebration[b-kxh9tbqgwn] {
        animation: daily-streak-reduced-shell-b-kxh9tbqgwn 1.25s ease both;
    }

    .daily-streak-celebration__burst[b-kxh9tbqgwn],
    .daily-streak-celebration__text[b-kxh9tbqgwn] {
        animation: none;
    }

    .daily-streak-celebration__number-flight--old[b-kxh9tbqgwn] {
        animation: none;
    }

    .daily-streak-celebration__number--old[b-kxh9tbqgwn] {
        animation: daily-streak-old-reduced-b-kxh9tbqgwn 0.38s ease both;
    }

    .daily-streak-celebration__number--new[b-kxh9tbqgwn] {
        animation: daily-streak-new-reduced-b-kxh9tbqgwn 0.42s ease 0.16s both;
    }
}

@keyframes daily-streak-reduced-shell-b-kxh9tbqgwn {
    0%, 100% {
        opacity: 0;
    }

    16%, 82% {
        opacity: 1;
    }
}

@keyframes daily-streak-old-reduced-b-kxh9tbqgwn {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes daily-streak-new-reduced-b-kxh9tbqgwn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Components/GuideWriteJapaneseExercise.razor.rz.scp.css */
.guide-write-exercise[b-jjq7x6t45v] {
    width: 100%;
}

.guide-write-exercise--practice[b-jjq7x6t45v] {
    width: 100%;
    margin-inline: auto;
}

.type-area[b-jjq7x6t45v] {
    width: 100%;
}

.guide-write-input-row[b-jjq7x6t45v] {
    display: flex;
    gap: 0.5rem;
}

.guide-write-composer[b-jjq7x6t45v] {
    position: relative;
    flex: 1;
    min-height: 4.4rem;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    animation: choice-in-b-jjq7x6t45v 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    overflow: hidden;
}

.guide-write-composer:focus-within[b-jjq7x6t45v] {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-subtle);
}

.guide-write-composer--correct[b-jjq7x6t45v] {
    border-color: var(--success);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.25);
}

.guide-write-composer--wrong[b-jjq7x6t45v] {
    border-color: var(--error);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.2);
}

.guide-write-visual-track[b-jjq7x6t45v] {
    min-height: 1.8rem;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    pointer-events: none;
    text-align: center;
}

.guide-write-token[b-jjq7x6t45v],
.guide-write-placeholder[b-jjq7x6t45v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    line-height: 1;
}

.guide-write-token[b-jjq7x6t45v] {
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-size: clamp(1.18rem, 3vw, 1.6rem);
    font-weight: 600;
}

.guide-write-token--kana[b-jjq7x6t45v] {
    color: var(--text-primary);
}

.guide-write-token--pending[b-jjq7x6t45v] {
    padding: 0.22rem 0.58rem;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, white);
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.04));
    color: color-mix(in srgb, var(--accent) 74%, white);
    animation: guide-write-pending-blink-b-jjq7x6t45v 1s ease-in-out infinite;
}

.guide-write-gap[b-jjq7x6t45v] {
    width: 0.7rem;
    min-height: 1.5rem;
}

.guide-write-placeholder[b-jjq7x6t45v] {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 400;
}

.guide-write-native-input[b-jjq7x6t45v] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font-size: 16px;
    padding: 0;
}

.guide-write-submit[b-jjq7x6t45v],
.btn-submit[b-jjq7x6t45v] {
    padding: 1rem 1.4rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s ease;
    animation: choice-in-b-jjq7x6t45v 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.04s;
}

.guide-write-submit:hover:not(:disabled)[b-jjq7x6t45v],
.btn-submit:hover:not(:disabled)[b-jjq7x6t45v] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.guide-write-submit:disabled[b-jjq7x6t45v],
.btn-submit:disabled[b-jjq7x6t45v] {
    opacity: 0.3;
    cursor: not-allowed;
}

.feedback[b-jjq7x6t45v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0.85rem;
}

.feedback-enter[b-jjq7x6t45v] {
    animation: feedback-in-b-jjq7x6t45v 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.fb-msg[b-jjq7x6t45v] {
    font-size: 0.95rem;
    font-weight: 600;
}

.fb-msg.wrong[b-jjq7x6t45v] {
    color: var(--error);
}

.guide-write-feedback-kana[b-jjq7x6t45v] {
    flex-basis: 100%;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.guide-write-alternates[b-jjq7x6t45v] {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.guide-write-alternates-label[b-jjq7x6t45v] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    opacity: 0.78;
}

.guide-write-alternates-list[b-jjq7x6t45v] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.guide-write-alternate-pill[b-jjq7x6t45v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 500;
}

.btn-next[b-jjq7x6t45v] {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 0.4rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.btn-next:hover[b-jjq7x6t45v] {
    background: var(--accent-hover);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 18px var(--accent-glow);
}

.guide-write-exercise[b-jjq7x6t45v]  .sentence-practice-prompt__text.guide-write-prompt-text {
    display: inline-block;
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(2rem, 4.4vw, 2.45rem) !important;
    line-height: 1.16;
    width: fit-content !important;
    max-width: min(100%, 64rem) !important;
    margin-inline: auto;
    text-align: center;
    white-space: normal;
    text-wrap: wrap !important;
    overflow-wrap: anywhere;
}

@keyframes choice-in-b-jjq7x6t45v {
    0% {
        opacity: 0;
        transform: translateY(20px) scaleY(0.82) scaleX(1.06);
    }
    50% {
        opacity: 1;
        transform: translateY(-4px) scaleY(1.05) scaleX(0.97);
    }
    75% {
        transform: translateY(1px) scaleY(0.99) scaleX(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes feedback-in-b-jjq7x6t45v {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.88);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes guide-write-pending-blink-b-jjq7x6t45v {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
        opacity: 0.85;
    }
}

@media (max-width: 520px) {
    .btn-next[b-jjq7x6t45v],
    [b-jjq7x6t45v] .practice-action-btn {
        width: 100%;
    }
}

@media (max-width: 440px) {
    .guide-write-composer[b-jjq7x6t45v] {
        padding: 0.82rem 0.95rem;
    }

    .guide-write-submit[b-jjq7x6t45v],
    .btn-submit[b-jjq7x6t45v] {
        padding: 0.75rem 0.9rem;
        font-size: 1rem;
    }

    .guide-write-token[b-jjq7x6t45v] {
        font-size: 1.02rem;
    }
}
/* /Components/HandwrittenText.razor.rz.scp.css */
/* ??? Wrapper ??????????????????????????????????????? */

.hw-wrapper[b-yh04tsv5c5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* ??? Vertical column ??????????????????????????????? */

.hw-column[b-yh04tsv5c5] {
    display: flex;
    max-width: 100%;
}

.hw-column--vertical[b-yh04tsv5c5] {
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.hw-column--horizontal[b-yh04tsv5c5] {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.18rem;
}

/* ??? Word-break gap (spaces in sentences) ?????????? */

.hw-gap[b-yh04tsv5c5] {
    flex-shrink: 0;
}

.hw-gap--vertical[b-yh04tsv5c5] {
    width: var(--hw-size, 56px);
    height: calc(var(--hw-size, 56px) * 0.3);
}

.hw-gap--horizontal[b-yh04tsv5c5] {
    width: calc(var(--hw-size, 56px) * 0.35);
    height: var(--hw-size, 56px);
}

/* ??? Character cell ???????????????????????????????? */

.hw-cell[b-yh04tsv5c5] {
    width: var(--hw-size, 56px);
    height: var(--hw-size, 56px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.08;
    transition: opacity 0.35s ease;
}

.hw-cell.active[b-yh04tsv5c5],
.hw-cell.done[b-yh04tsv5c5] {
    opacity: 1;
}

.hw-cell.done[b-yh04tsv5c5] {
    animation: hw-char-settle-b-yh04tsv5c5 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hw-char-settle-b-yh04tsv5c5 {
    from { transform: scale(1.06); filter: brightness(1.15); }
    to   { transform: scale(1);    filter: brightness(1); }
}

/* ??? SVG canvas ???????????????????????????????????? */

.hw-svg[b-yh04tsv5c5] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ??? Stroke paths ?????????????????????????????????? */

.hw-stroke[b-yh04tsv5c5] {
    fill: none;
    stroke: var(--text-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease;
}

.hw-stroke.drawing[b-yh04tsv5c5] {
    stroke: var(--accent);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: hw-draw-b-yh04tsv5c5 var(--hw-dur, 260ms) cubic-bezier(0, 0, 0.15, 1) forwards;
}

@keyframes hw-draw-b-yh04tsv5c5 {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

/* ??? Fallback character (no SVG data) ?????????????? */

.hw-cell--fb[b-yh04tsv5c5] {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.hw-cell--fb.visible[b-yh04tsv5c5] {
    opacity: 1;
}

.hw-fb[b-yh04tsv5c5] {
    font-size: calc(var(--hw-size, 56px) * 0.78);
    font-family: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
}

/* ??? Replay button ????????????????????????????????? */

.hw-replay[b-yh04tsv5c5] {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.hw-replay:hover[b-yh04tsv5c5] {
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 440px) {
    .hw-wrapper--horizontal[b-yh04tsv5c5] {
        --hw-size: min(var(--hw-size, 56px), 28px);
    }
}

/* ??? Reduced motion ???????????????????????????????? */

@media (prefers-reduced-motion: reduce) {
    .hw-stroke.drawing[b-yh04tsv5c5] {
        animation: none;
        stroke-dashoffset: 0;
    }

    .hw-cell.done[b-yh04tsv5c5] {
        animation: none;
    }
}
/* /Components/LessonActionBar.razor.rz.scp.css */
.lesson-action-bar[b-ukvvntynqc] {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    gap: 0.75rem;
}

.lesson-action-bar--primary-only[b-ukvvntynqc] {
    justify-content: flex-end;
}

.lesson-action-btn[b-ukvvntynqc] {
    min-width: 6.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.6rem;
    font-size: var(--lesson-action-font-size, 0.9rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lesson-action-btn--secondary[b-ukvvntynqc] {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

.lesson-action-btn--secondary:hover[b-ukvvntynqc] {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.lesson-action-btn--primary[b-ukvvntynqc] {
    border: none;
    background: var(--accent);
    color: #fff;
    margin-left: auto;
}

.lesson-action-btn--primary:hover[b-ukvvntynqc] {
    background: var(--accent-hover);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0 18px var(--accent-glow);
}

.lesson-action-btn--start[b-ukvvntynqc] {
    font-size: 1rem;
    font-weight: 600;
}

.lesson-action-btn--start:hover[b-ukvvntynqc] {
    box-shadow: 0 0 22px var(--accent-glow);
    transform: translateY(-2px) scale(1.04);
}

.lesson-action-btn:active:not(:disabled)[b-ukvvntynqc] {
    transform: translateY(1px);
}

.lesson-action-btn:disabled[b-ukvvntynqc] {
    opacity: 0.75;
    cursor: default;
}

@media (max-width: 640px) {
    .lesson-action-bar[b-ukvvntynqc] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
        min-height: 2.18rem;
        gap: 0.42rem;
    }

    .lesson-action-bar--primary-only[b-ukvvntynqc] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lesson-action-btn[b-ukvvntynqc] {
        min-width: 0;
        width: 100%;
        padding: 0.5rem 0.62rem;
        border-radius: 0.48rem;
        font-size: 0.72rem;
        line-height: 1.15;
    }

    .lesson-action-btn--start[b-ukvvntynqc] {
        font-size: 0.76rem;
    }
}
/* /Components/LessonFlowCard.razor.rz.scp.css */
.lesson-flow-card[b-7kp4d23i11] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 0;
}

.lesson-flow-card--open-stage[b-7kp4d23i11] {
    max-width: 100%;
    margin-block: auto;
    justify-content: center;
    gap: var(--lesson-open-stage-card-gap, clamp(0.85rem, 2vh, 1.25rem));
    container-type: inline-size;
    padding: var(--lesson-open-stage-card-pad-top, clamp(1.25rem, 4vh, 3rem)) 0 var(--lesson-open-stage-card-pad-bottom, clamp(1.25rem, 4vh, 3rem));
}

.lesson-flow-card--panel[b-7kp4d23i11] {
    border: 1px solid var(--border-color);
    border-radius: 0.9rem;
    background: var(--bg-surface);
    padding:
        var(--lesson-panel-card-pad-y, clamp(1.35rem, 2.5dvh, 2rem))
        var(--lesson-panel-card-pad-x, clamp(1rem, 2.2vw, 1.5rem))
        var(--lesson-panel-card-pad-bottom, clamp(1.1rem, 2dvh, 1.6rem));
    gap: var(--lesson-panel-card-gap, clamp(0.95rem, 1.8dvh, 1.35rem));
}

.lesson-flow-card--panel.lesson-flow-card--fill-height[b-7kp4d23i11] {
    height: 100%;
    justify-content: center;
}

@media (max-width: 480px) {
    .lesson-flow-card--panel.lesson-flow-card--fill-height[b-7kp4d23i11] {
        height: 100%;
        min-height: 0;
        justify-content: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
}
/* /Components/LessonFlowFrame.razor.rz.scp.css */
.lesson-flow[b-bwxpaaoqh2] {
    min-height: calc(100dvh - var(--topbar-height) - 3.5rem);
}

.lesson-flow--panel[b-bwxpaaoqh2] {
    width: min(100%, var(--lesson-flow-panel-max-width, 46rem));
    max-width: var(--lesson-flow-panel-max-width, 46rem);
    margin: 0 auto;
    padding: 0 var(--lesson-flow-panel-inline-padding, 1rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--lesson-flow-gap, clamp(0.85rem, 1.9dvh, 1.5rem));
}

.lesson-flow--open-stage[b-bwxpaaoqh2] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--lesson-flow-gap, clamp(1.25rem, 2vw, 2rem));
}

.lesson-flow-header[b-bwxpaaoqh2] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: clamp(0.65rem, 1.5dvh, 1rem) 0 0;
}

.lesson-flow-header-leading[b-bwxpaaoqh2] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lesson-flow-header-content[b-bwxpaaoqh2] {
    min-width: 0;
}

.lesson-flow-back[b-bwxpaaoqh2] {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.lesson-flow-back:hover[b-bwxpaaoqh2] {
    color: var(--accent);
}

.lesson-flow-counter[b-bwxpaaoqh2] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.lesson-flow-body[b-bwxpaaoqh2] {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.lesson-flow--open-stage .lesson-flow-body[b-bwxpaaoqh2] {
    flex: 1 1 auto;
    overflow-x: clip;
}

.lesson-flow-footer[b-bwxpaaoqh2] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.lesson-flow--open-stage .lesson-flow-footer[b-bwxpaaoqh2] {
    margin-top: auto;
    padding-bottom: 0.25rem;
}

.lesson-flow--panel .lesson-flow-footer[b-bwxpaaoqh2] {
    padding-top: clamp(0.15rem, 0.6dvh, 0.45rem);
}

[b-bwxpaaoqh2] .lesson-flow-empty {
    margin: 0;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 640px) {
    .lesson-flow[b-bwxpaaoqh2] {
        min-height: calc(100dvh - (var(--phonebar-height, 3rem) * 2) - 0.7rem);
    }

    .lesson-flow--panel[b-bwxpaaoqh2] {
        width: 100%;
        max-width: none;
        padding-inline: var(--lesson-flow-panel-inline-padding, 0.5rem);
        gap: var(--lesson-flow-gap, 0.55rem);
    }

    .lesson-flow--open-stage[b-bwxpaaoqh2] {
        gap: var(--lesson-flow-gap, 0.55rem);
    }

    .lesson-flow-header[b-bwxpaaoqh2] {
        gap: 0.5rem;
        padding-top: 0;
    }

    .lesson-flow-header-leading[b-bwxpaaoqh2] {
        gap: 0.5rem;
    }

    .lesson-flow-back[b-bwxpaaoqh2] {
        font-size: 0.68rem;
    }

    .lesson-flow-counter[b-bwxpaaoqh2] {
        font-size: 0.64rem;
    }

    .lesson-flow--panel .lesson-flow-footer[b-bwxpaaoqh2] {
        gap: 0.44rem;
        padding-top: 0.05rem;
    }

    .lesson-flow--open-stage .lesson-flow-footer[b-bwxpaaoqh2] {
        gap: 0.4rem;
        padding-bottom: 0.1rem;
    }
}

@media (max-width: 480px) {
    .lesson-flow--panel[b-bwxpaaoqh2] {
        min-height: calc(100dvh - (var(--phonebar-height, 3rem) * 2) - 0.7rem);
        height: calc(100dvh - (var(--phonebar-height, 3rem) * 2) - 0.7rem);
        overflow: hidden;
    }

    .lesson-flow--panel .lesson-flow-header[b-bwxpaaoqh2] {
        padding-top: 0.45rem;
    }

    .lesson-flow--panel .lesson-flow-body[b-bwxpaaoqh2] {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .lesson-flow--panel .lesson-flow-footer[b-bwxpaaoqh2] {
        gap: 0.55rem;
        padding-top: 0.15rem;
    }
}
/* /Components/LessonProgressDots.razor.rz.scp.css */
.lesson-progress-dots[b-iyn5aozavh] {
    display: flex;
    gap: var(--lesson-progress-dot-gap, 0.4rem);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

.lesson-progress-dot[b-iyn5aozavh] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-color);
    transition: background 0.2s ease, transform 0.2s ease;
}

.lesson-progress-dot.done[b-iyn5aozavh] {
    background: var(--accent);
    opacity: 0.4;
}

.lesson-progress-dot.active[b-iyn5aozavh] {
    background: var(--accent);
    transform: scale(1.4);
}

@media (max-width: 640px) {
    .lesson-progress-dots[b-iyn5aozavh] {
        gap: var(--lesson-progress-dot-gap, 0.28rem);
    }

    .lesson-progress-dot[b-iyn5aozavh] {
        width: 5px;
        height: 5px;
    }
}
/* /Components/LibraryArticleView.razor.rz.scp.css */
.guide-page[b-ua3o9vzkuf] {
    --guide-page-max: 104rem;
    --guide-article-max: 56rem;
    --guide-rail-width: 15rem;
    --guide-shell-gap: clamp(2.25rem, 4vw, 5rem);
    --guide-sticky-top: calc(var(--topbar-height, 3.5rem) + 1rem);
    width: 100%;
    max-width: var(--guide-page-max);
    margin: 0 auto;
    padding: 0 0 4rem;
    display: grid;
    grid-template-columns:
        minmax(0, var(--guide-rail-width))
        minmax(0, var(--guide-article-max))
        minmax(13rem, var(--guide-rail-width));
    column-gap: var(--guide-shell-gap);
    row-gap: 2.5rem;
}

.guide-page--missing[b-ua3o9vzkuf] {
    min-height: calc(100dvh - var(--topbar-height, 3.5rem));
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding-bottom: 3rem;
}

.guide-page--single-column[b-ua3o9vzkuf] {
    grid-template-columns: minmax(0, 1fr);
}

.guide-page--loading[b-ua3o9vzkuf] {
    padding-top: 0.35rem;
}

.guide-hero[b-ua3o9vzkuf],
.guide-lead[b-ua3o9vzkuf],
.guide-missing-state[b-ua3o9vzkuf] {
    display: grid;
    gap: 1rem;
}

.guide-main[b-ua3o9vzkuf] {
    grid-column: 2;
    display: grid;
    gap: 2.5rem;
    min-width: 0;
}

.guide-page--single-column .guide-main[b-ua3o9vzkuf] {
    grid-column: 1;
    width: min(100%, 62rem);
    justify-self: center;
}

.guide-page--loading .guide-main[b-ua3o9vzkuf] {
    gap: 2rem;
}

.guide-hero[b-ua3o9vzkuf] {
    min-width: 0;
    padding-top: 0.35rem;
}

.guide-hero-top[b-ua3o9vzkuf] {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 0.9rem;
}

.guide-hero-byline[b-ua3o9vzkuf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.guide-lead[b-ua3o9vzkuf] {
    min-width: 0;
}

.guide-article[b-ua3o9vzkuf] {
    min-width: 0;
}

.guide-return[b-ua3o9vzkuf],
.guide-footer-link[b-ua3o9vzkuf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-start;
    align-self: start;
    color: color-mix(in srgb, var(--accent) 35%, white);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: color 0.18s ease, opacity 0.18s ease;
}

.guide-return:hover[b-ua3o9vzkuf],
.guide-footer-link:hover[b-ua3o9vzkuf] {
    color: var(--text-primary);
}

.guide-return:focus-visible[b-ua3o9vzkuf],
.guide-footer-link:focus-visible[b-ua3o9vzkuf],
.guide-rail-link:focus-visible[b-ua3o9vzkuf],
.guide-action-link:focus-visible[b-ua3o9vzkuf],
.guide-language-button:focus-visible[b-ua3o9vzkuf] {
    outline: 2px solid color-mix(in srgb, var(--accent) 62%, white);
    outline-offset: 0.22rem;
    border-radius: 0.5rem;
}

[b-ua3o9vzkuf] .guide-text-stack,
[b-ua3o9vzkuf] .guide-text-pair {
    display: grid;
    min-width: 0;
}

[b-ua3o9vzkuf] .guide-text-stack {
    gap: 0.22rem;
}

[b-ua3o9vzkuf] .guide-text-pair {
    gap: 0.18rem;
}

[b-ua3o9vzkuf] .guide-text-stack--title {
    gap: 0.5rem;
    max-width: 13ch;
}

[b-ua3o9vzkuf] .guide-text-stack--summary {
    gap: 0.75rem;
}

[b-ua3o9vzkuf] .guide-text-stack--lead,
[b-ua3o9vzkuf] .guide-text-stack--body,
[b-ua3o9vzkuf] .guide-text-stack--callout,
[b-ua3o9vzkuf] .guide-text-stack--action-copy,
[b-ua3o9vzkuf] .guide-text-stack--point {
    gap: 0.95rem;
}

[b-ua3o9vzkuf] .guide-text-stack--section {
    gap: 0.35rem;
}

[b-ua3o9vzkuf] .guide-text-stack--action-label,
[b-ua3o9vzkuf] .guide-text-stack--action-status,
[b-ua3o9vzkuf] .guide-text-stack--rail-text,
[b-ua3o9vzkuf] .guide-text-stack--meta,
[b-ua3o9vzkuf] .guide-text-stack--footer,
[b-ua3o9vzkuf] .guide-text-stack--rail-title {
    gap: 0.12rem;
}

[b-ua3o9vzkuf] .guide-text-line {
    display: block;
}

[b-ua3o9vzkuf] .guide-text-line--english {
    color: inherit;
}

[b-ua3o9vzkuf] .guide-text-line--japanese {
    color: color-mix(in srgb, var(--text-secondary) 82%, white);
    font-size: 0.92em;
    line-height: 1.65;
}

[b-ua3o9vzkuf] .guide-text-line--title {
    font-size: 0.48em;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: color-mix(in srgb, var(--text-secondary) 72%, white);
    max-width: 11ch;
}

[b-ua3o9vzkuf] .guide-page--single-column .guide-text-stack--title,
[b-ua3o9vzkuf] .guide-page--single-column .guide-text-line--title {
    max-width: none;
}

[b-ua3o9vzkuf] .guide-text-line--summary,
[b-ua3o9vzkuf] .guide-text-line--lead,
[b-ua3o9vzkuf] .guide-text-line--body,
[b-ua3o9vzkuf] .guide-text-line--callout,
[b-ua3o9vzkuf] .guide-text-line--action-copy,
[b-ua3o9vzkuf] .guide-text-line--point {
    font-size: 0.94em;
}

[b-ua3o9vzkuf] .guide-text-line--section {
    font-size: 0.74em;
    line-height: 1.2;
}

[b-ua3o9vzkuf] .guide-text-line--meta,
[b-ua3o9vzkuf] .guide-text-line--action-kicker,
[b-ua3o9vzkuf] .guide-text-line--action-status,
[b-ua3o9vzkuf] .guide-text-line--rail-title,
[b-ua3o9vzkuf] .guide-text-line--footer {
    font-size: 0.86em;
}

[b-ua3o9vzkuf] .guide-text-line--action-label,
[b-ua3o9vzkuf] .guide-text-line--rail-text {
    font-size: 0.9em;
    line-height: 1.4;
}

[b-ua3o9vzkuf] .guide-text-pair--summary,
[b-ua3o9vzkuf] .guide-text-pair--lead,
[b-ua3o9vzkuf] .guide-text-pair--body,
[b-ua3o9vzkuf] .guide-text-pair--callout,
[b-ua3o9vzkuf] .guide-text-pair--action-copy,
[b-ua3o9vzkuf] .guide-text-pair--point {
    padding: 0 0 0.78rem;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.08));
}

[b-ua3o9vzkuf] .guide-text-pair--summary:last-child,
[b-ua3o9vzkuf] .guide-text-pair--lead:last-child,
[b-ua3o9vzkuf] .guide-text-pair--body:last-child,
[b-ua3o9vzkuf] .guide-text-pair--callout:last-child,
[b-ua3o9vzkuf] .guide-text-pair--action-copy:last-child,
[b-ua3o9vzkuf] .guide-text-pair--point:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

[b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--summary,
[b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--lead,
[b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--body,
[b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--callout,
[b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--action-copy,
[b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--point {
    padding-left: 0.9rem;
    border-left: 1px solid color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.14));
}

.guide-meta-row[b-ua3o9vzkuf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.guide-loading-title[b-ua3o9vzkuf],
.guide-loading-summary[b-ua3o9vzkuf],
.guide-loading-line[b-ua3o9vzkuf],
.guide-loading-section[b-ua3o9vzkuf],
.guide-loading-pill[b-ua3o9vzkuf] {
    border-radius: 0.8rem;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--accent) 15%, rgba(255, 255, 255, 0.08)),
            color-mix(in srgb, var(--accent-secondary) 8%, rgba(255, 255, 255, 0.045)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.guide-loading-title[b-ua3o9vzkuf] {
    width: min(100%, 34rem);
    height: clamp(4.8rem, 9vw, 7.2rem);
    border-radius: 1.2rem;
}

.guide-loading-summary[b-ua3o9vzkuf] {
    width: min(100%, 46rem);
    height: 4.4rem;
}

.guide-loading-pill[b-ua3o9vzkuf] {
    display: inline-block;
    width: 7.5rem;
    height: 0.82rem;
    border-radius: 999px;
}

.guide-loading-pill--short[b-ua3o9vzkuf] {
    width: 4.8rem;
}

.guide-lead--loading[b-ua3o9vzkuf],
.guide-article--loading[b-ua3o9vzkuf] {
    display: grid;
    gap: 0.85rem;
}

.guide-loading-line[b-ua3o9vzkuf] {
    width: min(100%, 42rem);
    height: 1rem;
}

.guide-loading-line--wide[b-ua3o9vzkuf] {
    width: min(100%, 48rem);
}

.guide-loading-section[b-ua3o9vzkuf] {
    width: min(100%, 21rem);
    height: 2.35rem;
}

.guide-meta-item[b-ua3o9vzkuf],
.guide-section-index[b-ua3o9vzkuf],
.guide-rail-index[b-ua3o9vzkuf] {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
}

.guide-meta-item[b-ua3o9vzkuf] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--accent) 48%, white);
}

.guide-meta-divider[b-ua3o9vzkuf] {
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 36%, white);
}

.guide-language-picker-scroller[b-ua3o9vzkuf] {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0.1rem 0 0.18rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.guide-language-picker-scroller[b-ua3o9vzkuf]::-webkit-scrollbar {
    display: none;
}

.guide-language-picker[b-ua3o9vzkuf] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.42rem;
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100%;
    padding: 0.34rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 94%, rgba(255, 255, 255, 0.08));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.guide-language-button[b-ua3o9vzkuf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.05rem;
    padding: 0.42rem 0.92rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.guide-language-button:hover[b-ua3o9vzkuf] {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.guide-language-button.selected[b-ua3o9vzkuf] {
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-secondary) 18%, transparent));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px color-mix(in srgb, var(--accent) 20%, transparent);
}

.guide-language-button:focus-visible[b-ua3o9vzkuf] {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 58%, transparent);
}

.guide-title[b-ua3o9vzkuf] {
    margin: 0;
    max-width: 14ch;
    color: var(--text-primary);
    font-size: clamp(3rem, 6.5vw, 5.4rem);
    line-height: 0.94;
    letter-spacing: -0.055em;
}

.guide-summary[b-ua3o9vzkuf] {
    margin: 0;
    max-width: 46rem;
    color: color-mix(in srgb, var(--text-secondary) 88%, white);
    font-size: 1.08rem;
    line-height: 1.82;
}

.guide-summary--community[b-ua3o9vzkuf] {
    display: grid;
    gap: 0.85rem;
}

.guide-page--single-column .guide-title[b-ua3o9vzkuf],
.guide-page--single-column .guide-summary[b-ua3o9vzkuf],
.guide-page--single-column .guide-lead-text[b-ua3o9vzkuf],
.guide-page--single-column .guide-section-head h2[b-ua3o9vzkuf],
.guide-page--single-column .guide-body-text[b-ua3o9vzkuf],
.guide-page--single-column .guide-points[b-ua3o9vzkuf],
.guide-page--single-column .guide-callout[b-ua3o9vzkuf],
.guide-page--single-column .guide-action-card[b-ua3o9vzkuf] {
    max-width: none;
}

.guide-author-profile[b-ua3o9vzkuf] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

[b-ua3o9vzkuf] .guide-author-avatar-trigger {
    border-radius: 50%;
}

.guide-author-avatar[b-ua3o9vzkuf] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.18));
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, white), color-mix(in srgb, var(--accent-secondary) 68%, var(--accent)));
}

.guide-author-avatar-placeholder[b-ua3o9vzkuf],
.guide-author-avatar-img[b-ua3o9vzkuf] {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.guide-author-avatar-img[b-ua3o9vzkuf] {
    object-fit: cover;
    border-radius: 50%;
}

.guide-author-avatar-placeholder[b-ua3o9vzkuf] {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: 50%;
}

.guide-author-copy[b-ua3o9vzkuf] {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.guide-author-name[b-ua3o9vzkuf] {
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.1;
}

.guide-author-support[b-ua3o9vzkuf] {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.guide-lead-text[b-ua3o9vzkuf] {
    margin: 0;
    max-width: 48rem;
    color: color-mix(in srgb, var(--text-secondary) 92%, white);
    font-size: 1.04rem;
    line-height: 1.9;
}

.guide-lead-text--community[b-ua3o9vzkuf] {
    display: grid;
    gap: 0.9rem;
}

.guide-section[b-ua3o9vzkuf] {
    padding: 0 0 2.35rem;
    border-top: 1px solid color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.16));
    scroll-margin-top: calc(var(--topbar-height, 3.5rem) + 1.25rem);
}

.guide-section:first-child[b-ua3o9vzkuf] {
    border-top: none;
    padding-top: 0;
}

.guide-section + .guide-section[b-ua3o9vzkuf] {
    padding-top: 2.35rem;
}

.guide-section-head[b-ua3o9vzkuf] {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.guide-section-head h2[b-ua3o9vzkuf] {
    margin: 0;
    max-width: 22ch;
    color: var(--text-primary);
    font-size: clamp(1.5rem, 2.7vw, 2rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.guide-section-index[b-ua3o9vzkuf] {
    font-size: 0.7rem;
    color: color-mix(in srgb, var(--accent) 42%, white);
}

.guide-body-text[b-ua3o9vzkuf],
.guide-footer-copy[b-ua3o9vzkuf],
.guide-callout[b-ua3o9vzkuf] {
    color: color-mix(in srgb, var(--text-secondary) 90%, white);
    line-height: 1.9;
}

.guide-body-text[b-ua3o9vzkuf] {
    margin: 0 0 1rem;
    max-width: 48rem;
    font-size: 1.04rem;
}

.guide-body-text:last-of-type[b-ua3o9vzkuf] {
    margin-bottom: 0;
}

.guide-points[b-ua3o9vzkuf] {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.7rem;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 48rem;
}

.guide-points li[b-ua3o9vzkuf]::marker {
    color: color-mix(in srgb, var(--accent) 48%, white);
}

.guide-points--ordered[b-ua3o9vzkuf] {
    list-style: decimal;
}

.guide-point-item[b-ua3o9vzkuf] {
    margin: 0;
}

.guide-callout[b-ua3o9vzkuf] {
    margin-top: 1.35rem;
    max-width: 46rem;
    padding: 1rem 1.1rem;
    border-left: 2px solid color-mix(in srgb, var(--accent) 44%, white);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.02));
    font-size: 0.96rem;
}

[b-ua3o9vzkuf] .community-rich-inline {
    color: inherit;
}

[b-ua3o9vzkuf] .community-rich-inline--bold {
    font-weight: 800;
}

[b-ua3o9vzkuf] .community-rich-inline--italic {
    font-style: italic;
}

[b-ua3o9vzkuf] .community-rich-inline--underline {
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.guide-community-heading[b-ua3o9vzkuf] {
    margin: 1.25rem 0 0.62rem;
    max-width: 32rem;
    color: var(--text-primary);
    font-size: clamp(1.2rem, 2.2vw, 1.62rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.guide-community-heading:first-child[b-ua3o9vzkuf] {
    margin-top: 0;
}

.guide-action-card[b-ua3o9vzkuf] {
    display: grid;
    gap: 1rem;
    max-width: 46rem;
    margin-top: 1.35rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.18));
    border-radius: 1rem;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.06)),
            color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.02)));
}

.guide-action-head[b-ua3o9vzkuf] {
    display: grid;
    gap: 0.45rem;
}

.guide-action-kicker[b-ua3o9vzkuf],
.guide-action-status[b-ua3o9vzkuf] {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
}

.guide-action-kicker[b-ua3o9vzkuf] {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--accent) 44%, white);
}

.guide-action-copy[b-ua3o9vzkuf] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.98rem;
    line-height: 1.72;
}

.guide-action-list[b-ua3o9vzkuf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.guide-action-link[b-ua3o9vzkuf] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.72rem 0.92rem;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.18));
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.04));
    color: var(--text-primary);
    text-decoration: none;
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.guide-action-link:hover[b-ua3o9vzkuf] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 34%, white);
    background: color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.06));
}

.guide-action-link--soon[b-ua3o9vzkuf] {
    cursor: default;
    color: color-mix(in srgb, var(--text-secondary) 94%, white);
    background: color-mix(in srgb, var(--accent) 6%, rgba(255, 255, 255, 0.02));
}

.guide-action-link--soon:hover[b-ua3o9vzkuf] {
    transform: none;
    border-color: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.18));
    background: color-mix(in srgb, var(--accent) 6%, rgba(255, 255, 255, 0.02));
}

.guide-action-label[b-ua3o9vzkuf] {
    font-weight: 700;
    line-height: 1.35;
}

.guide-action-status[b-ua3o9vzkuf] {
    font-size: 0.64rem;
    color: color-mix(in srgb, var(--accent) 52%, white);
}

.guide-footer[b-ua3o9vzkuf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.16));
}

.guide-footer-copy[b-ua3o9vzkuf] {
    margin: 0;
    font-size: 0.95rem;
}

.guide-missing-state[b-ua3o9vzkuf] {
    grid-column: 1;
    width: min(100%, 34rem);
}

.guide-rail[b-ua3o9vzkuf] {
    grid-column: 3;
    display: block;
    min-width: 0;
    position: fixed;
    top: var(--guide-sticky-top);
    right: max(clamp(1rem, 3.4vw, 3rem), calc((100vw - var(--guide-page-max)) / 2));
    width: var(--guide-rail-width);
    height: calc(100dvh - var(--guide-sticky-top) - 1rem);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    z-index: 5;
}

.guide-rail-inner[b-ua3o9vzkuf] {
    display: grid;
    gap: 1rem;
    padding-top: 0.3rem;
    padding-right: 0.35rem;
}

.guide-rail-title[b-ua3o9vzkuf] {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 40%, white);
}

.guide-rail-links[b-ua3o9vzkuf] {
    display: grid;
    gap: 0.7rem;
}

.guide-rail-link[b-ua3o9vzkuf] {
    display: grid;
    gap: 0.18rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-left: 2px solid transparent;
    border-radius: 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    background: transparent;
    transition:
        color 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.guide-rail-link:hover[b-ua3o9vzkuf] {
    color: var(--text-primary);
    transform: translateX(2px);
    background: color-mix(in srgb, var(--accent) 9%, rgba(255, 255, 255, 0.02));
}

.guide-rail-link--active[b-ua3o9vzkuf] {
    color: var(--text-primary);
    border-left-color: color-mix(in srgb, var(--accent) 48%, white);
    background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.04));
}

.guide-rail-link--active .guide-rail-index[b-ua3o9vzkuf] {
    color: color-mix(in srgb, var(--accent) 60%, white);
}

.guide-rail-index[b-ua3o9vzkuf] {
    font-size: 0.64rem;
    color: color-mix(in srgb, var(--accent) 38%, white);
}

.guide-rail-text[b-ua3o9vzkuf] {
    font-size: 0.9rem;
    line-height: 1.45;
}

@media (max-width: 1024px) {
    .guide-page[b-ua3o9vzkuf] {
        max-width: 52rem;
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 2.15rem;
    }

    .guide-main[b-ua3o9vzkuf],
    .guide-missing-state[b-ua3o9vzkuf],
    .guide-rail[b-ua3o9vzkuf] {
        grid-column: 1;
    }

    .guide-rail[b-ua3o9vzkuf] {
        display: none;
    }
}

@media (max-width: 640px) {
    .guide-page[b-ua3o9vzkuf] {
        padding: 0 0 calc(var(--phonebar-height, 3rem) + 1rem);
        gap: 1rem;
    }

    .guide-main[b-ua3o9vzkuf] {
        gap: 1.1rem;
    }

    .guide-hero[b-ua3o9vzkuf],
    .guide-lead[b-ua3o9vzkuf],
    .guide-missing-state[b-ua3o9vzkuf] {
        gap: 0.62rem;
    }

    .guide-hero[b-ua3o9vzkuf] {
        padding-top: 0;
    }

    .guide-hero-top[b-ua3o9vzkuf],
    .guide-hero-byline[b-ua3o9vzkuf] {
        gap: 0.55rem;
    }

    .guide-return[b-ua3o9vzkuf],
    .guide-footer-link[b-ua3o9vzkuf] {
        font-size: 0.72rem;
    }

    .guide-author-profile[b-ua3o9vzkuf] {
        gap: 0.55rem;
    }

    .guide-author-avatar[b-ua3o9vzkuf] {
        width: 2.25rem;
        height: 2.25rem;
    }

    .guide-author-name[b-ua3o9vzkuf] {
        font-size: 0.82rem;
    }

    .guide-author-support[b-ua3o9vzkuf] {
        font-size: 0.66rem;
        line-height: 1.35;
    }

    .guide-meta-row[b-ua3o9vzkuf] {
        gap: 0.42rem;
    }

    .guide-meta-item[b-ua3o9vzkuf],
    .guide-section-index[b-ua3o9vzkuf] {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }

    .guide-language-picker[b-ua3o9vzkuf] {
        gap: 0.26rem;
        padding: 0.24rem;
    }

    .guide-language-button[b-ua3o9vzkuf] {
        min-height: 1.75rem;
        padding: 0.32rem 0.56rem;
        font-size: 0.64rem;
    }

    .guide-title[b-ua3o9vzkuf] {
        max-width: none;
        font-size: clamp(1.72rem, 8.4vw, 2.18rem);
        line-height: 1.02;
        letter-spacing: -0.025em;
    }

    .guide-summary[b-ua3o9vzkuf],
    .guide-lead-text[b-ua3o9vzkuf] {
        max-width: none;
        font-size: 0.86rem;
        line-height: 1.62;
    }

    .guide-summary--community[b-ua3o9vzkuf],
    .guide-lead-text--community[b-ua3o9vzkuf] {
        gap: 0.45rem;
    }

    .guide-language-picker-scroller[b-ua3o9vzkuf] {
        width: 100%;
    }

    .guide-section[b-ua3o9vzkuf] {
        padding-bottom: 1.1rem;
        scroll-margin-top: calc(var(--phonebar-height, 3rem) + 0.85rem);
    }

    .guide-section + .guide-section[b-ua3o9vzkuf] {
        padding-top: 1.1rem;
    }

    .guide-section-head[b-ua3o9vzkuf] {
        gap: 0.32rem;
        margin-bottom: 0.55rem;
    }

    .guide-section-head h2[b-ua3o9vzkuf] {
        max-width: none;
        font-size: 1.05rem;
        line-height: 1.16;
        letter-spacing: -0.015em;
    }

    .guide-body-text[b-ua3o9vzkuf] {
        margin-bottom: 0.65rem;
        max-width: none;
        font-size: 0.86rem;
        line-height: 1.62;
    }

    .guide-points[b-ua3o9vzkuf] {
        max-width: none;
        margin-top: 0.65rem;
        padding-left: 1rem;
        gap: 0.38rem;
        font-size: 0.84rem;
        line-height: 1.55;
    }

    .guide-callout[b-ua3o9vzkuf] {
        max-width: none;
        margin-top: 0.8rem;
        padding: 0.7rem 0.76rem;
        border-radius: 0.62rem;
        font-size: 0.82rem;
        line-height: 1.55;
    }

    .guide-community-heading[b-ua3o9vzkuf] {
        max-width: none;
        margin: 0.78rem 0 0.36rem;
        font-size: 0.98rem;
        line-height: 1.16;
        letter-spacing: 0;
    }

    .guide-action-card[b-ua3o9vzkuf] {
        max-width: none;
        margin-top: 0.8rem;
        gap: 0.62rem;
        padding: 0.72rem;
        border-radius: 0.7rem;
    }

    .guide-action-head[b-ua3o9vzkuf] {
        gap: 0.28rem;
    }

    .guide-action-kicker[b-ua3o9vzkuf],
    .guide-action-status[b-ua3o9vzkuf] {
        font-size: 0.56rem;
        letter-spacing: 0.1em;
    }

    .guide-action-copy[b-ua3o9vzkuf],
    .guide-footer-copy[b-ua3o9vzkuf] {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    .guide-action-link[b-ua3o9vzkuf] {
        min-height: 2.15rem;
        gap: 0.45rem;
        padding: 0.52rem 0.6rem;
        border-radius: 0.58rem;
    }

    .guide-footer[b-ua3o9vzkuf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        padding-top: 0.7rem;
    }

    .guide-action-list[b-ua3o9vzkuf] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .guide-hero-byline[b-ua3o9vzkuf] {
        align-items: flex-start;
    }

    [b-ua3o9vzkuf] .guide-text-stack {
        gap: 0.12rem;
    }

    [b-ua3o9vzkuf] .guide-text-pair {
        gap: 0.1rem;
    }

    [b-ua3o9vzkuf] .guide-text-stack--title {
        max-width: none;
        gap: 0.28rem;
    }

    [b-ua3o9vzkuf] .guide-text-stack--summary {
        gap: 0.45rem;
    }

    [b-ua3o9vzkuf] .guide-text-stack--lead,
    [b-ua3o9vzkuf] .guide-text-stack--body,
    [b-ua3o9vzkuf] .guide-text-stack--callout,
    [b-ua3o9vzkuf] .guide-text-stack--action-copy,
    [b-ua3o9vzkuf] .guide-text-stack--point {
        gap: 0.52rem;
    }

    [b-ua3o9vzkuf] .guide-text-line--title {
        max-width: none;
        font-size: 0.54em;
        line-height: 1.12;
    }

    [b-ua3o9vzkuf] .guide-text-line--summary,
    [b-ua3o9vzkuf] .guide-text-line--lead,
    [b-ua3o9vzkuf] .guide-text-line--body,
    [b-ua3o9vzkuf] .guide-text-line--callout,
    [b-ua3o9vzkuf] .guide-text-line--action-copy,
    [b-ua3o9vzkuf] .guide-text-line--point {
        font-size: 0.96em;
    }

    [b-ua3o9vzkuf] .guide-text-pair--summary,
    [b-ua3o9vzkuf] .guide-text-pair--lead,
    [b-ua3o9vzkuf] .guide-text-pair--body,
    [b-ua3o9vzkuf] .guide-text-pair--callout,
    [b-ua3o9vzkuf] .guide-text-pair--action-copy,
    [b-ua3o9vzkuf] .guide-text-pair--point {
        padding-bottom: 0.48rem;
    }

    [b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--summary,
    [b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--lead,
    [b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--body,
    [b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--callout,
    [b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--action-copy,
    [b-ua3o9vzkuf] .guide-text-line--japanese.guide-text-line--point {
        padding-left: 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-return[b-ua3o9vzkuf],
    .guide-footer-link[b-ua3o9vzkuf],
    .guide-rail-link[b-ua3o9vzkuf],
    .guide-action-link[b-ua3o9vzkuf],
    .guide-language-button[b-ua3o9vzkuf] {
        transition: none;
    }
}
/* /Components/MiningTagPicker.razor.rz.scp.css */
.mtp-root[b-1wzgtxs1zd] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mtp-selected[b-1wzgtxs1zd],
.mtp-suggestions[b-1wzgtxs1zd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.mtp-empty[b-1wzgtxs1zd] {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.mtp-entry-row[b-1wzgtxs1zd] {
    display: flex;
    gap: 0.5rem;
}

.mtp-input[b-1wzgtxs1zd] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.7rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 0.65rem 0.8rem;
    font-size: 0.88rem;
}

.mtp-action-btn[b-1wzgtxs1zd],
.mtp-chip[b-1wzgtxs1zd],
.mtp-suggestion[b-1wzgtxs1zd] {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.76rem;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.mtp-action-btn:hover[b-1wzgtxs1zd],
.mtp-chip:hover[b-1wzgtxs1zd],
.mtp-suggestion:hover[b-1wzgtxs1zd] {
    border-color: var(--accent);
    color: var(--text-primary);
}

.mtp-chip[b-1wzgtxs1zd] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-surface);
}

.mtp-chip-remove[b-1wzgtxs1zd] {
    font-weight: 800;
}

.mtp-suggestion[b-1wzgtxs1zd] {
    background: var(--bg-elevated);
}
/* /Components/PatchFeedPage.razor.rz.scp.css */
.patch-notes-page[b-x5qcad3f58] {
    --patch-border: color-mix(in srgb, var(--bg-accent-surface) 30%, black 70%);
    --patch-border-strong: color-mix(in srgb, white 18%, var(--bg-accent-surface) 82%);
    --patch-panel:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-accent-surface) 22%, black 78%) 0%,
            color-mix(in srgb, var(--bg-accent-surface) 14%, black 86%) 100%);
    --patch-panel-soft:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-surface) 92%, black 8%) 0%,
            color-mix(in srgb, var(--bg-body) 86%, black 14%) 100%);

    position: relative;
    width: min(100%, 64rem);
    margin: 0 auto;
    padding: 0 0.25rem 3rem;
    display: grid;
    gap: 0.95rem;
    isolation: isolate;
}

.patch-notes-page[b-x5qcad3f58],
.patch-notes-page *[b-x5qcad3f58] {
    box-sizing: border-box;
}

.patch-notes-page[b-x5qcad3f58]::before,
.patch-notes-page[b-x5qcad3f58]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    filter: blur(72px);
}

.patch-notes-page[b-x5qcad3f58]::before {
    top: 1.2rem;
    right: 4%;
    width: 13rem;
    height: 13rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
}

.patch-notes-page[b-x5qcad3f58]::after {
    top: 13rem;
    left: 0;
    width: 11rem;
    height: 11rem;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.1), transparent 74%);
}

.patch-notes-hero[b-x5qcad3f58] {
    display: grid;
    gap: 0.78rem;
}

.patch-notes-back[b-x5qcad3f58],
.patch-notes-link[b-x5qcad3f58] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 2.12rem;
    padding: 0.46rem 0.78rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 11%, rgba(255, 255, 255, 0.02));
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.patch-notes-back:hover[b-x5qcad3f58],
.patch-notes-back:focus-visible[b-x5qcad3f58],
.patch-notes-link:hover[b-x5qcad3f58],
.patch-notes-link:focus-visible[b-x5qcad3f58] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 42%, white);
    background: color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.03));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 14%, transparent);
    outline: none;
}

.patch-notes-hero-copy[b-x5qcad3f58],
.patch-notes-latest[b-x5qcad3f58] {
    position: relative;
    z-index: 1;
}

.patch-notes-hero-copy[b-x5qcad3f58] {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.45rem;
    padding: 0.2rem 0 0;
}

.patch-notes-kicker[b-x5qcad3f58],
.patch-notes-label[b-x5qcad3f58],
.patch-notes-version[b-x5qcad3f58],
.patch-release-status[b-x5qcad3f58] {
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 0.66rem;
    font-weight: 900;
}

.patch-notes-kicker[b-x5qcad3f58],
.patch-notes-label[b-x5qcad3f58] {
    color: color-mix(in srgb, white 76%, var(--accent) 24%);
}

.patch-notes-title[b-x5qcad3f58] {
    margin: 0;
    color: var(--text-primary);
    font-size: 2.7rem;
    line-height: 0.98;
    letter-spacing: 0;
}

.patch-notes-intro[b-x5qcad3f58],
.patch-notes-latest-copy[b-x5qcad3f58],
.patch-release-summary[b-x5qcad3f58],
.patch-notes-footer-copy[b-x5qcad3f58] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.62;
    overflow-wrap: break-word;
}

.patch-notes-intro[b-x5qcad3f58] {
    max-width: 48ch;
    font-size: 0.96rem;
}

.patch-notes-latest[b-x5qcad3f58] {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.48rem;
    padding: 0.78rem 0.85rem;
    border: 1px solid color-mix(in srgb, white 14%, var(--bg-accent-surface) 86%);
    border-radius: 0.5rem;
    background: var(--bg-accent-surface);
    color: #fff;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--bg-accent-surface) 24%, transparent);
}

.patch-notes-feed[b-x5qcad3f58] {
    width: 100%;
    overflow: hidden;
    display: grid;
    border: 1px solid var(--patch-border);
    border-radius: 0.5rem;
    background: var(--patch-panel-soft);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
}

.patch-release[b-x5qcad3f58] {
    position: relative;
    display: grid;
    grid-template-columns: 1.55rem minmax(0, 1fr);
    gap: 0.88rem;
    padding: 1.05rem 1.08rem 1.15rem;
    scroll-margin-top: calc(var(--topbar-height) + 1rem);
}

.patch-release + .patch-release[b-x5qcad3f58] {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 76%, rgba(255, 255, 255, 0.08));
}

.patch-release--latest[b-x5qcad3f58] {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 13%, transparent), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
}

.patch-release-rail[b-x5qcad3f58] {
    position: relative;
    display: flex;
    justify-content: center;
}

.patch-release-rail[b-x5qcad3f58]::before {
    content: "";
    position: absolute;
    top: 1.85rem;
    bottom: -1.15rem;
    width: 1px;
    background: color-mix(in srgb, var(--accent) 32%, var(--border-color));
}

.patch-release:last-child .patch-release-rail[b-x5qcad3f58]::before {
    bottom: 0;
}

.patch-release-marker[b-x5qcad3f58] {
    width: 0.72rem;
    height: 0.72rem;
    margin-top: 0.38rem;
    border: 2px solid color-mix(in srgb, white 18%, var(--accent) 82%);
    border-radius: 999px;
    background: var(--bg-body);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.patch-release--latest .patch-release-marker[b-x5qcad3f58] {
    background: var(--accent);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent),
        0 0 22px color-mix(in srgb, var(--accent) 48%, transparent);
}

.patch-release-body[b-x5qcad3f58] {
    min-width: 0;
    display: grid;
    gap: 0.72rem;
}

.patch-release-head[b-x5qcad3f58] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.patch-release-head-copy[b-x5qcad3f58] {
    min-width: 0;
    display: grid;
    gap: 0.42rem;
}

.patch-notes-latest-meta[b-x5qcad3f58],
.patch-release-meta[b-x5qcad3f58] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.42rem;
}

.patch-notes-version[b-x5qcad3f58] {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.28rem 0.5rem;
    border: 1px solid color-mix(in srgb, white 12%, var(--bg-accent-surface) 88%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-accent-surface) 22%, black 78%);
    color: color-mix(in srgb, white 86%, var(--bg-accent-surface) 14%);
}

.patch-notes-date[b-x5qcad3f58] {
    color: var(--text-muted);
    font-size: 0.77rem;
    font-weight: 700;
}

.patch-notes-latest-title[b-x5qcad3f58] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.12;
    letter-spacing: 0;
}

.patch-notes-latest-copy[b-x5qcad3f58] {
    font-size: 0.86rem;
}

.patch-notes-latest .patch-notes-label[b-x5qcad3f58] {
    color: color-mix(in srgb, white 84%, var(--bg-accent-surface) 16%);
}

.patch-notes-latest .patch-notes-version[b-x5qcad3f58] {
    border-color: color-mix(in srgb, white 18%, var(--bg-accent-surface) 82%);
    background: color-mix(in srgb, white 8%, var(--bg-accent-surface) 92%);
    color: #fff;
}

.patch-notes-latest .patch-notes-date[b-x5qcad3f58] {
    color: color-mix(in srgb, white 72%, var(--bg-accent-surface) 28%);
}

.patch-notes-latest .patch-notes-latest-title[b-x5qcad3f58] {
    color: #fff;
}

.patch-notes-latest .patch-notes-latest-copy[b-x5qcad3f58] {
    color: color-mix(in srgb, white 82%, var(--bg-accent-surface) 18%);
}

.patch-release-title[b-x5qcad3f58] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1.08;
    letter-spacing: 0;
}

.patch-release-status[b-x5qcad3f58] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0.3rem 0.52rem;
    border: 1px solid rgba(34, 197, 94, 0.32);
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.11);
    color: #86efac;
}

.patch-release-summary[b-x5qcad3f58] {
    max-width: 72ch;
    font-size: 0.9rem;
}

.patch-release-sections[b-x5qcad3f58] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding-top: 0.1rem;
}

.patch-release-section[b-x5qcad3f58] {
    min-width: 0;
    display: grid;
    gap: 0.45rem;
    padding-top: 0.72rem;
    border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color));
}

.patch-release-section-title[b-x5qcad3f58] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.patch-release-section-number[b-x5qcad3f58] {
    flex: 0 0 auto;
    color: color-mix(in srgb, white 58%, var(--accent) 42%);
    font-size: 0.68rem;
    font-weight: 900;
}

.patch-release-points[b-x5qcad3f58] {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.42rem;
    list-style: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.patch-release-points li[b-x5qcad3f58] {
    position: relative;
    padding-left: 0.8rem;
}

.patch-release-points li[b-x5qcad3f58]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 0.08rem;
    background: color-mix(in srgb, var(--accent) 70%, white);
    transform: rotate(45deg);
}

.patch-notes-footer[b-x5qcad3f58] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, rgba(255, 255, 255, 0.08));
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
}

.patch-notes-footer-copy[b-x5qcad3f58] {
    font-size: 0.88rem;
}

.patch-notes-footer-actions[b-x5qcad3f58] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

@media (max-width: 900px) {
    .patch-release-sections[b-x5qcad3f58] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .patch-notes-page[b-x5qcad3f58] {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        padding-inline: 0;
        gap: 0.72rem;
        overflow-x: hidden;
    }

    .patch-notes-title[b-x5qcad3f58] {
        font-size: 2.05rem;
    }

    .patch-notes-intro[b-x5qcad3f58] {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .patch-notes-latest[b-x5qcad3f58] {
        min-width: 0;
        padding: 0.72rem 0.76rem;
    }

    .patch-release[b-x5qcad3f58] {
        width: 100%;
        min-width: 0;
        grid-template-columns: 1.25rem minmax(0, 1fr);
        gap: 0.58rem;
        padding: 0.86rem 0.72rem 0.95rem;
        scroll-margin-top: calc(var(--phonebar-height, 3rem) + 0.75rem);
    }

    .patch-release-head[b-x5qcad3f58] {
        display: grid;
        gap: 0.5rem;
    }

    .patch-release-status[b-x5qcad3f58] {
        justify-self: start;
    }

    .patch-release-title[b-x5qcad3f58] {
        font-size: 1.08rem;
    }

    .patch-release-summary[b-x5qcad3f58] {
        font-size: 0.82rem;
        line-height: 1.52;
    }

    .patch-release-sections[b-x5qcad3f58] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.62rem;
    }

    .patch-notes-footer[b-x5qcad3f58] {
        display: grid;
        padding: 0.75rem;
    }
}

@media (max-width: 420px) {
    .patch-notes-back[b-x5qcad3f58],
    .patch-notes-link[b-x5qcad3f58] {
        width: 100%;
    }

    .patch-notes-title[b-x5qcad3f58] {
        font-size: 1.78rem;
    }

    .patch-notes-latest-meta[b-x5qcad3f58],
    .patch-release-meta[b-x5qcad3f58] {
        gap: 0.34rem;
    }

    .patch-notes-version[b-x5qcad3f58],
    .patch-release-status[b-x5qcad3f58] {
        min-height: 1.42rem;
        padding: 0.22rem 0.42rem;
        font-size: 0.6rem;
    }

    .patch-notes-date[b-x5qcad3f58] {
        font-size: 0.7rem;
    }

    .patch-release-section-title[b-x5qcad3f58] {
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .patch-notes-page[b-x5qcad3f58] {
        width: min(100%, 23.5rem);
        max-width: 23.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .patch-notes-back[b-x5qcad3f58],
    .patch-notes-link[b-x5qcad3f58] {
        transition: none;
    }
}
/* /Components/PlayerProfilePreviewTrigger.razor.rz.scp.css */
.player-profile-trigger[b-gomrri8apu],
.player-profile-trigger--static[b-gomrri8apu] {
    display: inline-flex;
    align-items: stretch;
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.player-profile-trigger[b-gomrri8apu] {
    cursor: pointer;
}

.player-profile-trigger:focus-visible[b-gomrri8apu] {
    outline: 2px solid color-mix(in srgb, var(--accent) 62%, white);
    outline-offset: 0.22rem;
    border-radius: 1rem;
}

.player-profile-trigger-default[b-gomrri8apu] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.player-profile-trigger-default-avatar[b-gomrri8apu] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    object-fit: cover;
}

.player-profile-trigger-default-avatar--placeholder[b-gomrri8apu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, white), color-mix(in srgb, var(--accent-secondary) 68%, var(--accent)));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
}

.player-profile-trigger-default-copy[b-gomrri8apu] {
    display: grid;
    gap: 0.16rem;
}

.player-profile-trigger-default-copy strong[b-gomrri8apu] {
    color: var(--text-primary);
    font-size: 0.92rem;
}

.player-profile-trigger-default-copy span[b-gomrri8apu] {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.friends-profile-overlay[b-gomrri8apu] {
    position: fixed;
    inset: 0;
    z-index: 120;
    overflow: hidden;
    padding: calc(var(--topbar-height) + 0.35rem) 0.75rem 0.85rem;
    background: rgba(5, 6, 10, 0.7);
    backdrop-filter: blur(14px);
    animation: friends-profile-overlay-in-b-gomrri8apu 0.24s ease both;
}

.friends-profile-page[b-gomrri8apu] {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    position: relative;
    min-height: 0;
    height: calc(100dvh - var(--topbar-height) - 1.2rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.45rem;
}

.friends-profile-cascade[b-gomrri8apu] {
    opacity: 0;
    animation: friends-profile-in-b-gomrri8apu 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
    will-change: transform, opacity;
}

@keyframes friends-profile-in-b-gomrri8apu {
    0% {
        opacity: 0;
        transform: translateY(20px) scaleY(0.9) scaleX(1.03);
    }
    55% {
        opacity: 1;
        transform: translateY(-4px) scaleY(1.03) scaleX(0.99);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes friends-profile-overlay-in-b-gomrri8apu {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.friends-profile-page-head[b-gomrri8apu] {
    min-height: 2.55rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
}

.friends-profile-page-heading[b-gomrri8apu] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.friends-profile-page-kicker[b-gomrri8apu],
.friends-profile-section-count[b-gomrri8apu],
.friends-profile-field-label[b-gomrri8apu],
.friends-profile-section-value[b-gomrri8apu],
.friends-profile-summary-label[b-gomrri8apu],
.friends-profile-stat-label[b-gomrri8apu],
.friends-profile-title-equipped[b-gomrri8apu],
.friends-profile-next-goal-tag[b-gomrri8apu] {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.friends-profile-surface[b-gomrri8apu] {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        color-mix(in srgb, var(--bg-surface) 90%, transparent);
    box-shadow: 0 28px 54px rgba(0, 0, 0, 0.22);
}

.friends-profile-surface[b-gomrri8apu]::before {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -8rem;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 72%);
    filter: blur(10px);
}

.friends-profile-surface > *[b-gomrri8apu] {
    position: relative;
    z-index: 1;
}

.friends-profile-close[b-gomrri8apu],
.friends-chat-action[b-gomrri8apu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.65rem;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.friends-profile-close:hover[b-gomrri8apu],
.friends-chat-action:hover[b-gomrri8apu] {
    transform: translateY(-1px);
}

.friends-chat-empty[b-gomrri8apu] {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 0.45rem;
    min-height: 13rem;
    padding: 1.5rem 1rem;
    color: var(--text-secondary);
}

.friends-chat-empty h2[b-gomrri8apu] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.35rem;
}

.friends-chat-empty-kicker[b-gomrri8apu] {
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.friends-chat-empty p[b-gomrri8apu] {
    margin: 0;
}

.friends-profile-board[b-gomrri8apu] {
    width: 100%;
    min-height: 0;
    height: 100%;
}

.friends-profile-board-grid[b-gomrri8apu] {
    display: grid;
    grid-template-columns: clamp(22rem, 29vw, 31rem) minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
    min-height: 100%;
    height: 100%;
}

.friends-profile-rail[b-gomrri8apu],
.friends-profile-board-main[b-gomrri8apu] {
    min-width: 0;
}

.friends-profile-rail[b-gomrri8apu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1rem 1rem 1.1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.friends-profile-avatar-stage[b-gomrri8apu] {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
}

.friends-profile-avatar-ring[b-gomrri8apu] {
    --ring-size: min(100%, 12.2rem);
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0.78rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.11) 0 54%, transparent 55%),
        conic-gradient(from -90deg, color-mix(in srgb, var(--accent) 92%, white) 0 var(--xp-progress, 0%), rgba(255, 255, 255, 0.09) var(--xp-progress, 0%) 100%);
    box-shadow: 0 0 20px var(--accent-subtle), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.friends-profile-avatar-ring[b-gomrri8apu]::before {
    content: "";
    position: absolute;
    inset: 0.4rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 68%);
}

.friends-profile-avatar-core[b-gomrri8apu] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    padding: 0.3rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
        color-mix(in srgb, var(--bg-elevated) 92%, black);
}

.friends-profile-avatar-placeholder[b-gomrri8apu],
.friends-profile-avatar-img[b-gomrri8apu] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.friends-profile-avatar-placeholder[b-gomrri8apu] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-elevated) 86%, black);
    color: #fff;
    font-size: clamp(3rem, 8vw, 4rem);
    font-weight: 800;
}

.friends-profile-avatar-level[b-gomrri8apu] {
    position: absolute;
    left: 50%;
    bottom: 0.95rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.22rem;
    transform: translateX(-50%);
    padding: 0.36rem 0.68rem 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(9, 11, 24, 0.76);
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(10px);
}

.friends-profile-avatar-level-label[b-gomrri8apu] {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.friends-profile-avatar-level-value[b-gomrri8apu] {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
}

.friends-profile-avatar-progress[b-gomrri8apu] {
    display: grid;
    gap: 0.18rem;
    justify-items: center;
    text-align: center;
}

.friends-profile-progress-value[b-gomrri8apu] {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 800;
}

.friends-profile-progress-meta[b-gomrri8apu] {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.friends-profile-nameplate[b-gomrri8apu],
.friends-profile-description-block[b-gomrri8apu],
.friends-profile-highlights-block[b-gomrri8apu] {
    display: grid;
    gap: 0.55rem;
}

.friends-profile-title-slot[b-gomrri8apu] {
    display: flex;
    justify-content: flex-start;
    width: fit-content;
    min-width: 0;
    align-items: center;
}

.friends-profile-equipped-title[b-gomrri8apu] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: color-mix(in srgb, var(--accent) 90%, white);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.friends-profile-equipped-title--empty[b-gomrri8apu] {
    color: var(--text-muted);
}

.friends-profile-name-slot[b-gomrri8apu] {
    min-height: 4rem;
}

.friends-profile-display-name-shell[b-gomrri8apu] {
    width: 100%;
    min-height: 4rem;
    padding: 0.9rem 1rem;
    box-sizing: border-box;
    border-radius: 1rem;
    display: flex;
    align-items: center;
}

.friends-profile-display-name[b-gomrri8apu] {
    display: block;
    color: var(--text-primary);
    font-size: clamp(2rem, 3vw, 2.65rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.045em;
}

.friends-profile-player-code[b-gomrri8apu] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.friends-profile-description-slot[b-gomrri8apu] {
    min-height: 7.35rem;
}

.friends-profile-bio[b-gomrri8apu] {
    display: block;
    margin: 0;
    min-height: 7.35rem;
    padding: 0.9rem 1rem;
    box-sizing: border-box;
    border-radius: 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022)),
        color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.friends-profile-bio--placeholder[b-gomrri8apu],
.friends-profile-highlights-empty[b-gomrri8apu],
.friends-profile-achievement-desc[b-gomrri8apu],
.friends-profile-achievement-date[b-gomrri8apu],
.friends-profile-summary-meta[b-gomrri8apu],
.friends-profile-summary-support[b-gomrri8apu],
.friends-profile-highlight-stat-label[b-gomrri8apu],
.friends-profile-highlight-achievement-name[b-gomrri8apu],
.friends-profile-progress-meta[b-gomrri8apu] {
    color: var(--text-muted);
}

.friends-profile-highlights-head[b-gomrri8apu],
.friends-profile-highlights-group-head[b-gomrri8apu],
.friends-profile-summary-head[b-gomrri8apu],
.friends-profile-section-head[b-gomrri8apu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.friends-profile-highlights-group + .friends-profile-highlights-group[b-gomrri8apu],
.friends-profile-dashboard-section + .friends-profile-dashboard-section[b-gomrri8apu] {
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.friends-profile-highlight-stat-grid[b-gomrri8apu],
.friends-profile-achievements-grid[b-gomrri8apu] {
    display: grid;
    gap: 0.5rem;
}

.friends-profile-highlight-stat-grid[b-gomrri8apu] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.friends-profile-highlight-stat[b-gomrri8apu],
.friends-profile-highlight-achievement[b-gomrri8apu],
.friends-profile-achievement-card[b-gomrri8apu],
.friends-profile-summary-grid[b-gomrri8apu],
.friends-profile-title-card[b-gomrri8apu],
.friends-profile-next-goal[b-gomrri8apu] {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.friends-profile-highlight-stat[b-gomrri8apu],
.friends-profile-highlight-achievement[b-gomrri8apu],
.friends-profile-achievement-card[b-gomrri8apu],
.friends-profile-title-card[b-gomrri8apu] {
    background: rgba(255, 255, 255, 0.025);
}

.friends-profile-highlight-stat[b-gomrri8apu] {
    display: grid;
    gap: 0.12rem;
    padding: 0.58rem 0.68rem;
    border-radius: 0.8rem;
}

.friends-profile-highlight-stat-value[b-gomrri8apu],
.friends-profile-summary-value[b-gomrri8apu],
.friends-profile-stat-value[b-gomrri8apu],
.friends-profile-achievement-name[b-gomrri8apu] {
    color: var(--text-primary);
    font-weight: 800;
}

.friends-profile-highlight-stat-value[b-gomrri8apu] {
    font-size: 0.98rem;
}

.friends-profile-highlight-achievement-list[b-gomrri8apu] {
    display: grid;
    gap: 0.42rem;
}

.friends-profile-highlight-achievement[b-gomrri8apu] {
    display: flex;
    align-items: center;
    gap: 0.58rem;
    min-width: 0;
    padding: 0.5rem 0.64rem;
    border-radius: 0.78rem;
}

.friends-profile-highlight-achievement-icon[b-gomrri8apu] {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: 1rem;
    flex-shrink: 0;
}

.friends-profile-highlight-achievement-name[b-gomrri8apu] {
    min-width: 0;
    font-size: 0.8rem;
}

.friends-profile-summary-grid[b-gomrri8apu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.friends-profile-summary-card[b-gomrri8apu] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.9rem 0.95rem;
}

.friends-profile-summary-card:first-child[b-gomrri8apu] {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.friends-profile-summary-link[b-gomrri8apu] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
}

.friends-profile-rank-row[b-gomrri8apu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.friends-profile-rank-icon[b-gomrri8apu] {
    font-size: 1.75rem;
    line-height: 1;
}

.friends-profile-rank-copy[b-gomrri8apu] {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.friends-profile-summary-value[b-gomrri8apu] {
    font-size: 1.02rem;
}

.friends-profile-progress-bar[b-gomrri8apu] {
    height: 0.55rem;
    margin-top: auto;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.friends-profile-progress-bar-fill[b-gomrri8apu] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
    box-shadow: 0 0 12px var(--accent-glow);
}

.friends-profile-board-main[b-gomrri8apu] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 100%;
    overflow: hidden;
}

.friends-profile-dashboard-section[b-gomrri8apu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.15rem;
    min-width: 0;
}

.friends-profile-section-title[b-gomrri8apu] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 700;
}

.friends-profile-titles-list[b-gomrri8apu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.friends-profile-title-card[b-gomrri8apu] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.72rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.04);
}

.friends-profile-title-card.equipped[b-gomrri8apu] {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.friends-profile-title-card.locked[b-gomrri8apu],
.friends-profile-achievement-card.locked[b-gomrri8apu] {
    opacity: 0.46;
}

.friends-profile-title-label[b-gomrri8apu] {
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 700;
}

.friends-profile-stats-grid[b-gomrri8apu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.3rem 0.85rem;
}

.friends-profile-stat-card[b-gomrri8apu] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.35rem 0 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.friends-profile-stat-value[b-gomrri8apu] {
    font-size: 1.12rem;
    line-height: 1;
}

.friends-profile-achievements-section[b-gomrri8apu] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
}

.friends-profile-next-goal[b-gomrri8apu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.9rem;
    border-radius: 0.9rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.friends-profile-next-goal-tag[b-gomrri8apu] {
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    color: color-mix(in srgb, var(--accent) 88%, white);
    flex-shrink: 0;
}

.friends-profile-next-goal-icon[b-gomrri8apu] {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.friends-profile-next-goal-copy[b-gomrri8apu] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.friends-profile-next-goal-name[b-gomrri8apu] {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.friends-profile-next-goal-desc[b-gomrri8apu] {
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.friends-profile-achievements-grid[b-gomrri8apu] {
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    overflow: auto;
    padding-right: 0.35rem;
    align-content: start;
    min-height: 0;
}

.friends-profile-achievement-card[b-gomrri8apu] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.78rem 0.86rem;
    border-radius: 0.9rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.friends-profile-achievement-icon-wrap[b-gomrri8apu] {
    width: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.friends-profile-achievement-card.unlocked .friends-profile-achievement-icon-wrap[b-gomrri8apu] {
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.friends-profile-achievement-icon[b-gomrri8apu] {
    font-size: 1.2rem;
}

.friends-profile-achievement-body[b-gomrri8apu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.friends-profile-achievement-name[b-gomrri8apu] {
    font-size: 0.84rem;
}

.friends-profile-achievement-desc[b-gomrri8apu],
.friends-profile-achievement-date[b-gomrri8apu] {
    font-size: 0.7rem;
}

.friends-profile-achievement-date[b-gomrri8apu] {
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.1rem;
}

@media (max-width: 980px) {
    .friends-profile-board-grid[b-gomrri8apu] {
        grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .friends-profile-overlay[b-gomrri8apu] {
        overflow: auto;
    }

    .friends-profile-page[b-gomrri8apu] {
        height: auto;
        display: flex;
    }

    .friends-profile-board[b-gomrri8apu],
    .friends-profile-board-grid[b-gomrri8apu],
    .friends-profile-board-main[b-gomrri8apu],
    .friends-profile-achievements-section[b-gomrri8apu] {
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    .friends-profile-board-grid[b-gomrri8apu],
    .friends-profile-achievements-grid[b-gomrri8apu] {
        grid-template-columns: 1fr;
    }

    .friends-profile-rail[b-gomrri8apu] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        overflow: visible;
    }

    .friends-profile-achievements-grid[b-gomrri8apu] {
        padding-right: 0;
    }
}

@media (max-width: 640px) {
    .friends-profile-page-head[b-gomrri8apu] {
        grid-template-columns: 1fr;
        display: grid;
    }

    .friends-profile-close[b-gomrri8apu] {
        justify-self: end;
    }

    .friends-profile-overlay[b-gomrri8apu] {
        padding:
            calc(var(--topbar-height) + 0.7rem)
            max(0.7rem, env(safe-area-inset-right))
            calc(0.9rem + env(safe-area-inset-bottom))
            max(0.7rem, env(safe-area-inset-left));
    }

    .friends-profile-rail[b-gomrri8apu],
    .friends-profile-dashboard-section[b-gomrri8apu] {
        padding: 1rem;
    }

    .friends-profile-summary-grid[b-gomrri8apu] {
        grid-template-columns: 1fr;
    }

    .friends-profile-summary-card:first-child[b-gomrri8apu] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .friends-profile-highlight-stat-grid[b-gomrri8apu],
    .friends-profile-achievements-grid[b-gomrri8apu] {
        grid-template-columns: 1fr;
    }

    .friends-profile-stats-grid[b-gomrri8apu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem 0.75rem;
    }

    .friends-profile-avatar-ring[b-gomrri8apu] {
        --ring-size: min(100%, 12rem);
    }

    .friends-profile-display-name[b-gomrri8apu] {
        font-size: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-profile-trigger[b-gomrri8apu],
    .friends-profile-overlay[b-gomrri8apu],
    .friends-profile-cascade[b-gomrri8apu],
    .friends-profile-close[b-gomrri8apu],
    .friends-chat-action[b-gomrri8apu] {
        animation: none;
        transition: none;
    }
}
/* /Components/PracticeProgressBar.razor.rz.scp.css */
.level-progress-bar-row[b-w5w6275xpn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 0.4rem;
}

.lp-bar[b-w5w6275xpn] {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    contain: paint;
}

.lp-bar-fill[b-w5w6275xpn] {
    height: 100%;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--accent) 88%, #ffffff 12%) 0%,
            var(--accent) 55%,
            color-mix(in srgb, var(--accent) 88%, #ffffff 18%) 100%);
    border-radius: 999px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 42%, transparent);
    overflow: hidden;
    position: relative;
    transform-origin: left center;
    will-change: width;
}

.lp-bar-fill--animate[b-w5w6275xpn] {
    animation: lp-fill-update-b-w5w6275xpn 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lp-bar-fill--animate[b-w5w6275xpn]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    opacity: 0;
    transform: translateX(-100%);
    animation: lp-fill-sheen-b-w5w6275xpn 0.48s ease-out both;
}

.lp-label[b-w5w6275xpn] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

@keyframes lp-fill-update-b-w5w6275xpn {
    from {
        width: var(--lp-progress-start, 0%);
    }

    to {
        width: var(--lp-progress-end, 0%);
    }
}

@keyframes lp-fill-sheen-b-w5w6275xpn {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }

    22% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-bar-fill[b-w5w6275xpn],
    .lp-bar-fill--animate[b-w5w6275xpn],
    .lp-bar-fill--animate[b-w5w6275xpn]::after {
        animation: none;
        transition: none;
    }
}
/* /Components/PracticeQuestionSurface.razor.rz.scp.css */
[b-2wkgwupn0n] .mode-pills {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    flex-wrap: wrap;
}

[b-2wkgwupn0n] .choice-direction-pills {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    flex-wrap: wrap;
}

[b-2wkgwupn0n] .choice-direction-pill {
    padding: 0.28rem 0.72rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-2wkgwupn0n] .choice-direction-pill.active {
    border-color: var(--accent);
    color: var(--accent);
}

[b-2wkgwupn0n] .mode-pill {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-2wkgwupn0n] .mode-pill.active {
    border-color: var(--accent);
    color: var(--accent);
}

[b-2wkgwupn0n] .mode-pill:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-voice-skip[b-2wkgwupn0n] {
    display: block;
    margin: 0.8rem auto 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.74rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.2rem 0.4rem;
    transition: color 0.12s ease;
}

.btn-voice-skip:hover[b-2wkgwupn0n] {
    color: var(--text-secondary);
}

.kana-stage[b-2wkgwupn0n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: clamp(0.5rem, min(5vw, 4svh), 3rem) 0 clamp(0.5rem, min(4vw, 3svh), 2.5rem);
    margin-bottom: clamp(0.5rem, min(3vw, 2svh), 2rem);
}

.practice-question-shell--legacy[b-2wkgwupn0n],
.practice-answer-shell--legacy[b-2wkgwupn0n] {
    display: contents;
}

.prompt-region[b-2wkgwupn0n] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.prompt-region-body[b-2wkgwupn0n] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.prompt-slot[b-2wkgwupn0n] {
    width: 100%;
    min-height: clamp(7.5rem, min(24vw, 18svh), 13rem);
    display: grid;
    place-items: center;
    overflow: visible;
}

.question-block[b-2wkgwupn0n] {
    width: 100%;
    display: contents;
}

.question-block--prompt-first[b-2wkgwupn0n] {
    display: block;
    width: 100%;
}

.practice-question-shell[b-2wkgwupn0n],
.practice-answer-section[b-2wkgwupn0n],
.practice-prompt-section[b-2wkgwupn0n] {
    width: 100%;
}

.practice-active-body[b-2wkgwupn0n] {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: clamp(0.45rem, 1vw, 0.8rem);
}

.practice-prompt-section[b-2wkgwupn0n] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.35rem, 1vw, 0.65rem);
}

.practice-prompt-controls[b-2wkgwupn0n] {
    width: min(100%, 760px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.practice-prompt-controls--legacy[b-2wkgwupn0n] {
    width: min(100%, 720px);
    margin-bottom: 0.85rem;
}

.practice-answer-shell[b-2wkgwupn0n] {
    width: min(100%, 720px);
    margin-inline: auto;
}

.practice-prompt-toolbar[b-2wkgwupn0n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin-inline: auto;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.practice-prompt-toolbar-main[b-2wkgwupn0n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.practice-prompt-toolbar-side[b-2wkgwupn0n] {
    display: inline-flex;
}

.practice-furi-display[b-2wkgwupn0n] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(0.05rem, calc(2.5cqi / var(--segs, 8)), 0.25rem);
    width: 100%;
    text-align: center;
    container-type: inline-size;
}

.pf-word[b-2wkgwupn0n] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
}

.pf-word-segs[b-2wkgwupn0n] {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.05rem, calc(2.5cqi / var(--segs, 8)), 0.25rem);
}

.pf-seg[b-2wkgwupn0n] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.pf-reading[b-2wkgwupn0n] {
    font-size: clamp(0.55rem, calc(13cqi / var(--segs, 8)), 0.9rem);
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    font-family: system-ui, -apple-system, sans-serif;
}

.pf-kana[b-2wkgwupn0n] {
    font-size: clamp(1.8rem, calc(78cqi / var(--segs, 8)), 5rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

.pf-gap[b-2wkgwupn0n] {
    width: clamp(0.2rem, calc(6cqi / var(--segs, 8)), 0.8rem);
}

.pf-particle .pf-reading[b-2wkgwupn0n] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.pf-particle .pf-kana[b-2wkgwupn0n] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.pf-informal[b-2wkgwupn0n] {
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.72;
    line-height: 1.35;
}

.practice-kanji-display[b-2wkgwupn0n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    max-width: min(100%, 40rem);
    text-align: center;
}

.practice-kanji-reading[b-2wkgwupn0n] {
    font-size: clamp(0.92rem, min(2.6vw, 2.1svh), 1.12rem);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    line-height: 1.4;
}

.practice-kanji-text[b-2wkgwupn0n] {
    font-size: clamp(2.25rem, min(10vw, 8svh), 5rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-primary);
    word-break: keep-all;
}

.practice-kanji-meaning[b-2wkgwupn0n] {
    font-size: 1rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.listening-reveal-kanji[b-2wkgwupn0n] {
    gap: 0.4rem;
}

.tts-prompt-btn[b-2wkgwupn0n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--accent-glow);
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tts-prompt-btn:hover[b-2wkgwupn0n] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: scale(1.08);
}

.tts-prompt-btn:active[b-2wkgwupn0n] {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.tts-prompt-icon[b-2wkgwupn0n] {
    width: 0.95rem;
    height: 0.95rem;
}

.tts-label[b-2wkgwupn0n] {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.kana-character[b-2wkgwupn0n] {
    font-size: clamp(4rem, min(22vw, 20svh), 13rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    max-width: min(100%, 40rem);
    white-space: nowrap;
    word-break: keep-all;
    text-wrap: nowrap;
    overflow-wrap: normal;
    text-align: center;
}

.kana-character.prompt-len-1[b-2wkgwupn0n] {
    font-size: clamp(4rem, min(22vw, 20svh), 13rem);
}

.kana-character.prompt-len-2[b-2wkgwupn0n] {
    font-size: clamp(3.7rem, min(19vw, 16svh), 10rem);
}

.kana-character.prompt-len-3[b-2wkgwupn0n] {
    font-size: clamp(3.2rem, min(16vw, 13svh), 8rem);
}

.kana-character.prompt-len-4[b-2wkgwupn0n] {
    font-size: clamp(2.7rem, min(13vw, 11svh), 6.6rem);
}

.kana-character.prompt-len-5[b-2wkgwupn0n] {
    font-size: clamp(2.3rem, min(11vw, 9svh), 5.6rem);
}

.kana-character.prompt-len-6plus[b-2wkgwupn0n] {
    font-size: clamp(1.9rem, min(9vw, 8svh), 4.9rem);
}

.kana-character.romaji-prompt[b-2wkgwupn0n] {
    font-size: clamp(2.7rem, min(11vw, 9svh), 5.4rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.kana-character.vocab-prompt[b-2wkgwupn0n] {
    font-size: clamp(2.5rem, min(12vw, 10svh), 6rem);
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
}

.kana-character.vocab-prompt.prompt-len-6plus[b-2wkgwupn0n] {
    font-size: clamp(1.5rem, min(11vw, 9svh), 5rem);
    max-width: 100%;
}

.kana-character.vocab-english-prompt[b-2wkgwupn0n] {
    font-size: clamp(1.8rem, min(8vw, 7svh), 3.5rem);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.kana-stage.empty[b-2wkgwupn0n] {
    padding: 4rem 0;
}

.kana-empty[b-2wkgwupn0n] {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.kana-enter[b-2wkgwupn0n] {
    animation: kana-in-b-2wkgwupn0n 0.42s cubic-bezier(0.34, 1.8, 0.64, 1) both;
}

@keyframes kana-in-b-2wkgwupn0n {
    0% {
        opacity: 1;
        transform: translateX(14px) scaleX(1.06) scaleY(0.94);
        filter: blur(0.6px);
    }
    55% {
        opacity: 1;
        transform: translateX(-5px) scaleX(0.96) scaleY(1.04);
        filter: blur(0);
    }
    78% {
        transform: translateX(2px) scaleX(1.01) scaleY(0.99);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

[b-2wkgwupn0n] .answer-mode-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

[b-2wkgwupn0n] .answer-mode-bar .choice-direction-pills {
    margin-top: 0;
}

[b-2wkgwupn0n] .answer-mode-bar--prompt {
    margin-bottom: clamp(0.4rem, 1.2vw, 0.85rem);
    width: 100%;
}

[b-2wkgwupn0n] .answer-mode-bar--prompt .mode-pills,
[b-2wkgwupn0n] .answer-mode-bar--prompt .choice-direction-pills {
    flex-wrap: wrap;
}

[b-2wkgwupn0n] .answer-mode-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    opacity: 0.6;
}

.answer-area[b-2wkgwupn0n] {
    position: relative;
    width: 100%;
    margin-bottom: clamp(0.5rem, min(3vw, 2svh), 2rem);
}

.choices-grid[b-2wkgwupn0n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.choice-btn[b-2wkgwupn0n] {
    position: relative;
    padding: 1.1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: clamp(1.35rem, min(3.6vw, 3.4svh), 1.65rem);
    font-weight: 600;
    line-height: 1.05;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    cursor: pointer;
    user-select: none;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease,
        opacity 0.25s ease;
    animation: choice-in-b-2wkgwupn0n 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

.choices-grid .choice-btn:nth-child(1)[b-2wkgwupn0n] { --i: 0; }
.choices-grid .choice-btn:nth-child(2)[b-2wkgwupn0n] { --i: 1; }
.choices-grid .choice-btn:nth-child(3)[b-2wkgwupn0n] { --i: 2; }
.choices-grid .choice-btn:nth-child(4)[b-2wkgwupn0n] { --i: 3; }

@keyframes choice-in-b-2wkgwupn0n {
    0% {
        opacity: 1;
        transform: translateY(8px) scaleY(0.94) scaleX(1.03);
    }
    50% {
        opacity: 1;
        transform: translateY(-4px) scaleY(1.05) scaleX(0.97);
    }
    75% {
        transform: translateY(1px) scaleY(0.99) scaleX(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.choice-btn:not(.correct):not(.wrong):not(.dimmed):hover:not(:disabled)[b-2wkgwupn0n] {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: translateY(-3px) scale(1.025);
    box-shadow: 0 0 16px var(--accent-glow);
}

.choice-btn:not(.correct):not(.wrong):not(.dimmed):active:not(:disabled)[b-2wkgwupn0n] {
    transform: translateY(2px) scaleY(0.93) scaleX(1.04);
    transition-duration: 0.06s;
}

.choice-btn.correct[b-2wkgwupn0n] {
    border-color: var(--success);
    background: var(--success-subtle);
    color: var(--success);
    font-weight: 600;
    transition:
        transform 0.08s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.12s ease,
        opacity 0.12s ease;
    animation: pop-correct-b-2wkgwupn0n 0.34s cubic-bezier(0.34, 1.8, 0.64, 1);
    animation-delay: 0s;
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.35), inset 0 0 14px rgba(34, 197, 94, 0.08);
}

@keyframes pop-correct-b-2wkgwupn0n {
    0% { transform: scale(1); }
    20% { transform: scaleX(1.14) scaleY(0.9); }
    45% { transform: scaleX(0.95) scaleY(1.08); }
    70% { transform: scaleX(1.02) scaleY(0.98); }
    100% { transform: scale(1); }
}

.choice-btn.wrong[b-2wkgwupn0n] {
    border-color: var(--error);
    background: var(--error-subtle);
    color: var(--error);
    transition:
        transform 0.06s ease,
        box-shadow 0.1s ease,
        opacity 0.12s ease;
    animation: shake-wrong-b-2wkgwupn0n 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    animation-delay: 0s;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.3);
}

@keyframes shake-wrong-b-2wkgwupn0n {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    12% { transform: translateX(-7px) rotate(-2deg) scaleX(0.98); }
    28% { transform: translateX(7px) rotate(2deg) scaleX(1.02); }
    44% { transform: translateX(-4px) rotate(-1deg); }
    60% { transform: translateX(3px) rotate(0.6deg); }
    76% { transform: translateX(-1px); }
}

.choice-btn.dimmed[b-2wkgwupn0n] {
    opacity: 0.2;
    cursor: pointer;
    transform: scale(0.97);
    animation: none;
    transition:
        opacity 0.1s ease,
        transform 0.1s ease;
}

.feedback[b-2wkgwupn0n] {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + clamp(0.42rem, 1.2vw, 0.85rem));
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0;
}

.feedback-enter[b-2wkgwupn0n] {
    animation: feedback-in-b-2wkgwupn0n 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.feedback-enter.feedback--wrong[b-2wkgwupn0n] {
    animation: feedback-wrong-in-b-2wkgwupn0n 0.2s ease-out both;
}

@keyframes feedback-in-b-2wkgwupn0n {
    0% {
        opacity: 1;
        transform: translateY(14px) scale(0.88);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes feedback-wrong-in-b-2wkgwupn0n {
    0% {
        opacity: 1;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fb-msg[b-2wkgwupn0n] {
    font-size: 0.95rem;
    font-weight: 600;
}

.fb-msg.wrong[b-2wkgwupn0n] { color: var(--error); }
.fb-msg.correct[b-2wkgwupn0n] { color: var(--success); }

.type-area[b-2wkgwupn0n] {
    width: 100%;
}

.type-input-row[b-2wkgwupn0n] {
    display: flex;
    gap: 0.5rem;
}

.type-input[b-2wkgwupn0n] {
    flex: 1;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    animation: choice-in-b-2wkgwupn0n 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.type-input[b-2wkgwupn0n]::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.type-input:focus[b-2wkgwupn0n] {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-subtle);
}

.type-input.correct[b-2wkgwupn0n] {
    border-color: var(--success);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.25);
    color: var(--success);
}

.type-input.wrong[b-2wkgwupn0n] {
    border-color: var(--error);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.btn-submit[b-2wkgwupn0n] {
    padding: 1rem 1.4rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s ease;
    animation: choice-in-b-2wkgwupn0n 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.04s;
}

.btn-submit:hover:not(:disabled)[b-2wkgwupn0n] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.btn-submit:disabled[b-2wkgwupn0n] {
    opacity: 0.3;
    cursor: not-allowed;
}

.voice-area[b-2wkgwupn0n] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-height: 100px;
    justify-content: center;
}

.voice-btn[b-2wkgwupn0n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.75rem 3.5rem;
    border: 1.5px solid var(--border-color);
    border-radius: 1rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.18s ease;
    animation: choice-in-b-2wkgwupn0n 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.voice-btn:hover:not(:disabled)[b-2wkgwupn0n] {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 20px var(--accent-glow);
}

.voice-btn:active:not(:disabled)[b-2wkgwupn0n] {
    transform: translateY(2px) scaleY(0.92) scaleX(1.04);
    transition-duration: 0.06s;
}

.voice-btn.listening[b-2wkgwupn0n] {
    border-color: var(--accent);
    box-shadow: 0 0 24px var(--accent-glow);
    cursor: default;
}

.voice-label[b-2wkgwupn0n] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}

.voice-result[b-2wkgwupn0n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: feedback-in-b-2wkgwupn0n 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.voice-heard[b-2wkgwupn0n] {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.voice-error[b-2wkgwupn0n] {
    font-size: 0.75rem;
    color: var(--error);
    text-align: center;
}

.voice-debug[b-2wkgwupn0n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    margin-top: 0.5rem;
    font-size: 0.62rem;
    color: var(--text-muted);
    opacity: 0.5;
    font-family: monospace;
}

.btn-next[b-2wkgwupn0n] {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 0.4rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.btn-next:hover[b-2wkgwupn0n] {
    background: var(--accent-hover);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 18px var(--accent-glow);
}

.btn-next:active[b-2wkgwupn0n] {
    transform: translateY(2px) scaleY(0.92) scaleX(1.05);
    transition-duration: 0.06s;
}

.kana-derivation[b-2wkgwupn0n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.kana-deriv-base[b-2wkgwupn0n],
.kana-deriv-result[b-2wkgwupn0n] {
    color: var(--text-primary);
}

.kana-deriv-mark[b-2wkgwupn0n] {
    color: var(--accent);
}

.kana-deriv-op[b-2wkgwupn0n] {
    opacity: 0.7;
}

.vocab-toggle[b-2wkgwupn0n] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vocab-toggle:hover[b-2wkgwupn0n] {
    border-color: var(--accent);
    color: var(--accent);
}

.vocab-toggle:disabled[b-2wkgwupn0n] {
    opacity: 0.35;
    cursor: not-allowed;
}

.vocab-toggle:disabled:hover[b-2wkgwupn0n] {
    border-color: var(--border-color);
    color: var(--text-muted);
    background: transparent;
}

.vocab-toggle.active[b-2wkgwupn0n] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.prompt-informal[b-2wkgwupn0n] {
    display: block;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.65;
    letter-spacing: 0.02em;
    text-align: center;
    margin-top: 0.2rem;
}

.vocab-feedback-hint[b-2wkgwupn0n] {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.01em;
    order: 1;
}

.listening-prompt[b-2wkgwupn0n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
}

.listening-play-btn[b-2wkgwupn0n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--accent-subtle);
    color: var(--accent);
    cursor: pointer;
    transition: all 0.18s ease;
    animation: choice-in-b-2wkgwupn0n 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.listening-play-btn:hover[b-2wkgwupn0n] {
    background: var(--accent-subtle);
    transform: scale(1.06);
    box-shadow: 0 0 20px var(--accent-glow);
}

.listening-play-btn:active[b-2wkgwupn0n] {
    transform: scale(0.95);
}

.listening-play-icon[b-2wkgwupn0n] {
    width: 2rem;
    height: 2rem;
}

.listening-hint-text[b-2wkgwupn0n] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.tts-error[b-2wkgwupn0n] {
    display: block;
    max-width: min(100%, 30rem);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.35;
}

.listening-area[b-2wkgwupn0n] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.listening-area .choices-grid[b-2wkgwupn0n] {
    width: 100%;
}

.listening-reveal[b-2wkgwupn0n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0;
    animation: feedback-in-b-2wkgwupn0n 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.listening-reveal-furi[b-2wkgwupn0n] {
    justify-content: center;
}

.listening-reveal-meaning[b-2wkgwupn0n] {
    font-size: 1rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.listening-replay-btn[b-2wkgwupn0n] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--accent-glow);
    border-radius: 999px;
    background: transparent;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.listening-replay-btn:hover[b-2wkgwupn0n] {
    background: var(--accent-subtle);
    border-color: var(--accent);
}

.listening-replay-icon[b-2wkgwupn0n] {
    width: 0.85rem;
    height: 0.85rem;
}

.hint-btn[b-2wkgwupn0n] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.5rem;
}

.hint-btn:hover[b-2wkgwupn0n] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.hint-btn--hidden[b-2wkgwupn0n] {
    visibility: hidden;
    pointer-events: none;
}

.hint-icon[b-2wkgwupn0n] {
    width: 0.9rem;
    height: 0.9rem;
}

.hint-label[b-2wkgwupn0n] {
    letter-spacing: 0.02em;
}

.practice-prompt-toolbar .hint-btn[b-2wkgwupn0n] {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    [b-2wkgwupn0n] .mode-pills,
    [b-2wkgwupn0n] .choice-direction-pills {
        gap: 0.22rem;
    }

    [b-2wkgwupn0n] .mode-pill,
    [b-2wkgwupn0n] .choice-direction-pill {
        padding: 0.2rem 0.52rem;
        font-size: 0.64rem;
    }

    .btn-voice-skip[b-2wkgwupn0n] {
        margin-top: 0.35rem;
        font-size: 0.66rem;
    }

    .kana-stage[b-2wkgwupn0n] {
        gap: 0.26rem;
        padding: 0.32rem 0 0.38rem;
        margin-bottom: 0.28rem;
    }

    .prompt-region[b-2wkgwupn0n],
    .prompt-region-body[b-2wkgwupn0n] {
        gap: 0.24rem;
    }

    .prompt-slot[b-2wkgwupn0n] {
        min-height: clamp(4.2rem, 15svh, 6.7rem);
    }

    .practice-active-body[b-2wkgwupn0n] {
        gap: 0.34rem;
    }

    .practice-prompt-controls[b-2wkgwupn0n] {
        width: 100%;
        gap: 0.42rem;
    }

    .practice-prompt-controls--legacy[b-2wkgwupn0n] {
        margin-bottom: 0.42rem;
    }

    .practice-answer-shell[b-2wkgwupn0n] {
        width: 100%;
    }

    .practice-prompt-toolbar[b-2wkgwupn0n] {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 0.3rem;
        flex-wrap: wrap;
    }

    .practice-prompt-toolbar-main[b-2wkgwupn0n] {
        gap: 0.3rem;
    }

    .practice-prompt-toolbar-side[b-2wkgwupn0n] {
        justify-self: auto;
    }

    .practice-furi-display[b-2wkgwupn0n],
    .pf-word-segs[b-2wkgwupn0n] {
        gap: clamp(0.03rem, calc(1.3cqi / var(--segs, 8)), 0.12rem);
    }

    .pf-word[b-2wkgwupn0n] {
        gap: 0.14rem;
    }

    .pf-seg[b-2wkgwupn0n] {
        gap: 0.08rem;
    }

    .pf-reading[b-2wkgwupn0n] {
        font-size: clamp(0.48rem, calc(9cqi / var(--segs, 8)), 0.66rem);
    }

    .pf-kana[b-2wkgwupn0n] {
        font-size: clamp(1.28rem, calc(44cqi / var(--segs, 8)), 2.75rem);
    }

    .pf-gap[b-2wkgwupn0n] {
        width: clamp(0.12rem, calc(3cqi / var(--segs, 8)), 0.38rem);
    }

    .pf-informal[b-2wkgwupn0n],
    .prompt-informal[b-2wkgwupn0n] {
        font-size: 0.62rem;
        line-height: 1.25;
    }

    .practice-kanji-display[b-2wkgwupn0n],
    .listening-reveal-kanji[b-2wkgwupn0n] {
        gap: 0.22rem;
    }

    .practice-kanji-reading[b-2wkgwupn0n] {
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .practice-kanji-text[b-2wkgwupn0n] {
        font-size: clamp(1.7rem, min(10vw, 8.5svh), 2.85rem);
        line-height: 1.08;
    }

    .practice-kanji-meaning[b-2wkgwupn0n],
    .listening-reveal-meaning[b-2wkgwupn0n] {
        font-size: 0.76rem;
        line-height: 1.25;
    }

    .tts-prompt-btn[b-2wkgwupn0n] {
        gap: 0.24rem;
        padding: 0.26rem 0.62rem;
    }

    .tts-prompt-icon[b-2wkgwupn0n] {
        width: 0.75rem;
        height: 0.75rem;
    }

    .tts-label[b-2wkgwupn0n] {
        font-size: 0.62rem;
    }

    .kana-character[b-2wkgwupn0n],
    .kana-character.prompt-len-1[b-2wkgwupn0n] {
        font-size: clamp(2.35rem, min(17vw, 13svh), 4.35rem);
    }

    .kana-character.prompt-len-2[b-2wkgwupn0n] {
        font-size: clamp(2.15rem, min(14vw, 11svh), 3.7rem);
    }

    .kana-character.prompt-len-3[b-2wkgwupn0n] {
        font-size: clamp(1.95rem, min(12vw, 9.5svh), 3.2rem);
    }

    .kana-character.prompt-len-4[b-2wkgwupn0n] {
        font-size: clamp(1.72rem, min(10vw, 8svh), 2.75rem);
    }

    .kana-character.prompt-len-5[b-2wkgwupn0n] {
        font-size: clamp(1.52rem, min(8.5vw, 7svh), 2.35rem);
    }

    .kana-character.prompt-len-6plus[b-2wkgwupn0n] {
        font-size: clamp(1.28rem, min(7.2vw, 6svh), 2rem);
    }

    .kana-character.romaji-prompt[b-2wkgwupn0n] {
        font-size: clamp(1.55rem, min(8vw, 6.5svh), 2.75rem);
    }

    .kana-character.vocab-prompt[b-2wkgwupn0n] {
        font-size: clamp(1.42rem, min(8vw, 6.8svh), 2.55rem);
        line-height: 1.12;
    }

    .kana-character.vocab-prompt.prompt-len-6plus[b-2wkgwupn0n] {
        font-size: clamp(1.1rem, min(6.5vw, 5.5svh), 1.9rem);
        white-space: normal;
        text-wrap: balance;
    }

    .kana-character.vocab-english-prompt[b-2wkgwupn0n] {
        font-size: clamp(1rem, min(5.5vw, 4.8svh), 1.65rem);
        line-height: 1.16;
        white-space: normal;
        text-wrap: balance;
    }

    .kana-stage.empty[b-2wkgwupn0n] {
        padding: 1.5rem 0;
    }

    [b-2wkgwupn0n] .answer-mode-bar {
        gap: 0.28rem;
        margin-bottom: 0.42rem;
    }

    [b-2wkgwupn0n] .answer-mode-bar--prompt {
        margin-bottom: 0.32rem;
    }

    [b-2wkgwupn0n] .answer-mode-label {
        font-size: 0.55rem;
        letter-spacing: 0.07em;
    }

    .answer-area[b-2wkgwupn0n] {
        margin-bottom: 0.42rem;
    }

    .choices-grid[b-2wkgwupn0n] {
        gap: 0.38rem;
    }

    .choice-btn[b-2wkgwupn0n] {
        min-height: 2.55rem;
        padding: 0.5rem 0.42rem;
        border-radius: 0.48rem;
        font-size: clamp(1rem, min(6vw, 5svh), 1.28rem);
        line-height: 1.08;
        word-break: break-word;
        hyphens: auto;
    }

    .feedback[b-2wkgwupn0n] {
        gap: 0.26rem 0.45rem;
        margin-top: 0.42rem;
    }

    .fb-msg[b-2wkgwupn0n] {
        font-size: 0.76rem;
    }

    .type-input-row[b-2wkgwupn0n] {
        gap: 0.34rem;
    }

    .type-input[b-2wkgwupn0n] {
        min-width: 0;
        padding: 0.55rem 0.62rem;
        border-radius: 0.48rem;
        font-size: 0.86rem;
    }

    .btn-submit[b-2wkgwupn0n] {
        padding: 0.55rem 0.7rem;
        border-radius: 0.48rem;
        font-size: 0.86rem;
    }

    .voice-area[b-2wkgwupn0n] {
        gap: 0.42rem;
        min-height: 4.8rem;
    }

    .voice-btn[b-2wkgwupn0n] {
        gap: 0.3rem;
        padding: 0.82rem 1.35rem;
        border-radius: 0.7rem;
    }

    .voice-label[b-2wkgwupn0n] {
        font-size: 0.72rem;
    }

    .voice-result[b-2wkgwupn0n] {
        gap: 0.28rem;
    }

    .voice-heard[b-2wkgwupn0n],
    .voice-error[b-2wkgwupn0n] {
        font-size: 0.66rem;
    }

    .btn-next[b-2wkgwupn0n] {
        padding: 0.42rem 1rem;
        border-radius: 0.36rem;
        font-size: 0.76rem;
    }

    .kana-derivation[b-2wkgwupn0n] {
        gap: 0.22rem;
        margin-top: 0.18rem;
        font-size: 0.72rem;
    }

    .vocab-toggle[b-2wkgwupn0n] {
        gap: 0.2rem;
        padding: 0.18rem 0.45rem;
        font-size: 0.6rem;
    }

    .vocab-feedback-hint[b-2wkgwupn0n] {
        font-size: 0.66rem;
    }

    .listening-prompt[b-2wkgwupn0n] {
        gap: 0.42rem;
        padding: 0.65rem 0;
    }

    .listening-play-btn[b-2wkgwupn0n] {
        width: 3.15rem;
        height: 3.15rem;
    }

    .listening-play-icon[b-2wkgwupn0n] {
        width: 1.2rem;
        height: 1.2rem;
    }

    .listening-hint-text[b-2wkgwupn0n] {
        font-size: 0.68rem;
    }

    .listening-area[b-2wkgwupn0n] {
        gap: 0.42rem;
    }

    .listening-reveal[b-2wkgwupn0n] {
        gap: 0.32rem;
        padding: 0.35rem 0;
    }

    .listening-replay-btn[b-2wkgwupn0n] {
        gap: 0.24rem;
        padding: 0.22rem 0.55rem;
        font-size: 0.62rem;
    }

    .listening-replay-icon[b-2wkgwupn0n] {
        width: 0.68rem;
        height: 0.68rem;
    }

    .hint-btn[b-2wkgwupn0n] {
        gap: 0.24rem;
        padding: 0.22rem 0.52rem;
        font-size: 0.62rem;
        margin-bottom: 0.24rem;
    }

    .hint-icon[b-2wkgwupn0n] {
        width: 0.72rem;
        height: 0.72rem;
    }
}

@media (max-width: 440px) {
    .practice-prompt-toolbar[b-2wkgwupn0n] {
        display: flex;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .practice-prompt-toolbar-main[b-2wkgwupn0n] {
        display: flex;
    }

    .practice-prompt-toolbar-side[b-2wkgwupn0n] {
        justify-self: auto;
    }

    .choices-grid[b-2wkgwupn0n] {
        gap: 0.5rem;
    }

    .choice-btn[b-2wkgwupn0n] {
        min-height: 2.75rem;
        padding: 0.56rem 0.46rem;
        font-size: clamp(1rem, min(6vw, 5svh), 1.28rem);
        word-break: break-word;
        hyphens: auto;
        line-height: 1.08;
    }

    .type-input[b-2wkgwupn0n] {
        padding: 0.52rem 0.55rem;
        font-size: 0.82rem;
    }

    .btn-submit[b-2wkgwupn0n] {
        padding: 0.52rem 0.62rem;
        font-size: 0.82rem;
    }

    .voice-btn[b-2wkgwupn0n] {
        padding: 0.72rem 1.1rem;
    }
}

@media (max-height: 600px) {
    .choice-btn[b-2wkgwupn0n] {
        padding: 0.65rem;
        font-size: clamp(1rem, min(5.2vw, 4.6svh), 1.2rem);
    }

    .type-input[b-2wkgwupn0n] {
        padding: 0.65rem 0.9rem;
        font-size: 0.95rem;
    }

    .btn-submit[b-2wkgwupn0n] {
        padding: 0.65rem 0.9rem;
        font-size: 0.95rem;
    }

    .voice-btn[b-2wkgwupn0n] {
        padding: 0.9rem 2rem;
    }
}
/* /Components/PracticeSessionFrame.razor.rz.scp.css */
.practice-page[b-a9tmcv8f6b] {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.practice-page--wide-prompt[b-a9tmcv8f6b] {
    width: 100%;
    max-width: none;
    min-height: calc(100dvh - var(--topbar-height) - 3.5rem);
    align-items: stretch;
    gap: clamp(0.75rem, 2vw, 1.4rem);
}

.practice-page--practice[b-a9tmcv8f6b] {
    justify-content: center;
}

.practice-page--wide-prompt.practice-page--practice[b-a9tmcv8f6b] {
    justify-content: flex-start;
}

.practice-page--practice > *[b-a9tmcv8f6b] {
    flex-shrink: 0;
}

.practice-summary[b-a9tmcv8f6b] {
    width: 100%;
}

.practice-summary--wide-prompt[b-a9tmcv8f6b] {
    width: min(100%, 720px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(0.35rem, 1vw, 0.75rem);
}

.practice-content[b-a9tmcv8f6b] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.practice-content--wide-prompt[b-a9tmcv8f6b] {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: flex-start;
}

.practice-content--wide-prompt[b-a9tmcv8f6b]  .question-block--prompt-first {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: 100%;
}

.practice-content--wide-prompt[b-a9tmcv8f6b]  .practice-active-body {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
}

.practice-content--wide-prompt[b-a9tmcv8f6b]  .practice-prompt-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.35rem, 1vw, 0.65rem);
}

.practice-content--wide-prompt[b-a9tmcv8f6b]  .practice-answer-section {
    align-self: start;
}

.practice-content--wide-prompt[b-a9tmcv8f6b]  .practice-footer {
    margin-top: clamp(0.75rem, 2dvh, 1.4rem);
}

.practice-header[b-a9tmcv8f6b] {
    text-align: center;
    margin-bottom: 1rem;
    width: 100%;
}

.practice-header--wide-prompt[b-a9tmcv8f6b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.2rem;
}

.practice-kicker[b-a9tmcv8f6b] {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-secondary);
}

.practice-title[b-a9tmcv8f6b] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}

.practice-page--wide-prompt .practice-title[b-a9tmcv8f6b] {
    margin-bottom: 0.2rem;
    font-size: clamp(1.25rem, 2.1vw, 1.7rem);
}

.practice-page--wide-prompt .level-back-link[b-a9tmcv8f6b] {
    align-self: flex-start;
    margin-bottom: 0;
}

.level-back-link[b-a9tmcv8f6b] {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 0.2rem;
    transition: color 0.15s ease;
}

.level-back-link:hover[b-a9tmcv8f6b] {
    color: var(--accent);
}

.level-desc[b-a9tmcv8f6b] {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0.1rem 0 0.6rem;
    line-height: 1.45;
}

.practice-page--wide-prompt .level-desc[b-a9tmcv8f6b] {
    margin: 0;
    max-width: 42rem;
}

.mode-indicator[b-a9tmcv8f6b] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.72rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    user-select: none;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.practice-page--wide-prompt .mode-indicator[b-a9tmcv8f6b] {
    margin-top: 0.25rem;
}

.mode-indicator-dot[b-a9tmcv8f6b] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.mode-indicator--practice[b-a9tmcv8f6b] {
    border-color: color-mix(in srgb, var(--success) 34%, transparent);
    color: var(--success);
}

.mode-indicator--practice .mode-indicator-dot[b-a9tmcv8f6b] {
    background: var(--success);
}

.mode-indicator--review[b-a9tmcv8f6b] {
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    color: var(--accent);
}

.mode-indicator--review .mode-indicator-dot[b-a9tmcv8f6b] {
    background: var(--accent);
}

.mode-indicator--type[b-a9tmcv8f6b] {
    border-color: var(--accent-glow);
    color: var(--accent);
}

.mode-indicator--type .mode-indicator-dot[b-a9tmcv8f6b] {
    background: var(--accent);
}

.mode-indicator--voice[b-a9tmcv8f6b] {
    border-color: rgba(16, 185, 129, 0.45);
    color: oklch(0.72 0.18 165);
}

.mode-indicator--voice .mode-indicator-dot[b-a9tmcv8f6b] {
    background: oklch(0.72 0.18 165);
}

.mode-indicator--listening[b-a9tmcv8f6b] {
    border-color: oklch(0.72 0.17 50);
    color: oklch(0.72 0.17 50);
}

.mode-indicator--listening .mode-indicator-dot[b-a9tmcv8f6b] {
    background: oklch(0.72 0.17 50);
}

@media (max-width: 640px) {
    .practice-page[b-a9tmcv8f6b] {
        width: 100%;
        max-width: none;
        padding: 0 0.45rem calc(var(--phonebar-height, 3rem) + 0.85rem);
    }

    .practice-page--wide-prompt[b-a9tmcv8f6b] {
        min-height: calc(100dvh - var(--topbar-height) - var(--phonebar-height, 3rem) - 0.75rem);
        gap: 0.42rem;
    }

    .practice-page--practice[b-a9tmcv8f6b] {
        justify-content: flex-start;
    }

    .practice-content--wide-prompt[b-a9tmcv8f6b] {
        justify-content: flex-start;
    }

    .practice-summary--wide-prompt[b-a9tmcv8f6b] {
        width: min(100%, 34rem);
        gap: 0.35rem;
    }

    .practice-header[b-a9tmcv8f6b] {
        margin-bottom: 0.45rem;
    }

    .practice-header--wide-prompt[b-a9tmcv8f6b] {
        gap: 0.08rem;
        margin-bottom: 0;
    }

    .practice-kicker[b-a9tmcv8f6b] {
        font-size: 0.58rem;
        letter-spacing: 0.07em;
    }

    .practice-title[b-a9tmcv8f6b],
    .practice-page--wide-prompt .practice-title[b-a9tmcv8f6b] {
        margin-bottom: 0.12rem;
        font-size: clamp(0.98rem, 5vw, 1.18rem);
    }

    .level-back-link[b-a9tmcv8f6b] {
        font-size: 0.7rem;
    }

    .level-desc[b-a9tmcv8f6b] {
        margin-bottom: 0.3rem;
        font-size: 0.72rem;
        line-height: 1.32;
    }

    .mode-indicator[b-a9tmcv8f6b] {
        gap: 0.28rem;
        padding: 0.18rem 0.52rem;
        font-size: 0.62rem;
    }

    .practice-page--wide-prompt .mode-indicator[b-a9tmcv8f6b] {
        margin-top: 0.08rem;
    }

    .mode-indicator-dot[b-a9tmcv8f6b] {
        width: 5px;
        height: 5px;
    }
}

@media (max-height: 760px) {
    .practice-page--practice[b-a9tmcv8f6b] {
        justify-content: flex-start;
    }
}

[b-a9tmcv8f6b] .practice-action-bar {
    width: min(100%, 720px);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

[b-a9tmcv8f6b] .practice-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9.5rem;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-a9tmcv8f6b] .practice-action-btn--primary {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
}

[b-a9tmcv8f6b] .practice-action-btn--secondary {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

[b-a9tmcv8f6b] .practice-action-btn--primary:hover,
[b-a9tmcv8f6b] .practice-action-btn--secondary:hover {
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    [b-a9tmcv8f6b] .practice-action-bar {
        width: 100%;
        gap: 0.45rem;
    }

    [b-a9tmcv8f6b] .practice-action-btn {
        flex: 1 1 8rem;
        min-width: 0;
        padding: 0.58rem 0.72rem;
        font-size: 0.74rem;
    }
}
/* /Components/PracticeStateCard.razor.rz.scp.css */
.practice-state-card[b-aj6vqvatkz] {
    width: min(100%, 720px);
    margin-inline: auto;
    padding: 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    background: var(--bg-surface);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: center;
}

.practice-state-kicker[b-aj6vqvatkz] {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-secondary);
}

.practice-state-title[b-aj6vqvatkz] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.practice-state-content[b-aj6vqvatkz] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.practice-state-copy[b-aj6vqvatkz],
[b-aj6vqvatkz] .practice-state-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

[b-aj6vqvatkz] .practice-action-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

[b-aj6vqvatkz] .practice-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9.5rem;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-aj6vqvatkz] .practice-action-btn--primary {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
}

[b-aj6vqvatkz] .practice-action-btn--secondary {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

[b-aj6vqvatkz] .practice-action-btn--primary:hover,
[b-aj6vqvatkz] .practice-action-btn--secondary:hover {
    transform: translateY(-1px);
}

[b-aj6vqvatkz] .practice-summary-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

[b-aj6vqvatkz] .practice-summary-stat {
    padding: 0.9rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--bg-surface-elevated, var(--bg-surface)) 82%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-aj6vqvatkz] .practice-summary-stat span {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-aj6vqvatkz] .practice-summary-stat strong {
    font-size: 1.2rem;
    color: var(--text-primary);
}

@media (max-width: 520px) {
    [b-aj6vqvatkz] .practice-action-bar {
        width: 100%;
        flex-direction: column;
    }

    [b-aj6vqvatkz] .practice-action-btn {
        width: 100%;
    }

    [b-aj6vqvatkz] .practice-summary-grid {
        grid-template-columns: 1fr;
    }
}
/* /Components/PracticeStatsStrip.razor.rz.scp.css */
.stats-line-wrap[b-jnq37ic19z] {
    position: relative;
    width: 100%;
    min-height: 1.1rem;
    margin-bottom: clamp(0.8rem, 2vw, 1.25rem);
}

.stats-line[b-jnq37ic19z] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.sl-item.correct[b-jnq37ic19z] {
    color: var(--success);
}

.sl-item.wrong[b-jnq37ic19z] {
    color: var(--error);
}

.sl-item.streak[b-jnq37ic19z] {
    color: #f59e0b;
}

[b-jnq37ic19z] .practice-stats-overlay {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    font-weight: 700;
    pointer-events: none;
    white-space: nowrap;
    color: var(--text-secondary);
    animation: practice-stats-overlay-in-b-jnq37ic19z 0.18s ease-out;
}

[b-jnq37ic19z] .practice-stats-overlay--good {
    color: var(--success);
}

[b-jnq37ic19z] .practice-stats-overlay--missed {
    color: var(--error);
}

[b-jnq37ic19z] .practice-stats-overlay--neutral {
    color: var(--text-secondary);
}

@keyframes practice-stats-overlay-in-b-jnq37ic19z {
    from {
        opacity: 0;
        transform: translateY(calc(-50% + 8px)) scale(0.85);
    }
    60% {
        opacity: 1;
        transform: translateY(calc(-50% - 3px)) scale(1.06);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

@media (max-width: 32rem) {
    [b-jnq37ic19z] .practice-stats-overlay {
        right: auto;
        left: 50%;
        top: calc(100% + 0.5rem);
        transform: translateX(-50%);
    }
}
/* /Components/RomajiKanaTypingComposer.razor.rz.scp.css */
.guide-write-input-row[b-f1g5fmopfi] {
    display: flex;
    gap: 0.5rem;
}

.guide-write-composer[b-f1g5fmopfi] {
    position: relative;
    flex: 1;
    min-height: 4.4rem;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    animation: choice-in-b-f1g5fmopfi 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    overflow: hidden;
}

.guide-write-composer:focus-within[b-f1g5fmopfi] {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-subtle);
}

.guide-write-composer--correct[b-f1g5fmopfi] {
    border-color: var(--success);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.25);
}

.guide-write-composer--wrong[b-f1g5fmopfi] {
    border-color: var(--error);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.2);
}

.guide-write-visual-track[b-f1g5fmopfi] {
    --guide-token-gap: 0.45rem;
    min-height: 1.8rem;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--guide-token-gap);
    pointer-events: none;
    text-align: center;
}

.guide-write-token[b-f1g5fmopfi],
.guide-write-placeholder[b-f1g5fmopfi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    line-height: 1;
}

.guide-write-token[b-f1g5fmopfi] {
    box-sizing: border-box;
    inline-size: var(--guide-token-size);
    overflow: visible;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-size: clamp(1.18rem, 3vw, 1.6rem);
    font-weight: 600;
    transform-origin: center;
    will-change: inline-size, transform;
    transition:
        inline-size 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
    animation: guide-write-token-in-b-f1g5fmopfi 0.24s cubic-bezier(0.34, 1.8, 0.64, 1) both;
}

.guide-write-token--kana[b-f1g5fmopfi] {
    color: var(--text-primary);
}

.guide-write-token--kana + .guide-write-token--kana[b-f1g5fmopfi] {
    margin-left: calc(-1 * var(--guide-token-gap));
}

.guide-write-token--fixed[b-f1g5fmopfi] {
    color: var(--text-primary);
}

.guide-write-token--blank[b-f1g5fmopfi] {
    color: color-mix(in srgb, var(--text-muted) 70%, transparent);
    letter-spacing: 0;
}

.guide-write-token--pending[b-f1g5fmopfi] {
    padding: 0.22rem 0.58rem;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, white);
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.04));
    color: color-mix(in srgb, var(--accent) 74%, white);
    animation:
        guide-write-token-in-b-f1g5fmopfi 0.24s cubic-bezier(0.34, 1.8, 0.64, 1) both,
        guide-write-pending-blink-b-f1g5fmopfi 1s ease-in-out infinite 0.18s;
}

.guide-write-gap[b-f1g5fmopfi] {
    width: 0.7rem;
    min-height: 1.5rem;
}

.guide-write-placeholder[b-f1g5fmopfi] {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 400;
    animation: guide-write-placeholder-in-b-f1g5fmopfi 0.24s cubic-bezier(0.34, 1.8, 0.64, 1) both;
}

.guide-write-native-input[b-f1g5fmopfi] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font-size: 16px;
    padding: 0;
}

.guide-write-submit[b-f1g5fmopfi],
.btn-submit[b-f1g5fmopfi] {
    padding: 1rem 1.4rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s ease;
    animation: choice-in-b-f1g5fmopfi 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.04s;
}

.guide-write-submit:hover:not(:disabled)[b-f1g5fmopfi],
.btn-submit:hover:not(:disabled)[b-f1g5fmopfi] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.guide-write-submit:disabled[b-f1g5fmopfi],
.btn-submit:disabled[b-f1g5fmopfi] {
    opacity: 0.3;
    cursor: not-allowed;
}

.type-japanese-composer[b-f1g5fmopfi] {
    min-height: 5rem;
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
}

.type-japanese-composer .guide-write-visual-track[b-f1g5fmopfi] {
    --guide-token-gap: 0.58rem;
    min-height: 2.6rem;
}

.type-japanese-composer .guide-write-token[b-f1g5fmopfi] {
    font-size: clamp(1.45rem, min(5vw, 5svh), 2.2rem);
    font-weight: 700;
}

.type-japanese-composer .guide-write-token--kana[b-f1g5fmopfi],
.type-japanese-composer .guide-write-token--pending[b-f1g5fmopfi] {
    color: color-mix(in srgb, var(--accent-secondary) 62%, white);
}

.type-japanese-composer .guide-write-token--blank[b-f1g5fmopfi] {
    transform: translateY(-0.06em);
}

@keyframes choice-in-b-f1g5fmopfi {
    0% {
        opacity: 0;
        transform: translateY(6px) scaleY(0.96) scaleX(1.012);
    }
    62% {
        opacity: 1;
        transform: translateY(-1px) scaleY(1.01) scaleX(0.996);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes guide-write-token-in-b-f1g5fmopfi {
    0% {
        opacity: 0;
        inline-size: 0;
        transform: translateY(8px) scaleY(0.84) scaleX(1.08);
    }
    55% {
        opacity: 1;
        inline-size: var(--guide-token-size);
        transform: translateY(-2px) scaleY(1.04) scaleX(0.97);
    }
    78% {
        transform: translateY(1px) scaleY(0.99) scaleX(1.01);
    }
    100% {
        opacity: 1;
        inline-size: var(--guide-token-size);
        transform: translateY(0) scale(1);
    }
}

@keyframes guide-write-placeholder-in-b-f1g5fmopfi {
    0% {
        opacity: 0;
        transform: translateY(6px) scaleY(0.9) scaleX(1.04);
    }
    60% {
        opacity: 1;
        transform: translateY(-2px) scaleY(1.03) scaleX(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes guide-write-pending-blink-b-f1g5fmopfi {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
        opacity: 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-write-composer[b-f1g5fmopfi],
    .guide-write-submit[b-f1g5fmopfi],
    .btn-submit[b-f1g5fmopfi],
    .guide-write-token[b-f1g5fmopfi],
    .guide-write-token--pending[b-f1g5fmopfi],
    .guide-write-placeholder[b-f1g5fmopfi] {
        animation: none;
        transition: none;
    }
}

@media (max-width: 440px) {
    .guide-write-composer[b-f1g5fmopfi] {
        padding: 0.82rem 0.95rem;
    }

    .guide-write-submit[b-f1g5fmopfi],
    .btn-submit[b-f1g5fmopfi] {
        padding: 0.75rem 0.9rem;
        font-size: 1rem;
    }

    .guide-write-token[b-f1g5fmopfi] {
        font-size: 1.02rem;
    }

    .type-japanese-composer[b-f1g5fmopfi] {
        min-height: 4.35rem;
        padding: 0.72rem 0.82rem;
    }

    .type-japanese-composer .guide-write-visual-track[b-f1g5fmopfi] {
        --guide-token-gap: 0.32rem;
    }

    .type-japanese-composer .guide-write-token[b-f1g5fmopfi] {
        font-size: clamp(1.08rem, min(7vw, 6svh), 1.45rem);
    }
}
/* /Components/SentenceVocabularyPrompt.razor.rz.scp.css */
.sentence-practice-prompt[b-u1qbmt3nwx] {
    width: min(100%, 1100px);
    margin-inline: auto;
}

.sentence-practice-prompt__rail[b-u1qbmt3nwx] {
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(0.25rem, 1vw, 0.85rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.45rem, 1vw, 0.9rem);
    text-align: center;
    container-type: inline-size;
}

.sentence-practice-prompt__body[b-u1qbmt3nwx] {
    --prompt-kana-size: clamp(2.5rem, 6.5vw, 5.2rem);
    --prompt-reading-size: clamp(0.64rem, 0.95vw, 0.98rem);
    --prompt-segment-gap: clamp(0.12rem, 0.55vw, 0.34rem);
    --prompt-word-gap: clamp(0.4rem, 1vw, 0.8rem);
    width: 100%;
    display: grid;
    place-items: center;
    justify-items: center;
    padding-block: clamp(0.2rem, 0.6vw, 0.5rem);
    text-align: center;
}

.prompt-enter[b-u1qbmt3nwx] {
    animation: prompt-in-b-u1qbmt3nwx 0.42s cubic-bezier(0.34, 1.8, 0.64, 1) both;
}

@keyframes prompt-in-b-u1qbmt3nwx {
    0% {
        opacity: 1;
        transform: translateX(14px) scaleX(1.06) scaleY(0.94);
        filter: blur(0.6px);
    }
    55% {
        opacity: 1;
        transform: translateX(-5px) scaleX(0.96) scaleY(1.04);
        filter: blur(0);
    }
    78% {
        transform: translateX(2px) scaleX(1.01) scaleY(0.99);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

.sentence-practice-prompt__caption[b-u1qbmt3nwx] {
    max-inline-size: min(100%, 24rem);
    font-size: clamp(0.72rem, 1vw, 0.9rem);
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.75;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-wrap: balance;
}

.sentence-practice-prompt__furigana[b-u1qbmt3nwx] {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}

.sentence-practice-prompt__furigana--has-note[b-u1qbmt3nwx] {
    padding-bottom: clamp(1.8rem, 4vw, 2.6rem);
}

.sentence-practice-prompt__furigana--reading-hidden .sentence-practice-prompt__reading[b-u1qbmt3nwx] {
    display: none;
}

.sentence-practice-prompt__furigana--reading-hidden .sentence-practice-prompt__segment[b-u1qbmt3nwx] {
    gap: 0;
}

.sentence-practice-prompt__word[b-u1qbmt3nwx] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.sentence-practice-prompt__segments[b-u1qbmt3nwx] {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--prompt-segment-gap);
    white-space: nowrap;
}

.sentence-practice-prompt__segment[b-u1qbmt3nwx] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.16rem;
}

.sentence-practice-prompt__reading[b-u1qbmt3nwx] {
    font-size: var(--prompt-reading-size);
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    font-family: system-ui, -apple-system, sans-serif;
}

.sentence-practice-prompt__kana[b-u1qbmt3nwx] {
    font-size: var(--prompt-kana-size);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    white-space: nowrap;
}

.sentence-practice-prompt__gap[b-u1qbmt3nwx] {
    width: var(--prompt-word-gap);
    flex: 0 0 auto;
}

.sentence-practice-prompt__word-note[b-u1qbmt3nwx] {
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 50%;
    transform: translateX(-50%);
    max-inline-size: min(24rem, 72vw);
    font-size: clamp(0.72rem, 1vw, 0.9rem);
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.78;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
    white-space: nowrap;
}

.sentence-practice-prompt__segment--particle .sentence-practice-prompt__reading[b-u1qbmt3nwx],
.sentence-practice-prompt__segment--particle .sentence-practice-prompt__kana[b-u1qbmt3nwx] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.sentence-practice-prompt__kanji[b-u1qbmt3nwx] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}

.sentence-practice-prompt__kanji-reading[b-u1qbmt3nwx] {
    font-size: clamp(0.92rem, 1.25vw, 1.12rem);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    line-height: 1.35;
}

.sentence-practice-prompt__kanji-reading--hidden[b-u1qbmt3nwx] {
    display: none;
}

.sentence-practice-prompt__kanji-text[b-u1qbmt3nwx] {
    font-size: clamp(2.55rem, 6.6vw, 5.8rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-primary);
    white-space: nowrap;
}

.sentence-practice-prompt__text[b-u1qbmt3nwx] {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}

.kana-character[b-u1qbmt3nwx] {
    font-size: clamp(4rem, min(22vw, 20svh), 13rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    white-space: nowrap;
    word-break: keep-all;
    text-wrap: nowrap;
    overflow-wrap: normal;
    text-align: center;
}

.kana-character.romaji-prompt[b-u1qbmt3nwx] {
    font-size: clamp(3rem, min(14vw, 12svh), 6.5rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.kana-character.vocab-prompt[b-u1qbmt3nwx] {
    line-height: 1.14;
    max-width: 100%;
}

.kana-character.vocab-english-prompt[b-u1qbmt3nwx] {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
    max-width: min(100%, 42rem);
}

.sentence-practice-prompt__listening[b-u1qbmt3nwx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
}

.sentence-practice-prompt__body--furigana.sentence-practice-prompt__body--short[b-u1qbmt3nwx] {
    --prompt-kana-size: clamp(2.8rem, 6.4vw, 5.8rem);
    --prompt-reading-size: clamp(0.7rem, 1.05vw, 1rem);
    --prompt-segment-gap: clamp(0.14rem, 0.6vw, 0.36rem);
    --prompt-word-gap: clamp(0.45rem, 1vw, 0.9rem);
}

.sentence-practice-prompt__body--furigana.sentence-practice-prompt__body--medium[b-u1qbmt3nwx] {
    --prompt-kana-size: clamp(2.5rem, 6vw, 5.2rem);
    --prompt-reading-size: clamp(0.66rem, 0.98vw, 0.96rem);
    --prompt-segment-gap: clamp(0.12rem, 0.55vw, 0.34rem);
    --prompt-word-gap: clamp(0.4rem, 0.95vw, 0.82rem);
}

.sentence-practice-prompt__body--furigana.sentence-practice-prompt__body--long[b-u1qbmt3nwx] {
    --prompt-kana-size: clamp(2.2rem, 5.3vw, 4.65rem);
    --prompt-reading-size: clamp(0.62rem, 0.9vw, 0.9rem);
    --prompt-segment-gap: clamp(0.1rem, 0.45vw, 0.28rem);
    --prompt-word-gap: clamp(0.34rem, 0.85vw, 0.72rem);
}

.sentence-practice-prompt__body--furigana.sentence-practice-prompt__body--xlong[b-u1qbmt3nwx] {
    --prompt-kana-size: clamp(1.9rem, 4.6vw, 4.05rem);
    --prompt-reading-size: clamp(0.58rem, 0.82vw, 0.84rem);
    --prompt-segment-gap: clamp(0.08rem, 0.35vw, 0.22rem);
    --prompt-word-gap: clamp(0.28rem, 0.7vw, 0.58rem);
}

.sentence-practice-prompt__body--kanji.sentence-practice-prompt__body--short .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx] {
    font-size: clamp(3rem, 6.8vw, 6.1rem);
}

.sentence-practice-prompt__body--kanji.sentence-practice-prompt__body--medium .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx] {
    font-size: clamp(2.7rem, 6.2vw, 5.5rem);
}

.sentence-practice-prompt__body--kanji.sentence-practice-prompt__body--long .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx] {
    font-size: clamp(2.35rem, 5.4vw, 4.8rem);
}

.sentence-practice-prompt__body--kanji.sentence-practice-prompt__body--xlong .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx] {
    font-size: clamp(2rem, 4.7vw, 4.15rem);
}

.sentence-practice-prompt__body--text.sentence-practice-prompt__body--short .kana-character.vocab-prompt[b-u1qbmt3nwx] {
    font-size: clamp(3rem, 6.9vw, 6.7rem);
}

.sentence-practice-prompt__body--text.sentence-practice-prompt__body--medium .kana-character.vocab-prompt[b-u1qbmt3nwx] {
    font-size: clamp(2.7rem, 6.15vw, 5.9rem);
}

.sentence-practice-prompt__body--text.sentence-practice-prompt__body--long .kana-character.vocab-prompt[b-u1qbmt3nwx] {
    font-size: clamp(2.35rem, 5.25vw, 5rem);
}

.sentence-practice-prompt__body--text.sentence-practice-prompt__body--xlong .kana-character.vocab-prompt[b-u1qbmt3nwx] {
    font-size: clamp(2rem, 4.5vw, 4.25rem);
}

.sentence-practice-prompt__body--text.sentence-practice-prompt__body--short .kana-character.vocab-english-prompt[b-u1qbmt3nwx] {
    font-size: clamp(2.2rem, 4.9vw, 4.2rem);
}

.sentence-practice-prompt__body--text.sentence-practice-prompt__body--medium .kana-character.vocab-english-prompt[b-u1qbmt3nwx] {
    font-size: clamp(2rem, 4.5vw, 3.8rem);
}

.sentence-practice-prompt__body--text.sentence-practice-prompt__body--long .kana-character.vocab-english-prompt[b-u1qbmt3nwx] {
    font-size: clamp(1.78rem, 4vw, 3.25rem);
}

.sentence-practice-prompt__body--text.sentence-practice-prompt__body--xlong .kana-character.vocab-english-prompt[b-u1qbmt3nwx] {
    font-size: clamp(1.55rem, 3.35vw, 2.75rem);
}

@container (max-width: 62rem) {
    .sentence-practice-prompt__body--furigana .sentence-practice-prompt__furigana[b-u1qbmt3nwx] {
        width: min(100%, 58rem);
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: var(--prompt-word-gap);
        row-gap: clamp(0.75rem, 2vw, 1.15rem);
    }

    .sentence-practice-prompt__body--furigana .sentence-practice-prompt__gap[b-u1qbmt3nwx] {
        display: none;
    }
}

@container (max-width: 52rem) {
    .sentence-practice-prompt__body--kanji .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--text .kana-character.vocab-english-prompt[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--text.sentence-practice-prompt__body--xlong .kana-character.vocab-prompt[b-u1qbmt3nwx] {
        white-space: normal;
        text-wrap: balance;
    }
}

@container (max-width: 40rem) {
    .sentence-practice-prompt__rail[b-u1qbmt3nwx] {
        padding-inline: 0;
    }

    .sentence-practice-prompt__body--furigana[b-u1qbmt3nwx] {
        --prompt-kana-size: clamp(1.8rem, 8vw, 3.8rem);
        --prompt-reading-size: clamp(0.54rem, 2.1vw, 0.82rem);
    }

    .sentence-practice-prompt__body--text .kana-character.vocab-prompt[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--text .kana-character.vocab-english-prompt[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--kanji .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx] {
        white-space: normal;
        text-wrap: balance;
        max-width: 100%;
    }

    .sentence-practice-prompt__word-note[b-u1qbmt3nwx] {
        max-inline-size: min(18rem, 88vw);
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .sentence-practice-prompt__rail[b-u1qbmt3nwx] {
        padding-inline: 0;
        gap: 0.34rem;
    }

    .sentence-practice-prompt__body[b-u1qbmt3nwx] {
        --prompt-kana-size: clamp(1.34rem, 7.2vw, 2.35rem);
        --prompt-reading-size: clamp(0.48rem, 1.8vw, 0.66rem);
        --prompt-segment-gap: clamp(0.04rem, 0.35vw, 0.14rem);
        --prompt-word-gap: clamp(0.18rem, 1.1vw, 0.38rem);
        padding-block: 0.08rem;
    }

    .sentence-practice-prompt__body--furigana.sentence-practice-prompt__body--short[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--furigana.sentence-practice-prompt__body--medium[b-u1qbmt3nwx] {
        --prompt-kana-size: clamp(1.48rem, 7.8vw, 2.55rem);
        --prompt-reading-size: clamp(0.5rem, 1.9vw, 0.68rem);
        --prompt-segment-gap: clamp(0.04rem, 0.35vw, 0.14rem);
        --prompt-word-gap: clamp(0.18rem, 1.2vw, 0.4rem);
    }

    .sentence-practice-prompt__body--furigana.sentence-practice-prompt__body--long[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--furigana.sentence-practice-prompt__body--xlong[b-u1qbmt3nwx] {
        --prompt-kana-size: clamp(1.18rem, 6.2vw, 2.05rem);
        --prompt-reading-size: clamp(0.46rem, 1.65vw, 0.62rem);
        --prompt-segment-gap: clamp(0.03rem, 0.3vw, 0.1rem);
        --prompt-word-gap: clamp(0.14rem, 0.9vw, 0.3rem);
    }

    .sentence-practice-prompt__caption[b-u1qbmt3nwx] {
        max-inline-size: min(100%, 19rem);
        font-size: 0.66rem;
        line-height: 1.2;
    }

    .sentence-practice-prompt__furigana--has-note[b-u1qbmt3nwx] {
        padding-bottom: 1.35rem;
    }

    .sentence-practice-prompt__segment[b-u1qbmt3nwx] {
        gap: 0.08rem;
    }

    .sentence-practice-prompt__word-note[b-u1qbmt3nwx] {
        top: calc(100% + 0.42rem);
        max-inline-size: min(17rem, 88vw);
        font-size: 0.62rem;
        line-height: 1.2;
        white-space: normal;
    }

    .sentence-practice-prompt__kanji[b-u1qbmt3nwx] {
        gap: 0.22rem;
    }

    .sentence-practice-prompt__kanji-reading[b-u1qbmt3nwx] {
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx] {
        font-size: clamp(1.7rem, 9.5vw, 2.9rem);
        line-height: 1.08;
    }

    .sentence-practice-prompt__body--kanji.sentence-practice-prompt__body--short .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--kanji.sentence-practice-prompt__body--medium .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx] {
        font-size: clamp(1.85rem, 10vw, 3.15rem);
    }

    .sentence-practice-prompt__body--kanji.sentence-practice-prompt__body--long .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--kanji.sentence-practice-prompt__body--xlong .sentence-practice-prompt__kanji-text[b-u1qbmt3nwx] {
        font-size: clamp(1.45rem, 7.8vw, 2.45rem);
        white-space: normal;
        text-wrap: balance;
    }

    .kana-character[b-u1qbmt3nwx] {
        font-size: clamp(2.25rem, min(16vw, 12svh), 4.2rem);
    }

    .kana-character.romaji-prompt[b-u1qbmt3nwx] {
        font-size: clamp(1.65rem, min(9.5vw, 7.5svh), 2.9rem);
    }

    .sentence-practice-prompt__body--text.sentence-practice-prompt__body--short .kana-character.vocab-prompt[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--text.sentence-practice-prompt__body--medium .kana-character.vocab-prompt[b-u1qbmt3nwx] {
        font-size: clamp(1.5rem, 8vw, 2.65rem);
        line-height: 1.12;
    }

    .sentence-practice-prompt__body--text.sentence-practice-prompt__body--long .kana-character.vocab-prompt[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--text.sentence-practice-prompt__body--xlong .kana-character.vocab-prompt[b-u1qbmt3nwx] {
        font-size: clamp(1.15rem, 6.5vw, 2rem);
        line-height: 1.14;
        white-space: normal;
        text-wrap: balance;
    }

    .sentence-practice-prompt__body--text.sentence-practice-prompt__body--short .kana-character.vocab-english-prompt[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--text.sentence-practice-prompt__body--medium .kana-character.vocab-english-prompt[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--text.sentence-practice-prompt__body--long .kana-character.vocab-english-prompt[b-u1qbmt3nwx],
    .sentence-practice-prompt__body--text.sentence-practice-prompt__body--xlong .kana-character.vocab-english-prompt[b-u1qbmt3nwx] {
        font-size: clamp(1rem, 5.5vw, 1.72rem);
        line-height: 1.16;
        white-space: normal;
        text-wrap: balance;
    }

    .sentence-practice-prompt__listening[b-u1qbmt3nwx] {
        gap: 0.42rem;
        padding: 0.65rem 0;
    }
}
/* /Components/StreakIndicator.razor.rz.scp.css */
.streak-indicator[b-g70zuzx0va] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.streak-indicator:hover[b-g70zuzx0va] {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.45);
}

.streak-indicator--cold[b-g70zuzx0va] {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
}

.streak-indicator--cold:hover[b-g70zuzx0va] {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-muted);
}

.streak-fire[b-g70zuzx0va] {
    font-size: 0.85rem;
    line-height: 1;
}

.streak-count[b-g70zuzx0va] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #f59e0b;
    line-height: 1;
}

.streak-indicator--cold .streak-count[b-g70zuzx0va] {
    color: var(--text-muted);
}

.streak-freeze-badge[b-g70zuzx0va] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.15rem 0.35rem;
    line-height: 1;
}
/* /Components/StrokeOrderAnimation.razor.rz.scp.css */
/* ?? Wrapper ??????????????????????????????????????? */

.soa-wrapper[b-pe547ng660] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* ?? SVG canvas ???????????????????????????????????? */

.soa-svg[b-pe547ng660] {
    width: min(200px, 52vw);
    aspect-ratio: 1;
    overflow: visible;
}

/* ?? Stroke paths ?????????????????????????????????? */

/* Shared geometry � all strokes regardless of state */
.soa-stroke[b-pe547ng660] {
    fill: none;
    stroke: var(--text-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.35s ease;
}

/* Stroke currently being drawn: accent colour, decelerates near the tip */
.soa-stroke.drawing[b-pe547ng660] {
    stroke: var(--accent);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: soa-draw-b-pe547ng660 var(--soa-dur, 700ms) cubic-bezier(0, 0, 0.15, 1) forwards;
}

/* Stroke already completed: transition smoothly from accent back to text colour */
.soa-stroke.done[b-pe547ng660] {
    /* colour animated by the transition on .soa-stroke */
}

@keyframes soa-draw-b-pe547ng660 {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

/* ?? Active stroke marker ?????????????????????????? */
/*
 * Only the currently-drawing stroke's marker is rendered.
 * The .soa-svg ancestor carries the Blazor scope attribute; descendant
 * selectors from it reach the MarkupString-rendered SVG elements.
 */

.soa-svg .soa-marker circle[b-pe547ng660] {
    fill: var(--accent);
}

.soa-svg .soa-marker.active circle[b-pe547ng660] {
    fill: var(--accent);
}

/* Pulse ring � higher specificity overrides fill set above */
.soa-svg .soa-marker .soa-marker-pulse[b-pe547ng660] {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
}

/* ?? Completion pop ???????????????????????????????? */

.soa-svg.soa-svg--done[b-pe547ng660] {
    transform-box: fill-box;
    transform-origin: center;
    animation: soa-complete-b-pe547ng660 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes soa-complete-b-pe547ng660 {
    from { transform: scale(1); }
    60%  { transform: scale(1.05); }
    to   { transform: scale(1); }
}

/* ?? Replay button ????????????????????????????????? */

.soa-controls[b-pe547ng660] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.soa-btn[b-pe547ng660] {
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.soa-btn:hover[b-pe547ng660] {
    border-color: var(--accent);
    color: var(--accent);
}

.soa-speed[b-pe547ng660] {
    min-width: 8.2rem;
}

/* ?? Fallback (no stroke data available) ??????????? */

.soa-fallback[b-pe547ng660] {
    font-size: clamp(6rem, 30vw, 11rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
}
/* /Components/TypeInJapanesePromptCard.razor.rz.scp.css */
.type-japanese-card[b-i1mo7pppgt] {
    display: contents;
}

.type-japanese-card[b-i1mo7pppgt]  .practice-prompt-controls {
    display: none;
}

.type-japanese-card[b-i1mo7pppgt]  .sentence-practice-prompt__text.vocab-english-prompt {
    display: inline-grid;
    place-items: center;
    min-block-size: 2.35em;
}

.type-japanese-card[b-i1mo7pppgt]  .guide-write-composer {
    transform-origin: center;
}

.type-japanese-card[b-i1mo7pppgt]  .guide-write-composer--correct {
    animation: pop-correct-b-i1mo7pppgt 0.34s cubic-bezier(0.34, 1.8, 0.64, 1);
}

.type-japanese-card[b-i1mo7pppgt]  .guide-write-composer--wrong {
    animation: shake-wrong-b-i1mo7pppgt 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.type-area[b-i1mo7pppgt] {
    position: relative;
    width: 100%;
}

.feedback[b-i1mo7pppgt] {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + clamp(0.42rem, 1.2vw, 0.85rem));
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0;
}

.feedback-enter[b-i1mo7pppgt] {
    animation: feedback-in-b-i1mo7pppgt 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.feedback-enter.feedback--wrong[b-i1mo7pppgt] {
    animation: feedback-wrong-in-b-i1mo7pppgt 0.2s ease-out both;
}

.fb-msg[b-i1mo7pppgt] {
    font-size: 0.95rem;
    font-weight: 600;
}

.fb-msg.wrong[b-i1mo7pppgt] {
    color: var(--error);
}

.type-japanese-feedback-full[b-i1mo7pppgt] {
    flex-basis: 100%;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.hint-card[b-i1mo7pppgt] {
    position: relative;
    width: min(100%, 720px);
    margin: 0 auto 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    border: 1.5px solid var(--accent-glow);
    border-radius: 0.85rem;
    background: var(--bg-surface);
    text-align: center;
}

.hint-card-listen-btn[b-i1mo7pppgt] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--accent-glow);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
    color: var(--accent);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.hint-card-listen-btn:hover[b-i1mo7pppgt],
.hint-card-listen-btn:focus-visible[b-i1mo7pppgt] {
    border-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--accent);
    box-shadow: 0 0 14px var(--accent-glow);
    outline: none;
    transform: scale(1.08);
}

.hint-card-listen-btn:active[b-i1mo7pppgt] {
    transform: scale(0.94);
}

.hint-card-listen-icon[b-i1mo7pppgt] {
    width: 1rem;
    height: 1rem;
}

.hint-card-header[b-i1mo7pppgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.hint-card-kana[b-i1mo7pppgt] {
    font-size: clamp(2rem, 7vw, 4rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.25;
    color: var(--text-primary);
}

.hint-card-romaji[b-i1mo7pppgt] {
    font-size: clamp(1.2rem, 3.2vw, 1.8rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.03em;
}

.hint-card-audio-error[b-i1mo7pppgt] {
    max-width: min(100%, 28rem);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.35;
}

.type-japanese-hint-sentence[b-i1mo7pppgt] {
    max-width: min(100%, 44rem);
    white-space: normal;
    text-wrap: balance;
}

.type-japanese-hint-scaffold[b-i1mo7pppgt] {
    max-width: min(100%, 34rem);
    padding: 0.42rem 0.72rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    color: var(--text-muted);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-size: clamp(0.95rem, 2.2vw, 1.2rem);
    line-height: 1.35;
    background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
}

.btn-next[b-i1mo7pppgt] {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 0.4rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.btn-next:hover[b-i1mo7pppgt] {
    background: var(--accent-hover);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 18px var(--accent-glow);
}

@keyframes feedback-in-b-i1mo7pppgt {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.88);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes feedback-wrong-in-b-i1mo7pppgt {
    0% {
        opacity: 1;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pop-correct-b-i1mo7pppgt {
    0% { transform: scale(1); }
    20% { transform: scaleX(1.14) scaleY(0.9); }
    45% { transform: scaleX(0.95) scaleY(1.08); }
    70% { transform: scaleX(1.02) scaleY(0.98); }
    100% { transform: scale(1); }
}

@keyframes shake-wrong-b-i1mo7pppgt {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    12% { transform: translateX(-7px) rotate(-2deg) scaleX(0.98); }
    28% { transform: translateX(7px) rotate(2deg) scaleX(1.02); }
    44% { transform: translateX(-4px) rotate(-1deg); }
    60% { transform: translateX(3px) rotate(0.6deg); }
    76% { transform: translateX(-1px); }
}

@media (max-width: 520px) {
    .hint-card[b-i1mo7pppgt] {
        gap: 0.55rem;
        padding: 1rem 0.75rem;
        border-radius: 0.65rem;
        margin-bottom: 0.5rem;
    }

    .hint-card-kana[b-i1mo7pppgt] {
        font-size: clamp(1.45rem, 8.6vw, 2.8rem);
    }

    .hint-card-romaji[b-i1mo7pppgt] {
        font-size: clamp(0.98rem, 5.4vw, 1.35rem);
    }

    .type-japanese-hint-scaffold[b-i1mo7pppgt] {
        font-size: 0.86rem;
    }

    .btn-next[b-i1mo7pppgt] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .type-japanese-card[b-i1mo7pppgt]  .guide-write-composer--correct,
    .type-japanese-card[b-i1mo7pppgt]  .guide-write-composer--wrong,
    .feedback-enter[b-i1mo7pppgt],
    .feedback-enter.feedback--wrong[b-i1mo7pppgt] {
        animation: none;
    }
}
/* /Components/UnlockCelebration.razor.rz.scp.css */
.unlock-celebration[b-1f67ouph44] {
    --unlock-spark: #ffe66d;

    position: fixed;
    inset: 0;
    z-index: 8975;
    display: grid;
    place-items: center;
    padding: 1rem;
    pointer-events: auto;
    overflow: hidden;
    background: rgba(3, 5, 12, 0.28);
    contain: layout paint style;
    isolation: isolate;
    animation: unlock-celebration-shell-b-1f67ouph44 220ms ease both;
}

.unlock-celebration__panel[b-1f67ouph44] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(36rem, calc(100vw - 2rem));
    color: var(--text-primary);
    pointer-events: auto;
    transform-origin: 50% 58%;
    animation: unlock-celebration-card-b-1f67ouph44 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.unlock-celebration__content[b-1f67ouph44] {
    position: relative;
    width: 100%;
    padding: 1.08rem 1.1rem 1.08rem 1.22rem;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 22px 54px rgba(0, 0, 0, 0.52),
        0 0 34px var(--accent-glow);
    overflow: hidden;
    isolation: isolate;
    contain: paint;
    animation: unlock-celebration-card-frame-b-1f67ouph44 720ms cubic-bezier(0.16, 1.25, 0.32, 1) both;
}

.unlock-celebration__content[b-1f67ouph44]::before {
    content: none;
}

.unlock-celebration__content[b-1f67ouph44]::after {
    content: none;
}

.unlock-celebration__title[b-1f67ouph44],
.unlock-celebration__list[b-1f67ouph44] {
    position: relative;
    z-index: 1;
}

.unlock-celebration__title[b-1f67ouph44] {
    margin: 0;
    color: var(--text-primary);
    font-size: 3.85rem;
    font-weight: 950;
    line-height: 0.92;
    letter-spacing: 0;
    text-shadow:
        0 0 20px var(--accent-glow),
        0 9px 24px rgba(0, 0, 0, 0.52);
    overflow-wrap: anywhere;
    transform-origin: 0 70%;
    animation: unlock-celebration-card-copy-b-1f67ouph44 420ms cubic-bezier(0.16, 1.45, 0.32, 1) 130ms both;
}

.unlock-celebration__list[b-1f67ouph44] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 1.02rem 0 0;
    padding: 0;
    list-style: none;
}

.unlock-celebration__item[b-1f67ouph44] {
    position: relative;
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.2rem;
    padding: 0.55rem 0.64rem;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    border-radius: 7px;
    background: rgba(12, 12, 18, 0.28);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
    isolation: isolate;
    transform-origin: 0 50%;
    animation: unlock-celebration-row-b-1f67ouph44 420ms cubic-bezier(0.16, 1.45, 0.32, 1) 220ms both;
}

.unlock-celebration__item:nth-child(2)[b-1f67ouph44] {
    animation-delay: 300ms;
}

.unlock-celebration__item:nth-child(3)[b-1f67ouph44] {
    animation-delay: 380ms;
}

.unlock-celebration__item:nth-child(4)[b-1f67ouph44] {
    animation-delay: 460ms;
}

.unlock-celebration__item-mark[b-1f67ouph44] {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    min-width: 3.15rem;
    height: 1.7rem;
    padding: 0 0.5rem;
    border: 1px solid color-mix(in srgb, var(--unlock-spark) 58%, transparent);
    border-radius: 5px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    box-shadow: 0 5px 14px var(--accent-glow);
    font-size: 0.7rem;
    font-weight: 950;
    line-height: 1;
}

.unlock-celebration__item-copy[b-1f67ouph44] {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.12rem;
}

.unlock-celebration__item-title[b-1f67ouph44] {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.unlock-celebration__item-detail[b-1f67ouph44] {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
}

.unlock-celebration__item--more[b-1f67ouph44] {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    min-height: 2.6rem;
}

.unlock-celebration__item-cta[b-1f67ouph44] {
    position: relative;
    z-index: 1;
    justify-self: end;
    min-width: 6.4rem;
    min-height: 2.05rem;
    padding: 0.52rem 0.72rem;
    border: 1px solid var(--accent);
    border-radius: 7px;
    color: #ffffff;
    background: var(--accent);
    font-size: 0.78rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.unlock-celebration__item-cta:hover[b-1f67ouph44] {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 0 14px var(--accent-glow);
}

.unlock-celebration--closing[b-1f67ouph44] {
    animation: unlock-celebration-close-b-1f67ouph44 340ms ease both;
}

.unlock-celebration--closing .unlock-celebration__panel[b-1f67ouph44] {
    animation: unlock-celebration-panel-close-b-1f67ouph44 340ms ease both;
}

@keyframes unlock-celebration-shell-b-1f67ouph44 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes unlock-celebration-card-b-1f67ouph44 {
    0% {
        opacity: 0;
        transform: translateY(22px) scaleX(1.05) scaleY(0.88);
    }

    8% {
        opacity: 1;
        transform: translateY(-6px) scaleX(0.98) scaleY(1.04);
    }

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

@keyframes unlock-celebration-card-frame-b-1f67ouph44 {
    0% {
        transform: scaleX(0.985) scaleY(1.02);
    }

    34% {
        transform: scaleX(1.012) scaleY(0.99);
    }

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

@keyframes unlock-celebration-card-copy-b-1f67ouph44 {
    0% {
        opacity: 0;
        transform: translateY(0.35rem) scaleY(0.92);
    }

    62% {
        opacity: 1;
        transform: translateY(-0.05rem) scaleY(1.03);
    }

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

@keyframes unlock-celebration-row-b-1f67ouph44 {
    0% {
        opacity: 0;
        transform: translateX(-0.55rem) scaleX(0.96) scaleY(1.04);
    }

    70% {
        opacity: 1;
        transform: translateX(0.04rem) scaleX(1.02) scaleY(0.98);
    }

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

@keyframes unlock-celebration-close-b-1f67ouph44 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes unlock-celebration-panel-close-b-1f67ouph44 {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

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

@media (max-width: 520px) {
    .unlock-celebration__content[b-1f67ouph44] {
        padding: 0.95rem;
    }

    .unlock-celebration__title[b-1f67ouph44] {
        font-size: 2.35rem;
    }

    .unlock-celebration__item[b-1f67ouph44] {
        grid-template-columns: 3.25rem minmax(0, 1fr) auto;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .unlock-celebration__item--more[b-1f67ouph44] {
        grid-template-columns: 3.25rem minmax(0, 1fr);
    }

    .unlock-celebration__item-title[b-1f67ouph44] {
        font-size: 0.9rem;
    }

    .unlock-celebration__item-detail[b-1f67ouph44] {
        font-size: 0.72rem;
    }

    .unlock-celebration__item-cta[b-1f67ouph44] {
        min-width: 5.55rem;
        min-height: 1.95rem;
        padding: 0.48rem 0.54rem;
        font-size: 0.72rem;
    }
}

@media (max-width: 360px) {
    .unlock-celebration__item[b-1f67ouph44] {
        grid-template-columns: 3.25rem minmax(0, 1fr);
    }

    .unlock-celebration__item-cta[b-1f67ouph44] {
        grid-column: 2 / -1;
        justify-self: start;
        margin-top: 0.08rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .unlock-celebration[b-1f67ouph44],
    .unlock-celebration__panel[b-1f67ouph44],
    .unlock-celebration__content[b-1f67ouph44],
    .unlock-celebration__content[b-1f67ouph44]::before,
    .unlock-celebration__title[b-1f67ouph44],
    .unlock-celebration__item[b-1f67ouph44],
    .unlock-celebration__item-cta[b-1f67ouph44] {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .unlock-celebration--closing[b-1f67ouph44] {
        animation: unlock-celebration-close-b-1f67ouph44 120ms ease both;
    }

    .unlock-celebration--closing .unlock-celebration__panel[b-1f67ouph44] {
        animation: unlock-celebration-panel-close-b-1f67ouph44 120ms ease both;
    }
}
/* /Components/VisualNovelCgGalleryOverlay.razor.rz.scp.css */
.vn-cg-gallery-shell[b-n2l2x0x9cs] {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: auto;
}

.vn-cg-gallery-panel[b-n2l2x0x9cs] {
    position: relative;
    min-height: 100%;
    padding:
        var(--vn-stage-top-padding)
        var(--vn-stage-inline-padding)
        var(--vn-stage-bottom-padding);
    box-sizing: border-box;
    background: color-mix(in srgb, var(--bg-body) 68%, transparent);
    backdrop-filter: blur(12px);
}

.vn-cg-gallery-topbar[b-n2l2x0x9cs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(0.75rem, 1.9cqh, 1rem);
}

.vn-cg-gallery-back[b-n2l2x0x9cs],
.vn-cg-gallery-action[b-n2l2x0x9cs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: clamp(2rem, 5.4cqh, 2.2rem);
    padding: clamp(0.38rem, 1.1cqh, 0.45rem) clamp(0.65rem, 1.5cqw, 0.75rem);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color) 82%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
    color: var(--text-primary);
    font-size: clamp(0.66rem, 1.55cqh, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vn-cg-gallery-mode[b-n2l2x0x9cs] {
    color: color-mix(in srgb, var(--text-primary) 76%, var(--accent-secondary) 24%);
    font-size: clamp(0.68rem, 1.6cqh, 0.74rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vn-cg-gallery-grid[b-n2l2x0x9cs] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.55rem, 1.4cqh, 0.9rem);
    padding-bottom: var(--vn-stage-overlay-bottom-reserve);
}

.vn-cg-gallery-slot[b-n2l2x0x9cs] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.82) 84%);
    border-radius: clamp(0.7rem, 2cqh, 1rem);
    background: color-mix(in srgb, rgba(255, 255, 255, 0.66) 70%, rgba(255, 240, 248, 0.5) 30%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

button.vn-cg-gallery-slot[b-n2l2x0x9cs] {
    padding: 0;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

button.vn-cg-gallery-slot:hover[b-n2l2x0x9cs],
button.vn-cg-gallery-slot:focus-visible[b-n2l2x0x9cs] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, 0.68) 68%);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
    outline: none;
}

.vn-cg-gallery-slot--locked[b-n2l2x0x9cs] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
    opacity: 0.64;
}

.vn-cg-gallery-thumb[b-n2l2x0x9cs],
.vn-cg-gallery-preview-img[b-n2l2x0x9cs] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    user-select: none;
}

.vn-cg-gallery-preview[b-n2l2x0x9cs] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(0.75rem, 1.7cqh, 1rem);
    min-height: calc(100% - clamp(3.8rem, 10cqh, 5.8rem));
    padding-bottom: var(--vn-stage-overlay-bottom-reserve);
}

.vn-cg-gallery-preview-img[b-n2l2x0x9cs] {
    align-self: center;
    max-height: min(64cqh, 100%);
    aspect-ratio: 16 / 9;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.82) 84%);
    border-radius: clamp(0.7rem, 2cqh, 1rem);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.vn-cg-gallery-preview-actions[b-n2l2x0x9cs] {
    display: flex;
    justify-content: center;
}

.vn-cg-gallery-empty[b-n2l2x0x9cs] {
    display: grid;
    place-items: center;
    min-height: calc(100% - clamp(3.8rem, 10cqh, 5.8rem));
    color: rgba(106, 87, 98, 0.78);
    font-size: clamp(0.86rem, 1.9cqh, 0.96rem);
}

@container (max-width: 760px) {
    .vn-cg-gallery-grid[b-n2l2x0x9cs] {
        gap: 0.55rem;
    }
}
/* /Components/VisualNovelChoiceTray.razor.rz.scp.css */
.vn-choice-tray[b-tghtm4a31t] {
    display: grid;
    gap: clamp(0.55rem, 1.5cqh, 0.8rem);
    width: 100%;
}

.vn-choice-btn[b-tghtm4a31t] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.1cqh, 0.72rem);
    padding: clamp(0.75rem, 2cqh, 0.95rem) clamp(0.8rem, 1.8cqw, 1rem);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, white 10%);
    border-radius: clamp(0.9rem, 2.8cqh, 1.15rem);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent) 8%, var(--bg-elevated) 92%) 0%,
            color-mix(in srgb, var(--accent-secondary) 7%, var(--bg-body) 93%) 100%);
    color: var(--text-primary);
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.vn-choice-btn:hover:not(:disabled)[b-tghtm4a31t] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent-secondary) 38%, white 12%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent) 12%, var(--bg-elevated) 88%) 0%,
            color-mix(in srgb, var(--accent-secondary) 10%, var(--bg-body) 90%) 100%);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.32);
}

.vn-choice-btn:disabled[b-tghtm4a31t] {
    opacity: 0.65;
    cursor: default;
}

.vn-choice-btn-index[b-tghtm4a31t] {
    flex-shrink: 0;
    color: var(--accent-secondary);
}

.vn-choice-btn-copy[b-tghtm4a31t] {
    font-size: clamp(0.88rem, 2cqh, 0.96rem);
    font-weight: 600;
    line-height: 1.45;
}

@container (max-height: 430px) {
    .vn-choice-tray[b-tghtm4a31t] {
        gap: clamp(0.4rem, 1.15cqh, 0.55rem);
    }

    .vn-choice-btn[b-tghtm4a31t] {
        padding-block: clamp(0.65rem, 1.7cqh, 0.78rem);
    }

    .vn-choice-btn-copy[b-tghtm4a31t] {
        font-size: clamp(0.82rem, 1.85cqh, 0.9rem);
        line-height: 1.4;
    }
}
/* /Components/VisualNovelControlStrip.razor.rz.scp.css */
.vn-control-strip[b-3cnv5sxs9z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.42rem, 1.35cqh, 1.05rem);
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}

.vn-control-strip-btn[b-3cnv5sxs9z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.1rem 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(0.48rem, calc(0.18rem + 1.1cqh), 0.66rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.82;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
    transition: color 0.18s ease, opacity 0.18s ease;
}

.vn-control-strip-btn:hover:not(:disabled)[b-3cnv5sxs9z] {
    color: rgba(255, 255, 255, 0.94);
    opacity: 1;
}

.vn-control-strip-btn:disabled[b-3cnv5sxs9z] {
    opacity: 0.38;
    cursor: default;
}

.vn-control-strip-btn--active[b-3cnv5sxs9z] {
    color: #fff;
    opacity: 1;
}

@container (max-height: 430px) {
    .vn-control-strip[b-3cnv5sxs9z] {
        gap: clamp(0.32rem, 0.95cqh, 0.62rem);
    }

    .vn-control-strip-btn[b-3cnv5sxs9z] {
        font-size: clamp(0.44rem, calc(0.14rem + 0.95cqh), 0.54rem);
        letter-spacing: 0.08em;
    }
}
/* /Components/VisualNovelCreditsOverlay.razor.rz.scp.css */
.vn-credits-shell[b-5jkb6qhmti] {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: auto;
}

.vn-credits-panel[b-5jkb6qhmti] {
    position: relative;
    min-height: 100%;
    padding:
        var(--vn-stage-top-padding)
        var(--vn-stage-inline-padding)
        var(--vn-stage-bottom-padding);
    box-sizing: border-box;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 250, 253, 0.78) 100%);
    backdrop-filter: blur(12px);
}

.vn-credits-back[b-5jkb6qhmti] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: clamp(2rem, 5.4cqh, 2.2rem);
    margin-bottom: clamp(0.9rem, 2.3cqh, 1.25rem);
    padding: clamp(0.38rem, 1.1cqh, 0.45rem) clamp(0.65rem, 1.5cqw, 0.75rem);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color) 82%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
    color: var(--text-primary);
    font-size: clamp(0.66rem, 1.55cqh, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vn-credits-body[b-5jkb6qhmti] {
    width: min(100%, 38rem);
    margin: 0 auto;
    padding:
        clamp(1rem, 10cqh, 5rem)
        clamp(0.8rem, 6cqw, 3rem)
        var(--vn-stage-overlay-bottom-reserve);
    text-align: center;
}

.vn-credits-kicker[b-5jkb6qhmti] {
    margin: 0 0 0.45rem;
    color: rgba(133, 104, 121, 0.72);
    font-size: clamp(0.68rem, 1.6cqh, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.vn-credits-title[b-5jkb6qhmti] {
    margin: 0;
    color: rgba(47, 38, 45, 0.9);
    font-size: clamp(1.45rem, 4.3cqh, 3rem);
    font-weight: 300;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
}

.vn-credits-subtitle[b-5jkb6qhmti] {
    margin: 0.6rem 0 0;
    color: rgba(117, 96, 109, 0.8);
    font-size: clamp(0.84rem, 1.9cqh, 1.08rem);
    letter-spacing: 0.12em;
    line-height: 1.65;
}

.vn-credits-divider[b-5jkb6qhmti] {
    width: min(100%, 24rem);
    height: 1px;
    margin: 1.4rem auto 1.6rem;
    background: linear-gradient(90deg, rgba(208, 161, 183, 0) 0%, rgba(208, 161, 183, 0.58) 50%, rgba(208, 161, 183, 0) 100%);
}

.vn-credits-list[b-5jkb6qhmti] {
    display: grid;
    gap: clamp(0.9rem, 2.2cqh, 1.2rem);
}

.vn-credits-entry[b-5jkb6qhmti] {
    display: grid;
    gap: 0.3rem;
}

.vn-credits-role[b-5jkb6qhmti],
.vn-credits-value[b-5jkb6qhmti],
.vn-credits-note[b-5jkb6qhmti] {
    margin: 0;
}

.vn-credits-role[b-5jkb6qhmti] {
    color: rgba(137, 103, 122, 0.72);
    font-size: clamp(0.68rem, 1.55cqh, 0.74rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.vn-credits-value[b-5jkb6qhmti] {
    color: rgba(57, 46, 54, 0.92);
    font-size: clamp(0.92rem, 2cqh, 1.22rem);
    line-height: 1.7;
}

.vn-credits-note[b-5jkb6qhmti] {
    margin-top: clamp(1.2rem, 3.2cqh, 1.75rem);
    color: rgba(110, 89, 101, 0.78);
    font-size: clamp(0.84rem, 1.8cqh, 0.92rem);
    line-height: 1.7;
}

@container (max-width: 760px) {
    .vn-credits-body[b-5jkb6qhmti] {
        width: 100%;
        padding-inline: clamp(0.4rem, 4cqw, 1rem);
    }
}
/* /Components/VisualNovelDialogueBox.razor.rz.scp.css */
.vn-dialogue[b-6h3d8rtusl] {
    position: relative;
    width: 100%;
    --vn-theme-fill: var(--bg-accent-surface);
    --vn-dialogue-surface: var(--bg-accent-surface);
    --vn-dialogue-surface-strong: color-mix(in srgb, var(--bg-accent-surface) 86%, black 14%);
    --vn-dialogue-border: color-mix(in srgb, white 20%, var(--bg-accent-surface) 80%);
    --vn-dialogue-text: #fff;
    --vn-dialogue-speaker-text: #fff;
    --vn-dialogue-font:
        ui-rounded,
        "Hiragino Maru Gothic ProN",
        "Hiragino Sans",
        "Yu Gothic",
        "Meiryo",
        "Trebuchet MS",
        "Arial Rounded MT Bold",
        sans-serif;
}

.vn-dialogue--tap-enabled[b-6h3d8rtusl] {
    cursor: pointer;
}

.vn-dialogue-nameplate[b-6h3d8rtusl] {
    display: flex;
    align-items: flex-end;
    min-height: clamp(1.5rem, 4.8cqh, 2.2rem);
    margin: 0 0 clamp(0.25rem, 0.8cqh, 0.38rem) clamp(0.75rem, 1.7cqw, 1.15rem);
}

.vn-dialogue-shell[b-6h3d8rtusl] {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 0;
    height: var(--vn-dialogue-shell-height);
    padding:
        clamp(0.8rem, 1.9cqh, 1rem)
        clamp(0.85rem, 1.8cqw, 1.1rem)
        clamp(0.85rem, 2.1cqh, 1.15rem);
    border: 1px solid var(--vn-dialogue-border);
    border-radius: clamp(1rem, 3cqh, 1.5rem);
    background: var(--vn-dialogue-surface);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 24px 60px rgba(0, 0, 0, 0.12);
}

.vn-dialogue-head[b-6h3d8rtusl] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: clamp(0.55rem, 1.2cqh, 0.8rem);
    margin-bottom: clamp(0.45rem, 1.5cqh, 0.7rem);
}

.vn-dialogue-speaker[b-6h3d8rtusl],
.vn-dialogue-kicker[b-6h3d8rtusl] {
    display: inline-flex;
    align-items: center;
    min-height: clamp(1.45rem, 4.2cqh, 2rem);
    padding: clamp(0.22rem, 0.85cqh, 0.42rem) clamp(0.55rem, 1.3cqw, 0.82rem);
    border-radius: 999px;
    font-family: var(--vn-dialogue-font);
    font-size: clamp(0.58rem, calc(0.22rem + 1.2cqh), 0.74rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.vn-dialogue-speaker--character[b-6h3d8rtusl] {
    color: var(--vn-dialogue-speaker-text);
    border-color: color-mix(in srgb, white 20%, var(--vn-theme-fill) 80%);
    background: var(--vn-theme-fill);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.vn-dialogue-speaker--player[b-6h3d8rtusl] {
    color: var(--vn-dialogue-text);
    border-color: color-mix(in srgb, white 18%, var(--vn-theme-fill) 82%);
    background: var(--vn-dialogue-surface-strong);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.vn-dialogue-kicker[b-6h3d8rtusl] {
    margin-left: auto;
    border: 1px solid color-mix(in srgb, white 18%, var(--vn-theme-fill) 82%);
    color: var(--vn-dialogue-text);
    background: var(--vn-dialogue-surface-strong);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.vn-dialogue-copy[b-6h3d8rtusl] {
    position: relative;
    z-index: 1;
    margin: 0;
    align-self: start;
    overflow: hidden;
    font-family: var(--vn-dialogue-font);
    color: var(--vn-dialogue-text);
    font-size: clamp(0.78rem, calc(0.34rem + 2cqh), 1.42rem);
    font-weight: 600;
    line-height: 1.46;
    text-wrap: pretty;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

.vn-dialogue-copy--thought[b-6h3d8rtusl] {
    font-style: italic;
    color: color-mix(in srgb, white 88%, var(--vn-theme-fill) 12%);
}

.vn-dialogue-extra[b-6h3d8rtusl] {
    position: relative;
    z-index: 1;
    margin-top: clamp(0.45rem, 1.35cqh, 1rem);
}

.vn-dialogue-footer[b-6h3d8rtusl] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: clamp(0.32rem, 1.05cqh, 0.8rem);
    padding-top: 0.15rem;
}

.vn-dialogue-continue[b-6h3d8rtusl] {
    position: relative;
    z-index: 1;
    margin-top: clamp(0.55rem, 1.6cqh, 0.9rem);
    padding-top: clamp(0.5rem, 1.5cqh, 0.8rem);
    border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-color) 88%);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    font-size: clamp(0.62rem, 1.4cqh, 0.68rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-secondary);
}

.vn-dialogue-continue-mark[b-6h3d8rtusl] {
    animation: vn-dialogue-bounce-b-6h3d8rtusl 1.1s ease-in-out infinite;
}

@keyframes vn-dialogue-bounce-b-6h3d8rtusl {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}

@container (max-height: 430px) {
    .vn-dialogue-nameplate[b-6h3d8rtusl] {
        margin-left: clamp(0.65rem, 1.5cqw, 0.95rem);
    }

    .vn-dialogue-head[b-6h3d8rtusl] {
        margin-bottom: clamp(0.35rem, 1.2cqh, 0.55rem);
    }

    .vn-dialogue-copy[b-6h3d8rtusl] {
        font-size: clamp(0.72rem, calc(0.28rem + 1.9cqh), 1rem);
        line-height: 1.38;
    }

    .vn-dialogue-shell[b-6h3d8rtusl] {
        padding:
            clamp(0.55rem, 1.45cqh, 0.72rem)
            clamp(0.68rem, 1.45cqw, 0.9rem)
            clamp(0.62rem, 1.55cqh, 0.82rem);
    }
}
/* /Components/VisualNovelGakupediaUnlockToast.razor.rz.scp.css */
.vn-gakupedia-toast-shell[b-zosvourt91] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 0 var(--vn-stage-inline-padding);
    box-sizing: border-box;
    pointer-events: none;
}

.vn-gakupedia-toast[b-zosvourt91] {
    width: min(clamp(15rem, 30cqw, 28rem), 100%);
    display: flex;
    align-items: center;
    gap: clamp(0.65rem, 1.5cqh, 0.9rem);
    padding: clamp(0.7rem, 1.7cqh, 0.85rem) clamp(0.8rem, 1.8cqw, 1rem);
    border: 1px solid rgba(214, 183, 198, 0.52);
    border-radius: clamp(0.9rem, 2.8cqh, 1.15rem);
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 18px 40px rgba(201, 159, 180, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.72) inset;
    animation: vn-gakupedia-toast-inout-b-zosvourt91 2500ms cubic-bezier(0.22, 0.78, 0.2, 1) both;
    backdrop-filter: blur(12px);
}

.vn-gakupedia-toast-badge[b-zosvourt91] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(5.4rem, 9.5cqw, 6.6rem);
    padding: clamp(0.45rem, 1.2cqh, 0.55rem) clamp(0.65rem, 1.55cqw, 0.75rem);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(240, 221, 231, 0.98) 0%, rgba(252, 244, 247, 0.98) 100%);
    color: rgba(120, 82, 100, 0.9);
    font-size: clamp(0.64rem, 1.45cqh, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.vn-gakupedia-toast-copy[b-zosvourt91] {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.vn-gakupedia-toast-kicker[b-zosvourt91],
.vn-gakupedia-toast-title[b-zosvourt91] {
    margin: 0;
}

.vn-gakupedia-toast-kicker[b-zosvourt91] {
    color: rgba(152, 118, 134, 0.74);
    font-size: clamp(0.64rem, 1.45cqh, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vn-gakupedia-toast-title[b-zosvourt91] {
    color: rgba(72, 56, 66, 0.94);
    font-size: clamp(0.88rem, 1.95cqh, 1rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

@keyframes vn-gakupedia-toast-inout-b-zosvourt91 {
    0% {
        opacity: 0;
        transform: translateY(-0.85rem) scale(0.985);
    }

    12%,
    76% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-0.5rem) scale(0.992);
    }
}

@container (max-height: 430px) {
    .vn-gakupedia-toast[b-zosvourt91] {
        gap: clamp(0.5rem, 1.15cqh, 0.7rem);
    }

    .vn-gakupedia-toast-badge[b-zosvourt91] {
        min-width: clamp(4.9rem, 8.5cqw, 5.7rem);
    }

    .vn-gakupedia-toast-title[b-zosvourt91] {
        font-size: clamp(0.82rem, 1.8cqh, 0.92rem);
    }
}
/* /Components/VisualNovelHistoryOverlay.razor.rz.scp.css */
.vn-history-shell[b-1i2uete6u2] {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: auto;
}

.vn-history-panel[b-1i2uete6u2] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding:
        var(--vn-stage-top-padding)
        var(--vn-stage-inline-padding)
        var(--vn-stage-bottom-padding);
    box-sizing: border-box;
    background: color-mix(in srgb, var(--bg-body) 74%, transparent);
    backdrop-filter: blur(12px);
}

.vn-history-back[b-1i2uete6u2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: clamp(2rem, 5.4cqh, 2.2rem);
    margin-bottom: clamp(0.7rem, 1.9cqh, 1rem);
    padding: clamp(0.38rem, 1.1cqh, 0.45rem) clamp(0.65rem, 1.5cqw, 0.75rem);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color) 82%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
    color: var(--text-primary);
    font-size: clamp(0.66rem, 1.55cqh, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vn-history-list[b-1i2uete6u2] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: clamp(0.7rem, 1.9cqh, 1rem);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding:
        0.35rem
        clamp(0.8rem, 15cqw, 16rem)
        var(--vn-stage-overlay-bottom-reserve);
}

.vn-history-entry[b-1i2uete6u2] {
    display: grid;
    gap: 0.45rem;
}

.vn-history-entry--thought[b-1i2uete6u2] {
    gap: 0;
}

.vn-history-speaker[b-1i2uete6u2] {
    color: var(--accent-secondary);
    font-size: clamp(0.66rem, 1.45cqh, 0.7rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vn-history-copy[b-1i2uete6u2],
.vn-history-empty[b-1i2uete6u2] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(0.88rem, 1.95cqh, 0.95rem);
    line-height: 1.7;
}

.vn-history-copy--thought[b-1i2uete6u2] {
    font-style: italic;
    color: color-mix(in srgb, var(--text-primary) 88%, var(--accent-secondary) 12%);
}

@container (max-width: 760px) {
    .vn-history-list[b-1i2uete6u2] {
        padding-inline: clamp(0.5rem, 6cqw, 1.4rem);
    }
}
/* /Components/VisualNovelLessonOverlay.razor.rz.scp.css */
.vn-lesson[b-3fkpmpq1b0] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.vn-lesson-board[b-3fkpmpq1b0] {
    --vn-lesson-intro-placement-top: 54%;
    --vn-lesson-intro-three-top-offset: 12%;
    --vn-lesson-intro-three-bottom-offset: 6%;
    --vn-lesson-layer-guides: 0;
    --vn-lesson-layer-hand: 1;
    --vn-lesson-layer-card: 2;
    --vn-lesson-layer-quiz-hand: 3;
    --vn-lesson-layer-placement-card: 4;
    --vn-lesson-layer-thumb: 5;
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.vn-lesson-card[b-3fkpmpq1b0],
.vn-lesson-compact-question-bar[b-3fkpmpq1b0] {
    --vn-lesson-card-surface-border: 1px solid rgba(92, 84, 76, 0.24);
    --vn-lesson-card-surface-radius: clamp(0.55rem, 2.6cqh, 1.2rem);
    --vn-lesson-card-surface-background: #fff;
    --vn-lesson-card-surface-shadow:
        0 22px 44px rgba(36, 30, 25, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.vn-lesson-cards-host[b-3fkpmpq1b0],
.vn-lesson-target-guides[b-3fkpmpq1b0],
.vn-lesson-placement-stack[b-3fkpmpq1b0] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vn-lesson-target-guides[b-3fkpmpq1b0] {
    z-index: var(--vn-lesson-layer-guides);
    visibility: hidden;
}

.vn-lesson-cards-host[b-3fkpmpq1b0],
.vn-lesson-options[b-3fkpmpq1b0] {
    z-index: var(--vn-lesson-layer-card);
}

.vn-lesson-placement-rig[b-3fkpmpq1b0] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vn-lesson-hand-layer[b-3fkpmpq1b0],
.vn-lesson-thumb-layer[b-3fkpmpq1b0] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
}

.vn-lesson-hand-layer[b-3fkpmpq1b0] {
    z-index: var(--vn-lesson-layer-hand);
}

.vn-lesson--quiz .vn-lesson-hand-layer[b-3fkpmpq1b0] {
    z-index: var(--vn-lesson-layer-quiz-hand);
}

.vn-lesson-thumb-layer[b-3fkpmpq1b0] {
    z-index: var(--vn-lesson-layer-thumb);
}

.vn-lesson-card[b-3fkpmpq1b0] {
    /* Keep card hands in authored 16:9 stage coordinates: resize scales the hand instead of re-laying it out. */
    --vn-lesson-card-width: min(20cqw, calc(100cqw - (var(--vn-stage-inline-padding, 1rem) * 2)));
    --vn-lesson-card-cluster-offset: 8.75cqw;
    --vn-lesson-card-cluster-offset-tight: 8.33cqw;
    position: absolute;
    width: var(--vn-lesson-card-width);
    min-height: 20.7cqh;
    padding: 2.6cqh 2cqw;
    border: var(--vn-lesson-card-surface-border);
    border-radius: var(--vn-lesson-card-surface-radius);
    background: var(--vn-lesson-card-surface-background);
    box-shadow: var(--vn-lesson-card-surface-shadow);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    pointer-events: none;
    transform-origin: center center;
    z-index: var(--vn-lesson-layer-card);
}

.vn-lesson-card--placement[b-3fkpmpq1b0] {
    left: 50%;
    top: var(--vn-lesson-intro-placement-top);
    transform: translate(-50%, -50%);
    z-index: var(--vn-lesson-layer-placement-card);
    will-change: transform;
}

.vn-lesson-card-copy[b-3fkpmpq1b0] {
    display: grid;
    gap: clamp(0.12rem, 0.9cqh, 0.38rem);
    place-items: center;
    width: 100%;
    font-family: "Klee One", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
}

.vn-lesson-card-text[b-3fkpmpq1b0] {
    color: rgba(30, 25, 20, 0.92);
    font-size: clamp(0.72rem, 3.2cqh, 2rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: 0;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.vn-lesson-card-native[b-3fkpmpq1b0] {
    color: rgba(70, 56, 47, 0.8);
    font-size: clamp(0.56rem, 2.2cqh, 1.28rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.vn-lesson-cards-host--intro.vn-lesson-cards-host--count-1 .vn-lesson-card--slot-0[b-3fkpmpq1b0],
.vn-lesson-target-guides .vn-lesson-cards-host--intro.vn-lesson-cards-host--count-1 .vn-lesson-card--slot-0[b-3fkpmpq1b0] {
    left: 50%;
    top: var(--vn-lesson-intro-placement-top);
    transform: translate(-50%, -50%);
}

.vn-lesson-cards-host--intro.vn-lesson-cards-host--count-2 .vn-lesson-card--slot-0[b-3fkpmpq1b0],
.vn-lesson-target-guides .vn-lesson-cards-host--intro.vn-lesson-cards-host--count-2 .vn-lesson-card--slot-0[b-3fkpmpq1b0] {
    left: calc(50% - var(--vn-lesson-card-cluster-offset));
    top: var(--vn-lesson-intro-placement-top);
    transform: translate(-50%, -50%) rotate(-1.8deg);
}

.vn-lesson-cards-host--intro.vn-lesson-cards-host--count-2 .vn-lesson-card--slot-1[b-3fkpmpq1b0],
.vn-lesson-target-guides .vn-lesson-cards-host--intro.vn-lesson-cards-host--count-2 .vn-lesson-card--slot-1[b-3fkpmpq1b0] {
    left: calc(50% + var(--vn-lesson-card-cluster-offset));
    top: var(--vn-lesson-intro-placement-top);
    transform: translate(-50%, -50%) rotate(1.8deg);
}

.vn-lesson-cards-host--intro.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-0[b-3fkpmpq1b0],
.vn-lesson-target-guides .vn-lesson-cards-host--intro.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-0[b-3fkpmpq1b0] {
    left: calc(50% - var(--vn-lesson-card-cluster-offset-tight));
    top: calc(var(--vn-lesson-intro-placement-top) + var(--vn-lesson-intro-three-bottom-offset));
    transform: translate(-50%, -50%) rotate(-2.4deg);
}

.vn-lesson-cards-host--intro.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-1[b-3fkpmpq1b0],
.vn-lesson-target-guides .vn-lesson-cards-host--intro.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-1[b-3fkpmpq1b0] {
    left: calc(50% + var(--vn-lesson-card-cluster-offset-tight));
    top: calc(var(--vn-lesson-intro-placement-top) + var(--vn-lesson-intro-three-bottom-offset));
    transform: translate(-50%, -50%) rotate(2.4deg);
}

.vn-lesson-cards-host--intro.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-2[b-3fkpmpq1b0],
.vn-lesson-target-guides .vn-lesson-cards-host--intro.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-2[b-3fkpmpq1b0] {
    left: 50%;
    top: calc(var(--vn-lesson-intro-placement-top) - var(--vn-lesson-intro-three-top-offset));
    transform: translate(-50%, -50%) rotate(-0.7deg);
}

.vn-lesson-options[b-3fkpmpq1b0] {
    position: absolute;
    right: max(var(--vn-stage-inline-padding), 4.6cqw);
    top: 20%;
    width: clamp(16rem, 42cqw, 30rem);
    display: grid;
    gap: clamp(0.6rem, 1.6cqh, 0.9rem);
    opacity: 0;
    transform: translate3d(1rem, 0, 0);
    transition:
        opacity 240ms ease,
        transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.vn-lesson-options--placement-preview[b-3fkpmpq1b0] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
}

.vn-lesson-option-card[b-3fkpmpq1b0] {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: clamp(6.7rem, 11.7cqh, 8.4rem);
    padding: clamp(0.8rem, 2cqh, 1rem) clamp(0.8rem, 1.8cqw, 1rem) clamp(0.85rem, 2.1cqh, 1.05rem);
    border: 1px solid rgba(92, 84, 76, 0.24);
    border-radius: clamp(0.9rem, 2.6cqh, 1rem);
    background: #fff;
    box-shadow:
        0 18px 34px rgba(36, 30, 25, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    text-align: left;
    transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        border-color 170ms ease;
    pointer-events: auto;
}

.vn-lesson-option-card--preview[b-3fkpmpq1b0] {
    opacity: 0;
    pointer-events: none;
}

.vn-lesson-option-card--placement[b-3fkpmpq1b0] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: var(--vn-lesson-layer-placement-card);
    will-change: transform;
    pointer-events: none;
}

.vn-lesson-option-card--selected[b-3fkpmpq1b0] {
    border-color: rgba(130, 104, 88, 0.4);
    box-shadow:
        0 24px 40px rgba(36, 30, 25, 0.1),
        inset 0 0 0 1px rgba(130, 104, 88, 0.12);
}

.vn-lesson-option-card:hover:not(:disabled)[b-3fkpmpq1b0] {
    transform: translateY(-2px);
    box-shadow:
        0 24px 40px rgba(36, 30, 25, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.vn-lesson-option-card:disabled[b-3fkpmpq1b0] {
    cursor: default;
}

.vn-lesson-option-card--wrong[b-3fkpmpq1b0] {
    animation: vn-lesson-card-shake-b-3fkpmpq1b0 220ms ease;
    border-color: rgba(54, 43, 33, 0.46);
}

.vn-lesson-option-card--correct[b-3fkpmpq1b0] {
    transform: scale(1.02);
    box-shadow:
        0 26px 44px rgba(36, 30, 25, 0.1),
        inset 0 0 0 1px rgba(54, 43, 33, 0.24);
}

.vn-lesson-option-copy[b-3fkpmpq1b0] {
    white-space: pre-wrap;
    color: rgba(28, 22, 17, 0.9);
    font-size: clamp(0.82rem, 1.7cqh, 1rem);
    font-weight: 500;
    line-height: 1.48;
    text-wrap: pretty;
}

.vn-lesson-option-copy--summary[b-3fkpmpq1b0] {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.24;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.vn-lesson-cards-host--quiz .vn-lesson-card[b-3fkpmpq1b0] {
    --vn-lesson-card-width: min(14.17cqw, calc(100cqw - (var(--vn-stage-inline-padding, 1rem) * 2)));
    min-height: 14.8cqh;
}

.vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-1 .vn-lesson-card--slot-0[b-3fkpmpq1b0] {
    left: 15.83cqw;
    top: 38%;
    transform: translate(-50%, -50%) rotate(-1.2deg);
}

.vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-2 .vn-lesson-card--slot-0[b-3fkpmpq1b0] {
    left: 11.67cqw;
    top: 43%;
    transform: translate(-50%, -50%) rotate(-2deg);
}

.vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-2 .vn-lesson-card--slot-1[b-3fkpmpq1b0] {
    left: 23.33cqw;
    top: 43%;
    transform: translate(-50%, -50%) rotate(1.8deg);
}

.vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-0[b-3fkpmpq1b0] {
    left: 11.25cqw;
    top: 47%;
    transform: translate(-50%, -50%) rotate(-2.4deg);
}

.vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-1[b-3fkpmpq1b0] {
    left: 23.33cqw;
    top: 47%;
    transform: translate(-50%, -50%) rotate(2.4deg);
}

.vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-2[b-3fkpmpq1b0] {
    left: 17.5cqw;
    top: 24%;
    transform: translate(-50%, -50%) rotate(-0.8deg);
}

.vn-lesson--quiz .vn-lesson-options[b-3fkpmpq1b0] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.vn-lesson--compact .vn-lesson-cards-host--quiz .vn-lesson-card[b-3fkpmpq1b0] {
    --vn-lesson-card-width: 15.4cqw;
    --vn-lesson-card-cluster-offset: 7.28cqw;
    --vn-lesson-card-cluster-offset-tight: 6.62cqw;
    min-height: 17.6cqh;
    padding: 1.35cqh 1.3cqw;
    border-radius: clamp(0.5rem, 1.9cqh, 0.95rem);
}

.vn-lesson--compact .vn-lesson-card-text[b-3fkpmpq1b0] {
    font-size: clamp(0.62rem, 1.92cqh, 1.08rem);
    line-height: 1.12;
}

.vn-lesson--compact .vn-lesson-card-native[b-3fkpmpq1b0] {
    font-size: clamp(0.5rem, 1.46cqh, 0.82rem);
}

.vn-lesson--compact .vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-1 .vn-lesson-card--slot-0[b-3fkpmpq1b0] {
    left: 50%;
    top: calc(var(--vn-stage-top-overlay-reserve) + 17cqh);
    transform: translate(-50%, -50%) rotate(-0.8deg);
}

.vn-lesson--compact .vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-2 .vn-lesson-card--slot-0[b-3fkpmpq1b0] {
    left: calc(50% - var(--vn-lesson-card-cluster-offset));
    top: calc(var(--vn-stage-top-overlay-reserve) + 18.5cqh);
    transform: translate(-50%, -50%) rotate(-1.2deg);
}

.vn-lesson--compact .vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-2 .vn-lesson-card--slot-1[b-3fkpmpq1b0] {
    left: calc(50% + var(--vn-lesson-card-cluster-offset));
    top: calc(var(--vn-stage-top-overlay-reserve) + 18.5cqh);
    transform: translate(-50%, -50%) rotate(1.2deg);
}

.vn-lesson--compact .vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-0[b-3fkpmpq1b0] {
    left: calc(50% - var(--vn-lesson-card-cluster-offset-tight));
    top: calc(var(--vn-stage-top-overlay-reserve) + 20.4cqh);
    transform: translate(-50%, -50%) rotate(-1.5deg);
}

.vn-lesson--compact .vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-1[b-3fkpmpq1b0] {
    left: calc(50% + var(--vn-lesson-card-cluster-offset-tight));
    top: calc(var(--vn-stage-top-overlay-reserve) + 20.4cqh);
    transform: translate(-50%, -50%) rotate(1.5deg);
}

.vn-lesson--compact .vn-lesson-cards-host--quiz.vn-lesson-cards-host--count-3 .vn-lesson-card--slot-2[b-3fkpmpq1b0] {
    left: 50%;
    top: calc(var(--vn-stage-top-overlay-reserve) + 9.2cqh);
    transform: translate(-50%, -50%) rotate(-0.45deg);
}

.vn-lesson-compact-question-bar[b-3fkpmpq1b0] {
    position: absolute;
    left: var(--vn-stage-inline-padding);
    right: var(--vn-stage-inline-padding);
    top: var(--vn-stage-top-padding);
    z-index: var(--vn-lesson-layer-card);
    min-height: clamp(2.65rem, 8.4cqh, 3.65rem);
    display: grid;
    place-items: center;
    padding: clamp(0.42rem, 1.05cqh, 0.62rem) clamp(0.7rem, 1.7cqw, 1rem);
    border: var(--vn-lesson-card-surface-border);
    border-radius: var(--vn-lesson-card-surface-radius);
    background: var(--vn-lesson-card-surface-background);
    box-shadow: var(--vn-lesson-card-surface-shadow);
    box-sizing: border-box;
    pointer-events: none;
}

.vn-lesson-compact-question-bar .vn-lesson-card-copy[b-3fkpmpq1b0] {
    gap: clamp(0.08rem, 0.35cqh, 0.16rem);
}

.vn-lesson-compact-question-bar .vn-lesson-card-text[b-3fkpmpq1b0] {
    font-size: clamp(0.82rem, 2.25cqh, 1.18rem);
    line-height: 1.08;
}

.vn-lesson-compact-question-bar .vn-lesson-card-native[b-3fkpmpq1b0] {
    font-size: clamp(0.58rem, 1.35cqh, 0.78rem);
    line-height: 1.08;
}

.vn-lesson-options--compact[b-3fkpmpq1b0] {
    left: var(--vn-stage-inline-padding);
    right: var(--vn-stage-inline-padding);
    top: calc(var(--vn-stage-top-overlay-reserve) + 23cqh);
    bottom: var(--vn-stage-overlay-bottom-reserve);
    width: auto;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(0.42rem, 1.05cqh, 0.58rem);
}

.vn-lesson-options--compact.vn-lesson-options--placement-preview[b-3fkpmpq1b0] {
    bottom: auto;
}

.vn-lesson-options--swipe[b-3fkpmpq1b0] {
    left: 0;
    right: 0;
    top: calc(var(--vn-stage-top-padding) + clamp(3.15rem, 10.5cqh, 4.55rem));
    bottom: var(--vn-stage-overlay-bottom-reserve);
    width: auto;
    display: flex;
    align-items: center;
    gap: 0;
    pointer-events: none;
}

.vn-lesson-options--swipe.vn-lesson-options--placement-preview[b-3fkpmpq1b0] {
    bottom: var(--vn-stage-overlay-bottom-reserve);
}

.vn-lesson-answer-rail[b-3fkpmpq1b0] {
    --vn-lesson-answer-card-width: min(78cqw, 24rem);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--vn-lesson-answer-card-width);
    align-items: stretch;
    gap: clamp(0.62rem, 1.45cqw, 0.95rem);
    width: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding:
        clamp(0.18rem, 0.65cqh, 0.32rem)
        calc((100% - var(--vn-lesson-answer-card-width)) / 2);
    box-sizing: border-box;
    pointer-events: auto;
    scroll-padding-inline: calc((100% - var(--vn-lesson-answer-card-width)) / 2);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.vn-lesson-answer-rail[b-3fkpmpq1b0]::-webkit-scrollbar {
    display: none;
}

.vn-lesson-answer-rail--preview[b-3fkpmpq1b0] {
    pointer-events: none;
}

.vn-lesson-answer-card[b-3fkpmpq1b0] {
    width: 100%;
    min-height: clamp(8.2rem, 34cqh, 15.5rem);
    max-height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: clamp(0.5rem, 1.25cqh, 0.75rem);
    padding: clamp(0.66rem, 1.6cqh, 0.9rem) clamp(0.72rem, 1.7cqw, 0.95rem);
    border-radius: clamp(0.82rem, 2.15cqh, 1rem);
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.vn-lesson-answer-card--selected[b-3fkpmpq1b0] {
    border-color: rgba(130, 104, 88, 0.38);
    box-shadow:
        0 22px 38px rgba(36, 30, 25, 0.1),
        inset 0 0 0 1px rgba(130, 104, 88, 0.12);
}

.vn-lesson-answer-scroll[b-3fkpmpq1b0] {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: clamp(0.42rem, 1cqh, 0.58rem);
    overflow: auto;
    padding-right: 0.12rem;
}

.vn-lesson-answer-summary[b-3fkpmpq1b0] {
    margin: 0;
    color: rgba(28, 22, 17, 0.94);
    font-size: clamp(0.76rem, 1.6cqh, 0.92rem);
    font-weight: 700;
    line-height: 1.24;
    text-wrap: pretty;
}

.vn-lesson-compact-summary-grid[b-3fkpmpq1b0] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.42rem, 1.05cqh, 0.58rem);
    min-width: 0;
}

.vn-lesson-option-card--compact-summary[b-3fkpmpq1b0] {
    align-items: center;
    justify-content: center;
    min-height: clamp(2.6rem, 6.3cqh, 3.2rem);
    padding: clamp(0.48rem, 1.12cqh, 0.62rem) clamp(0.52rem, 1.15cqw, 0.68rem);
    border-radius: clamp(0.72rem, 1.9cqh, 0.92rem);
    text-align: center;
}

.vn-lesson-option-card--compact-summary .vn-lesson-option-copy[b-3fkpmpq1b0] {
    width: 100%;
    font-size: clamp(0.7rem, 1.45cqh, 0.84rem);
    font-weight: 600;
}

.vn-lesson-compact-reader[b-3fkpmpq1b0] {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(0.52rem, 1.2cqh, 0.7rem);
    padding: clamp(0.68rem, 1.55cqh, 0.88rem);
    border: 1px solid rgba(92, 84, 76, 0.22);
    border-radius: clamp(0.92rem, 2.4cqh, 1.08rem);
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 20px 36px rgba(36, 30, 25, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    pointer-events: auto;
    overflow: hidden;
}

.vn-lesson-compact-reader--wrong[b-3fkpmpq1b0] {
    border-color: rgba(54, 43, 33, 0.34);
}

.vn-lesson-compact-reader--correct[b-3fkpmpq1b0] {
    box-shadow:
        0 22px 40px rgba(36, 30, 25, 0.1),
        inset 0 0 0 1px rgba(54, 43, 33, 0.16);
}

.vn-lesson-compact-reader-scroll[b-3fkpmpq1b0] {
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: clamp(0.48rem, 1.05cqh, 0.62rem);
    padding-right: 0.14rem;
}

.vn-lesson-compact-section[b-3fkpmpq1b0] {
    display: grid;
    gap: clamp(0.12rem, 0.35cqh, 0.2rem);
}

.vn-lesson-compact-label[b-3fkpmpq1b0] {
    margin: 0;
    color: rgba(118, 95, 81, 0.74);
    font-size: clamp(0.54rem, 1.15cqh, 0.62rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vn-lesson-compact-copy[b-3fkpmpq1b0] {
    margin: 0;
    color: rgba(28, 22, 17, 0.9);
    font-size: clamp(0.72rem, 1.48cqh, 0.88rem);
    font-weight: 500;
    line-height: 1.4;
    text-wrap: pretty;
}

.vn-lesson-compact-copy--meaning[b-3fkpmpq1b0] {
    font-weight: 700;
}

.vn-lesson-compact-choose[b-3fkpmpq1b0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(2.1rem, 5cqh, 2.45rem);
    padding: clamp(0.48rem, 1.05cqh, 0.58rem) clamp(0.88rem, 1.7cqw, 1rem);
    border: 1px solid rgba(92, 84, 76, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: rgba(39, 31, 25, 0.92);
    font-size: clamp(0.64rem, 1.28cqh, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.vn-lesson-compact-choose:hover:not(:disabled)[b-3fkpmpq1b0] {
    transform: translateY(-1px);
    border-color: rgba(104, 88, 76, 0.36);
    box-shadow: 0 12px 22px rgba(36, 30, 25, 0.08);
}

.vn-lesson-compact-choose:disabled[b-3fkpmpq1b0] {
    cursor: default;
}

@keyframes vn-lesson-card-shake-b-3fkpmpq1b0 {
    0%,
    100% {
        transform: translateX(0);
    }

    30% {
        transform: translateX(-4px);
    }

    65% {
        transform: translateX(5px);
    }
}

@container (max-width: 760px) {
    .vn-lesson-options[b-3fkpmpq1b0] {
        top: 15%;
    }
}

@container (max-height: 430px) {
    .vn-lesson-card[b-3fkpmpq1b0] {
        --vn-lesson-card-width: min(19cqw, calc(100cqw - (var(--vn-stage-inline-padding, 1rem) * 2)));
        min-height: 18cqh;
        padding: 2cqh 1.7cqw;
    }

    .vn-lesson-card-text[b-3fkpmpq1b0] {
        font-size: clamp(0.62rem, 2.7cqh, 1.45rem);
    }

    .vn-lesson-card-native[b-3fkpmpq1b0] {
        font-size: clamp(0.5rem, 1.95cqh, 1.05rem);
    }

    .vn-lesson-options[b-3fkpmpq1b0] {
        gap: clamp(0.45rem, 1.2cqh, 0.65rem);
    }

    .vn-lesson-option-card[b-3fkpmpq1b0] {
        min-height: clamp(5.8rem, 10.6cqh, 6.9rem);
    }

    .vn-lesson-option-copy[b-3fkpmpq1b0] {
        font-size: clamp(0.76rem, 1.55cqh, 0.9rem);
        line-height: 1.42;
    }

    .vn-lesson--compact .vn-lesson-cards-host--quiz .vn-lesson-card[b-3fkpmpq1b0] {
        --vn-lesson-card-width: 15.1cqw;
        --vn-lesson-card-cluster-offset: 7.12cqw;
        --vn-lesson-card-cluster-offset-tight: 6.48cqw;
        min-height: 16.8cqh;
        padding: 1.05cqh 1.1cqw;
    }

    .vn-lesson--compact .vn-lesson-card-text[b-3fkpmpq1b0] {
        font-size: clamp(0.58rem, 1.72cqh, 0.96rem);
    }

    .vn-lesson--compact .vn-lesson-card-native[b-3fkpmpq1b0] {
        font-size: clamp(0.46rem, 1.28cqh, 0.72rem);
    }

    .vn-lesson-compact-question-bar[b-3fkpmpq1b0] {
        min-height: clamp(2.15rem, 6.6cqh, 2.7rem);
        padding: clamp(0.3rem, 0.82cqh, 0.45rem) clamp(0.58rem, 1.25cqw, 0.74rem);
    }

    .vn-lesson-compact-question-bar .vn-lesson-card-text[b-3fkpmpq1b0] {
        font-size: clamp(0.72rem, 1.85cqh, 0.92rem);
    }

    .vn-lesson-compact-question-bar .vn-lesson-card-native[b-3fkpmpq1b0] {
        font-size: clamp(0.5rem, 1.1cqh, 0.62rem);
    }

    .vn-lesson-options--compact[b-3fkpmpq1b0] {
        top: calc(var(--vn-stage-top-overlay-reserve) + 21cqh);
        gap: clamp(0.34rem, 0.85cqh, 0.46rem);
    }

    .vn-lesson-options--swipe[b-3fkpmpq1b0] {
        top: calc(var(--vn-stage-top-padding) + clamp(2.5rem, 8.15cqh, 3.25rem));
        gap: 0;
    }

    .vn-lesson-answer-rail[b-3fkpmpq1b0] {
        --vn-lesson-answer-card-width: min(80cqw, 21rem);
        gap: clamp(0.46rem, 1.05cqw, 0.68rem);
        padding-block: clamp(0.12rem, 0.42cqh, 0.24rem);
    }

    .vn-lesson-answer-card[b-3fkpmpq1b0] {
        min-height: clamp(7.35rem, 30cqh, 11rem);
        gap: clamp(0.34rem, 0.82cqh, 0.46rem);
        padding: clamp(0.5rem, 1.12cqh, 0.68rem) clamp(0.58rem, 1.25cqw, 0.72rem);
    }

    .vn-lesson-answer-scroll[b-3fkpmpq1b0] {
        gap: clamp(0.3rem, 0.72cqh, 0.42rem);
    }

    .vn-lesson-answer-summary[b-3fkpmpq1b0] {
        font-size: clamp(0.68rem, 1.34cqh, 0.8rem);
        line-height: 1.18;
    }

    .vn-lesson-compact-summary-grid[b-3fkpmpq1b0] {
        gap: clamp(0.34rem, 0.85cqh, 0.46rem);
    }

    .vn-lesson-option-card--compact-summary[b-3fkpmpq1b0] {
        min-height: clamp(2.35rem, 5.55cqh, 2.9rem);
        padding: clamp(0.38rem, 0.92cqh, 0.5rem) clamp(0.42rem, 0.95cqw, 0.56rem);
    }

    .vn-lesson-option-card--compact-summary .vn-lesson-option-copy[b-3fkpmpq1b0] {
        font-size: clamp(0.66rem, 1.32cqh, 0.78rem);
        line-height: 1.18;
    }

    .vn-lesson-compact-reader[b-3fkpmpq1b0] {
        gap: clamp(0.38rem, 0.9cqh, 0.5rem);
        padding: clamp(0.54rem, 1.2cqh, 0.72rem);
    }

    .vn-lesson-compact-reader-scroll[b-3fkpmpq1b0] {
        gap: clamp(0.36rem, 0.82cqh, 0.46rem);
    }

    .vn-lesson-compact-label[b-3fkpmpq1b0] {
        font-size: clamp(0.5rem, 1.02cqh, 0.56rem);
    }

    .vn-lesson-compact-copy[b-3fkpmpq1b0] {
        font-size: clamp(0.68rem, 1.32cqh, 0.8rem);
        line-height: 1.32;
    }

    .vn-lesson-compact-choose[b-3fkpmpq1b0] {
        min-height: clamp(1.9rem, 4.45cqh, 2.15rem);
        font-size: clamp(0.58rem, 1.14cqh, 0.66rem);
    }
}
/* /Components/VisualNovelMainMenu.razor.rz.scp.css */
.vn-main-menu[b-08aj37fe9r] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding:
        var(--vn-stage-top-padding)
        var(--vn-stage-inline-padding)
        var(--vn-stage-bottom-padding);
    box-sizing: border-box;
    pointer-events: none;
}

.vn-main-menu[b-08aj37fe9r]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: min(44rem, 52cqw);
    background:
        radial-gradient(circle at 18% 22%, color-mix(in srgb, #ffd7ea 80%, var(--accent, #f39ab9) 20%) 0%, transparent 32%),
        radial-gradient(circle at 6% 72%, color-mix(in srgb, #ffe8f2 82%, var(--accent, #f39ab9) 18%) 0%, transparent 38%),
        radial-gradient(circle at 42% 54%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 58%);
    opacity: 0.82;
    filter: blur(24px);
    pointer-events: none;
}

.vn-main-menu-art[b-08aj37fe9r] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.vn-main-menu-art-motion[b-08aj37fe9r] {
    position: absolute;
    inset: 0;
    transform-origin: center bottom;
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
}

.vn-main-menu-art-motion--entering[b-08aj37fe9r] {
    animation: vn-main-menu-entrance-b-08aj37fe9r var(--vn-menu-entrance-duration, 620ms) cubic-bezier(0.18, 0.8, 0.22, 1) both;
    will-change: transform, opacity, filter;
}

.vn-main-menu-art-layer[b-08aj37fe9r] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    user-select: none;
    transform: translate3d(0, 0, 0);
}

.vn-main-menu-art-layer--pupil[b-08aj37fe9r] {
    transition: transform 80ms linear;
}

@keyframes vn-main-menu-entrance-b-08aj37fe9r {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translate3d(0, 24%, 0) scale(1.115);
    }

    22% {
        opacity: 1;
        filter: blur(0);
    }

    68% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, -1.15%, 0) scale(0.994);
    }

    84% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0.32%, 0) scale(1.0015);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.vn-main-menu-panel[b-08aj37fe9r] {
    position: relative;
    z-index: 1;
    width: clamp(18rem, 22cqw, 21rem);
    display: grid;
    gap: clamp(0.8rem, 2.1cqh, 1rem);
    pointer-events: auto;
}

.vn-main-menu-heading[b-08aj37fe9r] {
    display: grid;
    gap: clamp(0.45rem, 1.6cqh, 0.7rem);
    width: 100%;
    justify-items: center;
}

.vn-main-menu-kicker[b-08aj37fe9r] {
    margin: 0;
    color: rgba(132, 102, 120, 0.68);
    font-size: clamp(0.68rem, 1.55cqh, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.vn-main-menu-title-block[b-08aj37fe9r] {
    display: grid;
    gap: clamp(0.12rem, 0.6cqh, 0.28rem);
    justify-items: center;
    text-align: center;
}

.vn-main-menu-title[b-08aj37fe9r] {
    margin: 0;
    color: rgba(45, 40, 47, 0.84);
    font-size: clamp(1.5rem, 4.8cqh, 2.8rem);
    font-weight: 300;
    letter-spacing: 0.24em;
    line-height: 1;
    text-transform: uppercase;
    text-wrap: balance;
}

.vn-main-menu-subtitle[b-08aj37fe9r] {
    margin: 0;
    color: rgba(122, 103, 116, 0.78);
    font-size: clamp(0.78rem, 1.9cqh, 1.02rem);
    font-weight: 400;
    letter-spacing: 0.22em;
    line-height: 1.2;
    text-transform: uppercase;
}

.vn-main-menu-divider[b-08aj37fe9r] {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(203, 154, 179, 0.45) 0%, rgba(203, 154, 179, 0.14) 100%);
}

.vn-main-menu-actions-shell[b-08aj37fe9r] {
    position: relative;
    width: 100%;
    padding: 0;
}

.vn-main-menu-actions[b-08aj37fe9r] {
    display: grid;
    gap: clamp(0.55rem, 1.8cqh, 0.95rem);
}

.vn-main-menu-btn[b-08aj37fe9r] {
    display: grid;
    gap: 0.2rem;
    width: 100%;
    min-height: clamp(3rem, 9.5cqh, 3.7rem);
    padding: clamp(0.55rem, 1.7cqh, 0.7rem) 0.75rem;
    border: 0;
    border-radius: 1rem;
    background: transparent;
    color: rgba(92, 78, 87, 0.78);
    text-align: center;
    justify-items: center;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease,
        opacity 0.18s ease;
}

.vn-main-menu-btn--primary[b-08aj37fe9r] {
    background: color-mix(in srgb, rgba(248, 214, 229, 0.54) 74%, rgba(255, 255, 255, 0.36) 26%);
    color: rgba(66, 52, 60, 0.92);
}

.vn-main-menu-label[b-08aj37fe9r] {
    font-size: clamp(1rem, 2.9cqh, 1.55rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vn-main-menu-copy[b-08aj37fe9r] {
    color: rgba(126, 107, 117, 0.56);
    font-size: clamp(0.64rem, 1.4cqh, 0.71rem);
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.vn-main-menu-footer[b-08aj37fe9r] {
    margin: clamp(0.15rem, 0.7cqh, 0.35rem) 0 0;
    color: rgba(92, 78, 87, 0.54);
    font-size: clamp(0.58rem, 1.25cqh, 0.68rem);
    letter-spacing: 0;
    line-height: 1.45;
    text-align: center;
}

.vn-main-menu-btn:hover:not(:disabled)[b-08aj37fe9r],
.vn-main-menu-btn:focus-visible:not(:disabled)[b-08aj37fe9r] {
    background: rgba(249, 221, 233, 0.46);
    color: rgba(62, 50, 58, 0.94);
    transform: translateY(-1px);
    outline: none;
}

.vn-main-menu-btn:disabled[b-08aj37fe9r] {
    opacity: 0.55;
    cursor: default;
}

@container (max-width: 760px) {
    .vn-main-menu-panel[b-08aj37fe9r] {
        width: min(100%, 22rem);
    }
}

@container (max-height: 430px) {
    .vn-main-menu[b-08aj37fe9r] {
        align-items: stretch;
    }

    .vn-main-menu-panel[b-08aj37fe9r] {
        align-self: center;
        width: clamp(14.5rem, 27cqw, 18rem);
        gap: clamp(0.4rem, 1.2cqh, 0.55rem);
    }

    .vn-main-menu-heading[b-08aj37fe9r] {
        gap: clamp(0.2rem, 0.85cqh, 0.32rem);
    }

    .vn-main-menu-title[b-08aj37fe9r] {
        font-size: clamp(1.2rem, 4.4cqh, 1.8rem);
        letter-spacing: 0.18em;
    }

    .vn-main-menu-subtitle[b-08aj37fe9r] {
        font-size: clamp(0.62rem, 1.65cqh, 0.82rem);
        letter-spacing: 0.17em;
    }

    .vn-main-menu-actions[b-08aj37fe9r] {
        gap: clamp(0.2rem, 0.75cqh, 0.28rem);
    }

    .vn-main-menu-btn[b-08aj37fe9r] {
        min-height: clamp(2.3rem, 7.5cqh, 2.55rem);
        padding: clamp(0.35rem, 1.15cqh, 0.45rem) 0.6rem;
        border-radius: 0.9rem;
    }

    .vn-main-menu-label[b-08aj37fe9r] {
        font-size: clamp(0.88rem, 2.55cqh, 1.2rem);
    }

    .vn-main-menu-copy[b-08aj37fe9r] {
        display: none;
    }

    .vn-main-menu-footer[b-08aj37fe9r] {
        font-size: clamp(0.54rem, 1.45cqh, 0.62rem);
        line-height: 1.25;
    }
}
/* /Components/VisualNovelPortraitStage.razor.rz.scp.css */
.vn-stage[b-25j1vfz7xw] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: default;
    background: inherit;
}

.vn-stage-background[b-25j1vfz7xw] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.vn-stage-background-image[b-25j1vfz7xw] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    user-select: none;
}

.vn-stage-portrait[b-25j1vfz7xw] {
    --vn-stage-portrait-fade-duration: 220ms;
    --vn-stage-portrait-shift-x: 0%;
    --vn-stage-portrait-shift-y: 0;
    --vn-stage-portrait-scale: 1;
    --vn-stage-portrait-focused-shift-y: -2.4cqh;
    --vn-stage-portrait-focused-scale: 1.035;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    opacity: 1;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.vn-stage-portrait--left[b-25j1vfz7xw] {
    --vn-stage-portrait-shift-x: -18%;
}

.vn-stage-portrait--center[b-25j1vfz7xw] {
    --vn-stage-portrait-shift-x: 0%;
}

.vn-stage-portrait--right[b-25j1vfz7xw] {
    --vn-stage-portrait-shift-x: 18%;
}

.vn-stage-portrait--speaker-mio[b-25j1vfz7xw] {
    --vn-stage-portrait-focused-shift-y: 0.6cqh;
}

.vn-stage-portrait--entering[b-25j1vfz7xw] {
    animation: vn-stage-portrait-fade-in-b-25j1vfz7xw var(--vn-stage-portrait-fade-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vn-stage-portrait--exiting[b-25j1vfz7xw] {
    animation: vn-stage-portrait-fade-out-b-25j1vfz7xw var(--vn-stage-portrait-fade-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vn-stage-portrait-image[b-25j1vfz7xw] {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    user-select: none;
    transform: translate3d(var(--vn-stage-portrait-shift-x), var(--vn-stage-portrait-shift-y), 0) scale(var(--vn-stage-portrait-scale));
    transform-origin: center center;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.vn-stage-cg[b-25j1vfz7xw] {
    --vn-stage-cg-fade-duration: 800ms;
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 1;
    pointer-events: none;
    overflow: hidden;
}

.vn-stage-cg--entering[b-25j1vfz7xw] {
    animation: vn-stage-cg-fade-in-b-25j1vfz7xw var(--vn-stage-cg-fade-duration) ease both;
}

.vn-stage-cg--exiting[b-25j1vfz7xw] {
    animation: vn-stage-cg-fade-out-b-25j1vfz7xw var(--vn-stage-cg-fade-duration) ease both;
}

.vn-stage-cg-image[b-25j1vfz7xw] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    user-select: none;
}

.vn-stage-portrait--focused .vn-stage-portrait-image[b-25j1vfz7xw] {
    --vn-stage-portrait-shift-y: var(--vn-stage-portrait-focused-shift-y);
    --vn-stage-portrait-scale: var(--vn-stage-portrait-focused-scale);
}

.vn-stage--tap-enabled[b-25j1vfz7xw] {
    cursor: pointer;
}

@keyframes vn-stage-portrait-fade-in-b-25j1vfz7xw {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes vn-stage-portrait-fade-out-b-25j1vfz7xw {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes vn-stage-cg-fade-in-b-25j1vfz7xw {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes vn-stage-cg-fade-out-b-25j1vfz7xw {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
/* /Components/VisualNovelSaveOverlay.razor.rz.scp.css */
.vn-save-shell[b-ne1mchhdzn] {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: auto;
}

.vn-save-panel[b-ne1mchhdzn] {
    --vn-save-slot-ink: color-mix(in srgb, var(--accent) 34%, #25132d 66%);
    --vn-save-slot-muted-ink: color-mix(in srgb, var(--accent-secondary) 24%, #4b3450 76%);
    --vn-save-slot-surface: color-mix(in srgb, rgba(255, 255, 255, 0.94) 70%, var(--accent-secondary) 30%);
    --vn-save-slot-surface-hover: color-mix(in srgb, rgba(255, 255, 255, 0.96) 62%, var(--accent-secondary) 38%);
    --vn-save-slot-border: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.74) 78%);
    position: relative;
    min-height: 100%;
    padding:
        var(--vn-stage-top-padding)
        var(--vn-stage-inline-padding)
        var(--vn-stage-bottom-padding);
    box-sizing: border-box;
    background: color-mix(in srgb, var(--bg-body) 68%, transparent);
    backdrop-filter: blur(12px);
}

.vn-save-topbar[b-ne1mchhdzn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(0.75rem, 1.9cqh, 1rem);
}

.vn-save-back[b-ne1mchhdzn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: clamp(2rem, 5.4cqh, 2.2rem);
    padding: clamp(0.38rem, 1.1cqh, 0.45rem) clamp(0.65rem, 1.5cqw, 0.75rem);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color) 82%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
    color: var(--text-primary);
    font-size: clamp(0.66rem, 1.55cqh, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vn-save-mode[b-ne1mchhdzn] {
    color: color-mix(in srgb, var(--text-primary) 76%, var(--accent-secondary) 24%);
    font-size: clamp(0.68rem, 1.6cqh, 0.74rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vn-save-status[b-ne1mchhdzn],
.vn-save-empty[b-ne1mchhdzn] {
    margin: 0 0 clamp(0.75rem, 1.9cqh, 1rem);
    color: var(--text-primary);
    font-size: clamp(0.82rem, 1.8cqh, 0.9rem);
    line-height: 1.6;
}

.vn-save-list[b-ne1mchhdzn] {
    display: grid;
    gap: clamp(0.65rem, 1.7cqh, 0.9rem);
    width: min(100%, 42rem);
    margin: 0 auto;
    padding-bottom: var(--vn-stage-overlay-bottom-reserve);
}

.vn-save-slot[b-ne1mchhdzn] {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    padding: clamp(0.85rem, 2.1cqh, 1rem) clamp(0.9rem, 1.9cqw, 1.05rem);
    border: 1px solid var(--vn-save-slot-border);
    border-radius: clamp(1rem, 3cqh, 1.25rem);
    background: var(--vn-save-slot-surface);
    color: var(--vn-save-slot-ink);
    text-align: left;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.vn-save-slot:hover:not(:disabled)[b-ne1mchhdzn],
.vn-save-slot:focus-visible:not(:disabled)[b-ne1mchhdzn] {
    transform: translateY(-1px);
    background: var(--vn-save-slot-surface-hover);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    border-color: color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, 0.66) 66%);
    outline: none;
}

.vn-save-slot:disabled[b-ne1mchhdzn] {
    cursor: default;
}

.vn-save-slot--incompatible:disabled[b-ne1mchhdzn] {
    opacity: 0.78;
}

.vn-save-slot--empty:disabled[b-ne1mchhdzn] {
    opacity: 0.58;
}

.vn-save-slot-meta[b-ne1mchhdzn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.vn-save-slot-index[b-ne1mchhdzn] {
    color: var(--vn-save-slot-ink);
    font-size: clamp(0.74rem, 1.55cqh, 0.8rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vn-save-slot-state[b-ne1mchhdzn] {
    color: var(--vn-save-slot-muted-ink);
    font-size: clamp(0.66rem, 1.45cqh, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: right;
}

.vn-save-slot-scene[b-ne1mchhdzn] {
    color: var(--vn-save-slot-ink);
    font-size: clamp(0.92rem, 1.95cqh, 1rem);
    font-weight: 700;
    line-height: 1.35;
}

.vn-save-slot-speaker[b-ne1mchhdzn] {
    color: var(--vn-save-slot-muted-ink);
    font-size: clamp(0.68rem, 1.45cqh, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.vn-save-slot-preview[b-ne1mchhdzn] {
    color: var(--vn-save-slot-ink);
    font-size: clamp(0.86rem, 1.9cqh, 0.94rem);
    line-height: 1.55;
}

@container (max-width: 760px) {
    .vn-save-topbar[b-ne1mchhdzn] {
        flex-wrap: wrap;
    }

    .vn-save-list[b-ne1mchhdzn] {
        width: 100%;
    }

    .vn-save-slot-meta[b-ne1mchhdzn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .vn-save-slot-state[b-ne1mchhdzn] {
        text-align: left;
    }
}
/* /Components/VisualNovelStudyCardOverlay.razor.rz.scp.css */
.vn-study-card-shell[b-89w1b0125w] {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    display: grid;
    gap: clamp(0.2rem, 0.8cqh, 0.35rem);
    justify-items: center;
    pointer-events: none;
}

.vn-study-card-shell--compact[b-89w1b0125w] {
    gap: clamp(0.2rem, 0.8cqh, 0.32rem);
    justify-items: stretch;
    padding:
        var(--vn-stage-top-padding)
        var(--vn-stage-inline-padding)
        0;
    box-sizing: border-box;
}

.vn-study-card-rail[b-89w1b0125w] {
    --vn-study-card-peek: 0rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - var(--vn-study-card-peek));
    gap: clamp(0.55rem, 1.2cqh, 0.72rem);
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.18rem;
    pointer-events: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.vn-study-card-rail--peek[b-89w1b0125w] {
    --vn-study-card-peek: clamp(2.15rem, 8.4cqw, 3.25rem);
}

.vn-study-card-rail[b-89w1b0125w]::-webkit-scrollbar {
    display: none;
}

.vn-study-card[b-89w1b0125w] {
    width: min(clamp(14rem, 34cqw, 32rem), 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.7rem, 1.6cqh, 1rem);
    padding: clamp(0.7rem, 1.8cqh, 0.9rem) clamp(0.8rem, 1.8cqw, 1rem) clamp(0.78rem, 2cqh, 1rem);
    border: 1px solid rgba(92, 84, 76, 0.2);
    border-top: 0;
    border-radius: 0 0 clamp(0.85rem, 2.6cqh, 1.1rem) clamp(0.85rem, 2.6cqh, 1.1rem);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 40px rgba(34, 28, 24, 0.12);
    box-sizing: border-box;
    pointer-events: auto;
}

.vn-study-card--rail[b-89w1b0125w] {
    width: 100%;
    max-width: none;
    min-height: clamp(2.9rem, 9.5cqh, 3.9rem);
    max-height: clamp(4rem, 12.8cqh, 5rem);
    gap: clamp(0.6rem, 1.25cqh, 0.85rem);
    padding: clamp(0.52rem, 1.35cqh, 0.72rem) clamp(0.72rem, 1.6cqw, 0.88rem);
    border-top-width: 1px;
    border-radius: clamp(0.8rem, 2.2cqh, 1rem);
    scroll-snap-align: center;
}

.vn-study-card-text[b-89w1b0125w] {
    color: rgba(30, 25, 20, 0.92);
    font-family: "Klee One", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
    font-size: clamp(0.98rem, 2.1cqh, 1.55rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.045em;
    text-wrap: balance;
}

.vn-study-card--rail .vn-study-card-text[b-89w1b0125w] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(0.8rem, 1.8cqh, 0.98rem);
    line-height: 1.2;
    text-wrap: pretty;
}

.vn-study-card-listen[b-89w1b0125w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(5.2rem, 10.5cqw, 6.2rem);
    min-height: clamp(2.2rem, 5.6cqh, 2.6rem);
    padding: clamp(0.45rem, 1.3cqh, 0.55rem) clamp(0.85rem, 1.9cqw, 1rem);
    border: 1px solid rgba(104, 88, 76, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: rgba(43, 35, 29, 0.9);
    font-size: clamp(0.68rem, 1.55cqh, 0.76rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        border-color 150ms ease;
}

.vn-study-card--rail .vn-study-card-listen[b-89w1b0125w] {
    min-width: clamp(4.1rem, 8.8cqw, 4.8rem);
    min-height: clamp(1.85rem, 4.4cqh, 2.1rem);
    padding: clamp(0.32rem, 0.95cqh, 0.45rem) clamp(0.68rem, 1.5cqw, 0.82rem);
    font-size: clamp(0.56rem, 1.22cqh, 0.62rem);
}

.vn-study-card-listen:hover[b-89w1b0125w] {
    transform: translateY(-1px);
    border-color: rgba(104, 88, 76, 0.36);
    box-shadow: 0 12px 24px rgba(34, 28, 24, 0.08);
}

.vn-study-card-audio-error[b-89w1b0125w] {
    max-width: min(100%, 28rem);
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(43, 35, 29, 0.7);
    font-size: clamp(0.62rem, 1.4cqh, 0.72rem);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    pointer-events: auto;
}

@container (max-height: 430px) {
    .vn-study-card[b-89w1b0125w] {
        gap: clamp(0.55rem, 1.35cqh, 0.85rem);
        padding: clamp(0.58rem, 1.55cqh, 0.8rem) clamp(0.72rem, 1.55cqw, 0.85rem) clamp(0.65rem, 1.7cqh, 0.9rem);
    }

    .vn-study-card-text[b-89w1b0125w] {
        font-size: clamp(0.9rem, 1.9cqh, 1.15rem);
    }

    .vn-study-card-listen[b-89w1b0125w] {
        min-width: clamp(4.85rem, 9.5cqw, 5.4rem);
        min-height: clamp(2rem, 5cqh, 2.35rem);
        font-size: clamp(0.62rem, 1.4cqh, 0.7rem);
    }

    .vn-study-card-shell--compact[b-89w1b0125w] {
        gap: clamp(0.12rem, 0.45cqh, 0.24rem);
    }

    .vn-study-card-rail[b-89w1b0125w] {
        gap: clamp(0.42rem, 0.95cqh, 0.58rem);
    }

    .vn-study-card-rail--peek[b-89w1b0125w] {
        --vn-study-card-peek: clamp(1.85rem, 7.4cqw, 2.75rem);
    }

    .vn-study-card--rail[b-89w1b0125w] {
        min-height: clamp(2.55rem, 8.4cqh, 3.3rem);
        max-height: clamp(3.45rem, 10.6cqh, 4rem);
        padding: clamp(0.42rem, 1.05cqh, 0.58rem) clamp(0.62rem, 1.35cqw, 0.74rem);
    }

    .vn-study-card--rail .vn-study-card-text[b-89w1b0125w] {
        font-size: clamp(0.74rem, 1.62cqh, 0.88rem);
        line-height: 1.14;
    }

    .vn-study-card--rail .vn-study-card-listen[b-89w1b0125w] {
        min-width: clamp(3.75rem, 8cqw, 4.2rem);
        min-height: clamp(1.72rem, 4.05cqh, 1.95rem);
        font-size: clamp(0.52rem, 1.1cqh, 0.58rem);
    }
}
/* /Components/VisualNovelYakopediaOverlay.razor.rz.scp.css */
.vn-yakopedia-shell[b-5pesbr43kl] {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: auto;
}

.vn-yakopedia-panel[b-5pesbr43kl] {
    position: relative;
    min-height: 100%;
    padding:
        var(--vn-stage-top-padding)
        var(--vn-stage-inline-padding)
        var(--vn-stage-bottom-padding);
    box-sizing: border-box;
    background: color-mix(in srgb, var(--bg-body) 68%, transparent);
    backdrop-filter: blur(12px);
}

.vn-yakopedia-topbar[b-5pesbr43kl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(0.75rem, 1.9cqh, 1rem);
}

.vn-yakopedia-back[b-5pesbr43kl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: clamp(2rem, 5.4cqh, 2.2rem);
    padding: clamp(0.38rem, 1.1cqh, 0.45rem) clamp(0.65rem, 1.5cqw, 0.75rem);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color) 82%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
    color: var(--text-primary);
    font-size: clamp(0.66rem, 1.55cqh, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vn-yakopedia-mode[b-5pesbr43kl] {
    color: color-mix(in srgb, var(--text-primary) 76%, var(--accent-secondary) 24%);
    font-size: clamp(0.68rem, 1.6cqh, 0.74rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vn-yakopedia-layout[b-5pesbr43kl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(0.75rem, 1.9cqh, 1rem);
    min-height: calc(100% - clamp(3.8rem, 10cqh, 5.8rem));
    padding-bottom: var(--vn-stage-overlay-bottom-reserve);
}

.vn-yakopedia-list-pane[b-5pesbr43kl],
.vn-yakopedia-detail-pane[b-5pesbr43kl] {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.82) 84%);
    border-radius: clamp(1rem, 3cqh, 1.5rem);
    background: color-mix(in srgb, rgba(255, 255, 255, 0.94) 78%, rgba(255, 240, 248, 0.8) 22%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.vn-yakopedia-list-pane[b-5pesbr43kl] {
    padding: clamp(0.9rem, 2.2cqh, 1.2rem);
}

.vn-yakopedia-detail-pane[b-5pesbr43kl] {
    padding: clamp(1rem, 2.6cqh, 1.4rem) clamp(1rem, 1.9cqw, 1.5rem);
}

.vn-yakopedia-kicker[b-5pesbr43kl] {
    margin: 0 0 clamp(0.65rem, 1.7cqh, 0.85rem);
    color: rgba(133, 104, 121, 0.72);
    font-size: clamp(0.68rem, 1.55cqh, 0.74rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vn-yakopedia-list[b-5pesbr43kl] {
    display: grid;
    gap: clamp(0.55rem, 1.4cqh, 0.7rem);
}

.vn-yakopedia-entry[b-5pesbr43kl] {
    display: block;
    width: 100%;
    padding: clamp(0.78rem, 2cqh, 0.95rem) clamp(0.82rem, 1.8cqw, 1rem);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.86) 86%);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.86);
    color: rgba(55, 42, 49, 0.92);
    text-align: left;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.vn-yakopedia-entry:hover[b-5pesbr43kl],
.vn-yakopedia-entry:focus-visible[b-5pesbr43kl] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.72) 72%);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    outline: none;
}

.vn-yakopedia-entry--selected[b-5pesbr43kl] {
    border-color: color-mix(in srgb, var(--accent) 32%, rgba(255, 255, 255, 0.7) 68%);
    background: color-mix(in srgb, rgba(255, 255, 255, 0.94) 72%, rgba(255, 234, 244, 0.92) 28%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.vn-yakopedia-entry-title[b-5pesbr43kl] {
    display: block;
    font-size: clamp(0.82rem, 1.85cqh, 0.98rem);
    font-weight: 700;
    line-height: 1.45;
}

.vn-yakopedia-empty-list[b-5pesbr43kl] {
    margin: 0;
    color: rgba(106, 87, 98, 0.78);
    font-size: clamp(0.86rem, 1.9cqh, 0.96rem);
    line-height: 1.6;
}

.vn-yakopedia-detail[b-5pesbr43kl],
.vn-yakopedia-empty-detail[b-5pesbr43kl] {
    display: grid;
    align-content: start;
    min-height: 100%;
}

.vn-yakopedia-detail-title[b-5pesbr43kl] {
    margin: 0;
    color: rgba(50, 39, 47, 0.96);
    font-size: clamp(1.2rem, 2.8cqh, 2rem);
    font-weight: 600;
    line-height: 1.15;
}

.vn-yakopedia-detail-copy[b-5pesbr43kl] {
    margin: clamp(0.7rem, 1.8cqh, 1rem) 0 0;
    color: rgba(68, 54, 62, 0.88);
    font-size: clamp(0.9rem, 1.95cqh, 1rem);
    line-height: 1.7;
    white-space: pre-wrap;
}

@container (max-width: 760px) {
    .vn-yakopedia-layout[b-5pesbr43kl] {
        gap: 0.75rem;
    }

    .vn-yakopedia-list-pane[b-5pesbr43kl] {
        padding: 0.9rem;
    }

    .vn-yakopedia-detail-pane[b-5pesbr43kl] {
        padding: 1rem;
    }
}
/* /Pages/Account.razor.rz.scp.css */
.account-page[b-4olb678yag] {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    overflow: hidden;
    isolation: isolate;
}

.account-page-glow[b-4olb678yag] {
    display: none;
}

.account-page-glow--primary[b-4olb678yag] {
    display: none;
}

.account-page-glow--secondary[b-4olb678yag] {
    display: none;
}

.account-shell[b-4olb678yag] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    min-height: clamp(32rem, 72vh, 44rem);
}

.account-cascade[b-4olb678yag] {
    opacity: 0;
    animation: account-in-b-4olb678yag 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes account-in-b-4olb678yag {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
        filter: blur(4px);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.account-highlight-label[b-4olb678yag],
.account-state-badge[b-4olb678yag],
.account-player-id-label[b-4olb678yag],
.account-field-label[b-4olb678yag] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.account-panel[b-4olb678yag] {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 1;
}

.account-panel[b-4olb678yag]::before {
    content: "";
    position: absolute;
    inset: 1.25rem calc(50% - 16rem) 1.25rem calc(50% - 16rem);
    border-radius: 1.6rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
        color-mix(in srgb, var(--bg-surface) 42%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0.55;
    pointer-events: none;
    transform: translateX(0.45rem);
}

.account-state-card[b-4olb678yag] {
    position: relative;
    width: min(100%, 32rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem;
    border-radius: 1.35rem;
    background:
        linear-gradient(180deg, rgba(20, 22, 34, 0.94), rgba(12, 14, 24, 0.88)),
        color-mix(in srgb, var(--bg-surface) 72%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 28px 52px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.account-state-card > *[b-4olb678yag] {
    position: relative;
    z-index: 1;
}

.account-state-card[b-4olb678yag]::before,
.account-state-card[b-4olb678yag]::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.account-state-card[b-4olb678yag]::before {
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 44%);
    opacity: 0.82;
}

.account-state-card[b-4olb678yag]::after {
    width: 11rem;
    height: 11rem;
    top: -3.5rem;
    right: -2.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    filter: blur(48px);
    opacity: 0.2;
    animation: account-pulse-b-4olb678yag 8s ease-in-out infinite;
}

@keyframes account-pulse-b-4olb678yag {
    0%,
    100% {
        transform: scale(0.94);
        opacity: 0.24;
    }
    50% {
        transform: scale(1.06);
        opacity: 0.36;
    }
}

.account-state-badge[b-4olb678yag] {
    width: fit-content;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: color-mix(in srgb, var(--accent) 80%, white);
}

.account-state-badge--good[b-4olb678yag] {
    background: rgba(74, 222, 128, 0.12);
    color: #86efac;
}

.account-state-badge--muted[b-4olb678yag] {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
}

.account-state-card h2[b-4olb678yag] {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.account-form-stage[b-4olb678yag] {
    display: grid;
    gap: 1rem;
    animation: account-stage-swap-b-4olb678yag 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes account-stage-swap-b-4olb678yag {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.account-copy[b-4olb678yag],
.account-footnote[b-4olb678yag],
.account-state-card p[b-4olb678yag] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.account-email[b-4olb678yag] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.account-player-id[b-4olb678yag] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.18rem;
    width: fit-content;
    padding: 0.85rem 0.95rem;
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.08));
}

.account-player-id-label[b-4olb678yag],
.account-field-label[b-4olb678yag] {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--text-muted);
}

.account-player-id strong[b-4olb678yag] {
    font-size: 1.2rem;
    color: var(--text-primary);
}

.account-confirm-shell[b-4olb678yag] {
    display: grid;
    gap: 1rem;
}

.account-confirm-mark[b-4olb678yag] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1.1rem 1.1rem 0.85rem 1.1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent-secondary) 72%, var(--accent)));
    box-shadow:
        0 18px 32px color-mix(in srgb, var(--accent) 26%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.account-confirm-mark-glyph[b-4olb678yag] {
    color: #fff;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1;
}

.account-confirm-email[b-4olb678yag] {
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.08));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, transparent), rgba(255, 255, 255, 0.03)),
        rgba(6, 8, 14, 0.44);
    color: var(--text-primary);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    word-break: break-word;
}

.account-confirm-steps[b-4olb678yag] {
    display: grid;
    gap: 0.65rem;
}

.account-confirm-step[b-4olb678yag] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    padding: 0.82rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.account-confirm-step-index[b-4olb678yag] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: color-mix(in srgb, var(--accent) 82%, white);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.account-confirm-step strong[b-4olb678yag] {
    display: block;
    font-size: 0.84rem;
    color: var(--text-primary);
}

.account-confirm-step p[b-4olb678yag] {
    margin: 0.16rem 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.account-mode-switch[b-4olb678yag] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.32rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
    isolation: isolate;
}

.account-mode-switch[b-4olb678yag]::before {
    content: "";
    position: absolute;
    top: 0.32rem;
    bottom: 0.32rem;
    left: 0.32rem;
    width: calc(50% - 0.385rem);
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent-secondary) 78%, var(--accent)));
    box-shadow: 0 14px 24px color-mix(in srgb, var(--accent) 28%, transparent);
    transform: translateX(0);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

.account-page[data-mode="signup"] .account-mode-switch[b-4olb678yag]::before {
    transform: translateX(calc(100% + 0.45rem));
}

.account-mode-btn[b-4olb678yag],
.account-btn-primary[b-4olb678yag],
.account-btn-secondary[b-4olb678yag] {
    min-height: 3rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.account-mode-btn[b-4olb678yag] {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    color: var(--text-muted);
}

.account-mode-btn.active[b-4olb678yag] {
    background: transparent;
    color: #fff;
    box-shadow: none;
}

.account-form[b-4olb678yag] {
    display: grid;
    gap: 0.8rem;
}

.account-field[b-4olb678yag] {
    display: grid;
    gap: 0.45rem;
}

.account-field-head[b-4olb678yag] {
    display: grid;
    gap: 0.2rem;
}

.account-field-note[b-4olb678yag] {
    font-size: 0.8rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--text-secondary) 92%, white);
}

.account-input[b-4olb678yag] {
    width: 100%;
    min-height: 3rem;
    padding: 0.9rem 1rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(6, 8, 14, 0.5);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.account-input[b-4olb678yag]::placeholder {
    color: var(--text-muted);
}

.account-input:focus[b-4olb678yag] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 44%, rgba(255, 255, 255, 0.14));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.account-actions[b-4olb678yag] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.account-btn-primary[b-4olb678yag],
.account-btn-secondary[b-4olb678yag] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.84rem 1.15rem;
    text-decoration: none;
    cursor: pointer;
}

.account-btn-primary[b-4olb678yag] {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent-secondary) 72%, var(--accent)));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 24%, transparent);
}

.account-btn-secondary[b-4olb678yag] {
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.account-mode-btn:hover[b-4olb678yag],
.account-btn-primary:hover[b-4olb678yag],
.account-btn-secondary:hover[b-4olb678yag] {
    transform: translateY(-1px);
    text-decoration: none;
}

.account-btn-primary:disabled[b-4olb678yag],
.account-btn-secondary:disabled[b-4olb678yag] {
    opacity: 0.6;
    cursor: wait;
}

.account-message[b-4olb678yag] {
    padding: 0.85rem 0.95rem;
    border-radius: 0.95rem;
    font-size: 0.84rem;
    line-height: 1.55;
}

.account-message--good[b-4olb678yag] {
    background: rgba(74, 222, 128, 0.11);
    border: 1px solid rgba(74, 222, 128, 0.22);
    color: #bbf7d0;
}

.account-message--error[b-4olb678yag] {
    background: rgba(251, 113, 133, 0.1);
    border: 1px solid rgba(251, 113, 133, 0.22);
    color: #fecdd3;
}

.account-legal[b-4olb678yag] {
    margin: -0.1rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.6;
}

.account-legal-link[b-4olb678yag] {
    color: color-mix(in srgb, var(--accent) 88%, white);
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 36%, transparent);
    padding-bottom: 0.04rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.account-legal-link:hover[b-4olb678yag],
.account-legal-link:focus-visible[b-4olb678yag] {
    color: #fff;
    border-color: color-mix(in srgb, var(--accent) 78%, white);
}

.account-code[b-4olb678yag] {
    display: inline-flex;
    width: fit-content;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

@media (max-width: 900px) {
    .account-page[b-4olb678yag] {
        padding-inline: 1rem;
    }

    .account-shell[b-4olb678yag] {
        min-height: 0;
    }

    .account-panel[b-4olb678yag] {
        justify-content: stretch;
    }

    .account-panel[b-4olb678yag]::before {
        inset: 0.75rem 0 0 0;
        transform: none;
    }

    .account-state-card[b-4olb678yag] {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .account-page[b-4olb678yag] {
        padding-inline: 0.9rem;
        padding-bottom: 2.5rem;
    }

    .account-panel[b-4olb678yag]::before {
        display: none;
    }

    .account-state-card[b-4olb678yag] {
        padding: 1.05rem;
    }

    .account-title[b-4olb678yag] {
        font-size: clamp(2.2rem, 13vw, 3.5rem);
    }

    .account-mode-switch[b-4olb678yag] {
        gap: 0.3rem;
        padding: 0.28rem;
    }

    .account-mode-switch[b-4olb678yag]::before {
        top: 0.28rem;
        bottom: 0.28rem;
        left: 0.28rem;
        width: calc(50% - 0.29rem);
    }

    .account-page[data-mode="signup"] .account-mode-switch[b-4olb678yag]::before {
        transform: translateX(calc(100% + 0.3rem));
    }

    .account-actions[b-4olb678yag] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .account-confirm-step[b-4olb678yag] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-cascade[b-4olb678yag],
    .account-page-glow[b-4olb678yag],
    .account-state-card[b-4olb678yag]::after,
    .account-form-stage[b-4olb678yag],
    .account-mode-btn[b-4olb678yag],
    .account-mode-switch[b-4olb678yag]::before,
    .account-input[b-4olb678yag],
    .account-btn-primary[b-4olb678yag],
    .account-btn-secondary[b-4olb678yag] {
        animation: none;
        transition: none;
    }
}

@keyframes account-glow-drift-b-4olb678yag {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(1rem, -1rem, 0) scale(1.08);
    }
}
/* /Pages/Battle.razor.rz.scp.css */
/* ?? Battle page ???????????????????????????????????????? */

.bt[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 80svh;
    padding: 1rem 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* ?? Intro / Game-over screens ?????????????????????? */

.bt-intro[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
}

.bt-intro-inner[b-wxmcl1qgqz] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 440px;
}

.bt-intro-title[b-wxmcl1qgqz] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.bt-intro-desc[b-wxmcl1qgqz] {
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 400px;
    margin: 0;
    line-height: 1.5;
}

/* How-it-works detail cards */
.bt-intro-details[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin: 0.25rem 0;
}

.bt-intro-detail[b-wxmcl1qgqz] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
}

.bt-intro-detail-icon[b-wxmcl1qgqz] {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-intro-detail-text[b-wxmcl1qgqz] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.bt-intro-detail-text strong[b-wxmcl1qgqz] {
    color: var(--text-primary);
    font-weight: 600;
}

/* Locked state */
.bt-intro-locked[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 1rem;
    border-radius: 0.6rem;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.bt-intro-locked-icon[b-wxmcl1qgqz] {
    font-size: 1.6rem;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-intro-locked-text[b-wxmcl1qgqz] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    text-align: center;
}

.bt-intro-locked-reqs[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
}

.bt-intro-req[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.03);
}

.bt-intro-req--done[b-wxmcl1qgqz] {
    opacity: 0.55;
}

.bt-intro-req-check[b-wxmcl1qgqz] {
    font-size: 0.85rem;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-intro-req-name[b-wxmcl1qgqz] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.bt-intro-req--done .bt-intro-req-name[b-wxmcl1qgqz] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.bt-play--locked[b-wxmcl1qgqz] {
    background: var(--accent);
    text-decoration: none;
}

/* ?? Run results screen ????????????????????????????? */

.bt-results[b-wxmcl1qgqz] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    width: 100%;
    overflow-y: auto;
    padding: 1rem 0;
}

.bt-results-inner[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    max-width: 440px;
    animation: results-in-b-wxmcl1qgqz 0.5s ease both;
}

.bt-results-header[b-wxmcl1qgqz] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.bt-results-title[b-wxmcl1qgqz] {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.02em;
}

.bt-results-title--defeat[b-wxmcl1qgqz] {
    color: #ef4444;
}

.bt-results-title--victory[b-wxmcl1qgqz] {
    color: #fbbf24;
    text-shadow: 0 0 16px rgba(251, 191, 36, 0.3);
}

.bt-results-sub[b-wxmcl1qgqz] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    font-style: italic;
    max-width: 320px;
}

.bt-results-score[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    animation: results-score-in-b-wxmcl1qgqz 0.5s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-results-score-v[b-wxmcl1qgqz] {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.bt-results-score-l[b-wxmcl1qgqz] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Stats grid */
.bt-results-stats[b-wxmcl1qgqz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    width: 100%;
    animation: results-stats-in-b-wxmcl1qgqz 0.4s 0.25s ease both;
}

.bt-results-stat[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 0.2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.bt-results-stat-v[b-wxmcl1qgqz] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.bt-results-stat-l[b-wxmcl1qgqz] {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Build recap */
.bt-results-build[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    animation: results-stats-in-b-wxmcl1qgqz 0.4s 0.35s ease both;
}

.bt-results-build-title[b-wxmcl1qgqz] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.bt-results-build-list[b-wxmcl1qgqz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    max-width: 100%;
}

.bt-results-build-item[b-wxmcl1qgqz] {
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.bt-results-build-item--boss[b-wxmcl1qgqz] {
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

@keyframes results-in-b-wxmcl1qgqz {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes results-score-in-b-wxmcl1qgqz {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes results-stats-in-b-wxmcl1qgqz {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bt-play[b-wxmcl1qgqz] {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--accent);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.bt-play:hover[b-wxmcl1qgqz] {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-2px);
}

/* ?? Level-up overlay ???????????????????????????????? */

.bt-levelup-overlay[b-wxmcl1qgqz] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    animation: levelup-overlay-in-b-wxmcl1qgqz 0.35s ease both;
}

.bt-levelup-header[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    animation: levelup-card-in-b-wxmcl1qgqz 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-levelup-icon[b-wxmcl1qgqz] {
    font-size: 2.2rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-levelup-title[b-wxmcl1qgqz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.bt-levelup-level[b-wxmcl1qgqz] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.04em;
}

.bt-levelup-desc[b-wxmcl1qgqz] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* ?? Perk card grid ????????????????????????????????? */

.bt-perk-choices[b-wxmcl1qgqz] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 640px;
    width: 100%;
}

.bt-perk-card[b-wxmcl1qgqz] {
    flex: 1 1 0;
    min-width: 150px;
    max-width: 195px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.2rem 0.8rem;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 0.85rem;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    animation: perk-card-in-b-wxmcl1qgqz 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-perk--synergy[b-wxmcl1qgqz] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 16px rgba(251, 191, 36, 0.12);
}

.bt-perk-card:nth-child(1)[b-wxmcl1qgqz] { animation-delay: 0.15s; }
.bt-perk-card:nth-child(2)[b-wxmcl1qgqz] { animation-delay: 0.25s; }
.bt-perk-card:nth-child(3)[b-wxmcl1qgqz] { animation-delay: 0.35s; }
.bt-perk-card:nth-child(4)[b-wxmcl1qgqz] { animation-delay: 0.45s; }

.bt-perk-card:hover[b-wxmcl1qgqz] {
    transform: translateY(-4px) scale(1.03);
    border-color: var(--accent);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px var(--accent-subtle);
}

.bt-perk-card:active[b-wxmcl1qgqz] {
    transform: translateY(-1px) scale(0.98);
}

.bt-perk-icon[b-wxmcl1qgqz] {
    font-size: 1.8rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-perk-title[b-wxmcl1qgqz] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.bt-perk-synergy[b-wxmcl1qgqz] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

.bt-perk-cat[b-wxmcl1qgqz] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--bg-body);
    color: var(--text-muted);
}

.bt-perk-desc[b-wxmcl1qgqz] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Category accent tints on the top border */
.bt-perk--offense[b-wxmcl1qgqz] { border-top: 3px solid #ef4444; }
.bt-perk--defense[b-wxmcl1qgqz] { border-top: 3px solid #3b82f6; }
.bt-perk--utility[b-wxmcl1qgqz] { border-top: 3px solid #f59e0b; }
.bt-perk--learning[b-wxmcl1qgqz] { border-top: 3px solid #22c55e; }

.bt-perk--offense .bt-perk-cat[b-wxmcl1qgqz] { color: #ef4444; }
.bt-perk--defense .bt-perk-cat[b-wxmcl1qgqz] { color: #3b82f6; }
.bt-perk--utility .bt-perk-cat[b-wxmcl1qgqz] { color: #f59e0b; }
.bt-perk--learning .bt-perk-cat[b-wxmcl1qgqz] { color: #22c55e; }

/* New / Upgrade badges */

.bt-perk-badge[b-wxmcl1qgqz] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    line-height: 1;
}

.bt-perk-badge--new[b-wxmcl1qgqz] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.bt-perk-badge--upgrade[b-wxmcl1qgqz] {
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
}

.bt-perk--upgrade[b-wxmcl1qgqz] {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 12px rgba(99, 102, 241, 0.08);
}

/* Evolution badge + card */

.bt-perk-badge--evolution[b-wxmcl1qgqz] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.bt-perk--evolution[b-wxmcl1qgqz] {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 16px rgba(245, 158, 11, 0.12);
}

.bt-perk-evo-from[b-wxmcl1qgqz] {
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* ?? Perk card tag badges ??????????????????????????? */

.bt-perk-tags[b-wxmcl1qgqz] {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.15rem;
}

.bt-perk-tag[b-wxmcl1qgqz] {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    line-height: 1;
}

.bt-perk-tag.bt-synergy--crit[b-wxmcl1qgqz]     { background: rgba(239, 68, 68, 0.10); color: #f87171; }
.bt-perk-tag.bt-synergy--vitality[b-wxmcl1qgqz] { background: rgba(34, 197, 94, 0.10); color: #4ade80; }
.bt-perk-tag.bt-synergy--speed[b-wxmcl1qgqz]    { background: rgba(250, 204, 21, 0.10); color: #fbbf24; }

/* ?? Synergy-aware perk badge ?????????????????????? */

.bt-perk-synergy-req[b-wxmcl1qgqz] {
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    line-height: 1;
    margin-top: 0.1rem;
    transition: background 0.25s ease, color 0.25s ease;
}

.bt-perk-synergy-req.bt-synergy--crit[b-wxmcl1qgqz]     { color: rgba(248, 113, 113, 0.5); }
.bt-perk-synergy-req.bt-synergy--vitality[b-wxmcl1qgqz] { color: rgba(74, 222, 128, 0.5); }
.bt-perk-synergy-req.bt-synergy--speed[b-wxmcl1qgqz]    { color: rgba(251, 191, 36, 0.5); }

.bt-perk-synergy-req--active[b-wxmcl1qgqz] {
    font-weight: 700;
}

.bt-perk-synergy-req--active.bt-synergy--crit[b-wxmcl1qgqz] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.bt-perk-synergy-req--active.bt-synergy--vitality[b-wxmcl1qgqz] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.bt-perk-synergy-req--active.bt-synergy--speed[b-wxmcl1qgqz] {
    background: rgba(250, 204, 21, 0.12);
    color: #fbbf24;
}

/* ?? Synergy progress panel (level-up overlay) ??????? */

.bt-synergy-panel[b-wxmcl1qgqz] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 520px;
    width: 100%;
    animation: levelup-card-in-b-wxmcl1qgqz 0.4s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-synergy-row[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    font-size: 0.7rem;
    font-weight: 600;
}

.bt-synergy-icon[b-wxmcl1qgqz] {
    font-size: 0.85rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-synergy-label[b-wxmcl1qgqz] {
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.6rem;
}

.bt-synergy-dots[b-wxmcl1qgqz] {
    display: flex;
    gap: 0.12rem;
}

.bt-synergy-dot[b-wxmcl1qgqz] {
    font-size: 0.7rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.15);
    transition: color 0.3s ease;
}

.bt-synergy-dot--filled[b-wxmcl1qgqz] { color: currentColor; }

.bt-synergy--crit[b-wxmcl1qgqz]     { color: #f87171; }
.bt-synergy--vitality[b-wxmcl1qgqz] { color: #4ade80; }
.bt-synergy--speed[b-wxmcl1qgqz]    { color: #fbbf24; }

.bt-synergy--crit .bt-synergy-dot--filled[b-wxmcl1qgqz]     { color: #f87171; }
.bt-synergy--vitality .bt-synergy-dot--filled[b-wxmcl1qgqz] { color: #4ade80; }
.bt-synergy--speed .bt-synergy-dot--filled[b-wxmcl1qgqz]    { color: #fbbf24; }

.bt-synergy-value[b-wxmcl1qgqz] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 1ch;
    text-align: center;
}

/* ?? Synergy HUD (compact, in-game) ?????????????????? */

.bt-synergy-hud[b-wxmcl1qgqz] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
}

.bt-synergy-chip[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
}

.bt-synergy-chip-icon[b-wxmcl1qgqz] {
    font-size: 0.7rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-synergy-chip-dots[b-wxmcl1qgqz] {
    display: flex;
    gap: 2px;
}

.bt-synergy-chip-dot[b-wxmcl1qgqz] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}

.bt-synergy-chip-dot--on[b-wxmcl1qgqz] { background: currentColor; }

.bt-synergy-chip.bt-synergy--crit[b-wxmcl1qgqz]     { color: #f87171; }
.bt-synergy-chip.bt-synergy--vitality[b-wxmcl1qgqz] { color: #4ade80; }
.bt-synergy-chip.bt-synergy--speed[b-wxmcl1qgqz]    { color: #fbbf24; }

@keyframes levelup-overlay-in-b-wxmcl1qgqz {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes levelup-card-in-b-wxmcl1qgqz {
    from { opacity: 0; transform: scale(0.7) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes perk-card-in-b-wxmcl1qgqz {
    from { opacity: 0; transform: translateY(30px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ?? Boss reward overlay ????????????????????????????? */

.bt-boss-reward-overlay[b-wxmcl1qgqz] {
    position: fixed;
    inset: 0;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    animation: boss-reward-overlay-in-b-wxmcl1qgqz 0.5s ease both;
}

.bt-boss-reward-header[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    animation: boss-reward-header-in-b-wxmcl1qgqz 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-boss-reward-icon[b-wxmcl1qgqz] {
    font-size: 2.8rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.5));
}

.bt-boss-reward-title[b-wxmcl1qgqz] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fbbf24;
    margin: 0;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.35);
    letter-spacing: 0.04em;
}

.bt-boss-reward-desc[b-wxmcl1qgqz] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* ?? Boss reward card grid ??????????????????????????? */

.bt-boss-reward-choices[b-wxmcl1qgqz] {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 680px;
    width: 100%;
}

.bt-boss-reward-card[b-wxmcl1qgqz] {
    flex: 1 1 0;
    min-width: 160px;
    max-width: 205px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.4rem 0.9rem;
    background: linear-gradient(170deg,
        var(--bg-surface) 0%,
        color-mix(in srgb, var(--bg-surface) 92%, rgba(251, 191, 36, 0.15)) 100%);
    border: 1.5px solid rgba(251, 191, 36, 0.3);
    border-radius: 0.9rem;
    cursor: pointer;
    text-align: center;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(251, 191, 36, 0.06),
        inset 0 1px 0 rgba(251, 191, 36, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    animation: boss-reward-card-in-b-wxmcl1qgqz 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-boss-reward-card:nth-child(1)[b-wxmcl1qgqz] { animation-delay: 0.2s; }
.bt-boss-reward-card:nth-child(2)[b-wxmcl1qgqz] { animation-delay: 0.32s; }
.bt-boss-reward-card:nth-child(3)[b-wxmcl1qgqz] { animation-delay: 0.44s; }

.bt-boss-reward-card:hover[b-wxmcl1qgqz] {
    transform: translateY(-5px) scale(1.04);
    border-color: rgba(251, 191, 36, 0.7);
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(251, 191, 36, 0.15),
        0 0 60px rgba(251, 191, 36, 0.06);
}

.bt-boss-reward-card:active[b-wxmcl1qgqz] {
    transform: translateY(-1px) scale(0.98);
}

.bt-boss-reward-card-icon[b-wxmcl1qgqz] {
    font-size: 2rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.3));
}

.bt-boss-reward-card-title[b-wxmcl1qgqz] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.bt-boss-reward-card-cat[b-wxmcl1qgqz] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.bt-boss-reward-card-desc[b-wxmcl1qgqz] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Category accents on boss reward cards */
.bt-boss-reward--offense[b-wxmcl1qgqz] { border-top: 3px solid #fbbf24; }
.bt-boss-reward--defense[b-wxmcl1qgqz] { border-top: 3px solid #60a5fa; }
.bt-boss-reward--utility[b-wxmcl1qgqz] { border-top: 3px solid #fbbf24; }
.bt-boss-reward--learning[b-wxmcl1qgqz] { border-top: 3px solid #34d399; }

@keyframes boss-reward-overlay-in-b-wxmcl1qgqz {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes boss-reward-header-in-b-wxmcl1qgqz {
    from { opacity: 0; transform: scale(0.6) translateY(25px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes boss-reward-card-in-b-wxmcl1qgqz {
    from { opacity: 0; transform: translateY(40px) scale(0.8); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ?? Node / path choice overlay ???????????????????? */

.bt-node-overlay[b-wxmcl1qgqz] {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    animation: node-overlay-in-b-wxmcl1qgqz 0.4s ease both;
}

.bt-node-header[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    animation: node-header-in-b-wxmcl1qgqz 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-node-header-icon[b-wxmcl1qgqz] {
    font-size: 2.4rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-node-title[b-wxmcl1qgqz] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.03em;
}

.bt-node-desc[b-wxmcl1qgqz] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.bt-node-choices[b-wxmcl1qgqz] {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 600px;
    width: 100%;
}

.bt-node-card[b-wxmcl1qgqz] {
    flex: 1 1 0;
    min-width: 140px;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.2rem 0.8rem;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 0.9rem;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    animation: node-card-in-b-wxmcl1qgqz 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-node-card:nth-child(1)[b-wxmcl1qgqz] { animation-delay: 0.15s; }
.bt-node-card:nth-child(2)[b-wxmcl1qgqz] { animation-delay: 0.25s; }
.bt-node-card:nth-child(3)[b-wxmcl1qgqz] { animation-delay: 0.35s; }

.bt-node-card:hover[b-wxmcl1qgqz] {
    transform: translateY(-5px) scale(1.04);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.bt-node-card:active[b-wxmcl1qgqz] {
    transform: translateY(-1px) scale(0.98);
}

.bt-node-icon[b-wxmcl1qgqz] {
    font-size: 1.8rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-node-card-title[b-wxmcl1qgqz] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.bt-node-card-desc[b-wxmcl1qgqz] {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Node type accent colors */
.bt-node--normalfight[b-wxmcl1qgqz]  { border-top: 3px solid var(--accent); }
.bt-node--elitefight[b-wxmcl1qgqz]   { border-top: 3px solid #a855f7; }
.bt-node--boss[b-wxmcl1qgqz]         { border-top: 3px solid #ef4444; }
.bt-node--heal[b-wxmcl1qgqz]         { border-top: 3px solid #22c55e; }
.bt-node--treasure[b-wxmcl1qgqz]     { border-top: 3px solid #fbbf24; }
.bt-node--store[b-wxmcl1qgqz]        { border-top: 3px solid #06b6d4; }

.bt-node--normalfight:hover[b-wxmcl1qgqz]  { border-color: var(--accent); box-shadow: 0 0 24px rgba(99, 102, 241, 0.15); }
.bt-node--elitefight:hover[b-wxmcl1qgqz]   { border-color: #a855f7; box-shadow: 0 0 24px rgba(168, 85, 247, 0.15); }
.bt-node--boss:hover[b-wxmcl1qgqz]         { border-color: #ef4444; box-shadow: 0 0 24px rgba(239, 68, 68, 0.15); }
.bt-node--heal:hover[b-wxmcl1qgqz]         { border-color: #22c55e; box-shadow: 0 0 24px rgba(34, 197, 94, 0.15); }
.bt-node--treasure:hover[b-wxmcl1qgqz]     { border-color: #fbbf24; box-shadow: 0 0 24px rgba(251, 191, 36, 0.15); }
.bt-node--store:hover[b-wxmcl1qgqz]        { border-color: #06b6d4; box-shadow: 0 0 24px rgba(6, 182, 212, 0.15); }

@keyframes node-overlay-in-b-wxmcl1qgqz {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes node-header-in-b-wxmcl1qgqz {
    from { opacity: 0; transform: scale(0.6) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes node-card-in-b-wxmcl1qgqz {
    from { opacity: 0; transform: translateY(35px) scale(0.8); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ?? Score bar ??????????????????????????????????????? */

.bt-score-bar[b-wxmcl1qgqz] {
    width: 100%;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bt-score-label[b-wxmcl1qgqz] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.bt-score[b-wxmcl1qgqz] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.bt-wave-label[b-wxmcl1qgqz] {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* ?? Volume control (fixed top-right) ??????????????? */

.bt-volume[b-wxmcl1qgqz] {
    position: fixed;
    top: calc(var(--topbar-height, 3.5rem) + 0.75rem);
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    z-index: 20;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.3rem 0.6rem 0.3rem 0.35rem;
}

.bt-volume-btn[b-wxmcl1qgqz] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem;
    border-radius: 0.3rem;
    transition: background 0.15s ease;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bt-volume-btn:hover[b-wxmcl1qgqz] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.bt-vol-icon[b-wxmcl1qgqz] {
    width: 16px;
    height: 16px;
}

.bt-volume-slider[b-wxmcl1qgqz] {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.bt-volume-slider[b-wxmcl1qgqz]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-surface);
    box-shadow: 0 0 6px var(--accent-glow);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.bt-volume-slider[b-wxmcl1qgqz]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.bt-volume-slider[b-wxmcl1qgqz]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-surface);
    box-shadow: 0 0 6px var(--accent-glow);
    cursor: pointer;
}

/* ?? Battlefield ???????????????????????????????????????? */

.bt-battlefield[b-wxmcl1qgqz] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    width: 100%;
}

/* ?? Centered prompt � physically thrown from enemy */

.bt-prompt[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    margin-bottom: 0.75rem;
    animation: prompt-fly-b-wxmcl1qgqz 0.4s cubic-bezier(0.1, 0, 0.2, 1) both;
}

.bt-prompt-kana[b-wxmcl1qgqz] {
/* --chars is set inline from the character count.
   90vw / chars = each char gets an equal share of 90% viewport width.
   clamp ensures short text caps at 5rem and long text never drops below 1.1rem. */
font-size: clamp(1.1rem, calc(90vw / var(--chars, 1)), 5rem);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.1;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    animation: prompt-tumble-b-wxmcl1qgqz 0.4s linear both,
               prompt-land-b-wxmcl1qgqz 0.35s 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    filter: brightness(calc(1 + var(--b, 0) * 0.2));
    transition: filter 0.15s ease-out;
}

/* Reversal mode: romaji prompt uses Latin styling */
.bt-prompt--reversal .bt-prompt-kana[b-wxmcl1qgqz] {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a5b4fc;
    text-shadow: 0 0 16px rgba(129, 140, 248, 0.20);
}

/* Container: fast launch from enemy, decelerates hard into center */
@keyframes prompt-fly-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: translate(min(240px, 35vw), 100px) scale(0.3); }
    8%   { opacity: 1; transform: translate(min(190px, 28vw), 60px) scale(0.55); }
    25%  { transform: translate(min(110px, 16vw), 10px) scale(0.8); }
    50%  { transform: translate(min(35px, 5vw), -15px) scale(0.95); }
    75%  { transform: translate(5px, -5px) scale(1.0); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* Kana tumbles while airborne � spinning in the direction of travel */
@keyframes prompt-tumble-b-wxmcl1qgqz {
    0%   { transform: rotate(40deg) scaleX(0.75) scaleY(1.25); }
    25%  { transform: rotate(18deg) scaleX(0.85) scaleY(1.1); }
    50%  { transform: rotate(5deg) scaleX(0.95) scaleY(1.0); }
    75%  { transform: rotate(-2deg) scaleX(1.0) scaleY(1.0); }
    100% { transform: rotate(0deg) scaleX(1) scaleY(1); }
}

/* Impact squish � fires right as the throw lands */
@keyframes prompt-land-b-wxmcl1qgqz {
    0%   { transform: scaleX(1) scaleY(1); }
    30%  { transform: scaleX(1.25) scaleY(0.75); }
    55%  { transform: scaleX(0.9) scaleY(1.1); }
    75%  { transform: scaleX(1.06) scaleY(0.94); }
    100% { transform: scaleX(1) scaleY(1); }
}

.bt-battlefield-inner[b-wxmcl1qgqz] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: min(720px, 92%);
    position: relative;
    overflow: visible;
}

/* ?? Fighters ??????????????????????????????????????????? */

.bt-fighter[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.bt-fighter-sprite[b-wxmcl1qgqz] {
    font-size: clamp(3rem, 10vw, 5rem);
    line-height: 1;
    transform-origin: bottom center;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ?? Player avatar ring ??????????????????????????????? */

.bt-avatar-ring[b-wxmcl1qgqz] {
    --xp: 0;
    position: relative;
    width: clamp(3.2rem, 10vw, 5rem);
    height: clamp(3.2rem, 10vw, 5rem);
    border-radius: 50%;
    background: conic-gradient(
        from 220deg,
        var(--accent) 0%,
        var(--accent) calc(var(--xp) * 1%),
        rgba(255, 255, 255, 0.1) calc(var(--xp) * 1%),
        rgba(255, 255, 255, 0.1) 100%
    );
    padding: 2.5px;
    box-shadow:
        0 0 calc(16px + var(--b, 0) * 12px) var(--accent-glow),
        0 0 calc(32px + var(--b, 0) * 24px) var(--accent-subtle);
    transform-origin: bottom center;
    flex-shrink: 0;
    transition: box-shadow 0.15s ease-out;
}

.bt-avatar-placeholder[b-wxmcl1qgqz],
.bt-avatar-img[b-wxmcl1qgqz] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.bt-avatar-placeholder[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--accent);
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-weight: 700;
}

.bt-avatar-lv[b-wxmcl1qgqz] {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    border: 2px solid var(--bg-surface);
    white-space: nowrap;
}

/* ?? Boss sprite � larger ??????????????????????????????? */

.bt-fighter--boss .bt-fighter-sprite[b-wxmcl1qgqz] {
    font-size: clamp(4.5rem, 16vw, 8rem);
}

/* ?? Elite sprite � slightly larger ??????????????????????? */

.bt-fighter--elite .bt-fighter-sprite[b-wxmcl1qgqz] {
    font-size: clamp(3.5rem, 13vw, 6rem);
}

/* ?? Shrine sprite � serene glow ?????????????????????? */

.bt-fighter--shrine .bt-fighter-sprite[b-wxmcl1qgqz] {
    font-size: clamp(4rem, 14vw, 7rem);
    filter: drop-shadow(0 0 18px rgba(34, 197, 94, 0.5));
}

/* ================================================================
   ?? ENEMY BOSS BAR � Dark Souls style
   ================================================================ */

.bt-boss-bar[b-wxmcl1qgqz] {
    width: min(520px, 88%);
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.bt-boss-name[b-wxmcl1qgqz] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.bt-boss-bar--boss .bt-boss-name[b-wxmcl1qgqz] {
    font-size: 0.9rem;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
    letter-spacing: 0.2em;
}

.bt-boss-bar--elite .bt-boss-name[b-wxmcl1qgqz] {
    font-size: 0.85rem;
    color: #a78bfa;
    text-shadow: 0 0 8px rgba(167, 139, 250, 0.25);
    letter-spacing: 0.15em;
}

.bt-boss-hp[b-wxmcl1qgqz] {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.bt-boss-bar--boss .bt-boss-hp[b-wxmcl1qgqz] {
    height: 14px;
    border-color: rgba(251, 191, 36, 0.25);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.08);
}

.bt-boss-bar--elite .bt-boss-hp[b-wxmcl1qgqz] {
    height: 12px;
    border-color: rgba(167, 139, 250, 0.2);
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.06);
}

.bt-boss-hp-fill[b-wxmcl1qgqz] {
    position: absolute;
    inset: 0;
    right: auto;
    background: linear-gradient(180deg,
        rgba(239, 68, 68, 0.9) 0%,
        rgba(185, 28, 28, 0.95) 50%,
        rgba(153, 27, 27, 1) 100%);
    filter: brightness(calc(1 + var(--b, 0) * 0.3));
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.15s ease-out;
    z-index: 2;
}

.bt-boss-bar--boss .bt-boss-hp-fill[b-wxmcl1qgqz] {
    background: linear-gradient(180deg,
        rgba(251, 191, 36, 0.9) 0%,
        rgba(217, 119, 6, 0.95) 50%,
        rgba(180, 83, 9, 1) 100%);
}

.bt-boss-bar--elite .bt-boss-hp-fill[b-wxmcl1qgqz] {
    background: linear-gradient(180deg,
        rgba(167, 139, 250, 0.9) 0%,
        rgba(124, 58, 237, 0.95) 50%,
        rgba(91, 33, 182, 1) 100%);
}

.bt-boss-hp-damage[b-wxmcl1qgqz] {
    position: absolute;
    inset: 0;
    right: auto;
    background: rgba(255, 255, 255, 0.35);
    transition: width 0.9s 0.3s ease-out;
    z-index: 1;
}

.bt-enemy-ability[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    max-width: min(620px, 96%);
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    text-align: center;
}

.bt-enemy-ability-icon[b-wxmcl1qgqz] {
    font-size: 0.85rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-enemy-ability-title[b-wxmcl1qgqz] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.bt-enemy-ability-desc[b-wxmcl1qgqz] {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.2;
}

/* ?? Boss enrage surges ??????????????????????????????? */

.bt-enemy-ability--enraged[b-wxmcl1qgqz] {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    animation: enrage-pulse-b-wxmcl1qgqz 1.8s ease-in-out infinite;
}

@keyframes enrage-pulse-b-wxmcl1qgqz {
    0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    50%      { box-shadow: 0 0 12px rgba(239, 68, 68, 0.2); }
}

.bt-enemy-ability-surges[b-wxmcl1qgqz] {
    display: flex;
    gap: 3px;
    margin-left: 0.15rem;
    flex-shrink: 0;
}

.bt-surge-pip[b-wxmcl1qgqz] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.bt-surge-pip--on[b-wxmcl1qgqz] {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

/* ================================================================
   ?? SCREEN SHAKE � variant intensity
   ================================================================ */

.bt-screen-shake[b-wxmcl1qgqz] {
    animation: screen-shake-b-wxmcl1qgqz 0.5s 0.1s ease both;
}

@keyframes screen-shake-b-wxmcl1qgqz {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    8%   { transform: translate(-6px, 3px) rotate(-0.7deg); }
    16%  { transform: translate(7px, -4px) rotate(0.8deg); }
    24%  { transform: translate(-5px, 2px) rotate(-0.5deg); }
    32%  { transform: translate(6px, -2px) rotate(0.6deg); }
    42%  { transform: translate(-3px, 3px) rotate(-0.3deg); }
    54%  { transform: translate(3px, -2px) rotate(0.2deg); }
    68%  { transform: translate(-2px, 1px) rotate(-0.1deg); }
    82%  { transform: translate(1px, 0); }
}

/* ================================================================
   ?? PLAYER ATTACKS � 3 VARIANTS
   ================================================================ */

.bt-atk-player .bt-player-group[b-wxmcl1qgqz] { z-index: 3; }

/* ?? V1 � Straight dash-through slash */

.bt-atk-v1.bt-atk-player .bt-player-group[b-wxmcl1qgqz] {
    animation: p-dash-v1-b-wxmcl1qgqz 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes p-dash-v1-b-wxmcl1qgqz {
    0%   { transform: translateX(0) scale(1) rotate(0); }
    10%  { transform: translateX(-18px) scale(1.2) rotate(8deg); }
    18%  { transform: translateX(-12px) scale(1.25) rotate(5deg); }
    40%  { transform: translateX(min(540px, 78vw)) scale(1.15) rotate(-15deg); filter: brightness(2); }
    52%  { transform: translateX(min(520px, 76vw)) scale(0.95) rotate(3deg); filter: brightness(1.3); }
    72%  { transform: translateX(min(120px, 18vw)) scale(1); filter: brightness(1); }
    100% { transform: translateX(0) scale(1); }
}

/* ?? V2 � Jump slam (vertical arc) */

.bt-atk-v2.bt-atk-player .bt-player-group[b-wxmcl1qgqz] {
    animation: p-dash-v2-b-wxmcl1qgqz 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes p-dash-v2-b-wxmcl1qgqz {
    0%   { transform: translateX(0) translateY(0) scale(1) rotate(0); }
    12%  { transform: translateX(-10px) translateY(10px) scale(1.15) rotate(5deg); }
    30%  { transform: translateX(min(270px, 39vw)) translateY(-60px) scale(1.2) rotate(-10deg); }
    48%  { transform: translateX(min(530px, 77vw)) translateY(5px) scale(1.3) rotate(-20deg); filter: brightness(2.2); }
    55%  { transform: translateX(min(520px, 76vw)) translateY(0) scale(0.9) rotate(5deg); filter: brightness(1.5); }
    75%  { transform: translateX(min(120px, 18vw)) translateY(0) scale(1); filter: brightness(1); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}

/* ?? V3 � Multi-hit flicker (teleport strikes) */

.bt-atk-v3.bt-atk-player .bt-player-group[b-wxmcl1qgqz] {
    animation: p-dash-v3-b-wxmcl1qgqz 0.7s steps(1, end) both;
}

@keyframes p-dash-v3-b-wxmcl1qgqz {
    0%        { transform: translateX(0) scale(1); opacity: 1; filter: brightness(1); }
    8%        { transform: translateX(min(520px, 76vw)) scale(1.1) rotate(-8deg); opacity: 0.6; filter: brightness(2); }
    16%       { transform: translateX(min(160px, 23vw)) scale(0.95); opacity: 0.3; filter: brightness(1); }
    24%       { transform: translateX(min(530px, 77vw)) scale(1.15) rotate(5deg); opacity: 0.7; filter: brightness(2.5); }
    32%       { transform: translateX(min(300px, 44vw)) scale(0.9); opacity: 0.2; filter: brightness(1); }
    42%       { transform: translateX(min(525px, 76vw)) scale(1.25) rotate(-12deg); opacity: 1; filter: brightness(3); }
    55%       { transform: translateX(min(515px, 75vw)) scale(0.95) rotate(0); opacity: 1; filter: brightness(1.4); }
    75%       { transform: translateX(min(120px, 18vw)) scale(1); opacity: 1; filter: brightness(1); }
    100%      { transform: translateX(0) scale(1); opacity: 1; }
}

/* ?? Enemy recoil (shared, all player-attack variants) */

.bt-atk-player .bt-enemy-group[b-wxmcl1qgqz] {
    animation: e-recoil-b-wxmcl1qgqz 0.5s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bt-atk-v3.bt-atk-player .bt-enemy-group[b-wxmcl1qgqz] {
    animation: e-recoil-multi-b-wxmcl1qgqz 0.6s 0.08s ease both;
}

@keyframes e-recoil-b-wxmcl1qgqz {
    0%   { transform: translateX(0) scale(1) rotate(0); filter: brightness(1); }
    /* hit-stop: freeze at contact for a beat */
    12%  { transform: translateX(2px) scale(1.05) rotate(0); filter: brightness(5); }
    22%  { transform: translateX(2px) scale(1.02) rotate(0); filter: brightness(3); }
    /* launch */
    40%  { transform: translateX(38px) scale(0.72) rotate(18deg); filter: brightness(1.8); }
    55%  { transform: translateX(28px) scale(0.78) rotate(-8deg); filter: brightness(1.4); }
    72%  { transform: translateX(10px) scale(0.94) rotate(3deg); filter: brightness(1.1); }
    100% { transform: translateX(0) scale(1) rotate(0); filter: brightness(1); }
}

@keyframes e-recoil-multi-b-wxmcl1qgqz {
    0%    { transform: translateX(0) scale(1); filter: brightness(1); }
    10%   { transform: translateX(8px) scale(0.92); filter: brightness(2.5); }
    20%   { transform: translateX(2px) scale(0.98); filter: brightness(1.2); }
    30%   { transform: translateX(15px) scale(0.88) rotate(5deg); filter: brightness(3); }
    42%   { transform: translateX(5px) scale(0.95); filter: brightness(1.3); }
    55%   { transform: translateX(30px) scale(0.75) rotate(12deg); filter: brightness(4); }
    70%   { transform: translateX(18px) scale(0.85) rotate(-4deg); filter: brightness(1.6); }
    100%  { transform: translateX(0) scale(1) rotate(0); filter: brightness(1); }
}

.bt-atk-player .bt-bubble[b-wxmcl1qgqz] {
    animation: bubble-shake-b-wxmcl1qgqz 0.4s 0.2s ease both;
}

@keyframes bubble-shake-b-wxmcl1qgqz {
    0%, 100% { transform: translateX(0) rotate(0); }
    15%  { transform: translateX(16px) rotate(6deg); }
    35%  { transform: translateX(-12px) rotate(-5deg); }
    55%  { transform: translateX(8px) rotate(3deg); }
    75%  { transform: translateX(-3px) rotate(-1deg); }
}

/* ================================================================
   ?? ENEMY ATTACKS � 3 VARIANTS
   ================================================================ */

.bt-atk-enemy .bt-enemy-group[b-wxmcl1qgqz] { z-index: 3; }

/* ?? V1 � Straight rush */

.bt-atk-v1.bt-atk-enemy .bt-enemy-group[b-wxmcl1qgqz] {
    animation: e-dash-v1-b-wxmcl1qgqz 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes e-dash-v1-b-wxmcl1qgqz {
    0%   { transform: translateX(0) scale(1); }
    10%  { transform: translateX(18px) scale(1.2) rotate(-8deg); }
    18%  { transform: translateX(12px) scale(1.25) rotate(-5deg); }
    40%  { transform: translateX(max(-540px, -78vw)) scale(1.15) rotate(15deg); filter: brightness(2); }
    52%  { transform: translateX(max(-520px, -76vw)) scale(0.95) rotate(-3deg); filter: brightness(1.3); }
    72%  { transform: translateX(max(-120px, -18vw)) scale(1); filter: brightness(1); }
    100% { transform: translateX(0) scale(1); }
}

/* ?? V2 � Dive bomb */

.bt-atk-v2.bt-atk-enemy .bt-enemy-group[b-wxmcl1qgqz] {
    animation: e-dash-v2-b-wxmcl1qgqz 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes e-dash-v2-b-wxmcl1qgqz {
    0%   { transform: translateX(0) translateY(0) scale(1); }
    12%  { transform: translateX(10px) translateY(10px) scale(1.15) rotate(-5deg); }
    30%  { transform: translateX(max(-270px, -39vw)) translateY(-60px) scale(1.2) rotate(10deg); }
    48%  { transform: translateX(max(-530px, -77vw)) translateY(5px) scale(1.3) rotate(20deg); filter: brightness(2.2); }
    55%  { transform: translateX(max(-520px, -76vw)) translateY(0) scale(0.9) rotate(-5deg); filter: brightness(1.5); }
    75%  { transform: translateX(max(-120px, -18vw)) translateY(0) scale(1); filter: brightness(1); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}

/* ?? V3 � Blink strikes */

.bt-atk-v3.bt-atk-enemy .bt-enemy-group[b-wxmcl1qgqz] {
    animation: e-dash-v3-b-wxmcl1qgqz 0.7s steps(1, end) both;
}

@keyframes e-dash-v3-b-wxmcl1qgqz {
    0%        { transform: translateX(0) scale(1); opacity: 1; filter: brightness(1); }
    8%        { transform: translateX(max(-520px, -76vw)) scale(1.1) rotate(8deg); opacity: 0.6; filter: brightness(2); }
    16%       { transform: translateX(max(-160px, -23vw)) scale(0.95); opacity: 0.3; filter: brightness(1); }
    24%       { transform: translateX(max(-530px, -77vw)) scale(1.15) rotate(-5deg); opacity: 0.7; filter: brightness(2.5); }
    32%       { transform: translateX(max(-300px, -44vw)) scale(0.9); opacity: 0.2; filter: brightness(1); }
    42%       { transform: translateX(max(-525px, -76vw)) scale(1.25) rotate(12deg); opacity: 1; filter: brightness(3); }
    55%       { transform: translateX(max(-515px, -75vw)) scale(0.95) rotate(0); opacity: 1; filter: brightness(1.4); }
    75%       { transform: translateX(max(-120px, -18vw)) scale(1); opacity: 1; filter: brightness(1); }
    100%      { transform: translateX(0) scale(1); opacity: 1; }
}

/* ?? Player recoil (shared, all enemy-attack variants) */

.bt-atk-enemy .bt-player-group[b-wxmcl1qgqz] {
    animation: p-recoil-b-wxmcl1qgqz 0.5s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bt-atk-v3.bt-atk-enemy .bt-player-group[b-wxmcl1qgqz] {
    animation: p-recoil-multi-b-wxmcl1qgqz 0.6s 0.08s ease both;
}

@keyframes p-recoil-b-wxmcl1qgqz {
    0%   { transform: translateX(0) scale(1) rotate(0); filter: brightness(1); }
    /* hit-stop */
    12%  { transform: translateX(-2px) scale(1.05) rotate(0); filter: brightness(5); }
    22%  { transform: translateX(-2px) scale(1.02) rotate(0); filter: brightness(3); }
    /* launch */
    40%  { transform: translateX(-38px) scale(0.72) rotate(-18deg); filter: brightness(1.8); }
    55%  { transform: translateX(-28px) scale(0.78) rotate(8deg); filter: brightness(1.4); }
    72%  { transform: translateX(-10px) scale(0.94) rotate(-3deg); filter: brightness(1.1); }
    100% { transform: translateX(0) scale(1) rotate(0); filter: brightness(1); }
}

@keyframes p-recoil-multi-b-wxmcl1qgqz {
    0%    { transform: translateX(0) scale(1); filter: brightness(1); }
    10%   { transform: translateX(-8px) scale(0.92); filter: brightness(2.5); }
    20%   { transform: translateX(-2px) scale(0.98); filter: brightness(1.2); }
    30%   { transform: translateX(-15px) scale(0.88) rotate(-5deg); filter: brightness(3); }
    42%   { transform: translateX(-5px) scale(0.95); filter: brightness(1.3); }
    55%   { transform: translateX(-30px) scale(0.75) rotate(-12deg); filter: brightness(4); }
    70%   { transform: translateX(-18px) scale(0.85) rotate(4deg); filter: brightness(1.6); }
    100%  { transform: translateX(0) scale(1) rotate(0); filter: brightness(1); }
}

/* ================================================================
?? HIT-FREEZE � soft radial flash, no hard edges
================================================================ */

.bt-freeze[b-wxmcl1qgqz] {
    position: absolute;
    inset: -120px;
    pointer-events: none;
    border-radius: 50%;
    animation: freeze-flash-b-wxmcl1qgqz 0.22s 0.08s ease-out both;
    mix-blend-mode: screen;
}

.bt-freeze--atk[b-wxmcl1qgqz] {
    background: radial-gradient(ellipse at 70% 50%,
        rgba(180, 255, 210, 0.7) 0%,
        rgba(34, 197, 94, 0.25) 35%,
        rgba(34, 197, 94, 0.05) 60%,
        transparent 80%);
}

.bt-freeze--hit[b-wxmcl1qgqz] {
    background: radial-gradient(ellipse at 30% 50%,
        rgba(255, 200, 200, 0.7) 0%,
        rgba(239, 68, 68, 0.25) 35%,
        rgba(239, 68, 68, 0.05) 60%,
        transparent 80%);
}

@keyframes freeze-flash-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: scale(0.7); }
    30%  { opacity: 1; transform: scale(1.05); }
    60%  { opacity: 0.7; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.15); }
}

/* ================================================================
   ?? ENERGY RING � double expanding ring burst
   ================================================================ */

.bt-ring[b-wxmcl1qgqz] {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    border-radius: 50%;
    pointer-events: none;
    border: 3px solid;
    animation: ring-burst-b-wxmcl1qgqz 0.5s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bt-ring[b-wxmcl1qgqz]::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid;
    border-color: inherit;
    opacity: 0.4;
    animation: ring-burst-inner-b-wxmcl1qgqz 0.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bt-ring--atk[b-wxmcl1qgqz] {
    right: 5%;
    left: auto;
    transform: translate(50%, -50%);
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.5), inset 0 0 15px rgba(34, 197, 94, 0.2);
}

.bt-ring--hit[b-wxmcl1qgqz] {
    left: 5%;
    transform: translate(-50%, -50%);
    border-color: rgba(239, 68, 68, 0.8);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.5), inset 0 0 15px rgba(239, 68, 68, 0.2);
}

@keyframes ring-burst-b-wxmcl1qgqz {
    0%   { opacity: 1; width: 8px; height: 8px; border-width: 4px; }
    40%  { opacity: 0.9; border-width: 2.5px; }
    100% { opacity: 0; width: 180px; height: 180px; border-width: 0.5px; }
}

@keyframes ring-burst-inner-b-wxmcl1qgqz {
    0%   { opacity: 0.5; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(2.2); }
}

/* ================================================================
   ?? IMPACT GLOW � multi-layer radial energy burst
   ================================================================ */

.bt-impact[b-wxmcl1qgqz] {
    position: absolute;
    top: 50%;
    pointer-events: none;
    width: 120px;
    height: 120px;
}

.bt-impact--atk[b-wxmcl1qgqz] {
    right: -5%;
    left: auto;
    transform: translate(30%, -50%);
}

.bt-impact--hit[b-wxmcl1qgqz] {
    left: -5%;
    transform: translate(-30%, -50%);
}

.bt-impact-core[b-wxmcl1qgqz] {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    animation: impact-core-b-wxmcl1qgqz 0.4s 0.08s ease-out both;
}

.bt-impact--atk .bt-impact-core[b-wxmcl1qgqz] {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(190, 255, 220, 0.9) 15%,
        rgba(74, 222, 128, 0.7) 35%,
        rgba(34, 197, 94, 0.2) 65%,
        transparent 85%);
    box-shadow:
        0 0 20px rgba(74, 222, 128, 0.9),
        0 0 45px rgba(34, 197, 94, 0.6),
        0 0 80px rgba(34, 197, 94, 0.3);
}

.bt-impact--hit .bt-impact-core[b-wxmcl1qgqz] {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 210, 210, 0.9) 15%,
        rgba(248, 113, 113, 0.7) 35%,
        rgba(239, 68, 68, 0.2) 65%,
        transparent 85%);
    box-shadow:
        0 0 20px rgba(248, 113, 113, 0.9),
        0 0 45px rgba(239, 68, 68, 0.6),
        0 0 80px rgba(239, 68, 68, 0.3);
}

@keyframes impact-core-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: scale(0.05); }
    18%  { opacity: 1; transform: scale(1.4); }
    35%  { opacity: 0.95; transform: scale(0.85); }
    50%  { opacity: 0.8; transform: scale(1.15); }
    70%  { opacity: 0.4; transform: scale(0.95); }
    100% { opacity: 0; transform: scale(0.3); }
}

.bt-impact-flare[b-wxmcl1qgqz] {
    position: absolute;
    inset: -50%;
    border-radius: 50%;
    animation: impact-flare-b-wxmcl1qgqz 0.55s 0.06s ease-out both;
}

.bt-impact--atk .bt-impact-flare[b-wxmcl1qgqz] {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(74, 222, 128, 0.1) 25%,
        rgba(34, 197, 94, 0.04) 50%,
        transparent 70%);
}

.bt-impact--hit .bt-impact-flare[b-wxmcl1qgqz] {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(248, 113, 113, 0.1) 25%,
        rgba(239, 68, 68, 0.04) 50%,
        transparent 70%);
}

@keyframes impact-flare-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
    25%  { opacity: 1; transform: scale(1.2) rotate(15deg); }
    50%  { opacity: 0.6; transform: scale(1.6) rotate(30deg); }
    100% { opacity: 0; transform: scale(2.5) rotate(50deg); }
}

/* ================================================================
   ?? SLASH CROSS � three crossing slash trails with glow
   ================================================================ */

.bt-slash[b-wxmcl1qgqz] {
    position: absolute;
    width: 140px;
    height: 140px;
    top: 50%;
    pointer-events: none;
}

.bt-slash--atk[b-wxmcl1qgqz] {
    right: -8%;
    left: auto;
    transform: translate(0, -50%);
}

.bt-slash--hit[b-wxmcl1qgqz] {
    left: -8%;
    transform: translate(0, -50%);
}

.bt-slash-line[b-wxmcl1qgqz] {
    position: absolute;
    display: block;
    border-radius: 4px;
    transform-origin: left center;
}

.bt-slash--atk .bt-slash-line[b-wxmcl1qgqz] {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(74, 222, 128, 0.5) 10%,
        rgba(200, 255, 220, 0.95) 35%,
        rgba(255, 255, 255, 1) 50%,
        rgba(200, 255, 220, 0.95) 65%,
        rgba(74, 222, 128, 0.5) 90%,
        transparent 100%);
    box-shadow:
        0 0 6px rgba(74, 222, 128, 0.6),
        0 0 14px rgba(34, 197, 94, 0.3);
}

.bt-slash--hit .bt-slash-line[b-wxmcl1qgqz] {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(248, 113, 113, 0.5) 10%,
        rgba(255, 210, 210, 0.95) 35%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 210, 210, 0.95) 65%,
        rgba(248, 113, 113, 0.5) 90%,
        transparent 100%);
    box-shadow:
        0 0 6px rgba(248, 113, 113, 0.6),
        0 0 14px rgba(239, 68, 68, 0.3);
}

.bt-slash-a[b-wxmcl1qgqz] {
    top: 28%;
    left: 3%;
    width: 120px;
    height: 3.5px;
    transform: rotate(-28deg);
    animation: slash-draw-b-wxmcl1qgqz 0.22s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bt-slash-b[b-wxmcl1qgqz] {
    top: 58%;
    left: 8%;
    width: 105px;
    height: 2.5px;
    transform: rotate(-52deg);
    animation: slash-draw-b-wxmcl1qgqz 0.22s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bt-slash-c[b-wxmcl1qgqz] {
    top: 42%;
    left: 0;
    width: 130px;
    height: 2px;
    transform: rotate(-8deg);
    animation: slash-draw-b-wxmcl1qgqz 0.2s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slash-draw-b-wxmcl1qgqz {
    0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
    25%  { clip-path: inset(0 10% 0 0); opacity: 1; }
    55%  { clip-path: inset(0 0% 0 0); opacity: 0.9; }
    75%  { clip-path: inset(0 0% 0 0); opacity: 0.5; }
    100% { clip-path: inset(0 0% 0 30%); opacity: 0; }
}

/* ================================================================
   ?? SPEED LINES � motion trails behind attacker
   ================================================================ */

.bt-speed[b-wxmcl1qgqz] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.bt-speed-line[b-wxmcl1qgqz] {
    position: absolute;
    border-radius: 3px;
    opacity: 0;
}

.bt-speed--atk .bt-speed-line[b-wxmcl1qgqz] {
    left: 5%;
    background: linear-gradient(90deg,
        transparent,
        rgba(34, 197, 94, 0.15) 20%,
        rgba(74, 222, 128, 0.5) 50%,
        rgba(34, 197, 94, 0.15) 80%,
        transparent);
    animation: speed-r-b-wxmcl1qgqz 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bt-speed--hit .bt-speed-line[b-wxmcl1qgqz] {
    right: 5%;
    left: auto;
    background: linear-gradient(90deg,
        transparent,
        rgba(239, 68, 68, 0.15) 20%,
        rgba(248, 113, 113, 0.5) 50%,
        rgba(239, 68, 68, 0.15) 80%,
        transparent);
    animation: speed-l-b-wxmcl1qgqz 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bt-speed-line[style*="--si:0"][b-wxmcl1qgqz] { top: 18%; width: 45%; height: 2px; animation-delay: 0.06s; }
.bt-speed-line[style*="--si:1"][b-wxmcl1qgqz] { top: 33%; width: 55%; height: 1.5px; animation-delay: 0.09s; }
.bt-speed-line[style*="--si:2"][b-wxmcl1qgqz] { top: 50%; width: 65%; height: 3px; animation-delay: 0.05s; }
.bt-speed-line[style*="--si:3"][b-wxmcl1qgqz] { top: 66%; width: 50%; height: 2px; animation-delay: 0.11s; }
.bt-speed-line[style*="--si:4"][b-wxmcl1qgqz] { top: 80%; width: 38%; height: 1.5px; animation-delay: 0.08s; }

@keyframes speed-r-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: translateX(-30px) scaleX(0.2); }
    25%  { opacity: 0.8; transform: translateX(0) scaleX(1); }
    60%  { opacity: 0.4; transform: translateX(20px) scaleX(0.8); }
    100% { opacity: 0; transform: translateX(50px) scaleX(0.3); }
}

@keyframes speed-l-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: translateX(30px) scaleX(0.2); }
    25%  { opacity: 0.8; transform: translateX(0) scaleX(1); }
    60%  { opacity: 0.4; transform: translateX(-20px) scaleX(0.8); }
    100% { opacity: 0; transform: translateX(-50px) scaleX(0.3); }
}

/* ================================================================
   ?? SPARKS � 8 streaky particles with motion trails
   ================================================================ */

.bt-sparks[b-wxmcl1qgqz] {
    position: absolute;
    top: 50%;
    pointer-events: none;
    width: 0;
    height: 0;
}

.bt-sparks--atk[b-wxmcl1qgqz] { right: 8%; left: auto; }
.bt-sparks--hit[b-wxmcl1qgqz] { left: 8%; }

.bt-spark[b-wxmcl1qgqz] {
    position: absolute;
    border-radius: 50%;
}

.bt-sparks--atk .bt-spark[b-wxmcl1qgqz] {
    background: #86efac;
    box-shadow: 0 0 4px 1px rgba(34, 197, 94, 0.9), 0 0 10px rgba(74, 222, 128, 0.4);
}

.bt-sparks--hit .bt-spark[b-wxmcl1qgqz] {
    background: #fca5a5;
    box-shadow: 0 0 4px 1px rgba(239, 68, 68, 0.9), 0 0 10px rgba(248, 113, 113, 0.4);
}

/* Each spark: unique trajectory, size, and streaky trail via box-shadow offset */
.bt-spark[style*="--s:0"][b-wxmcl1qgqz] { width: 5px; height: 5px; animation: sp0-b-wxmcl1qgqz 0.5s  0.09s cubic-bezier(0.22,1,0.36,1) both; }
.bt-spark[style*="--s:1"][b-wxmcl1qgqz] { width: 3px; height: 3px; animation: sp1-b-wxmcl1qgqz 0.42s 0.11s cubic-bezier(0.22,1,0.36,1) both; }
.bt-spark[style*="--s:2"][b-wxmcl1qgqz] { width: 4px; height: 4px; animation: sp2-b-wxmcl1qgqz 0.48s 0.08s cubic-bezier(0.22,1,0.36,1) both; }
.bt-spark[style*="--s:3"][b-wxmcl1qgqz] { width: 6px; height: 6px; animation: sp3-b-wxmcl1qgqz 0.44s 0.12s cubic-bezier(0.22,1,0.36,1) both; }
.bt-spark[style*="--s:4"][b-wxmcl1qgqz] { width: 3px; height: 3px; animation: sp4-b-wxmcl1qgqz 0.4s  0.1s  cubic-bezier(0.22,1,0.36,1) both; }
.bt-spark[style*="--s:5"][b-wxmcl1qgqz] { width: 4px; height: 4px; animation: sp5-b-wxmcl1qgqz 0.5s  0.13s cubic-bezier(0.22,1,0.36,1) both; }
.bt-spark[style*="--s:6"][b-wxmcl1qgqz] { width: 5px; height: 5px; animation: sp6-b-wxmcl1qgqz 0.46s 0.09s cubic-bezier(0.22,1,0.36,1) both; }
.bt-spark[style*="--s:7"][b-wxmcl1qgqz] { width: 3px; height: 3px; animation: sp7-b-wxmcl1qgqz 0.43s 0.11s cubic-bezier(0.22,1,0.36,1) both; }

@keyframes sp0-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(0, 0)          scale(1.2); }
    40%  { opacity: 0.9; transform: translate(28px, -24px)  scale(1); }
    100% { opacity: 0; transform: translate(50px, -42px)  scale(0.2); }
}
@keyframes sp1-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(0, 0)          scale(1.2); }
    40%  { opacity: 0.9; transform: translate(18px, -38px)  scale(1); }
    100% { opacity: 0; transform: translate(30px, -60px)  scale(0.2); }
}
@keyframes sp2-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(0, 0)          scale(1.2); }
    40%  { opacity: 0.9; transform: translate(-10px, -32px) scale(1); }
    100% { opacity: 0; transform: translate(-18px, -55px) scale(0.2); }
}
@keyframes sp3-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(0, 0)          scale(1.2); }
    40%  { opacity: 0.9; transform: translate(-26px, -14px) scale(1); }
    100% { opacity: 0; transform: translate(-44px, -24px) scale(0.2); }
}
@keyframes sp4-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(0, 0)          scale(1.2); }
    40%  { opacity: 0.9; transform: translate(-30px, 10px)  scale(1); }
    100% { opacity: 0; transform: translate(-48px, 18px)  scale(0.2); }
}
@keyframes sp5-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(0, 0)          scale(1.2); }
    40%  { opacity: 0.9; transform: translate(-14px, 28px)  scale(1); }
    100% { opacity: 0; transform: translate(-24px, 48px)  scale(0.2); }
}
@keyframes sp6-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(0, 0)          scale(1.2); }
    40%  { opacity: 0.9; transform: translate(10px, 32px)   scale(1); }
    100% { opacity: 0; transform: translate(18px, 54px)   scale(0.2); }
}
@keyframes sp7-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(0, 0)          scale(1.2); }
    40%  { opacity: 0.9; transform: translate(28px, 16px)   scale(1); }
    100% { opacity: 0; transform: translate(46px, 26px)   scale(0.2); }
}

.bt-fighter-hp[b-wxmcl1qgqz] {
    width: clamp(50px, 10vw, 80px);
    height: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}

.bt-fighter-hp-fill[b-wxmcl1qgqz] {
    height: 100%;
    border-radius: 999px;
    filter: brightness(calc(1 + var(--b, 0) * 0.3));
    transition: width 0.4s ease, filter 0.15s ease-out;
}

.bt-fighter-hp--green[b-wxmcl1qgqz] { background: #22c55e; }
.bt-fighter-hp--red[b-wxmcl1qgqz]   { background: #ef4444; }

/* ?? Enemy group (sprite + voiceline) ???????????????? */

.bt-enemy-group[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
}

/* ?? Floating damage number ??????????????????????????? */

.bt-dmg[b-wxmcl1qgqz] {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    animation: dmg-arc-y-b-wxmcl1qgqz 1.2s cubic-bezier(0.2, 0, 1, 1) both;
}

.bt-dmg-num[b-wxmcl1qgqz] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ef4444;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(239, 68, 68, 0.4);
    line-height: 1;
    animation: dmg-arc-x-b-wxmcl1qgqz 1.2s linear both;
}

.bt-dmg-label[b-wxmcl1qgqz] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

/* Crit variant � bigger, gold */
.bt-dmg--crit .bt-dmg-num[b-wxmcl1qgqz] {
    font-size: 2rem;
    color: #fbbf24;
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.8),
        0 0 16px rgba(251, 191, 36, 0.5),
        0 0 30px rgba(251, 191, 36, 0.2);
    animation-name: dmg-arc-x-crit-b-wxmcl1qgqz;
    animation-duration: 1.4s;
}

.bt-dmg--crit[b-wxmcl1qgqz] {
    animation-name: dmg-arc-y-crit-b-wxmcl1qgqz;
    animation-duration: 1.4s;
}

/* Player-side received damage */
.bt-player-group[b-wxmcl1qgqz] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bt-dmg-taken[b-wxmcl1qgqz] {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    pointer-events: none;
    animation: dmg-taken-arc-y-b-wxmcl1qgqz 1.2s cubic-bezier(0.2, 0, 1, 1) both;
}

.bt-dmg-taken .bt-dmg-num[b-wxmcl1qgqz] {
    font-size: 1.3rem;
    animation: dmg-taken-arc-x-b-wxmcl1qgqz 1.2s linear both;
}

/* ?? Y-axis keyframes (gravity arc � matches death animation feel) */

@keyframes dmg-arc-y-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(-50%, 0); }
    3%   { opacity: 1; transform: translate(-50%, 8px); }
    25%  { opacity: 1; transform: translate(-50%, -280px); }
    35%  { opacity: 0.9; transform: translate(-50%, -310px); }
    55%  { opacity: 0.7; transform: translate(-50%, -180px); }
    75%  { opacity: 0.35; transform: translate(-50%, -90px); }
    100% { opacity: 0; transform: translate(-50%, -20px); }
}

@keyframes dmg-arc-y-crit-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(-50%, 0); }
    3%   { opacity: 1; transform: translate(-50%, 10px); }
    22%  { opacity: 1; transform: translate(-50%, -360px); }
    32%  { opacity: 0.95; transform: translate(-50%, -390px); }
    55%  { opacity: 0.7; transform: translate(-50%, -200px); }
    75%  { opacity: 0.35; transform: translate(-50%, -110px); }
    100% { opacity: 0; transform: translate(-50%, -25px); }
}

/* ?? X-axis keyframes (drift + scale) */

@keyframes dmg-arc-x-b-wxmcl1qgqz {
    0%   { transform: translateX(0) rotate(0deg) scale(0.7); }
    6%   { transform: translateX(0) rotate(0deg) scale(1.15); }
    25%  { transform: translateX(25px) rotate(-8deg) scale(1); }
    50%  { transform: translateX(50px) rotate(5deg) scale(0.9); }
    100% { transform: translateX(80px) rotate(15deg) scale(0.6); }
}

@keyframes dmg-arc-x-crit-b-wxmcl1qgqz {
    0%   { transform: translateX(0) rotate(0deg) scale(0.6); }
    5%   { transform: translateX(0) rotate(0deg) scale(1.4); }
    12%  { transform: translateX(5px) rotate(0deg) scale(1.05); }
    25%  { transform: translateX(30px) rotate(-10deg) scale(1); }
    50%  { transform: translateX(65px) rotate(8deg) scale(0.85); }
    100% { transform: translateX(100px) rotate(20deg) scale(0.5); }
}

/* Player-side damage: drifts left (mirrored) */

@keyframes dmg-taken-arc-y-b-wxmcl1qgqz {
    0%   { opacity: 1; transform: translate(-50%, 0); }
    3%   { opacity: 1; transform: translate(-50%, 8px); }
    25%  { opacity: 1; transform: translate(-50%, -250px); }
    35%  { opacity: 0.9; transform: translate(-50%, -280px); }
    55%  { opacity: 0.7; transform: translate(-50%, -150px); }
    75%  { opacity: 0.35; transform: translate(-50%, -75px); }
    100% { opacity: 0; transform: translate(-50%, -15px); }
}

@keyframes dmg-taken-arc-x-b-wxmcl1qgqz {
    0%   { transform: translateX(0) rotate(0deg) scale(0.7); }
    6%   { transform: translateX(0) rotate(0deg) scale(1.1); }
    25%  { transform: translateX(-20px) rotate(8deg) scale(1); }
    50%  { transform: translateX(-45px) rotate(-5deg) scale(0.9); }
    100% { transform: translateX(-70px) rotate(-15deg) scale(0.6); }
}

/* ================================================================
   ?? ENEMY DEATH � split-axis arcs for smooth parabolic flight
   Outer wrapper = Y axis (gravity easing)
   Inner element = X axis + rotation (linear drift)
   ================================================================ */

.bt-enemy-dying[b-wxmcl1qgqz] {
    position: relative;
}

/* Arc wrappers are invisible by default */
.bt-death-arc[b-wxmcl1qgqz] { display: contents; }

/* When dying, wrappers become positioned blocks that animate the Y axis */
.bt-enemy-dying .bt-death-arc[b-wxmcl1qgqz] {
    display: block;
}

/* ?? Y-AXIS (gravity): ease-out going up, ease-in coming down */

.bt-enemy-dying .bt-death-arc--sprite[b-wxmcl1qgqz] {
    animation: death-y-sprite-b-wxmcl1qgqz 1.4s cubic-bezier(0.2, 0, 1, 1) both;
}

.bt-enemy-dying .bt-death-arc--hp[b-wxmcl1qgqz] {
    animation: death-y-hp-b-wxmcl1qgqz 1.2s cubic-bezier(0.2, 0, 1, 1) both;
}

/* ?? X-AXIS + ROTATION (linear drift + spin on inner elements) */

.bt-enemy-dying .bt-fighter--enemy .bt-fighter-sprite[b-wxmcl1qgqz] {
    animation: death-x-sprite-b-wxmcl1qgqz 1.4s linear both;
}

.bt-enemy-dying .bt-fighter--enemy .bt-fighter-hp[b-wxmcl1qgqz] {
    animation: death-x-hp-b-wxmcl1qgqz 1.2s linear both;
}

/* ----------------------------------------------------------------
   Y keyframes � simple up-then-down, easing handles the curve
   ---------------------------------------------------------------- */

@keyframes death-y-sprite-b-wxmcl1qgqz {
    0%   { transform: translateY(0); opacity: 1; filter: brightness(1); }
    3%   { transform: translateY(10px); filter: brightness(8); }
    6%   { transform: translateY(5px); filter: brightness(4); }
    /* launch up � deceleration handled by easing */
    25%  { transform: translateY(-500px); filter: brightness(1); }
    /* peak */
    35%  { transform: translateY(-540px); opacity: 0.9; }
    /* fall � acceleration handled by easing */
    55%  { transform: translateY(-350px); opacity: 0.8; }
    75%  { transform: translateY(200px); opacity: 0.55; }
    90%  { transform: translateY(700px); opacity: 0.2; }
    100% { transform: translateY(1200px); opacity: 0; }
}

@keyframes death-y-hp-b-wxmcl1qgqz {
    0%   { transform: translateY(0); opacity: 1; filter: brightness(1); }
    5%   { transform: translateY(6px); filter: brightness(6); }
    /* launch up */
    25%  { transform: translateY(-320px); filter: brightness(1); }
    /* peak */
    33%  { transform: translateY(-350px); opacity: 0.85; }
    /* fall */
    55%  { transform: translateY(-150px); opacity: 0.6; }
    75%  { transform: translateY(300px); opacity: 0.35; }
    90%  { transform: translateY(800px); opacity: 0.1; }
    100% { transform: translateY(1300px); opacity: 0; }
}

/* ----------------------------------------------------------------
   X + rotation keyframes � steady drift + continuous spin
   ---------------------------------------------------------------- */

/* Sprite: drifts right, spins clockwise */
@keyframes death-x-sprite-b-wxmcl1qgqz {
    0%   { transform: translateX(0) rotate(0deg) scale(1); }
    6%   { transform: translateX(0) rotate(0deg) scale(1.15, 0.7); }
    10%  { transform: translateX(15px) rotate(-10deg) scale(0.85, 1.3); }
    25%  { transform: translateX(60px) rotate(-25deg) scale(0.95); }
    50%  { transform: translateX(120px) rotate(30deg) scale(0.88); }
    75%  { transform: translateX(160px) rotate(120deg) scale(0.75); }
    100% { transform: translateX(180px) rotate(240deg) scale(0.5); }
}

/* HP bar: drifts far right, fast spin */
@keyframes death-x-hp-b-wxmcl1qgqz {
    0%   { transform: translateX(0) rotate(0deg) scale(1); }
    5%   { transform: translateX(0) rotate(0deg) scale(1.15, 0.65); }
    10%  { transform: translateX(10px) rotate(-15deg) scale(0.9, 1.2); }
    25%  { transform: translateX(50px) rotate(-50deg) scale(0.85); }
    50%  { transform: translateX(130px) rotate(-140deg) scale(0.7); }
    75%  { transform: translateX(200px) rotate(-270deg) scale(0.55); }
    100% { transform: translateX(230px) rotate(-400deg) scale(0.4); }
}

/* ?? Correct label ??????????????????????????????????? */

.bt-correct-label[b-wxmcl1qgqz] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--error);
    animation: fade-in-b-wxmcl1qgqz 0.25s ease both;
}

.bt-hint[b-wxmcl1qgqz] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.6;
    letter-spacing: 0.06em;
    animation: fade-in-b-wxmcl1qgqz 0.3s ease both;
}

@keyframes fade-in-b-wxmcl1qgqz {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ?? Enemy voiceline � speech bubble from enemy ??? */

.bt-voiceline[b-wxmcl1qgqz] {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 50%;
    transform: translateX(50%);
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.4rem 0.75rem;
    max-width: 200px;
    pointer-events: none;
    z-index: 5;
    animation: voiceline-in-b-wxmcl1qgqz 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
    white-space: nowrap;
}

.bt-voiceline-tail[b-wxmcl1qgqz] {
    position: absolute;
    bottom: -7px;
    right: 50%;
    translate: 50% 0;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--border-color);
}

.bt-voiceline-tail[b-wxmcl1qgqz]::after {
    content: "";
    position: absolute;
    top: -8.5px;
    left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--bg-surface);
}

.bt-voiceline-text[b-wxmcl1qgqz] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
    font-style: italic;
}

@keyframes voiceline-in-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: translateX(50%) scale(0.4) translateY(8px); }
    100% { opacity: 1; transform: translateX(50%) scale(1) translateY(0); }
}

/* ?? Choices row ??????????????????????????????????????????? */

.bt-choices-row[b-wxmcl1qgqz] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1.25rem;
}

/* ?? Timer bar (horizontal, drains left to right above prompt) */

.bt-timer-track[b-wxmcl1qgqz] {
    width: 100%;
    height: 5px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.35rem;
}

.bt-timer-fill[b-wxmcl1qgqz] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 999px;
    background: #22c55e;
    transform-origin: left center;
    animation: timer-drain-b-wxmcl1qgqz linear both;
}

.bt-timer--paused .bt-timer-fill[b-wxmcl1qgqz] {
    animation-play-state: paused;
}

@keyframes timer-drain-b-wxmcl1qgqz {
    0%   { width: 100%; background: #22c55e; }
    50%  { background: #eab308; }
    80%  { background: #ef4444; }
    100% { width: 0%; background: #ef4444; }
}

/* ?? Choices (single row) ??????????????????????????? */

.bt-choices[b-wxmcl1qgqz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.choice-btn[b-wxmcl1qgqz] {
    position: relative;
    padding: 1.1rem 0.5rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition:
        border-color 0.18s ease,
        background   0.18s ease,
        color        0.18s ease,
        transform    0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow   0.18s ease,
        opacity      0.25s ease;
    animation: choice-in-b-wxmcl1qgqz 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

.bt-choices .choice-btn:nth-child(1)[b-wxmcl1qgqz] { --i: 0; }
.bt-choices .choice-btn:nth-child(2)[b-wxmcl1qgqz] { --i: 1; }
.bt-choices .choice-btn:nth-child(3)[b-wxmcl1qgqz] { --i: 2; }
.bt-choices .choice-btn:nth-child(4)[b-wxmcl1qgqz] { --i: 3; }

@keyframes choice-in-b-wxmcl1qgqz {
    0% {
        opacity: 0;
        transform: translateY(20px) scaleY(0.82) scaleX(1.06);
    }
    50% {
        opacity: 1;
        transform: translateY(-4px) scaleY(1.05) scaleX(0.97);
    }
    75% {
        transform: translateY(1px) scaleY(0.99) scaleX(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.choice-btn:hover:not(:disabled)[b-wxmcl1qgqz] {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: translateY(-3px) scale(1.025);
    box-shadow: 0 0 16px var(--accent-glow);
}

.choice-btn:active:not(:disabled)[b-wxmcl1qgqz] {
    transform: translateY(2px) scaleY(0.93) scaleX(1.04);
    transition-duration: 0.06s;
}

.choice-btn.correct[b-wxmcl1qgqz] {
    border-color: var(--success);
    background: var(--success-subtle);
    color: var(--success);
    font-weight: 600;
    animation: pop-correct-b-wxmcl1qgqz 0.38s cubic-bezier(0.34, 1.8, 0.64, 1);
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.35), inset 0 0 14px rgba(34, 197, 94, 0.08);
}

@keyframes pop-correct-b-wxmcl1qgqz {
    0%   { transform: scale(1); }
    20%  { transform: scaleX(1.14) scaleY(0.9); }
    45%  { transform: scaleX(0.95) scaleY(1.08); }
    70%  { transform: scaleX(1.02) scaleY(0.98); }
    100% { transform: scale(1); }
}

.choice-btn.wrong[b-wxmcl1qgqz] {
    border-color: var(--error);
    background: var(--error-subtle);
    color: var(--error);
    animation: shake-wrong-b-wxmcl1qgqz 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.3);
}

@keyframes shake-wrong-b-wxmcl1qgqz {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    8%       { transform: translateX(-8px) rotate(-2.5deg) scaleX(0.97); }
    20%      { transform: translateX(8px) rotate(2.5deg) scaleX(1.03); }
    32%      { transform: translateX(-6px) rotate(-1.5deg); }
    44%      { transform: translateX(5px) rotate(1deg); }
    56%      { transform: translateX(-3px) rotate(-0.5deg); }
    68%      { transform: translateX(2px); }
    80%      { transform: translateX(-1px); }
}

.choice-btn.dimmed[b-wxmcl1qgqz] {
    opacity: 0.35;
    pointer-events: none;
}

.choice-btn.eliminated[b-wxmcl1qgqz] {
    opacity: 0.15;
    pointer-events: none;
    text-decoration: line-through;
    border-style: dashed;
}

.choice-btn.debug-correct[b-wxmcl1qgqz] {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.15);
}

/* ?? Inventory strip ???????????????????????????????? */

/* ?? Bottom bar: Stats (left) + Inventory (right) ???????????? */

.bt-bottom-bar[b-wxmcl1qgqz] {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0 0.25rem;
}

/* ?? Stats panel ????????????????????????????????????????????? */

.bt-stats-panel[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex-wrap: wrap;
}

.bt-stat[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: default;
    transition: background 0.2s;
}

.bt-stat:hover[b-wxmcl1qgqz] {
    background: rgba(255, 255, 255, 0.07);
}

.bt-stat-icon[b-wxmcl1qgqz] {
    font-size: 0.75rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    opacity: 0.8;
}

.bt-stat-value[b-wxmcl1qgqz] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    line-height: 1;
}

.bt-stat--crit .bt-stat-value[b-wxmcl1qgqz] { color: #f59e0b; }
.bt-stat--streak .bt-stat-value[b-wxmcl1qgqz] { color: #ef4444; }
.bt-stat--debuff .bt-stat-value[b-wxmcl1qgqz] { color: #f87171; }
.bt-stat--debuff[b-wxmcl1qgqz] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(248, 113, 113, 0.12);
}
.bt-stat--streak[b-wxmcl1qgqz] {
    animation: stat-streak-pulse-b-wxmcl1qgqz 1.5s ease-in-out infinite;
}

@keyframes stat-streak-pulse-b-wxmcl1qgqz {
    0%, 100% { background: rgba(239, 68, 68, 0.06); }
    50%      { background: rgba(239, 68, 68, 0.14); }
}

/* ?? Inventory (right side) ?????????????????????????????????? */

.bt-inventory[b-wxmcl1qgqz] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.bt-inv-item[b-wxmcl1qgqz] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1.5px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s;
}

.bt-inv-item:hover:not(:disabled)[b-wxmcl1qgqz] {
    border-color: #22c55e;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.bt-inv-item:active:not(:disabled)[b-wxmcl1qgqz] {
    transform: translateY(1px) scale(0.95);
}

.bt-inv-item--empty[b-wxmcl1qgqz] {
    opacity: 0.3;
    cursor: default;
}

.bt-inv-item--gear[b-wxmcl1qgqz] {
    width: 36px;
    height: 36px;
    cursor: default;
    border-color: rgba(251, 191, 36, 0.18);
    animation: gear-slot-in-b-wxmcl1qgqz 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-inv-item--gear .bt-inv-icon[b-wxmcl1qgqz] {
    font-size: 1.1rem;
}

@keyframes gear-slot-in-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: scale(0.5) rotate(-10deg); }
    60%  { transform: scale(1.1) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.bt-inv-icon[b-wxmcl1qgqz] {
    font-size: 1.5rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-inv-count[b-wxmcl1qgqz] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ?? Potion drop � falls from enemy above into the inventory slot */

.bt-potion-drop[b-wxmcl1qgqz] {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.55rem;
    background: rgba(34, 197, 94, 0.15);
    border: 1.5px solid rgba(34, 197, 94, 0.45);
    border-radius: 999px;
    pointer-events: none;
    z-index: 10;
    animation: potion-fall-b-wxmcl1qgqz 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bt-potion-drop-icon[b-wxmcl1qgqz] {
    font-size: 1rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-potion-drop-text[b-wxmcl1qgqz] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #22c55e;
}

@keyframes potion-fall-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-120px) scale(0.6) rotate(-15deg); }
    30%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.15) rotate(5deg); }
    50%  { transform: translateX(-50%) translateY(-8px) scale(1) rotate(-2deg); }
    70%  { transform: translateX(-50%) translateY(2px) scale(0.97) rotate(0deg); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(0deg); }
}

/* ?? Responsive ???????????????????????????????????? */

@media (max-width: 520px) {
    .bt-choices[b-wxmcl1qgqz] {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .choice-btn[b-wxmcl1qgqz] {
        padding: 0.6rem 0.35rem;
        font-size: 0.85rem;
        border-radius: 0.45rem;
    }
    .bt-choices-row[b-wxmcl1qgqz] {
        margin-bottom: 0.6rem;
    }
}

/* ================================================================
   ?? BEAT SYNC � Audio-reactive via Web Audio API
   JS sets --b (0 or 1) on <html> on each detected drum hit.
   CSS uses calc(var(--b, 0) * value) � no :global() needed,
   works natively with Blazor CSS isolation.
   ================================================================ */

/* ?? Player bounce */
.bt-fighter--player[b-wxmcl1qgqz] {
    transform: translateY(calc(var(--b, 0) * -5px));
    transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ?? Enemy group bounce */
.bt-enemy-group[b-wxmcl1qgqz] {
    transform: translateY(calc(var(--b, 0) * -4px));
    transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ?? Score pop */
.bt-score[b-wxmcl1qgqz] {
    transform: scale(calc(1 + var(--b, 0) * 0.08));
    transition: transform 0.12s ease-out;
}

/* ?? Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bt-fighter--player[b-wxmcl1qgqz],
    .bt-enemy-group[b-wxmcl1qgqz],
    .bt-score[b-wxmcl1qgqz] {
        transform: none !important;
        transition: none !important;
    }
}

/* ================================================================
   Route Map � horizontal path, one node per encounter
   ================================================================ */

.bt-route[b-wxmcl1qgqz] {
    width: 100%;
    max-width: 620px;
    margin: 0 auto 0.35rem;
    padding: 0.5rem 0.75rem 0.35rem;
    border-radius: 0.625rem;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
}

.bt-route[b-wxmcl1qgqz]::-webkit-scrollbar { display: none; }

.bt-route-track[b-wxmcl1qgqz] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-width: min-content;
}

/* Each stop wraps a connector + node + optional label */
.bt-route-stop[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    min-width: 38px;
}

/* Connector line � sits to the left of the node */
.bt-route-connector[b-wxmcl1qgqz] {
    display: none;
}

.bt-route-stop + .bt-route-stop > .bt-route-connector[b-wxmcl1qgqz] {
    display: block;
    position: absolute;
    right: calc(50% + 13px);
    top: 14px;
    height: 2px;
    left: calc(-50% + 13px);
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.10));
    z-index: 0;
}

.bt-route-stop--done + .bt-route-stop > .bt-route-connector[b-wxmcl1qgqz] {
    display: block;
}

.bt-route-connector--done[b-wxmcl1qgqz] {
    background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.15)) !important;
    opacity: 0.6;
}

/* Individual node circle */
.bt-route-node[b-wxmcl1qgqz] {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    background: var(--bg-surface);
    z-index: 1;
}

.bt-route-node-icon[b-wxmcl1qgqz] {
    font-size: 0.72rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-route-node-check[b-wxmcl1qgqz] {
    position: absolute;
    bottom: -3px;
    right: -3px;
    font-size: 0.4rem;
    font-weight: 700;
    color: #22c55e;
    background: var(--bg-surface);
    border-radius: 50%;
    width: 11px;
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #22c55e;
}

/* Type accent colors */
.bt-route-node--normalfight[b-wxmcl1qgqz] { border-color: #3b82f6; }
.bt-route-node--elitefight[b-wxmcl1qgqz]  { border-color: #a855f7; }
.bt-route-node--boss[b-wxmcl1qgqz]        { border-color: #ef4444; }
.bt-route-node--heal[b-wxmcl1qgqz]        { border-color: #22c55e; }
.bt-route-node--treasure[b-wxmcl1qgqz]    { border-color: #f59e0b; }
.bt-route-node--store[b-wxmcl1qgqz]       { border-color: #06b6d4; }

/* Completed nodes */
.bt-route-node--done[b-wxmcl1qgqz] {
    opacity: 0.5;
    transform: scale(0.88);
}

/* Current node � player is here */
.bt-route-node--active[b-wxmcl1qgqz] {
    width: 34px;
    height: 34px;
    border-width: 2.5px;
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(255, 105, 180, 0.35), 0 0 4px rgba(255,105,180,0.15) inset;
    z-index: 2;
    animation: route-pulse-b-wxmcl1qgqz 2s ease-in-out infinite;
}

@keyframes route-pulse-b-wxmcl1qgqz {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 105, 180, 0.35), 0 0 4px rgba(255,105,180,0.15) inset; }
    50%      { box-shadow: 0 0 20px rgba(255, 105, 180, 0.55), 0 0 8px rgba(255,105,180,0.25) inset; }
}

/* Boss landmark */
.bt-route-node--landmark[b-wxmcl1qgqz] {
    width: 36px;
    height: 36px;
    border-width: 2.5px;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, var(--bg-surface) 60%, rgba(239,68,68,0.08));
}

.bt-route-node--landmark .bt-route-node-icon[b-wxmcl1qgqz] {
    font-size: 0.95rem;
}

/* Preview nodes � faded future */
.bt-route-node--preview[b-wxmcl1qgqz] {
    opacity: 0.3;
    border-style: dashed;
}

.bt-route-node--preview .bt-route-node-icon[b-wxmcl1qgqz] {
    opacity: 0.5;
}

/* Player avatar IS the current node */
.bt-route-player-avatar[b-wxmcl1qgqz] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--text-primary);
    object-fit: cover;
}

/* Node labels */
.bt-route-label[b-wxmcl1qgqz] {
    font-size: 0.52rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    margin-top: 3px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bt-route-label--active[b-wxmcl1qgqz] {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.55rem;
}

.bt-route-label--preview[b-wxmcl1qgqz] {
    opacity: 0.5;
}

/* ?? Store overlay ??????????????????????????????????????? */

.bt-store-overlay[b-wxmcl1qgqz] {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    animation: node-overlay-in-b-wxmcl1qgqz 0.4s ease both;
    overflow-y: auto;
}

/* ---- Shell: 2-column grid ---- */

.bt-store-shell[b-wxmcl1qgqz] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 880px;
    min-height: min(520px, 76vh);
}

/* ---- Left: Sidebar / merchant stall ---- */

.bt-store-sidebar[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    border-radius: 0.9rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(38, 28, 18, 0.90), rgba(20, 14, 10, 0.95));
    border: 1px solid rgba(251, 191, 36, 0.14);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.bt-store-keeper-title[b-wxmcl1qgqz] {
    width: 100%;
    padding: 0.6rem 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.06);
    border-bottom: 1px solid rgba(251, 191, 36, 0.10);
}

.bt-store-keeper-stage[b-wxmcl1qgqz] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    flex: 1;
    min-height: 280px;
    padding: 0 0 80px;
}

.bt-store-keeper-glow[b-wxmcl1qgqz] {
    position: absolute;
    bottom: 100px;
    left: 50%;
    width: 180px;
    height: 180px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.12), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.bt-store-keeper-bubble[b-wxmcl1qgqz] {
    position: relative;
    z-index: 2;
    max-width: 210px;
    margin-bottom: 0.3rem;
    padding: 0.45rem 0.7rem;
    background: rgba(32, 28, 22, 0.94);
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: 0.6rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.4;
    text-align: center;
    animation: keeper-bubble-in-b-wxmcl1qgqz 0.3s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-store-keeper-tail[b-wxmcl1qgqz] {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(32, 28, 22, 0.94);
}

@keyframes keeper-bubble-in-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: scale(0.7) translateY(8px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.bt-store-keeper-sprite[b-wxmcl1qgqz] {
    position: relative;
    z-index: 1;
    font-size: 9rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 4px 18px rgba(251, 191, 36, 0.18));
    animation: node-card-in-b-wxmcl1qgqz 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Wooden counter � positioned at bottom of stage, overlapping the wizard */
.bt-store-counter[b-wxmcl1qgqz] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 3;
    background:
        linear-gradient(180deg,
            rgba(142, 92, 50, 0.95) 0%,
            rgba(100, 62, 32, 0.98) 40%,
            rgba(68, 40, 18, 1) 100%);
    border-top: 2px solid rgba(200, 150, 90, 0.35);
    box-shadow:
        inset 0 2px 0 rgba(255, 220, 170, 0.08),
        0 -6px 20px rgba(0, 0, 0, 0.3);
}

.bt-store-counter-edge[b-wxmcl1qgqz] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(180deg, rgba(220, 170, 110, 0.25), transparent);
    border-radius: 0 0 2px 2px;
}

.bt-store-leave[b-wxmcl1qgqz] {
    width: 100%;
    padding: 0.6rem;
    background: rgba(251, 191, 36, 0.05);
    border: none;
    border-top: 1px solid rgba(251, 191, 36, 0.10);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bt-store-leave:hover[b-wxmcl1qgqz] {
    background: rgba(251, 191, 36, 0.10);
    color: #fbbf24;
}

/* ---- Right: Inventory panel ---- */

.bt-store-panel[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(180deg, rgba(18, 17, 28, 0.94), rgba(14, 12, 22, 0.97));
    border: 1px solid rgba(109, 89, 182, 0.18);
    border-radius: 0.9rem;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.bt-store-panel-header[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bt-store-panel-title-wrap[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.bt-store-title[b-wxmcl1qgqz] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.02em;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-store-subtitle[b-wxmcl1qgqz] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.bt-store-coins[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.06);
}

.bt-store-coins-icon[b-wxmcl1qgqz] {
    font-size: 0.95rem;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ---- Scan line (ZZZ-style) ---- */

.bt-store-scan[b-wxmcl1qgqz] {
    position: relative;
    width: 100%;
    height: 1px;
    background: rgba(251, 191, 36, 0.08);
    overflow: hidden;
}

.bt-store-scan[b-wxmcl1qgqz]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), transparent);
    animation: store-scan-b-wxmcl1qgqz 3s ease-in-out infinite;
}

@keyframes store-scan-b-wxmcl1qgqz {
    0%   { left: -60%; }
    100% { left: 100%; }
}

/* ---- Item list ---- */

.bt-store-list[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
}

.bt-store-row[b-wxmcl1qgqz] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    background: rgba(22, 20, 34, 0.80);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.6rem;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
    animation: store-row-in-b-wxmcl1qgqz 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-store-row:nth-child(1)[b-wxmcl1qgqz] { animation-delay: 0.04s; }
.bt-store-row:nth-child(2)[b-wxmcl1qgqz] { animation-delay: 0.08s; }
.bt-store-row:nth-child(3)[b-wxmcl1qgqz] { animation-delay: 0.12s; }
.bt-store-row:nth-child(4)[b-wxmcl1qgqz] { animation-delay: 0.16s; }
.bt-store-row:nth-child(5)[b-wxmcl1qgqz] { animation-delay: 0.20s; }
.bt-store-row:nth-child(6)[b-wxmcl1qgqz] { animation-delay: 0.24s; }

@keyframes store-row-in-b-wxmcl1qgqz {
    0%   { opacity: 0; transform: translateX(-14px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Rarity left-border accent */
.bt-store-row.bt-store-rarity--common[b-wxmcl1qgqz]   { border-left: 3px solid rgba(156, 163, 175, 0.50); }
.bt-store-row.bt-store-rarity--uncommon[b-wxmcl1qgqz] { border-left: 3px solid rgba(34, 197, 94, 0.65); }
.bt-store-row.bt-store-rarity--rare[b-wxmcl1qgqz]     { border-left: 3px solid rgba(59, 130, 246, 0.65); }
.bt-store-row.bt-store-rarity--epic[b-wxmcl1qgqz]     {
    border-left: 3px solid rgba(168, 85, 247, 0.70);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.08);
}

/* Synergy border override */
.bt-store-row--synergy:has(.bt-synergy--crit)[b-wxmcl1qgqz]     { border-left-color: rgba(248, 113, 113, 0.70); }
.bt-store-row--synergy:has(.bt-synergy--vitality)[b-wxmcl1qgqz] { border-left-color: rgba(74, 222, 128, 0.70); }
.bt-store-row--synergy:has(.bt-synergy--speed)[b-wxmcl1qgqz]    { border-left-color: rgba(251, 191, 36, 0.70); }

.bt-store-row:hover:not(:disabled)[b-wxmcl1qgqz] {
    border-color: rgba(251, 191, 36, 0.22);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transform: translateX(3px);
}

.bt-store-row:active:not(:disabled)[b-wxmcl1qgqz] {
    transform: scale(0.98);
}

.bt-store-row--disabled[b-wxmcl1qgqz] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Hover flash line (ZZZ-style) */
.bt-store-row-flash[b-wxmcl1qgqz] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}

.bt-store-row-flash[b-wxmcl1qgqz]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

.bt-store-row:hover:not(:disabled) .bt-store-row-flash[b-wxmcl1qgqz] {
    opacity: 1;
}

.bt-store-row:hover:not(:disabled) .bt-store-row-flash[b-wxmcl1qgqz]::after {
    animation: store-row-flash-b-wxmcl1qgqz 0.5s ease-out forwards;
}

@keyframes store-row-flash-b-wxmcl1qgqz {
    0%   { left: -50%; }
    100% { left: 120%; }
}

/* Row contents */
.bt-store-row-icon[b-wxmcl1qgqz] {
    font-size: 1.8rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    flex-shrink: 0;
}

.bt-store-row-info[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.bt-store-row-top[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.bt-store-row-title[b-wxmcl1qgqz] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.bt-store-row-desc[b-wxmcl1qgqz] {
    font-size: 0.66rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.bt-store-row-price[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.6rem;
    background: linear-gradient(180deg, rgba(142, 92, 50, 0.40), rgba(100, 62, 32, 0.45));
    border: 1px solid rgba(200, 150, 90, 0.15);
    border-radius: 0.4rem;
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}

.bt-store-row--disabled .bt-store-row-price[b-wxmcl1qgqz] {
    color: var(--text-muted);
}

.bt-store-buy-icon[b-wxmcl1qgqz] {
    font-size: 0.8rem;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* Rarity badges */
.bt-store-rarity-badge[b-wxmcl1qgqz] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.08rem 0.3rem;
    border-radius: 0.25rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.bt-store-rarity-badge.bt-store-rarity--common[b-wxmcl1qgqz] {
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.10);
    border: 1px solid rgba(156, 163, 175, 0.18);
}

.bt-store-rarity-badge.bt-store-rarity--uncommon[b-wxmcl1qgqz] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.18);
}

.bt-store-rarity-badge.bt-store-rarity--rare[b-wxmcl1qgqz] {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(59, 130, 246, 0.18);
}

.bt-store-rarity-badge.bt-store-rarity--epic[b-wxmcl1qgqz] {
    color: #a855f7;
    background: rgba(168, 85, 247, 0.10);
    border: 1px solid rgba(168, 85, 247, 0.22);
    animation: epic-glow-b-wxmcl1qgqz 2s ease-in-out infinite alternate;
}

@keyframes epic-glow-b-wxmcl1qgqz {
    from { box-shadow: 0 0 3px rgba(168, 85, 247, 0.12); }
    to   { box-shadow: 0 0 8px rgba(168, 85, 247, 0.28); }
}

/* Synergy badges */
.bt-store-synergy-badge[b-wxmcl1qgqz] {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.08rem 0.3rem;
    border-radius: 999px;
    line-height: 1.3;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
}

.bt-store-synergy-badge.bt-synergy--crit[b-wxmcl1qgqz] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.10);
}

.bt-store-synergy-badge.bt-synergy--vitality[b-wxmcl1qgqz] {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.10);
}

.bt-store-synergy-badge.bt-synergy--speed[b-wxmcl1qgqz] {
    color: #fbbf24;
    background: rgba(250, 204, 21, 0.10);
}

.bt-store-synergy-bonus[b-wxmcl1qgqz] {
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.bt-store-synergy-bonus.bt-synergy--crit[b-wxmcl1qgqz]     { color: #f87171; }
.bt-store-synergy-bonus.bt-synergy--vitality[b-wxmcl1qgqz] { color: #4ade80; }
.bt-store-synergy-bonus.bt-synergy--speed[b-wxmcl1qgqz]    { color: #fbbf24; }

.bt-store-empty[b-wxmcl1qgqz] {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 0;
    margin: 0;
}

/* ---- Responsive: stack on small screens ---- */

@media (max-width: 640px) {
    .bt-store-shell[b-wxmcl1qgqz] {
        grid-template-columns: 1fr;
    }
    .bt-store-sidebar[b-wxmcl1qgqz] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .bt-store-keeper-title[b-wxmcl1qgqz] {
        width: auto;
        padding: 0.4rem 0.8rem;
        border-bottom: none;
        border-radius: 0.4rem;
    }
    .bt-store-keeper-stage[b-wxmcl1qgqz] {
        flex-direction: row;
        min-height: auto;
        padding: 0.6rem;
        gap: 0.6rem;
        justify-content: center;
    }
    .bt-store-keeper-glow[b-wxmcl1qgqz] { display: none; }
    .bt-store-keeper-sprite[b-wxmcl1qgqz] { font-size: 3.6rem; }
    .bt-store-keeper-bubble[b-wxmcl1qgqz] {
        margin-bottom: 0;
        max-width: none;
        flex: 1;
    }
    .bt-store-keeper-tail[b-wxmcl1qgqz] { display: none; }
    .bt-store-counter[b-wxmcl1qgqz] { display: none; }
    .bt-store-leave[b-wxmcl1qgqz] {
        border-top: none;
        width: auto;
        flex: 1;
        border-radius: 0.5rem;
        border: 1px solid rgba(251, 191, 36, 0.12);
    }
    .bt-store-row-icon[b-wxmcl1qgqz] { font-size: 1.4rem; }
}

/* ?? Route map ??????????????????????????????????????????? */

/* Responsive */
@media (max-width: 520px) {
    .bt-route[b-wxmcl1qgqz] { padding: 0.35rem 0.4rem 0.25rem; }
    .bt-route-stop[b-wxmcl1qgqz] { min-width: 30px; }
    .bt-route-node[b-wxmcl1qgqz] { width: 22px; height: 22px; }
    .bt-route-node--active[b-wxmcl1qgqz] { width: 28px; height: 28px; }
    .bt-route-node--landmark[b-wxmcl1qgqz] { width: 28px; height: 28px; }
    .bt-route-stop + .bt-route-stop > .bt-route-connector[b-wxmcl1qgqz] {
        right: calc(50% + 11px);
        left: calc(-50% + 11px);
        top: 11px;
    }
    .bt-route-label[b-wxmcl1qgqz] { font-size: 0.45rem; }
}

/* ?? Bottom bar responsive ??????????????????????????????????????? */

@media (max-width: 520px) {
    .bt-bottom-bar[b-wxmcl1qgqz] {
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
    }
    .bt-stats-panel[b-wxmcl1qgqz] {
        justify-content: center;
    }
    .bt-inventory[b-wxmcl1qgqz] {
        justify-content: center;
    }
    .bt-stat[b-wxmcl1qgqz] {
        padding: 0.15rem 0.35rem;
    }
    .bt-stat-icon[b-wxmcl1qgqz] { font-size: 0.65rem; }
    .bt-stat-value[b-wxmcl1qgqz] { font-size: 0.65rem; }
}

/* ================================================================
   ?? ENCOUNTER MODIFIER BADGE
   ================================================================ */

.bt-modifier-badge[b-wxmcl1qgqz] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 0.12rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(245, 158, 11, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.30);
    color: #fbbf24;
    white-space: nowrap;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.08);
    animation: bt-modifier-in-b-wxmcl1qgqz 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-modifier-badge--small[b-wxmcl1qgqz] {
    display: flex;
    justify-content: center;
    margin: 0.25rem auto 0;
    padding: 0.08rem 0.4rem;
    font-size: 0.52rem;
    gap: 0.15rem;
}

@keyframes bt-modifier-in-b-wxmcl1qgqz {
    0% { transform: scale(0.6) translateY(-4px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ================================================================
   ?? ENEMY INTENT
   ================================================================ */

.bt-intent[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.58rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: opacity 0.3s, border-color 0.3s;
}

.bt-intent-icon[b-wxmcl1qgqz] {
    font-size: 0.68rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.bt-intent-text[b-wxmcl1qgqz] {
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ================================================================
   ?? QUESTION MODE BADGE
   ================================================================ */

.bt-qmode-badge[b-wxmcl1qgqz] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.3rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    animation: bt-qmode-flash-b-wxmcl1qgqz 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-qmode--speedduel[b-wxmcl1qgqz] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(245, 158, 11, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.40);
    color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.10);
}

.bt-qmode--reversal[b-wxmcl1qgqz] {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.18), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(129, 140, 248, 0.40);
    color: #a5b4fc;
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.10);
}

@keyframes bt-qmode-flash-b-wxmcl1qgqz {
    0% { transform: scale(0.5) translateY(6px); opacity: 0; }
    60% { transform: scale(1.1) translateY(-1px); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ================================================================
   ?? BOSS PHASE BADGES + EFFECTS
   ================================================================ */

.bt-phase-badge[b-wxmcl1qgqz] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    animation: bt-phase-appear-b-wxmcl1qgqz 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-phase-badge--2[b-wxmcl1qgqz] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(249, 115, 22, 0.10));
    border: 1px solid rgba(239, 68, 68, 0.40);
    color: #f87171;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.15);
}

.bt-phase-badge--3[b-wxmcl1qgqz] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(236, 72, 153, 0.10));
    border: 1px solid rgba(168, 85, 247, 0.40);
    color: #c084fc;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.15);
}

@keyframes bt-phase-appear-b-wxmcl1qgqz {
    0% { transform: scale(0.3) translateX(-8px); opacity: 0; }
    60% { transform: scale(1.15) translateX(1px); }
    100% { transform: scale(1) translateX(0); opacity: 1; }
}

/* Boss sprite phase effects */
.bt-fighter--phase2 .bt-fighter-sprite[b-wxmcl1qgqz] {
    filter: brightness(1.12) saturate(1.25);
    animation: bt-boss-enrage-b-wxmcl1qgqz 1s ease-in-out infinite alternate;
}

.bt-fighter--phase3 .bt-fighter-sprite[b-wxmcl1qgqz] {
    filter: brightness(1.25) saturate(1.4) hue-rotate(-8deg);
    animation: bt-boss-desperate-b-wxmcl1qgqz 0.35s ease-in-out infinite alternate;
}

@keyframes bt-boss-enrage-b-wxmcl1qgqz {
    0% { transform: scale(1) translateY(0); }
    100% { transform: scale(1.03) translateY(-1px); }
}

@keyframes bt-boss-desperate-b-wxmcl1qgqz {
    0% { transform: scale(1) rotate(-0.8deg) translateX(-1px); }
    100% { transform: scale(1.05) rotate(0.8deg) translateX(1px); }
}

/* Boss bar phase tint */
.bt-boss-bar--phase2 .bt-boss-hp-fill[b-wxmcl1qgqz] {
    background: linear-gradient(90deg, #ef4444, #f97316);
    box-shadow: inset 0 0 8px rgba(249, 115, 22, 0.3);
}

.bt-boss-bar--phase3 .bt-boss-hp-fill[b-wxmcl1qgqz] {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    box-shadow: inset 0 0 8px rgba(168, 85, 247, 0.3);
}

.bt-boss-bar--phase2 .bt-boss-hp[b-wxmcl1qgqz] {
    border-color: rgba(239, 68, 68, 0.25);
}

.bt-boss-bar--phase3 .bt-boss-hp[b-wxmcl1qgqz] {
    border-color: rgba(168, 85, 247, 0.25);
}

/* ================================================================
   ?? DAILY MODIFIER BANNER (intro screen)
   ================================================================ */

.bt-daily-banner[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    margin: 0.6rem 0;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(251, 191, 36, 0.20);
    border-radius: 0.6rem;
    text-align: left;
    animation: bt-daily-in-b-wxmcl1qgqz 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bt-daily-icon[b-wxmcl1qgqz] {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.3));
}

.bt-daily-info[b-wxmcl1qgqz] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.bt-daily-title[b-wxmcl1qgqz] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.03em;
}

.bt-daily-desc[b-wxmcl1qgqz] {
    font-size: 0.64rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

@keyframes bt-daily-in-b-wxmcl1qgqz {
    0% { transform: translateY(8px) scale(0.95); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ================================================================
   ?? DAILY CHIP (in-game score bar)
   ================================================================ */

.bt-daily-chip[b-wxmcl1qgqz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.15);
    cursor: help;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bt-daily-chip:hover[b-wxmcl1qgqz] {
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.15);
}

/* ================================================================
   ?? REVENGE BANNER (intro screen)
   ================================================================ */

.bt-revenge-banner[b-wxmcl1qgqz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin: 0.3rem 0;
    padding: 0.5rem 0.7rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(185, 28, 28, 0.04));
    border: 1px solid rgba(239, 68, 68, 0.20);
    border-radius: 0.5rem;
    animation:
        bt-daily-in-b-wxmcl1qgqz 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
        bt-revenge-glow-b-wxmcl1qgqz 2.5s ease-in-out 0.6s infinite;
}

.bt-revenge-banner-icon[b-wxmcl1qgqz] {
    font-size: 1.1rem;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.3));
}

.bt-revenge-banner-text[b-wxmcl1qgqz] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #f87171;
}

@keyframes bt-revenge-glow-b-wxmcl1qgqz {
    0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.10); }
}

/* ================================================================
   ?? REVENGE BADGE (boss bar)
   ================================================================ */

.bt-revenge-badge[b-wxmcl1qgqz] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(185, 28, 28, 0.10));
    border: 1px solid rgba(239, 68, 68, 0.40);
    color: #f87171;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.12);
    animation:
        bt-phase-appear-b-wxmcl1qgqz 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        bt-revenge-badge-pulse-b-wxmcl1qgqz 1.8s ease-in-out 0.6s infinite;
}

@keyframes bt-revenge-badge-pulse-b-wxmcl1qgqz {
    0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.12); }
    50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.30); }
}
/* /Pages/ChapterMap.razor.rz.scp.css */
/* ?? Page ?????????????????????????????????????????? */

.map-page[b-oyb5rka2t7] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--topbar-height) - 3.5rem);
    min-height: calc(100svh - var(--topbar-height) - 3.5rem);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow-x: hidden;
}

/* ?? Cascade entrance ????????????????????????????? */

.map-cascade[b-oyb5rka2t7] {
    opacity: 0;
    animation: map-cascade-in-b-oyb5rka2t7 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
    will-change: transform, opacity, filter;
}

.gmap-wrapper[b-oyb5rka2t7] {
    opacity: 0;
}

.gmap-wrapper.gmap-ready[b-oyb5rka2t7] {
    opacity: 1;
    transition: opacity 180ms ease;
}

@keyframes map-cascade-in-b-oyb5rka2t7 {
    from {
        opacity: 0;
        transform: translateY(16px) scaleY(0.88) scaleX(1.04);
        filter: blur(4px);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scaleY(1.03) scaleX(0.99);
        filter: blur(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.map-empty[b-oyb5rka2t7] {
    text-align: center;
    color: var(--text-muted);
    padding: 4rem 1rem;
}

/* ?? Header ???????????????????????????????????????? */

.map-header[b-oyb5rka2t7] {
    padding: 0 1.5rem 1rem;
    flex-shrink: 0;
    width: 100%;
}

.map-back[b-oyb5rka2t7] {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 0.4rem;
    transition: color 0.15s ease;
}

.map-back:hover[b-oyb5rka2t7] {
    color: var(--text-primary);
    text-decoration: none;
}

.map-header-row[b-oyb5rka2t7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.map-header-info[b-oyb5rka2t7] {
    flex: 1;
    min-width: 0;
}

.map-title[b-oyb5rka2t7] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.1rem;
}

.map-desc[b-oyb5rka2t7] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.map-bar-label[b-oyb5rka2t7] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.map-bar[b-oyb5rka2t7] {
    height: 3px;
    border-radius: 2px;
    background: var(--bg-elevated);
    overflow: hidden;
}

.map-bar-fill[b-oyb5rka2t7] {
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    transition: width 0.5s ease;
}

/* ?? Level list ???????????????????????????????????? */

.level-list[b-oyb5rka2t7] {
    flex: 1;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ?? Level card ???????????????????????????????????? */

.level-card[b-oyb5rka2t7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 1rem;
    background: var(--bg-surface);
    cursor: pointer;
    text-align: left;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%;
}

.level-card:hover:not(:disabled)[b-oyb5rka2t7] {
    border-color: var(--accent);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px var(--accent-glow);
}

.level-card:active:not(:disabled)[b-oyb5rka2t7] {
    transform: translateY(1px) scaleY(0.97) scaleX(1.01);
    transition-duration: 0.06s;
}

/* states */

.level-card.completed[b-oyb5rka2t7] {
    border-color: var(--success);
    background: var(--success-subtle);
}

.level-card.completed:hover:not(:disabled)[b-oyb5rka2t7] {
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2);
}

.level-card.current[b-oyb5rka2t7] {
    border-color: var(--accent);
    background: var(--accent-subtle);
    box-shadow:
        0 0 20px var(--accent-glow),
        0 0 48px var(--accent-subtle);
    animation: card-pulse-b-oyb5rka2t7 2.5s ease-in-out infinite;
}

.level-card.current.map-cascade[b-oyb5rka2t7] {
    animation:
        map-cascade-in-b-oyb5rka2t7 260ms cubic-bezier(0.22, 1, 0.36, 1) both,
        card-pulse-b-oyb5rka2t7 2.5s ease-in-out 260ms infinite;
}

.level-card.locked[b-oyb5rka2t7] {
    opacity: 0.35;
    cursor: not-allowed;
}

.level-card.locked.map-cascade[b-oyb5rka2t7] {
    animation: map-cascade-in-locked 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes card-pulse-b-oyb5rka2t7 {
    0%, 100% { box-shadow: 0 0 16px var(--accent-subtle), 0 0 40px var(--accent-subtle); transform: scaleY(1) scaleX(1); }
    25%      { transform: scaleY(1.01) scaleX(0.995); }
    50%      { box-shadow: 0 0 32px var(--accent-glow),  0 0 64px var(--accent-subtle); transform: scaleY(0.995) scaleX(1.01); }
    75%      { transform: scaleY(1.005) scaleX(0.998); }
}

/* ?? Dot ??????????????????????????????????????????? */

.lc-dot[b-oyb5rka2t7] {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.9rem;
    background: var(--bg-elevated);
    border: 2px solid var(--border-color);
}

.level-card.completed .lc-dot[b-oyb5rka2t7] {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.level-card.current .lc-dot[b-oyb5rka2t7] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 12px var(--accent-glow);
}

/* ?? Info text ????????????????????????????????????? */

.lc-info[b-oyb5rka2t7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lc-name[b-oyb5rka2t7] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.lc-desc[b-oyb5rka2t7] {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-stars[b-oyb5rka2t7] {
    font-size: 0.7rem;
    color: #f59e0b;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.lc-locked-label[b-oyb5rka2t7] {
    font-size: 0.68rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ?? Responsive ???????????????????????????????????? */

@media (max-width: 640px) {
    .map-page[b-oyb5rka2t7] {
        min-height: calc(100dvh - (var(--phonebar-height, 3rem) * 2) - 0.5rem);
    }

    .map-header[b-oyb5rka2t7] {
        padding: 0 0.58rem 0.58rem;
    }

    .map-back-row[b-oyb5rka2t7] {
        margin-bottom: 0.28rem;
    }

    .map-back[b-oyb5rka2t7],
    .map-view-toggle[b-oyb5rka2t7] {
        font-size: 0.64rem;
    }

    .map-view-toggle[b-oyb5rka2t7] {
        min-height: 1.78rem;
        padding: 0.28rem 0.5rem;
        border-radius: 0.42rem;
    }

    .map-header-row[b-oyb5rka2t7] {
        gap: 0.55rem;
        margin-bottom: 0.34rem;
    }

    .map-title[b-oyb5rka2t7] {
        font-size: 0.98rem;
        line-height: 1.12;
        margin-bottom: 0.04rem;
    }

    .map-desc[b-oyb5rka2t7] {
        font-size: 0.64rem;
        line-height: 1.35;
    }

    .map-bar-label[b-oyb5rka2t7] {
        font-size: 0.62rem;
    }

    .map-bar[b-oyb5rka2t7] {
        height: 2px;
    }

    .level-list[b-oyb5rka2t7] {
        max-width: none;
        gap: 0.42rem;
        padding: 0.28rem 0.5rem calc(var(--phonebar-height, 3rem) + 0.7rem);
    }

    .level-card[b-oyb5rka2t7] {
        gap: 0.54rem;
        padding: 0.58rem 0.64rem;
        border-width: 1px;
        border-radius: 0.66rem;
    }

    .lc-dot[b-oyb5rka2t7] {
        width: 1.72rem;
        height: 1.72rem;
        border-width: 1.5px;
        font-size: 0.66rem;
    }

    .lc-info[b-oyb5rka2t7] {
        gap: 0.06rem;
    }

    .lc-name[b-oyb5rka2t7] {
        font-size: 0.72rem;
        line-height: 1.15;
    }

    .lc-desc[b-oyb5rka2t7] {
        font-size: 0.6rem;
        line-height: 1.28;
    }

    .lc-stars[b-oyb5rka2t7],
    .lc-locked-label[b-oyb5rka2t7] {
        font-size: 0.58rem;
    }

    .gmap-wrapper[b-oyb5rka2t7] {
        grid-template-columns: 1fr;
        align-items: stretch;
        min-height: 0;
    }

    .gmap-scroll[b-oyb5rka2t7] {
        align-items: center;
        min-height: 15.25rem;
        scrollbar-width: none;
    }

    .gmap-scroll[b-oyb5rka2t7]::-webkit-scrollbar {
        display: none;
    }

    .gmap-canvas[b-oyb5rka2t7] {
        margin-left: 48vw;
        margin-right: 48vw;
    }

    .gmap-path[b-oyb5rka2t7] {
        stroke-width: 2.1;
    }

    .gmap-path.path-done[b-oyb5rka2t7] {
        stroke-width: 2.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .level-card.current[b-oyb5rka2t7] {
        animation: none;
    }
}

/* ========== View toggle ============================== */

.map-back-row[b-oyb5rka2t7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.map-back-row .map-back[b-oyb5rka2t7] {
    margin-bottom: 0;
}

.map-view-toggle[b-oyb5rka2t7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.map-view-toggle:hover[b-oyb5rka2t7] {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* ========== Gamified map ============================= */

.gmap-wrapper[b-oyb5rka2t7] {
    flex: 1;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    overflow: hidden;
}

.gmap-scroll[b-oyb5rka2t7] {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.gmap-scroll[b-oyb5rka2t7]::-webkit-scrollbar {
    height: 4px;
}

.gmap-scroll[b-oyb5rka2t7]::-webkit-scrollbar-track {
    background: transparent;
}

.gmap-scroll[b-oyb5rka2t7]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.gmap-canvas[b-oyb5rka2t7] {
    position: relative;
    flex-shrink: 0;
    margin-left: 50vw;
    margin-right: 50vw;
}

/* ========== SVG paths ================================ */

.gmap-svg[b-oyb5rka2t7] {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 1;
}

.gmap-path[b-oyb5rka2t7] {
    stroke-width: 3;
    stroke-linecap: round;
}

.gmap-path.path-done[b-oyb5rka2t7] {
    stroke: var(--success);
    opacity: 0.7;
    stroke-width: 3.5;
    stroke-dasharray: 8 5;
    animation: path-flow-b-oyb5rka2t7 1.2s linear infinite;
}

.gmap-path.path-active[b-oyb5rka2t7] {
    stroke: var(--accent);
    opacity: 0.6;
    stroke-dasharray: 8 5;
    animation: path-march-b-oyb5rka2t7 0.8s linear infinite;
}

.gmap-path.path-locked[b-oyb5rka2t7] {
    stroke: var(--text-muted);
    opacity: 0.12;
    stroke-dasharray: 4 8;
    animation: path-drift-b-oyb5rka2t7 3s ease-in-out infinite;
}

@keyframes path-march-b-oyb5rka2t7 {
    to { stroke-dashoffset: -13; }
}

@keyframes path-flow-b-oyb5rka2t7 {
    to { stroke-dashoffset: -13; }
}

@keyframes path-drift-b-oyb5rka2t7 {
    0%, 100% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: -6; }
}

/* ========== Map nodes ================================ */

.gmap-node[b-oyb5rka2t7] {
    position: absolute;
    width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}

.gmap-node:hover:not(:disabled)[b-oyb5rka2t7] {
    transform: scale(1.12);
    filter: brightness(1.12);
}

.gmap-node:active:not(:disabled)[b-oyb5rka2t7] {
    transform: scaleY(0.9) scaleX(1.06);
    transition-duration: 0.06s;
}

.gmap-node.locked[b-oyb5rka2t7] {
    cursor: not-allowed;
    opacity: 0.35;
}

/* — Circle — */

.gn-circle[b-oyb5rka2t7] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 3px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
}

.gmap-node.completed .gn-circle[b-oyb5rka2t7] {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.35), 0 2px 10px rgba(0, 0, 0, 0.2);
}

.gmap-node.current .gn-circle[b-oyb5rka2t7] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 20px var(--accent-glow), 0 0 44px var(--accent-subtle);
    animation: gnode-pulse-b-oyb5rka2t7 2.5s ease-in-out infinite;
}

/* — Name — */

.gn-name[b-oyb5rka2t7] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gmap-node.current .gn-name[b-oyb5rka2t7] {
    color: var(--accent);
}

.gmap-node.completed .gn-name[b-oyb5rka2t7] {
    color: var(--success);
}

/* — Stars — */

.gn-stars[b-oyb5rka2t7] {
    font-size: 0.62rem;
    color: #f59e0b;
    letter-spacing: 0.04em;
}

/* ========== Node entrance animation ================== */

.gmap-node-enter[b-oyb5rka2t7] {
    opacity: 0;
    animation: gnode-appear-b-oyb5rka2t7 400ms cubic-bezier(0.34, 1.8, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes gnode-appear-b-oyb5rka2t7 {
    from {
        opacity: 0;
        transform: scale(0.35) rotate(-8deg);
        filter: blur(5px);
    }
    55% {
        opacity: 1;
        transform: scale(1.12) rotate(2deg);
        filter: blur(0);
    }
    75% {
        transform: scale(0.97) rotate(-0.5deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes gnode-pulse-b-oyb5rka2t7 {
    0%, 100% { box-shadow: 0 0 16px var(--accent-subtle), 0 0 36px var(--accent-subtle); transform: scale(1); }
    50%      { box-shadow: 0 0 32px var(--accent-glow), 0 0 60px var(--accent-subtle); transform: scale(1.04); }
}

/* ========== Scroll arrows ============================ */

.gmap-arrow[b-oyb5rka2t7] {
    flex-shrink: 0;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0.7;
    margin: 0 0.5rem;
}

.gmap-arrow:hover[b-oyb5rka2t7] {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent);
    opacity: 1;
}

.gmap-arrow-left[b-oyb5rka2t7] {
    justify-self: start;
}

.gmap-arrow-right[b-oyb5rka2t7] {
    justify-self: end;
}

/* ========== Map responsive =========================== */

@media (max-width: 640px) {
    .gmap-arrow[b-oyb5rka2t7] {
        position: absolute;
        top: calc(var(--phonebar-height, 3rem) + 5.2rem);
        width: 1.55rem;
        height: 1.55rem;
        margin: 0;
        font-size: 0.82rem;
        opacity: 0.58;
    }

    .gmap-arrow-left[b-oyb5rka2t7] {
        left: 0.4rem;
    }

    .gmap-arrow-right[b-oyb5rka2t7] {
        right: 0.4rem;
    }

    .gmap-node[b-oyb5rka2t7] {
        width: 78px;
        gap: 0.2rem;
    }

    .gn-circle[b-oyb5rka2t7] {
        width: 42px;
        height: 42px;
        border-width: 2px;
        font-size: 0.74rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    }

    .gn-name[b-oyb5rka2t7] {
        font-size: 0.58rem;
        line-height: 1.15;
    }

    .gn-stars[b-oyb5rka2t7] {
        font-size: 0.52rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gmap-node.current .gn-circle[b-oyb5rka2t7],
    .gmap-path.path-active[b-oyb5rka2t7],
    .gmap-path.path-done[b-oyb5rka2t7],
    .gmap-path.path-locked[b-oyb5rka2t7] {
        animation: none;
    }

    .gmap-node-enter[b-oyb5rka2t7] {
        animation: none;
        opacity: 1;
    }
}



/* /Pages/CommunityLibrary.razor.rz.scp.css */
.community-library-page[b-t0dbpw1wbl] {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 0 0 3.5rem;
    display: grid;
    gap: 1.4rem;
}

.community-library-hero[b-t0dbpw1wbl],
.community-library-panel[b-t0dbpw1wbl] {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.12));
    border-radius: 1.6rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 36%),
        linear-gradient(180deg, rgba(18, 16, 28, 0.94) 0%, rgba(13, 11, 20, 0.96) 100%);
    box-shadow: 0 18px 44px rgba(8, 6, 14, 0.28);
}

.community-library-hero[b-t0dbpw1wbl] {
    padding: clamp(1.5rem, 4vw, 2.6rem);
    display: grid;
    gap: 1rem;
}

.community-library-kicker[b-t0dbpw1wbl],
.community-library-eyebrow[b-t0dbpw1wbl] {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--accent) 56%, white);
}

.community-library-hero h1[b-t0dbpw1wbl],
.community-library-panel-head h2[b-t0dbpw1wbl],
.community-library-empty h3[b-t0dbpw1wbl] {
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -0.04em;
}

.community-library-hero h1[b-t0dbpw1wbl] {
    max-width: 11ch;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 0.92;
}

.community-library-hero p[b-t0dbpw1wbl],
.community-library-panel-head p[b-t0dbpw1wbl],
.community-library-card p[b-t0dbpw1wbl],
.community-library-my-post-copy p[b-t0dbpw1wbl],
.community-library-empty p[b-t0dbpw1wbl] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.72;
}

.community-library-hero p[b-t0dbpw1wbl] {
    max-width: 48rem;
    font-size: 1rem;
}

.community-library-hero-actions[b-t0dbpw1wbl],
.community-library-my-post-actions[b-t0dbpw1wbl],
.community-library-load-more[b-t0dbpw1wbl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.community-library-primary[b-t0dbpw1wbl],
.community-library-secondary[b-t0dbpw1wbl],
.community-library-search-button[b-t0dbpw1wbl],
.community-library-chip-link[b-t0dbpw1wbl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.community-library-primary[b-t0dbpw1wbl],
.community-library-search-button[b-t0dbpw1wbl],
.community-library-chip-link--accent[b-t0dbpw1wbl] {
    border: 1px solid color-mix(in srgb, var(--accent) 34%, white);
    background: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.05));
    color: var(--text-primary);
}

.community-library-secondary[b-t0dbpw1wbl],
.community-library-chip-link[b-t0dbpw1wbl] {
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.14));
    background: rgba(255, 255, 255, 0.02);
    color: color-mix(in srgb, var(--text-secondary) 92%, white);
}

.community-library-primary:hover[b-t0dbpw1wbl],
.community-library-secondary:hover[b-t0dbpw1wbl],
.community-library-search-button:hover[b-t0dbpw1wbl],
.community-library-chip-link:hover[b-t0dbpw1wbl] {
    transform: translateY(-1px);
    color: var(--text-primary);
}

.community-library-panel[b-t0dbpw1wbl] {
    padding: 1.2rem;
    display: grid;
    gap: 1rem;
}

.community-library-panel-head[b-t0dbpw1wbl] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}

.community-library-panel-head h2[b-t0dbpw1wbl] {
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1;
}

.community-library-panel-head p[b-t0dbpw1wbl] {
    max-width: 34rem;
    font-size: 0.9rem;
}

.community-library-search[b-t0dbpw1wbl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.community-library-search-label[b-t0dbpw1wbl] {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--text-muted) 90%, white);
}

.community-library-search-input[b-t0dbpw1wbl] {
    min-height: 3rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.16));
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font: inherit;
}

.community-library-search-input[b-t0dbpw1wbl]::placeholder {
    color: color-mix(in srgb, var(--text-muted) 76%, white);
}

.community-library-feedback[b-t0dbpw1wbl] {
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    color: color-mix(in srgb, var(--text-secondary) 94%, white);
    font-size: 0.9rem;
}

.community-library-grid[b-t0dbpw1wbl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.community-library-card[b-t0dbpw1wbl] {
    min-height: 100%;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.12));
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.012) 100%);
}

.community-library-card-link[b-t0dbpw1wbl] {
    min-height: 100%;
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.community-library-card-link:hover[b-t0dbpw1wbl] {
    transform: translateY(-2px);
}

.community-library-card h3[b-t0dbpw1wbl],
.community-library-my-post-title[b-t0dbpw1wbl] {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.community-library-card h3[b-t0dbpw1wbl] {
    font-size: 1.12rem;
}

.community-library-card p[b-t0dbpw1wbl],
.community-library-my-post-copy p[b-t0dbpw1wbl] {
    font-size: 0.9rem;
}

.community-library-card-head[b-t0dbpw1wbl],
.community-library-my-post-meta[b-t0dbpw1wbl] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.community-library-author[b-t0dbpw1wbl] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.community-library-author-avatar[b-t0dbpw1wbl] {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.9rem;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.14));
    background: color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.04));
}

.community-library-author-avatar--placeholder[b-t0dbpw1wbl] {
    display: grid;
    place-items: center;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 800;
}

.community-library-author-copy[b-t0dbpw1wbl] {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.community-library-author-copy strong[b-t0dbpw1wbl],
.community-library-read-time[b-t0dbpw1wbl] {
    font-size: 0.78rem;
    color: var(--text-primary);
}

.community-library-author-copy span[b-t0dbpw1wbl],
.community-library-read-time[b-t0dbpw1wbl],
.community-library-my-post-meta[b-t0dbpw1wbl] {
    color: color-mix(in srgb, var(--text-muted) 90%, white);
}

.community-library-read-time[b-t0dbpw1wbl],
.community-library-my-post-meta[b-t0dbpw1wbl] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 800;
}

.community-library-my-posts[b-t0dbpw1wbl] {
    display: grid;
    gap: 0.85rem;
}

.community-library-my-post[b-t0dbpw1wbl] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.12));
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.02);
}

.community-library-my-post-copy[b-t0dbpw1wbl] {
    display: grid;
    gap: 0.3rem;
}

.community-library-chip-link[b-t0dbpw1wbl] {
    min-height: 2.4rem;
    padding-inline: 0.85rem;
}

.community-library-load-more[b-t0dbpw1wbl] {
    justify-content: center;
    padding-top: 0.2rem;
}

.community-library-empty[b-t0dbpw1wbl] {
    padding: 1.4rem;
    border: 1px dashed color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.16));
    border-radius: 1.2rem;
    display: grid;
    gap: 0.75rem;
    justify-items: start;
}

.community-library-card--skeleton[b-t0dbpw1wbl] {
    min-height: 16rem;
    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(255, 255, 255, 0.06) 38%,
            rgba(255, 255, 255, 0.02) 70%);
    background-size: 220% 100%;
    animation: community-library-skeleton-b-t0dbpw1wbl 1.3s ease-in-out infinite;
}

@keyframes community-library-skeleton-b-t0dbpw1wbl {
    0% { background-position: 100% 0; }
    100% { background-position: -120% 0; }
}

@media (max-width: 980px) {
    .community-library-grid[b-t0dbpw1wbl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .community-library-panel-head[b-t0dbpw1wbl] {
        flex-direction: column;
        align-items: start;
    }
}

@media (max-width: 720px) {
    .community-library-page[b-t0dbpw1wbl] {
        gap: 0.72rem;
        padding-bottom: calc(var(--phonebar-height, 3rem) + 1rem);
    }

    .community-library-hero[b-t0dbpw1wbl],
    .community-library-panel[b-t0dbpw1wbl] {
        border-radius: 0.86rem;
    }

    .community-library-panel[b-t0dbpw1wbl] {
        gap: 0.62rem;
        padding: 0.72rem;
    }

    .community-library-hero[b-t0dbpw1wbl] {
        gap: 0.58rem;
        padding: 0.82rem 0.74rem 0.9rem;
    }

    .community-library-kicker[b-t0dbpw1wbl],
    .community-library-eyebrow[b-t0dbpw1wbl] {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }

    .community-library-hero h1[b-t0dbpw1wbl] {
        max-width: none;
        font-size: clamp(1.5rem, 8.4vw, 2rem);
        line-height: 1.02;
        letter-spacing: -0.02em;
    }

    .community-library-hero p[b-t0dbpw1wbl],
    .community-library-panel-head p[b-t0dbpw1wbl],
    .community-library-card p[b-t0dbpw1wbl],
    .community-library-my-post-copy p[b-t0dbpw1wbl],
    .community-library-empty p[b-t0dbpw1wbl] {
        font-size: 0.7rem;
        line-height: 1.42;
    }

    .community-library-hero-actions[b-t0dbpw1wbl],
    .community-library-my-post-actions[b-t0dbpw1wbl],
    .community-library-load-more[b-t0dbpw1wbl] {
        gap: 0.42rem;
    }

    .community-library-primary[b-t0dbpw1wbl],
    .community-library-secondary[b-t0dbpw1wbl],
    .community-library-search-button[b-t0dbpw1wbl],
    .community-library-chip-link[b-t0dbpw1wbl] {
        min-height: 2.08rem;
        padding: 0.46rem 0.64rem;
        border-radius: 0.68rem;
        font-size: 0.68rem;
    }

    .community-library-panel-head[b-t0dbpw1wbl] {
        gap: 0.42rem;
    }

    .community-library-panel-head h2[b-t0dbpw1wbl] {
        font-size: 1rem;
        letter-spacing: -0.015em;
    }

    .community-library-search[b-t0dbpw1wbl] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.46rem;
    }

    .community-library-search-label[b-t0dbpw1wbl] {
        font-size: 0.64rem;
    }

    .community-library-search-input[b-t0dbpw1wbl] {
        min-height: 2.2rem;
        padding: 0.52rem 0.62rem;
        border-radius: 0.62rem;
        font-size: 0.76rem;
    }

    .community-library-feedback[b-t0dbpw1wbl] {
        padding: 0.6rem 0.68rem;
        border-radius: 0.64rem;
        font-size: 0.72rem;
    }

    .community-library-grid[b-t0dbpw1wbl] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.52rem;
    }

    .community-library-card[b-t0dbpw1wbl] {
        border-radius: 0.74rem;
    }

    .community-library-card-link[b-t0dbpw1wbl] {
        gap: 0.45rem;
        padding: 0.62rem 0.66rem;
    }

    .community-library-card-head[b-t0dbpw1wbl],
    .community-library-my-post-meta[b-t0dbpw1wbl] {
        gap: 0.42rem;
    }

    .community-library-author[b-t0dbpw1wbl] {
        gap: 0.45rem;
    }

    .community-library-author-avatar[b-t0dbpw1wbl] {
        width: 1.92rem;
        height: 1.92rem;
        border-radius: 0.58rem;
    }

    .community-library-author-avatar--placeholder[b-t0dbpw1wbl] {
        font-size: 0.72rem;
    }

    .community-library-author-copy strong[b-t0dbpw1wbl],
    .community-library-read-time[b-t0dbpw1wbl] {
        font-size: 0.62rem;
    }

    .community-library-author-copy span[b-t0dbpw1wbl],
    .community-library-read-time[b-t0dbpw1wbl],
    .community-library-my-post-meta[b-t0dbpw1wbl] {
        font-size: 0.56rem;
        letter-spacing: 0.08em;
    }

    .community-library-card h3[b-t0dbpw1wbl],
    .community-library-my-post-title[b-t0dbpw1wbl] {
        font-size: 0.86rem;
        line-height: 1.12;
        letter-spacing: 0;
    }

    .community-library-my-post[b-t0dbpw1wbl] {
        align-items: start;
        flex-direction: column;
        gap: 0.52rem;
        padding: 0.64rem 0.68rem;
        border-radius: 0.74rem;
    }

    .community-library-my-posts[b-t0dbpw1wbl] {
        gap: 0.5rem;
    }

    .community-library-chip-link[b-t0dbpw1wbl] {
        min-height: 1.96rem;
        padding-inline: 0.58rem;
    }

    .community-library-empty[b-t0dbpw1wbl] {
        gap: 0.46rem;
        padding: 0.82rem;
        border-radius: 0.78rem;
    }

    .community-library-empty h3[b-t0dbpw1wbl] {
        font-size: 0.94rem;
        letter-spacing: 0;
    }

    .community-library-card--skeleton[b-t0dbpw1wbl] {
        min-height: 8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .community-library-primary[b-t0dbpw1wbl],
    .community-library-secondary[b-t0dbpw1wbl],
    .community-library-search-button[b-t0dbpw1wbl],
    .community-library-chip-link[b-t0dbpw1wbl],
    .community-library-card-link[b-t0dbpw1wbl],
    .community-library-card--skeleton[b-t0dbpw1wbl] {
        transition: none;
        animation: none;
    }
}
/* /Pages/CommunityLibraryEditor.razor.rz.scp.css */
.community-editor-page[b-piv8x5lmbv] {
    --community-editor-footer-height: 4.7rem;
    --community-editor-footer-reserve: calc(var(--community-editor-footer-height) + env(safe-area-inset-bottom, 0px));
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - var(--topbar-height));
    height: calc(100dvh - var(--topbar-height));
    padding: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.035), transparent 32%),
        linear-gradient(180deg, rgba(14, 12, 22, 0.98) 0%, rgba(10, 8, 16, 0.99) 100%);
}

.community-editor-surface[b-piv8x5lmbv],
.community-editor-state-card[b-piv8x5lmbv] {
    position: relative;
    height: 100%;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.community-editor-surface[b-piv8x5lmbv] {
    --community-editor-compose-width: clamp(27rem, 49vw, 52rem);
    --community-editor-divider-width: 0.9rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: var(--community-editor-footer-reserve);
    overflow: hidden;
}

.community-editor-state-card[b-piv8x5lmbv] {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: clamp(1.4rem, 3vw, 2.6rem);
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.9rem;
}

.community-editor-state-card h1[b-piv8x5lmbv] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.community-editor-state-card p[b-piv8x5lmbv] {
    color: var(--text-secondary);
}

.community-editor-return[b-piv8x5lmbv] {
    position: absolute;
    top: 1.15rem;
    left: 1.2rem;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-start;
    color: color-mix(in srgb, var(--accent) 35%, white);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: color 0.18s ease, opacity 0.18s ease;
}

.community-editor-return:hover[b-piv8x5lmbv],
.community-editor-return:focus-visible[b-piv8x5lmbv] {
    color: var(--text-primary);
    border-radius: 0.5rem;
    outline: none;
}

.community-editor-state-card p[b-piv8x5lmbv] {
    max-width: 42rem;
}

.community-editor-eyebrow[b-piv8x5lmbv],
.community-editor-card-kicker[b-piv8x5lmbv] {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--accent) 56%, white);
}

.community-editor-gate-actions[b-piv8x5lmbv],
.community-editor-footer-actions[b-piv8x5lmbv],
.community-editor-preview-head[b-piv8x5lmbv] {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
}

.community-editor-footer-copy[b-piv8x5lmbv] {
    display: flex;
    align-items: center;
    min-height: 2.7rem;
    min-width: 0;
    flex: 1 1 auto;
}

.community-editor-footer-copy strong[b-piv8x5lmbv] {
    display: block;
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-editor-preview-head strong[b-piv8x5lmbv] {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
    color: color-mix(in srgb, var(--text-muted) 90%, white);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 800;
}

.community-editor-format-toolbar[b-piv8x5lmbv] {
    position: sticky;
    top: 1rem;
    z-index: 6;
    width: min(100%, 52rem);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(40, 28, 48, 0.08);
    border-radius: 1rem;
    background: rgba(255, 249, 240, 0.94);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.78) inset;
    backdrop-filter: blur(10px);
}

.community-editor-format-button[b-piv8x5lmbv] {
    min-height: 2.2rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(55, 40, 64, 0.12);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.66);
    color: #2a2230;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.community-editor-format-button:disabled[b-piv8x5lmbv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.community-editor-format-button--italic[b-piv8x5lmbv] {
    font-style: italic;
}

.community-editor-format-button--underline[b-piv8x5lmbv] {
    text-decoration: underline;
    text-underline-offset: 0.12rem;
}

.community-editor-banner[b-piv8x5lmbv],
.community-editor-errors[b-piv8x5lmbv] {
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.12));
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
}

.community-editor-banner--muted[b-piv8x5lmbv] {
    background: rgba(255, 255, 255, 0.025);
}

.community-editor-errors[b-piv8x5lmbv] {
    display: grid;
    gap: 0.35rem;
}

.community-editor-errors p[b-piv8x5lmbv] {
    margin: 0;
    color: rgba(255, 202, 202, 0.96);
}

.community-editor-mobile-tabs[b-piv8x5lmbv] {
    display: none;
}

.community-editor-workspace[b-piv8x5lmbv] {
    min-height: 0;
    display: grid;
    grid-template-columns:
        minmax(0, var(--community-editor-compose-width))
        var(--community-editor-divider-width)
        minmax(0, 1fr);
    overflow: hidden;
}

.community-editor-pane[b-piv8x5lmbv] {
    min-width: 0;
    min-height: 0;
}

.community-editor-divider[b-piv8x5lmbv] {
    position: relative;
    min-height: 0;
    cursor: col-resize;
    touch-action: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        linear-gradient(180deg, rgba(10, 8, 16, 0), rgba(10, 8, 16, 0.22), rgba(10, 8, 16, 0));
}

.community-editor-divider[b-piv8x5lmbv]::before,
.community-editor-divider[b-piv8x5lmbv]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.community-editor-divider[b-piv8x5lmbv]::before {
    width: 2px;
    height: min(100%, 9rem);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 16px rgba(255, 192, 225, 0.12);
}

.community-editor-divider[b-piv8x5lmbv]::after {
    width: 0.34rem;
    height: 3.5rem;
    border-radius: 999px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0.09rem, transparent 0.1rem);
    background-size: 100% 0.55rem;
    background-repeat: repeat-y;
    opacity: 0.72;
}

.community-editor-divider:hover[b-piv8x5lmbv],
.community-editor-divider:focus-visible[b-piv8x5lmbv],
.community-editor-divider.is-dragging[b-piv8x5lmbv] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        linear-gradient(180deg, rgba(255, 196, 224, 0.08), rgba(255, 196, 224, 0.18), rgba(255, 196, 224, 0.08));
}

.community-editor-divider:focus-visible[b-piv8x5lmbv] {
    outline: none;
}

.community-editor-pane--preview[b-piv8x5lmbv] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0));
}

.community-editor-pane-inner--compose[b-piv8x5lmbv] {
    height: 100%;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
}

.community-editor-pane-inner--preview[b-piv8x5lmbv] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.community-editor-document-shell[b-piv8x5lmbv] {
    min-height: 100%;
    padding: clamp(1.2rem, 2vw, 2rem);
    display: grid;
    gap: 1rem;
}

.community-editor-shell-feedback[b-piv8x5lmbv] {
    width: min(100%, 52rem);
    margin: 0 auto;
    display: grid;
    gap: 0.65rem;
}

.community-editor-document[b-piv8x5lmbv] {
    width: min(100%, 52rem);
    margin: 0 auto;
    padding: clamp(1.6rem, 3vw, 2.8rem);
    display: grid;
    gap: 1.45rem;
    border: 1px solid rgba(22, 18, 30, 0.08);
    border-radius: 1.35rem;
    background:
        linear-gradient(180deg, rgba(255, 252, 246, 0.985), rgba(248, 243, 235, 0.97)),
        rgba(255, 255, 255, 0.98);
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.22),
        0 2px 0 rgba(255, 255, 255, 0.72) inset;
    color: #1d1820;
}

.community-editor-document-topline[b-piv8x5lmbv] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.1rem;
}

.community-editor-document-topline-copy[b-piv8x5lmbv] {
    min-width: 0;
    flex: 1 1 auto;
}

.community-editor-document-recovery[b-piv8x5lmbv],
.community-editor-document-topline-meta[b-piv8x5lmbv] {
    color: rgba(73, 61, 84, 0.56);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.community-editor-document-recovery[b-piv8x5lmbv] {
    display: block;
    line-height: 1.45;
}

.community-editor-document-topline-meta[b-piv8x5lmbv] {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.8rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.community-editor-document-field[b-piv8x5lmbv] {
    display: grid;
    gap: 0.55rem;
}

.community-editor-document-label[b-piv8x5lmbv] {
    color: rgba(59, 47, 67, 0.72);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.community-editor-title-input[b-piv8x5lmbv] {
    width: 100%;
    min-height: 3.8rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #1f1823;
    font: inherit;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.05em;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    field-sizing: content;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.community-editor-title-input[b-piv8x5lmbv]::placeholder {
    color: rgba(73, 61, 84, 0.38);
}

.community-editor-title-input:focus[b-piv8x5lmbv] {
    outline: none;
}

.community-editor-document-divider[b-piv8x5lmbv] {
    height: 1px;
    background: linear-gradient(90deg, rgba(39, 28, 46, 0.12), rgba(39, 28, 46, 0.02));
}

.community-editor-preview-head[b-piv8x5lmbv] {
    justify-content: space-between;
    padding: 1.15rem 1.5rem 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
}

.community-editor-preview-surface[b-piv8x5lmbv] {
    min-height: 0;
    overflow: auto;
    padding: 0.95rem clamp(1rem, 1.8vw, 1.6rem) 1.75rem;
    scrollbar-gutter: stable;
}

.community-editor-footer[b-piv8x5lmbv] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: flex;
    justify-content: center;
    padding: 0 1.5rem env(safe-area-inset-bottom, 0px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(18, 16, 28, 0.86), rgba(10, 9, 18, 0.94));
    backdrop-filter: blur(12px);
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
}

.community-editor-footer-bar[b-piv8x5lmbv] {
    width: 100%;
    min-height: var(--community-editor-footer-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    pointer-events: auto;
}

.community-editor-footer-actions[b-piv8x5lmbv] {
    flex-wrap: nowrap;
    justify-content: end;
    flex: 0 0 auto;
}

.community-editor-footer-status[b-piv8x5lmbv] {
    display: block;
    color: color-mix(in srgb, var(--text-muted) 92%, white);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-editor-footer-status--error[b-piv8x5lmbv] {
    color: rgba(255, 202, 202, 0.96);
}

.community-editor-primary[b-piv8x5lmbv],
.community-editor-secondary[b-piv8x5lmbv],
.community-editor-tab[b-piv8x5lmbv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.community-editor-primary[b-piv8x5lmbv] {
    border: 1px solid color-mix(in srgb, var(--accent) 34%, white);
    background: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.05));
    color: var(--text-primary);
}

.community-editor-secondary[b-piv8x5lmbv],
.community-editor-tab[b-piv8x5lmbv] {
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.02);
    color: color-mix(in srgb, var(--text-secondary) 92%, white);
}

.community-editor-primary:hover[b-piv8x5lmbv],
.community-editor-secondary:hover[b-piv8x5lmbv],
.community-editor-tab:hover[b-piv8x5lmbv] {
    transform: translateY(-1px);
    color: var(--text-primary);
}

.community-editor-primary:disabled[b-piv8x5lmbv],
.community-editor-secondary:disabled[b-piv8x5lmbv] {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
}

.community-editor-secondary--danger[b-piv8x5lmbv] {
    border-color: rgba(255, 108, 108, 0.22);
    color: rgba(255, 184, 184, 0.96);
}

.community-editor-tab.is-active[b-piv8x5lmbv] {
    border-color: color-mix(in srgb, var(--accent) 34%, white);
    background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
}

@media (max-width: 820px) {
    .community-editor-page[b-piv8x5lmbv] {
        min-height: calc(100vh - var(--topbar-height));
        height: calc(100dvh - var(--topbar-height));
        padding: 0;
        overflow: hidden;
    }

    .community-editor-surface[b-piv8x5lmbv] {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .community-editor-mobile-tabs[b-piv8x5lmbv] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
        padding: 3.9rem 1rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
    }

    .community-editor-workspace[b-piv8x5lmbv] {
        display: block;
        min-height: 0;
        overflow: auto;
        padding-bottom: 1rem;
        scrollbar-gutter: stable;
    }

    .community-editor-pane[b-piv8x5lmbv] {
        display: none;
        border-left: none;
    }

    .community-editor-divider[b-piv8x5lmbv] {
        display: none;
    }

    .community-editor-pane.is-active[b-piv8x5lmbv] {
        display: block;
    }

    .community-editor-pane-inner--compose[b-piv8x5lmbv],
    .community-editor-pane-inner--preview[b-piv8x5lmbv] {
        height: auto;
        max-height: none;
    }

    .community-editor-preview-surface[b-piv8x5lmbv] {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .community-editor-document-shell[b-piv8x5lmbv] {
        padding: 1rem;
    }

    .community-editor-document[b-piv8x5lmbv] {
        padding: 1.3rem 1.1rem 1.5rem;
        border-radius: 1rem;
    }

    .community-editor-title-input[b-piv8x5lmbv] {
        min-height: 5.2rem;
        font-size: clamp(1.85rem, 9vw, 2.6rem);
        line-height: 1.05;
    }

    .community-editor-document-topline[b-piv8x5lmbv] {
        display: grid;
        gap: 0.45rem;
    }

    .community-editor-document-topline-meta[b-piv8x5lmbv] {
        justify-content: start;
        flex-wrap: wrap;
        white-space: normal;
    }

    .community-editor-preview-head[b-piv8x5lmbv] {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: none;
    }

    .community-editor-footer[b-piv8x5lmbv] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .community-editor-footer-bar[b-piv8x5lmbv] {
        gap: 0.75rem;
    }

    .community-editor-footer-actions[b-piv8x5lmbv] {
        flex-wrap: nowrap;
        width: auto;
    }

    .community-editor-footer-actions > *[b-piv8x5lmbv] {
        flex: 0 0 auto;
    }

    .community-editor-format-toolbar[b-piv8x5lmbv] {
        top: 0.75rem;
    }

    .community-editor-return[b-piv8x5lmbv] {
        top: 0.95rem;
        left: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .community-editor-primary[b-piv8x5lmbv],
    .community-editor-secondary[b-piv8x5lmbv],
    .community-editor-tab[b-piv8x5lmbv] {
        transition: none;
    }
}
/* /Pages/Debug.razor.rz.scp.css */
.debug-page[b-izmwvejoiw] {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1.25rem 3rem;
}

.debug-title[b-izmwvejoiw] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
}

/* Sections */

.debug-section[b-izmwvejoiw] {
    margin-bottom: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-surface);
}

.debug-section-title[b-izmwvejoiw] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.25rem;
}

.debug-desc[b-izmwvejoiw] {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 0.85rem;
}

/* Button grid (achievements) */

.debug-btn-grid[b-izmwvejoiw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.debug-btn-row[b-izmwvejoiw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.debug-voice-list[b-izmwvejoiw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-elevated);
}

.debug-form-row[b-izmwvejoiw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.debug-field[b-izmwvejoiw] {
    display: grid;
    gap: 0.35rem;
    min-width: 8rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.debug-input[b-izmwvejoiw] {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.debug-input:focus[b-izmwvejoiw] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-subtle);
}

/* Buttons */

.debug-btn[b-izmwvejoiw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.debug-btn:hover[b-izmwvejoiw] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.debug-btn:active[b-izmwvejoiw] {
    transform: scale(0.97);
}

.debug-btn-icon[b-izmwvejoiw] {
    font-size: 1rem;
}

.debug-btn-label[b-izmwvejoiw] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debug-btn.accent[b-izmwvejoiw] {
    border-color: var(--accent);
    color: var(--accent);
}

.debug-btn.danger[b-izmwvejoiw] {
    border-color: var(--error);
    color: var(--error);
}

.debug-btn.danger:hover[b-izmwvejoiw] {
    background: var(--error-subtle);
    border-color: var(--error);
    color: var(--error);
}

/* Live stats */

.debug-stats[b-izmwvejoiw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.debug-diagnostics-grid[b-izmwvejoiw] {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.debug-diagnostics-card[b-izmwvejoiw] {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-elevated);
}

.debug-diagnostics-table[b-izmwvejoiw] {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.debug-diagnostics-row[b-izmwvejoiw] {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 0.6fr));
    gap: 0.6rem;
    align-items: start;
    font-size: 0.76rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.debug-diagnostics-row--head[b-izmwvejoiw] {
    color: var(--text-secondary);
    font-weight: 600;
}

.debug-diagnostics-row--boundary[b-izmwvejoiw] {
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 0.8fr));
}

.debug-diagnostics-target[b-izmwvejoiw] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--text-primary);
    min-width: 0;
    word-break: break-word;
}

.debug-diagnostics-note[b-izmwvejoiw] {
    color: var(--error);
    font-size: 0.72rem;
}

.debug-status-note[b-izmwvejoiw] {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.debug-textarea[b-izmwvejoiw] {
    width: 100%;
    min-height: 14rem;
    margin-top: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.45;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
}

.debug-review-checklist[b-izmwvejoiw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.85rem 0;
}

.debug-review-checklist span[b-izmwvejoiw],
.debug-review-badge[b-izmwvejoiw] {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.debug-review-list[b-izmwvejoiw] {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
}

.debug-review-item[b-izmwvejoiw] {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-elevated);
}

.debug-review-heading[b-izmwvejoiw],
.debug-review-candidate-head[b-izmwvejoiw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.debug-review-heading h3[b-izmwvejoiw] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.debug-review-badge--ready[b-izmwvejoiw] {
    border-color: var(--accent);
    color: var(--accent);
}

.debug-review-badge--listen[b-izmwvejoiw] {
    color: var(--text-muted);
}

.debug-review-display[b-izmwvejoiw] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.45;
}

.debug-review-meta[b-izmwvejoiw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    overflow-wrap: anywhere;
}

.debug-review-candidates[b-izmwvejoiw] {
    display: grid;
    gap: 0.65rem;
}

.debug-review-candidate[b-izmwvejoiw] {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: var(--bg-surface);
}

.debug-review-candidate--approved[b-izmwvejoiw] {
    border-color: var(--accent);
}

.debug-review-candidate-head strong[b-izmwvejoiw] {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.debug-review-candidate-head span[b-izmwvejoiw] {
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 600;
}

.debug-review-audio[b-izmwvejoiw] {
    width: 100%;
    min-height: 2.25rem;
}

.debug-btn:disabled[b-izmwvejoiw] {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}
/* /Pages/Events.razor.rz.scp.css */
.events-page[b-vn17uz7lvn] {
    width: 100%;
    max-width: 1180px;
    min-height: 0;
    height: auto;
    margin: 0 auto;
    padding: 1.5rem 1rem 3.25rem;
    overflow: visible;
}

.events-shell[b-vn17uz7lvn] {
    width: 100%;
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    align-items: stretch;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cascade-in[b-vn17uz7lvn] {
    animation: cascade-in-b-vn17uz7lvn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes cascade-in-b-vn17uz7lvn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.events-loading[b-vn17uz7lvn] {
    max-width: 28rem;
    min-height: 100%;
    margin: 0 auto;
    padding: 1.35rem;
    display: grid;
    align-content: center;
    gap: 0.55rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        color-mix(in srgb, var(--bg-surface) 84%, transparent);
    color: var(--text-muted);
}

.events-loading-title[b-vn17uz7lvn] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.events-hero[b-vn17uz7lvn] {
    border: 1px solid var(--border-color);
    border-radius: 1.05rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.02)), rgba(17, 18, 30, 0.97));
    padding: 1rem 1.05rem;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    gap: 0.85rem;
}

.events-hero-copy[b-vn17uz7lvn] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.events-eyebrow[b-vn17uz7lvn],
.events-list-kicker[b-vn17uz7lvn],
.block-kicker[b-vn17uz7lvn],
.score-label[b-vn17uz7lvn],
.hero-stat-label[b-vn17uz7lvn],
.detail-pill[b-vn17uz7lvn],
.future-window[b-vn17uz7lvn] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    font-size: 0.67rem;
}

.events-eyebrow[b-vn17uz7lvn] {
    color: var(--accent);
}

.events-hero-copy h1[b-vn17uz7lvn] {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.05;
    color: var(--text-primary);
    max-width: none;
    font-family: inherit;
}

.events-hero-copy p[b-vn17uz7lvn] {
    margin: 0;
    max-width: 52ch;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.82rem;
}

.events-hero-tags[b-vn17uz7lvn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hero-tag[b-vn17uz7lvn] {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    padding: 0.28rem 0.58rem;
    font-size: 0.66rem;
    font-weight: 700;
}

.hero-tag-accent[b-vn17uz7lvn] {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.09);
    color: #f9d671;
}

.events-hero-grid[b-vn17uz7lvn] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    align-content: start;
}

.hero-stat[b-vn17uz7lvn] {
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    min-height: 0;
    padding: 0.7rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.hero-stat strong[b-vn17uz7lvn] {
    font-size: clamp(1.2rem, 3vw, 1.65rem);
    line-height: 1;
    color: var(--text-primary);
    font-family: inherit;
}

.hero-stat-detail[b-vn17uz7lvn] {
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.4;
    font-weight: 600;
}

.hero-stat-hot[b-vn17uz7lvn] {
    border-color: color-mix(in srgb, #f59e0b 35%, var(--border-color));
    background: rgba(245, 158, 11, 0.07);
}

.events-layout[b-vn17uz7lvn] {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 1rem;
    align-items: start;
}

.panel-frame[b-vn17uz7lvn],
.panel-block[b-vn17uz7lvn] {
    border: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(17, 18, 30, 0.95), rgba(12, 14, 24, 0.98));
}

.panel-frame[b-vn17uz7lvn] {
    border-radius: 1rem;
    padding: 0.85rem;
}

.events-list[b-vn17uz7lvn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 0;
    padding: 0.85rem 1rem 0.65rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.events-list-head[b-vn17uz7lvn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.events-list-kicker[b-vn17uz7lvn] {
    display: inline-flex;
    width: fit-content;
    padding: 0.36rem 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 800;
}

.events-list-title[b-vn17uz7lvn] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.events-list-pills[b-vn17uz7lvn] {
    align-items: center;
    display: flex;
}

.event-detail[b-vn17uz7lvn] {
    min-width: 0;
    min-height: 0;
    display: flex;
    overflow: visible;
    padding: 1rem 1.1rem 1rem 1rem;
}

.detail-panel[b-vn17uz7lvn] {
    flex: 1 1 auto;
    min-height: 0;
    border: none;
    border-radius: 1rem;
    background: transparent;
    box-shadow: none;
    padding: 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    animation: event-detail-enter-b-vn17uz7lvn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes event-detail-enter-b-vn17uz7lvn {
    from {
        opacity: 0;
        transform: translateY(12px) scaleY(0.88) scaleX(1.04);
    }
    55% {
        opacity: 1;
        transform: translateY(-3px) scaleY(1.03) scaleX(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.detail-hero[b-vn17uz7lvn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-copy[b-vn17uz7lvn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.detail-title-row[b-vn17uz7lvn] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    text-align: center;
}

.detail-title-row > div[b-vn17uz7lvn] {
    min-width: 0;
}

.detail-title-row h2[b-vn17uz7lvn],
.block-head h3[b-vn17uz7lvn],
.future-card h3[b-vn17uz7lvn] {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--text-primary);
}

.detail-lead[b-vn17uz7lvn] {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.83rem;
    line-height: 1.6;
    max-width: 70ch;
}

.detail-pill[b-vn17uz7lvn] {
    align-self: flex-start;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
}

.detail-scoreboard[b-vn17uz7lvn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.score-tile[b-vn17uz7lvn] {
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
    padding: 0.7rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.score-tile-strong[b-vn17uz7lvn] {
    background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
    border-color: var(--border-color);
}

.score-value[b-vn17uz7lvn] {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-secondary);
    font-family: inherit;
}

.score-note[b-vn17uz7lvn] {
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.5;
    font-weight: 600;
}

.panel-block[b-vn17uz7lvn] {
    border-radius: 1rem;
    padding: 0.85rem;
}

.block-head[b-vn17uz7lvn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.85rem;
}

.daily-quest-card > .block-head[b-vn17uz7lvn] {
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}

.daily-quest-card > .block-head > div[b-vn17uz7lvn] {
    min-width: 0;
}

.block-head h3[b-vn17uz7lvn] {
    font-size: 1rem;
}

.block-meta[b-vn17uz7lvn] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.streak-calendar-panel[b-vn17uz7lvn] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 100%;
    gap: 0.9rem;
}

.streak-calendar-hero[b-vn17uz7lvn] {
    display: grid;
    gap: 0.85rem;
}

.streak-calendar-copy[b-vn17uz7lvn] {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.streak-calendar-count[b-vn17uz7lvn] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.15rem, 7vw, 4rem);
    line-height: 0.92;
    letter-spacing: -0.05em;
    font-weight: 850;
}

.streak-month-toolbar[b-vn17uz7lvn] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
}

.streak-month-nav[b-vn17uz7lvn] {
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.streak-month-nav span[b-vn17uz7lvn] {
    transform: translateY(-0.08rem);
}

.streak-month-nav:hover[b-vn17uz7lvn] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 50%, rgba(255, 255, 255, 0.1));
}

.streak-month-label[b-vn17uz7lvn] {
    text-align: center;
    color: var(--text-primary);
    font-size: clamp(1rem, 3vw, 1.28rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.streak-calendar-board[b-vn17uz7lvn],
.streak-calendar-scroller[b-vn17uz7lvn],
.streak-calendar-sheet[b-vn17uz7lvn] {
    min-height: 0;
}

.streak-calendar-board[b-vn17uz7lvn] {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow-x: hidden;
    overflow-y: visible;
    touch-action: pan-y;
}

.streak-calendar-scroller[b-vn17uz7lvn] {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.streak-calendar-sheet[b-vn17uz7lvn] {
    --calendar-flow: 0;
    min-width: 46rem;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.4rem;
    padding: 0.55rem;
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.streak-calendar-sheet.is-month-prev[b-vn17uz7lvn] {
    --calendar-flow: -1;
    animation: event-calendar-month-snap-b-vn17uz7lvn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.streak-calendar-sheet.is-month-next[b-vn17uz7lvn] {
    --calendar-flow: 1;
    animation: event-calendar-month-snap-b-vn17uz7lvn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes event-calendar-month-snap-b-vn17uz7lvn {
    0% {
        opacity: 0.9;
        transform: translate3d(calc(var(--calendar-flow) * 12px), 0, 0) scale(0.998);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.streak-weekday-row[b-vn17uz7lvn],
.streak-calendar-grid[b-vn17uz7lvn] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.streak-weekday[b-vn17uz7lvn] {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-bottom: 0.15rem;
}

.streak-calendar-grid[b-vn17uz7lvn] {
    grid-template-rows: repeat(6, minmax(5.15rem, 1fr));
}

.streak-day[b-vn17uz7lvn] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 0;
    padding: 0.46rem;
    border-radius: 0.72rem;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
    transition: border-color 0.16s ease, transform 0.16s ease, background-color 0.16s ease;
    transform-origin: center;
}

.streak-day.is-outside-month[b-vn17uz7lvn] {
    opacity: 1;
}

.streak-day.is-today[b-vn17uz7lvn] {
    border-color: color-mix(in srgb, var(--accent) 60%, rgba(255, 255, 255, 0.12));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.streak-day.is-history-day[b-vn17uz7lvn] {
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
}

.streak-day.is-current-streak[b-vn17uz7lvn] {
    border-color: var(--bg-accent-surface);
    background: var(--bg-accent-surface);
    box-shadow: none;
}

.streak-day.is-frozen-day:not(.is-current-streak)[b-vn17uz7lvn] {
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
}

.streak-day-head[b-vn17uz7lvn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
}

.streak-day-number[b-vn17uz7lvn] {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
}

.streak-day.is-current-streak .streak-day-number[b-vn17uz7lvn] {
    color: #fff;
    text-shadow: none;
}

.event-cta[b-vn17uz7lvn] {
    border: none;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 0.68rem 1rem;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}

.event-cta:hover[b-vn17uz7lvn] {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 16px var(--accent-glow);
}

.event-cta:active[b-vn17uz7lvn] {
    transform: scaleY(0.9) scaleX(1.05);
}

.quests-split-board[b-vn17uz7lvn] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: stretch;
}

.quest-column[b-vn17uz7lvn],
.weekly-quest-stack[b-vn17uz7lvn] {
    min-width: 0;
    min-height: 0;
}

.quest-column[b-vn17uz7lvn] {
    padding: 0.2rem 0.1rem 0;
}

.daily-quest-card[b-vn17uz7lvn] {
    display: flex;
    flex-direction: column;
}

.daily-quest-card .quest-list[b-vn17uz7lvn] {
    flex: 1 1 auto;
    min-height: 0;
}

.weekly-quest-stack[b-vn17uz7lvn] {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 0.8rem;
    padding: 0.2rem 0.1rem 0 0.9rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.weekly-raid-card[b-vn17uz7lvn],
.weekly-reward-card[b-vn17uz7lvn] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.weekly-raid-card[b-vn17uz7lvn] {
    gap: 0.55rem;
}

.weekly-reward-card[b-vn17uz7lvn] {
    gap: 0.55rem;
}

.weekly-raid-card > .block-head[b-vn17uz7lvn] {
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0;
}

.weekly-quest-copy[b-vn17uz7lvn] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.weekly-quest-note[b-vn17uz7lvn] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.35;
}

.quest-column-scoreboard[b-vn17uz7lvn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-bottom: 0.8rem;
}

.quest-column-scoreboard--daily[b-vn17uz7lvn] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.daily-quest-card .quest-column-scoreboard--daily[b-vn17uz7lvn] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-bottom: 0;
}

.weekly-raid-card .quest-column-scoreboard--weekly[b-vn17uz7lvn] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-bottom: 0;
}

.daily-quest-card .score-tile[b-vn17uz7lvn] {
    min-width: 0;
    min-height: 1.35rem;
    padding: 0.16rem 0.42rem;
    border-radius: 0.45rem;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.weekly-raid-card .score-tile[b-vn17uz7lvn] {
    min-width: 0;
    min-height: 1.35rem;
    padding: 0.16rem 0.42rem;
    border-radius: 0.45rem;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.daily-quest-card .score-value[b-vn17uz7lvn] {
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
}

.weekly-raid-card .score-value[b-vn17uz7lvn] {
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
}

.weekly-raid-card .score-label[b-vn17uz7lvn],
.weekly-raid-card .score-note[b-vn17uz7lvn] {
    display: none;
}

.daily-quest-card .score-note[b-vn17uz7lvn] {
    display: none;
}

.quest-list[b-vn17uz7lvn] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.quest-row[b-vn17uz7lvn] {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 0.58rem;
    background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
    animation: event-quest-row-enter-b-vn17uz7lvn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}

@keyframes event-quest-row-enter-b-vn17uz7lvn {
    from {
        opacity: 0;
        transform: translateX(-10px) scaleX(0.92) scaleY(1.04);
    }
    55% {
        opacity: 1;
        transform: translateX(3px) scaleX(1.02) scaleY(0.99);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.quest-row.done[b-vn17uz7lvn] {
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
}

.quest-row-head[b-vn17uz7lvn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.quest-main[b-vn17uz7lvn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.quest-name[b-vn17uz7lvn] {
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--text-secondary);
}

.quest-desc[b-vn17uz7lvn] {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.quest-bar[b-vn17uz7lvn] {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.quest-bar-fill[b-vn17uz7lvn] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-secondary) 75%, #fff));
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent);
}

.quest-fraction[b-vn17uz7lvn] {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
}

.future-grid[b-vn17uz7lvn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.future-card p[b-vn17uz7lvn] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
}

.weekly-bigbar[b-vn17uz7lvn] {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 0.05rem;
}

.weekly-bigbar-fill[b-vn17uz7lvn] {
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.weekly-reward-list[b-vn17uz7lvn] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.44rem;
}

.reward-chip[b-vn17uz7lvn] {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.18;
    padding: 0.58rem 0.62rem;
    text-align: center;
}

.alt-cta[b-vn17uz7lvn] {
    align-self: flex-start;
    margin-top: 0.15rem;
}

.future-note[b-vn17uz7lvn] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .events-page[b-vn17uz7lvn] {
        height: auto;
        overflow: visible;
    }

    .events-shell[b-vn17uz7lvn] {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .events-list[b-vn17uz7lvn] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .event-detail[b-vn17uz7lvn] {
        overflow: visible;
        padding-right: 0;
    }

    .detail-scoreboard[b-vn17uz7lvn],
    .quest-column-scoreboard--daily[b-vn17uz7lvn],
    .quests-split-board[b-vn17uz7lvn],
    .future-grid[b-vn17uz7lvn] {
        grid-template-columns: 1fr;
    }

    .weekly-quest-stack[b-vn17uz7lvn] {
        grid-template-rows: auto auto;
        padding-left: 0.1rem;
        border-left: none;
    }
}

@media (max-width: 720px) {
    .events-list[b-vn17uz7lvn],
    .event-detail[b-vn17uz7lvn],
    .detail-panel[b-vn17uz7lvn] {
        padding: 1rem;
    }

    .detail-scoreboard[b-vn17uz7lvn],
    .quest-column-scoreboard--daily[b-vn17uz7lvn],
    .future-grid[b-vn17uz7lvn] {
        grid-template-columns: 1fr;
    }

    .block-head[b-vn17uz7lvn],
    .quest-row-head[b-vn17uz7lvn] {
        flex-direction: column;
        align-items: flex-start;
    }

    .streak-calendar-sheet[b-vn17uz7lvn] {
        min-width: 38rem;
    }

    .streak-calendar-grid[b-vn17uz7lvn] {
        grid-template-rows: repeat(6, minmax(4.6rem, 1fr));
    }
}

@media (max-width: 640px) {
    .events-page[b-vn17uz7lvn] {
        max-width: none;
        min-height: calc(100dvh - var(--phonebar-height, 3rem));
        padding: 0;
    }

    .events-shell[b-vn17uz7lvn] {
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .events-list[b-vn17uz7lvn] {
        border-bottom: none;
        gap: 0;
        padding: 0.1rem 0.7rem 0.24rem;
    }

    .events-list-head[b-vn17uz7lvn] {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .events-list-kicker[b-vn17uz7lvn] {
        padding: 0.28rem 0.55rem;
        font-size: 0.56rem;
        letter-spacing: 0.1em;
    }

    .events-list-title[b-vn17uz7lvn] {
        font-size: 1.35rem;
    }

    .events-list-pills[b-vn17uz7lvn] {
        display: flex;
    }

    .event-detail[b-vn17uz7lvn] {
        padding: 0.35rem 0.7rem 0.85rem;
        overflow-x: hidden;
    }

    .detail-panel[b-vn17uz7lvn] {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        flex: 1 1 auto;
        gap: 0.62rem;
        padding: 0.68rem 0.85rem 0.85rem;
        border-radius: 0.9rem;
    }

    .detail-title-row[b-vn17uz7lvn] {
        align-items: center;
        gap: 0.6rem;
    }

    .detail-title-row > div[b-vn17uz7lvn],
    .detail-copy[b-vn17uz7lvn] {
        min-width: 0;
    }

    .detail-title-row h2[b-vn17uz7lvn] {
        font-size: 1.05rem;
    }

    .detail-lead[b-vn17uz7lvn] {
        max-width: 100%;
        font-size: 0.78rem;
        line-height: 1.45;
        overflow-wrap: break-word;
    }

    .daily-quest-card[b-vn17uz7lvn] {
        display: flex;
        flex-direction: column;
    }

    .daily-quest-card > .block-head[b-vn17uz7lvn] {
        flex-direction: row;
        align-items: center;
        min-width: 0;
        margin-bottom: 0.5rem;
    }

    .daily-quest-card > .block-head > div[b-vn17uz7lvn] {
        min-width: 0;
    }

    .daily-quest-card > .block-head .quest-column-scoreboard--daily[b-vn17uz7lvn] {
        gap: 0.28rem;
        margin-bottom: 0;
    }

    .weekly-raid-card > .block-head[b-vn17uz7lvn] {
        flex-direction: row;
        align-items: center;
        min-width: 0;
        margin-bottom: 0;
    }

    .weekly-raid-card > .block-head .quest-column-scoreboard--weekly[b-vn17uz7lvn] {
        gap: 0.28rem;
        margin-bottom: 0;
    }

    .weekly-reward-card > .block-head[b-vn17uz7lvn] {
        flex-direction: row;
        align-items: center;
        min-width: 0;
        margin-bottom: 0;
    }

    .daily-quest-card > .quest-list[b-vn17uz7lvn] {
        min-width: 0;
        gap: 0.44rem;
    }

    .daily-quest-card .score-tile[b-vn17uz7lvn],
    .weekly-raid-card .score-tile[b-vn17uz7lvn] {
        min-height: 1.25rem;
        padding: 0.13rem 0.34rem;
    }

    .daily-quest-card .score-value[b-vn17uz7lvn],
    .weekly-raid-card .score-value[b-vn17uz7lvn] {
        font-size: 0.82rem;
    }

    .daily-quest-card .score-note[b-vn17uz7lvn] {
        display: none;
    }

    .daily-quest-card .quest-row[b-vn17uz7lvn] {
        gap: 0.42rem;
        padding: 0.58rem 0.62rem;
        border-radius: 0.64rem;
    }

    .daily-quest-card .quest-row-head[b-vn17uz7lvn] {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.55rem;
    }

    .daily-quest-card .quest-name[b-vn17uz7lvn] {
        min-width: 0;
        font-size: 0.82rem;
        line-height: 1.18;
    }

    .daily-quest-card .quest-fraction[b-vn17uz7lvn] {
        flex-shrink: 0;
        padding-top: 0;
        font-size: 0.62rem;
        line-height: 1;
    }

    .daily-quest-card .quest-main[b-vn17uz7lvn] {
        gap: 0.16rem;
    }

    .daily-quest-card .quest-desc[b-vn17uz7lvn] {
        font-size: 0.66rem;
        line-height: 1.35;
    }

    .daily-quest-card .quest-bar[b-vn17uz7lvn] {
        height: 4px;
    }

    .weekly-bigbar[b-vn17uz7lvn] {
        height: 4px;
    }

    .weekly-reward-list[b-vn17uz7lvn] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.34rem;
    }

    .reward-chip[b-vn17uz7lvn] {
        padding: 0.5rem 0.42rem;
        border-radius: 0.64rem;
        font-size: 0.68rem;
    }

    .streak-calendar-count[b-vn17uz7lvn] {
        font-size: clamp(1.55rem, 8vw, 2.1rem);
        line-height: 1;
    }

    .streak-month-toolbar[b-vn17uz7lvn] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

    .streak-month-nav[b-vn17uz7lvn] {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.7rem;
        font-size: 1.3rem;
    }

    .streak-month-label[b-vn17uz7lvn] {
        order: 0;
        font-size: 1rem;
    }

    .streak-calendar-board[b-vn17uz7lvn] {
        overflow: hidden;
    }

    .streak-calendar-scroller[b-vn17uz7lvn] {
        height: auto;
        overflow: hidden;
    }

    .streak-calendar-sheet[b-vn17uz7lvn] {
        width: 100%;
        min-width: 0;
        gap: 0.28rem;
        padding: 0.32rem;
    }

    .streak-weekday-row[b-vn17uz7lvn],
    .streak-calendar-grid[b-vn17uz7lvn] {
        gap: 0.18rem;
    }

    .streak-weekday[b-vn17uz7lvn] {
        font-size: 0.52rem;
        letter-spacing: 0.05em;
        padding-bottom: 0;
    }

    .streak-calendar-grid[b-vn17uz7lvn] {
        grid-template-rows: repeat(6, minmax(2.45rem, auto));
    }

    .streak-day[b-vn17uz7lvn] {
        min-height: 2.45rem;
        gap: 0.14rem;
        padding: 0.28rem;
        border-radius: 0.52rem;
    }

    .streak-day-head[b-vn17uz7lvn] {
        gap: 0.22rem;
    }

    .streak-day-number[b-vn17uz7lvn] {
        font-size: 0.78rem;
    }

    .score-tile[b-vn17uz7lvn],
    .quest-row[b-vn17uz7lvn] {
        border-radius: 0.7rem;
    }

    .weekly-reward-list[b-vn17uz7lvn] {
        gap: 0.35rem;
    }

    .reward-chip[b-vn17uz7lvn] {
        padding: 0.34rem 0.5rem;
        font-size: 0.66rem;
    }
}
/* /Pages/FreeTraining.razor.rz.scp.css */
.custom-training-page[b-hd88kleh9m] {
    max-width: 1440px;
    margin: 0 auto;
    min-height: calc(100vh - var(--topbar-height) - 1rem);
    min-height: calc(100dvh - var(--topbar-height) - 1rem);
    height: calc(100dvh - var(--topbar-height) - 1rem);
    padding: 0 1rem 1rem;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    overflow: hidden;
}

.ftp-header[b-hd88kleh9m] {
    display: grid;
    gap: 0.45rem;
    width: min(100%, 52rem);
}

.ftp-back[b-hd88kleh9m],
.ftp-back:visited[b-hd88kleh9m] {
    width: fit-content;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
}

.ftp-back:hover[b-hd88kleh9m] {
    color: var(--text-primary);
}

.ftp-heading[b-hd88kleh9m] {
    display: grid;
    gap: 0.3rem;
}

.cascade-in[b-hd88kleh9m] {
    opacity: 0;
    animation: ftp-cascade-in-b-hd88kleh9m 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
    will-change: transform, opacity, filter;
}

@keyframes ftp-cascade-in-b-hd88kleh9m {
    from {
        opacity: 0;
        transform: translateY(14px) scaleY(0.9) scaleX(1.03);
        filter: blur(4px);
    }

    55% {
        opacity: 1;
        transform: translateY(-3px) scaleY(1.03) scaleX(0.99);
        filter: blur(0);
    }

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

@keyframes ftp-select-pop-b-hd88kleh9m {
    0% {
        transform: translateY(0) scale(1);
    }

    42% {
        transform: translateY(-2px) scaleX(1.012) scaleY(0.986);
    }

    72% {
        transform: translateY(0) scaleX(0.996) scaleY(1.006);
    }

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

.ftp-kicker[b-hd88kleh9m],
.ftp-panel-kicker[b-hd88kleh9m],
.ftp-field-label[b-hd88kleh9m],
.ftp-filter-label[b-hd88kleh9m],
.ftp-note-kicker[b-hd88kleh9m],
.ftp-sticky-kicker[b-hd88kleh9m] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.ftp-title[b-hd88kleh9m],
.ftp-panel-title[b-hd88kleh9m],
.ftp-section-copy h3[b-hd88kleh9m],
.ftp-set-title[b-hd88kleh9m] {
    margin: 0;
    color: var(--text-primary);
}

.ftp-title[b-hd88kleh9m] {
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.ftp-subtitle[b-hd88kleh9m],
.ftp-summary[b-hd88kleh9m],
.ftp-panel-copy-text[b-hd88kleh9m],
.ftp-section-copy p[b-hd88kleh9m],
.ftp-field-hint[b-hd88kleh9m],
.ftp-set-meta[b-hd88kleh9m],
.ftp-set-summary[b-hd88kleh9m],
.ftp-set-updated[b-hd88kleh9m],
.ftp-note p[b-hd88kleh9m],
.ftp-prompt-secondary[b-hd88kleh9m],
.ftp-prompt-meta[b-hd88kleh9m],
.ftp-unit-meta[b-hd88kleh9m],
.ftp-level-description[b-hd88kleh9m],
.ftp-level-meta[b-hd88kleh9m],
.ftp-chapter-count[b-hd88kleh9m],
.ftp-sticky-copy span:last-child[b-hd88kleh9m],
.ftp-utility-meta[b-hd88kleh9m] {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.ftp-summary[b-hd88kleh9m] {
    font-size: 0.82rem;
}

.ftp-layout[b-hd88kleh9m] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19.5rem, 27rem);
    min-height: 0;
    height: 100%;
    gap: 1.15rem;
    align-items: stretch;
}

.ftp-panel[b-hd88kleh9m] {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
    padding: 1rem 1.05rem;
    min-height: 0;
}

.ftp-library-panel[b-hd88kleh9m] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.85rem;
    height: 100%;
    overflow: hidden;
}

.ftp-panel-head[b-hd88kleh9m],
.ftp-panel-head--builder[b-hd88kleh9m],
.ftp-section-head[b-hd88kleh9m],
.ftp-set-head[b-hd88kleh9m],
.ftp-set-actions[b-hd88kleh9m],
.ftp-utility-row[b-hd88kleh9m],
.ftp-sticky-bar[b-hd88kleh9m],
.ftp-sticky-actions[b-hd88kleh9m],
.ftp-unit-head[b-hd88kleh9m],
.ftp-unit-summary[b-hd88kleh9m],
.ftp-chapter-head[b-hd88kleh9m],
.ftp-level-button[b-hd88kleh9m],
.ftp-level-row[b-hd88kleh9m],
.ftp-level-tuning-head[b-hd88kleh9m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ftp-panel-head[b-hd88kleh9m] {
    margin-bottom: 0.85rem;
}

.ftp-library-panel .ftp-panel-head[b-hd88kleh9m] {
    margin-bottom: 0;
}

.ftp-panel-head--builder[b-hd88kleh9m] {
    align-items: start;
}

.ftp-panel-copy[b-hd88kleh9m],
.ftp-section-copy[b-hd88kleh9m],
.ftp-set-copy[b-hd88kleh9m],
.ftp-name-shell[b-hd88kleh9m],
.ftp-builder-panel[b-hd88kleh9m] {
    display: grid;
    gap: 0.2rem;
}

.ftp-name-shell[b-hd88kleh9m] {
    transform-origin: center;
}

.ftp-name-shell.is-named[b-hd88kleh9m] {
    animation: ftp-select-pop-b-hd88kleh9m 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ftp-builder-panel[b-hd88kleh9m] {
    min-height: 0;
    height: 100%;
    gap: 1rem;
    overflow: auto;
    scrollbar-gutter: stable;
}

.ftp-loading-stack[b-hd88kleh9m],
.ftp-loading-list[b-hd88kleh9m] {
    display: grid;
    gap: 0.75rem;
}

.ftp-loading-stack[b-hd88kleh9m] {
    min-height: 0;
    align-content: start;
}

.ftp-loading-stack--library[b-hd88kleh9m] {
    height: 100%;
}

.ftp-loading-card[b-hd88kleh9m] {
    position: relative;
    overflow: hidden;
    border-radius: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 92%, rgba(255, 255, 255, 0.04));
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--bg-elevated) 96%, transparent) 0%,
            color-mix(in srgb, var(--bg-surface) 94%, rgba(255, 255, 255, 0.03)) 50%,
            color-mix(in srgb, var(--bg-elevated) 96%, transparent) 100%);
    background-size: 220% 100%;
    animation: ftp-skeleton-shift-b-hd88kleh9m 1.1s linear infinite;
}

.ftp-loading-card--title[b-hd88kleh9m] {
    height: 5rem;
}

.ftp-loading-card--field[b-hd88kleh9m],
.ftp-loading-card--search[b-hd88kleh9m] {
    height: 3.5rem;
}

.ftp-loading-card--unit[b-hd88kleh9m] {
    height: 4rem;
}

.ftp-loading-card--set[b-hd88kleh9m] {
    height: 10.5rem;
}

@keyframes ftp-skeleton-shift-b-hd88kleh9m {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -20% 0;
    }
}

.ftp-note[b-hd88kleh9m],
.ftp-notice[b-hd88kleh9m] {
    padding: 0.85rem 0.95rem;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 92%, rgba(255, 255, 255, 0.04));
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
}

.ftp-notice[b-hd88kleh9m] {
    animation: ftp-cascade-in-b-hd88kleh9m 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ftp-note--empty[b-hd88kleh9m] {
    display: grid;
    height: 100%;
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    align-content: center;
}

.ftp-notice--success[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--success) 44%, transparent);
    background: color-mix(in srgb, var(--success) 10%, var(--bg-elevated));
}

.ftp-notice--warn[b-hd88kleh9m] {
    border-color: color-mix(in srgb, #f5b545 44%, transparent);
    background: color-mix(in srgb, #f5b545 10%, var(--bg-elevated));
}

.ftp-text-input[b-hd88kleh9m] {
    width: 100%;
    padding: 0.82rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 0.82rem;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    color: var(--text-primary);
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ftp-text-input:focus[b-hd88kleh9m] {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 48%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.ftp-text-input.is-named[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 5%, var(--bg-elevated));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent);
}

.ftp-section[b-hd88kleh9m] {
    display: grid;
    gap: 0.8rem;
}

.ftp-section + .ftp-section[b-hd88kleh9m],
.ftp-section + .ftp-note[b-hd88kleh9m],
.ftp-note + .ftp-section[b-hd88kleh9m] {
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
}

.ftp-search-shell[b-hd88kleh9m] {
    display: grid;
}

.ftp-unit-list[b-hd88kleh9m],
.ftp-set-list[b-hd88kleh9m] {
    display: grid;
    gap: 0.75rem;
}

.ftp-set-list[b-hd88kleh9m] {
    min-height: 0;
    align-content: start;
    overflow: auto;
    padding-right: 0.15rem;
    scrollbar-gutter: stable;
}

.ftp-unit-card[b-hd88kleh9m],
.ftp-set-card[b-hd88kleh9m] {
    border: 1px solid color-mix(in srgb, var(--border-color) 94%, rgba(255, 255, 255, 0.04));
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    content-visibility: auto;
}

.ftp-unit-card.is-expanded[b-hd88kleh9m],
.ftp-unit-card.is-closing[b-hd88kleh9m],
.ftp-set-card.is-editing[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

.ftp-unit-card.has-selected-levels[b-hd88kleh9m] {
    border-color: var(--bg-accent-surface);
    box-shadow: 0 0 0 1px var(--bg-accent-surface);
}

.ftp-unit-card.has-all-levels-selected[b-hd88kleh9m] {
    border-color: var(--bg-accent-surface);
    background: var(--bg-accent-surface);
    box-shadow: none;
}

.ftp-unit-card.has-all-levels-selected .ftp-unit-name[b-hd88kleh9m] {
    color: var(--text-primary);
}

.ftp-unit-card.has-all-levels-selected .ftp-unit-meta[b-hd88kleh9m],
.ftp-unit-card.has-all-levels-selected .ftp-unit-toggle[b-hd88kleh9m] {
    color: color-mix(in srgb, white 72%, var(--bg-accent-surface) 28%);
}

.ftp-unit-card.has-all-levels-selected .ftp-unit-select-btn[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 24%, var(--bg-accent-surface) 76%);
    color: color-mix(in srgb, white 78%, var(--bg-accent-surface) 22%);
    background: transparent;
}

.ftp-unit-card.has-all-levels-selected .ftp-unit-select-btn:hover[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 32%, var(--bg-accent-surface) 68%);
    color: var(--text-primary);
    background: color-mix(in srgb, white 10%, var(--bg-accent-surface) 90%);
}

.ftp-unit-card.has-all-levels-selected .ftp-unit-body[b-hd88kleh9m] {
    border-top: 1px solid color-mix(in srgb, white 18%, var(--bg-accent-surface) 82%);
}

.ftp-unit-card.has-all-levels-selected .ftp-chapter-block[b-hd88kleh9m] {
    padding-top: 0.1rem;
}

.ftp-unit-card.has-all-levels-selected .ftp-chapter-head[b-hd88kleh9m] {
    padding: 0.38rem 0.52rem;
    border: 1px solid color-mix(in srgb, white 13%, var(--bg-accent-surface) 87%);
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--bg-surface) 6%, var(--bg-accent-surface) 94%);
}

.ftp-unit-card.has-all-levels-selected .ftp-chapter-name[b-hd88kleh9m] {
    color: color-mix(in srgb, white 76%, var(--bg-accent-surface) 24%);
}

.ftp-unit-card.has-all-levels-selected .ftp-chapter-count[b-hd88kleh9m] {
    color: color-mix(in srgb, white 82%, var(--bg-accent-surface) 18%);
    font-weight: 700;
}

.ftp-unit-card.has-all-levels-selected .ftp-chapter-block + .ftp-chapter-block[b-hd88kleh9m] {
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, white 16%, var(--bg-accent-surface) 84%);
}

.ftp-unit-card.has-all-levels-selected .ftp-level-card.has-all-prompts-selected[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 18%, var(--bg-accent-surface) 82%);
    background: color-mix(in srgb, white 7%, var(--bg-accent-surface) 93%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 9%, var(--bg-accent-surface) 91%);
}

.ftp-unit-head[b-hd88kleh9m] {
    padding: 0.9rem 0.95rem;
    align-items: stretch;
}

.ftp-unit-summary[b-hd88kleh9m] {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ftp-unit-select-btn[b-hd88kleh9m] {
    flex-shrink: 0;
    align-self: center;
}

.ftp-unit-summary:hover[b-hd88kleh9m],
.ftp-level-button:hover[b-hd88kleh9m],
.ftp-level-select-btn:hover[b-hd88kleh9m],
.ftp-level-tune-btn:hover[b-hd88kleh9m],
.ftp-primary-btn:hover[b-hd88kleh9m],
.ftp-secondary-btn:hover[b-hd88kleh9m],
.ftp-inline-btn:hover[b-hd88kleh9m],
.ftp-filter-chip:hover[b-hd88kleh9m],
.ftp-selected-chip:hover[b-hd88kleh9m] {
    transform: translateY(-1px);
}

.ftp-unit-copy[b-hd88kleh9m],
.ftp-level-main[b-hd88kleh9m] {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.ftp-level-title-row[b-hd88kleh9m] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.18rem 0.55rem;
    min-width: 0;
}

.ftp-unit-name[b-hd88kleh9m],
.ftp-level-name[b-hd88kleh9m] {
    color: var(--text-primary);
    font-weight: 700;
}

.ftp-unit-toggle[b-hd88kleh9m] {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1;
}

.ftp-unit-body[b-hd88kleh9m] {
    --unit-chapters-pad-x: 0.95rem;
    --unit-chapters-pad-bottom: 0.95rem;
    padding: 0 0.95rem 0.95rem;
}

.ftp-unit-body-clip[b-hd88kleh9m] {
    display: grid;
    gap: 0.85rem;
}

.ftp-chapter-block[b-hd88kleh9m],
.ftp-level-list[b-hd88kleh9m] {
    display: grid;
    gap: 0.55rem;
}

.ftp-level-card[b-hd88kleh9m] {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 94%, rgba(255, 255, 255, 0.04));
    border-radius: 0.82rem;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    transform-origin: center;
    transition: transform 0.2s ease, border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.ftp-level-card[b-hd88kleh9m]::before {
    content: none;
}

.ftp-level-card.is-selected[b-hd88kleh9m] {
    border-color: var(--bg-accent-surface);
    box-shadow: 0 0 0 1px var(--bg-accent-surface);
}

.ftp-level-card.has-selected-prompts:not(.has-all-prompts-selected)[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--border-color) 94%, rgba(255, 255, 255, 0.04));
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    box-shadow: none;
}

.ftp-level-card.has-all-prompts-selected[b-hd88kleh9m] {
    border-color: var(--bg-accent-surface);
    background: var(--bg-accent-surface);
    box-shadow: none;
    animation: ftp-select-pop-b-hd88kleh9m 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ftp-level-card.is-tuning:not(.is-selected)[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--accent) 44%, transparent);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.ftp-level-row[b-hd88kleh9m] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
}

.ftp-chapter-name[b-hd88kleh9m] {
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ftp-level-button[b-hd88kleh9m] {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.ftp-level-button.is-selected[b-hd88kleh9m],
.ftp-selected-chip[b-hd88kleh9m],
.ftp-prompt-row.is-selected[b-hd88kleh9m],
.ftp-filter-chip.is-active[b-hd88kleh9m] {
    border-color: var(--bg-accent-surface);
    background: var(--bg-accent-surface);
}

.ftp-level-card .ftp-level-button.is-selected[b-hd88kleh9m] {
    border-color: transparent;
    background: transparent;
}

.ftp-level-state[b-hd88kleh9m] {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ftp-level-actions[b-hd88kleh9m] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.ftp-level-selection[b-hd88kleh9m],
.ftp-level-tuning-summary[b-hd88kleh9m] {
    color: var(--text-secondary);
    font-size: 0.74rem;
}

.ftp-level-title-row .ftp-level-selection[b-hd88kleh9m] {
    white-space: nowrap;
}

.ftp-level-card.has-all-prompts-selected .ftp-level-state[b-hd88kleh9m] {
    color: color-mix(in srgb, white 82%, var(--bg-accent-surface) 18%);
    animation: ftp-select-pop-b-hd88kleh9m 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ftp-level-card.has-all-prompts-selected .ftp-level-selection[b-hd88kleh9m] {
    display: inline-block;
    color: color-mix(in srgb, white 72%, var(--bg-accent-surface) 28%);
    animation: ftp-cascade-in-b-hd88kleh9m 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ftp-level-card.has-all-prompts-selected .ftp-level-name[b-hd88kleh9m],
.ftp-selected-chip .ftp-selected-chip-main span[b-hd88kleh9m],
.ftp-prompt-row.is-selected .ftp-prompt-primary[b-hd88kleh9m],
.ftp-filter-chip.is-active[b-hd88kleh9m] {
    color: var(--text-primary);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-description[b-hd88kleh9m],
.ftp-level-card.has-all-prompts-selected .ftp-level-meta[b-hd88kleh9m],
.ftp-selected-chip .ftp-selected-chip-main small[b-hd88kleh9m],
.ftp-selected-chip .ftp-selected-chip-remove[b-hd88kleh9m],
.ftp-prompt-row.is-selected .ftp-prompt-secondary[b-hd88kleh9m],
.ftp-prompt-row.is-selected .ftp-prompt-meta[b-hd88kleh9m] {
    color: color-mix(in srgb, white 72%, var(--bg-accent-surface) 28%);
}

.ftp-level-select-btn[b-hd88kleh9m],
.ftp-level-tune-btn[b-hd88kleh9m] {
    align-self: center;
    min-width: 4.5rem;
    justify-content: center;
}

.ftp-level-select-btn[b-hd88kleh9m] {
    min-width: 5.2rem;
}

.ftp-level-select-btn.is-selected[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--border-color) 96%, rgba(255, 255, 255, 0.06));
    background: transparent;
    color: var(--text-primary);
}

.ftp-level-tune-btn.is-open[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--border-color) 96%, rgba(255, 255, 255, 0.06));
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    color: var(--text-primary);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-select-btn[b-hd88kleh9m],
.ftp-level-card.has-all-prompts-selected .ftp-level-tune-btn[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 24%, var(--bg-accent-surface) 76%);
    background: transparent;
    color: color-mix(in srgb, white 78%, var(--bg-accent-surface) 22%);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-select-btn:hover[b-hd88kleh9m],
.ftp-level-card.has-all-prompts-selected .ftp-level-tune-btn:hover[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 32%, var(--bg-accent-surface) 68%);
    background: color-mix(in srgb, white 10%, var(--bg-accent-surface) 90%);
    color: var(--text-primary);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-select-btn.is-selected[b-hd88kleh9m],
.ftp-level-card.has-all-prompts-selected .ftp-level-tune-btn.is-open[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 28%, var(--bg-accent-surface) 72%);
    background: color-mix(in srgb, white 8%, var(--bg-accent-surface) 92%);
    color: color-mix(in srgb, white 84%, var(--bg-accent-surface) 16%);
}

.ftp-level-tuning-shell[b-hd88kleh9m] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease;
}

.ftp-level-tuning-shell.is-open[b-hd88kleh9m] {
    grid-template-rows: 1fr;
    opacity: 1;
}

.ftp-level-tuning-shell.is-closing[b-hd88kleh9m] {
    pointer-events: none;
}

.ftp-level-tuning[b-hd88kleh9m] {
    min-height: 0;
    overflow: hidden;
    display: grid;
    gap: 0.75rem;
    padding: 0 0.9rem;
    border-top: 1px solid transparent;
    opacity: 0;
    transform: translateY(-0.4rem);
    transition:
        padding 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.22s ease,
        transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.18s ease;
}

.ftp-level-tuning-shell.is-open .ftp-level-tuning[b-hd88kleh9m] {
    padding: 0.75rem 0.9rem 0.9rem;
    border-top-color: color-mix(in srgb, var(--border-color) 90%, transparent);
    opacity: 1;
    transform: translateY(0);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-tuning-shell.is-open .ftp-level-tuning[b-hd88kleh9m] {
    border-top-color: color-mix(in srgb, white 26%, var(--bg-accent-surface) 74%);
    background: color-mix(in srgb, var(--bg-surface) 4%, var(--bg-accent-surface) 96%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, var(--bg-accent-surface) 90%);
}

.ftp-level-tuning-copy[b-hd88kleh9m] {
    display: grid;
    gap: 0.12rem;
}

.ftp-level-tuning-title[b-hd88kleh9m] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-tuning-title[b-hd88kleh9m] {
    color: color-mix(in srgb, white 68%, var(--bg-accent-surface) 32%);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-tuning-summary[b-hd88kleh9m] {
    color: color-mix(in srgb, white 74%, var(--bg-accent-surface) 26%);
}

.ftp-level-tuning-actions[b-hd88kleh9m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ftp-selected-levels[b-hd88kleh9m],
.ftp-filter-stack[b-hd88kleh9m] {
    display: grid;
    gap: 0.75rem;
}

.ftp-selected-levels[b-hd88kleh9m] {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.ftp-selected-chip[b-hd88kleh9m] {
    padding: 0.72rem 0.82rem;
    border-radius: 0.82rem;
    border: 1px solid var(--border-color);
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    cursor: pointer;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    transform-origin: center;
    animation: ftp-cascade-in-b-hd88kleh9m 260ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.ftp-selected-chip-main[b-hd88kleh9m] {
    display: grid;
    gap: 0.05rem;
    text-align: left;
}

.ftp-selected-chip-main small[b-hd88kleh9m] {
    color: var(--text-muted);
}

.ftp-selected-chip-remove[b-hd88kleh9m] {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
}

.ftp-filter-group[b-hd88kleh9m] {
    align-items: start;
    flex-direction: column;
}

.ftp-filter-chips[b-hd88kleh9m],
.ftp-set-actions[b-hd88kleh9m],
.ftp-utility-actions[b-hd88kleh9m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ftp-filter-chip[b-hd88kleh9m],
.ftp-primary-btn[b-hd88kleh9m],
.ftp-secondary-btn[b-hd88kleh9m],
.ftp-inline-btn[b-hd88kleh9m],
.ftp-inline-pill[b-hd88kleh9m] {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.45rem 0.72rem;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.ftp-primary-btn[b-hd88kleh9m] {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--text-primary);
}

.ftp-secondary-btn[b-hd88kleh9m] {
    color: var(--text-primary);
}

.ftp-inline-btn--danger[b-hd88kleh9m] {
    color: #ffb0b0;
    border-color: color-mix(in srgb, #ff7a7a 34%, transparent);
}

.ftp-inline-pill[b-hd88kleh9m] {
    cursor: default;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.ftp-primary-btn:disabled[b-hd88kleh9m],
.ftp-secondary-btn:disabled[b-hd88kleh9m],
.ftp-inline-btn:disabled[b-hd88kleh9m],
.ftp-filter-chip:disabled[b-hd88kleh9m] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.ftp-level-card.has-all-prompts-selected .ftp-level-tuning-actions .ftp-inline-btn[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 24%, var(--bg-accent-surface) 76%);
    background: transparent;
    color: color-mix(in srgb, white 78%, var(--bg-accent-surface) 22%);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-tuning-actions .ftp-inline-btn:hover:not(:disabled)[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 32%, var(--bg-accent-surface) 68%);
    background: color-mix(in srgb, white 10%, var(--bg-accent-surface) 90%);
    color: var(--text-primary);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-tuning-actions .ftp-inline-btn:disabled[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 18%, var(--bg-accent-surface) 82%);
    color: color-mix(in srgb, white 58%, var(--bg-accent-surface) 42%);
    opacity: 0.65;
}

.ftp-save-btn[b-hd88kleh9m] {
    min-width: 6rem;
    overflow: hidden;
    position: relative;
}

.ftp-save-btn.is-saving[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--accent) 56%, transparent);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--accent) 14%, transparent) 0%,
            color-mix(in srgb, var(--accent) 28%, transparent) 48%,
            color-mix(in srgb, var(--accent) 14%, transparent) 100%);
    background-size: 220% 100%;
    animation: ftp-skeleton-shift-b-hd88kleh9m 0.95s linear infinite;
}

.ftp-save-btn.is-saving:disabled[b-hd88kleh9m] {
    opacity: 0.88;
}

.ftp-save-btn.is-saved[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--success) 54%, transparent);
    background: color-mix(in srgb, var(--success) 18%, transparent);
    animation: ftp-select-pop-b-hd88kleh9m 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ftp-prompt-list[b-hd88kleh9m] {
    border: 1px solid color-mix(in srgb, var(--border-color) 94%, rgba(255, 255, 255, 0.04));
    border-radius: 0.95rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
}

.ftp-level-prompt-list[b-hd88kleh9m] {
    border: 1px solid color-mix(in srgb, var(--border-color) 94%, rgba(255, 255, 255, 0.04));
    border-radius: 0.82rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-prompt-list[b-hd88kleh9m] {
    display: grid;
    gap: 0.22rem;
    padding: 0.22rem;
    border-color: color-mix(in srgb, white 24%, var(--bg-accent-surface) 76%);
    background: color-mix(in srgb, var(--bg-surface) 10%, var(--bg-accent-surface) 90%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, var(--bg-accent-surface) 92%);
}

.ftp-prompt-row[b-hd88kleh9m] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.8rem 0.9rem;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.ftp-prompt-row + .ftp-prompt-row[b-hd88kleh9m] {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 92%, rgba(255, 255, 255, 0.04));
}

.ftp-level-prompt-row[b-hd88kleh9m] {
    padding: 0.72rem 0.82rem;
}

.ftp-level-prompt-row + .ftp-level-prompt-row[b-hd88kleh9m] {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 92%, rgba(255, 255, 255, 0.04));
}

.ftp-level-card.has-all-prompts-selected .ftp-level-prompt-row[b-hd88kleh9m] {
    border: 1px solid color-mix(in srgb, white 13%, var(--bg-accent-surface) 87%);
    border-radius: 0.64rem;
    background: color-mix(in srgb, white 7%, var(--bg-accent-surface) 93%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 8%, var(--bg-accent-surface) 92%),
        inset 3px 0 0 color-mix(in srgb, white 22%, var(--bg-accent-surface) 78%);
}

.ftp-level-card.has-all-prompts-selected .ftp-level-prompt-row:hover[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 22%, var(--bg-accent-surface) 78%);
    background: color-mix(in srgb, white 11%, var(--bg-accent-surface) 89%);
}

.ftp-level-card.is-selected .ftp-level-prompt-row.is-selected[b-hd88kleh9m] {
    border-color: var(--bg-accent-surface);
    background: var(--bg-accent-surface);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 10%, var(--bg-accent-surface) 90%),
        inset 3px 0 0 color-mix(in srgb, white 30%, var(--bg-accent-surface) 70%);
}

.ftp-level-card.is-selected .ftp-level-prompt-row.is-selected:hover[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 22%, var(--bg-accent-surface) 78%);
    background: color-mix(in srgb, white 8%, var(--bg-accent-surface) 92%);
}

.ftp-level-card.has-all-prompts-selected .ftp-prompt-row + .ftp-prompt-row[b-hd88kleh9m],
.ftp-level-card.has-all-prompts-selected .ftp-level-prompt-row + .ftp-level-prompt-row[b-hd88kleh9m] {
    border-top-color: color-mix(in srgb, white 13%, var(--bg-accent-surface) 87%);
}

.ftp-prompt-row input[b-hd88kleh9m] {
    margin-top: 0.2rem;
    inline-size: 1rem;
    block-size: 1rem;
    accent-color: var(--bg-accent-surface);
}

.ftp-level-card.is-selected .ftp-level-prompt-row.is-selected input[b-hd88kleh9m] {
    appearance: none;
    display: grid;
    place-content: center;
    border: 1px solid color-mix(in srgb, white 32%, var(--bg-accent-surface) 68%);
    border-radius: 0.24rem;
    background: color-mix(in srgb, white 8%, var(--bg-accent-surface) 92%);
    transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.ftp-level-card.is-selected .ftp-level-prompt-row.is-selected input[b-hd88kleh9m]::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.3rem;
    margin-block-start: -0.08rem;
    border-inline-start: 2px solid var(--text-primary);
    border-block-end: 2px solid var(--text-primary);
    transform: rotate(-45deg) scale(0);
    transition: transform 0.12s ease;
}

.ftp-level-card.is-selected .ftp-level-prompt-row.is-selected input:checked[b-hd88kleh9m] {
    border-color: color-mix(in srgb, white 44%, var(--bg-accent-surface) 56%);
    background: color-mix(in srgb, white 16%, var(--bg-accent-surface) 84%);
}

.ftp-level-card.is-selected .ftp-level-prompt-row.is-selected input:checked[b-hd88kleh9m]::before {
    transform: rotate(-45deg) scale(1);
}

.ftp-level-card.is-selected .ftp-level-prompt-row.is-selected input:focus-visible[b-hd88kleh9m] {
    outline: 2px solid color-mix(in srgb, white 34%, var(--bg-accent-surface) 66%);
    outline-offset: 2px;
}

.ftp-prompt-copy[b-hd88kleh9m] {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.ftp-prompt-primary[b-hd88kleh9m] {
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 700;
}

.ftp-prompt-secondary[b-hd88kleh9m] {
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.ftp-prompt-meta[b-hd88kleh9m],
.ftp-level-meta[b-hd88kleh9m] {
    font-size: 0.74rem;
}

.ftp-set-head[b-hd88kleh9m] {
    align-items: start;
}

.ftp-set-card[b-hd88kleh9m] {
    position: relative;
    overflow: hidden;
    padding: 0.95rem;
    display: grid;
    gap: 0.7rem;
    transform-origin: center;
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease,
        opacity 0.22s ease,
        filter 0.22s ease;
}

.ftp-set-title[b-hd88kleh9m] {
    font-size: 0.98rem;
}

.ftp-set-summary[b-hd88kleh9m],
.ftp-set-updated[b-hd88kleh9m] {
    font-size: 0.76rem;
}

.ftp-set-card.is-confirming-delete[b-hd88kleh9m] {
    border-color: color-mix(in srgb, #ff7a7a 32%, transparent);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16), 0 0 0 1px color-mix(in srgb, #ff7a7a 10%, transparent);
}

.ftp-set-card.is-recently-saved[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--success) 48%, transparent);
    background: color-mix(in srgb, var(--success) 8%, var(--bg-elevated));
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.16),
        0 0 0 1px color-mix(in srgb, var(--success) 12%, transparent);
    animation: ftp-cascade-in-b-hd88kleh9m 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ftp-set-card.is-recently-saved[b-hd88kleh9m]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    background: color-mix(in srgb, var(--success) 76%, transparent);
    pointer-events: none;
}

.ftp-set-card.is-deleting[b-hd88kleh9m] {
    pointer-events: none;
    animation: ftp-delete-card-out-b-hd88kleh9m 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

.ftp-set-actions[b-hd88kleh9m] {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.ftp-set-action[b-hd88kleh9m] {
    width: 100%;
    min-height: 2.45rem;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-content: center;
    padding-inline: 0.72rem;
    white-space: nowrap;
    line-height: 1;
}

.ftp-set-action--practice[b-hd88kleh9m] {
    position: relative;
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
    color: var(--text-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.ftp-set-action--practice:hover:not(:disabled)[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--accent) 76%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

.ftp-inline-btn--danger.is-armed[b-hd88kleh9m] {
    border-color: color-mix(in srgb, #ff7a7a 54%, transparent);
    background: color-mix(in srgb, #ff7a7a 12%, transparent);
    color: #ffd1d1;
    animation: ftp-delete-arm-b-hd88kleh9m 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ftp-inline-btn--danger.is-working[b-hd88kleh9m] {
    opacity: 0.72;
}

.ftp-delete-confirm[b-hd88kleh9m] {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem 0.82rem;
    border: 1px solid color-mix(in srgb, #ff7a7a 22%, transparent);
    border-radius: 0.82rem;
    background: color-mix(in srgb, #ff7a7a 7%, var(--bg-elevated));
    transform-origin: top center;
    animation: ftp-delete-confirm-in-b-hd88kleh9m 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ftp-delete-confirm-copy[b-hd88kleh9m] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.45;
}

.ftp-delete-confirm-actions[b-hd88kleh9m] {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

@keyframes ftp-delete-confirm-in-b-hd88kleh9m {
    0% {
        opacity: 0;
        transform: translateY(-8px) scaleY(0.82);
        filter: blur(4px);
    }

    60% {
        opacity: 1;
        transform: translateY(0) scaleY(1.03);
        filter: blur(0);
    }

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

@keyframes ftp-delete-arm-b-hd88kleh9m {
    0% {
        transform: scale(1);
    }

    38% {
        transform: scaleX(1.06) scaleY(0.92);
    }

    68% {
        transform: scaleX(0.98) scaleY(1.03);
    }

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

@keyframes ftp-delete-card-out-b-hd88kleh9m {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    24% {
        transform: translateX(-4px) scaleX(1.01);
    }

    100% {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
        filter: blur(6px);
    }
}

.ftp-sticky-bar[b-hd88kleh9m] {
    position: sticky;
    bottom: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, rgba(255, 255, 255, 0.08));
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
    backdrop-filter: blur(10px);
    transform-origin: bottom center;
    transition: transform 0.2s ease, border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.ftp-sticky-bar.is-live[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-surface));
    animation: ftp-select-pop-b-hd88kleh9m 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ftp-sticky-bar.is-save-ready[b-hd88kleh9m] {
    box-shadow:
        0 16px 28px rgba(0, 0, 0, 0.16),
        0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}

.ftp-sticky-bar.is-saving[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--border-color));
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--accent) 8%, var(--bg-surface)) 0%,
            color-mix(in srgb, var(--accent) 15%, var(--bg-surface)) 48%,
            color-mix(in srgb, var(--accent) 8%, var(--bg-surface)) 100%);
    background-size: 220% 100%;
    animation: ftp-skeleton-shift-b-hd88kleh9m 0.95s linear infinite;
}

.ftp-sticky-bar.is-saved[b-hd88kleh9m] {
    border-color: color-mix(in srgb, var(--success) 48%, var(--border-color));
    background: color-mix(in srgb, var(--success) 7%, var(--bg-surface));
    animation: ftp-select-pop-b-hd88kleh9m 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ftp-sticky-copy[b-hd88kleh9m] {
    display: grid;
    gap: 0.12rem;
}

.ftp-sticky-copy strong[b-hd88kleh9m] {
    color: var(--text-primary);
    font-size: 0.98rem;
}

.ftp-sticky-name[b-hd88kleh9m],
.ftp-sticky-summary[b-hd88kleh9m] {
    display: block;
    min-height: 1.2em;
}

.ftp-sticky-name:not(:empty)[b-hd88kleh9m],
.ftp-sticky-summary[b-hd88kleh9m] {
    animation: ftp-cascade-in-b-hd88kleh9m 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (max-width: 980px) {
    .custom-training-page[b-hd88kleh9m] {
        min-height: auto;
        height: auto;
        padding-bottom: 2rem;
        overflow: visible;
    }

    .ftp-layout[b-hd88kleh9m] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .ftp-library-panel[b-hd88kleh9m] {
        height: auto;
        overflow: visible;
    }

    .ftp-builder-panel[b-hd88kleh9m],
    .ftp-set-list[b-hd88kleh9m] {
        overflow: visible;
    }
}

@media (max-width: 720px) {
    .custom-training-page[b-hd88kleh9m] {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .ftp-panel[b-hd88kleh9m],
    .ftp-set-card[b-hd88kleh9m],
    .ftp-unit-card[b-hd88kleh9m],
    .ftp-prompt-list[b-hd88kleh9m],
    .ftp-sticky-bar[b-hd88kleh9m] {
        border-radius: 0.9rem;
    }

    .ftp-sticky-bar[b-hd88kleh9m],
    .ftp-panel-head[b-hd88kleh9m],
    .ftp-panel-head--builder[b-hd88kleh9m],
    .ftp-utility-row[b-hd88kleh9m] {
        flex-direction: column;
        align-items: stretch;
    }

    .ftp-set-actions[b-hd88kleh9m],
    .ftp-utility-actions[b-hd88kleh9m],
    .ftp-sticky-actions[b-hd88kleh9m] {
        justify-content: flex-start;
    }

    .ftp-set-actions[b-hd88kleh9m] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ftp-selected-levels[b-hd88kleh9m] {
        grid-template-columns: 1fr;
    }

    .ftp-level-row[b-hd88kleh9m] {
        grid-template-columns: 1fr;
    }

    .ftp-level-actions[b-hd88kleh9m] {
        justify-content: flex-start;
    }

    .ftp-level-select-btn[b-hd88kleh9m],
    .ftp-level-tune-btn[b-hd88kleh9m] {
        justify-self: start;
    }

    .ftp-unit-head[b-hd88kleh9m],
    .ftp-level-tuning-head[b-hd88kleh9m] {
        flex-direction: column;
        align-items: stretch;
    }

    .ftp-unit-select-btn[b-hd88kleh9m] {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cascade-in[b-hd88kleh9m] {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .ftp-name-shell[b-hd88kleh9m],
    .ftp-notice[b-hd88kleh9m],
    .ftp-unit-card[b-hd88kleh9m],
    .ftp-set-card[b-hd88kleh9m],
    .ftp-set-card[b-hd88kleh9m]::before,
    .ftp-level-card[b-hd88kleh9m],
    .ftp-level-card[b-hd88kleh9m]::before,
    .ftp-unit-summary[b-hd88kleh9m],
    .ftp-level-button[b-hd88kleh9m],
    .ftp-level-selection[b-hd88kleh9m],
    .ftp-level-state[b-hd88kleh9m],
    .ftp-level-select-btn[b-hd88kleh9m],
    .ftp-level-tune-btn[b-hd88kleh9m],
    .ftp-primary-btn[b-hd88kleh9m],
    .ftp-secondary-btn[b-hd88kleh9m],
    .ftp-inline-btn[b-hd88kleh9m],
    .ftp-save-btn[b-hd88kleh9m],
    .ftp-selected-chip[b-hd88kleh9m],
    .ftp-text-input[b-hd88kleh9m],
    .ftp-level-tuning-shell[b-hd88kleh9m],
    .ftp-level-tuning[b-hd88kleh9m],
    .ftp-sticky-bar[b-hd88kleh9m],
    .ftp-sticky-name[b-hd88kleh9m],
    .ftp-sticky-summary[b-hd88kleh9m],
    .ftp-set-action[b-hd88kleh9m],
    .ftp-delete-confirm[b-hd88kleh9m],
    .ftp-loading-card[b-hd88kleh9m] {
        transition: none;
        animation: none;
    }
}
/* /Pages/Friends.razor.rz.scp.css */
.friends-page[b-3524e8anao] {
    width: 100%;
    min-height: calc(100vh - var(--topbar-height));
    height: calc(100dvh - var(--topbar-height));
    padding: 0;
    overflow: hidden;
}

.friends-cascade[b-3524e8anao] {
    opacity: 0;
    animation: friends-profile-in-b-3524e8anao 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
    transform-origin: center center;
    will-change: transform, opacity;
}

@keyframes friends-profile-in-b-3524e8anao {
    0% {
        opacity: 0;
        transform: translateY(20px) scaleY(0.9) scaleX(1.03);
    }
    55% {
        opacity: 1;
        transform: translateY(-4px) scaleY(1.03) scaleX(0.99);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes friends-panel-snap-b-3524e8anao {
    0% {
        opacity: 0;
        transform: translateY(20px) scaleY(0.9) scaleX(1.03);
    }
    55% {
        opacity: 1;
        transform: translateY(-4px) scaleY(1.03) scaleX(0.99);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes friends-message-jump-b-3524e8anao {
    0% {
        opacity: 0;
        transform: translate3d(var(--message-enter-x, 0px), 24px, 0) scale(0.82);
        filter: blur(8px);
    }
    54% {
        opacity: 1;
        transform: translate3d(calc(var(--message-enter-x, 0px) * -0.16), -5px, 0) scale(1.04);
        filter: blur(0);
    }
    76% {
        opacity: 1;
        transform: translate3d(calc(var(--message-enter-x, 0px) * 0.05), 1px, 0) scale(0.992);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes friends-bubble-flash-b-3524e8anao {
    0% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    45% {
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.16);
    }
    100% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
}

.friends-loading[b-3524e8anao] {
    max-width: 28rem;
    margin: 0 auto;
    padding: 1.35rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        color-mix(in srgb, var(--bg-surface) 84%, transparent);
}

.friends-loading-title[b-3524e8anao],
.friends-roster-title[b-3524e8anao],
.friends-chat-empty h2[b-3524e8anao],
.friends-profile-copy h2[b-3524e8anao] {
    margin: 0;
    color: var(--text-primary);
}

.friends-loading-title[b-3524e8anao] {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.friends-shell[b-3524e8anao] {
    width: 100%;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(19rem, 22rem) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.friends-roster[b-3524e8anao],
.friends-chat[b-3524e8anao],
.friends-profile-card[b-3524e8anao] {
    border-radius: 1.45rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        color-mix(in srgb, var(--bg-surface) 90%, transparent);
    box-shadow: 0 28px 54px rgba(0, 0, 0, 0.22);
}

.friends-roster[b-3524e8anao],
.friends-chat[b-3524e8anao] {
    min-height: 0;
}

.friends-roster[b-3524e8anao] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 1rem 1rem 1.1rem;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.friends-chat[b-3524e8anao] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.friends-roster-body[b-3524e8anao] {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 0.95rem;
    overflow: auto;
    padding-right: 0.35rem;
}

.friends-roster-top[b-3524e8anao],
.friends-roster-body > *[b-3524e8anao],
.friends-chat-head[b-3524e8anao],
.friends-chat-empty[b-3524e8anao],
.friends-chat-log[b-3524e8anao],
.friends-chat-compose[b-3524e8anao] {
    opacity: 0;
    animation: friends-panel-snap-b-3524e8anao 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity, filter;
}

.friends-roster-top[b-3524e8anao] {
    --panel-enter-x: -26px;
    --panel-enter-y: 18px;
    animation-delay: 120ms;
}

.friends-roster-body > *[b-3524e8anao] {
    --panel-enter-x: -18px;
    --panel-enter-y: 18px;
}

.friends-roster-body > :nth-child(1)[b-3524e8anao] {
    animation-delay: 160ms;
}

.friends-roster-body > :nth-child(2)[b-3524e8anao] {
    animation-delay: 220ms;
}

.friends-roster-body > :nth-child(3)[b-3524e8anao] {
    animation-delay: 280ms;
}

.friends-roster-body > :nth-child(4)[b-3524e8anao] {
    animation-delay: 340ms;
}

.friends-chat-head[b-3524e8anao] {
    --panel-enter-x: 28px;
    --panel-enter-y: 16px;
    animation-delay: 180ms;
}

.friends-chat-empty[b-3524e8anao],
.friends-chat-log[b-3524e8anao] {
    --panel-enter-x: 34px;
    --panel-enter-y: 18px;
    animation-delay: 240ms;
}

.friends-chat-compose[b-3524e8anao] {
    --panel-enter-x: 30px;
    --panel-enter-y: 24px;
    animation-delay: 300ms;
}

.friends-kicker[b-3524e8anao],
.friends-search-label[b-3524e8anao],
.friends-profile-label[b-3524e8anao],
.friends-profile-stat-label[b-3524e8anao] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.friends-kicker[b-3524e8anao] {
    display: inline-flex;
    width: fit-content;
    padding: 0.36rem 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 800;
}

.friends-roster-top[b-3524e8anao] {
    display: grid;
    gap: 0.7rem;
}

.friends-roster-head[b-3524e8anao] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
}

.friends-roster-heading[b-3524e8anao] {
    min-width: 0;
}

.friends-roster-title[b-3524e8anao] {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.friends-add-btn[b-3524e8anao],
.friends-self-link[b-3524e8anao],
.friends-chat-back[b-3524e8anao],
.friends-chat-action[b-3524e8anao],
.friends-send-btn[b-3524e8anao],
.friends-profile-close[b-3524e8anao] {
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.friends-add-btn[b-3524e8anao],
.friends-chat-back[b-3524e8anao],
.friends-chat-action[b-3524e8anao],
.friends-profile-close[b-3524e8anao] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.85rem;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.friends-add-btn:disabled[b-3524e8anao] {
    opacity: 0.68;
    cursor: default;
}

.friends-add-btn[b-3524e8anao] {
    align-self: center;
    min-height: 2.05rem;
    padding: 0.42rem 0.78rem;
    font-size: 0.8rem;
    line-height: 1;
}

.friends-chat-back[b-3524e8anao] {
    display: none;
    min-height: 2.7rem;
    padding-inline: 0.9rem;
}

.friends-add-btn-plus[b-3524e8anao] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.8rem;
    font-size: 0.95rem;
    line-height: 1;
    transform: translateY(-0.04em);
}

.friends-search[b-3524e8anao] {
    display: grid;
    gap: 0.45rem;
}

.friends-add-panel[b-3524e8anao] {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        rgba(255, 255, 255, 0.02);
}

.friends-add-actions[b-3524e8anao] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.friends-add-submit[b-3524e8anao],
.friends-add-cancel[b-3524e8anao] {
    min-height: 2.75rem;
    padding: 0.72rem 0.95rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.friends-add-submit[b-3524e8anao] {
    border: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent-secondary) 72%, var(--accent)));
    color: #fff;
    box-shadow: 0 12px 22px color-mix(in srgb, var(--accent) 20%, transparent);
}

.friends-add-submit:disabled[b-3524e8anao] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.friends-add-submit:hover:not(:disabled)[b-3524e8anao] {
    transform: translateY(-1px);
    box-shadow: 0 16px 26px color-mix(in srgb, var(--accent) 24%, transparent);
}

.friends-add-cancel[b-3524e8anao] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.friends-add-cancel:hover[b-3524e8anao] {
    transform: translateY(-1px);
}

.friends-add-feedback[b-3524e8anao] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
}

.friends-add-feedback.error[b-3524e8anao] {
    color: #fca5a5;
}

.friends-add-feedback.success[b-3524e8anao] {
    color: #86efac;
}

.friends-request-groups[b-3524e8anao] {
    display: grid;
    gap: 0.8rem;
}

.friends-request-feedback[b-3524e8anao] {
    margin-top: -0.1rem;
}

.friends-request-section[b-3524e8anao] {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
        rgba(255, 255, 255, 0.02);
}

.friends-request-head[b-3524e8anao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.friends-request-count[b-3524e8anao] {
    min-width: 1.5rem;
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.friends-request-list[b-3524e8anao] {
    display: grid;
    gap: 0.5rem;
}

.friends-request-row[b-3524e8anao] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.7rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
}

.friends-request-avatar[b-3524e8anao] {
    width: 2.7rem;
    height: 2.7rem;
}

.friends-search-label[b-3524e8anao] {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--text-muted);
}

.friends-search-input[b-3524e8anao],
.friends-compose-input[b-3524e8anao] {
    width: 100%;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(6, 8, 14, 0.44);
    color: var(--text-primary);
    outline: none;
}

.friends-search-input[b-3524e8anao] {
    min-height: 2.75rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.friends-search-input[b-3524e8anao]::placeholder,
.friends-compose-input[b-3524e8anao]::placeholder {
    color: var(--text-muted);
}

.friends-search-input:focus[b-3524e8anao],
.friends-compose-input:focus[b-3524e8anao] {
    border-color: color-mix(in srgb, var(--accent) 44%, rgba(255, 255, 255, 0.14));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}

.friends-roster-list[b-3524e8anao] {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 0.55rem;
    overflow: visible;
    padding-right: 0;
}

.friends-empty-list[b-3524e8anao],
.friends-chat-empty[b-3524e8anao] {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 0.45rem;
    color: var(--text-secondary);
}

.friends-empty-list[b-3524e8anao] {
    min-height: 10rem;
    padding: 1.1rem;
    border-radius: 1.1rem;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.025);
}

.friends-empty-list strong[b-3524e8anao],
.friends-chat-empty-kicker[b-3524e8anao] {
    color: var(--text-primary);
}

.friends-empty-list p[b-3524e8anao],
.friends-chat-empty p[b-3524e8anao] {
    margin: 0;
}

.friends-friend-row[b-3524e8anao] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.72rem;
    align-items: center;
    padding: 0.62rem 0.72rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.friends-friend-row:hover[b-3524e8anao],
.friends-friend-row:focus-visible[b-3524e8anao] {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.friends-friend-row.active[b-3524e8anao] {
    border-color: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.1));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.friends-friend-avatar[b-3524e8anao],
.friends-chat-avatar[b-3524e8anao] {
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.friends-friend-avatar[b-3524e8anao] {
    width: 3rem;
    height: 3rem;
}

.friends-friend-avatar-placeholder[b-3524e8anao],
.friends-friend-avatar-img[b-3524e8anao],
.friends-request-avatar-placeholder[b-3524e8anao],
.friends-request-avatar-img[b-3524e8anao],
.friends-message-avatar-placeholder[b-3524e8anao],
.friends-message-avatar-img[b-3524e8anao],
.friends-chat-avatar-placeholder[b-3524e8anao],
.friends-chat-avatar-img[b-3524e8anao],
.friends-self-avatar-placeholder[b-3524e8anao],
.friends-self-avatar-img[b-3524e8anao],
.friends-profile-avatar-placeholder[b-3524e8anao],
.friends-profile-avatar-img[b-3524e8anao] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.friends-friend-avatar-placeholder[b-3524e8anao],
.friends-request-avatar-placeholder[b-3524e8anao],
.friends-message-avatar-placeholder[b-3524e8anao],
.friends-chat-avatar-placeholder[b-3524e8anao],
.friends-self-avatar-placeholder[b-3524e8anao],
.friends-profile-avatar-placeholder[b-3524e8anao] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, white), color-mix(in srgb, var(--accent-secondary) 68%, var(--accent)));
    color: #fff;
    font-weight: 800;
}

.friends-friend-body[b-3524e8anao],
.friends-request-body[b-3524e8anao],
.friends-friend-head[b-3524e8anao],
.friends-friend-preview-row[b-3524e8anao],
.friends-friend-line[b-3524e8anao],
.friends-request-line[b-3524e8anao] {
    min-width: 0;
}

.friends-friend-body[b-3524e8anao] {
    display: grid;
    gap: 0.16rem;
    align-self: center;
}

.friends-friend-head[b-3524e8anao] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.friends-request-body[b-3524e8anao] {
    display: grid;
    gap: 0.24rem;
}

.friends-friend-line[b-3524e8anao],
.friends-request-line[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.friends-friend-line[b-3524e8anao] {
    min-width: 0;
    flex-wrap: nowrap;
}

.friends-friend-line strong[b-3524e8anao],
.friends-request-line strong[b-3524e8anao] {
    min-width: 0;
    font-size: 0.96rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friends-friend-preview-row[b-3524e8anao] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
}

.friends-request-meta[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.friends-request-actions[b-3524e8anao] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.friends-request-btn[b-3524e8anao] {
    min-height: 2.3rem;
    padding: 0.58rem 0.82rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.friends-request-btn.primary[b-3524e8anao] {
    border: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent-secondary) 72%, var(--accent)));
    color: #fff;
    box-shadow: 0 12px 22px color-mix(in srgb, var(--accent) 18%, transparent);
}

.friends-request-btn:disabled[b-3524e8anao] {
    opacity: 0.58;
    cursor: not-allowed;
    box-shadow: none;
}

.friends-request-btn:hover:not(:disabled)[b-3524e8anao] {
    transform: translateY(-1px);
}

.friends-friend-title[b-3524e8anao],
.friends-chat-title[b-3524e8anao],
.friends-profile-title[b-3524e8anao] {
    display: inline-flex;
    width: fit-content;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
}

.friends-friend-preview[b-3524e8anao] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.81rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.friends-friend-meta[b-3524e8anao] {
    display: none;
}

.friends-friend-time[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.friends-friend-unread[b-3524e8anao] {
    min-width: 1.4rem;
    min-height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent-secondary) 76%, var(--accent)));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
}

.friends-self-card[b-3524e8anao] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.8rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.friends-self-avatar[b-3524e8anao] {
    width: 2.9rem;
    height: 2.9rem;
}

.friends-self-copy[b-3524e8anao] {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.friends-self-copy strong[b-3524e8anao] {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friends-self-copy span[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.friends-self-link[b-3524e8anao] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    text-decoration: none;
}

.friends-chat-head[b-3524e8anao],
.friends-chat-compose[b-3524e8anao] {
    padding: 1rem 1.2rem;
}

.friends-chat-head[b-3524e8anao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.friends-chat-identity[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    flex: 1;
}

.friends-chat-actions[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.friends-chat-avatar[b-3524e8anao] {
    width: 3.6rem;
    height: 3.6rem;
    flex: 0 0 3.6rem;
}

.friends-chat-identity-copy[b-3524e8anao] {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
}

.friends-chat-name-row[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.friends-chat-name-row h2[b-3524e8anao] {
    min-width: 0;
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friends-chat-identity-copy p[b-3524e8anao] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.friends-chat-log[b-3524e8anao] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.15rem 1.2rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 12%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.025), transparent 25%);
}

.friends-chat-history-more[b-3524e8anao] {
    display: flex;
    justify-content: center;
}

.friends-chat-history-btn[b-3524e8anao] {
    padding: 0.52rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        background 160ms ease;
}

.friends-chat-history-btn:hover:not(:disabled)[b-3524e8anao] {
    transform: translateY(-1px);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.12));
    background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.05));
}

.friends-chat-history-btn:disabled[b-3524e8anao] {
    opacity: 0.7;
    cursor: wait;
}

.friends-system-note[b-3524e8anao] {
    display: flex;
    justify-content: center;
}

.friends-system-note span[b-3524e8anao] {
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.friends-message[b-3524e8anao] {
    display: flex;
    align-items: flex-start;
    gap: 0.52rem;
    justify-content: flex-start;
    --message-enter-x: -32px;
    max-width: 100%;
}

.friends-message--mine[b-3524e8anao] {
    flex-direction: row-reverse;
    justify-content: flex-start;
    --message-enter-x: 32px;
}

.friends-message-avatar[b-3524e8anao] {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    flex: 0 0 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.friends-message-avatar:hover:not(:disabled)[b-3524e8anao] {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
    filter: brightness(1.03);
}

.friends-message-avatar--hidden[b-3524e8anao] {
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
}

.friends-message-avatar-placeholder[b-3524e8anao] {
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}

.friends-message-bubble[b-3524e8anao] {
    max-width: min(32rem, 78%);
    display: grid;
    min-width: 0;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    transform-origin: left bottom;
}

.friends-message--mine .friends-message-bubble[b-3524e8anao] {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.05);
    border-color: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.08));
    transform-origin: right bottom;
}

.friends-message--fresh[b-3524e8anao] {
    animation: friends-message-jump-b-3524e8anao 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.friends-message--fresh .friends-message-bubble[b-3524e8anao] {
    animation: friends-bubble-flash-b-3524e8anao 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.friends-message-bubble p[b-3524e8anao] {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.friends-message-meta[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.friends-message--mine .friends-message-meta[b-3524e8anao] {
    justify-content: flex-end;
}

.friends-message-time[b-3524e8anao],
.friends-message-read[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.friends-message-read[b-3524e8anao] {
    color: color-mix(in srgb, var(--accent) 58%, white);
}

.friends-chat-compose-shell[b-3524e8anao] {
    position: relative;
}

.friends-chat-compose[b-3524e8anao] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
    z-index: 1;
}

.friends-compose-field[b-3524e8anao] {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.friends-compose-topline[b-3524e8anao] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.friends-compose-label[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.friends-compose-counter[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.friends-compose-counter--error[b-3524e8anao] {
    color: #fca5a5;
}

.friends-compose-input-wrap[b-3524e8anao] {
    position: relative;
    display: grid;
}

.friends-compose-sidecar[b-3524e8anao] {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: end;
    gap: 0.38rem 0.45rem;
    min-width: 5.65rem;
    padding-bottom: 0.08rem;
}

.friends-compose-sidecar > .friends-compose-counter[b-3524e8anao] {
    grid-column: 1 / -1;
    grid-row: 1;
}

.friends-compose-sidecar > .friends-emoji-toggle[b-3524e8anao] {
    grid-column: 1;
    grid-row: 2;
}

.friends-compose-sidecar > .friends-send-btn[b-3524e8anao] {
    grid-column: 2;
    grid-row: 2;
}

.friends-chat-feedback[b-3524e8anao] {
    margin: 0;
    color: #fca5a5;
    font-size: 0.78rem;
    line-height: 1.4;
}

.friends-compose-input[b-3524e8anao] {
    min-height: 5rem;
    max-height: 9rem;
    resize: none;
    padding: 0.9rem 1rem;
    line-height: 1.55;
    font: inherit;
    overflow-wrap: anywhere;
}

.friends-compose-input--error[b-3524e8anao] {
    border-color: rgba(252, 165, 165, 0.65);
    box-shadow: 0 0 0 4px rgba(252, 165, 165, 0.08);
}

.friends-emoji-autocomplete[b-3524e8anao],
.friends-emoji-picker[b-3524e8anao] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), rgba(12, 14, 22, 0.96)),
        rgba(12, 14, 22, 0.96);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(16px);
}

.friends-emoji-autocomplete[b-3524e8anao] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.55rem);
    z-index: 3;
    display: grid;
    gap: 0.35rem;
    padding: 0.55rem;
    border-radius: 1rem;
}

.friends-emoji-suggestion[b-3524e8anao] {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    min-height: 2.8rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.friends-emoji-suggestion:hover[b-3524e8anao] {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.friends-emoji-suggestion-icon[b-3524e8anao] {
    font-size: 1.2rem;
    line-height: 1;
}

.friends-emoji-suggestion-code[b-3524e8anao] {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--text-primary);
}

.friends-emoji-suggestion-label[b-3524e8anao] {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friends-send-btn[b-3524e8anao] {
    width: 2.55rem;
    height: 2.55rem;
    min-width: 2.55rem;
    min-height: 2.55rem;
    padding: 0;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.friends-emoji-toggle[b-3524e8anao] {
    position: static;
    width: 2.55rem;
    height: 2.55rem;
    min-width: 2.55rem;
    min-height: 2.55rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.friends-emoji-toggle[aria-expanded="true"][b-3524e8anao] {
    border-color: color-mix(in srgb, var(--accent) 42%, rgba(255, 255, 255, 0.14));
    background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.05));
    box-shadow: 0 14px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.friends-emoji-toggle-icon[b-3524e8anao] {
    font-size: 1.3rem;
    line-height: 1;
}

.friends-emoji-toggle:hover[b-3524e8anao] {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
}

.friends-send-btn[b-3524e8anao] {
    border: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent-secondary) 72%, var(--accent)));
    color: #fff;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 22%, transparent);
    opacity: 0.5;
    cursor: not-allowed;
}

.friends-send-btn:not(:disabled)[b-3524e8anao] {
    opacity: 1;
    cursor: pointer;
}

.friends-send-btn:hover:not(:disabled)[b-3524e8anao] {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px color-mix(in srgb, var(--accent) 26%, transparent);
}

.friends-send-btn-icon[b-3524e8anao] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transform: translateY(-0.04em);
}

.friends-send-btn-icon svg[b-3524e8anao] {
    width: 1rem;
    height: 1rem;
    display: block;
}

.friends-emoji-picker[b-3524e8anao] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.8rem);
    z-index: 2;
    width: min(100%, 38rem);
    max-height: min(31rem, 60vh);
    display: grid;
    align-content: start;
    gap: 0.95rem;
    padding: 0.95rem;
    border-radius: 1.2rem;
    border-color: rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, rgba(18, 20, 30, 0.98)), rgba(11, 13, 21, 0.98)),
        rgba(11, 13, 21, 0.98);
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.34);
    overflow: auto;
}

.friends-emoji-toolbar[b-3524e8anao] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    gap: 0.7rem;
    padding-bottom: 0.55rem;
    background: transparent;
}

.friends-picker-topline[b-3524e8anao] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
}

.friends-picker-tabs[b-3524e8anao] {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem;
    padding: 0.26rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.05rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.018);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.friends-picker-tab[b-3524e8anao] {
    min-height: 2.45rem;
    padding: 0.58rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.88rem;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.friends-picker-tab:hover[b-3524e8anao] {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.friends-picker-tab--active[b-3524e8anao] {
    border-color: color-mix(in srgb, var(--accent) 42%, rgba(255, 255, 255, 0.1));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.08)), rgba(255, 255, 255, 0.09)),
        rgba(255, 255, 255, 0.05);
    color: #fff;
    box-shadow: 0 12px 22px color-mix(in srgb, var(--accent) 18%, transparent);
}

.friends-picker-count[b-3524e8anao] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    padding: 0.52rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.018);
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.friends-emoji-search-shell[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.68rem;
    min-height: 3rem;
    padding: 0.24rem 0.72rem 0.24rem 0.82rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.02rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.friends-emoji-search-shell:focus-within[b-3524e8anao] {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, rgba(255, 255, 255, 0.04)), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.024);
}

.friends-emoji-search-shell:hover[b-3524e8anao] {
    border-color: rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.05)),
        rgba(255, 255, 255, 0.045);
}

.friends-emoji-search-icon[b-3524e8anao] {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1;
    opacity: 0.9;
}

.friends-emoji-search-input[b-3524e8anao] {
    width: 100%;
    min-height: 2.45rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}

.friends-emoji-search-input[b-3524e8anao]::placeholder {
    color: var(--text-muted);
}

.friends-emoji-search-input:focus[b-3524e8anao] {
    outline: none;
    box-shadow: none;
}

.friends-emoji-group[b-3524e8anao] {
    display: grid;
    gap: 0.62rem;
}

.friends-emoji-group-head[b-3524e8anao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-top: 0.08rem;
}

.friends-emoji-grid[b-3524e8anao] {
    display: grid;
    gap: 0.45rem;
}

.friends-emoji-button-grid[b-3524e8anao] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.friends-kaomoji-grid[b-3524e8anao] {
    grid-template-columns: repeat(auto-fill, minmax(10.2rem, 1fr));
}

.friends-emoji-button[b-3524e8anao] {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    background: transparent;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.friends-emoji-button:hover[b-3524e8anao] {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}

.friends-emoji-button:focus-visible[b-3524e8anao] {
    border-color: color-mix(in srgb, var(--accent) 42%, rgba(255, 255, 255, 0.14));
    background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.04));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
    outline: none;
}

.friends-emoji-button-icon[b-3524e8anao] {
    font-size: 1.65rem;
    line-height: 1;
}

.friends-emoji-chip[b-3524e8anao] {
    min-height: 3.1rem;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.22rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.friends-emoji-chip:hover[b-3524e8anao] {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.1);
}

.friends-kaomoji-chip[b-3524e8anao] {
    min-height: 4rem;
    justify-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.7rem 0.8rem;
}

.friends-kaomoji-chip-text[b-3524e8anao] {
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--text-primary);
}

.friends-kaomoji-chip-label[b-3524e8anao] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.25;
}

.friends-emoji-empty[b-3524e8anao] {
    margin: 0;
    padding: 1rem 0.2rem 0.4rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.friends-chat-empty[b-3524e8anao] {
    min-height: 100%;
    padding: 2rem;
}

.friends-chat-empty-kicker[b-3524e8anao] {
    font-size: 0.64rem;
    font-weight: 800;
    color: var(--text-muted);
}

.friends-profile-overlay[b-3524e8anao] {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: auto;
    padding: calc(var(--topbar-height) + 1rem) 1.25rem 1.5rem;
    background: rgba(5, 6, 10, 0.7);
    backdrop-filter: blur(14px);
    animation: friends-profile-overlay-in-b-3524e8anao 0.24s ease both;
}

.friends-profile-page[b-3524e8anao] {
    width: min(100%, 1080px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.friends-profile-cascade[b-3524e8anao] {
    opacity: 0;
    animation: friends-profile-in-b-3524e8anao 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
    will-change: transform, opacity;
}

@keyframes friends-profile-overlay-in-b-3524e8anao {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.friends-profile-page-head[b-3524e8anao] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.friends-profile-page-heading[b-3524e8anao] {
    display: grid;
    gap: 0.25rem;
}

.friends-profile-page-kicker[b-3524e8anao],
.friends-profile-section-count[b-3524e8anao],
.friends-profile-rank-stat-label[b-3524e8anao] {
    font-size: 0.64rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.friends-profile-page-kicker[b-3524e8anao] {
    display: inline-flex;
    width: fit-content;
    padding: 0.34rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}

.friends-profile-page-heading h2[b-3524e8anao] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
}

.friends-profile-surface[b-3524e8anao] {
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        color-mix(in srgb, var(--bg-surface) 90%, transparent);
    box-shadow: 0 28px 54px rgba(0, 0, 0, 0.22);
}

.friends-profile-hero-card[b-3524e8anao] {
    overflow: hidden;
}

.friends-profile-close[b-3524e8anao] {
    min-height: 2.55rem;
    padding: 0.65rem 0.95rem;
}

.friends-profile-hero-top[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding: 1.75rem 1.75rem 1.3rem;
}

.friends-profile-avatar-col[b-3524e8anao] {
    flex-shrink: 0;
}

.friends-profile-avatar-ring[b-3524e8anao] {
    position: relative;
    width: 5.75rem;
    height: 5.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    padding: 3px;
    box-shadow: 0 0 24px var(--accent-glow), 0 0 48px var(--accent-subtle);
}

.friends-profile-avatar-placeholder[b-3524e8anao],
.friends-profile-avatar-img[b-3524e8anao] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.friends-profile-avatar-placeholder[b-3524e8anao] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: #fff;
    font-size: 2.1rem;
    font-weight: 800;
}

.friends-profile-level-badge[b-3524e8anao] {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--bg-surface) 92%, transparent);
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    white-space: nowrap;
}

.friends-profile-hero-copy[b-3524e8anao] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.friends-profile-hero-copy h1[b-3524e8anao] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.7rem;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.friends-profile-player-code[b-3524e8anao] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.friends-profile-equipped-title[b-3524e8anao] {
    display: inline-flex;
    width: fit-content;
    padding: 0.16rem 0.58rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: color-mix(in srgb, var(--accent) 90%, white);
    font-size: 0.72rem;
    font-weight: 700;
}

.friends-profile-bio[b-3524e8anao] {
    margin: 0.1rem 0 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.friends-profile-xp-bar-section[b-3524e8anao],
.friends-profile-rank-bar-section[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.friends-profile-xp-bar[b-3524e8anao],
.friends-profile-rank-bar[b-3524e8anao] {
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.friends-profile-xp-bar-fill[b-3524e8anao],
.friends-profile-rank-bar-fill[b-3524e8anao] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
    box-shadow: 0 0 10px var(--accent-glow);
}

.friends-profile-xp-label[b-3524e8anao],
.friends-profile-rank-bar-label[b-3524e8anao],
.friends-profile-rank-subtitle[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.friends-profile-meta[b-3524e8anao] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.45rem;
}

.friends-profile-coins[b-3524e8anao] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.friends-profile-coins-icon[b-3524e8anao],
.friends-profile-coins-value[b-3524e8anao] {
    color: #f59e0b;
}

.friends-profile-coins-value[b-3524e8anao] {
    font-size: 0.95rem;
    font-weight: 800;
}

.friends-profile-pill[b-3524e8anao] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.friends-profile-pill--streak[b-3524e8anao] {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
}

.friends-profile-pill-value[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.friends-profile-pill-label[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.friends-profile-pill-bonus[b-3524e8anao] {
    color: #f59e0b;
    font-size: 0.68rem;
    font-weight: 800;
}

.friends-profile-stats-strip[b-3524e8anao] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.friends-profile-highlights-panel[b-3524e8anao] {
    display: grid;
    gap: 0.95rem;
    padding: 1rem 1.75rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 46%);
}

.friends-profile-highlights-head[b-3524e8anao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.friends-profile-highlights-head .friends-profile-section-title[b-3524e8anao] {
    margin: 0;
}

.friends-profile-highlights-groups[b-3524e8anao] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0.85rem;
}

.friends-profile-highlights-group[b-3524e8anao] {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.friends-profile-highlight-kicker[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.friends-profile-highlight-stats[b-3524e8anao] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.55rem;
}

.friends-profile-highlight-stat[b-3524e8anao] {
    display: grid;
    gap: 0.12rem;
    padding: 0.75rem 0.8rem;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.08));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.03);
}

.friends-profile-highlight-stat-value[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 800;
}

.friends-profile-highlight-stat-label[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.friends-profile-highlight-achievements[b-3524e8anao] {
    display: grid;
    gap: 0.55rem;
}

.friends-profile-highlight-achievement[b-3524e8anao] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.72rem 0.8rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.friends-profile-highlight-achievement-icon[b-3524e8anao] {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-size: 1.1rem;
}

.friends-profile-highlight-achievement-copy[b-3524e8anao] {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.friends-profile-highlight-achievement-name[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.friends-profile-highlight-achievement-desc[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.4;
}

.friends-profile-stat-chip[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    padding: 0.85rem 0.25rem;
}

.friends-profile-stat-chip-value[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 800;
}

.friends-profile-stat-chip-label[b-3524e8anao],
.friends-profile-title-equipped[b-3524e8anao],
.friends-profile-next-goal-tag[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.friends-profile-titles-section[b-3524e8anao] {
    padding: 1rem 1.75rem 1.35rem;
}

.friends-profile-section-title[b-3524e8anao] {
    margin: 0 0 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.98rem;
    font-weight: 700;
}

.friends-profile-titles-list[b-3524e8anao] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.friends-profile-title-card[b-3524e8anao] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.72rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.friends-profile-title-card.equipped[b-3524e8anao] {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.friends-profile-title-card.locked[b-3524e8anao] {
    opacity: 0.42;
}

.friends-profile-title-label[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 700;
}

.friends-profile-title-equipped[b-3524e8anao] {
    color: color-mix(in srgb, var(--accent) 88%, white);
}

.friends-profile-rank-section[b-3524e8anao],
.friends-profile-achievements-section[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.friends-profile-rank-link[b-3524e8anao] {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
}

.friends-profile-rank-link:hover[b-3524e8anao] {
    color: var(--accent);
}

.friends-profile-rank-card[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.25rem;
}

.friends-profile-rank-head[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.friends-profile-rank-icon[b-3524e8anao] {
    font-size: 1.7rem;
    line-height: 1;
}

.friends-profile-rank-head-copy[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.friends-profile-rank-name[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 800;
}

.friends-profile-rank-stats[b-3524e8anao] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.friends-profile-rank-stat[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    padding: 0.72rem 0.5rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
}

.friends-profile-rank-stat-value[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 1.04rem;
    font-weight: 800;
}

.friends-profile-next-goal[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-radius: 0.85rem;
    border: 1px dashed color-mix(in srgb, var(--accent) 28%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.friends-profile-next-goal-tag[b-3524e8anao] {
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    color: color-mix(in srgb, var(--accent) 88%, white);
    flex-shrink: 0;
}

.friends-profile-next-goal-icon[b-3524e8anao] {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.friends-profile-next-goal-copy[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.friends-profile-next-goal-name[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
}

.friends-profile-next-goal-desc[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.friends-profile-achievements-grid[b-3524e8anao] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.friends-profile-achievement-card[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.friends-profile-achievement-card.locked[b-3524e8anao] {
    opacity: 0.4;
}

.friends-profile-achievement-icon-wrap[b-3524e8anao] {
    width: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.friends-profile-achievement-card.unlocked .friends-profile-achievement-icon-wrap[b-3524e8anao] {
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.friends-profile-achievement-icon[b-3524e8anao] {
    font-size: 1.2rem;
}

.friends-profile-achievement-body[b-3524e8anao] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.friends-profile-achievement-name[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
}

.friends-profile-achievement-desc[b-3524e8anao],
.friends-profile-achievement-date[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.friends-profile-achievement-date[b-3524e8anao] {
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.1rem;
}

.friends-profile-overlay[b-3524e8anao] {
    overflow: hidden;
    padding: calc(var(--topbar-height) + 0.35rem) 0.75rem 0.85rem;
}

.friends-profile-page[b-3524e8anao] {
    width: 100%;
    max-width: none;
    position: relative;
    min-height: 0;
    height: calc(100dvh - var(--topbar-height) - 1.2rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.45rem;
}

.friends-profile-page-head[b-3524e8anao] {
    min-height: 2.55rem;
    justify-content: flex-end;
    gap: 0;
}

.friends-profile-page-heading[b-3524e8anao] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.friends-profile-surface[b-3524e8anao] {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
}

.friends-profile-surface[b-3524e8anao]::before {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -8rem;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 72%);
    filter: blur(10px);
}

.friends-profile-surface > *[b-3524e8anao] {
    position: relative;
    z-index: 1;
}

.friends-profile-board[b-3524e8anao] {
    width: 100%;
    min-height: 0;
    height: 100%;
}

.friends-profile-board-grid[b-3524e8anao] {
    display: grid;
    grid-template-columns: clamp(22rem, 29vw, 31rem) minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
    min-height: 100%;
    height: 100%;
}

.friends-profile-rail[b-3524e8anao],
.friends-profile-board-main[b-3524e8anao] {
    min-width: 0;
}

.friends-profile-rail[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1rem 1rem 1.1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.friends-profile-avatar-stage[b-3524e8anao] {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
}

.friends-profile-avatar-ring[b-3524e8anao] {
    --ring-size: min(100%, 12.2rem);
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0.78rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.11) 0 54%, transparent 55%),
        conic-gradient(from -90deg, color-mix(in srgb, var(--accent) 92%, white) 0 var(--xp-progress, 0%), rgba(255, 255, 255, 0.09) var(--xp-progress, 0%) 100%);
    box-shadow: 0 0 20px var(--accent-subtle), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.friends-profile-avatar-ring[b-3524e8anao]::before {
    content: "";
    position: absolute;
    inset: 0.4rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 68%);
}

.friends-profile-avatar-core[b-3524e8anao] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    padding: 0.3rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
        color-mix(in srgb, var(--bg-elevated) 92%, black);
}

.friends-profile-avatar-placeholder[b-3524e8anao],
.friends-profile-avatar-img[b-3524e8anao] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.friends-profile-avatar-placeholder[b-3524e8anao] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-elevated) 86%, black);
    color: #fff;
    font-size: clamp(3rem, 8vw, 4rem);
    font-weight: 800;
}

.friends-profile-avatar-level[b-3524e8anao] {
    position: absolute;
    left: 50%;
    bottom: 0.95rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.22rem;
    transform: translateX(-50%);
    padding: 0.36rem 0.68rem 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(9, 11, 24, 0.76);
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(10px);
}

.friends-profile-avatar-level-label[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.friends-profile-avatar-level-value[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
}

.friends-profile-avatar-progress[b-3524e8anao] {
    display: grid;
    gap: 0.18rem;
    justify-items: center;
    text-align: center;
}

.friends-profile-progress-value[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 800;
}

.friends-profile-progress-meta[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.friends-profile-nameplate[b-3524e8anao],
.friends-profile-description-block[b-3524e8anao] {
    display: grid;
    gap: 0.55rem;
}

.friends-profile-title-slot[b-3524e8anao] {
    display: flex;
    justify-content: flex-start;
    width: fit-content;
    min-width: 0;
    align-items: center;
}

.friends-profile-equipped-title[b-3524e8anao] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: color-mix(in srgb, var(--accent) 90%, white);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.friends-profile-equipped-title--empty[b-3524e8anao] {
    color: var(--text-muted);
}

.friends-profile-name-slot[b-3524e8anao] {
    min-height: 4rem;
}

.friends-profile-display-name-shell[b-3524e8anao] {
    width: 100%;
    min-height: 4rem;
    padding: 0.9rem 1rem;
    box-sizing: border-box;
    border-radius: 1rem;
    display: flex;
    align-items: center;
}

.friends-profile-display-name[b-3524e8anao] {
    display: block;
    color: var(--text-primary);
    font-size: clamp(2rem, 3vw, 2.65rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.045em;
}

.friends-profile-player-code[b-3524e8anao],
.friends-profile-field-label[b-3524e8anao],
.friends-profile-section-value[b-3524e8anao],
.friends-profile-summary-label[b-3524e8anao],
.friends-profile-stat-label[b-3524e8anao],
.friends-profile-title-equipped[b-3524e8anao],
.friends-profile-next-goal-tag[b-3524e8anao] {
    color: var(--text-muted);
    font-weight: 800;
    text-transform: uppercase;
}

.friends-profile-player-code[b-3524e8anao] {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
}

.friends-profile-field-label[b-3524e8anao],
.friends-profile-section-value[b-3524e8anao],
.friends-profile-summary-label[b-3524e8anao],
.friends-profile-stat-label[b-3524e8anao],
.friends-profile-title-equipped[b-3524e8anao],
.friends-profile-next-goal-tag[b-3524e8anao] {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

.friends-profile-description-slot[b-3524e8anao] {
    min-height: 7.35rem;
}

.friends-profile-bio[b-3524e8anao] {
    display: block;
    margin: 0;
    min-height: 7.35rem;
    padding: 0.9rem 1rem;
    box-sizing: border-box;
    border-radius: 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022)),
        color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.friends-profile-bio--placeholder[b-3524e8anao] {
    color: var(--text-muted);
}

.friends-profile-highlights-block[b-3524e8anao] {
    display: grid;
    gap: 0.75rem;
}

.friends-profile-highlights-head[b-3524e8anao],
.friends-profile-highlights-group-head[b-3524e8anao],
.friends-profile-summary-head[b-3524e8anao],
.friends-profile-section-head[b-3524e8anao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.friends-profile-highlights-empty[b-3524e8anao] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.friends-profile-highlights-group[b-3524e8anao] {
    display: grid;
    gap: 0.55rem;
}

.friends-profile-highlights-group + .friends-profile-highlights-group[b-3524e8anao] {
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.friends-profile-highlight-stat-grid[b-3524e8anao] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.friends-profile-highlight-stat[b-3524e8anao] {
    display: grid;
    gap: 0.12rem;
    padding: 0.58rem 0.68rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.025);
}

.friends-profile-highlight-stat-value[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.1;
}

.friends-profile-highlight-stat-label[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.friends-profile-highlight-achievement-list[b-3524e8anao] {
    display: grid;
    gap: 0.42rem;
}

.friends-profile-highlight-achievement[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.58rem;
    min-width: 0;
    padding: 0.5rem 0.64rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.02);
}

.friends-profile-highlight-achievement-icon[b-3524e8anao] {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: 1rem;
    flex-shrink: 0;
}

.friends-profile-highlight-achievement-name[b-3524e8anao] {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.friends-profile-summary-grid[b-3524e8anao] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.friends-profile-summary-card[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.9rem 0.95rem;
}

.friends-profile-summary-card:first-child[b-3524e8anao] {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.friends-profile-summary-link[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.18s ease;
}

.friends-profile-summary-link:hover[b-3524e8anao] {
    color: var(--accent);
}

.friends-profile-rank-row[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.friends-profile-rank-icon[b-3524e8anao] {
    font-size: 1.75rem;
    line-height: 1;
}

.friends-profile-rank-copy[b-3524e8anao] {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.friends-profile-summary-value[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 800;
}

.friends-profile-summary-meta[b-3524e8anao] {
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.4;
}

.friends-profile-summary-support[b-3524e8anao] {
    margin-top: auto;
    color: var(--text-muted);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.friends-profile-progress-bar[b-3524e8anao] {
    height: 0.55rem;
    margin-top: auto;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.friends-profile-progress-bar-fill[b-3524e8anao] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
    box-shadow: 0 0 12px var(--accent-glow);
}

.friends-profile-board-main[b-3524e8anao] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 100%;
    overflow: hidden;
}

.friends-profile-dashboard-section[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.15rem;
    min-width: 0;
}

.friends-profile-dashboard-section + .friends-profile-dashboard-section[b-3524e8anao] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.friends-profile-section-title[b-3524e8anao] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 700;
}

.friends-profile-titles-list[b-3524e8anao] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.friends-profile-title-card[b-3524e8anao] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.72rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.friends-profile-title-card.equipped[b-3524e8anao] {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.friends-profile-title-card.locked[b-3524e8anao] {
    opacity: 0.42;
}

.friends-profile-title-label[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 700;
}

.friends-profile-stats-grid[b-3524e8anao] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.3rem 0.85rem;
}

.friends-profile-stat-card[b-3524e8anao] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.35rem 0 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.friends-profile-stat-value[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1;
}

.friends-profile-achievements-section[b-3524e8anao] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 1rem;
    min-height: 0;
    overflow: hidden;
}

.friends-profile-next-goal[b-3524e8anao] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.9rem;
    border: 1px dashed color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 0.9rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.friends-profile-next-goal-name[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.friends-profile-next-goal-desc[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.friends-profile-achievements-grid[b-3524e8anao] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 0.75rem;
    overflow: auto;
    padding-right: 0.35rem;
    align-content: start;
    min-height: 0;
}

.friends-profile-achievement-card[b-3524e8anao] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.78rem 0.86rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.friends-profile-achievement-card.locked[b-3524e8anao] {
    opacity: 0.46;
}

.friends-profile-achievement-icon-wrap[b-3524e8anao] {
    width: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.friends-profile-achievement-card.unlocked .friends-profile-achievement-icon-wrap[b-3524e8anao] {
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.friends-profile-achievement-icon[b-3524e8anao] {
    font-size: 1.2rem;
}

.friends-profile-achievement-body[b-3524e8anao] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.friends-profile-achievement-name[b-3524e8anao] {
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
}

.friends-profile-achievement-desc[b-3524e8anao],
.friends-profile-achievement-date[b-3524e8anao] {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.friends-profile-achievement-date[b-3524e8anao] {
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.1rem;
}
.friends-add-btn:hover:not(:disabled)[b-3524e8anao],
.friends-self-link:hover[b-3524e8anao],
.friends-chat-back:hover[b-3524e8anao],
.friends-chat-action:hover[b-3524e8anao],
.friends-profile-close:hover[b-3524e8anao] {
    transform: translateY(-1px);
    text-decoration: none;
}

@media (max-width: 980px) {
    .friends-page[b-3524e8anao] {
        min-height: calc(100dvh - var(--topbar-height));
        height: auto;
        overflow: visible;
    }

    .friends-shell[b-3524e8anao] {
        min-height: calc(100dvh - var(--topbar-height));
        height: auto;
        grid-template-columns: 1fr;
    }

    .friends-roster[b-3524e8anao] {
        grid-template-rows: auto minmax(0, 1fr);
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-inline: 1rem;
    }

    .friends-roster-body[b-3524e8anao] {
        overflow: visible;
        padding-right: 0;
    }

    .friends-roster-list[b-3524e8anao] {
        max-height: 24rem;
        overflow: auto;
    }
}

@media (max-width: 640px) {
    body.friends-mobile-chat-open .friends-page[b-3524e8anao],
    body.friends-mobile-chat-open .friends-shell[b-3524e8anao] {
        min-height: 100dvh;
        height: 100dvh;
    }

    body.friends-mobile-chat-open .friends-profile-overlay[b-3524e8anao] {
        padding-top: max(0.7rem, env(safe-area-inset-top));
    }

    .friends-page[b-3524e8anao] {
        height: calc(100dvh - var(--topbar-height));
        overflow: hidden;
        overscroll-behavior-y: none;
    }

    .friends-shell[b-3524e8anao] {
        display: block;
        box-sizing: border-box;
        min-height: calc(100dvh - var(--topbar-height));
        height: calc(100dvh - var(--topbar-height));
        padding: 0;
        overscroll-behavior-y: none;
    }

    .friends-roster[b-3524e8anao],
    .friends-chat[b-3524e8anao] {
        box-sizing: border-box;
        min-height: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: hidden;
    }

    .friends-chat[b-3524e8anao] {
        display: none;
    }

    .friends-roster[b-3524e8anao] {
        gap: 0.85rem;
        padding:
            0.9rem
            calc(0.85rem + env(safe-area-inset-right))
            calc(0.85rem + env(safe-area-inset-bottom))
            calc(0.85rem + env(safe-area-inset-left));
        border-right: none;
        border-bottom: none;
        overscroll-behavior-y: none;
    }

    .friends-roster-top[b-3524e8anao] {
        touch-action: none;
        overscroll-behavior-y: none;
    }

    .friends-shell--mobile-chat-open .friends-roster[b-3524e8anao] {
        display: none;
    }

    .friends-shell--mobile-chat-open .friends-chat[b-3524e8anao] {
        display: grid;
    }

    .friends-roster-body[b-3524e8anao] {
        gap: 0.75rem;
        overflow: auto;
        padding-right: 0;
        overscroll-behavior: contain;
    }

    .friends-roster-list[b-3524e8anao] {
        max-height: none;
        overflow: visible;
        gap: 0.6rem;
    }

    .friends-roster-top[b-3524e8anao] {
        gap: 0.7rem;
    }

    .friends-roster-head[b-3524e8anao] {
        gap: 0.65rem;
    }

    .friends-roster-heading[b-3524e8anao] {
        min-width: 0;
    }

    .friends-roster-title[b-3524e8anao] {
        font-size: 1.4rem;
    }

    .friends-add-btn[b-3524e8anao] {
        justify-self: end;
        min-height: 1.95rem;
        padding: 0.38rem 0.72rem;
        font-size: 0.78rem;
    }

    .friends-search-input[b-3524e8anao] {
        min-height: 2.6rem;
        padding: 0.62rem 0.82rem;
        font-size: 0.86rem;
    }

    .friends-add-panel[b-3524e8anao] {
        gap: 0.7rem;
        padding: 0.8rem;
        border-radius: 1rem;
    }

    .friends-chat-head[b-3524e8anao] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-content: stretch;
        gap: 0.62rem;
        padding:
            0.68rem
            calc(0.78rem + env(safe-area-inset-right))
            0.66rem
            calc(0.78rem + env(safe-area-inset-left));
    }

    .friends-chat-back[b-3524e8anao] {
        display: inline-flex;
        min-height: 2.05rem;
        min-width: 2.2rem;
        padding-inline: 0.56rem;
        font-size: 0.78rem;
        line-height: 1;
    }

    .friends-chat-compose[b-3524e8anao] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.42rem;
        padding:
            0.66rem
            calc(0.78rem + env(safe-area-inset-right))
            calc(0.72rem + env(safe-area-inset-bottom))
            calc(0.78rem + env(safe-area-inset-left));
    }

    .friends-add-actions[b-3524e8anao] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .friends-request-row[b-3524e8anao] {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .friends-request-actions[b-3524e8anao] {
        width: 100%;
        display: grid;
        grid-column: 1 / -1;
        justify-content: stretch;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .friends-request-actions > .friends-request-btn:only-child[b-3524e8anao] {
        grid-column: 1 / -1;
    }

    .friends-request-avatar[b-3524e8anao] {
        width: 2.45rem;
        height: 2.45rem;
    }

    .friends-request-line[b-3524e8anao] {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .friends-friend-row[b-3524e8anao] {
        align-items: center;
        gap: 0.68rem;
        padding: 0.58rem 0.68rem;
        border-radius: 0.95rem;
    }

    .friends-friend-avatar[b-3524e8anao] {
        width: 2.7rem;
        height: 2.7rem;
    }

    .friends-friend-line[b-3524e8anao] {
        align-items: center;
        gap: 0.3rem;
    }

    .friends-self-card[b-3524e8anao] {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.7rem;
        padding: 0.75rem;
        border-radius: 1rem;
    }

    .friends-self-avatar[b-3524e8anao] {
        width: 2.65rem;
        height: 2.65rem;
    }

    .friends-self-link[b-3524e8anao] {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 2.35rem;
    }

    .friends-send-btn[b-3524e8anao] {
        width: 2.2rem;
        height: 2.2rem;
        min-width: 2.2rem;
        min-height: 2.2rem;
        border-radius: 0.8rem;
    }

    .friends-chat-identity[b-3524e8anao] {
        gap: 0.58rem;
    }

    .friends-chat-avatar[b-3524e8anao] {
        width: 2.65rem;
        height: 2.65rem;
        flex-basis: 2.65rem;
    }

    .friends-message[b-3524e8anao] {
        gap: 0.42rem;
    }

    .friends-message-avatar[b-3524e8anao] {
        width: 1.86rem;
        height: 1.86rem;
        min-width: 1.86rem;
        min-height: 1.86rem;
        flex-basis: 1.86rem;
    }

    .friends-message-avatar-placeholder[b-3524e8anao] {
        font-size: 0.74rem;
    }

    .friends-chat-name-row[b-3524e8anao] {
        flex-wrap: nowrap;
        gap: 0.28rem;
    }

    .friends-chat-name-row h2[b-3524e8anao] {
        font-size: 1rem;
        line-height: 1.02;
        white-space: nowrap;
    }

    .friends-chat-identity-copy p[b-3524e8anao] {
        font-size: 0.76rem;
        line-height: 1.25;
    }

    .friends-chat-log[b-3524e8anao] {
        gap: 0.58rem;
        padding:
            0.74rem
            calc(0.78rem + env(safe-area-inset-right))
            0.74rem
            calc(0.78rem + env(safe-area-inset-left));
    }

    .friends-message-bubble[b-3524e8anao] {
        max-width: min(21rem, 88%);
        gap: 0.24rem;
        padding: 0.62rem 0.74rem;
        border-radius: 0.9rem;
    }

    .friends-message--mine .friends-message-bubble[b-3524e8anao] {
        max-width: min(19rem, 82%);
    }

    .friends-message-bubble p[b-3524e8anao] {
        font-size: 0.94rem;
        line-height: 1.42;
    }

    .friends-message-time[b-3524e8anao],
    .friends-message-read[b-3524e8anao] {
        font-size: 0.66rem;
    }

    .friends-compose-label[b-3524e8anao] {
        font-size: 0.56rem;
    }

    .friends-compose-counter[b-3524e8anao] {
        font-size: 0.62rem;
    }

    .friends-compose-sidecar[b-3524e8anao] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: center;
        align-self: center;
        gap: 0.32rem;
        min-width: 2.2rem;
        padding-bottom: 0;
    }

    .friends-compose-input[b-3524e8anao] {
        min-height: 3.5rem;
        max-height: 6.75rem;
        padding: 0.7rem 0.78rem;
        font-size: 0.92rem;
    }

    .friends-picker-tabs[b-3524e8anao] {
        width: 100%;
    }

    .friends-picker-topline[b-3524e8anao] {
        grid-template-columns: 1fr;
    }

    .friends-picker-tab[b-3524e8anao] {
        min-width: 0;
    }

    .friends-picker-count[b-3524e8anao] {
        justify-self: start;
        min-height: 2.1rem;
        padding-inline: 0.78rem;
    }

    .friends-emoji-toggle[b-3524e8anao] {
        display: none;
        width: 2.2rem;
        height: 2.2rem;
        min-width: 2.2rem;
        min-height: 2.2rem;
    }

    .friends-compose-sidecar > .friends-compose-counter[b-3524e8anao] {
        grid-column: 1;
        grid-row: 1;
    }

    .friends-compose-sidecar > .friends-send-btn[b-3524e8anao] {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        align-self: center;
    }

    .friends-emoji-autocomplete[b-3524e8anao] {
        display: none;
        bottom: calc(100% + 0.45rem);
    }

    .friends-emoji-picker[b-3524e8anao] {
        display: none;
        left: 0;
        right: 0;
        width: 100%;
        max-height: min(28rem, 52vh);
        padding: 0.75rem;
    }

    .friends-emoji-search-shell[b-3524e8anao] {
        min-height: 2.82rem;
        padding-left: 0.76rem;
        padding-right: 0.66rem;
    }

    .friends-emoji-button[b-3524e8anao] {
        width: 2.8rem;
        height: 2.8rem;
        min-width: 2.8rem;
        min-height: 2.8rem;
        border-radius: 0.82rem;
    }

    .friends-emoji-button-icon[b-3524e8anao] {
        font-size: 1.55rem;
    }

    .friends-kaomoji-grid[b-3524e8anao] {
        grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr));
    }

    .friends-chat-empty[b-3524e8anao] {
        padding: 1.5rem 1rem;
    }

    .friends-profile-page-head[b-3524e8anao],
    .friends-profile-hero-top[b-3524e8anao] {
        grid-template-columns: 1fr;
        display: grid;
    }

    .friends-profile-close[b-3524e8anao] {
        justify-self: start;
    }

    .friends-profile-overlay[b-3524e8anao] {
        padding:
            calc(var(--topbar-height) + 0.7rem)
            max(0.7rem, env(safe-area-inset-right))
            calc(0.9rem + env(safe-area-inset-bottom))
            max(0.7rem, env(safe-area-inset-left));
    }

    .friends-profile-rank-stats[b-3524e8anao],
    .friends-profile-achievements-grid[b-3524e8anao] {
        grid-template-columns: 1fr;
    }

    .friends-profile-highlights-groups[b-3524e8anao] {
        grid-template-columns: 1fr;
    }

    .friends-profile-stats-strip[b-3524e8anao] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .friends-profile-highlights-panel[b-3524e8anao],
    .friends-profile-titles-section[b-3524e8anao],
    .friends-profile-rank-card[b-3524e8anao] {
        padding-inline: 1rem;
    }

    .friends-profile-next-goal[b-3524e8anao] {
        flex-wrap: wrap;
    }
}

@media (max-width: 980px) {
    .friends-profile-board-grid[b-3524e8anao] {
        grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .friends-profile-overlay[b-3524e8anao] {
        overflow: auto;
    }

    .friends-profile-page[b-3524e8anao] {
        height: auto;
        display: flex;
    }

    .friends-profile-board[b-3524e8anao] {
        min-height: auto;
        height: auto;
    }

    .friends-profile-board-grid[b-3524e8anao] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .friends-profile-rail[b-3524e8anao] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        min-height: auto;
        overflow: visible;
    }

    .friends-profile-board-main[b-3524e8anao] {
        min-height: auto;
        overflow: visible;
    }

    .friends-profile-achievements-section[b-3524e8anao] {
        min-height: auto;
        overflow: visible;
    }

    .friends-profile-achievements-grid[b-3524e8anao] {
        overflow: visible;
        padding-right: 0;
    }
}

@media (min-width: 641px) and (max-width: 820px) {
    .friends-profile-achievements-grid[b-3524e8anao] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .friends-profile-page-head[b-3524e8anao] {
        grid-template-columns: 1fr;
        display: grid;
    }

    .friends-profile-close[b-3524e8anao] {
        justify-self: end;
    }

    .friends-profile-rail[b-3524e8anao],
    .friends-profile-dashboard-section[b-3524e8anao] {
        padding: 1rem;
    }

    .friends-profile-summary-grid[b-3524e8anao] {
        grid-template-columns: 1fr;
    }

    .friends-profile-summary-card:first-child[b-3524e8anao] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .friends-profile-highlight-stat-grid[b-3524e8anao],
    .friends-profile-achievements-grid[b-3524e8anao] {
        grid-template-columns: 1fr;
    }

    .friends-profile-stats-grid[b-3524e8anao] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem 0.75rem;
    }

    .friends-profile-avatar-ring[b-3524e8anao] {
        --ring-size: min(100%, 12rem);
    }

    .friends-profile-display-name[b-3524e8anao] {
        font-size: 1.75rem;
    }
}

@media (max-width: 420px) {
    .friends-roster[b-3524e8anao] {
        padding:
            0.82rem
            calc(0.75rem + env(safe-area-inset-right))
            calc(0.78rem + env(safe-area-inset-bottom))
            calc(0.75rem + env(safe-area-inset-left));
    }

    .friends-request-actions[b-3524e8anao] {
        grid-template-columns: 1fr;
    }

    .friends-chat-head[b-3524e8anao],
    .friends-chat-log[b-3524e8anao],
    .friends-chat-compose[b-3524e8anao] {
        padding-left: calc(0.68rem + env(safe-area-inset-left));
        padding-right: calc(0.68rem + env(safe-area-inset-right));
    }
}

@media (prefers-reduced-motion: reduce) {
    .friends-cascade[b-3524e8anao],
    .friends-profile-cascade[b-3524e8anao],
    .friends-roster-top[b-3524e8anao],
    .friends-roster-body > *[b-3524e8anao],
    .friends-self-card[b-3524e8anao],
    .friends-chat-head[b-3524e8anao],
    .friends-chat-empty[b-3524e8anao],
    .friends-chat-log[b-3524e8anao],
    .friends-chat-compose[b-3524e8anao],
    .friends-friend-row[b-3524e8anao],
    .friends-message--fresh[b-3524e8anao],
    .friends-message--fresh .friends-message-bubble[b-3524e8anao],
    .friends-add-btn[b-3524e8anao],
    .friends-add-submit[b-3524e8anao],
    .friends-add-cancel[b-3524e8anao],
    .friends-request-btn[b-3524e8anao],
    .friends-self-link[b-3524e8anao],
    .friends-chat-action[b-3524e8anao],
    .friends-profile-close[b-3524e8anao],
    .friends-profile-overlay[b-3524e8anao] {
        animation: none;
        transition: none;
    }
}
/* /Pages/HiraganaPractice.razor.rz.scp.css */
/* Hiragana/Katakana practice-specific layout adjustments */

[b-jxzg1618hi] .practice-page--wide-prompt {
    --prompt-control-max-inline: 760px;
}

[b-jxzg1618hi] .practice-page--wide-prompt .active-boosts-row,
[b-jxzg1618hi] .practice-page--wide-prompt .group-bar,
[b-jxzg1618hi] .practice-page--wide-prompt .level-progress-bar-row,
[b-jxzg1618hi] .practice-page--wide-prompt .hearts-row,
[b-jxzg1618hi] .practice-page--wide-prompt .stats-line-wrap,
[b-jxzg1618hi] .practice-page--wide-prompt .hint-card {
    width: min(100%, 720px);
    margin-inline: auto;
}

[b-jxzg1618hi] .practice-page--wide-prompt .active-boosts-row {
    margin: 0;
}

.active-boosts-row[b-jxzg1618hi] {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: -0.2rem 0 1rem;
}

.active-boost-pill[b-jxzg1618hi] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.07));
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.12);
}

.active-boost-pill-label[b-jxzg1618hi] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fbbf24;
}

.active-boost-pill-name[b-jxzg1618hi] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}

.active-boost-pill-meta[b-jxzg1618hi] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ?? Voice opt-out ????????????????????????????????????????????????????????? */

.btn-voice-skip[b-jxzg1618hi] {
    display: block;
    margin: 0.8rem auto 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.74rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.2rem 0.4rem;
    transition: color 0.12s ease;
}

.btn-voice-skip:hover[b-jxzg1618hi] {
    color: var(--text-secondary);
}



/* ?? Group bar ???????????????????????????????????? */

.group-bar[b-jxzg1618hi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    width: 100%;
}

.practice-page--wide-prompt .group-bar[b-jxzg1618hi] {
    margin-bottom: 0.55rem;
}

.group-chip[b-jxzg1618hi] {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.group-chip:hover[b-jxzg1618hi] {
    border-color: var(--accent);
    color: var(--accent);
}

.group-chip:disabled[b-jxzg1618hi],
.group-chip.locked[b-jxzg1618hi] {
    cursor: not-allowed;
    opacity: 0.42;
}

.group-chip:disabled:hover[b-jxzg1618hi],
.group-chip.locked:hover[b-jxzg1618hi] {
    border-color: var(--border-color);
    color: var(--text-muted);
}

.group-chip.active[b-jxzg1618hi] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.group-tooltip[b-jxzg1618hi] {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    padding: 0.36rem 0.62rem;
    border: 1px solid var(--accent-glow);
    border-radius: 0.55rem;
    background: rgba(15, 18, 30, 0.94);
    color: var(--text-primary);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* ?? Inline stats ????????????????????????????????? */

.stats-line-wrap[b-jxzg1618hi] {
    margin-bottom: clamp(0.5rem, min(3vw, 2svh), 2rem);
}

[b-jxzg1618hi] .practice-page--wide-prompt .stats-line-wrap {
    margin-bottom: clamp(0.8rem, 2vw, 1.35rem);
}

/* ?? XP popup ?????????????????????????????????????? */

.xp-popup[b-jxzg1618hi] {
    position: absolute;
    right: 0;
    top: 50%;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
    pointer-events: none;
    white-space: nowrap;
    animation: xp-float-b-jxzg1618hi 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes xp-float-b-jxzg1618hi {
    0% {
        opacity: 1;
        transform: translateY(-50%) scale(0.7);
    }
    15% {
        opacity: 1;
        transform: translateY(-50%) scale(1.25);
    }
    30% {
        transform: translateY(-50%) scale(0.95);
    }
    65% {
        opacity: 1;
        transform: translateY(calc(-50% - 12px)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(calc(-50% - 22px)) scale(0.85);
    }
}

/* ?? Level-up notification ???????????????????????? */

/*
 * Choreography:
 *   0.00s  wrapper drops in (squish-bounce)
 *   0.38s  core lands with impact squish (as wrapper settles)
 *   0.50s  ring starts drawing
 *   1.40s  ring completes ? climax glow
 *   1.40s  aura blooms from the ring energy
 *   1.42s  whole card recoils from the climax (connects ring ? badge)
 *   1.50s  badge pops out of the recoil
 *   1.85s  badge glow flare
 *   2.10s+ hold, then exit with reverse squish
 */

.lu-wrap[b-jxzg1618hi] {
    position: fixed;
    top: calc(var(--topbar-height) + 1rem);
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    pointer-events: none;
    animation: lu-slide-b-jxzg1618hi 2.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lu-slide-b-jxzg1618hi {
    0% {
        opacity: 0;
        transform: translateY(-30px) scaleY(0.65) scaleX(1.15);
    }
    7% {
        opacity: 1;
        transform: translateY(8px) scaleY(1.14) scaleX(0.92);
    }
    11% {
        transform: translateY(-4px) scaleY(0.95) scaleX(1.04);
    }
    15% {
        transform: translateY(2px) scaleY(1.03) scaleX(0.99);
    }
    19% {
        transform: translateY(0) scale(1);
    }
    82% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    90% {
        opacity: 0.9;
        transform: translateY(-3px) scaleY(1.06) scaleX(0.96);
    }
    95% {
        transform: translateY(-10px) scaleY(0.85) scaleX(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-24px) scaleY(0.7) scaleX(1.14);
    }
}

.lu-card[b-jxzg1618hi] {
    --lu-size: 8.75rem;
    position: relative;
    width: var(--lu-size);
    height: calc(var(--lu-size) + 1.2rem);
    filter: drop-shadow(0 0 16px var(--accent-glow));
    animation: lu-card-recoil-b-jxzg1618hi 0.4s cubic-bezier(0.34, 1.8, 0.64, 1) 1.42s both;
}

@keyframes lu-card-recoil-b-jxzg1618hi {
    0%   { transform: scale(1); }
    35%  { transform: scaleY(0.92) scaleX(1.08); }
    65%  { transform: scaleY(1.05) scaleX(0.97); }
    85%  { transform: scaleY(0.99) scaleX(1.01); }
    100% { transform: scale(1); }
}

.lu-aura[b-jxzg1618hi] {
    position: absolute;
    inset: 0.65rem;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--accent) 24%, transparent) 0%,
        color-mix(in srgb, var(--accent) 10%, transparent) 42%,
        transparent 72%);
    opacity: 0;
    transform: scale(0.6);
    animation: lu-aura-b-jxzg1618hi 2.8s ease-out both;
}

@keyframes lu-aura-b-jxzg1618hi {
    0%, 49% { opacity: 0; transform: scale(0.6); }
    52% { opacity: 0.9; transform: scaleX(1.12) scaleY(0.92); }
    58% { opacity: 0.7; transform: scaleX(0.96) scaleY(1.06); }
    65% { opacity: 0.5; transform: scale(1.1); }
    80% { opacity: 0.3; transform: scale(1.18); }
    100% { opacity: 0; transform: scale(1.24); }
}

.lu-ring[b-jxzg1618hi] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.lu-ring-track[b-jxzg1618hi],
.lu-ring-fill[b-jxzg1618hi] {
    fill: none;
    stroke-width: 4;
}

.lu-ring-track[b-jxzg1618hi] {
    stroke: color-mix(in srgb, var(--accent) 18%, transparent);
}

.lu-ring-fill[b-jxzg1618hi] {
    stroke: var(--accent-secondary);
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    filter: drop-shadow(0 0 4px var(--accent-glow));
    animation: lu-ring-draw-b-jxzg1618hi 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards,
               lu-ring-climax-b-jxzg1618hi 0.45s ease-out 1.4s forwards;
}

@keyframes lu-ring-draw-b-jxzg1618hi {
    0% {
        stroke-dashoffset: 326.73;
        filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent-secondary) 22%, transparent));
    }
    100% {
        stroke-dashoffset: 0;
        filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-secondary) 44%, transparent));
    }
}

@keyframes lu-ring-climax-b-jxzg1618hi {
    0% {
        stroke-width: 4;
        filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-secondary) 44%, transparent));
    }
    45% {
        stroke-width: 7;
        filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent-secondary) 82%, transparent))
                drop-shadow(0 0 38px color-mix(in srgb, var(--accent) 55%, transparent));
    }
    100% {
        stroke-width: 4.5;
        filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-secondary) 55%, transparent))
                drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 30%, transparent));
    }
}

.lu-core[b-jxzg1618hi] {
    position: absolute;
    inset: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--accent);
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 0 16px var(--accent-glow);
    background: radial-gradient(circle at 50% 44%,
        rgba(32, 25, 53, 0.88) 0%,
        rgba(24, 19, 41, 0.94) 58%,
        rgba(18, 14, 31, 0.98) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
    animation: lu-core-squish-b-jxzg1618hi 0.5s cubic-bezier(0.34, 1.8, 0.64, 1) 0.38s both;
}

@keyframes lu-core-squish-b-jxzg1618hi {
    0%   { transform: scale(0.4); opacity: 0; }
    30%  { transform: scaleY(1.18) scaleX(0.85); opacity: 1; }
    52%  { transform: scaleY(0.9) scaleX(1.1); }
    72%  { transform: scaleY(1.04) scaleX(0.97); }
    88%  { transform: scaleY(0.99) scaleX(1.01); }
    100% { transform: scale(1); opacity: 1; }
}

.lu-badge[b-jxzg1618hi] {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scale(0);
    min-width: 3.35rem;
    padding: 0.36rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent-secondary) 0%, var(--accent) 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    border: 2px solid rgba(21, 16, 37, 0.92);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 34%, transparent),
                0 0 18px color-mix(in srgb, var(--accent) 24%, transparent);
    animation: lu-badge-pop-b-jxzg1618hi 0.5s cubic-bezier(0.34, 1.8, 0.64, 1) 1.5s forwards,
               lu-badge-glow-b-jxzg1618hi 0.45s ease-out 1.85s forwards;
}

@keyframes lu-badge-pop-b-jxzg1618hi {
    0%   { transform: translateX(-50%) scale(0) rotate(-4deg); }
    35%  { transform: translateX(-50%) scaleX(1.28) scaleY(0.75) rotate(2deg); }
    55%  { transform: translateX(-50%) scaleX(0.88) scaleY(1.14) rotate(-1deg); }
    75%  { transform: translateX(-50%) scaleX(1.06) scaleY(0.96) rotate(0deg); }
    90%  { transform: translateX(-50%) scaleX(0.98) scaleY(1.02); }
    100% { transform: translateX(-50%) scale(1); }
}

@keyframes lu-badge-glow-b-jxzg1618hi {
    0% {
        box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 34%, transparent),
                    0 0 18px color-mix(in srgb, var(--accent) 24%, transparent);
    }
    50% {
        box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 44%, transparent),
                    0 0 28px color-mix(in srgb, var(--accent-secondary) 72%, transparent),
                    0 0 54px color-mix(in srgb, var(--accent) 34%, transparent);
    }
    100% {
        box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 34%, transparent),
                    0 0 18px color-mix(in srgb, var(--accent) 24%, transparent);
    }
}

/* ?? Coin popup ???????????????????????????????????? */

.coin-popup[b-jxzg1618hi] {
    position: absolute;
    left: 0;
    top: 50%;
    color: #f59e0b;
    font-size: 0.8rem;
    font-weight: 700;
    pointer-events: none;
    white-space: nowrap;
    animation: coin-float-b-jxzg1618hi 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes coin-float-b-jxzg1618hi {
    0% {
        opacity: 1;
        transform: translateY(-50%) scale(0.7);
    }
    15% {
        opacity: 1;
        transform: translateY(-50%) scale(1.3);
    }
    30% {
        transform: translateY(-50%) scale(0.95);
    }
    65% {
        opacity: 1;
        transform: translateY(calc(-50% - 12px)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(calc(-50% - 22px)) scale(0.85);
    }
}

/* Live star rating shown in the progress bar row during level practice */

.lp-live-stars[b-jxzg1618hi] {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.25s ease;
}

.lp-live-stars--3[b-jxzg1618hi] { color: #f59e0b; }
.lp-live-stars--2[b-jxzg1618hi] { color: var(--accent); }
.lp-live-stars--1[b-jxzg1618hi] { color: var(--text-muted); }

/* ?? Kana stage ??????????????????????????????????? */

/* TTS play button in kana-stage */

.kana-stage[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: clamp(0.5rem, min(5vw, 4svh), 3rem) 0 clamp(0.5rem, min(4vw, 3svh), 2.5rem);
    margin-bottom: clamp(0.5rem, min(3vw, 2svh), 2rem);
}

.practice-question-shell--legacy[b-jxzg1618hi],
.practice-answer-shell--legacy[b-jxzg1618hi] {
    display: contents;
}

.prompt-region[b-jxzg1618hi] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.prompt-region-body[b-jxzg1618hi] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.prompt-region-meta[b-jxzg1618hi] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.prompt-slot[b-jxzg1618hi] {
    width: 100%;
    min-height: clamp(7.5rem, min(24vw, 18svh), 13rem);
    display: grid;
    place-items: center;
    overflow: visible;
}

.prompt-slot--bleed[b-jxzg1618hi] {
    width: 100%;
    max-width: 100%;
}

.question-block--prompt-first[b-jxzg1618hi] {
    display: block;
    width: 100%;
}

.practice-question-shell[b-jxzg1618hi] {
    width: 100%;
}

.practice-page--wide-prompt .practice-active-body[b-jxzg1618hi] {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: clamp(0.45rem, 1vw, 0.8rem);
}

.practice-page--wide-prompt .practice-prompt-section[b-jxzg1618hi] {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.35rem, 1vw, 0.65rem);
}

.practice-page--wide-prompt .practice-prompt-controls[b-jxzg1618hi] {
    width: min(100%, var(--prompt-control-max-inline));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.practice-answer-section[b-jxzg1618hi] {
    width: 100%;
}

.practice-answer-shell[b-jxzg1618hi] {
    width: min(100%, 720px);
    margin-inline: auto;
}

.practice-prompt-toolbar[b-jxzg1618hi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/* Practice furigana prompt (romaji over kana) */

.practice-furi-display[b-jxzg1618hi] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(0.05rem, calc(2.5cqi / var(--segs, 8)), 0.25rem);
    width: 100%;
    text-align: center;
    container-type: inline-size;
}

.pf-word[b-jxzg1618hi] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
}

.pf-word-segs[b-jxzg1618hi] {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.05rem, calc(2.5cqi / var(--segs, 8)), 0.25rem);
}

.pf-seg[b-jxzg1618hi] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.pf-reading[b-jxzg1618hi] {
    font-size: clamp(0.55rem, calc(13cqi / var(--segs, 8)), 0.9rem);
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    font-family: system-ui, -apple-system, sans-serif;
}

.pf-kana[b-jxzg1618hi] {
    font-size: clamp(1.8rem, calc(78cqi / var(--segs, 8)), 5rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

.pf-gap[b-jxzg1618hi] {
    width: clamp(0.2rem, calc(6cqi / var(--segs, 8)), 0.8rem);
}

.pf-particle .pf-reading[b-jxzg1618hi] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.pf-particle .pf-kana[b-jxzg1618hi] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.practice-page--wide-prompt .prompt-informal[b-jxzg1618hi] {
    margin-top: 0;
}

.practice-kanji-display[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    max-width: min(100%, 40rem);
    text-align: center;
}

.practice-kanji-reading[b-jxzg1618hi] {
    font-size: clamp(0.92rem, min(2.6vw, 2.1svh), 1.12rem);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    line-height: 1.4;
}

.practice-kanji-text[b-jxzg1618hi] {
    font-size: clamp(2.25rem, min(10vw, 8svh), 5rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-primary);
    word-break: keep-all;
}

.practice-kanji-meaning[b-jxzg1618hi] {
    font-size: 1rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.listening-reveal-kanji[b-jxzg1618hi] {
    gap: 0.4rem;
}

.tts-prompt-btn[b-jxzg1618hi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--accent-glow);
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tts-prompt-btn:hover[b-jxzg1618hi] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: scale(1.08);
}

.tts-prompt-btn:active[b-jxzg1618hi] {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.tts-prompt-icon[b-jxzg1618hi] {
    width: 0.95rem;
    height: 0.95rem;
}

.tts-label[b-jxzg1618hi] {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.kana-character[b-jxzg1618hi] {
    font-size: clamp(4rem, min(22vw, 20svh), 13rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    max-width: min(100%, 40rem);
    white-space: nowrap;
    word-break: keep-all;
    text-wrap: nowrap;
    overflow-wrap: normal;
    text-align: center;
}

.kana-character.prompt-len-1[b-jxzg1618hi] {
    font-size: clamp(4rem, min(22vw, 20svh), 13rem);
}

.kana-character.prompt-len-2[b-jxzg1618hi] {
    font-size: clamp(3.7rem, min(19vw, 16svh), 10rem);
}

.kana-character.prompt-len-3[b-jxzg1618hi] {
    font-size: clamp(3.2rem, min(16vw, 13svh), 8rem);
}

.kana-character.prompt-len-4[b-jxzg1618hi] {
    font-size: clamp(2.7rem, min(13vw, 11svh), 6.6rem);
}

.kana-character.prompt-len-5[b-jxzg1618hi] {
    font-size: clamp(2.3rem, min(11vw, 9svh), 5.6rem);
}

.kana-character.prompt-len-6plus[b-jxzg1618hi] {
    font-size: clamp(1.9rem, min(9vw, 8svh), 4.9rem);
}

.kana-character.romaji-prompt[b-jxzg1618hi] {
    font-size: clamp(3rem, min(14vw, 12svh), 6.5rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

/* Vocabulary prompt: Japanese word (multiple kana) */
.kana-character.vocab-prompt[b-jxzg1618hi] {
    font-size: clamp(2.5rem, min(12vw, 10svh), 6rem);
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
}

/* For 6+ char vocab words, scale down so the full word fits on one line.
   Formula: max ? container-width / 8 chars ? 5rem; vw tracks the viewport. */
.kana-character.vocab-prompt.prompt-len-6plus[b-jxzg1618hi] {
    font-size: clamp(1.5rem, min(11vw, 9svh), 5rem);
    max-width: 100%;
}

/* Vocabulary prompt: English meaning (may be multi-word) */
.kana-character.vocab-english-prompt[b-jxzg1618hi] {
    font-size: clamp(1.8rem, min(8vw, 7svh), 3.5rem);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.kana-stage.empty[b-jxzg1618hi] {
    padding: 4rem 0;
}

.kana-empty[b-jxzg1618hi] {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ?? Kana enter animation ????????????????????????? */

.kana-enter[b-jxzg1618hi] {
    animation: kana-in-b-jxzg1618hi 0.42s cubic-bezier(0.34, 1.8, 0.64, 1) both;
}

@keyframes kana-in-b-jxzg1618hi {
    0% {
        opacity: 0;
        transform: translateX(40px) scaleX(1.15) scaleY(0.88);
        filter: blur(6px);
    }
    55% {
        opacity: 1;
        transform: translateX(-5px) scaleX(0.96) scaleY(1.04);
        filter: blur(0);
    }
    78% {
        transform: translateX(2px) scaleX(1.01) scaleY(0.99);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

/* ?? Question block (keyed animation wrapper) ????? */

.question-block[b-jxzg1618hi] {
    width: 100%;
    display: contents;
}

/* ?? Answer area ?????????????????????????????????? */

.answer-area[b-jxzg1618hi] {
    position: relative;
    width: 100%;
    margin-bottom: clamp(0.5rem, min(3vw, 2svh), 2rem);
}

.choices-grid[b-jxzg1618hi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ?? Choice buttons ??????????????????????????????? */

.choice-btn[b-jxzg1618hi] {
position: relative;
padding: 1.1rem;
border: 1.5px solid var(--border-color);
border-radius: 0.6rem;
background: var(--bg-surface);
color: var(--text-primary);
font-size: 1.35rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition:
        border-color 0.18s ease,
        background   0.18s ease,
        color        0.18s ease,
        transform    0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow   0.18s ease,
        opacity      0.25s ease;
    animation: choice-in-b-jxzg1618hi 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

.choices-grid .choice-btn:nth-child(1)[b-jxzg1618hi] { --i: 0; }
.choices-grid .choice-btn:nth-child(2)[b-jxzg1618hi] { --i: 1; }
.choices-grid .choice-btn:nth-child(3)[b-jxzg1618hi] { --i: 2; }
.choices-grid .choice-btn:nth-child(4)[b-jxzg1618hi] { --i: 3; }

@keyframes choice-in-b-jxzg1618hi {
    0% {
        opacity: 0;
        transform: translateY(20px) scaleY(0.82) scaleX(1.06);
    }
    50% {
        opacity: 1;
        transform: translateY(-4px) scaleY(1.05) scaleX(0.97);
    }
    75% {
        transform: translateY(1px) scaleY(0.99) scaleX(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hover: lift + accent edge glow */
.choice-btn:hover:not(:disabled)[b-jxzg1618hi] {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: translateY(-3px) scale(1.025);
    box-shadow: 0 0 16px var(--accent-glow);
}

/* Press: squash down */
.choice-btn:active:not(:disabled)[b-jxzg1618hi] {
    transform: translateY(2px) scaleY(0.93) scaleX(1.04);
    transition-duration: 0.06s;
}

/* ?? Correct answer ??????????????????????????????? */

.choice-btn.correct[b-jxzg1618hi] {
    border-color: var(--success);
    background: var(--success-subtle);
    color: var(--success);
    font-weight: 600;
    animation: pop-correct-b-jxzg1618hi 0.38s cubic-bezier(0.34, 1.8, 0.64, 1);
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.35), inset 0 0 14px rgba(34, 197, 94, 0.08);
}

@keyframes pop-correct-b-jxzg1618hi {
    0%   { transform: scale(1); }
    20%  { transform: scaleX(1.14) scaleY(0.9); }
    45%  { transform: scaleX(0.95) scaleY(1.08); }
    70%  { transform: scaleX(1.02) scaleY(0.98); }
    100% { transform: scale(1); }
}

/* ?? Wrong answer ????????????????????????????????? */

.choice-btn.wrong[b-jxzg1618hi] {
    border-color: var(--error);
    background: var(--error-subtle);
    color: var(--error);
    animation: shake-wrong-b-jxzg1618hi 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.3);
}

@keyframes shake-wrong-b-jxzg1618hi {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    8%       { transform: translateX(-8px) rotate(-2.5deg) scaleX(0.97); }
    20%      { transform: translateX(8px) rotate(2.5deg) scaleX(1.03); }
    32%      { transform: translateX(-6px) rotate(-1.5deg); }
    44%      { transform: translateX(5px) rotate(1deg); }
    56%      { transform: translateX(-3px) rotate(-0.5deg); }
    68%      { transform: translateX(2px); }
    80%      { transform: translateX(-1px); }
}

/* ?? Dimmed (non-selected, non-correct) ??????????? */

.choice-btn.dimmed[b-jxzg1618hi] {
    opacity: 0.2;
    cursor: default;
    transform: scale(0.97);
}

/* ?? Feedback enter ??????????????????????????????? */

.feedback[b-jxzg1618hi] {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + clamp(0.42rem, 1.2vw, 0.85rem));
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0;
}

.feedback-enter[b-jxzg1618hi] {
    animation: feedback-in-b-jxzg1618hi 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes feedback-in-b-jxzg1618hi {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.88);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.03);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fb-msg[b-jxzg1618hi] {
    font-size: 0.95rem;
    font-weight: 600;
}

.fb-msg.wrong[b-jxzg1618hi] { color: var(--error); }
.fb-msg.correct[b-jxzg1618hi] { color: var(--success); }

/* ?? Type mode ???????????????????????????????????? */

.type-area[b-jxzg1618hi] {
    width: 100%;
}

.type-input-row[b-jxzg1618hi] {
    display: flex;
    gap: 0.5rem;
}

.type-input[b-jxzg1618hi] {
    flex: 1;
    padding: 1rem 1.25rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    animation: choice-in-b-jxzg1618hi 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.type-input[b-jxzg1618hi]::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.type-input:focus[b-jxzg1618hi] {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-subtle);
}

.type-input.correct[b-jxzg1618hi] {
    border-color: var(--success);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.25);
    color: var(--success);
}

.type-input.wrong[b-jxzg1618hi] {
    border-color: var(--error);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.btn-submit[b-jxzg1618hi] {
    padding: 1rem 1.4rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s ease;
    animation: choice-in-b-jxzg1618hi 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.04s;
}

.btn-submit:hover:not(:disabled)[b-jxzg1618hi] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.btn-submit:disabled[b-jxzg1618hi] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ?? Voice mode ??????????????????????????????????? */

.voice-area[b-jxzg1618hi] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-height: 100px;
    justify-content: center;
}

.voice-btn[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.75rem 3.5rem;
    border: 1.5px solid var(--border-color);
    border-radius: 1rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.18s ease;
    animation: choice-in-b-jxzg1618hi 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.voice-btn:hover:not(:disabled)[b-jxzg1618hi] {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 20px var(--accent-glow);
}

.voice-btn:active:not(:disabled)[b-jxzg1618hi] {
    transform: translateY(2px) scaleY(0.92) scaleX(1.04);
    transition-duration: 0.06s;
}

.voice-btn.listening[b-jxzg1618hi] {
    border-color: var(--accent);
    box-shadow: 0 0 24px var(--accent-glow);
    cursor: default;
}

.voice-icon[b-jxzg1618hi] {
    font-size: 2rem;
    line-height: 1;
}

.voice-icon.pulse[b-jxzg1618hi] {
    animation: mic-pulse-b-jxzg1618hi 1s ease-in-out infinite;
}

@keyframes mic-pulse-b-jxzg1618hi {
    0%, 100% { transform: scale(1); opacity: 1; }
    25% { transform: scaleY(1.2) scaleX(0.92); opacity: 0.8; }
    50% { transform: scaleX(1.15) scaleY(0.93); opacity: 0.7; }
    75% { transform: scaleY(1.08) scaleX(0.97); opacity: 0.85; }
}

.voice-label[b-jxzg1618hi] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}

.voice-result[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: feedback-in-b-jxzg1618hi 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.voice-heard[b-jxzg1618hi] {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.voice-error[b-jxzg1618hi] {
    font-size: 0.75rem;
    color: var(--error);
    text-align: center;
}

.voice-debug[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    margin-top: 0.5rem;
    font-size: 0.62rem;
    color: var(--text-muted);
    opacity: 0.5;
    font-family: monospace;
}

/* ?? Next button ?????????????????????????????????? */

.btn-next[b-jxzg1618hi] {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 0.4rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.btn-next:hover[b-jxzg1618hi] {
    background: var(--accent-hover);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 18px var(--accent-glow);
}

.btn-next:active[b-jxzg1618hi] {
    transform: translateY(2px) scaleY(0.92) scaleX(1.05);
    transition-duration: 0.06s;
}

/* ?? Footer ??????????????????????????????????????? */

.practice-footer[b-jxzg1618hi] {
    margin-top: auto;
    padding-top: 0.75rem;
}

.btn-restart[b-jxzg1618hi] {
    padding: 0.35rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-restart:hover[b-jxzg1618hi] {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

/* ?? Level progress bar ??????????????????????????? */

.level-progress-bar-row[b-jxzg1618hi] {
    margin-bottom: 0.75rem;
}

[b-jxzg1618hi] .practice-page--wide-prompt .level-progress-bar-row {
    margin-bottom: 0.4rem;
}

.hearts-row[b-jxzg1618hi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    margin: 0 0 0.9rem;
    min-height: 1.4rem;
}

.practice-page--wide-prompt .hearts-row[b-jxzg1618hi] {
    margin-bottom: 0.55rem;
}

[b-jxzg1618hi] .practice-page--wide-prompt .hearts-row {
    margin-bottom: 0.55rem;
}

.heart[b-jxzg1618hi] {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    transform-origin: center;
    color: rgba(248, 113, 113, 0.34);
    transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.heart.full[b-jxzg1618hi] {
    color: #ef4444;
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.35));
}

.heart.empty[b-jxzg1618hi] {
    color: rgba(248, 113, 113, 0.22);
    opacity: 0.38;
    filter: grayscale(0.25);
}

.hearts-count[b-jxzg1618hi] {
    margin-left: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

.hearts-row--gain .heart.full[b-jxzg1618hi] {
    transform: scale(1.08);
}

.hearts-row--loss .heart.empty[b-jxzg1618hi] {
    transform: scale(1.08);
}

/* ?? Result screen ???????????????????????????????? */

/* ?? Result screen (ZZZ-inspired) ????????????????? */

.result-screen[b-jxzg1618hi] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem 2rem;
}

.rs-backdrop[b-jxzg1618hi] {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    opacity: 0;
    animation: rs-backdrop-in-b-jxzg1618hi 0.6s ease-out 0.1s forwards;
}

.result-screen--pass .rs-backdrop[b-jxzg1618hi] {
    background: radial-gradient(ellipse 70% 55% at 50% 30%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 100%);
}

.result-screen--fail .rs-backdrop[b-jxzg1618hi] {
    background: radial-gradient(ellipse 70% 55% at 50% 30%, rgba(239, 68, 68, 0.08) 0%, transparent 100%);
}

@keyframes rs-backdrop-in-b-jxzg1618hi {
    to { opacity: 1; }
}

.rs-card[b-jxzg1618hi] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-align: center;
}

.rs-enter[b-jxzg1618hi] {
    animation: rs-card-enter-b-jxzg1618hi 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes rs-card-enter-b-jxzg1618hi {
    0% {
        opacity: 0;
        transform: translateY(24px) scaleY(0.82) scaleX(1.06);
        filter: blur(6px);
    }
    55% {
        opacity: 1;
        transform: translateY(-4px) scaleY(1.05) scaleX(0.97);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Icon ring */

.rs-icon-ring[b-jxzg1618hi] {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.15rem;
}

.rs-icon[b-jxzg1618hi] {
    position: relative;
    z-index: 2;
    font-size: 1.8rem;
    font-weight: 800;
    animation: rs-icon-pop-b-jxzg1618hi 0.5s cubic-bezier(0.34, 1.8, 0.64, 1) 0.25s both;
}

.rs-icon-ring--pass .rs-icon[b-jxzg1618hi] { color: var(--success); }
.rs-icon-ring--fail .rs-icon[b-jxzg1618hi] { color: var(--error); opacity: 0.8; }

@keyframes rs-icon-pop-b-jxzg1618hi {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scaleX(1.3) scaleY(0.8); opacity: 1; }
    75% { transform: scaleX(0.92) scaleY(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.rs-ring-svg[b-jxzg1618hi] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.rs-ring-track[b-jxzg1618hi],
.rs-ring-fill[b-jxzg1618hi] {
    fill: none;
    stroke-width: 3.5;
}

.rs-ring-track[b-jxzg1618hi] {
    stroke: color-mix(in srgb, var(--accent) 16%, transparent);
}

.rs-ring-fill[b-jxzg1618hi] {
    stroke: var(--accent-secondary);
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    filter: drop-shadow(0 0 4px var(--accent-glow));
    animation: rs-ring-draw-b-jxzg1618hi 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards,
               rs-ring-glow-b-jxzg1618hi 0.5s ease-out 1.4s forwards;
}

@keyframes rs-ring-draw-b-jxzg1618hi {
    to { stroke-dashoffset: 0; }
}

@keyframes rs-ring-glow-b-jxzg1618hi {
    0% {
        stroke-width: 3.5;
        filter: drop-shadow(0 0 4px var(--accent-glow));
    }
    50% {
        stroke-width: 5.5;
        filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent-secondary) 70%, transparent))
                drop-shadow(0 0 30px color-mix(in srgb, var(--accent) 40%, transparent));
    }
    100% {
        stroke-width: 4;
        filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-secondary) 50%, transparent));
    }
}

.rs-aura[b-jxzg1618hi] {
    position: absolute;
    inset: -0.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0.7);
    animation: rs-aura-pulse-b-jxzg1618hi 0.65s ease-out 1.35s forwards;
}

@keyframes rs-aura-pulse-b-jxzg1618hi {
    0% { opacity: 0; transform: scale(0.7); }
    55% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 0.35; transform: scale(1.25); }
}

.rs-icon-ring--fail[b-jxzg1618hi] {
    border: 2px solid rgba(239, 68, 68, 0.2);
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.06);
}

/* Title */

.rs-title[b-jxzg1618hi] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    animation: rs-title-in-b-jxzg1618hi 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes rs-title-in-b-jxzg1618hi {
    0% { opacity: 0; transform: translateY(8px) scaleY(0.85) scaleX(1.08); }
    60% { opacity: 1; transform: translateY(-2px) scaleY(1.04) scaleX(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stars */

.rs-star-row[b-jxzg1618hi] {
    display: flex;
    gap: 0.35rem;
    font-size: 1.6rem;
    line-height: 1;
}

.rs-star[b-jxzg1618hi] {
    display: inline-block;
    color: var(--border-color);
    animation: rs-star-enter-b-jxzg1618hi 0.4s cubic-bezier(0.34, 1.8, 0.64, 1) calc(0.55s + var(--i) * 0.12s) both;
}

.rs-star-row--3 .rs-star[b-jxzg1618hi] { color: #f59e0b; text-shadow: 0 0 12px rgba(245, 158, 11, 0.5); }
.rs-star-row--2 .rs-star:nth-child(-n+2)[b-jxzg1618hi] { color: var(--accent-secondary); text-shadow: 0 0 12px var(--accent-glow); }
.rs-star-row--1 .rs-star:first-child[b-jxzg1618hi] { color: var(--text-muted); }

@keyframes rs-star-enter-b-jxzg1618hi {
    0% { opacity: 0; transform: scale(0) rotate(-30deg); }
    50% { opacity: 1; transform: scaleX(1.35) scaleY(0.75) rotate(8deg); }
    75% { transform: scaleX(0.9) scaleY(1.12) rotate(-3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Stats */

.rs-stats[b-jxzg1618hi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    animation: rs-fade-up-b-jxzg1618hi 0.35s ease-out 0.65s both;
}

.rs-stat.correct[b-jxzg1618hi] { color: var(--success); }
.rs-stat.wrong[b-jxzg1618hi]   { color: var(--error); }

.rs-sep[b-jxzg1618hi] {
    color: var(--border-color);
}

/* Message */

.rs-message[b-jxzg1618hi] {
    font-size: 0.85rem;
    margin: 0;
    animation: rs-fade-up-b-jxzg1618hi 0.35s ease-out 0.7s both;
}

.rs-message--fail[b-jxzg1618hi] { color: var(--text-muted); }

/* Rewards */

.rs-rewards[b-jxzg1618hi] {
    display: flex;
    gap: 1rem;
    align-items: center;
    animation: rs-rewards-in-b-jxzg1618hi 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both;
}

.rs-reward[b-jxzg1618hi] {
    font-size: 1.05rem;
    font-weight: 800;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}

.rs-reward--xp[b-jxzg1618hi] {
    color: var(--accent-secondary);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.rs-reward--coins[b-jxzg1618hi] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}

@keyframes rs-rewards-in-b-jxzg1618hi {
    0% { opacity: 0; transform: translateY(10px) scaleY(0.8) scaleX(1.08); }
    55% { opacity: 1; transform: translateY(-3px) scaleY(1.06) scaleX(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rs-fade-up-b-jxzg1618hi {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Actions */

.rs-actions[b-jxzg1618hi] {
    display: flex;
    gap: 0.55rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.3rem;
    animation: rs-fade-up-b-jxzg1618hi 0.35s ease-out 0.85s both;
}

/* League / Rank summary on result screen */

.rs-league[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 360px;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(130, 92, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(20, 16, 38, 0.92), rgba(12, 10, 24, 0.96)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.18);
    animation: rs-fade-up-b-jxzg1618hi 0.4s ease-out 0.9s both;
}

.rs-league-header[b-jxzg1618hi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.rs-league-rank[b-jxzg1618hi] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rs-league-rank-icon[b-jxzg1618hi] {
    font-size: 1.25rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px currentColor);
}

.rs-league-rank-label[b-jxzg1618hi] {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.rs-league-link[b-jxzg1618hi] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(130, 92, 255, 0.16);
    background: rgba(255, 255, 255, 0.02);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.rs-league-link:hover[b-jxzg1618hi] {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 40%, white);
    background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.02));
}

.rs-league-stats[b-jxzg1618hi] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    justify-content: center;
}

.rs-league-stat[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.rs-league-stat-value[b-jxzg1618hi] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.rs-league-stat-label[b-jxzg1618hi] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rs-league-divider[b-jxzg1618hi] {
    width: 1px;
    height: 1.6rem;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.rs-league-board[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}

.rs-league-row[b-jxzg1618hi] {
    display: grid;
    grid-template-columns: 1.8rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.65rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.rs-league-row--you[b-jxzg1618hi] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.03)), rgba(255, 255, 255, 0.03));
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, white);
}

.rs-league-row-pos[b-jxzg1618hi] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
}

.rs-league-row-name[b-jxzg1618hi] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs-league-row-score[b-jxzg1618hi] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rs-league-progress[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.rs-league-progress-bar[b-jxzg1618hi] {
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.rs-league-progress-fill[b-jxzg1618hi] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, white), color-mix(in srgb, var(--accent-secondary) 75%, var(--accent)));
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.rs-league-progress-label[b-jxzg1618hi] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.rs-btn[b-jxzg1618hi] {
    padding: 0.6rem 1.2rem;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease,
                transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s ease;
}

.rs-btn--primary[b-jxzg1618hi] {
    border: none;
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.rs-btn--primary:hover[b-jxzg1618hi] {
    opacity: 0.88;
    transform: translateY(-2px) scale(1.03);
}

.rs-btn--secondary[b-jxzg1618hi] {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

.rs-btn--secondary:hover[b-jxzg1618hi] {
    border-color: var(--accent);
    color: var(--text-primary);
    transform: translateY(-2px) scale(1.03);
}

.rs-btn--ghost[b-jxzg1618hi] {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
}

.rs-btn--ghost:hover[b-jxzg1618hi] {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

/* Kana derivation  ? + ? = ? */

.kana-derivation[b-jxzg1618hi] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    animation: feedback-in-b-jxzg1618hi 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.05s;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
}

.kana-deriv-base[b-jxzg1618hi] {
    font-size: 1.5rem;
    color: var(--text-muted);
    line-height: 1;
}

.kana-deriv-mark[b-jxzg1618hi] {
    font-size: 1.25rem;
    color: var(--text-muted);
    line-height: 1;
}

.kana-deriv-result[b-jxzg1618hi] {
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: 500;
    line-height: 1;
}

.kana-deriv-op[b-jxzg1618hi] {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.45;
    line-height: 1;
}

/* Vocabulary enrichment */

.vocab-hidden[b-jxzg1618hi] {
    visibility: hidden;
    pointer-events: none;
}

.vocab-enrichment[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    animation: feedback-in-b-jxzg1618hi 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.08s;
}

.practice-page--wide-prompt .vocab-enrichment[b-jxzg1618hi] {
    width: 100%;
}

.vocab-spaced-kana[b-jxzg1618hi] {
    font-size: 1rem;
    color: var(--text-muted);
    letter-spacing: 0.25em;
    font-weight: 400;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
}

.vocab-reading[b-jxzg1618hi] {
    font-size: 0.82rem;
    color: var(--accent);
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.85;
    animation: feedback-in-b-jxzg1618hi 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vocab-breakdown-row[b-jxzg1618hi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.practice-page--wide-prompt .vocab-breakdown-row[b-jxzg1618hi] {
    max-width: min(100%, 46rem);
    margin-inline: auto;
}

.vocab-breakdown-item[b-jxzg1618hi] {
    position: relative;
    min-width: 1.6rem;
    text-align: center;
    padding: 0.1rem 0.28rem;
    border: 1px solid var(--border-color);
    border-radius: 0.35rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
}

.vocab-breakdown-tip[b-jxzg1618hi] {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 0.25rem 0.45rem;
    border-radius: 0.35rem;
    border: 1px solid var(--accent-glow);
    background: rgba(17, 18, 31, 0.95);
    color: var(--text-primary);
    font-size: 0.68rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.vocab-breakdown-item:hover .vocab-breakdown-tip[b-jxzg1618hi] {
    opacity: 1;
}

/* Vocabulary toggles */

.vocab-toggles[b-jxzg1618hi] {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.vocab-toggle[b-jxzg1618hi] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vocab-toggle:hover[b-jxzg1618hi] {
    border-color: var(--accent);
    color: var(--accent);
}

.vocab-toggle:disabled[b-jxzg1618hi] {
    opacity: 0.35;
    cursor: not-allowed;
}

.vocab-toggle:disabled:hover[b-jxzg1618hi] {
    border-color: var(--border-color);
    color: var(--text-muted);
    background: transparent;
}

.vocab-toggle.active[b-jxzg1618hi] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

/* Vocabulary feedback hint */

.prompt-informal[b-jxzg1618hi] {
    display: block;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.65;
    letter-spacing: 0.02em;
    text-align: center;
    margin-top: 0.2rem;
}

.vocab-informal[b-jxzg1618hi] {
    display: block;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.65;
    letter-spacing: 0.02em;
    text-align: center;
    margin-top: 0.15rem;
}

.vocab-feedback-hint[b-jxzg1618hi] {
    flex-basis: 100%;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.01em;
    order: 1;
}

@media (max-width: 440px) {
    .practice-page[b-jxzg1618hi] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .group-chip[b-jxzg1618hi] {
        font-size: 0.68rem;
        padding: 0.2rem 0.5rem;
    }

    .xp-popup[b-jxzg1618hi] {
        font-size: 0.72rem;
    }

    .lu-card[b-jxzg1618hi] {
        --lu-size: 7.2rem;
        height: calc(var(--lu-size) + 1rem);
    }

    .lu-core[b-jxzg1618hi] {
        font-size: 2.2rem;
    }

    .lu-badge[b-jxzg1618hi] {
        font-size: 0.82rem;
        padding: 0.32rem 0.72rem;
    }

    .coin-popup[b-jxzg1618hi] {
        font-size: 0.72rem;
    }

    .choices-grid[b-jxzg1618hi] {
        gap: 0.5rem;
    }

    .choice-btn[b-jxzg1618hi] {
        padding: 0.7rem 0.5rem;
        font-size: 1.08rem;
        word-break: break-word;
        hyphens: auto;
        line-height: 1.25;
    }

    .type-input[b-jxzg1618hi] {
        padding: 0.75rem 0.9rem;
        font-size: 1rem;
    }

    .btn-submit[b-jxzg1618hi] {
        padding: 0.75rem 0.9rem;
        font-size: 1rem;
    }

    .voice-btn[b-jxzg1618hi] {
        padding: 1.25rem 2rem;
    }

    .rs-actions[b-jxzg1618hi] {
        width: 100%;
    }

    .rs-btn[b-jxzg1618hi] {
        flex: 1;
        text-align: center;
    }
}

@media (max-height: 600px) {
    .practice-header[b-jxzg1618hi] {
        margin-bottom: 0.4rem;
    }

    .group-bar[b-jxzg1618hi] {
        margin-bottom: 0.5rem;
    }

    .choice-btn[b-jxzg1618hi] {
        padding: 0.65rem;
        font-size: 0.95rem;
    }

    .type-input[b-jxzg1618hi] {
        padding: 0.65rem 0.9rem;
        font-size: 0.95rem;
    }

    .btn-submit[b-jxzg1618hi] {
        padding: 0.65rem 0.9rem;
        font-size: 0.95rem;
    }

    .voice-btn[b-jxzg1618hi] {
        padding: 0.9rem 2rem;
    }
}

/* ?? Listening mode ??????????????????????????????? */

.listening-prompt[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
}

.listening-play-btn[b-jxzg1618hi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--accent-subtle);
    color: var(--accent);
    cursor: pointer;
    transition: all 0.18s ease;
    animation: choice-in-b-jxzg1618hi 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.listening-play-btn:hover[b-jxzg1618hi] {
    background: var(--accent-subtle);
    transform: scale(1.06);
    box-shadow: 0 0 20px var(--accent-glow);
}

.listening-play-btn:active[b-jxzg1618hi] {
    transform: scale(0.95);
}

.listening-play-icon[b-jxzg1618hi] {
    width: 2rem;
    height: 2rem;
}

.listening-hint-text[b-jxzg1618hi] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.listening-area[b-jxzg1618hi] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.listening-area .choices-grid[b-jxzg1618hi] {
    width: 100%;
}

.listening-reveal[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0;
    animation: feedback-in-b-jxzg1618hi 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.listening-reveal-furi[b-jxzg1618hi] {
    justify-content: center;
}

.listening-reveal-meaning[b-jxzg1618hi] {
    font-size: 1rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.listening-replay-btn[b-jxzg1618hi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--accent-glow);
    border-radius: 999px;
    background: transparent;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.listening-replay-btn:hover[b-jxzg1618hi] {
    background: var(--accent-subtle);
    border-color: var(--accent);
}

.listening-replay-icon[b-jxzg1618hi] {
    width: 0.85rem;
    height: 0.85rem;
}

/* ?? Hint button & card ??????????????????????????? */

.hint-btn[b-jxzg1618hi] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.5rem;
}

.practice-page--wide-prompt .hint-btn[b-jxzg1618hi] {
    margin-bottom: 0;
}

.hint-btn:hover[b-jxzg1618hi] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.hint-btn--hidden[b-jxzg1618hi] {
    visibility: hidden;
    pointer-events: none;
}

.hint-icon[b-jxzg1618hi] {
    width: 0.9rem;
    height: 0.9rem;
}

.hint-label[b-jxzg1618hi] {
    letter-spacing: 0.02em;
}

.hint-card[b-jxzg1618hi] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    border: 1.5px solid var(--accent-glow);
    border-radius: 0.85rem;
    background: var(--bg-surface);
    text-align: center;
    margin-bottom: 1rem;
}

.hint-card-listen-btn[b-jxzg1618hi] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--accent-glow);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
    color: var(--accent);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.hint-card-listen-btn:hover[b-jxzg1618hi],
.hint-card-listen-btn:focus-visible[b-jxzg1618hi] {
    border-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--accent);
    box-shadow: 0 0 14px var(--accent-glow);
    outline: none;
    transform: scale(1.08);
}

.hint-card-listen-btn:active[b-jxzg1618hi] {
    transform: scale(0.94);
}

.hint-card-listen-icon[b-jxzg1618hi] {
    width: 1rem;
    height: 1rem;
}

.hint-card-compare[b-jxzg1618hi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
}

.hint-card-side[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.hint-card-side--handwritten[b-jxzg1618hi] {
    flex: 0 0 clamp(5.5rem, 16vw, 8rem);
}

.hint-card-side--app[b-jxzg1618hi] {
    flex: 1 1 auto;
}

.hint-card-side-label[b-jxzg1618hi] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hint-card-header[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.hint-card-kana[b-jxzg1618hi] {
    font-size: clamp(3rem, 14vw, 5rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
}

.hint-card-kana--vert[b-jxzg1618hi] {
    writing-mode: vertical-rl;
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    letter-spacing: 0.06em;
}

.hint-card-furi[b-jxzg1618hi] {
    max-width: 100%;
}

.hint-card-kanji[b-jxzg1618hi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    text-align: center;
}

.hint-card-kanji-text[b-jxzg1618hi] {
    font-size: clamp(2rem, 9vw, 3.6rem);
}

.hint-card-romaji[b-jxzg1618hi] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.03em;
}

.hint-card-text[b-jxzg1618hi] {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 30ch;
}

@media (max-width: 440px) {
    .hint-card[b-jxzg1618hi] {
        padding: 1rem 0.75rem;
    }

    .hint-card-compare[b-jxzg1618hi] {
        gap: 0.75rem;
    }

    .hint-card-kana[b-jxzg1618hi] {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }
}

@media (max-width: 640px) {
    [b-jxzg1618hi] .practice-page--wide-prompt {
        --prompt-control-max-inline: 100%;
    }

    [b-jxzg1618hi] .practice-page--wide-prompt .active-boosts-row,
    [b-jxzg1618hi] .practice-page--wide-prompt .group-bar,
    [b-jxzg1618hi] .practice-page--wide-prompt .level-progress-bar-row,
    [b-jxzg1618hi] .practice-page--wide-prompt .hearts-row,
    [b-jxzg1618hi] .practice-page--wide-prompt .stats-line-wrap,
    [b-jxzg1618hi] .practice-page--wide-prompt .hint-card {
        width: 100%;
    }

    .active-boosts-row[b-jxzg1618hi] {
        margin: 0 0 0.4rem;
    }

    .active-boost-pill[b-jxzg1618hi] {
        gap: 0.34rem;
        padding: 0.34rem 0.62rem;
    }

    .active-boost-pill-label[b-jxzg1618hi] {
        font-size: 0.56rem;
        letter-spacing: 0.1em;
    }

    .active-boost-pill-name[b-jxzg1618hi] {
        font-size: 0.68rem;
    }

    .active-boost-pill-meta[b-jxzg1618hi] {
        font-size: 0.62rem;
    }

    .btn-voice-skip[b-jxzg1618hi] {
        margin-top: 0.35rem;
        font-size: 0.66rem;
    }

    .group-bar[b-jxzg1618hi],
    .practice-page--wide-prompt .group-bar[b-jxzg1618hi] {
        gap: 0.24rem;
        margin-bottom: 0.36rem;
    }

    .group-chip[b-jxzg1618hi] {
        padding: 0.18rem 0.42rem;
        font-size: 0.62rem;
    }

    .stats-line-wrap[b-jxzg1618hi],
    [b-jxzg1618hi] .practice-page--wide-prompt .stats-line-wrap {
        margin-bottom: 0.45rem;
    }

    .prompt-region[b-jxzg1618hi],
    .prompt-region-body[b-jxzg1618hi],
    .prompt-region-meta[b-jxzg1618hi] {
        gap: 0.24rem;
    }

    .prompt-slot[b-jxzg1618hi] {
        min-height: clamp(4.2rem, 15svh, 6.7rem);
    }

    .practice-page--wide-prompt .practice-active-body[b-jxzg1618hi] {
        gap: 0.34rem;
    }

    .practice-page--wide-prompt .practice-prompt-section[b-jxzg1618hi] {
        gap: 0.3rem;
    }

    .practice-page--wide-prompt .practice-prompt-controls[b-jxzg1618hi] {
        width: 100%;
        gap: 0.42rem;
    }

    .practice-answer-shell[b-jxzg1618hi] {
        width: 100%;
    }

    .practice-prompt-toolbar[b-jxzg1618hi] {
        gap: 0.3rem;
    }

    .practice-furi-display[b-jxzg1618hi],
    .pf-word-segs[b-jxzg1618hi] {
        gap: clamp(0.03rem, calc(1.3cqi / var(--segs, 8)), 0.12rem);
    }

    .pf-word[b-jxzg1618hi] {
        gap: 0.14rem;
    }

    .pf-seg[b-jxzg1618hi] {
        gap: 0.08rem;
    }

    .pf-reading[b-jxzg1618hi] {
        font-size: clamp(0.48rem, calc(9cqi / var(--segs, 8)), 0.66rem);
    }

    .pf-kana[b-jxzg1618hi] {
        font-size: clamp(1.28rem, calc(44cqi / var(--segs, 8)), 2.75rem);
    }

    .pf-gap[b-jxzg1618hi] {
        width: clamp(0.12rem, calc(3cqi / var(--segs, 8)), 0.38rem);
    }

    .prompt-informal[b-jxzg1618hi],
    .practice-page--wide-prompt .prompt-informal[b-jxzg1618hi] {
        font-size: 0.62rem;
        line-height: 1.25;
    }

    .practice-kanji-display[b-jxzg1618hi],
    .listening-reveal-kanji[b-jxzg1618hi] {
        gap: 0.22rem;
    }

    .practice-kanji-reading[b-jxzg1618hi] {
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .practice-kanji-text[b-jxzg1618hi] {
        font-size: clamp(1.7rem, min(10vw, 8.5svh), 2.85rem);
        line-height: 1.08;
    }

    .practice-kanji-meaning[b-jxzg1618hi],
    .listening-reveal-meaning[b-jxzg1618hi] {
        font-size: 0.76rem;
        line-height: 1.25;
    }

    .tts-prompt-btn[b-jxzg1618hi] {
        gap: 0.24rem;
        padding: 0.26rem 0.62rem;
    }

    .tts-prompt-icon[b-jxzg1618hi] {
        width: 0.75rem;
        height: 0.75rem;
    }

    .tts-label[b-jxzg1618hi] {
        font-size: 0.62rem;
    }

    .kana-character[b-jxzg1618hi],
    .kana-character.prompt-len-1[b-jxzg1618hi] {
        font-size: clamp(2.35rem, min(17vw, 13svh), 4.35rem);
    }

    .kana-character.prompt-len-2[b-jxzg1618hi] {
        font-size: clamp(2.15rem, min(14vw, 11svh), 3.7rem);
    }

    .kana-character.prompt-len-3[b-jxzg1618hi] {
        font-size: clamp(1.95rem, min(12vw, 9.5svh), 3.2rem);
    }

    .kana-character.prompt-len-4[b-jxzg1618hi] {
        font-size: clamp(1.72rem, min(10vw, 8svh), 2.75rem);
    }

    .kana-character.prompt-len-5[b-jxzg1618hi] {
        font-size: clamp(1.52rem, min(8.5vw, 7svh), 2.35rem);
    }

    .kana-character.prompt-len-6plus[b-jxzg1618hi] {
        font-size: clamp(1.28rem, min(7.2vw, 6svh), 2rem);
    }

    .kana-character.romaji-prompt[b-jxzg1618hi] {
        font-size: clamp(1.7rem, min(10vw, 8svh), 3rem);
    }

    .kana-character.vocab-prompt[b-jxzg1618hi] {
        font-size: clamp(1.42rem, min(8vw, 6.8svh), 2.55rem);
        line-height: 1.12;
    }

    .kana-character.vocab-prompt.prompt-len-6plus[b-jxzg1618hi] {
        font-size: clamp(1.1rem, min(6.5vw, 5.5svh), 1.9rem);
        white-space: normal;
        text-wrap: balance;
    }

    .kana-character.vocab-english-prompt[b-jxzg1618hi] {
        font-size: clamp(1rem, min(5.5vw, 4.8svh), 1.65rem);
        line-height: 1.16;
        white-space: normal;
        text-wrap: balance;
    }

    .kana-stage.empty[b-jxzg1618hi] {
        padding: 1.5rem 0;
    }

    .answer-area[b-jxzg1618hi] {
        margin-bottom: 0.42rem;
    }

    .choices-grid[b-jxzg1618hi] {
        gap: 0.38rem;
    }

    .choice-btn[b-jxzg1618hi] {
        min-height: 2.55rem;
        padding: 0.5rem 0.42rem;
        border-radius: 0.48rem;
        font-size: 0.88rem;
        line-height: 1.18;
        word-break: break-word;
        hyphens: auto;
    }

    .feedback[b-jxzg1618hi] {
        gap: 0.26rem 0.45rem;
        margin-top: 0.42rem;
    }

    .fb-msg[b-jxzg1618hi] {
        font-size: 0.76rem;
    }

    .type-input-row[b-jxzg1618hi] {
        gap: 0.34rem;
    }

    .type-input[b-jxzg1618hi] {
        min-width: 0;
        padding: 0.55rem 0.62rem;
        border-radius: 0.48rem;
        font-size: 0.86rem;
    }

    .btn-submit[b-jxzg1618hi] {
        padding: 0.55rem 0.7rem;
        border-radius: 0.48rem;
        font-size: 0.86rem;
    }

    .voice-area[b-jxzg1618hi] {
        gap: 0.42rem;
        min-height: 4.8rem;
    }

    .voice-btn[b-jxzg1618hi] {
        gap: 0.3rem;
        padding: 0.82rem 1.35rem;
        border-radius: 0.7rem;
    }

    .voice-icon[b-jxzg1618hi] {
        font-size: 1.3rem;
    }

    .voice-label[b-jxzg1618hi] {
        font-size: 0.72rem;
    }

    .voice-result[b-jxzg1618hi] {
        gap: 0.28rem;
    }

    .voice-heard[b-jxzg1618hi],
    .voice-error[b-jxzg1618hi] {
        font-size: 0.66rem;
    }

    .level-progress-bar-row[b-jxzg1618hi],
    [b-jxzg1618hi] .practice-page--wide-prompt .level-progress-bar-row {
        margin-bottom: 0.28rem;
    }

    .hearts-row[b-jxzg1618hi],
    .practice-page--wide-prompt .hearts-row[b-jxzg1618hi],
    [b-jxzg1618hi] .practice-page--wide-prompt .hearts-row {
        gap: 0.16rem;
        min-height: 1rem;
        margin-bottom: 0.34rem;
    }

    .heart[b-jxzg1618hi] {
        font-size: 0.78rem;
    }

    .hearts-count[b-jxzg1618hi] {
        margin-left: 0.24rem;
        font-size: 0.64rem;
    }

    .vocab-enrichment[b-jxzg1618hi] {
        gap: 0.18rem;
    }

    .vocab-spaced-kana[b-jxzg1618hi] {
        font-size: 0.76rem;
    }

    .vocab-reading[b-jxzg1618hi],
    .vocab-feedback-hint[b-jxzg1618hi] {
        font-size: 0.66rem;
    }

    .vocab-breakdown-row[b-jxzg1618hi] {
        gap: 0.22rem;
    }

    .vocab-breakdown-item[b-jxzg1618hi] {
        min-width: 1.25rem;
        padding: 0.08rem 0.2rem;
        border-radius: 0.28rem;
        font-size: 0.72rem;
    }

    .listening-prompt[b-jxzg1618hi] {
        gap: 0.42rem;
        padding: 0.65rem 0;
    }

    .listening-play-btn[b-jxzg1618hi] {
        width: 3.15rem;
        height: 3.15rem;
    }

    .listening-play-icon[b-jxzg1618hi] {
        width: 1.2rem;
        height: 1.2rem;
    }

    .listening-hint-text[b-jxzg1618hi] {
        font-size: 0.68rem;
    }

    .listening-area[b-jxzg1618hi] {
        gap: 0.42rem;
    }

    .listening-reveal[b-jxzg1618hi] {
        gap: 0.32rem;
        padding: 0.35rem 0;
    }

    .listening-replay-btn[b-jxzg1618hi] {
        gap: 0.24rem;
        padding: 0.22rem 0.55rem;
        font-size: 0.62rem;
    }

    .listening-replay-icon[b-jxzg1618hi] {
        width: 0.68rem;
        height: 0.68rem;
    }

    .hint-btn[b-jxzg1618hi],
    .practice-page--wide-prompt .hint-btn[b-jxzg1618hi] {
        gap: 0.24rem;
        padding: 0.22rem 0.52rem;
        font-size: 0.62rem;
        margin-bottom: 0.24rem;
    }

    .hint-icon[b-jxzg1618hi] {
        width: 0.72rem;
        height: 0.72rem;
    }

    .hint-card[b-jxzg1618hi] {
        gap: 0.45rem;
        padding: 0.75rem 0.55rem;
        border-radius: 0.65rem;
        margin-bottom: 0.5rem;
    }

    .hint-card-compare[b-jxzg1618hi] {
        gap: 0.5rem;
    }

    .hint-card-side[b-jxzg1618hi] {
        gap: 0.22rem;
    }

    .hint-card-side--handwritten[b-jxzg1618hi] {
        flex-basis: clamp(4rem, 24vw, 5.2rem);
    }

    .hint-card-side-label[b-jxzg1618hi] {
        font-size: 0.54rem;
        letter-spacing: 0.06em;
    }

    .hint-card-kana[b-jxzg1618hi] {
        font-size: clamp(2rem, 11vw, 3.3rem);
    }

    .hint-card-kana--vert[b-jxzg1618hi] {
        font-size: clamp(1.3rem, 7vw, 2rem);
    }

    .hint-card-kanji[b-jxzg1618hi] {
        gap: 0.22rem;
    }

    .hint-card-kanji-text[b-jxzg1618hi] {
        font-size: clamp(1.45rem, 8vw, 2.55rem);
    }

    .hint-card-romaji[b-jxzg1618hi] {
        font-size: 0.86rem;
    }

    .hint-card-text[b-jxzg1618hi] {
        font-size: 0.72rem;
        line-height: 1.35;
    }
}

/* ?? Reduce motion preference ????????????????????? */

@media (prefers-reduced-motion: reduce) {
    *[b-jxzg1618hi], *[b-jxzg1618hi]::before, *[b-jxzg1618hi]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* Page shell */
.home-page[b-kfuew3gkao] {
    --home-sheet-peek: clamp(5rem, 10vw, 6.6rem);
    --home-card-border: color-mix(in srgb, var(--bg-accent-surface) 34%, black 66%);
    --home-card-border-strong: color-mix(in srgb, white 20%, var(--bg-accent-surface) 80%);
    --home-card-bg:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-accent-surface) 26%, black 74%) 0%,
            color-mix(in srgb, var(--bg-accent-surface) 20%, black 80%) 100%);
    --home-card-bg-soft:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-accent-surface) 22%, black 78%) 0%,
            color-mix(in srgb, var(--bg-accent-surface) 16%, black 84%) 100%);

    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--topbar-height) - var(--home-content-top-pad, 1.5rem));
    min-height: calc(100svh - var(--topbar-height) - var(--home-content-top-pad, 1.5rem));
    min-height: calc(100dvh - var(--topbar-height) - var(--home-content-top-pad, 1.5rem));
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    overscroll-behavior-y: contain;
}

.home-event-warmup[b-kfuew3gkao] {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-100vw, -100vh);
}

.home-first-screen[b-kfuew3gkao] {
    position: relative;
    z-index: 0;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.home-layout[b-kfuew3gkao] {
    --home-layout-block-pad: clamp(1.75rem, 4vw, 2.75rem);

    width: 100%;
    max-width: 1040px;
    display: grid;
    flex: 1 1 auto;
    place-items: center;
    margin: 0 auto;
    padding: var(--home-layout-block-pad) 1.5rem calc(var(--home-layout-block-pad) + var(--home-sheet-peek));
    box-sizing: border-box;
}

.home-page--more-open .home-first-screen[b-kfuew3gkao] {
    pointer-events: none;
}

.home-more-sheet[b-kfuew3gkao] {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: 100%;
    margin-left: -50vw;
    display: flex;
    flex-direction: column;
    z-index: 2;
    transform: translateY(calc(100% - var(--home-sheet-peek)));
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-page--more-open .home-more-sheet[b-kfuew3gkao] {
    transform: translateY(0);
}

.home-page--more-animating .home-more-sheet[b-kfuew3gkao] {
    will-change: transform;
}

.home-page--more-animating .home-more-tab[b-kfuew3gkao] {
    pointer-events: none;
}

.home-page--more-animating .home-more-sheet-curve-hit[b-kfuew3gkao] {
    pointer-events: none;
}

.home-more-tab[b-kfuew3gkao] {
    position: absolute;
    left: 50%;
    top: 0.55rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 2.15rem;
    padding: 0.48rem 0.92rem 0.5rem;
    border: 1px solid color-mix(in srgb, white 16%, var(--bg-accent-surface) 84%);
    border-radius: 999px;
    color: color-mix(in srgb, white 88%, var(--bg-accent-surface) 12%);
    background: color-mix(in srgb, var(--bg-accent-surface) 20%, black 80%);
    box-shadow: 0 8px 20px rgba(24, 8, 48, 0.2);
    text-decoration: none;
    transform: translateX(-50%);
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.home-more-tab:hover[b-kfuew3gkao] {
    transform: translateX(-50%) translateY(1px);
    border-color: color-mix(in srgb, white 22%, var(--bg-accent-surface) 78%);
    background: color-mix(in srgb, var(--bg-accent-surface) 26%, black 74%);
}

.home-more-tab:focus-visible[b-kfuew3gkao] {
    outline: none;
    box-shadow:
        0 0 0 2px var(--bg-accent-surface),
        0 0 0 4px color-mix(in srgb, white 22%, var(--bg-accent-surface) 78%),
        0 8px 24px rgba(24, 8, 48, 0.24);
}

.home-more-tab-icon[b-kfuew3gkao] {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    color: color-mix(in srgb, white 82%, var(--bg-accent-surface) 18%);
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: transform 220ms ease;
}

.home-page--more-open .home-more-tab-icon[b-kfuew3gkao] {
    transform: rotate(180deg);
}

.home-more-tab-label[b-kfuew3gkao] {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-more-sheet-curve-hit[b-kfuew3gkao] {
    position: absolute;
    left: 50%;
    top: 0;
    width: 132vw;
    height: var(--home-sheet-peek);
    margin-left: -66vw;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

.home-more-sheet-curve-hit:focus-visible[b-kfuew3gkao] {
    outline: none;
}

.home-more-sheet-curve[b-kfuew3gkao] {
    position: relative;
    left: 50%;
    width: 132vw;
    height: var(--home-sheet-peek);
    margin-left: -66vw;
    flex-shrink: 0;
    overflow: hidden;
}

.home-more-sheet-curve[b-kfuew3gkao]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
    background: var(--bg-accent-surface);
}

.home-more-sheet-body[b-kfuew3gkao] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: -1px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-accent-surface);
}

.home-more-sheet-body--cutout-active[b-kfuew3gkao] {
    background: transparent;
}

.home-more-sheet-feedback[b-kfuew3gkao] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.home-more-sheet-feedback-mask-svg[b-kfuew3gkao] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.home-more-sheet-feedback-surface[b-kfuew3gkao] {
    position: absolute;
    inset: 0;
}

.home-more-sheet-feedback-surface[b-kfuew3gkao] {
    background: var(--bg-accent-surface);
    -webkit-mask: url(#home-more-sheet-cutout-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask: url(#home-more-sheet-cutout-mask);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.home-more-sheet-content[b-kfuew3gkao] {
    min-height: 100%;
    position: relative;
    z-index: 1;
    padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1rem, 3vw, 1.5rem) clamp(2.2rem, 5vw, 3rem);
    box-sizing: border-box;
}

.home-more-hub[b-kfuew3gkao] {
    width: min(100%, 1160px);
    margin: 0 auto;
    display: grid;
    gap: 1.25rem;
}

.home-more-hub-header[b-kfuew3gkao] {
    padding: 0.15rem 0 0.1rem;
    display: grid;
    gap: 0.5rem;
    justify-items: center;
}

.home-more-hub-copy[b-kfuew3gkao] {
    display: grid;
    gap: 0.32rem;
    justify-items: center;
    text-align: center;
}

.home-featured-chip[b-kfuew3gkao] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
}

.home-more-hub-title[b-kfuew3gkao] {
    margin: 0;
    max-width: none;
    font-size: clamp(1.9rem, 4vw, 2.85rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}

.home-more-launch-grid[b-kfuew3gkao] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
    align-items: stretch;
}

.home-more-featured-panel[b-kfuew3gkao],
.home-more-spotlight-panel[b-kfuew3gkao],
.home-more-section[b-kfuew3gkao] {
    padding: 0;
}

.home-more-featured-panel[b-kfuew3gkao],
.home-more-spotlight-panel[b-kfuew3gkao] {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.72rem;
}

.home-more-section[b-kfuew3gkao] {
    display: grid;
    gap: 0.85rem;
    scroll-margin-top: 1rem;
}

.home-more-section-head[b-kfuew3gkao] {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.home-community-empty-kicker[b-kfuew3gkao] {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.68rem;
    font-weight: 800;
}

.home-more-section-head h3[b-kfuew3gkao] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.home-featured-card[b-kfuew3gkao],
.home-update-spotlight-card[b-kfuew3gkao],
.home-guide-card[b-kfuew3gkao] {
    display: grid;
    gap: 0.68rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--home-card-border);
    border-radius: 1.05rem;
    background: var(--home-card-bg-soft);
    box-shadow: 0 6px 18px rgba(24, 8, 48, 0.18);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.home-guide-card:hover[b-kfuew3gkao] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, white 14%, var(--bg-accent-surface) 86%);
    box-shadow: 0 10px 22px rgba(24, 8, 48, 0.2);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-accent-surface) 26%, black 74%) 0%,
            color-mix(in srgb, var(--bg-accent-surface) 18%, black 82%) 100%);
}

.home-featured-card[b-kfuew3gkao],
.home-update-spotlight-card[b-kfuew3gkao] {
    height: 100%;
    padding: 1rem 1.05rem;
    align-content: start;
}

.home-featured-card[b-kfuew3gkao] {
    position: relative;
    overflow: hidden;
    border-color: var(--home-card-border-strong);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, white 10%, transparent), transparent 42%),
        var(--home-card-bg);
    box-shadow: 0 10px 26px rgba(24, 8, 48, 0.2);
}

.home-featured-card:hover[b-kfuew3gkao] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, white 22%, var(--bg-accent-surface) 78%);
    box-shadow: 0 14px 30px rgba(24, 8, 48, 0.24);
}

.home-update-spotlight-card[b-kfuew3gkao] {
    border-color: color-mix(in srgb, white 10%, var(--bg-accent-surface) 90%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-accent-surface) 24%, black 76%) 0%,
            color-mix(in srgb, var(--bg-accent-surface) 18%, black 82%) 100%);
}

.home-update-spotlight-card:hover[b-kfuew3gkao] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, white 16%, var(--bg-accent-surface) 84%);
    box-shadow: 0 10px 22px rgba(24, 8, 48, 0.2);
}

.home-featured-card:focus-visible[b-kfuew3gkao],
.home-update-spotlight-card:focus-visible[b-kfuew3gkao],
.home-guide-card:focus-visible[b-kfuew3gkao] {
    outline: none;
    border-color: color-mix(in srgb, white 24%, var(--bg-accent-surface) 76%);
    box-shadow:
        0 0 0 2px var(--bg-accent-surface),
        0 0 0 4px color-mix(in srgb, white 18%, var(--bg-accent-surface) 82%),
        0 12px 26px rgba(24, 8, 48, 0.22);
}

.home-featured-meta[b-kfuew3gkao],
.home-guide-card-head[b-kfuew3gkao] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.52rem;
    flex-wrap: wrap;
}

.home-featured-chip[b-kfuew3gkao],
.home-guide-read-time[b-kfuew3gkao] {
    font-size: 0.66rem;
}

.home-featured-chip[b-kfuew3gkao] {
    color: color-mix(in srgb, white 82%, var(--bg-accent-surface) 18%);
    display: inline-flex;
    align-items: center;
    padding: 0.26rem 0.5rem;
    border: 1px solid color-mix(in srgb, white 10%, var(--bg-accent-surface) 90%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-accent-surface) 22%, black 78%);
}

.home-featured-title[b-kfuew3gkao],
.home-guide-title[b-kfuew3gkao] {
    margin: 0;
    color: var(--text-primary);
}

.home-featured-title[b-kfuew3gkao] {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.home-featured-summary[b-kfuew3gkao],
.home-guide-summary[b-kfuew3gkao] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.65;
}

.home-featured-summary[b-kfuew3gkao] {
    font-size: 0.95rem;
}

.home-guide-read-time[b-kfuew3gkao] {
    color: var(--text-muted);
}

.home-update-spotlight-title[b-kfuew3gkao] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.08rem;
    line-height: 1.2;
}

.home-upcoming-list[b-kfuew3gkao] {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.5rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.home-upcoming-list li[b-kfuew3gkao]::marker {
    color: color-mix(in srgb, var(--accent) 54%, white);
}

.home-guide-grid[b-kfuew3gkao] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
}

.home-guide-card[b-kfuew3gkao] {
    padding: 0.9rem 0.92rem;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.32rem;
    align-items: start;
}

.home-guide-card-head[b-kfuew3gkao] {
    justify-content: space-between;
    align-items: flex-start;
}

.home-guide-title[b-kfuew3gkao] {
    font-size: 1rem;
    line-height: 1.12;
    flex: 1 1 18rem;
}

.home-guide-summary[b-kfuew3gkao] {
    font-size: 0.82rem;
}

.home-info-links[b-kfuew3gkao] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.65rem 1.3rem;
}

.home-info-link[b-kfuew3gkao] {
    color: color-mix(in srgb, white 74%, var(--bg-accent-surface) 26%);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 700;
    transition: color 0.18s ease;
}

.home-info-link:hover[b-kfuew3gkao],
.home-info-link:focus-visible[b-kfuew3gkao] {
    color: var(--text-primary);
}

.home-info-link:focus-visible[b-kfuew3gkao] {
    outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
    outline-offset: 0.28rem;
    border-radius: 0.25rem;
}

.home-community-actions[b-kfuew3gkao] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.72rem;
    align-items: center;
}

.home-community-action[b-kfuew3gkao] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.68rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--home-card-border);
    background: var(--home-card-bg-soft);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.81rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(24, 8, 48, 0.18);
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.home-community-action:hover[b-kfuew3gkao] {
    transform: translateY(-1px);
    color: var(--text-primary);
    border-color: color-mix(in srgb, white 14%, var(--bg-accent-surface) 86%);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-accent-surface) 26%, black 74%) 0%,
            color-mix(in srgb, var(--bg-accent-surface) 18%, black 82%) 100%);
    box-shadow: 0 10px 22px rgba(24, 8, 48, 0.2);
}

.home-community-action--accent[b-kfuew3gkao] {
    border-color: color-mix(in srgb, white 14%, #7d2047 86%);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #7d2047 88%, white) 0%,
        color-mix(in srgb, #53142f 92%, black) 100%);
    color: #fff;
    box-shadow: 0 12px 26px color-mix(in srgb, #7d2047 34%, transparent);
}

.home-community-action--accent:hover[b-kfuew3gkao] {
    border-color: color-mix(in srgb, white 20%, #7d2047 80%);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #8f2953 88%, white) 0%,
        color-mix(in srgb, #5f1736 90%, black) 100%);
    color: #fff;
    box-shadow: 0 16px 30px color-mix(in srgb, #7d2047 40%, transparent);
}

.home-community-list[b-kfuew3gkao] {
    gap: 0.65rem;
}

.home-community-list-item[b-kfuew3gkao] {
    row-gap: 0.3rem;
}

.home-community-meta[b-kfuew3gkao] {
    margin: 0;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.66rem;
    font-weight: 800;
}

.home-community-empty[b-kfuew3gkao] {
    display: grid;
    gap: 0.45rem;
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--home-card-border);
    border-radius: 1.1rem;
    background: var(--home-card-bg-soft);
    color: color-mix(in srgb, var(--text-secondary) 94%, white);
    box-shadow: 0 6px 18px rgba(24, 8, 48, 0.18);
}

.home-community-empty p[b-kfuew3gkao] {
    margin: 0;
    line-height: 1.7;
}

.home-community-empty-kicker[b-kfuew3gkao] {
    color: color-mix(in srgb, white 76%, var(--accent) 24%);
}

.home-community-list-item--skeleton[b-kfuew3gkao] {
    min-height: 6.5rem;
    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(255, 255, 255, 0.06) 38%,
            rgba(255, 255, 255, 0.02) 70%);
    background-size: 220% 100%;
    animation: home-community-skeleton-b-kfuew3gkao 1.3s ease-in-out infinite;
}

@keyframes home-community-skeleton-b-kfuew3gkao {
    0% { background-position: 100% 0; }
    100% { background-position: -120% 0; }
}

/* Hero */
.home-hero[b-kfuew3gkao] {
    padding: 0;
    position: relative;
    display: grid;
    gap: 1.1rem;
    justify-items: center;
    text-align: center;
    width: min(100%, 35rem);
    margin: 0 auto;
}

.home-hero[b-kfuew3gkao]::before {
    content: "";
    position: absolute;
    inset: 6% -6% 10%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
    filter: blur(18px);
    opacity: 0.9;
    pointer-events: none;
}

.home-title[b-kfuew3gkao] {
    margin: 0;
    max-width: 11ch;
    font-size: clamp(2.7rem, 4.8vw, 4.1rem);
    font-weight: 800;
    line-height: 0.96;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    position: relative;
    z-index: 1;
}

.home-desc[b-kfuew3gkao] {
    margin: 0;
    font-size: 0.98rem;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 34ch;
    position: relative;
    z-index: 1;
}

.home-hero-actions[b-kfuew3gkao] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    width: min(100%, 24rem);
    position: relative;
    z-index: 1;
}

.home-launch-action[b-kfuew3gkao] {
    width: 100%;
    display: grid;
    gap: 0.2rem;
    min-height: 4.1rem;
    padding: 0.86rem 1rem 0.92rem;
    border-radius: 1.15rem;
    text-decoration: none;
    font: inherit;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 24px rgba(24, 8, 48, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.home-launch-action:hover[b-kfuew3gkao] {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(24, 8, 48, 0.22);
}

.home-launch-head[b-kfuew3gkao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.home-launch-label[b-kfuew3gkao] {
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.home-launch-status[b-kfuew3gkao] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(7, 12, 24, 0.34);
    color: color-mix(in srgb, white 88%, #9fd8ff 12%);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-launch-copy[b-kfuew3gkao] {
    font-size: 0.72rem;
    line-height: 1.45;
    color: inherit;
    opacity: 0.86;
}

.home-launch-action--primary[b-kfuew3gkao] {
    color: #fff;
    border-color: color-mix(in srgb, white 14%, var(--bg-accent-surface) 86%);
    background: var(--bg-accent-surface);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--bg-accent-surface) 24%, transparent);
}

.home-launch-action--primary:hover[b-kfuew3gkao] {
    border-color: color-mix(in srgb, white 22%, var(--bg-accent-surface) 78%);
    background: color-mix(in srgb, white 8%, var(--bg-accent-surface) 92%);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--bg-accent-surface) 30%, transparent);
}

.home-launch-action--secondary[b-kfuew3gkao] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.home-launch-action--secondary:hover[b-kfuew3gkao] {
    border-color: color-mix(in srgb, var(--accent) 50%, white);
    background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.06));
}

.home-launch-action--battle[b-kfuew3gkao] {
    color: var(--accent);
    border: 1.5px solid var(--accent);
    background: var(--accent-subtle);
}

.home-launch-action--battle:hover[b-kfuew3gkao] {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 25%, transparent);
}

.home-launch-action--visualnovel[b-kfuew3gkao] {
    color: #f4f8ff;
    background:
        linear-gradient(135deg, rgba(112, 191, 255, 0.3), rgba(66, 104, 255, 0.18)),
        linear-gradient(180deg, rgba(10, 17, 34, 0.76), rgba(8, 12, 24, 0.94));
}

.home-launch-action--visualnovel:hover[b-kfuew3gkao] {
    border-color: rgba(145, 214, 255, 0.5);
    background:
        linear-gradient(135deg, rgba(112, 191, 255, 0.38), rgba(66, 104, 255, 0.22)),
        linear-gradient(180deg, rgba(10, 17, 34, 0.84), rgba(8, 12, 24, 0.98));
}

.home-launch-action--locked[b-kfuew3gkao],
.home-launch-action:disabled[b-kfuew3gkao] {
    cursor: not-allowed;
    filter: saturate(0.8);
    opacity: 0.82;
    box-shadow: 0 8px 20px rgba(12, 18, 32, 0.2);
}

.home-launch-action--locked.home-launch-action--visualnovel[b-kfuew3gkao],
.home-launch-action--visualnovel:disabled[b-kfuew3gkao] {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 0.7rem,
            rgba(255, 255, 255, 0.02) 0.7rem,
            rgba(255, 255, 255, 0.02) 1.4rem),
        linear-gradient(135deg, rgba(92, 151, 219, 0.2), rgba(52, 83, 184, 0.16)),
        linear-gradient(180deg, rgba(10, 17, 34, 0.78), rgba(8, 12, 24, 0.96));
}

.home-launch-action--locked:hover[b-kfuew3gkao],
.home-launch-action:disabled:hover[b-kfuew3gkao] {
    transform: none;
    box-shadow: 0 8px 20px rgba(12, 18, 32, 0.2);
}

.home-launch-action--locked:active[b-kfuew3gkao],
.home-launch-action:disabled:active[b-kfuew3gkao] {
    transform: none;
}

.home-launch-action:active[b-kfuew3gkao] {
    transform: scale(0.96);
    transition-duration: 60ms;
}

/* Cascade entrance */
.home-cascade[b-kfuew3gkao] {
    opacity: 0;
    animation: home-cascade-in-b-kfuew3gkao 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes home-cascade-in-b-kfuew3gkao {
    0% {
        opacity: 0;
        transform: translateY(16px) scaleY(0.88) scaleX(1.04);
    }

    55% {
        opacity: 1;
        transform: translateY(-3px) scaleY(1.04) scaleX(0.99);
    }

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

@media (max-width: 980px) {
    .home-more-launch-grid[b-kfuew3gkao] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .home-page[b-kfuew3gkao] {
        --home-sheet-peek: calc(var(--phonebar-height, 3rem) + 2.4rem);
        min-height: calc(100vh - var(--topbar-height) - var(--home-content-top-pad, 0.75rem));
        min-height: calc(100svh - var(--topbar-height) - var(--home-content-top-pad, 0.75rem));
        min-height: calc(100dvh - var(--topbar-height) - var(--home-content-top-pad, 0.75rem));
    }

    .home-layout[b-kfuew3gkao] {
        --home-layout-block-pad: 1.05rem;

        padding-inline: 1rem;
    }

    .home-more-tab[b-kfuew3gkao] {
        top: 0.34rem;
        min-height: 1.72rem;
        gap: 0.28rem;
        padding: 0.32rem 0.66rem 0.34rem;
    }

    .home-more-tab-icon[b-kfuew3gkao] {
        width: 0.74rem;
        height: 0.74rem;
    }

    .home-more-tab-label[b-kfuew3gkao] {
        font-size: 0.61rem;
        letter-spacing: 0.03em;
    }

    .home-more-sheet-content[b-kfuew3gkao] {
        padding: 0.58rem 0.62rem calc(var(--phonebar-height, 3rem) + 0.75rem);
    }

    .home-more-hub[b-kfuew3gkao] {
        gap: 0.62rem;
    }

    .home-more-hub-header[b-kfuew3gkao] {
        padding: 0;
        gap: 0.2rem;
    }

    .home-more-launch-grid[b-kfuew3gkao] {
        gap: 0.56rem;
    }

    .home-more-featured-panel[b-kfuew3gkao],
    .home-more-spotlight-panel[b-kfuew3gkao] {
        gap: 0.36rem;
    }

    .home-more-section[b-kfuew3gkao] {
        gap: 0.48rem;
        scroll-margin-top: 0.5rem;
    }

    .home-more-section-head h3[b-kfuew3gkao] {
        font-size: 0.9rem;
    }

    .home-featured-card[b-kfuew3gkao],
    .home-update-spotlight-card[b-kfuew3gkao],
    .home-guide-card[b-kfuew3gkao] {
        gap: 0.4rem;
        padding: 0.62rem 0.66rem;
        border-radius: 0.72rem;
        box-shadow: 0 4px 12px rgba(24, 8, 48, 0.16);
    }

    .home-more-launch-grid[b-kfuew3gkao] {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-guide-card[b-kfuew3gkao] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.22rem;
    }

    .home-guide-card-head[b-kfuew3gkao] {
        align-items: baseline;
        gap: 0.3rem;
    }

    .home-featured-meta[b-kfuew3gkao] {
        gap: 0.3rem;
    }

    .home-featured-chip[b-kfuew3gkao],
    .home-guide-read-time[b-kfuew3gkao] {
        font-size: 0.54rem;
    }

    .home-featured-chip[b-kfuew3gkao] {
        padding: 0.16rem 0.34rem;
        letter-spacing: 0.08em;
    }

    .home-featured-title[b-kfuew3gkao] {
        font-size: 1.12rem;
        line-height: 1.06;
        letter-spacing: 0;
    }

    .home-featured-summary[b-kfuew3gkao] {
        font-size: 0.7rem;
        line-height: 1.42;
    }

    .home-update-spotlight-title[b-kfuew3gkao] {
        font-size: 0.86rem;
        line-height: 1.18;
    }

    .home-upcoming-list[b-kfuew3gkao] {
        gap: 0.28rem;
        padding-left: 0.82rem;
        font-size: 0.7rem;
        line-height: 1.38;
    }

    .home-guide-grid[b-kfuew3gkao],
    .home-community-list[b-kfuew3gkao] {
        gap: 0.42rem;
    }

    .home-guide-title[b-kfuew3gkao] {
        flex-basis: 12rem;
        font-size: 0.82rem;
        line-height: 1.08;
    }

    .home-guide-summary[b-kfuew3gkao] {
        font-size: 0.66rem;
        line-height: 1.38;
    }

    .home-info-links[b-kfuew3gkao] {
        gap: 0.36rem 0.72rem;
    }

    .home-info-link[b-kfuew3gkao] {
        font-size: 0.72rem;
    }

    .home-more-hub-title[b-kfuew3gkao] {
        max-width: none;
        font-size: 1.34rem;
        letter-spacing: 0;
    }

    .home-community-meta[b-kfuew3gkao] {
        font-size: 0.54rem;
        letter-spacing: 0.08em;
    }

    .home-community-actions[b-kfuew3gkao] {
        gap: 0.42rem;
    }

    .home-community-action[b-kfuew3gkao] {
        flex: 1 1 8.25rem;
        min-height: 2.08rem;
        padding: 0.46rem 0.64rem;
        border-radius: 0.68rem;
        font-size: 0.68rem;
    }

    .home-community-empty[b-kfuew3gkao] {
        gap: 0.28rem;
        padding: 0.66rem 0.72rem;
        border-radius: 0.72rem;
    }

    .home-community-empty-kicker[b-kfuew3gkao] {
        font-size: 0.54rem;
        letter-spacing: 0.1em;
    }

    .home-community-empty p[b-kfuew3gkao] {
        font-size: 0.7rem;
        line-height: 1.42;
    }

    .home-title[b-kfuew3gkao] {
        font-size: clamp(2.2rem, 12vw, 3rem);
    }

    .home-hero[b-kfuew3gkao] {
        gap: 0.82rem;
        width: min(100%, 22rem);
    }

    .home-hero-actions[b-kfuew3gkao] {
        gap: 0.56rem;
        width: min(100%, 21rem);
    }

    .home-launch-action[b-kfuew3gkao] {
        min-height: 3.15rem;
        gap: 0.12rem;
        padding: 0.58rem 0.68rem 0.62rem;
        border-radius: 0.74rem;
    }

    .home-launch-head[b-kfuew3gkao] {
        gap: 0.34rem;
    }

    .home-launch-label[b-kfuew3gkao] {
        font-size: 0.82rem;
        line-height: 1.08;
    }

    .home-launch-status[b-kfuew3gkao] {
        padding: 0.13rem 0.34rem;
        font-size: 0.5rem;
        letter-spacing: 0.08em;
    }

    .home-launch-copy[b-kfuew3gkao] {
        font-size: 0.64rem;
        line-height: 1.34;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-cascade[b-kfuew3gkao],
    .home-title-glitch[b-kfuew3gkao] {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .home-launch-action[b-kfuew3gkao],
    .home-more-sheet[b-kfuew3gkao],
    .home-more-tab[b-kfuew3gkao],
    .home-more-tab-icon[b-kfuew3gkao],
    .home-featured-card[b-kfuew3gkao],
    .home-update-spotlight-card[b-kfuew3gkao],
    .home-guide-card[b-kfuew3gkao] {
        transition: none;
    }

    .home-info-link[b-kfuew3gkao],
    .home-community-action[b-kfuew3gkao] {
        transition: none;
    }

    .home-community-list-item--skeleton[b-kfuew3gkao] {
        animation: none;
    }
}
/* /Pages/Inventory.razor.rz.scp.css */
.inventory-page[b-rfp3kb91kp] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.inventory-loading[b-rfp3kb91kp] {
    text-align: center;
    padding: 4rem 0;
    color: var(--text-muted);
}

.cascade-in[b-rfp3kb91kp] {
    opacity: 0;
    animation: inventory-cascade-in-b-rfp3kb91kp 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes inventory-cascade-in-b-rfp3kb91kp {
    from {
        opacity: 0;
        transform: translateY(14px) scaleY(0.92) scaleX(1.02);
        filter: blur(4px);
    }

    55% {
        opacity: 1;
        transform: translateY(-3px) scaleY(1.02) scaleX(0.99);
        filter: blur(0);
    }

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

@keyframes inventory-card-in-b-rfp3kb91kp {
    from {
        opacity: 0;
        transform: translateY(12px) scaleY(0.92) scaleX(1.03);
        filter: blur(3px);
    }

    55% {
        opacity: 1;
        transform: translateY(-2px) scaleY(1.02) scaleX(0.99);
        filter: blur(0);
    }

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

.inventory-category-strip[b-rfp3kb91kp] {
    padding-top: 0.1rem;
}

.inventory-content[b-rfp3kb91kp] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.15rem 1.2rem 1.25rem;
    border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.08));
    background:
        linear-gradient(180deg, rgba(20, 20, 31, 0.98), rgba(13, 13, 22, 0.98)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 12%, transparent), transparent 36%);
    box-shadow: 0 20px 34px rgba(0, 0, 0, 0.2);
}

.content-header[b-rfp3kb91kp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.1rem;
}

.content-header > div:first-child[b-rfp3kb91kp] {
    min-width: 0;
}

.content-heading[b-rfp3kb91kp] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
}

.content-subheading[b-rfp3kb91kp] {
    margin: 0.18rem 0 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 650;
}

.content-header-actions[b-rfp3kb91kp] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.content-link-btn[b-rfp3kb91kp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    height: 1.55rem;
    padding: 0 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.28);
    background: rgba(124, 58, 237, 0.1);
    color: #d9c2ff;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.inventory-sort-btn[b-rfp3kb91kp] {
    appearance: none;
}

.content-link-btn:hover[b-rfp3kb91kp] {
    border-color: color-mix(in srgb, var(--accent) 54%, rgba(255, 255, 255, 0.12));
    background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.04));
    color: #fff;
}

.inventory-main-row[b-rfp3kb91kp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 0.85rem;
    align-items: start;
}

.inventory-content[b-rfp3kb91kp] {
    align-self: start;
}

.inventory-board[b-rfp3kb91kp],
.inventory-detail-panel[b-rfp3kb91kp] {
    min-width: 0;
}

.inventory-grid[b-rfp3kb91kp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.55rem;
}

.inventory-item-card[b-rfp3kb91kp] {
    box-sizing: border-box;
    position: relative;
    min-width: 0;
    min-height: 166px;
    padding: 0.5rem 0.5rem 0.6rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background:
        linear-gradient(180deg, rgba(27, 27, 42, 0.96), rgba(17, 17, 28, 0.98)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--r-color, var(--accent)) 16%, transparent), transparent 46%);
    color: inherit;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    animation: inventory-card-in-b-rfp3kb91kp 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.18s ease;
}

.inventory-item-card[b-rfp3kb91kp]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 35%, transparent 70%, rgba(255, 255, 255, 0.02));
    pointer-events: none;
}

.inventory-item-card:hover[b-rfp3kb91kp] {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--r-color, var(--accent));
    box-shadow: 0 20px 32px rgba(0, 0, 0, 0.24), 0 0 22px var(--r-glow, var(--accent-glow));
}

.inventory-item-card.selected[b-rfp3kb91kp] {
    opacity: 1;
    border-color: var(--r-color, var(--accent));
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.28), 0 0 24px var(--r-glow, var(--accent-glow));
}

.inventory-item-card.equipped[b-rfp3kb91kp] {
    border-color: color-mix(in srgb, var(--success) 58%, rgba(255, 255, 255, 0.08));
}

.inventory-card-art[b-rfp3kb91kp] {
    box-sizing: border-box;
    position: relative;
    flex: 1 1 auto;
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.64rem;
    background: rgba(255, 255, 255, 0.025);
}

.inventory-card-icon[b-rfp3kb91kp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    line-height: 1;
}

.rarity-dot[b-rfp3kb91kp] {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--r-color, transparent);
}

.rarity-common .rarity-dot[b-rfp3kb91kp] {
    display: none;
}

.inventory-card-name[b-rfp3kb91kp] {
    min-width: 0;
    max-width: 100%;
    margin-top: 0.3rem;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.22;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-card-footer[b-rfp3kb91kp] {
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.inventory-badge[b-rfp3kb91kp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0.24rem 0.56rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.badge-owned[b-rfp3kb91kp] {
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
}

.badge-equipped[b-rfp3kb91kp] {
    color: #fff;
    border: 1px solid var(--success);
    background: var(--success);
}

.inventory-detail-panel[b-rfp3kb91kp] {
    position: sticky;
    top: calc(var(--topbar-height, 3.5rem) + 0.85rem);
}

.inventory-detail-card[b-rfp3kb91kp] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--r-color, var(--border-color)) 56%, rgba(255, 255, 255, 0.06));
    background:
        linear-gradient(180deg, rgba(23, 24, 38, 0.98), rgba(14, 15, 25, 0.98)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--r-color, var(--accent)) 16%, transparent), transparent 44%);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    animation: inventory-card-in-b-rfp3kb91kp 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.inventory-detail-hero[b-rfp3kb91kp] {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    gap: 0.78rem;
    align-items: center;
}

.inventory-detail-icon[b-rfp3kb91kp] {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    font-size: 2.4rem;
    line-height: 1;
}

.inventory-detail-copy[b-rfp3kb91kp] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inventory-rarity-tag[b-rfp3kb91kp] {
    align-self: flex-start;
    max-width: 100%;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--r-color, var(--text-muted)) 60%, rgba(255, 255, 255, 0.06));
    background: rgba(8, 8, 14, 0.34);
    color: var(--r-color, var(--text-muted));
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.inventory-detail-name[b-rfp3kb91kp] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.inventory-detail-desc[b-rfp3kb91kp] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.45;
}

.inventory-detail-stats[b-rfp3kb91kp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.inventory-detail-stat[b-rfp3kb91kp],
.inventory-effect-panel[b-rfp3kb91kp] {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.inventory-detail-stat[b-rfp3kb91kp] {
    padding: 0.62rem 0.66rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.detail-stat-value[b-rfp3kb91kp] {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-stat-label[b-rfp3kb91kp],
.inventory-effect-label[b-rfp3kb91kp] {
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 750;
    line-height: 1.1;
}

.inventory-effect-panel[b-rfp3kb91kp] {
    padding: 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.inventory-effect-panel p[b-rfp3kb91kp] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.48;
}

.inventory-primary-btn[b-rfp3kb91kp] {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.72rem 0.9rem;
    border-radius: 0.78rem;
    border: 1px solid color-mix(in srgb, var(--accent) 72%, rgba(255, 255, 255, 0.18));
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    box-shadow: 0 14px 24px color-mix(in srgb, var(--accent) 18%, transparent);
    color: #fff;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.inventory-primary-btn:hover:not(:disabled)[b-rfp3kb91kp] {
    filter: brightness(1.08);
}

.inventory-primary-btn:disabled[b-rfp3kb91kp] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.inventory-empty[b-rfp3kb91kp] {
    box-sizing: border-box;
    min-height: 18rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px dashed color-mix(in srgb, var(--accent) 20%, var(--border-color));
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    text-align: center;
}

.inventory-empty h3[b-rfp3kb91kp],
.inventory-detail-empty h3[b-rfp3kb91kp] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 800;
}

.inventory-empty p[b-rfp3kb91kp],
.inventory-detail-empty p[b-rfp3kb91kp] {
    margin: 0;
    width: 100%;
    max-width: 28rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    overflow-wrap: break-word;
}

.inventory-detail-empty[b-rfp3kb91kp] {
    min-height: 15rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 980px) {
    .inventory-main-row[b-rfp3kb91kp] {
        grid-template-columns: 1fr;
    }

    .inventory-detail-panel[b-rfp3kb91kp] {
        position: static;
    }
}

@media (max-width: 720px) {
    .inventory-grid[b-rfp3kb91kp] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 640px) {
    .inventory-page[b-rfp3kb91kp] {
        max-width: none;
        padding: 0 0 2.5rem;
        gap: 0.9rem;
    }

    .inventory-content[b-rfp3kb91kp] {
        padding: 0.9rem 0.85rem 1rem;
        border-radius: 1rem;
        gap: 0.85rem;
    }

    .content-header[b-rfp3kb91kp] {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.55rem;
    }

    .content-heading[b-rfp3kb91kp] {
        font-size: 1.05rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content-subheading[b-rfp3kb91kp] {
        font-size: 0.68rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content-header-actions[b-rfp3kb91kp] {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-start;
        gap: 0.35rem;
    }

    .content-link-btn[b-rfp3kb91kp] {
        height: 1.48rem;
        padding: 0 0.52rem;
        font-size: 0.64rem;
    }

    .inventory-main-row[b-rfp3kb91kp] {
        gap: 0.7rem;
    }

    .inventory-grid[b-rfp3kb91kp] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.38rem;
    }

    .inventory-item-card[b-rfp3kb91kp] {
        min-height: 128px;
        padding: 0.36rem 0.36rem 0.44rem;
        border-radius: 0.72rem;
    }

    .inventory-card-art[b-rfp3kb91kp] {
        min-height: 62px;
        border-radius: 0.52rem;
    }

    .inventory-card-icon[b-rfp3kb91kp] {
        font-size: 2rem;
    }

    .inventory-card-name[b-rfp3kb91kp] {
        margin-top: 0.24rem;
        font-size: 0.68rem;
    }

    .inventory-badge[b-rfp3kb91kp] {
        padding: 0.2rem 0.46rem;
        font-size: 0.58rem;
    }

    .inventory-detail-card[b-rfp3kb91kp] {
        padding: 0.72rem;
        border-radius: 0.78rem;
        gap: 0.68rem;
    }

    .inventory-detail-hero[b-rfp3kb91kp] {
        grid-template-columns: 3.4rem minmax(0, 1fr);
        gap: 0.62rem;
    }

    .inventory-detail-icon[b-rfp3kb91kp] {
        width: 3.4rem;
        height: 3.4rem;
        border-radius: 0.64rem;
        font-size: 2rem;
    }

    .inventory-rarity-tag[b-rfp3kb91kp] {
        padding: 0.18rem 0.38rem;
        font-size: 0.52rem;
    }

    .inventory-detail-name[b-rfp3kb91kp] {
        font-size: 0.95rem;
    }

    .inventory-detail-desc[b-rfp3kb91kp],
    .inventory-effect-panel p[b-rfp3kb91kp] {
        font-size: 0.72rem;
    }

    .inventory-detail-stats[b-rfp3kb91kp] {
        gap: 0.38rem;
    }

    .inventory-detail-stat[b-rfp3kb91kp],
    .inventory-effect-panel[b-rfp3kb91kp] {
        border-radius: 0.62rem;
    }

    .inventory-detail-stat[b-rfp3kb91kp] {
        padding: 0.52rem 0.56rem;
    }

    .detail-stat-value[b-rfp3kb91kp] {
        font-size: 0.78rem;
    }

    .inventory-primary-btn[b-rfp3kb91kp] {
        min-height: 2.15rem;
        border-radius: 0.68rem;
        font-size: 0.78rem;
    }
}

@media (max-width: 380px) {
    .inventory-content[b-rfp3kb91kp] {
        padding: 0.65rem 0.6rem 0.75rem;
        gap: 0.65rem;
    }

    .content-heading[b-rfp3kb91kp] {
        font-size: 0.95rem;
    }

    .inventory-card-art[b-rfp3kb91kp] {
        min-height: 56px;
    }

    .inventory-card-icon[b-rfp3kb91kp] {
        font-size: 1.85rem;
    }
}

@media (max-width: 319px) {
    .inventory-grid[b-rfp3kb91kp] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cascade-in[b-rfp3kb91kp],
    .inventory-item-card[b-rfp3kb91kp],
    .inventory-detail-card[b-rfp3kb91kp] {
        opacity: 1;
        animation: none;
        transform: none;
        filter: none;
    }
}
/* /Pages/Japanese.razor.rz.scp.css */
.japanese-page[b-xu2dnq3iq7] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1rem 3.25rem;
}

.japanese-page--custom-training[b-xu2dnq3iq7] {
    max-width: none;
    padding: 0;
}

.jp-event-warmup[b-xu2dnq3iq7] {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-100vw, -100vh);
}

.jp-layout[b-xu2dnq3iq7] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.jp-main[b-xu2dnq3iq7] {
    min-width: 0;
}

.jp-main--area-exit[b-xu2dnq3iq7] {
    pointer-events: none;
}

.jp-main--area-exit .cascade-in[b-xu2dnq3iq7] {
    animation: jp-cascade-out-b-xu2dnq3iq7 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0ms;
}

.cascade-in[b-xu2dnq3iq7] {
    opacity: 0;
    animation: jp-cascade-in-b-xu2dnq3iq7 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
}

.jp-main--area-enter .cascade-in[b-xu2dnq3iq7] {
    animation-delay: min(var(--delay, 0ms), 36ms);
}

@keyframes jp-cascade-in-b-xu2dnq3iq7 {
    from {
        opacity: 0;
        transform: translateY(14px) scaleY(0.9) scaleX(1.03);
    }

    55% {
        opacity: 1;
        transform: translateY(-3px) scaleY(1.03) scaleX(0.99);
    }

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

@keyframes jp-cascade-out-b-xu2dnq3iq7 {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    45% {
        opacity: 1;
        transform: translateY(-3px) scaleY(1.03) scaleX(0.99);
    }

    to {
        opacity: 0;
        transform: translateY(14px) scaleY(0.9) scaleX(1.03);
    }
}

.jp-header[b-xu2dnq3iq7] {
    text-align: center;
    margin-bottom: clamp(0.95rem, 3vw, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.jp-heading[b-xu2dnq3iq7] {
    display: grid;
    gap: 0.3rem;
    max-width: 34rem;
}

.jp-title[b-xu2dnq3iq7] {
    margin: 0;
    font-size: clamp(1.55rem, 2.5vw, 1.85rem);
    font-weight: 800;
    color: var(--text-primary);
}

.jp-subtitle[b-xu2dnq3iq7] {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.section-label[b-xu2dnq3iq7] {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.continue-card:focus-visible[b-xu2dnq3iq7],
.unit-summary-card:focus-visible[b-xu2dnq3iq7],
.unit-chapter:focus-visible[b-xu2dnq3iq7],
.free-card:focus-visible[b-xu2dnq3iq7],
.free-card-sub:focus-visible[b-xu2dnq3iq7] {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 58%, transparent);
}

.jp-hero[b-xu2dnq3iq7] {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 0;
    width: min(100%, 58rem);
    margin-left: auto;
    margin-right: auto;
}

.hero-copy[b-xu2dnq3iq7] {
    display: grid;
    gap: 0.2rem;
    max-width: 40rem;
}

.hero-title[b-xu2dnq3iq7] {
    margin: 0;
    font-size: clamp(1.18rem, 2.2vw, 1.5rem);
    font-weight: 800;
    color: var(--text-primary);
}

.hero-desc[b-xu2dnq3iq7] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.jp-divider[b-xu2dnq3iq7] {
    width: min(100%, 58rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: 0.35rem auto 0.2rem;
}

.continue-card[b-xu2dnq3iq7] {
    position: relative;
    width: 100%;
    display: grid;
    gap: 1rem;
    padding: 1.3rem 1.35rem;
    border: 1px solid var(--bg-accent-surface);
    border-radius: 1.1rem;
    background: var(--bg-accent-surface);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--bg-accent-surface) 20%, transparent);
    text-align: left;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}

.continue-card[b-xu2dnq3iq7]::before {
    content: none;
}

.continue-card > *[b-xu2dnq3iq7] {
    position: relative;
    z-index: 1;
}

.continue-card:hover[b-xu2dnq3iq7] {
    transform: translateY(-3px) scale(1.008);
    border-color: var(--bg-accent-surface);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--bg-accent-surface) 24%, transparent);
}

.continue-card:active[b-xu2dnq3iq7] {
    transform: scale(0.985);
    transition-duration: 80ms;
}

.continue-card:focus-visible[b-xu2dnq3iq7] {
    border-color: var(--bg-accent-surface);
    box-shadow:
        0 0 0 2px color-mix(in srgb, white 18%, var(--bg-accent-surface) 82%),
        0 16px 34px color-mix(in srgb, var(--bg-accent-surface) 24%, transparent);
}

.continue-copy[b-xu2dnq3iq7] {
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
}

.continue-copy-topline[b-xu2dnq3iq7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.continue-unit-name[b-xu2dnq3iq7] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, white 78%, var(--bg-accent-surface) 22%);
}

.continue-title[b-xu2dnq3iq7] {
    margin: 0;
    font-size: clamp(1.3rem, 2.4vw, 1.55rem);
    font-weight: 800;
    color: var(--text-primary);
}

.continue-desc[b-xu2dnq3iq7] {
    margin: 0;
    max-width: 42rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: color-mix(in srgb, white 72%, var(--bg-accent-surface) 28%);
}

.continue-pill[b-xu2dnq3iq7],
.unit-badge[b-xu2dnq3iq7],
.unit-state[b-xu2dnq3iq7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.continue-pill[b-xu2dnq3iq7] {
    color: #fff;
    background: transparent;
    border: 1px solid color-mix(in srgb, white 24%, var(--bg-accent-surface) 76%);
}

.continue-bar[b-xu2dnq3iq7],
.unit-progress[b-xu2dnq3iq7] {
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, white 14%, var(--bg-accent-surface) 86%);
    overflow: hidden;
}

.continue-bar-fill[b-xu2dnq3iq7],
.unit-progress-fill[b-xu2dnq3iq7] {
    height: 100%;
    border-radius: inherit;
    background: color-mix(in srgb, white 28%, var(--bg-accent-surface) 72%);
    transition: width 0.45s ease;
}

.area-secondary[b-xu2dnq3iq7] {
    width: min(100%, 58rem);
    margin: 0 auto;
    display: grid;
    gap: 0.85rem;
}

.area-preview[b-xu2dnq3iq7] {
    display: grid;
    gap: 0.85rem;
}

.area-intro[b-xu2dnq3iq7] {
    display: grid;
    gap: 0.45rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
        var(--bg-surface);
}

.area-intro-topline[b-xu2dnq3iq7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.area-intro-kicker[b-xu2dnq3iq7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.area-intro-pill[b-xu2dnq3iq7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

.area-intro-title[b-xu2dnq3iq7] {
    margin: 0;
    font-size: clamp(1.12rem, 2vw, 1.34rem);
    font-weight: 800;
    color: var(--text-primary);
}

.area-intro-desc[b-xu2dnq3iq7] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.area-intro-support[b-xu2dnq3iq7] {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.preview-modules[b-xu2dnq3iq7] {
    display: grid;
    gap: 0.55rem;
}

.preview-module-list[b-xu2dnq3iq7] {
    display: grid;
    gap: 0.55rem;
}

.preview-module-card[b-xu2dnq3iq7] {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.82rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 96%, rgba(255, 255, 255, 0.04));
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.preview-module-index[b-xu2dnq3iq7] {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 800;
}

.preview-module-copy[b-xu2dnq3iq7] {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.preview-module-title[b-xu2dnq3iq7] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.preview-module-desc[b-xu2dnq3iq7] {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.free-training-area[b-xu2dnq3iq7] {
    width: 100%;
}

.free-card-group[b-xu2dnq3iq7] {
    display: flex;
    flex-direction: column;
}

.free-card-group + .free-card-group[b-xu2dnq3iq7] {
    margin-top: 0.6rem;
}

.free-card-sub[b-xu2dnq3iq7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 1.1rem 0.45rem 1.35rem;
    border: 1px dashed var(--border-color);
    border-top: none;
    border-radius: 0 0 0.65rem 0.65rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.free-card-sub:not(:last-child)[b-xu2dnq3iq7] {
    border-radius: 0;
}

.free-card-sub:hover[b-xu2dnq3iq7] {
    border-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--accent);
}

.free-card-sub:hover .free-card-arrow[b-xu2dnq3iq7] {
    transform: translateX(5px);
    color: var(--accent);
}

.free-card:has(+ .free-card-sub)[b-xu2dnq3iq7] {
    border-radius: 0.9rem 0.9rem 0 0;
}

.free-card-sub-kana[b-xu2dnq3iq7] {
    font-size: 1.15rem;
    line-height: 1.1;
    flex-shrink: 0;
    opacity: 0.8;
}

.free-card-kana:lang(ja)[b-xu2dnq3iq7],
.free-card-sub-kana:lang(ja)[b-xu2dnq3iq7] {
    color: var(--text-primary);
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
}

.free-card-sub-label[b-xu2dnq3iq7] {
    flex: 1;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.free-cards[b-xu2dnq3iq7] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.free-card[b-xu2dnq3iq7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.9rem 1.1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.free-card:hover[b-xu2dnq3iq7] {
    border-color: var(--accent);
    background: var(--accent-subtle);
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 0 14px var(--accent-subtle);
}

.free-card:active[b-xu2dnq3iq7] {
    transform: scale(0.98);
    transition-duration: 80ms;
}

.free-card-kana[b-xu2dnq3iq7] {
    font-size: 2rem;
    line-height: 1.1;
    flex-shrink: 0;
}

.free-card-sub-kana:lang(ja)[b-xu2dnq3iq7] {
    opacity: 1;
}

.free-card-info[b-xu2dnq3iq7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.free-card-name[b-xu2dnq3iq7] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.free-card-desc[b-xu2dnq3iq7] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.free-card-arrow[b-xu2dnq3iq7] {
    font-size: 1rem;
    color: var(--text-muted);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
    flex-shrink: 0;
}

.free-card-badges[b-xu2dnq3iq7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.free-card-badge[b-xu2dnq3iq7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.free-card:hover .free-card-arrow[b-xu2dnq3iq7] {
    transform: translateX(5px);
    color: var(--accent);
}

.units-header[b-xu2dnq3iq7] {
    margin-bottom: 0.55rem;
}

.units-section[b-xu2dnq3iq7] {
    display: grid;
    gap: 0.8rem;
    width: min(100%, 58rem);
    margin: 0 auto;
}

.unit-list[b-xu2dnq3iq7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.unit-card[b-xu2dnq3iq7] {
    position: relative;
    border: 1.5px solid var(--border-color);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.unit-card.expanded[b-xu2dnq3iq7] {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 28px rgba(130, 92, 255, 0.08), 0 10px 32px rgba(0, 0, 0, 0.14);
}

.unit-card.current[b-xu2dnq3iq7] {
    border-color: var(--bg-accent-surface);
    background: var(--bg-accent-surface);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--bg-accent-surface) 20%, transparent);
}

.unit-card.done[b-xu2dnq3iq7] {
    border-color: color-mix(in srgb, var(--border-color) 92%, rgba(255, 255, 255, 0.04));
}

.unit-card.locked[b-xu2dnq3iq7] {
    opacity: 0.62;
}

.unit-card.done:not(.current):not(.expanded)[b-xu2dnq3iq7],
.unit-card.locked:not(.expanded)[b-xu2dnq3iq7] {
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.unit-summary-card[b-xu2dnq3iq7] {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.unit-summary-card[data-locked-message][b-xu2dnq3iq7] {
    cursor: help;
}

.unit-summary-card[data-locked-message][b-xu2dnq3iq7]::before,
.unit-summary-card[data-locked-message][b-xu2dnq3iq7]::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.unit-summary-card[data-locked-message][b-xu2dnq3iq7]::before {
    content: "";
    position: absolute;
    right: 1.5rem;
    bottom: calc(100% + 0.1rem);
    border-width: 0.45rem 0.45rem 0;
    border-style: solid;
    border-color: color-mix(in srgb, var(--border-color) 84%, rgba(255, 255, 255, 0.12)) transparent transparent;
    transform: translateY(4px);
    z-index: 7;
}

.unit-summary-card[data-locked-message][b-xu2dnq3iq7]::after {
    content: attr(data-locked-message);
    position: absolute;
    right: 0.9rem;
    bottom: calc(100% + 0.5rem);
    width: min(20rem, calc(100vw - 3.5rem));
    padding: 0.7rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 84%, rgba(255, 255, 255, 0.12));
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--bg-surface) 96%, rgba(8, 10, 20, 0.9));
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    white-space: normal;
    transform: translateY(6px);
    z-index: 6;
}

.unit-summary-card[data-locked-message]:hover[b-xu2dnq3iq7]::before,
.unit-summary-card[data-locked-message]:hover[b-xu2dnq3iq7]::after,
.unit-summary-card[data-locked-message]:focus-visible[b-xu2dnq3iq7]::before,
.unit-summary-card[data-locked-message]:focus-visible[b-xu2dnq3iq7]::after {
    opacity: 1;
    transform: translateY(0);
}

.unit-summary-card:hover[b-xu2dnq3iq7] {
    background: rgba(255, 255, 255, 0.02);
}

.unit-summary-card:active[b-xu2dnq3iq7] {
    animation: unit-press-b-xu2dnq3iq7 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.unit-summary-main[b-xu2dnq3iq7] {
    min-width: 0;
}

.unit-kicker[b-xu2dnq3iq7] {
    display: inline-block;
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.unit-name[b-xu2dnq3iq7] {
    margin: 0 0 0.15rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.unit-desc[b-xu2dnq3iq7] {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.unit-summary-side[b-xu2dnq3iq7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    max-width: 18rem;
}

.unit-badge[b-xu2dnq3iq7],
.unit-state.current[b-xu2dnq3iq7],
.unit-state.done[b-xu2dnq3iq7],
.unit-state.locked[b-xu2dnq3iq7] {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
}

.unit-state.locked[b-xu2dnq3iq7] {
    color: var(--text-muted);
}

.unit-card.current .unit-summary-card[b-xu2dnq3iq7] {
    padding-top: 1.12rem;
    padding-bottom: 1.08rem;
}

.unit-card.current .unit-kicker[b-xu2dnq3iq7] {
    color: color-mix(in srgb, white 78%, var(--bg-accent-surface) 22%);
}

.unit-card.current .unit-name[b-xu2dnq3iq7] {
    font-size: 1.05rem;
    color: var(--text-primary);
}

.unit-card.current .unit-desc[b-xu2dnq3iq7] {
    color: color-mix(in srgb, white 72%, var(--bg-accent-surface) 28%);
}

.unit-card.current .unit-badge[b-xu2dnq3iq7] {
    color: #fff;
    background: transparent;
    border-color: color-mix(in srgb, white 24%, var(--bg-accent-surface) 76%);
}

.unit-card.current .unit-state.current[b-xu2dnq3iq7] {
    color: #fff;
    border-color: color-mix(in srgb, white 24%, var(--bg-accent-surface) 76%);
    background: transparent;
}

.unit-card.done:not(.current):not(.expanded) .unit-summary-card[b-xu2dnq3iq7],
.unit-card.locked:not(.expanded) .unit-summary-card[b-xu2dnq3iq7] {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    gap: 0.9rem;
}

.unit-card.done:not(.current):not(.expanded) .unit-kicker[b-xu2dnq3iq7],
.unit-card.locked:not(.expanded) .unit-kicker[b-xu2dnq3iq7] {
    margin-bottom: 0.08rem;
    opacity: 0.75;
}

.unit-card.done:not(.current):not(.expanded) .unit-desc[b-xu2dnq3iq7],
.unit-card.locked:not(.expanded) .unit-desc[b-xu2dnq3iq7] {
    display: none;
}

.unit-card.done:not(.current):not(.expanded) .unit-progress[b-xu2dnq3iq7],
.unit-card.locked:not(.expanded) .unit-progress[b-xu2dnq3iq7] {
    height: 2px;
    opacity: 0.72;
}

.unit-card.done:not(.current):not(.expanded) .unit-badge[b-xu2dnq3iq7],
.unit-card.done:not(.current):not(.expanded) .unit-state.done[b-xu2dnq3iq7],
.unit-card.locked:not(.expanded) .unit-badge[b-xu2dnq3iq7],
.unit-card.locked:not(.expanded) .unit-state.locked[b-xu2dnq3iq7] {
    font-size: 0.68rem;
    opacity: 0.72;
}

.unit-toggle[b-xu2dnq3iq7] {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.unit-card.expanded .unit-toggle[b-xu2dnq3iq7] {
    transform: rotate(90deg);
    color: var(--accent);
}

.unit-card.current .unit-toggle[b-xu2dnq3iq7],
.unit-card.current.expanded .unit-toggle[b-xu2dnq3iq7] {
    color: #fff;
}

.unit-card.current .unit-progress[b-xu2dnq3iq7] {
    height: 4px;
    background: color-mix(in srgb, white 14%, var(--bg-accent-surface) 86%);
}

.unit-progress[b-xu2dnq3iq7] {
    grid-column: 1 / -2;
}

.unit-card.done .unit-progress-fill[b-xu2dnq3iq7] {
    background: var(--success);
}

.unit-chapter[b-xu2dnq3iq7] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    background: var(--bg-elevated);
    text-align: left;
    cursor: pointer;
    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.25s ease, opacity 0.18s ease, background 0.2s ease;
}

.unit-chapter:hover:not(:disabled)[b-xu2dnq3iq7] {
    transform: translateY(-3px) scale(1.008);
    border-color: var(--accent);
    box-shadow: 0 4px 18px rgba(130, 92, 255, 0.08);
    background: color-mix(in srgb, var(--bg-elevated) 96%, var(--accent) 4%);
}

.unit-chapter:active:not(:disabled)[b-xu2dnq3iq7] {
    transform: scale(0.98);
    transition-duration: 80ms;
}

.unit-chapter.locked[b-xu2dnq3iq7] {
    opacity: 0.45;
    cursor: not-allowed;
}

.unit-chapter.done[b-xu2dnq3iq7] {
    border-color: rgba(34, 197, 94, 0.35);
}

.unit-chapter.current[b-xu2dnq3iq7] {
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--bg-elevated);
}

.unit-chapter-order[b-xu2dnq3iq7] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
}

.unit-chapter.done .unit-chapter-order[b-xu2dnq3iq7] {
    background: var(--success);
}

.unit-chapter.locked .unit-chapter-order[b-xu2dnq3iq7] {
    background: var(--bg-surface);
    color: var(--text-secondary);
}

.unit-chapter-copy[b-xu2dnq3iq7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.unit-chapter-name[b-xu2dnq3iq7] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.unit-chapter-desc[b-xu2dnq3iq7] {
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unit-chapter-meta[b-xu2dnq3iq7] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.18rem;
    flex-shrink: 0;
}

.unit-chapter-count[b-xu2dnq3iq7] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.unit-chapter-link[b-xu2dnq3iq7] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.unit-chapter.current .unit-chapter-link[b-xu2dnq3iq7] {
    color: var(--accent);
}

.unit-chapter.done .unit-chapter-link[b-xu2dnq3iq7] {
    color: var(--success);
}

@keyframes unit-press-b-xu2dnq3iq7 {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(0.985);
    }

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

@media (max-width: 760px) {
    .unit-summary-card[b-xu2dnq3iq7] {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .area-intro-topline[b-xu2dnq3iq7] {
        align-items: flex-start;
    }

    .unit-summary-side[b-xu2dnq3iq7] {
        justify-content: flex-start;
        max-width: none;
    }

    .unit-progress[b-xu2dnq3iq7] {
        grid-column: auto;
    }

    .unit-toggle[b-xu2dnq3iq7] {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .japanese-page[b-xu2dnq3iq7] {
        padding: 0 0.58rem calc(var(--phonebar-height, 3rem) + 0.9rem);
    }

    .jp-layout[b-xu2dnq3iq7] {
        gap: 0.7rem;
    }

    .jp-header[b-xu2dnq3iq7] {
        gap: 0.42rem;
        margin-bottom: 0.62rem;
    }

    .jp-heading[b-xu2dnq3iq7] {
        gap: 0.12rem;
    }

    .jp-title[b-xu2dnq3iq7] {
        font-size: 1.2rem;
        line-height: 1.08;
    }

    .jp-subtitle[b-xu2dnq3iq7] {
        font-size: 0.66rem;
        line-height: 1.35;
    }

    .section-label[b-xu2dnq3iq7] {
        font-size: 0.56rem;
        letter-spacing: 0.06em;
    }

    .jp-hero[b-xu2dnq3iq7],
    .area-secondary[b-xu2dnq3iq7],
    .units-section[b-xu2dnq3iq7] {
        width: 100%;
    }

    .jp-hero[b-xu2dnq3iq7],
    .area-secondary[b-xu2dnq3iq7],
    .area-preview[b-xu2dnq3iq7],
    .units-section[b-xu2dnq3iq7] {
        gap: 0.48rem;
    }

    .jp-divider[b-xu2dnq3iq7] {
        margin: 0.08rem auto;
    }

    .continue-card[b-xu2dnq3iq7] {
        gap: 0.52rem;
        padding: 0.72rem;
        border-radius: 0.72rem;
        box-shadow: 0 10px 22px color-mix(in srgb, var(--bg-accent-surface) 16%, transparent);
    }

    .continue-copy[b-xu2dnq3iq7] {
        gap: 0.14rem;
    }

    .continue-copy-topline[b-xu2dnq3iq7] {
        gap: 0.38rem;
    }

    .continue-unit-name[b-xu2dnq3iq7] {
        font-size: 0.56rem;
        letter-spacing: 0.06em;
    }

    .continue-title[b-xu2dnq3iq7] {
        font-size: 1rem;
        line-height: 1.12;
    }

    .continue-desc[b-xu2dnq3iq7] {
        font-size: 0.66rem;
        line-height: 1.38;
    }

    .continue-pill[b-xu2dnq3iq7],
    .unit-badge[b-xu2dnq3iq7],
    .unit-state[b-xu2dnq3iq7] {
        padding: 0.18rem 0.38rem;
        font-size: 0.58rem;
    }

    .area-intro[b-xu2dnq3iq7] {
        gap: 0.28rem;
        padding: 0.64rem 0.68rem;
        border-radius: 0.68rem;
    }

    .area-intro-topline[b-xu2dnq3iq7] {
        gap: 0.36rem;
    }

    .area-intro-kicker[b-xu2dnq3iq7],
    .area-intro-pill[b-xu2dnq3iq7] {
        font-size: 0.56rem;
    }

    .area-intro-pill[b-xu2dnq3iq7] {
        padding: 0.18rem 0.4rem;
    }

    .area-intro-title[b-xu2dnq3iq7] {
        font-size: 0.96rem;
        line-height: 1.12;
    }

    .area-intro-desc[b-xu2dnq3iq7],
    .area-intro-support[b-xu2dnq3iq7],
    .preview-module-desc[b-xu2dnq3iq7] {
        font-size: 0.66rem;
        line-height: 1.38;
    }

    .preview-modules[b-xu2dnq3iq7],
    .preview-module-list[b-xu2dnq3iq7] {
        gap: 0.42rem;
    }

    .preview-module-card[b-xu2dnq3iq7] {
        gap: 0.48rem;
        padding: 0.6rem 0.64rem;
        border-radius: 0.66rem;
    }

    .preview-module-index[b-xu2dnq3iq7] {
        width: 1.55rem;
        height: 1.55rem;
        border-radius: 0.48rem;
        font-size: 0.58rem;
    }

    .preview-module-title[b-xu2dnq3iq7] {
        font-size: 0.78rem;
        line-height: 1.15;
    }

    .free-cards[b-xu2dnq3iq7] {
        gap: 0.46rem;
    }

    .free-card-group + .free-card-group[b-xu2dnq3iq7] {
        margin-top: 0.36rem;
    }

    .free-card[b-xu2dnq3iq7] {
        gap: 0.58rem;
        padding: 0.62rem 0.68rem;
        border-radius: 0.66rem;
    }

    .free-card:has(+ .free-card-sub)[b-xu2dnq3iq7] {
        border-radius: 0.66rem 0.66rem 0 0;
    }

    .free-card-sub[b-xu2dnq3iq7] {
        gap: 0.42rem;
        padding: 0.38rem 0.68rem 0.4rem 0.86rem;
        border-radius: 0 0 0.5rem 0.5rem;
    }

    .free-card-kana[b-xu2dnq3iq7] {
        font-size: 1.42rem;
    }

    .free-card-sub-kana[b-xu2dnq3iq7] {
        font-size: 0.88rem;
    }

    .free-card-info[b-xu2dnq3iq7] {
        gap: 0.06rem;
    }

    .free-card-name[b-xu2dnq3iq7] {
        font-size: 0.78rem;
    }

    .free-card-desc[b-xu2dnq3iq7],
    .free-card-sub-label[b-xu2dnq3iq7] {
        font-size: 0.62rem;
        line-height: 1.32;
    }

    .free-card-arrow[b-xu2dnq3iq7] {
        font-size: 0.8rem;
    }

    .free-card-badges[b-xu2dnq3iq7] {
        gap: 0.24rem;
        justify-content: flex-start;
    }

    .free-card-badge[b-xu2dnq3iq7] {
        padding: 0.16rem 0.34rem;
        font-size: 0.54rem;
    }

    .units-header[b-xu2dnq3iq7] {
        margin-bottom: 0.18rem;
    }

    .unit-list[b-xu2dnq3iq7] {
        gap: 0.5rem;
    }

    .unit-card[b-xu2dnq3iq7] {
        border-width: 1px;
        border-radius: 0.72rem;
    }

    .unit-card.expanded[b-xu2dnq3iq7],
    .unit-card.current[b-xu2dnq3iq7] {
        box-shadow: 0 10px 22px color-mix(in srgb, var(--bg-accent-surface) 14%, transparent);
    }

    .unit-summary-card[b-xu2dnq3iq7] {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.46rem;
        align-items: start;
        padding: 0.66rem 0.7rem;
    }

    .unit-summary-side[b-xu2dnq3iq7],
    .unit-progress[b-xu2dnq3iq7] {
        grid-column: 1 / -1;
    }

    .unit-summary-side[b-xu2dnq3iq7] {
        justify-content: flex-start;
        gap: 0.28rem;
    }

    .unit-toggle[b-xu2dnq3iq7] {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        font-size: 0.9rem;
    }

    .unit-kicker[b-xu2dnq3iq7] {
        margin-bottom: 0.08rem;
        font-size: 0.56rem;
        letter-spacing: 0.06em;
    }

    .unit-name[b-xu2dnq3iq7],
    .unit-card.current .unit-name[b-xu2dnq3iq7] {
        margin-bottom: 0.06rem;
        font-size: 0.84rem;
        line-height: 1.12;
    }

    .unit-desc[b-xu2dnq3iq7] {
        font-size: 0.64rem;
        line-height: 1.34;
    }

    .unit-card.current .unit-summary-card[b-xu2dnq3iq7] {
        padding-top: 0.72rem;
        padding-bottom: 0.72rem;
    }

    .unit-card.done:not(.current):not(.expanded) .unit-summary-card[b-xu2dnq3iq7],
    .unit-card.locked:not(.expanded) .unit-summary-card[b-xu2dnq3iq7] {
        gap: 0.4rem;
        padding-top: 0.58rem;
        padding-bottom: 0.58rem;
    }

    .unit-card.done:not(.current):not(.expanded) .unit-badge[b-xu2dnq3iq7],
    .unit-card.done:not(.current):not(.expanded) .unit-state.done[b-xu2dnq3iq7],
    .unit-card.locked:not(.expanded) .unit-badge[b-xu2dnq3iq7],
    .unit-card.locked:not(.expanded) .unit-state.locked[b-xu2dnq3iq7] {
        font-size: 0.54rem;
    }

    .unit-chapter[b-xu2dnq3iq7] {
        gap: 0.5rem;
        padding: 0.56rem 0.62rem;
        border-radius: 0.58rem;
    }

    .unit-chapter-order[b-xu2dnq3iq7] {
        width: 1.55rem;
        height: 1.55rem;
        font-size: 0.64rem;
    }

    .unit-chapter-copy[b-xu2dnq3iq7] {
        gap: 0.06rem;
    }

    .unit-chapter-name[b-xu2dnq3iq7] {
        font-size: 0.74rem;
        line-height: 1.15;
    }

    .unit-chapter-desc[b-xu2dnq3iq7] {
        font-size: 0.62rem;
        line-height: 1.32;
    }

    .unit-chapter-count[b-xu2dnq3iq7] {
        font-size: 0.62rem;
    }

    .unit-chapter-link[b-xu2dnq3iq7] {
        font-size: 0.54rem;
        letter-spacing: 0.05em;
    }
}

@media (max-width: 520px) {
    .japanese-page[b-xu2dnq3iq7] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .area-intro[b-xu2dnq3iq7],
    .preview-module-card[b-xu2dnq3iq7],
    .continue-card[b-xu2dnq3iq7],
    .unit-summary-card[b-xu2dnq3iq7],
    .unit-chapter[b-xu2dnq3iq7] {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .continue-copy-topline[b-xu2dnq3iq7],
    .unit-chapter[b-xu2dnq3iq7] {
        align-items: flex-start;
    }

    .preview-module-card[b-xu2dnq3iq7],
    .unit-chapter[b-xu2dnq3iq7] {
        flex-wrap: wrap;
    }

    .jp-header[b-xu2dnq3iq7] {
        gap: 0.4rem;
    }

    .unit-chapter-meta[b-xu2dnq3iq7] {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: calc(1.55rem + 0.5rem);
    }

    .unit-chapter-desc[b-xu2dnq3iq7] {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jp-main--area-exit .cascade-in[b-xu2dnq3iq7],
    .cascade-in[b-xu2dnq3iq7] {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .unit-summary-card:active[b-xu2dnq3iq7] {
        animation: none;
    }

    .area-pill[b-xu2dnq3iq7],
    .continue-card[b-xu2dnq3iq7],
    .free-card[b-xu2dnq3iq7],
    .free-card-sub[b-xu2dnq3iq7],
    .unit-toggle[b-xu2dnq3iq7] {
        transition: none;
    }
}
/* /Pages/Leaderboard.razor.rz.scp.css */
/* ?? Rank Progression page ?????????????????????? */

.lb-shell[b-8h1oiud3pu] {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lb-full-width[b-8h1oiud3pu] {
    width: 100%;
}

/* ?? Section navigation ????????????????????????? */

.lb-section-strip[b-8h1oiud3pu] {
    padding-top: 0.1rem;
}

.lb-content[b-8h1oiud3pu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.rank-unified-card[b-8h1oiud3pu],
.info-unified-card[b-8h1oiud3pu] {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(17, 18, 30, 0.95), rgba(13, 14, 24, 0.97));
    overflow: hidden;
}

.rank-unified-card .lb-header[b-8h1oiud3pu],
.rank-unified-card .rank-journey[b-8h1oiud3pu],
.info-unified-card .lb-rewards-info[b-8h1oiud3pu],
.info-unified-card .rp-info[b-8h1oiud3pu] {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.rank-card-separator[b-8h1oiud3pu] {
    height: 1px;
    margin: 0 1.1rem;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent),
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
}

.lb-loading[b-8h1oiud3pu] {
    text-align: center;
    color: var(--text-muted);
    padding: 4rem 0;
}

/* ?? Reward banner ?????????????????????????????? */

.lb-reward-banner[b-8h1oiud3pu] {
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 0.9rem;
    background: rgba(250, 204, 21, 0.07);
    padding: 0.75rem 1rem;
}

.reward-banner-body[b-8h1oiud3pu] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.reward-banner-icon[b-8h1oiud3pu] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.reward-banner-text[b-8h1oiud3pu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.reward-banner-title[b-8h1oiud3pu] {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
}

.reward-banner-detail[b-8h1oiud3pu] {
    font-size: 0.72rem;
    color: #fbbf24;
    font-weight: 600;
}

.reward-claim-btn[b-8h1oiud3pu] {
    border: none;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #facc15, #f59e0b);
    color: #1a1a2e;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reward-claim-btn:hover[b-8h1oiud3pu] {
    transform: scale(1.08);
}

/* ?? Header ????????????????????????????????????? */

.lb-header[b-8h1oiud3pu] {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(17, 18, 30, 0.95), rgba(13, 14, 24, 0.97));
    padding: 1.1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rank-badge[b-8h1oiud3pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    border: 1px solid color-mix(in srgb, var(--rank-color) 35%, transparent);
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--rank-color) 8%, transparent);
    padding: 0.7rem 0.9rem;
    min-width: 5rem;
}

.rank-icon[b-8h1oiud3pu] {
    font-size: 1.6rem;
    line-height: 1;
}

.rank-label[b-8h1oiud3pu] {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--rank-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lb-header-info[b-8h1oiud3pu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
}

.lb-rp-section[b-8h1oiud3pu] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.lb-rp-bar[b-8h1oiud3pu] {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.lb-rp-bar-fill[b-8h1oiud3pu] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
    transition: width 0.4s ease;
}

.lb-rp-label[b-8h1oiud3pu] {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
}

.lb-header-stats[b-8h1oiud3pu] {
    display: flex;
    gap: 1.2rem;
}

.lb-stat[b-8h1oiud3pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
}

.lb-stat-value[b-8h1oiud3pu] {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}

.lb-stat-label[b-8h1oiud3pu] {
    font-size: 0.64rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* ?? Rank journey ??????????????????????????????? */

.rank-journey[b-8h1oiud3pu] {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(17, 18, 30, 0.95), rgba(13, 14, 24, 0.97));
    padding: 1rem 1.1rem;
}

.journey-title[b-8h1oiud3pu] {
    margin: 0 0 0.8rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.journey-track[b-8h1oiud3pu] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.journey-node[b-8h1oiud3pu] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.6rem;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    width: 100%;
    opacity: 0.45;
    transition: all 0.2s ease;
}

.journey-node.reached[b-8h1oiud3pu] {
    opacity: 1;
    border-color: color-mix(in srgb, var(--rank-color) 40%, transparent);
    background: color-mix(in srgb, var(--rank-color) 6%, transparent);
}

.journey-node.current[b-8h1oiud3pu] {
    opacity: 1;
    border-color: var(--rank-color);
    box-shadow: 0 0 14px color-mix(in srgb, var(--rank-color) 25%, transparent);
}

.journey-icon[b-8h1oiud3pu] {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.journey-rank-label[b-8h1oiud3pu] {
    flex: 1;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--rank-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.journey-rp[b-8h1oiud3pu] {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.journey-connector[b-8h1oiud3pu] {
    width: 2px;
    height: 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    margin-left: 1.55rem;
    flex-shrink: 0;
}

.journey-connector.filled[b-8h1oiud3pu] {
    background: linear-gradient(180deg, var(--accent), var(--accent-secondary));
}

/* ?? RP info ???????????????????????????????????? */

.rp-info[b-8h1oiud3pu] {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(17, 18, 30, 0.95), rgba(13, 14, 24, 0.97));
    padding: 1rem 1.1rem;
}

.rp-info-title[b-8h1oiud3pu] {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rp-info-grid[b-8h1oiud3pu] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rp-info-row[b-8h1oiud3pu] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.02);
}

.rp-info-icon[b-8h1oiud3pu] {
    font-size: 0.95rem;
    flex-shrink: 0;
    width: 1.4rem;
    text-align: center;
}

.rp-info-desc[b-8h1oiud3pu] {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.rp-info-value[b-8h1oiud3pu] {
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 700;
    white-space: nowrap;
}

/* ?? Rewards info ??????????????????????????????? */

.lb-rewards-info[b-8h1oiud3pu] {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(17, 18, 30, 0.95), rgba(13, 14, 24, 0.97));
    padding: 1rem 1.1rem;
}

.rewards-title[b-8h1oiud3pu] {
    margin: 0 0 0.7rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rewards-grid[b-8h1oiud3pu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.8rem, 1fr));
    gap: 0.5rem;
}

.reward-card[b-8h1oiud3pu] {
    border: 1px solid var(--border-color);
    border-radius: 0.7rem;
    padding: 0.55rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    transition: border-color 0.15s ease;
}

.reward-card.reached[b-8h1oiud3pu] {
    border-color: rgba(74, 222, 128, 0.35);
    background: rgba(74, 222, 128, 0.06);
}

.reward-card-icon[b-8h1oiud3pu] {
    font-size: 1.15rem;
}

.reward-card-rank[b-8h1oiud3pu] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.reward-card-detail[b-8h1oiud3pu] {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 600;
}

.reward-card-check[b-8h1oiud3pu] {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    font-size: 0.6rem;
    color: #4ade80;
    font-weight: 700;
}

/* ?? League banner variant ?????????????????????? */

.league-banner[b-8h1oiud3pu] {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.07);
}

/* ?? Weekly league section ?????????????????????? */

.league-section[b-8h1oiud3pu] {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(17, 18, 30, 0.95), rgba(13, 14, 24, 0.97));
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.league-head[b-8h1oiud3pu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.league-title[b-8h1oiud3pu] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.league-sub[b-8h1oiud3pu] {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
}

.league-head-stats[b-8h1oiud3pu] {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

/* ?? Zone indicators ???????????????????????????? */

.league-zones[b-8h1oiud3pu] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.zone-pill[b-8h1oiud3pu] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.zone-reward[b-8h1oiud3pu] {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.25);
    background: rgba(251, 191, 36, 0.08);
}

.zone-stable[b-8h1oiud3pu] {
    color: var(--text-muted);
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.03);
}

.zone-low[b-8h1oiud3pu] {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.25);
    background: rgba(248, 113, 113, 0.08);
}

/* ?? League table ??????????????????????????????? */

.league-table[b-8h1oiud3pu] {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    overflow: hidden;
}

.league-row[b-8h1oiud3pu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.12s ease;
}

.league-row:last-child[b-8h1oiud3pu] {
    border-bottom: none;
}

.league-row:hover[b-8h1oiud3pu] {
    background: rgba(255, 255, 255, 0.03);
}

.league-row-player[b-8h1oiud3pu] {
    background: rgba(124, 58, 237, 0.12);
    border-left: 3px solid var(--accent);
}

.league-row-player:hover[b-8h1oiud3pu] {
    background: rgba(124, 58, 237, 0.18);
}

.league-row-gold[b-8h1oiud3pu] {
    background: rgba(255, 215, 0, 0.06);
}

.league-row-silver[b-8h1oiud3pu] {
    background: rgba(192, 192, 192, 0.05);
}

.league-row-bronze[b-8h1oiud3pu] {
    background: rgba(205, 127, 50, 0.05);
}

.league-zone-reward[b-8h1oiud3pu] {
    border-left: 3px solid rgba(251, 191, 36, 0.5);
}

.league-zone-reward.league-row-player[b-8h1oiud3pu] {
    border-left-color: #fbbf24;
}

.league-zone-low[b-8h1oiud3pu] {
    border-left: 3px solid rgba(248, 113, 113, 0.35);
}

.league-zone-low.league-row-player[b-8h1oiud3pu] {
    border-left-color: #f87171;
}

.league-row-rank[b-8h1oiud3pu] {
    width: 2.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    flex-shrink: 0;
}

.league-row-name[b-8h1oiud3pu] {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-row-player .league-row-name[b-8h1oiud3pu] {
    color: var(--accent);
    font-weight: 700;
}

.league-row-score[b-8h1oiud3pu] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 2.8rem;
    text-align: right;
}

.league-empty-state[b-8h1oiud3pu] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.025);
}

.league-empty-kicker[b-8h1oiud3pu] {
    font-size: 0.62rem;
    color: var(--accent);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.league-empty-title[b-8h1oiud3pu] {
    font-size: 0.84rem;
    color: var(--text-primary);
    font-weight: 700;
}

.league-empty-detail[b-8h1oiud3pu] {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    line-height: 1.35;
}

/* ?? League reward info ????????????????????????? */

.league-reward-info[b-8h1oiud3pu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.02);
}

.league-reward-label[b-8h1oiud3pu] {
    font-size: 0.64rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.league-reward-value[b-8h1oiud3pu] {
    font-size: 0.72rem;
    color: #fbbf24;
    font-weight: 700;
    margin-right: 0.6rem;
}

/* ?? Cascade animation ?????????????????????????? */

.cascade-in[b-8h1oiud3pu] {
    animation: cascadeIn-b-8h1oiud3pu 0.3s ease both;
    animation-delay: var(--delay, 0ms);
}

@keyframes cascadeIn-b-8h1oiud3pu {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ?? Responsive ????????????????????????????????? */

@media (max-width: 600px) {
    .lb-shell[b-8h1oiud3pu] {
        padding: 0 0.7rem 2rem;
        gap: 0.85rem;
    }

    .lb-header[b-8h1oiud3pu] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.9rem;
    }

    .lb-header-stats[b-8h1oiud3pu] {
        width: 100%;
        justify-content: space-around;
    }

    .rewards-grid[b-8h1oiud3pu] {
        grid-template-columns: repeat(3, 1fr);
    }

    .league-head[b-8h1oiud3pu] {
        flex-direction: column;
    }

    .league-head-stats[b-8h1oiud3pu] {
        width: 100%;
        justify-content: space-around;
    }

    .rank-journey[b-8h1oiud3pu],
    .rp-info[b-8h1oiud3pu],
    .lb-rewards-info[b-8h1oiud3pu],
    .league-section[b-8h1oiud3pu] {
        padding: 0.85rem;
        border-radius: 0.85rem;
    }

    .rank-unified-card[b-8h1oiud3pu],
    .info-unified-card[b-8h1oiud3pu] {
        border-radius: 0.85rem;
    }

    .rank-card-separator[b-8h1oiud3pu] {
        margin: 0 0.85rem;
    }
}
/* /Pages/LevelIntroduction.razor.rz.scp.css */
/* Page */

.intro-page[b-w7f4l1jrku] {
    --lesson-flow-gap: clamp(1.25rem, 2vw, 2rem);
    --lesson-open-stage-card-gap: clamp(0.85rem, 2vh, 1.25rem);
    --lesson-open-stage-card-pad-top: clamp(1.25rem, 4vh, 3rem);
    --lesson-open-stage-card-pad-bottom: clamp(1.25rem, 4vh, 3rem);
    --lesson-progress-dot-gap: 0.4rem;
}

.intro-body[b-w7f4l1jrku] {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    overflow-x: clip;
    animation: intro-body-in-b-w7f4l1jrku 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes intro-body-in-b-w7f4l1jrku {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    60% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card */

.intro-body[b-w7f4l1jrku]  .intro-card {
}

.intro-body[b-w7f4l1jrku]  .intro-card--current {
    position: relative;
    z-index: 2;
}

.intro-body[b-w7f4l1jrku]  .intro-card--current.is-leaving {
    opacity: 0;
    will-change: transform, opacity;
}

.intro-body[b-w7f4l1jrku]  .intro-card--current.is-leaving.next {
    animation: intro-leaving-next-b-w7f4l1jrku 90ms ease-in both;
}

.intro-body[b-w7f4l1jrku]  .intro-card--current.is-leaving.prev {
    animation: intro-leaving-prev-b-w7f4l1jrku 90ms ease-in both;
}

.intro-body[b-w7f4l1jrku]  .intro-card--current.is-incoming {
    opacity: 0;
    will-change: transform, opacity;
}

.intro-body[b-w7f4l1jrku]  .intro-card--current.is-incoming.next {
    animation: intro-incoming-next-b-w7f4l1jrku 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.intro-body[b-w7f4l1jrku]  .intro-card--current.is-incoming.prev {
    animation: intro-incoming-prev-b-w7f4l1jrku 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes intro-leaving-next-b-w7f4l1jrku {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(-16px);
    }
}

@keyframes intro-leaving-prev-b-w7f4l1jrku {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(16px);
    }
}

@keyframes intro-incoming-next-b-w7f4l1jrku {
    0% {
        opacity: 0;
        transform: translateX(22px);
    }
    70% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes intro-incoming-prev-b-w7f4l1jrku {
    0% {
        opacity: 0;
        transform: translateX(-22px);
    }
    70% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Kana layouts */

.intro-kana-compare[b-w7f4l1jrku] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 1.75rem);
    width: 100%;
}

.intro-kana-compare--mnemonic[b-w7f4l1jrku] {
    --intro-mnemonic-size: clamp(8rem, 34vw, 16rem);
    --intro-mnemonic-text-size: clamp(8.6rem, 36vw, 17rem);
    gap: clamp(0.85rem, 4vw, 2.25rem);
}

.intro-kana-side[b-w7f4l1jrku] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 16rem;
    min-width: min(100%, 15rem);
    max-width: 24rem;
}

.intro-kana-side--mnemonic[b-w7f4l1jrku],
.intro-kana-side--digital[b-w7f4l1jrku] {
    flex: 0 1 clamp(8.5rem, 36cqi, 18rem);
    min-width: min(100%, 8.5rem);
}

.intro-kana-side--digital[b-w7f4l1jrku] {
    flex-basis: clamp(9.5rem, 40vw, 19rem);
}

.intro-kana-label[b-w7f4l1jrku] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.intro-kana-mnemonic[b-w7f4l1jrku] {
    display: block;
    width: min(100%, var(--intro-mnemonic-size));
    aspect-ratio: 1;
    object-fit: contain;
    flex: 0 0 auto;
}

.intro-kana-compare--mnemonic .intro-kana-digital[b-w7f4l1jrku] {
    font-size: clamp(8.6rem, 36vw, 17rem) !important;
}

.intro-kana-digital[b-w7f4l1jrku] {
    font-size: clamp(4rem, 18vw, 8rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
}

/* Kana derivation panel */

.intro-derivation[b-w7f4l1jrku] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 0.25rem;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
}

.intro-deriv-base[b-w7f4l1jrku] {
    font-size: 2rem;
    color: var(--text-muted);
    line-height: 1;
}

.intro-deriv-mark[b-w7f4l1jrku] {
    font-size: 1.6rem;
    color: var(--text-muted);
    line-height: 1;
}

.intro-deriv-result[b-w7f4l1jrku] {
    font-size: 2rem;
    color: var(--accent);
    font-weight: 500;
    line-height: 1;
}

.intro-deriv-op[b-w7f4l1jrku] {
    font-size: 1rem;
    color: var(--text-muted);
    opacity: 0.4;
    line-height: 1;
}

/* Vocab/sentence */

.intro-vocab-compare[b-w7f4l1jrku] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.intro-vocab-main[b-w7f4l1jrku] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-vocab-display[b-w7f4l1jrku] {
    --segs: 8;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: clamp(0.45rem, calc(8cqi / var(--segs, 8)), 1rem);
    row-gap: clamp(0.85rem, 2.5vh, 1.4rem);
    container-type: inline-size;
}

.intro-furi-word[b-w7f4l1jrku] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.32rem;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.intro-furi-word-segments[b-w7f4l1jrku] {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.12rem, calc(5cqi / var(--segs, 8)), 0.45rem);
    white-space: nowrap;
}

.furi-segment[b-w7f4l1jrku] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.furi-gap[b-w7f4l1jrku] {
    width: clamp(0.45rem, calc(9cqi / var(--segs, 8)), 0.95rem);
    flex: 0 0 auto;
}

.furi-particle .furi-reading[b-w7f4l1jrku] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.furi-particle .furi-kana[b-w7f4l1jrku] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.furi-reading[b-w7f4l1jrku] {
    font-size: clamp(0.62rem, calc(15cqi / var(--segs, 8)), 1rem);
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: clamp(0.1rem, 0.45cqi, 0.28rem);
    font-family: system-ui, -apple-system, sans-serif;
}

.furi-kana[b-w7f4l1jrku] {
    font-size: clamp(1.9rem, calc(82cqi / var(--segs, 8)), 4.9rem);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1;
    color: var(--text-primary);
    background: none;
    border: none;
    padding: 0.15rem 0.1rem;
    position: relative;
    border-radius: 0.25rem;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.furi-kana:focus[b-w7f4l1jrku] {
    outline: none;
}

.show-reading .furi-kana[b-w7f4l1jrku] {
    cursor: default;
}

.show-reading .furi-popup[b-w7f4l1jrku] {
    display: none;
}

.hide-reading .furi-reading[b-w7f4l1jrku] {
    display: none;
}

.hide-reading .furi-kana[b-w7f4l1jrku] {
    cursor: pointer;
}

.hide-reading .furi-kana:hover[b-w7f4l1jrku],
.hide-reading .furi-kana:focus[b-w7f4l1jrku] {
    color: var(--accent);
}

.furi-popup[b-w7f4l1jrku] {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.22rem 0.5rem;
    border-radius: 0.4rem;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-glow);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
    font-family: system-ui, -apple-system, sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hide-reading .furi-kana:hover .furi-popup[b-w7f4l1jrku],
.hide-reading .furi-kana:focus .furi-popup[b-w7f4l1jrku] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.intro-hw-side[b-w7f4l1jrku] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.intro-reading-row[b-w7f4l1jrku] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.intro-word-informal[b-w7f4l1jrku] {
    font-size: clamp(0.65rem, calc(12cqi / var(--segs, 8)), 0.85rem);
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.72;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-align: center;
    max-width: min(100%, 24ch);
    text-wrap: balance;
}

/* Translation / romaji */

.intro-romaji[b-w7f4l1jrku] {
    width: min(100%, 42rem);
    font-size: clamp(1.4rem, 3vw, 2.05rem);
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.04em;
    line-height: 1.2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    text-wrap: balance;
}

.intro-romaji-base[b-w7f4l1jrku] {
    color: var(--text-muted);
    font-weight: 500;
}

.intro-romaji-arrow[b-w7f4l1jrku] {
    color: var(--text-muted);
    font-size: 1.1rem;
    opacity: 0.45;
}

/* TTS play button */

.tts-btn[b-w7f4l1jrku] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--accent-glow);
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.tts-btn:hover[b-w7f4l1jrku] {
    background: var(--accent-subtle);
    border-color: var(--accent);
    transform: scale(1.12);
}

.tts-btn:active[b-w7f4l1jrku] {
    transform: scaleY(0.88) scaleX(1.08);
    transition-duration: 0.06s;
}

.tts-icon[b-w7f4l1jrku] {
    width: 1rem;
    height: 1rem;
}

/* Reading toggle */

.reading-toggle[b-w7f4l1jrku] {
    padding: 0.22rem 0.68rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.reading-toggle:hover[b-w7f4l1jrku] {
    border-color: var(--accent);
    color: var(--accent);
}

.reading-toggle.active[b-w7f4l1jrku] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

/* Hint / tip */

.intro-hint[b-w7f4l1jrku] {
    width: min(100%, 32rem);
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0.15rem 0 0;
}

.intro-audio-error[b-w7f4l1jrku] {
    display: block;
    max-width: min(100%, 28rem);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}

.intro-pronunciation-tip[b-w7f4l1jrku] {
    width: min(100%, 36rem);
    margin-top: 0.25rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--accent-glow);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, var(--accent-subtle), transparent);
    display: grid;
    gap: 0.55rem;
}

.intro-pronunciation-label[b-w7f4l1jrku] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.intro-pronunciation-grid[b-w7f4l1jrku] {
    display: grid;
    gap: 0.35rem;
}

.intro-pronunciation-row[b-w7f4l1jrku] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: baseline;
}

.intro-pronunciation-key[b-w7f4l1jrku] {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.intro-pronunciation-value[b-w7f4l1jrku] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.intro-pronunciation-copy[b-w7f4l1jrku] {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--text-muted);
    text-align: left;
}

.intro-hint-romaji[b-w7f4l1jrku] {
    color: color-mix(in srgb, var(--accent) 88%, white);
    font-weight: 900;
}

/* Footer */

.intro-skip-row[b-w7f4l1jrku] {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.35rem;
    transform: translateY(-0.28rem);
}

.intro-skip[b-w7f4l1jrku] {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
    transition: color 0.15s ease;
}

.intro-skip:hover[b-w7f4l1jrku] {
    color: var(--accent);
}

.intro-skip:disabled[b-w7f4l1jrku] {
    opacity: 0.6;
    cursor: default;
}

/* Responsive */

@media (max-width: 640px) {
    .intro-page[b-w7f4l1jrku] {
        --lesson-flow-gap: 0.5rem;
        --lesson-open-stage-card-gap: 0.52rem;
        --lesson-open-stage-card-pad-top: 0.35rem;
        --lesson-open-stage-card-pad-bottom: 0.58rem;
        --lesson-progress-dot-gap: 0.28rem;
        --lesson-action-font-size: 0.72rem;
    }

    .intro-body[b-w7f4l1jrku] {
        min-height: 0;
    }

    .intro-kana-compare[b-w7f4l1jrku] {
        gap: 0.58rem;
    }

    .intro-kana-compare--mnemonic[b-w7f4l1jrku] {
        --intro-mnemonic-size: min(42vw, 8.25rem);
        --intro-mnemonic-text-size: min(44vw, 8.9rem);
        flex-wrap: nowrap;
        gap: 0.7rem;
    }

    .intro-kana-side[b-w7f4l1jrku] {
        gap: 0.22rem;
        flex-basis: 8.5rem;
        min-width: min(100%, 8.5rem);
    }

    .intro-kana-side--mnemonic[b-w7f4l1jrku],
    .intro-kana-side--digital[b-w7f4l1jrku] {
        flex: 0 1 min(42vw, 8.5rem);
        min-width: 0;
    }

    .intro-kana-side--digital[b-w7f4l1jrku] {
        flex-basis: min(46vw, 9.3rem);
    }

    .intro-kana-label[b-w7f4l1jrku] {
        font-size: 0.56rem;
        letter-spacing: 0.06em;
    }

    .intro-kana-digital[b-w7f4l1jrku] {
        font-size: clamp(2.85rem, 18vw, 4.3rem);
    }

    .intro-kana-compare--mnemonic .intro-kana-digital[b-w7f4l1jrku] {
        font-size: min(44vw, 8.9rem) !important;
    }

    [b-w7f4l1jrku] .soa-wrapper {
        gap: 0.38rem;
    }

    [b-w7f4l1jrku] .soa-svg {
        width: min(8.5rem, 38vw);
    }

    [b-w7f4l1jrku] .soa-controls {
        gap: 0.32rem;
    }

    [b-w7f4l1jrku] .soa-btn {
        padding: 0.22rem 0.58rem;
        font-size: 0.68rem;
    }

    [b-w7f4l1jrku] .soa-speed {
        min-width: 6.2rem;
    }

    [b-w7f4l1jrku] .soa-fallback {
        font-size: clamp(3.4rem, 18vw, 5.1rem);
    }

    .intro-derivation[b-w7f4l1jrku] {
        gap: 0.34rem;
        margin-top: 0.05rem;
    }

    .intro-deriv-base[b-w7f4l1jrku],
    .intro-deriv-result[b-w7f4l1jrku] {
        font-size: 1.36rem;
    }

    .intro-deriv-mark[b-w7f4l1jrku] {
        font-size: 1.08rem;
    }

    .intro-deriv-op[b-w7f4l1jrku] {
        font-size: 0.72rem;
    }

    .intro-vocab-compare[b-w7f4l1jrku] {
        gap: 0.48rem;
    }

    .intro-vocab-display[b-w7f4l1jrku] {
        column-gap: clamp(0.28rem, calc(5cqi / var(--segs, 8)), 0.58rem);
        row-gap: 0.48rem;
    }

    .intro-furi-word[b-w7f4l1jrku] {
        gap: 0.18rem;
    }

    .intro-furi-word-segments[b-w7f4l1jrku] {
        gap: clamp(0.08rem, calc(3cqi / var(--segs, 8)), 0.28rem);
    }

    .furi-gap[b-w7f4l1jrku] {
        width: clamp(0.28rem, calc(6cqi / var(--segs, 8)), 0.62rem);
    }

    .furi-reading[b-w7f4l1jrku] {
        font-size: clamp(0.5rem, calc(10cqi / var(--segs, 8)), 0.66rem);
        margin-bottom: 0.08rem;
    }

    .furi-kana[b-w7f4l1jrku] {
        font-size: clamp(1.18rem, calc(52cqi / var(--segs, 8)), 2.65rem);
        padding: 0.08rem 0.04rem;
    }

    .furi-popup[b-w7f4l1jrku] {
        bottom: calc(100% + 0.28rem);
        padding: 0.16rem 0.38rem;
        font-size: 0.62rem;
        border-radius: 0.3rem;
    }

    .intro-word-informal[b-w7f4l1jrku] {
        font-size: clamp(0.52rem, calc(8cqi / var(--segs, 8)), 0.66rem);
    }

    .intro-hw-side[b-w7f4l1jrku] {
        gap: 0.24rem;
    }

    [b-w7f4l1jrku] .hw-wrapper {
        gap: 0.28rem;
    }

    [b-w7f4l1jrku] .hw-wrapper--horizontal {
        --hw-size: min(var(--hw-size, 56px), 34px);
    }

    [b-w7f4l1jrku] .hw-replay {
        padding: 0.16rem 0.42rem;
        font-size: 0.62rem;
    }

    .intro-reading-row[b-w7f4l1jrku] {
        margin-top: -0.08rem;
    }

    .reading-toggle[b-w7f4l1jrku] {
        padding: 0.18rem 0.52rem;
        font-size: 0.58rem;
    }

    .intro-romaji[b-w7f4l1jrku] {
        width: min(100%, 28rem);
        gap: 0.28rem;
        font-size: clamp(0.96rem, 5.2vw, 1.28rem);
        line-height: 1.14;
    }

    .intro-romaji-arrow[b-w7f4l1jrku] {
        font-size: 0.78rem;
    }

    .tts-btn[b-w7f4l1jrku] {
        width: 1.58rem;
        height: 1.58rem;
    }

    .tts-icon[b-w7f4l1jrku] {
        width: 0.78rem;
        height: 0.78rem;
    }

    .intro-hint[b-w7f4l1jrku] {
        width: min(100%, 28rem);
        margin-top: 0;
        font-size: 0.72rem;
        line-height: 1.38;
    }

    .intro-pronunciation-tip[b-w7f4l1jrku] {
        width: min(100%, 28rem);
        margin-top: 0;
        gap: 0.36rem;
        padding: 0.58rem 0.64rem;
        border-radius: 0.62rem;
    }

    .intro-pronunciation-label[b-w7f4l1jrku] {
        font-size: 0.54rem;
        letter-spacing: 0.06em;
    }

    .intro-pronunciation-grid[b-w7f4l1jrku] {
        gap: 0.28rem;
    }

    .intro-pronunciation-row[b-w7f4l1jrku] {
        grid-template-columns: 1fr;
        gap: 0.08rem;
        justify-items: center;
    }

    .intro-pronunciation-key[b-w7f4l1jrku] {
        font-size: 0.62rem;
    }

    .intro-pronunciation-value[b-w7f4l1jrku] {
        font-size: 0.74rem;
    }

    .intro-pronunciation-copy[b-w7f4l1jrku] {
        font-size: 0.68rem;
        line-height: 1.38;
        text-align: center;
    }

    .intro-skip[b-w7f4l1jrku] {
        font-size: 0.66rem;
    }

    .intro-skip-row[b-w7f4l1jrku] {
        margin-bottom: 0.24rem;
        transform: translateY(-0.22rem);
    }
}

@media (max-width: 440px) {
    .intro-page[b-w7f4l1jrku] {
        --lesson-progress-dot-gap: 0.24rem;
    }

    .intro-kana-compare[b-w7f4l1jrku] {
        gap: 0.45rem;
    }

    .intro-kana-compare--mnemonic[b-w7f4l1jrku] {
        --intro-mnemonic-size: min(41vw, 7.35rem);
        --intro-mnemonic-text-size: min(44vw, 8rem);
        gap: 0.55rem;
    }

    .intro-kana-side--digital[b-w7f4l1jrku] {
        flex-basis: min(47vw, 8.3rem);
    }

    .intro-kana-digital[b-w7f4l1jrku] {
        font-size: clamp(2.5rem, 17vw, 3.65rem);
    }

    .intro-kana-compare--mnemonic .intro-kana-digital[b-w7f4l1jrku] {
        font-size: min(44vw, 8rem) !important;
    }

    [b-w7f4l1jrku] .soa-svg {
        width: min(7.4rem, 36vw);
    }

    .furi-kana[b-w7f4l1jrku] {
        font-size: clamp(1.06rem, calc(46cqi / var(--segs, 8)), 2.2rem);
    }

    [b-w7f4l1jrku] .hw-wrapper--horizontal {
        --hw-size: min(var(--hw-size, 56px), 29px);
    }

    .intro-hint[b-w7f4l1jrku],
    .intro-pronunciation-copy[b-w7f4l1jrku] {
        font-size: 0.68rem;
    }
}
/* /Pages/Mining.razor.rz.scp.css */
.mining-page[b-qeyyppg6wr] {
    max-width: 76rem;
    margin: 0 auto;
    padding: 1rem 0.85rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ?? Header ?? */

.mining-header[b-qeyyppg6wr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.25rem 0.15rem;
}

.mining-kicker[b-qeyyppg6wr] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-secondary);
}

.mining-title[b-qeyyppg6wr] {
    margin: 0.2rem 0 0;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
}

.mining-subtitle[b-qeyyppg6wr] {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    max-width: 26rem;
}

.mining-header-right[b-qeyyppg6wr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.mining-stat-strip[b-qeyyppg6wr] {
    display: flex;
    gap: 0.65rem;
}

.mining-stat-chip[b-qeyyppg6wr] {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.mining-stat-chip strong[b-qeyyppg6wr] {
    color: var(--text-primary);
    font-weight: 800;
}

.mining-review-btn[b-qeyyppg6wr] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 14px var(--accent-glow);
    transition: opacity 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-review-btn:hover[b-qeyyppg6wr] {
    opacity: 0.88;
    color: #fff;
    transform: translateY(-2px) scale(1.03);
}

.mining-review-btn:active[b-qeyyppg6wr] {
    transform: scaleY(0.9) scaleX(1.05);
    transition-duration: 0.06s;
}

.mining-review-badge[b-qeyyppg6wr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    font-size: 0.7rem;
    font-weight: 800;
}

.mining-btn-row[b-qeyyppg6wr] {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
}

.mining-practice-btn[b-qeyyppg6wr] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-practice-btn:hover[b-qeyyppg6wr] {
    border-color: var(--accent);
    color: var(--text-primary);
    transform: translateY(-2px) scale(1.03);
}

.mining-practice-btn:active[b-qeyyppg6wr] {
    transform: scaleY(0.9) scaleX(1.05);
    transition-duration: 0.06s;
}

.mining-import-btn[b-qeyyppg6wr] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    border-radius: 0.75rem;
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-import-btn:hover:not(:disabled)[b-qeyyppg6wr] {
    border-color: var(--accent);
    color: var(--text-secondary);
    transform: translateY(-2px) scale(1.03);
}

.mining-import-btn:active:not(:disabled)[b-qeyyppg6wr] {
    transform: scaleY(0.9) scaleX(1.05);
    transition-duration: 0.06s;
}

.mining-import-btn:disabled[b-qeyyppg6wr] {
    opacity: 0.5;
    cursor: default;
}

/* ?? Sections ?? */

.mining-section[b-qeyyppg6wr] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    animation: mining-section-enter-b-qeyyppg6wr 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes mining-section-enter-b-qeyyppg6wr {
    from {
        opacity: 0;
        transform: translateY(14px) scaleY(0.92) scaleX(1.02);
    }
    60% {
        opacity: 1;
        transform: translateY(-3px) scaleY(1.03) scaleX(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mining-section-label-row[b-qeyyppg6wr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.mining-section-label[b-qeyyppg6wr] {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mining-section-count[b-qeyyppg6wr] {
    color: var(--text-secondary);
    font-size: 0.68rem;
}

/* ?? Empty state ?? */

.mining-empty-state[b-qeyyppg6wr] {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.82rem;
    padding: 0.65rem 0.75rem;
    line-height: 1.45;
}

/* ?? Inbox ?? */

.mining-inbox-list[b-qeyyppg6wr] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mining-inbox-row[b-qeyyppg6wr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-elevated);
    padding: 0.55rem 0.65rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: mining-inbox-row-enter-b-qeyyppg6wr 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes mining-inbox-row-enter-b-qeyyppg6wr {
    from {
        opacity: 0;
        transform: translateY(10px) scaleY(0.9) scaleX(1.03);
    }
    60% {
        opacity: 1;
        transform: translateY(-2px) scaleY(1.03) scaleX(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mining-inbox-row.is-opening[b-qeyyppg6wr],
.mining-recent-row.is-opening[b-qeyyppg6wr] {
    animation: mining-row-open-b-qeyyppg6wr 0.14s ease;
}

.mining-inbox-row.is-leaving[b-qeyyppg6wr],
.mining-recent-row.is-leaving[b-qeyyppg6wr] {
    animation: mining-row-leave-b-qeyyppg6wr 0.15s ease forwards;
}

.mining-inbox-row:hover[b-qeyyppg6wr] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-subtle) inset;
    transform: translateY(-2px) scale(1.01);
}

.mining-inbox-text[b-qeyyppg6wr] {
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.65;
    word-break: break-word;
    color: var(--text-primary);
}

.mining-inbox-actions[b-qeyyppg6wr] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* ?? Recently saved ?? */

.mining-recent-list[b-qeyyppg6wr] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mining-recent-row[b-qeyyppg6wr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-elevated);
    padding: 0.55rem 0.65rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: mining-inbox-row-enter-b-qeyyppg6wr 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mining-recent-row:hover[b-qeyyppg6wr] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-subtle) inset;
    transform: translateY(-2px) scale(1.01);
}

.mining-recent-text[b-qeyyppg6wr] {
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.65;
    word-break: break-word;
    color: var(--text-primary);
}

/* ?? Pill buttons ?? */

.mining-pill-btn[b-qeyyppg6wr] {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s, color 0.12s, transform 0.1s, opacity 0.12s;
}

.mining-pill-btn:hover[b-qeyyppg6wr] {
    color: var(--text-primary);
    border-color: var(--accent);
}

.mining-pill-btn:active[b-qeyyppg6wr] {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.mining-pill-primary[b-qeyyppg6wr] {
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.mining-pill-primary:hover[b-qeyyppg6wr] {
    opacity: 0.88;
    color: #fff;
    border-color: transparent;
}

/* ?? Manual entry toggle ?? */

.mining-toggle-btn[b-qeyyppg6wr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: color 0.12s;
}

.mining-toggle-btn:hover[b-qeyyppg6wr] {
    color: var(--text-primary);
}

.mining-toggle-icon[b-qeyyppg6wr] {
    font-size: 0.68rem;
    display: inline-block;
    transition: transform 0.18s ease;
}

.mining-manual-body[b-qeyyppg6wr] {
    margin-top: 0.5rem;
    animation: ie-section-reveal-b-qeyyppg6wr 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ?? Toast ?? */

.mining-toast[b-qeyyppg6wr] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    padding: 0.55rem 0.85rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(34, 197, 94, 0.92);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    animation: mining-toast-in-b-qeyyppg6wr 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes mining-toast-in-b-qeyyppg6wr {
    from {
        opacity: 0;
        transform: translateY(12px) scaleY(0.85) scaleX(1.06);
    }
    55% {
        opacity: 1;
        transform: translateY(-3px) scaleY(1.04) scaleX(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ?? Romaji ruby annotations ?? */

.mining-page[b-qeyyppg6wr]  .mr-ruby {
    ruby-position: over;
}

.mining-page[b-qeyyppg6wr]  .mr-ruby-rt {
    font-size: 0.58em;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

/* ?? MiningCardList (deep) ?? */

.mining-page[b-qeyyppg6wr]  .card-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mining-page[b-qeyyppg6wr]  .card-list-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.82rem;
    padding: 1.5rem 0;
}

.mining-page[b-qeyyppg6wr]  .card-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mining-page[b-qeyyppg6wr]  .card-list-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.mining-page[b-qeyyppg6wr]  .card-list-search-wrap {
    flex: 1 1 16rem;
    max-width: 22rem;
}

.mining-page[b-qeyyppg6wr]  .card-list-search {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-body);
    color: var(--text-primary);
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem;
}

.mining-page[b-qeyyppg6wr]  .card-list-filter-groups {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mining-page[b-qeyyppg6wr]  .card-list-filters {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.mining-page[b-qeyyppg6wr]  .cl-filter-btn {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.mining-page[b-qeyyppg6wr]  .cl-filter-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .cl-filter-btn.active {
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.mining-page[b-qeyyppg6wr]  .card-list-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mining-page[b-qeyyppg6wr]  .mc-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.12s ease;
    animation: mc-row-enter-b-qeyyppg6wr 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mining-page[b-qeyyppg6wr]  .mc-row:first-child {
    border-top: 1px solid var(--border-color);
}

.mining-page[b-qeyyppg6wr]  .mc-row:hover {
    background: var(--accent-subtle);
}

.mining-page[b-qeyyppg6wr]  .mc-row--needs-edit {
    background: linear-gradient(90deg, rgba(251, 146, 60, 0.08), transparent 28%);
}

.mining-page[b-qeyyppg6wr]  .mc-row--needs-edit:hover {
    background: linear-gradient(90deg, rgba(251, 146, 60, 0.12), rgba(167, 139, 250, 0.08));
}

.mining-page[b-qeyyppg6wr]  .mc-row-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mining-page[b-qeyyppg6wr]  .mc-row-topline {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}

@keyframes mc-row-enter-b-qeyyppg6wr {
    from {
        opacity: 0;
        transform: translateY(8px) scaleY(0.92);
    }
    55% {
        opacity: 1;
        transform: translateY(-2px) scaleY(1.02);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mining-page[b-qeyyppg6wr]  .mc-row-target {
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text-primary);
    flex-shrink: 0;
}

.mining-page[b-qeyyppg6wr]  .mc-row-reading {
    font-size: 0.72rem;
    color: var(--text-muted, rgba(148, 163, 184, 0.55));
    flex-shrink: 0;
}

.mining-page[b-qeyyppg6wr]  .mc-row-meaning {
    font-size: 0.78rem;
    color: var(--text-secondary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mining-page[b-qeyyppg6wr]  .mc-row-sentence {
    font-size: 0.76rem;
    color: var(--text-primary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.mining-page[b-qeyyppg6wr]  .mc-row-sentence--muted {
    color: var(--text-secondary);
}

.mining-page[b-qeyyppg6wr]  .mc-row-edit {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-muted, rgba(148, 163, 184, 0.45));
    font-size: 0.68rem;
    font-weight: 600;
    transition: color 0.12s;
}

.mining-page[b-qeyyppg6wr]  .mc-row:hover .mc-row-edit {
    color: var(--text-primary);
}

/* ?? MiningQuickCaptureBar (deep) ?? */

.mining-page[b-qeyyppg6wr]  .quick-capture-bar {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mining-page[b-qeyyppg6wr]  .qc-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mining-page[b-qeyyppg6wr]  .qc-heading {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mining-page[b-qeyyppg6wr]  .qc-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mining-page[b-qeyyppg6wr]  .qc-field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 8rem; min-width: 0; }
.mining-page[b-qeyyppg6wr]  .qc-field--wide { flex: 1 1 100%; }
.mining-page[b-qeyyppg6wr]  .qc-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }

.mining-page[b-qeyyppg6wr]  .qc-input {
    padding: 0.55rem 0.65rem;
    font-size: 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .qc-input:focus { border-color: var(--accent); }
.mining-page[b-qeyyppg6wr]  .qc-textarea { min-height: 5.5rem; resize: vertical; }
.mining-page[b-qeyyppg6wr]  .qc-word-entry { display: flex; gap: 0.5rem; }

.mining-page[b-qeyyppg6wr]  .qc-chip-add-btn,
.mining-page[b-qeyyppg6wr]  .qc-more-btn {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-page[b-qeyyppg6wr]  .qc-chip-add-btn:hover,
.mining-page[b-qeyyppg6wr]  .qc-more-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .qc-chip-add-btn:active,
.mining-page[b-qeyyppg6wr]  .qc-more-btn:active {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.mining-page[b-qeyyppg6wr]  .qc-chip-list { display: flex; flex-wrap: wrap; gap: 0.45rem; min-height: 2rem; }
.mining-page[b-qeyyppg6wr]  .qc-chip-empty,
.mining-page[b-qeyyppg6wr]  .qc-help { font-size: 0.74rem; color: var(--text-secondary); }

.mining-page[b-qeyyppg6wr]  .qc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--accent-subtle);
    border-radius: 999px;
    background: var(--accent-subtle);
    color: var(--text-primary);
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    animation: ie-chip-enter-b-qeyyppg6wr 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-page[b-qeyyppg6wr]  .qc-chip:hover {
    border-color: var(--accent);
    background: var(--accent-glow);
}

.mining-page[b-qeyyppg6wr]  .qc-chip-remove { color: var(--text-secondary); font-size: 0.72rem; }
.mining-page[b-qeyyppg6wr]  .qc-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.mining-page[b-qeyyppg6wr]  .qc-row-compact { justify-content: flex-start; }
.mining-page[b-qeyyppg6wr]  .qc-optional-wrap { border-top: 1px solid var(--border-color); padding-top: 0.7rem; animation: ie-section-reveal-b-qeyyppg6wr 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }

.mining-page[b-qeyyppg6wr]  .qc-save-btn {
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--accent-glow);
    transition: opacity 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-page[b-qeyyppg6wr]  .qc-save-btn:hover {
    opacity: 0.88;
}

.mining-page[b-qeyyppg6wr]  .qc-save-btn:active:not(:disabled) {
    transform: scaleY(0.9) scaleX(1.05);
    transition-duration: 0.06s;
}

.mining-page[b-qeyyppg6wr]  .qc-save-btn-secondary {
    background: var(--accent-subtle);
    color: var(--text-primary);
    border: 1px solid var(--accent-subtle);
    box-shadow: none;
}

.mining-page[b-qeyyppg6wr]  .qc-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mining-page[b-qeyyppg6wr]  .qc-saved-badge { font-size: 0.78rem; font-weight: 700; color: var(--success); }

/* ?? Inline Editor (deep) ?? */

.mining-page[b-qeyyppg6wr]  .ie-editor {
    border: 1px solid var(--accent);
    border-radius: 0.75rem;
    background: var(--bg-elevated);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: 0 0 0 1px var(--accent-subtle) inset;
    animation: mining-editor-enter-b-qeyyppg6wr 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mining-page[b-qeyyppg6wr]  .ie-phase {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mining-page[b-qeyyppg6wr]  .ie-phase + .ie-phase {
    padding-top: 0;
    border-top: none;
}

.mining-page[b-qeyyppg6wr]  .ie-phase-label {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mining-page[b-qeyyppg6wr]  .ie-helper {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.mining-page[b-qeyyppg6wr]  .ie-sentence-display {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mining-page[b-qeyyppg6wr]  .ie-empty {
    color: var(--text-secondary);
    font-size: 0.74rem;
}

/* ?? Combined sentence + token picker ?? */

.mining-page[b-qeyyppg6wr]  .ie-sentence-combined {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-body);
    overflow: hidden;
}

.mining-page[b-qeyyppg6wr]  .ie-sentence-combined > .ie-label {
    padding: 0.45rem 0.6rem 0;
}

.mining-page[b-qeyyppg6wr]  .ie-textarea-inline {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.35rem 0.6rem;
    min-height: 0;
    resize: none;
    font-size: 0.82rem;
}

.mining-page[b-qeyyppg6wr]  .ie-textarea-inline:focus {
    border-color: transparent !important;
    outline: none;
    box-shadow: none;
}

.mining-page[b-qeyyppg6wr]  .ie-tokens-inline {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 0.5rem 0.6rem 0.5rem;
    min-height: 2.2rem;
    position: relative;
}

.mining-page[b-qeyyppg6wr]  .ie-drag-hint {
    position: absolute;
    top: 0.38rem;
    right: 0.6rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
}

.mining-page[b-qeyyppg6wr]  .ie-dragging {
    cursor: crosshair;
}

.mining-page[b-qeyyppg6wr]  .ie-sentence-combined:focus-within {
    border-color: var(--accent);
}

.mining-page[b-qeyyppg6wr]  .ie-sentence-tokens {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-body);
    padding: 0.75rem 0.6rem 0.55rem;
    min-height: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.45rem;
    align-items: baseline;
    user-select: none;
}

.mining-page[b-qeyyppg6wr]  .ie-token {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--text-primary);
    border-radius: 0.45rem;
    padding: 0.15rem 0.2rem;
    cursor: pointer;
    line-height: 1.6;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

.mining-page[b-qeyyppg6wr]  .ie-token:active {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.mining-page[b-qeyyppg6wr]  .ie-token:hover {
    background: var(--accent-subtle);
}

.mining-page[b-qeyyppg6wr]  .ie-token-active {
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    color: #fff;
    padding: 0.15rem 0.35rem;
    box-shadow: 0 2px 8px var(--accent-glow);
    animation: ie-token-pop-b-qeyyppg6wr 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-page[b-qeyyppg6wr]  .ie-token-in-range {
    background: var(--accent-subtle);
    color: var(--accent-secondary);
    border-radius: 0;
    outline: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    outline-offset: -1px;
}

.mining-page[b-qeyyppg6wr]  .ie-token-in-range:first-of-type,
.mining-page[b-qeyyppg6wr]  .ie-token:has(+ .ie-token-in-range) {
    border-radius: 0.45rem 0 0 0.45rem;
}

.mining-page[b-qeyyppg6wr]  .ie-token-in-range:last-child {
    border-radius: 0 0.45rem 0.45rem 0;
}

.mining-page[b-qeyyppg6wr]  .ie-selected-word-display {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-body);
    min-height: 2.75rem;
    padding: 0.55rem 0.65rem;
    display: flex;
    align-items: center;
}

.mining-page[b-qeyyppg6wr]  .ie-selected-word-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.mining-page[b-qeyyppg6wr]  .ie-selected-word-placeholder {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.mining-page[b-qeyyppg6wr]  .ie-selected-word-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(139, 143, 255, 0.28);
    cursor: pointer;
    border-radius: 999px;
    background: rgba(109, 115, 255, 0.14);
    color: var(--text-primary);
    padding: 0.35rem 0.7rem;
    font-size: 0.84rem;
    font-weight: 700;
    animation: ie-chip-enter-b-qeyyppg6wr 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

.mining-page[b-qeyyppg6wr]  .ie-selected-word-chip:active {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.mining-page[b-qeyyppg6wr]  .ie-selected-word-chip:hover {
    border-color: var(--accent);
    background: rgba(109, 115, 255, 0.22);
}

.mining-page[b-qeyyppg6wr]  .ie-selected-word-chip .mr-ruby {
    color: inherit;
}

.mining-page[b-qeyyppg6wr]  .ie-selected-word-chip .mr-ruby-rt {
    color: inherit;
    opacity: 0.82;
    font-size: 0.58em;
}

.mining-page[b-qeyyppg6wr]  .ie-selected-word-chip.is-active {
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
    animation: ie-chip-activate-b-qeyyppg6wr 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-page[b-qeyyppg6wr]  .ie-selected-word-remove {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.mining-page[b-qeyyppg6wr]  .ie-active-word-strip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mining-page[b-qeyyppg6wr]  .ie-active-word-label {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ?? Word card ?? */

.mining-page[b-qeyyppg6wr]  .ie-word-card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-body);
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    animation: ie-section-reveal-b-qeyyppg6wr 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mining-page[b-qeyyppg6wr]  .ie-word-display {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
    line-height: 1.2;
}

.mining-page[b-qeyyppg6wr]  .ie-word-stem {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .ie-furigana {
    font-size: 0.55em;
    font-weight: 700;
    color: var(--accent-secondary, #a78bfa);
    letter-spacing: 0.03em;
}

.mining-page[b-qeyyppg6wr]  .ie-word-grammar {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-muted, rgba(148, 163, 184, 0.55));
}

.mining-page[b-qeyyppg6wr]  .ie-word-meaning {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-top: 0.1rem;
}

.mining-page[b-qeyyppg6wr]  .ie-phrase-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.mining-page[b-qeyyppg6wr]  .ie-phrase-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.mining-page[b-qeyyppg6wr]  .ie-phrase-part-token {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .ie-phrase-part-meaning {
    font-size: 0.66rem;
    color: var(--text-muted);
    font-weight: 500;
}

.mining-page[b-qeyyppg6wr]  .ie-phrase-part-hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
    box-shadow: 0 2px 8px var(--accent-glow);
    transform: translateY(-1px);
}

.mining-page[b-qeyyppg6wr]  .ie-token-hover:not(.ie-token-active) {
    background: var(--accent-subtle);
    box-shadow: 0 0 0 2px var(--accent);
    border-radius: 0.45rem;
}

.mining-page[b-qeyyppg6wr]  .ie-token-active.ie-token-hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 2px 8px var(--accent-glow);
}

.mining-page[b-qeyyppg6wr]  .ie-word-pos {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-secondary, #a78bfa);
    background: rgba(167, 139, 250, 0.1);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    margin-top: 0.15rem;
}

/* ?? Kanji breakdown ?? */

.mining-page[b-qeyyppg6wr]  .kb-root {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mining-page[b-qeyyppg6wr]  .kb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0;
    transition: color 0.12s;
}

.mining-page[b-qeyyppg6wr]  .kb-toggle:hover {
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .kb-toggle-icon {
    font-size: 0.65rem;
    display: inline-block;
    transition: transform 0.18s ease;
}

.mining-page[b-qeyyppg6wr]  .kb-panel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    animation: ie-section-reveal-b-qeyyppg6wr 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mining-page[b-qeyyppg6wr]  .kb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.mining-page[b-qeyyppg6wr]  .kb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: var(--bg-body);
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

.mining-page[b-qeyyppg6wr]  .kb-card:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.mining-page[b-qeyyppg6wr]  .kb-card:active {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.mining-page[b-qeyyppg6wr]  .kb-card-active {
    border-color: var(--accent);
    background: var(--accent-subtle);
    box-shadow: 0 0 0 1px var(--accent-subtle) inset;
}

.mining-page[b-qeyyppg6wr]  .kb-kanji {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .kb-meaning {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    max-width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mining-page[b-qeyyppg6wr]  .kb-detail {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.55rem;
    background: var(--accent-subtle);
    animation: ie-section-reveal-b-qeyyppg6wr 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mining-page[b-qeyyppg6wr]  .kb-detail-kanji {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .kb-detail-eq {
    font-size: 0.82rem;
    color: var(--text-muted, rgba(148, 163, 184, 0.55));
    font-weight: 600;
}

.mining-page[b-qeyyppg6wr]  .kb-detail-meaning {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent-secondary, #a78bfa);
}

.mining-page[b-qeyyppg6wr]  .kb-meaning-unknown {
    font-style: italic;
    color: var(--text-muted, rgba(148, 163, 184, 0.55));
}

.mining-page[b-qeyyppg6wr]  .kb-detail-unknown {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-muted, rgba(148, 163, 184, 0.55));
}

.mining-page[b-qeyyppg6wr]  .kb-add-btn {
    margin-left: auto;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s, color 0.12s, transform 0.1s;
}

.mining-page[b-qeyyppg6wr]  .kb-add-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.mining-page[b-qeyyppg6wr]  .kb-add-btn:active {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.mining-page[b-qeyyppg6wr]  .kb-added-badge {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--success, #22c55e);
    white-space: nowrap;
}

/* ?? Editable fields row ?? */

.mining-page[b-qeyyppg6wr]  .ie-editable-fields {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    animation: ie-section-reveal-b-qeyyppg6wr 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mining-page[b-qeyyppg6wr]  .ie-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 0.15rem;
}

.mining-page[b-qeyyppg6wr]  .ie-advanced-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mining-page[b-qeyyppg6wr]  .ie-quiet-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.mining-page[b-qeyyppg6wr]  .ie-quiet-btn:hover {
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .ie-quiet-btn-danger {
    color: var(--error);
}

.mining-page[b-qeyyppg6wr]  .ie-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.mining-page[b-qeyyppg6wr]  .ie-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mining-page[b-qeyyppg6wr]  .ie-field-wide {
    grid-column: 1 / -1;
}

.mining-page[b-qeyyppg6wr]  .ie-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.mining-page[b-qeyyppg6wr]  .ie-input {
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-primary);
    border-radius: 0.75rem;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
    width: 100%;
}

.mining-page[b-qeyyppg6wr]  .ie-input:focus {
    border-color: var(--accent);
}

.mining-page[b-qeyyppg6wr]  .ie-textarea {
    min-height: 3rem;
    resize: vertical;
}

.mining-page[b-qeyyppg6wr]  .ie-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0;
    transition: color 0.12s;
}

.mining-page[b-qeyyppg6wr]  .ie-toggle:hover {
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .ie-toggle-icon {
    font-size: 0.65rem;
    display: inline-block;
    transition: transform 0.18s ease;
}

.mining-page[b-qeyyppg6wr]  .ie-optional {
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
}

.mining-page[b-qeyyppg6wr]  .ie-field,
.mining-page[b-qeyyppg6wr]  .ie-advanced-grid {
    animation: ie-section-reveal-b-qeyyppg6wr 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mining-page[b-qeyyppg6wr]  .ie-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
}

.mining-page[b-qeyyppg6wr]  .ie-pill {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.12s ease, box-shadow 0.15s ease;
}

.mining-page[b-qeyyppg6wr]  .ie-pill:active {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.mining-page[b-qeyyppg6wr]  .ie-pill.selected {
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.mining-page[b-qeyyppg6wr]  .ie-pill:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.mining-page[b-qeyyppg6wr]  .ie-pill-primary {
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.mining-page[b-qeyyppg6wr]  .ie-pill-primary:hover {
    opacity: 0.88;
    color: #fff;
    border-color: transparent;
}

.mining-page[b-qeyyppg6wr]  .ie-pill-danger {
    color: var(--error);
    border-color: var(--error-subtle);
}

.mining-page[b-qeyyppg6wr]  .ie-pill-danger:hover {
    border-color: var(--error);
}

@keyframes mining-row-open-b-qeyyppg6wr {
    0% {
        transform: scaleY(0.92) scaleX(1.02);
        opacity: 0.85;
    }
    60% {
        transform: scaleY(1.02) scaleX(0.99);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes mining-row-leave-b-qeyyppg6wr {
    0% {
        transform: scale(1);
        opacity: 1;
        max-height: 10rem;
    }
    30% {
        transform: scaleY(0.92) scaleX(1.03);
        opacity: 0.7;
    }
    100% {
        transform: translateY(-6px) scaleY(0.85) scaleX(1.06);
        opacity: 0;
        max-height: 0;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
    }
}

@keyframes mining-editor-enter-b-qeyyppg6wr {
    from {
        opacity: 0;
        transform: translateY(-10px) scaleY(0.9) scaleX(1.02);
        filter: blur(4px);
    }
    55% {
        opacity: 1;
        transform: translateY(3px) scaleY(1.03) scaleX(0.99);
        filter: blur(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ie-token-pop-b-qeyyppg6wr {
    0%   { transform: scale(1); }
    25%  { transform: scaleX(1.14) scaleY(0.9); }
    50%  { transform: scaleX(0.96) scaleY(1.06); }
    100% { transform: scale(1); }
}

@keyframes ie-chip-enter-b-qeyyppg6wr {
    from {
        opacity: 0;
        transform: translateY(6px) scaleY(0.8) scaleX(1.08);
        filter: blur(2px);
    }
    55% {
        opacity: 1;
        transform: translateY(-2px) scaleY(1.05) scaleX(0.97);
        filter: blur(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ie-chip-activate-b-qeyyppg6wr {
    0%   { transform: scale(1); }
    25%  { transform: scaleX(1.12) scaleY(0.92); }
    50%  { transform: scaleX(0.97) scaleY(1.04); }
    100% { transform: scale(1); }
}

@keyframes ie-section-reveal-b-qeyyppg6wr {
    from {
        opacity: 0;
        transform: translateY(-6px) scaleY(0.94);
    }
    60% {
        opacity: 1;
        transform: translateY(2px) scaleY(1.02);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ?? MiningCardEditorModal (deep) ?? */

.mining-page[b-qeyyppg6wr]  .mc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.62);
    z-index: 49;
}

.mining-page[b-qeyyppg6wr]  .mc-modal {
    position: fixed;
    z-index: 50;
    top: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: min(34rem, calc(100vw - 1.5rem));
    overflow: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.34);
}

.mining-page[b-qeyyppg6wr]  .mc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.mining-page[b-qeyyppg6wr]  .mc-modal-title { margin: 0; font-size: 1rem; font-weight: 800; }
.mining-page[b-qeyyppg6wr]  .mc-modal-subtitle { margin: 0.22rem 0 0; color: var(--text-secondary); font-size: 0.78rem; }
.mining-page[b-qeyyppg6wr]  .mc-modal-close { border: none; background: transparent; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; }
.mining-page[b-qeyyppg6wr]  .mc-modal-body { display: flex; flex-direction: column; gap: 1rem; }

.mining-page[b-qeyyppg6wr]  .mc-section {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-elevated);
}

.mining-page[b-qeyyppg6wr]  .mc-section-heading { margin-bottom: 0.65rem; }
.mining-page[b-qeyyppg6wr]  .mc-section-heading h4 { margin: 0; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.mining-page[b-qeyyppg6wr]  .mc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.mining-page[b-qeyyppg6wr]  .mc-form-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.mining-page[b-qeyyppg6wr]  .mc-form-field-wide { grid-column: 1 / -1; }

.mining-page[b-qeyyppg6wr]  .mc-form-input {
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-primary);
    border-radius: 0.75rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.mining-page[b-qeyyppg6wr]  .mc-modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
}

.mining-page[b-qeyyppg6wr]  .mc-modal-actions-right,
.mining-page[b-qeyyppg6wr]  .mc-modal-actions-left { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.mining-page[b-qeyyppg6wr]  .mc-action-btn {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

.mining-page[b-qeyyppg6wr]  .mc-action-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.mining-page[b-qeyyppg6wr]  .mc-action-primary {
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.mining-page[b-qeyyppg6wr]  .mc-action-primary:hover {
    opacity: 0.88;
    color: #fff;
}

.mining-page[b-qeyyppg6wr]  .mc-action-danger {
    color: var(--error);
    border-color: var(--error-subtle);
}

.mining-page[b-qeyyppg6wr]  .mc-action-danger:hover {
    border-color: var(--error);
    color: var(--error);
}

/* ?? Responsive ?? */

@media (max-width: 48rem) {
    .mining-header[b-qeyyppg6wr] {
        flex-direction: column;
        align-items: flex-start;
    }

    .mining-header-right[b-qeyyppg6wr] {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .mining-page[b-qeyyppg6wr]  .mc-row {
        gap: 0.4rem;
        padding: 0.4rem 0.5rem;
    }

    .mining-page[b-qeyyppg6wr]  .ie-grid,
    .mining-page[b-qeyyppg6wr]  .ie-advanced-grid,
    .mining-page[b-qeyyppg6wr]  .qc-row,
    .mining-page[b-qeyyppg6wr]  .qc-word-entry,
    .mining-page[b-qeyyppg6wr]  .mc-form-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .mining-page[b-qeyyppg6wr]  .qc-field {
        flex: 1 1 100%;
    }

    .mining-page[b-qeyyppg6wr]  .mc-modal {
        inset: auto 0.35rem 0.35rem 0.35rem;
        top: auto;
        width: auto;
        max-height: 88vh;
        padding: 0.8rem;
    }
}

@media (max-width: 32rem) {
.mining-page[b-qeyyppg6wr] {
    padding: 0.75rem 0.5rem 2.5rem;
}

.mining-header-right[b-qeyyppg6wr] {
    flex-direction: column;
    align-items: flex-start;
}

.mining-btn-row[b-qeyyppg6wr] {
    width: 100%;
}

.mining-review-btn[b-qeyyppg6wr],
.mining-practice-btn[b-qeyyppg6wr],
.mining-import-btn[b-qeyyppg6wr] {
    width: 100%;
    justify-content: center;
    text-align: center;
}

    .mining-inbox-row[b-qeyyppg6wr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .mining-inbox-actions[b-qeyyppg6wr] {
        width: 100%;
    }

    .mining-pill-btn[b-qeyyppg6wr] {
        flex: 1;
        text-align: center;
    }

    .mining-page[b-qeyyppg6wr]  .qc-actions,
    .mining-page[b-qeyyppg6wr]  .mc-modal-actions-right,
    .mining-page[b-qeyyppg6wr]  .mc-modal-actions-left {
        width: 100%;
    }

    .mining-page[b-qeyyppg6wr]  .qc-save-btn,
    .mining-page[b-qeyyppg6wr]  .mc-action-btn,
    .mining-page[b-qeyyppg6wr]  .ie-pill {
        width: 100%;
        justify-content: center;
    }
}

/* ?? Sources footer ?? */

.mining-footer[b-qeyyppg6wr] {
    text-align: center;
    padding: 0.5rem 0 0;
}

.mining-sources-link[b-qeyyppg6wr] {
    background: none;
    border: none;
    color: var(--text-muted, rgba(148, 163, 184, 0.45));
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    transition: color 0.15s ease;
}

.mining-sources-link:hover[b-qeyyppg6wr] {
    color: var(--text-secondary);
}

/* ?? Sources modal ?? */

.mining-sources-backdrop[b-qeyyppg6wr] {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(2, 6, 23, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mining-sources-backdrop-in-b-qeyyppg6wr 0.2s ease both;
}

@keyframes mining-sources-backdrop-in-b-qeyyppg6wr {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mining-sources-panel[b-qeyyppg6wr] {
    background: var(--bg-surface, #1e293b);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.25rem 1.4rem;
    max-width: min(28rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 20px 48px rgba(2, 6, 23, 0.5);
    animation: mining-sources-panel-in-b-qeyyppg6wr 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mining-sources-panel-in-b-qeyyppg6wr {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mining-sources-title[b-qeyyppg6wr] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
}

.mining-sources-text[b-qeyyppg6wr] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.mining-sources-text a[b-qeyyppg6wr] {
    color: var(--accent-secondary, #a78bfa);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mining-sources-text a:hover[b-qeyyppg6wr] {
    color: var(--text-primary);
}
/* /Pages/MiningPractice.razor.rz.scp.css */
/* ?? Mining Free Practice page — mirrors MiningReview styling */

.mining-practice-page[b-m5u02pkdc9] {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.mp-session-header[b-m5u02pkdc9] {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    opacity: 0.92;
}

.mp-back[b-m5u02pkdc9] {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.mp-back:hover[b-m5u02pkdc9] {
    color: var(--accent);
}

.mp-kicker[b-m5u02pkdc9] {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-secondary);
}

.mp-title[b-m5u02pkdc9] {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.mp-subtitle[b-m5u02pkdc9],
.mp-state-copy[b-m5u02pkdc9] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
    max-width: 38ch;
}

.mp-mode-indicator[b-m5u02pkdc9] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.72rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

.mp-mode-indicator-dot[b-m5u02pkdc9] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}

.mp-stats-line-wrap[b-m5u02pkdc9] {
    position: relative;
    width: 100%;
    min-height: 1.1rem;
}

.mp-stats-line[b-m5u02pkdc9] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.mp-stat-item.correct[b-m5u02pkdc9] { color: var(--success); }
.mp-stat-item.wrong[b-m5u02pkdc9] { color: var(--error); }
.mp-stat-item.reviewed[b-m5u02pkdc9] { color: #f59e0b; }
.mp-stat-item.remaining[b-m5u02pkdc9] { color: var(--text-muted); }

.mp-grade-feedback[b-m5u02pkdc9] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    pointer-events: none;
    white-space: nowrap;
    animation: mp-feedback-in-b-m5u02pkdc9 0.18s ease-out;
}

.mp-grade-feedback--good[b-m5u02pkdc9] { color: var(--success); }
.mp-grade-feedback--missed[b-m5u02pkdc9] { color: var(--error); }
.mp-grade-feedback--neutral[b-m5u02pkdc9] { color: var(--text-secondary); }

@keyframes mp-feedback-in-b-m5u02pkdc9 {
    from { opacity: 0; transform: translateY(calc(-50% + 8px)) scale(0.85); }
    60% { opacity: 1; transform: translateY(calc(-50% - 3px)) scale(1.06); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}

.mp-card-shell[b-m5u02pkdc9],
.mp-state-card[b-m5u02pkdc9] {
    width: 100%;
}

.mp-card-shell[b-m5u02pkdc9] {
    display: flex;
    justify-content: center;
}

.mp-state-card[b-m5u02pkdc9] {
    border: 1px solid var(--border-color);
    border-radius: 0.95rem;
    background: var(--bg-surface);
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
}

.mp-state-title[b-m5u02pkdc9] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
}

.mp-state-actions[b-m5u02pkdc9] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.mp-primary-btn[b-m5u02pkdc9] {
    border-radius: 0.75rem;
    padding: 0.7rem 1.15rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.mp-primary-btn:hover[b-m5u02pkdc9] {
    opacity: 0.9;
}

/* ?? MiningReviewCard ::deep overrides (same as MiningReview) ?? */

.mining-practice-page[b-m5u02pkdc9]  .review-card {
    width: min(100%, 42rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
    padding: 0.1rem 0 0;
    animation: mp-card-enter-b-m5u02pkdc9 0.38s cubic-bezier(0.34, 1.8, 0.64, 1);
}

@keyframes mp-card-enter-b-m5u02pkdc9 {
    from { opacity: 0; transform: translateY(18px) scaleY(0.88) scaleX(1.04); }
    55% { opacity: 1; transform: translateY(-4px) scaleY(1.04) scaleX(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.mining-practice-page[b-m5u02pkdc9]  .rc-prompt-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-kicker { display: none; }

.mining-practice-page[b-m5u02pkdc9]  .rc-prompt {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-front { width: 100%; }

.mining-practice-page[b-m5u02pkdc9]  .rc-sentence-panel {
    min-height: clamp(8rem, 24vh, 12rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.35rem;
    background: transparent;
    border: none;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-sentence-panel--word {
    min-height: clamp(7rem, 20vh, 10rem);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-sentence {
    font-size: clamp(2rem, 6vw, 3.2rem);
    line-height: 1.35;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: normal;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-highlight {
    display: inline-block;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(244, 114, 182, 0.32), rgba(244, 114, 182, 0.18));
    color: #fff;
    padding: 0.08rem 0.32rem;
    border-radius: 0.45rem;
    font-weight: 800;
    box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.16) inset, 0 0 18px rgba(244, 114, 182, 0.16);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-ruby { ruby-position: over; }

.mining-practice-page[b-m5u02pkdc9]  .rc-ruby-text {
    font-size: 0.44em;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-highlight .rc-ruby-text {
    color: rgba(255, 255, 255, 0.86);
}

.mining-practice-page[b-m5u02pkdc9]  .review-card:not(.review-card--revealed) .rc-highlight {
    animation: rc-highlight-glow-b-m5u02pkdc9 1.8s ease-in-out infinite;
}

@keyframes rc-highlight-glow-b-m5u02pkdc9 {
    0%, 100% { box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.16) inset, 0 0 12px rgba(244, 114, 182, 0.12); transform: scale(1); }
    50% { box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.24) inset, 0 0 28px rgba(244, 114, 182, 0.26); transform: scale(1.015); }
}

.mining-practice-page[b-m5u02pkdc9]  .rc-target-big {
    font-size: clamp(2.5rem, 8vw, 3.7rem);
    font-weight: 800;
    color: var(--text-primary);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-listen-btn,
.mining-practice-page[b-m5u02pkdc9]  .rc-romaji-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-listen-btn:hover,
.mining-practice-page[b-m5u02pkdc9]  .rc-romaji-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-listen-btn:active,
.mining-practice-page[b-m5u02pkdc9]  .rc-romaji-btn:active {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-romaji-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-listen-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-audio-error {
    display: block;
    max-width: min(100%, 28rem);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-reveal-btn {
    border: none;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0.85rem 1.6rem;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-reveal-btn:hover { opacity: 0.9; }

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-panel {
    width: 100%;
    padding: 0;
    overflow: hidden;
    transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-panel.is-hidden {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
    transform: translateY(4px);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-panel.is-revealed {
    opacity: 1;
    max-height: 30rem;
    padding-top: 0.25rem;
    transform: translateY(0);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-reading,
.mining-practice-page[b-m5u02pkdc9]  .rc-answer-meaning,
.mining-practice-page[b-m5u02pkdc9]  .rc-answer-translation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-value { display: inline-block; }

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-word {
    font-size: clamp(2.1rem, 7vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-reading {
    color: var(--text-muted);
    font-size: 0.98rem;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-meaning {
    color: var(--text-primary);
    font-size: 1.12rem;
    font-weight: 700;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-translation {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 34rem;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-answer-context {
    margin-top: 0.2rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.55;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: normal;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-btn {
    border: 1px solid var(--border-color);
    border-radius: 0.9rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    height: 4.5rem;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.12s, box-shadow 0.12s, opacity 0.12s;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-btn:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: var(--accent);
    box-shadow: 0 4px 14px var(--accent-glow);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-label {
    font-size: 0.95rem;
    font-weight: 800;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-missed {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: #fff;
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-missed .rc-grade-sub {
    color: rgba(255, 255, 255, 0.82);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-hard {
    border-color: rgba(249, 115, 22, 0.24);
    background: rgba(249, 115, 22, 0.08);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-good {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.08);
    color: var(--text-primary);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-good .rc-grade-sub {
    color: var(--text-muted);
}

.mining-practice-page[b-m5u02pkdc9]  .rc-grade-easy {
    border-color: rgba(59, 130, 246, 0.16);
    background: rgba(59, 130, 246, 0.04);
    opacity: 0.9;
}

@media (max-width: 48rem) {
    .mining-practice-page[b-m5u02pkdc9]  .rc-grade-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 32rem) {
    .mining-practice-page[b-m5u02pkdc9] {
        padding: 0 0.75rem 2.5rem;
    }

    .mp-stats-line[b-m5u02pkdc9] {
        gap: 0.8rem;
        font-size: 0.8rem;
    }

    .mp-grade-feedback[b-m5u02pkdc9] {
        right: auto;
        left: 50%;
        top: calc(100% + 0.5rem);
        transform: translateX(-50%);
    }

    .mp-state-actions[b-m5u02pkdc9] {
        width: 100%;
        flex-direction: column;
    }

    .mp-primary-btn[b-m5u02pkdc9],
    .mining-practice-page[b-m5u02pkdc9]  .rc-reveal-btn,
    .mining-practice-page[b-m5u02pkdc9]  .rc-grade-btn {
        width: 100%;
    }

    .mining-practice-page[b-m5u02pkdc9]  .rc-listen-btn,
    .mining-practice-page[b-m5u02pkdc9]  .rc-romaji-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.72rem;
    }
}
/* /Pages/MiningReview.razor.rz.scp.css */
/* ?? Mining Review page ??????????????????????????????????????????? */

.mining-review-page[b-xtf60dtryr] {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.mr-session-header[b-xtf60dtryr] {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    opacity: 0.92;
}

.mr-back[b-xtf60dtryr] {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.mr-back:hover[b-xtf60dtryr] {
    color: var(--accent);
}

.mr-kicker[b-xtf60dtryr] {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-secondary);
}

.mr-title[b-xtf60dtryr] {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.mr-subtitle[b-xtf60dtryr],
.mr-state-copy[b-xtf60dtryr] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
    max-width: 38ch;
}

.mr-mode-indicator[b-xtf60dtryr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.72rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

.mr-mode-indicator-dot[b-xtf60dtryr] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

.mr-view-toggles[b-xtf60dtryr] {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
}

.mr-view-toggle[b-xtf60dtryr] {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mr-view-toggle.active[b-xtf60dtryr] {
    border-color: var(--accent);
    color: var(--accent);
}

.mr-progress-row[b-xtf60dtryr] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.mr-progress-track[b-xtf60dtryr] {
    height: 0.34rem;
    border-radius: 999px;
    background: var(--border-color);
    overflow: hidden;
}

.mr-progress-fill[b-xtf60dtryr] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    transition: width 0.2s ease;
}

.mr-counter[b-xtf60dtryr] {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mr-stats-line-wrap[b-xtf60dtryr] {
    position: relative;
    width: 100%;
    min-height: 1.1rem;
}

.mr-stats-line[b-xtf60dtryr] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.mr-stat-item.correct[b-xtf60dtryr] { color: var(--success); }
.mr-stat-item.wrong[b-xtf60dtryr] { color: var(--error); }
.mr-stat-item.reviewed[b-xtf60dtryr] { color: #f59e0b; }
.mr-stat-item.remaining[b-xtf60dtryr] { color: var(--text-muted); }

.mr-grade-feedback[b-xtf60dtryr] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    pointer-events: none;
    white-space: nowrap;
    animation: mr-feedback-in-b-xtf60dtryr 0.18s ease-out;
}

.mr-grade-feedback--good[b-xtf60dtryr] {
    color: var(--success);
}

.mr-grade-feedback--missed[b-xtf60dtryr] {
    color: var(--error);
}

.mr-grade-feedback--neutral[b-xtf60dtryr] {
    color: var(--text-secondary);
}

@keyframes mr-feedback-in-b-xtf60dtryr {
    from { opacity: 0; transform: translateY(calc(-50% + 8px)) scale(0.85); }
    60% { opacity: 1; transform: translateY(calc(-50% - 3px)) scale(1.06); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}

.mr-card-shell[b-xtf60dtryr],
.mr-state-card[b-xtf60dtryr] {
    width: 100%;
}

.mr-card-shell[b-xtf60dtryr] {
    display: flex;
    justify-content: center;
}

.mr-state-card[b-xtf60dtryr] {
    border: 1px solid var(--border-color);
    border-radius: 0.95rem;
    background: var(--bg-surface);
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
}

.mr-state-title[b-xtf60dtryr] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
}

.mr-state-actions[b-xtf60dtryr] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.mr-primary-btn[b-xtf60dtryr],
.mr-secondary-btn[b-xtf60dtryr] {
    border-radius: 0.75rem;
    padding: 0.7rem 1.15rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.mr-primary-btn[b-xtf60dtryr] {
    border: none;
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.mr-secondary-btn[b-xtf60dtryr] {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

.mr-secondary-btn:hover[b-xtf60dtryr],
.mr-primary-btn:hover[b-xtf60dtryr] {
    opacity: 0.92;
    transform: translateY(-2px) scale(1.03);
}

.mining-review-page[b-xtf60dtryr]  .review-card {
    width: min(100%, 42rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
    padding: 0.1rem 0 0;
    animation: rc-card-enter-b-xtf60dtryr 0.38s cubic-bezier(0.34, 1.8, 0.64, 1);
}

@keyframes rc-card-enter-b-xtf60dtryr {
    from { opacity: 0; transform: translateY(18px) scaleY(0.88) scaleX(1.04); }
    55% { opacity: 1; transform: translateY(-4px) scaleY(1.04) scaleX(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.mining-review-page[b-xtf60dtryr]  .rc-prompt-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.mining-review-page[b-xtf60dtryr]  .rc-kicker {
    display: none;
}

.mining-review-page[b-xtf60dtryr]  .rc-prompt {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.mining-review-page[b-xtf60dtryr]  .rc-front {
    width: 100%;
}

.mining-review-page[b-xtf60dtryr]  .rc-front-tools {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.mining-review-page[b-xtf60dtryr]  .rc-sentence-panel {
    min-height: clamp(8rem, 24vh, 12rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.35rem;
    background: transparent;
    border: none;
}

.mining-review-page[b-xtf60dtryr]  .rc-sentence-panel--word {
    min-height: clamp(7rem, 20vh, 10rem);
}

.mining-review-page[b-xtf60dtryr]  .rc-sentence {
    font-size: clamp(2rem, 6vw, 3.2rem);
    line-height: 1.35;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: normal;
}

.mining-review-page[b-xtf60dtryr]  .rc-highlight {
    display: inline-block;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(244, 114, 182, 0.32), rgba(244, 114, 182, 0.18));
    color: #fff;
    padding: 0.08rem 0.32rem;
    border-radius: 0.45rem;
    font-weight: 800;
    box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.16) inset, 0 0 18px rgba(244, 114, 182, 0.16);
}

.mining-review-page[b-xtf60dtryr]  .rc-ruby {
    ruby-position: over;
}

.mining-review-page[b-xtf60dtryr]  .rc-ruby-text {
    font-size: 0.44em;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.mining-review-page[b-xtf60dtryr]  .rc-highlight .rc-ruby-text {
    color: rgba(255, 255, 255, 0.86);
}

.mining-review-page[b-xtf60dtryr]  .review-card:not(.review-card--revealed) .rc-highlight {
    animation: rc-highlight-glow-b-xtf60dtryr 1.8s ease-in-out infinite;
}

@keyframes rc-highlight-glow-b-xtf60dtryr {
    0%, 100% { box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.16) inset, 0 0 12px rgba(244, 114, 182, 0.12); transform: scale(1); }
    50% { box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.24) inset, 0 0 28px rgba(244, 114, 182, 0.26); transform: scale(1.015); }
}

.mining-review-page[b-xtf60dtryr]  .rc-target-big {
    font-size: clamp(2.5rem, 8vw, 3.7rem);
    font-weight: 800;
    color: var(--text-primary);
}

.mining-review-page[b-xtf60dtryr]  .rc-listen-btn,
.mining-review-page[b-xtf60dtryr]  .rc-romaji-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-review-page[b-xtf60dtryr]  .rc-listen-btn:hover,
.mining-review-page[b-xtf60dtryr]  .rc-romaji-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.mining-review-page[b-xtf60dtryr]  .rc-listen-btn:active,
.mining-review-page[b-xtf60dtryr]  .rc-romaji-btn:active {
    transform: scaleY(0.88) scaleX(1.06);
    transition-duration: 0.06s;
}

.mining-review-page[b-xtf60dtryr]  .rc-romaji-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-subtle);
}

.mining-review-page[b-xtf60dtryr]  .rc-listen-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.mining-review-page[b-xtf60dtryr]  .rc-audio-error {
    display: block;
    max-width: min(100%, 28rem);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}

.mining-review-page[b-xtf60dtryr]  .rc-actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

.mining-review-page[b-xtf60dtryr]  .rc-reveal-btn {
    border: none;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0.85rem 1.6rem;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.mining-review-page[b-xtf60dtryr]  .rc-reveal-btn:hover {
    opacity: 0.9;
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-panel {
    width: 100%;
    padding: 0;
    overflow: hidden;
    transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-panel.is-hidden {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
    transform: translateY(4px);
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-panel.is-revealed {
    opacity: 1;
    max-height: 30rem;
    padding-top: 0.25rem;
    transform: translateY(0);
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-reading,
.mining-review-page[b-xtf60dtryr]  .rc-answer-meaning,
.mining-review-page[b-xtf60dtryr]  .rc-answer-translation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-value {
    display: inline-block;
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-word {
    font-size: clamp(2.1rem, 7vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-reading {
    color: var(--text-muted);
    font-size: 0.98rem;
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-meaning {
    color: var(--text-primary);
    font-size: 1.12rem;
    font-weight: 700;
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-translation {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 34rem;
}

.mining-review-page[b-xtf60dtryr]  .rc-answer-context {
    margin-top: 0.2rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.55;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: normal;
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-btn {
    border: 1px solid var(--border-color);
    border-radius: 0.9rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    height: 4.5rem;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.12s, box-shadow 0.12s, opacity 0.12s;
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-btn:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: var(--accent);
    box-shadow: 0 4px 14px var(--accent-glow);
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-label {
    font-size: 0.95rem;
    font-weight: 800;
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-missed {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: #fff;
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-missed .rc-grade-sub {
    color: rgba(255, 255, 255, 0.82);
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-hard {
    border-color: rgba(249, 115, 22, 0.24);
    background: rgba(249, 115, 22, 0.08);
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-good {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.08);
    color: var(--text-primary);
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-good .rc-grade-sub {
    color: var(--text-muted);
}

.mining-review-page[b-xtf60dtryr]  .rc-grade-easy {
    border-color: rgba(59, 130, 246, 0.16);
    background: rgba(59, 130, 246, 0.04);
    opacity: 0.9;
}

@media (max-width: 48rem) {
    .mining-review-page[b-xtf60dtryr]  .rc-grade-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 32rem) {
    .mining-review-page[b-xtf60dtryr] {
        padding: 0 0.5rem 2rem;
    }

    .mr-title[b-xtf60dtryr] {
        font-size: 1.1rem;
    }

    .mr-progress-row[b-xtf60dtryr] {
        grid-template-columns: 1fr;
    }

    .mr-stats-line[b-xtf60dtryr] {
        gap: 0.6rem;
        font-size: 0.78rem;
    }

    .mr-grade-feedback[b-xtf60dtryr] {
        right: auto;
        left: 50%;
        top: calc(100% + 0.5rem);
        transform: translateX(-50%);
    }

    .mr-state-card[b-xtf60dtryr] {
        padding: 1.25rem 0.85rem;
    }

    .mr-state-title[b-xtf60dtryr] {
        font-size: 1.15rem;
    }

    .mr-state-actions[b-xtf60dtryr] {
        width: 100%;
        flex-direction: column;
    }

    .mr-primary-btn[b-xtf60dtryr],
    .mr-secondary-btn[b-xtf60dtryr] {
        width: 100%;
        text-align: center;
    }

    .mining-review-page[b-xtf60dtryr]  .rc-reveal-btn {
        width: 100%;
    }

    .mining-review-page[b-xtf60dtryr]  .rc-grade-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .mining-review-page[b-xtf60dtryr]  .rc-grade-btn {
        width: 100%;
        height: 3.5rem;
        padding: 0 0.5rem;
        border-radius: 0.7rem;
    }

    .mining-review-page[b-xtf60dtryr]  .rc-grade-label {
        font-size: 0.85rem;
    }

    .mining-review-page[b-xtf60dtryr]  .rc-grade-sub {
        font-size: 0.65rem;
    }

    .mining-review-page[b-xtf60dtryr]  .rc-sentence {
        font-size: clamp(1.6rem, 5.5vw, 2.8rem);
    }

    .mining-review-page[b-xtf60dtryr]  .rc-target-big {
        font-size: clamp(2rem, 7vw, 3rem);
    }

    .mining-review-page[b-xtf60dtryr]  .rc-answer-word {
        font-size: clamp(1.8rem, 6vw, 2.6rem);
    }

    .mining-review-page[b-xtf60dtryr]  .rc-listen-btn,
    .mining-review-page[b-xtf60dtryr]  .rc-romaji-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.72rem;
    }
}
/* /Pages/OnboardingLesson.razor.rz.scp.css */
.learn-page[b-gbtpnq4kwr] {
    --lesson-flow-gap: clamp(0.85rem, 1.9dvh, 1.5rem);
    --lesson-flow-panel-max-width: 46rem;
    --lesson-flow-panel-inline-padding: 1rem;
    --lesson-panel-card-pad-y: clamp(1.35rem, 2.5dvh, 2rem);
    --lesson-panel-card-pad-x: clamp(1rem, 2.2vw, 1.5rem);
    --lesson-panel-card-pad-bottom: clamp(1.1rem, 2dvh, 1.6rem);
    --lesson-panel-card-gap: clamp(0.95rem, 1.8dvh, 1.35rem);
    --learn-stage-min: clamp(24rem, 56dvh, 38rem);
    --learn-title-size: clamp(1.85rem, 1.25rem + 1.35dvh, 2.7rem);
    --learn-copy-size: clamp(1.04rem, 0.82rem + 0.54dvh, 1.2rem);
    --learn-note-size: clamp(1.06rem, 0.82rem + 0.56dvh, 1.22rem);
    --learn-display-size: clamp(2.25rem, 1.45rem + 1.95dvh, 3.6rem);
    --learn-display-sentence-size: clamp(1.16rem, 0.9rem + 0.78dvh, 1.76rem);
    --learn-furi-reading-size: clamp(0.78rem, 0.62rem + 0.24dvh, 0.96rem);
    --learn-furi-kana-size: clamp(1.7rem, 1.16rem + 1.15dvh, 2.55rem);
    --learn-discovery-size: clamp(3rem, 2rem + 2.6dvh, 5.6rem);
    --learn-discovery-small-size: clamp(2.05rem, 1.3rem + 1.8dvh, 3.8rem);
    --learn-chip-kana-size: clamp(1.6rem, 1.04rem + 1.05dvh, 2.15rem);
    --learn-chip-romaji-size: clamp(0.66rem, 0.52rem + 0.22dvh, 0.8rem);
    --lesson-action-font-size: clamp(0.94rem, 0.8rem + 0.18dvh, 1.02rem);
}

[b-gbtpnq4kwr] .onboarding-listen-card {
    position: relative;
}

[b-gbtpnq4kwr] .onboarding-card-listen-button {
    position: absolute;
    inset-block-start: clamp(0.48rem, 0.9dvh, 0.68rem);
    inset-inline-end: clamp(0.48rem, 0.9vw, 0.68rem);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.72rem, 2.5dvh, 1.95rem);
    height: clamp(1.72rem, 2.5dvh, 1.95rem);
    padding: 0;
    border: 1px solid var(--accent-glow);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    color: var(--accent);
    box-shadow: 0 0.28rem 0.78rem color-mix(in srgb, black 16%, transparent);
    cursor: pointer;
    opacity: 0.82;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

[b-gbtpnq4kwr] .onboarding-card-listen-button:hover,
[b-gbtpnq4kwr] .onboarding-card-listen-button:focus-visible {
    border-color: var(--accent);
    background: var(--accent-subtle);
    opacity: 1;
    transform: scale(1.08);
}

[b-gbtpnq4kwr] .onboarding-card-listen-button:active {
    transform: scaleY(0.88) scaleX(1.08);
    transition-duration: 0.06s;
}

[b-gbtpnq4kwr] .onboarding-card-listen-icon {
    width: 0.86rem;
    height: 0.86rem;
    flex: 0 0 auto;
}

.learn-title[b-gbtpnq4kwr] {
    margin: 0;
    font-size: var(--learn-title-size);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.15;
    max-width: 24ch;
    margin-inline: auto;
    text-align: center;
}

.hjw-step[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.95rem, 2.1dvh, 1.55rem);
    width: 100%;
}

.hjw-stage[b-gbtpnq4kwr] {
    flex: 1 1 auto;
    width: 100%;
    min-height: var(--learn-stage-min);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.hjw-step.is-entering[b-gbtpnq4kwr] {
    animation: hjw-step-enter-b-gbtpnq4kwr 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hjw-step.is-exiting[b-gbtpnq4kwr] {
    animation: hjw-step-exit-b-gbtpnq4kwr 0.15s ease both;
}

@keyframes hjw-step-enter-b-gbtpnq4kwr {
    from { opacity: 0; transform: translateY(16px) scaleY(0.9) scaleX(1.03); }
    55%  { opacity: 1; transform: translateY(-3px) scaleY(1.03) scaleX(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hjw-step-exit-b-gbtpnq4kwr {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-10px) scaleY(0.92); }
}

.lesson-intro[b-gbtpnq4kwr] {
    margin: 0;
    font-size: var(--learn-copy-size);
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 38ch;
}

/* Example rows */

.example-list[b-gbtpnq4kwr] {
    display: grid;
    gap: clamp(0.6rem, 1.1dvh, 0.95rem);
    width: 100%;
}

.example-row[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(0.45rem, 0.9dvh, 0.72rem);
    border: 1px solid var(--border-color);
    border-radius: clamp(0.65rem, 1dvh, 0.85rem);
    padding: clamp(0.95rem, 1.55dvh, 1.3rem) clamp(1rem, 1.8vw, 1.4rem);
}

.example-main[b-gbtpnq4kwr] {
    font-size: var(--learn-display-size);
    color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1.1;
    text-align: center;
}

.example-main.katakana-color[b-gbtpnq4kwr] { color: var(--accent); }
.example-main.kanji-color[b-gbtpnq4kwr]    { color: var(--text-secondary); }
.example-main.modified[b-gbtpnq4kwr]       { color: var(--accent); }
.example-main.modified-p[b-gbtpnq4kwr]     { color: oklch(0.72 0.18 145); }
.example-main.sentence[b-gbtpnq4kwr]       { font-size: var(--learn-display-sentence-size); line-height: 1.35; }

/* Furigana sentence examples (romaji above each kana) */

.example-furi-sentence[b-gbtpnq4kwr] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.05rem;
    flex: 0 1 auto;
    width: 100%;
    justify-content: center;
    min-width: 0;
    text-align: center;
}

.ef-seg[b-gbtpnq4kwr] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.14rem, 0.28dvh, 0.24rem);
}

.ef-reading[b-gbtpnq4kwr] {
    font-size: var(--learn-furi-reading-size);
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
}

.ef-kana[b-gbtpnq4kwr] {
    font-size: var(--learn-furi-kana-size);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
}

.ef-seg.particle .ef-kana[b-gbtpnq4kwr],
.ef-seg.particle .ef-reading[b-gbtpnq4kwr] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.sent-incomplete .ef-seg[b-gbtpnq4kwr] {
    opacity: 0.45;
}

.sent-incomplete .ef-seg.particle[b-gbtpnq4kwr] {
    opacity: 0.6;
}

.example-meta[b-gbtpnq4kwr] {
    width: 100%;
    margin: 0;
    font-size: clamp(1rem, 0.82rem + 0.24dvh, 1.12rem);
    line-height: 1.45;
    color: var(--text-secondary);
}

.example-meta.strong[b-gbtpnq4kwr] {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Modifier rows */

.modifier-row[b-gbtpnq4kwr] {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.combo-row[b-gbtpnq4kwr] {
    gap: clamp(0.95rem, 1.8vw, 1.45rem);
    padding-block: clamp(1.2rem, 2.2dvh, 1.75rem);
}

.combo-row .kana-label-pair[b-gbtpnq4kwr] {
    gap: 0.32rem;
}

.combo-row .example-main[b-gbtpnq4kwr] {
    font-size: clamp(3rem, 2rem + 2.6dvh, 4.85rem);
    line-height: 1;
}

.combo-row .kana-romaji-hint[b-gbtpnq4kwr] {
    font-size: clamp(1rem, 0.8rem + 0.34dvh, 1.16rem);
    line-height: 1.05;
}

.combo-row .modifier-arrow[b-gbtpnq4kwr] {
    font-size: clamp(1.15rem, 0.94rem + 0.4dvh, 1.35rem);
    opacity: 0.62;
    min-width: clamp(1.3rem, 1.02rem + 0.34dvh, 1.55rem);
}

.combo-row--compact .example-main[b-gbtpnq4kwr] {
    font-size: clamp(2.55rem, 1.75rem + 2.1dvh, 4rem);
}

.combo-row .combo-row-small-kana[b-gbtpnq4kwr] {
    font-size: clamp(2.65rem, 1.82rem + 2.15dvh, 4.15rem);
}

.combo-row--compact .combo-row-small-kana[b-gbtpnq4kwr] {
    font-size: clamp(2.3rem, 1.6rem + 1.8dvh, 3.45rem);
}

.modifier-arrow[b-gbtpnq4kwr] {
    font-size: 1rem;
    color: var(--text-muted);
    opacity: 0.5;
    line-height: 1;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.modifier-row .example-meta[b-gbtpnq4kwr] {
    flex-basis: 100%;
    margin-top: 0.1rem;
}

/* Kana + romaji label stacked vertically */

.kana-label-pair[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.example-row:not(.modifier-row):not(.script-row) > .kana-label-pair[b-gbtpnq4kwr] {
    gap: 0.3rem;
}

.example-row:not(.modifier-row):not(.script-row) > .kana-label-pair > .example-main[b-gbtpnq4kwr],
.script-row > .example-main[b-gbtpnq4kwr],
.script-row .ef-kana[b-gbtpnq4kwr] {
    display: block;
    font-size: clamp(2.65rem, 1.75rem + 2.2dvh, 4rem);
    line-height: 1;
}

.kana-romaji-hint[b-gbtpnq4kwr],
.script-row .ef-reading[b-gbtpnq4kwr] {
    font-size: clamp(0.82rem, 0.66rem + 0.22dvh, 0.94rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-transform: lowercase;
    line-height: 1;
}

.kana-romaji-hint.modified[b-gbtpnq4kwr]   { color: var(--accent); }
.kana-romaji-hint.modified-p[b-gbtpnq4kwr] { color: oklch(0.72 0.18 145); }

/* Bottom note */

.learn-note[b-gbtpnq4kwr] {
    margin: 0;
    font-size: var(--learn-note-size);
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 46ch;
}

/* Discovery flow — ch01-01 */

.discovery[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.95rem, 1.8dvh, 1.35rem);
    width: 100%;
    animation: step-enter-b-gbtpnq4kwr 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes step-enter-b-gbtpnq4kwr {
    from { opacity: 0; transform: translateY(16px) scaleY(0.9); }
    55%  { opacity: 1; transform: translateY(-3px) scaleY(1.03); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.discovery-sentence[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.55rem, 1dvh, 0.85rem);
    width: 100%;
    padding: clamp(1.25rem, 2.4dvh, 2rem) clamp(1rem, 2vw, 1.4rem);
    border: 1.5px dashed var(--accent-glow);
    border-radius: clamp(0.85rem, 1.2dvh, 1.1rem);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.discovery-sentence:hover[b-gbtpnq4kwr] {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.discovery-main[b-gbtpnq4kwr] {
    font-size: var(--learn-discovery-size);
    color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1.1;
}

.discovery-main.small[b-gbtpnq4kwr]    { font-size: var(--learn-discovery-small-size); }
.discovery-main.katakana[b-gbtpnq4kwr] { color: var(--accent); }
.discovery-main.mixed[b-gbtpnq4kwr]    { color: var(--text-secondary); }

.discovery-tap-hint[b-gbtpnq4kwr] {
    font-size: clamp(0.78rem, 0.62rem + 0.2dvh, 0.9rem);
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* Character chips */

.char-chips[b-gbtpnq4kwr] {
    display: flex;
    justify-content: center;
    gap: clamp(0.4rem, 0.9dvh, 0.7rem);
    flex-wrap: wrap;
}

.char-chip[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.2rem, 0.4dvh, 0.32rem);
    padding: clamp(0.45rem, 1dvh, 0.75rem) clamp(0.7rem, 1.3vw, 0.95rem);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-surface);
    animation: chip-in-b-gbtpnq4kwr 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 0.07s);
}

.char-chip.reveal[b-gbtpnq4kwr] {
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.char-chip.reveal:hover[b-gbtpnq4kwr] {
    border-color: var(--accent);
    transform: translateY(-2px) scale(1.04);
}

.char-chip.kata[b-gbtpnq4kwr] {
    border-color: var(--accent-glow);
}

@keyframes chip-in-b-gbtpnq4kwr {
    from { opacity: 0; transform: translateY(10px) scaleY(0.82) scaleX(1.06); }
    55%  { opacity: 1; transform: translateY(-3px) scaleY(1.05) scaleX(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chip-kana[b-gbtpnq4kwr] {
    font-size: var(--learn-chip-kana-size);
    color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
}

.char-chip.kata .chip-kana[b-gbtpnq4kwr] {
    color: var(--accent);
}

.chip-romaji[b-gbtpnq4kwr] {
    font-size: var(--learn-chip-romaji-size);
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.discovery-note[b-gbtpnq4kwr] {
    margin: 0;
    font-size: clamp(0.9rem, 0.74rem + 0.22dvh, 1rem);
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}

.discovery-next[b-gbtpnq4kwr] {
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.35rem 0.75rem;
    border-radius: 0.4rem;
    transition: background 0.12s ease;
}

.discovery-next:hover[b-gbtpnq4kwr] {
    background: var(--accent-subtle);
}

.discovery-reassure[b-gbtpnq4kwr] {
    margin: 0.25rem 0 0.5rem;
    font-size: clamp(1.04rem, 0.82rem + 0.34dvh, 1.2rem);
    color: var(--text-secondary);
    line-height: 1.7;
    font-style: italic;
}

/* Chapter tag shown on "Before You Begin" intros */

.learn-chapter-tag[b-gbtpnq4kwr] {
    margin: -0.5rem 0 0.25rem;
    font-size: clamp(0.7rem, 0.58rem + 0.15dvh, 0.8rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    opacity: 0.8;
}

/* Structured lesson rows: "Used for / Right now" */

.lesson-intro[b-gbtpnq4kwr] {
    margin: 0;
    font-size: var(--learn-copy-size);
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 38ch;
}

.lesson-rows[b-gbtpnq4kwr] {
    display: grid;
    gap: 0.45rem;
    width: 100%;
}

.lesson-row[b-gbtpnq4kwr] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: clamp(0.55rem, 1dvh, 0.8rem) clamp(0.75rem, 1.2vw, 0.95rem);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    text-align: left;
}

.lr-label[b-gbtpnq4kwr] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 5.5rem;
    padding-top: 0.1rem;
}

.lr-text[b-gbtpnq4kwr] {
    font-size: clamp(0.9rem, 0.74rem + 0.22dvh, 1rem);
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Modifier row layout */

.modifier-row[b-gbtpnq4kwr] {
    justify-content: center;
    gap: 0.55rem;
}

.modifier-row .example-meta[b-gbtpnq4kwr] {
    font-size: 0.72rem;
    margin-left: 0.1rem;
}

.modifier-arrow[b-gbtpnq4kwr] {
    font-size: 0.9rem;
    color: var(--text-muted);
    opacity: 0.55;
    align-self: center;
    line-height: 1;
}

/* Course "Before You Begin" intro */

.course-intro[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.ci-rows[b-gbtpnq4kwr] {
    display: grid;
    gap: 0.45rem;
    width: 100%;
}

.ci-row[b-gbtpnq4kwr] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: clamp(0.6rem, 1.05dvh, 0.85rem) clamp(0.75rem, 1.2vw, 0.95rem);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    text-align: left;
}

.ci-label[b-gbtpnq4kwr] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    white-space: nowrap;
    min-width: 5.5rem;
    padding-top: 0.1rem;
}

.ci-text[b-gbtpnq4kwr] {
    font-size: clamp(0.9rem, 0.74rem + 0.22dvh, 1rem);
    color: var(--text-secondary);
    line-height: 1.45;
}

.ci-examples[b-gbtpnq4kwr] {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
}

.ci-pair[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.ci-kana[b-gbtpnq4kwr] {
    font-size: clamp(2.2rem, 1.45rem + 2dvh, 3.6rem);
    color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
}

.ci-kana.katakana[b-gbtpnq4kwr]  { color: var(--accent); }
.ci-kana.modified[b-gbtpnq4kwr]  { color: var(--accent); }
.ci-kana.modified-p[b-gbtpnq4kwr] { color: oklch(0.72 0.18 145); }

.ci-romaji[b-gbtpnq4kwr] {
    font-size: clamp(0.68rem, 0.54rem + 0.18dvh, 0.8rem);
    color: var(--text-muted);
    font-weight: 500;
    text-align: center;
}

.ci-takeaway[b-gbtpnq4kwr] {
    margin: 0;
    padding: 0.65rem 0.9rem;
    background: var(--accent-subtle);
    border: 1px solid var(--accent-glow);
    border-radius: 0.55rem;
    font-size: clamp(0.96rem, 0.78rem + 0.24dvh, 1.06rem);
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    line-height: 1.55;
}

/* Sentence intro — ch07-00 slides */

.sent-words[b-gbtpnq4kwr] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.45rem, 0.8dvh, 0.75rem);
    flex-wrap: wrap;
}

.sent-word[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.25rem, 0.45dvh, 0.38rem);
    padding: clamp(0.6rem, 1.05dvh, 0.85rem) clamp(0.8rem, 1.2vw, 1rem);
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
    background: var(--bg-surface);
}

.sent-word.sent-particle[b-gbtpnq4kwr] {
    border-color: var(--accent-glow);
    background: var(--accent-subtle);
}

.sent-furi-row[b-gbtpnq4kwr] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.15rem, 0.35dvh, 0.28rem);
}

.sent-furi-seg[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.15rem, 0.3dvh, 0.24rem);
}

.sent-furi-reading[b-gbtpnq4kwr] {
    font-size: clamp(0.55rem, 0.45rem + 0.16dvh, 0.66rem);
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
}

.sent-furi-kana[b-gbtpnq4kwr] {
    font-size: clamp(1.4rem, 0.92rem + 1.1dvh, 2.25rem);
    color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
}

.sent-particle .sent-furi-kana[b-gbtpnq4kwr] {
    color: var(--accent);
}

.sent-particle .sent-furi-reading[b-gbtpnq4kwr] {
    color: var(--accent);
    opacity: 0.7;
}

.sent-label[b-gbtpnq4kwr] {
    font-size: clamp(0.62rem, 0.5rem + 0.16dvh, 0.72rem);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

.sent-translation[b-gbtpnq4kwr] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

.sent-pattern[b-gbtpnq4kwr] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    font-size: clamp(1.5rem, 1rem + 1.15dvh, 2.45rem);
    color: var(--text-muted);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1.2;
}

.sent-particle-inline[b-gbtpnq4kwr] {
    color: var(--accent);
    font-weight: 600;
}

.particle[b-gbtpnq4kwr],
.example-main .particle[b-gbtpnq4kwr],
.learn-note .particle[b-gbtpnq4kwr],
.sent-summary-pattern .particle[b-gbtpnq4kwr] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.sent-summary[b-gbtpnq4kwr] {
    display: grid;
    gap: 0.5rem;
    width: 100%;
}

.sent-summary-row[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(0.45rem, 0.85dvh, 0.72rem);
    padding: clamp(0.75rem, 1.2dvh, 1rem) clamp(1rem, 1.5vw, 1.2rem);
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
}

.sent-summary-pattern[b-gbtpnq4kwr] {
    width: 100%;
    text-align: center;
    font-size: clamp(1.1rem, 0.82rem + 0.72dvh, 1.7rem);
    line-height: 1.35;
    color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
}

.sent-summary-label[b-gbtpnq4kwr] {
    width: 100%;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.35;
    color: var(--text-muted);
}

/* Sentence contrast rows (before / after) */

.sent-contrast-row[b-gbtpnq4kwr] {
    gap: clamp(0.45rem, 0.85dvh, 0.72rem);
}

.sent-contrast-row > .example-meta:first-of-type:not(:last-of-type)[b-gbtpnq4kwr] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.sent-contrast-row > .example-meta:last-of-type:not(:first-of-type)[b-gbtpnq4kwr] {
    font-size: clamp(1rem, 0.84rem + 0.26dvh, 1.14rem);
}

.sent-incomplete[b-gbtpnq4kwr] {
    opacity: 0.45;
}

.sent-verdict[b-gbtpnq4kwr] {
    font-weight: 600;
    white-space: normal;
}

.sent-verdict--ok[b-gbtpnq4kwr] {
    color: oklch(0.72 0.17 145);
}

.example-row em[b-gbtpnq4kwr] {
    font-style: normal;
    color: var(--accent);
    font-weight: 600;
}

.script-row[b-gbtpnq4kwr] {
    gap: clamp(0.5rem, 1dvh, 0.8rem);
}

.script-row .example-main[b-gbtpnq4kwr] {
    order: 1;
}

.script-copy[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    order: 2;
    flex: none;
    width: 100%;
    max-width: 32ch;
    min-width: 0;
    text-align: center;
}

.script-copy .example-meta.strong[b-gbtpnq4kwr] {
    width: auto;
}

.script-desc[b-gbtpnq4kwr] {
    font-size: clamp(1rem, 0.82rem + 0.24dvh, 1.08rem);
    color: var(--text-secondary);
    line-height: 1.45;
}

.kanji-flow[b-gbtpnq4kwr] {
    width: 100%;
    display: grid;
    gap: 0.9rem;
}

.kanji-stage--compact[b-gbtpnq4kwr] {
    min-height: clamp(19rem, 48dvh, 27rem);
}

.kanji-flow .ci-intro[b-gbtpnq4kwr] {
    margin: 0 auto;
    max-width: 40ch;
    font-size: clamp(0.96rem, 0.76rem + 0.3dvh, 1.08rem);
    line-height: 1.55;
    color: var(--text-secondary);
    text-align: center;
}

.kanji-ruby-sentence[b-gbtpnq4kwr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.kanji-kana-inline[b-gbtpnq4kwr] {
    flex: 1;
    width: 100%;
}

.kanji-token-line[b-gbtpnq4kwr] {
    width: 100%;
    justify-content: flex-start;
}

.kanji-kana-reference .ef-kana[b-gbtpnq4kwr],
.kanji-kana-reference .ef-reading[b-gbtpnq4kwr] {
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
}

.kanji-kana-reference .ef-kana[b-gbtpnq4kwr] {
    font-size: clamp(1.1rem, 4vw, 1.3rem);
}

.kanji-translation[b-gbtpnq4kwr] {
    font-size: clamp(0.82rem, 0.68rem + 0.18dvh, 0.94rem);
    line-height: 1.4;
    color: var(--text-secondary);
}

.kanji-compare[b-gbtpnq4kwr],
.kanji-focus-panel[b-gbtpnq4kwr],
.kanji-word-panel[b-gbtpnq4kwr],
.kanji-breakdown[b-gbtpnq4kwr],
.kanji-reading-list[b-gbtpnq4kwr] {
    width: min(100%, 36rem);
    margin-inline: auto;
}

.kanji-compare[b-gbtpnq4kwr] {
    display: grid;
    gap: 0.65rem;
}

.kanji-compare-row[b-gbtpnq4kwr],
.kanji-focus-panel[b-gbtpnq4kwr] {
    display: grid;
    gap: 0.55rem;
    text-align: left;
    border: 1px solid var(--border-color);
    border-radius: 0.7rem;
    padding: clamp(0.95rem, 1.45dvh, 1.2rem) clamp(1.05rem, 1.6vw, 1.25rem);
    background: var(--bg-surface);
}

.kanji-compare-row--focus[b-gbtpnq4kwr],
.kanji-focus-panel[b-gbtpnq4kwr] {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border-color));
    background: color-mix(in srgb, var(--bg-surface) 92%, var(--accent) 8%);
}

.kanji-focus-panel--soft[b-gbtpnq4kwr] {
    gap: 0.65rem;
}

.kanji-compare-label[b-gbtpnq4kwr],
.kanji-panel-label[b-gbtpnq4kwr] {
    font-size: 0.74rem;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
}

.kanji-flow .learn-note[b-gbtpnq4kwr] {
    color: var(--text-secondary);
    max-width: 35ch;
    margin-inline: auto;
}

.lesson-ruby[b-gbtpnq4kwr] {
    font-size: clamp(1.2rem, 0.9rem + 0.72dvh, 1.9rem);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1.08;
    ruby-position: over;
}

.lesson-ruby rt[b-gbtpnq4kwr] {
    font-size: clamp(0.74rem, 0.58rem + 0.18dvh, 0.86rem);
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.08;
}

.lesson-ruby--particle[b-gbtpnq4kwr],
.lesson-ruby--particle rt[b-gbtpnq4kwr] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.kanji-ruby-sentence--soft-particles .lesson-ruby--particle[b-gbtpnq4kwr],
.kanji-ruby-sentence--soft-particles .lesson-ruby--particle rt[b-gbtpnq4kwr] {
    color: color-mix(in srgb, var(--text-secondary) 82%, var(--accent) 18%);
    -webkit-text-fill-color: color-mix(in srgb, var(--text-secondary) 82%, var(--accent) 18%);
}

.lesson-ruby--kanji[b-gbtpnq4kwr] {
    font-weight: 700;
}

.lesson-ruby--ending[b-gbtpnq4kwr] {
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    padding-bottom: 0.08rem;
}

.ef-seg.kanji .ef-kana[b-gbtpnq4kwr] {
    font-weight: 700;
}

.ef-seg.ending .ef-kana[b-gbtpnq4kwr] {
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    padding-bottom: 0.08rem;
}

.kanji-token-line--soft-particles .ef-seg.particle .ef-kana[b-gbtpnq4kwr],
.kanji-token-line--soft-particles .ef-seg.particle .ef-reading[b-gbtpnq4kwr] {
    color: color-mix(in srgb, var(--text-secondary) 82%, var(--accent) 18%);
    -webkit-text-fill-color: color-mix(in srgb, var(--text-secondary) 82%, var(--accent) 18%);
}

.kanji-word-panel[b-gbtpnq4kwr] {
    display: grid;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

.kanji-word-pair[b-gbtpnq4kwr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: clamp(0.8rem, 1.2dvh, 1rem) clamp(0.95rem, 1.5vw, 1.15rem);
    border: 1px solid var(--border-color);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--bg-surface) 94%, var(--accent) 6%);
}

.kanji-word-column[b-gbtpnq4kwr] {
    min-width: 0;
}

.kanji-word-arrow[b-gbtpnq4kwr] {
    font-size: 1rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.kanji-word-pair .kanji-translation[b-gbtpnq4kwr] {
    text-align: right;
    white-space: nowrap;
}

.kanji-breakdown[b-gbtpnq4kwr],
.kanji-reading-list[b-gbtpnq4kwr] {
    display: grid;
    gap: 0.5rem;
}

.kanji-breakdown-row[b-gbtpnq4kwr],
.kanji-reading-item[b-gbtpnq4kwr] {
    display: grid;
    gap: 0.28rem;
    padding: clamp(0.82rem, 1.25dvh, 1.05rem) clamp(1rem, 1.5vw, 1.2rem);
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
    text-align: left;
}

.kanji-breakdown-line[b-gbtpnq4kwr],
.kanji-reading-title[b-gbtpnq4kwr] {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
}

.kanji-breakdown-line[b-gbtpnq4kwr] {
    width: 100%;
    justify-content: flex-start;
    gap: 0.45rem;
}

.kanji-breakdown-line .ef-reading[b-gbtpnq4kwr] {
    font-size: clamp(0.66rem, 0.52rem + 0.16dvh, 0.76rem);
}

.kanji-breakdown-line .ef-kana[b-gbtpnq4kwr] {
    font-size: clamp(1.15rem, 0.9rem + 0.55dvh, 1.55rem);
}

.kanji-breakdown-divider[b-gbtpnq4kwr] {
    font-size: 1rem;
    color: var(--text-muted);
    opacity: 0.65;
    align-self: flex-end;
    padding-bottom: 0.12rem;
}

.kanji-breakdown-translation[b-gbtpnq4kwr] {
    font-size: clamp(0.88rem, 0.72rem + 0.22dvh, 0.98rem);
    line-height: 1.35;
    color: var(--text-secondary);
}

.kanji-breakdown-text[b-gbtpnq4kwr],
.kanji-reading-copy[b-gbtpnq4kwr] {
    font-size: clamp(0.88rem, 0.72rem + 0.22dvh, 0.98rem);
    line-height: 1.45;
    color: var(--text-secondary);
}

.kana-matrix-wrap[b-gbtpnq4kwr] {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.kana-matrix[b-gbtpnq4kwr] {
    width: 100%;
    min-width: 22rem;
    display: grid;
    gap: 0.42rem;
}

.kana-matrix--triad[b-gbtpnq4kwr] {
    min-width: 18rem;
}

.honorific-matrix-wrap[b-gbtpnq4kwr] {
    margin-block: 0.2rem;
}

.honorific-matrix[b-gbtpnq4kwr] {
    min-width: 24rem;
    gap: 0.5rem;
}

.kana-matrix-header[b-gbtpnq4kwr],
.kana-matrix-row[b-gbtpnq4kwr] {
    display: grid;
    grid-template-columns: 4.2rem repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
    align-items: stretch;
}

.kana-matrix--triad .kana-matrix-header[b-gbtpnq4kwr],
.kana-matrix--triad .kana-matrix-row[b-gbtpnq4kwr] {
    grid-template-columns: 4.2rem repeat(3, minmax(0, 1fr));
}

.honorific-matrix .kana-matrix-header[b-gbtpnq4kwr],
.honorific-matrix .kana-matrix-row[b-gbtpnq4kwr] {
    grid-template-columns: 4.6rem repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.kana-matrix-corner[b-gbtpnq4kwr],
.kana-matrix-col[b-gbtpnq4kwr],
.kana-matrix-label[b-gbtpnq4kwr] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.kana-matrix-label[b-gbtpnq4kwr] {
    justify-content: flex-start;
    padding-left: 0.2rem;
}

.honorific-matrix .kana-matrix-col[b-gbtpnq4kwr] {
    justify-content: flex-start;
    padding-left: 0.45rem;
    text-transform: none;
    letter-spacing: 0.03em;
    font-size: 0.68rem;
}

.honorific-matrix .kana-matrix-label[b-gbtpnq4kwr] {
    justify-content: center;
    padding: 0.55rem 0.35rem;
    border-radius: 0.55rem;
    border: 1px solid transparent;
    text-transform: none;
    letter-spacing: 0.03em;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.15;
}

.kana-matrix-cell[b-gbtpnq4kwr] {
    min-height: 3.9rem;
    padding: 0.45rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
}

.honorific-matrix .kana-matrix-cell[b-gbtpnq4kwr] {
    min-height: 4rem;
    padding: 0.68rem 0.78rem;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
}

.kana-matrix-cell.is-empty[b-gbtpnq4kwr] {
    border-style: dashed;
    opacity: 0.35;
}

.kana-matrix-romaji[b-gbtpnq4kwr] {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1;
}

.kana-matrix-kana[b-gbtpnq4kwr] {
    font-size: clamp(1.2rem, 4vw, 1.65rem);
    color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
}

.kana-matrix-dash[b-gbtpnq4kwr] {
    font-size: 1rem;
    color: var(--text-muted);
}

.honorific-note-compact[b-gbtpnq4kwr] {
    max-width: 35rem;
    margin-inline: auto;
    text-align: center;
}

.honorific-matrix-text[b-gbtpnq4kwr] {
    font-size: clamp(0.78rem, 0.68rem + 0.16dvh, 0.9rem);
    line-height: 1.45;
    color: var(--text-secondary);
    text-align: center;
}

.honorific-matrix-row.is-default .honorific-matrix-text[b-gbtpnq4kwr] {
    font-size: clamp(0.9rem, 0.76rem + 0.22dvh, 1.05rem);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.honorific-matrix-row.is-default .kana-matrix-label[b-gbtpnq4kwr] {
    color: var(--accent);
    border-color: var(--accent-glow);
    background: var(--accent-subtle);
}

.honorific-matrix-row.is-default .kana-matrix-cell[b-gbtpnq4kwr] {
    border-color: var(--accent-glow);
    background: var(--accent-subtle);
}

@media (min-width: 1100px) and (min-height: 900px) {
    .learn-page[b-gbtpnq4kwr] {
        --lesson-flow-panel-max-width: 47.5rem;
        --lesson-flow-gap: clamp(1rem, 2.1dvh, 1.75rem);
        --lesson-panel-card-pad-y: clamp(1.55rem, 2.9dvh, 2.4rem);
        --lesson-panel-card-gap: clamp(1rem, 2dvh, 1.55rem);
        --learn-stage-min: clamp(27rem, 60dvh, 44rem);
        --learn-title-size: clamp(1.95rem, 1.25rem + 1.5dvh, 2.9rem);
        --learn-copy-size: clamp(1.1rem, 0.86rem + 0.56dvh, 1.26rem);
        --learn-note-size: clamp(1.12rem, 0.86rem + 0.62dvh, 1.3rem);
        --learn-display-size: clamp(2.35rem, 1.48rem + 2.15dvh, 3.85rem);
        --learn-display-sentence-size: clamp(1.24rem, 0.94rem + 0.88dvh, 1.92rem);
        --learn-furi-reading-size: clamp(0.82rem, 0.62rem + 0.28dvh, 0.98rem);
        --learn-furi-kana-size: clamp(1.82rem, 1.12rem + 1.42dvh, 2.78rem);
        --learn-discovery-size: clamp(3.35rem, 2rem + 3.05dvh, 6.2rem);
        --learn-discovery-small-size: clamp(2.25rem, 1.3rem + 2.1dvh, 4.15rem);
        --learn-chip-kana-size: clamp(1.72rem, 1.08rem + 1.22dvh, 2.28rem);
        --learn-chip-romaji-size: clamp(0.7rem, 0.56rem + 0.24dvh, 0.84rem);
    }
}

/* ?? Responsive ?????????????????????????????????? */

@media (max-width: 640px) {
    .learn-page[b-gbtpnq4kwr] {
        --lesson-flow-gap: 0.48rem;
        --lesson-flow-panel-inline-padding: 0.5rem;
        --lesson-panel-card-pad-y: 0.68rem;
        --lesson-panel-card-pad-x: 0.54rem;
        --lesson-panel-card-pad-bottom: 0.72rem;
        --lesson-panel-card-gap: 0.58rem;
        --learn-stage-min: clamp(15.5rem, 45dvh, 22rem);
        --learn-title-size: clamp(1.18rem, 6.2vw, 1.54rem);
        --learn-copy-size: 0.76rem;
        --learn-note-size: 0.78rem;
        --learn-display-size: clamp(1.72rem, 9vw, 2.38rem);
        --learn-display-sentence-size: clamp(0.86rem, 4.2vw, 1.12rem);
        --learn-furi-reading-size: 0.56rem;
        --learn-furi-kana-size: clamp(1.05rem, 5.8vw, 1.52rem);
        --learn-discovery-size: clamp(2rem, 11vw, 3rem);
        --learn-discovery-small-size: clamp(1.48rem, 8.4vw, 2.15rem);
        --learn-chip-kana-size: clamp(1.06rem, 5.6vw, 1.42rem);
        --learn-chip-romaji-size: 0.52rem;
        --lesson-action-font-size: 0.72rem;
    }

    .learn-title[b-gbtpnq4kwr] {
        max-width: 22ch;
        line-height: 1.12;
    }

    [b-gbtpnq4kwr] .onboarding-card-listen-button {
        inset-block-start: 0.32rem;
        inset-inline-end: 0.32rem;
        width: 1.52rem;
        height: 1.52rem;
    }

    [b-gbtpnq4kwr] .onboarding-card-listen-icon {
        width: 0.74rem;
        height: 0.74rem;
    }

    .lesson-intro[b-gbtpnq4kwr],
    .learn-note[b-gbtpnq4kwr],
    .discovery-note[b-gbtpnq4kwr],
    .discovery-reassure[b-gbtpnq4kwr],
    .ci-takeaway[b-gbtpnq4kwr],
    .sent-translation[b-gbtpnq4kwr],
    .script-desc[b-gbtpnq4kwr],
    .kanji-flow .ci-intro[b-gbtpnq4kwr] {
        font-size: 0.76rem;
        line-height: 1.42;
    }

    .lesson-intro[b-gbtpnq4kwr] {
        max-width: 34ch;
    }

    .hjw-stage[b-gbtpnq4kwr] {
        flex: 0 0 auto;
        min-height: var(--learn-stage-min);
        overflow: visible;
    }

    .hjw-step[b-gbtpnq4kwr],
    .discovery[b-gbtpnq4kwr],
    .course-intro[b-gbtpnq4kwr],
    .kanji-flow[b-gbtpnq4kwr] {
        gap: 0.52rem;
    }

    .example-list[b-gbtpnq4kwr],
    .sent-summary[b-gbtpnq4kwr],
    .polite-summary[b-gbtpnq4kwr] {
        gap: 0.38rem;
    }

    .example-row[b-gbtpnq4kwr],
    .sent-summary-row[b-gbtpnq4kwr],
    .polite-summary-row[b-gbtpnq4kwr] {
        gap: 0.32rem;
        padding: 0.54rem 0.58rem;
        border-radius: 0.52rem;
        flex-wrap: wrap;
    }

    .example-meta[b-gbtpnq4kwr] {
        font-size: 0.72rem;
        line-height: 1.32;
    }

    .example-meta.strong[b-gbtpnq4kwr],
    .sent-summary-label[b-gbtpnq4kwr],
    .polite-summary-label[b-gbtpnq4kwr] {
        font-size: 0.56rem;
        letter-spacing: 0.05em;
    }

    .script-row[b-gbtpnq4kwr] {
        gap: 0.34rem;
    }

    .script-copy[b-gbtpnq4kwr] {
        gap: 0.16rem;
        max-width: 28ch;
    }

    .example-furi-sentence[b-gbtpnq4kwr],
    .sent-furi-row[b-gbtpnq4kwr] {
        gap: 0.04rem;
    }

    .ef-seg[b-gbtpnq4kwr],
    .sent-furi-seg[b-gbtpnq4kwr] {
        gap: 0.1rem;
    }

    .sent-words[b-gbtpnq4kwr] {
        gap: 0.34rem;
    }

    .sent-word[b-gbtpnq4kwr] {
        gap: 0.18rem;
        padding: 0.46rem 0.52rem;
        border-radius: 0.46rem;
    }

    .sent-furi-reading[b-gbtpnq4kwr] {
        font-size: 0.46rem;
    }

    .sent-furi-kana[b-gbtpnq4kwr] {
        font-size: clamp(0.92rem, 5vw, 1.25rem);
    }

    .sent-label[b-gbtpnq4kwr] {
        font-size: 0.52rem;
    }

    .sent-pattern[b-gbtpnq4kwr],
    .sent-summary-pattern[b-gbtpnq4kwr] {
        font-size: clamp(0.92rem, 5.2vw, 1.24rem);
        line-height: 1.28;
    }

    .discovery-sentence[b-gbtpnq4kwr] {
        gap: 0.36rem;
        padding: 0.72rem 0.62rem;
        border-radius: 0.62rem;
    }

    .discovery-tap-hint[b-gbtpnq4kwr],
    .discovery-next[b-gbtpnq4kwr] {
        font-size: 0.64rem;
    }

    .char-chips[b-gbtpnq4kwr] {
        gap: 0.3rem;
    }

    .char-chip[b-gbtpnq4kwr] {
        gap: 0.14rem;
        padding: 0.34rem 0.42rem;
        border-radius: 0.42rem;
    }

    .lesson-rows[b-gbtpnq4kwr],
    .ci-rows[b-gbtpnq4kwr] {
        gap: 0.34rem;
    }

    .lesson-row[b-gbtpnq4kwr],
    .ci-row[b-gbtpnq4kwr] {
        gap: 0.44rem;
        padding: 0.46rem 0.52rem;
        border-radius: 0.44rem;
    }

    .lr-label[b-gbtpnq4kwr],
    .ci-label[b-gbtpnq4kwr] {
        min-width: 4.4rem;
        font-size: 0.52rem;
        letter-spacing: 0.05em;
    }

    .lr-text[b-gbtpnq4kwr],
    .ci-text[b-gbtpnq4kwr] {
        font-size: 0.72rem;
        line-height: 1.34;
    }

    .ci-examples[b-gbtpnq4kwr] {
        gap: 0.72rem;
    }

    .ci-kana[b-gbtpnq4kwr] {
        font-size: clamp(1.42rem, 7.5vw, 2rem);
    }

    .ci-romaji[b-gbtpnq4kwr] {
        font-size: 0.56rem;
    }

    .ci-takeaway[b-gbtpnq4kwr] {
        padding: 0.48rem 0.56rem;
        border-radius: 0.46rem;
    }

    .kana-matrix[b-gbtpnq4kwr] {
        min-width: 0;
        gap: 0.3rem;
    }

    .kana-matrix-header[b-gbtpnq4kwr],
    .kana-matrix-row[b-gbtpnq4kwr] {
        grid-template-columns: 2.8rem repeat(5, minmax(0, 1fr));
        gap: 0.25rem;
    }

    .kana-matrix--triad .kana-matrix-header[b-gbtpnq4kwr],
    .kana-matrix--triad .kana-matrix-row[b-gbtpnq4kwr] {
        grid-template-columns: 2.8rem repeat(3, minmax(0, 1fr));
    }

    .honorific-matrix[b-gbtpnq4kwr] {
        min-width: 22rem;
    }

    .honorific-matrix .kana-matrix-header[b-gbtpnq4kwr],
    .honorific-matrix .kana-matrix-row[b-gbtpnq4kwr] {
        grid-template-columns: 3.2rem repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
    }

    .kana-matrix-corner[b-gbtpnq4kwr],
    .kana-matrix-col[b-gbtpnq4kwr],
    .kana-matrix-label[b-gbtpnq4kwr] {
        font-size: 0.5rem;
        letter-spacing: 0.03em;
    }

    .honorific-matrix .kana-matrix-col[b-gbtpnq4kwr] {
        font-size: 0.54rem;
        padding-left: 0.28rem;
    }

    .honorific-matrix .kana-matrix-label[b-gbtpnq4kwr] {
        font-size: 0.58rem;
        padding: 0.38rem 0.18rem;
    }

    .kana-matrix-cell[b-gbtpnq4kwr] {
        min-height: 2.8rem;
        padding: 0.3rem 0.15rem;
        border-radius: 0.4rem;
    }

    .honorific-matrix .kana-matrix-cell[b-gbtpnq4kwr] {
        min-height: 3.7rem;
        padding: 0.45rem 0.42rem;
    }

    .kana-matrix-romaji[b-gbtpnq4kwr] {
        font-size: 0.5rem;
    }

    .kana-matrix-kana[b-gbtpnq4kwr] {
        font-size: 1.1rem;
    }

    .honorific-matrix-text[b-gbtpnq4kwr] {
        font-size: 0.68rem;
        text-align: center;
    }

    .honorific-matrix-row.is-default .honorific-matrix-text[b-gbtpnq4kwr] {
        font-size: 0.76rem;
    }

    .kanji-stage--compact[b-gbtpnq4kwr] {
        min-height: clamp(12rem, 32vh, 16rem);
    }

    .combo-row[b-gbtpnq4kwr] {
        gap: 0.48rem;
        padding-block: 0.54rem;
    }

    .combo-row .kana-label-pair[b-gbtpnq4kwr] {
        gap: 0.16rem;
    }

    .combo-row .example-main[b-gbtpnq4kwr] {
        font-size: clamp(1.82rem, 9.2vw, 2.38rem);
    }

    .combo-row--compact .example-main[b-gbtpnq4kwr] {
        font-size: clamp(1.58rem, 8vw, 2.08rem);
    }

    .combo-row .combo-row-small-kana[b-gbtpnq4kwr] {
        font-size: clamp(1.58rem, 8vw, 2.12rem);
    }

    .combo-row--compact .combo-row-small-kana[b-gbtpnq4kwr] {
        font-size: clamp(1.42rem, 7.4vw, 1.9rem);
    }

    .combo-row .kana-romaji-hint[b-gbtpnq4kwr] {
        font-size: 0.62rem;
    }

    .combo-row .modifier-arrow[b-gbtpnq4kwr] {
        min-width: 0.82rem;
        font-size: 0.72rem;
    }

    .kanji-compare-row[b-gbtpnq4kwr],
    .kanji-focus-panel[b-gbtpnq4kwr],
    .kanji-breakdown-row[b-gbtpnq4kwr],
    .kanji-reading-item[b-gbtpnq4kwr] {
        gap: 0.32rem;
        padding: 0.58rem 0.62rem;
        border-radius: 0.48rem;
    }

    .kanji-compare[b-gbtpnq4kwr],
    .kanji-breakdown[b-gbtpnq4kwr],
    .kanji-reading-list[b-gbtpnq4kwr],
    .kanji-word-panel[b-gbtpnq4kwr] {
        gap: 0.38rem;
    }

    .kanji-compare-label[b-gbtpnq4kwr],
    .kanji-panel-label[b-gbtpnq4kwr] {
        font-size: 0.58rem;
    }

    .lesson-ruby[b-gbtpnq4kwr] {
        font-size: clamp(0.92rem, 5vw, 1.25rem);
    }

    .lesson-ruby rt[b-gbtpnq4kwr] {
        font-size: 0.52rem;
    }

    .kanji-breakdown-line[b-gbtpnq4kwr] {
        justify-content: center;
        text-align: center;
        gap: 0.26rem;
        font-size: 0.78rem;
    }

    .kanji-word-pair[b-gbtpnq4kwr] {
        flex-direction: column;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        text-align: center;
        gap: 0.32rem;
        padding: 0.58rem 0.62rem;
        border-radius: 0.48rem;
    }

    .kanji-breakdown-line .ef-reading[b-gbtpnq4kwr] {
        font-size: 0.52rem;
    }

    .kanji-breakdown-line .ef-kana[b-gbtpnq4kwr] {
        font-size: 1rem;
    }

    .kanji-breakdown-translation[b-gbtpnq4kwr],
    .kanji-breakdown-text[b-gbtpnq4kwr],
    .kanji-reading-copy[b-gbtpnq4kwr],
    .kanji-translation[b-gbtpnq4kwr] {
        font-size: 0.72rem;
        line-height: 1.34;
    }

    .kanji-token-line[b-gbtpnq4kwr],
    .kanji-kana-reference[b-gbtpnq4kwr] {
        justify-content: center;
        text-align: center;
    }

    .kanji-word-pair .kanji-translation[b-gbtpnq4kwr] {
        text-align: center;
        white-space: normal;
    }

    .polite-summary-furi .ef-reading[b-gbtpnq4kwr] {
        font-size: 0.58rem;
    }

    .polite-summary-furi .ef-kana[b-gbtpnq4kwr] {
        font-size: clamp(1.25rem, 6.8vw, 1.76rem);
    }

    .polite-summary-example[b-gbtpnq4kwr] {
        font-size: clamp(0.9rem, 4.8vw, 1.18rem);
    }
}

@media (max-width: 480px) {
    .learn-page[b-gbtpnq4kwr] {
        --lesson-flow-panel-inline-padding: 0.42rem;
        --lesson-panel-card-pad-x: 0.48rem;
        --learn-title-size: clamp(1.08rem, 6vw, 1.42rem);
    }

    .lesson-row[b-gbtpnq4kwr],
    .ci-row[b-gbtpnq4kwr] {
        flex-direction: column;
        gap: 0.22rem;
    }

    .lr-label[b-gbtpnq4kwr],
    .ci-label[b-gbtpnq4kwr] {
        min-width: 0;
    }
}

/* Polite Expressions intro slides */

.polite-row[b-gbtpnq4kwr] {
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.polite-row .example-furi-sentence[b-gbtpnq4kwr] {
    justify-content: center;
}

.polite-row--formal[b-gbtpnq4kwr] {
    border-color: var(--accent-glow);
    background: var(--accent-subtle);
}

.ef-seg.polite-hl .ef-kana[b-gbtpnq4kwr],
.ef-seg.polite-hl .ef-reading[b-gbtpnq4kwr] {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.polite-summary[b-gbtpnq4kwr] {
    display: grid;
    gap: 0.5rem;
    width: 100%;
}

.polite-summary-row[b-gbtpnq4kwr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(0.45rem, 0.85dvh, 0.72rem);
    padding: 0.7rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
}

.polite-summary-furi[b-gbtpnq4kwr] {
    flex: 0 1 auto;
    width: 100%;
    justify-content: center;
}

.polite-summary-furi .ef-reading[b-gbtpnq4kwr] {
    font-size: clamp(0.86rem, 0.7rem + 0.24dvh, 1rem);
}

.polite-summary-furi .ef-kana[b-gbtpnq4kwr] {
    font-size: clamp(2rem, 1.35rem + 1.5dvh, 3rem);
}

.polite-summary-row--formal[b-gbtpnq4kwr] {
    border-color: var(--border-color);
    background: var(--bg-surface);
}

.polite-summary-label[b-gbtpnq4kwr] {
    width: 100%;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.35;
    color: var(--text-muted);
}

.polite-summary-example[b-gbtpnq4kwr] {
    width: 100%;
    text-align: center;
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    line-height: 1.35;
    color: var(--text-primary);
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
}

.onboarding-audio-error[b-gbtpnq4kwr] {
    margin: 0 auto 0.55rem;
    max-width: min(100%, 30rem);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}


/* /Pages/Profile.razor.rz.scp.css */
.profile-page[b-9i7r2le6m8] {
    width: 100%;
    min-height: calc(100vh - var(--topbar-height));
    height: calc(100dvh - var(--topbar-height));
    padding: 0;
    overflow: hidden;
}

.profile-layout[b-9i7r2le6m8] {
    width: 100%;
    min-height: 0;
    height: 100%;
}

.profile-loading[b-9i7r2le6m8] {
    text-align: center;
    padding: 4rem 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.profile-cascade[b-9i7r2le6m8] {
    animation: profile-in-b-9i7r2le6m8 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes profile-in-b-9i7r2le6m8 {
    0% {
        opacity: 0;
        transform: translateY(18px) scaleY(0.94) scaleX(1.01);
    }
    55% {
        opacity: 1;
        transform: translateY(-4px) scaleY(1.02) scaleX(0.995);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes profile-edit-field-in-b-9i7r2le6m8 {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
        filter: blur(8px);
    }
    58% {
        opacity: 1;
        transform: translateY(-2px) scale(1.006);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes profile-edit-display-in-b-9i7r2le6m8 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.992);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes profile-edit-actions-in-b-9i7r2le6m8 {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes profile-edit-feedback-in-b-9i7r2le6m8 {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes profile-pin-impact-b-9i7r2le6m8 {
    0% {
        opacity: 0.72;
        transform: translateY(10px) scale(0.94) skewX(-8deg);
        filter: saturate(0.9);
    }
    38% {
        opacity: 1;
        transform: translateY(-2px) scale(1.025) skewX(0deg);
        filter: saturate(1.18);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: saturate(1);
    }
}

@keyframes profile-pin-sheen-b-9i7r2le6m8 {
    0% {
        opacity: 0;
        transform: translateX(-145%) skewX(-24deg);
    }
    18% {
        opacity: 0.92;
    }
    100% {
        opacity: 0;
        transform: translateX(165%) skewX(-24deg);
    }
}

@keyframes profile-pin-button-snap-b-9i7r2le6m8 {
    0% {
        transform: translateY(5px) scale(0.88);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    }
    42% {
        transform: translateY(-1px) scale(1.09);
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    }
}

.profile-board[b-9i7r2le6m8] {
    width: 100%;
    min-height: 0;
    height: 100%;
}

.profile-board-grid[b-9i7r2le6m8] {
    display: grid;
    grid-template-columns: clamp(18.5rem, 25vw, 22.5rem) minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    align-items: stretch;
}

.profile-rail[b-9i7r2le6m8],
.profile-board-main[b-9i7r2le6m8] {
    min-width: 0;
}

.profile-surface[b-9i7r2le6m8] {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        color-mix(in srgb, var(--bg-surface) 90%, transparent);
    box-shadow: 0 28px 54px rgba(0, 0, 0, 0.22);
}

.profile-surface[b-9i7r2le6m8]::before {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -8rem;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 72%);
    filter: blur(10px);
}

.profile-surface > *[b-9i7r2le6m8] {
    position: relative;
    z-index: 1;
}

.profile-rail[b-9i7r2le6m8] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem 0.85rem 0.9rem 0.95rem;
    min-height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: hidden;
    overflow-y: auto;
}

.profile-board-main[b-9i7r2le6m8] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 100%;
    overflow: hidden;
    container-type: inline-size;
    container-name: profile-main;
}

.profile-field-label[b-9i7r2le6m8],
.profile-section-value[b-9i7r2le6m8],
.profile-summary-label[b-9i7r2le6m8],
.stat-label[b-9i7r2le6m8],
.section-count[b-9i7r2le6m8],
.title-equipped[b-9i7r2le6m8],
.next-goal-tag[b-9i7r2le6m8] {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-avatar-stage[b-9i7r2le6m8] {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    padding: 0;
}

.profile-avatar-ring[b-9i7r2le6m8] {
    --ring-size: min(100%, 11.25rem);
    position: relative;
    width: var(--ring-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0.78rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.11) 0 54%, transparent 55%),
        conic-gradient(from -90deg, color-mix(in srgb, var(--accent) 92%, white) 0 var(--xp-progress, 0%), rgba(255, 255, 255, 0.09) var(--xp-progress, 0%) 100%);
    box-shadow: 0 0 20px var(--accent-subtle), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.profile-avatar-ring[b-9i7r2le6m8]::before {
    content: "";
    position: absolute;
    inset: 0.4rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 68%);
}

.profile-avatar-core[b-9i7r2le6m8] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    padding: 0.3rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
        color-mix(in srgb, var(--bg-elevated) 92%, black);
}

.avatar-placeholder[b-9i7r2le6m8],
.avatar-img[b-9i7r2le6m8] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-placeholder[b-9i7r2le6m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-elevated) 86%, black);
    color: #fff;
    font-size: clamp(3rem, 8vw, 4rem);
    font-weight: 800;
}

.profile-avatar-level[b-9i7r2le6m8] {
    position: absolute;
    left: 50%;
    bottom: 0.95rem;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.22rem;
    transform: translateX(-50%);
    padding: 0.36rem 0.68rem 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(9, 11, 24, 0.76);
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(10px);
}

.profile-avatar-level-label[b-9i7r2le6m8] {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-avatar-level-value[b-9i7r2le6m8] {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
}

.profile-avatar-progress[b-9i7r2le6m8] {
    display: grid;
    gap: 0.18rem;
    justify-items: center;
    text-align: center;
}

.profile-progress-label[b-9i7r2le6m8] {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-progress-value[b-9i7r2le6m8] {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 800;
}

.profile-progress-meta[b-9i7r2le6m8] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.profile-nameplate[b-9i7r2le6m8] {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    text-align: center;
}

.profile-description-block[b-9i7r2le6m8] {
    display: grid;
    gap: 0.45rem;
}

.profile-name-slot[b-9i7r2le6m8] {
    width: 100%;
    min-width: 0;
    min-height: 3.6rem;
}

.display-name-shell[b-9i7r2le6m8],
.display-name-input[b-9i7r2le6m8] {
    width: 100%;
    min-height: 3.6rem;
    padding: 0.72rem 1rem;
    box-sizing: border-box;
    border-radius: 1rem;
}

.display-name-shell[b-9i7r2le6m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    text-align: center;
}

.display-name[b-9i7r2le6m8] {
    margin: 0;
    display: block;
    color: var(--text-primary);
    font-size: clamp(1.85rem, 2.55vw, 2.35rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.045em;
}

.display-name-input[b-9i7r2le6m8] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: var(--text-primary);
    font: inherit;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-align: center;
}

.display-name-input[b-9i7r2le6m8]::placeholder,
.profile-description-input[b-9i7r2le6m8]::placeholder {
    color: var(--text-muted);
}

.display-name-input:focus[b-9i7r2le6m8],
.profile-description-input:focus[b-9i7r2le6m8] {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.profile-title-slot[b-9i7r2le6m8] {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
    align-items: center;
}

.equipped-title[b-9i7r2le6m8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    background: transparent;
    color: color-mix(in srgb, var(--accent) 90%, white);
    font-size: 0.76rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.equipped-title--empty[b-9i7r2le6m8] {
    color: var(--text-muted);
}

.player-code[b-9i7r2le6m8] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

.profile-section-head[b-9i7r2le6m8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.profile-field-label[b-9i7r2le6m8],
.profile-section-value[b-9i7r2le6m8] {
    color: var(--text-muted);
}

.profile-inline-edit-trigger[b-9i7r2le6m8] {
    position: relative;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.profile-inline-edit-trigger:focus-visible[b-9i7r2le6m8] {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.profile-inline-edit-affordance[b-9i7r2le6m8] {
    position: absolute;
    top: 0.72rem;
    right: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.7rem;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    background: rgba(13, 16, 31, 0.82);
    color: color-mix(in srgb, var(--accent) 88%, white);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.profile-inline-edit-trigger:active[b-9i7r2le6m8] {
    transform: translateY(1px) scale(0.992);
}

.profile-inline-edit-trigger--name[b-9i7r2le6m8] {
    padding-inline: 3.25rem;
}

.profile-description-slot[b-9i7r2le6m8] {
    min-height: 7.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.profile-description-input[b-9i7r2le6m8],
.bio[b-9i7r2le6m8] {
    width: 100%;
    min-height: 6.1rem;
    max-height: 6.1rem;
    padding: 0.78rem 0.9rem;
    box-sizing: border-box;
    border-radius: 1.05rem;
}

.profile-description-input[b-9i7r2le6m8] {
    resize: none;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022)),
        color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
}

.bio[b-9i7r2le6m8] {
    display: block;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.022)),
        color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.profile-inline-edit-trigger--description[b-9i7r2le6m8] {
    appearance: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.bio-copy[b-9i7r2le6m8] {
    display: block;
    padding-right: 3.9rem;
    white-space: inherit;
}

.bio--placeholder[b-9i7r2le6m8] {
    color: var(--text-muted);
}

@media (hover: hover) and (pointer: fine) {
    .profile-inline-edit-trigger:hover[b-9i7r2le6m8] {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--accent) 26%, transparent);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.024)),
            color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    }

    .profile-inline-edit-trigger:hover .profile-inline-edit-affordance[b-9i7r2le6m8],
    .profile-inline-edit-trigger:focus-visible .profile-inline-edit-affordance[b-9i7r2le6m8] {
        opacity: 1;
        transform: translateY(0);
    }

    .stat-card .highlight-pin-btn[b-9i7r2le6m8],
    .ach-card .highlight-pin-btn[b-9i7r2le6m8],
    .profile-highlight-stat .highlight-pin-btn[b-9i7r2le6m8],
    .profile-highlight-achievement .highlight-pin-btn[b-9i7r2le6m8] {
        opacity: 0;
        visibility: hidden;
        transform: translateY(2px);
        pointer-events: none;
    }

    .stat-card:hover .highlight-pin-btn[b-9i7r2le6m8],
    .stat-card:focus-within .highlight-pin-btn[b-9i7r2le6m8],
    .ach-card.unlocked:hover .highlight-pin-btn[b-9i7r2le6m8],
    .ach-card.unlocked:focus-within .highlight-pin-btn[b-9i7r2le6m8],
    .profile-highlight-stat:hover .highlight-pin-btn[b-9i7r2le6m8],
    .profile-highlight-stat:focus-within .highlight-pin-btn[b-9i7r2le6m8],
    .profile-highlight-achievement:hover .highlight-pin-btn[b-9i7r2le6m8],
    .profile-highlight-achievement:focus-within .highlight-pin-btn[b-9i7r2le6m8] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.profile-description-meta[b-9i7r2le6m8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-height: 1.15rem;
}

.profile-description-help[b-9i7r2le6m8],
.profile-description-count[b-9i7r2le6m8] {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.profile-description-count[b-9i7r2le6m8] {
    font-weight: 700;
}

.profile-highlights-block[b-9i7r2le6m8] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.profile-highlights-head[b-9i7r2le6m8],
.profile-highlights-group-head[b-9i7r2le6m8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.profile-highlights-content[b-9i7r2le6m8] {
    display: grid;
    flex: 1 1 auto;
    gap: 0.55rem;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0.2rem;
    align-content: start;
    overscroll-behavior: contain;
}

.profile-highlights-group-head[b-9i7r2le6m8] {
    flex-wrap: wrap;
}

.profile-highlights-empty[b-9i7r2le6m8] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.profile-highlights-group[b-9i7r2le6m8] {
    display: grid;
    gap: 0.45rem;
}

.profile-highlights-group + .profile-highlights-group[b-9i7r2le6m8] {
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-highlight-stat-grid[b-9i7r2le6m8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.1rem, 1fr));
    gap: 0.38rem;
}

.profile-highlight-stat[b-9i7r2le6m8] {
    position: relative;
    display: grid;
    gap: 0.12rem;
    padding: 0.42rem 0.58rem 0.38rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.76rem;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.profile-highlight-stat-value[b-9i7r2le6m8] {
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.1;
}

.profile-highlight-stat-label[b-9i7r2le6m8] {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-highlight-achievement-list[b-9i7r2le6m8] {
    display: grid;
    gap: 0.36rem;
}

.profile-highlight-achievement[b-9i7r2le6m8] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.58rem;
    min-width: 0;
    padding: 0.42rem 3.05rem 0.42rem 0.56rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.74rem;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.profile-highlight-achievement-icon[b-9i7r2le6m8] {
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: 0.92rem;
    flex-shrink: 0;
}

.profile-highlight-achievement-name[b-9i7r2le6m8] {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.profile-highlight-pin-btn[b-9i7r2le6m8] {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    min-width: 2.85rem;
    min-height: 1.55rem;
    padding: 0.12rem 0.42rem;
    font-size: 0.56rem;
    letter-spacing: 0.07em;
}

.profile-highlight-stat > *[b-9i7r2le6m8],
.profile-highlight-achievement > *[b-9i7r2le6m8],
.stat-card > *[b-9i7r2le6m8],
.ach-card > *[b-9i7r2le6m8] {
    position: relative;
    z-index: 1;
}

.profile-summary-card[b-9i7r2le6m8],
.stat-card[b-9i7r2le6m8],
.title-card[b-9i7r2le6m8],
.ach-card[b-9i7r2le6m8],
.next-goal[b-9i7r2le6m8] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.profile-summary-grid[b-9i7r2le6m8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.profile-summary-card[b-9i7r2le6m8] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: auto;
    padding: 0.82rem 0.88rem;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.profile-summary-card:first-child[b-9i7r2le6m8] {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-summary-head[b-9i7r2le6m8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.profile-summary-label[b-9i7r2le6m8],
.stat-label[b-9i7r2le6m8],
.section-count[b-9i7r2le6m8] {
    color: var(--text-muted);
}

.profile-summary-link[b-9i7r2le6m8] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.18s ease;
}

.profile-summary-link:hover[b-9i7r2le6m8] {
    color: var(--accent);
}

.profile-rank-row[b-9i7r2le6m8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-rank-icon[b-9i7r2le6m8] {
    font-size: 1.75rem;
    line-height: 1;
}

.profile-rank-copy[b-9i7r2le6m8] {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.profile-summary-value[b-9i7r2le6m8] {
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 800;
}

.profile-summary-meta[b-9i7r2le6m8] {
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.4;
}

.profile-summary-support[b-9i7r2le6m8] {
    margin-top: auto;
    color: var(--text-muted);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.profile-progress-bar[b-9i7r2le6m8] {
    height: 0.55rem;
    margin-top: auto;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.profile-progress-bar-fill[b-9i7r2le6m8] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
    box-shadow: 0 0 12px var(--accent-glow);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.profile-edit-panel[b-9i7r2le6m8] {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.55rem;
    flex-shrink: 0;
}

.profile-edit-controls[b-9i7r2le6m8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    min-height: 3.1rem;
    align-content: start;
}

.profile-edit-controls--idle[b-9i7r2le6m8] {
    pointer-events: none;
}

.display-name-save-btn[b-9i7r2le6m8],
.display-name-cancel-btn[b-9i7r2le6m8] {
    min-height: 3.1rem;
    width: 100%;
    border-radius: 0.95rem;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    transform: translateY(0) scale(1);
    transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.display-name-cancel-btn[b-9i7r2le6m8] {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    color: var(--text-primary);
}

.display-name-save-btn[b-9i7r2le6m8] {
    border: 1px solid transparent;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent-secondary) 72%, var(--accent)));
    color: #fff;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 22%, transparent);
}

.display-name-cancel-btn:hover[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 32%, transparent);
    color: color-mix(in srgb, var(--accent) 88%, white);
}

.display-name-save-btn:hover[b-9i7r2le6m8] {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px color-mix(in srgb, var(--accent) 26%, transparent);
}

.display-name-save-btn:active[b-9i7r2le6m8],
.display-name-cancel-btn:active[b-9i7r2le6m8] {
    transform: translateY(1px) scale(0.985);
    filter: saturate(0.95);
}

.display-name-save-btn:disabled[b-9i7r2le6m8],
.display-name-cancel-btn:disabled[b-9i7r2le6m8],
.title-card:disabled[b-9i7r2le6m8] {
    opacity: 0.65;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.profile-feedback-slot[b-9i7r2le6m8] {
    display: flex;
    align-items: flex-start;
}

.display-name-message[b-9i7r2le6m8] {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.55rem 0.78rem;
    box-sizing: border-box;
    border-radius: 0.85rem;
    font-size: 0.76rem;
    font-weight: 700;
    animation: profile-edit-feedback-in-b-9i7r2le6m8 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.profile-board--editing .display-name-input[b-9i7r2le6m8],
.profile-board--editing .profile-description-input[b-9i7r2le6m8] {
    animation: profile-edit-field-in-b-9i7r2le6m8 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.profile-board--editing .profile-edit-controls[b-9i7r2le6m8] {
    animation: profile-edit-actions-in-b-9i7r2le6m8 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.profile-board--editing .display-name-save-btn[b-9i7r2le6m8] {
    animation: profile-edit-actions-in-b-9i7r2le6m8 280ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}

.profile-board--editing .display-name-cancel-btn[b-9i7r2le6m8] {
    animation: profile-edit-actions-in-b-9i7r2le6m8 280ms cubic-bezier(0.16, 1, 0.3, 1) 95ms both;
}

.profile-board--viewing .display-name-shell[b-9i7r2le6m8],
.profile-board--viewing .bio[b-9i7r2le6m8] {
    animation: profile-edit-display-in-b-9i7r2le6m8 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.display-name-message--good[b-9i7r2le6m8] {
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.22);
}

.display-name-message--error[b-9i7r2le6m8] {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.22);
}

.dashboard-section[b-9i7r2le6m8] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    min-height: 0;
}

.dashboard-section + .dashboard-section[b-9i7r2le6m8] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.section-head[b-9i7r2le6m8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.section-title[b-9i7r2le6m8] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 700;
}

.stats-grid[b-9i7r2le6m8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.3rem, 1fr));
    gap: 0.22rem 0.7rem;
}

.stat-card[b-9i7r2le6m8] {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.22rem;
    min-height: 3.7rem;
    padding: 0.46rem 3rem 0.5rem 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
    isolation: isolate;
}

.stat-card:hover[b-9i7r2le6m8] {
    transform: none;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.stat-card-head[b-9i7r2le6m8] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    padding-right: 0.2rem;
}

.stat-card--pinned[b-9i7r2le6m8] {
    border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.stat-card--linked[b-9i7r2le6m8] {
    border-bottom-color: color-mix(in srgb, var(--accent) 58%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.015);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 18%, transparent);
}

.stat-card--pin-burst[b-9i7r2le6m8],
.ach-card--pin-burst[b-9i7r2le6m8],
.profile-highlight-stat--pin-burst[b-9i7r2le6m8],
.profile-highlight-achievement--pin-burst[b-9i7r2le6m8] {
    animation: profile-pin-impact-b-9i7r2le6m8 620ms cubic-bezier(0.2, 1.22, 0.32, 1) both;
}

.stat-card--pin-burst[b-9i7r2le6m8]::after,
.ach-card--pin-burst[b-9i7r2le6m8]::after,
.profile-highlight-stat--pin-burst[b-9i7r2le6m8]::after,
.profile-highlight-achievement--pin-burst[b-9i7r2le6m8]::after {
    content: "";
    position: absolute;
    inset: -24% -44%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 34%,
        color-mix(in srgb, var(--accent) 82%, white) 49%,
        transparent 63%,
        transparent 100%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-145%) skewX(-24deg);
    animation: profile-pin-sheen-b-9i7r2le6m8 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.profile-highlight-stat--pin-burst[b-9i7r2le6m8],
.profile-highlight-achievement--pin-burst[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
        0 14px 28px color-mix(in srgb, var(--accent) 14%, transparent);
}

.profile-highlight-stat--linked[b-9i7r2le6m8],
.profile-highlight-achievement--linked[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, transparent), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.03);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
        0 12px 24px color-mix(in srgb, var(--accent) 12%, transparent);
}

.stat-value[b-9i7r2le6m8] {
    color: var(--text-primary);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.05;
}

.stat-label[b-9i7r2le6m8] {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    line-height: 1.35;
    padding-right: 0.25rem;
}

.stat-card .highlight-pin-btn[b-9i7r2le6m8] {
    position: absolute;
    top: 0.28rem;
    right: 0;
    z-index: 2;
    min-width: 2.15rem;
    min-height: 1.35rem;
    padding: 0.08rem 0.34rem;
    font-size: 0.51rem;
    letter-spacing: 0.07em;
}

.achievements-section[b-9i7r2le6m8],
.titles-section[b-9i7r2le6m8] {
    gap: 1rem;
}

.achievements-section[b-9i7r2le6m8] {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.next-goal[b-9i7r2le6m8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.9rem;
    border-style: dashed;
    border-radius: 0.9rem;
}

.next-goal-tag[b-9i7r2le6m8] {
    padding: 0.22rem 0.58rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
    color: color-mix(in srgb, var(--accent) 88%, white);
    flex-shrink: 0;
}

.next-goal-icon[b-9i7r2le6m8] {
    font-size: 1.35rem;
    flex-shrink: 0;
}

.next-goal-text[b-9i7r2le6m8] {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.next-goal-name[b-9i7r2le6m8] {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.next-goal-desc[b-9i7r2le6m8] {
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.achievements-grid[b-9i7r2le6m8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    grid-auto-rows: minmax(5.1rem, auto);
    gap: 0.75rem;
    overflow: auto;
    padding-right: 0.35rem;
    align-content: start;
    min-height: 0;
}

@container profile-main (max-width: 50rem) {
    .achievements-grid[b-9i7r2le6m8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ach-card[b-9i7r2le6m8] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.78rem 0.86rem;
    min-height: 5.1rem;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0.9rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    overflow: hidden;
    isolation: isolate;
}

.ach-card.unlocked[b-9i7r2le6m8] {
    padding-right: 4.2rem;
}

.ach-card.unlocked:hover[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
}

.ach-card.locked[b-9i7r2le6m8] {
    opacity: 0.46;
}

.ach-card--pinned[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.ach-card--linked[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(255, 255, 255, 0.025)),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    box-shadow: 0 12px 20px color-mix(in srgb, var(--accent) 12%, transparent);
}

.ach-card.locked.ach-card--linked[b-9i7r2le6m8] {
    opacity: 0.72;
}

.ach-icon-wrap[b-9i7r2le6m8] {
    width: 2.85rem;
    height: 2.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.ach-card.unlocked .ach-icon-wrap[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.ach-icon[b-9i7r2le6m8] {
    font-size: 1.3rem;
}

.ach-body[b-9i7r2le6m8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.08rem;
}

.ach-name[b-9i7r2le6m8] {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.ach-desc[b-9i7r2le6m8],
.ach-date[b-9i7r2le6m8] {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.ach-date[b-9i7r2le6m8] {
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 0.1rem;
}

.ach-side[b-9i7r2le6m8] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.32rem;
    min-height: 100%;
    flex-shrink: 0;
}

.highlight-pin-btn[b-9i7r2le6m8] {
    position: relative;
    min-width: 3.25rem;
    min-height: 1.8rem;
    padding: 0.18rem 0.52rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.16s ease, opacity 0.18s ease;
    overflow: hidden;
    isolation: isolate;
}

.ach-card .highlight-pin-btn[b-9i7r2le6m8] {
    position: absolute;
    top: 0.58rem;
    right: 0.6rem;
    z-index: 2;
    min-width: 2.35rem;
    min-height: 1.45rem;
    padding: 0.1rem 0.38rem;
    font-size: 0.53rem;
    letter-spacing: 0.07em;
}

.highlight-pin-btn:hover[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    color: color-mix(in srgb, var(--accent) 88%, white);
}

.highlight-pin-btn:active[b-9i7r2le6m8] {
    transform: translateY(1px) scale(0.98);
}

.highlight-pin-btn--pinned[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: color-mix(in srgb, var(--accent) 88%, white);
}

.highlight-pin-btn--burst[b-9i7r2le6m8] {
    animation: profile-pin-button-snap-b-9i7r2le6m8 460ms cubic-bezier(0.18, 1.2, 0.36, 1) both;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

.highlight-pin-btn--burst[b-9i7r2le6m8]::after {
    content: "";
    position: absolute;
    inset: -55% -24%;
    pointer-events: none;
    background: linear-gradient(
        112deg,
        transparent 0%,
        transparent 36%,
        color-mix(in srgb, var(--accent) 82%, white) 50%,
        transparent 64%,
        transparent 100%);
    opacity: 0;
    transform: translateX(-135%) skewX(-24deg);
    animation: profile-pin-sheen-b-9i7r2le6m8 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.highlight-pin-btn:disabled[b-9i7r2le6m8] {
    opacity: 0.42;
    cursor: default;
    transform: none;
}

.profile-highlight-pin-btn.highlight-pin-btn[b-9i7r2le6m8] {
    position: absolute;
    right: 0.35rem;
    z-index: 2;
    min-width: 2.35rem;
    min-height: 1.4rem;
    padding: 0.1rem 0.34rem;
    font-size: 0.53rem;
    letter-spacing: 0.07em;
}

.profile-highlight-stat .profile-highlight-pin-btn.highlight-pin-btn[b-9i7r2le6m8] {
    top: 0.45rem;
}

.profile-highlight-achievement .profile-highlight-pin-btn.highlight-pin-btn[b-9i7r2le6m8] {
    top: 50%;
    margin-top: -0.775rem;
}

.titles-list[b-9i7r2le6m8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.title-card[b-9i7r2le6m8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.48rem 0.72rem;
    border-radius: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.title-card.equipped[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.title-card.locked[b-9i7r2le6m8] {
    opacity: 0.42;
}

.title-card.unlocked:hover[b-9i7r2le6m8] {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
}

.title-label[b-9i7r2le6m8] {
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 700;
}

.title-equipped[b-9i7r2le6m8] {
    color: color-mix(in srgb, var(--accent) 88%, white);
}

@media (max-width: 980px) {
    .profile-board-grid[b-9i7r2le6m8] {
        grid-template-columns: minmax(17rem, 20.5rem) minmax(0, 1fr);
    }
}

@media (max-width: 920px) {
    .profile-page[b-9i7r2le6m8] {
        min-height: calc(100dvh - var(--topbar-height));
        height: auto;
        overflow: visible;
    }

    .profile-layout[b-9i7r2le6m8],
    .profile-board[b-9i7r2le6m8] {
        height: auto;
        min-height: 0;
    }

    .profile-board-grid[b-9i7r2le6m8] {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        align-items: start;
    }

    .profile-rail[b-9i7r2le6m8] {
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        overflow: visible;
    }

    .profile-board-main[b-9i7r2le6m8] {
        grid-template-rows: auto;
        min-height: 0;
        overflow: visible;
    }

    .profile-highlights-block[b-9i7r2le6m8],
    .profile-highlights-content[b-9i7r2le6m8],
    .achievements-section[b-9i7r2le6m8],
    .achievements-grid[b-9i7r2le6m8] {
        min-height: 0;
        overflow: visible;
    }

    .profile-highlights-content[b-9i7r2le6m8],
    .achievements-grid[b-9i7r2le6m8] {
        padding-right: 0;
        overscroll-behavior: auto;
    }
}

@media (max-width: 720px) {
    .profile-rail[b-9i7r2le6m8],
    .dashboard-section[b-9i7r2le6m8] {
        padding: 0.8rem;
    }

    .profile-summary-grid[b-9i7r2le6m8] {
        grid-template-columns: 1fr;
    }

    .profile-summary-card:first-child[b-9i7r2le6m8] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .profile-title-slot[b-9i7r2le6m8] {
        width: 100%;
        justify-content: center;
    }

    .equipped-title[b-9i7r2le6m8] {
        width: 100%;
        min-height: 0;
        justify-content: center;
    }

    .stats-grid[b-9i7r2le6m8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.2rem 0.6rem;
    }

    .profile-highlight-stat-grid[b-9i7r2le6m8] {
        grid-template-columns: 1fr;
    }

    .achievements-grid[b-9i7r2le6m8] {
        grid-template-columns: 1fr;
    }

    .next-goal[b-9i7r2le6m8] {
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .profile-surface[b-9i7r2le6m8] {
        border-radius: 1rem;
    }

    .profile-rail[b-9i7r2le6m8] {
        gap: 0.6rem;
        padding: 0.68rem 0.62rem 0.75rem;
    }

    .dashboard-section[b-9i7r2le6m8] {
        gap: 0.62rem;
        padding: 0.72rem 0.62rem;
    }

    .profile-nameplate[b-9i7r2le6m8] {
        gap: 0.24rem;
    }

    .profile-title-slot[b-9i7r2le6m8] {
        min-height: 0;
    }

    .equipped-title[b-9i7r2le6m8] {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .player-code[b-9i7r2le6m8] {
        font-size: 0.62rem;
        letter-spacing: 0.09em;
    }

    .profile-name-slot[b-9i7r2le6m8] {
        min-height: 2.55rem;
    }

    .display-name-shell[b-9i7r2le6m8],
    .display-name-input[b-9i7r2le6m8] {
        min-height: 2.55rem;
        padding: 0.42rem 0.62rem;
        border-radius: 0.74rem;
    }

    .profile-avatar-ring[b-9i7r2le6m8] {
        --ring-size: min(100%, 7.35rem);
        padding: 0.52rem;
    }

    .profile-avatar-ring[b-9i7r2le6m8]::before {
        inset: 0.28rem;
    }

    .profile-avatar-core[b-9i7r2le6m8] {
        padding: 0.22rem;
    }

    .avatar-placeholder[b-9i7r2le6m8] {
        font-size: 2.35rem;
    }

    .profile-avatar-stage[b-9i7r2le6m8] {
        gap: 0.34rem;
    }

    .profile-avatar-level[b-9i7r2le6m8] {
        bottom: 0.5rem;
        gap: 0.16rem;
        padding: 0.22rem 0.46rem 0.25rem;
    }

    .profile-avatar-level-label[b-9i7r2le6m8] {
        font-size: 0.5rem;
    }

    .profile-avatar-level-value[b-9i7r2le6m8] {
        font-size: 0.72rem;
    }

    .profile-avatar-progress[b-9i7r2le6m8] {
        gap: 0.08rem;
    }

    .profile-progress-value[b-9i7r2le6m8] {
        font-size: 0.78rem;
    }

    .profile-progress-meta[b-9i7r2le6m8] {
        font-size: 0.64rem;
    }

    .profile-inline-edit-trigger--name[b-9i7r2le6m8] {
        padding-inline: 1.6rem;
    }

    .display-name[b-9i7r2le6m8] {
        font-size: 1.38rem;
        letter-spacing: -0.025em;
    }

    .display-name-input[b-9i7r2le6m8] {
        font-size: 1.18rem;
    }

    .profile-inline-edit-affordance[b-9i7r2le6m8] {
        display: none;
    }

    .profile-field-label[b-9i7r2le6m8],
    .profile-section-value[b-9i7r2le6m8],
    .profile-summary-label[b-9i7r2le6m8],
    .stat-label[b-9i7r2le6m8],
    .section-count[b-9i7r2le6m8],
    .title-equipped[b-9i7r2le6m8],
    .next-goal-tag[b-9i7r2le6m8] {
        font-size: 0.56rem;
        letter-spacing: 0.07em;
    }

    .profile-description-block[b-9i7r2le6m8] {
        gap: 0.32rem;
    }

    .profile-description-slot[b-9i7r2le6m8] {
        min-height: 4.4rem;
        gap: 0.24rem;
    }

    .profile-description-input[b-9i7r2le6m8],
    .bio[b-9i7r2le6m8] {
        min-height: 4.25rem;
        max-height: 4.25rem;
        padding: 0.56rem 0.64rem;
        border-radius: 0.76rem;
        font-size: 0.78rem;
        line-height: 1.42;
    }

    .bio-copy[b-9i7r2le6m8] {
        padding-right: 0;
    }

    .profile-description-meta[b-9i7r2le6m8] {
        min-height: 0;
        gap: 0.35rem;
    }

    .profile-description-help[b-9i7r2le6m8],
    .profile-description-count[b-9i7r2le6m8] {
        font-size: 0.6rem;
    }

    .profile-highlights-block[b-9i7r2le6m8] {
        gap: 0.45rem;
    }

    .profile-highlights-content[b-9i7r2le6m8] {
        gap: 0.38rem;
    }

    .profile-highlights-empty[b-9i7r2le6m8] {
        font-size: 0.68rem;
        line-height: 1.42;
    }

    .profile-highlight-stat-grid[b-9i7r2le6m8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
    }

    .profile-highlight-stat[b-9i7r2le6m8] {
        gap: 0.08rem;
        padding: 0.34rem 0.42rem 0.32rem;
        border-radius: 0.58rem;
    }

    .profile-highlight-stat-value[b-9i7r2le6m8] {
        font-size: 0.8rem;
    }

    .profile-highlight-stat-label[b-9i7r2le6m8] {
        font-size: 0.5rem;
        letter-spacing: 0.06em;
    }

    .profile-highlight-achievement-list[b-9i7r2le6m8] {
        gap: 0.28rem;
    }

    .profile-highlight-achievement[b-9i7r2le6m8] {
        gap: 0.42rem;
        padding: 0.34rem 2.6rem 0.34rem 0.42rem;
        border-radius: 0.58rem;
    }

    .profile-highlight-achievement-icon[b-9i7r2le6m8] {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.48rem;
        font-size: 0.74rem;
    }

    .profile-highlight-achievement-name[b-9i7r2le6m8] {
        font-size: 0.68rem;
    }

    .profile-highlight-pin-btn.highlight-pin-btn[b-9i7r2le6m8] {
        min-width: 2rem;
        min-height: 1.18rem;
        padding: 0.06rem 0.28rem;
        font-size: 0.46rem;
    }

    .profile-highlight-stat .profile-highlight-pin-btn.highlight-pin-btn[b-9i7r2le6m8] {
        top: 0.32rem;
    }

    .profile-highlight-achievement .profile-highlight-pin-btn.highlight-pin-btn[b-9i7r2le6m8] {
        margin-top: -0.59rem;
    }

    .profile-summary-grid[b-9i7r2le6m8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-summary-card[b-9i7r2le6m8] {
        gap: 0.3rem;
        padding: 0.54rem 0.58rem;
    }

    .profile-summary-card:first-child[b-9i7r2le6m8] {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: none;
    }

    .profile-summary-head[b-9i7r2le6m8] {
        gap: 0.35rem;
        align-items: flex-start;
    }

    .profile-summary-link[b-9i7r2le6m8] {
        font-size: 0.56rem;
    }

    .profile-rank-row[b-9i7r2le6m8] {
        gap: 0.42rem;
    }

    .profile-rank-icon[b-9i7r2le6m8] {
        font-size: 1.2rem;
    }

    .profile-summary-value[b-9i7r2le6m8] {
        font-size: 0.78rem;
    }

    .profile-summary-meta[b-9i7r2le6m8] {
        font-size: 0.62rem;
        line-height: 1.32;
    }

    .profile-summary-support[b-9i7r2le6m8] {
        font-size: 0.52rem;
        letter-spacing: 0.04em;
    }

    .profile-progress-bar[b-9i7r2le6m8] {
        height: 0.38rem;
    }

    .profile-edit-controls[b-9i7r2le6m8] {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        min-height: 0;
    }

    .display-name-save-btn[b-9i7r2le6m8],
    .display-name-cancel-btn[b-9i7r2le6m8] {
        min-height: 2.35rem;
        border-radius: 0.72rem;
        font-size: 0.74rem;
    }

    .display-name-message[b-9i7r2le6m8] {
        min-height: 0;
        padding: 0.46rem 0.58rem;
        border-radius: 0.68rem;
        font-size: 0.68rem;
    }

    .section-title[b-9i7r2le6m8] {
        font-size: 0.88rem;
    }

    .stats-grid[b-9i7r2le6m8] {
        gap: 0.1rem 0.45rem;
    }

    .stat-card[b-9i7r2le6m8] {
        gap: 0.14rem;
        min-height: 3rem;
        padding: 0.34rem 2.25rem 0.36rem 0;
    }

    .stat-value[b-9i7r2le6m8] {
        font-size: 0.86rem;
    }

    .stat-card .highlight-pin-btn[b-9i7r2le6m8],
    .ach-card .highlight-pin-btn[b-9i7r2le6m8] {
        min-width: 2rem;
        min-height: 1.18rem;
        padding: 0.06rem 0.28rem;
        font-size: 0.46rem;
    }

    .achievements-section[b-9i7r2le6m8],
    .titles-section[b-9i7r2le6m8] {
        gap: 0.62rem;
    }

    .titles-list[b-9i7r2le6m8] {
        gap: 0.34rem;
    }

    .title-card[b-9i7r2le6m8] {
        gap: 0.32rem;
        padding: 0.34rem 0.46rem;
        border-radius: 0.58rem;
    }

    .title-label[b-9i7r2le6m8] {
        font-size: 0.64rem;
    }

    .next-goal[b-9i7r2le6m8] {
        gap: 0.45rem;
        padding: 0.48rem 0.54rem;
        border-radius: 0.66rem;
    }

    .next-goal-tag[b-9i7r2le6m8] {
        padding: 0.15rem 0.38rem;
    }

    .next-goal-icon[b-9i7r2le6m8] {
        font-size: 1.06rem;
    }

    .next-goal-name[b-9i7r2le6m8] {
        font-size: 0.76rem;
    }

    .next-goal-desc[b-9i7r2le6m8] {
        font-size: 0.62rem;
        line-height: 1.35;
    }

    .achievements-grid[b-9i7r2le6m8] {
        gap: 0.42rem;
        grid-auto-rows: minmax(4rem, auto);
    }

    .ach-card[b-9i7r2le6m8] {
        gap: 0.46rem;
        min-height: 4rem;
        padding: 0.54rem 0.58rem;
        border-radius: 0.68rem;
    }

    .ach-card.unlocked[b-9i7r2le6m8] {
        padding-right: 3.25rem;
    }

    .ach-card .highlight-pin-btn[b-9i7r2le6m8] {
        top: 0.42rem;
        right: 0.42rem;
    }

    .ach-icon-wrap[b-9i7r2le6m8] {
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 0.6rem;
    }

    .ach-icon[b-9i7r2le6m8] {
        font-size: 1.02rem;
    }

    .ach-name[b-9i7r2le6m8] {
        font-size: 0.76rem;
    }

    .ach-desc[b-9i7r2le6m8],
    .ach-date[b-9i7r2le6m8] {
        font-size: 0.62rem;
        line-height: 1.34;
    }

    .ach-side[b-9i7r2le6m8] {
        gap: 0.24rem;
    }
}

@media (max-width: 360px) {
    .profile-rail[b-9i7r2le6m8],
    .dashboard-section[b-9i7r2le6m8] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .profile-avatar-ring[b-9i7r2le6m8] {
        --ring-size: min(100%, 6.6rem);
    }

    .display-name[b-9i7r2le6m8] {
        font-size: 1.24rem;
    }

    .profile-summary-grid[b-9i7r2le6m8] {
        grid-template-columns: 1fr;
    }

    .profile-summary-card:first-child[b-9i7r2le6m8] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .profile-highlight-stat-grid[b-9i7r2le6m8],
    .stats-grid[b-9i7r2le6m8] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-cascade[b-9i7r2le6m8],
    .stat-card[b-9i7r2le6m8],
    .ach-card[b-9i7r2le6m8],
    .profile-highlight-stat[b-9i7r2le6m8],
    .profile-highlight-achievement[b-9i7r2le6m8],
    .title-card[b-9i7r2le6m8],
    .display-name-shell[b-9i7r2le6m8],
    .bio[b-9i7r2le6m8],
    .display-name-input[b-9i7r2le6m8],
    .profile-description-input[b-9i7r2le6m8],
    .display-name-message[b-9i7r2le6m8],
    .display-name-save-btn[b-9i7r2le6m8],
    .display-name-cancel-btn[b-9i7r2le6m8],
    .profile-edit-controls[b-9i7r2le6m8],
    .highlight-pin-btn[b-9i7r2le6m8] {
        animation: none;
        transition: none;
    }

    .stat-card--pin-burst[b-9i7r2le6m8]::after,
    .ach-card--pin-burst[b-9i7r2le6m8]::after,
    .profile-highlight-stat--pin-burst[b-9i7r2le6m8]::after,
    .profile-highlight-achievement--pin-burst[b-9i7r2le6m8]::after,
    .highlight-pin-btn--burst[b-9i7r2le6m8]::after {
        animation: none;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
.settings-page[b-xw681uueuu] {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    gap: 1.15rem;
    padding: 0 1.5rem 3rem;
}

.settings-cascade[b-xw681uueuu] {
    opacity: 0;
    animation: settings-in-b-xw681uueuu 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
}

@keyframes settings-in-b-xw681uueuu {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.settings-hero[b-xw681uueuu],
.settings-list[b-xw681uueuu] {
    border-radius: 1.35rem;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-color));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
        color-mix(in srgb, var(--bg-surface) 88%, transparent);
    box-shadow: 0 26px 58px rgba(0, 0, 0, 0.18);
}

.settings-hero[b-xw681uueuu] {
    position: relative;
    overflow: hidden;
    padding: 1.75rem;
    display: grid;
    gap: 1rem;
}

.settings-hero[b-xw681uueuu]::before {
    content: "";
    position: absolute;
    top: -5rem;
    right: -3rem;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-secondary) 16%, transparent), transparent 72%);
    filter: blur(18px);
    pointer-events: none;
}

.settings-kicker[b-xw681uueuu],
.settings-card-label[b-xw681uueuu] {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.settings-kicker[b-xw681uueuu] {
    position: relative;
    width: fit-content;
    padding: 0.4rem 0.78rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: color-mix(in srgb, var(--accent) 80%, white);
    font-size: 0.67rem;
    font-weight: 800;
}

.settings-title[b-xw681uueuu],
.settings-copy[b-xw681uueuu],
.settings-actions[b-xw681uueuu] {
    position: relative;
    z-index: 1;
}

.settings-title[b-xw681uueuu] {
    margin: 0;
    max-width: 15ch;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}

.settings-copy[b-xw681uueuu],
.settings-card p[b-xw681uueuu] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.settings-actions[b-xw681uueuu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.settings-btn-primary[b-xw681uueuu],
.settings-btn-secondary[b-xw681uueuu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.95rem;
    padding: 0.8rem 1.15rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.settings-btn-primary[b-xw681uueuu] {
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), color-mix(in srgb, var(--accent-secondary) 72%, var(--accent)));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 24%, transparent);
}

.settings-btn-secondary[b-xw681uueuu] {
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.settings-btn-primary:hover[b-xw681uueuu],
.settings-btn-secondary:hover[b-xw681uueuu] {
    transform: translateY(-1px);
    text-decoration: none;
}

.settings-list[b-xw681uueuu] {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
}

.settings-card[b-xw681uueuu] {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-card-label[b-xw681uueuu] {
    font-size: 0.63rem;
    font-weight: 800;
    color: var(--text-muted);
}

.settings-card strong[b-xw681uueuu] {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.1rem;
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .settings-page[b-xw681uueuu] {
        padding-inline: 1rem;
    }

    .settings-hero[b-xw681uueuu] {
        padding: 1.2rem;
    }

    .settings-actions[b-xw681uueuu] {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-cascade[b-xw681uueuu],
    .settings-btn-primary[b-xw681uueuu],
    .settings-btn-secondary[b-xw681uueuu] {
        animation: none;
        transition: none;
    }
}
/* /Pages/Shop.razor.rz.scp.css */
/* ?? Page ??????????????????????????????????????? */

.shop-page[b-arcxflw868] {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.shop-page[b-arcxflw868]::before,
.shop-page[b-arcxflw868]::after {
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
}

.shop-page[b-arcxflw868]::before {
    top: 1rem;
    right: 6%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0) 72%);
}

.shop-page[b-arcxflw868]::after {
    top: 9rem;
    left: 4%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 74%);
}

.shop-page > *[b-arcxflw868] {
    position: relative;
    z-index: 1;
}

.shop-loading[b-arcxflw868] {
    text-align: center;
    padding: 4rem 0;
    color: var(--text-muted);
}

/* ?? Category switch animation ????????????????? */

.shop-section-body[b-arcxflw868] {
    animation: shop-section-in-b-arcxflw868 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes shop-section-in-b-arcxflw868 {
    from {
        opacity: 0;
        transform: translateY(12px) scaleY(0.9) scaleX(1.03);
        filter: blur(4px);
    }
    55% {
        opacity: 1;
        transform: translateY(-3px) scaleY(1.03) scaleX(0.99);
        filter: blur(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ?? Cascade ??????????????????????????????????? */

.cascade-in[b-arcxflw868] {
    opacity: 0;
    animation: shop-in-b-arcxflw868 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--delay, 0ms);
    will-change: transform, opacity, filter;
}

@keyframes shop-in-b-arcxflw868 {
    from { opacity: 0; transform: translateY(14px) scaleY(0.9) scaleX(1.03); filter: blur(4px); }
    55%  { opacity: 1; transform: translateY(-3px) scaleY(1.03) scaleX(0.99); filter: blur(0); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ?? Category pills ???????????????????????????? */

.shop-category-strip[b-arcxflw868] {
    padding-top: 0.1rem;
}

.sale-tag[b-arcxflw868] {
position: absolute;
top: 0.5rem;
left: 0.5rem;
    padding: 0.28rem 0.54rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 2;
}

.sale-tag-inline[b-arcxflw868] {
    top: 0.5rem;
}

/* ?? Content area ?????????????????????????????? */

.shop-content[b-arcxflw868] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
    padding: 1.15rem 1.2rem 1.25rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(124, 58, 237, 0.12);
    background:
        linear-gradient(180deg, rgba(20, 20, 31, 0.98), rgba(13, 13, 22, 0.98)),
        radial-gradient(circle at top right, rgba(124, 58, 237, 0.12), transparent 35%);
    box-shadow: 0 20px 34px rgba(0, 0, 0, 0.2);
}

.content-header[b-arcxflw868] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.2rem;
}

.content-header-actions[b-arcxflw868] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.content-link-btn[b-arcxflw868] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 1.55rem;
    padding: 0 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.28);
    background: rgba(124, 58, 237, 0.1);
    color: #d9c2ff;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    font-family: inherit;
    white-space: nowrap;
}

.content-heading[b-arcxflw868] {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}

.empty-message[b-arcxflw868] {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 1rem 0.2rem;
}

.owned-stack-chip[b-arcxflw868] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.15rem;
    padding: 0.24rem 0.52rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 700;
}


/* ?? Featured grid ????????????????????????????? */

.featured-grid[b-arcxflw868] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.6rem;
}

.featured-card[b-arcxflw868] {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0;
padding: 0.5rem 0.5rem 0.6rem;
border-radius: 0.9rem;
overflow: hidden;
background:
        linear-gradient(180deg, rgba(30, 30, 48, 0.96), rgba(19, 19, 31, 0.98)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--r-color, var(--accent)) 22%, transparent), transparent 44%);
    border: 1px solid color-mix(in srgb, var(--r-color, var(--border-color)) 72%, rgba(255,255,255,0.06));
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 20px var(--r-glow, transparent);
    cursor: default;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.featured-card[b-arcxflw868]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.06), transparent 32%, transparent 70%, rgba(255, 255, 255, 0.03));
    pointer-events: none;
}

.featured-card:hover:not(:disabled)[b-arcxflw868] {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 24px 42px rgba(0, 0, 0, 0.3), 0 0 32px var(--r-glow, transparent);
}

.featured-card:disabled[b-arcxflw868] { cursor: default; }

.featured-card.owned[b-arcxflw868] {
    opacity: 0.82;
}

.featured-card.equipped[b-arcxflw868] {
    opacity: 1;
    border-color: var(--success);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.28), 0 0 24px rgba(34, 197, 94, 0.24);
}

.featured-card.previewing[b-arcxflw868],
.item-card.previewing[b-arcxflw868] {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.28), 0 0 26px var(--accent-glow);
}

.fc-icon[b-arcxflw868] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 120px;
    border-radius: 0.65rem;
    font-size: 3.4rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.025);
}

.fc-name[b-arcxflw868] {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.fc-desc[b-arcxflw868] {
    display: none;
}

.fc-footer[b-arcxflw868] {
    margin-top: 0.15rem;
    padding-top: 0;
}

/* ?? Rarity tag ???????????????????????????????? */

.rarity-tag[b-arcxflw868] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--r-color, var(--text-muted)) 60%, rgba(255,255,255,0.06));
    background: rgba(8, 8, 14, 0.34);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--r-color, var(--text-muted));
    opacity: 0.85;
}

.rarity-common .rarity-tag[b-arcxflw868] { display: none; }

/* ?? Item grid ????????????????????????????????? */

.item-grid[b-arcxflw868] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.55rem;
}

.item-card[b-arcxflw868] {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
padding: 0.5rem 0.5rem 0.6rem;
border-radius: 0.85rem;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(27, 27, 42, 0.96), rgba(17, 17, 28, 0.98)),
        linear-gradient(135deg, color-mix(in srgb, var(--r-color, transparent) 12%, transparent), transparent 55%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.item-card[b-arcxflw868]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255,255,255,0.05), transparent 35%, transparent 70%, rgba(255,255,255,0.02));
    pointer-events: none;
}

.item-card:hover:not(:disabled)[b-arcxflw868] {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--r-color, var(--accent));
    box-shadow: 0 20px 32px rgba(0, 0, 0, 0.24), 0 0 22px var(--r-glow, var(--accent-glow));
}

.item-card:disabled[b-arcxflw868] { cursor: default; }

.item-card.owned[b-arcxflw868] { opacity: 0.55; }

.item-card.equipped[b-arcxflw868] {
    opacity: 1;
    border-color: var(--success);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
}

.item-card.rarity-rare[b-arcxflw868]      { border-color: rgba(59, 130, 246, 0.25); }
.item-card.rarity-epic[b-arcxflw868]       { border-color: rgba(168, 85, 247, 0.25); }
.item-card.rarity-legendary[b-arcxflw868]  { border-color: rgba(245, 158, 11, 0.3); }

.item-card.previewing[b-arcxflw868] {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.28), 0 0 26px var(--accent-glow);
}

.ic-top[b-arcxflw868] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
}

.ic-icon[b-arcxflw868] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    line-height: 1;
}

.rarity-dot[b-arcxflw868] {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--r-color, transparent);
}

.rarity-common .rarity-dot[b-arcxflw868] { display: none; }

.ic-name[b-arcxflw868] {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ic-desc[b-arcxflw868] {
    display: none;
}

.ic-footer[b-arcxflw868] {
    margin-top: 0.15rem;
    padding-top: 0;
}

.card-action-row[b-arcxflw868] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.3rem;
}

.card-action-btn[b-arcxflw868] {
    align-self: flex-start;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(168, 85, 247, 0.38);
    background: rgba(124, 58, 237, 0.18);
    color: #e7dbff;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.16s ease;
}

.card-preview-btn[b-arcxflw868] {
    border-color: rgba(59, 130, 246, 0.36);
    background: rgba(59, 130, 246, 0.14);
    color: #bfdbfe;
}

.card-preview-btn.previewing[b-arcxflw868] {
    border-color: rgba(245, 158, 11, 0.36);
    background: rgba(245, 158, 11, 0.13);
    color: #fbbf24;
}

.card-action-btn:hover:not(:disabled)[b-arcxflw868] {
    filter: brightness(1.08);
}

.card-action-btn:disabled[b-arcxflw868] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ?? Badges ???????????????????????????????????? */

.badge[b-arcxflw868] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.28rem 0.68rem;
    border-radius: 999px;
}

.badge-owned[b-arcxflw868] {
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
}

.badge-equipped[b-arcxflw868] {
    color: #fff;
    background: var(--success);
    border: 1px solid var(--success);
}

.badge-owned-equippable[b-arcxflw868] {
    color: var(--accent);
    border: 1px solid var(--accent-glow);
    background: var(--accent-subtle);
}

/* ?? Price tag ????????????????????????????????? */

.price-tag[b-arcxflw868] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.24rem 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #f59e0b;
}

.price-stack[b-arcxflw868] {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    line-height: 1;
    white-space: nowrap;
}

.price-stack.unaffordable[b-arcxflw868] {
    opacity: 0.35;
}

.price-tag-original[b-arcxflw868] {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.66rem;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.price-tag.unaffordable[b-arcxflw868] {
    opacity: 0.35;
}

/* ?? Responsive ???????????????????????????????? */

@media (max-width: 640px) {
    .featured-grid[b-arcxflw868] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.38rem;
    }

    .featured-card[b-arcxflw868] {
        padding: 0.36rem 0.36rem 0.44rem;
        border-radius: 0.72rem;
        min-width: 0;
    }

    .fc-icon[b-arcxflw868]  {
        min-height: 62px;
        border-radius: 0.52rem;
        font-size: 2.1rem;
    }
    .fc-name[b-arcxflw868]  {
        font-size: 0.68rem;
        margin-top: 0.28rem;
    }

    .item-grid[b-arcxflw868] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.38rem;
    }

    .item-card[b-arcxflw868] {
        padding: 0.36rem 0.36rem 0.44rem;
        border-radius: 0.72rem;
        min-width: 0;
    }

    .ic-top[b-arcxflw868] {
        min-height: 58px;
    }

    .ic-icon[b-arcxflw868] {
        font-size: 2rem;
    }

    .ic-name[b-arcxflw868] {
        font-size: 0.68rem;
        margin-top: 0.24rem;
    }

    .sale-tag[b-arcxflw868],
    .rarity-tag[b-arcxflw868] {
        top: 0.36rem;
        padding: 0.18rem 0.34rem;
        font-size: 0.5rem;
        letter-spacing: 0.06em;
    }

    .sale-tag[b-arcxflw868] {
        left: 0.36rem;
    }

    .rarity-tag[b-arcxflw868] {
        right: 0.36rem;
    }

    .fc-footer[b-arcxflw868],
    .ic-footer[b-arcxflw868] {
        margin-top: 0.08rem;
    }

    .price-tag[b-arcxflw868] {
        padding: 0.16rem 0;
        font-size: 0.68rem;
    }

    .price-tag-original[b-arcxflw868] {
        font-size: 0.58rem;
    }

    .badge[b-arcxflw868] {
        padding: 0.2rem 0.46rem;
        font-size: 0.58rem;
    }

    .card-action-row[b-arcxflw868] {
        gap: 0.24rem;
        margin-top: 0.22rem;
    }

    .card-action-btn[b-arcxflw868] {
        padding: 0.24rem 0.46rem;
        font-size: 0.6rem;
    }

    .content-header[b-arcxflw868] {
        flex-wrap: nowrap;
        gap: 0.6rem;
    }

    .content-header-actions[b-arcxflw868] {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .content-header > div:first-child[b-arcxflw868] {
        min-width: 0;
    }

    .content-heading[b-arcxflw868] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shop-page[b-arcxflw868] {
        padding: 0 0 2.5rem;
        gap: 0.9rem;
    }

    .shop-content[b-arcxflw868] {
        padding: 0.9rem 0.85rem 1rem;
        gap: 0.85rem;
    }

    .content-heading[b-arcxflw868] {
        font-size: 1.05rem;
    }

}

/* ?? Small phone (<= 380px): tighter spacing ???????? */

@media (max-width: 380px) {
    .shop-page[b-arcxflw868] {
        padding: 0 0 2rem;
        gap: 0.7rem;
    }

    .shop-content[b-arcxflw868] {
        padding: 0.65rem 0.6rem 0.75rem;
        border-radius: 1rem;
        gap: 0.65rem;
    }

    .content-heading[b-arcxflw868] {
        font-size: 0.95rem;
    }

    .fc-icon[b-arcxflw868] {
        min-height: 56px;
        font-size: 1.95rem;
    }

    .ic-top[b-arcxflw868] {
        min-height: 54px;
    }

    .ic-icon[b-arcxflw868] {
        font-size: 1.85rem;
    }
}

@media (max-width: 319px) {
    .featured-grid[b-arcxflw868],
    .item-grid[b-arcxflw868] {
        grid-template-columns: 1fr;
    }
}

/* ?? Medium phone (381px - 600px): 2-column cards ?? */

@media (min-width: 381px) and (max-width: 640px) {
    .featured-grid[b-arcxflw868] {
        grid-template-columns: repeat(2, 1fr);
    }

    .item-grid[b-arcxflw868] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ?? Tablet (641px - 900px) ???????????????????? */

@media (min-width: 641px) and (max-width: 900px) {
    .featured-grid[b-arcxflw868] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.55rem;
    }

    .item-grid[b-arcxflw868] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.5rem;
    }

    .shop-content[b-arcxflw868] {
        padding: 1rem 1rem 1.1rem;
    }
}
/* /Pages/TypeInJapanesePractice.razor.rz.scp.css */
[b-ydvsk6tscr] .type-japanese-page.practice-page--wide-prompt {
    --prompt-control-max-inline: 760px;
}

.type-japanese-route-shell[b-ydvsk6tscr] {
    min-height: 1px;
}

.type-japanese-live-stars[b-ydvsk6tscr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.4rem;
    min-height: 1.5rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
    transition: color 0.18s ease, text-shadow 0.18s ease;
}

.type-japanese-live-stars--1[b-ydvsk6tscr],
.type-japanese-live-stars--2[b-ydvsk6tscr],
.type-japanese-live-stars--3[b-ydvsk6tscr] {
    color: #fbbf24;
    text-shadow: 0 0 14px rgba(251, 191, 36, 0.22);
}

.type-japanese-hearts[b-ydvsk6tscr] {
    width: min(100%, 720px);
    margin: 0.45rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
}

.type-japanese-heart[b-ydvsk6tscr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    transition: color 0.16s ease, transform 0.16s ease;
}

.type-japanese-heart.full[b-ydvsk6tscr] {
    color: var(--error);
}

.type-japanese-heart.empty[b-ydvsk6tscr] {
    color: color-mix(in srgb, var(--text-muted) 45%, transparent);
}

.type-japanese-hearts-count[b-ydvsk6tscr] {
    margin-left: 0.35rem;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-muted);
}

.type-japanese-hearts--gain .type-japanese-heart.full[b-ydvsk6tscr] {
    transform: scale(1.08);
}

.type-japanese-hearts--loss .type-japanese-heart.empty[b-ydvsk6tscr] {
    transform: scale(0.92);
}

[b-ydvsk6tscr] .type-japanese-page .stats-line-wrap,
[b-ydvsk6tscr] .type-japanese-page .level-progress-bar-row {
    width: min(100%, 720px);
    margin-inline: auto;
}

@media (max-width: 640px) {
    .type-japanese-live-stars[b-ydvsk6tscr] {
        min-width: 3.4rem;
        font-size: 0.78rem;
    }

    .type-japanese-hearts[b-ydvsk6tscr] {
        margin-top: 0.32rem;
        gap: 0.18rem;
        font-size: 0.88rem;
    }

    .type-japanese-heart[b-ydvsk6tscr] {
        width: 0.95rem;
        height: 0.95rem;
    }
}
/* /Pages/VisualNovel.razor.rz.scp.css */
.vn-page[b-34qbtuy5dn] {
    --vn-viewport-width: 100vw;
    --vn-viewport-height: 100dvh;
    --vn-screen-pad-inline: 0rem;
    --vn-screen-pad-block: 0rem;
    --vn-stage-pad-inline-start: calc(env(safe-area-inset-left) + var(--vn-screen-pad-inline));
    --vn-stage-pad-inline-end: calc(env(safe-area-inset-right) + var(--vn-screen-pad-inline));
    --vn-stage-pad-block-start: calc(env(safe-area-inset-top) + var(--vn-screen-pad-block));
    --vn-stage-pad-block-end: calc(env(safe-area-inset-bottom) + var(--vn-screen-pad-block));
    --vn-stage-max-width: max(0px, calc(var(--vn-viewport-width) - var(--vn-stage-pad-inline-start) - var(--vn-stage-pad-inline-end)));
    --vn-stage-max-height: max(0px, calc(var(--vn-viewport-height) - var(--vn-stage-pad-block-start) - var(--vn-stage-pad-block-end)));
    position: relative;
    min-height: var(--vn-viewport-height);
    overflow: hidden;
    background: #000;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.vn-content[b-34qbtuy5dn] {
    position: relative;
    min-height: inherit;
    background: inherit;
}

.vn-page *[b-34qbtuy5dn] {
    user-select: none;
    -webkit-user-select: none;
}

.vn-stage-shell[b-34qbtuy5dn] {
    position: relative;
    min-height: inherit;
    display: grid;
    place-items: center;
    padding:
        var(--vn-stage-pad-block-start)
        var(--vn-stage-pad-inline-end)
        var(--vn-stage-pad-block-end)
        var(--vn-stage-pad-inline-start);
    box-sizing: border-box;
    overflow: hidden;
    background: inherit;
}

.vn-stage-frame[b-34qbtuy5dn] {
    position: relative;
    width: min(var(--vn-stage-max-width), calc(var(--vn-stage-max-height) * 16 / 9));
    height: min(var(--vn-stage-max-height), calc(var(--vn-stage-max-width) * 9 / 16));
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: inherit;
    container-type: size;
}

.vn-stage-scene[b-34qbtuy5dn] {
    --vn-stage-inline-padding: clamp(0.85rem, 2.2cqw, 2.75rem);
    --vn-stage-top-padding: clamp(0.8rem, 1.7cqh, 1.5rem);
    --vn-stage-bottom-padding: clamp(0.8rem, 1.8cqh, 1.15rem);
    --vn-stage-top-overlay-reserve-base: 0rem;
    --vn-stage-top-overlay-reserve: var(--vn-stage-top-overlay-reserve-base);
    --vn-dialogue-width: clamp(21rem, 58cqw, 68rem);
    --vn-choice-width: clamp(18rem, 34cqw, 34rem);
    --vn-dialogue-shell-height: clamp(6.8rem, 24.5cqh, 14.5rem);
    --vn-dialogue-reserve: calc(var(--vn-dialogue-shell-height) + clamp(1.1rem, 4.9cqh, 3.25rem));
    --vn-stage-overlay-bottom-reserve: calc(var(--vn-dialogue-reserve) + clamp(0.45rem, 1.1cqh, 1rem));
    --vn-stage-short-action-height: clamp(2.35rem, 6.2cqh, 2.8rem);
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: inherit;
    isolation: isolate;
}

.vn-stage-scene--fullscreen-prompt[b-34qbtuy5dn] {
    --vn-stage-top-overlay-reserve: max(var(--vn-stage-top-overlay-reserve-base), clamp(3.45rem, 9.2cqh, 4.75rem));
}

.vn-stage-scene--compact-phone[b-34qbtuy5dn] {
    --vn-stage-top-overlay-reserve-base: clamp(4.1rem, 13cqh, 5.6rem);
    --vn-stage-top-overlay-reserve: var(--vn-stage-top-overlay-reserve-base);
}

.vn-page--menu[b-34qbtuy5dn] {
    --vn-screen-pad-inline: 0rem;
    --vn-screen-pad-block: 0rem;
    background: #fff;
}

.vn-page--menu .vn-stage-shell[b-34qbtuy5dn] {
    padding: 0;
}

.vn-page--menu .vn-stage-frame[b-34qbtuy5dn] {
    width: 100%;
    height: var(--vn-viewport-height);
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
}

.vn-page--scene[b-34qbtuy5dn] {
    background: #000;
}

.vn-orientation-guard[b-34qbtuy5dn] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: none;
    pointer-events: none;
}

.vn-orientation-panel[b-34qbtuy5dn] {
    min-height: var(--vn-viewport-height);
    display: grid;
    place-items: center;
    padding:
        max(1.25rem, env(safe-area-inset-top))
        max(1.25rem, env(safe-area-inset-right))
        max(1.25rem, env(safe-area-inset-bottom))
        max(1.25rem, env(safe-area-inset-left));
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 223, 236, 0.82) 0%, rgba(255, 255, 255, 0) 38%),
        rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px);
}

.vn-orientation-card[b-34qbtuy5dn] {
    width: min(100%, 22rem);
    display: grid;
    gap: 0.75rem;
    padding: 1.5rem 1.35rem;
    border: 1px solid rgba(210, 170, 188, 0.28);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 22px 55px rgba(185, 142, 163, 0.16);
    text-align: center;
}

.vn-orientation-kicker[b-34qbtuy5dn] {
    margin: 0;
    color: rgba(147, 108, 128, 0.7);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.vn-orientation-title[b-34qbtuy5dn] {
    margin: 0;
    color: rgba(74, 58, 68, 0.92);
    font-size: clamp(1.65rem, 7vw, 2rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.05;
}

.vn-orientation-title-ja[b-34qbtuy5dn] {
    margin: -0.28rem 0 0;
    color: rgba(96, 72, 85, 0.78);
    font-size: clamp(0.95rem, 4.2vw, 1.12rem);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
}

.vn-orientation-copy[b-34qbtuy5dn] {
    margin: 0;
    color: rgba(113, 90, 102, 0.78);
    font-size: 0.94rem;
    line-height: 1.55;
}

.vn-scene-transition[b-34qbtuy5dn] {
    position: absolute;
    inset: 0;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    background: #000;
    transition: opacity 1100ms ease;
}

.vn-scene-transition--visible[b-34qbtuy5dn] {
    opacity: 0;
}

.vn-scene-transition--opaque[b-34qbtuy5dn] {
    opacity: 1;
}

.vn-fullscreen-prompt-shell[b-34qbtuy5dn] {
    position: absolute;
    inset: 0 0 auto;
    z-index: 8;
    display: flex;
    justify-content: center;
    padding:
        var(--vn-stage-top-padding)
        var(--vn-stage-inline-padding)
        0;
    pointer-events: none;
    box-sizing: border-box;
}

.vn-fullscreen-prompt-card[b-34qbtuy5dn] {
    width: min(100%, 32rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.7rem, 1.8cqw, 1rem);
    padding: clamp(0.68rem, 1.7cqh, 0.95rem) clamp(0.88rem, 2.2cqw, 1.25rem);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(11, 15, 24, 0.76);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
    pointer-events: auto;
}

.vn-page--menu .vn-fullscreen-prompt-card[b-34qbtuy5dn] {
    border-color: rgba(214, 170, 189, 0.35);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 32px rgba(179, 142, 160, 0.18);
}

.vn-fullscreen-prompt-copy[b-34qbtuy5dn] {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.72rem, 1.75cqh, 0.88rem);
    font-weight: 600;
    line-height: 1.4;
}

.vn-page--menu .vn-fullscreen-prompt-copy[b-34qbtuy5dn] {
    color: rgba(72, 53, 67, 0.9);
}

.vn-fullscreen-prompt-btn[b-34qbtuy5dn] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vn-stage-short-action-height);
    padding: 0.6rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, white 12%) 0%, color-mix(in srgb, var(--accent-secondary) 88%, white 12%) 100%);
    color: #fff;
    font-size: clamp(0.72rem, 1.65cqh, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.vn-fullscreen-prompt-dismiss[b-34qbtuy5dn] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vn-stage-short-action-height);
    padding: 0.55rem 0.82rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(0.68rem, 1.55cqh, 0.76rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.vn-page--menu .vn-fullscreen-prompt-dismiss[b-34qbtuy5dn] {
    border-color: rgba(98, 76, 88, 0.16);
    background: rgba(94, 70, 84, 0.08);
    color: rgba(72, 53, 67, 0.8);
}

.vn-choice-shell[b-34qbtuy5dn] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        var(--vn-stage-top-padding)
        var(--vn-stage-inline-padding)
        var(--vn-stage-overlay-bottom-reserve);
    box-sizing: border-box;
    pointer-events: none;
}

.vn-choice-frame[b-34qbtuy5dn] {
    width: min(100%, var(--vn-choice-width));
    pointer-events: auto;
}

.vn-bottom-shell[b-34qbtuy5dn] {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding:
        0
        var(--vn-stage-inline-padding)
        var(--vn-stage-bottom-padding);
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity 360ms ease,
        transform 360ms ease;
}

.vn-bottom-shell--visible[b-34qbtuy5dn] {
    opacity: 1;
    transform: translateY(0);
}

.vn-dialogue-frame[b-34qbtuy5dn] {
    width: min(100%, var(--vn-dialogue-width));
    pointer-events: auto;
}

.vn-finish-actions[b-34qbtuy5dn] {
    display: flex;
    gap: clamp(0.6rem, 1.2cqh, 0.75rem);
    flex-wrap: wrap;
}

.vn-finish-btn[b-34qbtuy5dn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(8.5rem, 18cqw, 10rem);
    min-height: var(--vn-stage-short-action-height);
    padding: clamp(0.62rem, 1.4cqh, 0.72rem) 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, white 10%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated) 92%);
    color: var(--text-primary);
    font-size: clamp(0.74rem, 1.7cqh, 0.82rem);
    font-weight: 700;
}

.vn-finish-btn--primary[b-34qbtuy5dn] {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
    color: #fff;
    border-color: transparent;
}

.vn-loading[b-34qbtuy5dn] {
    min-height: 100%;
    display: grid;
    place-items: center;
    color: var(--text-primary);
    font-size: clamp(0.88rem, 1.8cqh, 0.95rem);
    letter-spacing: 0.04em;
}

@container (max-width: 760px) {
    .vn-stage-scene[b-34qbtuy5dn] {
        --vn-dialogue-width: 100%;
        --vn-choice-width: min(100%, 30rem);
        --vn-dialogue-shell-height: clamp(6.2rem, 23.5cqh, 11.25rem);
        --vn-dialogue-reserve: calc(var(--vn-dialogue-shell-height) + clamp(0.9rem, 4.4cqh, 2.1rem));
        --vn-stage-overlay-bottom-reserve: calc(var(--vn-dialogue-reserve) + clamp(0.35rem, 0.9cqh, 0.75rem));
    }

    .vn-finish-actions[b-34qbtuy5dn] {
        flex-direction: column;
    }

    .vn-finish-btn[b-34qbtuy5dn] {
        width: 100%;
        min-width: 0;
    }

    .vn-fullscreen-prompt-card[b-34qbtuy5dn] {
        flex-direction: column;
        align-items: stretch;
        border-radius: 1.1rem;
    }

    .vn-fullscreen-prompt-btn[b-34qbtuy5dn] {
        width: 100%;
    }

    .vn-fullscreen-prompt-dismiss[b-34qbtuy5dn] {
        width: 100%;
    }
}

@container (max-height: 430px) {
    .vn-stage-scene[b-34qbtuy5dn] {
        --vn-stage-inline-padding: clamp(0.7rem, 2cqw, 1.3rem);
        --vn-stage-top-padding: clamp(0.55rem, 1.15cqh, 0.9rem);
        --vn-stage-bottom-padding: clamp(0.55rem, 1.15cqh, 0.9rem);
        --vn-dialogue-shell-height: clamp(5.6rem, 22.5cqh, 9.4rem);
        --vn-dialogue-reserve: calc(var(--vn-dialogue-shell-height) + clamp(0.85rem, 3.7cqh, 1.5rem));
        --vn-stage-overlay-bottom-reserve: calc(var(--vn-dialogue-reserve) + clamp(0.28rem, 0.8cqh, 0.55rem));
    }

    .vn-choice-shell[b-34qbtuy5dn] {
        align-items: center;
    }

    .vn-fullscreen-prompt-card[b-34qbtuy5dn] {
        width: min(100%, 24rem);
        gap: 0.55rem;
        padding: 0.55rem 0.75rem;
    }

    .vn-fullscreen-prompt-copy[b-34qbtuy5dn] {
        font-size: clamp(0.68rem, 1.6cqh, 0.8rem);
    }

    .vn-fullscreen-prompt-dismiss[b-34qbtuy5dn] {
        min-height: clamp(2rem, 5.2cqh, 2.35rem);
        padding: 0.45rem 0.68rem;
    }
}

@media (pointer: coarse) {
    .vn-page--scene[b-34qbtuy5dn] {
        --vn-screen-pad-inline: 0rem;
        --vn-screen-pad-block: 0rem;
    }
}

@media (max-width: 900px) and (orientation: portrait) and (pointer: coarse) {
    .vn-orientation-guard[b-34qbtuy5dn] {
        display: block;
        pointer-events: auto;
    }
}