/* Detective artwork: logo, avatar speech bubbles, scenes, loader. */
.brand .logo-art { display: inline-flex; filter: drop-shadow(0 4px 10px #6d5efc40); }
.brand .logo-art svg { display: block; }

.art-avatar { flex: none; display: block; filter: drop-shadow(0 4px 10px #0000002a); }
.art-smoke { animation: smoke 3.2s ease-in-out infinite; transform-origin: 52px 38px; }
@keyframes smoke { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } }

/* "Sherlock says" header for deduction lists */
.says-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); }
.says-head b { display: block; font-family: var(--serif); font-size: 16px; }
.says-head small { color: var(--muted); font-size: 12px; }

/* Verdict speech bubble */
.says { display: flex; gap: 16px; align-items: flex-start; }
.bubble { position: relative; flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); }
.bubble::before { content: ""; position: absolute; left: -8px; top: 22px; width: 14px; height: 14px; background: inherit; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.bubble-name { font-family: var(--serif); font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.bubble p:first-of-type { margin-top: 4px; }

/* Empty-state scene: avatar with a prop */
.art-scene { position: relative; margin: 0 auto; }
.art-scene .art-avatar { position: absolute; left: 0; bottom: 0; }
.art-scene-prop { position: absolute; right: 0; top: 0; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-4deg); } }
.empty-card .ei { display: flex; justify-content: center; margin-bottom: 6px; }

/* Loader */
.investigating { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.investigating .art-mag { animation: sweep 1.6s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { transform: translateX(0) rotate(-8deg); } 50% { transform: translateX(10px) rotate(8deg); } }

/* Sign-in */
.auth-hero .hero-art { position: relative; margin: 10px -20px; }
.auth-hero .hero-art svg { width: 100%; height: auto; max-height: 32vh; display: block; }
.auth-hero h1 { font-size: clamp(30px, 3.3vw, 46px); }
.auth-hero { padding: 40px 48px; }
.auth-hero { gap: 18px; }
.art-hero-glass { animation: glass 6s ease-in-out infinite; transform-origin: 400px 85px; }
@keyframes glass { 50% { transform: translate(-14px, 8px); } }
.auth-avatar { margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) { .art-smoke, .art-scene-prop, .investigating .art-mag, .art-hero-glass { animation: none; } }
@media (max-width: 760px) { .says { gap: 10px; } .says .art-avatar { width: 44px; height: 44px; } }