/* HUD STATUS — komik x teknologi. Dipakai Home & Dashboard (partial hud_status). File "owned". */
.hud{--hm-ink:#2e2508}
/* ============ HUD STATUS — komik x teknologi ============ */
.hud{position:relative;margin:24px auto 2px;max-width:420px;padding:14px 12px 12px;border-radius:24px;text-align:left;
  background-color:#fffdf2;background-image:radial-gradient(circle,rgba(160,120,0,.16) 1.1px,transparent 1.5px);background-size:11px 11px;
  border:2.5px solid #4a3a06;box-shadow:5px 5px 0 #4a3a06,0 22px 36px -18px rgba(120,86,0,.55);--cm-fg:var(--hm-ink)}
.hud-burst{position:absolute;right:-8px;top:-15px;z-index:3;padding:3px 11px 1px;transform:rotate(7deg);font-family:Bangers,Impact,sans-serif;font-size:1.05rem;letter-spacing:.06em;
  background:#ffd23f;border:2.5px solid #4a3a06;border-radius:8px;box-shadow:2px 2px 0 #4a3a06;--cm-fg:var(--hm-ink);animation:hudWob 2.8s ease-in-out infinite}
@keyframes hudWob{0%,100%{transform:rotate(7deg) scale(1)}50%{transform:rotate(4deg) scale(1.07)}}
.hud-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 10px}
.hud-title{font-family:Bangers,Impact,sans-serif;font-weight:400;font-size:1.25rem;letter-spacing:.07em;display:flex;align-items:center;gap:7px}
.hud-title i{--cm-fg:#b45309}
.hud-live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 2px;border-radius:999px;background:#fff;border:2px solid #4a3a06;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:800;letter-spacing:.06em}
.hud-live i{width:9px;height:9px;border-radius:50%;background:#22c55e;animation:glPulse 1.6s infinite}
.hud-live.off i{background:#ef4444;animation:none}
.hud-live em{font-style:normal}

.hud-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hud-tile{position:relative;padding:9px 10px 8px;border-radius:14px;background:#fff;border:2px solid #4a3a06;box-shadow:3px 3px 0 #4a3a06;overflow:hidden;
  --cm-fg:var(--hm-ink);transition:transform .15s}
.hud-tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.028) 0 1px,transparent 1px 3px)}
.hud-tile[data-lv="lo"]{border-color:#166534;box-shadow:3px 3px 0 #166534}
.hud-tile[data-lv="mid"]{border-color:#b45309;box-shadow:3px 3px 0 #b45309}
.hud-tile[data-lv="hi"]{border-color:#b91c1c;box-shadow:3px 3px 0 #b91c1c}
.hud-lbl{display:flex;align-items:center;gap:6px;font-family:Bangers,Impact,sans-serif;font-size:.95rem;letter-spacing:.09em;opacity:.85}
.hud-lbl i{font-size:.8rem;--cm-fg:#b45309}
.hud-val{display:flex;align-items:baseline;gap:4px;margin:3px 0 6px;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:800;font-size:1.55rem;line-height:1.05;font-variant-numeric:tabular-nums}
.hud-val small{font-size:.68rem;font-weight:800;opacity:.75}
.hud-tile[data-lv="lo"] .hud-val>span:first-child{--cm-fg:#15803d}
.hud-tile[data-lv="mid"] .hud-val>span:first-child{--cm-fg:#b45309}
.hud-tile[data-lv="hi"] .hud-val>span:first-child{--cm-fg:#b91c1c}
.hud-sub{margin-top:5px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10.5px;font-weight:800;letter-spacing:.03em;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* bar bersegmen ala HUD */
.hud-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;height:10px}
.hud-seg i{border-radius:2px;background:rgba(74,58,6,.14);border:1px solid rgba(74,58,6,.18);transition:background .3s}
.hud-seg i.on.lo{background:linear-gradient(180deg,#4ade80,#16a34a);border-color:#166534}
.hud-seg i.on.mid{background:linear-gradient(180deg,#fde047,#f59e0b);border-color:#b45309}
.hud-seg i.on.hi{background:linear-gradient(180deg,#fb923c,#dc2626);border-color:#991b1b}

/* batang sinyal */
.hud-bars{display:flex;align-items:flex-end;gap:4px;height:14px}
.hud-bars i{flex:1;border-radius:2px;background:rgba(74,58,6,.14);border:1px solid rgba(74,58,6,.18);transition:background .3s}
.hud-bars i:nth-child(1){height:30%}.hud-bars i:nth-child(2){height:48%}.hud-bars i:nth-child(3){height:66%}.hud-bars i:nth-child(4){height:84%}.hud-bars i:nth-child(5){height:100%}
.hud-bars i.on{background:linear-gradient(180deg,#4ade80,#16a34a);border-color:#166534}
.hud-bars i.on.b3{background:linear-gradient(180deg,#fde047,#f59e0b);border-color:#b45309}
.hud-bars i.on.b2,.hud-bars i.on.b1{background:linear-gradient(180deg,#fb923c,#dc2626);border-color:#991b1b}

.hud-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:11px;padding-top:9px;border-top:2px dashed rgba(74,58,6,.4);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11.5px;font-weight:800}
.hud-foot span{display:inline-flex;align-items:center;gap:5px}
.hud-foot i{--cm-fg:#b45309}
.hud-foot b{font-weight:800;padding:1px 7px;border-radius:6px;background:#ffe27a;border:1.5px solid #4a3a06}
.hud-foot [hidden]{display:none}
@media (max-width:360px){.hud-val{font-size:1.3rem}.hud-grid{gap:7px}}
@media (prefers-reduced-motion:reduce){.hud-burst,.hud-live i{animation:none}}

/* di Dashboard: selebar kolom, tanpa margin atas */
.hud-wide .hud{max-width:none;margin:0}
.hud-wide .hud-grid{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.hud-wide .hud-grid{grid-template-columns:repeat(4,1fr)}}