/* =========================================================================
   Cute Kittens! — styles
   Sections:
     1. Theme tokens & base
     2. Background decorations (clouds, floaties, silhouette, flicker)
     3. Volume control
     4. Buttons
     5. Title screen
     6. Gameplay (HUD, kittens, particles, toast)
     7. Jumpscare screen
     8. Ending screen
     9. Keyframes
    10. Responsive tweaks
   ========================================================================= */

/* ---------- 1. Theme tokens & base ---------- */
:root {
  --pink: #ffc8dd;
  --pink-deep: #ff8fab;
  --pink-dark: #e86a92;
  --blue: #bde0fe;
  --blue-deep: #89c2f5;
  --cream: #fff6e9;
  --lavender: #e2d4f7;
  --lav-deep: #b79ced;
  --text: #7a5c86;
  --shadow: 0 10px 30px rgba(183, 156, 237, 0.35);
  --font: "Nunito", "Quicksand", "Varela Round", "Segoe UI Rounded",
          "Arial Rounded MT Bold", "Comic Sans MS", system-ui, sans-serif;
}

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

html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font);
  color: var(--text);
  background: linear-gradient(160deg, #ffe3ef 0%, #efe4fb 45%, #d9edff 100%);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app { position: relative; width: 100%; height: 100%; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* All screens stack on top of each other; only .active is shown. */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.screen.active { display: flex; }

/* ---------- 2. Background decorations ---------- */
#bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.cloud {
  position: absolute;
  left: 0;
  width: var(--w, 160px);
  height: calc(var(--w, 160px) * 0.32);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(200, 180, 240, 0.25);
  animation: drift var(--dur, 70s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 46%; height: 150%; left: 14%; top: -75%; }
.cloud::after  { width: 34%; height: 115%; right: 16%; top: -50%; }

.floaty {
  position: absolute;
  font-size: var(--size, 20px);
  line-height: 1;
  opacity: 0.7;
  animation: floaty var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.floaty svg { width: 1em; height: 1em; fill: currentColor; display: block; }

/* The barely-noticeable figure in the background (creepy event). */
.silhouette {
  position: absolute;
  bottom: -2vh;
  left: 50%;
  height: 72vh;
  aspect-ratio: 1 / 3;
  transform: translateX(-50%);
  opacity: 0;
  filter: blur(1.5px);
  transition: opacity 0.7s ease;
}
.silhouette svg { width: 100%; height: 100%; display: block; }
.silhouette.show { opacity: 0.13; }

#flicker {
  position: absolute; inset: 0; z-index: 60;
  background: #000; opacity: 0; pointer-events: none;
}
#flicker.flick { animation: flick 0.4s steps(1, end); }

/* ---------- 3. Volume control ---------- */
.volume-control {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-weight: 700;
  font-size: 0.9rem;
}
.volume-control input[type="range"] { width: 110px; accent-color: var(--pink-deep); cursor: pointer; }
.volume-value { min-width: 3ch; text-align: right; }
body.horror .volume-control { display: none; }

/* ---------- 4. Buttons ---------- */
.btn {
  font-family: inherit;
  font-weight: 800;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 14px 32px;
  background: linear-gradient(180deg, #ffadc6 0%, #ff86ab 100%);
  box-shadow: 0 6px 0 var(--pink-dark), 0 14px 26px rgba(255, 127, 168, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.04em;
}
.btn:hover { transform: translateY(-2px) scale(1.04); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-dark), 0 6px 12px rgba(255, 127, 168, 0.35); }
.btn:focus-visible { outline: 4px solid var(--blue-deep); outline-offset: 4px; }
.btn-big { font-size: clamp(1.2rem, 3.6vw, 1.8rem); padding: 18px 52px; animation: pulse 1.8s ease-in-out infinite; }

/* ---------- 5. Title screen ---------- */
.title-card {
  position: relative;
  text-align: center;
  padding: clamp(22px, 5vw, 48px);
  max-width: min(92vw, 660px);
  background: rgba(255, 255, 255, 0.62);
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 44px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: popIn 0.7s cubic-bezier(.3, 1.6, .5, 1) both;
}
.title-kittens { display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 2vw, 18px); margin-bottom: 6px; }
.title-kittens .kitten-svg { width: clamp(72px, 16vw, 128px); height: auto; animation: bob 2.4s ease-in-out infinite; }
.title-kittens .kitten-svg:nth-child(2) { width: clamp(88px, 19vw, 150px); animation-delay: -0.8s; }
.title-kittens .kitten-svg:nth-child(3) { animation-delay: -1.6s; }

.game-title {
  font-size: clamp(2.8rem, 9vw, 5.6rem);
  font-weight: 900;
  color: var(--pink-deep);
  text-shadow: 3px 3px 0 #fff, 6px 6px 0 var(--lavender);
  line-height: 1.05;
  animation: wiggle 3.2s ease-in-out infinite;
}
.subtitle { font-size: clamp(1rem, 2.8vw, 1.4rem); font-weight: 700; margin: 10px 0 28px; }

/* Title card + top list side by side; stacks (and scrolls) on narrow screens */
#title-screen { overflow-y: auto; justify-content: safe center; }
.title-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  padding: 20px 16px;
}

.leaderboard {
  width: 300px;
  flex-shrink: 0;
  padding: 20px 18px 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 4px solid rgba(255, 255, 255, 0.95);
  border-radius: 32px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: popIn 0.7s 0.15s cubic-bezier(.3, 1.6, .5, 1) both;
}
.lb-title { font-size: 1.2rem; font-weight: 900; color: var(--lav-deep); text-align: center; }
.lb-sub {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 4px 0 12px; font-size: 0.82rem; font-weight: 700; opacity: 0.8;
}
.lb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6fd39a; box-shadow: 0 0 0 3px rgba(111, 211, 154, 0.25);
  animation: pulse 1.6s ease-in-out infinite;
}
.lb-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lb-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #fff;
  border-radius: 16px;
  font-weight: 800;
  font-size: 0.9rem;
}
.lb-row:nth-child(1) { background: linear-gradient(90deg, #fff4cc, #fff); }
.lb-row:nth-child(2) { background: linear-gradient(90deg, #eef0f7, #fff); }
.lb-row:nth-child(3) { background: linear-gradient(90deg, #ffe6d5, #fff); }
.lb-row.new { animation: lbNew 1.2s ease; }
.lb-rank { text-align: center; color: var(--text); opacity: 0.75; }
.lb-row:nth-child(-n+3) .lb-rank { opacity: 1; font-size: 1.1rem; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.lb-name small { display: block; font-size: 0.7rem; font-weight: 700; opacity: 0.6; }
.lb-score { color: var(--pink-deep); white-space: nowrap; text-align: right; }
.lb-score small { display: block; font-size: 0.7rem; font-weight: 700; color: var(--text); opacity: 0.6; }
.lb-foot { margin-top: 10px; text-align: center; font-size: 0.85rem; font-weight: 700; opacity: 0.75; }
@keyframes lbNew { 0% { transform: scale(1.06); box-shadow: 0 0 0 4px var(--pink); } 100% { transform: none; box-shadow: none; } }

@media (max-width: 980px) {
  .title-layout { flex-direction: column; padding-bottom: 80px; }
  .leaderboard { width: min(92vw, 660px); }
}
.hint { margin-top: 22px; font-weight: 700; opacity: 0.8; }

/* ---------- 6. Gameplay ---------- */
.hud {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 560px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 22px 14px;
  background: rgba(255, 255, 255, 0.75);
  border: 3px solid #fff;
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.counter { font-size: clamp(1.15rem, 3.4vw, 1.6rem); font-weight: 900; color: var(--pink-deep); }
.counter-goal { font-size: 0.75em; color: var(--text); font-weight: 700; }
.counter.bump { animation: bump 0.35s cubic-bezier(.3, 1.8, .5, 1); }

.progress {
  position: relative;
  width: 100%;
  height: 18px;
  background: #fdebf3;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08);
}
.progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 8px, transparent 8px 16px),
    linear-gradient(90deg, var(--pink), var(--lav-deep), var(--blue-deep));
  transition: width 0.45s cubic-bezier(.3, 1.6, .5, 1);
}

.playfield { position: absolute; inset: 0; z-index: 15; }

.kitten {
  position: absolute;
  width: var(--size, 100px);
  height: var(--size, 100px);
  cursor: pointer;
  touch-action: manipulation;
  filter: drop-shadow(0 6px 8px rgba(160, 120, 200, 0.3));
  animation: kittenIn 0.45s cubic-bezier(.3, 1.7, .5, 1) both;
}
.kitten .kitten-inner { width: 100%; height: 100%; animation: bob 2s ease-in-out infinite; }
.kitten .kitten-svg { width: 100%; height: 100%; display: block; transition: transform 0.2s ease; }
.kitten:hover .kitten-svg { transform: scale(1.08) rotate(-3deg); }
.kitten.leaving { animation: kittenOut 0.4s ease-in forwards; pointer-events: none; }
.kitten.collected { animation: kittenCollect 0.5s ease-out forwards; pointer-events: none; }

/* Kitten face variants: normal cute face vs. "staring at the player" face */
.kitten-svg .eyes-stare, .kitten-svg .mouth-stare { display: none; }
.staring .eyes-cute, .staring .blush, .staring .mouth-cute { display: none; }
.staring .eyes-stare, .staring .mouth-stare { display: inline; }
.kitten.staring .kitten-inner { animation-play-state: paused; }
.kitten.staring .kitten-svg { transform: none !important; }

.particle {
  position: fixed;
  z-index: 35;
  pointer-events: none;
  font-size: var(--s, 18px);
  line-height: 1;
  animation: burst 0.9s ease-out forwards;
}
.plus-one {
  position: fixed;
  z-index: 36;
  pointer-events: none;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--pink-deep);
  text-shadow: 2px 2px 0 #fff;
  animation: plusOne 0.9s ease-out forwards;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 11%;
  z-index: 30;
  transform: translateX(-50%) scale(0.8);
  padding: 12px 28px;
  max-width: 90vw;
  background: #fff;
  border: 3px solid var(--pink);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-weight: 900;
  font-size: clamp(1rem, 3vw, 1.45rem);
  color: var(--pink-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.3, 1.6, .5, 1);
}
.toast.show { opacity: 1; transform: translateX(-50%) scale(1); }
/* The odd message: same bubble, but it pops in/out instantly and feels "off". */
.toast.strange { transition: none; color: #8d7590; letter-spacing: 0.18em; font-weight: 700; }

/* ---------- 6b. Bedtime stage ---------- */
.hint-sound { margin-top: 6px; font-size: 0.9rem; font-weight: 700; opacity: 0.7; }

/* Sleeping-eyes variant of the kitten face */
.kitten-svg .eyes-sleep { display: none; }
.sleepy .eyes-cute { display: none; }
.sleepy .eyes-sleep { display: inline; }
.sleepy.awake .eyes-cute { display: inline; }
.sleepy.awake .eyes-sleep { display: none; }

/* Night overlay. --hole/--soft/--mx/--my are set from JS for the spotlight. */
.dusk {
  position: absolute;
  inset: 0;
  z-index: 22;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.5s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(20, 14, 48, 0) var(--hole, 0px),
    rgba(20, 14, 48, 0.93) calc(var(--hole, 0px) + var(--soft, 1px)));
}

.path-stage { position: absolute; inset: 0; z-index: 16; display: none; touch-action: none; }
.path-stage.active { display: block; }
.path-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.carry-kitten {
  position: absolute;
  width: var(--size, 60px);
  height: var(--size, 60px);
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}
.carry-kitten.carried { cursor: grabbing; }
.carry-kitten .kitten-svg { width: 100%; height: 100%; display: block; transition: transform 0.2s ease; }
.carry-kitten:not(.carried) .kitten-svg { animation: breathe 2.6s ease-in-out infinite; }
.carry-kitten.carried .kitten-svg { transform: scale(1.1); }
.carry-kitten.awake { animation: wakeShake 0.4s ease; }
.zzz {
  position: absolute;
  right: -16px;
  top: -20px;
  font-weight: 900;
  font-size: 0.95rem;
  color: #cdb4db;
  animation: zzz 2.2s ease-in-out infinite;
}
.zzz small { font-size: 0.75em; }
.carry-kitten.awake .zzz { display: none; }

.stage-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 35;
  width: min(90vw, 460px);
  padding: 26px 26px 28px;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  border: 4px solid #fff;
  border-radius: 36px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.3, 1.6, .5, 1);
}
.stage-card.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.stage-card h2 { font-size: 2rem; font-weight: 900; color: var(--lav-deep); margin: 2px 0 10px; }
.stage-card p { font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.stage-card .stage-sound { color: var(--pink-deep); }
.stage-card .btn { margin-top: 8px; font-size: 1.15rem; }
.stage-emoji { font-size: 2.6rem; animation: bob 2.4s ease-in-out infinite; }

/* ---------- 7. Jumpscare screen ---------- */
.scare { background: #000; z-index: 100; cursor: none; }
#scare-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- 8. Ending screen ---------- */
.end {
  background: #000;
  z-index: 110;
  color: #fff;
  text-align: center;
  padding: 24px;
  gap: clamp(20px, 4vh, 40px);
  font-family: Georgia, "Times New Roman", serif;
  user-select: none;
}
.end-line {
  opacity: 0;
  max-width: 900px;
  font-size: clamp(1.2rem, 3.6vw, 2.3rem);
  transition: opacity 1.4s ease;
}
.end-line.show { opacity: 1; }
.end-fooled {
  font-family: Impact, "Arial Black", "Haettenschweiler", sans-serif;
  font-size: clamp(2.4rem, 9vw, 6rem);
  letter-spacing: 0.08em;
  transition: none;
}
.end-fooled.show { animation: fooledIn 0.45s steps(3, end) both, glitch 2.6s linear 0.5s infinite; }

.btn-end {
  opacity: 0;
  pointer-events: none;
  margin-top: 10px;
  padding: 12px 40px;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: #fff;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 1s ease, background 0.2s, color 0.2s;
}
.btn-end.show { opacity: 1; pointer-events: auto; }
.btn-end:hover, .btn-end:focus-visible { background: #fff; color: #000; outline: none; }

/* ---------- 9. Keyframes ---------- */
@keyframes drift { from { transform: translateX(-35vw); } to { transform: translateX(135vw); } }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(var(--rot, 10deg)); }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes popIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bump { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes kittenIn {
  from { transform: scale(0) rotate(-25deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes kittenOut { to { transform: scale(0) rotate(20deg); opacity: 0; } }
@keyframes kittenCollect {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.3) rotate(12deg); opacity: 1; }
  100% { transform: scale(0) translateY(-80px) rotate(-30deg); opacity: 0; }
}
@keyframes burst {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(var(--rot)); opacity: 0; }
}
@keyframes plusOne {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  20%  { transform: translate(-50%, -90%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -220%) scale(1); opacity: 0; }
}
@keyframes flick {
  0% { opacity: 0; } 10% { opacity: 0.55; } 20% { opacity: 0; }
  45% { opacity: 0.3; } 52% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes fooledIn {
  0%   { opacity: 0; transform: scale(1.8); }
  50%  { opacity: 1; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes glitch {
  0%, 90%, 100% { text-shadow: 2px 0 #b00, -2px 0 #444; transform: none; }
  92% { text-shadow: -7px 0 #f00, 7px 0 #0ff; transform: translate(4px, -2px) skewX(10deg); }
  95% { text-shadow: 7px 0 #f00, -7px 0 #0ff; transform: translate(-5px, 2px); }
  97% { text-shadow: 2px 0 #b00, -2px 0 #444; transform: none; }
}

@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05, 0.96); } }
@keyframes zzz {
  0%   { transform: translate(0, 0); opacity: 0.2; }
  50%  { transform: translate(4px, -8px); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 0.2; }
}
@keyframes wakeShake {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(-58%, -50%) rotate(-8deg); }
  75% { transform: translate(-42%, -50%) rotate(8deg); }
}

/* ---------- 10. Responsive tweaks ---------- */
@media (max-width: 600px) {
  .volume-control { left: 50%; transform: translateX(-50%); bottom: 10px; padding: 6px 12px; }
  .volume-control input[type="range"] { width: 90px; }
  .toast { bottom: 80px; }
}
@media (max-height: 560px) {
  .hint, .hint-sound { display: none; }
  .subtitle { margin-bottom: 16px; }
  .title-kittens .kitten-svg { width: 70px; }
  .title-kittens .kitten-svg:nth-child(2) { width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud, .floaty, .game-title, .btn-big { animation: none; }
}