.judge {
  --judge-bg:#f9f9fa;
  --judge-panel:#f7f7f7;
  --judge-line:#d5d7d8;
  --judge-mint:#1e7b3e;
  --judge-coral:#ff8178;
  --judge-white:#f4f6ef;
  --judge-muted:#3f4e5a;
  --judge-yellow:#f4cd63;
  width:min(100%, 900px);
  scroll-margin-top:96px;
  margin-inline:auto;
  color:var(--judge-white);
  background:var(--judge-bg);
  border:1px solid var(--judge-line);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,0.14);
  overflow:hidden;
  font-family:"DM", system-ui, sans-serif;
}

.judge *, .judge *::before, .judge *::after { box-sizing:border-box; }
.judge button, .judge a { font:inherit; }
.judge [hidden] { display:none !important; }

.judge__header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px 14px;
  background:linear-gradient(135deg, #f7f7f7, #f8f9f9);
}

.judge__eyebrow {
  margin:0 0 5px;
  color:var(--judge-mint);
  font-family:"Barlow", "DM", sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.13em;
}

.judge__title {
  margin:0;
  max-width:620px;
  font-family:"Barlow", "DM", sans-serif;
  font-size:clamp(28px, 5vw, 42px);
  line-height:1.05;
  letter-spacing:-.02em;
}

.judge__toggles { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.judge__toggle, .judge__replay {
  min-height:44px;
  border:1px solid var(--judge-line);
  border-radius:999px;
  color:var(--judge-muted);
  background:#fafafa;
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.judge__toggle { padding:0 14px; font-size:13px; font-weight:750; }
.judge__toggle[aria-pressed="true"] { color:#0b1714; background:var(--judge-mint); border-color:var(--judge-mint); }
.judge__toggle:hover, .judge__replay:hover { transform:translateY(-1px); border-color:var(--judge-mint); }

.judge__meta {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 22px;
  color:var(--judge-muted);
  background:#fafafa;
  border-top:1px solid rgba(255,255,255,0.04);
  border-bottom:1px solid var(--judge-line);
  font-family:"Plex", monospace;
  font-size:12px;
}

.judge__stage {
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  min-height:260px;
  max-height:500px;
  background:#f9f9fa;
  isolation:isolate;
}
.judge__canvas { display:block; width:100%; height:100%; }
.judge__fallback {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:32px;
  color:var(--judge-muted);
  background:linear-gradient(145deg, #f6f7f7, #fafafa);
  text-align:center;
  font-size:16px;
  line-height:1.55;
}
.judge__fallback[hidden] { display:none; }

.judge__intro {
  position:absolute;
  inset:0;
  z-index:8;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:17px;
  padding:30px;
  background:linear-gradient(180deg, rgba(251,251,251,0.28), rgba(251,251,251,0.88));
  text-align:center;
}
.judge__intro p { max-width:520px; margin:0; color:var(--judge-white); font-size:clamp(16px,2.1vw,18px); line-height:1.5; }
.judge__intro p { padding:12px 16px; border-radius:10px; background:rgba(251,251,252,0.9); }
.judge__clip-label:empty { display:none; }
.judge__legend { position:absolute; bottom:12px; left:12px; right:12px; z-index:5; display:flex; flex-wrap:wrap; gap:12px; width:max-content; max-width:calc(100% - 24px); padding:9px 12px; border:1px solid rgba(255,255,255,0.161); border-radius:8px; background:rgba(251,251,252,0.91); color:var(--judge-white); font-size:12px; }
.judge__legend span { display:inline-flex; align-items:center; gap:7px; }
.judge__legend i { width:11px; height:11px; border-radius:3px; }
.judge__legend-blue { background:#4f8fe8; }
.judge__legend-gray { background:#87949d; }
.judge__legend { bottom:auto; top:min(calc(100% - 48px), calc(100dvh - 148px)); }
.judge__start {
  min-height:52px;
  padding:0 24px;
  border:1px solid var(--judge-mint);
  border-radius:12px;
  color:#0b1714;
  background:var(--judge-mint);
  box-shadow:0 12px 28px rgba(0,0,0,0.14);
  cursor:pointer;
  font-size:16px;
  font-weight:850;
}
.judge__start:hover { background:#b5f2c9; transform:translateY(-1px); }

.judge__clip-label {
  position:absolute;
  left:14px;
  top:14px;
  z-index:3;
  max-width:min(72%, 470px);
  padding:8px 11px;
  color:var(--judge-white);
  background:rgba(251,251,251,0.82);
  border:1px solid rgba(244,246,239,0.16);
  border-radius:9px;
  backdrop-filter:blur(8px);
  font-size:12px;
  line-height:1.35;
}

.judge__replay {
  position:absolute;
  z-index:5;
  right:14px;
  top:14px;
  min-width:105px;
  padding:0 14px;
  color:var(--judge-white);
  background:rgba(251,251,251,0.86);
  font-size:13px;
  font-weight:750;
}

.judge__hotspots { position:absolute; inset:0; z-index:4; pointer-events:none; }
.judge__hotspot {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:46px;
  height:46px;
  min-width:44px;
  min-height:44px;
  padding:0;
  transform:translate(-50%, -50%);
  border:2px solid var(--judge-white);
  border-radius:50%;
  color:#08120f;
  background:var(--judge-mint);
  box-shadow:0 0 0 6px rgba(154,230,180,0.085), 0 8px 22px rgba(0,0,0,0.17);
  cursor:pointer;
  pointer-events:auto;
}
.judge__hotspot::before {
  content:attr(data-order);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:"Plex", monospace;
  font-size:16px;
  font-weight:700;
}
.judge__hotspot span {
  pointer-events:none;
  position:absolute;
  left:50%;
  top:var(--label-top, calc(100% + 8px));
  width:max-content;
  max-width:150px;
  transform:translateX(calc(-50% + var(--label-offset-x, 0px))) translateY(var(--label-shift-y, 0px));
  padding:6px 8px;
  border:1px solid rgba(244,246,239,0.14);
  border-radius:7px;
  color:var(--judge-white);
  background:rgba(251,251,251,0.91);
  font-size:11px;
  font-weight:750;
  line-height:1.2;
  text-align:center;
}
.judge__hotspot--place { background:var(--judge-yellow); box-shadow:0 0 0 6px rgba(244,205,99,0.09), 0 8px 22px rgba(0,0,0,0.17); }
.judge__hotspot:hover { transform:translate(-50%, -50%) scale(1.07); }

.judge__workspace {
  scroll-margin-top:82px;
  padding:20px 22px 24px;
  background:linear-gradient(180deg, #f7f7f7, #f8f9f9);
  border-top:1px solid var(--judge-line);
}
.judge__step { display:flex; align-items:center; gap:12px; color:var(--judge-muted); font-family:"Plex", monospace; font-size:12px; }
.judge__stepbar { width:min(280px, 55%); height:5px; overflow:hidden; border-radius:999px; background:#f3f4f4; }
.judge__stepbar i { display:block; width:25%; height:100%; border-radius:inherit; background:var(--judge-mint); transition:width .2s ease; }
.judge__setup { margin:14px 0 0; color:var(--judge-muted); font-size:16px; line-height:1.5; }
.judge__description { margin:14px 0 0; color:var(--judge-muted); font-size:14px; }
.judge__description summary { cursor:pointer; padding:6px 0; }
.judge__description p { padding-top:10px; font-size:16px; line-height:1.5; }
.judge__prompt { margin:14px 0 12px; font-family:"DM", system-ui, sans-serif; font-size:18px; line-height:1.4; }
.judge__excuse {
  margin:15px 0 0;
  padding:12px 14px;
  border-left:3px solid var(--judge-coral);
  border-radius:0 9px 9px 0;
  color:#990d00;
  background:rgba(255,129,120,0.08);
  font-size:16px;
  line-height:1.45;
}
.judge__answers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.judge__driver { display:flex; gap:11px; align-items:center; margin-bottom:10px; }
.judge__driver svg { width:52px; height:52px; flex:none; transform:rotate(-4deg); }
.judge__driver strong { display:block; color:var(--judge-white); font-family:"Barlow",sans-serif; font-size:24px; line-height:1.1; }
.judge__driver span { display:block; margin-top:3px; font-size:12px; color:var(--judge-muted); }
.judge__excuse p { margin:0; }
.judge__answer, .judge__confirm {
  min-height:48px;
  border:1px solid var(--judge-line);
  border-radius:11px;
  color:var(--judge-white);
  background:#fafafa;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  text-align:left;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.judge__answer { padding:12px 13px; }
.judge__answer { font-size:16px; }
.judge__answers--spatial .judge__answer { display:flex; align-items:center; gap:9px; }
.judge__answers--spatial b { display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; background:var(--judge-mint); color:#08120f; font-family:"Plex", monospace; font-size:13px; }
.judge__answer:hover { border-color:var(--judge-mint); background:#f8f9f9; transform:translateY(-1px); }
.judge__confirm { margin-top:16px; padding:12px 18px; color:#0b1714; background:var(--judge-mint); border-color:var(--judge-mint); text-align:center; }
.judge__confirm:hover { background:#b5f2c9; transform:translateY(-1px); }
.judge__status { min-height:22px; margin:13px 0 0; color:var(--judge-muted); font-size:13px; line-height:1.45; }
.judge__status[data-tone="retry"] { color:#994c00; }
.judge__status[data-tone="ok"] { color:var(--judge-mint); }
.judge__feedback { padding:15px; border:1px solid rgba(154,230,180,0.24); border-radius:12px; background:rgba(154,230,180,0.06); }
.judge__feedback p { margin:0; font-size:16px; line-height:1.55; }
.judge__compare { min-height:48px; width:100%; margin-top:16px; padding:10px 12px; color:var(--judge-white); background:#fafafa; border:1px solid var(--judge-mint); border-radius:9px; cursor:pointer; }
.judge__correct-thumb { display:none; margin:0 0 16px; border-radius:9px; overflow:hidden; background:#f9f9fa; }
.judge__correct-thumb img { display:block; width:100%; height:auto; }
.judge__correct-thumb figcaption { padding:8px 10px; color:var(--judge-mint); font-size:13px; }
.judge__stage { scroll-margin-top:82px; }
.judge__feedback p + p { margin-top:8px; color:var(--judge-muted); }
.judge__feedback .judge__compare-note { margin-top:16px; color:var(--judge-muted); font-size:13px; }
.judge__rule { color:var(--judge-white); font-size:clamp(16px,2.15vw,18px) !important; }
.judge__rule span { display:block; margin-bottom:6px; color:var(--judge-mint); font-family:"Plex", monospace; font-size:12px; font-weight:800; letter-spacing:.12em; }
.judge__sources { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.judge__source { display:inline-flex; align-items:center; min-height:44px; padding:8px 11px; border:1px solid var(--judge-line); border-radius:9px; color:var(--judge-mint); background:#fafafa; font-size:12px; line-height:1.3; text-decoration:none; }
.judge__source:hover { border-color:var(--judge-mint); text-decoration:underline; }
.judge__receipt {
  width:min(100%, 390px);
  margin-top:17px;
  padding:13px 15px;
  border:1px dashed rgba(244,246,239,0.38);
  border-radius:7px;
  color:#232627;
  background:#f9f9f9;
  box-shadow:0 10px 24px rgba(0,0,0,0.09);
  font-family:"Plex", monospace;
}
.judge__receipt-head { display:flex; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px dashed rgba(244,246,239,0.24); }
.judge__receipt-head strong { color:var(--judge-coral); font-size:14px; letter-spacing:.06em; }
.judge__receipt-head span { color:var(--judge-muted); font-size:10px; }
.judge__receipt p, .judge__receipt p + p { margin:7px 0 0; color:var(--judge-white); font-size:12px; line-height:1.35; }
.judge__receipt small { display:block; margin-top:9px; color:var(--judge-muted); font-family:"DM", system-ui, sans-serif; font-size:11px; }
.judge__receipt { animation:judgePrint .35s ease-out; transform-origin:top; }
@keyframes judgePrint { from { opacity:0; transform:translateY(-8px) scaleY(.88); } to { opacity:1; transform:translateY(0) scaleY(1); } }

.judge button:focus-visible, .judge a:focus-visible {
  outline:3px solid var(--judge-yellow);
  outline-offset:3px;
}

@media (max-width: 640px) {
  .judge { border-radius:16px; }
  .judge__header { display:block; padding:17px 16px 12px; }
  .judge__toggles { justify-content:flex-start; margin-top:13px; }
  .judge__meta { padding-inline:16px; }
  .judge__stage { min-height:250px; aspect-ratio:390 / 280; }
  .judge__workspace { padding:18px 16px 22px; }
  .judge__answers { grid-template-columns:1fr; }
  .judge__answer { min-height:52px; }
  .judge__clip-label { left:10px; top:10px; max-width:calc(100% - 132px); font-size:11px; }
  .judge__replay { right:10px; top:10px; min-width:102px; }
  .judge__hotspot { width:44px; height:44px; }
  .judge__hotspot span { max-width:112px; font-size:10px; }
  .judge__hotspot span { display:none; }
  .judge__correct-thumb { display:block; }
}

@media (max-width: 410px) {
  .judge__title { font-size:28px; }
  .judge__meta { font-size:11px; }
  .judge__stage { min-height:270px; }
  .judge__hotspot span { max-width:98px; }
}

@media (max-width: 700px) {
  .judge:not(.judge--started) .judge__stage { height:max(350px, calc(100dvh - 250px)); max-height:none; aspect-ratio:auto; }
  .judge:not(.judge--started) .judge__title { font-size:34px; }
  .judge:not(.judge--started) .judge__intro { align-content:end; padding:28px 24px 40px; background:linear-gradient(180deg, rgba(251,251,251,0.071) 25%, rgba(251,251,251,0.937) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .judge *, .judge *::before, .judge *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

@media (min-width: 1050px) {
  .judge--started { width:min(100%, 1150px); display:grid; grid-template-columns:minmax(0, 1.12fr) minmax(340px, .88fr); }
  .judge--started .judge__header, .judge--started .judge__meta { grid-column:1 / -1; }
  .judge--started .judge__stage { aspect-ratio:auto; height:auto; min-height:360px; max-height:none; align-self:stretch; }
  .judge--started .judge__canvas { position:absolute; inset:0; }
  .judge--started .judge__workspace { border-top:0; border-left:1px solid var(--judge-line); min-height:410px; }
  .judge--started .judge__answers { grid-template-columns:1fr; }
  .judge--started .judge__setup { margin-top:10px; }
}