* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

body {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* ---------- the mark: four triangles, one gate ---------- */

#mark {
  position: relative;
  width: 320px;
  height: 320px;
  transition: opacity 1.4s ease;
}

.tri {
  position: absolute;
  width: 160px;
  height: 160px;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  opacity: 0.92;
  transition: opacity 1.1s ease, transform 1.1s ease, filter 0.4s ease;
}

.tri::before,
.tri::after {
  content: '';
  position: absolute;
  inset: 0;
}

.tri::before {
  background: var(--tri-color);
  clip-path: var(--tri-clip);
}

.tri::after {
  background: rgba(255, 255, 255, 0.4);
  clip-path: var(--tri-clip);
  opacity: 0;
  transition: opacity 0.05s linear;
}

.tri.charging::after {
  opacity: 1;
  transition: opacity 900ms linear;
}

.tri:hover {
  filter: brightness(1.18);
}

.tri:focus-visible {
  filter: brightness(1.3);
}

.tri--left {
  left: 0;
  top: 80px;
  --tri-color: #b23b2e;
  --tri-clip: polygon(0% 50%, 100% 0%, 100% 100%);
}

.tri--right {
  right: 0;
  top: 80px;
  --tri-color: #8c8c8c;
  --tri-clip: polygon(100% 50%, 0% 0%, 0% 100%);
}

.tri--up {
  top: 0;
  left: 80px;
  --tri-color: #3f7d4a;
  --tri-clip: polygon(50% 0%, 100% 100%, 0% 100%);
}

.tri--down {
  bottom: 0;
  left: 80px;
  --tri-color: #c07a2c;
  --tri-clip: polygon(50% 100%, 0% 0%, 100% 0%);
}

/* the three uncast triangles, dissolving */
.tri.discard {
  opacity: 0;
  filter: grayscale(1) brightness(0.4);
  transform: scale(0.75);
  pointer-events: none;
}

/* the one triangle cast, departing in its own direction */
.tri.cast.dir-left  { transform: translateX(-60vw) scale(1.4); opacity: 0; }
.tri.cast.dir-right { transform: translateX(60vw) scale(1.4); opacity: 0; }
.tri.cast.dir-up    { transform: translateY(-60vh) scale(1.4); opacity: 0; }
.tri.cast.dir-down  { transform: translateY(60vh) scale(1.4); opacity: 0; }

#mark.spent {
  pointer-events: none;
}

/* ---------- the resolved state: what does not return ---------- */

#resolved {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10vw;
  text-align: center;
  opacity: 0;
  transition: opacity 1.8s ease;
}

#resolved.visible {
  opacity: 1;
}

#resolved.instant {
  transition: none;
}

#fragment {
  color: #cfcfcf;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.6;
  max-width: 32ch;
}

#scar {
  position: fixed;
  background: var(--scar-color, #888);
  opacity: 0.85;
  pointer-events: none;
}

#scar.left   { left: 0; top: 0; width: 3px; height: 100%; }
#scar.right  { right: 0; top: 0; width: 3px; height: 100%; }
#scar.up     { top: 0; left: 0; width: 100%; height: 3px; }
#scar.down   { bottom: 0; left: 0; width: 100%; height: 3px; }

.hidden { display: none !important; }