/* beberest.css — Fase B (data live) + Fase C (reskin BeBeRest). */

/* Font prototype v3 (lokal, dari zip spec — bukan CDN). */
@font-face {
  font-family: 'Baloo 2';
  src: url('assets/fonts/Baloo2-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('assets/fonts/Nunito-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-display: swap;
}
#brand strong, #floorTitle, .crew-panel h2, .crew-panel h3 {
  font-family: 'Baloo 2', Archivo, system-ui, sans-serif;
}

/* Panel Core Crew (roster) — komponen HUD terpenting brief §3d.
   Menempati kanan atas (bekas posisi log); log digeser ke kanan bawah
   dan disembunyikan sementara panel info agen terbuka. */
.crew-panel {
  position: fixed; right: 24px; top: 146px; width: 304px; z-index: 6;
  max-height: calc(100dvh - 166px); overflow-y: auto;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; font-family: 'Nunito', Archivo, system-ui, sans-serif;
}
#log { top: auto; bottom: 112px; max-height: 36dvh; }
body:has(#info:not([hidden])) #log { display: none; }

.crew-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.crew-head h2 { margin: 0; font-size: 19px; }
.crew-live { font: 700 11px var(--mono); }
.crew-live.online { color: #2f6b47; }
.crew-live.offline { color: #9a6212; }

.crew-bos {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  background: #fdf6e3; margin-bottom: 8px;
}
.bos-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bos-stat {
  border: 1px solid var(--line); border-radius: 999px; background: var(--sheet);
  padding: 3px 9px; font-size: 11px; color: var(--ink-2);
}
.bos-stat strong { color: var(--ink); font-family: var(--mono); }
.bos-xp { margin-top: 5px; }
.bos-xp-bar { height: 8px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.bos-xp-fill { height: 100%; background: #e8a13a; }
.bos-xp-text { font-size: 10px; color: var(--ink-2); font-family: var(--mono); }

.crew-wing h3 {
  margin: 10px 0 6px; font-size: 13px; letter-spacing: .04em;
  color: var(--ink-2); text-transform: uppercase;
}
.crew-wing.wing-Muse h3 { color: #2f4a6b; }
.crew-wing.wing-hermes h3 { color: #9a6212; }

.crew-card {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px;
  margin-bottom: 6px; background: #fff;
}
.crew-card.status-molor { opacity: .55; }
.crew-card.status-pusing { border-color: #e8a13a; }
.crew-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); flex: none; background: #e9e2d0; }
.crew-avatar.fallback { display: grid; place-items: center; font: 700 13px var(--mono); color: var(--ink); }
.crew-main { min-width: 0; flex: 1; }
.crew-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crew-name { font-weight: 800; font-size: 14px; }
.crew-role { font-size: 11px; color: var(--ink-2); line-height: 1.3; }
.crew-task {
  font-size: 11px; color: var(--ink); line-height: 1.35; margin-top: 2px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.crew-pill {
  font: 700 10px var(--mono); border-radius: 999px; padding: 2px 8px;
  border: 1px solid var(--line); white-space: nowrap; text-transform: capitalize;
}
.pill-working { background: #dbeafe; border-color: #7aa7d9; color: #1d4e89; }
.pill-nganggur { background: #f0ece5; color: #6b6f7b; }
.pill-istirahat { background: #e8f3ec; border-color: #8fc7a4; color: #2f6b47; }
.pill-molor { background: #ece7ea; color: #7a6a72; }
.pill-pusing { background: #fff1d6; border-color: #e8a13a; color: #9a6212; }
.pill-bos { background: #fdeee9; border-color: #e8634a; color: #c24a31; }

@media (max-width: 900px) {
  .crew-panel { width: 252px; top: 120px; max-height: 52dvh; }
  #log { display: none; }
}
.name-label.bb-molor { opacity: .45; }
.name-label.bb-pusing { outline: 2px solid #e8a13a; outline-offset: 1px; }
#beberestOffline {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 80; background: #7a2e2e; color: #fff;
  padding: 6px 14px; border-radius: 999px;
  font: 600 13px Archivo, system-ui, sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
#beberestOffline[hidden] { display: none; }