/* ── PARTS: reticul, fișă de muchie, braindump + ecou ────────────────
   Goblinul nu are panel. E o posesie: răspunde în cutia ta (ecou),
   în fontul tău (Martian Mono) dar în culoarea evitării (rugină). */

/* ── reticul de detecție (hover pe nod) ────────────────── */
#reticle{position:fixed;z-index:8;pointer-events:none;opacity:0;transition:opacity .13s;
  transform:translate(-50%,-100%)}
#reticle.on{opacity:1}
#reticle .rb{position:relative;padding:9px 13px 10px;background:rgba(0,0,0,.9)}
#reticle .rb::before,#reticle .rb::after,#reticle .c3,#reticle .c4{
  content:'';position:absolute;width:10px;height:10px;border-style:solid;border-width:0;
  border-color:var(--rc,var(--os))}
#reticle .rb::before{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
#reticle .rb::after{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
#reticle .c3{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
#reticle .c4{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
#reticle .rl{display:flex;gap:16px;align-items:baseline;font-family:var(--inst);
  font-size:13px;letter-spacing:.06em;white-space:nowrap;color:var(--os)}
#reticle .rm{margin-top:6px;font-family:var(--inst);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--os-dim)}

/* ── fișa de muchie (hover pe legătură) ────────────────── */
#edgecard{position:fixed;z-index:9;pointer-events:none;opacity:0;transition:opacity .13s;
  transform:translate(-50%,-100%);max-width:360px;
  background:rgba(0,0,0,.94);border:1px solid rgba(230,226,214,.18);padding:10px 13px 12px}
#edgecard.on{opacity:1}
#edgecard .eh{display:flex;gap:12px;font-family:var(--inst);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--os-dim);margin-bottom:7px}
#edgecard .eh .k{color:var(--acid)}
#edgecard .src{font-family:var(--input);font-weight:500;font-size:13px;line-height:1.6;
  color:var(--os);text-transform:lowercase}
#edgecard .src em{color:var(--acid);font-style:normal}
#edgecard .meta{margin-top:8px;font-family:var(--inst);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--os-faint)}

/* ── braindump (intrarea) + ecoul goblinului ───────────── */
#dump{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:20;
  width:min(760px,92vw);background:rgba(0,0,0,.92);border:1px solid rgba(230,226,214,.11);
  padding:13px 17px 12px;transition:border-color .2s}
#dump:focus-within{border-color:rgba(201,242,77,.4)}
#dump .dh{display:flex;justify-content:space-between;gap:12px;font-family:var(--inst);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--os-dim);margin-bottom:10px}
#dump .dh .hint{color:var(--os-faint);letter-spacing:.08em}
#d-input{width:100%;background:transparent;border:0;outline:none;resize:none;
  font-family:var(--input);font-weight:500;font-size:13px;line-height:1.75;color:var(--os);
  caret-color:var(--acid);min-height:2.4em;max-height:8em;text-transform:lowercase}
#d-input::placeholder{color:var(--os-faint)}

/* ecoul: apare sub textul tău, rămâne până la următorul braindump.
   ▲ rugină = semnătura posesiei. */
.echo{display:none;font-family:var(--input);font-weight:600;font-size:13px;line-height:1.7;
  color:var(--rugina);margin-top:9px;padding-top:10px;
  border-top:1px solid rgba(201,112,47,.25);text-transform:lowercase}
.echo.on{display:block}
.echo .who{color:var(--os-faint);font-weight:500;margin-right:6px}
.echo .cur{display:inline-block;width:7px;height:13px;background:var(--rugina);
  vertical-align:-2px;margin-left:3px;animation:blink 1s steps(1) infinite}

/* butonul demo: instrument geometric, discret, colț dreapta-jos al cutiei.
   Nu concurează cu braindump-ul — e o portiță de intrare pentru testeri. */
#demo{position:absolute;right:10px;bottom:8px;background:transparent;
  border:1px solid rgba(230,226,214,.16);color:var(--os-faint);cursor:pointer;
  font-family:var(--inst);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;transition:color .15s,border-color .15s}
#demo:hover{color:var(--acid);border-color:rgba(201,242,77,.4)}
#demo:disabled{opacity:.35;cursor:default;color:var(--os-faint);border-color:rgba(230,226,214,.16)}

@media (prefers-reduced-motion: reduce){
  .echo .cur{animation:none}
}