/* ============================================================ STAGE */
.stage{grid-area:stage;position:relative;display:grid;grid-template-rows:minmax(0,1fr);padding:30px 36px 158px;min-height:0;overflow:hidden;border-right:1px solid var(--line)}
.table{position:relative;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;min-height:0}
.lightbox{position:relative;height:100%;aspect-ratio:4/5;max-width:100%;min-width:0;border-radius:8px;background:var(--lightbox);
  box-shadow:0 0 0 1px rgba(20,20,25,.045),0 30px 90px -30px rgba(20,20,30,.26),0 0 60px -20px rgba(20,20,25,.054);
  transition:box-shadow .9s var(--ease), filter .9s var(--ease);view-transition-name:lightbox;overflow:hidden}
.lightbox::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), inset 0 0 60px rgba(0,0,0,.06)}
.lightbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .5s var(--ease)}
.lightbox.swapping img{opacity:0}
.app[data-state="council"] .lightbox{box-shadow:0 0 0 1px rgba(20,20,25,.072),0 30px 90px -30px rgba(20,20,30,.26),0 0 120px -20px rgba(20,20,25,.126);filter:brightness(1.04)}
.scan{position:absolute;left:-10%;right:-10%;height:120px;top:-140px;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom, transparent, rgba(20,20,25,) 30%, rgba(20,20,25,.495) 50%, rgba(255,250,240,.9) 52%, rgba(20,20,25,.315) 56%, transparent);mix-blend-mode:screen}
.app[data-state="council"] .scan{animation:scan 2.6s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes scan{0%{top:-140px;opacity:0}6%{opacity:1}94%{opacity:1}100%{top:110%;opacity:0}}
.tick{position:absolute;width:14px;height:14px;z-index:3;pointer-events:none;opacity:.55}
.tick::before,.tick::after{content:"";position:absolute;background:rgba(0,0,0,.35)}
.tick::before{width:100%;height:1px}.tick::after{height:100%;width:1px}
.tick.tl{top:10px;left:10px}.tick.tr{top:10px;right:10px;transform:scaleX(-1)}.tick.bl{bottom:10px;left:10px;transform:scaleY(-1)}.tick.br{bottom:10px;right:10px;transform:scale(-1)}
.replace{position:absolute;right:16px;bottom:16px;z-index:5;padding:7px 12px;border-radius:999px;background:rgba(20,20,25,.684);backdrop-filter:blur(8px);color:var(--ink-2);font-size:11px;letter-spacing:.01em;font-weight:500;transition:.2s}
.replace:hover{color:var(--ink);background:rgba(20,20,25,.828)}
.app:not([data-state="brief"]) .replace{display:none}
.dropzone{position:absolute;inset:0;z-index:6;display:none;place-items:center;background:rgba(255,255,255,.86);color:#333;font-size:13px;letter-spacing:.06em;border:2px dashed rgba(0,0,0,.25);border-radius:inherit}
.lightbox.dragover .dropzone{display:grid}
/* pins — the boss circles the KV (judge_outcome.md: concept attention regions) */
.pins{position:absolute;inset:0;z-index:5;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-50%) scale(0);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;pointer-events:auto;cursor:default;
  font-family:var(--data);font-size:11px;font-weight:500;color:#fff;background:rgba(20,20,25,.828);
  box-shadow:0 0 0 2px var(--brass), 0 0 0 7px rgba(91,108,255,.18), 0 6px 18px -6px rgba(20,20,30,.19);transition:transform .35s var(--ease), box-shadow .25s var(--ease)}
.pin::after{content:"";position:absolute;inset:-22px;border-radius:50%;border:2px solid var(--brass);opacity:0;transform:rotate(-8deg) scale(.6);border-right-color:transparent;transition:opacity .3s, transform .4s var(--spring)}
.pin.miss{box-shadow:0 0 0 2px var(--miss), 0 0 0 7px rgba(217,96,90,.18), 0 6px 18px -6px rgba(20,20,30,.19)}
.pin.miss::after{border-color:var(--miss);border-right-color:transparent}
.pin.in{transform:translate(-50%,-50%) scale(1);animation:pinIn .7s var(--spring) both}
.pin.hot,.pin:hover{transform:translate(-50%,-50%) scale(1.15);z-index:2}
.pin.hot::after,.pin:hover::after{opacity:.9;transform:rotate(0) scale(1)}
.pin .tip{position:absolute;left:50%;top:calc(100% + 26px);transform:translateX(-50%);white-space:nowrap;padding:6px 10px;border-radius:8px;background:rgba(20,20,25,.828);color:var(--ink);font-family:var(--ui);font-size:11px;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .2s}
.pin.hot .tip,.pin:hover .tip{opacity:1}
@keyframes pinIn{0%{transform:translate(-50%,-50%) scale(0)}100%{transform:translate(-50%,-50%) scale(1)}}