* { font-family: 'Sarabun', sans-serif; }

/* Custom utilities that Tailwind CDN might not cover cleanly or custom overrides */
.kp-gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #74d0b6, #059669);
}

.paper-doll-wrapper {
    position: relative;
    width: 16rem;
    height: 16rem;
    background-color: white;
    border-radius: 9999px;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 4px solid #74d0b6;
    transition: transform 500ms;
}

.paper-doll-wrapper:hover {
    transform: scale(1.05);
}

.layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Premium Class Cards & Unified Card Styles */
.kp-premium-card, .class-card-premium {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(116, 208, 182, 0.3);
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08);
}

.kp-premium-card:hover, .class-card-premium:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px -12px rgba(116, 208, 182, 0.25);
    border-color: rgba(116, 208, 182, 0.5);
}

/* Group Pills */
.group-pill {
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

/* Premium Glassmorphism for SweetAlert2 */
.swal2-glass-popup {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(15px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

/* Bright Blurred Backdrop */
.swal2-backdrop-show {
    backdrop-filter: blur(5px) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.font-prompt {
    font-family: 'Prompt', sans-serif !important;
}
.group-pill.active {
    background-color: #74d0b6;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(116, 208, 182, 0.3);
}

/* Room Color Accents - Updated to be more subtle or themed */
.accent-blue { border-left: 6px solid #3b82f6; }
.accent-purple { border-left: 6px solid #8b5cf6; }
.accent-emerald { border-left: 6px solid #74d0b6; }
.accent-orange { border-left: 6px solid #f59e0b; }
.accent-pink { border-left: 6px solid #ec4899; }
.accent-indigo { border-left: 6px solid #6366f1; }

@keyframes pulse-soft {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}
.animate-pulse-soft {
    animation: pulse-soft 2s infinite ease-in-out;
}

/* Premium Brand Theme (#74d0b6) */
:root {
    --kp-mint: #74d0b6;
    --kp-mint-hover: #5bb89e;
    --kp-mint-light: #f0f9f7;
    --kp-mint-glow: rgba(116, 208, 182, 0.4);
    --kp-gray-bg: #f8fafc;
    --kp-indigo: #6366f1;
}

.bg-kp-mint { background-color: var(--kp-mint); }
.text-kp-mint { color: var(--kp-mint); }
.border-kp-mint { border-color: var(--kp-mint); }

/* Standardized Premium Components */
.kp-btn-mint {
    background-color: var(--kp-mint);
    color: white;
    font-weight: 800;
    padding: 0.75rem 1.5rem;
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 20px -5px var(--kp-mint-glow);
}
.kp-btn-mint:hover {
    background-color: var(--kp-mint-hover);
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -8px var(--kp-mint-glow);
}
.kp-btn-mint:active { transform: scale(0.98); }

.kp-btn-gradient {
    background: linear-gradient(135deg, var(--kp-mint) 0%, #4cbba1 100%);
    color: white;
    font-weight: 800;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px -10px var(--kp-mint-glow);
}
.kp-btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -12px var(--kp-mint-glow);
}

.kp-input-premium {
    background: #ffffff;
    border: 1.5px solid #f1f5f9;
    border-radius: 1.25rem;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    transition: all 0.3s;
    outline: none;
}
.kp-input-premium:focus {
    border-color: var(--kp-mint);
    box-shadow: 0 0 0 4px var(--kp-mint-light);
}

.kp-card-premium {
    background: #ffffff;
    border-radius: 2.5rem;
    border: 1.5px solid rgba(116, 208, 182, 0.2);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.kp-card-premium:hover {
    border-color: var(--kp-mint);
    box-shadow: 0 30px 60px -25px rgba(116, 208, 182, 0.3);
}

.premium-glow-mint {
    box-shadow: 0 0 25px 5px var(--kp-mint-glow) !important;
}

.premium-card-mockup {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border-radius: 2.5rem;
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.08);
    border: 1.5px solid rgba(116, 208, 182, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.premium-card-mockup:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -15px rgba(116, 208, 182, 0.3);
    border-color: rgba(116, 208, 182, 0.3);
}

.kp-card-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1.5px solid rgba(116, 208, 182, 0.2);
    box-shadow: 0 12px 30px -10px rgba(116, 208, 182, 0.15);
}

.nav-link-mockup {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s;
    position: relative;
    padding: 0.5rem 0;
}

.nav-link-mockup:hover { color: #ffffff; }
.nav-link-mockup.active { color: #ffffff; }
.nav-link-mockup.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    right: 20%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 10px;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px 2px var(--kp-mint-glow); }
    50% { box-shadow: 0 0 35px 8px var(--kp-mint-glow); }
}

.animate-glow {
    animation: pulse-glow 3s infinite ease-in-out;
}

/* --- Premium Golden Card & Shimmer Effects --- */
@keyframes golden-shimmer {
    0% { transform: translateX(-150%) skewX(-25deg); }
    50% { transform: translateX(150%) skewX(-25deg); }
    100% { transform: translateX(150%) skewX(-25deg); }
}

.nickname-golden-card {
    background: linear-gradient(135deg, #facc15 0%, #eab308 40%, #fbbf24 60%, #b45309 100%) !important;
    background-size: 200% 200%;
    position: relative;
    overflow: hidden;
    border: 2px solid #fde68a !important;
    box-shadow: 0 10px 20px -5px rgba(217, 119, 6, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.5) !important;
}

.nickname-golden-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: golden-shimmer 4s infinite ease-in-out;
    filter: blur(5px);
    z-index: 1;
}

.nickname-golden-card span {
    position: relative;
    z-index: 2;
    color: #451a03 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    font-weight: 900 !important;
}

/* --- Nickname Shop Overlay --- */
.nickname-shop-overlay {
    background: #f8fafc;
    z-index: 200;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.shop-category-label {
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.character-preview-card {
    background: white;
    border-radius: 3rem;
    box-shadow: 0 20px 50px -15px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
}


/* --- Nickname Word Card System --- */
.word-card {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    border: 2px solid #f1f5f9;
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 700;
    color: #475569;
    position: relative;
    user-select: none;
}

.word-card:hover {
    border-color: #74d0b6;
    background: #f0f9f7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(116, 208, 182, 0.15);
}

.word-card.selected {
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
    border-color: #d97706;
    color: #451a03;
    box-shadow: 0 8px 20px -5px rgba(217, 119, 6, 0.4);
    transform: scale(1.05);
}

.word-card.selected::before {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -8px;
    background: #fbbf24;
    color: #451a03;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-cost-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: #fbbf24;
    color: #451a03;
    font-size: 8px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    white-space: nowrap;
}