:root {
  --look-paper: var(--pp-card, #ede6d6);
  --look-pencil: var(--pp-graphite, #3a3f45);
  --look-ink: var(--pp-type, #22242b);
  --look-faint: var(--pp-type-faint, rgba(34, 36, 43, 0.70));
  --look-rule: var(--pp-rule, rgba(43, 58, 85, 0.28));
  --look-shadow: rgba(8, 12, 16, 0.42);
}

.stage-frame:has(> .look-slip) .fx-layer :is(.synchrony-layer, .terrain-layer, .fx-weather) {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}


.look-slip {
  position: absolute;
  z-index: 9;                        
  box-sizing: border-box;
  max-width: min(23ch, 34%);
  padding: 0.62em 0.9em 0.72em;
  color: var(--look-ink);
  background-color: var(--look-paper);
  background-image:
    radial-gradient(120% 90% at 18% 8%, rgba(255, 250, 232, 0.5), rgba(255, 250, 232, 0) 64%),
    repeating-linear-gradient(97deg, rgba(58, 63, 69, 0.035) 0 2px, rgba(58, 63, 69, 0) 2px 6px);
  clip-path: polygon(0 2%, 98% 0, 100% 96%, 3% 100%, 1% 52%);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.1), 5px 7px 14px var(--look-shadow);
  transform: rotate(-0.6deg) translateY(4px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: auto;
}
.look-slip.in { opacity: 1; transform: rotate(-0.6deg) translateY(0); }

.look-slip.is-faint { color: var(--look-faint); background-color: color-mix(in srgb, var(--look-paper) 88%, #cfc6b2); }

.look-slip .ls-name {
  margin: 0;
  font-family: var(--font-hand, cursive);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.15;
  color: var(--look-pencil);
}
.look-slip .ls-echo {
  margin: 0.34em 0 0;
  font-family: var(--font-type, monospace);
  font-size: clamp(0.66rem, 1.05vw, 0.8rem);
  letter-spacing: var(--track-type, 0.06em);
  line-height: 1.35;
  color: var(--look-ink);
  opacity: 0.86;
}
.look-slip .ls-show {
  display: inline-block;
  margin: 0.62em 0 0;
  padding: 0.1em 0;
  border: 0;
  background: none;
  font-family: var(--font-type, monospace);
  font-size: clamp(0.66rem, 1.05vw, 0.8rem);
  letter-spacing: var(--track-type, 0.06em);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--look-ink);
  cursor: pointer;
}
.look-slip .ls-show:hover { text-decoration-thickness: 2px; }
@media (pointer: coarse) {
  .look-slip .ls-show { position: relative; font-size: max(12px, 0.8rem); }
  .look-slip .ls-show::after {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}
.look-slip .ls-show:focus-visible {
  outline: 2px solid var(--look-pencil);
  outline-offset: 3px;
}

.look-slip.at-top { top: 4%; }
.look-slip.at-bottom { bottom: 18%; }
.look-slip.at-left { left: 3.5%; }
.look-slip.at-right { right: 3.5%; }


.look-list {
  position: absolute;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 14em;
  max-width: 19em;
  padding: 0.35em 0.4em 0.5em 0.9em;
  background-color: color-mix(in srgb, var(--look-paper) 92%, #ffffff);
  background-image:
    linear-gradient(to right, transparent 0.55em, var(--pp-red-dim, rgba(142, 47, 42, 0.55)) 0.55em, var(--pp-red-dim, rgba(142, 47, 42, 0.55)) calc(0.55em + 1px), transparent calc(0.55em + 1px));
  clip-path: polygon(0 4%, 6% 0, 32% 3%, 61% 0, 100% 3%, 100% 100%, 0 100%);
  box-shadow: 3px 5px 12px var(--look-shadow);
  transform: translateY(6px);
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: auto;
}
.look-list.in { opacity: 1; transform: translateY(0); }

.look-list .ll-head {
  margin: 0.2em 0 0.1em;
  font-family: var(--font-hand, cursive);
  font-size: 0.95rem;
  color: var(--look-pencil);
}
.look-list .ll-row {
  display: block;
  width: 100%;
  min-height: 2.1em;
  padding: 0.32em 0.4em;
  border: 0;
  border-bottom: 1px solid var(--look-rule);
  border-radius: 0;
  background: none;
  font-family: var(--font-hand, cursive);
  font-size: clamp(0.92rem, 1.35vw, 1.06rem);
  line-height: 1.3;
  text-align: left;
  color: var(--look-pencil);
  cursor: pointer;
}
.look-list .ll-row:last-child { border-bottom: 0; }
.look-list .ll-row:hover { color: var(--look-ink); }
.look-list .ll-row:focus-visible {
  outline: 2px solid var(--look-pencil);
  outline-offset: -2px;
  color: var(--look-ink);
}


.look-mark {
  position: absolute;
  z-index: 8;
  width: var(--look-mark-w, 56px);
  height: var(--look-mark-h, 56px);
  margin-left: calc(var(--look-mark-w, 56px) / -2);
  margin-top: calc(var(--look-mark-h, 56px) / -2);
  border: 2px solid var(--look-pencil);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(237, 230, 214, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.look-mark.in { opacity: 0.88; transform: scale(1); }
.look-mark.is-miss.out {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.look-mark.is-hit {
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out,
    left 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    top 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    margin 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-radius 200ms ease-out;
}
.look-mark.is-hit.landed {
  border-radius: 50% / 42%;
  opacity: 0;
  transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s, 0s, 140ms;
}

.cue-spotlight.from-mark {
  opacity: 1;
  transition: none;
  animation: look-open-from-mark 200ms cubic-bezier(0.22, 0.61, 0.36, 1) 1 both;
}
@keyframes look-open-from-mark {
  from { clip-path: circle(6% at var(--mark-x, 50%) var(--mark-y, 50%)); }
  to { clip-path: circle(150% at var(--mark-x, 50%) var(--mark-y, 50%)); }
}

.cue-vignette.from-mark {
  animation: look-open-card 200ms cubic-bezier(0.22, 0.61, 0.36, 1) 1 both;
}
@keyframes look-open-card {
  from { clip-path: circle(8% at 50% 50%); }
  to { clip-path: circle(140% at 50% 50%); }
}


.look-guide {
  position: absolute;
  z-index: 6;
  border-radius: 50% / 44%;
  pointer-events: none;
  background:
    repeating-linear-gradient(112deg,
      rgba(201, 210, 212, 0.11) 0 3px,
      rgba(201, 210, 212, 0.02) 3px 8px);
  animation: look-guide-breathe 2600ms ease-in-out infinite;
}
@keyframes look-guide-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}


.look-slip.dock-caption,
.look-slip.is-phone {
  left: 3.5%;
  right: 3.5%;
  bottom: calc(12.5% + 0.5em);       
  top: auto;
  max-width: none;
  transform: rotate(-0.4deg) translateY(4px);
}
.look-slip.dock-caption.in { transform: rotate(-0.4deg) translateY(0); }

@media (max-width: 640px) and (orientation: portrait) {
  .look-slip.dock-caption {
    right: max(3.5%, 48px);
    bottom: calc(var(--look-sheet-h, 0px) + 12px);
  }
  .stage-frame:has(> .look-slip.dock-caption) > .lb-caption {
    bottom: calc(var(--look-sheet-h, 0px) + var(--look-slip-h, 0px) + 24px) !important;
  }
}

@media (max-width: 640px) {
  .look-slip { max-width: none; }
  .look-list.is-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    min-width: 0;
    padding: 0.5em 0.6em 0.8em 1.1em;
    clip-path: polygon(0 6%, 8% 0, 34% 4%, 66% 0, 100% 5%, 100% 100%, 0 100%);
  }
  .look-list.is-sheet .ll-row {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 1.02rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  .look-slip, .look-list, .look-mark { transition: none; }
  .look-slip, .look-list { transform: none; }
  .look-slip.in, .look-list.in { transform: none; }
  .look-mark { opacity: 0.88; transform: none; }
  .look-mark.is-miss.out { opacity: 0; }
  .look-mark.is-hit.landed { opacity: 0; }
  .cue-spotlight.from-mark, .cue-vignette.from-mark { animation: none; clip-path: none; }
  .look-guide { animation: none; opacity: 0.8; }
}

:is(body.reduce-motion, :root.rm) .look-slip,
:is(body.reduce-motion, :root.rm) .look-list,
:is(body.reduce-motion, :root.rm) .look-mark { transition: none; transform: none; }
:is(body.reduce-motion, :root.rm) .look-mark { opacity: 0.88; }
:is(body.reduce-motion, :root.rm) .look-mark.is-miss.out { opacity: 0; }
:is(body.reduce-motion, :root.rm) .look-mark.is-hit.landed { opacity: 0; }
:is(body.reduce-motion, :root.rm) .cue-spotlight.from-mark,
:is(body.reduce-motion, :root.rm) .cue-vignette.from-mark { animation: none; clip-path: none; }
:is(body.reduce-motion, :root.rm) .look-guide { animation: none; opacity: 0.8; }

@media (forced-colors: active) {
  .look-slip, .look-list { border: 1px solid CanvasText; background: Canvas; clip-path: none; }
  .look-mark { border-color: CanvasText; }
}

#stage:has(.look-slip, .look-list) #codex-drawer .cx-pings {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}