body {
  background: #1a1a2e;
  background-image: radial-gradient(ellipse at 20% 50%, #16213e 0%, #0f0f1a 100%);
  color: #fff;
  min-height: 100vh;
}

.navbar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.card-header {
  font-weight: 600;
}

a {
  color: #7ec8e3;
}
a:hover {
  color: #a8e6ff;
}

.btn-primary {
  background: #7c3aed;
  border-color: #7c3aed;
}
.btn-primary:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}

.table > :not(caption) > * > * {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.02);
}

.nav-pills .nav-link.active {
  background: #7c3aed;
}

.nav-tabs .nav-link {
  color: #8b93a7;
  border: 1px solid transparent;
}
.nav-tabs .nav-link:hover {
  color: #a8e6ff;
  border-color: #343a4a #343a4a transparent;
}
.nav-tabs .nav-link.active {
  color: #fff;
  background: #212633;
  border-color: #343a4a #343a4a transparent;
}
.nav-tabs .nav-link i {
  margin-right: 0.3rem;
}

.ficha-hero {
  border: 1px solid #343a4a;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #1b2030 0%, #14171f 100%);
}

.stat-plate {
  background: #171b26;
  border: 1px solid #343a4a;
  border-top: 3px solid #495057;
  border-radius: 0.6rem;
  padding: 0.8rem 0.5rem 0.7rem;
  text-align: center;
  height: 100%;
}
.stat-plate .stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}
.stat-plate .stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b93a7;
  margin-top: 0.25rem;
}
.stat-force { border-top-color: #e03131; }
.stat-const { border-top-color: #2f9e44; }
.stat-dest  { border-top-color: #1971c2; }
.stat-int   { border-top-color: #0c8599; }
.stat-sab   { border-top-color: #f08c00; }
.stat-car   { border-top-color: #e64980; }

.stat-oval {
  background: #171b26;
  border: 2px solid #343a4a;
  border-top: 3px solid #495057;
  border-radius: 50%;
  width: 130px;
  height: 170px;
  padding: 1rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.stat-oval .stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b93a7;
  font-weight: 700;
}
.stat-oval .stat-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 0.15rem;
}
.stat-oval .stat-total {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  margin-top: 0.35rem;
}

.tab-empty {
  color: #6c757d;
  font-style: italic;
  padding: 1rem 0;
}

.live-search {
  position: relative;
  max-width: 24rem;
}
.live-search .search-icon {
  position: absolute;
  top: 0.72rem;
  left: 0.9rem;
  color: #8b93a7;
  z-index: 5;
  pointer-events: none;
}
.live-search input {
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}
.live-search input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25);
}
.live-search .search-clear {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  color: #8b93a7;
  z-index: 5;
}
.live-search .search-clear:hover {
  color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1a1a2e;
}
::-webkit-scrollbar-thumb {
  background: #334;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #445;
}

/* ------------------------------------------------------------------ */
/* Componente: Pontos de Vida — barra FF (assets base)               */
/* Inspiração Final Fantasy VII: track escuro com bevel, fill com   */
/* gradiente + gloss + ticks a cada 25%, valores com text-shadow.   */
/* ------------------------------------------------------------------ */
.ff-pv {
  --ff-pv-track-bg: #0b162c;
  --ff-pv-track-border: #1e3a5f;
  --ff-pv-track-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
  --ff-pv-label-color: #8fb8ff;
  --ff-pv-values-color: #e6edf3;
  --ff-pv-percent-bg: rgba(255,255,255,.08);
  --ff-pv-percent-color: #c9d1d9;
  --ff-pv-alert-critical: #ff6b6b;
  --ff-pv-alert-low: #ffd166;
}
.ff-pv__header {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .35rem;
  flex-wrap: wrap;
}
.ff-pv__label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ff-pv-label-color);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.ff-pv__label i { color: #ef4444; filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
.ff-pv__values {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ff-pv-values-color);
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
  letter-spacing: .02em;
}
.ff-pv__values strong { font-size: 1.05rem; }
.ff-pv__sep { opacity: .6; margin: 0 .15rem; }
.ff-pv__percent {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ff-pv-percent-color);
  background: var(--ff-pv-percent-bg);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .1rem .45rem;
  line-height: 1.2;
}
.ff-pv__track {
  position: relative;
  height: 18px;
  background: var(--ff-pv-track-bg);
  border: 1px solid var(--ff-pv-track-border);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--ff-pv-track-shadow);
}
.ff-pv__track--compacto { height: 12px; border-radius: 999px; }
.ff-pv__fill {
  position: absolute;
  inset: 1px auto 1px 1px;
  border-radius: 2px;
  transition: width .45s cubic-bezier(.22,.8,.3,1), filter .3s;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.25);
}
.ff-pv__track--compacto .ff-pv__fill { inset: 1px auto 1px 1px; border-radius: 999px; }
.ff-pv__shine {
  position: absolute;
  inset: 0 0 55% 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.34), rgba(255,255,255,0));
  pointer-events: none;
}
.ff-pv__gloss {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 62%);
  opacity: .22;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.ff-pv__ticks {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}
.ff-pv__ticks span {
  flex: 1 1 0;
  border-right: 1px solid rgba(255,255,255,.08);
}
.ff-pv__ticks span:last-child { border-right: none; }
.ff-pv__alert {
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ff-pv-alert-critical);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  animation: ff-pv-pulse 1.1s ease-in-out infinite alternate;
}
.ff-pv__alert--baixo { color: var(--ff-pv-alert-low); animation: none; }
@keyframes ff-pv-pulse { from { opacity: .8 } to { opacity: 1; filter: brightness(1.15); } }

/* Estados — gradientes inspirados em FF7 (HP/MP/Limit) */
.ff-pv--cheio .ff-pv__fill { background: linear-gradient(90deg,#0e7490 0%,#06b6d4 35%,#22d3ee 68%,#a5f3fc 100%); }
.ff-pv--medio .ff-pv__fill { background: linear-gradient(90deg,#0e7490 0%,#0891b2 40%,#06b6d4 100%); filter: saturate(.95); }
.ff-pv--baixo .ff-pv__fill { background: linear-gradient(90deg,#b45309 0%,#f59e0b 38%,#fcd34d 74%,#fde68a 100%); }
.ff-pv--critico .ff-pv__fill { background: linear-gradient(90deg,#991b1b 0%,#dc2626 34%,#ef4444 66%,#fca5a5 100%); box-shadow: 0 0 8px rgba(239,68,68,.5), inset 0 1px 0 rgba(255,255,255,.32); animation: ff-pv-fill-pulse .9s ease-in-out infinite alternate; }
.ff-pv--zero .ff-pv__fill { background: linear-gradient(90deg,#334155 0%,#475569 100%); width: 0 !important; }
.ff-pv--vazio .ff-pv__fill { background: linear-gradient(90deg,#334155 0%,#475569 100%); }
@keyframes ff-pv-fill-pulse { from { filter: brightness(1) } to { filter: brightness(1.22); } }

.ff-pv--compacto { display: flex; align-items: center; gap: .5rem; }
.ff-pv--compacto .ff-pv__track { flex: 1 1 auto; min-width: 90px; }
.ff-pv__values--compacto { font-size: .85rem; white-space: nowrap; }
.ff-pv--edicao .ff-pv__label { cursor: pointer; }
.ff-pv__input:focus { border-color: var(--ff-pv-track-border); box-shadow: 0 0 0 .15rem rgba(59,130,246,.25); }
.ff-pv--interactive { cursor: pointer; transition: filter .15s, transform .1s; }
.ff-pv--interactive:hover { filter: brightness(1.08); }
.ff-pv--interactive:active { transform: scale(.98); }
.ff-pv--interactive:focus-visible { outline: 2px solid var(--ff-pv-track-border); outline-offset: 2px; border-radius: 4px; }

/* ==================================================================
   Barra de status do LongPolling de GameEvents (game-events.js)
   ================================================================== */
.game-events-status {
    position: fixed;
    left: 50%;
    bottom: .6rem;
    transform: translateX(-50%);
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: calc(100vw - 1.5rem);
    padding: .3rem .7rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(15, 23, 42, .82);
    backdrop-filter: blur(3px);
    color: rgba(255, 255, 255, .88);
    font-size: .72rem;
    line-height: 1.1;
    letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    pointer-events: none;
    user-select: none;
    opacity: .85;
    transition: opacity .2s, border-color .2s, background .2s;
}

.game-events-status__dot {
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #64748b;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
}

.game-events-status__label { font-weight: 600; white-space: nowrap; }
.game-events-status__meta { opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-events-status__meta:empty { display: none; }

.game-events-status--polling { border-color: rgba(59, 130, 246, .55); }
.game-events-status--polling .game-events-status__dot {
    background: #3b82f6;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, .6);
    animation: game-events-pulse 1.4s ease-in-out infinite;
}

.game-events-status--active { border-color: rgba(34, 197, 94, .7); opacity: 1; }
.game-events-status--active .game-events-status__dot { background: #22c55e; }

.game-events-status--idle { border-color: rgba(34, 197, 94, .45); }
.game-events-status--idle .game-events-status__dot {
    background: #22c55e;
    animation: game-events-pulse 3s ease-in-out infinite;
}

.game-events-status--error { border-color: rgba(239, 68, 68, .7); opacity: 1; }
.game-events-status--error .game-events-status__dot {
    background: #ef4444;
    animation: game-events-blink .7s steps(2, start) infinite;
}

@keyframes game-events-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
    70%  { box-shadow: 0 0 0 .4rem rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes game-events-blink {
    from { opacity: 1; }
    to   { opacity: .25; }
}

/* Data/hora do jogo (lado direito da barra de status) */
.game-events-status__date {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .6rem;
    padding-left: .6rem;
    border-left: 1px solid rgba(255, 255, 255, .2);
    white-space: nowrap;
    font-weight: 500;
}

.game-events-status__date i { opacity: .75; font-size: .72em; }
.game-events-status__date:empty { display: none; }
.game-events-status__time {
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    opacity: .85;
}

@media (max-width: 640px) {
    .game-events-status .game-events-status__meta { display: none; }
    .game-events-status__date { font-size: .95em; }
}

/* Contador até a próxima checagem: relógio que se enche + segundos */
.game-events-status__countdown {
    --ge-angle: -90deg;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .55rem;
    padding-left: .55rem;
    border-left: 1px solid rgba(255, 255, 255, .2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    opacity: .85;
}

.game-events-status__countdown svg {
    display: block;
    width: 14px;
    height: 14px;
    overflow: visible;
}

/* O preenchimento é desenhado via conic-gradient no CSS, não no SVG: começa
   vazio às 12h e varre no sentido horário conforme o intervalo decorre. */
.game-events-status__clock-face {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    opacity: .55;
}

.game-events-status__clock-fill {
    fill: none;
    stroke: none;
}

.game-events-status__clock-hand {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    transform-origin: 12px 12px;
    transform: rotate(var(--ge-angle));
}

.game-events-status__clock-hub {
    fill: currentColor;
    opacity: .9;
}

.game-events-status__seconds {
    min-width: 2.1ch;
    text-align: right;
    font-weight: 600;
}

@media (max-width: 640px) {
    .game-events-status__seconds { display: none; }
}

/* ------------------------------------------------------------------ */
/* Inventário por personagem: identificação visual de equipáveis      */
/* ------------------------------------------------------------------ */
.inv-equipavel {
  border: 1px solid rgba(240, 192, 0, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(240, 192, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
}
.inv-equipado {
  border: 1px solid rgba(47, 158, 68, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(47, 158, 68, 0.35), 0 2px 10px rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, rgba(47, 158, 68, 0.12), transparent 60%);
}