.judgment-trigger {
  position: absolute;
  inset-inline-start: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  max-width: calc(100% - 20px);
  padding: 7px 11px;
  border: 1px solid #2f5467;
  border-radius: 8px;
  background: #142f40;
  color: #eff9ff;
  font: 700 .8rem/1.35 var(--mono);
  text-align: left;
  cursor: pointer;
}

.judgment-trigger:hover { background: #244c63; }

.judgment {
  --judgment-accent: #bce6ff;
  position: fixed;
  inset: 0;
  width: min(660px, calc(100% - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  padding: 0;
  overscroll-behavior: contain;
  overflow-x: hidden;
  border: 1px solid #648ba5;
  border-radius: 18px;
  background: #162c42;
  color: #f2f8ff;
  box-shadow: 0 24px 90px #070f20a6, 0 0 0 4px #bbdfff25;
  color-scheme: dark;
}

.judgment::backdrop { background: #0a1729ba; }
html:has(.judgment[open]) { overflow: hidden; }
.judgment:not([data-phase="welcome"]) {
  width: min(940px, calc(100% - 28px));
}

.judgment-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px clamp(14px, 4vw, 28px);
  border-bottom: 1px solid #47657f;
  background: #102439;
  color: var(--judgment-accent);
  font: 700 .75rem/1.4 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.judgment button { font-family: inherit; }
.judgment-top h2 { font: inherit; letter-spacing: inherit; }

.judgment-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #f2f8ff;
  font-size: 1.55rem;
  cursor: pointer;
}

.judgment-close:hover { background: #27465e; }
.judgment-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 3vw, 32px);
  padding: clamp(12px, 3vw, 24px);
}

.judgment-content { min-width: 0; }

.judgment-label {
  margin: 0;
  color: var(--judgment-accent);
  font: 700 .72rem/1.4 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.judgment-portrait { position: relative; width: 100%; }
.judgment-judge { width: 100%; }
.judgment[data-phase="reaction"] .judgment-portrait { align-self: start; }
.judgment-toy-arrow {
  --arrow-angle: 8deg;
  position: absolute;
  top: 34%;
  right: 65%;
  width: clamp(60px, 15vw, 92px);
  pointer-events: none;
  translate: 0 -50%;
  transform: rotate(var(--arrow-angle));
  transform-origin: right center;
}
.judgment-toy-arrow[data-direction="above"] {
  --arrow-angle: 68deg;
  top: 50%;
  right: 58%;
}
.judgment-toy-arrow[data-direction="right"] {
  --arrow-angle: 174deg;
  top: 42%;
  right: 43%;
}
.judgment-toy-arrow[data-direction="below"] {
  --arrow-angle: -52deg;
  top: 67%;
  right: 54%;
}
.judgment-toy-arrow[data-direction="diagonal"] {
  --arrow-angle: 135deg;
  top: 28%;
  right: 46%;
}
.judgment-hit-quip {
  position: absolute;
  right: 0;
  bottom: 3%;
  width: max-content;
  max-width: min(190px, 42vw);
  padding: 5px 9px;
  border: 1px solid var(--judgment-accent);
  border-radius: 9px 9px 0 9px;
  background: #0c2134;
  color: #f2f8ff;
  font: 700 clamp(.7rem, 2.5vw, .85rem)/1.35 var(--mono);
  pointer-events: none;
}
.judgment[data-phase="welcome"] .judgment-portrait { max-width: 176px; justify-self: center; }

@media (max-width: 560px) {
  .judgment-toy-arrow:is([data-direction="right"], [data-direction="diagonal"]) { width: clamp(44px, 11vw, 60px); }
  .judgment-hit-quip { bottom: -5px; }
  .judgment-body { grid-template-columns: minmax(0, 1fr) clamp(70px, 24vw, 120px); gap: 0 12px; }
  .judgment:is([data-phase="question"], [data-phase="reaction"]) .judgment-content { display: contents; }
  .judgment-content > .judgment-progress { grid-area: 1 / 1; align-self: end; }
  .judgment-content > .judgment-question { grid-area: 2 / 1; align-self: start; }
  .judgment:is([data-phase="question"], [data-phase="reaction"]) .judgment-portrait {
    grid-area: 1 / 2 / span 2;
    align-self: center;
  }
  .judgment-content > :is(.judgment-answers, .judgment-speech, .judgment-button) { grid-column: 1 / -1; }
  .judgment-content > .judgment-button { justify-self: start; }
  .judgment[data-phase="results"] .judgment-body {
    grid-template-columns: minmax(0, 1fr) clamp(104px, 38vw, 144px);
  }
  .judgment[data-phase="results"] .judgment-content { display: contents; }
  .judgment[data-phase="results"] .judgment-report { grid-area: 1 / 1; padding: 9px 6px; overflow-wrap: anywhere; }
  .judgment-report .judgment-label { font-size: .64rem; }
  .judgment-report .judgment-grade strong { font-size: 2.55rem; }
  .judgment-report .judgment-score { font-size: .8rem; }
  .judgment-score strong { white-space: nowrap; }
  .judgment[data-phase="results"] .judgment-portrait { grid-area: 1 / 2; }
  .judgment[data-phase="results"] .judgment-speech { margin-block: 9px; padding: 9px 11px; }
  .judgment[data-phase="results"] .judgment-bridge { margin-block: 9px; font-size: .82rem; }
  .judgment-content > :is(.judgment-bridge, .judgment-actions) { grid-column: 1 / -1; }
}

.judgment-progress {
  color: var(--judgment-accent);
  font: 700 .8rem/1.35 var(--mono);
  text-transform: uppercase;
}

.judgment-question { margin: 8px 0 13px; font-size: clamp(1.12rem, 3vw, 1.42rem); line-height: 1.25; }
.judgment-answers { display: grid; gap: 7px; }

.judgment-answer {
  --answer-accent: var(--judgment-accent);
  display: grid;
  grid-template-columns: 1.65rem 1fr;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #6385a3;
  border-radius: 8px;
  background: #1e3c55;
  color: #f2f8ff;
  font-size: .94rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.judgment-answer-letter {
  display: grid;
  place-items: center;
  min-height: 1.5rem;
  border-radius: 4px;
  background: #102439;
  color: var(--answer-accent);
  font: 700 .75rem/1 var(--mono);
}

.judgment-answer:hover:not(:disabled) { border-color: var(--answer-accent); background: #30556e; }
.judgment-answer:disabled { opacity: 1; cursor: default; }
.judgment-answer:disabled:not([data-selected="true"]) { background: #1a334a; color: #c4d8e9; }
.judgment-answer[data-risk="high"] { --answer-accent: #ffadad; border-color: #c37683; }
.judgment-answer[data-risk="high"] strong { color: var(--answer-accent); }
.judgment-answer-warning {
  display: inline-block;
  margin-inline-start: .5em;
  color: var(--answer-accent);
  font: 700 .68rem/1.2 var(--mono);
}
.judgment-answer[data-selected="true"] { border-color: var(--answer-accent); background: #2d536b; box-shadow: inset 3px 0 var(--answer-accent); }
.judgment-answer[data-selected="true"] .judgment-answer-letter { background: var(--answer-accent); color: var(--ink); }

.judgment-speech {
  display: grid;
  gap: 6px;
  margin-block: 13px;
  padding: 12px 14px;
  border: 1px solid #ccdef1;
  border-radius: 8px;
  background: #0c2134;
  font: 700 clamp(.8rem, 2.6vw, .93rem)/1.5 var(--mono);
}

@supports (background-clip: text) {
  @media (forced-colors: none) {
    .judgment-welcome p {
      background-image: repeating-linear-gradient(90deg,
        #ffa3ab 0, #ffc084 4rem, #ffe891 8rem, #a9f3b9 12rem,
        #a0dfff 16rem, #d2b4ff 20rem, #ffa3ab 24rem);
      background-clip: text;
      color: transparent;
    }

    .judgment-welcome p + p { background-position-x: 6rem; }

    @media (prefers-reduced-motion: no-preference) {
      .judgment[open] .judgment-welcome p { animation: judgment-rainbow 6s linear infinite; }
      .judgment[open] .judgment-welcome p + p { animation-delay: -1.5s; }
    }
  }
}

@keyframes judgment-rainbow {
  from { background-position-x: 0; }
  to { background-position-x: 24rem; }
}

.judgment-typed { display: grid; }
.judgment-typed span { grid-area: 1 / 1; }
.judgment-typed-space { visibility: hidden; }
.judgment-rare { color: #b8dffc; }
.judgment-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.judgment-report {
  padding: clamp(12px, 4vw, 22px);
  border: 1px solid #769bb6;
  border-radius: 10px;
  background: #24455e;
  text-align: center;
}

.judgment-report h3 {
  margin-top: 7px;
  font: 700 clamp(1rem, 3vw, 1.35rem)/1.2 var(--mono);
  color: var(--judgment-accent);
}

.judgment-grade { display: grid; gap: 3px; margin-bottom: 9px; color: #f2f8ff; font-size: .77rem; text-transform: uppercase; }
.judgment-grade strong { color: var(--judgment-accent); font: 800 clamp(3rem, 14vw, 5rem)/.92 var(--mono); }
.judgment-score { margin-top: 8px; color: #dceaf7; font-size: .93rem; }
.judgment-bridge { margin-block: 13px; color: #d9e8f4; font-size: .88rem; line-height: 1.45; }
.judgment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.judgment .judgment-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #769bb6;
  border-radius: 8px;
  background: #24455e;
  color: #f2f8ff;
  font: 700 .86rem/1.3 var(--mono);
  text-decoration: none;
  cursor: pointer;
}

.judgment .judgment-button:hover { background: #315872; }
.judgment .judgment-primary { border-color: var(--judgment-accent); background: var(--judgment-accent); color: var(--ink); }
.judgment .judgment-primary:hover { background: #d9f1ff; }
.judgment .judgment-button-quiet { background: transparent; }
.judgment-copy { flex-basis: 100%; margin: 2px 0 0; color: #dceaf7; font-size: .86rem; }
.judgment-copy input { display: block; width: 100%; min-height: 44px; margin-top: 5px; font: inherit; }
.judgment :focus-visible { outline: 2px solid var(--judgment-accent); outline-offset: 3px; }
.judgment-trigger:focus-visible { outline: 2px solid #214a64; outline-offset: 3px; }
.judgment [tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .judgment-button, .judgment-answer { transition: background-color .15s, border-color .15s; }
  .judgment[open], .judgment-report { animation: judgment-appear .28s ease-out both; }
  .judgment-judge[data-mood="pleased"] { animation: judgment-bounce .44s ease-out; }
  .judgment-judge[data-mood="puzzled"] { animation: judgment-tilt .52s ease-in-out; }
  .judgment-portrait:has(.judgment-toy-arrow[data-fresh="true"]) { animation: judgment-shake .34s .24s ease-in-out; }
  .judgment-toy-arrow[data-fresh="true"] { animation: judgment-arrow-flight .6s linear both; }
  .judgment-hit-quip { animation: judgment-appear .2s .28s ease-out both; }
  .judgment-judge[data-mood="victory"] { animation: judgment-bounce .52s ease-out 2; }
  .judgment-judge[data-mood="defeat"] { animation: judgment-sink .75s .2s ease-in-out both; }
}

@keyframes judgment-appear { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes judgment-bounce { 45% { transform: translateY(-8px) rotate(-5deg); filter: drop-shadow(0 0 12px #dcfa85); } }
@keyframes judgment-tilt { 55% { transform: rotate(12deg); } }
@keyframes judgment-shake { 30%, 70% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes judgment-arrow-flight {
  0% { opacity: 0; transform: rotate(var(--arrow-angle)) translateX(-130px); }
  12% { opacity: 1; }
  40% { transform: rotate(var(--arrow-angle)) translateX(0); }
  55% { transform: rotate(calc(var(--arrow-angle) - 12deg)) scaleX(.85); }
  100% { transform: rotate(var(--arrow-angle)); }
}
@keyframes judgment-sink { 65%, 100% { transform: translateY(4px) rotate(-12deg); filter: saturate(.65); } }