/* Zaćmienie — a single theatrical reveal, isolated from the five lighter studies. */
.eclipse-stage { z-index: 5; perspective: 1500px; transform-style: preserve-3d; }
.eclipse-object { position: absolute; inset: 0; transform-style: preserve-3d; opacity: 0; }
.eclipse-edge { position: absolute; inset: 0; border-radius: 9px; background: linear-gradient(110deg,#a39372,#eadfc4 25%,#baaa89 45%,#fff2d8 70%,#c4b38e); border: 1px solid #9e8c6966; }
.eclipse-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #17191560;
  border-radius: 8px;
  background: var(--card-back);
  color: var(--ink);
  box-shadow: inset 0 0 0 3px #fff3, inset 0 0 0 4px #17191520, 0 35px 65px #0007, 0 8px 12px #0005;
}
.eclipse-face::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 8px;
  border: 1px solid currentColor;
  opacity: .14;
  border-radius: 3px;
  background-image: repeating-linear-gradient(0deg, #fff2d405 0 1px, transparent 1px 3px), repeating-linear-gradient(113deg, #fff2d405 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.eclipse-face::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .12;
  background: repeating-conic-gradient(from 0deg at 50% 45%, transparent 0deg 2deg, #c4aa783b 2.02deg 2.2deg, transparent 2.22deg 4deg);
  mask-image: radial-gradient(ellipse, transparent 20%, black 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse, transparent 20%, black 62%, transparent 100%);
}
.eclipse-etching { position: absolute; z-index: 1; inset: 0; opacity: .07; background: repeating-radial-gradient(ellipse at 50% 44%,transparent 0 14px,currentColor 14.3px 14.7px,transparent 15px 18px); transform: scale(1.55,.85) rotate(-12deg); }
.eclipse-tint { position: absolute; inset: 0; opacity: 0; background: var(--result-background, var(--result-bg)); }
.eclipse-corner { position: absolute; z-index: 3; width: 32px; height: 32px; border: 1px solid currentColor; opacity: .55; }
.eclipse-corner::after { content: ""; position: absolute; width: 4px; height: 4px; background: currentColor; transform: rotate(45deg); }
.eclipse-corner.top-left { top: 15px; left: 15px; border-width: 1px 0 0 1px; }
.eclipse-corner.top-right { top: 15px; right: 15px; border-width: 1px 1px 0 0; transform: rotate(90deg); }
.eclipse-corner.bottom-left { bottom: 15px; left: 15px; border-width: 0 0 1px 1px; transform: rotate(-90deg); }
.eclipse-corner.bottom-right { bottom: 15px; right: 15px; border-width: 0 1px 1px 0; transform: rotate(180deg); }
.eclipse-micro { position: absolute; z-index: 3; left: 32px; right: 32px; display: flex; justify-content: space-between; opacity: .65; font: 8px var(--mono); letter-spacing: 2px; }
.eclipse-micro-top { top: 24px; }
.eclipse-micro-bottom { bottom: 21px; font-size: 6px; letter-spacing: 2px; }
.eclipse-ornament { position: absolute; z-index: 3; left: 50%; top: 36%; height: 60%; aspect-ratio: 1; transform: translate(-50%,-50%); opacity: 0; }
.eclipse-medallion { display: block; height: 100%; width: 100%; overflow: visible; }
.eclipse-lock { position: absolute; z-index: 4; left: 50%; top: 36%; height: 58%; aspect-ratio: 1; transform: translate(-50%,-50%); display: grid; place-items: center; color: #746449; background: radial-gradient(circle,#fff8e655,transparent 70%); }
.eclipse-lock-ring { position: absolute; inset: 4%; border: 1px solid #97815a88; border-radius: 50%; box-shadow: 0 0 0 4px #fff3,inset 0 0 0 5px #fff3,0 0 0 5px #97815a44; background: repeating-conic-gradient(#97815a88 0deg .5deg,transparent 1deg 8deg); mask-image: radial-gradient(circle, transparent 64%,black 65%); -webkit-mask-image: radial-gradient(circle, transparent 64%,black 65%); }
.eclipse-lock > svg { width: 58%; height: 58%; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; filter: drop-shadow(0 1px 0 #fff9); }
.eclipse-lock > span { position: absolute; bottom: 19%; font: 5px var(--mono); letter-spacing: 2px; }
.eclipse-word { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 13%; text-align: center; font: 900 clamp(27px,5.4vw,65px)/1 var(--display); letter-spacing: 1px; white-space: nowrap; color: inherit; text-shadow: 0 1px 1px #0002; }
.eclipse-sheen { position: absolute; z-index: 7; inset: -45% -20%; width: 50%; background: linear-gradient(90deg,transparent,#fff5dc04 22%,#fff5dc33 44%,#fff5dc66 48%,#fff5dc11 54%,transparent 85%); mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.eclipse-fracture { position: absolute; z-index: 8; left: 49.8%; top: 3%; width: 1px; height: 94%; background: #fff4c5; box-shadow: 0 0 5px 2px #ffe5a3,0 0 20px 6px #d5953d66,0 0 55px 14px #d5953d44; opacity: 0; transform-origin: center; }
.eclipse-rim { position: absolute; z-index: 9; inset: 0; border: 1px solid #ffe8b6; border-radius: 8px; opacity: 0; box-shadow: 0 0 8px #ffe8b633,0 0 32px #ffda9844,inset 0 0 10px #ffe8b622; pointer-events: none; }
.eclipse-stage .eclipse-source, .eclipse-stage .eclipse-destination { z-index: 12; }
.eclipse-destination { opacity: 0; }
.eclipse-ambient { position: absolute; z-index: 1; width: 800px; height: 650px; max-width: 110vw; max-height: 90vh; transform: translate(-50%,-50%); color: var(--paper); background: radial-gradient(ellipse, currentColor,transparent 63%); opacity: 0; filter: blur(40px); mix-blend-mode: screen; }
.eclipse-atmosphere { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.eclipse-letterbox { position: absolute; z-index: 9; left: 0; right: 0; height: 12%; background: #050705; transform: scaleY(0); }
.eclipse-letterbox-top { top: 0; transform-origin: top; background: linear-gradient(#030504 80%,#03050400); }
.eclipse-letterbox-bottom { bottom: 0; transform-origin: bottom; background: linear-gradient(#03050400,#030504 25%); }
.eclipse-exposure { position: absolute; z-index: 10; inset: 0; background: radial-gradient(ellipse at 50% 44%,#fff3ce,#ae865b 80%); mix-blend-mode: screen; opacity: 0; }
.eclipse-verdict { position: absolute; z-index: 11; left: 10px; right: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; opacity: 0; }
.eclipse-verdict-kicker { font: 8px var(--mono); letter-spacing: 4px; opacity: .55; }
.eclipse-verdict strong { font: 800 clamp(27px,5vw,62px)/.95 var(--display); letter-spacing: .12em; text-shadow: 0 0 38px #d6994938; }
.eclipse-verdict-subtitle { font-family: "Iowan Old Style",Palatino,serif; font-size: clamp(13px,1.8vw,18px); font-style: italic; opacity: .65; }
.eclipse-verdict[data-outcome="assassin"] strong { font-size: clamp(42px,6.8vw,85px); letter-spacing: .2em; padding-left: .2em; }
.eclipse-whisper { position: absolute; z-index: 8; left: 10px; right: 10px; text-align: center; color: #c4b48d; opacity: 0; font: 8px var(--mono); letter-spacing: 3px; }
.eclipse-shard { position: absolute; z-index: 7; opacity: 0; background: linear-gradient(115deg,#fff1bd,#d0a55b 20%,#292417 24%,#191b13 68%,#e8cf94 70%,#6a5732); clip-path: polygon(10% 0,100% 17%,65% 100%,0 57%); }

@media (max-width: 850px) {
  .eclipse-micro { font-size: 6px; letter-spacing: 1px; }
  .eclipse-micro-bottom { font-size: 5px; }
}
@media (max-width: 600px) {
  .eclipse-lock > span { font-size: 3px; letter-spacing: 1px; }
  .eclipse-micro { left: 22px; right: 22px; top: 17px; font-size: 4px; }
  .eclipse-micro-bottom { top: auto; bottom: 13px; font-size: 3px; }
  .eclipse-corner { width: 17px; height: 17px; }
  .eclipse-word { bottom: 12%; font-size: 33px; }
  .eclipse-verdict { gap: 9px; }
  .eclipse-verdict-kicker { font-size: 6px; letter-spacing: 2px; }
  .eclipse-whisper { font-size: 6px; letter-spacing: 2px; }
}