/* ══════════════════════════════════════════════════════════════
   HUDL KIT — portable HUD toolkit  ·  v1.0
   Drop into any UI to give panels: glass, hover, drag, scale,
   per-panel context wishlist, master toggle, Dream↔Dev reveal.
   Pair with hudl-kit.js →  HUDL.mount({ panels:'.my-panel' })
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap');

:root{
  --hudl-void:#1a0033; --hudl-cyan:#00ffff; --hudl-pink:#ff2d78;
  --hudl-green:#39ff14; --hudl-yellow:#ffe600; --hudl-purple:#b400ff;
  --hudl-white:#f0f0ff; --hudl-dim:#6666aa; --hudl-orange:#ff6b00;
  --hudl-font:'Rajdhani','Courier New',sans-serif;
  --hudl-font-title:'Orbitron',sans-serif;
}

/* ── Glass panel (opt-in via glass:true) ── */
.hudl-glass{
  background:rgba(12,6,30,.36)!important;
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(120,230,255,.32)!important;
  border-radius:12px;
  box-shadow:0 6px 34px rgba(0,0,0,.42),0 0 20px rgba(0,255,255,.06),inset 0 1px 0 rgba(255,255,255,.09);
  color:var(--hudl-white);
}
.hudl-font{ font-family:var(--hudl-font); }
.hudl-font h1,.hudl-font h2,.hudl-font h3,.hudl-font .hudl-title{ font-family:var(--hudl-font-title); }

/* ── Hover reaction — reactive stroke + breathing glow ── */
.hudl-p{ transition:opacity .35s,box-shadow .2s,border-color .2s,filter .2s; }
@keyframes hudl-glow{
  0%,100%{ box-shadow:0 0 16px rgba(0,255,255,.16),0 6px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.10); }
  50%    { box-shadow:0 0 32px rgba(0,255,255,.36),0 6px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.16); }
}
.hudl-p:hover{
  border-color:rgba(120,240,255,.62)!important;
  filter:brightness(1.06);
  animation:hudl-glow 1.7s ease-in-out infinite;
}

/* ── Minimise ── */
.hudl-minbtn{
  position:absolute;top:5px;right:26px;z-index:6;width:16px;height:16px;padding:0;border-radius:8px;
  border:1px solid rgba(0,255,255,.5);background:rgba(0,255,255,.12);color:var(--hudl-cyan);
  font-family:var(--hudl-font-title);font-size:.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.hudl-minbtn:hover{ background:rgba(0,255,255,.3);box-shadow:0 0 8px var(--hudl-cyan); }
.hudl-minbar{
  display:none;font-family:var(--hudl-font-title);font-size:.6rem;letter-spacing:.14em;color:var(--hudl-cyan);
  text-shadow:0 0 6px rgba(0,255,255,.4);padding:3px 6px;cursor:pointer;white-space:nowrap;
}
.hudl-minimized{ min-width:0!important;min-height:0!important;width:auto!important;height:auto!important;overflow:hidden!important;padding:4px 10px!important; }
.hudl-minimized > *{ display:none!important; }
.hudl-minimized > .hudl-minbar{ display:block!important; }

/* ── Field button (self-organize) ── */
#hudl-field{
  position:fixed;top:16px;right:62px;z-index:100001;width:36px;height:36px;border-radius:9px;
  background:rgba(0,255,255,.14);border:1px solid rgba(0,255,255,.5);color:var(--hudl-cyan);
  font-size:1.05rem;cursor:pointer;box-shadow:0 0 12px rgba(0,255,255,.2);transition:transform .15s,background .15s;
}
#hudl-field:hover{ background:rgba(0,255,255,.3);transform:scale(1.1); }

/* ── Mobile field: reflow floating panels into a scroll column ── */
body.hudl-mobile{ overflow-y:auto!important; }
body.hudl-mobile .hudl-p{
  position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;width:auto!important;max-width:94vw;margin:10px auto!important;
}

/* ── Per-panel context wishlist button ── */
.hudl-wishbtn{
  position:absolute;top:5px;right:6px;z-index:6;min-width:16px;height:16px;padding:0 3px;
  border-radius:8px;border:1px solid rgba(57,255,20,.5);background:rgba(57,255,20,.14);
  color:var(--hudl-green);font-family:var(--hudl-font-title);font-size:.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.hudl-wishbtn:hover{ background:rgba(57,255,20,.32);box-shadow:0 0 8px var(--hudl-green); }

/* ── Scale grip ── */
.hudl-resize{
  position:absolute;right:2px;bottom:2px;width:13px;height:13px;cursor:nwse-resize;z-index:6;opacity:.35;transition:opacity .15s;
  background:linear-gradient(135deg,transparent 42%,var(--hudl-cyan) 42%,var(--hudl-cyan) 56%,transparent 56%,transparent 72%,var(--hudl-cyan) 72%,var(--hudl-cyan) 86%,transparent 86%);
}
.hudl-resize:hover{ opacity:1; }
.hudl-dragging{ box-shadow:0 0 0 1px var(--hudl-cyan),0 10px 40px rgba(0,0,0,.6)!important;cursor:grabbing; }

/* ── Wishlist popup ── */
#hudl-wishpop{
  position:fixed;z-index:100000;width:206px;padding:9px 11px;display:none;font-family:var(--hudl-font);
  background:rgba(12,6,30,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(57,255,20,.35);border-radius:12px;box-shadow:0 8px 34px rgba(0,0,0,.5);color:var(--hudl-white);
}
#hudl-wishpop.show{ display:block; }
#hudl-wishpop .hp-h{ font-size:.5rem;letter-spacing:.16em;color:var(--hudl-green);text-transform:uppercase;margin-bottom:6px;font-family:var(--hudl-font-title);text-shadow:0 0 6px rgba(57,255,20,.4); }
#hudl-wishpop .hp-in{ display:flex;gap:5px;margin-bottom:6px; }
#hudl-wishpop input{ flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(57,255,20,.3);color:#fff;border-radius:5px;font-family:var(--hudl-font);font-size:.68rem;padding:4px 7px;outline:none; }
#hudl-wishpop .hp-add{ background:rgba(57,255,20,.14);border:1px solid rgba(57,255,20,.4);color:var(--hudl-green);border-radius:5px;cursor:pointer;width:24px;font-size:.8rem;flex:none; }
.hudl-hp-item{ display:flex;gap:6px;align-items:center;font-size:.6rem;color:#dde;padding:2px 3px; }
.hudl-hp-item .x{ cursor:pointer;color:#c55;margin-left:auto;opacity:.6; }
.hudl-hp-item .x:hover{ opacity:1; }
#hudl-wishpop .hp-empty{ font-size:.55rem;color:#667;font-style:italic;padding:2px 3px; }

/* ── Master toggle button ── */
#hudl-master{
  position:fixed;top:16px;right:16px;z-index:100001;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff2a0,#ffd000 42%,#ff9500);border:2px solid #fff7c0;color:#3a2600;
  font-size:1rem;cursor:pointer;box-shadow:0 0 18px #ffe600,0 0 5px rgba(255,255,255,.7) inset;transition:transform .18s,filter .2s;
}
#hudl-master:hover{ transform:scale(1.12); }
#hudl-master.off{ filter:grayscale(.6) brightness(.65);box-shadow:0 0 6px #886600; }
body.hudl-hidden .hudl-p{ opacity:0!important;pointer-events:none;transition:opacity .3s; }

/* ── Dream ↔ Dev reveal slider ── */
#hudl-reveal{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100001;display:flex;align-items:center;gap:9px;
  padding:7px 15px;font-family:var(--hudl-font);border-radius:16px;
  background:rgba(12,6,30,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(120,230,255,.28);
}
#hudl-reveal .lbl{ font-size:.68rem;line-height:1; }
#hudl-reveal input[type=range]{ width:150px;accent-color:var(--hudl-cyan); }
body.hudl-dream [data-hudl-tech="1"]{ pointer-events:none; }

/* ── Toast ── */
#hudl-toast{
  position:fixed;top:30%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:100002;font-family:var(--hudl-font-title);
  font-size:1.2rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 16px currentColor;opacity:0;
  pointer-events:none;transition:opacity .25s,transform .25s;text-align:center;color:var(--hudl-yellow);
}
#hudl-toast.show{ opacity:1;transform:translate(-50%,-50%) scale(1); }