/* The Detective: his notes, his stickers, the case board and the deduction moments */

/* notes: same card as the Professor, his own face and colors */
.coach[data-who="det"] .coach-face { background: url("../img/detective.webp") center bottom / contain no-repeat; width: 76px !important; height: 180px; }
.coach.top[data-who="det"] .coach-face { width: 60px !important; height: 142px; }
.coach[data-who="det"][data-face="investigate"] .coach-face { background-image: url("../img/detective-investigate.webp"); width: 128px !important; height: 156px; }
.coach[data-who="det"][data-face="solved"] .coach-face { background-image: url("../img/detective-solved.webp"); width: 122px !important; height: 156px; }
.coach.top[data-who="det"][data-face="investigate"] .coach-face, .coach.top[data-who="det"][data-face="solved"] .coach-face { width: 104px !important; height: 128px; }
@media (max-width: 600px) { .coach[data-who="det"] .coach-face { width: 46px !important; height: 108px; } }
.coach[data-who="det"] .coach-who { color: var(--case-blue); }
.coach[data-who="det"] .coach-card { border-color: color-mix(in srgb, var(--case-blue) 45%, var(--line)); }
.coach-tag.evidence { background: color-mix(in srgb, var(--case-blue) 16%, transparent); color: var(--case-blue); }
.coach-tag.case { background: color-mix(in srgb, var(--case-red) 16%, transparent); color: var(--case-red); }

/* stickers */
.det-sticker { display: inline-block; flex: none; background: url("../img/detective.webp") center bottom / contain no-repeat; cursor: pointer; transform-origin: 50% 100%; transition: opacity .3s ease, transform .2s ease; }
.det-sticker:hover { transform: translateY(-3px) rotate(-3deg); }
.det-sticker.inline { width: 28px; height: 66px; margin: calc(var(--space-lg) * -1) var(--space-sm) calc(var(--space-xs) * -1) 0; vertical-align: bottom; animation: detBob 4s ease-in-out 3; }
h2.with-det { display: flex; align-items: flex-end; }
@keyframes detBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(2deg); } }


/* case board in the balance card */
.case-board { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin: var(--space-xs) 0 var(--space-3xs); }
.case-board:empty { display: none; }
.cb-title { font: 600 var(--text-xs) var(--font-body); color: var(--muted); }
.cb-count { font-size: var(--text-sm); } .cb-count b { color: var(--accent); }
.cb-many { font-size: var(--text-sm); color: var(--muted); }
.cb-tokens { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.cb-case { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 var(--space-2xs); border-radius: var(--radius-control); font: 700 var(--text-xs) var(--font-mono); border: 1.5px dashed var(--line); color: var(--muted); }
.cb-case.solved { border-style: solid; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.cb-case.open { border-style: solid; border-color: var(--accent); color: var(--fg); animation: caseOpen 1.8s ease-in-out 3; }
@keyframes caseOpen { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* deduction moment: lightning, flash, "Case solved!" */
.deduce { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.deduce[hidden] { display: none; }
.deduce-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--flash) 92%, transparent), color-mix(in srgb, var(--case-blue-haze) 40%, transparent) 38%, transparent 72%); }
.deduce-bolts { position: absolute; inset: 0; width: 100%; height: 100%; }
.deduce-bolts polyline { fill: none; stroke: var(--flash); stroke-width: 5; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--case-blue-glow)) drop-shadow(0 0 14px var(--case-blue-deep)); stroke-dasharray: 1400; stroke-dashoffset: 1400; opacity: 0; }
.deduce-card { position: relative; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-sm); border-radius: var(--radius-panel); opacity: 0; background: var(--sheet); color: var(--fg); border: 2px solid var(--case-blue); box-shadow: var(--shadow-float); }
.deduce-card img { width: 118px; height: 150px; object-fit: contain; }
.deduce-stamp { display: inline-block; font: 700 var(--text-3xl) var(--font-body); color: var(--case-red); border: 3px solid var(--case-red); border-radius: var(--radius-panel); padding: var(--space-3xs) var(--space-sm); transform: rotate(-5deg); }
.deduce-sub { margin-top: var(--space-xs); font: 600 var(--text-md) var(--font-body); color: var(--case-blue); }
.deduce.phase .deduce-card { border-color: var(--brass); }
.deduce.phase .deduce-stamp { color: var(--brass); border-color: var(--brass); }
.deduce.go .deduce-flash { animation: dFlash .8s ease-out; }
.deduce.go .deduce-bolts polyline { animation: dBolt .45s ease-out forwards, dOut .5s ease-in 1.2s forwards; }
.deduce.go .deduce-bolts polyline:nth-child(2) { animation-delay: .08s, 1.25s; }
.deduce.go .deduce-card { animation: dCard 2.3s var(--ease-out) forwards; }
.deduce.go.phase .deduce-card { animation-duration: 3.1s; }
.deduce.still .deduce-card { opacity: 1; }
@keyframes dFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dBolt { 0% { opacity: 1; stroke-dashoffset: 1400; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes dOut { to { opacity: 0; } }
@keyframes dCard { 0% { opacity: 0; transform: scale(.55) rotate(-4deg); } 14% { opacity: 1; transform: scale(1.06) rotate(1deg); } 22% { transform: scale(1) rotate(0); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.96); } }

/* a lost case: the culprit runs off across the bottom of the screen */
.culprit { position: absolute; left: -90px; bottom: 6%; width: 70px; height: 120px; display: none; }
.deduce.escape .culprit { display: block; }
.deduce.escape .deduce-bolts, .deduce.escape .deduce-flash { display: none; }
.deduce.escape .deduce-card { align-self: end; margin-bottom: 22vh; border-color: var(--line); }
.deduce.escape .deduce-stamp { color: var(--muted); border-color: var(--muted); font-size: var(--text-2xl); }
.deduce.escape.go .deduce-card { animation: dCard 2.2s var(--ease-out) forwards; }
.deduce.escape.go .culprit { animation: dRun 2.2s linear forwards, dHop .28s ease-in-out 8; }
.deduce.escape.still .culprit { display: none; }
.deduce.escape.still .deduce-card { opacity: 1; }
@keyframes dRun { to { translate: calc(100dvw + 180px) 0; } } /* translate, so the hop (transform) runs with it */
@keyframes dHop { 50% { transform: translateY(-8px); } }