:root{ --ps-bg:#2f3a48; --ps-text:#e8f0ff; --ps-green:#22c55e; --nav-h:0px; }

.ps-block{max-width:640px;margin:12px auto 14px;padding:0 8px;font-family:inherit}
.ps-row{display:flex;flex-direction:column;gap:10px}
.ps-label{
  text-align:center;font-size:16px;font-weight:800;color:var(--ps-text);letter-spacing:.08em;
  align-self:center;display:inline-block;padding:6px 12px;border-radius:10px;
  border:1.5px solid #000;background:rgba(0,0,0,.25);
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  box-shadow:0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

.ps-select{
  width:100%;height:44px;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-color:var(--ps-bg)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23e8f0ff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:16px 16px!important;
  padding:10px 40px 10px 14px;color:var(--ps-text);border:none;border-radius:10px;outline:none;
  font-weight:600;font-size:14px;line-height:1.2;
  box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.ps-select:focus{box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.22)}

.ps-status{
  display:flex;align-items:center;gap:10px;background:var(--ps-bg);color:var(--ps-text);
  border-radius:10px;padding:10px 14px;min-height:40px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ps-spin{width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);border-top-color:#fff;animation:psSpin .9s linear infinite;flex:0 0 14px}
@keyframes psSpin{to{transform:rotate(360deg)}}

/* Status indicator blink (pengganti ps-dot) */
.status-indicator{
  width:10px;height:10px;border-radius:50%;background:var(--ps-green);
  display:inline-block;flex:0 0 10px;position:relative;box-shadow:0 0 0 0 rgba(34,197,94,.6);
}
.status-indicator.success{ animation:pulseDot 1.6s ease-out infinite; }
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* Overlay hacker (tidak menutup navbar) */
.hk-overlay{
  position:fixed; left:0; right:0; bottom:0; top:var(--nav-h,0px);
  background:rgba(0,0,0,.92); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.hk-terminal{
  width:min(720px,92vw);max-height:72vh;overflow:auto;background:#0b0f0c;border-radius:12px;padding:16px;
  box-shadow:0 20px 80px rgba(0,0,0,.6);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#b8ffb8
}
.hk-title{color:#84f484;margin-bottom:6px;font-weight:700}
.terminal-line{white-space:pre-wrap;line-height:1.5}
.cursor{display:inline-block;width:8px;height:1em;background:#b8ffb8;margin-left:4px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Notifikasi atas */
.ps-notif{
  position:fixed; top:16px; right:16px; z-index:10001; display:none;
  width:360px; max-width:calc(100vw - 24px);
  background:#1b1f24; color:#e9eef6; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  padding:14px; border-left:4px solid #4f8cff; animation:psSlide .25s ease;
}
@keyframes psSlide{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.ps-notif .head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ps-notif .dot{width:10px;height:10px;border-radius:50%;background:#4f8cff;flex:0 0 10px}
.ps-notif .title{font-weight:800;letter-spacing:.02em}
.ps-notif .body{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.5;font-size:13px}
.ps-notif .body div + div{margin-top:2px}
.ps-notif .actions{margin-top:12px}
.ps-notif .btn{
  width:100%;display:flex;align-items:center;justify-content:center;
  padding:10px 18px;border-radius:12px;border:0;background:#9dbbff;color:#0a1623;
  font-weight:800;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);cursor:pointer;
}
.ps-notif .btn:hover{filter:brightness(1.05)} .ps-notif .btn:active{transform:translateY(1px)}
.ps-notif .btn:focus-visible{outline:2px solid #cfe0ff; outline-offset:2px}
@media (max-width:480px){ .ps-notif{ right:12px; left:12px; width:auto } }

/* RTP bar */
li[data-area='game_slot']{ position:relative; }
.rtp-progress-container{
  width:100%; background:#ddd; border-radius:5px; position:relative; overflow:hidden;
  margin:10px 0 5px 0; height:20px;
}
.rtp-progress-bar{
  height:100%; border-radius:5px; position:absolute; left:0; top:0; overflow:hidden;
  transition:width .5s ease-in-out, background-color .5s ease-in-out;
}
.rtp-progress-text{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:12px; font-weight:700; color:#000; white-space:nowrap; z-index:2;
}
.rtp-progress-stripes{
  position:absolute; top:0; left:0; width:300%; height:100%;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.3) 0px, rgba(255,255,255,.3) 5px, transparent 5px, transparent 10px);
  background-size:80px 100%; animation:rtpMove 2.0s linear infinite;
}
@keyframes rtpMove{ from{transform:translateX(-80px)} to{transform:translateX(0)} }

.label-new.bg-hot.blink{
  font-weight:700; display:inline-block; padding:4px 8px; background:#f00; color:#fff;
  border-radius:8px; position:absolute; top:5px; right:10px; z-index:10; line-height:1; white-space:nowrap;
  animation:rtpBlink 1s infinite; font-size:10px;
}
@keyframes rtpBlink{ 0%,100%{opacity:1} 50%{opacity:.5} }