/* ============================================================
   you hurt me — live lyric video
   Black type on a pure white void, DOM-rendered, synced to the
   audio clock. The video's own faces via Adobe Fonts + Bodoni.
   ============================================================ */

:root {
  --bg: #fff;
  --fg: #000;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --sans: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --sansCond: "helvetica-neue-lt-pro-cond", "Arial Narrow", "Helvetica Neue", sans-serif;
  --didone: "Bodoni Moda", "Bodoni 72", Didot, "Playfair Display", serif;
  --clar: "clarendon-urw", "Bitter", "Georgia", serif;
  --round: "arial-rounded-mt-pro", "Arial Rounded MT Bold", "Baloo 2", sans-serif;
}

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

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #fff;   /* the whole video lives on white — seamless from the hub */
  color: #111;
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------- THE STAGE ---------------- */
.stage {
  position: fixed;
  inset: 0;
  background: var(--bg);
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
  touch-action: none;
  -ms-touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.stage.is-live { opacity: 1; }
body.playing { overscroll-behavior: none; touch-action: none; }

.cue-layer { position: absolute; inset: 0; z-index: 3; }

/* Each rendered lyric line. Positioned + transformed by the engine. */
.cue {
  position: absolute;
  color: var(--fg);
  white-space: pre;           /* honour \n only; never auto-wrap */
  line-height: 0.98;
  will-change: transform, opacity;
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0;
}

/* image cues (the Webdings/Wingdings art, cropped from the 4K master) */
.cue.cue-img { line-height: 0; }
.cue.cue-img img {
  display: block;
  height: 100%;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* per-char spans for the arch warp */
.cue .ch { display: inline-block; }

/* type roles ---------------------------------------------- */
.cue.r-sans     { font-family: var(--sans); font-weight: 400; }
.cue.r-cond     { font-family: var(--sansCond); font-weight: 700; }
.cue.r-serif    { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.cue.r-serifIt  { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; }
.cue.r-didone   { font-family: var(--didone); font-weight: 600; }
.cue.r-didoneIt { font-family: var(--didone); font-style: italic; font-weight: 600; }
.cue.r-clar     { font-family: var(--clar); font-weight: 700; }
.cue.r-round    { font-family: var(--round); font-weight: 700; }
.cue.r-mono     { font-family: var(--mono); font-weight: 700; }

/* outline flash (the double-line "CAUSE IT FEELS" step) */
.cue.is-outline {
  color: transparent;
  -webkit-text-stroke: 0.035em var(--fg);
}

/* per-letter interaction (last 30s): each glyph in a fixed slot so a
   shrink or a font-swap never reflows the word */
.ilet {
  display: inline-block;
  text-align: center;
  transform-origin: center center;
  will-change: transform;
  vertical-align: baseline;
}
body.playing .cue { cursor: default; }

/* ---------------- THE GAME ----------------
   The cursor becomes a weapon; the lyrics take the damage.
   Everything monochrome — wounds are displacement, bites and cracks. */
@media (pointer: fine) {
  body.gaming, body.gaming .cue { cursor: none; }
}
#weapon {
  position: fixed;
  left: -100px; top: -100px;
  z-index: 60;
  font-size: 37px;
  line-height: 1;
  transform: translate(-30%, -72%) rotate(-8deg);
  pointer-events: none;
  opacity: 0;
  will-change: left, top;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.16));
  transition: font-size .25s ease;
}
#weapon.is-here { opacity: 1; }
#weapon.is-swing  { animation: gswing .16s ease; }
#weapon.is-stab   { animation: gstab .14s ease; }     /* thrust toward the strike */
#weapon.is-sawing { animation: gsawing .2s ease; }    /* back and forth along the blade */
@keyframes gswing  { 40% { transform: translate(-30%,-72%) rotate(-56deg) scale(1.14); } }
@keyframes gstab   { 35% { transform: translate(calc(-30% - 12px), calc(-72% - 13px)) rotate(-8deg); } }
@keyframes gsawing {
  25% { transform: translate(calc(-30% - 8px), calc(-72% - 8px)) rotate(-8deg); }
  75% { transform: translate(calc(-30% + 8px), calc(-72% + 8px)) rotate(-8deg); }
}
@media (pointer: coarse) { #weapon { display: none !important; } }

#scars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.gch { display: inline-block; }               /* letters take wounds one by one */
.g-dead { transition: transform .35s ease-in, opacity .3s ease-in; transform: scale(.86) rotate(5deg); opacity: 0 !important; }
.g-jolt { animation: gjolt .16s ease; }
@keyframes gjolt { 50% { opacity: .55; } }

#weapon .wimg { height: 1.05em; width: auto; display: block; }
.g-boxe .wimg { height: 30px; width: auto; display: block; }

#lvlup {
  position: fixed;
  left: 50%; bottom: 9%;
  transform: translateX(-50%);
  z-index: 45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
#lvlup.is-on { opacity: 1; pointer-events: auto; }
.g-lvltext { font-family: var(--mono); font-size: 13px; letter-spacing: .34em; margin-bottom: 10px; color: #000; }
.g-boxes { display: flex; gap: 12px; justify-content: center; }
.g-box {
  width: 76px;
  padding: 9px 6px 7px;
  background: #fff;
  border: 1.5px solid #000;
  border-radius: 0;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--mono);
  color: #000;
}
.g-box:hover { background: #000; color: #fff; }
.g-boxe { font-size: 30px; line-height: 1.15; }
.g-boxn { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

#verdict {
  font-family: var(--mono);
  font-size: clamp(13px, 1.8vw, 18px);
  letter-spacing: .2em;
  color: #111;
  margin-bottom: .6rem;
  opacity: 0;
  transition: opacity .5s ease .3s;
}
.endcard.is-visible #verdict { opacity: 1; }

/* ---------------- LANDING ---------------- */
.landing {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  transition: opacity .5s ease;
}
.landing.is-gone { opacity: 0; pointer-events: none; }
.landing__mark {
  text-align: center;
  padding: 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.landing__eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .38em;
  font-size: clamp(10px, 1.3vw, 14px);
  color: #111;
  margin-left: .38em;
  margin-bottom: clamp(1.4rem, 4vh, 3rem);
}
.landing__title {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .01em;
  /* capped by BOTH width and height so it can never crowd the eyebrow on a short/wide screen */
  font-size: clamp(38px, min(8.5vw, 16vh), 120px);
  line-height: 1;
  color: #111;
  margin: 0 0 clamp(1.6rem, 5vh, 3.2rem);
}
.playbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.2rem; background: none; border: none; cursor: pointer;
  transition: transform .18s ease, opacity .3s ease;
}
.playbtn:hover { transform: scale(1.08); }
.playbtn:active { transform: scale(0.96); }
.playbtn:focus-visible { outline: 2px solid #111; outline-offset: 6px; border-radius: 4px; }
.playbtn__tri {
  width: clamp(34px, 5.6vw, 62px);
  height: auto;
  display: block;
  overflow: visible;
}
.playbtn__tri .tri-o { fill: none; stroke: #111; stroke-width: 2; stroke-linejoin: round; }
.playbtn__tri .tri-f { fill: #111; }
/* while it loads the button can't be clicked — the triangle filling in IS the progress bar */
.playbtn.is-loading { pointer-events: none; cursor: default; }
.playbtn.is-ready .playbtn__tri { animation: triPop .55s cubic-bezier(.22, 1.61, .36, 1); }
@keyframes triPop { 0% { transform: scale(1); } 38% { transform: scale(1.1); } 100% { transform: scale(1); } }
/* the play button gets cold feet: dodges right + "...are you sure?",
   then relents back to center + "ok..but don't judge me" */
.playbtn { transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.playbtn__say {
  display: none;
  font-family: var(--mono);
  font-size: clamp(14px, 2.2vw, 22px);
  letter-spacing: .1em;
  color: #111;
  white-space: nowrap;
}
.playbtn.is-ask    { transform: translateX(clamp(80px, 24vw, 260px)) !important; }
.playbtn.is-relent { transform: translateX(0) !important; }
.playbtn.is-ask .playbtn__tri, .playbtn.is-relent .playbtn__tri { display: none; }
.playbtn.is-ask .playbtn__say, .playbtn.is-relent .playbtn__say { display: inline; }
.playbtn.is-ask:hover, .playbtn.is-relent:hover { transform: translateX(clamp(80px, 24vw, 260px)); }
.playbtn.is-relent:hover { transform: translateX(0); }
/* the real play arrow that stays behind when the button dodges away */
.playagain {
  display: none;
  margin-top: 1.4rem;
  padding: 1.1rem;
  background: none; border: none; cursor: pointer;
  transition: transform .18s ease, opacity .4s ease;
  opacity: 0;
}
/* sits to the right, underneath the dodged "...are you sure?" text */
.landing.is-asking .playagain { display: inline-flex; opacity: 1; transform: translateX(clamp(80px, 24vw, 260px)); }
.landing.is-asking .playagain:hover { transform: translateX(clamp(80px, 24vw, 260px)) scale(1.08); }
.landing.is-asking .playagain:active { transform: translateX(clamp(80px, 24vw, 260px)) scale(0.96); }
.playagain .playbtn__tri {
  width: clamp(24px, 4vw, 44px);
}

/* transient sync-nudge readout */
.toast {
  position: fixed;
  left: 50%; bottom: 64px;
  transform: translateX(-50%);
  z-index: 50;
  padding: 8px 14px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.toast.is-on { opacity: 1; }

/* ---------------- END CARD (this video ends on white) ---------------- */
.endcard {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background: rgba(255,255,255,0);
  transition: background .6s ease;
}
.endcard.is-visible { background: rgba(255,255,255,.55); }   /* the damage you did shows through */
.endcard__link, .endcard__btn {
  background: none; border: none; color: #111;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: clamp(14px, 2vw, 20px);
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s ease .3s, color .18s ease;
}
.endcard__link:hover, .endcard__btn:hover { color: #777; }
.endcard.is-visible .endcard__link,
.endcard.is-visible .endcard__btn { opacity: 1; }

[hidden] { display: none !important; }