:root {
  --gold: #e8c34a; --gold-d: #9a7420; --gold-l: #fff0a8; --wood: #3a2616; --wood-l: #5a3d22; --wood-d: #22150b;
  --parch: #ecdcb2; --parch-d: #d6c08c; --ink: #2e1f10; --red: #a8322c; --green: #3f8a3a;
  --r0: #b9b4a8; --r1: #4da3ff; --r2: #b266ff; --r3: #ffb020; --r4: #ff4060;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #10131c; color: #f3e9d2; font-family: 'Crimson Text', Georgia, 'Palatino Linotype', serif; font-size: 16px; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: grab; touch-action: none; }
#game.drag { cursor: grabbing; }
.hidden { display: none !important; }
h1, h2, h3, .brand-title, .btn, .nav button, .loot-title { font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; }
img.px, canvas.px { image-rendering: pixelated; }

/* ---------- placas del HUD (madera con ribete dorado) ---------- */
.plate {
  background: linear-gradient(180deg, #4d331c 0%, #38230f 55%, #2a190a 100%);
  border: 2px solid var(--gold-d); border-radius: 8px;
  box-shadow: 0 0 0 1px #150c05, inset 0 1px 0 rgba(255, 224, 150, .28), inset 0 -8px 14px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .55);
}
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * , .hud-top > * { pointer-events: auto; }
.hud-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 10px; align-items: stretch; justify-content: space-between; pointer-events: none !important; }
.brand { display: flex; gap: 10px; align-items: center; padding: 6px 14px 6px 8px; }
.crest, .load-crest { width: 38px; height: 44px; display: grid; place-items: center; font: 900 22px 'Cinzel', serif; color: var(--gold-l); text-shadow: 0 2px 0 #5a1010;
  background: linear-gradient(160deg, #c8323c, #7a1620); clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%); box-shadow: inset 0 0 0 2px var(--gold); }
.brand-title { font-weight: 900; font-size: 17px; letter-spacing: .5px; color: var(--gold-l); text-shadow: 0 2px 0 #000; }
.brand-sub { font-size: 14px; color: #d9c69a; font-style: italic; }
.res { display: flex; align-items: center; padding: 4px 6px; gap: 2px; }
.chip { display: flex; align-items: center; gap: 7px; padding: 4px 14px; border-right: 1px solid rgba(232, 195, 74, .25); }
.chip:last-child { border-right: 0; }
.chip b { font: 700 19px 'Cinzel', serif; color: #fff6d8; text-shadow: 0 2px 0 #000; }
.chip small { color: #c9b58a; font-size: 13px; }
.ico { font-size: 18px; filter: drop-shadow(0 1px 0 #000); }
.coin { width: 20px; height: 20px; border-radius: 50%; display: inline-block; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff6c0 0 12%, #ffd84a 13% 45%, #d19a1e 46% 70%, #8a5e10 71%); box-shadow: 0 0 0 1px #5a3d08, 0 2px 4px rgba(0, 0, 0, .5); }
.coin.big { width: 34px; height: 34px; animation: coinspin 3.2s ease-in-out infinite; }
@keyframes coinspin { 0%, 100% { transform: rotateY(0) } 50% { transform: rotateY(180deg) } }
.walletbtn { font: 700 15px 'Cinzel', serif; color: var(--gold-l); padding: 0 18px; cursor: pointer; }
.walletbtn:hover { filter: brightness(1.2); }

.loot { position: absolute; left: 10px; top: 78px; width: 268px; padding: 10px; }
.loot-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.loot-info { flex: 1; }
.loot-title { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #c9b58a; }
.loot-val b { font: 700 22px 'Cinzel', serif; color: var(--gold-l); text-shadow: 0 2px 0 #000; }
.loot-val small { color: #b9a67c; }
.loot .btn { width: 100%; }
.loot-warn { margin-top: 8px; font-size: 14px; color: #ffb0a0; line-height: 1.2; }
.bar { height: 8px; border-radius: 5px; background: #1a0f06; box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(232, 195, 74, .35); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #ffe680, #e0a020); box-shadow: 0 0 8px #ffcc40; transition: width .4s; }
.bar.big { height: 14px; width: 320px; max-width: 70vw; margin: 18px auto 10px; }

.mini { position: absolute; right: 10px; bottom: 96px; padding: 5px; display: flex; flex-direction: column; gap: 5px; }
.mini canvas { width: 200px; height: 150px; border-radius: 4px; display: block; cursor: pointer; box-shadow: inset 0 0 0 1px #000; }
.test-badge { position: absolute; left: 10px; bottom: 96px; font-size: 13px; color: #ffe9a8; background: rgba(20, 10, 4, .72); border: 1px dashed var(--gold-d); padding: 4px 9px; border-radius: 6px; max-width: 300px; }

.nav { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 8px; padding: 0; }
.nav button { position: relative; width: 86px; height: 78px; cursor: pointer; color: #f6e7c0; font-weight: 700; font-size: 12px; letter-spacing: .4px; padding: 4px 2px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  background: linear-gradient(180deg, #5a3d22, #38230f 60%, #26160a); border: 2px solid var(--gold-d); border-radius: 10px;
  box-shadow: 0 0 0 1px #150c05, inset 0 1px 0 rgba(255, 224, 150, .3), 0 6px 14px rgba(0, 0, 0, .6); transition: transform .12s, filter .12s; }
.nav button:hover { transform: translateY(-4px); filter: brightness(1.18); border-color: var(--gold); }
.nav button img { height: 44px; image-rendering: pixelated; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
.nav button.hot::after { content: ''; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: #ff4a3a; box-shadow: 0 0 0 2px #2a0a06, 0 0 10px #ff4a3a; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.3) } }

/* ---------- botones ---------- */
.btn { cursor: pointer; font-weight: 700; font-size: 14px; letter-spacing: .5px; padding: 8px 14px; border-radius: 7px; color: #2a1806; border: 1px solid #5a3d08;
  background: linear-gradient(180deg, #fff0a8 0%, #f0c84a 40%, #c8921e 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(90, 50, 0, .35), 0 3px 6px rgba(0, 0, 0, .4); transition: filter .1s, transform .08s; }
.btn:hover { filter: brightness(1.1); } .btn:active { transform: translateY(2px); }
.btn.red { background: linear-gradient(180deg, #f08a70, #c8443a 45%, #8a2018); color: #fff3e0; border-color: #4a0c08; text-shadow: 0 1px 0 #4a0c08; }
.btn.wood { background: linear-gradient(180deg, #8a6238, #5a3d22 50%, #3a2616); color: #fbeecb; border-color: #1a0f06; text-shadow: 0 1px 0 #000; box-shadow: inset 0 1px 0 rgba(255, 224, 150, .35), 0 3px 6px rgba(0, 0, 0, .4); }
.btn.green { background: linear-gradient(180deg, #a8e08a, #58a83a 45%, #2f6a1e); color: #f4ffe8; border-color: #173a0c; text-shadow: 0 1px 0 #173a0c; }
.btn.big { font-size: 17px; padding: 12px 28px; }
.btn.tiny { font-size: 11px; padding: 4px 8px; }
.btn[disabled] { filter: grayscale(.9) brightness(.8); cursor: not-allowed; }
.cost { display: inline-flex; align-items: center; gap: 4px; }
.cost .coin { width: 14px; height: 14px; }

/* ---------- pergamino ---------- */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(8, 6, 14, .55); backdrop-filter: blur(2px); z-index: 20; animation: fade .18s; }
.overlay.dark { background: radial-gradient(circle at 50% 40%, rgba(40, 24, 60, .9), rgba(4, 3, 10, .96)); z-index: 30; }
@keyframes fade { from { opacity: 0 } }
.parch { width: min(980px, 96vw); height: min(680px, 90vh); display: flex; flex-direction: column; color: var(--ink); border-radius: 10px; position: relative;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .35), transparent 50%), radial-gradient(ellipse at 85% 90%, rgba(120, 80, 20, .28), transparent 55%),
    repeating-linear-gradient(92deg, rgba(120, 90, 40, .05) 0 3px, transparent 3px 9px), linear-gradient(180deg, #f1e3bc, #dcc792);
  border: 4px solid #4a2f14; box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px #2a190a, inset 0 0 60px rgba(110, 70, 20, .45), 0 24px 60px rgba(0, 0, 0, .7); animation: pop .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.92); opacity: 0 } }
.parch::before, .parch::after { content: '❖'; position: absolute; top: -15px; color: var(--gold); font-size: 22px; text-shadow: 0 2px 0 #2a190a; }
.parch::before { left: -12px; } .parch::after { right: -12px; }
.parch header { display: flex; align-items: center; justify-content: center; padding: 12px 50px 8px; border-bottom: 2px solid rgba(90, 55, 20, .45); position: relative; }
.parch h2 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: 2px; color: #4a1c10; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.x { position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 16px; color: #fff3e0; border: 2px solid var(--gold-d); background: radial-gradient(circle at 35% 30%, #d85a48, #8a2018); }
.parch-body { flex: 1; overflow: auto; padding: 14px 18px; }
.parch-body::-webkit-scrollbar { width: 10px; } .parch-body::-webkit-scrollbar-thumb { background: #8a6238; border-radius: 5px; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button { flex: 1; font: 700 14px 'Cinzel', serif; padding: 8px; cursor: pointer; color: #5a3d22; background: rgba(90, 55, 20, .14); border: 1px solid rgba(90, 55, 20, .4); border-radius: 6px; }
.tabs button.on { background: linear-gradient(180deg, #6a4526, #3a2616); color: var(--gold-l); border-color: #2a190a; }
.split { display: grid; grid-template-columns: 1fr 300px; gap: 14px; height: calc(100% - 50px); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; align-content: start; overflow: auto; padding: 4px; }
.card { position: relative; border-radius: 8px; padding: 6px 4px 5px; text-align: center; cursor: pointer; color: #f6ecd2; border: 2px solid var(--rc, #777);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 42%, #2a2030), #1a1420 75%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 3px 6px rgba(0, 0, 0, .35); transition: transform .1s; }
.card:hover { transform: translateY(-2px); } .card.sel { outline: 3px solid #fff3b0; box-shadow: 0 0 14px var(--rc); }
.card .art { height: 66px; display: grid; place-items: end center; }
.card .art img { image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45)); }
.card .nm { font: 700 12px 'Cinzel', serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .sub { font-size: 12px; color: #d9cdaa; }
.card .lv { position: absolute; top: 3px; left: 4px; font: 700 11px 'Cinzel', serif; background: rgba(0, 0, 0, .6); padding: 1px 5px; border-radius: 4px; }
.card .tag { position: absolute; top: 3px; right: 4px; font-size: 10px; font-weight: 700; background: var(--green); padding: 1px 5px; border-radius: 4px; }
.card.r3 .art, .card.r4 .art { animation: glow 2s ease-in-out infinite; }
@keyframes glow { 50% { filter: drop-shadow(0 0 8px var(--rc)); } }
.r0 { --rc: var(--r0); } .r1 { --rc: var(--r1); } .r2 { --rc: var(--r2); } .r3 { --rc: var(--r3); } .r4 { --rc: var(--r4); }
.rar { color: var(--rc); font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
.detail { background: rgba(70, 40, 12, .12); border: 1px solid rgba(90, 55, 20, .4); border-radius: 8px; padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.detail .hero-art { height: 120px; display: grid; place-items: center; border-radius: 8px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--rc) 55%, #2a2030), #1a1420 78%); border: 2px solid var(--rc); }
.detail h3 { margin: 2px 0 0; font-size: 19px; color: #4a1c10; }
.detail .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; border-bottom: 1px dotted rgba(90, 55, 20, .35); padding: 2px 0; }
.detail select { flex: 1; min-width: 0; font: 600 14px 'Crimson Text', serif; padding: 4px; background: #f6ecd2; border: 1px solid #8a6238; border-radius: 5px; color: var(--ink); }
.detail .btn { width: 100%; }
.btnrow { display: flex; gap: 6px; } .btnrow .btn { flex: 1; padding-left: 4px; padding-right: 4px; }
.muted { color: #7a5e3a; font-style: italic; } .small { font-size: 13px; }
.empty { grid-column: 1/-1; text-align: center; padding: 30px; color: #7a5e3a; font-style: italic; }

.altars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.altar { text-align: center; padding: 14px 10px; border-radius: 10px; color: #f6ecd2; border: 2px solid var(--gold-d);
  background: radial-gradient(circle at 50% 30%, #4a2f6a, #1c1430 75%); box-shadow: inset 0 0 30px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .4); }
.altar h3 { margin: 0 0 4px; color: var(--gold-l); font-size: 19px; }
.altar .art { height: 110px; display: grid; place-items: center; animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-7px) } }
.altar .art img { image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(200, 150, 255, .7)); }
.altar .btn { width: 100%; margin-top: 7px; }
.odds { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.odds span { padding: 2px 10px; border-radius: 12px; background: #2a2030; }
.list { display: flex; flex-direction: column; gap: 9px; }
.item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(70, 40, 12, .12); border: 1px solid rgba(90, 55, 20, .4); }
.item .grow { flex: 1; } .item h3 { margin: 0; font-size: 17px; color: #4a1c10; } .item p { margin: 2px 0 0; font-size: 15px; }
.item .lvl { font: 900 20px 'Cinzel', serif; color: #6a4526; width: 70px; text-align: center; }
.bank { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.box { padding: 14px; border-radius: 8px; background: rgba(70, 40, 12, .12); border: 1px solid rgba(90, 55, 20, .4); }
.box h3 { margin: 0 0 6px; color: #4a1c10; } .box .amt { font: 900 26px 'Cinzel', serif; color: #6a3a0c; }
.box input { width: 100%; font: 700 18px 'Cinzel', serif; padding: 8px; margin: 8px 0; border-radius: 6px; border: 2px solid #8a6238; background: #f8efd6; color: var(--ink); }
.box .btn { width: 100%; margin-top: 4px; }
.addr { font-family: Consolas, monospace; font-size: 12px; word-break: break-all; user-select: text; -webkit-user-select: text; }
table.rank { width: 100%; border-collapse: collapse; font-size: 16px; } table.rank th { font-family: 'Cinzel', serif; text-align: left; border-bottom: 2px solid rgba(90, 55, 20, .5); padding: 6px; } table.rank td { padding: 6px; border-bottom: 1px dotted rgba(90, 55, 20, .35); }
.zone-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 12px 0; font-size: 17px; }
.zone-info b { font-family: 'Cinzel', serif; color: #4a1c10; }
.zone-actions { display: flex; gap: 10px; flex-wrap: wrap; } .zone-actions .btn { flex: 1; min-width: 180px; }
.parch.narrow { width: min(620px, 96vw); height: auto; max-height: 90vh; }

/* ---------- invocación ---------- */
.summon-box { text-align: center; width: min(900px, 96vw); }
.summon-box h2 { font-size: 34px; color: var(--gold-l); text-shadow: 0 0 22px #b266ff, 0 3px 0 #000; margin: 0 0 20px; letter-spacing: 3px; }
.summon-cards { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 26px; perspective: 900px; }
.scard { width: 132px; height: 178px; border-radius: 10px; padding: 8px 6px; color: #fff; border: 3px solid var(--rc); position: relative;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 60%, #2a2030), #15101c 78%); box-shadow: 0 0 26px var(--rc), inset 0 0 0 1px #000;
  animation: flipin .6s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes flipin { from { transform: rotateY(90deg) scale(.6); opacity: 0; filter: brightness(4) } }
.scard .art { height: 96px; display: grid; place-items: center; } .scard .art img { image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .5)); }
.scard .nm { font: 700 13px 'Cinzel', serif; } .scard .rr { font-size: 14px; font-weight: 700; color: var(--rc); text-shadow: 0 1px 0 #000; }
.scard.r3::after, .scard.r4::after { content: ''; position: absolute; inset: -3px; border-radius: 10px; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); background-size: 250% 100%; animation: shine 1.8s linear infinite; pointer-events: none; }
@keyframes shine { from { background-position: 120% 0 } to { background-position: -120% 0 } }

.banner { position: fixed; left: 0; right: 0; top: 30%; text-align: center; z-index: 25; pointer-events: none; font: 900 64px 'Cinzel', serif; letter-spacing: 6px; color: var(--gold-l);
  text-shadow: 0 0 30px #ffb020, 0 5px 0 #5a1010, 0 8px 20px #000; animation: bannerin 3.2s ease-out both; }
.banner small { display: block; font-size: 24px; letter-spacing: 2px; color: #fff; }
@keyframes bannerin { 0% { transform: scale(2.4); opacity: 0 } 12% { transform: scale(1); opacity: 1 } 80% { opacity: 1 } 100% { opacity: 0; transform: translateY(-30px) } }
#toasts { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { padding: 8px 18px; border-radius: 8px; font-size: 16px; font-weight: 600; color: #fff3e0; background: linear-gradient(180deg, #4d331c, #2a190a); border: 2px solid var(--gold-d); box-shadow: 0 6px 18px rgba(0, 0, 0, .6); animation: toast 3.4s both; max-width: 90vw; }
.toast.err { border-color: #c8443a; background: linear-gradient(180deg, #5a1c16, #2a0a06); } .toast.ok { border-color: #58a83a; }
@keyframes toast { 0% { transform: translateY(-14px); opacity: 0 } 8%, 85% { transform: none; opacity: 1 } 100% { opacity: 0 } }

#loading { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 35%, #2c2140, #0a0810 75%); transition: opacity .6s; }
#loading h1, .gate-box h1 { font-size: 46px; margin: 14px 0 0; color: var(--gold-l); letter-spacing: 3px; text-shadow: 0 0 26px rgba(255, 176, 32, .6), 0 4px 0 #5a1010; }
#loading p { color: #c9b58a; font-style: italic; font-size: 19px; margin: 6px 0; }
.load-crest { width: 76px; height: 90px; font-size: 46px; margin: 0 auto; }
.gate-box { text-align: center; max-width: 520px; padding: 20px; } .gate-box p { font-size: 18px; color: #d9c69a; }

@media (max-width: 860px) {
  .brand-title { font-size: 13px; } .brand-sub { font-size: 12px; } .chip { padding: 3px 7px; gap: 4px; } .chip b { font-size: 14px; } .chip small { display: none; }
  .hud-top { flex-wrap: wrap; gap: 6px; } .walletbtn { padding: 6px 12px; } .loot { top: auto; bottom: 86px; left: 6px; width: 210px; padding: 7px; }
  .mini { display: none; } .test-badge { display: none; } .nav { gap: 3px; bottom: 5px; } .nav button { width: 54px; height: 62px; font-size: 9px; } .nav button img { height: 32px; }
  .split { grid-template-columns: 1fr; height: auto; } .altars, .bank { grid-template-columns: 1fr; } .banner { font-size: 36px; }
}

/* ---------- añadidos: equipo/cansancio, idiomas, mercado, conexión ---------- */
.hud-right { display: flex; gap: 8px; align-items: stretch; position: relative; }
.iconbtn { width: 52px; padding: 0 8px; cursor: pointer; display: grid; place-items: center; }
.iconbtn svg, .flag svg { width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px #000a; display: block; }
a.walletbtn { display: grid; place-items: center; text-decoration: none; }
.langmenu { position: absolute; top: 56px; right: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 5; min-width: 170px; }
.flag { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; background: none; color: #f6e7c0; font: 600 15px 'Crimson Text', serif; }
.flag:hover, .flag.on { background: rgba(232, 195, 74, .16); border-color: var(--gold-d); }
.flags { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.team { position: absolute; left: 10px; top: 236px; width: 268px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 350px); overflow: auto; }
.team-h { display: flex; justify-content: space-between; align-items: center; font: 700 12px 'Cinzel', serif; letter-spacing: 1px; text-transform: uppercase; color: #c9b58a; min-height: 24px; }
.tm { display: flex; gap: 8px; align-items: center; }
.tm-art { width: 38px; height: 40px; display: grid; place-items: end center; flex: none; overflow: hidden; }
.tm-i { flex: 1; min-width: 0; } .tm-n { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-s { font-size: 12px; color: #c9b58a; }
.tm.rest .tm-art { filter: grayscale(.8) brightness(.7); } .tm.ready .tm-s { color: #a8f08a; font-weight: 700; }
.bar.st { height: 6px; margin: 2px 0; } .bar.st i { background: linear-gradient(180deg, #a8f08a, #3f9a3a); box-shadow: none; }
.tm.rest .bar.st i { background: linear-gradient(180deg, #8ac8ff, #3a6ab8); } .tm.ready .bar.st i { background: linear-gradient(180deg, #fff0a8, #e0a020); }
.pulse { animation: pulse 1s infinite; }
.card.tired .art { filter: grayscale(.8) brightness(.75); }
.filters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 10px; }
.filters select, .filters input, .namein { font: 600 14px 'Crimson Text', serif; padding: 6px; background: #f8efd6; border: 2px solid #8a6238; border-radius: 6px; color: var(--ink); min-width: 0; }
.namein.big { font-size: 22px; padding: 10px 14px; text-align: center; width: min(340px, 90%); margin: 6px auto 14px; display: block; }
.mgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); height: calc(100% - 150px); }
.card.mk { cursor: default; padding-bottom: 8px; } .card.mk .nm { white-space: normal; min-height: 30px; } .price { font: 700 16px 'Cinzel', serif; color: var(--gold-l); margin: 4px 0; }
.mfoot { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 8px; } .pager { white-space: nowrap; font-weight: 700; }
.zhead { display: flex; gap: 16px; align-items: center; } .zhead p { font-size: 18px; font-style: italic; margin: 0; }
.zboss { flex: 0 0 130px; height: 130px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle, #4a2f6a, #1c1430 75%); border: 2px solid #9a7420; overflow: hidden; }
.reqs { margin-bottom: 12px; } .req { font-size: 16px; padding: 2px 0; } .req.ok { color: #2f6a1e; font-weight: 700; } .req.no { color: #8a2018; }
.sol { color: #6a3a9a; font-size: 15px; margin-left: 8px; }
.askbox { width: min(420px, 92vw); padding: 20px; color: var(--ink); border-radius: 10px; background: linear-gradient(180deg, #f1e3bc, #dcc792); border: 4px solid #4a2f14; box-shadow: 0 0 0 2px var(--gold), 0 24px 60px rgba(0, 0, 0, .7); }
.askbox h3 { margin: 0 0 8px; font-size: 20px; color: #4a1c10; } .askbox label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; } .askbox input { font: 700 18px 'Cinzel', serif; padding: 8px; border-radius: 6px; border: 2px solid #8a6238; background: #f8efd6; }
#ask { z-index: 35; } .wallets { display: flex; flex-direction: column; gap: 10px; align-items: center; margin: 18px 0 6px; } .wallets .btn { min-width: 260px; text-decoration: none; }
.gate-box h2 { color: var(--gold-l); font-size: 28px; margin: 6px 0; } .warn { color: #ffb0a0 !important; }
.hero-art { overflow: hidden; }
@media (max-width: 860px) { .team { display: none; } .filters { grid-template-columns: repeat(2, 1fr); } }
.detail .hero-art { flex: none; }
.iconbtn { width: auto; display: flex; gap: 8px; align-items: center; padding: 0 12px; } .who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; color: #f6e7c0; } .who b { font: 700 13px 'Cinzel', serif; } .who small { font: 11px Consolas, monospace; color: #c9b58a; }
@media (max-width: 860px) { .who { display: none; } }

/* ---------- logotipo ---------- */
.lockup { display: flex; flex-direction: column; align-items: center; }
.emblem { width: 210px; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7)) drop-shadow(0 0 26px rgba(255, 176, 32, .38)); animation: emblem 4.5s ease-in-out infinite; }
@keyframes emblem { 50% { transform: translateY(-6px); filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .7)) drop-shadow(0 0 38px rgba(255, 190, 60, .55)); } }
.wordmark { display: flex; flex-direction: column; align-items: center; margin-top: 6px; font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; }
.wm-top { font-weight: 700; font-size: 17px; letter-spacing: .62em; padding-left: .62em; text-transform: uppercase; color: #e6d3a0; text-shadow: 0 2px 0 #000; }
.wm-main { font-weight: 900; font-size: 68px; line-height: 1.02; letter-spacing: .09em; padding-left: .09em; text-transform: uppercase;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe07a 30%, #f0b62e 52%, #b8741a 68%, #f2c552 82%, #7a4a08 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #4a1c08) drop-shadow(0 4px 0 #2a0e04) drop-shadow(0 10px 18px rgba(0, 0, 0, .8)); }
.wm-rule { position: relative; width: 300px; max-width: 76vw; height: 14px; margin-top: 4px; background: linear-gradient(90deg, transparent, #e8c34a 18%, #fff0a8 50%, #e8c34a 82%, transparent) center / 100% 2px no-repeat; }
.wm-rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; background: linear-gradient(135deg, #fff0a8, #c8861a); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 2px #2a0e04, 0 0 10px #ffb020; }
#loading .lockup, .gate-box .lockup { margin-bottom: 8px; }
.brand { padding: 4px 16px 4px 8px; }
.brand-logo { height: 46px; width: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); flex: none; }
.brand-title { font-size: 19px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1; background: linear-gradient(180deg, #fffbe0, #ffd84a 45%, #c8861a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #000); }
.brand-title small { display: block; font-size: 9px; letter-spacing: 4px; margin-bottom: 2px; -webkit-text-fill-color: #e6d3a0; }
@media (max-width: 860px) { .wm-main { font-size: 40px; } .wm-top { font-size: 12px; } .emblem { width: 120px; } .brand-logo { height: 34px; } .brand-title { font-size: 13px; } .brand-title small { font-size: 7px; letter-spacing: 2px; } }

/* rango de inversor, referidos, héroes sin arma, equipo de 10 */
.rank { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(232, 195, 74, .25); }
.rank-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: #c9b58a; } .rank-h b { font: 700 13px 'Cinzel', serif; color: var(--gold-l); }
.bar.rk { height: 6px; margin: 4px 0; } .bar.rk i { background: linear-gradient(180deg, #e0b0ff, #8a4ad0); box-shadow: 0 0 6px #b266ff; } .rank-n { font-size: 12px; color: #c9b58a; line-height: 1.2; }
.team { top: 300px; max-height: calc(100vh - 410px); } .tm.unarmed .tm-art { filter: grayscale(1) brightness(.6); } .tm.unarmed .tm-s { color: #ff9a8a; font-weight: 700; } .tm.unarmed .bar.st i { background: #7a2a22; }
.warnbox { font-size: 14px; font-weight: 700; color: #8a2018; background: rgba(200, 68, 58, .14); border: 1px solid rgba(138, 32, 24, .5); border-radius: 6px; padding: 5px 8px; }
.reflink { display: flex; gap: 8px; } .reflink input { flex: 1; min-width: 0; font: 14px Consolas, monospace; padding: 8px; border-radius: 6px; border: 2px solid #8a6238; background: #f8efd6; color: var(--ink); margin: 0; } .reflink .btn { width: auto; margin: 0; }
.nav button { width: 80px; }
.team { max-height: calc(100vh - 440px); } .card .art { height: 72px; }

/* ---------- equipar lo mejor ---------- */
.tabs .autoeq { flex: 0 0 auto; color: #f4ffe8; background: linear-gradient(180deg, #a8e08a, #58a83a 45%, #2f6a1e); border-color: #173a0c; padding: 8px 16px; }

/* ---------- auras de legendarios y míticos en fichas ---------- */
.card .art, .scard .art, .detail .hero-art, .tm-art { position: relative; } .card .art img, .scard .art img, .detail .hero-art img { position: relative; z-index: 1; }
.card.r3 .art::before, .card.r4 .art::before, .scard.r3 .art::before, .scard.r4 .art::before, .detail.r3 .hero-art::before, .detail.r4 .hero-art::before {
  content: ''; position: absolute; left: 50%; top: 52%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--rc) 80%, transparent) 0, color-mix(in srgb, var(--rc) 30%, transparent) 40%, transparent 68%); animation: aura 1.7s ease-in-out infinite; }
.card.r4 .art::after, .scard.r4 .art::after, .detail.r4 .hero-art::after, .card.r3 .art::after, .scard.r3 .art::after, .detail.r3 .hero-art::after {
  content: ''; position: absolute; left: 50%; top: 52%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(var(--rc) 0 5deg, transparent 5deg 20deg); -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 30%, transparent 66%); mask: radial-gradient(circle, transparent 0 22%, #000 30%, transparent 66%); animation: spin 9s linear infinite; }
.card.r3 .art::after, .scard.r3 .art::after, .detail.r3 .hero-art::after { opacity: .28; animation-duration: 16s; }
.card.r3 .art, .card.r4 .art { animation: none; } .card .art { overflow: hidden; border-radius: 6px; }
@keyframes aura { 50% { transform: scale(1.18); opacity: .7; } } @keyframes spin { to { transform: rotate(360deg); } }

/* ---------- invocación épica ---------- */
#summon { overflow: hidden; } .gone { visibility: hidden; }
.sm-ritual { position: absolute; left: 50%; top: 47%; width: 0; height: 0; pointer-events: none; }
.sm-circle { position: absolute; left: -260px; top: -260px; width: 520px; height: 520px; border-radius: 50%; opacity: .32; animation: spin 26s linear infinite;
  background: repeating-conic-gradient(from 0deg, transparent 0 9deg, rgba(210, 170, 255, .7) 9deg 10deg), radial-gradient(circle, transparent 0 44%, rgba(210, 170, 255, .8) 45% 46%, transparent 47% 60%, rgba(255, 222, 140, .85) 61% 62%, transparent 63%);
  -webkit-mask: radial-gradient(circle, transparent 0 28%, #000 30% 68%, transparent 70%); mask: radial-gradient(circle, transparent 0 28%, #000 30% 68%, transparent 70%); }
#summon[data-top="3"] .sm-circle { filter: hue-rotate(140deg) saturate(1.6); } #summon[data-top="4"] .sm-circle { filter: hue-rotate(80deg) saturate(2); }
.sm-intro .sm-circle { opacity: 1; animation: spin 1.6s linear infinite, grow 1.25s ease-out both; }
@keyframes grow { from { scale: .1; opacity: 0; } to { scale: 1; opacity: 1; } }
.sm-beam { position: absolute; left: -110px; top: -80vh; width: 220px; height: 160vh; opacity: 0; filter: blur(8px);
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .9) 50%, transparent); }
.sm-intro .sm-beam { animation: beam 1.25s ease-in both; }
@keyframes beam { 0% { opacity: 0; transform: scaleX(.04); } 65% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(3); } }
.sm-intro .summon-box { animation: shake .09s linear .35s 10; }
@keyframes shake { 25% { transform: translate(3px, -2px); } 75% { transform: translate(-3px, 2px); } }
.summon-box { position: relative; z-index: 1; }
.scard { padding: 0; border: 0; background: none; box-shadow: none; perspective: 700px; animation: deal .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.scard.r3::after, .scard.r4::after { display: none; }
@keyframes deal { from { transform: translateY(-70vh) rotate(-18deg) scale(.5); opacity: 0; } }
.sc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.5, .5, 1); }
.scard.down .sc-in { transform: rotateY(180deg); }
.sc-back, .sc-front { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sc-back { transform: rotateY(180deg); display: grid; place-items: center; border: 3px solid #9a7420; background: repeating-linear-gradient(45deg, #2a1c44 0 8px, #34245a 8px 16px); box-shadow: inset 0 0 0 2px #1a1028, 0 6px 14px rgba(0, 0, 0, .65); transition: box-shadow .3s, border-color .3s; }
.sc-back span { font: 900 46px 'Cinzel', serif; color: #e8c34a; text-shadow: 0 2px 0 #000; }
.sc-front { padding: 8px 6px; color: #fff; border: 3px solid var(--rc); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 60%, #2a2030), #15101c 78%); box-shadow: 0 0 26px var(--rc), inset 0 0 0 1px #000; overflow: hidden; }
.scard.charge { animation: charge .1s linear infinite; z-index: 2; }
.scard.charge .sc-back { border-color: var(--rc); box-shadow: 0 0 34px 8px var(--rc), inset 0 0 24px var(--rc); }
@keyframes charge { 25% { transform: translate(2px, -1px) rotate(.6deg); } 75% { transform: translate(-2px, 1px) rotate(-.6deg); } }
.scard.up.r2, .scard.up.r3, .scard.up.r4 { z-index: 2; } .scard.up.r3 .sc-in, .scard.up.r4 .sc-in { animation: bigpop .7s ease-out; }
@keyframes bigpop { 30% { scale: 1.35; } }
.sc-rays { position: absolute; inset: -70%; border-radius: 50%; opacity: 0; pointer-events: none; background: repeating-conic-gradient(var(--rc) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0 28%, transparent 66%); mask: radial-gradient(circle, #000 0 28%, transparent 66%); transition: opacity .4s; }
.scard.up.r2 .sc-rays { opacity: .22; animation: spin 10s linear infinite; } .scard.up.r3 .sc-rays { opacity: .5; animation: spin 7s linear infinite; } .scard.up.r4 .sc-rays { opacity: .8; animation: spin 4s linear infinite; }
#summon.sm-flash::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--fc); animation: flash .75s ease-out both; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
.sm-shout { position: absolute; left: 0; right: 0; top: 9%; z-index: 4; text-align: center; opacity: 0; pointer-events: none; font: 900 76px 'Cinzel', serif; letter-spacing: 10px; text-transform: uppercase; color: var(--rc); text-shadow: 0 0 34px var(--rc), 0 5px 0 #000, 0 0 4px #fff; }
.sm-shout.go { animation: shout 1.3s ease-out both; }
@keyframes shout { 0% { opacity: 0; transform: scale(3); } 14% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1) translateY(-16px); } }
.sm-skip { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: #b9a67c; font-size: 15px; font-style: italic; z-index: 2; }
.sm-p { position: fixed; z-index: 60; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 10px currentColor; animation: smp 1s ease-out both; }
@keyframes smp { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@media (max-width: 860px) { .sm-shout { font-size: 38px; letter-spacing: 4px; } }