/* =============================================================================
 * Aquarium — laptop/TV/projector 3D world styles
 * Pure-black "projector" aesthetic: the only light is the creatures themselves.
 * No mid-gray panels, no low-alpha colored overlays (they'd glow as dim
 * rectangles on a projector). UI is bright elements on black, or hidden.
 * ===========================================================================*/

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;        /* TRUE BLACK */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #eaf6ff;
  cursor: default;
}

#scene { position: fixed; inset: 0; }
#scene canvas { display: block; }

/* ----------------------------- Vignette ---------------------------------- */
/* RECTANGULAR feather (inset shadow) that fades each edge inward to pure black
   while following the screen's rectangle — so the corners stay visible (unlike a
   circular/elliptical vignette, which would crop them). Smooth, no hard ring.
   Sits above the canvas but below the UI so HUD text stays bright. */
#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 5;
  box-shadow: inset 0 0 15vmin 2vmin #000;
}

/* ------------------------------- HUD ------------------------------------- */
.hud {
  position: fixed;
  top: 18px; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; /* scoreboard at top-left */
  padding: 0 26px;
  pointer-events: none;
  z-index: 10;
}

/* --------------------------- Scoreboard ---------------------------------- */
/* One card per CONNECTED player: a glowing circular photo with the player's name
   + live fish count to its RIGHT. No panels — just luminous elements on black,
   in keeping with the projector look. Each card's --accent is that player's
   color (set from app.js). */
.scoreboard {
  display: flex;
  align-items: center;
  gap: 26px;
}
.score-card {
  --accent: #6ee6ff;
  display: flex;
  flex-direction: row;       /* photo on the left, text beside it */
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-8px);
  animation: scoreIn 0.4s ease forwards;
}
@keyframes scoreIn { to { opacity: 1; transform: translateY(0); } }
.score-avatar {
  width: 46px; height: 46px;  /* smaller than before */
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 4px var(--accent);
}
.score-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pulsing red glow around the avatar for 2.5s when this player's fish is eaten
   (JS adds .hit). The 0.85s pulse matches the phone's red edge-glow (redPulse). */
.score-avatar.hit {
  border-color: #ff3b30;
  animation: avatarEaten 0.85s ease-in-out infinite;
}
@keyframes avatarEaten {
  0%, 100% { box-shadow: 0 0 8px #ff3b30, 0 0 3px #ff3b30; }
  50%      { box-shadow: 0 0 30px 6px #ff3b30, 0 0 15px #ff3b30; }
}
.score-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.score-name {
  font-size: 14px; font-weight: 800; letter-spacing: 0.3px;
  color: #eaf6ff;
  text-shadow: 0 0 10px var(--accent);
}
.score-count {
  font-size: 24px; font-weight: 900; line-height: 1;
  color: #fff;
  text-shadow: 0 0 14px var(--accent), 0 0 4px var(--accent);
}
/* A quick pulse whenever the count changes (added in app.js). */
.score-count.bump { display: inline-block; animation: countBump 0.3s ease; }
@keyframes countBump { 50% { transform: scale(1.35); } }

/* --------------------------- Control buttons ----------------------------- */
/* Bright glyphs on transparent — no gray panel. They also auto-hide in play. */
.fs-btn {
  position: fixed;
  bottom: 18px; right: 18px;
  width: 48px; height: 48px;
  font-size: 24px;
  border: none;
  background: transparent;
  color: #eaf6ff;
  text-shadow: 0 0 12px rgba(120, 230, 255, 0.9);
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.35s ease, transform 0.1s ease;
}
.fs-btn:hover { transform: scale(1.12); }
.sound-btn { right: 76px; }

/* Auto-hide: controls + cursor vanish shortly after the mouse stops moving. */
body.controls-hidden .fs-btn { opacity: 0; pointer-events: none; }
body.controls-hidden { cursor: none; }

/* Small prompt shown only if autoplay is blocked until a click. */
.sound-hint {
  position: fixed;
  bottom: 78px; right: 18px;
  font-size: 16px; font-weight: 800;
  color: #d8fbff;
  text-shadow: 0 0 12px rgba(110, 230, 255, 0.95);
  z-index: 10;
  transition: opacity 0.4s ease;
}
.sound-hint.hidden { opacity: 0; pointer-events: none; }

/* ---------------------------- Game Over ---------------------------------- */
/* Pure black screen, bright glowing text — no dim gradient/blur rectangle.
   One centered column: shark, "Game Over", winner banner, then a row of
   per-player cards (photo over name over count); the leader is bigger with a
   crown. Sizes/gaps kept tight so the whole group reads as one balanced block. */
.gameover {
  position: fixed; inset: 0;
  z-index: 20;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; text-align: center;
  background: #000;
}
.gameover.hidden { display: none; }

.go-emoji {
  font-size: 80px; line-height: 1; margin: 0;
  animation: float 2s ease-in-out infinite;
  filter: drop-shadow(0 0 22px rgba(120, 230, 255, 0.8));
}
@keyframes float { 50% { transform: translateY(-16px) rotate(-4deg); } }

.go-title {
  font-size: 72px; font-weight: 900; letter-spacing: 1px; line-height: 1; margin: 0;
  color: #eaf6ff; text-shadow: 0 0 26px rgba(120, 230, 255, 0.95);
}

/* ---- Winner banner + per-player results ---- */
.go-winner {
  font-size: 38px; font-weight: 900; letter-spacing: 0.5px; line-height: 1; margin: 0;
  color: #ffe08a;
  text-shadow: 0 0 22px rgba(255, 200, 90, 0.9), 0 0 8px rgba(255, 200, 90, 0.7);
}
.go-winner:empty { display: none; }

.go-results {
  display: flex;
  align-items: flex-end;       /* cards sit on one baseline; the taller winner rises */
  justify-content: center;
  gap: 56px;
  margin-top: 30px;            /* clearance for the winner's crown above the row */
}
.go-player {
  --accent: #6ee6ff;
  position: relative;
  display: flex; flex-direction: row; align-items: center;  /* photo | name + count beside it */
  gap: 14px;
  opacity: 0.5;                /* non-winners dimmed back */
  transition: opacity 0.3s ease;
}
.go-meta {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.05; gap: 2px;
}
.go-avatar {
  width: 104px; height: 104px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--accent);
  box-shadow: 0 0 16px var(--accent), 0 0 6px var(--accent);
}
.go-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.go-pname {
  font-size: 22px; font-weight: 800;
  color: #eaf6ff; text-shadow: 0 0 12px var(--accent);
}
.go-pcount {
  font-size: 46px; font-weight: 900; line-height: 1;
  color: #fff; text-shadow: 0 0 18px var(--accent), 0 0 6px var(--accent);
}
.go-crown { display: none; }

/* Winner: full brightness, bigger photo + count, crown centered above the photo. */
.go-player.winner { opacity: 1; }
.go-player.winner .go-avatar {
  width: 140px; height: 140px;
  border-width: 4px;
  box-shadow: 0 0 30px var(--accent), 0 0 10px var(--accent);
}
.go-player.winner .go-pname { font-size: 26px; }
.go-player.winner .go-pcount { font-size: 62px; }
.go-player.winner .go-crown {
  display: block;
  position: absolute; top: -46px; left: 70px;  /* center over the 140px photo (row card) */
  transform: translateX(-50%);
  font-size: 44px;
  filter: drop-shadow(0 0 14px rgba(255, 210, 90, 0.95));
  animation: crownFloat 2s ease-in-out infinite;
}
/* Up-and-down only (no tilt), keeping the -50% centering throughout. */
@keyframes crownFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-9px); }
}