.discriminator-player { --disc-purple: #493577; --disc-red: #F67280; --disc-green: #A1C1A1; width: min(960px, calc(100% - 80px), calc((100svh - 280px) / .9411)); margin: 30px auto 0; background: white; }
.discriminator-mosaic { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #fff; container-type: inline-size; }
.discriminator-camera { position: relative; min-width: 0; }
.discriminator-camera:first-child { grid-column: 1 / -1; }
.discriminator-camera video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #171717; }
.discriminator-camera:first-child video { aspect-ratio: 848 / 480; }
.discriminator-camera-label { position: absolute; top: 8px; left: 10px; color: #fff; text-shadow: 0 1px 4px #000; font-size: 11px; pointer-events: none; }
.discriminator-mode { position: absolute; right: max(8px, 1.667cqw); bottom: max(8px, 1.667cqw); min-width: 25cqw; padding: .2em .7em; border-radius: max(5px, 1.25cqw); font: 400 clamp(12px, 2.917cqw, 28px)/1.25 Helvetica, Arial, sans-serif; text-align: center; white-space: nowrap; color: white; background: rgb(0 0 0 / 55%); pointer-events: none; }
.discriminator-mosaic::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 4px solid transparent; }
.discriminator-player[data-event="human"] .discriminator-mosaic::after { border-color: var(--disc-red); }
.discriminator-player[data-event="resume"] .discriminator-mosaic::after { border-color: var(--disc-green); }
.discriminator-start { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; display: grid; place-items: center; }
.discriminator-chart { position: relative; height: 176px; margin-top: 14px; }
.discriminator-chart svg { display: block; width: 100%; height: 100%; overflow: visible; font: 11px Arial, sans-serif; color: #606368; }
.discriminator-grid { stroke: #e0e0e0; stroke-width: .7; stroke-dasharray: 1 3; }
.discriminator-axis { stroke: #333; stroke-width: 1; }
.discriminator-threshold { stroke: #777; stroke-width: 1.1; stroke-dasharray: 5 4; }
.discriminator-curve { fill: none; stroke: var(--disc-purple); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.discriminator-point { fill: var(--disc-purple); }
.discriminator-hit { fill: transparent; cursor: pointer; outline: none; }
.discriminator-hit:focus-visible { stroke: var(--disc-purple); stroke-width: 1.5; }
.discriminator-dot-new { animation: disc-dot-in .18s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes disc-dot-in { from { opacity: .25; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.discriminator-tooltip { position: absolute; z-index: 4; bottom: 36px; max-width: min(270px, 100%); padding: 7px 10px; border: 1px solid #dadce0; background: #fffffff5; color: #202124; font-size: 12px; line-height: 1.5; white-space: pre-line; pointer-events: none; box-shadow: 0 2px 8px #0001; }
.discriminator-controls { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.discriminator-controls button { border: 1px solid var(--line); background: white; border-radius: 3px; padding: 5px 10px; min-height: 36px; font-size: 13px; }
.discriminator-controls button:hover { border-color: #777; }
.discriminator-toggle { min-width: 62px; }
.discriminator-seek { flex: 1; min-width: 40px; accent-color: var(--disc-purple); height: 30px; margin: 0; }
.discriminator-time { white-space: nowrap; }
.discriminator-message { min-height: 20px; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.discriminator-player:fullscreen { width: 100%; height: 100%; max-width: none; margin: 0; padding: 12px; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.discriminator-player:fullscreen > * { width: min(100%, calc((100dvh - 245px) / .9411)); max-width: 1100px; }
.discriminator-player:fullscreen .discriminator-chart { flex: 0 0 176px; }
.discriminator-player:fullscreen .discriminator-message { flex: 0 0 20px; }
@media (max-width: 800px) { .discriminator-player { width: calc(100% - 40px); } }
@media (max-width: 600px) {
  .discriminator-chart { height: 156px; margin-top: 10px; }
  .discriminator-controls { flex-wrap: wrap; gap: 8px; }
  .discriminator-seek { order: -1; flex-basis: 100%; width: 100%; }
  .discriminator-time { margin-left: auto; }
  .discriminator-controls button { min-height: 40px; }
  .discriminator-camera-label { font-size: 10px; left: 7px; top: 5px; }
}
@media (prefers-reduced-motion: reduce) { .discriminator-dot-new { animation: none; } }

/* Event announcements share the persistent status badge's typography and surface. */
.discriminator-announcement { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: .2em .7em; border-radius: max(5px, 1.25cqw); font: 400 clamp(12px, 2.917cqw, 28px)/1.25 Helvetica, Arial, sans-serif; white-space: nowrap; color: white; background: rgb(0 0 0 / 55%); pointer-events: none; }

.discriminator-mosaic, .discriminator-camera, .discriminator-camera video { border-radius: 16px; overflow: hidden; }
.discriminator-mosaic::after { border-radius: 16px; }
.discriminator-start { inset: auto auto 14px 14px; width: 38px; height: 38px; border-radius: 50%; color: white; background: #222b; font-size: 15px; }
.discriminator-controls button { border-radius: 9px; }
.discriminator-tooltip { border-radius: 12px; }