/* Biblioteca de World of Zillaz - maqueta art159. Encima de vidrio.css (Vidrio aireado v1.0): solo layout y componentes de lista. Prefijo .lib-.
   Listas largas: las tablas van sobre fondo estatico en nivel LIGERO (data-glass="light" en <html>): sin backdrop-filter. */
html { background:#0B1020; color-scheme:dark; }
body.lib { margin:0; min-height:100vh; background:#0B1020; font-family:var(--vd-font); }
.lib :where(a:not(.vd-btn)) { color:var(--accent-hi); }
.lib img { image-rendering:auto; }
.lib .px { image-rendering:pixelated; }
.lib [hidden] { display:none !important; }
.lib-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lib-skip { position:absolute; left:8px; top:-48px; z-index:10; } .lib-skip:focus { top:8px; }

/* ---------- cabecera (franja del portal, mas baja) ---------- */
.lib-hero { position:relative; height:156px; overflow:hidden; border-bottom:1px solid var(--vd-line); }
.lib-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(55% 130% at 18% 0%,rgba(151,198,119,.30),transparent 62%),radial-gradient(45% 110% at 92% 0%,rgba(20,241,149,.14),transparent 62%),linear-gradient(180deg,#16233F,#0F1830); }   /* degradado vidrio: sin imagen del juego */
.lib-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,16,32,0) 40%,#0B1020 100%); }
.lib-hero__in { position:relative; z-index:1; max-width:1240px; height:100%; margin:0 auto; padding:0 16px; display:flex; align-items:center; gap:18px; }
.lib-logo { height:104px; width:auto; display:block; flex:0 0 auto; }
.lib-hero__title { display:flex; flex-direction:column; gap:2px; min-width:0; }
.lib-hero__title b { font:600 26px/1.1 'Chakra Petch',var(--vd-font); letter-spacing:.06em; text-transform:uppercase; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.lib-hero__title span { font-size:12px; color:var(--vd-text); text-shadow:0 1px 6px rgba(0,0,0,.7); }
.lib-hero__side { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.lib-lang { display:flex; gap:6px; } .lib-lang .vd-chip { cursor:pointer; background:rgba(var(--vd-tint),.7); }
.lib-lang .vd-chip.is-active { cursor:default; background:var(--accent); border-color:transparent; color:var(--accent-ink); }
.lib-lang .vd-chip:focus-visible { outline:2px solid var(--accent-hi); outline-offset:2px; }
.lib-hero .vd-btn--primary { margin:5px; }

/* ---------- cuadricula: menu + contenido ---------- */
.lib-wrap { max-width:1240px; margin:0 auto; padding:18px 16px 40px; display:grid; grid-template-columns:232px minmax(0,1fr); gap:22px; align-items:start; }
.lib-menu { position:sticky; top:12px; display:flex; flex-direction:column; gap:2px; }
.lib-menu .vd-menu-item { height:42px; }
.lib-menu .vd-ico { width:20px; height:20px; color:var(--accent-hi); }
.lib-menu .vd-menu-item .n { margin-left:auto; font-size:11px; color:var(--vd-dim); font-weight:500; padding:2px 7px; border-radius:var(--vd-rs); background:var(--vd-fill); }
.lib-menu .vd-menu-item.is-active .n { color:var(--accent-ink); background:var(--accent); }
.lib-menu__note { margin:14px 10px 0; font-size:11px; line-height:1.5; color:var(--vd-dim); }
.lib-main { min-width:0; }
.lib-panel.vd-panel { overflow:visible; }
.lib-panel .vd-titlebar { min-height:46px; font-size:12px; }
.lib-panel .vd-titlebar .vd-ico { width:18px; height:18px; }
.lib-body { padding:0 var(--vd-pad) var(--vd-pad); }
.lib-desc { margin:12px 0 14px; max-width:78ch; color:var(--vd-dim); font-size:13.5px; line-height:1.55; }

/* ---------- barra de herramientas ---------- */
.lib-tools { display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; margin-bottom:12px; }
.lib-search { position:relative; flex:1 1 260px; min-width:0; max-width:420px; }
.lib-search .vd-ico { position:absolute; left:11px; top:50%; width:16px; height:16px; margin-top:-8px; color:var(--vd-dim); pointer-events:none; }
.lib-search .vd-field { padding-left:34px; padding-right:34px; }
.lib-search__clear { position:absolute; right:3px; top:50%; transform:translateY(-50%); }
.lib-select { flex:0 0 auto; width:auto; min-width:150px; padding-right:30px; cursor:pointer;
  background:var(--vd-fill-lo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F4F6FB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 11px center; }
.lib-select option { background:#141B30; color:#F4F6FB; }
.lib-chips { display:flex; flex-wrap:wrap; gap:6px; }
.lib-chip { appearance:none; display:inline-flex; align-items:center; gap:7px; height:var(--vd-h-sm); padding:0 11px; cursor:pointer; white-space:nowrap; font:var(--vd-w-strong) 12px/1 var(--vd-font); color:var(--vd-text);
  background:var(--vd-fill); border:1px solid var(--vd-line); border-radius:var(--vd-r); transition:background var(--vd-t),border-color var(--vd-t); }
.lib-chip:hover { background:var(--vd-fill-hi); border-color:var(--vd-line-hi); }
.lib-chip[aria-pressed="true"] { background:color-mix(in srgb,var(--accent) 24%,transparent); border-color:color-mix(in srgb,var(--accent) 66%,transparent); }
.lib-chip:focus-visible { outline:2px solid var(--accent-hi); outline-offset:2px; }
.lib-chip .c { font-size:10.5px; color:var(--vd-dim); }
.lib-chips--scroll { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px; margin:-2px; max-width:100%; } .lib-chips--scroll::-webkit-scrollbar { display:none; }
.lib-bar2 { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; margin-bottom:10px; }
.lib-count { font-size:12px; color:var(--vd-dim); }
.lib-viewseg { display:flex; gap:3px; padding:3px; background:var(--vd-fill-lo); border:1px solid var(--vd-line); border-radius:var(--vd-r); }
.lib-viewseg .vd-btn { height:calc(var(--vd-h-sm) - 4px); padding:0 10px; border-color:transparent; background:transparent; font-size:12px; }
.lib-viewseg .vd-btn[aria-pressed="true"] { background:color-mix(in srgb,var(--accent) 24%,transparent); border-color:color-mix(in srgb,var(--accent) 60%,transparent); }
.lib-viewseg .vd-ico { width:15px; height:15px; }

/* ---------- tabla ordenable ---------- */
.lib-tablebox { border:1px solid var(--vd-line); border-radius:var(--vd-r); background:rgba(8,12,24,.55); overflow-x:clip; }   /* clip (no scroll) para que el encabezado siga pegado */
.lib-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.lib-table th, .lib-table td { padding:0 12px; height:46px; text-align:left; vertical-align:middle; border-bottom:1px solid rgba(255,255,255,.07); }
.lib-table tbody tr:last-child td { border-bottom:0; }
.lib-table thead th { position:sticky; top:0; z-index:2; height:38px; padding:0; background:#10172B; border-bottom:1px solid var(--vd-line); font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--vd-dim); }
.lib-table thead th:first-child { border-top-left-radius:calc(var(--vd-r) - 1px); } .lib-table thead th:last-child { border-top-right-radius:calc(var(--vd-r) - 1px); }
.lib-th { appearance:none; display:flex; align-items:center; gap:5px; width:100%; height:100%; padding:0 12px; cursor:pointer; text-align:left; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; background:transparent; border:0; }
.lib-th:hover { color:var(--vd-text); background:var(--vd-fill); }
.lib-th:focus-visible { outline:2px solid var(--accent-hi); outline-offset:-3px; border-radius:var(--vd-rs); }
.lib-th .vd-ico { width:12px; height:12px; stroke-width:2.2; opacity:0; } th[aria-sort="ascending"] .lib-th .vd-ico, th[aria-sort="descending"] .lib-th .vd-ico { opacity:1; color:var(--accent-hi); }
th[aria-sort="ascending"] .lib-th .vd-ico { transform:rotate(180deg); } th[aria-sort] .lib-th { color:var(--vd-text); }
.lib-table th.num, .lib-table td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .lib-table th.num .lib-th { justify-content:flex-end; }
.lib-table tbody tr { transition:background var(--vd-t); } .lib-table tbody tr:hover { background:var(--vd-fill); }
.lib-table tr.is-link { cursor:pointer; }
.lib-table td.words { font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:12.5px; color:var(--accent-hi); white-space:nowrap; }
.lib-table .nm { display:flex; align-items:center; gap:11px; min-width:0; font-weight:500; }
.lib-table .nm a { color:var(--vd-text); text-decoration:none; } .lib-table .nm a:hover { color:var(--accent-hi); text-decoration:underline; } .lib-table .nm a:focus-visible { outline:2px solid var(--accent-hi); outline-offset:3px; border-radius:4px; }
.lib-table .nm small { display:block; font-weight:400; font-size:11.5px; color:var(--vd-dim); }
.lib-table .dim { color:var(--vd-dim); }
.lib-table .sp { margin:2px 0; }
.lib-table small.m-sub, .lib-table .m-vocs { display:none; }
.lib-ico { color:var(--accent-hi); width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; background:var(--vd-fill-lo); border:1px solid var(--vd-line); border-radius:var(--vd-r); overflow:hidden; }
.lib-ico .vd-ico { width:20px; height:20px; color:var(--accent-hi); }
.lib-ico--round { border-radius:50%; } .lib-ico--sm { width:30px; height:30px; border-radius:var(--vd-rm); } .lib-ico--sm .vd-ico { width:16px; height:16px; color:var(--vd-dim); }
.lib-vocs { display:flex; gap:4px; align-items:center; }
.lib-tag { display:inline-flex; align-items:center; height:22px; padding:0 8px; font-size:11px; font-weight:500; border-radius:var(--vd-rs); color:var(--vd-text); background:var(--vd-fill); border:1px solid var(--vd-line); white-space:nowrap; }
.lib-tag--attack { color:#FFB3BB; background:rgba(255,118,132,.12); border-color:rgba(255,118,132,.4); }
.lib-tag--healing { color:#9DF3C9; background:rgba(20,241,149,.1); border-color:rgba(20,241,149,.4); }
.lib-tag--support { color:#B9D4FF; background:rgba(111,168,255,.12); border-color:rgba(111,168,255,.4); }
.lib-tag--conjure { color:#F5DDA0; background:rgba(243,200,115,.12); border-color:rgba(243,200,115,.4); }
.lib-tag--prem { color:var(--accent-ink); background:var(--vd-xp); border-color:transparent; }
.lib-more td { height:56px; text-align:center; color:var(--vd-dim); font-size:12px; }
.lib-empty { padding:34px 12px; text-align:center; color:var(--vd-dim); }
.lib-empty .vd-btn { margin-top:12px; }

/* ---------- tarjetas de monstruo ---------- */

/* ---------- fichas (monstruo / objeto) ---------- */
.lib-crumb { display:flex; align-items:center; gap:8px; margin:12px 0 14px; font-size:12px; color:var(--vd-dim); }
.lib-crumb a { display:inline-flex; align-items:center; gap:4px; color:var(--accent-hi); text-decoration:none; } .lib-crumb .vd-ico { width:14px; height:14px; } .lib-crumb a:hover { text-decoration:underline; }
.lib-name { margin:0; font:600 24px/1.15 'Chakra Petch',var(--vd-font); letter-spacing:.03em; }
.lib-sub { display:flex; flex-wrap:wrap; gap:6px; }
.lib-block { margin-bottom:18px; } .lib-block:last-child { margin-bottom:0; }
.lib-block h3 { margin:0 0 8px; font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--vd-dim); }
.lib-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.lib-stat { padding:9px 11px; background:var(--vd-fill-lo); border:1px solid var(--vd-line); border-radius:var(--vd-r); }
.lib-stat small { display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--vd-dim); }
.lib-stat b { display:block; margin:2px 0 5px; font:300 24px/1.1 var(--vd-font); font-variant-numeric:tabular-nums; }
.lib-stat .vd-bar { height:5px; border:0; }
.lib-kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:0; font-size:13px; } .lib-kv dt { color:var(--vd-dim); } .lib-kv dd { margin:0; }
.lib-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.lib-list li { display:flex; align-items:center; gap:10px; min-height:40px; padding:4px 2px; border-bottom:1px solid rgba(255,255,255,.07); font-size:13px; } .lib-list li:last-child { border-bottom:0; }
.lib-list .r { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--vd-dim); white-space:nowrap; }
.lib-list a { color:var(--vd-text); text-decoration:none; } .lib-list a:hover { color:var(--accent-hi); text-decoration:underline; }
.lib-list .lib-ico { width:34px; height:34px; border-radius:var(--vd-rm); } .lib-list .lib-pct { display:inline-block; min-width:48px; text-align:right; font-weight:500; color:var(--vd-text); }
.lib-cols2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
.lib-minimap { position:relative; border:1px solid var(--vd-line); border-radius:var(--vd-r); overflow:hidden; background:#1A345C; }
.lib-minimap img { display:block; width:100%; height:auto; }
.dot { position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:#FFD84D; box-shadow:0 0 0 1.5px rgba(8,12,24,.85),0 0 8px #FFD84D; }

/* ---------- NPCs y logros ---------- */
.lib-avatar { width:36px; height:36px; font-size:13px; }
.lib-achs { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.lib-ach { display:flex; gap:12px; padding:14px; background:rgba(255,255,255,.045); border:1px solid var(--vd-line); border-radius:var(--vd-r); }
.lib-ach .lib-ico { width:44px; height:44px; } .lib-ach .lib-ico .vd-ico { width:22px; height:22px; color:var(--vd-xp); }
.lib-ach--soon { border-style:dashed; background:transparent; } .lib-ach--soon .lib-ico .vd-ico { color:var(--vd-dim); }
.lib-ach h3 { margin:0 0 3px; font:600 15px/1.25 'Chakra Petch',var(--vd-font); } .lib-ach p { margin:0 0 8px; font-size:12.5px; color:var(--vd-dim); }
.lib-ach .goal { font-size:11.5px; color:var(--accent-hi); }

/* ---------- mapa ---------- */
.lib-mapgrid { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:14px; align-items:start; }
.lib-mapframe { position:relative; border:1px solid var(--vd-line); border-radius:var(--vd-r); overflow:hidden; background:#1A345C; }
.lib-mapview { height:min(64vh,640px); min-height:260px; overflow:auto; cursor:grab; touch-action:pan-x pan-y; scrollbar-width:thin; }
.lib-mapview.drag { cursor:grabbing; user-select:none; }
.lib-mapcanvas { position:relative; }
.lib-mapcanvas > img { display:block; width:100%; height:100%; image-rendering:pixelated; user-select:none; -webkit-user-drag:none; }
.lib-pin { position:absolute; transform:translate(-50%,-100%); width:30px; height:30px; padding:0; display:grid; place-items:center; color:var(--accent-ink); background:var(--accent-hi); border:2px solid #0B1016; border-radius:50% 50% 50% 4px; rotate:-45deg; cursor:pointer; }
.lib-pin > * { rotate:45deg; } .lib-pin .vd-ico { width:15px; height:15px; stroke-width:2.2; }
.lib-pin:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.lib-pin__label { position:absolute; left:50%; top:-26px; translate:-50% 0; rotate:45deg; padding:2px 8px; white-space:nowrap; font:500 11px/1.4 var(--vd-font); color:var(--vd-text); background:rgba(8,12,24,.9); border:1px solid var(--vd-line); border-radius:var(--vd-rs); pointer-events:none; }
.lib-mapzoom { position:absolute; right:10px; top:10px; z-index:2; display:flex; flex-direction:column; gap:6px; }
.lib-mapzoom .vd-btn { background:rgba(var(--vd-tint),.9); }
.lib-mapnote { position:absolute; left:10px; bottom:10px; z-index:2; padding:4px 10px; font-size:11px; color:var(--vd-dim); background:rgba(var(--vd-tint),.9); border:1px solid var(--vd-line); border-radius:var(--vd-rs); }
.lib-legend { display:flex; flex-direction:column; gap:14px; }
.lib-legend ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:12.5px; }
.lib-legend li { display:flex; align-items:center; gap:9px; }
.sw { width:16px; height:16px; flex:0 0 auto; border-radius:4px; border:1px solid rgba(255,255,255,.25); }
.lib-banner { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; padding:9px 12px; font-size:12.5px; background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); border-radius:var(--vd-r); }

.lib-foot { max-width:1240px; margin:0 auto; padding:0 16px 30px; font-size:11.5px; color:var(--vd-dim); }

/* =========================== RESPONSIVO =========================== */
@media (max-width:1060px) {
  .lib-wrap { grid-template-columns:1fr; gap:14px; padding-top:12px; }
  .lib-menu { position:sticky; top:0; z-index:5; flex-direction:row; gap:4px; padding:8px 0; margin:0 -16px; padding-inline:16px; overflow-x:auto; scrollbar-width:none; background:rgba(11,16,32,.96); border-bottom:1px solid var(--vd-line); }
  .lib-menu::-webkit-scrollbar { display:none; }
  .lib-menu .vd-menu-title, .lib-menu__note { display:none; }
  .lib-menu .vd-menu-item { flex:0 0 auto; height:var(--vd-h); padding:0 12px; }
  .lib-menu .vd-menu-item .vd-ico { display:none; }
  .lib-mapgrid { grid-template-columns:1fr; }
  .lib-legend { flex-direction:row; flex-wrap:wrap; gap:14px 28px; }
  .lib-legend ul { flex-direction:row; flex-wrap:wrap; gap:8px 16px; }
}
@media (max-width:860px) {
  .lib-cols2 { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .lib-table .c-opt { display:none; }
  .lib-table th, .lib-table td { padding:0 8px; } .lib-th { padding:0 8px; }
  .lib-table small.m-sub { display:block; margin-top:1px; font-size:11.5px; color:var(--vd-dim); } .lib-table .m-vocs { display:block; margin-top:4px; }
  .lib-select { min-width:0; flex:1 1 140px; }
}
@media (max-width:560px) {
  .lib-hero { height:112px; } .lib-logo { height:62px; } .lib-hero__title { display:none; }
  .lib-hero__in { padding:0 10px; gap:8px; }
  .lib-hero__side { gap:8px; } .lib-hero__side .vd-btn { padding:0 12px; height:var(--vd-h-sm); font-size:12px; } .lib-hero .vd-btn--primary { margin:4px 4px 4px 0; }
  .lib-lang .vd-chip { height:26px; padding:0 8px; font-size:11px; }
  .lib-wrap { padding:10px 10px 30px; } .lib-menu { margin:0 -10px; padding-inline:10px; }
  .lib-body { padding:0 10px 10px; } .lib-desc { font-size:13px; margin:10px 0 12px; }
  .lib-search { max-width:none; flex-basis:100%; }
  .lib-table { font-size:12.5px; } .lib-table th, .lib-table td { padding:0 5px; } .lib-th { padding:0 5px; font-size:10px; letter-spacing:.06em; }
  .lib-table td:first-child, .lib-table th:first-child .lib-th { padding-left:8px; }
  .lib-vocs { gap:2px; }   .lib-ico { width:34px; height:34px; }   .lib-table .nm { gap:8px; } .lib-table .nm > .lib-ico { display:none; }   /* en 390 px el icono quita ancho a las columnas de numeros */
  .lib-name { font-size:21px; }
  .lib-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lib-mapview { height:56vh; }
}
/* celular en horizontal (812x375): cabecera mini y menu como riel lateral (la altura es lo escaso) */
@media (max-height:520px) and (min-width:561px) {
  .lib-hero { height:68px; } .lib-logo { height:52px; } .lib-hero__title { display:none; }
  .lib-hero__side { flex-direction:row; align-items:center; gap:10px; } .lib-hero .vd-btn--primary { margin:4px; }
  .lib-wrap { grid-template-columns:132px minmax(0,1fr); gap:10px; padding:8px 12px 20px; }
  .lib-menu { position:sticky; top:6px; flex-direction:column; gap:2px; margin:0; padding:0; overflow:visible; background:none; border:0; }
  .lib-menu .vd-menu-title { display:block; padding:2px 8px; } .lib-menu .vd-menu-item { height:var(--vd-h-sm); padding:0 8px; gap:6px; font-size:12.5px; } .lib-menu .vd-menu-item .vd-ico { display:none; }
  .lib-menu .vd-menu-item .n { padding:1px 5px; font-size:10px; }
  .lib-panel .vd-titlebar { min-height:34px; } .lib-body { padding:0 10px 10px; } .lib-desc { margin:8px 0 10px; font-size:12.5px; }
  .lib-tools { margin-bottom:8px; gap:8px; } .lib-search { flex-basis:200px; }
  .lib-table th, .lib-table td { height:40px; padding:0 8px; } .lib-table thead th { height:34px; padding:0; } .lib-th { padding:0 8px; }
  .lib-mapgrid { grid-template-columns:minmax(0,1fr) 150px; } .lib-legend { flex-direction:column; gap:10px; } .lib-legend ul { flex-direction:column; gap:5px; }
  .lib-mapview { height:68vh; min-height:200px; }
  .lib-ratenote { font-size:11px; flex-basis:200px; } .lib-ratebox { margin-bottom:6px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

/* ===================== v2: sin arte; pastillas, resumen, tasas, mapa con pisos ===================== */
.lib-vocs { display:flex; gap:4px; align-items:center; }
.lib-vocs .v { width:24px; height:24px; display:grid; place-items:center; font:600 12px/1 var(--vd-font); border-radius:var(--vd-rs); color:var(--vd-text); border:1px solid transparent; }
.v-knight { background:rgba(255,118,132,.22); border-color:rgba(255,118,132,.6) !important; }
.v-paladin { background:rgba(243,200,115,.2); border-color:rgba(243,200,115,.6) !important; }
.v-sorcerer { background:rgba(111,168,255,.22); border-color:rgba(111,168,255,.6) !important; }
.v-druid { background:rgba(20,241,149,.16); border-color:rgba(20,241,149,.55) !important; }
.lib-chip .vd-ico { width:15px; height:15px; color:var(--accent-hi); }
.lib-spdesc { display:block; max-width:46ch; margin-top:2px; font-size:11.5px; line-height:1.4; color:var(--vd-dim); }
.lib-table td .nm small.lib-spdesc { display:block; }
.lib-catnote { margin:0 0 12px; padding:9px 12px; font-size:13px; line-height:1.5; color:var(--vd-dim); border-left:2px solid var(--accent); background:var(--vd-fill); border-radius:0 var(--vd-r) var(--vd-r) 0; }
.lib-summary { margin:0; font-size:14.5px; line-height:1.6; max-width:70ch; }
.lib-ratebox { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 10px; }
.lib-ratebox .lib-ratenote { margin:0; flex:1 1 280px; }
.lib-seglabel { align-self:center; padding:0 8px 0 10px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--vd-dim); }
/* mapa: herramientas, pisos, resultados */
.lib-maptools { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-bottom:10px; }
.lib-floor { display:flex; align-items:center; gap:6px; }
.lib-floor__n { min-width:128px; text-align:center; font-size:13px; font-weight:500; }
.lib-npctoggle { font-size:12.5px; }
.lib-results, .lib-info { margin-bottom:10px; padding:10px 12px; background:var(--vd-fill); border:1px solid var(--vd-line); border-radius:var(--vd-r); }
.lib-info p { margin:4px 0 0; font-size:13px; line-height:1.5; color:var(--vd-dim); }
.lib-resbtn { appearance:none; display:flex; align-items:center; gap:10px; width:100%; min-height:var(--vd-h-sm); padding:4px 6px; font:inherit; color:var(--vd-text); text-align:left; background:transparent; border:0; border-radius:var(--vd-rs); cursor:pointer; }
.lib-resbtn:hover { background:var(--vd-fill-hi); } .lib-resbtn:focus-visible { outline:2px solid var(--accent-hi); outline-offset:-2px; }
.lib-resbtn .vd-ico { width:16px; height:16px; color:var(--accent-hi); } .lib-resbtn .r { margin-left:auto; font-size:11.5px; }
.lib-mapframe[data-z="7"] { background:#1A345C; } .lib-mapframe:not([data-z="7"]) { background:#0D1324; }
.lib-pin--place { background:#FFE7B0; }
.lib-npcdot { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; padding:0; border-radius:50%; background:#8FD0FF; border:2px solid #0B1016; cursor:pointer; }
.lib-npcdot:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.lib-npcdot .lib-pin__label { top:-30px; left:50%; rotate:0deg; }
.lib-floor .vd-btn:disabled { opacity:.35; }
.lib-pin__label { z-index:3; }
.lib-mapview:focus-visible { outline:2px solid var(--accent-hi); outline-offset:2px; }
.lib-npcdot::after { content:""; position:absolute; inset:-10px; }
.lib-pin { touch-action:manipulation; }
.lib-cols2 > .lib-block:last-child { margin-bottom:18px; }

/* ===================== v3: tablas densas con fila expandible (sin tarjetas ni recuadros de imagen) ===================== */
.lib-table .c-tog { width:44px; padding:0 0 0 10px; }
.lib-tog { appearance:none; width:26px; height:26px; display:grid; place-items:center; padding:0; cursor:pointer; color:var(--accent-hi); background:var(--vd-fill); border:1px solid var(--vd-line); border-radius:var(--vd-rs); }
.lib-tog:hover { background:var(--vd-fill-hi); border-color:var(--vd-line-hi); } .lib-tog:focus-visible { outline:2px solid var(--accent-hi); outline-offset:2px; }
.lib-tog .vd-ico { width:14px; height:14px; stroke-width:2.2; }
.lib-table--exp tbody tr.is-exp { cursor:pointer; } .lib-table--exp tbody tr.is-open { background:var(--vd-fill); }
.lib-table--exp tbody tr.is-open td { border-bottom-color:transparent; }
.lib-nm { font-weight:500; color:var(--vd-text); }
.lib-table td.c-name { width:22%; min-width:130px; }
.lib-table td.c-loot { max-width:0; width:44%; } .lib-table th.c-loot { width:44%; }
.lib-lootline { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; line-height:1.4; }
.lt-c { color:var(--vd-dim); } .lt-u { color:var(--vd-text); } .lt-r { color:var(--accent-hi); font-weight:500; }
.lt-sep { color:var(--vd-dim); }
.lt a { color:inherit !important; text-decoration:underline dotted; text-underline-offset:3px; } .lt a:hover { text-decoration-style:solid; } .lt a:focus-visible { outline:2px solid var(--accent-hi); outline-offset:2px; border-radius:3px; }
.lib-legend-loot { font-size:12px; color:var(--vd-dim); }
.lib-table tr.lib-exp td { height:auto; padding:0; background:rgba(255,255,255,.03); border-bottom:1px solid var(--vd-line); }
.lib-expbody { padding:14px 16px 16px 54px; }
.lib-exp3 { display:grid; grid-template-columns:1.1fr 1fr 1.25fr; gap:6px 28px; align-items:start; }
.lib-exp3 h4 { margin:0 0 6px; font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--vd-dim); }
.lib-exp3 h4:not(:first-child) { margin-top:14px; }
.lib-exp3 .lib-list li { min-height:30px; font-size:12.5px; }
.lib-exp3 .lib-kv { font-size:12.5px; gap:4px 14px; }
.lib-summary--sm { font-size:13.5px; line-height:1.55; }
.lib-exp__foot { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; } .lib-exp__foot a.vd-btn { text-decoration:none; color:var(--vd-text); }
.lib-ratetag { margin-left:6px; padding:1px 6px; font-size:10px; letter-spacing:.06em; color:var(--accent-ink); background:var(--accent); border-radius:var(--vd-rs); }
.lib-sheethead { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:4px 0 10px; }
.lib-sheethead .lib-name { margin:0; } .lib-sheethead .lib-sub { align-items:center; }
.lib-stats--6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.lib-sheethead + .lib-catnote { max-width:70ch; }
@media (max-width:860px) { .lib-exp3 { grid-template-columns:1fr; gap:18px; } .lib-stats--6 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:720px) { .lib-expbody { padding:12px 12px 14px; } .lib-table .c-tog { width:38px; padding-left:6px; } .lib-table td.c-name { width:auto; } }
@media (max-width:560px) { .lib-stats--6 { grid-template-columns:repeat(2,minmax(0,1fr)); } .lib-table .c-tog { width:34px; padding-left:4px; } .lib-tog { width:24px; height:24px; } }
@media (max-width:720px) { .lib-legend-loot { display:none; } }

.lib a.vd-btn { text-decoration:none; color:var(--vd-text); } .lib a.vd-btn:hover { color:var(--vd-text); }
/* Inside the portal: the primary keeps its dark ink over a link colour, and the logo goes back to the website */
.lib-hero #play, .lib-hero #play:hover { color:var(--btn-primary-ink); }
.lib-logo-link { display:block; line-height:0; }