/* Drop The Cat App V2 - candy board game theme */

:root {
    --cat-pink-50: #fff3f7;
    --cat-pink-100: #ffd9e7;
    --cat-pink-200: #ffb3ce;
    --cat-pink-300: #ff85b1;
    --cat-pink-400: #f85d93;
    --cat-pink-500: #df3f8d;
    --cat-pink-600: #c92b82;
    --cat-rose: #ec5575;
    --cat-plum: #552044;
    --cat-plum-2: #7a315e;
    --cat-plum-3: #9f3b75;
    --cat-cream: #fff8ed;
    --cat-cream-2: #fff1d6;
    --cat-tile: #f8d7b8;
    --cat-tile-soft: #ffe6c9;
    --cat-gold: #ffd34d;
    --cat-gold-dark: #e78c23;
    --cat-green: #69dd66;
    --cat-green-dark: #239d43;
    --cat-blue: #49beeb;
    --cat-blue-dark: #176c94;
    --cat-border: #9a245f;
    --cat-radius: 18px;
    --cat-radius-lg: 26px;
    --cat-font: "Nunito", "Baloo 2", "Trebuchet MS", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Compatibility for old Tailwind custom color names still present in markup/JS. */
    --github-bg: var(--cat-cream);
    --github-canvas: var(--cat-cream-2);
    --github-border: #d95b9c;
    --github-text: var(--cat-plum);
    --github-muted: #8c604e;
    --github-accent: var(--cat-pink-600);
    --github-success: var(--cat-green-dark);
    --github-danger: #e24363;
    --github-warning: var(--cat-gold-dark);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.appv2-theme {
    min-height: 100vh;
    color: var(--cat-plum);
    font-family: var(--cat-font);
    background:
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.55) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.42) 0 3px, transparent 4px),
        radial-gradient(circle at 70% 72%, rgba(255, 255, 255, 0.34) 0 4px, transparent 5px),
        linear-gradient(180deg, #f55879 0%, #fa78a5 42%, #ffc0d7 100%);
    background-attachment: fixed;
}

body.appv2-theme::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 36px, transparent 36px 100%),
        radial-gradient(ellipse at 8% 26%, rgba(255, 255, 255, 0.24) 0 60px, transparent 61px),
        radial-gradient(ellipse at 88% 44%, rgba(255, 255, 255, 0.18) 0 76px, transparent 77px);
    background-size: 220px 86px, auto, auto;
    opacity: 0.7;
}

body.appv2-theme::after {
    content: "+  +  +";
    position: fixed;
    top: 16vh;
    right: 9vw;
    z-index: -1;
    color: rgba(255, 255, 255, 0.34);
    font-size: clamp(1.5rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: 0.8em;
    transform: rotate(4deg);
}

body.appv2-theme a {
    color: inherit;
}

.appv2-theme .appv2-store-link,
.appv2-theme .appv2-store-link * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.appv2-theme .appv2-store-link-ios {
    background-color: #050505 !important;
}

.appv2-main {
    position: relative;
}

.appv2-main > section,
.appv2-main > div {
    position: relative;
}

/* Re-map old theme utility classes that are scattered through templates and JS. */
.appv2-theme .bg-stone-50,
.appv2-theme .bg-gray-50 {
    background-color: transparent !important;
}

.appv2-theme .bg-white {
    background-color: var(--cat-cream) !important;
}

.appv2-theme .bg-purple-50,
.appv2-theme .bg-pink-50,
.appv2-theme .bg-orange-50,
.appv2-theme .bg-blue-50,
.appv2-theme .bg-indigo-50 {
    background-color: rgba(255, 241, 214, 0.84) !important;
}

.appv2-theme .bg-purple-100,
.appv2-theme .bg-pink-100,
.appv2-theme .bg-orange-100,
.appv2-theme .bg-blue-100,
.appv2-theme .bg-green-100 {
    background-color: #ffe0ec !important;
}

.appv2-theme .bg-purple-500,
.appv2-theme .bg-purple-600,
.appv2-theme .bg-blue-600,
.appv2-theme .bg-accent {
    background-color: var(--cat-pink-600) !important;
}

.appv2-theme .bg-orange-400,
.appv2-theme .bg-orange-500 {
    background-color: var(--cat-gold) !important;
}

.appv2-theme .bg-github-bg {
    background-color: var(--cat-cream) !important;
}

.appv2-theme .bg-github-canvas {
    background-color: var(--cat-cream-2) !important;
}

.appv2-theme .bg-github-border {
    background-color: #ffd1e2 !important;
}

.appv2-theme .text-stone-800,
.appv2-theme .text-stone-900,
.appv2-theme .text-gray-900,
.appv2-theme .text-gray-800,
.appv2-theme .text-github-text {
    color: var(--cat-plum) !important;
}

.appv2-theme .text-stone-700,
.appv2-theme .text-gray-700 {
    color: #693052 !important;
}

.appv2-theme .text-stone-600,
.appv2-theme .text-gray-600,
.appv2-theme .text-github-muted {
    color: #875066 !important;
}

.appv2-theme .text-purple-600,
.appv2-theme .text-purple-700,
.appv2-theme .text-blue-600,
.appv2-theme .text-blue-700,
.appv2-theme .text-accent {
    color: var(--cat-pink-600) !important;
}

.appv2-theme .text-orange-500,
.appv2-theme .text-orange-600,
.appv2-theme .text-orange-700 {
    color: var(--cat-gold-dark) !important;
}

.appv2-theme .border-purple-100,
.appv2-theme .border-purple-200,
.appv2-theme .border-purple-300,
.appv2-theme .border-stone-200,
.appv2-theme .border-gray-200,
.appv2-theme .border-github-border,
.appv2-theme .border-blue-200 {
    border-color: rgba(154, 36, 95, 0.28) !important;
}

.appv2-theme .border-purple-400,
.appv2-theme .border-purple-500,
.appv2-theme .border-blue-500,
.appv2-theme .border-accent {
    border-color: var(--cat-pink-600) !important;
}

.appv2-theme .bg-gradient-to-r.from-purple-600.to-orange-500,
.appv2-theme .bg-gradient-to-r.from-purple-500.to-purple-600,
.appv2-theme .bg-gradient-to-br.from-purple-500.to-orange-400,
.appv2-theme .bg-gradient-to-br.from-purple-500.to-purple-600,
.appv2-theme .bg-gradient-to-br.from-orange-400.to-orange-500,
.appv2-theme .bg-gradient-to-br.from-pink-400.to-pink-500 {
    background-image: linear-gradient(135deg, var(--cat-pink-500), var(--cat-rose) 50%, var(--cat-gold)) !important;
}

.appv2-theme .bg-gradient-to-br.from-purple-50.via-orange-50.to-pink-50,
.appv2-theme .bg-gradient-to-br.from-purple-50.to-orange-50,
.appv2-theme .bg-gradient-to-b.from-white.to-purple-50,
.appv2-theme .bg-gradient-to-r.from-blue-50.to-purple-50,
.appv2-theme .bg-gradient-to-br.from-blue-50.to-purple-50,
.appv2-theme .bg-gradient-to-r.from-blue-50.to-indigo-50,
.appv2-theme .bg-gradient-to-r.from-amber-50.to-orange-50,
.appv2-theme .bg-gradient-to-br.from-white.to-orange-50 {
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.48) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.48) 1px, transparent 1px),
        linear-gradient(135deg, #fff5e4 0%, #ffe0ec 52%, #ffc4d9 100%) !important;
    background-size: 34px 34px, 34px 34px, auto !important;
}

.appv2-theme .text-gradient,
.appv2-theme .bg-gradient-to-r.from-purple-600.to-orange-500.bg-clip-text,
.appv2-theme .bg-gradient-to-r.from-purple-600.via-purple-500.to-orange-500.bg-clip-text {
    background-image: linear-gradient(135deg, var(--cat-plum), var(--cat-pink-600) 50%, #e87920) !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

/* Header */
.appv2-top-strip {
    border-bottom: 3px solid rgba(85, 32, 68, 0.24);
    text-shadow: 0 2px 0 rgba(85, 32, 68, 0.24);
}

.appv2-header {
    background:
        linear-gradient(180deg, rgba(255, 205, 228, 0.95), rgba(255, 180, 210, 0.92)) !important;
    border-bottom: 4px solid var(--cat-border) !important;
}

.appv2-nav > div > a:first-child {
    padding: 0.25rem 0.4rem 0.25rem 0.25rem;
    border-radius: 999px;
    background: rgba(255, 248, 237, 0.82);
    border: 2px solid rgba(154, 36, 95, 0.24);
}

.appv2-nav img {
    image-rendering: auto;
}

.appv2-header nav a,
.appv2-header button,
.appv2-footer a,
.level-range-tab,
.video-tab,
.faq-category-btn,
.submit-comment-btn,
.all-levels-btn,
.quick-level-item-btn,
.btn-primary,
.btn-secondary {
    -webkit-tap-highlight-color: transparent;
}

.appv2-header .hidden.md\:flex a:not(:first-child),
#mobile-menu a,
.appv2-header #mobile-menu-btn {
    border: 2px solid rgba(154, 36, 95, 0.24) !important;
}

.appv2-header .hidden.md\:flex a:hover,
#mobile-menu a:hover,
.appv2-header #mobile-menu-btn:hover {
    transform: translateY(-1px);
}

#mobile-menu {
    background: rgba(255, 248, 237, 0.92);
    border-radius: 22px;
    border: 2px solid rgba(154, 36, 95, 0.2);
    padding: 0.85rem;
}

/* Shared game panels and buttons */
.appv2-theme section {
    overflow: hidden;
}

.appv2-theme .container {
    position: relative;
}

.appv2-theme h1,
.appv2-theme h2,
.appv2-theme h3,
.appv2-theme .font-black,
.appv2-theme .font-bold {
    letter-spacing: 0;
}

.appv2-theme button,
.appv2-theme input,
.appv2-theme textarea,
.appv2-theme select {
    font-family: inherit;
}

.appv2-theme input[type="text"],
.appv2-theme input[type="number"],
.appv2-theme input[type="email"],
.appv2-theme textarea,
.appv2-theme select {
    color: var(--cat-plum);
    background: #fffaf2 !important;
    border: 3px solid rgba(154, 36, 95, 0.32) !important;
    border-radius: 18px !important;
}

.appv2-theme input:focus,
.appv2-theme textarea:focus,
.appv2-theme select:focus {
    border-color: var(--cat-pink-600) !important;
    outline: none !important;
}

.appv2-theme input::placeholder,
.appv2-theme textarea::placeholder {
    color: rgba(85, 32, 68, 0.48);
}

.appv2-theme .rounded-3xl,
.appv2-theme .rounded-2xl {
    border-radius: var(--cat-radius-lg) !important;
}

.appv2-theme .rounded-xl {
    border-radius: var(--cat-radius) !important;
}

.appv2-theme a[class*="bg-gradient"],
.appv2-theme button[class*="bg-gradient"],
.appv2-theme .submit-comment-btn,
.appv2-theme .all-levels-btn,
.appv2-theme .btn-primary,
.appv2-theme #level-jump-btn {
    border: 2px solid var(--cat-border) !important;
    border-radius: 999px !important;
    background-image: linear-gradient(180deg, #ff7fb1 0%, var(--cat-pink-600) 65%, #a32169 100%) !important;
    color: #fff !important;
}

.appv2-theme a[class*="bg-gradient"]:hover,
.appv2-theme button[class*="bg-gradient"]:hover,
.appv2-theme .submit-comment-btn:hover,
.appv2-theme .all-levels-btn:hover,
.appv2-theme .btn-primary:hover,
.appv2-theme #level-jump-btn:hover {
    transform: translateY(-2px);
}

.appv2-theme .btn-secondary {
    border: 3px solid rgba(154, 36, 95, 0.3);
    background: #fffaf2;
    color: var(--cat-plum);
    border-radius: 999px;
}

/* Hero and page headers */
.appv2-theme main > section:first-child {
    border-bottom: 4px solid rgba(154, 36, 95, 0.2);
}

.appv2-theme main > section:first-child::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 10% 18%, rgba(255, 255, 255, 0.28) 0 86px, transparent 88px),
        radial-gradient(ellipse at 88% 34%, rgba(255, 255, 255, 0.22) 0 100px, transparent 102px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 42px, transparent 43px 100%);
    background-size: auto, auto, 180px 84px;
}

#level-jump-input {
    min-height: 68px;
    border-radius: 28px !important;
}

#level-jump-btn {
    min-width: 86px;
}

/* Level tabs */
.level-tabs-collapse {
    --level-tabs-collapsed-height: 216px;
}

.level-tabs-panel {
    position: relative;
    overflow: hidden;
    max-height: none;
    transition: max-height 0.35s ease;
}

.level-tabs-panel.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 243, 247, 0), rgba(255, 216, 232, 0.98));
    transition: opacity 0.25s ease;
}

.level-tabs-collapse:not(.has-overflow) .level-tabs-panel::after,
.level-tabs-collapse.is-expanded .level-tabs-panel::after {
    opacity: 0;
}

.level-range-tab,
.level-tabs-toggle,
.faq-category-btn,
.video-tab,
.quick-level-item-btn {
    border: 3px solid rgba(154, 36, 95, 0.28) !important;
    background: #fffaf2 !important;
    color: var(--cat-plum) !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.level-range-tab:hover,
.level-tabs-toggle:hover,
.faq-category-btn:hover,
.video-tab:hover,
.quick-level-item-btn:hover {
    transform: translateY(-1px);
}

.level-range-tab.active,
.faq-category-btn.active,
.video-tab.bg-gradient-to-r,
.video-tab.appv2-video-tab-active,
.quick-level-item-btn.bg-accent,
.appv2-theme .grid a.bg-accent,
.appv2-theme .grid button.bg-accent {
    border-color: var(--cat-border) !important;
    background: linear-gradient(180deg, var(--cat-gold), #ffad3b) !important;
    color: var(--cat-plum) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.video-tab.appv2-video-tab-idle,
.quick-level-item-btn.appv2-quick-level-idle {
    background: #fffaf2 !important;
    color: var(--cat-plum) !important;
}

.quick-level-item-btn.appv2-quick-level-active {
    background: linear-gradient(180deg, var(--cat-gold), #ffad3b) !important;
    color: var(--cat-plum) !important;
}

.level-tabs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.15rem;
    font-size: 0.875rem;
}

.level-tabs-toggle i {
    transition: transform 0.25s ease;
}

.level-tabs-collapse.is-expanded .level-tabs-toggle i {
    transform: rotate(180deg);
}

/* Level cards */
.level-card > a > div,
#levels-grid .level-card > a > div {
    position: relative;
    border: 4px solid var(--cat-border);
    background: var(--cat-cream) !important;
}

.level-card > a > div::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.level-card .aspect-video,
.level-card-image {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 2px, transparent 2px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 2px, transparent 2px),
        var(--cat-tile) !important;
    background-size: 28px 28px;
}

.level-card img {
    filter: saturate(1.06) contrast(1.02);
}

.level-card [class*="absolute"][class*="top-3"][class*="left-3"] {
    width: auto !important;
    min-width: 3.25rem;
    height: 2.7rem !important;
    padding: 0 0.7rem;
    border-radius: 12px !important;
    border: 3px solid var(--cat-border);
    background: linear-gradient(180deg, #fff8c9, var(--cat-gold)) !important;
    color: var(--cat-plum) !important;
    transform: rotate(-2deg);
}

.level-card [class*="top-3"][class*="right-3"] {
    border: 2px solid #8e1f45;
    background: linear-gradient(180deg, #ff5f79, #de244d) !important;
}

.image-loading {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.42) 2px, transparent 2px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 2px, transparent 2px),
        var(--cat-tile-soft) !important;
    background-size: 30px 30px;
}

.image-loading .animate-spin,
#loading-overlay .animate-spin {
    border-color: rgba(201, 43, 130, 0.18) !important;
    border-bottom-color: var(--cat-pink-600) !important;
}

/* Video, guide and navigation panels */
#video-container,
.comment-module,
.appv2-theme .content-card,
.faq-item,
.appv2-theme aside,
.appv2-theme .sticky > div {
    border: 4px solid rgba(154, 36, 95, 0.36) !important;
    background: var(--cat-cream) !important;
}

.video-container {
    border: 4px solid rgba(85, 32, 68, 0.16);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.38) 2px, transparent 2px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.38) 2px, transparent 2px),
        #ffd9bd !important;
    background-size: 34px 34px;
}

.appv2-theme iframe,
.appv2-theme video {
    border-radius: 18px;
}

.guide-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.35rem;
    border: 3px solid rgba(154, 36, 95, 0.3);
    border-radius: 20px;
    background: #fffaf2;
}

.guide-mode-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    border: 2px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: var(--cat-plum);
    font-size: 0.875rem;
    font-weight: 900;
    line-height: 1.2;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.guide-mode-tab:hover {
    background: #ffe0ec;
}

.guide-mode-tab.is-active {
    border-color: var(--cat-border);
    background: linear-gradient(180deg, #ff7fb1 0%, var(--cat-pink-600) 68%, #a32169 100%);
    color: #fff;
    text-shadow: 0 1px 0 rgba(85, 32, 68, 0.3);
}

.guide-mode-tab:focus-visible {
    outline: 3px solid var(--cat-gold);
    outline-offset: 2px;
}

.guide-mode-panel[hidden],
.guide-mode-panel.hidden {
    display: none !important;
}

/* Comment image lightbox (comment.html is shared by level detail pages). */
.image-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem 1rem;
    background: rgba(53, 16, 40, 0.92);
    backdrop-filter: blur(4px);
}

.image-lightbox.active {
    display: flex;
}

.image-lightbox-content {
    position: relative;
    display: flex;
    max-width: min(92vw, 1200px);
    max-height: calc(100vh - 5rem);
    align-items: center;
    justify-content: center;
    animation: appv2LightboxZoom 0.2s ease-out;
}

.image-lightbox-content img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 5rem);
    object-fit: contain;
    border: 3px solid rgba(255, 255, 255, 0.82);
    border-radius: 16px;
    background: var(--cat-cream);
}

.image-lightbox-close {
    position: absolute;
    top: -3.25rem;
    right: 0;
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--cat-pink-600);
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.image-lightbox-close:hover {
    background: var(--cat-gold-dark);
    transform: scale(1.08) rotate(90deg);
}

.image-lightbox-close:focus-visible {
    outline: 3px solid var(--cat-gold);
    outline-offset: 3px;
}

/* Embedded online game page. */
.game-page {
    padding: clamp(0.75rem, 2vw, 1.5rem);
}

.game-page-shell {
    width: min(100%, 1440px);
    margin: 0 auto;
    overflow: hidden;
    border: 3px solid var(--cat-border);
    border-radius: var(--cat-radius-lg);
    background: var(--cat-cream);
}

.game-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 3px solid var(--cat-border);
    background: linear-gradient(135deg, #fff8ed 0%, #ffe1ec 100%);
}

.game-page-title {
    color: var(--cat-plum);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 900;
    line-height: 1.2;
}

.game-page-subtitle {
    margin-top: 0.2rem;
    color: var(--cat-plum-2);
    font-size: 0.8rem;
    font-weight: 700;
}

.game-page-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

.game-page-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem;
    border: 2px solid var(--cat-border);
    border-radius: 999px;
    background: #fff;
    color: var(--cat-plum);
    font-size: 0.8rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.game-page-action:hover {
    background: var(--cat-pink-100);
    transform: translateY(-1px);
}

.game-frame-wrap {
    position: relative;
    width: 100%;
    height: clamp(560px, calc(100svh - 230px), 920px);
    min-height: 560px;
    overflow: hidden;
    background: #171017;
}

.game-frame {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #171017;
}

.game-frame-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
}

.game-frame-loading i {
    margin-right: 0.6rem;
    color: var(--cat-gold);
}

.game-frame-wrap:fullscreen,
.game-frame-wrap:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    border-radius: 0;
}

@media (max-width: 767px) {
    .game-page {
        padding: 0;
    }

    .game-page-shell {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .game-page-header {
        align-items: flex-start;
        padding: 0.65rem 0.75rem;
    }

    .game-page-subtitle,
    .game-page-action-label {
        display: none;
    }

    .game-page-action {
        width: 42px;
        padding: 0;
    }

    .game-frame-wrap {
        height: calc(100svh - 155px);
        min-height: 500px;
    }
}

@keyframes appv2LightboxZoom {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#sidebar-nav a,
#bottom-nav a,
#bottom-nav .bg-gray-50,
.reply-item,
.comment-item,
.faq-item,
.appv2-theme .rounded-lg.border,
.appv2-theme .rounded-xl.border,
.appv2-theme .rounded-2xl.border {
    border-width: 3px !important;
    border-color: rgba(154, 36, 95, 0.24) !important;
    background-color: #fffaf2 !important;
}

#bottom-nav {
    background: rgba(255, 216, 232, 0.95) !important;
    border-top: 4px solid var(--cat-border) !important;
}

.appv2-theme .guide-step-card,
.appv2-theme .space-y-3 > .rounded-xl,
.appv2-theme .space-y-5 > .rounded-xl {
    overflow: hidden;
}

/* FAQ */
.faq-item {
    overflow: hidden;
}

.faq-question {
    color: var(--cat-plum) !important;
}

.faq-answer {
    color: #75435d !important;
    background: #fffaf2 !important;
    border-top: 2px dashed rgba(154, 36, 95, 0.2);
}

/* Comments */
.comment-module {
    position: relative;
}

.comment-module::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 211, 77, 0.22) 0 26px, transparent 27px),
        radial-gradient(circle at 90% 18%, rgba(105, 221, 102, 0.14) 0 32px, transparent 33px);
}

.comment-module > * {
    position: relative;
}

.vote-btn,
.reply-btn {
    border-radius: 999px;
    padding: 0.35rem 0.55rem;
}

.vote-btn:hover,
.reply-btn:hover {
    background: rgba(255, 211, 77, 0.18);
}

/* Static content pages */
.appv2-info-page,
.appv2-legal-page,
.appv2-contact-page {
    background: transparent;
}

.appv2-info-page > section:first-child,
.appv2-contact-page > section:first-child,
.appv2-legal-page > section:first-child {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(135deg, #ff8bb5, #f85d93 60%, #ffd1e2) !important;
    background-size: 36px 36px, 36px 36px, auto !important;
    color: #fff !important;
    border-bottom: 4px solid var(--cat-border) !important;
}

.appv2-info-page > section:first-child h1,
.appv2-contact-page > section:first-child h1,
.appv2-legal-page > section:first-child h1,
.appv2-info-page > section:first-child p,
.appv2-contact-page > section:first-child p,
.appv2-legal-page > section:first-child p {
    color: #fff !important;
    text-shadow: 0 2px 0 rgba(85, 32, 68, 0.24);
}

.appv2-info-page .bg-white,
.appv2-contact-page .bg-white,
.appv2-legal-page .bg-white,
.appv2-info-page .bg-gradient-to-r,
.appv2-contact-page .bg-gradient-to-r,
.appv2-legal-page .bg-gradient-to-r {
    border: 4px solid rgba(154, 36, 95, 0.24) !important;
    border-radius: 26px !important;
    background: var(--cat-cream) !important;
}

.appv2-contact-page button[type="submit"] {
    border: 3px solid var(--cat-border) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ff7fb1, var(--cat-pink-600)) !important;
}

/* Footer */
.appv2-footer {
    border-top: 4px solid var(--cat-border);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px),
        linear-gradient(180deg, #ffd1e2 0%, #ffe6ef 48%, #fff4df 100%) !important;
    background-size: 38px 38px, 38px 38px, auto !important;
}

.appv2-footer svg {
    display: none;
}

.appv2-footer .container {
    padding-top: 3rem;
}

.appv2-footer .bg-white {
    border: 3px solid rgba(154, 36, 95, 0.22);
}

/* Pagination */
.pagination,
.appv2-theme ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.pagination li,
.pagination a,
.pagination span {
    border-radius: 999px !important;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    min-height: 2.4rem;
    border: 3px solid rgba(154, 36, 95, 0.24);
    background: #fffaf2;
    color: var(--cat-plum);
    font-weight: 900;
}

.pagination .active span,
.pagination a:hover {
    background: var(--cat-gold);
    border-color: var(--cat-border);
}

/* Loading, skeletons and toast */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.skeleton {
    background: linear-gradient(90deg, #ffdce9 25%, #fff7ed 50%, #ffdce9 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

#loading-overlay {
    background: rgba(85, 32, 68, 0.58) !important;
    backdrop-filter: blur(4px);
}

#loading-overlay > div {
    border: 4px solid var(--cat-border);
    border-radius: 22px !important;
}

.appv2-toast {
    border: 3px solid var(--cat-border);
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ff7fb1, var(--cat-pink-600)) !important;
    text-shadow: 0 2px 0 rgba(85, 32, 68, 0.25);
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

@keyframes floatDelayed {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes bounceSlow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.45s ease-out;
}

.animate-float {
    animation: float 5s ease-in-out infinite;
}

.animate-float-delayed {
    animation: floatDelayed 5s ease-in-out infinite;
    animation-delay: 2.4s;
}

.animate-bounce-slow {
    animation: bounceSlow 2.2s ease-in-out infinite;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #ffd8e8;
}

::-webkit-scrollbar-thumb {
    background: #c92b82;
    border: 2px solid #ffd8e8;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9a245f;
}

@media (min-width: 768px) {
    .level-tabs-collapse {
        --level-tabs-collapsed-height: 148px;
    }
}

@media (min-width: 1024px) {
    .level-tabs-collapse {
        --level-tabs-collapsed-height: 200px;
    }
}

@media (max-width: 767px) {
    body.appv2-theme::after {
        display: none;
    }

    .appv2-theme h1 {
        line-height: 1.06;
    }

    #level-jump-input {
        min-height: 60px;
        padding-right: 6.25rem !important;
    }

    #level-jump-btn {
        min-width: 72px;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .level-card > a > div {
        border-width: 3px;
    }

    .level-card [class*="absolute"][class*="top-3"][class*="left-3"] {
        min-width: 2.75rem;
        height: 2.25rem !important;
        font-size: 0.75rem !important;
        padding: 0 0.5rem;
    }

    #bottom-nav {
        position: relative;
    }
}

/* AppV2 is intentionally flat: block legacy and Tailwind shadows site-wide. */
.appv2-theme,
.appv2-theme *,
.appv2-theme *::before,
.appv2-theme *::after {
    box-shadow: none !important;
}

@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;
    }
}

@media print {
    .appv2-header,
    .appv2-footer,
    .appv2-top-strip,
    #bottom-nav,
    .no-print {
        display: none !important;
    }

    * {
        background: white !important;
        color: black !important;
    }
}