/* ── Popup de item ────────────────────────────────────────────────────────────
   ES EL MISMO del juego: copiado tal cual de la hoja que sirve el Layout Builder
   (server/routes/layoutBuilder.js), para que la guía y el juego muestren el item
   igual. Si allá se retoca, se vuelve a copiar acá — no se rediseña aparte.
   Lo único que agrega esta hoja es el modo PANEL (.hud-panel), para mostrar la
   misma ficha fija dentro de la página del item, no como globo flotante. */

/* ── HUD del item (al pasar el mouse) ─────────────────────────────────────
   Formato aprobado por Juan (artifact "Tooltips de item · The Holy War"): mismo
   armado para TODAS las rarezas — imagen del item + poder arriba, y debajo un grupo
   por tipo de efecto (al portador · a la unidad · buff · ulti · spell de héroe). La
   rareza sólo cambia el METAL del marco y el color de acento; el que no tiene datos
   no se dibuja. */
#thw-hud{position:fixed;z-index:100000;display:none;pointer-events:none;
  --ink:#e8e4d8; --muted:#8b8798; --line:#2a2636;
  --port:#d9c48a; --unit:#7fc9e6; --buff:#c9a0f0; --ulti:#7fd6a0; --hero:#f0a95a; --pos:#7fd6a0;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  width:270px;border-radius:14px;padding:5px;color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,#15141c,#101018);
  box-shadow:0 0 0 1px #000, 0 16px 44px rgba(0,0,0,.55)}
/* marco metálico (el "cónico" por rareza) + grano */
#thw-hud::before{content:"";position:absolute;inset:0;border-radius:14px;padding:5px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--conic);
  background-size:90px 90px,100% 100%;background-blend-mode:overlay;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;filter:saturate(1.05) contrast(1.06)}
#thw-hud::after{content:"";position:absolute;inset:5px;border-radius:10px;pointer-events:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -2px 3px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.35)}
#thw-hud .inner{position:relative;border-radius:10px;padding:15px 17px 16px;z-index:1;
  background:linear-gradient(180deg,#15141ce6,#101018f2)}
#thw-hud .name{font-family:var(--serif);font-weight:700;font-size:1.32rem;text-align:center;line-height:1.06;
  text-transform:uppercase;color:#f3ede0;text-shadow:0 1px 0 #000,0 0 16px var(--glow);margin:2px 0 11px}
#thw-hud .head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
#thw-hud .icon{width:72px;height:72px;flex:0 0 72px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 120%, var(--glow), rgba(10,11,15,.9) 72%);
  box-shadow:0 0 12px var(--glow),inset 0 0 0 1px rgba(0,0,0,.4)}
#thw-hud .icon img{width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
#thw-hud .meta{flex:1;min-width:0}
#thw-hud .rarity{font-family:var(--serif);font-size:.96rem;font-weight:700;color:var(--acc);letter-spacing:.03em}
#thw-hud .power{font-family:var(--mono);font-size:1.55rem;font-weight:700;color:#f3ede0;line-height:1;margin:2px 0 3px;font-variant-numeric:tabular-nums}
#thw-hud .sub{font-size:.78rem;color:var(--muted)}
#thw-hud .sep{height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.5;margin:11px 0}
#thw-hud .grp{margin:10px 0 0}
#thw-hud .grp .gh{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:4px;color:var(--muted)}
#thw-hud .stat{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;line-height:1.5;padding:1px 0}
#thw-hud .stat .k{color:#cdc7ba}
#thw-hud .stat .v{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;color:var(--pos)}
#thw-hud .stat .tgt{color:var(--muted);font-size:.74rem}
#thw-hud .stat .rng{color:var(--muted);font-size:.72rem;font-weight:400}
#thw-hud .grp.port .gh{color:var(--port)} #thw-hud .grp.unit .gh{color:var(--unit)}
#thw-hud .grp.buff .gh{color:var(--buff)} #thw-hud .grp.ulti .gh{color:var(--ulti)} #thw-hud .grp.hero .gh{color:var(--hero)}
#thw-hud .foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
#thw-hud .setb .sn{color:var(--acc);font-weight:700;font-size:.82rem;font-family:var(--serif);margin-bottom:4px}
#thw-hud .setb .sp{font-size:.76rem;color:var(--port);line-height:1.45}
#thw-hud .setb .sp b{color:var(--acc)}
#thw-hud .setb .sp.off{color:#6b6478}
#thw-hud .req{color:#9a8f7a;font-size:.7rem;margin-top:6px}
#thw-hud .req.no{color:#ff8a8a}
/* Paletas de rareza: sólo metal + acento; todo lo demás es idéntico. */
#thw-hud.r-comun{--acc:#c4c8d0;--glow:rgba(180,188,200,.25);
  --conic:conic-gradient(from 130deg at 50% 38%,#3a3a42,#dfe2e8,#8a8e96,#26262c,#eef0f4,#6a6e76,#dfe2e8,#4a4a52,#2a2a30,#dfe2e8,#9aa0a8,#3a3a42)}
/* Poco común: AZUL, el mismo de la escala del juego (config/runes.js). El verde quedó
   reservado para los conjuntos, así que acá no puede repetirse. */
#thw-hud.r-poco{--acc:#5a9bff;--glow:rgba(58,130,247,.3);
  --conic:conic-gradient(from 130deg at 50% 38%,#122444,#a8c9ff,#3a6fd0,#0b1526,#d0e2ff,#2a4f96,#a8c9ff,#16294a,#0b1526,#a8c9ff,#3a82f7,#122444)}
#thw-hud.r-epico{--acc:#c9a0f0;--glow:rgba(157,92,208,.3);
  --conic:conic-gradient(from 130deg at 50% 38%,#281640,#dcb8ff,#7b4fb0,#160a28,#ecd4ff,#5a3a8a,#dcb8ff,#2e1a44,#160a28,#dcb8ff,#a878e0,#281640)}
#thw-hud.r-raro{--acc:#e2b455;--glow:rgba(217,164,65,.3);
  --conic:conic-gradient(from 130deg at 50% 38%,#6b4a1e,#f7e2a6,#c9932f,#3f2c13,#f2d488,#9a6a28,#fcecb6,#7a5320,#4a3316,#f7e2a6,#b8842f,#6b4a1e)}
/* Conjunto: verde, fuera de la escala común→legendario (es otra categoría). */
#thw-hud.r-conjunto{--acc:#3ec46d;--glow:rgba(62,196,109,.34);
  --conic:conic-gradient(from 130deg at 50% 38%,#123222,#8ff0b4,#2f9a5e,#0b2416,#c4f7d8,#1f6a3f,#8ff0b4,#17402a,#0b2416,#8ff0b4,#3ec46d,#123222)}
#thw-hud.r-legend{--acc:#f5a95a;--glow:rgba(224,134,58,.38);
  --conic:conic-gradient(from 130deg at 50% 38%,#5a2e10,#ffd9a0,#e0863a,#3a1c0a,#ffe4b8,#b8641e,#ffd9a0,#7a3e18,#4a2610,#ffd9a0,#f0a95a,#5a2e10)}


/* ── Modo panel: la misma ficha, fija en la página ───────────────────────── */
/* El id gana en especificidad: el modo panel tiene que anular #thw-hud. */
#thw-hud.hud-panel{position:static;display:block;width:100%;max-width:340px;pointer-events:auto;
  left:auto;top:auto;margin:0}
#thw-hud.hud-panel .inner{padding:17px 19px 18px}
@media (max-width:700px){ .hud-panel{max-width:none} }