/**
 * dark-theme.css — the styling Tailwind's utility system can't express as
 * plain classes: ambient background orbs, the 3D tilt-card transform
 * formula, and the cover-art gradient placeholder. Ported directly from
 * the wildcard-wiki-template prototype.
 */

:root { color-scheme: dark; }
html, body { background: #020617; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

.bg-orb {
    position: fixed; border-radius: 999px; filter: blur(110px);
    opacity: .22; pointer-events: none; z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .bg-orb { animation: drift 22s ease-in-out infinite alternate; }
}
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(3%, -4%) scale(1.08); } }

.glass {
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.tilt-card {
    --rx: 0; --ry: 0; --glow-color: 148, 163, 184;
    transform: perspective(900px) rotateX(calc(var(--ry) * -1deg)) rotateY(calc(var(--rx) * 1deg)) translateZ(0);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
    transform-style: preserve-3d;
}
.tilt-card:hover {
    box-shadow: 0 0 0 1px rgba(var(--glow-color), .55), 0 25px 60px -20px rgba(var(--glow-color), .45), 0 0 50px -12px rgba(var(--glow-color), .4);
    border-color: rgba(var(--glow-color), .5);
}
.tilt-card .tilt-inner { transform: translateZ(24px); }
@media (prefers-reduced-motion: reduce) {
    .tilt-card, .tilt-card:hover { transform: none !important; transition: box-shadow .2s ease; }
}

.cover-art {
    background-image:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 55%),
        linear-gradient(155deg, rgba(var(--glow-color), .55), rgba(2,6,23,.95) 72%);
}
.cover-art::before {
    content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
    background-image: radial-gradient(rgba(255,255,255,.5) 0.5px, transparent 0.5px);
    background-size: 5px 5px;
}

.flame { filter: drop-shadow(0 0 6px rgba(251, 146, 60, .5)); }
[x-cloak] { display: none !important; }
.pill { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; }
.pill:active { transform: scale(.96); }