:root{
  --navy:#0B1B3A;
  --navy-deep:#071022;
  --panel:#12305C;
  --inner:#0E2647;
  --sky:#38BDF8;
  --ice:#A5F3FC;
  --text:#EAF6FF;
  --muted:#8FB6D9;
  --soft:#CFE7F8;
  --danger:#FF5C7A;
  --amber:#FFB020;
  --good:#5EEAD4;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, #12305C 0%, #0B1B3A 45%, #071022 100%) fixed;
  color:var(--text);
  font-family:'Cairo','Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit;user-select:none;-webkit-user-select:none}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}

/* ---------- ambient layers ---------- */
.circuit-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(56,189,248,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56,189,248,.075) 1px, transparent 1px),
    radial-gradient(circle at 18% 28%, rgba(56,189,248,.12), transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(165,243,252,.09), transparent 44%);
  background-size:46px 46px, 46px 46px, 100% 100%, 100% 100%;
}
.circuit-bg::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(165,243,252,.30) 1.4px, transparent 1.5px);
  background-size:138px 138px;
  background-position:12px 24px;
  opacity:.35;
}
.scanlines{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(165,243,252,.045) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;opacity:.5;
}

/* ---------- shell ---------- */
.app-shell{
  position:relative;z-index:3;
  min-height:100vh;
  display:flex;flex-direction:column;
  max-width:1240px;margin:0 auto;
  padding-bottom:8px;
}

/* ---------- HUD ---------- */
.hud{padding:10px 12px 0}
.hud-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hud-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:64px;padding:5px 9px;border-radius:12px;
  background:rgba(18,48,92,.68);
  border:1px solid rgba(56,189,248,.28);
  box-shadow:0 6px 18px -14px #000 inset;
}
.hud-label{font-size:10px;color:var(--muted);line-height:1.2}
.hud-chip strong{font-size:16px;font-weight:800;color:var(--ice);font-variant-numeric:tabular-nums;line-height:1.3}
.hud-meter{flex:1 1 130px;min-width:118px;padding:4px 2px}
.hud-meter-top{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--muted)}
.hud-meter-top strong{font-size:13px;color:var(--ice);font-variant-numeric:tabular-nums}
.meter-track{height:9px;border-radius:999px;background:rgba(56,189,248,.14);overflow:hidden;margin-top:3px;border:1px solid rgba(56,189,248,.18)}
.meter-fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#A5F3FC,#38BDF8);transition:width .35s ease, background .35s ease}
.meter-fill.warn{background:linear-gradient(90deg,#FFD48A,#FFB020)}
.meter-fill.danger{background:linear-gradient(90deg,#FF9BB0,#FF5C7A)}
.time-track{height:5px;border-radius:999px;background:rgba(56,189,248,.13);margin-top:9px;overflow:hidden}
.time-fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#38BDF8,#A5F3FC);transition:width .2s linear}

/* ---------- stage / world ---------- */
.stage{
  position:relative;flex:1;
  display:flex;justify-content:center;align-items:flex-start;
  padding:14px 12px 22px;
}
.pipe{display:flex;gap:16px;position:absolute;pointer-events:none;z-index:1;opacity:.55}
.pipe i{flex:1;height:12px;border-radius:999px;
  background:linear-gradient(90deg,rgba(56,189,248,.05),rgba(56,189,248,.5),rgba(165,243,252,.06));
  box-shadow:0 0 20px rgba(56,189,248,.35);
  transition:background .3s ease, box-shadow .3s ease;
}
.pipe-top{top:6px;inset-inline:18%;}
.pipe-back{bottom:2px;inset-inline:10%;filter:blur(2px);opacity:.35}
.pipe-bottom{position:absolute;bottom:8px;inset-inline:14%;opacity:.28;z-index:0}
.pipe.broken i{
  background:linear-gradient(90deg,rgba(255,92,122,.1),rgba(255,92,122,.62));
  box-shadow:0 0 22px rgba(255,92,122,.5);
  animation:pipeFlicker .55s steps(2,end) infinite;
}
@keyframes pipeFlicker{0%,100%{opacity:1}50%{opacity:.35}}

.folder-tower{
  position:absolute;top:50%;display:flex;flex-direction:column;gap:10px;
  opacity:.55;pointer-events:none;z-index:1;
}
.tower-right{right:1vw;transform:translateY(-50%) perspective(620px) rotateY(-24deg)}
.tower-left{left:1vw;transform:translateY(-50%) perspective(620px) rotateY(24deg)}
.folder{
  width:132px;height:42px;border-radius:6px 12px 6px 6px;
  background:linear-gradient(180deg,#12305C,#0B1B3A);
  border:1px solid rgba(56,189,248,.32);
  position:relative;display:flex;align-items:center;
  padding-inline-start:12px;padding-inline-end:8px;
  font-size:11px;color:#A5F3FC;font-weight:700;
  box-shadow:0 10px 24px -18px #000;
}
.folder::before{
  content:'';position:absolute;top:-6px;inset-inline-start:10px;
  width:46px;height:7px;border-radius:4px 4px 0 0;
  background:var(--sky);opacity:.55;
}
.folder::after{content:attr(data-name);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:1080px){.folder-tower{display:none}}

/* ---------- device ---------- */
.device{
  position:relative;z-index:5;
  width:100%;max-width:780px;
  border-radius:22px;
  background:linear-gradient(180deg,#0d2244,#081733);
  border:1px solid rgba(56,189,248,.34);
  box-shadow:
    0 0 0 1px rgba(56,189,248,.08) inset,
    0 30px 70px -30px rgba(0,0,0,.95),
    0 0 44px rgba(56,189,248,.13);
  overflow:hidden;
}
.device-bar{
  display:flex;align-items:center;gap:7px;
  padding:8px 12px;
  background:linear-gradient(180deg,rgba(56,189,248,.12),rgba(56,189,248,.02));
  border-bottom:1px solid rgba(56,189,248,.22);
  font-size:12px;color:var(--ice);
}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot-sky{background:var(--sky);box-shadow:0 0 10px rgba(56,189,248,.9)}
.dot-ice{background:var(--ice);box-shadow:0 0 10px rgba(165,243,252,.8)}
.dot-amber{background:var(--amber);box-shadow:0 0 10px rgba(255,176,32,.7)}
.device-title{font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-badge{
  margin-inline-start:auto;font-size:10px;letter-spacing:.08em;
  color:var(--muted);border:1px solid rgba(143,182,217,.35);
  border-radius:999px;padding:2px 8px;white-space:nowrap;
}
.bar-btn{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:var(--ice);background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.28);flex:none;margin-inline-start:4px;
  transition:background .16s ease;
}
.bar-btn svg{width:17px;height:17px}
.bar-btn:hover{background:rgba(56,189,248,.18)}
.bar-btn .mute-line{opacity:0}
.bar-btn.off .wave1,.bar-btn.off .wave2{opacity:.18}
.bar-btn.off .mute-line{opacity:1}

.device-screen{
  position:relative;
  min-height:430px;
  padding:13px;
  background:
    radial-gradient(120% 100% at 50% 0%, #12305C 0%, #0E2647 52%, #0a1d38 100%);
  overflow:hidden;
  box-shadow:inset 0 0 60px rgba(0,0,0,.55);
}
.screen-grid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,rgba(56,189,248,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(56,189,248,.06) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(80% 60% at 50% 40%,#000 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 40%,#000 20%,transparent 100%);
}
.screen-glow{
  position:absolute;inset:-30% -10% auto -10%;height:60%;pointer-events:none;z-index:0;
  background:radial-gradient(50% 60% at 50% 0%, rgba(56,189,248,.20), transparent 70%);
}
.play-area{position:relative;z-index:2}

/* ---------- threat card ---------- */
.threat-card{
  position:relative;border-radius:16px;padding:13px;
  background:linear-gradient(180deg,rgba(18,48,92,.94),rgba(14,38,71,.97));
  border:1px solid rgba(56,189,248,.28);
  box-shadow:0 0 0 1px rgba(56,189,248,.06) inset, 0 14px 34px -24px rgba(0,0,0,.95);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.threat-card.flash-safe{border-color:rgba(94,234,212,.75);box-shadow:0 0 26px rgba(94,234,212,.28)}
.threat-card.flash-risk{border-color:rgba(255,92,122,.8);box-shadow:0 0 26px rgba(255,92,122,.3)}
.card-head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.card-titles{min-width:0}
.threat-tag{
  display:inline-block;font-size:10px;font-weight:700;padding:2px 9px;border-radius:999px;
  border:1px solid rgba(56,189,248,.45);color:var(--ice);background:rgba(56,189,248,.10);
  margin-bottom:2px;
}
.threat-tag.t-file{border-color:rgba(165,243,252,.5);color:#CFF4FD;background:rgba(165,243,252,.10)}
.threat-tag.t-intruder{border-color:rgba(255,92,122,.55);color:#FFC2CE;background:rgba(255,92,122,.10)}
.threat-tag.t-message{border-color:rgba(255,176,32,.55);color:#FFDCA0;background:rgba(255,176,32,.10)}
.threat-tag.t-network{border-color:rgba(56,189,248,.55);color:#BCE9FD;background:rgba(56,189,248,.12)}
.card-titles h2{font-size:18px;font-weight:800;line-height:1.35;color:#fff;letter-spacing:0}
.threat-desc{font-size:13.5px;color:var(--soft);margin:11px 0 12px;line-height:1.65}

/* ring */
.ring-wrap{position:relative;width:46px;height:46px;display:grid;place-items:center;flex:none}
.ring{position:absolute;inset:0;width:100%;height:100%}
.ring-bg{fill:none;stroke:rgba(56,189,248,.18);stroke-width:4}
.ring-fg{fill:none;stroke:var(--sky);stroke-width:4;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0;transition:stroke .25s ease}
.ring-wrap.warn .ring-fg{stroke:var(--amber)}
.ring-wrap.danger .ring-fg{stroke:var(--danger);animation:ringPulse .7s ease-in-out infinite}
.ring-wrap.danger .ring-num{color:#FFC2CE}
.ring-num{font-size:13px;font-weight:800;color:var(--ice);font-variant-numeric:tabular-nums}
@keyframes ringPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* verify */
.verify-row{margin-bottom:10px}
.btn-verify{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 15px;border-radius:12px;
  border:1px dashed rgba(165,243,252,.55);
  color:var(--ice);background:rgba(56,189,248,.07);
  font-weight:700;font-size:13.5px;
  transition:background .18s ease,border-color .18s ease;
}
.btn-verify:hover:not(:disabled){background:rgba(56,189,248,.15);border-color:rgba(165,243,252,.85)}
.btn-verify svg{width:16px;height:16px}
.btn-verify.done{border-style:solid;border-color:rgba(94,234,212,.55);background:rgba(94,234,212,.10);color:#9AF7E8}
.scan-bar{height:6px;border-radius:999px;background:rgba(56,189,248,.13);margin-top:8px;overflow:hidden}
.scan-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sky),var(--ice))}
.scan-bar.on i{animation:scanFill 1.5s linear forwards}
@keyframes scanFill{from{width:0}to{width:100%}}
.check-result{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:9px;font-size:12.5px;color:var(--soft);
}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px}
.chip-good{background:rgba(94,234,212,.13);color:#8FF3E4;border:1px solid rgba(94,234,212,.45)}
.chip-warn{background:rgba(255,176,32,.13);color:#FFD48A;border:1px solid rgba(255,176,32,.45)}
.chip-bad{background:rgba(255,92,122,.13);color:#FFB3C2;border:1px solid rgba(255,92,122,.48)}

/* options */
.options{display:grid;gap:8px}
.opt{
  display:flex;align-items:center;gap:10px;
  min-height:52px;width:100%;padding:10px 13px;border-radius:12px;
  background:rgba(11,27,58,.6);
  border:1px solid rgba(165,243,252,.28);
  color:var(--text);font-weight:700;font-size:14.5px;text-align:start;
  transition:background .16s ease,border-color .16s ease,transform .12s ease,box-shadow .22s ease,color .2s ease;
}
.opt:hover:not(:disabled){background:rgba(56,189,248,.13);border-color:rgba(165,243,252,.6)}
.opt:active:not(:disabled){transform:scale(.985)}
.opt:disabled{opacity:.6}
.options.locked .opt{opacity:.4}
.opt-idx{
  width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:rgba(56,189,248,.16);color:var(--ice);flex:none;
}
.opt-t{flex:1;line-height:1.45}
.opt.v-safe{background:linear-gradient(90deg,#38BDF8,#A5F3FC);color:#0B1B3A;border-color:transparent;opacity:1}
.opt.v-safe .opt-idx{background:rgba(11,27,58,.20);color:#0B1B3A}
.opt.v-neutral{border-color:rgba(165,243,252,.8);background:rgba(165,243,252,.10);color:#EAF6FF;opacity:1}
.opt.v-risky{border-color:rgba(255,92,122,.85);background:rgba(255,92,122,.07);color:#FFD0DA;opacity:1}
.opt.is-chosen{box-shadow:0 0 0 2px rgba(234,246,255,.5),0 0 24px rgba(56,189,248,.35);transform:translateY(-1px)}
.opt.is-miss{box-shadow:0 0 0 2px rgba(255,92,122,.55)}
.lock-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:9px}

/* ---------- toast ---------- */
.toast{
  position:absolute;inset-inline:12px;bottom:12px;z-index:20;
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 13px;border-radius:14px;
  background:rgba(7,18,38,.97);
  border:1px solid rgba(56,189,248,.42);
  box-shadow:0 20px 46px -20px #000;
  animation:toastIn .26s ease-out;
}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toast.ok{border-color:rgba(94,234,212,.65)}
.toast.bad{border-color:rgba(255,92,122,.72)}
.toast.neutral{border-color:rgba(255,176,32,.65)}
.toast-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(56,189,248,.16);color:var(--ice)}
.toast-icon svg{width:16px;height:16px}
.toast.ok .toast-icon{background:rgba(94,234,212,.16);color:#8FF3E4}
.toast.bad .toast-icon{background:rgba(255,92,122,.16);color:#FFB3C2}
.toast.neutral .toast-icon{background:rgba(255,176,32,.16);color:#FFD48A}
.toast-body{flex:1;min-width:0}
.toast-body p{font-size:13px;line-height:1.6;color:var(--text)}
.toast-body span{font-size:12px;font-weight:800;color:var(--ice);font-variant-numeric:tabular-nums}
.toast.bad .toast-body span{color:#FFB3C2}
.toast.ok .toast-body span{color:#8FF3E4}
.admin-wrap{flex:none;width:46px;height:46px;display:grid;place-items:center}
.admin-wrap svg{width:100%;height:100%}

/* ---------- overlays ---------- */
.overlay{
  position:absolute;inset:0;z-index:40;
  display:flex;align-items:flex-start;justify-content:center;
  padding:14px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(7,16,34,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fadeIn .22s ease-out;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.menu-card{
  width:100%;max-width:440px;margin:auto;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:20px 18px 18px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,rgba(18,48,92,.96),rgba(10,25,50,.98));
  border:1px solid rgba(56,189,248,.35);
  box-shadow:0 30px 70px -30px #000;
}
.menu-card h1{font-size:26px;font-weight:900;color:#fff;letter-spacing:0}
.menu-sub{font-size:13.5px;color:var(--soft);line-height:1.7}
.menu-rules{display:grid;gap:7px;width:100%;text-align:start;font-size:12.5px;color:var(--soft)}
.menu-rules li{
  position:relative;padding-inline-start:16px;
}
.menu-rules li::before{
  content:'';position:absolute;inset-inline-start:0;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--sky);
  box-shadow:0 0 8px rgba(56,189,248,.9);
}
.menu-rules b{color:var(--ice)}
.menu-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 26px;border-radius:14px;
  font-weight:800;font-size:16px;color:#062038;
  background:linear-gradient(135deg,#38BDF8,#A5F3FC);
  box-shadow:0 12px 28px -14px rgba(56,189,248,.95),0 0 0 1px rgba(255,255,255,.18) inset;
  transition:transform .12s ease,box-shadow .22s ease,filter .2s ease;
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:translateY(1px) scale(.99)}
.btn-xl{width:100%;min-height:56px;font-size:17px}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 22px;border-radius:14px;
  border:1px solid rgba(165,243,252,.5);
  color:var(--ice);background:rgba(56,189,248,.06);
  font-weight:700;font-size:15px;
  transition:background .18s ease,border-color .18s ease;
}
.btn-ghost:hover{background:rgba(56,189,248,.14);border-color:rgba(165,243,252,.85)}
.btn-ghost.small{min-height:40px;font-size:12.5px;padding:0 14px;border-radius:11px}

/* ---------- results ---------- */
.results-card{
  width:100%;max-width:520px;margin:auto;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:18px 16px 20px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,rgba(18,48,92,.96),rgba(10,25,50,.98));
  border:1px solid rgba(56,189,248,.35);
  box-shadow:0 30px 70px -30px #000;
}
.score-ring-wrap{position:relative;width:136px;height:136px;display:grid;place-items:center}
.score-ring{position:absolute;inset:0;width:100%;height:100%}
.s-bg{fill:none;stroke:rgba(56,189,248,.16);stroke-width:9}
.s-fg{fill:none;stroke:url(#none);stroke:#38BDF8;stroke-width:9;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1),stroke .4s ease}
.score-center{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.score-center strong{font-size:40px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.score-center span{font-size:11px;color:var(--muted)}
.results-card h2{font-size:21px;font-weight:900;color:#fff}
.grade-line{font-size:13px;color:var(--soft);line-height:1.7;max-width:400px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:100%}
.stats-grid div{
  background:rgba(11,27,58,.6);border:1px solid rgba(56,189,248,.22);
  border-radius:11px;padding:7px 4px;display:flex;flex-direction:column;gap:1px;
}
.stats-grid span{font-size:9.5px;color:var(--muted)}
.stats-grid strong{font-size:14px;color:var(--ice);font-variant-numeric:tabular-nums}
.breakdown{width:100%;display:grid;gap:7px}
.bd-row{display:grid;grid-template-columns:84px 1fr 42px;gap:8px;align-items:center;font-size:11.5px;color:var(--soft)}
.bd-track{height:7px;border-radius:999px;background:rgba(56,189,248,.14);overflow:hidden}
.bd-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#38BDF8,#A5F3FC);width:0;transition:width .7s ease}
.bd-row span:last-child{color:var(--ice);font-weight:800;font-variant-numeric:tabular-nums}
.tips{width:100%;display:grid;gap:7px;text-align:start}
.tips li{
  font-size:12px;color:var(--soft);line-height:1.65;
  background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.2);
  border-radius:11px;padding:8px 11px;
  position:relative;padding-inline-start:28px;
}
.tips li::before{
  content:attr(data-n);
  position:absolute;inset-inline-start:8px;top:8px;
  width:16px;height:16px;border-radius:5px;display:grid;place-items:center;
  font-size:10px;font-weight:800;background:rgba(56,189,248,.2);color:var(--ice);
}
.results-actions{display:flex;gap:8px;width:100%;flex-wrap:wrap}
.results-actions .btn-primary{flex:1 1 150px}
.results-actions .btn-ghost{flex:1 1 130px}
.share-status{font-size:11.5px;color:var(--good);min-height:14px}
.save-status{font-size:11.5px;color:var(--muted);min-height:14px}
.save-status.ok{color:var(--good)}
.save-status.bad{color:#FFB3C2}
.leader-wrap{width:100%;border-top:1px solid rgba(56,189,248,.18);padding-top:11px;display:grid;gap:8px}
.leader-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.leader-head h3{font-size:13px;font-weight:800;color:var(--ice)}
.chip-source{font-size:9.5px;color:var(--muted);border:1px solid rgba(143,182,217,.32);border-radius:999px;padding:1px 8px}
.leader-list{display:grid;gap:5px;font-size:12px;color:var(--soft)}
.leader-list li{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;
  background:rgba(11,27,58,.55);border:1px solid rgba(56,189,248,.16);border-radius:9px;padding:5px 9px}
.leader-list li.is-you{border-color:rgba(165,243,252,.6);background:rgba(56,189,248,.14)}
.leader-list .rank{color:var(--muted);font-weight:800;font-variant-numeric:tabular-nums}
.leader-list .handle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.leader-list strong{color:var(--ice);font-variant-numeric:tabular-nums}
.leader-empty{font-size:11.5px;color:var(--muted);text-align:center;padding:6px}
.leader-note{font-size:10px;color:var(--muted);text-align:start}

/* ---------- guardian ---------- */
.guardian-wrap{position:relative;display:grid;place-items:center;width:62px;height:66px;flex:none;animation:gfFloat 3.6s ease-in-out infinite}
.guardian-big{width:104px;height:110px;margin:0 auto}
.guardian-svg{width:100%;height:100%;display:block;overflow:visible}
@keyframes gfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.guardian-wrap .eye{transition:fill .25s ease;transform-box:fill-box;transform-origin:center}
.guardian-wrap .mouth{transition:stroke .25s ease}
.guardian-wrap .sparks{opacity:0;transition:opacity .2s ease}
.guardian-wrap.is-alert{animation:gfJitter .3s linear infinite}
.guardian-wrap.is-alert .eye{fill:#FFB020}
.guardian-wrap.is-alert .mouth{stroke:#FFB020}
@keyframes gfJitter{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}75%{transform:translate(2px,-1px)}}
.guardian-wrap.is-happy{animation:gfPop .55s ease-out}
@keyframes gfPop{0%{transform:scale(1)}40%{transform:scale(1.14) rotate(-3deg)}100%{transform:scale(1)}}
.guardian-wrap.is-happy .sparks{opacity:1;animation:gfSparks .95s ease-out}
@keyframes gfSparks{0%{opacity:0;transform:scale(.7)}35%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
.guardian-wrap.is-low{filter:grayscale(.4) brightness(.62)}
.guardian-wrap.is-low .eye{fill:#8FB6D9}
.guardian-wrap.is-low .sparks{opacity:0}

/* admin nod */
.admin-svg .admin-head{transform-box:fill-box;transform-origin:50% 90%;animation:none}
.admin-wrap.nod .admin-head{animation:adminNod 1s ease-in-out 2}
@keyframes adminNod{0%,100%{transform:rotate(0)}30%{transform:rotate(-13deg)}65%{transform:rotate(6deg)}}

/* ---------- responsive ---------- */
@media (max-width:430px){
  .hud{padding:8px 10px 0}
  .hud-row{gap:6px}
  .hud-chip{min-width:58px;padding:4px 7px}
  .hud-chip strong{font-size:15px}
  .hud-meter{flex-basis:100%;order:5;padding:2px}
  .stage{padding:10px 8px 18px}
  .device-screen{padding:11px;min-height:420px}
  .threat-desc{font-size:13px}
  .card-titles h2{font-size:16.5px}
  .opt{font-size:13.5px;min-height:50px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .results-card{padding:16px 13px}
  .folder-tower{display:none}
}
@media (max-width:360px){
  .guardian-wrap{width:52px;height:56px}
  .ring-wrap{width:40px;height:40px}
  .card-titles h2{font-size:15px}
}
@media (min-width:900px){
  .device-screen{min-height:470px;padding:16px}
  .threat-desc{font-size:14.5px}
  .card-titles h2{font-size:20px}
  .opt{font-size:15px;min-height:54px}
  .guardian-wrap{width:70px;height:74px}
}
@media (max-height:620px) and (min-width:700px){
  .device-screen{min-height:360px}
  .guardian-wrap{width:52px;height:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .guardian-wrap{animation:none}
}