.room { position: relative; overflow: hidden; transition: transform .18s, border-color .25s, background .25s; }
.room:active { transform: scale(.97); }
.room.working::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg,transparent 20%,rgba(111,226,255,.38),transparent 80%); transform: translateX(-100%); animation: scan-room .72s linear infinite; }
.room.done { animation: task-complete .42s cubic-bezier(.2,.9,.3,1.2); }
.clue { animation: clue-in .36s ease both; }
.clue:nth-child(2) { animation-delay: .06s; }
.clue:nth-child(3) { animation-delay: .12s; }
.clue:nth-child(4) { animation-delay: .18s; }
.suspect:not(:disabled) { animation: suspect-ready 1.35s ease-in-out infinite; }
.modal > div { animation: verdict-in .4s cubic-bezier(.2,.9,.25,1.15); }
@keyframes scan-room { to { transform: translateX(100%); } }
@keyframes task-complete { 45% { transform: scale(1.04); box-shadow: 0 0 25px rgba(94,203,139,.3); } }
@keyframes clue-in { from { opacity: 0; transform: translateX(18px); } }
@keyframes suspect-ready { 50% { border-color: rgba(245,220,118,.55); transform: translateY(-2px); } }
@keyframes verdict-in { from { opacity: 0; transform: translateY(25px) scale(.82); } }
@media (prefers-reduced-motion: reduce) { .room, .clue, .suspect, .modal > div { animation: none !important; } }
.task-svg { width: 23px; height: 23px; fill: none; stroke: #d8ddff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }.verdict-icon::before,.verdict-icon::after { content: ""; position: absolute; background: #fff; }.verdict-icon.correct::before { width: 25px; height: 12px; border-left: 5px solid #fff; border-bottom: 5px solid #fff; background: transparent; transform: rotate(-45deg) translate(-2px,1px); }.verdict-icon.wrong::before,.verdict-icon.wrong::after { width: 31px; height: 5px; left: 15px; top: 28px; border-radius: 4px; transform: rotate(45deg); }.verdict-icon.wrong::after { transform: rotate(-45deg); }