/* Basic layout (no background) */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: #000; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #f5f5f5;
}
/* Keep arrow cursor over text content (avoid I‑beam) */
body, body * { cursor: default; }
/* Show pointer for interactive elements */
a[href], a[href] * { cursor: pointer; }
.center-link, .center-link * { cursor: pointer; }

/* Hide text insertion caret on non-editable content */
*:not(input):not(textarea):not([contenteditable="true"]) {
  caret-color: transparent !important;
}

.wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  gap: 1.25rem;
  padding: 2rem 1rem;
  position: relative;
}

.headline {
  margin: 0;
  font-size: clamp(4rem, 12vw, 6rem);
  letter-spacing: 0.02em;
  font-family: '3D Noise', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  /* Softer grunge on text */
  filter: url(#grunge-soft);
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
  color: #fff;
  text-align: center;
}

/* Player */
.player {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: fixed;
  right: 0;
  bottom: 5vh; /* nudge up a bit more */
  z-index: 1000; /* safely above cracked-glass and other layers */
}

/* Fullscreen background video */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
}
.bg-video { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: contrast(1.05) saturate(.95) brightness(.9); }

/* Powerlines overlay (with sparks) — now top-right */
.powerlines-wrap {
  position: fixed;
  right: -100px;  /* push further right off-screen */
  top: -2px;   /* 2px bleed off-screen */
  width: clamp(216px, 39.6vw, 540px); /* 20% smaller than previous */
  z-index: 2; /* above bg, below controls */
  pointer-events: none;
}
.powerlines {
  display: block;
  width: 100%;
  height: auto;
}
.powerlines-wrap .sparks {
  position: absolute;
  left: 38%; /* base placement along wires */
  top: 22%;
  width: 80%; /* 100% bigger again (double current) */
  transform: translate(-189px, -140px); /* move way more left, keep 10px up */
  height: auto;
  pointer-events: none;
}

/* 13 Misa font for sideways brand */
@font-face {
  font-family: '13 Misa';
  src: url('../fonts/13_Misa.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Sideways brand text on the left */
.brand-unknownnumber {
  position: fixed;
  left: -2px; /* slight bleed to ensure flush */
  top: 0;
  height: 100vh; /* full screen height */
  height: 100svh; /* stable viewport height on mobile */
  writing-mode: vertical-rl; /* vertical text flow */
  text-orientation: sideways; /* rotate Latin glyphs sideways */
  font-family: '13 Misa', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: calc(100vh / 13.72); /* N chars + spacing (13 + 12*0.06) */
  font-size: calc(100svh / 13.72);
  line-height: 1;
  letter-spacing: 0.06em;
  color: #ffffff;
  z-index: 200; /* above overlays, below controls */
  pointer-events: none;
  white-space: nowrap;
}

.brand-unknownnumber > span { display: inline-block; }

.btn {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  transition: transform 180ms ease, background-color 180ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Skip buttons as SVG with grunge filter */
.svg-skip { width: 64px; height: 64px; display: block; color: inherit; }
.skip.prev .svg-skip { transform: scaleX(-1); }
.svg-skip .content { transition: transform 260ms ease; }
.svg-skip .tri1,
.svg-skip .tri2,
.svg-skip .bar {
  transition: transform 320ms cubic-bezier(.2,.7,0,1), opacity 160ms ease;
}

/* Morph pulse on click */
.skip.morph .svg-skip .tri1 { transform: translateX(3px) scale(1.02); }
.skip.morph .svg-skip .tri2 { transform: translateX(5px) scale(1.02); }
.skip.morph .svg-skip .bar  { transform: translateX(7px) scaleY(0.9); }

/* Toggle button with morphing play→pause effect */
/* Grungy play/pause button using inline SVG (no outer ring) */
.toggle { position: relative; width: 96px; height: 96px; }
.svg-toggle { width: 64px; height: 64px; display: block; color: inherit; }

/* Play/Pause layers */
.svg-toggle .play,
.svg-toggle .pause {
  transform-origin: 50px 50px;
  transition: opacity 180ms ease, transform 320ms cubic-bezier(.2,.7,0,1);
}
.svg-toggle .play { opacity: 1; }
.svg-toggle .pause { opacity: 0; transform: scale(.85) rotate(-6deg); }

/* State when playing */
.toggle.is-playing .svg-toggle .play { opacity: 0; transform: scale(.85) rotate(6deg) translateX(-3px); }
.toggle.is-playing .svg-toggle .pause { opacity: 1; transform: scale(1) rotate(0) translateX(0); }

/* Press feedback */
.btn:active { transform: translateY(0) scale(.98); }

/* Removed Now Playing text per request */
/* 3D Noise font */
@font-face {
  font-family: '3D Noise';
  src: url('../fonts/3D Noise.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Bottom-right cracked glass overlay */
.cracked-glass {
  position: fixed;
  right: -4px; /* bleed over edge */
  bottom: -4px; /* bleed over edge */
  width: clamp(270px, 49.5vw, 675px); /* +50% from previous size */
  height: auto;
  z-index: 2; /* above bg, below potential modals */
  pointer-events: none; /* don't block clicks */
}

/* Centered image row */
.center-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 16px);
  position: relative;
  z-index: 3; /* above cracked-glass */
}

.center-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
}

.center-icon {
  display: block;
  width: clamp(79px, 12.375vw, 146px); /* another 25% smaller */
  height: auto;
  transition: transform 180ms ease;
  will-change: transform;
}
.center-icon:hover {
  transform: scale(1.06);
}
.center-link:hover .center-icon { transform: scale(1.06); }

/* Caption bubble under each icon */
.center-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.icon-label {
  margin-top: 2px;
  padding: 6px 10px;
  border-radius: 9999px; /* pill bubble */
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* Optional: prevent text selection completely (uncomment if desired) */
/*
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
*/

/* Page fade-out overlay for navigation (avoids white flash) */
.page-veil {
  position: fixed;
  inset: 0;
  background: var(--veil-color, #000);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  z-index: 10000;
}
body.is-fading-out .page-veil { opacity: 1; }