/* Інтерактивні блоки: «Суддя» (.judge-*) і «Пікселі на ціль» (.px-*).
   Спираються на токени з site.css. Tektur (var(--disp)) — лише у верхньому регістрі. */

/* ═══ Суддя ═══ */
.judge { background: var(--graphite); color: var(--concrete); outline: none; overflow-x: clip; }
.judge-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(260px, .72fr); gap: clamp(32px, 4.6vw, 76px); align-items: start; }
.judge-bar { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; white-space: nowrap;
  font: 600 12px/1 var(--disp); font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); }
.judge-bar [data-judge-count] { color: var(--concrete); font-variant-numeric: tabular-nums; margin-left: auto; letter-spacing: .08em; }
.judge-prog { display: flex; gap: 3px; flex: 0 1 132px; min-width: 48px; }
.judge-prog i { flex: 1; height: 2px; background: var(--line-d); transition: background-color .5s var(--ease); }
.judge-prog i.done { background: var(--muted-d); }
.judge-prog i.now { background: var(--concrete); }

.judge-deck { display: grid; }
.judge-stack, .judge-result { grid-area: 1 / 1; }
.judge-stack { display: grid; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.judge-stack.is-gone { visibility: hidden; }
.judge-card { grid-area: 1 / 1; position: relative; background: var(--graphite); transform-origin: 50% 85%; will-change: transform; }
.judge-card.is-top { cursor: grab; }
.judge-card.is-drag { cursor: grabbing; }

/* кадр-доказ */
.judge-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #171C1D; box-shadow: inset 0 0 0 1px rgba(207,203,191,.1); }
.judge-shot .scan { position: absolute; inset: 0; cursor: inherit; }
.judge-shot .det { display: none; }
.judge-box { position: absolute; z-index: 1; pointer-events: none; opacity: 0; transform: scale(1.22);
  transition: opacity .3s var(--ease), transform .7s var(--ease);
  background:
    linear-gradient(var(--signal), var(--signal)) left top / 16px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) left top / 2px 16px no-repeat,
    linear-gradient(var(--signal), var(--signal)) right top / 16px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) right top / 2px 16px no-repeat,
    linear-gradient(var(--signal), var(--signal)) left bottom / 16px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) left bottom / 2px 16px no-repeat,
    linear-gradient(var(--signal), var(--signal)) right bottom / 16px 2px no-repeat, linear-gradient(var(--signal), var(--signal)) right bottom / 2px 16px no-repeat; }
.judge-box span { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; background: var(--signal); color: var(--graphite);
  font: 600 13px/1 var(--text); padding: 6px 8px; white-space: nowrap; font-variant-numeric: tabular-nums;
  clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease) .35s; }
.judge-box.r span { left: auto; right: 0; }
.judge-box.dn span { bottom: auto; top: 100%; margin: 6px 0 0; }
.judge-card.is-top .scan.is-seen ~ .judge-box { opacity: 1; transform: none; }
.judge-card.is-top .scan.is-seen ~ .judge-box span { clip-path: inset(0 0 0 0); }
.judge-hud { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px 26px;
  font: 600 12px/1 var(--disp); font-stretch: 85%; letter-spacing: .1em; text-transform: uppercase; color: var(--concrete);
  background: linear-gradient(180deg, rgba(23,28,29,.88), rgba(23,28,29,0)); pointer-events: none; font-variant-numeric: tabular-nums; }
.judge-hud .rec::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 9px; vertical-align: 1px; }
.judge-stamp { position: absolute; z-index: 3; top: 50%; padding: 10px 14px; pointer-events: none; opacity: 0;
  font: 600 clamp(15px, 1.6vw, 20px)/1 var(--disp); font-stretch: 85%; letter-spacing: .1em; text-transform: uppercase;
  transition: opacity .3s var(--ease); background: rgba(23,28,29,.72); }
.judge-stamp.y { left: 20px; transform: translateY(-50%) rotate(-4deg); color: #FF8452; box-shadow: inset 0 0 0 2px #FF8452; opacity: var(--py, 0); }
.judge-stamp.n { right: 20px; transform: translateY(-50%) rotate(4deg); color: var(--concrete); box-shadow: inset 0 0 0 2px var(--concrete); opacity: var(--pn, 0); }
.judge-card.is-drag .judge-stamp { transition: none; }
.judge-card.lean-y.is-top .judge-stamp.y, .judge-card.out-y .judge-stamp.y,
.judge-card.lean-n.is-top .judge-stamp.n, .judge-card.out-n .judge-stamp.n { opacity: 1; }

/* підпис кадру */
.judge-bd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 24px; padding: 22px 0 0; }
.judge-ind { font: 600 12px/1 var(--disp); font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); }
.judge-bd h3 { grid-column: 1; font: 400 clamp(26px, 2.4vw, 34px)/1.1 var(--text); letter-spacing: -0.025em; color: #F1EEE6; margin: 10px 0 0; }
.judge-conf { grid-column: 2; grid-row: 1 / 3; align-self: end; text-align: right; font-size: 13px; color: var(--muted-d); white-space: nowrap; }
.judge-conf b { display: block; font: 300 clamp(26px, 2.4vw, 34px)/1.1 var(--text); letter-spacing: -0.02em; color: var(--concrete); font-variant-numeric: tabular-nums; margin-top: 4px; }
.judge-why { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin: 20px 0 0; }
.judge-why div { padding-top: 12px; border-top: 1px solid var(--line-d); }
.judge-why dt { font-size: 13px; line-height: 1.3; color: var(--muted-d); margin-bottom: 6px; }
.judge-why dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--concrete); }

/* рішення */
.judge-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.judge-btns[hidden] { display: none; }
.judge-btn { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 22px; border: 0; border-radius: 2px; cursor: pointer;
  font: 600 16px/1 var(--disp); font-stretch: 85%; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease); }
.judge-btn:active { transform: scale(.985); }
.judge-btn.y { background: var(--concrete); color: var(--graphite); }
.judge-btn.y:hover { background: #E4E0D4; }
.judge-btn.n { background: transparent; color: var(--concrete); box-shadow: inset 0 0 0 1px var(--line-d); }
.judge-btn.n:hover { box-shadow: inset 0 0 0 1px var(--muted-d); background: rgba(207,203,191,.04); }
.judge-btn:focus-visible { outline: 2px solid var(--concrete); outline-offset: 3px; }
.judge-btn kbd { font: 500 13px/1 var(--text); color: inherit; opacity: .8; letter-spacing: 0; }
.judge-keys { margin-top: 14px; font-size: 13px; color: var(--muted-d); }
.judge.is-done .judge-keys { visibility: hidden; }

/* журнал: спокійна книга записів */
.judge-log { padding-top: 2px; }
.judge-log-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-d); }
.judge-log-hd h3 { font: 600 12px/1 var(--disp); font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); }
.judge-log-hd p { font-size: 13px; color: var(--muted-d); font-variant-numeric: tabular-nums; }
.judge-log ol { list-style: none; margin: 0; padding: 0; }
.judge-log li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; padding: 16px 0 17px; border-bottom: 1px solid var(--line-d); }
.judge-log li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--muted-d); transform-origin: 0 50%; transform: scaleX(var(--sweep, 0)); opacity: calc(1 - var(--sweep, 0) * .7); }
.judge-t { grid-row: 1 / 4; font-size: 13px; line-height: 1.55; color: var(--muted-d); font-variant-numeric: tabular-nums; }
.judge-e { font-size: 15px; line-height: 1.4; color: var(--concrete); }
.judge-e small { display: block; font-size: 13px; color: var(--muted-d); margin-top: 2px; }
.judge-v { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--concrete); }
.judge-v::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.judge-log li.wait .judge-e { color: var(--muted-d); }
.judge-log li.wait .judge-v { color: var(--muted-d); font-weight: 400; }
.judge-log li.wait .judge-v::before { display: none; }
.judge-log li.yes .judge-v::before { background: var(--signal); }
.judge-log li.no .judge-v::before { box-shadow: inset 0 0 0 1.5px var(--concrete); }
.judge-x { grid-column: 2; font-size: 13px; color: var(--muted-d); margin-top: 2px; }
.judge-x:empty { display: none; }
.judge-log li.miss .judge-x { color: #FF8452; }

/* підсумок */
.judge-result { align-self: start; padding-top: 8px; }
.judge-result[hidden] { display: none; }
.judge-result h3 { font: 600 12px/1 var(--disp); font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); outline: none; }
.judge-result .judge-sum { margin-top: 22px; font: 300 clamp(24px, 2.4vw, 34px)/1.25 var(--text); letter-spacing: -0.02em; color: #F1EEE6; max-width: 26ch; }
.judge-result .judge-formula { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 32px; max-width: none; margin: 30px 0 0; padding: 26px 0 28px; border-block: 1px solid var(--line-d);
  font: 200 clamp(56px, 8vw, 128px)/.95 var(--text); letter-spacing: -0.05em; color: #F1EEE6; font-variant-numeric: tabular-nums; }
.judge-result .judge-formula .n { font-size: .3em; font-weight: 400; letter-spacing: -0.01em; color: var(--concrete); box-shadow: inset 0 -.12em 0 var(--signal); padding-bottom: .06em; }
.judge-result p { font-size: 17px; color: var(--muted-d); margin-top: 22px; max-width: 48ch; }
.judge-result .agree { margin-top: 8px; color: var(--concrete); }
.judge-result .btn { margin-top: 32px; text-transform: uppercase; }
.judge-result .btn:focus-visible { outline: 2px solid var(--concrete); outline-offset: 4px; }

@media (max-width: 1080px) {
  .judge-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .judge-bar { gap: 12px; }
  .judge-why { grid-template-columns: 1fr; gap: 12px; }
  .judge-bd { padding-top: 18px; }
  .judge-btn { min-height: 56px; padding: 0 14px; font-size: 15px; justify-content: center; }
  .judge-btn kbd, .judge-keys { display: none; }
  .judge-stamp { font-size: 14px; padding: 8px 10px; }
  .judge-stamp.y { left: 12px; } .judge-stamp.n { right: 12px; }
  .judge-conf { grid-column: 1 / -1; grid-row: auto; text-align: left; margin-top: 8px; }
  .judge-conf b { display: inline; font-size: 15px; font-weight: 500; margin: 0 0 0 4px; letter-spacing: 0; }
  .judge-log li { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 0; }
  .judge-t { grid-row: 1 / 3; }
  .judge-v { grid-column: 3; grid-row: 1; margin-top: 1px; font-size: 13px; }
  .judge-x { grid-column: 2 / -1; }
}
@media (hover: none) { .judge-btn kbd { display: none; } .judge-btn { justify-content: center; } }

/* ═══ Пікселі на ціль ═══ */
.px { background: var(--paper); color: var(--ink); }
.px-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.px-view { position: relative; margin: 0; aspect-ratio: 4 / 5; background: #1A1F20; overflow: hidden; }
.px-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.px-hud { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; pointer-events: none;
  font: 600 12px/1 var(--disp); font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase; color: var(--concrete); font-variant-numeric: tabular-nums; }
.px-hud.t { top: 0; background: linear-gradient(180deg, rgba(26,31,32,.9), rgba(26,31,32,0)); }
.px-hud.b { bottom: 0; background: linear-gradient(0deg, rgba(26,31,32,.9), rgba(26,31,32,0)); }

.px-side { display: grid; gap: 0; }
.px-k { font: 600 13px/1 var(--disp); font-stretch: 85%; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-l); }
.px-read { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-bottom: 22px; border-bottom: 1px solid var(--ink); }
.px-read .px-k { display: block; margin-bottom: 10px; }
.px-num { font: 600 clamp(64px, 8.4vw, 128px)/.8 var(--disp); font-stretch: 75%; letter-spacing: -0.02em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.px-num small { font-size: .38em; letter-spacing: .02em; margin-left: .12em; }
.px-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; font: 500 15px/1.25 var(--text); box-shadow: inset 0 0 0 1px var(--ink); max-width: 30ch; margin-bottom: 4px; }
.px-chip::before { content: ""; flex: none; width: 10px; height: 10px; background: #3E8E52; }
.px-chip[data-state="grey"]::before { background: transparent; box-shadow: inset 0 0 0 2px var(--muted-l); }
.px-chip[data-state="grey"] { box-shadow: inset 0 0 0 1px var(--muted-l); }
.px-chip[data-state="no"]::before { background: var(--signal); }

.px-ctl { padding: 26px 0 8px; }
.px-ctl label { display: block; font-size: 15px; color: var(--muted-l); margin-bottom: 14px; }
.px-track { position: relative; }
.px-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 36px; margin: 0; background: transparent; cursor: pointer; }
.px-range::-webkit-slider-runnable-track { height: 6px;
  background: linear-gradient(90deg, var(--line-l) 0 calc(var(--p15) * 100%), #8E928B calc(var(--p15) * 100%) calc(var(--p25) * 100%), var(--ink) calc(var(--p25) * 100%)); }
.px-range::-moz-range-track { height: 6px;
  background: linear-gradient(90deg, var(--line-l) 0 calc(var(--p15) * 100%), #8E928B calc(var(--p15) * 100%) calc(var(--p25) * 100%), var(--ink) calc(var(--p25) * 100%)); }
.px-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 30px; margin-top: -12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 12px var(--ink); }
.px-range::-moz-range-thumb { width: 18px; height: 26px; background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 12px var(--ink); }
.px-range:focus-visible { outline: none; }
.px-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.px-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.px-ticks { position: relative; height: 22px; margin-top: 4px; font: 500 13px/1 var(--text); color: var(--muted-l); font-variant-numeric: tabular-nums; }
.px-ticks span { position: absolute; left: calc(var(--p) * (100% - 22px) + 11px); transform: translateX(-50%); white-space: nowrap; padding-top: 6px; }
.px-ticks span::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 5px; background: currentColor; }
.px-ticks span:first-child { transform: translateX(-11px); }
.px-ticks span:first-child::before { left: 11px; }
.px-ticks span:last-child { transform: translateX(calc(-100% + 11px)); }
.px-ticks span:last-child::before { left: auto; right: 11px; }

.px-dist { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-l); }
.px-dist canvas { width: 100%; height: 168px; }
.px-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 6px; list-style: none; font-size: 13px; color: var(--muted-l); }
.px-legend li { display: inline-flex; align-items: center; gap: 8px; }
.px-legend i { width: 18px; height: 6px; background: var(--ink); }
.px-legend li:nth-child(2) i { background: repeating-linear-gradient(135deg, var(--muted-l) 0 1.5px, transparent 1.5px 4px); }
.px-legend li:nth-child(3) i { height: 2px; background: var(--line-l); box-shadow: 0 0 0 1px #B5AFA1; }
.px-est { margin-top: 18px; font-size: 17px; line-height: 1.5; max-width: 52ch; }
.px-est b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-tag { display: inline-block; margin-left: 4px; padding: 2px 8px; font-size: 13px; line-height: 1.5; color: var(--muted-l); box-shadow: inset 0 0 0 1px var(--line-l); white-space: nowrap; vertical-align: 1px; }
.px-assume { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--muted-l); max-width: 60ch; }

@media (max-width: 1080px) {
  .px-grid { grid-template-columns: 1fr; }
  .px-view { aspect-ratio: 4 / 3; max-height: 70vh; }
}
@media (max-width: 640px) {
  .px-view { aspect-ratio: 1 / 1; }
  .px-dist canvas { height: 150px; }
  .px-est { font-size: 16px; }
}