/* PB Newbie: halaman utama (static/home.js) dan jendela masuk/daftar.
   Desain sendiri: warna lime dari ikon PB Newbie, kartu bulat, tanpa skin jendela PB (win.png/btn.png/tab.png). */
#nh { --lime: #8fe03a; --lime2: #5fb51e; --ink: #0a0d10; --card: #0f151b; --line: #1d2733; --txt: #e7edf3; --mut: #8d99a8;
  position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--ink); color: var(--txt); font: 14px/1.5 "Segoe UI", Roboto, Tahoma, Arial, sans-serif; -webkit-user-select: text; user-select: text; }
#nh *, #nh *::before, #nh *::after { box-sizing: border-box; }
#nh, #nh .nh-body { scrollbar-width: thin; scrollbar-color: #2a3644 transparent; }
#nh::-webkit-scrollbar, #nh ::-webkit-scrollbar { width: 10px; height: 10px; }
#nh::-webkit-scrollbar-track, #nh ::-webkit-scrollbar-track { background: transparent; }
#nh::-webkit-scrollbar-thumb, #nh ::-webkit-scrollbar-thumb { border: 2px solid #0d1218; border-radius: 10px; background: #243140; }
#nh::-webkit-scrollbar-button, #nh ::-webkit-scrollbar-button { display: none; }
body.nh-on #rpBtn { display: none !important; }      /* tombol "Laporkan" pindah ke footer */

/* latar */
#nh .nh-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#nh .nh-bg i { position: absolute; inset: 0; }
#nh .nh-art { left: 30%; background: center/cover no-repeat; opacity: .42; filter: saturate(.75) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
#nh .nh-glow { background: radial-gradient(55% 45% at 12% 0%, rgba(143, 224, 58, .16), transparent 70%),
  radial-gradient(35% 35% at 100% 100%, rgba(143, 224, 58, .08), transparent 70%),
  linear-gradient(180deg, rgba(10, 13, 16, .15), var(--ink) 95%); }
#nh .nh-grid { background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); }

/* header */
#nh .nh-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 18px; padding: 12px clamp(14px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(10, 13, 16, .96), rgba(10, 13, 16, .82)); border-bottom: 1px solid rgba(255, 255, 255, .06); }
#nh .nh-brand { flex: none; display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; cursor: pointer; }
#nh .nh-brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(143, 224, 58, .35), 0 6px 18px rgba(0, 0, 0, .4); }
#nh .nh-brand span { font: 900 18px/1 "Segoe UI", Tahoma, sans-serif; letter-spacing: 2px; white-space: nowrap; }
#nh .nh-brand b { color: var(--lime); }
#nh .nh-nav { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#nh .nh-nav::-webkit-scrollbar { display: none; }
#nh .nh-nav button { flex: none; padding: 8px 15px; border: 0; border-radius: 999px; background: none; color: var(--mut);
  font: 600 14px "Segoe UI", Tahoma, sans-serif; cursor: pointer; transition: color .15s, background .15s; }
#nh .nh-nav button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
#nh .nh-nav button.on { color: #0b1406; background: var(--lime); }
#nh .nh-acc { flex: none; display: flex; align-items: center; gap: 8px; }
#nh .nh-lang { height: 36px; max-width: 170px; padding: 0 10px; border-radius: 10px; border: 1px solid #243140; background: #0d1318; color: #c9d3de; font: 13px "Segoe UI", Tahoma, sans-serif; }
#nh .nh-user { display: flex; align-items: center; gap: 8px; max-width: 200px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
#nh .nh-user i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: #0b1406; font: 900 13px "Segoe UI", Tahoma, sans-serif; }
#nh .nh-user b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }

/* tombol */
#nh .nh-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 20px; border: 0; border-radius: 11px;
  background: linear-gradient(180deg, #a8ee5a, var(--lime) 45%, var(--lime2)); color: #0b1406; font: 800 14px "Segoe UI", Tahoma, sans-serif; letter-spacing: .6px;
  white-space: nowrap; cursor: pointer; box-shadow: 0 8px 22px rgba(143, 224, 58, .22); transition: transform .12s, filter .12s, box-shadow .12s; }
#nh .nh-b:hover { filter: brightness(1.07); transform: translateY(-1px); }
#nh .nh-b:active { filter: brightness(.95); transform: none; }
#nh .nh-b.ghost { background: rgba(255, 255, 255, .04); color: var(--txt); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
#nh .nh-b.ghost:hover { box-shadow: inset 0 0 0 1px var(--lime); color: #fff; }
#nh .nh-b.sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
#nh .nh-b.xl { min-height: 54px; padding: 0 32px; border-radius: 13px; font-size: 16px; }
#nh .nh-b.live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: nhBlink 1.2s infinite; }
#nh .nh-b.wpp { color: #86f0ab; }
@keyframes nhBlink { 50% { opacity: .25; } }
@keyframes nhRing { 0% { box-shadow: 0 0 0 0 rgba(143, 224, 58, .55); } 100% { box-shadow: 0 0 0 9px rgba(143, 224, 58, 0); } }

/* isi utama: hero kiri, panel kanan */
#nh .nh-main { flex: 1 0 auto; display: grid; grid-template-columns: minmax(300px, 500px) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start;
  width: 100%; max-width: 1400px; margin: 0 auto; padding: clamp(18px, 4vh, 44px) clamp(14px, 4vw, 48px) 26px; }
#nh .nh-hero { position: sticky; top: 92px; padding-top: 1vh; }
#nh .nh-eye { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(143, 224, 58, .28);
  background: rgba(143, 224, 58, .09); color: var(--lime); font-size: 13px; font-weight: 600; }
#nh .nh-eye em { font-style: normal; opacity: .5; } #nh .nh-eye b { color: #fff; }
#nh .nh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: nhRing 1.8s infinite; }
#nh .nh-h1 { margin: 18px 0 14px; color: #fff; font: 900 clamp(34px, 4.6vw, 58px)/1.02 "Segoe UI", Tahoma, sans-serif; letter-spacing: -.5px; text-transform: uppercase; }
#nh .nh-h1 em { font-style: normal; color: var(--lime); background: linear-gradient(90deg, var(--lime), #dcff9e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#nh .nh-sub { max-width: 46ch; margin: 0 0 24px; color: #b5c0cc; font-size: 15px; }
#nh .nh-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
#nh .nh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#nh .nh-stats > div { padding: 14px 14px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(15, 21, 27, .88); }
#nh .nh-stats b { display: block; color: #fff; font: 800 26px/1.1 "Segoe UI", Tahoma, sans-serif; }
#nh .nh-stats span { color: var(--mut); font-size: 12px; }
#nh .nh-dev { margin-top: 10px; color: var(--mut); font-size: 12.5px; } #nh .nh-dev b { color: #fff; } #nh .nh-dev em { margin: 0 8px; font-style: normal; opacity: .5; }
#nh .nh-evt { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 196, 0, .3);
  background: linear-gradient(90deg, rgba(255, 196, 0, .14), rgba(255, 196, 0, .03)); color: #ffe08a; font-size: 13px; }
#nh .nh-evt[hidden] { display: none; }
#nh .nh-evt b { flex: none; padding: 2px 8px; border-radius: 6px; background: #ffc400; color: #1a1300; font-size: 11px; text-transform: uppercase; }

#nh .nh-panel { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 116px); overflow: hidden; border-radius: 18px; border: 1px solid var(--line);
  background: rgba(13, 18, 24, .93); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
#nh .nh-ph { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(143, 224, 58, .08), transparent 60%); }
#nh .nh-pt { color: #fff; font: 800 15px "Segoe UI", Tahoma, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
#nh .nh-pt::before { content: ''; display: inline-block; width: 4px; height: 16px; margin-right: 10px; border-radius: 2px; background: var(--lime); vertical-align: -2px; }
#nh .nh-x { display: none; margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .06); color: #ff9a8f; font-size: 15px; cursor: pointer; }
#nh.nh-wide .nh-x { display: block; }
#nh.nh-wide .nh-main { grid-template-columns: minmax(0, 1fr); }
#nh.nh-wide .nh-hero { display: none; }
#nh .nh-body { flex: 1; min-height: 0; margin: 0; padding: 16px 20px 22px; overflow: auto; color: #c9d3de; font: 14px/1.6 "Segoe UI", Tahoma, sans-serif; }

/* konten lama (hm-*) di dalam panel: gaya baru */
#nh .hm-body h1 { margin: 0 0 10px; color: #fff; font: 800 20px/1.3 "Segoe UI", Tahoma, sans-serif; text-shadow: none; }
#nh .hm-body h2, #nh .hm-2col h3, #nh .hm-recruit h3 { margin: 20px 0 8px; color: var(--lime); font: 800 16px "Segoe UI", Tahoma, sans-serif; text-shadow: none; }
#nh .hm-body h3 { color: #fff; font: 700 14px "Segoe UI", Tahoma, sans-serif; }
#nh .hm-body b { color: #fff; } #nh .hm-body a { color: var(--lime); }
#nh .hm-body p { margin: 0 0 10px; }
#nh .pbn-grid { gap: 10px; margin: 12px 0 14px; }
#nh .pbn-grid > div, #nh .hm-dl, #nh .hm-recruit, #nh .hm-modes div, #nh .hm-live { border: 1px solid var(--line); border-image: none; border-radius: 13px; background: #0e141a; padding: 12px 14px; }
#nh .pbn-grid b, #nh .hm-modes b { color: #fff; } #nh .pbn-grid span, #nh .hm-modes span { color: var(--mut); font-size: 12.5px; }
#nh .hm-dl i, #nh .hm-note, #nh .hm-empty { color: var(--mut); }
#nh .hm-recruit { border-color: rgba(255, 196, 0, .3); background: linear-gradient(90deg, rgba(255, 196, 0, .1), transparent); }
#nh .hm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 0; border-image: none; border-radius: 9px;
  background: rgba(255, 255, 255, .06); color: var(--txt); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); font: 700 12.5px "Segoe UI", Tahoma, sans-serif;
  text-shadow: none; filter: none; cursor: pointer; vertical-align: middle; }
#nh .hm-btn:hover { box-shadow: inset 0 0 0 1px var(--lime); color: #fff; filter: none; }
#nh .hm-btn.blue, #nh .hm-btn.big { background: linear-gradient(180deg, #a8ee5a, var(--lime) 45%, var(--lime2)); color: #0b1406; box-shadow: none; text-shadow: none; }
#nh .hm-btn.wpp { color: #86f0ab; } #nh .hm-btn.wpp::before { content: '● '; color: #3fd27a; }
#nh .hm-rank { border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; font-size: 13px; }
#nh .hm-rank th { padding: 9px 6px; border: 0; border-bottom: 1px solid var(--line); background: #131a22; color: var(--mut); font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; text-shadow: none; }
#nh .hm-rank td { padding: 7px 6px; border-bottom: 1px solid #17202a; }
#nh .hm-rank tr:last-child td { border-bottom: 0; }
#nh .hm-rank tr:nth-child(odd) td { background-color: transparent; }
#nh .hm-maps { gap: 8px; }
#nh .hm-maps div { height: 84px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
#nh .hm-maps span { padding: 14px 8px 6px; background: linear-gradient(transparent, #000d); font-size: 11.5px; font-weight: 600; }
#nh .hm-live .lh b { color: #ff6b6b; } #nh .hm-live .li { border-radius: 10px; }
#nh .hm-ref .hm-reflink { border-radius: 8px; border-color: #243140; color: var(--lime); }

/* footer + dock HP */
#nh .nh-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 16px clamp(14px, 4vw, 48px) 22px;
  border-top: 1px solid rgba(255, 255, 255, .05); color: #66727f; font-size: 12px; }
#nh .nh-foot b { color: #9aa6b4; } #nh .nh-foot a { color: #8d99a8; text-decoration: none; cursor: pointer; } #nh .nh-foot a:hover { color: var(--lime); }
#nh .nh-dock { display: none; }

@media (max-width: 900px) {
  #nh .nh-top { flex-wrap: wrap; gap: 10px 12px; padding: 10px 14px 8px; }
  #nh .nh-brand img { width: 34px; height: 34px; } #nh .nh-brand span { font-size: 16px; }
  #nh .nh-acc { margin-left: auto; } #nh .nh-hide-m { display: none; }
  #nh .nh-lang { max-width: 128px; height: 34px; font-size: 12px; }
  #nh .nh-user { max-width: 130px; }
  #nh .nh-nav { order: 3; flex: 1 0 100%; }
  #nh .nh-nav button { padding: 7px 13px; font-size: 13px; }
  #nh .nh-main { grid-template-columns: minmax(0, 1fr); padding: 20px 14px 18px; }
  #nh .nh-hero { position: static; }
  #nh .nh-h1 { font-size: clamp(30px, 9vw, 44px); }
  #nh .nh-sub { font-size: 14px; }
  #nh .nh-cta .nh-b.xl { flex: 1 1 100%; }
  #nh .nh-cta .nh-b.ghost { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 13px; }
  #nh .nh-stats b { font-size: 22px; }
  #nh .nh-panel { max-height: none; overflow: visible; scroll-margin-top: 110px; }
  #nh .nh-body { overflow: visible; padding: 14px 14px 18px; }
  #nh .nh-art { left: 0; opacity: .25; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
  #nh .nh-foot { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  #nh .nh-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; gap: 10px; padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(10, 13, 16, .96) 35%); }
  #nh .nh-dock .nh-b { flex: 1; min-height: 50px; }
  #nh .hm-maps { grid-template-columns: repeat(3, 1fr); }
  #nh .hm-modes { grid-template-columns: 1fr; }
  #nh.nh-wide .nh-main { padding: 10px 6px; }
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #nh .nh-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding-top: 14px; }
  #nh .nh-h1 { margin: 10px 0 8px; font-size: 26px; } #nh .nh-sub { margin-bottom: 12px; font-size: 13px; }
  #nh .nh-cta { margin-bottom: 12px; } #nh .nh-cta .nh-b.xl { flex: 0 1 auto; min-height: 46px; }
  #nh .nh-stats > div { padding: 8px 10px; } #nh .nh-stats b { font-size: 18px; }
  #nh .nh-panel { max-height: calc(100vh - 120px); overflow: hidden; } #nh .nh-body { overflow: auto; }
  #nh .nh-dock { display: none; } #nh .nh-hide-m { display: inline-flex; } #nh .nh-foot { padding-bottom: 18px; }
}

/* jendela masuk / daftar */
#hmLogin { background: rgba(5, 8, 10, .8); }
#hmLogin .box { overflow: hidden; width: min(380px, calc(100vw - 28px)); border: 1px solid #1f2a35 !important; border-radius: 18px !important;
  background: #0f151b !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .6) !important; filter: none; font-family: "Segoe UI", Tahoma, sans-serif; }
#hmLogin .box::before { display: none; }
#hmLogin .hm-cap { height: auto; padding: 20px 22px 2px; background: none; color: #fff; font: 900 20px/1.2 "Segoe UI", Tahoma, sans-serif; letter-spacing: 1px; text-shadow: none; }
#hmLogin .hm-cap::before { content: ''; display: block; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 12px; background: url(/static/icon-192.png) center/cover;
  box-shadow: 0 0 0 1px rgba(143, 224, 58, .35); }
#hmLogin .in { padding: 10px 22px 20px; }
#hmLogin label { color: #8d99a8; font: 600 12px "Segoe UI", Tahoma, sans-serif; letter-spacing: .4px; }
#hmLogin input:not([type=checkbox]) { padding: 11px 12px; border: 1px solid #243140; border-radius: 10px; background: #0a0f14; color: #fff; font-size: 15px; }
#hmLogin input:not([type=checkbox]):focus { border-color: #8fe03a; background: #0a0f14; box-shadow: 0 0 0 3px rgba(143, 224, 58, .18); }
#hmLogin input[type=checkbox] { accent-color: #8fe03a; }
#hmLogin .btns { gap: 10px; }
#hmLogin .hm-btn { min-height: 44px; padding: 0 18px; border: 0; border-image: none; border-radius: 11px; background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); color: #e7edf3; font: 700 13px "Segoe UI", Tahoma, sans-serif; text-shadow: none; filter: none; }
#hmLogin .hm-btn.blue { flex: 1; background: linear-gradient(180deg, #a8ee5a, #8fe03a 45%, #5fb51e); color: #0b1406; box-shadow: none; }
#hmLogin .err { color: #ff8a73; }
#hmLogin .sw a { color: #8fe03a; }

/* ======================================================================
   Halaman login gaya PB (home.js showPB). Art login PB asli tanpa logo POINT BLANK
   (static/home/pbl_bg.jpg dari make_login_bg.py), logo PB Newbie, kotak login gaya client PB,
   tombol Mode LITE yang menonjol. Responsif: PC, HP tegak, HP miring.
   ====================================================================== */
#pbl { --lime: #8fe03a; --gold: #ffd23a; position: fixed; inset: 0; z-index: 5; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #000; color: #e7edf3; font: 14px/1.45 "Segoe UI", Roboto, Tahoma, Arial, sans-serif; }
#pbl *, #pbl *::before, #pbl *::after { box-sizing: border-box; }
body.pbl-on #rpBtn { display: none !important; }

/* latar: art 4:3 selalu menutup layar */
#pbl .pbl-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #000; }
#pbl .pbl-bg i { position: absolute; }
#pbl .pbl-art { left: 50%; top: 50%; width: max(100vw, 133.34vh); height: max(75vw, 100vh); transform: translate(-50%, -50%);
  background: url(/static/home/pbl_bg.jpg) center / 100% 100% no-repeat; }
#pbl .pbl-shade { inset: 0; background: radial-gradient(70% 55% at 50% 38%, transparent 45%, rgba(0, 0, 0, .35) 100%),
  linear-gradient(180deg, rgba(0, 0, 0, .35) 0, transparent 18%, transparent 46%, rgba(0, 0, 0, .7) 78%, rgba(0, 0, 0, .9) 100%); }

/* bar atas */
#pbl .pbl-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
#pbl .pbl-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 32px; padding: 0 12px; border-radius: 999px;
  background: rgba(6, 9, 13, .78); border: 1px solid #33404d; color: #cfd8e2; font-size: 12px; white-space: nowrap; overflow: hidden; }
#pbl .pbl-chip b { color: #fff; }
#pbl .pbl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: pblBlink 1.6s infinite; }
#pbl .nh-lang { flex: none; height: 32px; max-width: 160px; padding: 0 8px; border-radius: 8px; border: 1px solid #33404d; background: rgba(6, 9, 13, .85); color: #dfe7ef; font: 13px "Segoe UI", Tahoma, sans-serif; }

/* kolom tengah */
#pbl .pbl-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: calc(100% - 42px);
  padding: 0 max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
#pbl .pbl-logo { display: flex; flex-direction: column; align-items: center; margin-top: clamp(16px, 11vh, 150px); pointer-events: none; text-align: center; }
#pbl .pbl-logo img { width: clamp(62px, 11vh, 100px); height: auto; aspect-ratio: 1; border-radius: 22%;
  box-shadow: 0 0 0 2px rgba(143, 224, 58, .6), 0 0 44px rgba(143, 224, 58, .45), 0 12px 30px rgba(0, 0, 0, .6); }
#pbl .pbl-logo b { margin-top: 10px; color: #fff; font: 900 clamp(28px, 5.4vh, 46px)/1 "Segoe UI", Tahoma, Arial, sans-serif; letter-spacing: 3px;
  text-shadow: 0 3px 0 #000, 0 0 26px rgba(0, 0, 0, .9); white-space: nowrap; }
#pbl .pbl-logo em { font-style: normal; color: var(--lime); }
#pbl .pbl-login { width: min(360px, 100%); margin-top: clamp(14px, 3.5vh, 34px); }

/* kotak login gaya client PB: form #hmLogin dari client.js dipindah ke sini */
#pbl #hmLogin { display: contents !important; }
#pbl #hmLogin .box, #pbl .pbl-acc { position: relative !important; width: 100% !important; margin: 0 !important; overflow: hidden; filter: none !important;
  border: 2px solid #050608 !important; border-radius: 10px !important; background: linear-gradient(180deg, #23272f, #15181d 55%, #101216) !important;
  box-shadow: inset 0 0 0 1px #3b424d, 0 18px 44px rgba(0, 0, 0, .75) !important; color: #e8ecf0; font: 13px Tahoma, "Segoe UI", sans-serif !important; }
#pbl #hmLogin .box::before { display: none !important; }
#pbl #hmLogin .hm-cap { height: auto !important; margin: 0 !important; padding: 7px 12px !important; border-bottom: 1px solid #050608;
  background: linear-gradient(180deg, #313844, #1c2027) !important; color: #dbe2ea !important; font: 700 12px Tahoma, sans-serif !important;
  letter-spacing: 2px; text-align: center; text-shadow: 0 1px 0 #000 !important; }
#pbl #hmLogin .hm-cap::before { display: none !important; }
#pbl #hmLogin .in { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; margin: 8px;
  padding: 12px 14px 14px !important; border: 1px solid #2e343d; border-radius: 5px; background: linear-gradient(180deg, #1c2027, #14171c); }
#pbl #hmLogin .in > :not(label):not(input) { grid-column: 1 / -1; }
#pbl #hmLogin label { display: block; margin: 0 !important; color: #f2f4f6 !important; font: 700 12px Tahoma, sans-serif !important; letter-spacing: 0; text-align: right; white-space: nowrap; }
#pbl #hmLogin input:not([type=checkbox]) { width: 100% !important; margin: 0 !important; padding: 7px 9px !important; border: 2px solid #2b2e33 !important; border-radius: 4px !important;
  background: #8e9196 !important; color: #fff !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45) !important; font: 14px Tahoma, sans-serif !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
#pbl #hmLogin input:not([type=checkbox]):focus { outline: none; background: #a3a6aa !important; border-color: #4b7fd0 !important; }
#pbl #hmLogin .row { display: flex; align-items: center; gap: 7px; margin: 0 !important; }
#pbl #hmLogin .row label { text-align: left; }
#pbl #hmLogin input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: #4b86d6; }
#pbl #hmLogin #lgTs { display: flex; justify-content: center; margin: 2px 0 !important; overflow: hidden; }
#pbl #hmLogin .err { min-height: 0 !important; margin: 0 !important; color: #ff7a5c !important; font-size: 12px; text-align: center; }
#pbl #hmLogin .err:empty { display: none; }
#pbl #hmLogin .btns { display: flex !important; margin: 2px 0 0 !important; }
#pbl #hmLogin #lgNo { display: none !important; }
#pbl #hmLogin #lgGo, #pbl .pbl-btn.blue { flex: 1; min-height: 42px !important; padding: 0 16px !important; border: 2px solid #07080a !important; border-radius: 6px !important;
  background: linear-gradient(180deg, #5b95e6, #2f63bd 50%, #1d4596) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .5) !important;
  color: #fff !important; font: 700 15px Tahoma, sans-serif !important; letter-spacing: 2px; text-shadow: 0 1px 1px #000 !important; cursor: pointer; }
#pbl #hmLogin #lgGo:hover, #pbl .pbl-btn:hover { filter: brightness(1.12); }
#pbl #hmLogin #lgGo:disabled { filter: grayscale(.6) brightness(.8); cursor: default; }
#pbl #hmLogin .sw { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 !important; color: #aab4c0 !important; font-size: 12px; }
#pbl #hmLogin .sw a, #pbl .pbl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 14px; border: 2px solid #07080a; border-radius: 6px;
  background: linear-gradient(180deg, #6b7078, #40444b 50%, #2c2f35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); color: #fff !important;
  font: 700 12px Tahoma, sans-serif; text-decoration: none !important; text-shadow: 0 1px 1px #000; cursor: pointer; }

/* sudah login: kotak akun */
#pbl .pbl-acc-in { display: grid; gap: 8px; margin: 8px; padding: 14px; border: 1px solid #2e343d; border-radius: 5px; background: linear-gradient(180deg, #1c2027, #14171c); text-align: center; }
#pbl .pbl-acc-in > span { color: #aab4c0; font-size: 12px; }
#pbl .pbl-acc-in > b { overflow: hidden; color: #fff; font: 700 18px Tahoma, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#pbl .pbl-acc .pbl-btn.blue { min-height: 48px !important; font-size: 17px !important; }

/* tombol Mode LITE: kuning berdenyut saat mati, lime saat aktif */
#pbl .pbl-lite { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 10px 12px; border: 2px solid var(--gold); border-radius: 10px;
  background: linear-gradient(180deg, rgba(64, 50, 6, .94), rgba(30, 23, 3, .94)); color: #fff; font: inherit; text-align: left; cursor: pointer;
  animation: pblPulse 1.8s infinite; -webkit-tap-highlight-color: transparent; }
#pbl .pbl-lite:hover { filter: brightness(1.1); }
#pbl .pbl-lite-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: #1b1500;
  font: 900 22px/1 "Segoe UI Emoji", sans-serif; font-style: normal; box-shadow: 0 0 14px rgba(255, 210, 58, .6); }
#pbl .pbl-lite-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#pbl .pbl-lite-tx b { color: var(--gold); font: 900 16px/1.1 "Segoe UI", Tahoma, sans-serif; letter-spacing: 1px; }
#pbl .pbl-lite-tx small { margin-top: 3px; color: #ece4c4; font-size: 12px; line-height: 1.25; }
#pbl .pbl-lite-st { flex: none; padding: 5px 10px; border-radius: 999px; background: #3a3f47; color: #d6dde5; font: 800 11px "Segoe UI", Tahoma, sans-serif; letter-spacing: 1px; }
#pbl .pbl-lite-rec { position: absolute; top: -10px; right: 10px; padding: 2px 9px; border-radius: 999px; background: #ff5a4a; color: #fff;
  font: 800 10px/1.5 "Segoe UI", Tahoma, sans-serif; letter-spacing: .5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
#pbl .pbl-lite.on { border-color: var(--lime); background: linear-gradient(180deg, rgba(26, 52, 10, .94), rgba(12, 26, 4, .94)); animation: none; }
#pbl .pbl-lite.on .pbl-lite-ic { background: var(--lime); box-shadow: 0 0 14px rgba(143, 224, 58, .6); }
#pbl .pbl-lite.on .pbl-lite-tx b { color: var(--lime); }
#pbl .pbl-lite.on .pbl-lite-tx small { color: #d5e8c4; }
#pbl .pbl-lite.on .pbl-lite-st { background: var(--lime); color: #0b1406; }
@keyframes pblPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 58, .6), 0 10px 26px rgba(0, 0, 0, .55); }
  70% { box-shadow: 0 0 0 12px rgba(255, 210, 58, 0), 0 10px 26px rgba(0, 0, 0, .55); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 58, 0), 0 10px 26px rgba(0, 0, 0, .55); } }
@keyframes pblBlink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { #pbl .pbl-lite, #pbl .pbl-dot { animation: none; } }

/* kartu info (event + server): di PC menempel di kiri/kanan bawah, di layar kecil ikut alur */
#pbl .pbl-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(560px, 100%); margin-top: 16px; }
#pbl .pbl-card { flex: 1 1 220px; min-width: 0; padding: 10px 12px; border: 1px solid #33404d; border-radius: 8px; background: rgba(6, 9, 13, .8); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
#pbl .pbl-card[hidden] { display: none; }
#pbl .pbl-card h4 { margin: 0 0 6px; color: var(--lime); font: 800 12px "Segoe UI", Tahoma, sans-serif; letter-spacing: 1px; }
#pbl .pbl-evt span { color: #fff; font-size: 13px; }
#pbl .pbl-st > div { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: #aab4c0; }
#pbl .pbl-st > div b { min-width: 26px; color: #fff; font-size: 14px; }
#pbl .pbl-st .pbl-dev { flex-wrap: wrap; margin-top: 4px; font-size: 11px; }
#pbl .pbl-st .pbl-dev b { min-width: 0; margin-right: 8px; font-size: 12px; }
@media (min-width: 1000px) and (min-height: 700px) {
  #pbl .pbl-info { position: absolute; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); bottom: 92px; width: auto; margin: 0;
    justify-content: space-between; pointer-events: none; }
  #pbl .pbl-card { flex: 0 1 280px; pointer-events: auto; }
  #pbl .pbl-st { margin-left: auto; }
}

/* tautan + footer */
#pbl .pbl-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: auto; padding-top: 18px; }
#pbl .pbl-links button { min-height: 32px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(6, 9, 13, .7);
  color: #dbe3ec; font: 700 13px "Segoe UI", Tahoma, sans-serif; text-shadow: 0 1px 2px #000; cursor: pointer; }
#pbl .pbl-links button:hover { border-color: var(--lime); color: #fff; }
#pbl .pbl-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; margin-top: 8px; color: #8d99a8; font-size: 11px; text-align: center; }
#pbl .pbl-foot a { color: #aab6c3; text-decoration: none; cursor: pointer; }
#pbl .pbl-foot a:hover { color: #fff; }

/* panel tautan (Ranking, Mode dan map, ...) di atas layar */
#pbl .pbl-sheet { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .65); }
#pbl .pbl-sheet[hidden] { display: none; }
#pbl .pbl-sheet-in { display: flex; flex-direction: column; width: min(900px, 100%); max-height: min(88vh, 900px); overflow: hidden; border: 2px solid #050608; border-radius: 10px;
  background: linear-gradient(180deg, #1b1f26, #111317); box-shadow: inset 0 0 0 1px #3b424d, 0 30px 80px rgba(0, 0, 0, .75); }
#pbl .pbl-sheet.wide .pbl-sheet-in { width: min(1200px, 100%); }
#pbl .pbl-sh-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #050608;
  background: linear-gradient(180deg, #313844, #1c2027); }
#pbl .pbl-sh-h b { color: #fff; font: 700 14px Tahoma, sans-serif; letter-spacing: 1px; text-shadow: 0 1px 0 #000; }
#pbl .pbl-x { flex: none; width: 34px; height: 34px; border: 1px solid #050608; border-radius: 6px; background: linear-gradient(180deg, #6b7078, #2c2f35); color: #fff; font-size: 15px; cursor: pointer; }
#pbl .pbl-sh-b { flex: 1; min-height: 0; margin: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px; }

/* HP tegak / layar sempit */
@media (max-width: 600px) {
  #pbl .pbl-chip span:last-child { display: none; }
  #pbl .pbl-logo { margin-top: clamp(14px, 7vh, 60px); }
  #pbl .pbl-sheet { padding: 0; align-items: stretch; }
  #pbl .pbl-sheet-in { width: 100%; max-height: none; border-radius: 0; }
  #pbl .pbl-links button { font-size: 12px; padding: 0 11px; }
}
@media (max-width: 380px) {
  #pbl #hmLogin .in { grid-template-columns: 1fr; gap: 6px; margin: 6px; padding: 10px !important; }
  #pbl #hmLogin label { text-align: left; }
  #pbl #hmLogin #lgTs { transform: scale(.92); transform-origin: center top; }
  #pbl .pbl-lite-tx small { font-size: 11px; }
}
@media (pointer: coarse) {
  #pbl #hmLogin input:not([type=checkbox]) { padding: 9px 10px !important; font-size: 16px !important; }   /* 16px: iPhone tidak zoom */
  #pbl #hmLogin #lgGo, #pbl .pbl-btn.blue { min-height: 46px !important; }
  #pbl .pbl-links button { min-height: 36px; }
}
/* HP miring (tinggi kecil): dua kolom, logo+info di kiri, login+LITE di kanan */
@media (max-height: 520px) and (orientation: landscape) {
  #pbl .pbl-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); grid-template-areas: "logo login" "info login" "links links" "foot foot";
    align-content: start; align-items: start; column-gap: 22px; row-gap: 8px; max-width: 900px; margin: 0 auto; padding-top: 6px; }
  #pbl .pbl-logo { grid-area: logo; flex-direction: row; gap: 12px; justify-self: center; margin-top: 8px; }
  #pbl .pbl-logo img { width: 54px; }
  #pbl .pbl-logo b { margin: 0; font-size: 28px; }
  #pbl .pbl-login { grid-area: login; width: 100%; margin-top: 4px; }
  #pbl .pbl-info { grid-area: info; width: 100%; margin-top: 4px; }
  #pbl .pbl-card { flex-basis: 160px; padding: 8px 10px; }
  #pbl .pbl-links { grid-area: links; margin-top: 6px; padding-top: 4px; }
  #pbl .pbl-foot { grid-area: foot; margin-top: 2px; }
  #pbl #hmLogin .in { gap: 6px 8px; margin: 6px; padding: 8px 10px 10px !important; }
  #pbl #hmLogin .hm-cap { padding: 5px 10px !important; }
  #pbl .pbl-lite { margin-top: 8px; padding: 7px 10px; }
  #pbl .pbl-lite-ic { width: 32px; height: 32px; font-size: 18px; }
}