* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050d0a; color: #d8efe3; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
#map { position: fixed; inset: 0; }
.card { position: fixed; z-index: 2; background: rgba(7, 25, 18, .86); border: 1px solid #1c4a38; border-radius: 10px;
  backdrop-filter: blur(4px); padding: 10px 12px; }
h4 { margin: 0; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
small { display: block; font-size: 10px; color: #6fa88a; margin: 2px 0 8px; }
ul { list-style: none; margin: 0; padding: 0; }

/* header */
#hdr { top: 16px; left: 16px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
.hlogo { width: 38px; height: 38px; object-fit: contain; }
.ttl { font-weight: 800; letter-spacing: .5px; font-size: 13px; color: #ffd24a; }
.sub { font-size: 10px; color: #6fa88a; margin-top: 2px; }
.clock { border-left: 1px solid #1c4a38; padding-left: 12px; display: flex; flex-direction: column; font-size: 10px; color: #6fa88a; }
.clock b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
#status { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
#status.on { background: #1f6b3f; } #status.off { background: #7a2a2a; }

/* stats */
#stats { top: 16px; right: 282px; display: flex; gap: 22px; }
.stat span { display: block; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: #6fa88a; }
.stat b { font-size: 20px; color: #e8fff2; font-variant-numeric: tabular-nums; }

/* region + legend */
#regions { left: 16px; top: 130px; width: 150px; }
#regions h4 { margin-bottom: 6px; }
#regions button { display: block; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px;
  color: #8bbfa4; padding: 5px 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
#regions button.active { color: #fff; border-color: #2f9e6a; background: #14392a; }
#legend { left: 16px; bottom: 222px; width: 170px; font-size: 11px; }
#legend h4 { margin-bottom: 6px; } #legend div { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: #a8cdb9; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.tgt { background: #5ae696; box-shadow: 0 0 0 2px #fff4; } .dot.src { background: #ff7a4a; }
.line { width: 14px; height: 2px; background: linear-gradient(90deg, #ff4628, #ffbe78); display: inline-block; }

/* real-time attacks (bawah, tanpa scroll) */
#feedcard { left: 16px; right: 282px; bottom: 16px; height: 198px; padding: 8px 12px; overflow: hidden; }
.ch { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; } .ch span { font-size: 11px; color: #6fa88a; }
#feed li { display: grid; grid-template-columns: 62px minmax(0, 300px) 14px minmax(0, 1fr) auto 44px; gap: 8px; align-items: center;
  height: 24px; font-size: 12px; border-bottom: 1px solid #143427; white-space: nowrap; overflow: hidden; }
#feed li > span { overflow: hidden; text-overflow: ellipsis; }
#feed .t { color: #6fa88a; font-variant-numeric: tabular-nums; } #feed .arrow { color: #ff7a4a; }
#feed .ip { color: #7aa991; margin-left: 4px; font-size: 11px; }
#feed li.new { animation: flash 1.4s ease-out; }
@keyframes flash { from { background: #4d2418; } to { background: transparent; } }
.pill { padding: 1px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; color: #ffcf8a; background: #4a3516; border: 1px solid #8a6a2c; text-align: center; }
.cnt { color: #ff7a4a; text-align: right; font-weight: 800; }
.flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; vertical-align: -2px; margin-right: 6px; box-shadow: 0 0 0 1px #0006; }

/* kolum kanan */
#side { position: fixed; z-index: 2; top: 16px; right: 16px; bottom: 16px; width: 254px; display: flex; flex-direction: column; gap: 12px; }
#side .card { position: static; flex: 1 1 0; min-height: 0; overflow: hidden; }
#side li { position: relative; display: flex; justify-content: space-between; align-items: center; height: 24px; padding: 0 8px; margin-bottom: 3px;
  font-size: 12px; border-radius: 4px; background: linear-gradient(90deg, #2a7a58 var(--p), #12392a var(--p)); overflow: hidden; white-space: nowrap; }
#side li b { font-variant-numeric: tabular-nums; }

#map canvas, #overlay { position: absolute; inset: 0; }
#overlay { pointer-events: none; overflow: hidden; }
#overlay > * { position: absolute; left: 0; top: 0; will-change: transform; }
.home-logo { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 6px #000); }

@media (max-width: 899px) {
  html, body { overflow: auto; height: auto; }
  body { display: flex; flex-direction: column; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 8px calc(12px + env(safe-area-inset-bottom)); }
  .card, #side { position: static; }
  #stats, #regions, #legend { display: none; }
  #hdr { order: 1; gap: 8px; }
  .ttl { font-size: 12px; letter-spacing: .3px; } .clock { display: none; } #status { margin-left: auto; }
  /* peta: tinggi ikut nisbah oval + ruang pill di atas */
  #map { order: 2; position: relative; inset: auto; width: 100%; height: calc((100vw - 16px) * 0.52 + 8px); flex: none; }
  #feedcard { order: 3; height: auto; }
  #feed li { grid-template-columns: 54px minmax(0, 1fr) auto 30px; height: 26px; font-size: 11px; }
  #feed .arrow, #feed .dst { display: none; }
  #side { order: 4; display: block; width: auto; }
  #side .card { position: static; overflow: visible; }
  #side .card:not(:nth-child(2)) { display: none; }
}

/* pill label negara di peta */
.geo-pill { display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 14px; white-space: nowrap;
  background: rgba(8, 28, 20, .92); border: 1px solid #ff7a4a; color: #fff; font-size: 12px; font-weight: 600;
  box-shadow: 0 0 10px rgba(255, 110, 60, .35); pointer-events: none; }
.geo-pill img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #0008; }
.geo-pill b { color: #ff9a6a; font-size: 11px; }
.geo-pill b:empty { display: none; }
.geo-pill.hit { animation: pillhit .6s ease-out; }
@keyframes pillhit { from { box-shadow: 0 0 18px rgba(255, 120, 60, .9); border-color: #ffd0a0; } }

@media (max-height: 760px) { #legend { display: none; } }
.geo-pill.placed { transition: transform .25s ease-out; }

@media (max-width: 1240px) and (min-width: 900px) { #hdr .clock { display: none; } }

@media (max-width: 899px) {
  .geo-pill { font-size: 10px; padding: 2px 7px 2px 3px; gap: 4px; }
  .geo-pill img { width: 14px; height: 14px; }
  .geo-pill b { font-size: 9px; }
  .home-logo { width: 38px; height: 38px; }
}

/* ---------- Shimmer skeleton (gaya Facebook) ---------- */
.skel { position: relative; overflow: hidden; background: #12301f; border-radius: 4px; color: transparent !important; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(120, 220, 170, .12), transparent);
  animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-num { display: inline-block; width: 64px; height: 20px; vertical-align: middle; }
#feed li.skel-row, #side li.skel-row { background: none; border-bottom-color: #143427; }
li.skel-row .skel { height: 10px; display: block; }
#side li.skel-row { padding: 0; }
#side li.skel-row .skel { height: 24px; width: 100%; border-radius: 4px; }
.map-skel { position: absolute; border-radius: 50%; transition: opacity .5s; }
#map canvas, #overlay { transition: opacity .6s ease-out; }
#map.loading canvas, #map.loading #overlay { opacity: 0; }
#map:not(.loading) .map-skel { opacity: 0; pointer-events: none; }
.fade-in { animation: fadein .4s ease-out; }
@keyframes fadein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

#status.wait { background: #1c4a38; color: #9fd8b8; }