/* ==========================================================================
   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; }

.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(235,201,90,.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;
}

/* Flames licking up from BEHIND the plate. Negative z-index puts them under
   the chip's own background, so only the tongues that rise above the top
   edge are visible. */
.pb-flames {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 30%;
  width: 124%;
  height: 2.7em;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}
.pb-flame {
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
}
.pb-flame.f1 { fill: #ff4d1c; opacity: .95; animation: lick1 .9s ease-in-out infinite; }
.pb-flame.f2 { fill: #ff9a2e; opacity: .9;  animation: lick2 1.15s ease-in-out infinite; }
.pb-flame.f3 { fill: #ffd75e; opacity: .8;  animation: lick3 .75s ease-in-out infinite; }

/* Offset periods and scales so the motion never looks like a loop. */
@keyframes lick1 {
  0%, 100% { transform: scaleY(1)    translateY(0); }
  50%      { transform: scaleY(1.35) translateY(-3px); }
}
@keyframes lick2 {
  0%, 100% { transform: scaleY(1.15) translateY(-1px) scaleX(1.02); }
  50%      { transform: scaleY(.85)  translateY(2px)  scaleX(.98); }
}
@keyframes lick3 {
  0%, 100% { transform: scaleY(.8)  translateY(3px); }
  50%      { transform: scaleY(1.2) translateY(-2px); }
}

@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-flames { 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(234,88,125,.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(234,88,125,.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; }
}