/* ==========================================================================
   CRY-99 — Y2K / lofi / purple
   ========================================================================== */

:root {
  --bg-deep: #0b0417;
  --bg-mid: #1a0b3b;
  --purple: #b16cff;
  --purple-bright: #d8a7ff;
  --pink: #ff6ad5;
  --cyan: #7cf5ff;
  --text: #e6d8ff;
}

* {
  box-sizing: border-box;
}

/* Use the classic Winamp pointer everywhere, so the cursor stays consistent
   across the whole page instead of reverting to the OS arrow off the player.
   The .cur was extracted from Webamp's default cursor set. !important overrides
   Webamp's own per-region cursors so it never changes anywhere. Browsers that
   don't support .cur (e.g. Safari) fall back to the normal system pointer. */
* {
  cursor: url("assets/cursors/winamp-normal.cur"), auto !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000; /* fallback behind the video */
  color: #e6d8ff;
  font-family: "VT323", monospace;
  overflow: hidden; /* the page is a single fixed "screen" */
}

/* --- Full-screen looping VHS background video ------------------------------ */
#bg-video,
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the viewport, cropping as needed */
  /* Show the upper part of the (square) footage so the flowers stay in frame,
     rather than centering the crop. Dial the % between 0% (top) and 100%
     (bottom) to fine-tune what's visible. */
  object-position: center top;
  z-index: 0; /* sits behind the player (z 8) and branding (z 10) */
  pointer-events: none; /* never intercept clicks meant for the player */
}

/* --- CRT scanlines + grain overlay ----------------------------------------- */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
  animation: flicker 6s infinite;
}

@keyframes flicker {
  0%,
  97%,
  100% {
    opacity: 0.55;
  }
  98% {
    opacity: 0.4;
  }
  99% {
    opacity: 0.62;
  }
}

/* --- Branding -------------------------------------------------------------- */
.brand {
  position: fixed;
  /* Anchor the logo's BOTTOM edge above the mid-screen player. Using bottom:50%
     pins it to the viewport's vertical center, and the margin lifts it clear of
     the player (roughly half the player stack's height). The logo grows upward,
     so this stays clear no matter how tall the logo is. */
  bottom: 50%;
  margin-bottom: 250px;
  left: 0;
  right: 0;
  z-index: 10;
  text-align: center;
  pointer-events: none;
}

.logo {
  max-width: min(420px, 70vw);
  height: auto;
  image-rendering: auto; /* smooth scaling for the 3D-rendered spin gif */
  filter: drop-shadow(0 0 18px rgba(255, 106, 213, 0.55));
}

.logo-fallback {
  display: none; /* shown only if assets/logo.png is missing */
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(28px, 8vw, 72px);
  letter-spacing: 2px;
  color: var(--pink);
  text-shadow: 0 0 8px var(--pink), 0 0 22px var(--purple),
    4px 4px 0 rgba(124, 245, 255, 0.6);
}

/* --- Custom Hello Kitty audio player --------------------------------------- */
/* A fixed, centered pink panel. Starts at opacity 0 (so it's measurable for
   logo placement while the gate is up) and fades in when the gate unlocks. */
.hk-player {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  width: min(360px, 90vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 16px;
  font-family: "VT323", monospace;
  color: #b3005e;
  background: linear-gradient(180deg, #ffe1f2 0%, #ffbfe4 55%, #ffa8db 100%);
  border: 3px solid #ff8fd0;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(255, 106, 213, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.7s ease;
}

.hk-titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 24px;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 1px 0 #ff6ad5, 0 0 10px rgba(255, 106, 213, 0.85);
}

.hk-screen {
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: inset 0 0 8px rgba(255, 143, 208, 0.35);
}

.hk-marquee {
  font-size: 26px;
  line-height: 1.1;
  color: #d6006e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hk-marquee #np-index {
  opacity: 0.7;
  margin-right: 6px;
}

.hk-sub {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 18px;
  color: #b3005e;
  opacity: 0.85;
  margin-top: 2px;
}

.hk-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin-top: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff6ad5, #ffd1ee);
  outline: none;
}

.hk-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ff6ad5;
  box-shadow: 0 0 6px rgba(255, 106, 213, 0.8);
}

.hk-seek::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ff6ad5;
}

.hk-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.hk-btn {
  font-family: "VT323", monospace;
  font-size: 22px;
  line-height: 1;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d6006e;
  background: #fff;
  border: 2px solid #ff8fd0;
  border-radius: 50%;
  box-shadow: 0 2px 0 #ff8fd0;
}

.hk-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #ff8fd0;
}

.hk-btn--play {
  width: 58px;
  height: 58px;
  font-size: 24px;
  color: #fff;
  background: linear-gradient(180deg, #ff6ad5, #d6006e);
  border-color: #fff;
  box-shadow: 0 3px 0 #b3005e;
}

.hk-btn--play:active {
  box-shadow: 0 1px 0 #b3005e;
}

.hk-playlist {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 34vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid #fff;
  border-radius: 12px;
}

.hk-track {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 5px 8px;
  font-size: 20px;
  color: #b3005e;
  border-radius: 8px;
}

.hk-track:hover {
  background: rgba(255, 143, 208, 0.3);
}

.hk-track.is-playing {
  background: linear-gradient(90deg, #ff6ad5, #ff9ede);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.hk-track-num {
  opacity: 0.7;
  min-width: 1.5em;
}

.hk-track-title {
  flex: 1;
}

/* --- Password gate --------------------------------------------------------- */
/* A simple inline "password: [____]" at the viewport center — the same spot the
   player will occupy — so when it's dismissed the player appears "in its place".
   No panel, no button: pressing Enter submits the form. */
.gate {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12; /* above the player (8) and branding (10) */
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.35s ease;
}

.gate-label {
  font-family: "VT323", monospace;
  font-size: 26px;
  letter-spacing: 1px;
  color: rgba(216, 167, 255, 0.65); /* match the footer credit color */
  white-space: nowrap;
}

.gate-input {
  font-family: "VT323", monospace;
  font-size: 24px;
  letter-spacing: 2px;
  padding: 4px 10px;
  width: min(220px, 46vw);
  color: var(--text);
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--purple-bright);
  border-radius: 6px;
  outline: none;
}

.gate-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 12px rgba(255, 106, 213, 0.6);
}

/* Wrong-password gif sits just below the inline row, centered, without
   disrupting it. */
.gate-wrong {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;
  width: min(220px, 60vw);
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 0 10px rgba(255, 106, 213, 0.5));
}

/* Fade out once unlocked, then it's removed from the DOM by JS. */
.gate--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Little shake on a wrong password (keeps the centering transform). */
.gate--shake {
  animation: gate-shake 0.4s ease;
}

@keyframes gate-shake {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  20%,
  60% {
    transform: translate(-53%, -50%);
  }
  40%,
  80% {
    transform: translate(-47%, -50%);
  }
}

/* --- Footer credit --------------------------------------------------------- */
.credit {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: 10;
  text-align: center;
  font-size: 18px;
  color: rgba(216, 167, 255, 0.65);
  letter-spacing: 2px;
  pointer-events: none;
}

/* --- Mobile / narrow screens ----------------------------------------------- */
/* The player scales to fit width in main.js (layoutPlayer), and the logo is
   positioned just above it there too. Here we just size things down so the big
   desktop logo and footer don't crowd a small screen. Everything stays a single
   fixed "screen" (no scrolling), same as desktop. */
@media (max-width: 640px) {
  .logo {
    /* Big and prominent on a phone. It's anchored by its bottom (see
       layoutPlayer), so it grows upward and won't crowd the player — only risk
       is clipping at the very top on short screens, hence the cap. */
    max-width: min(420px, 92vw);
  }

  .credit {
    font-size: 15px;
    bottom: 8px;
  }
}

/* Very small / short screens: trim the logo a little so it doesn't clip. */
@media (max-width: 380px) {
  .logo {
    max-width: 88vw;
  }
}