/* ExitGaming — Painel de bosses (CAÓTICO + EPIC + CERCO). Usa as variáveis do style.css.
   Prefixo bb- pra não colidir com pts.css / style.css. Versão compacta (cards menores). */

.bb-body { background: var(--c-black); color: var(--c-ice); font-family: var(--f-body); }

.bb-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: calc(var(--nav-h, 72px) + 24px) var(--gutter, 24px) 60px;
}

/* ---- cabeçalho ---- */
.bb-head { text-align: center; margin-bottom: 20px; }
.bb-head__eyebrow {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-blood); margin-bottom: 8px;
}
.bb-head__title {
  font-family: var(--f-display); font-weight: 900; line-height: 1.05;
  font-size: clamp(1.8rem, 5.5vw, 2.8rem); letter-spacing: .02em;
  color: var(--c-ice); text-shadow: 0 2px 30px rgba(179, 0, 0, .35);
}
.bb-head__sub { color: var(--c-gray); font-size: .98rem; margin-top: 6px; }
.bb-head__sub strong { color: var(--c-ember); font-weight: 400; }

/* ---- relógios ---- */
.bb-clocks {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin: 18px auto 30px; max-width: 680px;
}
.bb-clock {
  flex: 1 1 220px; background: linear-gradient(180deg, var(--c-coal-light), var(--c-coal));
  border: 1px solid var(--c-gray-dark); border-radius: 10px; padding: 11px 16px; text-align: center;
}
.bb-clock__label {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--c-gray); margin-bottom: 5px;
}
.bb-clock__time { font-family: var(--f-mono); font-size: 1.2rem; font-weight: 700; color: var(--c-ice); }
.bb-clock--server .bb-clock__time { color: var(--c-ember); }

/* ---- seções + grid ---- */
.bb-section { margin-bottom: 36px; }
.bb-section__title {
  font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-ice); margin-bottom: 14px;
  padding-bottom: 9px; border-bottom: 1px solid var(--c-gray-dark);
  display: flex; align-items: center; gap: 10px;
}
.bb-section__title::before { content: "⚔"; color: var(--c-blood); font-size: 1.05em; }

.bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 13px; }
.bb-empty { color: var(--c-gray); font-style: italic; padding: 8px 2px; }

/* ---- card ---- */
.bb-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--c-coal-light), var(--c-coal));
  border: 1px solid var(--c-gray-dark); border-radius: 11px; padding: 12px 13px 11px;
  transition: border-color var(--t-fast, .24s) var(--ease, ease), transform var(--t-fast, .24s) var(--ease, ease);
}
.bb-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--c-blood), var(--c-deep));
}
.bb-card--siege::before { background: linear-gradient(180deg, var(--c-ember), var(--c-blood)); }
.bb-card:hover { border-color: var(--c-blood); transform: translateY(-2px); }

.bb-card__head { margin-bottom: 7px; }
.bb-card__name {
  font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; color: var(--c-ice);
  letter-spacing: .01em; line-height: 1.1;
}
.bb-card__meta { font-family: var(--f-mono); font-size: .68rem; color: var(--c-gray); margin-top: 2px; letter-spacing: .03em; }

.bb-card__statusrow { margin-bottom: 6px; }
.bb-badge {
  display: inline-block; font-family: var(--f-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  border: 1px solid currentColor;
}
.bb-badge--wait { color: var(--c-gray); }
.bb-badge--live { color: var(--c-ember); box-shadow: 0 0 14px rgba(255, 69, 0, .35); animation: bb-pulse 1.8s ease-in-out infinite; }
.bb-badge--late { color: var(--c-blood); }
.bb-badge--idle { color: var(--c-gray-dark); }
@keyframes bb-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .bb-badge--live { animation: none; } }

.bb-card__timer { display: flex; flex-direction: column; margin: 4px 0 9px; }
.bb-card__timer-label {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--c-gray);
}
.bb-card__timer-value {
  font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.4rem, 4vw, 1.85rem);
  color: var(--c-ember); line-height: 1.05; text-shadow: 0 2px 18px rgba(255, 69, 0, .28);
  font-variant-numeric: tabular-nums;
}

.bb-card__windows { display: grid; gap: 4px; margin: 0 0 3px; }
.bb-card__windows > div { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bb-card__windows dt { font-family: var(--f-mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gray); }
.bb-card__windows dd { font-family: var(--f-mono); font-size: .74rem; color: var(--c-ice); text-align: right; }

.bb-card__owners { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--c-gray-dark); display: grid; gap: 4px; }
.bb-card__owners li { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; }
.bb-owner__castle { font-family: var(--f-display); color: var(--c-ice); font-weight: 600; }
.bb-owner__clan { font-family: var(--f-mono); font-size: .68rem; color: var(--c-gray); text-align: right; }

.bb-card__hint {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--c-gray-dark);
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .05em; color: var(--c-gray);
}
.bb-card__next { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 2px; }
.bb-card__next li { display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-mono); font-size: .68rem; color: var(--c-gray); }
.bb-card__next .bb-next__l { color: var(--c-gray-dark); }

/* ---- rodapé meta ---- */
.bb-meta { margin-top: 24px; text-align: center; }
.bb-meta__upd { font-family: var(--f-mono); font-size: .66rem; color: var(--c-gray-dark); }
.bb-meta__upd--stale { color: var(--c-blood); }

/* ---- fallback sem JS ---- */
.bb-fallback { max-width: 760px; margin: 0 auto; }
.bb-fallback ul { list-style: none; padding: 0; }
.bb-fallback li { padding: 9px 0; border-bottom: 1px solid var(--c-gray-dark); font-family: var(--f-mono); font-size: .82rem; }
.bb-fallback .bb-fb__name { color: var(--c-ember); font-weight: 700; }

/* ---- link do topo/rodapé ---- */
.bb-nav-note { text-align: center; margin-top: 16px; }
.bb-nav-note a { color: var(--c-gray); font-family: var(--f-mono); font-size: .74rem; text-decoration: none; }
.bb-nav-note a:hover { color: var(--c-ember); }

@media (max-width: 560px) {
  .bb-grid { grid-template-columns: 1fr; }
  .bb-clocks { flex-direction: column; }
  .bb-clock { flex: 0 0 auto; }   /* em coluna o flex-basis viraria ALTURA → cards gigantes */
}