:root{
    --bg:#0b1220; --panel:#0f1b31; --ink:#eaf1ff; --muted:#a8b0c6; --brand:#5aa2ff;
    --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --glass:rgba(255,255,255,.06);
  }
  html,body{height:100%}
  body{
    margin:0; background:
      radial-gradient(800px 400px at 15% -10%, #143059 0%, transparent 60%),
      radial-gradient(900px 480px at 110% 0%, #193565 0%, transparent 60%),
      var(--bg);
    color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
    overflow:hidden;
  }
  header{
    position:fixed; inset:0 0 auto 0; height:54px; display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px; z-index:10; backdrop-filter: blur(6px);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12));
    border-bottom:1px solid rgba(255,255,255,.12);
    gap:10px;
  }
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
  .brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(180deg,#7bb2ff,#3b82f6);display:grid;place-items:center;box-shadow:0 8px 18px rgba(59,130,246,.35)}
  .brand .logo svg{width:20px;height:20px;fill:#fff}
  .chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;font-size:12px}
  .tog{background:var(--panel);border:1px solid rgba(255,255,255,.18);color:#eaf1ff;border-radius:10px;padding:6px 10px;cursor:pointer}
  .tog[aria-pressed="true"]{outline:2px solid #7bb2ff}
  canvas{display:block; position:fixed; inset:54px 0 0 0; width:100vw; height:calc(100vh - 54px); background:transparent}

  .overlay{
    position:fixed; inset:auto 0 0 0; display:flex; justify-content:center; padding:8px 12px; z-index:15;
    pointer-events:none;
  }
  .help{
    background:rgba(8,16,32,.72); border:1px solid rgba(255,255,255,.12); color:#dfe8ff;
    padding:6px 10px; border-radius:10px; font-size:12px; pointer-events:auto;
  }
  .hud{
    position:fixed; right:10px; top:60px; z-index:12; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    background:rgba(8,16,32,.72); border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:10px; font-weight:700;
  }
  .bar{
    position:relative; width:200px; height:8px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; margin-left:6px
  }
  .bar > span#prog{display:block; height:100%; background:linear-gradient(90deg,#5aa2ff,#22c55e); width:0%}
  .bar .segs{position:absolute; inset:0; pointer-events:none}
  .bar .segs i{position:absolute; top:0; width:2px; height:100%; background:rgba(255,255,255,.35)}
  .bar .finish{position:absolute; right:-10px; top:-7px; font-size:16px}

  .btn{ background:var(--panel); border:1px solid rgba(255,255,255,.15); color:#eaf1ff; border-radius:10px; padding:6px 10px; cursor:pointer; }
  .mobile-ctrl{
    position:fixed; inset:auto 0 10px 0; display:none; z-index:20; pointer-events:none;
  }
  .pad{display:flex; gap:8px; align-items:center}
  .btn-round{
    pointer-events:auto;
    width:58px;height:58px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.06); color:#eaf1ff; display:grid; place-items:center; font-weight:900; font-size:18px;
    box-shadow:0 10px 24px rgba(0,0,0,.35)
  }
  .btn-tall{height:58px; padding:0 16px; border-radius:14px}
  .mobile-ctrl .left{position:absolute; left:12px; bottom:12px}
  .mobile-ctrl .right{position:absolute; right:12px; bottom:12px}
  @media (pointer:none), (pointer:coarse){ .mobile-ctrl{display:block} }

  .center-pop{
    position:fixed; inset:0; display:grid; place-items:center; z-index:30; background:rgba(3,8,20,.55); backdrop-filter: blur(4px);
  }
  .card{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
    border:1px solid rgba(255,255,255,.18);
    border-radius:16px; padding:16px; max-width:520px; color:#dfe8ff; text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.45)
  }
  .title{font-weight:900; font-size:clamp(18px,2.6vw,24px)}
  .muted{color:#a8b0c6; font-size:14px}
  .hide{display:none !important}

  /* FX teks kecil */
  .floatHud{
    position:fixed; right:16px; top:110px; color:#ffd166; font-weight:900; text-shadow:0 2px 10px rgba(0,0,0,.5);
    animation:floatUp .8s ease-out forwards;
  }
  @keyframes floatUp{
    from{opacity:1; transform:translateY(0)}
    to{opacity:0; transform:translateY(-24px)}
  }

  /* Shield aura */
  .aura{
    position:fixed; inset:54px 0 0 0; pointer-events:none; z-index:9;
  }

  /* Heart pop */
  .pop{ animation:pop .28s ease; }
  @keyframes pop{ 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }

  /* Pause badge */
  .badge{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:8px; padding:4px 8px; font-size:12px}

  /* Confetti */
  .star{ position:fixed; width:8px; height:8px; background:#ffd166; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); pointer-events:none; z-index:9999 }