.dim-playtests{margin-top:28px;min-width:0;max-width:100%;scroll-margin-top:110px}
.playtest-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.playtest-head .label{font-size:10px;letter-spacing:.03em}
.playtest-visual{position:relative;width:100%;isolation:isolate;background:#090909;border-radius:6px}
.playtest-arrows{display:flex;justify-content:center;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line)}.playtest-arrows button{display:grid;place-items:center;width:40px;height:40px;background:transparent;border:1px solid #ffffff66;border-radius:50%;font-size:22px}.playtest-arrows button:hover{border-color:var(--signal)}.playtest-arrows>span{font:11px var(--mono);color:var(--paper);min-width:47px;text-align:center}
.family-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:8px 12px;border:1px solid #ffffff66;border-radius:20px;background:#151515e8;color:var(--paper);text-align:center;font:11px/1.4 var(--mono);pointer-events:none}
.family-hint[hidden],.family-hint-touch{display:none}
@media(pointer:coarse){.family-hint-pointer{display:none}.family-hint-touch{display:inline}}
.playtest-slide[hidden]{display:none}.playtest-slide{min-width:0}
.dunbrae-compare,.street-cup-board{position:relative;aspect-ratio:16/10;width:100%;margin:0;background:#090909;overflow:clip;border-radius:6px;isolation:isolate}
.dunbrae-compare>img,.dunbrae-compare>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dunbrae-compare{aspect-ratio:16/9;--peel-tab:91%}
.dunbrae-compare [hidden]{display:none}
.peel-sheet{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#dunbrae-peel-curl{filter:drop-shadow(2px 1px 4px #000a);stroke:#fff9;stroke-width:.7px}
#dunbrae-pull{position:absolute;top:50%;left:var(--peel-tab);transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #a6a298;border-radius:50%;background:linear-gradient(140deg,#f4f0e6,#c3beb1);color:#fffaf0;box-shadow:0 3px 12px #0006;cursor:grab;touch-action:none;user-select:none}
#dunbrae-pull:active{cursor:grabbing}
#dunbrae-pull:focus-visible{outline-offset:2px}
.peel-note{position:absolute;top:10px;right:10px;padding:5px 8px;border-radius:4px;background:#151515e8;color:var(--paper);font:10px/1.4 var(--mono);pointer-events:none}
.dunbrae-compare.is-peeling .peel-note,.dunbrae-compare.is-open .peel-note,.dunbrae-compare.is-open .peel-sheet,.dunbrae-compare.is-open #dunbrae-pull{display:none}
.dunbrae-compare.is-open .compare-video{cursor:pointer}
.playtest-caption{margin-top:12px}.playtest-caption strong{font-size:12px;font-weight:400}.story .playtest-caption p{font-size:11px;margin:4px 0 0;max-width:none;line-height:1.6}
.dunbrae-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;min-height:32px}.dunbrae-actions button{font:10px var(--mono);padding:8px 12px;border:1px solid var(--line);background:transparent;border-radius:20px}.dunbrae-actions button:hover{border-color:var(--signal)}.playtest-source{font:9px/1.6 var(--mono);color:var(--dim);margin-top:8px}
@media(max-width:620px){.dim-playtests{margin-top:22px}.playtest-head .label{font-size:9px}.playtest-arrows{gap:8px}.playtest-arrows button{width:36px;height:36px}.story .playtest-caption p{font-size:11px}}
.dim-film-credits{display:grid;gap:6px;font:12px/1.5 var(--mono);color:var(--dim)}.story .screen.dim-youtube{aspect-ratio:16/9}.dim-youtube iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}.dim-youtube:has(iframe)::after{display:none}
.family-hover{position:relative;width:100%;aspect-ratio:16/10;overflow:clip;border-radius:6px;background:#090909}.family-hover svg{display:block;width:100%;height:100%}.family-head{position:absolute;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;background:transparent;cursor:pointer;min-width:44px;min-height:44px}.family-head:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.playtest-visual>.family-hover,.playtest-visual>.dunbrae-compare{border-radius:6px 6px 0 0}
.family-head:focus-visible{outline-offset:-2px}
.family-head::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--signal), 0 0 10px var(--signal);
  opacity: 0;
  pointer-events: none;
}
.family-head.is-active::after { opacity: .86; }
@media (prefers-reduced-motion: no-preference) {
  .family-head::after { transition: opacity 220ms ease-out; }
  .family-head.is-active::after { transition-duration: 90ms; }
}


/* Reveal quickly, then let each head fade independently as the pointer moves on. */
.dimi-face-layer{opacity:0;transition:opacity 3s ease-out}.dimi-face-layer.is-revealed{opacity:1;transition-duration:.12s}@media(prefers-reduced-motion:reduce){.dimi-face-layer,.dimi-face-layer.is-revealed{transition:none}}

.dim-creator-credit{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.dim-creator-credit img{width:clamp(132px, 13vw, 170px);max-width:100%;height:auto}
.story .playtest-caption .playtest-progress{font-family:var(--mono);color:var(--paper);margin-top:7px}
.story .playtest-caption .playtest-progress:empty{margin:0}

#dimination .dimination-intro h3 { font-size: clamp(42px, 5vw, 84px); margin: 0 0 12px; }
#dimination[data-ascii] { --ascii-opacity: .1; }
#dimination .dimination-intro {
  grid-template-columns: minmax(240px, .85fr) minmax(0, 1fr);
  align-items: center;
  gap: 20px clamp(26px, 4vw, 60px);
  width: min(100%, 1060px);
}
#dimination .dim-synopsis p {
  margin: 0;
  max-width: 55ch;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.6;
}
#dimination .dim-synopsis .dim-logline {
  margin-bottom: 8px;
  color: var(--paper);
  font-size: clamp(18px, 1.75vw, 26px);
  line-height: 1.35;
  max-width: 35ch;
}
@media (max-width: 740px) {
  #dimination .dimination-intro { grid-template-columns: minmax(0, 1fr); }
}
#dimination .dim-playtests { margin-top: 0; }
.dimination-film-panel .caption { margin-top: 7px; }

.street-cup-board {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  min-height: 182px;
  border-radius: 6px;
}
.street-cup-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: blur(5px) brightness(.45);
}
.street-cup-defs { position: absolute; }
.street-cup-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12%; width: 85%; }
.street-cup {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  padding: 3px;
  border-radius: 8px;
}
.street-cup-shell, .street-cup-portrait { display: block; width: 100%; max-width: 110px; aspect-ratio: 1; }
.street-cup-shell { filter: drop-shadow(0 8px 5px #0009); }
.street-cup:hover:not([aria-disabled]) .street-cup-shell { filter: brightness(1.17) drop-shadow(0 8px 5px #0009); }
.street-cup-portrait { border: 2px solid #ffffff70; border-radius: 50%; overflow: hidden; }
.street-cup-portrait[hidden], .street-cup[data-result] .street-cup-shell, .street-cup-replay[hidden] { display: none; }
.street-cup[data-result="dimi"] .street-cup-portrait { border-color: var(--signal); }
.street-cup[data-result="miss"] .street-cup-portrait { border-style: dashed; }
.street-cup[aria-disabled] { cursor: default; }
.street-cup-number { font: 12px/1.4 var(--mono); text-shadow: 0 1px 4px #000; }
.street-cup-controls {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: 0 8px 6px;
  background: linear-gradient(transparent, #090909e8);
}
.street-cup-controls .playtest-arrows { border-top: 0; padding: 3px 8px; }
.street-cup-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 10px;
  min-height: 36px;
  text-align: center;
}
.story .street-cup-footer .playtest-progress { margin: 0; font: 11px/1.4 var(--mono); color: var(--paper); }
.street-cup-replay { min-height: 32px; padding: 4px 10px; border: 1px solid #ffffff66; border-radius: 20px; background: #151515; font: 10px/1.5 var(--mono); }
.street-cup-replay:hover { border-color: var(--signal); }

@media (prefers-reduced-motion: no-preference) {
  .street-cup[data-result] .street-cup-portrait { animation: street-cup-reveal 180ms ease-out; }
  @keyframes street-cup-reveal {
    from { opacity: 0; transform: translateY(10%); }
  }
}

.dimi-origin {
  display: grid;
  grid-template-columns: 3fr 2fr;
  aspect-ratio: 16/10;
  gap: 4px;
  overflow: clip;
  border-radius: 6px 6px 0 0;
}
.dimi-origin figure {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  position: relative;
  min-width: 0;
  margin: 0;
  gap: 4px;
}
.dimi-origin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dimi-origin figure:first-child img { object-position: 60% center; }
.dimi-origin figcaption {
  position: absolute;
  bottom: 6px;
  left: 6px;
  max-width: calc(100% - 12px);
  padding: 4px 6px;
  border-radius: 4px;
  background: #151515e8;
  color: var(--paper);
  font: 10px/1.4 var(--mono);
}