/* hud.css — EN samlad VERKTYG-HUD. Samlar alla spridda paneler under kategorier,
   pekar ut elementet ett verktyg gäller, och nya kategorier (Animation/3D/Impeccable)
   som appliceras på ett valt element. Döljer de gamla panelerna; surfar en åt gången. */

/* dölj de spridda panelerna när HUD:en styr */
html.hud-on .fx-panel, html.hud-on .bgsw, html.hud-on .btnlab, html.hud-on .fl-fab,
html.hud-on .fl-panel, html.hud-on .laysw, html.hud-on .edit-tog, html.hud-on .edit-panel { display: none !important; }
/* surfa ETT verktyg åt gången ur den samlade HUD:en */
html.hud-show-cursor .fx-panel { display: block !important; }
html.hud-show-knapp .btnlab { display: block !important; }
html.hud-show-bakgrund .bgsw { display: block !important; }
html.hud-show-font .fl-fab, html.hud-show-font .fl-panel { display: block !important; }
html.hud-show-layout .laysw { display: flex !important; }
html.hud-show-element .edit-tog { display: block !important; }
html.hud-show-element .edit-panel.on { display: block !important; }

/* launcher + panel */
.hud-fab { position: fixed; left: clamp(.7rem,2vw,1.4rem); bottom: clamp(.7rem,2vw,1.4rem); z-index: 5000;
  background: rgba(6,12,14,.9); backdrop-filter: blur(14px); border: 1px solid rgba(79,227,212,.35); color: #4fe3d4;
  font: 700 11px/1 "SF Mono",ui-monospace,monospace; letter-spacing: .18em; padding: .8em 1.1em; border-radius: 99px; cursor: pointer; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.hud-fab.on { background: #4fe3d4; color: #04110f; }
.hud-panel { position: fixed; left: clamp(.7rem,2vw,1.4rem); bottom: calc(clamp(.7rem,2vw,1.4rem) + 3rem); z-index: 5000;
  width: min(340px,92vw); max-height: 74vh; display: none; grid-template-rows: auto 1fr; overflow: hidden;
  background: rgba(6,12,14,.95); backdrop-filter: blur(18px); border: 1px solid rgba(79,227,212,.24); border-radius: 16px;
  color: #e8f4f2; font-family: "SF Mono",ui-monospace,monospace; box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.hud-panel.on { display: grid; }
.hud-h { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(79,227,212,.14); font-size: 11px; letter-spacing: .24em; }
.hud-h .hud-dot { width: 8px; height: 8px; border-radius: 50%; background: #4fe3d4; box-shadow: 0 0 8px #4fe3d4; }
.hud-h .hud-target-lbl { margin-left: auto; color: #8fb0ac; font-size: 9px; letter-spacing: .1em; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-body { display: grid; grid-template-columns: 92px 1fr; min-height: 0; }
.hud-cats { border-right: 1px solid rgba(79,227,212,.12); overflow-y: auto; padding: 6px; }
.hud-cats button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #8fb0ac;
  font: 600 10px/1.2 "SF Mono",monospace; letter-spacing: .04em; padding: .7em .6em; border-radius: 8px; cursor: pointer; margin-bottom: 2px; }
.hud-cats button:hover { color: #e8f4f2; background: rgba(255,255,255,.03); }
.hud-cats button.on { background: rgba(79,227,212,.14); color: #4fe3d4; }
.hud-cats .hud-cat-grp { font-size: 8px; letter-spacing: .2em; color: #5a7570; padding: 10px .6em 4px; }
.hud-content { padding: 12px; overflow-y: auto; min-height: 0; }
.hud-content .hud-note { color: #8fb0ac; font-size: 10.5px; line-height: 1.6; margin: 0 0 10px; }
.hud-content .hud-note b { color: #4fe3d4; }
.hud-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hud-chip { border: 1px solid rgba(232,244,242,.16); background: none; color: #8fb0ac; font: 600 10px/1 "SF Mono",monospace;
  letter-spacing: .03em; padding: .55em .7em; border-radius: 7px; cursor: pointer; transition: .16s; }
.hud-chip:hover { border-color: rgba(79,227,212,.5); color: #e8f4f2; }
.hud-chip.on { background: #4fe3d4; border-color: #4fe3d4; color: #04110f; font-weight: 700; }
.hud-btn { display: block; width: 100%; margin-top: 8px; border: 1px solid rgba(79,227,212,.4); background: rgba(79,227,212,.08);
  color: #4fe3d4; font: 600 10px/1 "SF Mono",monospace; letter-spacing: .12em; padding: .8em; border-radius: 8px; cursor: pointer; }
.hud-btn:hover { background: rgba(79,227,212,.16); }

/* targeting — peka på elementet ett verktyg gäller */
.hud-target-hi { outline: 2px solid #4fe3d4 !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(79,227,212,.12) !important; transition: outline .15s; }
.hud-pick [data-eid] { cursor: crosshair !important; }
.hud-pick [data-eid]:hover { outline: 1px dashed rgba(79,227,212,.6); outline-offset: 2px; }

/* ── nya effekter (appliceras på valt element, persistas) ── */
/* 3D */
.hud-fx-float3d { animation: hudFloat 4s ease-in-out infinite; }
@keyframes hudFloat { 0%,100%{transform:translateY(0) rotateX(0)} 50%{transform:translateY(-10px) rotateX(4deg)} }
.hud-fx-pop { transition: transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .3s; }
.hud-fx-pop:hover { transform: translateZ(0) scale(1.05); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.hud-fx-flip { transition: transform .5s; transform-style: preserve-3d; }
.hud-fx-flip:hover { transform: rotateY(12deg) rotateX(-6deg); }
.hud-fx-depth { transition: transform .3s; will-change: transform; }
/* tilt = JS pointer */
/* Impeccable */
.hud-fx-lift { transition: transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .3s; }
.hud-fx-lift:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.hud-fx-glow { transition: text-shadow .3s, box-shadow .3s; }
.hud-fx-glow:hover { text-shadow: 0 0 18px rgba(79,227,212,.7); box-shadow: 0 0 22px rgba(79,227,212,.25); }
.hud-fx-underline { position: relative; }
.hud-fx-underline::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: #4fe3d4; transition: right .35s cubic-bezier(.2,.9,.2,1); }
.hud-fx-underline:hover::after { right: 0; }
.hud-fx-shimmer { background: linear-gradient(90deg,currentColor 40%,#4fe3d4 50%,currentColor 60%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; animation: hudShimmer 3s linear infinite; }
@keyframes hudShimmer { to { background-position: -200% 0; } }
/* magnet = JS pointer */

@media (max-width: 560px) { .hud-body { grid-template-columns: 78px 1fr; } }