/* The later feature blocks (eyes, heart, guess, war, duels). Loaded right after motion.css. */

/* ---------- the eyes see you ---------- */
.start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; animation: fadeUp 0.8s cubic-bezier(.2,.7,.2,1) 1.05s both; }
#start { animation: none; }
.btn-see {
  gap: 10px; min-height: 52px; padding: 0 6px; border-color: transparent; background: none;
  color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px;
}
.btn-see:hover { border-color: transparent; color: var(--ink); text-decoration-color: var(--red); }
.see-eye { width: 18px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #0c0b0a 0 28%, var(--red) 30% 70%, transparent 72%); box-shadow: 0 0 10px rgba(255, 75, 54, 0.7); }
.auto-note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 16px 0 0; font-family: var(--mono); font-size: 16px; color: var(--ink-2); }
.auto-note::before { content: '>'; margin-right: 4px; color: var(--red); font-weight: 600; }
.auto-note b { color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }
.auto-note .auto-pause { margin-left: 12px; min-height: 34px; padding: 0 12px; font-size: 14px; color: var(--ink-2); }
.auto-note .auto-pause[aria-pressed="true"] { border-color: var(--red); color: var(--red); }
.see-tease { margin: 10px 0 0; font-family: var(--mono); font-size: 14px; color: var(--dim); animation: fadeUp 0.8s cubic-bezier(.2,.7,.2,1) 1.15s both; }
.see-hint { margin: 14px 0 0; font-family: var(--mono); font-size: 13.5px; color: #ffb3a8; animation: fadeUp 0.4s both; }
.cam-on {
  pointer-events: auto; margin-left: 14px; padding: 4px 10px; border: 1px solid var(--red); border-radius: 999px;
  background: var(--red-dim); color: #ffb3a8; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.cam-on::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--red); vertical-align: 1px; animation: blink 1.2s steps(2, start) infinite; }
@media (max-width: 480px) {
  .start-row { flex-direction: column; align-items: stretch; }
  .btn-see { min-height: 44px; justify-content: flex-start; }
  .boot-choice .dim-note { display: none; }
  .cam-on { margin-left: 8px; }
}

/* ---------- your heart ---------- */
.pulse-box {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 18px;
  margin: 8px 0 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2);
  animation: fadeUp 0.5s both;
}
.pulse-heart { font-size: 40px; line-height: 1; color: var(--red); text-shadow: 0 0 18px rgba(255, 75, 54, 0.7); animation: idleBeat 1.4s ease-in-out infinite; }
.pulse-box.locked .pulse-heart { animation: beat var(--beat, 0.8s) ease-out infinite; }
@keyframes idleBeat { 50% { opacity: 0.45; } }
@keyframes beat { 0% { transform: scale(1); } 12% { transform: scale(1.28); } 24% { transform: scale(1.02); } 36% { transform: scale(1.18); } 60%, 100% { transform: scale(1); } }
.pulse-read { display: flex; align-items: baseline; gap: 6px; font-family: var(--mono); color: var(--dim); }
.pulse-bpm { font-family: var(--display); font-size: 56px; font-weight: 400; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pulse-wave { width: 100%; height: 56px; }
.pulse-status { grid-column: 1 / -1; margin: 0; font-family: var(--mono); font-size: 14px; color: var(--dim); }
.lie-box { margin: 8px 0 24px; padding: 18px 20px; border: 1px solid var(--red); border-radius: 16px; background: var(--red-dim); animation: fadeUp 0.5s both; }
.lie-box p { margin: 0 0 14px; font-family: var(--sans); font-size: 20px; font-weight: 600; color: var(--ink); }
.lie-actions { display: flex; gap: 10px; }
.lie-actions .btn { min-width: 110px; }
.lie-box .lie-status { margin: 14px 0 0; font-family: var(--mono); font-size: 13px; font-weight: 400; color: #ffb3a8; }
.lie-status::after { content: '...'; display: inline-block; width: 1.4em; overflow: hidden; vertical-align: bottom; animation: dots 1s steps(4) infinite; }

/* ---------- the eyes are yours ---------- */
.your-eyes { display: block; width: 100%; height: clamp(120px, 26vw, 200px); margin: 10px 0 22px; animation: wake 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wake { from { opacity: 0; transform: scaleY(0.05); filter: blur(6px); } }

/* ---------- guess your class ---------- */
.guess { margin: 16px 0 4px; animation: fadeUp 0.4s both; }
.guess p { margin: 0 0 12px; font-family: var(--sans); font-size: 20px; font-weight: 700; color: var(--ink); }
.guess-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.guess-opts .chip { min-height: 44px; font-size: 13.5px; color: var(--ink); }
.guess-opts .chip:hover { border-color: var(--red); background: var(--red-dim); }
.guess-opts .chip-quiet { color: var(--dim); border-style: dashed; }
.guess-timer { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--mono); font-size: 14px; color: var(--red); }
.guess-timer span { flex: 1; height: 4px; border-radius: 2px; background: var(--red); transform-origin: left; transform: scaleX(var(--left, 1)); }

/* ---------- the war ---------- */
.wars { margin: 0 0 36px; }
.war-board { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.war-board li {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); font-family: var(--mono); font-size: 13.5px;
}
.war-board li.mine { border-color: var(--red); background: var(--red-dim); }
.war-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.war-bar { height: 8px; border-radius: 4px; background: var(--red); width: var(--w); }
.war-board b { font-family: var(--display); font-size: 24px; font-weight: 400; color: var(--ink); }
.war-board small { grid-column: 1 / -1; color: var(--dim); font-size: 14px; }
.war-call { margin: 12px 0 0; font-family: var(--mono); font-size: 13.5px; color: #ffb3a8; }

/* ---------- live ticker ---------- */
.live { margin: -10px 0 22px; font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--dim); animation: fadeUp 0.6s both; }
#verdict .live { margin: -8px 0 22px; }
.live b { color: var(--ink); font-weight: 600; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; vertical-align: 1px; animation: blink 1.6s steps(2, start) infinite; }
.live-msg { animation: fadeUp 0.4s both; display: inline-block; }

/* ---------- duels ---------- */
.duel-banner {
  display: inline-block; margin: 0 0 18px; padding: 8px 14px;
  border: 1px solid var(--red); border-radius: 12px; background: var(--red-dim);
  font-family: var(--mono); font-size: 13.5px; color: #ffb3a8;
  animation: fadeUp 0.7s cubic-bezier(.2,.7,.2,1) 0.4s both;
}
.duel-banner b { color: var(--ink); }
.duel-banner i { font-style: normal; color: var(--ink); }
.line.duel { padding: 12px 14px; border: 1px solid var(--red); border-radius: 12px; background: var(--red-dim); color: var(--ink); }

.duel-result {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 14px;
  margin: 0 0 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2);
  animation: pop 0.5s cubic-bezier(.2,1.6,.4,1) 1.15s both;
}
.duel-result[hidden] { display: none; }
.duel-me, .duel-them { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); }
.duel-them { text-align: right; }
.duel-me span, .duel-them span { font-size: 16px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-me b, .duel-them b { font-family: var(--display); font-size: 60px; font-weight: 400; line-height: 1; color: var(--ink); }
.duel-me b { color: var(--red); }
.duel-result.lost .duel-me b { color: var(--ink); }
.duel-result.lost .duel-them b { color: var(--red); }
.duel-vs { font-family: var(--mono); font-size: 16px; color: var(--red); }
.duel-verdict { grid-column: 1 / -1; margin: 6px 0 0; font-family: var(--mono); font-size: 14px; color: #ffb3a8; text-align: center; }

.place-toggle { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-family: var(--mono); font-size: 15px; color: var(--ink); cursor: pointer; }
.place-toggle input { width: 22px; height: 22px; accent-color: var(--red); cursor: pointer; }
.place-toggle small { color: var(--dim); font-size: 14px; }
.boot-choice .auto-note { flex-basis: 100%; margin: 6px 0 0; font-family: var(--mono); font-weight: 400; }
.dare-name { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; max-width: 360px; font-family: var(--mono); font-size: 14px; color: var(--dim); animation: fadeUp 0.7s cubic-bezier(.2,.7,.2,1) 1.55s both; }
.dare-name input {
  min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2); color: var(--ink); font: 500 15px var(--mono);
}
.dare-name input:focus { outline: none; border-color: var(--red); }

/* ---------- eyes in the dark ---------- */
.eyes { display: block; pointer-events: none; }
.eyes svg { display: block; width: 100%; height: auto; overflow: visible; }
/* lids, gaze and pupils are driven from js/eyes.js */
.eyes svg { will-change: transform; }

.eyes-hero { width: min(250px, 62vw); margin: 0 0 34px -14px; filter: drop-shadow(0 0 22px rgba(255, 75, 54, 0.35)); }
.eyes-mini { width: 46px; margin-left: 4px; opacity: 0; transition: opacity 0.6s; }
.started .eyes-mini { opacity: 1; }
@media (max-width: 480px) { .eyes-hero { margin-bottom: 26px; } }

/* ---------- verdict: the quiet save link ---------- */
.save-row { margin: -24px 0 28px; font-family: var(--mono); font-size: 13px; color: var(--dim); }
.save-row a, .link-btn { color: var(--ink-2); text-underline-offset: 3px; }
.btn-icon { width: 20px; height: 20px; flex: none; }
.link-btn { margin-left: 16px; padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.war-call { margin: 0 0 32px; padding: 12px 16px; border-left: 2px solid var(--red); font-family: var(--mono); font-size: 14px; color: var(--ink); }

/* compass: the content turns against the phone and leans with it (js/compass.js) */
.compass #intro, .compass #log, .compass #verdict {
  transform: perspective(1000px) rotateX(var(--lean-x, 0deg)) rotateY(var(--lean-y, 0deg)) rotate(var(--spin, 0deg));
  transform-origin: 50% 40vh;
}

/* easter eggs (js/eggs.js): a glitch when they go still, an alarm for "snitch" */
.glitch main { animation: stareGlitch 0.7s steps(2, end); }
@keyframes stareGlitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-6px, 2px) skewX(4deg); filter: hue-rotate(-30deg) saturate(3); }
  40% { transform: translate(5px, -3px); clip-path: inset(10% 0 40% 0); }
  60% { transform: translate(-3px, 1px) skewX(-3deg); clip-path: inset(50% 0 5% 0); }
  100% { transform: translate(0); filter: none; clip-path: none; }
}
.alarm { animation: alarm 0.5s steps(2, start) 5; }
@keyframes alarm { 50% { background: #3a0905; } }
@media (prefers-reduced-motion: reduce) { .glitch main, .alarm { animation: none; } }

/* lightning (js/storm.js): two white flashes and a slipped-reel jolt */
.lightning::after {
  content: ''; position: fixed; inset: 0; z-index: 9; pointer-events: none; background: #f4f1ff;
  animation: strike 1.1s linear both;
}
@keyframes strike { 0% { opacity: 0; } 4% { opacity: 0.85; } 9% { opacity: 0.05; } 14% { opacity: 0.6; } 30%, 100% { opacity: 0; } }
.lightning main { animation: reel 0.6s steps(6, end) 0.05s; }
@keyframes reel {
  0%, 100% { transform: translate(0); filter: none; }
  20% { transform: translate(-4px, -14px); filter: contrast(1.6) brightness(1.4); }
  40% { transform: translate(3px, 9px); }
  60% { transform: translate(-2px, -5px); filter: grayscale(0.6); }
  80% { transform: translate(1px, 2px); }
}

/* scene cut (js/scene.js): tear, colour split, blackout, land */
.cut::before {
  content: ''; position: fixed; inset: 0; z-index: 9; pointer-events: none; background: #000;
  animation: blackout 0.9s ease-in-out both;
}
@keyframes blackout { 0% { opacity: 0; } 35%, 50% { opacity: 1; } 100% { opacity: 0; } }
.cut main { animation: tear 0.9s steps(9, end); }
@keyframes tear {
  0% { transform: none; filter: none; }
  10% { transform: translateX(-18px) skewX(-8deg); filter: drop-shadow(6px 0 0 rgba(255, 40, 40, 0.8)) drop-shadow(-6px 0 0 rgba(0, 255, 255, 0.6)); clip-path: inset(0 0 55% 0); }
  20% { transform: translateX(22px) skewX(6deg); clip-path: inset(45% 0 0 0); }
  30% { transform: scale(1.06); filter: brightness(2) contrast(2); clip-path: none; }
  60% { transform: scale(0.97) translateY(8px); filter: none; }
  80% { transform: translateY(-3px); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cut main { animation: none; } .cut::before { animation-duration: 0.3s; } }



/* the wordmark, top left, in this visit's display font */
.brand { font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: 0.02em; text-transform: none; color: var(--red); text-decoration: none; pointer-events: auto; }
@media (max-width: 480px) { .brand { font-size: 22px; } }