/* ===========================================================================
   Estilos compartidos del sitio (Tienda + Jugadores).
   =========================================================================== */
@font-face{
  font-family:'Pixellari';
  src:url('Pixellari.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:swap;
}
:root{
  --bg:#0f1220;--card:#171b2e;--row:#1b2036;--row2:#161a2c;--ink:#e6e8f0;
  --mut:#9aa3c0;--line:#2a3050;--acc:#7aa2ff;
  --gold:#ffd166;--coin:#7fe0ff;
  /* colores de rareza (Item.cs) */
  --r0:#e6e8f0;--r1:#00ba3e;--r2:#3cbcfc;--r3:#cf37e6;--r4:#ffbb00;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.55 'Pixellari','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}

/* ---- barra de navegacion / menu ---- */
.nav{position:sticky;top:0;z-index:40;background:rgba(15,18,32,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1150px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:10px;height:58px}
.brand{font-weight:800;font-size:19px;letter-spacing:.3px;margin-right:14px;display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--ink)}
.brand .logo{width:30px;height:30px;border-radius:8px;image-rendering:pixelated;border:1px solid var(--line);display:inline-block}

/* ---- hero / banner ---- */
.hero{max-width:1150px;margin:18px auto 0;padding:0 18px;position:relative}
.hero-img{width:100%;height:180px;object-fit:cover;object-position:center 42%;border-radius:16px;border:1px solid var(--line);display:block}
.hero-cap{position:absolute;inset:0 18px;border-radius:16px;padding:0 30px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(90deg,rgba(10,12,24,.86) 0%,rgba(10,12,24,.55) 45%,rgba(10,12,24,.05) 100%)}
.hero-cap h2{font-size:34px;margin:0;letter-spacing:.5px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.hero-cap p{margin:6px 0 0;color:#c6cde6;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
@media(max-width:600px){.hero-img{height:130px}.hero-cap h2{font-size:24px}.hero-cap p{display:none}}
.nav a.tab{color:var(--mut);font-weight:600;font-size:14.5px;padding:8px 14px;border-radius:9px}
.nav a.tab:hover{color:var(--ink);background:var(--row)}
.nav a.tab.active{color:var(--ink);background:var(--row);box-shadow:inset 0 0 0 1px var(--line)}
/* menu responsive en movil: el texto de la marca se oculta (queda el logo) y
   las pestanas se compactan; si aun no caben, la barra hace scroll horizontal. */
@media(max-width:620px){
  .nav-in{height:auto;min-height:52px;padding:6px 10px;gap:3px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-in::-webkit-scrollbar{display:none}
  .brand{font-size:0;margin-right:6px;gap:0;flex:none}
  .nav a.tab{padding:7px 9px;font-size:13px;white-space:nowrap;flex:none}
  .nav .spacer{display:none}
}
.nav .spacer{flex:1}

.wrap{max-width:1150px;margin:0 auto;padding:26px 18px 70px}
h1{font-size:26px;margin:0 0 4px}
.sub{color:var(--mut);font-size:13.5px;margin:0 0 18px}
.bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;align-items:center}
.search{flex:1 1 240px;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:15px}
.search:focus{outline:none;border-color:var(--acc)}
select{padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14px}
.count{color:var(--mut);font-size:13px}
.btn{padding:11px 16px;border-radius:10px;border:1px solid var(--line);background:var(--row);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{border-color:var(--acc)}

/* ---- sub-pestañas (realm / leaderboard) ---- */
.subtabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:4px}
.stab{border:none;background:transparent;color:var(--mut);font:inherit;font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:8px;cursor:pointer;white-space:nowrap}
.stab:hover{color:var(--ink)}
.stab.active{background:var(--row);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.stab.perma.active{background:#2a1530;color:#ff9f6e;box-shadow:inset 0 0 0 1px #5a2a40}
.lbhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:6px 0 14px}

/* ---- tablas ---- */
table.grid{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.grid th{text-align:left;background:#11152a;color:var(--mut);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;padding:11px 14px;cursor:pointer;white-space:nowrap;user-select:none}
.grid th .arr{opacity:.45;font-size:10px}
.grid td{padding:9px 14px;border-top:1px solid var(--line);vertical-align:middle}
.grid tbody tr:nth-child(odd){background:var(--row2)}
.grid tbody tr:nth-child(even){background:var(--row)}
.grid tbody tr:hover{background:#222a48}
.grid tbody tr.clickable{cursor:pointer}
/* movil: las tablas anchas hacen scroll horizontal en vez de apretarse, y
   las celdas van mas compactas. Las que ya caben no muestran scroll. */
@media(max-width:620px){
  table.grid{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
  .grid th,.grid td{padding:8px 10px;white-space:nowrap}
  .grid th{font-size:11.5px}
}

.iname{display:flex;align-items:center;gap:11px;font-weight:600;white-space:nowrap}
.spr{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;background:#0d1020;border:1px solid var(--line);border-radius:8px;padding:3px;flex:none}
.spr.noimg{display:inline-block}
.amt{color:var(--mut);font-weight:600;font-size:13px;margin-left:2px}
.req{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-left:4px}
.price{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.price .g{color:var(--gold)}.price .c{color:var(--coin)}
.price .unit{font-size:11px;font-weight:600;opacity:.75;margin-left:2px}
.player{white-space:nowrap}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#566;vertical-align:middle}
.dot.on{background:#37d67a;box-shadow:0 0 6px #37d67a}
.srv{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:2px 8px;background:#27314f;color:#9ec1ff}
.rar{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px;margin-left:6px}
.rank{font-weight:800;color:var(--mut);font-variant-numeric:tabular-nums}
.rank.top1{color:#ffd166}.rank.top2{color:#cfd6e6}.rank.top3{color:#e3a86b}
.empty,.error{padding:40px;text-align:center;color:var(--mut)}
.error{color:#ff9f9f}
footer{color:var(--mut);font-size:12px;margin-top:26px;text-align:center}

/* ---- tooltip flotante ---- */
#tip{position:fixed;z-index:50;max-width:280px;background:#0c0f1e;border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 8px 30px rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .08s;font-size:13px}
#tip.show{opacity:1}
#tip .tn{font-weight:700;margin-bottom:3px}
#tip .tmeta{color:var(--mut);font-size:11.5px;margin-bottom:6px}
#tip .tdesc{color:#cdd3ea;font-size:12.5px;line-height:1.45;margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
#tip .tnone{color:var(--mut);font-style:italic}
#tip .tstats{margin-top:2px}
#tip .tstat{display:flex;justify-content:space-between;gap:18px;font-size:12.5px;padding:1px 0}
#tip .tstat span{color:var(--mut)}
#tip .tstat b{color:#e8ecff;font-weight:700}
#tip .tstat.tflag{display:block;color:#ffd166;font-size:12px;font-style:italic}

/* ===========================================================================
   Pagina de jugadores
   =========================================================================== */
.player-detail{display:none}
.player-detail.show{display:block}
.pd-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:18px}
.pd-name{font-size:30px;font-weight:800}
.pd-head .sub{font-size:16px;margin:0}
.pd-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tag{font-size:14px;font-weight:700;border-radius:8px;padding:5px 12px;background:var(--row);border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.tag.on{color:#37d67a;border-color:#2c6} .tag.off{color:var(--mut)}
.tag.rank-master{color:#ffd166;border-color:#5a4a1e} .tag.rank-vice{color:#9ec1ff;border-color:#2a3a5a} .tag.rank-member{color:var(--mut)}
.tag.gold{color:var(--gold)} .tag.coin{color:var(--coin)}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.pd-grid{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.panel h3{margin:0 0 12px;font-size:16.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}

/* clases / xp */
.xp-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.xp-row:first-of-type{border-top:none}
.xp-ico{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:21px;background:var(--row);border:1px solid var(--line);flex:none}
.xp-main{flex:1;min-width:0}
.xp-line{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.xp-name{font-weight:700;font-size:17px}
.xp-lvl{font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.xpbar{height:9px;background:#0d1020;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.xpbar-fill{height:100%;background:linear-gradient(90deg,#7aa2ff,#37d67a)}
.xp-pct{color:var(--mut);font-size:13px;margin-top:4px}

/* logros en la ficha de jugador */
.ach-row{display:flex;gap:11px;padding:9px 0;border-top:1px solid var(--line)}
.ach-row:first-of-type{border-top:none}
.ach-ico{flex:none;width:24px;text-align:center;font-size:17px}
.ach-main{flex:1;min-width:0}
.ach-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ach-name{font-weight:700;font-size:14.5px}
.ach-lvl{flex:none;color:var(--mut);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ach-tip{color:var(--mut);font-size:12.5px;margin-top:2px}

/* log PvP (kills/deaths en la ficha de jugador) */
.pvp-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--line);font-size:14.5px}
.pvp-row:first-of-type{border-top:none}
.pvp-ico{flex:none;width:22px;text-align:center}
.pvp-txt{flex:1;min-width:0;color:#c6cde6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvp-when{flex:none;color:var(--mut);font-size:13px;white-space:nowrap}
.pvp-link{color:#9ec1ff;cursor:pointer;font-weight:600}
.pvp-link:hover{text-decoration:underline}

/* ===== catalogo de items ===== */
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.it-card{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 8px;cursor:pointer;color:var(--ink);font:inherit;transition:border-color .12s,transform .08s}
.it-card:hover{border-color:var(--acc);transform:translateY(-2px)}
.it-ico{width:46px;height:46px;object-fit:contain;image-rendering:pixelated}
.it-ico.noimg{background:var(--row);border-radius:8px}
.it-name{font-size:12.5px;font-weight:600;text-align:center;line-height:1.25;color:#c6cde6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* modal de detalle */
.imodal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:18px}
.imodal.show{display:flex}
.imodal-bg{position:absolute;inset:0;background:rgba(6,8,16,.66);backdrop-filter:blur(3px)}
.imodal-box{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.imodal-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--row);color:var(--mut);cursor:pointer;font-size:14px}
.imodal-x:hover{color:var(--ink);border-color:var(--acc)}
.idet-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.idet-ico{width:56px;height:56px;object-fit:contain;image-rendering:pixelated;background:var(--row);border:1px solid var(--line);border-radius:12px;padding:5px}
.idet-name{font-size:19px;font-weight:800}
.isel{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.isel label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.isel select,.isel input[type=range]{font:inherit;color:var(--ink)}
.isel select{background:var(--row);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px}
.isel input[type=range]{width:140px;accent-color:var(--acc)}
.isel .isel-v{color:var(--ink);font-size:13px}
.isel-fixed{align-self:flex-end;font-size:13px;color:var(--mut);text-transform:none;letter-spacing:0}
.isel-fixed b{color:var(--ink)}
/* stats dentro del modal (reusa el formato del tooltip) */
.idet .tn{font-weight:800;font-size:16px;margin-bottom:3px}
.idet .tmeta{color:var(--mut);font-size:12px;margin-bottom:8px}
.idet .tstats{margin-top:2px}
.idet .tstat{display:flex;justify-content:space-between;gap:18px;font-size:13.5px;padding:3px 0;border-top:1px solid var(--line)}
.idet .tstat:first-child{border-top:none}
.idet .tstat span{color:var(--mut)}
.idet .tstat b{color:#e8ecff;font-weight:700}
.idet .tstat.tflag{display:block;color:#ffd166;font-size:12.5px;font-style:italic;border-top:none}
.idet .tdesc{color:#cdd3ea;font-size:13px;line-height:1.5;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.idet .tnone{color:var(--mut);font-style:italic}

/* cuenta atras de respawn de boss */
.boss-eta{color:#c6cde6;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.boss-eta.soon{color:#ff9f6e}

/* montura/pet equipados (ficha) y chip en el leaderboard de pets */
.pd-companions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 22px}
.cmp-box{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.cmp-lbl{color:var(--mut);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.cmp-lvl{color:var(--ink);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.cmp{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.cmp-ico{width:26px;height:26px;object-fit:contain;image-rendering:pixelated;flex:none}

/* leaderboard + feed PvP lado a lado (columna ancha + columna estrecha) */
.players-cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.players-cols .lb-col,.players-cols .pvp-col{min-width:0}
@media(max-width:900px){.players-cols{grid-template-columns:1fr}}

/* equipo (paper doll en grid) */
.equip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.eq{position:relative;background:var(--row);border:1px solid var(--line);border-radius:11px;padding:10px 8px;text-align:center;min-height:92px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:default}
.eq .slot{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.eq .spr{width:46px;height:46px}
.eq .en{font-size:13px;font-weight:600;line-height:1.2}
.eq.empty-slot{opacity:.45}
.eq.blank{background:transparent;border:none;min-height:0;visibility:hidden}
.eq .emptytxt{color:var(--mut);font-size:11px;margin-top:14px}
.section-title{font-size:13px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:6px 0 8px}

/* ===========================================================================
   Home / landing
   =========================================================================== */
.home-hero{max-width:1150px;margin:22px auto 0;padding:0 18px}
.home-hero-inner{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.home-hero-inner img{width:100%;height:380px;object-fit:cover;object-position:center 40%;display:block}
.home-hero-cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 8%;
  background:linear-gradient(90deg,rgba(8,10,20,.92) 0%,rgba(8,10,20,.65) 50%,rgba(8,10,20,.2) 100%)}
.home-hero-cap h1{font-size:46px;margin:0 0 6px;letter-spacing:.5px;text-shadow:0 3px 16px rgba(0,0,0,.7)}
.home-hero-cap .tagline{font-size:20px;color:#ffd166;font-weight:700;margin:0 0 22px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
@media(max-width:680px){.home-hero-inner img{height:300px}.home-hero-cap{padding:0 22px}.home-hero-cap h1{font-size:30px}.home-hero-cap .tagline{font-size:16px}}

.store-btns{display:flex;flex-wrap:wrap;gap:12px}
.store-btn{display:inline-flex;align-items:center;gap:11px;background:#11152a;border:1px solid var(--line);border-radius:12px;padding:10px 18px 10px 14px;color:var(--ink);transition:border-color .15s,transform .1s}
.store-btn:hover{border-color:var(--acc);transform:translateY(-2px)}
.store-btn svg{width:26px;height:26px;flex:none}
.store-btn .st{display:flex;flex-direction:column;line-height:1.15}
.store-btn .st small{font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.store-btn .st b{font-size:16px}

.home-sec{max-width:1150px;margin:0 auto;padding:40px 18px 0}
.home-sec.intro p{font-size:17px;line-height:1.7;color:#c6cde6;max-width:760px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
@media(max-width:760px){.features{grid-template-columns:1fr}}
.feature{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.feature .ico{font-size:26px;margin-bottom:8px}
.feature h3{margin:0 0 6px;font-size:17px}
.feature p{margin:0;color:var(--mut);font-size:14px;line-height:1.55}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.navcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;transition:border-color .15s,transform .1s}
.navcard:hover{border-color:var(--acc);transform:translateY(-2px)}
.navcard h3{margin:0 0 4px;font-size:18px;color:var(--ink)}
.navcard p{margin:0;color:var(--mut);font-size:14px}
.community{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.community a{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 16px;color:var(--ink);font-weight:600}
.community a:hover{border-color:var(--acc)}