/* ==========================================================================
   HOST — the always-on player strip along the bottom.
   ========================================================================== */

.player-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6vh 1vw;
  padding: 1.1vh 2vw;
  background: linear-gradient(180deg, rgba(11,11,18,.72), rgba(11,11,18,.96));
  border-top: 2px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Screens are full-height, so they need to give the strip its room back or
   the bar sits on top of the content. */
body.has-bar .screen { padding-bottom: calc(3vh + var(--bar-h)); }
:root { --bar-h: clamp(48px, 7vh, 78px); }

/* Absolutely-positioned round stages (tap, battle, truth-or-dare, water) fill
   the screen box, so they need the inset too. */
body.has-bar .tap-stage,
body.has-bar .battle-stage,
body.has-bar .perform-stage,
body.has-bar .td-stage,
body.has-bar .water-stage { bottom: var(--bar-h); }

.pb-player {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5em;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: .35em 1em;
  font-size: clamp(.7rem, 1.15vw, 1.1rem);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
  /* Room above for the crown to sit on the plate rather than beside it. */
  margin-top: .9em;
}

.pb-name { color: var(--text); position: relative; z-index: 2; }

/* The plate paints over anything behind it, so the fire only ever reads
   above the top edge - never across the name. */
.pb-player > .pb-name,
.pb-player > .pb-score,
.pb-player > .pb-streak { isolation: isolate; }

.pb-score {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: .85em;
  min-width: 2.2ch;
  text-align: right;
}

/* ---- leader: a drawn crown sitting on the plate -------------------------- */

.pb-player.leader {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(208, 154, 60,.16), var(--surface));
}
.pb-player.leader .pb-score { color: var(--gold); }

.pb-crown {
  position: absolute;
  top: -.72em;
  left: 50%;
  transform: translateX(-50%);
  width: 2.1em;
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.55));
  animation: crownBob 3.4s ease-in-out infinite;
}
.pb-crown-body {
  fill: var(--gold);
  stroke: #8a6a12;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.pb-crown-jewel { fill: #fff6d6; }

@keyframes crownBob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50%      { transform: translateX(-50%) translateY(-2px) rotate(2deg); }
}

/* ---- streak: the plate itself burns -------------------------------------- */

.pb-player.hot {
  border-color: #ff7a3d;
  /* Opaque, so the flames behind it only show where they rise past the edge
     and never wash over the name or the score. */
  background: linear-gradient(180deg, #3d2418, #241a20 70%, var(--surface));
  animation: hotPulse 1.4s ease-in-out infinite;
}

/* ---- the flame ----------------------------------------------------------
   Sits ON TOP of the plate, rooted just inside its upper edge.

   Built from soft radial gradients rather than hard shapes. At the size this
   renders (roughly 30px on a 1080p TV) any silhouette with a real outline
   reads as a cartoon blob - fire at a distance is a glow with bright, moving
   cores. Screen blending makes overlaps brighten to white-hot on their own,
   which is the whole trick.
   -------------------------------------------------------------------------- */

.pb-fire {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: calc(100% - 0.6em);   /* overlap the plate, hiding the roots */
  height: 2.9em;
  z-index: 1;                    /* above the plate, below the crown */
  pointer-events: none;
  filter: blur(1.4px);
  isolation: isolate;            /* screen-blend the tongues, not the page */
}

.pf-layer { position: absolute; inset: 0; display: block; }

/* A continuous bed of embers along the top edge of the plate, so the tongues
   read as one fire rather than a row of separate candles. */
.pb-fire::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255,232,160,.95) 0%, rgba(255,150,30,.85) 40%, rgba(255,60,0,0) 78%);
  mix-blend-mode: screen;
  animation: emberBreathe 2.3s ease-in-out infinite;
}

.pf-layer i {
  position: absolute;
  bottom: 0;
  display: block;
  border-radius: 50%;
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
  animation: flameRise 1s ease-in-out infinite;
}

/* Outer body: orange, tall and narrow, fading out well before its own edge
   so neighbours melt into it. Taller than wide is what stops it reading as a
   row of blobs. */
.pf-outer i {
  width: 15%;
  height: 82%;
  background: radial-gradient(ellipse 62% 54% at 50% 88%,
    rgba(255,214,110,.98) 0%, rgba(255,138,0,.82) 38%,
    rgba(255,58,0,.4) 62%, rgba(255,40,0,0) 82%);
}
/* Inner core: pale gold, shorter and faster, keeping the middle hottest. */
.pf-inner i {
  width: 10%;
  height: 48%;
  background: radial-gradient(ellipse 62% 54% at 50% 88%,
    rgba(255,252,232,1) 0%, rgba(255,226,130,.88) 42%, rgba(255,190,60,0) 78%);
}

/* Scattered on unrelated periods so the whole thing never visibly repeats. */
.pf-outer i:nth-child(1) { left: -2%; animation-duration: .82s; animation-delay: -.10s; height: 62%; }
.pf-outer i:nth-child(2) { left:  9%; animation-duration: 1.06s; animation-delay: -.45s; height: 88%; }
.pf-outer i:nth-child(3) { left: 20%; animation-duration: .91s; animation-delay: -.72s; height: 70%; }
.pf-outer i:nth-child(4) { left: 31%; animation-duration: 1.19s; animation-delay: -.28s; height: 100%; }
.pf-outer i:nth-child(5) { left: 43%; animation-duration: .87s; animation-delay: -.93s; height: 76%; }
.pf-outer i:nth-child(6) { left: 55%; animation-duration: 1.11s; animation-delay: -.05s; height: 92%; }
.pf-outer i:nth-child(7) { left: 67%; animation-duration: .95s; animation-delay: -.60s; height: 66%; }
.pf-outer i:nth-child(8) { left: 79%; animation-duration: 1.02s; animation-delay: -.36s; height: 80%; }

.pf-inner i:nth-child(1) { left:  6%; animation-duration: .68s; animation-delay: -.22s; }
.pf-inner i:nth-child(2) { left: 19%; animation-duration: .79s; animation-delay: -.51s; height: 58%; }
.pf-inner i:nth-child(3) { left: 34%; animation-duration: .72s; animation-delay: -.08s; height: 64%; }
.pf-inner i:nth-child(4) { left: 49%; animation-duration: .84s; animation-delay: -.66s; height: 56%; }
.pf-inner i:nth-child(5) { left: 63%; animation-duration: .74s; animation-delay: -.33s; }
.pf-inner i:nth-child(6) { left: 77%; animation-duration: .81s; animation-delay: -.77s; height: 52%; }

/* Rise, narrow, lean, go out. Fire is not symmetrical, so neither is this. */
/* Never fades all the way out. Eight tongues on unrelated periods will still
   drift into sync now and then, and a fire that momentarily goes out looks
   broken - so the floor stays lit and only the tips come and go. */
@keyframes flameRise {
  0%   { transform: translateY(18%)  scale(1.05, .52) skewX(0deg);  opacity: .45; }
  22%  { opacity: 1; }
  62%  { transform: translateY(-16%) scale(.86, 1.06) skewX(-4deg); opacity: .95; }
  82%  { opacity: .8; }
  100% { transform: translateY(-46%) scale(.44, 1.36) skewX(5deg);  opacity: .38; }
}
@keyframes emberBreathe {
  0%, 100% { transform: scaleY(1)    scaleX(1);    opacity: .85; }
  50%      { transform: scaleY(1.18) scaleX(1.03); opacity: 1; }
}

/* A host-supplied animation replaces the vector flame outright: same slot,
   same anchoring, no filter - their file already looks how they want. */
.pb-fire-media {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.5em);
  transform: translateX(-50%);
  width: 150%;
  height: auto;
  max-height: 3.4em;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

/* Someone can lead AND be on a streak. The crown stays exactly where it sits
   on any other leader - lifting it clear of the flames left it floating in
   space, detached from the plate it belongs to. It just gets licked by fire
   now, which is the point. Kept above in z-order so it stays readable. */
.pb-player.leader.hot .pb-crown { z-index: 4; }

/* Eight looping fires on a big TV is a lot of movement. Hold them still. */
@media (prefers-reduced-motion: reduce) {
  .pf-layer i,
  .pb-fire::before { animation: none; opacity: .85; }
  .pf-layer i { transform: translateY(-16%) scale(.8, 1.05); }
}

@keyframes hotPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 10px rgba(255,110,40,.35); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 26px rgba(255,110,40,.7); }
}

/* The run length, as a plain number on a hot chip. */
.pb-streak {
  position: relative;
  z-index: 2;
  background: #ff7a3d;
  color: #2a1000;
  border-radius: 999px;
  padding: .05em .55em;
  font-size: .8em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* Disconnected. Dimmed and struck through, but still listed - they are coming
   back, and their score still counts. */
.pb-player.away {
  opacity: .38;
  border-style: dashed;
  animation: none;
  background: var(--surface);
}
.pb-player.away .pb-name { text-decoration: line-through; }
.pb-player.away .pb-crown { filter: grayscale(1); animation: none; }
.pb-player.away .pb-fire,
.pb-player.away .pb-fire-media { display: none; }
.pb-player.away .pb-streak { background: var(--line); color: var(--muted); }

/* ---- end game -------------------------------------------------------------
   Top right, out of the way, but reachable without hunting. */
.end-game {
  position: fixed;
  top: 1.6vh;
  right: 1.6vw;
  z-index: var(--z-overlay);
  background: transparent;
  border: 2px solid rgba(226, 69, 47,.35);
  color: var(--pink);
  font-family: inherit;
  font-weight: 800;
  letter-spacing: .14em;
  font-size: clamp(.62rem, .85vw, .85rem);
  padding: .55em 1.2em;
  border-radius: 999px;
  cursor: pointer;
  opacity: .45;
  transition: opacity .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.end-game:hover {
  opacity: 1;
  border-color: var(--pink);
  background: rgba(226, 69, 47,.12);
}

/* Lobby: the host is labelled, not crowned - the crown means "winning". */
.host-tag {
  background: var(--gold);
  color: #3a2c00;
  border-radius: 999px;
  padding: .1em .6em;
  font-size: .6em;
  font-weight: 900;
  letter-spacing: .12em;
}

/* Water round reveal: no punishment furniture. */
.punish-list li.none.water {
  border-left-color: var(--blue);
  color: var(--blue);
}

/* Lobby round-count readout, replacing the old dropdown. */
.rounds-note {
  color: var(--muted);
  font-size: clamp(.7rem, 1vw, .95rem);
  letter-spacing: .18em;
  font-weight: 800;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: .7em 1.2em;
  white-space: nowrap;
}

@media (max-height: 820px) {
  :root { --bar-h: clamp(42px, 6vh, 62px); }
  .player-bar { padding: .8vh 1.5vw; }
}