/* EldenTrack — tokens tomados del diseño de Claude Design (artboard 3b) */
:root{
  --bg:#08080a;
  --panel:rgba(11,12,15,.90);
  --panel-solid:#0b0c0f;
  --panel-strong:rgba(11,12,15,.92);
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.06);
  --fill:rgba(255,255,255,.05);
  --fill-soft:rgba(255,255,255,.043);
  --fill-faint:rgba(255,255,255,.027);
  --ink:#e8e6e2;
  --ink-bright:#efece6;
  --ink-70:rgba(232,230,226,.70);
  --ink-50:rgba(232,230,226,.50);
  --ink-45:rgba(232,230,226,.45);
  --ink-40:rgba(232,230,226,.40);
  --ink-30:rgba(232,230,226,.30);
  --gold:#d9b26a;
  --gold-deep:#c99a4e;
  --on-gold:#16150f;
  --red:#d8564e;
  --red-deep:#b8443f;
  --blue:#57b9d9;
  --green:#6fbf8b;
  --purple:#a986e0;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --serif:"Cinzel",Georgia,serif;
  --shadow-bar:0 14px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.043);
  --shadow-panel:0 18px 44px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:13px;-webkit-font-smoothing:antialiased}
body{user-select:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font-family:inherit;color:inherit;background:none;border:none;outline:none}
a{color:var(--gold);text-decoration:none}
a:hover{color:#e8c987}

/* ---------- mapa ---------- */
#map{position:fixed;inset:0;background:#0c0b0a;z-index:1}
.leaflet-container{background:#0c0b0a;font-family:var(--sans)}
.leaflet-control-container{display:none}
/* el filtro va por tile, no sobre una capa gigante: así el compositor
   trabaja sobre superficies de 256px en vez de una de 90 megapíxeles */
#map.dim .leaflet-tile,#map.dim .leaflet-image-layer{filter:brightness(.72) saturate(.85) contrast(1.06)}
.leaflet-tile-container img{will-change:auto}

/* pin lágrima, igual que el diseño */
.pin{width:24px;height:24px;transform:rotate(-45deg);border-radius:50% 50% 50% 0;
  border:1.5px solid rgba(0,0,0,.5);box-shadow:0 3px 7px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease}
.pin span{transform:rotate(45deg);font:500 9px/1 var(--mono);color:rgba(12,10,10,.88)}
.pin.small{width:15px;height:15px;border-width:1px}
.pin.small span{display:none}
.pin.done{filter:grayscale(.75) brightness(.65)}
.pin.sel{transform:rotate(-45deg) scale(1.35);box-shadow:0 0 0 2px rgba(255,255,255,.85),0 5px 14px rgba(0,0,0,.7);z-index:900}
.leaflet-marker-icon:hover .pin{transform:rotate(-45deg) scale(1.18)}

/* ---------- barra flotante / titlebar ---------- */
#blade{position:fixed;left:14px;top:6px;height:72px;width:auto;z-index:22;pointer-events:none;
  filter:brightness(1.3) saturate(1.15) drop-shadow(0 6px 14px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(216,86,78,.35))}
#bar{position:fixed;top:14px;left:14px;right:14px;height:54px;z-index:20;
  display:flex;align-items:center;gap:12px;padding:0 8px 0 84px;border-radius:27px;
  background:var(--panel);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--shadow-bar)}
.brand{font:600 16px/1 var(--serif);letter-spacing:.05em;color:#f2ece2}

.layer-pill{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:16px;
  background:rgba(216,86,78,.14);border:1px solid rgba(216,86,78,.30)}
.layer-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--red)}
.layer-pill span{font:600 12px/1 var(--sans);color:#f0d7d3}
.layer-pill em{font-style:normal;font-size:10px;color:rgba(240,215,211,.6)}
.layer-pill:hover{background:rgba(216,86,78,.2)}
body[data-layer=underground] .layer-pill{background:rgba(87,185,217,.14);border-color:rgba(87,185,217,.3)}
body[data-layer=underground] .layer-pill .dot{background:var(--blue)}
body[data-layer=underground] .layer-pill span{color:#d3ecf5}
body[data-layer=dlc] .layer-pill{background:rgba(169,134,224,.14);border-color:rgba(169,134,224,.3)}
body[data-layer=dlc] .layer-pill .dot{background:var(--purple)}
body[data-layer=dlc] .layer-pill span{color:#e0d4f5}

.menu{position:fixed;top:60px;z-index:40;min-width:220px;padding:6px;border-radius:12px;
  background:var(--panel-strong);backdrop-filter:blur(18px);border:1px solid var(--line);
  box-shadow:var(--shadow-panel)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;
  font:500 12.5px/1 var(--sans);color:var(--ink-70);text-align:left}
.menu button:hover{background:var(--fill);color:var(--ink)}
.menu button .dot{width:7px;height:7px;border-radius:50%}
.menu button .n{margin-left:auto;font:400 11px/1 var(--mono);color:var(--ink-40)}

.search{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  width:400px;height:38px;padding:0 4px 0 14px;border-radius:19px;
  background:var(--fill-soft);border:1px solid rgba(255,255,255,.075)}
.search:focus-within{border-color:rgba(217,178,106,.5);background:rgba(255,255,255,.06)}
.search .ico{font:400 13px/1 var(--sans);color:var(--ink-40)}
.search input{flex:1;font:400 13px/1 var(--sans);color:var(--ink);user-select:text}
.search input::placeholder{color:var(--ink-40)}
.search kbd{padding:4px 7px;border-radius:6px;background:rgba(255,255,255,.06);
  font:400 11px/1 var(--mono);color:var(--ink-45)}

.results{position:fixed;top:60px;left:50%;transform:translateX(-50%);width:360px;max-height:min(52vh,420px);
  overflow:auto;z-index:40;padding:6px;border-radius:14px;background:var(--panel-strong);
  backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--shadow-panel)}
.results .rhead{display:flex;justify-content:space-between;padding:7px 9px 6px;
  font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--ink-45)}
.results button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border-radius:9px;text-align:left}
.results button:hover,.results button.active{background:var(--fill)}
.results .sq{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font:500 9px/1 var(--mono);color:rgba(12,10,10,.85);flex:0 0 auto}
.results .txt{min-width:0;flex:1}
.results .t1{display:block;font:500 12.5px/1.25 var(--sans);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.results .t2{display:block;margin-top:3px;font:400 10.5px/1 var(--mono);color:var(--ink-40);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.results .chev{color:var(--ink-30);font-size:11px}
.results .empty{padding:16px 10px;text-align:center;font-size:12px;color:var(--ink-40)}

.right{display:flex;align-items:center;gap:6px;margin-left:auto}
.round{width:34px;height:34px;border-radius:50%;background:var(--fill-soft);
  border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--ink-70)}
.round:hover,.round.on{background:rgba(217,178,106,.18);border-color:rgba(217,178,106,.35);color:var(--gold)}
.avatar-chip{display:flex;align-items:center;gap:9px;padding:3px 12px 3px 3px;border-radius:20px;
  background:var(--fill);border:1px solid rgba(255,255,255,.07)}
.avatar-chip .av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#3a2f27,#6b4f37);font:600 12px/1 var(--serif);color:#e8d3ae}
.avatar-chip .name{font:500 12px/1 var(--sans);color:var(--ink)}
.avatar-chip em{font-style:normal;font-size:10px;color:var(--ink-50)}
.right .sep{width:1px;height:22px;background:rgba(255,255,255,.1);margin:0 4px}
.wc{display:flex;align-items:center;gap:2px}
.wc button{width:38px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font:400 13px/1 var(--sans);color:var(--ink-70)}
.wc button:hover{background:var(--fill)}
#wcClose:hover{background:#c0322c;color:#fff}
#wcMax{font-size:11px}

/* ---------- filtros ---------- */
#filters{position:fixed;left:14px;top:82px;width:360px;max-height:calc(100vh - 190px);z-index:15;
  display:flex;flex-direction:column;border-radius:16px;background:var(--panel);backdrop-filter:blur(18px);
  border:1px solid var(--line);box-shadow:var(--shadow-panel);overflow:hidden}
#filters.hidden{display:none}
#filtersReopen{position:fixed;left:14px;top:82px;z-index:15;width:46px;height:46px;border-radius:14px;
  font-size:20px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);color:var(--ink-70);
  box-shadow:var(--shadow-panel)}
#filtersReopen:hover{color:var(--ink);border-color:rgba(217,178,106,.35)}
/* display:flex le gana a [hidden], igual que en .levels: hay que apagarlo a mano */
#filtersReopen[hidden]{display:none}
.fhead{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;
  border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.fhead .label{font:500 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--ink-50)}
.fhead .acts{display:flex;gap:6px}
.fhead .acts button{padding:5px 9px;border-radius:7px;background:var(--fill);
  font:500 11px/1 var(--sans);color:var(--ink-70)}
.fhead .acts button:hover{background:rgba(255,255,255,.09);color:var(--ink)}
.fhead .acts .sq{width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;font-size:10px}
/* Solo scroll vertical. El horizontal aparecía porque cada .cat es un flex y su
   min-content incluye el contador, así que la grilla se pasaba de ancho. */
#groups{overflow-y:auto;overflow-x:hidden;flex:1 1 auto;scrollbar-width:thin;
  scrollbar-color:rgba(217,178,106,.28) transparent}
#groups::-webkit-scrollbar{width:10px}
#groups::-webkit-scrollbar-track{background:transparent}
#groups::-webkit-scrollbar-thumb{border-radius:99px;border:3px solid transparent;
  background:rgba(217,178,106,.28);background-clip:content-box}
#groups::-webkit-scrollbar-thumb:hover{background:rgba(217,178,106,.5);background-clip:content-box}
.ghead{display:flex;align-items:center;gap:10px;width:100%;padding:10px 13px;background:var(--fill-faint);
  border-top:1px solid rgba(255,255,255,.05)}
#groups > .grp:first-child .ghead{border-top:none}
.ghead .sw{width:13px;height:13px;border-radius:4px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font:500 8px/1 var(--mono);color:transparent;
  border:1px solid rgba(255,255,255,.22);background:transparent;font-style:normal;
  cursor:pointer;transition:background .12s ease,border-color .12s ease}
.ghead .sw:hover{border-color:rgba(255,255,255,.45)}
.ghead .sw.on{border-color:transparent;background:var(--c);color:var(--on-gold)}
/* a medias: algunas subcategorías prendidas y otras no */
.ghead .sw.half{border-color:var(--c);
  background:linear-gradient(135deg,var(--c) 0 50%,transparent 50% 100%)}
.ghead .gname{flex:1;text-align:left;font:600 12px/1 var(--sans);color:var(--ink-bright)}
.ghead .gcount{font:400 11px/1 var(--mono);color:var(--ink-45)}
.ghead .chev{font-size:9px;color:var(--ink-45)}
.grp.off .ghead{opacity:.42;cursor:default}
.grp.off .ghead .gname{color:var(--ink-50)}
.gbody{display:grid;grid-template-columns:1fr 1fr;padding:4px 7px 9px}
.grp.collapsed .gbody{display:none}
.cat{display:flex;align-items:center;gap:8px;padding:6px;border-radius:7px;text-align:left;min-width:0}
.cat:hover{background:var(--fill-soft)}
.cat .box{width:13px;height:13px;border-radius:4px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font:500 8px/1 var(--mono);color:transparent;
  border:1px solid rgba(255,255,255,.2);background:transparent}
.cat.on .box{border-color:transparent;background:var(--c);color:var(--on-gold)}
.cat .cname{flex:1;min-width:0;font:400 11.5px/1 var(--sans);color:var(--ink-50);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat.on .cname{color:rgba(232,230,226,.85)}
.cat .cn{font:400 10.5px/1 var(--mono);color:var(--ink-30)}
.cat.on .cn{color:var(--ink-40)}
.pending{padding:2px 7px 10px;font:400 10.5px/1.5 var(--sans);color:var(--ink-30)}
.ffoot{display:flex;align-items:center;gap:8px;padding:10px 13px;flex:0 0 auto;
  border-top:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.ffoot span{flex:1;font:400 11px/1 var(--sans);color:var(--ink-50)}
.toggle{width:30px;height:17px;border-radius:9px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;padding:0 2px;transition:background .15s}
.toggle i{width:13px;height:13px;border-radius:50%;background:var(--ink-50);transition:transform .15s,background .15s}
.toggle[aria-checked=true]{background:rgba(217,178,106,.9);justify-content:flex-end}
.toggle[aria-checked=true] i{background:var(--on-gold)}

/* ---------- detalle ---------- */
#detail{position:fixed;right:14px;top:82px;bottom:70px;width:340px;z-index:16;
  display:flex;flex-direction:column;border-radius:16px;background:var(--panel-strong);
  backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.55);overflow:hidden}
#detail[hidden]{display:none}
.shot{position:relative;height:158px;flex:0 0 auto;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.07);
  background-color:#15161a;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center}
.shot.empty{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.043) 0 7px,rgba(255,255,255,0) 7px 14px)}
.shot .shotLabel{position:relative;z-index:2;font:400 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink-45);
  padding:4px 8px;border-radius:6px;background:rgba(10,11,13,.55)}
.shot .close{position:absolute;z-index:3;top:11px;right:11px;width:26px;height:26px;border-radius:8px;
  background:rgba(10,11,13,.75);border:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-70)}
.shot .close:hover{background:rgba(10,11,13,.95);color:var(--ink)}
.shot .tile{position:absolute;width:256px;height:256px;image-rendering:auto}
.shot .xhair{position:absolute;z-index:2;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--gold);box-shadow:0 0 0 2px rgba(0,0,0,.55),0 0 14px rgba(217,178,106,.55);
  left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.dbody{display:flex;flex-direction:column;gap:13px;padding:15px 17px 17px;overflow:auto;flex:1 1 auto}
.dhead{display:flex;flex-direction:column;gap:6px}
.kicker{font:500 10px/1 var(--mono);letter-spacing:.14em}
.kicker.dim{color:var(--ink-45)}
#dTitle{font:600 21px/1.2 var(--serif);color:#f4efe6;user-select:text}
.dsub{font:400 11.5px/1 var(--mono);color:var(--ink-45);user-select:text}
.ddesc{font:400 13px/1.6 var(--sans);color:rgba(232,230,226,.66);text-wrap:pretty}
.dactions{display:flex;gap:8px}
.dactions .primary{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;
  border-radius:11px;background:var(--gold);color:var(--on-gold);font:600 13px/1 var(--sans)}
.dactions .primary:hover{background:#e4c07c}
.dactions .primary.done{background:var(--fill);color:var(--ink-70);border:1px solid var(--line)}
.dactions .icon{width:40px;height:40px;border-radius:11px;background:var(--fill);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--ink-70)}
.dactions .icon:hover{background:rgba(255,255,255,.09);color:var(--ink)}
.dfacts{display:flex;flex-direction:column;gap:8px}
.frow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-soft)}
.frow .sq{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font:500 9px/1 var(--mono);color:rgba(12,10,10,.85);flex:0 0 auto}
.frow .k{flex:1;font:500 12.5px/1 var(--sans);color:var(--ink);user-select:text}
.frow .v{font:400 11px/1 var(--mono);color:var(--ink-40);user-select:text}
.dlinks{display:flex;align-items:center;justify-content:space-between;padding-top:2px;
  font:500 12.5px/1 var(--sans)}

/* ---------- progreso y zoom ---------- */
#progress{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:15;
  display:flex;align-items:center;gap:16px;padding:9px 15px;border-radius:20px;
  background:var(--panel);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.07);
  box-shadow:0 14px 34px rgba(0,0,0,.5)}
#progress .label{font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--ink-50)}
#progress .track{width:200px;height:4px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
#progress .track i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s ease}
#progress .nums{font:400 12px/1 var(--mono);color:var(--ink-70)}
#progress .nums b{color:var(--ink-bright);font-weight:600}
#progress .sep{width:1px;height:14px;background:rgba(255,255,255,.1)}
#progress .saved{font:400 11px/1 var(--sans);color:var(--ink-40)}

/* ---------- personaje ---------- */
#charPill{position:fixed;left:14px;bottom:14px;z-index:17;display:flex;align-items:center;gap:10px;
  padding:5px 12px 5px 5px;border-radius:22px;background:var(--panel);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 34px rgba(0,0,0,.5)}
#charPill:hover{border-color:rgba(217,178,106,.35)}
#charPill .av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(150deg,#3a2f27,#6b4f37);
  font:600 13px/1 var(--serif);color:#e8d3ae}
#charPill .txt{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0}
#charPill .nm{font:500 12.5px/1 var(--sans);color:var(--ink);max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#charPill .pg{font:400 10.5px/1 var(--mono);color:var(--ink-45)}
#charPill em{font-style:normal;font-size:10px;color:var(--ink-50);margin-left:2px}

#charMenu{position:fixed;left:14px;bottom:62px;z-index:41;width:286px;padding:6px;border-radius:14px;
  background:var(--panel-strong);backdrop-filter:blur(18px);border:1px solid var(--line);
  box-shadow:var(--shadow-panel)}
#charMenu[hidden]{display:none}
#charMenu .mlabel{padding:8px 9px 6px;font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--ink-45)}
#charMenu .row{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border-radius:9px;text-align:left}
#charMenu .row:hover{background:var(--fill)}
#charMenu .row.on{background:rgba(217,178,106,.13)}
#charMenu .row .av{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(150deg,#3a2f27,#6b4f37);
  font:600 11px/1 var(--serif);color:#e8d3ae}
#charMenu .row .t{flex:1;min-width:0}
#charMenu .row .t b{display:block;font:500 12.5px/1.2 var(--sans);color:var(--ink);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#charMenu .row .t s{display:block;margin-top:3px;text-decoration:none;font:400 10.5px/1 var(--mono);color:var(--ink-40)}
#charMenu .row .pct{font:400 11px/1 var(--mono);color:var(--gold)}
#charMenu .sepline{height:1px;background:var(--line-soft);margin:6px 4px}
#charMenu .act{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:9px;
  font:500 12px/1 var(--sans);color:var(--ink-70);text-align:left}
#charMenu .act:hover{background:var(--fill);color:var(--ink)}
#charMenu .act i{font-style:normal;width:16px;text-align:center;color:var(--ink-45)}
#charMenu .act.danger:hover{background:rgba(216,86,78,.16);color:#f0a9a4}
#charMenu .where{padding:8px 9px 5px;font:400 10px/1.5 var(--mono);color:var(--ink-30);word-break:break-all}

#zoom{position:fixed;right:14px;bottom:14px;z-index:15;display:flex;gap:8px}
#zoom button{width:38px;height:38px;border-radius:50%;background:var(--panel);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;
  font-size:16px;color:rgba(232,230,226,.8)}
#zoom button:hover{background:rgba(255,255,255,.09);color:var(--ink)}

#toast{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);z-index:60;
  padding:9px 16px;border-radius:12px;background:var(--panel-strong);backdrop-filter:blur(18px);
  border:1px solid var(--line);font:500 12px/1 var(--sans);color:var(--ink);
  box-shadow:var(--shadow-panel)}
#toast[hidden]{display:none}

/* ---------- aviso de mapa faltante ---------- */
#missing{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,10,.92);padding:40px;text-align:center}
#missing .box{max-width:520px}
#missing h2{font:600 22px/1.2 var(--serif);color:var(--gold);margin-bottom:12px}
#missing p{font-size:13.5px;line-height:1.65;color:var(--ink-50);margin-bottom:10px}
#missing code{font:400 12px/1.7 var(--mono);color:var(--gold);display:block;text-align:left;
  background:#0f0d0c;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:10px;user-select:text}

@media (max-width:1120px){
  .search{width:300px}
  .avatar-chip .name{display:none}
}


/* --- taxonomía nueva: niveles de piedra y drops por probabilidad --- */
/* [hidden] pierde contra un display: grid propio, así que hay que apagarlo a mano */
/* las filas con desplegable ocupan el ancho completo: su nombre es largo y además
   llevan el chevron, así que en media columna quedaban cortadas */
.grp .cat.wide { grid-column: 1 / -1; }
.grp .levels { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr;
               margin: 2px 0 6px 18px; padding-left: 8px;
               border-left: 1px solid var(--line); }
.grp .levels[hidden] { display: none; }
.grp .cat.lv .cname { font-size: 11px; color: var(--dim); }
.grp .lvchev { margin-left: 2px; margin-right: -3px; width: 12px; text-align: center;
               flex: 0 0 auto; font-size: 10px; color: var(--dim);
               transition: transform .15s ease; }
.grp .cat .cn { flex: 0 0 auto; }
.grp .lvchev.open { transform: rotate(180deg); }

/* Un ítem que cae por azar no es lo mismo que uno que siempre está: el pin va hueco,
   con el color en el borde. El color lo pone el JS inline, porque es por categoría.
   Los íconos definitivos van a reemplazar esto. */
.pin.chance { border-width: 2px; border-style: dashed;
              background: rgba(12,10,10,.55) !important; box-shadow: none; }


/* --- íconos reales del mapa del juego (POIs y gracias) ---
   Vienen en distinta proporción cada uno, así que se ajustan por contain dentro de un
   cuadro fijo y se anclan al centro, no a la punta: son dibujos, no chinches. */
.gpin{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.65));transition:transform .12s ease}
.gpin.small{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.gpin.done{filter:grayscale(.85) brightness(.6) drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.gpin.sel{transform:scale(1.3);filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 4px 10px rgba(0,0,0,.7));z-index:900}


/* ---------- pantallas chicas: la misma app, en el navegador del teléfono ----------
   No es el artboard mobile del diseño (ese sigue pendiente): es el layout de escritorio
   replegado para que se pueda usar con el pulgar. Los dos paneles laterales pasan a ser
   hojas ancladas abajo, que es donde llega la mano, y todo lo que depende de una ventana
   nativa —los botones de la barra de título, el zoom con botones— desaparece. */
@media (max-width: 820px) {
  #blade { display: none; }
  #bar { top: 8px; left: 8px; right: 8px; height: 48px; padding: 0 10px; gap: 8px; }
  #bar .brand, #bar .wc, #bar .sep { display: none; }
  .search { width: auto; flex: 1; min-width: 0; }
  .search kbd { display: none; }
  #results { left: 8px; right: 8px; width: auto; }
  #zoom { display: none; }                      /* en el teléfono se hace pellizcando */

  /* de abajo hacia arriba: progreso, después píldora y reabrir, después las hojas */
  #progress { left: 8px; right: 8px; bottom: 8px; transform: none; width: auto;
              justify-content: space-between; }
  #progress .saved, #progress .sep { display: none; }
  #progress .nums { white-space: nowrap; }
  #charPill { left: auto; right: 8px; bottom: 60px; }
  #filtersReopen { left: 8px; top: auto; bottom: 60px; }

  #filters, #detail {
    left: 8px; right: 8px; width: auto; top: auto;
    bottom: 112px; max-height: 58vh;
  }
  .gbody, .grp .levels { grid-template-columns: 1fr; }
  #charMenu { left: 8px; right: 8px; width: auto; max-height: 66vh; overflow: auto;
              bottom: 112px; }

  /* el detalle y los filtros no entran juntos: al abrir uno se esconde el otro */
  body.detail-open #filters, body.detail-open #filtersReopen { display: none; }
}


/* --- alta y entrada a la nube --- */
#loginWrap{position:fixed;inset:0;z-index:40;display:flex;align-items:center;
  justify-content:center;background:rgba(8,7,6,.62);backdrop-filter:blur(3px)}
#loginWrap[hidden]{display:none}
#login{width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;
  padding:20px;border-radius:16px;background:var(--panel);backdrop-filter:blur(18px);
  border:1px solid var(--line);box-shadow:var(--shadow-panel)}
#login h3{font:600 19px/1.2 var(--serif);color:var(--ink-bright);margin:0}
#login .ddesc{margin:0}
#login label{display:flex;flex-direction:column;gap:5px;
  font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--ink-45)}
#login input{padding:9px 11px;border-radius:9px;background:var(--fill);
  border:1px solid var(--line);color:var(--ink);font:400 13px/1 var(--sans)}
#login input:focus{outline:none;border-color:rgba(217,178,106,.5)}
#login .err{margin:0;font:400 11.5px/1.4 var(--sans);color:var(--red)}
#login .err[hidden]{display:none}
#login .dactions{margin-top:2px}
#login .loginLinks{display:flex;justify-content:space-between;gap:12px}
#login .linkish{font:400 11.5px/1 var(--sans);
  color:var(--ink-50);text-decoration:underline;background:none;padding:2px 0}
#login .linkish:hover{color:var(--ink)}