/* CCLN-GW2 · negro profundo + naranja brillante · partículas al fondo */
:root{
  --bg0:#040404; --bg1:#0a0806;
  --panel:rgba(12,10,8,.82); --panel2:rgba(20,16,12,.85);
  --line:rgba(255,157,31,.14); --line2:rgba(255,157,31,.38);
  --txt:#ece7df; --dim:#9d948a;
  --acc:#ff9d1f; --acc2:#ffc46b; --karma:#c78bfa;
  --vine:#2fa97c;
  --buy:#34d399; --wait:#fbbf24; --opt:#60a5fa; --skip:#f87171;
}
::selection{background:rgba(47,169,124,.35);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#060606}
::-webkit-scrollbar-thumb{background:#241d15;border-radius:99px;border:2px solid #060606}
::-webkit-scrollbar-thumb:hover{background:var(--vine)}
*{box-sizing:border-box;margin:0;padding:0}
body{
  color:var(--txt);font:14px/1.45 system-ui,'Segoe UI',sans-serif;min-height:100vh;
  background:
    radial-gradient(1000px 600px at 85% -10%, rgba(255,157,31,.07), transparent 60%),
    radial-gradient(800px 600px at -10% 45%, rgba(255,157,31,.04), transparent 60%),
    radial-gradient(720px 520px at 6% 104%, rgba(47,169,124,.07), transparent 60%),
    radial-gradient(640px 460px at 98% 60%, rgba(47,169,124,.05), transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  background-attachment:fixed;
}
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* enredaderas jade en las esquinas — crecimiento natural: tallo que se afina,
   hojas alternas con nervio central, zarcillos en espiral y brotes en las puntas */
body::before, body::after{
  content:"";position:fixed;z-index:-1;pointer-events:none;
  width:min(48vmin,450px);height:min(48vmin,450px);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 440'><g fill='none' stroke-linecap='round'><path d='M10 0 C 30 60 -4 120 26 185 C 52 240 30 305 66 360 C 80 382 96 400 112 416' stroke='%232fa97c' stroke-width='4'/><path d='M66 360 C 80 382 96 400 112 416 C 122 426 130 432 138 436' stroke='%232fa97c' stroke-width='2'/><path d='M0 12 C 60 30 118 -2 178 26 C 236 52 296 34 350 66 C 376 82 396 98 414 116' stroke='%232fa97c' stroke-width='4'/><path d='M350 66 C 376 82 396 98 414 116 C 424 126 432 136 438 146' stroke='%232fa97c' stroke-width='2'/><path d='M26 185 C 44 180 58 188 64 204 C 68 216 62 226 52 228 C 44 230 38 224 40 216 C 42 210 48 208 52 212' stroke='%232fa97c' stroke-width='1.7'/><path d='M178 26 C 176 46 186 60 202 64 C 214 67 222 60 221 50 C 220 42 213 38 207 42 C 202 45 202 51 207 53' stroke='%232fa97c' stroke-width='1.7'/><path d='M66 360 C 84 356 96 364 100 378 C 103 388 97 396 89 396 C 83 396 79 390 82 385' stroke='%232fa97c' stroke-width='1.5'/></g><g fill='%232fa97c'><path d='M22 52 C 8 46 -2 34 -4 18 C 12 22 24 34 26 50 L 22 52 Z'/><path d='M20 108 C 34 98 52 96 66 104 C 56 118 38 122 24 114 C 21 112 20 110 20 108 Z'/><path d='M22 150 C 8 144 -2 132 -4 116 C 12 120 24 132 26 148 L 22 150 Z'/><path d='M34 232 C 48 224 66 224 78 234 C 66 246 48 248 36 238 C 34 236 33 234 34 232 Z'/><path d='M40 288 C 26 282 16 270 14 254 C 30 258 42 270 44 286 L 40 288 Z'/><path d='M60 330 C 74 322 92 322 104 332 C 92 344 74 346 62 336 C 60 334 59 332 60 330 Z'/><path d='M92 392 C 78 388 68 378 64 364 C 80 366 92 376 96 390 L 92 392 Z'/><path d='M56 8 C 52 -6 56 -20 66 -30 C 74 -16 72 0 62 10 L 56 8 Z'/><path d='M108 18 C 116 6 130 -2 146 -2 C 140 14 126 24 110 22 L 108 18 Z'/><path d='M162 34 C 158 20 162 6 172 -4 C 180 10 178 26 168 36 L 162 34 Z'/><path d='M226 40 C 234 28 248 20 264 20 C 258 36 244 46 228 44 L 226 40 Z'/><path d='M286 46 C 282 32 286 18 296 8 C 304 22 302 38 292 48 L 286 46 Z'/><path d='M338 76 C 346 64 360 56 376 56 C 370 72 356 82 340 80 L 338 76 Z'/><path d='M392 104 C 390 90 396 76 408 68 C 414 84 410 100 398 108 L 392 104 Z'/><ellipse cx='114' cy='419' rx='5' ry='7' transform='rotate(40 114 419)'/><ellipse cx='417' cy='119' rx='5' ry='7' transform='rotate(-50 417 119)'/></g><g fill='none' stroke='%2349c795' stroke-width='1'><path d='M20 108 C 32 104 46 104 58 108'/><path d='M34 232 C 46 230 60 230 72 234'/><path d='M60 330 C 72 328 86 328 96 332'/><path d='M108 18 C 118 12 130 8 140 8'/><path d='M226 40 C 236 34 248 30 258 30'/><path d='M338 76 C 348 70 360 66 370 66'/></g></svg>") no-repeat;
  background-size:contain;opacity:.22;
}
body::before{top:0;left:0;transform-origin:top left;animation:vineTL 14s ease-in-out infinite alternate}
body::after{bottom:0;right:0;transform-origin:bottom right;animation:vineBR 16s ease-in-out infinite alternate}
@keyframes vineTL{from{transform:rotate(0deg)}to{transform:rotate(1.6deg)}}
@keyframes vineBR{from{transform:rotate(180deg)}to{transform:rotate(181.6deg)}}
@media(max-width:700px){body::before,body::after{opacity:.12;width:56vmin;height:56vmin}}

/* enredaderas extra: zarcillo lateral en pantallas anchas */
html::before{
  content:"";position:fixed;z-index:-1;pointer-events:none;top:14vh;right:6px;width:26px;height:64vh;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 160'><g fill='none' stroke='%232fa97c' stroke-width='1.8' stroke-linecap='round'><path d='M13 0 C 20 24 6 40 13 64 C 20 88 6 104 13 128 C 17 142 13 152 13 160'/></g><g fill='%232fa97c'><path d='M13 30 q 12 -6 20 2 q -10 10 -20 -2 z'/><path d='M13 82 q -12 -6 -20 2 q 10 10 20 -2 z'/><path d='M13 134 q 12 -6 20 2 q -10 10 -20 -2 z'/></g><circle cx='7' cy='56' r='4' fill='none' stroke='%232fa97c' stroke-width='1.4'/><circle cx='19' cy='108' r='4' fill='none' stroke='%232fa97c' stroke-width='1.4'/></svg>") repeat-y;
  background-size:26px 160px;opacity:.14;
}
@media(max-width:1100px){html::before{display:none}}

/* divisor floral bajo los títulos de sección */
.wrap h2::after{
  content:"";display:block;width:190px;height:14px;margin-top:7px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 14'><path d='M2 8 C 40 2 80 12 118 7 C 148 3 170 8 188 6' fill='none' stroke='%232fa97c' stroke-width='1.6' stroke-linecap='round'/><path d='M36 7 q 8 -8 18 -6 q -6 10 -18 6 z' fill='%232fa97c'/><path d='M96 8 q -8 -8 -18 -6 q 6 10 18 6 z' fill='%232fa97c'/><path d='M148 6 q 8 -7 16 -5 q -5 9 -16 5 z' fill='%232fa97c'/><circle cx='120' cy='7' r='2.4' fill='%232fa97c'/></svg>") no-repeat;
  background-size:contain;opacity:.55;
}

/* brotes en las esquinas del contador */
.counter{position:relative}
.counter::before,.counter::after{
  content:"";position:absolute;width:54px;height:54px;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'><path d='M4 50 C 10 30 8 16 24 6' fill='none' stroke='%232fa97c' stroke-width='2' stroke-linecap='round'/><path d='M14 26 q 12 -8 22 -2 q -10 12 -22 2 z' fill='%232fa97c'/><path d='M24 6 q 10 -6 18 0 q -8 10 -18 0 z' fill='%232fa97c'/></svg>") no-repeat;
  background-size:contain;
}
.counter::before{top:-12px;left:-12px}
.counter::after{bottom:-12px;right:-12px;transform:rotate(180deg)}

/* ---------- cabecera ---------- */
header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;row-gap:8px;padding:12px 20px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1000;
  background:rgba(4,4,4,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
header h1{font-size:18px;font-weight:800;letter-spacing:.2px}
header h1 em{font-style:normal;color:var(--acc)}
header h1 small{display:block;font-size:10px;color:var(--dim);font-weight:500;letter-spacing:.4px}
nav{display:flex;gap:6px;flex-wrap:wrap}
.tab{background:none;border:1px solid transparent;color:var(--dim);padding:7px 13px;border-radius:99px;
  cursor:pointer;font-size:13.5px;font-family:inherit;transition:.15s}
.tab:hover{color:var(--txt);border-color:var(--line)}
.tab.on{background:rgba(255,157,31,.12);color:var(--acc);border-color:var(--line2);font-weight:700}
#count{color:var(--dim);font-size:12.5px;margin-left:auto}

/* ---------- filtros principales ---------- */
.topbar{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;padding:12px 20px;
  border-bottom:1px solid var(--line);position:sticky;top:53px;z-index:999;
  background:rgba(6,5,4,.80);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.topbar label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.6px}
select{background:rgba(16,13,10,.9);color:var(--txt);border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;font-size:13.5px;min-width:150px;cursor:pointer}
select:focus{outline:1px solid var(--acc)}
.lvl{display:flex;flex-direction:column;gap:4px}
.lvl .lab{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
.lvl .lab b{color:var(--acc);font-size:12.5px}
.dual{position:relative;width:230px;height:22px}
.dual .track{position:absolute;top:9px;left:0;right:0;height:4px;border-radius:2px;background:rgba(255,157,31,.15)}
.dual .fill{position:absolute;top:9px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),var(--acc2))}
.dual input{position:absolute;inset:0;width:100%;appearance:none;-webkit-appearance:none;
  background:none;pointer-events:none;height:22px;margin:0}
.dual input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--acc);border:2px solid #000;cursor:pointer}
.dual input::-moz-range-thumb{pointer-events:auto;width:12px;height:12px;border-radius:50%;
  background:var(--acc);border:2px solid #000;cursor:pointer}

/* ---------- layout buscador ---------- */
.layout{display:flex;align-items:flex-start}
main{flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:8px;min-width:0}
aside{width:232px;flex-shrink:0;padding:16px 18px 40px 6px;position:sticky;top:126px;
  max-height:calc(100vh - 126px);overflow-y:auto}
aside h3{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px;
  margin:16px 0 7px;font-weight:700}
aside h3:first-child{margin-top:0}
aside .opt{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:13.5px;cursor:pointer;color:var(--txt)}
aside .opt:hover{color:var(--acc)}
aside .opt input{accent-color:var(--acc);cursor:pointer}
aside .opt .n{color:var(--dim);font-size:11.5px;margin-left:auto}

/* ---------- tarjetas de item ---------- */
.card{display:flex;gap:12px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--line);border-radius:12px;padding:9px 14px;transition:.12s}
.card:hover{background:var(--panel2);border-color:var(--line2)}
.card.dom{opacity:.5}
.card img{width:46px;height:46px;border-radius:9px;background:#000;flex-shrink:0}
.rb-Basic{border-left-color:#c8c8c8}.rb-Fine{border-left-color:#62a4da}
.rb-Masterwork{border-left-color:#3ba51e}.rb-Rare{border-left-color:#fcd00b}.rb-Exotic{border-left-color:#ffa405}
.mid{flex:1;min-width:0}
.iname{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px;font-size:11.8px;color:var(--dim)}
.chips .chip{background:rgba(0,0,0,.55);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.chips .karma{color:var(--karma);font-weight:700}
.chips .dmg{color:var(--acc2);font-weight:700}
.hrt{margin-top:4px;font-size:12.6px;color:var(--txt)}
.hrt .h{color:var(--acc);margin-right:2px}
.loc{margin-top:2px;font-size:11.8px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats{font-size:11.8px;color:#b5a996;margin-top:2px}
.badges{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex-shrink:0}
.badge{font-size:11px;font-weight:800;letter-spacing:.4px;padding:3px 10px;border-radius:99px;white-space:nowrap;cursor:default}
.b-buy{background:rgba(52,211,153,.14);color:var(--buy)}
.b-wait{background:rgba(251,191,36,.13);color:var(--wait)}
.b-opt{background:rgba(96,165,250,.14);color:var(--opt)}
.b-skip{background:rgba(248,113,113,.14);color:var(--skip)}
.b-na{background:rgba(255,255,255,.05);color:var(--dim)}
.lvbig{width:40px;flex-shrink:0;text-align:center;color:var(--dim);font-size:10.5px;line-height:1.1}
.lvbig b{display:block;font-size:18px;color:var(--txt);font-weight:800}
.r-Basic{color:#c8c8c8}.r-Fine{color:#62a4da}.r-Masterwork{color:#3ba51e}.r-Rare{color:#fcd00b}.r-Exotic{color:#ffa405}
.empty{color:var(--dim);padding:40px;text-align:center}

/* ---------- secciones ---------- */
.sec{display:none}
.sec.on{display:block}
.wrap{max-width:940px;margin:0 auto;padding:24px 20px 60px}
.wrap h2{font-size:21px;margin-bottom:6px}
.wrap h3{font-size:12.5px;color:var(--acc);margin:22px 0 8px;text-transform:uppercase;letter-spacing:.8px}
.intro{color:var(--dim);margin-bottom:14px;font-size:13.5px}
.gcard{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;margin-bottom:10px}
.gcard:hover{background:var(--panel2)}
.gcard .ico{font-size:26px;line-height:1;flex-shrink:0;margin-top:2px}
.gcard .t{display:block;margin-bottom:3px;font-weight:700}
.gcard p,.gcard li{color:#c2b8ab;font-size:13px;line-height:1.55}
.gcard ul{padding-left:16px;flex:1}
.legend{padding-left:0 !important}
.legend li{list-style:none;margin-bottom:8px}
.legend .badge{margin-right:8px}

/* regalos */
.rw{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:9px 14px;margin-bottom:7px}
.rw:hover{background:var(--panel2)}
.rw .rwmid{flex:1;min-width:0}
.rw .who{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:99px;
  background:rgba(199,139,250,.14);color:var(--karma);margin-right:7px;vertical-align:1px}
.rw .who.t{background:rgba(52,211,153,.13);color:var(--buy)}
.rw .qué{font-size:13.5px;font-weight:600}
.rw .en{color:var(--dim);font-size:11.2px;margin-top:2px}
.milestones{display:flex;flex-wrap:wrap;gap:8px}
.mile{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:9px 14px}
.mile b{font-size:18px;color:var(--acc)}
.mile span{color:#c2b8ab;font-size:12.5px}

/* ruta */
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 6px}
.zone{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;width:158px}
.zone img{width:100%;height:70px;object-fit:cover;display:block;opacity:.92}
.zone .zi{padding:7px 11px}
.zone b{display:block;font-size:13px}
.zone span{color:var(--dim);font-size:11.2px}
.zone.race{border-color:var(--acc);background:rgba(255,157,31,.08);width:auto}
.arrow{color:var(--acc);font-size:16px}
.cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px}
.city{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.city:hover{border-color:var(--line2)}
.city img{width:100%;height:84px;object-fit:cover;display:block;opacity:.92}
.city b{display:block;padding:7px 11px 1px;font-size:12.8px}
.city span{display:block;padding:0 11px 8px;color:var(--dim);font-size:11.2px}

/* enlaces */
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:7px 14px;
  color:var(--txt);text-decoration:none;font-size:13px;transition:.12s}
.links a:hover{border-color:var(--acc);color:var(--acc)}
.wrap a{color:var(--acc)}

/* modo F2P / P2P */
.mode{background:rgba(255,157,31,.12);border:1px solid var(--line2);color:var(--acc);
  padding:6px 13px;border-radius:99px;cursor:pointer;font-size:13px;font-weight:800;font-family:inherit;
  margin-left:auto;transition:.15s}
.mode:hover{background:rgba(255,157,31,.22)}
.mode + #count{margin-left:0}
body.f2p .only-p2p{display:none !important}
body.p2p .only-f2p{display:none !important}

/* plan 1-80 */
.step{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;margin-bottom:10px}
.step:hover{background:var(--panel2)}
.sn{width:36px;height:36px;border-radius:50%;background:rgba(255,157,31,.14);color:var(--acc);
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;
  flex-shrink:0;border:1px solid var(--line2)}
.sb{flex:1;min-width:0}
.sb .t{display:block;margin-bottom:3px;font-weight:700}
.sb p{color:#c2b8ab;font-size:13px;line-height:1.55;margin-top:3px}
.sb .rt{vertical-align:2px;margin-left:4px}

/* logo cabecera (WebIA usa .brand para dejar el unico H1 en el hero) */
header .brand{font-size:18px;font-weight:800;letter-spacing:.2px}
header .brand em{font-style:normal;color:var(--acc)}
header .brand small{display:block;font-size:10px;color:var(--dim);font-weight:500;letter-spacing:.4px}

/* idioma EN/ES (WebIA) */
body.lang-en .es{display:none}
body.lang-es .en{display:none}
.mode.lang{margin-left:0}

/* botón Buy Me a Coffee (arriba del inicio) */
.coffee{display:flex;align-items:center;gap:13px;max-width:520px;margin:18px auto 0;
  background:linear-gradient(100deg, rgba(255,157,31,.16), rgba(47,169,124,.12));
  border:1px solid var(--line2);border-radius:99px;padding:11px 20px;text-decoration:none;
  color:var(--txt);transition:.15s}
.coffee:hover{border-color:var(--acc);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(255,157,31,.18);text-decoration:none}
.coffee .cico{font-size:26px;line-height:1}
.coffee .ctxt{flex:1;min-width:0}
.coffee .ctxt b{display:block;font-size:14.5px;color:var(--acc)}
.coffee .ctxt i{font-style:normal;font-size:11.8px;color:var(--dim)}
.coffee .carr{color:var(--acc);font-size:18px;font-weight:800}

/* hero / landing (WebIA) */
.hero{max-width:1000px;margin:0 auto;padding:46px 20px 26px;text-align:center}
.hero .kicker{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--acc);background:rgba(255,157,31,.1);
  border:1px solid var(--line2);border-radius:99px;padding:5px 14px;margin-bottom:16px}
.hero h1{font-size:38px;line-height:1.12;font-weight:800;letter-spacing:-.5px;margin-bottom:14px}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lead{font-size:16px;color:#c2b8ab;max-width:680px;margin:0 auto 22px;line-height:1.6}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.hero .cta button{font-family:inherit;font-size:14.5px;font-weight:700;padding:11px 22px;border-radius:99px;cursor:pointer;transition:.15s;border:1px solid var(--line2)}
.hero .cta .primary{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#1a1206;border:none}
.hero .cta .primary:hover{filter:brightness(1.08)}
.hero .cta .ghost{background:transparent;color:var(--txt)}
.hero .cta .ghost:hover{color:var(--acc);border-color:var(--acc)}
.hstats{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.hstat b{display:block;font-size:26px;font-weight:800;color:var(--acc)}
.hstat span{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
.hfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;max-width:1000px;margin:26px auto 0;padding:0 20px}
.hfeat .hf{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:left}
.hfeat .hf .i{font-size:24px}
.hfeat .hf b{display:block;margin:8px 0 3px;font-size:14px}
.hfeat .hf p{color:#aaa093;font-size:12.5px;line-height:1.5}
.counter{max-width:520px;margin:26px auto 0;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:18px 22px;text-align:left}
.counter .clabel{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;font-weight:700}
.cnum{margin:7px 0 10px;font-variant-numeric:tabular-nums}
.cnum b{font-size:40px;font-weight:800;color:var(--acc);letter-spacing:-1px}
.cnum .cgoal{color:var(--dim);font-size:15px;font-weight:600}
.cbar{height:9px;border-radius:99px;background:rgba(255,157,31,.14);overflow:hidden}
.cfill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.cfoot{margin-top:9px;font-size:11.5px;color:var(--dim)}
.cfoot #visitPct{color:var(--acc2);font-weight:800;font-variant-numeric:tabular-nums}
.seo-quote{max-width:820px;margin:30px auto 0;padding:16px 20px;border-left:3px solid var(--acc);
  background:var(--panel);border-radius:0 12px 12px 0;color:#c2b8ab;font-size:13.5px;line-height:1.6}
@media(max-width:640px){.hero h1{font-size:28px}}

/* farmeos */
.farms{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:10px;margin-top:8px}
.farm{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.farm:hover{border-color:var(--line2)}
.farm img{width:100%;height:92px;object-fit:cover;display:block;opacity:.92}
.farm .fb{padding:10px 12px}
.farm b{font-size:13.2px}
.farm p{color:#c2b8ab;font-size:12.3px;line-height:1.5;margin-top:4px}
.farm .rtags{margin-top:7px}

/* dinero real */
.gp{color:var(--karma);font-weight:800}
.sale{color:var(--buy);font-weight:700;font-size:12.5px}

/* recursos */
.chipsbar{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.fchip{background:var(--panel);border:1px solid var(--line);color:var(--dim);border-radius:99px;
  padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:.12s}
.fchip:hover{color:var(--txt);border-color:var(--line2)}
.fchip.on{background:rgba(255,157,31,.14);color:var(--acc);border-color:var(--line2);font-weight:700}
.resgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px;margin-top:10px}
.wrap .res{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;color:var(--txt);text-decoration:none;transition:.12s}
.wrap .res:hover{border-color:var(--acc);text-decoration:none}
.res b{display:block;font-size:13.4px}
.res .st{font-style:normal;font-size:11px}
.res span{display:block;color:var(--dim);font-size:11.8px;margin-top:2px;min-height:28px}
.rtags{display:flex;gap:5px;margin-top:7px}
.rt{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.4px;padding:1px 7px;border-radius:99px}
.rt.f{background:rgba(52,211,153,.13);color:var(--buy)}
.rt.p{background:rgba(199,139,250,.14);color:var(--karma)}
.rt.c{background:rgba(255,255,255,.05);color:var(--dim)}

/* ---- capa viva: jefes, bazar, cuenta, mapa ---- */
.bossbox,.tpbox{display:block}
.bossbox .t,.tpbox .t{display:block;font-weight:700;margin-bottom:8px}
.bossrow{display:flex;gap:10px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line);font-size:13px}
.bossrow:last-of-type{border-bottom:none}
.bossrow .cd{min-width:74px;color:var(--acc);font-variant-numeric:tabular-nums}
.bossrow .bz{color:var(--dim);font-size:11.5px;margin-left:auto}
.bfoot{margin-top:8px;color:var(--dim);font-size:11px}
.tpbest{font-size:13px;margin-bottom:8px}
.tpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 16px}
.tprow{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;border-bottom:1px dashed var(--line)}
.tprow b,.tile b{font-variant-numeric:tabular-nums}
i.g{color:#ffc46b;font-style:normal;font-size:10px}
i.s{color:#c8ccd4;font-style:normal;font-size:10px}
i.b{color:#c08a5a;font-style:normal;font-size:10px}
.apirow{display:flex;gap:8px;flex-wrap:wrap}
.apirow input{flex:1;min-width:220px;background:rgba(16,13,10,.9);border:1px solid var(--line);
  border-radius:9px;color:var(--txt);padding:9px 12px;font-size:13px;font-family:inherit}
.apirow input:focus{outline:1px solid var(--acc)}
.applyBtn{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#1a1206;border:none;
  border-radius:99px;padding:9px 16px;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
.applyBtn:hover{filter:brightness(1.08)}
.ghostBtn{background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:99px;
  padding:9px 14px;font-size:13px;cursor:pointer;font-family:inherit}
.ghostBtn:hover{color:var(--skip);border-color:var(--skip)}
.tfoot{color:var(--dim);font-size:11.5px;margin-top:8px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:10px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.tile.wide{grid-column:1/-1}
.tile .tl{display:block;font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px;font-weight:700}
.tile b{font-size:16px}
.tile p{color:#c2b8ab;font-size:12.3px;margin-top:4px}
.tile select{width:100%;min-width:0}
.cbar.big{height:14px;margin:6px 0}
.advice{padding-left:2px}
.advice li{list-style:none;color:#c2b8ab;font-size:13px;padding:4px 0;border-bottom:1px dashed var(--line)}
.advice li:last-child{border-bottom:none}
.eqrow{display:flex;gap:10px;align-items:baseline;font-size:12.5px;padding:2px 0}
.eqrow span{color:var(--dim);min-width:90px}
.eqrow i{color:var(--wait);font-style:normal;margin-left:auto;font-size:11.5px}
.achvgrid{display:flex;flex-wrap:wrap;gap:8px}
.achv{display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.4);border:1px solid var(--line);
  border-radius:99px;padding:6px 13px;font-size:12.5px;filter:grayscale(1);opacity:.45}
.achv.on{filter:none;opacity:1;border-color:rgba(47,169,124,.5)}
/* marcadores numerados de la ruta */
.znum{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 14px/1 system-ui,'Segoe UI',sans-serif;color:#0a0806;border:2.5px solid #0a0806;
  box-shadow:0 2px 8px rgba(0,0,0,.65)}
.z-now{background:#ff9d1f;animation:zpulse 1.6s ease-in-out infinite}
.z-done{background:#2fa97c}
.z-todo{background:#d9d2c7}
.z-hub{background:#ffc46b;font-size:11px}
@keyframes zpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,157,31,.55)}50%{box-shadow:0 0 0 11px rgba(255,157,31,0)}}
.lgk{display:inline-flex;align-items:center;gap:5px;margin-right:6px}
.lgi{width:20px;height:20px;font-size:11px;display:inline-flex;animation:none}
.lgdot{width:14px;height:5px;border-radius:3px;display:inline-block}
.ztitle{font-weight:700;font-size:13px}
.ztitle .zn{display:inline-flex;width:18px;height:18px;border-radius:50%;background:var(--acc);color:#0a0806;
  align-items:center;justify-content:center;font-size:11px;margin-right:6px;vertical-align:-3px}
.zrange{color:var(--acc2);font-size:11.5px;margin-top:2px}
.zwp{color:#c2b8ab;font-size:11.5px;margin-top:5px;max-width:230px;white-space:normal}

/* muñeco de equipo estilo juego */
.paperdoll{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;margin-top:8px}
.eqstats{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:12px;padding:11px 13px;min-width:170px}
.eqstats .tl{display:block;font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px;font-weight:700}
.strow{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;padding:2.5px 0;border-bottom:1px dashed var(--line)}
.strow:last-child{border-bottom:none}
.strow b{color:var(--acc2);font-variant-numeric:tabular-nums}
.dollmid{display:flex;gap:12px;align-items:center;flex:1;justify-content:center}
.dollcol{display:flex;flex-direction:column;gap:7px}
.dollchar{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:120px;text-align:center}
.dollchar .dico{font-size:52px;filter:drop-shadow(0 0 14px rgba(255,157,31,.35))}
.dollchar .dim{color:var(--dim);font-size:11.5px}
.dollweap{display:flex;gap:8px;justify-content:center;width:100%;padding-top:10px;border-top:1px dashed var(--line);margin-top:4px}
.eqslot{width:46px;height:46px;border-radius:9px;border:2px solid #666;background:#0b0906;
  display:flex;align-items:center;justify-content:center;cursor:help;position:relative;transition:.12s}
.eqslot:hover{transform:scale(1.12);z-index:3}
.eqslot img{width:100%;height:100%;border-radius:7px;display:block}
.eqslot.empty{border-style:dashed;border-color:var(--line2);color:var(--dim)}
.eqslot.old{box-shadow:0 0 0 2px var(--wait)}
.eqslot .warn{position:absolute;top:-7px;right:-7px;font-style:normal;font-size:12px;
  background:#0a0806;border-radius:50%;padding:1px}
#eqtip{position:absolute;display:none;z-index:99;background:rgba(8,6,4,.97);border:1px solid var(--line2);
  border-radius:11px;padding:11px 13px;max-width:270px;font-size:12.5px;box-shadow:0 8px 26px rgba(0,0,0,.7);
  pointer-events:none}
#eqtip .dim{color:var(--dim);font-size:11px;margin:2px 0 5px}
#eqtip .qty{color:var(--acc);font-weight:800;margin-left:6px;font-size:13px}
#eqtip .stat{color:#8fdbb2}
#eqtip .desc{color:var(--dim);font-style:italic;margin-top:6px;font-size:11.3px}
#eqtip .warn2{color:var(--wait);margin-top:6px;font-size:11.5px}

/* IMPORTANTE: Leaflet usa z-index 400-700 en sus paneles y se colaba por encima de la
   cabecera fija. Creamos un contexto de apilamiento propio en el contenedor del mapa
   (isolation+z-index:0) y subimos la cabecera por encima. */
#gwmapWrap{margin:4px 0 18px;position:relative;z-index:0;isolation:isolate}
#gwmap,#xpmap{position:relative;z-index:0;isolation:isolate}
.leaflet-container{z-index:0}
#gwmap{height:420px;border-radius:14px;border:1px solid var(--line2);background:#000}
.maplegendbox{margin-top:8px;color:var(--dim);font-size:11.5px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.maplegendbox i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.leaflet-container{font:inherit}
.leaflet-tooltip{background:rgba(10,8,6,.92);color:var(--txt);border:1px solid var(--line2);border-radius:8px}

/* panel explicativo del buscador de karma */
.shopHelp{position:relative;max-width:940px;margin:16px auto 0;
  background:linear-gradient(100deg, rgba(255,157,31,.10), rgba(47,169,124,.07));
  border:1px solid var(--line2);border-radius:14px;padding:14px 40px 14px 18px}
.shopHelp.hidden{display:none}
.shopHelp b{font-size:14.5px}
.shopHelp p{color:#c2b8ab;font-size:13px;line-height:1.55;margin:6px 0}
.shopHelp ol{margin:6px 0 0;padding-left:20px}
.shopHelp li{color:#c2b8ab;font-size:12.8px;line-height:1.5;padding:2px 0}
.shopHelp .dmg2{color:var(--acc2)}
.shopHelpX{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--dim);
  font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.shopHelpX:hover{color:var(--acc);background:rgba(255,157,31,.12)}
.shopReopen{display:inline-block;margin:10px auto 0;background:var(--panel);border:1px solid var(--line);
  color:var(--dim);border-radius:99px;padding:5px 13px;font-size:12px;cursor:pointer;font-family:inherit}
.shopReopen:hover{color:var(--acc);border-color:var(--line2)}

/* pestaña/contenido solo P2P */
body.f2p .p2ptab{display:none}

/* almacén (banco/materiales/bolsa) */
.stbtns{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 8px}
.stbtn{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:99px;
  padding:6px 13px;font-size:12.5px;cursor:pointer;font-family:inherit}
.stbtn:hover{border-color:var(--line2)}
.stbtn.on{background:rgba(255,157,31,.14);color:var(--acc);border-color:var(--line2);font-weight:700}
.stcount{color:var(--dim);font-size:12px;margin-bottom:8px}
.stgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;max-height:360px;overflow-y:auto;padding:2px}
.stcell{position:relative;aspect-ratio:1;border:2px solid #555;border-radius:8px;background:#0b0906;cursor:help}
.stcell img{width:100%;height:100%;border-radius:6px;display:block}
.stcell b{position:absolute;right:2px;bottom:1px;font-size:10.5px;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000;font-variant-numeric:tabular-nums}
.stcell.pend{border-style:dashed;border-color:var(--line2);
  background:linear-gradient(100deg,#0b0906 30%,rgba(255,157,31,.10) 50%,#0b0906 70%);
  background-size:240% 100%;animation:stshine 1.1s linear infinite}
@keyframes stshine{from{background-position:140% 0}to{background-position:-40% 0}}
.stload{display:flex;align-items:center;gap:8px;color:var(--acc);font-size:11.5px;margin-bottom:7px}
.stload i{width:11px;height:11px;border-radius:50%;border:2px solid var(--acc);border-top-color:transparent;
  animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.syncbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--dim);font-size:11.8px;padding:9px 14px}

/* expansiones: sub-menú + contenido */
.xpaclayout{display:flex;gap:16px;align-items:flex-start}
#xpacNav{display:flex;flex-direction:column;gap:8px;flex-shrink:0;width:104px;position:sticky;top:126px}
.xpbtn{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--xc);color:var(--txt);
  border-radius:11px;padding:10px 8px;cursor:pointer;font-family:inherit;text-align:left;transition:.12s}
.xpbtn:hover{background:var(--panel2)}
.xpbtn.on{background:color-mix(in srgb, var(--xc) 16%, transparent);border-color:var(--xc)}
.xpbtn b{display:block;font-size:14px;color:var(--xc)}
.xpbtn span{font-size:10.5px;color:var(--dim)}
#xpacContent{flex:1;min-width:0}
.xphead{border-left:4px solid var(--xc);padding-left:12px;margin-bottom:14px}
.xphead h3{font-size:20px}
.xphead .xpyr{color:var(--dim);font-size:14px;font-weight:500}
.xptag{color:var(--xc);font-size:13.5px;margin-top:2px}
.xpsteps{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.xpstep{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.xpstep .xi{font-size:22px;flex-shrink:0}
.xpstep b{font-size:13.5px}
.xpstep p{color:#c2b8ab;font-size:12.8px;line-height:1.5;margin-top:3px}
.xpmaphead{font-size:12.5px;color:var(--acc);text-transform:uppercase;letter-spacing:.7px;margin:6px 0 8px;font-weight:700}
#xpmap{height:380px;border-radius:14px;border:1px solid var(--line2);background:#000}
.xpmk{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 14px/1 system-ui;color:#0a0806;border:2.5px solid #0a0806;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.xplegend{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0;color:var(--dim);font-size:11.5px}
.xplegend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.xplist{display:flex;flex-direction:column;gap:5px}
.xprow{display:flex;gap:10px;align-items:baseline;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.xprow b{width:22px;height:22px;flex-shrink:0;border-radius:50%;color:#0a0806;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.xprow .xn{font-weight:600;font-size:13.5px;min-width:150px}
.xprow .xnote{color:var(--dim);font-size:12px}
@media(max-width:720px){.xpaclayout{flex-direction:column}#xpacNav{flex-direction:row;flex-wrap:wrap;width:auto;position:static}}

footer{padding:16px 20px 34px;color:var(--dim);font-size:11.5px}
@media(max-width:820px){aside{display:none}}