:root{
  --bg:#080c14; --bg2:#0d1420; --card:#111a29; --card2:#16223433;
  --line:#1e2c42; --txt:#e8eef8; --muted:#8ba0bd; --accent:#22d3ee; --accent2:#38bdf8;
  --live:#22c55e; --dead:#ef4444; --warn:#f59e0b;
  --r:14px; --sh:0 10px 30px #0009;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 15% -10%, #14284a 0%, transparent 60%),
             radial-gradient(900px 500px at 100% 0%, #0e3a44 0%, transparent 55%), var(--bg);
  color:var(--txt); font:15px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  min-height:100vh;
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:10px 16px; background:#080c14e6; backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;margin-right:4px}
.brand h1{font-size:17px;margin:0;letter-spacing:.2px;font-weight:600;white-space:nowrap}
.brand b{color:var(--accent)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px #22c55e26,0 0 14px var(--live);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.45}}

.search-wrap{position:relative;flex:1 1 260px;min-width:200px}
#q{
  width:100%; padding:10px 34px 10px 12px; border-radius:11px; border:1px solid var(--line);
  background:var(--card); color:var(--txt); font-size:14px; outline:none;
}
#q:focus{border-color:var(--accent);box-shadow:0 0 0 3px #22d3ee22}
.qclear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer;padding:0 6px}

.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tools select,.toggle,.btn{
  background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; font-size:13px; cursor:pointer; transition:.15s;
}
.tools select:hover,.toggle:hover,.btn:hover{border-color:var(--accent2);background:#16243a}
.toggle[aria-pressed="true"]{background:var(--accent);color:#04222a;border-color:var(--accent);font-weight:700}
.btn.ghost{background:transparent}
a.btn{text-decoration:none;display:inline-block}

/* ---------- stats ---------- */
.stats{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 2px}
.chip{
  background:var(--card2);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:12.5px;color:var(--muted)
}
.chip b{color:var(--txt)}
.chip.live b{color:var(--live)}

/* ---------- grid ---------- */
main{padding:14px 16px 40px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  cursor:pointer; transition:transform .16s,border-color .16s,box-shadow .16s; position:relative;
}
.card:hover{transform:translateY(-3px);border-color:var(--accent2);box-shadow:var(--sh)}
.thumb{position:relative;aspect-ratio:16/9;background:#0a1120;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s}
.thumb img.on{opacity:1}
.thumb .skel{position:absolute;inset:0;background:linear-gradient(100deg,#0e1826 30%,#16243a 50%,#0e1826 70%);background-size:200% 100%;animation:sk 1.4s infinite}
@keyframes sk{to{background-position:-200% 0}}
.badge{
  position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:5px;
  background:#000000b3;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700;letter-spacing:.4px
}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--muted);display:block}
.badge.live i{background:var(--live);box-shadow:0 0 8px var(--live);animation:pulse 1.8s infinite}
.badge.dead i{background:var(--dead)}
.badge.dead{color:#fca5a5}
.kat{position:absolute;top:8px;right:8px;background:#0ea5e9cc;color:#03212c;font-size:10.5px;font-weight:800;
  padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
.kota{position:absolute;bottom:8px;left:8px;background:#000000b3;border-radius:8px;padding:3px 8px;font-size:11px;max-width:70%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctxt{padding:10px 12px 12px}
.ctxt h3{margin:0 0 4px;font-size:13.8px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctxt p{margin:0;font-size:11.6px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.sentinel{height:36px}
.empty{text-align:center;color:var(--muted);padding:40px 0}

/* ---------- peta sebaran ---------- */
.peta-wrap{position:relative;background:var(--card2);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.peta-scroll{overflow:hidden;border-radius:10px}
#peta{display:block;background:#0a1120}
.peta-legend{position:absolute;right:18px;bottom:18px;background:#000000b3;border-radius:10px;padding:8px 11px;font-size:11.5px;line-height:1.7;pointer-events:none}
.peta-legend .peta-toggle{position:static;pointer-events:auto}

/* tombol perkecil: canvas 1400px terlalu besar utk layar HP -> default diperkecil */
.peta-toggle{
  position:absolute;left:18px;top:18px;z-index:2;background:#000000b3;color:var(--txt);
  border:1px solid var(--line);border-radius:9px;padding:5px 11px;font-size:12px;cursor:pointer
}
.peta-toggle:hover{border-color:var(--accent2)}
#peta{max-width:100%;height:auto}
.peta-wrap.small #peta{max-width:640px;margin:0 auto}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:80;background:#02060cd9;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px}
.modal-card{width:min(1080px,100%);max-height:94vh;overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);position:relative}
.mclose{position:absolute;top:10px;right:12px;z-index:3;background:#000000a6;border:0;color:#fff;font-size:26px;line-height:1;border-radius:10px;width:38px;height:38px;cursor:pointer}
.player{background:#000;aspect-ratio:16/9;position:relative}
.player video,.player iframe{width:100%;height:100%;border:0;display:block;background:#000}
.player .state{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:20px}
.spin{width:34px;height:34px;border:3px solid #ffffff2b;border-top-color:var(--accent);border-radius:50%;animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.meta{padding:16px 18px 20px}
.meta h2{margin:0 0 6px;font-size:18px}
.muted{color:var(--muted)}
.mtabs{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 14px}
.mtabs span{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px}
.mact{display:flex;gap:8px;flex-wrap:wrap}

@media (max-width:640px){
  .brand h1{font-size:15px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
  .ctxt h3{font-size:12.6px}
  .tools{width:100%}
  .tools select{flex:1 1 40%}
}