/* ==========================================================================
   oto.chat/otomates spruce-up — companion to the games page redesign but
   with its own identity: blush tone-on-tone backdrop of rising hearts,
   sparkles and chat bubbles; a bottom-to-top curtain reveal; and candy
   cards with lift/press motion. Loaded after otomates.css as an overlay.
   ========================================================================== */

:root {
    --ob-ink: #54394b;
    --ob-muted: #97798c;
    --ob-backdrop: #fff9fb;
    --ob-shadow: 0 10px 26px rgba(84, 57, 75, 0.12);
    --ob-shadow-hover: 0 18px 38px rgba(84, 57, 75, 0.18);
}

body.oto-ui-page,
.otomates-page {
    background: var(--ob-backdrop);
}

.otomates-main {
    position: relative;
    isolation: isolate;
}

/* ---------- backdrop: hearts, sparkles + chat bubbles drifting upward ---------- */
.ob-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--ob-backdrop);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23fbe3ee'%3E%3Cpath d='M84 68c0 0-11-7.2-11-13.8 0-3.8 3-6.2 6-6.2 2.2 0 4.1 1.3 5 3.3 0.9-2 2.8-3.3 5-3.3 3 0 6 2.4 6 6.2 0 6.6-11 13.8-11 13.8z'/%3E%3Cpath d='M312 258c0 0-9-5.9-9-11.3 0-3.1 2.5-5.1 4.9-5.1 1.8 0 3.4 1.1 4.1 2.7 0.7-1.6 2.3-2.7 4.1-2.7 2.4 0 4.9 2 4.9 5.1 0 5.4-9 11.3-9 11.3z'/%3E%3C/g%3E%3Cg fill='%23f6dfec'%3E%3Cpath d='M216 150h30a9 9 0 0 1 9 9v10a9 9 0 0 1-9 9h-16l-8 7 1.5-7h-7.5a9 9 0 0 1-9-9v-10a9 9 0 0 1 9-9z'/%3E%3Cpath d='M66 328h24a7 7 0 0 1 7 7v8a7 7 0 0 1-7 7h-12l-7 6 1.3-6h-6.3a7 7 0 0 1-7-7v-8a7 7 0 0 1 7-7z'/%3E%3C/g%3E%3Cg fill='%23f8e4ee'%3E%3Cpath d='M342 84l2.4 6.4 6.4 2.4-6.4 2.4-2.4 6.4-2.4-6.4-6.4-2.4 6.4-2.4z'/%3E%3Cpath d='M152 246l2 5.4 5.4 2-5.4 2-2 5.4-2-5.4-5.4-2 5.4-2z'/%3E%3Cpath d='M264 372l2 5.4 5.4 2-5.4 2-2 5.4-2-5.4-5.4-2 5.4-2z'/%3E%3Cpath d='M40 180l1.7 4.6 4.6 1.7-4.6 1.7-1.7 4.6-1.7-4.6-4.6-1.7 4.6-1.7z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 420px 420px;
    animation: ob-rise 26s linear infinite;
}

@keyframes ob-rise {
    from { background-position: 0 0; }
    to { background-position: 420px 420px; }
}

/* ---------- entry curtain: rises from the bottom ---------- */
.ob-curtain {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: linear-gradient(135deg, #ffc7e0, #cdb5ec);
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: ob-curtain-open 520ms cubic-bezier(0.4, 0, 0.2, 1) 80ms forwards;
}

@keyframes ob-curtain-open {
    to { clip-path: polygon(130% 0, 130% 0, 100% 100%, 100% 100%); }
}

@media (prefers-reduced-motion: reduce) {
    .ob-backdrop { animation: none; }
    .ob-curtain { display: none; }
}

.otomates-main .main-content,
.otomates-main .otomates-footer {
    position: relative;
    z-index: 1;
}

/* ---------- toolbar ---------- */
.browse-toolbar {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(84, 57, 75, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.search-field,
.sort-field {
    border-radius: 999px;
}

.search-input:focus-visible,
.sort-select:focus-visible {
    outline: 3px solid #ffc7e0;
    outline-offset: 1px;
}

/* ---------- cards ---------- */
.card-grid {
    gap: 18px;
}

.character-card {
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--ob-shadow);
    transition: transform 150ms ease, box-shadow 150ms ease;
    cursor: pointer;
}

.character-card:hover,
.character-card:focus-visible {
    border-color: rgba(255, 255, 255, 0.95);
    transform: translateY(-4px);
    box-shadow: var(--ob-shadow-hover);
}

.character-card:active {
    transform: scale(0.965);
    transition-duration: 80ms;
}

.character-card:focus-visible {
    outline: 3px solid #ffc7e0;
    outline-offset: 2px;
}

.card-media {
    background: linear-gradient(150deg, #ffe9f4, #e8ddfb 55%, #d7ecff);
}

.card-media::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, rgba(84, 57, 75, 0.12));
}

.card-downloads {
    background: rgba(52, 30, 46, 0.55);
    color: #fff;
    font-weight: 800;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.card-main-btn {
    border-radius: 999px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(84, 57, 75, 0.22);
}

.card-body {
    gap: 7px;
}

.card-name {
    color: var(--ob-ink);
    font-weight: 800;
}

.card-code {
    color: var(--ob-muted);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.card-snippet {
    color: var(--ob-muted);
}

.tag-pill {
    border-radius: 999px;
    background: #f6ebfb;
    color: #7a5b92;
    border: 0;
    font-weight: 700;
}

.tag-pill.warm {
    background: #ffeef4;
    color: #c05585;
}

.card-created {
    color: #b39cab;
}

/* featured cards get a candy halo */
.character-card.is-featured {
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #ffb7d9, #b7a4ec, #9bd9ff) border-box;
}

/* ---------- state panels ---------- */
.gallery-status i { color: #dbb6cc; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .character-card {
        border-radius: 15px;
    }

    .browse-toolbar {
        border-radius: 15px;
    }

    .browse-toolbar-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .search-field {
        flex: 1 1 100%;
    }

    .detail-panel {
        width: min(100vw - 16px, 560px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    .detail-layout {
        grid-template-columns: 1fr;
    }
}