/* Found slides and level games: win95, nyan ride, black hole, matrix, end toast, gates, doors. */

/* Found slides — FULL VIEWPORT with soft edges */
.beat.found {
  max-width: none;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}
.beat.found::before, .beat.found::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14vh; z-index: 8;
  pointer-events: none;
}
.beat.found::before {
  top: 0;
  background: linear-gradient(to bottom, var(--seam), rgba(28,25,20,0));
}
.beat.found::after {
  bottom: 0;
  background: linear-gradient(to top, var(--seam), rgba(28,25,20,0));
}
.beat.found.nyan-ride::before, .beat.found.nyan-ride::after,
.beat.found.hole-ride::before, .beat.found.hole-ride::after { height: 8vh; }
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #111;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1.1s ease;
}
.slide.nyan-sticky,
.slide.hole-sticky {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100%;
  height: 100vh;
  opacity: 1;
}
.beat.found.nyan-ride,
.beat.found.hole-ride {
  overflow: visible;
}
.beat.found.inview .slide { opacity: 1; }
.slide .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.85;
}
.slide .strip {
  position: absolute; height: auto; max-width: 48vw;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  z-index: 3;
}
.slide .obj {
  position: absolute; z-index: 2; height: auto;
}
.slide-title {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: clamp(1.6rem, 5vw, 3rem);
  letter-spacing: 0.1em; text-align: center; z-index: 2;
  text-shadow: 0 4px 28px rgba(0,0,0,0.85);
}

/* Win95 overwhelm — larger on full page */
.win-layer {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
.win95 {
  position: absolute; width: min(280px, 42vw);
  background: #c0c0c0; color: #000;
  border: 2px solid; border-color: #fff #000 #000 #fff;
  box-shadow: 2px 2px 0 #000; font-family: Tahoma, "MS Sans Serif", sans-serif;
  font-size: 12px; z-index: 5;
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.25s, transform 0.25s;
}
.beat.found.inview .win95 { opacity: 1; transform: none; }
.win95 .title {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff; padding: 4px 6px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
}
.win95 .title .x {
  width: 16px; height: 14px; background: #c0c0c0; color: #000;
  border: 1px solid; border-color: #fff #000 #000 #fff;
  font-size: 10px; line-height: 12px; text-align: center;
  cursor: pointer; pointer-events: auto;
}
.win95 .body { display: flex; gap: 10px; padding: 12px 10px 8px; align-items: flex-start; }
.win95 .icon {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%; background: #c00; color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.win95 .icon.warn { background: #e6b800; color: #000; border-radius: 2px; }
.win95 .icon.info { background: #06c; border-radius: 50%; }
.win95 .btns { display: flex; gap: 8px; justify-content: center; padding: 0 10px 10px; }
.win95 .btns button {
  min-width: 64px; padding: 3px 10px; background: #c0c0c0; color: #000;
  border: 2px solid; border-color: #fff #000 #000 #fff; font-size: 12px;
  pointer-events: auto;
}
.win95 .bar {
  height: 16px; margin: 0 10px 10px; border: 1px solid #000; background: #fff;
}
.win95 .bar i {
  display: block; height: 100%; width: 62%;
  background: repeating-linear-gradient(90deg, #000080 0 6px, #fff 6px 8px);
}

/* NYAN RIDE — hold to auto-scroll horizontally; steer the cat */
.beat.found.nyan-ride {
  height: 100vh;
  min-height: 100vh;
}
.nyan-sticky {
  position: absolute; inset: 0; height: 100%; width: 100%;
  overflow: hidden; background: #050508;
}
.nyan-world {
  position: absolute; top: 0; left: 0; height: 140%;
  width: 300vw;
  will-change: transform;
}
.nyan-world.axis-y { height: 180%; }
.starfield {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 55% 40% at 22% 35%, rgba(70,55,48,0.55), transparent 62%),
    radial-gradient(ellipse 48% 38% at 78% 62%, rgba(48,52,68,0.5), transparent 58%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(30,22,18,0.65), transparent 55%),
    linear-gradient(180deg, #0c0c14 0%, #0a090f 40%, #100c0a 100%);
}
.starfield i {
  position: absolute; border-radius: 50%;
  background: #e8e4dc; opacity: 0.8;
  box-shadow: 0 0 2px rgba(232,228,220,0.4);
}
.starfield i.dim { opacity: 0.3; }
.starfield i.far { opacity: 0.5; width: 1px; height: 1px; }
.nyan-haze {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(
      92deg,
      transparent 0 22px,
      rgba(255,255,255,0.02) 22px 23px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 48px,
      rgba(0,0,0,0.08) 48px 49px
    ),
    linear-gradient(180deg, rgba(0,0,0,0.35), transparent 28%, rgba(0,0,0,0.4));
}
.nyan-bit {
  position: absolute; z-index: 6;
  max-width: min(38vw, 280px);
  padding: 0.45rem 0.65rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.72rem, 1.6vw, 0.95rem);
  line-height: 1.35;
  color: #efe8dc;
  background: rgba(18,16,14,0.78);
  border: 1px solid rgba(200,180,140,0.35);
  box-shadow: 0 3px 12px rgba(0,0,0,0.45);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  transition: opacity 0.35s, transform 0.35s, filter 0.35s;
}
.nyan-bit:hover { border-color: rgba(220,200,150,0.55); }
.nyan-bit.got {
  opacity: 0;
  transform: scale(0.6) translateY(-10px);
  pointer-events: none;
  filter: blur(1px);
}
.nyan-score {
  position: absolute; top: 0.85rem; right: 0.85rem; z-index: 25;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(232,228,220,0.5);
  pointer-events: none;
}
.nyan-fly {
  position: absolute; z-index: 7; /* on slide, above world scenery */
  width: min(16vw, 120px); max-width: 120px; height: auto;
  left: 12%; top: 38%;
  image-rendering: pixelated;
  filter: none;
  will-change: left, top, transform;
  pointer-events: none;
}
.nyan-world .strip {
  max-width: 34vw;
  z-index: 5;
}
.nyan-hint {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 6; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,228,220,0.45);
  pointer-events: none;
}
.nyan-hold {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 20; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 0.9rem 1.4rem;
  border: 1px solid rgba(232,228,220,0.45); background: rgba(0,0,0,0.72);
  color: var(--ink); cursor: pointer; user-select: none; touch-action: none;
}
.nyan-hold:active, .nyan-hold.holding {
  background: rgba(232,228,220,0.12); border-color: var(--ink);
}
.nyan-hold.done { display: none; }
.nyan-progress {
  position: absolute; left: 10%; right: 10%; bottom: 3.2rem; height: 3px; z-index: 6;
  background: rgba(232,228,220,0.15); pointer-events: none;
}
.nyan-progress i {
  display: block; height: 100%; width: 0%; background: rgba(232,228,220,0.65);
}

/* BLACK HOLE — defend poem pieces until hole evaporates */
.beat.found.hole-ride {
  height: 100vh; min-height: 100vh;
}
.hole-sticky {
  position: absolute; inset: 0; height: 100%; width: 100%;
  overflow: hidden; background: #010104;
}
.hole-field {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 52%, rgba(255,160,60,0.16), transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(255,220,140,0.08), transparent 50%),
    radial-gradient(circle at 50% 50%, #08060c 0%, #010104 72%);
}
.hole-stars {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.hole-stars i {
  position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%;
  opacity: 0.55;
}
.hole {
  position: absolute; left: 50%; top: 50%;
  width: min(34vw, 280px); height: min(34vw, 280px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 40%,
      #000 0 38%,
      #050308 42%,
      #120a06 48%,
      transparent 52%);
  box-shadow:
    0 0 0 3px #000,
    0 0 50px 14px rgba(0,0,0,1),
    0 0 100px 40px rgba(255,140,40,0.22),
    0 0 160px 70px rgba(180,80,20,0.12);
  z-index: 2;
  pointer-events: none;
}
.hole::before {
  content: ""; position: absolute; inset: -35%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 8%,
    rgba(255,200,100,0.15) 12%,
    transparent 18% 55%,
    rgba(255,160,60,0.12) 60%,
    transparent 68% 100%);
  animation: hole-lens 16s linear infinite;
  filter: blur(6px);
}
@keyframes hole-lens { to { transform: rotate(360deg); } }
.hole::after {
  content: ""; position: absolute; inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 46%, rgba(0,0,0,0.9) 60%, transparent 72%);
}
.hole-disk {
  position: absolute; left: 50%; top: 50%;
  width: min(96vw, 780px); height: min(28vw, 220px);
  transform: translate(-50%, -50%) rotateX(74deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%,
      transparent 22%,
      rgba(255,210,100,0.2) 34%,
      rgba(255,140,40,0.7) 46%,
      rgba(255,230,150,0.55) 50%,
      rgba(120,50,10,0.55) 58%,
      transparent 70%);
  box-shadow: 0 0 60px rgba(255,150,40,0.35);
  z-index: 1;
  pointer-events: none;
  animation: disk-pulse 4s ease-in-out infinite;
}
@keyframes disk-pulse {
  50% { filter: brightness(1.2) saturate(1.15); }
}
.orbit-strip {
  position: absolute; left: 50%; top: 50%;
  z-index: 3;
  margin: 0;
  will-change: transform, opacity, filter;
  pointer-events: none;
  max-width: min(42vw, 340px);
}
.orbit-strip img {
  display: block; height: auto; width: 100%; max-width: min(42vw, 340px);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.75));
}
.orbit-strip .readable {
  display: block;
  background: rgba(20,16,12,0.82);
  border: 1px solid rgba(232,220,190,0.35);
  color: #f2ebe0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.95rem, 2.1vw, 1.2rem);
  line-height: 1.45;
  padding: 0.65rem 0.8rem;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 4px 18px rgba(0,0,0,0.55);
}
.hole-hint {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 6; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,228,220,0.4);
  pointer-events: none;
}

/* MATRIX — readable poem + digits */
.matrix-wrap {
  position: absolute; inset: 0; z-index: 0; opacity: 0.55;
}
.matrix-wrap canvas { width: 100%; height: 100%; display: block; }
.slide .strip.matrix-bit {
  transition: opacity 0.4s, filter 0.4s, transform 0.55s;
  z-index: 3;
  max-width: min(46vw, 420px);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.65)) contrast(1.05);
}
.slide .strip.matrix-bit.gone {
  opacity: 0;
  filter: contrast(2.4) brightness(1.4) hue-rotate(70deg);
  transform: scale(0.7) translateY(12px);
}
.matrix-line {
  position: absolute; z-index: 5;
  max-width: min(52vw, 460px);
  background: rgba(2,12,8,0.78);
  border: 1px solid rgba(61,186,106,0.45);
  color: #d8ffe6;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.95rem, 2.1vw, 1.2rem);
  line-height: 1.45;
  padding: 0.7rem 0.85rem;
  text-shadow: 0 0 10px rgba(61,186,106,0.35);
  transition: opacity 0.45s, filter 0.45s, transform 0.55s;
}
.matrix-line.gone {
  opacity: 0;
  filter: blur(2px);
  transform: scale(0.92);
}
.digit-ghost {
  position: absolute; z-index: 4;
  font-family: var(--mono); font-size: clamp(0.55rem, 1.4vw, 0.85rem);
  color: #3dba6a; letter-spacing: 0.1em; pointer-events: none;
  text-shadow: 0 0 8px #3dba6a; white-space: pre;
  opacity: 0; transition: opacity 0.25s;
  line-height: 1.35;
}
.digit-ghost.on { opacity: 0.9; }

/* Minecraft end toast */
.mc-toast {
  position: fixed; left: 50%; bottom: 18%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1000; opacity: 0; pointer-events: none;
  background: #212121; border: 3px solid #555;
  box-shadow: inset 0 0 0 2px #3a3a3a;
  padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  display: flex; align-items: center; gap: 0.65rem;
  font-family: "Courier New", monospace; color: #fff;
  transition: opacity 0.4s, transform 0.4s;
}
.mc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mc-toast .icon {
  width: 36px; height: 36px; image-rendering: pixelated;
  background: #c9b98a;
  box-shadow: inset 2px 2px 0 #e8d9a8, inset -2px -2px 0 #7a6e45;
}
.mc-toast .t2 { color: #fff; font-size: 14px; }

/* Level gates */
.beat.found[data-cleared="1"] { touch-action: auto; }
.level-hint-btn {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 40;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.4rem 0.65rem;
  border: 1px solid var(--line); background: rgba(13,13,15,0.78); color: var(--mute);
  pointer-events: auto;
}
.level-hint-btn:hover { color: var(--ink); border-color: rgba(232,228,220,0.35); }
.level-hint-msg {
  position: absolute; top: 2.85rem; left: 0.85rem; z-index: 40;
  max-width: min(280px, calc(100% - 2rem));
  font-family: var(--mono); font-size: 0.62rem; line-height: 1.4;
  color: var(--ink); background: rgba(13,13,15,0.88);
  border: 1px solid var(--line); padding: 0.45rem 0.6rem;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.level-hint-msg.show { opacity: 1; }
.level-badge {
  position: absolute; top: 0.85rem; left: 50%; transform: translateX(-50%); z-index: 40;
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(232,228,220,0.4);
  pointer-events: none;
}
.beat.found[data-cleared="1"] .level-badge { color: rgba(107,138,154,0.85); }
.beat.found[data-cleared="1"] .level-badge::after { content: " · cleared"; }

.strip.blocker, .orbit-strip.draggable {
  cursor: grab; touch-action: none; pointer-events: auto; user-select: none;
}
.strip.blocker:active, .orbit-strip.draggable:active { cursor: grabbing; }
.strip.blocker.dragging, .orbit-strip.draggable.dragging { z-index: 30 !important; }

.win-layer { pointer-events: auto; }
.win95 { pointer-events: auto; }
.win95 .title .x { cursor: pointer; pointer-events: auto; }

.asteroid {
  position: absolute; z-index: 4;
  border-radius: 42% 58% 48% 52% / 48% 42% 58% 52%;
  background:
    radial-gradient(circle at 28% 24%, #efdcc4, #b08a62 30%, #6a4a2e 60%, #241508 100%);
  box-shadow:
    inset -10px -12px 0 rgba(0,0,0,0.5),
    inset 5px 5px 0 rgba(255,235,200,0.2),
    0 0 0 3px rgba(40,24,12,0.55),
    0 10px 34px rgba(0,0,0,0.6),
    0 0 36px rgba(180,150,110,0.18);
  pointer-events: none;
  will-change: transform, left, top;
}
.asteroid::before {
  content: "";
  position: absolute; left: 16%; top: 26%;
  width: 34%; height: 28%;
  border-radius: 46% 54% 48% 52%;
  background: rgba(0,0,0,0.4);
  box-shadow:
    32px 20px 0 -4px rgba(0,0,0,0.28),
    12px 36px 0 -8px rgba(0,0,0,0.2);
}
.asteroid::after {
  content: "";
  position: absolute; right: 14%; top: 16%;
  width: 20%; height: 16%;
  border-radius: 50%;
  background: rgba(255,220,180,0.16);
}
.nyan-fly.player-control { transition: none; }
.path-choice {
  position: absolute; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.78); padding: 1rem;
}
.path-choice.show { display: flex; }
.path-choice .box {
  max-width: 34rem; width: 100%;
  background: rgba(10,10,12,0.96); border: 1px solid var(--line);
  padding: 1.15rem 1.25rem 1.35rem;
}
.path-choice h3 {
  font-family: var(--mono); font-weight: 400; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.35rem;
}
.path-choice .sub {
  font-family: var(--mono); font-size: 0.58rem; color: var(--mute);
  letter-spacing: 0.06em; margin-bottom: 0.9rem;
}
.path-choice .choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem;
}
@media (max-width: 560px) {
  .path-choice .choices { grid-template-columns: 1fr; }
}
.path-choice button {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-align: left; padding: 0.85rem 0.9rem;
  border: 1px solid var(--line); color: var(--ink);
  min-height: 6.5rem;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(232,228,220,0.03);
}
.path-choice button.path-x {
  border-color: rgba(201,185,138,0.55);
  background: rgba(201,185,138,0.08);
  order: -1;
}
.path-choice button.path-x:hover { border-color: var(--yellow); background: rgba(201,185,138,0.14); }
.path-choice button.path-x .axis { color: var(--yellow); }
.path-choice button .axis {
  font-size: 1.35rem; letter-spacing: 0.08em; color: var(--yellow);
  margin-bottom: 0.35rem; line-height: 1;
}
.path-choice button b { display: block; font-weight: 400; color: var(--ink); margin-bottom: 0.25rem; }
.path-choice button span { color: var(--mute); font-size: 0.58rem; line-height: 1.4; }
.path-choice button.path-x .axis::before { content: "→ "; }
.path-choice button.path-y .axis::before { content: "↓ "; }

.door-choice {
  position: relative; z-index: 9;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem;
  margin: 0.4rem auto 0.2rem; padding: 0 1rem 0.4rem;
}
.door-choice button {
  position: relative;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7rem 1rem 0.65rem 2.2rem;
  border: 1px solid rgba(236,226,200,0.3);
  color: rgba(236,226,200,0.9);
  background:
    linear-gradient(180deg, rgba(60,40,22,0.75), rgba(26,18,10,0.85));
  box-shadow: 0 6px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,230,180,0.12);
  min-width: 12rem;
  text-align: left;
}
.door-choice button::before {
  /* a little door glyph */
  content: "";
  position: absolute; left: 0.8rem; top: 50%;
  width: 0.75rem; height: 1.05rem; transform: translateY(-50%);
  border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0;
  background: radial-gradient(circle at 74% 55%, currentColor 1.2px, transparent 1.8px);
  opacity: 0.8;
}
.door-choice button small {
  display: block; margin-top: 0.25rem;
  font-size: 0.52rem; letter-spacing: 0.06em; text-transform: none;
  color: rgba(236,226,200,0.55);
}
.door-choice button:hover { border-color: var(--yellow); color: #f3e6c4; }
/* the way you're currently set to go */
.door-choice button.on { border-color: var(--yellow); box-shadow: 0 6px 14px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(201,185,138,0.45); }
.door-choice button.on small::after { content: " · current"; color: var(--yellow); }
.door-choice.door-float {
  position: absolute; left: 50%; bottom: 3.2rem; z-index: 60;
  transform: translateX(-50%);
  margin: 0; padding: 0; width: max-content; max-width: calc(100% - 2rem);
}