@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;700;800&family=Patrick+Hand&display=swap');

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.kc-kids {
    letter-spacing: 0.01em;
    font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
}

.kc-kids h1,
.kc-kids h2,
.kc-kids h3,
.kc-kids h4,
.kc-kids .retro-headline {
    font-family: 'Baloo 2', 'Nunito', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.02em;
}

.kc-kids .font-black,
.kc-kids .font-bold {
    letter-spacing: 0.015em;
}

.kc-kids .shadow-sm,
.kc-kids .shadow,
.kc-kids .shadow-md,
.kc-kids .shadow-lg,
.kc-kids .shadow-xl,
.kc-kids .shadow-2xl {
    box-shadow: 0 16px 34px rgba(101, 119, 182, 0.18) !important;
}

.kc-kids .rounded-xl {
    border-radius: 1rem;
}

.kc-kids .rounded-2xl {
    border-radius: 1.25rem;
}

.kc-kids .rounded-3xl {
    border-radius: 1.5rem;
}

.kc-kids main {
    animation: kidsPageIn 260ms ease-out;
}

.kc-kids .hover\:bg-slate-50:hover,
.kc-kids .hover\:bg-slate-100:hover {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

.kc-kids .text-kcPrimary {
    color: #ff5ea8 !important;
}

.kc-kids .text-kcSecondary {
    color: #7a67ff !important;
}

.kc-kids .bg-kcPrimary {
    background-color: #ff5ea8 !important;
}

.kc-kids .bg-kcSecondary {
    background-color: #7a67ff !important;
}

.kc-kids .border-kcPrimary,
.kc-kids .border-kcSecondary {
    border-color: rgba(128, 137, 255, 0.5) !important;
}

.kc-kids .bg-gradient-to-r.from-kcPrimary.to-kcSecondary,
.kc-kids .bg-gradient-to-br.from-kcPrimary.to-kcSecondary {
    background-image: linear-gradient(135deg, #ff5ea8 0%, #7a67ff 100%) !important;
}

.kc-kids .bg-gradient-to-r.from-kcPrimary.to-blue-600,
.kc-kids .bg-gradient-to-r.from-kcPrimary.via-blue-500.to-blue-600,
.kc-kids .bg-gradient-to-br.from-kcPrimary.via-blue-500.to-indigo-600 {
    background-image: linear-gradient(135deg, #ff5ea8 0%, #7a67ff 52%, #53b7ff 100%) !important;
}

.kc-kids #invite-modal,
.kc-kids #announcement-modal,
.kc-kids #alert-modal,
.kc-kids #energy-claim-modal,
.kc-kids [id$='-modal'] {
    animation: kidsModalFade 220ms ease-out;
}

.kc-kids #invite-modal .kc-invite-modal-surface,
.kc-kids #announcement-modal #announcement-modal-surface,
.kc-kids #alert-modal>div.relative {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96)) !important;
    border-color: rgba(188, 207, 255, 0.9) !important;
    color: #21314d !important;
}

.kc-kids #invite-modal .kc-invite-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(193, 212, 255, 0.9) !important;
}

.kc-kids #invite-modal .kc-invite-title,
.kc-kids #announcement-modal p.text-sm.font-black,
.kc-kids #alert-modal h3 {
    color: #4254f6 !important;
}

.kc-kids #invite-modal .kc-invite-subtitle,
.kc-kids #announcement-modal p.text-xs,
.kc-kids #alert-modal p {
    color: #425475 !important;
}

.kc-kids #announcement-modal .text-amber-100,
.kc-kids #announcement-modal .text-kcLine,
.kc-kids #announcement-modal .text-kcLine\/95 {
    color: #293856 !important;
}

.kc-kids #announcement-modal .bg-black\/20,
.kc-kids #announcement-modal .bg-black\/35,
.kc-kids #announcement-modal .bg-black\/45 {
    background-color: rgba(225, 236, 255, 0.92) !important;
}

.kc-kids #announcement-modal .border-kcLine\/40,
.kc-kids #announcement-modal .border-kcLine\/30 {
    border-color: rgba(188, 207, 255, 0.95) !important;
}

.kc-kids #alert-modal button,
.kc-kids #invite-modal button,
.kc-kids #announcement-modal a,
.kc-kids #announcement-modal button {
    box-shadow: 0 12px 22px rgba(122, 103, 255, 0.22);
}

.kc-kids .animate-bounce-slow {
    animation: kidsBounce 2.6s ease-in-out infinite;
}

@keyframes kidsPageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes kidsModalFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes kidsBounce {
    0%,
    100% {
        transform: translateY(0);
    }

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

/* Unified Guessmo player-end theme layer */
.kc-kids main.kids-shell {
    padding-bottom: 6.2rem;
}

.kc-kids section[class*='max-w-'] {
    animation: kidsPageIn 240ms ease-out;
}

.kc-kids .rounded-2xl.border,
.kc-kids .rounded-3xl.border,
.kc-kids .rounded-xl.border {
    border-color: rgba(191, 210, 255, 0.88) !important;
}

.kc-kids .rounded-2xl.bg-white,
.kc-kids .rounded-3xl.bg-white,
.kc-kids .rounded-xl.bg-white,
.kc-kids .rounded-2xl.bg-slate-50,
.kc-kids .rounded-3xl.bg-slate-50 {
    box-shadow:
        0 8px 0 rgba(190, 24, 93, 0.16),
        0 20px 30px rgba(83, 33, 131, 0.24) !important;
}

.kc-kids button,
.kc-kids a[class*='bg-gradient-to-r'],
.kc-kids a[class*='bg-gradient-to-br'] {
    box-shadow:
        0 6px 0 rgba(190, 24, 93, 0.2),
        0 16px 24px rgba(83, 33, 131, 0.24);
}

.kc-kids .kc-popup-overlay {
    background: rgba(19, 15, 43, 0.62) !important;
    backdrop-filter: blur(8px) !important;
}

.kc-kids .kc-popup-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(188, 207, 255, 0.92) !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.99), rgba(243, 248, 255, 0.97)) !important;
    color: #243251 !important;
    box-shadow:
        0 12px 0 rgba(190, 24, 93, 0.2),
        0 28px 38px rgba(83, 33, 131, 0.3) !important;
}

.kc-kids .kc-popup-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 94, 168, 0.12), transparent 36%),
        radial-gradient(circle at 86% 14%, rgba(122, 103, 255, 0.14), transparent 37%);
    opacity: 0.65;
}

.kc-kids .kc-popup-card>* {
    position: relative;
    z-index: 1;
}

.kc-kids [id$='-modal'] {
    transition: opacity 200ms ease;
}

.kc-kids [id$='-modal'].hidden {
    opacity: 0;
}

.kc-kids [id$='-modal']:not(.hidden) {
    opacity: 1;
}

.kc-kids [id$='-modal'] .kc-popup-card {
    animation: kidsPopupIn 240ms ease-out;
}

.kc-kids .kc-popup-card .text-kcLine,
.kc-kids .kc-popup-card .text-kcLine\/95,
.kc-kids .kc-popup-card .text-amber-100,
.kc-kids .kc-popup-card .text-black {
    color: #243251 !important;
}

.kc-kids .kc-popup-card .bg-black\/20,
.kc-kids .kc-popup-card .bg-black\/30,
.kc-kids .kc-popup-card .bg-black\/35,
.kc-kids .kc-popup-card .bg-black\/45 {
    background-color: rgba(229, 238, 255, 0.92) !important;
}

.kc-kids .kc-popup-card .border-kcLine\/30,
.kc-kids .kc-popup-card .border-kcLine\/40,
.kc-kids .kc-popup-card .border-kcLine\/50,
.kc-kids .kc-popup-card .border-kcLine\/60 {
    border-color: rgba(188, 207, 255, 0.95) !important;
}

.kc-kids .kc-game-retro-surface {
    border: 1px solid rgba(190, 209, 255, 0.9) !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.96)) !important;
    box-shadow:
        0 8px 0 rgba(190, 24, 93, 0.16),
        0 20px 30px rgba(83, 33, 131, 0.24) !important;
}

.kc-kids .kc-game-retro-chip {
    border: 1px solid rgba(189, 207, 255, 0.9) !important;
    background: rgba(246, 251, 255, 0.95) !important;
}

@keyframes kidsPopupIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }

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