/* ============================================================
   8 Ball Pool style — TOP PLAYERS BAR (HUD over canvas)
   Mobile-first. Dark premium + esmeralda (#2bd47d) + dourado.
   All data here is FAKE placeholder — plug into cassino later.
   ============================================================ */

:root {
  --pb-emerald: #2bd47d;
  --pb-emerald-dim: #1f8a4c;
  --pb-gold-1: #f5d76e;
  --pb-gold-2: #d4af37;
  --pb-gold-3: #8a6d1f;
  --pb-bg: rgba(13, 27, 42, 0.62);
  --pb-bg-solid: #0d1b2a;
  --pb-stroke: rgba(255, 255, 255, 0.08);
  --pb-avatar: clamp(38px, 11vw, 56px);
  --pb-ring: 3px;
}

/* Wrapper pinned to the very top of the 3D view, above the canvas */
#playersBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: max(6px, env(safe-area-inset-top)) 8px 0;
  pointer-events: none; /* never block the shot; children re-enable */
  box-sizing: border-box;
  font-family: var(--font-family-primary, "Segoe UI", system-ui, sans-serif);
  -webkit-user-select: none;
  user-select: none;
}

#playersBar * {
  box-sizing: border-box;
}

/* ---- Each player card (avatar + name + ball rack) ---- */
.pb-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 42%;
  pointer-events: auto;
}

.pb-player.pb-right {
  flex-direction: row-reverse;
}

/* The whole card gets a subtle pill behind it for legibility on the felt */
.pb-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pb-bg);
  border: 1px solid var(--pb-stroke);
  border-radius: 40px;
  padding: 4px 12px 4px 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  min-width: 0;
}

.pb-right .pb-card {
  flex-direction: row-reverse;
  padding: 4px 4px 4px 12px;
}

/* ---- Avatar with golden frame ---- */
.pb-avatar-wrap {
  position: relative;
  width: var(--pb-avatar);
  height: var(--pb-avatar);
  flex: 0 0 auto;
}

.pb-avatar {
  position: absolute;
  inset: var(--pb-ring);
  border-radius: 50%;
  background: linear-gradient(135deg, #243b55 0%, #0d1b2a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 800;
  font-size: clamp(13px, 4vw, 18px);
  color: #fff;
  letter-spacing: 0.5px;
  /* golden frame */
  border: 2px solid transparent;
  background-image:
    linear-gradient(135deg, #243b55 0%, #0d1b2a 100%),
    linear-gradient(135deg, var(--pb-gold-1), var(--pb-gold-2), var(--pb-gold-3));
  background-origin: border-box;
  background-clip: content-box, border-box;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.pb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* active player: avatar glows emerald, inactive dims */
.pb-player.is-active .pb-avatar {
  box-shadow: 0 0 0 2px rgba(43, 212, 125, 0.5), 0 0 14px rgba(43, 212, 125, 0.5);
}
.pb-player:not(.is-active) {
  opacity: 0.72;
}

/* ---- Name + ball rack column ---- */
.pb-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pb-right .pb-info {
  align-items: flex-end;
}

.pb-name {
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30vw;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ---- Ball rack: 7 mini balls per player ---- */
.pb-rack {
  display: flex;
  gap: 3px;
}

.pb-right .pb-rack {
  flex-direction: row-reverse;
}

.pb-ball {
  width: clamp(9px, 2.6vw, 13px);
  height: clamp(9px, 2.6vw, 13px);
  border-radius: 50%;
  box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.45),
    inset 1px 1px 2px rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.4);
  position: relative;
}

/* SOLID balls (player 1 example: yellow group) */
.pb-ball.solid { background: radial-gradient(circle at 35% 30%, #ffe066, #f2b705 70%, #b8860b 100%); }

/* STRIPED balls (player 2 example) */
.pb-ball.stripe {
  background: radial-gradient(circle at 35% 30%, #fff, #eee 60%, #ccc 100%);
}
.pb-ball.stripe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    transparent 28%,
    #e23b3b 28%,
    #e23b3b 72%,
    transparent 72%
  );
}

/* a potted (encaçapada) ball is faded out */
.pb-ball.potted {
  opacity: 0.18;
  filter: grayscale(1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: #1a2733;
}
.pb-ball.potted::after { display: none; }

/* ---- Center BET badge ---- */
.pb-bet {
  pointer-events: auto;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(13, 27, 42, 0.92), rgba(6, 14, 22, 0.92));
  border: 1.5px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
}

/* golden/emerald glowing border for the bet badge */
.pb-bet::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--pb-gold-1), var(--pb-emerald), var(--pb-gold-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.pb-bet-icon {
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(245, 215, 110, 0.6));
}

.pb-bet-amount {
  font-size: clamp(13px, 3.8vw, 17px);
  font-weight: 800;
  color: var(--pb-gold-1);
  letter-spacing: 0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

/* "Entrada: R$ X cada" — linha menor sob o valor do prêmio */
.pb-bet-entry {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.2px;
  margin-top: 1px;
  white-space: nowrap;
  text-align: center;
  display: block;
}

.pb-bet-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
  display: block;
  text-align: center;
}

.pb-bet-col { display: flex; flex-direction: column; align-items: center; }

/* ---- Landscape phones: tighten everything, push to edges ---- */
@media (orientation: landscape) and (max-height: 480px) {
  :root { --pb-avatar: clamp(34px, 9vh, 46px); }
  #playersBar { padding-top: max(4px, env(safe-area-inset-top)); }
  .pb-name { max-width: 22vw; }
  .pb-bet { padding: 4px 12px; }
}

/* ---- Very narrow portrait: hide names if rack would collide ---- */
@media (orientation: portrait) and (max-width: 360px) {
  .pb-name { max-width: 20vw; font-size: 11px; }
  .pb-card { padding: 3px 8px 3px 3px; }
  .pb-right .pb-card { padding: 3px 3px 3px 8px; }
}

/* ============================================================
   MOBILE PORTRAIT — organização do HUD de topo (sinuca.blackia.tech)
   Celular em pé (~390px). Evita colisão entre player cards, badge
   de aposta, botão fullscreen e o overlay nativo "Anon 👥".
   Não afeta desktop (largura > 500px) nem landscape.
   ============================================================ */
@media (max-width: 500px), (orientation: portrait) and (max-width: 820px) {
  :root { --pb-avatar: clamp(34px, 9.5vw, 44px); }

  /* players bar mais enxuta, colada no topo respeitando o notch */
  #playersBar {
    gap: 4px;
    padding: max(5px, env(safe-area-inset-top)) 6px 0;
    align-items: flex-start;
  }

  /* cada card ocupa no máximo ~38% pra sobrar centro pro badge */
  .pb-player { max-width: 38%; gap: 5px; }
  .pb-card { padding: 3px 9px 3px 3px; gap: 6px; border-radius: 34px; }
  .pb-right .pb-card { padding: 3px 3px 3px 9px; }

  /* nome menor e elipse mais curta pra nunca empurrar o rack/aposta */
  .pb-name { font-size: 11.5px; max-width: 24vw; }

  /* rack de bolas ligeiramente menor */
  .pb-ball { width: clamp(8px, 2.4vw, 11px); height: clamp(8px, 2.4vw, 11px); }

  /* badge de aposta central compacto e sempre no eixo central */
  .pb-bet { padding: 4px 10px; gap: 4px; }
  .pb-bet-amount { font-size: 13px; }
  .pb-bet-icon { font-size: 13px; }
  .pb-bet-label { font-size: 8px; letter-spacing: 0.6px; }
}

/* Portrait MUITO estreito (~360px): segura nomes e badge */
@media (orientation: portrait) and (max-width: 380px) {
  .pb-name { max-width: 19vw; font-size: 10.5px; }
  .pb-bet { padding: 3px 8px; }
  .pb-bet-amount { font-size: 12px; }
}

/* ============================================================
   INDICADOR DE TURNO — pill "SUA VEZ" + dica de regra.
   Centralizado horizontalmente, logo abaixo da players bar.
   Estático por ora (engine pluga depois). pointer-events:none
   pra nunca bloquear o toque na mesa.
   ============================================================ */
#turnIndicator {
  position: absolute;
  top: clamp(64px, 17vw, 96px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  text-align: center;
  width: max-content;
  max-width: 92vw;
  font-family: var(--font-family-primary, "Segoe UI", system-ui, sans-serif);
  -webkit-user-select: none;
  user-select: none;
}

.ti-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(43, 212, 125, 0.22), rgba(31, 138, 76, 0.22));
  border: 1px solid rgba(43, 212, 125, 0.55);
  color: #eafff3;
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(43, 212, 125, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ti-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pb-emerald);
  box-shadow: 0 0 8px rgba(43, 212, 125, 0.9);
  animation: tiPulse 1.4s ease-in-out infinite;
}

@keyframes tiPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.ti-hint {
  font-size: clamp(10px, 2.8vw, 12.5px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  line-height: 1.25;
  padding: 0 8px;
}

/* mobile retrato: sobe um pouco e encolhe a dica */
@media (max-width: 500px), (orientation: portrait) and (max-width: 820px) {
  #turnIndicator { top: clamp(56px, 16vw, 84px); gap: 4px; }
  .ti-pill { padding: 5px 13px; }
  .ti-hint { font-size: 10.5px; max-width: 80vw; }
}

/* landscape baixinho: cola mais no topo, dica menor */
@media (orientation: landscape) and (max-height: 480px) {
  #turnIndicator { top: clamp(50px, 12vh, 70px); }
  .ti-hint { font-size: 10px; }
}

/* ============================================================
   INDICADOR DE GRUPO — estado "mesa aberta" (antes da definição
   lisas × listradas). O JS (groupindicator.ts) troca este selo
   pelas 7 bolinhas do grupo quando o servidor/regra define.
   ============================================================ */
.pb-rack .pb-open {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.4;
  white-space: nowrap;
}

@media (max-width: 500px), (orientation: portrait) and (max-width: 820px) {
  .pb-rack .pb-open { font-size: 8px; padding: 1px 6px; }
}