@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Mitr:wght@300;400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --font-body: 'Mitr', 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
    --font-display: 'Nunito', 'Mitr', 'Sarabun', system-ui, sans-serif;
    --font-code: 'Nunito', ui-monospace, monospace;
    --canvas: #fff0f7;
    --canvas-soft: #fde9f0;
    --surface-soft: #ffd9e8;
    --surface-card: #ffffff;
    --surface-glass: rgba(255, 240, 247, 0.88);
    --surface-dark: #fce4ef;
    --surface-dark-elevated: #ffd4e6;
    --surface-dark-soft: #ffcce0;
    --ink: #7a2c4a;
    --body-text: #9b4d6a;
    --body-strong: #ff5fa8;
    --ink-muted: #c485a0;
    --ink-faint: #d9a8be;
    --hairline: rgba(255, 143, 192, 0.35);
    --hairline-soft: rgba(255, 143, 192, 0.18);
    --primary: #ff8fc0;
    --primary-gradient: linear-gradient(135deg, #ff5fa8 0%, #ff8fc0 50%, #ffb3d4 100%);
    --primary-active: #ff5fa8;
    --primary-disabled: rgba(255, 143, 192, 0.35);
    --on-primary: #ffffff;
    --secondary: #fde9f0;
    --secondary-gradient: linear-gradient(180deg, #fde9f0 0%, #ffd9e8 100%);
    --on-dark: #7a2c4a;
    --on-dark-soft: rgba(122, 44, 74, 0.78);
    --sticker-sky: #a8d8f0;
    --sticker-purple: #d4a8f0;
    --sticker-pink: #ffb3d4;
    --sticker-orange: #ffcba4;
    --sticker-teal: #a8f0e0;
    --sticker-green: #b8f0a8;
    --hp-color: #ff5fa8;
    --hp-gradient: linear-gradient(90deg, #ff4d9f, #ff85c0);
    --exp-color: #ffcf77;
    --exp-gradient: linear-gradient(90deg, #ffb347, #ffd97f);
    --inspiration-gradient: #d4a8f0;
    --success: #4ecb71;
    --error: #ff6b6b;
    --accent-amber: #ffcf77;
    --gold: #ffcf77;
    --gold-gradient: linear-gradient(135deg, #fff0a0 0%, #ffcf77 50%, #ffb347 100%);
    --rounded-xs: 8px;
    --rounded-sm: 16px;
    --rounded-md: 20px;
    --rounded-lg: 24px;
    --rounded-xl: 28px;
    --rounded-full: 9999px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --spacing-section: 64px;
    --shadow-sm: 0 2px 8px rgba(255, 100, 170, 0.10), 0 0 0 1px rgba(255, 143, 192, 0.08);
    --shadow-md: 0 4px 16px rgba(255, 100, 170, 0.14), 0 8px 28px rgba(255, 143, 192, 0.10);
    --shadow-lg: 0 8px 32px rgba(255, 100, 170, 0.18);
    --shadow-glow: 0 0 24px rgba(255, 143, 192, 0.50);
    --scrim: rgba(122, 44, 74, 0.35);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --perspective-deep: 1200px;
    --perspective-card: 1000px;
    --gold-glow: 0 0 24px rgba(255, 207, 119, 0.5);
    --gold-subtle: rgba(255, 207, 119, 0.18);
    --indigo-depth: #fde9f0;
    --transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.25s var(--ease-spring)
}

[data-theme="dark"] {
    --canvas: #2d1525;
    --canvas-soft: #2d1525;
    --surface-soft: #3d1a30;
    --surface-card: #3d1a30;
    --surface-glass: rgba(45, 21, 37, 0.92);
    --surface-dark: #25101e;
    --surface-dark-elevated: #4a2040;
    --surface-dark-soft: #5a2a50;
    --ink: #ffe0ef;
    --body-strong: #ff8fc0;
    --body-text: #f0b8d0;
    --ink-muted: #c490aa;
    --ink-faint: #9a6880;
    --hairline: rgba(255, 143, 192, 0.3);
    --hairline-soft: rgba(255, 143, 192, 0.15);
    --on-dark: #ffe0ef;
    --on-dark-soft: rgba(255, 224, 239, 0.72);
    --lms-bg: #2d1525;
    --lms-card: #3d1a30;
    --lms-text: #ffe0ef;
    --lms-muted: #c490aa;
    --lms-secondary: #c490aa;
    --lms-border: rgba(255, 143, 192, 0.3);
    --lms-shadow: var(--shadow-md);
    --bg-card: #3d1a30;
    --text-primary: #ffe0ef;
    --text-secondary: #f0b8d0;
    --text-light: #c490aa;
    --text-muted: #c490aa;
    --text-color: #f0b8d0;
    --card-bg: #3d1a30;
    --border-color: rgba(255, 143, 192, 0.3);
    --shadow-card: var(--shadow-md)
}

body {
    background: #fde9f0 !important;
    background-image: radial-gradient(circle at 20% 20%, rgb(255 200 220 / .45) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgb(255 180 210 / .35) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg opacity='0.13'%3E%3Ctext x='8' y='22' font-size='16' fill='%23ff8fc0'%3E%E2%99%A5%3C/text%3E%3Ctext x='44' y='50' font-size='12' fill='%23ffb3d4'%3E%E2%98%85%3C/text%3E%3Ctext x='60' y='20' font-size='10' fill='%23ff8fc0'%3E%E2%9D%80%3C/text%3E%3Ctext x='20' y='68' font-size='13' fill='%23ffcce0'%3E%E2%99%A5%3C/text%3E%3Ctext x='56' y='72' font-size='9' fill='%23ff8fc0'%3E%E2%98%85%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
    color: #7a2c4a !important
}

[data-theme="dark"] body {
    background: #2d1525 !important;
    background-image: radial-gradient(circle at 20% 20%, rgb(100 30 60 / .55) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgb(80 20 50 / .45) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg opacity='0.08'%3E%3Ctext x='8' y='22' font-size='16' fill='%23ff8fc0'%3E%E2%99%A5%3C/text%3E%3Ctext x='44' y='50' font-size='12' fill='%23ffb3d4'%3E%E2%98%85%3C/text%3E%3Ctext x='60' y='20' font-size='10' fill='%23ff8fc0'%3E%E2%9D%80%3C/text%3E%3Ctext x='20' y='68' font-size='13' fill='%23ffcce0'%3E%E2%99%A5%3C/text%3E%3Ctext x='56' y='72' font-size='9' fill='%23ff8fc0'%3E%E2%98%85%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
    color: #ffe0ef !important
}

.card,
.char-panel,
.menu-panel,
.auth-box,
.modal {
    background: rgb(255 255 255 / .9) !important;
    border: 1.5px solid rgb(255 143 192 / .4) !important;
    color: #7a2c4a !important;
    box-shadow: 0 8px 32px rgb(255 100 170 / .15), inset 0 1px 1px rgb(255 255 255 / .8) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: var(--rounded-lg) !important
}

[data-theme="dark"] .card,
[data-theme="dark"] .char-panel,
[data-theme="dark"] .menu-panel,
[data-theme="dark"] .auth-box,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .modal {
    background: rgb(61 26 48 / .9) !important;
    border: 1.5px solid rgb(255 143 192 / .35) !important;
    color: #ffe0ef !important;
    box-shadow: 0 8px 32px rgb(0 0 0 / .35), inset 0 1px 1px rgb(255 143 192 / .15) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important
}

.form-group label,
.char-name,
.stat-row .value,
.feature-card h3,
.title-lg,
.title-md,
h1,
h2,
h3,
h4 {
    color: #d4376e !important
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .form-group label,
[data-theme="dark"] .char-name,
[data-theme="dark"] .stat-row .value,
[data-theme="dark"] .feature-card h3,
[data-theme="dark"] .title-lg,
[data-theme="dark"] .title-md {
    color: #ff8fc0 !important
}

[data-theme="dark"] .auth-switch {
    color: #c490aa !important
}

[data-theme="dark"] .auth-switch a {
    color: #ff8fc0 !important
}

[data-theme="dark"] #authSubtitle {
    color: #f0b8d0 !important
}

[data-theme="dark"] .display-lg {
    color: #ff8fc0 !important
}

.form-group input,
.fill-blank-input,
.compose-textarea,
input[type="text"],
input[type="password"],
input[type="email"] {
    background: rgb(255 255 255 / .95) !important;
    border: 2px solid rgb(255 143 192 / .45) !important;
    color: #7a2c4a !important;
    border-radius: var(--rounded-md) !important
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .fill-blank-input,
[data-theme="dark"] .compose-textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"] {
    background: rgb(45 21 37 / .85) !important;
    border: 2px solid rgb(255 143 192 / .35) !important;
    color: #ffe0ef !important
}

.form-group input:focus,
.fill-blank-input:focus,
.compose-textarea:focus,
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .fill-blank-input:focus,
[data-theme="dark"] .compose-textarea:focus {
    border-color: #ff5fa8 !important;
    box-shadow: 0 0 0 3px rgb(255 143 192 / .25) !important;
    outline: none !important
}

.toast {
    background: linear-gradient(135deg, #fff0f7, #ffd9e8) !important;
    color: #7a2c4a !important;
    border: 1.5px solid rgb(255 143 192 / .5) !important;
    box-shadow: 0 8px 28px rgb(255 100 170 / .25) !important
}

[data-theme="dark"] .toast {
    background: linear-gradient(135deg, #3d1a30, #4a2040) !important;
    color: #ffe0ef !important;
    border-color: rgb(255 143 192 / .35) !important
}

.menu-btn {
    background: rgb(255 217 232 / .55) !important;
    border: 1.5px solid rgb(255 143 192 / .3) !important;
    color: #7a2c4a !important;
    border-radius: var(--rounded-md) !important;
    transition: all 0.22s var(--ease-spring) !important
}

.menu-btn:hover {
    background: rgb(255 143 192 / .22) !important;
    border-color: #ff8fc0 !important;
    color: #d4376e !important;
    transform: translateX(4px)
}

.menu-btn.active {
    background: var(--primary-gradient) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgb(255 100 170 / .35) !important
}

[data-theme="dark"] .menu-btn {
    background: rgb(45 21 37 / .75) !important;
    border: 1.5px solid rgb(255 143 192 / .25) !important;
    color: #ffe0ef !important;
    border-radius: var(--rounded-md) !important
}

[data-theme="dark"] .menu-btn:hover {
    background: rgb(255 143 192 / .2) !important;
    border-color: #ff8fc0 !important;
    color: #ff8fc0 !important;
    transform: translateX(4px)
}

[data-theme="dark"] .menu-btn.active {
    background: var(--primary-gradient) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgb(255 95 168 / .4) !important
}

.theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: var(--rounded-full);
    background: rgb(255 255 255 / .92) !important;
    border: 1.5px solid rgb(255 143 192 / .45) !important;
    box-shadow: 0 4px 18px rgb(255 100 170 / .25) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: all 0.25s var(--ease-spring);
    outline: none
}

.theme-toggle:hover {
    transform: scale(1.12) rotate(15deg);
    border-color: #ff5fa8 !important;
    box-shadow: 0 8px 24px rgb(255 100 170 / .4) !important
}

.theme-toggle:active {
    transform: scale(.95)
}

.theme-toggle .toggle-icon {
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s var(--ease-spring)
}

[data-theme="dark"] .theme-toggle {
    background: rgb(61 26 48 / .92) !important;
    border-color: rgb(255 143 192 / .4) !important;
    box-shadow: 0 4px 20px rgb(0 0 0 / .45) !important
}

.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--rounded-full);
    background: rgb(255 255 255 / .9);
    border: 1.5px solid rgb(255 143 192 / .4);
    box-shadow: 0 2px 8px rgb(255 100 170 / .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 19px;
    transition: all 0.25s var(--ease-spring);
    outline: none;
    color: var(--ink);
    flex-shrink: 0
}

.theme-toggle-btn:hover {
    transform: scale(1.12) rotate(15deg);
    border-color: #ff5fa8;
    box-shadow: 0 4px 16px rgb(255 100 170 / .35)
}

.theme-toggle-btn:active {
    transform: scale(.95)
}

.theme-toggle-btn .toggle-icon {
    font-size: 19px;
    line-height: 1;
    display: inline-block
}

[data-theme="dark"] .theme-toggle-btn {
    background: rgb(61 26 48 / .9);
    border-color: rgb(255 143 192 / .35);
    box-shadow: 0 2px 8px rgb(0 0 0 / .35);
    color: #ffe0ef
}

body {
    font-family: var(--font-body);
    background: var(--canvas-soft);
    color: var(--body-text);
    min-height: 100vh;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    overflow-x: hidden
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-font {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.02em
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-10px) rotate(3deg)
    }
}

@keyframes floatAlt {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1)
    }

    33% {
        transform: translateY(-8px) rotate(5deg) scale(1.05)
    }

    66% {
        transform: translateY(-4px) rotate(-3deg) scale(.98)
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 1px var(--hairline)
    }

    50% {
        box-shadow: 0 0 0 2px rgb(184 134 42 / .25)
    }
}

@keyframes bounceSlow {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(.3);
        opacity: 0
    }

    50% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(.9)
    }

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

@keyframes bounceInUp {
    0% {
        transform: translateY(40px) scale(.8);
        opacity: 0
    }

    60% {
        transform: translateY(-10px) scale(1.02)
    }

    80% {
        transform: translateY(5px) scale(.98)
    }

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

@keyframes bounceInDown {
    0% {
        transform: translateY(-40px) scale(.8);
        opacity: 0
    }

    60% {
        transform: translateY(10px) scale(1.02)
    }

    80% {
        transform: translateY(-5px) scale(.98)
    }

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

@keyframes bounceInLeft {
    0% {
        transform: translateX(-60px) scale(.8);
        opacity: 0
    }

    60% {
        transform: translateX(10px) scale(1.02)
    }

    80% {
        transform: translateX(-5px) scale(.98)
    }

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

@keyframes bounceInRight {
    0% {
        transform: translateX(60px) scale(.8);
        opacity: 0
    }

    60% {
        transform: translateX(-10px) scale(1.02)
    }

    80% {
        transform: translateX(5px) scale(.98)
    }

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

@keyframes shake {

    0%,
    100% {
        transform: translateX(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-8px)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(8px)
    }
}

@keyframes shakeHorizontal {

    0%,
    100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-5px)
    }

    75% {
        transform: translateX(5px)
    }
}

@keyframes wiggle {

    0%,
    100% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(-3deg)
    }

    75% {
        transform: rotate(3deg)
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

@keyframes pulseBig {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgb(184 134 42 / .4)
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px #fff0
    }
}

@keyframes pulseSuccess {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgb(16 185 129 / .4)
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px #fff0
    }
}

@keyframes pulseError {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgb(239 68 68 / .4)
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px #fff0
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes spinReverse {
    from {
        transform: rotate(360deg)
    }

    to {
        transform: rotate(0deg)
    }
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1)
    }

    14% {
        transform: scale(1.1)
    }

    28% {
        transform: scale(1)
    }

    42% {
        transform: scale(1.1)
    }

    70% {
        transform: scale(1)
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0
    }

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

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0
    }

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

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0
    }

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

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0
    }

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

@keyframes slideOutUp {
    from {
        transform: translateY(0);
        opacity: 1
    }

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

@keyframes slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1
    }

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

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(0);
        opacity: 0
    }
}

@keyframes rubberBand {
    0% {
        transform: scale(1)
    }

    30% {
        transform: scale(1.25)
    }

    40% {
        transform: scale(.75)
    }

    50% {
        transform: scale(1.15)
    }

    65% {
        transform: scale(.95)
    }

    75% {
        transform: scale(1.05)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes swing {

    0%,
    100% {
        transform: rotate(0deg)
    }

    20% {
        transform: rotate(15deg)
    }

    40% {
        transform: rotate(-10deg)
    }

    60% {
        transform: rotate(5deg)
    }

    80% {
        transform: rotate(-5deg)
    }
}

@keyframes tada {

    0%,
    100% {
        transform: scale(1) rotate(0deg)
    }

    10%,
    20% {
        transform: scale(.9) rotate(-3deg)
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1) rotate(3deg)
    }

    40%,
    60%,
    80% {
        transform: scale(1.1) rotate(-3deg)
    }
}

@keyframes rollIn {
    from {
        transform: translateX(-100%) rotate(-120deg);
        opacity: 0
    }

    to {
        transform: translateX(0) rotate(0deg);
        opacity: 1
    }
}

@keyframes rollOut {
    from {
        transform: translateX(0) rotate(0deg);
        opacity: 1
    }

    to {
        transform: translateX(100%) rotate(120deg);
        opacity: 0
    }
}

@keyframes jello {

    0%,
    100% {
        transform: scale(1, 1)
    }

    25% {
        transform: scale(1.25, .75)
    }

    50% {
        transform: scale(.75, 1.25)
    }

    75% {
        transform: scale(1.15, .85)
    }
}

@keyframes wobble {

    0%,
    100% {
        transform: translateX(0)
    }

    15% {
        transform: translateX(-10px) rotate(-5deg)
    }

    30% {
        transform: translateX(10px) rotate(5deg)
    }

    45% {
        transform: translateX(-10px) rotate(-5deg)
    }

    60% {
        transform: translateX(10px) rotate(5deg)
    }

    75% {
        transform: translateX(-5px) rotate(-2deg)
    }
}

@keyframes flash {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

@keyframes flashGreen {

    0%,
    100% {
        background-color: #fff0
    }

    50% {
        background-color: rgb(16 185 129 / .3)
    }
}

@keyframes flashRed {

    0%,
    100% {
        background-color: #fff0
    }

    50% {
        background-color: rgb(239 68 68 / .3)
    }
}

@keyframes flashGold {

    0%,
    100% {
        background-color: #fff0
    }

    50% {
        background-color: rgb(255 183 3 / .3)
    }
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 5px rgb(184 134 42 / .2)
    }

    50% {
        box-shadow: 0 0 20px rgb(184 134 42 / .6)
    }
}

@keyframes glowPulseGreen {

    0%,
    100% {
        box-shadow: 0 0 5px rgb(16 185 129 / .3)
    }

    50% {
        box-shadow: 0 0 25px rgb(16 185 129 / .7)
    }
}

@keyframes glowPulseGold {

    0%,
    100% {
        box-shadow: 0 0 5px rgb(255 183 3 / .3)
    }

    50% {
        box-shadow: 0 0 25px rgb(255 183 3 / .7)
    }
}

@keyframes floatAround {
    0% {
        transform: translate(0, 0) rotate(0deg)
    }

    25% {
        transform: translate(10px, -15px) rotate(5deg)
    }

    50% {
        transform: translate(-5px, -20px) rotate(-3deg)
    }

    75% {
        transform: translate(-15px, -10px) rotate(3deg)
    }

    100% {
        transform: translate(0, 0) rotate(0deg)
    }
}

@keyframes dance {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    25% {
        transform: translateY(-15px) rotate(-10deg)
    }

    50% {
        transform: translateY(0) rotate(0deg)
    }

    75% {
        transform: translateY(-10px) rotate(10deg)
    }
}

@keyframes celebrateJump {

    0%,
    100% {
        transform: translateY(0) scale(1)
    }

    25% {
        transform: translateY(-20px) scale(1.1)
    }

    50% {
        transform: translateY(-5px) scale(1.05)
    }

    75% {
        transform: translateY(-15px) scale(1.08)
    }
}

@keyframes confetti {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0
    }
}

@keyframes sparkle {

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

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

@keyframes shine {
    0% {
        background-position: -200% center
    }

    100% {
        background-position: 200% center
    }
}

@keyframes typewriter {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1
    }

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

@keyframes slideUpFade {
    from {
        transform: translateY(20px);
        opacity: 0
    }

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

@keyframes elasticIn {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0
    }

    60% {
        transform: scale(1.1) rotate(2deg);
        opacity: 1
    }

    80% {
        transform: scale(.95) rotate(-1deg)
    }

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

@keyframes attackRight {
    0% {
        transform: translateX(0)
    }

    30% {
        transform: translateX(30px) rotate(5deg)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes attackLeft {
    0% {
        transform: translateX(0)
    }

    30% {
        transform: translateX(-30px) rotate(-5deg)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes hurt {

    0%,
    100% {
        transform: translateX(0);
        filter: brightness(1)
    }

    25% {
        transform: translateX(-10px);
        filter: brightness(1.5) hue-rotate(-20deg)
    }

    50% {
        transform: translateX(10px);
        filter: brightness(.8)
    }

    75% {
        transform: translateX(-5px);
        filter: brightness(1.3)
    }
}

@keyframes coinSpin {
    0% {
        transform: rotateY(0deg)
    }

    100% {
        transform: rotateY(360deg)
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0
    }

    50% {
        transform: scale(1.1)
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes morphScale {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.15)
    }
}

.floating-deco {
    position: absolute;
    font-size: 44px;
    user-select: none;
    pointer-events: none;
    animation: float 4s ease-in-out infinite;
    filter: none
}

.ani-float {
    animation: float 3s ease-in-out infinite alternate
}

.ani-float-alt {
    animation: floatAlt 3s ease-in-out infinite alternate
}

.ani-pulse {
    animation: pulse 1.5s ease infinite
}

.ani-pulse-big {
    animation: pulseBig 1.5s ease infinite
}

.ani-pulse-success {
    animation: pulseSuccess 1.5s ease infinite
}

.ani-pulse-error {
    animation: pulseError 1.5s ease infinite
}

.ani-spin {
    animation: spin 1s linear infinite
}

.ani-spin-reverse {
    animation: spinReverse 1s linear infinite
}

.ani-heartbeat {
    animation: heartbeat 1.5s ease infinite
}

.ani-shake {
    animation: shake 0.4s ease
}

.ani-shake-horizontal {
    animation: shakeHorizontal 0.3s ease
}

.ani-wiggle {
    animation: wiggle 0.5s ease-in-out infinite
}

.ani-scale {
    animation: pulse 0.5s ease
}

.ani-scale-in {
    animation: scaleIn 0.4s ease forwards
}

.ani-rubberBand {
    animation: rubberBand 0.5s ease
}

.ani-tada {
    animation: tada 0.5s ease
}

.ani-rollIn {
    animation: rollIn 0.4s ease forwards
}

.ani-rollOut {
    animation: rollOut 0.4s ease forwards
}

.ani-jello {
    animation: jello 0.5s ease-in-out
}

.ani-wobble {
    animation: wobble 0.5s ease-in-out infinite
}

.ani-flash {
    animation: flash 0.5s ease
}

.ani-flash-green {
    animation: flashGreen 0.5s ease
}

.ani-flash-red {
    animation: flashRed 0.5s ease
}

.ani-flash-gold {
    animation: flashGold 0.5s ease
}

.ani-glowPulse {
    animation: glowPulse 1.5s ease infinite
}

.ani-glowPulseGreen {
    animation: glowPulseGreen 1.5s ease infinite
}

.ani-glowPulseGold {
    animation: glowPulseGold 1.5s ease infinite
}

.ani-floatAround {
    animation: floatAround 4s ease-in-out infinite
}

.ani-dance {
    animation: dance 1s ease infinite
}

.ani-celebrateJump {
    animation: celebrateJump 0.6s ease infinite
}

.ani-confetti {
    animation: confetti 2s ease forwards
}

.ani-sparkle {
    animation: sparkle 0.6s ease infinite
}

.ani-shine {
    animation: shine 2s ease-in-out infinite
}

.ani-elasticIn {
    animation: elasticIn 0.4s ease forwards
}

.ani-typewriter {
    animation: typewriter 0.8s ease forwards
}

.ani-blink {
    animation: blink 1s step-end infinite
}

.ani-ripple {
    animation: ripple 0.6s ease
}

.ani-slideUpFade {
    animation: slideUpFade 0.4s ease forwards
}

.ani-elasticIn {
    animation: elasticIn 0.4s ease forwards
}

.ani-enter {
    animation: revealUp 0.5s cubic-bezier(.22, 1, .36, 1) both
}

.ani-enter-fade {
    animation: revealFade 0.4s ease both
}

.ani-enter-up {
    animation: slideInUp 0.5s cubic-bezier(.22, 1, .36, 1) both
}

.ani-enter-down {
    animation: slideInDown 0.5s cubic-bezier(.22, 1, .36, 1) both
}

.ani-enter-left {
    animation: slideInLeft 0.5s cubic-bezier(.22, 1, .36, 1) both
}

.ani-enter-right {
    animation: slideInRight 0.5s cubic-bezier(.22, 1, .36, 1) both
}

.ani-exit-up {
    animation: slideOutUp 0.3s ease forwards
}

.ani-exit-down {
    animation: slideOutDown 0.3s ease forwards
}

.hidden {
    display: none !important
}

.display-xl {
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--ink);
    font-weight: 700
}

.display-lg {
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -.02em
}

.display-md {
    font-size: 26px;
    line-height: 1.23
}

.display-sm {
    font-size: 22px;
    line-height: 1.27
}

.title-lg {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    font-family: var(--font-body);
    letter-spacing: -.01em
}

.title-md {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    font-family: var(--font-body)
}

.body-md {
    font-size: 16px;
    line-height: 1.5
}

.body-sm {
    font-size: 15px;
    line-height: 1.33
}

.eyebrow {
    font-family: var(--font-code);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted)
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    min-height: 44px;
    height: auto;
    border-radius: var(--rounded-full);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border: none;
    outline: none;
    position: relative;
    box-shadow: none
}

.btn:active {
    transform: none
}

.btn-primary {
    background: linear-gradient(135deg, #ff5fa8 0%, #ff8fc0 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgb(255 100 170 / .4);
    font-weight: 700;
    transition: all 0.25s var(--ease-spring)
}

.btn-primary:hover {
    background: linear-gradient(135deg, #ff4d9f 0%, #ff7ab5 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgb(255 100 170 / .55)
}

.btn-primary:active {
    transform: translateY(0) scale(.98);
    animation: btnBounce 0.3s ease
}

.btn-secondary {
    background: rgb(255 255 255 / .9);
    color: #d4376e;
    border: 1.5px solid rgb(255 143 192 / .5);
    box-shadow: var(--shadow-sm);
    font-weight: 700
}

.btn-secondary:hover {
    background: rgb(255 217 232 / .8);
    border-color: #ff8fc0;
    color: #d4376e
}

.btn-gold {
    background: rgb(255 255 255 / .9);
    color: #d4376e;
    border: 1.5px solid rgb(255 143 192 / .5);
    font-weight: 700
}

.btn-gold:hover {
    background: rgb(255 143 192 / .2);
    color: #d4376e;
    border-color: #ff8fc0
}

.game-body {
    background: linear-gradient(135deg, #fde9f0 0%, #fff0f7 50%, #ffd9e8 100%) fixed;
    color: #7a2c4a;
    min-height: 100vh;
    overflow-x: hidden
}

.game-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr) 270px;
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
    min-height: 100vh;
    box-sizing: border-box;
    align-items: start
}

.char-panel-glass {
    background: linear-gradient(160deg, rgb(255 240 247 / .88) 0%, rgb(255 217 232 / .95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgb(255 143 192 / .45);
    border-radius: 28px;
    box-shadow: 0 12px 36px rgb(255 100 170 / .18), inset 0 1px 1px rgb(255 255 255 / .8);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease
}

.char-panel-glass:hover {
    border-color: rgb(255 95 168 / .75);
    box-shadow: 0 16px 40px rgb(255 100 170 / .25), 0 0 24px rgb(255 143 192 / .3)
}

.char-avatar-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 16px;
    perspective: 800px
}

.char-aura-ring {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px dashed rgb(255 143 192 / .55);
    animation: rotateAura 18s linear infinite;
    pointer-events: none
}

@keyframes rotateAura {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.char-avatar-big {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 217 232 / .6) 0%, rgb(255 240 247 / .9) 100%);
    border: 3px solid #ff8fc0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgb(255 100 170 / .3), inset 0 2px 4px rgb(255 255 255 / .6);
    z-index: 2;
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important
}

.char-avatar-clickable {
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1)
}

.char-avatar-clickable:hover {
    transform: scale(1.06)
}

.char-avatar-clickable:hover .char-avatar-big {
    border-color: #ff5fa8;
    box-shadow: 0 10px 30px rgb(255 95 168 / .5), inset 0 2px 6px rgb(255 255 255 / .8)
}

.char-avatar-clickable:hover .char-avatar-edit-badge {
    transform: scale(1.15) rotate(12deg);
    background: #ff5fa8;
    color: #fff
}

.char-avatar-edit-badge {
    position: absolute;
    bottom: 2px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: #fff;
    border: 2px solid #ff8fc0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 4px 10px rgb(255 95 168 / .35);
    z-index: 3;
    transition: all 0.2s ease
}

.avatar-custom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block
}

.char-name-clickable {
    cursor: pointer;
    display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease
}

.char-name-clickable:hover {
    color: #ff5fa8;
    transform: translateY(-1px)
}

.avatar-emoji {
    font-size: 46px;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: drop-shadow(0 4px 8px rgb(0 0 0 / .25));
    user-select: none;
    transform-origin: center center
}

.char-avatar-shadow {
    position: absolute;
    bottom: -6px;
    width: 60px;
    height: 12px;
    background: radial-gradient(ellipse, rgb(0 0 0 / .6) 0%, transparent 70%);
    border-radius: 50%;
    animation: shadowScale 5.5s ease-in-out infinite;
    z-index: 1
}

@keyframes shadowScale {

    0%,
    100% {
        transform: scale(1);
        opacity: .6
    }

    25% {
        transform: scale(.75);
        opacity: .3
    }

    75% {
        transform: scale(.85);
        opacity: .45
    }
}

.char-identity {
    text-align: center;
    margin-bottom: 16px;
    width: 100%
}

.char-name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    color: #d4376e;
    letter-spacing: -.01em;
    margin-bottom: 6px;
    text-shadow: 0 2px 8px rgb(255 100 170 / .2)
}

.char-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgb(255 143 192 / .25) 0%, rgb(255 95 168 / .15) 100%);
    border: 1px solid rgb(255 143 192 / .55);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 13px;
    color: #d4376e;
    font-weight: 700
}

.bar-group {
    width: 100%;
    margin-bottom: 12px
}

.bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #9b4d6a;
    margin-bottom: 6px;
    font-weight: 700
}

.bar-val-badge {
    font-family: var(--font-code);
    font-size: 12px;
    color: #d4376e;
    background: rgb(255 217 232 / .7);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgb(255 143 192 / .35)
}

.bar-track-3d {
    background: rgb(255 217 232 / .55);
    border: 1.5px solid rgb(255 143 192 / .3);
    border-radius: 12px;
    height: 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgb(255 100 170 / .15);
    position: relative
}

.bar-fill.hp {
    background: linear-gradient(90deg, #ff4d9f 0%, #ff85c0 50%, #ffb3d4 100%);
    box-shadow: 0 0 12px rgb(255 95 168 / .55);
    height: 100%
}

.bar-fill.exp {
    background: linear-gradient(90deg, #ffb347 0%, #ffd97f 50%, #ffcf77 100%);
    box-shadow: 0 0 12px rgb(255 207 119 / .6);
    height: 100%
}

.stat-box-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    margin: 14px 0
}

.stat-box-3d {
    background: rgb(255 240 247 / .75);
    border: 1.5px solid rgb(255 143 192 / .3);
    border-radius: 20px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s var(--ease-spring), border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: default
}

.stat-box-3d:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: rgb(255 95 168 / .8);
    box-shadow: 0 8px 20px rgb(255 100 170 / .2), 0 0 14px rgb(255 143 192 / .25)
}

.stat-box-3d .icon {
    font-size: 22px;
    margin-bottom: 2px;
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / .3))
}

.stat-box-3d .label {
    font-size: 11.5px;
    color: #c485a0;
    font-weight: 600
}

.stat-box-3d .value {
    font-family: var(--font-code);
    font-size: 15px;
    font-weight: 800;
    color: #d4376e;
    margin-top: 2px
}

.btn-logout-game {
    background: rgb(255 100 150 / .12);
    color: #ff6b9d;
    border: 1px solid rgb(255 100 150 / .35);
    border-radius: var(--rounded-md);
    transition: all 0.2s ease;
    cursor: pointer
}

.btn-logout-game:hover {
    background: rgb(255 100 150 / .25);
    border-color: #ff5fa8;
    color: #fff;
    box-shadow: 0 4px 14px rgb(255 95 168 / .35)
}

/* Ambient Floating Particles in Game World */
.game-ambient-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.ambient-leaf {
    position: absolute;
    font-size: 24px;
    opacity: 0.35;
    filter: drop-shadow(0 2px 8px rgba(255, 95, 168, 0.3));
    animation: driftAmbient 16s ease-in-out infinite;
    user-select: none;
}
.ambient-leaf.l1 { top: 8%; left: 3%; animation-duration: 18s; animation-delay: 0s; }
.ambient-leaf.l2 { top: 25%; right: 4%; font-size: 20px; animation-duration: 14s; animation-delay: 2s; }
.ambient-leaf.l3 { bottom: 15%; left: 4%; font-size: 22px; animation-duration: 22s; animation-delay: 4s; }
.ambient-leaf.l4 { top: 60%; right: 2%; font-size: 18px; animation-duration: 16s; animation-delay: 1s; }
.ambient-leaf.l5 { bottom: 30%; right: 6%; font-size: 24px; animation-duration: 20s; animation-delay: 5s; }
.ambient-leaf.l6 { top: 40%; left: 2%; font-size: 19px; animation-duration: 17s; animation-delay: 3s; }
.ambient-leaf.l7 { top: 85%; left: 8%; font-size: 28px; animation-duration: 25s; animation-delay: 6s; opacity: 0.25; }

@keyframes driftAmbient {
    0% { transform: translateY(0) rotate(0deg) scale(0.95); opacity: 0.25; }
    50% { transform: translateY(-24px) rotate(15deg) scale(1.08); opacity: 0.5; }
    100% { transform: translateY(0) rotate(0deg) scale(0.95); opacity: 0.25; }
}

/* 🎯 Daily Quests Widget */
.game-sidebar-section {
    width: 100%;
    margin-top: 14px;
    background: rgba(255, 255, 255, 0.65);
    border: 1.5px solid rgba(255, 143, 192, 0.35);
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 4px 14px rgba(255, 100, 170, 0.08);
    transition: all 0.25s ease;
}
.game-sidebar-section:hover {
    border-color: rgba(255, 95, 168, 0.6);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 18px rgba(255, 95, 168, 0.16);
}
.sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.sidebar-section-header .section-title {
    font-size: 13px;
    font-weight: 700;
    color: #7a2c4a;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sidebar-section-header .reward-pill {
    font-size: 11.5px;
    font-weight: 700;
    color: #b54708;
    background: #fffaeb;
    border: 1px solid #fedf89;
    border-radius: 9999px;
    padding: 2px 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.daily-quest-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.daily-quest-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 240, 247, 0.65);
    border: 1px solid rgba(255, 143, 192, 0.25);
    border-radius: 10px;
    padding: 7px 10px;
    transition: transform 0.2s ease;
}
.daily-quest-item:hover {
    transform: translateX(2px);
    background: rgba(255, 240, 247, 0.95);
}
.daily-quest-item.done {
    background: rgba(235, 254, 242, 0.75);
    border-color: rgba(78, 203, 113, 0.45);
}
.quest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.quest-name {
    color: #631e3d;
    font-weight: 600;
}
.daily-quest-item.done .quest-name {
    color: #1a7a3e;
}
.quest-count {
    font-size: 11px;
    font-weight: 700;
    color: #8c2452;
}
.daily-quest-item.done .quest-count {
    color: #1a7a3e;
}
.quest-progress-track {
    height: 6px;
    background: rgba(255, 143, 192, 0.2);
    border-radius: 9999px;
    overflow: hidden;
}
.daily-quest-item.done .quest-progress-track {
    background: rgba(78, 203, 113, 0.2);
}
.quest-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff8fc0, #ff5fa8);
    border-radius: 9999px;
    transition: width 0.4s ease;
}
.daily-quest-item.done .quest-progress-bar {
    background: linear-gradient(90deg, #4ecb71, #2eb353);
}

/* 🧙 Active Companion Widget */
.active-companion-widget {
    width: 100%;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 238, 246, 0.78) 100%);
    border: 1.5px solid rgba(255, 143, 192, 0.45);
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: 0 4px 14px rgba(255, 95, 168, 0.1);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.active-companion-widget:hover {
    transform: translateY(-2px);
    border-color: #ff5fa8;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(255, 95, 168, 0.22);
}
.companion-widget-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd9e8 0%, #fff0f7 100%);
    border: 2px solid #ff8fc0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.comp-online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ecb71;
    border: 2px solid #ffffff;
}
.companion-widget-meta {
    flex: 1;
    min-width: 0;
}
.comp-name {
    font-size: 13px;
    font-weight: 700;
    color: #631e3d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comp-buff {
    font-size: 11px;
    color: #9c2157;
    font-weight: 500;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comp-arrow {
    font-size: 18px;
    color: #ff8fc0;
    font-weight: 700;
}

/* 🔥 Adventure Streak Card */
.streak-banner-card {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1.5px solid #fed7aa;
    border-radius: 16px;
    padding: 11px 14px;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.12);
    transition: transform 0.25s ease;
}
.streak-banner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.2);
}
.streak-banner-icon {
    font-size: 26px;
    animation: flameBounce 1.8s ease-in-out infinite alternate;
}
@keyframes flameBounce {
    0% { transform: scale(1) rotate(-3deg); }
    100% { transform: scale(1.15) rotate(4deg); }
}
.streak-banner-content {
    flex: 1;
}
.streak-banner-title {
    font-size: 13px;
    font-weight: 800;
    color: #9a3412;
}
.streak-banner-sub {
    font-size: 11px;
    color: #c2410c;
    font-weight: 600;
    margin-top: 2px;
}

/* 📜 Poetic Wisdom Card */
.poetic-wisdom-card {
    margin-top: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 245, 250, 0.78) 100%);
    border: 1.5px solid rgba(255, 143, 192, 0.35);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(255, 100, 170, 0.08);
    transition: all 0.25s ease;
}
.poetic-wisdom-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 95, 168, 0.55);
    box-shadow: 0 6px 18px rgba(255, 95, 168, 0.18);
}
.wisdom-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #8c2452;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
}
.wisdom-verse {
    font-family: 'Noto Serif Thai', serif;
    font-size: 13px;
    line-height: 1.6;
    color: #4a122e;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 8px;
}
.wisdom-cite {
    font-size: 11px;
    color: #9b4d6a;
    font-weight: 500;
    display: block;
    text-align: right;
}

/* Dark mode overrides for game sidebar widgets */
[data-theme="dark"] .game-sidebar-section,
[data-theme="dark"] .poetic-wisdom-card {
    background: rgba(45, 18, 36, 0.75);
    border-color: rgba(255, 143, 192, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .sidebar-section-header .section-title {
    color: #ffd6eb;
}
[data-theme="dark"] .daily-quest-item {
    background: rgba(35, 14, 28, 0.8);
    border-color: rgba(255, 143, 192, 0.2);
}
[data-theme="dark"] .daily-quest-item.done {
    background: rgba(18, 48, 28, 0.65);
    border-color: rgba(78, 203, 113, 0.35);
}
[data-theme="dark"] .quest-name {
    color: #ffd4e8;
}
[data-theme="dark"] .active-companion-widget {
    background: linear-gradient(135deg, rgba(45, 18, 36, 0.85) 0%, rgba(35, 14, 28, 0.8) 100%);
    border-color: rgba(255, 143, 192, 0.3);
}
[data-theme="dark"] .comp-name {
    color: #ffffff;
}
[data-theme="dark"] .comp-buff {
    color: #ff8fc0;
}
[data-theme="dark"] .streak-banner-card {
    background: linear-gradient(135deg, rgba(65, 25, 15, 0.85) 0%, rgba(45, 18, 12, 0.85) 100%);
    border-color: rgba(249, 115, 22, 0.35);
}
[data-theme="dark"] .streak-banner-title {
    color: #fdba74;
}
[data-theme="dark"] .streak-banner-sub {
    color: #fed7aa;
}
[data-theme="dark"] .wisdom-verse {
    color: #ffe0ef;
}
[data-theme="dark"] .wisdom-tag,
[data-theme="dark"] .wisdom-cite {
    color: #ff8fc0;
}

.game-main {
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%
}

.game-main-3d {
    background: linear-gradient(160deg, rgb(255 240 247 / .85) 0%, rgb(255 255 255 / .95) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1.5px solid rgb(255 143 192 / .45);
    border-radius: 28px;
    box-shadow: 0 12px 36px rgb(255 100 170 / .15), inset 0 1px 1px rgb(255 255 255 / .8)
}

[data-theme="dark"] .game-main,
[data-theme="dark"] .game-main-3d {
    background: linear-gradient(160deg, rgba(45, 21, 37, 0.96) 0%, rgba(32, 14, 26, 0.98) 100%) !important;
    border: 1.5px solid rgba(255, 143, 192, 0.35) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 143, 192, 0.15) !important;
}

.game-topbar-3d {
    background: linear-gradient(90deg, rgb(255 230 242 / .92) 0%, rgb(255 217 235 / .88) 100%);
    border-bottom: 1.5px solid rgb(255 143 192 / .35);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

[data-theme="dark"] .game-topbar,
[data-theme="dark"] .game-topbar-3d {
    background: linear-gradient(90deg, rgba(61, 26, 48, 0.95) 0%, rgba(50, 20, 39, 0.95) 100%) !important;
    border-bottom: 1.5px solid rgba(255, 143, 192, 0.25) !important;
}

.topbar-icon-wrap {
    font-size: 28px;
    filter: drop-shadow(0 0 10px rgb(255 143 192 / .55))
}

.stage-title-gold {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #ff5fa8 0%, #d4376e 50%, #ff8fc0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    text-shadow: none
}

.stage-subtitle-thai {
    font-size: 13.5px;
    color: #c485a0;
    font-family: var(--font-body)
}

.coins-display-3d {
    background: linear-gradient(135deg, rgb(255 207 119 / .25) 0%, rgb(255 180 80 / .15) 100%);
    border: 1.5px solid rgb(255 207 119 / .55);
    border-radius: 20px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c47f00;
    box-shadow: 0 4px 14px rgb(255 200 80 / .2), inset 0 1px 1px rgb(255 255 255 / .5);
    transition: transform 0.2s ease, box-shadow 0.2s ease
}

[data-theme="dark"] .coins-display-3d {
    background: linear-gradient(135deg, rgba(255, 207, 119, 0.15) 0%, rgba(255, 180, 80, 0.08) 100%) !important;
    border-color: rgba(255, 207, 119, 0.4) !important;
    color: #ffd479 !important;
}

[data-theme="dark"] .coins-display-3d .coin-count {
    color: #ffd479 !important;
}

[data-theme="dark"] .stage-subtitle-thai {
    color: #f0b8d0 !important;
}

.coins-display-3d:hover {
    transform: scale(1.05);
    border-color: #ffcf77;
    box-shadow: 0 6px 20px rgb(255 200 80 / .35)
}

.coin-icon {
    font-size: 18px;
    animation: coinWobble 3s ease-in-out infinite
}

@keyframes coinWobble {

    0%,
    100% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(15deg)
    }
}

.coin-count {
    font-family: var(--font-code);
    font-size: 16px;
    font-weight: 800;
    color: #7a5200
}

.coin-unit {
    font-size: 12.5px;
    color: #c47f00;
    font-weight: 700
}

.game-view {
    padding: 24px;
    flex: 1;
    background: #fff0;
    color: #e2e8f0;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
    perspective: 1200px
}

.game-view .card {
    background: linear-gradient(150deg, rgb(255 240 247 / .88) 0%, rgb(255 255 255 / .96) 100%);
    border: 1.5px solid rgb(255 143 192 / .35);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 20px;
    box-sizing: border-box;
    width: 100%;
    color: #7a2c4a;
    box-shadow: 0 8px 24px rgb(255 100 170 / .12)
}

[data-theme="dark"] .game-view .card {
    background: linear-gradient(150deg, rgba(61, 26, 48, 0.95) 0%, rgba(45, 21, 37, 0.98) 100%) !important;
    border: 1.5px solid rgba(255, 143, 192, 0.45) !important;
    color: #ffe0ef !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 143, 192, 0.20) !important;
}

[data-theme="dark"] .game-view .card-title,
[data-theme="dark"] .game-view .card .card-title {
    color: #ff8fc0 !important;
}

[data-theme="dark"] .game-view .card p,
[data-theme="dark"] .game-view .card .text-gray {
    color: #f0b8d0 !important;
}

[data-theme="dark"] .game-view .card .exp-bar {
    background: rgba(25, 10, 20, 0.85) !important;
    border: 1px solid rgba(255, 143, 192, 0.25) !important;
}

.game-view .card-title {
    color: #d4376e;
    font-family: var(--font-display);
    font-weight: 800
}

.game-view .card:last-child {
    margin-bottom: 0
}

.menu-panel-glass {
    background: linear-gradient(160deg, rgb(255 240 247 / .88) 0%, rgb(255 217 232 / .95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgb(255 143 192 / .45);
    border-radius: 28px;
    box-shadow: 0 12px 36px rgb(255 100 170 / .15), inset 0 1px 1px rgb(255 255 255 / .8);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: border-color 0.3s ease
}

[data-theme="dark"] .menu-panel-glass {
    background: linear-gradient(160deg, rgba(45, 21, 37, 0.95) 0%, rgba(32, 14, 26, 0.98) 100%) !important;
    border: 1.5px solid rgba(255, 143, 192, 0.35) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 143, 192, 0.15) !important;
}

.menu-panel-glass:hover {
    border-color: rgb(255 95 168 / .75)
}

.menu-panel-header {
    padding: 0 8px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgb(255 143 192 / .25)
}

.menu-panel-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: #d4376e
}

.menu-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1.5px solid #fff0;
    border-radius: var(--rounded-md);
    background: rgb(255 217 232 / .5);
    color: #9b4d6a;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 700;
    font-family: var(--font-body);
    transition: all 0.22s var(--ease-spring);
    box-shadow: none;
    text-align: left;
    width: 100%
}

[data-theme="dark"] .menu-btn {
    background: rgba(61, 26, 48, 0.6) !important;
    border: 1.5px solid rgba(255, 143, 192, 0.15) !important;
    color: #f0b8d0 !important;
}

[data-theme="dark"] .menu-btn:hover {
    background: rgba(80, 32, 62, 0.9) !important;
    border-color: rgba(255, 143, 192, 0.45) !important;
    color: #ff8fc0 !important;
}

.menu-btn:hover {
    background: rgb(255 143 192 / .22);
    border-color: rgb(255 143 192 / .55);
    color: #d4376e;
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgb(255 100 170 / .15)
}

.menu-btn.active {
    background: linear-gradient(90deg, rgb(255 143 192 / .3) 0%, rgb(255 217 232 / .7) 100%);
    border-color: #ff8fc0;
    color: #d4376e;
    font-weight: 800;
    box-shadow: 0 0 16px rgb(255 143 192 / .25);
    position: relative
}

.menu-btn.active::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 4px;
    background: #ff8fc0;
    box-shadow: 0 0 8px #ff8fc0
}

.menu-btn-admin {
    background: rgb(255 143 192 / .15) !important;
    border: 1px solid rgb(255 143 192 / .5) !important;
    color: #d4376e !important
}

.menu-btn-admin:hover {
    background: rgb(255 143 192 / .3) !important;
    box-shadow: 0 6px 18px rgb(255 143 192 / .25) !important
}

.menu-btn-subtle {
    background: transparent !important;
    border: 1px solid rgb(255 143 192 / .25) !important;
    color: #c485a0 !important
}

.menu-btn-subtle:hover {
    background: rgb(255 143 192 / .1) !important;
    border-color: rgb(255 143 192 / .5) !important;
    color: #d4376e !important
}

.menu-btn-logout {
    background: rgb(255 100 150 / .12) !important;
    border: 1px solid rgb(255 100 150 / .3) !important;
    color: #ff6b9d !important
}

.menu-btn-logout:hover {
    background: rgb(255 100 150 / .25) !important;
    border-color: #ff5fa8 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgb(255 95 168 / .3) !important
}

.landing-container {
    background: linear-gradient(135deg, #fde9f0 0%, #fff0f7 50%, #ffd9e8 100%);
    min-height: 100vh;
    color: #7a2c4a;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease
}

[data-theme="dark"] .landing-container {
    background: #2d1525 !important;
    background-image: radial-gradient(circle at 20% 20%, rgb(100 30 60 / .55) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgb(80 20 50 / .45) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg opacity='0.08'%3E%3Ctext x='8' y='22' font-size='16' fill='%23ff8fc0'%3E%E2%99%A5%3C/text%3E%3Ctext x='44' y='50' font-size='12' fill='%23ffb3d4'%3E%E2%98%85%3C/text%3E%3Ctext x='60' y='20' font-size='10' fill='%23ff8fc0'%3E%E2%9D%80%3C/text%3E%3Ctext x='20' y='68' font-size='13' fill='%23ffcce0'%3E%E2%99%A5%3C/text%3E%3Ctext x='56' y='72' font-size='9' fill='%23ff8fc0'%3E%E2%98%85%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
    color: #ffe0ef !important
}

.landing-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.landing-nav-wrap {
    background: rgb(255 240 247 / .88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgb(255 143 192 / .3);
    box-shadow: 0 4px 24px rgb(255 100 170 / .12);
    position: sticky;
    top: 0;
    z-index: 100
}

.landing-brand {
    font-family: var(--font-display);
    font-size: 22px;
    color: #d4376e;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    text-shadow: 0 0 16px rgb(255 100 170 / .3)
}

.brand-logo-img {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgb(255 95 168 / .4);
    border: 2px solid #fff;
    transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.3s ease
}

.hero-mascot-img {
    width: 140px;
    height: 140px;
    border-radius: 32px;
    object-fit: cover;
    box-shadow: 0 16px 36px rgb(212 55 110 / .4), 0 0 24px rgb(255 255 255 / .6);
    border: 4px solid #fff;
    transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1)
}

.hero-mascot-img:hover {
    transform: scale(1.08) rotate(-4deg)
}

.landing-brand:hover .brand-logo-img {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 6px 20px rgb(255 95 168 / .55)
}

.footer-logo-img {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgb(255 95 168 / .3);
    border: 1.5px solid #fff
}

.topbar-logo-img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 3px 12px rgb(255 95 168 / .35);
    border: 2px solid #fff;
    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1)
}

.topbar-logo-img:hover {
    transform: scale(1.1) rotate(-4deg)
}

.landing-brand .mark {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff5fa8, #ff8fc0);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 0 16px rgb(255 100 170 / .45);
    border: 2px solid rgb(255 255 255 / .7)
}

.landing-actions {
    display: flex;
    gap: 10px;
    align-items: center
}

.hero-night {
    background-color: #ffe6f2;
    background-image: 
        radial-gradient(ellipse 65% 55% at 20% 25%, rgb(255 110 180 / .42) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 20%, rgb(212 168 240 / .40) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 50% 85%, rgb(255 195 130 / .35) 0%, transparent 60%),
        linear-gradient(165deg, #fff0f7 0%, #ffd6e7 35%, #fcceea 70%, #ffdeef 100%);
    color: #4a122e;
    position: relative;
    overflow: hidden;
    padding: 72px 24px 80px;
    text-align: center;
    border-bottom: 1.5px solid rgba(255, 143, 192, 0.4);
}

.hero-night::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg opacity='0.42'%3E%3Ctext x='14' y='28' font-size='22' fill='%23ff4d94'%3E%E2%99%A5%3C/text%3E%3Ctext x='72' y='24' font-size='18' fill='%23a855f7'%3E%E2%9C%BF%3C/text%3E%3Ctext x='112' y='42' font-size='16' fill='%230ea5e9'%3E%E2%9C%A6%3C/text%3E%3Ctext x='30' y='74' font-size='18' fill='%23f59e0b'%3E%E2%98%85%3C/text%3E%3Ctext x='88' y='78' font-size='20' fill='%23ec4899'%3E%E2%99%A5%3C/text%3E%3Ctext x='10' y='110' font-size='17' fill='%238b5cf6'%3E%E2%9C%BF%3C/text%3E%3Ctext x='54' y='124' font-size='15' fill='%2306b6d4'%3E%E2%9C%A6%3C/text%3E%3Ctext x='116' y='116' font-size='19' fill='%23f97316'%3E%E2%98%85%3C/text%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0
}

.hero-night canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: normal !important;
    opacity: 0.95 !important;
}

.hero-night::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgb(255 100 168 / .12) 0%, rgb(255 143 192 / .08) 40%, rgb(255 200 225 / .10) 70%, rgb(255 143 192 / .12) 100%);
    pointer-events: none;
    z-index: 2
}

/* Floating Distinct Interactive Stickers */
.hero-sticker-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.hero-sticker {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(255, 143, 192, 0.6);
    border-radius: 9999px;
    padding: 7px 16px;
    box-shadow: 0 6px 20px rgba(255, 95, 168, 0.22);
    backdrop-filter: blur(10px);
    user-select: none;
}
.hero-sticker.s-icon-1,
.hero-sticker.s-icon-2 {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(255, 95, 168, 0.25);
}
.hero-sticker .stk-icon {
    font-size: 16px;
}
.hero-sticker .stk-text {
    font-size: 13px;
    font-weight: 700;
    color: #6e1742;
}

/* Center Content & Hierarchy */
.hero-center-content {
    position: relative;
    z-index: 5;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Mascot Glow */
.hero-mascot-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 14px;
}
.hero-mascot-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 95, 168, 0.5) 0%, rgba(255, 179, 212, 0.28) 50%, transparent 75%);
    filter: blur(14px);
    animation: auraPulse 4s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes auraPulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.95; }
}

/* Announcement Pill */
.hero-badge-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    width: 100%;
}
.hero-announcement-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 238, 246, 0.9) 100%);
    border: 1.5px solid rgba(255, 143, 192, 0.6);
    padding: 7px 22px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    color: #7a1d48;
    box-shadow: 0 6px 20px rgba(255, 100, 170, 0.18);
    cursor: default;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-announcement-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 95, 168, 0.28);
}
.hero-announcement-pill .pill-sparkle {
    font-size: 16px;
}
.hero-announcement-pill .pill-arrow {
    color: #ff5fa8;
    font-size: 13px;
}

/* Hero Title - Force Block & Clear Alignment */
.hero-night h1,
.hero-title,
.hero-night .title-reveal-3d {
    display: block !important;
    width: 100% !important;
    max-width: 920px !important;
    margin: 14px auto 18px auto !important;
    clear: both !important;
    text-align: center !important;
    font-size: clamp(34px, 5.5vw, 56px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
    color: #380c21 !important;
    background: linear-gradient(135deg, #380c21 0%, #68153b 45%, #a61c56 95%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 14px rgba(255, 95, 168, 0.25)) !important;
    position: relative !important;
    z-index: 4 !important;
}

.hero-night .tagline {
    font-size: 17.5px;
    color: #5a1a39;
    margin: 0 auto 32px;
    max-width: 640px;
    line-height: 1.65;
    font-family: var(--font-body);
    font-weight: 500;
    text-align: center;
}

.hero-night .actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 5;
    position: relative;
    width: 100%;
}

.hero-night .btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: #681840;
    border: 2px solid rgba(255, 143, 192, 0.65);
    backdrop-filter: blur(10px);
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(255, 100, 170, 0.14);
}

.hero-night .btn-secondary:hover {
    background: #ffffff;
    border-color: #ff5fa8;
    color: #3f0e26;
    box-shadow: 0 8px 24px rgba(255, 95, 168, 0.25);
}

/* Feature Highlight Chips */
.hero-feature-chips {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 32px;
    z-index: 5;
    position: relative;
    width: 100%;
}
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 143, 192, 0.5);
    backdrop-filter: blur(12px);
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #631e3d;
    box-shadow: 0 4px 14px rgba(255, 143, 192, 0.15);
    transition: all 0.25s ease;
}
.hero-chip:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.98);
    border-color: #ff5fa8;
    box-shadow: 0 6px 20px rgba(255, 95, 168, 0.25);
}
.hero-chip .chip-icon {
    font-size: 16px;
}

.hero-night .hero-meta {
    margin-top: 28px;
    font-size: 14px;
    color: #7a2c4a;
}

.hero-band {
    max-width: 920px;
    margin: var(--spacing-xl) auto var(--spacing-section) auto;
    padding: var(--spacing-xxl) var(--spacing-xl);
    text-align: center;
    position: relative
}

.hero-band h1 {
    font-size: 52px;
    margin-bottom: var(--spacing-md)
}

.hero-band p.tagline {
    font-size: 18px;
    color: var(--ink-muted);
    margin-bottom: var(--spacing-xl);
    line-height: 1.5
}

.hero-band .actions {
    display: flex;
    gap: 12px;
    justify-content: center
}

.hero-search-pill {
    max-width: 640px;
    margin: 32px auto 0;
    background: #fff;
    border-radius: var(--rounded-md);
    padding: 16px 16px 16px 20px;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left
}

.features-section {
    padding: 88px 0 108px;
    background: linear-gradient(180deg, #fff0f7 0%, #fde9f0 50%, #ffd9e8 100%);
    position: relative;
    border-top: 1px solid rgb(255 143 192 / .25)
}

.features-section .section-head {
    text-align: center;
    margin-bottom: 56px
}

.features-section .section-head .eyebrow {
    color: #ff5fa8;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px
}

.features-section .section-head h2 {
    margin-top: 8px;
    font-size: 42px;
    letter-spacing: -.02em;
    color: #d4376e;
    font-family: var(--font-display);
    text-shadow: none
}

.features-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.feature-card {
    background: linear-gradient(145deg, rgb(255 240 247 / .85) 0%, rgb(255 255 255 / .95) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 24px;
    padding: 0;
    border: 1.5px solid rgb(255 143 192 / .4);
    box-shadow: 0 8px 28px rgb(255 100 170 / .12), inset 0 1px 1px rgb(255 255 255 / .8);
    overflow: hidden;
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease, border-color 0.3s ease
}

.feature-card:hover {
    border-color: rgb(255 95 168 / .8) !important;
    box-shadow: 0 16px 40px rgb(255 100 170 / .2), 0 0 20px rgb(255 143 192 / .2) !important
}

.feature-card .sticker-band {
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    border-bottom: 1px solid rgb(255 143 192 / .2)
}

.feature-card .sticker-band.sky {
    background: radial-gradient(circle, rgb(168 216 240 / .45) 0%, rgb(255 240 247 / .8) 100%)
}

.feature-card .sticker-band.purple {
    background: radial-gradient(circle, rgb(212 168 240 / .45) 0%, rgb(255 240 247 / .8) 100%)
}

.feature-card .sticker-band.teal {
    background: radial-gradient(circle, rgb(168 240 224 / .45) 0%, rgb(255 240 247 / .8) 100%)
}

.feature-card .feature-body {
    padding: 28px
}

.feature-card h3 {
    margin-bottom: 10px;
    font-size: 22px;
    font-family: var(--font-display);
    font-weight: 800;
    color: #d4376e;
    letter-spacing: -.01em
}

.feature-card p {
    color: rgb(122 44 74 / .78);
    font-size: 15px;
    line-height: 1.6
}

.site-footer {
    background: #fde9f0;
    border-top: 1px solid rgb(255 143 192 / .3);
    padding: 64px 32px 32px;
    color: #7a2c4a
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px
}

.site-footer h4 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: #d4376e;
    margin-bottom: 14px
}

.site-footer p,
.site-footer a {
    font-size: 14px;
    color: #f0b8d0 !important;
    text-decoration: none;
    line-height: 1.8;
    transition: color 0.2s ease
}

.site-footer a:hover {
    color: #ff5fa8
}

.legal-band {
    max-width: 1200px;
    margin: 32px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgb(255 143 192 / .2);
    font-size: 13px;
    color: rgb(122 44 74 / .5)
}

.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fde9f0 0%, #fff0f7 50%, #ffd9e8 100%);
    padding: 36px 20px;
    position: relative;
    overflow-x: hidden;
}

[data-theme="dark"] .auth-container {
    background: #2d1525 !important;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(100, 30, 60, 0.55) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(80, 20, 50, 0.45) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg opacity='0.08'%3E%3Ctext x='8' y='22' font-size='16' fill='%23ff8fc0'%3E%E2%99%A5%3C/text%3E%3Ctext x='44' y='50' font-size='12' fill='%23ffb3d4'%3E%E2%98%85%3C/text%3E%3Ctext x='60' y='20' font-size='10' fill='%23ff8fc0'%3E%E2%9D%80%3C/text%3E%3Ctext x='20' y='68' font-size='13' fill='%23ffcce0'%3E%E2%99%A5%3C/text%3E%3Ctext x='56' y='72' font-size='9' fill='%23ff8fc0'%3E%E2%98%85%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
    color: #ffe0ef !important;
}

/* Ambient Floating Particles in Auth */
.auth-ambient-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.auth-particle {
    position: absolute;
    font-size: 24px;
    opacity: 0.35;
    filter: drop-shadow(0 2px 6px rgba(255, 95, 168, 0.25));
    animation: driftAuth 18s ease-in-out infinite;
    user-select: none;
}
.auth-particle.ap1 { top: 10%; left: 6%; animation-duration: 20s; }
.auth-particle.ap2 { top: 18%; right: 8%; font-size: 20px; animation-duration: 16s; animation-delay: 2s; }
.auth-particle.ap3 { bottom: 12%; left: 8%; font-size: 22px; animation-duration: 22s; animation-delay: 4s; }
.auth-particle.ap4 { top: 65%; right: 5%; font-size: 18px; animation-duration: 17s; animation-delay: 1s; }
.auth-particle.ap5 { bottom: 25%; right: 10%; font-size: 24px; animation-duration: 19s; animation-delay: 5s; }
.auth-particle.ap6 { top: 45%; left: 4%; font-size: 19px; animation-duration: 15s; animation-delay: 3s; }
.auth-particle.ap7 { top: 80%; left: 12%; font-size: 30px; animation-duration: 26s; animation-delay: 6s; opacity: 0.25; }

@keyframes driftAuth {
    0% { transform: translateY(0) rotate(0deg) scale(0.95); opacity: 0.25; }
    50% { transform: translateY(-26px) rotate(14deg) scale(1.1); opacity: 0.5; }
    100% { transform: translateY(0) rotate(0deg) scale(0.95); opacity: 0.25; }
}

/* 2-Column Responsive Wrapper */
.auth-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .auth-wrapper {
        grid-template-columns: 1fr;
        max-width: 480px;
        gap: 24px;
    }
    .auth-showcase {
        order: 2;
        padding: 16px 8px;
    }
}

/* Left Showcase */
.auth-showcase {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.showcase-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(255, 143, 192, 0.5);
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    color: #8c2452;
    box-shadow: 0 4px 14px rgba(255, 100, 170, 0.12);
    align-self: flex-start;
}
.showcase-title {
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.25;
    color: #3e0e24;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.showcase-highlight {
    background: linear-gradient(135deg, #d4376e 0%, #ff5fa8 60%, #ff8fc0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.showcase-desc {
    font-size: 15px;
    line-height: 1.65;
    color: #7a2c4a;
    font-weight: 500;
}
.showcase-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 6px 0;
}
.showcase-feature-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1.5px solid rgba(255, 143, 192, 0.35);
    border-radius: 18px;
    padding: 12px 16px;
    box-shadow: 0 6px 18px rgba(255, 100, 170, 0.08);
    transition: all 0.25s ease;
}
.showcase-feature-card:hover {
    transform: translateX(4px);
    background: #ffffff;
    border-color: #ff5fa8;
    box-shadow: 0 8px 24px rgba(255, 95, 168, 0.18);
}
.feature-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.feature-icon-box.f-combat {
    background: #ffe4ef;
    border: 1px solid #ffb3d4;
}
.feature-icon-box.f-bard {
    background: #f3e8ff;
    border: 1px solid #d8b4fe;
}
.feature-icon-box.f-ai {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
}
.feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.feature-text strong {
    font-size: 14px;
    color: #4a122e;
    font-weight: 700;
}
.feature-text span {
    font-size: 12.5px;
    color: #8c2e55;
    line-height: 1.45;
}
.showcase-meta-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.showcase-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #631e3d;
    font-weight: 600;
}
.counter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ecb71;
    box-shadow: 0 0 8px #4ecb71;
    animation: dotBlink 2s ease-in-out infinite alternate;
}
@keyframes dotBlink {
    0% { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
}
.showcase-bonus-pill {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fed7aa;
    color: #9a3412;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.08);
}

/* Right Auth Box */
.auth-box {
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 143, 192, 0.45);
    border-radius: 28px;
    padding: 32px 28px;
    box-shadow: 0 16px 48px rgba(255, 100, 170, 0.18), 0 0 32px rgba(255, 143, 192, 0.15);
    color: #7a2c4a;
    position: relative;
    z-index: 10;
}

[data-theme="dark"] .auth-box {
    background: rgba(61, 26, 48, 0.92) !important;
    border: 2px solid rgba(255, 143, 192, 0.35) !important;
    color: #ffe0ef !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 32px rgba(255, 143, 192, 0.12) !important;
}

/* Avatar Preview Halo */
.auth-avatar-halo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-avatar-halo {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 143, 192, 0.4) 0%, transparent 70%);
    animation: auraPulse 3.5s ease-in-out infinite alternate;
}
.auth-avatar-display {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: radial-gradient(circle, #fff0f7 0%, #ffd9e8 100%);
    border: 2.5px solid #ff8fc0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    box-shadow: 0 8px 24px rgba(255, 95, 168, 0.28);
    position: relative;
    z-index: 2;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.auth-avatar-display:hover {
    transform: scale(1.08) rotate(-4deg);
}

/* Tab Bar */
.auth-tab-bar {
    display: flex;
    background: rgba(255, 238, 246, 0.85);
    border: 1px solid rgba(255, 143, 192, 0.35);
    border-radius: 9999px;
    padding: 4px;
    margin-bottom: 20px;
    gap: 4px;
}
.auth-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 9999px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #8c2e55;
    cursor: pointer;
    transition: all 0.25s ease;
}
.auth-tab-btn.active {
    background: #ffffff;
    color: #ff5fa8;
    box-shadow: 0 3px 10px rgba(255, 95, 168, 0.2);
}

/* Starter Avatar Grid */
.starter-avatar-section {
    margin-bottom: 16px;
    background: rgba(255, 240, 247, 0.55);
    border: 1.5px dashed rgba(255, 143, 192, 0.4);
    border-radius: 16px;
    padding: 10px 12px;
}
.starter-avatar-label {
    display: block;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #7a2c4a !important;
    margin-bottom: 8px !important;
    font-family: var(--font-body) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.starter-avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.avatar-choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #ffffff;
    border: 1.5px solid rgba(255, 143, 192, 0.35);
    border-radius: 12px;
    padding: 6px 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar-choice-btn:hover {
    transform: translateY(-2px);
    border-color: #ff8fc0;
    background: #fff0f7;
}
.avatar-choice-btn.active {
    background: #ffe4f0;
    border-color: #ff5fa8;
    box-shadow: 0 3px 10px rgba(255, 95, 168, 0.3);
    transform: scale(1.05);
}
.avatar-choice-btn .choice-emoji {
    font-size: 20px;
}
.avatar-choice-btn .choice-name {
    font-size: 10px;
    font-weight: 700;
    color: #8c2452;
}

/* Password eye button */
.input-with-action {
    position: relative;
    display: flex;
    align-items: center;
}
.input-with-action input {
    padding-right: 42px !important;
}
.input-eye-btn {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.input-eye-btn:hover {
    opacity: 1;
}

/* Dark mode overrides for Auth components */
[data-theme="dark"] .showcase-badge {
    background: rgba(55, 20, 42, 0.85);
    border-color: rgba(255, 143, 192, 0.35);
    color: #ffd6eb;
}
[data-theme="dark"] .showcase-title {
    color: #ffffff;
}
[data-theme="dark"] .showcase-desc {
    color: #ffd0e5;
}
[data-theme="dark"] .showcase-feature-card {
    background: rgba(45, 18, 36, 0.8);
    border-color: rgba(255, 143, 192, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .feature-text strong {
    color: #ffffff;
}
[data-theme="dark"] .feature-text span {
    color: #ffb8d6;
}
[data-theme="dark"] .feature-icon-box.f-combat {
    background: rgba(80, 25, 55, 0.7);
    border-color: rgba(255, 143, 192, 0.4);
}
[data-theme="dark"] .feature-icon-box.f-bard {
    background: rgba(60, 25, 80, 0.7);
    border-color: rgba(212, 168, 240, 0.4);
}
[data-theme="dark"] .feature-icon-box.f-ai {
    background: rgba(25, 55, 80, 0.7);
    border-color: rgba(168, 216, 240, 0.4);
}
[data-theme="dark"] .showcase-counter {
    color: #ffe0ef;
}
[data-theme="dark"] .showcase-bonus-pill {
    background: linear-gradient(135deg, rgba(65, 25, 15, 0.85) 0%, rgba(45, 18, 12, 0.85) 100%);
    border-color: rgba(249, 115, 22, 0.35);
    color: #fed7aa;
}
[data-theme="dark"] .auth-tab-bar {
    background: rgba(40, 16, 32, 0.85);
    border-color: rgba(255, 143, 192, 0.25);
}
[data-theme="dark"] .auth-tab-btn {
    color: #ffb8d6;
}
[data-theme="dark"] .auth-tab-btn.active {
    background: rgba(70, 26, 52, 0.95);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .starter-avatar-section {
    background: rgba(40, 16, 32, 0.6);
    border-color: rgba(255, 143, 192, 0.3);
}
[data-theme="dark"] .starter-avatar-label {
    color: #ffd6eb !important;
}
[data-theme="dark"] .avatar-choice-btn {
    background: rgba(50, 20, 40, 0.85);
    border-color: rgba(255, 143, 192, 0.25);
}
[data-theme="dark"] .avatar-choice-btn.active {
    background: rgba(85, 30, 65, 0.95);
    border-color: #ff8fc0;
}
[data-theme="dark"] .avatar-choice-btn .choice-name {
    color: #ffd6eb;
}
[data-theme="dark"] .auth-avatar-display {
    background: radial-gradient(circle, #3d1a30 0%, #25101e 100%);
    border-color: #ff8fc0;
}

.auth-box .display-lg {
    font-size: 28px;
    margin-bottom: 8px;
    color: #d4376e;
    font-family: var(--font-display)
}

.auth-box label {
    color: #9b4d6a;
    font-weight: 600
}

.cute-mascot {
    display: none
}

.form-group {
    margin-bottom: var(--spacing-md);
    text-align: left
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-code);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--ink-muted)
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    height: 44px;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: var(--canvas);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    transition: var(--transition)
}

.form-group input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: none
}

.auth-switch {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: 14px;
    color: var(--body-text)
}

.auth-switch a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500
}

.auth-switch a:hover {
    text-decoration: underline
}

.battle-scene {
    background: linear-gradient(160deg, rgb(255 240 247 / .9) 0%, rgb(255 255 255 / .96) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 28px;
    padding: 24px 28px;
    border: 1.5px solid rgb(255 143 192 / .45);
    margin-bottom: 20px;
    box-shadow: 0 8px 28px rgb(255 100 170 / .14), inset 0 1px 1px rgb(255 255 255 / .8);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease
}

.timer-bar {
    width: 100%;
    height: 8px;
    background: rgb(255 217 232 / .55);
    border: 1px solid rgb(255 143 192 / .25);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 22px;
    position: relative
}

.timer-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff5fa8 0%, #ff8fc0 50%, #ffb3d4 100%);
    box-shadow: 0 0 10px rgb(255 143 192 / .7);
    border-radius: 10px;
    transition: width 0.4s ease
}

.battle-arena {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 20px 10px;
    gap: 16px
}

.battle-entity {
    flex: 1;
    text-align: center;
    padding: 14px 16px;
    background: rgb(255 240 247 / .8);
    border-radius: 22px;
    border: 1.5px solid rgb(255 143 192 / .35);
    box-shadow: 0 4px 16px rgb(255 100 170 / .12);
    transition: all 0.3s ease
}

.battle-entity .entity-sprite {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 8px;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 6px 12px rgb(0 0 0 / .35))
}

.battle-entity.player .entity-sprite {
    animation-delay: 0s
}

.battle-entity.enemy .entity-sprite {
    animation-delay: 1.5s
}

.battle-entity .entity-name {
    font-family: var(--font-display);
    color: #d4376e;
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 8px
}

.battle-entity .entity-hp-track {
    background: rgb(255 217 232 / .6);
    height: 10px;
    border-radius: var(--rounded-full);
    overflow: hidden;
    border: 1px solid rgb(255 143 192 / .3)
}

.battle-entity.player .entity-hp-fill {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
    height: 100%;
    transition: width 0.4s ease
}

.battle-entity.enemy .entity-hp-fill {
    background: linear-gradient(90deg, #EF4444 0%, #F87171 100%);
    height: 100%;
    transition: width 0.4s ease
}

.battle-entity .entity-sub-stat {
    font-size: 12px;
    color: #c485a0;
    font-weight: 700;
    margin-top: 5px
}

.battle-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.vs-text {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #ff5fa8 0%, #ff8fc0 100%);
    border: 2px solid #ff8fc0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgb(255 100 170 / .35);
    animation: pulseGlow 2.5s infinite
}

.battle-question {
    background: linear-gradient(160deg, rgb(255 240 247 / .9) 0%, rgb(255 255 255 / .96) 100%);
    border-radius: 24px;
    padding: 24px;
    border: 1.5px solid rgb(255 143 192 / .4);
    box-shadow: 0 8px 24px rgb(255 100 170 / .12)
}

.question-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    align-items: center;
    gap: 12px
}

.question-header-actions {
    display: flex;
    gap: 10px;
    align-items: center
}

.question-count-text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--body-text)
}

.question-type-badge {
    display: inline-block;
    background: rgb(255 217 232 / .7);
    color: #d4376e;
    border: 1px solid rgb(255 143 192 / .45);
    padding: 4px 12px;
    border-radius: var(--rounded-full);
    font-size: 12px;
    font-weight: 700
}

.question-text {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 22px;
    line-height: 1.5
}

.battle-input-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%
}

.battle-input-inner {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center
}

.battle-input-icon {
    position: absolute;
    left: 16px;
    font-size: 18px;
    color: #94A3B8;
    pointer-events: none
}

.fill-blank-input {
    width: 100%;
    padding: 14px 18px 14px 46px;
    font-size: 16px;
    font-family: var(--font-body);
    color: #7a2c4a;
    background: rgb(255 255 255 / .95);
    border: 2px solid rgb(255 143 192 / .45);
    border-radius: var(--rounded-md);
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box
}

.fill-blank-input:hover {
    border-color: #ff8fc0
}

.fill-blank-input:focus {
    border-color: #ff5fa8;
    background: rgb(255 255 255);
    box-shadow: 0 0 0 3px rgb(255 143 192 / .2)
}

.fill-blank-input::placeholder {
    color: #c485a0
}

.btn-submit-battle {
    padding: 14px 28px;
    height: auto;
    border-radius: var(--rounded-full);
    font-size: 15.5px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgb(255 100 170 / .35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.25s var(--ease-spring)
}

.btn-submit-battle:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 28px rgb(255 100 170 / .5)
}

.btn-submit-battle:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important
}

.compose-textarea {
    width: 100%;
    padding: 16px;
    font-size: 15.5px;
    font-family: var(--font-body);
    color: #7a2c4a;
    background: rgb(255 255 255 / .95);
    border: 2px solid rgb(255 143 192 / .45);
    border-radius: var(--rounded-md);
    outline: none;
    resize: vertical;
    transition: all 0.25s ease;
    box-sizing: border-box;
    line-height: 1.6
}

.compose-textarea:focus {
    border-color: #ff5fa8;
    box-shadow: 0 0 0 3px rgb(255 143 192 / .2)
}

.compose-textarea::placeholder {
    color: #c485a0
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px
}

.option-btn {
    background: linear-gradient(145deg, rgb(255 240 247 / .9) 0%, rgb(255 255 255 / .96) 100%);
    border: 1.5px solid rgb(255 143 192 / .35);
    color: #7a2c4a;
    padding: 16px 20px;
    border-radius: 20px;
    text-align: left;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.25s cubic-bezier(.34, 1.56, .64, 1);
    box-shadow: 0 4px 14px rgb(255 100 170 / .08)
}

.option-btn:hover {
    background: linear-gradient(145deg, rgb(255 217 232 / .95) 0%, rgb(255 240 247 / .98) 100%);
    border-color: #ff8fc0;
    color: #d4376e;
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgb(255 100 170 / .2)
}

.option-btn.selected {
    background: var(--primary);
    color: #FFF;
    border-color: var(--primary)
}

.option-btn.correct {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 24px rgb(16 185 129 / .35) !important
}

.option-btn.wrong {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    color: #FFFFFF !important;
    border-color: #EF4444 !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 24px rgb(239 68 68 / .35) !important
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap
}

.quiz-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 13.5px;
    font-weight: 700;
    background: rgb(255 143 192 / .2);
    color: #d4376e;
    border: 1px solid rgb(255 143 192 / .5);
    box-shadow: 0 2px 8px rgb(255 100 170 / .1)
}

.quiz-progress-wrapper {
    width: 100%;
    margin-bottom: 18px
}

.quiz-progress-track {
    width: 100%;
    height: 8px;
    background: rgb(255 217 232 / .5);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgb(255 143 192 / .25)
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff5fa8 0%, #ff8fc0 50%, #ffb3d4 100%);
    border-radius: 9999px;
    transition: width 0.45s cubic-bezier(.34, 1.56, .64, 1);
    box-shadow: 0 0 12px rgb(255 143 192 / .7)
}

.quiz-question-box {
    background: rgb(255 240 247 / .7);
    border: 1px solid rgb(255 143 192 / .25);
    border-left: 4px solid #ff8fc0;
    border-radius: 0 20px 20px 0;
    padding: 16px 20px;
    margin-bottom: 20px
}

.quiz-question-title {
    color: #7a2c4a;
    font-family: var(--font-display);
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0
}

.answer-btn {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 14px 18px !important;
    margin-bottom: 10px;
    background: linear-gradient(145deg, rgb(255 240 247 / .9) 0%, rgb(255 255 255 / .96) 100%) !important;
    border: 1.5px solid rgb(255 143 192 / .35) !important;
    border-radius: 20px !important;
    color: #7a2c4a !important;
    font-family: var(--font-body) !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: 0 4px 16px rgb(255 100 170 / .08) !important;
    transition: all 0.22s cubic-bezier(.34, 1.56, .64, 1) !important;
    user-select: none !important
}

.answer-btn:last-child {
    margin-bottom: 0
}

.answer-btn:hover:not(:disabled) {
    background: linear-gradient(145deg, rgb(255 217 232 / .95) 0%, rgb(255 240 247 / .98) 100%) !important;
    border-color: #ff8fc0 !important;
    color: #d4376e !important;
    transform: translateX(6px) !important;
    box-shadow: 0 6px 20px rgb(255 100 170 / .25), inset 0 0 12px rgb(255 143 192 / .12) !important
}

.answer-btn.selected {
    background: linear-gradient(135deg, rgb(255 143 192 / .3) 0%, rgb(255 95 168 / .5) 100%) !important;
    border-color: #ff8fc0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 0 24px rgb(255 143 192 / .5), inset 0 0 12px rgb(255 143 192 / .2) !important;
    transform: scale(1.01) !important
}

.answer-btn.correct {
    background: linear-gradient(135deg, rgb(16 185 129 / .35) 0%, rgb(5 150 105 / .7) 100%) !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 0 24px rgb(16 185 129 / .55) !important
}

.answer-btn.wrong {
    background: linear-gradient(135deg, rgb(239 68 68 / .35) 0%, rgb(220 38 38 / .7) 100%) !important;
    border-color: #EF4444 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 0 24px rgb(239 68 68 / .55) !important
}

.choice-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
    background: rgb(255 143 192 / .18) !important;
    border: 1.5px solid rgb(255 143 192 / .5) !important;
    color: #d4376e !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important
}

.answer-btn:hover:not(:disabled) .choice-badge {
    background: rgb(255 143 192 / .35) !important;
    border-color: #ff8fc0 !important;
    color: #d4376e !important
}

.answer-btn.selected .choice-badge {
    background: #ff8fc0 !important;
    color: #ffffff !important;
    border-color: #ff5fa8 !important;
    font-weight: 900 !important
}

.answer-btn.correct .choice-badge {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #34D399 !important
}

.answer-btn.wrong .choice-badge {
    background: #EF4444 !important;
    color: #FFFFFF !important;
    border-color: #F87171 !important
}

.choice-text {
    flex: 1 !important;
    text-align: left !important;
    word-break: break-word !important
}

.lesson-info-banner {
    background: linear-gradient(145deg, rgb(20 27 75 / .75) 0%, rgb(11 16 46 / .9) 100%);
    border: 1px solid rgb(212 175 55 / .25);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px rgb(0 0 0 / .25)
}

.lesson-info-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none
}

.lesson-info-left {
    display: flex;
    align-items: center;
    gap: 10px
}

.lesson-info-icon {
    font-size: 18px
}

.lesson-info-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #F7D57F;
    font-family: var(--font-display)
}

.lesson-info-subtext {
    font-size: 12px;
    color: var(--ink-muted)
}

.lesson-info-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgb(212 175 55 / .15);
    font-size: 14px;
    color: #CBD5E1;
    line-height: 1.7;
    transition: all 0.3s ease
}

.quiz-feedback-box {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 14px;
    animation: fadeIn 0.3s ease-out
}

.quiz-feedback-box.correct {
    background: rgb(16 185 129 / .15);
    border: 1.5px solid rgb(16 185 129 / .45);
    color: #34D399
}

.quiz-feedback-box.wrong {
    background: rgb(239 68 68 / .15);
    border: 1.5px solid rgb(239 68 68 / .45);
    color: #F87171
}

#submitSkillBtn {
    background: var(--gold-gradient) !important;
    color: #0B0E24 !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    padding: 13px 28px !important;
    border-radius: 14px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgb(212 175 55 / .4) !important;
    transition: all 0.22s cubic-bezier(.34, 1.56, .64, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important
}

#submitSkillBtn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgb(212 175 55 / .6) !important
}

#submitSkillBtn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important
}

.ai-feedback {
    background: linear-gradient(135deg, rgb(255 240 247 / .9) 0%, rgb(255 255 255 / .96) 100%);
    border: 1.5px solid rgb(255 143 192 / .45);
    color: #7a2c4a;
    border-radius: 22px;
    padding: 18px 22px;
    margin-top: 18px;
    box-shadow: 0 6px 20px rgb(255 100 170 / .12);
    animation: bounceSlow 0.4s ease-out
}

.ai-feedback-header {
    font-weight: 800;
    color: #d4376e;
    font-size: 15px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px
}

.ai-chat-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(150deg, rgb(255 240 247 / .9) 0%, rgb(255 255 255 / .96) 100%) !important;
    border: 1.5px solid rgb(255 143 192 / .45) !important;
    border-radius: 28px !important;
    padding: 24px !important;
    box-shadow: 0 8px 28px rgb(255 100 170 / .14) !important
}

.ai-chat-history {
    height: 380px;
    max-height: 440px;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: rgb(255 240 247 / .6);
    border: 1px solid rgb(255 143 192 / .25);
    border-radius: 22px;
    margin-bottom: 14px;
    scroll-behavior: smooth
}

.ai-chat-history::-webkit-scrollbar {
    width: 6px
}

.ai-chat-history::-webkit-scrollbar-track {
    background: rgb(255 217 232 / .3);
    border-radius: 9999px
}

.ai-chat-history::-webkit-scrollbar-thumb {
    background: rgb(255 143 192 / .45);
    border-radius: 9999px
}

.ai-chat-history::-webkit-scrollbar-thumb:hover {
    background: #ff8fc0
}

.chat-bubble {
    max-width: 86%;
    padding: 14px 18px;
    font-size: 14.5px;
    line-height: 1.7;
    word-break: break-word;
    animation: fadeIn 0.3s ease-out
}

.chat-bubble-user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgb(255 143 192 / .3) 0%, rgb(255 95 168 / .5) 100%) !important;
    border: 1.5px solid rgb(255 143 192 / .6) !important;
    border-radius: 18px 18px 4px 18px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgb(255 100 170 / .2)
}

.chat-bubble-ai {
    align-self: flex-start;
    background: linear-gradient(145deg, rgb(255 240 247 / .95) 0%, rgb(255 255 255 / .98) 100%) !important;
    border: 1.5px solid rgb(255 143 192 / .35) !important;
    border-radius: 18px 18px 18px 4px !important;
    color: #7a2c4a !important;
    box-shadow: 0 4px 14px rgb(255 100 170 / .1);
    white-space: pre-line
}

.chat-sender {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 800;
    font-size: 13.5px
}

.chat-bubble-user .chat-sender {
    color: #fff;
    justify-content: flex-end
}

.chat-bubble-ai .chat-sender {
    color: #d4376e
}

.chat-avatar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgb(255 143 192 / .2);
    font-size: 14px
}

.chat-bubble-typing {
    align-self: flex-start;
    background: rgb(255 240 247 / .9);
    border: 1px solid rgb(255 143 192 / .3);
    border-radius: 20px 20px 20px 4px;
    padding: 10px 16px;
    color: #d4376e;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 8px
}

.ai-prompt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px
}

.prompt-chip {
    background: rgb(255 143 192 / .15);
    border: 1px solid rgb(255 143 192 / .4);
    color: #d4376e;
    padding: 7px 14px;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none
}

.prompt-chip:hover {
    background: rgb(255 143 192 / .3);
    border-color: #ff8fc0;
    color: #d4376e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(255 100 170 / .2)
}

.ai-chat-footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-muted)
}

.ai-cost-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgb(255 143 192 / .15);
    border: 1px solid rgb(255 143 192 / .4);
    border-radius: 9999px;
    padding: 4px 12px;
    color: #d4376e;
    font-weight: 700;
    font-size: 12px
}

.result-card-modern {
    background: linear-gradient(160deg, rgb(255 240 247 / .95) 0%, rgb(255 255 255 / .98) 100%);
    border: 2px solid rgb(255 143 192 / .5);
    border-radius: 32px;
    padding: 36px 32px;
    box-shadow: 0 16px 48px rgb(255 100 170 / .18), 0 0 28px rgb(255 143 192 / .15);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    animation: bounceSlow 0.5s ease-out
}

.result-hero-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px
}

.result-hero-icon-wrap {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    margin-bottom: 14px
}

.result-hero-icon-wrap.passed {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 2.5px solid #34D399;
    box-shadow: 0 10px 25px rgb(16 185 129 / .25)
}

.result-hero-icon-wrap.failed {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border: 2.5px solid #F87171;
    box-shadow: 0 10px 25px rgb(239 68 68 / .2)
}

.result-hero-title {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 900;
    color: #d4376e;
    margin-bottom: 6px
}

.result-hero-subtitle {
    font-size: 15.5px;
    color: #9b4d6a;
    margin-bottom: 12px
}

.result-badge-pill {
    font-size: 13.5px;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: 20px;
    display: inline-block
}

.result-badge-pill.badge-passed {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0
}

.result-badge-pill.badge-failed {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA
}

.result-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    width: 100%;
    margin-bottom: 28px
}

.result-stat-card {
    background: rgb(255 240 247 / .8);
    border: 1.5px solid rgb(255 143 192 / .3);
    border-radius: 22px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    transition: all 0.25s ease;
    color: #7a2c4a
}

.result-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgb(0 0 0 / .05);
    border-color: var(--primary)
}

.result-stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0
}

.result-stat-card.stat-score .result-stat-icon-wrap {
    background: #FFF1F4
}

.result-stat-card.stat-score .stat-value-big {
    color: var(--primary)
}

.result-stat-card.stat-correct .result-stat-icon-wrap {
    background: #ECFDF5
}

.result-stat-card.stat-correct .stat-value-big {
    color: #059669
}

.result-stat-card.stat-wrong .result-stat-icon-wrap {
    background: #FEF2F2
}

.result-stat-card.stat-wrong .stat-value-big {
    color: #DC2626
}

.result-stat-card.stat-exp .result-stat-icon-wrap {
    background: #FFFBEB
}

.result-stat-card.stat-exp .stat-value-big {
    color: #D97706
}

.result-stat-card.stat-coins .result-stat-icon-wrap {
    background: #FFFBEB
}

.result-stat-card.stat-coins .stat-value-big {
    color: #B45309
}

.result-stat-card.stat-time .result-stat-icon-wrap {
    background: #EFF6FF
}

.result-stat-card.stat-time .stat-value-big {
    color: #2563EB
}

.stat-value-big {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 2px
}

.stat-label-muted {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--body-text)
}

.result-ai-card {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    border: 1.5px solid #DDD6FE;
    border-radius: 22px;
    padding: 22px 24px;
    text-align: left;
    margin-bottom: 24px
}

.result-ai-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #6D28D9;
    margin-bottom: 10px
}

.result-ai-body {
    font-size: 14.5px;
    line-height: 1.8;
    color: #3a3936;
    white-space: pre-line
}

.result-ai-footer {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #7C3AED;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgb(109 40 217 / .15)
}

.result-ach-container {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1.5px solid #FDE68A;
    border-radius: 22px;
    padding: 20px 24px;
    text-align: left;
    margin-bottom: 24px
}

.result-ach-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: #92400E;
    margin-bottom: 12px
}

.result-ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px
}

.result-ach-item {
    background: #FFF;
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #FCD34D
}

.result-ach-item .ach-icon {
    font-size: 28px
}

.result-ach-item .ach-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink)
}

.result-ach-item .ach-desc {
    font-size: 12px;
    color: var(--body-text)
}

.result-actions-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap
}

.btn-action-result {
    min-width: 200px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 24px
}

[data-theme="dark"] .battle-scene {
    background: rgb(45 21 37 / .95) !important;
    border-color: rgb(255 143 192 / .35) !important;
    box-shadow: 0 16px 36px rgb(0 0 0 / .4) !important
}

[data-theme="dark"] .timer-bar {
    background: rgb(30 12 25 / .85) !important
}

[data-theme="dark"] .battle-entity {
    background: rgb(37 16 30 / .9) !important;
    border-color: rgb(255 143 192 / .3) !important
}

[data-theme="dark"] .battle-entity .entity-name {
    color: #ff8fc0 !important
}

[data-theme="dark"] .battle-entity .entity-hp-track {
    background: rgb(30 12 25 / .85) !important;
    border-color: rgb(255 143 192 / .25) !important
}

[data-theme="dark"] .battle-entity .entity-sub-stat {
    color: #c490aa !important
}

[data-theme="dark"] .battle-vs .vs-text {
    background: rgb(37 16 30 / .95) !important;
    border-color: #ff8fc0 !important;
    color: #ffcf77 !important
}

[data-theme="dark"] .battle-question {
    background: rgb(37 16 30 / .95) !important;
    border-color: rgb(255 143 192 / .3) !important
}

[data-theme="dark"] .question-text {
    color: #ffe0ef !important
}

[data-theme="dark"] .option-btn {
    background: rgb(45 21 37 / .85) !important;
    border-color: rgb(255 143 192 / .3) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .option-btn:hover {
    background: rgb(255 143 192 / .2) !important;
    border-color: #ff8fc0 !important;
    color: #ffffff !important
}

[data-theme="dark"] .fill-blank-input,
[data-theme="dark"] .compose-textarea {
    background: rgb(37 16 30 / .9) !important;
    border-color: rgb(255 143 192 / .35) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .ai-feedback {
    background: rgb(45 21 37 / .92) !important;
    border-color: rgb(255 143 192 / .35) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .ai-feedback-header {
    color: #ff8fc0 !important
}

[data-theme="dark"] .result-card-modern {
    background: rgb(45 21 37 / .95) !important;
    border-color: rgb(255 143 192 / .35) !important;
    box-shadow: 0 16px 36px rgb(0 0 0 / .5) !important
}

[data-theme="dark"] .result-hero-title {
    color: #ff8fc0 !important
}

[data-theme="dark"] .result-hero-subtitle {
    color: #c490aa !important
}

[data-theme="dark"] .result-stat-card {
    background: rgb(37 16 30 / .9) !important;
    border-color: rgb(255 143 192 / .25) !important
}

[data-theme="dark"] .stat-label-muted {
    color: #c490aa !important
}

[data-theme="dark"] .result-ai-card {
    background: rgb(37 16 30 / .9) !important;
    border-color: rgb(212 168 240 / .4) !important
}

[data-theme="dark"] .result-ai-header {
    color: #d4a8f0 !important
}

[data-theme="dark"] .result-ai-body {
    color: #ffe0ef !important
}

[data-theme="dark"] .result-ai-footer {
    color: #d4a8f0 !important;
    border-top-color: rgb(255 143 192 / .25) !important
}

[data-theme="dark"] .result-ach-container {
    background: rgb(37 16 30 / .9) !important;
    border-color: rgb(255 207 119 / .35) !important
}

[data-theme="dark"] .result-ach-item {
    background: rgb(45 21 37 / .9) !important;
    border-color: rgb(255 143 192 / .25) !important
}

[data-theme="dark"] .result-ach-item .ach-name {
    color: #ffe0ef !important
}

[data-theme="dark"] .result-ach-item .ach-desc {
    color: #c490aa !important
}

.shop-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 8px
}

.shop-card-item {
    background: #FFF;
    border-radius: var(--rounded-md);
    padding: 20px;
    border: 1.5px solid var(--hairline);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: all 0.3s cubic-bezier(.34, 1.56, .64, 1)
}

.shop-card-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgb(255 183 3 / .18);
    border-color: #FFB703
}

.shop-card-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 11px;
    font-weight: 700;
    color: #744210;
    background: rgb(255 183 3 / .18);
    padding: 3px 10px;
    border-radius: 12px
}

.shop-card-icon {
    font-size: 48px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFF5F7 0%, #FFE3EB 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: inset 0 2px 6px rgb(184 134 42 / .12);
    transition: transform 0.3s ease
}

.shop-card-item:hover .shop-card-icon {
    transform: scale(1.08) rotate(4deg)
}

.shop-card-title {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.3
}

.shop-card-desc {
    font-size: 13px;
    color: var(--body-text);
    line-height: 1.45;
    margin-bottom: 16px;
    flex: 1
}

.shop-card-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px dashed var(--hairline);
    padding-top: 14px
}

.shop-card-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 800;
    font-size: 17px;
    color: #B45309
}

.btn-shop-buy {
    background: var(--gold-gradient);
    color: #451A03;
    border: none;
    padding: 10px 20px;
    border-radius: var(--rounded-md);
    font-size: 14.5px;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: 0 4px 14px rgb(255 183 3 / .35);
    transition: all 0.25s ease;
    width: 100%
}

.btn-shop-buy:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(255 183 3 / .55);
    background: linear-gradient(135deg, #FFE082 0%, #FFB703 100%)
}

.btn-shop-buy.disabled {
    background: #E2E8F0;
    color: #A0AEC0;
    box-shadow: none;
    cursor: not-allowed
}

[data-theme="dark"] .shop-card-item {
    background: rgb(61 26 48 / .9) !important;
    border-color: rgb(255 143 192 / .3) !important
}

[data-theme="dark"] .shop-card-title {
    color: #ff8fc0 !important
}

[data-theme="dark"] .shop-card-icon {
    background: rgb(255 143 192 / .12) !important
}

[data-theme="dark"] .shop-card-price {
    color: #ffcf77 !important
}

.companion-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 8px
}

.companion-card-item {
    background: #FFF;
    border-radius: var(--rounded-md);
    padding: 24px 20px 20px 20px;
    border: 2px solid var(--hairline);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: all 0.35s cubic-bezier(.34, 1.56, .64, 1)
}

.companion-card-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgb(184 134 42 / .15);
    border-color: var(--primary)
}

.companion-card-item.active {
    border-color: var(--primary);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF0F3 100%);
    box-shadow: 0 10px 28px rgb(184 134 42 / .22)
}

.active-badge {
    position: absolute;
    top: -12px;
    background: var(--primary-gradient);
    color: #FFF;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgb(184 134 42 / .35)
}

.rarity-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px
}

.rarity-badge.common {
    background: #EDF2F7;
    color: #4A5568
}

.rarity-badge.uncommon {
    background: #E6FFFA;
    color: #234E52
}

.rarity-badge.rare {
    background: #EBF8FF;
    color: #2B6CB0
}

.rarity-badge.epic {
    background: #FAF5FF;
    color: #6B46C1
}

.rarity-badge.legendary {
    background: #FEFCBF;
    color: #744210
}

.companion-avatar-wrap {
    margin-top: 8px;
    margin-bottom: 14px;
    position: relative
}

.companion-avatar {
    font-size: 52px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFF5F7 0%, #FFE3EB 100%);
    border: 3.5px solid #FFF;
    box-shadow: 0 6px 16px rgb(184 134 42 / .15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease
}

.companion-card-item:hover .companion-avatar {
    transform: scale(1.08) rotate(-4deg)
}

.companion-card-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px
}

.companion-card-title {
    font-size: 13px;
    color: var(--lms-secondary);
    margin-bottom: 14px;
    font-weight: 500
}

.companion-skill-box {
    background: #F7FAFC;
    border-radius: 16px;
    padding: 12px 14px;
    width: 100%;
    text-align: left;
    margin-bottom: 16px;
    border: 1px solid #EDF2F7;
    flex: 1
}

.companion-skill-box .skill-name {
    font-size: 13px;
    font-weight: 700;
    color: #2B6CB0;
    margin-bottom: 4px
}

.companion-skill-box .skill-desc {
    font-size: 12px;
    color: var(--body-text);
    line-height: 1.4
}

.companion-card-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.companion-price-tag {
    font-size: 16px;
    font-weight: 700;
    color: #B45309;
    margin-bottom: 2px
}

.btn-companion-action {
    width: 100%;
    padding: 11px;
    border-radius: var(--rounded-md);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-body);
    border: none;
    cursor: pointer;
    transition: all 0.25s ease
}

.btn-companion-action.btn-equip {
    background: var(--primary-gradient);
    color: #FFF;
    box-shadow: 0 4px 14px rgb(184 134 42 / .35)
}

.btn-companion-action.btn-equip:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(184 134 42 / .5)
}

.btn-companion-action.btn-active {
    background: #C6F6D5;
    color: #22543D;
    cursor: default
}

.btn-companion-action.btn-buy {
    background: var(--gold-gradient);
    color: #451A03;
    box-shadow: 0 4px 14px rgb(255 183 3 / .35)
}

.btn-companion-action.btn-buy:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(255 183 3 / .55)
}

.btn-companion-action.btn-buy.disabled {
    background: #E2E8F0;
    color: #A0AEC0;
    box-shadow: none;
    cursor: not-allowed
}

[data-theme="dark"] .companion-card-item {
    background: rgb(61 26 48 / .9) !important;
    border-color: rgb(255 143 192 / .3) !important
}

[data-theme="dark"] .companion-card-name {
    color: #ff8fc0 !important
}

.achievement-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    width: 100%
}

.achievement-card-item {
    background: #FFF;
    border-radius: var(--rounded-md);
    padding: 18px;
    border: 1.5px solid var(--hairline);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease
}

.achievement-card-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md)
}

.achievement-card-item.unlocked {
    border-color: #48BB78;
    background: linear-gradient(135deg, #FFFFFF 0%, #F0FFF4 100%)
}

.achievement-card-item.locked {
    opacity: .65;
    filter: grayscale(.8)
}

.achievement-icon-wrap {
    font-size: 42px;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: #F7FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgb(0 0 0 / .04)
}

.achievement-title {
    font-family: var(--font-body);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px
}

.achievement-desc {
    font-size: 12.5px;
    color: var(--body-text);
    line-height: 1.35;
    margin-bottom: 8px
}

.status-unlocked {
    color: #276749;
    font-weight: 700;
    font-size: 11.5px;
    background: #C6F6D5;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-block
}

.status-locked {
    color: #718096;
    font-size: 11.5px;
    background: #EDF2F7;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-block
}

.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 28px;
    padding-top: 12px
}

.podium-card {
    background: #FFF;
    border-radius: 24px;
    padding: 20px 16px;
    text-align: center;
    border: 2px solid var(--hairline);
    box-shadow: var(--shadow-md);
    flex: 1;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease
}

.podium-card.rank-1 {
    border-color: #FFB703;
    background: linear-gradient(180deg, #FFFDF5 0%, #FFF5D6 100%);
    transform: translateY(-16px);
    box-shadow: 0 12px 32px rgb(255 183 3 / .25)
}

.podium-card.rank-2 {
    border-color: #CBD5E0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFC 100%)
}

.podium-card.rank-3 {
    border-color: #ED8936;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFAF0 100%)
}

.podium-crown {
    font-size: 24px;
    margin-bottom: 6px
}

.podium-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgb(0 0 0 / .12)
}

.podium-name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 2px
}

.podium-level {
    font-size: 12px;
    color: var(--lms-secondary);
    font-weight: 600
}

.podium-exp {
    font-size: 13px;
    font-weight: 800;
    color: #B45309;
    margin-top: 6px;
    background: rgb(255 183 3 / .18);
    padding: 4px 10px;
    border-radius: 12px
}

.leader-list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.leader-row-item {
    background: #FFF;
    border-radius: 20px;
    padding: 14px 20px;
    border: 1.5px solid var(--hairline);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease
}

.leader-row-item:hover {
    transform: translateX(4px);
    border-color: var(--primary)
}

.leader-rank {
    font-weight: 800;
    font-size: 16px;
    color: var(--lms-secondary);
    width: 40px
}

.leader-user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1
}

.leader-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--lms-secondary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px
}

.leader-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink)
}

.leader-meta {
    font-size: 12px;
    color: var(--body-text)
}

.leader-level {
    font-weight: 700;
    font-size: 14px;
    color: var(--lms-secondary);
    margin-right: 16px
}

.leader-exp {
    font-weight: 800;
    font-size: 14px;
    color: #B45309;
    background: rgb(255 183 3 / .15);
    padding: 6px 14px;
    border-radius: 16px
}

[data-theme="dark"] .achievement-card-item,
[data-theme="dark"] .podium-card,
[data-theme="dark"] .leader-row-item {
    background: rgb(61 26 48 / .9) !important;
    border-color: rgb(255 143 192 / .3) !important;
    color: #ffe0ef !important
}

.inventory-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 8px
}

.inventory-card-item {
    background: #FFF;
    border-radius: var(--rounded-md);
    padding: 20px;
    border: 1.5px solid var(--hairline);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: all 0.3s ease
}

.inventory-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgb(72 187 120 / .18);
    border-color: #48BB78
}

.inventory-quantity-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    font-weight: 800;
    font-size: 13px;
    color: #276749;
    background: #C6F6D5;
    padding: 3px 12px;
    border-radius: 16px
}

.inventory-icon-wrap {
    font-size: 46px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F0FFF4 0%, #C6F6D5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: inset 0 2px 6px rgb(72 187 120 / .15)
}

.inventory-card-title {
    font-family: var(--font-body);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px
}

.inventory-card-desc {
    font-size: 13px;
    color: var(--body-text);
    line-height: 1.4;
    margin-bottom: 12px;
    flex: 1
}

.inventory-effect-badge {
    font-size: 12.5px;
    font-weight: 700;
    color: #2B6CB0;
    background: #EBF8FF;
    padding: 4px 14px;
    border-radius: 16px;
    margin-bottom: 14px;
    width: 100%
}

.btn-inventory-use {
    background: linear-gradient(135deg, #38B2AC 0%, #319795 100%);
    color: #FFF;
    border: none;
    padding: 10px;
    border-radius: var(--rounded-md);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: 0 4px 12px rgb(49 151 149 / .3);
    transition: all 0.25s ease;
    width: 100%
}

.btn-inventory-use:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgb(49 151 149 / .5);
    background: linear-gradient(135deg, #4FD1C5 0%, #319795 100%)
}

[data-theme="dark"] .inventory-card-item {
    background: rgb(61 26 48 / .9) !important;
    border-color: rgb(255 143 192 / .3) !important
}

[data-theme="dark"] .inventory-card-title {
    color: #ff8fc0 !important
}

.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.toast {
    background: #fff;
    color: var(--ink);
    padding: 16px 24px;
    border-radius: var(--rounded-md);
    border-left: 6px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-body);
    box-shadow: var(--shadow-lg);
    animation: bounceSlow 0.4s ease-out
}

.toast-container .toast {
    animation: slideInRight 0.4s cubic-bezier(.22, 1, .36, 1)
}

.toast-container .toast.removing {
    animation: slideOutRight 0.3s ease forwards
}

.celebration-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden
}

.celebration-particle {
    position: absolute;
    font-size: 28px;
    animation: confettiFall 3s ease-in forwards
}

@keyframes confettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg) scale(1);
        opacity: 1
    }

    100% {
        transform: translateY(100vh) rotate(720deg) scale(.5);
        opacity: 0
    }
}

.level-up-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgb(184 134 42 / .3) 0%, transparent 70%);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
    pointer-events: none
}

.level-up-text {
    font-size: 72px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 20px rgb(184 134 42 / .8), 0 0 40px rgb(184 134 42 / .6), 0 0 60px rgb(184 134 42 / .4);
    animation: levelUpPop 0.6s cubic-bezier(.22, 1, .36, 1)
}

@keyframes levelUpPop {
    0% {
        transform: scale(0);
        opacity: 0
    }

    50% {
        transform: scale(1.3)
    }

    70% {
        transform: scale(.9)
    }

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

.sparkle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99997
}

.sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, white 0%, transparent 70%);
    border-radius: 50%;
    animation: sparkleAnim 1s ease forwards
}

@keyframes sparkleAnim {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1
    }

    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1
    }

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

.progress-fill-animated {
    transition: width 1s ease-out;
    position: relative;
    overflow: hidden
}

.progress-fill-animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .4), transparent);
    animation: shimmer 2s infinite
}

@keyframes shimmer {
    0% {
        left: -100%
    }

    100% {
        left: 100%
    }
}

.badge-shine {
    position: relative;
    overflow: hidden
}

.badge-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .4), transparent);
    animation: shine 3s ease-in-out infinite
}

.badge-pulse {
    animation: badgePulse 2s ease-in-out infinite
}

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

.card-hover-lift {
    transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.3s ease
}

.card-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgb(0 0 0 / .12)
}

.card-hover-glow {
    transition: box-shadow 0.3s ease, border-color 0.3s ease
}

.card-hover-glow:hover {
    box-shadow: 0 0 20px rgb(184 134 42 / .3);
    border-color: var(--primary)
}

.card-hover-rotate {
    transition: transform 0.3s ease
}

.card-hover-rotate:hover {
    transform: rotateY(5deg) scale(1.02)
}

.btn-animated {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease
}

.btn-animated::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgb(255 255 255 / .2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease
}

.btn-animated:active::before {
    width: 200px;
    height: 200px
}

.btn-ripple {
    position: relative;
    overflow: hidden
}

.btn-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgb(255 255 255 / .3) 10%, transparent 10%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform 0.4s, opacity 0.4s
}

.btn-ripple:active::after {
    transform: scale(0);
    opacity: 1;
    transition: 0s
}

.btn-bounce:active {
    animation: btnBounce 0.3s ease
}

@keyframes btnBounce {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(.95)
    }
}

.btn-glow-hover:hover {
    box-shadow: 0 0 20px rgb(184 134 42 / .5)
}

.entity-attack-right {
    animation: attackRight 0.4s ease
}

.entity-attack-left {
    animation: attackLeft 0.4s ease
}

.entity-hurt {
    animation: hurt 0.4s ease
}

.entity-victory {
    animation: victoryDance 0.6s ease infinite
}

@keyframes victoryDance {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    25% {
        transform: translateY(-10px) rotate(-5deg)
    }

    50% {
        transform: translateY(-5px) rotate(0deg)
    }

    75% {
        transform: translateY(-15px) rotate(5deg)
    }
}

.entity-defeat {
    animation: defeatAnim 0.5s ease forwards
}

@keyframes defeatAnim {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1
    }

    50% {
        transform: scale(.8) rotate(-10deg);
        opacity: .5
    }

    100% {
        transform: scale(.5) rotate(-30deg) translateY(20px);
        opacity: 0
    }
}

.answer-correct {
    animation: answerCorrect 0.5s ease;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: white !important;
    border-color: #10B981 !important
}

@keyframes answerCorrect {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.1)
    }

    50% {
        transform: scale(.95)
    }

    75% {
        transform: scale(1.05)
    }

    100% {
        transform: scale(1)
    }
}

.answer-wrong {
    animation: answerWrong 0.5s ease;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    color: white !important;
    border-color: #EF4444 !important
}

@keyframes answerWrong {

    0%,
    100% {
        transform: translateX(0)
    }

    20%,
    60% {
        transform: translateX(-8px)
    }

    40%,
    80% {
        transform: translateX(8px)
    }
}

.score-popup {
    position: fixed;
    font-size: 32px;
    font-weight: 800;
    color: gold;
    text-shadow: 0 0 10px rgb(255 215 0 / .8), 2px 2px 0 rgb(0 0 0 / .3);
    pointer-events: none;
    z-index: 99999;
    animation: scorePopup 1s ease-out forwards
}

.score-popup.positive {
    color: #10B981;
    text-shadow: 0 0 10px rgb(16 185 129 / .8), 2px 2px 0 rgb(0 0 0 / .3)
}

.score-popup.negative {
    color: #EF4444;
    text-shadow: 0 0 10px rgb(239 68 68 / .8), 2px 2px 0 rgb(0 0 0 / .3)
}

@keyframes scorePopup {
    0% {
        transform: translateY(0) scale(.5);
        opacity: 0
    }

    20% {
        transform: translateY(-20px) scale(1.2);
        opacity: 1
    }

    100% {
        transform: translateY(-80px) scale(.8);
        opacity: 0
    }
}

.exp-bar-fill {
    transition: width 0.8s cubic-bezier(.4, 0, .2, 1)
}

.level-up-flash {
    animation: levelUpFlash 0.6s ease
}

@keyframes levelUpFlash {

    0%,
    100% {
        background-color: inherit
    }

    50% {
        background-color: rgb(184 134 42 / .3);
        box-shadow: 0 0 20px rgb(184 134 42 / .5)
    }
}

.coin-animated {
    display: inline-block;
    animation: coinSpin 0.6s linear infinite;
    perspective: 1000px
}

@keyframes coinSpin {
    0% {
        transform: rotateY(0deg)
    }

    100% {
        transform: rotateY(360deg)
    }
}

.page-transition-enter {
    animation: pageEnter 0.3s ease forwards
}

.page-transition-exit {
    animation: pageExit 0.3s ease forwards
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

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

@keyframes pageExit {
    from {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-20px)
    }
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap
}

.marquee-content {
    display: inline-block;
    animation: marquee 20s linear infinite
}

@keyframes marquee {
    0% {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(-100%)
    }
}

.counter-animated {
    transition: all 0.5s ease
}

.modal-overlay {
    animation: fadeIn 0.2s ease
}

.modal-overlay.closing {
    animation: fadeOut 0.2s ease forwards
}

.modal {
    animation: modalSlideIn 0.3s cubic-bezier(.22, 1, .36, 1)
}

.modal-overlay.closing .modal {
    animation: modalSlideOut 0.2s ease forwards
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px) scale(.95);
        opacity: 0
    }

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

@keyframes modalSlideOut {
    from {
        transform: translateY(0) scale(1);
        opacity: 1
    }

    to {
        transform: translateY(50px) scale(.95);
        opacity: 0
    }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgb(184 134 42 / .1);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite
}

.spinner-lg {
    width: 60px;
    height: 60px;
    border-width: 5px
}

.spinner-sm {
    width: 24px;
    height: 24px;
    border-width: 3px
}

.ripple-effect {
    position: relative;
    overflow: hidden
}

.ripple-effect .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgb(255 255 255 / .5);
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    animation: ripple 0.6s ease-out;
    pointer-events: none
}

@keyframes contentRise {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

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

@keyframes gentleFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-4px)
    }
}

@keyframes focusGlow {
    0% {
        box-shadow: 0 0 0 0 #fff0
    }

    50% {
        box-shadow: 0 0 0 4px rgb(184 134 42 / .13)
    }

    100% {
        box-shadow: 0 0 0 0 #fff0
    }
}

.btn,
.btn-lms-primary,
.btn-card-action,
.btn-shop-buy,
.btn-companion-action,
.btn-inventory-use,
.menu-btn,
.modal-close {
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease
}

.btn:hover,
.btn-lms-primary:hover,
.btn-card-action:hover,
.btn-shop-buy:hover:not(.disabled),
.btn-companion-action:hover,
.btn-inventory-use:hover,
.modal-close:hover {
    transform: translateY(-2px)
}

.btn:active,
.btn-lms-primary:active,
.btn-card-action:active,
.btn-shop-buy:active:not(.disabled),
.btn-companion-action:active,
.btn-inventory-use:active {
    transform: translateY(0) scale(.97)
}

.form-group input,
.lms-input-control,
.lms-select-control,
.lms-textarea-control,
.fill-blank-input,
.compose-textarea {
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease
}

.form-group input:focus,
.lms-input-control:focus,
.lms-select-control:focus,
.lms-textarea-control:focus,
.fill-blank-input:focus,
.compose-textarea:focus {
    animation: focusGlow 0.55s ease-out;
    transform: translateY(-1px)
}

.game-view>*,
.game-view .card>*,
.course-cards-grid>*,
.q-card-list>*,
.inventory-grid-modern>*,
.leader-list>*,
.achievement-grid>*,
.podium-container>* {
    animation: contentRise 0.45s cubic-bezier(.22, 1, .36, 1) both
}

.game-view>*:nth-child(2),
.game-view .card>*:nth-child(2),
.course-cards-grid>*:nth-child(2),
.q-card-list>*:nth-child(2),
.inventory-grid-modern>*:nth-child(2),
.leader-list>*:nth-child(2),
.achievement-grid>*:nth-child(2),
.podium-container>*:nth-child(2) {
    animation-delay: 0.06s
}

.game-view>*:nth-child(3),
.game-view .card>*:nth-child(3),
.course-cards-grid>*:nth-child(3),
.q-card-list>*:nth-child(3),
.inventory-grid-modern>*:nth-child(3),
.leader-list>*:nth-child(3),
.achievement-grid>*:nth-child(3),
.podium-container>*:nth-child(3) {
    animation-delay: 0.12s
}

.game-view>*:nth-child(4),
.game-view .card>*:nth-child(4),
.course-cards-grid>*:nth-child(4),
.q-card-list>*:nth-child(4),
.inventory-grid-modern>*:nth-child(4),
.leader-list>*:nth-child(4),
.achievement-grid>*:nth-child(4) {
    animation-delay: 0.18s
}

.coins-display,
.char-level,
.badge-pulse,
.podium-crown,
.inventory-quantity-badge {
    animation: gentleFloat 3.5s ease-in-out infinite
}

.bar-fill,
.timer-fill,
.progress-fill-animated {
    transition: width 0.8s cubic-bezier(.22, 1, .36, 1)
}

@media (prefers-reduced-motion:reduce) {

    .game-view>*,
    .game-view .card>*,
    .course-cards-grid>*,
    .q-card-list>*,
    .inventory-grid-modern>*,
    .leader-list>*,
    .achievement-grid>*,
    .podium-container>*,
    .coins-display,
    .char-level,
    .badge-pulse,
    .podium-crown,
    .inventory-quantity-badge {
        animation: none !important
    }
}

@keyframes driftSideways {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg)
    }

    50% {
        transform: translate3d(10px, -6px, 0) rotate(4deg)
    }
}

@keyframes bandBreath {

    0%,
    100% {
        transform: scaleX(1);
        opacity: .82
    }

    50% {
        transform: scaleX(1.08);
        opacity: 1
    }
}

@keyframes underlineSweep {
    from {
        transform: scaleX(0);
        transform-origin: left
    }

    to {
        transform: scaleX(1);
        transform-origin: left
    }
}

@keyframes softOrbit {
    0% {
        transform: rotate(0deg) translateX(0) rotate(0deg)
    }

    50% {
        transform: rotate(180deg) translateX(8px) rotate(-180deg)
    }

    100% {
        transform: rotate(360deg) translateX(0) rotate(-360deg)
    }
}

.landing-brand .mark {
    transition: transform 0.45s cubic-bezier(.22, 1, .36, 1), border-radius 0.45s ease
}

.landing-brand:hover .mark {
    transform: rotate(-8deg) scale(1.12);
    border-radius: 10px
}

.landing-brand span:last-child,
.site-footer a,
.lms-nav-item,
.auth-switch a {
    position: relative
}

.landing-brand span:last-child::after,
.site-footer a::after,
.lms-nav-item::after,
.auth-switch a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(.22, 1, .36, 1)
}

.landing-brand:hover span:last-child::after,
.site-footer a:hover::after,
.lms-nav-item:hover::after,
.auth-switch a:hover::after {
    transform: scaleX(1)
}

.hero-night .sticker:nth-of-type(1) {
    animation-duration: 8s, 4s
}

.hero-night .sticker:nth-of-type(2) {
    animation-duration: 10s, 4.5s
}

.hero-night .sticker:nth-of-type(3) {
    animation-duration: 6s, 3s
}

.hero-night .sticker:nth-of-type(4) {
    animation-duration: 9s, 5s
}

.feature-card .sticker-band {
    position: relative;
    overflow: hidden
}

.feature-card .sticker-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 25%, rgb(255 255 255 / .5) 50%, transparent 75%);
    transform: translateX(-120%);
    transition: transform 0.7s cubic-bezier(.22, 1, .36, 1)
}

.feature-card:hover .sticker-band::after {
    transform: translateX(120%)
}

.feature-card .sticker-band:first-letter {
    display: inline-block;
    animation: driftSideways 3s ease-in-out infinite
}

.feature-card:hover h3 {
    animation: underlineSweep 0.45s ease both
}

.cute-mascot,
.battle-entity .entity-sprite,
.podium-crown {
    animation: driftSideways 4s ease-in-out infinite;
    will-change: transform
}

.cute-mascot {
    animation-delay: -2s
}

.podium-crown {
    animation: softOrbit 7s linear infinite
}

.game-topbar>div:first-child>span {
    display: inline-block;
    animation: softOrbit 8s linear infinite;
    transform-origin: center
}

.game-main,
.auth-box,
body:has(.lms-app) .lms-sidebar,
body:has(.lms-app) .lms-header {
    transition: box-shadow 0.45s ease, border-color 0.45s ease
}

.game-main:hover,
.auth-box:hover,
body:has(.lms-app) .lms-sidebar:hover,
body:has(.lms-app) .lms-header:hover {
    border-color: rgb(184 134 42 / .3);
    box-shadow: 0 12px 36px rgb(25 25 24 / .08)
}

.bar-fill,
.timer-fill,
.progress-fill-animated {
    position: relative;
    overflow: hidden
}

.bar-fill::after,
.timer-fill::after,
.progress-fill-animated::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / .5) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: shimmer 2.8s ease-in-out infinite
}

.modal-close:hover {
    animation: spin 0.45s ease
}

@supports (animation-timeline:view()) {

    .features-section .section-head,
    .feature-card,
    .site-footer-inner>div,
    .game-view>.card,
    .course-cards-grid>*,
    .q-card-list>*,
    .inventory-grid-modern>*,
    .leader-list>* {
        animation-name: contentRise;
        animation-timeline: view(block 85% 10%);
        animation-range: entry 0% cover 28%
    }
}

@media (prefers-reduced-motion:reduce) {

    .char-avatar-big,
    .cute-mascot,
    .battle-entity .entity-sprite,
    .podium-crown,
    .game-topbar>div:first-child>span,
    .bar-fill::after,
    .timer-fill::after,
    .progress-fill-animated::after {
        animation: none !important
    }
}

.focus-ring {
    outline: none;
    transition: box-shadow 0.2s ease
}

.focus-ring:focus-visible {
    box-shadow: 0 0 0 3px rgb(184 134 42 / .3);
    animation: focusRingPulse 1s ease infinite
}

@keyframes focusRingPulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px rgb(184 134 42 / .3)
    }

    50% {
        box-shadow: 0 0 0 5px rgb(184 134 42 / .2)
    }
}

.stagger-children>* {
    opacity: 0;
    animation: staggerFadeIn 0.4s ease forwards
}

.stagger-children>*:nth-child(1) {
    animation-delay: 0.1s
}

.stagger-children>*:nth-child(2) {
    animation-delay: 0.2s
}

.stagger-children>*:nth-child(3) {
    animation-delay: 0.3s
}

.stagger-children>*:nth-child(4) {
    animation-delay: 0.4s
}

.stagger-children>*:nth-child(5) {
    animation-delay: 0.5s
}

.stagger-children>*:nth-child(6) {
    animation-delay: 0.6s
}

.stagger-children>*:nth-child(7) {
    animation-delay: 0.7s
}

.stagger-children>*:nth-child(8) {
    animation-delay: 0.8s
}

@keyframes staggerFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

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

.toast.success {
    border-left-color: var(--success)
}

.toast.error {
    border-left-color: var(--error)
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    backdrop-filter: blur(8px)
}

.modal-overlay.active {
    display: flex
}

.modal {
    background: #fff;
    color: var(--ink);
    padding: var(--spacing-xl);
    border-radius: 12px;
    width: 100%;
    max-width: 540px;
    max-height: 85vh;
    overflow-y: auto;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-md)
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--hairline);
    padding-bottom: var(--spacing-md)
}

.modal-close {
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: var(--body-text);
    transition: var(--transition)
}

.modal-close:hover {
    color: var(--error)
}

@media (max-width:1024px) {
    .game-layout {
        grid-template-columns: 230px 1fr
    }

    .char-panel {
        width: 100%
    }

    .menu-panel {
        grid-column: 1 / -1;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        display: grid;
        gap: 12px
    }
}

@media (max-width:768px) {
    .hero-band h1 {
        font-size: 36px
    }

    .features-grid,
    .site-footer-inner {
        grid-template-columns: 1fr
    }

    .hero-night {
        padding: 56px 20px 64px
    }

    .landing-nav {
        flex-direction: column;
        gap: 16px
    }

    .landing-actions {
        flex-wrap: wrap;
        justify-content: center
    }

    .hero-search-pill {
        flex-direction: column;
        border-radius: var(--rounded-lg);
        padding: 16px;
        text-align: center
    }

    .hero-search-pill>div {
        text-align: center !important
    }

    .game-layout {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-md);
        gap: 16px
    }

    .char-panel {
        width: 100%;
        order: 2
    }

    .game-main {
        width: 100%;
        order: 1
    }

    .menu-panel {
        width: 100%;
        order: 3
    }

    .options-grid {
        grid-template-columns: 1fr
    }

    .game-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }
}

@media (max-width:480px) {
    .menu-panel {
        grid-template-columns: 1fr 1fr
    }

    .stat-box-container {
        grid-template-columns: 1fr 1fr
    }

    .battle-scene {
        padding: 16px;
        border-radius: 20px
    }

    .battle-arena {
        gap: 8px;
        padding: 4px 0 12px 0
    }

    .battle-entity {
        padding: 10px 6px;
        border-radius: 16px
    }

    .battle-entity .entity-sprite {
        font-size: 32px;
        margin-bottom: 4px
    }

    .battle-entity .entity-name {
        font-size: 13px;
        word-break: break-word;
        margin-bottom: 4px
    }

    .battle-entity .entity-sub-stat {
        font-size: 10px
    }

    .vs-text {
        width: 34px;
        height: 34px;
        font-size: 14px
    }

    .battle-question {
        padding: 16px;
        border-radius: 16px
    }

    .question-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .question-header-actions {
        width: 100%;
        justify-content: space-between
    }

    .question-text {
        font-size: 18px
    }

    .fill-blank-input {
        padding: 12px 14px 12px 38px
    }

    .btn-submit-battle {
        padding: 12px 20px;
        width: 100%;
        justify-content: center
    }
}

body {
    background: var(--canvas-soft)
}

a {
    color: var(--primary)
}

.btn {
    border-radius: var(--rounded-sm)
}

.btn-primary,
.hero-night .btn-primary {
    border-radius: var(--rounded-full)
}

.landing-nav {
    min-height: 64px
}

.landing-brand .mark {
    border-radius: var(--rounded-sm)
}

.hero-night {
    padding-top: 72px;
    padding-bottom: 80px
}

.features-section .section-head h2 {
    font-size: 34px
}

.feature-card,
.auth-box,
.game-main,
.char-panel,
.menu-panel,
.game-view .card,
.battle-scene,
.battle-question,
.modal {
    border-radius: var(--rounded-md)
}

.auth-box {
    box-shadow: var(--shadow-sm)
}

.game-layout {
    max-width: 1280px;
    grid-template-columns: 240px minmax(0, 1fr) 216px;
    gap: 16px;
    padding: 20px
}

.char-panel,
.menu-panel {
    width: auto;
    padding: 16px;
    position: sticky;
    top: 20px;
    min-height: calc(100vh - 40px)
}

.menu-panel {
    gap: 4px
}

.game-main {
    min-height: calc(100vh - 40px)
}

.game-topbar {
    padding: 16px 20px
}

.game-view {
    padding: 20px
}

.game-view .card {
    padding: 20px
}

body:has(.lms-app) {
    font-family: var(--font-body) !important;
    background: var(--canvas-soft) !important;
    color: var(--body-text) !important
}

body:has(.lms-app) .lms-sidebar,
body:has(.lms-app) .lms-header,
body:has(.lms-app) .lms-search-bar,
body:has(.lms-app) .course-card-item,
body:has(.lms-app) .q-card-row,
body:has(.lms-app) .lms-form-card {
    background: var(--canvas) !important;
    border-color: var(--hairline) !important;
    box-shadow: none !important
}

body:has(.lms-app) .lms-sidebar {
    width: 232px;
    padding: 20px 12px
}

body:has(.lms-app) .lms-header {
    height: 68px;
    padding: 0 28px
}

body:has(.lms-app) .lms-content {
    padding: 28px;
    max-width: 1400px;
    width: 100%
}

body:has(.lms-app) .lms-brand {
    padding: 0 12px 20px;
    margin-bottom: 16px;
    border-color: var(--hairline)
}

body:has(.lms-app) .lms-brand .logo-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--rounded-sm);
    background: var(--secondary);
    box-shadow: none
}

body:has(.lms-app) .lms-brand .logo-text,
body:has(.lms-app) .lms-header-title h1,
body:has(.lms-app) .course-card-title,
body:has(.lms-app) .q-col-text {
    color: var(--ink) !important
}

body:has(.lms-app) .lms-nav-item {
    border-radius: var(--rounded-sm);
    color: var(--ink-muted);
    padding: 10px 12px
}

body:has(.lms-app) .lms-nav-item:hover,
body:has(.lms-app) .lms-nav-item.active {
    background: var(--canvas-soft) !important;
    color: var(--primary) !important;
    transform: none
}

body:has(.lms-app) .course-card-item,
body:has(.lms-app) .q-card-row,
body:has(.lms-app) .lms-form-card {
    border-radius: var(--rounded-md)
}

body:has(.lms-app) .course-card-item:hover,
body:has(.lms-app) .q-card-row:hover {
    transform: none;
    border-color: var(--primary-disabled) !important;
    box-shadow: var(--shadow-sm) !important
}

body:has(.lms-app) .btn-lms-primary {
    background: var(--primary);
    border-radius: var(--rounded-full);
    box-shadow: none
}

body:has(.lms-app) .btn-lms-primary:hover {
    background: var(--primary-active);
    transform: none;
    box-shadow: none
}

body:has(.lms-app) .lms-search-bar {
    border-radius: var(--rounded-md)
}

@media (max-width:768px) {
    .landing-nav {
        padding: 12px 20px
    }

    .landing-actions {
        width: 100%
    }

    .landing-actions .btn {
        flex: 1
    }

    .game-layout {
        padding: 12px
    }

    .char-panel,
    .menu-panel {
        position: static;
        min-height: 0
    }
}

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

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

@keyframes revealFade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes softPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 #fff0
    }

    50% {
        box-shadow: 0 0 0 5px rgb(184 134 42 / .12)
    }
}

@keyframes nightTexture {
    0% {
        background-position: 0 0, 0 0, 0 0
    }

    100% {
        background-position: 72px 40px, -48px 28px, 0 0
    }
}

@keyframes nightSheen {

    0%,
    55% {
        transform: translateX(-110%) skewX(-18deg);
        opacity: 0
    }

    68% {
        opacity: .16
    }

    85%,
    100% {
        transform: translateX(110%) skewX(-18deg);
        opacity: 0
    }
}

@keyframes stickerDrift {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1)
    }

    35% {
        transform: translate3d(8px, -12px, 0) rotate(12deg) scale(1.08)
    }

    70% {
        transform: translate3d(-6px, -4px, 0) rotate(-8deg) scale(.94)
    }
}

@keyframes starTwinkle {

    0%,
    100% {
        opacity: .35;
        filter: brightness(1)
    }

    50% {
        opacity: 1;
        filter: brightness(1.35)
    }
}

.landing-nav-wrap {
    animation: revealFade 0.45s ease both
}

.hero-night {
    position: relative;
    overflow: hidden
}

#heroCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1
}

.hero-night>* {
    position: relative;
    z-index: 2
}

.title-reveal-3d {
    display: inline-block;
    transform-origin: center bottom;
    animation: reveal3DTitle 1.1s var(--ease-spring-soft) both !important;
    text-shadow: 0 4px 20px rgb(255 95 168 / .4), 0 0 30px rgb(255 143 192 / .35)
}

@keyframes reveal3DTitle {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(36deg) translateY(48px) translateZ(-80px);
        filter: blur(5px)
    }

    100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg) translateY(0) translateZ(0);
        filter: blur(0)
    }
}

.btn-shimmer-gold {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ff5fa8 0%, #ff8fc0 50%, #ff5fa8 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: none !important;
    border-bottom: 4px solid #d4376e !important;
    box-shadow: 0 4px 0 #b32556, 0 8px 24px rgb(255 95 168 / .45) !important;
    transform-style: preserve-3d;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease !important
}

.btn-shimmer-gold::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .75), transparent);
    transform: skewX(-25deg);
    animation: shimmerSweep 3.2s cubic-bezier(.4, 0, .2, 1) infinite;
    pointer-events: none
}

@keyframes shimmerSweep {
    0% {
        left: -100%
    }

    35%,
    100% {
        left: 200%
    }
}

.btn-bounce-gentle {
    animation: gentleBounce 3.6s ease-in-out infinite
}

@keyframes gentleBounce {

    0%,
    100% {
        transform: translateY(0) scale(1)
    }

    50% {
        transform: translateY(-5px) scale(1.025);
        box-shadow: 0 12px 28px rgb(212 175 55 / .6), inset 0 1px 2px rgb(255 255 255 / .8) !important
    }
}

.tilt-card {
    perspective: var(--perspective-card);
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
    transition: transform 0.6s var(--ease-spring), box-shadow 0.6s ease, border-color 0.3s ease;
    will-change: transform
}

.tilt-card:hover {
    box-shadow: 0 20px 40px rgb(0 0 0 / .12), 0 0 25px rgb(212 175 55 / .18) !important;
    border-color: rgb(212 175 55 / .5) !important
}

.tilt-card .sticker-band,
.tilt-card .feature-body h3,
.tilt-card .feature-body p {
    transform: translateZ(26px);
    transform-style: preserve-3d;
    transition: transform 0.4s var(--ease-spring)
}

.tilt-glare {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 5;
    transition: background 0.15s ease
}

.hero-night .sticker {
    will-change: transform;
    transition: transform 0.1s linear;
    box-shadow: 0 4px 14px rgb(0 0 0 / .3)
}

.char-avatar-3d {
    perspective: 800px;
    transform-style: preserve-3d;
    animation: idleAvatar3D 5.5s ease-in-out infinite;
    will-change: transform
}

@keyframes idleAvatar3D {

    0%,
    100% {
        transform: perspective(800px) rotateY(0deg) rotateX(0deg) translateY(0);
        filter: drop-shadow(0 8px 16px rgb(0 0 0 / .22))
    }

    25% {
        transform: perspective(800px) rotateY(12deg) rotateX(6deg) translateY(-8px);
        filter: drop-shadow(-6px 16px 22px rgb(255 100 170 / .35))
    }

    75% {
        transform: perspective(800px) rotateY(-12deg) rotateX(-5deg) translateY(-5px);
        filter: drop-shadow(6px 14px 20px rgb(255 143 192 / .3))
    }
}

.bar-track {
    position: relative;
    overflow: visible
}

.bar-fill {
    transition: width 0.85s var(--ease-spring);
    position: relative
}

.bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: rgb(255 255 255 / .85);
    border-radius: 4px;
    box-shadow: 0 0 8px rgb(255 255 255 / .9)
}

.bar-splash-spark {
    position: absolute;
    pointer-events: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: barSplashPop 0.65s ease-out forwards;
    z-index: 10
}

@keyframes barSplashPop {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1
    }

    100% {
        transform: translate(var(--splash-x, 18px), var(--splash-y, -18px)) scale(0);
        opacity: 0
    }
}

.flip-card-3d-wrap {
    perspective: 1200px;
    transform-style: preserve-3d;
    width: 100%
}

.flip-card-3d {
    transition: transform 0.8s var(--ease-spring);
    transform-style: preserve-3d;
    position: relative
}

.flip-card-3d.is-flipped {
    transform: rotateY(180deg)
}

.flip-card-front,
.flip-card-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: inherit
}

.flip-card-back {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.loot-drop-container {
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 24px 0
}

.loot-drop-item {
    animation: lootDropBounce 0.95s var(--ease-out-back) both;
    transform-origin: center bottom;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 24px;
    background: var(--surface-card);
    border: 2px solid var(--gold);
    border-radius: var(--rounded-lg);
    box-shadow: 0 12px 32px rgb(212 175 55 / .35)
}

@keyframes lootDropBounce {
    0% {
        opacity: 0;
        transform: translateY(-110px) scale(.35) rotate(-18deg)
    }

    60% {
        opacity: 1;
        transform: translateY(14px) scale(1.18) rotate(5deg)
    }

    80% {
        transform: translateY(-8px) scale(.96) rotate(-2deg)
    }

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

.loot-rays-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgb(212 175 55 / .55) 0%, #fff0 70%);
    border-radius: 50%;
    animation: lootRaysPulse 2.2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1
}

@keyframes lootRaysPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.85);
        opacity: .5
    }

    50% {
        transform: translate(-50%, -50%) scale(1.35);
        opacity: .95
    }
}

.auth-box {
    perspective: var(--perspective-deep);
    transform-style: preserve-3d;
    animation: authEnter3D 0.85s var(--ease-spring-soft) both !important
}

@keyframes authEnter3D {
    0% {
        opacity: 0;
        transform: perspective(1200px) rotateX(18deg) translateY(48px) scale(.92);
        filter: blur(4px)
    }

    100% {
        opacity: 1;
        transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1);
        filter: blur(0)
    }
}

.form-group input,
.form-group select,
.fill-blank-input,
.compose-textarea {
    transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.2s ease !important
}

.form-group input:focus,
.form-group select:focus,
.fill-blank-input:focus,
.compose-textarea:focus {
    transform: translateY(-2.5px) scale(1.008) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 10px 25px rgb(212 175 55 / .25), 0 0 0 3.5px rgb(212 175 55 / .22) !important
}

.stagger-active,
.course-card-item,
.q-card-row,
body:has(.lms-app) .lms-nav-item {
    animation: staggerInUp 0.65s var(--ease-spring-soft) both;
    animation-delay: calc(var(--stagger-i, 0) * 0.055s)
}

@keyframes staggerInUp {
    0% {
        opacity: 0;
        transform: translateY(26px) scale(.96)
    }

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

.btn,
.menu-btn,
.option-btn,
.btn-animated {
    transform-style: preserve-3d;
    transition: transform 0.18s var(--ease-spring), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    user-select: none
}

.btn:hover,
.menu-btn:hover {
    transform: translateY(-2px)
}

.btn:active,
.menu-btn:active,
.option-btn:active {
    transform: translateY(1px) scale(.96) !important
}

.rpg-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(212 175 55 / .5) 0%, rgb(255 255 255 / .3) 40%, transparent 70%);
    transform: scale(0);
    animation: rippleExpand 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 20
}

@keyframes rippleExpand {
    to {
        transform: scale(2.4);
        opacity: 0
    }
}

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        transform: none !important
    }

    #heroCanvas {
        display: none !important
    }
}

.btn-sm {
    padding: 6px 14px;
    min-height: 36px;
    font-size: 14px;
    border-radius: var(--rounded-md)
}

.btn-lg {
    padding: 12px 24px;
    min-height: 48px;
    font-size: 16px;
    width: 100%
}

.btn-danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgb(255 71 87 / .35)
}

.btn-danger:hover {
    background: linear-gradient(135deg, #ff4757 0%, #ff3547 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(255 71 87 / .5)
}

@keyframes heartFloat {
    0% {
        transform: translateY(0) scale(1) rotate(-5deg);
        opacity: 0
    }

    20% {
        opacity: 1
    }

    80% {
        opacity: .8
    }

    100% {
        transform: translateY(-60px) scale(1.3) rotate(5deg);
        opacity: 0
    }
}

@keyframes starTwinkle {

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

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg)
    }
}

@keyframes kawaiiBounce {

    0%,
    100% {
        transform: translateY(0) scale(1)
    }

    30% {
        transform: translateY(-12px) scale(1.08)
    }

    60% {
        transform: translateY(-5px) scale(1.03)
    }
}

@keyframes pinkPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgb(255 143 192 / .5)
    }

    50% {
        box-shadow: 0 0 0 12px #fff0
    }
}

.kawaii-sparkle {
    position: relative;
    display: inline-block
}

.kawaii-sparkle::before,
.kawaii-sparkle::after {
    content: '✦';
    position: absolute;
    font-size: 12px;
    color: #ffb3d4;
    animation: starTwinkle 1.8s ease-in-out infinite;
    pointer-events: none
}

.kawaii-sparkle::before {
    top: -8px;
    right: -10px;
    animation-delay: 0s
}

.kawaii-sparkle::after {
    bottom: -6px;
    left: -8px;
    animation-delay: 0.9s;
    font-size: 9px
}

.heart-deco {
    position: absolute;
    font-size: 18px;
    color: #ffb3d4;
    animation: heartFloat 3s ease-in-out infinite;
    pointer-events: none;
    user-select: none
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background: rgb(255 217 232 / .3);
    border-radius: 9999px
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ff8fc0, #ffb3d4);
    border-radius: 9999px
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #ff5fa8, #ff8fc0)
}

.shop-card-item {
    background: rgb(255 255 255 / .95) !important;
    border: 1.5px solid rgb(255 143 192 / .35) !important;
    border-radius: 24px !important;
    box-shadow: var(--shadow-sm) !important
}

.shop-card-item:hover {
    border-color: rgb(255 95 168 / .7) !important;
    box-shadow: 0 10px 28px rgb(255 100 170 / .18) !important
}

.shop-card-title {
    color: #d4376e !important
}

.shop-card-icon {
    background: linear-gradient(135deg, #fff0f7, #ffd9e8) !important;
    border-radius: 50%
}

.shop-card-price {
    color: #d4376e !important
}

.btn-shop-buy {
    background: var(--primary-gradient) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--rounded-full) !important;
    box-shadow: 0 4px 14px rgb(255 100 170 / .35) !important
}

.btn-shop-buy:hover:not(.disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgb(255 100 170 / .55) !important;
    background: linear-gradient(135deg, #ff4d9f, #ff7ab5) !important
}

.companion-card-item {
    background: rgb(255 255 255 / .95) !important;
    border: 2px solid rgb(255 143 192 / .35) !important;
    border-radius: 24px !important
}

.companion-card-item:hover {
    border-color: #ff8fc0 !important;
    box-shadow: 0 12px 30px rgb(255 100 170 / .18) !important
}

.companion-card-item.active {
    border-color: #ff8fc0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #fff0f7 100%) !important
}

.companion-card-name {
    color: #d4376e !important
}

.companion-avatar {
    background: linear-gradient(135deg, #fff0f7 0%, #ffd9e8 100%) !important;
    border: 3.5px solid #ffb3d4 !important;
    box-shadow: 0 6px 16px rgb(255 100 170 / .18) !important
}

.achievement-card-item {
    background: rgb(255 255 255 / .95) !important;
    border: 1.5px solid rgb(255 143 192 / .3) !important;
    border-radius: 22px !important
}

.achievement-card-item.unlocked {
    border-color: #ff8fc0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #fff0f7 100%) !important
}

.achievement-title {
    color: #d4376e !important
}

.podium-card {
    background: rgb(255 255 255 / .95) !important;
    border: 2px solid rgb(255 143 192 / .35) !important;
    border-radius: 24px !important
}

.podium-card.rank-1 {
    border-color: #ffcf77 !important;
    background: linear-gradient(180deg, #fffdf5 0%, #fff5d6 100%) !important;
    box-shadow: 0 12px 32px rgb(255 207 119 / .3) !important
}

.podium-name,
.leader-name {
    color: #d4376e !important
}

.leader-row-item {
    background: rgb(255 255 255 / .95) !important;
    border: 1.5px solid rgb(255 143 192 / .28) !important;
    border-radius: 20px !important
}

.leader-row-item:hover {
    border-color: #ff8fc0 !important
}

.level-up-overlay {
    background: radial-gradient(circle at center, rgb(255 143 192 / .35) 0%, transparent 70%)
}

.level-up-text {
    color: #fff;
    text-shadow: 0 0 20px rgb(255 95 168 / .9), 0 0 40px rgb(255 143 192 / .7), 0 0 60px rgb(255 179 212 / .5)
}

.toast-container .toast {
    border-left: 5px solid #ff8fc0 !important;
    border-radius: var(--rounded-md) !important
}

[data-theme="dark"] .shop-card-item,
[data-theme="dark"] .companion-card-item,
[data-theme="dark"] .achievement-card-item,
[data-theme="dark"] .podium-card,
[data-theme="dark"] .leader-row-item {
    background: rgb(61 26 48 / .9) !important;
    border-color: rgb(255 143 192 / .3) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .shop-card-title,
[data-theme="dark"] .companion-card-name,
[data-theme="dark"] .achievement-title,
[data-theme="dark"] .podium-name,
[data-theme="dark"] .leader-name {
    color: #ff8fc0 !important
}

.lesson-info-banner {
    background: rgb(255 240 247 / .8) !important;
    border: 1px solid rgb(255 143 192 / .28) !important;
    border-radius: 20px !important
}

.lesson-info-title {
    color: #d4376e !important
}

.lesson-info-body {
    color: #9b4d6a !important
}

#submitSkillBtn {
    background: var(--primary-gradient) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 15.5px !important;
    padding: 13px 28px !important;
    border-radius: var(--rounded-full) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgb(255 100 170 / .4) !important;
    transition: all 0.22s cubic-bezier(.34, 1.56, .64, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important
}

#submitSkillBtn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 28px rgb(255 100 170 / .6) !important
}

#submitSkillBtn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important
}

.inventory-card-item {
    background: rgb(255 255 255 / .95) !important;
    border: 1.5px solid rgb(255 143 192 / .3) !important;
    border-radius: 24px !important
}

.inventory-card-item:hover {
    border-color: #ff8fc0 !important;
    box-shadow: 0 12px 28px rgb(255 100 170 / .15) !important
}

.inventory-icon-wrap {
    background: linear-gradient(135deg, #fff0f7, #ffd9e8) !important
}

.inventory-card-title {
    color: #d4376e !important
}

.card-hover-glow:hover {
    box-shadow: 0 0 20px rgb(255 143 192 / .4);
    border-color: var(--primary)
}

.btn-glow-hover:hover {
    box-shadow: 0 0 20px rgb(255 143 192 / .6)
}

[data-theme="dark"] .battle-scene,
[data-theme="dark"] .battle-question {
    background: rgb(45 21 37 / .92) !important;
    border-color: rgb(255 143 192 / .35) !important
}

[data-theme="dark"] .battle-entity {
    background: rgb(37 16 30 / .9) !important;
    border-color: rgb(255 143 192 / .3) !important
}

[data-theme="dark"] .option-btn,
[data-theme="dark"] .answer-btn {
    background: rgb(45 21 37 / .85) !important;
    border-color: rgb(255 143 192 / .3) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .option-btn:hover,
[data-theme="dark"] .answer-btn:hover:not(:disabled) {
    border-color: #ff8fc0 !important;
    color: #ff8fc0 !important;
    background: rgb(61 26 48 / .95) !important
}

[data-theme="dark"] .fill-blank-input,
[data-theme="dark"] .compose-textarea {
    background: rgb(37 16 30 / .9) !important;
    border-color: rgb(255 143 192 / .35) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .ai-feedback {
    background: rgb(45 21 37 / .92) !important;
    border-color: rgb(255 143 192 / .4) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .result-card-modern {
    background: rgb(45 21 37 / .95) !important;
    border-color: rgb(255 143 192 / .4) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .result-stat-card {
    background: rgb(37 16 30 / .9) !important;
    border-color: rgb(255 143 192 / .25) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .hero-night {
    background-color: #25101e !important;
    background-image: radial-gradient(ellipse at 15% 40%, rgb(120 30 80 / .6) 0%, transparent 50%), radial-gradient(ellipse at 85% 25%, rgb(100 20 65 / .5) 0%, transparent 45%), radial-gradient(ellipse at 50% 85%, rgb(70 15 45 / .6) 0%, transparent 40%), linear-gradient(160deg, #3d1a30 0%, #25101e 40%, #1a0b15 100%) !important;
    color: #ffe0ef !important;
    border-bottom-color: rgba(255, 143, 192, 0.2) !important;
}

[data-theme="dark"] .hero-pink-overlay {
    background: linear-gradient(135deg, rgb(60 15 40 / .5) 0%, rgb(45 21 37 / .4) 50%, rgb(80 25 55 / .35) 100%) !important
}

[data-theme="dark"] .hero-night h1 {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 24px rgb(255 95 168 / .5) !important
}

[data-theme="dark"] .hero-night .tagline {
    color: rgb(255 224 239 / .9) !important
}

[data-theme="dark"] .hero-night .hero-eyebrow {
    color: #ffd6eb !important;
    background: rgba(55, 20, 42, 0.75) !important;
    border-color: rgba(255, 143, 192, 0.35) !important;
}

[data-theme="dark"] .hero-night .btn-secondary {
    background: rgba(45, 16, 35, 0.8) !important;
    color: #ffe0ef !important;
    border-color: rgba(255, 143, 192, 0.45) !important;
}

[data-theme="dark"] .hero-night .hero-meta {
    color: rgb(255 224 239 / .7) !important
}

[data-theme="dark"] .hero-mascot-pill {
    background: rgba(55, 20, 42, 0.85) !important;
    color: #ffd6eb !important;
    border-color: rgba(255, 143, 192, 0.35) !important;
}

[data-theme="dark"] .hero-announcement-pill {
    background: linear-gradient(135deg, rgba(55, 20, 42, 0.92) 0%, rgba(40, 15, 30, 0.88) 100%) !important;
    border-color: rgba(255, 143, 192, 0.35) !important;
    color: #ffd6eb !important;
}

[data-theme="dark"] .hero-chip {
    background: rgba(45, 16, 35, 0.75) !important;
    border-color: rgba(255, 143, 192, 0.25) !important;
    color: #ffd4e8 !important;
}
[data-theme="dark"] .hero-chip:hover {
    background: rgba(65, 22, 50, 0.9) !important;
    border-color: #ff8fc0 !important;
}

[data-theme="dark"] .hero-sticker {
    background: rgba(50, 18, 38, 0.88) !important;
    border-color: rgba(255, 143, 192, 0.35) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .hero-sticker .stk-text {
    color: #ffd6eb !important;
}

[data-theme="dark"] .hero-night canvas {
    mix-blend-mode: screen !important;
    opacity: 0.8 !important;
}

[data-theme="dark"] .game-topbar,
[data-theme="dark"] .game-topbar-3d {
    background: linear-gradient(90deg, rgb(50 20 40 / .95) 0%, rgb(40 16 32 / .9) 100%) !important;
    border-bottom: 1.5px solid rgb(255 143 192 / .25) !important
}

[data-theme="dark"] .stage-title-gold {
    background: linear-gradient(135deg, #ff8fc0 0%, #ff5fa8 50%, #ffd9e8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important
}

[data-theme="dark"] .stage-subtitle-thai {
    color: #c490aa !important
}

[data-theme="dark"] .coins-display,
[data-theme="dark"] .coins-display-3d {
    background: rgb(255 207 119 / .12) !important;
    border-color: rgb(255 207 119 / .4) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .coin-count {
    color: #ffcf77 !important
}

[data-theme="dark"] .coin-unit {
    color: #f0b8d0 !important
}

[data-theme="dark"] .char-panel {
    background: rgb(45 21 37 / .9) !important;
    border-color: rgb(255 143 192 / .3) !important;
    box-shadow: 0 12px 36px rgb(0 0 0 / .4) !important
}

[data-theme="dark"] .char-identity .char-name {
    color: #ff8fc0 !important
}

[data-theme="dark"] .char-level-badge {
    background: rgb(255 143 192 / .15) !important;
    border-color: rgb(255 143 192 / .35) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .bar-group .bar-label {
    color: #f0b8d0 !important
}

[data-theme="dark"] .bar-val-badge {
    background: rgb(30 12 25 / .8) !important;
    color: #ff8fc0 !important
}

[data-theme="dark"] .bar-track,
[data-theme="dark"] .bar-track-3d {
    background: rgb(25 10 20 / .85) !important;
    border: 1px solid rgb(255 143 192 / .2) !important
}

[data-theme="dark"] .stat-box,
[data-theme="dark"] .stat-box-3d {
    background: rgb(45 21 37 / .75) !important;
    border-color: rgb(255 143 192 / .25) !important
}

[data-theme="dark"] .stat-box-3d:hover {
    background: rgb(61 26 48 / .9) !important;
    border-color: #ff8fc0 !important
}

[data-theme="dark"] .stat-box-3d .label {
    color: #c490aa !important
}

[data-theme="dark"] .stat-box-3d .value {
    color: #ff8fc0 !important
}

[data-theme="dark"] .btn-logout-game {
    background: rgb(255 107 107 / .15) !important;
    color: #ff8fa0 !important;
    border-color: rgb(255 107 107 / .35) !important
}

[data-theme="dark"] .btn-logout-game:hover {
    background: rgb(255 107 107 / .3) !important;
    color: #ffffff !important
}

[data-theme="dark"] .btn-secondary {
    background: rgb(61 26 48 / .85) !important;
    color: #ffe0ef !important;
    border-color: rgb(255 143 192 / .35) !important
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgb(255 143 192 / .22) !important;
    border-color: #ff8fc0 !important;
    color: #ffffff !important
}

[data-theme="dark"] .btn-gold {
    background: rgb(61 26 48 / .85) !important;
    color: #ffcf77 !important;
    border-color: rgb(255 207 119 / .4) !important
}

[data-theme="dark"] .btn-gold:hover {
    background: rgb(255 207 119 / .2) !important;
    border-color: #ffcf77 !important;
    color: #ffffff !important
}

[data-theme="dark"] .ai-chat-card {
    background: rgb(45 21 37 / .92) !important;
    border-color: rgb(255 143 192 / .35) !important
}

[data-theme="dark"] .ai-chat-history {
    background: rgb(30 12 25 / .75) !important;
    border-color: rgb(255 143 192 / .25) !important
}

[data-theme="dark"] .chat-bubble-ai {
    background: linear-gradient(145deg, rgb(61 26 48 / .95) 0%, rgb(45 21 37 / .98) 100%) !important;
    border-color: rgb(255 143 192 / .3) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .chat-bubble-ai .chat-text {
    color: #ffe0ef !important
}

[data-theme="dark"] .chat-bubble-user {
    background: linear-gradient(135deg, rgb(255 95 168 / .4) 0%, rgb(212 55 110 / .6) 100%) !important;
    border-color: rgb(255 143 192 / .5) !important;
    color: #ffffff !important
}

[data-theme="dark"] .ai-prompt-chips .prompt-chip {
    background: rgb(45 21 37 / .85) !important;
    border-color: rgb(255 143 192 / .3) !important;
    color: #ffe0ef !important
}

[data-theme="dark"] .ai-prompt-chips .prompt-chip:hover {
    background: rgb(255 143 192 / .22) !important;
    border-color: #ff8fc0 !important;
    color: #ff8fc0 !important
}

[data-theme="dark"] .ai-cost-pill {
    background: rgb(255 207 119 / .15) !important;
    border-color: rgb(255 207 119 / .35) !important;
    color: #ffcf77 !important
}

[data-theme="dark"] .ai-chat-footer-info {
    color: #c490aa !important
}

[data-theme="dark"] .learning-gate-banner,
[data-theme="dark"] .lesson-info-banner {
    background: rgb(45 21 37 / .85) !important;
    border-color: rgb(255 143 192 / .3) !important
}

[data-theme="dark"] .lesson-info-title {
    color: #ff8fc0 !important
}

[data-theme="dark"] .lesson-info-body {
    color: #f0b8d0 !important
}

[data-theme="dark"] .landing-nav-wrap {
    background: rgb(45 21 37 / .95) !important;
    border-bottom: 1px solid rgb(255 143 192 / .3) !important;
    box-shadow: 0 4px 24px rgb(0 0 0 / .4) !important
}

[data-theme="dark"] .landing-nav {
    background: transparent !important;
    border: none !important
}

[data-theme="dark"] .landing-brand {
    color: #ffe0ef !important
}

[data-theme="dark"] .features-section {
    background: transparent !important;
    border-top: 1px solid rgb(255 143 192 / .2) !important
}

[data-theme="dark"] .features-section .section-head .eyebrow {
    color: #ff8fc0 !important
}

[data-theme="dark"] .features-section .section-head h2 {
    color: #ff8fc0 !important;
    text-shadow: 0 0 20px rgb(255 95 168 / .4) !important
}

[data-theme="dark"] .feature-card {
    background: rgb(61 26 48 / .92) !important;
    border-color: rgb(255 143 192 / .3) !important;
    color: #ffe0ef !important;
    box-shadow: 0 8px 32px rgb(0 0 0 / .35) !important
}

[data-theme="dark"] .feature-card .sticker-band {
    border-bottom: 1px solid rgb(255 143 192 / .2) !important
}

[data-theme="dark"] .feature-card .sticker-band.sky {
    background: radial-gradient(circle, rgb(168 216 240 / .2) 0%, rgb(45 21 37 / .9) 100%) !important
}

[data-theme="dark"] .feature-card .sticker-band.purple {
    background: radial-gradient(circle, rgb(212 168 240 / .2) 0%, rgb(45 21 37 / .9) 100%) !important
}

[data-theme="dark"] .feature-card .sticker-band.teal {
    background: radial-gradient(circle, rgb(168 240 224 / .2) 0%, rgb(45 21 37 / .9) 100%) !important
}

[data-theme="dark"] .feature-body h3,
[data-theme="dark"] .feature-card h3 {
    color: #ff8fc0 !important
}

[data-theme="dark"] .feature-body p,
[data-theme="dark"] .feature-card p {
    color: #f0b8d0 !important
}

[data-theme="dark"] .site-footer {
    background: rgb(30 12 25 / .95) !important;
    border-top-color: rgb(255 143 192 / .25) !important;
    color: #c490aa !important
}

[data-theme="dark"] .site-footer h4 {
    color: #ff8fc0 !important
}

[data-theme="dark"] .site-footer a {
    color: #f0b8d0 !important
}

[data-theme="dark"] .site-footer a:hover {
    color: #ff8fc0 !important
}

[data-theme="dark"] .legal-band {
    border-top-color: rgb(255 143 192 / .15) !important;
    color: #9a6880 !important
}

/* 🌙 Auth Page & Game View in Night Mode */
[data-theme="dark"] .auth-container {
    background: #2d1525 !important;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(100, 30, 60, 0.55) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(80, 20, 50, 0.45) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg opacity='0.08'%3E%3Ctext x='8' y='22' font-size='16' fill='%23ff8fc0'%3E%E2%99%A5%3C/text%3E%3Ctext x='44' y='50' font-size='12' fill='%23ffb3d4'%3E%E2%98%85%3C/text%3E%3Ctext x='60' y='20' font-size='10' fill='%23ff8fc0'%3E%E2%9D%80%3C/text%3E%3Ctext x='20' y='68' font-size='13' fill='%23ffcce0'%3E%E2%99%A5%3C/text%3E%3Ctext x='56' y='72' font-size='9' fill='%23ff8fc0'%3E%E2%98%85%3C/text%3E%3C/g%3E%3C/svg%3E") !important;
    color: #ffe0ef !important;
}

[data-theme="dark"] .game-view .card {
    background: linear-gradient(150deg, rgba(61, 26, 48, 0.95) 0%, rgba(45, 21, 37, 0.98) 100%) !important;
    border: 1.5px solid rgba(255, 143, 192, 0.45) !important;
    color: #ffe0ef !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 143, 192, 0.20) !important;
}

[data-theme="dark"] .game-view .card-title,
[data-theme="dark"] .game-view .card .card-title {
    color: #ff8fc0 !important;
}

[data-theme="dark"] .game-view .card p,
[data-theme="dark"] .game-view .card .text-gray {
    color: #f0b8d0 !important;
}

[data-theme="dark"] .game-view .card .exp-bar {
    background: rgba(25, 10, 20, 0.85) !important;
    border: 1px solid rgba(255, 143, 192, 0.25) !important;
}

[data-theme="dark"] .modal-overlay {
    background: rgb(20 8 16 / .75) !important
}

[data-theme="dark"] .modal-header {
    border-bottom-color: rgb(255 143 192 / .25) !important
}

[data-theme="dark"] .modal-close {
    color: #ffe0ef !important;
    background: rgb(255 143 192 / .15) !important
}

[data-theme="dark"] .modal-close:hover {
    background: rgb(255 143 192 / .3) !important;
    color: #ffffff !important
}

.text-gray,
.text-muted {
    color: var(--ink-muted) !important
}

[data-theme="dark"] .text-gray,
[data-theme="dark"] .text-muted {
    color: #c490aa !important
}

[data-theme="dark"] .text-white {
    color: #ffffff !important
}

.btn-primary,
.hero-night .btn-primary {
    background: linear-gradient(135deg, #ff5fa8 0%, #ff8fc0 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: 4px solid #d4376e !important;
    box-shadow: 0 4px 0 #b32556, 0 8px 20px rgb(255 95 168 / .45) !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.15s ease, background 0.2s ease !important
}

.btn-primary:hover,
.hero-night .btn-primary:hover {
    background: linear-gradient(135deg, #ff4d9f 0%, #ff7ab5 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 0 #b32556, 0 12px 26px rgb(255 95 168 / .55) !important
}

.btn-primary:active,
.hero-night .btn-primary:active {
    transform: translateY(3px) !important;
    border-bottom-width: 1px !important;
    box-shadow: 0 1px 0 #b32556, 0 4px 10px rgb(255 95 168 / .35) !important
}

.btn-secondary {
    background: rgb(255 255 255 / .95) !important;
    color: #d4376e !important;
    border: 1.5px solid rgb(255 143 192 / .5) !important;
    border-bottom: 3.5px solid rgb(255 110 168 / .65) !important;
    box-shadow: 0 3px 0 rgb(212 55 110 / .25), 0 6px 16px rgb(255 143 192 / .2) !important;
    font-weight: 700 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease !important
}

.btn-secondary:hover {
    background: rgb(255 235 245 / .95) !important;
    transform: translateY(-2px) !important;
    border-color: #ff8fc0 !important;
    box-shadow: 0 5px 0 rgb(212 55 110 / .35), 0 10px 22px rgb(255 143 192 / .3) !important
}

.btn-secondary:active {
    transform: translateY(2px) !important;
    border-bottom-width: 1.5px !important;
    box-shadow: 0 1px 0 rgb(212 55 110 / .25), 0 3px 8px rgb(255 143 192 / .2) !important
}

[data-theme="dark"] .btn-secondary {
    background: rgb(61 26 48 / .95) !important;
    color: #ffe0ef !important;
    border: 1.5px solid rgb(255 143 192 / .4) !important;
    border-bottom: 3.5px solid rgb(255 95 168 / .6) !important;
    box-shadow: 0 3px 0 rgb(0 0 0 / .45), 0 6px 16px rgb(0 0 0 / .25) !important
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgb(80 32 62 / .95) !important;
    border-color: #ff8fc0 !important;
    color: #ffffff !important;
    box-shadow: 0 5px 0 rgb(0 0 0 / .55), 0 10px 22px rgb(255 95 168 / .3) !important
}

.menu-panel .menu-btn {
    position: relative;
    overflow: hidden;
    border-left: 4px solid transparent !important
}

.menu-panel .menu-btn.active {
    background: linear-gradient(90deg, #ff5fa8 0%, #ff8fc0 100%) !important;
    color: #ffffff !important;
    border-left: 5px solid #d4376e !important;
    box-shadow: 0 4px 16px rgb(255 95 168 / .4), inset 0 1px 0 rgb(255 255 255 / .4) !important;
    font-weight: 800 !important
}

.menu-panel .menu-btn.active .icon {
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / .25))
}

.bar-fill.hp,
.bar-fill.exp {
    transition: width 0.7s cubic-bezier(.34, 1.56, .64, 1) !important;
    position: relative;
    overflow: hidden
}

.bar-fill.hp::after,
.bar-fill.exp::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent);
    animation: barShimmer 2.2s infinite
}

@keyframes barShimmer {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(100%)
    }
}

.stat-tooltip-trigger {
    position: relative;
    cursor: help
}

.stat-tooltip-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    pointer-events: none;
    background: rgb(30 15 26 / .95);
    color: #ffe0ef;
    border: 1px solid rgb(255 143 192 / .45);
    box-shadow: 0 12px 28px rgb(0 0 0 / .45);
    padding: 10px 14px;
    border-radius: 14px;
    width: 210px;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    z-index: 100;
    transition: opacity 0.22s ease, transform 0.22s var(--ease-spring);
    backdrop-filter: blur(8px)
}

.stat-tooltip-popover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgb(30 15 26 / .95) #fff0 #fff0 #fff0
}

.stat-tooltip-popover strong {
    display: block;
    color: #ff8fc0;
    font-size: 12.5px;
    margin-bottom: 4px
}

.stat-tooltip-popover p {
    margin: 0;
    color: #f0b8d0
}

.stat-tooltip-trigger:hover .stat-tooltip-popover,
.stat-tooltip-trigger:focus .stat-tooltip-popover {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0)
}

.skeleton-card-item {
    background: rgb(255 255 255 / .85) !important;
    border: 1.5px solid rgb(255 143 192 / .25) !important
}

[data-theme="dark"] .skeleton-card-item {
    background: rgb(45 21 37 / .85) !important;
    border-color: rgb(255 143 192 / .2) !important
}

.skeleton-box {
    background: linear-gradient(90deg, rgb(255 217 232 / .5) 25%, rgb(255 240 247 / .85) 50%, rgb(255 217 232 / .5) 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.6s ease-in-out infinite
}

[data-theme="dark"] .skeleton-box {
    background: linear-gradient(90deg, rgb(70 32 56 / .6) 25%, rgb(95 42 76 / .85) 50%, rgb(70 32 56 / .6) 75%);
    background-size: 200% 100%
}

@keyframes skeletonPulse {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

.tilt-card {
    will-change: transform;
    transform-style: preserve-3d;
    transition: transform 0.25s cubic-bezier(.16, 1, .3, 1), box-shadow 0.25s ease
}

.mobile-nav-toggle {
    display: none;
    background: rgb(255 143 192 / .25);
    border: 1.5px solid rgb(255 143 192 / .45);
    color: #d4376e;
    font-weight: 700;
    border-radius: 12px;
    padding: 6px 12px;
    cursor: pointer
}

.mobile-close-btn {
    display: none;
    background: #fff0;
    border: none;
    font-size: 18px;
    color: #d4376e;
    cursor: pointer;
    padding: 4px 8px
}

.mobile-menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / .55);
    backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease
}

.mobile-menu-backdrop.active {
    opacity: 1;
    pointer-events: auto
}

.mobile-bottom-nav {
    display: none
}

@media (max-width:768px) {
    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px
    }

    .mobile-close-btn {
        display: block
    }

    .mobile-menu-backdrop {
        display: block
    }

    .menu-panel {
        position: fixed !important;
        top: 0 !important;
        right: -320px !important;
        width: 290px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 999 !important;
        overflow-y: auto !important;
        box-shadow: -8px 0 32px rgb(0 0 0 / .35) !important;
        border-radius: 24px 0 0 24px !important;
        transition: right 0.32s cubic-bezier(.34, 1.56, .64, 1) !important;
        display: flex !important;
        flex-direction: column !important
    }

    .menu-panel.mobile-open {
        right: 0 !important
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: rgb(255 255 255 / .95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1.5px solid rgb(255 143 192 / .35);
        box-shadow: 0 -4px 20px rgb(255 100 170 / .15);
        z-index: 900;
        justify-content: space-around;
        align-items: center;
        padding: 0 8px
    }

    [data-theme="dark"] .mobile-bottom-nav {
        background: rgb(45 21 37 / .95);
        border-top-color: rgb(255 143 192 / .25);
        box-shadow: 0 -4px 20px rgb(0 0 0 / .35)
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fff0;
        border: none;
        color: #9b4d6a;
        padding: 6px 12px;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        flex: 1
    }

    [data-theme="dark"] .mobile-nav-item {
        color: #c490aa
    }

    .mobile-nav-item .item-icon {
        font-size: 20px;
        margin-bottom: 2px
    }

    .mobile-nav-item .item-label {
        font-size: 11px;
        font-weight: 700
    }

    .mobile-nav-item.active {
        color: #d4376e
    }

    [data-theme="dark"] .mobile-nav-item.active {
        color: #ff8fc0
    }

    .mobile-nav-item.active .item-icon {
        transform: scale(1.15)
    }

    .game-layout {
        padding-bottom: 84px !important
    }
}

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        transform: none !important
    }

    .tilt-card {
        transform: none !important
    }

    .bar-fill.hp,
    .bar-fill.exp {
        transition: none !important
    }
}

.profile-modal-container {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.profile-header-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, rgb(255 235 243 / .95) 0%, rgb(255 217 235 / .85) 100%);
    border: 1.5px solid rgb(255 143 192 / .5);
    border-radius: 20px;
    padding: 16px 20px;
    box-shadow: 0 8px 20px rgb(255 100 170 / .15)
}

[data-theme="dark"] .profile-header-card {
    background: linear-gradient(135deg, rgb(75 30 58 / .95) 0%, rgb(55 20 42 / .85) 100%);
    border-color: rgb(255 143 192 / .35)
}

.profile-preview-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.profile-preview-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px dashed rgb(255 143 192 / .7);
    animation: rotateAura 15s linear infinite
}

.profile-preview-box {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff0f6 0%, #ffdeeb 100%);
    border: 3px solid #ff8fc0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 6px 16px rgb(255 95 168 / .35);
    padding: 0;
    margin: 0;
    text-align: center
}

[data-theme="dark"] .profile-preview-box {
    background: radial-gradient(circle, #4a1d37 0%, #301022 100%)
}

.avatar-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.avatar-preview-emoji {
    font-size: 40px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    user-select: none
}

.profile-header-info {
    flex: 1;
    min-width: 0
}

.profile-username-title {
    font-size: 20px;
    font-weight: 800;
    color: #d4376e;
    margin: 0 0 6px 0;
    word-break: break-word;
    font-family: var(--font-display)
}

[data-theme="dark"] .profile-username-title {
    color: #ffb5d5
}

.profile-user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px
}

.profile-badge-lvl {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ff8fc0 0%, #ff5fa8 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgb(255 95 168 / .3)
}

.profile-badge-role {
    display: inline-flex;
    align-items: center;
    background: rgb(255 255 255 / .7);
    color: #922754;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgb(255 143 192 / .4)
}

[data-theme="dark"] .profile-badge-role {
    background: rgb(0 0 0 / .3);
    color: #ffd6e8
}

.profile-id-note {
    font-size: 12px;
    color: var(--ink-muted);
    margin: 4px 0 0 0
}

.profile-id-note code {
    background: rgb(255 143 192 / .15);
    padding: 2px 6px;
    border-radius: 6px;
    color: #d4376e;
    font-weight: 600
}

.profile-stats-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px
}

.profile-stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-soft);
    border: 1px solid rgb(255 143 192 / .3);
    border-radius: 12px;
    padding: 8px 4px;
    text-align: center
}

.profile-stat-chip .chip-icon {
    font-size: 16px;
    margin-bottom: 2px
}

.profile-stat-chip .chip-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink)
}

.profile-stat-chip .chip-label {
    font-size: 11px;
    color: var(--ink-muted)
}

.profile-section-title {
    font-size: 15px;
    font-weight: 800;
    color: #d4376e;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-family: var(--font-display)
}

[data-theme="dark"] .profile-section-title {
    color: #ffb5d5
}

.avatar-grid-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-height: 180px;
    overflow-y: auto;
    padding: 6px;
    border: 1.5px solid rgb(255 143 192 / .3);
    border-radius: 16px;
    background: var(--surface-soft)
}

.btn-custom-upload-badge {
    background: linear-gradient(135deg, #ff8fc0 0%, #ff5fa8 100%);
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgb(255 95 168 / .3);
    transition: transform 0.2s, box-shadow 0.2s
}

.btn-custom-upload-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgb(255 95 168 / .5)
}

.avatar-upload-trigger-card {
    border: 2px dashed #ff8fc0 !important;
    background: rgb(255 240 247 / .6) !important
}

[data-theme="dark"] .avatar-upload-trigger-card {
    background: rgb(80 25 60 / .4) !important;
    border-color: rgb(255 143 192 / .5) !important
}

.avatar-upload-trigger-card:hover {
    background: rgb(255 220 238 / .9) !important;
    border-color: #ff5fa8 !important
}

.avatar-option-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    background: #fff;
    border: 2px solid rgb(255 143 192 / .3);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(.34, 1.56, .64, 1);
    user-select: none
}

[data-theme="dark"] .avatar-option-card {
    background: rgb(70 30 54 / .7);
    border-color: rgb(255 143 192 / .25)
}

.avatar-option-card:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: #ff8fc0;
    box-shadow: 0 6px 16px rgb(255 95 168 / .25)
}

.avatar-option-card.selected {
    border-color: #ff5fa8;
    background: linear-gradient(145deg, rgb(255 235 245 / .95) 0%, rgb(255 210 232 / .95) 100%);
    box-shadow: 0 6px 18px rgb(255 95 168 / .4), inset 0 0 0 1px #ff5fa8;
    transform: translateY(-2px)
}

[data-theme="dark"] .avatar-option-card.selected {
    background: linear-gradient(145deg, rgb(120 45 90 / .95) 0%, rgb(85 25 62 / .95) 100%)
}

.profile-picker-img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 4px
}

.profile-picker-emoji {
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 4px
}

.avatar-option-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.avatar-check-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: #ff5fa8;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgb(255 95 168 / .5)
}

.avatar-option-card.selected .avatar-check-icon {
    display: flex
}

.profile-input-field {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid rgb(255 143 192 / .4);
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit
}

[data-theme="dark"] .profile-input-field {
    background: rgb(50 20 38 / .8);
    color: #ffe0ef
}

.profile-input-field:focus {
    border-color: #ff5fa8;
    box-shadow: 0 0 0 3px rgb(255 95 168 / .25)
}

.profile-pw-accordion {
    margin: 8px 0
}

.btn-toggle-pw {
    background: none;
    border: none;
    padding: 8px 4px;
    color: #d4376e;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: color 0.2s
}

[data-theme="dark"] .btn-toggle-pw {
    color: #ffb5d5
}

.btn-toggle-pw:hover {
    color: #ff5fa8
}

.profile-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline)
}

@media (max-width:600px) {
    .avatar-grid-picker {
        grid-template-columns: repeat(3, 1fr)
    }

    .profile-stats-strip {
        grid-template-columns: repeat(3, 1fr)
    }

    .profile-header-card {
        flex-direction: column;
        text-align: center
    }

    .profile-user-tags {
        justify-content: center
    }
}

[data-theme="dark"] .profile-password-box {
    background: rgb(45 18 36 / .85) !important;
    border-color: rgb(255 143 192 / .35) !important
}

[data-theme="dark"] .avatar-option-label {
    color: #ffe0ef
}