/* ---------- Scene: AiShield ---------- */
.as-item { fill: #4a4e68; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; transition: fill 0.3s ease, stroke 0.3s ease; }
.as-item[data-s="1"] { fill: #8f8aa8; stroke: #fff; }
.as-item[data-s="2"] { stroke: #fff; }
.as-link { stroke-width: 1.6; stroke-dasharray: 4 4; pointer-events: none; }
.as-spy-hex { fill: #1d1f38; stroke-width: 2.5; }
.as-spy.win .as-spy-hex { fill: #4b3a78; }
.as-spy { transition: opacity 0.3s ease; }
.as-vote { stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 8; }
.as-trail { stroke: #9B8BF4; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.as-field { fill: rgba(155, 139, 244, 0.07); stroke: #9B8BF4; stroke-width: 2; stroke-dasharray: 8 8; opacity: 0; transition: opacity 0.3s ease; }
.as-field.on { opacity: 0.9; animation: nb-dash 3s linear infinite; }
@keyframes nb-dash { to { stroke-dashoffset: -64; } }
.as-hull { fill-opacity: 0.06; stroke-width: 2.5; stroke-dasharray: 10 7; opacity: 0; transition: opacity 0.5s ease; }
.as-hull.on { opacity: 1; }
.as-label { opacity: 0; transition: opacity 0.5s ease; }
.as-label.on { opacity: 1; }


/* the panels on the right: reads in, slice scores, clusters out */
.as-panel { fill: rgba(255, 255, 255, 0.045); stroke: rgba(184, 171, 247, 0.28); stroke-width: 1.5; }
.as-pg { opacity: 0; transition: opacity 0.45s ease; }
.as-pg.on { opacity: 1; }
.as-read { transition: opacity 0.25s ease; }
.as-bar { transition: width 0.12s linear; }